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

/* ─── CSS Variables ─────────────────────────────────────── */
:root {
  --bg:           #0a0a12;
  --surface:      rgba(255,255,255,0.06);
  --surface2:     rgba(255,255,255,0.10);
  --border:       rgba(255,255,255,0.08);
  --border2:      rgba(255,255,255,0.14);
  --accent:       #7c5cfc;
  --accent2:      #b44dff;
  --accent-glow:  rgba(124,92,252,0.35);
  --gold:         #f5c842;
  --green:        #30d158;
  --red:          #ff453a;
  --blue:         #0a84ff;
  --cyan:         #5ac8fa;
  --text:         #f5f5f7;
  --text2:        rgba(245,245,247,0.60);
  --text3:        rgba(245,245,247,0.35);
  --radius:       20px;
  --radius-sm:    12px;
  --tab-h:        72px;
  --safe-b:       env(safe-area-inset-bottom, 0px);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
}

/* ─── Base ──────────────────────────────────────────────── */
html { background: var(--bg); color: var(--text); font-family: var(--font); }

body {
  min-height: 100dvh;
  background: var(--bg);
  overflow-x: hidden;
  padding-bottom: calc(var(--tab-h) + var(--safe-b) + 8px);
  background-image:
    radial-gradient(ellipse 80% 60% at 15% -5%, rgba(124,92,252,0.22) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 110%, rgba(180,77,255,0.15) 0%, transparent 60%);
}

/* ─── Scroll ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 0; height: 0; }

/* ─── Utility ────────────────────────────────────────────── */
.hidden { display: none !important; }
.flex   { display: flex; }
.col    { flex-direction: column; }
.center { align-items: center; justify-content: center; }
.gap4   { gap: 4px; }
.gap8   { gap: 8px; }
.gap12  { gap: 12px; }
.gap16  { gap: 16px; }