:root {
  --bg-1: #0f172a;
  --bg-2: #111827;
  --card: rgba(255, 255, 255, 0.08);
  --border: rgba(255, 255, 255, 0.12);
  --text: #e5e7eb;
  --muted: #94a3b8;
  --accent: #7c3aed;
  --accent-2: #06b6d4;
  --success: #22c55e;
  --danger: #ef4444;
  --shadow: 0 20px 60px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.4);
}

* { box-sizing: border-box }
html, body { height: 100% }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 10% 10%, #1f2937 0%, transparent 70%),
    radial-gradient(800px 500px at 90% 90%, #0b1020 0%, transparent 70%),
    linear-gradient(120deg, var(--bg-1), var(--bg-2));
}

.page { position: relative; min-height: 100%; display: grid; place-items: center; padding: 24px }

.bg-decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none }
.blob {
  position: absolute;
  width: 520px; height: 520px;
  filter: blur(60px);
  opacity: .35;
  background: radial-gradient(circle at 30% 30%, var(--accent), transparent 60%);
  animation: float 18s ease-in-out infinite;
}
.blob.b1 { top: -120px; left: -80px }
.blob.b2 { bottom: -180px; right: -120px; background: radial-gradient(circle at 70% 70%, var(--accent-2), transparent 60%); animation-delay: -6s }
.blob.b3 { top: 40%; left: 60%; background: radial-gradient(circle at 50% 50%, #f59e0b, transparent 60%); animation-delay: -12s }
@keyframes float { 0%,100% { transform: translate3d(0,0,0) } 50% { transform: translate3d(20px,-12px,0) } }

.card {
  width: 100%;
  max-width: 420px;
  padding: 28px;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px) saturate(120%);
}

.brand { text-align: center; margin-bottom: 22px }
.logo { width: 64px; height: 64px; margin: 0 auto 10px; display: grid; place-items: center }
.logo svg { width: 100%; height: 100% }
.title { font-weight: 700; font-size: 22px; letter-spacing: .2px }
.subtitle { color: var(--muted); font-size: 14px; margin-top: 6px }

.form { display: grid; gap: 14px; margin-top: 10px }
.field { display: grid; gap: 8px }
.field label { font-size: 14px; color: var(--muted) }
.field input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  color: var(--text);
  outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.field input::placeholder { color: #9aa3b2 }
.field input:focus {
  border-color: rgba(124,58,237,.7);
  box-shadow: 0 0 0 4px rgba(124,58,237,.15);
  background: rgba(255,255,255,.09);
}
.field input:invalid:focus {
  border-color: rgba(239,68,68,.75);
  box-shadow: 0 0 0 4px rgba(239,68,68,.15);
}
.password-wrap { position: relative }
.password-wrap .toggle {
  position: absolute;
  right: 8px; top: 50%; transform: translateY(-50%);
  display: inline-grid; place-items: center;
  width: 36px; height: 36px;
  border: none; border-radius: 10px;
  background: transparent; color: #cdd3de;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.password-wrap .toggle:hover { background: rgba(255,255,255,.08); color: #fff }
.password-wrap .toggle svg { width: 20px; height: 20px }

.error {
  min-height: 18px;
  font-size: 12px;
  color: var(--danger);
}

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
}
.checkbox { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px }
.checkbox input { width: 16px; height: 16px; accent-color: var(--accent) }

.link { color: #a78bfa; text-decoration: none; font-weight: 600 }
.link:hover { text-decoration: underline }

.submit {
  margin-top: 6px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  border: 0;
  font-weight: 700;
  color: #0b1020;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  cursor: pointer;
  transition: filter .2s, transform .04s;
}
.submit:hover { filter: brightness(1.08) }
.submit:active { transform: translateY(1px) }

.footer {
  margin-top: 16px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}
.footer .link { margin-left: 6px }

@media (max-width: 480px) {
  .card { padding: 22px }
}

@media (prefers-color-scheme: light) {
  :root {
    --bg-1: #e7f0ff;
    --bg-2: #f4f7ff;
    --card: rgba(255, 255, 255, 0.85);
    --border: rgba(0, 0, 0, 0.08);
    --text: #111827;
    --muted: #6b7280;
    --shadow: 0 14px 40px rgba(16,24,40,.2), 0 2px 8px rgba(16,24,40,.15);
  }
  .field input {
    background: rgba(0,0,0,.03);
    border-color: rgba(0,0,0,.08);
  }
  .password-wrap .toggle { color: #6b7280 }
}