/* ==========================================================================
   内容页共用样式：范文库(.ex-) / 职业路径(.cp-) / 面试攻略(.iv-)
   沿用 base.css 的设计令牌，不引入新配色
   ========================================================================== */

.ct-page {
  /* 二期：留白加大。内容页原文案密、卡厚，收紧的顶部会让第一屏像「后台报表」；
     44px 起头 + 76px 收尾，视线有进有出。 */
  padding-top: 44px;
  padding-bottom: 76px;
  max-width: 980px;
}

/* 页面头：默认块级（老页面是 h1 + p 两个直接子元素，改成 flex 会并排）；
   带插画的页额外加 .ct-head--illus 才是两栏。 */
.ct-head-copy { min-width: 0; }
.ct-head h1 { font-size: var(--fs-t2); letter-spacing: -.01em; }
.ct-head p { color: var(--ink-2); margin-top: 8px; font-size: var(--fs-ui); line-height: var(--lh-relaxed); }

.ct-head--illus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.ct-head-illus {
  flex-shrink: 0;
  width: 200px;
  height: auto;
}

/* 免责/口径说明条：内容页统一用它，不要各写一套 */
.ct-note {
  background: var(--brand-soft);
  border: 1px solid #d8e6f1;
  color: var(--ink-2);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.6;
  margin-top: 16px;
}

/* ---------- 通用 tab ---------- */
.ct-tabs { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.ct-tab {
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 14px;
  cursor: pointer;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ct-tab.active { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); font-weight: 600; }
.ct-tab em { font-style: normal; font-size: 12px; color: var(--ink-3); }
.ct-tab.active em { color: var(--brand); }

/* ---------- 分类/族筛选条 ---------- */
.ct-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ct-chip {
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 13px;
  cursor: pointer;
  color: var(--ink-2);
}
.ct-chip.active { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }

/* ---------- 内容页通用弹层（范文详情等） ---------- */
.ct-mask {
  position: fixed;
  inset: 0;
  background: rgba(23, 27, 33, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}
.ct-panel {
  background: var(--card);
  border-radius: var(--r-lg);
  width: 100%;
  max-width: 560px;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-2);
}
.ct-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-2);
}
.ct-panel-head strong { font-size: 16px; min-width: 0; }
.ct-panel-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--ink-3);
  flex-shrink: 0;
}
.ct-panel-scroll { padding: 16px 20px; overflow-y: auto; }
.ct-panel-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--line-2);
}

/* 详情正文：保留原文换行，可选中复制 */
.ex-detail-content {
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--line-2);
  border-radius: 10px;
  user-select: text;
}
#exDetailComment { margin-top: 12px; }

/* ==========================================================================
   范文库 .ex-
   ========================================================================== */
.ex-list { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.ex-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color .15s;
}
.ex-card:hover { border-color: var(--brand); }

/* 单条范文的独立页入口（SEO 内链 + 可分享链接） */
.ex-detail {
  display: inline-block;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--ink-3);
  text-decoration: none;
}
.ex-detail:hover { color: var(--accent-ink); text-decoration: none; }
.ex-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ex-title { font-size: 15px; font-weight: 600; }
.ex-section {
  font-size: 12px;
  color: var(--ink-3);
  background: var(--line-2);
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
.ex-meta { display: flex; gap: 10px; margin-top: 6px; align-items: center; }
.ex-position { font-size: 13px; color: var(--brand); }
.ex-category { font-size: 12px; color: var(--ink-3); }
.ex-preview {
  display: block;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.7;
  margin-top: 10px;
  white-space: pre-wrap;
  word-break: break-word;
  /* 卡片只露前几行，完整内容在详情里看 */
  max-height: 5.1em;
  overflow: hidden;
}
.ex-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ex-tag {
  font-size: 12px;
  color: var(--ink-2);
  background: var(--line-2);
  border-radius: 6px;
  padding: 2px 8px;
}

/* ==========================================================================
   职业路径 .cp-
   ========================================================================== */
.cp-anchor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 18px;
  margin-top: 16px;
}
.cp-anchor-title { font-size: 14px; font-weight: 600; }
.cp-anchor-desc { font-size: 13px; color: var(--ink-2); margin-top: 2px; }

.cp-paths { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.cp-path {
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 10px;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  color: var(--ink-2);
}
.cp-path.active { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); font-weight: 600; }
.cp-path-desc { font-size: 13px; color: var(--ink-2); margin-top: 10px; }

/* 阶段时间轴 */
.cp-stages { margin-top: 8px; }
.cp-stage { display: flex; gap: 14px; }
.cp-stage-rail { display: flex; flex-direction: column; align-items: center; width: 18px; flex-shrink: 0; }
.cp-stage-node {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--card);
  margin-top: 18px;
  flex-shrink: 0;
}
.cp-stage.reached .cp-stage-node { border-color: var(--brand); background: var(--brand); }
.cp-stage-line { width: 2px; flex: 1; background: var(--line); margin: 4px 0; }
.cp-stage.reached .cp-stage-line { background: #cfe2f0; }
.cp-stage-card {
  flex: 1;
  min-width: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 16px;
  margin-bottom: 12px;
  cursor: pointer;
}
.cp-stage.target .cp-stage-card { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.cp-stage-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cp-stage-name { font-size: 15px; font-weight: 600; }
.cp-stage-salary { font-size: 13px; color: var(--ok-ink); font-weight: 600; }
.cp-stage-tag {
  font-size: 11px; color: var(--brand); background: var(--brand-soft);
  border-radius: 999px; padding: 1px 8px;
}
.cp-stage-skills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cp-skill { font-size: 12px; color: var(--ink-2); background: var(--line-2); border-radius: 6px; padding: 2px 8px; }

.cp-salary-note { font-size: 12px; color: var(--ink-3); line-height: 1.7; margin-top: 4px; }
.cp-salary-note + .cp-salary-note { margin-top: 2px; }

/* 技能缺口 */
.cp-gap {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 18px;
  margin-top: 20px;
}
.cp-gap-stat { display: flex; align-items: baseline; gap: 4px; margin-bottom: 12px; }
.cp-gap-num { font-size: 26px; font-weight: 700; color: var(--brand); }
.cp-gap-total { font-size: 15px; color: var(--ink-3); }
.cp-gap-label { font-size: 13px; color: var(--ink-2); margin-left: 6px; }
.cp-gap-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--line-2);
  font-size: 14px;
}
.cp-gap-row:first-of-type { border-top: none; }
.cp-gap-mark { width: 18px; text-align: center; font-weight: 700; }
.cp-gap-row.hit .cp-gap-mark { color: var(--ok-ink); }
.cp-gap-row.miss .cp-gap-mark { color: var(--warn-ink); }
.cp-gap-name { flex: 1; min-width: 0; }
.cp-gap-status { font-size: 12px; color: var(--ink-3); }
.cp-gap-row.hit .cp-gap-status { color: var(--ok-ink); }
.cp-gap-row.miss .cp-gap-status { color: var(--warn-ink); }
.cp-gap-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

