/* ════════════════════════════════════════════════════════════════════════
   PROPAI LANDING v2 — 金黑配色，只服务 #/prop2

   ⚠️ 本文件【只在 propai-shell 的 index.html 里 link】。两份壳的 styles/
      目前是逐字节相同的两份拷贝，任何改动放进已有的 22 个共用样式表都会
      直接出现在 lumiq.asia 上。
   ⚠️ 每一条选择器都以 .plv2 开头，没有一条全局规则。
   ⚠️ 变量一律 --pv- 前缀，避免跟 base.css 已有的 --panel / --muted / --ease
      等撞名 —— 那几个是全局 :root 上的，同名会被继承覆盖。
   ════════════════════════════════════════════════════════════════════════ */

.plv2 {
  /* 🔴 全部指向 base.css :root 里【已经存在】的暖黑 + 金，一个新色值都不发明。
         换色只改这一处 —— 下面几十条规则一条都不用碰。
     ⚠️ base.css 是两份壳共用的，只读不写。这里是引用，不是修改。 */
  --pv-bg: var(--bg-landing);          /* #0a0806 暖近黑 */
  --pv-surface: var(--panel);          /* #0d0b09 面板 */
  /* 抬起来的次级面（tab / 胶囊 / 步骤 / 气泡底）。base.css 没有第二层面色，
     用「tinted fills」这一档金色薄雾叠在 panel 上，效果等价且不发明色值。 */
  --pv-surface-2: var(--gold-wash);    /* rgba(201,160,99,.06) */
  --pv-border: var(--gold-edge);       /* rgba(201,160,99,.18) 安静分隔线 */
  --pv-border-lit: var(--gold-live);   /* rgba(201,160,99,.48) hover / 激活边 */
  --pv-accent: var(--gold);            /* #c9a063 */
  /* 图标底、徽章底这类实心填充。金比原来的绿暗得多，取 .18 那一档才有跟
     原来 .14 绿相当的存在感；.06 的 gold-wash 在近黑上基本看不见。 */
  --pv-accent-dim: var(--gold-edge);
  --pv-accent-glow: var(--gold-wash);  /* 角落辉光 */
  /* 金底上的深色字。原来写死的 var(--pv-on-accent) 是【偏绿】的黑，配金会发脏。 */
  --pv-on-accent: var(--ink);          /* #0a0a0a，跟 --gold 浏览器实测对比度 8.19:1 */
  --pv-text: var(--cream);             /* #f7f2e9 */
  --pv-muted: var(--muted);            /* rgba(255,255,255,.68) 次级文字 */
  /* ⚠️ base.css 【没有】三级文字色 —— 全站只到 --muted 为止。这里是唯一一处
        base.css 取不到的，用 --cream 降透明度得到，没有引入新色相。 */
  --pv-faint: rgba(247, 242, 233, 0.4);
  --pv-r: 16px;
  --pv-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  min-height: 100vh;
  padding: 0 0 64px;
  background: var(--pv-bg);
  color: var(--pv-text);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  /* ⚠️ 兜住一切横向溢出。手机上任何一个子元素超宽都会让整页能左右拖。 */
  overflow-x: hidden;
}

.plv2 *,
.plv2 *::before,
.plv2 *::after { box-sizing: border-box; }

.plv2 a { color: inherit; text-decoration: none; }
/* 🔴 上面这条的特指度是 (0,1,1)，比 .plv2__cta / .plv2__btnGreen 自己的 (0,1,0)
   高 —— 这两个都是 <a>，它们规则里写的深色字一直被 color:inherit 压掉，渲染
   成【奶白字配实心底】。绿底时代就是这样（那时对比度 1.32:1），换成金底之后
   量出来 2.17:1，正文级字号远低于 4.5:1，是真的读不清了。
   ⚠️ 只提特指度拿回本来就该生效的颜色，不改任何布局/字号/圆角。
   ⚠️ 不动 .plv2 a 本身 —— 它是给卡片整块可点用的，改了会波及一片。 */
.plv2 a.plv2__cta,
.plv2 a.plv2__btnGreen { color: var(--pv-on-accent); }
.plv2 i, .plv2 em { font-style: normal; }

