/* zimeiti.css — 「企业自媒体内容生成」台阶页组件样式（全部 zm- 前缀，防冲突）
   依赖：css/steps.css（台阶引擎样式）、css/style.css（.page-steps 集成 + 移动端退化通用规则）
   约定：动画一律用 .st-steps:not(.st-static) .st-comp.active 触发（级别激活即重播），
         移动端 st-static 退化下所有元素默认可见、无动画。 */

#zmSteps { --zm-cat: var(--st-cat, #0071e3); }

/* ---- 通用：分级生长（各 comp 内 zm-growN 按 N 依次入场） ---- */
.st-steps:not(.st-static) [class*="zm-grow"] { opacity: 0; transform: translateY(12px) scale(.98); }
.st-steps:not(.st-static) .st-comp.active [class*="zm-grow"] {
  animation: zm-grow-in .5s cubic-bezier(.2,.7,.3,1) both;
}
.st-steps:not(.st-static) .st-comp.active .zm-grow1 { animation-delay: .05s; }
.st-steps:not(.st-static) .st-comp.active .zm-grow2 { animation-delay: .28s; }
.st-steps:not(.st-static) .st-comp.active .zm-grow3 { animation-delay: .52s; }
.st-steps:not(.st-static) .st-comp.active .zm-grow4 { animation-delay: .76s; }
.st-steps:not(.st-static) .st-comp.active .zm-grow5 { animation-delay: 1s; }
.st-steps:not(.st-static) .st-comp.active .zm-grow6 { animation-delay: 1.24s; }
.st-steps:not(.st-static) .st-comp.active .zm-grow7 { animation-delay: 1.48s; }
@keyframes zm-grow-in { to { opacity: 1; transform: none; } }

/* ================= L0：内容工厂流水线 ================= */
.zm-factory { width: min(700px, 100%); }
.zm-pipe {
  position: relative; height: 340px;
  display: flex; align-items: center; justify-content: space-between;
}
.zm-track {
  position: absolute; left: 130px; right: 150px; top: 50%; height: 2px; margin-top: -1px;
  background: repeating-linear-gradient(90deg, rgba(0,113,227,.45) 0 8px, transparent 8px 17px);
}
.st-steps:not(.st-static) .st-comp.active .zm-track {
  animation: zm-track-run .7s linear infinite;
}
@keyframes zm-track-run { to { background-position: 17px 0; } }

.zm-srcs { display: flex; flex-direction: column; gap: 10px; z-index: 1; }
.zm-src {
  font-size: 13px; color: rgba(0,0,0,.68); white-space: nowrap;
  background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: 980px;
  padding: 8px 14px; box-shadow: 0 4px 14px rgba(0,0,0,.06);
}
.st-steps:not(.st-static) .st-comp.active .zm-src { animation: zm-src-bob 3s ease-in-out infinite; }
.st-steps:not(.st-static) .st-comp.active .zm-srcs .zm-src:nth-child(2) { animation-delay: .5s; }
.st-steps:not(.st-static) .st-comp.active .zm-srcs .zm-src:nth-child(3) { animation-delay: 1s; }
.st-steps:not(.st-static) .st-comp.active .zm-srcs .zm-src:nth-child(4) { animation-delay: 1.5s; }
@keyframes zm-src-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

