:root{
  --bg:#f3f4f6;
  --card:#ffffff;
  --muted:#6b7280;
  --primary:#2563eb;
  --danger:#dc2626;
  --radius:12px;
  --shadow:0 6px 18px rgba(16,24,40,0.08);
  font-size:16px;
}
*{box-sizing:border-box}
html,body{height:100%;}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:linear-gradient(180deg,var(--bg),#eef2ff);
  color:#0f172a;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem;
}
.card{
  width:100%;
  max-width:420px;
  background:var(--card);
  padding:2rem;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
h1{margin:0 0 1.25rem 0;font-size:1.25rem}
label{display:block;margin-top:.75rem;color:var(--muted);font-size:.9rem}
input[type="email"],input[type="password"]{
  width:100%;
  padding:.65rem .7rem;
  margin-top:.35rem;
  border:1px solid #e6e9ef;
  border-radius:8px;
  font-size:1rem;
}
.password-row{display:flex;gap:.5rem;align-items:center}
.password-row input{flex:1}
#toggle-password{background:transparent;border:1px solid #e6e9ef;padding:.4rem .6rem;border-radius:8px;cursor:pointer}
.checkbox{display:flex;align-items:center;gap:.5rem;margin-top:.8rem;color:var(--muted);font-size:.95rem}
.primary{display:inline-block;margin-top:1rem;width:100%;background:var(--primary);color:white;padding:.8rem;border-radius:10px;border:0;cursor:pointer;font-weight:600}
.primary:active{transform:translateY(1px)}
#message{margin-top:1rem;color:var(--danger)}
.hint{font-size:.85rem;color:var(--muted);margin-top:1rem}

@media (prefers-color-scheme: dark){
  :root{--bg:#0b1220;--card:#071027;--muted:#9aa6b2;--primary:#60a5fa}
  body{background:linear-gradient(180deg,var(--bg),#071329);color:#e6eef8}
  input, #toggle-password{background:#02203a;border-color:#12324a;color:inherit}
}