/* ============================================================================
   calc-common.css —— 21 个计算器的【唯一】公共外观规范 v1.1
   ----------------------------------------------------------------------------
   目标：
     1. 全站计算器输入区 / 结果区外观完全统一（基准 = calculator18）
     2. 所有字号走 --fs-* 令牌，后台「网站基础设置」滑块可实时控制全部计算器
     3. 兼容三套历史结构家族，无需改写各计算器 HTML：
          新式  .calc-block / .block-header / .block-content / .param-table
          旧式  .input-group / .section-title / .result-display
          离群  .main-layout / .left-panel / .right-panel / .form-grid（calc16）
   ----------------------------------------------------------------------------
   加载位置：includes/calc_bootstrap.php（header.php 之后立即输出）
   因为各计算器的 calcN.css 在页面 body 中【后】加载，本文件对统一项使用
   !important 压过各 calcN.css 的硬编码 rem 字号。
   ----------------------------------------------------------------------------
   2026-08-12 v1.1：统一输入控件外观（圆角、内边距、最小高度、hover/focus 态）。
   ============================================================================ */

/* ══════════════ 1. 组件级派生字号令牌（全部由 --fs-* 推导，后台可控） ══════════════ */
:root {
    --calc-fs-block-title:    var(--fs-h3);                    /* 区块标题  16px */
    --calc-fs-cell:           var(--fs-body);                  /* 表格单元  14px */
    --calc-fs-input:          var(--fs-body);                  /* 输入框    14px */
    --calc-fs-label:          var(--fs-label);                 /* 参数标签  13px */
    --calc-fs-note:           var(--fs-result-formula, var(--fs-sm));          /* 说明小字   12px */
    --calc-fs-btn:            var(--fs-body);                  /* 按钮      14px */
    --calc-fs-icon-lg:        calc(var(--fs-h3) + 4px);        /* 大图标    20px */

    --calc-fs-result-title:   var(--fs-result-title, var(--fs-h3));              /* 结果卡标题 */
    --calc-fs-result-group:   var(--fs-result-group, var(--fs-h4));              /* 分组标题   */
    --calc-fs-result-item:    var(--fs-body);                                    /* 结果条目   14px */
    --calc-fs-result-label:   var(--fs-result-label, var(--fs-label));          /* 结果标签   */
    --calc-fs-result-value:   var(--fs-result-value, calc(var(--fs-body) + 3px)); /* 结果数值   */
    --calc-fs-result-unit:    var(--fs-result-unit, var(--fs-sm));              /* 单位/小字  */
    --calc-fs-formula:        var(--fs-result-formula, var(--fs-sm));           /* 公式脚注   */
    --calc-fs-table:          var(--fs-result-unit, var(--fs-label));           /* 结果表格   */
    --calc-fs-total:          calc(var(--fs-body) + 5px);                       /* 合计数值   19px */

    --calc-fs-summary-title:  var(--fs-result-conclusion, var(--fs-h3));          /* 结论标题   */
    --calc-fs-summary-detail: var(--fs-result-unit, var(--fs-body));             /* 结论正文   */

    /* 统一外观常量 */
    --calc-card-bg:      var(--white);
    --calc-card-border:  var(--gray-100);
    --calc-card-shadow:  0 4px 12px rgba(26, 32, 44, .06);
    --calc-line:         var(--gray-200);
    --calc-line-dash:    var(--gray-100);
}

/* ══════════════ 2. 双栏骨架（输入 ↔ 结果） ══════════════ */
/* 用 body 前缀提升特异性（0,1,1），压过各 calcN.css 里同名 !important 规则（0,1,0） */
/* v1.2 (2026-08-12)：满铺视口（width:100vw + margin-left/right:-50vw），内部 padding-left/right 用 max() 在宽屏自动对齐原 .container 中央区，窄屏回退 16px；与 .sitemap-nav 满铺策略保持一致。内容对齐宽度由 --content-max-width 控制（header.php 默认 1600px，app-enhance.css 大屏阶梯加宽至 1800/2000/90vw）。 */
body .calculator-wrapper,
body .calc-container > .main-layout,
body .main-layout {
    display: grid !important;
    /* minmax(0,1fr)：列可收缩到 0，输入长/内容宽时不被撑破（2026-08-12 修复 calculator9 电脑端左栏换行） */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: var(--column-gap, 16px) !important;
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    padding: 0 !important;
    padding-left: max(16px, calc((100vw - var(--content-max-width, 1600px)) / 2 + 16px)) !important;
    padding-right: max(16px, calc((100vw - var(--content-max-width, 1600px)) / 2 + 16px)) !important;
    box-sizing: border-box !important;
    position: relative !important;
    align-items: stretch !important;
}

