/* =========================================================================
   CNGateway — /toolkit/  免费工具箱枢纽页
   复用站点 token（--navy / --crimson / --gold / --bg-alt），不引入新配色。
   视觉重点：把「四个先后问题」画成一条可扫视的路径，而不是四张并排卡片。
   ========================================================================= */

/* ---------- Hero 统计条 ---------- */
.tk-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  margin: 2.5rem 0 0;
}
.tk-stat { background: #fff; padding: 1.15rem 1rem; text-align: center; }
.tk-stat .n {
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.1;
}
.tk-stat .l {
  display: block;
  margin-top: .3rem;
  font-size: .76rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-light);
}

/* ---------- 步骤路径 ---------- */
.tk-section { padding: 4.5rem 0; }
.tk-section-alt { background: var(--bg-alt); }
.tk-section-head { max-width: 760px; margin: 0 auto 3rem; text-align: center; }
.tk-section-head h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  color: var(--navy);
  margin: 0 0 .75rem;
}
.tk-section-head p { color: var(--text-muted); font-size: 1.02rem; line-height: 1.75; margin: 0; }

/* 竖向时间轴：左侧一条线，节点是编号圆点 */
.tk-flow { position: relative; max-width: 940px; margin: 0 auto; }
.tk-flow::before {
  content: '';
  position: absolute;
  left: 27px;
  top: 34px;
  bottom: 34px;
  width: 2px;
  background: linear-gradient(180deg, var(--navy) 0%, var(--gold) 55%, var(--crimson) 100%);
  opacity: .28;
}
.tk-step {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 1.5rem;
  margin-bottom: 1.75rem;
}
.tk-step:last-child { margin-bottom: 0; }

.tk-step-dot {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  transition: border-color .25s ease, transform .25s ease;
}
.tk-step-dot svg { width: 24px; height: 24px; }
.tk-step:hover .tk-step-dot { border-color: var(--gold); transform: scale(1.06); }

.tk-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.7rem 1.8rem;
  transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
.tk-card:hover {
  border-color: #cfd9e6;
  box-shadow: 0 14px 34px rgba(10, 37, 64, .09);
  transform: translateY(-2px);
}
.tk-card-top {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  flex-wrap: wrap;
  margin-bottom: .55rem;
}
.tk-badge {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--crimson);
  background: rgba(200, 16, 46, .07);
  border-radius: 999px;
  padding: .26rem .66rem;
  white-space: nowrap;
}
.tk-q {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 1.12rem;
  color: var(--text-muted);
}
.tk-card h3 {
  font-size: 1.26rem;
  color: var(--navy);
  margin: 0 0 .6rem;
  font-weight: 700;
}
.tk-card p { color: var(--text-muted); line-height: 1.75; margin: 0 0 1.1rem; font-size: .96rem; }

