/* ===========================================================
   CPUBench 测试数据展示 — 样式表
   沿用「CPUBench 测试数据可视化平台」的既有视觉识别（品牌蓝 +
   四测试项色 + 卡片式仪表盘），在其上增加本数据集专属的
   「版本 × 产品类型」分区系统。
   =========================================================== */

:root{
  --ink:#0f141d;
  --ink-2:#39414f;
  --ink-3:#6b7480;
  --ink-4:#9aa3af;
  --line:#e2e6ec;
  --line-2:#eef1f5;
  --bg:#f4f6f9;
  --surface:#ffffff;
  --surface-2:#fafbfd;
  --brand:#1d4ed8;
  --brand-soft:#eaf0fe;

  /* 四类测试项 */
  --c-int-single:#3763d6;
  --c-float-single:#0e9c8a;
  --c-int-conc:#d98324;
  --c-float-conc:#8f4fd0;

  /* 版本分区：v1.3 及之前 = 石板蓝灰（历史）；v1.5 = 洋红（当前） */
  --c-v13:#5a6478;
  --c-v13-soft:rgba(90,100,120,.10);
  --c-v15:#c2185b;
  --c-v15-soft:rgba(194,24,91,.10);

  --ok:#16a34a;
  --warn:#dc2626;

  /* 分数认证（目录名带「_已认证」后缀的记录）：琥珀金，
     刻意避开四测试项色（蓝/青/橙/紫）与品牌蓝，便于在密集表格中一眼分辨 */
  --cert:#b45309;
  --cert-soft:rgba(180,83,9,.13);

  /* 厂商占比饼图：13 类处理器厂商分类色（亮色主题）。
     顺序与 app.js 的 CHIP_VENDOR_ORDER 一一对应（--cat-1 = AMD … --cat-12 = RISC-V），
     --cat-other 为兜底类。刻意与四测试项色、版本色、认证色错开色相。 */
  --cat-1:#e15759;
  --cat-2:#4e79a7;
  --cat-3:#12a594;
  --cat-4:#f28e2b;
  --cat-5:#b07aa1;
  --cat-6:#d37295;
  --cat-7:#59a14f;
  --cat-8:#0e9cdf;
  --cat-9:#9c755f;
  --cat-10:#d4a017;
  --cat-11:#76b7b2;
  --cat-12:#86a0b8;
  --cat-other:#9aa3af;

  --radius:14px;
  --radius-sm:9px;
  --shadow:0 1px 2px rgba(15,20,29,.04), 0 6px 20px -8px rgba(15,20,29,.10);
  --shadow-lg:0 10px 40px -12px rgba(15,20,29,.22);
  --mono:ui-monospace,"SF Mono",SFMono-Regular,"JetBrains Mono",Consolas,"Liberation Mono",monospace;
}

html[data-theme="dark"]{
  --ink:#eef2f8;
  --ink-2:#c3ccd9;
  --ink-3:#8e99a8;
  --ink-4:#6a7484;
  --line:#252c38;
  --line-2:#1d232e;
  --bg:#0d1117;
  --surface:#141a23;
  --surface-2:#181f29;
  --brand:#5b8def;
  --brand-soft:#182338;

  --c-int-single:#5b8def;
  --c-float-single:#2ec4b0;
  --c-int-conc:#f0a94c;
  --c-float-conc:#b183e6;

  --c-v13:#8d99ad;
  --c-v13-soft:rgba(141,153,173,.16);
  --c-v15:#f2589a;
  --c-v15-soft:rgba(242,88,154,.16);

  --ok:#34d399;
  --warn:#f87171;
  --cert:#f5b53d;
  --cert-soft:rgba(245,181,61,.16);

  /* 厂商占比饼图：暗色主题下同色相、提亮，保证深底可辨 */
  --cat-1:#f28f8f;
  --cat-2:#86aed6;
  --cat-3:#35c6b5;
  --cat-4:#f5a95c;
  --cat-5:#c79cba;
  --cat-6:#e39ab5;
  --cat-7:#7fc178;
  --cat-8:#4fc3f7;
  --cat-9:#c09b86;
  --cat-10:#e8c04a;
  --cat-11:#9fd6d2;
  --cat-12:#a9c0d6;
  --cat-other:#6a7484;

  --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 20px -8px rgba(0,0,0,.6);
  --shadow-lg:0 10px 40px -12px rgba(0,0,0,.75);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Inter","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  font-size:14px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:-.01em;}
