/* Linen — Auth */
.auth-page {
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-9) var(--sp-4);
  position: relative;
  overflow: hidden;
}
.auth-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 20%, var(--rose-100) 0%, transparent 40%),
    radial-gradient(circle at 20% 80%, var(--gold-soft) 0%, transparent 40%);
  opacity: 0.6;
  pointer-events: none;
}

.auth-card {
  position: relative;
  z-index: 1;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  padding: var(--sp-9) var(--sp-8);
  width: 100%;
  max-width: 460px;
  box-shadow: var(--sh-lg);
}
.auth-head { text-align: center; margin-bottom: var(--sp-7); }
.auth-head .brand { font-size: 36px; margin-bottom: var(--sp-3); display: inline-flex; }
.auth-head p { color: var(--ink-500); font-size: var(--fs-sm); }

.auth-tabs {
  display: flex;
  background: var(--paper-2);
  border-radius: var(--r-pill);
  padding: 5px;
  margin-bottom: var(--sp-7);
}
.auth-tab {
  flex: 1;
  padding: 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-500);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.auth-tab.active {
  background: var(--ink-900);
  color: var(--paper);
  box-shadow: var(--sh-xs);
}

.auth-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.auth-link {
  align-self: flex-end;
  font-size: var(--fs-xs);
  color: var(--ink-500);
  transition: color var(--dur-fast) var(--ease);
}
.auth-link:hover { color: var(--rose-500); }

.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--ink-300);
  font-size: var(--fs-xs);
  margin: var(--sp-5) 0;
}
.auth-divider::before, .auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}