/* ============================================================
   TITAN RELIQUARY · v3 "Midnight museum" presentation overhaul
   Cinematic, precise, fast. Tokens first, components after.
   ============================================================ */

/* --- Self-hosted Fraunces (display serif). No CDN — PWA works offline. --- */
@font-face {
  font-family: "Fraunces";
  src: url("fonts/Fraunces-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/Fraunces-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/Fraunces-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- After Hours (default): the signature midnight exhibition.
   True-black gallery, champagne spotlights, heavier film grain. --- */
:root {
  --bg: #060605;
  --bg2: #0b0a08;
  --surface: #0e0d0a;
  --surface2: #161310;
  --ink: #f2ead8;
  --muted: #9a927c;
  --faint: #615a48;
  --gold: #c8a94a;
  --gold-soft: #e8d9a8;
  --gold-deep: #7a6a35;
  --line: rgba(200, 169, 74, 0.14);
  --line-strong: rgba(200, 169, 74, 0.32);
  --ok: #6bbf7a;
  --warn: #d4a017;
  --bad: #c45c4a;
  --radius: 16px;
  --shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 18px 50px rgba(0, 0, 0, 0.7);
  --font: "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "Cascadia Code", "Consolas", "Menlo", monospace;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --grain-op: 0.05;

  /* legacy aliases used across templates */
  --panel: var(--surface);
  --text: var(--ink);
  --gold-dim: var(--gold-deep);
  --danger: var(--bad);
  --chip: var(--surface2);
  --row-hover: rgba(200, 169, 74, 0.06);
  --th-bg: #100f0a;
  --tabgrad1: #1e1c12;
  --tabgrad2: #100f08;
  --foot-bg: rgba(6, 6, 5, 0.9);
  --ph-bg: #0a0a08;
  --sel-bg: #171509;
  --hold-bg: linear-gradient(135deg, #1e1808, #100c04);
  --missing: var(--faint);
  --drawerbar-bg: rgba(10, 10, 9, 0.92);
  --cardmeta: #cfc7b4;
  --skeleton1: #1c1c17;
  --skeleton2: #0b0b0a;
  --toastgrad1: #1e1c12;
  --toastgrad2: #100f08;
  --border: var(--line);
}

/* --- Conservator: the conservator's desk. Layered archival paper + oxblood stamps. --- */
html[data-atmo="conservator"] {
  --bg: #f4efe4;
  --bg2: #e9e0cb;
  --surface: #faf6ec;
  --surface2: #f0e7d1;
  --ink: #221c12;
  --muted: #6b5d49;
  --faint: #a89a7d;
  --gold: #8a5a1e;
  --gold-soft: #7a2e2e;
  --gold-deep: #a8894c;
  --line: rgba(122, 46, 46, 0.20);
  --line-strong: rgba(122, 46, 46, 0.40);
  --ok: #3f7a44;
  --warn: #a06a00;
  --bad: #a03024;
  --shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 14px 34px rgba(60, 45, 20, 0.16);
  --th-bg: #e8dcc0;
  --tabgrad1: #e6d7b4;
  --tabgrad2: #d5c296;
  --foot-bg: rgba(244, 239, 228, 0.92);
  --ph-bg: #e9dfc7;
  --sel-bg: #e6d5ae;
  --hold-bg: linear-gradient(135deg, #f2e8cf, #e0d0a8);
  --drawerbar-bg: rgba(250, 246, 236, 0.92);
  --cardmeta: #4a4136;
  --skeleton1: #e2d7ba;
  --skeleton2: #f0e9d6;
  --toastgrad1: #efe4cb;
  --toastgrad2: #e2d4b0;
  --row-hover: rgba(122, 46, 46, 0.06);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --grain-op: 0.05;
}

/* --- Conservator identity: the conservator's desk.
   Ruled ledger lines, oxblood rubber stamps, paper fiber. --- */
html[data-atmo="conservator"] body {
  background-image:
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(122, 46, 46, 0.045) 27px 28px);
}
html[data-atmo="conservator"] .sec-head {
  border-bottom: 2px solid var(--line-strong);
  position: relative;
}
html[data-atmo="conservator"] .sec-head::after {
  content: "";
  display: block;
  height: 3px;
  margin-top: 0.35rem;
  background: repeating-linear-gradient(90deg, var(--line-strong) 0 14px, transparent 14px 22px);
  opacity: 0.7;
}
html[data-atmo="conservator"] .sec-head h2 { font-weight: 700; letter-spacing: 0.005em; }
/* rubber-stamp badges */
html[data-atmo="conservator"] .badge, html[data-atmo="conservator"] .badge-kind,
html[data-atmo="conservator"] .badge-status, html[data-atmo="conservator"] .badge-ag,
html[data-atmo="conservator"] .badge-au {
  border: 2px solid currentColor;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transform: rotate(-1.5deg);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  opacity: 0.92;
}
html[data-atmo="conservator"] .card, html[data-atmo="conservator"] .tile,
html[data-atmo="conservator"] .album-card, html[data-atmo="conservator"] .latest-card {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent 40%);
}
html[data-atmo="conservator"] .wordmark { letter-spacing: 0.02em; }

/* --- Atmosphere crossfade: surfaces ease between lightings --- */
body, .card, .tile, .metal-tile, .album-card, .latest-card, .sheet-card,
.drawer-inner, .foot, .tabs, .lofi-bar, .ambient-panel {
  transition: background-color 0.45s var(--ease-out), border-color 0.45s var(--ease-out), color 0.45s var(--ease-out);
}

/* --- Visible keyboard focus everywhere --- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 6px;
}
html[data-atmo="conservator"] :focus-visible { outline-color: var(--gold-soft); }

/* ================= Base ================= */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}
body {
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  line-height: 1.5;
}
/* Hardware-accelerated ambient atmosphere layer (eliminates Edge CPU repaints) */
body::before {
  content: "";
  position: fixed;
  inset: -12%;
  width: 124%;
  height: 124%;
  z-index: -2;
  pointer-events: none;
  background-repeat: no-repeat;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
/* faint film grain over everything (pointer-transparent, GPU texture promoted, static texture eliminates Edge SVG feTurbulence lockups) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: var(--grain-op);
  transform: translateZ(0);
  contain: strict;
  background-image: var(--grain-url, none);
}

/* Performance Shield: eliminate GPU compositor thrashing & CPU text-shadow re-rasterization */
.wordmark {
  animation: none !important;
  text-shadow: 0 0 24px rgba(200, 169, 74, 0.35) !important;
}
body, body::before {
  animation: none !important;
}
.hero-glow {
  animation: none !important;
}
#dust-layer, #ember-layer {
  display: none !important;
}
.seg-glow, .exhibit-lamp, .wing-badge-3d, .lofi-pill, .ticker-live-pulse, .term-live-dot {
  animation: none !important;
}
.reveal, .pane.active .reveal {
  animation: none !important;
}
/* Fixed audio/dock bars: zero backdrop-filter blur passes during scrolling */
.lofi-bar, .player-bar, .mobile-wing-dock {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(14, 13, 10, 0.97) !important;
}

/* Grand Hall Content Containment & Virtualization: bypass layout/rasterization of offscreen blocks */
.grand-spatial-card,
.exhibit,
.vault-valuation-hub,
.trading-terminal-hub,
.lab-banner,
.wing-grid,
.notes-grid,
.moment-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 320px;
  contain: layout style paint;
}

/* Mobile & Touch Performance Shield */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  body::after {
    display: none !important;
  }
  .pane.active .reveal {
    animation: none !important;
  }
}

/* Gallery Virtual Batching Sentinel & Load More Controls */
.gallery-infinite-sentinel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem;
  width: 100%;
  min-height: 90px;
  margin: 1.5rem 0 3.5rem 0;
  box-sizing: border-box;
}
.gallery-load-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1.6rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(200, 169, 74, 0.22) 0%, rgba(200, 169, 74, 0.08) 100%);
  border: 1px solid rgba(200, 169, 74, 0.4);
  color: var(--gold-soft);
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
.gallery-load-more-btn:hover {
  background: linear-gradient(135deg, rgba(200, 169, 74, 0.38) 0%, rgba(200, 169, 74, 0.16) 100%);
  border-color: var(--gold);
  color: #fff;
  transform: translateY(-1px);
}

#app {
  max-width: 1200px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0 1.25rem 5rem;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-x: clip;   /* clip, not hidden: "hidden" made #app a scroll box that cut off the last ~120px (content under the dock) */
}

button { font: inherit; }
img { max-width: 100%; }

::selection { background: var(--line-strong); }

/* Eyebrow: uppercase letterspaced label */
.eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Section heads: eyebrow + Fraunces title + hairline */
.sec-head {
  margin: 2.5rem 0 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
}
.sec-head:first-child { margin-top: 0.5rem; }
.sec-head h2 {
  margin: 0.25rem 0 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.6rem;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.sec-head .sub { margin: 0.2rem 0 0; font-size: 0.82rem; color: var(--muted); }

/* ================= Hero ================= */
.hero {
  position: relative;
  text-align: center;
  padding: 3.2rem 0 2rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.4rem;
  overflow: hidden;
}
/* After Hours vignette: the gallery falls off to black at the edges */
html[data-atmo="afterhours"] .hero::before, html:not([data-atmo]) .hero::before {
  content: "";
  position: absolute;
  inset: -1rem -2rem;
  pointer-events: none;
  background: radial-gradient(ellipse 90% 100% at 50% 30%, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
}
.hero-glow {
  position: absolute;
  top: -8rem;
  left: 50%;
  transform: translateX(-50%);
  width: min(900px, 100%);
  max-width: 100%;
  height: 22rem;
  pointer-events: none;
  background: radial-gradient(ellipse 50% 55% at 50% 45%, rgba(200, 169, 74, 0.14), transparent 70%);
}
/* After Hours spotlight: a tighter, warmer cone over the wordmark */
html[data-atmo="afterhours"] .hero-glow, :root .hero-glow {
  background:
    radial-gradient(ellipse 34% 42% at 50% 42%, rgba(232, 217, 168, 0.13), transparent 70%),
    radial-gradient(ellipse 50% 55% at 50% 45%, rgba(200, 169, 74, 0.10), transparent 70%);
}
html[data-atmo="conservator"] .hero-glow {
  background: radial-gradient(ellipse 50% 55% at 50% 45%, rgba(122, 46, 46, 0.08), transparent 70%);
}
.eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.sigil {
  font-size: 1.3rem;
  color: var(--gold);
  text-shadow: 0 0 22px var(--line-strong);
  line-height: 1;
}
.ledger-chip {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  background: var(--surface);
}
.badge.hold {
  background: var(--hold-bg);
  border: 1px solid var(--gold-deep);
  color: var(--gold-soft);
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: 0.68rem;
  padding: 0.35rem 0.7rem;
  border-radius: 6px;
}
.wordmark {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.6rem, 8vw, 4.6rem);
  letter-spacing: 0.01em;
  line-height: 1.05;
  color: var(--ink);
}
.hero-money { margin: 1.6rem 0 0.4rem; }
.hero-grand {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(3.2rem, 11vw, 5.8rem);
  line-height: 1;
  color: var(--gold-soft);
  text-shadow: 0 0 44px var(--line-strong), 0 2px 0 rgba(0, 0, 0, 0.4);
  font-variant-numeric: tabular-nums;
}
.hero-cap {
  margin-top: 0.45rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  margin: 1.1rem 0 0;
  font-size: 0.9rem;
  color: var(--muted);
}
.hero-stat strong {
  color: var(--ink);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.hero-stat .dot-sep { color: var(--faint); margin: 0 0.1rem; }
.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.4rem;
}
.search-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  border-radius: 999px;
  padding: 0.5rem 0.8rem 0.5rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.search-btn:hover {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 6px 20px rgba(0, 0, 0, 0.35);
  transform: translateY(-1px);
}
.search-btn kbd {
  font-family: var(--font);
  font-size: 0.68rem;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.1rem 0.35rem;
  background: var(--bg2);
}
.live-status {
  margin: 1.1rem auto 0;
  font-size: 0.75rem;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  max-width: 34rem;
}
.live-status .dot {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--ok);
  margin-right: 0.35rem;
  vertical-align: middle;
  box-shadow: 0 0 6px var(--ok);
}
.live-status.off .dot { background: var(--muted); box-shadow: none; }
.live-status.drip .dot { background: var(--gold-soft); box-shadow: 0 0 8px var(--gold-soft); }

/* ================= Atmosphere button + sheet ================= */
.atmo-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--gold-soft);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 0.55rem 1rem;
  min-height: 44px;
  cursor: pointer;
  transition: border-color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.atmo-btn:hover { border-color: var(--gold-deep); transform: translateY(-1px); }
.atmo-lbl {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.atmo-sep { color: var(--muted); opacity: 0.6; }
.sheet-sub {
  margin: 0.1rem 0 0.9rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--muted);
  max-width: 46ch;
}
.atmo-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--gold-soft), var(--gold-deep));
  box-shadow: 0 0 8px rgba(200, 169, 74, 0.6);
  flex: 0 0 auto;
}
html[data-atmo="conservator"] .atmo-dot {
  background: radial-gradient(circle at 35% 35%, #faf6ec, #a8894c);
  box-shadow: 0 0 8px rgba(138, 90, 30, 0.5);
}
/* Generic bottom sheet (atmosphere picker, shortcuts) */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: sheet-in 0.28s var(--ease-out);
}
.sheet[hidden] { display: none; }
@keyframes sheet-in { from { opacity: 0; } to { opacity: 1; } }
.sheet-card {
  position: relative;
  width: min(640px, 100%);
  max-height: 88vh;
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-bottom: none;
  border-radius: 20px 20px 0 0;
  padding: 1.6rem 1.5rem 2rem;
  box-shadow: 0 -18px 60px rgba(0, 0, 0, 0.5);
  animation: sheet-up 0.34s var(--ease-out);
}
@keyframes sheet-up { from { transform: translateY(36px); opacity: 0.6; } to { transform: none; opacity: 1; } }
@media (min-width: 701px) {
  .sheet { align-items: center; padding: 1rem; }
  .sheet-card { border-bottom: 1px solid var(--line-strong); border-radius: 20px; }
}
.sheet-narrow { max-width: 440px; }
.sheet-close {
  position: absolute;
  top: 0.9rem; right: 1rem;
  appearance: none; border: none; background: transparent;
  color: var(--muted); font-size: 1.6rem; line-height: 1;
  cursor: pointer; min-width: 44px; min-height: 44px;
}
.sheet-close:hover { color: var(--ink); }
.sheet-card h2 { font-family: var(--serif); margin: 0.3rem 0 0.4rem; font-size: 1.5rem; }
.sheet-card > .sub { color: var(--muted); font-size: 0.85rem; margin: 0 0 1.2rem; }
.atmo-cards { display: grid; gap: 0.8rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .atmo-cards { grid-template-columns: 1fr 1fr; } }
.atmo-card {
  appearance: none;
  text-align: left;
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
  cursor: pointer;
  color: var(--ink);
  display: flex; flex-direction: column; gap: 0.45rem;
  transition: border-color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
  position: relative;
}
.atmo-card:hover { transform: translateY(-2px); border-color: var(--gold-deep); }
.atmo-card.current { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.atmo-card.current::after {
  content: "On display";
  position: absolute; top: 0.7rem; right: 0.8rem;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold-soft);
}
.atmo-swatch { height: 64px; border-radius: 10px; border: 1px solid var(--line-strong); }
.sw-afterhours { background: radial-gradient(ellipse 80% 120% at 50% 0%, #2a2415 0%, #060605 70%); }
.sw-conservator { background: linear-gradient(180deg, #faf6ec 0%, #e9e0cb 100%); }
.atmo-card-name { font-family: var(--serif); font-weight: 600; font-size: 1.1rem; }
.atmo-card-desc { font-size: 0.8rem; color: var(--muted); line-height: 1.45; }
.atmo-card-pair { font-size: 0.72rem; color: var(--gold-soft); letter-spacing: 0.03em; }
.atmo-card-scene {
  margin-top: 0.3rem; align-self: flex-start;
  font-size: 0.76rem; font-weight: 700; color: var(--gold);
  border-bottom: 1px solid var(--gold-deep); padding-bottom: 1px;
}
.atmo-card-scene:hover { color: var(--gold-soft); }
/* Keyboard shortcut list */
.keys-list { margin: 0; display: grid; gap: 0.55rem; }
.keys-list > div { display: flex; gap: 0.9rem; align-items: baseline; }
.keys-list dt { flex: 0 0 9.5rem; }
.keys-list dd { margin: 0; color: var(--muted); font-size: 0.85rem; }
kbd {
  font-family: var(--mono); font-size: 0.72rem;
  background: var(--surface2); border: 1px solid var(--line-strong);
  border-bottom-width: 2px; border-radius: 6px; padding: 0.1rem 0.4rem;
  color: var(--ink); white-space: nowrap;
}
/* Offline banner */
.offline-banner {
  margin: 0.6rem auto 0;
  max-width: 640px;
  text-align: center;
  font-size: 0.78rem;
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  border: 1px solid var(--warn);
  border-radius: 999px;
  padding: 0.45rem 1rem;
}
.offline-banner[hidden] { display: none; }
.rain-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.45rem 0.85rem;
  min-height: 44px;
  cursor: pointer;
  user-select: none;
  transition: color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.rain-btn:hover { color: var(--ink); border-color: var(--gold-deep); }
.rain-btn[aria-pressed="true"] {
  color: #7db4d8;
  border-color: #4a7a9a;
  box-shadow: 0 0 12px rgba(90, 150, 190, 0.35);
}
.rain-btn svg { display: block; }
.auto-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.45rem 0.85rem;
  min-height: 44px;
  cursor: pointer;
  user-select: none;
}
.auto-toggle input { accent-color: var(--gold); margin: 0; width: 1rem; height: 1rem; }
.auto-toggle:has(input:checked) { color: var(--gold-soft); border-color: var(--gold-deep); }

/* ================= Tabs: floating pill ================= */
.tabs {
  position: sticky;
  top: 0.7rem;
  z-index: 20;
  display: flex;
  gap: 0.2rem;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 1.75rem;
  padding: 0.3rem;
  background: var(--drawerbar-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--muted);
  padding: 0.55rem 1.05rem;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  min-height: 44px;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}
.tab:hover { color: var(--ink); }
.tab.active {
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  color: #1c1508;
  box-shadow: 0 4px 14px rgba(212, 175, 106, 0.35);
}
html[data-atmo="conservator"] .tab.active { color: #faf6ec; }

/* ================= Panes ================= */
.pane { display: none; }
.pane.active { display: block; animation: pane-in 0.28s var(--ease-out); }
@keyframes pane-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ================= Cards / tiles ================= */
.card {
  content-visibility: auto;
  contain-intrinsic-size: 0 160px;
  contain: layout style;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
@media (hover: hover) {
  .card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
}
.card h3 {
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.card .val {
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--gold-soft);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.card .hint { margin-top: 0.35rem; font-size: 0.8rem; color: var(--muted); }
.card.wide { grid-column: 1 / -1; }
.val .of { font-size: 0.8rem; color: var(--muted); font-weight: 500; font-family: var(--font); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.8rem;
  margin-bottom: 1rem;
}
.grid.two { grid-template-columns: 1fr 1fr; }

/* --- Stat band: 5 tiles --- */
.stat-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.8rem;
  margin: 0 0 1rem;
}
.tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem 1.15rem;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.tile::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--gold-soft), var(--gold-deep));
  opacity: 0.85;
}
@media (hover: hover) {
  .tile:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow), 0 0 0 1px var(--line-strong); }
}
.tile .k {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.tile .v {
  font-family: var(--serif);
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--gold-soft);
  margin-top: 0.2rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.tile .s { font-size: 0.76rem; color: var(--muted); margin-top: 0.25rem; }
.tile .bar-track {
  margin-top: 0.6rem;
  height: 5px;
  border-radius: 99px;
  background: var(--bg2);
  border: 1px solid var(--line);
  overflow: hidden;
}
.tile .bar-track > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-soft));
  border-radius: 99px;
}
.tile.hero-tile {
  background:
    radial-gradient(ellipse 90% 120% at 50% -30%, rgba(212, 175, 106, 0.12), transparent 70%),
    var(--surface);
}

/* --- Metals band --- */
.metals-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
  margin-bottom: 0.5rem;
}
.metal-tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.2rem 1.3rem;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 1.1rem;
  transition: transform 0.18s ease, border-color 0.18s ease;
}
@media (hover: hover) {
  .metal-tile:hover { transform: translateY(-3px); border-color: var(--line-strong); }
}
.metal-glyph {
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.25rem;
  border: 1px solid var(--line-strong);
  color: var(--gold-soft);
  background: radial-gradient(circle at 35% 30%, rgba(212, 175, 106, 0.25), transparent 65%), var(--bg2);
}
.metal-tile .m-name { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); }
.metal-tile .m-oz { font-family: var(--serif); font-size: 1.6rem; font-weight: 600; color: var(--gold-soft); font-variant-numeric: tabular-nums; }
.metal-tile .m-rows { margin-top: 0.3rem; font-size: 0.78rem; color: var(--muted); }
.metal-tile .m-rows strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

.progress-wrap { margin: 0.55rem 0 0; }
.progress {
  height: 8px;
  background: var(--bg2);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.progress > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-soft));
  border-radius: 999px;
}
.bucket-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
}
.bucket-row:last-child { border-bottom: none; }
.bucket-row .k { color: var(--muted); }
.bucket-row .v { font-variant-numeric: tabular-nums; color: var(--ink); text-align: right; }

.moments { list-style: none; margin: 0; padding: 0; }
.moments li {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.88rem;
  color: var(--ink);
  line-height: 1.45;
}
.moments li:last-child { border-bottom: none; }
.flags li { color: var(--warn); }

/* --- Latest adds: snap-scroll rail --- */
.latest-rail {
  display: flex;
  gap: 1.1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0.5rem 0.25rem 1.25rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-deep) transparent;
  scroll-padding-inline: 0.25rem;
}
.latest-rail::-webkit-scrollbar { height: 6px; }
.latest-rail::-webkit-scrollbar-thumb { background: var(--gold-deep); border-radius: 3px; }
.latest-rail::-webkit-scrollbar-track { background: transparent; }
.latest-card {
  appearance: none;
  flex: 0 0 250px;
  width: 250px;
  height: 312.5px;
  aspect-ratio: 1 / 1.25;
  scroll-snap-align: start;
  text-align: left;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: inherit;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1), filter 0.25s ease;
  position: relative;
  overflow: visible !important;
  display: block;
}

.latest-card:hover {
  filter: brightness(1.06);
}
.lc-slab-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.latest-card .lc-footer-meta {
  padding: 0 0.25rem 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.latest-card .lc-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.4rem;
}
.latest-card .id {
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gold-soft);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.latest-card .meta {
  font-size: 0.74rem;
  color: var(--cardmeta);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.latest-card .est {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.latest-card.is-new,
tr.is-new {
  animation: pulse-new 2.8s ease;
  box-shadow: 0 0 0 1px var(--gold), 0 0 18px var(--line-strong);
  border-color: var(--gold);
}
@keyframes pulse-new {
  0% { box-shadow: 0 0 0 2px var(--gold-soft), 0 0 22px var(--line-strong); }
  100% { box-shadow: none; }
}

/* --- Moment: editorial pull quote --- */
.moment-card {
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  background:
    linear-gradient(180deg, transparent, rgba(212, 175, 106, 0.05)),
    var(--surface);
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.4rem 1.5rem;
  margin: 0 0 0.5rem;
  box-shadow: var(--shadow);
}
.moment-card .mk {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold);
  margin-bottom: 0.55rem;
}
.moment-text {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink);
  transition: opacity 0.6s ease;
}
.moment-text.fading { opacity: 0; }

/* --- Album family cards --- */
.album-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.8rem;
  margin-bottom: 1rem;
}
.album-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.05rem 1.15rem;
  box-shadow: var(--shadow);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.album-card:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: var(--shadow), 0 0 0 1px var(--gold-deep);
}
.album-card .fam {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}
.album-card .coins {
  font-family: var(--serif);
  font-size: 1.45rem;
  color: var(--gold-soft);
  margin-top: 0.3rem;
  font-variant-numeric: tabular-nums;
}
.album-card .coins small { font-family: var(--font); font-size: 0.72rem; color: var(--muted); }
.album-card .pulse { font-size: 0.74rem; color: var(--muted); margin-top: 0.25rem; line-height: 1.4; }

/* --- Requests from Titan --- */
.req-card h3 { display: flex; align-items: baseline; gap: 0.6rem; }
.req-count { font-size: 0.72rem; color: var(--warn); font-weight: 600; letter-spacing: 0.02em; }
.req-list { list-style: none; margin: 0 0 0.5rem; padding: 0; display: grid; gap: 0.4rem; }
.req-list .req.extra { display: none; }
.req-list.open .req.extra { display: flex; }
.req {
  display: flex; align-items: flex-start; gap: 0.65rem;
  padding: 0.6rem 0.7rem; border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg2); font-size: 0.84rem; line-height: 1.4;
  transition: border-color 0.15s, background 0.15s;
}
.req.link { cursor: pointer; }
.req.link:hover, .req.link:focus { border-color: var(--gold-deep); background: var(--row-hover); outline: none; }
.req-ico {
  flex: 0 0 1.7rem; height: 1.7rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface2); border: 1px solid var(--gold-deep); color: var(--gold-soft); font-size: 0.8rem; font-weight: 700;
}
.req-body { flex: 1 1 auto; min-width: 0; }
.req-kind { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); font-weight: 700; }
.req-who { font-family: var(--mono); font-size: 0.72rem; color: var(--gold-soft); }
.req-go { color: var(--gold-deep); font-size: 1.2rem; align-self: center; }

/* ================= Toolbar / filters ================= */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.8rem;
  align-items: center;
}
.toolbar input, .toolbar select {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 10px;
  padding: 0.55rem 0.8rem;
  font: inherit;
  font-size: 0.88rem;
  min-width: 0;
  min-height: 44px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.toolbar input:focus, .toolbar select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold);
}
.toolbar input { flex: 1 1 220px; }
.search-wrap {
  position: relative;
  flex: 1 1 220px;
  display: flex;
  min-width: 0;
}
.search-wrap input { flex: 1 1 auto; width: 100%; padding-right: 3.2rem; }
.search-wrap kbd {
  position: absolute;
  right: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font);
  font-size: 0.68rem;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.1rem 0.4rem;
  background: var(--bg2);
  pointer-events: none;
}
.toolbar select { flex: 0 1 160px; }
.toolbar .meta { color: var(--muted); font-size: 0.82rem; margin-left: auto; font-variant-numeric: tabular-nums; }
.search-hint {
  font-size: 0.72rem;
  color: var(--faint);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.15rem 0.45rem;
  background: var(--bg2);
  white-space: nowrap;
}
.btn {
  appearance: none;
  border: 1px solid var(--gold-deep);
  background: var(--surface2);
  color: var(--gold-soft);
  border-radius: 10px;
  padding: 0.55rem 0.95rem;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  flex: 0 0 auto;
  white-space: nowrap;
  min-height: 44px;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.btn:hover { border-color: var(--gold); transform: translateY(-1px); }
.btn:disabled { opacity: 0.5; cursor: wait; }
.btn.small { font-size: 0.76rem; padding: 0.35rem 0.7rem; margin-top: 0.5rem; min-height: 40px; }
.filter-ag.active {
  background: #232a33;
  border-color: #7a8a9a;
  color: #e8eef4;
}
html[data-atmo="conservator"] .filter-ag.active { background: #dfe3e8; border-color: #7a8a9a; color: #2a3440; }
.filter-p2.active { border-color: var(--ok); color: var(--ok); }

.country-strip {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.45rem;
  margin: 0 0 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.25rem 0.5rem 0.65rem;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-deep) transparent;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 24px), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 24px), transparent);
}
.country-strip::-webkit-scrollbar { height: 4px; }
.country-strip::-webkit-scrollbar-thumb { background: var(--gold-deep); border-radius: 2px; }
.country-strip::-webkit-scrollbar-track { background: transparent; }
.country-chip {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  min-height: 36px;
  flex-shrink: 0;
  transition: all 0.2s var(--ease-out);
}
.country-chip strong { color: var(--gold-soft); font-weight: 700; margin-left: 0.3rem; font-variant-numeric: tabular-nums; }
.country-chip:hover { color: var(--ink); border-color: var(--gold-deep); transform: translateY(-1px); }
.country-chip.active {
  color: var(--gold-soft);
  border-color: var(--gold);
  background: var(--sel-bg);
  box-shadow: 0 0 0 1px var(--gold-deep), 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* ================= Tables ================= */
.table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  max-height: calc(100vh - 300px);
  -webkit-overflow-scrolling: touch;
  box-shadow: var(--shadow);
  margin-bottom: 4.5rem; /* clear the fixed footer */
  scrollbar-width: thin;
  scrollbar-color: var(--gold-deep) transparent;
}
.table-wrap::-webkit-scrollbar { width: 8px; height: 8px; }
.table-wrap::-webkit-scrollbar-thumb { background: var(--gold-deep); border-radius: 4px; }
.table-wrap::-webkit-scrollbar-track { background: transparent; }
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}
table.data th {
  position: sticky;
  top: 0;
  background: var(--th-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--gold);
  text-align: left;
  padding: 0.7rem 0.8rem;
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-bottom: 1px solid var(--line-strong);
  z-index: 1;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
table.data th.sorted { color: var(--gold-soft); }
table.data th.sorted::after { content: " ▾"; font-size: 0.65rem; }
table.data td {
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
table.data tbody tr {
  cursor: pointer;
  transition: background 0.12s;
  position: relative;
}
table.data tbody tr:hover { background: var(--row-hover); box-shadow: inset 3px 0 0 var(--gold); }
table.data .num { text-align: right; }
table.data .muted { color: var(--muted); }
td.ser-primary {
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--gold-soft);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
td.scan-sec { font-family: var(--mono); font-size: 0.74rem; color: var(--faint); }
.cam { color: var(--ok); font-size: 0.7rem; margin-left: 0.2rem; vertical-align: middle; }
.row-thumb { width: 26px; height: 26px; border-radius: 8px; object-fit: cover; vertical-align: middle; margin-right: 0.45rem; border: 1px solid var(--line); background: var(--ph-bg); }
.row-thumb.lc-blank { display: none; }
.badge-ag {
  display: inline-block;
  background: #232a33;
  border: 1px solid #7a8a9a;
  color: #d0d6de;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.1rem 0.4rem;
  border-radius: 5px;
  vertical-align: middle;
  margin-left: 0.3rem;
}
html[data-atmo="conservator"] .badge-ag { background: #e3e6ea; border-color: #9aa5ad; color: #3a4550; }
.badge-ag.unk { border-color: var(--warn); color: var(--warn); }
.badge-au, .badge-kind {
  display: inline-block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em;
  padding: 0.1rem 0.4rem; border-radius: 5px; vertical-align: middle; margin-left: 0.3rem;
}
.badge-au { background: #2c230e; border: 1px solid var(--gold); color: var(--gold-soft); }
.badge-kind { background: var(--surface2); border: 1px solid var(--line); color: var(--muted); }
.badge-status {
  display: inline-block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.1rem 0.42rem; border-radius: 5px; vertical-align: middle;
  background: var(--surface2); border: 1px solid var(--line); color: var(--muted);
}
.badge-status.st-photographed { border-color: var(--ok); color: var(--ok); }
.badge-status.st-verified { border-color: var(--gold); color: var(--gold-soft); }
html[data-atmo="conservator"] .badge-status.st-verified { color: var(--gold); }
.badge-status.st-removed { border-color: var(--bad); color: var(--bad); }
.badge-review, .ph-badge {
  display: inline-block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.1rem 0.4rem; border-radius: 5px; vertical-align: middle;
}
.badge-review, .ph-badge.review { background: #3a1e18; border: 1px solid var(--bad); color: #f0b8ac; }
.asw-cell { font-variant-numeric: tabular-nums; color: #c0c8d0; font-size: 0.84rem; }
html[data-atmo="conservator"] .asw-cell { color: #5a6a76; }

/* ================= Dossier: immersive sheet ================= */
body.drawer-open { overflow: hidden; }
.backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 40;
  animation: backdrop-in 0.22s ease;
}
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
.drawer {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  pointer-events: none;
}
.drawer[hidden] { display: none; }
.drawer:not([hidden]) { pointer-events: auto; }
.drawer-inner {
  pointer-events: auto;
  width: min(920px, 100%);
  max-height: 92vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg2);
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  padding: 0 1.6rem 2.5rem;
  animation: sheet-in 0.28s cubic-bezier(0.2, 0.9, 0.25, 1.05);
}
@keyframes sheet-in {
  from { opacity: 0; transform: translateY(26px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
.drawer-bar {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; gap: 0.45rem;
  margin: 0 -1.6rem 1rem;
  padding: 0.75rem 1.6rem;
  background: var(--drawerbar-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-btn {
  appearance: none; border: 1px solid var(--line); background: var(--surface2);
  color: var(--gold-soft); width: 44px; height: 44px; border-radius: 12px;
  font-size: 1.3rem; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color 0.15s;
}
.nav-btn:hover:not(:disabled) { border-color: var(--gold); }
.nav-btn:disabled { opacity: 0.3; cursor: default; }
.drawer-pos { font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; margin-left: 0.3rem; }
.drawer-close {
  margin-left: auto;
  appearance: none;
  border: 1px solid var(--line);
  background: var(--surface2);
  color: var(--ink);
  width: 44px; height: 44px;
  border-radius: 12px;
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
  transition: border-color 0.15s, color 0.15s;
}
.drawer-close:hover { border-color: var(--gold); color: var(--gold-soft); }

/* photo stage on top */
.ds-stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
  margin-bottom: 1.4rem;
}
.ds-stage-extra {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin-bottom: 0.6rem;
}
.ds-stage-extra .ph-open, .ds-stage-extra .ph-empty { aspect-ratio: 4 / 3; }
.ph-slot { margin: 0; }
.ph-slot figcaption {
  margin-top: 0.45rem; font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--muted); text-align: center;
}
.ph-open {
  appearance: none; border: 1px solid var(--line); padding: 0; margin: 0;
  width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius); overflow: hidden;
  background: var(--ph-bg); cursor: zoom-in; display: block;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ph-open img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ph-open:hover { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold-deep); }
/* Phase 1 phone photos: the coin is cut out as a circle (transparent corners), so show it bare and round like the drawn faces */
.ph-slot.is-round .ph-open { border: 0; background: none; border-radius: 50%; overflow: visible; }
.ph-slot.is-round .ph-open img { border-radius: 50%; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35)); }
.ph-slot.is-round .ph-open:hover, .ph-slot.is-round .ph-open:focus-visible { box-shadow: 0 0 0 3px var(--gold); }
.ph-empty {
  aspect-ratio: 1 / 1; width: 100%;
  border: 1px dashed var(--faint); border-radius: var(--radius);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.4rem; padding: 1rem; text-align: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(212, 175, 106, 0.07), transparent 60%),
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(255, 255, 255, 0.014) 14px 28px);
}
.ph-ring {
  width: 38%; aspect-ratio: 1 / 1; border-radius: 50%;
  border: 2px dashed var(--gold-deep); opacity: 0.5;
}
.ph-await { font-family: var(--serif); font-size: 1.02rem; color: var(--gold-soft); font-style: italic; }
.ph-file {
  font-family: var(--mono); font-size: 0.66rem; color: var(--cardmeta); word-break: break-all;
  background: var(--bg); border: 1px solid var(--line); border-radius: 6px;
  padding: 0.15rem 0.4rem; cursor: copy; max-width: 100%;
}
.ph-dir { font-family: var(--mono); font-size: 0.62rem; color: var(--muted); word-break: break-all; }
.ph-hint { font-size: 0.74rem; color: var(--muted); margin: 0.7rem 0 0; line-height: 1.45; }
.ph-orig { color: var(--gold-soft); }

/* dossier title block */
.ds-head { margin-bottom: 1.2rem; }
.ds-ser {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 7vw, 3.6rem);
  font-weight: 700;
  color: var(--gold-soft);
  letter-spacing: 0.01em;
  line-height: 1.05;
}
.ds-ser .badge-ag, .ds-ser .badge-au, .ds-ser .badge-kind, .ds-ser .badge-status {
  font-size: 0.7rem; font-family: var(--font);
}
.ds-rule {
  height: 1px;
  margin: 1rem 0;
  background: linear-gradient(90deg, var(--gold), var(--line-strong), transparent);
}
.ds-head h2 {
  margin: 0 0 1rem;
  font-family: var(--serif);
  color: var(--ink);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.3;
}
/* spec grid */
.ds-specgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.7rem 1.1rem;
  margin-bottom: 1rem;
}
.ds-spec .k {
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-weight: 600;
}
.ds-spec .v {
  font-size: 0.94rem;
  color: var(--ink);
  margin-top: 0.12rem;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}
.ds-spec .v.mono { font-family: var(--mono); font-size: 0.84rem; color: var(--gold-soft); }
.ds-spec .v.num { font-variant-numeric: tabular-nums; }
.ds-spec .v.missing { color: var(--faint); }
.ds-spec .v.warn { color: var(--warn); font-weight: 600; }
.ds-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 0.7rem; }
.chip {
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  font-size: 0.8rem;
  color: var(--ink);
  white-space: nowrap;
}
.chip strong { color: var(--gold-soft); font-weight: 650; font-variant-numeric: tabular-nums; }
.chip.ag strong { color: #c0c8d0; }
.chip.au strong { color: var(--gold-soft); }
.ds-head .scan {
  font-family: var(--mono);
  color: var(--muted);
  font-size: 0.82rem;
  margin-bottom: 0.7rem;
}
.ds-complete { font-size: 0.74rem; color: var(--muted); display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
.ds-complete .bar { width: 120px; height: 5px; border-radius: 99px; background: var(--surface2); border: 1px solid var(--line); overflow: hidden; display: inline-block; }
.ds-complete .bar span { display: block; height: 100%; background: var(--warn); }
.ds-complete.full .bar span { background: var(--ok); }

.ds-sec { margin-bottom: 1.1rem; }
.ds-sec h4 {
  margin: 0 0 0.5rem; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--gold); border-bottom: 1px solid var(--line); padding-bottom: 0.35rem;
}
.kv { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.45rem 0.8rem; font-size: 0.88rem; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; word-break: break-word; }
.kv dd.mono { font-family: var(--mono); color: var(--gold-soft); }
.kv dd.num { font-variant-numeric: tabular-nums; }
.kv dd.missing { color: var(--faint); }
.kv dd.warn { color: var(--warn); font-weight: 600; }
.notes-box {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.95rem 1rem;
  font-size: 0.88rem;
  line-height: 1.55;
  white-space: pre-wrap;
}
.notes-box.missing { color: var(--faint); }

/* ================= Lightbox ================= */
.lightbox {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(4, 3, 2, 0.94);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.lightbox[hidden] { display: none; }
.lb-fig { margin: 0; max-width: min(92vw, 1100px); max-height: 90vh; display: flex; flex-direction: column; align-items: center; }
.lb-fig img { max-width: 100%; max-height: 82vh; object-fit: contain; border-radius: 12px; box-shadow: var(--shadow); }
.lb-fig figcaption { margin-top: 0.6rem; color: var(--muted); font-size: 0.85rem; text-align: center; }
.lb-close, .lb-nav {
  position: absolute; appearance: none; border: 1px solid var(--line);
  background: rgba(20, 17, 12, 0.85); color: var(--gold-soft); cursor: pointer;
  border-radius: 12px; font-size: 1.6rem; line-height: 1; width: 2.8rem; height: 2.8rem;
}
.lb-close { top: 1rem; right: 1rem; }
.lb-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: 1rem; top: 50%; transform: translateY(-50%); }
.lb-nav[hidden] { display: none; }
#lb-cap a { color: var(--gold-soft); }

/* ================= Search palette ================= */
.palette {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 1rem 1rem;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: backdrop-in 0.18s ease;
}
.palette[hidden] { display: none; }
.palette-sheet {
  width: min(640px, 100%);
  background: var(--bg2);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
  animation: sheet-in 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.05);
}
.palette-bar {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}
.palette-bar input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: none;
  color: var(--ink);
  font: inherit;
  font-size: 1.05rem;
  outline: none;
}
.palette-bar input::placeholder { color: var(--faint); }
.pal-esc {
  font-family: var(--font);
  font-size: 0.68rem;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.15rem 0.45rem;
  background: var(--surface);
}
.palette-results { max-height: 52vh; overflow: auto; -webkit-overflow-scrolling: touch; }
.pal-row {
  appearance: none;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "ser est" "meta est";
  gap: 0.1rem 0.8rem;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 0.7rem 1.1rem;
  cursor: pointer;
  color: var(--ink);
}
.pal-row:last-child { border-bottom: none; }
.pal-row:hover, .pal-row.sel { background: var(--row-hover); box-shadow: inset 3px 0 0 var(--gold); }
.pal-ser {
  grid-area: ser;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--gold-soft);
}
.pal-scan { font-family: var(--mono); font-size: 0.72rem; color: var(--faint); margin-left: 0.4rem; }
.pal-meta { grid-area: meta; font-size: 0.78rem; color: var(--muted); }
.pal-est { grid-area: est; align-self: center; font-size: 0.85rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.pal-empty { padding: 1.6rem; text-align: center; color: var(--faint); font-size: 0.88rem; }

/* ================= Motion system: reveal ================= */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s var(--ease-out) var(--rd, 0ms), transform 0.55s var(--ease-out) var(--rd, 0ms);
}
.reveal.in { opacity: 1; transform: none; }

