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

    /* 复选框行 */
    .checkbox-row {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 8px 0;
    }

    .checkbox-row label {
        display: flex;
        align-items: center;
        gap: 6px;
        font-weight: 500;
        color: var(--gray-900);
        font-size: 0.9rem;
    }

    .big-checkbox {
        width: 16px;
        height: 16px;
        cursor: pointer;
    }

    /* 切换开关 */
    .toggle-switch {
        display: flex;
        background: var(--primary-light);
        
        padding: 3px;
        width: fit-content;
        border: 1px solid var(--primary-light);
    }

    .toggle-option {
        padding: 6px 24px;
        
        font-size: 0.9rem;
        font-weight: 500;
        color: var(--gray-500);
        cursor: pointer;
        background: transparent;
        text-align: center;
        transition: 0.15s;
    }

    .toggle-switch input[type="radio"]:checked + .toggle-option {
        background: white;
        color: var(--primary);
        box-shadow: 0 4px 8px rgba(0,0,0,0.06);
        font-weight: 600;
    }

    /* 支撑几何面板（去虚线框，左右撑满父容器） */
    .brace-panel {
        background: var(--gray-050);
        border: 0;
        border-radius: 0;
        padding: 12px 0;
        margin: 12px 0 8px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }

    .brace-panel .readonly-item {
        background: var(--primary-light);
        border-radius: 0;
        padding: 6px 10px;
        display: flex;
        justify-content: space-between;
        color: var(--gray-900);
        font-weight: 500;
        font-size: 0.9rem;
    }

    /* 自定义参数面板 */
    .custom-panel {
        background: var(--primary-light);
        border-radius: 0;
        padding: 15px;
        margin-top: 8px;
        border: 1px solid var(--primary-light);
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        gap: 12px;
    }

    .result-card .status-badge {
        display: inline-block;
        padding: 3px 8px;
        border-radius: 0;
        font-size: 0.75rem;
        font-weight: 600;
        margin-top: 6px;
    }

    .status-pass { background: var(--success-50); color: var(--success); }

    .status-fail { background: var(--danger-50); color: var(--danger); }

    /* 按钮组 - 两行两列网格布局，现在有四个按钮：计算、自动选截面、梁节点锚栓、拉杆节点锚栓、预览计算书（共5个，调整为三行两列？） */
    /* 为了美观，我们使用flex-wrap，让它们自动换行 */
    .action-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 20px;
        justify-content: space-between;
    }

    .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(66, 144, 245,0.2);
    }

    .btn-warning {
        background: var(--warning);
        color: var(--gray-900);
        border: none;
    }

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

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

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

    /* 草图 canvas */
    #sketchCanvas {
        width: 100%;
        height: 180px;
        background: var(--primary-light);
        border-radius: 0;
        margin-top: 12px;
        border: 1px dashed var(--gray-400);
    }

    /* 移动端适配 */
    @media (max-width: 768px) {
        .calculator-wrapper { grid-template-columns: 1fr !important; }

        .brace-panel {
            grid-template-columns: 1fr;
        }
        .block-content {
            padding: 12px;
        }
        .action-buttons {
            flex-direction: column;
        }
        .btn {
            width: 100%;
        }
        .toggle-switch {
            width: 100%;
        }
        .toggle-option {
            flex: 1;
            padding: 6px 0;
        }
        .result-cards {
            grid-template-columns: 1fr;
        }
    }