/* ============================================================
   SEO SPALAH — Cyberpunk Command Center
   Tokens, base, primitives
   ============================================================ */

:root {
  /* ─── Base palette (dark) ─── */
  --bg-0: oklch(0.11 0.012 280);   /* deepest */
  --bg-1: oklch(0.14 0.014 280);   /* surface */
  --bg-2: oklch(0.17 0.016 280);   /* raised */
  --bg-3: oklch(0.21 0.018 280);   /* hover/border-strong */
  --line: oklch(0.26 0.018 280 / 0.55);
  --line-2: oklch(0.32 0.02 280 / 0.7);

  --fg-0: oklch(0.97 0.01 280);
  --fg-1: oklch(0.84 0.02 280);
  --fg-2: oklch(0.64 0.02 280);
  --fg-3: oklch(0.46 0.02 280);

  /* ─── Brand + accents ─── */
  --brand:    oklch(0.66 0.22 285);   /* spalah purple */
  --brand-2:  oklch(0.74 0.18 290);
  --brand-d:  oklch(0.5 0.22 285);
  --brand-glow: oklch(0.66 0.22 285 / 0.4);

  --pos:      oklch(0.82 0.18 178);   /* cyan/teal positive */
  --pos-d:    oklch(0.58 0.16 178);
  --pos-glow: oklch(0.82 0.18 178 / 0.5);

  --neg:      oklch(0.7 0.24 12);     /* hot pink/red negative */
  --neg-d:    oklch(0.52 0.22 12);
  --neg-glow: oklch(0.7 0.24 12 / 0.5);

  --warn:     oklch(0.84 0.16 85);    /* amber */
  --warn-glow: oklch(0.84 0.16 85 / 0.4);

  --info:     oklch(0.78 0.14 240);
  --info-glow: oklch(0.78 0.14 240 / 0.4);

  /* ─── Type ─── */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "SF Pro Text", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "JetBrains Mono", monospace;
  --font-display: "Geist", "Geist Sans", ui-sans-serif, sans-serif;

  /* ─── Radius / spacing ─── */
  --r-xs: 4px;
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 14px;
  --r-xl: 20px;

  /* ─── Density ─── */
  --row-h: 38px;
  --pad: 16px;
  --gap: 12px;

  /* ─── Misc ─── */
  --grid: oklch(0.22 0.02 280 / 0.6);
}

[data-theme="light"] {
  --bg-0: oklch(0.985 0.005 280);
  --bg-1: oklch(0.97 0.006 280);
  --bg-2: oklch(0.945 0.008 280);
  --bg-3: oklch(0.91 0.01 280);
  --line: oklch(0.86 0.012 280 / 0.9);
  --line-2: oklch(0.78 0.015 280 / 0.9);

  --fg-0: oklch(0.18 0.02 280);
  --fg-1: oklch(0.32 0.02 280);
  --fg-2: oklch(0.48 0.02 280);
  --fg-3: oklch(0.62 0.02 280);

  --brand:   oklch(0.55 0.22 285);
  --brand-2: oklch(0.62 0.2 285);
  --brand-glow: oklch(0.55 0.22 285 / 0.18);
  --pos:     oklch(0.55 0.16 178);
  --pos-glow: oklch(0.55 0.16 178 / 0.2);
  --neg:     oklch(0.55 0.22 12);
  --neg-glow: oklch(0.55 0.22 12 / 0.18);
  --warn:    oklch(0.62 0.16 85);
  --info:    oklch(0.55 0.16 240);
  --grid: oklch(0.86 0.014 280 / 0.7);
}

/* ─── Density modifiers ─── */
[data-density="compact"] {
  --row-h: 30px;
  --pad: 12px;
  --gap: 8px;
}
[data-density="cozy"] {
  --row-h: 46px;
  --pad: 22px;
  --gap: 18px;
}

/* ============================================================
   Base
   ============================================================ */

* { box-sizing: border-box; }
html, body, #app { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-feature-settings: "ss01","ss02","cv11","tnum";
  background: var(--bg-0);
  color: var(--fg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

button { font-family: inherit; }

::selection { background: var(--brand-glow); color: var(--fg-0); }

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: oklch(from var(--bg-3) l c h / 0.7); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: oklch(from var(--bg-3) calc(l + 0.05) c h); background-clip: content-box; border: 2px solid transparent; }

