:root { --brand:#b82032; --ink:#18191d; --muted:#777c85; --line:#dfe2e6; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:#f5f6f8; font-family:Inter,"Segoe UI",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
.login-layout { display:grid; grid-template-columns:minmax(440px,1fr) minmax(480px,.85fr); min-height:100vh; }
.login-story { position:relative; display:flex; flex-direction:column; min-height:100vh; padding:42px 56px; color:#fff; overflow:hidden; background:linear-gradient(145deg,#16171b 5%,#24272d 62%,#6d1722 150%); }
.login-story::before { content:""; position:absolute; width:540px; height:540px; right:-240px; top:-180px; border:1px solid rgba(255,255,255,.08); border-radius:50%; box-shadow:0 0 0 80px rgba(255,255,255,.018),0 0 0 160px rgba(255,255,255,.012); }
.login-story::after { content:""; position:absolute; inset:auto -10% -30% 25%; height:65%; opacity:.22; background:radial-gradient(circle at 15% 40%,#dd5263 0 2px,transparent 3px),linear-gradient(135deg,transparent 40%,rgba(255,255,255,.13)); background-size:35px 35px,100% 100%; transform:skewY(-9deg); }
.brand { position:relative; z-index:1; display:flex; align-items:center; gap:9px; width:max-content; color:#fff; text-decoration:none; letter-spacing:.08em; }
.brand span,.mobile-brand span { display:grid; place-items:center; width:39px; height:39px; border-radius:50%; color:#fff; background:var(--brand); font-size:14px; font-weight:800; letter-spacing:-.05em; }
.brand strong { font-size:17px; }
.brand small { color:#8f949d; font-size:9px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
.story-copy { position:relative; z-index:1; max-width:610px; margin:auto 0; }
.eyebrow { display:block; margin-bottom:14px; color:#e16775; font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.story-copy h1 { max-width:590px; margin:0 0 18px; font-size:clamp(38px,5vw,64px); line-height:1.03; letter-spacing:-.05em; }
.story-copy > p { max-width:540px; margin:0; color:#b8bdc5; font-size:17px; line-height:1.65; }
.story-copy ul { display:flex; flex-wrap:wrap; gap:8px; margin:30px 0 0; padding:0; list-style:none; }
.story-copy li { padding:8px 11px; border:1px solid rgba(255,255,255,.12); border-radius:8px; color:#d4d7dc; background:rgba(255,255,255,.04); font-size:11px; }
.security-note { position:relative; z-index:1; display:flex; align-items:center; gap:9px; color:#8f949d; font-size:10px; font-weight:650; }
.security-note i { width:8px; height:8px; border-radius:50%; background:#39a773; box-shadow:0 0 0 4px rgba(57,167,115,.11); }
.login-panel { display:grid; place-items:center; padding:38px; background:#fff; }
form { width:min(390px,100%); }
.mobile-brand { display:none; align-items:center; gap:8px; margin-bottom:45px; }
.mobile-brand strong { letter-spacing:.08em; }
h2 { margin:0 0 9px; font-size:32px; letter-spacing:-.035em; }
.intro { margin:0 0 30px; color:var(--muted); font-size:13px; line-height:1.55; }
label { display:block; margin-bottom:17px; }
label > span { display:block; margin-bottom:8px; color:#4d5158; font-size:11px; font-weight:750; }
input { width:100%; height:46px; padding:0 13px; border:1px solid var(--line); border-radius:10px; outline:0; color:var(--ink); background:#fff; font:inherit; }
input:focus { border-color:#c65a68; box-shadow:0 0 0 4px rgba(184,32,50,.08); }
.password-field { position:relative; }
.password-field input { padding-right:84px; }
.password-field button { position:absolute; top:5px; right:5px; height:36px; padding:0 10px; border:0; border-radius:7px; color:#777c84; background:#f0f2f4; font-size:10px; font-weight:700; }
.login-button { width:100%; height:47px; margin-top:6px; border:0; border-radius:10px; color:#fff; background:var(--brand); box-shadow:0 9px 22px rgba(184,32,50,.2); font:inherit; font-weight:800; cursor:pointer; }
.login-button:hover { background:#951a29; }
.login-button:disabled { cursor:wait; opacity:.62; }
.login-error { margin:8px 0 3px; padding:10px 12px; border-radius:8px; color:#9d1d2e; background:#fff0f2; font-size:11px; }
.loading { margin-top:13px; color:#777c84; font-size:10px; text-align:center; }
.loading i { display:inline-block; width:11px; height:11px; margin-right:7px; border:2px solid #d7dade; border-top-color:var(--brand); border-radius:50%; vertical-align:-2px; animation:spin .7s linear infinite; }
.support { margin:28px 0 0; color:#a0a4ab; font-size:10px; text-align:center; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (max-width:850px) { .login-layout { grid-template-columns:1fr; } .login-story { display:none; } .login-panel { min-height:100vh; padding:28px; } .mobile-brand { display:flex; } }
@media (prefers-reduced-motion:reduce) { * { animation-duration:.001ms!important; } }