.tk-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.tk-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: var(--navy);
  color: #fff;
  border-radius: 10px;
  padding: .62rem 1.1rem;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .22s ease, transform .22s ease;
}
.tk-btn:hover { background: var(--navy-dark); transform: translateX(2px); }
.tk-btn svg { width: 15px; height: 15px; }
.tk-btn-ghost {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--border);
}
.tk-btn-ghost:hover { background: var(--bg-alt); border-color: #cfd9e6; }

/* 卡片内的小数据点 */
.tk-facts { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1.05rem; padding: 0; list-style: none; }
.tk-facts li {
  font-size: .78rem;
  color: var(--text-light);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: .26rem .6rem;
}

/* ---------- 行前清单（G1–G4 手风琴） ---------- */
.tk-check { max-width: 860px; margin: 0 auto; }
.tk-acc {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 13px;
  margin-bottom: .7rem;
  overflow: hidden;
}
.tk-acc summary {
  list-style: none;
  cursor: pointer;
  padding: 1.05rem 1.3rem;
  display: flex;
  align-items: center;
  gap: .85rem;
  font-weight: 600;
  color: var(--navy);
  transition: background .2s ease;
}
.tk-acc summary::-webkit-details-marker { display: none; }
.tk-acc summary:hover { background: var(--bg-alt); }
/* 行前清单：编号圆点 + 标题/副标题 */
.ck-num {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(201, 169, 97, .16); color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700; font-size: .95rem;
}
.tk-acc summary .tk-acc-t { flex: 1; min-width: 0; }
.tk-acc summary .tk-acc-t b {
  display: block; font-size: 1.03rem; font-weight: 600; letter-spacing: -.01em;
}
.tk-acc summary .tk-acc-t em {
  display: block; font-style: normal; font-weight: 400;
  font-size: .8rem; color: var(--text-light); margin-top: .1rem;
}
.ck-count {
  flex: none; font-size: .75rem; color: var(--text-light);
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: 999px; padding: .2rem .6rem; font-variant-numeric: tabular-nums;
}

/* 清单条目 */
.ck-lead {
  margin: 0 0 1rem; padding-left: .7rem; border-left: 3px solid var(--gold);
  color: var(--text-muted); font-size: .93rem; line-height: 1.7;
}
.ck-item {
  display: flex; gap: .7rem; padding: .7rem 0;
  border-top: 1px dashed var(--border); cursor: pointer;
}
.ck-item input {
  flex: none; width: 17px; height: 17px; margin-top: .28rem;
  accent-color: var(--navy); cursor: pointer;
}
.ck-body { flex: 1; min-width: 0; }
/* 勾选后：标题与解释一起划掉 */
.ck-done .ck-strike { text-decoration: line-through; color: var(--text-light); }
.ck-done .ck-apps, .ck-done .ck-facts { opacity: .45; }
.ck-t { display: block; font-weight: 600; color: var(--navy); font-size: .95rem; }
.ck-why {
  display: block; font-size: .87rem; color: var(--text-muted);
  margin-top: .22rem; line-height: 1.65;
}
.ck-how {
  display: block; font-size: .82rem; color: var(--text-muted); margin-top: .35rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: 7px;
  padding: .38rem .6rem; word-break: break-word; line-height: 1.6;
}
.ck-facts {
  margin: .45rem 0 0; font-size: .78rem; color: var(--text-light); line-height: 1.7;
}

/* App / 官方来源 chips */
.ck-apps { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .5rem; }
.ck-app {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .3rem .65rem .3rem .35rem; border: 1px solid var(--border);
  border-radius: 999px; background: #fff; font-size: .82rem; font-weight: 500;
  color: var(--navy); text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.ck-app:hover { border-color: #cfd9e6; box-shadow: 0 2px 8px rgba(10, 37, 64, .08); }
.ck-app img { width: 19px; height: 19px; display: block; border-radius: 5px; }
.ck-tag {
  flex: none; font-size: .6rem; font-weight: 700; letter-spacing: .06em;
  background: rgba(10, 37, 64, .08); color: var(--navy);
  border-radius: 4px; padding: .13rem .32rem;
}

/* 进度条 */
.ck-prog {
  max-width: 860px; margin: 1.4rem auto 0; display: flex;
  align-items: center; gap: .8rem; font-size: .85rem; color: var(--text-muted);
}
.ck-prog-bar { flex: 1; height: 6px; background: var(--border); border-radius: 999px; overflow: hidden; }
.ck-prog-bar i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .25s ease; }
.ck-reset {
  background: transparent; border: 1px solid var(--border); border-radius: 8px;
  padding: .28rem .6rem; font-size: .78rem; color: var(--text-light);
  cursor: pointer; font-family: inherit;
}
.ck-reset:hover { border-color: #cfd9e6; color: var(--text-muted); }
.ck-export {
  flex: none;
  display: inline-flex; align-items: center; gap: .35rem;
  background: transparent; border: 1px solid var(--navy); border-radius: 8px;
  padding: .28rem .6rem; font-size: .78rem; color: var(--navy);
  cursor: pointer; font-family: inherit; line-height: 1.2;
}
.ck-export svg { width: 13px; height: 13px; flex: none; }
.ck-export:hover { background: rgba(10, 37, 64, .06); }
/* 标题下的导出提示：低调但可见，点击滚到下载区 */
.ck-hint-line { max-width: 860px; margin: .9rem auto 0; text-align: center; font-size: .85rem; }
.ck-hint {
  color: var(--navy); text-decoration: none; cursor: pointer;
  border-bottom: 1px dashed var(--gold); padding-bottom: 1px;
}
.ck-hint:hover { color: var(--crimson); border-bottom-color: var(--crimson); }
.tk-acc summary .tk-chev {
  flex: none;
  width: 16px; height: 16px;
  color: var(--text-light);
  transition: transform .22s ease;
}
.tk-acc[open] summary .tk-chev { transform: rotate(90deg); }
.tk-acc-body {
  padding: 0 1.3rem 1.25rem 3.05rem;
  color: var(--text-muted);
  line-height: 1.8;
  font-size: .95rem;
}
.tk-check-note {
  margin: 1.5rem auto 0;
  max-width: 860px;
  padding: 1rem 1.2rem;
  background: rgba(201, 169, 97, .09);
  border-left: 3px solid var(--gold);
  border-radius: 0 9px 9px 0;
  color: var(--text-muted);
  font-size: .9rem;
  line-height: 1.7;
}

/* ---------- CTA ---------- */
.tk-cta { background: var(--navy); color: #fff; padding: 4.2rem 0; }
.tk-cta-inner { max-width: 660px; margin: 0 auto; text-align: center; }
.tk-cta h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.6rem, 3.2vw, 2.1rem);
  margin: 0 0 .9rem;
  color: #fff;
}
.tk-cta p { color: rgba(255, 255, 255, .82); line-height: 1.8; margin: 0 0 1.7rem; }
.tk-cta-btn {
  display: inline-block;
  background: var(--crimson);
  color: #fff;
  padding: .85rem 2rem;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
  transition: background .22s ease, transform .22s ease;
}
.tk-cta-btn:hover { background: var(--crimson-soft); transform: translateY(-2px); }
.tk-cta-small { margin: 1rem 0 0; font-size: .85rem; color: rgba(255, 255, 255, .6); }

/* ---------- 导航下拉（工具箱） ---------- */
.nav-drop { position: relative; }
.nav-drop { display: inline-flex; align-items: center; gap: .15rem; }
.nav-drop > a { display: inline-flex; align-items: center; gap: .3rem; }
/* 展开按钮：与链接分开，链接始终可跳转进 /toolkit/ */
.nav-drop-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-light);
  cursor: pointer;
}
/* svg 无 width/height 属性时默认 300x150，必须显式给尺寸，
   否则按钮里只有一个空白方块（用户 14:26 截图红框处） */