/* 卡片通用：深面 + 细边 + 左上角一点绿辉光，照设计稿的处理 */
.plv2__card,
.plv2__panel,
.plv2__tool,
.plv2__feat,
.plv2__bar,
.plv2__menu {
  position: relative;
  background: var(--pv-surface);
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-r);
  overflow: hidden;
}
.plv2__panel::before,
.plv2__tool::before,
.plv2__feat::before {
  content: '';
  position: absolute;
  top: -60px; left: -60px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, var(--pv-accent-glow), transparent 70%);
  pointer-events: none;
}

/* ── 顶栏 ──────────────────────────────────────────────────────────── */
.plv2__nav {
  display: flex; align-items: center; gap: 28px;
  max-width: 1180px; margin: 0 auto; padding: 22px 24px;
}
.plv2__logo { display: inline-flex; align-items: center; gap: 9px; }
.plv2__logoMark {
  display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: 8px; background: var(--pv-accent); color: var(--pv-on-accent);
  font-weight: 700; font-size: 15px;
}
.plv2__logoWord { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }

.plv2__navLinks { display: flex; align-items: center; gap: 6px; margin-left: 18px; }
.plv2__navLink {
  padding: 8px 13px; border-radius: 9px; font-size: 14px; color: var(--pv-muted);
  transition: color var(--pv-ease) 200ms, background var(--pv-ease) 200ms;
}
.plv2__navLink:hover { color: var(--pv-text); background: rgba(255, 255, 255, 0.04); }
.plv2__navBtn {
  display: inline-flex; align-items: center; gap: 5px;
  border: 0; background: none; cursor: pointer; font: inherit; font-size: 14px;
}
.plv2__navBtn .icon { width: 13px; transition: transform var(--pv-ease) 200ms; }
.plv2__navBtn.is-on { color: var(--pv-text); }
.plv2__navBtn.is-on .icon { transform: rotate(180deg); }

.plv2__menuWrap { position: relative; }
.plv2__menu {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 40;
  width: 340px; padding: 8px; overflow: auto; max-height: 70vh;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
.plv2__menuItem {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 9px 10px; border-radius: 10px;
  transition: background var(--pv-ease) 180ms;
}
.plv2__menuItem:hover { background: var(--gold-wash); }
.plv2__menuIcon {
  display: grid; place-items: center; flex: 0 0 30px; height: 30px;
  border-radius: 8px; background: var(--pv-accent-dim); color: var(--pv-accent);
}
.plv2__menuIcon .icon { width: 15px; }
.plv2__menuItem b { display: block; font-size: 13.5px; font-weight: 600; }
.plv2__menuItem i { display: block; margin-top: 2px; font-size: 12px; color: var(--pv-faint); line-height: 1.45; }

.plv2__navRight { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.plv2__login { font-size: 14px; color: var(--pv-muted); }
.plv2__login:hover { color: var(--pv-text); }
.plv2__cta {
  padding: 9px 18px; border-radius: 999px;
  background: var(--pv-accent); color: var(--pv-on-accent);
  font-size: 14px; font-weight: 600; white-space: nowrap;
  transition: filter var(--pv-ease) 200ms;
}
.plv2__cta:hover { filter: brightness(1.1); }

/* ── Hero ──────────────────────────────────────────────────────────── */
.plv2__hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 20px; max-width: 1180px; margin: 8px auto 0; padding: 0 24px;
}
.plv2__heroText {
  padding: 42px 38px;
  border: 1px solid var(--pv-border); border-radius: var(--pv-r);
  background:
    radial-gradient(120% 90% at 0% 100%, var(--gold-wash), transparent 60%),
    var(--pv-surface);
}
.plv2__eyebrow {
  display: inline-flex; align-items: center; gap: 7px; margin: 0;
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--pv-border-lit); background: var(--pv-accent-dim);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; color: var(--pv-accent);
}
.plv2__eyebrow .icon { width: 13px; }
.plv2__eyebrow--c { display: inline-flex; }

.plv2__h1 {
  margin: 22px 0 0; font-size: 58px; line-height: 1.02;
  font-weight: 700; letter-spacing: -0.03em;
}
/* 🔴 高亮词【不用 --pv-accent】。这半句的活儿是从周围的奶白里跳出来：
   原来的绿相对亮度 .659，旁边的字 .855 —— 只差 1.28 倍，两半句一样重，
   靠色相区分。换成 --gold(.419) 之后差 1.97 倍，高亮词反而比正常字暗一半，
   变成了「压下去」而不是「跳出来」。--gold-bright(.602) 差 1.42 倍，跟绿的
   关系最接近。⚠️ 仍然是 base.css 里的现成值，没有发明新色。 */
