.auth-modal-overlay {
  position:        fixed;
  inset:           0;
  background:      rgba(0, 0, 0, 0.65);
  display:         flex;
  align-items:     center;
  justify-content: center;
  z-index:         1000;
  padding:         24px;
}

.auth-modal {
  background:    var(--panel, #263330);
  border:        var(--border-w, 1px) solid var(--line-strong, rgba(255, 255, 255, 0.12));
  border-radius: var(--radius-lg, 6px);
  box-shadow:    var(--shadow-lift, none);
  color:         var(--ink, #f8f9f7);
  padding:       32px;
  width:         100%;
  max-width:     380px;
  position:      relative;
}

.auth-modal--terms {
  max-width: 460px;
}

.auth-modal-close {
  position:   absolute;
  top:        14px;
  right:      14px;
  background: none;
  border:     none;
  color:      var(--ink-faint, rgba(255, 255, 255, 0.4));
  font-size:  22px;
  cursor:     pointer;
  padding:    4px 8px;
  line-height: 1;
}

.auth-modal-close:hover {
  color: var(--ink, #f8f9f7);
}

.auth-modal-title {
  font-family: var(--font-display, var(--serif, Georgia, serif));
  font-size:   26px;
  font-weight: 700;
  color:       var(--ink, #f8f9f7);
  margin:      0 0 20px;
}

.auth-modal-error {
  font-size:   13px;
  font-weight: 300;
  color:       var(--stop, #b56e6e);
  margin:      0 0 14px;
}

.auth-modal-form {
  display:        flex;
  flex-direction: column;
  gap:            12px;
}

.auth-modal-form[hidden] {
  display: none;
}

.auth-modal-input {
  width:         100%;
  background:    var(--ground-sunk, rgba(255, 255, 255, 0.06));
  border:        var(--border-w, 1px) solid var(--line-strong, rgba(255, 255, 255, 0.18));
  border-radius: var(--radius, 4px);
  color:         var(--ink, #f8f9f7);
  font-family:   var(--font-body, var(--sans, system-ui, sans-serif));
  font-size:     14px;
  font-weight:   300;
  padding:       10px 12px;
  box-sizing:    border-box;
}

.auth-modal-input::placeholder {
  color: var(--ink-faint, rgba(255, 255, 255, 0.32));
}

.auth-modal-input:focus {
  outline:      none;
  border-color: var(--accent, #5c8a7a);
}

.auth-modal-btn {
  background:    var(--accent, #5c8a7a);
  border:        var(--border-w, 1px) solid var(--line-strong, transparent);
  border-radius: var(--radius, 4px);
  box-shadow:    var(--shadow, none);
  color:         var(--accent-ink, #f8f9f7);
  font-family:   var(--font-body, var(--sans, system-ui, sans-serif));
  font-size:     14px;
  font-weight:   500;
  padding:       11px;
  cursor:        pointer;
  margin-top:    4px;
}

.auth-modal-btn:active {
  transform:  var(--press, none);
  box-shadow: none;
}

.auth-modal-btn:disabled {
  opacity: 0.5;
  cursor:  default;
}

.auth-modal-consent {
  display:     flex;
  align-items: flex-start;
  gap:         10px;
  font-size:   13px;
  font-weight: 300;
  color:       var(--ink-soft, rgba(255, 255, 255, 0.55));
  cursor:      pointer;
}

.auth-modal-terms {
  font-size:   12px;
  font-weight: 300;
  color:       var(--ink-faint, rgba(255, 255, 255, 0.4));
  margin:      0;
}

.auth-modal-terms-link {
  color:                 var(--ink-soft, rgba(255, 255, 255, 0.55));
  text-decoration:       underline;
  text-underline-offset: 2px;
}

.auth-modal-forgot {
  font-size: 13px;
  margin:    2px 0 0;
}

.auth-modal-link {
  background:            none;
  border:                none;
  color:                 var(--ink-soft, rgba(255, 255, 255, 0.5));
  font-family:           inherit;
  font-size:             inherit;
  font-weight:           300;
  cursor:                pointer;
  padding:               0;
  text-decoration:       underline;
  text-underline-offset: 2px;
}

.auth-modal-link:hover {
  color: var(--ink, #f8f9f7);
}

.auth-modal-toggle {
  font-size:   13px;
  font-weight: 300;
  color:       var(--ink-faint, rgba(255, 255, 255, 0.42));
  margin:      20px 0 0;
}

.auth-modal-terms-section {
  font-size:   13px;
  font-weight: 500;
  color:       var(--ink, #f8f9f7);
  margin:      16px 0 6px;
}

.auth-modal-terms-para {
  font-size:   13px;
  font-weight: 300;
  color:       var(--ink-soft, rgba(255, 255, 255, 0.7));
  margin:      0 0 8px;
  line-height: 1.6;
}

.auth-modal-terms-footer {
  font-size:   12px;
  font-weight: 300;
  color:       var(--ink-faint, rgba(255, 255, 255, 0.4));
  margin:      16px 0 0;
}

.auth-modal-forgot-confirm {
  font-size:   13px;
  font-weight: 300;
  color:       var(--good, #5c8a7a);
  margin:      0;
  padding:     16px 0 0;
}