/* ==========================================================================
   17 · 砧板材质与更换 —— BOARD SERVICE LOG
   独立设计：竹青 + 木纹米；首屏「砧板形判定台」带刀痕线，
   四材质为横向砧板条 + 寿命刻度，现状信号是木片式标签。
   ========================================================================== */
.cbg {
    --hg-paper:      #f4f6ee;
    --hg-paper-2:    #e6ebdd;
    --hg-card:       #fdfef9;
    --hg-card-2:     #eff3e6;
    --hg-ink:        #22301f;
    --hg-ink-2:      #4c5c45;
    --hg-ink-3:      #81907a;
    --hg-line:       #d5dfc8;
    --hg-line-2:     #b5c5a5;
    --hg-brand:      #4a7043;
    --hg-brand-2:    #9a7038;
    --hg-brand-soft: #e4efdb;
    --hg-on-brand:   #fbfef8;
    background: var(--hg-paper);
}
:root[data-theme="dark"] .cbg {
    --hg-paper:      #11160f;
    --hg-paper-2:    #1a2217;
    --hg-card:       #171e14;
    --hg-card-2:     #202a1c;
    --hg-ink:        #eaf2e3;
    --hg-ink-2:      #b6c7ac;
    --hg-ink-3:      #85977d;
    --hg-line:       #2c3a27;
    --hg-line-2:     #3f5237;
    --hg-brand:      #96c98a;
    --hg-brand-2:    #dcb177;
    --hg-brand-soft: #223520;
    --hg-on-brand:   #0d140b;
}
.cbg .hg2-btn { border-radius: 3px; }

/* ---------- 首屏：砧板形判定台 ---------- */
.cbg-hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); border-bottom: 2px solid var(--hg-line-2); }
.cbg-hero-copy { padding: 44px 44px 46px 0; }
.cbg-kicker { display: inline-block; font: 700 11.5px/1.5 var(--hg-mono); letter-spacing: .18em; color: var(--hg-brand); border-left: 3px solid var(--hg-brand); padding-left: 10px; margin-bottom: 22px; }
.cbg-hero h1 { margin-bottom: 20px; }
.cbg-lede { font-size: 16px; line-height: 1.92; max-width: 55ch; }
.cbg-lede b { box-shadow: inset 0 -.4em 0 var(--hg-brand-soft); }
.cbg-points { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--hg-line); }
.cbg-points li { position: relative; padding: 9px 0 9px 22px; border-bottom: 1px solid var(--hg-line); font-size: 13.5px; line-height: 1.75; color: var(--hg-ink-2); margin: 0; }
.cbg-points li::before { content: '╱'; position: absolute; left: 3px; top: 8px; color: var(--hg-brand); font-weight: 700; }
.cbg-points b { color: var(--hg-ink); }
.cbg-hero-note { margin: 20px 0 0; font-size: 12.5px; line-height: 1.8; color: var(--hg-ink-3); }

.cbg-quick { padding: 28px 30px 32px; border-left: 1px solid var(--hg-line-2); background: var(--hg-card); }
.cbg-quick-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 700 11.5px/1.5 var(--hg-mono); letter-spacing: .12em; color: var(--hg-ink-3); }
.cbg-quick-hd b { color: var(--hg-brand); border: 1px solid var(--hg-line-2); padding: 2px 8px; font-size: 11px; }
.cbg-board-shape { position: relative; height: 108px; margin: 18px 0 14px; border: 2px solid var(--hg-brand-2); border-radius: 12px 12px 12px 12px / 20px 20px 20px 20px;
    background: repeating-linear-gradient(96deg, #dcc39a 0 11px, #d3b788 11px 13px, #e0c9a3 13px 24px);
    display: flex; align-items: center; justify-content: center; overflow: hidden; }
:root[data-theme="dark"] .cbg-board-shape { background: repeating-linear-gradient(96deg, #4a3b26 0 11px, #42341f 11px 13px, #504029 13px 24px); }
.cbg-board-shape span { position: relative; z-index: 1; font-family: var(--hg-display); font-size: 19px; font-weight: 700; color: #3c2c17; background: rgba(255, 253, 245, .8); padding: 4px 14px; border-radius: 3px; }
:root[data-theme="dark"] .cbg-board-shape span { color: #f3e7d1; background: rgba(20, 16, 10, .7); }
.cbg-knife { position: absolute; height: 1px; background: rgba(60, 42, 22, .5); transform-origin: left center; }
.cbg-knife--1 { left: 16%; top: 40%; width: 34%; transform: rotate(-8deg); }
.cbg-knife--2 { left: 46%; top: 62%; width: 28%; transform: rotate(11deg); }
.cbg-knife--3 { left: 22%; top: 72%; width: 22%; transform: rotate(4deg); }
.cbg-verdict { padding: 12px 14px; border-left: 4px solid var(--hg-brand); background: var(--hg-card-2); font-size: 14px; line-height: 1.8; color: var(--hg-ink-2); }
.cbg-verdict.is-warn { border-left-color: var(--hg-warn); background: var(--hg-warn-bg); }
.cbg-verdict.is-bad { border-left-color: var(--hg-bad); background: var(--hg-bad-bg); }
.cbg-verdict b { color: var(--hg-ink); }
.cbg-quick-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.cbg-span2 { grid-column: 1 / -1; }
.cbg-quick-btns { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 16px; }
.cbg-quick-btns .hg2-btn { flex: 1 1 auto; }
.cbg-quick .hg2-hint { margin-top: 14px; }

/* ---------- 01 四材质砧板条 ---------- */
.cbg-boards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.cbg-board { position: relative; padding: 16px; border: 1px solid var(--hg-line); border-radius: 8px; background: var(--hg-card); cursor: pointer; text-align: left; font-family: var(--hg-body); transition: transform .16s, border-color .16s; }
.cbg-board:hover { transform: translateY(-2px); }
.cbg-board.is-on { border-color: var(--hg-brand); box-shadow: inset 0 0 0 1px var(--hg-brand); }
.cbg-board-grain { display: block; height: 26px; border-radius: 3px; margin-bottom: 12px; border: 1px solid rgba(0, 0, 0, .08); }
.cbg-board h3 { font-family: var(--hg-display); font-size: 18px; margin-bottom: 4px; }
.cbg-board .cbg-board-life { font: 700 12px/1.6 var(--hg-mono); color: var(--hg-brand); }
.cbg-board p { font-size: 12.5px; line-height: 1.75; color: var(--hg-ink-2); margin: 7px 0 0; }
.cbg-board-flags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.cbg-board-flags span { font-size: 11px; padding: 1px 7px; border-radius: 2px; background: var(--hg-card-2); color: var(--hg-ink-3); }

/* ---------- 02 信号 + 寿命 ---------- */
.cbg-signals { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cbg-signal-list { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 10px; padding: 20px; border: 1px solid var(--hg-line); background: var(--hg-card); border-radius: 4px; }
.cbg-signal-list .hg2-chip { padding: 9px 14px; font-size: 13.5px; }
.cbg-life { border: 1px solid var(--hg-line); border-top: 3px solid var(--hg-brand-2); background: var(--hg-card); padding: 20px 22px; }
.cbg-card-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--hg-line); }
.cbg-card-hd h3 { font-family: var(--hg-display); font-size: 19px; }
.cbg-card-hd span { font: 11.5px/1.5 var(--hg-mono); color: var(--hg-ink-3); }
.cbg-life-bar { height: 18px; border: 1px solid var(--hg-line-2); border-radius: 3px; background: var(--hg-card-2); overflow: hidden; }
.cbg-life-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--hg-brand), var(--hg-brand-2)); transition: width .3s; }
.cbg-life-scale { display: flex; justify-content: space-between; margin-top: 7px; font: 11px/1.5 var(--hg-mono); color: var(--hg-ink-3); }
.cbg-btn-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; align-items: center; }

