:root{
  --iw-green:#0a8f50;
  --iw-green-2:#12b761;
  --iw-green-deep:#073c2b;
  --iw-ink:#0b2920;
  --iw-muted:#5c746b;
  --iw-line:#d9e7df;
  --iw-soft:#eff7f2;
  --iw-soft-2:#f8fbf9;
  --iw-white:#fff;
  --iw-red:#b42318;
  --iw-shadow:0 26px 80px rgba(7,60,43,.13);
}

html{
  width:100%;
  min-width:0;
  min-height:100%;
  overflow-x:clip;
  background:#f3f8f5;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

*,*::before,*::after{box-sizing:border-box}

body.client-auth-page{
  margin:0;
  width:100%;
  min-width:0;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(16px,4vw,32px);
  overflow-x:clip;
  overscroll-behavior-x:none;
  color:var(--iw-ink);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 18% 10%,rgba(18,183,97,.11),transparent 34%),
    radial-gradient(circle at 90% 86%,rgba(10,143,80,.08),transparent 32%),
    linear-gradient(180deg,#f8fbf9 0%,#eef6f1 100%);
}

.auth-shell{
  width:min(100%,640px);
  min-width:0;
  margin-inline:auto;
}

.auth-card{
  position:relative;
  width:100%;
  min-width:0;
  overflow:hidden;
  background:rgba(255,255,255,.98);
  border:1px solid var(--iw-line);
  border-radius:28px;
  box-shadow:var(--iw-shadow);
}

.auth-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:5px;
  background:linear-gradient(90deg,var(--iw-green-deep),var(--iw-green),#38d978);
}

.auth-content{
  min-width:0;
  padding:clamp(24px,5vw,40px);
}

.auth-brand{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-width:0;
  margin-bottom:24px;
}

.auth-brand-link{
  display:block;
  flex:0 1 220px;
  min-width:0;
  text-decoration:none;
}

.auth-brand-logo{
  display:block;
  width:100%;
  max-width:220px;
  height:auto;
  object-fit:contain;
}

.auth-secure-badge{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 11px;
  border:1px solid #cfe8d9;
  border-radius:999px;
  background:#eef9f2;
  color:#087845;
  font-size:12px;
  font-weight:850;
  white-space:nowrap;
}

.auth-secure-badge::before{
  content:"✓";
  display:grid;
  place-items:center;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--iw-green);
  color:#fff;
  font-size:11px;
  line-height:1;
}

.auth-eyebrow{
  margin:0 0 10px;
  color:var(--iw-green);
  font-size:12px;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.auth-title{
  max-width:13ch;
  margin:0;
  color:var(--iw-ink);
  font-size:clamp(34px,7vw,50px);
  line-height:1.02;
  letter-spacing:-.045em;
  text-wrap:balance;
  overflow-wrap:normal;
}

.auth-lead{
  max-width:55ch;
  margin:18px 0 0;
  color:var(--iw-muted);
  font-size:16px;
  line-height:1.65;
}

.auth-panel{
  min-width:0;
  margin-top:26px;
  padding:18px;
  border:1px solid var(--iw-line);
  border-radius:20px;
  background:var(--iw-soft-2);
}

.auth-panel-title{
  margin:0 0 12px;
  color:#21453a;
  font-size:13px;
  font-weight:850;
}

.google-wrap,
#googleButton{
  width:100%;
  max-width:100%;
  min-width:0;
}

.google-wrap{
  min-height:44px;
  display:block;
  overflow:hidden;
}

#googleButton>div,
#googleButton iframe{
  max-width:100%!important;
}

#googleButton iframe{
  display:block!important;
  margin:0!important;
}

.status{
  min-height:1.4em;
  margin:14px 0 0;
  color:#087845;
  font-size:13px;
  font-weight:850;
  line-height:1.45;
}

.status.err{color:var(--iw-red)}

.account-confirm{
  min-width:0;
  margin-top:24px;
  padding:16px;
  border:1px solid #cfe3d8;
  border-radius:18px;
  background:#f4faf6;
}

.account-confirm strong{
  display:block;
  margin-bottom:12px;
  color:#204b3c;
  line-height:1.45;
  overflow-wrap:anywhere;
}

.account-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.account-actions button{
  min-width:0;
  border:0;
  border-radius:12px;
  padding:12px 15px;
  font:inherit;
  font-weight:850;
  line-height:1.2;
  cursor:pointer;
}

.account-actions .primary{background:var(--iw-green);color:#fff}
.account-actions .secondary{background:#e8f2ed;color:#173a2f}
.account-actions button:focus-visible,.back:focus-visible,.auth-brand-link:focus-visible{outline:3px solid rgba(18,183,97,.28);outline-offset:3px}

.auth-note{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px;
  margin-top:18px;
  padding:15px;
  border:1px solid #d8eadd;
  border-radius:16px;
  background:#edf8f1;
  color:#526d63;
  font-size:13px;
  line-height:1.55;
}

.auth-note-icon{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#dff3e7;
  color:#087845;
  font-weight:950;
}

.auth-note strong{color:#315749}

.auth-back-row{
  display:flex;
  justify-content:center;
  margin-top:20px;
}

.back{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:#4e6b61;
  font-size:13px;
  font-weight:850;
  text-decoration:none;
}
.back:hover{color:#087845}

@media (max-width:560px){
  body.client-auth-page{
    align-items:flex-start;
    padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  }
  .auth-shell{margin-block:clamp(14px,5vh,34px)}
  .auth-card{border-radius:22px}
  .auth-content{padding:24px 20px 22px}
  .auth-brand{align-items:flex-start;margin-bottom:20px}
  .auth-brand-link{flex-basis:178px}
  .auth-brand-logo{max-width:178px}
  .auth-secure-badge{padding:7px 9px;font-size:11px}
  .auth-title{max-width:11ch;font-size:clamp(32px,10vw,42px)}
  .auth-lead{font-size:15px;line-height:1.6}
  .auth-panel{margin-top:22px;padding:14px;border-radius:16px}
  .account-confirm{margin-top:20px;padding:14px}
  .account-actions{display:grid;grid-template-columns:1fr}
  .account-actions button{width:100%}
  .auth-note{grid-template-columns:28px 1fr;padding:13px 12px}
  .auth-note-icon{width:28px;height:28px;border-radius:9px}
}

@media (max-width:380px){
  .auth-content{padding-inline:17px}
  .auth-brand{gap:10px}
  .auth-brand-link{flex-basis:154px}
  .auth-brand-logo{max-width:154px}
  .auth-secure-badge span{display:none}
  .auth-secure-badge{padding:7px}
  .auth-title{font-size:31px}
}

@media (max-height:700px) and (min-width:561px){
  body.client-auth-page{align-items:flex-start}
  .auth-shell{margin-block:20px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}