#mainLayout {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 15px;
}

/* 标题样式 */
#caption {
    text-align: center;
    font-size: 60px;
    margin-top: 50px;
    margin-bottom: 0;
    letter-spacing: 3px;
    color: #333;
}

#caption b {
    font-weight: 700;
}

/* 统计横幅 */
.stats-banner {
    background: #f8f8f8;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: 16px 24px;
    margin: 15px 0;
    text-align: center;
}

.stats-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 14px;
    color: #666;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.stat-item i {
    color: #2c3e50;
}

.stat-item strong {
    color: #1a1a1a;
}

/* 提示文字 */
.notice {
    text-align: center;
    margin: 0 auto;
    color: #666;
    max-width: 860px;
}

.notice .faq-link {
    color: #667eea;
    font-weight: 600;
    text-decoration: none;
    margin-left: 10px;
    white-space: nowrap;
}

/* 数据表格 */
.data {
    border-collapse: collapse;
    text-align: center;
    width: 90%;
    margin: 0 auto 40px;
    border-spacing: 0;  /* 确保单元格之间无间距 */
    border: 0;  /* 确保没有边框 */
}

.data tr {
    margin: 0;
    padding: 0;
    line-height: 1;  /* 减少行高 */
}

.data td {
    padding: 4px 0;  /* 添加上下4px的内边距，保持左右0 */
    margin: 0;
    vertical-align: middle;
    border: 0;  /* 确保单元格没有边框 */
}

/* CPU名称列 */
.socName {
    width: 228px;
    text-align: right;
    height: 32px;  /* 增加高度到32px，让行间距更舒适 */
    font-size: 22px;
    color: #222;
    font-weight: 500;
    padding-right: 8px;
    line-height: 32px;  /* 行高与高度一致 */
    white-space: nowrap;  /* 防止换行 */
}

/* 桌面端 - CPU名称和图标 */
.socName svg {
    width: 28px;
    height: 28px;
    margin-left: 6px;
    vertical-align: middle;
    display: inline-block;
}

/* 进度条容器 */
.ratioBar {
    width: 100%;
    height: 32px;  /* 与socName高度一致为32px */
    position: relative;
    background-color: #f5f5f5;
}

.score-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #bbb;
    z-index: 10;
    pointer-events: none;
}

.score-label {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    color: #666;
    white-space: nowrap;
    margin-bottom: 2px;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 1px 3px;
    border-radius: 2px;
}

/* 进度条 */
.ratio {
    height: 100%;
    border-radius: 0 20px 20px 0;
    position: relative;
    transition: width 0.4s ease-in;
    animation: barAnmi 1s ease-in;
    z-index: 2;
}

/* 渐变色 */
.blue-gradient {
    background: linear-gradient(to left, #007bff, #0056b3);
}

.green-gradient {
    background: linear-gradient(to left, #28a745, #1e7e34);
}

/* 进度条内的信息 */
.socinfo {
    font-size: 13px;
    color: #fff;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
}

.score-text {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-weight: bold;
    font-size: 14px;
}

/* 当进度条太短时，文字显示在外部（进度条右侧） */
.bar-text-outside {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
    z-index: 3;
}

.bar-text-outside .device-name {
    color: #666;
    font-size: 11px;
    font-weight: 400;
}

.bar-text-outside .score-value {
    color: #333;
    font-weight: bold;
    font-size: 12px;
}

/* 旧的text-outside样式可以删除，但保留以防向后兼容 */
.text-outside .socinfo {
    left: 100%;
    margin-left: 10px;
    color: #666;
    font-size: 12px;
}

.text-outside .score-text {
    left: 100%;
    right: auto;
    margin-left: 10px;
    color: #333;
    font-weight: bold;
    font-size: 13px;
}

/* 筛选按钮 */
.downBtn {
    display: inline-block;
    vertical-align: middle;
    text-decoration: none;
    font-size: 20px;
    background-color: white;
    color: black;
    border: 2px solid black;
    cursor: pointer;
    padding: 6px 2%;
    margin: 0 1%;
    border-radius: 120px;
    transition: all 0.3s;
}

.downBtn:hover {
    background: #397DD6;
    color: white;
}

/* 推荐NAS和天梯榜按钮的hover效果 */
#btn4:hover,
#btn5:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
    color: white !important;
    border-color: #dc2626 !important;
}

.allcpu {
    background-color: black !important;
    color: white !important;
    border-color: black !important;
}

#btn1 {
    color: black;
}

