.login-shell { min-height:100vh; display:grid; grid-template-columns:minmax(420px, 1.05fr) minmax(420px, .95fr); background:#fff; }
.login-brand { position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:center; min-height:100vh; padding:clamp(3rem,7vw,7rem); color:#fff; background:linear-gradient(138deg,rgba(19,55,113,.97),rgba(37,93,169,.9)),radial-gradient(circle at 80% 15%,#e3232c 0 6%,transparent 6.2%); }
.login-brand::before { content:""; position:absolute; inset:0; opacity:.22; background:linear-gradient(120deg,transparent 0 48%,rgba(255,255,255,.13) 48% 49%,transparent 49% 100%),repeating-linear-gradient(90deg,transparent 0 76px,rgba(255,255,255,.05) 77px 78px); }
.login-brand::after { content:""; position:absolute; width:460px; height:460px; border:1px solid rgba(255,255,255,.16); border-radius:50%; right:-220px; bottom:-160px; box-shadow:0 0 0 75px rgba(255,255,255,.025),0 0 0 150px rgba(255,255,255,.02); }
.login-brand-inner,.login-brand-footer { position:relative; z-index:1; max-width:620px; }
.login-logo { width:150px; height:auto; filter:drop-shadow(0 8px 18px rgba(0,0,0,.14)); background:#fff; padding:.7rem .85rem; border-radius:4px; }
.login-kicker { margin:3rem 0 1rem; text-transform:uppercase; letter-spacing:.18em; font-size:.72rem; font-weight:800; color:#d8e8ff; }
.login-brand h1 { max-width:590px; margin:0; font-size:clamp(2.5rem,5vw,4.9rem); line-height:1.02; letter-spacing:-.045em; font-weight:800; }
.login-intro { max-width:530px; margin:1.5rem 0 0; color:#dce9f9; font-size:1.05rem; line-height:1.75; }
.login-brand-line { display:flex; align-items:center; gap:1rem; margin-top:2.5rem; font-size:.76rem; text-transform:uppercase; letter-spacing:.14em; }
.login-brand-line span { display:block; width:54px; height:4px; background:#e5252a; }
.login-brand-footer { position:absolute; left:clamp(3rem,7vw,7rem); bottom:2.1rem; color:rgba(255,255,255,.62); font-size:.76rem; letter-spacing:.06em; }
.login-form { width:min(100%,520px); align-self:center; justify-self:center; display:flex; flex-direction:column; gap:1.15rem; padding:3.25rem; color:#1f2937; }
.login-form-head { margin-bottom:.65rem; }
.login-form-badge { display:inline-flex; align-items:center; gap:.4rem; color:#285eaa; background:#eef5ff; border-radius:999px; padding:.4rem .72rem; font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.login-form-badge::before { content:""; width:7px; height:7px; border-radius:50%; background:#e5252a; }
.login-form h2,.login-form-head h2 { margin:1.2rem 0 .35rem; color:#172033; font-size:2.25rem; font-weight:800; letter-spacing:-.035em; }
.login-form-head p { margin:0; color:#6b7280; }
.login-form label { display:flex; flex-direction:column; gap:.45rem; color:#354052; font-size:.76rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.login-input-wrap { display:flex; align-items:center; gap:.7rem; padding:0 .9rem; min-height:3.25rem; border:1px solid #dbe1e8; border-radius:8px; background:#fff; transition:border-color .18s,box-shadow .18s; }
.login-input-wrap:focus-within { border-color:#285eaa; box-shadow:0 0 0 4px rgba(40,94,170,.11); }
.login-input-wrap .bi { color:#7b8798; font-size:1rem; }
.login-form .login-input-wrap input { flex:1; min-width:0; padding:.7rem 0; border:0; outline:0; background:transparent; color:#172033; font-size:.95rem; text-transform:none; letter-spacing:0; }
.login-form .login-input-wrap input::placeholder { color:#9aa4b2; }
.login-form button.login-submit,.login-form > button { min-height:3.25rem; display:flex; align-items:center; justify-content:space-between; padding:.7rem 1.1rem .7rem 1.25rem; border:0; border-radius:8px; color:#fff; background:#285eaa; box-shadow:0 10px 24px rgba(40,94,170,.2); font-weight:800; cursor:pointer; transition:transform .15s,background .15s; }
.login-form button.login-submit:hover,.login-form > button:hover { background:#204f92; transform:translateY(-1px); }
.login-form button:disabled { opacity:.62; cursor:default; transform:none; }
.login-error { padding:.8rem 1rem; border-left:4px solid #e5252a; border-radius:4px; color:#a61f24; background:#fff1f1; font-size:.86rem; }
.login-qr { width:200px; height:200px; align-self:center; padding:.5rem; border-radius:8px; background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.1); }
html[data-theme="dark"] .login-shell { background:#101827; }
html[data-theme="dark"] .login-form { color:#e6edf7; }
html[data-theme="dark"] .login-form h2,html[data-theme="dark"] .login-form-head h2 { color:#fff; }
html[data-theme="dark"] .login-input-wrap { background:#172235; border-color:#2a3b55; }
html[data-theme="dark"] .login-form .login-input-wrap input { color:#fff; }
@media(max-width:900px){.login-shell{grid-template-columns:1fr}.login-brand{min-height:300px;padding:2.5rem}.login-brand h1{font-size:2.4rem}.login-kicker{margin-top:2rem}.login-brand-footer{display:none}.login-form{padding:2.5rem 1.5rem}.login-logo{width:120px}}
@media(max-width:520px){.login-brand{min-height:240px}.login-brand h1{font-size:2rem}.login-intro,.login-brand-line{display:none}.login-form{padding:2.1rem 1.25rem}.login-form h2,.login-form-head h2{font-size:1.9rem}}