:root { --navy:#0b1d3c; --blue:#2563eb; --blue-dark:#1d4ed8; --ink:#15213b; --muted:#64748b; --border:#dbe3f0; --surface:#fff; --danger:#b42318; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
body { min-height:100vh; margin:0; color:var(--ink); background:#edf3fb; }
.login-page { position:relative; display:grid; min-height:100vh; place-items:center; overflow:hidden; padding:32px 24px; background:linear-gradient(118deg,#eff5ff 0%,#f8fbff 48%,#e7f0ff 100%); }
.ambient-shape { position:absolute; border-radius:999px; filter:blur(2px); pointer-events:none; }
.ambient-shape-one { top:-180px; left:-120px; width:540px; height:540px; background:radial-gradient(circle at 62% 62%,rgba(96,165,250,.32),rgba(191,219,254,.03) 67%); }
.ambient-shape-two { right:-110px; bottom:-190px; width:500px; height:500px; background:radial-gradient(circle at 36% 36%,rgba(37,99,235,.18),rgba(219,234,254,.01) 66%); }
.login-shell { position:relative; z-index:1; display:grid; grid-template-columns:minmax(330px,1.05fr) minmax(390px,.95fr); width:min(100%,1000px); min-height:620px; overflow:hidden; border:1px solid rgba(255,255,255,.82); border-radius:28px; background:var(--surface); box-shadow:0 32px 80px rgba(29,78,216,.18); }
.brand-panel { display:flex; flex-direction:column; padding:48px; color:#fff; background:linear-gradient(145deg,#0a1e42 0%,#103b84 100%); }
.brand { display:flex; align-items:center; gap:12px; color:#fff; font-size:1.35rem; font-weight:750; letter-spacing:-.035em; text-decoration:none; }
.brand-logo { width:42px; height:42px; object-fit:contain; }
.brand-copy { max-width:390px; margin:auto 0; }
.eyebrow { margin:0 0 10px; color:var(--blue); font-size:.72rem; font-weight:750; letter-spacing:.13em; text-transform:uppercase; }
.brand-copy .eyebrow { color:#a9c7ff; }
.brand-copy h2 { max-width:330px; margin:0; font-size:clamp(2rem,3vw,2.7rem); line-height:1.06; letter-spacing:-.055em; }
.brand-copy > p:last-child { max-width:340px; margin:20px 0 0; color:#c9daf8; font-size:1rem; line-height:1.65; }
.brand-footer { display:flex; align-items:center; gap:9px; color:#c9daf8; font-size:.83rem; }
.status-dot { width:8px; height:8px; border-radius:50%; background:#5eead4; box-shadow:0 0 0 5px rgba(94,234,212,.12); }
.login-card { display:flex; flex-direction:column; justify-content:center; padding:56px 62px; background:var(--surface); }
.login-heading { margin-bottom:30px; }
h1 { margin:0; font-size:clamp(2rem,3.2vw,2.45rem); line-height:1.05; letter-spacing:-.055em; }
.login-heading p:last-child,.support { color:var(--muted); font-size:.9rem; line-height:1.5; }
.login-heading p:last-child { margin:11px 0 0; }
.alert,.preview-notice { margin:0 0 20px; padding:12px 14px; border-radius:10px; font-size:.87rem; line-height:1.4; }
.alert { border:1px solid #f5c2be; color:var(--danger); background:#fff4f2; }
.preview-notice { border:1px solid #bfdbfe; color:#1d4e89; background:#eff6ff; }
.login-form { display:grid; gap:9px; }
.login-form label { font-size:.86rem; font-weight:700; }
.login-form input[type="text"],.login-form input[type="password"] { width:100%; min-height:50px; padding:0 14px; border:1px solid var(--border); border-radius:10px; color:var(--ink); background:#fff; font:inherit; transition:border-color .15s,box-shadow .15s; }
.login-form input:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(37,99,235,.12); }
.password-field { position:relative; margin-bottom:7px; }
.password-field input { padding-right:82px!important; }
.password-toggle { position:absolute; top:50%; right:6px; transform:translateY(-50%); border:0; border-radius:7px; padding:7px 8px; color:var(--blue-dark); background:transparent; font:inherit; font-size:.76rem; font-weight:750; cursor:pointer; }
.password-toggle:hover,.password-toggle:focus-visible { outline:none; background:#eff6ff; }
.remember-option { display:flex; align-items:center; gap:9px; margin:2px 0 13px; color:#4c5c76; font-weight:500!important; cursor:pointer; }
.remember-option input { width:16px; height:16px; accent-color:var(--blue); }
.submit-button { min-height:51px; border:0; border-radius:10px; color:#fff; background:linear-gradient(135deg,#2563eb,#1d4ed8); box-shadow:0 10px 18px rgba(37,99,235,.22); font:inherit; font-weight:750; cursor:pointer; transition:transform .15s,box-shadow .15s; }
.submit-button:hover { transform:translateY(-1px); box-shadow:0 13px 22px rgba(37,99,235,.28); }
.submit-button:active { transform:translateY(1px); }
.recovery-link { display:block; width:fit-content; margin:24px auto 0; color:var(--blue-dark); font-size:.87rem; font-weight:700; text-decoration:none; }
.recovery-link:hover,.support a:hover { text-decoration:underline; }
.support { margin:24px 0 0; text-align:center; font-size:.82rem; }
.support a { color:var(--blue-dark); font-weight:700; text-decoration:none; }
@media (max-width:760px) { .login-page { padding:16px; } .login-shell { display:block; width:min(100%,460px); min-height:0; border-radius:20px; } .brand-panel { min-height:172px; padding:26px 28px; } .brand-copy { margin:24px 0 0; } .brand-copy h2,.brand-copy > p:last-child,.brand-footer { display:none; } .login-card { padding:36px 28px; } }
@media (max-width:380px) { .login-card { padding:32px 22px; } .brand-panel { padding:24px 22px; } }