/* roulang page: index */
:root {
            --bg-base: #0B0D11;
            --bg-card: #13171F;
            --border-card: #1F2633;
            --gold-light: #F59E0B;
            --gold-dark: #D97706;
            --silver: #94A3B8;
            --bronze: #EA580C;
            --text-main: #F8FAFC;
            --text-muted: #94A3B8;
        }

        body {
            background-color: var(--bg-base);
            color: var(--text-main);
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            line-height: 1.8;
            overflow-x: hidden;
        }

        /* 隐藏横向滚动条但保留功能 */
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }
        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        /* 渐变金色文字 */
        .text-gold-gradient {
            background: linear-gradient(135deg, #FCD34D 0%, #F59E0B 50%, #D97706 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* 奖牌立体发光与徽章样式 */
        .gold-badge {
            background: linear-gradient(135deg, #F59E0B, #B45309);
            box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
        }
        .silver-badge {
            background: linear-gradient(135deg, #E2E8F0, #64748B);
            box-shadow: 0 4px 15px rgba(148, 163, 184, 0.2);
        }
        .bronze-badge {
            background: linear-gradient(135deg, #EA580C, #9A3412);
            box-shadow: 0 4px 15px rgba(234, 88, 12, 0.25);
        }

        .card-dark {
            background-color: var(--bg-card);
            border: 1px solid var(--border-card);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .card-dark:hover {
            border-color: rgba(245, 158, 11, 0.4);
            transform: translateY(-3px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.7), 0 0 15px rgba(245, 158, 11, 0.1);
        }

        /* 导航吸顶玻璃质感 */
        .nav-glass {
            background: rgba(11, 13, 17, 0.85);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(31, 38, 51, 0.8);
        }

        /* 领奖台阴影与造型 */
        .podium-1 {
            background: linear-gradient(180deg, rgba(245, 158, 11, 0.12) 0%, rgba(19, 23, 31, 0.95) 100%);
            border: 1px solid rgba(245, 158, 11, 0.4);
        }
        .podium-2 {
            background: linear-gradient(180deg, rgba(148, 163, 184, 0.08) 0%, rgba(19, 23, 31, 0.95) 100%);
            border: 1px solid rgba(148, 163, 184, 0.3);
        }
        .podium-3 {
            background: linear-gradient(180deg, rgba(234, 88, 12, 0.08) 0%, rgba(19, 23, 31, 0.95) 100%);
            border: 1px solid rgba(234, 88, 12, 0.3);
        }

        /* 手风琴展开动效 */
        details summary::-webkit-details-marker {
            display: none;
        }

/* roulang page: category1 */
:root {
        --bg-base: #0B0D11;
        --bg-card: #13171F;
        --border-card: #1F2633;
        --gold-light: #F59E0B;
        --gold-dark: #D97706;
        --silver: #94A3B8;
        --bronze: #EA580C;
        --text-main: #F8FAFC;
        --text-muted: #94A3B8;
    }
    body {
        background-color: var(--bg-base);
        color: var(--text-main);
        font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
        line-height: 1.8;
        overflow-x: hidden;
    }
    .text-gold-gradient {
        background: linear-gradient(135deg, #FCD34D 0%, #F59E0B 50%, #D97706 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .gold-badge {
        background: linear-gradient(135deg, #F59E0B, #B45309);
        box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
    }
    .silver-badge {
        background: linear-gradient(135deg, #E2E8F0, #64748B);
        box-shadow: 0 4px 15px rgba(148, 163, 184, 0.2);
    }
    .bronze-badge {
        background: linear-gradient(135deg, #EA580C, #9A3412);
        box-shadow: 0 4px 15px rgba(234, 88, 12, 0.25);
    }
    .card-dark {
        background-color: var(--bg-card);
        border: 1px solid var(--border-card);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .card-dark:hover {
        border-color: rgba(245, 158, 11, 0.4);
        transform: translateY(-3px);
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.7), 0 0 15px rgba(245, 158, 11, 0.1);
    }
    .nav-glass {
        background: rgba(11, 13, 17, 0.85);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(31, 38, 51, 0.8);
    }
    .pill-active {
        background: linear-gradient(135deg, #F59E0B, #D97706);
        color: #07090D;
        font-weight: 700;
        box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
    }
    .pill-idle {
        background-color: rgba(19, 23, 31, 0.85);
        border: 1px solid #1F2633;
        color: #94A3B8;
        transition: all 0.2s ease;
    }
    .pill-idle:hover {
        border-color: #F59E0B;
        color: #F8FAFC;
    }
    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }
    .no-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }