/* 登录 / 首次设置 —— 居中单卡，背后是和总览同一团光晕 */

.auth {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: calc(var(--s-6) + env(safe-area-inset-top)) var(--gutter) calc(var(--s-6) + env(safe-area-inset-bottom));
  background: var(--hero-glow), var(--bg);
}

.auth-card {
  --on: var(--surface);
  --fill: var(--surface-2);
  --fill-hover: var(--surface-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-7);
  width: min(100%, 400px);
  padding: var(--s-8) var(--s-6) var(--s-6);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.auth-card__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  text-align: center;
}
.auth-card__mark {
  width: 64px;
  height: 64px;
  margin-bottom: var(--s-3);
}
.auth-card__lock {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--s-3);
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-text);
}
.auth-card__name {
  font-size: var(--fs-title-1);
  font-weight: var(--fw-heavy);
}
.auth-card__tagline {
  max-width: 22em;
  color: var(--ink-2);
}

.auth-card__form {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.auth-card__form .btn--ghost {
  margin-top: calc(var(--s-2) * -1);
}
.auth-card__note {
  color: var(--ink-3);
  font-size: var(--fs-cap);
  text-align: center;
}
.auth-card__command {
  text-align: center;
}
.auth-card__command .kbd {
  height: auto;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--fs-sub);
  font-weight: var(--fw-medium);
  user-select: all;
}
.auth-modes { border: 0; padding: 0; margin: 0; display: grid; gap: 14px; }
.auth-modes legend { margin-bottom: 12px; font-weight: 600; }
.auth-modes label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.auth-modes input { margin-top: 5px; accent-color: var(--accent, #fff); }
.auth-modes small { display: block; opacity: .6; margin-top: 3px; font-size: 12px; }