.audio_section {padding: 40px 0;}.audio_player_container {display: flex;gap: 30px;}.audio_list {height: 540px;flex: 1;max-width: 400px;background: #3f3854;border-radius: 10px;padding: 20px;overflow-y: auto;}.two-lines-ellipsis {display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}.audio_list h3 {margin-bottom: 20px;color: #fff;}.audio_list ul {list-style: none;padding: 0;margin: 0;}.audio_list li {margin-bottom: 10px;border-radius: 8px;padding: 15px;border-bottom: 0;cursor: pointer;display: flex;justify-content: space-between;align-items: center;transition: background .3s;}.audio_list li:hover {background: #e9e9e9;}.audio_list li:hover .track_details h4 {color: #3f3854;font-weight: bold;}.audio_list li:hover .track_details p {color: #3f3854;}.audio_list li:hover .play_icon {color: #3f3854;}.audio_list li.active {background: #e0e0e0;}.audio_list li.active .track_details h4 {color: #3f3854;font-weight: bold;}.audio_list li.active .track_details p {color: #3f3854;}.audio_list li.active .play_icon {color: #3f3854;}.track_info {display: flex;align-items: center;gap: 15px;}.track_cover {border-radius: 5px;overflow: hidden;}.track_details h4 {color: #fff;margin: 0;font-size: 16px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 220px;}.audio_list .play_icon {color: #fff;}.track_details p {margin: 5px 0 0;font-size: 14px;color: #e3e3e3;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 220px;}.play_icon {font-size: 20px;}.audio_player {height: 540px;flex: 2;background: #3f3854;border-radius: 10px;padding: 30px;display: flex;flex-direction: column;}.player_header {margin-bottom: 20px;}.player_header h3 {margin: 0;color: #fff;}.track_display {display: flex;align-items: center;gap: 30px;margin-bottom: 30px;}.track_display .track_cover {border-radius: 10px;overflow: hidden;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);height: 120px;width: 120px;min-width: 120px;}.track_display .track_cover img{width: 120px;height: 120px;border-radius: 50%;padding: 5px;border: 2px dotted #fff;}.track_display .track_info h2 {color: #fff;margin: 0;font-size: 24px;}.track_display .track_info p {margin: 5px 0 0;font-size: 16px;color: #c8c7cc;}.progress_container {display: flex;align-items: center;gap: 15px;margin: 20px 0;}.progress_bar {flex: 1;height: 6px;-webkit-appearance: none;appearance: none;background: #ddd;border-radius: 3px;outline: none;}.progress_bar::-webkit-slider-thumb {-webkit-appearance: none;appearance: none;width: 15px;height: 15px;border-radius: 50%;background: #333;cursor: pointer;}.time {font-size: 14px;color: #fff;min-width: 40px;text-align: center;}.controls {display: flex;justify-content: center;align-items: center;gap: 20px;margin: 30px 0;}.control_btn {background: none;border: none;font-size: 24px;cursor: pointer;padding: 10px;border-radius: 50%;transition: background 0.3s;color: #fff;}.play_pause {background: #fff;color: #333;width: 60px;height: 60px;display: flex;align-items: center;justify-content: center;}.play_pause:hover {background: #fff;}.secondary_controls {display: flex;justify-content: space-between;align-items: center;margin-top: 30px;padding-top: 20px;border-top: 1px solid #ddd;color: #fff;}.volume_control {display: flex;align-items: center;gap: 10px;}.volume_bar {width: 100px;height: 4px;-webkit-appearance: none;appearance: none;background: #ddd;border-radius: 2px;outline: none;}.volume_bar::-webkit-slider-thumb {-webkit-appearance: none;appearance: none;width: 12px;height: 12px;border-radius: 50%;background: #333;cursor: pointer;}.playback_speed {display: flex;align-items: center;gap: 5px;}.playback_speed button {background: #ddd;border: none;padding: 5px 10px;border-radius: 4px;cursor: pointer;font-size: 14px;}.playback_speed button.active {background: #333;color: white;}.share_container {position: relative;}.share_btn {background: 0;color: #fff;border: none;padding: 2px 5px;border-radius: 4px;cursor: pointer;font-size: 18px;}.share_options {position: absolute;bottom: 100%;right: 0;background: white;border: 1px solid #ddd;border-radius: 5px;padding: 10px;display: flex;flex-direction: column;gap: 5px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);z-index: 10;}.share_options button {color: #3f3854;background: none;border: none;padding: 5px 5px;text-align: left;cursor: pointer;white-space: nowrap;}.share_options button:hover {background: #f5f5f5;}@media (max-width: 768px) {.audio_player_container {flex-direction: column;}.audio_list {max-width: 100%;}.track_display {flex-direction: column;text-align: center;}.secondary_controls {gap: 15px;align-items: flex-start;}}.progress_bar::-webkit-slider-thumb {-webkit-appearance: none;appearance: none;width: 16px;height: 16px;border-radius: 50%;background: #3f3854;cursor: pointer;border: 2px solid white;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);transition: transform 0.1s;}.volume_bar::-webkit-slider-thumb {-webkit-appearance: none;appearance: none;width: 16px;height: 16px;border-radius: 50%;background: #3f3854;cursor: pointer;border: 2px solid white;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);transition: transform 0.1s;}.playback_speed_container {position: relative;display: inline-block;}.active_speed {padding: 4px;background: transparent;border-radius: 4px;cursor: pointer;font-weight: 500;border: 1px dotted #ddd;min-width: 50px;text-align: center;transition: all 0.2s;}.active_speed:hover {background: none;}.speed_options_popup {position: absolute;bottom: 100%;left: 0;background: white;border: 0;border-radius: 4px;padding: 0;z-index: 10;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);display: flex;flex-direction: column;gap: 2px;}.speed_options_popup button {padding: 5px 9px;border: none;background: none;cursor: pointer;border-radius: 3px;text-align: center;font-size: 14px;font-weight: 600;color: #534c67;}.speed_options_popup button:hover {background: #f0f0f0;}.track_cover image {height: 130px;width: 130px;object-fit: cover;}.w33 {width: 33.33%;}.track_info_inner h2, .track_info_inner p {color: #fff;}.go_music{margin-left: 0;color: #fff;}.audio_list li.active .track_details .go_music{color: #3f3854;}.audio_list li:hover .track_details .go_music{color: #3f3854;}