:root { color-scheme:light; font-family:Inter,"Segoe UI",Arial,sans-serif; --ink:#14213d; --muted:#687386; --line:#dce2ea; --blue:#2457d6; --blue-dark:#183f9f; }
* { box-sizing:border-box; }
body { min-height:100vh; margin:0; padding:24px; display:grid; place-items:center; color:var(--ink); background:radial-gradient(circle at 50% 0,#eaf0ff 0,transparent 42%),#f3f6fa; font-size:16px; }
.login-card { width:min(100%,420px); padding:34px; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 18px 55px rgba(20,33,61,.11); }
.brand-mark { width:44px; height:48px; display:grid; place-items:center; margin-bottom:24px; border-radius:6px 15px 6px 6px; color:#fff; background:#101c35; font-size:20px; font-weight:800; }
.eyebrow { margin:0 0 7px; color:var(--blue); font-size:12px; font-weight:850; letter-spacing:.13em; text-transform:uppercase; }
h1 { margin:0; font-size:36px; letter-spacing:-.035em; }
.intro { margin:8px 0 24px; color:var(--muted); line-height:1.5; }
.error { padding:10px 12px; border-radius:7px; color:#9d2118; background:#fff0ef; font-size:14px; }
form { display:grid; gap:16px; }
label { color:#344054; font-size:14px; font-weight:750; }
input { width:100%; min-height:46px; margin-top:7px; padding:10px 12px; border:1px solid #cdd5df; border-radius:8px; color:var(--ink); background:#fff; font:inherit; outline:none; }
input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(36,87,214,.13); }
button { min-height:48px; margin-top:4px; border:0; border-radius:8px; color:#fff; background:var(--blue); font:inherit; font-weight:800; cursor:pointer; }
button:hover { background:var(--blue-dark); }
.privacy { margin:22px 0 0; display:flex; align-items:center; justify-content:center; gap:8px; color:var(--muted); font-size:12px; text-align:center; }
.privacy span { width:8px; height:8px; flex:0 0 auto; border-radius:50%; background:#32b77d; }
@media (max-width:480px) { body { padding:14px; } .login-card { padding:24px 20px; border-radius:12px; } }