/* ================= Skeleton shimmer ================= */
.skeleton {
  display: inline-block;
  min-width: 2rem;
  min-height: 0.8em;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--skeleton1) 25%, var(--skeleton2) 50%, var(--skeleton1) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s linear infinite;
  vertical-align: middle;
}
.skeleton-line { width: 14rem; height: 0.85rem; }
.card h3 .skeleton { margin-bottom: 0.2rem; }
@keyframes shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* ================= Toast ================= */
.toast {
  position: fixed;
  left: 50%;
  bottom: 4.5rem;
  transform: translateX(-50%);
  z-index: 95;
  background: linear-gradient(180deg, var(--toastgrad1), var(--toastgrad2));
  border: 1px solid var(--gold-deep);
  color: var(--gold-soft);
  padding: 0.7rem 1.2rem;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  box-shadow: var(--shadow);
  max-width: min(92vw, 440px);
  text-align: center;
  animation: toast-in 0.25s ease;
}
.toast[hidden] { display: none; }
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* ================= Footer ================= */
.foot {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 1.25rem;
  padding-bottom: max(0.6rem, env(safe-area-inset-bottom));
  background: var(--foot-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  font-size: 0.76rem;
  color: var(--muted);
  z-index: 30;
}
.foot #foot-path {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.foot #foot-path .ft-brand { font-family: var(--serif); font-weight: 600; color: var(--gold-soft); }

/* ================= World tab ================= */
#world-table tr.w-row.selected { background: var(--sel-bg); box-shadow: inset 3px 0 0 var(--gold); }
#world-table tr.w-row:focus { outline: 1px solid var(--gold-deep); outline-offset: -1px; }
.w-go { color: var(--gold-deep); margin-left: 0.2rem; }
.world-panel { margin-bottom: 0.85rem; scroll-margin-top: 0.75rem; }
.wp-head { display: flex; gap: 0.75rem; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: 0.6rem; }
.wp-head h3 { margin: 0 0 0.2rem; font-family: var(--serif); font-size: 1.25rem; font-weight: 600; color: var(--ink); display: flex; gap: 0.5rem; align-items: baseline; }
.wp-head h3 .ser { font-family: var(--mono); font-size: 0.78rem; color: var(--gold-deep); }
.wp-actions { display: flex; gap: 0.4rem; align-items: center; }
.wp-table { max-height: 60vh; }
table.data.compact td { padding: 0.5rem 0.65rem; }
table.data tbody tr[data-scan]:focus { outline: 1px solid var(--gold-deep); outline-offset: -1px; }
.sub-scan { display: none; }

.empty { color: var(--muted); padding: 2rem; text-align: center; }
.error { color: var(--bad); padding: 1rem; }

/* ================= Lofi player (audio.js) ================= */
.lofi-pill {
  position: fixed;
  z-index: 70;
  left: 50%;
  bottom: calc(3.4rem + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(180deg, var(--toastgrad1), var(--toastgrad2));
  border: 1px solid var(--gold-deep);
  color: var(--gold-soft);
  border-radius: 999px;
  padding: 0.7rem 1.2rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow);
  animation: pill-pulse 2.2s ease-in-out infinite;
  min-height: 48px;
}
.lofi-pill[hidden] { display: none; }
.lofi-pill .eq { display: inline-flex; gap: 2px; align-items: flex-end; height: 14px; }
.lofi-pill .eq i { width: 3px; background: var(--gold-soft); border-radius: 2px; animation: eq 1s ease-in-out infinite; }
.lofi-pill .eq i:nth-child(1) { height: 8px; animation-delay: 0s; }
.lofi-pill .eq i:nth-child(2) { height: 14px; animation-delay: 0.2s; }
.lofi-pill .eq i:nth-child(3) { height: 6px; animation-delay: 0.4s; }
@keyframes pill-pulse {
  0%, 100% { box-shadow: var(--shadow), 0 0 0 0 rgba(212, 175, 106, 0.4); }
  50% { box-shadow: var(--shadow), 0 0 0 10px rgba(212, 175, 106, 0); }
}
@keyframes eq { 0%, 100% { transform: scaleY(0.5); } 50% { transform: scaleY(1); } }
.lofi-bar {
  position: fixed;
  z-index: 70;
  left: 0.85rem;
  right: 0.85rem;
  bottom: calc(var(--nav-h, 66px) + env(safe-area-inset-bottom) + 0.5rem);
  background: var(--drawerbar-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--gold-deep);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 0.55rem 0.7rem;
  color: var(--ink);
  transform: translateZ(0);
}
.lofi-bar[hidden] { display: none; }
@media (min-width: 701px) {
  .lofi-bar { left: auto; right: 1.25rem; width: 480px; bottom: calc(var(--nav-h, 66px) + env(safe-area-inset-bottom) + 0.5rem); transform: translateZ(0); }
}
.nowrap { white-space: nowrap; }
.foot #foot-path .ft-sep { margin: 0 0.15em; }
.lofi-row { display: flex; align-items: center; gap: 0.5rem; min-width: 0; overflow: hidden; }
.lofi-btn {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--surface2);
  color: var(--gold-soft);
  border-radius: 10px;
  min-width: 44px; min-height: 44px;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.lofi-btn:hover { border-color: var(--gold-deep); }
.lofi-play { width: 52px; font-size: 1.25rem; border-color: var(--gold-deep); }
.lofi-now { flex: 1 1 auto; min-width: 0; }
.lofi-now .t {
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lofi-now .a { font-size: 0.7rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lofi-vol { display: flex; align-items: center; gap: 0.35rem; flex: 0 0 auto; min-width: 0; }
.lofi-vol input[type="range"] { width: 74px; max-width: 100%; accent-color: var(--gold); cursor: pointer; }
/* Small screens & phones: transport on row 1, track + volume on row 2 */
@media (max-width: 560px) {
  .lofi-bar { left: 0.6rem; right: 0.6rem; padding: 0.45rem 0.55rem; }
  .lofi-row { flex-wrap: wrap; gap: 0.3rem; row-gap: 0.35rem; }
  .lofi-btn { min-width: 36px; min-height: 36px; font-size: 0.88rem; }
  .lofi-play { width: 44px; }
  .lofi-stationbtn { flex: 0 0 auto; width: auto; max-width: 6.8rem; font-size: 0.65rem; padding: 0.28rem 0.5rem; }
  .lofi-now { order: 6; flex: 1 1 50%; min-width: 0; }
  .lofi-vol { order: 7; flex: 0 0 auto; }
  .lofi-vol input[type="range"] { width: 70px; }
  .lofi-meta { font-size: 0.62rem; }
}
.lofi-bar.collapsed .lofi-row { flex-wrap: nowrap; align-items: center; gap: 0.4rem; }
.lofi-bar.collapsed .lofi-play {
  order: 0;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  font-size: 0.85rem;
  border-radius: 999px;
  background: var(--gold);
  color: #0c0b08;
  border: none;
  font-weight: 700;
  flex-shrink: 0;
  cursor: pointer;
}
.lofi-bar.collapsed .lofi-now {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 0.35rem;
}
.lofi-bar.collapsed .lofi-collapse {
  order: 2;
  margin-left: auto;
  min-width: 36px;
  min-height: 36px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--gold-soft);
  cursor: pointer;
}
.lofi-bar.collapsed .lofi-row > :not(.lofi-collapse):not(.lofi-now):not(.lofi-play) { display: none !important; }
.lofi-bar.collapsed .lofi-meta { display: none !important; }
.lofi-bar.collapsed .station-menu { display: none !important; }
.lofi-bar.collapsed {
  padding: 0.25rem 0.65rem;
  height: 42px;
  border-radius: 999px;
  background: rgba(18, 16, 12, 0.94) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line-strong) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 16px rgba(200, 169, 74, 0.15) !important;
}
.lofi-bar.collapsed .lofi-now .t {
  font-size: 0.76rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink);
}
.lofi-bar.collapsed .lofi-now .a {
  font-size: 0.65rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 701px) {
  .lofi-bar.collapsed { width: auto; max-width: 384px; }
}

/* --- Rain canvas overlay (ambient.js) --- */
#rain-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 6;
  pointer-events: none;
  transform: translateZ(0);
  will-change: transform;
  contain: strict;
}
#rain-canvas[hidden] { display: none; }

/* --- Ambient mixer panel ("Soundscape", ambient.js) --- */
.ambient-panel {
  position: fixed;
  z-index: 70;
  top: 4.2rem;
  right: 1rem;
  width: min(340px, calc(100vw - 2rem));
  max-height: calc(100vh - 5.5rem);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(200, 169, 74, 0.4) transparent;
  background: var(--drawerbar-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--gold-deep);
  border-radius: 18px;
  box-shadow: var(--shadow), 0 0 0 1px rgba(212, 175, 106, 0.06);
  padding: 0.85rem 0.95rem 1rem;
}
.ambient-panel::-webkit-scrollbar {
  width: 5px;
}
.ambient-panel::-webkit-scrollbar-track {
  background: transparent;
}
.ambient-panel::-webkit-scrollbar-thumb {
  background: rgba(200, 169, 74, 0.35);
  border-radius: 999px;
}
.ambient-panel[hidden] { display: none; }
.ambient-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.65rem;
}
.ambient-head h3 {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--gold-soft);
  margin: 0;
  letter-spacing: 0.01em;
}
.amb-presets {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.7rem;
}
.amb-preset {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--surface2);
  color: var(--muted);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.42rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
  min-height: 36px;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.amb-preset:hover { color: var(--ink); border-color: var(--gold-deep); }
.amb-preset:active { transform: scale(0.96); }
.amb-intensity {
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.6rem 0.75rem 0.7rem;
  margin-bottom: 0.55rem;
}
.amb-intensity-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.74rem;
  color: var(--muted);
  margin-bottom: 0.35rem;
}
.amb-intensity-top strong { color: var(--gold-soft); font-weight: 600; }
.amb-intensity input[type="range"] { width: 100%; accent-color: #7db4d8; cursor: pointer; }
.amb-reverb-bar { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.amb-reverb-btn {
  font-size: 0.72rem; padding: 0.25rem 0.55rem; border: 1px solid var(--line);
  background: var(--surface2); color: var(--muted); border-radius: 999px;
  cursor: pointer; transition: all 0.15s ease;
}
.amb-reverb-btn:hover { border-color: var(--gold-soft); color: #fff; }
.amb-reverb-btn.active {
  border-color: var(--gold); background: rgba(200, 169, 74, 0.22);
  color: var(--gold-soft); font-weight: 700; box-shadow: 0 0 10px rgba(200, 169, 74, 0.25);
}
.amb-eq-strip input[type="range"] { accent-color: var(--gold); height: 4px; cursor: pointer; }
.ambient-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.1rem;
  border-top: 1px solid var(--line);
}
.ambient-row .amb-ico { color: var(--muted); display: inline-flex; flex: 0 0 auto; }
.ambient-row .amb-name { flex: 1 1 auto; font-size: 0.84rem; color: var(--ink); }
.ambient-row input[type="range"] { width: 76px; accent-color: #7db4d8; cursor: pointer; }
.amb-master {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
  font-size: 0.74rem;
  color: var(--muted);
}
.amb-master input[type="range"] { flex: 1; accent-color: var(--gold); cursor: pointer; }
.amb-toggle {
  appearance: none;
  width: 46px; height: 28px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface2);
  cursor: pointer;
  position: relative;
  flex: 0 0 auto;
  transition: background 0.2s, border-color 0.2s;
}
.amb-toggle::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 0.15s, background 0.15s;
}
.amb-toggle[aria-pressed="true"] { background: #1d3040; border-color: #4a7a9a; }
.amb-toggle[aria-pressed="true"]::after { transform: translateX(18px); background: #9fd0ee; }
.ambient-note { font-size: 0.68rem; color: var(--muted); margin: 0.5rem 0 0; line-height: 1.4; }

/* ================= Responsive ================= */
@media (max-width: 700px) {
  #app { padding: 0 0.85rem 5rem; }
  .ambient-panel {
    top: auto;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100% !important;
    max-width: 100vw;
    max-height: min(85vh, calc(100dvh - 60px)) !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    border-radius: 20px 20px 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    padding: 0.9rem 1rem calc(1.5rem + env(safe-area-inset-bottom));
    z-index: 75;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.85);
  }
  .hero { padding: 2.2rem 0 1.6rem; }
  .wordmark { letter-spacing: 0; }
  .grid.two { grid-template-columns: 1fr; }
  .metals-band { grid-template-columns: 1fr; }
  .table-wrap { max-height: calc(100vh - 340px); }
  table.data { font-size: 0.84rem; }
  table.data td, table.data th { padding: 0.6rem 0.6rem; }
  .toolbar input, .toolbar select { font-size: 16px; }
  .card .val { font-size: 1.45rem; }
  .tile .v { font-size: 1.55rem; }
  .kv { grid-template-columns: 1fr; gap: 0.15rem 0; }
  .kv dt { margin-top: 0.4rem; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; }
  .tab { padding: 0.6rem 0.9rem; font-size: 0.86rem; }
  .tabs { top: 0.5rem; margin-bottom: 1.25rem; }
  .country-chip { padding: 0.4rem 0.75rem; font-size: 0.8rem; }
/* tr18: icon-only button now (matches the music widget's sliders icon) — no label to hide. */
/* tr20: "Ambience" label restored so the button is self-explanatory; hidden on narrow phones. */
@media (max-width: 560px) {
  .rain-label { display: none; }
}
  .search-btn kbd { display: none; }
  .latest-card { flex-basis: 172px; }
  .moment-text { font-size: 1.12rem; }
  .sec-head h2 { font-size: 1.35rem; }

  /* dossier becomes a bottom sheet */
  .drawer { padding: 0; align-items: flex-end; }
  .drawer-inner {
    width: 100%;
    max-height: 94vh;
    border-radius: 20px 20px 0 0;
    border-left: none; border-right: none; border-bottom: none;
    padding: 0 1rem 2.5rem;
    animation-name: sheet-up;
  }
  @keyframes sheet-up {
    from { opacity: 0.4; transform: translateY(60px); }
    to { opacity: 1; transform: none; }
  }
  .drawer-bar { margin: 0 -1rem 0.9rem; padding: 0.6rem 1rem; }
  .ds-specgrid { grid-template-columns: 1fr 1fr; }
  .w-note, .w-sermax { display: none; }
  .wc-scan { display: none; }
  .sub-scan { display: block; font-family: var(--mono); font-size: 0.7rem; color: var(--muted); }
  table.data.compact { font-size: 0.8rem; }
  table.data.compact td, table.data.compact th { padding: 0.5rem 0.45rem; }
  .wp-table { max-height: none; }
  .wp-actions .btn { min-height: 40px; }
  .world-panel { padding-left: 0.85rem; padding-right: 0.85rem; }
  table.data.compact .ser-primary { white-space: normal; }
  .world-panel .badge-ag { font-size: 0.56rem; padding: 0.02rem 0.25rem; margin-left: 0.15rem; }
  .world-panel .badge-status { font-size: 0.58rem; padding: 0.05rem 0.28rem; letter-spacing: 0.02em; }
  table.data.compact td:last-child, table.data.compact th:last-child { padding-right: 0.5rem; }
  .palette { padding: 8vh 0.6rem 0.6rem; }
  .foot { padding-left: 0.85rem; padding-right: 0.85rem; }
}

/* ================= Collection intelligence (WS4) ================= */
.insight-grid { display: grid; gap: 0.8rem; grid-template-columns: 1fr; margin-top: 1rem; }
@media (min-width: 760px) { .insight-grid { grid-template-columns: 1fr 1fr; } }
.insight-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: var(--shadow); }
.insight-card h3 { margin: 0 0 0.15rem; font-family: var(--serif); font-size: 1.02rem; font-weight: 600; }
.insight-card .lede { margin: 0 0 0.7rem; font-size: 0.8rem; color: var(--muted); font-style: italic; font-family: var(--serif); }
.conc-bar { height: 10px; border-radius: 6px; background: var(--surface2); border: 1px solid var(--line); overflow: hidden; margin: 0.5rem 0 0.35rem; }
.conc-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); border-radius: 6px; transition: width 1s var(--ease-out); }
.conc-lbl { font-size: 0.78rem; color: var(--muted); }
.conc-lbl strong { color: var(--gold-soft); font-size: 0.95rem; }
.decade-bars { display: grid; gap: 0.32rem; margin-top: 0.4rem; }
.decade-row { display: grid; grid-template-columns: 4.2rem 1fr 2.6rem; gap: 0.6rem; align-items: center; font-size: 0.76rem; }
.decade-row .dk { color: var(--muted); font-family: var(--mono); }
.decade-row .dt { height: 8px; background: var(--surface2); border-radius: 4px; overflow: hidden; border: 1px solid var(--line); }
.decade-row .dt > span { display: block; height: 100%; background: var(--gold-deep); opacity: 0.85; border-radius: 4px; }
.decade-row .dv { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.gem-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; padding: 0.5rem 0; border-bottom: 1px dashed var(--line); font-size: 0.82rem; }
.gem-row:last-child { border-bottom: none; }
.gem-row .g-id { font-family: var(--mono); font-size: 0.76rem; color: var(--gold-soft); }
.gem-row .g-why { color: var(--muted); font-size: 0.74rem; }
.gem-row .g-val { font-weight: 700; white-space: nowrap; }
.gem-row button { all: unset; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; width: 100%; padding: 0.5rem 0; border-bottom: 1px dashed var(--line); }
.country-spread { display: grid; gap: 0.4rem; margin-top: 0.4rem; }
.spread-row { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 0.8rem; font-size: 0.8rem; align-items: baseline; }
.spread-row .sc { font-weight: 600; }
.spread-row .sv { color: var(--muted); font-size: 0.74rem; font-variant-numeric: tabular-nums; }
.spread-row .st { grid-column: 1 / -1; height: 6px; background: var(--surface2); border-radius: 3px; overflow: hidden; }
.spread-row .st > span { display: block; height: 100%; background: var(--gold-deep); opacity: 0.8; }

/* ================= Shooting sessions (WS3) ================= */
.shoot-progress { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; margin-top: 1rem; box-shadow: var(--shadow); }
.shoot-progress .sp-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.5rem; }
.shoot-progress .sp-top h3 { margin: 0; font-family: var(--serif); font-size: 1.05rem; }
.shoot-progress .sp-top .sp-n { font-size: 0.8rem; color: var(--muted); }
.shoot-bar { height: 12px; border-radius: 7px; background: var(--surface2); border: 1px solid var(--line); overflow: hidden; }
.shoot-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-deep), var(--gold-soft)); transition: width 1s var(--ease-out); }
.shoot-grid { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); margin-top: 0.8rem; }
.shoot-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.shoot-card.done { border-color: var(--ok); }
.shoot-card .sh-c { font-weight: 700; font-size: 0.92rem; }
.shoot-card .sh-n { font-size: 0.78rem; color: var(--muted); }
.shoot-card .sh-n strong { color: var(--ink); }
.shoot-card .sh-bar { height: 6px; border-radius: 4px; background: var(--surface2); border: 1px solid var(--line); overflow: hidden; }
.shoot-card .sh-bar > span { display: block; height: 100%; background: var(--gold-deep); }
.shoot-card .sh-done-msg { color: var(--ok); font-size: 0.8rem; font-weight: 600; }
.shoot-card .btn { margin-top: 0.2rem; align-self: flex-start; }

/* ================= Dossier Phase-2 capture (WS2) ================= */
.p2-sec { border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.p2-sec h4 .p2-tag {
  display: inline-block; margin-left: 0.5rem; vertical-align: middle;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold-soft); border: 1px solid var(--gold-deep); border-radius: 4px; padding: 0.1rem 0.4rem;
}
.p2-grid { display: grid; gap: 0.6rem; grid-template-columns: 1fr; margin-top: 0.6rem; }
@media (min-width: 560px) { .p2-grid { grid-template-columns: 1fr 1fr; } }
.p2-field { background: var(--surface2); border: 1px solid var(--line); border-radius: 10px; padding: 0.6rem 0.75rem; }
.p2-field .k { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.2rem; }
.p2-field .v { font-size: 0.88rem; }
.p2-field .v.awaiting { color: var(--faint); font-style: italic; font-size: 0.8rem; }
.p2-field .v.awaiting::before { content: "◌ "; }
.ds-complete .bar { transition: width 0.8s var(--ease-out); }
.ds-complete .p2-note { display: block; margin-top: 0.3rem; font-size: 0.72rem; color: var(--faint); }

/* ================= Print (WS5): clean paper dossier + inventory ================= */
@media print {
  :root { --bg: #fff; --bg2: #fff; --surface: #fff; --surface2: #f5f5f5; --ink: #000; --muted: #333; --faint: #666; --gold: #000; --gold-soft: #000; --gold-deep: #555; --line: #bbb; --line-strong: #888; }
  body::after, .hero-glow, .hero::before, #rain-canvas, .lofi-bar, .lofi-pill, .ambient-panel,
  .tabs, .foot, .toast, .sheet, .palette, .lightbox, .backdrop, .offline-banner,
  .hero-actions, .search-btn, .atmo-btn, .rain-btn, .auto-toggle, .drawer-bar, .ph-hint,
  .latest-rail, .reveal { display: none !important; }
  body { background: #fff; color: #000; }
  #app { max-width: none; padding: 0; }
  .hero { padding: 1rem 0; border-bottom: 2px solid #000; }
  .wordmark, .hero-grand { color: #000 !important; text-shadow: none !important; }
  .pane { display: none !important; }
  .pane.active { display: block !important; }
  .card, .tile, .insight-card, .shoot-card { box-shadow: none; break-inside: avoid; border-color: #999; }
  .table-wrap { max-height: none; overflow: visible; }
  table.data { font-size: 9pt; }
  /* Dossier prints as a standalone record */
  #drawer { position: static; display: block; }
  #drawer[hidden] { display: none; }
  .drawer-inner { max-height: none; overflow: visible; animation: none; }
  .ph-slot img { max-height: 3.5in; }
  a { color: #000; text-decoration: none; }
  .ds-stage { break-inside: avoid; }
}

/* ================= Reduced motion ================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .pane.active { animation: none; }
  .moment-text { transition: none; }
  .lofi-pill { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .drawer-inner { animation: none; }
  .backdrop, .palette { animation: none; }
}

/* ============================================================
   TR9 · THE MUSEUM REBUILD
   Five wings, bottom navigation, exhibition hero. Atmospheres are
   full experiences now — After Hours is slow/cinematic/generous,
   Conservator is dense/archival/fast — not just different paint.
   ============================================================ */

/* ---------- Frame: room for the bottom wing nav ---------- */
:root { --nav-h: 66px; }
main { padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 1.25rem); }

/* The old fixed footer becomes an in-flow colophon at the end of the Hall. */
.foot {
  position: static;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-top: 1px solid var(--line);
  margin-top: 2.5rem;
  padding: 1rem 0 0;
  font-size: 0.76rem;
  color: var(--muted);
}

/* Lofi + toast ride above the wing nav now. */
.lofi-pill { bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 0.9rem); }
.lofi-bar { bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 0.7rem); }
@media (min-width: 701px) {
  .lofi-bar { bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 0.7rem); }
}
.toast { bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 1.4rem); z-index: 120; }

/* ---------- Bottom wing navigation ---------- */
.wings {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
  z-index: 100100; /* Always accessible above modals and sheets to prevent navigation lockup */
  display: flex;
  background: var(--drawerbar-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line-strong);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateZ(0);
  transition: all 0.3s var(--ease-out);
}
@media (min-width: 768px) {
  .wings {
    left: 50%;
    right: auto;
    bottom: 0.85rem;
    transform: translateX(-50%) translateZ(0);
    width: min(640px, calc(100vw - 2rem));
    border-radius: 20px;
    border: 1px solid var(--line-strong);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    padding: 0 0.5rem;
    overflow: hidden;
  }
  .lofi-pill {
    left: 1.5rem;
    right: auto;
    bottom: 1.25rem;
    transform: none;
  }
}
.wing {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0.45rem 2px 0.4rem;
  background: none;
  border: 0;
  color: var(--muted);
  font-family: var(--font);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  min-height: var(--nav-h);
  box-sizing: border-box;
}
.wing span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.wing svg { width: 22px; height: 22px; flex-shrink: 0; }
.wing.active { color: var(--gold-soft); }
.wing.active::before {
  content: "";
  position: absolute;
  top: 0; left: 22%; right: 22%;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
  box-shadow: 0 0 12px var(--gold);
}
html[data-atmo="conservator"] .wing.active::before { box-shadow: none; }
.wing:active { transform: scale(0.96); }

/* 3D Spatial Museum Room Tab */
.wing.wing-3d {
  position: relative;
  color: var(--gold-soft);
  background: linear-gradient(180deg, rgba(200, 169, 74, 0.08) 0%, transparent 100%);
}
.wing.wing-3d svg {
  color: var(--gold);
  filter: drop-shadow(0 0 6px rgba(200, 169, 74, 0.5));
}
.wing.wing-3d:hover {
  color: #fff;
  background: linear-gradient(180deg, rgba(200, 169, 74, 0.2) 0%, transparent 100%);
}
.wing-badge-3d {
  position: absolute;
  top: 3px;
  right: calc(50% - 24px);
  padding: 1px 4.5px;
  font-family: var(--mono);
  font-size: 0.52rem;
  font-weight: 800;
  line-height: 1;
  border-radius: 4px;
  background: linear-gradient(135deg, #d97706, #f59e0b);
  color: #08090c;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
  letter-spacing: 0.05em;
  animation: pulse-3d 2.5s infinite ease-in-out;
}
@keyframes pulse-3d {
  0%, 100% { transform: scale(1); opacity: 0.95; }
  50% { transform: scale(1.12); opacity: 1; box-shadow: 0 0 12px rgba(245, 158, 11, 0.9); }
}

/* Hero 3D Spatial Table Launcher */
.hero-spatial-launcher {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.32rem 0.85rem;
  margin-left: auto;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(200, 169, 74, 0.22) 0%, rgba(200, 169, 74, 0.08) 100%);
  border: 1px solid rgba(200, 169, 74, 0.45);
  color: var(--gold-soft);
  font-family: var(--font);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.25s cubic-bezier(0.2, 0.9, 0.3, 1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hero-spatial-launcher:hover {
  background: linear-gradient(135deg, rgba(200, 169, 74, 0.38) 0%, rgba(200, 169, 74, 0.16) 100%);
  border-color: var(--gold);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(200, 169, 74, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.hero-spatial-launcher .hsl-icon {
  font-size: 0.95rem;
  line-height: 1;
}
.hero-spatial-launcher .hsl-pill {
  padding: 1px 5px;
  font-family: var(--mono);
  font-size: 0.54rem;
  font-weight: 800;
  border-radius: 10px;
  background: var(--gold);
  color: #08090c;
  letter-spacing: 0.06em;
}

/* Grand Hall 3D Spatial Table Spotlight Card (Unmissable Live 3D Portal) */
.grand-spatial-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 1.6rem;
  margin: 1.5rem auto 2rem;
  max-width: 960px;
  width: calc(100% - 2rem);
  box-sizing: border-box;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(200, 169, 74, 0.16) 0%, rgba(18, 24, 38, 0.95) 50%, rgba(10, 14, 22, 0.98) 100%);
  border: 1.5px solid rgba(200, 169, 74, 0.45);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7), 0 0 32px rgba(200, 169, 74, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  overflow: hidden;
  transition: transform 0.25s var(--ease-out), border-color 0.25s ease, box-shadow 0.25s ease;
}
.grand-spatial-card:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.85), 0 0 40px rgba(200, 169, 74, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.gsc-left {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex: 1;
}
.gsc-icon-wrap {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(200, 169, 74, 0.28) 0%, rgba(200, 169, 74, 0.08) 100%);
  border: 1px solid rgba(200, 169, 74, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
.gsc-badge {
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}
.gsc-title {
  font-family: var(--font-display, var(--font));
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
  margin-bottom: 0.25rem;
}
.gsc-desc {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.45;
  max-width: 600px;
}
.gsc-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 1.4rem;
  border-radius: 12px;
  border: 1px solid var(--gold);
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  color: #fff;
  font-family: var(--font);
  font-size: 0.88rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(217, 119, 6, 0.45);
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.gsc-btn:hover {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 8px 26px rgba(245, 158, 11, 0.6);
}
.gsc-key {
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.35);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}
@media (max-width: 768px) {
  .grand-spatial-card {
    flex-direction: column;
    align-items: stretch;
    padding: 1rem 1.1rem;
    gap: 1rem;
    margin: 1rem auto 1.5rem;
  }
  .gsc-left {
    gap: 0.85rem;
  }
  .gsc-icon-wrap {
    width: 44px;
    height: 44px;
    font-size: 1.4rem;
  }
  .gsc-title {
    font-size: 1.05rem;
  }
  .gsc-btn {
    width: 100%;
    justify-content: center;
  }
}
.lab-badge {
  position: absolute;
  top: 4px;
  right: calc(50% - 26px);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0;
  background: var(--gold);
  color: #0b0a08;
  border-radius: 999px;
  padding: 1px 7px;
  text-transform: none;
}
html[data-atmo="conservator"] .lab-badge { color: #faf6ec; }
.lab-badge[hidden] { display: none; }

/* ---------- Floating search ---------- */
.fab-search {
  position: fixed;
  right: 1rem;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 1rem);
  z-index: 59;
  width: 54px; height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--toastgrad1), var(--toastgrad2));
  border: 1px solid var(--gold-deep);
  color: var(--gold-soft);
  box-shadow: var(--shadow);
  cursor: pointer;
}
.fab-search:active { transform: scale(0.93); }
/* When the music bar is open it sits over the FAB's spot — slide the FAB above it.
   The expanded bar is tall; the collapsed chip is short. */
html[data-lofi="open"] .fab-search {
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 7.4rem);
}
html[data-lofi="collapsed"] .fab-search {
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 4.4rem);
}
/* tr14: the open bar is two rows tall on phones — lift the FAB clear of it. */
@media (max-width: 480px) {
  html[data-lofi="open"] .fab-search {
    bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 10rem);
  }
}
/* tr14: keep page content from sliding under the open music bar. */
html[data-lofi="open"] main {
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 7.5rem);
}
html[data-lofi="collapsed"] main {
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 4rem);
}
@media (max-width: 480px) {
  html[data-lofi="open"] main {
    padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 10rem);
  }
}

/* ---------- Pane transitions: walking between wings ---------- */
.pane { display: none; }
.pane:not(.active) * {
  animation-play-state: paused !important;
}
.pane.active {
  display: block;
  animation: wing-in 0.5s var(--ease-out);
}
@keyframes wing-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
html[data-atmo="conservator"] .pane.active { animation-duration: 0.28s; animation-name: wing-in-calm; }
@keyframes wing-in-calm {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Wing heads ---------- */
.wing-head {
  padding: 1.75rem 0 0.25rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}
.wing-head h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 2rem;
  margin: 0.3rem 0 0.35rem;
  letter-spacing: 0.01em;
}
.wing-head .sub { margin: 0 0 1rem; }
.wing-head h2 {
  font-size: 2.2rem;
  letter-spacing: 0.01em;
}
html[data-atmo="afterhours"] .wing-head h2, html:not([data-atmo]) .wing-head h2 {
  text-shadow: 0 2px 30px rgba(200, 169, 74, 0.25);
}

/* ---------- Exhibition: masterpieces on the wall ---------- */
.exhibit {
  position: relative;
  margin: 1.4rem 0 0.4rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
  cursor: default;
  text-align: left;
  width: 100%;
  color: var(--ink);
  font-family: var(--font);
  padding: 0;
}
.exhibit-bg {
  position: absolute; inset: -12%;
  background:
    radial-gradient(60% 90% at 50% 10%, rgba(200, 169, 74, 0.16), transparent 70%),
    radial-gradient(40% 60% at 80% 90%, rgba(122, 46, 46, 0.12), transparent 70%);
  pointer-events: none;
}
html[data-atmo="afterhours"] .exhibit-bg, html:not([data-atmo]) .exhibit-bg {
  animation: kenburns 26s ease-in-out infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1) translateY(0); }
  to { transform: scale(1.12) translateY(-2%); }
}
html[data-atmo="conservator"] .exhibit-bg {
  background:
    repeating-linear-gradient(0deg, transparent 0 26px, rgba(122,46,46,0.08) 26px 27px),
    radial-gradient(70% 100% at 50% 0%, rgba(138, 90, 30, 0.10), transparent 70%);
}
.exhibit-kicker {
  position: relative;
  display: flex; align-items: center; gap: 0.5rem;
  margin: 0;
  padding: 1rem 1.25rem 0;
}
.exhibit-lamp {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold-soft);
  box-shadow: 0 0 10px var(--gold-soft);
  animation: lamp 3s ease-in-out infinite;
}
@keyframes lamp { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

.exhibit-dots {
  position: relative;
  display: flex; gap: 0.45rem;
  padding: 0 1.25rem 1rem;
}
.exhibit-dots button {
  width: 26px; height: 3px; border: 0; border-radius: 2px;
  background: var(--line-strong);
  cursor: pointer; padding: 0;
}
.exhibit-dots button.on { background: var(--gold-soft); }

/* ---------- Hall: wing entrance cards ---------- */
.wing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 1.5rem 0;
}
@media (min-width: 760px) { .wing-grid { grid-template-columns: repeat(4, 1fr); } }
.wing-card {
  display: flex; flex-direction: column; gap: 0.35rem;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem;
  color: var(--ink);
  font-family: var(--font);
  cursor: pointer;
  transition: transform 0.3s var(--ease-out), border-color 0.3s;
}
.wing-card:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.wing-card svg { width: 26px; height: 26px; color: var(--gold); }
.wing-card .wc-name { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; }
.wing-card .wc-desc { font-size: 0.8rem; color: var(--muted); line-height: 1.4; }
.wing-card .wc-stat { font-size: 0.78rem; color: var(--gold-soft); font-weight: 600; margin-top: auto; padding-top: 0.4rem; }

