/* Login-/Passwortwechsel-Seiten — bewusst eigenständig, kein designer/_base.html
   (kein Sidebar-/Survey-Kontext vor dem Login sinnvoll). Nutzt ausschließlich
   bestehende --designer-*-Tokens aus designer.css, kein neues Farbschema. */

.auth-body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--designer-bg);
  color: var(--designer-ink);
  font-family: var(--designer-font-ui);
  font-size: var(--designer-fs-3);
}

.auth-card {
  width: min(24rem, calc(100vw - 2.5rem));
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.auth-title {
  margin: 0;
  font-family: var(--designer-font-display);
  font-size: var(--designer-fs-5);
  font-weight: 600;
}

.auth-subtitle {
  margin: 0 0 .75rem;
  color: var(--designer-muted);
  font-size: var(--designer-fs-2);
}

.auth-error {
  margin: 0 0 .75rem;
  padding: .6rem .8rem;
  border-radius: .5rem;
  background: var(--designer-danger-bg);
  color: var(--designer-danger-ink);
  border: 1px solid var(--designer-danger-border);
  font-size: var(--designer-fs-2);
}

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

.auth-form label {
  margin-top: .5rem;
  font-size: var(--designer-fs-2);
  color: var(--designer-label);
}

.auth-form input {
  padding: .55rem .7rem;
  border-radius: .5rem;
  border: 1px solid var(--designer-border-input);
  background: var(--designer-surface);
  color: var(--designer-ink);
  font-size: var(--designer-fs-3);
  font-family: inherit;
}

.auth-form input:focus {
  outline: 2px solid var(--designer-focus);
  outline-offset: 1px;
}

.auth-submit {
  margin-top: 1rem;
}

.auth-requirements {
  list-style: none;
  margin: .35rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  font-size: var(--designer-fs-1);
  color: var(--designer-muted);
}

.auth-requirements li {
  display: flex;
  align-items: center;
  gap: .4rem;
}

.auth-requirements li::before {
  content: "";
  width: .5rem;
  height: .5rem;
  border-radius: 999px;
  background: var(--designer-hairline);
  flex-shrink: 0;
}

.auth-requirements li.met {
  color: var(--designer-success-ink);
}

.auth-requirements li.met::before {
  background: var(--designer-success-ink);
}