*{box-sizing:border-box}
:root{
  --ink:#20302f;
  --muted:#657675;
  --teal:#214f4c;
  --teal-dark:#163c3a;
  --teal-pale:#eaf4f3;
  --line:#d7e1e0;
  --white:#fff;
  --danger:#a93434;
  --shadow:0 20px 50px rgba(19,53,50,.13)
}
body{
  margin:0;
  min-height:100vh;
  font-family:"DM Sans",Arial,sans-serif;
  color:var(--ink);
  background:#f1f6f5
}
.account-shell{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:28px
}
.account-card{
  width:min(500px,100%);
  padding:38px;
  border:1px solid var(--line);
  border-radius:22px;
  background:var(--white);
  box-shadow:var(--shadow)
}
.account-logo{
  display:block;
  width:82px;
  height:82px;
  object-fit:contain;
  margin:0 auto 12px
}
.eyebrow{
  margin:0 0 6px;
  text-align:center;
  color:var(--teal);
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase
}
h1{
  margin:0;
  text-align:center;
  font-family:"Libre Franklin",sans-serif;
  font-size:1.65rem
}
h2{font-size:1.08rem}
.intro{
  margin:10px auto 26px;
  max-width:390px;
  text-align:center;
  color:var(--muted);
  line-height:1.5
}
label{
  display:block;
  margin:15px 0 6px;
  font-size:.88rem;
  font-weight:700
}
input{
  width:100%;
  padding:12px 13px;
  border:1px solid #c7d5d4;
  border-radius:10px;
  font:inherit;
  color:var(--ink)
}
input:focus{
  outline:2px solid #a9cfcc;
  border-color:var(--teal)
}
button{
  width:100%;
  margin-top:20px;
  padding:12px 14px;
  border:0;
  border-radius:10px;
  background:var(--teal);
  color:#fff;
  font:inherit;
  font-weight:700;
  cursor:pointer
}
button:disabled{opacity:.65;cursor:wait}
.secondary-button{
  background:var(--teal-pale);
  color:var(--teal-dark)
}
.password-note{
  margin:7px 0 0;
  color:var(--muted);
  font-size:.78rem
}
.form-message{
  min-height:20px;
  margin:12px 0 0;
  color:var(--teal-dark);
  font-size:.86rem;
  line-height:1.45
}
.form-message.error{color:var(--danger)}
.account-state{
  text-align:center;
  color:var(--muted)
}
.spinner{
  width:30px;
  height:30px;
  margin:12px auto;
  border:3px solid #d6e5e3;
  border-top-color:var(--teal);
  border-radius:50%;
  animation:spin .8s linear infinite
}
.back-link{
  display:block;
  margin-top:24px;
  text-align:center;
  color:var(--teal-dark);
  font-size:.84rem
}
.hidden{display:none!important}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:560px){.account-card{padding:28px 22px}}