/* ============================================================
   PREDATOR HUD / QUANTANON — base.css
   Design tokens + reset + typography + layout
   Visual baseline: img_111, img_112 (Quantanon cyberpunk)
   ============================================================ */

:root {
  /* ───────── Quantanon palette ───────── */
  --q-bg:           #07090d;
  --q-bg-grad-1:    #0a0e14;
  --q-bg-grad-2:    #050709;
  --q-panel:        #0d1117;
  --q-panel-2:      #12181f;
  --q-panel-3:      #1a2230;
  --q-section-bg:   rgba(13, 17, 23, 0.6);
  --q-overlay:      rgba(7, 9, 13, 0.92);

  --q-border:       #1f2a3a;
  --q-border-glow:  rgba(0, 229, 255, 0.4);

  /* Neon accents — section colour codes */
  --q-cyan:         #00e5ff;
  --q-cyan-soft:    rgba(0, 229, 255, 0.12);
  --q-cyan-glow:    0 0 16px rgba(0, 229, 255, 0.5);
  --q-bull:         #00ffbb;
  --q-bull-soft:    rgba(0, 255, 187, 0.12);
  --q-bear:         #ff1744;
  --q-bear-soft:    rgba(255, 23, 68, 0.12);
  --q-orange:       #ff8c00;
  --q-orange-soft:  rgba(255, 140, 0, 0.12);
  --q-amber:        #ffc107;
  --q-amber-soft:   rgba(255, 193, 7, 0.12);
  --q-purple:       #bb86fc;
  --q-purple-soft:  rgba(187, 134, 252, 0.12);
  --q-pink:         #ff4081;

  /* Predator-red accent (Journey + Onboarding) — hybrid theme S37 */
  --q-pred:         #ff2d3e;
  --q-pred-soft:    rgba(255, 45, 62, 0.12);
  --q-pred-glow:    0 0 16px rgba(255, 45, 62, 0.55);
  --q-pred-deep:    rgba(255, 45, 62, 0.25);

  /* Text */
  --q-text:         #e6edf3;
  --q-text-2:       #94a3b8;
  --q-text-3:       #64748b;
  --q-text-muted:   #475569;

  /* Typography */
  --font-display:   "Orbitron", "Rajdhani", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-sans:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:      "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  --fs-xs:    10px;
  --fs-sm:    11px;
  --fs-base:  12px;
  --fs-md:    13px;
  --fs-lg:    15px;
  --fs-xl:    18px;
  --fs-2xl:   24px;
  --fs-3xl:   32px;
  --fs-display: 42px;

  --lh-tight: 1.1;
  --lh-base:  1.4;
  --lh-relax: 1.7;

  --ls-caps:  0.18em;   /* spaced caps */
  --ls-wide:  0.08em;
  --ls-tight: -0.01em;

  /* Spacing */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;
  --sp-10: 56px; --sp-12: 72px;

  /* Layout */
  --sidebar-w: 240px;
  --topbar-h:  56px;
  --radius:    6px;
  --radius-lg: 10px;
  --radius-xl: 14px;

  /* Transitions */
  --ease:    cubic-bezier(.2,.8,.2,1);
  --t-fast:  120ms var(--ease);
  --t-base:  220ms var(--ease);
}

