:root {
  --bg: #070b14;
  --bg-2: #0f1727;
  --bg-3: #172238;
  --bg-elevated: #1d2943;
  --line: #2b3b59;
  --ink: #f5f7ff;
  --ink-2: #bac5d9;
  --ink-3: #8997b0;
  --accent: #82a5ff;
  --accent-strong: #547cff;
  --gold: #f6c85f;
  --on-accent: #07111f;
  --ok: #3ed5a3;
  --warn: #f6c85f;
  --bad: #ff7588;
  --miss: #ef4444;
  --radius: 16px;
  --card-aspect: 63 / 88;
  color-scheme: dark;
}

/* Light theme: same tokens, different values. Everything downstream is
   painted in tokens, so this block is the entire theme. */
html[data-theme="light"] {
  --bg: #f3f6fb;
  --bg-2: #ffffff;
  --bg-3: #e8eef8;
  --bg-elevated: #ffffff;
  --line: #ced9e9;
  --ink: #101828;
  --ink-2: #40516b;
  --ink-3: #5f6f87;
  --accent: #315ee7;
  --accent-strong: #234cc9;
  --gold: #9a6800;
  --on-accent: #ffffff;
  color-scheme: light;
}

* { box-sizing: border-box; }

/* Every app surface has to stay inside the device viewport. Long select
   options, flex children, and grid tracks otherwise use their min-content
   width and create a sideways-scrolling page on narrow iPhones. */
html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
img, video, canvas, svg { max-width: 100%; }

/*
 * The `hidden` attribute is only a UA rule (`[hidden] { display: none }`), so
 * ANY author rule that sets `display` silently beats it. That is how the busy
 * overlay — `.busy { display: flex }` — stayed on screen permanently while
 * reporting itself as hidden: an invisible full-page layer at z-index 70
 * eating every click, which reads exactly like an app stuck loading forever.
 *
 * Make hidden mean hidden, everywhere, once.
 */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 ui-sans-serif, "SF Pro Text", "Avenir Next", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

h1, h2, h3 { margin: 0; font-family: ui-rounded, "SF Pro Rounded", "Avenir Next", "Segoe UI Variable Display", ui-sans-serif, system-ui, sans-serif; font-weight: 750; letter-spacing: -0.025em; }
h1 { font-size: 19px; }
h2 { font-size: 15px; }
p { margin: 0; }

.muted { color: var(--ink-2); }
.hint { color: var(--ink-3); font-size: 13px; margin-top: 6px; }
.spacer { flex: 1; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---------------------------------------------------------------- topbar */

.topbar {
  position: sticky;
  top: 0;
  /* Above the guide's sticky toolbar/nav (45/44): the set dropdown lives in
     here, and the Export bar must never paint over an open set list. */
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding:
    calc(6px + env(safe-area-inset-top, 0px))
    max(14px, env(safe-area-inset-right, 0px))
    6px
    max(14px, env(safe-area-inset-left, 0px));
  background: color-mix(in srgb, var(--bg-2) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar > *, main, .panel, .card, .toolbar > * { min-width: 0; }

.brand { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.brand h1 {
  color: #ffcb05;
  font-size: 16px;
  letter-spacing: .01em;
  -webkit-text-stroke: .3px #2a5bce;
  text-shadow: 0 1px 0 #173b82, 0 0 9px rgba(42, 91, 206, .42);
}
.brand:hover h1 { color: #ffe36a; }
.logo { width: 30px; height: 30px; flex: none; border-radius: 7px; }
.sub { color: var(--ink-2); font-size: 11px; }

.progress-block { min-width: 160px; margin-left: auto; }
.top-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.icon-btn { padding: 5px 9px; font-size: 15px; line-height: 1; }
.account-button { display: flex; align-items: center; gap: 7px; max-width: 190px; }
.account-button img { width: 22px; height: 22px; border-radius: 50%; }
.account-button span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-glyph { position: relative; width: 18px; height: 18px; flex: none; }
.account-glyph::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 6px;
  width: 6px;
  height: 6px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}
.account-glyph::after {
  content: '';
  position: absolute;
  bottom: 1px;
  left: 3px;
  width: 12px;
  height: 7px;
  border: 1.5px solid currentColor;
  border-radius: 8px 8px 3px 3px;
}
.account-button[data-sync="saving"]::after,
.account-button[data-sync="saved"]::after,
.account-button[data-sync="error"]::after,
.account-button[data-sync="conflict"]::after {
  content: '';
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--ink-3);
}
.account-button[data-sync="saving"]::after { background: var(--warn); animation: account-pulse 0.9s infinite alternate; }
.account-button[data-sync="saved"]::after { background: var(--ok); }
.account-button[data-sync="error"]::after,
.account-button[data-sync="conflict"]::after { background: var(--bad); }
@keyframes account-pulse { to { opacity: 0.35; } }
.progress-nums { font-size: 13px; display: flex; align-items: baseline; gap: 4px; }
.progress-nums strong { font-size: 17px; }
.progress-nums span:not(.muted) { color: var(--ink-2); }
.bar { height: 6px; border-radius: 99px; background: var(--bg-3); overflow: hidden; margin-top: 5px; }
.bar-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--ok)); transition: width 0.3s; }

.tabs { display: flex; gap: 2px; }
.tab {
  padding: 6px 11px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.tab:hover { color: var(--ink); background: var(--bg-3); }
.tab.is-active { color: var(--ink); background: var(--bg-3); border-color: var(--line); }

/* ----------------------------------------------------------------- shell */

main { padding: 20px; max-width: 1400px; margin: 0 auto; }
/* Nothing shows until boot has restored the saved tab — no flash of the
   wrong panel while storage and the cloud copy load. */
main[data-booting] { visibility: hidden; }
.panel { display: none; }
.panel.is-active { display: block; }

/* ------------------------------------------------------------ home page */

body[data-view="home"] .progress-block,
body[data-view="home"] .set-picker { display: none; }
body[data-view="home"] .top-actions { margin-left: auto; }

.home-panel { padding-top: clamp(8px, 2vw, 30px); }
.home-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(430px, 1.1fr);
  align-items: center;
  gap: clamp(34px, 5vw, 78px);
  min-height: min(720px, calc(100vh - 128px));
  padding: clamp(34px, 5vw, 72px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background:
    radial-gradient(circle at 82% 20%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 34%),
    radial-gradient(circle at 12% 95%, color-mix(in srgb, var(--ok) 12%, transparent), transparent 35%),
    var(--bg-2);
}
.home-hero::before {
  content: '';
  position: absolute;
  width: 360px;
  height: 360px;
  right: -170px;
  top: -190px;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 54px color-mix(in srgb, var(--accent) 4%, transparent), 0 0 0 108px color-mix(in srgb, var(--accent) 3%, transparent);
}
.home-copy, .home-showcase { position: relative; z-index: 1; min-width: 0; }
.home-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 16px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.home-kicker span { width: 24px; height: 2px; border-radius: 2px; background: currentColor; }
.home-copy h2 {
  max-width: 680px;
  font-size: clamp(42px, 5.2vw, 74px);
  line-height: 0.99;
  letter-spacing: -0.055em;
}
.home-copy h2 span { color: color-mix(in srgb, var(--ink) 46%, var(--accent)); }
.home-lead { max-width: 650px; margin-top: 24px; color: var(--ink-2); font-size: clamp(16px, 1.6vw, 20px); line-height: 1.65; }
.home-benefits { display: flex; flex-wrap: wrap; gap: 8px; margin: 19px 0 0; padding: 0; list-style: none; }
.home-benefits li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--accent) 7%, var(--bg-2)); color: var(--ink-2); font-size: 11.5px; font-weight: 700; }
.home-benefits li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
.home-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.home-actions .btn { min-height: 48px; padding-inline: 20px; justify-content: center; }
.home-primary::after { content: '→'; font-size: 18px; transition: transform 0.18s ease; }
.home-primary:hover::after { transform: translateX(3px); }
.home-fine { max-width: 560px; margin-top: 14px; color: var(--ink-3); font-size: 12px; line-height: 1.5; }
.home-fine strong { color: var(--ink-2); }

.home-showcase { min-height: 520px; perspective: 1100px; }
.home-market-preview,
.home-binder-preview {
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .28);
  backdrop-filter: blur(18px);
}
.home-market-preview {
  position: relative;
  z-index: 2;
  width: min(100%, 600px);
  margin-left: auto;
  padding: 20px;
  border-radius: 22px;
  transform: rotate(1deg) translateZ(0);
  animation: home-market-enter .65s cubic-bezier(.2,.75,.2,1) both, home-market-float 6s 1s ease-in-out infinite;
}
.home-preview-top,
.home-market-foot,
.home-binder-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.home-preview-top > div { display: flex; flex-direction: column; }
.home-preview-top span { color: var(--ink-3); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }
.home-preview-top strong { margin-top: 2px; font-size: 20px; }
.home-live-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 999px; background: color-mix(in srgb, var(--ok) 13%, var(--bg-3)); color: var(--ok) !important; font-weight: 750; white-space: nowrap; }
.home-live-badge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 14%, transparent); animation: home-live-pulse 2.2s ease-out infinite; }
.home-market-list { display: grid; gap: 7px; margin: 18px 0; }
.home-market-row { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--bg-2) 92%, transparent); }
.home-market-row > span { display: flex; min-width: 0; flex-direction: column; }
.home-market-row strong { overflow: hidden; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.home-market-row small,
.home-market-foot small { overflow: hidden; color: var(--ink-3); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.home-market-row b { font-size: 13px; font-variant-numeric: tabular-nums; }
.home-card-mini { display: block; width: 46px; aspect-ratio: var(--card-aspect); object-fit: cover; border: 1px solid color-mix(in srgb, #fff 22%, transparent); border-radius: 5px; background: var(--bg-3); box-shadow: 0 6px 15px rgba(0,0,0,.32); }
.home-market-foot { padding-top: 15px; border-top: 1px solid var(--line); }
.home-market-foot > span { display: flex; flex-direction: column; }
.home-market-foot strong { margin-top: 2px; font-size: 20px; font-variant-numeric: tabular-nums; }
.home-market-foot > small { text-align: right; }

.home-binder-preview {
  position: absolute;
  z-index: 3;
  right: -10px;
  bottom: -12px;
  width: min(60%, 330px);
  padding: 15px;
  border-radius: 18px;
  transform: rotate(-2.2deg) translateZ(0);
  box-shadow: 0 34px 90px rgba(0, 0, 0, .38), 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent);
  animation: home-binder-enter .75s .15s cubic-bezier(.2,.75,.2,1) both, home-binder-float 7s 1.2s ease-in-out infinite;
}
.home-binder-head > span { display: flex; min-width: 0; flex-direction: column; }
.home-binder-head small { color: var(--accent); font-size: 9px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.home-binder-head strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.home-binder-head > b { flex: none; padding: 5px 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 15%, var(--bg-3)); color: var(--accent); font-size: 10px; }
.home-binder-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 12px 0 9px; padding: 8px; border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--bg-3) 74%, transparent); }
.home-binder-grid > span { position: relative; display: grid; place-items: center; aspect-ratio: var(--card-aspect); overflow: hidden; border: 1px solid color-mix(in srgb, var(--ink-3) 24%, var(--line)); border-radius: 5px; background: var(--bg); }
.home-binder-grid img { display: block; width: 100%; height: 100%; object-fit: cover; }
.home-binder-grid .is-empty { border-style: dashed; }
.home-binder-grid .is-empty i { width: 22%; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 50%; }
.home-binder-preview > p { color: var(--ink-3); font-size: 10px; text-align: center; }

@keyframes home-market-enter { from { opacity: 0; transform: translateY(18px) rotate(2.5deg) scale(.97); } }
@keyframes home-binder-enter { from { opacity: 0; transform: translate(20px, 22px) rotate(-1deg) scale(.94); } }
@keyframes home-market-float { 50% { transform: translateY(-5px) rotate(.5deg); } }
@keyframes home-binder-float { 50% { transform: translateY(6px) rotate(-2.4deg); } }
@keyframes home-live-pulse { 70%, 100% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--ok) 0%, transparent); } }

.home-value-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 18px 0 70px; }
.home-value-grid article { padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-2); }
.home-feature-icon { display: grid; place-items: center; width: 37px; height: 37px; margin-bottom: 20px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 10px; color: var(--accent); font-size: 11px; font-weight: 800; }
.home-value-grid h3 { font-size: 16px; }
.home-value-grid p { margin-top: 8px; color: var(--ink-2); font-size: 13.5px; line-height: 1.65; }

.home-start { display: grid; grid-template-columns: minmax(220px, .75fr) minmax(340px, 1.25fr); gap: clamp(30px, 7vw, 100px); align-items: start; max-width: 1120px; margin: 0 auto; padding: 10px 20px 70px; }
.home-start > div h2 { max-width: 390px; font-size: clamp(28px, 4vw, 46px); line-height: 1.08; letter-spacing: -0.04em; }
.home-steps { grid-row: span 2; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.home-steps li { display: flex; gap: 15px; padding: 19px 0; border-top: 1px solid var(--line); }
.home-steps li:last-child { border-bottom: 1px solid var(--line); }
.home-steps b { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 16%, var(--bg-3)); color: var(--accent); font-size: 12px; }
.home-steps span { display: flex; flex-direction: column; }
.home-steps strong { font-size: 14px; }
.home-steps small { margin-top: 3px; color: var(--ink-2); font-size: 12.5px; }
.home-start > .btn { align-self: start; justify-self: start; min-height: 45px; }

@media (max-width: 900px) {
  .home-hero { grid-template-columns: 1fr; min-height: 0; }
  .home-copy { max-width: 720px; }
  .home-showcase { width: min(680px, 100%); min-height: 500px; }
  .home-market-preview { margin-left: 0; }
}
@media (max-width: 680px) {
  body[data-view="home"] .top-actions { margin-left: 0; }
  .home-panel { padding-top: 0; }
  .home-hero { gap: 28px; padding: 34px 20px; border-radius: 18px; }
  .home-copy h2 { font-size: clamp(38px, 12vw, 56px); }
  .home-lead { margin-top: 18px; font-size: 16px; }
  .home-actions { margin-top: 23px; }
  .home-actions .btn { width: 100%; }
  .home-showcase { min-height: 480px; }
  .home-market-preview { padding: 14px; transform: none; animation: home-market-enter .55s ease-out both; }
  .home-binder-preview { right: 0; bottom: 0; width: min(64%, 280px); animation: home-binder-enter .65s .1s ease-out both; }
  .home-market-row { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 9px; padding: 7px; }
  .home-card-mini { width: 42px; }
  .home-market-row small { max-width: 155px; }
  .home-value-grid { grid-template-columns: 1fr; margin-bottom: 50px; }
  .home-value-grid article { padding: 20px; }
  .home-start { grid-template-columns: 1fr; padding: 0 2px 50px; }
  .home-steps { grid-row: auto; }
}

@media (max-width: 430px) {
  .home-showcase { min-height: 465px; }
  .home-preview-top strong { font-size: 17px; }
  .home-live-badge { padding-inline: 7px; font-size: 9px !important; }
  .home-market-row b { font-size: 12px; }
  .home-binder-preview { width: 68%; }
}

@media (prefers-reduced-motion: reduce) {
  .home-market-preview,
  .home-binder-preview,
  .home-live-badge i { animation: none; }
}

/* ------------------------------------------------ portfolio dashboard */

.home-dashboard { margin: 32px 0 18px; }
.portfolio-section-head,
.collection-view-head,
.portfolio-card-head,
.holdings-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}
.portfolio-section-head { margin: 0 2px 18px; }
.portfolio-section-head h2,
.collection-view-head h2 { font-size: clamp(26px, 3.4vw, 42px); letter-spacing: -.035em; }
.portfolio-section-head .home-kicker,
.collection-view-head .home-kicker { margin-bottom: 5px; }
.collection-view-head { align-items: center; margin-bottom: 18px; }

