:root{
  --bg:#f5f6f7;
  --surface:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --brand:#0b2a4a;
  --accent:#f2c94c;
  --border:#d8dee6;
  --danger:#b91c1c;
  --shadow:0 14px 34px rgba(17,24,39,.10);
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Arial;
  background:var(--bg);
  color:var(--text);
}

.page{min-height:100vh;display:grid;place-items:center;padding:24px}
.card{
  width:min(420px,100%);
  background:var(--surface);
  border:1px solid rgba(11,42,74,.18);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:22px;
}
.accent{position:fixed;inset:0 0 auto 0;height:4px;background:var(--accent)}
.brand{font-weight:900;color:var(--brand);margin-bottom:6px}
h1{margin:0;font-size:24px;color:var(--brand)}
.muted{margin:8px 0 16px;color:var(--muted);font-size:14px}
label{display:block;margin:0 0 8px;font-size:13px;font-weight:700;color:#334155}
input{
  width:100%;padding:11px 12px;border-radius:12px;border:1px solid var(--border);
  font-size:16px;outline:none;transition:border-color .12s,box-shadow .12s;
}
input:focus{border-color:#7ca0c7;box-shadow:0 0 0 4px rgba(11,42,74,.08)}
button{
  margin-top:12px;width:100%;padding:11px 14px;border:0;border-radius:12px;
  background:var(--brand);color:#fff;font-weight:800;font-size:15px;cursor:pointer;
}
button:hover{filter:brightness(1.05)}
.error{min-height:20px;margin:10px 0 0;color:var(--danger);font-size:13px}