.model-price .view-column {padding-left:0px;padding-right:0px;}
/* ========== 基础重置 ========== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: "Noto Sans SC", "PingFang SC", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    background: #f5f7fa;
    color: #000;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.page {
    padding: 40px 20px;
}

/* ========== 表格容器 ========== */
.product-table {
    width: 1180px;
    max-width: 100%;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 0;
    overflow: hidden;
    border: 1px solid #DFE4EC;
    /* 屏幕宽度过窄时（< 1180px）内部横向滚动 */
    overflow-x: hidden;
}
@media screen and (max-width: 768px){
    .product-table {
        overflow-x: auto;
    }    
    }
/* 表头与表体最小宽度 = 所有列总宽 */
.table-header,
.table-body {
    min-width: 1180px;
}

/* ========== 表头 ========== */
.table-header {
    display: flex;
    background: rgba(193, 202, 226, 0.4);
    height: 42px;
    flex-shrink: 0;
    /* 与 .table-body 的滚动条占位对齐，保证表头/表体列宽一致 */
    padding-right: 8px;
}

/* 表头右侧内容容器，与表体 .category-content 保持一致 */
.th-content {
    flex: 1;
    display: flex;
    min-width: 0;
}

.th {
    height: 42px;
    padding: 10px 24px;
    font-size: 14px;
    font-family: "Noto Sans SC", sans-serif;
    font-weight: 500;
    color: #3E4754;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* 前两列保留 36px 大内边距 */
.th.col-category,
.th.col-model {
    padding-left: 36px;
    padding-right: 36px;
}

/* 表头"模型"列右侧分割线，与表体 .model-name 对齐 */
.th.col-model {
    border-right: 1px solid #DFE4EC;
}

/* ========== 表体（滚动区域） ========== */
.table-body {
    max-height: 680px;
    overflow-y: auto;
    overflow-x: hidden;
    /* 始终为滚动条保留空间，避免滚动条出现/消失导致内部列宽抖动且与表头错位 */
    scrollbar-gutter: stable;
}

/* 滚动条样式 */
.table-body::-webkit-scrollbar {
    width: 8px;
}
.table-body::-webkit-scrollbar-track {
    background: #f5f7fa;
}
.table-body::-webkit-scrollbar-thumb {
    background: #dfe4ec;
    border-radius: 4px;
}
.table-body::-webkit-scrollbar-thumb:hover {
    background: #c5ccd6;
}

/* ========== 列宽定义 ==========
   PC 端：整体宽度 1180px
   - 前两列固定：分类 200px + 模型 256px = 456px
   - 后 4 列均分剩余 724px，每列 181px
*/
.col-category { flex: 0 0 200px; width: 200px; }
.col-model    { flex: 0 0 256px; width: 256px; }
.col-tier     { flex: 0 0 181px; width: 181px; }
.col-input    { flex: 0 0 181px; width: 181px; }
.col-output   { flex: 0 0 181px; width: 181px; }
.col-cache    { flex: 0 0 181px; width: 181px; }

/* ========== 分类行 ========== */
.category-row {
    display: flex;
    width: 100%;
    border-bottom: 1px solid #DFE4EC;
}
.category-row:last-child {
    border-bottom: none;
}

.category-name {
    border-right: 1px solid #DFE4EC;
    font-size: 14px;
    font-family: "Noto Sans SC", sans-serif;
    font-weight: 500;
    display: flex;
    align-items: center;
    padding: 0 36px;
    flex-shrink: 0;
    white-space: nowrap;
}

.category-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* ========== 模型行 ========== */
.model-row {
    display: flex;
    width: 100%;
    min-height: 48px;
    border-bottom: 1px solid #DFE4EC;
    transition: background-color 0.2s ease;
}
.model-row:last-child {
    border-bottom: none;
}

/* 行 hover 态 */
.model-row:hover {
    background-color: rgba(193, 202, 226, 0.12);
}

/* 多阶梯模型行：高度由内部 tier-item（每个 60px）自然撑开
   2 阶梯 → 120px / 3 阶梯 → 180px，每行严格 60px */
.model-row-multi {
    min-height: 0;
}

/* ========== 单元格 ========== */
.td {
    padding: 18px 24px;
    font-size: 14px;
    font-family: "PingFang SC", sans-serif;
    color: #000;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    min-width: 0;
    white-space: nowrap;
}

/* 前两列保留 36px 大内边距，与设计稿一致 */
.td.col-category,
.td.col-model {
    padding-left: 36px;
    padding-right: 36px;
}

.model-name {
    font-family: "Noto Sans SC", sans-serif;
    font-weight: 500;
    white-space: nowrap;
    font-size: 14px;
    /* 模型列右侧分割线 */
    border-right: 1px solid #DFE4EC;
}

/* 数字 */
.num {
    font-size: 14px;
    font-family: "PingFang SC", sans-serif;
    font-weight: 500;
    color: #000;
}

/* 单位/灰色文字 */
.muted {
    font-size: 12px;
    font-family: "Noto Sans SC", sans-serif;
    font-weight: 400;
    color: #6F7988;
    margin-left: 4px;
}

/* 阶梯列表（一个单元格内多行） */
.tier-list {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.tier-item {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 6px 0;
    line-height: 24px;
    white-space: nowrap;
    border-bottom: 1px solid #DFE4EC;
}

.tier-item:last-child {
    border-bottom: none;
}

.tier-item .muted {
    margin: 0 4px;
}

/* 多阶梯行：单元格去除左右 padding，由 .tier-item 自己承担，
   使每个阶梯的横线在各列之间无缝贯穿 */
.model-row-multi .td {
    align-items: stretch;
    padding: 0;
}

/* 多阶梯单元格内的阶梯项继承列的左右内边距 */
.model-row-multi .td .tier-item {
    padding-left: 24px;
    padding-right: 24px;
}

/* 但模型名列（单值）仍保持垂直居中 + 原 padding */
.model-row-multi .td.model-name {
    align-items: center;
    padding: 0 36px;
}

/* ========== 移动端适配（最大 768px）========== */
@media screen and (max-width: 768px) {
    .page {
        padding: 12px 0;
    }

    .product-table {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    /* 移动端整体宽度 890px：
       前两列固定（分类 120 + 模型 210 = 330），后 4 列均分 560/4 = 140 */
    .table-header,
    .table-body {
        width: 890px;
        min-width: 890px;
    }

    .table-body {
        max-height: 680px;
        overflow-y: auto;
        overflow-x: visible;
    }

    /* 移动端列宽 */
    .col-category { flex: 0 0 120px; width: 120px; }
    .col-model    { flex: 0 0 210px; width: 210px; }
    .col-tier     { flex: 0 0 140px; width: 140px; }
    .col-input    { flex: 0 0 140px; width: 140px; }
    .col-output   { flex: 0 0 140px; width: 140px; }
    .col-cache    { flex: 0 0 140px; width: 140px; }

    /* 表头缩小 */
    .table-header {
        height: 36px;
    }
    .th {
        height: 36px;
        padding: 8px 12px;
        font-size: 12px;
    }
    /* 移动端：覆盖 PC 前两列 36px，统一为 12px */
    .th.col-category,
    .th.col-model {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* 单元格缩小 */
    .td {
        padding: 10px 12px;
        font-size: 13px;
    }
    /* 移动端：覆盖 PC 前两列 36px，统一为 12px */
    .td.col-category,
    .td.col-model {
        padding-left: 12px;
        padding-right: 12px;
    }

    .category-name {
        padding: 0 12px;
        font-size: 14px;
    }

    .model-name {
        font-size: 13px;
        line-height: 1.4;
    }

    /* 移动端模型行高度统一 48px */
    .model-row {
        min-height: 48px;
    }
    .model-row-multi {
        min-height: 0;
    }
    .model-row-multi .td {
        padding: 0;
    }
    .model-row-multi .td .tier-item {
        padding-left: 12px;
        padding-right: 12px;
    }
    .model-row-multi .td.model-name {
        padding: 0 12px;
    }
    /* 移动端阶梯项行高 48px */
    .tier-item {
        min-height: 48px;
        padding: 4px 0;
    }

    /* 数字与单位缩小 */
    .num {
        font-size: 13px;
    }
    .muted {
        font-size: 11px;
        margin-left: 3px;
    }

    /* 阶梯列表行距与行高 */
    .tier-list {
        gap: 6px;
    }
    .tier-item {
        line-height: 20px;
    }
    .tier-item .muted {
        margin: 0 3px;
    }

    /* 横向滚动条 */
    .product-table::-webkit-scrollbar {
        height: 8px;
    }
    .product-table::-webkit-scrollbar-track {
        background: #f5f7fa;
    }
    .product-table::-webkit-scrollbar-thumb {
        background: #dfe4ec;
        border-radius: 4px;
    }
}