#btn1:hover {
    background: black !important;
    color: white !important;
}

#btn2 {
    color: #28a745;
    border-color: #28a745;
}

#btn2:hover {
    background: #28a745 !important;
    color: white !important;
    border-color: #28a745 !important;
}

#btn2.allcpu {
    background: #28a745 !important;
    color: white !important;
    border-color: #28a745 !important;
}

#btn3 {
    color: #007bff;
    border-color: #007bff;
}

#btn3:hover {
    background: #007bff !important;
    color: white !important;
    border-color: #007bff !important;
}

#btn3.allcpu {
    background: #007bff !important;
    color: white !important;
    border-color: #007bff !important;
}

/* 动画 */
@keyframes barAnmi {
    0% {
        width: 0%;
    }
}

/* 响应式设计 */

/* 平板设备 (768px - 1024px) */
@media (max-width: 1024px) and (min-width: 768px) {
    #caption {
        font-size: 36px;
    }

    .socName {
        font-size: 18px;
        height: 26px;
        line-height: 26px;
    }

    .data {
        width: 95%;
    }
}

/* 移动设备 (最大宽度 767px) */
@media (max-width: 767px) {
    #mainLayout {
        padding: 0 5px;  /* 减少外边距 */
        overflow-x: hidden;  /* 防止横向滚动 */
    }

    #caption {
        font-size: 28px;  /* 24px → 28px，继续增大标题 */
        margin-top: 20px;
        margin-bottom: 12px;
        letter-spacing: 0px;
    }

    /* 统计横幅 - 767px移动端紧凑 */
    .stats-banner {
        padding: 10px;
        margin: 10px 0;
    }

    .stats-container {
        gap: 10px;
        font-size: 12px;
    }

    .stat-item {
        gap: 4px;
    }

    .stat-item i {
        font-size: 11px;
    }

    .stat-item span,
    .stat-item strong {
        font-size: 12px;
    }

    /* 767px也隐藏"性能榜单"标签 */
    .stat-item:first-child {
        display: none;
    }

    /* 提示文字 */
    .notice {
        font-size: 14px;
        padding: 12px 10px;
        line-height: 1.7;
    }

    .notice .faq-link {
        display: inline-block;
        margin-top: 6px;
    }

    /* 筛选按钮容器优化 */
    #filterButtons {
        padding: 20px 10px 10px 10px !important;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    .downBtn {
        font-size: 13px;
        padding: 6px 12px;
        margin: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .downBtn svg {
        margin-right: 3px !important;
        margin-top: 0 !important;
    }

    .downBtn b {
        display: inline !important;
    }

    /* 表格改用flex布局 - 每行独立，CPU列宽度自适应 */
    .data {
        width: 100% !important;
        margin: 10px auto 20px;
        display: block !important;  /* table保持block */
    }

    .data tbody,
    #benchmarkBody {
        display: flex !important;  /* tbody改用flex */
        flex-direction: column !important;  /* 垂直排列行 */
        gap: 10px !important;  /* 行间距10px */
    }

    .data tbody tr,
    #benchmarkBody tr {
        display: flex !important;  /* 每行用flex布局 */
        align-items: center !important;  /* 垂直居中 */
        width: 100% !important;
    }

    .data tbody tr td,
    #benchmarkBody tr td {
        display: block !important;  /* 单元格改用block */
        padding: 0 !important;
        margin: 0 !important;
    }

    /* CPU名称列 - 水平布局：左侧文字可换行，右侧图标固定位置 */
    #benchmarkBody tr td.socName,
    .data tbody tr td.socName,
    .socName {
        width: 135px !important;  /* 减小宽度150px→135px，让长名称换行 */
        max-width: 135px !important;
        min-width: 135px !important;
        flex: 0 0 135px !important;  /* 固定宽度不变 */
        height: 52px !important;  /* 固定高度46px → 52px（容纳48px图标）*/
        padding: 2px !important;  /* 小内边距 */
        display: flex !important;  /* flex布局 - 高优先级 */
        flex-direction: row !important;  /* 水平方向 */
        align-items: center !important;  /* 垂直居中对齐 */
        justify-content: flex-end !important;  /* 内容靠右对齐，让图标对齐 */
        gap: 2px !important;  /* 文字和图标之间2px间距 */
    }

    /* CPU名称文字部分 - 左侧弹性区域，可换行，最多3行 */
    .cpu-name-text {
        display: -webkit-box !important;  /* webkit box布局 */
        -webkit-box-orient: vertical !important;  /* 垂直方向 */
        -webkit-line-clamp: 3 !important;  /* 最多3行 */
        width: 81px !important;  /* 减小宽度：135-48-4-2=81px */
        max-height: 47px !important;  /* 强制高度限制：13px*1.2*3=46.8px≈47px */
        text-align: left !important;  /* 文字左对齐 */
        font-size: 13px !important;  /* 字体13px */
        line-height: 1.2 !important;  /* 行高1.2 */
        white-space: normal !important;  /* 允许换行 */
        word-break: break-word !important;  /* 在单词边界换行，必要时断开 */
        overflow: hidden !important;
        text-overflow: ellipsis !important;  /* 超出部分显示省略号 */
    }

    /* 移动端图标容器 - 右侧固定位置 */
    .socName > span:last-child {
        display: flex !important;  /* flex布局 */
        flex-direction: column !important;  /* 垂直排列（虽然只有1个图标）*/
        justify-content: center !important;  /* 居中对齐 */
        align-items: center !important;  /* 水平居中 */
        flex-shrink: 0 !important;  /* 不收缩，固定宽度 */
        width: 48px !important;  /* 固定宽度容纳48px图标 */
        gap: 0 !important;  /* 移除间距 */
        margin-left: 0 !important;  /* 移除左边距 */
    }

    /* 移动端可点击行样式 */
    #benchmarkBody tr.mobile-row-clickable {
        transition: background-color 0.2s ease;
    }

    #benchmarkBody tr.mobile-row-clickable:active {
        background-color: rgba(44, 62, 80, 0.08) !important;
    }

    /* 移动端NAS图标容器优化 */
    .nas-icon-wrapper {
        position: relative;
    }

    .nas-icon-wrapper::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: transparent;
        transition: background-color 0.2s ease;
    }

    .nas-icon-wrapper:active::before {
        background-color: rgba(44, 62, 80, 0.1);
    }

    /* 移动端图标优化 */
    .socName svg {
        width: 48px !important;  /* NAS图标从42px → 48px */
        height: 48px !important;  /* 高度也改为48px */
        margin: 0 !important;  /* 无margin */
        display: block !important;  /* 块元素 */
        flex-shrink: 0 !important;  /* 不收缩 */
    }

    /* 进度条列 - flex填充剩余空间 */
    .data td:nth-child(2) {
        flex: 1 !important;  /* flex填充剩余空间 */
        min-width: 0 !important;  /* 允许收缩 */
        padding: 0 !important;  /* 完全去除padding */
        padding-right: 2px !important;  /* 只保留右侧2px */
        position: relative;  /* 为外部分数定位 */
    }

    .ratioBar {
        height: 42px !important;  /* 与CPU列高度42px一致 */
        width: 100%;
        position: relative;
        overflow: visible;
    }

    /* 进度条内部信息 - 移动端放大 */
    .socinfo {
        font-size: 9px !important;  /* 7px → 9px */
        left: 3px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 80%;  /* 防止溢出 */
    }

    .score-text {
        font-size: 10px !important;  /* 8px → 10px */
        right: 3px !important;
        white-space: nowrap;
    }

    /* 外部分数优化 - 防止溢出 */
    .bar-text-outside {
        position: absolute;
        margin-left: 3px !important;
        white-space: nowrap;
        max-width: calc(100% - 5px);  /* 限制最大宽度 */
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .bar-text-outside .score-value {
        font-size: 11px !important;  /* 9px → 11px */
        font-weight: 600 !important;
        color: #333 !important;
    }

    .bar-text-outside .device-name {
        display: none !important;
    }

    /* 分数刻度线 - 保留显示 */
    .score-marker {
        display: block !important;
        width: 1px !important;  /* 移动端使用更细的线 */
        background-color: #ddd !important;  /* 更淡的颜色 */
        opacity: 0.5 !important;
    }

    /* 分数刻度标签 - 移动端优化显示 */
    .score-label {
        display: block !important;  /* 恢复显示 */
        font-size: 10px !important;  /* 8px → 10px，放大字体 */
        padding: 1px 2px !important;  /* 增加padding */
        margin-bottom: 2px !important;  /* 增加间距 */
    }

    /* 进度条圆角在移动端保持 */
    .ratio {
        border-radius: 0 10px 10px 0;
    }
}


