: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);
        }
        
        
        .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; }
        .loading-overlay {
            position: absolute;
            inset: 0;
            background-color: var(--bg-secondary-translucent, rgba(255, 255, 255, 0.7));
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 20;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s, visibility 0.3s;
            border-radius: 1rem;
        }
        html.dark .loading-overlay {
             background-color: var(--bg-secondary-translucent, rgba(31, 41, 55, 0.7));
        }
        .loading-overlay.active {
            opacity: 1;
            visibility: visible;
        }
        .loader {
            border: 4px solid var(--border-color);
            border-top: 4px solid #3498db;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }