:root {
  color-scheme: dark;
  --bg: #0a0805;
  --panel: #1b1712;
  --border: #4a3f2a;
  --text: #e8dcc0;
  --muted: #a89a72;
  --select: #ff5c5c;
}

* { box-sizing: border-box; }

/* Author-stylesheet `display` declarations (e.g. .display-toggle-bar { display: flex }) always
   win over the UA stylesheet's [hidden] { display: none } at equal "normal" importance,
   regardless of selector specificity — so any hidden-by-default panel that also has its own
   `display` rule would otherwise render anyway. This restores `hidden` as the actual source of
   truth for every element in this file, board-agnostically. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", "Microsoft JhengHei", sans-serif;
  overflow-x: hidden;
}
body.drawer-open { overflow: hidden; }

.app-shell { min-height: 100vh; }
.brand-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
}
.brand-lockup { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.brand-name { font-size: 18px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; }
.brand-tagline { color: var(--muted); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.shell-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.shell-action, .icon-button, .drawer-button {
  border: 1px solid var(--border);
  border-radius: 5px;
  background: #2a2418;
  color: var(--text);
  cursor: pointer;
  font: inherit;
}
.shell-action { padding: 6px 10px; font-size: 12px; }
.shell-action:hover, .shell-action:focus-visible, .icon-button:hover, .icon-button:focus-visible { background: #382f1e; }
.shell-action--primary { background: #8f7131; border-color: #c2a457; color: #180f05; font-weight: 700; }
.shell-action--support[aria-disabled="true"] { color: var(--muted); cursor: not-allowed; }

.stash-group-nav, .stash-page-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.stash-page-nav { min-height: 24px; }
.stash-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  background: #211c14;
  font-size: 12px;
  text-decoration: none;
}
.stash-nav-link:hover, .stash-nav-link:focus-visible { background: #382f1e; }
.stash-nav-link[data-current="true"] { background: #4a3f2a; border-color: #a98b4c; font-weight: 700; }
.stash-nav-link[data-disabled="true"] { color: var(--muted); cursor: not-allowed; opacity: 0.75; }
.stash-nav-link__status { color: var(--muted); font-size: 10px; }
.stash-nav-link[data-current="true"] .stash-nav-link__status { color: #f0d98a; }

.valuation-drawer {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}
.valuation-drawer:not([hidden]) { pointer-events: auto; }
.valuation-drawer__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.62); opacity: 0; transition: opacity 160ms ease; }
.valuation-drawer:not([hidden]) .valuation-drawer__backdrop { opacity: 1; }
.valuation-drawer__panel {
  position: relative;
  z-index: 1;
  width: min(440px, 100vw);
  height: 100%;
  overflow-y: auto;
  padding: 24px;
  background: #17130e;
  border-left: 1px solid var(--border);
  box-shadow: -12px 0 32px rgba(0, 0, 0, 0.35);
  transform: translateX(100%);
  transition: transform 180ms ease;
}
.valuation-drawer:not([hidden]) .valuation-drawer__panel { transform: translateX(0); }
.valuation-drawer__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.valuation-drawer__header h2 { margin: 2px 0 0; font-size: 24px; }
.eyebrow, .oauth-state-card__eyebrow { margin: 0; color: #d0ad5a; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; }
.icon-button { width: 34px; height: 34px; font-size: 24px; line-height: 1; }
.valuation-copy, .drawer-footnote { color: var(--muted); line-height: 1.6; font-size: 13px; }
.oauth-state-card, .manual-valuation-card { margin-top: 18px; padding: 16px; border: 1px solid var(--border); border-radius: 8px; background: #211b13; }
.oauth-state-card h3, .manual-valuation-card h3 { margin: 6px 0 8px; font-size: 16px; }
.oauth-state-card p, .manual-valuation-card p { margin: 0 0 14px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.drawer-button { width: 100%; padding: 10px 12px; text-align: center; }
.drawer-button--disabled, .drawer-button:disabled { color: var(--muted); cursor: not-allowed; opacity: 0.7; }
.drawer-footnote { margin: 18px 2px 0; }

.public-footer {
  width: 100%;
  padding: 14px 16px calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: rgba(27, 23, 18, 0.72);
  color: var(--muted);
}
.public-footer__links { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.public-footer__links a { color: var(--muted); font-size: 12px; text-decoration: none; }
.public-footer__links a:hover, .public-footer__links a:focus-visible { color: var(--text); }
.public-footer__notice { max-width: 900px; margin: 8px 0 0; font-size: 11px; line-height: 1.55; }
.public-footer__notice span { color: var(--text); font-weight: 600; }

#manual-valuation-app { min-width: 0; }
.valuation-search-label { display: block; margin: 4px 0 6px; color: var(--muted); font-size: 12px; }
.valuation-item-search {
  width: 100%;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: #12100b;
  color: var(--text);
}
.valuation-item-search:focus, .quantity-input:focus { outline: 2px solid var(--select); outline-offset: 1px; }
.valuation-search-results {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 190px;
  margin-top: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.valuation-search-result {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: #2a2418;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.valuation-search-result:hover, .valuation-search-result:focus { border-color: var(--select); background: #382f1e; }
.valuation-search-result__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.valuation-search-result__identity, .valuation-line__identity { min-width: 0; overflow: hidden; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.valuation-state { margin: 12px 0 4px; color: var(--text); font-size: 13px; font-weight: 600; }
.valuation-state[data-state="PARTIAL"], .valuation-state[data-state="MARKET_UNAVAILABLE"], .valuation-state[data-state="INVALID"] { color: #ffb3b3; }
.valuation-state[data-state="COMPLETE"] { color: #b8efc4; }
.valuation-market-data-time { margin: 0 0 10px; color: var(--muted); font-size: 11px; }
.valuation-selection-list { display: flex; flex-direction: column; gap: 8px; list-style: none; margin: 0; padding: 0; }
.valuation-line { min-width: 0; padding: 10px; border: 1px solid var(--border); border-radius: 5px; background: #12100b; }
.valuation-line__heading { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.valuation-line__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.valuation-line__controls { display: flex; align-items: center; gap: 5px; margin-top: 8px; }
.quantity-button { width: 30px; height: 30px; padding: 0; }
.quantity-input { width: 100px; min-width: 0; height: 30px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 4px; background: #211b13; color: var(--text); text-align: center; }
.valuation-line__detail { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; color: var(--muted); font-size: 12px; }
.valuation-line__unavailable { color: #ffb3b3; }
.valuation-line__remove { margin-top: 8px; padding: 2px 0; border: 0; background: transparent; color: var(--muted); font-size: 11px; text-decoration: underline; cursor: pointer; }
.valuation-empty-copy { margin: 10px 0; color: var(--muted); font-size: 12px; }
.valuation-total-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); color: var(--muted); }
.valuation-total-row strong { color: #f0d98a; font-size: 20px; }
.valuation-total-row strong span:last-child { color: var(--muted); font-size: 11px; font-weight: 400; }

.status-bar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.status-line { font-size: 15px; }
.status-line--muted { font-size: 13px; color: var(--muted); }

.snapshot-incompatible-banner {
  border: 1px solid #ff5c5c;
  background: #3a1414;
  color: #ffd7d7;
  padding: 8px 10px;
  border-radius: 4px;
}
.snapshot-incompatible-title { font-size: 15px; font-weight: 700; }
.snapshot-incompatible-detail { font-size: 12px; color: #ffb3b3; white-space: pre-line; margin-top: 4px; }

.board-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.board-nav a {
  font-size: 12px;
  color: var(--text);
  background: #2a2418;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 8px;
  text-decoration: none;
}
.board-nav a[data-current="true"] { background: #4a3f2a; font-weight: 600; }

.content-row {
  display: flex;
  align-items: flex-start;
}

.board-wrapper {
  flex: 1;
  min-width: 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.display-mode-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.mode-button {
  font-size: 12px;
  padding: 4px 10px;
  background: #2a2418;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
}
.mode-button:hover { background: #382f1e; }
.mode-button[data-active="true"] { background: #4a3f2a; font-weight: 600; }

/* Scroll container so a "100%" or zoomed-in stage can exceed the viewport without breaking the
   page layout — only relevant in calibration mode; the plain viewer never sets an explicit
   pixel width on .board, so it never needs to scroll. */