.portfolio-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.portfolio-kpis article,
.portfolio-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--bg-2);
}
.portfolio-kpis article { display: flex; flex-direction: column; }
.portfolio-kpis small,
.portfolio-card-head small,
.portfolio-leaders small,
.holdings-toolbar small {
  color: var(--ink-3);
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.portfolio-kpis strong { margin: 6px 0 2px; font-size: clamp(21px, 2.6vw, 31px); line-height: 1.1; font-variant-numeric: tabular-nums; }
.portfolio-kpis span { overflow: hidden; color: var(--ink-2); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.is-gain { color: var(--ok) !important; }
.is-loss { color: var(--bad) !important; }
.is-flat { color: var(--ink-2) !important; }

.portfolio-home-grid,
.portfolio-overview-grid,
.portfolio-movers-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, .75fr);
  gap: 12px;
  margin-bottom: 12px;
}
.portfolio-movers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.portfolio-card { margin: 0; }
.portfolio-card-head { align-items: flex-start; margin-bottom: 12px; }
.portfolio-card-head h3 { margin-top: 2px; font-size: 17px; }
.portfolio-card-head > span { color: var(--ink-3); font-size: 11px; }
.portfolio-chart { display: block; width: 100%; height: 170px; overflow: visible; color: var(--accent); }
.portfolio-chart-line { fill: none; stroke: currentColor; stroke-width: 3; vector-effect: non-scaling-stroke; }
.portfolio-chart-area { fill: url(#portfolioArea); stroke: none; }
.portfolio-chart-dot { fill: var(--bg-2); stroke: currentColor; stroke-width: 3; vector-effect: non-scaling-stroke; }
.portfolio-chart-empty { display: grid; place-items: center; min-height: 170px; border: 1px dashed var(--line); border-radius: 11px; color: var(--ink-3); font-size: 13px; }
.portfolio-chart-note { margin-top: 9px; color: var(--ink-3); font-size: 11.5px; }

.allocation-list { display: grid; gap: 13px; }
.allocation-list > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.allocation-list > div > span { display: grid; flex: 1; min-width: 0; }
.allocation-list b { grid-area: 1 / 1; overflow: hidden; padding: 5px 8px; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; z-index: 1; }
.allocation-list i { grid-area: 1 / 1; width: max(5px, var(--share)); max-width: 100%; border-radius: 6px; background: color-mix(in srgb, var(--accent) 20%, var(--bg-3)); }
.allocation-list strong { flex: none; font-size: 12px; font-variant-numeric: tabular-nums; }
.portfolio-empty-copy { padding: 12px 2px; color: var(--ink-3); font-size: 12.5px; line-height: 1.55; }

.mover-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.mover-row img { width: 34px; aspect-ratio: var(--card-aspect); border-radius: 4px; object-fit: cover; }
.mover-row > span { display: flex; min-width: 0; flex-direction: column; }
.mover-row > span:last-child { align-items: flex-end; }
.mover-row strong { overflow: hidden; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.mover-row small { overflow: hidden; color: var(--ink-3); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }

.collection-kpis { margin-bottom: 12px; }
.portfolio-leaders { display: grid; align-content: center; gap: 20px; }
.portfolio-leaders > div { display: flex; flex-direction: column; }
.portfolio-leaders strong { margin: 4px 0 2px; overflow: hidden; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
.portfolio-leaders span { color: var(--ink-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.holdings-card { padding: 0; overflow: hidden; }
.holdings-toolbar { align-items: center; padding: 17px 18px; }
.holdings-toolbar h3 { margin-top: 2px; font-size: 18px; }
.holdings-controls { display: flex; align-items: center; gap: 8px; min-width: 0; }
.holdings-controls input[type="search"],
.holdings-controls select,
.portfolio-date,
.money-input {
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-3);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}
.holdings-controls input[type="search"] { width: min(220px, 30vw); padding: 8px 10px; }
.holdings-controls select { padding: 8px 10px; }
.holdings-table-wrap { overflow-x: auto; overscroll-behavior-x: contain; }
.holdings-table { min-width: 920px; font-size: 12px; }
.holdings-table th { padding: 9px 10px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 10px; font-weight: 750; letter-spacing: .05em; text-align: left; text-transform: uppercase; }
.holdings-table td { padding: 9px 10px; border-top: 1px solid var(--line); vertical-align: middle; }
.holdings-table td > strong,
.holdings-table td > small { display: block; font-variant-numeric: tabular-nums; }
.holdings-table td > small { color: var(--ink-3); font-size: 10px; }
.holding-card-cell { display: flex; align-items: center; gap: 9px; min-width: 240px; }
.holding-card-cell img { width: 40px; aspect-ratio: var(--card-aspect); border-radius: 4px; object-fit: cover; flex: none; }
.holding-card-cell span { display: flex; min-width: 0; flex-direction: column; }
.holding-card-cell strong,
.holding-card-cell small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.holding-card-cell small { color: var(--ink-3); font-size: 10.5px; }
.portfolio-number { width: 70px !important; padding: 6px 7px !important; font-size: 12px !important; }
.money-input { display: inline-flex; align-items: center; padding-left: 7px; color: var(--ink-3); }
.money-input input { width: 74px !important; border: 0 !important; background: transparent !important; }
.portfolio-date { width: 128px; padding: 6px 7px; }
.holding-remove { color: var(--ink-3); }
.holding-remove:hover { color: var(--bad); }
.holdings-more { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 11.5px; }
.portfolio-zero { padding: 50px 20px; border-top: 1px solid var(--line); text-align: center; }
.portfolio-zero h3 { font-size: 20px; }
.portfolio-zero p { max-width: 520px; margin: 7px auto 17px; color: var(--ink-2); }

@media (max-width: 900px) {
  .portfolio-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portfolio-home-grid,
  .portfolio-overview-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .home-dashboard { margin-top: 24px; }
  .portfolio-section-head,
  .collection-view-head,
  .holdings-toolbar { align-items: stretch; flex-direction: column; }
  .portfolio-section-head .btn { width: 100%; justify-content: center; }
  .collection-view-head .seg { width: 100%; }
  .collection-view-head .seg button { flex: 1; }
  .portfolio-kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
  .portfolio-kpis article { padding: 14px; }
  .portfolio-kpis strong { font-size: 21px; }
  .portfolio-kpis span { white-space: normal; }
  .portfolio-movers-grid { grid-template-columns: 1fr; }
  .portfolio-card { padding: 14px; }
  .portfolio-chart { height: 140px; }
  .holdings-controls { align-items: stretch; flex-direction: column; width: 100%; }
  .holdings-controls input[type="search"],
  .holdings-controls select,
  .holdings-controls .btn { width: 100%; }
  .holdings-table-wrap { overflow: visible; }
  .holdings-table { min-width: 0; }
  .holdings-table thead { display: none; }
  .holdings-table,
  .holdings-table tbody,
  .holdings-table tr,
  .holdings-table td { display: block; width: 100%; }
  .holdings-table tr { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px; border-top: 1px solid var(--line); }
  .holdings-table td { position: relative; min-width: 0; padding: 10px 8px 4px; border: 0; }
  .holdings-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 3px; color: var(--ink-3); font-size: 9px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
  .holding-card-cell { grid-column: 1 / -1; padding: 0 8px 10px !important; }
  .holding-card-cell img { width: 50px; }
  .holdings-table td:last-child { position: absolute; right: 8px; margin-top: -1px; width: auto; }
}

@media (max-width: 390px) {
  .portfolio-kpis { grid-template-columns: 1fr; }
}

.card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}
.card > h2 { margin-bottom: 12px; }
.card summary { cursor: pointer; list-style: none; }
.card summary::-webkit-details-marker { display: none; }
.card summary h2 { display: inline; }
.card summary::before { content: "▸ "; color: var(--ink-3); }
details[open] > summary::before { content: "▾ "; }
details[open] > summary { margin-bottom: 12px; }
.planner { overflow-x: auto; overscroll-behavior-x: contain; }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.grid-2 > .card { margin: 0; }

/* --------------------------------------------------------------- inputs */

.field { margin-bottom: 14px; }
.field > label { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 6px; }
.field.inline { display: flex; align-items: center; gap: 8px; margin: 0; }
.field.inline > label { margin: 0; white-space: nowrap; }

select, input[type="number"], input[type="text"] {
  background: var(--bg-3);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 8px;
  padding: 7px 10px;
  font: inherit;
  font-size: 14px;
  max-width: 100%;
}
input[type="number"] { width: 78px; }
input[type="range"] { width: 100%; accent-color: var(--accent); }
output { color: var(--ink); font-variant-numeric: tabular-nums; float: right; }

.check { display: flex; align-items: center; gap: 9px; padding: 7px 0; cursor: pointer; font-size: 14px; }
.check.inline { padding: 0; }

.reverse-mode-toggle {
  gap: 8px;
  padding: 7px 9px !important;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--bg-3) 82%, transparent);
  transition: border-color 120ms ease, background 120ms ease;
}
.reverse-mode-toggle > span { display: grid; gap: 1px; }
.reverse-mode-toggle b { font-size: 12px; line-height: 1.2; }
.reverse-mode-toggle small { color: var(--ink-3); font-size: 10px; line-height: 1.25; }
.reverse-mode-toggle.is-active {
  border-color: color-mix(in srgb, var(--warn) 72%, var(--line));
  background: color-mix(in srgb, var(--warn) 13%, var(--bg-3));
}
.reverse-mode-toggle.is-active b { color: var(--warn); }
.check input { width: 16px; height: 16px; accent-color: var(--accent); }
.check em { color: var(--ink-3); font-style: normal; font-size: 12.5px; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips button {
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg-3);
  color: var(--ink-2);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.chips button em { font-style: normal; color: var(--ink-3); font-size: 12px; margin-left: 3px; }
.chips button.is-active { border-color: var(--accent); color: var(--ink); background: color-mix(in srgb, var(--accent) 18%, var(--bg-3)); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg-3);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.btn:hover { border-color: var(--ink-3); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #0b1020; font-weight: 600; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: none; }
.btn.danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 58%, var(--line)); }
.btn.danger:hover { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.seg { display: flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.seg button {
  padding: 8px 14px; border: 0; background: var(--bg-3); color: var(--ink-2);
  font: inherit; font-size: 14px; cursor: pointer;
}
.seg button.is-active { background: var(--accent); color: #0b1020; font-weight: 600; }

.toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }

.totals { display: flex; gap: 20px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.totals div { display: flex; flex-direction: column; }
.totals strong { font-size: 20px; }
.totals span { font-size: 12px; color: var(--ink-3); }

.steps { margin: 0 0 14px; padding-left: 20px; color: var(--ink-2); font-size: 14px; }
.steps li { margin-bottom: 4px; }

.danger-zone { border-color: color-mix(in srgb, var(--bad) 30%, var(--line)); }
.bridge { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 7%, var(--bg-2)); }
.bridge .toolbar { margin: 0; align-items: center; }
.offline-assets { border-color: color-mix(in srgb, var(--accent) 38%, var(--line)); }
.offline-assets-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.offline-assets-head h2 { margin-bottom: 4px; }
.offline-assets-head .hint { margin: 0 0 12px; }
.offline-badge { flex: none; padding: 4px 9px; border-radius: 999px; color: var(--ink-2); background: var(--bg-3); font-size: 11px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.offline-badge.is-ready { color: var(--good); background: color-mix(in srgb, var(--good) 13%, var(--bg-3)); }
.offline-assets progress { width: 100%; height: 9px; margin: 1px 0 5px; accent-color: var(--accent); }
.offline-assets .offline-library { margin-top: 12px; }

/* ----------------------------------------------------------- binder page */

.pages { display: flex; flex-direction: column; gap: 22px; }

/* One opening of the binder at a time, styled like the thing on your desk. */
.book {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  min-width: 0;
  overflow-anchor: none;
}

.guide-nav {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 2px 0 16px;
}
.guide-nav .nav-turn {
  font-size: 17px;
  padding: 10px 20px;
  touch-action: manipulation;
  user-select: none;
}
.guide-nav .nav-mid { text-align: center; min-width: 230px; }
.guide-nav .nav-mid strong { display: block; font-size: 15px; }
.guide-nav .nav-mid span { font-size: 12px; color: var(--ink-3); }

.spread {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  background: linear-gradient(155deg, #2c2216, #181008);
  border: 1px solid #46382a;
  border-radius: 18px;
  padding: 22px;
  position: relative;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  flex: 1;
  max-width: 1380px;
}
.spread.single { grid-template-columns: 1fr; max-width: 745px; }

/* Spine shadow and rings down the middle of an open binder. */
.spread:not(.single)::before {
  content: ""; position: absolute; top: 14px; bottom: 14px; left: 50%; width: 4px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.7) 12%, rgba(0, 0, 0, 0.7) 88%, transparent);
  border-radius: 2px;
}
.spread:not(.single)::after {
  content: ""; position: absolute; top: 6%; bottom: 6%; left: 50%; width: 26px;
  transform: translateX(-50%);
  background-image: radial-gradient(circle, #d3d7de 0 4px, #71767f 4px 5.5px, transparent 6.5px);
  background-size: 26px 25%;
  background-repeat: repeat-y;
  background-position: center top;
  opacity: 0.9;
  pointer-events: none;
}

.spread .binder-page {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
}

.binder-page { min-width: 0; }
/* The cover facing page 1 (or the back cover) — present, but clearly not pockets. */
.ghost-page {
  border-style: dashed; opacity: 0.35;
  display: flex; align-items: center; justify-content: center;
}
.ghost-page span { font-size: 11px; color: var(--ink-3); letter-spacing: 0.1em; text-transform: uppercase; }
.page-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12.5px; color: var(--ink-3); margin-bottom: 8px;
}
.page-head strong { color: var(--ink-2); font-size: 13px; }
.section-tag {
  font-style: normal; font-weight: 700; font-size: 10px;
  padding: 2px 7px; margin-left: 6px; border-radius: 99px; vertical-align: 1px;
  background: color-mix(in srgb, var(--accent) 25%, transparent); color: var(--accent);
}

.pockets { display: grid; gap: 7px; }

.pocket {
  position: relative;
  aspect-ratio: var(--card-aspect);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-3);
  border: 1px solid var(--line);
}
.pocket img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pocket.blank { border-style: dashed; opacity: 0.3; }
.pocket .no {
  position: absolute; bottom: 0; left: 0; z-index: 2;
  padding: 2px 6px; font-size: 10px; color: #fff;
  background: rgba(0, 0, 0, 0.72); border-top-right-radius: 6px;
  font-variant-numeric: tabular-nums;
}
.pocket .rev { position: absolute; top: 0; right: 0; padding: 2px 5px; font-size: 9px; background: color-mix(in srgb, var(--accent) 85%, black); color: #0b1020; font-weight: 700; border-bottom-left-radius: 5px; }
.pocket .rev.holo { background: linear-gradient(100deg, #ffd36e, #ff8ad6 45%, #6ee7ff); color: #1a1206; }
.pocket .rev.ball { background: linear-gradient(180deg, #ff5f5f 48%, #fff 52%); color: #14161c; }
.pocket .rev.mball { background: linear-gradient(180deg, #b465ff 48%, #fff 52%); color: #14161c; }

/* ------------------------------------------------------------------ foil */
/*
 * Synthesised foil. No real photograph of the holo printings exists — every
 * database ships one flat scan per card — so the sheen is drawn: a diagonal
 * rainbow band plus a fine glitter crosshatch, screen-blended over the art.
 * Holo and reverse run at different angles and hues so they read apart even
 * before the badge is seen.
 */
.foil {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.foil::before,
.foil::after {
  content: "";
  position: absolute;
  inset: 0;
  transition: background-position 0.7s ease;
}

/*
 * Holo: the illustration itself is foil, which photographs as saturated
 * vertical rainbow bars. Overlay blending shifts the art's own colours
 * instead of laying white over them, so nothing fogs.
 */
.foil.holo::after {
  mix-blend-mode: overlay;
  background-image: repeating-linear-gradient(93deg,
    rgba(255, 90, 200, 0.34) 0px,
    rgba(110, 185, 255, 0.34) 14px,
    rgba(110, 255, 190, 0.3) 28px,
    rgba(255, 226, 110, 0.34) 42px,
    rgba(255, 90, 200, 0.34) 56px);
  /* Light catches part of the card, not all of it — an even coat reads as a
     dirty filter, a diagonal falloff reads as foil under a lamp. */
  -webkit-mask-image: linear-gradient(115deg, rgba(0,0,0,0.25), #000 40%, #000 62%, rgba(0,0,0,0.25));
  mask-image: linear-gradient(115deg, rgba(0,0,0,0.25), #000 40%, #000 62%, rgba(0,0,0,0.25));
}
/* One moving specular streak — the "tilt" highlight — kept narrow and soft. */
.foil.holo::before {
  mix-blend-mode: screen;
  background-image: linear-gradient(115deg,
    transparent 36%,
    rgba(255, 255, 255, 0.09) 45%,
    rgba(255, 255, 255, 0.18) 50%,
    rgba(255, 255, 255, 0.09) 55%,
    transparent 64%);
  background-size: 240% 240%;
  background-position: 28% 28%;
}

/*
 * Reverse holo: the card sparkles — a field of tiny coloured glints rather
 * than a wash. Prime-ish tile sizes keep the pattern from reading as a grid.
 */
.foil.reverse::after {
  mix-blend-mode: overlay;
  background-image: linear-gradient(245deg,
    rgba(115, 145, 255, 0.32) 0%,
    rgba(95, 235, 205, 0.26) 36%,
    rgba(215, 125, 255, 0.32) 68%,
    rgba(115, 145, 255, 0.28) 100%);
  -webkit-mask-image: linear-gradient(245deg, rgba(0,0,0,0.3), #000 42%, #000 64%, rgba(0,0,0,0.3));
  mask-image: linear-gradient(245deg, rgba(0,0,0,0.3), #000 42%, #000 64%, rgba(0,0,0,0.3));
}
.foil.reverse::before {
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.85) 0 0.7px, transparent 1.7px),
    radial-gradient(circle at 70% 20%, rgba(255, 175, 235, 0.8) 0 0.6px, transparent 1.6px),
    radial-gradient(circle at 20% 78%, rgba(155, 225, 255, 0.8) 0 0.6px, transparent 1.6px),
    radial-gradient(circle at 82% 64%, rgba(255, 242, 165, 0.75) 0 0.6px, transparent 1.5px),
    radial-gradient(circle at 52% 55%, rgba(185, 255, 215, 0.7) 0 0.5px, transparent 1.4px);
  background-size: 13px 17px, 19px 23px, 17px 13px, 23px 19px, 29px 31px;
  background-position: 0 0, 4px 7px, 9px 2px, 2px 11px, 7px 5px;
}

/* The sheen wanders as you pass over it, the way tilting a foil card does. */
.pocket:hover .foil.holo::before, .wthumb:hover .foil.holo::before { background-position: 72% 72%; }
.pocket:hover .foil.holo::after, .wthumb:hover .foil.holo::after { background-position: 10px 0; }
.pocket:hover .foil.reverse::before, .wthumb:hover .foil.reverse::before {
  background-position: 3px 2px, 0 3px, 5px 8px, 8px 1px, 2px 9px;
}

.pocket .pname {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 8px 5px 3px 34px; /* number sits bottom-left underneath */
  font-size: 9px;
  line-height: 1.2;
  color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.85) 55%);
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.pocket .pname .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pocket .pname .pprice { flex: none; margin-left: auto; color: #ffe08a; font-weight: 700; font-variant-numeric: tabular-nums; }
.wthumb { position: relative; }
.pocket.blank.deliberate {
  border-style: dashed;
  opacity: 1;
  background: repeating-linear-gradient(45deg, var(--bg-3) 0 6px, var(--bg-2) 6px 12px);
  display: flex; align-items: center; justify-content: center;
}
.blank-mark { font-size: 10px; color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase; }

/* Wide screens: one-page cockpit. Controls in a left sidebar, the Set value
   tally on the right, and the spread centered and scaled to fit the screen —
   no scrolling to work the binder. Narrow screens keep the sticky top bar. */
@media (min-width: 1180px) {
  /* The binder is the star: full-width workspace, slim side panels. */
  main { max-width: 2200px; padding: 14px 18px; }
  #panel-guide.is-active {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) 225px;
    grid-template-rows: auto 1fr;
    gap: 10px 16px;
    align-items: start;
  }
  #panel-guide > .toolbar { font-size: 12.5px; }
  #panel-guide > .toolbar .btn, #panel-guide > .toolbar select, #panel-guide > .toolbar input { font-size: 12.5px; }
  #guideBody > .card:has(.totals) { padding: 12px; font-size: 12.5px; }
  #guideBody > .card:has(.totals) .totals strong { font-size: 17px; }
  #guideBody .spread { max-width: none; }
  #panel-guide > .toolbar {
    grid-column: 1; grid-row: 1 / span 6;
    position: sticky; top: 12px; z-index: 45;
    flex-direction: column; align-items: stretch; gap: 9px;
    background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px;
    padding: 11px; box-shadow: none;
    max-height: calc(100vh - 24px); overflow-y: auto; overflow-x: hidden;
  }
  /* Nothing in the sidebar may force it wider than its column: controls take
     the column's width and shrink below their longest option if they must. */
  #panel-guide > .toolbar select,
  #panel-guide > .toolbar .btn { width: 100%; min-width: 0; }
  #panel-guide > .toolbar .spacer { display: none; }
  #panel-guide > .toolbar .field.inline { flex-direction: column; align-items: stretch; gap: 4px; }
  /* View switcher stacks as a clean vertical list; labels never clip. */
  #panel-guide > .toolbar .seg { display: flex; flex-direction: column; gap: 2px; }
  #panel-guide > .toolbar .seg button { width: 100%; text-align: left; }
  #panel-guide > .toolbar .check { white-space: normal; align-items: flex-start; line-height: 1.35; }
  #panel-guide > .toolbar .check input { flex: none; margin-top: 1px; }
  #panel-guide > .toolbar .check span { white-space: normal; min-width: 0; }

  #guideBody { display: contents; }
  /* The page nav is a compact centered pill, not a full-width bar. */
  #guideBody > .guide-nav {
    grid-column: 2; top: 8px;
    width: fit-content; margin-inline: auto;
    padding: 5px 14px; gap: 10px;
    border-radius: 99px; border: 1px solid var(--line);
  }
  #guideBody > .book { grid-column: 2; }
  /* Wide content (checklist, layout options) stays center stage… */
  #guideBody > .card { grid-column: 2; }
  /* …while the Set value tally keeps watch from the right rail. */
  #guideBody > .card:has(.totals) { grid-column: 3; }
  #guideBody > .card:has(.totals) {
    grid-row: 1 / span 2;
    position: sticky; top: 12px;
    max-height: none; overflow: visible;
  }
  /* The binder planner sits bottom-center, under the spread — the whole
     list, no inner scrollbar; the page scrolls to it naturally. */
  #guideBody > details.planner {
    grid-column: 2; grid-row: 3;
    width: min(100%, calc((100vh - 140px) * 1.8));
    margin-inline: auto;
    padding: 12px 16px; font-size: 12.5px;
  }
  #guideBody > .card:has(.totals) .toolbar { flex-direction: column; align-items: stretch; }
  /* Grid-aware max width is calculated by the guide from the selected 3x3,
     4x3, 3x4 or 4x4 page. Keep the entire opening above the fold. */
  #guideBody > .book {
    max-width: min(100%, var(--guide-book-max, 1100px));
    margin-inline: auto;
  }
  #guideBody > .book .spread { gap: 16px; padding: 13px; border-radius: 14px; }
  #guideBody > .book .spread .binder-page { padding: 7px; }
  #guideBody > .book .page-head { margin-bottom: 5px; font-size: 11px; }
  #guideBody > .book .page-head strong { font-size: 11.5px; }
  #guideBody > .book .pockets { gap: 4px; }
  /* The Set value card reads as a tidy left-aligned column. */
  #guideBody > .card:has(.totals) { text-align: left; }
  #guideBody > .card:has(.totals) h2 { text-align: left; }
  #guideBody > .card:has(.totals) .check {
    display: flex; flex-wrap: wrap; align-items: flex-start;
    justify-content: flex-start; padding: 5px 0;
  }
  #guideBody > .card:has(.totals) .check em { flex-basis: 100%; margin-left: 27px; }
  #guideBody > .card:has(.totals) .totals { flex-direction: column; gap: 10px; align-items: flex-start; }
}

/* Guide controls ride along on scroll — no more round trips to the top. */
#panel-guide > .toolbar {
  position: sticky; top: 0; z-index: 45;
  justify-content: flex-start;
  background: var(--bg);
  padding-top: 8px; padding-bottom: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.guide-source-controls { display: flex; flex: none; align-items: center; gap: 8px; }
.guide-source-controls > .btn { flex: none; }
.guide-sort-control { padding: 9px; border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); border-radius: 11px; background: color-mix(in srgb, var(--accent) 7%, var(--bg-3)); }
.guide-sort-control label { color: var(--ink); font-weight: 750; }
.is-custom-binder .guide-official-only { display: none !important; }
.custom-summary-progress { height: 7px; margin: 14px 0 2px; overflow: hidden; border-radius: 99px; background: var(--bg-3); }
.custom-summary-progress i { display: block; width: var(--complete); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--ok)); box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 34%, transparent); }
.custom-summary-details { display: grid; gap: 10px; margin: 14px 0; padding: 13px 0; border-block: 1px solid var(--line); }
.custom-summary-details > div { display: grid; gap: 2px; }
.custom-summary-details dt { color: var(--ink-3); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.custom-summary-details dd { margin: 0; color: var(--ink-2); font-size: 12px; line-height: 1.4; }
@media (min-width: 1180px) {
  .guide-source-controls { flex-direction: column; align-items: stretch; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
  #panel-guide > .toolbar .guide-sort-control { gap: 6px; margin-block: 1px; }
}
@media (max-width: 760px) {
  .guide-source-controls { flex: 1 0 100%; flex-direction: column; align-items: stretch; }
  .guide-source-controls > .btn { width: 100%; justify-content: center; }
}

/* A custom binder is composed from exact card printings across any set. */
.custom-binder-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(4, 7, 13, .78);
  backdrop-filter: blur(8px);
}
.custom-binder-card {
  position: relative;
  width: min(1080px, 100%);
  max-height: min(820px, calc(100vh - 40px));
  padding: 24px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--bg-2);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .5);
}
.custom-binder-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-right: 30px; margin-bottom: 18px; }
.custom-binder-head .home-kicker { margin-bottom: 5px; }
.custom-binder-head h2 { font-size: 24px; }
.custom-delete { color: var(--bad); }
.custom-binder-card label.field > span {
  display: block;
  margin-bottom: 6px;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 650;
}
.custom-binder-card input[type="search"],
.custom-binder-card input[type="text"],
.custom-binder-card select { width: 100%; min-height: 38px; }
.custom-collection-rule {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--line));
  border-radius: 14px;
  background:
    radial-gradient(circle at 90% 0, color-mix(in srgb, var(--accent) 12%, transparent), transparent 42%),
    var(--bg);
}
.custom-rule-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.custom-rule-head h3 { margin-top: 2px; font-size: 18px; }
.custom-rule-head > p { max-width: 450px; color: var(--ink-3); font-size: 12px; line-height: 1.5; }
.custom-rule-head .eyebrow { color: var(--accent); font-size: 10px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.custom-rule-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.15fr) minmax(280px, 1fr) minmax(190px, .8fr);
  align-items: end;
  gap: 12px;
  margin-top: 14px;
}
.custom-rule-grid .field { margin: 0; }
.custom-rule-options {
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 12px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-3);
}
.custom-rule-options legend { float: left; margin-right: 2px; color: var(--ink-3); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.custom-rule-options label { display: flex; align-items: center; gap: 5px; white-space: nowrap; color: var(--ink-2); font-size: 11px; cursor: pointer; }
.custom-rule-options input { width: 14px; height: 14px; margin: 0; accent-color: var(--accent); }
.custom-rule-action { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; }
.custom-rule-action .hint { display: flex; min-width: 0; flex-direction: column; margin: 0; }
.custom-rule-action .hint strong { overflow: hidden; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.custom-rule-action .hint span { margin-top: 2px; color: var(--ink-3); font-size: 10px; }
.custom-rule-action .btn { flex: none; }
.custom-binder-builder { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 16px; margin: 18px 0 10px; }
.custom-binder-search, .custom-binder-picked { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.custom-binder-results, #customBinderSelected { display: grid; gap: 5px; max-height: 390px; margin-top: 8px; overflow-y: auto; overscroll-behavior: contain; }
.custom-result, .custom-picked-row {
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-3);
  color: var(--ink);
  font: inherit;
  text-align: left;
}
.custom-result { cursor: pointer; }
.custom-result:hover { border-color: var(--accent); }
.custom-result:disabled { opacity: .5; cursor: default; }
.custom-result img, .custom-picked-row img { width: 31px; aspect-ratio: var(--card-aspect); border-radius: 3px; object-fit: cover; background: var(--bg); }
.custom-result > span, .custom-picked-row > span { display: flex; min-width: 0; flex-direction: column; }
.custom-result strong, .custom-picked-row strong { overflow: hidden; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.custom-result small, .custom-picked-row small { overflow: hidden; color: var(--ink-3); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.custom-result > b { color: var(--accent); font-size: 11px; }
.custom-picked-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.custom-picked-head span { display: grid; place-items: center; min-width: 26px; height: 26px; padding-inline: 7px; border-radius: 99px; background: color-mix(in srgb, var(--accent) 15%, var(--bg-3)); color: var(--accent); font-size: 11px; }
.custom-picked-row > div { display: flex; gap: 3px; }
.custom-picked-row button { width: 25px; height: 25px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-2); color: var(--ink-2); cursor: pointer; }
.custom-picked-row button:hover { border-color: var(--accent); color: var(--ink); }
.custom-picked-row button:disabled { opacity: .3; cursor: default; }
.custom-binder-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.custom-binder-summary > .btn { margin-top: 13px; }
.custom-manager-card { width: min(760px, 100%); }
.custom-manager-list { display: grid; gap: 9px; margin-top: 18px; }
.custom-manager-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--bg);
}
.custom-manager-row > div:first-child { display: grid; min-width: 0; gap: 3px; }
.custom-manager-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.custom-manager-row span { color: var(--ink-3); font-size: 11px; }
.custom-manager-actions { display: flex; gap: 6px; }
.custom-manager-actions .btn { padding: 7px 10px; font-size: 12px; }
@media (max-width: 720px) {
  .custom-binder-overlay { align-items: end; padding: 0; }
  .custom-binder-card { max-height: calc(100vh - env(safe-area-inset-top, 0px)); padding: 20px 14px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 18px 18px 0 0; }
  .custom-binder-head { flex-direction: column; gap: 8px; }
  .custom-rule-head { display: block; }
  .custom-rule-head > p { margin-top: 6px; }
  .custom-rule-grid { grid-template-columns: 1fr; align-items: stretch; }
  .custom-rule-options { flex-wrap: wrap; }
  .custom-rule-options legend { width: 100%; }
  .custom-rule-action { align-items: stretch; flex-direction: column; }
  .custom-rule-action .btn { width: 100%; justify-content: center; }
  .custom-binder-builder { grid-template-columns: 1fr; }
  .custom-binder-results, #customBinderSelected { max-height: 250px; }
  .custom-binder-actions .btn { flex: 1; justify-content: center; }
  .custom-manager-row { grid-template-columns: 1fr; align-items: stretch; }
  .custom-manager-actions { display: grid; grid-template-columns: repeat(3, 1fr); }
  .custom-manager-actions .btn { justify-content: center; }
}
#panel-guide .guide-nav {
  position: sticky; top: 54px; z-index: 44;
  background: var(--bg-2);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

/* Card-show cart: staged cards glow, and the tally bar rides along on scroll. */
.pocket .cart-mark { display: none; }
.pocket.in-cart { outline: 3px solid var(--ok); outline-offset: -1px; }
.pocket.in-cart .cart-mark {
  display: block; position: absolute; top: 4px; right: 4px; font-size: 18px;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.8));
}
.pocket.in-cart .rev { top: 26px; }
.cart-bar { position: sticky; top: 8px; z-index: 30; border-color: var(--ok); box-shadow: 0 8px 28px rgba(0,0,0,.45); }
.cart-bar .ask { color: var(--ok); }