/* ---------- 03 清洁要点 ---------- */
.cbg-care { border: 1px solid var(--hg-line); background: var(--hg-card); padding: 4px 20px 18px; }
.cbg-care .hg2-tbl th:first-child { min-width: 110px; }
.cbg-care .hg2-tbl td b { color: var(--hg-brand); }

/* ---------- 04 结果 ---------- */
.cbg-card { background: var(--hg-card); border: 1px solid var(--hg-line); border-radius: 4px; padding: 20px 22px 22px; }
.cbg-result-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cbg-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hg-line); border: 1px solid var(--hg-line); margin-bottom: 18px; }
.cbg-kpi { background: var(--hg-card); padding: 16px 18px; }
.cbg-kpi span { display: block; font-size: 12px; color: var(--hg-ink-3); }
.cbg-kpi strong { display: block; font: 700 21px/1.4 var(--hg-mono); color: var(--hg-brand); margin-top: 4px; }
.cbg-kpi small { display: block; font-size: 11.5px; color: var(--hg-ink-3); }
.cbg-todo { margin: 0; padding-left: 1.3em; font-size: 13.5px; line-height: 1.9; color: var(--hg-ink-2); }
.cbg-todo li { margin-bottom: 8px; }
.cbg-todo b, .cbg-ask b { color: var(--hg-ink); }
.cbg-ask p { padding-left: 14px; border-left: 2px solid var(--hg-brand-soft); margin-bottom: 9px; font-size: 13.5px; line-height: 1.85; }
.cbg-figure { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--hg-line-2); text-align: center; }
.cbg-figure img { max-width: 100%; height: auto; display: block; margin: 0 auto 8px; }
.cbg-figure span { font: 11.5px/1.6 var(--hg-mono); color: var(--hg-ink-3); letter-spacing: .06em; }
.cbg-result-btns { padding-top: 18px; border-top: 1px solid var(--hg-line); margin-top: 22px; }

/* ---------- 05 批量 ---------- */
.cbg-batch { border: 1px solid var(--hg-line); background: var(--hg-card); padding: 20px 22px; }
.cbg-clean { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 14px; }
.cbg-clean > b { width: 100%; font-size: 12.5px; color: var(--hg-ink-2); }
.cbg-preview { width: 100%; margin-top: 6px; padding: 8px 10px; background: var(--hg-card-2); font: 12px/1.7 var(--hg-mono); color: var(--hg-ink-3); word-break: break-all; }
.cbg-batch-tbl { margin-top: 16px; }

@media (max-width: 980px) {
    .cbg-hero, .cbg-signals, .cbg-result-cols { grid-template-columns: 1fr; }
    .cbg-hero-copy { padding-right: 0; }
    .cbg-quick { border-left: 0; border-top: 1px solid var(--hg-line-2); }
    .cbg-boards, .cbg-kpis { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .cbg-boards, .cbg-kpis, .cbg-quick-fields { grid-template-columns: 1fr; }
    .cbg-span2 { grid-column: auto; }
}