.auth-shell *,.auth-shell *::before,.auth-shell *::after{box-sizing:border-box}
.auth-shell{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:#f4f7f5;
  color:#12241e;
  overflow-x:hidden;
  max-width:100%;
}
.auth-hero{
  background:linear-gradient(160deg,#12352c,#1b5a45 55%,#174838);
  color:#fff;
  padding:1.1rem 1.25rem 5.2rem;
}
.auth-brand{
  align-items:center;
  display:flex;
  gap:.8rem;
  margin:0 auto;
  max-width:28rem;
  width:100%;
}
.auth-brand img{
  background:#fff;
  border-radius:12px;
  display:block;
  height:48px;
  padding:.35rem;
  width:48px;
}
.auth-brand strong,.auth-brand small{display:block}
.auth-brand strong{font-size:1.35rem;letter-spacing:-.03em}
.auth-brand small{
  color:#cfe6dc;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.auth-main{
  flex:1;
  margin:-3.6rem auto 0;
  max-width:28rem;
  padding:0 1rem 2rem;
  width:100%;
}
.auth-card{
  background:#fff;
  border:1px solid #d5e1db;
  border-radius:18px;
  box-shadow:0 18px 40px rgba(16,48,38,.12);
  display:flex;
  flex-direction:column;
  gap:1rem;
  padding:1.6rem 1.35rem 1.4rem;
  width:100%;
  max-width:100%;
}
.auth-card h1{
  font-size:1.45rem;
  letter-spacing:-.03em;
  line-height:1.25;
  margin:0;
}
.auth-card>p{
  color:#5d6d66;
  font-size:.95rem;
  line-height:1.5;
  margin:0;
}
.auth-field{
  display:flex;
  flex-direction:column;
  gap:.4rem;
  min-width:0;
  width:100%;
}
.auth-field label{
  display:block;
  color:#31463e;
  font-size:.82rem;
  font-weight:800;
  width:100%;
}
.auth-field input{
  display:block;
  background:#f7faf8;
  border:1px solid #c5d4cd;
  border-radius:10px;
  font:inherit;
  font-size:1rem;
  min-height:48px;
  padding:.75rem .9rem;
  width:100%;
  max-width:100%;
}
.auth-field input:focus{
  background:#fff;
  border-color:#21614d;
  box-shadow:0 0 0 3px rgba(33,97,77,.14);
  outline:0;
}
.auth-field small{color:#6a7871;font-size:.78rem;display:block}
.auth-secret{
  display:flex;
  flex-direction:column;
  gap:.35rem;
  min-width:0;
  width:100%;
  max-width:100%;
}
.auth-secret input{
  min-width:0;
  width:100%;
}
.auth-toggle{
  background:#eef5f1;
  border:1px solid #c5d4cd;
  border-radius:10px;
  color:#174838;
  cursor:pointer;
  font-size:.75rem;
  font-weight:800;
  min-height:44px;
  padding:.55rem .75rem;
  width:100%;
}
.auth-toggle:focus-visible{
  outline:3px solid rgba(33,97,77,.22);
  outline-offset:2px;
}
.auth-toggle[aria-pressed="true"]{background:#d7ebe2}
.auth-submit{
  font-size:.92rem;
  min-height:50px;
  padding:.9rem 1rem;
  width:100%;
}
.auth-error{color:#9a3b3b;font-size:.85rem;font-weight:700;margin:0}
.auth-status{color:#185c42;font-size:.85rem;font-weight:750;margin:0;min-height:1.2em}
.auth-signin{
  color:#61736b;
  font-size:.88rem;
  margin:.15rem 0 0;
  text-align:center;
}
.auth-signin a{color:#174838;font-weight:800;text-decoration:underline}
.auth-foot{
  color:#6d7c75;
  font-size:.78rem;
  padding:0 1rem 1.5rem;
  text-align:center;
}
.auth-foot .site-disclaimer{line-height:1.5;margin:.7rem auto 0;max-width:36rem}
@media(max-width:640px){
  .auth-hero{padding:1.1rem 1rem 4rem}
  .auth-main{padding:0 .75rem 2rem}
  .auth-card,.auth-field,#activation-form,#login-form{
    display:flex!important;
    flex-direction:column!important;
    grid-template-columns:none!important;
    width:100%!important;
    max-width:100%!important;
  }
  .auth-card label,.auth-field label,#activation-form label,#login-form label{
    display:block!important;
    width:100%!important;
  }
  .auth-card input,.auth-field input,#activation-form input,#login-form input,.auth-submit{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
  }
  .auth-secret{flex-direction:column!important}
  .auth-card{padding:1.25rem .9rem 1.15rem}
  .auth-card h1{font-size:1.28rem}
}