:root{--brand:#1e3a8a;--ink:#111827;--muted:#6b7280;--surface:#ffffff;--bg:#f8fafc;--shadow:0 10px 30px rgba(17,24,39,.12);--radius:18px}
*{box-sizing:border-box}html,body{height:100%}
body.auth{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:linear-gradient(180deg,#f0f5ff 0%, #f8fafc 100%)}
.bg{position:fixed;inset:0;background-image:radial-gradient(1000px 600px at 10% -10%, rgba(30,58,138,.08), transparent), radial-gradient(900px 500px at 110% 110%, rgba(30,58,138,.06), transparent);pointer-events:none}
.card{position:relative;max-width:420px;margin:6vh auto;background:var(--surface);padding:26px 26px 18px;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid #e5e7eb}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.brand img{height:26px}
.brand .product{font-weight:800;color:var(--brand);letter-spacing:.06em}
h1{margin:0 0 14px 0;font-size:22px;letter-spacing:.02em}
.form{display:flex;flex-direction:column;gap:12px}
.field span{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
.field input{width:100%;padding:12px;border:1px solid #d1d5db;border-radius:12px;outline:none;transition:.15s;background:#fff}
.field input:focus{border-color:#94a3b8;box-shadow:0 0 0 3px rgba(30,58,138,.12)}
.invalid{color:#b91c1c;font-size:12px;height:14px}
.check{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:12px;border:1px solid var(--brand);padding:11px 14px;font-weight:600}
.btn.primary{background:var(--brand);color:#fff}
.btn[disabled]{opacity:.6;pointer-events:none}
.wfull{width:100%}
.sub{margin-top:8px;text-align:center}
.sub a{color:var(--muted);text-decoration:none}
.sub a:hover{text-decoration:underline}
.foot{margin-top:10px;text-align:center;color:var(--muted);font-size:12px}
.pwd{display:flex;align-items:center;gap:8px}.pwd input{flex:1}
.eye{width:38px;height:38px;border-radius:10px;border:1px solid #e5e7eb;background:#f8fafc;cursor:pointer;position:relative}
.eye:after{content:"";position:absolute;inset:0;background:no-repeat center/18px url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" stroke="%23111827" fill="none" stroke-width="2" viewBox="0 0 24 24"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7Z"/><circle cx="12" cy="12" r="3"/></svg>');opacity:.8}
.eye.active:after{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" stroke="%23111827" fill="none" stroke-width="2" viewBox="0 0 24 24"><path d="M3 3l18 18m-3.53-3.53C15.9 18.2 14.02 19 12 19 5 19 1 12 1 12a21.8 21.8 0 0 1 6.64-6.53"/><path d="M14.12 14.12A3 3 0 0 1 9.88 9.88"/></svg>')}