:root {
  color-scheme: light;
  --world-paper: #f3f6f3;
  --world-surface: #ffffff;
  --world-surface-soft: #e8ede8;
  --world-surface-quiet: #f7f9f7;
  --world-line: #cfd6cf;
  --world-line-strong: #aeb8ae;
  --world-ink: #151915;
  --world-ink-soft: #354038;
  --world-muted: #657068;
  --world-faint: #7d877f;
  --world-charcoal: #141815;
  --world-teal: #087f78;
  --world-teal-soft: #dcefeb;
  --world-green: #2f7d4b;
  --world-green-soft: #e1f0e6;
  --world-amber: #956d14;
  --world-amber-soft: #f4ead1;
  --world-red: #b74339;
  --world-red-soft: #f5dfdc;
  --world-blue: #3479c8;

  --ink: var(--world-ink);
  --muted: var(--world-muted);
  --quiet: var(--world-faint);
  --panel: rgba(255, 255, 255, 0.97);
  --panel-solid: var(--world-surface);
  --line: var(--world-line);
  --line-strong: var(--world-line-strong);
  --teal: var(--world-teal);
  --mint: var(--world-teal);
  --amber: var(--world-amber);
  --coral: #d95f4c;
}

* {
  letter-spacing: 0;
}

[hidden] {
  display: none !important;
}

body {
  color: var(--world-ink);
}

button,
input,
select {
  color: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline-color: var(--world-teal);
}

.browser,
.studio {
  top: 82px;
  right: 20px;
  bottom: 20px;
  width: min(392px, calc(100% - 40px));
  border: 1px solid var(--world-line-strong);
  border-radius: 6px;
  background: var(--panel);
  box-shadow: 0 18px 52px rgba(20, 24, 21, 0.16);
  backdrop-filter: none;
}

.browser {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.browser-head,
.studio-head {
  min-height: 76px;
  border-bottom: 1px solid var(--world-line);
  background: var(--world-surface);
  padding: 13px 14px 13px 16px;
}

.browser-title h1,
.studio-head h1 {
  margin: 2px 0 0;
  color: var(--world-ink);
  font-size: 21px;
  font-weight: 780;
  line-height: 1.15;
}

.source-line,
.connection {
  gap: 7px;
  margin: 0;
  color: var(--world-faint);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.source-dot,
.connection i {
  width: 7px;
  height: 7px;
  background: var(--world-faint);
}

.source-dot.live,
.connection i.live {
  background: var(--world-teal);
  box-shadow: 0 0 0 3px rgba(8, 127, 120, 0.12);
}

.source-dot.preview {
  background: #d7a72e;
}

.source-dot.mixed {
  background: linear-gradient(90deg, var(--world-teal) 50%, #d7a72e 50%);
  box-shadow: 0 0 0 3px rgba(8, 127, 120, 0.08);
}

.connection i.error {
  background: var(--world-red);
}

.browser-summary {
  margin-top: 4px;
  color: var(--world-muted);
  font-size: 11px;
  line-height: 1.35;
}

.browser-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  border-bottom: 1px solid var(--world-line);
  background: var(--world-surface-soft);
  padding: 3px;
}

.browser-tab {
  min-width: 0;
  min-height: 38px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--world-muted);
  font-size: 10px;
  font-weight: 760;
  cursor: pointer;
}

.browser-tab:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.72);
  color: var(--world-ink);
}

.browser-tab[aria-selected="true"] {
  background: var(--world-surface);
  color: var(--world-ink);
  box-shadow: 0 1px 3px rgba(20, 24, 21, 0.12);
}

.browser-tab:disabled {
  opacity: 0.45;
  cursor: default;
}

.browser-view {
  min-height: 0;
}