.nav-drop-toggle .nav-caret { width: 13px; height: 13px; }
.nav-drop > a .nav-caret { width: 12px; height: 12px; transition: transform .2s ease; }
.nav-drop:hover > a .nav-caret, .nav-drop.open > a .nav-caret { transform: rotate(180deg); }

.nav-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 306px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(10, 37, 64, .14);
  padding: .5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 200;
}
.nav-drop:hover .nav-menu,
.nav-drop:focus-within .nav-menu,
.nav-drop.open .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
/* 悬停时鼠标从触发器移到菜单不断开 */
.nav-menu::before {
  content: '';
  position: absolute;
  top: -16px; left: 0; right: 0;
  height: 16px;
}

/* ── 2026-10-01 首页角色切换条（hero 正下方、所有模块之上）────────
   三个角色的重交互 tab：图标 + 标题 + 说明，选中整块填充 navy。
   与顶栏下拉、hero 路由共用 localStorage('cn.aud')。 */
.role-bar { background: #fff; border-bottom: 1px solid var(--border); padding: 1.4rem 0 1.6rem; }
.role-tabs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem;
  max-width: 860px; margin: 0 auto;
}
.role-tabs button {
  display: flex; align-items: center; gap: .8rem;
  font: inherit; text-align: left;
  color: var(--text-muted);
  background: #fff;
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: .95rem 1.1rem;
  cursor: pointer;
  transition: all .18s ease;
}
.role-tabs button:hover { border-color: var(--navy); color: var(--navy); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(10,37,64,.10); }
.role-tabs button .rt-i { flex: none; display: inline-flex; }
.role-tabs button .rt-i svg { width: 26px; height: 26px; }
.role-tabs button .rt-tx { display: flex; flex-direction: column; line-height: 1.3; }
.role-tabs button .rt-t { font-size: 1.02rem; font-weight: 800; }
.role-tabs button .rt-s { font-size: .78rem; color: var(--text-light); }
.role-tabs button.on {
  background: var(--navy); border-color: var(--navy); color: #fff;
  box-shadow: 0 10px 26px rgba(10,37,64,.22);
}
.role-tabs button.on .rt-s { color: #B9C9DC; }
@media (max-width: 760px) {
  .role-tabs { grid-template-columns: 1fr; max-width: 420px; }
  .role-tabs button { padding: .75rem .9rem; }
}

/* ── 2026-10-01 travel-checklist：城市 chips + 中国简图 ───────────── */
.cw-chips { display: flex; flex-wrap: wrap; gap: .55rem; margin: 4px 0 26px; }
.cw-chip {
  display: inline-flex; align-items: baseline; gap: .45rem;
  border: 1px solid var(--border); border-radius: 999px;
  padding: .42rem .95rem; text-decoration: none; color: var(--navy);
  background: #fff; transition: all .15s ease;
}
.cw-chip b { font-size: .84rem; }
.cw-chip span { font-size: .74rem; color: var(--text-light); }
.cw-chip:hover { border-color: var(--navy); transform: translateY(-1px); }
.cw-chip.cw-soon {
  border-style: dashed; color: var(--text-light); background: transparent; cursor: default;
}
.cn-map-wrap { margin-top: 8px; text-align: center; }
.cn-map { width: 100%; max-width: 760px; height: auto; }
/* 2026-10-01：地图改用 industry-map 的正式边界数据（im-china-geo.js，
   DataV.GeoAtlas + Mercator，与 /industry-map/ 同源同投影） */
.cn-prov { fill: #f0f3f7; stroke: #fff; stroke-width: 1; stroke-linejoin: round; }
.cn-jd   { fill: none; stroke: #C4D3E4; stroke-width: 1.2; stroke-dasharray: 4 3; }
.cn-outline {
  fill: #EFF4FA; stroke: #C4D3E4; stroke-width: 1.6; stroke-linejoin: round;
}
.cn-island { fill: #EFF4FA; stroke: #C4D3E4; stroke-width: 1.4; }
.cn-city .cn-dot {
  fill: var(--crimson); stroke: #fff; stroke-width: 2;
}
.cn-city .cn-lb {
  font-size: 13px; font-weight: 600; fill: var(--navy);
  paint-order: stroke; stroke: #fff; stroke-width: 3px;
}
.cn-city:hover .cn-dot { r: 7; }
.cn-city { cursor: pointer; }
.cn-coming .cn-dot-soon { fill: #fff; stroke: #8CA0B5; stroke-width: 1.6; stroke-dasharray: 3 3; }
.cn-coming .cn-lb-soon { font-size: 12px; fill: var(--text-light); font-style: italic; }
.cn-map-note { font-size: .8rem; color: var(--text-light); margin-top: 10px; }
/* 缩放交互：抓取光标 + 右下角控制按钮 */
#cnMap svg { cursor: grab; touch-action: none; display: block; margin: 0 auto; }
#cnMap svg.cn-dragging { cursor: grabbing; }
#cnMap svg.cn-zoomed { cursor: move; }
.cn-map-ctrl {
  display: inline-flex; gap: 6px; margin-top: 12px;
}
.cn-map-ctrl button {
  font: inherit; font-size: .95rem; font-weight: 700; line-height: 1;
  width: 34px; height: 34px;
  border: 1px solid var(--border); border-radius: 8px;
  background: #fff; color: var(--navy); cursor: pointer;
  transition: all .15s ease;
}
.cn-map-ctrl button:hover { border-color: var(--navy); background: var(--navy); color: #fff; }
.cn-map-ctrl button:last-child { width: auto; padding: 0 12px; font-size: .78rem; font-weight: 600; }

/* ── 2026-10-01 角色筛选大菜单（nav-mega，二版）─────────────────────
   Toolkit 单项已拆成 Tools / Resources 两个下拉；每个菜单：
   角色分段控件（大块、图标+标题+说明）在最前 → 条目单列 → 底部计数。
   显隐全部交给 [data-aud] 属性：a[data-aud~="buy"] 命中 buy 角色。 */
.nav-mega { width: 460px; max-width: 92vw; }
.nm-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: .4rem;
  padding: .2rem 0 .65rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: .45rem;
}
/* 二版：tab 更重 —— 图标 + 两行文案，选中整块填充品牌色 */
.nm-tab {
  display: flex; align-items: center; gap: .55rem;
  font: inherit; text-align: left;
  color: var(--text-muted);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .55rem .7rem;
  cursor: pointer;
  transition: all .16s ease;
}
.nm-tab:hover { border-color: var(--navy); color: var(--navy); transform: translateY(-1px); }
.nm-tab .nm-tab-i { flex: none; display: inline-flex; }
.nm-tab .nm-tab-i svg { width: 20px; height: 20px; }
.nm-tab .nm-tab-tx { display: flex; flex-direction: column; line-height: 1.25; }
.nm-tab .nm-tab-t { font-size: .82rem; font-weight: 700; }
.nm-tab .nm-tab-s { font-size: .68rem; color: var(--text-light); }
.nm-tab.on {
  background: var(--navy); border-color: var(--navy); color: #fff;
}
.nm-tab.on .nm-tab-s { color: #B9C9DC; }
.nm-list { display: flex; flex-direction: column; }
/* 角色徽标（B/S/O）与底部计数行已按 2026-10-01 二次反馈移除；
   筛选由条目显隐 + 角色分段控件的选中态表达。 */
/* 角色筛选：不属于当前角色的条目收起（空 data-aud = 对所有人可见） */
.nav-mega[data-aud="buy"]    a[data-aud]:not([data-aud~="buy"]):not([data-aud=""]),
.nav-mega[data-aud="sell"]   a[data-aud]:not([data-aud~="sell"]):not([data-aud=""]),
.nav-mega[data-aud="operate"] a[data-aud]:not([data-aud~="operate"]):not([data-aud=""]) { display: none; }

.nav-menu a {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .62rem .7rem;
  border-radius: 9px;
  text-decoration: none;
  transition: background .18s ease;
}
.nav-menu a:hover { background: var(--bg-alt); }
.nav-menu .nm-ico {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--bg-alt);
  display: flex; align-items: center; justify-content: center;
  color: var(--navy);
}
.nav-menu .nm-ico svg { width: 15px; height: 15px; }
.nav-menu .nm-txt { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.nav-menu .nm-t { font-size: .88rem; font-weight: 600; color: var(--navy); line-height: 1.3; }
.nav-menu .nm-s { font-size: .76rem; color: var(--text-light); line-height: 1.35; }
/* 角标：短语式（"for step 3"），不是裸数字——裸数字看不出含义。
   宽度不固定，所以不用等宽圆形，改用胶囊标签并允许换行到第二行。 */
.nav-menu .nm-step {
  flex: none;
  align-self: flex-start;
  font-size: .63rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--text-light);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .12rem .45rem;
  margin-top: .15rem;
  white-space: nowrap;
  text-transform: lowercase;
}
.nav-menu a:hover .nm-step {
  color: var(--crimson);
  border-color: rgba(200, 16, 46, .28);
  background: rgba(200, 16, 46, .06);
}
.nav-menu-foot {
  margin-top: .3rem;
  padding: .6rem .7rem .35rem;
  border-top: 1px solid var(--border);
}
.nav-menu-foot a {
  padding: .3rem 0;
  font-size: .82rem;
  font-weight: 600;
  color: var(--crimson);
}
.nav-menu-foot a:hover { background: transparent; text-decoration: underline; }

/* RTL */
[dir="rtl"] .tk-flow::before { left: auto; right: 27px; }
[dir="rtl"] .tk-step { grid-template-columns: 56px 1fr; }
[dir="rtl"] .tk-acc-body { padding: 0 3.05rem 1.25rem 1.3rem; }
[dir="rtl"] .tk-check-note { border-left: none; border-right: 3px solid var(--gold); border-radius: 9px 0 0 9px; }
[dir="rtl"] .tk-btn:hover { transform: translateX(-2px); }
[dir="rtl"] .tk-acc[open] summary .tk-chev { transform: rotate(-90deg); }

/* 移动端 */
@media (max-width: 860px) {
  .tk-section { padding: 3.2rem 0; }
  .tk-flow::before { left: 19px; }
  .tk-step { grid-template-columns: 40px 1fr; gap: 1rem; }
  .tk-step-dot { width: 40px; height: 40px; }
  .tk-step-dot svg { width: 18px; height: 18px; }
  .tk-card { padding: 1.3rem 1.25rem; }
  .tk-acc-body { padding-left: 1.3rem; }
  [dir="rtl"] .tk-flow::before { right: 19px; }
  [dir="rtl"] .tk-acc-body { padding-right: 1.3rem; }

  /* 移动端下拉展开为内联列表 */
  .nav-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    border: none;
    border-left: 2px solid var(--border);
    border-radius: 0;
    min-width: 0;
    margin: .3rem 0 .3rem .6rem;
    padding: 0 0 0 .5rem;
    display: none;
  }
  /* transform 必须在这里再压一次：桌面展开规则
     `.nav-drop.open .nav-menu { transform: translateX(-50%) }` 有三个类，
     优先级高于单类的 transform:none —— 不写这行，菜单展开时会被平移
     自身宽度的一半，标题图标全部滑出屏幕左侧，只剩角标可见。 */
  .nav-drop.open .nav-menu { display: block; transform: none; }
  .nav-menu .nm-s { display: none; }
  .nav-menu .nm-ico { width: 26px; height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .tk-card, .tk-btn, .tk-step-dot, .nav-menu, .tk-cta-btn { transition: none; }
  .tk-card:hover, .tk-btn:hover, .tk-cta-btn:hover, .tk-step:hover .tk-step-dot { transform: none; }
}

/* =========================================================================
   四步山脊图（2026-09-16 第二版）
   -------------------------------------------------------------------------
   第一版是四个纯色三角形，没有体积。这一版按"雪山"的真实明暗关系分层：

     .tkr-far    远景碎块   最浅，只提供纵深，不参与状态
     .tkr-rock   岩面主体   中性灰蓝，状态载体（当前=品牌红，已过=深蓝灰）
     .tkr-crease 裂隙       比岩面深一档，制造转折 —— 体积感主要来自这一层
     .tkr-snow   前景雪坡   最浅且不透明，压住岩体底部

   配色沿用站点色板：未到达是冷灰蓝（安静），当前是品牌红（唯一焦点），
   已走过是深蓝灰（完成但不抢眼）。三档之间的明度差刻意拉开，缩略图尺寸下
   也能一眼看出高亮在哪一座。

   过渡只做颜色，不做位移——这是状态切换，不是表演。
   ========================================================================= */

.tk-ridge {
  position: relative;
  max-width: 960px;
  margin: 0 auto 2.25rem;
  -webkit-user-select: none;
  user-select: none;
}
.tk-ridge svg { display: block; width: 100%; height: auto; }

/* ① 远景/底衬（描摹版）：全局中性浅灰，永不参与分步高亮。
   底衬取自原图天际线到地面线的整片剪影，垫在各组色块最底层，
   集群内部的空隙显示为浅灰（原图如此），不再露出白色斑点。 */
.tkr-far { --c: #dde5ef; }

/* ② 岩面（默认：未到达） */
.tkr-rock { --c: #ccd6e2; }
/* ③ 裂隙：始终比岩面深一档，体积感来源 */
.tkr-crease { --c: #b3c0d0; }

/* 已走过：深蓝灰 */
.tkr-step.is-done .tkr-rock   { --c: #74889f; }
.tkr-step.is-done .tkr-crease { --c: #5d7288; }

/* 当前：品牌红 */
.tkr-step.is-on .tkr-rock   { --c: var(--crimson); }
.tkr-step.is-on .tkr-crease { --c: #9c0c24; }

/* ④ 前景雪坡：不透明，盖住岩体山脚 */
.tkr-snow { fill: #f1f6fb; }

/* 受光面：比岩面浅一档，随所在步骤一起高亮（浅一档的红） */
.tkr-lit { --c: #d5dfe9; }
.tkr-step.is-done .tkr-lit { --c: #93a5b9; }
.tkr-step.is-on  .tkr-lit { --c: #dd3346; }
.tkr-step:hover .tkr-lit { --c: #d3dde9; }
.tkr-step.is-on:hover  .tkr-lit { --c: #dd3346; }
.tkr-step.is-done:hover .tkr-lit { --c: #8899ad; }
/* 雪原带：底部浅色横带，不参与分步高亮 */
.tkr-ground { fill: #f1f6fb; }

/* 通用着色：fill 与 stroke 恒为同色（stroke 外扩 ~1.5px，
   闭合相邻色块之间抗锯齿留下的发丝缝），圆角连接避免尖刺 */
.tkr-far, .tkr-rock, .tkr-crease, .tkr-lit {
  fill: var(--c);
  stroke: var(--c);
  stroke-width: 3;
  stroke-linejoin: round;
  transition: fill .45s cubic-bezier(.4, 0, .2, 1), stroke .45s cubic-bezier(.4, 0, .2, 1);
}

/* 峰顶上方的序号与缩写（不压在岩体上） */
.tkr-idx {
  font-family: 'Inter', sans-serif;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .08em;
  fill: #aab6c5;
  transition: fill .45s ease;
}
.tkr-cap {
  font-family: 'Inter', sans-serif;
  font-size: 36px;
  font-weight: 600;
  fill: #7d8ca0;
  transition: fill .45s ease;
}
.tkr-step.is-done .tkr-idx { fill: #8698ae; }
.tkr-step.is-done .tkr-cap { fill: #6d7f96; }
.tkr-step.is-on .tkr-idx { fill: var(--crimson); }
.tkr-step.is-on .tkr-cap { fill: var(--navy); }

/* 交互 */
.tkr-step { cursor: pointer; }
.tkr-hit { fill: transparent; }
.tkr-step:hover .tkr-rock { fill: #bcc8d7; }
.tkr-step.is-on:hover .tkr-rock { fill: var(--crimson); }
.tkr-step.is-done:hover .tkr-rock { fill: #6a7e95; }
/* 鼠标点击聚焦不画 outline（黑框），键盘焦点由 :focus-visible 单独给反馈 */
.tkr-step:focus { outline: none; }
.tkr-step:focus-visible { outline: none; }
.tkr-step:focus-visible .tkr-crease { fill: var(--navy); }

/* 首页精简版：窄一些、矮一些，不跟 hero 抢注意力 */
.tk-ridge-compact { max-width: 820px; margin-bottom: 1.25rem; }

@media (max-width: 720px) {
  .tk-ridge { margin-bottom: 1.25rem; }
  /* 窄屏时图整体缩小，文字要相对放大才看得清 */
  .tkr-idx { font-size: 40px; }
  .tkr-cap { font-size: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .tkr-rock, .tkr-crease, .tkr-idx, .tkr-cap { transition: none; }
}

/* =========================================================================
   移动端导航下拉（2026-09-16 修复）
   -------------------------------------------------------------------------
   问题：桌面下拉用 left:50% + translateX(-50%) + min-width:306px 居中于
   触发器。但在移动端汉堡菜单里，菜单项是靠左竖排的，306px 的浮层以
   "Toolkit" 这个窄触发器为中心展开，左半边直接溢出屏幕被裁掉——用户看到
   的就是 "de Shows"、"ustry Map"、"r steps →" 这种被切断的文字。

   修法：移动端不要浮层。把二级菜单变成静态流式的缩进子列表，跟着一级菜单
   竖排往下走。宽度 100%，去掉阴影和圆角，左侧加一条竖线表达层级。
   展开/收起仍由 nav-toolkit.js 的 .open 控制（≤860px 走点击而非悬停）。

   注意用 display 切换而不是只改 opacity：桌面规则里的 :hover / :focus-within
   只改 opacity/visibility/transform，触屏上的伪 hover 因此不会误展开。
   ========================================================================= */
@media (max-width: 860px) {
  /* 桌面的 .nav-drop 是 inline-flex（标题与菜单并排）。
     移动端必须改成块级：否则菜单作为 flex item 被挤到标题右侧、
     宽度只剩 ~168px —— 角色卡片被压成窄条、文字看起来"溢出方块"
     （2026-10-02 移动端反馈的根因）。
     position 保持 relative，供插入符绝对定位。 */
  .nav-drop { display: block; position: relative; width: 100%; }
  /* 大菜单在移动端全宽 */
  .nav-mega { width: 100%; max-width: none; }
  /* 角色 tab（2026-10-02 移动端修复）：
     两列网格曾被长文案撑破 —— grid 列宽默认 min-content，卡片里的
     "Buy from China / Source & verify suppliers" 把卡片顶出屏幕。
     现在：列用 minmax(0,1fr) 允许收缩 + 卡片 min-width:0 + 文案可断行；
     窄屏隐藏说明行，只留图标 + 角色名，一次性解决溢出与"太长"。 */
  .nm-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
  .nm-tab { padding: .5rem .55rem; min-width: 0; gap: .5rem; }
  .nm-tab .nm-tab-tx { min-width: 0; }
  .nm-tab .nm-tab-t { font-size: .82rem; overflow-wrap: anywhere; }
  .nm-tab .nm-tab-s { display: none; }
  .nm-tab .nm-tab-i svg { width: 18px; height: 18px; }
  /* 条目文字同样允许断行，避免长工具名溢出卡片 */
  .nav-menu .nm-t { overflow-wrap: anywhere; }
  .nm-list a { min-width: 0; }
  .nm-auds { display: none; }
  /* 移动端插入符方块：绝对定位到标题行右侧（块级布局下不能再用 margin-left:auto） */
  .nav-drop-toggle {
    position: absolute;
    top: 0; right: 0;
    width: 40px; height: 40px;
    margin: 0;
  }
  .nav-drop-toggle .nav-caret { width: 16px; height: 16px; }
  /* 标题占满整行，右侧留出插入符的位置 */
  .nav-drop > a {
    width: 100%;
    justify-content: space-between;
    padding: .55rem 44px .55rem 0;
  }

  .nav-menu {
    display: none;
    position: static;
    transform: none;
    min-width: 0;
    width: 100%;
    margin: .55rem 0 .25rem;
    padding: 0 0 0 .7rem;
    background: transparent;
    border: none;
    border-left: 2px solid var(--border);
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    z-index: auto;
  }
  /* transform 必须在这里再压一次：桌面展开规则
     `.nav-drop.open .nav-menu { transform: translateX(-50%) }` 有三个类，
     优先级高于单类的 transform:none —— 不写这行，菜单展开时会被平移
     自身宽度的一半，标题图标全部滑出屏幕左侧，只剩角标可见。 */
  .nav-drop.open .nav-menu { display: block; transform: none; }
  /* 悬停桥在触屏上没有意义，且会白占 16px */
  .nav-menu::before { display: none; }

  .nav-menu a {
    padding: .5rem .35rem;
    border-radius: 8px;
    align-items: center;
    gap: .6rem;
  }
  .nav-menu .nm-ico { width: 26px; height: 26px; border-radius: 7px; }
  .nav-menu .nm-ico svg { width: 13px; height: 13px; }
  .nav-menu .nm-txt { flex: 1 1 auto; }
  .nav-menu .nm-t { font-size: .85rem; }
  /* 副标题在窄屏里只是噪声，一级菜单已经说清是什么 */
  .nav-menu .nm-s { display: none; }
  .nav-menu .nm-step {
    align-self: center;
    margin-top: 0;
    font-size: .6rem;
  }
  .nav-menu-foot { margin-top: .35rem; padding: .5rem .35rem 0; }
  .nav-menu-foot a { font-size: .8rem; }
}