.plv2__h1 em { color: var(--gold-bright); }
.plv2__lede { margin: 18px 0 0; max-width: 30em; font-size: 15.5px; line-height: 1.6; color: var(--pv-muted); }

.plv2__heroBtns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.plv2__btnGreen {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px; border-radius: 10px;
  background: var(--pv-accent); color: var(--pv-on-accent); font-size: 14.5px; font-weight: 600;
  transition: filter var(--pv-ease) 200ms;
}
.plv2__btnGreen:hover { filter: brightness(1.1); }
.plv2__btnGreen .icon { width: 15px; }
.plv2__btnGreen--lg { padding: 15px 28px; font-size: 15.5px; }
.plv2__btnGhost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px; border-radius: 10px;
  border: 1px solid var(--pv-border-lit); color: var(--pv-text);
  font-size: 14.5px; font-weight: 500;
  transition: background var(--pv-ease) 200ms;
}
.plv2__btnGhost:hover { background: var(--gold-wash); }
.plv2__btnGhost .icon { width: 15px; color: var(--pv-accent); }

.plv2__heroFacts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
  margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--pv-border);
}
.plv2__fact { display: flex; gap: 10px; align-items: flex-start; }
.plv2__fact > .icon { width: 17px; flex: 0 0 17px; margin-top: 2px; color: var(--pv-accent); }
.plv2__fact b { display: block; font-size: 13px; font-weight: 600; }
.plv2__fact i { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.45; color: var(--pv-faint); }

/* Hero 右侧演示面板 */
.plv2__panel { padding: 20px; }
.plv2__panelHead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plv2__panelTitle {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 600;
}
.plv2__panelTitle .icon { width: 17px; color: var(--pv-accent); }
.plv2__how {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--pv-border); background: var(--pv-surface-2);
  color: var(--pv-muted); font: inherit; font-size: 12px;
  transition: border-color var(--pv-ease) 200ms, color var(--pv-ease) 200ms;
}
.plv2__how:hover { border-color: var(--pv-border-lit); color: var(--pv-text); }
.plv2__how .icon { width: 12px; }
.plv2__how[aria-expanded='true'] .icon { transform: rotate(180deg); }
.plv2__howBody {
  margin: 14px 0 0; padding: 14px 16px; border-radius: 12px;
  background: var(--pv-surface-2); border: 1px solid var(--pv-border);
  font-size: 13px; line-height: 1.65; color: var(--pv-muted);
}

.plv2__steps { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 9px; }
.plv2__step {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 14px; border-radius: 12px;
  background: var(--pv-surface-2); border: 1px solid var(--pv-border);
}
.plv2__stepNum {
  display: grid; place-items: center; flex: 0 0 24px; height: 24px;
  border-radius: 7px; background: var(--pv-accent-dim); color: var(--pv-accent);
  font-size: 12px; font-weight: 700;
}
.plv2__stepName { display: block; font-size: 13.5px; font-weight: 600; }
.plv2__stepSub { display: block; margin-top: 2px; font-size: 12px; color: var(--pv-faint); }

.plv2__ba { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.plv2__baCell {
  display: grid; place-items: center; gap: 8px; flex: 1 1 0; min-width: 0;
  aspect-ratio: 16 / 10; border-radius: 12px;
  border: 1px solid var(--pv-border); color: var(--pv-faint);
}
/* 纯 CSS 占位。⚠️ 不引任何图片：设计稿里的人像/产品图都是 AI 生成的示意，
   版权不明，而且跟 PropAI 的内容毫无关系。 */
/* ⚠️ .plv2__ba / .plv2__baCell / .plv2__baArrow 这一组是加真实 sample 之前的
   纯 CSS 占位，组件里已经没有任何地方用了（JS 里只有 plv2__badge / plv2__bar*
   这些前缀撞名的）。这轮不删规则（删属于结构改动），只把绿换掉。 */
.plv2__baCell--before { background: linear-gradient(150deg, var(--gold-wash), var(--panel)); }
.plv2__baCell--after {
  background: linear-gradient(150deg, var(--gold-line), var(--panel) 70%);
  border-color: var(--pv-border-lit); color: var(--pv-accent);
}
.plv2__baCell .icon { width: 22px; }
.plv2__baCell i { font-size: 11px; letter-spacing: 0.04em; }
.plv2__baArrow { display: grid; place-items: center; flex: 0 0 30px; height: 30px; border-radius: 50%; background: var(--pv-accent); color: var(--pv-on-accent); }
.plv2__baArrow .icon { width: 15px; }

/* ── 通用 section ──────────────────────────────────────────────────── */
.plv2__sec { max-width: 1180px; margin: 20px auto 0; padding: 44px 24px 0; }
.plv2__h2 { margin: 16px 0 0; font-size: 34px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; }
.plv2__sub { margin: 12px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--pv-muted); }