.browser-browse {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.icon-button {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
  border: 1px solid var(--world-line);
  border-radius: 4px;
  background: var(--world-surface-soft);
  color: var(--world-ink);
  font: 800 18px/1 ui-sans-serif, system-ui, sans-serif;
  box-shadow: none;
}

.icon-button:hover {
  border-color: var(--world-line-strong);
  background: var(--world-charcoal);
  color: #ffffff;
}

.browser-filters {
  border-bottom: 1px solid var(--world-line);
  background: var(--world-surface-quiet);
  padding: 11px 12px 12px;
}

.filter-label,
.section-label,
.section-kicker {
  color: var(--world-faint);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.filter-label {
  margin-bottom: 7px;
}

.theme-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.theme-filter {
  min-width: 0;
  min-height: 52px;
  display: grid;
  align-content: center;
  gap: 3px;
  border: 1px solid var(--world-line);
  border-radius: 4px;
  background: var(--world-surface);
  padding: 7px 8px;
  color: var(--world-ink-soft);
  text-align: left;
  cursor: pointer;
}

.theme-filter:hover:not(:disabled) {
  border-color: var(--world-line-strong);
  background: var(--world-surface-soft);
}

.theme-filter[aria-pressed="true"] {
  border-color: var(--world-charcoal);
  background: var(--world-charcoal);
  color: #ffffff;
}

.theme-filter:disabled {
  opacity: 0.45;
  cursor: default;
}

.theme-filter-name {
  min-width: 0;
  font-size: 10px;
  font-weight: 780;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.theme-filter-count {
  color: var(--world-faint);
  font-size: 8px;
  font-weight: 720;
  line-height: 1.2;
}

.theme-filter[aria-pressed="true"] .theme-filter-count {
  color: #b9c4bc;
}

.status-filter-panel {
  margin-top: 11px;
  border-top: 1px solid var(--world-line);
  padding-top: 10px;
}

.status-filters {
  gap: 2px;
  border: 1px solid var(--world-line);
  border-radius: 5px;
  background: var(--world-surface-soft);
  padding: 2px;
}

.status-filter {
  min-height: 38px;
  border: 0;
  border-radius: 3px;
  color: var(--world-muted);
  font-size: 10px;
  font-weight: 720;
}

.status-filter:hover {
  background: rgba(255, 255, 255, 0.72);
  color: var(--world-ink);
}

.status-filter[aria-pressed="true"] {
  border-color: var(--world-charcoal);
  background: var(--world-charcoal);
  color: #ffffff;
}

.lot-list {
  background: var(--world-surface);
  scrollbar-color: var(--world-line-strong) transparent;
}

.lot-group + .lot-group {
  border-top-color: var(--world-line);
}

.lot-group-title {
  border-bottom: 1px solid var(--world-line);
  background: var(--world-surface-soft);
  padding: 7px 12px;
  color: var(--world-ink-soft);
  font-size: 9px;
}

.lot-group-title span:last-child {
  color: var(--world-faint);
}

.lot-row {
  min-height: 57px;
  border-top-color: #e2e7e2;
  background: var(--world-surface);
  padding: 10px 12px;
}

.lot-row:hover {
  background: var(--world-surface-quiet);
}

.lot-row[aria-current="true"] {
  background: var(--world-teal-soft);
  box-shadow: inset 3px 0 0 var(--world-teal);
}

.row-top {
  justify-content: flex-start;
}

.showcase-rank {
  flex: 0 0 24px;
  color: var(--world-teal);
  font: 800 10px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

.row-title {
  flex: 1 1 auto;
  color: var(--world-ink);
  font-size: 12px;
  font-weight: 760;
}

.row-meta {
  flex-wrap: wrap;
  color: var(--world-faint);
  font-size: 10px;
}

.model-standings {
  border-top: 1px solid var(--world-line-strong);
  background: var(--world-surface-quiet);
  padding: 10px 12px 12px;
}

.model-standings h3 {
  margin: 0 0 7px;
  color: var(--world-muted);
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
}

.model-standing-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  border-top: 1px solid var(--world-line);
}

.model-standing-rank,
.model-standing-rating {
  color: var(--world-teal);
  font: 800 9px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

.model-standing-identity {
  min-width: 0;
}

.model-standing-identity strong,
.model-standing-identity small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-standing-identity strong {
  color: var(--world-ink);
  font-size: 10px;
}

.model-standing-identity small {
  margin-top: 2px;
  color: var(--world-faint);
  font-size: 9px;
}

.status {
  border-color: var(--world-line);
  background: var(--world-surface-quiet);
  color: var(--world-muted);
}

.status.needs_challenger {
  border-color: #d8c38d;
  background: var(--world-amber-soft);
  color: #72520b;
}

.status.voting {
  border-color: #91c7bf;
  background: var(--world-teal-soft);
  color: #07665f;
}

.status.open {
  border-color: #dfa69f;
  background: var(--world-red-soft);
  color: #92382f;
}

.status.preview {
  border-color: var(--world-line);
  background: var(--world-surface-soft);
  color: var(--world-muted);
}

.empty-list {
  color: var(--world-muted);
}

.lot-details {
  border-top: 1px solid var(--world-line);
  background: var(--world-surface-quiet);
  padding: 16px;
  scrollbar-color: var(--world-line-strong) transparent;
}

.detail-district {
  color: var(--world-teal);
  font-size: 9px;
}

.detail-title {
  margin-top: 7px;
  color: var(--world-ink);
  font-size: 19px;
  font-weight: 780;
  line-height: 1.22;
}

.detail-id {
  color: var(--world-faint);
}

.stewardship {
  margin-top: 14px;
  border-color: var(--world-line);
  padding: 11px 0;
}

.steward-name {
  color: var(--world-ink);
  font-size: 13px;
}

.steward-meta {
  color: var(--world-muted);
}

.submission-note {
  color: var(--world-faint);
}

.counts {
  margin-top: 13px;
  border-color: var(--world-line);
  background: var(--world-surface);
}

.counts div + div {
  border-left-color: var(--world-line);
}

.counts dt {
  color: var(--world-faint);
}

.counts dd {
  color: var(--world-ink);
}

.brief-block {
  margin-top: 15px;
}

.brief-text {
  margin-top: 6px;
  color: var(--world-ink-soft);
  font-size: 12px;
  line-height: 1.55;
}

.challenge-link {
  min-height: 44px;
  margin-top: 16px;
  border-color: var(--world-teal);
  background: var(--world-teal);
  color: #ffffff;
}

.challenge-link:hover {
  border-color: #065f59;
  background: #065f59;
}

.preview-note {
  margin-top: 14px;
  border-left: 3px solid #d1a32d;
  padding-left: 10px;
  color: #70530d;
}

.hud {
  right: 432px;
  bottom: 20px;
  padding: 0 0 0 20px;
}

.hint {
  gap: 13px;
  border: 1px solid var(--world-line);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.94);
  padding: 9px 11px;
  box-shadow: 0 10px 28px rgba(20, 24, 21, 0.1);
  color: var(--world-muted);
  font-size: 10px;
}

.hint b {
  color: var(--world-ink);
}

.hint kbd {
  border-color: var(--world-line-strong);
  background: var(--world-surface-soft);
  color: var(--world-ink-soft);
}

.worldstats {
  gap: 0;
  border: 1px solid var(--world-line-strong);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.95);
  padding: 0;
  box-shadow: 0 10px 28px rgba(20, 24, 21, 0.1);
  color: var(--world-ink);
}

.worldstats div {
  min-width: 62px;
  padding: 8px 10px;
  text-align: center;
}

.worldstats div + div {
  border-left: 1px solid var(--world-line);
}

.worldstats div b {
  color: var(--world-ink);
  font-size: 15px;
}

.worldstats div span {
  color: var(--world-faint);
  font-size: 8px;
}

.plaque {
  min-width: 190px;
  border-color: var(--world-line-strong);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.97);
  padding: 11px 13px;
  box-shadow: 0 14px 40px rgba(20, 24, 21, 0.18);
  color: var(--world-ink);
  backdrop-filter: none;
}

.plaque .p-brief {
  color: var(--world-teal);
}

.plaque .p-model {
  color: var(--world-ink);
}

.plaque .p-meta,
.plaque .p-foot {
  color: var(--world-muted);
}

.plaque .p-foot b {
  color: var(--world-ink);
}

.overlay,
.loading {
  background: var(--world-paper);
  color: var(--world-muted);
}

.overlay .spinner,
.spinner {
  border-color: var(--world-line-strong);
  border-top-color: var(--world-teal);
}

.err {
  color: var(--world-red);
}

.studio {
  grid-template-rows: auto minmax(0, 1fr);
}

.world-editor {
  background: var(--world-surface);
}

.world-settings {
  border-bottom-color: var(--world-line);
  background: var(--world-surface-quiet);
  padding: 15px 16px 16px;
}

.section-heading h2 {
  color: var(--world-ink);
  font-size: 13px;
  font-weight: 760;
}

.save-state {
  color: var(--world-faint);
}

.save-state.saving {
  color: var(--world-amber);
}

.save-state.error {
  color: var(--world-red);
}

.field {
  gap: 6px;
  margin-top: 12px;
}

.field > span {
  color: var(--world-muted);
  font-size: 10px;
}

.field input,
.field select {
  height: 38px;
  border-color: var(--world-line-strong);
  border-radius: 4px;
  background: var(--world-surface);
  color: var(--world-ink);
  font-size: 12px;
}

.field input:hover,
.field select:hover {
  border-color: var(--world-teal);
}

.field input:focus,
.field select:focus {
  border-color: var(--world-teal);
}

.inventory {
  background: var(--world-surface);
}

.inventory-heading {
  min-height: 64px;
  border-bottom-color: var(--world-line);
  background: var(--world-surface-soft);
  padding: 10px 16px;
}

.count-badge {
  border-color: var(--world-line-strong);
  background: var(--world-surface);
  color: var(--world-muted);
}

.inventory-list {
  scrollbar-color: var(--world-line-strong) transparent;
}

.inventory-item {
  min-height: 58px;
  border-bottom-color: #e2e7e2;
  background: var(--world-surface);
  padding: 10px 12px;
}

.inventory-item:hover {
  background: var(--world-surface-quiet);
}

.build-swatch {
  border-color: var(--world-line);
  background: var(--world-surface-soft);
}

.inventory-copy strong {
  color: var(--world-ink);
}

.inventory-copy span {
  color: var(--world-faint);
}

.place-button {
  min-height: 34px;
  border-color: var(--world-teal);
  background: var(--world-teal);
  color: #ffffff;
}

.place-button:hover:not(:disabled) {
  border-color: #065f59;
  background: #065f59;
}

.empty-inventory,
.signed-out {
  background: var(--world-surface);
  padding: 28px 20px;
}

.empty-inventory h3,
.signed-out h2 {
  color: var(--world-ink);
  font-size: 18px;
}

.empty-inventory p,
.signed-out p:not(.section-kicker) {
  color: var(--world-muted);
}

.empty-inventory a,
.primary-action {
  border: 1px solid var(--world-teal);
  border-radius: 4px;
  background: var(--world-teal);
  color: #ffffff;
}

.empty-inventory a:hover,
.primary-action:hover {
  border-color: #065f59;
  background: #065f59;
}

.selection-bar {
  left: 20px;
  bottom: 20px;
  max-width: calc(100% - 452px);
  min-height: 56px;
  border-color: var(--world-line-strong);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.97);
  padding: 8px 8px 8px 14px;
  box-shadow: 0 14px 38px rgba(20, 24, 21, 0.14);
  color: var(--world-ink);
  backdrop-filter: none;
}

