*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:      #08080c;
  --card:    #0e0e18;
  --border:  rgba(139,92,246,0.18);
  --brd-sub: rgba(255,255,255,0.06);
  --primary: #8b5cf6;
  --prim-lt: #a78bfa;
  --accent:  #38bdf8;
  --text:    #eef2ff;
  --muted:   #6b7280;
  --error:   #f87171;
  --grad:    linear-gradient(135deg, #a78bfa, #38bdf8);
  /* φ = 1.618 SCALE */
  --phi-1:10px;--phi-2:16px;--phi-3:26px;--phi-4:42px;
  --fs-xs:0.618rem;--fs-sm:0.75rem;--fs-base:1rem;--fs-md:1.618rem;
  --phi-lh:1.618;
  --r: var(--phi-2);
}
body {
  background: var(--bg); color: var(--text);
  font-family: 'Inter', sans-serif; line-height: var(--phi-lh);
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  overflow: hidden; -webkit-font-smoothing: antialiased;
}
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat; background-size: 128px;
}
.blobs { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.blob { position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.15; }
.blob-1 { width: 500px; height: 500px; background: var(--primary); top: -150px; left: -150px; }
.blob-2 { width: 350px; height: 350px; background: var(--accent); bottom: -100px; right: -100px; }

.login-card {
  position: relative; z-index: 1;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--phi-3); padding: var(--phi-4) var(--phi-3);
  width: min(420px, calc(100vw - 2rem));
  box-shadow: 0 40px 100px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
}
.login-logo {
  font-size: 1.35rem; font-weight: 900; text-align: center; margin-bottom: 0.35rem;
  background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.login-badge {
  display: flex; align-items: center; justify-content: center; gap: 0.45rem;
  background: rgba(139,92,246,0.08); border: 1px solid rgba(139,92,246,0.2);
  color: var(--prim-lt); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.3rem 0.85rem; border-radius: 100px;
  width: fit-content; margin: 0 auto 1.75rem;
}
.login-badge .lucide { width: 12px; height: 12px; stroke-width: 2; }
.login-heading { font-size: 1.5rem; font-weight: 800; text-align: center; letter-spacing: -0.02em; margin-bottom: 0.35rem; }
.login-sub { color: var(--muted); font-size: var(--fs-base); text-align: center; margin-bottom: var(--phi-3); }

.form-group { margin-bottom: var(--phi-2); }
.form-label {
  display: flex; align-items: center; gap: 0.35rem;
  font-size: 0.72rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.45rem;
}
.form-label .lucide { width: 12px; height: 12px; stroke-width: 2; }
.form-input {
  width: 100%; background: rgba(255,255,255,0.03);
  border: 1px solid var(--brd-sub); border-radius: var(--phi-1);
  padding: var(--phi-1) var(--phi-2); color: var(--text);
  font-family: 'Inter', sans-serif; font-size: var(--fs-base); transition: all 0.2s;
}
.form-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(139,92,246,0.18); }
.form-input::placeholder { color: var(--muted); }

.pass-wrap { position: relative; }
.pass-toggle {
  position: absolute; right: 0.85rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--muted); cursor: pointer; transition: color 0.2s;
  display: flex; align-items: center;
}
.pass-toggle:hover { color: var(--text); }
.pass-toggle .lucide { width: 16px; height: 16px; stroke-width: 1.75; }

.btn-login {
  width: 100%; padding: 0.9rem;
  background: linear-gradient(135deg, var(--primary), #6d28d9);
  color: #fff; border: none; border-radius: var(--phi-1);
  font-size: var(--fs-base); font-weight: 700; cursor: pointer;
  transition: all 0.3s; margin-top: var(--phi-1);
  box-shadow: 0 0 28px rgba(139,92,246,0.3);
  display: flex; align-items: center; justify-content: center; gap: var(--phi-1);
}
.btn-login .lucide { width: 16px; height: 16px; }
.btn-login:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 0 48px rgba(139,92,246,0.5); }
.btn-login:disabled { opacity: 0.55; pointer-events: none; }

.err-msg {
  display: none; align-items: center; gap: 0.45rem;
  background: rgba(248,113,113,0.08); border: 1px solid rgba(248,113,113,0.2);
  color: var(--error); font-size: 0.8rem; font-weight: 500;
  border-radius: var(--phi-1); padding: var(--phi-1) var(--phi-2); margin-top: var(--phi-2);
}
.err-msg .lucide { width: 14px; height: 14px; stroke-width: 2; flex-shrink: 0; }
.err-msg.show { display: flex; }

.back-link {
  display: flex; align-items: center; justify-content: center; gap: 0.35rem;
  text-align: center; margin-top: var(--phi-2); color: var(--muted);
  font-size: 0.8rem; text-decoration: none; transition: color 0.2s;
}
.back-link .lucide { width: 13px; height: 13px; }
.back-link:hover { color: var(--text); }

@keyframes spin { to { transform: rotate(360deg); } }
.btn-spin {
  display: inline-block; width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff;
  border-radius: 50%; animation: spin 0.7s linear infinite;
}