:root { --ink:#18191e; --muted:#656771; --line:#dfdedc; --paper:#fffdfa; --orange:#ed6c20; --violet:#584569; --soft:#f4f1ec; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); background:var(--paper); font-family:Manrope,Arial,sans-serif; }
a { color:inherit; }
.portal-shell { min-height:100vh; display:grid; grid-template-columns:minmax(320px,1.05fr) minmax(420px,.95fr); }
.brand-panel { position:relative; overflow:hidden; min-height:600px; padding:clamp(30px,5vw,72px); display:flex; flex-direction:column; color:#fff; background:linear-gradient(140deg,#25262c 0%,#17181d 62%,#3c3146 100%); }
.brand-panel::before { content:""; position:absolute; width:680px; height:680px; top:-280px; right:-290px; border-radius:50%; border:1px solid rgba(255,255,255,.15); box-shadow:0 0 0 84px rgba(255,255,255,.035),0 0 0 168px rgba(255,255,255,.025); }
.brand-panel::after { content:""; position:absolute; width:400px; height:400px; bottom:-210px; left:-120px; border-radius:50%; background:radial-gradient(circle,rgba(237,108,32,.8),rgba(237,108,32,0) 69%); }
.brand { position:relative; z-index:1; text-decoration:none; font:800 32px/1 Montserrat,Arial,sans-serif; letter-spacing:-.08em; }
.brand span { color:var(--orange); }
.brand-copy { position:relative; z-index:1; max-width:590px; margin:auto 0; padding:80px 0; }
.eyebrow { margin:0 0 18px; color:var(--orange); font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
h1,h2 { margin:0; font-family:Montserrat,Arial,sans-serif; letter-spacing:-.055em; }
h1 { max-width:560px; font-size:clamp(42px,5vw,72px); line-height:1.02; }
.brand-copy > p:last-child { max-width:470px; margin:27px 0 0; color:#d6d4d9; font-size:16px; line-height:1.8; }
.status-card { position:relative; z-index:1; display:flex; align-items:center; gap:10px; color:#d8d5da; font-size:12px; font-weight:700; }
.status-dot { width:9px; height:9px; border-radius:50%; background:#33cc66; box-shadow:0 0 0 5px rgba(51,204,102,.12); }
.login-panel { min-height:600px; padding:clamp(28px,7vw,105px); display:flex; flex-direction:column; justify-content:center; background:var(--paper); }
.login-card { width:min(100%,410px); margin:auto; }
.login-card .eyebrow { margin-bottom:14px; }
h2 { font-size:clamp(34px,4vw,48px); line-height:1.08; }
.intro { margin:17px 0 34px; color:var(--muted); font-size:14px; line-height:1.7; }
form { display:grid; gap:10px; }
label { margin-top:6px; color:#3d3e45; font-size:12px; font-weight:800; }
input { width:100%; height:52px; padding:0 15px; border:1px solid var(--line); border-radius:3px; outline:0; background:#fff; color:var(--ink); font:500 14px Manrope,Arial,sans-serif; transition:border-color .18s,box-shadow .18s; }
input:focus { border-color:var(--violet); box-shadow:0 0 0 3px rgba(88,69,105,.12); }
.primary-button { display:flex; justify-content:space-between; align-items:center; width:100%; margin-top:17px; padding:16px 18px; border:0; border-radius:3px; color:#fff; background:var(--orange); cursor:pointer; font:800 13px Manrope,Arial,sans-serif; }
.primary-button:hover { background:#d85d17; }
.primary-button span { font-size:18px; }
.form-message { min-height:20px; margin:16px 0 0; color:var(--violet); font-size:12px; font-weight:700; }
.help-text { margin:16px 0 0; color:var(--muted); font-size:12px; line-height:1.75; }
.help-text a { color:var(--violet); font-weight:800; }
.legal { margin:50px auto 0; color:#898991; font-size:10px; text-align:center; }
@media (max-width:800px) { .portal-shell { grid-template-columns:1fr; } .brand-panel { min-height:430px; } .brand-copy { margin:auto 0; padding:65px 0 40px; } .login-panel { min-height:auto; padding:58px 28px 34px; } .legal { margin-top:55px; } }