body {
            background-color: var(--bg-dark);
            color: #fff;
            font-family: 'Inter', sans-serif;
            padding-bottom: 80px;
        }
        
        h1, h2, h3, .font-futuristic { font-family: 'Orbitron', sans-serif; }
        
        /* Header */
        .header-glass {
            background: rgba(9, 9, 11, 0.9);
            backdrop-filter: blur(16px);
            border-bottom: 1px solid var(--glass-border);
        }
        
        /* Cards */
        .media-card {
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            border-radius: 12px;
            background: #121214;
            width: 100%;
        }
        
        .media-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
        }
        
        .media-card img {
            aspect-ratio: 1/1;
            object-fit: cover;
            width: 100%;
            height: 100%;
            transition: transform 0.5s ease;
        }
        
        .media-card:hover img { transform: scale(1.05); }
        
        .play-overlay {
            position: absolute; inset: 0; background: rgba(0,0,0,0.4);
            display: flex; align-items: center; justify-content: center;
            opacity: 0; transition: opacity 0.3s ease;
        }
        
        .media-card:hover .play-overlay { opacity: 1; }
        
        .play-btn {
            width: 48px; height: 48px; background: var(--primary);
            border-radius: 50%; display: flex; align-items: center; justify-content: center;
            color: white; transform: scale(0.8); transition: transform 0.2s; cursor: pointer;
        }
        
        .media-card:hover .play-btn { transform: scale(1); }
        
        /* Artist Card */
        .artist-avatar {
            width: 100%; aspect-ratio: 1/1; border-radius: 50%;
            object-fit: cover; border: 2px solid transparent; transition: all 0.3s;
        }
        
        .artist-card:hover .artist-avatar {
            border-color: var(--primary); transform: scale(1.05);
        }
        
        /* Swiper Custom Nav */
        .swiper-button-next-custom, .swiper-button-prev-custom {
            position: absolute; top: 50%; transform: translateY(-50%);
            width: 36px; height: 36px; background: rgba(0,0,0,0.7);
            backdrop-filter: blur(4px); border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            cursor: pointer; z-index: 10; transition: all 0.3s;
            border: 1px solid rgba(255,255,255,0.1);
        }
        
        .swiper-button-next-custom:hover, .swiper-button-prev-custom:hover {
            background: var(--primary); color: black;
        }
        
        .swiper-button-prev-custom { left: 0; }
        .swiper-button-next-custom { right: 0; }
        
        /* Ranking Badge */
        .ranking-number {
            position: absolute; top: -8px; left: -8px; z-index: 20;
            width: 32px; height: 32px; background: linear-gradient(135deg, #fbbf24, #f59e0b);
            color: black; font-weight: 900; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.3);
            border: 2px solid rgba(0,0,0,0.5);
        }
        
        .bottom-nav-item.active { color: var(--primary); }
        
        /* Footer Styles */
        .footer-section { background: linear-gradient(180deg, #0a0a0c 0%, #050505 100%); border-top: 1px solid rgba(255, 255, 255, 0.08); }
        .text-description-footer { color: #9ca3af; font-size: 0.875rem; line-height: 1.5rem; }
        .footer-link { color: #9ca3af; transition: all 0.3s ease; font-size: 0.875rem; }
        .footer-link:hover { color: var(--primary); transform: translateX(4px); display: inline-block; }
        .social-icon { width: 36px; height: 36px; background: rgba(255, 255, 255, 0.05); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #9ca3af; transition: all 0.3s ease; }
        .social-icon:hover { background: var(--primary); color: #000; transform: translateY(-3px); }
        
        @media (max-width: 640px) {
            .ranking-number { width: 28px; height: 28px; font-size: 12px; top: -6px; left: -6px; }
        }