/* =====================================================================
 * LB11 · 工具站 UI 重设计 v9「棱镜台 PRISM BENCH」· 设计基座
 * ---------------------------------------------------------------------
 * 与站内既有批次（tool-station 蓝、LIFE12 冷墨、FL10 冰鲜、B29 暖纸…）
 * 在视觉语言上完全区隔，本批 60 页共用这一套基座，每页再叠加自己的
 * 色板与「视觉母题」，因此 60 页既有统一秩序，又互不相同。
 *
 * 本批的 6 个识别特征：
 *   1. 制图纸底纹：两层 repeating-linear-gradient 网格，纯 CSS、零图片请求；
 *   2. 切角卡片：clip-path 挖右上角，模拟绘图仪切边，不使用圆角卡片；
 *   3. 左侧索引栏：每个区块有超大号压缩数字（01 / 02 / 03），贴在左边距；
 *   4. 分段仪表：进度不用连续条，改成离散格块（.b11-seg）；
 *   5. 读数条：结果用「标签 ｜ 数值 ｜ 单位」细线表呈现（.b11-readout）；
 *   6. 墨黑中性色 + 每页一组棱镜色，字体层级 6 级、等宽表格数字。
 *
 * 作用域：所有选择器限定在 .b11 容器内，绝不外溢到任何线上已有页面。
 * 深浅主题：只读公共导航 #themeToggle 写入的 <html data-theme>；
 *          auto 跟随系统，light / dark 由 localStorage.theme 记忆。
 * 性能：无网络字体、无第三方 JS、无外链图片，静态资源经 cdn_asset() 输出。
 * ===================================================================== */

.b11 {
    /* ---------- 中性色板（每页 CSS 只覆盖 --b11-pri / --b11-pri2 / --b11-tint / --b11-bg 等） ---------- */
    --b11-bg: #f1f1ee;
    --b11-bg2: #e5e5e0;
    --b11-card: #ffffff;
    --b11-card2: #f7f7f4;
    --b11-ink: #1b1d21;
    --b11-sub: #50555e;
    --b11-mute: #838a95;
    --b11-line: #dededa;
    --b11-line2: #c6c8c1;
    --b11-pri: #2f4fd0;
    --b11-pri2: #6a3fd8;
    --b11-tint: #e6eafc;
    --b11-on: #ffffff;
    --b11-ok: #1f7a4d;
    --b11-warn: #96650c;
    --b11-bad: #b3373c;
    --b11-okbg: #e3f1e8;
    --b11-warnbg: #f7eed7;
    --b11-badbg: #f8e4e5;

    /* ---------- 字体层级 ---------- */
    --b11-font: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Source Han Sans SC",
        "Noto Sans CJK SC", "Segoe UI", system-ui, sans-serif;
    --b11-mono: "Bahnschrift", "SFMono-Regular", "JetBrains Mono", Consolas, "Liberation Mono", monospace;
    --b11-xs: 12px;
    --b11-sm: 13.5px;
    --b11-base: 15.5px;
    --b11-md: 17.5px;
    --b11-lg: 21px;
    --b11-h1: clamp(29px, 4.2vw, 44px);
    --b11-num: clamp(26px, 3.4vw, 38px);
    --b11-lh: 1.82;
    --b11-tight: 1.28;

    --b11-r: 4px;
    --b11-r-sm: 3px;
    --b11-cut: 16px;
    --b11-shadow: 0 1px 2px rgba(27, 29, 33, .05), 0 10px 26px rgba(27, 29, 33, .06);
    --b11-maxw: 1180px;
    --b11-gap: 18px;
    --b11-grid: 34px;

    box-sizing: border-box;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0 24px 72px;
    color: var(--b11-ink);
    font-family: var(--b11-font);
    font-size: var(--b11-base);
    line-height: var(--b11-lh);
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
    background-color: var(--b11-bg);
    background-image:
        linear-gradient(to right, color-mix(in srgb, var(--b11-line2) 44%, transparent) 1px, transparent 1px),
        linear-gradient(to bottom, color-mix(in srgb, var(--b11-line2) 44%, transparent) 1px, transparent 1px),
        linear-gradient(to right, color-mix(in srgb, var(--b11-line2) 16%, transparent) 1px, transparent 1px),
        linear-gradient(to bottom, color-mix(in srgb, var(--b11-line2) 16%, transparent) 1px, transparent 1px);
    background-size: var(--b11-grid) var(--b11-grid), var(--b11-grid) var(--b11-grid),
        calc(var(--b11-grid) / 4) calc(var(--b11-grid) / 4), calc(var(--b11-grid) / 4) calc(var(--b11-grid) / 4);
    background-position: -1px -1px;
}

