/* 计算器6（女儿墙计算器 - 在线计算女儿墙结构）专属样式 — 由 jsq/calculator6.php 内联 <style> 收敛而来
   页面级作用域，不污染全局。如需去重公共组件，见 _audit_reports 技术债 #260。 */

.btn {

        padding: 10px 20px; border: none;  font-weight: 600; font-size: 0.9rem;

        cursor: pointer; transition: 0.2s; display: inline-flex; align-items: center;

        justify-content: center; gap: 6px;

        flex: 1 1 auto; min-width: 160px;

    }

    .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,0.2); }

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

    .btn-info:hover { background: var(--info); }

    /* ========== 计算器6特有样式 ========== */

    /* 两列布局核心样式 */

    .input-group {

        display: grid;

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

        gap: 16px 20px;

        margin-bottom: 25px;

        background: var(--gray-050);

        border-radius: 0;

        padding: 18px;

        border: 1px solid var(--primary-light);

    }

    .input-item {

        display: flex;

        flex-direction: column;

        gap: 4px;

        min-width: 0;

    }

    .input-item .label {

        font-size: .9rem;

        font-weight: 500;

        color: var(--gray-900);

        white-space: nowrap;

    }

    .input-item .control-row {

        display: flex;

        align-items: center;

        gap: 6px;

        flex-wrap: wrap;

    }

    .input-item .control-row input,

    .input-item .control-row select {

        flex: 1 1 120px;

        min-width: 100px;

        padding: 8px 10px;

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

        border-radius: 0;

        font-size: .9rem;

        background: var(--white);

    }

    .input-item .control-row .unit-note {

        font-size: .75rem;

        color: var(--gray-500);

        white-space: nowrap;

    }

    .btn-warning {

        background-color: var(--warning);

        color: #334155;

        border: 2px solid #cbd5e1;

    }

    .btn-warning:hover { background-color: var(--warning); }

    .total-result {

        background-color: var(--primary);

        border-radius: 0;

    }

    .rebar-options {

        display: grid;

        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

        gap: 10px;

        margin: 15px 0;

    }

    .rebar-option {

        background-color: var(--gray-050);

        padding: 10px;

        border-radius: 0;

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

    }

    .rebar-option.selected {

        background-color: var(--success-50);

        border-color: var(--success-50);

    }

    .rebar-option .diameter { font-weight: bold; color: var(--gray-900); }

    .rebar-option .spacing { color: var(--gray-500); }

    .rebar-option .area { color: var(--primary); }

    .rebar-option .ratio { color: var(--success); }

    .calculation-report {

        font-family: 'Courier New', monospace;

        font-size: 0.85rem;

        line-height: 1.5;

        background-color: var(--gray-050);

        padding: 20px;

        border-radius: 0;

        margin-top: 15px;

        max-height: 500px;

        overflow-y: auto;

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

        white-space: pre-wrap;

        display: none;  /* 默认隐藏，且计算后不再显示 */

    }

    @media (max-width: 768px) {

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

        .input-group { grid-template-columns: 1fr; }

        .span-2 { grid-column: span 1; }

    }