/* ==========================================================================
   面试攻略 .iv-
   ========================================================================== */
.iv-form {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 20px;
  margin-top: 18px;
}
.iv-field { margin-bottom: 14px; }
.iv-field:last-of-type { margin-bottom: 0; }
.iv-label { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 6px; }
.iv-input, .iv-textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 14px;
  background: var(--card);
}
.iv-input:focus, .iv-textarea:focus { outline: none; border-color: var(--brand); }
.iv-textarea { min-height: 96px; resize: vertical; }
.iv-counter { font-size: 12px; color: var(--ink-3); text-align: right; margin-top: 4px; }
.iv-submit { margin-top: 16px; }
.iv-hint { font-size: 12px; color: var(--ink-3); margin-top: 10px; line-height: 1.6; }

.iv-result-head { margin-top: 20px; }
.iv-result-head h2 { font-size: 19px; }
.iv-result-sub { font-size: 13px; color: var(--ink-2); margin-top: 4px; }

.iv-match {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 18px;
  margin-top: 14px;
}
.iv-match-line { display: flex; gap: 10px; font-size: 13px; margin-bottom: 6px; }
.iv-match-key { color: var(--ink-3); width: 56px; flex-shrink: 0; }
.iv-match-val { color: var(--ink); flex: 1; min-width: 0; word-break: break-word; }
.iv-match-note { font-size: 12px; color: var(--ink-3); line-height: 1.6; margin-top: 6px; }

.iv-block {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 18px;
  margin-top: 14px;
}
.iv-block-title { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.iv-q { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-2); }
.iv-q:first-of-type { border-top: none; padding-top: 0; }
.iv-q-index {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand);
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 2px;
}
.iv-q-body { flex: 1; min-width: 0; }
.iv-q-text { font-size: 14px; line-height: 1.65; }
.iv-q-point { font-size: 13px; color: var(--ink-2); line-height: 1.7; margin-top: 6px; padding: 8px 10px; background: var(--line-2); border-radius: 8px; }

.iv-tip { display: flex; gap: 10px; font-size: 13px; color: var(--ink-2); line-height: 1.7; padding: 6px 0; }
.iv-tip-badge {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--brand); color: #fff;
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 2px;
}

.iv-prep { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; font-size: 14px; cursor: pointer; }
.iv-check {
  width: 18px; height: 18px; border-radius: 4px;
  border: 1.5px solid var(--line);
  background: var(--card);
  flex-shrink: 0; margin-top: 3px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: #fff;
}
.iv-prep.checked .iv-check { background: var(--brand); border-color: var(--brand); }
.iv-prep.checked .iv-prep-text { color: var(--ink-3); text-decoration: line-through; }
.iv-prep-text { flex: 1; min-width: 0; line-height: 1.65; }

.iv-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }

.ct-empty { text-align: center; padding: 48px 0; color: var(--ink-3); font-size: 14px; }

@media (max-width: 640px) {
  .ct-page { padding-top: 20px; }
  .ex-card { padding: 14px; }
  .cp-anchor { flex-direction: column; align-items: flex-start; }
  .iv-form { padding: 16px; }
}


/* ==========================================================================
   通用：区块标题 / 空状态卡（转行/参谋/分享共用）
   ========================================================================== */
