:root {
  --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.04); --surface2: rgba(255,255,255,0.07); --surface3: rgba(255,255,255,0.1);
  --border: rgba(255,255,255,0.07); --border2: rgba(255,255,255,0.13);
  --text: #f0f0f0; --text-dim: rgba(255,255,255,0.5); --text-faint: rgba(255,255,255,0.22);
  --pink: #682699; --green: #00C48C; --red: #FF4D4D; --yellow: #F5C842; --blue: #4D9EFF;
  --r: 8px; --r-sm: 5px;
  --font-mono: 'JetBrains Mono', monospace;
  --topbar-h: 58px; --subtabs-h: 46px; --statusbar-h: 32px; --ticker-h: 34px;
  --sidebar-w: 40px; --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;
  }
}