.b11 *, .b11 *::before, .b11 *::after { box-sizing: border-box; }
.b11 [hidden] { display: none !important; }
.b11 p { margin: 0 0 14px; line-height: var(--b11-lh); }
.b11 p:last-child { margin-bottom: 0; }
.b11 b, .b11 strong { font-weight: 750; color: var(--b11-ink); }
.b11 a { color: var(--b11-pri); text-decoration: none; }
.b11 a:hover { opacity: .74; }
.b11 h1, .b11 h2, .b11 h3, .b11 h4 { margin: 0; font-weight: 800; line-height: var(--b11-tight); letter-spacing: -.018em; }
.b11 h2 { font-size: var(--b11-lg); }
.b11 h3 { font-size: var(--b11-md); }
.b11 h4 { font-size: var(--b11-base); }
.b11 ul, .b11 ol { margin: 0 0 14px; padding-left: 21px; }
.b11 li { margin-bottom: 6px; }
.b11 li::marker { color: var(--b11-pri); font-weight: 800; }
.b11 :focus-visible { outline: 3px solid var(--b11-pri); outline-offset: 2px; }
.b11 code { font-family: var(--b11-mono); font-size: .92em; background: var(--b11-card2); border: 1px solid var(--b11-line); padding: 1px 6px; border-radius: var(--b11-r-sm); }
.b11-inner { max-width: var(--b11-maxw); margin: 0 auto; }

/* ================= 1. 首屏 ================= */
.b11-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 34px;
    align-items: center;
    padding: 40px 0 30px;
    border-bottom: 1.5px solid var(--b11-line2);
}
.b11-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--b11-mono); font-size: var(--b11-xs); font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase; color: var(--b11-pri);
}
.b11-eyebrow::before {
    content: ""; width: 30px; height: 2px; background: var(--b11-pri); flex: none;
}
.b11-h1 {
    font-size: var(--b11-h1); letter-spacing: -.035em; margin: 12px 0 0;
    font-weight: 850;
}
.b11-h1 em {
    /* 主关键词与副标语分层：副标语缩到 62%，
       保证「主关键词 + 副标语」能在一行内排完，
       不会因为 em 的 nowrap 把主关键词从中间截断。 */
    font-style: normal;
    color: var(--b11-pri);
    font-size: .62em;
    letter-spacing: -.005em;
    white-space: nowrap;
}
.b11-h1 em::before {
    content: "·";
    color: var(--b11-line2);
    font-weight: 400;
    margin: 0 .38em;
}
.b11-lead {
    font-size: var(--b11-md); line-height: 1.75; color: var(--b11-sub);
    max-width: 760px; margin: 14px 0 0;
}
.b11-lead b { color: var(--b11-ink); box-shadow: inset 0 -.42em 0 var(--b11-tint); }
.b11-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.b11-pills span {
    font-size: var(--b11-xs); color: var(--b11-sub); padding: 5px 11px;
    border: 1px solid var(--b11-line2); background: var(--b11-card);
    font-family: var(--b11-mono); letter-spacing: .02em;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}