.ct-sec-title {
  font-size: 16px;
  font-weight: 600;
  margin: 26px 0 10px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.ct-sec-sub { font-size: 12px; font-weight: 400; color: var(--ink-3); }

.ja-lock {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 28px 20px;
  text-align: center;
  font-size: 15px;
  color: var(--ink-2);
}
.ja-lock p { font-size: 13px; color: var(--ink-3); margin: 8px 0 16px; line-height: 1.6; }

.ct-cta { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }

/* ==========================================================================
   转行方向 .cs-
   ========================================================================== */
.cs-cards { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.cs-card {
  text-align: left;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 18px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color .15s;
}
.cs-card:hover { border-color: var(--brand); }
.cs-card-route { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; font-weight: 600; }
.cs-card-arrow { color: var(--brand); }
.cs-card-to { color: var(--brand-ink); }
.cs-card-summary { font-size: 13px; color: var(--ink-2); line-height: 1.7; margin-top: 8px; }
.cs-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cs-tag {
  font-size: 12px;
  color: var(--ink-2);
  background: var(--line-2);
  border-radius: 6px;
  padding: 2px 8px;
}
.cs-tag-demand { background: var(--brand-soft); color: var(--brand); }
.cs-tag-ind { background: #eef7f1; color: var(--ok-ink); }
.cs-tag-count { background: #fbf1e3; color: var(--warn-ink); }

.cs-back {
  background: none;
  border: none;
  color: var(--brand);
  font-size: 14px;
  cursor: pointer;
  padding: 6px 0;
  margin-bottom: 4px;
}

.cs-hero {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 20px;
}
.cs-route { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 19px; font-weight: 700; }
.cs-arrow { color: var(--brand); }
.cs-to { color: var(--brand-ink); }
.cs-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.cs-pill {
  font-size: 12px;
  background: var(--line-2);
  color: var(--ink-2);
  border-radius: 999px;
  padding: 3px 10px;
}
.cs-pill-demand { background: var(--brand-soft); color: var(--brand); }
.cs-tip {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.7;
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--brand-soft);
  border-radius: 8px;
}

/* 迁移资本 */
.cs-evi {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 18px;
}
.cs-evi-empty { font-size: 14px; color: var(--ink-2); text-align: center; line-height: 1.8; }
.cs-evi-empty .btn { margin-top: 12px; }
.cs-evi-stat { display: flex; align-items: baseline; gap: 4px; margin-bottom: 10px; }
.cs-evi-num { font-size: 26px; font-weight: 700; color: var(--brand); }
.cs-evi-total { font-size: 15px; color: var(--ink-3); }
.cs-evi-label { font-size: 13px; color: var(--ink-2); margin-left: 6px; }
.cs-evi-list { display: flex; flex-direction: column; }
.cs-evi-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 0;
  border-top: 1px solid var(--line-2);
  font-size: 14px;
  flex-wrap: wrap;
}
.cs-evi-row:first-child { border-top: none; }
.cs-evi-mark { width: 16px; flex-shrink: 0; font-weight: 700; }
.cs-evi-row.hit .cs-evi-mark { color: var(--ok-ink); }
.cs-evi-row.miss .cs-evi-mark { color: var(--ink-3); }
.cs-evi-row.miss .cs-evi-old { color: var(--ink-3); }
.cs-evi-old { min-width: 0; }
.cs-evi-new { color: var(--brand); font-size: 13px; }

/* 翻译表 */
.cs-tr { display: flex; flex-direction: column; gap: 10px; }
.cs-tr-row {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 16px;
}
.cs-tr-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.cs-tr-old { color: var(--ink-3); text-decoration: line-through; }
.cs-tr-arrow { color: var(--brand); font-weight: 700; }
.cs-tr-new { font-weight: 600; }
.cs-tr-why { font-size: 12px; color: var(--ink-3); margin-top: 6px; }

/* 缺口 */
.cs-gaps { }
.cs-gap-list {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 8px 16px;
}
.cs-gap-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 9px 0;
  border-top: 1px solid var(--line-2);
  font-size: 14px;
}
.cs-gap-item:first-child { border-top: none; }
.cs-gap-mark { color: var(--warn-ink); font-weight: 700; flex-shrink: 0; }

/* 改写示例 */
.cs-rw { display: flex; flex-direction: column; gap: 14px; }
.cs-rw-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 18px;
}
.cs-rw-field { font-size: 13px; color: var(--brand); font-weight: 600; margin-bottom: 10px; }
.cs-rw-block { border-radius: 8px; padding: 10px 12px; }
.cs-rw-block p { font-size: 14px; line-height: 1.75; }
.cs-rw-label { display: block; font-size: 11px; color: var(--ink-3); margin-bottom: 4px; }
.cs-rw-old { background: var(--line-2); }
.cs-rw-old p { color: var(--ink-2); }
.cs-rw-new { background: var(--brand-soft); }
.cs-rw-connector { font-size: 12px; color: var(--brand); text-align: center; padding: 6px 0; }
.cs-rw-copy { margin-top: 12px; }

/* ==========================================================================
   智能求职参谋 .ja-
   ========================================================================== */
.ja-track-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 20px 0 10px;
  font-size: 16px;
  font-weight: 600;
}
.ja-track-head em { font-style: normal; font-size: 12px; color: var(--ink-3); font-weight: 400; }

