/* =============================================================================
 *  screen "calibrate" (首登选词校准) — 全部挂 [data-screen="calibrate"]
 *  复用 styles.css 设计系统；底部固定操作条避开 tabbar。
 * ========================================================================== */
/* FE-13：透明根让 .phone 星云透出（修 FE-12 遗留：原 --bg 不透明根盖住星云）。 */
[data-screen="calibrate"] { background: transparent; }
[data-screen="calibrate"] .cb-scroll { padding: 0 18px; }

[data-screen="calibrate"] .cb-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0 6px; position: sticky; top: 0; z-index: 5;
  background: linear-gradient(var(--bg) 72%, transparent);
}
[data-screen="calibrate"] .cb-head-k {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--amber);
}
[data-screen="calibrate"] .cb-spark { display: inline-flex; color: var(--amber); }
[data-screen="calibrate"] .cb-skip {
  background: none; border: none; color: var(--ink-faint); font-size: 14px; cursor: pointer;
  padding: 8px 6px; min-height: 44px;
}
[data-screen="calibrate"] .cb-skip:hover { color: var(--ink-dim); }

[data-screen="calibrate"] .cb-intro { margin: 8px 2px 18px; }
[data-screen="calibrate"] .cb-title { margin: 0 0 8px; font-size: 24px; line-height: 1.25; font-weight: 700; color: var(--ink); }
[data-screen="calibrate"] .cb-sub { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--ink-dim); }
[data-screen="calibrate"] .cb-sub b { color: var(--ink); }

[data-screen="calibrate"] .cb-grid {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 10px;
}
[data-screen="calibrate"] .cb-loading,
[data-screen="calibrate"] .cb-empty { width: 100%; padding: 28px 8px; text-align: center; color: var(--ink-faint); font-size: 14px; }
[data-screen="calibrate"] .cb-empty-go {
  background: none; border: none; color: var(--amber); font-size: 14px; cursor: pointer; padding: 4px;
}

/* 词 chip（认识 = 点亮 mint；默认中性）*/
[data-screen="calibrate"] .cb-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 15px; min-height: 46px;
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: 999px;
  color: var(--ink); cursor: pointer;
  opacity: 0; transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease, border-color .15s ease, background .15s ease;
}
[data-screen="calibrate"] .cb-chip.in { opacity: 1; transform: translateY(0); }
[data-screen="calibrate"] .cb-chip-w { font-family: var(--jp); font-size: 18px; font-weight: 500; }
[data-screen="calibrate"] .cb-chip-w rt { color: var(--amber); font-size: .55em; }
[data-screen="calibrate"] .cb-chip-mark {
  width: 18px; height: 18px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1.5px solid var(--line-strong); color: transparent;
  transition: all .15s ease;
}
[data-screen="calibrate"] .cb-chip.on {
  border-color: color-mix(in srgb, var(--s-done) 50%, transparent); background: color-mix(in srgb, var(--s-done) 10%, transparent);
}
[data-screen="calibrate"] .cb-chip.on .cb-chip-mark {
  border-color: var(--mint); background: var(--mint); color: var(--bg);
}

/* 底部固定操作条 */
[data-screen="calibrate"] .cb-bottom-pad { height: calc(var(--tabbar-h) + 78px); }
[data-screen="calibrate"] .cb-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(transparent, var(--bg) 28%);
  z-index: 6;
}
[data-screen="calibrate"] .cb-count { font-size: 14px; color: var(--ink-dim); white-space: nowrap; }
[data-screen="calibrate"] .cb-submit { flex: 1; }
[data-screen="calibrate"] .cb-submit:disabled { opacity: .5; }

@media (prefers-reduced-motion: reduce) {
  [data-screen="calibrate"] .cb-chip { opacity: 1; transform: none; transition: border-color .15s ease, background .15s ease; }
}