/* ========== 最终版：国际审美 + 深海蓝表头 + 11px 字号 + 居中 ========== */
:root{
    --primary  :#003366;   /* 深海蓝表头 */
    --accent   :#FC9C04;   /* 品牌橙点缀 */
    --hover    :#E3F2FD;   /* 悬浮淡蓝 */
    --odd      :#FFFFFF;   /* 奇数行 */
    --even     :#FAFAFA;   /* 偶数行 */
    --text     :#212121;   /* 主文字 */
    --text2    :#616161;   /* 副文字 */
    --divider  :#e0e0e0;   /* 行分隔线 */
    --radius   :4px;
    --font-xs  :13px;
}

/* 1. 表格容器：干净卡片 */
#scoreTable{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    font-size:var(--font-xs);
    background:var(--odd);
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:0 1px 3px rgba(0,0,0,.08);
}

/* 2. 表头：深海蓝 + 底部橙条 */
#scoreTable thead{
    background:var(--primary);
    color:#fff;
    position:sticky;
    top:0;
    z-index:10;
}
#scoreTable th{
    padding:10px 6px;
    font-weight:600;
    letter-spacing:.2px;
    border-bottom:2px solid var(--accent);
    text-align:center;
}
#scoreTable th:first-child{text-align:center;}          /* 主控芯片列居中 */

/* 3. 表体：淡灰交替 + 悬浮高亮 */
#scoreTable tbody tr:nth-child(even){background:var(--even);}
#scoreTable tbody tr:hover{background:var(--hover);}
#scoreTable td{
    padding:8px 6px;
    border-bottom:1px solid var(--divider);
    color:var(--text2);
    height:60px;                 /* 与原固定高度兼容 */
    max-height:60px;
    vertical-align:middle;
}
#scoreTable td:first-child{color:var(--primary);font-weight:600;} /* 首列加粗 */

#scoreTable tbody tr.soc-row td { vertical-align: middle; }

/* 4. 多行省略（原逻辑保留） */
#scoreTable tbody tr.soc-row td .cell-content{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:normal;
    line-height:20px;
    max-height:60px;
}

/* 5. 内敛 2 px 进度条（不破坏行高） */
.soc-row{position:relative;}
.soc-row::after{
    content:'';
    position:absolute;
    left:0;
    bottom:0;
    height:2px;
    background:var(--accent);
    width:var(--percent,0)%;
    z-index:1;
}

/* 6. 复选框内容居中 */
#scoreTable td.select-cell label{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
}

/* 7. 小屏横向滚动（桌面端小屏） */
@media(max-width:1080px) and (min-width:769px){
    #ranking{overflow-x:auto;}
    #scoreTable{min-width:1080px;}
    #scoreTable th {
        font-size: 12px !important;   /* 比桌面 15px 小一圈 */
        padding: 6px 4px;             /* 减少左右间距 */
        line-height: 1.2;             /* 让两行文字上下更紧凑 */
        white-space: normal;          /* 允许换行 */
    }
    #scoreTable th .en {
        font-size: 10px !important;   /* 英文再小一点 */
        display: block;               /* 强制换行 */
        margin-top: 2px;
        line-height: 1.1;
        color: #ccc;                  /* 淡一点，减少视觉冲突 */
    }
    .header-bar .header-wrap{padding-left:20px !important;}
    #ranking .search-area{padding-left:20px !important;}
    #ranking .search-area {
        text-align: left;        /* 内容靠左 */
        white-space: normal;     /* 允许文本自动换行 */
    }
}

