/* Smart Video Controls — shared shell (homepage, /analytics/, /privacy/)
   Single source of truth for tokens, background, and the common header.
   Page-specific styles stay inline in each page. Cache-busted with ?v=.
   Radius system (shape lock): cards 16px, buttons 11px, badges pill. */

:root {
  --bg:#0d0d15; --bg-glow:rgba(139,123,255,.10);
  --surface:#14141f; --card:#1a1a28; --card-hi:#20202f; --bg-elevated:#16161f;
  --border:#262638; --border-hi:#353550;
  --text:#e6e6f2; --text-2:#b4b4d0; --text-3:#9090b4; --dim:#56567a;
  --accent:#8b7bff; --accent-2:#6d5dfc;
  --glow:rgba(139,123,255,.28); --glow-dim:rgba(139,123,255,.14);
  --playing:#2dd4a0; --playing-bg:rgba(45,212,160,.10); --warn:#fbbf24;
  --wrap:880px;
  --mono:'SF Mono','JetBrains Mono','Menlo',Consolas,ui-monospace,monospace;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
}

html { background: var(--bg); }
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; color: var(--text); font-family: var(--sans);
  background:
    radial-gradient(1100px 520px at 12% -8%, var(--bg-glow), transparent 60%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(139,123,255,.35); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* Common header — same markup on every page */
.nav { border-bottom: 1px solid var(--border); background: rgba(13,13,21,.7); position: sticky; top: 0; z-index: 10; }
.nav-in { max-width: var(--wrap); margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.nav .brand { color: var(--text); } /* beats page-level `a { color }` rules */
.brand .glyph { width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--accent), var(--accent-2)); box-shadow: 0 0 14px var(--glow); color: #fff; }
.brand .glyph svg { width: 13px; height: 13px; margin-left: 1px; }
.brand .nm { font-weight: 680; font-size: 14.5px; letter-spacing: -.01em; }
.nav-links { margin-left: auto; display: flex; gap: 20px; font-size: 13.5px; }
.nav-links a { color: var(--text-2); text-decoration: none; }
.nav-links a:hover { color: var(--text); text-decoration: none; }
.nav-links a.active { color: var(--text); }
@media (max-width: 560px) { .nav-links a.hide-sm { display: none; } }