/* KCB Accurate V3.5.7 — Premium Login Redesign */
.login-page{
  --login-navy:#08213a;
  --login-navy-2:#0d3150;
  --login-gold:#d9a33e;
  --login-text:#081d3a;
  --login-muted:#7588a1;
  min-height:100vh;
  padding:24px 28px;
  margin:0;
  background:
    radial-gradient(circle at 85% 8%,rgba(47,101,151,.18),transparent 30%),
    linear-gradient(135deg,#e9f1f8 0%,#f6f9fc 48%,#e7eff7 100%);
  overflow-x:hidden;
}
.login-page .login-shell{
  width:min(1580px,calc(100vw - 56px));
  min-height:calc(100vh - 48px);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1.62fr) minmax(470px,.95fr);
  overflow:hidden;
  border:1px solid rgba(17,52,84,.08);
  border-radius:18px;
  background:#fff;
  box-shadow:0 24px 70px rgba(11,41,68,.16);
}
.login-page .login-hero{
  position:relative;
  overflow:hidden;
  min-width:0;
  padding:54px 54px 44px 58px;
  display:block;
  background:
    radial-gradient(circle at 72% 12%,rgba(53,118,171,.24),transparent 28%),
    radial-gradient(circle at 2% 80%,rgba(14,74,116,.18),transparent 34%),
    linear-gradient(145deg,#08223a 0%,#0b2c48 57%,#071f36 100%);
  color:#fff;
}
.login-page .login-hero:before{
  content:"";
  position:absolute;
  inset:-120px auto auto 39%;
  width:420px;
  height:1050px;
  border:1px solid rgba(83,142,190,.18);
  border-radius:52% 0 0 48%;
  transform:rotate(8deg);
  background:linear-gradient(180deg,rgba(47,103,151,.07),rgba(255,255,255,.01));
  pointer-events:none;
}
.login-page .hero-copy{
  position:relative;
  z-index:3;
  width:56%;
  max-width:660px;
}
.login-page .login-brand-row{
  display:flex;
  align-items:center;
  gap:22px;
  width:max-content;
  margin-bottom:64px;
}
.login-page .brandmark.login-brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1;
}
.login-page .brandmark.login-brand b{
  font-size:68px;
  line-height:.9;
  letter-spacing:-1px;
  color:#fff;
}
.login-page .brandmark.login-brand span{
  margin-top:10px;
  font-size:24px;
  letter-spacing:8px;
  color:var(--login-gold);
  font-weight:900;
}
.login-page .brandmark.login-brand small{
  margin-top:11px;
  font-size:13px;
  letter-spacing:5px;
  color:#afc1d3;
}
.login-page .brand-arrow{
  position:relative;
  width:64px;
  height:10px;
  margin-top:-42px;
  border-radius:99px;
  background:var(--login-gold);
  box-shadow:0 3px 10px rgba(217,163,62,.2);
}
.login-page .brand-arrow:after{
  content:"";
  position:absolute;
  right:-1px;
  top:50%;
  width:28px;
  height:28px;
  border-top:9px solid var(--login-gold);
  border-right:9px solid var(--login-gold);
  transform:translateY(-50%) rotate(45deg);
  border-radius:2px;
}
.login-page .hero-copy h1{
  margin:0 0 20px;
  font-size:clamp(48px,4.1vw,76px);
  line-height:1.02;
  letter-spacing:-2.7px;
  font-weight:850;
}
.login-page .hero-copy h1 em{
  display:block;
  margin-top:4px;
  color:var(--login-gold);
  font-style:normal;
}
.login-page .hero-copy>p{
  max-width:660px;
  margin:0;
  font-size:clamp(17px,1.18vw,22px);
  line-height:1.48;
  color:#ced9e6;
}
.login-page .login-business-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(112px,1fr));
  gap:14px;
  margin-top:38px;
  width:min(625px,100%);
}
.login-page .business-tile{
  min-height:112px;
  padding:16px 8px 12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-align:center;
  border:1px solid rgba(177,205,229,.17);
  border-radius:14px;
  background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.login-page .business-tile .business-icon{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  font-size:28px;
  line-height:1;
  filter:saturate(.95);
}
.login-page .business-tile span:last-child{
  color:#f5f8fb;
  font-size:13px;
  font-weight:700;
  line-height:1.22;
}
.login-page .hero-foot{
  position:absolute;
  left:58px;
  bottom:42px;
  z-index:4;
  display:flex;
  align-items:center;
  gap:14px;
  color:#9fb3c8;
  font-size:12px;
}
.login-page .hero-dots{display:flex;gap:8px;align-items:center}
.login-page .hero-dots i{width:9px;height:9px;border-radius:50%;background:#5c7d99;display:block}
.login-page .hero-dots i:first-child{width:14px;border-radius:6px;background:var(--login-gold)}
.login-page .hero-foot:after{content:"";width:32px;height:1px;background:#62829d;order:2}
.login-page .hero-foot span{order:3}
.login-page .hero-dots{order:1}
.login-page .hero-collage{
  position:absolute;
  z-index:2;
  top:0;
  right:-8px;
  bottom:0;
  width:45%;
  background-image:linear-gradient(90deg,rgba(8,34,58,1) 0%,rgba(8,34,58,.65) 9%,rgba(8,34,58,0) 28%),url('../img/login_business_collage.jpg');
  background-size:cover;
  background-position:center top;
  filter:saturate(.95) contrast(1.02);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 18%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 18%,#000 100%);
}
.login-page .hero-collage:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(8,34,58,.04),rgba(8,34,58,.02) 60%,rgba(8,34,58,.24));
  pointer-events:none;
}
.login-page .login-form{
  position:relative;
  min-width:0;
  padding:58px 66px 38px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:
    radial-gradient(circle at 100% 100%,rgba(31,106,168,.055),transparent 27%),
    linear-gradient(180deg,#fff,#fff);
}
.login-page .login-form:after{
  content:"";
  position:absolute;
  right:-20px;
  bottom:-15px;
  width:120px;
  height:120px;
  opacity:.18;
  background-image:radial-gradient(#6c8eaa 1.2px,transparent 1.2px);
  background-size:9px 9px;
  pointer-events:none;
}
.login-page .login-logo{
  margin:0 0 48px;
  text-align:center;
}
.login-page .login-logo .brandmark{
  align-items:center;
}
.login-page .login-logo .brandmark b{
  font-size:56px;
  letter-spacing:-1px;
  color:#071f3d;
}
.login-page .login-logo .brandmark span{
  margin-top:8px;
  color:#c99a3d;
  font-size:21px;
  letter-spacing:7px;
}
.login-page .login-logo .brandmark small{
  margin-top:9px;
  font-size:10px;
  letter-spacing:4px;
  color:#6c8199;
}
.login-page .login-logo .mini-arrow{
  position:absolute;
  margin-left:112px;
  margin-top:-54px;
  width:50px;
  height:7px;
  border-radius:99px;
  background:#cf9c3c;
}
.login-page .login-logo .mini-arrow:after{
  content:"";
  position:absolute;
  right:-1px;
  top:50%;
  width:21px;
  height:21px;
  border-top:6px solid #cf9c3c;
  border-right:6px solid #cf9c3c;
  transform:translateY(-50%) rotate(45deg);
}
.login-page .form-wrap{
  width:100%;
  max-width:530px;
  margin:0 auto;
  position:relative;
  z-index:2;
}
.login-page .form-wrap h2{
  margin:0 0 10px;
  font-size:clamp(31px,2.15vw,42px);
  line-height:1.08;
  letter-spacing:-1.15px;
  color:#071a36;
  font-weight:850;
}
.login-page .form-wrap>p{
  margin:0 0 32px;
  color:#70839b;
  font-size:16px;
  line-height:1.5;
}
.login-page .form-wrap form>label{
  display:block;
  margin:19px 0 8px;
  color:#071a36;
  font-size:13px;
  font-weight:800;
}
.login-page .login-input-wrap{
  position:relative;
}
.login-page .login-input-wrap .field-icon{
  position:absolute;
  left:18px;
  top:50%;
  transform:translateY(-50%);
  width:22px;
  height:22px;
  color:#1c3856;
  pointer-events:none;
}
.login-page .login-input-wrap .field-icon svg,
.login-page .password-toggle svg,
.login-page .offline-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.login-page .login-input-wrap input{
  width:100%;
  height:55px;
  margin:0;
  padding:0 52px 0 58px;
  border:1px solid #cfdbe7;
  border-radius:10px;
  outline:0;
  background:#fbfdff;
  color:#0a2340;
  font-size:15px;
  transition:border .18s ease,box-shadow .18s ease,background .18s ease;
}
.login-page .login-input-wrap input::placeholder{color:#9baabd}
.login-page .login-input-wrap input:focus{
  border-color:#6294bd;
  background:#fff;
  box-shadow:0 0 0 4px rgba(48,123,184,.09);
}
.login-page .password-toggle{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  padding:7px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#193755;
}
.login-page .password-toggle:hover{background:#edf4fa}
.login-page .form-row{
  margin:14px 0 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}
.login-page .remember-check{
  display:inline-flex!important;
  align-items:center;
  gap:9px;
  margin:0!important;
  font-size:13px!important;
  font-weight:700!important;
  color:#1a314b!important;
  cursor:pointer;
}
.login-page .remember-check input{
  appearance:none;
  width:20px!important;
  height:20px!important;
  margin:0!important;
  padding:0!important;
  border:1px solid #9fb3c5!important;
  border-radius:5px!important;
  background:#fff!important;
  display:grid;
  place-items:center;
}
.login-page .remember-check input:checked{background:#092846!important;border-color:#092846!important}
.login-page .remember-check input:checked:after{content:"✓";color:#fff;font-size:14px;font-weight:900;line-height:1}
.login-page .forgot-link{font-size:13px;font-weight:650;color:#1673e6}
.login-page .login-submit{
  width:100%;
  height:58px;
  border:0;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  background:linear-gradient(90deg,#0b2a47,#0f385b);
  color:#fff;
  font-size:17px;
  font-weight:850;
  box-shadow:0 10px 22px rgba(9,39,67,.14);
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
}
.login-page .login-submit:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(9,39,67,.20);filter:brightness(1.04)}
.login-page .login-submit .submit-arrow{font-size:28px;font-weight:400;line-height:1;margin-top:-2px}
.login-page .login-divider{
  display:flex;
  align-items:center;
  gap:16px;
  margin:27px 0 20px;
  color:#8596aa;
  font-size:12px;
}
.login-page .login-divider:before,.login-page .login-divider:after{content:"";height:1px;flex:1;background:#d9e2eb}
.login-page .offline-card{
  margin:0;
  padding:15px 18px;
  min-height:84px;
  display:flex;
  align-items:center;
  gap:16px;
  border:1px solid #eef2f6;
  border-radius:11px;
  background:linear-gradient(135deg,#f7f9fc,#fbfdff);
  box-shadow:none;
}
.login-page .offline-icon{
  width:44px;
  height:44px;
  flex:0 0 44px;
  padding:7px;
  color:#0b2c4b;
}
.login-page .offline-card b{display:block;margin-bottom:5px;color:#102c49;font-size:13px}
.login-page .offline-card small{display:block;color:#73869c;font-size:11px;line-height:1.45}
.login-page .demo-note{display:block;text-align:center;margin-top:15px;color:#92a0b1;font-size:10px}
.login-page .notice{margin:0 0 18px;padding:12px 14px;border-radius:9px;font-size:12px;line-height:1.42}
.login-page .notice.danger{border:1px solid #ffd0d0;background:#fff0f0;color:#bb3535}

@media(max-width:1380px){
  .login-page{padding:16px 18px}
  .login-page .login-shell{width:calc(100vw - 36px);min-height:calc(100vh - 32px);grid-template-columns:minmax(0,1.48fr) minmax(430px,.95fr)}
  .login-page .login-hero{padding:42px 42px 38px 44px}
  .login-page .hero-copy{width:58%}
  .login-page .login-brand-row{margin-bottom:46px}
  .login-page .brandmark.login-brand b{font-size:56px}
  .login-page .brandmark.login-brand span{font-size:20px;letter-spacing:7px}
  .login-page .brandmark.login-brand small{font-size:10px;letter-spacing:4px}
  .login-page .login-business-grid{gap:11px;grid-template-columns:repeat(4,minmax(100px,1fr));width:min(560px,100%)}
  .login-page .business-tile{min-height:96px;padding:12px 7px}
  .login-page .hero-foot{left:44px;bottom:30px}
  .login-page .login-form{padding:42px 52px 30px}
  .login-page .login-logo{margin-bottom:34px}
}
@media(max-width:1120px){
  .login-page{padding:12px;background:#eef4fa}
  .login-page .login-shell{width:calc(100vw - 24px);min-height:calc(100vh - 24px);grid-template-columns:1fr}
  .login-page .login-hero{min-height:380px;padding:34px 36px}
  .login-page .hero-copy{width:62%}
  .login-page .login-brand-row{margin-bottom:26px}
  .login-page .brandmark.login-brand b{font-size:42px}
  .login-page .brandmark.login-brand span{font-size:15px;letter-spacing:5px}
  .login-page .brandmark.login-brand small{font-size:8px;letter-spacing:3px}
  .login-page .brand-arrow{width:46px;height:7px;margin-top:-30px}
  .login-page .brand-arrow:after{width:20px;height:20px;border-width:6px}
  .login-page .hero-copy h1{font-size:44px;letter-spacing:-1.7px}
  .login-page .hero-copy>p{font-size:15px;max-width:500px}
  .login-page .login-business-grid{grid-template-columns:repeat(4,1fr);width:520px;max-width:100%;margin-top:24px}
  .login-page .business-tile{min-height:78px}
  .login-page .business-tile .business-icon{font-size:21px;width:26px;height:26px}
  .login-page .business-tile span:last-child{font-size:11px}
  .login-page .hero-foot{display:none}
  .login-page .hero-collage{width:40%}
  .login-page .login-form{padding:40px 34px 34px;min-height:650px}
}
@media(max-width:720px){
  .login-page{padding:0}
  .login-page .login-shell{width:100%;min-height:100vh;border-radius:0;border:0}
  .login-page .login-hero{display:none}
  .login-page .login-form{padding:34px 22px;min-height:100vh}
  .login-page .login-logo{margin-bottom:32px}
  .login-page .login-logo .brandmark b{font-size:46px}
  .login-page .form-wrap h2{font-size:30px}
  .login-page .form-wrap>p{font-size:14px;margin-bottom:24px}
}