/* Premium theme (Apple-inspired) — loaded last on every page; only visuals, no layout logic.
   SF Pro on Apple devices, Inter everywhere else. Neutral greys, one blue accent, frosted glass, soft depth. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root {
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;
  --serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", Arial, sans-serif;
  --bg: #f5f5f7; --bg-deep: #ebebf0; --surface: #ffffff;
  --ink: #1d1d1f; --ink-soft: #424245; --muted: #86868b;
  --line: rgba(0, 0, 0, .08);
  --accent: #0071e3; --accent-hover: #0077ed; --camel: #0071e3; --on-accent: #fff;
  --danger: #e30000;
  --radius: 22px;
  --shadow-sm: 0 1px 1px rgba(0,0,0,.02), 0 4px 18px rgba(0,0,0,.05);
  --shadow-md: 0 10px 40px rgba(0,0,0,.08);
  --shadow-lg: 0 24px 70px rgba(0,0,0,.12);
  --glass: rgba(255, 255, 255, .72);
  --grad: linear-gradient(92deg, #0071e3 0%, #7b61ff 55%, #e34fa1 100%);
  --good: #1a8f3c;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000; --bg-deep: #1c1c1e; --surface: #161618;
    --ink: #f5f5f7; --ink-soft: #d1d1d6; --muted: #8e8e93; --line: rgba(255,255,255,.1);
    --accent: #2997ff; --accent-hover: #47a6ff; --camel: #2997ff; --on-accent: #fff;
    --glass: rgba(22, 22, 24, .72); --good: #30d158; --danger: #ff453a;
    --shadow-sm: 0 1px 1px rgba(0,0,0,.4), 0 4px 18px rgba(0,0,0,.35);
    --grad: linear-gradient(92deg, #2997ff 0%, #a78bfa 55%, #f472b6 100%);
  }
}
:root[data-theme="dark"] {
  --bg: #000000; --bg-deep: #1c1c1e; --surface: #161618;
  --ink: #f5f5f7; --ink-soft: #d1d1d6; --muted: #8e8e93; --line: rgba(255,255,255,.1);
  --accent: #2997ff; --accent-hover: #47a6ff; --camel: #2997ff; --on-accent: #fff;
  --glass: rgba(22, 22, 24, .72); --good: #30d158; --danger: #ff453a;
  --shadow-sm: 0 1px 1px rgba(0,0,0,.4), 0 4px 18px rgba(0,0,0,.35);
  --grad: linear-gradient(92deg, #2997ff 0%, #a78bfa 55%, #f472b6 100%);
}

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: var(--font-text) !important; background: var(--bg) !important; color: var(--ink); letter-spacing: -.003em; }
body::before { display: none !important; }        /* the old warm background glow */
::selection { background: color-mix(in srgb, var(--accent) 25%, transparent); }

/* ---------- typography: big, tight, confident ---------- */
.display, .display-sm, .section-title, .page-head h1, .hello, .name, .hero h1,
.soon-hero h2, .gallery-copy h2, .how-body h3, .desc-preview h3, .colour-row h4, .title-input {
  font-family: var(--serif) !important; font-weight: 700 !important; letter-spacing: -.028em !important;
}
.display { font-size: clamp(44px, 6.4vw, 80px) !important; line-height: 1.04 !important; }
.page-head h1, .hello { font-size: clamp(36px, 4.4vw, 56px) !important; line-height: 1.06 !important; }
.section-title { font-size: 22px !important; letter-spacing: -.02em !important; }
.display em, .hello em, .soon-hero h2 em, .gallery-copy h2 em, .name em {
  font-style: normal !important; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent !important;
}
.kpi-value, .stat strong, .studio-stats strong, .summary-main, .step .n, .sugg-score, .opp-score {
  font-family: var(--serif) !important; font-weight: 600 !important; letter-spacing: -.025em !important;
}
.eyebrow, .kpi-label, .side-group, .opp-store, .vt-cat, .brand-sub, .stat span, .studio-stats span {
  color: var(--muted) !important; font-weight: 600 !important; letter-spacing: .06em !important;
}
.eyebrow { font-size: 12px !important; text-transform: uppercase; }
.lede, .page-head p, .sub, .lead { color: var(--muted) !important; }
.hint { color: var(--muted) !important; }
a { color: var(--accent); }

/* ---------- glass navigation ---------- */
.sidebar { background: var(--glass) !important; backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px);
  border-right: 1px solid var(--line) !important; }
