/* CatNIP BF16 · KV Cache Q/K/S 精细分析 —— 样式表
 * 由原深色主题转换为主站浅色配色；调色在 :root，改主题优先改那里。
 * .legend 的渐变必须与 assets/js/kv-fine.js 里的 turbo 色表保持一致。
 */

/* ============================================================================
   CatNIP BF16 · KV Cache Q/K/S 报告 —— 浅色主题
   Theme B：数据密集型可读性优先（表格 / 矩阵 / 数字长时间阅读）

   原则
   1. 只改颜色相关声明；所有选择器、grid/flex/尺寸/间距/圆角保持原样。
   2. 变量值直接复用主站 index 的调色板，不新造色相。
   3. 层次靠"面"（paper < surface-2 < surface）与斑马纹做，不靠加重边框：
      分隔线用 --line-soft，容器外框才用 --line。
   4. --teal(#118a80) 在 paper 上只有 3.81:1 → 只做描边/填充，绝不做小字；
      文字强调一律用 --teal-dark(#08675f)。

   关键对比度（WCAG AA 阈值 4.5:1，全部实测通过）
     --ink #152337   on --paper #f5f3ed ............ 14.26:1
     --ink           on --surface #fffdf9 .......... 15.57:1
     --muted #5f6c7c on --paper .....................  4.82:1
     --muted         on --surface ...................  5.27:1
     --muted         on --surface-2 #edf3f1 .........  4.76:1
     --muted         on 斑马纹 #f6f8f7 ..............  5.02:1
     --muted         on 行悬停 #eef1f0 ..............  4.71:1
     --cyan  #08675f on --paper .....................  6.07:1
     --cyan          on --surface ...................  6.63:1
     --navy  #18334f on 表头 #edf2f0 ................ 11.42:1
     --ink-soft      on pre/#detailHover 底 ......... ~10.1:1
     cache sink  #80550b on #fff0cf .................  5.78:1
     cache recent#07584f on #e0f2ec .................  7.18:1
     cache current#8a3022 on #f9e7e2 ................  6.95:1

   热力图像素配色在 JS 里（turbo / diverge colormap）——未改动。
   .legend 的渐变值 = turbo 色标本身，因此逐字保留，只补一圈描边让它
   在浅底上不至于"悬空"。
   ========================================================================= */

:root{
  /* —— 主站调色板（与 index.css 的 :root 同值）—— */
  --paper:#f5f3ed;
  --surface:#fffdf9;
  --surface-2:#edf3f1;
  --navy:#18334f;
  --teal:#118a80;
  --teal-dark:#08675f;
  --amber:#e6a43a;
  --coral:#d7624e;
  --violet:#7161a8;
  --shadow:0 18px 60px rgba(28,49,68,.09);

  /* —— 原深色变量 → 浅色语义等价物 —— */
  --bg:var(--paper);          /* #0a0c10 → 页面纸底 */
  --panel:var(--surface);     /* #12161d → 一级卡片面 */
  --panel2:var(--surface-2);  /* #171c25 → 二级/内嵌托盘面 */
  --ink:#152337;              /* #f2f5f7 → 正文 */
  --muted:#5f6c7c;            /* #a3adba → 次要文字，仍 ≥4.5:1 */
  --line:#d8dedc;             /* #29313d → 容器外框 */
  --cyan:var(--teal-dark);    /* #53d3c8 → 强调色，取文字安全的深青 */

  /* —— 为浅底新增的辅助值 —— */
  --ink-soft:#2c3e52;         /* 密集正文/等宽读数：比 ink 柔和，仍 ~10:1 */
  --line-soft:#e4eae8;        /* 表格行分隔：克制的发丝线 */
  --shadow-soft:0 10px 34px rgba(28,49,68,.055);  /* 浅底重算，不用 #0005 */
  --ring:rgba(21,35,55,.09);  /* 图像/色标的 1px 描边，不占布局 */

  --row-alt:#f6f8f7;          /* 斑马纹 */
  --row-hover:#eef1f0;        /* 悬停：中性灰，与青色系的选中态区分 */
  --row-active:#ddefeb;       /* 选中：青色系，另有 3px 青色内阴影为主信号 */

  /* 语义三色（与主站 badge 一致，色相互不混淆：琥珀 / 青 / 珊瑚）*/
  --amber-bg:#fff0cf;  --amber-ink:#80550b;
  --teal-bg:#e0f2ec;   --teal-ink:#07584f;
  --coral-bg:#f9e7e2;  --coral-ink:#8a3022;

  --mono:"SFMono-Regular",Consolas,monospace;
  --sans:Inter,ui-sans-serif,system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;

  color-scheme:light;         /* 原生 select 下拉与滚动条跟着变浅 */
}

