:root{--bg:#f6f7f8;--card:#fff;--fg:#0f1214;--mute:#5d6570;--line:#e3e6ea;--input:#d6dbe0;--accent:#1a7894;--bad:#b42318;--badsoft:#fef3f2;color-scheme:light}
@media (prefers-color-scheme:dark){:root{--bg:#0d1012;--card:#15191c;--fg:#eef1f3;--mute:#9aa3ab;--line:#262c31;--input:#343b41;--accent:#4fb3cf;--bad:#f97066;--badsoft:#2a1513;color-scheme:dark}}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;min-height:100svh;background:var(--bg);color:var(--fg);font:15px/1.5 "Geist","Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
.page{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:32px max(16px,env(safe-area-inset-right)) 48px max(16px,env(safe-area-inset-left))}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:16px}
.logo{width:30px;height:30px;border-radius:9px;background:var(--fg);color:var(--bg);display:grid;place-items:center;font-size:17px}
.card{width:min(400px,100%);background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px;display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(16,24,40,.04),0 12px 32px rgba(16,24,40,.06)}
h1{margin:0;font-size:24px;font-weight:600;letter-spacing:-.02em}
.sub{margin:4px 0 22px;color:var(--mute)}
label{font-size:13.5px;font-weight:500;margin:0 0 6px}
input{width:100%;height:44px;border:1px solid var(--input);border-radius:11px;padding:0 13px;font:inherit;font-size:16px;background:var(--card);color:var(--fg);margin-bottom:16px}
input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.pw{position:relative}
.pw input{padding-right:70px}
.show{position:absolute;right:6px;top:6px;height:32px;padding:0 10px;border:none;background:transparent;color:var(--mute);font:inherit;font-size:13px;font-weight:500;border-radius:8px;cursor:pointer}
.show:hover{background:var(--bg);color:var(--fg)}
.err{margin:-4px 0 14px;padding:10px 12px;border-radius:10px;background:var(--badsoft);color:var(--bad);font-size:14px}
.go{height:46px;border:none;border-radius:11px;background:var(--fg);color:var(--bg);font:inherit;font-weight:600;font-size:15px;cursor:pointer;transition:transform .15s,box-shadow .15s}
.go:hover{transform:translateY(-1px);box-shadow:0 8px 24px color-mix(in srgb,var(--accent) 30%,transparent)}
.go[disabled]{opacity:.6;cursor:default;transform:none;box-shadow:none}
.help{margin:16px 0 0;text-align:center;color:var(--mute);font-size:13.5px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}