.auth-view {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--s-16);
  background: var(--color-canvas);
}

.auth-panel {
  width: min(100%, var(--s-400));
  overflow: hidden;
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  padding: var(--s-22) var(--s-26) var(--s-16);
}

.auth-brand h1 {
  font-size: var(--font-17);
  font-weight: var(--weight-800);
}

.auth-brand p {
  margin-top: var(--s-4);
  color: var(--color-text-secondary);
  font-size: var(--font-12);
}

.auth-tabs {
  display: flex;
  padding: 0 var(--s-26);
  border-bottom: var(--s-1) solid var(--color-divider);
}

.auth-tabs button {
  flex: 1;
  padding: var(--s-10) var(--s-14);
  border-bottom: var(--s-2) solid var(--c-transparent);
  color: var(--color-text-secondary);
  background: var(--c-transparent);
}

.auth-tabs button.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: var(--weight-600);
}

.auth-form {
  display: grid;
  gap: var(--s-14);
  padding: var(--s-22) var(--s-26) var(--s-16);
}

.auth-submit {
  width: 100%;
  margin-top: var(--s-4);
}

.auth-risk {
  padding: 0 var(--s-26) var(--s-22);
  color: var(--color-text-faint);
  font-size: var(--font-11);
  line-height: var(--s-18);
  text-align: center;
}
