:root{--bg:#070B16;--panel:#0E1426;--line:rgba(255,255,255,.09);--ink:#F1F5F9;--mut:#94A3B8;--b:#3B82F6;--b2:#A78BFA;--bad:#F87171;--ok:#4ADE80}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:#93C5FD}
:focus-visible{outline:2px solid #93C5FD;outline-offset:2px;border-radius:8px}
.auth{min-height:100%;display:grid;place-items:center;padding:28px;position:relative;overflow:hidden}
.gauge{position:absolute;width:1100px;height:1100px;left:50%;top:58%;transform:translate(-50%,-50%);pointer-events:none;opacity:.9}
.gauge circle{fill:none;stroke-linecap:round}
.gauge .track{stroke:rgba(148,163,184,.08);stroke-width:26}
.gauge .ticks{stroke:rgba(148,163,184,.18);stroke-width:14;stroke-dasharray:2 34}
.gauge .needle{stroke:url(#g);stroke-width:26;stroke-dasharray:0 3000;animation:rev 1.6s cubic-bezier(.2,.8,.2,1) .2s forwards}
@keyframes rev{to{stroke-dasharray:1180 3000}}
@media (prefers-reduced-motion:reduce){.gauge .needle{animation:none;stroke-dasharray:1180 3000}}
.card{position:relative;width:100%;max-width:400px;background:linear-gradient(180deg,rgba(20,28,52,.92),rgba(10,15,30,.96));border:1px solid var(--line);border-radius:22px;padding:34px 30px 26px;box-shadow:0 30px 80px -30px rgba(59,130,246,.45)}
.mark{display:flex;align-items:center;gap:10px;margin-bottom:26px}
.mark b{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,var(--b),var(--b2));font-weight:800;font-size:14px}
.mark span{font-weight:700;letter-spacing:-.01em}
h1{font-size:28px;line-height:1.15;letter-spacing:-.02em;font-weight:800;margin-bottom:8px}
.lead{color:var(--mut);font-size:15px;line-height:1.5;margin-bottom:24px}
label{display:block;font-size:13px;font-weight:600;margin:14px 0 6px;color:#CBD5E1}
input{width:100%;padding:13px 14px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink);font:inherit;font-size:15px}
input:focus{border-color:rgba(147,197,253,.7);outline:none;box-shadow:0 0 0 3px rgba(59,130,246,.25)}
.row{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:13px}
.row label{display:flex;gap:8px;align-items:center;margin:0;font-weight:500;color:var(--mut)}
.row input{width:auto}
button{width:100%;margin-top:22px;padding:14px;border:0;border-radius:12px;background:var(--b);color:#fff;font:inherit;font-weight:700;font-size:15px;cursor:pointer}
button:hover{filter:brightness(1.1)}
button[disabled]{opacity:.6;cursor:wait}
.link{background:none;border:0;padding:0;margin:0;width:auto;color:#93C5FD;font-weight:600;font-size:13px}
.msg{margin-top:14px;font-size:14px;line-height:1.45;min-height:20px}
.msg.bad{color:var(--bad)}.msg.ok{color:var(--ok)}
.foot{margin-top:22px;font-size:12px;color:#64748B;line-height:1.5}
/* app shell */
.bar{height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid var(--line);background:var(--bg)}
.bar .mark{margin:0}.bar .mark b{width:30px;height:30px;font-size:12px}
.bar nav{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--mut)}
.bar button{width:auto;margin:0;padding:8px 14px;font-size:13px;background:rgba(255,255,255,.06);border:1px solid var(--line)}
.frame{width:100%;height:calc(100% - 52px);border:0;display:block;background:var(--bg)}
.state{height:calc(100% - 52px);display:grid;place-items:center;text-align:center;padding:24px;color:var(--mut)}
.state h2{color:var(--ink);font-size:20px;margin-bottom:8px}
.spin{width:34px;height:34px;border-radius:50%;border:3px solid rgba(148,163,184,.2);border-top-color:var(--b);animation:sp 1s linear infinite;margin:0 auto 14px}
@keyframes sp{to{transform:rotate(360deg)}}
@media (max-width:520px){.card{padding:28px 20px 22px}h1{font-size:24px}.bar nav span{display:none}}
.mark img.logo{width:36px;height:36px;border-radius:10px;object-fit:cover}
.bar .mark img.logo{width:30px;height:30px}
.link.back{display:block;margin:14px auto 0;font-size:14px}
[hidden]{display:none!important}