.mono-b{font-family:var(--mono);font-size:11.5px;line-height:1.65;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:8px 11px;word-break:break-all;color:var(--ink-2);}
a{color:var(--brand);}

/* ---------- 顶部装饰条：四测试项 ---------- */
.accent-bar{height:3px;display:flex;position:sticky;top:0;z-index:60;}
.accent-bar i{flex:1;display:block;}

/* ---------- 顶栏 ---------- */
.topbar{
  position:sticky;top:3px;z-index:50;
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--line);
}
.topbar-in{
  max-width:1560px;margin:0 auto;padding:14px 28px;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:14px;min-width:0;}
/* 内层文本框必须能收缩：标题/副标题都是 nowrap，若这里保持 min-width:auto，
   整条顶栏的最小宽度会被文本撑到 568px，手机上把整个页面顶宽 → 全站横向溢出 */
.brand-text{min-width:0;}
.brand-mark{
  width:46px;height:46px;border-radius:12px;flex:none;
  background:linear-gradient(140deg,var(--brand),#7c3aed);
  display:grid;place-items:center;box-shadow:var(--shadow);
}
.brand-mark svg{display:block;}
.brand-title{font-size:20px;font-weight:750;letter-spacing:-.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.brand-sub{font-size:13.5px;color:var(--ink-3);white-space:nowrap;margin-top:1px;overflow:hidden;text-overflow:ellipsis;}
/* 副标题是一条指往代码仓库的外链：常态与正文同级（不喧哗），悬停才亮成品牌蓝 */
a.brand-sub{display:block;text-decoration:none;transition:color .15s;}
/* 窄屏副标题换行时，「➡ URL」不拆开——箭头落在上一行行尾会让「指向」读反 */
a.brand-sub .nb{white-space:nowrap;}
a.brand-sub:hover,a.brand-sub:focus-visible{color:var(--brand);text-decoration:underline;text-underline-offset:3px;}
.spacer{flex:1;}
.btn{
  appearance:none;border:1px solid var(--line);background:var(--surface);
  color:var(--ink-2);border-radius:var(--radius-sm);padding:8px 14px;
  font-size:13px;font-weight:600;cursor:pointer;transition:.15s;
  display:inline-flex;align-items:center;gap:7px;font-family:inherit;
}
.btn:hover{border-color:var(--ink-4);color:var(--ink);background:var(--surface-2);}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff;}
.btn.primary:hover{filter:brightness(1.08);}
.btn:disabled{opacity:.45;cursor:not-allowed;}

/* ---------- 容器 ---------- */
.wrap{max-width:1560px;margin:0 auto;padding:24px 28px 64px;}

/* ---------- 分区选择器 ---------- */
.partbar{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:15px 18px 16px;margin-bottom:18px;
}
.partbar-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px;}
.partbar-head .t{font-size:14.5px;font-weight:720;letter-spacing:-.15px;}
.partbar-head .s{font-size:12px;color:var(--ink-3);}
.part-groups{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:820px){.part-groups{grid-template-columns:1fr;}}
.pgroup{
  border:1px solid var(--line);border-radius:11px;padding:11px 13px 12px;
  background:var(--surface-2);position:relative;overflow:hidden;
}
.pgroup::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--pg,var(--brand));}
.pgroup.g13{--pg:var(--c-v13);}
.pgroup.g15{--pg:var(--c-v15);}
.pgroup-h{display:flex;align-items:center;gap:9px;margin-bottom:9px;flex-wrap:wrap;}
.pgroup-n{font-size:13px;font-weight:730;letter-spacing:-.1px;color:var(--pg);}
/* v1.3 组名用品牌蓝（跟随主题，暗色下自动换成 #5b8def）；只改文字色，左侧色条仍走 --pg */
.pgroup.g13 .pgroup-n{color:var(--brand);}
.pgroup-note{font-size:11px;color:var(--ink-4);font-weight:600;}
.segs{display:flex;gap:8px;flex-wrap:wrap;}
.seg{
  appearance:none;font-family:inherit;cursor:pointer;text-align:left;
  border:1px solid var(--line);background:var(--surface);border-radius:9px;
  padding:7px 12px;min-width:132px;transition:.15s;color:var(--ink-2);
  display:flex;align-items:center;gap:8px;
}
.seg:hover{border-color:var(--ink-4);}
.seg .seg-n{font-size:12.5px;font-weight:680;}
.seg .seg-c{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--ink-4);
  background:var(--line-2);border-radius:99px;padding:1px 7px;}
