:root {
  --bg:         #0a0d14;
  --surface:    #10141c;
  --surface-hi: #161b26;
  --border:     rgba(255,255,255,0.08);
  --border-hi:  rgba(148,197,255,0.28);
  --bullish:    #34d399;
  --bearish:    #fb7185;
  --neutral:    #fbbf24;
  --accent:     #38bdf8;
  --btc:        #f7931a;
  --text:       #eef2ff;
  --muted:      #7d8598;
  --muted-2:    #a8b0c2;
  --radius:     8px;
  --radius-sm:  6px;
  --shadow:     0 2px 8px rgba(0,0,0,0.4);
  --font-body:  'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-disp:  'Space Grotesk', 'Inter', sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, monospace;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  /* This is a dark-only theme (no light mode toggle) — without this, native
     form controls (select dropdown popups, checkboxes, scrollbars) render
     using the browser's light-mode chrome regardless of our own CSS, since
     nothing here tells the browser the page itself is dark. */
  color-scheme: dark;
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100vh;
  padding: 32px 24px 56px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Backdrop ---------- */
/* A faint chart-style grid, not decoration — reads as a terminal/data
   surface rather than a marketing-page backdrop. No blurred floating
   orbs, no drift animation: those were the single biggest "vibe-coded"
   tell in the original design (see the redesign plan for the full
   before/after rationale). */
.backdrop { position: fixed; inset: 0; z-index: -2; overflow: hidden; }
.gridlines {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(148,197,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,197,255,0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, black 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, black 30%, transparent 78%);
}

.container { max-width: 1120px; margin: 0 auto; }

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Shared component base classes ---------- */
/* Every panel across the app (Analyze, Watchlist, Portfolio, Alerts,
   Signals, Compare, News) previously copy-pasted the same translucent
   blur+glow recipe; every primary button copy-pasted the same hardcoded
   blue->purple gradient. One definition each here, reused everywhere. */
.panel-base {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.btn-primary {
  background: var(--accent);
  border: none;
  border-radius: var(--radius-sm);
  color: #04121c;
  font-family: var(--font-body);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}
.btn-primary:hover:not(:disabled) { background: #56c8fb; }
.btn-primary:disabled { opacity: 0.5; cursor: default; }

.btn-secondary {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted-2);
  font-family: var(--font-body);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.btn-secondary:hover:not(:disabled) { border-color: var(--border-hi); color: var(--text); }
.btn-secondary:disabled { opacity: 0.5; cursor: default; }

.pill {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted-2);
  background: transparent;
}
.pill-bullish { color: var(--bullish); border-color: rgba(52,211,153,0.35); }
.pill-bearish { color: var(--bearish); border-color: rgba(251,113,133,0.35); }
.pill-neutral { color: var(--neutral); border-color: rgba(251,191,36,0.35); }
.pill-accent  { color: var(--accent);  border-color: rgba(56,189,248,0.35); }

.field {
  background: var(--surface-hi);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 9px 12px;
  outline: none;
  transition: border-color 0.15s;
}
.field:focus { border-color: var(--accent); }