/* ================================================================
 * onboarding.css — 注册流程共用样式
 * 来源：docs/onboarding-flow-design-v1.md § 7.6.1
 *
 * 包含：
 *   - 设计 token (CSS variables)
 *   - 通用版面（onboarding-view 容器、卡片）
 *   - 按钮（主 / 次 / 链接 / disabled）
 *   - 输入框（默认 / focus / error）
 *   - 选项卡片（单选 / 多选）
 *   - 错误提示文本
 * ================================================================ */

:root {
  /* ----- Palette ----- */
  --onboard-bg: #0A0E27;
  --onboard-bg-gradient: radial-gradient(ellipse at top, #1A1F4A 0%, #0A0E27 60%);
  --onboard-card: rgba(30, 41, 89, 0.6);
  --onboard-text: #FFFFFF;
  --onboard-text-secondary: rgba(255, 255, 255, 0.6);
  --onboard-text-tertiary: rgba(255, 255, 255, 0.4);

  --onboard-button-bg: linear-gradient(135deg, #5B8DEF 0%, #6FA5FF 100%);
  --onboard-button-shadow: 0 0 24px rgba(91, 141, 239, 0.5);
  --onboard-button-disabled-bg: rgba(91, 141, 239, 0.25);
  --onboard-button-text: #FFFFFF;

  --onboard-error: #FF6B6B;
  --onboard-error-bg: rgba(255, 107, 107, 0.1);

  --onboard-input-bg: rgba(20, 25, 60, 0.8);
  --onboard-input-border: rgba(91, 141, 239, 0.3);
  --onboard-input-border-focus: #5B8DEF;
  --onboard-input-border-error: #FF6B6B;

  /* ----- Layout tokens ----- */
  --onboard-max-width: 480px;
  --onboard-radius-sm: 8px;
  --onboard-radius-md: 12px;
  --onboard-radius-lg: 16px;
  --onboard-radius-pill: 999px;

  --onboard-space-xs: 4px;
  --onboard-space-sm: 8px;
  --onboard-space-md: 16px;
  --onboard-space-lg: 24px;
  --onboard-space-xl: 32px;

  /* ----- Typography ----- */
  --onboard-font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

/* ================================================================
 * 通用容器
 * ================================================================ */

body.onboarding {
  margin: 0;
  /* global.css 默认给 body 设了 max-width: 750px + box-shadow（兼容老 webapp 移动端 frame）。
     onboarding 视觉设计是深蓝渐变背景填满整屏 + .onboarding-view 内部 480px 居中，
     这里把 max-width 解锁，否则 body 会被限到 750px 然后 margin:0 贴左；
     同时清掉 box-shadow（深色全屏背景下不需要） */
  max-width: none;
  box-shadow: none;
  background: var(--onboard-bg);
  background-image: var(--onboard-bg-gradient);
  color: var(--onboard-text);
  font-family: var(--onboard-font-sans);
  /* iOS Safari 地址栏导致 100vh 飘移：先用 -webkit-fill-available 兜底，
     现代浏览器再用 100dvh（动态 viewport）覆盖。详见 PR-E2 nit follow-up */
  min-height: 100vh;
  min-height: -webkit-fill-available;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.onboarding-view {
  max-width: var(--onboard-max-width);
  margin: 0 auto;
  padding: 32px 24px 48px;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  min-height: 100dvh;
  box-sizing: border-box;
}

.onboarding-card {
  /* fallback：Android <12 / 旧 WebView 不支持 backdrop-filter，
     此时整张卡完全透明会糟糕，调高不透明度兜底。 */
  background: rgba(30, 41, 89, 0.92);
  border: 1px solid var(--onboard-input-border);
  border-radius: var(--onboard-radius-lg);
  padding: 24px;
}
@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
  .onboarding-card {
    background: var(--onboard-card);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}

.onboarding-title {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--onboard-text);
  letter-spacing: 0.02em;
}

.onboarding-subtitle {
  font-size: 14px;
  color: var(--onboard-text-secondary);
  margin: 0 0 24px;
  line-height: 1.5;
}

/* ================================================================
 * 按钮
 * ================================================================ */

.onboarding-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  padding: 0 24px;
  border: none;
  border-radius: var(--onboard-radius-md);
  font-family: var(--onboard-font-sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.onboarding-btn--primary {
  background: var(--onboard-button-bg);
  color: var(--onboard-button-text);
  box-shadow: var(--onboard-button-shadow);
}
.onboarding-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 0 32px rgba(91, 141, 239, 0.7); }
.onboarding-btn--primary:active { transform: translateY(0); }
.onboarding-btn--primary:disabled,
.onboarding-btn--primary[aria-disabled="true"] {
  background: var(--onboard-button-disabled-bg);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

.onboarding-btn--secondary {
  background: transparent;
  border: 1px solid var(--onboard-input-border);
  color: var(--onboard-text);
}
.onboarding-btn--secondary:hover { border-color: var(--onboard-input-border-focus); }
.onboarding-btn--secondary:disabled,
.onboarding-btn--secondary[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* 通用 disabled 态：button.disabled 直接生效，覆盖默认浏览器灰色看不出 */
.onboarding-btn:disabled,
.onboarding-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.onboarding-btn--link {
  background: transparent;
  color: var(--onboard-text-secondary);
  height: auto;
  padding: 8px;
  font-weight: 400;
  text-decoration: none;
  width: auto;
}
.onboarding-btn--link:hover { color: var(--onboard-text); text-decoration: underline; }

.onboarding-btn--loading {
  pointer-events: none;
  opacity: 0.85;
}
.onboarding-btn--loading::after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 8px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: onboarding-spin 0.8s linear infinite;
}
@keyframes onboarding-spin { to { transform: rotate(360deg); } }

/* ================================================================
 * 输入框
 * ================================================================ */

.onboarding-input {
  display: block;
  width: 100%;
  height: 52px;
  padding: 0 16px;
  background: var(--onboard-input-bg);
  border: 1px solid var(--onboard-input-border);
  border-radius: var(--onboard-radius-md);
  color: var(--onboard-text);
  font-family: var(--onboard-font-sans);
  font-size: 16px;
  letter-spacing: 0.02em;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.18s, background 0.18s;
}
.onboarding-input::placeholder { color: var(--onboard-text-tertiary); }
.onboarding-input:hover { border-color: rgba(91, 141, 239, 0.5); }
.onboarding-input:focus { border-color: var(--onboard-input-border-focus); background: rgba(20, 25, 60, 1); }

.onboarding-input--error,
.onboarding-input.is-error,
.onboarding-input[aria-invalid="true"] {
  border-color: var(--onboard-input-border-error);
  background: var(--onboard-error-bg);
}
.onboarding-input--error:focus { border-color: var(--onboard-input-border-error); }

.onboarding-input--code {
  text-align: center;
  /* 0.3em：足够分隔 4-8 位字符，又能避开多浏览器（特别是
     Android Chrome / WeChat WebView）在更大 letter-spacing 下
     算偏光标位置的 bug。 */
  letter-spacing: 0.3em;
  font-size: 22px;
  font-weight: 600;
  text-transform: uppercase;
}

.onboarding-error-text {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  color: var(--onboard-error);
  line-height: 1.4;
}

/* ================================================================
 * 选项卡片
 * ================================================================ */

.onboarding-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
  background: var(--onboard-input-bg);
  border: 1px solid var(--onboard-input-border);
  border-radius: var(--onboard-radius-md);
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, transform 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.onboarding-option:hover { border-color: rgba(91, 141, 239, 0.6); }
.onboarding-option:active { transform: scale(0.98); }
.onboarding-option.is-active,
.onboarding-option[aria-pressed="true"] {
  border-color: var(--onboard-input-border-focus);
  background: rgba(91, 141, 239, 0.18);
  box-shadow: 0 0 16px rgba(91, 141, 239, 0.2);
}
.onboarding-option__icon {
  font-size: 24px;
  flex-shrink: 0;
}
.onboarding-option__label {
  flex: 1;
  font-size: 15px;
  color: var(--onboard-text);
  line-height: 1.4;
}
.onboarding-option__check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--onboard-input-border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: transparent;
  transition: border-color 0.18s, color 0.18s, background 0.18s;
}
.onboarding-option.is-active .onboarding-option__check {
  border-color: var(--onboard-input-border-focus);
  background: var(--onboard-input-border-focus);
  color: #FFFFFF;
}

/* ================================================================
 * 性别胶囊（参考 tian_tong gender-card，颜色按本设计调整）
 * ================================================================ */

.onboarding-gender {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.onboarding-gender__pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100px;
  background: var(--onboard-input-bg);
  border: 1px solid var(--onboard-input-border);
  border-radius: var(--onboard-radius-md);
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
  position: relative;
}
.onboarding-gender__pill:hover { border-color: rgba(91, 141, 239, 0.5); }
.onboarding-gender__pill.is-active {
  border-color: var(--onboard-input-border-focus);
  background: rgba(91, 141, 239, 0.18);
  box-shadow: 0 0 16px rgba(91, 141, 239, 0.25);
}
.onboarding-gender__icon {
  font-size: 32px;
  margin-bottom: 6px;
}
.onboarding-gender__icon--male { color: #5B8DEF; }
.onboarding-gender__icon--female { color: #FF85B3; }
.onboarding-gender__label {
  font-size: 15px;
  color: var(--onboard-text);
  font-weight: 500;
}

/* ================================================================
 * Toast / 错误内联提示
 * ================================================================ */

.onboarding-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.85);
  color: #FFFFFF;
  padding: 12px 20px;
  border-radius: var(--onboard-radius-md);
  font-size: 14px;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.onboarding-toast.is-visible { opacity: 1; }

/* ================================================================
 * 无障碍：尊重用户的减少动画偏好（macOS / iOS / Win 都有此设置）
 * ================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}