:root{
  color-scheme:dark;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --bg:#080a0d;
  --panel:#0d1014;
  --panel-2:#11151a;
  --line:#252b32;
  --line-soft:#1b2026;
  --text:#f7f8fa;
  --muted:#8d96a2;
  --muted-2:#6f7883;
  --red:#ed1b2f;
  --red-hot:#ff3145;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}
body{min-height:100vh;overflow-x:hidden}
button,input{font:inherit}
.auth-page{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.48fr) minmax(390px,.92fr);background:#080a0d}

.brand-panel{position:relative;min-height:100vh;overflow:hidden;border-right:1px solid rgba(255,255,255,.06);background:
  radial-gradient(circle at 14% 17%,rgba(237,27,47,.13),transparent 30%),
  radial-gradient(circle at 72% 78%,rgba(255,255,255,.045),transparent 29%),
  linear-gradient(135deg,#12161b 0%,#0b0e12 48%,#080a0d 100%)}
.brand-panel:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 0 55%,rgba(255,255,255,.018) 55% 55.15%,transparent 55.15% 100%);pointer-events:none}
.brand-grid{position:absolute;inset:0;opacity:.12;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(to right,rgba(0,0,0,.55),transparent 86%)}
.brand-glow{position:absolute;border-radius:999px;filter:blur(22px);pointer-events:none}
.brand-glow-one{width:320px;height:320px;left:-170px;top:18%;background:rgba(237,27,47,.14)}
.brand-glow-two{width:260px;height:260px;right:3%;bottom:4%;background:rgba(255,255,255,.025)}
.brand-content{position:relative;z-index:2;min-height:100vh;padding:70px clamp(48px,6vw,104px);display:flex;flex-direction:column;justify-content:center}
.brand-lockup{display:flex;align-items:center;gap:clamp(30px,3.4vw,56px);max-width:900px}
.crest-wrap{position:relative;flex:0 0 auto;width:clamp(190px,18vw,300px);height:clamp(230px,24vw,365px);display:grid;place-items:center}
.crest-wrap:before{content:"";position:absolute;width:74%;height:74%;border-radius:50%;background:rgba(237,27,47,.08);filter:blur(26px)}
.brand-logo{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 24px 42px rgba(0,0,0,.48))}
.brand-copy{min-width:0;padding-top:8px}
.brand-kicker{font-size:12px;font-weight:800;letter-spacing:.28em;color:var(--red-hot);margin-bottom:14px}
.brand-copy h1{margin:0;max-width:560px;font-size:clamp(43px,5.3vw,78px);line-height:.98;letter-spacing:-.045em;font-weight:800}
.brand-copy h1 span{display:block;color:#fff}
.brand-copy p{margin:22px 0 0;color:#9ea6b0;font-size:clamp(13px,1.15vw,17px);font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.brand-footer{position:absolute;left:clamp(48px,6vw,104px);bottom:42px;display:flex;align-items:center;gap:10px;color:#7f8893;font-size:12px;font-weight:600;letter-spacing:.045em}
.status-dot{width:7px;height:7px;border-radius:50%;background:#55d98b;box-shadow:0 0 0 5px rgba(85,217,139,.08)}

.login-panel{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#0d1014,#090b0e);padding:56px clamp(36px,4vw,68px)}
.login-wrap{width:min(100%,440px)}
.login-heading{margin-bottom:34px}
.login-kicker{display:flex;align-items:center;gap:10px;margin-bottom:12px;color:var(--red-hot);font-size:11px;font-weight:850;letter-spacing:.22em}
.login-kicker:before{content:"";display:block;width:30px;height:2px;background:var(--red)}
.login-heading h2{margin:0;font-size:40px;line-height:1.05;letter-spacing:-.035em;font-weight:800}
.login-heading p{margin:11px 0 0;color:var(--muted);font-size:14px;line-height:1.55}
.login-form{display:grid;gap:18px}
.login-form label{display:grid;gap:8px}
.login-form label>span{color:#bec5cd;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.095em}
.input-shell{height:54px;display:flex;align-items:center;border:1px solid #2b3138;border-radius:12px;background:#0a0d10;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
.input-shell:focus-within{border-color:rgba(237,27,47,.85);box-shadow:0 0 0 4px rgba(237,27,47,.10);background:#0c0f13}
.input-shell svg{width:18px;height:18px;margin-left:16px;fill:#66707b;flex:0 0 auto;transition:fill .18s ease}
.input-shell:focus-within svg{fill:#e7ebef}
.input-shell input{height:100%;min-width:0;flex:1;border:0;outline:0;background:transparent;color:#fff;padding:0 15px;font-size:15px}
.input-shell input::placeholder{color:#535c66}
#submit{height:55px;margin-top:8px;border:0;border-radius:12px;background:linear-gradient(135deg,#dc1629,#f12338);color:white;display:flex;align-items:center;justify-content:center;gap:12px;font-size:14px;font-weight:850;letter-spacing:.02em;cursor:pointer;box-shadow:0 15px 34px rgba(237,27,47,.18);transition:transform .16s ease,box-shadow .16s ease,filter .16s ease}
#submit svg{width:19px;height:19px;fill:currentColor}
#submit:hover{transform:translateY(-1px);box-shadow:0 18px 40px rgba(237,27,47,.28);filter:brightness(1.06)}
#submit:active{transform:translateY(0)}
#submit:disabled{cursor:wait;opacity:.68;transform:none}
#status{min-height:20px;margin-top:-5px;color:#ff7484;font-size:12px;text-align:center;font-weight:650}
.login-foot{margin-top:36px;padding-top:22px;border-top:1px solid var(--line-soft);color:#5f6872;font-size:11px;text-align:center;font-weight:650;letter-spacing:.04em}
.login-foot span{padding:0 8px;color:#353b42}

@media (max-width:980px){
  .auth-page{grid-template-columns:1fr;min-height:100vh}
  .brand-panel{min-height:auto;border-right:0;border-bottom:1px solid rgba(255,255,255,.06)}
  .brand-content{min-height:auto;padding:42px 32px 36px;display:block}
  .brand-lockup{justify-content:center;gap:24px}
  .crest-wrap{width:118px;height:142px}
  .brand-copy h1{font-size:clamp(34px,7vw,54px)}
  .brand-copy p{margin-top:13px;font-size:11px}
  .brand-footer{display:none}
  .login-panel{min-height:auto;padding:46px 28px 58px}
  .login-wrap{max-width:520px}
}
@media (max-width:620px){
  .brand-content{padding:28px 20px 24px}
  .brand-lockup{gap:17px;align-items:center}
  .crest-wrap{width:82px;height:100px}
  .brand-kicker{font-size:9px;letter-spacing:.20em;margin-bottom:8px}
  .brand-copy h1{font-size:29px;line-height:1.02}
  .brand-copy p{font-size:9px;letter-spacing:.11em;margin-top:9px}
  .login-panel{padding:37px 20px 46px}
  .login-heading{margin-bottom:28px}
  .login-heading h2{font-size:34px}
}