/* ===== 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 这类矮图（右栏内容比图高）不会顶在上边，
   而是上下居中，留白对称，看起来像内边距而不是「图没撑满」。 */
.pfv-shot{background:#fff;display:flex;align-items:center}
/* 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;
}

/* 卡脚。默认横跨整卡宽度，是这张卡的页脚（该架构只有一款有数据、没有榜单可排时的样子）。 */
.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}

.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-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 420px;width:420px}
    .pfv-rank{
        flex:1 1 auto;min-width:0;
        border-top:0;border-left:1px solid #eef1f6;
        display:flex;flex-direction:column;
    }
}