.ja-track {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.ja-track-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ja-track-name { font-size: 15px; font-weight: 600; }
.ja-heat { display: inline-flex; gap: 3px; flex-shrink: 0; }
.ja-heat-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--line);
  display: inline-block;
}
.ja-heat-dot.on { background: #e08a2e; }
.ja-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.ja-badge {
  font-size: 12px;
  border-radius: 6px;
  padding: 2px 8px;
  background: var(--line-2);
  color: var(--ink-2);
}
.ja-badge-ind { background: #eef7f1; color: var(--ok-ink); }
.ja-badge-heat { background: #fdf3e7; color: #a5641a; }
.ja-badge-match { background: var(--brand-soft); color: var(--brand); }
.ja-badge-cost.low { background: #eef7f1; color: var(--ok-ink); }
.ja-badge-cost.mid { background: #fdf3e7; color: #a5641a; }
.ja-badge-cost.high { background: #fbeae9; color: var(--danger-ink); }
.ja-track-reason { font-size: 13px; color: var(--ink-2); line-height: 1.7; margin-top: 10px; }

.ja-legend {
  background: var(--line-2);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.9;
  margin-top: 14px;
}
.ja-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; }
.ja-dot-heat { background: #e08a2e; }
.ja-dot-match { background: var(--brand); }
.ja-dot-cost { background: var(--ink-4); }

/* 连续性 */
.ja-cont {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 20px;
}
.ja-cont-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ja-cont-score { display: flex; align-items: baseline; gap: 2px; }
.ja-cont-score b { font-size: 38px; font-weight: 700; color: var(--brand); line-height: 1; }
.ja-cont-score span { font-size: 14px; color: var(--ink-3); }
.ja-cont-meta { display: flex; flex-direction: column; gap: 4px; }
.ja-cont-level { font-size: 13px; font-weight: 600; padding: 2px 10px; border-radius: 999px; width: fit-content; }
.ja-cont-level.good { background: #eef7f1; color: var(--ok-ink); }
.ja-cont-level.mid { background: var(--brand-soft); color: var(--brand); }
.ja-cont-level.warn { background: #fdf3e7; color: #a5641a; }
.ja-cont-level.bad { background: #fbeae9; color: var(--danger-ink); }
.ja-cont-years { font-size: 13px; color: var(--ink-3); }
.ja-cont-bar {
  height: 8px;
  background: var(--line-2);
  border-radius: 999px;
  overflow: hidden;
  margin: 16px 0;
}
.ja-cont-bar i { display: block; height: 100%; border-radius: 999px; }
.ja-cont-bar i.good { background: var(--ok); }
.ja-cont-bar i.mid { background: var(--brand); }
.ja-cont-bar i.warn { background: #e0a33e; }
.ja-cont-bar i.bad { background: var(--danger); }
.ja-factors { display: flex; flex-direction: column; }
.ja-factor {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--line-2);
  font-size: 14px;
}
.ja-factor:first-child { border-top: none; }
.ja-factor-mark { font-weight: 700; flex-shrink: 0; width: 16px; }
.ja-factor.ok .ja-factor-mark { color: var(--ok-ink); }
.ja-factor.warn .ja-factor-mark { color: var(--warn-ink); }
.ja-factor-label { font-weight: 600; }
.ja-factor-desc { font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.ja-advice {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--brand-soft);
  border-radius: 10px;
}
.ja-advice-title { font-size: 13px; font-weight: 600; color: var(--brand-ink); margin-bottom: 6px; }
.ja-advice p { font-size: 13px; color: var(--ink-2); line-height: 1.75; }

/* 谈薪话术 */
.ja-script {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: 10px;
  overflow: hidden;
}
.ja-script.open { border-color: var(--brand); }
.ja-script-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}
.ja-script-scene { font-size: 15px; font-weight: 600; }
.ja-script-arrow { color: var(--ink-3); font-size: 18px; flex-shrink: 0; }
.ja-script-body { padding: 0 16px 16px; }
.ja-script-when { font-size: 12px; color: var(--ink-3); margin-bottom: 10px; line-height: 1.7; }
.ja-script-quote {
  margin: 0 0 14px;
  padding: 12px 14px;
  background: var(--brand-soft);
  border-left: 3px solid var(--brand);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink);
}
.ja-script-block { margin-bottom: 12px; }
.ja-script-block-title { font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--ink-2); }
.ja-script-point { font-size: 13px; line-height: 1.7; color: var(--ink-2); padding-left: 14px; position: relative; }
.ja-script-point::before { content: "·"; position: absolute; left: 4px; }
.ja-script-point.avoid { color: var(--ink-3); }
.ja-salary-foot {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.8;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line-2);
}

/* ==========================================================================
   简历分享设置页 .sh-
   ========================================================================== */
.sh-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 18px;
  margin-top: 18px;
}
.sh-card-title { font-size: 15px; font-weight: 600; }
.sh-card-desc { font-size: 13px; color: var(--ink-3); line-height: 1.7; margin: 6px 0 12px; }
.sh-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--line-2);
  font-size: 14px;
  cursor: pointer;
}
.sh-switch-row input { width: 18px; height: 18px; accent-color: var(--brand); cursor: pointer; }

.sh-preview {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  max-width: 520px;
}
.sh-pv-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: var(--brand-soft);
}
.sh-pv-logo { width: 22px; height: 22px; object-fit: contain; }
.sh-pv-brand { font-size: 13px; font-weight: 600; color: var(--brand-ink); }
.sh-pv-body { padding: 18px; }
.sh-pv-name { font-size: 21px; font-weight: 700; }
.sh-pv-headline { font-size: 13px; color: var(--ink-2); margin-top: 4px; }
.sh-pv-sec { font-size: 12px; color: var(--ink-3); margin: 14px 0 6px; }
.sh-pv-hl { font-size: 13px; color: var(--ink-2); line-height: 1.8; }
.sh-pv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sh-pv-chip { font-size: 12px; background: var(--line-2); border-radius: 6px; padding: 2px 8px; color: var(--ink-2); }
.sh-pv-contact { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--ink-2); margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.sh-pv-contact.muted { color: var(--ink-3); }
.sh-pv-foot { padding: 10px 18px; background: var(--line-2); font-size: 11px; color: var(--ink-3); letter-spacing: .04em; }

.sh-result {
  background: var(--card);
  border: 1px solid var(--brand);
  border-radius: var(--r-md);
  padding: 16px 18px;
  margin-top: 18px;
}
.sh-result-title { font-size: 14px; font-weight: 600; color: var(--brand-ink); margin-bottom: 10px; }
.sh-result-row { display: flex; gap: 8px; align-items: center; }
.sh-result-row .iv-input { flex: 1; min-width: 0; }

.sh-mine-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 16px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.sh-mine-main { flex: 1; min-width: 140px; display: flex; flex-direction: column; gap: 2px; }
.sh-mine-main strong { font-size: 14px; }
.sh-mine-main span { font-size: 12px; color: var(--ink-3); }
.sh-mine-meta { display: flex; gap: 12px; font-size: 12px; color: var(--ink-3); }
.sh-mine-views { color: var(--brand); }
.sh-mine-ops { display: flex; gap: 8px; }

/* ==========================================================================
   公开分享落地页 .sv-（访客视角，无站内导航）
   ========================================================================== */
body.sv-page { background: #f2f5f8; }
.sv-bar { background: var(--card); border-bottom: 1px solid var(--line); }
.sv-bar-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-ink);
}
.sv-bar-inner img { width: 24px; height: 24px; object-fit: contain; }

.sv-wrap { max-width: 720px; padding: 24px 20px 8px; }

.sv-state { text-align: center; padding: 60px 20px; }
.sv-state p { font-size: 14px; color: var(--ink-3); }
.sv-state-strong { font-size: 16px !important; color: var(--ink) !important; font-weight: 600; }
.sv-state-sub { margin: 8px 0 20px; }
.sv-spin {
  width: 26px; height: 26px;
  border: 3px solid var(--line);
  border-top-color: var(--brand);
  border-radius: 50%;
  margin: 0 auto 14px;
  animation: sv-spin .8s linear infinite;
}
@keyframes sv-spin { to { transform: rotate(360deg); } }

