/* main.css —— 组件与页面样式（英文页 / 中文页共用）
   红线：所有色值 / 字号 / 间距 / 圆角 / 阴影 / 层级必须引用 tokens.css 变量。 */

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip; /* 兜底：任何子元素溢出都不会产生页面级横向滚动 */
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", sans-serif;
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
}
img { max-width: 100%; height: auto; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--sp-4);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  background: var(--color-card);
  border-bottom: 1px solid var(--color-border);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}
.site-header__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--color-text);
}
.site-header__brand:hover { text-decoration: none; }
.site-header__brand img { width: 28px; height: 28px; }
.site-header__tool-link {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.site-header__tool-link:hover { color: var(--color-primary); }

/* ---------- Hero ---------- */
.hero {
  padding: var(--sp-12) 0 var(--sp-8);
  text-align: center;
}
.hero h1 {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-3xl);
  line-height: 1.2;
}
.hero p {
  margin: 0 auto var(--sp-4);
  max-width: 640px;
  color: var(--color-text-secondary);
  font-size: var(--fs-lg);
}
.hero__badges {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.hero__badge {
  font-size: var(--fs-xs);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-pill);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}

/* ---------- Tool Form ---------- */
.tool-card {
  background: var(--color-card);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--sp-6);
  margin-bottom: var(--sp-8);
  min-width: 0;
}
.tool-card__row { margin-bottom: var(--sp-4); min-width: 0; }
.tool-card__label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: var(--sp-2);
}
.tool-card__textarea,
.tool-card__input {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: var(--sp-3);
  font-size: var(--fs-base); /* ≥16px 防 iOS 自动缩放 */
  font-family: inherit;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-ctrl);
}
.tool-card__textarea {
  min-height: 88px;
  resize: vertical;
}
.tool-card__input { height: 48px; }
.tool-card__textarea:focus,
.tool-card__input:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: -1px;
  border-color: var(--color-primary);
}
.tool-card__input[aria-invalid="true"] { border-color: var(--color-error); }
.tool-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
}
.field-error {
  display: none;
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--color-error);
}
.field-error.is-visible { display: block; }

/* ---------- Segmented Control ---------- */
.seg {
  position: relative;
  display: inline-flex;
  padding: 3px;
  background: var(--color-bg);
  border-radius: var(--radius-pill);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.seg::-webkit-scrollbar { display: none; }
.seg__indicator {
  position: absolute;
  top: 3px;
  left: 0;
  height: calc(100% - 6px);
  background: var(--color-card);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1),
              width .3s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
  will-change: transform, width;
}
.seg__btn {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: var(--sp-2) var(--sp-4);
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s ease, transform .1s ease;
}
.seg__btn:hover:not([aria-pressed="true"]) { color: var(--color-text); }
.seg__btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}
.seg__btn:active { transform: scale(.98); }
.seg__btn[aria-pressed="true"] {
  color: var(--color-text);
  font-weight: 600;
}
/* mode 切换：两段等分，视觉更稳 */
.mode-switch {
  display: flex;
  width: 100%;
}
.mode-switch .seg__btn { flex: 1 1 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  border: 0;
  border-radius: var(--radius-ctrl);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease,
              color .2s ease, transform .1s ease, opacity .2s ease;
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.btn--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding: var(--sp-3) var(--sp-6);
}
.btn--primary:hover:not(:disabled) { background: var(--color-primary-hover); }
.btn--cta { width: 100%; height: 48px; font-size: var(--fs-lg); }
.btn--ghost {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-border);
}
.btn--ghost:hover { background: var(--color-bg); text-decoration: none; }
.btn--sm { padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); }
.btn__spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-spinner-track);
  border-top-color: var(--color-on-primary);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Result 区 ---------- */
