.auth-gate{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  min-height:100dvh;
  padding:max(24px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
  overflow:auto;
  background:
    radial-gradient(circle at 20% 10%,rgba(48,211,120,.12),transparent 34%),
    radial-gradient(circle at 85% 85%,rgba(47,135,211,.11),transparent 38%),
    #07111c;
}
.auth-gate[hidden]{display:none}
.auth-card{
  position:relative;
  width:min(100%,430px);
  box-sizing:border-box;
  padding:30px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:26px;
  background:linear-gradient(155deg,rgba(19,34,49,.98),rgba(12,25,37,.98));
  box-shadow:0 28px 80px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.035);
}
.auth-card-wide{width:min(100%,510px)}
.auth-brand{display:flex;flex-direction:column;align-items:center;margin-bottom:24px}
.auth-logo{
  display:block;
  width:70px;
  height:70px;
  margin:0 0 11px;
  border:1px solid rgba(103,225,159,.2);
  border-radius:20px;
  box-shadow:0 12px 32px rgba(0,0,0,.28);
}
.auth-brand-name{color:#f4f7fb;font-size:18px;font-weight:750;letter-spacing:-.25px}
.auth-brand-name span{color:#8395a8;font-weight:500}
.auth-heading{margin-bottom:24px;text-align:center}
.auth-card .auth-heading h2,.auth-card h2{margin:0 0 8px;color:#f4f7fb;font-size:26px;line-height:1.15;letter-spacing:-.55px}
.auth-card .auth-heading p,.auth-card>p{margin:0;color:#91a3b7;font-size:14px;line-height:1.5}
.auth-field{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.auth-field label{color:#c9d4df;font-size:13px;font-weight:650}
.auth-field input,.auth-field select{
  width:100%;
  min-height:49px;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.12);
  border-radius:13px;
  padding:13px 14px;
  background:#07111c;
  color:#fff;
  font-size:16px;
  outline:none;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.auth-field input::placeholder{color:#607184}
.auth-field input:hover,.auth-field select:hover{border-color:rgba(255,255,255,.2)}
.auth-field input:focus,.auth-field select:focus{
  border-color:rgba(103,225,159,.68);
  background:#091522;
  box-shadow:0 0 0 3px rgba(103,225,159,.1);
}
.auth-input-wrap{position:relative}
.auth-input-wrap input{padding-right:50px}
.auth-password-toggle{
  position:absolute;
  top:50%;
  right:7px;
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  padding:0;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#7f91a4;
  cursor:pointer;
}
.auth-password-toggle:hover,.auth-password-toggle:focus-visible{background:rgba(255,255,255,.06);color:#d8e2eb;outline:none}
.auth-password-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.auth-password-toggle.is-visible{color:#67e19f}
.auth-form-options{display:flex;justify-content:flex-end;margin:-4px 0 18px}
.auth-inline-link,.auth-back,.auth-switch button{
  padding:0;
  border:0;
  background:transparent;
  color:#71c6ff;
  font:inherit;
  font-size:13px;
  font-weight:650;
  cursor:pointer;
}
.auth-inline-link:hover,.auth-back:hover,.auth-switch button:hover{text-decoration:underline}
.auth-submit{
  width:100%;
  min-height:49px;
  border:1px solid rgba(103,225,159,.38);
  border-radius:13px;
  padding:13px 17px;
  background:linear-gradient(135deg,#63dd9a,#36bf78);
  color:#06140e;
  box-shadow:0 10px 28px rgba(54,191,120,.16);
  font-size:16px;
  font-weight:800;
  cursor:pointer;
  transition:filter .18s ease,transform .12s ease,opacity .18s ease;
}
.auth-submit:hover{filter:brightness(1.055)}
.auth-submit:active{transform:scale(.985)}
.auth-submit:focus-visible{outline:3px solid rgba(103,225,159,.22);outline-offset:3px}
.auth-submit:disabled{opacity:.5;cursor:wait;transform:none}
.auth-secondary{
  width:100%;
  min-height:47px;
  margin-top:11px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:13px;
  padding:12px 16px;
  background:rgba(255,255,255,.035);
  color:#c7d4df;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
}
.auth-secondary:hover,.auth-secondary:focus-visible{border-color:rgba(103,225,159,.3);background:rgba(103,225,159,.07);color:#eff9f3;outline:none}
.auth-secondary:disabled{opacity:.5;cursor:wait}
.auth-resend-link{margin-top:3px;color:#8fa1b4;font-size:12px}
.auth-message{
  min-height:20px;
  margin:13px 0 0!important;
  color:#ffabab!important;
  font-size:13px!important;
  line-height:1.4!important;
  text-align:center;
}
.auth-message.auth-success{color:#6ee7a2!important}
.auth-switch{
  display:flex;
  justify-content:center;
  gap:6px;
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.075);
  color:#8fa1b4;
  font-size:13px;
}
.auth-switch button{color:#67e19f}
.auth-back{
  position:absolute;
  top:20px;
  left:22px;
  display:flex;
  align-items:center;
  gap:4px;
  color:#9db0c2;
}
.auth-back svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.auth-password-guide{
  margin:-4px 0 17px;
  padding:14px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:14px;
  background:rgba(4,12,20,.4);
}
.auth-password-guide p{margin:0 0 10px!important;color:#9fb0c1!important;font-size:12px!important;text-align:left!important}
.auth-password-guide ul{display:grid;grid-template-columns:1fr 1fr;gap:7px 12px;margin:0;padding:0;list-style:none}
.auth-password-guide li{display:flex;align-items:center;gap:7px;color:#748699;font-size:12px;line-height:1.25;transition:color .18s ease}
.auth-password-guide li span{
  display:grid;
  place-items:center;
  flex:0 0 17px;
  width:17px;
  height:17px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:50%;
  color:transparent;
  font-size:10px;
  font-weight:900;
}
.auth-password-guide li.is-valid{color:#8fe7b6}
.auth-password-guide li.is-valid span{border-color:rgba(103,225,159,.4);background:rgba(103,225,159,.13);color:#67e19f}
.auth-password-match{min-height:18px;margin:-7px 0 14px!important;font-size:12px!important;text-align:left!important}
.auth-password-match.is-valid{color:#78dfa6!important}
.auth-password-match.is-invalid{color:#ffabab!important}
.auth-privacy-note{margin:17px 0 0!important;color:#65788b!important;font-size:11px!important;line-height:1.4!important;text-align:center!important}
.auth-result-card{text-align:center}
.auth-result-icon{
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  margin:0 auto 17px;
  border:1px solid rgba(103,225,159,.34);
  border-radius:50%;
  background:rgba(103,225,159,.11);
  color:#67e19f;
  font-size:25px;
  font-weight:800;
}
.auth-result-card .auth-heading{margin-bottom:23px}
.auth-link{
  display:block;
  width:100%;
  margin:14px 0 0;
  padding:0;
  border:0;
  background:transparent;
  color:#66b6ff;
  text-align:center;
  font:inherit;
  font-size:14px;
  cursor:pointer;
  text-decoration:none;
}
.auth-link:disabled{opacity:.55;cursor:wait}
.auth-link-anchor{box-sizing:border-box}
.onboarding-card{width:min(100%,620px)}
.onboarding-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}

.auth-header-icon{
  display:grid;
  place-items:center;
  flex:0 0 38px;
  width:38px;
  height:38px;
  padding:0;
  border:1px solid rgba(255,255,255,.09);
  border-radius:12px;
  background:rgba(255,255,255,.035);
  color:#9fb0c2;
  cursor:pointer;
  transition:color .18s ease,border-color .18s ease,background .18s ease,transform .18s ease;
}
.auth-header-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.auth-header-icon:hover,.auth-header-icon:focus-visible{color:#f1f7fb;border-color:rgba(121,231,170,.28);background:rgba(121,231,170,.08);outline:none}
.auth-header-icon:active{transform:scale(.94)}
.auth-admin-icon{margin-left:2px}
.auth-profile-icon{color:#79e7aa;border-color:rgba(121,231,170,.24);background:rgba(121,231,170,.08)}
.topbar-actions{
  display:flex;
  align-items:center;
  gap:3px;
  margin-left:auto;
  padding:4px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:15px;
  background:rgba(255,255,255,.025);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.topbar-actions .auth-header-icon{flex-basis:38px;width:38px;height:38px;border:0;border-radius:11px;background:transparent}
.topbar-actions .auth-header-icon:hover,.topbar-actions .auth-header-icon:focus-visible{background:rgba(255,255,255,.055)}
.topbar-actions .auth-profile-icon{color:#79e7aa;background:rgba(121,231,170,.09)}
.topbar-actions .auth-admin-icon{margin-left:0;color:#aab9c8}

@media(max-width:560px){
  .auth-gate{align-items:flex-start;padding-top:max(18px,env(safe-area-inset-top));padding-right:14px;padding-bottom:max(18px,env(safe-area-inset-bottom));padding-left:14px}
  .auth-card{margin:auto 0;padding:25px 20px;border-radius:22px}
  .auth-card-wide{padding-top:27px}
  .auth-brand{margin-bottom:20px}
  .auth-logo{width:62px;height:62px;border-radius:18px}
  .auth-card .auth-heading h2,.auth-card h2{font-size:24px}
  .auth-password-guide ul{grid-template-columns:1fr}
  .auth-back{top:17px;left:18px;font-size:12px}
  .auth-switch{flex-wrap:wrap}
  .onboarding-grid{grid-template-columns:1fr}
  .onboarding-card{margin:18px 0}
  .auth-header-icon{flex-basis:36px;width:36px;height:36px;border-radius:11px}
  .auth-header-icon svg{width:18px;height:18px}
  .topbar-actions{gap:2px;padding:3px;border-radius:14px}
  .topbar-actions .auth-header-icon{flex-basis:36px;width:36px;height:36px}
}