body .input-section,
body .result-section,
body .left-panel,
body .right-panel {
    min-width: 0 !important;
    width: 100% !important;
}

/* ══════════════ 3. 区块卡片（新式 .calc-block ＝ 旧式 .input-group ＝ calc7 .input-card） ══════════════ */
.calc-block,
.input-section > .input-group,
.input-section > .input-card,
.input-cards > .input-card,
.left-panel > .calc-block {
    background: var(--calc-card-bg);
    margin-bottom: 10px;
    box-shadow: var(--calc-card-shadow);
    border: 1px solid var(--calc-card-border);
    overflow: hidden;
}

/* 区块标题：新式 .block-header ＝ 旧式 .section-title ＝ calc7 .input-card-title */
.block-header,
.input-section .section-title,
.input-card-title,
.result-section .section-title {
    background: var(--primary-light, var(--primary-50)) !important;
    padding: 6px 12px !important;
    border-bottom: 2px solid var(--primary) !important;
    font-weight: 600 !important;
    font-size: var(--calc-fs-block-title) !important;
    color: var(--primary-dark) !important;
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    line-height: var(--lh-tight, 1.4) !important;
}

.block-header i,
.input-section .section-title i,
.input-card-title i { font-size: var(--calc-fs-block-title) !important; }

/* 折叠箭头贴右 */
.block-header .toggle-icon { margin-left: auto; transition: transform .2s; }
.block-header.collapsed .toggle-icon { transform: rotate(-90deg); }

.block-content,
.input-card-body { padding: 10px 12px !important; }

/* ══════════════ 4. 参数表（.param-table 为基准形态） ══════════════ */
.param-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.param-table td { max-width: 0; }

.param-table td {
    padding: 4px 8px;
    border: 1px solid var(--calc-line);
    font-size: var(--calc-fs-cell) !important;
    vertical-align: middle;
    line-height: var(--lh-tight, 1.4);
    overflow-wrap: break-word;
    word-break: break-all;
}

.param-table td:first-child { color: var(--gray-700, var(--gray-700)); }

/* ══════════════ 5. 表单栅格（calc16 .form-grid / 旧式 .input-group 内部） ══════════════ */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}
/* 2026-08-12：统一 form-row 桌面两列（input 自动左右排列节省垂直空间），≤768px 单列 */
.form-row{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px 14px !important;
    margin-bottom: 0 !important;
}
.form-row > *{ min-width: 0 !important; }
.form-row .full-width,
.form-row > .full-width{ grid-column: 1 / -1 !important; }
@media (max-width:768px){
    .form-row{ grid-template-columns: 1fr !important; }
}

.form-grid .input-item.full-width,
.input-item.full-width { grid-column: 1 / -1; }

.input-item label,
.input-group > label,
.input-row label,
.form-label {
    display: block;
    font-size: var(--calc-fs-label) !important;
    font-weight: 600;
    color: var(--gray-700, var(--gray-700));
    margin-bottom: 4px;
    line-height: var(--lh-tight, 1.4);
}

/* ══════════════ 6. 输入控件（全家族统一） ═══════════════
   注意：此处不选 select，否则 .input-item select 被强制 display:block !important
   会破坏通过 class 或 style.display 切换 select 显隐的页面（如 calc9 截面规格）。
   select 的宽度/样式由 section 6b 专门规则控制。 */
.param-table input,
.input-item input,
.input-group input[type="text"],
.input-group input[type="number"],
.input-row input,
/* 2026-08-12：计算器示意图自适应（与输入区等高，避免 SVG 撑大占满右侧） */
.diagram-svg,
.diagram-svg[width],
.result-section svg[id*="Diagram"],
.result-section svg[id*="diagram"]{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    display:block !important;
    margin:0 auto !important;
}
/* calc11 特殊 form-row 已设两列时，确保响应式：768px 以下单列 */
@media (max-width:768px){
    .input-section .form-row,
    .form-row.u-st102,
    .form-row.u-st85{
        grid-template-columns:1fr !important;
    }
}

/* ══════════════ 6b. 输入控件美化（v1.1 2026-08-12） ══════════════
   统一：圆角、舒适内边距、最小高度、柔和边框、hover/focus 过渡、内阴影 */
