:root{
  --navy:#08233e;
  --navy-2:#0d3659;
  --blue:#1f6fe5;
  --green:#13a56b;
  --text:#18324a;
  --muted:#718196;
  --line:#dfe7ef;
  --surface:#ffffff;
}
*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
body{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);
  background:#edf3f8;
}
.auth-page{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:32px;
  background:
    radial-gradient(circle at 8% 10%,rgba(31,111,229,.13),transparent 30%),
    radial-gradient(circle at 92% 88%,rgba(19,165,107,.11),transparent 28%),
    #edf3f8;
}
.auth-card{
  width:min(1080px,100%);
  min-height:650px;
  display:grid;
  grid-template-columns:48% 52%;
  overflow:hidden;
  border:1px solid rgba(12,49,78,.08);
  border-radius:24px;
  background:var(--surface);
  box-shadow:0 28px 70px rgba(20,50,77,.17);
}
.auth-hero{
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:36px 42px 30px;
  color:#fff;
  background:linear-gradient(145deg,var(--navy) 0%,var(--navy-2) 62%,#0d5c68 100%);
}
.auth-hero::before,.auth-hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  border-radius:50%;
  pointer-events:none;
}
.auth-hero::before{
  width:340px;height:340px;right:-170px;top:-170px;
  border:1px solid rgba(255,255,255,.11);
  background:rgba(31,111,229,.14);
}
.auth-hero::after{
  width:250px;height:250px;left:-120px;bottom:-120px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(19,165,107,.13);
}
.hero-topline{
  display:inline-flex;
  align-items:center;
  gap:10px;
  width:max-content;
  font-size:12px;
  font-weight:700;
  color:#d7e8f4;
}
.hero-mark{
  width:34px;height:34px;
  display:grid;place-items:center;
  border-radius:10px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
  color:#5ce1ae;
}
.hero-content{text-align:center;margin:auto 0}
.hero-logo{
  width:150px;height:150px;
  object-fit:contain;
  margin-bottom:14px;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.22));
}
.hero-kicker{
  margin:0 0 8px;
  color:#7dd4f5;
  font-size:11px;
  font-weight:800;
  letter-spacing:1.45px;
}
.hero-content h1{
  margin:0;
  font-size:48px;
  line-height:1;
  font-weight:800;
  letter-spacing:-1.5px;
}
.hero-description{
  max-width:390px;
  margin:16px auto 25px;
  color:#d2e1eb;
  font-size:14px;
  line-height:1.7;
}
.hero-points{
  max-width:390px;
  margin:0 auto;
  display:grid;
  gap:10px;
  text-align:left;
}
.hero-points div{
  display:flex;
  align-items:center;
  gap:11px;
  padding:11px 13px;
  border-radius:11px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.055);
  color:#e1edf4;
  font-size:12px;
}
.hero-points i{color:#52dda9}
.hero-footer{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.11);
  color:#a9c2d3;
  font-size:10px;
}
.auth-form-side{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:50px 66px;
  background:#fff;
}
.mobile-brand{display:none}
.form-heading{margin-bottom:24px}
.access-label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-bottom:9px;
  color:var(--blue);
  font-size:10px;
  font-weight:800;
  letter-spacing:1.3px;
}
.form-heading h2{
  margin:0;
  color:#102c46;
  font-size:32px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:-.6px;
}
.form-heading p{margin:8px 0 0;color:var(--muted);font-size:13px}
.auth-alert{
  display:flex;
  gap:9px;
  align-items:flex-start;
  padding:12px 14px;
  border:0;
  border-radius:11px;
  font-size:12px;
}
.field-group{margin-bottom:16px}
.field-group>label{
  display:block;
  margin-bottom:7px;
  color:#344c63;
  font-size:12px;
  font-weight:700;
}
.field-control{position:relative}
.field-control>i{
  position:absolute;
  left:15px;
  top:50%;
  transform:translateY(-50%);
  color:#8292a3;
  font-size:16px;
  pointer-events:none;
}
.field-control input{
  width:100%;
  height:50px;
  padding:0 46px;
  border:1px solid var(--line);
  border-radius:11px;
  outline:none;
  background:#fbfcfe;
  color:#17324a;
  font-size:13px;
  transition:.18s ease;
}
.field-control input::placeholder{color:#9aa8b6}
.field-control input:focus{
  border-color:#4b91eb;
  background:#fff;
  box-shadow:0 0 0 4px rgba(31,111,229,.10);
}
.password-toggle{
  position:absolute;
  right:7px;
  top:50%;
  transform:translateY(-50%);
  width:36px;height:36px;
  display:grid;place-items:center;
  border:0;
  border-radius:9px;
  background:transparent;
  color:#78899a;
  cursor:pointer;
}
.password-toggle:hover{background:#edf4fd;color:var(--blue)}
.captcha-card{
  margin:4px 0 19px;
  padding:14px;
  border:1px solid #dce8f3;
  border-radius:13px;
  background:#f7fafc;
}
.captcha-header{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.captcha-badge{
  width:36px;height:36px;flex:0 0 36px;
  display:grid;place-items:center;
  border-radius:10px;
  color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--green));
}
.captcha-header strong,.captcha-header small{display:block}
.captcha-header strong{font-size:12px;color:#274158}
.captcha-header small{margin-top:2px;color:#7d8c9d;font-size:10px}
.captcha-question{display:block;margin-bottom:8px;color:#566a7e;font-size:12px}
.captcha-question strong{color:#135fae;font-size:14px}
.login-button{
  width:100%;
  height:51px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:0;
  border-radius:11px;
  color:#fff;
  background:linear-gradient(100deg,#1766d9,#2382e9);
  box-shadow:0 11px 24px rgba(31,111,229,.24);
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  transition:.18s ease;
}
.login-button:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(31,111,229,.30)}
.login-button:active{transform:none}
.security-note{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:7px;
  margin:17px 0 0;
  color:#8a98a7;
  font-size:10px;
}
.security-note i{color:var(--green)}
@media(max-width:900px){
  .auth-page{padding:20px}
  .auth-card{grid-template-columns:1fr;max-width:560px;min-height:auto}
  .auth-hero{display:none}
  .auth-form-side{padding:42px 44px}
  .mobile-brand{display:flex;align-items:center;gap:11px;margin-bottom:28px}
  .mobile-brand img{width:52px;height:52px;object-fit:contain}
  .mobile-brand strong,.mobile-brand span{display:block}
  .mobile-brand strong{color:#13304a;font-size:20px}
  .mobile-brand span{color:#7b8a99;font-size:10px}
}
@media(max-width:520px){
  .auth-page{display:block;padding:0;background:#fff}
  .auth-card{width:100%;min-height:100vh;border:0;border-radius:0;box-shadow:none}
  .auth-form-side{padding:28px 22px}
  .form-heading h2{font-size:29px}
}

/* Mobile layout — simplified and isolated */
.mobile-hero{display:none}
.mobile-form-card{display:contents}

@media(max-width:900px){
  .auth-page{padding:20px}
  .auth-card{grid-template-columns:1fr;max-width:560px;min-height:auto}
  .auth-hero{display:none}
  .auth-form-side{padding:42px 44px}
  .mobile-hero{display:none}
  .mobile-brand{display:flex;align-items:center;gap:11px;margin-bottom:28px}
  .mobile-brand img{width:52px;height:52px;object-fit:contain}
  .mobile-brand strong,.mobile-brand span{display:block}
  .mobile-brand strong{color:#13304a;font-size:20px}
  .mobile-brand span{color:#7b8a99;font-size:10px}
}

@media(max-width:520px){
  html,body{min-height:100%;background:#eef3f8}
  body{overflow-x:hidden}
  .auth-page{
    display:block;
    min-height:100vh;
    padding:0 14px 24px;
    background:#eef3f8;
  }
  .auth-card{
    width:100%;
    min-height:100vh;
    display:block;
    overflow:visible;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }
  .auth-form-side{
    display:block;
    width:100%;
    padding:0;
    background:transparent;
  }
  .mobile-hero{
    display:block;
    position:relative;
    margin:0 -14px;
    padding:24px 20px 34px;
    overflow:hidden;
    color:#fff;
    background:linear-gradient(135deg,#082d4d 0%,#075b67 100%);
  }
  .mobile-hero::after{
    content:"";
    position:absolute;
    width:190px;height:190px;
    right:-95px;top:-105px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.06);
  }
  .mobile-brand{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    gap:13px;
    margin:0;
  }
  .mobile-brand img{
    width:62px;height:62px;
    padding:6px;
    object-fit:contain;
    border:1px solid rgba(255,255,255,.17);
    border-radius:18px;
    background:rgba(255,255,255,.11);
  }
  .mobile-brand strong{display:block;color:#fff;font-size:25px;line-height:1.1}
  .mobile-brand span{display:block;margin-top:5px;color:#cfe2eb;font-size:11px}
  .mobile-hero>p{
    position:relative;
    z-index:1;
    display:block;
    margin:17px 0 0;
    max-width:340px;
    color:#dbeaf0;
    font-size:12px;
    line-height:1.55;
  }
  .mobile-feature-row{display:none}
  .mobile-form-card{
    display:block;
    position:relative;
    z-index:2;
    width:100%;
    margin:-14px 0 0;
    padding:22px 18px 18px;
    border:1px solid #e1e8ef;
    border-radius:19px;
    background:#fff;
    box-shadow:0 14px 34px rgba(16,48,72,.13);
  }
  .form-heading{margin-bottom:20px;text-align:left}
  .access-label{
    margin-bottom:9px;
    padding:6px 9px;
    border-radius:999px;
    background:#edf5ff;
    color:#1766c4;
    font-size:9px;
    letter-spacing:.8px;
  }
  .form-heading h2{margin:0;color:#102c46;font-size:26px;line-height:1.2}
  .form-heading p{margin-top:6px;color:#708196;font-size:12px}
  .field-group{margin-bottom:14px}
  .field-group>label{margin-bottom:6px;color:#344c63;font-size:12px}
  .field-control input{
    height:50px;
    padding-left:44px;
    border-color:#dbe4ed;
    border-radius:12px;
    background:#f8fafc;
    color:#17324a;
    font-size:14px;
  }
  .field-control input:-webkit-autofill,
  .field-control input:-webkit-autofill:hover,
  .field-control input:-webkit-autofill:focus{
    -webkit-text-fill-color:#17324a;
    -webkit-box-shadow:0 0 0 1000px #f8fafc inset;
    box-shadow:0 0 0 1000px #f8fafc inset;
    transition:background-color 9999s ease-out 0s;
  }
  .captcha-card{
    margin:3px 0 17px;
    padding:13px;
    border-color:#dce6ef;
    border-radius:14px;
    background:#f7fafc;
  }
  .captcha-header{margin-bottom:10px}
  .captcha-header strong{font-size:12px}
  .captcha-header small{font-size:10px;line-height:1.35}
  .captcha-question{font-size:12px}
  .login-button{height:51px;border-radius:12px;font-size:13px}
  .security-note{margin:14px 0 0;color:#8090a0;font-size:10px}
}

@media(max-width:360px){
  .auth-page{padding-left:10px;padding-right:10px}
  .mobile-hero{margin-left:-10px;margin-right:-10px;padding-left:16px;padding-right:16px}
  .mobile-brand img{width:56px;height:56px}
  .mobile-brand strong{font-size:22px}
  .mobile-form-card{padding-left:14px;padding-right:14px}
}


/* Mobile refinement v6: compact, centered and brighter identity */
@media(max-width:520px){
  .auth-page{padding-bottom:18px}
  .mobile-hero{
    padding:18px 18px 27px;
    text-align:center;
  }
  .mobile-brand{
    flex-direction:column;
    justify-content:center;
    gap:8px;
    text-align:center;
  }
  .mobile-brand img{
    width:76px;
    height:76px;
    padding:8px;
    border:1px solid rgba(255,255,255,.55);
    border-radius:22px;
    background:rgba(255,255,255,.94);
    box-shadow:0 8px 24px rgba(0,0,0,.18),0 0 0 5px rgba(255,255,255,.08);
    filter:brightness(1.1) saturate(1.08);
  }
  .mobile-brand strong{
    font-size:27px;
    line-height:1.05;
    letter-spacing:-.4px;
  }
  .mobile-brand span{
    margin-top:4px;
    font-size:11px;
    line-height:1.35;
  }
  .mobile-hero>p{
    margin:11px auto 0;
    max-width:320px;
    font-size:11px;
    line-height:1.45;
    text-align:center;
  }
  .mobile-form-card{
    margin-top:-12px;
    padding:18px 16px 15px;
    border-radius:18px;
  }
  .form-heading{
    margin-bottom:15px;
    text-align:center;
  }
  .access-label{
    margin-bottom:7px;
    padding:5px 9px;
  }
  .form-heading h2{font-size:24px}
  .form-heading p{margin-top:4px;font-size:11px}
  .field-group{margin-bottom:11px}
  .field-group>label{margin-bottom:5px;font-size:11px}
  .field-control input{
    height:46px;
    padding-left:41px;
    border-radius:11px;
    font-size:13px;
  }
  .field-control>i{left:15px;font-size:15px}
  .password-toggle{right:12px}
  .captcha-card{
    margin:2px 0 13px;
    padding:11px;
    border-radius:13px;
  }
  .captcha-header{margin-bottom:7px}
  .captcha-badge{width:34px;height:34px;border-radius:10px}
  .captcha-header strong{font-size:11px}
  .captcha-header small{font-size:9px}
  .captcha-question{margin-bottom:7px;font-size:11px}
  .captcha-card .field-control input{height:44px}
  .login-button{height:48px;border-radius:11px;font-size:12px}
  .security-note{margin-top:10px;font-size:9px;padding-bottom:2px}
}

@media(max-width:360px){
  .mobile-hero{padding-top:15px}
  .mobile-brand img{width:68px;height:68px}
  .mobile-brand strong{font-size:24px}
  .mobile-form-card{padding:16px 13px 13px}
}

/* Mobile login v7 — visual aligned with the approved mockup */
@media (max-width:520px){
  html,body{background:#032f58}
  .auth-page{
    min-height:100svh;
    padding:0 14px 22px;
    background:
      radial-gradient(circle at 100% 3%,rgba(38,191,202,.20),transparent 28%),
      radial-gradient(circle at 0 100%,rgba(0,157,219,.25),transparent 32%),
      linear-gradient(145deg,#062e60 0%,#064b75 62%,#047a8a 100%);
  }
  .auth-card{min-height:100svh;background:transparent}
  .auth-form-side{background:transparent}
  .mobile-hero{
    margin:0 -14px;
    padding:34px 20px 36px;
    background:transparent;
    text-align:center;
  }
  .mobile-hero::before{
    content:"";
    position:absolute;
    width:260px;height:260px;
    right:-150px;top:-145px;
    border:1px solid rgba(72,207,217,.26);
    border-radius:50%;
    box-shadow:0 0 0 42px rgba(72,207,217,.04),0 0 0 84px rgba(72,207,217,.025);
  }
  .mobile-hero::after{
    width:145px;height:145px;
    right:auto;left:-95px;top:auto;bottom:-25px;
    border:1px solid rgba(78,205,218,.16);
    background:transparent;
  }
  .mobile-brand{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    margin:0;
  }
  .mobile-brand img{
    width:136px;
    height:136px;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    filter:drop-shadow(0 14px 20px rgba(0,0,0,.22)) brightness(1.07) saturate(1.12);
    object-fit:contain;
  }
  .mobile-brand strong{
    margin-top:2px;
    color:#fff;
    font-size:39px;
    line-height:1;
    font-weight:850;
    letter-spacing:-1.2px;
  }
  .mobile-brand span{
    margin-top:7px;
    color:#f0f7fb;
    font-size:13px;
    font-weight:650;
    line-height:1.35;
  }
  .mobile-hero>p{
    position:relative;
    z-index:2;
    max-width:350px;
    margin:22px auto 0;
    color:#f0f7fa;
    font-size:13px;
    line-height:1.6;
  }
  .mobile-form-card{
    width:100%;
    margin:-8px 0 0;
    padding:20px 16px 17px;
    border:1px solid rgba(255,255,255,.82);
    border-radius:22px;
    background:rgba(255,255,255,.985);
    box-shadow:0 20px 46px rgba(0,28,57,.25);
  }
  .form-heading{margin-bottom:15px;text-align:left}
  .access-label{
    margin-bottom:11px;
    padding:7px 11px;
    border-radius:10px;
    background:#eaf3ff;
    color:#1267cf;
    font-size:10px;
    letter-spacing:.55px;
  }
  .form-heading h2{display:none}
  .form-heading p{display:none}
  .field-group{margin-bottom:12px}
  .field-group>label{
    margin-bottom:6px;
    color:#18324b;
    font-size:12px;
    font-weight:800;
  }
  .field-control input{
    height:50px;
    padding:0 45px;
    border:1px solid #cfdbe8;
    border-radius:11px;
    background:#fbfcfe;
    color:#102c46;
    font-size:13px;
  }
  .field-control input:focus{
    border-color:#2f89e8;
    box-shadow:0 0 0 3px rgba(47,137,232,.10);
  }
  .field-control>i{left:15px;color:#71859a;font-size:17px}
  .password-toggle{right:7px;color:#73879b}
  .captcha-card{
    margin:3px 0 14px;
    padding:12px;
    border:1px solid #bcdcff;
    border-radius:14px;
    background:linear-gradient(145deg,#f5faff,#fff);
  }
  .captcha-header{margin-bottom:9px}
  .captcha-badge{
    width:39px;height:39px;flex-basis:39px;
    border-radius:10px;
    background:linear-gradient(140deg,#0d62cc,#02b99c);
  }
  .captcha-header strong{color:#173a5d;font-size:12px}
  .captcha-header small{color:#6f8295;font-size:9px}
  .captcha-question{margin-bottom:8px;color:#253f58;font-size:12px}
  .captcha-question strong{color:#096ed6;font-size:14px}
  .captcha-card .field-control input{height:46px;background:#fff}
  .login-button{
    height:52px;
    border-radius:12px;
    background:linear-gradient(100deg,#0758d8,#0a8cf2);
    box-shadow:0 13px 26px rgba(8,102,219,.28);
    font-size:13px;
  }
  .security-note{
    margin:13px 0 0;
    padding:0 4px;
    color:#d1e6ef;
    font-size:10px;
  }
  .security-note i{color:#18d69d}
}

@media (max-width:380px){
  .mobile-hero{padding-top:26px;padding-bottom:30px}
  .mobile-brand img{width:116px;height:116px}
  .mobile-brand strong{font-size:34px}
  .mobile-brand span{font-size:12px}
  .mobile-hero>p{margin-top:17px;font-size:12px}
  .mobile-form-card{padding:17px 13px 14px}
}

/* Mobile login v8 — compact height, same approved visual */
@media (max-width:520px){
  .auth-page{padding-bottom:14px}
  .mobile-hero{
    margin:0 -14px;
    padding:18px 18px 20px;
  }
  .mobile-brand{gap:3px}
  .mobile-brand img{
    width:94px;
    height:94px;
    filter:drop-shadow(0 10px 16px rgba(0,0,0,.20)) brightness(1.08) saturate(1.12);
  }
  .mobile-brand strong{
    margin-top:0;
    font-size:32px;
    letter-spacing:-.8px;
  }
  .mobile-brand span{
    margin-top:4px;
    font-size:11px;
  }
  .mobile-hero>p{
    max-width:330px;
    margin:11px auto 0;
    font-size:11px;
    line-height:1.4;
  }
  .mobile-form-card{
    margin:-5px 0 0;
    padding:15px 14px 13px;
    border-radius:20px;
  }
  .form-heading{margin-bottom:10px}
  .access-label{
    margin-bottom:7px;
    padding:5px 9px;
    font-size:9px;
  }
  .field-group{margin-bottom:9px}
  .field-group>label{margin-bottom:4px;font-size:11px}
  .field-control input{
    height:44px;
    padding:0 42px;
    font-size:12px;
  }
  .field-control>i{font-size:15px}
  .password-toggle{width:32px;height:32px}
  .captcha-card{
    margin:2px 0 10px;
    padding:9px 10px;
    border-radius:12px;
  }
  .captcha-header{margin-bottom:6px;gap:8px}
  .captcha-badge{width:32px;height:32px;flex-basis:32px;border-radius:9px}
  .captcha-header strong{font-size:11px}
  .captcha-header small{display:none}
  .captcha-question{margin-bottom:6px;font-size:11px}
  .captcha-question strong{font-size:13px}
  .captcha-card .field-control input{height:42px}
  .login-button{height:46px;border-radius:11px;font-size:12px}
  .security-note{margin-top:9px;font-size:9px}
}

@media (max-width:380px){
  .mobile-hero{padding-top:15px;padding-bottom:17px}
  .mobile-brand img{width:84px;height:84px}
  .mobile-brand strong{font-size:29px}
  .mobile-brand span{font-size:10px}
  .mobile-hero>p{margin-top:9px;font-size:10px}
  .mobile-form-card{padding:13px 12px 11px}
  .field-control input{height:42px}
  .captcha-card .field-control input{height:40px}
  .login-button{height:44px}
}