.side-brand b, .wm-main { font-family: var(--serif) !important; font-weight: 700 !important; letter-spacing: .14em !important; }
.side-brand .side-logo { background: var(--ink) !important; color: var(--bg) !important; font-family: var(--serif) !important; font-weight: 700;
  border-radius: 11px !important; box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.side-link { border-radius: 10px !important; font-weight: 500; color: var(--ink) !important; }
.side-link:hover { background: rgba(127,127,127,.1) !important; }
.side-link.active { background: rgba(127,127,127,.14) !important; }
.side-link.active::before { display: none !important; }
.side-link.active svg { color: var(--accent) !important; }
.side-badge { background: rgba(127,127,127,.14) !important; }
.side-avatar, .avatar { background: linear-gradient(145deg, #8e8e93, #3a3a3c) !important; color: #fff !important; font-family: var(--serif) !important; font-weight: 600 !important; }
.m-top { background: var(--glass) !important; }
.m-tabs { background: var(--glass) !important; backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px); }
.m-tabs a.active { color: var(--accent) !important; }
.topbar { background: var(--glass) !important; }

/* ---------- surfaces ---------- */
.fin-card, .kpi, .opp, .step, .how, .hcard, .card, .config-card, .vt-card, .panel-card, .imp-card, .run-card, .result-card {
  border: 1px solid var(--line) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow-sm) !important; background: var(--surface);
}
.fin-card:hover, .opp:hover, .hcard:hover { box-shadow: var(--shadow-md) !important; }
.kpi.hero { background: var(--ink) !important; color: var(--bg) !important; }
.kpi.hero .kpi-label, .kpi.hero .kpi-sub { color: color-mix(in srgb, var(--bg) 62%, transparent) !important; }
.kpi .good, .delta.up, td.pos { color: var(--good) !important; }
.kpi .bad, .delta.down, td.neg { color: var(--danger) !important; }
.soon-hero { background: #000 !important; border-radius: 28px !important; }
.soon-hero::after { background: radial-gradient(circle, rgba(123, 97, 255, .45), transparent 70%) !important; }
.soon-hero .eyebrow { color: #a1a1a6 !important; }
.fin-alert { background: color-mix(in srgb, #ff9f0a 10%, var(--surface)) !important; border-color: color-mix(in srgb, #ff9f0a 30%, var(--line)) !important; border-radius: 16px !important; }

/* ---------- controls ---------- */
.btn-primary, .enter, .btn { background: var(--accent) !important; color: #fff !important; border-radius: 980px !important; font-weight: 500 !important;
  letter-spacing: -.01em !important; text-transform: none !important; box-shadow: none !important; }
.btn-primary:hover, .enter:hover, .btn:hover { background: var(--accent-hover) !important; transform: none !important; }
.btn { border-radius: 14px !important; }
.ghost-btn, .btn-ghost { border-radius: 980px !important; border: 1px solid var(--line) !important; background: var(--surface) !important; color: var(--accent) !important; font-weight: 500; }
.ghost-btn:hover { background: color-mix(in srgb, var(--accent) 6%, var(--surface)) !important; }
.ranges, .tabs, #cfg-mode { background: rgba(118,118,128,.12) !important; border-radius: 10px !important; padding: 2px !important; }
.ranges button, .tab-btn { border-radius: 8px !important; font-weight: 500 !important; color: var(--ink) !important; }
.ranges button.on, .tab-btn.active { background: var(--surface) !important; box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 3px 1px rgba(0,0,0,.04) !important; }
input, select, textarea { border-radius: 12px !important; }
input:focus, select:focus, textarea:focus { outline: none !important; border-color: var(--accent) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent) !important; }
.search input, .search-mini { border-radius: 980px !important; box-shadow: var(--shadow-sm) !important; border: 1px solid var(--line) !important; }

/* ---------- data ---------- */
.fin-table th { color: var(--muted) !important; font-weight: 600 !important; letter-spacing: .02em !important; text-transform: none !important; font-size: 12px !important; }
.fin-table td { border-bottom-color: var(--line) !important; }
.bdg { border-radius: 980px !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: rgba(255,255,255,.85) !important; color: #1d1d1f !important; }
.bdg.best { background: rgba(0,0,0,.78) !important; color: #fff !important; }
.bdg.multi { background: var(--accent) !important; color: #fff !important; }
.bdg.drop { background: #1a8f3c !important; color: #fff !important; }
.opp-score { background: rgba(255,255,255,.9) !important; backdrop-filter: blur(12px); color: #1d1d1f !important; }
.opp-score.hi, .sugg-score.hi { background: var(--grad) !important; color: #fff !important; }
.opp-cat { color: var(--accent) !important; }
.opp-actions a { border-radius: 980px !important; }
.opp-actions a.primary { background: var(--ink) !important; border-color: var(--ink) !important; color: var(--bg) !important; }
.action { border-radius: 16px !important; background: var(--bg) !important; border-color: transparent !important; }
.action:hover { background: color-mix(in srgb, var(--accent) 6%, var(--bg)) !important; }
.action .ic { border-radius: 12px !important; background: var(--surface) !important; border: 0 !important; box-shadow: var(--shadow-sm); }
.action .ic svg { stroke: var(--accent) !important; }
.side-icon-btn { border-radius: 980px !important; }

/* ---------- welcome screen ---------- */
.panel { background: var(--surface) !important; }
.dot { background: #30d158 !important; box-shadow: 0 0 0 4px rgba(48, 209, 88, .18) !important; }
.gallery-brand b { font-family: var(--serif) !important; font-weight: 700 !important; letter-spacing: .14em !important; }
.veil { background: linear-gradient(180deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 24%), linear-gradient(0deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.5) 30%, rgba(0,0,0,0) 58%) !important; }
.gallery { background: #000 !important; }
.enter, .btn { justify-content: space-between; }
.kpi.hero { text-align: left !important; padding: 20px 22px !important; }