/* ── TOKENS ─────────────────────────────────────────────────── */
:root {
  --bg:      #0b0d12;
  --panel:   #121621;
  --text:    #e9ecf2;
  --muted:   #b7c0d6;
  --line:    rgba(255,255,255,.10);
  --accent:  #7dd3fc;
  --accent2: #a78bfa;
  --ok:      #34d399;
  --shadow:  0 18px 45px rgba(0,0,0,.40);
  --radius:  18px;
  --max:     640px;
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

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

html { height: 100%; }

body {
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
               "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

a { color: inherit; }

/* ── BACKGROUND ─────────────────────────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(125,211,252,.22), transparent 60%),
    radial-gradient(900px 500px at 110% 0%,   rgba(167,139,250,.20), transparent 55%);
  pointer-events: none;
  z-index: 0;
}

#app {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}