.genres-page {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.genres-header {
    margin-bottom: 30px;
    text-align: center;
}

.genres-header h2 {
    margin: 0 0 8px 0;
    font-size: 2rem;
    font-weight: 600;
}

.genres-header p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 1rem;
}

.no-genres {
    text-align: center;
    color: var(--text-secondary);
    padding: 40px 20px;
    font-style: italic;
}

/* Hierarchical genre sections */
.genres-sections {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.genre-section {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Sub-genres row */
.sub-genres-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    padding-left: 20px;
    margin-top: 10px;
}

/* Fallback grid for non-hierarchical layout */
.genres-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
    margin-top: 30px;
    padding: 0 20px;
}

.genre-card {
    display: block;
    padding: 0;
    background: var(--background-secondary);
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    border: 1px solid var(--border-color, #e0e0e0);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    cursor: pointer;
}

.genre-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
    border-color: var(--accent, #007bff);
}

.genre-card:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.2);
}

/* Main genre cards - larger and more prominent */
.genre-card.main-genre {
    min-height: 160px;
    border: 2px solid transparent;
}

.genre-card.main-genre:hover {
    transform: translateY(-10px);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Sub-genre cards - smaller and more subdued */
.genre-card.sub-genre {
    min-height: 120px;
    opacity: 0.9;
}

.genre-card.sub-genre:hover {
    opacity: 1;
}

.genre-card-content {
    position: relative;
    z-index: 2;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.1) 0%, 
        rgba(255, 255, 255, 0.05) 50%,
        rgba(0, 0, 0, 0.02) 100%);
    backdrop-filter: blur(10px);
}

.genre-card.main-genre .genre-card-content {
    padding: 40px 30px;
}

.genre-card.sub-genre .genre-card-content {
    padding: 25px 20px;
}

.genre-card:not(.main-genre):not(.sub-genre) .genre-card-content {
    padding: 28px 24px;
}

