.genre-grid{gap:var(--space-md);grid-template-columns:repeat(auto-fill,minmax(180px,1fr));display:grid}.genre-card{padding:var(--space-xl);background:var(--bg-card);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-normal);border:1px solid #0000;flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.genre-card:before{content:"";background:var(--gradient-primary);opacity:0;transition:opacity var(--transition-normal);position:absolute;inset:0}.genre-card:hover{border-color:var(--primary);box-shadow:0 10px 30px var(--primary-glow);transform:translateY(-4px)}.genre-card:hover:before{opacity:.1}.genre-name{font-size:var(--font-size-lg);color:var(--text-primary);margin-bottom:var(--space-xs);z-index:1;font-weight:700;position:relative}.genre-count{font-size:var(--font-size-xs);color:var(--text-muted);z-index:1;position:relative}.back-btn{align-items:center;gap:var(--space-sm);margin-bottom:var(--space-xl);padding:var(--space-sm)var(--space-lg);background:var(--bg-card);color:var(--text-secondary);border-radius:var(--radius-md);font-size:var(--font-size-sm);transition:all var(--transition-fast);font-weight:500;display:inline-flex}.back-btn:hover{background:var(--primary);color:#fff}@media (max-width:768px){.genre-grid{grid-template-columns:repeat(2,1fr)}.genre-card{padding:var(--space-lg)}.genre-name{font-size:var(--font-size-base)}}@media (max-width:480px){.genre-grid{gap:var(--space-sm);grid-template-columns:repeat(2,1fr)}.genre-card{padding:var(--space-md)}}