.seg.on{border-color:var(--pg,var(--brand));background:var(--pgs,var(--brand-soft));}
.seg.on .seg-n{color:var(--pg,var(--brand));}
.seg.on .seg-c{background:var(--pg,var(--brand));color:#fff;}

/* ---------- 口径提示 ---------- */
.note{
  font-size:12.5px;color:var(--ink-2);background:var(--brand-soft);border:1px solid color-mix(in srgb,var(--brand) 22%,transparent);
  border-left:3px solid var(--brand);border-radius:var(--radius-sm);padding:11px 14px;margin-bottom:18px;
}
.note b{color:var(--ink);}
.note.warn{background:var(--c-v15-soft);border-color:color-mix(in srgb,var(--c-v15) 26%,transparent);border-left-color:var(--c-v15);}
.note.quiet{background:var(--surface-2);border-color:var(--line);border-left-color:var(--ink-4);}

/* ---------- KPI ---------- */
/* grid-auto-rows:1fr —— 「测试数据」卡内有两行，若不拉平，含它的那一行会比
   其余行高十几像素，整排参差 */
.kpi-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
  grid-auto-rows:1fr;gap:14px;margin-bottom:20px;
}
/* 卡片增至 7 张后，auto-fit 在 1400 以下只排得下 6 列，第 7 张会孤零零落在
   第二行首列、右侧大片空白；故窄屏改为固定 4 列（7 张 = 4+3），更窄时 2 列 */
@media(max-width:1400px){.kpi-row{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media(max-width:720px){.kpi-row{grid-template-columns:repeat(2,minmax(0,1fr));}}
.kpi{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:15px 17px 14px;box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.kpi::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--k-c,var(--brand));}
.kpi-k{font-size:11.5px;color:var(--ink-3);font-weight:600;letter-spacing:.02em;}
.kpi-v{font-size:27px;font-weight:760;letter-spacing:-.9px;margin-top:3px;line-height:1.15;}
.kpi-u{font-size:12px;color:var(--ink-4);font-weight:600;margin-left:3px;}
.kpi-x{font-size:11.5px;color:var(--ink-4);margin-top:2px;}
/* 标题行末尾的四项合计。它是派生值、不是第五项指标，所以不借用四色中的
   任何一色，留在标题的灰阶里；只把数字提一档（12.5px / 760 / ink-2），
   视线能落下来，又压不过下面四格 */
.kpi-tot{margin-left:7px;font-size:10.5px;font-weight:500;color:var(--ink-4);white-space:nowrap;}
.kpi-tot b{font-size:12.5px;font-weight:760;color:var(--ink-2);}

/* 「测试数据」卡：四项测试各自的记录数，2×2 紧凑格。
   左侧色条用四色渐变，指代卡内的四项，不占用任何单色语义 */
.kpi.kpi-data{--k-c:linear-gradient(180deg,
  var(--c-int-single) 0 25%,var(--c-float-single) 0 50%,
  var(--c-int-conc) 0 75%,var(--c-float-conc) 0 100%);}
.kpi-cells{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 10px;margin-top:4px;}
.kpi-cell{display:flex;align-items:baseline;gap:4px;min-width:0;}
.kpi-cell b{font-size:15px;font-weight:760;letter-spacing:-.5px;color:var(--c);line-height:1.3;}
.kpi-cell>span{font-size:10px;font-weight:600;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ---------- 工具栏 ---------- */
/* 搜索框贴左沿，筛选依次排开，结果计数靠右（margin-left:auto）。
   计数挤不下时才换行，且 auto 外边距按 0 参与折行计算，不会被撑到单独一行 */
.toolbar{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:13px 16px;box-shadow:var(--shadow);margin-bottom:20px;
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;
}
.toolbar .chip-count{margin-left:auto;white-space:nowrap;}
.field{display:flex;align-items:center;gap:8px;}
.field label{font-size:12px;color:var(--ink-3);font-weight:650;white-space:nowrap;}
input[type=search],select{
  font-family:inherit;font-size:13px;color:var(--ink);background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:7.5px 11px;outline:none;
  transition:.15s;
}
input[type=search]{flex:0 0 auto;width:368px;max-width:100%;}
input[type=search]:focus,select:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);}
/* 筛选控件增至 5 个后，下拉宽度按最宽选项撑到 210px 会把整排挤成两行；
   统一收到 150px 并给省略号（下拉展开时选项仍是全称），让 1600 及以上宽度保持单行 */