/* ───────── Reset ───────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--q-text);
  background:
    radial-gradient(1400px 700px at 50% -100px, rgba(0,229,255,0.06), transparent 60%),
    radial-gradient(900px 500px at 100% 100%, rgba(187,134,252,0.05), transparent 50%),
    linear-gradient(180deg, var(--q-bg-grad-1) 0%, var(--q-bg-grad-2) 100%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: 100vh;
}

img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; padding: 0; font-family: inherit; }
a { color: var(--q-cyan); text-decoration: none; }

/* ───────── Typography utilities ───────── */
.q-caps      { text-transform: uppercase; letter-spacing: var(--ls-caps); font-weight: 600; }
.q-caps-wide { text-transform: uppercase; letter-spacing: var(--ls-wide); }
.q-mono      { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.q-display   { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.04em; }

/* ───────── Sidebar ───────── */
.sidebar {
  background: var(--q-panel);
  border-right: 1px solid var(--q-border);
  display: flex; flex-direction: column;
  overflow: hidden;
  position: relative;
}
.sidebar::before {
  content: ''; position: absolute; inset: 0 -1px 0 auto; width: 1px;
  background: linear-gradient(180deg, transparent 0%, var(--q-cyan) 50%, transparent 100%);
  opacity: 0.3; pointer-events: none;
}
.sidebar__brand {
  padding: var(--sp-5) var(--sp-4);
  display: flex; flex-direction: column; gap: 4px;
  border-bottom: 1px solid var(--q-border);
}
.brand__row {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); color: var(--q-text-3);
  text-transform: uppercase; letter-spacing: var(--ls-caps);
}
.brand__row::before, .brand__row::after {
  content: '◇'; color: var(--q-cyan); font-size: 8px;
}
.brand__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--q-cyan);
  text-shadow: 0 0 12px rgba(0, 229, 255, 0.5);
  letter-spacing: 0.06em;
  line-height: 1;
  margin-top: 2px;
}
.brand__tag {
  font-size: 9px;
  color: var(--q-text-3);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.sidebar__nav { flex: 1; padding: var(--sp-3); display: flex; flex-direction: column; gap: 1px; overflow-y: auto; }
.nav__item {
  width: 100%; text-align: left;
  padding: 9px 12px;
  display: flex; align-items: center; gap: var(--sp-3);
  border-radius: var(--radius);
  color: var(--q-text-2);
  font-size: var(--fs-md);
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  transition: all var(--t-fast);
  position: relative;
}
.nav__item:hover { background: var(--q-panel-2); color: var(--q-text); }
.nav__item.is-active {
  background: var(--q-cyan-soft);
  color: var(--q-cyan);
  font-weight: 600;
  border-color: var(--q-border-glow);
}
.nav__item.is-active::before {
  content: ''; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 2px;
  background: var(--q-cyan);
  box-shadow: var(--q-cyan-glow);
}
.nav__icon { width: 20px; display: inline-grid; place-items: center; font-size: 13px; }

.sidebar__footer { padding: var(--sp-4); border-top: 1px solid var(--q-border); }

/* ───────── Main + topbar ───────── */
.main { display: grid; grid-template-rows: var(--topbar-h) 1fr; min-width: 0; min-height: 0; }
.topbar {
  border-bottom: 1px solid var(--q-border);
  background: var(--q-panel);
  padding: 0 var(--sp-5);
  display: flex; align-items: center; justify-content: space-between;
  position: relative;
}
.topbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--q-cyan) 50%, transparent 100%);
  opacity: 0.4;
}
.topbar__title { display: flex; align-items: center; gap: var(--sp-3); }
.topbar__title h1 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  margin: 0; letter-spacing: 0.06em;
  color: var(--q-cyan);
}
.topbar__title #routeIcon { font-size: var(--fs-xl); }
.topbar__actions { display: flex; gap: var(--sp-2); align-items: center; }

/* ───────── Route container ───────── */
.route {
  overflow-y: auto;
  padding: var(--sp-6) var(--sp-7);
  background: transparent;
}
.route.is-hidden { display: none; }

/* ───────── Route header block (Quantanon style) ───────── */
.q-page-header {
  text-align: center;
  padding: var(--sp-7) 0 var(--sp-8);
  border-bottom: 1px solid var(--q-border);
  margin-bottom: var(--sp-7);
  position: relative;
}
.q-page-header__brandrow {
  font-size: var(--fs-sm);
  color: var(--q-text-3);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  margin-bottom: var(--sp-3);
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
}
.q-page-header__brandrow::before, .q-page-header__brandrow::after {
  content: '○'; color: var(--q-cyan); font-size: 12px; opacity: 0.7;
}
.q-page-header__title {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 700;
  color: var(--q-cyan);
  text-shadow:
    0 0 20px rgba(0, 229, 255, 0.5),
    0 0 40px rgba(0, 229, 255, 0.25);
  letter-spacing: 0.08em;
  line-height: 1;
  margin: 0 0 var(--sp-3);
}
.q-page-header__subtitle {
  font-size: var(--fs-md);
  color: var(--q-cyan);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
}
.q-page-header__subtitle::before, .q-page-header__subtitle::after {
  content: '◇'; color: var(--q-cyan); font-size: 10px;
}
.q-page-header__tag {
  font-size: var(--fs-xs);
  color: var(--q-text-3);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  margin-top: var(--sp-3);
}

/* ───────── Scrollbar ───────── */
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: var(--q-panel); }
*::-webkit-scrollbar-thumb { background: var(--q-border); border-radius: 3px; }
*::-webkit-scrollbar-thumb:hover { background: var(--q-cyan); }

/* ───────── Animation helpers ───────── */
@keyframes q-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes q-pulse-glow {
  0%, 100% { box-shadow: 0 0 8px var(--q-cyan-soft); }
  50% { box-shadow: 0 0 18px var(--q-border-glow); }
}
.q-pulse { animation: q-pulse-glow 2s ease-in-out infinite; }

@media (max-width: 900px) {
  body { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .q-page-header__title { font-size: var(--fs-2xl); }
}