/* Dedicated client login design. Loaded after client.css to avoid inherited dashboard rules. */
.client-auth-screen{
  --auth-bg:#f6f8fb;
  --auth-text:#0f172a;
  --auth-muted:#5b6472;
  --auth-line:#e5e9f2;
  --auth-brand:#0b8a5b;
  --auth-brand-dark:#087049;
  --auth-sky:#0ea5e9;
  --auth-focus:rgba(11,138,91,.16);
  display:block!important;
  min-height:100dvh;
  margin:0;
  padding:16px;
  overflow-x:hidden;
  color:var(--auth-text);
  background:
    radial-gradient(720px 320px at 8% -8%,rgba(14,165,233,.16),transparent 60%),
    radial-gradient(640px 280px at 100% 0,rgba(11,138,91,.14),transparent 58%),
    var(--auth-bg)!important;
}
.client-auth-screen .client-auth-shell{
  width:min(1040px,100%)!important;
  min-height:calc(100dvh - 32px);
  margin:0 auto;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(360px,430px)!important;
  gap:18px;
  align-items:center;
}
.client-auth-screen .auth-card,
.client-auth-screen .auth-visual{
  border:1px solid var(--auth-line)!important;
  border-radius:18px!important;
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 18px 46px rgba(15,23,42,.10)!important;
}
.client-auth-screen .auth-card{
  position:relative;
  z-index:5;
  width:100%;
  max-height:none!important;
  overflow:visible!important;
  align-self:center;
  padding:28px!important;
  background:rgba(255,255,255,.97)!important;
}
.client-auth-screen .auth-visual{
  position:relative;
  min-height:560px!important;
  padding:28px!important;
  display:grid!important;
  align-content:space-between;
  gap:28px;
  overflow:hidden;
  color:#fff;
  background:linear-gradient(135deg,#0b8a5b 0%,#0f8fc6 100%)!important;
}
.client-auth-screen .auth-visual:before{
  content:"";
  position:absolute;
  right:-120px;
  bottom:-140px;
  width:340px;
  height:340px;
  border-radius:50%;
  background:rgba(255,255,255,.14);
  animation:floatAuth 12s ease-in-out infinite;
}
.client-auth-screen .auth-brand{
  position:relative;
  z-index:1;
  display:flex!important;
  align-items:center;
  gap:10px;
  min-width:0;
  width:max-content;
  max-width:100%;
  color:#fff!important;
  text-decoration:none;
}
.client-auth-screen .auth-brand img,
.client-auth-screen .auth-brand-mark{
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  max-width:36px!important;
  max-height:36px!important;
  padding:5px!important;
  border-radius:10px!important;
  background:#fff!important;
  object-fit:contain!important;
  display:grid!important;
  place-items:center;
  flex:0 0 36px!important;
  color:var(--auth-brand);
  font-size:15px;
  font-weight:900;
  line-height:1;
  box-shadow:0 8px 18px rgba(2,6,23,.14);
}
.client-auth-screen .auth-brand span:last-child{
  min-width:0;
}
.client-auth-screen .auth-brand strong,
.client-auth-screen .auth-brand small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.client-auth-screen .auth-brand strong{
  max-width:260px;
  font-size:14px;
  line-height:1.2;
}
.client-auth-screen .auth-brand small{
  margin-top:2px;
  color:rgba(255,255,255,.76);
  font-size:11px;
  font-weight:700;
}
.client-auth-screen .auth-hero{
  position:relative;
  z-index:1;
  max-width:580px;
}
.client-auth-screen .auth-hero .eyebrow,
.client-auth-screen .auth-card-head .eyebrow{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  min-height:26px;
  align-items:center;
  padding:4px 9px;
  border-radius:999px;
  letter-spacing:0;
  font-size:11px;
  font-weight:900;
}
.client-auth-screen .auth-hero .eyebrow{
  background:rgba(255,255,255,.16);
  color:#fff;
}
.client-auth-screen .auth-card-head .eyebrow{
  background:#e8f6ef;
  color:var(--auth-brand-dark);
}
.client-auth-screen .auth-hero h1{
  max-width:13.5ch;
  margin:14px 0 12px;
  font-size:clamp(34px,4.8vw,50px);
  line-height:1.04;
  letter-spacing:0;
}
.client-auth-screen .auth-hero p{
  max-width:58ch;
  margin:0;
  color:rgba(255,255,255,.84);
  font-size:15px;
  line-height:1.65;
}
.client-auth-screen .auth-preview{
  position:relative;
  z-index:1;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px;
}
.client-auth-screen .auth-preview div{
  min-width:0;
  padding:12px;
  border-radius:14px!important;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.13);
  backdrop-filter:blur(8px);
}
.client-auth-screen .auth-preview span{
  display:block;
  color:rgba(255,255,255,.72);
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
}
.client-auth-screen .auth-preview strong{
  display:block;
  margin-top:5px;
  overflow:hidden;
  color:#fff;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:14px;
}
.client-auth-screen .auth-card-head h2{
  margin:7px 0 5px;
  font-size:30px;
  line-height:1.14;
  letter-spacing:0;
}
.client-auth-screen .auth-card-head p{
  margin:0;
  color:var(--auth-muted);
  font-size:14px;
  line-height:1.55;
}
.client-auth-screen .auth-tabs{
  position:relative;
  z-index:10;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:4px;
  margin-top:18px;
  padding:4px;
  border-radius:14px!important;
  background:#eef2f8!important;
}
.client-auth-screen .auth-tabs button{
  pointer-events:auto!important;
  position:relative;
  z-index:11;
  min-width:0;
  min-height:44px;
  padding:8px 6px;
  border:0;
  border-radius:11px!important;
  color:#667085;
  background:transparent;
  font-size:13px;
  font-weight:850;
  line-height:1.15;
  cursor:pointer;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease,transform .12s ease;
}
.client-auth-screen .auth-tabs button.active{
  background:#fff!important;
  color:var(--auth-brand)!important;
  box-shadow:0 1px 2px rgba(15,23,42,.06),0 5px 14px rgba(15,23,42,.06);
}
.client-auth-screen .auth-tabs button:active,
.client-auth-screen .btn:active,
.client-auth-screen .login-actions a:active{
  transform:scale(.98);
}
.client-auth-screen .auth-panel.active{
  display:grid!important;
  animation:rise .22s ease both;
}
.client-auth-screen .form-stack{
  margin-top:16px;
  gap:13px;
}
.client-auth-screen .form-grid-2{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px;
}
.client-auth-screen .form-stack label{
  display:grid!important;
  gap:7px;
  color:#344054;
  font-size:13px;
  font-weight:850;
}
.client-auth-screen .form-stack input,
.client-auth-screen .form-stack select,
.client-auth-screen .form-stack textarea{
  width:100%;
  min-height:48px;
  border:1px solid #cfd8e3;
  border-radius:12px!important;
  padding:10px 12px;
  background:#fff;
  color:var(--auth-text);
  font-size:16px;
  outline:none;
}
.client-auth-screen .form-stack input:focus,
.client-auth-screen .form-stack select:focus,
.client-auth-screen .form-stack textarea:focus,
.client-auth-screen .auth-tabs button:focus-visible,
.client-auth-screen .login-actions a:focus-visible,
.client-auth-screen .btn:focus-visible{
  outline:none;
  border-color:var(--auth-brand);
  box-shadow:0 0 0 4px var(--auth-focus);
}
.client-auth-screen .btn.primary,
.client-auth-screen .btn.block{
  width:100%;
  min-height:48px;
  border-radius:12px!important;
}
.client-auth-screen .login-actions{
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-top:16px;
}
.client-auth-screen .login-actions a{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  border-radius:10px;
  color:var(--auth-brand)!important;
  font-size:13px;
  font-weight:850;
  text-decoration:none;
}
.client-auth-screen .auth-modal-card{
  border-radius:18px!important;
}
.client-auth-screen .modal-check{
  width:50px;
  height:50px;
}
.client-auth-screen .otp-inputs{
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
}
.client-auth-screen .otp-inputs input{
  min-width:0;
  height:50px;
  font-size:20px;
}
@media(max-width:900px){
  .client-auth-screen .client-auth-shell{
    min-height:0;
    grid-template-columns:1fr!important;
    align-items:start;
  }
  .client-auth-screen .auth-card{
    order:1;
  }
  .client-auth-screen .auth-visual{
    order:2;
    min-height:0!important;
  }
  .client-auth-screen .auth-hero h1{
    max-width:none;
    font-size:30px;
  }
}
@media(max-width:560px){
  .client-auth-screen{
    padding:10px;
  }
  .client-auth-screen .client-auth-shell{
    gap:10px;
  }
  .client-auth-screen .auth-card,
  .client-auth-screen .auth-visual{
    border-radius:16px!important;
  }
  .client-auth-screen .auth-card{
    padding:16px!important;
  }
  .client-auth-screen .auth-visual{
    padding:16px!important;
    gap:16px;
  }
  .client-auth-screen .auth-brand img,
  .client-auth-screen .auth-brand-mark{
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    max-width:32px!important;
    max-height:32px!important;
    flex-basis:32px!important;
    border-radius:9px!important;
    padding:4px!important;
  }
  .client-auth-screen .auth-brand strong{
    max-width:220px;
    font-size:13px;
  }
  .client-auth-screen .auth-card-head h2{
    font-size:24px;
  }
  .client-auth-screen .auth-tabs button{
    font-size:11px;
    padding:7px 3px;
  }
  .client-auth-screen .form-grid-2{
    grid-template-columns:1fr!important;
  }
  .client-auth-screen .auth-hero h1{
    font-size:24px;
  }
  .client-auth-screen .auth-hero p{
    font-size:13px;
    line-height:1.5;
  }
  .client-auth-screen .auth-preview{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px;
  }
  .client-auth-screen .auth-preview div{
    padding:8px 7px;
  }
  .client-auth-screen .auth-preview span{
    font-size:9px;
  }
  .client-auth-screen .auth-preview strong{
    font-size:11px;
  }
  .client-auth-screen .login-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr;
    text-align:center;
  }
  .client-auth-screen .login-actions a{
    justify-content:center;
  }
}
@media(max-width:380px){
  .client-auth-screen .auth-preview,
  .client-auth-screen .login-actions{
    grid-template-columns:1fr!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .client-auth-screen *,
  .client-auth-screen *:before,
  .client-auth-screen *:after{
    animation:none!important;
    transition:none!important;
  }
}