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

/* 页面专用样式 */
/* 计算器样式 */

.calculator-wrapper {

display: grid;

grid-template-columns: 1fr 1fr;

gap: max(12px, var(--column-gap, 16px));

min-height: calc(100vh - 200px);

}




.input-section {

background: white;



padding: 12px;

box-shadow: 0 2px 8px rgba(0,0,0,0.08);

}




.section-title {

font-size: 14px;

font-weight: 600;

color: var(--gray-700);

margin-bottom: 10px;

padding-bottom: 7px;

border-bottom: 2px solid var(--primary);

}




.calc-block {

margin-bottom: 10px;

border: 1px solid var(--gray-200);



overflow: hidden;

box-shadow: 0 1px 3px rgba(0,0,0,0.05);

}




.block-header {

background: var(--primary);

color: white;

padding: 7px 12px;

font-weight: 600;

font-size: 12px;

display: flex;

align-items: center;

}




.block-header i {

margin-right: 6px;

font-size: 13px;

}




.block-content {

padding: 10px 12px;

background: white;

}




/* 统一的input-group样式（与其他计算器一致） */

.input-group {

margin-bottom: 8px;

}




.input-group label {

display: block;

font-size: 12px;

font-weight: 600;

color: var(--gray-700);

margin-bottom: 4px;

}




.input-group input,

.input-group select {

width: 100%;

padding: 6px 8px;

border: 1.5px solid var(--gray-200);



font-size: 12px;

transition: all 0.2s;

}




.input-group input:focus,

.input-group select:focus {

outline: none;

border-color: var(--primary);

box-shadow: 0 0 0 2px rgba(74, 111, 165, 0.1);

}




.input-group .parameter-info {

font-size: 12px;

color: var(--gray-400);

margin-top: 3px;

}




.form-row.three {

grid-template-columns: repeat(3, 1fr);

}




.input-item {

display: flex;

flex-direction: column;

margin-bottom: 2px;

}




.input-item label {

font-size: 12px;

font-weight: 600;

color: var(--gray-700);

margin-bottom: 3px;

}




.input-item input,

.input-item select {

padding: 6px 8px;

border: 1.5px solid var(--gray-200);



font-size: 12px;

background: var(--gray-050);

transition: all 0.2s;

}




.input-item input:focus,

.input-item select:focus {

outline: none;

border-color: var(--primary);

background: white;

box-shadow: 0 0 0 2px rgba(74, 111, 165, 0.1);

}




.input-item .unit {

font-size: 12px;

color: var(--gray-400);

font-weight: normal;

}




.input-item .hint {

display: block;

font-size: 12px;

color: var(--gray-400);

margin-top: 2px;

}




.result-section {

background: white;



padding: 14px;

box-shadow: 0 2px 8px rgba(0,0,0,0.08);

overflow-y: auto;

}




/* 3D示意图 */

#sketch3d {

width: 100%;

height: 380px;

background: #1a1f2e;



margin-bottom: 12px;

cursor: grab;

display: block;

}




#sketch3d:active {

cursor: grabbing;

}




/* 结果表格 */

.result-table {

width: 100%;

border-collapse: collapse;

margin: 10px 0;

}




.result-table th,

.result-table td {

padding: 8px 12px;

border: 1px solid var(--gray-200);

text-align: center;

}




.result-table th {

background: var(--gray-100);

font-weight: 600;

}




.result-table .pass {

color: var(--success);

font-weight: 600;

}




.result-table .fail {

color: var(--danger);

font-weight: 600;

}




/* 汇总卡片 */

.summary-card {

padding: 20px;



text-align: center;

margin-bottom: 20px;

}




.summary-card.pass {

background: var(--success);

color: white;

}




.summary-card.fail {

background: var(--danger);

color: white;

}




.summary-card h3 {

font-size: 20px;

margin-bottom: 5px;

}




.summary-card p {

font-size: 14px;

opacity: 0.9;

}




/* 按钮样式 */

.btn {

padding: 10px 20px;

border: none;



font-size: 14px;

font-weight: 600;

cursor: pointer;

transition: all 0.2s;

}




/* 小提示文字 */

.hint {

font-size: 12px;

color: var(--gray-400);

margin-top: 4px;

}




/* 验算项目卡片 */

.check-item {

background: var(--gray-050);



padding: 15px;

margin-bottom: 10px;

}




.check-item h4 {

font-size: 14px;

margin-bottom: 10px;

color: var(--gray-700);

}




.check-item .detail {

font-size: 12px;

color: var(--gray-500);

}




/* 响应式 */

@media (max-width: 900px) {

.calculator-wrapper {

grid-template-columns: 1fr;

}

}