* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #0a0b10;
  color: #e2e8f0;
  overflow: hidden;
}
.bg {
  position: fixed; inset: 0;
  background:
    radial-gradient(800px 600px at 20% 30%, rgba(139,92,246,0.15), transparent 60%),
    radial-gradient(700px 500px at 80% 70%, rgba(249,115,22,0.1),  transparent 60%),
    #0a0b10;
  z-index: 0;
}
.wrap {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: 100vh; padding: 24px;
}
.home {
  position: absolute; top: 20px; left: 24px;
  color: #94a3b8; text-decoration: none; font-size: 0.9em;
  transition: color .2s;
}
.home:hover { color: #a78bfa; }
.card {
  width: 100%; max-width: 400px;
  background: rgba(20, 22, 32, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 36px 32px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}
h1 { font-size: 1.6em; margin-bottom: 8px; background: linear-gradient(90deg,#8b5cf6,#f97316); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sub { color: #94a3b8; font-size: 0.9em; margin-bottom: 24px; }
label { display: block; margin-bottom: 14px; font-size: 0.82em; color: #94a3b8; font-weight: 600; }
input {
  display: block; width: 100%; margin-top: 6px;
  padding: 11px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: white; font-size: 0.95em; font-weight: 500;
  outline: none;
  transition: border-color .15s, background .15s;
}
input:focus { border-color: #8b5cf6; background: rgba(139,92,246,0.08); }
button {
  width: 100%; margin-top: 10px; padding: 12px;
  background: linear-gradient(90deg,#8b5cf6,#7c3aed);
  color: white; border: none; border-radius: 8px;
  font-weight: 700; font-size: 0.95em; cursor: pointer;
  transition: transform .1s, box-shadow .2s;
}
button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(139,92,246,0.35); }
button:disabled { opacity: 0.6; cursor: wait; }
.err {
  margin: 8px 0 6px; padding: 10px 12px;
  background: rgba(239,68,68,0.12); color: #fca5a5;
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: 6px; font-size: 0.85em;
}
.hint { margin-top: 20px; text-align: center; color: #64748b; font-size: 0.85em; }
.hint a { color: #a78bfa; text-decoration: none; }
.hint a:hover { text-decoration: underline; }
footer {
  position: absolute; bottom: 16px;
  color: #475569; font-size: 0.78em;
}