:root {
  --bg: #EFF1F5;
  --card: #FFFFFF;
  --soft: #F1F3F7;
  --soft2: #F7F8FA;
  --gsoft: #E8F6EF;
  --rsoft: #FDECEA;
  --txt: #12181F;
  --mut: #8E97A3;
  --mut2: #A6AEB9;
  --mut3: #C3CAD3;
  --line: #F1F3F7;
  --line2: #E5E9EF;

  --brand: #00A651;
  --brand-tint: #00863F;
  --danger: #E5322D;

  --radius-pill: 999px;
  --radius-sheet: 24px;
  --radius-card: 20px;
  --radius-field: 16px;
  --radius-modal-btn: 14px;
  --radius-icon-tile: 12px;

  --space-4: 4px; --space-7: 7px; --space-8: 8px; --space-9: 9px;
  --space-10: 10px; --space-13: 13px; --space-14: 14px; --space-16: 16px;
  --space-20: 20px; --space-24: 24px; --space-28: 28px;
}

/* Superseded by the :root[data-theme="dark"] block below, which JS always
   sets before first paint (app.js stamps it at module-evaluation time) —
   this @media block never actually applies once JS has run, but is kept
   as the values source of truth; keep both in sync if either changes. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F1318;
    --card: #181D24;
    --soft: #232A33;
    --soft2: #1E242C;
    --gsoft: #123329;
    --rsoft: #3A1E1C;
    --txt: #EFF3F7;
    --mut: #98A2AE;
    --mut2: #7C8794;
    --mut3: #5C6673;
    --line: #242B34;
    --line2: #242B34;
  }
}

:root[data-theme="light"] {
  --bg: #EFF1F5;
  --card: #FFFFFF;
  --soft: #F1F3F7;
  --soft2: #F7F8FA;
  --gsoft: #E8F6EF;
  --rsoft: #FDECEA;
  --txt: #12181F;
  --mut: #8E97A3;
  --mut2: #A6AEB9;
  --mut3: #C3CAD3;
  --line: #F1F3F7;
  --line2: #E5E9EF;
}

:root[data-theme="dark"] {
  --bg: #0F1318;
  --card: #181D24;
  --soft: #232A33;
  --soft2: #1E242C;
  --gsoft: #123329;
  --rsoft: #3A1E1C;
  --txt: #EFF3F7;
  --mut: #98A2AE;
  --mut2: #7C8794;
  --mut3: #5C6673;
  --line: #242B34;
  --line2: #242B34;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Nunito', system-ui, sans-serif;
  background: var(--bg);
  color: var(--txt);
  font-weight: 600;
}

#app {
  max-width: 440px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  position: relative;
}

.press { transition: transform 0.1s ease; }
.press:active { transform: scale(0.965); }

@keyframes fu {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.anim-fu { animation: fu 0.3s ease; }

@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.anim-fade { animation: fade 0.2s ease; }

@keyframes pop {
  from { opacity: 0; transform: translateY(6px) scale(0.94); }
  to { opacity: 1; transform: none; }
}
.anim-pop { animation: pop 0.28s cubic-bezier(0.22,1,0.36,1); }

@keyframes ring {
  from { transform: scale(0.7); opacity: 0.55; }
  to { transform: scale(1.65); opacity: 0; }
}

@keyframes barGrow {
  from { width: 4%; }
  to { width: 100%; }
}

@keyframes grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}