.genre-name {
    margin: 0 0 12px 0;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.genre-card.main-genre .genre-name {
    font-size: 1.8rem;
    color: white;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.genre-card.sub-genre .genre-name {
    font-size: 1.4rem;
    color: white;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.genre-card:not(.main-genre):not(.sub-genre) .genre-name {
    font-size: 1.5rem;
}

.genre-stats {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 500;
    opacity: 0.8;
}

.genre-card.main-genre .genre-stats {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.genre-card.sub-genre .genre-stats {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.genre-card:not(.main-genre):not(.sub-genre) .genre-stats {
    color: var(--text-secondary);
}

/* Genre-specific gradient backgrounds */
.genre-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

/* Hip-Hop family - Red/Orange gradients */
.genre-card.hip-hop::before {
    background: linear-gradient(135deg, #ff6b6b, #ee5a52, #ff8a80);
}

.genre-card.trap::before {
    background: linear-gradient(135deg, #ff7675, #d63031, #e84393);
}

.genre-card.alternative-hip-hop::before {
    background: linear-gradient(135deg, #fd79a8, #e84393, #d63031);
}

.genre-card.conscious-hip-hop::before {
    background: linear-gradient(135deg, #e17055, #d63031, #74b9ff);
}

.genre-card.drill::before {
    background: linear-gradient(135deg, #2d3436, #636e72, #74b9ff);
}

.genre-card.grime::before {
    background: linear-gradient(135deg, #636e72, #2d3436, #ddd);
}

/* R&B/Soul family - Purple gradients */
.genre-card.r-b::before {
    background: linear-gradient(135deg, #9c27b0, #673ab7, #8e24aa);
}

.genre-card.contemporary-r-b::before {
    background: linear-gradient(135deg, #a29bfe, #6c5ce7, #5f3dc4);
}

.genre-card.neo-soul::before {
    background: linear-gradient(135deg, #fd79a8, #fdcb6e, #e84393);
}

.genre-card.classic-soul::before {
    background: linear-gradient(135deg, #ffeaa7, #fdcb6e, #fab1a0);
}

.genre-card.funk::before {
    background: linear-gradient(135deg, #673ab7, #512da8, #7986cb);
}

/* Pop family - Pink/Purple gradients */
.genre-card.pop::before {
    background: linear-gradient(135deg, #e91e63, #ad1457, #f06292);
}

.genre-card.pop-rock::before {
    background: linear-gradient(135deg, #74b9ff, #0984e3, #42a5f5);
}

.genre-card.dance-pop::before {
    background: linear-gradient(135deg, #00cec9, #00b894, #26c6da);
}

.genre-card.indie-pop::before {
    background: linear-gradient(135deg, #fd79a8, #e84393, #a29bfe);
}

.genre-card.electronic-pop::before {
    background: linear-gradient(135deg, #00cec9, #74b9ff, #a29bfe);
}

.genre-card.art-pop::before {
    background: linear-gradient(135deg, #a29bfe, #6c5ce7, #fd79a8);
}

.genre-card.dream-pop::before {
    background: linear-gradient(135deg, #81ecec, #74b9ff, #a29bfe);
}

.genre-card.baroque-pop::before {
    background: linear-gradient(135deg, #6c5ce7, #5f3dc4, #a29bfe);
}

/* Rock family - Blue/Teal gradients */
.genre-card.rock::before {
    background: linear-gradient(135deg, #2196f3, #1976d2, #42a5f5);
}

.genre-card.alternative-rock::before {
    background: linear-gradient(135deg, #81ecec, #00b894, #74b9ff);
}

.genre-card.classic-rock::before {
    background: linear-gradient(135deg, #636e72, #2d3436, #74b9ff);
}

.genre-card.hard-rock::before {
    background: linear-gradient(135deg, #2d3436, #636e72, #b2bec3);
}

.genre-card.punk-rock::before {
    background: linear-gradient(135deg, #d63031, #74b9ff, #2d3436);
}

.genre-card.progressive-rock::before {
    background: linear-gradient(135deg, #6c5ce7, #5f3dc4, #74b9ff);
}

.genre-card.psychedelic-rock::before {
    background: linear-gradient(135deg, #fd79a8, #fdcb6e, #a29bfe);
}

.genre-card.blues-rock::before {
    background: linear-gradient(135deg, #74b9ff, #0984e3, #636e72);
}

.genre-card.garage-rock::before {
    background: linear-gradient(135deg, #636e72, #2d3436, #ff7675);
}

/* Electronic family - Cyan/Blue gradients */
.genre-card.electronic::before {
    background: linear-gradient(135deg, #00bcd4, #0097a7, #26c6da);
}

.genre-card.house::before {
    background: linear-gradient(135deg, #00cec9, #74b9ff, #26c6da);
}

.genre-card.techno::before {
    background: linear-gradient(135deg, #636e72, #2d3436, #00cec9);
}

.genre-card.ambient::before {
    background: linear-gradient(135deg, #81ecec, #74b9ff, #ddd);
}

.genre-card.downtempo::before {
    background: linear-gradient(135deg, #a29bfe, #74b9ff, #81ecec);
}

.genre-card.drum---bass::before {
    background: linear-gradient(135deg, #00b894, #00cec9, #74b9ff);
}

.genre-card.dubstep::before {
    background: linear-gradient(135deg, #2d3436, #00cec9, #74b9ff);
}

.genre-card.trance::before {
    background: linear-gradient(135deg, #74b9ff, #0984e3, #a29bfe);
}

/* Reggae family - Green gradients */
.genre-card.reggae::before {
    background: linear-gradient(135deg, #4caf50, #388e3c, #66bb6a);
}

.genre-card.roots-reggae::before {
    background: linear-gradient(135deg, #4caf50, #388e3c, #ffeaa7);
}

.genre-card.dancehall::before {
    background: linear-gradient(135deg, #ffeaa7, #fdcb6e, #4caf50);
}

.genre-card.dub::before {
    background: linear-gradient(135deg, #00b894, #4caf50, #388e3c);
}

.genre-card.lovers-rock::before {
    background: linear-gradient(135deg, #fd79a8, #4caf50, #ffeaa7);
}

.genre-card.reggaeton::before {
    background: linear-gradient(135deg, #e84393, #fdcb6e, #4caf50);
}

/* Jazz family - Gold/Orange gradients */
.genre-card.jazz::before {
    background: linear-gradient(135deg, #ff9800, #f57c00, #ffb74d);
}

.genre-card.contemporary-jazz::before {
    background: linear-gradient(135deg, #ff9800, #f57c00, #a29bfe);
}

.genre-card.smooth-jazz::before {
    background: linear-gradient(135deg, #fdcb6e, #e17055, #a29bfe);
}

.genre-card.traditional-jazz::before {
    background: linear-gradient(135deg, #636e72, #fdcb6e, #e17055);
}

.genre-card.free-jazz::before {
    background: linear-gradient(135deg, #2d3436, #fdcb6e, #ff9800);
}

.genre-card.latin-jazz::before {
    background: linear-gradient(135deg, #e84393, #fdcb6e, #ff9800);
}

/* Blues family - Indigo gradients */
.genre-card.blues::before {
    background: linear-gradient(135deg, #3f51b5, #303f9f, #5c6bc0);
}

.genre-card.electric-blues::before {
    background: linear-gradient(135deg, #74b9ff, #0984e3, #3f51b5);
}

.genre-card.acoustic-blues::before {
    background: linear-gradient(135deg, #795548, #5d4037, #3f51b5);
}

.genre-card.delta-blues::before {
    background: linear-gradient(135deg, #8d6e63, #795548, #3f51b5);
}

/* Country family - Brown/Orange gradients */
.genre-card.country::before {
    background: linear-gradient(135deg, #795548, #5d4037, #8d6e63);
}

.genre-card.contemporary-country::before {
    background: linear-gradient(135deg, #795548, #fdcb6e, #74b9ff);
}

.genre-card.country-rock::before {
    background: linear-gradient(135deg, #795548, #74b9ff, #636e72);
}

.genre-card.bluegrass::before {
    background: linear-gradient(135deg, #4caf50, #795548, #8d6e63);
}

.genre-card.americana::before {
    background: linear-gradient(135deg, #d63031, #795548, #74b9ff);
}

.genre-card.country-pop::before {
    background: linear-gradient(135deg, #fd79a8, #795548, #fdcb6e);
}

/* Latin family - Red/Yellow gradients */
.genre-card.latin::before {
    background: linear-gradient(135deg, #f44336, #d32f2f, #ef5350);
}

.genre-card.salsa::before {
    background: linear-gradient(135deg, #e84393, #d32f2f, #fdcb6e);
}

.genre-card.bachata::before {
    background: linear-gradient(135deg, #fd79a8, #e84393, #fdcb6e);
}

.genre-card.merengue::before {
    background: linear-gradient(135deg, #ffeaa7, #fdcb6e, #e84393);
}

.genre-card.cumbia::before {
    background: linear-gradient(135deg, #00b894, #ffeaa7, #e84393);
}

.genre-card.bossa-nova::before {
    background: linear-gradient(135deg, #00b894, #81ecec, #fdcb6e);
}

.genre-card.latin-pop::before {
    background: linear-gradient(135deg, #fd79a8, #e84393, #ffeaa7);
}

/* African family - Earth tones */
.genre-card.african::before {
    background: linear-gradient(135deg, #ff5722, #d84315, #ff7043);
}

.genre-card.afrobeats::before {
    background: linear-gradient(135deg, #e17055, #d84315, #ffeaa7);
}

.genre-card.amapiano::before {
    background: linear-gradient(135deg, #fdcb6e, #e17055, #00b894);
}

.genre-card.highlife::before {
    background: linear-gradient(135deg, #ffeaa7, #e17055, #4caf50);
}

.genre-card.soukous::before {
    background: linear-gradient(135deg, #e17055, #00b894, #ffeaa7);
}

.genre-card.makossa::before {
    background: linear-gradient(135deg, #d84315, #ffeaa7, #e17055);
}

/* Folk family - Green/Brown gradients */
.genre-card.folk::before {
    background: linear-gradient(135deg, #689f38, #558b2f, #8bc34a);
}

.genre-card.indie-folk::before {
    background: linear-gradient(135deg, #8bc34a, #689f38, #a29bfe);
}

.genre-card.folk-rock::before {
    background: linear-gradient(135deg, #689f38, #74b9ff, #636e72);
}

.genre-card.traditional-folk::before {
    background: linear-gradient(135deg, #795548, #689f38, #8bc34a);
}

.genre-card.singer-songwriter::before {
    background: linear-gradient(135deg, #a29bfe, #689f38, #795548);
}

/* Alternative family - Mixed gradients */
.genre-card.alternative::before {
    background: linear-gradient(135deg, #607d8b, #455a64, #78909c);
}

.genre-card.indie-rock::before {
    background: linear-gradient(135deg, #81ecec, #607d8b, #a29bfe);
}

.genre-card.alternative-pop::before {
    background: linear-gradient(135deg, #fd79a8, #607d8b, #a29bfe);
}

.genre-card.experimental::before {
    background: linear-gradient(135deg, #2d3436, #607d8b, #a29bfe);
}

.genre-card.art-rock::before {
    background: linear-gradient(135deg, #6c5ce7, #607d8b, #2d3436);
}

/* Override for main genre cards */
.genre-card.main-genre::before {
    opacity: 1;
}

.genre-card.main-genre:hover::before {
    opacity: 1;
}

/* Override for sub-genre cards */
.genre-card.sub-genre::before {
    opacity: 0.85;
}

.genre-card.sub-genre:hover::before {
    opacity: 1;
}

/* Staggered animation for cards */
.genre-card:nth-child(1) { animation-delay: 0ms; }
.genre-card:nth-child(2) { animation-delay: 50ms; }
.genre-card:nth-child(3) { animation-delay: 100ms; }
.genre-card:nth-child(4) { animation-delay: 150ms; }
.genre-card:nth-child(5) { animation-delay: 200ms; }
.genre-card:nth-child(6) { animation-delay: 250ms; }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.genre-card, .genre-separator {
    animation: fadeInUp 0.3s ease forwards;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .genres-page {
        padding: 15px;
    }
    
    .genres-header h2 {
        font-size: 1.5rem;
    }
    
    .genres-sections {
        gap: 25px;
    }
    
    .sub-genres-row {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 12px;
        padding-left: 15px;
    }
    
    .genres-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 20px;
        padding: 0 10px;
    }
    
    .genre-card.main-genre .genre-card-content {
        padding: 30px 20px;
    }
    
    .genre-card.sub-genre .genre-card-content {
        padding: 20px 15px;
    }
    
    .genre-card.main-genre .genre-name {
        font-size: 1.6rem;
    }
    
    .genre-card.sub-genre .genre-name {
        font-size: 1.2rem;
    }
}

@media (max-width: 640px) {
    .sub-genres-row {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        padding-left: 10px;
    }
    
    .genres-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 16px;
        padding: 0 5px;
    }
}

@media (max-width: 480px) {
    .sub-genres-row {
        grid-template-columns: 1fr 1fr;
        padding-left: 5px;
    }
    
    .genres-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 0;
    }
    
    .genre-card.main-genre .genre-name {
        font-size: 1.4rem;
    }
    
    .genre-card.sub-genre .genre-name {
        font-size: 1.1rem;
    }
}