select{cursor:pointer;max-width:150px;text-overflow:ellipsis;}
.chip-count{
  font-family:var(--mono);font-size:11.5px;background:var(--brand-soft);color:var(--brand);
  border-radius:99px;padding:3px 9px;font-weight:700;
}

/* ---------- Tabs ---------- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:22px;}
.tab{
  appearance:none;border:0;background:none;font-family:inherit;font-size:13.5px;font-weight:650;
  color:var(--ink-3);padding:10px 15px;cursor:pointer;position:relative;border-radius:8px 8px 0 0;
}
.tab:hover{color:var(--ink);background:var(--surface-2);}
.tab.on{color:var(--brand);}
.tab.on::after{content:"";position:absolute;left:11px;right:11px;bottom:-1px;height:2.5px;background:var(--brand);border-radius:3px 3px 0 0;}
.view{display:none;}
.view.on{display:block;animation:fade .28s ease;}
@keyframes fade{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion: reduce){
  .view.on{animation:none;}
  *{transition:none !important;}
}

/* ---------- 卡片 ---------- */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px 20px 16px;margin-bottom:18px;
}
.card-head{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:14px;}
.card-t{font-size:14.5px;font-weight:720;letter-spacing:-.15px;}
.card-s{font-size:12px;color:var(--ink-3);margin-top:2px;}
.card-head .spacer{flex:1;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media(max-width:1100px){.grid2{grid-template-columns:1fr;}}
.chart{width:100%;height:400px;}
.chart.sm{height:330px;}
.chart.lg{height:470px;}
.chart-scroll{max-height:520px;overflow-y:auto;overflow-x:hidden;border-radius:var(--radius-sm);}
.chart-scroll .chart{height:470px;}

/* 散点图：整宽卡片下 470px 显得过扁，加高到 680px 让作图区接近 2:1。
   用 id 选择器单独设高（权重高于 .chart.lg），不动被对比页三张图共用的 .chart.lg。 */
#chart-scatter{height:680px;}

/* ---------- 排行榜：左排行 + 右厂商占比 ---------- */
/* 卡片内左右分栏：左栏排行收窄（分值横条随之变短）、右栏固定 420px 放厂商占比饼图。
   .rank-left 必须 min-width:0 —— 否则 grid 项会被内容顶宽，左栏根本收不窄。
   右栏 320→420 是为了把环放大到约 261px 且与右侧竖排图例零重叠（320 宽下两者几何上必重叠）。 */
.rank-split{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:18px;align-items:start;}
.rank-left{min-width:0;}
.rank-right{min-width:0;display:flex;flex-direction:column;}
.pie-sub{font-size:11.5px;color:var(--ink-3);margin:0 0 6px;text-align:center;}
#chart-pie{width:100%;height:470px;}
/* 窄屏堆叠：饼图落到排行榜下方。断点 1200→1300 —— 分栏态左栏宽 = 视口 − 536px
   （56 wrap padding + 2 卡片 border + 40 卡片 padding + 420 右栏 + 18 gap；右栏加宽 100 故断点同步 +100），
   横条绘图区才能不低于今天的地板 213px（视口 1201 的实测值）。 */
@media(max-width:1300px){
  .rank-split{grid-template-columns:1fr;}
  #chart-pie{height:360px;}
}

/* ---------- 分区构成表 ---------- */
.part-table{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px;}
.part-table th,.part-table td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--line-2);white-space:nowrap;}
.part-table thead th{font-size:11.5px;color:var(--ink-3);font-weight:700;letter-spacing:.03em;background:var(--surface-2);border-bottom:1px solid var(--line);}
.part-table td.r{text-align:right;}
.part-table th.c,.part-table td.c{text-align:center;}
.part-table tbody tr{cursor:pointer;}
.part-table tbody tr:hover{background:var(--surface-2);}
.part-table tbody tr.cur{background:var(--brand-soft);}
.part-table tbody tr.cur td:first-child{box-shadow:inset 3px 0 0 var(--brand);}

