:root {
  --bg:           #0C0E18;
  --surface:      #141828;
  --card:         #1C2035;
  --border:       rgba(255,255,255,0.08);
  --text:         #FFFFFF;
  --text-muted:   rgba(255,255,255,0.50);
  --text-dim:     rgba(255,255,255,0.25);
  --pink:         #FF2DAA;
  --yellow:       #F5C518;
  --green:        #00ADB5;
  --blue:         #00ADB5;
  --purple:       #9B59B6;
  --orange:       #FF7A00;
  --success:      #00ADB5;
  --error:        #FF2DAA;
  --grad-primary: linear-gradient(135deg, #FF2DAA, #F5C518);
  --grad-button:  linear-gradient(135deg, #FF2DAA, #F5C518);
  --grad-success: linear-gradient(135deg, #00ADB5, #F5C518);
  --radius-sm:    8px;
  --radius-md:    14px;
  --radius-lg:    20px;
  --radius-xl:    28px;
  --radius-full:  999px;
  --shadow-card:        0 4px 24px rgba(0,0,0,0.5);
  --shadow-glow-pink:   0 0 20px rgba(255,45,170,0.35);
  --shadow-glow-yellow: 0 0 20px rgba(245,197,24,0.35);
  --shadow-glow-green:  0 0 20px rgba(0,173,181,0.35);
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
}

a { color: inherit; text-decoration: none; }

.btn-primary {
  background: var(--grad-button); border: none; border-radius: var(--radius-md);
  color: white; font-family: var(--font-display); font-weight: 700;
  font-size: 1rem; padding: 0.75rem 1.5rem;
  box-shadow: 0 4px 16px rgba(255,45,170,0.4);
  transition: transform 0.1s, box-shadow 0.15s;
  display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255,45,170,0.5); }
.btn-primary:active { transform: scale(0.97); }
.btn-primary:disabled { opacity: 0.4; pointer-events: none; }

.btn-ghost {
  background: transparent; border: 1px solid var(--border); border-radius: var(--radius-md);
  color: var(--text); font-family: var(--font-display); font-weight: 600;
  font-size: 0.95rem; padding: 0.7rem 1.4rem; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.btn-ghost:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.25); }

.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.5rem;
}

.label {
  font-size: 0.65rem; letter-spacing: 0.18em; color: var(--text-dim);
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; margin: 0;
}

.input {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); color: var(--text);
  font-size: 1rem; font-family: var(--font-body);
  padding: 0.7rem 1rem; outline: none; width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.input::placeholder { color: var(--text-dim); }
.input:focus { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(255,45,170,0.15); }