@charset "utf-8";

/* ===== 装修总预算计算器 ===== */
.box02 {
    margin: 15px 0 20px;
}

.areabg.areabor {
    background: #fff;
    border: 1px solid #e5eaf0;
    border-radius: 10px;
    padding: 12px;
    overflow-x: auto;
    box-sizing: border-box;
}

#dataListInp.dataList {
    width: 100%;
    min-width: 960px;
    border-collapse: collapse;
    table-layout: fixed;
    background: #fff;
    border: 1px solid #dfe6ee;
}

#dataListInp thead tr.til,
#dataListInp tfoot tr.til {
    background: #f3f6fa;
}

#dataListInp th,
#dataListInp td {
    border: 1px solid #dfe6ee;
    padding: 10px 8px;
    font-size: 14px;
    color: #333;
    text-align: center;
    vertical-align: middle;
    line-height: 1.5;
    word-break: break-all;
}

#dataListInp th {
    font-weight: 700;
    color: #222;
}

#dataListInp tbody tr:nth-child(even) td {
    background: #fafbfd;
}

#dataListInp tbody tr:hover td {
    background: #f6fbff;
}

#dataListInp td.no {
    width: 50px;
    color: #666;
    font-weight: 700;
}

#dataListInp td.xm {
    text-align: left;
    padding-left: 12px;
}

#dataListInp td.dw,
#dataListInp td.sl,
#dataListInp td.dj,
#dataListInp td.hj {
    white-space: nowrap;
}

#dataListInp td.dj {
    color: #c62828;
    font-weight: 600;
}

#dataListInp td.hj {
    color: #e53935;
    font-weight: 700;
}

#dataListInp td.clsm {
    text-align: left;
    padding-left: 12px;
    color: #666;
}

#dataListInp td.xs {
    white-space: nowrap;
}

#dataListInp td[contenteditable="true"] {
    background: #fffef7;
    cursor: text;
    transition: background .2s ease, box-shadow .2s ease;
}

#dataListInp td[contenteditable="true"]:hover {
    background: #fffbe8;
}

#dataListInp td[contenteditable="true"]:focus {
    background: #fff;
    box-shadow: inset 0 0 0 2px #4da3ff;
    outline: none;
}

#dataListInp .cGreen a,
#dataListInp .cDRed a {
    display: inline-block;
    padding: 2px 4px;
    font-size: 13px;
    text-decoration: none;
}

#dataListInp .cGreen a {
    color: #1b9a4b;
}

#dataListInp .cGreen a:hover {
    color: #0f7f3b;
    text-decoration: underline;
}

#dataListInp .cDRed a {
    color: #d93025;
}

#dataListInp .cDRed a:hover {
    color: #b71c1c;
    text-decoration: underline;
}

.dataListbot {
    margin-top: 14px;
    padding: 14px 16px;
    background: #f8fafc;
    border: 1px solid #e5eaf0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    box-sizing: border-box;
}

.dataListbot .total {
    font-size: 18px;
    font-weight: 700;
    color: #222;
}

.dataListbot .total strong {
    font-size: 28px;
    margin-left: 6px;
    font-weight: 700;
}

.dataListbot .total font {
    color: #e53935 !important;
}

.dataListbot .bts {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.combtn {
    height: 38px;
    line-height: 38px;
    padding: 0 18px;
    border: 1px solid #1677ff;
    background: #1677ff;
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all .2s ease;
}

.combtn:hover {
    background: #0f63d8;
    border-color: #0f63d8;
    color: #fff;
}

.dataListbot .bts input:nth-child(2) {
    background: #fff;
    color: #1677ff;
    border-color: #bdd7ff;
}

.dataListbot .bts input:nth-child(2):hover {
    background: #eef5ff;
    color: #0f63d8;
}

#addLine {
    background: #16a34a;
    border-color: #16a34a;
}

#addLine:hover {
    background: #12803a;
    border-color: #12803a;
}

@media screen and (max-width: 768px) {
    .box02 {
        margin: 12px 0 16px;
    }

    .areabg.areabor {
        padding: 8px;
        border-radius: 8px;
    }

    #dataListInp.dataList {
        min-width: 920px;
    }

    #dataListInp th,
    #dataListInp td {
        font-size: 12px;
        padding: 8px 6px;
    }

    .dataListbot {
        padding: 12px;
    }

    .dataListbot .total {
        width: 100%;
        font-size: 16px;
    }

    .dataListbot .total strong {
        font-size: 22px;
    }

    .dataListbot .bts {
        width: 100%;
    }

    .combtn {
        min-width: 110px;
        padding: 0 12px;
        font-size: 13px;
    }
    .nry_bt h1 {
    font-size: 30px;
}
}

@media screen and (max-width: 480px) {
    .dataListbot .bts {
        flex-direction: column;
        align-items: stretch;
    }

    .combtn {
        width: 100%;
    }
}