:root { color-scheme: light; --navy:#082742; --blue:#146ca4; --line:#d7e1e8; --muted:#5d6d79; --danger:#b42318; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:#102c3f; background:radial-gradient(circle at 8% 15%,#e4f2f8 0,transparent 35%),linear-gradient(135deg,#f6fafc,#e8f1f5); }
.login-shell { min-height:100vh; display:grid; grid-template-columns:minmax(320px,1.1fr) minmax(360px,.9fr); }
.login-brand { position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:center; padding:clamp(44px,8vw,110px); color:white; background:linear-gradient(145deg,#061d31,#0b4068 68%,#1274a8); }
.login-brand::after { content:""; position:absolute; width:420px; height:420px; right:-210px; bottom:-220px; border:70px solid rgba(255,255,255,.06); border-radius:50%; }
.login-brand img { width:76px; height:76px; margin-bottom:28px; filter:brightness(0) invert(1); }
.login-brand span { font-size:.78rem; font-weight:850; letter-spacing:.2em; color:#9bd9f5; }
.login-brand h1 { max-width:650px; margin:12px 0 16px; font-size:clamp(2.2rem,5vw,4.4rem); line-height:.98; letter-spacing:-.045em; }
.login-brand p { max-width:540px; margin:0; font-size:1.08rem; color:#d5eaf4; }
.login-brand ul { display:grid; gap:12px; margin:38px 0 0; padding:0; list-style:none; color:#dceff7; }
.login-brand li::before { content:"✓"; display:inline-grid; place-items:center; width:22px; height:22px; margin-right:10px; border-radius:50%; color:#05273f; background:#83d5ee; font-weight:900; }
.login-panel { width:min(460px,calc(100% - 40px)); align-self:center; justify-self:center; padding:42px; border:1px solid rgba(145,169,184,.35); border-radius:26px; background:rgba(255,255,255,.93); box-shadow:0 24px 70px rgba(22,60,83,.16); backdrop-filter:blur(12px); }
.security-badge { display:inline-flex; align-items:center; gap:8px; padding:7px 11px; border-radius:999px; color:#155b3c; background:#e4f6ec; font-size:.75rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.security-badge span { width:8px; height:8px; border-radius:50%; background:#1f9d62; box-shadow:0 0 0 4px rgba(31,157,98,.13); }
.login-panel h2 { margin:24px 0 8px; font-size:2rem; letter-spacing:-.035em; color:var(--navy); }
.login-panel > p { margin:0 0 28px; color:var(--muted); }
form { display:grid; gap:20px; }
label { display:grid; gap:8px; font-size:.88rem; font-weight:750; color:#263f50; }
input { width:100%; min-height:50px; padding:0 14px; border:1px solid #b9c9d3; border-radius:12px; background:white; color:#0b2436; font:inherit; outline:none; transition:border-color .2s,box-shadow .2s; }
input:focus { border-color:var(--blue); box-shadow:0 0 0 4px rgba(20,108,164,.12); }
.password-field { position:relative; }
.password-field input { padding-right:82px; }
.password-field button { position:absolute; right:8px; top:8px; height:34px; padding:0 10px; border:0; border-radius:8px; color:var(--blue); background:#edf6fa; font-weight:750; cursor:pointer; }
.submit-button { min-height:52px; border:0; border-radius:12px; color:white; background:linear-gradient(135deg,#0b5f93,#1385b9); box-shadow:0 10px 22px rgba(12,102,150,.23); font-size:1rem; font-weight:850; cursor:pointer; }
.submit-button:disabled { opacity:.65; cursor:wait; }
.login-error { min-height:20px; margin:-4px 0 -6px!important; color:var(--danger)!important; font-size:.86rem; font-weight:700; }
.login-note { margin:24px 0 0!important; padding-top:18px; border-top:1px solid var(--line); text-align:center; font-size:.78rem; color:#75838d!important; }
@media (max-width:820px) { .login-shell { grid-template-columns:1fr; } .login-brand { min-height:240px; padding:38px 28px; justify-content:flex-end; } .login-brand img { width:52px; height:52px; margin-bottom:15px; } .login-brand h1 { font-size:2.2rem; margin:8px 0; } .login-brand ul { display:none; } .login-panel { margin:28px auto; padding:30px 24px; } }