/* 小屏手机 (最大宽度 480px) */
@media (max-width: 480px) {
    #mainLayout {
        padding: 0 3px;
    }

    #caption {
        font-size: 26px;  /* 22px → 26px，继续增大标题 */
        margin-top: 15px;
        margin-bottom: 10px;
        letter-spacing: 0px;
    }

    /* 统计横幅 - 移动端紧凑布局 */
    .stats-banner {
        padding: 8px;
        margin: 8px 0;
        border-radius: 6px;
    }

    .stats-container {
        gap: 8px;
        font-size: 11px;
        justify-content: space-between;
    }

    .stat-item {
        gap: 3px;
        flex: 0 0 auto;
    }

    .stat-item i {
        font-size: 10px;
    }

    .stat-item span,
    .stat-item strong {
        font-size: 11px;
    }

    /* 移动端隐藏"性能榜单"文字，只保留更新时间和数量 */
    .stat-item:first-child {
        display: none;
    }

    /* 提示文字 - 移动端优化 */
    .notice {
        font-size: 13px;
        padding: 10px 8px;
        line-height: 1.7;
        text-align: left;
    }

    .notice .faq-link {
        display: inline-block;
        margin-left: 0;
        margin-top: 8px;
        font-size: 13px;
    }

    /* 小屏幕筛选按钮容器优化 */
    #filterButtons {
        padding: 15px 8px 8px 8px !important;
        gap: 6px !important;
    }

    .downBtn {
        font-size: 12px;
        padding: 5px 10px;
        margin: 0;
        border-width: 1.5px !important;
    }

    .downBtn svg {
        width: 14px;
        height: 14px;
        margin-right: 2px !important;
    }

    /* 确保小屏也使用flex布局 */
    .data tbody,
    #benchmarkBody {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .data tbody tr,
    #benchmarkBody tr {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
    }

    .data tbody tr td,
    #benchmarkBody tr td {
        display: block !important;
    }

    /* CPU名称列 - 小屏水平布局：左侧文字可换行，右侧图标固定 */
    #benchmarkBody tr td.socName,
    .data tbody tr td.socName,
    .socName {
        width: 125px !important;  /* 减小宽度150px→125px，让长名称换行 */
        max-width: 125px !important;
        min-width: 125px !important;
        flex: 0 0 125px !important;  /* 固定宽度不变 */
        height: 52px !important;  /* 固定高度40px → 52px（容纳48px图标）*/
        padding: 2px !important;  /* 小内边距 */
        display: flex !important;  /* flex布局 - 高优先级 */
        flex-direction: row !important;  /* 水平方向 */
        align-items: center !important;  /* 垂直居中对齐 */
        justify-content: flex-end !important;  /* 内容靠右对齐，让图标对齐 */
        gap: 2px !important;  /* 文字和图标之间2px间距 */
    }

    /* CPU名称文字 - 左侧弹性区域，可换行，最多3行 */
    .cpu-name-text {
        display: -webkit-box !important;  /* webkit box布局 */
        -webkit-box-orient: vertical !important;  /* 垂直方向 */
        -webkit-line-clamp: 3 !important;  /* 最多3行 */
        width: 71px !important;  /* 减小宽度：125-48-4-2=71px */
        max-height: 44px !important;  /* 强制高度限制：12px*1.2*3=43.2px≈44px */
        text-align: left !important;  /* 文字左对齐 */
        font-size: 12px !important;  /* 字体12px */
        line-height: 1.2 !important;  /* 行高1.2 */
        white-space: normal !important;  /* 允许换行 */
        word-break: break-word !important;  /* 在单词边界换行，必要时断开 */
        overflow: hidden !important;
        text-overflow: ellipsis !important;  /* 超出部分显示省略号 */
    }

    /* 小屏图标容器 - 紧跟文字 */
    .socName > span:last-child {
        display: flex !important;  /* flex布局 */
        flex-direction: column !important;  /* 垂直排列 */
        justify-content: center !important;  /* 居中对齐 */
        align-items: center !important;  /* 水平居中 */
        flex-shrink: 0 !important;  /* 不收缩 */
        width: 48px !important;  /* 固定宽度容纳48px图标 */
        gap: 0 !important;  /* 移除间距 */
        margin-left: 0 !important;  /* 去除左边距 */
    }

    /* 进度条列 - flex填充剩余空间 */
    .data td:nth-child(2) {
        flex: 1 !important;  /* flex填充剩余空间 */
        min-width: 0 !important;  /* 允许收缩 */
        padding: 0 !important;  /* 完全去除padding */
        padding-right: 2px !important;  /* 只保留右侧2px */
    }

    .ratioBar {
        height: 40px !important;  /* 与CPU列高度40px一致 */
    }

    .socinfo {
        font-size: 8px !important;  /* 6px → 8px */
        left: 2px !important;
    }

    .score-text {
        font-size: 9px !important;  /* 7px → 9px */
        right: 2px !important;
    }

    .bar-text-outside .score-value {
        font-size: 10px !important;  /* 8px → 10px */
    }

    /* 小屏图标 */
    .socName svg {
        width: 48px !important;  /* 小屏图标也使用48px（与≤767px一致）*/
        height: 48px !important;
        margin: 0 !important;  /* 无margin，使用gap */
        display: block !important;  /* 块元素 */
        flex-shrink: 0 !important;  /* 不收缩 */
    }
}