/* ============================================================
   Ambient background (cyberpunk grid + glow)
   ============================================================ */

.ambient {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.ambient::before {
  content: "";
  position: absolute; inset: -10%;
  background:
    radial-gradient(ellipse 60% 40% at 15% 10%, oklch(from var(--brand) l c h / 0.18), transparent 60%),
    radial-gradient(ellipse 50% 45% at 90% 100%, oklch(from var(--pos) l c h / 0.12), transparent 60%),
    radial-gradient(ellipse 40% 30% at 50% 110%, oklch(from var(--neg) l c h / 0.08), transparent 60%);
  filter: blur(20px);
}
.ambient::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, black 30%, transparent 80%);
  opacity: 0.45;
}

[data-theme="light"] .ambient::before {
  background:
    radial-gradient(ellipse 60% 40% at 15% 10%, oklch(from var(--brand) l c h / 0.08), transparent 60%),
    radial-gradient(ellipse 50% 45% at 90% 100%, oklch(from var(--pos) l c h / 0.06), transparent 60%);
}
[data-theme="light"] .ambient::after { opacity: 0.6; }

/* ============================================================
   Primitives
   ============================================================ */

.card {
  position: relative;
  background:
    linear-gradient(180deg, oklch(from var(--bg-2) l c h / 0.95), oklch(from var(--bg-1) l c h / 0.85));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, oklch(from var(--brand) l c h / 0.4), transparent);
  opacity: 0.6;
  pointer-events: none;
}

.card-flat {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--fg-1);
  font: 500 12.5px/1 var(--font-sans);
  letter-spacing: 0.01em;
  cursor: default;
  transition: background .15s, border-color .15s, transform .05s;
  white-space: nowrap;
}
.btn:hover { background: var(--bg-3); border-color: var(--line-2); color: var(--fg-0); }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: linear-gradient(180deg, var(--brand-2), var(--brand));
  border-color: oklch(from var(--brand) l c h / 0.6);
  color: white;
  box-shadow: 0 0 0 1px oklch(from var(--brand) l c h / 0.3) inset, 0 6px 20px oklch(from var(--brand) l c h / 0.3);
}
.btn-primary:hover { filter: brightness(1.08); border-color: var(--brand); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: oklch(from var(--bg-3) l c h / 0.5); }