/* 移动端样式（核心：search-area 自动换行） */
@media (max-width: 768px) {
    /* 表格适配移动端 */
    #ranking{overflow-x:auto;}
    #scoreTable{min-width:768px;font-size:11px !important;}
    #scoreTable th {
        font-size: 11px !important;
        padding: 4px 2px;
        white-space: normal;
    }
    #scoreTable th .en {
        font-size: 9px !important;
    }
    
    /* search-area 核心换行样式 */
    #ranking .search-area {
        padding-left: 15px !important;
        margin: 8px 0;
        text-align: left;
        /* 开启flex换行：子元素超出自动换行 */
        display: flex;
        flex-wrap: wrap;
        gap: 8px; /* 子元素间距，替代margin-left */
        align-items: center;
    }
    
    /* 搜索区子元素适配：超出自动换行，宽度自适应 */
    #processor-search {
        flex: 1 1 100%; /* 移动端输入框占满一行 */
        min-width: 0; /* 解决flex元素不收缩问题 */
        max-width: 60px;
    }
    #type-select, #search-btn {
        flex: 1 1 auto; /* 下拉/按钮自适应宽度 */
        min-width: 0; /* 最小宽度，避免挤压变形 */
        max-width: 60px;
        margin-left: 0 !important; /* 取消原有margin，用gap替代 */
    }
    
    /* 表头内边距适配 */
    .header-bar .header-wrap{padding-left:15px !important;}
}

/* 8. 字号兜底（覆盖 layui & 行内） */
#scoreTable th{ font-size:15px !important; }
#scoreTable td{font-size:var(--font-xs) !important;}

/* 头两列 & 最后一列：手动垂直居中 */
#scoreTable tbody tr.soc-row td  {    /* 安兔兔 */
    vertical-align: middle !important;          /* 先改回居中 */
    height: 58px !important;      /* 限定新高度 */
    padding: 4px 6px !important;  /* 上下减少 2 px 空隙 */
    line-height: 19px !important; /* 每行再压 1 px */
}

/* 所有内容容器统一居中（含复选框、图片、链接） */
#scoreTable tbody tr.soc-row td .cell-content,
#scoreTable tbody tr.soc-row td label,
#scoreTable tbody tr.soc-row td img,
#scoreTable tbody tr.soc-row td a.antutu-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 60px;                    /* 占满整格，保证绝对居中 */
    line-height: 20px;               /* 3 行 = 60px */
}

/* 保留 3 行省略（仅中间列） */
#scoreTable tbody tr.soc-row td .cell-content {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

/* 内敛 2 px 进度条（依旧底边） */
.soc-row::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    background: var(--accent, #FC9C04);
    width: var(--percent, 0)%;
    z-index: 1;
}

/* 1. 搜索区宽度 = 表格，不随视口拉伸 */
#ranking {
	display:inline-block;
  width: fit-content;          /* 保留：仅包裹内容，不拉伸 */
  margin-left: 0;              /* 保留：贴左边 */
  position: relative;          /* 新增：作为搜索区对齐的参考容器 */
}

/* 新增：搜索区左对齐表格 + 保留原有宽度 */
body{margin:0}          /* 清掉浏览器默认 8 px 外边距 */
.main-content,
#ranking{margin-top:0}  /* 清掉可能的上边距 */

/* logo 左侧空 350 px */
.header-bar .header-wrap{
    padding-left:150px;
    box-sizing:border-box;
}

/* 搜索框左对齐 150 px（桌面端） */
#ranking .search-area{
	padding-left:150px;
    text-align:left;          /* 让内部元素全部靠左 */
    margin: 10px;
    /* 新增：桌面端flex布局，保证元素排列 */
    display: flex;
    align-items: center;
}
#processor-search{           /* 处理器名称输入框 */
    flex:none !important;    /* 取消之前的 flex:1 拉伸 */
}
#type-select,                /* 类型下拉 */
#search-btn{                 /* 搜索按钮 */
    margin-left:6px;         /* 保持原有小间距 */
}

    .footer-bar {
      position: fixed;    /* 固定定位，永远在视口底部 */
      bottom: 0;          /* 距离底部0像素 */
      left: 0;            /* 距离左侧0像素 */
      width: 100%;        /* 宽度占满整个页面 */
      z-index: 999;       /* 防止被其他元素遮挡 */
      padding: 10px 0;    /* 上下内边距，让内容更美观 */
    }
    
    /* 备案文本居中对齐 */
    .footer-bottom {
      text-align: center; /* 文本水平居中 */
      margin: 0;          /* 清除默认边距 */
    }