/* 手册新标准课页（看、量、用）。沿用课页变量（lesson.css / trader.css），这里只补 K 线配色与新组件。
   改这个文件要同时改 build/handbook_v2/kit.py 的 ASSETS（与 handbook.js 共用一个版本号）。 */
:root { --hb-up:#059669; --hb-dn:#dc2626; --hb-up-soft:rgba(5,150,105,.13); --hb-dn-soft:rgba(220,38,38,.12); --hb-amber:#b45309; --hb-amber-soft:rgba(217,119,6,.14); }
:root[data-theme="dark"] { --hb-up:#34d399; --hb-dn:#f87171; --hb-up-soft:rgba(52,211,153,.17); --hb-dn-soft:rgba(248,113,113,.17); --hb-amber:#fbbf24; --hb-amber-soft:rgba(251,191,36,.16); }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) { --hb-up:#34d399; --hb-dn:#f87171; --hb-up-soft:rgba(52,211,153,.17); --hb-dn-soft:rgba(248,113,113,.17); --hb-amber:#fbbf24; --hb-amber-soft:rgba(251,191,36,.16); } }

.hb { font-size:15px; line-height:1.85; }
.hb-p { margin:0 0 16px; }

/* 定义与学完能做到 */
.hb-def { margin:0 0 18px; padding:18px 20px; border-left:4px solid var(--accent); background:var(--accent-soft); border-radius:0 12px 12px 0; }
.hb-def-k { display:block; font-size:11px; font-weight:700; letter-spacing:.08em; color:var(--accent-deep); margin-bottom:4px; }
.hb-def-t { margin:0; font-size:17px; line-height:1.85; }
.hb-def-t b { color:var(--accent-deep); }
.hb-def-sub { margin:8px 0 0; color:var(--sub); font-size:14.5px; line-height:1.8; }
.hb-goals { margin:0 0 26px; }
.hb-goals-k { margin:0 0 8px; font-size:12px; font-weight:700; color:var(--sub); letter-spacing:.06em; }
.hb-goals ol { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; counter-reset:g; }
.hb-goals li { counter-increment:g; }
.hb-goals a { display:flex; gap:10px; height:100%; box-sizing:border-box; padding:10px 14px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--text); text-decoration:none; font-size:13.5px; line-height:1.65; }
.hb-goals a:hover { border-color:var(--accent); }
.hb-goals a:before { content:counter(g); flex:0 0 auto; width:20px; height:20px; margin-top:2px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:800; background:var(--accent-soft); color:var(--accent-deep); }
.hb-goals b { display:block; color:var(--accent-deep); font-size:13.5px; }
.hb-goals a > span > span { color:var(--sub); }
@media(max-width:600px){ .hb-goals ol { grid-template-columns:minmax(0,1fr); } }
.hb-video { margin-bottom:8px; }

/* 三步标题 */
.hb-step { display:flex; gap:14px; align-items:center; margin:44px 0 14px; padding-top:22px; border-top:1px solid var(--line); scroll-margin-top:80px; }
.hb-step .no { flex:0 0 auto; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--accent); color:#fff; }
:root[data-theme="dark"] .hb-step .no { color:#14161a; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .hb-step .no { color:#14161a; } }
.hb-step .k { margin:0; font-size:11.5px; font-weight:700; color:var(--accent); letter-spacing:.08em; }
.hb-step h2 { margin:0; font-size:22px; line-height:1.4; letter-spacing:0; }
.hb-step small { display:block; color:var(--sub); font-size:13px; font-weight:500; margin-top:2px; }
.hb-h3 { margin:30px 0 10px; font-size:16.5px; line-height:1.5; }
.hb-sec { margin:44px 0 12px; padding-top:22px; border-top:1px solid var(--line); font-size:20px; }

/* K 线图：宽版桌面、窄版手机 */
.hb-k { width:100%; height:auto; display:block; font-family:inherit; }
.hb-k.hb-n { display:none; }
@media(max-width:560px){ .hb-k.hb-w { display:none; } .hb-k.hb-n { display:block; } .hb-k.hb-n .k-strip { font-size:13px; } }
.hb-k text { font-size:12px; fill:var(--sub); }
.hb-k .k-body.k-up { fill:var(--hb-up); } .hb-k .k-body.k-dn { fill:var(--hb-dn); }
.hb-k .k-wick.k-up { stroke:var(--hb-up); stroke-width:1.1; } .hb-k .k-wick.k-dn { stroke:var(--hb-dn); stroke-width:1.1; }
.hb-k .k-grid { stroke:var(--line); stroke-width:1; fill:none; }
.hb-k .k-band { fill:var(--accent-soft); } .hb-k .k-band.up { fill:var(--hb-up-soft); } .hb-k .k-band.dn { fill:var(--hb-dn-soft); } .hb-k .k-band.amber { fill:var(--hb-amber-soft); }
.hb-k .k-hline { stroke:var(--text); stroke-dasharray:4 4; stroke-width:1.2; fill:none; opacity:.6; }
.hb-k .k-ruler { stroke:var(--accent); stroke-width:2.4; stroke-linecap:round; fill:none; }
.hb-k .k-ruler-dot { fill:var(--accent); }
.hb-k .k-lbl { font-size:12px; font-weight:700; fill:var(--text); }
.hb-k .k-lbl.up { fill:var(--hb-up); } .hb-k .k-lbl.dn { fill:var(--hb-dn); } .hb-k .k-lbl.amber { fill:var(--hb-amber); }
.hb-k .k-halo { paint-order:stroke; stroke:var(--card); stroke-width:4px; stroke-linejoin:round; }
.hb-k .k-strip { font-size:12px; font-weight:700; fill:var(--accent-deep); }
.hb-k .k-strip.neg { fill:var(--hb-dn); }
.hb-k .k-lead { stroke:var(--text); stroke-width:1; opacity:.55; fill:none; }
.hb-k .k-co { fill:var(--text); }
.hb-k .k-co-t { font-size:11.5px; font-weight:800; fill:var(--card); }

.hb-fig { margin:20px 0; padding:16px 18px 14px; border:1px solid var(--line); border-radius:12px; background:var(--card); }
.hb-fig-head { display:flex; justify-content:space-between; gap:4px 14px; flex-wrap:wrap; align-items:baseline; font-size:12px; color:var(--sub); margin-bottom:10px; }
.hb-fig-head b { color:var(--text); font-size:14.5px; }
.hb-fig figcaption { color:var(--sub); font-size:13px; line-height:1.8; margin-top:12px; padding-top:10px; border-top:1px solid var(--line); }
.hb-legend { display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12.5px; color:var(--sub); margin-top:10px; }
.hb-legend span:before { content:""; display:inline-block; width:12px; height:12px; border-radius:3px; margin:0 6px -1px 0; background:var(--accent-soft); }
.hb-legend span.up:before { background:var(--hb-up-soft); } .hb-legend span.dn:before { background:var(--hb-dn-soft); } .hb-legend span.amber:before { background:var(--hb-amber-soft); }
.hb-notes { list-style:none; margin:12px 0 0; padding:0; display:grid; gap:8px; }
.hb-notes li { display:flex; gap:10px; align-items:flex-start; font-size:13.5px; line-height:1.75; }
.hb-notes i { flex:0 0 auto; width:20px; height:20px; margin-top:2px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:11.5px; font-weight:800; background:var(--text); color:var(--card); }
.hb-notes b { margin-right:6px; }
.hb-readout { display:grid; grid-template-columns:repeat(auto-fit,minmax(60px,1fr)); gap:6px; margin-top:12px; }
.hb-readout span { padding:6px 8px; border-radius:8px; border:1px solid var(--line); background:var(--bg); text-align:center; font-size:12px; line-height:1.45; }
.hb-readout small { display:block; color:var(--sub); font-size:11px; }
.hb-readout b { font-variant-numeric:tabular-nums; }
.hb-readout .up { border-color:var(--hb-up); background:var(--hb-up-soft); }
.hb-readout .amber { border-color:var(--hb-amber); background:var(--hb-amber-soft); }
.hb-readout .dn { border-color:var(--hb-dn); background:var(--hb-dn-soft); }
@media(max-width:560px){ .hb-fig { padding:14px 10px 12px; } .hb-readout { grid-template-columns:repeat(4,minmax(0,1fr)); } }

/* 五样东西、状态卡、用处卡 */
.hb-feat { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px; margin:14px 0; }
.hb-feat > div { padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:var(--bg); font-size:13.5px; line-height:1.7; }
.hb-feat b { display:flex; gap:7px; align-items:center; color:var(--accent-deep); margin-bottom:4px; }
.hb-states { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:16px 0; }
@media(max-width:860px){ .hb-states { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:480px){ .hb-states { grid-template-columns:minmax(0,1fr); } }
.hb-state { border:1px solid var(--line); border-radius:12px; padding:13px 14px; background:var(--card); border-top:3px solid var(--accent); }
.hb-state.s-acc, .hb-state.s-up { border-top-color:var(--hb-up); } .hb-state.s-dec, .hb-state.s-exh, .hb-state.s-amber { border-top-color:var(--hb-amber); } .hb-state.s-rev, .hb-state.s-dn { border-top-color:var(--hb-dn); }
.hb-state b { display:block; font-size:15.5px; }
.hb-state i { display:block; font-style:normal; font-size:12px; color:var(--sub); margin-bottom:6px; }
.hb-state p { margin:0; font-size:13px; line-height:1.75; }
.hb-uses { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:12px 0; }
@media(max-width:600px){ .hb-uses { grid-template-columns:minmax(0,1fr); } }
.hb-use { padding:13px 15px; border:1px solid var(--line); border-radius:12px; background:var(--card); font-size:13.5px; line-height:1.75; }
.hb-use b { display:flex; align-items:center; gap:8px; font-size:14.5px; margin-bottom:4px; }
.hb-use b svg { color:var(--accent); }

/* 量：三步做法 */
.hb-howto { list-style:none; counter-reset:h; margin:12px 0 18px; padding:0; display:grid; gap:10px; }
.hb-howto li { counter-increment:h; display:grid; grid-template-columns:28px 1fr; gap:2px 10px; font-size:14px; line-height:1.75; }
.hb-howto li:before { content:counter(h); grid-row:1 / 3; width:24px; height:24px; margin-top:2px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:800; background:var(--accent-soft); color:var(--accent-deep); }
.hb-howto b { font-size:14.5px; }
.hb-howto span { color:var(--text); }

/* 状态 × 身份 动作表 */
.hb-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:14px 0 6px; border:1px solid var(--line); border-radius:12px; background:var(--card); }
.hb-table { width:100%; border-collapse:collapse; font-size:13.5px; line-height:1.65; }
.hb-table th, .hb-table td { padding:11px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.hb-table thead th { font-size:12px; color:var(--sub); background:var(--bg); white-space:nowrap; font-weight:700; }
.hb-table tbody th { font-weight:700; width:96px; }
.hb-table tbody th small { display:block; font-weight:500; font-size:11.5px; color:var(--sub); margin-top:2px; }
.hb-table tr:last-child > * { border-bottom:0; }
.hb-rule tbody th { width:84px; }
.hb .do { color:var(--hb-up); font-weight:700; } .hb .wait { color:var(--hb-amber); font-weight:700; } .hb .exit { color:var(--hb-dn); font-weight:700; }
.hb-key { display:flex; flex-wrap:wrap; gap:4px 16px; margin:6px 0 18px; font-size:12px; }
.hb-cards { display:none; }
@media(max-width:640px){
  .hb-table-wrap { display:none; }
  .hb-cards { display:grid; gap:10px; margin:14px 0 6px; }
  .hb-card { border:1px solid var(--line); border-radius:12px; background:var(--card); padding:12px 14px; }
  .hb-card h4 { margin:0 0 8px; font-size:15px; }
  .hb-card h4 small { font-weight:500; color:var(--sub); font-size:12px; margin-left:6px; }
  .hb-card dl { margin:0; display:grid; gap:4px; font-size:13.5px; line-height:1.65; }
  .hb-card dt { font-size:12px; color:var(--sub); font-weight:700; margin-top:4px; }
  .hb-card dd { margin:0; }
}

/* 下单前检查（概念课的「用」） */
.hb-check { margin:14px 0; padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--card); }
.hb-check-k { margin:0 0 8px; font-size:13px; font-weight:700; color:var(--accent-deep); }
.hb-check ol { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.hb-check li { display:flex; gap:10px; font-size:13.5px; line-height:1.7; }
.hb-ck { flex:0 0 auto; width:20px; height:20px; margin-top:2px; border-radius:6px; display:grid; place-items:center; border:1.5px solid var(--accent); color:var(--accent); }
.hb-check b { display:block; }
.hb-check span { color:var(--sub); }

/* 自测 */
.hb-quiz { margin:12px 0; padding:15px 17px; border:1px solid var(--line); border-radius:12px; background:var(--card); }
.hb-quiz p { margin:0 0 10px; font-size:14.5px; font-weight:600; line-height:1.7; }
.hb-quiz .opts { display:grid; gap:8px; }
.hb-quiz button { text-align:left; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--text); font-size:13.5px; line-height:1.6; cursor:pointer; }
.hb-quiz button[data-ok="1"][aria-pressed="true"], .hb-quiz.done button[data-ok="1"] { border-color:var(--hb-up); background:var(--hb-up-soft); }
.hb-quiz button[data-ok="0"][aria-pressed="true"] { border-color:var(--hb-dn); background:var(--hb-dn-soft); }
.hb-quiz .fb { margin:10px 0 0; font-size:13.5px; font-weight:400; color:var(--text); line-height:1.75; }
.hb-quiz .fb:empty { display:none; }
.hb-quiz .fb b { color:var(--accent-deep); }

/* 逐根推进练习 */
.hb-lab { border:1px solid var(--line); border-radius:14px; background:var(--card); padding:16px 18px; margin:16px 0 22px; scroll-margin-top:80px; }
.hb-lab-top { display:flex; justify-content:space-between; gap:4px 14px; flex-wrap:wrap; align-items:baseline; margin-bottom:6px; font-size:12.5px; color:var(--sub); }
.hb-lab-top b { color:var(--text); font-size:14.5px; }
.hb-role { display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 10px; align-items:center; font-size:12.5px; color:var(--sub); }
.hb-chip { padding:6px 11px; border:1px solid var(--line); border-radius:999px; background:var(--bg); color:var(--text); font-size:12.5px; cursor:pointer; }
.hb-chip[aria-pressed="true"] { border-color:var(--accent); background:var(--accent-soft); color:var(--accent-deep); font-weight:700; }
.hb-lab-svg text { font-size:12px; }
.hb-lab-svg .k-now { font-size:12.5px; font-weight:700; fill:var(--text); paint-order:stroke; stroke:var(--card); stroke-width:4px; }
.hb-lab-svg .k-cp { fill:none; stroke:var(--accent); stroke-width:1.6; stroke-dasharray:3 3; }
@media(max-width:560px){ .hb-lab-svg text, .hb-lab-svg .k-lbl { font-size:17px; } .hb-lab-svg .k-now { font-size:18px; } .hb-lab { padding:14px 10px; } }
.hb-lab-ruler { margin:6px 0 0; font-size:12.5px; color:var(--sub); font-variant-numeric:tabular-nums; min-height:1.7em; }
.hb-lab-ruler b { color:var(--text); }
.hb-lab-ctl { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 0; align-items:center; }
.hb-lab-ctl .st { margin-left:auto; font-size:12px; color:var(--sub); font-variant-numeric:tabular-nums; }
.hb-btn { display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--text); font-size:13px; font-weight:600; cursor:pointer; }
.hb-btn.pri { background:var(--accent); border-color:var(--accent); color:#fff; }
:root[data-theme="dark"] .hb-btn.pri { color:#14161a; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .hb-btn.pri { color:#14161a; } }
.hb-btn:disabled { opacity:.4; cursor:default; }
.hb-panel { margin-top:14px; padding:14px 16px; border:1px solid var(--line); border-radius:10px; background:var(--bg); }
.hb-panel h4 { margin:0 0 10px; font-size:15px; line-height:1.55; }
.hb-panel h4 small { display:block; font-weight:500; color:var(--sub); font-size:12px; margin-top:2px; }
.hb-choice { display:grid; gap:8px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.hb-choice button { padding:10px 12px; text-align:left; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--text); font-size:13.5px; line-height:1.5; cursor:pointer; }
.hb-choice button:disabled { cursor:default; }
.hb-choice button.ok { border-color:var(--hb-up); background:var(--hb-up-soft); font-weight:700; }
.hb-choice button.bad { border-color:var(--hb-dn); background:var(--hb-dn-soft); }
.hb-fb { margin-top:10px; font-size:13.5px; line-height:1.8; }
.hb-fb b { color:var(--accent-deep); }
.hb-score { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px; }
.hb-score div { padding:10px; border:1px solid var(--line); border-radius:10px; text-align:center; background:var(--card); }
.hb-score b { display:block; font-size:20px; color:var(--accent-deep); font-variant-numeric:tabular-nums; }
.hb-score span { font-size:11.5px; color:var(--sub); }
.hb-score div:last-child b { font-size:14.5px; line-height:1.6; }

/* 页末补充（默认收起） */
.hb-extra { margin:40px 0 8px; border:1px solid var(--line); border-radius:12px; background:var(--card); }
.hb-extra summary { display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:13px 16px; cursor:pointer; list-style:none; font-size:14px; }
.hb-extra summary::-webkit-details-marker { display:none; }
.hb-extra summary svg { color:var(--accent); }
.hb-extra summary span { color:var(--sub); font-size:13px; }
.hb-extra[open] summary { border-bottom:1px solid var(--line); }
.hb-extra > div { padding:6px 18px 8px; font-size:14px; line-height:1.85; }
@media print { .hb-lab-ctl, .hb-role { display:none; } }

/* 小字提示、计算小组件（概念课） */
.hb-tip { margin:10px 0 16px; padding:8px 12px; border-left:3px solid var(--hb-amber); background:var(--hb-amber-soft); border-radius:0 8px 8px 0; font-size:13px; line-height:1.75; color:var(--text); }
.hb-calc { margin:16px 0; padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--card); }
.hb-calc-k { margin:0 0 10px; font-size:14px; font-weight:700; }
.hb-calc-in { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; }
.hb-calc-in label { display:grid; gap:4px; font-size:12px; color:var(--sub); }
.hb-calc-in input { width:100%; box-sizing:border-box; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--text); font-size:14px; font-variant-numeric:tabular-nums; }
.hb-calc-out { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin-top:12px; }
.hb-calc-out div { padding:10px 12px; border-radius:10px; background:var(--accent-soft); }
.hb-calc-out span { display:block; font-size:12px; color:var(--sub); }
.hb-calc-out b { font-size:18px; font-variant-numeric:tabular-nums; color:var(--accent-deep); }
.hb-calc-out b.neg { color:var(--hb-dn); }
.hb-calc-note { margin:10px 0 0; font-size:13px; line-height:1.75; color:var(--sub); }
.hb-lab-svg .k-zone { fill:var(--accent-soft); stroke:var(--accent); stroke-width:1; stroke-dasharray:4 3; }
.hb-lab-svg .k-level { stroke:var(--text); stroke-width:1.3; stroke-dasharray:5 4; opacity:.75; fill:none; }
.hb-lab-svg .k-level.dn { stroke:var(--hb-dn); opacity:1; } .hb-lab-svg .k-level.up { stroke:var(--hb-up); opacity:1; }
.hb-lab-svg .k-pv { font-size:11px; font-weight:800; }
.hb-lab-svg .k-pv.H { fill:var(--hb-up); } .hb-lab-svg .k-pv.L { fill:var(--hb-dn); }
@media(max-width:560px){ .hb-lab-svg .k-pv { font-size:16px; } }
.hb-feat.hb-feat2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(max-width:560px){ .hb-feat.hb-feat2 { grid-template-columns:minmax(0,1fr); } }
.hb-k .k-tag { font-size:11px; font-weight:800; } .hb-k .k-tag.up { fill:var(--hb-up); } .hb-k .k-tag.dn { fill:var(--hb-dn); }
.hb-state.s-up, .hb-state.s-high, .hb-state.s-hold, .hb-state.s-ok { border-top-color:var(--hb-up); }
.hb-state.s-mixed, .hb-state.s-mid, .hb-state.s-both, .hb-state.s-touch, .hb-state.s-inside, .hb-state.s-poke, .hb-state.s-plan { border-top-color:var(--hb-amber); }
.hb-state.s-down, .hb-state.s-broken, .hb-state.s-low, .hb-state.s-fail, .hb-state.s-back, .hb-state.s-view { border-top-color:var(--hb-dn); }
.hb-k .k-hline.k-seg { stroke-width:1.6; opacity:.85; } .hb-k .k-hline.k-seg.up { stroke:var(--hb-up); } .hb-k .k-hline.k-seg.dn { stroke:var(--hb-dn); }
.hb-k .k-focus { fill:var(--text); fill-opacity:.045; stroke:var(--sub); stroke-width:1; stroke-dasharray:4 3; }
.hb-k .k-lbl.k-focus-t { fill:var(--sub); }
.hb-k .k-zone { fill:var(--accent-soft); stroke:var(--accent); stroke-width:1; stroke-dasharray:4 3; }
.hb-state.s-away { border-top-color:var(--sub); }
.hb-k .k-ma, .hb-lab-svg .k-ma { fill:none; stroke:#2563eb; stroke-width:1.6; }
.hb-k .k-ma.slow, .hb-lab-svg .k-ma.slow { stroke:#d97706; }
:root[data-theme="dark"] .hb-k .k-ma, :root[data-theme="dark"] .hb-lab-svg .k-ma { stroke:#60a5fa; } :root[data-theme="dark"] .hb-k .k-ma.slow, :root[data-theme="dark"] .hb-lab-svg .k-ma.slow { stroke:#fbbf24; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .hb-k .k-ma, :root:not([data-theme="light"]) .hb-lab-svg .k-ma { stroke:#60a5fa; } :root:not([data-theme="light"]) .hb-k .k-ma.slow, :root:not([data-theme="light"]) .hb-lab-svg .k-ma.slow { stroke:#fbbf24; } }
.hb-k .k-lbl.slow { fill:#d97706; } .hb-k .k-lbl.fast { fill:#2563eb; }
.hb-state.s-trig, .hb-state.s-fill, .hb-state.s-pass, .hb-state.s-do { border-top-color:var(--hb-up); }
.hb-state.s-wait, .hb-state.s-cand, .hb-state.s-hint, .hb-state.s-part, .hb-state.s-sig, .hb-state.s-near { border-top-color:var(--hb-amber); }
.hb-state.s-cancel, .hb-state.s-expire, .hb-state.s-reject, .hb-state.s-stop, .hb-state.s-out { border-top-color:var(--hb-dn); }
.hb-legend span.ma:before { height:3px; margin-bottom:3px; background:#2563eb; } .hb-legend span.ma.slow:before { background:#d97706; }