:root {
  --purple: #ffffff;
  --purple-light: #d4d4d8;
  --purple-dim: rgba(255,255,255,0.1);
  --gold: #a1a1aa;
  --white: #f4f4f5;
  --off-white: #d4d4d8;
  --muted: #71717a;
  --bg: #000000;
  --bg2: #09090b;
  --card: #18181b;
  --border: rgba(255,255,255,0.1);
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--white);
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
}

/* ── Canvas starfield ── */
#starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.card {
    position: relative;
    z-index: 2;
    max-width: 500px;
    width: 100%;
    background: var(--card);
    padding: 40px;
    border-radius: 24px;
    border: 1px solid var(--border);
    text-align: center;
}
h1 { font-family: 'Syne', sans-serif; font-size: 28px; margin-bottom: 16px; letter-spacing: -0.02em; }
p { color: var(--off-white); margin-bottom: 32px; font-size: 15px; font-weight: 300; }
.form-group { text-align: left; margin-bottom: 24px; }
label { display: block; margin-bottom: 8px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
input { width: 100%; padding: 14px; background: rgba(0,0,0,0.3); border: 1px solid var(--border); border-radius: 12px; color: #fff; box-sizing: border-box; font-family: inherit; }
input:focus { outline: none; border-color: rgba(255,255,255,0.3); }
.btn-danger { width: 100%; padding: 16px; background: #ff3b30; color: #fff; border: none; border-radius: 12px; font-weight: 700; cursor: pointer; transition: 0.2s; font-family: inherit; }
.btn-danger:hover { background: #ff453a; transform: scale(1.02); }
.note { margin-top: 24px; font-size: 12px; color: var(--muted); }