/* ---------- 图例色点 ---------- */
.dot{width:9px;height:9px;border-radius:3px;display:inline-block;flex:none;}
.legend-inline{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--ink-2);font-weight:600;}
.legend-inline span{display:inline-flex;align-items:center;gap:6px;}

/* ---------- 排名依据切换 ---------- */
.rank-pill{cursor:pointer;user-select:none;padding:4px 10px;border-radius:99px;
  border:1px solid transparent;color:var(--ink-3);transition:.15s;}
.rank-pill.on{font-weight:700;}
.rank-pill:not(.on):hover{border-color:var(--line);background:var(--surface-2);color:var(--ink-2);}

/* ---------- 徽章 ---------- */
.tag{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:5px;
  background:var(--brand-soft);color:var(--brand);letter-spacing:.02em;}
.tag.red{background:rgba(220,38,38,.10);color:var(--warn);}
.tag.green{background:rgba(22,163,74,.12);color:var(--ok);}
.tag.gray{background:var(--line-2);color:var(--ink-3);}
.tag.v13{background:var(--c-v13-soft);color:var(--c-v13);}
/* 「数据分区构成」表里 v1.3 的标签改用品牌蓝，与上方「数据分区」选择器的组名
   （.pgroup.g13 .pgroup-n）同色——同一版本在同一屏里不该出现两种「身份色」。
   v1.5 那边本就用 --c-v15，与 .pgroup.g15 一致，无需处理。
   作用域限定在 .part-table：数据明细等其它表格维持原有版本色体系。 */
.part-table .tag.v13{background:var(--brand-soft);color:var(--brand);}
.tag.v15{background:var(--c-v15-soft);color:var(--c-v15);}
.tag.srv{background:rgba(22,163,74,.12);color:var(--ok);}
.tag.nonsrv{background:var(--line-2);color:var(--ink-3);}

/* ---------- 分数认证标记（速览矩阵 / 数据明细） ----------
   已认证＝琥珀金圆底对勾（一眼可辨）；未认证＝低对比破折号（不抢视线） */
.cert-yes{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  border-radius:50%;background:var(--cert-soft);color:var(--cert);
  font-size:11px;font-weight:900;line-height:1;vertical-align:middle;}
.cert-no{color:var(--ink-4);}

/* ---------- 表格 ---------- */
.table-scroll{overflow:auto;border:1px solid var(--line);border-radius:var(--radius-sm);max-height:640px;}
table.data{border-collapse:separate;border-spacing:0;width:100%;font-size:12.5px;min-width:1220px;}
table.data th,table.data td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--line-2);white-space:nowrap;}
/* 矩阵表「整机厂商」列宽 154px，装不下 17 字全称，故允许折行。
   注意：折行必须走这里而不是内联样式——内联 white-space:normal 会让该列成为
   表格里唯一可压缩的列，窄屏下被挤到 77px、全称折成 4 行把行高撑到 77px。
   窄屏改为 nowrap，靠 min-content 撑开列宽（见下方媒体查询）。 */
