/* ======================================================================
   盒模型调试器 · 独立设计（建筑剖面 / 分层图纸主题）
   浅色 = 灰白图纸 + 石板蓝标注；深色 = 夜览剖面
   ====================================================================== */
.bm{
  --ink:#243040; --sub:#5c6b7d; --faint:#96a3b2;
  --bg:#f2f4f6; --card:#ffffff; --card2:#eef1f4; --line:#d8dee5; --line2:#e6eaef;
  --pri:#475569; --pri-2:#64748b; --pri-soft:#e2e8f0; --pri-ink:#334155;
  --m:#f59e0b; --b:#eab308; --p:#22c55e; --ct:#3b82f6;
  --ok:#15803d; --err:#dc2626;
  --r:10px;
  --shadow:0 1px 2px rgba(36,48,64,.06),0 12px 28px rgba(36,48,64,.09);
  color:var(--ink);
  font-family:-apple-system,"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",system-ui,sans-serif;
  font-size:15px;line-height:1.75;
  background:
    linear-gradient(90deg, transparent 0 39px, rgba(71,85,105,.05) 39px 40px),
    linear-gradient(0deg, transparent 0 39px, rgba(71,85,105,.05) 39px 40px),
    var(--bg);
  padding:0 16px 56px;
}
:root[data-theme="dark"] .bm{
  --ink:#e3e9f0; --sub:#9aa8b8; --faint:#5f6f80;
  --bg:#10151b; --card:#171d25; --card2:#1d2530; --line:#2c3846; --line2:#243040;
  --pri:#94a3b8; --pri-2:#cbd5e1; --pri-soft:rgba(148,163,184,.14); --pri-ink:#cbd5e1;
  --m:#fbbf24; --b:#facc15; --p:#4ade80; --ct:#60a5fa;
  --ok:#4ade80; --err:#f87171;
  background:
    linear-gradient(90deg, transparent 0 39px, rgba(148,163,184,.07) 39px 40px),
    linear-gradient(0deg, transparent 0 39px, rgba(148,163,184,.07) 39px 40px),
    var(--bg);
}
.bm *{box-sizing:border-box;}
.bm-wrap{max-width:1160px;margin:0 auto;}
.bm input,.bm code,.bm pre{font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;}

.bm-hero{margin-top:22px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px 24px;box-shadow:var(--shadow);border-top:4px solid var(--pri);}
.bm-hero h1{margin:0 0 4px;font-size:clamp(21px,3vw,27px);font-weight:900;}
.bm-hero p{margin:0;color:var(--sub);font-size:14px;max-width:840px;}
.bm-hero p b{color:var(--pri-ink);}

.bm-desk{display:grid;grid-template-columns:330px 1fr;gap:16px;margin-top:16px;}
@media (max-width:980px){.bm-desk{grid-template-columns:1fr;}}
.bm-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow);}
.bm-panel h2{margin:0 0 10px;font-size:12.5px;font-weight:900;letter-spacing:.12em;color:var(--pri);display:flex;align-items:center;gap:8px;}
.bm-panel h2 i{width:12px;height:12px;border-radius:3px;display:inline-block;}
.bm-quad{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;}
.bm-quad label{font-size:11px;font-weight:800;color:var(--faint);}
.bm-in{width:100%;padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:var(--card2);color:var(--ink);font-size:13px;outline:none;}
.bm-in:focus{border-color:var(--pri-2);}
.bm-in.bad{border-color:var(--err);background:rgba(220,38,38,.06);}
.bm-bs{display:flex;gap:8px;margin:4px 0 12px;}
.bm-bs button{flex:1;border:1.5px solid var(--line);background:var(--card2);border-radius:8px;padding:7px 4px;font-size:12.5px;font-weight:800;color:var(--sub);cursor:pointer;font-family:Consolas,monospace;}
.bm-bs button.on{border-color:var(--ct);background:var(--pri-soft);color:var(--pri-ink);}
.bm-row{display:flex;flex-wrap:wrap;gap:8px;}
.bm-btn{border:none;background:var(--pri);color:#fff;border-radius:8px;padding:8px 16px;font-size:13px;font-weight:800;cursor:pointer;}
.bm-btn:hover{background:var(--pri-2);}
.bm-btn-ghost{background:var(--card2);color:var(--pri-ink);border:1.5px solid var(--line);}
.bm-btn-ghost:hover{border-color:var(--pri-2);}
.bm-msg{font-size:13px;font-weight:700;min-height:20px;margin-top:8px;}
.bm-msg.err{color:var(--err);}
.bm-msg.ok{color:var(--ok);}

.bm-stage{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--shadow);}
.bm-diagram{min-height:300px;display:flex;align-items:center;justify-content:center;background:var(--card2);border-radius:var(--r);border:1px solid var(--line2);padding:20px;overflow:auto;}
.bm-m{background:rgba(245,158,11,.18);border:1px dashed var(--m);display:flex;align-items:center;justify-content:center;position:relative;}
.bm-b{background:var(--b);display:flex;align-items:center;justify-content:center;}
.bm-p{background:rgba(34,197,94,.22);display:flex;align-items:center;justify-content:center;}
.bm-c{background:rgba(59,130,246,.25);border:1px solid var(--ct);display:flex;align-items:center;justify-content:center;color:var(--pri-ink);font-weight:800;font-size:12px;text-align:center;overflow:hidden;}
.bm-lab{position:absolute;font-size:10.5px;font-weight:800;color:var(--pri-ink);background:var(--card);border:1px solid var(--line);border-radius:4px;padding:0 6px;}
.bm-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:12.5px;color:var(--sub);}
.bm-legend i{width:12px;height:12px;border-radius:3px;display:inline-block;margin-right:5px;vertical-align:-2px;}
.bm-res{margin-top:14px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;}
.bm-res table{width:100%;border-collapse:collapse;font-size:13px;}
.bm-res th,.bm-res td{padding:8px 12px;border-bottom:1px solid var(--line2);text-align:left;}
.bm-res th{background:var(--card2);font-weight:800;color:var(--pri-ink);white-space:nowrap;}
.bm-res td{font-family:Consolas,monospace;}
.bm-res tr:last-child td,.bm-res tr:last-child th{border-bottom:none;}
.bm-hl{color:var(--err);font-weight:800;}