/* ---------- Hall: the unmissable Lab banner ---------- */
.lab-banner {
  display: block;
  width: 100%;
  text-align: left;
  margin: 0 0 1.5rem;
  padding: 1.25rem 1.25rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid var(--gold-deep);
  background: var(--hold-bg);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-family: var(--font);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.lab-banner .lb-eyebrow {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-soft); font-weight: 700;
}
.lab-banner h3 {
  font-family: var(--serif); font-size: 1.6rem; font-weight: 600;
  margin: 0.4rem 0 0.3rem;
}
.lab-banner p { margin: 0 0 0.8rem; color: var(--muted); font-size: 0.9rem; }
.lab-progress { height: 10px; border-radius: 6px; background: var(--surface2); overflow: hidden; border: 1px solid var(--line); }
.lab-progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); border-radius: 6px; transition: width 1s var(--ease-out); }
.lab-meta { display: flex; justify-content: space-between; align-items: baseline; margin-top: 0.5rem; font-size: 0.85rem; }
.lab-meta strong { font-family: var(--serif); font-size: 1.25rem; color: var(--gold-soft); }
.lab-go { font-weight: 700; color: var(--gold-soft); }

/* ---------- Hall: curator's notes ---------- */
.notes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 0 0 1.5rem;
}
@media (min-width: 760px) { .notes-grid { grid-template-columns: repeat(4, 1fr); } }
.note-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
}
.note-card .k { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
.note-card .v { font-family: var(--serif); font-size: 1.3rem; margin: 0.25rem 0; color: var(--ink); }
.note-card .s { font-size: 0.78rem; color: var(--muted); line-height: 1.45; }

/* ---------- Gallery: pieces on the wall ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: 1rem;
}
@media (min-width: 760px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
@media (min-width: 1100px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); gap: 1.75rem; } }
.piece-card.is-new {
  box-shadow: 0 0 20px rgba(200, 169, 74, 0.4) !important;
}
.pc-img {
  aspect-ratio: 16 / 10;
  background: var(--ph-bg);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.pc-img img { width: 100%; height: 100%; object-fit: cover; }
.pc-mono {
  font-family: var(--serif); font-weight: 700; font-size: 2rem;
  color: var(--faint); letter-spacing: 0.04em;
}
.pc-await {
  position: absolute; inset: auto 0 0 0;
  font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); background: rgba(0,0,0,0.35);
  padding: 0.2rem; text-align: center; font-weight: 700;
}
html[data-atmo="conservator"] .pc-await { background: rgba(250,246,236,0.8); }
.pc-body { padding: 0.7rem 0.85rem 0.85rem; display: flex; flex-direction: column; gap: 0.15rem; flex: 1; }
.pc-ser { font-family: var(--serif); font-weight: 700; font-size: 1.25rem; color: var(--gold-soft); display: flex; align-items: center; gap: 0.4rem; }
.pc-meta { font-size: 0.8rem; color: var(--muted); }
.pc-foot { display: flex; justify-content: space-between; align-items: baseline; margin-top: auto; padding-top: 0.45rem; }
.pc-val { font-family: var(--serif); font-weight: 600; color: var(--gold); }
.pc-conf { font-size: 0.72rem; color: var(--faint); }

/* ---------- Lab: work orders ---------- */
.shoot-card .btn { margin-top: 0.7rem; width: 100%; }
.lab-queue-note {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  color: var(--muted);
  font-size: 0.9rem;
  margin-top: 1rem;
}

/* ---------- Print: hide the new chrome ---------- */
@media print {
  .wings, .fab-search, .exhibit-dots, .wing-grid, .lab-banner { display: none !important; }
  main { padding-bottom: 0; }
}

/* ---------- Reduced motion: calm the museum ---------- */
@media (prefers-reduced-motion: reduce) {
  .pane.active { animation: none; }
  .exhibit-bg { animation: none !important; }
  .exhibit-slide { transition-duration: 0.01s; }
  .wing-card:hover, .piece-card:hover { transform: none; }
}

/* ============================================================
   tr10 — "Six Rooms": four new atmospheres, station player chrome,
   ambient depth UI, wing transitions, easter eggs.
   ============================================================ */

/* ---------- Colossus: bronze monument ---------- */
html[data-atmo="colossus"] {
  --bg: #141009; --bg2: #1c1510; --surface: #20180f; --surface2: #2c2114;
  --ink: #f6ead0; --muted: #ab9a76; --faint: #6f6046;
  --gold: #e2a93e; --gold-soft: #ffd98c; --gold-deep: #8a6420;
  --line: rgba(226, 169, 62, 0.16); --line-strong: rgba(226, 169, 62, 0.40);
  --ok: #7fbf6a; --warn: #e0a93e; --bad: #d06048;
  --shadow: inset 0 1px 0 rgba(255, 220, 150, 0.08), 0 22px 60px rgba(0, 0, 0, 0.75);
  --th-bg: #1a1409; --tabgrad1: #2c2114; --tabgrad2: #171106;
  --foot-bg: rgba(20, 16, 9, 0.92); --ph-bg: #141009; --sel-bg: #241a0c;
  --hold-bg: linear-gradient(135deg, #2c2110, #171006);
  --drawerbar-bg: rgba(32, 24, 15, 0.94); --cardmeta: #d8c9a6;
  --skeleton1: #2c2114; --skeleton2: #141009;
  --toastgrad1: #2c2114; --toastgrad2: #171106;
  --row-hover: rgba(226, 169, 62, 0.07);
  --grain-op: 0.06;
  --wing-dur: 0.7s; --wing-rise: 26px;
}
html[data-atmo="colossus"] body {
  background-image:
    radial-gradient(80% 46% at 50% -8%, rgba(226, 169, 62, 0.16), transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(226, 169, 62, 0.05) 79px 80px);
}
html[data-atmo="colossus"] .wing-head h2 {
  font-size: 2.3rem; letter-spacing: 0.02em;
  text-shadow: 0 3px 26px rgba(226, 169, 62, 0.4);
}
html[data-atmo="colossus"] .card, html[data-atmo="colossus"] .tile,
html[data-atmo="colossus"] .wing-card, html[data-atmo="colossus"] .note-card {
  border-top: 2px solid var(--gold-deep);
}
html[data-atmo="colossus"] .exhibit { border-width: 2px; }
html[data-atmo="colossus"] .exhibit-bg {
  background:
    radial-gradient(60% 90% at 50% 10%, rgba(226, 169, 62, 0.22), transparent 70%),
    radial-gradient(40% 60% at 80% 90%, rgba(138, 100, 32, 0.16), transparent 70%);
  animation: kenburns 18s ease-in-out infinite alternate;
}
html[data-atmo="colossus"] .exhibit::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 217, 140, 0.10) 50%, transparent 60%);
  background-size: 250% 100%;
  animation: colossus-sheen 7s ease-in-out infinite;
}
@keyframes colossus-sheen { 0% { background-position: 120% 0; } 60%, 100% { background-position: -120% 0; } }
html[data-atmo="colossus"] .badge, html[data-atmo="colossus"] .badge-kind,
html[data-atmo="colossus"] .badge-status {
  border-color: var(--gold-deep); color: var(--gold-soft);
  letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.68rem;
}

