:root { --primary-color: #67c23a; }
        body { background-color: #f0f2f5; font-size: 14px; overflow: hidden; }
        .page-wrapper { display: flex; height: 100vh; }
        .sidebar { width: 210px; background: #001529; color: #a6adb4; flex-shrink: 0; overflow-y: auto; }
        .sidebar .logo { padding: 15px; text-align: center; font-size: 20px; font-weight: bold; color: #fff; background: #002140; }
        .sidebar-menu { list-style: none; padding: 0; margin: 0; }
        .sidebar-menu li a { display: block; padding: 12px 20px; color: #a6adb4; text-decoration: none; transition: all .3s; }
        .sidebar-menu li a:hover, .sidebar-menu li.active a { background: #1890ff; color: #fff; }
        .sidebar-menu li a i { margin-right: 10px; }
        .main-content { flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; }
        .header { background: #fff; padding: 0 20px; box-shadow: 0 1px 4px rgba(0,21,41,.08); height: 60px; display: flex; align-items: center; justify-content: flex-start; flex-shrink: 0; }
        .page-tabs { background: #f0f2f5; padding: 5px 10px 0; border-bottom: 1px solid #d9d9d9; flex-shrink: 0; white-space: nowrap; }
        .tab-item { display: inline-block; padding: 8px 16px; background: #fff; border: 1px solid #d9d9d9; border-bottom: 0; border-radius: 4px 4px 0 0; cursor: pointer; margin-right: 2px; font-size: 13px; }
        .tab-item.active { background: #fff; color: var(--primary-color); border-color: #d9d9d9; border-bottom: 1px solid #fff; position: relative; top: 1px; }
        .tab-item .close-tab { margin-left: 8px; font-style: normal; font-weight: bold; color: #999; }
        .tab-item .close-tab:hover { color: #f00; }
        .page-content { flex-grow: 1; overflow-y: auto; background: #fff; }
        
        .tab-pane.active { display: block; }
        .quote-wrapper { display: flex; gap: 20px; align-items: flex-start; padding: 15px; }
        .quote-form-container { flex: 1; }
        .quote-result-container { flex-basis: 380px; position: sticky;  right: 50px;}
        .form-group.row { margin-bottom: 1rem; align-items: center; }
        .col-form-label { font-weight: bold; text-align: right; white-space: nowrap; }
        .btn-group-toggle > .btn.active { background-color: var(--primary-color) !important; border-color: var(--primary-color) !important; color: #fff; }
        .btn-outline-secondary:not(:disabled):not(.disabled):active,
        .btn-outline-secondary:not(:disabled):not(.disabled).active { background-color: var(--primary-color); border-color: var(--primary-color); color: #fff; }
        .quote-result-container .card { box-shadow: 0 2px 8px rgba(0,0,0,0.09); }
        #total-price { font-size: 1.0rem; color: #dc3545; }
        #price-details ul { padding-left: 0; list-style: none; margin-bottom: 0; }
        #price-details > ul > li { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #eee; font-weight: 500;}
        #price-details ul ul { padding-left: 20px; }
        #price-details ul ul li { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid #f5f5f5; color: #666;}
        .sub-options { display: none; margin-left: 15px; }
        .sub-options.active { display: inline-flex; align-items: center; } /* Modified for flex alignment */
        .btn-group-toggle .btn { margin-right: 5px; margin-bottom: 5px; border-color: #d9d9d9; color: #333; font-size: 13px; padding: 0.2rem 0.5rem; min-height: 30px; display: inline-flex; flex-direction: column; justify-content: center; align-items: center; line-height: 1.3; }
        .btn-group-toggle .btn small { font-size: 11px; font-weight: normal; margin-top: 2px;  }
        .btn-group-toggle > .btn.active small { color: #fff; }
        .price-tag { font-size: 12px; color: #888; margin-left: 5px; font-weight: normal; }
          .force-inline-group {
            white-space: nowrap; /* 核心：强制内部所有内容不换行 */
        }
        .force-inline-group > * {
            display: inline-block; /* 确保子元素表现为行内块，以便并排 */
            vertical-align: middle; /* 垂直居中对齐，更美观 */
        }.sub-options.form-inline.active {
    display: flex !important
;
} /* ▼▼▼ 新增的自定义提示框样式 ▼▼▼ */
    .custom-alert-modal {
        position: fixed; /* 固定在屏幕上，不随页面滚动 */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* 确保水平垂直都居中 */
        padding: 15px 30px;
        background-color: rgba(220, 53, 69, 0.9); /* 使用Bootstrap的危险红色，带一点透明 */
        color: white;
        border-radius: 8px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        z-index: 9999; /* 确保在最顶层显示 */
        opacity: 0; /* 初始状态透明 */
        transition: opacity 0.3s ease-in-out; /* 添加渐变过渡效果 */
        font-size: 16px;
        pointer-events: none; /* 允许用户点击穿透提示框 */
    }
    .custom-alert-modal.show {
        opacity: 1; /* 显示状态 */
    }.header {

    background: #fff;

    padding: 0 20px;

    box-shadow: 0 1px 4px rgba(0, 21, 41, .08);

    height: 60px;

    display: flex

;

    border-left: 4px solid #67c23a;

    border-bottom: 1px solid #dcdfe6;

    margin-bottom: 2px;

    align-items: center;

    justify-content: flex-start;

    flex-shrink: 0;

}select.form-control.form-control-sm {
    border-color: #696969;
}input.form-control {
    border-color: #696969;
}select.form-control {
    border-color: #696969;
}.form-check.form-check-inline {
    margin-top: 5px;
}.form-group.row {
    margin-bottom: 0.3rem;
    align-items: center;
}
/*tab切换*/
.ProductTabNav {
    margin:10px auto 0;
    height:35px;
}
.ProductTabNav .DetailsT_Tit {
    top:auto;
    background-color:#fff;
    z-index:11;
}
.ProductTabNav .DetailsT_Tit {
    overflow:visible;
}
.DetailsT_TitP {
    border:1px solid #d7d7d7;
    height:35px;
    background:#fff;
    position:relative;
    z-index:1;
}
.DetailsT_TitP ul {
    height:35px;
    float:left;
    margin-top:-1px;
    z-index:3;
    position:absolute;
    margin-left:-40px;
}
.DetailsT_TitP li {
    float:left;
    font-family:微软雅黑,宋体;
    font-size:14px;
    text-align:center;
    height:36px;
    line-height:34px;
    border-right:1px solid #d7d7d7;
    position:relative;
    cursor:pointer;
}

.DetailsT_TitP li.Product_DetT {
    width:134px;
    background-color: #e8e8e8;
}
.DetailsT_TitP li.All_RecordT {
    width:158px;
    background-color: #e8e8e8;
}

.DetailsT_TitP li.DetailsTCur {
    font-size:14px;
    height:34px;
    color:#ff4040;
    font-weight:bold;
    line-height:30px;
    border-top:3px solid #ff4040;
    margin-top:0;
    background:#fff;
}
.Product_Content{border: 1px solid #d7d7d7;padding: 20px;font-size:14px;color:#000000;line-height: 2;}
.content{
	padding: 10px;
	padding-bottom: 70px;
	margin-top: 10px;
}
/*tab切换*/
li {
    list-style: none;
}

       .copy-btn {
            cursor: pointer;
            color: #007bff;
            border: 1px solid #007bff;
            padding: 2px 8px;
            border-radius: 4px;
            margin-left: 15px;
            font-size: 12px;
        }
        .copy-btn:hover {
            background-color: #007bff;
            color: white;
        }
        .upload-btn-wrapper {
            position: relative;
            overflow: hidden;
            display: inline-block;
        }
        .btn-upload {
            border: 1px solid #ced4da;
            color: #495057;
            background-color: white;
            padding: .25rem .5rem;
            border-radius: .2rem;
            font-size: .875rem;
        }
        .upload-btn-wrapper input[type=file] {
            font-size: 100px;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
        }  /* 进度条的外部容器 */
        .progress {
            display: flex;
            height: 1rem;
            overflow: hidden;
            font-size: 0.75rem;
            background-color: #e9ecef; /* 浅灰色背景 */
            border-radius: 0.25rem;
        }

        /* 内部滚动的进度条 */
        .progress-bar {
            display: flex;
            flex-direction: column;
            justify-content: center;
            color: #fff; /* 内部文字颜色 */
            text-align: center;
            white-space: nowrap;
            background-color: #007bff; /* 默认的蓝色 */
            /* 关键：让宽度变化时有平滑的动画效果 */
            transition: width 0.6s ease;
        }

        /* 动画效果 (可选，但建议加上) */
        @keyframes progress-bar-stripes {
            from {
                background-position: 1rem 0;
            }
            to {
                background-position: 0 0;
            }
        }

        /* 让进度条动起来的样式 (可选) */
        .progress-bar-animated {
            animation: progress-bar-stripes 1s linear infinite;
        }

        /* 条纹样式 (可选) */
        .progress-bar-striped {
            background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
            background-size: 1rem 1rem;
        }
.DetailsT_TitP li.DetailsTCur {
    font-size: 14px;
    height: 34px;
    color: #ff4040;
    font-weight: bold;
    line-height: 30px;
    border-top: 3px solid #ff4040;
    margin-left: 8px;
    margin-top: 0;
    background: #fff;
}

 .active-link {
            background-color: #67c23a !important; /* 使用 !important 确保覆盖Bootstrap的样式 */
            color: white !important;
        }
        
        
        .item-bubble-zixun {
    position: relative;
    left: 10px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    /* background-color: #ffb800; */
    /* padding: 10px 0px 0px 16px; */
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
    box-shadow: 0px 8px 40px 0px rgb(30 35 45 / 8%);
    z-index: 999;top: -30px;
}
.item-bubble-zixun::after {
    content: "";
    position: absolute;
    top: 20px;
    left: 8px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    border: 8px solid transparent;
    border-right: 10px solid #ffb800;
}
.qq-show {
    position: absolute;
    padding: 5px 10px;
    left: 26px;
    line-height: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    background: #ffb800;
    max-width: 1020px;
    border-radius: 4px;
}.qq-txt p {
    font-weight: bold;
    font-size: 16px;
    text-align: center;
}  .calc-group {
            border-bottom: 1px solid #eee;
            padding-bottom: 0.1rem;
            margin-bottom: 0.1rem;
        }
        /* 当按钮组的 input 被 disabled 时，其 label 也显示 disabled 样式 */
        .btn-check:disabled + .btn {
            opacity: 0.5;
            pointer-events: none;
        }
        .btn-group .btn {
            /* 防止按钮宽度在切换时变化 */
            min-width: 80px; 
            text-align: center;
        }
        .btn-check:disabled + .btn {
        opacity: 0.5;
        pointer-events: none;
    }
    .btn-group .btn {
        min-width: 80px; 
        text-align: center;
    }

    /* 【新增】 颜色方块样式 */
    .color-swatch {
        display: inline-block;
        width: 1em;
        height: 1em;
        border: 1px solid #999;
        margin-right: 6px;
        vertical-align: -0.125em; /* 垂直居中对齐 */
        border-radius: 3px;
    }.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
    color: #000;
    background-color: #ffffff;
    border-color: #15a675;
}/* 【新增】bcount-wrapper 确保 popover 可以正确定位 */
    .bcount-wrapper {
        position: relative;
    }

    /* 【新增】您的 board-nums 样式 */
    .board-nums {
        position: absolute;
        top: 100%; /* 显示在输入框正下方 */
        left: 0;
        z-index: 1000;
        background: #fff;
        border: 1px solid #dee2e6; /* Bootstrap 边框颜色 */
        border-radius: 0.375rem; /* Bootstrap 圆角 */
        box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15); /* Bootstrap 阴影 */
        padding: 1rem;
        width: 50%; /* 宽度与 col-md-10 一致 */
        margin-top: 0.25rem;
    }

    /* 【新增】美化列表 */
    .board-nums ul.js-number {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-wrap: wrap; /* 自动换行 */
        gap: 8px; /* 间距 */
        max-height: 230px; /* 如果数量太多，则滚动 */
        overflow-y: auto;
    }

    /* 【新增】美化列表项 */
    .board-nums ul.js-number li {
        cursor: pointer;
    padding: 0.15rem 0.25rem;
    min-width: 52px;
    border: 1px solid #ced4da;
    font-size: 0.8rem;
    border-radius: 0.25rem;
    transition: all 0.2s 
ease-in-out;
    }
    .board-nums ul.js-number li:hover {
        background-color: #0d6efd; /* Bootstrap primary 颜色 */
        color: white;
        border-color: #0d6efd;
    }

    /* 【新增】美化 "其它" 区域 */
    .board-nums .other-box {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid #eee;
        display: flex;
        gap: 10px; /* 间距 */
        align-items: center;
    }