.selection-copy span {
  color: var(--world-faint);
}

.selection-copy strong {
  color: var(--world-ink);
}

.selection-actions {
  border-color: var(--world-line);
  background: var(--world-surface-soft);
}

.selection-actions button {
  background: transparent;
  color: var(--world-ink-soft);
}

.selection-actions button + button {
  border-left-color: var(--world-line);
}

.selection-actions button:hover {
  background: var(--world-surface);
}

.selection-actions .primary-tool {
  background: var(--world-charcoal);
  color: #ffffff;
}

.selection-actions .primary-tool:hover {
  background: #2a302b;
}

.selection-actions .danger {
  color: var(--world-red);
}

.selection-actions .danger:hover {
  background: var(--world-red-soft);
}

.world-meta {
  top: 82px;
  left: 20px;
  border-color: var(--world-line-strong);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 28px rgba(20, 24, 21, 0.1);
  color: var(--world-muted);
  backdrop-filter: none;
}

.world-meta strong {
  color: var(--world-ink);
}

.world-meta i {
  background: var(--world-line);
}

.toast {
  border-color: rgba(255, 255, 255, 0.2);
  background: var(--world-charcoal);
  color: #ffffff;
}

.toast.error {
  border-color: #e7a49c;
  background: #7e3029;
}