/* Crossed-off card in hide mode: number + check, nothing else pulling the eye. */
.pocket.owned-stub {
  background: var(--bg-2);
  border-style: dashed;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.pocket.owned-stub .no { opacity: 0.6; }
.stub-check { font-size: 22px; color: var(--ok); opacity: 0.45; }
.pocket.owned-stub:hover .stub-check { opacity: 0.9; }

/* Energy filler: real art, quiet tag, clearly not a slot you owe. */
.pocket.blank.efill { border-style: solid; opacity: 1; }
.pocket.blank.efill img { opacity: 0.92; }
.efill-tag {
  position: absolute; top: 0; right: 0; padding: 2px 5px; font-size: 9px;
  background: rgba(0, 0, 0, 0.65); color: var(--ink-3);
  border-bottom-left-radius: 5px; letter-spacing: 0.06em; text-transform: uppercase;
}

.custom-card {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: linear-gradient(160deg, var(--bg-3), color-mix(in srgb, var(--accent) 18%, var(--bg-3)));
  text-align: center; padding: 6px;
}
.custom-card span { font-size: 20px; }
.custom-card b { font-size: 10px; line-height: 1.25; font-weight: 600; }

.pocket-menu {
  position: absolute; bottom: 3px; right: 3px;
  width: 22px; height: 22px; line-height: 1; padding: 0;
  border: 1px solid var(--line); border-radius: 5px;
  background: rgba(0,0,0,0.78); color: var(--ink); cursor: pointer; font-size: 13px;
}
.pocket-menu:hover { background: var(--accent); color: #0b1020; }

.adjust-list { list-style: none; margin: 0 0 10px; padding: 0; font-size: 13px; }
.adjust-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--line);
}
.adjust-list li span { flex: 1; }
.btn.tiny { padding: 3px 8px; font-size: 12px; }

.popover {
  position: fixed; z-index: 80; width: 250px;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px; box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  display: flex; flex-direction: column; gap: 4px;
}
.popover .pop-head { font-size: 12px; color: var(--ink-2); padding: 2px 6px 6px; border-bottom: 1px solid var(--line); }
.popover button {
  text-align: left; padding: 7px 9px; border: 0; border-radius: 6px;
  background: none; color: var(--ink); font: inherit; font-size: 13px; cursor: pointer;
}
.popover button:hover { background: var(--bg-2); }
.popover button.danger { color: var(--bad); }
.popover hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; width: 100%; }
.popover .pop-label { font-size: 11px; color: var(--ink-3); padding: 2px 9px; }
.popover select, .popover input { width: 100%; font-size: 13px; }
.pop-row { display: flex; gap: 5px; }
.pop-row input { flex: 1; }
.pop-row button { background: var(--accent); color: #0b1020; font-weight: 600; padding: 6px 11px; }

/*
 * Guide pockets read like a paper checklist: what you still NEED stays in full
 * colour, so you can recognise it in a dealer's box; what you HAVE gets shaded
 * and crossed out. Clicking a pocket toggles it.
 */
.pocket.clickable { cursor: pointer; }
.pocket.clickable:hover { border-color: var(--accent); }
.pocket.have img { filter: grayscale(0.8) brightness(0.45); }
.pocket.have::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top right,
      transparent calc(50% - 2.5px), rgba(248, 113, 113, 0.95) calc(50% - 2.5px),
      rgba(248, 113, 113, 0.95) calc(50% + 2.5px), transparent calc(50% + 2.5px)),
    linear-gradient(to top left,
      transparent calc(50% - 2.5px), rgba(248, 113, 113, 0.95) calc(50% - 2.5px),
      rgba(248, 113, 113, 0.95) calc(50% + 2.5px), transparent calc(50% + 2.5px));
}
.pocket.missing-mark {
  border-color: color-mix(in srgb, var(--warn) 80%, var(--line));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--warn) 28%, transparent);
}
.pocket.missing-mark::after {
  content: "NEED";
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 4;
  padding: 3px 6px;
  border-radius: 999px;
  color: #181204;
  background: var(--warn);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.48);
  font-size: clamp(7px, 0.7vw, 10px);
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  pointer-events: none;
}

/* ---------------------------------------------------------------- stage */

.stage { position: relative; line-height: 0; border-radius: var(--radius); overflow: hidden; background: #000; touch-action: none; }
.stage img { width: 100%; height: auto; display: block; }
.stage svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage .quad { fill: color-mix(in srgb, var(--accent) 10%, transparent); stroke: var(--accent); stroke-width: 3; vector-effect: non-scaling-stroke; }
.stage .cell { fill: none; stroke: var(--ok); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: 0.75; }
.stage .handle { fill: var(--accent); stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; cursor: grab; }
.stage .handle:active { cursor: grabbing; }
.stage .qlabel { fill: #fff; font-size: 13px; font-weight: 700; paint-order: stroke; stroke: #000; stroke-width: 4px; }

/* --------------------------------------------------------------- results */

.result-page { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin-bottom: 16px; }
.result-grid { display: grid; gap: 8px; margin-top: 10px; }

.slot { position: relative; }
.slot .crop { aspect-ratio: var(--card-aspect); border-radius: 6px; overflow: hidden; border: 2px solid var(--line); background: var(--bg-3); }
.slot .crop img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slot.correct .crop { border-color: var(--ok); }
.slot.misplaced .crop { border-color: var(--warn); }
.slot.duplicate .crop, .slot.foreign .crop { border-color: var(--bad); }
.slot.empty .crop { border-color: var(--line); border-style: dashed; }
.slot.review .crop { border-color: var(--warn); border-style: dashed; }
.slot.unknown .crop { border-color: var(--bad); border-style: dashed; }

.slot .meta { font-size: 11px; margin-top: 4px; line-height: 1.35; }
.slot .meta b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot .meta span { color: var(--ink-3); }
.slot .badge {
  position: absolute; top: 4px; right: 4px;
  font-size: 9px; font-weight: 700; padding: 2px 5px; border-radius: 4px;
  background: rgba(0,0,0,0.75);
}
.slot.correct .badge { color: var(--ok); }
.slot.misplaced .badge, .slot.review .badge { color: var(--warn); }
.slot.duplicate .badge, .slot.foreign .badge, .slot.unknown .badge { color: var(--bad); }
.slot select { width: 100%; margin-top: 4px; font-size: 11px; padding: 3px 5px; }

/* ------------------------------------------------------------ collection */

.set-picker { gap: 6px; }
.set-picker span { font-size: 12px; color: var(--ink-3); }
.set-picker select { padding: 6px 8px; font-size: 13px; max-width: 220px; }

/* Searchable set picker: type to filter, click (or Enter) to switch. */
.set-combo { position: relative; }
.set-combo input { width: 220px; padding: 6px 9px; font-size: 13px; }
.set-drop {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 60;
  width: 430px; max-width: 92vw; max-height: 60vh; overflow-y: auto;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
  padding: 4px;
}
.set-drop .row {
  display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
  padding: 6px 9px; border-radius: 7px; cursor: pointer; font-size: 13px;
}
.set-drop .row:hover, .set-drop .row.hl { background: var(--bg-3); }
.set-drop .row b { flex: none; }
.set-drop .row .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-drop .row .muted { margin-left: auto; flex: none; font-size: 11.5px; }
.set-drop .none { padding: 10px; color: var(--ink-3); font-size: 13px; }
.set-drop .era {
  position: sticky; top: 0;
  padding: 6px 10px 4px;
  background: var(--bg-2);
  color: var(--ink-3);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  border-bottom: 1px solid var(--line);
}
.set-drop .era:not(:first-child) { margin-top: 4px; border-top: 1px solid var(--line); }

.chip {
  padding: 7px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg-3); color: var(--ink-3); font: inherit; font-size: 13px; cursor: pointer;
}
.chip em { font-style: normal; opacity: 0.65; margin-left: 4px; font-size: 11px; }
.chip.on { border-color: var(--accent); color: var(--ink); background: color-mix(in srgb, var(--accent) 18%, var(--bg-3)); }

.ctiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 12px;
}
.ctile { min-width: 0; }
.ctile .cart {
  position: relative; aspect-ratio: var(--card-aspect);
  border-radius: 7px; overflow: hidden; border: 2px solid var(--line);
  background: var(--bg-3); cursor: pointer;
}
.ctile .cart img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) brightness(0.45); transition: filter 0.15s; }
.ctile.done .cart { border-color: var(--ok); }
.ctile.done .cart img { filter: none; }
.ctile .cart:hover img { filter: none; }
.ctile .cnum {
  position: absolute; top: 0; left: 0; padding: 2px 5px; font-size: 10px;
  background: rgba(0,0,0,0.75); border-bottom-right-radius: 5px; font-variant-numeric: tabular-nums;
}
.ctile .cname {
  font-size: 11px; margin-top: 5px; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2);
}
.cname.csub { color: var(--ink-3); font-size: 10px; margin-top: 1px; }
.ctile .cart .rev { position: absolute; top: 0; right: 0; padding: 2px 5px; font-size: 9px; font-weight: 700; border-bottom-left-radius: 5px; background: color-mix(in srgb, var(--accent) 85%, black); color: #0b1020; }
.ctile .cart .rev.holo { background: linear-gradient(100deg, #ffd36e, #ff8ad6 45%, #6ee7ff); color: #1a1206; }
.cchips { display: flex; gap: 4px; margin-top: 4px; }
.vchip {
  flex: 1; padding: 3px 0; border: 1px solid var(--line); border-radius: 5px;
  background: var(--bg-3); color: var(--ink-3);
  font: inherit; font-size: 10px; font-weight: 700; cursor: pointer;
}
.vchip:hover { border-color: var(--ink-3); }
.vchip.on { color: #0b1020; border-color: transparent; }
.vchip.normal.on { background: var(--ok); }
.vchip.holo.on { background: linear-gradient(100deg, #ffd36e, #ff8ad6 55%, #6ee7ff); }
.vchip.reverse.on { background: var(--accent); }
.vchip.ball.on { background: linear-gradient(180deg, #ff5f5f 48%, #fff 52%); }
.vchip.mball.on { background: linear-gradient(180deg, #b465ff 48%, #fff 52%); }

#cquery { min-width: 180px; }

/* ---------------------------------------------------------------- report */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.stat strong { display: block; font-size: 26px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat span { font-size: 12.5px; color: var(--ink-2); }
.stat.ok strong { color: var(--ok); }
.stat.bad strong { color: var(--miss); }
.stat.warn strong { color: var(--warn); }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
th { color: var(--ink-3); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
td.num { font-variant-numeric: tabular-nums; color: var(--ink-2); }
tbody tr:hover { background: var(--bg-3); }
.pill { display: inline-block; padding: 1px 7px; border-radius: 99px; font-size: 11px; font-weight: 600; }
.pill.rev, .pill.reverse { background: color-mix(in srgb, var(--accent) 25%, transparent); color: var(--accent); }
.pill.holo { background: color-mix(in srgb, #ff8ad6 25%, transparent); color: #ff9ede; }
.pill.ball { background: color-mix(in srgb, #ff5f5f 25%, transparent); color: #ff8a8a; }
.pill.mball { background: color-mix(in srgb, #b465ff 25%, transparent); color: #cf9bff; }
.stat.holo strong { color: #ff9ede; }
.stat.reverse strong { color: var(--accent); }
.stat.ball strong { color: #ff8a8a; }
.stat.mball strong { color: #cf9bff; }
.stat.normal strong { color: var(--ink); }
.pill.warn { background: color-mix(in srgb, var(--warn) 22%, transparent); color: var(--warn); }
.pill.bad { background: color-mix(in srgb, var(--bad) 22%, transparent); color: var(--bad); }

.empty-state { text-align: center; padding: 48px 20px; color: var(--ink-3); }

/* ------------------------------------------------------------ price check */

.pc-zone {
  text-align: center; padding: 26px 16px; cursor: pointer;
  border-style: dashed; color: var(--ink-2); font-size: 14px;
}
.pc-zone strong { display: block; color: var(--ink); margin-bottom: 4px; }
.pc-zone.drag { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--bg-2)); }
.pc-zone kbd { background: var(--bg-3); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; font-size: 12px; }

.pc-shot { max-width: 100%; max-height: 320px; border-radius: 8px; border: 1px solid var(--line); }
.pc-prices { display: flex; gap: 18px; margin-top: 10px; flex-wrap: wrap; }
.pc-prices div { display: flex; flex-direction: column; }
.pc-prices span { font-size: 11.5px; color: var(--ink-3); }
.pc-prices b { font-size: 22px; font-variant-numeric: tabular-nums; }
.pc-prices .target b { color: var(--ok); }

.pc-table td img { width: 46px; border-radius: 4px; display: block; }
.pc-table tr { cursor: pointer; }
.pc-table tr.best { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.pc-table .pill { margin-right: 4px; }
.pill.normal { background: color-mix(in srgb, var(--ok) 22%, transparent); color: var(--ok); }
.spinner.small { width: 16px; height: 16px; border-width: 2px; display: inline-block; vertical-align: -3px; }

/* -------------------------------------------------------- toast / busy */

.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 18px; z-index: 60; font-size: 14px; box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
.busy {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(5, 8, 14, 0.72);
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-direction: column;
  color: var(--ink-2); font-size: 14px;
}
.spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* -------------------------------------------------------- Watchlist sheet */

.wsheet {
  background: #fff;
  color: #000;
  border-radius: var(--radius);
  padding: 22px 24px;
  max-width: 920px;
  margin: 0 auto;
}
.wsheet-head { border-bottom: 2px solid #000; padding-bottom: 8px; margin-bottom: 14px; }
.wsheet-head h1 { font-size: 20px; color: #000; }
.wsheet-meta { display: flex; gap: 16px; font-size: 12px; color: #555; margin-top: 3px; }

.wgrouphead {
  display: flex; align-items: baseline; gap: 10px;
  border-bottom: 1px solid #999; margin: 16px 0 9px; padding-bottom: 3px;
}
.wgrouphead b { font-size: 13px; }
.wgrouphead span { font-size: 11px; color: #666; }
.wgrouphead em { margin-left: auto; font-style: normal; font-size: 11px; color: #000; }

.wcards { display: grid; gap: 10px 9px; }
.wcards > * { min-width: 0; }
.wcard { break-inside: avoid; page-break-inside: avoid; }
.watch-card {
  appearance: none; display: block; width: 100%; padding: 0; border: 0;
  background: transparent; color: #000; text-align: left; cursor: pointer;
  border-radius: 6px;
}
.watch-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.watch-card.is-staged .wthumb {
  outline: 4px solid var(--ok); outline-offset: -3px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ok) 35%, transparent);
}
.stage-check {
  display: none; position: absolute; top: 7px; right: 7px; z-index: 2;
  padding: 4px 7px; border-radius: 999px; background: var(--ok); color: #06120b;
  font-size: 10px; font-weight: 800; line-height: 1; text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}
.watch-card.is-staged .stage-check { display: block; }

.watch-stage-bar {
  position: sticky; top: 8px; z-index: 35; display: flex; align-items: center;
  gap: 18px; flex-wrap: wrap; border-color: var(--ok);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .45);
}
.watch-stage-copy { display: flex; flex-direction: column; min-width: 150px; }
.watch-stage-copy span, .watch-percent > span { color: var(--ink-3); font-size: 11px; }
.watch-stage-totals { margin: 0; padding: 0; border: 0; }
.watch-stage-totals .watch-offer { color: var(--ok); }
.watch-percent { min-width: 155px; }
.watch-percent select { width: 100%; }
.watch-stage-actions { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }

/* Watchlist controls stay app-native; the list itself is literal paper. */
.watch-controls .page-head { margin-bottom: 16px; }
.watch-add { position: relative; margin-bottom: 14px; }
.watch-add > label { display: block; margin-bottom: 7px; color: var(--ink-2); font-size: 12px; font-weight: 650; }
.watch-add > input { width: 100%; min-height: 44px; }
.watch-add-results {
  display: grid;
  gap: 5px;
  max-height: 330px;
  margin-top: 7px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.watch-add-help { padding: 8px 2px 2px; color: var(--ink-3); font-size: 12.5px; }
.watch-add-result {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg-3);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.watch-add-result:hover { border-color: var(--accent); }
.watch-add-result:disabled { opacity: .55; cursor: default; }
.watch-add-result img { width: 30px; aspect-ratio: var(--card-aspect); border-radius: 3px; object-fit: cover; background: var(--bg); }
.watch-add-result > span { display: flex; min-width: 0; flex-direction: column; }
.watch-add-result strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.watch-add-result small { overflow: hidden; color: var(--ink-3); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.watch-add-result b { color: var(--accent); font-size: 11.5px; white-space: nowrap; }
.watch-toolbar { padding-top: 13px; border-top: 1px solid var(--line); }

.watch-paper-stack { display: grid; gap: 24px; margin: 20px auto 0; }
.watch-paper-page {
  width: min(100%, 850px);
  min-height: min(1100px, calc((100vw - 48px) * 1.294));
  margin: 0 auto;
  padding: clamp(22px, 5vw, 44px);
  border: 1px solid #d8dde7;
  border-radius: 4px;
  background: #fff;
  color: #151923;
  box-shadow: 0 18px 55px rgba(0, 0, 0, .28);
  color-scheme: light;
}
.watch-paper-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 2px solid #151923; }
.watch-paper-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.watch-paper-brand img { width: 42px; height: 42px; border-radius: 10px; }
.watch-paper-brand span, .watch-paper-page-meta { display: flex; flex-direction: column; }
.watch-paper-brand strong { color: #151923; font-size: 19px; line-height: 1.1; }
.watch-paper-brand small { margin-top: 3px; color: #556174; font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.watch-paper-page-meta { align-items: flex-end; flex: none; color: #556174; font-size: 10px; text-align: right; }
.watch-paper-page-meta strong { color: #151923; font-size: 11px; }
.watch-paper-summary { display: grid; grid-template-columns: 1.25fr .8fr 1fr 1fr; gap: 0; margin-top: 14px; border: 1px solid #d8dde7; border-radius: 8px; background: #f6f8fb; }
.watch-paper-summary > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; padding: 10px 12px; border-right: 1px solid #d8dde7; }
.watch-paper-summary > div:last-child { border-right: 0; }
.watch-paper-summary span { overflow: hidden; color: #667085; font-size: 9px; font-weight: 700; letter-spacing: .05em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.watch-paper-summary strong { overflow: hidden; color: #151923; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.watch-paper-summary .watch-paper-target-total strong { color: #087d46; }
.watch-paper-column-head,
.watch-paper-stage {
  display: grid;
  grid-template-columns: 30px 40px minmax(180px, 1fr) 110px 76px 82px;
  align-items: center;
  gap: 10px;
}
.watch-paper-column-head { padding: 14px 42px 6px 10px; color: #667085; font-size: 8px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.watch-paper-column-head span:nth-last-child(-n+2) { text-align: right; }
.watch-paper-page.no-prices .watch-paper-column-head,
.watch-paper-page.no-prices .watch-paper-stage { grid-template-columns: 30px 40px minmax(180px, 1fr) 110px; }
.watch-paper-rows { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid #cfd5df; }
.watch-paper-row { position: relative; min-width: 0; border-bottom: 1px solid #d8dde7; }
.watch-paper-stage { width: 100%; min-height: 54px; padding: 5px 42px 5px 10px; border: 0; background: transparent; color: #151923; font: inherit; text-align: left; cursor: pointer; }
.watch-paper-stage:hover { background: #f5f8ff; }
.watch-paper-stage:focus-visible { outline: 3px solid #356dff; outline-offset: -3px; }
.watch-paper-row.is-staged { background: #ebf9f2; }
.watch-paper-row.is-staged .watch-paper-check { border-color: #087d46; background: #087d46; color: #fff; }
.watch-paper-check { display: grid; place-items: center; width: 20px; height: 20px; border: 2px solid #1f2937; border-radius: 4px; color: transparent; font-size: 13px; font-weight: 900; }
.watch-paper-page .watch-paper-art { position: relative; width: 34px; height: auto; margin: 0; border: 1px solid #cfd5df; border-radius: 3px; aspect-ratio: var(--card-aspect); background: #eef1f5; }
.watch-paper-page .watch-paper-art img { width: 100%; height: 100%; object-fit: contain; }
.watch-paper-card { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.watch-paper-name { overflow: hidden; color: #151923; font-size: 11.5px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.watch-paper-name > span { color: #8a94a4; font-size: 9px; font-variant-numeric: tabular-nums; }
.watch-paper-card small, .watch-paper-finish { overflow: hidden; color: #667085; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.watch-paper-finish { font-weight: 650; }
.watch-paper-money { display: flex; min-width: 0; flex-direction: column; align-items: flex-end; }
.watch-paper-money small { color: #8a94a4; font-size: 7.5px; font-weight: 700; text-transform: uppercase; }
.watch-paper-money strong { color: #151923; font-size: 11px; font-variant-numeric: tabular-nums; }
.watch-paper-target strong { color: #087d46; }
.watch-paper-row .watch-remove { top: 50%; right: 7px; width: 26px; height: 26px; transform: translateY(-50%); border-color: #d3d9e3; background: #fff; color: #677184; }
.watch-paper-row .watch-remove:hover { border-color: #b42318; background: #fff1f0; color: #b42318; }
.watch-paper-footer { display: grid; grid-template-columns: 1fr .7fr 1.4fr; gap: 18px; padding-top: 18px; color: #667085; font-size: 9px; }
.watch-paper-footer span { display: flex; align-items: flex-end; gap: 6px; white-space: nowrap; }
.watch-paper-footer i { display: block; width: 100%; min-width: 25px; height: 12px; border-bottom: 1px solid #9ca5b3; }
.watch-paper-empty { min-height: min(800px, calc((100vw - 48px) * 1.294)); }
.watch-paper-empty-copy { display: grid; place-items: center; align-content: center; min-height: 430px; padding: 30px; color: #667085; text-align: center; }
.watch-paper-empty-copy strong { color: #151923; font-size: 17px; }
.watch-paper-empty-copy span { margin-top: 6px; font-size: 11px; }
.watch-remove {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 50%;
  background: rgba(8, 11, 18, .82);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.watch-remove:hover { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 70%, #080b12); }
.watch-empty { border: 1px dashed var(--line); border-radius: 12px; }

/* The export is paginated on screen: one fixed-size page at a time, the
   pager turns them; PRINTING always prints every page (see @media print). */
.wpage { display: none; }
.wpage.current { display: block; }
.wpager { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.wpager .btn { padding: 5px 12px; }
/* Inline set header inside a page's grid spans the whole row. */
.wcards .wgrouphead { grid-column: 1 / -1; }
.wthumb {
  aspect-ratio: var(--card-aspect);
  border: 1px solid #ddd; border-radius: 4px; overflow: hidden; background: #f4f4f4;
}
.wthumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.wsheet.fit .wthumb img { object-fit: cover; }
.wname {
  font-size: 10px; font-weight: 700; line-height: 1.2; margin-top: 3px; color: #000;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wsub { display: flex; align-items: center; gap: 5px; font-size: 9px; color: #555; margin-top: 1px; }
.wtick { width: 9px; height: 9px; border: 1px solid #000; border-radius: 1px; flex: none; }
.wset { font-variant-numeric: tabular-nums; }
.wprice { margin-left: auto; color: #000; font-weight: 600; }

/* ---------------------------------------------------------------- print */

@media print {
  :root { --bg: #fff; --bg-2: #fff; --bg-3: #f4f4f4; --line: #ccc; --ink: #000; --ink-2: #444; --ink-3: #777; color-scheme: light; }
  .topbar, .toolbar, .tabs, .busy, .toast, .no-print { display: none !important; }
  main { padding: 0; max-width: none; }

  /* The Watchlist sheet is the page when it is the open tab. */
  @page { margin: 9mm; }
  .wsheet { max-width: none; padding: 0; border-radius: 0; }

  .watch-paper-stack { display: block; margin: 0; }
  .watch-paper-page {
    width: 100%;
    min-height: calc(279mm - 18mm);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    break-after: page;
    page-break-after: always;
  }
  .watch-paper-page:last-child { break-after: auto; page-break-after: auto; }
  .watch-paper-head { padding-bottom: 3mm; }
  .watch-paper-brand img { width: 9mm; height: 9mm; border-radius: 2mm; }
  .watch-paper-brand strong { font-size: 14pt; }
  .watch-paper-brand small { font-size: 6.5pt; }
  .watch-paper-page-meta { font-size: 6.5pt; }
  .watch-paper-page-meta strong { font-size: 7.5pt; }
  .watch-paper-summary { margin-top: 3mm; }
  .watch-paper-summary > div { padding: 2mm 2.5mm; }
  .watch-paper-summary span { font-size: 5.5pt; }
  .watch-paper-summary strong { font-size: 8pt; }
  .watch-paper-column-head,
  .watch-paper-stage { grid-template-columns: 7mm 9mm minmax(48mm, 1fr) 27mm 18mm 20mm; gap: 2mm; }
  .watch-paper-column-head { padding: 3mm 0 1.5mm; font-size: 5.5pt; }
  .watch-paper-stage { min-height: 12mm; padding: .8mm 0; }
  .watch-paper-check { width: 4.5mm; height: 4.5mm; border-width: .5mm; font-size: 8pt; }
  .watch-paper-page .watch-paper-art { width: 7.5mm; height: auto; margin: 0; border: .2mm solid #cfd5df; }
  .watch-paper-name { font-size: 8pt; }
  .watch-paper-name > span, .watch-paper-card small, .watch-paper-finish { font-size: 6.5pt; }
  .watch-paper-money small { display: none; }
  .watch-paper-money strong { font-size: 7.5pt; }
  .watch-paper-footer { padding-top: 4mm; font-size: 6.5pt; }

  /*
   * Nine to a page, guaranteed. Width-driven thumbnails grow past what three
   * rows of card + caption can occupy on paper, so the third row spilled onto
   * the next sheet. Sizing the picture in physical units pins the layout:
   * 3 x (67mm art + ~7mm caption + gap) ≈ 228mm, inside the ~260mm a Letter or
   * A4 page offers at these margins — with room left for a set divider.
   */
  .wcards { gap: 3mm 4mm; justify-items: center; }
  .wcard { width: auto; }
  .watch-card.is-staged .wthumb { outline: none; box-shadow: none; }
  .wthumb {
    border: none;
    width: auto;
    height: 67mm;
    aspect-ratio: var(--card-aspect);
    margin: 0 auto;
  }
  /* Denser grids shrink the art with them — a fixed 67mm at 4-6 per row is
     wider than the grid track and neighbouring cards overlap on paper.
     Height = min(width-limit for cols, height-limit for rows), a hair under. */
  .wsheet[data-cols="4"] .wthumb { height: 60mm; }
  .wsheet[data-cols="4"][data-rows="4"] .wthumb { height: 50mm; }
  .wsheet[data-cols="5"] .wthumb { height: 47mm; }
  .wsheet[data-cols="6"] .wthumb { height: 38mm; }
  /* Every export page prints, each on its own sheet of paper — the on-screen
     pager is a viewing convenience only. */
  .wpage { display: block !important; break-after: page; page-break-after: always; }
  .wpage:last-child { break-after: auto; page-break-after: auto; }
  .wpager { display: none !important; }
  /* Screen-blended sheen turns to mud on paper; the badges carry the finish. */
  .foil { display: none; }
  .pocket .pname {
    background: rgba(255, 255, 255, 0.92);
    color: #000;
    font-size: 5.5pt;
    padding: 1pt 2pt;
  }
  /* Gold on white is unreadable on paper. */
  .pocket .pname .pprice { color: #000; }
  .wname { font-size: 8pt; max-width: 48mm; }
  .wsub { font-size: 7pt; gap: 4pt; max-width: 48mm; }
  .wprice { font-size: 8pt; }
  .wtick { width: 8pt; height: 8pt; border: 0.7pt solid #000; }
  .wgrouphead { margin: 0 0 4pt; padding-bottom: 2pt; }
  .wgrouphead.pagebreak { break-before: page; page-break-before: always; }
  .wcard.pagebreak { break-before: page; page-break-before: always; }
  /* The first group must not push a blank sheet out ahead of it. */
  .wsheet > .wgrouphead:first-of-type { break-before: auto; page-break-before: auto; }
  .spread { break-inside: avoid; page-break-inside: avoid; border: 0; padding: 0; margin-bottom: 18px; box-shadow: none; background: #fff; }
  .spread::before, .spread::after { display: none; }
  .pocket.have img { filter: grayscale(1) brightness(0.9) contrast(0.6); }
  .pocket.missing-mark { border: 1.5pt solid #000; box-shadow: none; }
  .pocket.missing-mark::after { color: #000; background: #fff; border: 0.8pt solid #000; box-shadow: none; }
}

/* The selected grid remains the print layout. On screens, choose columns for
   the available pixels so cards stay useful on iPad and iPhone. */
@media screen and (max-width: 1024px) {
  main {
    padding-inline:
      max(16px, env(safe-area-inset-left, 0px))
      max(16px, env(safe-area-inset-right, 0px));
  }
  .wsheet .wcards { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media screen and (max-width: 760px) {
  .topbar {
    align-items: center;
    gap: 8px;
    padding:
      calc(8px + env(safe-area-inset-top, 0px))
      max(10px, env(safe-area-inset-right, 0px))
      8px
      max(10px, env(safe-area-inset-left, 0px));
  }
  .brand { flex: 1 1 140px; }
  .brand .sub { display: none; }
  .top-actions { margin-left: auto; }
  .account-button { max-width: 42px; padding-inline: 8px; }
  .account-button span:last-child { display: none; }
  .tabs {
    order: 10;
    flex: 1 0 100%;
    width: 100%;
    margin-left: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 1 0 auto; min-height: 42px; padding: 7px 9px; white-space: nowrap; }
  .set-picker { order: 20; flex: 2 1 160px; }
  .progress-block { order: 21; flex: 1 1 118px; min-width: 118px; margin-left: 0; }
  .set-combo { flex: 1; min-width: 0; }
  .set-combo input { width: 100%; min-width: 0; }
  .set-drop { position: fixed; left: 10px; right: 10px; top: auto; width: auto; max-width: none; }
  main {
    padding: 12px max(12px, env(safe-area-inset-right, 0px)) 16px
      max(12px, env(safe-area-inset-left, 0px));
  }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .totals { flex-wrap: wrap; gap: 12px; }
  .totals > div { flex: 1 1 120px; min-width: 0; }
  .card:has(> table), .planner {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  #guideBody > details.planner {
    width: min(100%, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    min-width: 0;
  }
  .guide-nav { flex-wrap: wrap; }
  .guide-nav .nav-mid { min-width: min(230px, 100%); }
  .spread { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .watch-stage-bar { position: static; gap: 12px; }
  .watch-stage-copy, .watch-stage-totals { flex: 1 1 130px; min-width: 0; }
  .watch-percent { flex: 1 1 150px; min-width: 0; }
  .watch-stage-actions { flex: 1 0 100%; margin-left: 0; }
  .watch-stage-actions .btn { flex: 1 1 180px; justify-content: center; min-height: 44px; }
  .wsheet { width: 100%; padding: 14px; border-radius: 10px; }
  .wsheet-head h1 { font-size: 18px; }
  .wsheet-meta { flex-wrap: wrap; gap: 4px 12px; }
  .watch-paper-page { padding: 24px; }
}

@media screen and (max-width: 560px) {
  .wsheet .wcards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .watch-paper-stack { gap: 14px; margin-top: 14px; }
  .watch-paper-page { min-height: 0; padding: 16px 12px; }
  .watch-paper-head { gap: 8px; padding-bottom: 10px; }
  .watch-paper-brand { gap: 7px; }
  .watch-paper-brand img { width: 34px; height: 34px; border-radius: 8px; }
  .watch-paper-brand strong { font-size: 15px; }
  .watch-paper-brand small { font-size: 7.5px; letter-spacing: .09em; }
  .watch-paper-page-meta { font-size: 8px; }
  .watch-paper-page-meta strong { font-size: 9px; }
  .watch-paper-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 10px; }
  .watch-paper-summary > div { padding: 7px 8px; border-bottom: 1px solid #d8dde7; }
  .watch-paper-summary > div:nth-child(2n) { border-right: 0; }
  .watch-paper-summary > div:nth-last-child(-n+2) { border-bottom: 0; }
  .watch-paper-summary span { font-size: 7px; }
  .watch-paper-summary strong { font-size: 10px; }
  .watch-paper-column-head,
  .watch-paper-stage { grid-template-columns: 24px 32px minmax(0, 1fr) 62px; gap: 7px; }
  .watch-paper-column-head { padding: 12px 38px 5px 6px; }
  .watch-paper-column-head span:nth-child(4),
  .watch-paper-column-head span:nth-child(5),
  .watch-paper-finish,
  .watch-paper-market { display: none; }
  .watch-paper-column-head span:last-child { display: block; text-align: right; }
  .watch-paper-page.no-prices .watch-paper-column-head,
  .watch-paper-page.no-prices .watch-paper-stage { grid-template-columns: 24px 32px minmax(0, 1fr); }
  .watch-paper-page.no-prices .watch-paper-column-head span:nth-child(3) { grid-column: 3; }
  .watch-paper-stage { min-height: 52px; padding: 4px 36px 4px 6px; }
  .watch-paper-check { width: 18px; height: 18px; font-size: 11px; }
  .watch-paper-page .watch-paper-art { width: 29px; }
  .watch-paper-name { font-size: 10px; }
  .watch-paper-card small { font-size: 8px; }
  .watch-paper-money small { font-size: 6px; }
  .watch-paper-money strong { font-size: 9.5px; }
  .watch-paper-footer { grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 13px; }
  .watch-paper-footer span:last-child { grid-column: 1 / -1; }
  #panel-sheet > .card > .toolbar > .field.inline {
    flex: 1 0 100%;
    align-items: stretch;
  }
  #panel-sheet > .card > .toolbar > .field.inline select { flex: 1; width: 100%; }
  #panel-sheet > .card > .toolbar > .check.inline { flex: 1 1 calc(50% - 6px); }
  #panel-sheet > .card > .toolbar > .btn,
  #panel-sheet > .card > .toolbar > #shImgMode { flex: 1 1 calc(50% - 6px); }
  #panel-sheet > .card > .toolbar > .btn { justify-content: center; }
  .wgrouphead { gap: 6px; }
  .wgrouphead span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wname { font-size: 11px; }
  .wsub { min-width: 0; }
  .wset { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media screen and (max-width: 380px) {
  .topbar { gap: 6px; }
  .brand h1 { font-size: 14px; }
  .logo { width: 27px; height: 27px; }
  .top-actions { gap: 4px; }
  .icon-btn { padding-inline: 8px; }
  .tab { font-size: 12px; padding-inline: 7px; }
  main { padding-inline: 8px; }
  .card { padding: 12px; }
  .wsheet { padding: 10px; }
  .watch-paper-page { padding-inline: 9px; }
}

/* The theme switch stays reachable without competing with account controls in
   the header. Safe-area offsets keep it clear of iPhone/iPad screen edges. */
.theme-fab {
  position: fixed;
  left: max(12px, env(safe-area-inset-left, 0px));
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  z-index: 64;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bg-2) 90%, transparent);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(12px);
  font-size: 18px;
}
.theme-fab:hover { border-color: var(--accent); transform: translateY(-1px); }
.theme-fab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ------------------------------------------------------------- accounts */

.account-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
  background: color-mix(in srgb, #05070b 82%, transparent);
  backdrop-filter: blur(12px);
}
.account-overlay[data-locked="true"] { background: var(--bg); }
.account-card {
  position: relative;
  width: min(440px, 100%);
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--bg-2);
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.48);
  text-align: center;
}
.account-card h2 { margin-bottom: 8px; font-size: 21px; }
.account-card > p { color: var(--ink-2); }
.account-logo { width: 72px; height: 72px; margin: 0 auto 12px; border-radius: 17px; }
.account-providers { display: grid; gap: 10px; margin-top: 22px; }
.account-provider {
  display: grid;
  grid-template-columns: 28px 1fr 28px;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-3);
  color: var(--ink);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.account-provider span:last-child { grid-column: 2; }
.account-provider:hover { border-color: var(--accent); }
.account-provider:disabled { opacity: 0.55; cursor: wait; }
.google-g { color: #4285f4; font-size: 18px; }
.account-provider-apple { grid-template-columns: 44px minmax(0, 1fr); min-height: 44px; padding: 0 9px 0 0; border-color: #fff; background: #fff; color: #000; }
.account-provider-apple:hover { border-color: #c8d2f5; }
.apple-mark { display: grid; place-items: center; width: 44px; height: 44px; font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: 23px; font-weight: 500; }
.account-provider-apple span:last-child { grid-column: 2; white-space: nowrap; font-size: 18px; }
.account-divider { display: flex; align-items: center; gap: 10px; margin: 18px 0; color: var(--ink-3); font-size: 12px; }
.account-divider::before, .account-divider::after { content: ''; height: 1px; background: var(--line); flex: 1; }
.account-guest-callout {
  margin-top: 2px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--warn) 55%, var(--line));
  border-radius: 11px;
  background: color-mix(in srgb, var(--warn) 8%, var(--bg-3));
  text-align: left;
}
.account-guest-callout strong { color: var(--warn); }
.account-guest-callout p { margin-top: 4px; color: var(--ink-2); font-size: 12.5px; }
.account-guest-callout .btn { width: 100%; justify-content: center; margin-top: 12px; }
.account-email-form { text-align: left; }
.account-email-form > label { display: block; margin-bottom: 6px; color: var(--ink-2); font-size: 12px; }
.account-email-row { display: flex; gap: 8px; }
.account-email-row input { flex: 1; min-width: 0; }
.account-privacy { margin-top: 18px; font-size: 12px; }
.account-close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: 0;
  background: none;
  color: var(--ink-2);
  font-size: 25px;
  cursor: pointer;
}
.account-signed-in { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 4px 0 18px; text-align: left; }
.account-signed-in img, .account-avatar { width: 52px; height: 52px; border-radius: 50%; }
.account-avatar { display: grid; place-items: center; background: var(--bg-3); font-size: 24px; }
.account-signed-in p { color: var(--ink-2); font-size: 13px; }
.account-card > .btn { margin-top: 20px; }
.account-legal { margin-top: 18px; color: var(--ink-3); font-size: 11.5px; }
.account-legal a, .app-footer a { color: var(--ink-2); }
.account-actions { display: flex; justify-content: center; gap: 9px; flex-wrap: wrap; }
.account-settings-links {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  text-align: left;
}
.account-settings-links .btn, .account-settings-links a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg-3);
  color: var(--ink);
  font-size: 13px;
  text-decoration: none;
}
.account-settings-links a:hover { border-color: var(--accent); }
.account-settings-links + .account-guest-callout { margin-top: 16px; }
.account-technical { margin-top: 14px; color: var(--ink-3); font-size: 12px; text-align: left; }
.account-technical summary { cursor: pointer; }
.account-technical p { margin-top: 7px; }
.account-delete {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  text-align: left;
}
.account-delete > button { color: var(--bad); }
.account-delete-confirm { margin-top: 12px; padding: 12px; border: 1px solid color-mix(in srgb, var(--bad) 45%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--bad) 7%, var(--bg-3)); }
.account-delete-confirm p { margin-bottom: 9px; color: var(--ink-2); font-size: 12.5px; }
.account-delete-confirm label { display: block; margin-bottom: 7px; color: var(--ink-2); font-size: 12px; }
.account-delete-confirm input { width: 100%; }
.account-delete-confirm .row { margin-top: 10px; }
.account-delete-confirm .btn.danger { color: #fff; border-color: var(--bad); background: var(--bad); }
.account-message {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 101;
  translate: -50% 0;
  max-width: min(440px, calc(100% - 40px));
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg-2);
  color: var(--ink-2);
  text-align: center;
}
.account-message[data-kind="error"] { color: var(--bad); }
.account-message[data-kind="success"] { color: var(--ok); }

.guest-warning {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 1400px;
  margin: 12px auto 0;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--warn) 58%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--warn) 9%, var(--bg-2));
}
.guest-warning > div { display: flex; flex-direction: column; min-width: 0; }
.guest-warning strong { color: var(--warn); font-size: 13px; }
.guest-warning span { color: var(--ink-2); font-size: 12px; }
.guest-warning .btn { flex: none; margin-left: auto; }

@media (max-width: 520px) {
  .account-card { padding: 25px 18px; }
  .account-email-row { flex-direction: column; }
  .account-email-row .btn { width: 100%; }
  .guest-warning { align-items: stretch; flex-direction: column; margin: 8px 8px 0; gap: 9px; }
  .guest-warning .btn { width: 100%; justify-content: center; margin-left: 0; }
}

/* --------------------------------------------------------------- footer */

.app-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  max-width: 1400px;
  margin: 10px auto 0;
  padding: 18px max(20px, env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 11.5px;
}
.app-footer p { max-width: 780px; }
.app-footer nav { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.app-footer .footer-bug {
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--accent) 9%, var(--bg-2));
  color: var(--ink);
  font-weight: 650;
  text-decoration: none;
}
.app-footer .footer-bug:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--bg-2)); }
@media (max-width: 620px) {
  .app-footer { flex-direction: column; padding-inline: 12px; }
}
@media print { .app-footer, .theme-fab { display: none !important; } }

/* ----------------------------------------------------------------- shop */

.shop-hero { max-width: 560px; margin-inline: auto; text-align: center; }
.shop-hero .hint { margin: 10px 0 16px; }

.shop-profile { max-width: 640px; margin-inline: auto; }
.shop-id { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.shop-id img { width: 44px; height: 44px; border-radius: 50%; }
.shop-id > div { display: flex; flex-direction: column; }
.shop-id .btn { margin-left: auto; }
.shop-profile-form { display: flex; flex-direction: column; gap: 10px; }
.shop-profile-form label { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.shop-profile-form label input[type="text"] { flex: 1; }
.shop-profile-form .check { align-items: flex-start; }
.shop-profile-form .check em { display: block; color: var(--ink-3); font-style: normal; font-size: 12.5px; }
.shop-profile-form .btn { align-self: flex-start; }

.shop-collectors { display: flex; flex-direction: column; gap: 8px; }
.shop-collector {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 14px; color: var(--ink); font: inherit; cursor: pointer;
}
.shop-collector:hover { border-color: var(--accent); }
.shop-collector img, .shop-avatar { width: 34px; height: 34px; border-radius: 50%; flex: none; }
.shop-avatar { display: grid; place-items: center; background: var(--bg-2); }
.shop-collector-name { display: flex; flex-direction: column; flex: 1; min-width: 0; }

.shop-viewer-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.shop-set { border-top: 1px solid var(--line); padding: 8px 0; }
.shop-set summary { cursor: pointer; display: flex; gap: 10px; align-items: baseline; }
.shop-card-row {
  display: flex; align-items: center; gap: 8px; padding: 5px 0 5px 14px;
  font-size: 13.5px; border-top: 1px dashed color-mix(in srgb, var(--line) 55%, transparent);
}
.shop-card-row .num { color: var(--ink-3); font-variant-numeric: tabular-nums; min-width: 34px; }
.shop-card-row .btn { margin-left: auto; font-size: 12px; padding: 4px 10px; }
.shop-offer-form { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.shop-offer-form .btn { margin-left: 0; }

.shop-offer {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-top: 1px solid var(--line); padding: 10px 0; font-size: 14px;
}
.shop-offer-actions { display: flex; gap: 8px; flex: none; }

/* --------------------------------------------------------------- export */

.export-modal {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.55);
}
.export-card { width: min(460px, 92vw); margin: 0; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5); }
.export-card .row { align-items: center; }
.export-card .check em { display: block; color: var(--ink-3); font-style: normal; font-size: 12px; }
@media print { .export-modal { display: none !important; } }

/* The synthesised foil shimmer is retired everywhere — real scans or clean
   base art only. Kept as a hard off-switch in case any cached markup lingers. */
.foil { display: none !important; }

/* ------------------------------------------------------- synthetic foil */

/* Take three: fine iridescent striping that reads as FOIL — thin rainbow
   bands + one soft glint, overlay-blended so darks stay dark and text stays
   readable. Holo covers the card; reverse foils the FRAME only — the art
   window is punched out via -webkit-mask (Chrome-native; the standard
   `mask` shorthand ALIASES the same longhands and silently resets the
   composite, which is why take two washed the whole card — never mix them). */
.sheen {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background:
    linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.30) 46%, transparent 60%),
    repeating-linear-gradient(
      115deg,
      rgba(255, 110, 190, 0.22) 0 6px,
      rgba(120, 200, 255, 0.24) 6px 12px,
      rgba(140, 255, 190, 0.22) 12px 18px,
      rgba(255, 220, 120, 0.20) 18px 24px
    );
  mix-blend-mode: overlay;
}
.sheen.reverse {
  -webkit-mask: linear-gradient(#000 0 0), linear-gradient(#000 0 0) 50% 20%/84% 42% no-repeat;
  -webkit-mask-composite: xor;
}
@media print { .sheen { display: none !important; } }

/* -------------------------------------------------- pattern placeholders */

/* Poke Ball / Master Ball pockets WITHOUT a real scan yet: a synthesized
   pattern — darkened card + staggered ball watermark — matching what the
   real scans look like at binder size. Real photos replace these as
   TCGplayer photographs them (scripts/fetch-variant-art.mjs). */
.pat {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background-color: rgba(14, 24, 20, 0.38);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.42' stroke-width='1.1'%3E%3Ccircle cx='11' cy='11' r='6.2'/%3E%3Cpath d='M4.8 11h12.4'/%3E%3C/g%3E%3Ccircle cx='11' cy='11' r='1.7' fill='%23ffffff' fill-opacity='.42'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.42' stroke-width='1.1'%3E%3Ccircle cx='11' cy='11' r='6.2'/%3E%3Cpath d='M4.8 11h12.4'/%3E%3C/g%3E%3Ccircle cx='11' cy='11' r='1.7' fill='%23ffffff' fill-opacity='.42'/%3E%3C/svg%3E");
  background-size: 22px 22px, 22px 22px;
  background-position: 0 0, 11px 11px;
}
.pat.mball {
  background-color: rgba(52, 22, 66, 0.42);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M4.8 11a6.2 6.2 0 0 1 12.4 0z' fill='%23e09cff' fill-opacity='.38'/%3E%3Cg fill='none' stroke='%23f0d0ff' stroke-opacity='.5' stroke-width='1.1'%3E%3Ccircle cx='11' cy='11' r='6.2'/%3E%3Cpath d='M4.8 11h12.4'/%3E%3C/g%3E%3Ccircle cx='11' cy='11' r='1.7' fill='%23f0d0ff' fill-opacity='.5'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M4.8 11a6.2 6.2 0 0 1 12.4 0z' fill='%23e09cff' fill-opacity='.38'/%3E%3Cg fill='none' stroke='%23f0d0ff' stroke-opacity='.5' stroke-width='1.1'%3E%3Ccircle cx='11' cy='11' r='6.2'/%3E%3Cpath d='M4.8 11h12.4'/%3E%3C/g%3E%3Ccircle cx='11' cy='11' r='1.7' fill='%23f0d0ff' fill-opacity='.5'/%3E%3C/svg%3E");
  background-size: 22px 22px, 22px 22px;
  background-position: 0 0, 11px 11px;
}
@media print { .pat { display: none !important; } }

/* --------------------------------------------------------- started sets */

/* "Mine" in the planner: binders you've ordered, started, or bid on. */
.planner tr.pstarted { background: color-mix(in srgb, var(--ok) 8%, transparent); }
.planner .pstart { width: 15px; height: 15px; accent-color: var(--ok); cursor: pointer; }
.set-drop .sdot { color: var(--ok); flex: none; font-size: 10px; }
.set-drop .sstart { flex: none; width: 15px; height: 15px; margin-left: 4px; accent-color: var(--ok); cursor: pointer; }
/* Master ticks: gold, and a mastered row outshines the in-progress green. */
.planner .pmaster, .set-drop .smaster { accent-color: var(--warn); }
.planner tr.pmastered { background: color-mix(in srgb, var(--warn) 10%, transparent); }
/* Shaded fillers: same dim as owned cards, minus the cross — decor recedes. */
.pocket.efill.shaded img { filter: grayscale(0.8) brightness(0.45); }
.pocket.efill.shaded .efill-tag { opacity: 0.55; }

/* ---------------------------------------------------------- Community */

.community-shell { width: min(1180px, 100%); margin-inline: auto; }
.community-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  margin-bottom: 16px; padding: 10px 2px 0;
}
.community-head h2 { font-size: clamp(28px, 4vw, 45px); letter-spacing: -.045em; }
.community-head > div > p:last-child { max-width: 640px; margin-top: 6px; color: var(--ink-2); }
.community-head .home-kicker { margin-bottom: 4px; }
.community-nav { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); }
.community-nav button {
  display: flex; align-items: center; gap: 6px; min-height: 38px; padding: 7px 12px;
  border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font: inherit; cursor: pointer;
}
.community-nav button:hover, .community-nav button.is-active { background: var(--bg-3); color: var(--ink); }
.community-nav button span { display: grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px; background: var(--accent); color: #fff; font-size: 10px; }
.community-mark { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 15px; background: color-mix(in srgb, var(--accent) 18%, var(--bg-3)); color: var(--accent); font-size: 28px; }
.community-feed-layout, .community-profile-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 14px; align-items: start; }
.community-feed-layout > section { min-width: 0; }
.community-safety { position: sticky; top: 92px; margin: 0; }
.community-safety h3 { margin-bottom: 7px; font-size: 15px; }
.community-safety p { margin-bottom: 12px; color: var(--ink-2); font-size: 12.5px; }
.community-composer label { display: block; margin-bottom: 7px; font-weight: 700; }
.community-composer textarea, .chat-compose textarea {
  width: 100%; resize: vertical; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg-3); color: var(--ink); padding: 10px 12px; font: inherit;
}
.community-composer textarea:focus, .chat-compose textarea:focus { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); border-color: var(--accent); }
.community-composer-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.community-composer-actions select { flex: 1; min-width: 0; }
.community-photo-picker { position: relative; cursor: pointer; white-space: nowrap; }
.community-photo-preview { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-top: 9px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-3); }
.community-photo-preview[hidden] { display: none; }
.community-photo-preview img { width: 72px; height: 54px; border-radius: 8px; object-fit: cover; }
.community-photo-preview span { color: var(--ink-3); font-size: 11px; }
.community-composer > .hint { display: block; }
.community-feed { display: grid; gap: 10px; }
.community-post { margin: 0; }
.community-post-head { display: flex; align-items: center; gap: 10px; }
.community-post-head > img, .community-post-head > .shop-avatar { width: 38px; height: 38px; border-radius: 50%; flex: none; }
.community-post-head > button { display: flex; flex-direction: column; min-width: 0; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.community-post-head > button span { color: var(--ink-3); font-size: 11px; }
.community-post-menu { display: flex; gap: 4px; margin-left: auto; }
.community-post-menu .btn { padding: 4px 7px; font-size: 11px; }
.community-post > p { margin: 12px 0; white-space: pre-wrap; }
.community-post-photo { position: relative; display: grid; place-items: center; width: min(100%, 680px); min-height: 180px; margin: 12px 0 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; aspect-ratio: var(--photo-ratio, 4 / 3); background: var(--bg-3); }
.community-post-photo > span { color: var(--ink-3); font-size: 12px; }
.community-post-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #090c12; }
.community-post-card { display: grid; grid-template-columns: 78px minmax(0, 1fr); align-items: center; gap: 14px; padding: 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-3); }
.community-post-card img { width: 78px; aspect-ratio: var(--card-aspect); border-radius: 7px; object-fit: cover; }
.community-post-card > div { display: flex; flex-direction: column; }
.community-post-card > div b { font-size: 15px; }
.community-post-card > div span { color: var(--ink-3); font-size: 12px; }
.community-section-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 10px 2px 16px; }
.community-section-title h2 { font-size: 25px; }
.community-section-title p { margin-top: 4px; color: var(--ink-2); }
.shop-collectors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.shop-collector-card { margin: 0; }
.shop-collector-card .shop-collector { padding: 0 0 12px; border: 0; background: transparent; cursor: default; }
.shop-collector-actions { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.shop-collector-actions .btn { flex: 1 1 auto; justify-content: center; font-size: 12px; }
.shop-profile { max-width: none; margin: 0; }
.shop-profile-form input[type="text"], .shop-profile-form select { width: 100%; }
.shop-profile-form > label:not(.check) { display: grid; grid-template-columns: 135px minmax(0, 1fr); }
.community-binder-picker { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-3); }
.community-binder-picker > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; max-height: 240px; overflow: auto; }
.community-binder-picker .check { min-width: 0; }
.community-binder-picker .check span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.community-binder-picker .check em { color: var(--ink-3); font-size: 10px; }
.community-blocked-list { display: grid; gap: 6px; }
.community-blocked { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.community-blocked code { color: var(--ink-3); font-size: 10px; }
.community-binder-set { margin-bottom: 22px; }
.community-binder-set > h3 { display: flex; align-items: center; gap: 8px; margin: 0 2px 9px; font-size: 17px; }
.community-binder-set > h3 span { padding: 2px 7px; border-radius: 99px; background: var(--bg-3); color: var(--ink-3); font-size: 10px; }
.community-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.community-card-tile { position: relative; display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg-2); }
.community-card-tile > img { width: 70px; aspect-ratio: var(--card-aspect); border-radius: 5px; object-fit: cover; }
.community-card-tile > div { display: flex; min-width: 0; flex-direction: column; }
.community-card-tile > div b, .community-card-tile > div span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.community-card-tile > div b { font-size: 12px; }
.community-card-tile > div span { color: var(--ink-3); font-size: 10px; }
.community-card-tile > .btn { grid-column: 1 / -1; justify-content: center; padding-block: 5px; }
.shop-offer-form { grid-column: 1 / -1; display: grid; grid-template-columns: 100px minmax(0, 1fr) auto auto; margin: 0; }
.shop-offer-form input { width: 100% !important; }
.shop-offer { margin-bottom: 9px; }

/* ------------------------------------------------------ private chat */

.community-chat-fab {
  position: fixed; right: max(12px, env(safe-area-inset-right, 0px)); bottom: max(12px, env(safe-area-inset-bottom, 0px)); z-index: 64;
  display: flex; align-items: center; gap: 7px; min-height: 46px; padding: 0 15px; border-radius: 99px;
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent) 18%, var(--bg-2));
  box-shadow: 0 8px 26px rgba(0,0,0,.3); backdrop-filter: blur(12px); font-weight: 750;
}
.community-chat-fab > span:first-child { color: var(--accent); }
.community-chat-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(4,7,13,.58); backdrop-filter: blur(3px); }
.community-chat-drawer {
  position: absolute; right: max(12px, env(safe-area-inset-right, 0px)); bottom: max(66px, calc(58px + env(safe-area-inset-bottom, 0px)));
  display: grid; grid-template-columns: 250px minmax(0, 1fr); width: min(760px, calc(100vw - 24px)); height: min(590px, calc(100dvh - 100px));
  overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--bg-2); box-shadow: 0 28px 90px rgba(0,0,0,.55);
}
.community-chat-drawer > .account-close { z-index: 2; top: 9px; right: 10px; }
.community-chat-list { min-width: 0; overflow: hidden; border-right: 1px solid var(--line); }
.chat-list-head { display: flex; align-items: center; justify-content: space-between; min-height: 58px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.chat-list { height: calc(100% - 58px); overflow-y: auto; }
.chat-list > button { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; padding: 10px 11px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.chat-list > button:hover, .chat-list > button.is-active { background: var(--bg-3); }
.chat-list > button > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; }
.chat-list b, .chat-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-list small, .chat-list time { color: var(--ink-3); font-size: 9.5px; }
.chat-list > .hint { padding: 16px; }
.community-chat-thread { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; }
.chat-thread-head { display: flex; align-items: center; gap: 9px; min-height: 58px; padding: 9px 50px 9px 12px; border-bottom: 1px solid var(--line); }
.chat-thread-head > div { display: flex; flex: 1; min-width: 0; flex-direction: column; }
.chat-thread-head > div span { color: var(--ink-3); font-size: 10px; }
.chat-back { display: none; }
.chat-messages { display: flex; flex-direction: column; gap: 7px; overflow-y: auto; padding: 14px; }
.chat-messages article { max-width: min(78%, 420px); padding: 8px 10px; border-radius: 11px; background: var(--bg-3); }
.chat-messages article.mine { align-self: flex-end; background: color-mix(in srgb, var(--accent) 25%, var(--bg-3)); }
.chat-messages article.theirs { align-self: flex-start; }
.chat-messages article p { white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-messages article footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 3px; color: var(--ink-3); font-size: 9px; }
.chat-messages article footer button { padding: 0; border: 0; background: none; color: var(--ink-3); font: inherit; cursor: pointer; }
.chat-compose { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; padding: 10px; border-top: 1px solid var(--line); }
.chat-empty { display: grid; place-content: center; justify-items: center; min-height: 160px; padding: 24px; color: var(--ink-3); text-align: center; }
.chat-empty > span { font-size: 28px; color: var(--accent); }

@media (max-width: 900px) {
  .community-head { align-items: stretch; flex-direction: column; gap: 14px; }
  .community-nav { align-self: flex-start; }
  .community-feed-layout, .community-profile-layout { grid-template-columns: minmax(0, 1fr); }
  .community-safety { position: static; }
  .community-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
  .community-head { padding-top: 0; }
  .community-nav { width: 100%; overflow-x: auto; }
  .community-nav button { flex: 1 0 auto; justify-content: center; }
  .community-composer-actions, .community-post-head { align-items: stretch; flex-direction: column; }
  .community-photo-preview { grid-template-columns: 62px minmax(0, 1fr) auto; }
  .community-photo-preview img { width: 62px; height: 48px; }
  .community-post-head > img, .community-post-head > .shop-avatar { align-self: flex-start; }
  .community-post-menu { width: 100%; margin: 4px 0 0; }
  .community-post-menu .btn { flex: 1; justify-content: center; }
  .shop-collectors, .community-card-grid { grid-template-columns: minmax(0, 1fr); }
  .shop-profile-form > label:not(.check) { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .community-binder-picker > div { grid-template-columns: minmax(0, 1fr); }
  .community-section-title { align-items: stretch; flex-direction: column; }
  .shop-offer { align-items: stretch; flex-direction: column; }
  .shop-offer-actions { width: 100%; }
  .shop-offer-actions .btn { flex: 1; justify-content: center; }
  .shop-offer-form { grid-template-columns: 1fr 1fr; }
  .shop-offer-form input { grid-column: 1 / -1; }
  .community-chat-fab { width: 46px; padding: 0; justify-content: center; border-radius: 50%; }
  .community-chat-fab > span:last-child { display: none; }
  .community-chat-drawer { inset: env(safe-area-inset-top, 0px) 0 0; width: 100%; height: auto; border: 0; border-radius: 0; }
  .community-chat-drawer { grid-template-columns: 1fr; }
  .community-chat-list, .community-chat-thread { grid-area: 1 / 1; background: var(--bg-2); }
  .community-chat-drawer[data-thread="open"] .community-chat-list { display: none; }
  .community-chat-drawer[data-thread="closed"] .community-chat-thread { display: none; }
  .chat-back { display: inline-flex; }
}
@media print {
  .community-chat-fab, .community-chat-overlay { display: none !important; }
}

/* ==============================================================
   Release 37 — Midnight Gallery
   A collector-first visual system: deep neutral surfaces keep the card art
   dominant, cobalt marks interaction, and gold is reserved for milestones.
   Screen-only overrides protect the literal white-paper Watchlist export.
   ============================================================== */

@media screen {
  :root { --good: var(--ok); }

  html { background: var(--bg); scroll-behavior: smooth; }
  body {
    min-height: 100dvh;
    background:
      radial-gradient(circle at 12% -12%, color-mix(in srgb, var(--accent) 12%, transparent) 0, transparent 31rem),
      radial-gradient(circle at 92% 18%, color-mix(in srgb, var(--gold) 5%, transparent) 0, transparent 28rem),
      var(--bg);
  }
  button, input, select, textarea { font-family: inherit; }
  button, .btn, .tab, .pocket.clickable { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  :where(button, input, select, textarea, a):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 72%, white);
    outline-offset: 3px;
  }
  ::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--ink); }

  .topbar {
    gap: 10px;
    min-height: 68px;
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    padding-bottom: 10px;
    border-color: color-mix(in srgb, var(--line) 82%, transparent);
    background: color-mix(in srgb, var(--bg-2) 86%, transparent);
    box-shadow: 0 12px 38px rgba(0, 0, 0, .2);
    backdrop-filter: blur(22px) saturate(140%);
  }
  .brand { gap: 10px; padding-right: 4px; }
  .logo {
    width: 38px;
    height: 38px;
    border: 1px solid color-mix(in srgb, var(--gold) 36%, var(--line));
    border-radius: 11px;
    box-shadow: 0 8px 24px rgba(0,0,0,.28), 0 0 0 3px color-mix(in srgb, var(--accent) 8%, transparent);
  }
  .brand h1 {
    color: var(--gold);
    font-size: 17px;
    font-weight: 850;
    letter-spacing: -.02em;
    -webkit-text-stroke: 0;
    text-shadow: 0 2px 16px color-mix(in srgb, var(--gold) 18%, transparent);
  }
  .brand:hover h1 { color: color-mix(in srgb, var(--gold) 82%, white); }
  .sub { max-width: 155px; color: var(--ink-3); font-size: 10px; }

  .tabs {
    align-items: center;
    gap: 3px;
    padding: 4px;
    border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg) 58%, transparent);
  }
  .tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 7px 10px;
    border-radius: 10px;
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 680;
    line-height: 1;
    transition: color .16s ease, background .16s ease, box-shadow .16s ease;
  }
  .tab-icon {
    display: block;
    width: 16px;
    height: 16px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .tab:hover { color: var(--ink); background: color-mix(in srgb, var(--bg-elevated) 82%, transparent); }
  .tab.is-active {
    border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 20%, var(--bg-elevated)), color-mix(in srgb, var(--accent) 12%, var(--bg-3)));
    color: var(--ink);
    box-shadow: 0 5px 16px color-mix(in srgb, var(--accent) 10%, transparent), inset 0 1px rgba(255,255,255,.06);
  }
  .tab.is-active .tab-icon { color: var(--accent); }

  .progress-block { min-width: 145px; }
  .progress-nums strong { font-size: 18px; font-variant-numeric: tabular-nums; }
  .bar { height: 7px; background: color-mix(in srgb, var(--bg-3) 80%, black); }
  .bar-fill { background: linear-gradient(90deg, var(--accent-strong), var(--accent), var(--ok)); box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 45%, transparent); }

  .set-combo input,
  select, input[type="number"], input[type="text"], input[type="search"], textarea {
    min-height: 40px;
    border-color: var(--line);
    border-radius: 11px;
    background: color-mix(in srgb, var(--bg-3) 90%, transparent);
    color: var(--ink);
  }
  .set-combo input { width: 190px; padding-inline: 12px; }
  input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 1; }
  .set-drop {
    margin-top: 3px;
    padding: 7px;
    border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
    border-radius: 15px;
    background: color-mix(in srgb, var(--bg-2) 96%, transparent);
    box-shadow: 0 24px 70px rgba(0,0,0,.48);
    backdrop-filter: blur(20px);
  }
  .set-drop .row { min-height: 40px; border-radius: 10px; }

  main { max-width: 1480px; padding: 24px; }
  .card,
  .portfolio-kpis article,
  .portfolio-card,
  .community-post,
  .shop-collector-card {
    border-color: color-mix(in srgb, var(--line) 88%, transparent);
    background: linear-gradient(145deg, color-mix(in srgb, var(--bg-elevated) 76%, var(--bg-2)), var(--bg-2));
    box-shadow: 0 14px 38px rgba(0,0,0,.14), inset 0 1px rgba(255,255,255,.025);
  }
  .card { padding: 20px; }
  .card > h2 { font-size: 17px; }
  .hint { color: var(--ink-3); font-size: 13px; line-height: 1.55; }

  .btn {
    min-height: 40px;
    justify-content: center;
    padding: 9px 15px;
    border-color: var(--line);
    border-radius: 11px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 92%, white 2%), var(--bg-3));
    color: var(--ink);
    font-size: 14px;
    font-weight: 680;
    box-shadow: inset 0 1px rgba(255,255,255,.04);
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
  }
  .btn:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 8%, var(--bg-3)); }
  .btn:active { transform: translateY(1px); }
  .btn.primary {
    border-color: color-mix(in srgb, var(--accent) 76%, white);
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    color: var(--on-accent);
    font-weight: 800;
    box-shadow: 0 10px 25px color-mix(in srgb, var(--accent-strong) 24%, transparent), inset 0 1px rgba(255,255,255,.24);
  }
  .btn.primary:hover { filter: none; border-color: color-mix(in srgb, var(--accent) 62%, white); box-shadow: 0 13px 30px color-mix(in srgb, var(--accent-strong) 34%, transparent); }
  .btn.ghost { background: color-mix(in srgb, var(--bg-3) 38%, transparent); }
  .seg { padding: 3px; border-radius: 12px; background: color-mix(in srgb, var(--bg) 55%, transparent); }
  .seg button { min-height: 36px; border-radius: 8px; background: transparent; color: var(--ink-2); }
  .seg button.is-active { background: var(--accent); color: var(--on-accent); font-weight: 750; box-shadow: 0 5px 15px color-mix(in srgb, var(--accent) 20%, transparent); }
  .chips button { min-height: 42px; border-radius: 11px; background: var(--bg-3); }

  /* Home: real art is the hero, never a decorative thumbnail. */
  .home-panel { padding-top: clamp(6px, 1.5vw, 20px); }
  .home-hero {
    grid-template-columns: minmax(340px, .78fr) minmax(560px, 1.22fr);
    gap: clamp(34px, 4vw, 72px);
    min-height: min(760px, calc(100dvh - 112px));
    padding: clamp(38px, 5vw, 76px);
    border-color: color-mix(in srgb, var(--accent) 20%, var(--line));
    border-radius: 30px;
    background:
      linear-gradient(118deg, color-mix(in srgb, var(--bg-2) 97%, transparent) 0 44%, color-mix(in srgb, var(--accent) 7%, var(--bg-2)) 100%),
      var(--bg-2);
    box-shadow: 0 32px 100px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.035);
  }
  .home-hero::before {
    width: 460px;
    height: 460px;
    right: -190px;
    top: -250px;
    border-color: color-mix(in srgb, var(--accent) 25%, transparent);
    box-shadow: 0 0 0 72px color-mix(in srgb, var(--accent) 4%, transparent), 0 0 0 144px color-mix(in srgb, var(--accent) 2%, transparent);
  }
  .home-kicker { color: var(--accent); font-size: 12px; font-weight: 850; letter-spacing: .13em; }
  .home-kicker span { width: 30px; background: linear-gradient(90deg, var(--gold), var(--accent)); }
  .home-copy h2 { max-width: 650px; font-size: clamp(48px, 5vw, 76px); font-weight: 820; line-height: .96; letter-spacing: -.062em; }
  .home-copy h2 span {
    color: transparent;
    background: linear-gradient(100deg, var(--accent), color-mix(in srgb, var(--accent) 52%, var(--gold)));
    background-clip: text;
    -webkit-background-clip: text;
  }
  .home-lead { max-width: 620px; color: var(--ink-2); font-size: clamp(17px, 1.45vw, 20px); }
  .home-actions { margin-top: 32px; }
  .home-actions .btn { min-height: 52px; padding-inline: 21px; }
  .home-fine { color: var(--ink-3); font-size: 13px; }
  .home-fine strong { color: var(--ink-2); }

  .home-showcase { min-height: 570px; perspective: 1400px; }
  .home-market-preview,
  .home-binder-preview {
    border-color: color-mix(in srgb, var(--accent) 31%, var(--line));
    background: color-mix(in srgb, var(--bg-2) 90%, transparent);
    box-shadow: 0 36px 90px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.05);
    backdrop-filter: blur(24px) saturate(130%);
  }
  .home-market-preview { width: min(100%, 690px); padding: 22px; border-radius: 24px; transform: rotate(.7deg) translateZ(0); }
  .home-preview-top strong { font-size: 22px; }
  .home-preview-top span { color: var(--ink-3); font-size: 10px; font-weight: 800; }
  .home-live-badge { background: color-mix(in srgb, var(--ok) 14%, var(--bg-3)); color: var(--ok) !important; }
  .home-market-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 19px 0; }
  .home-market-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-content: start;
    justify-items: center;
    gap: 8px;
    min-width: 0;
    padding: 14px 10px 12px;
    border-color: color-mix(in srgb, var(--accent) 16%, var(--line));
    border-radius: 15px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--bg-elevated) 84%, transparent), color-mix(in srgb, var(--bg-3) 78%, transparent));
    text-align: center;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  }
  .home-market-row > span { align-items: center; width: 100%; }
  .home-market-row strong { width: 100%; color: var(--ink); font-size: 14px; }
  .home-market-row small { width: 100%; color: var(--ink-3); font-size: 10px; }
  .home-market-row b { color: var(--gold); font-size: 16px; font-variant-numeric: tabular-nums; }
  .home-card-mini {
    width: clamp(92px, 9.2vw, 126px);
    height: auto;
    border: 1px solid color-mix(in srgb, white 26%, transparent);
    border-radius: 8px;
    object-fit: contain;
    filter: saturate(1.08) contrast(1.03);
    box-shadow: 0 16px 28px rgba(0,0,0,.42), 0 2px 0 rgba(255,255,255,.1);
  }
  .home-market-foot { padding-top: 17px; }
  .home-market-foot strong { color: var(--ink); font-size: 22px; }
  .home-binder-preview { right: -8px; bottom: -6px; width: min(56%, 350px); padding: 16px; border-radius: 20px; }
  .home-binder-head small { color: var(--gold); }
  .home-binder-head > b { background: color-mix(in srgb, var(--accent) 16%, var(--bg-3)); color: var(--accent); }
  .home-binder-grid { gap: 7px; padding: 10px; border-color: color-mix(in srgb, var(--accent) 25%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--bg) 67%, transparent); }
  .home-binder-grid > span { border-radius: 6px; box-shadow: 0 5px 12px rgba(0,0,0,.25); }
  .home-binder-grid img { object-fit: contain; filter: saturate(1.05); }
  .home-binder-grid .is-empty { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 6%, transparent); }

  .home-value-grid { gap: 16px; margin-top: 22px; }
  .home-value-grid article { position: relative; overflow: hidden; padding: 27px; border-radius: 20px; }
  .home-value-grid article::after { content: ''; position: absolute; inset: auto -60px -80px auto; width: 150px; height: 150px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 6%, transparent); }
  .home-feature-icon { border-color: color-mix(in srgb, var(--gold) 38%, var(--line)); background: color-mix(in srgb, var(--gold) 8%, transparent); color: var(--gold); }
  .home-value-grid h3 { font-size: 18px; }
  .home-value-grid p { color: var(--ink-2); font-size: 14px; }
  .home-start { max-width: 1180px; }
  .home-start > div h2 { font-weight: 800; }

  /* Portfolio and social surfaces use the same elevated gallery language. */
  .portfolio-kpis { gap: 14px; }
  .portfolio-kpis article { padding: 21px; border-radius: 18px; }
  .portfolio-kpis small, .portfolio-card-head small, .portfolio-leaders small, .holdings-toolbar small { color: var(--ink-3); }
  .portfolio-kpis strong { color: var(--ink); font-weight: 800; }
  .portfolio-card { border-radius: 19px; }
  .portfolio-chart-line { stroke-width: 3.5; filter: drop-shadow(0 5px 8px color-mix(in srgb, var(--accent) 32%, transparent)); }
  .allocation-list i { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 30%, var(--bg-3)), color-mix(in srgb, var(--accent) 55%, var(--bg-3))); }
  .mover-row { min-height: 55px; }
  .mover-row img { width: 40px; border-radius: 5px; box-shadow: 0 5px 12px rgba(0,0,0,.28); }

  .community-head h2 { font-weight: 820; }
  .community-nav { padding: 5px; border-radius: 14px; background: color-mix(in srgb, var(--bg) 48%, transparent); }
  .community-nav button { min-height: 42px; border-radius: 10px; font-weight: 650; }
  .community-mark { background: color-mix(in srgb, var(--accent) 14%, var(--bg-3)); box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 12%, transparent); }
  .community-post-photo { border-radius: 18px; background: var(--bg); }
  .community-post-photo img { background: var(--bg); }
  .community-post-card, .community-card-tile { border-color: color-mix(in srgb, var(--accent) 12%, var(--line)); background: var(--bg-3); }
  .community-post-card img, .community-card-tile > img { object-fit: contain; background: var(--bg); box-shadow: 0 7px 18px rgba(0,0,0,.3); }

  /* Binder Guide: premium midnight folio, with the art as the brightest layer. */
  #panel-guide > .toolbar {
    position: sticky;
    top: 77px;
    z-index: 44;
    margin: -5px 0 15px;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
    border-radius: 15px;
    background: color-mix(in srgb, var(--bg-2) 88%, transparent);
    box-shadow: 0 12px 34px rgba(0,0,0,.2);
    backdrop-filter: blur(18px);
  }
  .guide-nav { margin-bottom: 18px; }
  .guide-nav .nav-turn { min-width: 116px; min-height: 46px; border-radius: 13px; font-weight: 800; }
  .guide-nav .nav-mid strong { font-size: 16px; }
  .spread {
    gap: 28px;
    padding: 24px;
    border-color: color-mix(in srgb, var(--gold) 28%, #263552);
    border-radius: 22px;
    background:
      linear-gradient(135deg, rgba(255,255,255,.035), transparent 34%),
      linear-gradient(155deg, #17243b, #090f1e 72%);
    box-shadow: 0 26px 70px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.06), inset 0 0 0 4px rgba(4,8,16,.32);
  }
  .spread:not(.single)::before { width: 8px; background: linear-gradient(90deg, rgba(0,0,0,.25), rgba(0,0,0,.82), rgba(255,255,255,.035)); box-shadow: 0 0 20px rgba(0,0,0,.7); }
  .spread:not(.single)::after { opacity: .8; filter: sepia(.25) saturate(.8); }
  .spread .binder-page { padding: 13px; border-color: color-mix(in srgb, var(--accent) 17%, var(--line)); border-radius: 13px; background: linear-gradient(145deg, #111b2d, #0b1220); box-shadow: inset 0 1px rgba(255,255,255,.045), 0 9px 22px rgba(0,0,0,.25); }
  .page-head { min-height: 24px; color: var(--ink-3); }
  .page-head strong { color: var(--ink-2); }
  .pockets { gap: 8px; }
  .pocket { border-color: color-mix(in srgb, var(--accent) 17%, var(--line)); border-radius: 8px; background: #0a111f; box-shadow: 0 8px 17px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.025); }
  .pocket img { object-fit: contain; filter: saturate(1.04) contrast(1.015); }
  .pocket .pname { backdrop-filter: blur(7px); }
  .pocket .pname .pprice { color: var(--gold); }
  .pocket.have { border-color: color-mix(in srgb, var(--ok) 32%, var(--line)); }
  .pocket.in-cart { outline-color: var(--ok); }

  .guest-warning { border-radius: 14px; background: color-mix(in srgb, var(--warn) 9%, var(--bg-2)); }
  .theme-fab, .community-chat-fab { border-color: color-mix(in srgb, var(--accent) 36%, var(--line)); background: color-mix(in srgb, var(--bg-elevated) 88%, transparent); box-shadow: 0 14px 34px rgba(0,0,0,.35); }
  .theme-fab { color: var(--gold); }
  .app-footer { color: var(--ink-3); }
}

@media screen and (hover: hover) and (pointer: fine) {
  .home-market-row:hover { z-index: 2; transform: translateY(-6px); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow: 0 20px 35px rgba(0,0,0,.28); }
  .pocket.clickable:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0,0,0,.36), 0 0 0 1px var(--accent); }
  .pocket { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
}

@media screen and (max-width: 1340px) {
  .topbar { gap: 8px; }
  .brand .sub { display: none; }
  .tab { padding-inline: 9px; }
  .tab-icon { display: none; }
  .set-combo input { width: 165px; }
  .progress-block { min-width: 125px; }
}

@media screen and (max-width: 1120px) {
  .home-hero { grid-template-columns: minmax(300px, .8fr) minmax(500px, 1.2fr); padding: 42px; }
}

@media screen and (max-width: 900px) {
  .home-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 46px; }
  .home-copy { max-width: 720px; }
  .home-showcase { width: min(720px, 100%); min-height: 590px; }
  .home-market-preview { margin-left: 0; }
  .home-card-mini { width: clamp(104px, 17vw, 132px); }
  #panel-guide > .toolbar { top: 124px; }
}

@media screen and (max-width: 760px) {
  body { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
  .topbar {
    min-height: 60px;
    gap: 8px;
    padding: calc(8px + env(safe-area-inset-top, 0px)) max(11px, env(safe-area-inset-right, 0px)) 8px max(11px, env(safe-area-inset-left, 0px));
  }
  .brand { flex: 1 1 150px; }
  .logo { width: 35px; height: 35px; }
  .brand h1 { font-size: 16px; }
  .top-actions { order: 2; }
  .icon-btn, .account-button { min-width: 40px; min-height: 40px; }
  .account-button { max-width: 42px; }

  .tabs {
    position: fixed;
    z-index: 72;
    left: max(8px, env(safe-area-inset-left, 0px));
    right: max(8px, env(safe-area-inset-right, 0px));
    bottom: max(8px, env(safe-area-inset-bottom, 0px));
    order: initial;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: auto;
    min-height: 66px;
    margin: 0;
    padding: 5px;
    overflow: visible;
    border-color: color-mix(in srgb, var(--line) 86%, transparent);
    border-radius: 20px;
    background: color-mix(in srgb, var(--bg-2) 92%, transparent);
    box-shadow: 0 18px 50px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.045);
    backdrop-filter: blur(24px) saturate(145%);
  }
  .tab {
    display: flex;
    min-width: 0;
    min-height: 55px;
    flex-direction: column;
    gap: 4px;
    padding: 6px 2px;
    border: 0;
    border-radius: 15px;
    font-size: 10px;
    font-weight: 750;
    white-space: nowrap;
  }
  .tab-icon { display: block; width: 21px; height: 21px; }
  .tab.is-active { border: 0; box-shadow: none; }

  .set-picker { order: 20; flex: 1 1 calc(60% - 4px); }
  .set-picker > span:first-child { font-size: 11px; }
  .set-combo input { width: 100%; }
  .progress-block { order: 21; flex: 1 1 calc(40% - 4px); min-width: 112px; }
  .set-drop { top: calc(60px + env(safe-area-inset-top, 0px)); bottom: 86px; max-height: none; }
  main { padding: 14px max(12px, env(safe-area-inset-right, 0px)) 24px max(12px, env(safe-area-inset-left, 0px)); }
  .card { padding: 16px; }

  #panel-guide > .toolbar { position: static; margin-top: 0; padding: 9px; }
  .guide-nav { position: sticky; top: calc(119px + env(safe-area-inset-top, 0px)); z-index: 42; gap: 7px; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--bg-2) 90%, transparent); box-shadow: 0 10px 28px rgba(0,0,0,.24); backdrop-filter: blur(18px); }
  .guide-nav .nav-turn { min-width: 88px; min-height: 44px; padding: 8px 12px; }
  .guide-nav .nav-mid { min-width: 130px; }
  .spread { padding: 14px; border-radius: 18px; }
  .spread .binder-page { padding: 9px; }

  .theme-fab { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .community-chat-fab { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .app-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

@media screen and (max-width: 680px) {
  body[data-view="home"] .top-actions { margin-left: auto; }
  .home-hero { gap: 34px; padding: 38px 22px; border-radius: 23px; }
  .home-copy h2 { font-size: clamp(42px, 13vw, 60px); }
  .home-showcase { min-height: 520px; }
  .home-market-preview { padding: 16px; transform: none; }
  .home-market-list { gap: 7px; }
  .home-market-row { gap: 6px; padding: 10px 5px 9px; border-radius: 12px; }
  .home-card-mini { width: clamp(72px, 23vw, 106px); border-radius: 6px; }
  .home-market-row strong { font-size: 12px; }
  .home-market-row small { max-width: 100%; font-size: 8.5px; }
  .home-market-row b { font-size: 13px; }
  .home-binder-preview { right: 0; width: min(72%, 310px); }
  .home-value-grid { grid-template-columns: minmax(0, 1fr); }
  .home-value-grid article { padding: 22px; }
  .home-start { padding-bottom: 24px; }
}

@media screen and (max-width: 430px) {
  .home-hero { padding: 32px 16px; }
  .home-copy h2 { font-size: clamp(39px, 13vw, 54px); }
  .home-actions .btn { min-height: 50px; }
  .home-showcase { min-height: 485px; }
  .home-preview-top strong { font-size: 18px; }
  .home-market-preview { padding: 13px; }
  .home-market-list { margin-block: 14px; }
  .home-card-mini { width: clamp(66px, 22vw, 88px); }
  .home-binder-preview { bottom: 0; width: min(75%, 270px); padding: 12px; }
  .home-market-foot > small { max-width: 130px; }
  .home-market-foot strong { font-size: 18px; }
  .portfolio-kpis { grid-template-columns: minmax(0, 1fr); }
  .guide-nav { top: calc(114px + env(safe-area-inset-top, 0px)); }
  .guide-nav .nav-mid { min-width: 110px; }
  .guide-nav .nav-mid span { font-size: 10px; }
  .guide-nav .nav-turn { min-width: 74px; padding-inline: 8px; }
}

@media screen and (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ==============================================================
   Release 42 — Quiet workspace
   The cards stay dominant. Everyday controls remain visible; setup,
   display preferences and destructive actions live in one folded panel.
   ============================================================== */

@media screen {
  .brand .sub { display: none; }
  .brand { flex: none; }
  .topbar { gap: 8px; }

  #panel-guide > .toolbar {
    gap: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.16);
  }
  .guide-primary-controls {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    gap: 8px;
  }
  .guide-primary-controls .seg { flex: none; }
  .guide-primary-controls .guide-sort-control,
  .guide-primary-controls .guide-layout-control {
    min-width: 150px;
    flex: 1 1 190px;
    padding: 6px;
  }
  .guide-more {
    flex: 0 0 auto;
    min-width: 178px;
    overflow: clip;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: color-mix(in srgb, var(--bg-3) 72%, transparent);
  }
  .guide-more > summary {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1px 10px;
    min-height: 42px;
    padding: 7px 10px;
    cursor: pointer;
    list-style: none;
    color: var(--ink);
    font-weight: 760;
  }
  .guide-more > summary::-webkit-details-marker { display: none; }
  .guide-more > summary::after {
    grid-column: 2;
    grid-row: 1 / span 2;
    content: '›';
    color: var(--ink-3);
    font-size: 20px;
    line-height: 1;
    transform: rotate(90deg);
    transition: transform .16s ease;
  }
  .guide-more[open] > summary::after { transform: rotate(-90deg); }
  .guide-more > summary small {
    color: var(--ink-3);
    font-size: 10px;
    font-weight: 550;
  }
  .guide-more[open] { flex-basis: 100%; }
  .guide-more-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 8px;
    padding: 9px;
    border-top: 1px solid var(--line);
  }
  .guide-more-body > .check,
  .guide-more-body > .field {
    min-height: 44px;
    margin: 0;
    padding: 8px;
    border: 1px solid color-mix(in srgb, var(--line) 74%, transparent);
    border-radius: 9px;
    background: color-mix(in srgb, var(--bg-2) 54%, transparent);
  }
  .guide-more-body .reverse-mode-toggle { border-color: color-mix(in srgb, var(--warn) 26%, var(--line)); }
  .guide-binder-size > div { display: grid; grid-template-columns: minmax(62px, .65fr) 1fr; gap: 6px; }
  .guide-binder-size input { width: 100%; }
  .guide-danger-zone {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .guide-danger-zone .btn { width: auto; }
  .guide-nav .nav-mid .ok { color: var(--ok); }
  .guide-nav .nav-mid .bad { color: var(--bad); }

  .custom-binder-summary { padding: 14px; }
  .custom-summary-head { display: grid; gap: 3px; }
  .custom-summary-head h2 { overflow: hidden; text-overflow: ellipsis; font-size: 16px; white-space: nowrap; }
  .custom-summary-head > span { color: var(--ink-3); font-size: 11px; }
  .custom-binder-summary .custom-summary-progress { margin: 10px 0 9px; }
  .custom-binder-summary .totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; }
  .custom-binder-summary .totals > div { min-width: 0; }
  .custom-binder-summary .totals strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media screen and (min-width: 1180px) {
  #panel-guide.is-active {
    grid-template-columns: 208px minmax(0, 1fr) 232px;
    gap: 10px 12px;
  }
  #panel-guide > .toolbar {
    top: 82px;
    gap: 9px;
    max-height: calc(100vh - 94px);
    padding: 10px;
    flex-wrap: nowrap;
    align-content: flex-start;
  }
  .guide-source-controls {
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: 1fr;
    gap: 6px;
    padding-bottom: 8px;
  }
  .guide-primary-controls {
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: 1fr;
    gap: 8px;
    align-content: start;
  }
  #panel-guide > .toolbar .guide-primary-controls .seg {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
  }
  #panel-guide > .toolbar .guide-primary-controls .seg button {
    width: auto;
    min-width: 0;
    padding-inline: 5px;
    text-align: center;
  }
  #panel-guide > .toolbar .guide-sort-control,
  #panel-guide > .toolbar .guide-layout-control { min-width: 0; margin: 0; padding: 7px; }
  .guide-more { width: 100%; min-width: 0; }
  .guide-more[open] { flex-basis: auto; }
  .guide-more-body { display: flex; flex-direction: column; padding: 7px; }
  .guide-more-body > .check,
  .guide-more-body > .field { min-height: 0; padding: 7px; }
  .guide-danger-zone { justify-content: stretch; padding-top: 3px; border-top: 1px solid var(--line); }
  .guide-danger-zone .btn { width: 100%; }
  #guideBody > .card:has(.totals) {
    padding: 11px;
    max-height: none;
    overflow: visible;
  }
  #guideBody > .card:has(.totals) .toolbar {
    gap: 3px;
    margin-bottom: 0;
  }
  #guideBody > .card:has(.totals) h2 {
    margin-bottom: 3px;
    font-size: 15px;
  }
  #guideBody > .card:has(.totals) .check {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 1px 7px;
    padding: 5px 0;
  }
  #guideBody > .card:has(.totals) .check input { grid-row: 1 / span 2; }
  #guideBody > .card:has(.totals) .check em {
    grid-column: 2;
    margin-left: 0;
    font-size: 10px;
    line-height: 1.25;
  }
  #guideBody > .card:has(.totals) .totals {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    margin-top: 8px;
    padding-top: 9px;
  }
  #guideBody > .card:has(.totals) .totals > div { min-width: 0; }
  #guideBody > .card:has(.totals) .totals strong {
    overflow: hidden;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #guideBody > .card:has(.totals) .totals span {
    font-size: 9.5px;
    line-height: 1.25;
  }
  .custom-binder-summary .home-kicker { margin-bottom: 1px; font-size: 9px; }
  .custom-binder-summary .totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 7px; align-items: start; }
  .custom-binder-summary .totals strong { font-size: 15px; }
  .custom-binder-summary .totals span { font-size: 10px; }
}

@media screen and (max-width: 1179px) {
  .guide-source-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, auto));
  }
  .guide-source-controls:has(#manageCustomBindersButton[hidden]) { grid-template-columns: minmax(0, auto); }
}

@media screen and (max-width: 760px) {
  .brand { flex: 1 1 auto; }
  .progress-nums .muted { display: none; }
  #panel-guide > .toolbar { gap: 8px; }
  .guide-source-controls {
    flex: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    padding-bottom: 0;
    border-bottom: 0;
  }
  .guide-source-controls:has(#manageCustomBindersButton[hidden]) { grid-template-columns: 1fr; }
  .guide-primary-controls { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  #panel-guide > .toolbar .guide-primary-controls .seg {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
  }
  #panel-guide > .toolbar .guide-primary-controls .seg button { width: auto; min-height: 38px; text-align: center; }
  .guide-primary-controls .guide-sort-control,
  .guide-primary-controls .guide-layout-control { min-width: 0; padding: 6px; }
  .guide-more { width: 100%; min-width: 0; }
  .guide-more[open] { flex-basis: auto; }
  .guide-more-body { grid-template-columns: minmax(0, 1fr); }
  .guide-danger-zone { justify-content: stretch; padding-top: 7px; border-top: 1px solid var(--line); }
  .guide-danger-zone .btn { width: 100%; }
  .guide-nav .nav-mid span { font-size: 10px; }
  #guideWatchlist { padding-inline: 10px; }
}

/* Release 49: a second, code-native homepage visual that demonstrates how
   BinderPop adapts to the physical binder instead of forcing one page size. */
.home-layout-feature {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(520px, 1.28fr);
  align-items: center;
  gap: clamp(34px, 6vw, 92px);
  margin: 32px 0 70px;
  padding: clamp(34px, 5vw, 72px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
  border-radius: 28px;
  background:
    radial-gradient(circle at 82% 20%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--bg-2) 97%, transparent), color-mix(in srgb, var(--bg-3) 92%, transparent));
  box-shadow: 0 26px 80px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.035);
}
.home-layout-feature::after {
  content: '';
  position: absolute;
  right: -120px;
  bottom: -180px;
  width: 360px;
  height: 360px;
  border: 1px solid color-mix(in srgb, var(--gold) 18%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 60px color-mix(in srgb, var(--gold) 3%, transparent);
  pointer-events: none;
}
.home-layout-copy,
.home-layout-demo { position: relative; z-index: 1; min-width: 0; }
.home-layout-copy h2 {
  max-width: 530px;
  font-size: clamp(34px, 4.2vw, 60px);
  line-height: .98;
  letter-spacing: -.045em;
}
.home-layout-copy h2 span {
  color: var(--accent-2);
  background: linear-gradient(110deg, var(--accent-2), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.home-layout-copy > p:not(.home-kicker) {
  max-width: 560px;
  margin-top: 20px;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.7;
}
.home-layout-copy ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 26px;
  padding: 0;
  list-style: none;
}
.home-layout-copy li {
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 7%, var(--bg-3));
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 700;
}
.home-layout-demo {
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 23px;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  box-shadow: 0 30px 75px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.05);
  transform: rotate(.6deg);
  transition: transform .3s ease, border-color .3s ease;
}
.home-layout-demo:hover { border-color: color-mix(in srgb, var(--accent) 56%, var(--line)); transform: translateY(-3px) rotate(0); }
.home-layout-demo-top,
.home-layout-demo-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.home-layout-demo-top > span { display: flex; min-width: 0; flex-direction: column; }
.home-layout-demo-top small { color: var(--gold); font-size: 9px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.home-layout-demo-top strong { margin-top: 2px; font-size: 15px; }
.home-layout-demo-top > b {
  flex: none;
  padding: 6px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ok) 12%, var(--bg-3));
  color: var(--ok);
  font-size: 10px;
}
.home-layout-presets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 14px 0 12px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-3) 70%, transparent);
}
.home-layout-presets span {
  display: grid;
  place-items: center;
  min-height: 34px;
  border-radius: 8px;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 800;
}
.home-layout-presets .is-active {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 25%, transparent);
}
.home-layout-book {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: 18px;
  background: linear-gradient(105deg, #090d16, color-mix(in srgb, var(--bg-3) 88%, #05070c));
  box-shadow: inset 0 0 34px rgba(0,0,0,.34);
}
.home-layout-book::after {
  content: '';
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 50%;
  width: 2px;
  border-radius: 99px;
  background: linear-gradient(transparent, color-mix(in srgb, var(--ink-3) 40%, transparent) 15% 85%, transparent);
  box-shadow: 0 0 12px rgba(0,0,0,.8);
  transform: translateX(-1px);
}
.home-layout-page {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 5px;
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-2) 88%, #04070d);
}
.home-layout-page > span {
  display: grid;
  place-items: center;
  min-width: 0;
  aspect-ratio: var(--card-aspect);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, white 14%, var(--line));
  border-radius: 4px;
  background: var(--bg);
  box-shadow: 0 4px 10px rgba(0,0,0,.32);
}
.home-layout-page img { display: block; width: 100%; height: 100%; object-fit: contain; filter: saturate(1.06) contrast(1.02); }
.home-layout-demo-foot { padding-top: 12px; color: var(--ink-3); font-size: 10px; }
.home-layout-demo-foot > span:first-child { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-weight: 750; }
.home-layout-demo-foot i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 12%, transparent); }

@media screen and (max-width: 1000px) {
  .home-layout-feature { grid-template-columns: minmax(0, 1fr); }
  .home-layout-copy { max-width: 720px; }
  .home-layout-demo { width: min(760px, 100%); }
}
@media screen and (max-width: 680px) {
  .home-layout-feature { gap: 28px; margin: 24px 0 42px; padding: 30px 18px; border-radius: 22px; }
  .home-layout-copy h2 { font-size: clamp(37px, 12vw, 52px); }
  .home-layout-copy > p:not(.home-kicker) { font-size: 14px; line-height: 1.6; }
  .home-layout-copy .btn { width: 100%; justify-content: center; }
  .home-layout-demo { padding: 12px; border-radius: 18px; transform: none; }
  .home-layout-demo-top { align-items: flex-start; }
  .home-layout-demo-top strong { font-size: 12px; }
  .home-layout-demo-top > b { font-size: 8px; }
  .home-layout-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-layout-book { gap: 5px; padding: 7px; border-radius: 13px; }
  .home-layout-page { gap: 2px; padding: 4px; border-radius: 8px; }
  .home-layout-page > span { border-radius: 2px; }
  .home-layout-demo-foot > span:last-child { display: none; }
}