:root{--navy:#0f172a;--blue:#2563eb;--muted:#64748b;--border:#dbe3ef;--surface:#fff;--danger:#b91c1c}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;font-family:Arial,sans-serif;color:var(--navy);background:radial-gradient(circle at 15% 10%,#dbeafe 0,transparent 32%),linear-gradient(135deg,#f8fafc,#e9eff7);display:grid;place-items:center;padding:20px}
.auth-shell{width:min(100%,440px)}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:18px}.brand-mark{width:46px;height:46px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(135deg,#2563eb,#172554);color:#fff;font-size:22px;box-shadow:0 10px 24px rgba(37,99,235,.24)}
.brand-name{font-size:20px;font-weight:800}.brand-subtitle{font-size:12px;color:var(--muted);margin-top:3px}
.auth-card{background:rgba(255,255,255,.96);border:1px solid rgba(219,227,239,.9);border-radius:22px;padding:30px;box-shadow:0 24px 60px rgba(15,23,42,.14)}
h1{font-size:25px;margin:0 0 7px;letter-spacing:-.03em}.intro{color:var(--muted);font-size:14px;line-height:1.5;margin:0 0 24px}
.field{margin-bottom:16px}.field label{display:block;font-size:13px;font-weight:700;margin-bottom:7px}.input-wrap{position:relative}.input{width:100%;height:48px;border:1px solid var(--border);border-radius:11px;padding:0 13px;font-size:15px;background:#fff;color:var(--navy);outline:none;transition:.2s}.input:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(37,99,235,.12)}
.password-input{padding-right:74px}.toggle-password{position:absolute;right:7px;top:7px;height:34px;border:0;border-radius:8px;background:#f1f5f9;color:#334155;font-weight:700;font-size:12px;padding:0 10px;cursor:pointer}
.button{width:100%;height:48px;border:0;border-radius:11px;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;font-size:15px;font-weight:750;cursor:pointer;box-shadow:0 10px 22px rgba(37,99,235,.22)}.button:hover{filter:brightness(.97)}
.alert{padding:11px 12px;border-radius:10px;background:#fef2f2;border:1px solid #fecaca;color:var(--danger);font-size:13px;margin-bottom:18px;line-height:1.4}
.security-note{display:flex;align-items:flex-start;gap:8px;color:var(--muted);font-size:12px;line-height:1.45;margin-top:18px}.security-note span:first-child{font-size:15px}
.setup-key{padding:13px;background:#f8fafc;border:1px dashed #94a3b8;border-radius:11px;text-align:center;font-family:monospace;font-size:16px;font-weight:700;letter-spacing:.08em;word-break:break-all;margin:14px 0}.steps{padding-left:20px;color:#475569;font-size:13px;line-height:1.6}
.code-input{text-align:center;font-size:23px;letter-spacing:.25em;font-weight:750}.secondary-link{display:block;text-align:center;margin-top:14px;color:#475569;font-size:13px;text-decoration:none}.recovery-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:18px 0}.recovery-code{padding:9px;border-radius:8px;background:#f1f5f9;text-align:center;font-family:monospace;font-weight:700;font-size:13px}
.authenticator-link{display:block;text-align:center;margin:-2px 0 16px;padding:10px;border:1px solid #bfdbfe;border-radius:10px;background:#eff6ff;color:#1d4ed8;font-size:13px;font-weight:700;text-decoration:none}
@media(max-width:480px){body{padding:12px;align-items:start;padding-top:7vh}.auth-card{padding:22px;border-radius:18px}.brand{margin-left:4px}.recovery-grid{grid-template-columns:1fr}h1{font-size:22px}}