/* =========================================================
   SNAPOUT — Blue Edition skin for every page that isn't the homepage
   (legal pages, 404, admin, and the /learn login gate).
   Loaded AFTER base.css (and after each page's own <style>), so the old
   Cenurys look — #101010 grey, Clash/Urbanist, dot grid (bg.js) — is replaced
   by the homepage's: obsidian, ice blue, periwinkle, Unbounded / Inter Tight,
   aurora + technical grid + particle field (js/blue-bg.js) + grain.
   Same tokens as css/blue.css. The course app inside /learn keeps its own
   skin (css/learn-blue.css), which already matches.
   ========================================================= */
:root {
  --bg: #07080c;
  --bg-2: #0b0d13;
  --surface: #11131a;
  --surface-2: #151822;
  --line: rgba(200, 214, 240, .09);
  --line-2: rgba(200, 214, 240, .17);
  --text: #f3f5fa;
  --text-2: #c6ccd8;
  --muted: #aab1c2;
  --dim: #7f879a;
  --accent: #9dcbff;
  --acc: 157, 203, 255;
  --accent-bright: #cfe6ff;
  --on-accent: #0a1024;
  --accent-2: #8fa6ff;
  --accent-3: #c3cdff;
  --ok: 111, 224, 166;
  --red: #ff7a7a;
  --grad: linear-gradient(100deg, #9dcbff 0%, #ffffff 42%, #c3cdff 62%, #8fa6ff 100%);
  --display: "Unbounded", "Inter Tight", system-ui, sans-serif;
  --body: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
html { background: #07080c; scrollbar-color: rgba(157, 203, 255, .45) transparent; }
body { background: #07080c; font-family: var(--body); }
::selection { background: rgba(143, 166, 255, .45); color: #fff; }
h1, h2, h3, h4 { font-family: var(--display); letter-spacing: -.025em; }
:focus-visible { outline: 2px solid #9dcbff; outline-offset: 3px; border-radius: 6px; }

/* the old backgrounds are gone everywhere */
.noise, .cen-bg { display: none !important; }

/* ---------- atmosphere (same layers as the homepage) ---------- */
.atmos { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: #07080c; }
.atmos #bg-gl, .atmos #bg-fx { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.atmos #bg-fx { z-index: 2; }
.atmos .bg-grid { position: absolute; inset: 0; z-index: 1; opacity: .9;
  background-image: linear-gradient(rgba(190, 210, 245, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(190, 210, 245, .05) 1px, transparent 1px), linear-gradient(rgba(190, 210, 245, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(190, 210, 245, .035) 1px, transparent 1px);
  background-size: 360px 360px, 360px 360px, 72px 72px, 72px 72px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 20%, #000 20%, transparent 80%); mask-image: radial-gradient(120% 90% at 50% 20%, #000 20%, transparent 80%); }
.atmos .grain { position: absolute; inset: 0; z-index: 3; opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* page content sits above the atmosphere */
body > main, body > header, body > .lg-top, body > .pin, body > .dash, body > footer { position: relative; z-index: 3; }
body > .lg-top { position: fixed; }

/* ---------- logo ---------- */
.logo { font-family: var(--display); }
.logo i { color: #9dcbff; }

/* ---------- buttons: homepage pills ---------- */
:is(body:not(.learn), .learn .gate, .learn .modal) .btn {
  border-radius: 999px; color: #0a1024; border: 0;
  background: linear-gradient(120deg, #eaf3ff, #c9dfff 40%, #b4c6ff 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .35) inset, 0 12px 36px -10px rgba(90, 130, 255, .6);
}
:is(body:not(.learn), .learn .gate, .learn .modal) .btn:hover {
  background: linear-gradient(120deg, #f4f9ff, #d6e7ff 40%, #c2d1ff 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .45) inset, 0 18px 50px -12px rgba(90, 130, 255, .8), 0 0 40px -12px rgba(157, 203, 255, .8);
}
:is(body:not(.learn), .learn .gate, .learn .modal) .btn-ghost {
  color: var(--text); background: rgba(255, 255, 255, .03); border: 1px solid var(--line-2); box-shadow: none;
}
:is(body:not(.learn), .learn .gate, .learn .modal) .btn-ghost:hover {
  border-color: rgba(207, 230, 255, .5); background: rgba(143, 166, 255, .08); box-shadow: 0 10px 30px -14px rgba(143, 166, 255, .6);
}

/* ---------- glass surfaces ---------- */
.lg-top { background: rgba(7, 8, 12, .62) !important; -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid var(--line) !important; }
.lg-tag { font-family: var(--mono); font-weight: 500 !important; letter-spacing: .22em !important; color: #9dcbff !important; }
.lg h1 { font-weight: 600; letter-spacing: -.035em; background: var(--grad); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.lg h2 { color: var(--text); }
.lg-box { background: rgba(143, 166, 255, .07) !important; border-color: rgba(157, 203, 255, .22) !important; }
.lg .todo { background: #cfe6ff; color: #0a1024; }
.modal-card { background: rgba(15, 17, 24, .92); border-color: var(--line-2); }
.field input { border-color: var(--line-2); }
.field input:focus { border-color: #9dcbff; box-shadow: 0 0 0 4px rgba(157, 203, 255, .14); }
.nf-code { font-family: var(--display) !important; background: linear-gradient(180deg, #fff 10%, rgba(157, 203, 255, .4)) !important; -webkit-background-clip: text !important; background-clip: text !important; filter: drop-shadow(0 0 40px rgba(143, 166, 255, .3)) !important; }

/* /learn login gate: the course app owns the particle canvases, so the gate gets the
   static layers (aurora glow, grid, grain) — same look, no second animation */
.atmos-lite .aurora { position: absolute; inset: -20%; z-index: 0;
  background: radial-gradient(60% 45% at 30% 10%, rgba(43, 71, 184, .35), transparent 70%), radial-gradient(50% 40% at 75% 20%, rgba(143, 166, 255, .18), transparent 70%), radial-gradient(40% 35% at 50% 85%, rgba(157, 203, 255, .08), transparent 70%);
  animation: auroraDrift 22s ease-in-out infinite alternate; }
@keyframes auroraDrift { to { transform: translate3d(3%, 2%, 0) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .atmos-lite .aurora { animation: none; } }
.learn .gate-bg { display: none; }
.learn .gate { background: transparent; }