:root { --ink:#10264c; --muted:#52688c; --line:rgba(16,38,76,.14); --blue:#5a93f8; --navy:#0b1933; }
* { box-sizing:border-box; }
body { margin:0; background:radial-gradient(circle at 12% 10%,rgba(143,182,255,.27),transparent 30%),linear-gradient(180deg,#f8fcff 0,#eaf2ff 100%); color:var(--ink); font-family:Manrope,Arial,sans-serif; }
a { color:inherit; }
main { margin:auto; max-width:1120px; min-height:calc(100vh - 170px); padding:0 24px; }
h1,h2 { font-family:"Space Grotesk",Manrope,sans-serif; letter-spacing:-.04em; }
.login-shell { align-items:center; display:grid; gap:72px; grid-template-columns:1fr .82fr; padding:72px 0 82px; }
.eyebrow,.card-eyebrow { color:#4f7fcf; font-size:11px; font-weight:800; letter-spacing:.16em; margin:0 0 14px; text-transform:uppercase; }
h1 { font-size:clamp(50px,7vw,78px); line-height:1; margin:0; }
.login-context > p:not(.eyebrow) { color:var(--muted); font-size:18px; line-height:1.72; margin:24px 0 0; max-width:590px; }
.access-points { border-top:1px solid var(--line); display:grid; gap:0; margin-top:38px; }
.access-points > div { border-bottom:1px solid var(--line); display:grid; grid-template-columns:34px 1fr; padding:17px 0; }
.access-points span { color:#729ce2; font-size:10px; font-weight:800; padding-top:3px; }
.access-points strong { font-size:14px; }
.access-points p { color:var(--muted); font-size:12px; grid-column:2; line-height:1.55; margin:5px 0 0; }
.login-card { background:#fff; border:1px solid var(--line); border-radius:28px; box-shadow:0 30px 85px rgba(9,21,45,.18); padding:38px; }
.lock-icon { align-items:center; background:linear-gradient(145deg,#edf4ff,#dce9ff); border:1px solid rgba(90,147,248,.22); border-radius:16px; color:#315f9e; display:flex; height:54px; justify-content:center; margin-bottom:24px; width:54px; }
.lock-icon svg { height:28px; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.7; width:28px; }
.login-card h2 { font-size:36px; margin:0; }
.card-intro { color:var(--muted); font-size:13px; line-height:1.6; margin:10px 0 24px; }
.login-error { background:#fff0f0; border:1px solid #edc1c1; border-radius:10px; color:#8c2929; display:none; font-size:12px; line-height:1.5; margin-bottom:16px; padding:10px 12px; }
.login-error.visible { display:block; }
form { display:grid; gap:17px; }
.field { display:grid; gap:7px; }
label { font-size:12px; font-weight:800; }
input { background:#f8fbff; border:1px solid rgba(16,38,76,.2); border-radius:11px; color:var(--ink); font:inherit; font-size:14px; outline:none; padding:13px; width:100%; }
input:focus { border-color:#5a93f8; box-shadow:0 0 0 3px rgba(90,147,248,.13); }
form button { align-items:center; background:var(--ink); border:0; border-radius:12px; color:#fff; cursor:pointer; display:flex; font:inherit; font-size:14px; font-weight:800; justify-content:space-between; margin-top:3px; padding:14px 17px; }
form button:hover { background:#1b3b70; }
form button:disabled { cursor:wait; opacity:.7; }
form button span { color:#8fb6ff; font-size:19px; }
.access-help { border-top:1px solid var(--line); color:var(--muted); font-size:12px; line-height:1.55; margin:24px 0 0; padding-top:18px; }
.access-help a { color:var(--ink); font-weight:800; }
footer { border-top:1px solid var(--line); color:var(--muted); display:flex; font-size:14px; justify-content:space-between; padding:28px max(24px,calc((100vw - 1120px)/2)); }
footer nav { display:flex; gap:18px; }
@media(max-width:820px) { .login-shell { gap:44px; grid-template-columns:1fr; padding-top:50px; } .login-context { max-width:700px; } .login-card { max-width:600px; width:100%; } }
@media(max-width:620px) { main { padding:0 16px; } .login-shell { padding:38px 0 58px; } .login-card { border-radius:22px; padding:25px; } footer { flex-direction:column; gap:12px; } }