/* ── Design tokens, reset & base layout ─────────────────────────────────────── */

*{box-sizing:border-box;margin:0;padding:0;}

:root{
  --accent:       #a78bfa;
  --accent2:      #60a5fa;
  --success:      #34d399;
  --danger:       #f87171;
  --warning:      #fbbf24;
  --text-main:    rgba(255,255,255,.92);
  --text-muted:   rgba(255,255,255,.50);
  --text-dim:     rgba(255,255,255,.28);
  --glass-border: rgba(255,255,255,.18);
  --glass-shine:  rgba(255,255,255,.22);
  --glass-bg:     linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
  --glass-bg2:    linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  --bg-grad:      linear-gradient(135deg,#0f0c29 0%,#302b63 50%,#24243e 100%);
  --overlay-dark: linear-gradient(135deg,rgba(18,10,48,.97),rgba(10,6,30,.99));
  --thumb-w:      88px;
  font-family:'Inter',system-ui,sans-serif;
  font-size:12px;
  color-scheme:dark;
}

html{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.12) transparent;}

body{
  width:360px;
  min-height:120px;
  max-height:600px;
  display:flex;
  flex-direction:column;
  background:var(--bg-grad);
  color:var(--text-main);
  overflow:hidden;
  position:relative;
}