body .param-table input,
body .param-table select,
body .param-table textarea,
body .input-item input,
body .input-item select,
body .input-item textarea,
body .input-group input[type="text"],
body .input-group input[type="number"],
body .input-group input[type="email"],
body .input-group input[type="tel"],
body .input-group select,
body .input-row input,
body .input-row select,
body .form-control,
body .input-with-select input,
body .input-with-select select {
    width: 100% !important;
    min-height: 40px !important;
    padding: 8px 12px !important;
    border: 1px solid var(--gray-300, var(--gray-300)) !important;
    border-radius: 6px !important;
    font-size: var(--calc-fs-input) !important;
    line-height: 1.4 !important;
    background: var(--white) !important;
    color: var(--gray-900, var(--gray-900)) !important;
    box-sizing: border-box !important;
    box-shadow: inset 0 1px 2px rgba(26, 32, 44, .04) !important;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
    appearance: auto !important;
    -webkit-appearance: auto !important;
}

body .param-table input:hover,
body .param-table select:hover,
body .param-table textarea:hover,
body .input-item input:hover,
body .input-item select:hover,
body .input-item textarea:hover,
body .input-group input:hover,
body .input-group select:hover,
body .input-row input:hover,
body .input-row select:hover,
body .form-control:hover,
body .input-with-select input:hover,
body .input-with-select select:hover {
    border-color: var(--primary, var(--primary)) !important;
    background: var(--white) !important;
}

body .param-table input:focus,
body .param-table select:focus,
body .param-table textarea:focus,
body .input-item input:focus,
body .input-item select:focus,
body .input-item textarea:focus,
body .input-group input:focus,
body .input-group select:focus,
body .input-row input:focus,
body .input-row select:focus,
body .form-control:focus,
body .input-with-select input:focus,
body .input-with-select select:focus {
    border-color: var(--primary, var(--primary)) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(66, 144, 245, .14), inset 0 1px 2px rgba(66, 144, 245, .04) !important;
    background: var(--white) !important;
}