/* ── 九宫格 ────────────────────────────────────────────────────────── */
.plv2__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px; margin-top: 28px;
}
.plv2__tool {
  display: block; padding: 22px 20px;
  transition: border-color var(--pv-ease) 220ms, transform var(--pv-ease) 220ms;
}
.plv2__tool:hover { border-color: var(--pv-border-lit); transform: translateY(-2px); }
.plv2__toolIcon {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 10px; background: var(--pv-accent-dim); color: var(--pv-accent);
}
.plv2__toolIcon .icon { width: 19px; }
.plv2__toolName {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 15px; font-size: 16.5px; font-weight: 600;
}
.plv2__badge {
  padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--pv-border-lit); background: var(--pv-accent-dim);
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; color: var(--pv-accent);
}
.plv2__toolLine { display: block; margin-top: 7px; font-size: 13px; line-height: 1.55; color: var(--pv-muted); }
.plv2__toolGo {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 16px;
  font-size: 12.5px; font-weight: 600; color: var(--pv-accent);
}
.plv2__toolGo .icon { width: 13px; transition: transform var(--pv-ease) 220ms; }
.plv2__tool:hover .plv2__toolGo .icon { transform: translateX(3px); }

/* ── 四宫格 ────────────────────────────────────────────────────────── */
.plv2__feats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.plv2__feat { display: flex; flex-direction: column; padding: 22px 20px; }
.plv2__featIcon {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 9px; background: var(--pv-accent-dim); color: var(--pv-accent);
}
.plv2__featIcon .icon { width: 17px; }
.plv2__featTitle { margin-top: 14px; font-size: 15.5px; font-weight: 600; }
.plv2__featBody { display: block; margin-top: 7px; font-size: 12.5px; line-height: 1.55; color: var(--pv-muted); }
/* ⚠️ 设计稿这个位置是视频缩略图 + 一个 ▶ 播放按钮。播放按钮去掉了 ——
   没有真 demo 视频，点了没反应的按钮比没有按钮更伤信任。 */
.plv2__featArt {
  display: grid; place-items: center; margin-top: 16px;
  aspect-ratio: 16 / 9; border-radius: 12px;
  border: 1px solid var(--pv-border); color: var(--gold-live);
  background: linear-gradient(150deg, var(--gold-wash), var(--bg-landing) 72%);
}
.plv2__featArt .icon { width: 30px; }
.plv2__featTag {
  align-self: flex-start; margin-top: 12px;
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--pv-border); font-size: 11px; color: var(--pv-faint);
}

/* ── 底部横条 ──────────────────────────────────────────────────────── */
.plv2__bar {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px; padding: 26px 28px;
}
.plv2__barCol { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.plv2__barIcon {
  display: grid; place-items: center; flex: 0 0 36px; height: 36px;
  border-radius: 50%; background: var(--pv-accent-dim); color: var(--pv-accent);
}
.plv2__barIcon .icon { width: 17px; }
.plv2__barCol b { display: block; font-size: 15px; font-weight: 600; }
.plv2__barCol i { display: block; margin-top: 4px; font-size: 12px; line-height: 1.45; color: var(--pv-faint); }

/* ── 结尾 + 页脚 ───────────────────────────────────────────────────── */
.plv2__final {
  max-width: 1180px; margin: 44px auto 0; padding: 52px 24px;
  text-align: center;
}
.plv2__final .plv2__sub { margin-left: auto; margin-right: auto; max-width: 44em; }
.plv2__final .plv2__btnGreen { margin-top: 26px; }
.plv2__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 1180px; margin: 30px auto 0; padding: 24px;
  border-top: 1px solid var(--pv-border);
}
.plv2__footCopy { font-size: 12px; color: var(--pv-faint); }