/* 超小屏幕优化 (iPhone SE 等 375px 以下) */
@media (max-width: 375px) {
    /* CPU名称列进一步缩小 */
    #benchmarkBody tr td.socName,
    .data tbody tr td.socName,
    .socName {
        width: 115px !important;
        max-width: 115px !important;
        min-width: 115px !important;
        flex: 0 0 115px !important;
        height: 48px !important;
    }

    /* CPU名称文字更小 */
    .cpu-name-text {
        width: 65px !important;
        font-size: 12px !important;
        max-height: 43px !important;
        -webkit-line-clamp: 3 !important;
    }

    /* 图标也缩小 */
    .socName svg {
        width: 42px !important;
        height: 42px !important;
    }

    /* 进度条高度调整 */
    .ratioBar {
        height: 38px !important;
    }

    /* 字体微调 */
    .socinfo {
        font-size: 7px !important;
    }

    .score-text {
        font-size: 8px !important;
    }
}

/* 移动端横屏优化 */
@media (max-height: 500px) and (orientation: landscape) {
    /* 横屏时减小行高 */
    #benchmarkBody tr,
    .data tbody tr {
        min-height: 40px !important;
    }

    .socName {
        height: 40px !important;
    }

    .ratioBar {
        height: 36px !important;
    }
}

/* 移动端点击反馈优化 */
@media (max-width: 767px) {
    /* 可点击行更明显的手型光标 */
    #benchmarkBody tr.mobile-row-clickable {
        cursor: pointer;
        position: relative;
    }

    /* 点击时高亮效果 */
    #benchmarkBody tr.mobile-row-clickable:active {
        background-color: rgba(44, 62, 80, 0.15) !important;
        transform: scale(0.99);
        transition: all 0.1s ease;
    }

    /* 添加右侧箭头提示可点击 */
    #benchmarkBody tr.mobile-row-clickable::after {
        content: '';
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        width: 6px;
        height: 10px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10' fill='none'%3E%3Cpath d='M1 1L5 5L1 9' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
        opacity: 0.5;
        pointer-events: none;
    }

    /* 进度条容器右侧留空间给箭头 */
    #benchmarkBody tr td:last-child {
        padding-right: 18px !important;
        position: relative;
    }
}