@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500&display=swap');

/* ══════════════════════════════════════════════════════
   ROOT / TOKENS
══════════════════════════════════════════════════════ */
:root {
  --font-mono: 'JetBrains Mono', monospace;
  --font-sans: 'Outfit', sans-serif;
  --radius:        10px;
  --radius-lg:     16px;
  --radius-xl:     22px;
  --sidebar-w:     248px;
  --sidebar-icon:  64px;
  --topbar-h:      60px;
  --bottom-nav-h:  68px;
  --ease:          cubic-bezier(.4, 0, .2, 1);
  --dur:           .18s;
}

/* ══════════════════════════════════════════════════════
   DARK THEME
══════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --bg:           #080c14;
  --bg2:          #0e1220;
  --bg3:          #141a2c;
  --bg4:          #1c2338;
  --border:       #1d2640;
  --border-hi:    #2b3656;
  --accent:       #00e5a0;
  --accent-dim:   rgba(0, 229, 160, .10);
  --accent-glow:  rgba(0, 229, 160, .20);
  --accent2:      #00c48a;
  --accent-chart: rgba(0, 229, 160, .22);
  --purple:       #7c6fff;
  --purple-dim:   rgba(124, 111, 255, .12);
  --text:         #e2e8f8;
  --text-muted:   #4f5d7e;
  --text-dim:     #8592b4;
  --red:          #f05252;
  --red-dim:      rgba(240, 82, 82, .12);
  --warn-chart:   rgba(240, 82, 82, .20);
  --green:        #22d572;
  --green-dim:    rgba(34, 213, 114, .12);
  --yellow:       #f5a623;
  --blue:         #4da8ff;
  --shadow:       0 8px 40px rgba(0, 0, 0, .6);
  --shadow-sm:    0 2px 16px rgba(0, 0, 0, .4);
  --shadow-xs:    0 1px 6px  rgba(0, 0, 0, .3);
}

/* ══════════════════════════════════════════════════════
   LIGHT THEME
══════════════════════════════════════════════════════ */
[data-theme="light"] {
  --bg:           #f1f4fa;
  --bg2:          #ffffff;
  --bg3:          #e8ecf5;
  --bg4:          #dde3ef;
  --border:       #d0d9ec;
  --border-hi:    #b4c0d6;
  --accent:       #00956a;
  --accent-dim:   rgba(0, 149, 106, .10);
  --accent-glow:  rgba(0, 149, 106, .16);
  --accent2:      #007051;
  --accent-chart: rgba(0, 149, 106, .20);
  --purple:       #5b4fd4;
  --purple-dim:   rgba(91, 79, 212, .10);
  --text:         #131926;
  --text-muted:   #6a7590;
  --text-dim:     #46526a;
  --red:          #e03232;
  --red-dim:      rgba(224, 50, 50, .10);
  --warn-chart:   rgba(224, 50, 50, .18);
  --green:        #1da85c;
  --green-dim:    rgba(29, 168, 92, .10);
  --yellow:       #c97800;
  --blue:         #2460d4;
  --shadow:       0 8px 40px rgba(0, 0, 0, .10);
  --shadow-sm:    0 2px 16px rgba(0, 0, 0, .07);
  --shadow-xs:    0 1px 6px  rgba(0, 0, 0, .05);
}

/* ══════════════════════════════════════════════════════
   SYSTEM THEME
══════════════════════════════════════════════════════ */
[data-theme="system"] {
  --bg: #f1f4fa; --bg2: #ffffff; --bg3: #e8ecf5; --bg4: #dde3ef;
  --border: #d0d9ec; --border-hi: #b4c0d6;
  --accent: #00956a; --accent-dim: rgba(0,149,106,.10); --accent-glow: rgba(0,149,106,.16);
  --accent2: #007051; --accent-chart: rgba(0,149,106,.20);
  --purple: #5b4fd4; --purple-dim: rgba(91,79,212,.10);
  --text: #131926; --text-muted: #6a7590; --text-dim: #46526a;
  --red: #e03232; --red-dim: rgba(224,50,50,.10); --warn-chart: rgba(224,50,50,.18);
  --green: #1da85c; --green-dim: rgba(29,168,92,.10); --yellow: #c97800; --blue: #2460d4;
  --shadow: 0 8px 40px rgba(0,0,0,.10); --shadow-sm: 0 2px 16px rgba(0,0,0,.07); --shadow-xs: 0 1px 6px rgba(0,0,0,.05);
}
@media (prefers-color-scheme: dark) {
  [data-theme="system"] {
    --bg: #080c14; --bg2: #0e1220; --bg3: #141a2c; --bg4: #1c2338;
    --border: #1d2640; --border-hi: #2b3656;
    --accent: #00e5a0; --accent-dim: rgba(0,229,160,.10); --accent-glow: rgba(0,229,160,.20);
    --accent2: #00c48a; --accent-chart: rgba(0,229,160,.22);
    --purple: #7c6fff; --purple-dim: rgba(124,111,255,.12);
    --text: #e2e8f8; --text-muted: #4f5d7e; --text-dim: #8592b4;
    --red: #f05252; --red-dim: rgba(240,82,82,.12); --warn-chart: rgba(240,82,82,.20);
    --green: #22d572; --green-dim: rgba(34,213,114,.12); --yellow: #f5a623; --blue: #4da8ff;
    --shadow: 0 8px 40px rgba(0,0,0,.6); --shadow-sm: 0 2px 16px rgba(0,0,0,.4); --shadow-xs: 0 1px 6px rgba(0,0,0,.3);
  }
}

/* ══════════════════════════════════════════════════════
   RESET + BASE
══════════════════════════════════════════════════════ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  display: flex;
  height: 100dvh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}