/* ── 响应式 ────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .plv2__hero { grid-template-columns: minmax(0, 1fr); }
  .plv2__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plv2__feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plv2__bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plv2__h1 { font-size: 46px; }
}

@media (max-width: 640px) {
  .plv2__nav { flex-wrap: wrap; gap: 12px; padding: 16px; }
  .plv2__navLinks { order: 3; width: 100%; margin-left: 0; overflow-x: auto; }
  .plv2__navRight { margin-left: auto; }
  .plv2__menu { width: min(320px, calc(100vw - 32px)); }
  .plv2__hero { padding: 0 16px; }
  .plv2__heroText { padding: 26px 20px; }
  .plv2__h1 { font-size: 34px; }
  .plv2__heroFacts { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .plv2__sec, .plv2__final { padding-left: 16px; padding-right: 16px; }
  .plv2__h2 { font-size: 25px; }
  /* ⚠️ 9 张工具卡在手机上【不能】挤成一列长条 —— 那要滚很久。两列紧凑卡。 */
  .plv2__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .plv2__tool { padding: 15px 13px; }
  .plv2__toolIcon { width: 32px; height: 32px; }
  .plv2__toolName { margin-top: 11px; font-size: 14px; }
  .plv2__toolLine { font-size: 11.5px; }
  .plv2__toolGo { margin-top: 11px; }
  .plv2__feats { grid-template-columns: minmax(0, 1fr); }
  .plv2__bar { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .plv2__foot { flex-direction: column; align-items: flex-start; }
}


/* ════════════════════════════════════════════════════════════════════════
   样本预览 —— Hero 面板和 Interior Vision 工具卡【共用】同一个组件
   （Plv2ToolPreview），这里的规则两处都吃。
   ════════════════════════════════════════════════════════════════════════ */

.plv2__prev {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  /* 🔴 整卡可点，预览层必须让点击穿透。少了这一条，用户点在缩略图或视频上
     没反应 —— 那正是「点了没动静」的按钮，比没有预览更伤。
     副作用：这一层收不到 mouseenter，所以 hover 播放的监听挂在卡片上
     （22-PropLandingV2.js 的 cardEnter / cardLeave）。 */
  pointer-events: none;
}

.plv2__prevIn {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}
.plv2__prevCell {
  position: relative;
  display: block;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--pv-border);
  background: var(--pv-surface-2);
}
.plv2__prevImg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 🔴 音频那格。原图是白底浅灰的 MP3 文件图标 —— 铺满贴在近黑背景上就是一块
   刺眼白斑。所以：不改图，把它缩到 45% 居中放进深色格子里，压一点透明度。
   看起来是「深色卡片里摆了一个文件图标」，不是「一块白方块」。 */
.plv2__prevImg--contain {
  position: absolute;
  inset: 0;
  margin: auto;
  width: auto;
  height: auto;
  max-width: 45%;
  max-height: 45%;
  object-fit: contain;
  opacity: 0.9;
}
.plv2__prevLabel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 4px 6px 3px;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--pv-text);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.78));
}

.plv2__prevArrow {
  display: grid;
  place-items: center;
  flex: 0 0 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--pv-accent);
  color: var(--pv-on-accent);
}
.plv2__prevArrow .icon { width: 13px; }

/* 成片是竖屏 9:16。给宽度、让高度自然长出来 —— 不拉伸不裁人。
   --pv-out-w 是唯一的调节点，Hero 面板下面单独调大。 */
.plv2__prevOut {
  display: block;
  flex: 0 0 auto;
  width: var(--pv-out-w, 84px);
  aspect-ratio: 9 / 16;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--pv-border-lit);
  background: #000;
}
.plv2__prevVid {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hero 面板更宽，样本给大一点 */
.plv2__panel .plv2__prev { --pv-out-w: 118px; }

/* 面板顶部的样本 tab —— 只有 PLV2_SAMPLES 超过一条时才渲染 */
.plv2__tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.plv2__tab {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--pv-border);
  background: var(--pv-surface-2);
  color: var(--pv-muted);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color var(--pv-ease) 200ms, color var(--pv-ease) 200ms;
}
.plv2__tab:hover { border-color: var(--pv-border-lit); color: var(--pv-text); }
.plv2__tab.is-on {
  border-color: transparent;
  background: var(--pv-accent);
  color: var(--pv-on-accent);
  font-weight: 600;
}