.stage-scroll {
  width: 100%;
  display: flex;
  justify-content: center;
}
.board-wrapper.calibrating .stage-scroll {
  overflow: auto;
  max-height: 88vh;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #050403;
}

/* The background image and every overlay layer (price overlays, debug grid, selection overlay)
   share this one "stage" container so they are always scaled by the exact same factor — overlay
   percentages (from computeBoardOverlayRects, derived from the board's own real width/height in
   board-assets.json) can never drift relative to the background at any viewport width or zoom
   level. */
.board {
  position: relative;
  width: 100%;
  max-width: 900px;
  flex: none;
}
.board-wrapper.calibrating .board {
  max-width: none;
}

.board-background {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 6px;
  user-select: none;
  -webkit-user-drag: none;
}

#overlays, .grid-overlay { position: absolute; inset: 0; }
.grid-overlay { pointer-events: none; background-repeat: repeat; }

.slot {
  position: absolute;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(10, 8, 5, 0.78);
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  overflow: hidden;
  pointer-events: none;
}

.slot-name-en { font-size: clamp(10px, 1.2vw, 13px); color: var(--muted); }
.slot-name-zh { font-size: clamp(12px, 1.6vw, 16px); font-weight: 600; }
.slot-price { font-size: clamp(12px, 1.8vw, 18px); color: #f0d98a; font-weight: 600; }
.slot-price--unavailable { color: var(--muted); font-weight: 400; }
.slot-secondary { font-size: clamp(10px, 1.1vw, 12px); color: var(--muted); }

.not-mapped {
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 18px;
  max-width: 640px;
}

/* --- Selection overlay (FAUSTUS-CALIBRATION-INTERACTION-HOTFIX-006B) ---------------------------
   A dedicated, always-on-top, pointer-events:auto layer that sits directly above the background
   image and every other overlay so pointerdown/pointermove/pointerup always land on it, even
   when slots=0 and #overlays is otherwise empty. */
.selection-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  touch-action: none;
  user-select: none;
}
.selection-overlay.armed {
  cursor: crosshair;
}