.result {
  margin-bottom: var(--sp-8);
  min-width: 0;
}
.result-section {
  background: var(--color-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--sp-6);
  margin-bottom: var(--sp-4);
  min-width: 0;
}
.result-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.result-section__title { margin: 0; font-size: var(--fs-xl); }

/* ScoreRing */
.score-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
}
@media (min-width: 768px) {
  .score-block { flex-direction: row; align-items: center; }
  .score-dims { flex: 1; }
}
.score-ring { position: relative; width: 96px; height: 96px; flex-shrink: 0; }
.score-ring__bg {
  fill: none;
  stroke: var(--color-border);
  stroke-width: 8;
}
.score-ring__fg {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset .6s ease;
}
.score-ring.is-good .score-ring__fg { stroke: var(--color-success); }
.score-ring.is-warn .score-ring__fg { stroke: var(--color-warning); }
.score-ring.is-bad  .score-ring__fg { stroke: var(--color-error); }
.score-ring__num {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.score-ring__value { font-size: var(--fs-xl); font-weight: 700; line-height: 1; }
.score-ring__label { font-size: var(--fs-xs); color: var(--color-text-secondary); }
.is-good .score-ring__value { color: var(--color-success); }
.is-warn .score-ring__value { color: var(--color-warning); }
.is-bad  .score-ring__value { color: var(--color-error); }

.score-dims { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.score-dims__row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr) 32px;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
}
.score-dims__label { color: var(--color-text-secondary); }
.score-dims__bar {
  height: 8px;
  background: var(--color-bg);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.score-dims__fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--color-primary);
  border-radius: var(--radius-pill);
  transition: width .6s ease;
}
.score-dims__value { text-align: right; font-weight: 600; }

/* TipsCard */
.tips-card__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-xl);
}
.tips-card__list { margin: 0; padding-left: var(--sp-6); }
.tips-card__item { margin-bottom: var(--sp-2); color: var(--color-text-secondary); }

/* TagWall */
.tag-wall {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  max-width: 100%;
}
.tag-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-1);
  max-width: 100%;
  padding: var(--sp-2) var(--sp-3);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: var(--fs-sm);
  text-align: left;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .1s ease;
}
.tag-chip:hover { border-color: var(--color-primary); }
.tag-chip:active { transform: scale(.98); }
.tag-chip:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.tag-chip.is-copied {
  border-color: var(--color-success);
  background: var(--badge-cool-bg);
}
.tag-chip__text {
  font-weight: 500;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.tag-chip__partition {
  font-size: var(--fs-xs);
  padding: 0 var(--sp-2);
  border-radius: var(--radius-pill);
  background: var(--color-bilibili-soft);
  color: var(--color-bilibili);
}
.tag-chip__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}

/* Heat / Difficulty 双徽章（浅色底 + 语义色文字） */
.heat-badge,
.difficulty-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0 var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 20px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.heat-badge__icon,
.difficulty-badge__icon {
  font-size: 10px;
  line-height: 1;
}
.heat-badge__value,
.difficulty-badge__value { font-variant-numeric: tabular-nums; }

.heat-badge--hot {
  color: var(--color-heat-hot);
  background: var(--badge-hot-bg);
}
.heat-badge--warm {
  color: var(--color-heat-warm);
  background: var(--badge-warm-bg);
}
.heat-badge--cool {
  color: var(--color-heat-cool);
  background: var(--badge-cool-bg);
}
.difficulty-badge--easy {
  color: var(--color-diff-easy);
  background: var(--badge-easy-bg);
}
.difficulty-badge--medium {
  color: var(--color-diff-medium);
  background: var(--badge-medium-bg);
}
.difficulty-badge--hard {
  color: var(--color-diff-hard);
  background: var(--badge-hard-bg);
}

/* ---------- Competitor Tags（extract 专属：纯 chip 无评分） ---------- */
.competitor-block { min-width: 0; }
.competitor-block .result-section__title { font-size: var(--fs-lg); }
.tag-wall--plain .tag-chip--plain {
  padding: var(--sp-1) var(--sp-3);
  background: var(--color-bg);
  border-color: var(--color-border);
  color: var(--color-text-secondary);
  cursor: default;
  transition: none;
}
.tag-wall--plain .tag-chip--plain:hover { border-color: var(--color-border); }