.sv-hero {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px 24px 20px;
}
.sv-name { font-size: 26px; font-weight: 700; margin: 0; }
.sv-headline { font-size: 14px; color: var(--ink-2); margin-top: 8px; line-height: 1.7; }
.sv-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.sv-tag { font-size: 12px; background: var(--brand-soft); color: var(--brand); border-radius: 999px; padding: 3px 10px; }

.sv-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 14px 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  margin-top: 12px;
  font-size: 13px;
  color: var(--ink-2);
}

.sv-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px 24px;
  margin-top: 12px;
}
.sv-card-t { font-size: 14px; font-weight: 600; color: var(--brand-ink); margin: 0 0 12px; }
.sv-hl { font-size: 14px; color: var(--ink-2); line-height: 1.85; }
.sv-exp { padding: 10px 0; border-top: 1px solid var(--line-2); }
.sv-exp:first-of-type { border-top: none; padding-top: 0; }
.sv-exp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sv-exp-org { font-size: 15px; font-weight: 600; }
.sv-exp-period { font-size: 12px; color: var(--ink-3); }
.sv-exp-role { font-size: 13px; color: var(--brand); margin-top: 2px; }
.sv-exp-line { font-size: 13px; color: var(--ink-2); line-height: 1.8; margin-top: 6px; }
.sv-edu { padding: 8px 0; border-top: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 2px; }
.sv-edu:first-of-type { border-top: none; padding-top: 0; }
.sv-edu-school { font-size: 15px; font-weight: 600; }
.sv-edu-major { font-size: 13px; color: var(--ink-2); }
.sv-edu-period { font-size: 12px; color: var(--ink-3); }
.sv-skills { display: flex; flex-wrap: wrap; gap: 8px; }
.sv-skill { font-size: 13px; background: var(--line-2); border-radius: 6px; padding: 3px 10px; color: var(--ink-2); }

.sv-foot { max-width: 720px; margin: 24px auto 48px; padding: 0 20px; text-align: center; }
.sv-foot-brand { font-size: 12px; color: var(--ink-3); letter-spacing: .05em; }
.sv-foot-tip { font-size: var(--fs-micro); color: var(--ink-3); margin: 6px 0 16px; }

@media (max-width: 640px) {
  .sv-name { font-size: 22px; }
  .sv-wrap { padding: 16px 14px 4px; }
  .sv-hero, .sv-card { padding: 18px 16px; }
  .sh-mine-row { gap: 10px; }
  .cs-card-route { font-size: 14px; }
}

/* 补齐：转行/参谋/分享页用到的按钮组与文本片段 */
.cs-cta { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.cs-from, .cs-card-from { color: var(--ink); }
.sv-contact-item { white-space: nowrap; }
.jb-funnel-foot-item { white-space: nowrap; }

/* ==========================================================================
   二期：留白节奏与插画（2026-11-03）
   内容页原来偏「密」：板块标题 26px 起、卡片内边距 16-18px、列表间距 12px，
   一屏里信息挤成一片。这一版统一放大一档，让视线有停顿。
   ========================================================================== */

/* 板块标题：与上一段拉开 34px，与正文留 12px */
.ct-sec-title { margin: 34px 0 12px; }

/* 页头到第一个交互块之间的呼吸 */
.ct-tabs { margin-top: 24px; }
.ct-chips { margin-top: 18px; }
.ct-note { margin-top: 20px; padding: 12px 16px; line-height: 1.7; }

/* 卡片与列表：内边距 ≥ 20，列表间距 14 */
.ex-list { gap: 14px; margin-top: 22px; }
.ex-card { padding: 20px 22px; }
.iv-form { padding: 22px 24px; margin-top: 24px; }
.iv-field { margin-bottom: 18px; }
.cs-cards { gap: 14px; margin-top: 22px; }
.cs-hero { padding: 22px 24px; }
.cs-evi, .cs-tr-row, .cs-gap-list, .cs-rw-card { padding: 18px 22px; }
.cp-anchor { padding: 16px 20px; }
.ja-track { padding: 16px 18px; }
.ja-cont { padding: 22px 24px; }

/* 转行详情右上角的圆点装饰：位置在卡片角内、不压标题，
   opacity .55 让它退到背景层，不参与阅读。 */
.cs-hero { position: relative; }
.cs-hero-deco {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 84px;
  height: 84px;
  opacity: .55;
  pointer-events: none;
}

/* 空状态给一张小插画：比一行灰字更像「还没内容」而不是「出错了」 */
.ct-empty-illus {
  display: block;
  width: 160px;
  height: auto;
  margin: 0 auto 14px;
}

@media (max-width: 720px) {
  .ct-page { padding-top: 28px; padding-bottom: 56px; }
  .ct-head--illus { gap: 14px; align-items: flex-start; }
  .ct-head h1 { font-size: 22px; }
  .ct-head-illus { width: 104px; margin-top: 2px; }
  .ct-sec-title { margin: 26px 0 10px; }
  .ex-card { padding: 16px; }
  .iv-form { padding: 16px; }
  .cs-hero { padding: 18px 16px; }
  /* 手机上圆点会压在「→ 目标岗位」标题上，直接收起 */
  .cs-hero-deco { display: none; }
}

/* ==========================================================================
   人工精修页 .svc-（/service）
   ========================================================================== */
.svc-lead {
  font-size: var(--fs-body-lg);
  color: var(--ink-2);
  line-height: var(--lh-relaxed);
  max-width: 40em;
  margin-top: var(--sp-3);
}

/* 三档方案 */
.svc-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}

.svc-plan {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  display: flex;
  flex-direction: column;
}
/* 推荐档只靠描边 + 阴影拉高，不用橙色底 —— 橙色留给真正的行动按钮 */
.svc-plan.rec {
  border-color: var(--brand);
  box-shadow: var(--shadow-brand);
}

.svc-plan-badge {
  position: absolute;
  top: -10px;
  left: var(--sp-5);
  font-size: var(--fs-micro);
  font-weight: 500;
  color: #fff;
  background: var(--brand);
  border-radius: var(--r-pill);
  padding: 2px 10px;
}

