:root { --navy: #0B2F63; --blue: #1C5BB8; --ink: #1D2633; --muted: #5B6676; --line: #D5DCE6; --bg: #EEF2F7; --bad: #B42318; --bad-l: #FDECEA; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font: 14px/1.45 "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: var(--ink); background: var(--bg); }
.strip { background: var(--navy); color: #fff; height: 44px; display: flex; align-items: center; gap: 14px; padding: 0 16px; }
.strip .brand { font-weight: 600; letter-spacing: .2px; }
.strip .sub { opacity: .75; font-size: 12px; }
.card { max-width: 400px; margin: 48px auto; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 24px 24px 18px; box-shadow: 0 6px 24px rgba(11,47,99,.12); }
@media (max-width: 440px) { .card { margin: 24px 16px; padding: 20px 16px 16px; } }
h1 { font-size: 18px; margin: 0 0 6px; color: var(--navy); }
.intro { margin: 0 0 14px; color: var(--muted); font-size: 13px; }
label { display: block; font-size: 12px; font-weight: 600; margin: 12px 0 4px; }
input { width: 100%; padding: 9px 10px; font: inherit; font-size: 15px; border: 1px solid var(--line); border-radius: 4px; }
input:focus { outline: 2px solid var(--blue); outline-offset: 0; border-color: var(--blue); }
.pw { display: flex; gap: 6px; } .pw input { flex: 1; min-width: 0; }
.btn { font: inherit; border-radius: 4px; padding: 8px 12px; cursor: pointer; border: 1px solid var(--line); background: #fff; color: var(--ink); }
.btn.primary { width: 100%; margin-top: 18px; background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }
.btn.primary:disabled { opacity: .7; cursor: default; }
.error { margin: 12px 0 0; padding: 8px 10px; background: var(--bad-l); color: var(--bad); border-radius: 4px; font-size: 13px; }
.foot { margin: 16px 0 0; font-size: 11px; color: var(--muted); text-align: center; }