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

.btn {

        padding: 10px 20px; border: none;  font-weight: 600; font-size: var(--fs-h4);

        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-warning { background: var(--warning); color: var(--gray-900); border: none; }


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


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

    /* 计算器特有样式 */

    .drawing-container {

        min-height: 600px;

        position: relative;

        overflow: auto;

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

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

        margin-top: 20px;

    }


    .grid-container {

        display: grid;

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

        grid-template-rows: repeat(13, 1fr);

        gap: 1px;

        width: 100%;

        height: 100%;

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

        position: absolute;

        top: 0;

        left: 0;

        right: 0;

        bottom: 0;

    }


    .grid-cell {

        background-color: white;

        display: flex;

        align-items: center;

        justify-content: center;

        font-size: var(--fs-xs);

        position: relative;

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

        overflow: hidden;

    }


    .room-label {

        font-weight: 600;

        color: var(--gray-900);

        font-size: var(--fs-xs);

        text-align: center;

        line-height: 1.2;

    }


    .beam {

        position: absolute;

        background-color: rgba(52, 152, 219, 0.1);

        border: 1px dashed var(--primary);

        z-index: 10;

        display: flex;

        align-items: center;

        justify-content: center;

        cursor: pointer;

        transition: all 0.3s;

    }


    .beam:hover {

        background-color: rgba(52, 152, 219, 0.2);

    }


    .beam-load {

        font-size: var(--fs-xs);

        font-weight: 600;

        text-align: center;

        line-height: 1.2;

    }


    .beam-edge { color: var(--danger); }


    .beam-middle { color: var(--success); }


    .column {

        position: absolute;

        width: 22px;

        height: 22px;

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

        border-radius: 0;

        z-index: 20;

        display: flex;

        align-items: center;

        justify-content: center;

        color: white;

        font-size: var(--fs-xs);

        font-weight: 600;

    }


    .drawing-controls {

        display: flex;

        gap: 10px;

        margin-bottom: 15px;

        flex-wrap: wrap;

    }


    .drawing-controls button {

        padding: 10px 15px;

        font-size: var(--fs-h4);

    }


    .total-result {

        background-color: var(--primary);

        border-radius: 0;

    }


    .result-highlight {

        background-color: var(--primary-050, var(--primary-50));

        padding: 15px 15px 15px 16px;

        border-radius: 0;

        margin-top: 15px;

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

    }

    .result-highlight .result-item {

        padding-left: 4px;

    }


    .tooltip {

        position: absolute;

        background-color: rgba(0, 0, 0, 0.85);

        color: white;

        padding: 8px 12px;

        border-radius: 0;

        font-size: var(--fs-label);

        z-index: 1000;

        pointer-events: none;

        display: none;

        box-shadow: 0 2px 5px rgba(0,0,0,0.2);

    }


    .material-info {

        font-size: var(--fs-label);

        color: var(--gray-500);

        margin-top: 3px;

    }


    .material-name { font-weight: 600; color: var(--gray-700); }




    @media (max-width: 768px) {

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

        .drawing-container { min-height: 400px; }

    }


    /* 默认隐藏成功和错误提示 */

    #successAlert, #errorAlert {

        display: none;

    }