.maker-cell{font-size:11.5px;white-space:normal;}
table.data thead th{
  position:sticky;top:0;z-index:3;background:var(--surface-2);color:var(--ink-3);
  font-size:11.5px;font-weight:700;letter-spacing:.03em;border-bottom:1px solid var(--line);
  cursor:pointer;user-select:none;
}
table.data thead th:hover{color:var(--ink);}
table.data thead th .arrow{opacity:.35;font-size:10px;margin-left:3px;}
table.data thead th.sorted .arrow{opacity:1;color:var(--brand);}
table.data tbody tr{background:var(--surface);}
table.data tbody tr:hover{background:var(--surface-2);}
table.data td.r{text-align:right;}
table.data td.c{text-align:center;}
.cell-strong{font-weight:680;color:var(--ink);}
.bar-cell{display:flex;align-items:center;gap:8px;justify-content:flex-end;}
.bar-mini{height:5px;border-radius:3px;min-width:2px;max-width:90px;}
input.ck{appearance:none;width:16px;height:16px;border:1.5px solid var(--ink-4);border-radius:4.5px;cursor:pointer;position:relative;flex:none;background:var(--surface);}
input.ck:checked{background:var(--brand);border-color:var(--brand);}
input.ck:checked::after{content:"";position:absolute;left:4.6px;top:1.6px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(43deg);}

/* ---------- 「测试数据明细」整表左对齐，仅 4 个短数值列（Socket数量/架构/总线程数/并发任务数）居中 ---------- */
#tbl-main th,#tbl-main td{text-align:left;}
#tbl-main th.ctr,#tbl-main td.ctr{text-align:center;}
#tbl-main .bar-cell{justify-content:flex-start;gap:9px;}
#tbl-main .empty{text-align:center;}

/* ---------- 「相对基准倍数表」：首列测试项保持左对齐，其余各列（含表头产品名）整列居中 ---------- */
#tbl-ratio th,#tbl-ratio td{text-align:center;}
#tbl-ratio th:first-child,#tbl-ratio td:first-child{text-align:left;}
#tbl-ratio td.empty{text-align:center;}

/* ---------- 对比选择器 ---------- */
.picker{
  display:flex;gap:8px;flex-wrap:wrap;max-height:196px;overflow:auto;
  padding:12px;background:var(--surface-2);border:1px dashed var(--line);border-radius:var(--radius-sm);
}
.pick{
  display:inline-flex;align-items:center;gap:8px;padding:6px 11px;border-radius:99px;
  border:1px solid var(--line);background:var(--surface);cursor:pointer;font-size:12.5px;
  font-weight:630;color:var(--ink-2);transition:.14s;user-select:none;
}
.pick:hover{border-color:var(--ink-4);}
.pick.on{border-color:var(--brand);background:var(--brand-soft);color:var(--brand);}
.pick .sw{width:8px;height:8px;border-radius:50%;flex:none;}

/* ---------- 明细面板 ---------- */
.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px 26px;}
.opt-row{display:grid;grid-template-columns:200px 1fr;gap:14px;align-items:start;}
@media(max-width:660px){.opt-row{grid-template-columns:1fr;gap:6px;}}
.dl{display:flex;gap:10px;font-size:12.5px;padding:6px 0;border-bottom:1px dashed var(--line-2);}
.dl dt{color:var(--ink-3);flex:none;min-width:96px;font-weight:600;}
.dl dd{margin:0;color:var(--ink);word-break:break-all;}

/* ---------- 弹窗 ---------- */
.modal{position:fixed;inset:0;z-index:100;display:none;}
.modal.on{display:block;}
.modal-bg{position:absolute;inset:0;background:rgba(9,12,18,.5);backdrop-filter:blur(3px);}
.modal-box{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(1080px,94vw);max-height:88vh;overflow:auto;background:var(--surface);
  border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:22px 24px 26px;
}
.modal-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px;}
.modal-head h3{margin:0;font-size:17px;font-weight:750;letter-spacing:-.2px;line-height:1.35;}
.modal-close{margin-left:auto;appearance:none;border:1px solid var(--line);background:var(--surface);width:32px;height:32px;border-radius:9px;cursor:pointer;color:var(--ink-3);font-size:16px;line-height:1;flex:none;}
.modal-close:hover{color:var(--ink);border-color:var(--ink-4);}

.empty{color:var(--ink-4);font-size:13px;text-align:center;padding:40px 0;}

