/* 计算器19（单桩水平承载力计算 - 在线计算工具）专属样式 — 由 jsq/calculator19.php 内联 <style> 收敛而来
   页面级作用域，不污染全局。如需去重公共组件，见 _audit_reports 技术债 #260。 */

.calc-block { background:white;  margin-bottom:14px; box-shadow:0 2px 8px rgba(0,0,0,0.04); border:1px solid var(--gray-100); overflow:hidden; }

    .block-header { background:var(--primary-light); padding:8px 14px; border-bottom:2px solid var(--primary); font-weight:600; font-size:1.05rem; color:var(--primary-dark); display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none; }

    .block-header i{font-size:1.1rem}

    .block-header .toggle-icon{margin-left:auto; transition:transform .2s; color:var(--gray-400)}

    .block-header .toggle-icon.collapsed{transform:rotate(-90deg)}

    .block-content{padding:10px 12px}

    .block-content.collapsed{display:none}

    .param-table td:first-child{background:var(--gray-050); font-weight:600; color:var(--text-secondary); width:42%}

    .param-table td:last-child{width:58%; background:var(--white)}

    .param-table input,.param-table select{width:100%; padding:7px 10px; border:1px solid var(--primary-light);  font-size:.88rem; background:white; box-sizing:border-box; transition:.2s}

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

    .help-icon{color:var(--primary); cursor:pointer; margin-left:5px; vertical-align:middle}

    .help-icon:hover{color:var(--primary-dark)}

    .help-note{padding:6px 10px; background:var(--primary-light); border-left:3px solid var(--primary);  font-size:.76rem; color:var(--text-secondary); line-height:1.5}

    /* 计算模式 */
    .mode-select{display:flex; gap:10px; flex-wrap:wrap}

    .mode-option:hover{border-color:var(--primary)}

    .mode-option.active{border-color:var(--primary); background:var(--primary-light); color:var(--primary-dark)}

    .action-buttons{display:flex; flex-wrap:wrap; gap:12px; margin-top:10px; justify-content:space-between}

    .btn{padding:10px 20px; border:none;  font-weight:600; font-size:.9rem; cursor:pointer; transition:.2s; display:inline-flex; align-items:center; justify-content:center; gap:6px; flex:1 1 auto; min-width:120px}

    .btn-primary{background:var(--primary); color:white; border:none}

    .btn-primary:hover{background:var(--primary-dark); transform:translateY(-2px); box-shadow:0 6px 12px rgba(44,128,255,.2)}

    #loadingOverlay{display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.6); z-index:10000; justify-content:center; align-items:center; color:white; font-size:1.8rem; backdrop-filter:blur(3px)}

    .calculator-wrapper{display:grid !important; grid-template-columns:1fr 1fr !important; width:100%}

    .input-section,.result-section{min-width:0}

    .result-card{background:white;  padding:16px; box-shadow:0 2px 8px rgba(0,0,0,.04); border:1px solid var(--gray-100)}

    .result-title{font-size:1.05rem; font-weight:700; color:var(--primary-dark); margin-bottom:12px; padding-bottom:8px; border-bottom:2px solid var(--primary-light); display:flex; align-items:center; gap:8px}

    .result-item:last-child{border-bottom:none}

    .result-label{color:var(--gray-500); flex:1}

    .result-value{font-weight:700; color:var(--primary); font-size:1rem; margin-left:12px; text-align:right}

    .result-pass{color:var(--success)}

    .result-fail{color:var(--danger)}

    .summary-box{margin-top:14px; padding:14px;  text-align:center}

    .summary-box.pass{background:var(--success-50); border:1px solid var(--success-50)}

    .summary-box.fail{background:var(--danger-50); border:1px solid var(--danger-50)}

    @media(max-width:768px){
        .calculator-wrapper { grid-template-columns: 1fr !important; }
        .action-buttons{flex-direction:column}
        .btn{width:100%; min-width:unset}

        .calculator-wrapper{grid-template-columns:1fr !important}

        .result-value{text-align:left; margin-left:0}
    }