/* 计算器21（场地特征周期插值计算器 - GB 55002-2021 §4.2.2-3 插值）专属样式 — 由 jsq/calculator21.php 内联 <style> 收敛而来
   页面级作用域，不污染全局。如需去重公共组件，见 _audit_reports 技术债 #260。 */

/* ========== 与全站 UI 规范一致 ========== */
:root {
    --primary: #2c80ff;
    --primary-dark: #1a5fcc;
    --primary-light: #f0f7ff;
    --border: #e2e8f0;
    --text: #1e293b;
    --text-sub: #475569;
    --text-mute: #94a3b8;
    --green: #16a34a;
    --red: #dc2626;
    --amber: #d97706;
}

.calc-block { background:#fff; border:1px solid var(--border);  margin-bottom:14px; overflow:hidden; }

.block-header { padding:10px 16px; background:#f0f7ff; border-bottom:1px solid var(--border); color:var(--primary-dark); font-size:.92rem; font-weight:600; display:flex; align-items:center; gap:8px; }

.block-header i { color:var(--primary); }

.block-content { padding:14px 16px; }

.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; margin-bottom:10px; }

.input-item label { display:block; font-size:.82rem; color:#475569; margin-bottom:4px; }

.input-item label .unit { color:#94a3b8; font-weight:400; font-size:.76rem; }

.input-item input, .input-item select {
    width:100%; box-sizing:border-box; padding:8px 10px; border:1px solid #cbd5e1; 
    font-size:.88rem; color:#1e293b; background:#fff; transition:all .2s;
}

.input-item input:focus, .input-item select:focus { border-color:var(--primary); outline:0; box-shadow:0 0 0 3px rgba(44,128,255,.15); }

.checkbox-row input[type=checkbox] { width:16px; height:16px; accent-color:var(--primary); }


/* 4 按钮 grid 左栏 */
.input-section > .action-buttons { display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:8px; margin-top:14px; }


/* 结果卡片 */
.result-card-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:10px 0; }

.result-card { background:#f0f7ff; border:1px solid #c7dcfb;  padding:10px 12px; }

.result-card.accent { background:#eaf2ff; border-color:var(--primary); }

.result-card .rc-label { font-size:.78rem; color:#475569; margin-bottom:4px; }

.result-card .rc-value { font-size:1.4rem; font-weight:700; color:var(--primary-dark); }

.result-card .rc-value small { font-size:.7rem; color:#64748b; font-weight:500; }

.result-card .rc-sub { font-size:.76rem; color:#64748b; margin-top:3px; }


/* 表格 */
.boundary-table { width:100%; border-collapse:collapse; font-size:.82rem; margin-top:10px; }

.boundary-table th, .boundary-table td { border:1px solid #e2e8f0; padding:6px 10px; text-align:center; }

.boundary-table thead th { background:#f0f7ff; color:var(--primary-dark); font-weight:600; }

.boundary-table tbody td.cell-num { color:#1e293b; font-weight:600; }

.boundary-table tbody td.cell-mark { color:#d97706; font-weight:600; }


/* SVG 平面图 */
#planeSvg { width:100%; height:520px; display:block; background:#fcfdfe;  }

.legend { display:flex; gap:14px; font-size:.78rem; color:#475569; margin-top:8px; flex-wrap:wrap; }

.legend i { display:inline-block; width:14px; height:8px;  margin-right:4px; vertical-align:middle; }


/* 检定徽章 */
.badge { display:inline-block; padding:2px 8px;  font-size:.72rem; font-weight:600; margin-right:4px; }

.badge.interp { background:#fef3c7; color:#92400e; border:1px solid #fcd34d; }

.badge.base { background:#eaf2ff; color:var(--primary-dark); border:1px solid var(--primary-dark); }


/* 推导步骤 */
.derive-step { font-size:.84rem; color:#475569; background:#f8fafc; border-left:3px solid var(--primary); padding:8px 12px;  margin:6px 0; }

.derive-step strong { color:var(--primary-dark); }


/* 移动端 */
@media (max-width:768px) {
        .calculator-wrapper { grid-template-columns: 1fr !important; }
    .form-row { grid-template-columns:1fr; }
    .result-card-grid { grid-template-columns:1fr; }
    #planeSvg { height:380px; }
}