/* 工具卡底部的胶囊标签，照设计稿 Character Swap 卡的处理 */
.plv2__chip {
  align-self: flex-start;
  margin-top: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--pv-border);
  background: var(--pv-surface-2);
  font-size: 11px;
  color: var(--pv-faint);
}

/* 🔴 带预览的那张卡会比其余 8 张高 —— 这是对的（设计稿四宫格也不等高）。
   align-items: start 让每张卡按自己的内容高度收，而不是被同一行里最高的
   那张拉长。默认的 stretch 会把同排另外两张撑出一大片空白。
   ⚠️ 这一条改的是 grid 容器，其余 8 张卡的 JSX 一个字节没动。 */
/* 🔴 改回 stretch：三张带预览的卡现在都在第一排，横屏那张的预览比竖屏矮，
   不拉齐第一排就是 379/379/300 的参差。stretch 只在【本行内】拉齐，
   第二三排全是 180 的卡不受任何影响。
   （之前设 start 是因为那时第一排只有两张带预览，剩下那张会被撑出一大片
     空白。现在三张都有预览，那个理由不成立了。） */
.plv2__grid { align-items: stretch; }
.plv2__tool--demo { display: flex; flex-direction: column; }
/* margin-top:auto 把「Open →」压到卡底：被拉高的那张多出来的空间落在它上面，
   而不是夹在预览和箭头之间。⚠️ 对本来就最高的两张，auto 解析成 0，
   padding-top 补回原来的 14px —— 它们的高度一个像素都没变。 */
.plv2__tool--demo .plv2__toolGo { margin-top: auto; padding-top: 14px; }

@media (max-width: 640px) {
  /* 手机上工具网格是两列，一张卡只有约 166px —— 三缩略图 + 箭头 + 竖屏视频
     挤在里面全都看不清。让带预览的那张横跨两列，拿满宽再显示。 */
  .plv2__tool--demo { grid-column: 1 / -1; }
  .plv2__prev { --pv-out-w: 96px; }
  .plv2__panel .plv2__prev { --pv-out-w: 104px; }
  .plv2__prevLabel { font-size: 9px; }
}


/* ── kind:'text' 的输入格（Smart Edit 那句指令）──────────────────────
   ⚠️ 跟图片格、视频格【同一个 .plv2__prevCell】，所以 aspect-ratio 和圆角
      都一致，三种 kind 排在一行是等高的。这里只加气泡本身的样子。 */
.plv2__prevCell--text {
  display: flex;
  align-items: center;
  padding: 10px 10px 18px;
  border-left: 2px solid var(--pv-accent);
  background: linear-gradient(140deg, var(--gold-wash), var(--pv-surface-2) 70%);
}
.plv2__prevQuote {
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--pv-text);
  /* 格子是正方形，长句子必须收住 —— 溢出会把标签压出去。 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}

/* 输入位上的视频跟图片同样铺满（.plv2__prevImg 已经是 100%/cover），
   这里只补一条：<video> 默认是 inline，会带一条基线间隙。 */
.plv2__prevCell video.plv2__prevImg { display: block; }

/* 输入个数从 3 变成 2 也要等宽。auto-flow:column + auto-columns 对 N 个
   子元素给 N 等分列 —— 3 个的时候跟原来的 repeat(3,1fr) 逐像素相同，
   Interior Vision 不受影响。 */
.plv2__prevIn {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}

@media (max-width: 640px) {
  .plv2__prevQuote { font-size: 9.5px; -webkit-line-clamp: 4; }
}


/* ---- 有 video 型输入时的排布 --------------------------------------
   根因：输入格走 .plv2__prevCell（aspect-ratio:1，正方形，宽度由等分列决定），
   输出格走 .plv2__prevOut（固定宽 + 9:16）—— 两个根本不是同一个盒模型。
   同源同比例的 before / after 因此渲染成了 93x93 和 82x147。

   ⚠️ 只在带 video 输入的那一排生效。Interior Vision 是【3 张方图 + 1 个竖屏
      成片】，那个不对称是对的，不能动 —— 所以走修饰类，不改全局规则。 */
