/* ===== Element Plus Color System ===== */
:root {
    --el-color-primary: #409eff;
    --el-color-primary-light-3: #79bbff;
    --el-color-primary-light-5: #a0cfff;
    --el-color-primary-light-8: #d9ecff;
    --el-color-primary-light-9: #ecf5ff;
    --el-color-success: #67c23a;
    --el-color-success-light-3: #95d475;
    --el-color-success-light-5: #b3e19d;
    --el-color-success-light-8: #e1f3d8;
    --el-color-success-light-9: #f0f9eb;
    --el-color-warning: #e6a23c;
    --el-color-warning-light-3: #eebe77;
    --el-color-warning-light-5: #f3d19e;
    --el-color-warning-light-8: #faecd8;
    --el-color-warning-light-9: #fdf6ec;
    --el-color-danger: #f56c6c;
    --el-color-danger-light-3: #f89898;
    --el-color-danger-light-5: #fab6b6;
    --el-color-danger-light-8: #fde2e2;
    --el-color-danger-light-9: #fef0f0;
    --el-color-info: #909399;
    --el-color-info-light-3: #b1b3b8;
    --el-color-info-light-5: #c8c9cc;
    --el-color-info-light-8: #e9e9eb;
    --el-color-info-light-9: #f4f4f5;
    --el-text-color-primary: #303133;
    --el-text-color-regular: #606266;
    --el-text-color-secondary: #909399;
    --el-border-color: #dcdfe6;
    --el-border-color-light: #e4e7ed;
    --el-border-color-lighter: #ebeef5;
    --el-fill-color-blank: #fff;
    --el-fill-color-light: #f5f7fa;
    --el-fill-color-lighter: #fafafa;
    --el-box-shadow-light: 0px 0px 12px rgba(0,0,0,.12);
    --el-font-size-base: 14px;
    --el-transition-duration: .3s;
    --sw-font-size-base: 14px;
}

/* ===== Reset ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
    color: var(--el-text-color-primary); background: #f5f5f5; min-height: 100vh;
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ===== Container ===== */
.sw-container { max-width: 80rem; margin: 0 auto; }

/* ===== Header ===== */
.sw-header {
    background: #fff; border-bottom: 1px solid var(--el-border-color-light);
    position: sticky; top: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    height: 60px; padding: 0 16px;
}
.sw-header .header-inner {
    max-width: 80rem; width: 100%;
    display: flex; align-items: center; justify-content: space-between;
}
.sw-header .logo-area {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    min-width: 0; color: var(--el-text-color-primary);
}
.sw-header .site-logo-mark { width: 36px; height: 36px; flex: 0 0 36px; }
.sw-header .logo-text { font-size: 20px; font-weight: 500; }