@media (min-width: 901px) {
  .studio:has(.signed-out:not([hidden])) {
    bottom: auto;
    grid-template-rows: auto auto;
  }

  .browser:not(.is-open),
  .studio:not(.is-open) {
    top: 82px;
    width: 48px;
    background: var(--world-surface);
  }

  .browser:not(.is-open) {
    grid-template-rows: auto 0 0;
  }

  .browser:not(.is-open) .browser-tabs,
  .browser:not(.is-open) .browser-view {
    display: none;
  }

  .browser:not(.is-open) .browser-head,
  .studio:not(.is-open) .studio-head {
    min-height: 46px;
  }
}

@media (max-width: 1180px) and (min-width: 901px) {
  .browser,
  .studio {
    top: 70px;
    right: 12px;
    bottom: 12px;
  }

  .browser:not(.is-open),
  .studio:not(.is-open) {
    top: 70px;
  }

  .hud {
    right: 416px;
    bottom: 12px;
    padding-left: 12px;
  }

  .hint {
    display: none;
  }

  .selection-bar {
    left: 12px;
    bottom: 12px;
    max-width: calc(100% - 428px);
  }

  .world-meta {
    top: 70px;
    left: 12px;
  }
}

@media (max-width: 900px) {
  .browser,
  .studio {
    top: auto;
    right: 8px;
    bottom: 8px;
    left: 8px;
    width: auto;
    border-color: var(--world-line-strong);
  }

  .browser {
    height: min(76dvh, 650px);
    grid-template-rows: auto auto minmax(0, 1fr);
  }

  .studio {
    height: min(68dvh, 610px);
  }

  .browser:not(.is-open),
  .studio:not(.is-open) {
    transform: translateY(calc(100% - 61px));
  }

  .browser-head,
  .studio-head {
    min-height: 60px;
    padding: 10px 11px 10px 14px;
  }

  .browser-title h1,
  .studio-head h1 {
    font-size: 18px;
  }

  .hud,
  .plaque {
    display: none;
  }

  .selection-bar {
    right: 10px;
    bottom: 76px;
    left: 10px;
    max-width: none;
  }

  .world-meta {
    top: 68px;
    left: 10px;
  }

  .toast {
    bottom: 78px;
  }
}

@media (max-width: 520px) {
  .browser {
    height: min(82dvh, 680px);
    grid-template-rows: auto auto minmax(0, 1fr);
  }

  .studio {
    height: min(72dvh, 630px);
  }

  .browser-filters {
    padding: 9px 9px 10px;
  }

  .status-filter {
    min-height: 40px;
    padding-inline: 3px;
    font-size: 9px;
  }

  .lot-details {
    padding: 14px;
  }

  .field-row {
    gap: 7px;
  }

  .selection-bar {
    gap: 10px;
    padding-left: 10px;
  }

  .selection-copy {
    max-width: 112px;
  }

  .selection-actions button {
    padding: 5px 7px;
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .browser,
  .studio,
  .plaque {
    transition: none;
  }
}