:root[data-theme="dark"] {
  --bg: #09090B; --bg-elevated: #101014;
  --surface: rgba(255,255,255,0.045); --surface-strong: rgba(255,255,255,0.075);
  --border: rgba(255,255,255,0.09);
  --text: #F4F4F6; --text-muted: #A1A1AA; --text-faint: #6B6B75;
}
:root[data-theme="light"] {
  --bg: #F8FAFC; --bg-elevated: #FFFFFF;
  --surface: rgba(255,255,255,0.8); --surface-strong: rgba(255,255,255,0.98);
  --border: rgba(15,15,25,0.08);
  --text: #18181B; --text-muted: #52525B; --text-faint: #8A8A93;
}
:root {
  --indigo: #6366F1; --purple: #A855F7; --pink: #EC4899; --blue: #3B82F6; --cyan: #22D3EE;
  --green: #22C55E; --orange: #F97316; --yellow: #EAB308;
  --danger: #EF4444;
  --radius-card: 24px; --radius-pill: 100px;
}
.glass {
  background: var(--surface); border: 1px solid var(--border);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: var(--radius-card);
}
.btn-primary {
  border: none; border-radius: var(--radius-pill); padding: 11px 22px; font-weight: 600; color: #fff;
  background: linear-gradient(100deg, var(--indigo), var(--purple));
  cursor: pointer;
}
.btn-ghost {
  border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 10px 20px;
  font-weight: 600; color: var(--text); background: var(--surface); cursor: pointer;
}