:root { --paper:#f4f3ef; --surface:#fff; --ink:#171a1d; --muted:#667078; --line:#cfd3d4; --blue:#175cd3; --red:#b42318; }
* { box-sizing:border-box; } body { min-height:100vh; margin:0; background:var(--paper); color:var(--ink); font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.login-page { display:grid; min-height:100vh; padding:22px; place-items:center; }.login-panel { width:min(100%,440px); padding:34px; border:1px solid var(--ink); background:var(--surface); box-shadow:0 14px 42px rgba(23,26,29,.12); }.brand { display:inline-flex; align-items:center; gap:9px; color:var(--ink); font-size:14px; text-decoration:none; }.brand span { display:grid; width:32px; height:32px; place-items:center; background:var(--ink); color:white; font:700 9px/1 ui-monospace,monospace; letter-spacing:.08em; }.eyebrow { margin:31px 0 8px; color:var(--muted); font:700 10px/1 ui-monospace,monospace; letter-spacing:.1em; text-transform:uppercase; }.login-panel h1 { margin:0; font-size:29px; line-height:1.08; letter-spacing:-.035em; }.intro,.hint { color:var(--muted); }.intro { margin:12px 0 23px; }.hint { margin:17px 0 0; font-size:12px; }.capture-link { display:inline-block; margin-top:26px; color:var(--blue); font-size:13px; font-weight:700; text-decoration:none; } form { display:grid; gap:14px; } label { display:grid; gap:6px; font-size:12px; font-weight:700; } input { min-height:44px; padding:9px 11px; border:1px solid var(--line); border-radius:7px; background:white; color:var(--ink); } input:focus-visible,button:focus-visible,a:focus-visible { outline:2px solid var(--blue); outline-offset:2px; } button { min-height:44px; border:1px solid var(--blue); border-radius:7px; background:var(--blue); color:white; font:700 14px/1 inherit; cursor:pointer; } button:disabled { opacity:.65; cursor:wait; }.error { margin:0; color:var(--red); font-size:13px; } @media (max-width:480px) { .login-page { padding:0; }.login-panel { min-height:100vh; padding:28px 21px; border:0; box-shadow:none; } }