/**



 * assets/css/music-mixer.css



 * Music Mixer — Add Music modal styling for Axium Studio.



 * Uses global --axm-* theme tokens (studio-theme.css). Light defaults



 * remain readable; dark mode inherits html[data-bs-theme="dark"].



 */







/* ============================================================



 * MODAL SHELL



 * ============================================================ */



#addMusicModal .modal-content {



  border: 1px solid var(--axm-border, #dee2e6);



  border-radius: 12px;



  overflow: hidden;



  background: var(--axm-modal-bg, #ffffff);



  color: var(--axm-text, #212529);



  box-shadow: var(--axm-shadow, 0 25px 50px rgba(0, 0, 0, 0.2));



}







#addMusicModal .modal-header {



  background: var(--axm-surface-2, #f8f9fa);



  color: var(--axm-text, #212529);



  padding: 14px 20px;



  border-bottom: 1px solid var(--axm-border, #dee2e6);



}

html[data-theme="light"] #addMusicModal .modal-header,
html[data-bs-theme="light"] #addMusicModal .modal-header {
  background: #f8f9fa !important;
  color: #212529 !important;
  border-bottom: 1px solid #dee2e6 !important;
}

html[data-theme="light"] #addMusicModal .modal-title,
html[data-bs-theme="light"] #addMusicModal .modal-title,
html[data-theme="light"] #addMusicModal .modal-title .fa-music,
html[data-bs-theme="light"] #addMusicModal .modal-title .fa-music {
  color: #212529 !important;
}

html[data-theme="light"] #addMusicModal .btn-close,
html[data-bs-theme="light"] #addMusicModal .btn-close {
  filter: none !important;
  opacity: 0.7;
}







#addMusicModal .btn-close {



  opacity: 0.7;



}







#addMusicModal .btn-close:hover {



  opacity: 1;



}







#addMusicModal .modal-title {



  font-size: 1.05rem;



  font-weight: 600;



  display: flex;



  align-items: center;



  gap: 10px;



  color: inherit;



  margin: 0;



}







#addMusicModal .music-track-count {



  font-size: 12px;



  font-weight: 500;



  color: var(--axm-text-muted, #6b7280);



}







#addMusicModal .modal-body {



  display: flex;



  flex-direction: column;



  padding: 18px 20px;



  max-height: 70vh;



  overflow-y: auto;



  background: var(--axm-modal-bg, #ffffff);



  color: var(--axm-text, #212529);



}







#addMusicModal .modal-body::-webkit-scrollbar {



  width: 6px;



}







#addMusicModal .modal-body::-webkit-scrollbar-track {



  background: transparent;



}







#addMusicModal .modal-body::-webkit-scrollbar-thumb {



  background: var(--axm-scrollbar, #d1d5db);



  border-radius: 3px;



}







#addMusicModal .modal-body::-webkit-scrollbar-thumb:hover {



  background: var(--axm-text-muted, #9ca3af);



}







/* ============================================================



 * VOICE SELECTOR



 * ============================================================ */



