/* 
 *
 * 视觉规格（与 Dart 对齐）：
 *   - 顶部：login 模式有 logo + 24px spacer；register 模式两个 24px spacer
 *   - 表单 + 12px gap + 切换链接 + 16px gap + 弹层链接
 *   - Spacer + 法律
 *   - 切换链接：14px 黑色下划线居中
 *   - "Other Sign In Options" 链接：14px 黑色下划线居中
 */
.panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
}

.topSection {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.spacer24 {
  height: var(--spacing-xxl);
}

.logo {
  display: block;
  height: var(--auth-logo-height);
  width: auto;
  max-width: 220px;
  margin: 0 auto;
  object-fit: contain;
}

.spacer {
  flex: 1 1 0;
  min-height: var(--spacing-lg);
}

.toggleButton {
  align-self: center;
  background: none;
  border: none;
  padding: var(--spacing-md) 0 0;
  font-size: var(--font-size-md);
  color: var(--color-auth-text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.toggleButton:hover {
  opacity: 0.8;
}

.linkButton {
  align-self: center;
  background: none;
  border: none;
  padding: var(--spacing-md) 0 var(--spacing-md);
  font-size: var(--font-size-md);
  color: var(--color-auth-text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.linkButton:hover {
  opacity: 0.8;
}