.plv2__prevIn--media {
  display: flex;
  align-items: stretch;
  gap: 6px;
}
/* video 型输入 = 跟 .plv2__prevOut 逐条相同的盒子：同宽、同比例。 */
.plv2__prevIn--media .plv2__prevCell--video {
  flex: 0 0 var(--pv-out-w, 84px);
  width: var(--pv-out-w, 84px);
  aspect-ratio: 9 / 16;
}
/* 指令气泡撑满同一行高，不比视频高也不比它矮。 */
.plv2__prevIn--media .plv2__prevCell--text {
  flex: 1 1 auto;
  min-width: 0;
  aspect-ratio: auto;
}


/* ── 滚到就播：新增的两块样式 ───────────────────────────────────────
   ⚠️ 只加新类，没有改任何已有规则的尺寸/间距/圆角。 */

/* 🔴 减少动画模式下的播放按钮。
   ⚠️ .plv2__prev 是 pointer-events:none（整卡可点），按钮必须自己把
      pointer-events 收回来，否则点不动 —— 那就又变成「点了没反应的按钮」。 */
.plv2__prevOut,
.plv2__featArt { position: relative; }
.plv2__playBtn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--pv-accent);
  color: var(--pv-on-accent);
  cursor: pointer;
  pointer-events: auto;
  z-index: 2;
}
.plv2__playBtn .icon { width: 16px; }
.plv2__playBtn:focus-visible { outline: 2px solid var(--gold-hot); outline-offset: 2px; }
/* 图标集里有 play 没有 pause，两根竖条用边框画。 */
.plv2__pauseGlyph {
  width: 12px;
  height: 12px;
  border-left: 4px solid currentColor;
  border-right: 4px solid currentColor;
}

/* 四宫格预览位填素材后的内部排布。
   ⚠️ 外框（16/9、12px 圆角、1px 边、margin-top:16px）全部沿用 .plv2__featArt，
      这里【只换内部】，所以四张卡的高度关系一个像素都没变。 */