body .param-table input:disabled,
body .param-table select:disabled,
body .input-item input:disabled,
body .input-item select:disabled,
body .input-group input:disabled,
body .input-group select:disabled,
body .input-row input:disabled,
body .input-row select:disabled,
body .form-control:disabled,
body .input-with-select input:disabled,
body .input-with-select select:disabled,
body .param-table input[readonly],
body .input-item input[readonly],
body .input-group input[readonly],
body .input-row input[readonly],
body .form-control[readonly],
body .input-with-select input[readonly] {
    background: var(--gray-100, var(--gray-100)) !important;
    border-color: var(--gray-200, var(--gray-200)) !important;
    color: var(--gray-500, var(--gray-500)) !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

body .param-table select,
body .input-item select,
body .input-group select,
body .input-row select,
body .form-control select,
body .input-with-select select { cursor: pointer !important; }

body .param-table input[type="checkbox"],
body .input-item input[type="checkbox"],
body .input-group input[type="checkbox"],
body .input-row input[type="checkbox"],
body .checkbox-cell input[type="checkbox"],
body .param-table input[type="radio"],
body .input-item input[type="radio"],
body .input-group input[type="radio"],
body .input-row input[type="radio"] {
    width: auto !important;
    min-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    accent-color: var(--primary, var(--primary)) !important;
    box-shadow: none !important;
    background: transparent !important;
    vertical-align: middle !important;
    margin-right: 6px !important;
}

/* 单位后缀 */
.unit { font-size: var(--calc-fs-result-unit) !important; color: var(--gray-500, var(--gray-500)); margin-left: 4px; }

/* ══════════════ 7. 说明 / 提示小字 ══════════════ */
.help-icon {
    color: var(--primary);
    cursor: pointer;
    margin-left: 5px;
    font-size: var(--calc-fs-label) !important;
    vertical-align: middle;
}
.help-icon:hover { color: var(--primary-dark); }

.help-note,
.form-note,
.parameter-info,
.rebar-note,
.footer-note {
    padding: 6px 10px;
    background: var(--primary-100, var(--primary-light));
    border-left: 3px solid var(--primary);
    font-size: var(--calc-fs-note) !important;
    color: var(--gray-500, var(--gray-500));
    line-height: 1.5;
    font-weight: 400;
    white-space: normal;
}
.help-note strong, .form-note strong { color: var(--primary-dark); }

.gamma-help-note {
    padding: 6px 10px;
    background: var(--warning-50);
    border-left: 3px solid var(--warning, var(--warning));
    font-size: var(--calc-fs-note) !important;
    color: var(--gray-500, var(--gray-500));
    line-height: 1.5;
    font-weight: 400;
}
.gamma-help-note strong { color: #b45309; }

.spec-ref, .spec-ref-total {
    font-size: var(--calc-fs-note) !important;
    color: var(--gray-400, var(--gray-400));
}

/* ══════════════ 8. 计算方向 / 模式选择 ══════════════ */
.mode-select { display: flex; gap: 10px; flex-wrap: wrap; }

.mode-option {
    flex: 1;
    min-width: 140px;
    padding: 8px 10px;
    border: 2px solid var(--primary-100, var(--primary-light));
    cursor: pointer;
    text-align: center;
    transition: .2s;
    font-size: var(--calc-fs-label) !important;
    font-weight: 600;
    color: var(--gray-500, var(--gray-500));
    background: var(--white);
    line-height: var(--lh-tight, 1.4);
}
.mode-option:hover { border-color: var(--primary); }
.mode-option.active {
    border-color: var(--primary);
    background: var(--primary-light, var(--primary-50));
    color: var(--primary-dark);
}
.mode-option .mode-icon {
    font-size: var(--calc-fs-icon-lg) !important;
    display: block;
    margin-bottom: 4px;
}

.shape-row td { background: var(--gray-050, var(--gray-050)) !important; }

/* ══════════════ 9. 结果卡（.result-card ＝ 旧式 .result-display ＝ calc7 .key-results） ══════════════ */
.result-card,
.result-section > .result-display,
.result-section > .all-results,
.key-results {
    background: var(--calc-card-bg);
    padding: 0 16px 16px;
    box-shadow: var(--calc-card-shadow);
    border: 1px solid var(--calc-card-border);
}

.result-title,
.key-title {
    font-size: var(--calc-fs-result-title) !important;
    font-weight: 700 !important;
    color: var(--primary-dark);
    margin: 0 0 12px !important;
    padding: 16px 0 10px !important;
    border-bottom: 2px solid var(--primary-light, var(--primary-50));
    display: flex;
    align-items: center;
    gap: 8px;
}
/* 作为结果卡第一个子元素时，顶部与输入区标题条严格对齐 */
.result-card > .result-title:first-child,
.result-section > .result-display > .result-title:first-child,
.result-section > .all-results > .result-title:first-child,
.key-results > .key-title:first-child {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* 结果卡内部分组标题（一、材料指标 / 二、截面几何 等） */
.result-group-title,
.result-card .result-group-title {
    font-size: var(--calc-fs-result-group) !important;
    font-weight: 700 !important;
    color: var(--primary, var(--primary)) !important;
    margin: 18px 0 8px !important;
}
.result-group-title:first-of-type,
.result-card .result-group-title:first-of-type { margin-top: 0 !important; }

.result-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 0;
    border-bottom: 1px dashed var(--calc-line-dash);
    font-size: var(--calc-fs-result-item) !important;
}
.result-item:last-child { border-bottom: none; }

.result-label,
.result-item .label,
.result-card .label { color: var(--gray-500, var(--gray-500)); flex: 1; font-size: var(--calc-fs-result-label) !important; }

.result-value,
.result-item .value,
.result-card .value,
.key-value {
    font-weight: 700;
    color: var(--primary);
    font-size: var(--calc-fs-result-value) !important;
    margin-left: 12px;
    text-align: right;
}

.result-formula {
    color: var(--gray-400, var(--gray-400));
    font-size: var(--calc-fs-formula) !important;
    margin-left: 8px;
    white-space: nowrap;
}

/* 总计结果条：统一为浅蓝底+主色左边框的汇总卡，替代各 calcN.css 的蓝色大按钮样式 */
.total-result {
  font-size: var(--calc-fs-total) !important;
  font-weight: 700 !important;
  padding: 16px !important;
  background: var(--primary-050, var(--primary-50)) !important;
  border-left: 4px solid var(--primary) !important;
  text-align: center !important;
  color: var(--gray-700, var(--gray-700)) !important;
  margin-top: 12px !important;
}
.total-label  { font-size: var(--calc-fs-result-label) !important; color: var(--gray-700, var(--gray-700)) !important; font-weight: 600 !important; }
.total-value  { font-size: var(--calc-fs-total) !important; font-weight: 700 !important; color: var(--primary) !important; margin-top: 4px !important; }
.total-result .spec-ref-total,
.total-result + .spec-ref-total {
  font-size: var(--calc-fs-note, 12px) !important;
  color: var(--gray-500, var(--gray-500)) !important;
  margin-top: 6px !important;
  display: block;
}

/* calc16 结果表格族 */
.result-table { width: 100%; border-collapse: collapse; font-size: var(--calc-fs-table) !important; }
.result-table th,
.result-table td { font-size: var(--calc-fs-table) !important; }
.result-content { font-size: var(--calc-fs-result-item) !important; line-height: var(--lh-base, 1.6); }
.result-header  { font-size: var(--calc-fs-result-title) !important; }

/* 语义状态色 */
.result-pass, .result-ok { color: var(--success, var(--success)); font-weight: 700; }
.result-fail             { color: var(--danger,  var(--danger)); font-weight: 700; }
.result-warning          { color: var(--warning, var(--warning)); }
.result-info             { color: var(--primary); }

/* 结果区空状态占位（统一各计算器未计算时的提示） */
.result-empty-state{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:32px 20px;
  text-align:center;
  color:var(--gray-500, var(--gray-500));
}
.result-empty-state > i{
  font-size:var(--calc-fs-icon-lg, 20px);
  color:var(--primary-100, var(--primary-light));
  width:56px; height:56px;
  display:flex; align-items:center; justify-content:center;
  background:var(--primary-050, var(--primary-50));
}
.result-empty-title{
  font-size:var(--calc-fs-result-item, 14px);
  font-weight:600;
  color:var(--gray-700, var(--gray-700));
}
.result-empty-text{
  font-size:var(--calc-fs-note, 12px);
  color:var(--gray-500, var(--gray-500));
}

/* ══════════════ 10. 结论框（summary / conclusion） ══════════════ */
.summary-box,
.conclusion-box {
    margin-top: 18px;
    padding: 18px;
    text-align: center;
}
.summary-box.pass, .conclusion-box.pass { background: var(--success-50); border: 1px solid var(--success-50); }
.summary-box.fail, .conclusion-box.fail { background: var(--danger-50); border: 1px solid var(--danger-50); }
.summary-box.info, .conclusion-box.info { background: var(--primary-100, var(--primary-light)); border: 1px solid var(--primary-50); }

.summary-title  { font-size: var(--calc-fs-summary-title) !important;  font-weight: 700; margin-bottom: 6px; }
.summary-detail { font-size: var(--calc-fs-summary-detail) !important; color: var(--gray-500, var(--gray-500)); line-height: 1.7; }

/* ══════════════ 11. 操作按钮区（仅布局，颜色由 calculator.css 的 .btn-* 决定） ══════════════ */
.action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 10px;
    justify-content: space-between;
}
.action-buttons .btn { font-size: var(--calc-fs-btn) !important; flex: 1 1 auto; min-width: 120px; }

/* ══════════════ 12. 响应式：仅重定义派生令牌，规则本体零重复 ══════════════ */
@media (max-width: 768px) {
    :root {
        --calc-fs-block-title:    var(--fs-h4);
        --calc-fs-cell:           var(--fs-label);
        --calc-fs-input:          var(--fs-label);
        --calc-fs-result-title:   var(--fs-result-title, var(--fs-h4));
        --calc-fs-result-group:   var(--fs-result-group, var(--fs-label));
        --calc-fs-result-item:    var(--fs-label);
        --calc-fs-result-label:   var(--fs-sm);
        --calc-fs-result-value:   var(--fs-result-value, var(--fs-body));
        --calc-fs-result-unit:    var(--fs-result-unit, var(--fs-xs));
        --calc-fs-formula:        var(--fs-result-formula, var(--fs-xs));
        --calc-fs-table:          var(--fs-result-unit, var(--fs-sm));
        --calc-fs-total:          calc(var(--fs-body) + 3px);
        --calc-fs-summary-title:  var(--fs-result-conclusion, var(--fs-h4));
        --calc-fs-summary-detail: var(--fs-result-unit, var(--fs-label));
        --calc-fs-icon-lg:        var(--fs-h2);
    }

    body .calculator-wrapper,
    body .calc-container > .main-layout,
    body .main-layout { grid-template-columns: 1fr !important; }

    .form-grid { grid-template-columns: 1fr; }
    .action-buttons { flex-direction: column; }
    .action-buttons .btn { width: 100%; min-width: unset; }
    .param-table td { padding: 7px 8px; }
    .param-table td:first-child { white-space: normal; width: 44%; }
    .mode-select { flex-direction: column; }
    .mode-option { min-width: unset; }
    .result-item { flex-direction: column; gap: 2px; align-items: flex-start; }
    .result-value, .result-item .value { text-align: left; margin-left: 0; }
    .result-formula { white-space: normal; margin-left: 0; }
}

@media (max-width: 380px) {
    :root {
        --calc-fs-cell:  var(--fs-sm);
        --calc-fs-input: var(--fs-sm);
        --calc-fs-btn:   var(--fs-label);
    }
    .param-table td { padding: 6px 6px; }
    .param-table td:first-child { width: 46%; }
    .action-buttons { gap: 8px; }
}

/* ══════════════ 13. 统一示意图容器 / 画板（自适应比例 v1.0 · 2026-08-12） ══════════════
   背景：全站布局已改为满铺视口（最宽≈1600px，双栏各≈760px）。旧规则仅
        .diagram-svg{width:100%;height:auto}，无 max-height、无容器，导致：
          · 宽屏下示意图被放大到整列宽，与输入/结果卡不协调；
          · tall viewBox（如 calc10 的 0 0 720 1000）纵向撑爆页面。
   设计：① 统一容器 .calc-diagram / .diagram-container / 既有 .diagram / .calc10-diagram
            —— 卡片外观（背景/边框/阴影）、限定 max-width、居中；
         ② 容器内 svg[viewBox] / canvas 自适应容器宽、按比例缩放、max-height 封顶；
         ③ 移动端 max-width 放开为 100%。
   覆盖：用 body 前缀提升特异性（0,1,1），压过各 calcN.css 的同类 !important 规则；
        命中既有 .diagram-svg 类、result-section 内 <svg viewBox> 与 <canvas>（含 calc2）。
   无需逐计算器改 HTML（要加卡片容器时见下方 rollout）。
   ════════════════════════════════════════════════════════════════════════════════ */

/* —— 13.1 容器：卡片化 + 协调上限 —— */
body .calc-diagram,
body .diagram-container,
body .result-section > .diagram,
body .calc10-diagram {
    display: block !important;
    width: 100% !important;
    max-width: 720px !important;        /* 与结果卡协调，宽屏不占满整列 */
    margin: 12px auto !important;
    padding: 12px !important;
    background: var(--calc-card-bg, var(--white)) !important;
    border: 1px solid var(--calc-card-border, var(--gray-100)) !important;
    box-shadow: var(--calc-card-shadow) !important;
    box-sizing: border-box !important;
    text-align: center;
    overflow: auto;                     /* tall 图超 max-height 时局部滚动 */
}
/* 容器内小标题与卡片标题协调 */
body .calc-diagram > h3, body .calc-diagram > h4, body .calc-diagram > h5,
body .diagram-container > h3, body .diagram-container > h4, body .diagram-container > h5,
body .result-section > .diagram > h3, body .result-section > .diagram > h4,
body .calc10-diagram > h3, body .calc10-diagram > h4, body .calc10-diagram > h5 {
    margin: 0 0 8px !important;
    padding: 0 !important;
    font-size: var(--calc-fs-block-title, 16px) !important;
    font-weight: 600 !important;
    color: var(--primary-dark, var(--primary-dark)) !important;
    text-align: left;
}

/* —— 13.2 画板：SVG/Canvas 在容器内自适应 + max-height 封顶 —— */
body .diagram-svg,
body .result-section svg[viewBox],
body .calc-diagram svg,
body .diagram-container svg,
body .calc10-diagram svg,
body .calc-diagram canvas,
body .diagram-container canvas,
body .calc10-diagram canvas {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 460px !important;       /* 关键上限：tall viewBox 不再撑爆 */
    margin: 0 auto !important;
}
/* canvas 以 width/height 属性为内禀比例，height:auto 即按比例缩放 */
body .calc-diagram canvas,
body .diagram-container canvas,
body .calc10-diagram canvas { height: auto !important; }

/* —— 13.3 移动端：放开上限，自然 100% —— */
@media (max-width: 768px) {
    body .calc-diagram,
    body .diagram-container,
    body .result-section > .diagram,
    body .calc10-diagram {
        max-width: 100% !important;
        margin: 10px 0 !important;
        padding: 10px !important;
    }
    body .diagram-svg,
    body .result-section svg[viewBox] { max-height: 360px !important; }
}