/* 计算器7（围墙结构计算器 - 在线计算围墙设计）专属样式 — 由 jsq/calculator7.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-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); }

    /* ========== 计算器7特有样式 ========== */
    /* rem 基准统一使用全局 16px（与全站一致），不再覆写 html{font-size}，避免移动端缩放与其它页不一致 */

    .input-cards {

        display: flex;

        flex-direction: column;

        gap: 0.85rem;

        margin-bottom: 1.5rem;

    }

    .input-card {

        background: var(--gray-050);

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

        border-radius: 0;

        padding: 0.35rem 0.9rem 0.9rem;

        box-shadow: 0 1px 2px rgba(30, 41, 59, 0.05);

    }

    .input-card-title {

        font-size: 0.95rem;

        font-weight: 700;

        color: var(--gray-900);

        padding: 0.55rem 0;

        margin-bottom: 0.5rem;

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

        display: inline-block;

    }

    .input-card-body {

        display: grid;

        gap: 0.55rem 1rem;

        align-items: start;

    }

    .input-card-body.two-col { grid-template-columns: 1fr 1fr; }

    .input-card-body.three-col { grid-template-columns: 1fr 1fr 1fr; }

    .input-card-body .input-group { margin-bottom: 0; }

    .input-card-body .span-3,
    .input-card-body .span-2 { grid-column: 1 / -1; }

    .input-card.info-card {

        background: var(--primary-light);

        border-color: var(--primary-light);

    }

    .input-card.info-card .input-card-title {

        border-bottom-color: var(--primary);

        color: var(--primary-dark);

    }

    .info-card-body {

        font-size: 0.82rem;

        line-height: 1.7;

        color: var(--gray-700);

    }

    .info-card-body p { margin: 0.15rem 0; }

    .info-card-body strong { color: var(--gray-900); }

    .input-group {

        display: flex;

        flex-direction: column;

    }

    .input-group label {

        font-weight: 600;

        font-size: 0.85rem;

        color: var(--gray-900);

        margin-bottom: 0.25rem;

    }

    .input-group input,

    .input-group select {

        padding: 0.5rem 0.75rem;

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

        border-radius: 0;

        font-size: 0.9rem;

        background: var(--gray-050);

        transition: 0.2s;

    }

    .input-group input:focus,

    .input-group select:focus {

        border-color: var(--primary);

        outline: none;

        background: white;

    }

    .span-3 { grid-column: span 3; }

    .btn-success {

        background-color: var(--success);

        color: white;

        border: 2px solid var(--success);

    }

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

    .all-results {

        display: grid;

        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

        gap: 0.75rem;

    }

    .result-item-box {

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

        border-radius: 0;

        padding: 0.75rem;

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

        display: flex;

        justify-content: space-between;

        align-items: center;

    }

    .result-label-small { font-weight: 600; color: var(--gray-500); font-size: 0.85rem; }

    .result-value-small { font-weight: 700; font-size: 0.9rem; }

    .check-result { display: inline-block; padding: 0.2rem 0.5rem; border-radius: 0; font-weight: 600; font-size: 0.75rem; }

    .pass { background-color: var(--success-50); color: #15803d; }

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

    .warning-box {

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

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

        padding: 0.75rem;

        margin: 0.75rem 0;

        border-radius: 0;

    }

    .success-box {

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

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

        padding: 0.75rem;

        margin: 0.75rem 0;

        border-radius: 0;

    }

    .material-strength-display {

        background: var(--primary-light);

        border-radius: 0;

        padding: 0.3rem;

        margin-top: 0.25rem;

        font-size: 0.7rem;

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

        line-height: 1.2;

    }

    .section-preview {

        background: var(--gray-050);

        border-radius: 0;

        padding: 0.75rem;

        margin-bottom: 1rem;

        text-align: center;

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

    }

    #miniSectionCanvas, #largeSectionCanvas {

        width: 100%;

        height: auto;

        cursor: pointer;

        border-radius: 0;

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

    }

    .modal {

        display: none;

        position: fixed;

        z-index: 1000;

        left: 0;

        top: 0;

        width: 100%;

        height: 100%;

        overflow: auto;

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

        align-items: center;

        justify-content: center;

    }

    .modal-content {

        background-color: white;

        margin: auto;

        padding: 1.5rem;

        border-radius: 0;

        box-shadow: 0 5px 20px rgba(0,0,0,0.3);

        width: 90%;

        max-width: 1000px;

        max-height: 80%;

        overflow: auto;

        position: relative;

    }

    .close {

        color: var(--gray-300);

        float: right;

        font-size: 1.5rem;

        font-weight: bold;

        cursor: pointer;

        position: absolute;

        top: 0.5rem;

        right: 1rem;

    }

    .footer-note {

        margin-top: 1rem;

        color: var(--gray-500);

        font-size: 0.8rem;

    }

    .key-results {

        display: flex;

        flex-wrap: wrap;

        gap: 0.75rem;

        margin-bottom: 1rem;

    }

    .key-card {

        flex: 1 1 180px;

        background: var(--white);

        border-radius: 0;

        padding: 0.75rem;

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

        border-left: 5px solid;

    }

    .key-card.pass { border-left-color: var(--success); }

    .key-card.fail { border-left-color: var(--danger); }

    .key-title { font-weight: 600; font-size: 0.9rem; color: var(--gray-700); }

    .key-value { font-size: 1.2rem; font-weight: 700; margin: 0.3rem 0; }

    .key-detail { font-size: 0.8rem; color: var(--gray-500); }

    @media screen and (max-width: 1200px) {

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

    }

    @media screen and (max-width: 768px) {

        .input-card-body.two-col, .input-card-body.three-col { grid-template-columns: 1fr; }

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

        .all-results { grid-template-columns: 1fr; }

        .button-group { flex-direction: column; }

    }