/* Collector's desk: deep charcoal, vivid evergreen controls, crisp gold detail.
   Screen-only presentation. Do not change header geometry, print sheets,
   ownership treatments, foil/variant artwork, or save/transaction behavior. */
@media screen {
  :root {
    --font-sans: Arial, Helvetica, sans-serif;
    --bg: #0c1110;
    --bg-2: #17221e;
    --bg-3: #22352c;
    --bg-elevated: #294237;
    --line: #526e60;
    --ink: #f8fcf9;
    --ink-2: #dde9e1;
    --ink-3: #b6cabc;
    --accent: #00d98b;
    --accent-strong: #00bd76;
    --on-accent: #072519;
    --gold: #ffc400;
    --ok: #00d98b;
    --warn: #ffc400;
    --bad: #ff9fa8;
    --miss: #e56a70;
    --surface: var(--bg-2);
    --accent-2: var(--accent);
    --radius: 10px;
    --selected: #075134;
  }
  html[data-theme="light"] {
    --bg: #edf2ef;
    --bg-2: #ffffff;
    --bg-3: #e1ebe5;
    --bg-elevated: #ffffff;
    --line: #8aa695;
    --ink: #10291c;
    --ink-2: #294c37;
    --ink-3: #44634f;
    --accent: #006e3e;
    --accent-strong: #00562f;
    --on-accent: #ffffff;
    --gold: #855000;
    --ok: #006e3e;
    --warn: #855000;
    --bad: #ae1531;
    --miss: #ae1531;
    --selected: #b5f1d3;
  }
  body { background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 1.5; }
  h1, h2, h3, .admin-metrics strong, #panel-home :is(h2,h3) {
    font-family: var(--font-sans); font-weight: 700; letter-spacing: -.02em;
  }
  /* Headings and useful labels should not inherit a muted helper-text color. */
  #panel-guide .guide-workspace-title h2, #panel-sheet .watch-page-head-minimal h2,
  #guideBody .totals strong, #guideBody .guide-card-options > summary,
  #panel-guide .guide-tools > summary, #panel-guide .guide-library-heading {
    color: var(--ink);
  }
  button, input, select, textarea { font-family: inherit; }
  input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 1; }
  input:is([type="checkbox"], [type="radio"], [type="range"]) { accent-color: var(--accent); }
  input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, summary:focus-visible, a:focus-visible {
    outline-color: var(--accent);
  }

  /* Stable navigation keeps the same rows and touch targets in every state. */
  .topbar, .site-header { background: var(--bg-2); border-color: var(--line); box-shadow: none; backdrop-filter: none; }
  .brand h1, .site-brand { color: var(--gold); font-weight: 700; text-shadow: none; }
  .logo { box-shadow: none; border-color: var(--line); }
  .topbar #tabs, .site-nav { background: var(--bg-2); border-color: transparent; border-radius: 8px; }
  .topbar #tabs .tab, .site-tab { font-family: var(--font-sans); font-weight: 600; color: var(--ink-2); border-radius: 6px; }
  .topbar #tabs .tab.is-active, .site-tab[aria-current="page"] {
    color: var(--on-accent); background: var(--accent); border-color: var(--accent);
    box-shadow: none;
  }
  .topbar #tabs .tab:not(.is-active):not(:disabled):not([aria-disabled="true"]):not(.tab-coming-soon):hover,
  .site-tab:not([aria-current="page"]):not([aria-disabled="true"]):hover { background: var(--bg-3); color: var(--ink); }
  .topbar #tabs .tab.is-active .tab-icon,
  .site-tab[aria-current="page"] svg { color: var(--on-accent); }
  .site-header a:focus-visible, .viewer-context a:focus-visible { outline-color: var(--accent); }
  .bar-fill { background: var(--accent); box-shadow: none; }
  .header-save-trigger { background: var(--bg-2); }

  .card, .portfolio-kpis article, .portfolio-card, .community-post, .shop-collector-card,
  .community-shell .card { background: var(--bg-2); border-color: var(--line); border-radius: 10px; box-shadow: none; }
  .btn, .btn:hover, .btn.primary:hover { box-shadow: none; }
  .btn { background: var(--bg-3); border-radius: 7px; font-weight: 600; }
  .btn.ghost:not(:disabled):not(.danger):not(.primary) { background: var(--bg-3); }
  .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; box-shadow: none; }
  .btn.primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
  .btn.danger { color: var(--bad); }
  .seg { border-radius: 8px; background: var(--bg); }
  .seg button.is-active { background: var(--accent); color: var(--on-accent); box-shadow: none; }
  #guideBody > .guide-tally .guide-card-groups .check:has(input:checked) {
    background: var(--selected); border-color: var(--accent);
  }
  .stage-check, .watch-compact-check, .pop-row button, .pocket-menu:hover,
  .vchip.normal.on, .vchip.reverse.on, .community-nav button span {
    color: var(--on-accent);
  }
  .pocket.missing-mark::after, .account-delete-confirm .btn.danger { color: var(--on-accent); }
  .pocket .rev, .ctile .cart .rev, #panel-home .home-layout-card.demo-owned::after { color: var(--on-accent); }
  .set-drop { background: var(--bg-2); backdrop-filter: none; }
  .admin-header, .watch-transaction-head, .watch-set-dialog-head,
  .watch-flow-card, .custom-rule-panel { background: var(--bg-2); }
  .community-post-card { background: var(--bg); }
  .spread { background: #0b1510; border-color: var(--line); border-radius: 12px; box-shadow: 0 8px 24px #0005; }
  .spread .binder-page { background: var(--bg-2); border-color: var(--line); box-shadow: none; }
  html[data-theme="light"] .spread { background: #bfcec4; border-color: var(--line); }
  html[data-theme="light"] .spread .binder-page { background: #f7faf8; border-color: var(--line); }
  .pocket { background: #0c1510; box-shadow: none; }
  html[data-theme="light"] .pocket { background: #d7e4dc; }
  /* Text over card artwork keeps a dark scrim in either app theme. */
  .pocket .pname .pprice { color: #e9c56d; }
  .ctile .cnum, .slot .badge, .pocket-menu:not(:hover) { color: #f4f5f2; }
  .slot .badge { --ok: #90ceb0; --warn: #e9c56d; --bad: #f59b9e; }

  /* Editorial type and an unembellished art preview on the public front door. */
  #panel-home, html[data-theme="light"] #panel-home { --home-pop: var(--accent); --home-on-pop: var(--on-accent); }
  #panel-home .home-hero { background: none; }
  #panel-home .home-copy h2 { font-size: clamp(36px, 4.3vw, 64px); line-height: 1.08; letter-spacing: -.04em; font-weight: 700; }
  #panel-home .home-copy h2 span { color: var(--ink); }
  #panel-home .home-kicker { color: var(--ink-2); letter-spacing: .07em; font-weight: 600; }
  #panel-home .btn { border-radius: 7px; font-weight: 700; }
  #panel-home .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: none; }
  #panel-home .btn.primary:hover { background: var(--accent-strong); }
  #panel-home .home-layout-demo, #panel-home .home-market-preview { border-radius: 10px; box-shadow: none; }
  #panel-home .home-layout-demo-top > b { border-radius: 5px; }
  #panel-home .home-layout-book { box-shadow: none; }
  #panel-home .home-layout-page { background: var(--bg-2); }

  /* Same visual language for the account-free shared viewer. */
  #shared-watchlist .viewer-context, #shared-watchlist .sub, #shared-watchlist .filter-note,
  #shared-watchlist .price-scale, #shared-watchlist .group-choice small,
  #shared-watchlist .filter-details summary small, #shared-watchlist .sect h2 { color: var(--ink-2); }
  #shared-watchlist .viewer-context a { color: var(--accent); }
  #shared-watchlist #bar { background: var(--bg); border-color: var(--line); }
  #shared-watchlist #bar :is(button, select, input:not([type="checkbox"]):not([type="radio"]):not([type="range"])), #refresh {
    background: var(--bg-2); border-color: var(--line); color: var(--ink); border-radius: 7px;
  }
  #shared-watchlist #bar input:is([type="checkbox"], [type="radio"], [type="range"]) { accent-color: var(--accent); }
  #shared-watchlist #bar :is(input, button, select, summary):focus-visible { outline-color: var(--accent); }
  #shared-watchlist .group-choice, #shared-watchlist .filter-details { border-color: var(--line); border-radius: 7px; }
  #shared-watchlist .group-choice:has(input:checked) { background: var(--selected); border-color: var(--accent); }
  #shared-watchlist #bar .chip.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
  #shared-watchlist .sect h2 b { color: var(--ink); }
  #shared-watchlist .c { background: var(--bg-2); border-color: var(--line); border-radius: 6px; }
  #shared-watchlist .art { background: var(--bg-3); }
  #shared-watchlist .m { font-size: 14px; }
  #shared-watchlist .m .set { color: var(--ink-3); font-size: 12px; }
  #shared-watchlist .m .pr { color: var(--gold); font-variant-numeric: tabular-nums; }
  #shared-watchlist .err, body > footer, body > footer a { color: var(--ink-2); }
}