.auth-body{
  min-height:100vh;
}

.auth-main{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:4rem 1.5rem 5rem;
}

.auth-card{
  position:relative;
  width:100%;
  max-width:420px;
  background:var(--paper-panel);
  border:1.5px solid var(--paper-line-2);
  border-radius:var(--radius-md);
  padding:2.6rem 2.2rem;
}

.auth-card::before{
  content:"";
  position:absolute;
  top:-10px;
  left:32px;
  width:60px;
  height:24px;
  background:var(--gold-dim);
  transform:rotate(-3deg);
  z-index:2;
}

.auth-card__title{
  font-size:1.7rem;
  margin-bottom:.5rem;
}

.auth-card__sub{
  color:var(--ink-dim);
  font-size:.95rem;
  margin-bottom:2rem;
}

.auth-form{
  display:flex;
  flex-direction:column;
  gap:1.2rem;
}

.auth-field{
  display:flex;
  flex-direction:column;
  gap:.45rem;
  font-size:.85rem;
  color:var(--ink-dim);
}

.auth-field input{
  font:inherit;
  font-family:var(--font-mono);
  font-size:.92rem;
  color:var(--ink);
  background:var(--paper);
  border:1.5px solid var(--paper-line-2);
  border-radius:var(--radius-sm);
  padding:.7rem .85rem;
  transition:border-color .15s ease;
}

.auth-field input:focus{
  outline:none;
  border-color:var(--gold);
}

.auth-field__key-wrap{
  position:relative;
}
.auth-field__key-wrap input{
  width:100%;
  padding-right:2.6rem;
}
.auth-field__toggle{
  position:absolute;
  right:.6rem;
  top:50%;
  transform:translateY(-50%);
  font-size:1rem;
  opacity:.6;
  padding:.3rem;
  line-height:1;
}
.auth-field__hint{
  font-size:.72rem;
  color:var(--ink-faint);
  font-weight:400;
  margin-left:.4rem;
}

.auth-field__toggle:hover{ opacity:1; }

.auth-message{
  margin:0;
  font-size:.85rem;
  min-height:1.1em;
}
.auth-message.is-error{ color:var(--debit); }
.auth-message.is-success{ color:var(--credit); }

.auth-forgot{
  display:block;
  margin:1.1rem auto 0;
  font-size:.82rem;
  color:var(--ink-faint);
  text-decoration:underline;
  text-underline-offset:3px;
}
.auth-forgot:hover{ color:var(--ink-dim); }

.auth-switch{
  margin-top:2rem;
  padding-top:1.6rem;
  border-top:1px solid var(--paper-line);
  text-align:center;
  font-size:.88rem;
  color:var(--ink-dim);
}

.auth-switch__btn{
  display:block;
  margin:.4rem auto 0;
  font-weight:600;
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:3px;
}
.auth-switch__btn:hover{ color:var(--credit); }

.auth-help{
  margin-top:2rem;
  padding-top:1.6rem;
  border-top:1px solid var(--paper-line);
  text-align:center;
  font-size:.85rem;
  color:var(--ink-faint);
}