/* ============================================================================
 * preview.css — 内容工作台 v2 · 右栏「7 平台真实预览」样式
 * 依据: docs/design/workbench-v2/20-preview-claude.md §2 舞台 + §4 七平台
 *
 * 隔离原则:
 *  - 类名统一 pv- 前缀 + 平台段 (pv-xhs- / pv-wb- / pv-dy- / pv-li- / pv-fb- / pv-ig- / pv-x-)。
 *  - 平台取景框 (.pv-frame 及其内部) 完全不引用 app.css 的 --ink/--surface/--brand 等
 *    浅主题 token，每个平台自带一套局部 CSS 变量作用域，与 MIA 粉色浅主题解耦。
 *  - 仅「预览舞台外壳」(.pv-stage/.pv-tabs) 属于 app 中性容器，允许引用 app.css token。
 * ==========================================================================*/

/* ===== 预览舞台（外壳中性，属于 app，可用 app.css token）===================== */
/* §4 清晰化：取景框尺寸克制居中、留白舒适、tab 与舞台层级分明，不过度堆砌 */
.pv-stage{ --pv-frame-w:340px; display:flex; flex-direction:column; gap:16px; align-items:center; }
.pv-tabs{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; width:100%; }
.pv-tab{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px;
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-dim);
  font-size:12px; font-weight:600; cursor:pointer; transition:.15s; }
.pv-tab:hover{ border-color:var(--brand); }
.pv-tab.active{ border-color:var(--brand); background:var(--brand-soft); color:var(--brand-strong); }
.pv-tab .pv-tab-ico{ width:14px; height:14px; border-radius:4px; flex-shrink:0; }
/* 手机取景舞台：中性背板 + 舒适内边距，让手机卡居中悬浮、四周留白从容。
   背板刻意去饱和（不带品牌色晕染），使各平台卡自身的配色成为唯一色彩来源。 */
