:root {
            --bg-primary: #f0f2f5;
            --bg-secondary: #ffffff;
            --bg-tertiary: #f9fafb;
            --text-primary: #1a202c;
            --text-secondary: #4a5568;
            --text-link: #0ea5e9;
            --border-color: #e5e7eb;
            --header-scrolled-bg: rgba(255, 255, 255, 0.85);
            --header-scrolled-text: #374151;
            --header-scrolled-logo: #0ea5e9;
        }

        html.dark {
            --bg-primary: #111827;
            --bg-secondary: #1f2937;
            --bg-tertiary: #374151;
            --text-primary: #f9fafb;
            --text-secondary: #d1d5db;
            --text-link: #38bdf8;
            --border-color: #374151;
            --header-scrolled-bg: rgba(31, 41, 55, 0.85);
            --header-scrolled-text: #d1d5db;
            --header-scrolled-logo: #38bdf8;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--bg-primary);
            color: var(--text-primary);
        }
        .header-gradient-overlay {
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);
        }
        .swiper-pagination-bullet { width: 12px; height: 12px; background-color: rgba(255, 255, 255, 0.5); opacity: 1; transition: all 0.3s ease; }
        .swiper-pagination-bullet-active { width: 30px; border-radius: 8px; background-color: #38bdf8; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
        .ranking-item:nth-child(1) .rank-badge { background-color: #ffd700; color: #4c3b00; }
        .ranking-item:nth-child(2) .rank-badge { background-color: #c0c0c0; color: #3e3e3e; }
        .ranking-item:nth-child(3) .rank-badge { background-color: #cd7f32; color: #5a3814; }
        #site-header { transition: transform 0.3s ease-in-out, background-color 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease; }
        #site-header.header-hidden { transform: translateY(-100%); }
        #site-header.header-scrolled {
            position: fixed;
            background-color: var(--header-scrolled-bg);
            backdrop-filter: blur(10px);
            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
        }
        #site-header.header-scrolled .header-logo-text { color: var(--header-scrolled-logo); text-shadow: none; }
        #site-header.header-scrolled .desktop-nav a { color: var(--header-scrolled-text); text-shadow: none; }
        #site-header.header-scrolled .desktop-nav a:hover { color: var(--text-link); }
        #site-header.header-scrolled .theme-toggle-btn { color: var(--text-secondary); }
        #site-header.header-scrolled .theme-toggle-btn:hover { color: var(--text-primary); }
        #site-header.header-scrolled .search-bar-wrapper { background-color: var(--bg-tertiary); border-color: var(--border-color); }
        #site-header.header-scrolled .search-bar-wrapper input { color: var(--text-primary); }
        #site-header.header-scrolled .search-bar-wrapper input::placeholder { color: var(--text-secondary); }
        #site-header.header-scrolled .search-bar-wrapper button { background-color: var(--bg-primary); color: var(--text-secondary); }
        #site-header.header-scrolled .search-bar-wrapper button:hover { background-color: var(--border-color); }
        .dropdown-menu { transition: opacity 0.2s ease, transform 0.2s ease; }
        #back-to-top { transition: opacity 0.3s, transform 0.3s; }