/* TH3 COLL3CTIV3 — Liquid Glass design system
   Self-hosted fonts (SIL Open Font License — see /fonts/OFL-*.txt) */
@font-face { font-family: 'Sora'; src: url('/fonts/sora.woff') format('woff'); font-weight: 500 800; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/inter.woff') format('woff'); font-weight: 400 800; font-display: swap; }

/* ========== Tokens ========== */
:root {
  color-scheme: dark;
  /* surfaces */
  --bg: #07061A;
  --bg-2: #0D0A2A;
  --ink-well: rgba(6, 5, 24, .62);
  --glass: linear-gradient(160deg, rgba(255, 255, 255, .095), rgba(255, 255, 255, .03) 60%);
  --glass-strong: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05) 70%);
  --glass-edge: rgba(255, 255, 255, .13);
  --glass-edge-hi: rgba(255, 255, 255, .26);
  --hairline: rgba(255, 255, 255, .08);
  /* text */
  --text: #F3F1FF;
  --text-2: #C9C6E6;
  --muted: #A3A0C6;
  /* accents (from the brief's holo spectrum) */
  --blue: #4F8BFF;
  --violet: #8B5CF6;
  --pink: #EC6CF5;
  --cyan: #38D3F5;
  --gold: #FFD27A;
  --spectrum: linear-gradient(100deg, #4F8BFF 0%, #8B5CF6 48%, #EC6CF5 100%);
  --spectrum-soft: linear-gradient(100deg, rgba(79, 139, 255, .9), rgba(139, 92, 246, .9) 50%, rgba(236, 108, 245, .9));
  /* states */
  --pos: #5EEAA0;
  --neg: #FF7A93;
  --warn: #FFD27A;
  --link: #9DB8FF;

  --font-display: 'Sora', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --step--1: .875rem;
  --step-0: 1rem;
  --step-1: 1.2rem;
  --step-2: 1.5rem;
  --step-3: 1.85rem;
  --step-4: clamp(2.2rem, 7vw, 3.6rem);

  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4.5rem;
  --r-card: 22px;
  --r-inner: 14px;
  --r-ctl: 12px;
  --r-pill: 999px;
  --blur: blur(18px) saturate(150%);
  --shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 24px 60px -28px rgba(0, 0, 0, .75);
  --glow: 0 10px 34px -10px rgba(124, 92, 255, .75);

  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --t-fast: 140ms;
  --t-med: 280ms;
  --bottom-nav-h: 68px;
  --maxw: 1140px;
}

/* ========== Base ========== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--text);
  background:
    radial-gradient(60rem 40rem at 85% -10%, rgba(139, 92, 246, .32), transparent 60%),
    radial-gradient(50rem 36rem at -10% 20%, rgba(79, 139, 255, .22), transparent 60%),
    radial-gradient(46rem 30rem at 60% 110%, rgba(236, 108, 245, .16), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg) 40%);
  background-attachment: fixed;
  padding-bottom: calc(var(--bottom-nav-h) + 24px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 900px) { body { padding-bottom: 0; } }
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.1; margin: 0 0 var(--s3); letter-spacing: -.02em; color: var(--text); }
h1 { font-size: var(--step-4); font-weight: 800; letter-spacing: -.035em; }
h2 { font-size: var(--step-3); font-weight: 700; }
h3 { font-size: var(--step-1); font-weight: 700; }
p { margin: 0 0 var(--s4); max-width: 68ch; }
a { color: var(--link); text-underline-offset: .2em; text-decoration-color: rgba(157, 184, 255, .5); }
a:hover { text-decoration-color: currentColor; }
::selection { background: rgba(139, 92, 246, .45); }
:focus-visible { outline: 2px solid #B9A4FF; outline-offset: 3px; border-radius: 8px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--text); color: var(--bg); padding: var(--s3) var(--s4); z-index: 100; font-weight: 700; border-radius: var(--r-ctl); }
.skip:focus { left: var(--s3); top: var(--s3); }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gradient-text { background: var(--spectrum); -webkit-background-clip: text; background-clip: text; color: transparent; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s4); }
@media (min-width: 700px) { .wrap { padding: 0 var(--s6); } }
.section { padding: var(--s7) 0; }

/* ========== Glass surfaces ========== */
.panel, .console-panel, .stat, .vcard, .gcard, .plan, .handoff, .grader, .guide-list a, .plan-card, .want, .set-row,
.empty, .site-header, .bottom-nav, .dupes, .import-preview:not(:empty), .history-panel {
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}
.panel, .console-panel { padding: var(--s5); }
@media (min-width: 700px) { .panel, .console-panel { padding: var(--s6); } }

/* ========== Header / nav ========== */
.site-header {
  position: sticky; top: var(--s3); z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  margin: var(--s3) var(--s3) 0; padding: .55rem .75rem .55rem 1rem;
  border-radius: var(--r-pill);
  background: linear-gradient(160deg, rgba(20, 16, 52, .72), rgba(14, 11, 40, .55));
}
@media (min-width: 900px) { .site-header { margin: var(--s4) auto 0; max-width: calc(var(--maxw) - 2 * var(--s4)); padding: .55rem .6rem .55rem 1.1rem; } }
.wordmark { display: flex; align-items: center; gap: var(--s2); color: var(--text); text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; letter-spacing: -.02em; }
.wordmark img { width: 30px; height: 30px; filter: drop-shadow(0 4px 12px rgba(139, 92, 246, .6)); }
.top-nav { display: none; gap: var(--s2); align-items: center; }
.top-nav a { color: var(--text-2); text-decoration: none; font-weight: 600; font-size: .95rem; padding: .45rem .8rem; border-radius: var(--r-pill); transition: background var(--t-fast), color var(--t-fast); }
.top-nav a:hover { color: var(--text); background: rgba(255, 255, 255, .07); }
.top-nav .top-cta { color: #fff; background: var(--spectrum); box-shadow: var(--glow); }
.top-nav .top-cta:hover { background: var(--spectrum); filter: brightness(1.08); }
@media (min-width: 900px) { .top-nav { display: flex; } }

.bottom-nav {
  position: fixed; left: var(--s3); right: var(--s3); bottom: calc(var(--s3) + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); z-index: 40;
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: var(--bottom-nav-h); padding: 6px;
  border-radius: 26px;
  background: linear-gradient(160deg, rgba(22, 18, 58, .82), rgba(12, 10, 36, .78));
}
.nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); text-decoration: none; font-size: .7rem; font-weight: 600; border-radius: 20px; min-height: 48px; transition: color var(--t-fast), background var(--t-fast); }
.nav-item svg { width: 22px; height: 22px; }
.nav-item[aria-current="page"] { color: #fff; background: linear-gradient(160deg, rgba(139, 92, 246, .42), rgba(79, 139, 255, .22)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 6px 20px -8px rgba(139, 92, 246, .8); }
@media (min-width: 900px) { .bottom-nav { display: none; } }

/* ========== Buttons ========== */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 48px; padding: .7rem 1.35rem;
  font: 600 1rem/1.1 var(--font-body); letter-spacing: -.005em;
  border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, .22);
  background: var(--spectrum); color: #fff; text-decoration: none; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), var(--glow);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), filter var(--t-fast);
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 14px 40px -10px rgba(139, 92, 246, .9); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn-ghost { background: rgba(255, 255, 255, .06); border-color: var(--glass-edge-hi); color: var(--text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.btn-ghost:hover { background: rgba(255, 255, 255, .11); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); filter: none; }
.btn-blue { background: linear-gradient(100deg, #3F7CFF, #6A6CFF); }
.btn-block { width: 100%; }
.btn svg { width: 18px; height: 18px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.link-btn { background: none; border: 0; padding: 0; color: var(--link); font: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(157, 184, 255, .5); text-underline-offset: .2em; cursor: pointer; min-height: 36px; }
.file-btn { cursor: pointer; }

/* ========== Hero ========== */
.hero { position: relative; overflow: hidden; isolation: isolate; padding: var(--s7) 0 var(--s6); }
.hero-inner { display: grid; gap: var(--s6); position: relative; z-index: 2; }
.hero h1 { max-width: 13ch; font-size: clamp(2.5rem, 9.5vw, 4.4rem); line-height: 1.02; }
.hero h1 .gradient-text { display: block; }
.hero-lede { font-size: var(--step-1); color: var(--text-2); max-width: 36ch; }
.hero-types { margin: calc(-1 * var(--s2)) 0 var(--s4); font-size: .85rem; font-weight: 600; color: var(--muted); letter-spacing: .01em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.eyebrow-pill { display: inline-flex; align-items: center; gap: var(--s2); padding: .35rem .8rem; margin-bottom: var(--s4); border-radius: var(--r-pill); border: 1px solid var(--glass-edge-hi); background: rgba(255, 255, 255, .05); color: var(--text-2); font-size: .85rem; font-weight: 600; }
.eyebrow-pill svg { width: 14px; height: 14px; color: var(--cyan); }

/* liquid blobs */
.blob { position: absolute; z-index: 0; border-radius: 50%; filter: blur(2px); pointer-events: none; opacity: .9;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .55), rgba(139, 92, 246, .55) 25%, rgba(60, 40, 180, .45) 55%, transparent 72%); }
.blob.b1 { width: 340px; height: 300px; right: -90px; top: -60px; border-radius: 46% 54% 60% 40% / 52% 40% 60% 48%; }
.blob.b2 { width: 260px; height: 220px; left: -110px; bottom: -40px; border-radius: 58% 42% 45% 55% / 40% 58% 42% 60%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .45), rgba(79, 139, 255, .5) 28%, rgba(40, 60, 190, .4) 58%, transparent 72%); }
@media (prefers-reduced-motion: no-preference) {
  .blob.b1 { animation: drift 14s ease-in-out infinite alternate; }
  .blob.b2 { animation: drift 18s ease-in-out infinite alternate-reverse; }
}
@keyframes drift { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(-18px, 14px) rotate(8deg); } }