/* TitleList */
.title-list { margin: 0; padding: 0; list-style: none; }
.title-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.title-item:last-child { border-bottom: 0; }
.title-item__main { flex: 1; min-width: 0; }
.title-item__text {
  margin: 0 0 var(--sp-1);
  font-weight: 500;
  overflow-wrap: anywhere;
}
.title-item__meta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
}
.title-item__score { font-weight: 700; }
.title-item__score.is-good { color: var(--color-success); }
.title-item__score.is-warn { color: var(--color-warning); }
.title-item__score.is-bad  { color: var(--color-error); }
.title-item .btn { flex-shrink: 0; }
.title-item .btn.is-copied { border-color: var(--color-success); color: var(--color-success); }

/* ---------- Skeleton ---------- */
.skeleton { display: flex; flex-direction: column; gap: var(--sp-4); }
.skeleton__card {
  height: 120px;
  border-radius: var(--radius-card);
  background: linear-gradient(90deg, var(--color-card) 25%, var(--color-bg) 50%, var(--color-card) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- Empty / Error State ---------- */
.empty-state { text-align: center; padding: var(--sp-8) var(--sp-4); }
.empty-state__icon { font-size: var(--fs-3xl); margin-bottom: var(--sp-3); }
.empty-state__title { margin: 0 0 var(--sp-2); font-weight: 600; font-size: var(--fs-lg); }
.empty-state__desc { margin: 0 0 var(--sp-4); color: var(--color-text-secondary); }

/* ---------- mode 切换占位提示 ---------- */
.mode-switched-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-8) var(--sp-4);
  background: var(--color-card);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-card);
  text-align: center;
}
.mode-switched-placeholder__icon {
  font-size: var(--fs-2xl);
  line-height: 1;
}
.mode-switched-placeholder__text {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
}

/* ---------- Toast（z-index 110，高于弹窗） ---------- */
.toast {
  position: fixed;
  top: calc(var(--header-h) + var(--sp-3));
  left: 50%;
  transform: translate(-50%, -12px);
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-ctrl);
  box-shadow: var(--shadow-float);
  background: var(--color-text);
  color: var(--color-on-primary);
  font-size: var(--fs-sm);
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  max-width: calc(100vw - 32px);
}
.toast--visible { opacity: 1; transform: translate(-50%, 0); }
.toast--success { background: var(--color-success); }
.toast--error { background: var(--color-error); }
.toast__trace { opacity: .75; font-size: var(--fs-xs); }

/* ---------- Waitlist Modal ---------- */
body.is-modal-open { overflow: hidden; }