*{box-sizing:border-box}

/* 深色的 #18303b 光晕在浅底会发脏 → 换成主站同款低透明度青/琥珀双光晕 */
body{
  margin:0;
  background:
    radial-gradient(circle at 20% -10%,rgba(17,138,128,.13) 0,transparent 34%),
    radial-gradient(circle at 92% 3%,rgba(230,164,58,.10) 0,transparent 26%),
    var(--bg);
  background-repeat:no-repeat;  /* 背景传播到视口时不重复平铺，避免出现色带接缝 */
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.wrap{width:min(1500px,calc(100% - 36px));margin:auto}
header{padding:72px 0 38px;border-bottom:1px solid var(--line)}

.eyebrow,.kicker{font:700 11px/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}
h1{font-size:clamp(36px,6vw,78px);line-height:.98;letter-spacing:-.05em;margin:13px 0 22px;max-width:1050px;color:var(--ink)}
h2{font-size:30px;letter-spacing:-.03em;margin:0 0 12px;color:var(--ink)}
h3{font-size:19px;margin:6px 0;color:var(--navy)}
p{color:var(--muted)}
.lead{font-size:18px;max-width:930px;color:#405166}   /* 主站 hero-lead 同色，7.3:1 */

.facts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:32px}
.fact{background:rgba(255,253,249,.82);border:1px solid var(--line);padding:14px;border-radius:12px}
.fact b{display:block;font:650 21px var(--mono);color:var(--navy)}
.fact span{font-size:12px;color:var(--muted)}
section{padding:48px 0;border-bottom:1px solid var(--line)}

.section-head{display:flex;gap:24px;justify-content:space-between;align-items:end;margin-bottom:22px}
.section-head p{max-width:760px;margin:0}
.panel{background:linear-gradient(145deg,var(--panel),#f7faf8);border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:var(--shadow-soft)}
.findings{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
.findings ol{margin:0;padding-left:22px}
.findings li{padding:8px 0;color:var(--ink-soft)}
code,.micro,pre{font-family:var(--mono)}
code{color:var(--teal-dark)}              /* 行内代码在 muted 段落里可辨，6.1:1 */
.micro{font-size:11px;color:var(--muted);overflow-wrap:anywhere}

.videos{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.video-card{overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:14px}
.video-card video{display:block;width:100%;aspect-ratio:480/832;background:var(--surface-2)}  /* 加载占位不再是黑块 */
.video-copy{padding:17px}
details{color:var(--muted);margin:10px 0}
pre{white-space:pre-wrap;font-size:11px;background:#f4f7f5;color:var(--ink-soft);box-shadow:inset 0 0 0 1px var(--line-soft);padding:12px;border-radius:8px;max-height:280px;overflow:auto}

.controls{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
select{display:block;margin-top:5px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:9px 28px 9px 10px;min-width:150px}
.overview-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:16px}
/* 热力图像素由 JS 画（turbo/diverge，未动）；这里只给画布一个浅底 + 1px 描边，
   使深色低值区读作"图片版面"而不是页面上的洞。box-shadow 不占布局。 */
canvas{width:100%;display:block;background:#eef2f0;box-shadow:0 0 0 1px var(--ring);border-radius:8px;image-rendering:pixelated}
#overviewCanvas{height:620px}
/* ↓ 这条渐变就是 JS turbo colormap 的取样点，必须与之逐位一致，故原样保留 */
.legend{height:10px;background:linear-gradient(90deg,#f5f3ed,#78c4ba,#42b6a4,#ffd166,#ef476f);box-shadow:0 0 0 1px var(--ring);border-radius:20px;margin:12px 0 4px}

.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.heat-card{background:var(--panel2);border:1px solid var(--line);padding:14px;border-radius:12px;min-width:0}
.heat-card canvas{height:390px}
.heat-title{display:flex;justify-content:space-between;gap:12px;font:650 13px var(--mono);color:var(--navy);margin-bottom:8px}
.matrix-note{font-size:11px;color:var(--muted);margin:8px 0 0}
.case-note{background:#ebf7f4;border:1px solid #b8dbd4;border-left:3px solid var(--cyan);border-radius:10px;padding:12px 14px;margin:0 0 14px;color:var(--ink-soft)}
.layer-map{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.layer-pill{background:#edf2f0;border:1px solid var(--line);border-radius:30px;padding:6px 10px;font:11px var(--mono);color:var(--navy)}
.cachebar{display:flex;min-height:46px;margin:12px 0 15px;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--surface-2)}
/* 三段语义色：sink=琥珀 / recent=青 / current=珊瑚，与主站 badge 同源，
   浅底上改为"淡底 + 同色系深字"，色相区分度保持，且各自 ≥5.7:1。
   段间用 inset 阴影分隔（不用 border，避免改变 flex 宽度）。 */
.cache-seg{min-width:0;display:flex;align-items:center;justify-content:center;padding:7px;text-align:center;font:11px var(--mono);color:var(--navy);box-shadow:inset -1px 0 0 rgba(21,35,55,.10)}
.cache-seg.sink{background:var(--amber-bg);color:var(--amber-ink)}
.cache-seg.recent{background:var(--teal-bg);color:var(--teal-ink)}
.cache-seg.current{background:var(--coral-bg);color:var(--coral-ink)}
.cache-seg.zero{display:none}
#detailHover{margin:12px 0 0;background:#f2f6f4;border:1px solid var(--line);border-radius:9px;padding:11px 13px;min-height:46px;font:12px var(--mono);color:var(--ink-soft)}
#captureMeta{margin-top:14px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.metric{padding:10px;background:var(--surface);border:1px solid var(--line);border-radius:9px}
.metric span{display:block;color:var(--muted);font-size:11px}
.metric b{font:600 13px var(--mono);color:var(--navy)}

/* —— 表格：白面 + 发丝线 + 斑马纹，长时间读数字的主战场 —— */
.scroll{overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.layer-sweep{margin:14px 0}
.layer-sweep tbody tr{cursor:pointer}
.layer-sweep tbody tr.active-row{background:var(--row-active);box-shadow:inset 3px 0 var(--cyan)}
table{width:100%;border-collapse:collapse;font-size:12px}
/* sticky 表头：border-collapse 下滚动时边框会丢，用 inset 阴影补一条底线 */
th{position:sticky;top:0;background:#edf2f0;color:var(--navy);box-shadow:inset 0 -1px 0 var(--line);text-align:left;font:650 11px var(--mono);text-transform:uppercase}
th,td{padding:10px 12px;border-bottom:1px solid var(--line-soft);white-space:nowrap}
td:last-child{white-space:normal;min-width:280px}
tbody tr:nth-child(even){background:var(--row-alt)}
tbody tr:hover{background:var(--row-hover)}
.method{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
/* .note 原本无边框；浅底上白面与纸底只差 1.05:1，用柔和投影替代描边做分离 */
.note{background:var(--panel);border-left:3px solid var(--cyan);box-shadow:var(--shadow-soft);padding:14px 16px;color:var(--muted)}
footer{padding:35px 0 70px;color:var(--muted);font-size:12px}

@media(max-width:1000px){
  .facts{grid-template-columns:repeat(2,1fr)}
  .videos,.detail-grid{grid-template-columns:1fr}
  .findings,.overview-grid,.method{grid-template-columns:1fr}
  #overviewCanvas{height:520px}
  .heat-card canvas{height:330px}
  #captureMeta{grid-template-columns:repeat(2,1fr)}
}

/* 打印：纸底换纯白，去掉投影，热力图保留（-webkit-print-color-adjust 由浏览器决定） */
@media print{
  body{background:#fff}
  .panel,.note,.scroll{box-shadow:none}
}


/* ---- 返回主报告 ---- */
.nav-home {
  display: inline-block;
  margin-bottom: 14px;
  font: 700 12px/1.2 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cyan);
  text-decoration: none;
}
.nav-home:hover { text-decoration: underline; }
.nav-home span { padding-right: 2px; }