/* style.css */

/* --- 1. 默认变量 (默认暗黑) --- */
:root {
    /* 背景色 */
    --bg-main: #0f1014;
    --bg-card: #1a1b20;
    --bg-header: linear-gradient(135deg, #1e1f24 0%, #2a2c35 100%);
    
    /* 文字颜色 */
    --text-primary: #e0e0e0;
    --text-secondary: #a0a0a0;
    
    /* 边框和阴影 */
    --border-color: #333;
    --shadow-color: rgba(0, 0, 0, 0.6);

    /* 统计卡片颜色 */
    --stat-box-bg: #25272e;
    --stat-box-border: #363945;
    --stat-box-hover: #2e313a;

    /* Element Plus 强制变黑变量 */
    --el-bg-color: #1a1b20;
    --el-bg-color-overlay: #25272e;
    --el-text-color-primary: #e0e0e0;
    --el-text-color-regular: #adb5bd;
    --el-border-color: #333;
    --el-border-color-light: #363945;
    --el-fill-color-blank: #1a1b20;
    --el-mask-color: rgba(0, 0, 0, 0.8);
}

/* --- 2. 亮色模式 (手动切换) --- */
html.light {
    --bg-main: #f5f7fa;
    --bg-card: #ffffff;
    --bg-header: linear-gradient(135deg, #ffffff 0%, #f0f2f5 100%);
    --text-primary: #303133;
    --text-secondary: #909399;
    --border-color: #dcdfe6;
    --shadow-color: rgba(0, 0, 0, 0.1);

    --stat-box-bg: #ffffff;
    --stat-box-border: #e4e7ed;
    --stat-box-hover: #ecf5ff;

    /* Element Plus 还原亮色变量 */
    --el-bg-color: #ffffff;
    --el-bg-color-overlay: #ffffff;
    --el-text-color-primary: #303133;
    --el-text-color-regular: #606266;
    --el-border-color: #dcdfe6;
    --el-border-color-light: #e4e7ed;
    --el-fill-color-blank: #ffffff;
}

/* --- 3. 全局基础样式 --- */
body {
    font-family: "Microsoft YaHei", "Segoe UI", sans-serif;
    background-color: var(--bg-main);
    color: var(--text-primary);
    margin: 0;
    padding: 20px;
    transition: background-color 0.3s, color 0.3s;
}

.container { max-width: 1400px; margin: 0 auto; }

/* 头部样式 */
.header {
    text-align: center;
    margin-bottom: 30px;
    padding: 40px 20px;
    background: var(--bg-header);
    border-radius: 12px;
    border-bottom: 4px solid #d32f2f;
    box-shadow: 0 10px 30px var(--shadow-color);
    position: relative; 
}
.header h1 { margin: 0; color: #ef5350; font-size: 2.4rem; letter-spacing: 2px; font-weight: 800; font-style: italic; text-transform: uppercase; text-shadow: 0 4px 10px rgba(239, 83, 80, 0.2); }
.header p { font-size: 14px; color: var(--text-secondary); margin-top: 10px; letter-spacing: 2px; text-transform: uppercase; }

/* 切换按钮 */
.theme-toggle { position: absolute; top: 20px; right: 20px; cursor: pointer; color: var(--text-primary); transition: transform 0.3s; }
.theme-toggle:hover { transform: rotate(20deg) scale(1.1); }

/* 搜索区域 */
.search-area { margin-bottom: 25px; display: flex; justify-content: center; gap: 15px; }


/* ==========================================================
   🔥🔥 强制修复区域 (核弹级覆盖) 🔥🔥
   ========================================================== */

/* 1. 表格去白底 */
.el-table {
    background-color: transparent !important;
    --el-table-bg-color: transparent !important;
    --el-table-tr-bg-color: transparent !important;
    --el-table-header-bg-color: #25272e !important;
    --el-table-row-hover-bg-color: #2e313a !important;
    color: var(--text-primary) !important;
}
.el-table tr, 
.el-table th.el-table__cell, 
.el-table td.el-table__cell {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-bottom-color: var(--border-color) !important;
}

/* 2. Tabs去白条 */
.el-tabs--border-card {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}
.el-tabs--border-card > .el-tabs__header {
    background-color: var(--stat-box-bg) !important;
    border-bottom: 1px solid var(--border-color) !important;
}
.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
    background-color: var(--bg-card) !important;
    border-right-color: var(--border-color) !important;
    border-left-color: var(--border-color) !important;
    color: #ef5350 !important;
}

/* 3. 输入框去白底 */
.el-input__wrapper {
    background-color: var(--bg-card) !important;
    box-shadow: 0 0 0 1px var(--border-color) inset !important;
}
.el-input__inner { color: var(--text-primary) !important; }

/* 4. 分页去白底 */
.el-pagination .el-pager li { background: var(--bg-card) !important; color: var(--text-secondary) !important; }
.el-pagination button { background: var(--bg-card) !important; color: var(--text-secondary) !important; }

/* 5. 亮色模式还原 (只有html.light才还原) */
html.light .el-table { --el-table-header-bg-color: #f5f7fa !important; --el-table-row-hover-bg-color: #f5f7fa !important; }
html.light .el-table tr, 
html.light .el-table th.el-table__cell, 
html.light .el-table td.el-table__cell { background-color: #ffffff !important; }

/* ========================================================== */

/* 详情页样式 */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 25px; }
.stat-box {
    background: var(--stat-box-bg); padding: 15px; border-radius: 8px; border: 1px solid var(--stat-box-border);
    text-align: center; transition: all 0.3s; position: relative; overflow: hidden;
}
.stat-box:hover { transform: translateY(-3px); background: var(--stat-box-hover); border-color: #ef5350; }
.stat-box h4 { margin: 0 0 8px 0; color: var(--text-secondary); font-size: 13px; font-weight: normal; text-transform: uppercase; }
.stat-box .val { font-size: 22px; font-weight: 700; color: var(--text-primary); font-family: 'Bahnschrift', sans-serif; }

/* 颜色高亮 */
.hl-gold .val { color: #ffc107; } 
.hl-green .val { color: #67c23a; } 
.hl-red .val { color: #f56c6c; } 
.hl-blue .val { color: #409eff; }

.section-title { display: flex; align-items: center; margin: 30px 0 15px 0; font-size: 16px; font-weight: bold; color: var(--text-primary); }
.section-title::before { content: ''; display: block; width: 4px; height: 18px; background: #d32f2f; margin-right: 10px; border-radius: 2px; }
.section-title span { color: var(--text-secondary); font-weight: normal; font-size: 13px; margin-left: 10px; }

.rank-badge { width: 32px; height: 32px; line-height: 32px; text-align: center; border-radius: 6px; display: inline-block; font-weight: bold; color: #000; font-size: 16px; }
.rank-1 { background: linear-gradient(to bottom right, #FFD700, #FDB931); box-shadow: 0 0 10px rgba(255, 215, 0, 0.4); }
.rank-2 { background: linear-gradient(to bottom right, #E0E0E0, #BDBDBD); }
.rank-3 { background: linear-gradient(to bottom right, #CD7F32, #A0522D); }
.rank-other { background: #444; color: #fff; font-size: 14px; }
.steamid-text { font-size: 13px; color: var(--text-secondary); font-family: Consolas, monospace; margin-top: 4px; }

/* 移动端适配 */
@media screen and (max-width: 768px) {
    body { padding: 10px; }
    .header { padding: 20px; } .header h1 { font-size: 1.5rem; }
    .theme-toggle { top: 10px; right: 10px; font-size: 20px; }
    .my-custom-dialog { width: 95% !important; max-width: 95% !important; margin-top: 5vh !important; }
    .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .stat-box { padding: 10px; }
    .hidden-mobile { display: none; }
    .search-area { flex-direction: column; } .search-area .el-input, .search-area .el-button { width: 100% !important; }
    .el-table { font-size: 12px; } .el-table .cell { padding: 0 4px !important; }
}