/* ============================================================
   公用表格样式 2K 暗黑电竞化重构 (beautify)
   ============================================================ */

/* 定义 2K 核心色彩变量 */
:root {
    --2k-red: #d01026;
    --2k-green: #00e676;
    --2k-blue: #2979ff;
    --2k-gold: #ffc107;
    --2k-font: 'Roboto', monospace, sans-serif;
}

/* ============================================================
   1. 基础容器 (Wrappers) & 滚动条电竞化定制
   ============================================================ */
.beautify {
    overflow-y: auto;
    /* 强力覆盖旧背景图和透明底，植入碳纤维底纹 */
    background-color: #0f0f0f !important;
    background-image:
            linear-gradient(45deg, #1a1a1a 25%, transparent 25%, transparent 75%, #1a1a1a 75%, #1a1a1a),
            linear-gradient(45deg, #1a1a1a 25%, transparent 25%, transparent 75%, #1a1a1a 75%, #1a1a1a) !important;
    background-size: 20px 20px !important;
    background-position: 0 0, 10px 10px !important;

    border: 1px solid #333 !important;
    border-radius: 8px; /* 圆角电竞卡片 */
    padding: 10px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.8);

    /* Firefox 等新标准的滚动条支持 */
    scrollbar-width: thin;
    /*scrollbar-color: var(--2k-red) #1a1a1a; !* 滚动条红色，轨道深灰 *!*/
    scrollbar-color: #333 #0f0f0f;
}

/* ★ Webkit内核浏览器 (Chrome, Edge, Safari) 的电竞风格滚动条定制 */
.beautify::-webkit-scrollbar {
    width: 6px; /* 极细垂直滚动条 */
    height: 6px; /* 极细水平滚动条 */
}
.beautify::-webkit-scrollbar-track {
    background: #1a1a1a; /* 轨道背景黑灰 */
    border-radius: 4px;
}
.beautify::-webkit-scrollbar-thumb {
    background: var(--2k-red); /* 2K 标志性红色滑块 */
    border-radius: 4px;
}
.beautify::-webkit-scrollbar-thumb:hover {
    background: var(--2k-gold); /* 鼠标悬停时变成发光金色 */
}

/* 废弃旧的背景图片类 */
.beautify .bg {
    background: none !important;
}


/* ============================================================
   2. 剥离 Bootstrap，重塑表体结构
   ============================================================ */
.beautify .table {
    background-color: transparent !important;
    color: #e2e8f0 !important;
    border-collapse: separate !important;
    border-spacing: 0 5px !important; /* ★ 核心灵魂：砸碎传统实心边框，把行与行裂开，变成 2K 独立条带 */
    margin-bottom: 0;
    border: none !important;
}


/* ============================================================
   3. 2K 战队表头设计 (Header)
   ============================================================ */
.beautify .table thead th,
.beautify .table th {
    background: rgba(0, 0, 0, 0.95) !important; /* 纯黑表头盖板 */
    color: #aebacd !important; /* 银灰色字体 */
    font-family: var(--2k-font);
    font-size: clamp(12px, 1.5vw, 15px) !important;
    font-weight: 700;
    border: none !important;
    border-bottom: 3px solid var(--2k-red) !important; /* 2K 红线封底 */
    text-align: center;
    padding: 12px 10px !important;
    text-transform: uppercase;
    letter-spacing: 1px;

    /* 让表头吸顶，滚动时不会被遮挡 (基于你的HTML结构) */
    position: sticky;
    top: 0;
    z-index: 10;
}


/* ============================================================
   4. 2K 数据行暗黑悬浮层 (Rows)
   ============================================================ */
.beautify .table tbody tr {
    background: rgba(20, 20, 20, 0.85) !important; /* 深空灰黑半透明 */
    box-shadow: 2px 2px 5px rgba(0,0,0,0.4);
    transition: all 0.2s ease-in-out;
    color: #fff;
}

/* ★ 鼠标悬停电竞级反馈：行整体向右浮动，左侧爆出 2K 绿色光条 */
.beautify .table tbody tr:hover {
    background: #2f2f33 !important;
    transform: translateX(4px);
    box-shadow: inset 4px 0 0 var(--2k-green), 0 4px 10px rgba(0,0,0,0.6) !important;
}


/* ============================================================
   5. 单元格 (TD) 精密重构
   ============================================================ */
.beautify .table td {
    border: none !important; /* 彻底粉碎传统边框 */
    text-align: center;
    vertical-align: middle !important;
    font-size: clamp(12px, 1.5vh, 16px) !important; /* 适配缩放 */
    padding: 10px 8px !important;
    min-width: 50px;
    white-space: nowrap; /* 不换行，整齐划一 */
    color: #fff;
    font-weight: bold;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.9);
}


/* ============================================================
   6. 链接/A标签 霓虹化
   ============================================================ */
.beautify .table a {
    color: var(--2k-gold) !important; /* 升级为发光 2K 金色 */
    text-decoration: none;
    font-weight: bold;
    transition: 0.2s ease;
}

.beautify .table a:hover {
    color: var(--2k-green) !important; /* 悬停瞬间变色为抢眼的 2K 绿 */
    text-shadow: 0 0 10px rgba(0, 230, 118, 0.6); /* 爆出绿色光晕 */
    transform: scale(1.05); /* 轻微放大 */
    display: inline-block; /* 保证缩放动画生效 */
}


/* ============================================================
   7. 全局公用 2K 风格下拉框组件 (.select-2k)
   ============================================================ */
.select-2k {
    background-color: #0f0f0f;
    color: #e2e8f0;
    border: 1px solid #333;
    padding: 6px 35px 6px 12px; /* 右侧留足 35px 给箭头 */
    font-size: 15px;
    font-family: 'Roboto', monospace, sans-serif;
    font-weight: bold;
    border-radius: 4px;
    outline: none;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.8);
    transition: all 0.3s ease;

    /* 核心：抹杀所有浏览器(iOS/Android/PC)的原生下拉框白底灰框皮肤 */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    /* 自定义炫酷红色 SVG 下拉小箭头 (Base64编码，无需外部图片) */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d01026' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
}

/* 焦点/悬停：变为发光蓝 */
.select-2k:focus,
.select-2k:hover {
    border-color: var(--2k-blue, #2979ff);
    box-shadow: 0 0 12px rgba(41, 121, 255, 0.5);
}

/* 内部选项：防止某些浏览器下拉菜单变白 */
.select-2k option {
    background-color: #111;
    color: #fff;
    padding: 10px;
    font-weight: normal;
}