/* chuanzhou.css — 「川舟 Chuanzhou Nexus」产品区专属样式（全部 cz- 前缀）
   配合 css/steps.css 使用；需在 steps.css 之后加载（.cz-comp 覆盖引擎的位移入场）。
   结构：.cz-rail 常驻流水线（st-booth 内、st-comp 之外）+ 每级 .st-comp.cz-comp 详情。 */

/* ================= 常驻横向流水线 ================= */
.cz-rail {
  position: absolute; left: 50%; top: 5%; z-index: 3;
  transform: translateX(-50%) scale(var(--cz-rs, 1));
  display: flex; align-items: center; gap: 10px;
  pointer-events: none; white-space: nowrap;
  transition: top .3s cubic-bezier(.2,.7,.3,1), transform .3s cubic-bezier(.2,.7,.3,1);
}
/* L0：流水线是全舞台主角，居中展示（--cz-rs 由 JS 按 booth 宽度适配，不再额外放大以免溢出） */
.cz-rail[data-step="0"] { top: 38%; transform: translateX(-50%) translateY(-50%) scale(var(--cz-rs, 1)); }

.cz-rgroup { display: flex; gap: 6px; transition: opacity .25s, filter .25s; }
.cz-rnode {
  display: inline-flex; align-items: center;
  font-size: 12.5px; font-weight: 600; color: #1d1d1f;
  background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: 980px;
  padding: 7px 13px; box-shadow: 0 4px 14px rgba(0,0,0,.06);
  transition: background .25s, color .25s, border-color .25s, box-shadow .25s;
}
.cz-rgroup.todo { opacity: .35; filter: saturate(.4); }
.cz-rgroup.done .cz-rnode { border-color: var(--st-cat); color: var(--st-cat); background: var(--st-cat-soft); }
.cz-rgroup.cur .cz-rnode {
  background: var(--st-cat); color: #fff; border-color: var(--st-cat);
  box-shadow: 0 6px 18px rgba(0,0,0,.12), 0 0 0 5px var(--st-cat-soft);
}

/* 箭头轨道 + 粒子（只水平流动，不上下浮动） */
.cz-rarrow { position: relative; width: 42px; height: 2px; flex: none; background: rgba(0,0,0,.12); border-radius: 2px; }
.cz-rarrow::after {
  content: ""; position: absolute; right: -1px; top: -3px;
  border-left: 7px solid rgba(0,0,0,.28);
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
}
.cz-rarrow i {
  position: absolute; top: 50%; left: 0; width: 5px; height: 5px; margin-top: -2.5px;
  border-radius: 50%; background: var(--st-cat);
  animation: cz-flowx 1.7s linear infinite;
}
.cz-rarrow i:nth-child(2) { animation-delay: .57s; }
.cz-rarrow i:nth-child(3) { animation-delay: 1.13s; }
@keyframes cz-flowx {
  0% { transform: translateX(0); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateX(38px); opacity: 0; }
}

