/* ===== CPU 跑分实测成绩卡 ===== */
.pfv-head{margin-bottom:14px}
.pfv-title{font-size:18px;font-weight:800;color:var(--text-title);display:flex;align-items:center;gap:7px}
.pfv-sub{margin-top:5px;font-size:12px;color:var(--text-muted);line-height:1.6}

.pfv-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.pfv-tab{
    padding:6px 14px;border-radius:999px;cursor:pointer;user-select:none;
    background:#f6f8fb;border:1px solid #e8edf5;
    font-size:12px;font-weight:600;color:#5b6b83;transition:all .18s ease;
}
.pfv-tab:hover{background:#eef2f9;color:#33415c}
.pfv-tab.is-on{
    background:linear-gradient(135deg,#6c5ce7,#8f82f5);
    border-color:transparent;color:#fff;box-shadow:0 2px 8px rgba(108,92,231,.28);
}

.pfv-panel{display:none}
/* 手机（以及 900px 以下）：截图在上、同架构排名在下，整块限宽 500px 居中。 */
.pfv-panel.is-on{display:block;max-width:500px;margin:0 auto}

/* ===== 整块只有这一个带边框/圆角/阴影的容器 =====
   之前是「截图一张卡 + 排名一张卡」并排，各自带边框和阴影、中间还隔 20px，
   读起来是两个不相干的部件拼在一起。改成一张卡 + 内部发丝线分区：
   左边是截图、右边是榜单，共用同一个圆角和阴影，右栏用 align-items:stretch
   拉满整卡高度，不再是一个浮在旁边的短方块。 */
.pfv-card{
    background:#fff;border:1px solid #e9edf4;border-radius:18px;overflow:hidden;
    box-shadow:0 2px 10px rgba(15,24,37,.05);
}
.pfv-body{display:block}

/* align-items:center 是给横图用的：Geekbench 这类矮图（右栏内容比图高）不会顶在上边，
   而是上下居中，留白对称，看起来像内边距而不是「图没撑满」。
   position:relative 是给 .pfv-shotfade 定位用的（非 VIP 时盖住截图下半）。 */
.pfv-shot{background:#fff;display:flex;align-items:center;position:relative}
/* SVG 自带 viewBox，宽度 100% 高度自动，比例天然正确。
   这里不要顺手加 max-height：svg 元素默认 preserveAspectRatio="xMidYMid meet"，
   宽高一旦同时限死，内容会等比缩到能放下的那一边再居中，窄的一侧就留出空白。
   r23 是 640×731 的竖图，限高尤其明显（两侧会各空一大块）。 */
.pfv-shot svg{display:block;width:100%;height:auto}
.pfv-shot image{display:block}

/* ---------- 同架构对比区（卡内的一个分区，不是独立卡片） ---------- */
.pfv-rank{
    /* 极浅的冷灰，只跟左侧纯白截图区做一点点区分，仍然是同一张卡 */
    background:#fafbfd;
    border-top:1px solid #eef1f6;      /* 手机：横向发丝线 */
    padding:13px 14px 12px;
}
.pfv-rank-hd{
    display:flex;align-items:center;gap:8px;flex-wrap:wrap;
    padding-bottom:9px;border-bottom:1px solid #eef1f6;
}
.pfv-rank-t{font-size:12.5px;font-weight:700;color:var(--text-title)}
.pfv-rank-arch{
    font-size:11px;font-weight:600;color:#5b4bd0;padding:2px 9px;border-radius:9px;
    background:#f0ecff;border:1px solid #e4dfff;
}
.pfv-rank-sub{margin-top:8px;font-size:11px;color:var(--text-muted);line-height:1.6}
/* 榜单行之间用发丝线分隔，读起来是一张数据表而不是一串圆角药丸 */
/* margin:auto 0 —— 上下 auto 边距会自动吃掉右栏剩下的高度，把榜单拉到中间。
   这样竖图（Cinebench R23，420px 宽却有 480px 高）下面那片空灰就被拆成上下两半，
   不再是一整块压在底部的空白。列表比右栏还高时（Geekbench），auto 边距算成 0，布局不受影响。 */
.pfv-rank-list{list-style:none;margin:auto 0;padding:0}
.pfv-rank-it{
    display:flex;align-items:center;gap:9px;padding:7px 6px;
    font-size:12px;color:#3a4557;transition:background .15s ease;
}
.pfv-rank-it + .pfv-rank-it{border-top:1px solid #f0f3f8}
.pfv-rank-it:hover{background:#f4f7fc}
.pfv-rank-it .no{
    flex:0 0 21px;height:21px;border-radius:7px;background:#eef1f6;color:#8b93a5;
    font-size:11px;font-weight:700;font-style:normal;line-height:21px;text-align:center;
}
.pfv-rank-it .nm{
    flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pfv-rank-it a.nm{color:inherit;text-decoration:none}
.pfv-rank-it a.nm:hover{color:#6c5ce7;text-decoration:underline}
.pfv-rank-it .sc{
    flex:0 0 auto;font-weight:700;color:#14171e;
    font-variant-numeric:tabular-nums;   /* 分数右对齐时整列不会跳 */
}
.pfv-rank-it.is-cur{background:#f0ecff;box-shadow:none}
.pfv-rank-it.is-cur .no{background:#6c5ce7;color:#fff}
.pfv-rank-it.is-cur .nm{color:#4b3fc7;font-weight:600}
.pfv-rank-gap{
    padding:6px 6px;text-align:center;font-size:11px;color:#aab2c2;letter-spacing:.4px;
}

/* ---------- VIP 看到的完整榜单 ----------
   锁条承诺「开通会员查看全部 N 款」，所以 VIP 这一侧给的是全量行 + 固定高度滚动窗口。
   非 VIP 那 6 条不套滚动容器，给一个不滚的东西加 overflow 只会多出一条假滚动条。 */

/* 行高写死成一个变量：影子行靠负上下边距精确盖住原行，差 1px 就会错位露馅。
   36px = .no 的 21px + 上下 padding 各 7px + 1px 分隔线。 */
.pfv-rank-scroll{--pfv-row:36px}
.pfv-rank-scroll{
    flex:1 1 auto;min-height:0;overflow-y:auto;margin:auto 0;
    position:relative;scrollbar-width:thin;-webkit-overflow-scrolling:touch;
}
/* 桌面版右栏高度：以截图高度为基准，但不低于 --pfv-min-h。

   截图的 svg 是 width:100%;height:auto，实际渲染高度 = 渲染宽度 × $v['h']/$SW。
   所以高度不能在 PHP 里手算 —— 手算就得把截图宽度（420px）抄一遍到 PHP 里，
   那是和 CSS 里 .pfv-shot 的宽度互不相干的两份，改一处忘另一处就会静默出错。
   做法是把宽度和比例都变成变量，让高度在 CSS 里自己算出来：
     --pfv-shot-w  截图宽度。在 .pfv-body 上定义「一次」，.pfv-shot 和 .pfv-tall 共用
     --pfv-min-h   右栏高度下限，见下
     --pfv-ratio   底图高 / 视口宽（纯比例，PHP 算，不含任何魔法数字）

   为什么不能严格等于截图高：截图高度是图片比例决定的，跟榜单需要多少空间没关系。
   Geekbench 6 的底图 640×410，在 420px 宽下只有 269px 高，右栏只剩 144px 滚动区、
   一屏只有 4 行 —— 榜单头部（同架构对比 + 架构标签 + 「共 N 款」）就吃掉了 145px。
   所以取 max(截图高, 420px)：R23 那种高图仍然按截图走（480px），矮图兜到 420px、
   一屏 7.6 行。代价是 GB6 截图下方会空出 151px。

   高度只能落在 .pfv-rank 上而不是 .pfv-rank-scroll 上 —— 后者是 flex:1 1 auto，
   不给父级高度它就跟着内容长，overflow-y:auto 会退化成「有 overflow 但不滚」，
   影子行的 sticky 也就没有可贴的窗口边（实测这两种情况下偏差 36px / 0px）。

   截图列的 align-self 收在 .pfv-scroll（只有 VIP 分支才加）里面：
   全局改会让非 VIP 那 6 条的卡也变形，而那个版式是已经定过的，不该被这次改动顺带改掉。

   移动端不给高度、只给 500px 上限：单栏时截图是整卡宽、高度本来就跟着视口变，
   上面那个乘法在移动端算出来的值没有意义（截图实际是 357px 宽不是 420px）。

   max-height 必须配 display:flex;flex-direction:column —— 移动端 .pfv-rank 是普通块级盒
   （桌面版的 flex 列写在 min-width:900px 里），块级盒里的 .pfv-rank-scroll
   「flex:1 1 auto; min-height:0」全部失效，它会撑到内容全高再溢出右栏，
   overflow-y:auto 因为盒子没被压扁所以也不滚（实测右栏 500px、滚动容器 539px、可滚 0px）。
   改成 flex 列之后滚动容器才会被压进剩余空间、真的滚起来。 */
/* 截图宽度和右栏高度下限，各只在这里定义一次。
   .pfv-shot 的宽度和 .pfv-tall 的高度都从这里读，两条规则不再各自写兜底值 ——
   之前两边各兜一份 420px，数值凑巧相等所以看不出来，但那不是真的耦合：
   任何人只改 .pfv-shot 的宽度，右栏高度就会静默失配。 */
.pfv-body{--pfv-shot-w:420px;--pfv-min-h:420px}
@media (max-width:899px){
    .pfv-tall{max-height:500px;display:flex;flex-direction:column}
}
@media (min-width:900px){
    .pfv-scroll .pfv-shot{align-self:flex-start}
    .pfv-tall{height:max(calc(var(--pfv-shot-w) * var(--pfv-ratio,.75)), var(--pfv-min-h))}
}
.pfv-rank-scroll::-webkit-scrollbar{width:6px}
.pfv-rank-scroll::-webkit-scrollbar-thumb{background:#d8dde6;border-radius:3px}
.pfv-rank-scroll .pfv-rank-list{margin:0}

/* 当前 CPU 那一行：滚过去之后吸住窗口上沿，滑不丢。 */
.pfv-rank-scroll .pfv-rank-it.is-cur{position:sticky;top:0;z-index:3}

/* 影子行 = 当前行的副本，负上下边距让它精确盖回原行（不占高度），
   sticky bottom 让它在原行还落在窗口下方时贴住下沿。
   两个元素各管一端，重合时（偏差 0px）视觉上就只有一个「当前 CPU」，
   不需要 JS 判断该显示哪一个。box-shadow 是唯一的装饰：
   钉在下沿时它压着下面那行，没有投影会分不清是浮层还是列表里的一行。 */
.pfv-ghost{
    position:sticky;bottom:0;z-index:2;
    margin-top:calc(var(--pfv-row) * -1);
    margin-bottom:calc(var(--pfv-row) * -1);
    box-shadow:0 -2px 8px rgba(20,23,30,.10);
}

/* 卡脚。默认横跨整卡宽度，是这张卡的页脚（该架构只有一款有数据、没有榜单可排时的样子）。 */
.pfv-foot{
    display:flex;align-items:center;justify-content:space-between;
    gap:10px;flex-wrap:wrap;padding:10px 16px;
    border-top:1px solid #eef1f6;background:#fff;
    font-size:11px;color:var(--text-muted);
}
/* 脚注放进右栏后的样子：白底横带，用负边距顶掉 .pfv-rank 的左右 14px / 下 12px 内边距，
   让白条撑满整栏。颜色跟左边截图区一致，右栏的灰底被切成「榜单 + 页脚」两段，层次比
   整栏一条灰底更清楚；底部负边距同时吃掉栏的下内边距，卡片圆角不会露白。 */
.pfv-rank .pfv-foot{
    margin:14px -14px -12px;padding:10px 14px;
    border-top:1px solid #eef1f6;background:#fff;
}
.pfv-tianti{
    display:inline-flex;align-items:center;gap:3px;
    font-size:12px;font-weight:600;color:#5b6b83;
    padding:5px 12px;border-radius:12px;background:#f8fafc;border:1px solid #eef2f7;
}
.pfv-tianti:hover{background:#eef2f9;color:#33415c}

/* ---------- VIP 门控（非 VIP） ----------
   思路：截图下半用白色渐隐盖住（型号名、系统信息、版本按钮都在下半），
   只把顶部的单核/多核分条露出来——「这条 CPU 确实跑了多少分」是真的，
   剩下的属于付费内容。右栏榜单整块上锁，分数换成 ••••。 */

/* 截图下半渐隐。62% 是量出来的：4 张底图的叠字位置有规律——
   单核/多核分全在顶部 21%–43%，CPU 型号名和系统信息全在 71% 之后。 */
.pfv-shotfade{
    position:absolute;left:0;right:0;bottom:0;height:62%;
    background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.72) 42%,#fff 100%);
    pointer-events:none;
}
.pfv-rank-list .pfv-rank-it.locked{background:#f4f6f9}
.pfv-rank-list .pfv-rank-it.locked .nm{color:#b6bcc8}
.pfv-rank-list .pfv-rank-it.locked .no{background:#dfe3ea;color:#fff}
.pfv-rank-list .sc-lock{color:#c2c8d3;letter-spacing:1px}
.pfv-lockbar{
    margin-top:10px;padding:7px 6px;display:flex;align-items:center;gap:6px;justify-content:center;
    font-size:11px;color:#b8860b;background:#fdf8ec;border:1px dashed #e8c979;border-radius:8px;
}

/* 付费墙：跟 view_duibi.html 的 paywall-* 同一套语言（金色系），不另起样式 */
.pfv-paywall{
    margin-top:14px;display:flex;align-items:center;gap:14px;
    background:linear-gradient(135deg,#fffbeb 0%,#fef3c7 100%);
    border:1px solid #f59e0b;border-radius:12px;padding:14px 16px;
}
.pfv-paywall-icon{
    flex:0 0 44px;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,#b8860b 0%,#d4a017 100%);color:#fff;
}
.pfv-paywall-body{flex:1;min-width:0}
.pfv-paywall-body h3{
    font-size:15px;font-weight:600;color:#78350f;margin-bottom:4px;
    display:flex;align-items:center;gap:5px;
}
.pfv-paywall-body p{font-size:12.5px;color:#92400e;line-height:1.55}
.pfv-paywall-body .unlock{color:#92400e;margin-top:5px;font-size:12px}
.pfv-paywall-actions{display:flex;gap:8px;flex-wrap:wrap}
.pfv-paywall-actions a{
    display:inline-block;padding:8px 16px;border-radius:8px;
    font-size:13px;font-weight:500;text-decoration:none;white-space:nowrap;
}
.pfv-paywall-actions .pbtn-primary{background:linear-gradient(135deg,#b8860b 0%,#d4a017 100%);color:#fff;font-weight:600}
.pfv-paywall-actions .pbtn-ghost{background:#fff;color:#92400e;border:1px solid #f59e0b}
@media (max-width:700px){
    .pfv-paywall{flex-direction:column;align-items:flex-start}
}

.pfv-empty{
    padding:38px 20px;text-align:center;color:#94a3b8;font-size:13px;
    background:#fff;border:1px solid #edf2f9;border-radius:18px;
}

@media (max-width:768px){
    .pfv-title{font-size:16px}
    .pfv-card{border-radius:14px}
    /* 付费墙跟着跑分卡一起限宽居中，不然手机版会顶满整屏 */
    .pfv-paywall{max-width:500px;margin:14px auto 0}
}

/* 桌面版：截图在左、同架构排名在右，仍是同一张卡，只多一条竖发丝线。
   放在 .pfv-panel.is-on 上（不是 .pfv-panel）—— 面板默认 display:none，
   只匹配 .pfv-panel 的规则会被后面的 display:none 盖掉。

   截图宽度定 420px 而不是 500px，是量出来的：详情页左栏 .xinyue_wp_left 宽 880px，
   .xin27_view_box 左右各 32px 内边距，卡片实际只有 816px。截图占 500px 时右栏只剩
   314px（内容 285px），「AMD Ryzen Threadripper PRO 9985WX」这种名字会被省略号截断
   （实测 5 条里 4 条被截）。收到 420px 后右栏 396px、名字可用 279px，实测 0 条截断。

   这里原来还有 max-width:340px：它跟 flex:1 1 auto 是打架的 —— flex 想撑满，
   max-width 又把它卡死在 340，撑不出去，卡片右边会空出一条谁都不占的白带。必须去掉。 */
@media (min-width:900px){
    .pfv-panel.is-on{display:block;max-width:none;margin:0}  /* 左边跟标题、tab 对齐 */
    .pfv-body{display:flex;align-items:stretch}              /* 右栏拉满整卡高度 */
    .pfv-shot{flex:0 0 var(--pfv-shot-w);width:var(--pfv-shot-w)}
    .pfv-rank{
        flex:1 1 auto;min-width:0;
        border-top:0;border-left:1px solid #eef1f6;
        display:flex;flex-direction:column;
    }
}