.zm-core {
  position: relative; z-index: 1;
  width: 128px; height: 128px; border-radius: 32px;
  background: linear-gradient(160deg, #0f6ee0, #0071e3 60%, #40a0ff);
  color: #fff; display: flex; align-items: center; justify-content: center;
  text-align: center; box-shadow: 0 18px 44px rgba(0,113,227,.35);
}
.zm-core b { font-size: 17px; line-height: 1.5; letter-spacing: .04em; }
.zm-core-ring {
  position: absolute; inset: -12px; border-radius: 40px;
  border: 2px solid rgba(0,113,227,.4); pointer-events: none;
}
.st-steps:not(.st-static) .st-comp.active .zm-core-ring { animation: zm-ring 2.2s ease-out infinite; }
@keyframes zm-ring {
  0% { transform: scale(.86); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: scale(1.14); opacity: 0; }
}

.zm-tray {
  z-index: 1; width: 168px;
  background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 18px;
  box-shadow: 0 16px 40px rgba(0,0,0,.1); padding: 12px 14px 14px;
}
.zm-tray-head {
  font-size: 12.5px; font-weight: 700; color: #07c160; /* 微信绿仅作草稿箱意象 */
  padding-bottom: 8px; border-bottom: 1px solid rgba(0,0,0,.07); margin-bottom: 10px;
}
.zm-tray-stack { position: relative; height: 118px; }
.zm-mini {
  position: absolute; left: 0; right: 0; height: 30px;
  display: flex; align-items: center; padding: 0 10px;
  font-style: normal; font-size: 11.5px; font-weight: 600; color: rgba(0,0,0,.75);
  background: #f5f7fa; border: 1px solid rgba(0,0,0,.07); border-radius: 8px;
}
.zm-mini-1 { top: 0; } .zm-mini-2 { top: 28px; left: 5px; }
.zm-mini-3 { top: 56px; left: 10px; } .zm-mini-4 { top: 84px; left: 15px; }
.st-steps:not(.st-static) .st-comp.active .zm-mini { animation: zm-mini-in .45s cubic-bezier(.2,.9,.3,1.35) both; }
.st-steps:not(.st-static) .st-comp.active .zm-mini-1 { animation-delay: .9s; }
.st-steps:not(.st-static) .st-comp.active .zm-mini-2 { animation-delay: 1.1s; }
.st-steps:not(.st-static) .st-comp.active .zm-mini-3 { animation-delay: 1.3s; }
.st-steps:not(.st-static) .st-comp.active .zm-mini-4 { animation-delay: 1.5s; }
@keyframes zm-mini-in { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }

/* 传送中的成品卡：左灰（原料态）→ 过工厂变蓝（成品态）→ 落入草稿箱 */
.zm-fcard {
  position: absolute; top: 42%; left: 17%; z-index: 2;
  font-size: 12px; font-weight: 700; white-space: nowrap;
  background: #fff; color: rgba(0,0,0,.55);
  border: 1px solid rgba(0,0,0,.12); border-radius: 10px; padding: 7px 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,.12); opacity: 0;
}
.st-steps:not(.st-static) .st-comp.active .zm-fcard {
  animation: zm-flow 5.6s cubic-bezier(.4,.1,.5,.9) infinite;
}
.st-steps:not(.st-static) .st-comp.active .zm-f2 { animation-delay: 1.4s; }
.st-steps:not(.st-static) .st-comp.active .zm-f3 { animation-delay: 2.8s; }
.st-steps:not(.st-static) .st-comp.active .zm-f4 { animation-delay: 4.2s; }
@keyframes zm-flow {
  0%   { left: 17%; opacity: 0; transform: translateY(0) scale(.85);
         background: #fff; color: rgba(0,0,0,.55); }
  8%   { opacity: 1; }
  42%  { left: 50%; transform: translateY(-14px) scale(.9);
         background: #fff; color: rgba(0,0,0,.55); }
  52%  { left: 55%; transform: translateY(-6px) scale(.7); opacity: .4;
         background: #0071e3; color: #fff; border-color: #0071e3; } /* 进工厂 */
  62%  { left: 60%; transform: translateY(0) scale(1.05); opacity: 1;
         background: #0071e3; color: #fff; border-color: #0071e3; } /* 出工厂 */
  90%  { left: 86%; opacity: 1; transform: translateY(4px) scale(1); }
  100% { left: 90%; opacity: 0; transform: translateY(16px) scale(.8);
         background: #0071e3; color: #fff; border-color: #0071e3; } /* 落箱 */
}
.zm-factory-note { text-align: center; font-size: 13px; color: rgba(0,0,0,.44); margin-top: 18px; }

/* ================= 01：行研周报（真实信源） ================= */
.zm-report { width: min(720px, 100%); }
.zm-r-cond {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 12px;
  padding: 10px 14px; box-shadow: 0 8px 22px rgba(0,0,0,.06); margin-bottom: 14px;
}
.zm-r-kw {
  font-size: 12.5px; font-weight: 600; color: var(--zm-cat);
  background: rgba(0,113,227,.09); border-radius: 7px; padding: 3px 10px;
}
.zm-r-date { font-size: 12.5px; color: rgba(0,0,0,.68); font-weight: 600; margin-left: 4px; }
.zm-r-srcs { font-size: 12px; color: rgba(0,0,0,.44); margin-left: auto; }
.zm-r-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; align-items: start; }
.zm-r-label {
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  color: rgba(0,0,0,.44); margin: 0 0 8px 2px;
}
.zm-r-search .zm-queries + .zm-r-label { margin-top: 12px; }

.zm-queries { display: flex; flex-wrap: wrap; gap: 7px; }
.zm-q {
  font-size: 12px; color: rgba(0,0,0,.75);
  background: #fff; border: 1px dashed rgba(0,113,227,.45); border-radius: 980px;
  padding: 5px 12px; box-shadow: 0 3px 10px rgba(0,113,227,.08);
}
.st-steps:not(.st-static) .zm-q { opacity: 0; transform: translateY(-10px) scale(.9); }
.st-steps:not(.st-static) .st-comp.active .zm-q { animation: zm-q-in .4s cubic-bezier(.2,.9,.3,1.3) both; }
.st-steps:not(.st-static) .st-comp.active .zm-q:nth-child(1) { animation-delay: .1s; }
.st-steps:not(.st-static) .st-comp.active .zm-q:nth-child(2) { animation-delay: .28s; }
.st-steps:not(.st-static) .st-comp.active .zm-q:nth-child(3) { animation-delay: .46s; }
@keyframes zm-q-in { to { opacity: 1; transform: none; } }

.zm-news-item {
  background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 11px;
  padding: 9px 12px; margin-bottom: 8px; box-shadow: 0 6px 16px rgba(0,0,0,.05);
}
.zm-news-item p { font-size: 12.8px; font-weight: 600; line-height: 1.45; }
.zm-news-tags { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.zm-news-tags i {
  font-style: normal; font-size: 10.5px; border-radius: 5px; padding: 1px 7px;
}
.zm-src-cn { color: #0071e3; background: rgba(0,113,227,.1); font-weight: 600; }
.zm-src-en { color: #6e4fbb; background: rgba(110,79,187,.1); font-weight: 600; }
.zm-d { color: rgba(0,0,0,.5); background: rgba(0,0,0,.06); }
.zm-merged {
  color: #fff; background: var(--zm-cat); font-weight: 700;
}
.zm-dup-badge { color: #d70015; background: rgba(215,0,21,.1); font-weight: 700; }
.st-steps:not(.st-static) .zm-news-item { opacity: 0; transform: translateX(-22px); }
.st-steps:not(.st-static) .st-comp.active .zm-news-item {
  animation: zm-news-in .42s cubic-bezier(.2,.9,.3,1.1) both;
}
.st-steps:not(.st-static) .st-comp.active .zm-news-item:nth-child(1) { animation-delay: .75s; }
.st-steps:not(.st-static) .st-comp.active .zm-news-item:nth-child(2) { animation-delay: 1.05s; }
.st-steps:not(.st-static) .st-comp.active .zm-news-item:nth-child(3) { animation-delay: 1.35s; }
.st-steps:not(.st-static) .st-comp.active .zm-news-item:nth-child(4) { animation-delay: 2.9s; }
.st-steps:not(.st-static) .st-comp.active .zm-news-item:nth-child(5) { animation-delay: 3.15s; }
@keyframes zm-news-in { to { opacity: 1; transform: none; } }
/* 去重：重复条目先红框标记，再收缩消失；保留条目弹出「已合并 2 源」
   注意：dup 卡有两个动画，入场用 both（倒填隐藏），退场只能用 forwards——
   否则 backwards 填充会在入场前就把红框 0% 帧盖上去 */
.st-steps:not(.st-static) .st-comp.active .zm-news .zm-news-dup {
  animation: zm-news-in .42s cubic-bezier(.2,.9,.3,1.1) both,
             zm-dup-out .55s cubic-bezier(.5,0,.8,.4) forwards;
  animation-delay: 1.35s, 2.3s;
}
@keyframes zm-dup-out {
  0%   { opacity: 1; transform: none; box-shadow: 0 0 0 2px rgba(215,0,21,.55); }
  35%  { opacity: 1; transform: scale(.97); box-shadow: 0 0 0 2px rgba(215,0,21,.55); }
  100% { opacity: 0; transform: translateY(-26px) scale(.55); margin-bottom: -62px;
         padding-top: 0; padding-bottom: 0; }
}
.st-steps:not(.st-static) .zm-merged { opacity: 0; transform: scale(.6); }
.st-steps:not(.st-static) .st-comp.active .zm-merged {
  animation: zm-merged-in .4s cubic-bezier(.2,.9,.3,1.5) 2.75s both;
}
@keyframes zm-merged-in { to { opacity: 1; transform: none; } }

.zm-paper {
  background: #fff; border: 1px solid rgba(0,0,0,.08); border-left: 3px solid var(--zm-cat);
  border-radius: 13px; box-shadow: 0 12px 30px rgba(0,0,0,.08);
  padding: 14px 16px 12px;
}
.zm-paper-head { font-size: 13.5px; font-weight: 700; padding-bottom: 8px; border-bottom: 1px solid rgba(0,0,0,.07); }
.zm-paper-group { margin-top: 9px; }
.zm-paper-group b { font-size: 12px; color: var(--zm-cat); }
.zm-paper-group p { font-size: 12px; color: rgba(0,0,0,.75); line-height: 1.6; margin-top: 3px; }
.zm-paper-group em { font-style: normal; color: rgba(0,0,0,.44); font-size: 11px; }
.zm-paper-push {
  margin-top: 11px; text-align: center;
  font-size: 12.5px; font-weight: 700; color: #fff;
  background: var(--zm-cat); border-radius: 9px; padding: 8px 0;
  box-shadow: 0 8px 20px rgba(0,113,227,.3);
}
.st-steps:not(.st-static) .st-comp.active .zm-paper .zm-grow1 { animation-delay: 3.5s; }
.st-steps:not(.st-static) .st-comp.active .zm-paper .zm-grow2 { animation-delay: 3.8s; }
.st-steps:not(.st-static) .st-comp.active .zm-paper .zm-grow3 { animation-delay: 4.1s; }
.st-steps:not(.st-static) .st-comp.active .zm-paper .zm-grow4 { animation-delay: 4.45s; }

/* ================= 02：新闻通稿（iPhone mock） ================= */
.zm-l2 { display: flex; align-items: center; gap: 30px; }
.zm-l2-input { width: 205px; flex: none; }
.zm-l2-label {
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  color: rgba(0,0,0,.44); margin-bottom: 10px;
}
.zm-l2-photos { display: flex; align-items: center; gap: 6px; }
.zm-l2-photos i {
  width: 46px; height: 46px; border-radius: 10px; display: block;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 14px rgba(0,0,0,.1);
}
.zm-l2-photos i:nth-child(1) { background: linear-gradient(150deg, #bcd4ee, #6f9bce); }
.zm-l2-photos i:nth-child(2) { background: linear-gradient(150deg, #d9e6d4, #8fb385); }
.zm-l2-photos i:nth-child(3) { background: linear-gradient(150deg, #f0ddc2, #cfa465); }
.zm-l2-photos span { font-size: 11.5px; color: rgba(0,0,0,.5); margin-left: 2px; }
.zm-l2-topic {
  margin-top: 12px; font-size: 14px; font-weight: 600;
  background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: 11px;
  padding: 10px 13px; box-shadow: 0 6px 16px rgba(0,0,0,.06);
}
.zm-l2-arrow { color: var(--zm-cat); font-size: 20px; font-weight: 700; margin: 10px 0 10px 12px; }
.zm-l2-hint { font-size: 12px; color: rgba(0,0,0,.5); line-height: 1.7; }

.zm-phone-frame {
  flex: none; width: 192px; height: 389px; /* iphone-x 外框 427×864 × var(--zm-mock) */
  --zm-mock: .45;
  filter: drop-shadow(0 22px 44px rgba(0,0,0,.28));
}
.zm-phone-frame .marvel-device { transform: scale(var(--zm-mock)); transform-origin: top left; }
.zm-phone-frame .screen { background: #fff; }
.zm-art { position: relative; padding: 84px 20px 20px; } /* 顶部给 toast 留位 */
.zm-toast {
  position: absolute; top: 46px; left: 50%; transform: translateX(-50%); /* 避开 iphone-x 刘海 */
  font-size: 11px; font-weight: 700; color: #fff; white-space: nowrap;
  background: #07c160; border-radius: 980px; padding: 6px 14px;
  box-shadow: 0 8px 20px rgba(7,192,96,.35);
}
.st-steps:not(.st-static) .zm-toast { opacity: 0; transform: translateX(-50%) translateY(-34px); }
.st-steps:not(.st-static) .st-comp.active .zm-toast {
  animation: zm-toast-in .5s cubic-bezier(.2,.9,.3,1.3) 2.1s both;
}
@keyframes zm-toast-in { to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.zm-art h1 { font-size: 17.5px; line-height: 1.4; letter-spacing: -.01em; }
.zm-art-meta { font-size: 10.5px; color: rgba(0,0,0,.44); margin-top: 5px; }
.zm-art > p { font-size: 12.3px; line-height: 1.75; color: rgba(0,0,0,.78); margin-top: 10px; }
.zm-art figure { margin: 12px 0 0; }
.zm-photo { display: block; width: 100%; height: 128px; border-radius: 9px; }
.zm-photo-a { background: linear-gradient(160deg, #bcd4ee 0%, #6f9bce 55%, #4a76ad 100%); }
.zm-photo-b { background: linear-gradient(160deg, #d9e6d4 0%, #8fb385 55%, #5d8354 100%); }
.zm-art figcaption {
  font-size: 10px; color: rgba(0,0,0,.44); text-align: center; margin-top: 5px;
}
.zm-art-foot {
  margin-top: 14px; padding-top: 9px; border-top: 1px solid rgba(0,0,0,.07);
  font-size: 10.5px !important; color: rgba(0,0,0,.44) !important;
}
/* 逐块编辑光标：JS 循环加 .zm-editing */
.zm-blk { position: relative; border-radius: 4px; transition: box-shadow .2s; }
.zm-blk.zm-editing { box-shadow: 0 0 0 1.5px var(--zm-cat); }
.zm-blk.zm-editing::after {
  content: "编辑"; position: absolute; top: -9px; right: -4px;
  font-size: 9px; font-weight: 700; color: #fff; background: var(--zm-cat);
  border-radius: 5px; padding: 1px 6px; line-height: 1.5;
}
.zm-l2-cap {
  position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
  font-size: 12.5px; color: rgba(0,0,0,.5); white-space: nowrap;
}
/* 让 cap 相对 comp 定位（comp 已是 flex 居中容器，用 absolute 需父级定位） */
.zm-l2 { position: relative; padding-bottom: 26px; }

/* ================= 03：节日运营 ================= */
.zm-fest { width: min(700px, 100%); position: relative; padding-top: 6px; }
.zm-fest-label {
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  color: rgba(0,0,0,.44); margin-bottom: 14px;
}
.zm-fest-line {
  position: absolute; top: 78px; left: 2%; right: 2%; height: 0;
  border-top: 2px dashed rgba(0,113,227,.25);
}
.zm-fest-row {
  position: relative; display: flex; gap: 10px; align-items: flex-start;
  margin-bottom: 18px;
}
.zm-fest-card {
  flex: 1; font-family: inherit; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid rgba(0,0,0,.09); border-radius: 13px;
  padding: 11px 12px 10px; box-shadow: 0 6px 16px rgba(0,0,0,.05);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.zm-fest-card:hover { border-color: rgba(0,113,227,.45); }
.zm-fest-card.sel { border-color: var(--zm-cat); box-shadow: 0 0 0 3px rgba(0,113,227,.18); }
.zm-fest-card b { display: block; font-size: 13.5px; }
.zm-fest-tag {
  font-style: normal; font-size: 9px; color: rgba(0,0,0,.44); font-weight: 400;
  border: 1px solid rgba(0,0,0,.14); border-radius: 4px; padding: 0 4px; margin-left: 4px;
  vertical-align: 1px;
}
.zm-fest-date { display: block; font-size: 11px; color: rgba(0,0,0,.44); margin-top: 4px; }
.zm-fest-days { display: block; font-size: 11px; font-weight: 600; color: #1a8f4a; margin-top: 4px; }
.zm-fest-card.zm-fest-urgent { border-color: rgba(215,0,21,.45); background: #fdf5f5; }
.zm-fest-card.zm-fest-urgent b { color: #d70015; }
.zm-fest-card.zm-fest-urgent .zm-fest-days { color: #d70015; }
.st-steps:not(.st-static) .st-comp.active .zm-fest-urgent {
  animation: zm-urgent 1.5s ease-in-out .6s infinite;
}
@keyframes zm-urgent {
  0%, 100% { transform: translateY(0); }
  12% { transform: translateY(-9px); }
  24% { transform: translateY(0); }
  32% { transform: translateY(-4px); }
  42% { transform: translateY(0); }
}
.zm-fest-preview {
  display: flex; gap: 16px; align-items: stretch;
  background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 16px;
  box-shadow: 0 14px 34px rgba(0,0,0,.08); padding: 16px;
}
.zm-fest-img {
  flex: none; width: 168px; border-radius: 12px; position: relative; overflow: hidden;
  background: linear-gradient(155deg, #f6d9d0 0%, #e8a79a 45%, #c9604e 100%);
  display: flex; align-items: center; justify-content: center;
}
.zm-fest-img span {
  font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,.95);
  background: rgba(0,0,0,.25); border-radius: 980px; padding: 4px 12px;
}
/* 生图 shimmer：扫光循环 */
.zm-fest-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform: translateX(-100%);
}
.st-steps:not(.st-static) .st-comp.active .zm-fest-img::after {
  animation: zm-shimmer 2.6s ease-in-out 1s infinite;
}
@keyframes zm-shimmer { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }
.zm-fest-text { flex: 1; min-width: 0; }
.zm-fest-title { font-size: 16px; font-weight: 700; }
.zm-fest-content {
  font-size: 13px; color: rgba(0,0,0,.72); line-height: 1.75; margin-top: 8px;
  background: rgba(0,113,227,.05); border-radius: 10px; padding: 10px 12px;
}
.zm-fest-aud { font-size: 12px; color: rgba(0,0,0,.5); margin-top: 8px; }
.zm-fest-aud span { color: var(--zm-cat); font-weight: 600; }
.zm-fest-btns { display: flex; gap: 10px; margin-top: 12px; }
.zm-fbtn {
  font-size: 12.5px; font-weight: 600; color: rgba(0,0,0,.68);
  background: #fff; border: 1px solid rgba(0,0,0,.14); border-radius: 980px; padding: 7px 16px;
}
.zm-fbtn.on { background: var(--zm-cat); border-color: var(--zm-cat); color: #fff; }

/* ================= 04：专属风格 ================= */
.zm-vi { width: min(700px, 100%); }
.zm-vi-top { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.zm-vi-ref { text-align: center; }
.zm-vi-refimg {
  display: block; width: 92px; height: 92px; border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08); box-shadow: 0 10px 24px rgba(0,0,0,.1);
  background:
    linear-gradient(135deg, #1f3a5f 0 50%, transparent 50%),
    linear-gradient(45deg, #c8a45d 0 30%, #f2ead8 30% 65%, #3a6ea5 65%);
}
.zm-vi-ref span { display: block; font-size: 11.5px; color: rgba(0,0,0,.5); margin-top: 7px; }
.zm-vi-arrow { font-size: 12.5px; font-weight: 700; color: var(--zm-cat); white-space: nowrap; }
.zm-vi-traits { display: flex; flex-direction: column; gap: 10px; }
.zm-vi-swatches { display: flex; gap: 8px; }
.zm-vi-swatches i {
  width: 34px; height: 34px; border-radius: 10px; background: var(--sw);
  border: 1px solid rgba(0,0,0,.08); box-shadow: 0 5px 12px rgba(0,0,0,.1);
}
.st-steps:not(.st-static) .st-comp.active .zm-vi-swatches i {
  animation: zm-swatch .4s cubic-bezier(.2,.9,.3,1.5) both;
}
.st-steps:not(.st-static) .st-comp.active .zm-vi-swatches i:nth-child(1) { animation-delay: .75s; }
.st-steps:not(.st-static) .st-comp.active .zm-vi-swatches i:nth-child(2) { animation-delay: .88s; }
.st-steps:not(.st-static) .st-comp.active .zm-vi-swatches i:nth-child(3) { animation-delay: 1.01s; }
.st-steps:not(.st-static) .st-comp.active .zm-vi-swatches i:nth-child(4) { animation-delay: 1.14s; }
@keyframes zm-swatch { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
.zm-vi-tags { display: flex; gap: 7px; flex-wrap: wrap; }
.zm-vi-tags span {
  font-size: 11.5px; font-weight: 600; color: rgba(0,0,0,.68);
  background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: 980px; padding: 4px 11px;
}

.zm-vi-bottom { display: grid; grid-template-columns: 1fr 1.15fr; gap: 18px; align-items: stretch; }
.zm-vi-compare { position: relative; min-height: 210px; }
.zm-poster {
  position: absolute; inset: 0; border-radius: 16px; padding: 22px 20px;
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
  box-shadow: 0 14px 34px rgba(0,0,0,.12);
}
.zm-poster b { font-size: 19px; letter-spacing: .02em; }
.zm-poster p { font-size: 12.5px; }
.zm-poster-tag {
  position: absolute; top: 12px; right: 12px;
  font-size: 10.5px; font-weight: 700; border-radius: 6px; padding: 3px 9px;
}
.zm-poster-before { background: #ececef; color: #6a6a6c; border: 1px solid rgba(0,0,0,.08); }
.zm-poster-before .zm-poster-tag { background: rgba(0,0,0,.08); color: rgba(0,0,0,.5); }
.zm-poster-after {
  background: linear-gradient(160deg, #1f3a5f 0%, #2c4f7c 60%, #3a6ea5 100%);
  color: #f2ead8;
  clip-path: inset(0 100% 0 0 round 16px);
}
.zm-poster-after b { color: #c8a45d; }
.zm-poster-after .zm-poster-tag { background: #c8a45d; color: #1f3a5f; }
/* 同一张海报按品牌风格重渲染：对比扫过循环 */
.st-steps:not(.st-static) .st-comp.active .zm-poster-after {
  animation: zm-wipe 6s cubic-bezier(.6,.05,.3,.95) 1.2s infinite;
}
@keyframes zm-wipe {
  0% { clip-path: inset(0 100% 0 0 round 16px); }
  22% { clip-path: inset(0 0 0 0 round 16px); }
  72% { clip-path: inset(0 0 0 0 round 16px); }
  92%, 100% { clip-path: inset(0 100% 0 0 round 16px); }
}

.zm-vi-tenants { display: flex; flex-direction: column; gap: 9px; }
.zm-tenant {
  background: #fff; border: 1px solid rgba(0,0,0,.08); border-left: 3px solid var(--tc);
  border-radius: 11px; padding: 8px 13px; box-shadow: 0 6px 16px rgba(0,0,0,.05);
}
.zm-tenant b { font-size: 13px; color: var(--tc); }
.zm-tenant span { display: block; font-size: 10.5px; color: rgba(0,0,0,.44); margin-top: 1px; }
.zm-vi-lock {
  font-size: 11.5px; font-weight: 600; color: rgba(0,0,0,.55); text-align: center;
  background: rgba(0,0,0,.045); border-radius: 980px; padding: 7px 10px;
}

/* ---------- 移动端退化（≤900px，.page-steps 通用规则已把组件插回条目后） ---------- */
@media (max-width: 900px) {
  .zm-pipe { height: 300px; }
  .zm-fcard { display: none; } /* 移动端不跑传送带，静态三段即可读 */
  .zm-track { display: none; }
  .zm-r-grid { grid-template-columns: 1fr; }
  .zm-news-dup { display: none; }
  .zm-l2 { flex-direction: column; align-items: flex-start; gap: 16px; padding-bottom: 0; }
  .zm-l2-cap { position: static; transform: none; }
  .zm-fest-row { flex-wrap: wrap; }
  .zm-fest-card { flex: 1 1 44%; }
  .zm-fest-line { display: none; }
  .zm-fest-preview { flex-direction: column; }
  .zm-fest-img { width: 100%; height: 130px; }
  .zm-vi-top { flex-wrap: wrap; }
  .zm-vi-bottom { grid-template-columns: 1fr; }
  .zm-vi-compare { min-height: 190px; }
}