*{box-sizing:border-box}
body{margin:0;font-family:system-ui,Segoe UI,Roboto,sans-serif;
background:#f4f6f8;display:flex;min-height:100vh;align-items:center;justify-content:center}
.card{background:#fff;padding:40px;border-radius:10px;box-shadow:0 2px 20px rgba(0,0,0,.08);width:340px}
h1{font-size:26px;margin:0 0 8px;color:#1a2b3c;text-align:center;letter-spacing:2px}
.sub{font-size:13px;color:#5a6b7c;text-align:center;margin:0 0 24px}
label{display:block;font-size:13px;color:#5a6b7c;margin:14px 0 6px}
input{width:100%;padding:10px 12px;border:1px solid #d4dae0;border-radius:6px;font-size:14px}
input:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.12)}
button{width:100%;margin-top:24px;padding:11px;background:#2563eb;color:#fff;border:0;
border-radius:6px;font-size:15px;cursor:pointer;transition:background .15s}
button:hover:not(:disabled){background:#1d4ed8}
button:disabled{background:#aebfd6;cursor:not-allowed}
.err{display:none;margin-top:16px;padding:10px 12px;background:#fdecea;color:#b3261e;
border:1px solid #f5c6c2;border-radius:6px;font-size:13px;text-align:center}
.foot{text-align:center;margin-top:18px;font-size:12px;color:#9aa7b4;line-height:1.8}
.foot a{color:#5a6b7c;text-decoration:none}
.foot a:hover{text-decoration:underline}

@media (prefers-color-scheme: dark){
  body{background:#0f172a}
  .card{background:#1e293b;box-shadow:0 2px 20px rgba(0,0,0,.45)}
  h1{color:#e2e8f0}
  .sub{color:#94a3b8}
  label{color:#94a3b8}
  input{background:#0f172a;border-color:#334155;color:#e2e8f0}
  input::placeholder{color:#64748b}
  input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.25)}
  button:disabled{background:#334155;color:#64748b}
  .err{background:#2a1416;color:#f5a3a3;border-color:#7f1d1d}
  .foot{color:#64748b}
  .foot a{color:#94a3b8}
}