:root{--bg:#f2f7f6;--card:#fff;--tx:#0e2a28;--mut:#53706d;--ac:#0b7a75;--bd:#cfe0de;--er:#b3261e}
@media (prefers-color-scheme:dark){:root{--bg:#0c1716;--card:#13241f;--tx:#e6f2f0;--mut:#9bb8b4;--ac:#3cc4b9;--bd:#27403c;--er:#ff8a80}}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--tx);font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;display:flex;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom))}
.box{width:100%;max-width:400px;background:var(--card);border:1px solid var(--bd);border-radius:18px;padding:28px 22px;text-align:center}
.logo{border-radius:14px}
h1{font-size:1.4rem;margin:12px 0 4px}
.sub{margin:0 0 18px;color:var(--mut)}
form{text-align:left;display:flex;flex-direction:column;gap:6px}
label{font-size:.85rem;font-weight:600;margin-top:8px}
input{font:inherit;font-size:1.1rem;padding:12px;border:1px solid var(--bd);border-radius:10px;background:transparent;color:var(--tx);width:100%;letter-spacing:.04em}
input:focus{outline:2px solid var(--ac);outline-offset:1px}
.btn{font:inherit;font-weight:600;background:var(--ac);color:#fff;border:0;border-radius:10px;padding:13px;margin-top:14px;width:100%;cursor:pointer}
@media (prefers-color-scheme:dark){.btn{color:#04201d}}
.btn.alt{background:transparent;color:var(--ac);border:1px solid var(--ac);margin:0 0 14px}
.btn:disabled{opacity:.6}
.err{color:var(--er);min-height:1.2em;font-size:.9rem}
.hint{font-size:.82rem;color:var(--mut);margin:16px 0 8px}
.staff{font-size:.8rem;color:var(--mut)}