.waitlist-modal__backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-backdrop);
  background: var(--color-backdrop);
  animation: fade-in .2s ease;
}
.waitlist-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-modal);
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: var(--sp-6);
  background: var(--color-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-float);
  animation: modal-in .22s ease;
}
.waitlist-modal__close {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-target);
  height: var(--tap-target);
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-secondary);
  font-family: inherit;
  font-size: var(--fs-xl);
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.waitlist-modal__close:hover {
  background: var(--color-bg);
  color: var(--color-text);
}
.waitlist-modal__title {
  margin: 0 0 var(--sp-2);
  padding-right: var(--sp-8);
  font-size: var(--fs-xl);
  line-height: 1.3;
}
.waitlist-modal__desc {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
}
.waitlist-modal__form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.waitlist-modal__input {
  width: 100%;
  height: 48px;
  padding: 0 var(--sp-4);
  font-family: inherit;
  font-size: var(--fs-base); /* ≥16px 防 iOS 自动缩放 */
  color: var(--color-text);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-ctrl);
}
.waitlist-modal__input:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: -1px;
  border-color: var(--color-primary);
}
.waitlist-modal__input[aria-invalid="true"] { border-color: var(--color-error); }
.waitlist-modal__input:disabled { opacity: .6; cursor: not-allowed; }
.waitlist-modal__submit {
  width: 100%;
  height: 48px;
  margin-top: var(--sp-2);
}
.waitlist-modal__success {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-success);
}
.waitlist-modal__learn {
  display: inline-block;
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: 600;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes modal-in {
  from { opacity: 0; transform: translate(-50%, -46%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}

/* ---------- How to Use（无边框编辑式排版） ---------- */
.how-to-use { padding: var(--sp-8) 0 var(--sp-12); }
.how-to-use h2 {
  margin: 0 0 var(--sp-6);
  font-size: var(--fs-2xl);
  letter-spacing: -.02em;
}
.how-to-use .steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--sp-8);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.how-to-use .steps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--sp-4);
  row-gap: var(--sp-1);
  min-width: 0;
  padding: var(--sp-6) 0;
  border-top: 1px solid var(--color-border-subtle);
  counter-increment: step;
}
.how-to-use .steps li::before {
  content: counter(step, decimal-leading-zero);
  grid-row: span 2;
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary);
  opacity: .28;
}
@media (min-width: 768px) {
  .how-to-use .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.how-to-use .steps h3 {
  margin: 0;
  font-size: var(--fs-lg);
  line-height: 1.35;
  letter-spacing: -.01em;
}
.how-to-use .steps p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--color-text-secondary);
}

/* ---------- Why It Matters（大留白科普排版） ---------- */
.why-it-matters { padding: var(--sp-8) 0 var(--sp-12); }
.why-it-matters h2 {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-2xl);
  letter-spacing: -.02em;
}
.why-it-matters .lede {
  max-width: 700px;
  margin: 0 0 var(--sp-8);
  font-size: var(--fs-lg);
  line-height: 1.65;
  color: var(--color-text-secondary);
}
.why-it-matters article {
  max-width: 700px;
  padding: 0;
  border-top: 0;
}
.why-it-matters article + article { margin-top: var(--sp-8); }
.why-it-matters article h3 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-xl);
  line-height: 1.3;
  letter-spacing: -.015em;
}
.why-it-matters article p {
  margin: 0;
  line-height: 1.7;
  color: var(--color-text-secondary);
}