.svc-plan-name {
  font-size: var(--fs-t4);
  font-weight: 600;
}

.svc-plan-price {
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin: var(--sp-2) 0 var(--sp-4);
}
.svc-plan-price b {
  font-size: var(--fs-t2);
  font-weight: 700;
  letter-spacing: -.01em;
}
.svc-plan-price span {
  font-size: var(--fs-caption);
  color: var(--ink-3);
}

.svc-plan-feats {
  list-style: none;
  margin: 0 0 var(--sp-5);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}
.svc-plan-feats li {
  position: relative;
  padding-left: 18px;
  font-size: var(--fs-caption);
  color: var(--ink-2);
  line-height: var(--lh-normal);
}
.svc-plan-feats li::before {
  content: "·";
  position: absolute;
  left: 4px;
  top: -1px;
  font-weight: 700;
  color: var(--brand);
  font-size: var(--fs-body);
}

.svc-plan .btn { width: 100%; }

/* 按钮下方的小字提醒：不抢行动主位，只给拿不准的人一个台阶 */
.svc-plan-alt {
  display: block;
  margin-top: 10px;
  font-size: var(--fs-caption);
  color: var(--ink-3);
  text-align: center;
  text-decoration: none;
}
.svc-plan-alt:hover { color: var(--brand); text-decoration: underline; }

/* 服务流程 */
.svc-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.svc-step {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-4) var(--sp-5);
}
.svc-step-n {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--brand-soft);
  color: var(--brand-ink);
  display: grid;
  place-items: center;
  font-size: var(--fs-caption);
  font-weight: 700;
  margin-bottom: var(--sp-3);
}
.svc-step h3 { font-size: var(--fs-body); margin-bottom: 4px; }
.svc-step p { font-size: var(--fs-caption); color: var(--ink-2); line-height: var(--lh-normal); }

/* 下单方式说明 */
.svc-note-box {
  margin-top: var(--sp-5);
  background: var(--brand-soft);
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: var(--sp-4) var(--sp-4);
  font-size: var(--fs-caption);
  color: var(--ink-2);
  line-height: var(--lh-relaxed);
}
.svc-note-box b { color: var(--brand-ink); }

/* 服务边界（合规必须写清，不能只写「包满意」） */
.svc-boundary {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-2);
  font-size: var(--fs-micro);
  color: var(--ink-3);
  line-height: var(--lh-relaxed);
}
.svc-boundary a { color: var(--brand); }

@media (max-width: 860px) {
  .svc-plans { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .svc-plan { padding: var(--sp-5) var(--sp-4) var(--sp-4); }
  .svc-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .svc-flow { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   模拟面试 .mi-
   ==========================================================================
   与「面试攻略」是两条路：
     攻略 = 把题和要点摊开给你看（可复制、可搜索）；
     模拟 = 一次只给一题、有计时、要你自己先写一遍，最后才对照要点。
   所以这一页刻意**一次只露一题**，避免变成又一个题库列表。
   ========================================================================== */
/* 职级正好 5 档，排 5 列；写 4 列会让「管理岗」独占第二行显得像漏了一张 */
.mi-levels { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-3); }
.mi-level,
.mi-dir {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  text-align: left;
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.mi-level b,
.mi-dir b { font-size: var(--fs-ui); font-weight: 600; color: var(--ink); }
.mi-level span,
.mi-dir span { font-size: var(--fs-caption); color: var(--ink-3); }
.mi-level:hover,
.mi-dir:hover { border-color: var(--ink-4); }
.mi-level.active,
.mi-dir.active {
  border-color: var(--brand);
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 1px var(--brand);
}
.mi-level.active b,
.mi-dir.active b { color: var(--brand-ink); }
.mi-level.active span,
.mi-dir.active span { color: var(--brand); }

.mi-dirs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }

.mi-note { margin-top: var(--sp-4); font-size: var(--fs-caption); color: var(--ink-3); }

/* ---- 作答区 ---- */
.mi-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
}
.mi-step { font-size: var(--fs-ui); font-weight: 600; color: var(--ink-2); }
/* 计时器用等宽数字，秒数跳动时宽度不变，避免整行抖动 */
.mi-timer {
  margin-left: auto;
  font-size: var(--fs-t4);
  font-weight: 600;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.mi-timer.over { color: var(--danger-ink); }
.mi-timer.over::after {
  content: '已超建议时长';
  margin-left: 6px;
  font-size: var(--fs-micro);
  font-weight: 400;
}
.mi-progress {
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--line-2);
  overflow: hidden;
}
.mi-progress i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--brand);
  transition: width var(--dur-move) var(--ease);
}

