:root {
  --ink:#14213d; --muted:#66758c; --green-950:#071d49; --green-900:#0b2f6b;
  --green-700:#175cd3; --gold:#61b5ff; --cream:#f4f7fb; --line:#dfe7f1;
}
* { box-sizing:border-box; }
html,body { min-height:100%; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:Inter,"Segoe UI",system-ui,sans-serif; }
button,input { font:inherit; }
.login-shell { min-height:100vh; display:grid; grid-template-columns:minmax(430px,.92fr) minmax(520px,1.08fr); }
.login-showcase {
  position:relative; overflow:hidden; min-height:100vh; display:flex; flex-direction:column;
  padding:clamp(34px,5vw,70px); color:#fff; background:
    radial-gradient(circle at 15% 8%,rgba(97,181,255,.25),transparent 23%),
    radial-gradient(circle at 90% 78%,rgba(56,139,253,.24),transparent 30%),
    linear-gradient(145deg,#051737,#0b2f6b 52%,#175cd3);
}
.login-showcase::before,.login-showcase::after { content:""; position:absolute; border:1px solid rgba(255,255,255,.07); border-radius:50%; }
.login-showcase::before { width:430px; height:430px; right:-245px; top:13%; box-shadow:0 0 0 55px rgba(255,255,255,.018),0 0 0 110px rgba(255,255,255,.012); }
.login-showcase::after { width:260px; height:260px; left:-170px; bottom:-80px; }
.showcase-brand { position:relative; z-index:1; display:flex; align-items:center; gap:14px; }
.showcase-logo { width:58px; height:68px; display:grid; place-items:center; overflow:hidden; border-radius:16px; background:#fff; box-shadow:0 12px 30px rgba(0,0,0,.2); }
.showcase-logo img { width:100%; height:100%; padding:5px; object-fit:contain; }
.showcase-brand strong,.showcase-brand span { display:block; }.showcase-brand strong { font:700 21px Georgia,serif; }.showcase-brand span { color:rgba(255,255,255,.5); font-size:10px; letter-spacing:2.2px; text-transform:uppercase; }
.showcase-copy { position:relative; z-index:1; max-width:600px; margin:auto 0 42px; }
.eyebrow { margin:0; color:#8dcbff; font-size:10px; font-weight:850; letter-spacing:1.6px; text-transform:uppercase; }
.showcase-copy h1 { margin:13px 0 18px; font:700 clamp(38px,5vw,64px)/1.02 Georgia,serif; letter-spacing:-1.5px; }
.showcase-copy > p:last-child { max-width:540px; margin:0; color:rgba(255,255,255,.62); font-size:14px; line-height:1.75; }
.access-preview { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.access-preview article { min-width:0; display:flex; align-items:center; gap:10px; padding:13px; border:1px solid rgba(255,255,255,.09); border-radius:13px; background:rgba(255,255,255,.055); backdrop-filter:blur(10px); }
.access-preview article > span { color:#8dcbff; font:700 17px Georgia,serif; }.access-preview strong,.access-preview small { display:block; }.access-preview strong { font-size:10px; }.access-preview small { margin-top:2px; overflow:hidden; color:rgba(255,255,255,.48); font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.showcase-footer { position:relative; z-index:1; margin:26px 0 0; color:rgba(255,255,255,.35); font-size:9px; letter-spacing:.8px; text-transform:uppercase; }
.login-form-side { display:grid; place-items:center; padding:35px; }
.login-card { width:min(450px,100%); }
.mobile-brand { display:none; }
.login-heading { margin-bottom:26px; }
.security-mark { width:39px; height:39px; display:grid; place-items:center; margin-bottom:18px; border-radius:12px; color:#175cd3; background:#e8f1ff; font-weight:900; }
.login-heading .eyebrow { color:var(--green-700); }
.login-heading h2 { margin:7px 0 8px; font:700 34px Georgia,serif; }
.login-heading > p:last-child { margin:0; color:var(--muted); line-height:1.6; }
.login-error { margin-bottom:18px; padding:12px 14px; border:1px solid #efcaca; border-radius:11px; color:#963b3b; background:#fff0f0; font-size:12px; }
.login-card form { display:grid; gap:16px; }
.login-card label > span { display:block; margin-bottom:7px; color:#344563; font-size:11px; font-weight:800; }
.input-wrap { position:relative; display:flex; align-items:center; }
.input-wrap > i { position:absolute; left:14px; color:#8a9892; font-size:10px; font-style:normal; }
.input-wrap input { width:100%; min-height:50px; padding:12px 62px 12px 39px; border:1px solid var(--line); border-radius:12px; outline:0; color:var(--ink); background:#fff; transition:.15s ease; }
.input-wrap input:focus { border-color:var(--green-700); box-shadow:0 0 0 4px rgba(23,92,211,.11); }
.toggle-password { position:absolute; right:8px; min-height:34px; padding:5px 8px; border:0; border-radius:8px; color:var(--green-700); background:#edf5ff; font-size:9px; font-weight:800; cursor:pointer; }
.login-submit { min-height:51px; display:flex; align-items:center; justify-content:center; gap:12px; margin-top:4px; border:0; border-radius:12px; color:#fff; background:linear-gradient(135deg,var(--green-900),var(--green-700)); box-shadow:0 13px 30px rgba(23,92,211,.26); font-weight:800; cursor:pointer; transition:.15s ease; }
.login-submit:hover { transform:translateY(-1px); box-shadow:0 17px 36px rgba(23,92,211,.32); }.login-submit span { color:#a8d8ff; font-size:18px; }
.login-assurance { display:flex; align-items:center; gap:11px; margin-top:24px; padding-top:19px; border-top:1px solid var(--line); }
.login-assurance > span { color:#3da77f; }.login-assurance p,.login-assurance strong,.login-assurance small { display:block; margin:0; }.login-assurance strong { font-size:10px; }.login-assurance small { margin-top:2px; color:var(--muted); font-size:9px; }
@media (max-width:960px) {
  .login-shell { grid-template-columns:1fr; }
  .login-showcase { display:none; }
  .login-form-side { min-height:100vh; padding:28px 20px; }
  .mobile-brand { display:flex; align-items:center; gap:10px; margin-bottom:35px; }
  .mobile-brand img { width:43px; height:53px; object-fit:contain; }.mobile-brand strong { font:700 17px Georgia,serif; }
}
@media (max-width:480px) {
  .login-form-side { align-items:start; padding-top:22px; }
  .login-heading h2 { font-size:28px; }
}