/* ---------- FAQ（纯线条列表 + details 平滑动画） ---------- */
.faq { padding: var(--sp-8) 0 var(--sp-12); }
.faq h2 {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-2xl);
  letter-spacing: -.02em;
}
.faq__item {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--color-border-subtle);
  border-radius: 0;
  margin: 0;
  overflow: hidden;
}
.faq__item:last-child { border-bottom: 1px solid var(--color-border-subtle); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  transition: color .2s ease;
}
.faq__item summary:hover { color: var(--color-primary); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  font-size: var(--fs-xl);
  font-weight: 400;
  color: var(--color-text-secondary);
  transition: transform .3s ease;
  flex-shrink: 0;
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}
.faq__item[open] .faq__body { grid-template-rows: 1fr; }
.faq__body-inner { overflow: hidden; }
.faq__body-inner p {
  max-width: 760px;
  margin: 0;
  padding: 0 0 var(--sp-4);
  color: var(--color-text-secondary);
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding: var(--sp-6) 0;
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
}
.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  justify-content: space-between;
}
.site-footer nav { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.site-footer a { color: var(--color-text-secondary); }
.site-footer a:hover { color: var(--color-primary); }

/* ---------- 合规页（纯静态） ---------- */
.legal {
  max-width: var(--content-legal);
  margin: 0 auto;
  padding: var(--sp-8) 0 var(--sp-12);
}
.legal h1 { margin: 0 0 var(--sp-2); font-size: var(--fs-2xl); }
.legal__meta {
  margin: 0 0 var(--sp-8);
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
}
.legal section { margin-bottom: var(--sp-6); }
.legal h2 { margin: 0 0 var(--sp-2); font-size: var(--fs-lg); }
.legal p { margin: 0 0 var(--sp-3); color: var(--color-text-secondary); }
.legal ul { margin: 0 0 var(--sp-3); padding-left: var(--sp-6); }
.legal li { margin-bottom: var(--sp-1); color: var(--color-text-secondary); }
.legal strong { color: var(--color-text); }
.legal code {
  padding: 0 var(--sp-1);
  font-size: var(--fs-sm);
  background: var(--color-bg);
  border-radius: var(--radius-ctrl);
}

/* ---------- 404 ---------- */
.empty-state--page { padding: var(--sp-12) var(--sp-4); }

/* ---------- Waitlist 落地页 ---------- */
.waitlist-card {
  max-width: 560px;
  margin: 0 auto var(--sp-8);
  padding: var(--sp-6);
  background: var(--color-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.waitlist-card__title { margin: 0 0 var(--sp-2); font-size: var(--fs-xl); }
.waitlist-card__desc {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
}
.waitlist-form__field { margin-bottom: var(--sp-3); }
.waitlist-form__label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.waitlist-form__input {
  width: 100%;
  height: 48px;
  padding: 0 var(--sp-4);
  font-family: inherit;
  font-size: var(--fs-base); /* ≥16px 防 iOS 自动缩放 */
  color: var(--color-text);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-ctrl);
}
.waitlist-form__input:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: -1px;
  border-color: var(--color-primary);
}
.waitlist-form__input[aria-invalid="true"] { border-color: var(--color-error); }
.waitlist-form__input:disabled { opacity: .6; cursor: not-allowed; }
.waitlist-success {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border: 1px solid var(--color-success);
  border-radius: var(--radius-ctrl);
}
.waitlist-success__icon { color: var(--color-success); font-weight: 700; }
.waitlist-success__text { margin: 0; }

.why-join { padding-bottom: var(--sp-12); }
.why-join h2 { margin: 0 0 var(--sp-4); font-size: var(--fs-2xl); }
.why-join__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
.why-join__card {
  padding: var(--sp-4);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  min-width: 0;
}
.why-join__card h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-base); }
.why-join__card p { margin: 0; font-size: var(--fs-sm); color: var(--color-text-secondary); }
@media (min-width: 768px) {
  .why-join__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- 响应式（移动优先 / 375px 零横向滚动） ---------- */
@media (max-width: 767px) {
  .hero { padding: var(--sp-8) 0 var(--sp-6); }
  .hero h1 { font-size: var(--fs-2xl); }
  .hero p { font-size: var(--fs-base); }
  .tool-card { padding: var(--sp-4); }
  .waitlist-card { padding: var(--sp-4); }
  .result-section { padding: var(--sp-4); }
  .result-section__title { font-size: var(--fs-lg); }
  .site-header__brand img { width: 24px; height: 24px; }
  .score-dims__row { grid-template-columns: 92px minmax(0, 1fr) 32px; }
  .how-to-use h2,
  .why-it-matters h2,
  .faq h2 { font-size: var(--fs-xl); }
  .why-it-matters .lede { font-size: var(--fs-base); }

  /* 移动端分段控件等分铺满，内部超出时自身滚动，绝不撑破页面 */
  .seg,
  .mode-switch { display: flex; width: 100%; }
  .seg__btn {
    flex: 1 1 auto;
    padding-left: var(--sp-2);
    padding-right: var(--sp-2);
  }
  .mode-switch .seg__btn { flex: 1 1 0; }

  .waitlist-modal { padding: var(--sp-4); }
  .waitlist-modal__title { font-size: var(--fs-lg); }
  .how-to-use .steps li { padding: var(--sp-4); }
}

/* 尊重系统减弱动效偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}