:root{--bg:#fff;--fg:#0a0a0a;--mut:#666;--bd:#d9d9d9;--st:#f3f3f3;--err:#c0262d}
@media(prefers-color-scheme:dark){:root{--bg:#0b0b0c;--fg:#f4f4f5;--mut:#9a9aa0;--bd:#2c2c30;--st:#17171a;--err:#ff7b80}}

*{box-sizing:border-box}
html,body{height:100%;margin:0}

body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    
    background:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)),url('/login-bg.jpg') center/cover no-repeat fixed;color:var(--fg);
    
    display:flex;align-items:center;justify-content:center;padding:20px}
.card{width:100%;max-width:380px;background:var(--bg);border:1px solid var(--bd);border-radius:16px;padding:28px 24px;box-shadow:0 10px 40px -20px rgba(0,0,0,.35)}
.brand{font-size:24px;font-weight:800;letter-spacing:-.02em;margin:0 0 4px}.brand span{font-weight:300}
.sub{color:var(--mut);font-size:13px;margin:6px 0 22px}
label{display:block;font-size:12px;font-weight:600;color:var(--mut);margin-bottom:14px}
input{display:block;width:100%;margin-top:6px;padding:12px;border:1px solid var(--bd);border-radius:10px;background:var(--bg);color:var(--fg);font:inherit;font-size:16px}
input:focus{outline:2px solid var(--fg);outline-offset:1px}
.pw{position:relative}.pw input{padding-right:64px}
.pw button{position:absolute;right:6px;bottom:6px;height:34px;padding:0 10px;border:0;border-radius:8px;background:none;color:var(--mut);font:inherit;font-size:12px;font-weight:600;cursor:pointer}
#go{width:100%;padding:13px;border:0;border-radius:10px;background:var(--fg);color:var(--bg);font:inherit;font-weight:700;font-size:15px;cursor:pointer;margin-top:4px}
#go:disabled{opacity:.55;cursor:wait}
#err{min-height:20px;margin:12px 0 0;font-size:13px;color:var(--err)}
.foot{margin:18px 0 0;text-align:center;font-size:11px;color:var(--mut)}

.card{background:rgba(255,255,255,.9);backdrop-filter:blur(8px)}
@media(prefers-color-scheme:dark){.card{background:rgba(11,11,12,.88)}}