:root {
  --bg: #0a0a0f;
  --surface: #12121a;
  --card: #181822;
  --border: #252530;
  --text: #e8e8f0;
  --muted: #8888a0;
  --green: #00e676;
  --green-glow: rgba(0,230,118,0.3);
  --red: #ff1744;
  --red-glow: rgba(255,23,68,0.3);
  --yellow: #ffab00;
  --yellow-glow: rgba(255,171,0,0.3);
  --blue: #448aff;
  --blue-glow: rgba(68,138,255,0.3);
  --radius: 14px;
  --radius-sm: 10px;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
}
.container {
  width: 100%;
  max-width: 420px;
  padding: 24px;
  animation: fadeIn 0.5s ease;
}
@keyframes fadeIn { from { opacity:0; transform: translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--green-glow); }
  50% { box-shadow: 0 0 0 18px transparent; }
}
@keyframes slideUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
h1 { font-size:28px; font-weight:700; letter-spacing:-0.5px; }
.subtitle { color:var(--muted); font-size:14px; line-height:1.5; margin-bottom:32px; text-align:center; }
.btn {
  display:block; width:100%; padding:15px; border-radius:var(--radius);
  font-size:15px; font-weight:600; cursor:pointer; border:none;
  transition:all 0.2s; text-align:center; text-decoration:none; font-family:inherit;
}
.btn-primary { background:var(--blue); color:#fff; box-shadow:0 4px 20px var(--blue-glow); }
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 6px 28px var(--blue-glow); }
.btn-outline { background:transparent; color:var(--text); border:1.5px solid var(--border); margin-top:10px; }
.btn-outline:hover { border-color:var(--muted); background:var(--surface); }
.btn-green { background:var(--green); color:#000; box-shadow:0 4px 20px var(--green-glow); }
.btn-green:hover { transform:translateY(-1px); box-shadow:0 6px 28px var(--green-glow); }
.btn-red { background:var(--red); color:#fff; box-shadow:0 4px 20px var(--red-glow); }
.btn-red:hover { transform:translateY(-1px); box-shadow:0 6px 28px var(--red-glow); }
.btn-sm { padding:10px 18px; font-size:13px; width:auto; display:inline-block; }
.back-link { display:inline-block; color:var(--muted); text-decoration:none; font-size:13px; margin-bottom:20px; }
.back-link:hover { color:var(--text); }
.logo-sm { text-align:center; font-size:40px; margin-bottom:12px; }
.input-group { margin-bottom:14px; }
.input-group label { display:block; font-size:12px; color:var(--muted); margin-bottom:5px; text-transform:uppercase; letter-spacing:0.5px; font-weight:600; }
.input-group input {
  width:100%; padding:13px 14px; border-radius:var(--radius-sm);
  border:1.5px solid var(--border); background:var(--surface);
  color:var(--text); font-family:inherit; font-size:14px; transition:border 0.2s;
}
.input-group input:focus { outline:none; border-color:var(--blue); }
.input-group input::placeholder { color:var(--muted); opacity:0.6; }
.error-msg { color:var(--red); font-size:12px; margin-bottom:10px; min-height:18px; }
.footer-text { text-align:center; color:var(--muted); font-size:12px; margin-top:24px; }
.section-title { font-size:13px; text-transform:uppercase; letter-spacing:1px; color:var(--muted); margin:20px 0 10px; }