:root { color-scheme:dark; --ink: #f4f0e8; --muted: #9eacc0; --green: #f3bd55; --line: #263b5a; --cream: #080d15; }
* { box-sizing:border-box; } body { margin:0; background:var(--cream); color:var(--ink); font-family:'Segoe UI',system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
button,input { font:inherit; } button { cursor:pointer; } [hidden] { display:none!important; } svg { fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
:focus-visible { outline:3px solid #2b4564; outline-offset:4px; }
.login-shell { display:grid; grid-template-columns:1.03fr 1fr; min-height:100svh; padding:16px; gap:16px; }
.login-showcase { position:relative; isolation:isolate; overflow:hidden; display:flex; min-height:calc(100svh - 32px); padding:42px 8%; border-radius:24px; color:#f3bd55; background:#071a34; }
.showcase-content { display:flex; flex-direction:column; width:100%; z-index:2; } .showcase-brand,.mobile-brand { display:flex; align-items:center; gap:14px; } .showcase-brand img,.mobile-brand img { width:48px; height:48px; border-radius:13px; border:1px solid #a47c3855; } .showcase-brand strong,.mobile-brand strong { display:block; font-size:23px; font-weight:500; letter-spacing:-.7px; } .showcase-brand span,.mobile-brand span { display:block; margin-top:2px; color:#f3bd55; font-size:9px; letter-spacing:4px; }
.showcase-copy { position:relative; margin:auto 0; padding:70px 0 110px; max-width:510px; z-index:2; } .kicker { color:#b4c5d9; font-size:9px; font-weight:600; letter-spacing:2px; } .showcase-copy h1 { margin:24px 0; font-size:clamp(44px,5vw,78px); font-weight:400; line-height:1.07; letter-spacing:-3px; } .showcase-copy h1 em { color:#f3bd55; font-family:Georgia,serif; font-weight:400; } .showcase-copy p { max-width:345px; margin:0; color:#b4c5d9; font-size:13px; line-height:1.9; } .showcase-foot { display:flex; align-items:center; gap:10px; color:#b4c5d9; font-size:10px; } .showcase-foot > span { width:6px; height:6px; border-radius:50%; background:#302817; }
.showcase-glow { display:none; } .login-landscape { position:absolute; z-index:-1; right:-20%; bottom:-250px; width:700px; height:700px; border:1px solid #ffffff0c; border-radius:50%; } .login-landscape span { position:absolute; inset:50px; border:1px solid #ffffff0c; border-radius:50%; } .login-landscape span:nth-child(2) { inset:110px; } .login-landscape span:nth-child(3) { inset:170px; } .login-landscape i { position:absolute; top:50px; left:60px; width:45px; height:45px; background:#302817; border-radius:50%; opacity:.65; }
.login-panel { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:50px 8%; } .login-card { width:min(100%,380px); } .mobile-brand { display:none; } .login-heading > span { color:#f3bd55; font-size:9px; font-weight:650; letter-spacing:1.8px; } .login-heading h2 { margin:16px 0 12px; font-size:32px; font-weight:500; letter-spacing:-1.2px; line-height:1.2; } .login-heading p { margin:0 0 38px; color:var(--muted); font-size:13px; line-height:1.75; max-width:330px; }
#loginForm { display:grid; gap:21px; } .login-field { display:grid; gap:9px; } .login-field > span { font-size:11px; font-weight:600; color:#f3bd55; } .input-wrap { position:relative; } .input-wrap > svg { position:absolute; left:16px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:#b4c5d9; pointer-events:none; } .input-wrap input { width:100%; min-height:52px; padding:12px 48px; color:var(--ink); background:#0d1b2f; border:1px solid var(--line); border-radius:11px; font-size:13px; transition:border-color .18s,box-shadow .18s; } .input-wrap input::placeholder { color:#b4c5d9; } .input-wrap input:focus { border-color:#2b4564; outline:0; box-shadow:0 0 0 3px #5d936d15; } .password-toggle { position:absolute; right:5px; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:44px; height:44px; padding:0; background:none; border:0; border-radius:8px; color:#b4c5d9; } .password-toggle:hover { background:#12233b; } .password-toggle svg { width:18px; height:18px; }
.login-submit { display:flex; align-items:center; justify-content:center; gap:12px; min-height:52px; margin-top:6px; padding:12px 20px; border:0; border-radius:11px; background:var(--green); color:#d9e5f2; font-weight:600; font-size:12px; transition:background .18s,transform .18s; } .login-submit:hover { background:#071a34; transform:translateY(-1px); } .login-submit:disabled { cursor:wait; opacity:.6; transform:none; } .login-submit svg { width:17px; height:17px; } .login-error { color:#b4c5d9; background:#0d1b2f; border:1px solid #2b4564; padding:12px 14px; border-radius:9px; font-size:12px; line-height:1.6; }
.security-note { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:25px; color:#b4c5d9; font-size:10px; } .security-note svg { width:14px; height:14px; color:#b4c5d9; } .login-panel footer { margin-top:80px; font-size:10px; color:#b4c5d9; }
@media(min-width:1600px) { .login-showcase { padding-inline:12%; } .showcase-copy h1 { font-size:83px; } }
@media(max-width:1000px) { .showcase-copy h1 { font-size:55px; } .login-showcase { padding:32px; } .login-panel { padding:40px; } .login-heading h2 { font-size:29px; } }
@media(max-width:760px) { .login-shell { display:block; padding:0; } .login-showcase { display:none; } .login-panel { min-height:100svh; padding:36px 24px; } .mobile-brand { display:flex; width:min(100%,380px); margin-bottom:55px; } .mobile-brand strong { color:#f3bd55; } .mobile-brand span { color:#f3bd55; } .login-heading h2 { font-size:32px; } .login-panel footer { margin-top:55px; } }
@media(max-width:380px) { .login-panel { padding:26px 22px; } .mobile-brand { margin-bottom:38px; } .login-heading h2 { font-size:28px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; animation:none!important; } }

.login-showcase { background:linear-gradient(135deg,#06142b,#0a2848 65%,#123f5e); }
.showcase-copy h1 { color:#f4f0e8; }.showcase-copy h1 em { color:#f3bd55; }
.showcase-copy p { color:#b9c9dc; }.kicker,.showcase-brand span,.mobile-brand span { color:#f3bd55; }
.showcase-brand strong,.mobile-brand strong,.login-heading h2 { color:#f4f0e8; }
.login-heading > span { color:#f3bd55; }.input-wrap input { color:#edf3fb; background:#0d1b2f; border-color:#263b5a; }
.login-submit { color:#241a08; background:linear-gradient(135deg,#f7cd78,#e9aa38); }.login-submit:hover { background:#ffdc91; }
.login-error { color:#ff9aa4; background:#2a151a; border-color:#6c3941; }