:root { color-scheme: dark; --ink:#071321; --white:#fff; --blue:#1766d2; --red:#ef2b32; }
* { box-sizing:border-box; }
html,body { min-height:100%; margin:0; background:var(--ink); }
body { color:var(--white); font-family:Inter,"Segoe UI",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; background:radial-gradient(circle at 78% 22%,rgba(23,102,210,.24),transparent 34rem),linear-gradient(135deg,#030a12,#071321 58%,#0d2136); }
body::after { content:""; position:fixed; inset:0; pointer-events:none; opacity:.1; background-image:linear-gradient(rgba(255,255,255,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.15) 1px,transparent 1px); background-size:72px 72px; mask-image:linear-gradient(125deg,#000,transparent 78%); }
.login-shell { position:relative; z-index:1; width:min(calc(100% - 40px),980px); min-height:100vh; min-height:100svh; margin:auto; padding:30px 0 24px; display:flex; flex-direction:column; }
.brand { width:152px; height:70px; overflow:hidden; display:grid; place-items:center; background:#fff; }
.brand img { display:block; width:auto; height:64px; }
.login-card { width:min(100%,760px); margin:auto 0; padding:clamp(30px,6vw,64px); border:1px solid rgba(255,255,255,.17); border-top:4px solid var(--blue); background:rgba(255,255,255,.055); box-shadow:0 32px 90px rgba(0,0,0,.28); backdrop-filter:blur(12px); }
.kicker { margin:0 0 20px; color:#72affc; font-size:.72rem; font-weight:850; letter-spacing:.18em; text-transform:uppercase; }
h1 { max-width:650px; margin:0; font-family:"Arial Narrow","Bahnschrift Condensed",Impact,sans-serif; font-size:clamp(2.8rem,6.5vw,5.8rem); line-height:.96; letter-spacing:.02em; text-transform:uppercase; }
form { margin-top:clamp(38px,6vw,64px); }
label { display:block; margin-bottom:9px; color:#aebdcb; font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.password-row { display:grid; grid-template-columns:minmax(0,1fr) auto; }
input { min-width:0; height:58px; padding:0 18px; color:#fff; background:#091a2b; border:1px solid rgba(255,255,255,.28); border-right:0; border-radius:0; font:inherit; font-size:1.15rem; letter-spacing:.12em; outline:0; }
input:focus { border-color:#72affc; box-shadow:inset 0 0 0 1px #72affc; }
button { min-height:58px; padding:0 24px; color:#fff; background:var(--red); border:0; border-radius:0; cursor:pointer; font:inherit; font-size:.76rem; font-weight:850; letter-spacing:.09em; text-transform:uppercase; }
button:hover { background:#d91f27; }
button span { margin-left:7px; font-size:1rem; }
.error { margin:14px 0 0; color:#ff9aa0; font-size:.86rem; font-weight:700; }
.footer { margin:0; color:#718495; font-size:.68rem; font-weight:750; letter-spacing:.11em; text-transform:uppercase; }
:focus-visible { outline:3px solid #7ab3ff; outline-offset:4px; }
@media(max-width:600px){.login-shell{padding-top:18px}.brand{width:126px;height:58px}.brand img{height:54px}.login-card{margin-block:48px;padding:30px 22px}h1{font-size:clamp(2.5rem,13vw,4rem)}.password-row{grid-template-columns:1fr}input{border-right:1px solid rgba(255,255,255,.28);border-bottom:0}button{width:100%}}