.plv2__featArt--media {
  display: flex;
  gap: 2px;
  padding: 0;
  overflow: hidden;
}
.plv2__featVid {
  display: block;
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ── 🔴 16:9 横屏成片（Land Vision）─────────────────────────────────────
   竖屏那两条样本走的还是上面的 flex：输入格 aspect-ratio:1 三列 + 固定宽的
   9:16 输出格。那一套【一个字节没动】。

   横屏整排换成 grid：
       [ before ][ render ][ → ][  成片  ]
         1fr        1fr      26px   1fr
   三个媒体格全是 1fr + aspect-ratio:16/9 —— 宽相等，高就天然相等。
   「输出高度跟输入格那排对齐」是算出来的，不是凑出来的。
   ⚠️ 输出格宽度从竖屏的固定 84/118px 变成整排的约 1/4，比竖屏宽得多 ——
      这正是横屏该占的水平空间，否则那一排会显得空。
   ⚠️ .plv2__prevIn 用 display:contents 把两个输入格「抬」进外层 grid，
      不然它们会被困在自己那个 3 列子网格里，跟输出格对不齐。 */
.plv2__prev--wide {
  display: grid;
  grid-template-columns: 1fr 1fr 26px 1fr;
  align-items: center;
}
.plv2__prev--wide .plv2__prevIn { display: contents; }
.plv2__prevCell--wide { aspect-ratio: 16 / 9; }
.plv2__prevOut--wide {
  width: auto;
  aspect-ratio: 16 / 9;
}

@media (max-width: 640px) {
  /* 手机上一排四格每格只剩 ~80px，16:9 高度不到 45px，什么都看不清。
     拆成两行：两个输入格在上，箭头转 90 度居中，成片在下面拿满宽。 */
  .plv2__prev--wide {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .plv2__prev--wide .plv2__prevArrow {
    grid-column: 1 / -1;
    justify-self: center;
    transform: rotate(90deg);
  }
  .plv2__prev--wide .plv2__prevOut--wide { grid-column: 1 / -1; }
}


/* 方图输入 + 横屏输出（Agent Studio）。
   Land Vision 是 16:9 输入 + 16:9 输出，四格等宽刚好。这里输入是方图 ——
   等宽的话方图 118x118、成品 118x66，产出反而是整排最小的那个，主次就反了。
   给成品双倍列宽，它仍然是这一排里最大的。
   ⚠️ 只在 .plv2__prev--wide.plv2__prev--sqIn 同时命中时生效，
      Land Vision（有 --wide 没有 --sqIn）一个像素不受影响。 */
/* 🔴 必须关在 min-width 里。这条的特指度 (0,2,0) 比上面手机块里的
   .plv2__prev--wide (0,1,0) 高，不加断点门槛的话它会【压过】手机的两行
   布局：输入格被挤进四列里的前两列，只剩 63x63（Land Vision 同样位置是
   147x147），后面两列还空着。手机上仍然走两行那套。 */
@media (min-width: 641px) {
  .plv2__prev--wide.plv2__prev--sqIn {
    grid-template-columns: 1fr 1fr 26px 2fr;
  }
}


/* ── 新品牌标识（2026-08-03 上线）─────────────────────────────────────
   ⚠️ 旧的 .plv2__logoMark / .plv2__logoWord 规则【保留不删】—— 万一回滚，
      组件改回去样式立刻还在。它们现在没有元素命中，不产生任何渲染。
   ⚠️ 高度定死、宽度 auto：桌面是 847x288 的横版，手机是 512x512 的方形，
      同一条规则两边都对。 */
.plv2__logoImg {
  display: block;
  height: 32px;
  width: auto;
}
@media (max-width: 640px) {
  .plv2__logoImg { height: 30px; }
}


/* ── Tools ▾ 三列分类下拉 ──────────────────────────────────────────────
   ⚠️ 全部挂在 .plv2__menu--wide 修饰类上，原来的 .plv2__menu 规则一条没改。 */

.plv2__menuHead {
  margin: 8px 0 2px;
  padding: 0 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pv-faint);
  /* ⚠️ 纯标签：不可点、不可选中光标，免得被当成按钮。 */
  cursor: default;
  user-select: none;
}

/* Full Access 徽章跟在名字后面，复用工具卡那一个，不新写样式。 */
.plv2__menuItem .plv2__badge { margin-left: 6px; vertical-align: 1px; }

.plv2__menuAll {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 8px;
  padding: 11px 10px 3px;
  border-top: 1px solid var(--pv-border);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--pv-accent);
}
.plv2__menuAll .icon { width: 13px; }
.plv2__menuAll:hover { filter: brightness(1.15); }

@media (min-width: 641px) {
  /* 三列。⚠️ min() 兜住窄桌面：.plv2 根容器是 overflow-x:hidden，菜单超出
     视口右边会被直接裁掉，不是出现滚动条。 */
  .plv2__menu--wide { width: min(700px, calc(100vw - 48px)); }
  .plv2__menu--wide .plv2__menuCols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px 6px;
    align-items: start;
  }
  .plv2__menuCol { min-width: 0; }
}

@media (max-width: 640px) {
  /* 🔴 手机上不做三列 —— 375px 分三份每列只有 100px 出头，图标 30px + 名字
     + 一行描述根本排不下。改成单列，但【保留分类小标题】做分组，用户扫起来
     还是三段而不是九项一条龙。
     没做全屏抽屉：那是另一套交互（关闭按钮 / body 滚动锁 / 焦点陷阱），
     这一轮说了不改布局，而且单列已经能一屏内看完。 */
  .plv2__menu--wide {
    width: min(340px, calc(100vw - 32px));
  }
  .plv2__menu--wide .plv2__menuCols { display: block; }

  /* 🔴 修一个既有 bug：.plv2__navLinks 原来带 overflow-x:auto，而 overflow-x
     非 visible 时 overflow-y 会计算成 auto —— 这个 34px 高的容器把 542px 的
     绝对定位下拉【整个裁掉】，手机上九项一个都点不到（elementFromPoint 命中
     的是底下的 Hero）。
     ⚠️ 那条 overflow 本来是给横向滚动用的，但顶栏删掉重复的 Tools 之后只剩
        Tools ▾ 和 Pricing 两项，343px 里绰绰有余（实测 scrollWidth ==
        clientWidth），不需要滚动。 */
  .plv2__navLinks { overflow: visible; }
}