.b11-pills span::before { content: "// "; color: var(--b11-pri); font-weight: 700; }

/* ================= 2. 区块与索引栏 ================= */
.b11-sec { margin-top: 44px; }
.b11-sec-hd {
    display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
    padding-bottom: 12px; margin-bottom: 20px;
    border-bottom: 1px solid var(--b11-line2);
}
.b11-sec-hd .no {
    font-family: var(--b11-mono); font-size: 13px; font-weight: 800;
    color: var(--b11-pri); letter-spacing: .1em; white-space: nowrap;
    border: 1.5px solid var(--b11-pri); padding: 1px 8px;
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
}
.b11-sec-hd h2 { flex: 1 1 auto; }
.b11-sec-hd .note { font-size: var(--b11-sm); color: var(--b11-mute); }

/* ================= 3. 切角卡片 ================= */
.b11-panel {
    position: relative;
    background: var(--b11-card);
    border: 1px solid var(--b11-line);
    box-shadow: var(--b11-shadow);
    padding: 24px 26px;
    clip-path: polygon(0 0, calc(100% - var(--b11-cut)) 0, 100% var(--b11-cut), 100% 100%, 0 100%);
    margin-bottom: var(--b11-gap);
}
.b11-panel--flat { box-shadow: none; background: var(--b11-card2); }
.b11-panel--tint { box-shadow: none; background: var(--b11-tint); border-color: transparent; }
.b11-panel--edge { border-left: 4px solid var(--b11-pri); }
.b11-panel-hd {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.b11-panel-hd h2, .b11-panel-hd h3 { font-size: var(--b11-md); }
.b11-panel-hd .tip { font-size: var(--b11-xs); color: var(--b11-mute); font-family: var(--b11-mono); }
.b11-grid { display: grid; gap: var(--b11-gap); grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
.b11-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.b11-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.b11-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.b11-split { display: grid; gap: var(--b11-gap); grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: start; }

/* ================= 4. 表单件 ================= */
.b11-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.b11-field > label, .b11-label { font-size: var(--b11-sm); font-weight: 750; color: var(--b11-sub); }
.b11-hint { font-size: var(--b11-xs); color: var(--b11-mute); line-height: 1.68; font-weight: 400; }
.b11-inp, .b11-sel, .b11-ta {
    width: 100%; min-width: 0; padding: 11px 13px; font-family: inherit;
    font-size: var(--b11-base); line-height: 1.5; color: var(--b11-ink);
    background: var(--b11-card); border: 1.5px solid var(--b11-line2);
    border-radius: var(--b11-r-sm); transition: border-color .16s, box-shadow .16s, background .16s;
}
.b11-ta { min-height: 120px; resize: vertical; font-family: var(--b11-mono); font-size: var(--b11-sm); line-height: 1.78; }
.b11-inp:hover, .b11-sel:hover, .b11-ta:hover { border-color: var(--b11-pri); }
.b11-inp:focus, .b11-sel:focus, .b11-ta:focus {
    outline: none; border-color: var(--b11-pri); background: var(--b11-card);
    box-shadow: 0 0 0 3px var(--b11-tint);
}
.b11-inp[aria-invalid="true"], .b11-ta[aria-invalid="true"], .b11-sel[aria-invalid="true"] {
    border-color: var(--b11-bad); background: var(--b11-badbg);
}
.b11-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.b11-row > .b11-field { flex: 1 1 168px; }
.b11-chips, .b11-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.b11-chip {
    position: relative; display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    padding: 8px 14px; font-size: var(--b11-sm); border: 1.5px solid var(--b11-line2);
    background: var(--b11-card); color: var(--b11-sub); user-select: none; transition: all .15s;
    clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
}
.b11-chip:hover { border-color: var(--b11-pri); color: var(--b11-pri); }
.b11-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.b11-chip:has(input:checked) { background: var(--b11-pri); border-color: var(--b11-pri); color: var(--b11-on); font-weight: 750; }
.b11-chip:has(input:focus-visible) { outline: 3px solid var(--b11-tint); outline-offset: 2px; }
.b11-check {
    display: inline-flex; align-items: flex-start; gap: 9px; font-size: var(--b11-sm);
    color: var(--b11-sub); cursor: pointer; line-height: 1.6;
}
.b11-check input { accent-color: var(--b11-pri); margin-top: 4px; }

/* ================= 5. 按钮 ================= */
.b11-acts { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-top: 16px; }
.b11-btn {
    appearance: none; cursor: pointer; font-family: inherit; font-size: var(--b11-sm); font-weight: 750;
    padding: 10px 20px; border-radius: var(--b11-r-sm);
    border: 1.5px solid var(--b11-line2); background: var(--b11-card); color: var(--b11-sub);
    transition: all .15s; letter-spacing: .01em;
}
.b11-btn:hover:not(:disabled) { border-color: var(--b11-pri); color: var(--b11-pri); }
.b11-btn:active:not(:disabled) { transform: translateY(1px); }
.b11-btn:disabled { opacity: .5; cursor: not-allowed; }
.b11-btn--pri {
    background: var(--b11-pri); border-color: var(--b11-pri); color: var(--b11-on);
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
.b11-btn--pri:hover:not(:disabled) { background: var(--b11-pri2); border-color: var(--b11-pri2); color: var(--b11-on); }
.b11-btn--soft { background: var(--b11-tint); border-color: transparent; color: var(--b11-pri); }
.b11-btn--ghost { background: transparent; border-style: dashed; }
.b11-btn--sm { padding: 6px 12px; font-size: var(--b11-xs); }

/* ================= 6. 提示与标签 ================= */
.b11-msg {
    margin-top: 12px; font-size: var(--b11-sm); color: var(--b11-mute);
    line-height: 1.7; min-height: 1.7em;
}
.b11-msg.is-err { color: var(--b11-bad); font-weight: 650; }
.b11-msg.is-ok { color: var(--b11-ok); font-weight: 650; }
.b11-note {
    padding: 12px 15px; border-left: 3px solid var(--b11-pri);
    background: var(--b11-card2); border-top: 1px solid var(--b11-line);
    border-right: 1px solid var(--b11-line); border-bottom: 1px solid var(--b11-line);
    font-size: var(--b11-sm); line-height: 1.78; color: var(--b11-sub); margin-bottom: 14px;
}
.b11-note--ok { background: var(--b11-okbg); border-color: transparent; color: var(--b11-ok); }
.b11-note--warn { background: var(--b11-warnbg); border-color: transparent; color: var(--b11-warn); }
.b11-note--bad { background: var(--b11-badbg); border-color: transparent; color: var(--b11-bad); }
.b11-note b { color: inherit; }
.b11-tag {
    display: inline-block; padding: 2px 9px; font-size: var(--b11-xs); font-weight: 750;
    background: var(--b11-tint); color: var(--b11-pri); font-family: var(--b11-mono);
}
.b11-tag--ok { background: var(--b11-okbg); color: var(--b11-ok); }
.b11-tag--warn { background: var(--b11-warnbg); color: var(--b11-warn); }
.b11-tag--bad { background: var(--b11-badbg); color: var(--b11-bad); }

/* ================= 7. KPI 读数 ================= */
.b11-kpis { display: grid; gap: var(--b11-gap); grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); margin-bottom: var(--b11-gap); }
.b11-kpi {
    background: var(--b11-card); border: 1px solid var(--b11-line); padding: 16px 18px;
    box-shadow: var(--b11-shadow);
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}
.b11-kpi.is-hot { background: var(--b11-tint); border-color: transparent; }
.b11-kpi .k { display: block; font-size: var(--b11-xs); color: var(--b11-mute); letter-spacing: .06em; }
.b11-kpi .v {
    display: block; font-family: var(--b11-mono); font-size: var(--b11-num); font-weight: 800;
    line-height: 1.2; color: var(--b11-pri); margin: 6px 0 3px; letter-spacing: -.035em;
    word-break: break-word;
}
.b11-kpi .s { display: block; font-size: var(--b11-xs); color: var(--b11-sub); line-height: 1.6; }

/* ================= 8. 读数条（细线表） ================= */
.b11-readout { border: 1px solid var(--b11-line); background: var(--b11-card); }
.b11-readout-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px;
    align-items: baseline; padding: 11px 15px;
    border-bottom: 1px solid var(--b11-line);
}
.b11-readout-row:last-child { border-bottom: 0; }
.b11-readout-row .lb { font-size: var(--b11-sm); color: var(--b11-sub); }
.b11-readout-row .vl {
    font-family: var(--b11-mono); font-size: var(--b11-md); font-weight: 800;
    color: var(--b11-ink); letter-spacing: -.02em; white-space: nowrap;
}
.b11-readout-row.is-hot .vl { color: var(--b11-pri); }
.b11-readout-row .un { font-size: var(--b11-xs); color: var(--b11-mute); font-family: var(--b11-mono); min-width: 44px; text-align: right; }

/* ================= 9. 分段仪表 ================= */
.b11-seg { display: flex; gap: 3px; align-items: stretch; height: 14px; }
.b11-seg > i {
    flex: 1 1 0; background: var(--b11-bg2); border: 1px solid var(--b11-line2);
    transition: background .25s;
}
.b11-seg > i.on { background: var(--b11-pri); border-color: var(--b11-pri); }
.b11-seg > i.on.hot { background: var(--b11-pri2); border-color: var(--b11-pri2); }
.b11-seg--tall { height: 22px; }

/* ================= 10. 矩阵表 ================= */
.b11-tw { width: 100%; overflow-x: auto; border: 1px solid var(--b11-line); background: var(--b11-card); }
.b11-table { width: 100%; border-collapse: collapse; font-size: var(--b11-sm); min-width: 540px; }
.b11-table th, .b11-table td {
    padding: 10px 13px; text-align: left; border-bottom: 1px solid var(--b11-line);
    vertical-align: top; line-height: 1.68;
}
.b11-table th { background: var(--b11-card2); color: var(--b11-sub); font-weight: 750; white-space: nowrap; }
.b11-table tbody tr:last-child td { border-bottom: 0; }
.b11-table tbody tr:hover { background: var(--b11-tint); }
.b11-table tr.is-bad { background: var(--b11-badbg); }
.b11-table td.num, .b11-table th.num { font-family: var(--b11-mono); white-space: nowrap; }
.b11-table caption {
    caption-side: bottom; padding: 11px 13px; font-size: var(--b11-xs);
    color: var(--b11-mute); text-align: left; line-height: 1.7;
}

/* ================= 11. 空态 / 弹窗 / AI ================= */
.b11-empty {
    border: 1.5px dashed var(--b11-line2); padding: 36px 22px; text-align: center;
    color: var(--b11-mute); font-size: var(--b11-sm); background: var(--b11-card2);
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
.b11-empty b { display: block; font-size: var(--b11-md); color: var(--b11-sub); margin-bottom: 6px; }
.b11-modal {
    display: none; position: fixed; inset: 0; z-index: 10060;
    background: rgba(16, 18, 22, .58); align-items: center; justify-content: center; padding: 20px;
}
.b11-modal.is-open { display: flex; }
.b11-modal-box {
    width: min(580px, 100%); max-height: 82vh; overflow: auto;
    background: var(--b11-card); color: var(--b11-ink); padding: 26px;
    box-shadow: 0 26px 70px rgba(0, 0, 0, .32);
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
.b11-modal-box h3 { margin-bottom: 12px; }
.b11-modal-foot { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; }
.b11-ai { border: 1.5px dashed var(--b11-pri); padding: 18px; background: var(--b11-card2); }
.b11-ai-out { white-space: pre-wrap; line-height: 1.85; font-size: var(--b11-sm); color: var(--b11-sub); }

/* ================= 12. 公共内容底部 ================= */
.b11-foot { max-width: var(--b11-maxw); margin: 50px auto 0; border-top: 2px solid var(--b11-ink); padding-top: 30px; }
.b11-foot h2 { font-size: var(--b11-lg); margin-bottom: 14px; }
.b11-foot h3 { font-size: var(--b11-md); margin: 20px 0 8px; }
.b11-foot p { color: var(--b11-sub); max-width: 880px; }
.b11-foot-hd { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.b11-foot-hd .no {
    font-family: var(--b11-mono); font-size: var(--b11-xs); font-weight: 800; color: var(--b11-pri);
    letter-spacing: .1em;
}
.b11-legend { width: 100%; border-collapse: collapse; font-size: var(--b11-sm); }
.b11-legend th, .b11-legend td {
    padding: 12px 14px; border-bottom: 1px solid var(--b11-line);
    text-align: left; vertical-align: top; line-height: 1.8;
}
.b11-legend th { width: 188px; color: var(--b11-pri); font-weight: 750; white-space: nowrap; background: var(--b11-card2); }
.b11-legend td { color: var(--b11-sub); }
.b11-steps {
    list-style: none; padding: 0; margin: 0; display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
}
.b11-steps li {
    background: var(--b11-card); border: 1px solid var(--b11-line);
    padding: 14px 16px; font-size: var(--b11-sm); color: var(--b11-sub); line-height: 1.72;
    border-left: 3px solid var(--b11-pri);
}
.b11-steps b { display: block; color: var(--b11-pri); margin-bottom: 4px; font-family: var(--b11-mono); font-size: var(--b11-sm); }
.b11-faq details { border-bottom: 1px solid var(--b11-line); padding: 13px 2px; }
.b11-faq summary { cursor: pointer; font-weight: 750; font-size: var(--b11-base); color: var(--b11-ink); list-style: none; }
.b11-faq summary::-webkit-details-marker { display: none; }
.b11-faq summary::before {
    content: "Q"; display: inline-grid; place-items: center; width: 21px; height: 21px;
    margin-right: 11px; background: var(--b11-tint); color: var(--b11-pri);
    font-family: var(--b11-mono); font-size: 11px; font-weight: 800;
}
.b11-faq details[open] summary { color: var(--b11-pri); }
.b11-faq p { margin: 10px 0 0 32px; color: var(--b11-sub); font-size: var(--b11-sm); }
.b11-pills-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.b11-pills-row span {
    font-size: var(--b11-xs); color: var(--b11-sub); background: var(--b11-card);
    border: 1px solid var(--b11-line2); padding: 5px 10px; font-family: var(--b11-mono);
}
.b11-rel { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.b11-rel a {
    display: block; border: 1px solid var(--b11-line); border-bottom: 2px solid var(--b11-pri);
    padding: 14px 16px; background: var(--b11-card); color: var(--b11-ink);
    clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%);
    transition: transform .16s, box-shadow .16s;
}
.b11-rel a:hover { transform: translateY(-3px); box-shadow: var(--b11-shadow); opacity: 1; }
.b11-rel .ic { font-size: 21px; display: block; margin-bottom: 5px; }
.b11-rel b { display: block; font-size: var(--b11-base); }
.b11-rel small { color: var(--b11-mute); font-size: var(--b11-xs); }
.b11-fine { font-size: var(--b11-xs); color: var(--b11-mute); line-height: 1.8; margin-top: 20px; }

/* ================= 13. 面包屑（复用公共 partials.tool-station.crumb） ================= */
.b11 .tsk-crumb-bar { background: transparent; border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.b11 .tsk-crumb-bar-in { max-width: var(--b11-maxw); padding: 16px 0 0; }
.b11 .tsk-crumb { font-family: var(--b11-mono); font-size: 12px; letter-spacing: .04em; }
.b11 .tsk-crumb a { color: var(--b11-sub); font-weight: 600; }
.b11 .tsk-crumb a:hover { color: var(--b11-pri); }
.b11 .tsk-crumb-cur { color: var(--b11-pri); font-weight: 750; }

/* ================= 14. 深色主题（只翻变量，结构不变） ================= */
:root[data-theme="dark"] .b11 {
    --b11-bg: #14161a;
    --b11-bg2: #1c1f25;
    --b11-card: #1a1d23;
    --b11-card2: #21252c;
    --b11-ink: #eef0f4;
    --b11-sub: #b3bac6;
    --b11-mute: #7f8896;
    --b11-line: #2b3038;
    --b11-line2: #3d4450;
    --b11-ok: #5fce9b;
    --b11-warn: #e4b95f;
    --b11-bad: #f08b8f;
    --b11-okbg: #16291f;
    --b11-warnbg: #2d2617;
    --b11-badbg: #2e1c1e;
    --b11-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 30px rgba(0, 0, 0, .34);
}
:root[data-theme="dark"] .b11 .b11-lead b { box-shadow: inset 0 -.42em 0 rgba(255, 255, 255, .1); }

/* ================= 16. 首屏紧凑化层 =================
 * 目标：主操作按钮稳定落在首屏（950px 视口）内，H1 + 一句话副标题 + 操作入口
 * 一屏读完。用 !important 只为压住各页专属 CSS 的等权覆盖，作用域仍限定在 .b11。
 */
.b11 .b11-hero { padding: 26px 0 18px !important; }
.b11 .b11-h1 { font-size: clamp(26px, 3.6vw, 38px) !important; }
.b11 .b11-lead { font-size: 16px !important; line-height: 1.72 !important; margin-top: 10px !important; }
.b11 .b11-pills { margin-top: 12px !important; }
.b11 .b11-field { gap: 5px !important; }
.b11 .b11-label,
.b11 .b11-field > label { font-size: 12.5px !important; }
.b11 .b11-hint { font-size: 11.5px !important; line-height: 1.5 !important; }
.b11 .b11-inp,
.b11 .b11-sel { padding: 9px 12px !important; }
.b11 .b11-ta { padding: 10px 12px !important; }
.b11 .b11-row { gap: 10px 12px !important; }
.b11 .b11-acts { margin-top: 12px !important; }
.b11 .b11-msg { margin-top: 10px !important; }
.b11 .b11-sec { margin-top: 34px !important; }
.b11 .b11-panel { padding: 20px 22px !important; }
.b11 .b11-chip { padding: 7px 13px !important; }
.b11 .b11-btn { padding: 9px 18px !important; }

/* ================= 15. 响应式 ================= */
@media (max-width: 900px) {
    .b11 { padding: 0 15px 56px; }
    .b11-hero { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 26px 0 20px; }
    .b11-lead { font-size: var(--b11-base); }
    .b11-grid--2, .b11-grid--3, .b11-grid--4, .b11-split { grid-template-columns: minmax(0, 1fr); }
    .b11-panel { padding: 18px 16px; }
    .b11-sec { margin-top: 30px; }
    .b11-legend th { width: auto; white-space: normal; }
    .b11-legend th, .b11-legend td { display: block; width: 100%; padding: 9px 12px; }
    .b11-legend th { border-bottom: 0; padding-bottom: 0; }
    .b11-btn { flex: 1 1 140px; }
    .b11-readout-row { grid-template-columns: minmax(0, 1fr) auto; }
    .b11-readout-row .un { grid-column: 1 / -1; text-align: left; }
}
@media (max-width: 560px) {
    .b11-h1 { font-size: 27px; }
    .b11-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .b11-modal-box { padding: 20px 16px; }
}