/* ---------- 页脚 ---------- */
footer{
  max-width:1560px;margin:0 auto;padding:22px 28px 40px;color:var(--ink-4);
  font-size:12px;border-top:1px solid var(--line);
}
footer .fr{display:flex;gap:18px;flex-wrap:wrap;align-items:center;}
/* 备案信息：置于页脚右下角（单独一行、右对齐），不参与 .fr 的换行排布 */
footer .fr-foot{display:flex;justify-content:flex-end;margin-top:10px;}
/* 常态与页脚正文同级（不喧哗），悬停才亮成品牌蓝 —— 与顶栏「代码仓库」外链同一套处理 */
a.beian{color:var(--ink-4);text-decoration:none;transition:color .15s;}
a.beian:hover,a.beian:focus-visible{color:var(--brand);text-decoration:underline;text-underline-offset:3px;}

::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px;border:2px solid var(--bg);}
::-webkit-scrollbar-thumb:hover{background:var(--ink-4);}

/* ========== 窄屏适配（手机） ==========
   依据：320 / 360 / 390 / 414 / 430 五档真机宽度无头实测。
   修前页面实际宽度被顶到 568px（溢出 154～248px，即比屏幕宽 40%～78%），
   根因两处：① .brand 内层文本块不收缩（已在上面修）；② 搜索框固定 368px。
   本节统一在 720px 以下收边距、改控件排布、去嵌套滚动。
   放在文件末尾，同特异性下覆盖前面的桌面规则。 */
@media(max-width:720px){
  .topbar-in{padding:12px 14px;gap:12px;}
  .brand-mark{width:38px;height:38px;border-radius:10px;}
  .brand-title{font-size:16.5px;letter-spacing:-.3px;}
  .brand-sub{font-size:11.5px;white-space:normal;line-height:1.45;margin-top:2px;}
  .btn{padding:7px 11px;font-size:12.5px;}

  .wrap{padding:16px 14px 48px;}
  .partbar{padding:13px 14px 14px;margin-bottom:14px;}
  .card{padding:14px 14px 12px;margin-bottom:14px;}
  .card-t{font-size:13.5px;}

  /* 筛选区：搜索独占一行，其余两列；标签移到控件上方 */
  .toolbar{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px 14px;align-items:end;}
  .field{display:flex;flex-direction:column;align-items:stretch;gap:4px;min-width:0;}
  .field:first-child{grid-column:1/-1;}
  .field label{font-size:11.5px;}
  input[type=search]{width:100%;flex:1 1 auto;}
  select{width:100%;max-width:none;}
  .toolbar .chip-count{margin-left:0;grid-column:1/-1;justify-self:start;}

  .tabs{overflow-x:auto;margin-bottom:16px;}
  .tab{padding:9px 12px;font-size:13px;}

  /* 图表：手机上一屏放不下 470px，收到 330px；去掉盒内纵向嵌套滚动 */
  .chart,.chart.lg,.chart-scroll .chart{height:330px;}
  .chart-scroll{max-height:none;overflow:visible;}
  /* 饼图与散点图是用 id 设高的（权重高于上面这条 class 规则），故此处必须用同权重的 id 覆盖，
     否则手机上 #chart-scatter 仍是 680px、#chart-pie 仍是 1300 断点的 360px。 */
  #chart-pie{height:320px;}
  #chart-scatter{height:420px;}

  /* 表格仍保持内部横滚（宽表不可避免），但收窄行列留白与字号，减少滑动距离 */
  .table-scroll{max-height:none;}
  table.data{font-size:11.5px;}
  table.data th,table.data td{padding:7px 9px;}
  .maker-cell{white-space:nowrap;}
  .part-table{font-size:11.5px;}
  .part-table th,.part-table td{padding:7px 9px;}

  .modal-box{padding:16px 14px 20px;width:94vw;}
  .modal-head h3{font-size:15px;}
  footer{padding:18px 14px 32px;}
  .dl{flex-direction:column;gap:2px;}
  .dl dt{min-width:0;}
}

/* 超窄屏（≤360）：KPI 卡内四格由 2×2 改竖排。
   2×2 在 414/390 下每格仍有 74～75px，项名放得下；到 360 以下每格只剩约 57px 才需要竖排。
   断点若放在 420，会让 390～414 这一档无谓地变高（卡高 99→148px），六张卡白出大片空白。 */
@media(max-width:360px){
  .kpi-cells{grid-template-columns:1fr;}
}