:root{color-scheme:light dark}*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center;
  font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:#f7f8fa;color:#1c2430;padding:1rem}
@media(prefers-color-scheme:dark){body{background:#10151d;color:#e6ecf4}
  .card{background:#171e29 !important;border-color:#283242 !important}
  input[name=user],input[name=pass]{background:#10151d !important;color:#e6ecf4 !important;border-color:#283242 !important}}
.card{width:100%;max-width:22rem;background:#fff;border:1px solid #e3e8ef;border-radius:1rem;
  padding:2rem 1.6rem;box-shadow:0 10px 40px rgba(16,24,40,.12);text-align:center}
.logo{font-size:2.4rem}h1{margin:.3rem 0 .1rem;font-size:1.4rem}.sub{margin:0 0 1.2rem;color:#5a6b80}
label{display:block;text-align:left;margin:.7rem 0;font-size:.9rem;font-weight:600}
input[name=user],input[name=pass]{width:100%;margin-top:.3rem;padding:.6rem .8rem;font-size:1rem;
  border:1px solid #cdd6e2;border-radius:.6rem;background:#fff;color:inherit}
input:focus{outline:2px solid #0b6bcb;border-color:#0b6bcb}
.check{display:flex;align-items:center;gap:.5rem;font-weight:400;flex-wrap:wrap}
.check input{width:auto;margin:0;min-width:20px;min-height:20px}.hint{color:#5a6b80;font-size:.82rem}
button{width:100%;margin-top:1.1rem;padding:.75rem;font-size:1rem;font-weight:700;color:#fff;
  background:#0b6bcb;border:none;border-radius:.6rem;cursor:pointer}button:hover{background:#0959ab}
.err{background:#fdecec;color:#a11;border:1px solid #f5c2c2;border-radius:.5rem;padding:.5rem .7rem;font-size:.9rem}
@media(prefers-color-scheme:dark){.err{background:#3a1e1e;border-color:#5a2a2a;color:#f3b0b0}}