/* ═══════════════════════════════════════════
   BASE.CSS — Design tokens, themes, reset
═══════════════════════════════════════════ */

/* ── DARK THEME (default) ── */
:root,[data-theme="dark"] {
  --bg:  #0F0D1A; --bg2: #181525; --bg3: #201D2E;
  --s:   #181525;
  --s2:  #201D2E;
  --s3:  #282436;
  --b:   #2E2A40;
  --bp:  rgba(168,85,247,.5);
  --p:   #a855f7; --ph: #c084fc; --pl: #7c3aed;
  --pg:  rgba(168,85,247,.16);
  --pg2: rgba(168,85,247,.08);
  --t:   #FFFFFF;
  --t2:  #D0CBE5;
  --t3:  #A9A3C0;
  --g:   #4ade80; --r: #f87171; --gold: #fbbf24; --cy: #22d3ee;
  --shadow: none;
  --nav-glass: #0F0D1A;
  --card-shadow: none;
}

/* ── LIGHT THEME ── */
[data-theme="light"] {
  --bg:  #F8F8FF; --bg2: #ffffff; --bg3: #EFEFFA;
  --s:   #ffffff;
  --s2:  #F2F1FB;
  --s3:  #E9E8F5;
  --b:   #D4D2E8;
  --bp:  rgba(109,40,217,.4);
  --p:   #7c3aed; --ph: #6d28d9; --pl: #5b21b6;
  --pg:  rgba(124,58,237,.1);
  --pg2: rgba(124,58,237,.05);
  --t:   #1A1825;
  --t2:  #4A475F;
  --t3:  #6B6880;
  --g:   #15803d; --r: #dc2626; --gold: #b45309; --cy: #0e7490;
  --shadow: none;
  --nav-glass: #ffffff;
  --card-shadow: 0 1px 4px rgba(109,40,217,.07), 0 0 0 1px #D4D2E8;
}

/* ── RESET ── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { height:100%; }
body {
  background: var(--bg);
  color: var(--t);
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  min-height: 100dvh;
  overflow-x: hidden;
  padding-bottom: calc(74px + 14px);
  transition: background .3s ease, color .3s ease;
}
button, input, select, textarea { font-family: 'DM Sans', sans-serif; }
button { cursor: pointer; }
input { color: var(--t); }
a { color: inherit; text-decoration: none; }

/* ── HIDE SCROLLBAR ── */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { display: none; }

/* ── AMBIENT (dark only) — static blobs, no animation ── */
.amb { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.blob { position:absolute; border-radius:50%; }
.b1 { width:440px;height:440px;background:radial-gradient(circle,#6d28d9 0%,transparent 70%);opacity:.07;top:-110px;right:-130px; }
.b2 { width:340px;height:340px;background:radial-gradient(circle,#a855f7 0%,transparent 70%);opacity:.05;bottom:60px;left:-110px; }
.b3 { width:230px;height:230px;background:radial-gradient(circle,#c084fc 0%,transparent 70%);opacity:.04;top:42%;right:-70px; }
[data-theme="light"] .b1 { opacity:0; }
[data-theme="light"] .b2 { opacity:0; }
[data-theme="light"] .b3 { opacity:0; }

/* OPTIMIZED: Removed heavy SVG noise filter that caused GPU strain */

/* ── GLASS / CARD ── */
.card {
  background: var(--s);
  border: 1px solid var(--b);
  border-radius: 20px;
  box-shadow: var(--card-shadow);
  transition: background .3s, border-color .3s, box-shadow .3s;
}
.card-p {
  background: var(--s);
  border-color: var(--bp);
}
[data-theme="light"] .card-p {
  background: var(--s);
}
.card-i { transition: transform .22s; }
.card-i:active { transform: scale(.975); }

/* ── PAGES ── */
.page { display:none; position:relative; z-index:2; }
.page.active { display:block; }
.scroll { padding:16px; display:flex; flex-direction:column; gap:14px; }
.hdr { display:flex; align-items:center; justify-content:space-between; padding:18px 16px 0; }
.divider { border:none; border-top:1px solid var(--b); margin:0 14px; }

/* ── TYPOGRAPHY ── */
.syne { font-family:'Syne',sans-serif; }
.page-title { font-family:'Syne',sans-serif; font-size:24px; font-weight:800; letter-spacing:-.025em; }
.sec-title {
  font-family:'Syne',sans-serif; font-size:11px; font-weight:700;
  color:var(--t2); text-transform:uppercase; letter-spacing:.1em; padding:0 2px;
}
[data-theme="light"] .sec-title { color:var(--t2); }
[data-theme="dark"] .sec-title { color:var(--t2); }
.logo {
  font-family:'Syne',sans-serif; font-size:22px; font-weight:800; letter-spacing:-.025em;
  background: linear-gradient(135deg,#c084fc,#a855f7 50%,#7c3aed);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
[data-theme="light"] .logo {
  background: linear-gradient(135deg,#7c3aed,#6d28d9 50%,#5b21b6);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.logo span { -webkit-text-fill-color: rgba(168,85,247,.25); }

/* ── PROGRESS ── */
.progress-bar { height:4px; background:rgba(128,0,255,.12); border-radius:99px; overflow:hidden; }
.progress-fill {
  height:100%; border-radius:99px;
  background: linear-gradient(90deg,#7c3aed,#a855f7,#c084fc);
  transition: width 1.2s cubic-bezier(.4,0,.2,1);
}
/* OPTIMIZED: removed infinite animation from dot-live */
.dot-live { width:7px;height:7px;border-radius:50%;background:var(--g); }

/* ── NAV ── */
.nav {
  position:fixed; bottom:0; left:0; right:0; z-index:100;
  height:74px; padding:0 6px 12px;
  background: var(--nav-glass);
  border-top: 1px solid var(--b);
  display:flex; align-items:flex-end; justify-content:space-around;
  transition: background .3s, border-color .3s;
}
.nav-btn {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:6px 10px; border-radius:14px; border:none; background:transparent;
  color:var(--t3); font-size:10px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  transition:color .22s; min-width:56px;
}
.nav-pill { width:40px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;transition:background .22s; }
.nav-btn svg { width:21px;height:21px;stroke-width:1.8;transition:transform .3s cubic-bezier(.34,1.56,.64,1); }
.nav-btn.active { color:var(--ph); }
.nav-btn.active .nav-pill { background:var(--pg); }
.nav-btn.active svg { transform:scale(1.12); }
[data-theme="light"] .nav-btn { color:var(--t3); }
[data-theme="light"] .nav-btn.active { color:var(--ph); }

/* ── UTILS ── */
.flex-1 { flex:1; }
.ml-auto { margin-left:auto; }
.fw5{font-weight:500;} .fw6{font-weight:600;} .fw7{font-weight:700;}
.mt4{margin-top:4px;} .mt8{margin-top:8px;} .mt12{margin-top:12px;} .mt16{margin-top:16px;}
.text-sm{font-size:13px;} .text-xs{font-size:11px;}
.text-2{color:var(--t2);} .text-3{color:var(--t2);}
[data-theme="dark"] .text-3{color:var(--t2);}
[data-theme="light"] .text-3{color:var(--t2);}
.hidden{display:none!important;}
.sep{height:1px;background:var(--b);margin:4px 0;}