/* ===== Navigation Menu ===== */
.el-menu--horizontal {
    display: flex; align-items: center; gap: 0;
}
.el-menu--horizontal .el-menu-item {
    display: flex; align-items: center;
    padding: 0 20px; height: 60px;
    font-size: 14px; color: var(--el-text-color-primary);
    cursor: pointer; transition: color .2s; white-space: nowrap;
    border-bottom: 2px solid transparent;
}
.el-menu--horizontal .el-menu-item:hover,
.el-menu--horizontal .el-menu-item.is-active {
    color: var(--el-color-primary); border-bottom-color: var(--el-color-primary);
}
/* Dropdown */
.el-sub-menu { position: relative; }
.el-sub-menu__title {
    display: flex; align-items: center;
    padding: 0 20px; height: 60px;
    font-size: 14px; color: var(--el-text-color-primary);
    cursor: pointer; transition: color .2s;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.el-sub-menu__title:hover { color: var(--el-color-primary); border-bottom-color: var(--el-color-primary); }
.el-menu--popup {
    display: none; position: absolute; top: 100%; left: 0;
    background: #fff; min-width: 120px;
    box-shadow: var(--el-box-shadow-light); border-radius: 4px; z-index: 200;
    padding: 5px 0;
}
.el-sub-menu:hover .el-menu--popup { display: block; }
.el-menu--popup .el-menu-item {
    display: block; padding: 8px 16px; font-size: 14px; color: var(--el-text-color-regular);
    transition: background .2s; border-bottom: none; height: auto; line-height: 1.5;
}
.el-menu--popup .el-menu-item:hover { background: var(--el-fill-color-light); color: var(--el-color-primary); }

/* ===== Menu Button Group ===== */
.el-button-group { display: flex; gap: 0; flex-wrap: wrap; }
.menu-button-item {
    flex: 1; min-width: 60px;
    padding: 6px 12px; font-size: 14px;
    border: 1px solid var(--el-border-color); background: #fff;
    color: var(--el-text-color-regular);
    cursor: pointer; transition: all .2s;
    text-align: center; line-height: 1.5;
}
.menu-button-item:first-child { border-radius: 4px 0 0 4px; }
.menu-button-item:last-child { border-radius: 0 4px 4px 0; }
.menu-button-item + .menu-button-item { border-left: none; }
.menu-button-item.is-active,
.menu-button-item:hover { background: var(--el-color-primary); color: #fff; border-color: var(--el-color-primary); }
.menu-button-item.is-plain.is-active { background: var(--el-color-primary); color: #fff; border-color: var(--el-color-primary); }
.menu-button-item.small { padding: 4px 8px; font-size: 12px; }

/* ===== Front Selector ===== */
.front-selector { margin-bottom: 6px; }

/* ===== Trend ===== */
.trend-game-switcher { margin-bottom: 6px; }
.trend-card-body-flush { padding: 0; }
.trend-chart-card { margin-top: 12px; }
.trend-card-title { font-weight: 500; }
.trend-table-scroll { overflow-x: auto; }
.sw-table__main table.trend-table { min-width: 760px; }
.trend-table-heading { white-space: nowrap; }
.trend-table-heading.is-danger { color: var(--el-color-danger); }
.trend-table-heading.is-primary { color: var(--el-color-primary); }
.trend-table-heading.is-warning { color: var(--el-color-warning); }
.trend-table-heading.is-muted { color: var(--el-text-color-secondary); }
.trend-table th:first-child,
.trend-table td:first-child {
    position: sticky; left: 0; z-index: 2;
    background: #fff; box-shadow: 1px 0 0 var(--el-border-color-lighter);
}
.trend-table th:first-child {
    z-index: 3; background: var(--el-fill-color-lighter);
}
.trend-table-cell,
.trend-table-period,
.trend-table-numbers { font-size: 12px; }
.trend-table-period,
.trend-table-numbers { font-family: monospace; }
.trend-table-period,
.trend-table-tail { color: var(--el-color-primary); }
.trend-table-time { font-size: 11px; color: var(--el-text-color-secondary); }
.trend-table-numbers { font-weight: 700; color: var(--el-text-color-primary); }
.trend-sum-value { border-radius: 9999px; padding: 0 4px; font-size: 11px; }
.trend-hit,
.trend-interval,
.trend-table-tail,
.trend-table-mod3,
.trend-table-mod4,
.trend-table-mod5 { font-weight: 700; }
.trend-hit.is-danger { color: var(--el-color-danger); }
.trend-hit.is-primary { color: var(--el-color-primary); }
.trend-hit.is-warning,
.trend-table-mod3 { color: var(--el-color-warning); }
.trend-hit.is-muted { color: var(--el-text-color-secondary); }
.trend-interval { color: #666; }
.trend-table-mod4 { color: var(--el-color-primary); }
.trend-table-mod5 { color: var(--el-color-success); }
.trend-empty { padding: 20px; color: #999; }
.sum-trend-chart {
    display: flex; align-items: flex-end; gap: 3px;
    height: 200px; padding: 10px 0; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.sum-trend-item {
    flex: 0 0 auto; display: flex; align-items: flex-end; justify-content: center;
    width: 14px; height: 180px;
}
.sum-trend-bar {
    width: 12px; min-height: 6px; border-radius: 3px 3px 0 0;
    height: var(--bar-height); cursor: pointer;
}
.sum-trend-bar.is-danger { background: var(--el-color-danger); }
.sum-trend-bar.is-primary { background: var(--el-color-primary); }
.sum-trend-bar.is-success { background: var(--el-color-success); }
.sum-trend-bar.is-latest {
    outline: 2px solid var(--el-color-warning);
    outline-offset: 1px;
}

/* ===== Card ===== */
.el-card {
    background: #fff; border-radius: 4px;
    border: 1px solid var(--el-border-color-light);
    display: flex; flex-direction: column; overflow: hidden;
    margin-bottom: 12px;
}
.el-card.is-never-shadow { box-shadow: none; }
.el-card__header {
    border-bottom: 1px solid var(--el-border-color-light);
    padding: 14px 20px;
    font-size: 14px;
}
.el-card__body { padding: 0; flex: 1; }

/* ===== Tag ===== */
.el-tag {
    display: inline-flex; align-items: center;
    height: 24px; padding: 0 9px;
    border-radius: 4px; border: 1px solid;
    font-size: 12px; line-height: 1;
    white-space: nowrap; vertical-align: middle;
}
.el-tag--small { height: 20px; padding: 0 7px; font-size: 12px; }
.el-tag.is-round { border-radius: 9999px; }
.el-tag--dark { color: #fff; }
.el-tag--dark.el-tag--success { background: var(--el-color-success); border-color: var(--el-color-success); }
.el-tag--dark.el-tag--primary { background: var(--el-color-primary); border-color: var(--el-color-primary); }
.el-tag--dark.el-tag--warning { background: var(--el-color-warning); border-color: var(--el-color-warning); }
.el-tag--dark.el-tag--danger { background: var(--el-color-danger); border-color: var(--el-color-danger); }
.el-tag--dark.el-tag--info { background: var(--el-color-info); border-color: var(--el-color-info); }
.el-tag--plain { background: #fff; }
.el-tag--plain.el-tag--success { color: var(--el-color-success); border-color: var(--el-color-success-light-5); }
.el-tag--plain.el-tag--primary { color: var(--el-color-primary); border-color: var(--el-color-primary-light-5); }
.el-tag--plain.el-tag--warning { color: var(--el-color-warning); border-color: var(--el-color-warning-light-5); }
.el-tag--plain.el-tag--danger { color: var(--el-color-danger); border-color: var(--el-color-danger-light-5); }
.el-tag--plain.is-round { border-radius: 9999px; }
.el-tag--dark.is-round { border-radius: 9999px; }

/* ===== Table ===== */
.sw-table { width: 100%; }
.sw-table__main { overflow-x: auto; }
.sw-table__main.is-center { text-align: center; }
.sw-table__main table {
    width: 100%; border-collapse: collapse;
    font-size: 14px; color: var(--el-text-color-regular);
    min-width: 500px;
}
.sw-table__main th {
    background: var(--el-fill-color-lighter);
    font-weight: 500; padding: 8px 12px;
    border-bottom: 1px solid var(--el-border-color-lighter);
    white-space: nowrap;
}
.sw-table__main td {
    padding: 8px 12px; border-bottom: 1px solid var(--el-border-color-lighter);
}
.sw-table--enable-row-hover tbody tr:hover { background: var(--el-fill-color-light); }

/* ===== Countdown Number ===== */
.countdown-num {
    background: #ef4444; color: #fff;
    padding: 0 4px; border-radius: 4px;
    font-family: "DIN Alternate", "Courier New", monospace;
    font-weight: 700;
}

/* ===== Color Helpers ===== */
.text-gray-400 { color: var(--el-text-color-secondary); }
.text-blue-500 { color: var(--el-color-primary); }
.text-green-500 { color: var(--el-color-success); }
.text-red-500 { color: var(--el-color-danger); }

/* ===== Footer ===== */
.site-footer {
    border-top: 1px solid var(--el-border-color);
    text-align: center; padding: 20px;
    font-size: 14px; color: var(--el-text-color-secondary);
}
.site-footer p { max-width: 1024px; margin: 0 auto; line-height: 1.8; }

/* ===== Responsive ===== */
@media (max-width: 767px) {
    .desktop-nav { display: none; }
    .sw-header .logo-text { font-size: 18px; }
    .menu-button-item { font-size: 12px; padding: 4px 6px; min-width: 40px; }
    .front-selector .el-button-group {
        flex-wrap: nowrap; overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .front-selector .el-button-group + .el-button-group,
    .front-selector .custom-style {
        margin-top: 6px;
    }
    .front-selector .menu-button-item {
        flex: 0 0 auto; min-width: max-content; white-space: nowrap;
        border-left: 1px solid var(--el-border-color); border-radius: 4px;
    }
    .game-switcher {
        flex-wrap: nowrap; overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .game-switcher .menu-button-item {
        flex: 0 0 auto; min-width: max-content; white-space: nowrap;
        border-left: 1px solid var(--el-border-color); border-radius: 4px;
    }
    .el-card__header { padding: 10px 12px; }
    .sw-table__main table { font-size: 12px; min-width: 0; }
    .sw-table__main th, .sw-table__main td { padding: 6px 6px; }
    .sw-table__main table.trend-table { min-width: 720px; }
    .sum-trend-item { width: 16px; }
}

/* ===== Custom Style Row ===== */
.custom-style .menu-button-item.is-plain.is-active {
    background: var(--el-color-primary);
    color: #fff;
    border-color: var(--el-color-primary);
}

/* ===== Space ===== */
.space-y-1 > * + * { margin-top: 4px; }
.space-y-2 > * + * { margin-top: 8px; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-4 { gap: 16px; }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

/* ===== Mobile Menu ===== */
.mobile-menu-btn { display: none; background: none; border: none; font-size: 24px; cursor: pointer; padding: 8px; color: #333; }
@media (max-width: 767px) { .mobile-menu-btn { display: block; } }
.mobile-menu { display: none; background: #fff; border-top: 1px solid var(--el-border-color-light); }
.mobile-menu.open { display: block; }
.mobile-nav-link { display: block; padding: 12px 16px; color: #333; font-size: 14px; border-bottom: 1px solid var(--el-border-color-extra-light); }
.mobile-nav-link:hover,
.mobile-nav-link.is-active { background: var(--el-fill-color-light); color: var(--el-color-primary); }
.mobile-nav-link.is-active { font-weight: 600; border-left: 3px solid var(--el-color-primary); padding-left: 13px; }
.mobile-nav-link.sub { padding-left: 32px; }
.mobile-nav-section-title { padding: 8px 16px; font-size: 12px; color: #999; font-weight: 500; background: #fafafa; border-bottom: 1px solid #f0f0f0; }

/* ===== Sum Zero ===== */
.el-tag.sum-zero {
    background: #fff;
    color: #000;
    border: 1px solid #dcdfe6;
}