/* =====================================================================
 * breast-birads-grade · 影像灯箱 / 分级胶片设计系统
 * 冷灰蓝 + 石板蓝 + 玫瑰红 + 青蓝，胶片齿孔与灯箱背光为核心视觉
 * 浅色默认，深色由导航 #themeToggle 控制
 * ===================================================================== */
.brd-page, .brd-modal, .brd-toast {
    --brd-bg: #eef2f6;
    --brd-surface: #ffffff;
    --brd-surface-2: #f5f8fb;
    --brd-ink: #1b2b3a;
    --brd-ink-2: #495d6e;
    --brd-ink-3: #8195a5;
    --brd-line: #d9e2eb;
    --brd-line-2: #b9cbd9;
    --brd-brand: #244a72;
    --brd-brand-deep: #163555;
    --brd-brand-soft: #e5eef7;
    --brd-accent: #b8446c;
    --brd-accent-soft: #fbeaf0;
    --brd-cyan: #2f7fa8;
    --brd-cyan-soft: #e5f2f9;
    --brd-ok: #1f7d63;
    --brd-ok-soft: #e3f3ee;
    --brd-warn: #a86a12;
    --brd-warn-soft: #fbf0dc;
    --brd-danger: #b53b52;
    --brd-danger-soft: #fae8ec;
    --brd-info: #3a6f9a;
    --brd-info-soft: #e7f0f8;
    --brd-film: #16283a;
    --brd-film-2: #1e3549;
    --brd-sh-1: 0 1px 2px rgba(22, 45, 68, .07);
    --brd-sh-2: 0 10px 28px rgba(22, 45, 68, .10);
    --brd-sh-3: 0 22px 52px rgba(22, 45, 68, .16);
    --brd-num: "Bahnschrift", "DIN Alternate", "Segoe UI", Consolas, monospace;
}
:root[data-theme="dark"] .brd-page,
:root[data-theme="dark"] .brd-modal,
:root[data-theme="dark"] .brd-toast {
    --brd-bg: #0b1119;
    --brd-surface: #121d28;
    --brd-surface-2: #182633;
    --brd-ink: #e3ecf5;
    --brd-ink-2: #abbfd0;
    --brd-ink-3: #7e95a8;
    --brd-line: #263747;
    --brd-line-2: #375068;
    --brd-brand: #8abbe8;
    --brd-brand-deep: #b3d6f5;
    --brd-brand-soft: rgba(138, 187, 232, .13);
    --brd-accent: #f28caa;
    --brd-accent-soft: rgba(242, 140, 170, .13);
    --brd-cyan: #6fb2e0;
    --brd-cyan-soft: rgba(111, 178, 224, .13);
    --brd-ok: #6cc9a4;
    --brd-ok-soft: rgba(108, 201, 164, .13);
    --brd-warn: #f0c06a;
    --brd-warn-soft: rgba(240, 192, 106, .13);
    --brd-danger: #ff8fa0;
    --brd-danger-soft: rgba(255, 143, 160, .13);
    --brd-info: #8fbce6;
    --brd-info-soft: rgba(143, 188, 230, .13);
    --brd-film: #0a1420;
    --brd-film-2: #142438;
    --brd-sh-1: 0 1px 2px rgba(0, 0, 0, .42);
    --brd-sh-2: 0 10px 28px rgba(0, 0, 0, .46);
    --brd-sh-3: 0 22px 52px rgba(0, 0, 0, .6);
}
.brd-page {
    background: var(--brd-bg); color: var(--brd-ink);
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Microsoft YaHei", "PingFang SC", sans-serif;
    font-size: 15px; line-height: 1.8; min-height: 100vh; padding-bottom: 76px;
}
.brd-page * { box-sizing: border-box; }
.brd-wrap { max-width: 1180px; margin: 0 auto; padding: 22px 20px 40px; }
.brd-page .detail-breadcrumb { margin-bottom: 18px; font-size: 12.5px; }
.brd-page b { font-weight: 700; color: var(--brd-brand); }
.brd-page h1, .brd-page h2, .brd-page h3 { margin: 0; font-weight: 800; letter-spacing: -.6px; }

