@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

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

:root {
  --bg:         #0a0a0f;
  --surface:    #111118;
  --surface2:   #18181f;
  --border:     #1e1e2e;
  --border2:    #2a2a3a;
  --accent:     #6c63ff;
  --accent-h:   #8b85ff;
  --accent-dim: rgba(108,99,255,.15);
  --green:      #22c55e;
  --red:        #ef4444;
  --yellow:     #f59e0b;
  --text:       #f0f0ff;
  --muted:      #8888aa;
  --muted2:     #555570;
  --radius:     10px;
  --radius-sm:  6px;
  --shadow:     0 4px 24px rgba(0,0,0,.4);
}

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-h); }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: var(--radius-sm);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all .18s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover { background: var(--accent-h); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(108,99,255,.4); }
.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border2);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-sm { padding: 7px 14px; font-size: .82rem; }
.btn-lg { padding: 14px 28px; font-size: 1rem; }
.btn-block { width: 100%; justify-content: center; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }

/* ── Form ── */
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: .85rem; font-weight: 500; color: var(--muted); margin-bottom: 6px; }
.form-control {
  width: 100%;
  padding: 10px 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: .9rem;
  font-family: inherit;
  transition: border-color .15s;
  outline: none;
}
.form-control:focus { border-color: var(--accent); }
.form-control::placeholder { color: var(--muted2); }
textarea.form-control { resize: vertical; min-height: 110px; }

/* ── Alert ── */
.alert {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: .88rem;
  margin-bottom: 16px;
}
.alert-error { background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.3); color: #fca5a5; }
.alert-success { background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.3); color: #86efac; }

/* ── Badge ── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 99px;
  font-size: .75rem;
  font-weight: 600;
}
.badge-green  { background: rgba(34,197,94,.15);  color: var(--green); }
.badge-red    { background: rgba(239,68,68,.15);   color: var(--red); }
.badge-yellow { background: rgba(245,158,11,.15);  color: var(--yellow); }
.badge-accent { background: var(--accent-dim);     color: var(--accent-h); }

/* ── Logo gradient ── */
.logo-grad {
  background: linear-gradient(135deg, #60a5fa 0%, #a855f7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Utility ── */
.text-muted  { color: var(--muted); }
.text-accent { color: var(--accent); }
.text-center { text-align: center; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-1 { margin-bottom: 8px; }
.hidden { display: none !important; }