:root { color-scheme: dark; --ink:#071225; --panel:#0d1c35; --line:rgba(231,181,79,.22); --gold:#e7b54f; --muted:#95a3bb; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:#f7f8fb; background:radial-gradient(circle at 18% 20%,#17305c 0,transparent 32%),radial-gradient(circle at 82% 80%,#102d5e 0,transparent 30%),#030815; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.18; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:42px 42px; }
.login-shell { position:relative; z-index:1; width:min(1120px,calc(100% - 40px)); min-height:100vh; margin:auto; display:grid; grid-template-columns:1.1fr .9fr; gap:70px; align-items:center; }
.login-brand { max-width:610px; }.crest { width:76px; height:76px; display:grid; place-items:center; border:1px solid rgba(255,225,153,.55); border-radius:22px; color:#071225; background:linear-gradient(145deg,#f7d87f,#d99a27); font-size:25px; font-weight:900; box-shadow:0 18px 50px rgba(225,171,58,.22); }
.eyebrow { margin:28px 0 10px; color:var(--gold); letter-spacing:.22em; font-size:12px; font-weight:800; }.login-brand h1 { margin:0; max-width:560px; font-size:clamp(40px,6vw,70px); line-height:1.05; letter-spacing:-.04em; }.login-brand>p:not(.eyebrow) { max-width:570px; color:#b0bad0; font-size:18px; line-height:1.75; }.features { display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }.features span { padding:9px 13px; border:1px solid var(--line); border-radius:999px; color:#d9e0ed; background:rgba(13,28,53,.72); font-size:12px; }
.login-card { padding:38px; border:1px solid var(--line); border-radius:26px; background:linear-gradient(155deg,rgba(17,36,70,.96),rgba(6,16,34,.97)); box-shadow:0 32px 90px rgba(0,0,0,.42); }.login-card .eyebrow { margin:0 0 9px; }.login-card h2 { margin:0; font-size:29px; }.login-card>div>p:last-child { color:var(--muted); }.login-card form { display:grid; gap:18px; margin:30px 0 20px; }label { display:grid; gap:8px; font-size:13px; }input { width:100%; padding:14px 15px; border:1px solid rgba(255,255,255,.12); border-radius:12px; outline:none; color:white; background:#061127; font-size:15px; }input:focus { border-color:rgba(231,181,79,.7); box-shadow:0 0 0 4px rgba(231,181,79,.08); }button { padding:14px 18px; border:0; border-radius:12px; color:#071225; background:linear-gradient(145deg,#f5d27d,#dda42f); font-size:15px; font-weight:850; cursor:pointer; }button:disabled { opacity:.6; cursor:wait; }#login-error { min-height:20px; margin:0; color:#ff9fa5; font-size:13px; }.login-card small { color:#74829b; }
.password-input-wrap { position:relative; display:block; }
.password-input-wrap input { padding-right:54px; }
.password-toggle { position:absolute; top:50%; right:7px; width:40px; height:40px; padding:0; display:grid; place-items:center; transform:translateY(-50%); border:1px solid transparent; border-radius:9px; color:#8998af; background:transparent; }
.password-toggle:hover { color:#f0c966; background:rgba(231,181,79,.08); }
.password-toggle:focus-visible { outline:none; border-color:rgba(231,181,79,.55); box-shadow:0 0 0 3px rgba(231,181,79,.08); }
.password-toggle svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.password-toggle svg[hidden] { display:none; }
@media (max-width:820px) { .login-shell { grid-template-columns:1fr; gap:34px; padding:54px 0; }.login-brand h1 { font-size:44px; }.login-brand>p:not(.eyebrow),.features { display:none; }.login-card { padding:28px; } }