.pv-viewport{ display:flex; justify-content:center; width:100%; padding:24px 14px;
  background:var(--surface-2, #f4f5f8);
  border-radius:20px; }
.pv-empty{ color:var(--ink-faint); font-size:13px; padding:56px 0; text-align:center; letter-spacing:.2px; }

/* ===== 取景框（手机取景比例，居中，浅灰背板衬托各平台卡）====================== */
/* 从此以下的一切: 平台自带作用域，禁止继承 app.css 主题 token。 */
/* 取景框阴影统一克制（Rams 不张扬）：一层柔和落影 + 一道极细边界，
   多平台卡切换时不产生视觉噪音，让「内容」而非「外框」成为焦点。 */
/* 兜底默认 320px：无 .pv-stage 祖先的宿主（如发布中心单内容视图）里，
   手机取景框仍受约束，不会撑满整卡导致图片过大。 */
.pv-frame{ width:var(--pv-frame-w, 320px); max-width:100%; border-radius:20px; overflow:hidden;
  box-shadow:0 8px 28px rgba(20,22,30,.10), 0 0 0 1px rgba(20,22,30,.05); position:relative;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Roboto,sans-serif;
  line-height:1.45; text-align:left; color:#333; background:#fff; }

/* ---- 通用媒体网格骨架（各平台覆盖 gap/圆角/比例）------------------------- */
.pv-media{ display:grid; gap:2px; width:100%; }
.pv-media .pv-cell{ position:relative; overflow:hidden; background:#e9e9ec; }
.pv-media .pv-cell img{ width:100%; height:100%; object-fit:cover; display:block; }
.pv-media.n1{ grid-template-columns:1fr; }
.pv-media.n2{ grid-template-columns:1fr 1fr; }
.pv-media.n3,.pv-media.n5,.pv-media.n6,.pv-media.n7,.pv-media.n8,.pv-media.n9{ grid-template-columns:repeat(3,1fr); }
.pv-media.n4{ grid-template-columns:1fr 1fr; }

/* 缺图占位块 —— 克制、有意为之的「示意图」，不像报错。
   中性底 + 一枚极简描边图片图标（居中）。缺图/缺视频/mock 共用同一套视觉语言。 */
.pv-cell.ph{ background:#eceef2; display:flex; align-items:center; justify-content:center; }
.pv-cell.ph::after{ content:""; width:32%; max-width:52px; aspect-ratio:5/4; opacity:.85;
  background:no-repeat center/contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 32' fill='none' stroke='%23a8adba' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='36' height='28' rx='4'/%3E%3Ccircle cx='13' cy='12' r='4' fill='%23a8adba' stroke='none'/%3E%3Cpath d='M2 24 L14 14 L22 21 L28 16 L38 25'/%3E%3C/svg%3E"); }

/* 视频角标（时长）与播放键 */
.pv-vbadge{ position:absolute; right:8px; bottom:8px; background:rgba(0,0,0,.7); color:#fff;
  font-size:11px; padding:2px 6px; border-radius:4px; font-variant-numeric:tabular-nums; z-index:2; }
.pv-play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:1; pointer-events:none; }
.pv-play svg{ width:54px; height:54px; filter:drop-shadow(0 2px 6px rgba(0,0,0,.4)); }

/* mosaic「+N」蒙层（FB/LinkedIn/X 用）*/
.pv-more-n{ position:absolute; inset:0; background:rgba(0,0,0,.45);
  color:#fff; font-size:26px; font-weight:700; display:flex; align-items:center; justify-content:center; z-index:2; }

/* 通用文本高亮（#话题 / @提及）——各平台用局部变量 --pv-accent 覆盖颜色 */
.pv-tag,.pv-at{ color:var(--pv-accent,#3897f0); }
.pv-more{ color:var(--pv-more,#8a8d91); cursor:pointer; }

/* 占位头像（无 avatarUrl 时）*/
.pv-avatar{ width:40px; height:40px; border-radius:50%; flex-shrink:0; object-fit:cover;
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:15px; }
.pv-avatar.ph{ background:linear-gradient(135deg,#8a8fff,#c86dd7); }

/* ============================================================================
 * §4.1 小红书 XHS —— 白底 · 竖图 3:4 横滑轮播 · 底部固定互动条
 * ==========================================================================*/
.pv-xhs{ background:#fff; color:#333; --pv-accent:#3b6fd4; --pv-more:#7a8599; font-size:14px;
  font-family:"PingFang SC","Microsoft YaHei",-apple-system,sans-serif; }
.pv-xhs-carousel{ position:relative; }
.pv-xhs-track{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.pv-xhs-track::-webkit-scrollbar{ display:none; }
.pv-xhs-track .pv-cell{ flex:0 0 100%; aspect-ratio:3/4; scroll-snap-align:start; background:#e9e9ec; overflow:hidden; position:relative; }
.pv-xhs-track .pv-cell img{ width:100%; height:100%; object-fit:cover; display:block; }
.pv-xhs-count{ position:absolute; top:10px; right:10px; background:rgba(0,0,0,.4); color:#fff;
  font-size:12px; padding:2px 8px; border-radius:10px; z-index:2; }
.pv-xhs-dots{ position:absolute; bottom:10px; left:0; right:0; display:flex; gap:5px; justify-content:center; z-index:2; }
.pv-xhs-dots i{ width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.5); }
.pv-xhs-dots i.on{ background:#fff; }
.pv-xhs-body{ padding:12px 14px 4px; }
.pv-xhs-title{ font-size:16px; font-weight:600; color:#222; margin-bottom:6px; }
.pv-xhs-text{ color:#333; word-break:break-word; overflow-wrap:anywhere; }
.pv-xhs-time{ color:#b3b3b3; font-size:12px; margin-top:10px; }
.pv-xhs-author{ display:flex; align-items:center; gap:8px; padding:10px 14px; border-top:1px solid #f2f2f2; }
.pv-xhs-name{ font-weight:500; flex:1; }
.pv-xhs-follow{ border:1px solid #ff2e4d; color:#ff2e4d; background:transparent; border-radius:14px; padding:3px 14px; font-size:13px; cursor:pointer; }
.pv-xhs-comments{ padding:8px 14px; border-top:8px solid #f7f7f7; }
.pv-xhs-cmt-h{ color:#999; font-size:13px; margin:6px 0 10px; }
.pv-xhs-cmt{ display:flex; gap:8px; margin-bottom:12px; }
.pv-xhs-cmt-b{ min-width:0; }
.pv-xhs-cmt-b b{ font-size:13px; color:#8a8d91; font-weight:500; }
.pv-xhs-cmt-b em{ font-style:normal; background:#f2f2f2; color:#999; font-size:11px; padding:1px 5px; border-radius:3px; margin-left:4px; }
.pv-xhs-cmt-b p{ margin:3px 0; color:#333; word-break:break-word; overflow-wrap:anywhere; }
.pv-xhs-cmt-meta{ color:#b3b3b3; font-size:12px; }
.pv-xhs-cmt-meta i{ font-style:normal; }
.pv-xhs-bar{ display:flex; gap:20px; padding:12px 14px; border-top:1px solid #f2f2f2; color:#555; font-size:14px; align-items:center; }
.pv-xhs-bar .pv-ic{ display:inline-flex; align-items:center; gap:5px; }
.pv-xhs-bar svg{ width:20px; height:20px; }

/* ============================================================================
 * §4.2 微博 WEIBO —— 浅色 · 九宫格 · 转评赞三联
 * ==========================================================================*/
.pv-wb{ background:#fff; color:#333; --pv-accent:#eb7350; --pv-more:#eb7350; font-size:14px;
  font-family:"PingFang SC","Microsoft YaHei",-apple-system,sans-serif; }
.pv-wb-head{ display:flex; align-items:center; gap:10px; padding:12px 14px 8px; }
.pv-wb-meta{ flex:1; display:flex; flex-direction:column; min-width:0; }
.pv-wb-name{ color:#333; font-weight:500; display:flex; align-items:center; gap:4px; }
.pv-wb-v{ width:14px; height:14px; color:#faa500; flex-shrink:0; }        /* 黄V */
.pv-wb-time{ color:#ff8140; font-size:12px; }              /* 微博时间橙色 */
.pv-wb-follow{ border:0; background:#ff8140; color:#fff; border-radius:14px; padding:4px 12px; font-size:13px; cursor:pointer; flex-shrink:0; }
.pv-wb-text{ padding:0 14px 10px; color:#333; word-break:break-word; overflow-wrap:anywhere; }
.pv-wb-grid{ padding:0 14px; gap:3px; }
.pv-wb-grid .pv-cell{ aspect-ratio:1; border-radius:4px; }
.pv-wb-grid.n1{ grid-template-columns:1fr; }
.pv-wb-grid.n1 .pv-cell{ aspect-ratio:4/3; max-width:70%; } /* 单图不铺满，微博特征 */
.pv-wb-bar{ display:flex; padding:10px 14px; margin-top:10px; border-top:1px solid #f2f2f2; color:#666; font-size:13px; }
.pv-wb-bar span{ flex:1; text-align:center; display:inline-flex; align-items:center; justify-content:center; gap:5px; }
.pv-wb-bar svg{ width:16px; height:16px; }
.pv-wb-comments{ background:#f7f8fa; padding:8px 14px; }
.pv-wb-cmt{ display:flex; gap:8px; padding:8px 0; border-bottom:1px solid #ededed; }
.pv-wb-cmt:last-child{ border-bottom:0; }
.pv-wb-cmt-b{ min-width:0; }
.pv-wb-cmt b{ color:#eb7350; font-weight:400; }             /* 微博用户名橙色 */
.pv-wb-cmt-b span{ word-break:break-word; overflow-wrap:anywhere; }
.pv-wb-cmt-meta{ color:#a3a3a3; font-size:12px; margin-top:4px; display:flex; gap:12px; }

/* ============================================================================
 * §4.3 抖音 / TikTok —— 深色全屏竖屏 · 右侧竖排互动条 · 底部叠加文案
 * ==========================================================================*/
.pv-dy{ background:#000; color:#fff; --pv-accent:#fe2c55; --pv-more:#ffffffcc; font-size:14px; }
.pv-dy-video{ position:relative; aspect-ratio:9/16; background:#111; overflow:hidden; }
.pv-dy-poster{ width:100%; height:100%; object-fit:cover; display:block; }
/* 缺视频封面：柔和深色渐变示意（非纯黑死块），播放键叠于其上，读作「示例视频」而非报错 */
.pv-dy-poster.ph{ background:linear-gradient(160deg,#20242e,#15171d); }
.pv-dy-actions{ position:absolute; right:8px; bottom:90px; display:flex; flex-direction:column; align-items:center; gap:18px; z-index:3; }
.pv-dy-actions .pv-avatar{ margin-bottom:4px; box-shadow:0 0 0 2px #fff; }
.pv-dy-act{ display:flex; flex-direction:column; align-items:center; font-size:22px; color:#fff; }
.pv-dy-act svg{ width:30px; height:30px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.pv-dy-act b{ font-size:12px; font-weight:600; margin-top:2px; text-shadow:0 1px 2px rgba(0,0,0,.6); }
.pv-dy-caption{ position:absolute; left:12px; right:70px; bottom:16px; text-shadow:0 1px 3px rgba(0,0,0,.6); z-index:3; }
.pv-dy-name{ font-weight:700; margin-bottom:6px; }
.pv-dy-text{ word-break:break-word; overflow-wrap:anywhere; }
.pv-dy .pv-tag{ color:#fff; font-weight:600; }   /* 抖音标签白色加粗 */
/* 纯文字大字报态（无媒体降级）*/
.pv-dy-poster-text{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding:32px; text-align:center; font-size:22px; font-weight:600; line-height:1.5;
  background:linear-gradient(135deg,#20143a,#3a1440); }
/* 图文轮播降级（黑底）*/
.pv-dy-track{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; height:100%; scrollbar-width:none; }
.pv-dy-track::-webkit-scrollbar{ display:none; }
.pv-dy-track .pv-cell{ flex:0 0 100%; height:100%; scroll-snap-align:start; background:#111; }
.pv-dy-comments{ background:#161823; padding:10px 14px; }
.pv-dy-cmt-h{ color:#8a8b91; font-size:13px; margin-bottom:10px; }
.pv-dy-cmt{ display:flex; gap:10px; margin-bottom:14px; }
.pv-dy-cmt .pv-avatar{ width:32px; height:32px; font-size:13px; }
.pv-dy-cmt-b{ min-width:0; }
.pv-dy-cmt b{ color:#8a8b91; font-size:13px; font-weight:400; }
.pv-dy-cmt p{ margin:3px 0; color:#fff; word-break:break-word; overflow-wrap:anywhere; }
.pv-dy-cmt .pv-dy-cmt-meta{ color:#6b6d76; font-size:12px; }

/* ============================================================================
 * §4.4 LinkedIn —— 浅色专业 · 职衔副标题 · 横图信息流
 * ==========================================================================*/
.pv-li{ background:#fff; color:rgba(0,0,0,.9); --pv-accent:#0a66c2; --pv-more:#00000099; font-size:14px; }
.pv-li-head{ display:flex; gap:8px; padding:12px 16px 0; }
.pv-li-meta{ flex:1; display:flex; flex-direction:column; line-height:1.3; min-width:0; }
.pv-li-name{ font-size:14px; font-weight:600; }
.pv-li-sub,.pv-li-time{ color:rgba(0,0,0,.6); font-size:12px; }
.pv-li-follow{ color:#0a66c2; font-weight:600; font-size:14px; flex-shrink:0; cursor:pointer; }
.pv-li-text{ padding:8px 16px 10px; color:rgba(0,0,0,.9); word-break:break-word; overflow-wrap:anywhere; }
.pv-li-grid{ gap:2px; }
.pv-li-grid .pv-cell{ aspect-ratio:1.91/1; border-radius:0; }
.pv-li-grid.n1 .pv-cell{ aspect-ratio:1.91/1; }
.pv-li-stats{ padding:8px 16px; color:rgba(0,0,0,.6); font-size:13px; border-bottom:1px solid #e8e8e8; }
.pv-li-bar{ display:flex; padding:4px 8px; }
.pv-li-bar span{ flex:1; text-align:center; padding:10px 0; color:rgba(0,0,0,.6); font-weight:600; font-size:14px;
  display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.pv-li-bar svg{ width:18px; height:18px; }
.pv-li-comments{ padding:8px 16px 14px; }
.pv-li-cmt{ display:flex; gap:8px; margin-bottom:10px; }
.pv-li-cmt:last-child{ margin-bottom:0; }
.pv-li-cmt-b{ background:#f2f2f2; border-radius:8px; padding:8px 12px; flex:1; min-width:0; }
.pv-li-cmt-b b{ font-size:13px; } .pv-li-cmt-b b span{ color:rgba(0,0,0,.6); font-weight:400; font-size:12px; }
.pv-li-cmt-b p{ margin:4px 0 0; word-break:break-word; overflow-wrap:anywhere; }
.pv-li-cmt-meta{ color:rgba(0,0,0,.6); font-size:12px; padding:4px 0 0 12px; display:flex; gap:10px; }

/* ============================================================================
 * §4.5 Facebook —— 浅色 · 马赛克多图 · 赞/评/转三联
 * ==========================================================================*/
.pv-fb{ background:#fff; color:#050505; --pv-accent:#1877f2; --pv-more:#65676b; font-size:15px; }
.pv-fb-head{ display:flex; align-items:center; gap:8px; padding:12px 16px; }
.pv-fb-meta{ flex:1; display:flex; flex-direction:column; min-width:0; }
.pv-fb-meta b{ font-size:15px; } .pv-fb-meta span{ color:#65676b; font-size:13px; }
.pv-fb-more{ color:#65676b; font-size:20px; line-height:1; }
.pv-fb-text{ padding:0 16px 10px; word-break:break-word; overflow-wrap:anywhere; }
.pv-fb-grid{ gap:2px; }
.pv-fb-grid .pv-cell{ aspect-ratio:1; }
.pv-fb-grid.n1{ grid-template-columns:1fr; }
.pv-fb-grid.n1 .pv-cell{ aspect-ratio:auto; max-height:400px; }              /* 单图原比例 */
.pv-fb-grid.n1 .pv-cell img{ max-height:400px; }
.pv-fb-stats{ display:flex; justify-content:space-between; padding:10px 16px; color:#65676b; font-size:14px; }
.pv-fb-bar{ display:flex; border-top:1px solid #ced0d4; padding:4px 8px; }
.pv-fb-bar span{ flex:1; text-align:center; padding:8px 0; color:#65676b; font-weight:600;
  display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.pv-fb-bar svg{ width:18px; height:18px; }
.pv-fb-comments{ padding:6px 16px 14px; }
.pv-fb-cmt{ display:flex; gap:8px; margin-bottom:10px; flex-direction:column; }
.pv-fb-cmt-row{ display:flex; gap:8px; }
.pv-fb-cmt-b{ background:#f0f2f5; border-radius:16px; padding:8px 12px; min-width:0; }
.pv-fb-cmt-b b{ font-size:13px; } .pv-fb-cmt-b p{ margin:2px 0 0; font-size:14px; word-break:break-word; overflow-wrap:anywhere; }
.pv-fb-cmt-meta{ color:#65676b; font-size:12px; padding:2px 0 0 12px; display:flex; gap:12px; }

/* ============================================================================
 * §4.6 Instagram —— 白底 · 方形/轮播 · 竖排互动条 + caption 折叠
 * ==========================================================================*/
.pv-ig{ background:#fff; color:#262626; --pv-accent:#00376b; --pv-more:#8e8e8e; font-size:14px; }
.pv-ig-head{ display:flex; align-items:center; gap:8px; padding:10px 14px; }
.pv-ig-head .pv-avatar{ width:32px; height:32px; font-size:13px; }
.pv-ig-ring{ box-shadow:0 0 0 2px #fff,0 0 0 4px #d6249f; }  /* IG story 渐变环（简化）*/
.pv-ig-name{ font-size:14px; font-weight:600; }
.pv-ig-fo{ color:#0095f6; font-weight:600; }
.pv-ig-dot{ color:#8e8e8e; }
.pv-ig-more{ color:#262626; margin-left:auto; font-size:18px; line-height:1; }
.pv-ig-media{ position:relative; }
.pv-ig-track{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.pv-ig-track::-webkit-scrollbar{ display:none; }
.pv-ig-track .pv-cell{ flex:0 0 100%; aspect-ratio:1; scroll-snap-align:start; background:#e9e9ec; position:relative; overflow:hidden; }
.pv-ig-track .pv-cell img{ width:100%; height:100%; object-fit:cover; display:block; }
.pv-ig-dots{ position:absolute; bottom:8px; left:0; right:0; display:flex; gap:4px; justify-content:center; z-index:2; }
.pv-ig-dots i{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.6); }
.pv-ig-dots i.on{ background:#0095f6; }
.pv-ig-bar{ display:flex; justify-content:space-between; padding:12px 14px 6px; }
.pv-ig-left{ display:flex; gap:14px; }
.pv-ig-right{ display:flex; align-items:center; }
.pv-ig-bar svg{ width:24px; height:24px; }
.pv-ig-likes{ padding:0 14px 4px; font-weight:600; font-size:14px; }
.pv-ig-caption{ padding:0 14px 4px; word-break:break-word; overflow-wrap:anywhere; }
.pv-ig-caption b{ font-weight:600; }
.pv-ig-comments{ padding:2px 14px; color:#262626; }
.pv-ig-cmt{ padding:2px 0; word-break:break-word; overflow-wrap:anywhere; }
.pv-ig-cmt b{ font-weight:600; margin-right:6px; }
.pv-ig-cmt-like{ float:right; color:#8e8e8e; }
.pv-ig-time{ padding:6px 14px 14px; color:#8e8e8e; font-size:11px; text-transform:uppercase; }

/* ============================================================================
 * §4.7 Twitter / X —— 深色 · 大圆角 2×2 · 底部五图标互动条
 * ==========================================================================*/
.pv-x{ background:#000; color:#e7e9ea; --pv-accent:#1d9bf0; --pv-more:#1d9bf0; font-size:15px; }
.pv-x-head{ display:flex; gap:10px; padding:12px 16px 4px; }
.pv-x-meta{ flex:1; min-width:0; }
.pv-x-meta b{ font-weight:700; }
.pv-x-v{ width:16px; height:16px; color:#1d9bf0; vertical-align:middle; margin-left:2px; }
.pv-x-handle{ color:#71767b; margin-left:4px; }
.pv-x-more{ color:#71767b; font-size:18px; line-height:1; }
.pv-x-text{ padding:0 16px 12px; word-break:break-word; overflow-wrap:anywhere; }
.pv-x-grid{ margin:0 16px 12px; border-radius:16px; overflow:hidden; gap:2px; }
.pv-x-grid .pv-cell{ aspect-ratio:16/9; }
.pv-x-grid.n2 .pv-cell,.pv-x-grid.n3 .pv-cell,.pv-x-grid.n4 .pv-cell{ aspect-ratio:1; }
/* X n3: 左 1 高 + 右 2 堆叠 */
.pv-x-grid.n3{ grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
.pv-x-grid.n3 .pv-cell:first-child{ grid-row:1 / span 2; aspect-ratio:auto; }
.pv-x-bar{ display:flex; justify-content:space-between; padding:4px 16px 12px; color:#71767b; font-size:13px; }
.pv-x-bar span{ display:inline-flex; align-items:center; gap:5px; }
.pv-x-bar svg{ width:17px; height:17px; }
.pv-x-comments{ border-top:1px solid #2f3336; padding:12px 16px 4px; }
.pv-x-cmt{ display:flex; gap:10px; position:relative; padding-bottom:12px; }
.pv-x-cmt .pv-avatar{ width:36px; height:36px; font-size:14px; z-index:1; }
.pv-x-cmt-b{ min-width:0; flex:1; }
.pv-x-cmt-b b{ font-weight:700; } .pv-x-cmt-b > span{ color:#71767b; }
.pv-x-cmt-b p{ margin:2px 0 6px; word-break:break-word; overflow-wrap:anywhere; }
.pv-x-cmt-bar{ display:flex; gap:22px; color:#71767b; font-size:13px; }
.pv-x-cmt-bar span{ display:inline-flex; align-items:center; gap:4px; }
.pv-x-cmt-bar svg{ width:15px; height:15px; }
.pv-x-thread{ position:absolute; left:17px; top:44px; bottom:0; width:2px; background:#2f3336; } /* 楼层竖线 */
.pv-x-cmt:last-child .pv-x-thread{ display:none; }

/* ============================================================================
 * §8.6 pvUnknown —— 中性降级卡（Original tab / 未知平台）
 * ==========================================================================*/
.pv-unknown{ background:#fff; color:#1f2733; --pv-accent:#3b6fd4; --pv-more:#8a8d91; font-size:14px; }
.pv-uk-head{ display:flex; align-items:center; gap:10px; padding:14px 16px 8px; }
.pv-uk-meta{ flex:1; display:flex; flex-direction:column; min-width:0; }
.pv-uk-name{ font-weight:600; color:#1f2733; }
.pv-uk-sub{ color:#8a8d91; font-size:12px; }
.pv-uk-badge{ font-size:11px; font-weight:600; color:#8a8d91; background:#f1f2f4; border-radius:6px; padding:3px 8px; flex-shrink:0; }
.pv-uk-text{ padding:0 16px 12px; word-break:break-word; overflow-wrap:anywhere; }
.pv-uk-grid{ gap:2px; }
.pv-uk-grid .pv-cell{ aspect-ratio:4/3; }
.pv-uk-bar{ display:flex; border-top:1px solid #ececf0; padding:4px 8px; margin-top:10px; }
.pv-uk-bar span{ flex:1; text-align:center; padding:9px 0; color:#5b6270; font-weight:600; font-size:13px;
  display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.pv-uk-bar svg{ width:16px; height:16px; }
.pv-uk-comments{ padding:8px 16px 14px; border-top:1px solid #ececf0; }
.pv-uk-cmt{ display:flex; gap:8px; margin-bottom:8px; }
.pv-uk-cmt-b{ min-width:0; }
.pv-uk-cmt-b b{ font-size:13px; color:#5b6270; }
.pv-uk-cmt-b p{ margin:2px 0 0; word-break:break-word; overflow-wrap:anywhere; }

/* ============================================================================
 * 微信朋友圈 wechat_moments —— 白底 · 头像+昵称 · 正文 · 九宫格/单视频 · 微信绿点缀
 * ==========================================================================*/
.pv-wm{ background:#fff; color:#1a1a1a; --pv-accent:#576b95; --pv-more:#576b95; font-size:14px;
  font-family:"PingFang SC","Microsoft YaHei",-apple-system,sans-serif; padding:16px 14px 14px; }
.pv-wm-row{ display:flex; gap:10px; }
.pv-wm-avatar{ border-radius:6px; }                       /* 微信头像圆角方形 */
.pv-wm-body{ flex:1; min-width:0; }
.pv-wm-name{ color:#576b95; font-weight:600; font-size:15px; margin-bottom:4px; }
.pv-wm-text{ color:#1a1a1a; word-break:break-word; overflow-wrap:anywhere; line-height:1.5; }
/* 九宫格媒体 */
.pv-wm-media{ display:grid; gap:4px; margin-top:8px; }
.pv-wm-media.wm1{ grid-template-columns:1fr; width:66%; }
.pv-wm-media.wm2{ grid-template-columns:1fr 1fr; width:66%; }
.pv-wm-media.wm3{ grid-template-columns:repeat(3,1fr); }
.pv-wm-media .pv-wm-cell{ position:relative; overflow:hidden; background:#e9e9ec; aspect-ratio:1; border-radius:2px; }
.pv-wm-media.wm1 .pv-wm-cell{ aspect-ratio:4/3; }
.pv-wm-media .pv-wm-cell img{ width:100%; height:100%; object-fit:cover; display:block; }
.pv-wm-vcell{ position:relative; aspect-ratio:3/4; max-width:52%; border-radius:3px; overflow:hidden; background:#111; margin-top:8px; }
.pv-wm-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:8px; }
.pv-wm-time{ color:#b2b2b2; font-size:12px; }
.pv-wm-op{ color:#576b95; font-size:16px; font-weight:700; letter-spacing:1px;
  background:#f7f7f7; border-radius:4px; padding:1px 7px; line-height:1.1; }
.pv-wm-inter{ margin-top:8px; background:#f7f7f7; border-radius:4px; padding:8px 10px; position:relative; }
.pv-wm-inter::before{ content:""; position:absolute; top:-5px; left:14px; border:5px solid transparent; border-bottom-color:#f7f7f7; }
.pv-wm-likes{ display:flex; align-items:center; gap:6px; padding-bottom:4px; border-bottom:1px solid #ededed; margin-bottom:4px; }
.pv-wm-heart{ display:inline-flex; color:#07C160; }
.pv-wm-heart svg{ width:15px; height:15px; }
.pv-wm-like-names{ color:#576b95; font-size:13px; word-break:break-word; overflow-wrap:anywhere; }
.pv-wm-cmt{ font-size:13px; line-height:1.5; word-break:break-word; overflow-wrap:anywhere; }
.pv-wm-cmt b{ color:#576b95; font-weight:400; }
.pv-wm-cmt:last-child{ margin-bottom:0; }

/* ============================================================================
 * 微信公众号 wechat_official —— 图文文章：封面大图+标题 · 段落正文 · 赞/在看/分享
 * ==========================================================================*/
.pv-wxo{ background:#fff; color:#1a1a1a; --pv-accent:#576b95; --pv-more:#576b95; font-size:15px;
  font-family:"PingFang SC","Microsoft YaHei",Georgia,-apple-system,serif; }
.pv-wxo-cover{ width:100%; }
.pv-wxo-cover .pv-wxo-cover-cell{ position:relative; aspect-ratio:2.35/1; overflow:hidden; background:#e9e9ec; }
.pv-wxo-cover .pv-wxo-cover-cell img{ width:100%; height:100%; object-fit:cover; display:block; }
.pv-wxo-title{ font-size:21px; font-weight:700; line-height:1.35; color:#1a1a1a;
  padding:18px 20px 0; margin:0; letter-spacing:.2px; }
.pv-wxo-by{ padding:10px 20px 0; font-size:13px; }
.pv-wxo-account{ color:#576b95; }
.pv-wxo-time{ color:#a3a3a3; }
.pv-wxo-article{ padding:14px 20px 4px; }
.pv-wxo-p{ margin:0 0 15px; line-height:1.75; color:#3a3a3a; font-size:16px; word-break:break-word; overflow-wrap:anywhere; }
.pv-wxo-video{ margin:6px 0 15px; }
.pv-wxo-video .pv-cell{ position:relative; overflow:hidden; border-radius:6px; background:#111; }
.pv-wxo-fig{ margin:0 0 15px; }
.pv-wxo-fig .pv-wxo-fig-cell{ position:relative; overflow:hidden; border-radius:4px; background:#e9e9ec; aspect-ratio:16/10; }
.pv-wxo-fig .pv-wxo-fig-cell img{ width:100%; height:100%; object-fit:cover; display:block; }
.pv-wxo-more{ font-family:-apple-system,"PingFang SC",sans-serif; }
.pv-wxo-bar{ display:flex; justify-content:center; gap:36px; padding:16px 20px 18px; }
.pv-wxo-act{ display:inline-flex; align-items:center; gap:5px; color:#8a8a8a; font-size:13px;
  font-family:-apple-system,"PingFang SC",sans-serif; }
.pv-wxo-act span{ display:inline-flex; }
.pv-wxo-act svg{ width:18px; height:18px; }
.pv-wxo-comments{ border-top:8px solid #f5f5f5; padding:12px 20px 16px;
  font-family:-apple-system,"PingFang SC",sans-serif; }
.pv-wxo-cmt-h{ color:#8a8a8a; font-size:13px; margin-bottom:10px; }
.pv-wxo-cmt{ margin-bottom:12px; }
.pv-wxo-cmt-b b{ color:#576b95; font-weight:400; font-size:13px; }
.pv-wxo-cmt-b p{ margin:3px 0 0; color:#333; font-size:15px; word-break:break-word; overflow-wrap:anywhere; }

/* ============================================================================
 * YouTube —— 缩略图 16:9(时长+播放键) · 标题≤2行 · 频道/观看量 · 描述框 · 红色点缀
 * ==========================================================================*/
.pv-yt{ background:#fff; color:#0f0f0f; --pv-accent:#065fd4; --pv-more:#606060; font-size:14px;
  font-family:Roboto,"PingFang SC",-apple-system,sans-serif; }
.pv-yt-thumb{ position:relative; aspect-ratio:16/9; background:#000; overflow:hidden; }
.pv-yt-poster{ width:100%; height:100%; object-fit:cover; display:block; }
.pv-yt-poster.ph{ background:linear-gradient(160deg,#20242e,#15171d); }
.pv-yt-poster-cell{ position:absolute; inset:0; }
.pv-yt-poster-cell img{ width:100%; height:100%; object-fit:cover; display:block; }
.pv-yt-title{ font-size:16px; font-weight:600; line-height:1.35; color:#0f0f0f; margin:0;
  padding:12px 14px 6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pv-yt-chan{ display:flex; align-items:center; gap:10px; padding:6px 14px 12px; border-bottom:1px solid #e5e5e5; }
.pv-yt-chan-meta{ flex:1; min-width:0; }
.pv-yt-chan-name{ font-size:14px; font-weight:500; color:#0f0f0f; }
.pv-yt-chan-sub{ font-size:12px; color:#606060; }
.pv-yt-subscribe{ border:0; background:#0f0f0f; color:#fff; border-radius:18px; padding:8px 16px;
  font-size:13px; font-weight:600; cursor:pointer; flex-shrink:0; }
.pv-yt-bar{ display:flex; gap:10px; padding:12px 14px; flex-wrap:wrap; }
.pv-yt-chip{ display:inline-flex; align-items:center; gap:6px; background:#f2f2f2; color:#0f0f0f;
  border-radius:18px; padding:8px 14px; font-size:13px; font-weight:500; }
.pv-yt-chip svg{ width:18px; height:18px; }
.pv-yt-desc{ margin:0 14px 12px; background:#f2f2f2; border-radius:12px; padding:12px 14px;
  color:#0f0f0f; font-size:13px; line-height:1.5; word-break:break-word; overflow-wrap:anywhere; }
.pv-yt-comments{ padding:6px 14px 14px; border-top:1px solid #e5e5e5; }
.pv-yt-cmt-h{ font-size:14px; font-weight:600; color:#0f0f0f; margin-bottom:12px; }
.pv-yt-cmt{ display:flex; gap:10px; margin-bottom:12px; }
.pv-yt-cmt-b{ min-width:0; flex:1; }
.pv-yt-cmt-b b{ font-size:13px; color:#0f0f0f; font-weight:500; }
.pv-yt-cmt-b p{ margin:3px 0; color:#0f0f0f; word-break:break-word; overflow-wrap:anywhere; }
.pv-yt-cmt-meta{ color:#606060; font-size:12px; }

/* ============================================================================
 * Threads —— 白底(Threads 风) · 头像+handle · 正文 · 媒体 · like/reply/repost/share 线性
 * ==========================================================================*/
.pv-th{ background:#fff; color:#0f1419; --pv-accent:#0f1419; --pv-more:#8a8d91; font-size:15px;
  font-family:-apple-system,"Segoe UI","PingFang SC",Roboto,sans-serif; }
.pv-th-head{ display:flex; gap:10px; padding:14px 16px 4px; align-items:flex-start; }
.pv-th-meta{ flex:1; min-width:0; }
.pv-th-line{ display:flex; align-items:center; gap:6px; }
.pv-th-name{ font-weight:700; font-size:15px; color:#0f1419; }
.pv-th-v{ width:15px; height:15px; color:#0095f6; flex-shrink:0; }
.pv-th-time{ color:#999; font-size:14px; }
.pv-th-more{ color:#999; font-size:16px; font-weight:700; line-height:1; }
.pv-th-text{ padding:0 16px 10px; color:#0f1419; word-break:break-word; overflow-wrap:anywhere; line-height:1.5; }
.pv-th-media{ position:relative; margin:0 16px 10px; border-radius:14px; overflow:hidden; }
.pv-th-track{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.pv-th-track::-webkit-scrollbar{ display:none; }
.pv-th-track .pv-cell{ flex:0 0 100%; aspect-ratio:4/5; scroll-snap-align:start; background:#e9e9ec; position:relative; overflow:hidden; }
.pv-th-track .pv-cell img{ width:100%; height:100%; object-fit:cover; display:block; }
.pv-th-vcell{ position:relative; overflow:hidden; background:#111; }
.pv-th-dots{ position:absolute; bottom:8px; left:0; right:0; display:flex; gap:4px; justify-content:center; z-index:2; }
.pv-th-dots i{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.6); }
.pv-th-dots i.on{ background:#fff; }
.pv-th-bar{ display:flex; gap:20px; padding:6px 16px 4px; }
.pv-th-bar span{ display:inline-flex; color:#0f1419; }
.pv-th-bar svg{ width:22px; height:22px; }
.pv-th-stats{ padding:2px 16px 12px; color:#999; font-size:14px; }
.pv-th-comments{ border-top:1px solid #eee; padding:12px 16px 4px; }
.pv-th-cmt{ display:flex; gap:10px; position:relative; padding-bottom:14px; }
.pv-th-cmt .pv-avatar{ width:32px; height:32px; font-size:13px; z-index:1; }
.pv-th-cmt-b{ min-width:0; flex:1; }
.pv-th-cmt-b p{ margin:2px 0 6px; color:#0f1419; word-break:break-word; overflow-wrap:anywhere; }
.pv-th-cmt-bar{ display:flex; gap:18px; }
.pv-th-cmt-bar span{ display:inline-flex; color:#0f1419; }
.pv-th-cmt-bar svg{ width:16px; height:16px; }
.pv-th-thread{ position:absolute; left:15px; top:40px; bottom:0; width:2px; background:#eee; }
.pv-th-cmt:last-child .pv-th-thread{ display:none; }

/* ============================================================
 * PC 桌面版预览（renderPreviewDesktop）—— 与手机版完全不同的宽布局
 * ============================================================ */
/* 桌面模式：释放手机取景框宽度约束，让 .pv-desk 铺开而不是被压进 340px 手机框 */
.pv-stage.pv-desk-mode{ --pv-frame-w:100%; align-items:stretch; }
.pv-stage.pv-desk-mode .pv-viewport{ width:100%; }

/* ============================================================
 * 正常展示（renderNormal）—— 最直观的纯内容视图，无平台外壳。三态默认态，唯一可编辑。
 * ============================================================ */
.pv-stage.pv-normal-mode{ --pv-frame-w:100%; align-items:stretch; }
.pv-stage.pv-normal-mode .pv-viewport{ width:100%; padding:20px; background:var(--surface-2); }
.pv-normal{ width:100%; max-width:720px; margin:0 auto; box-sizing:border-box; text-align:left;
  background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:22px 24px;
  color:var(--ink); font-size:15px; line-height:1.7; box-shadow:var(--shadow); }
.pv-normal-title{ font-size:19px; font-weight:800; color:var(--ink); margin-bottom:12px; line-height:1.35; }
.pv-normal-text{ white-space:pre-wrap; word-break:break-word; color:var(--ink); }
.pv-normal-text .pv-body[contenteditable]{ display:block; outline:none; min-height:60px;
  border:1px dashed var(--brand); border-radius:10px; padding:10px 12px; background:var(--surface-2); }
.pv-normal-text .pv-tag{ color:var(--brand-strong); }
.pv-normal-media{ display:flex; flex-direction:column; gap:12px; margin-top:16px; }
.pv-normal-media img,.pv-normal-media video{ width:100%; max-height:520px; object-fit:contain;
  border-radius:12px; background:#0b0b0f; display:block; }
.pv-normal-empty{ color:var(--ink-faint); font-size:14px; text-align:center; padding:48px 12px; }
.pv-desk{ width:100%; max-width:600px; margin:0 auto; background:#fff; border:1px solid #e2e2e6; border-radius:12px;
  padding:20px 22px; box-shadow:0 1px 3px rgba(0,0,0,.06); color:#18181b; font-size:14px; line-height:1.6;
  box-sizing:border-box; text-align:left; }
.pv-desk .pv-dk-head{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.pv-desk .pv-dk-av{ flex:0 0 auto; }
.pv-desk .pv-dk-meta{ flex:1; min-width:0; }
.pv-desk .pv-dk-namerow{ display:flex; align-items:center; gap:10px; }
.pv-desk .pv-dk-name{ font-weight:700; font-size:15px; }
.pv-desk .pv-dk-sub{ font-size:12px; color:#6b7280; margin-top:2px; }
.pv-desk .pv-dk-follow{ color:#0a66c2; font-weight:700; font-size:13px; cursor:pointer; }
.pv-desk .pv-dk-text{ white-space:pre-wrap; word-break:break-word; margin:8px 0 12px; font-size:14.5px; }
.pv-desk .pv-dk-text a{ color:#0a66c2; }
.pv-desk .pv-dk-stat{ color:#6b7280; font-size:12.5px; margin:10px 0; }
.pv-desk .pv-dk-actions{ display:flex; gap:8px; border-top:1px solid #eee; padding-top:8px; }
.pv-desk .pv-dk-act{ flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:8px;
  color:#4b5563; font-weight:600; font-size:13px; border-radius:8px; cursor:pointer; transition:.15s; }
.pv-desk .pv-dk-act:hover{ background:#f3f4f6; }
.pv-desk .pv-dk-act .pv-ic{ width:18px; height:18px; }
/* 媒体 */
.pv-dk-grid{ display:grid; gap:4px; border-radius:10px; overflow:hidden; margin:6px 0; }
.pv-dk-grid .pv-cell{ position:relative; width:100%; background:#f0f0f3; }
.pv-dk-grid .pv-cell img{ width:100%; height:100%; object-fit:cover; display:block; }
.pv-dk-grid .pv-cell.ph{ aspect-ratio:4/3; }
.pv-dk-grid-1{ grid-template-columns:1fr; } .pv-dk-grid-1 .pv-cell{ aspect-ratio:16/9; }
.pv-dk-grid-2{ grid-template-columns:1fr 1fr; } .pv-dk-grid-2 .pv-cell{ aspect-ratio:1/1; }
.pv-dk-grid-3{ grid-template-columns:1fr 1fr 1fr; } .pv-dk-grid-3 .pv-cell{ aspect-ratio:1/1; }
.pv-dk-grid-4{ grid-template-columns:1fr 1fr; } .pv-dk-grid-4 .pv-cell{ aspect-ratio:1/1; }
.pv-dk-video{ position:relative; aspect-ratio:16/9; background:#000; border-radius:10px; overflow:hidden; margin:6px 0; }
.pv-dk-video img.pv-dk-poster{ width:100%; height:100%; object-fit:cover; }
.pv-dk-video .pv-dk-poster.ph{ width:100%; height:100%; background:#111; }
/* 评论 */
.pv-dk-comments{ margin-top:12px; display:flex; flex-direction:column; gap:10px; }
.pv-dk-cmt{ display:flex; gap:8px; }
.pv-dk-cmt-body{ background:#f3f4f6; border-radius:12px; padding:8px 12px; font-size:13px; }
.pv-dk-cmt-body b{ display:block; font-size:12.5px; margin-bottom:2px; }
/* 两栏（IG / 小红书 网页版）：媒体左 + 文案右 */
.pv-desk.pv-desk-instagram, .pv-desk.pv-desk-xiaohongshu{ max-width:820px; padding:0; overflow:hidden; }
.pv-dk-split{ display:grid; grid-template-columns:1fr 340px; min-height:420px; }
.pv-dk-split-media{ background:#000; display:flex; align-items:center; justify-content:center; }
.pv-dk-split-media.ph{ background:#f0f0f3; min-height:420px; }
.pv-dk-split-media .pv-dk-grid, .pv-dk-split-media .pv-dk-video{ width:100%; margin:0; border-radius:0; }
.pv-dk-split-media .pv-dk-grid .pv-cell{ aspect-ratio:auto; height:100%; }
.pv-dk-split-side{ padding:18px; display:flex; flex-direction:column; gap:10px; border-left:1px solid #eee; overflow:auto; }
/* YouTube 观看页 */
.pv-desk.pv-desk-youtube{ max-width:760px; }
.pv-dk-yt-player{ aspect-ratio:16/9; background:#000; border-radius:12px; overflow:hidden; position:relative; }
.pv-dk-yt-player.ph{ background:#111; }
.pv-dk-yt-player img{ width:100%; height:100%; object-fit:cover; }
.pv-dk-yt-title{ font-size:18px; font-weight:700; margin:14px 0 10px; }
.pv-dk-yt-chan{ display:flex; align-items:center; gap:12px; }
.pv-dk-yt-ci{ flex:1; } .pv-dk-yt-ci b{ display:block; font-size:14px; }
.pv-dk-yt-sub{ background:#0f0f0f; color:#fff; font-weight:700; font-size:13px; padding:9px 16px; border-radius:999px; }
.pv-dk-yt-desc{ background:#f2f2f2; border-radius:12px; padding:12px 14px; margin-top:14px; white-space:pre-wrap; font-size:13.5px; }
/* 抖音 / 朋友圈 PC 版：保持手机原生形态居中，不套桌面卡片外壳；约束手机框宽度，
   避免桌面模式 --pv-frame-w:100% 让 9:16 竖屏撑满 600px 变超高溢出。 */
.pv-desk.pv-desk-douyin, .pv-desk.pv-desk-wechat_moments{
  max-width:100%; background:transparent; border:0; border-radius:0; padding:0; box-shadow:none;
}
.pv-desk.pv-desk-douyin .pv-frame{ width:340px; max-width:92vw; }
.pv-desk.pv-desk-wechat_moments .pv-frame{ width:390px; max-width:92vw; }
/* 公众号网页版 */
.pv-desk.pv-desk-wechat_official{ max-width:680px; }
.pv-dk-wxo-title{ font-size:22px; font-weight:700; line-height:1.4; margin:0 0 12px; }
.pv-dk-wxo-by{ color:#576b95; font-size:14px; margin-bottom:16px; }
.pv-dk-wxo-body{ font-size:16px; line-height:1.8; color:#2c2c2c; }
@media(max-width:720px){
  .pv-dk-split{ grid-template-columns:1fr; }
  .pv-dk-split-side{ border-left:0; border-top:1px solid #eee; }
}