:root { color-scheme: light; --ink:#0b1c31; --muted:#667383; --line:#d7dee6; --paper:#f3f7fb; --accent:#098cff; --accent-hover:#0877dc; --red:#ae2d2d; --red-bg:#fbe9e7; --ring:#168fff; --sans:"Manrope",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace; }
* { box-sizing: border-box; }
body { margin:0; min-width:320px; min-height:100dvh; background:var(--paper); color:var(--ink); font-family:var(--sans); display:grid; place-items:center; }
.login-shell { width:100%; padding:24px; }
.login-card { width:min(420px,100%); margin:auto; padding:32px; border:1px solid var(--line); border-top:3px solid var(--accent); border-radius:12px; background:#fff; box-shadow:0 20px 60px rgba(20,25,30,.09); }
.login-logo { display:block; width:min(260px,80%); height:auto; margin:0 0 30px; }
.eyebrow { margin:0 0 5px; color:var(--muted); text-transform:uppercase; letter-spacing:.11em; font:600 10px var(--mono); }
h1 { margin:0 0 18px; font-size:30px; letter-spacing:-.04em; }
.intro { margin:8px 0 24px; color:var(--muted); font-size:13px; }
form { display:grid; gap:8px; }
label { margin-top:7px; font-size:12px; font-weight:700; }
input { width:100%; min-height:46px; padding:10px 12px; border:1px solid #bcc3ca; border-radius:6px; background:#fbfbfc; color:var(--ink); font:14px var(--sans); }
input:focus-visible,button:focus-visible { outline:3px solid var(--ring); outline-offset:2px; }
button { min-height:46px; margin-top:14px; border:1px solid var(--accent); border-radius:6px; background:var(--accent); color:#fff; cursor:pointer; font:700 13px var(--sans); }
button:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
.error { margin-bottom:12px; padding:10px 12px; border-radius:6px; background:var(--red-bg); color:var(--red); font-size:12px; }
@media (max-width:480px) { .login-shell{padding:16px}.login-card{padding:24px} }