.mi-card {
  margin-top: var(--sp-5);
  padding: var(--sp-6);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.mi-tag { font-size: var(--fs-caption); color: var(--brand); font-weight: 600; }
.mi-q {
  font-size: var(--fs-t3);
  line-height: var(--lh-snug);
  margin: var(--sp-2) 0 var(--sp-5);
}
.mi-answer .iv-textarea { min-height: 140px; }
.mi-point { margin: var(--sp-4) 0; border: 1px dashed var(--line); border-radius: var(--r-md); }
.mi-point summary {
  padding: 10px 14px;
  cursor: pointer;
  font-size: var(--fs-ui);
  color: var(--brand);
  list-style: none;
  user-select: none;
}
.mi-point summary::-webkit-details-marker { display: none; }
.mi-point summary::before { content: '＋ '; font-weight: 600; }
.mi-point[open] summary::before { content: '－ '; }
.mi-point p {
  padding: 0 14px 14px;
  font-size: var(--fs-ui);
  line-height: var(--lh-relaxed);
  color: var(--ink-2);
}
.mi-actions { display: flex; gap: var(--sp-3); justify-content: flex-end; flex-wrap: wrap; }

/* ---- 回顾 ---- */
.mi-sum {
  padding: var(--sp-5) var(--sp-6);
  background: var(--brand-soft);
  border-radius: var(--r-lg);
}
.mi-sum-facts { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.mi-sum-facts span { font-size: var(--fs-ui); font-weight: 600; color: var(--brand-ink); }
.mi-sum-advice {
  margin-top: var(--sp-3);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--ink);
}
.mi-sum-note { margin-top: var(--sp-2); font-size: var(--fs-caption); color: var(--ink-3); }

.mi-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.mi-rev {
  padding: var(--sp-5);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.mi-rev-tag { font-size: var(--fs-caption); color: var(--ink-3); }
.mi-rev-q {
  font-size: var(--fs-t4);
  line-height: var(--lh-snug);
  margin: 6px 0 var(--sp-3);
}
.mi-rev-label {
  display: block;
  font-size: var(--fs-micro);
  color: var(--ink-3);
  letter-spacing: .04em;
  margin-bottom: 4px;
}
.mi-rev-mine,
.mi-rev-point {
  font-size: var(--fs-ui);
  line-height: var(--lh-relaxed);
  padding: 10px 12px;
  border-radius: var(--r-sm);
}
.mi-rev-mine { background: var(--bg-tint); color: var(--ink); }
/* 🔴 不要叫 .empty —— base.css 里 .empty 是全局空状态样式（text-align:center +
   44px 内距），复用会让「未作答」整块居中（2026-11-03 截图发现）。 */
.mi-rev-mine.is-empty { color: var(--ink-3); }
/* 🔴 pre-wrap 只给正文这一层：写在容器上会把模板里的换行与缩进一起渲染出来，
   结果「我的回答」正文被顶到下一行、还缩进半个块（2026-11-03 截图发现）。 */
.mi-rev-text { white-space: pre-wrap; }
.mi-rev-point { background: var(--brand-soft); color: var(--ink-2); margin-top: var(--sp-2); }

.iv-tips { display: flex; flex-direction: column; gap: var(--sp-2); }

@media (max-width: 860px) {
  .mi-levels, .mi-dirs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mi-card { padding: var(--sp-4); }
  .mi-q { font-size: var(--fs-t3); }
  .mi-actions .btn { flex: 1; }
}

/* 模拟面试入口卡（面试攻略页顶部）
   —— 与小程序面试页顶部那张「智能模拟面试」入口卡同一个位置与作用：
      默认页面是「看题」，这张卡把人带进「练题」模式（同一页面内切换，不跳新页）。 */
.mi-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  margin: var(--sp-4) 0 var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: var(--brand-soft);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.mi-entry:hover { border-color: var(--brand); transform: translateY(-1px); }
.mi-entry-left { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.mi-entry-ico {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: grid;
  place-items: center;
  /* 用汉字做图标，和首页功能卡的图标语言一致（项目不用图标字体 / 不用 CDN） */
  font-size: 15px;
  font-weight: 600;
  flex-shrink: 0;
}
.mi-entry-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mi-entry-info b { font-size: var(--fs-ui); font-weight: 600; color: var(--brand-ink); }
.mi-entry-info i { font-style: normal; font-size: var(--fs-caption); color: var(--ink-2); }
.mi-entry-arrow { color: var(--brand); font-size: var(--fs-t4); flex-shrink: 0; }

.mi-back {
  background: none;
  border: none;
  padding: 6px 0;
  margin: var(--sp-2) 0 var(--sp-3);
  color: var(--brand);
  font-size: var(--fs-ui);
  cursor: pointer;
}
.mi-back:hover { color: var(--brand-ink); }

/* ---- 模拟面试：提示 / 参考思路 ---- */
.mi-hint-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin: 0 0 var(--sp-3); }
.mi-hint-btn {
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--brand);
  font: inherit;
  font-size: var(--fs-caption);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.mi-hint-btn:hover { border-color: var(--brand); background: var(--brand-soft); }
.mi-hint-btn:disabled { opacity: .45; cursor: not-allowed; }
.mi-hint-box {
  margin: 0 0 var(--sp-4);
  padding: 12px 14px;
  background: var(--brand-soft);
  border-radius: var(--r-sm);
}
.mi-hint-list { margin: 0; padding-left: 18px; }
.mi-hint-list li { font-size: var(--fs-ui); line-height: var(--lh-relaxed); color: var(--ink-2); }
.mi-hint-text { font-size: var(--fs-ui); line-height: var(--lh-relaxed); color: var(--ink-2); }

/* ---- 完成页：表达分与四项分解 ---- */
.mi-score { display: flex; align-items: baseline; gap: 8px; margin-top: var(--sp-3); }
.mi-score b { font-size: 34px; font-weight: 700; color: var(--brand); line-height: 1; }
.mi-score span { font-size: var(--fs-ui); color: var(--ink-2); }
.mi-bars { display: flex; flex-direction: column; gap: 6px; margin-top: var(--sp-3); }
.mi-bar-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 56px; align-items: center; gap: 10px; }
.mi-bar-label { font-size: var(--fs-caption); color: var(--ink-2); }
.mi-bar-track { height: 6px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .7); overflow: hidden; }
.mi-bar-track i { display: block; height: 100%; background: var(--brand); border-radius: var(--r-pill); }
.mi-bar-num { font-size: var(--fs-micro); color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; }

