/* ═══════════════════════════════════════════════════════════════
   spartan-core.css — Shared base styles for all guide pages
   Extracted from inline <style> blocks to eliminate ~500KB of
   duplicated CSS across 142 pages.
   Loaded on every page alongside mobile.css.
   ═══════════════════════════════════════════════════════════════ */

/* ── CSS Custom Properties ────────────────────────────────────── */
:root {
  --bg:       #04090f;
  --panel:    #0b1828;
  --panel2:   #0f2035;
  --border:   #1a3050;
  --accent:   #00d4ff;
  --accent2:  #ff6b00;
  --accent3:  #4ade80;
  --accent5:  #fbbf24;
  --text:     #cce4ff;
  --text-dim: #6b8ba8;
}

/* ── Reset ────────────────────────────────────────────────────── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ── Base body ────────────────────────────────────────────────── */
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  line-height: 1.7;
  overflow-x: hidden;
}

/* ── Grid background ──────────────────────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(0,212,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,.025) 1px, transparent 1px);
  background-size: 36px 36px;
  will-change: transform;
}

/* ── Navigation ───────────────────────────────────────────────── */
nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(7,12,20,.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  will-change: transform;
}

.nav-brand {
  font-family: 'Orbitron', monospace;
  font-size: 11px;
  font-weight: 900;
  color: var(--accent2);
  letter-spacing: 2px;
  text-decoration: none;
}

.nav-links {
  display: flex;
  gap: 6px;
}

.nav-link {
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--text-dim);
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 5px;
  transition: color .15s;
}

/* ── Page wrapper ─────────────────────────────────────────────── */
.wrap {
  max-width: 880px;
  margin: 0 auto;
  padding: 40px 24px 120px;
  position: relative;
  z-index: 1;
}

/* ── Kicker label ─────────────────────────────────────────────── */
.kicker {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* ── h1 ───────────────────────────────────────────────────────── */
h1 {
  font-family: 'Orbitron', monospace;
  font-size: clamp(22px, 4vw, 32px);
  font-weight: 900;
  color: #fff;
  margin-bottom: 12px;
  line-height: 1.15;
}

.hero-sub {
  font-size: 15px;
  color: var(--text-dim);
  max-width: 640px;
  margin-bottom: 28px;
}

/* ── Section header (sh) ──────────────────────────────────────── */
.sh {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Orbitron', monospace;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 1px;
  margin: 32px 0 14px;
  text-transform: uppercase;
}

.sh-line {
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ── Prose ────────────────────────────────────────────────────── */
p {
  color: var(--text-dim);
  font-size: 14px;
  margin-bottom: 14px;
  line-height: 1.7;
}

p strong { color: var(--text); }

ul, ol {
  padding-left: 20px;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.9;
  margin-bottom: 16px;
}

li strong { color: var(--text); }

/* ── Inline code ──────────────────────────────────────────────── */
code {
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
  border-radius: 4px;
  padding: 2px 6px;
}

/* ── Code blocks ──────────────────────────────────────────────── */
pre {
  background: rgba(0,0,0,.5);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
  color: #a5c8e8;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 16px;
  line-height: 1.7;
}

/* ── Callout blocks ───────────────────────────────────────────── */
.callout {
  border-radius: 0 8px 8px 0;
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.6;
}

.callout.green  { background: rgba(74,222,128,.05);  border: 1px solid rgba(74,222,128,.2);  border-left: 3px solid #4ade80; }
.callout.green  strong { color: #4ade80; }
.callout.orange { background: rgba(255,107,0,.05);   border: 1px solid rgba(255,107,0,.2);   border-left: 3px solid #ff6b00; }
.callout.orange strong { color: #ff6b00; }
.callout.cyan   { background: rgba(0,212,255,.05);   border: 1px solid rgba(0,212,255,.2);   border-left: 3px solid #00d4ff; }
.callout.cyan   strong { color: #00d4ff; }
.callout.yellow { background: rgba(251,191,36,.05);  border: 1px solid rgba(251,191,36,.2);  border-left: 3px solid #fbbf24; }
.callout.yellow strong { color: #fbbf24; }
.callout.purple { background: rgba(167,139,250,.05); border: 1px solid rgba(167,139,250,.2); border-left: 3px solid #a78bfa; }
.callout.purple strong { color: #a78bfa; }
.callout.red    { background: rgba(248,113,113,.05); border: 1px solid rgba(248,113,113,.2); border-left: 3px solid #f87171; }
.callout.red    strong { color: #f87171; }

/* ── Related section ──────────────────────────────────────────── */
.related {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.related-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* ── Tables ───────────────────────────────────────────────────── */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: 20px;
}

th {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background: rgba(0,0,0,.3);
  padding: 9px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

td {
  padding: 9px 12px;
  border-bottom: 1px solid rgba(26,48,80,.4);
  color: var(--text-dim);
  vertical-align: top;
}

td strong { color: var(--text); }
tr:last-child td { border-bottom: none; }

/* ── Fixed backBar nav ────────────────────────────────────────── */
#backBar {
  will-change: transform;
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE — html[data-theme="light"]
   Higher specificity (0,2,0) beats inline :root (0,1,0)
   so light mode vars always win over page-level :root blocks.
   ═══════════════════════════════════════════════════════════════ */
html[data-theme="light"] {
  --bg:        #f0f4f8;
  --panel:     #ffffff;
  --panel2:    #e8eef5;
  --border:    #c8d8e8;
  --accent:    #006994;
  --accent2:   #c45000;
  --accent3:   #2d8a52;
  --accent4:   #b8427a;
  --accent5:   #b8860b;
  --accentR:   #c0392b;
  --accentS:   rgba(0,105,148,0.1);
  --accentB:   rgba(0,105,148,0.3);
  --text:      #0a1628;
  --text-dim:  #4a6a8a;
  --text-link: #1a5ca8;

  /* Alias vars — map to already-overridden accent vars */
  --cyan:    var(--accent);
  --gold:    var(--accent5);
  --orange:  var(--accent2);
  --green:   var(--accent3);
  --purple:  #6d28d9;
  --red:     #c0392b;
  --pink:    #be185d;
  --blue:    #1d4ed8;
  --role:    var(--accent);

  /* Dark panel aliases → light equivalents */
  --bg2:     #e8eef5;
  --bg3:     #f0f4f8;
  --bg4:     #f8f9fa;
  --border2: #c8d8e8;
  --border3: #dde6f0;
  --text2:   #4a6a8a;
  --text3:   #2d4a6a;
  --text4:   #0a1628;
  --surface: var(--panel);
  --muted:   var(--text-dim);
  --soft:    var(--text-dim);
}

/* Body & grid overlay */
html[data-theme="light"] body {
  background: var(--bg);
  color: var(--text);
}

html[data-theme="light"] body::before {
  background-image:
    linear-gradient(rgba(0,105,148,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,105,148,.04) 1px, transparent 1px);
}

/* Nav */
html[data-theme="light"] nav {
  background: rgba(240,244,248,0.97);
  border-bottom-color: var(--border);
}

/* Panels */
html[data-theme="light"] .callout.green  { background: rgba(45,138,82,.06);  }
html[data-theme="light"] .callout.orange { background: rgba(196,80,0,.06);   }
html[data-theme="light"] .callout.cyan   { background: rgba(0,105,148,.06);  }
html[data-theme="light"] .callout.yellow { background: rgba(184,134,11,.06); }
html[data-theme="light"] .callout.purple { background: rgba(100,60,160,.06); }
html[data-theme="light"] .callout.red    { background: rgba(192,57,43,.06);  }

/* Code blocks */
html[data-theme="light"] pre {
  background: rgba(0,0,0,.04);
  border-color: var(--border);
  color: #1a3a5a;
}

html[data-theme="light"] code {
  background: rgba(0,0,0,.06);
  color: #1a3a5a;
}

/* Tables */
html[data-theme="light"] th {
  background: rgba(0,0,0,.04);
  color: var(--accent);
}

html[data-theme="light"] td {
  border-bottom-color: var(--border);
}

/* h1 and headings */
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] .sh {
  color: var(--text);
}

/* Cards in library/index */
html[data-theme="light"] .card {
  background: #fff;
  border-color: var(--border);
}

html[data-theme="light"] .card:hover {
  background: rgba(0,105,148,.04);
}

html[data-theme="light"] .card-title { color: var(--text); }
html[data-theme="light"] .card-desc  { color: var(--text-dim); }

/* backBar */
html[data-theme="light"] #backBar {
  background: rgba(240,244,248,0.97);
  border-top-color: var(--border);
}

/* mobile nav bottom bar */
html[data-theme="light"] #spartan-bottom-bar {
  background: rgba(240,244,248,0.97) !important;
  border-top-color: var(--border) !important;
}

/* Common panel classes */
html[data-theme="light"] .panel,
html[data-theme="light"] [class*="panel"] {
  background: var(--panel);
  border-color: var(--border);
}

/* Transition everything smoothly */
html, body, nav, .card, pre, code, th, td, .callout,
#backBar, .sh, h1, h2, h3, p, a {
  transition: background-color .25s ease, color .2s ease, border-color .2s ease;
}

/* ─────────────────────────────────────────────────────────────
   LIGHT MODE — Inline style overrides
   These override common hardcoded rgba/hex patterns used in
   inline <style> blocks across pages.
   ─────────────────────────────────────────────────────────────  */

/* Panels with inline background styles */
html[data-theme="light"] [style*="background:var(--panel)"],
html[data-theme="light"] [style*="background: var(--panel)"] {
  background: var(--panel) !important;
}
html[data-theme="light"] [style*="background:var(--panel2)"],
html[data-theme="light"] [style*="background: var(--panel2)"] {
  background: var(--panel2) !important;
}

/* Dark overlay backgrounds → light equivalents */
html[data-theme="light"] [style*="background:rgba(0,0,0,.3)"],
html[data-theme="light"] [style*="background:rgba(0,0,0,0.3)"],
html[data-theme="light"] [style*="background:rgba(0,0,0,.25)"],
html[data-theme="light"] [style*="background:rgba(0,0,0,0.25)"] {
  background: rgba(0,0,0,.04) !important;
}
html[data-theme="light"] [style*="background:rgba(0,0,0,.5)"],
html[data-theme="light"] [style*="background:rgba(0,0,0,0.5)"] {
  background: rgba(0,0,0,.06) !important;
}
html[data-theme="light"] [style*="background:#000"] {
  background: rgba(0,0,0,.06) !important;
}

/* Dark panel gradients */
html[data-theme="light"] [style*="background:linear-gradient(135deg,#0a1828"],
html[data-theme="light"] [style*="background:linear-gradient(135deg,#07111e"],
html[data-theme="light"] [style*="background:linear-gradient(135deg,#06101a"],
html[data-theme="light"] [style*="background:linear-gradient(135deg,#060e1a"] {
  background: linear-gradient(135deg,#e8f0f8,#f0f4f8) !important;
}

/* White text that needs to darken */
html[data-theme="light"] [style*="color:#fff"] {
  color: var(--text) !important;
}
html[data-theme="light"] [style*="color: #fff"] {
  color: var(--text) !important;
}
html[data-theme="light"] [style*="color:#cce4ff"] {
  color: var(--text) !important;
}
html[data-theme="light"] [style*="color:#c8e0f4"] {
  color: var(--text) !important;
}

/* Nav backgrounds */
html[data-theme="light"] [style*="background:rgba(4,9,15"],
html[data-theme="light"] [style*="background:rgba(5,8,14"] {
  background: rgba(240,244,248,.97) !important;
}
html[data-theme="light"] [style*="background:rgba(7,12,20"] {
  background: rgba(240,244,248,.97) !important;
}
html[data-theme="light"] [style*="background:rgba(2,5,10"] {
  background: rgba(230,238,248,.95) !important;
}

/* Border colors */
html[data-theme="light"] [style*="border-color:#1a3050"],
html[data-theme="light"] [style*="border: 1px solid #1a3050"],
html[data-theme="light"] [style*="border:1px solid #1a3050"] {
  border-color: var(--border) !important;
}

/* Dark panel backgrounds used in stat cards, section panels */
html[data-theme="light"] [style*="background:#0b1828"],
html[data-theme="light"] [style*="background: #0b1828"] {
  background: var(--panel) !important;
}
html[data-theme="light"] [style*="background:#0f2035"],
html[data-theme="light"] [style*="background: #0f2035"] {
  background: var(--panel2) !important;
}
html[data-theme="light"] [style*="background:#04090f"],
html[data-theme="light"] [style*="background: #04090f"] {
  background: var(--bg) !important;
}
html[data-theme="light"] [style*="background:#04090f"],
html[data-theme="light"] [style*="background:#07111e"],
html[data-theme="light"] [style*="background:#0a1828"],
html[data-theme="light"] [style*="background:#0c1f34"],
html[data-theme="light"] [style*="background:#0d1f30"],
html[data-theme="light"] [style*="background:#0d2035"] {
  background: var(--panel) !important;
}

/* dim text adjustments */
html[data-theme="light"] [style*="color:#6b8ba8"] {
  color: var(--text-dim) !important;
}
html[data-theme="light"] [style*="color:#4a6a8a"] {
  color: var(--text-dim) !important;
}
html[data-theme="light"] [style*="color:#2a4860"],
html[data-theme="light"] [style*="color:#1e3a55"] {
  color: var(--text-dim) !important;
}

/* Font family Share Tech Mono dim text */
html[data-theme="light"] [style*="color:var(--text-dim)"] {
  color: var(--text-dim) !important;
}
html[data-theme="light"] [style*="color:var(--text)"] {
  color: var(--text) !important;
}

/* Guide cards */
html[data-theme="light"] .card {
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

/* Filter tabs (library/index) */
html[data-theme="light"] .ftab,
html[data-theme="light"] .filter-tab {
  background: rgba(0,0,0,.04);
  color: var(--text-dim);
}
html[data-theme="light"] .ftab.active,
html[data-theme="light"] .filter-tab.active {
  background: rgba(0,105,148,.1);
  color: var(--accent);
}

/* Search input */
html[data-theme="light"] #search,
html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="search"] {
  background: rgba(0,0,0,.04);
  color: var(--text);
  border-color: var(--border);
}

/* Stem boxes */
html[data-theme="light"] .stem-box {
  background: linear-gradient(135deg,rgba(0,105,148,.04),rgba(100,60,160,.04));
}

/* Section headers (sh) */
html[data-theme="light"] .sh-line {
  background: var(--border);
}

/* guideHub overlay */
html[data-theme="light"] #guideHub {
  background: rgba(240,244,248,.95) !important;
}
html[data-theme="light"] .hub-card {
  background: rgba(255,255,255,.9);
  border-color: var(--border);
  color: var(--text);
}
html[data-theme="light"] .hub-card:hover {
  border-color: rgba(0,105,148,.4);
  background: rgba(0,105,148,.05);
}

/* ═══════════════════════════════════════════════════════════════
   PROGRESS BAR — Step indicator for tabbed multi-section guides
   Used on 67 pages. Per-page accent color overrides the
   .prog-step.active rule inline for guide-specific theming.
   ═══════════════════════════════════════════════════════════════ */
.progress-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
  max-width: 640px;
  margin: 0 auto 40px;
  position: relative;
  z-index: 1;
}

.prog-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.prog-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Orbitron', monospace;
  font-size: 10px;
  font-weight: 700;
  border: 2px solid var(--border);
  background: var(--panel);
  color: var(--text-dim);
  transition: all 0.3s;
}

/* Done state — green ✓ */
.prog-step.done .prog-dot {
  border-color: var(--accent3);
  background: rgba(74,222,128,0.1);
  color: var(--accent3);
}

/* Active state — default accent (overridden per-page) */
.prog-step.active .prog-dot {
  border-color: var(--accent);
  background: rgba(0,212,255,0.1);
  color: var(--accent);
  box-shadow: 0 0 14px rgba(0,212,255,0.3);
}

.prog-label {
  font-size: 9px;
  color: var(--text-link);
  font-family: 'Share Tech Mono', monospace;
  text-align: center;
  width: 64px;
  line-height: 1.3;
}

.prog-step.active .prog-label { color: var(--accent); }
.prog-step.done  .prog-label  { color: var(--accent3); }

/* Connector lines */
.prog-line {
  width: 24px;
  height: 2px;
  background: var(--border);
  margin-bottom: 20px;
  flex-shrink: 0;
  transition: background 0.3s;
}

.prog-line.done { background: var(--accent3); }

/* Responsive — hide on mobile, page-nav buttons handle navigation */
@media (max-width: 600px) {
  .progress-bar { display: none; }
}

/* Light mode */
html[data-theme="light"] .prog-dot {
  background: var(--panel);
  border-color: var(--border);
}
html[data-theme="light"] .prog-step.done .prog-dot {
  background: rgba(45,138,82,0.1);
}
html[data-theme="light"] .prog-step.active .prog-dot {
  background: rgba(0,105,148,0.1);
  box-shadow: 0 0 14px rgba(0,105,148,0.25);
}

/* Light mode overrides for progress bar */
html[data-theme="light"] .prog-dot {
  background: var(--panel);
  border-color: var(--border);
  color: var(--text-dim);
}
html[data-theme="light"] .prog-step.done .prog-dot {
  background: rgba(45,138,82,0.1);
  border-color: var(--accent3);
  color: var(--accent3);
}
html[data-theme="light"] .prog-step.active .prog-dot {
  background: rgba(0,105,148,0.1);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 12px rgba(0,105,148,0.2);
}
html[data-theme="light"] .prog-label { color: var(--text-dim); }
html[data-theme="light"] .prog-step.active .prog-label { color: var(--accent); }
html[data-theme="light"] .prog-step.done .prog-label  { color: var(--accent3); }
html[data-theme="light"] .prog-line { background: var(--border); }
html[data-theme="light"] .prog-line.done { background: var(--accent3); }

/* Additional inline background overrides */
html[data-theme="light"] [style*="background:#080f1e"] { background: var(--panel) !important; }
html[data-theme="light"] [style*="background: #080f1e"] { background: var(--panel) !important; }
html[data-theme="light"] [style*="background:#040a12"] { background: var(--panel) !important; }
html[data-theme="light"] [style*="background:#1e1e2e"] { background: var(--panel2) !important; }
html[data-theme="light"] [style*="background:#111"] { background: var(--panel) !important; }
html[data-theme="light"] [style*="background:#101010"] { background: var(--panel) !important; }
html[data-theme="light"] [style*="background:#0a0a0a"] { background: var(--panel) !important; }

/* White text — also catch #ffffff not just #fff */
html[data-theme="light"] [style*="color:#ffffff"] { color: var(--text) !important; }
html[data-theme="light"] [style*="color: #ffffff"] { color: var(--text) !important; }
html[data-theme="light"] [style*="color: #fff"] { color: var(--text) !important; }

/* Dark border variants not yet covered */
html[data-theme="light"] [style*="border-color:#080f1e"] { border-color: var(--border) !important; }
html[data-theme="light"] [style*="border-left:3px solid #1a3050"] { border-left-color: var(--border) !important; }
html[data-theme="light"] [style*="border:1px solid #080f1e"] { border-color: var(--border) !important; }

/* Code/pre-like inline dark backgrounds */
html[data-theme="light"] [style*="background:#001810"] { background: rgba(45,138,82,0.06) !important; }
html[data-theme="light"] [style*="background:#180000"] { background: rgba(192,57,43,0.06) !important; }
html[data-theme="light"] [style*="background:#180d00"] { background: rgba(196,80,0,0.06) !important; }
html[data-theme="light"] [style*="background:#00101a"] { background: rgba(0,105,148,0.06) !important; }
html[data-theme="light"] [style*="background:#0d0018"] { background: rgba(109,40,217,0.06) !important; }


/* ── Utility classes (extracted from inline styles) ─────────────── */
.u-text-dim-sm{font-size:13px;color:var(--text-dim)}
.u-text-dim-xs{font-size:12px;color:var(--text-dim)}
.u-flex-wrap-gap{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.u-flex-gap8{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.u-flex-gap10{display:flex;gap:10px;align-items:center}
.u-hub-max{max-width:1000px;margin:0 auto}

}

/* ── Shared component styles (extracted from per-page inline blocks) ── */
.stem-body{font-size:13px;color:var(--text-dim);line-height:1.75;}
.hub-card.hidden{display:none;}
.hpill{background:rgba(255,255,255,0.04);border:1px solid #1a3050;color:#6b8ba8;font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:1px;padding:5px 12px;border-radius:16px;cursor:pointer;text-transform:uppercase;transition:all 0.15s;}
.hpill.active{background:rgba(0,212,255,0.1);border-color:#00d4ff;color:#00d4ff;}
.hub-card{display:flex;align-items:center;gap:10px;background:rgba(13,26,40,0.8);border:1px solid #1a3050;border-radius:8px;padding:12px;text-decoration:none;color:#c8e0f4;transition:all 0.15s;font-size:12.5px;font-weight:600;}
.hub-card .hc-icon{font-size:20px;flex-shrink:0;}
.quiz-box{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:18px;margin:16px 0;}
.quiz-options{display:flex;flex-direction:column;gap:8px;}
.quiz-feedback.show{display:block;}
.stem-box{background:linear-gradient(135deg,rgba(244,114,182,0.05),rgba(167,139,250,0.05));border:1px solid rgba(244,114,182,0.25);border-radius:12px;padding:18px 20px;margin:24px 0 8px;}
.stem-header{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.stem-badge{background:rgba(244,114,182,0.15);border:1px solid rgba(244,114,182,0.35);border-radius:20px;font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:2px;color:#f472b6;padding:3px 10px;text-transform:uppercase;white-space:nowrap;}
.stem-title{font-family:'Orbitron',monospace;font-size:13px;font-weight:900;color:#fff;}
.stem-interview{margin-top:12px;padding:10px 14px;background:rgba(0,0,0,0.25);border-left:3px solid rgba(244,114,182,0.4);border-radius:0 6px 6px 0;font-size:12px;color:var(--text-dim);line-height:1.7;}
.quiz-q{font-weight:700;color:#fff;margin-bottom:12px;font-size:14px;}
.quiz-opt{background:var(--panel2);border:1px solid var(--border);border-radius:7px;padding:10px 14px;cursor:pointer;font-size:13px;color:var(--text-dim);transition:all 0.15s;}
.quiz-feedback{border-radius:7px;padding:10px 14px;margin-top:8px;font-size:13px;display:none;}
.quiz-opt.correct{border-color:var(--accent3)!important;background:rgba(74,222,128,0.1)!important;color:var(--accent3)!important;}
.quiz-opt.wrong{border-color:var(--accentR)!important;background:var(--accentR-dim)!important;color:#fca5a5!important;}
.quiz-feedback.good{background:rgba(74,222,128,0.08);color:var(--accent3);border:1px solid rgba(74,222,128,0.2);}
.quiz-feedback.bad{background:var(--accentR-dim);color:#fca5a5;border:1px solid var(--accentR-border);}

/* ── Component styles shared across 20+ pages ── */
.cl-box strong{color:#00d4ff;display:block;font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:2px;text-transform:uppercase;margin-bottom:6px;}
.cl-box a{color:#00d4ff;text-decoration:none;}
.cl-paths{display:flex;flex-direction:column;gap:5px;margin-top:6px;}
.cl-path{display:flex;align-items:center;gap:8px;font-size:12.5px;}
.cl-path-role{font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;padding:2px 8px;border-radius:10px;white-space:nowrap;}
.cl-shadow{background:rgba(74,222,128,0.1);color:#4ade80;border:1px solid rgba(74,222,128,0.3);}
.cl-new{background:rgba(74,222,128,0.1);color:#4ade80;border:1px solid rgba(74,222,128,0.3);}
.cl-return{background:rgba(0,212,255,0.1);color:#00d4ff;border:1px solid rgba(0,212,255,0.3);}
.cl-prereq{background:rgba(251,191,36,0.06);border:1px solid rgba(251,191,36,0.2);border-left:3px solid #fbbf24;border-radius:0 6px 6px 0;padding:8px 14px;margin:0 0 18px;font-size:12.5px;color:var(--text-dim);}
.cl-prereq strong{color:#fbbf24;font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;margin-right:6px;}
.cl-next strong{color:#4ade80;font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:2px;text-transform:uppercase;display:block;margin-bottom:8px;}
.cl-next-links{display:flex;flex-wrap:wrap;gap:7px;}
.cl-next-links a{display:inline-flex;align-items:center;gap:5px;background:rgba(74,222,128,0.08);border:1px solid rgba(74,222,128,0.25);border-radius:6px;padding:5px 12px;font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:1px;color:#4ade80;text-decoration:none;transition:background 0.15s;}
.cl-step-1{background:rgba(74,222,128,0.12);color:#4ade80;border:1px solid rgba(74,222,128,0.3);}
.cl-step-2{background:rgba(251,191,36,0.12);color:#fbbf24;border:1px solid rgba(251,191,36,0.3);}
.cl-step-3{background:rgba(248,113,113,0.12);color:#f87171;border:1px solid rgba(248,113,113,0.3);}
.cl-step-comp{background:rgba(167,139,250,0.12);color:#a78bfa;border:1px solid rgba(167,139,250,0.3);}
.cl-when{background:rgba(167,139,250,0.06);border:1px solid rgba(167,139,250,0.2);border-left:3px solid #a78bfa;border-radius:0 6px 6px 0;padding:7px 13px;margin:0 0 16px;font-size:12.5px;color:var(--text-dim);}
.cl-when strong{color:#a78bfa;font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;margin-right:6px;}
.cl-box{background:rgba(0,212,255,0.05);border:1px solid rgba(0,212,255,0.2);border-left:3px solid #00d4ff;border-radius:0 8px 8px 0;padding:12px 16px;margin:0 0 20px;font-size:13px;color:var(--text-dim);line-height:1.6;}
.cl-next{background:rgba(74,222,128,0.05);border:1px solid rgba(74,222,128,0.2);border-radius:8px;padding:12px 16px;margin:20px 0;font-size:13px;}
.cl-step{display:inline-flex;align-items:center;gap:6px;font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;padding:2px 9px;border-radius:10px;margin-bottom:3px;}
.related-links{display:flex;flex-wrap:wrap;gap:8px;}
.callout{border-radius:0 8px 8px 0;padding:14px 18px;margin-bottom:20px;font-size:14px;color:var(--text-dim);}
.related-label{font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:2px;color:var(--text-dim);text-transform:uppercase;margin-bottom:12px;}
/* v25 build: Wed Apr 15 10:52:49 UTC 2026 */
/* v26 */
/* v27 */
/* v28 */
/* v28b */
/* v29 */
/* v30 */
/* v31 */
/* v32 */
/* v33 */
/* v34 */
/* v35 */
/* v36 */
/* v37 */
/* v38 */
/* v39 */
/* v40 */
/* v41 */
/* v42 */
/* v43 */
/* v44 */
/* v45 */
/* v46 */
/* v47 */
/* v48 */
/* v49 */
/* v50 */
/* v51 */
/* v52 */
/* v53 */
/* v54-force */
/* v55 built 20260416-101408 */
/* build-1776437331 */

/* ── TAB BAR — works on all screen sizes ───────────────────── */
nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 16px;
}
.nav-tabs {
  display: flex;
  gap: 5px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  min-width: 0;
}
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tab {
  flex-shrink: 0;
  white-space: nowrap;
  background: rgba(107,139,168,0.08);
  border: 1px solid rgba(107,139,168,0.18);
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #9cb1c7;
  padding: 6px 13px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s;
}
.nav-tab:hover {
  background: rgba(255,107,0,0.12);
  border-color: rgba(255,107,0,0.35);
  color: var(--accent2);
}
.nav-tab.active {
  background: rgba(255,107,0,0.18);
  border-color: rgba(255,107,0,0.5);
  color: var(--accent2);
  font-weight: 700;
}
@media (max-width: 700px) {
  .nav-brand { font-size: 10px; }
  .nav-tab { font-size: 10px; padding: 5px 10px; }
}
/* v93-force-1776443401 */