/* ---------- 首屏：灯箱 + 分级胶片 ---------- */
.brd-hero {
    display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: 26px;
    background: linear-gradient(120deg, var(--brd-surface) 0%, var(--brd-surface-2) 64%, var(--brd-brand-soft) 100%);
    border: 1px solid var(--brd-line-2); border-radius: 20px; padding: 28px;
    box-shadow: var(--brd-sh-2); position: relative; overflow: hidden;
}
.brd-hero::after {
    content: ""; position: absolute; right: -70px; top: -90px; width: 280px; height: 280px;
    border-radius: 50%; border: 1px solid var(--brd-line-2); box-shadow: 0 0 0 30px rgba(138, 187, 232, .05), 0 0 0 60px rgba(138, 187, 232, .04);
    pointer-events: none;
}
.brd-hero-copy { min-width: 0; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 1; }
.brd-kicker { display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; font: 800 11px/1.4 var(--brd-num); letter-spacing: 1.9px; color: var(--brd-cyan); text-transform: uppercase; margin-bottom: 18px; }
.brd-kicker-bar { width: 22px; height: 3px; background: var(--brd-accent); border-radius: 2px; }
.brd-hero h1 { font-size: clamp(27px, 2.9vw, 37px); line-height: 1.3; margin-bottom: 15px; max-width: 16em; }
.brd-sub { margin: 0; font-size: 15.5px; line-height: 1.9; color: var(--brd-ink-2); max-width: 34em; }
.brd-hero-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }
.brd-hero-metrics > div { min-width: 0; background: var(--brd-surface); border: 1px solid var(--brd-line); border-bottom: 3px solid var(--brd-cyan); border-radius: 10px; padding: 10px 12px; box-shadow: var(--brd-sh-1); }
.brd-hero-metrics b { display: block; font: 800 21px/1.15 var(--brd-num); color: var(--brd-brand); letter-spacing: -.5px; }
.brd-hero-metrics span { display: block; font-size: 11px; color: var(--brd-ink-3); margin-top: 5px; }
.brd-hero-foot { margin: 18px 0 0; font-size: 12.5px; color: var(--brd-ink-3); }

