:root{color-scheme:light;font-family:system-ui,-apple-system,Roboto,Arial,sans-serif;--bg:#f4f6fa;--paper:#fff;--text:#17223a;--muted:#66758e;--line:#dce4ee;--accent:#2563eb}*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:var(--bg);display:grid;place-items:center;padding:24px;color:var(--text)}.login-box{background:var(--paper);border:1px solid var(--line);box-shadow:0 25px 80px #192d4a16;border-radius:18px;width:min(100%,470px);overflow:hidden}header{display:flex;align-items:center;gap:14px;padding:26px 34px;border-bottom:1px solid var(--line)}header b{display:block;font-size:21px}header small{font-size:12px;color:var(--muted)}.logo{width:44px;height:44px;display:grid;place-items:center;font-size:23px;font-weight:800;border-radius:12px;background:#2563eb;color:#fff}main{padding:30px 34px}h1{font-size:28px;letter-spacing:-.7px;margin:0 0 15px}.eyebrow{color:var(--accent);font-weight:700;font-size:12px;letter-spacing:1px;text-transform:uppercase}.lead{font-size:14px;line-height:1.6;color:var(--muted);margin-bottom:26px}label{display:block;font-size:13px;font-weight:650;margin:16px 0 7px}input:not(.otp){width:100%;height:46px;border-radius:9px;border:1px solid var(--line);padding:10px 12px;background:var(--paper);color:var(--text);font:inherit}input:focus{outline:2px solid #93b5fa;outline-offset:1px}button{width:100%;height:45px;margin-top:22px;border-radius:9px;border:0;background:var(--accent);color:#fff;font-size:14px;font-weight:700;cursor:pointer}button:hover{filter:brightness(.94)}footer{border-top:1px solid var(--line);text-align:center;padding:18px;color:var(--muted);font-size:12px}.otp-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:23px 0 9px}.otp{height:57px;min-width:0;text-align:center;font-weight:700;font-size:26px;border:1px solid var(--line);border-radius:9px;color:var(--text);background:var(--paper)}.otp:focus{border-color:var(--accent)}.qr{text-align:center;margin:22px 0}.qr img{width:214px;height:214px;max-width:100%;image-rendering:pixelated}.hint{color:var(--muted);font-size:12px}.recover{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.recover code{padding:10px;background:var(--bg);font-size:13px;border-radius:6px;text-align:center}.error{padding:12px;border-radius:8px;background:#fee2e2;color:#9f1239;font-size:13px}details{border-top:1px solid var(--line);margin-top:25px;padding-top:18px;color:var(--muted);font-size:13px}summary{cursor:pointer}@media(prefers-color-scheme:dark){:root{--bg:#151920;--paper:#20262f;--text:#eff3f8;--muted:#afbacb;--line:#3b4757;--accent:#4f90fb}.recover code{background:#2c3542}.error{background:#48252e;color:#ffb7c8}}@media(max-width:440px){body{padding:10px}.login-box{border-radius:12px}main,header{padding:23px 20px}.otp-row{gap:5px}.otp{height:49px;font-size:23px}}
/* Refined Zahаr login */
:root{--bg:#f4f5f7;--text:#252c36;--muted:#777f8c;--line:#e3e7ec;--accent:#374e67}
body{background:radial-gradient(ellipse at 50% 10%,#fff 0%,#f4f5f7 55%,#eff1f4 100%)}
.login-box{width:min(100%,420px);border:1px solid #e6e9ed;border-radius:22px;box-shadow:0 24px 72px #21334b0d,0 2px 10px #21334b05}
header{padding:29px 34px 8px;border-bottom:0;gap:13px}
header b{font-size:18px;letter-spacing:-.3px}
.logo{width:38px;height:38px;background:#334253;border-radius:12px;font-weight:650;font-size:20px}
main{padding:24px 34px 37px}
.eyebrow{font-size:10px;letter-spacing:1.2px;color:#89929c}
h1{font-size:29px;font-weight:650;letter-spacing:-.9px;margin:8px 0 14px}
.lead{line-height:1.7;margin:0 0 27px}
input:not(.otp){height:49px;border-radius:11px;padding:12px 14px;background:var(--paper)}
button{height:47px;border-radius:11px;font-weight:650}
footer{font-size:11px;padding:19px}
.error{background:#fff4ed;color:#87583a;border:1px solid #f0dfd2;border-radius:10px;line-height:1.6}
.back-link{display:inline-block;color:var(--accent);text-decoration:none;font-size:13px}
@media(prefers-color-scheme:dark){:root{--bg:#181d23;--paper:#252b32;--text:#edf0f4;--muted:#abb5c1;--line:#3b4653;--accent:#536f8c}body{background:radial-gradient(ellipse at 50% 10%,#2b333e 0%,#181d23 80%)}.login-box{border-color:#404b58}.logo{background:#506176}input:not(.otp){background:#202731}.error{background:#3b3130;color:#ecc9b8;border-color:#62483c}}
@media(max-width:440px){header{padding:24px 23px 4px}main{padding:23px 23px 30px}}

.security-status{display:flex;justify-content:space-between;gap:12px;margin:13px 0;padding:13px 0;border-bottom:1px solid var(--line);font-size:13px}.security-status span{color:var(--muted)}.security-link{display:block;text-align:center;padding:12px;border-radius:10px;margin-top:14px;color:var(--accent);border:1px solid var(--line);text-decoration:none;font-size:13px}.security-secondary{border:0}