/* ---------- Nocturne: smoky jazz cellar ---------- */
html[data-atmo="nocturne"] {
  --bg: #070b16; --bg2: #0a0f1e; --surface: #0d1424; --surface2: #141c31;
  --ink: #eae6da; --muted: #8f96ad; --faint: #596078;
  --gold: #cfa95f; --gold-soft: #ecd096; --gold-deep: #77602f;
  --line: rgba(140, 160, 210, 0.15); --line-strong: rgba(140, 160, 210, 0.34);
  --ok: #6bbf7a; --warn: #d4a017; --bad: #c45c4a;
  --shadow: inset 0 1px 0 rgba(180, 200, 255, 0.05), 0 18px 50px rgba(0, 0, 0, 0.7);
  --th-bg: #0c1222; --tabgrad1: #182238; --tabgrad2: #0a0f1e;
  --foot-bg: rgba(7, 11, 22, 0.92); --ph-bg: #090d18; --sel-bg: #111a2e;
  --hold-bg: linear-gradient(135deg, #141c31, #0a0e1a);
  --drawerbar-bg: rgba(13, 20, 36, 0.94); --cardmeta: #c3c9da;
  --skeleton1: #182238; --skeleton2: #090d18;
  --toastgrad1: #182238; --toastgrad2: #0a0f1e;
  --row-hover: rgba(140, 160, 210, 0.07);
  --grain-op: 0.07;
  --wing-dur: 0.9s; --wing-rise: 10px;
}
html[data-atmo="nocturne"] body {
  background-image:
    radial-gradient(70% 55% at 20% 110%, rgba(90, 110, 190, 0.14), transparent 70%),
    radial-gradient(60% 50% at 85% -10%, rgba(207, 169, 95, 0.10), transparent 70%);
  animation: nocturne-smoke 46s ease-in-out infinite alternate;
}
@keyframes nocturne-smoke {
  from { background-position: 0 0, 0 0; }
  to { background-position: 60px 30px, -50px 20px; }
}
html[data-atmo="nocturne"] .sec-head { border-bottom: 3px double var(--line-strong); }
html[data-atmo="nocturne"] .wing-head h2 {
  font-size: 2.2rem; font-style: italic;
  text-shadow: 0 2px 30px rgba(140, 160, 210, 0.35);
}
html[data-atmo="nocturne"] .badge, html[data-atmo="nocturne"] .badge-kind,
html[data-atmo="nocturne"] .badge-status {
  border-radius: 999px; border-color: var(--line-strong);
  letter-spacing: 0.08em;
}
html[data-atmo="nocturne"] .exhibit-bg {
  background:
    radial-gradient(60% 90% at 50% 10%, rgba(140, 160, 210, 0.14), transparent 70%),
    radial-gradient(40% 60% at 80% 90%, rgba(207, 169, 95, 0.12), transparent 70%);
  animation: kenburns 34s ease-in-out infinite alternate;
}
html[data-atmo="nocturne"] .exhibit-lamp { background: #9fb4e8; box-shadow: 0 0 10px #9fb4e8; }

/* ---------- Odyssey: explorer's chart table ---------- */
html[data-atmo="odyssey"] {
  --bg: #ece1c8; --bg2: #e0d2b2; --surface: #f6efdc; --surface2: #eadcbd;
  --ink: #2c2213; --muted: #6f6046; --faint: #a8936b;
  --gold: #96690f; --gold-soft: #5c3a24; --gold-deep: #b28c46;
  --line: rgba(92, 58, 36, 0.20); --line-strong: rgba(92, 58, 36, 0.42);
  --ok: #3f7a44; --warn: #a06a00; --bad: #a03024;
  --shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 14px 34px rgba(80, 58, 28, 0.18);
  --th-bg: #e4d5b4; --tabgrad1: #e2d2ac; --tabgrad2: #cdb488;
  --foot-bg: rgba(236, 225, 200, 0.92); --ph-bg: #e6d8b8; --sel-bg: #e2cfa2;
  --hold-bg: linear-gradient(135deg, #f0e4c8, #dcc79c);
  --drawerbar-bg: rgba(246, 239, 220, 0.94); --cardmeta: #4a3d2a;
  --skeleton1: #ded0ac; --skeleton2: #ece1c8;
  --toastgrad1: #ecdfc2; --toastgrad2: #ddcda4;
  --row-hover: rgba(92, 58, 36, 0.06);
  --grain-op: 0.05;
  --wing-dur: 0.45s; --wing-rise: 14px;
}
html[data-atmo="odyssey"] body {
  background-image:
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(92, 58, 36, 0.055) 47px 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(92, 58, 36, 0.055) 47px 48px),
    radial-gradient(120% 90% at 50% 0%, rgba(150, 105, 15, 0.08), transparent 60%);
}
html[data-atmo="odyssey"] .card, html[data-atmo="odyssey"] .tile,
html[data-atmo="odyssey"] .wing-card, html[data-atmo="odyssey"] .note-card,
html[data-atmo="odyssey"] .album-card, html[data-atmo="odyssey"] .latest-card {
  border-style: dashed;
}
html[data-atmo="odyssey"] .sec-head { border-bottom: 2px dotted var(--line-strong); }
html[data-atmo="odyssey"] .sec-head h2 { letter-spacing: 0.03em; }
html[data-atmo="odyssey"] .tab.active { color: #faf6ec; }
html[data-atmo="odyssey"] .filter-ag.active { background: #d8c8a2; border-color: #8a6f42; color: #2c2213; }
html[data-atmo="odyssey"] :focus-visible { outline-color: var(--gold-soft); }
html[data-atmo="odyssey"] .exhibit-bg {
  background:
    repeating-linear-gradient(0deg, transparent 0 30px, rgba(92,58,36,0.07) 30px 31px),
    radial-gradient(70% 100% at 50% 0%, rgba(150, 105, 15, 0.12), transparent 70%);
}

/* ---------- The Cursed Wing: black wax and blood ---------- */
html[data-atmo="cursedwing"] {
  --bg: #090404; --bg2: #100707; --surface: #140909; --surface2: #200e0e;
  --ink: #ecd9d9; --muted: #a07a7a; --faint: #634545;
  --gold: #d42f2f; --gold-soft: #ff7a6b; --gold-deep: #7d1d1d;
  --line: rgba(212, 47, 47, 0.16); --line-strong: rgba(212, 47, 47, 0.42);
  --ok: #6a8a4a; --warn: #d4a017; --bad: #ff4d4d;
  --shadow: inset 0 1px 0 rgba(255, 90, 90, 0.05), 0 18px 55px rgba(0, 0, 0, 0.85);
  --th-bg: #160a0a; --tabgrad1: #240f0f; --tabgrad2: #100707;
  --foot-bg: rgba(9, 4, 4, 0.92); --ph-bg: #0c0606; --sel-bg: #1e0c0c;
  --hold-bg: linear-gradient(135deg, #220e0e, #100606);
  --drawerbar-bg: rgba(20, 9, 9, 0.94); --cardmeta: #cfa9a9;
  --skeleton1: #200e0e; --skeleton2: #0c0606;
  --toastgrad1: #240f0f; --toastgrad2: #100707;
  --row-hover: rgba(212, 47, 47, 0.07);
  --grain-op: 0.09;
  --wing-dur: 0.4s; --wing-rise: 0px;
}
html[data-atmo="cursedwing"] body {
  background-image:
    radial-gradient(90% 40% at 50% 115%, rgba(212, 47, 47, 0.13), transparent 70%),
    radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
}
html[data-atmo="cursedwing"] .wordmark { animation: cursed-flicker 6s linear infinite; }
html[data-atmo="cursedwing"] .wing-head h2 {
  font-size: 2.1rem; letter-spacing: 0.06em;
  text-shadow: 0 0 24px rgba(212, 47, 47, 0.55);
}
html[data-atmo="cursedwing"] .badge, html[data-atmo="cursedwing"] .badge-kind,
html[data-atmo="cursedwing"] .badge-status {
  border: 2px solid currentColor; border-radius: 4px;
  text-transform: uppercase; letter-spacing: 0.1em;
  transform: rotate(1.2deg); opacity: 0.94;
}
html[data-atmo="cursedwing"] .exhibit { border-color: var(--gold-deep); }
html[data-atmo="cursedwing"] .exhibit-bg {
  background:
    radial-gradient(60% 90% at 50% 10%, rgba(212, 47, 47, 0.14), transparent 70%),
    radial-gradient(40% 60% at 80% 90%, rgba(90, 10, 10, 0.25), transparent 70%);
}
html[data-atmo="cursedwing"] .exhibit-slide.on { animation: ex-glitch 9s steps(1) infinite; }
html[data-atmo="cursedwing"] .exhibit-lamp { background: #ff4d4d; box-shadow: 0 0 12px #ff4d4d; }
@keyframes cursed-flicker {
  0%, 100% { opacity: 1; } 3% { opacity: 0.6; } 4% { opacity: 1; }
  41% { opacity: 1; } 42% { opacity: 0.4; } 43% { opacity: 1; } 44% { opacity: 0.75; } 45% { opacity: 1; }
  78% { opacity: 1; } 79% { opacity: 0.55; } 80% { opacity: 1; }
}
@keyframes ex-glitch {
  0%, 91%, 94%, 100% { transform: none; filter: none; }
  92% { transform: translateX(-7px) skewX(2deg); filter: hue-rotate(40deg) saturate(1.6); }
  93% { transform: translateX(5px); filter: invert(0.08); }
}
/* Easter-egg content: only exists in the Cursed Wing */
.egg-cursed { display: none; }
html[data-atmo="cursedwing"] .egg-cursed { display: block; }
html[data-atmo="cursedwing"] .egg-cursed.note-card { display: block; border-color: var(--gold-deep); }
html[data-atmo="cursedwing"] p.egg-cursed.sub { color: var(--gold-soft); font-style: italic; letter-spacing: 0.12em; }

/* ---------- Atmosphere swatches for the sheet ---------- */
.sw-colossus { background: linear-gradient(135deg, #3a2a12, #e2a93e 60%, #141009); }
.sw-nocturne { background: linear-gradient(135deg, #070b16, #2a3a66 60%, #cfa95f); }
.sw-odyssey { background: linear-gradient(135deg, #b28c46, #f6efdc 60%, #5c3a24); }
.sw-cursedwing { background: linear-gradient(135deg, #090404, #d42f2f 55%, #090404); }

/* ---------- Wing entrances: per-theme rise-and-settle ---------- */
:root { --wing-dur: 0.55s; --wing-rise: 18px; }
html[data-atmo="afterhours"] { --wing-dur: 0.55s; --wing-rise: 18px; }
html[data-atmo="conservator"] { --wing-dur: 0.28s; --wing-rise: 6px; }
.pane.wing-enter { animation: wing-in-var var(--wing-dur) var(--ease-out); }
@keyframes wing-in-var {
  from { opacity: 0; transform: translateY(var(--wing-rise)); }
  to { opacity: 1; transform: none; }
}

/* ---------- Atmosphere relight flash ---------- */
.atmo-flash {
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none; opacity: 0;
}
.atmo-flash.go { animation: atmo-flash-a 0.85s ease-out; }
@keyframes atmo-flash-a { 0% { opacity: 0; } 22% { opacity: 0.5; } 100% { opacity: 0; } }

/* ---------- Konami egg: the room shudders ---------- */
body.curator-sees-you { animation: seeyou 0.8s linear; }
@keyframes seeyou {
  0%, 100% { transform: none; } 20% { transform: translate(-6px, 3px) rotate(-0.4deg); }
  40% { transform: translate(5px, -4px); } 60% { transform: translate(-4px, -2px) rotate(0.4deg); }
  80% { transform: translate(3px, 2px); }
}

/* ---------- Station player chrome ---------- */
.lofi-pill { max-width: calc(100vw - 2rem); }
.lofi-pill #music-pill-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 62vw;
}
.lofi-pill .eq i { animation: none; transform: scaleY(0.5); opacity: 0.7; }
.lofi-pill.live .eq i { animation: eq 1s ease-in-out infinite; opacity: 1; }
.lofi-stationbtn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--surface2); color: var(--gold-soft);
  font-family: var(--font); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 0.35rem 0.65rem; cursor: pointer;
  white-space: nowrap;
  /* tr11: fixed width — the station name must never resize the button,
     or the volume slider shifts every time the station changes. */
  flex: 0 0 auto;
  width: 7.5rem;
  overflow: hidden;
}
.lofi-stationbtn #lofi-station {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lofi-stationbtn .ls-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.lofi-stationbtn .ls-caret { font-size: 0.6rem; opacity: 0.7; }
.station-menu {
  position: absolute; left: 0.6rem; right: 0.6rem; bottom: calc(100% + 10px);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 14px; box-shadow: var(--shadow);
  padding: 0.4rem; z-index: 80; max-height: min(52vh, 340px); overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.station-menu[hidden] { display: none; }
.station-opt {
  display: flex; align-items: center; gap: 0.65rem; width: 100%;
  background: none; border: none; border-radius: 10px;
  padding: 0.65rem 0.75rem; cursor: pointer; text-align: left;
  color: var(--ink); font-family: var(--font);
}
.station-opt:hover { background: var(--row-hover); }
.station-opt.current { background: var(--sel-bg); box-shadow: inset 3px 0 0 var(--gold); }
.station-opt .so-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.station-opt[data-station="lofi"] .so-dot { background: #8a7a5a; }
.station-opt[data-station="classical"] .so-dot { background: #b09a6a; }
.station-opt[data-station="epic"] .so-dot { background: #e2a93e; }
.station-opt[data-station="jazz"] .so-dot { background: #6a7ab0; }
.station-opt[data-station="adventure"] .so-dot { background: #7a9a5a; }
.station-opt[data-station="dark"] .so-dot { background: #d42f2f; }
.station-opt[data-station="psych"] .so-dot { background: #c026d3; }
.station-opt[data-station="abyss"] .so-dot { background: #1e40af; }
.station-opt[data-station="synthwave"] .so-dot { background: #00e5ff; }
.station-opt[data-station="quiet"] .so-dot { background: #a3a3a3; }
.station-opt[data-station="construct"] .so-dot { background: #33ff66; }
.station-opt[data-station="xeno"] .so-dot { background: #8b5cf6; }
.station-opt[data-station="solaris"] .so-dot { background: #f59e0b; box-shadow: 0 0 6px rgba(245, 158, 11, 0.6); }
.station-opt[data-station="alchemist"] .so-dot { background: #10b981; box-shadow: 0 0 6px rgba(16, 185, 129, 0.6); }
.station-opt[data-station="glacier"] .so-dot { background: #38bdf8; box-shadow: 0 0 6px rgba(56, 189, 248, 0.6); }
.station-opt[data-station="valhalla"] .so-dot { background: #eab308; box-shadow: 0 0 6px rgba(234, 179, 8, 0.6); }
.station-opt[data-station="dynasty"] .so-dot { background: #e11d48; box-shadow: 0 0 6px rgba(225, 29, 72, 0.6); }
.station-opt[data-station="zen"] .so-dot { background: #84cc16; box-shadow: 0 0 6px rgba(132, 204, 22, 0.6); }
.station-opt[data-station="samadhi"] .so-dot { background: #f97316; box-shadow: 0 0 6px rgba(249, 115, 22, 0.6); }
.station-opt[data-station="silkroad"] .so-dot { background: #e2b340; box-shadow: 0 0 6px rgba(226, 179, 64, 0.6); }
.station-opt .so-name { font-weight: 700; font-size: 0.9rem; }
.station-opt .so-tag { margin-left: auto; font-size: 0.72rem; color: var(--muted); font-style: italic; }

/* Dynamic dot colors on the player bar station button */
.lofi-stationbtn[data-station="lofi"] .ls-dot { background: #8a7a5a; }
.lofi-stationbtn[data-station="classical"] .ls-dot { background: #b09a6a; }
.lofi-stationbtn[data-station="epic"] .ls-dot { background: #e2a93e; }
.lofi-stationbtn[data-station="jazz"] .ls-dot { background: #6a7ab0; }
.lofi-stationbtn[data-station="adventure"] .ls-dot { background: #7a9a5a; }
.lofi-stationbtn[data-station="dark"] .ls-dot { background: #d42f2f; }
.lofi-stationbtn[data-station="psych"] .ls-dot { background: #c026d3; }
.lofi-stationbtn[data-station="abyss"] .ls-dot { background: #1e40af; }
.lofi-stationbtn[data-station="synthwave"] .ls-dot { background: #00e5ff; }
.lofi-stationbtn[data-station="quiet"] .ls-dot { background: #a3a3a3; }
.lofi-stationbtn[data-station="construct"] .ls-dot { background: #33ff66; }
.lofi-stationbtn[data-station="xeno"] .ls-dot { background: #8b5cf6; }
.lofi-stationbtn[data-station="solaris"] .ls-dot { background: #f59e0b; box-shadow: 0 0 6px rgba(245, 158, 11, 0.6); }
.lofi-stationbtn[data-station="alchemist"] .ls-dot { background: #10b981; box-shadow: 0 0 6px rgba(16, 185, 129, 0.6); }
.lofi-stationbtn[data-station="glacier"] .ls-dot { background: #38bdf8; box-shadow: 0 0 6px rgba(56, 189, 248, 0.6); }
.lofi-stationbtn[data-station="valhalla"] .ls-dot { background: #eab308; box-shadow: 0 0 6px rgba(234, 179, 8, 0.6); }
.lofi-stationbtn[data-station="dynasty"] .ls-dot { background: #e11d48; box-shadow: 0 0 6px rgba(225, 29, 72, 0.6); }
.lofi-stationbtn[data-station="zen"] .ls-dot { background: #84cc16; box-shadow: 0 0 6px rgba(132, 204, 22, 0.6); }
.lofi-stationbtn[data-station="samadhi"] .ls-dot { background: #f97316; box-shadow: 0 0 6px rgba(249, 115, 22, 0.6); }
.lofi-stationbtn[data-station="silkroad"] .ls-dot { background: #e2b340; box-shadow: 0 0 6px rgba(226, 179, 64, 0.6); }

/* ---------- Ambient mixer depth UI ---------- */
.amb-preset.active {
  background: var(--sel-bg); border-color: var(--gold);
  color: var(--gold-soft); font-weight: 700;
}
.amb-preset-desc {
  margin: 0.35rem 0 0; min-height: 1.1em;
  font-size: 0.75rem; font-style: italic; color: var(--muted);
}
.amb-preset-desc:not(:empty)::before { content: "— "; }

/* Multi-layer atmospheric visual FX chips */
.amb-fx-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
}
.amb-fx-chip {
  background: var(--surface2);
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 20px;
  padding: 0.3rem 0.65rem;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.amb-fx-chip:hover {
  border-color: var(--gold-soft);
  color: var(--ink);
  background: var(--row-hover);
}
.amb-fx-chip.active {
  background: linear-gradient(135deg, rgba(200, 169, 74, 0.22), rgba(200, 169, 74, 0.08));
  border-color: var(--gold);
  color: var(--gold-soft);
  box-shadow: 0 0 10px rgba(200, 169, 74, 0.25);
}

/* ---------- Reduced motion: still rooms ---------- */
@media (prefers-reduced-motion: reduce) {
  .pane.wing-enter { animation: none; }
  .atmo-flash { display: none; }
  body.curator-sees-you { animation: none; }
  html[data-atmo="colossus"] .exhibit::after,
  html[data-atmo="nocturne"] body,
  html[data-atmo="colossus"] .exhibit-bg,
  html[data-atmo="nocturne"] .exhibit-bg,
  html[data-atmo="cursedwing"] .wordmark,
  html[data-atmo="cursedwing"] .exhibit-slide.on { animation: none; }
  .lofi-pill.live .eq i { animation: none; }
}

/* ================= tr11: lightning ================= */
#lightning-flash {
  position: fixed;
  inset: 0;
  z-index: 45;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg, var(--bolt, rgba(190, 215, 255, 0.5)) 0%, transparent 55%);
}
#lightning-flash.strike { animation: bolt 1.1s ease-out; }
@keyframes bolt {
  0% { opacity: 0; }
  6% { opacity: var(--bolt-op, 0.6); }
  12% { opacity: 0.06; }
  20% { opacity: var(--bolt-op, 0.6); }
  38% { opacity: 0; }
  100% { opacity: 0; }
}

/* ================= tr11: Soundscape v4 mixer UI ================= */
.ambient-panel {
  width: min(360px, calc(100vw - 2rem));
  max-height: min(78vh, 660px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.amb-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
  position: sticky;
  top: -0.85rem;
  z-index: 10;
  background: var(--drawerbar-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  margin: -0.85rem -0.95rem 0.6rem;
  padding: 0.8rem 0.95rem 0.6rem;
  border-bottom: 1px solid var(--line-strong);
}
.amb-title {
  font-family: var(--serif);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--gold-soft);
  letter-spacing: 0.01em;
}
.amb-sub {
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.1rem;
}
#amb-close {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--surface2);
  color: var(--muted);
  width: 32px; height: 32px;
  border-radius: 10px;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
}
#amb-close:hover { color: var(--ink); border-color: var(--gold-deep); }
.amb-secname {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0.75rem 0 0.3rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--line);
}
.amb-secname:first-of-type { border-top: none; padding-top: 0; margin-top: 0.35rem; }
.amb-layers { display: grid; gap: 1px; }
.amb-layer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.14rem 0.25rem;
  border-radius: 10px;
}
.amb-layer:hover { background: var(--surface2); }
.amb-layertoggle {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  appearance: none;
  background: none;
  border: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.83rem;
  padding: 0.38rem 0.2rem;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: color 0.15s;
}
.amb-layer.on .amb-layertoggle { color: var(--ink); font-weight: 600; }
.amb-layername { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.amb-bolt { color: var(--gold-soft); font-size: 0.72rem; }
.amb-meter {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
  width: 22px;
  flex: 0 0 auto;
  opacity: 0.3;
}
.amb-meter i {
  width: 4px;
  border-radius: 2px;
  background: var(--muted);
  height: 28%;
}
.amb-layer.on .amb-meter { opacity: 1; }
.amb-layer.on .amb-meter i { background: var(--gold-soft); animation: meter 0.9s ease-in-out infinite; }
.amb-layer.on .amb-meter i:nth-child(2) { animation-delay: 0.18s; }
.amb-layer.on .amb-meter i:nth-child(3) { animation-delay: 0.36s; }
@keyframes meter { 0%, 100% { height: 26%; } 50% { height: 100%; } }
.amb-vol {
  width: 84px;
  flex: 0 0 auto;
  accent-color: var(--gold);
  cursor: pointer;
}
.amb-foot {
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.5rem;
}
.amb-master {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.74rem;
  color: var(--muted);
}
.amb-master input[type="range"] { flex: 1 1 auto; accent-color: var(--gold); cursor: pointer; }

/* ================= tr11: animation pass ================= */
/* --- Hero money sheen: a slow light sweep across the grand total --- */
.hero-money { position: relative; overflow: hidden; }
.hero-money::after {
  content: "";
  position: absolute;
  top: -30%; bottom: -30%;
  width: 38%;
  left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 238, 196, 0.14), transparent);
  transform: skewX(-14deg);
  animation: money-sheen 9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes money-sheen { 0%, 58% { left: -60%; } 88%, 100% { left: 150%; } }

/* --- Wing cards: lift on hover, press on tap --- */
.wing-card { transition: transform 0.25s var(--ease-out), border-color 0.25s, box-shadow 0.25s; }
.wing-card:hover {
  transform: translateY(-3px);
  border-color: var(--gold-deep);
  box-shadow: var(--shadow), 0 10px 30px rgba(200, 169, 74, 0.13);
}
.wing-card:active { transform: translateY(-1px) scale(0.99); }

/* --- Exhibit rotation: the incoming masterpiece number rises in --- */
.exhibit-slide.on .ex-ser { animation: ex-rise 0.7s var(--ease-out); }
.exhibit-slide.on .ex-val { animation: ex-rise 0.7s 0.08s var(--ease-out) backwards; }
@keyframes ex-rise { from { opacity: 0; transform: translateY(16px); } }

/* --- Press states for the chrome --- */
.wings .wing { transition: transform 0.15s var(--ease-out); }
.wings .wing:active { transform: scale(0.93); }
.atmo-card { transition: transform 0.2s var(--ease-out), border-color 0.2s, box-shadow 0.2s; }
.atmo-card:active { transform: scale(0.98); }
.rain-btn:active, .search-btn:active { transform: scale(0.95); }

/* --- Atmosphere sheet: cards cascade in when the sheet opens --- */
#atmo-sheet:not([hidden]) .atmo-card { animation: card-in 0.5s var(--ease-out) backwards; }
#atmo-sheet:not([hidden]) .atmo-card:nth-child(2) { animation-delay: 0.06s; }
#atmo-sheet:not([hidden]) .atmo-card:nth-child(3) { animation-delay: 0.12s; }
#atmo-sheet:not([hidden]) .atmo-card:nth-child(4) { animation-delay: 0.18s; }
#atmo-sheet:not([hidden]) .atmo-card:nth-child(5) { animation-delay: 0.24s; }
#atmo-sheet:not([hidden]) .atmo-card:nth-child(6) { animation-delay: 0.3s; }
@keyframes card-in { from { opacity: 0; transform: translateY(22px) scale(0.98); } }

/* --- Gold dust motes (JS-injected): slow ambient particles --- */
#dust-layer {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
  transform: translateZ(0);
}
#dust-layer i {
  position: absolute;
  bottom: -4vh;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 217, 168, 0.85), transparent 70%);
  animation-name: dust-rise;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  transform: translateZ(0);
}
@keyframes dust-rise {
  0% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-55vh) translateX(2.5vw); }
  100% { transform: translateY(-112vh) translateX(-1.5vw); }
}
html[data-atmo="cursedwing"] #dust-layer i {
  background: radial-gradient(circle, rgba(255, 84, 84, 0.55), transparent 70%);
}

/* --- Cursed Wing: the room itself breathes --- */
html[data-atmo="cursedwing"] .hero-glow {
  background: radial-gradient(ellipse 50% 55% at 50% 45%, rgba(180, 30, 30, 0.16), transparent 70%);
  animation: cursed-breathe 5.5s ease-in-out infinite;
}
@keyframes cursed-breathe {
  0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.07); }
}

/* --- Stronger reveals: entrances you can actually see --- */
.reveal { transform: translateY(20px); transition-duration: 0.65s; }

/* --- Reduced motion: the new movement stands down --- */
@media (prefers-reduced-motion: reduce) {
  #dust-layer, #lightning-flash { display: none; }
  .hero-money::after,
  .exhibit-slide.on .ex-ser,
  .exhibit-slide.on .ex-val,
  .amb-layer.on .amb-meter i,
  #atmo-sheet:not([hidden]) .atmo-card,
  html[data-atmo="cursedwing"] .hero-glow { animation: none; }
  .wing-card:hover { transform: none; box-shadow: var(--shadow); }
  .reveal { transform: none; }
}

/* ================= tr11: vault spacing + table consistency ================= */
/* Albums card follows the same 0.8rem grid rhythm instead of an inline 0.75rem. */
.age-albums-card { margin-top: 0.8rem; }
/* Never clip the glance table mid-row: it sizes to its content and the page scrolls. */
.glance-wrap { max-height: none; }
/* ID lists stay on one line so every row keeps the same shape; the wrap scrolls sideways. */
table.data td.ids { white-space: nowrap; }
/* Ledger rows: values sit in a fixed-width right column so the label/value gap
   is identical in every card instead of stretching across wide cards. */
.bucket-row .v { min-width: 10.5rem; flex: 0 0 auto; }
@media (max-width: 700px) {
  .bucket-row .v { min-width: 7rem; }
  .bucket-row { font-size: 0.84rem; padding: 0.42rem 0; }
}

/* ================= tr12: rain icon legibility + dust on light themes ================= */
/* Rain button: filled cloud reads at small sizes; stronger "on" state. */
.rain-btn svg { width: 20px; height: 20px; flex: 0 0 auto; }
.rain-btn[aria-pressed="true"] {
  background: rgba(125, 180, 216, 0.14);
  border-color: #6a9dc4;
  color: #9cc8e8;
}
.rain-btn[aria-pressed="true"] svg { filter: drop-shadow(0 0 4px rgba(125, 180, 216, 0.9)); }
/* tr20: header Ambience button uses the same sliders glyph as the music widget; label shown except on narrow phones. */
/* Conservator (Curator) is a white room: pale-gold motes vanish on it, so use a
   deep bronze-gold that reads against white. */
html[data-atmo="conservator"] #dust-layer i {
  background: radial-gradient(circle, rgba(146, 106, 30, 0.62), transparent 70%);
}

/* ================= tr13: fire fx, lightning slider note, 6 new atmospheres ================= */
/* --- Fire glow + embers: full-screen firelight tied to the fire layer --- */
#fire-glow {
  position: fixed; inset: 0; z-index: 6; pointer-events: none;
  opacity: 0; transition: opacity 1.2s ease;
  background: radial-gradient(120% 90% at 50% 115%, rgba(255, 122, 30, var(--fire-op, 0.55)), transparent 62%);
}
#fire-glow.lit { opacity: 1; animation: fire-flicker 2.8s ease-in-out infinite; }
@keyframes fire-flicker {
  0%, 100% { filter: brightness(1); }
  28% { filter: brightness(1.22); }
  52% { filter: brightness(0.9); }
  76% { filter: brightness(1.12); }
}
#ember-layer { position: fixed; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 1s ease; }
#ember-layer.lit { opacity: 1; }
#ember-layer i {
  position: absolute; bottom: -3vh; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 170, 70, 0.95), rgba(255, 90, 20, 0) 70%);
  animation-name: ember-rise; animation-timing-function: linear; animation-iteration-count: infinite;
}
@keyframes ember-rise {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translateY(-106vh) translateX(3vw); opacity: 0; }
}

/* --- After Hours vs Colossus: split them apart. After Hours goes cold moonlight,
   Colossus goes full furnace. --- */
html[data-atmo="afterhours"] {
  --bg: #04060b; --bg2: #070a11; --surface: #0a0e16; --surface2: #101724;
  --ink: #edf1f8; --muted: #8e99ae; --faint: #545e74;
  --gold: #cdb271; --gold-soft: #e6d6a8; --gold-deep: #6a6238;
  --line: rgba(150, 175, 220, 0.13); --line-strong: rgba(150, 175, 220, 0.34);
  --th-bg: #080b11; --tabgrad1: #141a26; --tabgrad2: #080b11;
  --foot-bg: rgba(4, 6, 11, 0.92); --ph-bg: #060910; --sel-bg: #0d1320;
  --hold-bg: linear-gradient(135deg, #141b29, #080b11);
  --drawerbar-bg: rgba(10, 14, 22, 0.94); --cardmeta: #b9c2d4;
  --skeleton1: #101724; --skeleton2: #060910;
  --toastgrad1: #141a26; --toastgrad2: #080b11;
  --row-hover: rgba(150, 175, 220, 0.06);
  --shadow: inset 0 1px 0 rgba(180, 200, 240, 0.05), 0 18px 50px rgba(0, 0, 0, 0.8);
}
html[data-atmo="afterhours"] body {
  background-image:
    linear-gradient(180deg, rgba(130, 170, 235, 0.07), transparent 32%),
    radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(2, 4, 9, 0.6) 100%);
}
html[data-atmo="afterhours"] .hero-glow {
  background: radial-gradient(ellipse 50% 55% at 50% 45%, rgba(150, 190, 255, 0.12), transparent 70%);
}
html[data-atmo="colossus"] {
  --bg: #170f06; --bg2: #1f1409; --surface: #251a0c; --surface2: #32220f;
  --ink: #fbeed4; --muted: #c09a5e; --faint: #7d5c30;
  --gold: #f2a93b; --gold-soft: #ffd98c; --gold-deep: #9a651a;
  --line: rgba(242, 169, 59, 0.2); --line-strong: rgba(242, 169, 59, 0.48);
  --th-bg: #1c1207; --tabgrad1: #32220f; --tabgrad2: #1a1005;
  --foot-bg: rgba(23, 15, 6, 0.94); --ph-bg: #170f06; --sel-bg: #2a1d0b;
  --hold-bg: linear-gradient(135deg, #38260e, #1a1005);
  --drawerbar-bg: rgba(37, 26, 12, 0.95); --cardmeta: #e0c793;
  --skeleton1: #32220f; --skeleton2: #170f06;
  --toastgrad1: #32220f; --toastgrad2: #1a1005;
  --row-hover: rgba(242, 169, 59, 0.08);
  --grain-op: 0.07;
}
html[data-atmo="colossus"] body {
  background-image:
    radial-gradient(100% 55% at 50% 118%, rgba(255, 122, 26, 0.16), transparent 62%),
    radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(8, 4, 1, 0.55) 100%);
}
html[data-atmo="colossus"] .hero-glow {
  background: radial-gradient(ellipse 50% 55% at 50% 45%, rgba(255, 150, 50, 0.16), transparent 70%);
}
html[data-atmo="colossus"] .wordmark { text-shadow: 0 0 34px rgba(255, 150, 50, 0.45); }

/* ---------- 7. Kaleidoscope: the psychedelic wing ---------- */
html[data-atmo="kaleido"] {
  --bg: #0d0218; --bg2: #120326; --surface: #170433; --surface2: #20064a;
  --ink: #f6ecff; --muted: #b79ad9; --faint: #6f4f9e;
  --gold: #ff4dd2; --gold-soft: #ff9de2; --gold-deep: #8a1d6e;
  --line: rgba(255, 77, 210, 0.2); --line-strong: rgba(255, 77, 210, 0.5);
  --ok: #4dd2a0; --warn: #ffd24d; --bad: #ff5c8a;
  --shadow: inset 0 1px 0 rgba(255, 120, 220, 0.1), 0 18px 60px rgba(60, 0, 90, 0.8);
  --th-bg: #150330; --tabgrad1: #20064a; --tabgrad2: #0f0222;
  --foot-bg: rgba(13, 2, 24, 0.94); --ph-bg: #10022a; --sel-bg: #22074e;
  --hold-bg: linear-gradient(135deg, #2a0a5e, #120326);
  --drawerbar-bg: rgba(23, 4, 51, 0.95); --cardmeta: #d9bdf2;
  --skeleton1: #20064a; --skeleton2: #0d0218;
  --toastgrad1: #20064a; --toastgrad2: #0f0222;
  --row-hover: rgba(255, 77, 210, 0.09);
  --grain-op: 0.08;
}
html[data-atmo="kaleido"] body {
  background-image: radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(10, 0, 25, 0.6) 100%);
}
#kaleido-fx {
  position: fixed; inset: -25%; z-index: -1; pointer-events: none;
  background: conic-gradient(from 0deg, #ff0080, #ff8c00, #ffee00, #00ff88, #00ccff, #8844ff, #ff0080);
  filter: blur(90px) saturate(1.5);
  opacity: 0.3; mix-blend-mode: screen;
  animation: kaleido-spin 16s linear infinite;
}
@keyframes kaleido-spin { to { transform: rotate(360deg); } }
html[data-atmo="kaleido"] .wordmark {
  background: linear-gradient(90deg, #ff4dd2, #ffee00, #00ffcc, #ff4dd2);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: kaleido-word 8s linear infinite;
  text-shadow: none;
}
@keyframes kaleido-word { to { background-position: 300% 0; } }
html[data-atmo="kaleido"] .card, html[data-atmo="kaleido"] .tile {
  border-width: 1px; box-shadow: 0 0 24px rgba(255, 77, 210, 0.12), var(--shadow);
}
html[data-atmo="kaleido"] #dust-layer i {
  background: radial-gradient(circle, rgba(255, 120, 220, 0.8), transparent 70%);
}

/* ---------- 8. Sunken Treasury: the abyssal wreck ---------- */
html[data-atmo="abyss"] {
  --bg: #020a12; --bg2: #031019; --surface: #061620; --surface2: #0a2030;
  --ink: #d8f0f5; --muted: #6f96a5; --faint: #3d5a68;
  --gold: #4fd8e8; --gold-soft: #a5ecf5; --gold-deep: #1d6a7d;
  --line: rgba(79, 216, 232, 0.16); --line-strong: rgba(79, 216, 232, 0.42);
  --ok: #4dd2a0; --warn: #ffd24d; --bad: #ff6b6b;
  --shadow: inset 0 1px 0 rgba(120, 220, 240, 0.07), 0 18px 55px rgba(0, 10, 20, 0.85);
  --th-bg: #04121c; --tabgrad1: #0a2030; --tabgrad2: #020a12;
  --foot-bg: rgba(2, 10, 18, 0.94); --ph-bg: #031019; --sel-bg: #0b2233;
  --hold-bg: linear-gradient(135deg, #0b2a3d, #020a12);
  --drawerbar-bg: rgba(6, 22, 32, 0.95); --cardmeta: #a9ccd6;
  --skeleton1: #0a2030; --skeleton2: #020a12;
  --toastgrad1: #0a2030; --toastgrad2: #020a12;
  --row-hover: rgba(79, 216, 232, 0.07);
  --grain-op: 0.06;
}
html[data-atmo="abyss"] body {
  background-image:
    conic-gradient(from 168deg at 22% -10%, transparent 0deg, rgba(120, 220, 245, 0.09) 8deg, transparent 16deg),
    conic-gradient(from 192deg at 68% -10%, transparent 0deg, rgba(120, 220, 245, 0.07) 10deg, transparent 20deg),
    radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(0, 6, 12, 0.65) 100%);
  animation: abyss-sway 26s ease-in-out infinite alternate;
}
@keyframes abyss-sway { from { background-position: 0 0, 0 0, 0 0; } to { background-position: 3vw 0, -3vw 0, 0 0; } }
html[data-atmo="abyss"] #dust-layer i {
  background: radial-gradient(circle, rgba(140, 230, 245, 0.75), transparent 70%);
}
html[data-atmo="abyss"] .wordmark { text-shadow: 0 0 30px rgba(79, 216, 232, 0.5); }
html[data-atmo="abyss"] .hero-glow {
  background: radial-gradient(ellipse 50% 55% at 50% 45%, rgba(79, 216, 232, 0.12), transparent 70%);
}

/* ---------- 9. Neon Vault: chrome midnight ---------- */
html[data-atmo="neon"] {
  --bg: #0d0118; --bg2: #12011f; --surface: #150327; --surface2: #1d0435;
  --ink: #f2e9ff; --muted: #a58ac9; --faint: #5f4a86;
  --gold: #00f0ff; --gold-soft: #8ef7ff; --gold-deep: #0a6a80;
  --line: rgba(0, 240, 255, 0.18); --line-strong: rgba(255, 45, 150, 0.55);
  --ok: #39ff88; --warn: #ffe14d; --bad: #ff2d78;
  --shadow: inset 0 1px 0 rgba(0, 240, 255, 0.09), 0 0 34px rgba(255, 45, 150, 0.14), 0 18px 55px rgba(0, 0, 0, 0.85);
  --th-bg: #12011f; --tabgrad1: #1d0435; --tabgrad2: #0d0118;
  --foot-bg: rgba(13, 1, 24, 0.94); --ph-bg: #0f0220; --sel-bg: #20053c;
  --hold-bg: linear-gradient(135deg, #26064a, #0d0118);
  --drawerbar-bg: rgba(21, 3, 39, 0.95); --cardmeta: #cdb4ec;
  --skeleton1: #1d0435; --skeleton2: #0d0118;
  --toastgrad1: #1d0435; --toastgrad2: #0d0118;
  --row-hover: rgba(0, 240, 255, 0.08);
  --grain-op: 0.05;
}
html[data-atmo="neon"] body {
  background-image:
    radial-gradient(60% 34% at 50% 108%, rgba(255, 45, 150, 0.28), transparent 70%),
    repeating-linear-gradient(0deg, transparent 0 46px, rgba(0, 240, 255, 0.10) 46px 48px),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(255, 45, 150, 0.10) 46px 48px),
    radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(5, 0, 12, 0.6) 100%);
}
#neon-scan {
  position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0.5;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px);
}
html[data-atmo="neon"] .wordmark {
  color: #fff; text-shadow: 0 0 8px #fff, 0 0 24px #ff2d96, 0 0 60px #ff2d96;
}
html[data-atmo="neon"] .card, html[data-atmo="neon"] .tile { border-color: rgba(0, 240, 255, 0.28); }
html[data-atmo="neon"] #dust-layer i {
  background: radial-gradient(circle, rgba(0, 240, 255, 0.8), transparent 70%);
}

/* ---------- 10. Plaintext: the notepad Easter egg ----------
   Brutally stripped: monospace everything, hairline black rules, zero chrome. */
html[data-atmo="notepad"] {
  --bg: #ffffff; --bg2: #ffffff; --surface: #ffffff; --surface2: #f4f4f4;
  --ink: #111111; --muted: #333333; --faint: #777777;
  --gold: #000000; --gold-soft: #222222; --gold-deep: #000000;
  --line: #000000; --line-strong: #000000;
  --ok: #005a00; --warn: #7a5a00; --bad: #a00000;
  --shadow: none;
  --font: "Courier New", Courier, monospace;
  --mono: "Courier New", Courier, monospace;
  --serif: "Courier New", Courier, monospace;
  --radius: 0px;
  --th-bg: #eeeeee; --tabgrad1: #ffffff; --tabgrad2: #eeeeee;
  --foot-bg: #ffffff; --ph-bg: #f4f4f4; --sel-bg: #e8e8e8;
  --hold-bg: #f4f4f4;
  --drawerbar-bg: #ffffff; --cardmeta: #333333;
  --skeleton1: #eeeeee; --skeleton2: #f8f8f8;
  --toastgrad1: #ffffff; --toastgrad2: #eeeeee;
  --row-hover: #eef0ff;
  --grain-op: 0;
}
html[data-atmo="notepad"] body { background: #ffffff; }
html[data-atmo="notepad"] *, html[data-atmo="notepad"] *::before, html[data-atmo="notepad"] *::after {
  animation-duration: 0.001s !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
html[data-atmo="notepad"] .card, html[data-atmo="notepad"] .tile, html[data-atmo="notepad"] .album-card,
html[data-atmo="notepad"] .badge, html[data-atmo="notepad"] .btn, html[data-atmo="notepad"] button {
  border: 1px solid #000 !important; border-radius: 0 !important;
}
html[data-atmo="notepad"] .wordmark::after { content: "_"; animation: np-blink 1.06s steps(1) infinite !important; }
@keyframes np-blink { 50% { opacity: 0; } }
html[data-atmo="notepad"] #dust-layer, html[data-atmo="notepad"] #fire-glow,
html[data-atmo="notepad"] #ember-layer, html[data-atmo="notepad"] #rain-canvas,
html[data-atmo="notepad"] #lightning-flash, html[data-atmo="notepad"] .hero-glow,
html[data-atmo="notepad"] .sigil { display: none !important; }
#notepad-bar {
  display: flex; justify-content: space-between; align-items: center;
  font-family: "Courier New", monospace; font-size: 0.8rem; color: #111;
  background: #f0f0f0; border-bottom: 1px solid #000;
  padding: 0.3rem 0.8rem; position: sticky; top: 0; z-index: 70;
}
#notepad-bar .np-menu span { margin-right: 1rem; }
#notepad-bar .np-title { color: #555; }

/* ---------- 11. The Construct: the Matrix Easter egg ---------- */
html[data-atmo="construct"] {
  --bg: #000000; --bg2: #020503; --surface: #031007; --surface2: #062012;
  --ink: #33ff66; --muted: #1d9e4b; --faint: #0f5c2c;
  --gold: #33ff66; --gold-soft: #7dffaa; --gold-deep: #0d7a35;
  --line: rgba(51, 255, 102, 0.2); --line-strong: rgba(51, 255, 102, 0.55);
  --ok: #33ff66; --warn: #d4ff4d; --bad: #ff4d4d;
  --font: "Cascadia Code", "Consolas", "Menlo", monospace;
  --mono: "Cascadia Code", "Consolas", "Menlo", monospace;
  --serif: "Cascadia Code", "Consolas", "Menlo", monospace;
  --shadow: inset 0 1px 0 rgba(51, 255, 102, 0.08), 0 0 30px rgba(51, 255, 102, 0.1), 0 18px 55px rgba(0, 0, 0, 0.9);
  --th-bg: #031007; --tabgrad1: #062012; --tabgrad2: #010402;
  --foot-bg: rgba(0, 0, 0, 0.94); --ph-bg: #010402; --sel-bg: #072413;
  --hold-bg: linear-gradient(135deg, #062a15, #010402);
  --drawerbar-bg: rgba(3, 16, 7, 0.95); --cardmeta: #1d9e4b;
  --skeleton1: #062012; --skeleton2: #010402;
  --toastgrad1: #062012; --toastgrad2: #010402;
  --row-hover: rgba(51, 255, 102, 0.08);
  --grain-op: 0.1;
}
html[data-atmo="construct"] body {
  background-image: radial-gradient(120% 100% at 50% 50%, transparent 40%, rgba(0, 20, 8, 0.8) 100%);
  text-shadow: 0 0 6px rgba(51, 255, 102, 0.6);
}
#matrix-rain { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.55; }
#construct-term {
  position: fixed; left: 0.6rem; bottom: 0.6rem; z-index: 55;
  max-width: min(92vw, 30rem);
  font-family: "Cascadia Code", Consolas, monospace; font-size: 0.72rem; line-height: 1.5;
  color: #33ff66; background: rgba(0, 8, 3, 0.88);
  border: 1px solid rgba(51, 255, 102, 0.4); border-radius: 6px;
  padding: 0.55rem 0.7rem; pointer-events: none; white-space: pre-wrap;
  text-shadow: 0 0 6px rgba(51, 255, 102, 0.7);
}
#construct-term .cx-prompt { color: #7dffaa; }
#construct-term .cx-ok { color: #33ff66; }
#construct-term .cx-warn { color: #ffe14d; }
html[data-atmo="construct"] .wordmark { text-shadow: 0 0 12px rgba(51, 255, 102, 0.9), 0 0 44px rgba(51, 255, 102, 0.4); }
html[data-atmo="construct"] #dust-layer i {
  background: radial-gradient(circle, rgba(51, 255, 102, 0.7), transparent 70%);
}

/* ---------- 12. Xenohold: the alien module ---------- */
html[data-atmo="xeno"] {
  --bg: #060112; --bg2: #0a0220; --surface: #0d0330; --surface2: #140546;
  --ink: #d9fff4; --muted: #7fc9b8; --faint: #3f6a60;
  --gold: #4de8c2; --gold-soft: #a7f3e0; --gold-deep: #14705c;
  --line: rgba(77, 232, 194, 0.18); --line-strong: rgba(150, 120, 255, 0.5);
  --ok: #4de8c2; --warn: #ffe14d; --bad: #ff5c8a;
  --shadow: inset 0 1px 0 rgba(120, 255, 220, 0.08), 0 0 40px rgba(120, 80, 255, 0.16), 0 18px 55px rgba(0, 0, 0, 0.9);
  --th-bg: #0a0220; --tabgrad1: #140546; --tabgrad2: #060112;
  --foot-bg: rgba(6, 1, 18, 0.94); --ph-bg: #08021a; --sel-bg: #170759;
  --hold-bg: linear-gradient(135deg, #1c0a5e, #060112);
  --drawerbar-bg: rgba(13, 3, 48, 0.95); --cardmeta: #a9d8cc;
  --skeleton1: #140546; --skeleton2: #060112;
  --toastgrad1: #140546; --toastgrad2: #060112;
  --row-hover: rgba(77, 232, 194, 0.08);
  --grain-op: 0.07;
}
html[data-atmo="xeno"] body {
  background-image:
    radial-gradient(34% 26% at 18% 22%, rgba(77, 232, 194, 0.14), transparent 70%),
    radial-gradient(30% 24% at 84% 68%, rgba(150, 110, 255, 0.16), transparent 70%),
    radial-gradient(26% 22% at 62% 12%, rgba(77, 232, 194, 0.08), transparent 70%),
    radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(2, 0, 10, 0.65) 100%);
  animation: xeno-breathe 9s ease-in-out infinite;
}
@keyframes xeno-breathe {
  0%, 100% { background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%; }
  50% { background-size: 118% 118%, 112% 112%, 124% 124%, 100% 100%; }
}
html[data-atmo="xeno"] .wordmark {
  color: #eafffa;
  text-shadow: 0 0 10px rgba(77, 232, 194, 0.9), 0 0 44px rgba(150, 110, 255, 0.55);
  animation: xeno-pulse 4.5s ease-in-out infinite;
}
@keyframes xeno-pulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.35); } }
html[data-atmo="xeno"] #dust-layer i {
  background: radial-gradient(circle, rgba(120, 255, 215, 0.75), transparent 70%);
}
html[data-atmo="xeno"] .card, html[data-atmo="xeno"] .tile {
  border-radius: 22px;
  border-color: rgba(77, 232, 194, 0.3);
}

/* Easter-egg cards get a wink in the atmosphere sheet */
.atmo-card[data-atmo-val="notepad"] .atmo-card-name::after { content: " 🥚"; }
.atmo-card[data-atmo-val="construct"] .atmo-card-name::after { content: " 🥚"; }
.atmo-card[data-atmo-val="xeno"] .atmo-card-name::after { content: " 👽"; }

/* Reduced motion: kill the new full-screen fx */
@media (prefers-reduced-motion: reduce) {
  #fire-glow, #ember-layer, #kaleido-fx, #matrix-rain, #neon-scan { display: none; }
  html[data-atmo="kaleido"] .wordmark, html[data-atmo="xeno"] body,
  html[data-atmo="xeno"] .wordmark, html[data-atmo="abyss"] body { animation: none; }
}

/* tr13: swatches for the six new atmospheres */
.sw-kaleido { background: conic-gradient(from 45deg, #ff0080, #ff8c00, #ffee00, #00ff88, #00ccff, #8844ff, #ff0080); }
.sw-abyss { background: linear-gradient(180deg, #0a3a55 0%, #020a12 70%, #4fd8e8 130%); }
.sw-neon { background: linear-gradient(135deg, #0d0118 20%, #ff2d96 55%, #00f0ff 90%); }
.sw-notepad { background: #ffffff; border: 1px solid #000; }
.sw-construct { background: repeating-linear-gradient(0deg, #000 0 4px, #0a2a12 4px 6px); }
.sw-xeno { background: radial-gradient(circle at 30% 30%, #4de8c2 0%, #140546 55%, #060112 100%); }

/* tr14: soundscape button in the music widget */
.lofi-btn svg { display: block; margin: 0 auto; }
.lofi-btn[data-act="ambience"].on { color: #7db4d8; border-color: #4a7a9a; box-shadow: 0 0 10px rgba(90, 150, 190, 0.35); }

/* ================= tr17: atmosphere visual upgrade =================
   Every atmosphere gets Kaleidoscope-tier spectacle: an animated background
   treatment, a themed particle layer, a hero glow treatment, and a color
   identity that doesn't collide with the others. Odyssey is reimagined from
   scratch as a night voyage toward dawn (it no longer shares Conservator's
   archival-paper look). All motion is transform/opacity/background-position
   only, and every new animation stands down under prefers-reduced-motion. */

/* ---------- 1. After Hours: moonbeams drift through the dark gallery ---------- */
html[data-atmo="afterhours"] body::before {
  background-image:
    radial-gradient(45% 30% at 18% 10%, rgba(150, 190, 255, 0.10), transparent 70%),
    linear-gradient(180deg, rgba(130, 170, 235, 0.07), transparent 32%),
    radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(2, 4, 9, 0.6) 100%);
  animation: ah-moonbeam 34s ease-in-out infinite alternate;
}
@keyframes ah-moonbeam {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(2.5vw, 1.5vh, 0); }
}
html[data-atmo="afterhours"] .hero-glow {
  background: radial-gradient(ellipse 50% 55% at 50% 45%, rgba(150, 190, 255, 0.13), transparent 70%);
  animation: ah-breathe 12s ease-in-out infinite;
}
@keyframes ah-breathe { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
html[data-atmo="afterhours"] .wordmark { animation: ah-shimmer 9s ease-in-out infinite; }
@keyframes ah-shimmer {
  0%, 100% { text-shadow: 0 0 18px rgba(160, 200, 255, 0.22); }
  50% { text-shadow: 0 0 36px rgba(170, 210, 255, 0.5); }
}
html[data-atmo="afterhours"] #dust-layer i {
  background: radial-gradient(circle, rgba(205, 225, 255, 0.8), transparent 70%);
}

/* ---------- 2. Conservator: the desk by a window, sunbeam traveling ---------- */
html[data-atmo="conservator"] body {
  background-image:
    linear-gradient(115deg, transparent 40%, rgba(255, 236, 178, 0.22) 50%, transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(122, 46, 46, 0.045) 27px 28px);
  background-size: 280% 100%, auto;
  animation: cons-sunbeam 44s ease-in-out infinite alternate;
}
@keyframes cons-sunbeam {
  from { background-position: 115% 0, 0 0; }
  to { background-position: -15% 0, 0 0; }
}
html[data-atmo="conservator"] .hero-glow {
  background: radial-gradient(ellipse 50% 55% at 50% 45%, rgba(190, 140, 60, 0.15), transparent 70%);
  animation: cons-lamp 16s ease-in-out infinite;
}
@keyframes cons-lamp {
  0%, 100% { opacity: 0.7; transform: translateX(-52%); }
  50% { opacity: 1; transform: translateX(-48%); }
}
html[data-atmo="conservator"] .wordmark { animation: cons-ink 20s ease-in-out infinite; }
@keyframes cons-ink {
  0%, 100% { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); }
  50% { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 26px rgba(190, 140, 60, 0.35); }
}

/* ---------- 3. Colossus: the furnace breathes ---------- */
html[data-atmo="colossus"] body {
  background-image:
    radial-gradient(100% 55% at 50% 118%, rgba(255, 122, 26, 0.16), transparent 62%),
    radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(8, 4, 1, 0.55) 100%);
  animation: col-furnace 7s ease-in-out infinite alternate;
}
@keyframes col-furnace {
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 -5vh, 0 0; }
}
html[data-atmo="colossus"] .hero-glow {
  background: radial-gradient(ellipse 50% 55% at 50% 45%, rgba(255, 150, 50, 0.17), transparent 70%);
  animation: col-stoke 4.2s ease-in-out infinite;
}
@keyframes col-stoke {
  0%, 100% { opacity: 0.72; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.06); }
}
html[data-atmo="colossus"] .wordmark { animation: col-heat 7s ease-in-out infinite; }
@keyframes col-heat {
  0%, 100% { text-shadow: 0 0 34px rgba(255, 150, 50, 0.45); }
  50% { text-shadow: 0 0 54px rgba(255, 170, 60, 0.75), 0 0 14px rgba(255, 200, 120, 0.5); }
}
html[data-atmo="colossus"] #dust-layer i {
  background: radial-gradient(circle, rgba(255, 150, 60, 0.85), transparent 70%);
}

/* ---------- 4. Nocturne: a stage spotlight sweeps the cellar ---------- */
html[data-atmo="nocturne"] .hero::before {
  content: ""; position: absolute; inset: -2rem -10vw; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(207, 169, 95, 0.10) 47%, rgba(160, 190, 255, 0.09) 53%, transparent 70%);
  background-size: 300% 100%;
  animation: noc-spot 16s ease-in-out infinite;
}
@keyframes noc-spot { 0% { background-position: 120% 0; } 55%, 100% { background-position: -20% 0; } }
html[data-atmo="nocturne"] .wordmark { animation: noc-glow 11s ease-in-out infinite; }
@keyframes noc-glow {
  0%, 100% { text-shadow: 0 2px 30px rgba(140, 160, 210, 0.35); }
  50% { text-shadow: 0 2px 46px rgba(207, 169, 95, 0.55); }
}
html[data-atmo="nocturne"] #dust-layer i {
  background: radial-gradient(circle, rgba(232, 200, 130, 0.7), transparent 70%);
}
html[data-atmo="nocturne"] .hero-glow {
  background: radial-gradient(ellipse 50% 55% at 50% 45%, rgba(140, 160, 220, 0.12), transparent 70%);
  animation: noc-haze 14s ease-in-out infinite;
}
@keyframes noc-haze { 0%, 100% { opacity: 0.65; } 50% { opacity: 1; } }

/* ---------- 5. Odyssey REIMAGINED: a night voyage toward dawn ----------
   Deep-sea dark, amber horizon, parallax clouds, a slowly turning compass
   rose behind the hero. Nothing of the old chart-table parchment remains. */
html[data-atmo="odyssey"] {
  --bg: #04121a; --bg2: #071a24; --surface: #0a2230; --surface2: #0f2c3d;
  --ink: #f2e8d5; --muted: #9db3b8; --faint: #57707a;
  --gold: #ffb347; --gold-soft: #ffd9a0; --gold-deep: #8a5a1e;
  --line: rgba(255, 179, 71, 0.18); --line-strong: rgba(255, 179, 71, 0.45);
  --ok: #7fd6a0; --warn: #ffb347; --bad: #ff7a6b;
  --shadow: inset 0 1px 0 rgba(255, 200, 120, 0.08), 0 18px 55px rgba(0, 8, 14, 0.85);
  --th-bg: #081820; --tabgrad1: #0f2c3d; --tabgrad2: #04121a;
  --foot-bg: rgba(4, 18, 26, 0.94); --ph-bg: #050f16; --sel-bg: #0d2431;
  --hold-bg: linear-gradient(135deg, #123242, #04121a);
  --drawerbar-bg: rgba(10, 34, 48, 0.95); --cardmeta: #c8d8d4;
  --skeleton1: #0f2c3d; --skeleton2: #050f16;
  --toastgrad1: #0f2c3d; --toastgrad2: #071a24;
  --row-hover: rgba(255, 179, 71, 0.08);
  --grain-op: 0.06;
  --wing-dur: 0.45s; --wing-rise: 14px;
}
html[data-atmo="odyssey"] body {
  background-image:
    radial-gradient(90% 26% at 50% 112%, rgba(255, 150, 60, 0.30), transparent 70%),
    radial-gradient(35% 14% at 12% 78%, rgba(140, 200, 220, 0.10), transparent 70%),
    radial-gradient(30% 12% at 78% 70%, rgba(140, 200, 220, 0.08), transparent 70%),
    radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(1, 6, 10, 0.6) 100%);
  animation: ody-voyage 30s ease-in-out infinite alternate, ody-dawn 12s ease-in-out infinite;
}
@keyframes ody-voyage {
  from { background-position: 0 0, 0 0, 0 0, 0 0; }
  to { background-position: 0 0, -14vw 2vh, 18vw -2vh, 0 0; }
}
@keyframes ody-dawn {
  0%, 100% { background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%; }
  50% { background-size: 114% 114%, 100% 100%, 100% 100%, 100% 100%; }
}
#odyssey-compass {
  position: fixed; top: 6vh; left: 50%; transform: translateX(-50%);
  width: min(74vmin, 500px); height: min(74vmin, 500px);
  z-index: -1; pointer-events: none; border-radius: 50%; opacity: 0.55;
  background:
    radial-gradient(circle, transparent 60%, rgba(255, 179, 71, 0.22) 61%, transparent 64%),
    repeating-conic-gradient(from 0deg, rgba(255, 179, 71, 0.32) 0deg 1deg, transparent 1deg 15deg),
    conic-gradient(from -45deg, transparent 0deg, rgba(255, 179, 71, 0.14) 10deg, transparent 20deg, transparent 160deg, rgba(255, 179, 71, 0.14) 170deg, transparent 180deg, transparent 340deg, rgba(255, 179, 71, 0.14) 350deg, transparent 360deg);
  -webkit-mask: radial-gradient(circle, transparent 32%, #000 33%, #000 100%);
  mask: radial-gradient(circle, transparent 32%, #000 33%, #000 100%);
  animation: ody-compass 140s linear infinite;
}
@keyframes ody-compass { to { transform: translateX(-50%) rotate(360deg); } }
html[data-atmo="odyssey"] .hero-glow {
  background: radial-gradient(ellipse 50% 55% at 50% 45%, rgba(255, 170, 80, 0.20), transparent 70%);
  animation: ody-sunbreathe 10s ease-in-out infinite;
}
@keyframes ody-sunbreathe {
  0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.08); }
}
html[data-atmo="odyssey"] .wordmark {
  color: #ffe9c9; text-shadow: 0 0 30px rgba(255, 170, 80, 0.45);
}
html[data-atmo="odyssey"] #dust-layer i {
  background: radial-gradient(circle, rgba(255, 200, 130, 0.75), transparent 70%);
}
html[data-atmo="odyssey"] .exhibit-bg {
  background:
    radial-gradient(60% 90% at 50% 10%, rgba(255, 179, 71, 0.14), transparent 70%),
    radial-gradient(40% 60% at 80% 90%, rgba(60, 140, 170, 0.16), transparent 70%);
  animation: kenburns 22s ease-in-out infinite alternate;
}
html[data-atmo="odyssey"] .exhibit-lamp { background: #ffcf7a; box-shadow: 0 0 12px #ffcf7a; }
/* retire the old chart-table chrome */
html[data-atmo="odyssey"] .card, html[data-atmo="odyssey"] .tile,
html[data-atmo="odyssey"] .wing-card, html[data-atmo="odyssey"] .note-card,
html[data-atmo="odyssey"] .album-card, html[data-atmo="odyssey"] .latest-card { border-style: solid; }
html[data-atmo="odyssey"] .sec-head { border-bottom: 2px solid var(--line-strong); }
html[data-atmo="odyssey"] .filter-ag.active { background: #7a4d16; border-color: #ffb347; color: #ffe9c9; }
.sw-odyssey { background: radial-gradient(circle at 50% 115%, #ffb347 0%, #0a2230 62%, #04121a 100%); }

/* ---------- 6. The Cursed Wing: the room has a heartbeat ---------- */
html[data-atmo="cursedwing"] body {
  background-image:
    radial-gradient(90% 40% at 50% 115%, rgba(212, 47, 47, 0.13), transparent 70%),
    radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
  animation: cursed-heart 3.6s ease-in-out infinite;
}
@keyframes cursed-heart {
  0%, 100% { background-size: 100% 100%, 100% 100%; }
  12% { background-size: 113% 113%, 100% 100%; }
  24% { background-size: 100% 100%, 100% 100%; }
  36% { background-size: 108% 108%, 100% 100%; }
  52% { background-size: 100% 100%, 100% 100%; }
}
html[data-atmo="cursedwing"] .hero::before {
  content: ""; position: absolute; inset: -3rem -20vw; pointer-events: none;
  background:
    radial-gradient(40% 60% at 30% 50%, rgba(120, 10, 10, 0.25), transparent 70%),
    radial-gradient(40% 60% at 70% 40%, rgba(120, 10, 10, 0.20), transparent 70%);
  background-size: 200% 100%;
  animation: cursed-mist 21s ease-in-out infinite alternate;
}
@keyframes cursed-mist { from { background-position: 0 0, 0 0; } to { background-position: -30% 0, 30% 0; } }

/* ---------- 7. Kaleidoscope: the storm gains a counter-rotating heart ---------- */
#kaleido-fx::after {
  content: ""; position: absolute; inset: 14%; border-radius: 50%;
  background: conic-gradient(from 180deg, #00ccff, #8844ff, #ff0080, #ffee00, #00ff88, #00ccff);
  filter: blur(70px) saturate(1.6);
  opacity: 0.55; mix-blend-mode: screen;
  animation: kaleido-spin-rev 26s linear infinite;
}
@keyframes kaleido-spin-rev { to { transform: rotate(-360deg); } }
html[data-atmo="kaleido"] .hero-glow {
  background: radial-gradient(ellipse 50% 55% at 50% 45%, rgba(255, 77, 210, 0.16), transparent 70%);
  animation: kaleido-breathe 8s ease-in-out infinite;
}
@keyframes kaleido-breathe { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }

/* ---------- 8. Sunken Treasury: sonar pings and bubble-motes ---------- */
html[data-atmo="abyss"] body {
  animation: abyss-sea 26s ease-in-out infinite alternate;
}
@keyframes abyss-sea {
  from { background-position: 0 0, 0 0, 0 0; }
  to { background-position: 3vw -5vh, -3vw -4vh, 0 0; }
}
html[data-atmo="abyss"] .hero::before {
  content: ""; position: absolute; left: 50%; top: 42%; width: 12rem; height: 12rem;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(120, 220, 245, 0.5); border-radius: 50%;
  pointer-events: none;
  animation: abyss-ping 7s ease-out infinite;
}
@keyframes abyss-ping {
  0% { transform: translate(-50%, -50%) scale(0.2); opacity: 0.85; }
  70% { opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(3.4); opacity: 0; }
}
html[data-atmo="abyss"] #dust-layer i {
  background: radial-gradient(circle, rgba(140, 230, 245, 0.75), transparent 70%);
  box-shadow: 0 0 0 1px rgba(140, 230, 245, 0.35), inset 0 0 2px rgba(255, 255, 255, 0.5);
}
html[data-atmo="abyss"] .hero-glow {
  background: radial-gradient(ellipse 50% 55% at 50% 45%, rgba(79, 216, 232, 0.14), transparent 70%);
  animation: abyss-glow 10s ease-in-out infinite;
}
@keyframes abyss-glow { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }

/* ---------- 9. Neon Vault: the grid drives forward under a striped sun ---------- */
#neon-sun {
  position: fixed; left: 50%; top: 5vh; transform: translateX(-50%);
  width: min(56vmin, 360px); height: min(56vmin, 360px); border-radius: 50%;
  z-index: -1; pointer-events: none; opacity: 0.9;
  background: linear-gradient(180deg, #ffd24d 0%, #ff9a3d 30%, #ff2d96 62%, #7a1aff 100%);
  -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 16px, transparent 16px 21px);
  mask-image: repeating-linear-gradient(180deg, #000 0 16px, transparent 16px 21px);
  box-shadow: 0 0 90px rgba(255, 45, 150, 0.5);
  animation: neon-sunfloat 9s ease-in-out infinite;
}
@keyframes neon-sunfloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-1.6vh); }
}
html[data-atmo="neon"] body { animation: neon-drive 3.4s linear infinite; }
@keyframes neon-drive {
  from { background-position: 0 0, 0 0, 0 0, 0 0; }
  to { background-position: 0 0, 0 48px, 0 0, 0 0; }
}
html[data-atmo="neon"] .wordmark { animation: neon-flicker 7s linear infinite; }
@keyframes neon-flicker {
  0%, 100% { opacity: 1; }
  6.5% { opacity: 1; } 7% { opacity: 0.55; } 7.5% { opacity: 1; }
  53% { opacity: 1; } 53.5% { opacity: 0.7; } 54% { opacity: 1; }
}
html[data-atmo="neon"] .hero-glow {
  background: radial-gradient(ellipse 50% 55% at 50% 45%, rgba(255, 45, 150, 0.16), transparent 70%);
  animation: neon-breathe 6s ease-in-out infinite;
}
@keyframes neon-breathe { 0%, 100% { opacity: 0.65; } 50% { opacity: 1; } }

/* ---------- 10. Plaintext: the joke gets its status bar ---------- */
#notepad-status {
  position: fixed; left: 0; right: 0;
  bottom: calc(var(--nav-h, 66px) + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  display: flex; justify-content: flex-end; gap: 1.2rem;
  font-family: "Courier New", Courier, monospace; font-size: 0.72rem; color: #111;
  background: #f0f0f0; border-top: 1px solid #000; border-radius: 0;
  padding: 0.28rem 0.9rem; pointer-events: none;
}
#notepad-status span:first-child { margin-right: auto; }
html[data-atmo="notepad"] .hero-grand { letter-spacing: -0.02em; }
html[data-atmo="notepad"] .sigil { display: none !important; }

/* ---------- 11. The Construct: scan sweeps and a breathing CRT ---------- */
html[data-atmo="construct"] .hero::before {
  content: ""; position: absolute; left: -10vw; right: -10vw; top: -30%; height: 34%;
  background: linear-gradient(180deg, transparent, rgba(51, 255, 102, 0.10), transparent);
  pointer-events: none;
  animation: cx-scan 9s linear infinite;
}
@keyframes cx-scan { 0% { top: -30%; } 100% { top: 112%; } }
html[data-atmo="construct"] body { animation: cx-vignette 8s ease-in-out infinite; }
@keyframes cx-vignette {
  0%, 100% { background-size: 100% 100%; }
  50% { background-size: 109% 109%; }
}
html[data-atmo="construct"] .wordmark { animation: cx-glow 5s ease-in-out infinite; }
@keyframes cx-glow {
  0%, 100% { text-shadow: 0 0 12px rgba(51, 255, 102, 0.9), 0 0 44px rgba(51, 255, 102, 0.4); }
  50% { text-shadow: 0 0 20px rgba(51, 255, 102, 1), 0 0 74px rgba(51, 255, 102, 0.65); }
}

/* ---------- 12. Xenohold: the glyph ring turns, the beam takes you ---------- */
#xeno-ring {
  position: fixed; top: 3vh; left: 50%; transform: translateX(-50%);
  width: min(82vmin, 540px); height: min(82vmin, 540px);
  z-index: -1; pointer-events: none; border-radius: 50%; opacity: 0.85;
  background:
    radial-gradient(circle, transparent 62%, rgba(77, 232, 194, 0.12) 63%, transparent 67%),
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(150, 120, 255, 0.42) 0deg 2deg, transparent 2deg 12deg);
  -webkit-mask: radial-gradient(circle, transparent 54%, #000 55%, #000 80%, transparent 81%);
  mask: radial-gradient(circle, transparent 54%, #000 55%, #000 80%, transparent 81%);
  animation: xeno-spin 90s linear infinite;
}
#xeno-ring::after {
  content: ""; position: absolute; inset: -6%; border-radius: 50%;
  border: 1px dashed rgba(77, 232, 194, 0.4);
  animation: xeno-spin-rev 60s linear infinite;
}
@keyframes xeno-spin { to { transform: translateX(-50%) rotate(360deg); } }
@keyframes xeno-spin-rev { to { transform: rotate(-360deg); } }
html[data-atmo="xeno"] .hero::before {
  content: ""; position: absolute; top: -10%; bottom: -10%; left: 50%; width: 12rem;
  transform: translateX(-50%) scaleX(0.4);
  background: linear-gradient(90deg, transparent, rgba(150, 220, 255, 0.12), transparent);
  pointer-events: none; opacity: 0;
  animation: xeno-beam 18s ease-in-out infinite;
}
@keyframes xeno-beam {
  0%, 88%, 100% { opacity: 0; transform: translateX(-50%) scaleX(0.4); }
  92% { opacity: 1; transform: translateX(-50%) scaleX(1); }
  96% { opacity: 0; transform: translateX(-50%) scaleX(1.7); }
}
html[data-atmo="xeno"] #dust-layer i:nth-child(odd) {
  background: radial-gradient(circle, rgba(170, 130, 255, 0.7), transparent 70%);
}
html[data-atmo="xeno"] body { animation: xeno-breathe 9s ease-in-out infinite, xeno-drift 40s linear infinite; }
@keyframes xeno-drift {
  from { background-position: 0 0, 0 0, 0 0, 0 0; }
  to { background-position: 10vw 4vh, -8vw -3vh, 6vw 8vh, 0 0; }
}

/* ---------- tr17 reduced motion: every new movement stands down ---------- */
@media (prefers-reduced-motion: reduce) {
  #odyssey-compass, #neon-sun, #xeno-ring { display: none; }
  #kaleido-fx::after { display: none; }
  html[data-atmo="afterhours"] body, html[data-atmo="afterhours"] .hero-glow,
  html[data-atmo="afterhours"] .wordmark,
  html[data-atmo="conservator"] body, html[data-atmo="conservator"] .hero-glow,
  html[data-atmo="conservator"] .wordmark,
  html[data-atmo="colossus"] body, html[data-atmo="colossus"] .hero-glow,
  html[data-atmo="colossus"] .wordmark,
  html[data-atmo="nocturne"] .hero::before, html[data-atmo="nocturne"] .wordmark,
  html[data-atmo="nocturne"] .hero-glow,
  html[data-atmo="odyssey"] body, html[data-atmo="odyssey"] .hero-glow,
  html[data-atmo="cursedwing"] body, html[data-atmo="cursedwing"] .hero::before,
  html[data-atmo="kaleido"] .hero-glow,
  html[data-atmo="abyss"] body, html[data-atmo="abyss"] .hero::before,
  html[data-atmo="abyss"] .hero-glow,
  html[data-atmo="neon"] body, html[data-atmo="neon"] .wordmark,
  html[data-atmo="neon"] .hero-glow,
  html[data-atmo="construct"] .hero::before, html[data-atmo="construct"] body,
  html[data-atmo="construct"] .wordmark,
  html[data-atmo="xeno"] body, html[data-atmo="xeno"] .hero::before { animation: none; }
}


/* ============================================================
   tr22 ? 10/10 NUMISMATIC LUXURY UPGRADE
   - Interactive Vault Valuation & Live Melt Allocation Hub
   - Exhibition Pedestal with 3D Procedural Coin Medallions
   - Archival 2x2 Cardboard Flip Holders with Mylar Aperture & Sheen
   - Precision Numismatic Caliper Gauge in Dossier
   - Dynamic Silver Melt vs Collector Premium Multiplier
   - Staggered Wing Cascades & Glassmorphic Navigation
   ============================================================ */

/* ---------- 1. Vault Valuation Hub & Live Melt Allocation Bar ---------- */
.vault-valuation-hub {
  position: relative;
  margin: 1.2rem auto 1.6rem;
  max-width: 720px;
  padding: 1.4rem 1.6rem;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(22, 19, 16, 0.8) 0%, rgba(14, 13, 10, 0.95) 100%);
  border: 1px solid var(--line-strong);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(16px);
}
html[data-atmo="conservator"] .vault-valuation-hub {
  background: linear-gradient(180deg, #fffdf8 0%, #f5efe2 100%);
  border-color: rgba(138, 90, 30, 0.25);
  box-shadow: 0 10px 30px rgba(60, 45, 20, 0.08), inset 0 1px 0 #fff;
}
.hero-grand {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2.8rem, 8vw, 4.4rem);
  letter-spacing: -0.02em;
  line-height: 1;
  background: linear-gradient(135deg, #fff8e7 20%, var(--gold-soft) 60%, var(--gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 4px 30px rgba(200, 169, 74, 0.25);
  margin-bottom: 0.3rem;
}
html[data-atmo="conservator"] .hero-grand {
  background: linear-gradient(135deg, #221c12 20%, #7a2e2e 70%, #8a5a1e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}
.hero-cap {
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 1.2rem;
}

/* Tri-tone Metallic Allocation Bar */
.melt-allocation-bar {
  display: flex;
  height: 22px;
  width: 100%;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.08);
  border: 1px solid rgba(0,0,0,0.4);
  position: relative;
  background: #080807;
  margin-bottom: 0.9rem;
}
.melt-seg {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: flex-grow 0.6s var(--ease-out), filter 0.25s, transform 0.2s;
  overflow: hidden;
  white-space: nowrap;
}
.melt-seg:hover {
  filter: brightness(1.18);
  z-index: 2;
}
.seg-ag {
  background: linear-gradient(135deg, #f0f4f8 0%, #b8c8d8 50%, #8ca0b4 100%);
  color: #1a2530;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -1px 0 rgba(0,0,0,0.2);
}
.seg-au {
  background: linear-gradient(135deg, #ffe57f 0%, #ffc107 50%, #ff8f00 100%);
  color: #3e2723;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -1px 0 rgba(0,0,0,0.2);
}
.seg-numis {
  background: linear-gradient(135deg, #c5cae9 0%, #7986cb 50%, #3f51b5 100%);
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(0,0,0,0.3);
}
.seg-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: barGlint 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes barGlint {
  0%, 70% { transform: translateX(-100%); }
  85%, 100% { transform: translateX(100%); }
}

.melt-legend {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--muted);
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.legend-item strong { color: var(--ink); font-weight: 600; }
.legend-item .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 8px currentColor;
}
.leg-ag .dot { background: #b8c8d8; color: #b8c8d8; }
.leg-au .dot { background: #ffc107; color: #ffc107; }
.leg-numis .dot { background: #7986cb; color: #7986cb; }

/* ---------- 2. Exhibition Pedestal Showcase ---------- */
.exhibit {
  position: relative;
  margin: 1.6rem 0 0.8rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(180deg, #14120e 0%, #0a0907 100%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  cursor: pointer;
  width: 100%;
  color: var(--ink);
  padding: 0;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s;
}
.exhibit:hover {
  transform: translateY(-3px);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.9), 0 0 30px rgba(200, 169, 74, 0.15);
  border-color: var(--gold);
}
.exhibit-frame {
  position: relative;
  min-height: 540px;
}
.exhibit-slide {
  position: absolute;
  inset: 0;
  padding: 1.2rem 3rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 3.5rem;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.97) translateY(8px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out), visibility 0.6s;
  pointer-events: none;
}
.exhibit-slide.on {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

/* Explicit Luxury Prev / Next Arrow Controls */
.ex-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(14, 16, 22, 0.90);
  border: 1px solid var(--line-strong);
  color: var(--gold-soft);
  font-size: 1.8rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 15;
  transition: all 0.25s var(--ease-out);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
.ex-nav-btn:hover {
  background: var(--gold);
  color: #08090c;
  border-color: var(--gold);
  box-shadow: 0 0 24px rgba(200, 169, 74, 0.45);
  transform: translateY(-50%) scale(1.08);
}
.ex-nav-btn.ex-prev { left: 16px; }
.ex-nav-btn.ex-next { right: 16px; }

@media (max-width: 860px) {
  .exhibit-frame {
    min-height: 720px;
  }
  .exhibit-slide {
    flex-direction: column;
    justify-content: flex-start;
    gap: 1.25rem;
    padding: 1rem 0.75rem 1.4rem;
  }
  .ex-pedestal-tray {
    width: auto;
    padding: 0.25rem;
  }
  .ex-tray-velvet {
    padding: 0.75rem;
  }
  .ex-info-placard {
    width: 100%;
    max-width: 440px;
    padding: 1rem 1.1rem;
  }
  .ex-nav-btn {
    top: 165px;
    width: 36px;
    height: 36px;
    font-size: 1.4rem;
  }
  .ex-nav-btn.ex-prev { left: 6px; }
  .ex-nav-btn.ex-next { right: 6px; }
}

/* Masterpiece Coin Medallion */
.ex-pedestal {
  flex-shrink: 0;
  width: 170px;
  height: 170px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ex-medallion {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 
    0 12px 30px rgba(0,0,0,0.8),
    inset 0 2px 4px rgba(255,255,255,0.7),
    inset 0 -3px 6px rgba(0,0,0,0.6),
    0 0 0 3px #1a1712,
    0 0 0 5px var(--gold-deep);
  background: radial-gradient(circle at 35% 30%, #f0f4f8 0%, #c0d0e0 45%, #7a8c9e 85%, #566472 100%);
  color: #1a222a;
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.exhibit:hover .ex-medallion {
  transform: scale(1.05) rotate(2deg);
}
.ex-medallion.is-gold {
  background: radial-gradient(circle at 35% 30%, #fff8e1 0%, #ffd54f 40%, #ff8f00 80%, #b26a00 100%);
  box-shadow: 
    0 12px 30px rgba(0,0,0,0.8),
    inset 0 2px 4px rgba(255,255,255,0.8),
    inset 0 -3px 6px rgba(0,0,0,0.6),
    0 0 0 3px #1a1712,
    0 0 0 5px #e6a100;
  color: #3e2723;
}
/* Coin Milling & Embossing */
.med-ring {
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  border: 2px dashed rgba(0,0,0,0.35);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
  pointer-events: none;
}
.med-iso {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 1;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 1px rgba(255,255,255,0.8), 0 -1px 1px rgba(0,0,0,0.4);
}
.med-year {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  margin-top: 0.2rem;
  text-shadow: 0 1px 0 rgba(255,255,255,0.7);
}
.med-denom {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.med-shimmer {
  position: absolute;
  inset: -100%;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.55) 50%, transparent 60%);
  animation: coinShimmer 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes coinShimmer {
  0%, 75% { transform: translate(-30%, -30%) rotate(0deg); }
  90%, 100% { transform: translate(30%, 30%) rotate(0deg); }
}

.ex-info {
  flex: 1;
  text-align: left;
}
.ex-ser-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--surface2);
  border: 1px solid var(--line);
  color: var(--gold-soft);
  margin-bottom: 0.4rem;
}
.ex-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.1;
  color: var(--ink);
  margin: 0.2rem 0 0.4rem;
}
.ex-desc {
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.45;
  margin-bottom: 0.8rem;
}
.ex-val-tag {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  font-family: var(--serif);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--gold);
}
.ex-val-tag small {
  font-family: var(--font);
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 400;
}

/* ---------- 3. Archival 2x2 Mounts & Slabs in Gallery Grid ---------- */
.piece-card {
  position: relative;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  transform-style: preserve-3d;
  transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1), filter 0.25s ease;
  width: 100%;
}

.piece-card:hover {
  filter: brightness(1.06);
}

.piece-card .slab-coin-aperture svg,
.piece-card .slab-coin-aperture img {
  filter: drop-shadow(calc(var(--relief-x, 0) * 1px) calc(var(--relief-y, 0) * 1px) 2px rgba(255, 255, 255, 0.35))
          drop-shadow(calc(var(--relief-x, 0) * -1.5px) calc(var(--relief-y, 0) * -1.5px) 4px rgba(0, 0, 0, 0.7));
  will-change: filter;
}

/* =========================================================================
   10/10 ARCHIVAL NUMISMATIC FLIP & SPECIMEN BLUEPRINT STYLES
   Authentic 2x2 White Cardboard Flip with Galvanized Staples & Mylar Window
   ========================================================================= */

.pc-flip-frame {
  width: 100%;
  padding: 0.65rem 0.65rem 0.35rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Upgraded 2×2 Aero Frosted Acrylic Mount (Uniform High-Detail Aero 3D Presentation) */
.archival-flip-holder {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 240px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(26, 35, 52, 0.94) 0%, rgba(12, 17, 26, 0.98) 100%);
  box-shadow: 
    inset 0 1.5px 1.5px rgba(255, 255, 255, 0.75), 
    inset 0 -1.5px 3px rgba(0, 0, 0, 0.85), 
    inset 0 0 20px rgba(255, 255, 255, 0.08),
    0 16px 40px rgba(0, 0, 0, 0.8), 
    0 0 0 1px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  user-select: none;
  contain: content;
  box-sizing: border-box;
}

.archival-flip-holder.flip-large {
  max-width: 280px;
  width: 280px;
  height: 280px;
  margin: 0 auto;
}

@media (max-width: 640px) {
  .archival-flip-holder.flip-large {
    width: min(230px, 84vw);
    height: min(230px, 84vw);
  }
}

/* Header & Footer Archival Annotation Strips on 2x2 Mount */
.flip-aero-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 14px 2px;
  z-index: 3;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  color: #e2e8f0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(10, 14, 24, 0.5);
}

.flip-aero-country {
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 48%;
}

.flip-aero-year {
  color: var(--gold-soft);
  font-weight: 700;
}

.flip-aero-ser {
  color: #94a3b8;
  font-size: 0.54rem;
}

.flip-aero-footer {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 14px 6px;
  z-index: 3;
  font-family: var(--mono);
  font-size: 0.60rem;
  color: #cbd5e1;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(10, 14, 24, 0.5);
}

.flip-aero-denom {
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 58%;
}

.flip-aero-purity {
  color: #93c5fd;
  font-weight: 600;
}

/* 2x2 Frosted Silicone Core Gasket */
.flip-gasket-core {
  position: relative;
  flex: 1;
  margin: 6px 8px;
  border-radius: 8px;
  background: 
    radial-gradient(ellipse at 50% 50%, rgba(30, 42, 62, 0.94) 0%, rgba(10, 14, 24, 0.98) 100%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0, rgba(255, 255, 255, 0.02) 1px, transparent 2.5px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 
    inset 0 3px 12px rgba(0, 0, 0, 0.9),
    inset 0 0 0 1px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Recessed Coin Aperture in 2x2 Mount */
.flip-coin-aperture {
  position: relative;
  width: 154px;
  height: 154px;
  border-radius: 50%;
  box-shadow: 
    inset 0 4px 16px rgba(0, 0, 0, 0.98), 
    inset 0 -2px 4px rgba(255, 255, 255, 0.35), 
    0 0 0 2px rgba(255, 255, 255, 0.08), 
    0 0 0 4px rgba(0, 0, 0, 0.75);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #020408;
}

.archival-flip-holder.flip-large .flip-coin-aperture {
  width: 196px;
  height: 196px;
}

.flip-coin-aperture img,
.flip-coin-aperture .pc-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* Edge tabs holding coin in 2x2 silicone mount */
.slab-edge-tab {
  position: absolute;
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
  z-index: 4;
  border-radius: 1px;
}
.slab-edge-tab.tab-n { top: calc(50% - 79px); left: calc(50% - 3px); width: 6px; height: 4px; }
.slab-edge-tab.tab-s { bottom: calc(50% - 79px); left: calc(50% - 3px); width: 6px; height: 4px; }
.slab-edge-tab.tab-w { left: calc(50% - 79px); top: calc(50% - 3px); width: 4px; height: 6px; }
.slab-edge-tab.tab-e { right: calc(50% - 79px); top: calc(50% - 3px); width: 4px; height: 6px; }

.archival-flip-holder.flip-large .slab-edge-tab.tab-n { top: calc(50% - 100px); }
.archival-flip-holder.flip-large .slab-edge-tab.tab-s { bottom: calc(50% - 100px); }
.archival-flip-holder.flip-large .slab-edge-tab.tab-w { left: calc(50% - 100px); }
.archival-flip-holder.flip-large .slab-edge-tab.tab-e { right: calc(50% - 100px); }

/* Holographic Seal on Reverse */
.flip-holo-seal {
  position: absolute;
  bottom: 24px;
  left: 12px;
  right: 12px;
  height: 20px;
  border-radius: 4px;
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.75), rgba(56, 189, 248, 0.75), rgba(234, 179, 8, 0.75), rgba(168, 85, 247, 0.75));
  background-size: 300% 300%;
  animation: holo-shimmer 4s ease infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  z-index: 5;
}
.flip-holo-text {
  font-family: var(--mono);
  font-size: 0.50rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
@keyframes holo-shimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Backward compatibility for mylar window references */
.flip-mylar-window {
  width: 68%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #090a0d;
  box-shadow: 
    inset 0 3px 8px rgba(0, 0, 0, 0.85),
    inset 0 0 0 2px rgba(40, 32, 24, 0.4),
    0 1px 0 rgba(255, 255, 255, 0.6);
  z-index: 1;
}

.flip-mylar-window img,
.flip-mylar-window .pc-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.flip-mylar-reflection {
  position: absolute;
  inset: -60%;
  background: linear-gradient(130deg, transparent 40%, rgba(255,255,255,0.28) 48%, rgba(255,255,255,0.06) 54%, transparent 62%);
  transform: translateX(-100%);
  transition: transform 0.55s var(--ease-out);
  pointer-events: none;
  z-index: 4;
}
.piece-card:hover .flip-mylar-reflection,
.ex-pedestal-tray:hover .flip-mylar-reflection {
  transform: translateX(100%);
}

/* Prominent 3D Spatial Museum Table Gallery Entrance Banner */
.gallery-spatial-banner {
  position: relative;
  width: 100%;
  max-width: 1150px;
  margin: 0 auto 1.25rem;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(22, 28, 42, 0.94) 0%, rgba(12, 16, 26, 0.98) 100%);
  border: 1px solid rgba(200, 169, 74, 0.38);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.65), inset 0 1px 1px rgba(255, 255, 255, 0.2), 0 0 24px rgba(200, 169, 74, 0.15);
  overflow: hidden;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.gallery-spatial-banner::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), #fef08a, var(--gold), transparent);
}
.gsb-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.4rem;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.gsb-left {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1 1 320px;
}
.gsb-icon-wrap {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(200, 169, 74, 0.15);
  border: 1px solid rgba(200, 169, 74, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  flex-shrink: 0;
  box-shadow: 0 0 16px rgba(200, 169, 74, 0.2);
}
.gsb-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.gsb-kicker {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold-soft);
}
.gsb-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}
.gsb-sub {
  margin: 0;
  font-size: 0.8rem;
  color: #94a3b8;
  line-height: 1.4;
}
.gsb-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1.25rem;
  border-radius: 10px;
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(217, 119, 6, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: all 0.2s ease;
  white-space: nowrap;
}
.gsb-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(217, 119, 6, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}
.gsb-badge {
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.35);
  color: #fef08a;
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 800;
}

/* Museum Specimen Minted Planchet Placeholder Inside Mylar Window */
.specimen-blueprint,
.specimen-medallion {
  width: 100%;
  height: 100%;
  display: block;
  user-select: none;
  overflow: hidden;
}
.specimen-medallion text {
  user-select: none;
}
.coin-legend-top {
  font-family: var(--serif);
  font-size: 4.2px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.coin-legend-bot {
  font-family: var(--mono);
  font-size: 3.6px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.coin-denom-emboss {
  font-family: var(--serif);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 1px rgba(0,0,0,0.6);
}
.coin-crest-emboss {
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.65)) drop-shadow(0 -0.5px 0.5px rgba(255,255,255,0.4));
}
.p2-placeholder-badge rect {
  transition: stroke 0.3s ease;
}
.piece-card:hover .p2-placeholder-badge rect,
.ex-pedestal-tray:hover .p2-placeholder-badge rect {
  stroke: var(--gold);
}
.specimen-blueprint .bp-txt-iso {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 8.5px;
  fill: #f1f5f9;
}
.specimen-blueprint .bp-txt-dim {
  font-family: var(--mono);
  font-size: 6.8px;
  font-weight: 700;
  fill: var(--gold-soft);
  letter-spacing: 0.04em;
}
.specimen-blueprint .bp-txt-alloy {
  font-family: var(--mono);
  font-size: 5.6px;
  font-weight: 600;
  fill: #94a3b8;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.specimen-blueprint .bp-txt-stamp {
  font-family: var(--mono);
  font-size: 4.8px;
  font-weight: 700;
  fill: rgba(200, 169, 74, 0.45);
  letter-spacing: 0.1em;
}

/* Masterpiece Exhibition Pedestal & Tray */
.ex-pedestal-tray {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.5rem 1rem;
}
.ex-tray-velvet {
  position: relative;
  background: radial-gradient(circle at 50% 40%, #151821 0%, #090a0e 85%);
  padding: 1.5rem;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  box-shadow: 
    0 24px 60px rgba(0, 0, 0, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 35px rgba(200, 169, 74, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ex-velvet-corners {
  position: absolute;
  inset: 5px;
  border: 1px dashed rgba(200, 169, 74, 0.25);
  border-radius: 8px;
  pointer-events: none;
}
.ex-spotlight-cone {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(200, 169, 74, 0.18) 0%, transparent 70%);
  pointer-events: none;
}

/* Masterpiece Placard */
.ex-info-placard {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius);
  background: var(--surface2);
  border: 1px solid var(--line);
}
.placard-kicker {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.placard-title {
  font-family: var(--serif);
  font-size: 1.45rem;
  color: var(--ink);
  line-height: 1.2;
}
.placard-denom {
  font-size: 1rem;
  color: var(--muted);
}
.placard-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  margin: 0.35rem 0;
}
.pl-metric {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.pl-lbl {
  font-size: 0.65rem;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.pl-val {
  font-family: var(--mono);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
}
.pl-val.gold { color: var(--gold); }
.placard-monograph {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.placard-inspect-btn {
  align-self: flex-start;
  margin-top: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--gold-soft);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
}
.placard-inspect-btn:hover {
  background: var(--gold);
  color: #0b0a08;
  border-color: var(--gold);
}

/* Cardboard Holder Header & Label */
.pc-card-meta {
  padding: 0.75rem 0.85rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}
.pc-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pc-ser-key {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--gold-soft);
}
.pc-ag-pill {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  background: rgba(184, 200, 216, 0.18);
  border: 1px solid rgba(184, 200, 216, 0.4);
  color: #d8e2ec;
}
.pc-subtitle {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.35;
}
.pc-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: auto;
  padding-top: 0.45rem;
  border-top: 1px dashed var(--line);
}
.pc-price {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gold);
}
.pc-melt-note {
  font-size: 0.68rem;
  color: var(--faint);
  font-family: var(--mono);
}

/* ---------- 4. Staggered Cascades & Wing Transitions ---------- */
.pane.active {
  animation: paneFadeIn 0.35s var(--ease-out);
}
@keyframes paneFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.pane.active .reveal {
  animation: cascadeSlide 0.5s var(--ease-out) both;
}
.pane.active .reveal:nth-child(1) { animation-delay: 0.04s; }
.pane.active .reveal:nth-child(2) { animation-delay: 0.08s; }
.pane.active .reveal:nth-child(3) { animation-delay: 0.12s; }
.pane.active .reveal:nth-child(4) { animation-delay: 0.16s; }
.pane.active .reveal:nth-child(5) { animation-delay: 0.20s; }
@keyframes cascadeSlide {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- 5. Luxury Audio Dock & Equalizer ---------- */
.lofi-bar, .player-bar {
  background: rgba(18, 16, 12, 0.94) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid var(--line-strong) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.8), 0 0 20px rgba(200, 169, 74, 0.12) !important;
  border-radius: 18px !important;
}
.audio-vu-meter {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
  margin-right: 6px;
  vertical-align: middle;
}
.audio-vu-meter span {
  width: 3px;
  height: 100%;
  background: var(--gold);
  border-radius: 1px;
  transform-origin: bottom;
  animation: vuPulse 1.2s ease-in-out infinite alternate;
}
.audio-vu-meter span:nth-child(1) { animation-delay: 0.1s; height: 40%; }
.audio-vu-meter span:nth-child(2) { animation-delay: 0.3s; height: 80%; }
.audio-vu-meter span:nth-child(3) { animation-delay: 0.5s; height: 60%; }
.audio-vu-meter span:nth-child(4) { animation-delay: 0.2s; height: 95%; }
.audio-vu-meter span:nth-child(5) { animation-delay: 0.4s; height: 50%; }
@keyframes vuPulse {
  0% { transform: scaleY(0.2); }
  50% { transform: scaleY(0.9); }
  100% { transform: scaleY(0.4); }
}

/* ---------- 6. Dossier Precision Caliper & Live Melt Gauge ---------- */
.ds-caliper-box {
  margin: 1rem 0;
  padding: 1rem;
  border-radius: var(--radius);
  background: var(--surface2);
  border: 1px solid var(--line);
  position: relative;
}
.ds-caliper-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-bottom: 0.7rem;
}
.ds-dual-flips {
  display: flex;
  gap: 1.25rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  margin: 0.5rem 0 1rem;
}
.ds-flip-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.ds-flip-col-lbl {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--gold-soft);
  letter-spacing: 0.08em;
}

.ds-caliper-stage {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}
.ds-caliper-frame {
  width: 140px;
  height: 140px;
  background: #090a0d;
  border: 2px dashed rgba(200, 169, 74, 0.4);
  border-radius: 8px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: inset 0 2px 10px rgba(0,0,0,0.8);
  flex-shrink: 0;
}
.ds-caliper-coin-circle {
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(200, 220, 240, 0.9), rgba(130, 150, 175, 0.8) 60%, rgba(70, 90, 115, 0.9) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 16px rgba(180, 210, 240, 0.35), inset 0 2px 4px rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.3s;
}
.ds-caliper-crosshair {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ds-caliper-crosshair::before, .ds-caliper-crosshair::after {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, 0.3);
}
.ds-caliper-crosshair::before { top: 0; bottom: 0; left: 50%; width: 1px; }
.ds-caliper-crosshair::after { left: 0; right: 0; top: 50%; height: 1px; }
.ds-caliper-dim-tag {
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 700;
  color: #0b0f19;
  text-shadow: 0 1px 0 rgba(255,255,255,0.8);
  z-index: 1;
}
.ds-caliper-grid-rings {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border: 1px dotted rgba(200, 169, 74, 0.2);
  pointer-events: none;
}
.ds-caliper-metrics {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
  min-width: 180px;
}
.dcm-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--muted);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding-bottom: 0.2rem;
}
.dcm-row strong {
  font-family: var(--mono);
  color: var(--ink);
}

@media (max-width: 520px) {
  .ds-dual-flips {
    flex-direction: column;
    gap: 1.25rem;
  }
  .ds-flip-col {
    width: 100%;
  }
  .archival-flip-holder.flip-large {
    width: min(240px, 78vw);
    height: min(240px, 78vw);
    margin: 0 auto;
  }
  .ds-caliper-stage {
    justify-content: center;
    gap: 1rem;
  }
  .ds-caliper-frame {
    margin: 0 auto;
  }
  .ds-caliper-metrics {
    width: 100%;
    min-width: 100%;
  }
}

/* =========================================================================
   MARKET SENSITIVITY SIMULATOR & CABINET TRAYS STYLES
   ========================================================================= */

.sim-wrapper {
  margin-top: 0.85rem;
  width: 100%;
}
.sim-toggle-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  border-radius: 10px;
  background: var(--surface2);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
}
.sim-toggle-btn:hover {
  border-color: var(--gold);
  background: rgba(200, 169, 74, 0.08);
}
.sim-toggle-badge {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  background: rgba(200, 169, 74, 0.15);
  border: 1px solid rgba(200, 169, 74, 0.3);
  color: var(--gold-soft);
}
.sim-toggle-badge.gain {
  background: rgba(107, 191, 122, 0.2);
  border-color: rgba(107, 191, 122, 0.5);
  color: #86efac;
}
.sim-toggle-badge.loss {
  background: rgba(196, 92, 74, 0.2);
  border-color: rgba(196, 92, 74, 0.5);
  color: #fca5a5;
}
.sim-toggle-arrow {
  font-size: 0.75rem;
  color: var(--muted);
  transition: transform 0.2s var(--ease-out);
}
.sim-toggle-btn.open .sim-toggle-arrow {
  transform: rotate(180deg);
}

.spot-sim-drawer {
  margin-top: 0.65rem;
  padding: 1.1rem;
  border-radius: var(--radius);
  background: var(--surface2);
  border: 1px solid var(--line-strong);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6);
  animation: simSlideDown 0.25s var(--ease-out);
}
@keyframes simSlideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.sim-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 1.1rem;
}
.sim-instruction {
  font-size: 0.8rem;
  color: var(--muted);
  max-width: 60%;
  margin: 0;
  line-height: 1.4;
}
.sim-stat-callout {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.sim-stat-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.08em;
}
.sim-stat-val {
  font-family: var(--serif);
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1.15;
}
.sim-stat-delta {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--faint);
}
.sim-stat-delta.gain { color: #4ade80; }
.sim-stat-delta.loss { color: #f87171; }

.sim-sliders-grid {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1rem;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.sim-slider-row {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.sim-slider-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
}
.sim-slider-val {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--gold-soft);
}
.sim-range {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
  outline: none;
  cursor: pointer;
}
.sim-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e2e8f0, #94a3b8);
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
  cursor: pointer;
  transition: transform 0.15s;
}
.sim-range.range-au::-webkit-slider-thumb {
  background: linear-gradient(135deg, #fef08a, #ca8a04);
}
.sim-range::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}
.sim-range-marks {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--faint);
  margin-top: 0.15rem;
}
.sim-range-marks .live-mark {
  color: var(--gold-soft);
  font-weight: 700;
}
.sim-drawer-foot {
  margin-top: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.sim-breakdown-chips {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.sim-chip {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--muted);
}

@media (max-width: 520px) {
  .sim-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
  }
  .sim-instruction {
    max-width: 100%;
  }
  .sim-stat-callout {
    align-items: flex-start;
  }
  .sim-drawer-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .sim-breakdown-chips {
    width: 100%;
  }
  .sim-chip {
    flex: 1 1 calc(50% - 0.5rem);
    text-align: center;
  }
  .sim-reset-btn {
    width: 100%;
    text-align: center;
  }
}

/* Cabinet Trays Navigation Bar */
.cabinet-trays-nav {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.75rem;
  margin-bottom: 1.25rem;
  scrollbar-width: none;
}
.cabinet-trays-nav::-webkit-scrollbar { display: none; }
.tray-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.95rem;
  border-radius: 20px;
  background: var(--surface2);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
}
.tray-tab:hover {
  background: rgba(200, 169, 74, 0.08);
  border-color: var(--gold);
}
.tray-tab.active {
  background: var(--gold);
  color: #0b0a08;
  border-color: var(--gold);
  box-shadow: 0 4px 16px rgba(200, 169, 74, 0.35);
}
.tray-tab .tray-count {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  opacity: 0.8;
  background: rgba(0,0,0,0.18);
  padding: 0.1rem 0.4rem;
  border-radius: 10px;
}
.tray-tab.active .tray-count {
  background: rgba(0,0,0,0.3);
  color: #ffffff;
}

/* Dossier Phase 2 Notice */
.ds-stage-flip-showcase {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  margin-bottom: 1rem;
}
.ds-p2-notice {
  text-align: center;
  max-width: 90%;
}
.p2-seal {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gold-soft);
  letter-spacing: 0.1em;
}
.p2-prompt {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.45;
  margin-top: 0.35rem;
}

/* =========================================================================
   CONSERVATION LAB RESPONSIVE SPACING & OVERLAP FIXES
   ========================================================================= */
#pane-lab {
  padding-bottom: 9.5rem !important;
}
#pane-lab .grid.two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}
#pane-lab .table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* =========================================================================
   BLOOMBERG / CNN BREAKING MARKET TICKER TAPE
   ========================================================================= */
.market-ticker-tape {
  position: relative;
  width: 100%;
  margin: 1.1rem 0 0.8rem;
  background: #08090c;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  height: 40px;
  contain: layout paint;
  transform: translateZ(0);
}
.ticker-badge {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0 0.85rem;
  background: #141720;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  height: 100%;
  z-index: 2;
}
.ticker-live-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 10px #ef4444;
  animation: liveTickerBlink 1.4s ease-in-out infinite;
}
@keyframes liveTickerBlink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}
.ticker-live-lbl {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #f87171;
  text-transform: uppercase;
  white-space: nowrap;
}
.ticker-marquee-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: tickerMarquee 48s linear infinite;
  will-change: transform;
}
.market-ticker-tape:hover .ticker-marquee-track {
  animation-play-state: paused;
}
@keyframes tickerMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0 1.25rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  color: #cbd5e1;
  cursor: pointer;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.15s, color 0.15s;
}
.ticker-item:hover {
  background: rgba(200, 169, 74, 0.12);
  color: #ffffff;
}
.ticker-item .tk-sym {
  font-weight: 700;
  color: var(--gold-soft);
}
.ticker-item .tk-price {
  font-weight: 700;
  color: #f1f5f9;
}
.tk-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.tk-tag.tk-up {
  background: rgba(34, 197, 94, 0.16);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.35);
}
.tk-tag.tk-down {
  background: rgba(239, 68, 68, 0.16);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.35);
}
.tk-tag.tk-neu {
  background: rgba(148, 163, 184, 0.16);
  color: #cbd5e1;
  border: 1px solid rgba(148, 163, 184, 0.35);
}

/* =========================================================================
   PREVIOUS METALS STOCK TRADING TERMINAL
   ========================================================================= */
.trading-terminal-hub {
  margin: 1.25rem 0 1.5rem;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
  padding: 1.4rem;
}
.terminal-header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1rem;
}
.term-title-block {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.term-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.term-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 800;
  color: #4ade80;
  background: rgba(34, 197, 94, 0.15);
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  border: 1px solid rgba(34, 197, 94, 0.3);
}
.term-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  animation: liveTickerBlink 1.2s infinite;
}
.term-title {
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--ink);
  margin: 0.2rem 0 0;
  line-height: 1.15;
}
.term-live-rate {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
}
.term-price {
  font-family: var(--serif);
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--ink);
  transition: color 0.25s, transform 0.2s;
}
.term-price.flash-up {
  color: #4ade80 !important;
  text-shadow: 0 0 15px rgba(74, 222, 128, 0.6);
  transform: translateY(-2px);
}
.term-price.flash-down {
  color: #f87171 !important;
  text-shadow: 0 0 15px rgba(248, 113, 113, 0.6);
  transform: translateY(2px);
}
.term-delta {
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 700;
}
.term-delta.up { color: #4ade80; }
.term-delta.down { color: #f87171; }

.term-asset-pills {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.term-asset-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  border-radius: 8px;
  background: var(--surface2);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.term-asset-btn:hover {
  background: rgba(200, 169, 74, 0.1);
  border-color: var(--gold-soft);
}
.term-asset-btn.active {
  background: var(--gold);
  color: #0c0b08;
  border-color: var(--gold);
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(200, 169, 74, 0.35);
}
.term-asset-btn .sym {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 800;
}

.term-time-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.term-timeframes-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
.term-timeframes-row::-webkit-scrollbar { display: none; }
.term-tf-btn {
  padding: 0.35rem 0.65rem;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
  white-space: nowrap;
}
.term-tf-btn:hover {
  color: var(--ink);
  background: var(--surface2);
}
.term-tf-btn.active {
  color: var(--gold-soft);
  background: var(--surface2);
  border-color: var(--line-strong);
}
.term-type-toggle {
  display: flex;
  gap: 0.35rem;
  margin-left: auto;
}
.term-mode-btn {
  padding: 0.3rem 0.65rem;
  border-radius: 6px;
  background: var(--surface2);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.term-mode-btn.active {
  background: var(--gold-soft);
  color: #0c0b08;
  font-weight: 700;
}

.term-chart-stage {
  position: relative;
  width: 100%;
  height: 280px;
  margin: 1rem 0;
  background: radial-gradient(circle at 50% 50%, rgba(200, 169, 74, 0.03) 0%, transparent 70%);
  border-radius: 8px;
  cursor: crosshair;
  touch-action: pan-y;
}
#term-chart-canvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: pan-y;
}
.term-hud {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 0.5rem 0.85rem;
  border-radius: 8px;
  background: rgba(14, 16, 22, 0.88);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line-strong);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 5;
  transition: opacity 0.15s;
}
.hud-val {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gold-soft);
}
.hud-chg { font-weight: 700; }
.hud-chg.up { color: #4ade80; }
.hud-chg.down { color: #f87171; }
.hud-date, .hud-range { color: var(--muted); font-size: 0.65rem; }
.hud-note { color: var(--gold-soft); font-size: 0.65rem; max-width: 250px; line-height: 1.25; font-style: italic; }

@media (max-width: 640px) {
  .trading-terminal-hub {
    padding: 0.85rem 0.75rem;
    margin: 1rem 0;
  }
  .term-asset-pills {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
    width: 100%;
  }
  .term-asset-btn {
    justify-content: center;
    padding: 0.4rem 0.5rem;
    font-size: 0.74rem;
  }
  .term-time-bar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .term-timeframes-row {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .term-timeframes-row::-webkit-scrollbar { display: none; }
  .term-type-toggle {
    margin-left: 0;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
  }
  .term-mode-btn {
    text-align: center;
    padding: 0.35rem 0.5rem;
  }
  .term-chart-stage {
    height: clamp(230px, 45vh, 280px);
  }
  .term-hud {
    padding: 0.4rem 0.65rem;
    max-width: min(240px, 72vw);
  }
  .term-stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
  .term-stat-box {
    padding: 0.55rem 0.65rem;
  }
}

.term-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.85rem;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}
.term-stat-box {
  background: var(--surface2);
  padding: 0.75rem 0.95rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.ts-lbl {
  font-size: 0.65rem;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.08em;
}
.ts-range-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--ink);
}
.ts-track {
  position: relative;
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
  overflow: visible;
}
.ts-cur {
  position: absolute;
  top: -3.5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid #ffffff;
  box-shadow: 0 0 8px var(--gold);
  transform: translateX(-50%);
}
.ts-spread-val, .ts-leverage-val {
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
}
.ts-spread-delta {
  font-style: normal;
  color: var(--muted);
  font-size: 0.75rem;
}

/* =========================================================================
   NOW EXHIBITING 3D SPECIMEN STUDIO & PHASE 2 ANTICIPATION
   ========================================================================= */
.exhibit-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.85rem 1.25rem 0.4rem;
  border-bottom: 1px solid var(--line);
}
.exhibit-view-controls {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
.exhibit-view-controls::-webkit-scrollbar { display: none; }
.ex-ctrl-btn {
  padding: 0.35rem 0.65rem;
  border-radius: 6px;
  background: var(--surface2);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
  white-space: nowrap;
}
.ex-ctrl-btn:hover {
  background: rgba(200, 169, 74, 0.1);
  color: var(--ink);
  border-color: var(--gold-soft);
}
.ex-ctrl-btn.active {
  background: var(--gold);
  color: #0c0b08;
  font-weight: 700;
  border-color: var(--gold);
}
.ex-ctrl-btn.flip-btn {
  color: var(--gold-soft);
}
.ex-ctrl-btn.flip-btn:hover {
  background: var(--gold);
  color: #0c0b08;
}

/* 3D Coin Flip Mechanics */
.ex-3d-stage {
  perspective: 1200px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
}
.ex-specimen-flipper {
  position: relative;
  width: 270px;
  height: 330px;
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
}
.ex-specimen-flipper.flipped {
  transform: rotateY(180deg);
}
.ex-card-side {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 16px;
}
.ex-card-side.reverse-side {
  transform: rotateY(180deg);
}

/* ================= Museum Lucite Slab (Phase B Blueprint) ================= */
.museum-slab {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  background: linear-gradient(150deg, rgba(35, 48, 70, 0.94) 0%, rgba(20, 26, 38, 0.98) 35%, rgba(6, 9, 14, 0.99) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.32);
  box-shadow: 
    inset 0 1.5px 1.5px rgba(255, 255, 255, 0.8), 
    inset 0 -1.5px 3px rgba(0, 0, 0, 0.85), 
    inset 0 0 24px rgba(255, 255, 255, 0.1),
    0 24px 64px rgba(0, 0, 0, 0.92), 
    0 0 0 1px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  user-select: none;
  contain: content;
}

.slab-beveled-edge {
  position: absolute;
  inset: 2px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  pointer-events: none;
  z-index: 4;
}

/* Precision Corner Rivets */
.slab-rivet {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #cbd5e1 50%, #334155 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), inset 0 0.5px 0.5px #fff;
  z-index: 5;
}
.slab-rivet.tl { top: 7px; left: 7px; }
.slab-rivet.tr { top: 7px; right: 7px; }
.slab-rivet.bl { bottom: 7px; left: 7px; }
.slab-rivet.br { bottom: 7px; right: 7px; }

/* Holographic Archival Pedigree Header (Strict Height Lock & Invariant Centering) */
.slab-pedigree-header {
  position: relative;
  margin: 10px 10px 0;
  border-radius: 8px 8px 4px 4px;
  overflow: hidden;
  background: #0c0e14;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  z-index: 3;
  height: 68px;
  min-height: 68px;
  max-height: 68px;
  flex: 0 0 68px;
  box-sizing: border-box;
}
.slab-pedigree-holo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 8px;
  background: linear-gradient(90deg, #091322 0%, #172a45 20%, #1e3a8a 45%, #2563eb 50%, #1e3a8a 55%, #172a45 80%, #091322 100%);
  background-size: 200% auto;
  font-family: var(--mono);
  font-size: 0.50rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  height: 18px;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
}
.slab-holo-brand, .slab-holo-crest {
  white-space: nowrap;
  line-height: 1;
}
.slab-pedigree-body {
  padding: 3px 8px;
  background: rgba(15, 23, 42, 0.85);
  display: flex;
  flex-direction: column;
  gap: 1px;
  height: 34px;
  box-sizing: border-box;
  overflow: hidden;
}
.slab-pedigree-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.70rem;
  color: #f8fafc;
  font-family: var(--font);
  min-width: 0;
  gap: 0.4rem;
  line-height: 1.25;
}
.slab-pedigree-title strong {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.slab-pedigree-grade {
  flex: 0 0 auto;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 0.60rem;
  color: var(--gold-soft);
  font-weight: 700;
}
.slab-pedigree-sub {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.60rem;
  color: var(--muted);
  min-width: 0;
  gap: 0.4rem;
  line-height: 1.25;
}
.slab-pedigree-sub span:first-child {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.slab-pedigree-metal {
  flex: 0 0 auto;
  white-space: nowrap;
  color: #93c5fd;
  font-weight: 600;
}
.slab-barcode-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1px 8px;
  font-family: var(--mono);
  font-size: 0.48rem;
  color: #94a3b8;
  background: #06080d;
  height: 16px;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
}
.slab-barcode {
  letter-spacing: 0.15em;
  opacity: 0.7;
  white-space: nowrap;
}
.slab-cert-num {
  white-space: nowrap;
}

/* Frosted Silicone Core Gasket with Coin Aperture */
.slab-gasket-core {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  margin: 6px 10px 5px;
  border-radius: 8px;
  background: 
    radial-gradient(ellipse at 50% 50%, rgba(28, 38, 56, 0.94) 0%, rgba(10, 14, 22, 0.98) 100%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0, rgba(255, 255, 255, 0.02) 1px, transparent 2.5px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 
    inset 0 3px 12px rgba(0, 0, 0, 0.88),
    inset 0 0 0 1px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}
.slab-coin-aperture {
  position: relative;
  height: min(172px, calc(100% - 10px));
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  box-shadow: 
    inset 0 4px 16px rgba(0, 0, 0, 0.98), 
    inset 0 -2px 4px rgba(255, 255, 255, 0.35), 
    0 0 0 3px rgba(255, 255, 255, 0.08), 
    0 0 0 5px rgba(0, 0, 0, 0.75);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #020408;
}
.slab-coin-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
.slab-optic-glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, transparent 40%, rgba(255, 255, 255, 0.06) 60%, transparent 80%);
  mix-blend-mode: overlay;
  opacity: 0.8;
  z-index: 6;
}

/* ================= Numismatic Cartwheel Luster Sweep ================= */
.coin-cartwheel-luster {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(
    from var(--luster-angle, 45deg),
    transparent 0deg,
    rgba(255, 255, 255, 0.08) 25deg,
    rgba(255, 255, 255, 0.38) 45deg,
    rgba(255, 255, 255, 0.08) 65deg,
    transparent 90deg,
    transparent 180deg,
    rgba(255, 255, 255, 0.08) 205deg,
    rgba(255, 255, 255, 0.38) 225deg,
    rgba(255, 255, 255, 0.08) 245deg,
    transparent 270deg,
    transparent 360deg
  );
  mix-blend-mode: color-dodge;
  opacity: 0.85;
  transition: opacity 0.25s ease;
  z-index: 2;
}

html[data-atmo="conservator"] .coin-cartwheel-luster {
  background: conic-gradient(
    from var(--luster-angle, 45deg),
    transparent 0deg,
    rgba(255, 230, 160, 0.1) 25deg,
    rgba(255, 240, 190, 0.42) 45deg,
    rgba(255, 230, 160, 0.1) 65deg,
    transparent 90deg,
    transparent 180deg,
    rgba(255, 230, 160, 0.1) 205deg,
    rgba(255, 240, 190, 0.42) 225deg,
    rgba(255, 230, 160, 0.1) 245deg,
    transparent 270deg,
    transparent 360deg
  );
}

html[data-atmo="dynasty"] .coin-cartwheel-luster {
  background: conic-gradient(
    from var(--luster-angle, 45deg),
    transparent 0deg,
    rgba(254, 240, 138, 0.12) 25deg,
    rgba(254, 240, 138, 0.46) 45deg,
    rgba(254, 240, 138, 0.12) 65deg,
    transparent 90deg,
    transparent 180deg,
    rgba(254, 240, 138, 0.12) 205deg,
    rgba(254, 240, 138, 0.46) 225deg,
    rgba(254, 240, 138, 0.12) 245deg,
    transparent 270deg,
    transparent 360deg
  );
}

/* Dynamic Planchet Relief Shading under directional light (interactive exhibit flipper only) */
.ex-specimen-flipper .slab-coin-aperture svg,
.ex-specimen-flipper .slab-coin-aperture img {
  filter: drop-shadow(calc(var(--relief-x, 0) * 1px) calc(var(--relief-y, 0) * 1px) 2px rgba(255, 255, 255, 0.35))
          drop-shadow(calc(var(--relief-x, 0) * -1.5px) calc(var(--relief-y, 0) * -1.5px) 4px rgba(0, 0, 0, 0.7));
  will-change: filter;
}
.slab-mini .slab-coin-aperture svg,
.slab-mini .slab-coin-aperture img {
  filter: none;
  will-change: auto;
}

/* ================= Forensic 10x Macro Jeweler's Loupe ================= */
.forensic-loupe {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 3px solid #38bdf8;
  box-shadow: 
    0 12px 36px rgba(0, 0, 0, 0.95), 
    0 0 25px rgba(56, 189, 248, 0.5), 
    inset 0 0 16px rgba(0, 0, 0, 0.8),
    inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 100;
  overflow: hidden;
  background: #000;
  animation: loupePop 0.2s var(--ease-out);
}
.forensic-loupe[hidden] {
  display: none !important;
}

@keyframes loupePop {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.loupe-optic-zoom {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-repeat: no-repeat;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Hairline Reticle Crosshairs with 0.1mm micro-scale ticks */
.loupe-reticle-hairs {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.loupe-hair-x {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(56, 189, 248, 0.65);
  box-shadow: 0 0 3px rgba(56, 189, 248, 0.8);
}
.loupe-hair-y {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(56, 189, 248, 0.65);
  box-shadow: 0 0 3px rgba(56, 189, 248, 0.8);
}
.loupe-scale-ticks {
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  border: 1px dashed rgba(56, 189, 248, 0.35);
}

.loupe-bezel-rim {
  position: absolute;
  bottom: 6px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  gap: 1px;
}
.loupe-badge {
  font-family: var(--mono);
  font-size: 0.52rem;
  font-weight: 800;
  color: #38bdf8;
  letter-spacing: 0.1em;
  background: rgba(2, 6, 23, 0.85);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid rgba(56, 189, 248, 0.3);
  text-shadow: 0 0 4px #38bdf8;
}
.loupe-coords {
  font-family: var(--mono);
  font-size: 0.48rem;
  color: #f0fdf4;
  background: rgba(0, 0, 0, 0.7);
  padding: 0 4px;
  border-radius: 2px;
}

@media (max-width: 480px) {
  .ex-specimen-flipper {
    width: 240px;
    height: 295px;
  }
  .slab-coin-aperture {
    width: 160px;
    height: 160px;
  }
}

/* Dynamic Specular Spotlight Glint */
.ex-specular-glare {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  pointer-events: none;
  background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.18) 0%, transparent 60%);
  mix-blend-mode: overlay;
  z-index: 10;
}

/* Phase 2 Photography Target Guide & Dropzone */
.ex-p2-tether-bar {
  margin-top: 0.8rem;
  padding: 0.75rem 0.95rem;
  border-radius: 8px;
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.ex-target-filename {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--gold-soft);
  background: rgba(0, 0, 0, 0.3);
  padding: 0.35rem 0.65rem;
  border-radius: 6px;
  border: 1px solid var(--line);
}
.ex-copy-fn-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.75rem;
  transition: color 0.15s;
}
.ex-copy-fn-btn:hover { color: #ffffff; }

/* =========================================================================
   PRECISION NUMISMATIC DIGITAL VERNIER CALIPER & OPTICAL RETICLE HUD
   ========================================================================= */
.ex-ctrl-btn#btn-ex-reticle.active {
  background: rgba(14, 165, 233, 0.18);
  border-color: #38bdf8;
  color: #e0f2fe;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* 1. Precision Optical Laser Reticle (Inside the Coin Aperture) */
.ex-optical-reticle {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}
.ex-optical-reticle:not(.active) {
  display: none !important;
}
.ex-optical-reticle.active {
  opacity: 1;
}

.ret-cross-x {
  position: absolute;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent 4%, rgba(56, 189, 248, 0.7) 15%, rgba(56, 189, 248, 0.95) 50%, rgba(56, 189, 248, 0.7) 85%, transparent 96%);
  box-shadow: 0 0 4px rgba(56, 189, 248, 0.6);
}
.ret-cross-y {
  position: absolute;
  height: 100%;
  width: 1px;
  background: linear-gradient(180deg, transparent 4%, rgba(56, 189, 248, 0.7) 15%, rgba(56, 189, 248, 0.95) 50%, rgba(56, 189, 248, 0.7) 85%, transparent 96%);
  box-shadow: 0 0 4px rgba(56, 189, 248, 0.6);
}

.ret-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(56, 189, 248, 0.38);
  pointer-events: none;
}
.ret-ring-10 { width: 22%; height: 22%; border-color: rgba(56, 189, 248, 0.28); }
.ret-ring-20 { width: 44%; height: 44%; border-color: rgba(56, 189, 248, 0.42); }
.ret-ring-30 { width: 66%; height: 66%; border-color: rgba(56, 189, 248, 0.48); }
.ret-ring-planchet {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid #38bdf8;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.5), inset 0 0 8px rgba(56, 189, 248, 0.25);
  pointer-events: none;
}

.ret-axis-lbl {
  position: absolute;
  font-family: var(--mono);
  font-size: 7px;
  font-weight: 700;
  color: #7dd3fc;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  letter-spacing: 0.05em;
  background: rgba(3, 7, 18, 0.75);
  padding: 1px 3px;
  border-radius: 3px;
  border: 0.5px solid rgba(56, 189, 248, 0.4);
}
.ret-axis-n { top: 4px; left: 50%; transform: translateX(-50%); }
.ret-axis-s { bottom: 4px; left: 50%; transform: translateX(-50%); }
.ret-axis-e { right: 4px; top: 50%; transform: translateY(-50%); }
.ret-axis-w { left: 4px; top: 50%; transform: translateY(-50%); }

.ret-center-pip {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 6px #38bdf8;
}

/* 2. Digital Vernier Caliper Bar & Measurement Frame */
.ex-caliper-hud {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 0.8rem auto 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.92) 0%, rgba(3, 7, 18, 0.96) 100%);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 8px;
  padding: 0.65rem 0.85rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 15px rgba(56, 189, 248, 0.15);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  animation: caliperHudIn 0.28s var(--ease-out);
}
.ex-caliper-hud:not(.active) {
  display: none !important;
}
@keyframes caliperHudIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.caliper-hud-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: #7dd3fc;
  border-bottom: 1px solid rgba(56, 189, 248, 0.18);
  padding-bottom: 0.35rem;
}
.caliper-hud-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  text-transform: uppercase;
}
.caliper-hud-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 6px #38bdf8;
}