/* ---------- 场景预设 / 尺寸构成 / 问题清单 ---------- */
.bm-extra{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px;}
@media (max-width:900px){.bm-extra{grid-template-columns:1fr;}}
.bm-extra-col{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow);min-width:0;}
.bm-extra-col h2{margin:0 0 8px;font-size:12.5px;font-weight:900;letter-spacing:.12em;color:var(--pri);border-bottom:1px dashed var(--line);padding-bottom:8px;}
.bm-issues-col{grid-column:1/-1;}
.bm-hint{margin:0 0 12px;font-size:12.5px;color:var(--sub);line-height:1.7;}
.bm-presets{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
@media (max-width:420px){.bm-presets{grid-template-columns:1fr;}}
.bm-preset{border:1.5px solid var(--line);background:var(--card2);color:var(--pri-ink);border-radius:8px;padding:7px 10px;font-size:12.5px;font-weight:700;text-align:left;cursor:pointer;line-height:1.4;}
.bm-preset:hover{border-color:var(--pri-2);background:var(--pri-soft);}
.bm-viz{background:var(--card2);border:1px solid var(--line2);border-radius:var(--r);padding:8px 10px;overflow-x:auto;}
.bm-viz svg{display:block;width:100%;height:auto;min-width:520px;}
.bm-viz .bm-vt{fill:var(--sub);font-size:12px;font-weight:800;font-family:inherit;}
.bm-viz .bm-vl{fill:var(--ink);font-size:12px;font-weight:900;font-family:inherit;}
.bm-viz .bm-vn{fill:var(--sub);font-size:11px;font-family:inherit;}
.bm-viz .bm-vb{fill:#fff;font-size:11px;font-weight:800;font-family:Consolas,monospace;}
:root[data-theme="dark"] .bm-viz .bm-vb{fill:#10151b;}
.bm-issues{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.bm-issue{border-left:4px solid var(--line);background:var(--card2);border-radius:0 8px 8px 0;padding:8px 12px;font-size:13px;line-height:1.65;}
.bm-issue b{display:block;font-weight:800;color:var(--ink);}
.bm-issue em{display:block;font-style:normal;font-size:12px;color:var(--sub);margin-top:2px;}
.bm-issue .bm-lv{display:inline-block;font-size:11px;font-weight:900;padding:0 7px;border-radius:999px;margin-bottom:4px;background:var(--pri-soft);color:var(--pri-ink);}
.bm-issue.lv-err{border-left-color:var(--err);}
.bm-issue.lv-err .bm-lv{background:rgba(220,38,38,.14);color:var(--err);}
.bm-issue.lv-warn{border-left-color:var(--m);}
.bm-issue.lv-warn .bm-lv{background:rgba(245,158,11,.16);color:var(--m);}
.bm-issue.lv-info{border-left-color:var(--ct);}
.bm-issue.lv-info .bm-lv{background:rgba(59,130,246,.14);color:var(--ct);}
.bm-issue.lv-ok{border-left-color:var(--ok);}
.bm-issue.lv-ok .bm-lv{background:rgba(34,197,94,.14);color:var(--ok);}
.bm-empty{color:var(--faint);font-size:12.5px;padding:18px 4px;text-align:center;}

.bm-faq{margin-top:32px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 26px;box-shadow:var(--shadow);}
.bm-faq h2{margin:0 0 10px;font-size:19px;font-weight:900;color:var(--pri-ink);}
.bm-faq h3{margin:16px 0 4px;font-size:15px;font-weight:800;}
.bm-faq p{margin:0;color:var(--sub);font-size:14px;}
.bm-faq p b{color:var(--ink);}