.brd-hero-tool {
    min-width: 0; background: var(--brd-film); border: 1px solid var(--brd-film-2); border-radius: 14px;
    padding: 18px; box-shadow: var(--brd-sh-3); position: relative; z-index: 1; color: #e8f1f8;
}
.brd-tool-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.brd-tool-head > span:first-child { font-size: 15px; font-weight: 800; letter-spacing: .5px; }
.brd-tool-tag { font: 700 11px/1.3 var(--brd-num); letter-spacing: 1px; color: #a9d8f5; border: 1px solid #335372; border-radius: 999px; padding: 3px 9px; }
.brd-tool-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 13px; }
.brd-field { display: block; min-width: 0; }
.brd-field > span { display: block; font-size: 11px; color: #9db6cc; margin-bottom: 5px; }
.brd-field input, .brd-field select {
    width: 100%; font-family: inherit; color: #eaf3fb; background: #0f2032;
    border: 1px solid #365573; border-radius: 7px; padding: 7px 9px; font-size: 12.5px; outline: none;
}
.brd-field input:focus, .brd-field select:focus { border-color: #7fc3f0; box-shadow: 0 0 0 2px rgba(127, 195, 240, .18); }
.brd-grade-label { font: 700 11px/1.4 var(--brd-num); letter-spacing: 1px; color: #9db6cc; margin-bottom: 8px; }
.brd-film {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px;
    background: #0c1a29; border-top: 9px solid #0c1a29; border-bottom: 9px solid #0c1a29;
    border-radius: 7px; padding: 9px 6px; position: relative;
}
.brd-film::before, .brd-film::after {
    content: ""; position: absolute; left: 4px; right: 4px; height: 5px;
    background: repeating-linear-gradient(90deg, #dbe7f1 0 9px, transparent 9px 19px);
    opacity: .45;
}
.brd-film::before { top: -8px; } .brd-film::after { bottom: -8px; }
.brd-grade {
    border: 1px solid #37536e; background: #162c42; color: #c9dcec; border-radius: 5px;
    padding: 7px 2px 6px; text-align: center; cursor: pointer; transition: .16s; min-width: 0;
}
.brd-grade b { display: block; font: 800 15px/1.2 var(--brd-num); letter-spacing: -.3px; color: inherit; }
.brd-grade small { display: block; font-size: 9.5px; color: #8fa9c0; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brd-grade:hover { border-color: #80bde8; background: #1d3d5b; }
.brd-grade.is-on { background: #eaf4fb; border-color: #eaf4fb; color: #12324c; box-shadow: 0 0 0 2px #6fb2e0, 0 0 20px rgba(111, 178, 224, .55); }
.brd-grade.is-on b { color: #12324c; }
.brd-grade.is-on small { color: #3f6383; }
.brd-grade[data-tone="warn"].is-on { box-shadow: 0 0 0 2px #f0c06a, 0 0 20px rgba(240, 192, 106, .55); }
.brd-grade[data-tone="danger"].is-on { box-shadow: 0 0 0 2px #ff8fa0, 0 0 20px rgba(255, 143, 160, .55); }
.brd-snap { margin-top: 12px; background: #0f2032; border: 1px solid #335372; border-radius: 9px; padding: 11px 13px; }
.brd-snap-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.brd-snap-grade { font: 800 23px/1.2 var(--brd-num); color: #eaf4fb; letter-spacing: -.5px; }
.brd-snap-prob { font: 700 12px/1.3 var(--brd-num); color: #ffb3c6; }
.brd-snap-title { font-size: 12.5px; color: #a9c3d8; margin: 3px 0 9px; }
.brd-snap-rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.brd-snap-rows > div { min-width: 0; border-top: 1px solid #335372; padding-top: 6px; }
.brd-snap-rows span { display: block; font-size: 10px; color: #8fa9c0; }
.brd-snap-rows b { display: block; font: 700 12px/1.4 var(--brd-num); color: #dcebf7; word-break: break-all; }
.brd-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.brd-btn { border: 1px solid var(--brd-line-2); background: var(--brd-surface); color: var(--brd-ink); font: 700 13.5px/1.5 inherit; padding: 9px 15px; border-radius: 8px; cursor: pointer; transition: .16s; }
.brd-btn:hover { border-color: var(--brd-brand); color: var(--brd-brand); transform: translateY(-1px); }
.brd-btn--main { background: linear-gradient(135deg, var(--brd-brand) 0%, var(--brd-brand-deep) 100%); color: #fff; border-color: transparent; flex: 1 1 auto; }
:root[data-theme="dark"] .brd-btn--main { color: #0b1a29; }
.brd-btn--main:hover { color: #fff; filter: brightness(1.08); }
:root[data-theme="dark"] .brd-btn--main:hover { color: #0b1a29; }
.brd-hero-tool .brd-btn-ai { border-style: dashed; border-color: #f28caa; background: rgba(242, 140, 170, .10); color: #ffb3c6; }
.brd-hero-tool .brd-btn-ai:hover { color: #ffd0dd; border-color: #ffd0dd; }
.brd-error { margin: 9px 0 0; font-size: 12px; font-weight: 700; color: #ffc2ce; background: rgba(255, 143, 160, .14); border-radius: 7px; padding: 7px 10px; }

/* ---------- 口径条 ---------- */
.brd-notice { display: flex; gap: 14px; align-items: flex-start; margin: 18px 0 26px; padding: 13px 17px; background: var(--brd-accent-soft); border: 1px solid var(--brd-line-2); border-left: 5px solid var(--brd-accent); border-radius: 12px; }
.brd-notice-tag { flex: 0 0 auto; font-size: 11.5px; font-weight: 800; color: #fff; background: var(--brd-accent); border-radius: 6px; padding: 3px 9px; margin-top: 3px; }
:root[data-theme="dark"] .brd-notice-tag { color: #2a0d17; }
.brd-notice p { margin: 0; font-size: 13px; line-height: 1.8; color: var(--brd-ink-2); }

/* ---------- 通用区块 ---------- */
.brd-section-head { margin-bottom: 16px; }
.brd-section-head h2 { font-size: 20px; line-height: 1.4; margin-bottom: 4px; }
.brd-section-head p { margin: 0; font-size: 13px; color: var(--brd-ink-3); }
.brd-panel, .brd-about { margin-bottom: 24px; }
.brd-panel { background: var(--brd-surface); border: 1px solid var(--brd-line); border-radius: 16px; padding: 22px; box-shadow: var(--brd-sh-1); min-width: 0; }

/* ---------- 概率刻度带 ---------- */
.brd-band-track { position: relative; height: 62px; border-radius: 10px; overflow: hidden; border: 1px solid var(--brd-line-2); }
.brd-band-gradient { position: absolute; inset: 0 0 22px 0; background: linear-gradient(90deg, #4aa987 0%, #a8c96a 28%, #e8c15c 52%, #e8915c 74%, #cf5670 100%); }
:root[data-theme="dark"] .brd-band-gradient { background: linear-gradient(90deg, #256b55 0%, #6c8140 28%, #a8842c 52%, #b0642f 74%, #96374d 100%); }
.brd-band-hl { position: absolute; top: 0; bottom: 22px; border: 2px solid var(--brd-ink); background: rgba(255, 255, 255, .28); border-radius: 4px; transition: left .3s, width .3s; }
:root[data-theme="dark"] .brd-band-hl { background: rgba(255, 255, 255, .14); border-color: #fff; }
.brd-band-ticks { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; background: var(--brd-surface-2); }
.brd-band-ticks > span { position: absolute; top: 3px; transform: translateX(-50%); font: 700 10.5px/1.4 var(--brd-num); color: var(--brd-ink-3); }
.brd-band-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; padding-top: 10px; font-size: 12px; color: var(--brd-ink-2); }
.brd-band-legend b { color: var(--brd-brand); }

/* ---------- KPI 与解读 ---------- */
.brd-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.brd-kpi { min-width: 0; background: var(--brd-surface-2); border: 1px solid var(--brd-line); border-top: 3px solid var(--brd-cyan); border-radius: 11px; padding: 13px 14px; }
.brd-kpi > span { display: block; font-size: 11.5px; color: var(--brd-ink-3); margin-bottom: 6px; }
.brd-kpi b { font: 800 18px/1.35 var(--brd-num); color: var(--brd-brand); word-break: break-all; }
.brd-reading { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.brd-reading-card { min-width: 0; background: var(--brd-surface); border: 1px solid var(--brd-line-2); border-radius: 11px; padding: 16px 18px; }
.brd-reading-card--accent { background: var(--brd-accent-soft); border-color: var(--brd-accent); }
.brd-reading-kicker { display: block; font: 800 10.5px/1.4 var(--brd-num); letter-spacing: 1.1px; text-transform: uppercase; color: var(--brd-ink-3); margin-bottom: 7px; }
.brd-reading-card h3 { font-size: 16.5px; line-height: 1.5; margin-bottom: 8px; }
.brd-reading-card p { margin: 0 0 10px; font-size: 13px; line-height: 1.85; color: var(--brd-ink-2); }
.brd-followup { display: grid; gap: 6px; }
.brd-followup-row { display: flex; align-items: flex-start; gap: 9px; min-width: 0; font-size: 12px; color: var(--brd-ink-2); background: var(--brd-surface-2); border-radius: 7px; padding: 7px 10px; }
.brd-followup-row > span { flex: 0 0 auto; }
.brd-followup-row b { flex: 1 1 auto; min-width: 0; font-family: var(--brd-num); white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.brd-checklist { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.85; color: var(--brd-ink-2); }
.brd-checklist li + li { margin-top: 4px; }
.brd-disclaim { margin: 14px 0 0; font-size: 12px; color: var(--brd-ink-3); border-top: 1px dashed var(--brd-line-2); padding-top: 11px; }

/* ---------- 表格 ---------- */
.brd-table-scroll { overflow-x: auto; border: 1px solid var(--brd-line); border-radius: 10px; }
.brd-table { width: 100%; border-collapse: collapse; min-width: 700px; font-size: 12.5px; }
.brd-table th { background: var(--brd-brand-soft); color: var(--brd-brand); text-align: left; font-size: 11.5px; font-weight: 800; padding: 10px 12px; white-space: nowrap; }
.brd-table td { padding: 9px 12px; border-top: 1px solid var(--brd-line); color: var(--brd-ink-2); }
.brd-table td.gr { font: 800 14px/1.3 var(--brd-num); color: var(--brd-ink); white-space: nowrap; }
.brd-table tr.is-current td { background: var(--brd-brand-soft); }
.brd-table tr:hover td { background: var(--brd-cyan-soft); }
.brd-pill { display: inline-block; font-size: 10.5px; font-weight: 800; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.brd-pill.tone-ok { color: var(--brd-ok); background: var(--brd-ok-soft); }
.brd-pill.tone-warn { color: var(--brd-warn); background: var(--brd-warn-soft); }
.brd-pill.tone-danger { color: var(--brd-danger); background: var(--brd-danger-soft); }
.brd-pill.tone-info { color: var(--brd-info); background: var(--brd-info-soft); }
.brd-row-btn { border: 1px solid var(--brd-line-2); background: var(--brd-surface); color: var(--brd-brand); font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.brd-row-btn:hover { border-color: var(--brd-brand); background: var(--brd-brand-soft); }
.brd-table-foot { margin: 10px 0 0; font-size: 12px; color: var(--brd-ink-3); }

/* ---------- 双栏 / 摘录 / 批量 ---------- */
.brd-two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.brd-two-col > * { min-width: 0; }
.brd-page textarea, .brd-search, .brd-modal-input {
    font-family: inherit; color: var(--brd-ink); background: var(--brd-surface-2);
    border: 1px solid var(--brd-line-2); border-radius: 8px; outline: none; transition: border-color .16s, box-shadow .16s;
}
.brd-page textarea { width: 100%; resize: vertical; font: 13px/1.75 var(--brd-num); padding: 11px 13px; }
.brd-page textarea:focus, .brd-search:focus { border-color: var(--brd-brand); box-shadow: 0 0 0 3px var(--brd-brand-soft); }
.brd-panel-actions, .brd-output-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 11px 0; }
.brd-extract-out, .brd-batch-out { font-size: 12.5px; color: var(--brd-ink-2); }
.brd-extract-card { background: var(--brd-surface-2); border: 1px solid var(--brd-line); border-left: 4px solid var(--brd-cyan); border-radius: 8px; padding: 11px 13px; }
.brd-extract-card.is-bad { border-left-color: var(--brd-danger); background: var(--brd-danger-soft); color: var(--brd-danger); font-weight: 700; }
.brd-extract-card b { font-family: var(--brd-num); }
.brd-batch-out table { width: 100%; border-collapse: collapse; font-size: 12px; }
.brd-batch-out th, .brd-batch-out td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--brd-line); }
.brd-batch-out th { color: var(--brd-ink-3); font-size: 11px; }
.brd-batch-out td.num { font-family: var(--brd-num); font-weight: 700; }
.brd-batch-out .is-bad { color: var(--brd-danger); background: var(--brd-danger-soft); }
.brd-batch-sum { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 8px; }
.brd-batch-sum span { font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 3px 10px; background: var(--brd-brand-soft); color: var(--brd-brand); }
.brd-batch-sum span.is-bad { background: var(--brd-danger-soft); color: var(--brd-danger); }
.brd-terms-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.brd-search { min-width: 220px; flex: 1 1 260px; max-width: 360px; font-size: 13px; padding: 8px 12px; }
.brd-terms-bar > span { font-size: 12px; color: var(--brd-ink-3); }
.brd-terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.brd-term { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; background: var(--brd-surface-2); border: 1px solid var(--brd-line); border-radius: 9px; padding: 10px 12px; }
.brd-term i { font: 800 12px/1.6 var(--brd-num); color: var(--brd-cyan); font-style: normal; }
.brd-term b { display: block; font-size: 13px; }
.brd-term span { display: block; font-size: 12px; line-height: 1.75; color: var(--brd-ink-2); margin-top: 2px; }
.brd-mini-note { margin: 8px 0 0; font-size: 11.5px; color: var(--brd-ink-3); line-height: 1.75; }

/* ---------- AI ---------- */
.brd-ai-panel { border: 1px dashed var(--brd-accent); }
.brd-ai-status { margin: 0; font-size: 12.5px; color: var(--brd-ink-3); min-height: 20px; }
.brd-ai-status.is-err { color: var(--brd-danger); font-weight: 700; }
.brd-ai-status.is-ok { color: var(--brd-ok); font-weight: 700; }
.brd-ai-result { margin-top: 10px; background: var(--brd-accent-soft); border: 1px solid var(--brd-line-2); border-radius: 10px; padding: 13px 15px; font-size: 13.5px; line-height: 1.9; color: var(--brd-ink-2); white-space: pre-wrap; }

/* ---------- 口径与边界 ---------- */
.brd-about-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.brd-about-grid > div { min-width: 0; background: var(--brd-surface); border: 1px solid var(--brd-line); border-top: 3px solid var(--brd-brand); border-radius: 11px; padding: 14px 15px; }
.brd-about-grid h3 { font-size: 14.5px; margin-bottom: 7px; }
.brd-about-grid p { margin: 0; font-size: 12.5px; line-height: 1.8; color: var(--brd-ink-2); }

/* ---------- 浮层 ---------- */
.brd-modal { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.brd-modal[hidden], .brd-toast[hidden] { display: none !important; }
.brd-modal-mask { position: absolute; inset: 0; background: rgba(8, 20, 32, .62); backdrop-filter: blur(3px); }
.brd-modal-card { position: relative; width: min(460px, 100%); background: var(--brd-surface); color: var(--brd-ink); border: 1px solid var(--brd-line-2); border-radius: 14px; padding: 24px; box-shadow: var(--brd-sh-3); }
.brd-modal-x { position: absolute; right: 14px; top: 10px; border: 0; background: transparent; color: var(--brd-ink-3); font-size: 24px; line-height: 1; cursor: pointer; }
.brd-modal-kicker { font: 800 11px/1.4 var(--brd-num); letter-spacing: 1.1px; color: var(--brd-accent); }
.brd-modal-card h3 { font-size: 19px; margin: 6px 0 8px; }
.brd-modal-card p { margin: 0 0 14px; font-size: 13px; color: var(--brd-ink-2); }
.brd-modal-input { width: 100%; font: 12.5px/1.6 var(--brd-num); padding: 10px 12px; }
.brd-modal-foot { display: flex; gap: 8px; margin-top: 14px; }
.brd-toast { position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 9500; background: var(--brd-ink); color: var(--brd-surface); font-size: 13px; font-weight: 700; padding: 10px 20px; border-radius: 999px; box-shadow: var(--brd-sh-2); }

/* ---------- 响应式 ---------- */
@media (max-width: 980px) {
    .brd-hero { grid-template-columns: 1fr; gap: 20px; padding: 24px; }
    .brd-two-col { grid-template-columns: 1fr; }
    .brd-about-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .brd-wrap { padding: 16px 13px 30px; }
    .brd-hero { padding: 18px 15px 20px; border-radius: 14px; }
    .brd-hero h1 { font-size: 25px; }
    .brd-sub { font-size: 14px; }
    .brd-hero-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; }
    .brd-hero-tool { padding: 14px; }
    .brd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .brd-reading { grid-template-columns: 1fr; }
    .brd-panel { padding: 16px 14px; }
    .brd-section-head h2 { font-size: 18px; }
    .brd-about-grid, .brd-terms { grid-template-columns: 1fr; }
    .brd-band-ticks > span { font-size: 9px; }
    .brd-snap-rows { grid-template-columns: 1fr 1fr; }
}

/* ---------- 公共推荐位 / 底部套件在窄屏的兜底（仅本页 CSS 生效） ---------- */
@media (max-width: 640px) {
    .tool-rec { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; box-sizing: border-box; }
    .tool-rec-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .tool-rec-item { min-width: 0 !important; width: 100% !important; box-sizing: border-box; }
    .tool-rec-body, .tool-rec-body b, .tool-rec-body small { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
    .tskb-card { overflow-x: auto; }
    .tskb-legend { min-width: 0; width: 100%; table-layout: fixed; }
    .tskb-legend th, .tskb-legend td { overflow-wrap: anywhere; word-break: break-word; white-space: normal; }
    .tskb-tabs { flex-wrap: wrap; }
}

/* ---------- 打印 ---------- */
@media print {
    .brd-page { background: #fff; color: #111; }
    .brd-hero, .brd-panel { box-shadow: none; break-inside: avoid; }
    .brd-actions, .brd-panel-actions, .brd-output-actions, .brd-modal, .brd-toast,
    .detail-breadcrumb, .tskb, .brd-terms-bar { display: none !important; }
}