.btn-sm { height: 26px; padding: 0 10px; font-size: 11.5px; }
.btn-xs { height: 22px; padding: 0 8px; font-size: 11px; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 8px;
  border-radius: 99px;
  background: oklch(from var(--bg-3) l c h / 0.6);
  border: 1px solid var(--line);
  color: var(--fg-1);
  font: 500 10.5px/1 var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.chip-pos { background: oklch(from var(--pos) l c h / 0.12); border-color: oklch(from var(--pos) l c h / 0.4); color: var(--pos); }
.chip-neg { background: oklch(from var(--neg) l c h / 0.12); border-color: oklch(from var(--neg) l c h / 0.4); color: var(--neg); }
.chip-warn { background: oklch(from var(--warn) l c h / 0.12); border-color: oklch(from var(--warn) l c h / 0.4); color: var(--warn); }
.chip-brand { background: oklch(from var(--brand) l c h / 0.15); border-color: oklch(from var(--brand) l c h / 0.45); color: var(--brand-2); }

.tag {
  display: inline-flex; align-items: center;
  height: 18px; padding: 0 6px;
  border-radius: 4px;
  background: oklch(from var(--bg-3) l c h / 0.5);
  border: 1px solid var(--line);
  font: 500 10px/1 var(--font-mono);
  color: var(--fg-2);
  letter-spacing: 0.04em;
}

input.field, select.field, textarea.field {
  appearance: none;
  width: 100%;
  height: 36px;
  padding: 0 12px;
  background: oklch(from var(--bg-1) l c h / 0.8);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--fg-0);
  font: 500 13px/1 var(--font-sans);
  outline: none;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
input.field:focus, select.field:focus, textarea.field:focus {
  border-color: oklch(from var(--brand) l c h / 0.6);
  background: var(--bg-2);
  box-shadow: 0 0 0 3px oklch(from var(--brand) l c h / 0.15);
}
input.field::placeholder { color: var(--fg-3); }

/* ============================================================
   Numerics
   ============================================================ */

.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.num-lg { font-size: 32px; font-weight: 500; letter-spacing: -0.03em; color: var(--fg-0); }
.num-xl { font-size: 56px; font-weight: 500; letter-spacing: -0.04em; color: var(--fg-0); line-height: 1; }
.num-2xl { font-size: 88px; font-weight: 500; letter-spacing: -0.05em; color: var(--fg-0); line-height: 0.95; }
.num-pos { color: var(--pos); }
.num-neg { color: var(--neg); }

/* Code block — always dark, theme-independent. Use for JSON/API/code snippets.
   Children get explicit colors (--code-fg etc) that don't flip in light theme. */
.code-block {
  background: oklch(0.10 0.015 280);
  border: 1px solid oklch(0.22 0.015 280);
  border-radius: 10px;
  padding: 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  color: oklch(0.88 0.01 280);
}
.code-block .ck-fg { color: oklch(0.88 0.01 280); }
.code-block .ck-mute { color: oklch(0.62 0.01 280); }
.code-block .ck-key { color: oklch(0.78 0.18 285); }
.code-block .ck-str { color: oklch(0.78 0.16 145); }
.code-block .ck-num { color: oklch(0.84 0.16 85); }
.code-block .ck-acc { color: oklch(0.78 0.18 195); }

.label-up {
  font: 500 10.5px/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* ============================================================
   Glow effects
   ============================================================ */

.glow-brand { box-shadow: 0 0 30px var(--brand-glow); }
.glow-pos { box-shadow: 0 0 24px var(--pos-glow); }
.glow-neg { box-shadow: 0 0 24px var(--neg-glow); }

/* ============================================================
   Animations
   ============================================================ */

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}
.pulse-dot { animation: pulse-dot 1.6s ease-in-out infinite; }

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fade-up .5s ease-out both; }

@keyframes scan {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes count-up {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ============================================================
   Layout
   ============================================================ */

.app-shell {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 52px 1fr;
  height: 100vh;
}

.topbar {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 14px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  background: oklch(from var(--bg-1) l c h / 0.7);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  z-index: 10;
}

.sidebar {
  width: 240px;
  border-right: 1px solid var(--line);
  background: oklch(from var(--bg-1) l c h / 0.5);
  overflow-y: auto;
  padding: 14px 10px;
  transition: width .25s ease;
}
.sidebar.collapsed { width: 56px; }

.workspace {
  overflow-y: auto;
  position: relative;
}

/* ============================================================
   Sparkline
   ============================================================ */
.sparkline { display: block; width: 100%; height: 28px; }

/* ============================================================
   Misc utilities
   ============================================================ */

.divider { height: 1px; background: var(--line); }
.row { display: flex; align-items: center; gap: var(--gap); }
.col { display: flex; flex-direction: column; gap: var(--gap); }
.between { justify-content: space-between; }
.muted { color: var(--fg-2); }
.dim { color: var(--fg-3); }
.text-pos { color: var(--pos); }
.text-neg { color: var(--neg); }
.text-warn { color: var(--warn); }
.text-brand { color: var(--brand-2); }

.grid-bg {
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* hide scrollbar but allow scroll */
.scroll-clean::-webkit-scrollbar { width: 0; height: 0; }

/* gradient text */
.grad-text {
  background: linear-gradient(135deg, var(--fg-0), var(--brand-2) 60%, var(--pos));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* status dot */
.dot {
  width: 8px; height: 8px; border-radius: 99px;
  background: var(--fg-3);
  display: inline-block;
}
.dot-pos { background: var(--pos); box-shadow: 0 0 8px var(--pos-glow); }
.dot-neg { background: var(--neg); box-shadow: 0 0 8px var(--neg-glow); }
.dot-brand { background: var(--brand); box-shadow: 0 0 8px var(--brand-glow); }
.dot-warn { background: var(--warn); box-shadow: 0 0 8px var(--warn-glow); }