/* calc12.css — calculator12.php 页面专用样式（由内联 <style> 抽出，2026-08-10） */

/* 页面专用样式 */
:root {
--primary: #2c80ff;
--primary-light: #e8f0fb;
--primary-dark: #1a5fcc;
--text-secondary: #4a6a8a;
--border-light: #d0dce8;
}

.calculator-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: max(12px, var(--column-gap, 16px));
margin-top: 0;
}

@media (max-width: 960px) {
.calculator-wrapper { grid-template-columns: 1fr; }
}

.input-section, .result-section {
display: flex;
flex-direction: column;
gap: 10px;
background: white;
border-radius: 0;
padding: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
border: 1px solid #eaeef5;
}

.calc-block {
background: white;
border-radius: 0;
border: 1px solid #e4ecf5;
overflow: hidden;
box-shadow: 0 2px 6px rgba(0,0,0,.04);
}

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

.form-row.one { grid-template-columns: 1fr; }

.input-item { display: flex; flex-direction: column; gap: 2px; }

.input-item .unit { color: #9aafcc; font-size: .72rem; margin-left: 3px; }

.input-item input, .input-item select {
padding: 5px 7px;
border: 1px solid var(--border-light);
border-radius: 0;
font-size: .85rem;
background: var(--white);
}

.input-item input:focus, .input-item select:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 2px rgba(74,111,165,.12);
}

/* 复选框行 */
.checkbox-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
padding: 6px 8px;
background: #fef9e7;
border-radius: 0;
border: 1px dashed #f0c040;
}

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

.checkbox-row label {
font-weight: 600; font-size: .8rem; color: #8a6d00; cursor: pointer;
}

.pile-type-toggle {
display: flex;
background: #edf2f9;

padding: 3px;
border: 1px solid var(--border-light);
}

.pile-type-toggle input[type=radio] { display: none; }

.pile-type-toggle label {
flex: 1;
text-align: center;
padding: 5px 0;

font-size: .8rem;
font-weight: 600;
color: #6a88aa;
cursor: pointer;
}

.pile-type-toggle input[type=radio]:checked + label {
background: white;
color: var(--primary);
box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

.btn {
padding: 12px 24px;
border: none;
border-radius: 0;
font-weight: 600;
font-size: .95rem;
cursor: pointer;
transition: .25s;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 44px;
}

.action-row {
display: flex;
gap: 10px;
flex-wrap: wrap;
}

/* 示意图 */
#pileSketch {
width: 100%;
background: #f0f4fa;
border-radius: 0;
display: block;
}

/* 结果区 */
.result-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 8px;
margin-bottom: 10px;
}

.result-card {
background: var(--primary-light);
border-radius: 0;
padding: 10px 12px;
border-left: 4px solid var(--primary);
}

.result-card.highlight { border-left-color: var(--success); background: var(--success-50); }

.result-card.mode2 { border-left-color: var(--warning); background: var(--warning-50); }

.result-card .rc-label { font-size: .75rem; color: var(--text-secondary); }

.result-card .rc-value { font-size: 1.3rem; font-weight: 700; color: var(--primary); margin: 3px 0; }

.result-card.highlight .rc-value { color: var(--success); }

.result-card.mode2 .rc-value { color: var(--warning); }

.placeholder-tip {
text-align: center;
padding: 40px 20px;
color: #aab8cc;
font-size: .9rem;
}

.placeholder-tip i { font-size: 3rem; display: block; margin-bottom: 10px; }

/* 系数取值参考表 */
.xi-ref-table {
width: 100%;
border-collapse: collapse;
margin: 10px 0;
font-size: .8rem;
}

.xi-ref-table th {
background: var(--primary-light);
color: var(--primary-dark);
padding: 7px 10px;
text-align: center;
font-weight: 600;
border-bottom: 2px solid var(--primary);
}

.xi-ref-table td {
padding: 6px 10px;
border-bottom: 1px solid var(--border-light);
color: #3a5070;
}

.xi-ref-table tr:hover td {
background: #f8fafe;
}

.xi-ref-table .range-cell {
color: var(--danger);
font-weight: 600;
text-align: center;
}

.xi-ref-table .common-cell {
color: var(--success);
font-weight: 700;
text-align: center;
}

.xi-ref-note {
font-size: .75rem;
color: var(--gray-400);
margin-top: 4px;
padding-left: 4px;
}