#addMusicModal .voice-selector-row {



  display: flex;



  align-items: center;



  gap: 12px;



  margin-bottom: 16px;



  flex-shrink: 0;



  padding: 12px 14px;



  background: var(--axm-surface-2, #f8fafc);



  border: 1px solid var(--axm-border, #e5e7eb);



  border-radius: 10px;



}







#addMusicModal .voice-selector-row > label {



  font-size: 12px;



  font-weight: 700;



  color: var(--axm-text-muted, #6b7280);



  text-transform: uppercase;



  letter-spacing: 0.4px;



  white-space: nowrap;



  margin: 0;



}







#addMusicModal .voice-selector-row > label i {



  color: var(--axm-accent, #0d6efd);



}







#addMusicModal #musicMixerVoiceSelect {



  flex: 1;



  max-width: 320px;



  border-radius: 6px;



  font-size: 13px;



  background-color: var(--axm-input-bg, #ffffff);



  border-color: var(--axm-input-border, #d1d5db);



  color: var(--axm-text, #212529);



}







#addMusicModal .voice-selector-hint {



  font-size: 11px;



  color: var(--axm-text-muted, #64748b);



  white-space: nowrap;



}

html[data-theme="light"] #addMusicModal .voice-selector-hint,
html[data-bs-theme="light"] #addMusicModal .voice-selector-hint {
  color: #475569 !important;
}







/* ============================================================



 * CATEGORY PILLS



 * ============================================================ */



#addMusicModal .category-scroll-wrapper {



  display: flex;



  align-items: center;



  gap: 6px;



  margin-bottom: 16px;



  flex-shrink: 0;



}







.music-category-pills-scroll {



  overflow-x: auto;



  white-space: nowrap;



  scroll-behavior: smooth;



  -webkit-overflow-scrolling: touch;



  scrollbar-width: none;



  flex: 1;



}







.music-category-pills-scroll::-webkit-scrollbar {



  display: none;



}







.music-category-pills {



  gap: 8px;



}







.scroll-arrow {



  flex-shrink: 0;



  width: 30px;



  height: 30px;



  border-radius: 50%;



  border: 1px solid var(--axm-border, #d1d5db);



  background: var(--axm-surface, #fff);



  color: var(--axm-text-muted, #6b7280);



  cursor: pointer;



  display: flex;



  align-items: center;



  justify-content: center;



  font-size: 12px;



  transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;



  opacity: 0.45;



}







.scroll-arrow:hover {



  background: var(--axm-surface-2, #f3f4f6);



  color: var(--axm-text, #374151);



  opacity: 1;



}







.music-category-pill {



  display: inline-flex;



  align-items: center;



  justify-content: center;



  padding: 7px 14px;



  border-radius: 999px;



  font-size: 12.5px;



  font-weight: 600;



  cursor: pointer;



  user-select: none;



  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;



  background-color: var(--axm-surface-2, #f0f0f5);



  color: var(--axm-text, #555);



  border: 1px solid var(--axm-border, transparent);



}







.music-category-pill:hover {



  background-color: var(--axm-surface-3, #e2e2ea);



  border-color: var(--axm-border-strong, #ced4da);



}







.music-category-pill.is-active {



  background-color: #2b275a;



  border-color: #2b275a;



  color: #ffffff;



  opacity: 1;



  box-shadow: 0 2px 8px rgba(43, 39, 90, 0.28);



}







.recommended-filter-pill {



  background-color: #4caf50 !important;



  color: #ffffff !important;



  border: 1px solid #43a047 !important;



  font-weight: 600 !important;



  margin-right: 4px;



  opacity: 0.72;



  box-shadow: none;



}







.recommended-filter-pill:hover {



  background-color: #45a049 !important;



  opacity: 1;



}







.recommended-filter-pill.is-active {



  opacity: 1 !important;



  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.35);



}







/* ============================================================



 * TRACK ROWS



 * ============================================================ */



#addMusicModal .music-tracks-list {



  flex: 1;



  overflow-y: auto;



  min-height: 200px;



}







.music-tracks-list::-webkit-scrollbar {



  width: 5px;



}







.music-tracks-list::-webkit-scrollbar-track {



  background: transparent;



}







.music-tracks-list::-webkit-scrollbar-thumb {



  background: var(--axm-scrollbar, #d1d5db);



  border-radius: 3px;



}







.music-track-row {



  display: flex;



  align-items: center;



  gap: 12px;



  padding: 12px 14px;



  border: 1px solid var(--axm-border, #e5e7eb);



  border-radius: 10px;



  margin-bottom: 8px;



  background: var(--axm-surface, #ffffff);



  color: var(--axm-text, #212529);



  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;



  position: relative;



  cursor: pointer;



}







.music-track-row:hover {



  background: var(--axm-surface-2, #f9fafb);



  border-color: var(--axm-border-strong, #d1d5db);



}







.music-track-row[data-track-selected="true"],



.music-track-row.is-selected {



  border-color: #4caf50 !important;



  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.22);



  background: rgba(76, 175, 80, 0.08);



}







[data-track-id]:has(.track-recommended-badge),



.music-track-row:has(.track-recommended-badge) {



  background-color: rgba(76, 175, 80, 0.07);



  border-left: 3px solid #4caf50;



}







.music-track-row.is-playing {



  animation: pulse-play 1s infinite;



  background-color: rgba(76, 175, 80, 0.1) !important;



  border-color: #4caf50 !important;



}







@keyframes pulse-play {



  0%, 100% { opacity: 1; }



  50% { opacity: 0.72; }



}







.music-track-play-btn {



  width: 36px;



  height: 36px;



  border-radius: 50%;



  display: flex;



  align-items: center;



  justify-content: center;



  border: 1.5px solid var(--axm-border, #d1d5db) !important;



  background: var(--axm-surface, #fff) !important;



  color: var(--axm-text-muted, #5a54a4);



  cursor: pointer;



  flex-shrink: 0;



  font-size: 13px;



  padding: 0;



}







.music-track-play-btn i {



  color: #5a54a4;



}







.music-track-play-btn.is-playing {



  border-color: #2b275a !important;



  background: rgba(43, 39, 90, 0.12) !important;



}







.music-track-play-btn.is-playing i {



  color: #2b275a;



}







.music-track-info {



  flex: 1;



  min-width: 0;



  padding-right: 96px;



}







.music-track-title {



  font-weight: 600;



  font-size: 14px;



  color: var(--axm-text, #111827);



  white-space: nowrap;



  overflow: hidden;



  text-overflow: ellipsis;



}







.music-track-subtitle {



  font-size: 11px;



  color: var(--axm-text-muted, #6b7280);



  margin-top: 2px;



}







.music-track-meta {



  margin-top: 4px;



}







.music-track-mood-chip,



.music-track-energy-chip,



.music-track-density-chip {



  display: inline-block;



  font-size: 11px;



  font-weight: 600;



  padding: 2px 8px;



  border-radius: 10px;



  margin-right: 4px;



  margin-top: 2px;



}







.music-track-mood-chip {



  background: #eef0ff;



  color: #5a54a4;



}







.music-track-energy-chip {



  background: #e8f5e9;



  color: #2e7d32;



}







.music-track-density-chip {



  background: #fef3e2;



  color: #b45309;



}







.track-recommended-badge {



  position: absolute;



  top: 12px;



  right: 12px;



  z-index: 10;



}







.track-recommended-badge span {



  background-color: #4caf50;



  color: white;



  padding: 4px 12px;



  border-radius: 12px;



  font-size: 11px;



  font-weight: 600;



  display: inline-flex;



  align-items: center;



  gap: 4px;



  white-space: nowrap;



  box-shadow: 0 2px 6px rgba(76, 175, 80, 0.35);



}







.music-track-selected-tag {



  color: #4caf50;



  font-size: 11px;



  font-weight: 700;



  margin-left: 6px;



}







.music-tracks-empty {



  text-align: center;



  padding: 40px 20px;



  color: var(--axm-text-muted, #9ca3af);



}







.music-tracks-empty-title {



  font-size: 14px;



  font-weight: 600;



  margin-bottom: 4px;



  color: var(--axm-text, #374151);



}







.music-tracks-empty-hint {



  font-size: 12px;



  margin: 0;



  color: var(--axm-text-muted, #9ca3af);



}







/* ============================================================



 * MIX CONTROLS + SUMMARY



 * ============================================================ */



#addMusicModal .mix-controls-section {



  flex-shrink: 0;



  margin-top: 12px;



}







#addMusicModal .music-mix-controls {



  padding: 12px 14px;



  background: var(--axm-surface-2, #f8fafc);



  border: 1px solid var(--axm-border, #e5e7eb);



  border-radius: 10px;



}







.mix-control {



  display: flex;



  flex-direction: column;



  gap: 4px;



  flex: 1 1 160px;



  min-width: 140px;



  max-width: 280px;



}



.mix-control input[type="range"] {



  width: 100%;



  accent-color: #2b275a;



}



#addMusicModal #musicSlider {



  accent-color: #4CAF50;



}







.mix-control label {



  font-size: 11px;



  font-weight: 700;



  color: var(--axm-text-muted, #6b7280);



  text-transform: uppercase;



  letter-spacing: 0.4px;



}







#addMusicModal #voicePercent {



  color: #2b275a;



}







#addMusicModal #musicPercent {



  color: #4caf50;



}







.mix-control input[type="range"],



.music-blend-slider {



  width: 280px;



  height: 6px;



  cursor: pointer;



  accent-color: #2b275a;



}







#addMusicModal #musicSlider {



  accent-color: #4caf50;



}







#addMusicModal .music-selected-count {



  font-size: 12px;



  font-weight: 600;



  color: var(--axm-text-muted, #6b7280);



  white-space: nowrap;



}







.selected-tracks-summary {



  padding: 10px 14px;



  background: var(--axm-surface-2, #f9fafb);



  border: 1px solid var(--axm-border, #e5e7eb);



  border-radius: 10px;



  margin-bottom: 12px;



}







.selected-tracks-summary .summary-row {



  display: flex;



  align-items: center;



  gap: 8px;



}







.selected-tracks-summary .summary-row + .summary-row {



  margin-top: 6px;



}







.selected-tracks-summary .summary-label {



  font-size: 12px;



  font-weight: 700;



  color: var(--axm-text-muted, #6b7280);



  min-width: 80px;



}







.selected-tracks-summary .summary-value {



  font-size: 13px;



  font-weight: 600;



  color: var(--axm-text, #111827);



}







/* ============================================================



 * ACTION BUTTONS



 * ============================================================ */



#addMusicModal .music-modal-actions {



  display: flex;



  align-items: center;



  justify-content: space-between;



  flex-wrap: wrap;



  gap: 8px;



}







.music-preview-mix-btn {



  border: 1.5px solid #2b275a !important;



  color: #2b275a !important;



  background: transparent !important;



  font-weight: 600;



  font-size: 12px;



  border-radius: 6px;



  padding: 6px 14px;



  transition: all 0.2s ease;



}







.music-preview-mix-btn:hover:not(:disabled) {



  background: #2b275a !important;



  color: #ffffff !important;



}







.music-preview-mix-btn:disabled {



  opacity: 0.45;



  cursor: not-allowed;



  border-color: var(--axm-border, #ced4da) !important;



  color: var(--axm-text-muted, #9aa3af) !important;



  background: transparent !important;



}







.music-apply-btn {



  background: #4caf50 !important;



  color: #fff !important;



  border: none !important;



  font-weight: 600;



  font-size: 13px;



  border-radius: 6px;



  padding: 8px 20px;



  transition: all 0.2s ease;



}







.music-apply-btn:hover:not(:disabled) {



  background: #45a049 !important;



  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.35);



}







.music-apply-btn:disabled {



  opacity: 0.5;



  cursor: not-allowed;



  box-shadow: none;



}







#pausePreviewBtn {



  border: 1.5px solid #f59e0b !important;



  color: #f59e0b !important;



  background: transparent !important;



  font-weight: 600;



  font-size: 12px;



  border-radius: 6px;



  padding: 6px 14px;



}







#pausePreviewBtn:hover {



  background: #f59e0b !important;



  color: #ffffff !important;



}







#clearSelectionBtn {



  border: 1.5px solid #ef4444 !important;



  color: #ef4444 !important;



  background: transparent !important;



  font-weight: 600;



  font-size: 12px;



  border-radius: 6px;



  padding: 6px 14px;



}







#clearSelectionBtn:hover {



  background: #ef4444 !important;



  color: #ffffff !important;



}







#addMusicModal .music-cancel-btn {



  font-weight: 600;



  font-size: 13px;



  background: var(--axm-surface-2, #f8f9fa);



  border: 1px solid var(--axm-border, #dee2e6);



  color: var(--axm-text, #212529);



}







#addMusicModal .music-cancel-btn:hover {



  background: var(--axm-surface-3, #eef1f4);



  border-color: var(--axm-border-strong, #ced4da);



  color: var(--axm-text, #212529);



}







/* ============================================================



 * HISTORY MUSIC INFO (Audio Results card)



 * ============================================================ */



.history-music-info {



  margin-top: 6px;



  padding: 6px 10px;



  font-size: 12px;



  color: var(--axm-text-muted, #666);



  background: rgba(76, 175, 80, 0.08);



  border-left: 3px solid #4caf50;



  border-radius: 0 6px 6px 0;



  display: flex;



  align-items: center;



  flex-wrap: wrap;



  gap: 4px;



}







.history-music-info .music-label {



  font-weight: 600;



  color: #2d6a30;



  white-space: nowrap;



}







.history-music-info .music-value {



  color: var(--axm-text-muted, #555);



  font-weight: 500;



  word-break: break-word;



}







/* ============================================================



 * DARK MODE — match studio shell



 * ============================================================ */



html[data-bs-theme="dark"] #addMusicModal .modal-content,



html[data-theme="dark"] #addMusicModal .modal-content {



  background: var(--axm-modal-bg) !important;



  border-color: var(--axm-border) !important;



  color: var(--axm-text) !important;



  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);



}







html[data-bs-theme="dark"] #addMusicModal .modal-header,



html[data-theme="dark"] #addMusicModal .modal-header {



  background: var(--axm-surface-2) !important;



  border-bottom-color: var(--axm-border) !important;



  color: var(--axm-text) !important;



}







html[data-bs-theme="dark"] #addMusicModal .btn-close,



html[data-theme="dark"] #addMusicModal .btn-close {



  filter: invert(1) grayscale(100%) brightness(200%);



}







html[data-bs-theme="dark"] #addMusicModal .modal-title,



html[data-theme="dark"] #addMusicModal .modal-title {



  color: var(--axm-text) !important;



}







html[data-bs-theme="dark"] #addMusicModal .music-track-count,



html[data-theme="dark"] #addMusicModal .music-track-count {



  color: var(--axm-text-muted) !important;



}







html[data-bs-theme="dark"] #addMusicModal .modal-body,



html[data-theme="dark"] #addMusicModal .modal-body {



  background: var(--axm-modal-bg) !important;



  color: var(--axm-text) !important;



}







html[data-bs-theme="dark"] #addMusicModal .voice-selector-row,



html[data-theme="dark"] #addMusicModal .voice-selector-row,



html[data-bs-theme="dark"] #addMusicModal .music-mix-controls,



html[data-theme="dark"] #addMusicModal .music-mix-controls,



html[data-bs-theme="dark"] #addMusicModal .selected-tracks-summary,



html[data-theme="dark"] #addMusicModal .selected-tracks-summary {



  background: var(--axm-surface-2) !important;



  border-color: var(--axm-border) !important;



}







html[data-bs-theme="dark"] #addMusicModal #musicMixerVoiceSelect,



html[data-theme="dark"] #addMusicModal #musicMixerVoiceSelect {



  background-color: var(--axm-input-bg) !important;



  border-color: var(--axm-input-border) !important;



  color: var(--axm-text) !important;



}







html[data-bs-theme="dark"] .music-category-pill:not(.recommended-filter-pill),



html[data-theme="dark"] .music-category-pill:not(.recommended-filter-pill) {



  background-color: var(--axm-surface-3) !important;



  color: var(--axm-text) !important;



  border-color: var(--axm-border) !important;



}







html[data-bs-theme="dark"] .music-category-pill:not(.recommended-filter-pill):hover,



html[data-theme="dark"] .music-category-pill:not(.recommended-filter-pill):hover {



  background-color: var(--axm-surface-2) !important;



  border-color: var(--axm-border-strong) !important;



}







html[data-bs-theme="dark"] .music-category-pill.is-active:not(.recommended-filter-pill),



html[data-theme="dark"] .music-category-pill.is-active:not(.recommended-filter-pill) {



  background-color: #3d3a6e !important;



  border-color: #6ea8fe !important;



  color: #ffffff !important;



  box-shadow: 0 0 0 1px rgba(110, 168, 254, 0.25);



}







html[data-bs-theme="dark"] .scroll-arrow,



html[data-theme="dark"] .scroll-arrow {



  background: var(--axm-surface-2) !important;



  border-color: var(--axm-border) !important;



  color: var(--axm-text-muted) !important;



}







html[data-bs-theme="dark"] .music-track-row,



html[data-theme="dark"] .music-track-row {



  background: var(--axm-surface) !important;



  border-color: var(--axm-border) !important;



  color: var(--axm-text) !important;



}







html[data-bs-theme="dark"] .music-track-row:hover,



html[data-theme="dark"] .music-track-row:hover {



  background: var(--axm-surface-2) !important;



  border-color: var(--axm-border-strong) !important;



}







html[data-bs-theme="dark"] .music-track-row[data-track-selected="true"],



html[data-theme="dark"] .music-track-row[data-track-selected="true"],



html[data-bs-theme="dark"] .music-track-row.is-selected,



html[data-theme="dark"] .music-track-row.is-selected {



  background: rgba(76, 175, 80, 0.12) !important;



  border-color: #4caf50 !important;



}







html[data-bs-theme="dark"] .music-track-title,



html[data-theme="dark"] .music-track-title,



html[data-bs-theme="dark"] .selected-tracks-summary .summary-value,



html[data-theme="dark"] .selected-tracks-summary .summary-value {



  color: var(--axm-text) !important;



}







html[data-bs-theme="dark"] .music-track-subtitle,



html[data-theme="dark"] .music-track-subtitle,



html[data-bs-theme="dark"] .selected-tracks-summary .summary-label,



html[data-theme="dark"] .selected-tracks-summary .summary-label,



html[data-bs-theme="dark"] .mix-control label,



html[data-theme="dark"] .mix-control label {



  color: var(--axm-text-muted) !important;



}







html[data-bs-theme="dark"] #addMusicModal #voicePercent,



html[data-theme="dark"] #addMusicModal #voicePercent {



  color: #a5b4fc !important;



}







html[data-bs-theme="dark"] .music-track-play-btn,



html[data-theme="dark"] .music-track-play-btn {



  background: var(--axm-surface-2) !important;



  border-color: var(--axm-border) !important;



}







html[data-bs-theme="dark"] .music-track-play-btn i,



html[data-theme="dark"] .music-track-play-btn i {



  color: #a5b4fc;



}







html[data-bs-theme="dark"] .music-track-play-btn.is-playing,



html[data-theme="dark"] .music-track-play-btn.is-playing {



  background: rgba(110, 168, 254, 0.15) !important;



  border-color: #6ea8fe !important;



}







html[data-bs-theme="dark"] .music-track-play-btn.is-playing i,



html[data-theme="dark"] .music-track-play-btn.is-playing i {



  color: #6ea8fe;



}







html[data-bs-theme="dark"] .music-track-mood-chip,



html[data-theme="dark"] .music-track-mood-chip {



  background: rgba(99, 102, 241, 0.22);



  color: #c7d2fe;



}







html[data-bs-theme="dark"] .music-track-energy-chip,



html[data-theme="dark"] .music-track-energy-chip {



  background: rgba(76, 175, 80, 0.18);



  color: #86efac;



}







html[data-bs-theme="dark"] .music-track-density-chip,



html[data-theme="dark"] .music-track-density-chip {



  background: rgba(245, 158, 11, 0.18);



  color: #fcd34d;



}







html[data-bs-theme="dark"] .music-preview-mix-btn:not(:disabled),



html[data-theme="dark"] .music-preview-mix-btn:not(:disabled) {



  border-color: #6ea8fe !important;



  color: #6ea8fe !important;



}







html[data-bs-theme="dark"] .music-preview-mix-btn:hover:not(:disabled),



html[data-theme="dark"] .music-preview-mix-btn:hover:not(:disabled) {



  background: #6ea8fe !important;



  color: #0f1419 !important;



}







html[data-bs-theme="dark"] #addMusicModal .music-cancel-btn,



html[data-theme="dark"] #addMusicModal .music-cancel-btn {



  background: var(--axm-surface-2) !important;



  border-color: var(--axm-border) !important;



  color: var(--axm-text) !important;



}







html[data-bs-theme="dark"] .history-music-info,



html[data-theme="dark"] .history-music-info {



  background: rgba(76, 175, 80, 0.12);



  color: var(--axm-text-muted);



}







html[data-bs-theme="dark"] .history-music-info .music-label,



html[data-theme="dark"] .history-music-info .music-label {



  color: #86efac;



}







html[data-bs-theme="dark"] .history-music-info .music-value,



html[data-theme="dark"] .history-music-info .music-value {



  color: var(--axm-text);



}







/* ============================================================



 * RESPONSIVE



 * ============================================================ */



@media (max-width: 768px) {



  #addMusicModal .music-mix-controls {



    flex-direction: column;



    align-items: flex-start !important;



  }







  #addMusicModal .mix-control input[type="range"] {



    width: min(100%, 220px);



  }







  #addMusicModal .modal-body {



    padding: 12px 14px !important;



  }







  #addMusicModal .voice-selector-row {



    flex-wrap: wrap;



  }







  #addMusicModal #musicMixerVoiceSelect {



    max-width: 100%;



  }







  .music-track-info {



    padding-right: 0;



  }







  .track-recommended-badge {



    position: static;



    margin-left: auto;



    align-self: flex-start;



  }







  .selected-tracks-summary .summary-row {



    flex-wrap: wrap;



  }







  .selected-tracks-summary .summary-label {



    min-width: 60px;



    font-size: 11px;



  }







  .selected-tracks-summary .summary-value {



    font-size: 12px;



  }



}