.selection-instruction-banner {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 6;
  background: rgba(10, 8, 5, 0.85);
  border: 1px solid var(--select);
  color: var(--text);
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 4px;
  pointer-events: none;
  max-width: calc(100% - 20px);
}
.selection-instruction-banner.armed {
  border-color: var(--select);
  background: rgba(80, 10, 10, 0.85);
  font-weight: 600;
}

.selection-rect {
  position: absolute;
  border: 3px solid var(--select);
  background: rgba(255, 92, 92, 0.22);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
.handle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border: 1px solid #000;
  border-radius: 2px;
  transform: translate(-50%, -50%);
}
.handle-nw { left: 0%; top: 0%; }
.handle-n  { left: 50%; top: 0%; }
.handle-ne { left: 100%; top: 0%; }
.handle-e  { left: 100%; top: 50%; }
.handle-se { left: 100%; top: 100%; }
.handle-s  { left: 50%; top: 100%; }
.handle-sw { left: 0%; top: 100%; }
.handle-w  { left: 0%; top: 50%; }

.calibration-panel {
  flex: 0 0 380px;
  width: 380px;
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  background: var(--panel);
  border-left: 1px solid var(--border);
  padding: 16px;
  font-size: 13px;
}
.calibration-panel h2 { font-size: 15px; margin: 0 0 12px; }
.calibration-row { margin-bottom: 10px; }
.calibration-status { font-weight: 600; }
.calibration-status--confirmed { color: #7fd97f; }
#corrupted-reopen-button { margin-top: 6px; }
.primary-button {
  width: 100%;
  padding: 10px;
  font-size: 14px;
  font-weight: 600;
  background: var(--select);
  color: #1a0505;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.primary-button[data-active="true"] { background: #6c6c6c; color: #fff; }
.coord-readout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
  background: #12100b;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 10px;
  font-family: monospace;
}
.draft-form label { display: block; margin-bottom: 6px; }
.draft-form input { width: 100%; }
#add-draft-button:disabled { opacity: 0.5; cursor: not-allowed; }

.catalog-search { width: 100%; padding: 6px 8px; background: #12100b; color: var(--text); border: 1px solid var(--border); border-radius: 4px; }
.catalog-list {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #12100b;
  margin-bottom: 4px;
}
.catalog-row {
  display: grid;
  grid-template-columns: 1.4fr 1.4fr 1fr 0.5fr;
  gap: 6px;
  width: 100%;
  text-align: left;
  padding: 5px 8px;
  font-size: 11px;
  color: var(--text);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.catalog-row:hover { background: #2a2418; }
.catalog-row[data-selected="true"] { background: #4a3f2a; font-weight: 600; }
.catalog-row[data-mvp="true"] .catalog-col-zh::before { content: "★ "; color: var(--select); }
.catalog-col { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selected-identity {
  background: #12100b;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 12px;
  margin-bottom: 10px;
}
.selected-identity div { margin-bottom: 2px; }
.draft-list { list-style: none; padding: 0; margin: 0 0 10px; font-size: 12px; }
.draft-list li { border-bottom: 1px solid var(--border); padding: 4px 0; display: flex; justify-content: space-between; gap: 6px; }
.button-row { display: flex; flex-wrap: wrap; gap: 6px; }
.button-row button { flex: 1 1 auto; }
.export-output { width: 100%; margin-top: 8px; font-family: monospace; font-size: 11px; }

@media (max-width: 640px) {
  .brand-bar { align-items: flex-start; flex-direction: column; gap: 10px; }
  .brand-lockup { align-items: flex-start; flex-direction: column; gap: 2px; }
  .shell-actions { width: 100%; justify-content: flex-start; }
  .shell-action { flex: 1 1 auto; }
  .valuation-drawer { align-items: flex-end; }
  .valuation-drawer__panel {
    width: 100%;
    height: auto;
    max-height: 88vh;
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
    border-left: none;
    border-top: 1px solid var(--border);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.35);
    transform: translateY(100%);
  }
  .valuation-drawer:not([hidden]) .valuation-drawer__panel { transform: translateY(0); }
  .slot-name-en { display: none; }
  .slot-secondary { display: none; }
  .content-row { flex-direction: column; }
  .calibration-panel { flex-basis: auto; width: 100%; max-height: none; }
  .board-wrapper.calibrating .stage-scroll { max-height: 60vh; }
  .display-toggle-bar { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* --- Phase F/G/C (FAUSTUS-ESSENCE-MVP-44-SLOTS-AND-CORRUPTED-CALIBRATION-006D) ------------------ */

.display-toggle-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}
.display-toggle-bar label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }

.layout-review-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}
.legend-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  margin-right: 3px;
}
.legend-badge--mvp { background: #f0d98a; color: #1a0505; }
.legend-badge--corrupted { background: var(--select); color: #1a0505; }
.legend-badge--locked { background: #4a3f2a; color: var(--text); }

/* MVP board: compact "N.NN C" price tile. Hover/focus reveals full detail via #hover-detail. */
.slot--mvp-compact {
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2px;
  cursor: help;
  pointer-events: auto;
}
.slot--mvp-compact .slot-price { font-size: clamp(11px, 1.6vw, 16px); }
.slot--mvp-compact .slot-name-zh,
.slot--mvp-compact .slot-name-en,
.slot--mvp-compact .slot-secondary { display: none; }

.hover-detail {
  position: absolute;
  z-index: 20;
  max-width: 320px;
  background: rgba(10, 8, 5, 0.95);
  border: 1px solid var(--select);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.5;
  pointer-events: none;
  white-space: pre-line;
}

/* layoutReview / corrupted-calibration: 1-100 shown as thin read-only outlines beneath the
   interactive/price layer, never intercepting pointer events. */
.locked-overlays { position: absolute; inset: 0; pointer-events: none; }
.locked-slot {
  position: absolute;
  border: 1px dashed var(--muted);
  border-radius: 4px;
  font-size: 9px;
  line-height: 1.25;
  color: var(--muted);
  overflow: hidden;
  padding: 1px 2px;
  background: rgba(10, 8, 5, 0.35);
}
.locked-slot[data-mvp="true"] { border-color: #f0d98a; color: #f0d98a; }
.locked-slot .locked-slot-number { font-weight: 700; }

.corrupted-slot-outline {
  position: absolute;
  border: 3px solid var(--select);
  border-radius: 4px;
  background: rgba(255, 92, 92, 0.28);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  padding: 2px 4px;
  pointer-events: none;
}
.corrupted-slot-outline[data-draft="true"] { border-style: dashed; }

#corrupted-item-list .catalog-row { grid-template-columns: 1fr 1fr; }

/* --- Phase H/I (FAUSTUS-FRAGMENT-SCARABS-MVP-VERTICAL-SLICE-006G): the 1 UNVERIFIED slot's
   in-cell marker — deliberately distinct from .slot-price/.slot-price--unavailable so it can
   never be mistaken for a tracked-but-unavailable "—" dash. */
.slot-pending {
  font-size: clamp(9px, 1.3vw, 12px);
  color: var(--select);
  font-weight: 600;
  text-align: center;
}

#scarab-item-list .catalog-row { grid-template-columns: 1fr 1fr; }