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

.input-section > .action-buttons {

        display: grid !important;

        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

        gap: 8px !important;

        margin-top: 16px !important;

        width: 100% !important;

        box-sizing: border-box !important;

        /* 关键：input-section 是 2 列网格，action-buttons 必须横跨两列才能铺满红框 */
        grid-column: 1 / -1 !important;

    }


    /* 按钮基础样式（与计算器1一致：base 在前、变体在后，0,1,0 同特异性靠源码顺序覆盖） */

    .btn {

        padding: 10px 20px; 

        font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: 0.2s;

        display: inline-flex; align-items: center; justify-content: center; gap: 6px;

    }


    .input-section > .action-buttons > .btn {

        width: 100% !important;

        min-width: 0 !important;

        padding: 10px 12px !important;

        border-radius: 0; font-size: 0.9rem; gap: 5px;

        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

    }


    /* 重置按钮：背景/边框/文字对比度全部提升，确保"看得清" */
    .input-section > .action-buttons > .btn.btn-secondary {
        background-color: var(--gray-200) !important;
        border: 2px solid var(--gray-400) !important;
        color: var(--gray-900) !important;
        font-weight: 600 !important;
    }
    .input-section > .action-buttons > .btn.btn-secondary:hover {
        background-color: var(--gray-300) !important;
        border-color: var(--gray-500) !important;
        color: var(--gray-900) !important;
    }


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


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

    /* 计算器特有样式 */

    .diagram {

        text-align: center;

        margin: 25px 0;

        padding: 15px;

        background: var(--gray-050);

        border-radius: 0;

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

        box-shadow: inset 0 2px 5px rgba(0,0,0,0.03), 0 3px 8px rgba(0,0,0,0.05);

    }


    .diagram-svg {

        max-width: 100%;

        height: auto;

        filter: drop-shadow(2px 4px 4px rgba(0,0,0,0.1));

    }


    .rebar-selection {

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

        padding: 15px;

        border-radius: 0;

        margin-top: 20px;

        border-left: 4px solid var(--primary);

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

    }


    .rebar-title { font-weight: 600; color: var(--gray-500); margin-bottom: 10px; }


    .rebar-note { font-size: 0.85rem; color: var(--gray-500); margin-top: 5px; }


    .code-requirement {

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

        border-left: 4px solid var(--warning);

        padding: 10px 15px;

        margin: 15px 0;

        border-radius: 0;

        font-size: 0.9rem;

    }








    .error-highlight {

        color: var(--danger) !important;

        font-weight: bold;

        animation: blink 1s infinite;

    }


    @keyframes blink {

        0%, 100% { opacity: 1; }

        50% { opacity: 0.7; }

    }


    @keyframes pulse {

        0% { box-shadow: 0 0 0 0 rgba(155, 89, 182, 0.4); }

        70% { box-shadow: 0 0 0 10px rgba(155, 89, 182, 0); }

        100% { box-shadow: 0 0 0 0 rgba(155, 89, 182, 0); }

    }


    /* 左侧两列布局 */

    .input-section {

        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 20px;

        align-items: start;

    }


    .input-section .full-width {

        grid-column: span 2;

    }


    .input-group {

        margin-bottom: 0;

    }


    .rebar-selection {

        grid-column: span 2;

    }


    .btn-group {

        grid-column: span 2;

        display: flex;

        gap: 15px;

        flex-wrap: wrap;

    }


    @media (max-width: 768px) {

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

        .input-section {

            grid-template-columns: 1fr;

        }

        .input-section .full-width,

        .rebar-selection,

        .btn-group {

            grid-column: span 1;

        }

    }