.mi-rev-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mi-rev-score {
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--brand);
  background: var(--brand-soft);
  border-radius: var(--r-pill);
  padding: 2px 10px;
  white-space: nowrap;
}
.mi-rev-score.muted { color: var(--ink-3); background: var(--line-2); }
.mi-rev-advice {
  margin-top: var(--sp-2);
  font-size: var(--fs-caption);
  color: var(--brand-ink);
  background: var(--bg-tint);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  line-height: var(--lh-snug);
}
.mi-rev-det { margin-top: var(--sp-2); }
.mi-rev-det summary {
  font-size: var(--fs-caption);
  color: var(--brand);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.mi-rev-det summary::-webkit-details-marker { display: none; }
.mi-rev-det summary::before { content: '＋ '; }
.mi-rev-det[open] summary::before { content: '－ '; }
.mi-rev-det .mi-hint-list,
.mi-rev-det .mi-hint-text { margin-top: 8px; }

/* ---------- 精修页：改写示例 / 交付物 / 常见顾虑 ---------- */
.rw-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.rw-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.rw-role {
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--ink-3);
}
.rw-row {
  padding: 12px 14px;
  border-radius: 10px;
}
.rw-row b {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .04em;
}
.rw-row p {
  font-size: var(--fs-ui);
  line-height: var(--lh-relaxed);
  color: var(--ink);
}
.rw-before { background: var(--bg-tint); }
.rw-before b { color: var(--ink-3); }
.rw-before p { color: var(--ink-2); }
.rw-after { background: var(--mint-soft); }
.rw-after b { color: var(--ok-ink); }
.rw-why {
  font-size: var(--fs-caption);
  line-height: var(--lh-relaxed);
  color: var(--ink-2);
}
.rw-why b { margin-right: 6px; color: var(--brand); }
.rw-note {
  margin-top: 10px;
  font-size: var(--fs-micro);
  color: var(--ink-3);
}

.svc-deliver {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.svc-deliver-item {
  min-width: 0;
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.svc-deliver-item b { font-size: var(--fs-ui); color: var(--ink); }
.svc-deliver-item p {
  margin-top: 6px;
  font-size: var(--fs-caption);
  line-height: var(--lh-relaxed);
  color: var(--ink-2);
}

.svc-faq { display: grid; gap: 10px; }
.svc-faq details {
  padding: 12px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.svc-faq summary {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  font-size: var(--fs-ui);
  font-weight: 600;
  color: var(--ink);
  list-style: none;
}
.svc-faq summary::-webkit-details-marker { display: none; }
.svc-faq summary::after { content: '+'; color: var(--ink-3); font-weight: 400; }
.svc-faq details[open] summary::after { content: '−'; }
.svc-faq p {
  margin-top: 8px;
  font-size: var(--fs-caption);
  line-height: var(--lh-relaxed);
  color: var(--ink-2);
}

@media (max-width: 900px) {
  .rw-grid { grid-template-columns: minmax(0, 1fr); }
  .svc-deliver { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   价格页（/pricing）与付费桥（扫码 / 留资）
   ==========================================================================
   2026-11-04 第 3 批转化改造：网页不能收款，付费出口只有两条 ——
   扫小程序码、留手机号让顾问回电。这一组样式同时服务价格页与服务页。
   ========================================================================== */

/* 档位卡片里的「适合谁」：比 features 更早读到，所以放在价格下面、清单上面 */
.pr-fit {
  margin: -4px 0 var(--sp-4);
  padding: var(--sp-3);
  background: var(--bg-tint);
  border-radius: var(--r-sm);
  font-size: var(--fs-caption);
  line-height: var(--lh-relaxed);
  color: var(--ink-2);
}

.pr-plan-acts {
  display: grid;
  gap: 8px;
  margin-top: auto;
  padding-top: var(--sp-4);
}
.pr-plan-acts .btn { width: 100%; }

/* 对比表：手机上横向滚动，不压缩内容 —— 压到 4 列只剩几个字等于没写 */
.pr-table-wrap {
  margin-top: var(--sp-4);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
}
.pr-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: var(--fs-caption);
}
.pr-table th,
.pr-table td {
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line-2);
}
.pr-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg-tint);
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
}
.pr-table tbody th {
  font-weight: 400;
  color: var(--ink);
}
.pr-table tbody tr:last-child th,
.pr-table tbody tr:last-child td { border-bottom: 0; }
.pr-table td { color: var(--ink-2); white-space: nowrap; }
/* ● 用绿色（含）/ — 用灰（不含）：绿色在这里表达「包含」，与行情涨跌无关 */
.pr-table td.y { color: var(--ok-ink); font-weight: 600; }
.pr-table td.n { color: var(--ink-4); }

.pr-table-note {
  margin-top: var(--sp-2);
  font-size: var(--fs-micro);
  line-height: 1.7;
  color: var(--ink-3);
}

.pr-pay {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.pr-pay-item {
  padding: var(--sp-4);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.pr-pay-item b { font-size: var(--fs-ui); color: var(--ink); }
.pr-pay-item p {
  margin-top: 6px;
  font-size: var(--fs-caption);
  line-height: var(--lh-relaxed);
  color: var(--ink-2);
}

/* 付费桥：左扫码、右留资。两块等高，不让人以为留资是「次要的备选」 */
.nx-buy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.nx-buy-col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.nx-buy-col-alt { background: var(--brand-soft); border-color: transparent; }
.nx-buy-t { font-size: var(--fs-ui); color: var(--ink); }
.nx-buy-p {
  font-size: var(--fs-caption);
  line-height: var(--lh-relaxed);
  color: var(--ink-2);
}
.nx-buy-qr {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: auto;
  padding: var(--sp-2) 0;
}
.nx-buy-qr .ld-qr-img {
  width: 132px;
  height: 132px;
  border-radius: var(--r-sm);
  background: #fff;
}
.nx-buy-qr span { font-size: var(--fs-micro); color: var(--ink-2); }
/* 码取不到时：不留破图，直接说清楚并把人推向留资 */
.nx-buy-qr.is-fail { min-height: 96px; }
.nx-buy-qr.is-fail::after {
  content: '小程序码暂时取不到，请用右侧留手机号，或发邮件到 support@zhuojianresume.com';
  font-size: var(--fs-caption);
  line-height: 1.7;
  color: var(--ink-2);
}
.nx-buy-col-alt .btn { width: 100%; }
.nx-buy-note { font-size: var(--fs-micro); color: var(--ink-3); }

@media (max-width: 900px) {
  .pr-pay { grid-template-columns: minmax(0, 1fr); }
  .nx-buy { grid-template-columns: minmax(0, 1fr); }
  .nx-buy-qr .ld-qr-img { width: 116px; height: 116px; }
}