:root { --accent:#4f46e5; --accent-hover:#4338ca; --danger:#dc2626; --muted:#6b7280; --ink:#111827; --line:#e5e7eb; --bg:#f4f7fe; }
* { box-sizing:border-box; }
body { position:relative; display:grid; place-items:center; min-width:320px; min-height:100vh; margin:0; padding:28px; overflow-x:hidden; color:var(--ink); background:var(--bg); font:14px/1.55 Inter,system-ui,-apple-system,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; background-image:linear-gradient(rgba(99,102,241,.026) 1px,transparent 1px),linear-gradient(90deg,rgba(99,102,241,.026) 1px,transparent 1px); background-size:28px 28px; mask-image:linear-gradient(to bottom,#000,transparent 80%); }
.auth-glow { position:fixed; width:360px; height:360px; border-radius:50%; pointer-events:none; filter:blur(4px); }
.auth-glow-one { top:-180px; left:-100px; background:radial-gradient(circle,rgba(79,70,229,.17),transparent 68%); }
.auth-glow-two { right:-160px; bottom:-190px; background:radial-gradient(circle,rgba(13,148,136,.14),transparent 68%); }
.auth-card { position:relative; z-index:1; width:min(440px,100%); padding:35px 38px 28px; border:1px solid rgba(229,231,235,.8); border-radius:22px; background:rgba(255,255,255,.96); box-shadow:0 24px 65px rgba(15,23,42,.12); backdrop-filter:blur(14px); }
.auth-brand { display:flex; align-items:center; justify-content:center; margin-bottom:24px; color:var(--ink); text-decoration:none; }
.auth-brand:hover { color:var(--ink); }
.auth-brand img { display:block; width:210px; max-width:100%; height:auto; object-fit:contain; }
.auth-content > h1 { margin:0 0 8px; font-size:25px; line-height:1.2; letter-spacing:-.035em; text-align:center; }
.auth-content > p { margin:0 0 22px; color:var(--muted); text-align:center; }
form { margin-top:18px; }
label { display:block; margin:14px 0 6px; color:#374151; font-size:12px; font-weight:700; }
input,select { width:100%; min-height:45px; padding:10px 12px; border:1px solid #d1d5db; border-radius:11px; color:var(--ink); background:#fff; font:inherit; transition:border-color .18s ease,box-shadow .18s ease; }
input::placeholder { color:#9ca3af; }
input:hover,select:hover { border-color:#9ca3af; }
input:focus,select:focus { border-color:var(--accent); outline:0; box-shadow:0 0 0 3px rgba(79,70,229,.12); }
button,.button { display:inline-flex; align-items:center; justify-content:center; width:100%; min-height:46px; margin-top:20px; padding:11px 16px; border:1px solid var(--accent); border-radius:11px; color:#fff; background:var(--accent); box-shadow:0 8px 18px rgba(79,70,229,.2); font:700 14px Inter,system-ui,sans-serif; cursor:pointer; text-decoration:none; transition:all .2s ease; }
button:hover,.button:hover { border-color:var(--accent-hover); background:var(--accent-hover); box-shadow:0 11px 22px rgba(79,70,229,.25); transform:translateY(-1px); }
.secondary { border-color:#d1d5db; color:#4b5563; background:#fff; box-shadow:none; }
.secondary:hover { border-color:#c7c4f3; color:var(--accent); background:#f5f3ff; box-shadow:none; }
.errors,.errorlist { margin:6px 0; padding-left:19px; color:var(--danger); font-size:12px; }
.message { display:flex; gap:9px; margin:0 0 16px; padding:12px 13px; border:1px solid #a7f3d0; border-radius:11px; color:#065f46; background:#ecfdf5; font-size:13px; font-weight:600; }
.message::before { content:"✓"; font-weight:800; }
.message.error { border-color:#fecaca; color:#991b1b; background:#fef2f2; }
.message.error::before { content:"!"; }
.actions { margin-top:18px; text-align:center; }
.actions a { color:var(--accent); font-size:13px; font-weight:650; text-decoration:none; }
.actions a:hover { color:var(--accent-hover); text-decoration:underline; }
.hint { padding:12px 13px; border:1px solid #e0e7ff; border-radius:11px; color:#4b5563!important; background:#f8faff; font-size:12px; text-align:left!important; }
.otp-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
.otp-grid input { padding:10px 3px; text-align:center; font-size:20px; font-weight:800; }
.password-wrap { position:relative; }
.password-wrap input { padding-right:68px; }
.toggle { position:absolute; top:7px; right:7px; width:auto; min-height:31px; margin:0; padding:4px 9px; border-color:transparent; color:var(--accent); background:transparent; box-shadow:none; font-size:11px; }
.toggle:hover { color:var(--accent-hover); background:#f5f3ff; box-shadow:none; transform:none; }
.auth-footer { margin:26px -8px 0; padding-top:18px; border-top:1px solid var(--line); color:#9ca3af; font-size:10px; font-weight:600; letter-spacing:.04em; text-align:center; }
.login-heading { text-align:center; }
.login-heading p { margin:0 0 22px; color:var(--muted); }
.login-heading h1 { margin:0 0 7px; font-size:25px; letter-spacing:-.035em; }
.login-submit { gap:8px; }
.login-submit svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.login-options { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:14px; }
.login-options > a { flex:0 0 auto; color:var(--accent); font-size:13px; font-weight:650; text-decoration:none; }
.login-options > a:hover { color:var(--accent-hover); text-decoration:underline; }
.remember-login { display:inline-flex; align-items:center; gap:8px; min-width:0; margin:0; color:#374151; font-size:13px; font-weight:600; cursor:pointer; }
.remember-login input { flex:0 0 17px; width:17px; min-height:17px; margin:0; padding:0; border-radius:5px; accent-color:var(--accent); cursor:pointer; }
@media (max-width:520px) { body { padding:14px; } .auth-card { padding:28px 22px 23px; border-radius:19px; } .auth-brand { margin-bottom:24px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition-duration:.01ms!important; } }