:root {
  /* Unified background palette (4 levels instead of 15+) */
  --bg-primary: #000000;           /* Main background */
  --bg-secondary: #0d0d0d;         /* Slightly lighter panels, topbar */
  --bg-panel: #111111;             /* Cards, modals, panels */
  --bg-input: #0a0a0a;             /* Input fields */
  
  /* Legacy vars (kept for compatibility, point to unified palette) */
  --bg: rgba(10,10,10,0.94); --bg2: rgba(17,17,17,0.95); --bg3: rgba(22,22,22,0.96);
  --surface: rgba(255,255,255,0.07); --surface2: rgba(255,255,255,0.11); --surface3: rgba(255,255,255,0.15);
  
  /* Unified border palette */
  --border-primary: rgba(255,255,255,0.07);   /* Main borders */
  --border-accent: rgba(255,255,255,0.12);    /* Highlighted borders */
  --border: rgba(255,255,255,0.07); --border2: rgba(255,255,255,0.13);
  
  /* Text colors */
  --text-primary: #f0f0f0;              /* Main text */
  --text-secondary: rgba(255,255,255,0.7);  /* Secondary text */
  --text-muted: rgba(255,255,255,0.5);      /* Muted text */
  --text: #f0f0f0; --text-dim: rgba(255,255,255,0.5); --text-faint: rgba(255,255,255,0.22);
  
  /* Accent colors */
  --accent: #AAFF00; --accent-light: #CCFF00; --purple: #AAFF00; --purple-light: #CCFF00;
  --pink: #AAFF00; --green: #00C48C; --red: #FF4D4D; --yellow: #F5C842; --blue: #4D9EFF;
  --gold: #f0b429;  /* Sidebar icons */
  
  /* Spacing & borders */
  --r: 8px; --r-sm: 5px;
  --font-mono: 'JetBrains Mono', monospace;
  --topbar-h: 58px; --subtabs-h: 46px; --statusbar-h: 32px; --ticker-h: 34px;
  --sidebar-w: 80px; --sidebar-panel-w: 280px;
}
html, body { height: 100%; background: var(--bg); color: var(--text); font-family: 'Inter', sans-serif; font-size: 13px; overflow: hidden; isolation: isolate; }
button { cursor: pointer; font-family: inherit; }
input { font-family: inherit; }
a { text-decoration: none; }

/* ══ ANIMATIONS ════════════════════════════════════════════════════════ */
@keyframes priceUpFlash { 0%{color:var(--green);text-shadow:0 0 8px var(--green)} 100%{color:inherit;text-shadow:none} }
@keyframes priceDnFlash { 0%{color:var(--red);text-shadow:0 0 8px var(--red)} 100%{color:inherit;text-shadow:none} }
.price-up-flash { animation: priceUpFlash 1s ease; }
.price-dn-flash { animation: priceDnFlash 1s ease; }

/* ══ TOPBAR ════════════════════════════════════════════════════════════ */

/* ── PWA standalone mode only (installed app) ── */
@media all and (display-mode: standalone) {
  :root {
    --safe-top: env(safe-area-inset-top, 44px);
    --safe-bottom: env(safe-area-inset-bottom, 34px);
  }

  /* Topbar: sits below status bar */
  .topbar {
    top: var(--safe-top) !important;
    height: 52px !important;
  }

  /* Main content area: below topbar+safe-top, above footer+safe-bottom */
  .main-wrap {
    top: calc(var(--safe-top) + 52px) !important;
    bottom: calc(58px + var(--safe-bottom)) !important;
    height: auto !important;
  }

  /* Footer: pinned to bottom above home indicator */
  .mobile-footer {
    bottom: 0 !important;
    padding-bottom: var(--safe-bottom) !important;
    height: calc(58px + var(--safe-bottom)) !important;
  }

  /* Dark background fills notch area above topbar */
  body {
    background: #0a0a0a;
  }
}