/* ================= 组件级（引擎切换，入场改为 FLIP 形变，自身只淡入） ================= */
.st-comp.cz-comp { transform: none; transition: opacity .16s ease-out; padding: 120px 4px 4px; }
.st-comp.cz-comp.active { transform: none; }
.st-comp.cz-comp-l0 { padding: 12px; }
.cz-detail { width: min(700px, 100%); }
.cz-cap { font-size: 13px; font-weight: 600; color: var(--st-cat); letter-spacing: .05em; margin-bottom: 14px; }
.cz-note { font-size: 12px; color: rgba(0,0,0,.44); margin-top: 12px; }
.cz-card {
  background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
.cz-src-head { font-size: 13px; font-weight: 700; color: #1d1d1f; margin-bottom: 12px; }

/* ---- L0：一句话 ---- */
.cz-l0 { text-align: center; margin-top: 150px; }
.cz-l0-line { font-size: 30px; font-weight: 700; letter-spacing: -.01em; color: #1d1d1f; }
.cz-l0-sub { margin-top: 12px; font-size: 15px; line-height: 1.7; color: rgba(0,0,0,.6); }

/* ---- 01：多源输入 三卡 ---- */
.cz-src-row { display: flex; gap: 14px; align-items: stretch; }
.cz-src-card { flex: 1; min-width: 0; padding: 16px 14px 12px; display: flex; flex-direction: column; }
.cz-src-foot { margin-top: auto; padding-top: 12px; font-size: 11px; line-height: 1.6; color: rgba(0,0,0,.44); }

/* 语音卡：波形 + 逐句落时间码（循环） */
.cz-wave { display: flex; align-items: center; gap: 3px; height: 28px; margin-bottom: 10px; }
.cz-wave i { width: 3px; border-radius: 2px; background: var(--st-cat); opacity: .75; animation: cz-wave 1.15s ease-in-out infinite; }
.cz-wave i:nth-child(3n) { animation-delay: .18s; }
.cz-wave i:nth-child(3n+1) { animation-delay: .36s; }
.cz-wave i:nth-child(4n) { animation-delay: .54s; }
.cz-wave i:nth-child(1) { height: 10px; } .cz-wave i:nth-child(2) { height: 18px; }
.cz-wave i:nth-child(3) { height: 24px; } .cz-wave i:nth-child(4) { height: 14px; }
.cz-wave i:nth-child(5) { height: 20px; } .cz-wave i:nth-child(6) { height: 12px; }
.cz-wave i:nth-child(7) { height: 22px; } .cz-wave i:nth-child(8) { height: 16px; }
.cz-wave i:nth-child(9) { height: 26px; } .cz-wave i:nth-child(10) { height: 12px; }
.cz-wave i:nth-child(11) { height: 18px; } .cz-wave i:nth-child(12) { height: 9px; }
@keyframes cz-wave { 50% { transform: scaleY(.45); } }
.cz-tline { font-size: 11.5px; line-height: 1.55; color: rgba(0,0,0,.68); margin: 5px 0; }
.cz-tline b { color: var(--st-cat); font-weight: 600; margin-right: 6px; font-variant-numeric: tabular-nums; }
.cz-tlines .cz-tline, .cz-paste .cz-tline { animation: cz-tline-in 7.2s linear infinite; opacity: 0; }
.cz-tlines .cz-tl-1, .cz-paste .cz-tl-1 { animation-delay: 0s; }
.cz-tlines .cz-tl-2, .cz-paste .cz-tl-2 { animation-delay: 1.4s; }
.cz-tlines .cz-tl-3, .cz-paste .cz-tl-3 { animation-delay: 2.8s; }
@keyframes cz-tline-in {
  0% { opacity: 0; transform: translateY(6px); }
  4%, 62% { opacity: 1; transform: none; }
  70%, 100% { opacity: 0; }
}

/* 链接卡：链接 pill → 文章卡（循环形变） */
.cz-link-demo { position: relative; min-height: 118px; }
.cz-link-pill {
  position: absolute; left: 0; top: 8px;
  font-size: 12px; font-weight: 600; color: var(--st-cat);
  background: var(--st-cat-soft); border-radius: 980px; padding: 8px 14px;
  animation: cz-link-pill 6s ease-in-out infinite;
}
.cz-article {
  position: absolute; left: 0; right: 0; top: 0;
  border: 1px solid rgba(0,0,0,.1); border-radius: 10px; padding: 12px;
  background: #f7f9fc;
  animation: cz-article-in 6s ease-in-out infinite; opacity: 0;
}
.cz-article b { display: block; font-size: 13px; color: #1d1d1f; margin-bottom: 6px; }
.cz-article p { font-size: 11.5px; line-height: 1.6; color: rgba(0,0,0,.55); }
@keyframes cz-link-pill {
  0%, 30% { opacity: 1; transform: none; }
  40%, 88% { opacity: 0; transform: scale(.85); }
  96%, 100% { opacity: 1; transform: none; }
}
@keyframes cz-article-in {
  0%, 34% { opacity: 0; transform: translateY(10px) scale(.94); }
  46%, 86% { opacity: 1; transform: none; }
  94%, 100% { opacity: 0; transform: none; }
}

/* 文稿卡：粘贴流入 */
.cz-paste {
  border: 1px dashed rgba(0,0,0,.18); border-radius: 10px; padding: 10px 12px;
  min-height: 118px; background: rgba(0,0,0,.02);
}

/* ---- 02：LLM 精校 对照 ---- */
.cz-pol-grid { display: grid; grid-template-columns: 1fr auto 1.15fr; gap: 14px; align-items: center; }
.cz-col-head { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; color: rgba(0,0,0,.44); margin-bottom: 10px; }
.cz-frags { min-width: 0; }
.cz-frag {
  font-size: 11.5px; line-height: 1.55; color: rgba(0,0,0,.62);
  background: #fff; border: 1px solid rgba(0,0,0,.09); border-radius: 9px;
  padding: 8px 10px; margin-bottom: 8px; box-shadow: 0 3px 10px rgba(0,0,0,.05);
}
.cz-frag b { color: var(--st-cat); font-weight: 600; margin-right: 6px; font-variant-numeric: tabular-nums; }
.cz-frag.cz-noise { opacity: .55; }
.cz-frag.cz-noise b { color: rgba(0,0,0,.4); }
.cz-frag.cz-noise i {
  display: block; font-style: normal; margin-top: 4px;
  font-size: 10.5px; color: #c75b12; text-decoration: none;
}
.cz-frag.cz-noise { text-decoration: line-through; text-decoration-color: rgba(199,91,18,.55); }
.cz-pol-arrow {
  font-size: 22px; font-weight: 700; color: var(--st-cat); text-align: center; line-height: 1.2;
}
.cz-pol-arrow span { display: block; font-size: 10.5px; font-weight: 600; color: rgba(0,0,0,.44); margin-top: 6px; }
.cz-polished {
  min-width: 0; background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 14px;
  padding: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
.cz-polished p { font-size: 12.5px; line-height: 1.7; color: #1d1d1f; margin: 8px 0; }
.cz-tc {
  display: inline-block; font-size: 10.5px; font-weight: 700; color: var(--st-cat);
  background: var(--st-cat-soft); border-radius: 6px; padding: 2px 6px; margin-right: 7px;
  cursor: pointer; font-variant-numeric: tabular-nums; vertical-align: 1px;
}
.cz-polished .cz-dim-note { font-size: 11px; color: rgba(0,0,0,.44); }

/* ---- 03：人工打标 ---- */
.cz-mark-panel { padding: 20px 22px 14px; }
.cz-mark-text {
  font-size: 15.5px; line-height: 2.05; color: #1d1d1f;
  user-select: text; cursor: text;
}
.cz-mark-text::selection, .cz-mark-text ::selection { background: rgba(0,113,227,.22); }
.cz-hl {
  background: rgba(0,113,227,.16); border-bottom: 2px solid var(--st-cat);
  border-radius: 3px; padding: 1px 1px;
}
.cz-drop { text-decoration: line-through; text-decoration-thickness: 1.5px; color: rgba(0,0,0,.34); }
.cz-hl, .cz-drop { animation: cz-mark-pop .3s cubic-bezier(.2,.9,.3,1.3); }
@keyframes cz-mark-pop { 0% { transform: scale(.96); } 60% { transform: scale(1.02); } 100% { transform: none; } }
.cz-mark-legend {
  display: flex; gap: 18px; align-items: center;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(0,0,0,.07);
  font-size: 11.5px; color: rgba(0,0,0,.55);
}
.cz-mark-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cz-dot-hl, .cz-dot-drop { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.cz-dot-hl { background: rgba(0,113,227,.2); border-bottom: 2px solid var(--st-cat); }
.cz-dot-drop { background: rgba(0,0,0,.14); position: relative; }
.cz-dot-drop::after { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1.5px; background: rgba(0,0,0,.5); }
.cz-mark-hint { margin-left: auto; color: var(--st-cat); font-weight: 600; }

/* 径向扇形菜单（SegmentFanMenu.vue 的纯 JS 变体） */
.cz-fan {
  position: fixed; z-index: 2000; width: 0; height: 0;
  opacity: 0; transform: scale(.6); pointer-events: none;
  transition: opacity .14s ease-out, transform .18s cubic-bezier(.2,.9,.3,1.35);
}
.cz-fan.show { opacity: 1; transform: none; }
.cz-fan-svg {
  position: absolute; left: -100px; top: -100px; overflow: visible;
  pointer-events: none; filter: drop-shadow(0 6px 16px rgba(0,0,0,.3));
}
.cz-fan-arc {
  fill: #2c2c2e; stroke: rgba(255,255,255,.5); stroke-width: 1.5;
  cursor: pointer; transition: fill .12s ease; pointer-events: auto;
}
.cz-fan-arc:hover { fill: var(--st-cat, #0071e3); }
.cz-fan-label {
  fill: #fff; font-size: 13px; font-weight: 600;
  text-anchor: middle; dominant-baseline: central;
  pointer-events: none; user-select: none;
}
.cz-fan-cancel { font-size: 12px; }
.cz-fan-hole {
  fill: #1d1d1f; stroke: rgba(255,255,255,.6); stroke-width: 2;
  cursor: pointer; transition: fill .14s ease; pointer-events: auto;
}
.cz-fan-hole:hover { fill: #3a3a3c; }

/* ---- 04：多目的输出 分流 ---- */
.cz-out-grid { display: grid; grid-template-columns: 1.25fr 96px 1fr; gap: 12px; align-items: center; }
.cz-mm { padding: 16px; }
.cz-mm-topic { font-size: 12px; line-height: 1.6; color: rgba(0,0,0,.68); margin: 9px 0; }
.cz-mm-topic b {
  display: inline-block; font-size: 11px; color: var(--st-cat); background: var(--st-cat-soft);
  border-radius: 6px; padding: 2px 8px; margin-right: 8px; font-weight: 700;
}
.cz-mm-foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(0,0,0,.07); font-size: 10.5px; color: rgba(0,0,0,.44); }
.cz-out-mid { text-align: center; }
.cz-doc {
  display: inline-block; font-size: 12px; font-weight: 700; color: #1d1d1f;
  background: #fff; border: 1px solid rgba(0,0,0,.12); border-radius: 10px;
  padding: 10px 14px; box-shadow: 0 6px 16px rgba(0,0,0,.08);
}
.cz-out-arrows { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.cz-oa { font-size: 10px; font-weight: 600; color: var(--st-cat); white-space: nowrap; }
.cz-kb { display: flex; flex-direction: column; gap: 10px; }
.cz-kb-card { padding: 12px 14px; border-left: 3px solid var(--st-cat); }
.cz-kb-card b { display: block; font-size: 12px; color: #1d1d1f; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.cz-kb-card span { font-size: 10.5px; color: rgba(0,0,0,.44); }
.cz-kb-foot { font-size: 10.5px; color: rgba(0,0,0,.44); text-align: center; }

/* ---- 逐行生长（仅台阶模式；static 退化时全部直接可见） ---- */
.st-steps:not(.st-static) .cz-grow { opacity: 0; transform: translateY(10px); }
.st-steps:not(.st-static) .st-comp.active .cz-grow { animation: cz-grow-in .45s cubic-bezier(.2,.7,.3,1) both; }
.st-steps:not(.st-static) .st-comp.active .cz-grow:nth-child(1) { animation-delay: .1s; }
.st-steps:not(.st-static) .st-comp.active .cz-grow:nth-child(2) { animation-delay: .3s; }
.st-steps:not(.st-static) .st-comp.active .cz-grow:nth-child(3) { animation-delay: .5s; }
.st-steps:not(.st-static) .st-comp.active .cz-grow:nth-child(4) { animation-delay: .7s; }
@keyframes cz-grow-in { to { opacity: 1; transform: none; } }

/* ---- 移动端退化（≤900px：组件已插入条目后，流水线随 booth 隐藏） ---- */
@media (max-width: 900px) {
  .cz-rail { display: none; }
  .st-comp.cz-comp { padding: 18px 0 6px; }
  .cz-l0 { margin-top: 0; }
  .cz-l0-line { font-size: 22px; }
  .cz-src-row { flex-direction: column; }
  .cz-pol-grid { grid-template-columns: 1fr; }
  .cz-pol-arrow { transform: rotate(90deg); padding: 4px 0; }
  .cz-pol-arrow span { display: none; }
  .cz-l0-sub br { display: none; }
  .cz-out-grid { grid-template-columns: 1fr; }
  .cz-out-mid { padding: 6px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cz-rarrow i, .cz-wave i, .cz-tline, .cz-link-pill, .cz-article,
  .cz-hl, .cz-drop, .cz-grow, .cz-fan { animation: none !important; transition: none !important; }
  .cz-tlines .cz-tline, .cz-paste .cz-tline { opacity: 1; }
  .cz-article { opacity: 1; position: static; }
  .cz-link-pill { display: none; }
}