/* floating product cards */
.float-stack { position: relative; min-height: 360px; }
.fcard { position: absolute; width: min(250px, 72vw); padding: var(--s4); border-radius: var(--r-card);
  background: var(--glass-strong); border: 1px solid var(--glass-edge-hi); box-shadow: var(--shadow), 0 0 0 1px rgba(255, 255, 255, .02);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.fcard .k { font-size: .78rem; color: var(--muted); font-weight: 600; display: flex; justify-content: space-between; gap: var(--s2); }
.fcard .v { font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.fcard .sub { font-size: .8rem; color: var(--text-2); }
.fcard .tag { font-size: .65rem; text-transform: none; padding: 1px 7px; border-radius: var(--r-pill); border: 1px solid var(--glass-edge-hi); color: var(--muted); }
.fcard.f1 { left: 0; top: 0; transform: rotate(-3deg); }
.fcard.f2 { right: 0; top: 96px; transform: rotate(2.5deg); }
.fcard.f3 { left: 6%; top: 214px; transform: rotate(-1deg); }
.mini-bars { display: flex; align-items: flex-end; gap: 5px; height: 38px; margin-top: var(--s2); }
.mini-bars i { flex: 1; border-radius: 4px 4px 2px 2px; background: var(--spectrum-soft); opacity: .9; }
.mini-bars i:nth-child(1) { height: 30%; } .mini-bars i:nth-child(2) { height: 52%; } .mini-bars i:nth-child(3) { height: 100%; } .mini-bars i:nth-child(4) { height: 70%; }
.centering-viz { display: flex; gap: var(--s3); align-items: center; margin-top: var(--s2); }
.centering-viz .cardframe { width: 46px; aspect-ratio: 5/7; border-radius: 6px; border: 2px solid rgba(255, 255, 255, .7); padding: 4px 3px 4px 5px; }
.centering-viz .cardframe span { display: block; height: 100%; border-radius: 3px; background: var(--spectrum); box-shadow: 0 0 18px rgba(139, 92, 246, .6); }
.conf-row { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s2); }
.meter-track { flex: 1; height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.meter-track span { display: block; height: 100%; width: 78%; border-radius: 8px; background: var(--spectrum); }
@media (prefers-reduced-motion: no-preference) {
  .fcard.f1 { animation: float 7s ease-in-out infinite; }
  .fcard.f2 { animation: float 8s ease-in-out infinite -2s; }
  .fcard.f3 { animation: float 9s ease-in-out infinite -4s; }
}
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@media (min-width: 900px) {
  .hero { padding: var(--s8) 0 var(--s7); }
  .hero-inner { grid-template-columns: 1.15fr .85fr; align-items: center; }
  .float-stack { min-height: 420px; }
  .fcard { width: 260px; }
  .fcard.f2 { top: 120px; }
  .fcard.f3 { top: 250px; left: 10%; }
  .blob.b1 { width: 460px; height: 400px; right: -60px; top: -40px; }
}

/* ========== Uploader ========== */
.uploader { margin: var(--s5) 0 var(--s3); max-width: 32rem; }
.drop {
  position: relative; display: grid; justify-items: center; gap: 4px; text-align: center; cursor: pointer;
  padding: var(--s5) var(--s4); min-height: 160px; align-content: center;
  border-radius: var(--r-card); color: var(--text);
  background: linear-gradient(160deg, rgba(139, 92, 246, .16), rgba(79, 139, 255, .06));
  border: 1px dashed rgba(185, 164, 255, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 20px 50px -30px rgba(139, 92, 246, .9);
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.drop svg { width: 46px; height: 46px; padding: 10px; margin-bottom: 6px; border-radius: 14px; color: #fff; background: var(--spectrum); box-shadow: var(--glow); }
.drop-title { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: -.01em; }
.drop-hint { font-size: var(--step--1); color: var(--text-2); }
.drop:hover, .drop.over { background: linear-gradient(160deg, rgba(139, 92, 246, .26), rgba(79, 139, 255, .1)); border-color: rgba(205, 190, 255, .85); }
.drop:active { transform: scale(.995); }
.uploader:focus-within .drop, #gc-side-empty:focus-within .drop { outline: 2px solid #B9A4FF; outline-offset: 3px; }
.drop.busy { opacity: .7; pointer-events: none; }
.drop-status { min-height: 1.4em; margin: var(--s2) 0 0; font-weight: 600; color: var(--text-2); }
.lab .uploader { max-width: 36rem; margin-bottom: var(--s6); }

/* ========== Stations (home menu) ========== */
.stations-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
.stations { display: grid; gap: var(--s3); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--s5); }
@media (min-width: 900px) { .stations { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s4); } }
.station {
  --accent: var(--spectrum);
  position: relative; display: flex; flex-direction: column; text-decoration: none; color: var(--text);
  border-radius: var(--r-card); border: 1px solid var(--glass-edge); background: var(--glass);
  box-shadow: var(--shadow); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform var(--t-med) var(--ease-out), border-color var(--t-med), box-shadow var(--t-med);
  overflow: hidden;
}
.station::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: var(--accent); opacity: .9; }
.station:hover { border-color: var(--glass-edge-hi); box-shadow: var(--shadow), 0 20px 60px -24px rgba(139, 92, 246, .8); }
.station-inner { flex: 1; display: flex; flex-direction: column; padding: var(--s4); gap: var(--s3); }
.station-top { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); font-weight: 600; font-size: .85rem; color: var(--muted); }
.station-top .pips { display: flex; gap: 3px; }
.station-top .pips i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .35); display: block; }
.station-art { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: var(--accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 10px 30px -10px rgba(139, 92, 246, .9); }
.station-art svg { width: 26px; height: 26px; }
.station-text { font-size: .9rem; line-height: 1.4; }
.station-text b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; margin-bottom: 4px; letter-spacing: -.01em; }
.station-text span { color: var(--text-2); }
.station-foot { margin-top: auto; padding-top: var(--s3); font-size: .78rem; font-weight: 600; color: var(--muted); border-top: 1px solid var(--hairline); }
.station.featured { grid-column: span 2; }
@media (min-width: 900px) { .station.featured { grid-column: auto; } }
.st-grade { --accent: linear-gradient(135deg, #4F8BFF, #8B5CF6); }
.st-trade { --accent: linear-gradient(135deg, #38D3F5, #4F8BFF); }
.st-vault { --accent: linear-gradient(135deg, #8B5CF6, #EC6CF5); }
.st-creator { --accent: linear-gradient(135deg, #22C9A0, #38D3F5); }
.st-premium { --accent: linear-gradient(135deg, #FFB86B, #EC6CF5); }
/* holographic sheen follows the pointer on fine pointers */
.holo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(240px circle at var(--hx, 50%) var(--hy, 50%), rgba(255, 255, 255, .14), transparent 60%);
  opacity: var(--holo-o, 0); transition: opacity var(--t-med); }
.holo:hover, .holo:focus-visible { --holo-o: 1; }
@media (prefers-reduced-motion: reduce) { .station { transform: none !important; } }
.lite .holo::after { display: none; }
.lite .blob, .lite .fcard, .lite .sparkle { animation: none !important; }

/* ========== Generic blocks ========== */
.band { border-block: 1px solid var(--hairline); background: rgba(255, 255, 255, .02); }
.dark { background: transparent; }
.dark p { color: var(--text-2); }
.page-head { padding: var(--s7) 0 var(--s5); }
.page-head p { color: var(--text-2); font-size: var(--step-1); }
.grid-2 { display: grid; gap: var(--s5); }
@media (min-width: 900px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.note { font-size: var(--step--1); color: var(--muted); }
.disclose { display: flex; gap: var(--s2); align-items: flex-start; font-size: var(--step--1); background: rgba(255, 210, 122, .08); border: 1px solid rgba(255, 210, 122, .35); border-radius: var(--r-ctl); padding: var(--s2) var(--s3); color: var(--text); }
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 600; padding: 2px 9px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .08); border: 1px solid var(--glass-edge); color: var(--text-2); }
.chip.aff { background: rgba(255, 210, 122, .12); border-color: rgba(255, 210, 122, .4); color: var(--gold); }
.chip.plain { background: rgba(255, 255, 255, .06); }
.chip.send { background: rgba(94, 234, 160, .14); border-color: rgba(94, 234, 160, .45); color: var(--pos); }
.chip.hold { background: rgba(255, 255, 255, .06); color: var(--muted); }
.chip.pri-high { background: rgba(236, 108, 245, .16); border-color: rgba(236, 108, 245, .45); color: #F7B4FB; }
.chip.pri-medium { background: rgba(139, 92, 246, .16); border-color: rgba(139, 92, 246, .45); color: #CDB9FF; }
.chip.pri-low { background: rgba(255, 255, 255, .06); color: var(--muted); }
.steps { padding-left: 1.2rem; color: var(--text-2); }
.steps li { margin-bottom: var(--s2); }
.steps b { color: var(--text); }

/* ========== Forms ========== */
label { font-weight: 600; display: block; margin-bottom: 6px; color: var(--text); font-size: .95rem; }
.field { margin-bottom: var(--s4); }
.hint { display: block; font-size: var(--step--1); color: var(--muted); font-weight: 500; margin-top: 2px; }
input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="number"], input[type="search"], select, textarea {
  width: 100%; min-height: 48px; padding: .65rem .9rem;
  font: 500 1rem var(--font-body); color: var(--text);
  background: var(--ink-well); border: 1px solid var(--glass-edge); border-radius: var(--r-ctl);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.2rem; }
select option { background: #15123A; color: var(--text); }
textarea { min-height: 96px; resize: vertical; }
input::placeholder, textarea::placeholder { color: #77739C; }
input:focus, select:focus, textarea:focus { border-color: rgba(185, 164, 255, .8); outline: none; box-shadow: 0 0 0 3px rgba(139, 92, 246, .3); }
.check { display: flex; gap: var(--s3); align-items: flex-start; font-weight: 500; color: var(--text-2); }
.check input { width: 22px; height: 22px; margin-top: 2px; flex: none; accent-color: var(--violet); }
.err { color: var(--neg); font-weight: 600; font-size: var(--step--1); margin-top: 4px; }
[aria-invalid="true"] { border-color: var(--neg) !important; }
.form-status { margin-top: var(--s3); font-weight: 600; color: var(--text-2); }
.form-status .btn { min-height: 40px; padding: .45rem 1rem; margin: var(--s2) var(--s2) 0 0; font-size: .9rem; }
.form-status.ok { color: var(--pos); }
.form-status.bad { color: var(--neg); }
.hp { position: absolute; left: -9999px; }
.money { position: relative; }
.money > span { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 600; pointer-events: none; }
.money input { padding-left: 1.7rem; }
.money.pct input { padding-left: .9rem; padding-right: 2rem; }
.money.pct > span { left: auto; right: .9rem; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
details.more { margin: var(--s2) 0 var(--s4); }
details.more summary { cursor: pointer; font-weight: 600; color: #CDB9FF; min-height: 44px; display: flex; align-items: center; }

/* ========== Tool consoles (Lab, Grade Check, Planner) ========== */
.lab { padding-bottom: var(--s7); }
.console { display: grid; gap: var(--s5); }
.console > * { min-width: 0; }
@media (min-width: 960px) { .console { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .results { position: sticky; top: 96px; } }
.console-panel h2 { font-size: var(--step-2); }
.lab-note { background: rgba(139, 92, 246, .12); border: 1px solid rgba(139, 92, 246, .4); border-radius: var(--r-ctl); padding: var(--s3) var(--s4); margin-top: var(--s4); color: var(--text); }
.grade-table { width: 100%; border-collapse: collapse; }
.grade-table th { text-align: left; font-size: .78rem; color: var(--muted); font-weight: 600; padding: 0 4px 6px; }
.grade-table td { padding: 4px; vertical-align: middle; }
.grade-table td:first-child { font-weight: 600; font-size: .9rem; white-space: nowrap; padding-right: 8px; }
.grade-table input { min-height: 44px; }
.prob-total { font-size: var(--step--1); font-weight: 600; margin-top: var(--s2); color: var(--text-2); }
.prob-total.off { color: var(--neg); }
.lab-actions { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s4); align-items: center; }
.lab-errors { background: rgba(255, 122, 147, .1); border: 1px solid rgba(255, 122, 147, .45); border-radius: var(--r-ctl); padding: var(--s3) var(--s4); margin-top: var(--s4); }
.lab-errors ul { margin: 0; padding-left: 1.1rem; }

.readout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-bottom: var(--s4); }
.meter { background: var(--ink-well); border: 1px solid var(--hairline); border-radius: var(--r-inner); padding: var(--s3) var(--s4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
.meter .k { font-size: .78rem; font-weight: 600; color: var(--muted); }
.meter .v { font-family: var(--font-display); font-size: 1.45rem; font-weight: 700; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.25; }
.meter.big { grid-column: span 2; background: linear-gradient(160deg, rgba(139, 92, 246, .18), rgba(79, 139, 255, .06)); border-color: rgba(185, 164, 255, .25); }
.meter.big .v { font-size: 2.3rem; }
.meter .v.pos, .pos { color: var(--pos); }
.meter .v.neg, .neg { color: var(--neg); }
.verdict { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); letter-spacing: -.01em; margin-bottom: var(--s4); }
.bars { display: grid; gap: var(--s2); margin: var(--s3) 0 var(--s4); }
.bar { display: grid; grid-template-columns: 6.5rem 1fr 5.4rem; gap: var(--s2); align-items: center; font-size: .88rem; }
.bar .track { position: relative; height: 12px; background: rgba(255, 255, 255, .06); border-radius: 6px; overflow: hidden; }
.bar .track::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, .25); }
.bar .fill { position: absolute; top: 0; bottom: 0; border-radius: 6px; transition: all var(--t-med) var(--ease-out); }
.bar .fill.pos { left: 50%; background: linear-gradient(90deg, #2FD08A, #5EEAA0); }
.bar .fill.neg { right: 50%; background: linear-gradient(90deg, #FF7A93, #E5486A); }
.bar .amt { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.assumptions { font-size: var(--step--1); color: var(--text-2); }
.assumptions li { margin-bottom: 4px; }
.empty-results { text-align: center; padding: var(--s6) var(--s4); color: var(--text-2); }
.empty-results img { width: 72px; margin: 0 auto var(--s3); filter: drop-shadow(0 8px 24px rgba(139, 92, 246, .6)); }
.graders { display: grid; gap: var(--s3); }
.grader { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r-inner); }
.grader b { font-family: var(--font-display); font-weight: 700; }
.grader .btn { min-height: 42px; padding: .5rem 1rem; font-size: .92rem; }
#graders { margin-top: var(--s5); }

/* Grade Check */
.stage-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.stage-head h2 { margin: 0; }
.seg { display: inline-flex; padding: 3px; border-radius: var(--r-pill); background: var(--ink-well); border: 1px solid var(--glass-edge); }
.seg label { margin: 0; }
.seg input { position: absolute; opacity: 0; }
.seg span { display: block; padding: .45rem 1rem; min-height: 38px; font-weight: 600; color: var(--text-2); cursor: pointer; border-radius: var(--r-pill); transition: background var(--t-fast), color var(--t-fast); }
.seg input:checked + span { background: var(--spectrum); color: #fff; box-shadow: var(--glow); }
.seg input:focus-visible + span { outline: 2px solid #B9A4FF; outline-offset: 2px; }
.side-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-left: 4px; border: 1.5px solid currentColor; vertical-align: 1px; opacity: .7; }
.side-dot.half { background: linear-gradient(90deg, currentColor 50%, transparent 50%); opacity: 1; }
.side-dot.done { background: currentColor; opacity: 1; }
#gc-side-empty .drop { margin: var(--s3) 0; }
.stage { margin: var(--s3) 0; border-radius: var(--r-inner); overflow: hidden; background: #05040F; border: 1px solid var(--hairline); }
.stage canvas { display: block; width: 100%; touch-action: none; }
.k-outer { color: #FFD83D; } .k-inner { color: var(--cyan); }
.nudge { display: flex; gap: var(--s2); align-items: center; }
.nudge select { flex: 1; }
.nudge .btn { min-width: 52px; padding: 0; font-size: 1.4rem; }
.results > .console-panel + .console-panel { margin-top: var(--s4); }
.side-table { width: 100%; border-collapse: collapse; font-size: .92rem; margin-bottom: var(--s3); }
.side-table th, .side-table td { padding: 9px 6px; border-bottom: 1px solid var(--hairline); text-align: left; }
.side-table thead th { font-size: .76rem; color: var(--muted); font-weight: 600; }
.side-table tbody th { font-weight: 600; }
.side-table td { font-weight: 700; font-variant-numeric: tabular-nums; }
.side-table .muted { color: var(--muted); font-weight: 500; }
.side-table tr.is-cur th { color: #CDB9FF; }
.ai-note { font-size: .92rem; margin-bottom: var(--s2); color: var(--text-2); }
.ai-note b { color: var(--text); }
.muted { color: var(--muted); }
.confidence { margin: 0 0 var(--s2); }
.conf-badge { display: inline-block; padding: 3px 11px; border-radius: var(--r-pill); font-weight: 700; font-size: .82rem; border: 1px solid; }
.conf-low .conf-badge { background: rgba(255, 122, 147, .12); color: #FFB3C1; border-color: rgba(255, 122, 147, .45); }
.conf-medium .conf-badge { background: rgba(255, 210, 122, .12); color: var(--gold); border-color: rgba(255, 210, 122, .45); }
.conf-high .conf-badge { background: rgba(94, 234, 160, .12); color: var(--pos); border-color: rgba(94, 234, 160, .45); }
.skeleton { height: 96px; border-radius: var(--r-inner); background: linear-gradient(90deg, rgba(255, 255, 255, .04) 0%, rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, .04) 100%); background-size: 200% 100%; margin-bottom: var(--s3); }
@media (prefers-reduced-motion: no-preference) { .skeleton { animation: shimmer 1.2s linear infinite; } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Submission Planner */
.plan-inputs { display: grid; gap: var(--s5); align-content: start; min-width: 0; }
.plan-cards { display: grid; gap: var(--s3); margin-bottom: var(--s3); }
.plan-card { border-radius: var(--r-inner); box-shadow: none; }
.plan-card > summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); cursor: pointer; min-height: 52px; font-weight: 600; list-style: none; }
.plan-card > summary::-webkit-details-marker { display: none; }
.plan-card > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); margin: 0 4px 4px var(--s2); transition: transform var(--t-fast); }
.plan-card[open] > summary::after { transform: rotate(-135deg); margin-bottom: -4px; }
.pc-name { flex: 1; overflow-wrap: anywhere; }
.pc-body { padding: 0 var(--s4) var(--s4); }
.pc-errors { color: var(--neg); font-weight: 600; font-size: var(--step--1); min-height: 1em; margin: var(--s2) 0 0; }
.table-scroll { overflow-x: auto; margin: var(--s3) 0; }
.plan-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 30rem; }
.plan-table th { text-align: left; font-size: .76rem; color: var(--muted); font-weight: 600; padding: 6px; border-bottom: 1px solid var(--glass-edge); }
.plan-table td { padding: 10px 6px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.plan-table td.num { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan-table .muted, .plan-table td.muted { color: var(--muted); font-weight: 500; font-size: .78rem; }
.print-only { display: none; }

/* ========== Trading Counter ========== */
.search-bar { display: flex; gap: var(--s2); flex-wrap: wrap; }
.search-bar input { flex: 1; min-width: 0; }
.search-bar .cat-select { flex: 1 1 100%; }
@media (min-width: 700px) { .search-bar .cat-select { flex: 0 0 14rem; } }
.handoffs { display: grid; gap: var(--s4); margin-top: var(--s5); }
@media (min-width: 700px) { .handoffs { grid-template-columns: 1fr 1fr; } }
.handoff { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s5); }
.handoff h3 { margin: 0; }
.empty { padding: var(--s6) var(--s5); text-align: center; color: var(--text-2); border-style: dashed; }
.empty p { margin-inline: auto; }

/* ========== Vault ========== */
.vault-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
@media (min-width: 700px) { .vault-stats { grid-template-columns: repeat(4, 1fr); } }
.stat { padding: var(--s3) var(--s4); border-radius: var(--r-inner); }
.stat .k { font-size: .78rem; font-weight: 600; color: var(--muted); }
.stat .v { font-family: var(--font-display); font-size: 1.55rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
#s-note { margin-top: var(--s3); }
.history-panel { margin-top: var(--s4); padding: var(--s5); }
.history-svg { width: 100%; height: auto; overflow: visible; }
.history-svg path { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.history-svg .h-value { stroke: #A78BFA; filter: drop-shadow(0 0 6px rgba(139, 92, 246, .7)); }
.history-svg .h-cost { stroke: rgba(255, 255, 255, .35); stroke-dasharray: 6 6; }
.history-legend { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-size: .85rem; color: var(--text-2); margin-top: var(--s2); }
.history-legend i { display: inline-block; width: 18px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.lg-value { background: #A78BFA; } .lg-cost { background: rgba(255, 255, 255, .45); }
.vault-tabs { display: flex; gap: var(--s2); overflow-x: auto; margin: var(--s5) 0 0; padding-bottom: 4px; scrollbar-width: none; }
.vault-tabs a { flex: none; padding: .45rem .9rem; border-radius: var(--r-pill); border: 1px solid var(--glass-edge); background: rgba(255, 255, 255, .05); color: var(--text-2); text-decoration: none; font-weight: 600; font-size: .9rem; }
.vault-tabs a:hover { color: var(--text); background: rgba(255, 255, 255, .1); }
.vault-toolbar { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); }
.vault-toolbar input { flex: 1 1 100%; min-width: 0; }
.vault-toolbar select { flex: 1 1 0; min-width: 0; }
@media (min-width: 700px) { .vault-toolbar input { flex: 1 1 0; } .vault-toolbar select { flex: 0 0 auto; width: auto; min-width: 11rem; } }
.dupes { padding: var(--s4); margin-bottom: var(--s4); border-color: rgba(255, 210, 122, .4); background: linear-gradient(160deg, rgba(255, 210, 122, .1), rgba(255, 255, 255, .02)); }
.dupes p { margin-bottom: var(--s3); }
.dupes .btn { margin-right: var(--s3); }
.vault-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
@media (min-width: 700px) { .vault-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); } }
.vcard { position: relative; overflow: hidden; border-radius: 18px; }
.vcard::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: rgba(255, 255, 255, .25); }
.vcard.graded::before { background: var(--spectrum); }
.vcard-inner { padding: var(--s3) var(--s4); display: flex; flex-direction: column; gap: 4px; min-height: 180px; }
.vcard h3 { font-size: 1rem; margin: 0; overflow-wrap: anywhere; }
.vcard .meta { font-size: .8rem; color: var(--muted); }
.vcard .vals { margin-top: auto; font-size: .85rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.vcard .pl { font-weight: 700; }
.vcard .row-actions { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); margin-top: var(--s2); flex-wrap: wrap; }
.vcard.wide { grid-column: 1 / -1; }
.vcard .mk-line { color: var(--text); font-weight: 600; }
.gv-toggle { align-self: flex-start; margin-top: var(--s2); }
.gv-panel { margin-top: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--hairline); display: grid; gap: var(--s2); font-size: .9rem; }
.gv-panel .btn { justify-self: start; }
.mk-raw b, .mk-compare b { font-family: var(--font-display); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.mk-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.mk-table td.num { white-space: nowrap; }
.vcard.wide .vcard-inner { padding-inline: var(--s3); }
.mk-table th { text-align: left; font-size: .75rem; color: var(--muted); font-weight: 600; padding: 0 6px 6px 0; }
.mk-table th:not(:first-child), .mk-table td.num { text-align: right; }
.mk-table td { padding: 6px 6px 6px 0; border-top: 1px solid var(--hairline); vertical-align: top; font-variant-numeric: tabular-nums; }
.mk-table td:first-child { font-weight: 600; white-space: nowrap; }
.mk-old { color: var(--gold); }
.mk-matched b { color: var(--text); }
.mk-compare { display: grid; gap: var(--s2); }
.mk-compare label { font-weight: 600; font-size: .85rem; }
.mk-compare select { max-width: 14rem; }
.mk-choose { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s2) 0; }
.mk-choose .note { flex-basis: 100%; }
.mk-choose .btn { min-height: 40px; padding: .4rem .9rem; font-size: .85rem; text-align: left; }
.mk-disclaimer { font-size: .85rem; font-weight: 600; color: var(--gold); padding: var(--s2) var(--s3); border-radius: var(--r-inner); border: 1px solid rgba(255, 210, 122, .35); background: rgba(255, 210, 122, .08); }
.graded-stats { margin-top: var(--s4); }
.market-status { margin: var(--s3) 0 var(--s4); }
.slab-scan { padding: var(--s5); margin-bottom: var(--s4); }
.slab-scan h3 { margin-top: 0; }
.slab-scan .file-btn.is-disabled { opacity: .45; pointer-events: none; }
.slab-result:not(:empty) { margin-top: var(--s4); }
.slab-confirm { display: grid; gap: var(--s3); }
.slab-market .k, .gcard-value .k { font-size: .75rem; font-weight: 600; color: var(--muted); }
.slab-market .v, .gcard-value .v { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.gcard-value .v.muted { color: var(--muted); }
.feedback { max-width: 40rem; margin: 0 auto var(--s5); padding: var(--s3) var(--s4); border-radius: var(--r-inner); border: 1px solid var(--glass-edge); background: rgba(255, 255, 255, .04); }
.feedback summary { cursor: pointer; font-weight: 600; color: var(--text); min-height: 44px; display: flex; align-items: center; }
.feedback-form { display: grid; gap: var(--s3); margin-top: var(--s3); }
.feedback-form .btn { justify-self: start; }
.ease { border: 0; padding: 0; margin: 0; }
.ease legend { font-weight: 600; font-size: .9rem; margin-bottom: var(--s2); }
.ease-row { display: flex; flex-wrap: wrap; gap: var(--s2); }
.ease-row label { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 .8rem; border-radius: var(--r-pill); border: 1px solid var(--glass-edge); font-size: .88rem; cursor: pointer; }
.ease-row label:has(input:checked) { border-color: #A78BFA; background: rgba(139, 92, 246, .18); }
@media print { .feedback { display: none; } }
.example-banner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); margin-bottom: var(--s4); border-radius: var(--r-inner); border: 1px dashed rgba(255, 210, 122, .6); background: rgba(255, 210, 122, .08); }
.example-banner p { flex: 1 1 16rem; margin: 0; font-size: .9rem; }
.example-banner b { color: var(--gold); }
.chip.ex-chip { background: rgba(255, 210, 122, .14); border-color: rgba(255, 210, 122, .5); color: var(--gold); vertical-align: middle; }
.gcard.is-example, .vcard:has(.ex-chip) { border-style: dashed; }
.graded-toolbar { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s3); }
.graded-list { display: grid; gap: var(--s3); }
@media (min-width: 900px) { .graded-list { grid-template-columns: 1fr 1fr; } }
.gcard { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3) var(--s4); padding: var(--s4); border-radius: 18px; position: relative; overflow: hidden; }
.gcard::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--spectrum); }
.gcard-grade { width: 58px; min-height: 64px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(160deg, rgba(139, 92, 246, .35), rgba(59, 130, 246, .18)); border: 1px solid var(--glass-edge-hi); }
.gcard-grade span { font-size: .68rem; font-weight: 700; letter-spacing: .06em; color: var(--text-2); }
.gcard-grade b { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.1; }
.gcard-body h3 { margin: 0; font-size: 1.02rem; overflow-wrap: anywhere; }
.gcard-body .meta { font-size: .82rem; color: var(--muted); margin-top: 2px; }
.gcard-value { grid-column: 1 / -1; display: grid; gap: 2px; padding-top: var(--s3); border-top: 1px solid var(--hairline); }
.gcard-actions { display: flex; gap: var(--s4); margin-top: var(--s2); flex-wrap: wrap; }
.want-list { list-style: none; padding: 0; display: grid; gap: var(--s3); margin-top: var(--s4); }
.want { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r-inner); flex-wrap: wrap; }
.want-actions { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.want-actions .btn { min-height: 40px; padding: .45rem 1rem; font-size: .9rem; }
.set-list { display: grid; gap: var(--s3); }
@media (min-width: 700px) { .set-list { grid-template-columns: 1fr 1fr; } }
.set-row { padding: var(--s4); border-radius: var(--r-inner); }
.set-head { display: flex; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s2); }
.set-head span { color: var(--text-2); font-variant-numeric: tabular-nums; font-size: .9rem; }
.set-bar { height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .08); overflow: hidden; margin-bottom: var(--s3); }
.set-bar span { display: block; height: 100%; background: var(--spectrum); border-radius: 8px; }
.set-size { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); font-size: .85rem; font-weight: 500; color: var(--text-2); margin: 0; }
.set-size input { width: 6.5rem; min-height: 40px; }
.import-preview { margin-top: var(--s3); }
.import-preview:not(:empty) { padding: var(--s4); border-radius: var(--r-inner); }
.import-preview p:last-child { margin-bottom: 0; }
.badge-toast { position: fixed; left: 50%; bottom: calc(var(--bottom-nav-h) + 30px); transform: translateX(-50%); padding: .6rem 1.1rem; border-radius: var(--r-pill); font-weight: 700; white-space: nowrap; z-index: 50; color: #fff; background: var(--spectrum); box-shadow: var(--glow); }
@media (min-width: 900px) { .badge-toast { bottom: 24px; } }

/* ========== Premium ========== */
.plans { display: grid; gap: var(--s5); margin-top: var(--s5); }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }
.plan { position: relative; display: flex; flex-direction: column; overflow: hidden; }
.plan.pro { border-color: rgba(185, 164, 255, .5); box-shadow: var(--shadow), 0 30px 80px -40px rgba(139, 92, 246, .9); }
.plan.pro::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--spectrum); }
.plan.plus::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, #4F8BFF, #8B5CF6); }
.plan-inner { flex: 1; display: flex; flex-direction: column; padding: var(--s5); }
.plan h2 { font-size: var(--step-2); margin-bottom: 0; }
.price { font-family: var(--font-display); font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin-bottom: 0; }
.plan.pro .price { background: var(--spectrum); -webkit-background-clip: text; background-clip: text; color: transparent; }
.price small { font-size: 1rem; font-weight: 500; color: var(--muted); -webkit-text-fill-color: var(--muted); }
.plan ul { padding-left: 1.15rem; margin: var(--s3) 0 var(--s5); color: var(--text-2); }
.plan li { margin-bottom: 6px; }
.plan .btn { margin-top: auto; }

/* ========== Guides / prose ========== */
.prose { max-width: 74ch; padding-bottom: var(--s7); }
.prose h2 { font-size: var(--step-2); margin-top: var(--s6); }
.prose p, .prose li { color: var(--text-2); }
.prose b { color: var(--text); }
.prose li { margin-bottom: var(--s2); }
.draft-flag { background: rgba(255, 122, 147, .1); border: 1px solid rgba(255, 122, 147, .4); border-radius: var(--r-ctl); padding: var(--s3) var(--s4); font-weight: 600; color: #FFC2CD; }
.guide-list { list-style: none; padding: 0; display: grid; gap: var(--s3); }
.guide-list a { display: block; padding: var(--s4) var(--s5); text-decoration: none; color: var(--text); transition: border-color var(--t-fast), transform var(--t-fast); }
.guide-list a:hover { border-color: var(--glass-edge-hi); transform: translateY(-1px); }
.guide-list b { display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); margin-bottom: 2px; }
.guide-list span { color: var(--text-2); }
table.simple { border-collapse: collapse; width: 100%; max-width: 32rem; margin-bottom: var(--s4); }
table.simple th, table.simple td { text-align: left; padding: .55rem .75rem; border-bottom: 1px solid var(--hairline); color: var(--text-2); }
table.simple th { font-weight: 600; color: var(--text); }
.formula { font-weight: 600; color: var(--text) !important; background: rgba(139, 92, 246, .1); border-left: 3px solid var(--violet); padding: var(--s3) var(--s4); border-radius: 0 var(--r-ctl) var(--r-ctl) 0; }
.guide-cta { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s6); padding: var(--s5); border-radius: var(--r-card); background: linear-gradient(160deg, rgba(139, 92, 246, .2), rgba(79, 139, 255, .08)); border: 1px solid rgba(185, 164, 255, .3); }

/* ========== Footer ========== */
.site-footer { margin-top: var(--s6); padding: var(--s6) var(--s4); font-size: var(--step--1); color: var(--muted); border-top: 1px solid var(--hairline); background: rgba(5, 4, 18, .5); }
.site-footer a { color: var(--text-2); font-weight: 600; }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); margin-bottom: var(--s4); }
.disclaimer { max-width: 90ch; }
@media (min-width: 900px) { .site-footer { padding: var(--s6) max(var(--s6), calc((100% - var(--maxw)) / 2 + var(--s6))); } }

/* admin */
.admin { max-width: 960px; margin: 0 auto; padding: var(--s5); }
.admin table { width: 100%; border-collapse: collapse; margin-bottom: var(--s5); font-size: .9rem; }
.admin th, .admin td { border-bottom: 1px solid var(--hairline); padding: 6px; text-align: left; }

/* Browsers without backdrop-filter get a solid, still-readable glass. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .panel, .console-panel, .stat, .vcard, .plan, .handoff, .grader, .guide-list a, .plan-card, .want, .set-row, .empty, .site-header, .bottom-nav, .station, .fcard { background: #15123A; }
}

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

/* ========== Print / save as PDF ========== */
@media print {
  @page { margin: 14mm; }
  :root { color-scheme: light; }
  html, body { background: #fff !important; color: #000 !important; padding: 0; }
  h1, h2, h3, .price, .gradient-text, .plan.pro .price { color: #000 !important; -webkit-text-fill-color: #000 !important; background: none !important; }
  .panel, .console-panel, .stat, .vcard, .plan, .meter, .plan-card, .grader, .meter.big { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .conf-badge, .chip { background: #fff !important; color: #000 !important; border-color: #000 !important; }
  .bottom-nav, .blob, .vault-tabs, .lab-note { display: none !important; }
  .site-header, .site-footer, .bottom-nav, .skip, .lab-actions, .report-actions, #plan-settings .hint, .page-head p.hint,
  .page-grading-lab #graders, .page-grading-lab #lab-errors, .page-grading-lab #lab-note, .plan-card .pc-body, .empty-results img, details.more > summary { display: none !important; }
  .print-only { display: block; }
  .mk-disclaimer { color: #000; border-color: #000; background: none; }
  .lab, .console-panel, .meter, .plan-card, .grader { background: #fff !important; color: #000 !important; border-color: #999 !important; box-shadow: none !important; }
  .lab .page-head h1, .console-panel h2, .console label, .verdict, .plan-card > summary { color: #000 !important; }
  .meter .v, .meter .v.pos, .meter .v.neg, .plan-table .pos, .plan-table .neg, .bar .amt { color: #000 !important; }
  .meter .k, .assumptions, .plan-table th, .plan-table .muted, .console .hint { color: #333 !important; }
  .console input, .console select { background: #fff !important; color: #000 !important; border: 1px solid #999 !important; }
  .console { display: block; }
  .results { position: static; }
  .console-panel { break-inside: avoid; margin-bottom: 8mm; }
  .plan-table { min-width: 0; }
  .table-scroll { overflow: visible; }
  .chip.send, .chip.hold { background: #fff; color: #000; border: 1px solid #000; }
  .bar .track { border: 1px solid #999; }
  .bar .fill.pos { background: #555 !important; } .bar .fill.neg { background: #bbb !important; }
  .report-head { margin: 0 0 4mm; font-size: 9pt; color: #333; }
  .page-head p, .lab .page-head p { color: #333 !important; }
  .plan-card > summary::after, .report-actions + .assumptions, .planner .page-head p { display: none !important; }
  .planner .page-head { padding-top: 0; }
  a { color: #000; text-decoration: none; }
}

/* feature strip (home) */
.feature-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; padding: 0; margin-top: var(--s4); border-radius: var(--r-card); overflow: hidden;
  background: var(--glass-edge); border: 1px solid var(--glass-edge); box-shadow: var(--shadow); max-width: calc(var(--maxw) - 2 * var(--s4)); }
.feature-strip > div { display: flex; flex-direction: column; gap: 2px; padding: var(--s4); background: linear-gradient(160deg, rgba(22, 18, 58, .92), rgba(12, 10, 36, .92)); }
.feature-strip b { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }
.feature-strip span { color: var(--muted); font-size: .85rem; }
@media (min-width: 900px) { .feature-strip { grid-template-columns: repeat(4, 1fr); margin-inline: auto; } }
@media (max-width: 699px) { .feature-strip { margin-inline: var(--s4); } }

/* phones: example cards sit in a tidy grid instead of a floating stack */
@media (max-width: 899px) {
  .float-stack { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
  .float-stack .fcard { position: static; width: auto; transform: none; animation: none; padding: var(--s3) var(--s4); }
  .float-stack .fcard.f2 { grid-column: span 2; grid-row: 1; }
  .fcard .v { font-size: 1.5rem; }
  .fcard.f2 .v { font-size: 1.9rem; }
  .centering-viz .cardframe { width: 32px; }
}
.fcard .k { align-items: flex-start; }
.fcard .tag { flex: none; white-space: nowrap; }
@media (max-width: 899px) { .blob.b2 { bottom: auto; top: 46%; left: -150px; width: 220px; height: 190px; opacity: .6; } }

/* logo */
.wordmark .logo-svg { height: 26px; width: auto; color: var(--text); display: block; }
@media (min-width: 900px) { .wordmark .logo-svg { height: 28px; } }
.wordmark { padding: 2px 4px; }
.mark-lg { filter: drop-shadow(0 12px 36px rgba(139, 92, 246, .65)); margin-bottom: var(--s4); }
.hero-mark { position: absolute; width: 230px; height: 230px; right: 18%; top: 70px; z-index: 0; opacity: .95;
  filter: drop-shadow(0 0 40px rgba(139, 92, 246, .55)) drop-shadow(0 20px 60px rgba(79, 139, 255, .35)); }
.float-stack .fcard { z-index: 1; }
@media (prefers-reduced-motion: no-preference) { .hero-mark { animation: float 10s ease-in-out infinite -3s; } }
@media (max-width: 899px) { .hero-mark { display: none; } }
@media (min-width: 900px) {
  .float-stack { min-height: 470px; }
  .hero-mark { right: 2%; top: -24px; width: 210px; height: 210px; }
  .fcard.f1 { left: 0; top: 70px; }
  .fcard.f2 { right: 0; top: 215px; }
  .fcard.f3 { left: 6%; top: 330px; }
}

/* ========== Legal ========== */
.legal-crumb { font-size: .85rem; margin-bottom: var(--s2); }
.legal-meta { color: var(--muted); font-size: .9rem; }
.legal-status { font-weight: 700; }
.legal-status.is-draft { color: var(--gold); }
.legal-status.is-approved { color: var(--pos); }
.legal-banner { padding: var(--s3) var(--s4); margin: var(--s3) 0; border-radius: var(--r-inner); border: 1px solid rgba(255, 210, 122, .45); background: rgba(255, 210, 122, .08); font-size: .95rem; }
.legal-banner b { color: var(--gold); }
.legal-banner.warn { border-color: rgba(255, 122, 147, .45); background: rgba(255, 122, 147, .08); }
.legal-banner.warn b { color: var(--neg); }
.legal-grid { display: grid; gap: var(--s5); margin-top: var(--s4); }
@media (min-width: 960px) { .legal-grid { grid-template-columns: 15rem minmax(0, 1fr); } .legal-toc { position: sticky; top: 6rem; align-self: start; } }
.legal-toc { font-size: .88rem; padding: var(--s4); border-radius: var(--r-inner); border: 1px solid var(--glass-edge); background: rgba(255, 255, 255, .03); }
.legal-toc-h { font-weight: 700; margin: 0 0 var(--s2); }
.legal-toc ol { margin: 0; padding-left: 1.2rem; display: grid; gap: 4px; }
.legal-body { max-width: 46rem; line-height: 1.65; }
.legal-body h2 { font-size: 1.15rem; margin-top: var(--s5); scroll-margin-top: 6rem; }
.legal-body mark.ph { background: rgba(255, 210, 122, .18); color: var(--gold); border-radius: 4px; padding: 0 3px; font-weight: 600; }
.legal-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.legal-table th, .legal-table td { text-align: left; padding: 6px 8px 6px 0; border-top: 1px solid var(--hairline); vertical-align: top; }
.legal-table th { color: var(--muted); font-weight: 600; border-top: 0; }
.legal-foot { margin-top: var(--s6, 3rem); padding-top: var(--s4); border-top: 1px solid var(--hairline); }
.legal-foot h2 { font-size: 1rem; }
.legal-related { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.legal-index { list-style: none; padding: 0; display: grid; gap: var(--s3); }
@media (min-width: 760px) { .legal-index { grid-template-columns: 1fr 1fr; } }
.legal-index a { display: grid; gap: 4px; padding: var(--s4); border-radius: var(--r-inner); border: 1px solid var(--glass-edge); background: rgba(255, 255, 255, .04); text-decoration: none; color: var(--text-2); }
.legal-index a b { color: var(--text); font-size: 1.02rem; }
.legal-index a:hover { background: rgba(255, 255, 255, .08); }
.ai-notice { padding: var(--s3) var(--s4); border-radius: var(--r-inner); border: 1px solid rgba(139, 92, 246, .45); background: rgba(139, 92, 246, .1); font-size: .9rem; display: grid; gap: var(--s2); }
.ai-notice .btn { justify-self: start; }
.ai-disclaimer { font-size: .85rem; font-weight: 600; color: var(--text); padding: var(--s2) var(--s3); border-left: 3px solid #A78BFA; background: rgba(139, 92, 246, .08); border-radius: 0 8px 8px 0; margin: var(--s2) 0; }
@media print {
  .legal-toc, .legal-foot .lab-actions, .legal-crumb { display: none; }
  .legal-banner, .legal-banner.warn { border: 1.5pt solid #000; background: none; color: #000; }
  .legal-banner b, .legal-banner.warn b, .legal-status { color: #000 !important; }
  .legal-body mark.ph { background: none; color: #000; border: 1px dashed #000; }
  .legal-grid { display: block; }
}
/* ========== Checkout & profile ========== */
.summary-list { display: grid; gap: var(--s2); margin: 0 0 var(--s4); }
.summary-list > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--s3); padding-bottom: var(--s2); border-bottom: 1px solid var(--hairline); }
.summary-list dt { color: var(--muted); font-weight: 600; font-size: .9rem; }
.summary-list dd { margin: 0; }
.feature-list { padding-left: 1.2rem; display: grid; gap: 4px; }
.plan-line { font-size: 1.05rem; }
.recovery { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; margin: var(--s2) 0; }
.recovery code { word-break: break-all; padding: var(--s2) var(--s3); border-radius: var(--r-inner); background: rgba(255, 255, 255, .06); border: 1px solid var(--glass-edge); font-size: .85rem; flex: 1 1 14rem; }
.signin-form { display: grid; gap: var(--s2); margin-top: var(--s3); }
.signin-form .btn { justify-self: start; }
.saved-list { list-style: none; padding: 0; display: grid; gap: var(--s2); }
.saved-list li { padding-bottom: var(--s2); border-bottom: 1px solid var(--hairline); }
.alert-list { list-style: none; padding: 0; display: grid; gap: var(--s2); margin-bottom: var(--s3); }
.alert-hit { padding: var(--s2) var(--s3); border-radius: var(--r-inner); border: 1px solid rgba(94, 234, 160, .45); background: rgba(94, 234, 160, .08); }
.watch-form { display: grid; gap: var(--s2); margin-top: var(--s3); }
.sync-status.ok { color: var(--pos); }
.sync-status.bad { color: var(--neg); }
.sync-status.warn { color: var(--text); padding: var(--s3); border-radius: var(--r-inner); border: 1px solid rgba(255, 210, 122, .45); background: rgba(255, 210, 122, .08); display: grid; gap: var(--s2); }
.plans-note { margin-top: var(--s3); }
html.moving body { visibility: hidden; }