.caliper-scale-bar {
  position: relative;
  height: 38px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.6rem;
  overflow: hidden;
}
.cal-ticks {
  position: absolute;
  inset: 0 10px;
  background-image: repeating-linear-gradient(90deg, rgba(56, 189, 248, 0.4) 0px, rgba(56, 189, 248, 0.4) 1px, transparent 1px, transparent 6px);
  opacity: 0.4;
  pointer-events: none;
}
.cal-lcd-readout {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  background: #020617;
  padding: 0.15rem 0.75rem;
  border-radius: 4px;
  border: 1px solid rgba(56, 189, 248, 0.4);
  box-shadow: inset 0 0 8px rgba(56, 189, 248, 0.2);
}
.cal-lcd-sym {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: #38bdf8;
  font-weight: 700;
}
.cal-lcd-val {
  font-family: var(--mono);
  font-size: 1.15rem;
  font-weight: 800;
  color: #f0fdf4;
  letter-spacing: 0.04em;
  text-shadow: 0 0 8px rgba(74, 222, 128, 0.6);
}
.cal-lcd-unit {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: #86efac;
  font-weight: 700;
}

.caliper-metrics-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 0.7rem;
}
.cm-tag {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.2rem 0.45rem;
  border-radius: 4px;
  color: #cbd5e1;
}
.cm-tag.gold {
  color: var(--gold-soft);
  border-color: rgba(200, 169, 74, 0.35);
  background: rgba(200, 169, 74, 0.08);
}
.cm-info-btn {
  background: transparent;
  border: none;
  color: #38bdf8;
  font-family: var(--mono);
  font-size: 0.72rem;
  cursor: pointer;
  padding: 0.2rem 0.3rem;
  transition: color 0.15s;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cm-info-btn:hover {
  color: #ffffff;
}

/* 3. Educational Numismatic Caliper Explainer Card */
.caliper-explainer-popover {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(2, 4, 9, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.caliper-pop-box {
  position: relative;
  background: #0f131a;
  border: 1px solid rgba(56, 189, 248, 0.45);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 30px rgba(56, 189, 248, 0.25);
  border-radius: 12px;
  max-width: 520px;
  width: 100%;
  padding: 1.5rem;
  color: #e2e8f0;
  animation: paneFadeIn 0.25s var(--ease-out);
}
.caliper-pop-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  border-radius: 6px;
  padding: 0.3rem 0.6rem;
  font-size: 0.8rem;
  cursor: pointer;
}
.caliper-pop-title {
  font-family: var(--serif);
  font-size: 1.35rem;
  color: #38bdf8;
  margin: 0 0 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.caliper-pop-body {
  font-size: 0.88rem;
  line-height: 1.55;
  color: #cbd5e1;
}
.caliper-pop-body strong {
  color: #f8fafc;
}
.caliper-pop-body ul {
  padding-left: 1.25rem;
  margin: 0.6rem 0;
}
.caliper-pop-body li {
  margin-bottom: 0.45rem;
}

/* =========================================================================
   THE 4 EXPANDED ATMOSPHERES: SOLARIS, ALCHEMIST, GLACIER, VALHALLA
   ========================================================================= */

/* --- 13. Solaris (The Solar Observatory) --- */
html[data-atmo="solaris"] {
  --bg: #07040e; --bg2: #0f091f; --surface: #140d28; --surface2: #1e133a;
  --ink: #fff7ed; --muted: #d8b4e2; --faint: #816a9a;
  --gold: #fbbf24; --gold-soft: #fde68a; --gold-deep: #b45309;
  --line: rgba(251, 191, 36, 0.18); --line-strong: rgba(251, 191, 36, 0.45);
  --ok: #4ade80; --warn: #f59e0b; --bad: #f87171;
  --shadow: inset 0 1px 0 rgba(255, 235, 150, 0.08), 0 20px 60px rgba(0, 0, 0, 0.9);
  --th-bg: #140d28; --tabgrad1: #241544; --tabgrad2: #0f091f;
  --foot-bg: rgba(7, 4, 14, 0.94); --ph-bg: #0a0614; --sel-bg: #221440;
  --hold-bg: linear-gradient(135deg, #241544, #0f091f);
  --drawerbar-bg: rgba(20, 13, 40, 0.96); --cardmeta: #fcd34d;
  --skeleton1: #1e133a; --skeleton2: #0a0614;
  --toastgrad1: #241544; --toastgrad2: #0f091f;
  --row-hover: rgba(251, 191, 36, 0.08);
}
html[data-atmo="solaris"] body {
  background-image:
    radial-gradient(80% 50% at 50% 0%, rgba(251, 191, 36, 0.16), transparent 75%),
    radial-gradient(100% 70% at 85% 90%, rgba(139, 92, 246, 0.14), transparent 70%);
}
html[data-atmo="solaris"] .wordmark {
  text-shadow: 0 0 35px rgba(251, 191, 36, 0.45), 0 0 70px rgba(217, 119, 6, 0.25);
}
.sw-solaris { background: radial-gradient(circle at 40% 40%, #fff7cc 0%, #f59e0b 45%, #18092e 85%, #080314 100%); }

/* --- 14. The Alchemist (Hermetic Transmutation Lab) --- */
html[data-atmo="alchemist"] {
  --bg: #040d08; --bg2: #071710; --surface: #0c2016; --surface2: #122c20;
  --ink: #e6f4ea; --muted: #8cb89f; --faint: #476c57;
  --gold: #34d399; --gold-soft: #a7f3d0; --gold-deep: #059669;
  --line: rgba(52, 211, 153, 0.18); --line-strong: rgba(52, 211, 153, 0.42);
  --ok: #34d399; --warn: #d97706; --bad: #f87171;
  --shadow: inset 0 1px 0 rgba(52, 211, 153, 0.08), 0 20px 60px rgba(0, 0, 0, 0.9);
  --th-bg: #0c2016; --tabgrad1: #163628; --tabgrad2: #071710;
  --foot-bg: rgba(4, 13, 8, 0.94); --ph-bg: #05140c; --sel-bg: #133324;
  --hold-bg: linear-gradient(135deg, #163628, #071710);
  --drawerbar-bg: rgba(12, 32, 22, 0.96); --cardmeta: #6ee7b7;
  --skeleton1: #122c20; --skeleton2: #05140c;
  --toastgrad1: #163628; --toastgrad2: #071710;
  --row-hover: rgba(52, 211, 153, 0.08);
}
html[data-atmo="alchemist"] body {
  background-image:
    radial-gradient(75% 45% at 50% 0%, rgba(52, 211, 153, 0.14), transparent 75%),
    radial-gradient(90% 60% at 20% 85%, rgba(180, 83, 9, 0.12), transparent 70%);
}
.sw-alchemist { background: radial-gradient(circle at 35% 35%, #34d399 0%, #064e3b 50%, #78350f 85%, #061a12 100%); }

/* --- 15. Hyperborean Vault (Permafrost & Auroras) --- */
html[data-atmo="glacier"] {
  --bg: #040c14; --bg2: #071420; --surface: #0b1c2e; --surface2: #10263e;
  --ink: #f0f9ff; --muted: #93c5fd; --faint: #476a8a;
  --gold: #38bdf8; --gold-soft: #bae6fd; --gold-deep: #0284c7;
  --line: rgba(56, 189, 248, 0.18); --line-strong: rgba(56, 189, 248, 0.42);
  --ok: #4ade80; --warn: #fbbf24; --bad: #f87171;
  --shadow: inset 0 1px 0 rgba(186, 230, 253, 0.1), 0 20px 60px rgba(0, 0, 0, 0.9);
  --th-bg: #0b1c2e; --tabgrad1: #14304e; --tabgrad2: #071420;
  --foot-bg: rgba(4, 12, 20, 0.94); --ph-bg: #05101a; --sel-bg: #122b46;
  --hold-bg: linear-gradient(135deg, #14304e, #071420);
  --drawerbar-bg: rgba(11, 28, 46, 0.96); --cardmeta: #7dd3fc;
  --skeleton1: #10263e; --skeleton2: #05101a;
  --toastgrad1: #14304e; --toastgrad2: #071420;
  --row-hover: rgba(56, 189, 248, 0.08);
}
html[data-atmo="glacier"] body {
  background-image:
    radial-gradient(90% 50% at 50% 0%, rgba(56, 189, 248, 0.18), transparent 75%),
    radial-gradient(120% 70% at 80% 90%, rgba(52, 211, 153, 0.12), transparent 70%);
}
.sw-glacier { background: linear-gradient(135deg, #e0f2fe 0%, #38bdf8 35%, #0369a1 70%, #081a2e 100%); }

/* --- 16. Gilded Armory (Viking Hoard Hall) --- */
html[data-atmo="valhalla"] {
  --bg: #0a0806; --bg2: #140f0a; --surface: #1c150e; --surface2: #281e14;
  --ink: #faecd8; --muted: #bfa382; --faint: #6f5941;
  --gold: #d97706; --gold-soft: #fcd34d; --gold-deep: #92400e;
  --line: rgba(217, 119, 6, 0.2); --line-strong: rgba(217, 119, 6, 0.45);
  --ok: #65a30d; --warn: #f59e0b; --bad: #dc2626;
  --shadow: inset 0 1px 0 rgba(252, 211, 77, 0.08), 0 20px 60px rgba(0, 0, 0, 0.9);
  --th-bg: #1c150e; --tabgrad1: #302214; --tabgrad2: #140f0a;
  --foot-bg: rgba(10, 8, 6, 0.94); --ph-bg: #0d0a08; --sel-bg: #291d12;
  --hold-bg: linear-gradient(135deg, #302214, #140f0a);
  --drawerbar-bg: rgba(28, 21, 14, 0.96); --cardmeta: #fde68a;
  --skeleton1: #281e14; --skeleton2: #0d0a08;
  --toastgrad1: #302214; --toastgrad2: #140f0a;
  --row-hover: rgba(217, 119, 6, 0.08);
}
html[data-atmo="valhalla"] body {
  background-image:
    radial-gradient(85% 45% at 50% 0%, rgba(217, 119, 6, 0.16), transparent 75%),
    radial-gradient(90% 70% at 75% 85%, rgba(185, 28, 28, 0.14), transparent 70%);
}
.sw-valhalla { background: linear-gradient(135deg, #1c140c 0%, #d97706 45%, #7f1d1d 80%, #0d0c0a 100%); }

/* --- 17. Dynasty (Imperial Lacquer & Red Envelope 24K Gold) --- */
html[data-atmo="dynasty"] {
  --bg: #0c0204; --bg2: #160508; --surface: #1f070a; --surface2: #2d0b10;
  --ink: #fff1f2; --muted: #fecdd3; --faint: #9f1239;
  --gold: #eab308; --gold-soft: #fef08a; --gold-deep: #a16207;
  --line: rgba(234, 179, 8, 0.22); --line-strong: rgba(234, 179, 8, 0.48);
  --ok: #22c55e; --warn: #f59e0b; --bad: #ef4444;
  --shadow: inset 0 1px 0 rgba(254, 240, 138, 0.12), 0 20px 60px rgba(0, 0, 0, 0.92);
  --th-bg: #1f070a; --tabgrad1: #350c13; --tabgrad2: #160508;
  --foot-bg: rgba(12, 2, 4, 0.94); --ph-bg: #100305; --sel-bg: #2d0b10;
  --hold-bg: linear-gradient(135deg, #350c13, #160508);
  --drawerbar-bg: rgba(31, 7, 10, 0.96); --cardmeta: #fef08a;
  --skeleton1: #2d0b10; --skeleton2: #100305;
  --toastgrad1: #350c13; --toastgrad2: #160508;
  --row-hover: rgba(234, 179, 8, 0.08);
}
html[data-atmo="dynasty"] body {
  background-image:
    radial-gradient(85% 45% at 50% 0%, rgba(225, 29, 72, 0.18), transparent 75%),
    radial-gradient(90% 70% at 75% 85%, rgba(234, 179, 8, 0.12), transparent 70%);
}
html[data-atmo="dynasty"] .wordmark {
  text-shadow: 0 0 35px rgba(234, 179, 8, 0.5), 0 0 70px rgba(225, 29, 72, 0.3);
}
.sw-dynasty { background: linear-gradient(135deg, #e11d48 0%, #eab308 45%, #881337 80%, #0c0204 100%); }

/* --- 18. Zen Garden (Raked White Sand & Moss Slate) --- */
html[data-atmo="zen"] {
  --bg: #08090a; --bg2: #0e1114; --surface: #14181c; --surface2: #1c2227;
  --ink: #f8fafc; --muted: #cbd5e1; --faint: #64748b;
  --gold: #84cc16; --gold-soft: #bef264; --gold-deep: #4d7c0f;
  --line: rgba(132, 204, 22, 0.20); --line-strong: rgba(132, 204, 22, 0.45);
  --ok: #84cc16; --warn: #eab308; --bad: #ef4444;
  --shadow: inset 0 1px 0 rgba(190, 242, 100, 0.08), 0 20px 60px rgba(0, 0, 0, 0.92);
  --th-bg: #14181c; --tabgrad1: #222930; --tabgrad2: #0e1114;
  --foot-bg: rgba(8, 9, 10, 0.94); --ph-bg: #0b0d0e; --sel-bg: #1c2227;
  --hold-bg: linear-gradient(135deg, #222930, #0e1114);
  --drawerbar-bg: rgba(20, 24, 28, 0.96); --cardmeta: #bef264;
  --skeleton1: #1c2227; --skeleton2: #0b0d0e;
  --toastgrad1: #222930; --toastgrad2: #0e1114;
  --row-hover: rgba(132, 204, 22, 0.08);
}
html[data-atmo="zen"] body {
  background-image:
    radial-gradient(80% 50% at 50% 0%, rgba(132, 204, 22, 0.12), transparent 75%),
    radial-gradient(100% 70% at 20% 90%, rgba(71, 85, 105, 0.15), transparent 70%);
}
html[data-atmo="zen"] .wordmark {
  text-shadow: 0 0 30px rgba(132, 204, 22, 0.35), 0 0 60px rgba(100, 116, 139, 0.25);
}
.sw-zen { background: linear-gradient(135deg, #cbd5e1 0%, #84cc16 45%, #1e293b 80%, #08090a 100%); }

/* --- 19. Samadhi (Vedic Ashram Saffron & Himalayan Sandalwood) --- */
html[data-atmo="samadhi"] {
  --bg: #0b0604; --bg2: #160c07; --surface: #22120a; --surface2: #2f1a0e;
  --ink: #fff7ed; --muted: #fed7aa; --faint: #9a3412;
  --gold: #f97316; --gold-soft: #fdba74; --gold-deep: #c2410c;
  --line: rgba(249, 115, 22, 0.22); --line-strong: rgba(249, 115, 22, 0.48);
  --ok: #22c55e; --warn: #f59e0b; --bad: #ef4444;
  --shadow: inset 0 1px 0 rgba(253, 186, 116, 0.10), 0 20px 60px rgba(0, 0, 0, 0.92);
  --th-bg: #22120a; --tabgrad1: #381f11; --tabgrad2: #160c07;
  --foot-bg: rgba(11, 6, 4, 0.94); --ph-bg: #0e0705; --sel-bg: #2f1a0e;
  --hold-bg: linear-gradient(135deg, #381f11, #160c07);
  --drawerbar-bg: rgba(34, 18, 10, 0.96); --cardmeta: #fdba74;
  --skeleton1: #2f1a0e; --skeleton2: #0e0705;
  --toastgrad1: #381f11; --toastgrad2: #160c07;
  --row-hover: rgba(249, 115, 22, 0.08);
}
html[data-atmo="samadhi"] body {
  background-image:
    radial-gradient(85% 45% at 50% 0%, rgba(249, 115, 22, 0.16), transparent 75%),
    radial-gradient(90% 70% at 80% 85%, rgba(180, 83, 9, 0.14), transparent 70%);
}
html[data-atmo="samadhi"] .wordmark {
  text-shadow: 0 0 35px rgba(249, 115, 22, 0.5), 0 0 70px rgba(194, 65, 12, 0.3);
}
.sw-samadhi { background: linear-gradient(135deg, #fff7ed 0%, #f97316 45%, #9a3412 80%, #0b0604 100%); }

/* --- 20. Silk Road (Ancient Caravanserai & Desert Starlight) --- */
html[data-atmo="silkroad"] {
  --bg: #030712; --bg2: #0b1120; --surface: #0f172a; --surface2: #1e293b;
  --ink: #f8fafc; --muted: #cbd5e1; --faint: #475569;
  --gold: #e2b340; --gold-soft: #fcd34d; --gold-deep: #b45309;
  --line: rgba(226, 179, 64, 0.22); --line-strong: rgba(226, 179, 64, 0.48);
  --ok: #34d399; --warn: #f59e0b; --bad: #ef4444;
  --shadow: inset 0 1px 0 rgba(252, 211, 77, 0.10), 0 20px 60px rgba(0, 0, 0, 0.92);
  --th-bg: #0f172a; --tabgrad1: #1e293b; --tabgrad2: #0b1120;
  --foot-bg: rgba(3, 7, 18, 0.94); --ph-bg: #060912; --sel-bg: #1e293b;
  --hold-bg: linear-gradient(135deg, #1e293b, #0b1120);
  --drawerbar-bg: rgba(15, 23, 42, 0.96); --cardmeta: #fcd34d;
  --skeleton1: #1e293b; --skeleton2: #060912;
  --toastgrad1: #1e293b; --toastgrad2: #0b1120;
  --row-hover: rgba(226, 179, 64, 0.08);
}
html[data-atmo="silkroad"] body {
  background-image:
    radial-gradient(85% 45% at 50% 0%, rgba(226, 179, 64, 0.15), transparent 75%),
    radial-gradient(90% 70% at 75% 85%, rgba(30, 58, 138, 0.22), transparent 70%);
}
html[data-atmo="silkroad"] .wordmark {
  text-shadow: 0 0 35px rgba(226, 179, 64, 0.45), 0 0 70px rgba(59, 130, 246, 0.25);
}
.sw-silkroad { background: linear-gradient(135deg, #fcd34d 0%, #1e3a8a 50%, #0f172a 80%, #030712 100%); }

/* Dynamic Atmosphere Particle Canvases */
#cursed-embers, #foundry-embers, #abyss-caustics, #solaris-flares, #glacier-aurora,
#dynasty-lanterns, #zen-petals, #samadhi-prana, #silkroad-stars {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
}
#cursed-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(circle at 50% 50%, transparent 45%, rgba(185, 28, 28, 0.22) 100%);
  animation: cursedVignettePulse 5s ease-in-out infinite alternate;
}
@keyframes cursedVignettePulse {
  0% { opacity: 0.5; }
  100% { opacity: 1; }
}

/* =========================================================================
   CONSERVATION LAB PRO TOOLS (MACRO CALCULATOR, LIGHTING, ALIGNMENT)
   ========================================================================= */
.lab-pro-suite {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.lab-card-pro {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow);
}
.lab-calc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}
.lab-calc-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.lab-calc-field label {
  font-size: 0.72rem;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.08em;
}
.lab-calc-field select, .lab-calc-field input {
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  background: var(--surface2);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.85rem;
}
.lab-calc-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 8px;
  background: var(--surface2);
  border: 1px solid var(--line);
}
.calc-res-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.calc-res-lbl {
  font-size: 0.65rem;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.calc-res-val {
  font-family: var(--mono);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--gold-soft);
}
.calc-diffraction-alert {
  margin-top: 0.65rem;
  font-size: 0.75rem;
  color: #f59e0b;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Studio Lighting Guide */
.lighting-studio-guide {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.lighting-mode-card {
  padding: 1rem;
  border-radius: 10px;
  background: var(--surface2);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  cursor: pointer;
  transition: all 0.2s;
}
.lighting-mode-card:hover, .lighting-mode-card.active {
  border-color: var(--gold);
  background: rgba(200, 169, 74, 0.08);
}
.lighting-mode-card.active {
  box-shadow: 0 0 16px rgba(200, 169, 74, 0.2);
}
.lmc-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.lmc-desc {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.45;
}
.lmc-badge {
  font-family: var(--mono);
  font-size: 0.65rem;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  background: rgba(200, 169, 74, 0.15);
  color: var(--gold-soft);
  align-self: flex-start;
}

/* Specimen Die Alignment Sandbox */
.sandbox-tool {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 1.25rem;
  margin-top: 1rem;
}
@media (max-width: 768px) {
  .sandbox-tool { grid-template-columns: 1fr; }
}
.sandbox-canvas-wrap {
  position: relative;
  width: 240px;
  height: 240px;
  margin: 0 auto;
  border-radius: 12px;
  background: #090a0d;
  border: 1px solid var(--line-strong);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
#sandbox-canvas {
  width: 100%;
  height: 100%;
}
.sandbox-controls {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.sb-ctrl-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.sb-ctrl-head {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink);
}
.sb-ctrl-val {
  font-family: var(--mono);
  color: var(--gold-soft);
}

/* Pro Photo Phase 2 Staging Album Styles */
.staging-album-row {
  transition: background 0.2s var(--ease-out);
}
.staging-album-row:hover {
  background: rgba(200, 169, 74, 0.24) !important;
}

@keyframes highlightPulse {
  0% { box-shadow: 0 0 0 0 rgba(200, 169, 74, 0.7); }
  50% { box-shadow: 0 0 28px 6px rgba(200, 169, 74, 0.45); }
  100% { box-shadow: 0 0 0 0 rgba(200, 169, 74, 0); }
}

.highlight-pulse {
  animation: highlightPulse 2s ease-out 1;
}

/* ================= Gallery Display Mode Switcher ================= */
.gallery-mode-switch {
  display: inline-flex;
  align-items: center;
  background: rgba(14, 17, 24, 0.85);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 3px;
  gap: 3px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
.g-mode-btn {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-family: var(--font);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s var(--ease-out);
}
.g-mode-btn:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.05);
}
.g-mode-btn.active {
  background: linear-gradient(135deg, rgba(200, 169, 74, 0.28) 0%, rgba(200, 169, 74, 0.12) 100%);
  color: var(--gold-soft);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 0 0 1px var(--gold);
}

/* ================= Museum Slab Mini: Gallery Card Encapsulation ================= */
.museum-slab.slab-mini {
  width: 100%;
  aspect-ratio: 1 / 1.18;
  max-width: 220px;
  border-radius: 12px;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.08) 0%, rgba(18, 22, 30, 0.9) 35%, rgba(6, 8, 12, 0.96) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  box-shadow: 
    inset 0 1px 1px rgba(255, 255, 255, 0.4), 
    inset 0 -1px 2px rgba(0, 0, 0, 0.7), 
    0 10px 28px rgba(0, 0, 0, 0.7), 
    0 0 0 1px rgba(0, 0, 0, 0.5);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  user-select: none;
}
.museum-slab.slab-mini .slab-beveled-edge {
  inset: 1.5px;
  border-radius: 10px;
}
.museum-slab.slab-mini .slab-rivet {
  width: 5px;
  height: 5px;
}
.museum-slab.slab-mini .slab-pedigree-header {
  padding: 0;
  gap: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  height: 52px;
  min-height: 52px;
  max-height: 52px;
  flex: 0 0 52px;
  box-sizing: border-box;
  overflow: hidden;
}
.museum-slab.slab-mini .slab-pedigree-holo {
  padding: 1px 6px;
  height: 15px;
  box-sizing: border-box;
}
.museum-slab.slab-mini .slab-holo-brand {
  font-size: 0.46rem;
}
.museum-slab.slab-mini .slab-holo-crest {
  font-size: 0.44rem;
}
.museum-slab.slab-mini .slab-pedigree-body {
  padding: 2px 6px;
  height: 24px;
  gap: 0;
  box-sizing: border-box;
  overflow: hidden;
}
.museum-slab.slab-mini .slab-pedigree-title strong {
  font-size: 0.58rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 110px;
}
.museum-slab.slab-mini .slab-pedigree-grade {
  font-size: 0.50rem;
  white-space: nowrap;
}
.museum-slab.slab-mini .slab-pedigree-sub {
  font-size: 0.48rem;
}
.museum-slab.slab-mini .slab-pedigree-sub span:first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}
.museum-slab.slab-mini .slab-barcode-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 6px;
  font-family: var(--mono);
  font-size: 0.42rem;
  color: #94a3b8;
  background: #06080d;
  height: 13px;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.museum-slab.slab-mini .slab-gasket-core {
  position: relative;
  flex: 1;
  margin: 6px;
  border-radius: 8px;
  background: 
    radial-gradient(ellipse at 50% 50%, rgba(28, 38, 56, 0.94) 0%, rgba(10, 14, 22, 0.98) 100%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0, rgba(255, 255, 255, 0.02) 1px, transparent 2.5px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 
    inset 0 2px 8px rgba(0, 0, 0, 0.88),
    inset 0 0 0 1px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}
.museum-slab.slab-mini .slab-coin-aperture {
  position: relative;
  border-radius: 50%;
  box-shadow: 
    inset 0 2px 6px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 4px 14px rgba(0, 0, 0, 0.7);
  background: #020408;
  width: 136px;
  height: 136px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.museum-slab.slab-mini .coin-cartwheel-luster {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 45deg at 50% 50%, 
    rgba(255, 255, 255, 0.14) 0deg,
    transparent 45deg,
    rgba(255, 255, 255, 0.10) 90deg,
    transparent 135deg,
    rgba(255, 255, 255, 0.14) 180deg,
    transparent 225deg,
    rgba(255, 255, 255, 0.10) 270deg,
    transparent 315deg,
    rgba(255, 255, 255, 0.14) 360deg);
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.65;
  z-index: 2;
  transition: transform 0.4s ease, opacity 0.3s ease;
}
.piece-card:hover .museum-slab.slab-mini .coin-cartwheel-luster,
.latest-card:hover .museum-slab.slab-mini .coin-cartwheel-luster {
  transform: rotate(35deg);
  opacity: 0.95;
}
.museum-slab.slab-mini .slab-optic-glare {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 25%, transparent 50%, rgba(255, 255, 255, 0.04) 75%, transparent 100%);
  pointer-events: none;
  z-index: 6;
  opacity: 0.55;
  transition: opacity 0.3s ease;
}
.piece-card:hover .museum-slab.slab-mini .slab-optic-glare,
.latest-card:hover .museum-slab.slab-mini .slab-optic-glare {
  opacity: 0.85;
}

/* ================= Planchet Matrix Medallion ================= */
.matrix-medallion-holder {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(200, 169, 74, 0.08) 0%, transparent 70%);
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.9));
  transition: transform 0.25s var(--ease-out);
}
.piece-card:hover .matrix-medallion-holder {
  transform: scale(1.05);
}

/* Piece card styling for slab mode */
.piece-card.mode-slab {
  background: rgba(14, 17, 24, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.piece-card.mode-slab:hover {
  border-color: rgba(200, 169, 74, 0.4);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.85), 0 0 24px rgba(200, 169, 74, 0.2);
}

/* Twin Museum Slabs in Dossier Showcase */
.ds-flip-col .museum-slab {
  width: min(240px, 85vw);
  height: 290px;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.12);
}

/* ==========================================================================
   3D COVER FLOW ARCHIVAL CAROUSEL (GALLERY APEX)
   Early iTunes / Cover Flow 3D Specimen Showcase for Slabs, Flips & Planchets
   ========================================================================== */

.gallery-coverflow-wrap {
  position: relative;
  width: 100%;
  margin: 1.25rem 0 2.25rem 0;
  padding: 1.5rem 1rem 1.75rem 1rem;
  background: radial-gradient(ellipse 90% 70% at 50% 35%, rgba(20, 24, 33, 0.88) 0%, rgba(8, 10, 14, 0.98) 90%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  box-shadow: 
    0 30px 80px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  box-sizing: border-box;
}

/* Polished Ambient Specular Pedestal Ground */
.gallery-coverflow-wrap::before {
  content: "";
  position: absolute;
  bottom: 120px;
  left: 10%;
  right: 10%;
  height: 180px;
  background: radial-gradient(ellipse 60% 40% at 50% 60%, rgba(200, 169, 74, 0.16) 0%, rgba(56, 189, 248, 0.05) 45%, transparent 75%);
  pointer-events: none;
  z-index: 1;
}

/* Header bar above Cover Flow */
.cf-header {
  width: 100%;
  max-width: 1100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  padding: 0 0.5rem;
  z-index: 10;
}

.cf-header-left {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.cf-header-left .eyebrow {
  color: var(--gold, #c8a94a);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.cf-header-left .cf-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cf-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.cf-header-actions .btn {
  font-size: 0.78rem;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #e2e8f0;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.cf-header-actions .btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(200, 169, 74, 0.4);
  color: #fff;
}

.cf-header-actions .btn.active {
  background: rgba(200, 169, 74, 0.22);
  border-color: var(--gold, #c8a94a);
  color: var(--gold, #c8a94a);
  box-shadow: 0 0 12px rgba(200, 169, 74, 0.25);
}

/* 3D Viewport */
.cf-viewport {
  position: relative;
  width: 100%;
  max-width: 1150px;
  height: 420px;
  perspective: 1100px;
  perspective-origin: 50% 48%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
  z-index: 5;
}

.cf-viewport.is-dragging {
  cursor: grabbing;
}

/* 3D Stage */
.cf-stage {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 3D Specimen Card */
.cf-card {
  position: absolute;
  top: 25px;
  width: 250px;
  height: 312px;
  transform-style: preserve-3d;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease, filter 0.35s ease;
  cursor: pointer;
  border-radius: 16px;
  overflow: visible;
}

/* During drag, suppress transitions for instantaneous tracking */
.cf-viewport.is-dragging .cf-card {
  transition: none !important;
}

/* Flanking Specimen Cards */
.cf-card.cf-card-flank {
  filter: brightness(0.68) saturate(0.85);
}

.cf-card.cf-card-flank:hover {
  filter: brightness(0.88) saturate(0.95);
}

/* Center Specimen Card */
.cf-card.cf-card-center {
  filter: brightness(1) saturate(1);
  cursor: default;
}

/* Card inner container with 3D flip support */
.cf-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
  border-radius: 16px;
}

.cf-card.cf-flipped .cf-card-inner,
.cf-card .cf-card-inner.is-flipped {
  transform: rotateY(180deg) !important;
}

/* Front & Back Faces */
.cf-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 16px;
  box-shadow: 
    0 16px 40px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(255, 255, 255, 0.14);
}

.cf-face-obv {
  transform: rotateY(0deg);
}

.cf-face-rev {
  transform: rotateY(180deg);
}

.cf-card-center .cf-face {
  box-shadow: 
    0 24px 64px rgba(0, 0, 0, 0.95),
    0 0 35px rgba(200, 169, 74, 0.28),
    0 0 0 1.5px rgba(200, 169, 74, 0.55);
}

/* Glass Edge Sheen overlay on flanking slabs */
.cf-glass-sheen {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.04) 40%, transparent 60%);
  pointer-events: none;
  z-index: 10;
}

.cf-card-left .cf-glass-sheen {
  background: linear-gradient(110deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.05) 45%, transparent 65%);
}

.cf-card-right .cf-glass-sheen {
  background: linear-gradient(250deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.05) 45%, transparent 65%);
}

.cf-card-center .cf-glass-sheen {
  background: radial-gradient(circle at var(--cf-sheen-x, 50%) var(--cf-sheen-y, 40%), rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.08) 40%, transparent 70%);
  opacity: 0.95;
  mix-blend-mode: overlay;
}

/* Cover Flow Mirror Reflection */
.cf-reflection {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 110px;
  margin-top: 4px;
  transform: scaleY(-1);
  opacity: 0.35;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, transparent 80%);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, transparent 80%);
  filter: blur(0.5px) brightness(0.85);
  border-radius: 14px;
}

.cf-reflection .cf-face-rev {
  display: none;
}

/* Center Card 3D Flip Quick Action Badge */
.cf-flip-badge {
  position: absolute;
  bottom: 42px;
  right: 12px;
  background: rgba(14, 17, 24, 0.85);
  border: 1px solid rgba(200, 169, 74, 0.5);
  color: var(--gold, #c8a94a);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  z-index: 25;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  pointer-events: auto;
}

.cf-flip-badge:hover {
  background: rgba(200, 169, 74, 0.25);
  border-color: #fff;
  color: #fff;
  transform: scale(1.05);
}

/* Cover Flow Mode-Specific Styles */
.cf-card .museum-slab {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.cf-card .archival-flip-holder {
  width: 240px;
  height: 240px;
  max-width: 240px;
  max-height: 240px;
  aspect-ratio: 1 / 1;
  margin: 25px auto;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .cf-card .archival-flip-holder {
    width: 200px;
    height: 200px;
    max-width: 200px;
    max-height: 200px;
    margin: 25px auto;
  }
}

.cf-card .matrix-medallion-holder {
  width: 220px;
  height: 220px;
  margin: 35px auto;
}

/* Specimen Info Placard beneath Stage */
.cf-placard {
  position: relative;
  width: 100%;
  max-width: 680px;
  background: rgba(14, 18, 26, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 0.75rem 1.25rem;
  margin-top: 0.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  z-index: 10;
  backdrop-filter: blur(8px);
}

.cf-placard-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.cf-placard-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
}

.cf-placard-meta {
  font-size: 0.78rem;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.cf-placard-metrics {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cf-placard-price {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--gold, #c8a94a);
  font-family: var(--mono);
}

/* Cover Flow Controls Bar */
.cf-controls {
  width: 100%;
  max-width: 680px;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.85rem;
  z-index: 10;
}

.cf-nav-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  flex-shrink: 0;
}

.cf-nav-btn:hover {
  background: rgba(200, 169, 74, 0.25);
  border-color: var(--gold, #c8a94a);
  color: var(--gold, #c8a94a);
  transform: scale(1.08);
}

.cf-nav-btn:active {
  transform: scale(0.95);
}

/* Scrubber Slider */
.cf-scrubber-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}

.cf-scrubber {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.15);
  outline: none;
  transition: background 0.2s;
  cursor: pointer;
}

.cf-scrubber:hover {
  background: rgba(255, 255, 255, 0.25);
}

.cf-scrubber::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold, #c8a94a);
  border: 2px solid #fff;
  box-shadow: 0 0 10px rgba(200, 169, 74, 0.8), 0 2px 4px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.cf-scrubber::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.cf-scrubber::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold, #c8a94a);
  border: 2px solid #fff;
  box-shadow: 0 0 10px rgba(200, 169, 74, 0.8), 0 2px 4px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.cf-counter {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: #94a3b8;
  white-space: nowrap;
  min-width: 60px;
  text-align: right;
}

@media (max-width: 768px) {
  .cf-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .cf-header-actions {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    gap: 0.35rem;
  }
  .cf-header-actions::-webkit-scrollbar { display: none; }
  .cf-header-actions .btn {
    flex-shrink: 0;
    white-space: nowrap;
  }
  .cf-viewport {
    height: 360px;
    perspective: 800px;
  }
  .cf-card {
    width: 200px;
    height: 250px;
  }
  .cf-reflection {
    height: 80px;
  }
}

/* ==========================================================================
   HERALDIC CREST WATERMARKS & ATMOSPHERIC DEPTH
   Procedural watermark emblems for all 20 themes with specular backlights
   ========================================================================== */

.hero-crest-watermark {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, 85vw);
  height: min(420px, 85vw);
  pointer-events: none;
  opacity: 0.08;
  z-index: 0;
  transition: opacity 0.5s ease, color 0.5s ease;
  color: var(--gold, #c8a94a);
}

.exhibit-crest-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(320px, 75vw);
  height: min(320px, 75vw);
  pointer-events: none;
  opacity: 0.06;
  z-index: 1;
  transition: opacity 0.5s ease, color 0.5s ease;
  color: var(--gold, #c8a94a);
}

.cf-crest-watermark {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(340px, 80vw);
  height: min(340px, 80vw);
  pointer-events: none;
  opacity: 0.07;
  z-index: 1;
  transition: opacity 0.5s ease, color 0.5s ease;
  color: var(--gold, #c8a94a);
}

.crest-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 25px currentColor);
}

/* ==========================================================================
   INTERACTIVE WORLD SPECIMEN ATLAS & HISTORICAL TRADE ROUTES (STUDY WING)
   ========================================================================== */
#world-atlas-mount {
  margin-bottom: 2rem;
}

.atlas-card {
  position: relative;
  background: var(--bg-card, #131720);
  border: 1px solid var(--border-subtle, rgba(200, 169, 74, 0.2));
  border-radius: 14px;
  padding: 1.5rem;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.atlas-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

.atlas-quick-metrics {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  padding: 0.5rem 1rem;
}

.atlas-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.atlas-stat-val {
  font-family: var(--mono);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--gold-soft, #fef08a);
  line-height: 1.2;
}

.atlas-stat-lbl {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--muted, #94a3b8);
}

.atlas-controls-bar {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.atlas-cams-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  padding: 0.4rem 0.6rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-subtle, rgba(200, 169, 74, 0.2));
  border-radius: 10px;
}

.atlas-cam-btn {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  padding: 0.3rem 0.7rem !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  color: var(--ink-soft, #cbd5e1) !important;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.atlas-cam-btn:hover {
  border-color: var(--gold, #c8a94a) !important;
  background: rgba(200, 169, 74, 0.12) !important;
  color: var(--gold-soft, #fef08a) !important;
}

.atlas-cam-btn.active {
  border-color: var(--gold, #c8a94a) !important;
  background: var(--gold, #c8a94a) !important;
  color: #08090c !important;
  font-weight: 700 !important;
  box-shadow: 0 0 10px rgba(200, 169, 74, 0.4);
}

.atlas-cam-zoom-in, .atlas-cam-zoom-out, .atlas-cam-reset {
  min-width: 28px !important;
  height: 28px !important;
  padding: 0 0.5rem !important;
  border-radius: 6px !important;
  font-family: var(--mono) !important;
  font-weight: 700 !important;
}

.atlas-toolbar {
  margin-bottom: 1rem;
}

.atlas-routes-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.atlas-route-btn {
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  padding: 0.35rem 0.85rem !important;
  border-radius: 20px !important;
  border: 1px solid var(--border-subtle, rgba(200, 169, 74, 0.25)) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  color: var(--ink, #e2e8f0) !important;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.atlas-route-btn:hover {
  border-color: var(--gold, #c8a94a) !important;
  background: rgba(200, 169, 74, 0.12) !important;
  color: var(--gold-soft, #fef08a) !important;
  transform: translateY(-1px);
}

.atlas-route-btn.active {
  border-color: var(--gold, #c8a94a) !important;
  background: var(--gold, #c8a94a) !important;
  color: #08090c !important;
  font-weight: 700 !important;
  box-shadow: 0 0 14px rgba(200, 169, 74, 0.4);
}

.atlas-coords-hud {
  position: absolute;
  top: 10px;
  right: 12px;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--gold-soft, #fef08a);
  background: rgba(8, 10, 14, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(200, 169, 74, 0.3);
  border-radius: 6px;
  padding: 0.25rem 0.6rem;
  pointer-events: none;
  z-index: 5;
  letter-spacing: 0.04em;
}

.atlas-docked-dossier {
  margin-top: 1rem;
  background: linear-gradient(135deg, rgba(200, 169, 74, 0.12), rgba(14, 18, 26, 0.96));
  border: 1px solid var(--gold, #c8a94a);
  border-radius: 12px;
  padding: 1.15rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5), 0 0 20px rgba(200, 169, 74, 0.15);
  transition: all 0.25s ease;
  opacity: 1 !important;
  transform: none !important;
  animation: atlasDossierIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes atlasDossierIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.atlas-dossier-main-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
  width: 100%;
}

.atlas-dossier-col-main {
  flex: 1 1 300px;
}

.atlas-dossier-col-stats {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.atlas-dossier-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.atlas-dossier-stat-val {
  font-family: var(--mono);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gold-soft, #fef08a);
  line-height: 1.2;
}

.atlas-dossier-stat-lbl {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted, #94a3b8);
}

.atlas-dossier-col-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Specimen preview grid within docked country dossier */
.atlas-dossier-specimens-section {
  border-top: 1px solid rgba(200, 169, 74, 0.2);
  padding-top: 0.85rem;
  width: 100%;
}

.atlas-dossier-specimens-title {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold, #c8a94a);
  margin-bottom: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.atlas-dossier-specimens-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.65rem;
}

.atlas-dossier-coin-chip {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 0.5rem 0.65rem;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  text-align: left;
}

.atlas-dossier-coin-chip:hover {
  background: rgba(200, 169, 74, 0.18);
  border-color: var(--gold, #c8a94a);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.atlas-dossier-coin-thumb {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(200, 169, 74, 0.4);
  background: #000;
  flex-shrink: 0;
}

.atlas-dossier-coin-icon {
  font-size: 1.4rem;
  line-height: 1;
  flex-shrink: 0;
}

.atlas-dossier-coin-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.atlas-dossier-coin-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink, #fff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.atlas-dossier-coin-sub {
  font-size: 0.7rem;
  color: var(--muted, #94a3b8);
  font-family: var(--mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.atlas-dossier-coin-inspect {
  font-size: 0.7rem;
  color: var(--gold, #c8a94a);
  font-weight: 600;
  flex-shrink: 0;
}

/* Country quick-select dropdown */
.atlas-country-search-wrap {
  display: inline-flex;
  align-items: center;
}

.atlas-country-select {
  background: var(--bg-card, #131720);
  color: var(--ink, #fff);
  border: 1px solid var(--border-subtle, rgba(200, 169, 74, 0.3));
  border-radius: 6px;
  padding: 0.3rem 0.6rem;
  font-size: 0.78rem;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.atlas-country-select:hover, .atlas-country-select:focus {
  border-color: var(--gold, #c8a94a);
  box-shadow: 0 0 8px rgba(200, 169, 74, 0.3);
}

/* Study Wing Section Navigation Pills */
.study-nav-pills {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  padding: 0.4rem;
  background: rgba(14, 18, 26, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.study-nav-pill {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted, #94a3b8);
  border-radius: 7px;
  padding: 0.4rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.study-nav-pill:hover {
  color: var(--ink, #fff);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}

.study-nav-pill.active {
  color: #08090c;
  background: var(--gold, #c8a94a);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(200, 169, 74, 0.35);
}

/* World table search and controls */
.world-table-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  padding: 0.6rem 0.85rem;
  background: rgba(14, 18, 26, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}

.world-search-input {
  max-width: 380px;
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border-subtle, rgba(200, 169, 74, 0.25));
  color: var(--ink, #fff);
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  font-size: 0.82rem;
}

.world-search-input:focus {
  border-color: var(--gold, #c8a94a);
  box-shadow: 0 0 10px rgba(200, 169, 74, 0.3);
  outline: none;
}

.world-table-count {
  font-size: 0.78rem;
  font-family: var(--mono);
  color: var(--gold-soft, #fef08a);
  font-weight: 600;
}

.atlas-route-intel {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-subtle, rgba(200, 169, 74, 0.2));
  border-left: 3px solid var(--gold, #c8a94a);
  border-radius: 8px;
  padding: 0.85rem 1.15rem;
  margin-bottom: 1.25rem;
}

.atlas-svg-container {
  position: relative;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, rgba(18, 24, 38, 0.95) 0%, rgba(8, 10, 14, 0.98) 100%);
  border: 1px solid var(--border-subtle, rgba(200, 169, 74, 0.25));
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6);
}

html[data-atmo="conservator"] .atlas-svg-container {
  background: radial-gradient(circle at 50% 40%, #f6f1e3 0%, #ebe2ca 100%);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.08);
}

.atlas-svg {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
}

.atlas-continents {
  transition: fill 0.3s ease, stroke 0.3s ease;
}

@keyframes silverFlow {
  from {
    stroke-dashoffset: 40;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.atlas-route-path {
  animation: silverFlow 3s linear infinite;
}

@keyframes waypointPulse {
  0% {
    r: 4.5px;
    opacity: 0.8;
  }
  100% {
    r: 15px;
    opacity: 0;
  }
}

.atlas-pulse {
  animation: waypointPulse 2.2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
  pointer-events: none;
}

.atlas-node {
  cursor: pointer;
  outline: none;
  pointer-events: visiblePainted;
}

.atlas-node text {
  pointer-events: none;
  user-select: none;
}

.atlas-node .atlas-node-core {
  transition: r 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), fill 0.2s ease, stroke 0.2s ease, stroke-width 0.2s ease, filter 0.2s ease;
}

.atlas-node .atlas-node-halo {
  pointer-events: visiblePainted;
  transition: r 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), fill 0.2s ease, opacity 0.2s ease;
}

.atlas-node:hover .atlas-node-core,
.atlas-node:focus-visible .atlas-node-core {
  fill: #ffffff !important;
  stroke: var(--gold, #c8a94a) !important;
  stroke-width: 2.4px !important;
  filter: drop-shadow(0 0 6px rgba(200, 169, 74, 0.95));
}

.atlas-node:hover .atlas-node-halo,
.atlas-node:focus-visible .atlas-node-halo {
  fill: rgba(200, 169, 74, 0.45) !important;
  opacity: 1 !important;
}

.atlas-node.selected .atlas-node-core {
  fill: #ffffff !important;
  stroke: var(--gold-soft, #fef08a) !important;
  stroke-width: 2.8px !important;
  filter: drop-shadow(0 0 8px rgba(254, 240, 138, 0.85));
}

.atlas-node.selected .atlas-node-halo {
  fill: rgba(254, 240, 138, 0.38) !important;
  opacity: 1 !important;
}

.atlas-node.dimmed {
  opacity: 0.22;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.atlas-waypoint {
  cursor: pointer;
}

.atlas-footer-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
}

.atlas-hud-tooltip {
  position: fixed;
  z-index: 99999;
  pointer-events: none;
  background: rgba(10, 13, 18, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--gold, #c8a94a);
  border-radius: 10px;
  padding: 0.85rem 1.15rem;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.8), 0 0 20px rgba(200, 169, 74, 0.25);
  max-width: 300px;
}

html[data-atmo="conservator"] .atlas-hud-tooltip {
  background: rgba(253, 250, 243, 0.96);
  border-color: #8c7335;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.atlas-hud-card strong {
  color: var(--ink, #fff);
}

/* ==========================================================================
   LIVE PRECIOUS METALS SPOT TICKER (VAULT WING)
   ========================================================================== */
.spot-ticker-card {
  background: var(--bg-card, #131720);
  border: 1px solid var(--border-subtle, rgba(200, 169, 74, 0.2));
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.spot-ticker-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
}

.spot-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid #10b981;
  color: #34d399;
  border-radius: 20px;
  padding: 0.2rem 0.65rem;
}

.spot-live-dot {
  width: 7px;
  height: 7px;
  background: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 8px #10b981;
  animation: pulseLive 1.8s infinite;
}

@keyframes pulseLive {
  0% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.7; }
}

.spot-ticker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}

.spot-metal-tile {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
  border-radius: 10px;
  padding: 0.85rem 1rem;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.spot-metal-tile:hover {
  transform: translateY(-2px);
  border-color: var(--gold, #c8a94a);
}

.spot-metal-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  color: var(--muted, #94a3b8);
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.spot-metal-price {
  font-family: var(--mono);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--gold-soft, #fef08a);
  line-height: 1.2;
}

.spot-metal-delta {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  margin-top: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.spot-metal-delta.up {
  color: #34d399;
}

.spot-metal-delta.down {
  color: #f87171;
}

.spot-metal-delta.flat {
  color: var(--muted);
}

.spot-recalc-banner {
  background: linear-gradient(135deg, rgba(200, 169, 74, 0.12), rgba(0, 0, 0, 0.4));
  border: 1px solid var(--gold, #c8a94a);
  border-radius: 10px;
  padding: 0.85rem 1.15rem;
  margin-top: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

@media (max-width: 768px) {
  .atlas-card {
    padding: 1rem;
  }
  .atlas-header {
    flex-direction: column;
    align-items: stretch;
  }
  .atlas-quick-metrics {
    justify-content: space-around;
  }
  .atlas-routes-bar {
    overflow-x: auto;
    padding-bottom: 4px;
    flex-wrap: nowrap;
  }
  .atlas-route-btn {
    white-space: nowrap;
    flex-shrink: 0;
  }
  .spot-ticker-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ==========================================================================
   SPATIAL 3D NUMISMATIC MUSEUM TABLE THEATER (PHASE H)
   ========================================================================== */
.spatial-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #06070a;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: spatialFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes spatialFadeIn {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

.spatial-canvas-container {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  cursor: grab;
  touch-action: none;
}

.spatial-canvas-container:active {
  cursor: grabbing;
}

.spatial-hud-top {
  position: absolute;
  top: 1.25rem;
  left: 1.5rem;
  right: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
  z-index: 10;
  gap: 1rem;
}

.spatial-hud-info {
  pointer-events: auto;
  background: rgba(8, 10, 16, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 0.85rem 1.25rem;
  border: 1px solid var(--border-subtle, rgba(200, 169, 74, 0.28));
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  max-width: 520px;
}

.spatial-hud-badges {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
}

.spatial-hud-title {
  margin: 0 0 0.25rem;
  font-size: 1.2rem;
  font-family: var(--serif, 'Cinzel', serif);
  color: var(--gold-soft, #fef08a);
  line-height: 1.2;
}

.spatial-hud-meta {
  font-family: var(--mono, monospace);
  font-size: 0.75rem;
  color: var(--ink-soft, #cbd5e1);
}

.spatial-hud-actions {
  pointer-events: auto;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.spatial-close-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(8, 10, 16, 0.85);
  border: 1px solid var(--gold, #c8a94a);
  color: var(--gold-soft, #fef08a);
  font-size: 1.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.spatial-close-btn:hover {
  background: var(--gold, #c8a94a);
  color: #08090c;
  transform: scale(1.08);
}

.spatial-hud-bottom {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: rgba(8, 10, 16, 0.85);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 0.55rem 1.25rem;
  border: 1px solid var(--border-subtle, rgba(200, 169, 74, 0.35));
  border-radius: 36px;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.65);
  z-index: 10;
  flex-wrap: wrap;
  justify-content: center;
}

.spatial-ctrl-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.spatial-ctrl-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--mono, monospace);
}

.spatial-flip-btn {
  background: var(--gold, #c8a94a) !important;
  color: #08090c !important;
  font-weight: 700 !important;
  box-shadow: 0 0 14px rgba(200, 169, 74, 0.4) !important;
  padding: 0.35rem 0.85rem !important;
  border-radius: 18px !important;
}

.spatial-flip-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(200, 169, 74, 0.6) !important;
}

.spatial-hint-pill {
  position: absolute;
  bottom: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono, monospace);
  font-size: 0.66rem;
  color: rgba(200, 169, 74, 0.7);
  letter-spacing: 0.03em;
  pointer-events: none;
  z-index: 10;
  text-align: center;
  white-space: nowrap;
}

.spatial-qr-dialog {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100000;
}

.spatial-qr-box {
  background: #0e121a;
  border: 1px solid var(--gold, #c8a94a);
  border-radius: 16px;
  padding: 1.5rem;
  max-width: 360px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
}

@media (max-width: 768px) {
  .spatial-hud-top {
    top: 0.75rem;
    left: 0.75rem;
    right: 0.75rem;
    flex-direction: column-reverse;
  }
  .spatial-hud-info {
    max-width: 100%;
    padding: 0.65rem 0.9rem;
  }
  .spatial-hud-actions {
    align-self: flex-end;
  }
  .spatial-hud-bottom {
    bottom: 1.25rem;
    width: 92%;
    padding: 0.5rem 0.75rem;
    gap: 0.6rem;
  }
  .spatial-hint-pill {
    display: none;
  }
}

/* ==========================================================================
   GIGAPIXEL DEEP-ZOOM NUMISMATIC FORENSIC STATION (PHASE F)
   ========================================================================== */
.deepzoom-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #06080c;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: spatialFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.deepzoom-viewer-container {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  cursor: crosshair;
  background: #06080c;
}

.deepzoom-reticle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(80vw, 80vh);
  height: min(80vw, 80vh);
  pointer-events: none;
  z-index: 5;
}

.reticle-svg {
  width: 100%;
  height: 100%;
}

.deepzoom-hud-top {
  position: absolute;
  top: 1.25rem;
  left: 1.5rem;
  right: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
  z-index: 10;
  gap: 1rem;
}

.deepzoom-hud-info {
  pointer-events: auto;
  background: rgba(8, 10, 16, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 0.85rem 1.25rem;
  border: 1px solid var(--border-subtle, rgba(200, 169, 74, 0.35));
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
  max-width: 520px;
}

.deepzoom-hud-actions {
  pointer-events: auto;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.deepzoom-hud-bottom {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: rgba(8, 10, 16, 0.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 0.55rem 1.25rem;
  border: 1px solid var(--border-subtle, rgba(200, 169, 74, 0.4));
  border-radius: 36px;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.7);
  z-index: 10;
  flex-wrap: wrap;
  justify-content: center;
}

.deepzoom-ctrl-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Multi-Spectral Forensic Shaders */
.openseadragon-canvas.filter-optical {
  filter: none !important;
}

.openseadragon-canvas.filter-relief {
  filter: contrast(180%) drop-shadow(var(--deepzoom-relief-ox, 4px) var(--deepzoom-relief-oy, 4px) 2px rgba(0,0,0,0.85)) !important;
}

.openseadragon-canvas.filter-negative {
  filter: invert(100%) contrast(160%) hue-rotate(180deg) !important;
}

.openseadragon-canvas.filter-toning {
  filter: saturate(340%) contrast(145%) !important;
}

.deepzoom-variety-pin {
  position: absolute;
  pointer-events: auto;
  cursor: pointer;
  z-index: 20;
}

.pin-marker {
  font-size: 1.4rem;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.8));
  animation: pinBounce 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pinBounce {
  0% { transform: scale(0) translateY(-20px); }
  60% { transform: scale(1.2) translateY(4px); }
  100% { transform: scale(1) translateY(0); }
}

.pin-tooltip {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(8, 10, 16, 0.95);
  border: 1px solid var(--gold, #c8a94a);
  color: var(--gold-soft, #fef08a);
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  font-size: 0.72rem;
  font-family: var(--mono, monospace);
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,0.6);
}

.deepzoom-variety-pin:hover .pin-tooltip {
  display: block;
}

@media (max-width: 768px) {
  .deepzoom-hud-top {
    top: 0.75rem;
    left: 0.75rem;
    right: 0.75rem;
    flex-direction: column-reverse;
  }
  .deepzoom-hud-info {
    max-width: 100%;
    padding: 0.65rem 0.9rem;
  }
  .deepzoom-hud-actions {
    align-self: flex-end;
  }
  .deepzoom-hud-bottom {
    bottom: 1.25rem;
    width: 94%;
    padding: 0.5rem 0.75rem;
    gap: 0.6rem;
  }
}

/* =========================================================================
   WCAG 2.2 LEVEL AA & MOBILE TOUCH TARGET ERGONOMICS (TR43)
   ========================================================================= */
@media (pointer: coarse), (max-width: 768px) {
  /* Minimum interactive bounding targets for finger taps */
  .btn.small,
  .ex-ctrl-btn,
  .term-tf-btn,
  .country-chip,
  .g-mode-btn,
  .seg-btn,
  .amb-reverb-btn,
  .amb-bb-btn,
  .amb-timer-btn {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .cf-nav-btn,
  .nav-btn,
  .drawer-close,
  .sheet-close,
  .spatial-close-btn,
  .lb-close {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Safe tap hit area expansion without visual layout distortion */
  .lofi-btn,
  .lofi-collapse,
  .wings .wing,
  .drawer-bar button {
    position: relative;
  }

  .lofi-btn::after,
  .lofi-collapse::after {
    content: "";
    position: absolute;
    inset: -6px;
  }
}

/* ==========================================================================
   INTERACTIVE NUMISMATIC ALBUM & HOLE INSPECTOR (PHASE I)
   ========================================================================== */
.album-modal {
  position: fixed;
  inset: 0;
  z-index: 100050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  box-sizing: border-box;
}

.album-modal[hidden] {
  display: none !important;
}

.album-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 10, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.album-binder-shell {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1100px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: #0d121c;
  border: 1px solid rgba(200, 169, 74, 0.4);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85), 0 0 30px rgba(200, 169, 74, 0.15);
  overflow: hidden;
}

.album-binder-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.25rem 1.5rem 1rem;
  background: linear-gradient(180deg, rgba(22, 30, 46, 0.95), rgba(13, 18, 28, 0.98));
  border-bottom: 1px solid rgba(200, 169, 74, 0.25);
}

.album-header-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}

.album-title {
  margin: 0 0 0.35rem;
  font-family: var(--serif);
  font-size: 1.45rem;
  color: var(--gold-soft, #dfc06e);
  letter-spacing: -0.01em;
}

.album-series-meta {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--ink-soft, #94a3b8);
}

.album-header-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.album-controls-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0.75rem 1.5rem;
  background: rgba(9, 13, 20, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.album-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.album-tab-btn {
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--ink-soft, #94a3b8);
  cursor: pointer;
  transition: all 0.2s ease;
}

.album-tab-btn:hover {
  background: rgba(200, 169, 74, 0.12);
  border-color: rgba(200, 169, 74, 0.4);
  color: var(--gold-soft, #dfc06e);
}

.album-tab-btn.active {
  background: rgba(200, 169, 74, 0.22);
  border-color: var(--gold, #c8a94a);
  color: var(--gold-soft, #dfc06e);
}

.album-filter-pills {
  display: flex;
  gap: 0.35rem;
}

.album-filter-pill {
  font-family: var(--mono);
  font-size: 0.74rem;
  padding: 0.3rem 0.65rem;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  color: var(--ink-soft, #94a3b8);
  cursor: pointer;
  transition: all 0.18s ease;
}

.album-filter-pill:hover,
.album-filter-pill.active {
  background: rgba(200, 169, 74, 0.18);
  border-color: rgba(200, 169, 74, 0.6);
  color: var(--gold-soft, #dfc06e);
}

.album-progress-wrap {
  width: 100%;
  height: 5px;
  background: rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
}

.album-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #c8a94a, #dfc06e, #fce085);
  transition: width 0.4s ease;
  box-shadow: 0 0 10px rgba(200, 169, 74, 0.7);
}

/* ==========================================================================
   AUTHENTIC ARCHIVAL DANSCO & WHITMAN BINDER BOARD
   ========================================================================== */
.album-board {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem 1.75rem 2rem;
  background: radial-gradient(circle at center, #111724 0%, #090d15 100%);
  display: flex;
  gap: 1.25rem;
  position: relative;
}

/* Authentic Leatherette Left Spine Margin with Brass Post Screws */
.album-binder-spine-margin {
  width: 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  background: linear-gradient(90deg, rgba(8, 11, 18, 0.95), rgba(20, 26, 38, 0.95));
  border-right: 2px solid rgba(200, 169, 74, 0.35);
  border-radius: 6px;
  box-shadow: inset -2px 0 6px rgba(0, 0, 0, 0.8);
  padding: 2rem 0;
  user-select: none;
}

.spine-screw {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f7df94 0%, #c8a94a 60%, #785e1b 100%);
  border: 1px solid rgba(50, 40, 10, 0.8);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.8), inset 0 1px 1px rgba(255, 255, 255, 0.6);
  position: relative;
}

.spine-screw::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 2px;
  right: 2px;
  height: 1.5px;
  background: rgba(30, 20, 5, 0.7);
  transform: translateY(-50%) rotate(45deg);
}

.album-page-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: linear-gradient(145deg, #131a29 0%, #0c121e 100%);
  border: 1px solid rgba(200, 169, 74, 0.3);
  border-radius: 12px;
  padding: 1.25rem 1.5rem 1.75rem;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.6), 0 8px 30px rgba(0, 0, 0, 0.5);
  position: relative;
}

.album-page-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-bottom: 0.85rem;
  margin-bottom: 1.15rem;
  border-bottom: 1px solid rgba(200, 169, 74, 0.2);
}

.album-page-badge {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gold-soft, #dfc06e);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.album-page-face-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-soft, #94a3b8);
  letter-spacing: 0.05em;
}

/* Page Navigation and Flip Controls */
.album-page-nav-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(255, 255, 255, 0.04);
  padding: 0.25rem 0.65rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.album-page-indicator {
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--gold-soft, #dfc06e);
  padding: 0 0.35rem;
  min-width: 80px;
  text-align: center;
}

.album-page-btn {
  padding: 0.25rem 0.55rem;
  font-weight: 700;
}

.album-action-pills {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.album-flip-page-btn {
  background: linear-gradient(135deg, rgba(200, 169, 74, 0.2), rgba(200, 169, 74, 0.08));
  border: 1px solid var(--gold, #c8a94a);
  color: var(--gold-soft, #dfc06e);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.album-flip-page-btn:hover {
  background: rgba(200, 169, 74, 0.3);
  color: #fff;
  transform: translateY(-1px);
}

.album-slots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
  gap: 1.25rem;
  perspective: 1200px;
}

/* Tactile Milled Port Slot Card */
.album-slot-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(18, 25, 40, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1.1rem 0.75rem 0.95rem;
  text-align: center;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.2s ease, box-shadow 0.25s ease;
  position: relative;
  overflow: visible;
  outline: none;
}

.album-slot-card:hover {
  transform: translateY(-4px);
  border-color: rgba(200, 169, 74, 0.55);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6), 0 0 16px rgba(200, 169, 74, 0.2);
}

.album-slot-card.is-filled {
  border-color: rgba(200, 169, 74, 0.3);
  background: linear-gradient(180deg, rgba(20, 28, 44, 0.85), rgba(14, 20, 32, 0.85));
}

.album-slot-card.is-missing {
  background: rgba(12, 16, 24, 0.55);
  border: 1.5px dashed rgba(255, 255, 255, 0.14);
}

.album-slot-card.is-missing:hover {
  border-color: rgba(200, 169, 74, 0.45);
  background: rgba(16, 22, 34, 0.75);
}

/* 3D Flipping Aperture Disc */
.slot-aperture-wrap {
  width: 82px;
  height: 82px;
  position: relative;
  margin-bottom: 0.75rem;
  perspective: 800px;
  transform-style: preserve-3d;
}

.slot-aperture-flipper {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  border-radius: 50%;
}

.album-page-container.is-page-flipped .slot-aperture-flipper {
  transform: rotateY(180deg);
}

.slot-coin-disc-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7);
  border: 1.5px solid rgba(200, 169, 74, 0.6);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #080a0f;
}

.slot-coin-disc-face.is-rev {
  transform: rotateY(180deg);
}

.slot-coin-disc-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.slot-coin-disc-face svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Simulated Acetate Sliding Sheen */
.slot-luster-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, transparent 45%, rgba(200, 169, 74, 0.15) 100%);
  pointer-events: none;
}

.slot-hole-cavity {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #05070a 0%, #000000 95%);
  border: 1.5px dashed rgba(200, 169, 74, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 5px 12px rgba(0, 0, 0, 0.95);
  position: relative;
}

.slot-hole-target-cross {
  color: rgba(200, 169, 74, 0.4);
  font-size: 1.35rem;
  line-height: 1;
}

.slot-hole-lbl {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  color: rgba(200, 169, 74, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 2px;
}

.slot-year-tag {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink, #fff);
  margin-bottom: 0.2rem;
  line-height: 1.15;
}

.slot-denom-tag {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-soft, #94a3b8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.slot-status-pill {
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.18rem 0.5rem;
  border-radius: 12px;
  margin-top: 0.45rem;
  letter-spacing: 0.04em;
}

.slot-status-pill.filled {
  background: rgba(16, 185, 129, 0.16);
  border: 1px solid rgba(16, 185, 129, 0.45);
  color: #34d399;
}

.slot-status-pill.missing {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #f87171;
}

.slot-status-pill.key-date {
  background: rgba(200, 169, 74, 0.2);
  border: 1px solid var(--gold, #c8a94a);
  color: var(--gold-soft, #dfc06e);
}

/* ==========================================================================
   ARCHIVAL BOOKSHELF & LEATHERETTE BINDER RACK (STUDY WING)
   ========================================================================== */
.age-albums-card {
  opacity: 1 !important;
  transform: none !important;
  margin-top: 1rem;
}

.album-shelf-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(200, 169, 74, 0.2);
}

.album-shelf-views {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.album-shelf-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}

.shelf-filter-tab {
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 20px;
  color: var(--ink-soft, #94a3b8);
  cursor: pointer;
  transition: all 0.2s ease;
}

.shelf-filter-tab:hover,
.shelf-filter-tab.active {
  background: rgba(200, 169, 74, 0.18);
  border-color: var(--gold, #c8a94a);
  color: var(--gold-soft, #dfc06e);
}

.album-shelf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.35rem;
}

/* Realistic 3D Leatherette Binder Spine/Card */
.album-binder-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #0f1420;
  border: 1px solid rgba(200, 169, 74, 0.4);
  border-radius: 12px;
  padding: 1.35rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6), inset 0 0 16px rgba(0, 0, 0, 0.5);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, border-color 0.28s ease;
  cursor: pointer;
}

.album-binder-card:hover {
  transform: translateY(-5px);
  border-color: var(--gold, #c8a94a);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.75), 0 0 20px rgba(200, 169, 74, 0.25);
}

/* Stitched Perimeter Line */
.album-binder-card::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px dashed rgba(200, 169, 74, 0.25);
  border-radius: 8px;
  pointer-events: none;
}

/* Series Theme Accents */
.binder-theme-navy {
  background: linear-gradient(135deg, #0d1a33 0%, #080d19 100%);
  border-left: 6px solid #4a77c8;
}
.binder-theme-chestnut {
  background: linear-gradient(135deg, #2b1810 0%, #140b07 100%);
  border-left: 6px solid #b86e42;
}
.binder-theme-forest {
  background: linear-gradient(135deg, #0f241a 0%, #07120d 100%);
  border-left: 6px solid #3ca36e;
}
.binder-theme-copper {
  background: linear-gradient(135deg, #2b190f 0%, #150c07 100%);
  border-left: 6px solid #d97736;
}
.binder-theme-burgundy {
  background: linear-gradient(135deg, #2b0f19 0%, #15070c 100%);
  border-left: 6px solid #c23865;
}
.binder-theme-obsidian {
  background: linear-gradient(135deg, #181920 0%, #0a0a0e 100%);
  border-left: 6px solid var(--gold, #c8a94a);
}
.binder-theme-crimson {
  background: linear-gradient(135deg, #2b0c10 0%, #150608 100%);
  border-left: 6px solid #e03144;
}
.binder-theme-sage {
  background: linear-gradient(135deg, #14221a 0%, #09120e 100%);
  border-left: 6px solid #5aa87e;
}
.binder-theme-saddle {
  background: linear-gradient(135deg, #291a12 0%, #130c08 100%);
  border-left: 6px solid #a36538;
}
.binder-theme-indigo {
  background: linear-gradient(135deg, #171536 0%, #0a091a 100%);
  border-left: 6px solid #635bff;
}
.binder-theme-gold {
  background: linear-gradient(135deg, #2b2210 0%, #141007 100%);
  border-left: 6px solid #d9ab36;
}
.binder-theme-cobalt {
  background: linear-gradient(135deg, #101c33 0%, #080e1a 100%);
  border-left: 6px solid #367bd9;
}

.binder-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.binder-card-title {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gold-soft, #dfc06e);
  margin: 0 0 0.25rem;
  letter-spacing: -0.01em;
}

.binder-card-sub {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-soft, #94a3b8);
}

.binder-card-emblem {
  font-size: 1.85rem;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}

.binder-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 0.65rem 0.5rem;
  margin: 0.75rem 0;
  text-align: center;
}

.binder-stat-val {
  font-family: var(--mono);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink, #fff);
}

.binder-stat-val.gold {
  color: var(--gold-soft, #dfc06e);
}

.binder-stat-lbl {
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--ink-soft, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}

.binder-progress-line {
  margin: 0.65rem 0 1rem;
}

.binder-progress-meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.72rem;
  margin-bottom: 0.35rem;
  color: var(--ink-soft, #94a3b8);
}

.binder-track {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
}

.binder-fill {
  height: 100%;
  background: linear-gradient(90deg, #c8a94a, #dfc06e);
  border-radius: 4px;
}

.binder-actions-row {
  display: flex;
  gap: 0.65rem;
  margin-top: auto;
}

.binder-btn-open {
  flex: 1;
  background: rgba(200, 169, 74, 0.16);
  border: 1px solid var(--gold, #c8a94a);
  color: var(--gold-soft, #dfc06e);
  font-weight: 700;
}

.binder-btn-open:hover {
  background: var(--gold, #c8a94a);
  color: #08090c;
}

.binder-btn-holes {
  padding: 0.4rem 0.65rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--ink-soft, #94a3b8);
}

.binder-btn-holes:hover {
  border-color: rgba(239, 68, 68, 0.5);
  color: #f87171;
  background: rgba(239, 68, 68, 0.1);
}

/* ==========================================================================
   WANT LIST / MISSING HOLES CHECKLIST MODAL
   ========================================================================== */
.wantlist-shell {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 960px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: #0d121c;
  border: 1px solid var(--gold, #c8a94a);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.9), 0 0 30px rgba(200, 169, 74, 0.2);
  overflow: hidden;
}

.wantlist-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.25rem 1.5rem 1rem;
  background: linear-gradient(180deg, rgba(22, 30, 46, 0.95), rgba(13, 18, 28, 0.98));
  border-bottom: 1px solid rgba(200, 169, 74, 0.25);
}

.wantlist-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  background: #0a0e16;
}

.wantlist-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.wantlist-table {
  width: 100%;
  border-collapse: collapse;
}

.wantlist-table th {
  text-align: left;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--gold-soft);
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid rgba(200, 169, 74, 0.3);
  text-transform: uppercase;
}

.wantlist-table td {
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.85rem;
}

.wantlist-table tr:hover td {
  background: rgba(200, 169, 74, 0.08);
}

.wantlist-target-badge {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
}

.wantlist-target-badge.key {
  background: rgba(239, 68, 68, 0.18);
  border: 1px solid rgba(239, 68, 68, 0.5);
  color: #f87171;
}

.wantlist-target-badge.semi-key {
  background: rgba(200, 169, 74, 0.18);
  border: 1px solid rgba(200, 169, 74, 0.5);
  color: var(--gold-soft);
}

.wantlist-target-badge.standard {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--ink-soft);
}

.interactive-album-row {
  cursor: pointer;
  transition: background 0.18s ease;
}

.interactive-album-row:hover {
  background: rgba(200, 169, 74, 0.12) !important;
}

@media (max-width: 768px) {
  .album-board {
    flex-direction: column;
    padding: 1rem;
  }
  .album-binder-spine-margin {
    display: none;
  }
  .album-page-container {
    padding: 1rem;
  }
  .album-page-nav-wrap {
    width: 100%;
    justify-content: center;
  }
  .album-action-pills {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 768px) {
  .album-modal {
    padding: 0.75rem 0.75rem calc(var(--nav-h, 60px) + env(safe-area-inset-bottom, 0px) + 0.75rem) 0.75rem;
  }
  .album-binder-header {
    padding: 1rem;
    flex-direction: column;
    gap: 0.75rem;
  }
  .album-header-actions {
    width: 100%;
    justify-content: flex-end;
  }
  .album-controls-bar {
    padding: 0.65rem 1rem;
  }
  .album-board {
    padding: 1rem;
  }
  .album-slots-grid {
    grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
    gap: 0.75rem;
  }
}

/* ==========================================================================
   UNIFORM 3D FLIPPABLE SPECIMEN CARDS (GALLERY GRID & ALBUM APPARATUS)
   ========================================================================== */
.piece-card {
  overflow: visible !important;
}

.pc-flip-frame {
  width: 100%;
  padding: 0 !important;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1100px;
  -webkit-perspective: 1100px;
  overflow: visible !important;
}

.pc-3d-flipper-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.25;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  border-radius: 16px;
  perspective: 1100px;
}

.pc-3d-flipper {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
  border-radius: 16px;
}

.pc-3d-flipper-stage.is-flipped .pc-3d-flipper {
  transform: rotateY(180deg) !important;
}

.pc-side {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 16px;
}

.pc-side-obv {
  transform: rotateY(0deg);
}

.pc-side-rev {
  transform: rotateY(180deg);
}

/* Unified 3D Flip Action Badge on Gallery & Cover Flow */
.pc-flip-action-btn,
.cf-flip-badge {
  position: absolute;
  bottom: 42px;
  right: 12px;
  background: rgba(14, 17, 24, 0.88);
  border: 1px solid rgba(200, 169, 74, 0.55);
  color: var(--gold, #c8a94a);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.65);
  z-index: 25;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  pointer-events: auto;
  user-select: none;
}

.pc-flip-action-btn:hover,
.cf-flip-badge:hover {
  background: rgba(200, 169, 74, 0.3);
  border-color: #fff;
  color: #fff;
  transform: scale(1.06);
  box-shadow: 0 4px 16px rgba(200, 169, 74, 0.4);
}

/* Archival Lucite Footer Bar inside Museum Slab */
.slab-pedigree-footer {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 12px;
  background: linear-gradient(180deg, rgba(8, 12, 18, 0.75) 0%, rgba(14, 20, 32, 0.96) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0 0 14px 14px;
  font-family: var(--mono);
  z-index: 5;
  box-sizing: border-box;
  flex: 0 0 34px;
  height: 34px;
}

.slab-footer-info {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.slab-footer-price {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--gold, #c8a94a);
  letter-spacing: -0.01em;
}

.slab-footer-melt {
  font-size: 0.65rem;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.slab-footer-seal {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.slab-footer-seal-text {
  font-size: 0.52rem;
  font-weight: 700;
  color: rgba(200, 169, 74, 0.85);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Album slot tactile luster */
.slot-aperture-wrap {
  position: relative;
}

.slot-coin-disc {
  position: relative;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.8), inset 0 1px 1px rgba(255, 255, 255, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.album-slot-card:hover .slot-coin-disc {
  transform: scale(1.06);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.9), 0 0 14px rgba(200, 169, 74, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.6);
}

.slot-luster-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.25) 0%, transparent 60%);
}

/* Cover Flow clearance so controls & cards never overlap the bottom dock */
.gallery-coverflow-wrap {
  margin-bottom: 2.75rem !important;
  padding-bottom: 2.25rem !important;
}

/* ==========================================================================
   THE VAULT WING OVERHAUL — TR49
   Physical Precious Metals Reserve Strongroom
   ========================================================================== */

/* --- Phase 1: Vault Door Entry Animation --- */
.vault-door-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: radial-gradient(circle at 50% 50%,
    rgba(26, 29, 38, 0.98) 0%, rgba(14, 16, 22, 0.99) 50%, #06070a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  backdrop-filter: blur(12px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.5s;
}
.vault-door-overlay.vault-opened {
  opacity: 0;
  pointer-events: none;
}
.vault-door-circle {
  width: 440px;
  height: 440px;
  border-radius: 50%;
  position: relative;
  background: radial-gradient(circle at 35% 35%,
    #4a5062 0%, #2a2e3a 45%, #181a22 100%);
  border: 10px solid #232733;
  box-shadow:
    0 0 0 3px rgba(200, 169, 74, 0.75),
    0 0 0 16px #131620,
    0 0 0 19px rgba(200, 169, 74, 0.35),
    0 24px 80px rgba(0, 0, 0, 0.95),
    inset 0 0 60px rgba(0, 0, 0, 0.85),
    inset 0 2px 4px rgba(255, 255, 255, 0.25);
  transform: rotate(0deg);
  transition: transform 0.85s cubic-bezier(0.34, 1.4, 0.64, 1),
              opacity 0.4s ease 0.45s;
}
.vault-opened .vault-door-circle {
  transform: rotate(-55deg) scale(1.25);
  opacity: 0;
}
.vault-door-dial {
  position: absolute;
  width: 170px;
  height: 170px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #2f3444, #151720);
  border: 4px solid var(--gold, #c8a94a);
  box-shadow:
    0 0 24px rgba(200, 169, 74, 0.4),
    inset 0 0 20px rgba(0, 0, 0, 0.8);
}
.vault-door-dial::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 1px dashed rgba(200, 169, 74, 0.45);
}
.vault-door-dial::after {
  content: "";
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 42px;
  background: var(--gold-soft, #fef08a);
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(200, 169, 74, 0.8);
}
.vault-door-label {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold-soft, #fef08a);
  text-shadow: 0 0 10px rgba(200, 169, 74, 0.6);
  white-space: nowrap;
}
.vault-door-bolt {
  position: absolute;
  width: 42px;
  height: 12px;
  background: linear-gradient(180deg, #60687c, #303544);
  border: 1px solid var(--gold, #c8a94a);
  border-radius: 3px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
  transition: transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.vault-door-bolt:nth-child(1) { top: -6px; left: 50%; transform: translateX(-50%) rotate(90deg); }
.vault-door-bolt:nth-child(2) { top: 50%; right: -20px; transform: translateY(-50%) rotate(0deg); }
.vault-door-bolt:nth-child(3) { bottom: -6px; left: 50%; transform: translateX(-50%) rotate(90deg); }
.vault-door-bolt:nth-child(4) { top: 50%; left: -20px; transform: translateY(-50%) rotate(0deg); }
.vault-opened .vault-door-bolt:nth-child(1) { transform: translateX(-50%) translateY(30px); opacity: 0; }
.vault-opened .vault-door-bolt:nth-child(2) { transform: translateY(-50%) translateX(-30px); opacity: 0; }
.vault-opened .vault-door-bolt:nth-child(3) { transform: translateX(-50%) translateY(-30px); opacity: 0; }
.vault-opened .vault-door-bolt:nth-child(4) { transform: translateY(-50%) translateX(30px); opacity: 0; }

/* Vault interior laser grid overlay & dock clearance */
.vault-interior {
  position: relative;
  padding-bottom: 6rem !important;
}
.vault-interior::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 79px,
      rgba(16, 185, 129, 0.03) 80px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 79px,
      rgba(16, 185, 129, 0.03) 80px
    );
  opacity: 0;
  animation: laserFadeIn 1.5s ease 1s forwards;
}
@keyframes laserFadeIn {
  to { opacity: 1; }
}

/* --- Phase 2: 3D Bullion Stack Visualizer --- */
.vault-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 2rem 0 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(200, 169, 74, 0.15);
}
.vault-section-head h3 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--gold-soft, #fef08a);
  font-family: var(--serif);
}
.vault-section-head .vault-sec-sub {
  font-size: 0.78rem;
  color: var(--muted, #94a3b8);
  font-family: var(--mono);
}

.bullion-vault-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.bullion-lot-card {
  background: linear-gradient(145deg, #131720, #0e1016);
  border: 1px solid rgba(200, 169, 74, 0.18);
  border-radius: 14px;
  padding: 1.25rem;
  cursor: pointer;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  overflow: hidden;
  perspective: 900px;
}
.bullion-lot-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold, #c8a94a);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 24px rgba(200, 169, 74, 0.1);
}
.bullion-lot-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--card-sheen-x, 50%) var(--card-sheen-y, 50%),
    rgba(200, 169, 74, 0.06) 0%,
    transparent 60%
  );
  pointer-events: none;
  border-radius: 14px;
}

/* 3D Bullion Visuals */
.bullion-3d-visual {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  position: relative;
}

/* Silver Round Tube Stack */
.bullion-tube {
  position: relative;
  width: 80px;
  height: 100px;
}
.bullion-tube-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  height: 90px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(2px);
}
.bullion-round {
  position: absolute;
  left: 50%;
  width: 56px;
  height: 10px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #d4d8e0, #94a3b8, #b0b8c8);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.4),
    inset 0 1px 1px rgba(255, 255, 255, 0.3);
}
.bullion-round::after {
  content: ".999";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 5px;
  font-family: var(--mono);
  color: rgba(0, 0, 0, 0.35);
  letter-spacing: 0.5px;
}

/* Poured Silver / Stamped Bar */
.bullion-bar {
  position: relative;
  width: 100px;
  height: 55px;
  background: linear-gradient(135deg, #c8cdd8, #8892a4, #a0a8b8, #c0c8d4);
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.3),
    inset 0 2px 4px rgba(255, 255, 255, 0.25),
    inset 0 -2px 6px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: perspective(500px) rotateX(8deg) rotateY(-3deg);
}
.bullion-bar-stamp {
  font-family: var(--mono);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #1c2330; /* solid dark on the silver bar: >= 6:1 in every atmosphere */
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
  text-align: center;
  line-height: 1.3;
}
.bullion-bar-weight {
  font-family: var(--serif);
  font-size: 0.9rem;
  font-weight: 700;
  color: #141a26;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Gold Coin Disc */
.bullion-gold-disc {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,
    #fde68a, #eab308, #ca8a04, #a16207);
  border: 2px solid #fbbf24;
  box-shadow:
    0 4px 16px rgba(234, 179, 8, 0.3),
    0 2px 6px rgba(0, 0, 0, 0.4),
    inset 0 2px 4px rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.bullion-gold-disc::after {
  content: "Au";
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.3);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Mint Set Box */
.bullion-mint-box {
  width: 110px;
  height: 65px;
  background: linear-gradient(145deg, #1e3a5f, #0f2847);
  border: 2px solid rgba(200, 169, 74, 0.4);
  border-radius: 6px;
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.5),
    inset 0 1px 2px rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
.bullion-mint-box::before {
  content: "★";
  font-size: 1.1rem;
  color: var(--gold, #c8a94a);
  margin-bottom: 2px;
}
.bullion-mint-box-label {
  font-family: var(--mono);
  font-size: 0.45rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #ecd9a0; /* the mint box is dark in every atmosphere */
  text-align: center;
  line-height: 1.3;
}

/* Housing / Storage Drawer */
.bullion-housing {
  width: 90px;
  height: 55px;
  background: linear-gradient(145deg, #2a1f12, #1a140b);
  border: 1px solid rgba(200, 169, 74, 0.25);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bullion-housing::after {
  content: "📦";
  font-size: 1.5rem;
}

/* Stamp */
.bullion-stamp-frame {
  width: 60px;
  height: 72px;
  background: linear-gradient(145deg, #f5f0e0, #e8dfc8);
  border: 3px solid rgba(200, 169, 74, 0.5);
  border-radius: 2px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bullion-stamp-frame::after {
  content: "📮";
  font-size: 1.3rem;
}

/* Lot manifest (text below visual) */
.bullion-lot-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.bullion-lot-id {
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 700;
  background: rgba(200, 169, 74, 0.15);
  color: var(--gold-soft, #fef08a);
  border: 1px solid rgba(200, 169, 74, 0.3);
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  letter-spacing: 0.05em;
}
.bullion-lot-purity {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  letter-spacing: 0.05em;
}
.bullion-lot-purity.ag {
  background: rgba(148, 163, 184, 0.2);
  color: #cbd5e1;
  border: 1px solid rgba(148, 163, 184, 0.3);
}
.bullion-lot-purity.au {
  background: rgba(234, 179, 8, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(234, 179, 8, 0.3);
}
.bullion-lot-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink, #e2e8f0);
  line-height: 1.3;
  margin-bottom: 0.25rem;
}
.bullion-lot-desc {
  font-size: 0.75rem;
  color: var(--muted, #94a3b8);
  line-height: 1.4;
  margin-bottom: 0.6rem;
}
.bullion-lot-housing {
  font-size: 0.7rem;
  color: var(--ink-soft, #94a3b8);
  font-family: var(--mono);
  padding: 0.35rem 0.6rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  border: 1px dashed rgba(255, 255, 255, 0.08);
  margin-bottom: 0.6rem;
}

/* Live melt ticker strip */
.bullion-lot-melt-strip {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.4rem;
  padding: 0.5rem 0.65rem;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.blm-metric {
  text-align: center;
}
.blm-metric .blm-val {
  font-family: var(--mono);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--gold-soft, #fef08a);
  display: block;
}
.blm-metric .blm-lbl {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted, #94a3b8);
  display: block;
  margin-top: 0.15rem;
}

/* --- Phase 3: Sovereign Reserve Portfolio Dashboard --- */
.vault-dashboard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.vault-dash-card {
  background: linear-gradient(145deg, #131720, #0e1016);
  border: 1px solid rgba(200, 169, 74, 0.18);
  border-radius: 14px;
  padding: 1.25rem;
  position: relative;
  overflow: hidden;
}
.vault-dash-card.full-width {
  grid-column: 1 / -1;
}

/* Allocation Donut Chart */
.vault-donut-wrap {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.vault-donut {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  /* conic-gradient set dynamically via JS style attribute */
}
.vault-donut::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: var(--surface); /* opaque token disc behind the centre text */
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.25);
}
.vault-donut-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  text-align: center;
}
.vault-donut-center .donut-total {
  font-family: var(--mono);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
  display: block;
}
.vault-donut-center .donut-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.vault-donut-legend {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  flex: 1;
}
.vault-donut-legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--ink, #e2e8f0);
}
.vault-donut-legend-item .legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}
.vault-donut-legend-item .legend-pct {
  font-family: var(--mono);
  font-weight: 600;
  color: var(--gold-soft, #fef08a);
  margin-left: auto;
}

/* Physical Custody Metrics */
.vault-custody-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.vault-custody-metric {
  flex: 1;
  min-width: 140px;
  background: linear-gradient(145deg, #131720, #0e1016);
  border: 1px solid rgba(200, 169, 74, 0.15);
  border-radius: 12px;
  padding: 1rem;
  text-align: center;
}
.vault-custody-metric .vcm-val {
  font-family: var(--mono);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gold-soft, #fef08a);
  display: block;
  line-height: 1.2;
}
.vault-custody-metric .vcm-lbl {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted, #94a3b8);
  margin-top: 0.3rem;
  display: block;
}

/* Enhanced Spot Ticker (sparkline) */
.spot-sparkline-svg {
  display: block;
  width: 100%;
  height: 28px;
  margin-top: 0.35rem;
}
.spot-sparkline-svg polyline {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.spot-sparkline-svg polyline.ag-spark { stroke: #94a3b8; }
.spot-sparkline-svg polyline.au-spark { stroke: #eab308; }
.spot-sparkline-svg polyline.pt-spark { stroke: #10b981; }
.spot-sparkline-svg polyline.ratio-spark { stroke: #06b6d4; }
.spot-range-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  position: relative;
  margin-top: 0.4rem;
}
.spot-range-bar .spot-range-fill {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 2px;
}
.spot-range-bar .spot-range-marker {
  position: absolute;
  top: -3px;
  width: 3px;
  height: 10px;
  border-radius: 2px;
  background: var(--gold, #c8a94a);
}
.spot-range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.55rem;
  font-family: var(--mono);
  color: var(--muted, #94a3b8);
  margin-top: 0.2rem;
}

/* --- Phase 4: Silver Allocation Inspector --- */
.silver-stack-bar-wrap {
  padding: 0.75rem 1rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom: 1rem;
}
.silver-stack-bar {
  display: flex;
  height: 28px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
}
.silver-stack-bar .ss-segment {
  height: 100%;
  position: relative;
  cursor: pointer;
  transition: filter 0.2s ease, opacity 0.2s ease;
  min-width: 2px;
}
.silver-stack-bar .ss-segment:hover {
  filter: brightness(1.3);
  z-index: 2;
}
.silver-stack-bar .ss-segment .ss-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a1d26;
  border: 1px solid var(--gold, #c8a94a);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-size: 0.72rem;
  color: var(--ink, #e2e8f0);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 10;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}
.silver-stack-bar .ss-segment:hover .ss-tooltip {
  opacity: 1;
}

/* Sort and filter controls above table */
.vault-table-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.vault-table-search {
  flex: 1;
  min-width: 200px;
  max-width: 400px;
}
.vault-table-sort-pills {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.vault-sort-pill {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  color: var(--muted, #94a3b8);
  cursor: pointer;
  transition: all 0.15s ease;
}
.vault-sort-pill.active {
  background: rgba(200, 169, 74, 0.15);
  border-color: var(--gold, #c8a94a);
  color: var(--gold-soft, #fef08a);
}
.vault-sort-pill:hover {
  border-color: rgba(200, 169, 74, 0.4);
  color: var(--ink, #e2e8f0);
}

/* Inline ASW progress bar in table */
.asw-inline-bar {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
}
.asw-inline-bar .asw-bar-track {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  position: relative;
}
.asw-inline-bar .asw-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, #64748b, #cbd5e1);
}
.asw-inline-bar .asw-val {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink, #e2e8f0);
  white-space: nowrap;
  min-width: 55px;
  text-align: right;
}

/* --- Phase 5: Liquidation Scenario Calculator --- */
.vault-scenario-panel {
  background: linear-gradient(145deg, #141824, #0b0d13);
  border: 1px solid rgba(200, 169, 74, 0.28);
  border-radius: 14px;
  padding: 1.5rem;
  margin-top: 2rem;
  margin-bottom: 3.5rem;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
.vault-scenario-panel .sc-head-title {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-soft, #fef08a);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.vault-scenario-sliders {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.vault-scenario-slider-group label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted, #94a3b8);
  margin-bottom: 0.35rem;
}
.vault-scenario-slider-group .scenario-val {
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gold-soft, #fef08a);
  float: right;
}
.vault-scenario-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
}
.scenario-card {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  text-align: center;
  transition: border-color 0.2s ease;
}
.scenario-card.best {
  border-color: var(--gold, #c8a94a);
  box-shadow: 0 0 12px rgba(200, 169, 74, 0.1);
}
.scenario-card .sc-name {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted, #94a3b8);
  margin-bottom: 0.3rem;
}
.scenario-card .sc-amount {
  font-family: var(--mono);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gold-soft, #fef08a);
}
.scenario-card .sc-detail {
  font-size: 0.7rem;
  color: var(--ink-soft, #94a3b8);
  margin-top: 0.25rem;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .vault-dashboard {
    grid-template-columns: 1fr;
  }
  .bullion-vault-grid {
    grid-template-columns: 1fr;
  }
  .vault-donut-wrap {
    flex-direction: column;
    align-items: center;
  }
  .vault-door-circle {
    width: 280px;
    height: 280px;
  }
  .vault-custody-row {
    flex-direction: column;
  }
}


/* TR50 — Strongroom surfaces are always dark, so pin their text tokens.
   TR49 cards hardcode a midnight background but inherited --ink/--muted from
   the active atmosphere: light atmospheres (Conservator etc.) rendered dark-brown
   titles on navy. Re-scoping the tokens keeps every atmosphere legible. */
.bullion-lot-card,
.vault-dash-card,
.vault-custody-metric,
.vault-scenario-panel,
.silver-stack-bar .ss-segment .ss-tooltip {
  --ink: #f2ead8;
  --text: #f2ead8;
  --muted: #a8a08a;
  --ink-soft: #b8c2d0;
  --gold: #c8a94a;
  --gold-soft: #e8d9a8;
  --line: rgba(200, 169, 74, 0.14);
  color: var(--ink);
}

/* TR50 — Dark "instrument" panels inside light atmospheres (Conservator, Notepad, Odyssey).
   These surfaces keep a midnight background in every atmosphere, so they carry their own
   light text tokens instead of inheriting the paper theme's dark ink. */
html[data-atmo="conservator"] :is(#market-ticker-tape, #exhibit, #hero-grand, .museum-slab, #gallery-coverflow-wrap,
  .gallery-mode-switch, #vault-live-spot-ticker, .study-nav-pills, #titan-world-atlas-wrap, #atlas-coords-hud, .album-binder-card),
html[data-atmo="notepad"] :is(#market-ticker-tape, #exhibit, .museum-slab, #gallery-coverflow-wrap, .gallery-mode-switch,
  #vault-live-spot-ticker, .study-nav-pills, #titan-world-atlas-wrap, .album-binder-card, .vault-valuation-hub,
  .term-asset-btn, #term-mode-area, .tray-tab, .cf-flip-badge, .badge),
html[data-atmo="odyssey"] :is(#market-ticker-tape, #exhibit, .museum-slab, #vault-live-spot-ticker, #titan-world-atlas-wrap) {
  --ink: #f2ead8;
  --text: #f2ead8;
  --muted: #b3ab95;
  --gold: #d6b95a;
  --gold-soft: #e8d9a8;
  color: var(--ink);
}

.term-honesty { margin: 0.6rem 0 0.2rem; font-size: 0.8rem; line-height: 1.45; color: var(--muted); }

/* TR51 Hall: phone controls are grids with 44px targets instead of sideways-scrolling strips. */
@media (max-width: 640px) {
  .exhibit-view-controls { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; gap: 0.4rem; }
  .ex-ctrl-btn { min-height: 44px; font-size: 0.82rem; padding: 0.4rem 0.35rem; white-space: normal; text-align: center; }
  .term-timeframes-row { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; overflow: visible !important; }
  .term-tf-btn { min-height: 44px; font-size: 0.85rem; }
  .term-mode-btn, .term-asset-btn { min-height: 44px; font-size: 0.85rem; }
  .melt-allocation-bar .seg-label { display: none; }
}

/* Terminal: honest empty state + composition bar (real data only; no simulated history) */
.term-chart-stage.term-stage-empty { height: auto; cursor: default; margin: 0.75rem 0 0.25rem; }
.term-empty { margin: 0; padding: 0.85rem 1rem; border: 1px dashed var(--line-strong, var(--line)); border-radius: 8px; color: var(--ink-soft, var(--muted)); font-size: 0.95rem; line-height: 1.45; }
.ts-comp-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--line); margin: 0.1rem 0 0.2rem; }

/* Phase 1 reshoot list (Lab) */
.reshoot { margin: 0 0 2rem; }
.reshoot .rs-group { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card, transparent); margin: 0.6rem 0; padding: 0.2rem 1rem; }
.reshoot summary { cursor: pointer; font-size: 1.05rem; font-weight: 700; padding: 0.7rem 0; min-height: 44px; color: var(--ink); }
.reshoot .rs-n { display: inline-block; min-width: 2.2em; text-align: center; padding: 0.1em 0.5em; margin-right: 0.4rem; border-radius: 999px; background: var(--gold, #c8a94a); color: var(--on-gold, #0b0a08); }   /* was white on --gold-deep: below AA in Conservator and The Construct (theme audit 2026-10-10) */
.reshoot .rs-why { margin: 0 0 0.6rem; color: var(--muted); }
.reshoot .rs-list { list-style: none; margin: 0 0 0.8rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.3rem 1rem; }
.reshoot .rs-coin { appearance: none; background: none; border: 0; padding: 0.45rem 0.2rem; min-height: 44px; text-align: left; font: inherit; color: var(--ink); cursor: pointer; width: 100%; }
.reshoot .rs-coin:hover, .reshoot .rs-coin:focus-visible { text-decoration: underline; }
.reshoot .rs-side { font-weight: 700; color: var(--ink); }
.reshoot .rs-side::before { content: "→ "; }
.reshoot .rs-item { padding-bottom: 0.4rem; border-bottom: 1px solid var(--line); }
.reshoot .rs-settles { margin: 0 0 0.3rem 0.2rem; font-size: 0.95rem; color: var(--ink); }
.reshoot .rs-more { color: var(--muted); }
.reshoot .rs-confirm { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.2rem 0 0.3rem 0.2rem; }
.reshoot .rs-cf { appearance: none; font: inherit; font-size: 0.95rem; min-height: 44px; padding: 0.3rem 0.8rem; border-radius: 999px; cursor: pointer;
  border: 2px solid var(--ink); background: transparent; color: var(--ink); }
.reshoot .rs-cf:disabled { border-style: dashed; cursor: default; opacity: 0.85; }
.reshoot .rs-cf small { font-size: 0.8em; font-weight: 400; }
.reshoot .rs-outbox { margin: 0.6rem 0 0; padding: 0.55rem 0.8rem; border: 2px dashed var(--gold, #d4af37); border-radius: 10px; font-size: 0.95rem; }
.reshoot .rs-outbox a { color: inherit; font-weight: 700; text-decoration: underline; }
.reshoot .rs-cf:focus-visible { outline: 3px solid var(--gold, #d4af37); outline-offset: 2px; }
.reshoot .rs-finish, .reshoot .rs-first { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card, transparent); margin: 0.6rem 0 1rem; padding: 0.6rem 1rem 0.8rem; }
.reshoot .rs-finish h3, .reshoot .rs-first h3 { margin: 0.2rem 0 0.5rem; font-size: 1.15rem; color: var(--ink); }
.reshoot .rs-big { font-size: 1.15rem; margin: 0.4rem 0; color: var(--ink); }
.reshoot .rs-bar { height: 16px; border: 2px solid var(--ink); border-radius: 8px; overflow: hidden; background: transparent; }
.reshoot .rs-bar > i { display: block; height: 100%; background: var(--gold-deep, #7a5c12); }
.reshoot .rs-ol { grid-template-columns: 1fr; }
@media print {
  body.print-reshoot * { visibility: hidden !important; }
  body.print-reshoot #reshoot, body.print-reshoot #reshoot * { visibility: visible !important; color: #000 !important; background: none !important; }
  body.print-reshoot #reshoot { position: absolute; left: 0; top: 0; width: 100%; }
  body.print-reshoot #rs-print { display: none !important; }
}

/* Hall trust line + question count (fix list #75, #52) */
.hero-trust { margin: 0.35rem 0 0.6rem; display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; justify-content: center; font-size: 1rem; }
.hero-trust .ht-link { display: inline-block; min-height: 44px; padding: 0.55rem 0.9rem; line-height: 1.3; border-radius: 22px; border: 1px solid var(--line); text-align: center;
  color: var(--ink); text-decoration: none; background: color-mix(in srgb, var(--bg, #000) 70%, transparent); }
.hero-trust .ht-q { border-color: var(--gold, #d4af37); font-weight: 700; }
.hero-trust .ht-link:hover, .hero-trust .ht-link:focus-visible { text-decoration: underline; }

/* One motion setting (fix list #59, js/app-motion.js). Off = nothing moves; the reduced-motion rules are also copied under
   html[data-motion=calm|off] at runtime. Durations go to ~0 instead of "none" so an animation's end state (fill: forwards) still applies. */
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after {
  animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
}
html[data-motion="off"] #titan-fx { display: none !important; }

/* GRK-A-02: pinch-zoom is allowed again (index.html viewport). iOS zooms into any focused field whose text is under 16 px, so the three
   small fields on phones get 16 px (the size every other field already has). */
@media (pointer: coarse) { #flip-country, #flip-sort, #world-table-search { font-size: 16px; } }