/* Dark Theme Fixes - Custom styles for dark mode elements */

/* Fix for octave range control tracks in dark mode */
body.dark-theme .range-slider-container::after,
body.dark-theme .music-generator-controls-panel .range-slider-container::after {
    content: none !important; /* Completely remove the pseudo-element */
    display: none !important;
    height: 0 !important;
    border: none !important;
    background: none !important;
}

body.dark-theme .range-slider-container::before {
    background: none !important;
}

/* Gray background for file upload containers */
body.dark-theme .file-upload {
    background-color: #333333 !important; /* Gray background matching panel-bg */
    border-radius: 5px !important;
    padding: 8px 8px 16px 8px !important; /* Reduced top padding from 16px to 8px, kept bottom padding */
    margin-bottom: 15px !important; /* Increased from 10px to 15px to create more space */
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: left !important; /* Ensure left alignment */
}

body.dark-theme .file-upload label {
    margin-bottom: 8px !important; /* Increased from 6px to 8px */
    display: block !important;
    font-weight: bold !important;
    color: #e0e0e0 !important;
    text-align: left !important; /* Ensure left alignment */
}

body.dark-theme .sequence-display-section {
    padding-top: 9px !important; /* Increased from 4px to 9px (added 5px) */
    margin-top: 0 !important; /* Force margin to 0 to remove space */
}

/* Add an additional selector to target the margin specifically */
body.dark-theme .melody-column .sequence-display-section,
body.dark-theme .rhythm-column .sequence-display-section {
    margin-top: 10px !important; /* Increased from 5px to 10px */
}

/* Add even more specific selectors to force the spacing */
body.dark-theme .melody-column > .sequence-display-section,
body.dark-theme .rhythm-column > .sequence-display-section {
    margin-top: 15px !important; /* Reduced from 20px to 15px (5px less) */
    border-top: none !important; /* Remove the test border we added */
}

/* More specific selectors for file uploads */
body.dark-theme .melody-column > .file-upload,
body.dark-theme .rhythm-column > .file-upload {
    margin-bottom: 15px !important; /* Reduced from 20px to 15px (5px less) */
}

/* Dark theme styling for melody and rhythm sequence displays */
body.dark-theme .melody-column .sequence-display {
    padding: 11px 6px 6px 6px !important; /* Increased top padding from 6px to 11px (added 5px) */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 3px !important;
    background-color: #222222 !important;
}

body.dark-theme .rhythm-column .sequence-display {
    padding: 11px 6px 6px 6px !important; /* Increased top padding from 6px to 11px (added 5px) */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 3px !important;
    background-color: #222222 !important;
}

/* Style the "no file selected" text area */
body.dark-theme input[type="file"] {
    background-color: #444444 !important; /* Slightly lighter gray for the file input */
    color: #cccccc !important;
    border-radius: 3px !important;
    padding: 6px 3px !important; /* Increased vertical padding from 3px to 6px */
    min-height: 24px !important; /* Add minimum height */
    text-align: left !important; /* Ensure left alignment */
    width: 100% !important; /* Make it full width */
    box-sizing: border-box !important;
}

/* Style the file selector button - reduce size and add left margin */
body.dark-theme input[type="file"]::file-selector-button {
    background-color: #555555 !important;
    color: #ffffff !important;
    border: 1px solid #666666 !important;
    border-radius: 3px !important;
    margin-right: 8px !important; /* Space after the button */
    margin-left: 8px !important; /* One character space before the button */
    text-align: center !important;
    padding: 3px 6px !important; /* Further reduced from 4px 8px to make button smaller */
    font-size: 0.85em !important; /* Further reduced from 0.9em */
    line-height: 1.2 !important; /* Tighter line height */
    height: auto !important; /* Let height adjust based on content */
}

/* Fix header layout in dark mode to properly show About and Instructions */
body.dark-theme header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

body.dark-theme .header-nav {
    display: flex !important;
    gap: 20px !important;
    margin: 0 20px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body.dark-theme .header-link {
    color: #82b1ff !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    font-size: 1rem !important;
    padding: 5px 10px !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body.dark-theme .header-link:hover {
    background-color: rgba(130, 177, 255, 0.1) !important;
    color: #b6e3ff !important;
}

/* Fix title and logo styling in dark mode */
body.dark-theme .site-logo {
    height: 76px !important; /* Force exact match with light mode */
    width: auto !important;
    max-height: none !important; /* Override any max-height restrictions */
}

body.dark-theme .title-text {
    gap: 0 !important; /* Force no gap */
}

body.dark-theme h1 {
    margin: 0 !important; /* Remove all margins */
}

body.dark-theme .chromatone-title {
    margin: 0 !important; /* Remove all margins */
    padding: 0 !important; /* Remove all padding */
    line-height: 1 !important; /* Tighter line height */
}

/* Color the upload melody and rhythm labels */
body.dark-theme .melody-column .file-upload label {
    color: var(--dark-melody-color) !important; /* Green for melody */
}

body.dark-theme .rhythm-column .file-upload label {
    color: var(--dark-rhythm-color) !important; /* Purple for rhythm */
}

/* Fix spacing issue with the Show MIDI Import button in dark mode */
body.dark-theme .toggle-midi-import {
    margin-bottom: 0 !important; /* Remove bottom margin in dark mode */
    padding-bottom: 0 !important; /* Remove bottom padding */
}

/* Patch title field styling for dark theme */
body.dark-theme .patch-title-container {
    margin: 5px 0 !important;
    text-align: center !important;
}

body.dark-theme .patch-title-container input[type="text"] {
    width: 350px !important;
    padding: 12px !important;
    border: 2px solid #4a90e2 !important;
    border-radius: 8px !important;
    font-size: 18px !important;
    font-weight: bold !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    text-align: center !important;
    background: #2a2a2a !important;
    color: #ffffff !important;
}

body.dark-theme .patch-title-container input[type="text"]:focus {
    outline: none !important;
    border-color: #6ba3e8 !important;
    box-shadow: 0 0 5px rgba(74, 144, 226, 0.5) !important;
}

/* Patch title field styling for light theme */
body:not(.dark-theme) .patch-title-container {
    margin: 5px 0 !important;
    text-align: center !important;
}

body:not(.dark-theme) .patch-title-container input[type="text"] {
    width: 350px !important;
    padding: 12px !important;
    border: 2px solid #4a90e2 !important;
    border-radius: 8px !important;
    font-size: 18px !important;
    font-weight: bold !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    text-align: center !important;
    background: #ffffff !important;
    color: #333333 !important;
}

body:not(.dark-theme) .patch-title-container input[type="text"]:focus {
    outline: none !important;
    border-color: #6ba3e8 !important;
    box-shadow: 0 0 5px rgba(74, 144, 226, 0.5) !important;
}

/* Make sure the first element after the button has proper spacing */
body.dark-theme .midi-import-panel,
body.dark-theme .two-column-layout {
    margin-top: 0 !important; /* Changed from 10px to 0 to remove spacing */
}

/* Make sure modal dialogs are properly displayed in dark mode */
body.dark-theme .modal {
    display: none;
    position: fixed !important;
    z-index: 9999 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.7) !important;
    overflow: auto !important;
}

/* Style the file selector, reverse, and complementary buttons for melody side (green) */
body.dark-theme .melody-column input[type="file"]::file-selector-button {
    background-color: var(--dark-melody-color) !important; /* Green for melody */
    color: #ffffff !important;
    border: 1px solid rgba(76, 175, 80, 0.6) !important; /* Matching border */
    border-radius: 3px !important;
}

/* Add hover styles for the melody file upload button */
body.dark-theme .melody-column input[type="file"]:hover::file-selector-button {
    background-color: rgba(76, 175, 80, 0.8) !important; /* Slightly lighter for hover */
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.5) !important;
}

body.dark-theme .melody-column .transform-toggle-button {
    background-color: var(--dark-melody-color) !important; /* Green for melody */
    color: #ffffff !important;
    border: 1px solid rgba(76, 175, 80, 0.6) !important; /* Matching border */
    transform: none !important; /* Prevent movement */
}

body.dark-theme .melody-column .transform-toggle-button:hover {
    background-color: rgba(76, 175, 80, 0.8) !important; /* Slightly lighter for hover */
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.5) !important;
    transform: none !important; /* Prevent movement */
}

/* Style the file selector, reverse, and complementary buttons for rhythm side (purple) */
body.dark-theme .rhythm-column input[type="file"]::file-selector-button {
    background-color: var(--dark-rhythm-color) !important; /* Purple for rhythm */
    color: #ffffff !important;
    border: 1px solid rgba(186, 104, 200, 0.6) !important; /* Matching border */
    border-radius: 3px !important;
}

body.dark-theme .rhythm-column .transform-toggle-button {
    background-color: var(--dark-rhythm-color) !important; /* Purple for rhythm */
    color: #ffffff !important;
    border: 1px solid rgba(186, 104, 200, 0.6) !important; /* Matching border */
    transform: none !important; /* Prevent movement */
}

body.dark-theme .rhythm-column .transform-toggle-button:hover {
    background-color: rgba(186, 104, 200, 0.8) !important; /* Slightly lighter for hover */
    box-shadow: 0 0 5px rgba(186, 104, 200, 0.5) !important;
    transform: none !important; /* Prevent movement */
}

/* Apply the same styles to light mode - Melody side (green) */
body:not(.dark-theme) .melody-column input[type="file"]::file-selector-button {
    background-color: var(--melody-color) !important; /* Green for melody */
    color: #ffffff !important;
    border: 1px solid rgba(46, 125, 50, 0.6) !important; /* Matching border */
    border-radius: 3px !important;
}

/* Add hover styles for light mode melody file upload button */
body:not(.dark-theme) .melody-column input[type="file"]:hover::file-selector-button {
    background-color: rgba(46, 125, 50, 0.8) !important; /* Slightly lighter for hover */
    box-shadow: 0 0 5px rgba(46, 125, 50, 0.5) !important;
}

body:not(.dark-theme) .melody-column .transform-toggle-button {
    background-color: var(--melody-color) !important; /* Green for melody */
    color: #ffffff !important;
    border: 1px solid rgba(46, 125, 50, 0.6) !important; /* Matching border */
    transform: none !important; /* Prevent movement */
}

/* Add hover style for the melody transform button */
body:not(.dark-theme) .melody-column .transform-toggle-button:hover {
    background-color: rgba(46, 125, 50, 0.8) !important; /* Slightly lighter for hover */
    box-shadow: 0 0 5px rgba(46, 125, 50, 0.5) !important;
    transform: none !important; /* Prevent movement */
}

/* Apply the same styles to light mode - Rhythm side (purple) */
body:not(.dark-theme) .rhythm-column input[type="file"]::file-selector-button {
    background-color: var(--rhythm-color) !important; /* Purple for rhythm */
    color: #ffffff !important;
    border: 1px solid rgba(106, 27, 154, 0.6) !important; /* Matching border */
    border-radius: 3px !important;
}

body:not(.dark-theme) .rhythm-column .transform-toggle-button {
    background-color: var(--rhythm-color) !important; /* Purple for rhythm */
    color: #ffffff !important;
    border: 1px solid rgba(106, 27, 154, 0.6) !important; /* Matching border */
    transform: none !important; /* Prevent movement */
}

body:not(.dark-theme) .rhythm-column .transform-toggle-button:hover {
    background-color: rgba(106, 27, 154, 0.8) !important; /* Slightly lighter for hover */
    box-shadow: 0 0 5px rgba(106, 27, 154, 0.5) !important;
    transform: none !important; /* Prevent movement */
}

/* Remove transformY from all transform-toggle-buttons to prevent movement */
.transform-toggle-button:hover {
    transform: none !important;
}

/* Override the melody file input button to be green in dark mode - ID specific styling */
body.dark-theme #fastaFile::file-selector-button {
    background-color: var(--dark-melody-color) !important; /* Green for melody */
    color: #ffffff !important;
    border: 1px solid rgba(76, 175, 80, 0.6) !important; /* Matching border */
    border-radius: 3px !important;
    padding: 3px 6px !important; /* Further reduced from 4px 8px */
    margin-left: 8px !important; /* Add space before the button */
    font-size: 0.85em !important; /* Further reduced from 0.9em */
    line-height: 1.2 !important; /* Tighter line height */
    height: auto !important; /* Let height adjust based on content */
}

body.dark-theme #fastaFile:hover::file-selector-button {
    background-color: rgba(76, 175, 80, 0.8) !important; /* Slightly lighter for hover */
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.5) !important;
}

/* Override the rhythm file input button to be purple in dark mode - ID specific styling */
body.dark-theme #rhythmFile::file-selector-button {
    background-color: var(--dark-rhythm-color) !important; /* Purple for rhythm */
    color: #ffffff !important;
    border: 1px solid rgba(186, 104, 200, 0.6) !important; /* Matching border */
    border-radius: 3px !important;
    padding: 3px 6px !important; /* Further reduced from 4px 8px */
    margin-left: 8px !important; /* Add space before the button */
    font-size: 0.85em !important; /* Further reduced from 0.9em */
    line-height: 1.2 !important; /* Tighter line height */
    height: auto !important; /* Let height adjust based on content */
}

body.dark-theme #rhythmFile:hover::file-selector-button {
    background-color: rgba(186, 104, 200, 0.8) !important; /* Slightly lighter for hover */
    box-shadow: 0 0 5px rgba(186, 104, 200, 0.5) !important;
}

/* Also add explicit light mode styling by ID to ensure consistency */
body:not(.dark-theme) #fastaFile::file-selector-button {
    background-color: var(--melody-color) !important; /* Green for melody in light mode */
    color: #ffffff !important;
    border: 1px solid rgba(46, 125, 50, 0.6) !important; /* Matching border */
    border-radius: 3px !important;
    padding: 4px 8px !important; /* Reduced from 6px 12px to make button smaller */
    margin-left: 8px !important; /* Reduced to one space before the button */
    font-size: 0.9em !important; /* Slightly smaller font */
}

body:not(.dark-theme) #fastaFile:hover::file-selector-button {
    background-color: rgba(46, 125, 50, 0.8) !important; /* Slightly lighter for hover */
    box-shadow: 0 0 5px rgba(46, 125, 50, 0.5) !important;
}

body:not(.dark-theme) #rhythmFile::file-selector-button {
    background-color: var(--rhythm-color) !important; /* Purple for rhythm in light mode */
    color: #ffffff !important;
    border: 1px solid rgba(106, 27, 154, 0.6) !important; /* Matching border */
    border-radius: 3px !important;
    padding: 4px 8px !important; /* Reduced from 6px 12px to make button smaller */
    margin-left: 8px !important; /* Reduced to one space before the button */
    font-size: 0.9em !important; /* Slightly smaller font */
}

body:not(.dark-theme) #rhythmFile:hover::file-selector-button {
    background-color: rgba(106, 27, 154, 0.8) !important; /* Slightly lighter for hover */
    box-shadow: 0 0 5px rgba(106, 27, 154, 0.5) !important;
}

/* Apply same spacing to all file selector buttons in light mode */
body:not(.dark-theme) input[type="file"]::file-selector-button {
    margin-left: 8px !important; /* One character space before the button */
}

/* Additional styles to ensure consistent left alignment in file containers */
body.dark-theme .file-upload > * {
    margin-left: 0 !important; /* Remove any left margin */
    text-align: left !important; /* Ensure left alignment */
}

body.dark-theme .file-upload div,
body.dark-theme .file-upload input,
body.dark-theme .file-upload label {
    justify-content: flex-start !important; /* Left align flex items */
    align-items: flex-start !important; /* Left align flex items */
}

/* Improve spacing around the file input container */
body.dark-theme .file-upload input[type="file"] {
    margin-top: 4px !important; /* Increased from 2px to 4px */
    margin-bottom: 6px !important; /* Increased from 4px to 6px */
    padding-left: 0 !important; /* Remove left padding */
}

/* Specific alignment styles for melody and rhythm file inputs */
body.dark-theme .melody-column .file-upload,
body.dark-theme .rhythm-column .file-upload {
    text-align: left !important;
    padding: 8px 10px 16px 10px !important; /* Reduced top padding from 16px to 8px, kept bottom padding */
}

body.dark-theme #fastaFile,
body.dark-theme #rhythmFile {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    margin-left: 0 !important;
}

/* Make light mode sequence displays match the height of dark mode ones */
body:not(.dark-theme) .melody-column .sequence-display {
    padding: 11px 6px 6px 6px !important; /* Match dark mode padding */
    min-height: 100px !important; /* Ensure minimum height */
}

body:not(.dark-theme) .rhythm-column .sequence-display {
    padding: 11px 6px 6px 6px !important; /* Match dark mode padding */
    min-height: 100px !important; /* Ensure minimum height */
}

/* Add same padding to both light mode sequence display sections */
body:not(.dark-theme) .sequence-display-section {
    padding-top: 9px !important; /* Match dark mode padding */
}

/* Make the music generator controls panel more compact in dark mode */
body.dark-theme .music-generator-controls-panel {
    padding: 5px 8px !important; /* Further reduced from 8px 10px */
    margin-top: -5px !important; /* Small negative margin to align with other panels */
    position: relative !important;
    z-index: 1 !important;
}

body.dark-theme .music-generator-controls-panel h2 {
    margin: 0 0 2px 0 !important; /* Reduced from 0 0 4px 0 */
    font-size: 0.95em !important; /* Reduced from 1em */
    padding-bottom: 1px !important; /* Reduced from 2px */
    border-bottom-width: 1px !important; /* Thinner border */
}

body.dark-theme .music-controls-grid {
    gap: 4px !important; /* Reduced from 6px */
    margin-bottom: 2px !important; /* Reduced from 4px */
}

body.dark-theme .music-generator-controls-panel .control-group {
    padding: 2px !important; /* Reduced from 3px */
}

body.dark-theme .music-generator-controls-panel .effect-group {
    padding: 0 !important;
    margin: 0 !important;
}

/* Compact layout for rhythm and scale dropdowns */
body.dark-theme .music-generator-controls-panel .rhythm-scale-row {
    gap: 6px !important; /* Increased from 5px */
    margin-bottom: 4px !important; /* Increased from 3px */
    margin-top: 10px !important; /* Keep the same top margin */
    align-items: center !important; /* Ensure vertical centering */
    border: none !important; /* Ensure no border */
    display: flex !important;
    flex-direction: row !important;
}

/* Fix vertical alignment of Scale and Rhythm dropdowns */
body.dark-theme .music-generator-controls-panel .rhythm-scale-row .effect-group {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Make labels and dropdowns perfect alignment */
body.dark-theme .music-generator-controls-panel .rhythm-scale-row label,
body.dark-theme .music-generator-controls-panel .rhythm-scale-row select {
    margin: 0 !important;
    vertical-align: middle !important;
    line-height: 1 !important;
}

/* Specific fix to align rhythm dropdown with scale dropdown */
body.dark-theme .music-generator-controls-panel .rhythm-scale-row label[for="rhythmPresetSelect"],
body.dark-theme .music-generator-controls-panel .rhythm-scale-row label[for="scaleSelect"] {
    display: inline-block !important;
    margin-bottom: 0 !important;
    height: 24px !important;
    line-height: 24px !important;
}

/* Fix for horizontal line appearance between Scale and Rhythm dropdowns in dark mode */
body.dark-theme .music-generator-controls-panel .rhythm-scale-row .effect-group {
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    position: relative !important;
    background-image: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    outline: none !important;
    text-decoration: none !important;
}

/* Stronger fix to remove any horizontal line artifacts between Scale and Rhythm */
body.dark-theme .music-generator-controls-panel .rhythm-scale-row {
    position: relative !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

/* Fix for any parent elements that might be creating horizontal lines */
body.dark-theme .music-generator-controls-panel .control-group > div > .rhythm-scale-row,
body.dark-theme .music-generator-controls-panel .control-group > div,
body.dark-theme .music-generator-controls-panel .control-group > div::after,
body.dark-theme .music-generator-controls-panel .control-group > div::before {
    border-bottom: none !important;
    border-top: none !important;
    background-image: none !important;
}

/* Fix specifically for Tempo control to ensure no lines after it */
body.dark-theme .music-generator-controls-panel .tempo-control,
body.dark-theme .music-generator-controls-panel .tempo-control::after,
body.dark-theme .music-generator-controls-panel .tempo-control + * {
    border-bottom: none !important;
    border-top: none !important;
    margin-bottom: 0 !important;
}

/* Compact layout for transpose and detune sliders */
body.dark-theme .music-generator-controls-panel .transpose-detune-row {
    gap: 5px !important; /* Reduced from 8px */
    margin-bottom: 3px !important; /* Reduced from 5px */
}

/* More compact labels and values */
body.dark-theme .music-generator-controls-panel .effect-group label {
    margin: 0 0 2px 0 !important; /* Add small bottom margin for labels */
}

body.dark-theme .music-generator-controls-panel select {
    height: 24px !important; /* Increased from 22px for more breathing room */
    padding: 2px 5px !important; /* Increased from 0 3px to add more padding all around */
    font-size: 0.75em !important; 
    margin: 0 !important;
    border-width: 1px !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
}

body.dark-theme .music-generator-controls-panel input[type="range"] {
    margin: 0 !important;
    padding: 0 !important;
    height: 2px !important; /* Further reduced from 3px */
    min-height: 0 !important;
    border: none !important;
}

body.dark-theme .music-generator-controls-panel span {
    font-size: 0.65em !important; /* Smaller text */
    margin-top: 0 !important; /* Remove top margin */
    line-height: 1 !important; /* Tighter line height */
}

/* Basic Settings heading - more space between title and content */
body.dark-theme .music-generator-controls-panel .control-group:first-child > h3 {
    margin: 0 0 6px 0 !important; /* Increased bottom margin for more space */
    font-size: 0.75em !important;
    padding-bottom: 1px !important;
    border-bottom-width: 1px !important;
}

/* Other headings - keep compact spacing */
body.dark-theme .music-generator-controls-panel .control-group:not(:first-child) > h3 {
    margin: 0 0 2px 0 !important;
    font-size: 0.75em !important;
    padding-bottom: 1px !important;
    border-bottom-width: 1px !important;
}

/* Light mode consistent spacing */
body:not(.dark-theme) .music-generator-controls-panel .control-group:first-child > h3 {
    margin-bottom: 6px !important; /* Match dark mode spacing */
}

/* Make the Octave Range section more compact */
body.dark-theme .music-generator-controls-panel .effect-group h3 {
    font-size: 0.75em !important; /* Smaller than main h3 */
    margin-top: 0 !important;
    border-bottom: none !important; /* Remove border to save space */
    border-top: none !important; /* Remove top border */
    padding-bottom: 0 !important;
    margin-bottom: 1px !important; /* Further reduced margin */
}

/* Specific style for Octave Range heading */
body.dark-theme .music-generator-controls-panel .effect-group h3:first-child {
    border: none !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 0 1px 0 !important;
}

body.dark-theme .music-generator-controls-panel .range-slider-container {
    height: 14px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: none !important;
    border: none !important;
}

body.dark-theme .music-generator-controls-panel .gradient-bar,
body.dark-theme .music-generator-controls-panel .slider-wrapper {
    height: 4px !important; /* Match the expected height */
    margin: 0 !important; /* Remove margins */
}

body.dark-theme .music-generator-controls-panel .octave-ruler {
    height: 6px !important; /* Further reduced from 8px */
    margin: 0 !important;
    padding: 0 !important;
}

body.dark-theme .music-generator-controls-panel .octave-mark {
    font-size: 0.6em !important; /* Smaller font */
    height: 10px !important; /* Further reduced from 12px */
    line-height: 1 !important;
}

body.dark-theme .music-generator-controls-panel .octave-mark span {
    font-size: 0.55em !important;
    top: 2px !important;
}

body.dark-theme .music-generator-controls-panel .dual-slider {
    height: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.dark-theme .music-generator-controls-panel .min-handle, 
body.dark-theme .music-generator-controls-panel .max-handle {
    width: 10px !important;
    height: 10px !important;
    top: -3px !important; /* Adjusted for the reduced container height */
}

body.dark-theme .music-generator-controls-panel .effect-group {
    margin-bottom: 3px !important; /* Restore original value */
}

body.dark-theme .music-generator-controls-panel .effect-group:last-child {
    margin-bottom: 0 !important; /* Zero for the last one (octave range) */
}

/* Override spacing for octave range controls to maintain proper separation */
body.dark-theme .music-generator-controls-panel .effect-group:has(h3:contains("Octave Range")) {
    order: 6 !important; /* Place after sampler A4 reference */
    margin-bottom: 25px !important; /* Match the light theme spacing */
}

body.dark-theme .music-generator-controls-panel .effect-group:has(h3:contains("Sampler Octave Range")) {
    order: 7 !important; /* Place after synthesizer octave range */
    margin-bottom: 0 !important; /* Keep the sampler control at the bottom */
}

/* Compact styles for transpose and detune in dark mode */
body.dark-theme .transpose-detune-row .effect-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 50% !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

body.dark-theme .transpose-detune-row label {
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    font-size: 0.65em !important; /* Make label smaller to match other text */
    text-align: center !important; /* Center the label text */
    order: 2 !important; /* Move label after the slider */
}

body.dark-theme .transpose-detune-row .slider-value-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    gap: 5px !important;
}

body.dark-theme .transpose-detune-row input[type="range"] {
    flex: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 20px !important;
    order: 1 !important; /* Keep slider at the top */
}

body.dark-theme #transposeDisplay,
body.dark-theme #detuneDisplay {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1.2em !important; /* Updated to match note name styling */
    white-space: nowrap !important;
    min-width: 30px !important;
    text-align: right !important;
    order: 3 !important; /* Keep value display at the right/end */
}

/* Style for buttons in Basic Settings */
body.dark-theme .basic-settings-buttons {
  margin-top: 10px !important; /* Increased from 8px to 10px to match the new rhythm-scale-row spacing */
  display: flex !important;
  gap: 5px !important;
}

body.dark-theme .basic-settings-buttons .section-nav-button {
  flex: 1 !important;
  font-size: 0.75em !important;
  padding: 5px 8px !important; /* Increased from 3px 0 to add more padding all around */
  margin: 0 !important;
  height: auto !important;
  min-height: 24px !important; /* Increased from 22px to match dropdowns */
  background-color: #4CAF50 !important; /* Changed from #444 to green to match theme */
  color: #fff !important; /* Brighter white text for better contrast */
  border: 1px solid #388E3C !important; /* Darker green border */
  border-radius: 3px !important;
}

body.dark-theme .basic-settings-buttons .section-nav-button:hover {
  background-color: #66BB6A !important; /* Lighter green on hover */
  box-shadow: 0 0 5px rgba(76, 175, 80, 0.5) !important; /* Green glow effect */
}

/* Also style for light mode */
body:not(.dark-theme) .basic-settings-buttons {
  margin-top: 10px !important; /* Increased from 8px to 10px to match */
  display: flex !important;
  gap: 5px !important;
}

body:not(.dark-theme) .basic-settings-buttons .section-nav-button {
  flex: 1 !important;
  font-size: 0.75em !important;
  padding: 5px 8px !important; /* Increased from 3px 0 to match dark mode */
  margin: 0 !important;
  height: auto !important;
  min-height: 24px !important; /* Increased from 22px to match dropdowns */
}

/* Remove space between h3 and the slider container */
body.dark-theme .music-generator-controls-panel h3 + .range-slider-container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Completely remove lines and borders from parent containers to the octave range */
body.dark-theme .music-generator-controls-panel .control-group > div:last-child,
body.dark-theme .music-generator-controls-panel .effect-group:last-child {
    border: none !important;
    margin-top: -5px !important; /* Changed from 0 to -5px to move it up */
    padding-top: 0 !important;
    background: none !important;
    margin-bottom: 0 !important;
}

/* Make all range inputs smaller in height for dark mode */
body.dark-theme input[type="range"] {
    height: 2px !important;
}

body.dark-theme .slider-wrapper {
    height: 12px !important;
}

/* Further optimize the octave range to make it ultra-compact */
body.dark-theme .music-generator-controls-panel .range-slider-container {
    height: 14px !important; /* Further reduced from 20px */
}

body.dark-theme .music-generator-controls-panel .octave-ruler {
    height: 6px !important; /* Further reduced from 8px */
}

/* Adjust handle positions for the more compact container */
body.dark-theme .music-generator-controls-panel .min-handle, 
body.dark-theme .music-generator-controls-panel .max-handle {
    top: -3px !important; /* Adjusted from -4px for the reduced container height */
}

/* Also add for light mode */
body:not(.dark-theme) .music-generator-controls-panel .rhythm-scale-row {
    margin-top: 10px !important; /* Increased from 6px to 10px for more spacing */
}

/* Completely rebuild the Pitch Controls section in dark mode */
body.dark-theme .music-generator-controls-panel .control-group:nth-child(2) {
    margin-top: 10px !important; /* Space after Basic Settings section */
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

body.dark-theme .music-generator-controls-panel .control-group:nth-child(2) > h3 {
    order: 1 !important; /* Ensure heading is first */
    margin: 0 0 6px 0 !important; /* Same as Basic Settings heading */
    padding: 0 0 1px 0 !important;
    font-size: 0.75em !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    line-height: 1.2 !important;
    width: 100% !important;
}

body.dark-theme .music-generator-controls-panel .control-group:nth-child(2) > .transpose-detune-row {
    order: 2 !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin: 5px 0 10px 0 !important; /* Consistent spacing */
    width: 100% !important;
    padding-bottom: 3px !important;
}

/* Add sampler transpose-detune row styling for dark mode */
body.dark-theme .music-generator-controls-panel .control-group:nth-child(2) > .sampler-transpose-detune-row {
    order: 3 !important; /* Place after the regular transpose-detune-row */
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin: 5px 0 10px 0 !important; /* Consistent spacing */
    width: 100% !important;
    padding-bottom: 3px !important;
}

/* Style regular A4 reference slider */
body.dark-theme .music-generator-controls-panel .effect-group:has(#a4ReferenceSlider) {
    order: 4 !important; /* Place after sampler transpose-detune row */
    margin: 5px 0 10px 0 !important;
    padding: 0 !important;
}

body.dark-theme #a4ReferenceSlider {
    width: 100% !important;
    height: 3px !important;
    margin: 8px 0 4px 0 !important;
    padding: 0 !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* Style sampler A4 reference slider */
body.dark-theme .music-generator-controls-panel .effect-group:has(#samplerA4ReferenceSlider) {
    order: 5 !important; /* Place after the regular A4 reference */
    margin: 5px 0 10px 0 !important;
    padding: 0 !important;
}

/* Reset and rebuild transpose/detune sliders */
body.dark-theme .transpose-detune-row .effect-group {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 50% !important;
    box-sizing: border-box !important;
}

body.dark-theme .transpose-detune-row input[type="range"] {
    width: 100% !important;
    height: 3px !important; /* Set both to 3px to match */
    margin: 8px 0 4px 0 !important; /* Space above and below */
    padding: 0 !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* Style sampler transpose/detune sliders to match synthesizer sliders exactly */
body.dark-theme .sampler-transpose-detune-row .effect-group {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 50% !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

body.dark-theme .sampler-transpose-detune-row input[type="range"] {
    width: 100% !important;
    height: 3px !important; /* Match synthesizer sliders exactly */
    margin: 8px 0 4px 0 !important; /* Match synthesizer sliders exactly */
    padding: 0 !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    border-radius: 2px !important;
    outline: none !important;
    position: relative !important;
    display: block !important;
    box-sizing: content-box !important;
    transform: none !important;
}

/* Consistent track styling for sampler sliders */
body.dark-theme .sampler-transpose-detune-row input[type="range"]::-webkit-slider-runnable-track {
    height: 3px !important;
    background: var(--slider-bg, rgba(255, 255, 255, 0.2)) !important;
    border-radius: 2px !important;
    border: none !important;
}

body.dark-theme .sampler-transpose-detune-row input[type="range"]::-moz-range-track {
    height: 3px !important;
    background: var(--slider-bg, rgba(255, 255, 255, 0.2)) !important;
    border-radius: 2px !important;
    border: none !important;
}

/* Consistent thumb styling for sampler sliders */
body.dark-theme .sampler-transpose-detune-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: #64B5F6 !important; /* Light blue slider thumb */
    border: none !important;
    cursor: pointer !important;
    margin-top: -4.5px !important; /* Centers the thumb on the track */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

body.dark-theme .sampler-transpose-detune-row input[type="range"]::-moz-range-thumb {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: #64B5F6 !important; /* Light blue slider thumb */
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

body.dark-theme .sampler-transpose-detune-row label {
    display: block !important;
    text-align: center !important;
    font-size: 0.65em !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    width: 100% !important;
    order: 2 !important; /* Place label after slider */
}

body.dark-theme #samplerTransposeDisplay,
body.dark-theme #samplerDetuneDisplay {
    display: block !important;
    text-align: center !important;
    font-size: 1.2em !important; /* Updated to match note name styling */
    margin: 2px 0 0 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    width: 100% !important;
    order: 3 !important; /* Place value display last */
}

/* Force identical styles for sampler sliders to match synthesizer sliders exactly */
body.dark-theme #samplerTransposeSlider,
body.dark-theme #samplerDetuneSlider {
    all: unset !important; /* First reset everything */
    display: block !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 80% !important;
    height: 3px !important; /* Both sliders exactly 3px */
    background: #444444 !important; /* Use a solid color that matches the design */
    border: none !important;
    outline: none !important;
    border-radius: 3px !important;
    margin: 10px auto !important; /* Center the sliders and give consistent margins */
    position: relative !important;
    top: 0 !important; /* Ensure they're at the same vertical position */
}

/* Fix vertical alignment for sampler detune slider */
body.dark-theme #samplerDetuneSlider {
    margin-top: 0px !important; /* Perfect alignment with transpose slider */
}

/* Fix vertical spacing for sampler transpose slider to prevent squeezing */
body.dark-theme #samplerTransposeSlider {
    margin-top: 10px !important; /* Ensure consistent vertical spacing */
    margin-bottom: 10px !important; /* Add bottom margin to prevent squeezing */
}

/* Force identical track styling for sampler sliders */
body.dark-theme #samplerTransposeSlider::-webkit-slider-runnable-track,
body.dark-theme #samplerDetuneSlider::-webkit-slider-runnable-track {
    height: 3px !important;
    background: #444444 !important;
    border: none !important;
    border-radius: 3px !important;
    cursor: pointer !important;
}

body.dark-theme #samplerTransposeSlider::-moz-range-track,
body.dark-theme #samplerDetuneSlider::-moz-range-track {
    height: 3px !important;
    background: #444444 !important;
    border: none !important;
    border-radius: 3px !important;
    cursor: pointer !important;
}

/* Force identical thumb styling for sampler sliders */
body.dark-theme #samplerTransposeSlider::-webkit-slider-thumb,
body.dark-theme #samplerDetuneSlider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: #64B5F6 !important;
    border: none !important;
    cursor: pointer !important;
    margin-top: -4.5px !important; /* Center the thumb on the track */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

body.dark-theme #samplerTransposeSlider::-moz-range-thumb,
body.dark-theme #samplerDetuneSlider::-moz-range-thumb {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: #64B5F6 !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* Style sampler A4 reference slider */
body.dark-theme .music-generator-controls-panel .effect-group:has(#samplerA4ReferenceSlider) {
    order: 4 !important; /* Place after the sampler transpose-detune row */
    margin: 5px 0 10px 0 !important;
    padding: 0 !important;
}

body.dark-theme #samplerA4ReferenceSlider {
    width: 100% !important;
    height: 3px !important;
    margin: 8px 0 4px 0 !important;
    padding: 0 !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
}

body.dark-theme #samplerA4ReferenceDisplay {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.75em !important;
    white-space: nowrap !important;
    min-width: 30px !important;
    text-align: right !important;
}

body.dark-theme .transpose-detune-row label {
    display: block !important;
    text-align: center !important;
    font-size: 0.65em !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    width: 100% !important;
    order: 2 !important; /* Place label after slider */
}

body.dark-theme #transposeDisplay,
body.dark-theme #detuneDisplay {
    display: block !important;
    text-align: center !important;
    font-size: 1.2em !important; /* Updated to match note name styling */
    margin: 2px 0 0 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    width: 100% !important;
    order: 3 !important; /* Place value display last */
}

/* Clean up any conflicting styles */
body.dark-theme .music-generator-controls-panel .transpose-detune-row .slider-value-container {
    display: none !important; /* Remove this container if it's causing issues */
}

/* Make sure all headings are consistently styled */
body.dark-theme .music-generator-controls-panel .control-group > h3 {
    font-weight: bold !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    margin: 5px 0 6px 0 !important;
    padding: 0 0 1px 0 !important;
}

/* Additional spacing specifically for the first control group (Basic Settings) */
body.dark-theme .music-generator-controls-panel .control-group:first-child > .effect-group:first-of-type {
    margin-top: 5px !important; /* Add top margin to the first effect-group in Basic Settings */
}

/* Make sure the same spacing applies to light mode */
body:not(.dark-theme) .music-generator-controls-panel .control-group h3 {
    margin-bottom: 6px !important; /* Consistent spacing in light mode */
}

body:not(.dark-theme) .music-generator-controls-panel .control-group:first-child > .effect-group:first-of-type {
    margin-top: 5px !important; /* Consistent spacing in light mode */
}

/* Add top margin to first effect-group in Basic Settings */
body.dark-theme .music-generator-controls-panel .control-group:first-child > .effect-group:first-of-type {
    margin-top: 5px !important; /* Creates additional space below the heading */
}

/* Apply the same spacing to light mode */
body:not(.dark-theme) .music-generator-controls-panel .control-group:first-child > .effect-group:first-of-type {
    margin-top: 5px !important; /* Match dark mode spacing */
}

/* Make sure light mode tempo slider has the same alignment as dark mode */
body:not(.dark-theme) .music-generator-controls-panel .control-group:first-child > .effect-group:first-of-type {
    margin-top: 5px !important; /* Match dark mode spacing */
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}

body:not(.dark-theme) .music-generator-controls-panel .effect-group label {
    margin: 0 0 2px 0 !important; /* Add small bottom margin for labels in light mode too */
    display: block !important;
}

body:not(.dark-theme) .music-generator-controls-panel input[type="range"] {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

body:not(.dark-theme) .music-generator-controls-panel .control-group input[type="range"] + span {
    display: block !important;
    text-align: center !important;
    margin-top: 2px !important;
    font-size: 0.65em !important; /* Match dark mode font size */
}

/* Add consistent vertical spacing to light mode controls */
body:not(.dark-theme) .music-generator-controls-panel .effect-group {
    margin-bottom: 3px !important; /* Match dark mode spacing */
    padding: 0 !important;
}

/* Fix transpose and detune sliders layout in light mode - with stronger selectors */
body:not(.dark-theme) .music-generator-controls-panel .transpose-detune-row {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 5px !important;
  margin-bottom: 3px !important;
  width: 100% !important;
}

body:not(.dark-theme) .music-generator-controls-panel .transpose-detune-row .effect-group {
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important; /* Changed from row to column */
  align-items: stretch !important; /* Changed from center to stretch */
  gap: 2px !important; /* Reduced from 5px */
}

body:not(.dark-theme) .music-generator-controls-panel .transpose-detune-row label {
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  min-width: auto !important;
  flex-shrink: 0 !important;
  font-size: 0.65em !important; /* Make label smaller to match other text */
  text-align: center !important; /* Center the label text */
  order: 2 !important; /* Move label after the slider */
}

body:not(.dark-theme) .music-generator-controls-panel .transpose-detune-row .slider-value-container {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  width: 100% !important;
  gap: 5px !important;
}

body:not(.dark-theme) .music-generator-controls-panel .transpose-detune-row input[type="range"] {
  flex: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 20px !important;
  min-width: 0 !important;
  order: 1 !important; /* Keep slider at the top */
}

body:not(.dark-theme) .music-generator-controls-panel #transposeDisplay,
body:not(.dark-theme) .music-generator-controls-panel #detuneDisplay {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 1.2em !important; /* Updated to match note name styling */
  white-space: nowrap !important;
  min-width: 30px !important;
  text-align: right !important;
  flex-shrink: 0 !important;
  order: 3 !important; /* Keep value display at the right/end */
}

/* Also fix rhythm-scale-row layout in light mode */
body:not(.dark-theme) .music-generator-controls-panel .rhythm-scale-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}

/* Fix sampler transpose-detune row layout in light mode to match synthesizer sliders */
body:not(.dark-theme) .music-generator-controls-panel .sampler-transpose-detune-row {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 5px !important;
  margin-bottom: 3px !important;
  width: 100% !important;
}

body:not(.dark-theme) .music-generator-controls-panel .sampler-transpose-detune-row .effect-group {
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 2px !important;
}

body:not(.dark-theme) .music-generator-controls-panel .sampler-transpose-detune-row label {
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  min-width: auto !important;
  flex-shrink: 0 !important;
  font-size: 0.65em !important;
  text-align: center !important;
  order: 2 !important;
}

body:not(.dark-theme) .music-generator-controls-panel .sampler-transpose-detune-row input[type="range"] {
  flex: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 20px !important;
  min-width: 0 !important;
  order: 1 !important;
}

body:not(.dark-theme) .music-generator-controls-panel #samplerTransposeDisplay,
body:not(.dark-theme) .music-generator-controls-panel #samplerDetuneDisplay {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 1.2em !important; /* Updated to match note name styling */
  white-space: nowrap !important;
  min-width: 30px !important;
  text-align: right !important;
  flex-shrink: 0 !important;
  order: 3 !important;
}

/* We need to wrap the slider and value display together in a row */
body.dark-theme .transpose-detune-row .effect-group::before,
body:not(.dark-theme) .music-generator-controls-panel .transpose-detune-row .effect-group::before {
  content: "" !important;
  display: none !important;
}

/* Move Octave Range to the bottom of its column */
body.dark-theme .music-generator-controls-panel .control-group {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
}

body.dark-theme .music-generator-controls-panel .control-group > h3 {
    order: 1 !important; /* Keep heading at the top */
}

body.dark-theme .music-generator-controls-panel .control-group > .effect-group:not(:last-child) {
    order: 2 !important; /* Other effect groups come after heading */
}

/* Specifically target the Octave Range section */
body.dark-theme .music-generator-controls-panel .effect-group:has(h3:contains("Octave Range")) {
    order: 6 !important; /* Place after sampler A4 reference */
}

/* Alternative selector if :has is not supported in some browsers */
body.dark-theme .music-generator-controls-panel .control-group > div:last-child {
    order: 6 !important; /* Place after sampler A4 reference */
}

/* Remove the negative margin that was previously moving it up */
body.dark-theme .music-generator-controls-panel .effect-group:last-child {
    margin-top: 5px !important; /* Add spacing above octave range */
    padding-top: 0 !important;
    background: none !important;
    margin-bottom: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important; /* Light divider above octave range */
    padding-top: 5px !important; /* Add padding above octave range */
}

/* Fix for synthesizer controls panel background in dark mode */
body.dark-theme .synthesizer-controls-panel {
    background-color: #2a2a2a !important; /* Dark gray background instead of blue */
    border-color: #333 !important;
    padding-top: 0 !important; /* Remove top padding to match light theme */
    margin-top: -47px !important; /* Increased negative margin by 2px more (from -45px to -47px) */
    position: relative !important; /* Added position relative for the negative margin */
    z-index: 1 !important; /* Added z-index to prevent overlap issues */
}

body.dark-theme .synthesizer-controls-grid .control-column {
    background-color: #1a1a1a !important;
    border: 1px solid #333 !important;
}

/* Invert the envelope shape visual display colors in dark mode */
body.dark-theme #adsrVisualizer {
    border: 1px solid #444 !important;
    background-color: #111 !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* Add a custom attribute to the canvas element that will be read by JavaScript */
body.dark-theme #adsrVisualizer {
    --dark-mode: true; /* CSS variable to indicate dark mode */
    --dark-bg: #111; /* Background color */
    --dark-line: #64B5F6; /* Line color - light blue */
    --dark-text: #aaa; /* Text color - light gray */
    --dark-label: #bbb; /* Label color - lighter gray */
    --dark-attack: rgba(76, 175, 80, 0.7); /* Green with higher opacity */
    --dark-decay: rgba(255, 235, 59, 0.7); /* Yellow with higher opacity */
    --dark-sustain: rgba(33, 150, 243, 0.7); /* Blue with higher opacity */
    --dark-release: rgba(244, 67, 54, 0.7); /* Red with higher opacity */
}

/* Remove top padding from Audio FX and Noise Generator panels in dark mode */
body.dark-theme .effects-control, 
body.dark-theme .noise-controls {
    padding-top: 0 !important; /* Remove top padding */
    margin-top: 0 !important; /* Remove top margin */
}

/* Fix for noise section in dark mode */
body.dark-theme .noise-section {
    margin-top: -45px !important; /* Increased negative margin by 20px more (from -25px to -45px) */
    position: relative !important;
    z-index: 1 !important;
}

/* Fix for effects section in dark mode */
body.dark-theme .effects-section {
    margin-top: -45px !important; /* Same negative margin as noise section */
    position: relative !important;
    z-index: 1 !important;
}

/* Fix for music generator in dark mode */
body.dark-theme .music-generator-controls-panel {
    margin-top: -5px !important; /* Small negative margin to align with other panels */
    position: relative !important;
    z-index: 1 !important;
}

/* Fix for presets panel in dark mode */
body.dark-theme .synth-controls-section {
    margin-top: -5px !important; /* Small negative margin to align with other panels */
    position: relative !important;
    z-index: 1 !important;
}

/* Consistent panel title styling for dark mode */
body.dark-theme .synthesizer-controls-panel h2,
body.dark-theme .music-generator-controls-panel h2,
body.dark-theme .synth-controls-section h2,
body.dark-theme .effects-title,
body.dark-theme .noise-title {
    color: #64B5F6 !important; /* Light blue for dark theme */
    border-bottom: 1px solid rgba(255,255,255,0.2) !important;
    font-size: 1.1em !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    padding-bottom: 3px !important;
    font-weight: bold !important;
    text-align: left !important;
    background-color: transparent !important;
    border-radius: 0 !important;
}

/* Fix specifically for Tempo control to ensure no lines after it */
body.dark-theme .music-generator-controls-panel .tempo-control,
body.dark-theme .music-generator-controls-panel .tempo-control::after,
body.dark-theme .music-generator-controls-panel .tempo-control + * {
    border-bottom: none !important;
    border-top: none !important;
    margin-bottom: 0 !important;
}

/* Target parent div containing the rhythm-scale-row */
body.dark-theme .music-generator-controls-panel .control-group .effect-group {
    border: none !important;
    background: none !important;
    box-shadow: none !important;
}

/* Brute force fix to remove any divider between Basic Settings h3 and content */
body.dark-theme .music-generator-controls-panel h3,
body.dark-theme .music-generator-controls-panel h3::after,
body.dark-theme .music-generator-controls-panel h3::before {
    border-bottom: 0 !important;
    box-shadow: none !important;
}

/* Make sure the basic settings heading doesn't create a line after itself */
body.dark-theme .music-generator-controls-panel .control-group h3 + div,
body.dark-theme .music-generator-controls-panel .control-group h3 + div::before,
body.dark-theme .music-generator-controls-panel .control-group h3 + div::after {
    border-top: none !important;
    margin-top: 3px !important;
}

/* Specific fix to align rhythm dropdown with scale dropdown */
body.dark-theme .music-generator-controls-panel .rhythm-scale-row label[for="rhythmPresetSelect"],
body.dark-theme .music-generator-controls-panel .rhythm-scale-row label[for="scaleSelect"] {
    display: inline-block !important;
    margin-bottom: 0 !important;
    height: 24px !important;
    line-height: 24px !important;
}

/* Ensure both dropdowns have identical sizing and positioning */
body.dark-theme .music-generator-controls-panel #scaleSelect,
body.dark-theme .music-generator-controls-panel #rhythmPresetSelect {
    height: 24px !important;
    box-sizing: border-box !important;
    padding: 2px 5px !important;
    margin: 0 !important;
    vertical-align: middle !important;
    display: inline-block !important;
    font-size: 0.75em !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: #444 !important;
    background-color: #222 !important;
}

/* Force flex layout for both effect-group containers */
body.dark-theme .music-generator-controls-panel .rhythm-scale-row > div.effect-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex: 1 !important;
}

/* Extra aggressive fixes for perfect alignment in dark mode */
body.dark-theme .music-generator-controls-panel .rhythm-scale-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important; /* Changed to stretch */
    justify-content: space-between !important;
    width: 100% !important;
}

/* Force vertical alignment */
body.dark-theme #scaleSelect,
body.dark-theme #rhythmPresetSelect {
    position: relative !important;
    top: 0 !important; /* Ensure no top offset */
    bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Force perfect vertical alignment of both dropdown groups */
body.dark-theme .music-generator-controls-panel .rhythm-scale-row::before,
body.dark-theme .music-generator-controls-panel .rhythm-scale-row::after {
    content: none !important;
    display: none !important;
}

/* Reset any box model differences */
body.dark-theme .music-generator-controls-panel .rhythm-scale-row .effect-group label,
body.dark-theme .music-generator-controls-panel .rhythm-scale-row .effect-group select {
    box-sizing: border-box !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-top-width: 1px !important;
    border-bottom-width: 1px !important;
}

/* Eliminate any unwanted margins */
body.dark-theme .rhythm-scale-row .effect-group:first-child,
body.dark-theme .rhythm-scale-row .effect-group:last-child {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Direct fix for the rhythm dropdown vertical alignment issue */
body.dark-theme #rhythmPresetSelect {
    position: relative !important;
    top: -3px !important; /* Adjusted from -1px to -3px to move 2px higher */
}

/* Ensure labels have the exact same positioning properties */
body.dark-theme label[for="scaleSelect"],
body.dark-theme label[for="rhythmPresetSelect"] {
    position: relative !important;
    top: 0 !important;
    font-size: 0.75em !important;
    padding: 0 4px 0 0 !important;
    line-height: 24px !important;
    height: 24px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 0 !important;
}

/* Move Rhythm label to match the dropdown position */
body.dark-theme label[for="rhythmPresetSelect"] {
    position: relative !important;
    top: -3px !important; /* Match the dropdown's -3px setting */
    font-size: 0.75em !important;
    padding: 0 4px 0 0 !important;
    line-height: 24px !important;
    height: 24px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 0 !important;
}

/* Dark theme fixes for transpose and detune sliders */

/* Ensure consistent rendering of both sliders with specific rules */
body.dark-theme #transposeSlider,
body.dark-theme #detuneSlider {
    height: 3px !important; /* Force identical 3px height for both sliders */
    width: 80% !important; /* Keep existing 80% width */
    background: var(--slider-bg, rgba(255, 255, 255, 0.2)) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    border-radius: 2px !important;
    outline: none !important;
    margin: 8px 0 4px 0 !important; /* Consistent margins */
    padding: 0 !important;
    position: relative !important;
    display: block !important;
    box-sizing: content-box !important;
    transform: none !important;
}

/* Consistent track styling for both sliders */
body.dark-theme #transposeSlider::-webkit-slider-runnable-track,
body.dark-theme #detuneSlider::-webkit-slider-runnable-track {
    height: 3px !important;
    background: var(--slider-bg, rgba(255, 255, 255, 0.2)) !important;
    border-radius: 2px !important;
    border: none !important;
}

body.dark-theme #transposeSlider::-moz-range-track,
body.dark-theme #detuneSlider::-moz-range-track {
    height: 3px !important;
    background: var(--slider-bg, rgba(255, 255, 255, 0.2)) !important;
    border-radius: 2px !important;
    border: none !important;
}

/* Consistent thumb styling for both sliders */
body.dark-theme #transposeSlider::-webkit-slider-thumb,
body.dark-theme #detuneSlider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: #64B5F6 !important; /* Light blue slider thumb */
    border: none !important;
    cursor: pointer !important;
    margin-top: -4.5px !important; /* Centers the thumb on the track: (thumb height - track height) / 2 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

body.dark-theme #transposeSlider::-moz-range-thumb,
body.dark-theme #detuneSlider::-moz-range-thumb {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: #64B5F6 !important; /* Light blue slider thumb */
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* Remove any other styles that might be affecting the sliders */
body.dark-theme .transpose-detune-row input[type="range"]::before,
body.dark-theme .transpose-detune-row input[type="range"]::after {
    content: none !important;
    display: none !important;
}

/* Ensure consistent containers for both sliders */
body.dark-theme .transpose-detune-row .effect-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 50% !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Hide the scale dropdown but keep it functional */
body.dark-theme label[for="scaleSelect"],
body.dark-theme #scaleSelect,
body:not(.dark-theme) label[for="scaleSelect"],
body:not(.dark-theme) #scaleSelect {
    visibility: hidden !important; /* Hide but keep functional */
    position: absolute !important; /* Remove from flow */
    pointer-events: none !important; /* Make unclickable */
    height: 0 !important; /* Collapse height */
    width: 0 !important; /* Collapse width */
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
}

/* Remove any absolute positioning for the scale presets button */
body.dark-theme #scalePresetsToggle,
body:not(.dark-theme) #scalePresetsToggle {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    cursor: pointer !important;
}

/* Style the scale presets button to match other UI elements */
body.dark-theme #scalePresetsToggle {
    background-color: #444 !important;
    color: #eee !important;
    border: 1px solid #555 !important;
    border-radius: 3px !important;
    padding: 2px 12px !important;
    font-size: 0.75em !important;
    margin-right: 10px !important;
    vertical-align: middle !important;
    min-width: 100px !important; /* Increased from 85px to 100px for dark mode */
}

body.dark-theme #scalePresetsToggle:hover {
    background-color: #FFA333 !important; /* Lighter orange on hover */
    box-shadow: 0 0 5px rgba(255, 140, 0, 0.5) !important;
}

body:not(.dark-theme) #scalePresetsToggle {
    min-width: 85px !important; /* Keep original width for light mode */
    padding: 2px 12px !important;
    font-size: 0.75em !important;
    margin-right: 10px !important;
    vertical-align: middle !important;
}

/* Make the rhythm dropdown take full width since scale is hidden */
body.dark-theme .rhythm-scale-row .effect-group:last-child,
body:not(.dark-theme) .rhythm-scale-row .effect-group:last-child {
    flex: 1 !important;
    width: 100% !important;
}

/* Ensure the rhythm label and dropdown are properly aligned */
body.dark-theme .rhythm-scale-row label[for="rhythmPresetSelect"],
body:not(.dark-theme) .rhythm-scale-row label[for="rhythmPresetSelect"] {
    display: inline-block !important;
    margin-right: 8px !important;
}

/* Give the rhythm dropdown more width now that it has more space */
body.dark-theme #rhythmPresetSelect,
body:not(.dark-theme) #rhythmPresetSelect {
    min-width: 200px !important;
    width: calc(100% - 70px) !important; /* Account for the label width */
}

/* Make the rhythm-scale-row use a column layout */
body.dark-theme .rhythm-scale-row,
body:not(.dark-theme) .rhythm-scale-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important; /* Space between the scale and rhythm rows */
    margin-bottom: 5px !important;
    margin-top: 6px !important;
    flex-wrap: wrap !important;
}

/* Style for scale row */
body.dark-theme .rhythm-scale-row .effect-group:first-of-type:not([style*="visibility: hidden"]),
body:not(.dark-theme) .rhythm-scale-row .effect-group:first-of-type:not([style*="visibility: hidden"]) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    margin-bottom: 5px !important;
}

/* Style for rhythm row */
body.dark-theme .rhythm-scale-row .effect-group:last-of-type,
body:not(.dark-theme) .rhythm-scale-row .effect-group:last-of-type {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    flex-basis: 100% !important;
    flex-wrap: wrap !important;
}

/* Style for rhythm dropdown to take full width */
body.dark-theme #rhythmPresetSelect,
body:not(.dark-theme) #rhythmPresetSelect {
    flex: 1 !important;
    min-width: 200px !important;
}

/* Force rhythm dropdown container to take full width and break to new line */
body.dark-theme .rhythm-scale-row .effect-group:has(#rhythmPresetSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#rhythmPresetSelect) {
    width: 100% !important;
    flex-basis: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    margin-top: 8px !important;
}

/* Alternative selector for browsers that don't support :has */
body.dark-theme .rhythm-scale-row .effect-group:last-of-type,
body:not(.dark-theme) .rhythm-scale-row .effect-group:last-of-type {
    width: 100% !important;
    flex-basis: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    margin-top: 8px !important;
}

/* Style for scale and rhythm labels */
body.dark-theme .rhythm-scale-row span,
body.dark-theme .rhythm-scale-row label,
body:not(.dark-theme) .rhythm-scale-row span,
body:not(.dark-theme) .rhythm-scale-row label {
    font-size: 0.75em !important;
    margin-right: 8px !important;
    white-space: nowrap !important;
}

/* Style for scale presets button - Orange for both themes */
body.dark-theme #scalePresetsToggle,
body:not(.dark-theme) #scalePresetsToggle {
    height: 22px !important;
    padding: 2px 12px !important;
    font-size: 0.75em !important;
    margin-right: 10px !important; /* Ensure margin-right is applied */
    background-color: #FF8C00 !important; /* Orange */
    color: white !important;
    border: 1px solid #E67300 !important; /* Darker orange border */
    border-radius: 3px !important;
    cursor: pointer !important;
    min-width: 120px !important; /* Increased to match sampler button width */
}

/* Specific width for dark mode - wider */
body.dark-theme #scalePresetsToggle {
    min-width: 120px !important; /* Increased from 100px to 120px to match sampler */
}

/* Light mode width */
body:not(.dark-theme) #scalePresetsToggle {
    min-width: 120px !important; /* Increased from 85px to 120px to match sampler */
}

/* Hover effect for dark theme presets button */
body.dark-theme #scalePresetsToggle:hover {
    background-color: #FFA333 !important; /* Lighter orange on hover */
    box-shadow: 0 0 5px rgba(255, 140, 0, 0.5) !important;
}

/* Hover effect for light theme presets button */
body:not(.dark-theme) #scalePresetsToggle:hover {
    background-color: #FFA333 !important; /* Lighter orange on hover */
    box-shadow: 0 0 5px rgba(255, 140, 0, 0.5) !important;
}

/* Ensure sampler scale button has consistent width */
body.dark-theme #samplerScalePresetsToggle,
body:not(.dark-theme) #samplerScalePresetsToggle {
    min-width: 120px !important; /* Ensure consistent width */
    height: 22px !important;
    padding: 2px 12px !important;
    font-size: 0.75em !important;
    margin-right: 10px !important;
    background-color: #FF8C00 !important; /* Orange */
    color: white !important;
    border: 1px solid #E67300 !important; /* Darker orange border */
    border-radius: 3px !important;
    cursor: pointer !important;
}

/* Hover effect for sampler scale button */
body.dark-theme #samplerScalePresetsToggle:hover,
body:not(.dark-theme) #samplerScalePresetsToggle:hover {
    background-color: #FFA333 !important; /* Lighter orange on hover */
    box-shadow: 0 0 5px rgba(255, 140, 0, 0.5) !important;
}

/* Style for the current scale display - Override inline styles */
body.dark-theme #currentScaleDisplay {
    color: #FFD700 !important; /* Yellow in dark mode */
    font-size: 1em !important; /* Bigger text */
    font-weight: bold !important; /* Bold text */
    margin-top: 6px !important;
    margin-bottom: 4px !important;
    max-width: 150px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding-left: 1px !important;
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    clear: both !important;
    float: none !important;
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
}

body:not(.dark-theme) #currentScaleDisplay {
    color: #1E3A8A !important; /* Dark blue in light mode */
    font-size: 1em !important; /* Bigger text */
    font-weight: bold !important; /* Bold text */
    margin-top: 4px !important;
    margin-bottom: 3px !important;
    max-width: 150px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding-left: 1px !important;
    display: block !important;
    width: 100% !important;
    text-align: left !important;
}

/* Additional override for inline styles */
body.dark-theme #currentScaleDisplay[style*="color: #888"] {
    color: #FFD700 !important; /* Force yellow in dark mode */
}

body:not(.dark-theme) #currentScaleDisplay[style*="color: #888"] {
    color: #1E3A8A !important; /* Force dark blue in light mode */
}

/* Override font-size and font-weight inline styles */
body.dark-theme #currentScaleDisplay[style*="font-size: 0.85em"] {
    font-size: 1em !important; /* Force bigger text */
    font-weight: bold !important; /* Force bold text */
}

body:not(.dark-theme) #currentScaleDisplay[style*="font-size: 0.85em"] {
    font-size: 1em !important; /* Force bigger text */
    font-weight: bold !important; /* Force bold text */
}

/* Force effect-group to use column layout in dark mode */
body.dark-theme .effect-group:has(#scalePresetsToggle) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    position: relative !important;
}

/* Alternative selector for browsers that don't support :has */
body.dark-theme .music-generator-controls-panel .rhythm-scale-row .effect-group:first-of-type {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    position: relative !important;
}

/* Override the flex-start alignment for scale dropdown containers to fix indentation */
body.dark-theme .effect-group:has(#scaleQuickSelect) {
    align-items: center !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
}

body.dark-theme .effect-group:has(#samplerScaleQuickSelect) {
    align-items: center !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
}

/* Force the scale dropdown containers to have no left margin or padding in dark mode */
body.dark-theme .music-generator-controls-panel .effect-group:has(#scaleQuickSelect) {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    justify-content: flex-start !important;
}

body.dark-theme .music-generator-controls-panel .effect-group:has(#samplerScaleQuickSelect) {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    justify-content: flex-start !important;
}

/* Ultra-specific override for dark mode scale dropdown alignment */
body.dark-theme .music-generator-controls-panel .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    justify-content: flex-start !important;
    align-items: center !important;
}

body.dark-theme .music-generator-controls-panel .rhythm-scale-row .effect-group:has(#samplerScaleQuickSelect) {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    justify-content: flex-start !important;
    align-items: center !important;
}

/* Force inline styles to be overridden in dark mode */
body.dark-theme .music-generator-controls-panel .effect-group[style*="margin"]:has(#scaleQuickSelect) {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

body.dark-theme .music-generator-controls-panel .effect-group[style*="margin"]:has(#samplerScaleQuickSelect) {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Force proper layout for scale presets container in dark mode */
body.dark-theme .scale-presets-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
}

body.dark-theme .scale-presets-container > div:first-child {
    width: 100% !important;
    display: block !important;
    margin-bottom: 0 !important;
}

body.dark-theme .scale-presets-container #currentScaleDisplay {
    width: 100% !important;
    display: block !important;
    margin-top: 6px !important;
    line-height: 1.2 !important;
    float: none !important;
    clear: both !important;
}

/* Dark mode styling for floating panels */
body.dark-theme .floating-panel {
    background-color: #000000 !important; /* Black background */
    border: 1px solid #333333 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}

body.dark-theme .floating-panel .panel-header {
    background-color: #121212 !important; /* Very dark gray header */
    border-bottom: 1px solid #333333 !important;
    color: #ffffff !important;
}

body.dark-theme .floating-panel .panel-content {
    color: #e0e0e0 !important;
}

body.dark-theme .floating-panel .panel-content small {
    color: #aaaaaa !important;
}

body.dark-theme .floating-panel .plasmid-controls label {
    color: #dddddd !important;
}

body.dark-theme .floating-panel select {
    background-color: #222222 !important;
    color: #ffffff !important;
    border: 1px solid #444444 !important;
}

body.dark-theme .floating-panel .plasmid-description {
    color: #bbbbbb !important;
    border-top: 1px solid #333333 !important;
    background-color: #111111 !important;
}

body.dark-theme .floating-panel .panel-footer {
    background-color: #111111 !important;
    border-top: 1px solid #333333 !important;
}

body.dark-theme .floating-panel .action-button {
    background-color: #4CAF50 !important; /* Green button */
    color: #ffffff !important;
    border: 1px solid #388E3C !important;
}

body.dark-theme .floating-panel .action-button:hover {
    background-color: #66BB6A !important; /* Lighter green on hover */
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.5) !important;
}

body.dark-theme .floating-panel .close-button {
    color: #dddddd !important;
}

body.dark-theme .floating-panel .close-button:hover {
    background-color: #333333 !important;
}

/* Specific styling for Scale Presets panel */
body.dark-theme #scalePresetsPanel.floating-panel .panel-header {
    background-color: #121212 !important;
}

/* Specific styling for Melody Plasmids panel */
body.dark-theme #melodicPlasmidsPanel.floating-panel .panel-header {
    background-color: #1b5e20 !important; /* Dark green for melody */
}

/* Specific styling for Rhythm Plasmids panel */
body.dark-theme #rhythmPlasmidsPanel.floating-panel .panel-header {
    background-color: #4a148c !important; /* Dark purple for rhythm */
} 

/* Override spacing for octave range controls to maintain proper separation */
body.dark-theme .music-generator-controls-panel .effect-group:has(h3:contains("Octave Range")) {
    order: 6 !important; /* Place after sampler A4 reference */
    margin-bottom: 25px !important; /* Match the light theme spacing */
}

body.dark-theme .music-generator-controls-panel .effect-group:has(h3:contains("Sampler Octave Range")) {
    order: 7 !important; /* Place after synthesizer octave range */
    margin-bottom: 0 !important; /* Keep the sampler control at the bottom */
}

/* Alternative approach for browsers that don't support :has */
body.dark-theme .music-generator-controls-panel .effect-group h3:first-child {
    margin-bottom: 25px !important; /* Add spacing after the first octave range heading */
}

body.dark-theme .music-generator-controls-panel .effect-group:last-child {
    margin-bottom: 0 !important; /* Keep the sampler control at the bottom */
}

/* Specific targeting for octave range spacing in dark theme */
body.dark-theme .music-generator-controls-panel .effect-group[style*="margin-bottom: 25px"] {
    margin-bottom: 25px !important; /* Force the spacing */
}

body.dark-theme .music-generator-controls-panel .effect-group[style*="margin-bottom: 0"] {
    margin-bottom: 0 !important; /* Keep zero margin for sampler control */
}

body.dark-theme .music-generator-controls-panel .gradient-bar,
body.dark-theme .music-generator-controls-panel .slider-wrapper {
    height: 4px !important; /* Match the expected height */
    margin: 0 !important; /* Remove margins */
}

/* Light mode gradient bar height fix */
body:not(.dark-theme) .music-generator-controls-panel .gradient-bar {
    height: 4px !important; /* Match the expected height */
    margin: 0 !important; /* Remove margins */
}

/* Fix light theme background to be light gray instead of black */
body:not(.dark-theme) {
    background-color: #f5f5f5 !important; /* Light gray background */
    color: #333333 !important; /* Dark text */
}

/* Ensure light theme body background is properly set */
body:not(.dark-theme) body {
    background-color: #f5f5f5 !important; /* Light gray background */
}

/* Target the specific octave range effect groups by their content */
body.dark-theme .music-generator-controls-panel .effect-group:has(h3:contains("Synthesizer Octave Range")) {
    order: 6 !important;
    margin: 5px 0 10px 0 !important;
}

body.dark-theme .music-generator-controls-panel .effect-group:has(h3:contains("Sampler Octave Range")) {
    order: 7 !important;
    margin: 5px 0 10px 0 !important;
}

/* Target by unique IDs for more reliable selection */
body.dark-theme .music-generator-controls-panel .effect-group:has(#octaveRangeDisplay) {
    order: 6 !important;
    margin: 5px 0 10px 0 !important;
}

body.dark-theme .music-generator-controls-panel .effect-group:has(#samplerOctaveRangeDisplay) {
    order: 7 !important;
    margin: 5px 0 10px 0 !important;
}

/* Force order with inline styles for JavaScript-rebuilt elements */
body.dark-theme .music-generator-controls-panel .effect-group.octave-range-component {
    order: 6 !important;
}

body.dark-theme .music-generator-controls-panel .effect-group:has(#samplerMinOctaveSlider) {
    order: 7 !important;
}

/* Style the scale quick select dropdown */
body.dark-theme #scaleQuickSelect,
body:not(.dark-theme) #scaleQuickSelect {
    margin: 0 !important;
    padding: 2px 3px !important;
    height: 24px !important;
    font-size: 0.75em !important;
    vertical-align: top !important;
    flex: 1 !important;
    background-color: #333 !important;
    color: #fff !important;
    border: 1px solid #555 !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    min-width: 120px !important;
}

/* Ensure the scale controls container allows wrapping */
body.dark-theme .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .effect-group:has(#scaleQuickSelect) {
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    width: 100% !important;
}

body.dark-theme #scaleQuickSelect:focus,
body:not(.dark-theme) #scaleQuickSelect:focus {
    outline: none !important;
    border-color: #4CAF50 !important;
    box-shadow: 0 0 3px rgba(76, 175, 80, 0.3) !important;
}

/* Light mode styling for scale quick select */
body:not(.dark-theme) #scaleQuickSelect {
    background-color: #fff !important;
    color: #333 !important;
    border: 1px solid #ccc !important;
    padding: 2px 3px !important;
    height: 24px !important;
}

body:not(.dark-theme) #scaleQuickSelect:focus {
    border-color: #4CAF50 !important;
    box-shadow: 0 0 3px rgba(76, 175, 80, 0.3) !important;
}

/* Style the sampler scale quick select dropdown */
body.dark-theme #samplerScaleQuickSelect,
body:not(.dark-theme) #samplerScaleQuickSelect {
    margin: 0 !important;
    padding: 2px 3px !important;
    height: 24px !important;
    font-size: 0.75em !important;
    vertical-align: top !important;
    flex: 1 !important;
    background-color: #333 !important;
    color: #fff !important;
    border: 1px solid #555 !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    min-width: 120px !important;
}

/* Ensure the sampler scale controls container allows wrapping */
body.dark-theme .effect-group:has(#samplerScaleQuickSelect),
body:not(.dark-theme) .effect-group:has(#samplerScaleQuickSelect) {
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    width: 100% !important;
}

body.dark-theme #samplerScaleQuickSelect:focus,
body:not(.dark-theme) #samplerScaleQuickSelect:focus {
    outline: none !important;
    border-color: #4CAF50 !important;
    box-shadow: 0 0 3px rgba(76, 175, 80, 0.3) !important;
}

/* Light mode styling for sampler scale quick select */
body:not(.dark-theme) #samplerScaleQuickSelect {
    background-color: #fff !important;
    color: #333 !important;
    border: 1px solid #ccc !important;
}

body:not(.dark-theme) #samplerScaleQuickSelect:focus {
    border-color: #4CAF50 !important;
    box-shadow: 0 0 3px rgba(76, 175, 80, 0.3) !important;
}

/* Style the sampler scale presets toggle button */
body.dark-theme #samplerScalePresetsToggle,
body:not(.dark-theme) #samplerScalePresetsToggle {
    height: 22px !important;
    padding: 3px 12px !important;
    font-size: 0.75em !important;
    margin-right: 10px !important;
    background-color: #FF8C00 !important; /* Orange */
    color: white !important;
    border: 1px solid #E67300 !important; /* Darker orange border */
    border-radius: 3px !important;
    cursor: pointer !important;
    min-width: 120px !important; /* Increased to match sampler button width */
}

body.dark-theme #samplerScalePresetsToggle:hover,
body:not(.dark-theme) #samplerScalePresetsToggle:hover {
    background-color: #FFA333 !important; /* Lighter orange on hover */
    box-shadow: 0 0 5px rgba(255, 140, 0, 0.5) !important;
}

/* Style the sampler current scale display - Override inline styles */
body.dark-theme #samplerCurrentScaleDisplay {
    font-size: 1em !important; /* Bigger text */
    font-weight: bold !important; /* Bold text */
    color: #FFD700 !important; /* Yellow in dark mode */
    max-width: 150px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    line-height: 1.2 !important;
    min-width: 100px !important;
    margin-top: 6px !important;
    margin-bottom: 4px !important;
    padding-left: 1px !important;
    width: 100% !important;
    text-align: left !important;
}

body:not(.dark-theme) #samplerCurrentScaleDisplay {
    font-size: 1em !important; /* Bigger text */
    font-weight: bold !important; /* Bold text */
    color: #1E3A8A !important; /* Dark blue in light mode */
    max-width: 150px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    line-height: 1.2 !important;
    min-width: 100px !important;
    margin-top: 4px !important;
    margin-bottom: 3px !important;
    padding-left: 1px !important;
    width: 100% !important;
    text-align: left !important;
}

/* Additional override for sampler inline styles */
body.dark-theme #samplerCurrentScaleDisplay[style*="color: #888"] {
    color: #FFD700 !important; /* Force yellow in dark mode */
}

body:not(.dark-theme) #samplerCurrentScaleDisplay[style*="color: #888"] {
    color: #1E3A8A !important; /* Force dark blue in light mode */
}

/* Override sampler font-size and font-weight inline styles */
body.dark-theme #samplerCurrentScaleDisplay[style*="font-size: 0.85em"] {
    font-size: 1em !important; /* Force bigger text */
    font-weight: bold !important; /* Force bold text */
}

body:not(.dark-theme) #samplerCurrentScaleDisplay[style*="font-size: 0.85em"] {
    font-size: 1em !important; /* Force bigger text */
    font-weight: bold !important; /* Force bold text */
}

/* Style the sampler rhythm scale row */
body.dark-theme .sampler-rhythm-scale-row,
body:not(.dark-theme) .sampler-rhythm-scale-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    margin-bottom: 0 !important;
    margin-top: 6px !important;
}

/* Style the sampler scale controls row */
body.dark-theme .sampler-rhythm-scale-row .effect-group:first-of-type:not([style*="visibility: hidden"]),
body:not(.dark-theme) .sampler-rhythm-scale-row .effect-group:first-of-type:not([style*="visibility: hidden"]) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    margin-bottom: 5px !important;
}

/* Force left alignment for scale controls in dark mode - ULTIMATE FIX */
body.dark-theme .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    justify-content: flex-start !important;
    align-items: center !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

/* Alternative selector for browsers that don't support :has */
body.dark-theme .rhythm-scale-row .effect-group:nth-child(2) {
    justify-content: flex-start !important;
    align-items: center !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

/* Force left alignment for sampler scale controls in dark mode */
body.dark-theme .rhythm-scale-row .effect-group:has(#samplerScaleQuickSelect) {
    justify-content: flex-start !important;
    align-items: center !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

/* Alternative selector for browsers that don't support :has */
body.dark-theme .rhythm-scale-row .effect-group:nth-child(3) {
    justify-content: flex-start !important;
    align-items: center !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

/* Override any inline styles that might be causing the alignment issue */
body.dark-theme .rhythm-scale-row .effect-group[style*="justify-content"]:has(#scaleQuickSelect) {
    justify-content: flex-start !important;
}

body.dark-theme .rhythm-scale-row .effect-group[style*="justify-content"]:has(#samplerScaleQuickSelect) {
    justify-content: flex-start !important;
}

/* Force the scale dropdown to start from the left edge */
body.dark-theme #scaleQuickSelect {
    margin-left: 0 !important;
    padding-left: 2px !important;
    flex: 1 !important;
    min-width: 120px !important;
}

body.dark-theme #samplerScaleQuickSelect {
    margin-left: 0 !important;
    padding-left: 2px !important;
    flex: 1 !important;
    min-width: 120px !important;
}

/* Ensure the scale presets button is properly positioned */
body.dark-theme #scalePresetsToggle {
    margin-left: 0 !important;
    margin-right: 10px !important;
    flex-shrink: 0 !important;
}

body.dark-theme #samplerScalePresetsToggle {
    margin-left: 0 !important;
    margin-right: 10px !important;
    flex-shrink: 0 !important;
}

/* Force the rhythm-scale-row container to not add any unwanted spacing */
body.dark-theme .rhythm-scale-row {
    margin-left: 0 !important;
    padding-left: 0 !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
}

/* Override any parent container styles that might be affecting alignment */
body.dark-theme .music-generator-controls-panel .control-group {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

body.dark-theme .music-generator-controls-panel .control-group .rhythm-scale-row {
    margin-left: 0 !important;
    padding-left: 0 !important;
    justify-content: flex-start !important;
}

/* Ensure no unwanted margins or padding from any parent elements */
body.dark-theme .music-generator-controls-panel .control-group .rhythm-scale-row .effect-group {
    margin-left: 0 !important;
    padding-left: 0 !important;
    justify-content: flex-start !important;
}

/* Force left alignment for the entire scale controls section */
body.dark-theme .rhythm-scale-row .effect-group:has(#scaleQuickSelect),
body.dark-theme .rhythm-scale-row .effect-group:has(#samplerScaleQuickSelect) {
    justify-content: flex-start !important;
    align-items: center !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    position: relative !important;
    left: 0 !important;
}

/* Override any CSS that might be centering or right-aligning these elements */
body.dark-theme .rhythm-scale-row .effect-group:has(#scaleQuickSelect) *,
body.dark-theme .rhythm-scale-row .effect-group:has(#samplerScaleQuickSelect) * {
    text-align: left !important;
}

/* Force the container to start from the absolute left edge */
body.dark-theme .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before,
body.dark-theme .rhythm-scale-row .effect-group:has(#samplerScaleQuickSelect)::before {
    content: none !important;
    display: none !important;
}

/* Remove any potential spacing from pseudo-elements */
body.dark-theme .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::after,
body.dark-theme .rhythm-scale-row .effect-group:has(#samplerScaleQuickSelect)::after {
    content: none !important;
    display: none !important;
}

/* Ensure the scale dropdown starts at the very left edge */
body.dark-theme .rhythm-scale-row .effect-group:has(#scaleQuickSelect) > *:first-child,
body.dark-theme .rhythm-scale-row .effect-group:has(#samplerScaleQuickSelect) > *:first-child {
    margin-left: 0 !important;
    padding-left: 0 !important;
    position: relative !important;
    left: 0 !important;
}

/* Force left alignment for the entire rhythm-scale-row in dark mode */
body.dark-theme .rhythm-scale-row {
    justify-content: flex-start !important;
    align-items: stretch !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

/* Override any potential CSS that might be affecting the alignment */
body.dark-theme .music-generator-controls-panel .rhythm-scale-row .effect-group:has(#scaleQuickSelect),
body.dark-theme .music-generator-controls-panel .rhythm-scale-row .effect-group:has(#samplerScaleQuickSelect) {
    justify-content: flex-start !important;
    align-items: center !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    position: relative !important;
    left: 0 !important;
    transform: none !important;
}

/* Ensure no transform or positioning is affecting the alignment */
body.dark-theme .rhythm-scale-row .effect-group:has(#scaleQuickSelect),
body.dark-theme .rhythm-scale-row .effect-group:has(#samplerScaleQuickSelect) {
    transform: none !important;
    position: relative !important;
    left: 0 !important;
    right: auto !important;
    margin-right: auto !important;
}

/* Force the scale dropdown to be the first element and start from the left */
body.dark-theme .rhythm-scale-row .effect-group:has(#scaleQuickSelect) #scaleQuickSelect,
body.dark-theme .rhythm-scale-row .effect-group:has(#samplerScaleQuickSelect) #samplerScaleQuickSelect {
    order: 1 !important;
    margin-left: 0 !important;
    padding-left: 2px !important;
    flex: 1 !important;
    min-width: 120px !important;
}

/* Ensure the button comes second */
body.dark-theme .rhythm-scale-row .effect-group:has(#scaleQuickSelect) #scalePresetsToggle,
body.dark-theme .rhythm-scale-row .effect-group:has(#samplerScaleQuickSelect) #samplerScalePresetsToggle {
    order: 2 !important;
    margin-left: 0 !important;
    margin-right: 10px !important;
    flex-shrink: 0 !important;
}

/* Ensure the display text comes third */
body.dark-theme .rhythm-scale-row .effect-group:has(#scaleQuickSelect) #currentScaleDisplay,
body.dark-theme .rhythm-scale-row .effect-group:has(#samplerScaleQuickSelect) #samplerCurrentScaleDisplay {
    order: 3 !important;
    margin-left: 0 !important;
    flex-shrink: 0 !important;
}

/* ULTIMATE FIX: Override any CSS that might be centering flex containers in dark mode */
body.dark-theme .rhythm-scale-row .effect-group[style*="display: flex"] {
    justify-content: flex-start !important;
    align-items: center !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    position: relative !important;
    left: 0 !important;
    transform: none !important;
}

/* Force the scale dropdown to start from the absolute left edge */
body.dark-theme .rhythm-scale-row .effect-group[style*="display: flex"] #scaleQuickSelect,
body.dark-theme .rhythm-scale-row .effect-group[style*="display: flex"] #samplerScaleQuickSelect {
    order: 1 !important;
    margin-left: 0 !important;
    padding-left: 2px !important;
    flex: 1 !important;
    min-width: 120px !important;
    position: relative !important;
    left: 0 !important;
}

/* Ensure the scale presets button is properly positioned */
body.dark-theme .rhythm-scale-row .effect-group[style*="display: flex"] #scalePresetsToggle,
body.dark-theme .rhythm-scale-row .effect-group[style*="display: flex"] #samplerScalePresetsToggle {
    order: 2 !important;
    margin-left: 0 !important;
    margin-right: 10px !important;
    flex-shrink: 0 !important;
    position: relative !important;
    left: 0 !important;
}

/* Ensure the display text is properly positioned */
body.dark-theme .rhythm-scale-row .effect-group[style*="display: flex"] #currentScaleDisplay,
body.dark-theme .rhythm-scale-row .effect-group[style*="display: flex"] #samplerCurrentScaleDisplay {
    order: 3 !important;
    margin-left: 0 !important;
    flex-shrink: 0 !important;
    position: relative !important;
    left: 0 !important;
}

/* Override any potential CSS inheritance that might be centering content */
body.dark-theme .rhythm-scale-row .effect-group[style*="display: flex"] * {
    text-align: left !important;
}

/* Force the container to start from the absolute left edge */
body.dark-theme .rhythm-scale-row .effect-group[style*="display: flex"]::before,
body.dark-theme .rhythm-scale-row .effect-group[style*="display: flex"]::after {
    content: none !important;
    display: none !important;
}

/* Ensure the first child (scale dropdown) starts at the very left edge */
body.dark-theme .rhythm-scale-row .effect-group[style*="display: flex"] > *:first-child {
    margin-left: 0 !important;
    padding-left: 0 !important;
    position: relative !important;
    left: 0 !important;
}

/* Override any potential CSS that might be affecting the alignment */
body.dark-theme .music-generator-controls-panel .rhythm-scale-row .effect-group[style*="display: flex"] {
    justify-content: flex-start !important;
    align-items: center !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    position: relative !important;
    left: 0 !important;
    transform: none !important;
}

/* Force left alignment for the entire rhythm-scale-row in dark mode */
body.dark-theme .rhythm-scale-row[style*="display: flex"] {
    justify-content: flex-start !important;
    align-items: stretch !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

/* Override any parent container styles that might be affecting alignment */
body.dark-theme .music-generator-controls-panel .control-group {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
}

body.dark-theme .music-generator-controls-panel .control-group .rhythm-scale-row {
    margin-left: 0 !important;
    padding-left: 0 !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Ensure no unwanted margins or padding from any parent elements */
body.dark-theme .music-generator-controls-panel .control-group .rhythm-scale-row .effect-group {
    margin-left: 0 !important;
    padding-left: 0 !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force the scale dropdown to be the first element and start from the left */
body.dark-theme .rhythm-scale-row .effect-group[style*="display: flex"] #scaleQuickSelect,
body.dark-theme .rhythm-scale-row .effect-group[style*="display: flex"] #samplerScaleQuickSelect {
    order: 1 !important;
    margin-left: 0 !important;
    padding-left: 2px !important;
    flex: 1 !important;
    min-width: 120px !important;
    position: relative !important;
    left: 0 !important;
}

/* Ensure the button comes second */
body.dark-theme .rhythm-scale-row .effect-group[style*="display: flex"] #scalePresetsToggle,
body.dark-theme .rhythm-scale-row .effect-group[style*="display: flex"] #samplerScalePresetsToggle {
    order: 2 !important;
    margin-left: 0 !important;
    margin-right: 10px !important;
    flex-shrink: 0 !important;
    position: relative !important;
    left: 0 !important;
}

/* Ensure the display text comes third */
body.dark-theme .rhythm-scale-row .effect-group[style*="display: flex"] #currentScaleDisplay,
body.dark-theme .rhythm-scale-row .effect-group[style*="display: flex"] #samplerCurrentScaleDisplay {
    order: 3 !important;
    margin-left: 0 !important;
    flex-shrink: 0 !important;
    position: relative !important;
    left: 0 !important;
}

/* ===== FIX FOR SYNTH SCALE DROPDOWN AND BUTTON ALIGNMENT IN DARK MODE ===== */

/* Force left alignment for synth scale controls in dark mode */
body.dark-theme .rhythm-scale-row .effect-group:has(#scaleQuickSelect),
body.dark-theme .rhythm-scale-row .effect-group:has(#scalePresetsToggle),
body.dark-theme .rhythm-scale-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important; /* Force left alignment */
    text-align: left !important;
    align-items: center !important;
}

/* Override any centering styles for the scale dropdown container */
body.dark-theme .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scaleQuickSelect) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any centering styles for the scale button container */
body.dark-theme .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scalePresetsToggle) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any centering styles for the scale display container */
body.dark-theme .rhythm-scale-row .effect-group[style*="display: flex"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for all scale-related elements */
body.dark-theme .rhythm-scale-row .effect-group:has(#scaleQuickSelect) *,
body.dark-theme .rhythm-scale-row .effect-group:has(#scalePresetsToggle) *,
body.dark-theme .rhythm-scale-row .effect-group:has(#currentScaleDisplay) * {
    text-align: left !important;
}

/* Override any pseudo-elements that might be causing centering */
body.dark-theme .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before,
body.dark-theme .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::after,
body.dark-theme .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::before,
body.dark-theme .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::after,
body.dark-theme .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::before,
body.dark-theme .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::after {
    display: none !important;
}

/* Ensure the scale dropdown itself is left-aligned */
body.dark-theme #scaleQuickSelect {
    text-align: left !important;
    justify-self: flex-start !important;
}

/* Ensure the scale button is left-aligned */
body.dark-theme #scalePresetsToggle {
    text-align: left !important;
    justify-self: flex-start !important;
}

/* Ensure the scale display is left-aligned */
body.dark-theme #currentScaleDisplay {
    text-align: left !important;
    justify-self: flex-start !important;
}

/* Override any inline styles that might be causing centering */
body.dark-theme .rhythm-scale-row .effect-group[style*="justify-content"]:has(#scaleQuickSelect),
body.dark-theme .rhythm-scale-row .effect-group[style*="justify-content"]:has(#scalePresetsToggle),
body.dark-theme .rhythm-scale-row .effect-group[style*="justify-content"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
}

/* Force left alignment for the entire scale controls row */
body.dark-theme .rhythm-scale-row .effect-group:has(#scaleQuickSelect),
body.dark-theme .rhythm-scale-row .effect-group:has(#scalePresetsToggle),
body.dark-theme .rhythm-scale-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

/* Ensure the scale controls maintain their original layout */
body.dark-theme .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

/* Override any specific centering rules that might be applied */
body.dark-theme .transpose-detune-row .effect-group:has(#scaleQuickSelect),
body.dark-theme .transpose-detune-row .effect-group:has(#scalePresetsToggle),
body.dark-theme .transpose-detune-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for any effect-group containing scale controls */
body.dark-theme .effect-group:has(#scaleQuickSelect),
body.dark-theme .effect-group:has(#scalePresetsToggle),
body.dark-theme .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any music-generator-controls-panel specific centering */
body.dark-theme .music-generator-controls-panel .effect-group:has(#scaleQuickSelect),
body.dark-theme .music-generator-controls-panel .effect-group:has(#scalePresetsToggle),
body.dark-theme .music-generator-controls-panel .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* ===== APPLY SAME LAYOUT TO LIGHT MODE ===== */

/* Force left alignment for synth scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important; /* Force left alignment */
    text-align: left !important;
    align-items: center !important;
}

/* Override any centering styles for the scale dropdown container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scaleQuickSelect) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any centering styles for the scale button container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scalePresetsToggle) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any centering styles for the scale display container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for all scale-related elements in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) * {
    text-align: left !important;
}

/* Override any pseudo-elements that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::after {
    display: none !important;
}

/* Ensure the scale dropdown itself is left-aligned in light mode */
body:not(.dark-theme) #scaleQuickSelect {
    text-align: left !important;
    justify-self: flex-start !important;
}

/* Ensure the scale button is left-aligned in light mode */
body:not(.dark-theme) #scalePresetsToggle {
    text-align: left !important;
    justify-self: flex-start !important;
}

/* Ensure the scale display is left-aligned in light mode */
body:not(.dark-theme) #currentScaleDisplay {
    text-align: left !important;
    justify-self: flex-start !important;
}

/* Override any inline styles that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
}

/* Force left alignment for the entire scale controls row in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

/* Ensure the scale controls maintain their original layout in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

/* Override any specific centering rules that might be applied in light mode */
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for any effect-group containing scale controls in light mode */
body:not(.dark-theme) .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any music-generator-controls-panel specific centering in light mode */
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* ===== APPLY SAME LAYOUT TO LIGHT MODE ===== */

/* Force left alignment for synth scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important; /* Force left alignment */
    text-align: left !important;
    align-items: center !important;
}

/* Create vertical layout for scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

/* First row: dropdown and button side by side */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before {
    content: "" !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
}

/* Style the dropdown and button container */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    position: relative !important;
}

/* Position dropdown and button in the first row */
body:not(.dark-theme) #scaleQuickSelect {
    display: inline-block !important;
    flex: 1 !important;
    min-width: 120px !important;
    margin-right: 8px !important;
}

body:not(.dark-theme) #scalePresetsToggle {
    display: inline-block !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

/* Position the display label on the second row */
body:not(.dark-theme) #currentScaleDisplay {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* Create vertical layout for sampler scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#samplerScaleQuickSelect) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

/* Position sampler dropdown and button in the first row */
body:not(.dark-theme) #samplerScaleQuickSelect {
    display: inline-block !important;
    flex: 1 !important;
    min-width: 120px !important;
    margin-right: 8px !important;
}

body:not(.dark-theme) #samplerScalePresetsToggle {
    display: inline-block !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

/* Position the sampler display label on the second row */
body:not(.dark-theme) #samplerCurrentScaleDisplay {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* Override any centering styles for the scale dropdown container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scaleQuickSelect) {
    justify-content: flex-start !important;
    text-align: left !important;
    flex-direction: column !important;
}

/* Override any centering styles for the scale button container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scalePresetsToggle) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any centering styles for the scale display container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for all scale-related elements in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) * {
    text-align: left !important;
}

/* Override any pseudo-elements that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::after {
    display: none !important;
}

/* Override any inline styles that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
}

/* Override any specific centering rules that might be applied in light mode */
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for any effect-group containing scale controls in light mode */
body:not(.dark-theme) .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any music-generator-controls-panel specific centering in light mode */
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* ===== NOTE NAME STYLING ===== */

/* Make note names bigger, yellow, and bold in dark mode */
body.dark-theme .note-name {
    font-size: 1.5em !important;
    color: #FFD700 !important;
    font-weight: bold !important;
    text-shadow: 0 0 3px rgba(255, 215, 0, 0.5) !important;
}

/* Make note names bigger, dark blue, and bold in light mode */
body:not(.dark-theme) .note-name {
    font-size: 1.5em !important;
    color: #00008B !important;
    font-weight: bold !important;
    text-shadow: 0 0 3px rgba(0, 0, 139, 0.5) !important;
}

/* Dark Theme Fixes - Custom styles for dark mode elements */

/* Fix for octave range control tracks in dark mode */
body.dark-theme .range-slider-container::after,
body.dark-theme .music-generator-controls-panel .range-slider-container::after {
    content: none !important; /* Completely remove the pseudo-element */
    display: none !important;
    height: 0 !important;
    border: none !important;
    background: none !important;
}

body.dark-theme .range-slider-container::before {
    background: none !important;
}

/* Gray background for file upload containers */
body.dark-theme .file-upload {
    background-color: #333333 !important; /* Gray background matching panel-bg */
    border-radius: 5px !important;
    padding: 8px 8px 16px 8px !important; /* Reduced top padding from 16px to 8px, kept bottom padding */
    margin-bottom: 15px !important; /* Increased from 10px to 15px to create more space */
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: left !important; /* Ensure left alignment */
}

body.dark-theme .file-upload label {
    margin-bottom: 8px !important; /* Increased from 6px to 8px */
    display: block !important;
    font-weight: bold !important;
    color: #e0e0e0 !important;
    text-align: left !important; /* Ensure left alignment */
}

body.dark-theme .sequence-display-section {
    padding-top: 9px !important; /* Increased from 4px to 9px (added 5px) */
    margin-top: 0 !important; /* Force margin to 0 to remove space */
}

/* Add an additional selector to target the margin specifically */
body.dark-theme .melody-column .sequence-display-section,
body.dark-theme .rhythm-column .sequence-display-section {
    margin-top: 10px !important; /* Increased from 5px to 10px */
}

/* Add even more specific selectors to force the spacing */
body.dark-theme .melody-column > .sequence-display-section,
body.dark-theme .rhythm-column > .sequence-display-section {
    margin-top: 15px !important; /* Reduced from 20px to 15px (5px less) */
    border-top: none !important; /* Remove the test border we added */
}

/* More specific selectors for file uploads */
body.dark-theme .melody-column > .file-upload,
body.dark-theme .rhythm-column > .file-upload {
    margin-bottom: 15px !important; /* Reduced from 20px to 15px (5px less) */
}

/* Dark theme styling for melody and rhythm sequence displays */
body.dark-theme .melody-column .sequence-display {
    padding: 11px 6px 6px 6px !important; /* Increased top padding from 6px to 11px (added 5px) */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 3px !important;
    background-color: #222222 !important;
}

body.dark-theme .rhythm-column .sequence-display {
    padding: 11px 6px 6px 6px !important; /* Increased top padding from 6px to 11px (added 5px) */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 3px !important;
    background-color: #222222 !important;
}

/* Style the "no file selected" text area */
body.dark-theme input[type="file"] {
    background-color: #444444 !important; /* Slightly lighter gray for the file input */
    color: #cccccc !important;
    border-radius: 3px !important;
    padding: 6px 3px !important; /* Increased vertical padding from 3px to 6px */
    min-height: 24px !important; /* Add minimum height */
    text-align: left !important; /* Ensure left alignment */
    width: 100% !important; /* Make it full width */
    box-sizing: border-box !important;
}

/* Style the file selector button - reduce size and add left margin */
body.dark-theme input[type="file"]::file-selector-button {
    background-color: #555555 !important;
    color: #ffffff !important;
    border: 1px solid #666666 !important;
    border-radius: 3px !important;
    margin-right: 8px !important; /* Space after the button */
    margin-left: 8px !important; /* One character space before the button */
    text-align: center !important;
    padding: 3px 6px !important; /* Further reduced from 4px 8px to make button smaller */
    font-size: 0.85em !important; /* Further reduced from 0.9em */
    line-height: 1.2 !important; /* Tighter line height */
    height: auto !important; /* Let height adjust based on content */
}

/* Fix header layout in dark mode to properly show About and Instructions */
body.dark-theme header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

body.dark-theme .header-nav {
    display: flex !important;
    gap: 20px !important;
    margin: 0 20px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body.dark-theme .header-link {
    color: #82b1ff !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    font-size: 1rem !important;
    padding: 5px 10px !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body.dark-theme .header-link:hover {
    background-color: rgba(130, 177, 255, 0.1) !important;
    color: #b6e3ff !important;
}

/* Fix title and logo styling in dark mode */
body.dark-theme .site-logo {
    height: 76px !important; /* Force exact match with light mode */
    width: auto !important;
    max-height: none !important; /* Override any max-height restrictions */
}

body.dark-theme .title-text {
    gap: 0 !important; /* Force no gap */
}

body.dark-theme h1 {
    margin: 0 !important; /* Remove all margins */
}

body.dark-theme .chromatone-title {
    margin: 0 !important; /* Remove all margins */
    padding: 0 !important; /* Remove all padding */
    line-height: 1 !important; /* Tighter line height */
}

/* Color the upload melody and rhythm labels */
body.dark-theme .melody-column .file-upload label {
    color: var(--dark-melody-color) !important; /* Green for melody */
}

body.dark-theme .rhythm-column .file-upload label {
    color: var(--dark-rhythm-color) !important; /* Purple for rhythm */
}

/* Fix spacing issue with the Show MIDI Import button in dark mode */
body.dark-theme .toggle-midi-import {
    margin-bottom: 0 !important; /* Remove bottom margin in dark mode */
    padding-bottom: 0 !important; /* Remove bottom padding */
}

/* Patch title field styling for dark theme */
body.dark-theme .patch-title-container {
    margin: 5px 0 !important;
    text-align: center !important;
}

body.dark-theme .patch-title-container input[type="text"] {
    width: 350px !important;
    padding: 12px !important;
    border: 2px solid #4a90e2 !important;
    border-radius: 8px !important;
    font-size: 18px !important;
    font-weight: bold !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    text-align: center !important;
    background: #2a2a2a !important;
    color: #ffffff !important;
}

body.dark-theme .patch-title-container input[type="text"]:focus {
    outline: none !important;
    border-color: #6ba3e8 !important;
    box-shadow: 0 0 5px rgba(74, 144, 226, 0.5) !important;
}

/* Patch title field styling for light theme */
body:not(.dark-theme) .patch-title-container {
    margin: 5px 0 !important;
    text-align: center !important;
}

body:not(.dark-theme) .patch-title-container input[type="text"] {
    width: 350px !important;
    padding: 12px !important;
    border: 2px solid #4a90e2 !important;
    border-radius: 8px !important;
    font-size: 18px !important;
    font-weight: bold !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    text-align: center !important;
    background: #ffffff !important;
    color: #333333 !important;
}

body:not(.dark-theme) .patch-title-container input[type="text"]:focus {
    outline: none !important;
    border-color: #6ba3e8 !important;
    box-shadow: 0 0 5px rgba(74, 144, 226, 0.5) !important;
}

/* Make sure the first element after the button has proper spacing */
body.dark-theme .midi-import-panel,
body.dark-theme .two-column-layout {
    margin-top: 0 !important; /* Changed from 10px to 0 to remove spacing */
}

/* Make sure modal dialogs are properly displayed in dark mode */
body.dark-theme .modal {
    display: none;
    position: fixed !important;
    z-index: 9999 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.7) !important;
    overflow: auto !important;
}

/* Style the file selector, reverse, and complementary buttons for melody side (green) */
body.dark-theme .melody-column input[type="file"]::file-selector-button {
    background-color: var(--dark-melody-color) !important; /* Green for melody */
    color: #ffffff !important;
    border: 1px solid rgba(76, 175, 80, 0.6) !important; /* Matching border */
    border-radius: 3px !important;
}

/* Add hover styles for the melody file upload button */
body.dark-theme .melody-column input[type="file"]:hover::file-selector-button {
    background-color: rgba(76, 175, 80, 0.8) !important; /* Slightly lighter for hover */
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.5) !important;
}

body.dark-theme .melody-column .transform-toggle-button {
    background-color: var(--dark-melody-color) !important; /* Green for melody */
    color: #ffffff !important;
    border: 1px solid rgba(76, 175, 80, 0.6) !important; /* Matching border */
    transform: none !important; /* Prevent movement */
}

body.dark-theme .melody-column .transform-toggle-button:hover {
    background-color: rgba(76, 175, 80, 0.8) !important; /* Slightly lighter for hover */
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.5) !important;
    transform: none !important; /* Prevent movement */
}

/* Style the file selector, reverse, and complementary buttons for rhythm side (purple) */
body.dark-theme .rhythm-column input[type="file"]::file-selector-button {
    background-color: var(--dark-rhythm-color) !important; /* Purple for rhythm */
    color: #ffffff !important;
    border: 1px solid rgba(186, 104, 200, 0.6) !important; /* Matching border */
    border-radius: 3px !important;
}

body.dark-theme .rhythm-column .transform-toggle-button {
    background-color: var(--dark-rhythm-color) !important; /* Purple for rhythm */
    color: #ffffff !important;
    border: 1px solid rgba(186, 104, 200, 0.6) !important; /* Matching border */
    transform: none !important; /* Prevent movement */
}

body.dark-theme .rhythm-column .transform-toggle-button:hover {
    background-color: rgba(186, 104, 200, 0.8) !important; /* Slightly lighter for hover */
    box-shadow: 0 0 5px rgba(186, 104, 200, 0.5) !important;
    transform: none !important; /* Prevent movement */
}

/* Apply the same styles to light mode - Melody side (green) */
body:not(.dark-theme) .melody-column input[type="file"]::file-selector-button {
    background-color: var(--melody-color) !important; /* Green for melody */
    color: #ffffff !important;
    border: 1px solid rgba(46, 125, 50, 0.6) !important; /* Matching border */
    border-radius: 3px !important;
}

/* Add hover styles for light mode melody file upload button */
body:not(.dark-theme) .melody-column input[type="file"]:hover::file-selector-button {
    background-color: rgba(46, 125, 50, 0.8) !important; /* Slightly lighter for hover */
    box-shadow: 0 0 5px rgba(46, 125, 50, 0.5) !important;
}

body:not(.dark-theme) .melody-column .transform-toggle-button {
    background-color: var(--melody-color) !important; /* Green for melody */
    color: #ffffff !important;
    border: 1px solid rgba(46, 125, 50, 0.6) !important; /* Matching border */
    transform: none !important; /* Prevent movement */
}

/* Add hover style for the melody transform button */
body:not(.dark-theme) .melody-column .transform-toggle-button:hover {
    background-color: rgba(46, 125, 50, 0.8) !important; /* Slightly lighter for hover */
    box-shadow: 0 0 5px rgba(46, 125, 50, 0.5) !important;
    transform: none !important; /* Prevent movement */
}

/* Apply the same styles to light mode - Rhythm side (purple) */
body:not(.dark-theme) .rhythm-column input[type="file"]::file-selector-button {
    background-color: var(--rhythm-color) !important; /* Purple for rhythm */
    color: #ffffff !important;
    border: 1px solid rgba(106, 27, 154, 0.6) !important; /* Matching border */
    border-radius: 3px !important;
}

body:not(.dark-theme) .rhythm-column .transform-toggle-button {
    background-color: var(--rhythm-color) !important; /* Purple for rhythm */
    color: #ffffff !important;
    border: 1px solid rgba(106, 27, 154, 0.6) !important; /* Matching border */
    transform: none !important; /* Prevent movement */
}

body:not(.dark-theme) .rhythm-column .transform-toggle-button:hover {
    background-color: rgba(106, 27, 154, 0.8) !important; /* Slightly lighter for hover */
    box-shadow: 0 0 5px rgba(106, 27, 154, 0.5) !important;
    transform: none !important; /* Prevent movement */
}

/* Remove transformY from all transform-toggle-buttons to prevent movement */
.transform-toggle-button:hover {
    transform: none !important;
}

/* Override the melody file input button to be green in dark mode - ID specific styling */
body.dark-theme #fastaFile::file-selector-button {
    background-color: var(--dark-melody-color) !important; /* Green for melody */
    color: #ffffff !important;
    border: 1px solid rgba(76, 175, 80, 0.6) !important; /* Matching border */
    border-radius: 3px !important;
    padding: 3px 6px !important; /* Further reduced from 4px 8px */
    margin-left: 8px !important; /* Add space before the button */
    font-size: 0.85em !important; /* Further reduced from 0.9em */
    line-height: 1.2 !important; /* Tighter line height */
    height: auto !important; /* Let height adjust based on content */
}

body.dark-theme #fastaFile:hover::file-selector-button {
    background-color: rgba(76, 175, 80, 0.8) !important; /* Slightly lighter for hover */
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.5) !important;
}

/* Override the rhythm file input button to be purple in dark mode - ID specific styling */
body.dark-theme #rhythmFile::file-selector-button {
    background-color: var(--dark-rhythm-color) !important; /* Purple for rhythm */
    color: #ffffff !important;
    border: 1px solid rgba(186, 104, 200, 0.6) !important; /* Matching border */
    border-radius: 3px !important;
    padding: 3px 6px !important; /* Further reduced from 4px 8px */
    margin-left: 8px !important; /* Add space before the button */
    font-size: 0.85em !important; /* Further reduced from 0.9em */
    line-height: 1.2 !important; /* Tighter line height */
    height: auto !important; /* Let height adjust based on content */
}

body.dark-theme #rhythmFile:hover::file-selector-button {
    background-color: rgba(186, 104, 200, 0.8) !important; /* Slightly lighter for hover */
    box-shadow: 0 0 5px rgba(186, 104, 200, 0.5) !important;
}

/* Also add explicit light mode styling by ID to ensure consistency */
body:not(.dark-theme) #fastaFile::file-selector-button {
    background-color: var(--melody-color) !important; /* Green for melody in light mode */
    color: #ffffff !important;
    border: 1px solid rgba(46, 125, 50, 0.6) !important; /* Matching border */
    border-radius: 3px !important;
    padding: 4px 8px !important; /* Reduced from 6px 12px to make button smaller */
    margin-left: 8px !important; /* Reduced to one space before the button */
    font-size: 0.9em !important; /* Slightly smaller font */
}

body:not(.dark-theme) #fastaFile:hover::file-selector-button {
    background-color: rgba(46, 125, 50, 0.8) !important; /* Slightly lighter for hover */
    box-shadow: 0 0 5px rgba(46, 125, 50, 0.5) !important;
}

body:not(.dark-theme) #rhythmFile::file-selector-button {
    background-color: var(--rhythm-color) !important; /* Purple for rhythm in light mode */
    color: #ffffff !important;
    border: 1px solid rgba(106, 27, 154, 0.6) !important; /* Matching border */
    border-radius: 3px !important;
    padding: 4px 8px !important; /* Reduced from 6px 12px to make button smaller */
    margin-left: 8px !important; /* Reduced to one space before the button */
    font-size: 0.9em !important; /* Slightly smaller font */
}

body:not(.dark-theme) #rhythmFile:hover::file-selector-button {
    background-color: rgba(106, 27, 154, 0.8) !important; /* Slightly lighter for hover */
    box-shadow: 0 0 5px rgba(106, 27, 154, 0.5) !important;
}

/* Apply same spacing to all file selector buttons in light mode */
body:not(.dark-theme) input[type="file"]::file-selector-button {
    margin-left: 8px !important; /* One character space before the button */
}

/* Additional styles to ensure consistent left alignment in file containers */
body.dark-theme .file-upload > * {
    margin-left: 0 !important; /* Remove any left margin */
    text-align: left !important; /* Ensure left alignment */
}

body.dark-theme .file-upload div,
body.dark-theme .file-upload input,
body.dark-theme .file-upload label {
    justify-content: flex-start !important; /* Left align flex items */
    align-items: flex-start !important; /* Left align flex items */
}

/* Improve spacing around the file input container */
body.dark-theme .file-upload input[type="file"] {
    margin-top: 4px !important; /* Increased from 2px to 4px */
    margin-bottom: 6px !important; /* Increased from 4px to 6px */
    padding-left: 0 !important; /* Remove left padding */
}

/* Specific alignment styles for melody and rhythm file inputs */
body.dark-theme .melody-column .file-upload,
body.dark-theme .rhythm-column .file-upload {
    text-align: left !important;
    padding: 8px 10px 16px 10px !important; /* Reduced top padding from 16px to 8px, kept bottom padding */
}

body.dark-theme #fastaFile,
body.dark-theme #rhythmFile {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    margin-left: 0 !important;
}

/* Make light mode sequence displays match the height of dark mode ones */
body:not(.dark-theme) .melody-column .sequence-display {
    padding: 11px 6px 6px 6px !important; /* Match dark mode padding */
    min-height: 100px !important; /* Ensure minimum height */
}

body:not(.dark-theme) .rhythm-column .sequence-display {
    padding: 11px 6px 6px 6px !important; /* Match dark mode padding */
    min-height: 100px !important; /* Ensure minimum height */
}

/* Add same padding to both light mode sequence display sections */
body:not(.dark-theme) .sequence-display-section {
    padding-top: 9px !important; /* Match dark mode padding */
}

/* Make the music generator controls panel more compact in dark mode */
body.dark-theme .music-generator-controls-panel {
    padding: 5px 8px !important; /* Further reduced from 8px 10px */
    margin-top: -5px !important; /* Small negative margin to align with other panels */
    position: relative !important;
    z-index: 1 !important;
}

body.dark-theme .music-generator-controls-panel h2 {
    margin: 0 0 2px 0 !important; /* Reduced from 0 0 4px 0 */
    font-size: 0.95em !important; /* Reduced from 1em */
    padding-bottom: 1px !important; /* Reduced from 2px */
    border-bottom-width: 1px !important; /* Thinner border */
}

body.dark-theme .music-controls-grid {
    gap: 4px !important; /* Reduced from 6px */
    margin-bottom: 2px !important; /* Reduced from 4px */
}

body.dark-theme .music-generator-controls-panel .control-group {
    padding: 2px !important; /* Reduced from 3px */
}

body.dark-theme .music-generator-controls-panel .effect-group {
    padding: 0 !important;
    margin: 0 !important;
}

/* Compact layout for rhythm and scale dropdowns */
body.dark-theme .music-generator-controls-panel .rhythm-scale-row {
    gap: 6px !important; /* Increased from 5px */
    margin-bottom: 4px !important; /* Increased from 3px */
    margin-top: 10px !important; /* Keep the same top margin */
    align-items: center !important; /* Ensure vertical centering */
    border: none !important; /* Ensure no border */
    display: flex !important;
    flex-direction: row !important;
}

/* Fix vertical alignment of Scale and Rhythm dropdowns */
body.dark-theme .music-generator-controls-panel .rhythm-scale-row .effect-group {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Make labels and dropdowns perfect alignment */
body.dark-theme .music-generator-controls-panel .rhythm-scale-row label,
body.dark-theme .music-generator-controls-panel .rhythm-scale-row select {
    margin: 0 !important;
    vertical-align: middle !important;
    line-height: 1 !important;
}

/* Specific fix to align rhythm dropdown with scale dropdown */
body.dark-theme .music-generator-controls-panel .rhythm-scale-row label[for="rhythmPresetSelect"],
body.dark-theme .music-generator-controls-panel .rhythm-scale-row label[for="scaleSelect"] {
    display: inline-block !important;
    margin-bottom: 0 !important;
    height: 24px !important;
    line-height: 24px !important;
}

/* Fix for horizontal line appearance between Scale and Rhythm dropdowns in dark mode */
body.dark-theme .music-generator-controls-panel .rhythm-scale-row .effect-group {
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    position: relative !important;
    background-image: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    outline: none !important;
    text-decoration: none !important;
}

/* Stronger fix to remove any horizontal line artifacts between Scale and Rhythm */
body.dark-theme .music-generator-controls-panel .rhythm-scale-row {
    position: relative !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

/* Fix for any parent elements that might be creating horizontal lines */
body.dark-theme .music-generator-controls-panel .control-group > div > .rhythm-scale-row,
body.dark-theme .music-generator-controls-panel .control-group > div,
body.dark-theme .music-generator-controls-panel .control-group > div::after,
body.dark-theme .music-generator-controls-panel .control-group > div::before {
    border-bottom: none !important;
    border-top: none !important;
    background-image: none !important;
}

/* Fix specifically for Tempo control to ensure no lines after it */
body.dark-theme .music-generator-controls-panel .tempo-control,
body.dark-theme .music-generator-controls-panel .tempo-control::after,
body.dark-theme .music-generator-controls-panel .tempo-control + * {
    border-bottom: none !important;
    border-top: none !important;
    margin-bottom: 0 !important;
}

/* Compact layout for transpose and detune sliders */
body.dark-theme .music-generator-controls-panel .transpose-detune-row {
    gap: 5px !important; /* Reduced from 8px */
    margin-bottom: 3px !important; /* Reduced from 5px */
}

/* More compact labels and values */
body.dark-theme .music-generator-controls-panel .effect-group label {
    margin: 0 0 2px 0 !important; /* Add small bottom margin for labels */
}

body.dark-theme .music-generator-controls-panel select {
    height: 24px !important; /* Increased from 22px for more breathing room */
    padding: 2px 5px !important; /* Increased from 0 3px to add more padding all around */
    font-size: 0.75em !important; 
    margin: 0 !important;
    border-width: 1px !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
}

body.dark-theme .music-generator-controls-panel input[type="range"] {
    margin: 0 !important;
    padding: 0 !important;
    height: 2px !important; /* Further reduced from 3px */
    min-height: 0 !important;
    border: none !important;
}

body.dark-theme .music-generator-controls-panel span {
    font-size: 0.65em !important; /* Smaller text */
    margin-top: 0 !important; /* Remove top margin */
    line-height: 1 !important; /* Tighter line height */
}

/* Basic Settings heading - more space between title and content */
body.dark-theme .music-generator-controls-panel .control-group:first-child > h3 {
    margin: 0 0 6px 0 !important; /* Increased bottom margin for more space */
    font-size: 0.75em !important;
    padding-bottom: 1px !important;
    border-bottom-width: 1px !important;
}

/* Other headings - keep compact spacing */
body.dark-theme .music-generator-controls-panel .control-group:not(:first-child) > h3 {
    margin: 0 0 2px 0 !important;
    font-size: 0.75em !important;
    padding-bottom: 1px !important;
    border-bottom-width: 1px !important;
}

/* Light mode consistent spacing */
body:not(.dark-theme) .music-generator-controls-panel .control-group:first-child > h3 {
    margin-bottom: 6px !important; /* Match dark mode spacing */
}

/* Make the Octave Range section more compact */
body.dark-theme .music-generator-controls-panel .effect-group h3 {
    font-size: 0.75em !important; /* Smaller than main h3 */
    margin-top: 0 !important;
    border-bottom: none !important; /* Remove border to save space */
    border-top: none !important; /* Remove top border */
    padding-bottom: 0 !important;
    margin-bottom: 1px !important; /* Further reduced margin */
}

/* Specific style for Octave Range heading */
body.dark-theme .music-generator-controls-panel .effect-group h3:first-child {
    border: none !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 0 1px 0 !important;
}

body.dark-theme .music-generator-controls-panel .range-slider-container {
    height: 14px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: none !important;
    border: none !important;
}

body.dark-theme .music-generator-controls-panel .gradient-bar,
body.dark-theme .music-generator-controls-panel .slider-wrapper {
    height: 4px !important; /* Match the expected height */
    margin: 0 !important; /* Remove margins */
}

body.dark-theme .music-generator-controls-panel .octave-ruler {
    height: 6px !important; /* Further reduced from 8px */
    margin: 0 !important;
    padding: 0 !important;
}

body.dark-theme .music-generator-controls-panel .octave-mark {
    font-size: 0.6em !important; /* Smaller font */
    height: 10px !important; /* Further reduced from 12px */
    line-height: 1 !important;
}

body.dark-theme .music-generator-controls-panel .octave-mark span {
    font-size: 0.55em !important;
    top: 2px !important;
}

body.dark-theme .music-generator-controls-panel .dual-slider {
    height: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.dark-theme .music-generator-controls-panel .min-handle, 
body.dark-theme .music-generator-controls-panel .max-handle {
    width: 10px !important;
    height: 10px !important;
    top: -3px !important; /* Adjusted for the reduced container height */
}

body.dark-theme .music-generator-controls-panel .effect-group {
    margin-bottom: 3px !important; /* Restore original value */
}

body.dark-theme .music-generator-controls-panel .effect-group:last-child {
    margin-bottom: 0 !important; /* Zero for the last one (octave range) */
}

/* Override spacing for octave range controls to maintain proper separation */
body.dark-theme .music-generator-controls-panel .effect-group:has(h3:contains("Octave Range")) {
    order: 6 !important; /* Place after sampler A4 reference */
    margin-bottom: 25px !important; /* Match the light theme spacing */
}

body.dark-theme .music-generator-controls-panel .effect-group:has(h3:contains("Sampler Octave Range")) {
    order: 7 !important; /* Place after synthesizer octave range */
    margin-bottom: 0 !important; /* Keep the sampler control at the bottom */
}

/* Compact styles for transpose and detune in dark mode */
body.dark-theme .transpose-detune-row .effect-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 50% !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

body.dark-theme .transpose-detune-row label {
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    font-size: 0.65em !important; /* Make label smaller to match other text */
    text-align: center !important; /* Center the label text */
    order: 2 !important; /* Move label after the slider */
}

body.dark-theme .transpose-detune-row .slider-value-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    gap: 5px !important;
}

body.dark-theme .transpose-detune-row input[type="range"] {
    flex: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 20px !important;
    order: 1 !important; /* Keep slider at the top */
}

body.dark-theme #transposeDisplay,
body.dark-theme #detuneDisplay {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1.2em !important; /* Updated to match note name styling */
    white-space: nowrap !important;
    min-width: 30px !important;
    text-align: right !important;
    order: 3 !important; /* Keep value display at the right/end */
}

/* Style for buttons in Basic Settings */
body.dark-theme .basic-settings-buttons {
  margin-top: 10px !important; /* Increased from 8px to 10px to match the new rhythm-scale-row spacing */
  display: flex !important;
  gap: 5px !important;
}

body.dark-theme .basic-settings-buttons .section-nav-button {
  flex: 1 !important;
  font-size: 0.75em !important;
  padding: 5px 8px !important; /* Increased from 3px 0 to add more padding all around */
  margin: 0 !important;
  height: auto !important;
  min-height: 24px !important; /* Increased from 22px to match dropdowns */
  background-color: #4CAF50 !important; /* Changed from #444 to green to match theme */
  color: #fff !important; /* Brighter white text for better contrast */
  border: 1px solid #388E3C !important; /* Darker green border */
  border-radius: 3px !important;
}

body.dark-theme .basic-settings-buttons .section-nav-button:hover {
  background-color: #66BB6A !important; /* Lighter green on hover */
  box-shadow: 0 0 5px rgba(76, 175, 80, 0.5) !important; /* Green glow effect */
}

/* Also style for light mode */
body:not(.dark-theme) .basic-settings-buttons {
  margin-top: 10px !important; /* Increased from 8px to 10px to match */
  display: flex !important;
  gap: 5px !important;
}

body:not(.dark-theme) .basic-settings-buttons .section-nav-button {
  flex: 1 !important;
  font-size: 0.75em !important;
  padding: 5px 8px !important; /* Increased from 3px 0 to match dark mode */
  margin: 0 !important;
  height: auto !important;
  min-height: 24px !important; /* Increased from 22px to match dropdowns */
}

/* Remove space between h3 and the slider container */
body.dark-theme .music-generator-controls-panel h3 + .range-slider-container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Completely remove lines and borders from parent containers to the octave range */
body.dark-theme .music-generator-controls-panel .control-group > div:last-child,
body.dark-theme .music-generator-controls-panel .effect-group:last-child {
    border: none !important;
    margin-top: -5px !important; /* Changed from 0 to -5px to move it up */
    padding-top: 0 !important;
    background: none !important;
    margin-bottom: 0 !important;
}

/* Make all range inputs smaller in height for dark mode */
body.dark-theme input[type="range"] {
    height: 2px !important;
}

body.dark-theme .slider-wrapper {
    height: 12px !important;
}

/* Further optimize the octave range to make it ultra-compact */
body.dark-theme .music-generator-controls-panel .range-slider-container {
    height: 14px !important; /* Further reduced from 20px */
}

body.dark-theme .music-generator-controls-panel .octave-ruler {
    height: 6px !important; /* Further reduced from 8px */
}

/* Adjust handle positions for the more compact container */
body.dark-theme .music-generator-controls-panel .min-handle, 
body.dark-theme .music-generator-controls-panel .max-handle {
    top: -3px !important; /* Adjusted from -4px for the reduced container height */
}

/* Also add for light mode */
body:not(.dark-theme) .music-generator-controls-panel .rhythm-scale-row {
    margin-top: 10px !important; /* Increased from 6px to 10px for more spacing */
}

/* Completely rebuild the Pitch Controls section in dark mode */
body.dark-theme .music-generator-controls-panel .control-group:nth-child(2) {
    margin-top: 10px !important; /* Space after Basic Settings section */
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

body.dark-theme .music-generator-controls-panel .control-group:nth-child(2) > h3 {
    order: 1 !important; /* Ensure heading is first */
    margin: 0 0 6px 0 !important; /* Same as Basic Settings heading */
    padding: 0 0 1px 0 !important;
    font-size: 0.75em !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    line-height: 1.2 !important;
    width: 100% !important;
}

body.dark-theme .music-generator-controls-panel .control-group:nth-child(2) > .transpose-detune-row {
    order: 2 !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin: 5px 0 10px 0 !important; /* Consistent spacing */
    width: 100% !important;
    padding-bottom: 3px !important;
}

/* Add sampler transpose-detune row styling for dark mode */
body.dark-theme .music-generator-controls-panel .control-group:nth-child(2) > .sampler-transpose-detune-row {
    order: 3 !important; /* Place after the regular transpose-detune-row */
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin: 5px 0 10px 0 !important; /* Consistent spacing */
    width: 100% !important;
    padding-bottom: 3px !important;
}

/* Style regular A4 reference slider */
body.dark-theme .music-generator-controls-panel .effect-group:has(#a4ReferenceSlider) {
    order: 4 !important; /* Place after sampler transpose-detune row */
    margin: 5px 0 10px 0 !important;
    padding: 0 !important;
}

body.dark-theme #a4ReferenceSlider {
    width: 100% !important;
    height: 3px !important;
    margin: 8px 0 4px 0 !important;
    padding: 0 !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* Style sampler A4 reference slider */
body.dark-theme .music-generator-controls-panel .effect-group:has(#samplerA4ReferenceSlider) {
    order: 5 !important; /* Place after the regular A4 reference */
    margin: 5px 0 10px 0 !important;
    padding: 0 !important;
}

/* Reset and rebuild transpose/detune sliders */
body.dark-theme .transpose-detune-row .effect-group {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 50% !important;
    box-sizing: border-box !important;
}

body.dark-theme .transpose-detune-row input[type="range"] {
    width: 100% !important;
    height: 3px !important; /* Set both to 3px to match */
    margin: 8px 0 4px 0 !important; /* Space above and below */
    padding: 0 !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* Style sampler transpose/detune sliders to match synthesizer sliders exactly */
body.dark-theme .sampler-transpose-detune-row .effect-group {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 50% !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

body.dark-theme .sampler-transpose-detune-row input[type="range"] {
    width: 100% !important;
    height: 3px !important; /* Match synthesizer sliders exactly */
    margin: 8px 0 4px 0 !important; /* Match synthesizer sliders exactly */
    padding: 0 !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    border-radius: 2px !important;
    outline: none !important;
    position: relative !important;
    display: block !important;
    box-sizing: content-box !important;
    transform: none !important;
}

/* Consistent track styling for sampler sliders */
body.dark-theme .sampler-transpose-detune-row input[type="range"]::-webkit-slider-runnable-track {
    height: 3px !important;
    background: var(--slider-bg, rgba(255, 255, 255, 0.2)) !important;
    border-radius: 2px !important;
    border: none !important;
}

body.dark-theme .sampler-transpose-detune-row input[type="range"]::-moz-range-track {
    height: 3px !important;
    background: var(--slider-bg, rgba(255, 255, 255, 0.2)) !important;
    border-radius: 2px !important;
    border: none !important;
}

/* Consistent thumb styling for sampler sliders */
body.dark-theme .sampler-transpose-detune-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: #64B5F6 !important; /* Light blue slider thumb */
    border: none !important;
    cursor: pointer !important;
    margin-top: -4.5px !important; /* Centers the thumb on the track */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

body.dark-theme .sampler-transpose-detune-row input[type="range"]::-moz-range-thumb {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: #64B5F6 !important; /* Light blue slider thumb */
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

body.dark-theme .sampler-transpose-detune-row label {
    display: block !important;
    text-align: center !important;
    font-size: 0.65em !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    width: 100% !important;
    order: 2 !important; /* Place label after slider */
}

body.dark-theme #samplerTransposeDisplay,
body.dark-theme #samplerDetuneDisplay {
    display: block !important;
    text-align: center !important;
    font-size: 1.2em !important; /* Updated to match note name styling */
    margin: 2px 0 0 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    width: 100% !important;
    order: 3 !important; /* Place value display last */
}

/* Force identical styles for sampler sliders to match synthesizer sliders exactly */
body.dark-theme #samplerTransposeSlider,
body.dark-theme #samplerDetuneSlider {
    all: unset !important; /* First reset everything */
    display: block !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 80% !important;
    height: 3px !important; /* Both sliders exactly 3px */
    background: #444444 !important; /* Use a solid color that matches the design */
    border: none !important;
    outline: none !important;
    border-radius: 3px !important;
    margin: 10px auto !important; /* Center the sliders and give consistent margins */
    position: relative !important;
    top: 0 !important; /* Ensure they're at the same vertical position */
}

/* Fix vertical alignment for sampler detune slider */
body.dark-theme #samplerDetuneSlider {
    margin-top: 0px !important; /* Perfect alignment with transpose slider */
}

/* Fix vertical spacing for sampler transpose slider to prevent squeezing */
body.dark-theme #samplerTransposeSlider {
    margin-top: 10px !important; /* Ensure consistent vertical spacing */
    margin-bottom: 10px !important; /* Add bottom margin to prevent squeezing */
}

/* Force identical track styling for sampler sliders */
body.dark-theme #samplerTransposeSlider::-webkit-slider-runnable-track,
body.dark-theme #samplerDetuneSlider::-webkit-slider-runnable-track {
    height: 3px !important;
    background: #444444 !important;
    border: none !important;
    border-radius: 3px !important;
    cursor: pointer !important;
}

body.dark-theme #samplerTransposeSlider::-moz-range-track,
body.dark-theme #samplerDetuneSlider::-moz-range-track {
    height: 3px !important;
    background: #444444 !important;
    border: none !important;
    border-radius: 3px !important;
    cursor: pointer !important;
}

/* Force identical thumb styling for sampler sliders */
body.dark-theme #samplerTransposeSlider::-webkit-slider-thumb,
body.dark-theme #samplerDetuneSlider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: #64B5F6 !important;
    border: none !important;
    cursor: pointer !important;
    margin-top: -4.5px !important; /* Center the thumb on the track */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

body.dark-theme #samplerTransposeSlider::-moz-range-thumb,
body.dark-theme #samplerDetuneSlider::-moz-range-thumb {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: #64B5F6 !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* Style sampler A4 reference slider */
body.dark-theme .music-generator-controls-panel .effect-group:has(#samplerA4ReferenceSlider) {
    order: 4 !important; /* Place after the sampler transpose-detune row */
    margin: 5px 0 10px 0 !important;
    padding: 0 !important;
}

body.dark-theme #samplerA4ReferenceSlider {
    width: 100% !important;
    height: 3px !important;
    margin: 8px 0 4px 0 !important;
    padding: 0 !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
}

body.dark-theme #samplerA4ReferenceDisplay {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.75em !important;
    white-space: nowrap !important;
    min-width: 30px !important;
    text-align: right !important;
}

body.dark-theme .transpose-detune-row label {
    display: block !important;
    text-align: center !important;
    font-size: 0.65em !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    width: 100% !important;
    order: 2 !important; /* Place label after slider */
}

body.dark-theme #transposeDisplay,
body.dark-theme #detuneDisplay {
    display: block !important;
    text-align: center !important;
    font-size: 1.2em !important; /* Updated to match note name styling */
    margin: 2px 0 0 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    width: 100% !important;
    order: 3 !important; /* Place value display last */
}

/* Clean up any conflicting styles */
body.dark-theme .music-generator-controls-panel .transpose-detune-row .slider-value-container {
    display: none !important; /* Remove this container if it's causing issues */
}

/* Make sure all headings are consistently styled */
body.dark-theme .music-generator-controls-panel .control-group > h3 {
    font-weight: bold !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    margin: 5px 0 6px 0 !important;
    padding: 0 0 1px 0 !important;
}

/* Additional spacing specifically for the first control group (Basic Settings) */
body.dark-theme .music-generator-controls-panel .control-group:first-child > .effect-group:first-of-type {
    margin-top: 5px !important; /* Add top margin to the first effect-group in Basic Settings */
}

/* Make sure the same spacing applies to light mode */
body:not(.dark-theme) .music-generator-controls-panel .control-group h3 {
    margin-bottom: 6px !important; /* Consistent spacing in light mode */
}

body:not(.dark-theme) .music-generator-controls-panel .control-group:first-child > .effect-group:first-of-type {
    margin-top: 5px !important; /* Consistent spacing in light mode */
}

/* Add top margin to first effect-group in Basic Settings */
body.dark-theme .music-generator-controls-panel .control-group:first-child > .effect-group:first-of-type {
    margin-top: 5px !important; /* Creates additional space below the heading */
}

/* Apply the same spacing to light mode */
body:not(.dark-theme) .music-generator-controls-panel .control-group:first-child > .effect-group:first-of-type {
    margin-top: 5px !important; /* Match dark mode spacing */
}

/* Make sure light mode tempo slider has the same alignment as dark mode */
body:not(.dark-theme) .music-generator-controls-panel .control-group:first-child > .effect-group:first-of-type {
    margin-top: 5px !important; /* Match dark mode spacing */
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}

body:not(.dark-theme) .music-generator-controls-panel .effect-group label {
    margin: 0 0 2px 0 !important; /* Add small bottom margin for labels in light mode too */
    display: block !important;
}

body:not(.dark-theme) .music-generator-controls-panel input[type="range"] {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

body:not(.dark-theme) .music-generator-controls-panel .control-group input[type="range"] + span {
    display: block !important;
    text-align: center !important;
    margin-top: 2px !important;
    font-size: 0.65em !important; /* Match dark mode font size */
}

/* Add consistent vertical spacing to light mode controls */
body:not(.dark-theme) .music-generator-controls-panel .effect-group {
    margin-bottom: 3px !important; /* Match dark mode spacing */
    padding: 0 !important;
}

/* Fix transpose and detune sliders layout in light mode - with stronger selectors */
body:not(.dark-theme) .music-generator-controls-panel .transpose-detune-row {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 5px !important;
  margin-bottom: 3px !important;
  width: 100% !important;
}

body:not(.dark-theme) .music-generator-controls-panel .transpose-detune-row .effect-group {
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important; /* Changed from row to column */
  align-items: stretch !important; /* Changed from center to stretch */
  gap: 2px !important; /* Reduced from 5px */
}

body:not(.dark-theme) .music-generator-controls-panel .transpose-detune-row label {
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  min-width: auto !important;
  flex-shrink: 0 !important;
  font-size: 0.65em !important; /* Make label smaller to match other text */
  text-align: center !important; /* Center the label text */
  order: 2 !important; /* Move label after the slider */
}

body:not(.dark-theme) .music-generator-controls-panel .transpose-detune-row .slider-value-container {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  width: 100% !important;
  gap: 5px !important;
}

body:not(.dark-theme) .music-generator-controls-panel .transpose-detune-row input[type="range"] {
  flex: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 20px !important;
  min-width: 0 !important;
  order: 1 !important; /* Keep slider at the top */
}

body:not(.dark-theme) .music-generator-controls-panel #transposeDisplay,
body:not(.dark-theme) .music-generator-controls-panel #detuneDisplay {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 1.2em !important; /* Updated to match note name styling */
  white-space: nowrap !important;
  min-width: 30px !important;
  text-align: right !important;
  flex-shrink: 0 !important;
  order: 3 !important; /* Keep value display at the right/end */
}

/* Also fix rhythm-scale-row layout in light mode */
body:not(.dark-theme) .music-generator-controls-panel .rhythm-scale-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}

/* Fix sampler transpose-detune row layout in light mode to match synthesizer sliders */
body:not(.dark-theme) .music-generator-controls-panel .sampler-transpose-detune-row {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 5px !important;
  margin-bottom: 3px !important;
  width: 100% !important;
}

body:not(.dark-theme) .music-generator-controls-panel .sampler-transpose-detune-row .effect-group {
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 2px !important;
}

body:not(.dark-theme) .music-generator-controls-panel .sampler-transpose-detune-row label {
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  min-width: auto !important;
  flex-shrink: 0 !important;
  font-size: 0.65em !important;
  text-align: center !important;
  order: 2 !important;
}

body:not(.dark-theme) .music-generator-controls-panel .sampler-transpose-detune-row input[type="range"] {
  flex: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 20px !important;
  min-width: 0 !important;
  order: 1 !important;
}

body:not(.dark-theme) .music-generator-controls-panel #samplerTransposeDisplay,
body:not(.dark-theme) .music-generator-controls-panel #samplerDetuneDisplay {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 1.2em !important; /* Updated to match note name styling */
  white-space: nowrap !important;
  min-width: 30px !important;
  text-align: right !important;
  flex-shrink: 0 !important;
  order: 3 !important;
}

/* We need to wrap the slider and value display together in a row */
body.dark-theme .transpose-detune-row .effect-group::before,
body:not(.dark-theme) .music-generator-controls-panel .transpose-detune-row .effect-group::before {
  content: "" !important;
  display: none !important;
}

/* Move Octave Range to the bottom of its column */
body.dark-theme .music-generator-controls-panel .control-group {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
}

body.dark-theme .music-generator-controls-panel .control-group > h3 {
    order: 1 !important; /* Keep heading at the top */
}

body.dark-theme .music-generator-controls-panel .control-group > .effect-group:not(:last-child) {
    order: 2 !important; /* Other effect groups come after heading */
}

/* Specifically target the Octave Range section */
body.dark-theme .music-generator-controls-panel .effect-group:has(h3:contains("Octave Range")) {
    order: 6 !important; /* Place after sampler A4 reference */
}

/* Alternative selector if :has is not supported in some browsers */
body.dark-theme .music-generator-controls-panel .control-group > div:last-child {
    order: 6 !important; /* Place after sampler A4 reference */
}

/* Remove the negative margin that was previously moving it up */
body.dark-theme .music-generator-controls-panel .effect-group:last-child {
    margin-top: 5px !important; /* Add spacing above octave range */
    padding-top: 0 !important;
    background: none !important;
    margin-bottom: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important; /* Light divider above octave range */
    padding-top: 5px !important; /* Add padding above octave range */
}

/* Fix for synthesizer controls panel background in dark mode */
body.dark-theme .synthesizer-controls-panel {
    background-color: #2a2a2a !important; /* Dark gray background instead of blue */
    border-color: #333 !important;
    padding-top: 0 !important; /* Remove top padding to match light theme */
    margin-top: -47px !important; /* Increased negative margin by 2px more (from -45px to -47px) */
    position: relative !important; /* Added position relative for the negative margin */
    z-index: 1 !important; /* Added z-index to prevent overlap issues */
}

body.dark-theme .synthesizer-controls-grid .control-column {
    background-color: #1a1a1a !important;
    border: 1px solid #333 !important;
}

/* Invert the envelope shape visual display colors in dark mode */
body.dark-theme #adsrVisualizer {
    border: 1px solid #444 !important;
    background-color: #111 !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* Add a custom attribute to the canvas element that will be read by JavaScript */
body.dark-theme #adsrVisualizer {
    --dark-mode: true; /* CSS variable to indicate dark mode */
    --dark-bg: #111; /* Background color */
    --dark-line: #64B5F6; /* Line color - light blue */
    --dark-text: #aaa; /* Text color - light gray */
    --dark-label: #bbb; /* Label color - lighter gray */
    --dark-attack: rgba(76, 175, 80, 0.7); /* Green with higher opacity */
    --dark-decay: rgba(255, 235, 59, 0.7); /* Yellow with higher opacity */
    --dark-sustain: rgba(33, 150, 243, 0.7); /* Blue with higher opacity */
    --dark-release: rgba(244, 67, 54, 0.7); /* Red with higher opacity */
}

/* Remove top padding from Audio FX and Noise Generator panels in dark mode */
body.dark-theme .effects-control, 
body.dark-theme .noise-controls {
    padding-top: 0 !important; /* Remove top padding */
    margin-top: 0 !important; /* Remove top margin */
}

/* Fix for noise section in dark mode */
body.dark-theme .noise-section {
    margin-top: -45px !important; /* Increased negative margin by 20px more (from -25px to -45px) */
    position: relative !important;
    z-index: 1 !important;
}

/* Fix for effects section in dark mode */
body.dark-theme .effects-section {
    margin-top: -45px !important; /* Same negative margin as noise section */
    position: relative !important;
    z-index: 1 !important;
}

/* Fix for music generator in dark mode */
body.dark-theme .music-generator-controls-panel {
    margin-top: -5px !important; /* Small negative margin to align with other panels */
    position: relative !important;
    z-index: 1 !important;
}

/* Fix for presets panel in dark mode */
body.dark-theme .synth-controls-section {
    margin-top: -5px !important; /* Small negative margin to align with other panels */
    position: relative !important;
    z-index: 1 !important;
}

/* Consistent panel title styling for dark mode */
body.dark-theme .synthesizer-controls-panel h2,
body.dark-theme .music-generator-controls-panel h2,
body.dark-theme .synth-controls-section h2,
body.dark-theme .effects-title,
body.dark-theme .noise-title {
    color: #64B5F6 !important; /* Light blue for dark theme */
    border-bottom: 1px solid rgba(255,255,255,0.2) !important;
    font-size: 1.1em !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    padding-bottom: 3px !important;
    font-weight: bold !important;
    text-align: left !important;
    background-color: transparent !important;
    border-radius: 0 !important;
}

/* Fix specifically for Tempo control to ensure no lines after it */
body.dark-theme .music-generator-controls-panel .tempo-control,
body.dark-theme .music-generator-controls-panel .tempo-control::after,
body.dark-theme .music-generator-controls-panel .tempo-control + * {
    border-bottom: none !important;
    border-top: none !important;
    margin-bottom: 0 !important;
}

/* Target parent div containing the rhythm-scale-row */
body.dark-theme .music-generator-controls-panel .control-group .effect-group {
    border: none !important;
    background: none !important;
    box-shadow: none !important;
}

/* Brute force fix to remove any divider between Basic Settings h3 and content */
body.dark-theme .music-generator-controls-panel h3,
body.dark-theme .music-generator-controls-panel h3::after,
body.dark-theme .music-generator-controls-panel h3::before {
    border-bottom: 0 !important;
    box-shadow: none !important;
}

/* Make sure the basic settings heading doesn't create a line after itself */
body.dark-theme .music-generator-controls-panel .control-group h3 + div,
body.dark-theme .music-generator-controls-panel .control-group h3 + div::before,
body.dark-theme .music-generator-controls-panel .control-group h3 + div::after {
    border-top: none !important;
    margin-top: 3px !important;
}

/* Specific fix to align rhythm dropdown with scale dropdown */
body.dark-theme .music-generator-controls-panel .rhythm-scale-row label[for="rhythmPresetSelect"],
body.dark-theme .music-generator-controls-panel .rhythm-scale-row label[for="scaleSelect"] {
    display: inline-block !important;
    margin-bottom: 0 !important;
    height: 24px !important;
    line-height: 24px !important;
}

/* Ensure both dropdowns have identical sizing and positioning */
body.dark-theme .music-generator-controls-panel #scaleSelect,
body.dark-theme .music-generator-controls-panel #rhythmPresetSelect {
    height: 24px !important;
    box-sizing: border-box !important;
    padding: 2px 5px !important;
    margin: 0 !important;
    vertical-align: middle !important;
    display: inline-block !important;
    font-size: 0.75em !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: #444 !important;
    background-color: #222 !important;
}

/* Force flex layout for both effect-group containers */
body.dark-theme .music-generator-controls-panel .rhythm-scale-row > div.effect-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex: 1 !important;
}

/* Extra aggressive fixes for perfect alignment in dark mode */
body.dark-theme .music-generator-controls-panel .rhythm-scale-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important; /* Changed to stretch */
    justify-content: space-between !important;
    width: 100% !important;
}

/* Force vertical alignment */
body.dark-theme #scaleSelect,
body.dark-theme #rhythmPresetSelect {
    position: relative !important;
    top: 0 !important; /* Ensure no top offset */
    bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Force perfect vertical alignment of both dropdown groups */
body.dark-theme .music-generator-controls-panel .rhythm-scale-row::before,
body.dark-theme .music-generator-controls-panel .rhythm-scale-row::after {
    content: none !important;
    display: none !important;
}

/* Reset any box model differences */
body.dark-theme .music-generator-controls-panel .rhythm-scale-row .effect-group label,
body.dark-theme .music-generator-controls-panel .rhythm-scale-row .effect-group select {
    box-sizing: border-box !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-top-width: 1px !important;
    border-bottom-width: 1px !important;
}

/* Eliminate any unwanted margins */
body.dark-theme .rhythm-scale-row .effect-group:first-child,
body.dark-theme .rhythm-scale-row .effect-group:last-child {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Direct fix for the rhythm dropdown vertical alignment issue */
body.dark-theme #rhythmPresetSelect {
    position: relative !important;
    top: -3px !important; /* Adjusted from -1px to -3px to move 2px higher */
}

/* Ensure labels have the exact same positioning properties */
body.dark-theme label[for="scaleSelect"],
body.dark-theme label[for="rhythmPresetSelect"] {
    position: relative !important;
    top: 0 !important;
    font-size: 0.75em !important;
    padding: 0 4px 0 0 !important;
    line-height: 24px !important;
    height: 24px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 0 !important;
}

/* Move Rhythm label to match the dropdown position */
body.dark-theme label[for="rhythmPresetSelect"] {
    position: relative !important;
    top: -3px !important; /* Match the dropdown's -3px setting */
    font-size: 0.75em !important;
    padding: 0 4px 0 0 !important;
    line-height: 24px !important;
    height: 24px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 0 !important;
}

/* Dark theme fixes for transpose and detune sliders */

/* Ensure consistent rendering of both sliders with specific rules */
body.dark-theme #transposeSlider,
body.dark-theme #detuneSlider {
    height: 3px !important; /* Force identical 3px height for both sliders */
    width: 80% !important; /* Keep existing 80% width */
    background: var(--slider-bg, rgba(255, 255, 255, 0.2)) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    border-radius: 2px !important;
    outline: none !important;
    margin: 8px 0 4px 0 !important; /* Consistent margins */
    padding: 0 !important;
    position: relative !important;
    display: block !important;
    box-sizing: content-box !important;
    transform: none !important;
}

/* Consistent track styling for both sliders */
body.dark-theme #transposeSlider::-webkit-slider-runnable-track,
body.dark-theme #detuneSlider::-webkit-slider-runnable-track {
    height: 3px !important;
    background: var(--slider-bg, rgba(255, 255, 255, 0.2)) !important;
    border-radius: 2px !important;
    border: none !important;
}

body.dark-theme #transposeSlider::-moz-range-track,
body.dark-theme #detuneSlider::-moz-range-track {
    height: 3px !important;
    background: var(--slider-bg, rgba(255, 255, 255, 0.2)) !important;
    border-radius: 2px !important;
    border: none !important;
}

/* Consistent thumb styling for both sliders */
body.dark-theme #transposeSlider::-webkit-slider-thumb,
body.dark-theme #detuneSlider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: #64B5F6 !important; /* Light blue slider thumb */
    border: none !important;
    cursor: pointer !important;
    margin-top: -4.5px !important; /* Centers the thumb on the track: (thumb height - track height) / 2 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

body.dark-theme #transposeSlider::-moz-range-thumb,
body.dark-theme #detuneSlider::-moz-range-thumb {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: #64B5F6 !important; /* Light blue slider thumb */
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* Remove any other styles that might be affecting the sliders */
body.dark-theme .transpose-detune-row input[type="range"]::before,
body.dark-theme .transpose-detune-row input[type="range"]::after {
    content: none !important;
    display: none !important;
}

/* Ensure consistent containers for both sliders */
body.dark-theme .transpose-detune-row .effect-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 50% !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Hide the scale dropdown but keep it functional */
body.dark-theme label[for="scaleSelect"],
body.dark-theme #scaleSelect,
body:not(.dark-theme) label[for="scaleSelect"],
body:not(.dark-theme) #scaleSelect {
    visibility: hidden !important; /* Hide but keep functional */
    position: absolute !important; /* Remove from flow */
    pointer-events: none !important; /* Make unclickable */
    height: 0 !important; /* Collapse height */
    width: 0 !important; /* Collapse width */
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
}

/* Remove any absolute positioning for the scale presets button */
body.dark-theme #scalePresetsToggle,
body:not(.dark-theme) #scalePresetsToggle {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    cursor: pointer !important;
}

/* Style the scale presets button to match other UI elements */
body.dark-theme #scalePresetsToggle {
    background-color: #444 !important;
    color: #eee !important;
    border: 1px solid #555 !important;
    border-radius: 3px !important;
    padding: 2px 12px !important;
    font-size: 0.75em !important;
    margin-right: 10px !important;
    vertical-align: middle !important;
    min-width: 100px !important; /* Increased from 85px to 100px for dark mode */
}

body.dark-theme #scalePresetsToggle:hover {
    background-color: #FFA333 !important; /* Lighter orange on hover */
    box-shadow: 0 0 5px rgba(255, 140, 0, 0.5) !important;
}

body:not(.dark-theme) #scalePresetsToggle {
    min-width: 85px !important; /* Keep original width for light mode */
    padding: 2px 12px !important;
    font-size: 0.75em !important;
    margin-right: 10px !important;
    vertical-align: middle !important;
}

/* Make the rhythm dropdown take full width since scale is hidden */
body.dark-theme .rhythm-scale-row .effect-group:last-child,
body:not(.dark-theme) .rhythm-scale-row .effect-group:last-child {
    flex: 1 !important;
    width: 100% !important;
}

/* Ensure the rhythm label and dropdown are properly aligned */
body.dark-theme .rhythm-scale-row label[for="rhythmPresetSelect"],
body:not(.dark-theme) .rhythm-scale-row label[for="rhythmPresetSelect"] {
    display: inline-block !important;
    margin-right: 8px !important;
}

/* Give the rhythm dropdown more width now that it has more space */
body.dark-theme #rhythmPresetSelect,
body:not(.dark-theme) #rhythmPresetSelect {
    min-width: 200px !important;
    width: calc(100% - 70px) !important; /* Account for the label width */
}

/* Make the rhythm-scale-row use a column layout */
body.dark-theme .rhythm-scale-row,
body:not(.dark-theme) .rhythm-scale-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important; /* Space between the scale and rhythm rows */
    margin-bottom: 5px !important;
    margin-top: 6px !important;
    flex-wrap: wrap !important;
}

/* Style for scale row */
body.dark-theme .rhythm-scale-row .effect-group:first-of-type:not([style*="visibility: hidden"]),
body:not(.dark-theme) .rhythm-scale-row .effect-group:first-of-type:not([style*="visibility: hidden"]) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    margin-bottom: 5px !important;
}

/* Style for rhythm row */
body.dark-theme .rhythm-scale-row .effect-group:last-of-type,
body:not(.dark-theme) .rhythm-scale-row .effect-group:last-of-type {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    flex-basis: 100% !important;
    flex-wrap: wrap !important;
}

/* Style for rhythm dropdown to take full width */
body.dark-theme #rhythmPresetSelect,
body:not(.dark-theme) #rhythmPresetSelect {
    flex: 1 !important;
    min-width: 200px !important;
}

/* Force rhythm dropdown container to take full width and break to new line */
body.dark-theme .rhythm-scale-row .effect-group:has(#rhythmPresetSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#rhythmPresetSelect) {
    width: 100% !important;
    flex-basis: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    margin-top: 8px !important;
}

/* Alternative selector for browsers that don't support :has */
body.dark-theme .rhythm-scale-row .effect-group:last-of-type,
body:not(.dark-theme) .rhythm-scale-row .effect-group:last-of-type {
    width: 100% !important;
    flex-basis: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    margin-top: 8px !important;
}

/* Style for scale and rhythm labels */
body.dark-theme .rhythm-scale-row span,
body.dark-theme .rhythm-scale-row label,
body:not(.dark-theme) .rhythm-scale-row span,
body:not(.dark-theme) .rhythm-scale-row label {
    font-size: 0.75em !important;
    margin-right: 8px !important;
    white-space: nowrap !important;
}

/* Style for scale presets button - Orange for both themes */
body.dark-theme #scalePresetsToggle,
body:not(.dark-theme) #scalePresetsToggle {
    height: 22px !important;
    padding: 2px 12px !important;
    font-size: 0.75em !important;
    margin-right: 10px !important; /* Ensure margin-right is applied */
    background-color: #FF8C00 !important; /* Orange */
    color: white !important;
    border: 1px solid #E67300 !important; /* Darker orange border */
    border-radius: 3px !important;
    cursor: pointer !important;
    min-width: 120px !important; /* Increased to match sampler button width */
}

/* Specific width for dark mode - wider */
body.dark-theme #scalePresetsToggle {
    min-width: 120px !important; /* Increased from 100px to 120px to match sampler */
}

/* Light mode width */
body:not(.dark-theme) #scalePresetsToggle {
    min-width: 120px !important; /* Increased from 85px to 120px to match sampler */
}

/* Hover effect for dark theme presets button */
body.dark-theme #scalePresetsToggle:hover {
    background-color: #FFA333 !important; /* Lighter orange on hover */
    box-shadow: 0 0 5px rgba(255, 140, 0, 0.5) !important;
}

/* Hover effect for light theme presets button */
body:not(.dark-theme) #scalePresetsToggle:hover {
    background-color: #FFA333 !important; /* Lighter orange on hover */
    box-shadow: 0 0 5px rgba(255, 140, 0, 0.5) !important;
}

/* Ensure sampler scale button has consistent width */
body.dark-theme #samplerScalePresetsToggle,
body:not(.dark-theme) #samplerScalePresetsToggle {
    min-width: 120px !important; /* Ensure consistent width */
    height: 22px !important;
    padding: 2px 12px !important;
    font-size: 0.75em !important;
    margin-right: 10px !important;
    background-color: #FF8C00 !important; /* Orange */
    color: white !important;
    border: 1px solid #E67300 !important; /* Darker orange border */
    border-radius: 3px !important;
    cursor: pointer !important;
}

/* Hover effect for sampler scale button */
body.dark-theme #samplerScalePresetsToggle:hover,
body:not(.dark-theme) #samplerScalePresetsToggle:hover {
    background-color: #FFA333 !important; /* Lighter orange on hover */
    box-shadow: 0 0 5px rgba(255, 140, 0, 0.5) !important;
}

/* Style for the current scale display - Override inline styles */
body.dark-theme #currentScaleDisplay {
    color: #FFD700 !important; /* Yellow in dark mode */
    font-size: 1em !important; /* Bigger text */
    font-weight: bold !important; /* Bold text */
    margin-top: 6px !important;
    margin-bottom: 4px !important;
    max-width: 150px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding-left: 1px !important;
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    clear: both !important;
    float: none !important;
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
}

body:not(.dark-theme) #currentScaleDisplay {
    color: #1E3A8A !important; /* Dark blue in light mode */
    font-size: 1em !important; /* Bigger text */
    font-weight: bold !important; /* Bold text */
    margin-top: 4px !important;
    margin-bottom: 3px !important;
    max-width: 150px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding-left: 1px !important;
    display: block !important;
    width: 100% !important;
    text-align: left !important;
}

/* Additional override for inline styles */
body.dark-theme #currentScaleDisplay[style*="color: #888"] {
    color: #FFD700 !important; /* Force yellow in dark mode */
}

body:not(.dark-theme) #currentScaleDisplay[style*="color: #888"] {
    color: #1E3A8A !important; /* Force dark blue in light mode */
}

/* Override font-size and font-weight inline styles */
body.dark-theme #currentScaleDisplay[style*="font-size: 0.85em"] {
    font-size: 1em !important; /* Force bigger text */
    font-weight: bold !important; /* Force bold text */
}

body:not(.dark-theme) #currentScaleDisplay[style*="font-size: 0.85em"] {
    font-size: 1em !important; /* Force bigger text */
    font-weight: bold !important; /* Force bold text */
}

/* Force effect-group to use column layout in dark mode */
body.dark-theme .effect-group:has(#scalePresetsToggle) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    position: relative !important;
}

/* Alternative selector for browsers that don't support :has */
body.dark-theme .music-generator-controls-panel .rhythm-scale-row .effect-group:first-of-type {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    position: relative !important;
}

/* Override the flex-start alignment for scale dropdown containers to fix indentation */
body.dark-theme .effect-group:has(#scaleQuickSelect) {
    align-items: center !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
}

body.dark-theme .effect-group:has(#samplerScaleQuickSelect) {
    align-items: center !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
}

/* Force the scale dropdown containers to have no left margin or padding in dark mode */
body.dark-theme .music-generator-controls-panel .effect-group:has(#scaleQuickSelect) {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    justify-content: flex-start !important;
}

body.dark-theme .music-generator-controls-panel .effect-group:has(#samplerScaleQuickSelect) {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    justify-content: flex-start !important;
}

/* Ultra-specific override for dark mode scale dropdown alignment */
body.dark-theme .music-generator-controls-panel .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    justify-content: flex-start !important;
    align-items: center !important;
}

body.dark-theme .music-generator-controls-panel .rhythm-scale-row .effect-group:has(#samplerScaleQuickSelect) {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    justify-content: flex-start !important;
    align-items: center !important;
}

/* Force inline styles to be overridden in dark mode */
body.dark-theme .music-generator-controls-panel .effect-group[style*="margin"]:has(#scaleQuickSelect) {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

body.dark-theme .music-generator-controls-panel .effect-group[style*="margin"]:has(#samplerScaleQuickSelect) {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Force proper layout for scale presets container in dark mode */
body.dark-theme .scale-presets-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
}

body.dark-theme .scale-presets-container > div:first-child {
    width: 100% !important;
    display: block !important;
    margin-bottom: 0 !important;
}

body.dark-theme .scale-presets-container #currentScaleDisplay {
    width: 100% !important;
    display: block !important;
    margin-top: 6px !important;
    line-height: 1.2 !important;
    float: none !important;
    clear: both !important;
}

/* Dark mode styling for floating panels */
body.dark-theme .floating-panel {
    background-color: #000000 !important; /* Black background */
    border: 1px solid #333333 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}

body.dark-theme .floating-panel .panel-header {
    background-color: #121212 !important; /* Very dark gray header */
    border-bottom: 1px solid #333333 !important;
    color: #ffffff !important;
}

body.dark-theme .floating-panel .panel-content {
    color: #e0e0e0 !important;
}

body.dark-theme .floating-panel .panel-content small {
    color: #aaaaaa !important;
}

body.dark-theme .floating-panel .plasmid-controls label {
    color: #dddddd !important;
}

body.dark-theme .floating-panel select {
    background-color: #222222 !important;
    color: #ffffff !important;
    border: 1px solid #444444 !important;
}

body.dark-theme .floating-panel .plasmid-description {
    color: #bbbbbb !important;
    border-top: 1px solid #333333 !important;
    background-color: #111111 !important;
}

body.dark-theme .floating-panel .panel-footer {
    background-color: #111111 !important;
    border-top: 1px solid #333333 !important;
}

body.dark-theme .floating-panel .action-button {
    background-color: #4CAF50 !important; /* Green button */
    color: #ffffff !important;
    border: 1px solid #388E3C !important;
}

body.dark-theme .floating-panel .action-button:hover {
    background-color: #66BB6A !important; /* Lighter green on hover */
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.5) !important;
}

body.dark-theme .floating-panel .close-button {
    color: #dddddd !important;
}

body.dark-theme .floating-panel .close-button:hover {
    background-color: #333333 !important;
}

/* Specific styling for Scale Presets panel */
body.dark-theme #scalePresetsPanel.floating-panel .panel-header {
    background-color: #121212 !important;
}

/* Specific styling for Melody Plasmids panel */
body.dark-theme #melodicPlasmidsPanel.floating-panel .panel-header {
    background-color: #1b5e20 !important; /* Dark green for melody */
}

/* Specific styling for Rhythm Plasmids panel */
body.dark-theme #rhythmPlasmidsPanel.floating-panel .panel-header {
    background-color: #4a148c !important; /* Dark purple for rhythm */
} 

/* Override spacing for octave range controls to maintain proper separation */
body.dark-theme .music-generator-controls-panel .effect-group:has(h3:contains("Octave Range")) {
    order: 6 !important; /* Place after sampler A4 reference */
    margin-bottom: 25px !important; /* Match the light theme spacing */
}

body.dark-theme .music-generator-controls-panel .effect-group:has(h3:contains("Sampler Octave Range")) {
    order: 7 !important; /* Place after synthesizer octave range */
    margin-bottom: 0 !important; /* Keep the sampler control at the bottom */
}

/* Alternative approach for browsers that don't support :has */
body.dark-theme .music-generator-controls-panel .effect-group h3:first-child {
    margin-bottom: 25px !important; /* Add spacing after the first octave range heading */
}

body.dark-theme .music-generator-controls-panel .effect-group:last-child {
    margin-bottom: 0 !important; /* Keep the sampler control at the bottom */
}

/* Specific targeting for octave range spacing in dark theme */
body.dark-theme .music-generator-controls-panel .effect-group[style*="margin-bottom: 25px"] {
    margin-bottom: 25px !important; /* Force the spacing */
}

body.dark-theme .music-generator-controls-panel .effect-group[style*="margin-bottom: 0"] {
    margin-bottom: 0 !important; /* Keep zero margin for sampler control */
}

body.dark-theme .music-generator-controls-panel .gradient-bar,
body.dark-theme .music-generator-controls-panel .slider-wrapper {
    height: 4px !important; /* Match the expected height */
    margin: 0 !important; /* Remove margins */
}

/* Light mode gradient bar height fix */
body:not(.dark-theme) .music-generator-controls-panel .gradient-bar {
    height: 4px !important; /* Match the expected height */
    margin: 0 !important; /* Remove margins */
}

/* Fix light theme background to be light gray instead of black */
body:not(.dark-theme) {
    background-color: #f5f5f5 !important; /* Light gray background */
    color: #333333 !important; /* Dark text */
}

/* Ensure light theme body background is properly set */
body:not(.dark-theme) body {
    background-color: #f5f5f5 !important; /* Light gray background */
}

/* Target the specific octave range effect groups by their content */
body.dark-theme .music-generator-controls-panel .effect-group:has(h3:contains("Synthesizer Octave Range")) {
    order: 6 !important;
    margin: 5px 0 10px 0 !important;
}

body.dark-theme .music-generator-controls-panel .effect-group:has(h3:contains("Sampler Octave Range")) {
    order: 7 !important;
    margin: 5px 0 10px 0 !important;
}

/* Target by unique IDs for more reliable selection */
body.dark-theme .music-generator-controls-panel .effect-group:has(#octaveRangeDisplay) {
    order: 6 !important;
    margin: 5px 0 10px 0 !important;
}

body.dark-theme .music-generator-controls-panel .effect-group:has(#samplerOctaveRangeDisplay) {
    order: 7 !important;
    margin: 5px 0 10px 0 !important;
}

/* Force order with inline styles for JavaScript-rebuilt elements */
body.dark-theme .music-generator-controls-panel .effect-group.octave-range-component {
    order: 6 !important;
}

body.dark-theme .music-generator-controls-panel .effect-group:has(#samplerMinOctaveSlider) {
    order: 7 !important;
}

/* Style the scale quick select dropdown */
body.dark-theme #scaleQuickSelect,
body:not(.dark-theme) #scaleQuickSelect {
    margin: 0 !important;
    padding: 2px 3px !important;
    height: 24px !important;
    font-size: 0.75em !important;
    vertical-align: top !important;
    flex: 1 !important;
    background-color: #333 !important;
    color: #fff !important;
    border: 1px solid #555 !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    min-width: 120px !important;
}

/* Ensure the scale controls container allows wrapping */
body.dark-theme .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .effect-group:has(#scaleQuickSelect) {
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    width: 100% !important;
}

body.dark-theme #scaleQuickSelect:focus,
body:not(.dark-theme) #scaleQuickSelect:focus {
    outline: none !important;
    border-color: #4CAF50 !important;
    box-shadow: 0 0 3px rgba(76, 175, 80, 0.3) !important;
}

/* Light mode styling for scale quick select */
body:not(.dark-theme) #scaleQuickSelect {
    background-color: #fff !important;
    color: #333 !important;
    border: 1px solid #ccc !important;
    padding: 2px 3px !important;
    height: 24px !important;
}

body:not(.dark-theme) #scaleQuickSelect:focus {
    border-color: #4CAF50 !important;
    box-shadow: 0 0 3px rgba(76, 175, 80, 0.3) !important;
}

/* Style the sampler scale quick select dropdown */
body.dark-theme #samplerScaleQuickSelect,
body:not(.dark-theme) #samplerScaleQuickSelect {
    margin: 0 !important;
    padding: 2px 3px !important;
    height: 24px !important;
    font-size: 0.75em !important;
    vertical-align: top !important;
    flex: 1 !important;
    background-color: #333 !important;
    color: #fff !important;
    border: 1px solid #555 !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    min-width: 120px !important;
}

/* Ensure the sampler scale controls container allows wrapping */
body.dark-theme .effect-group:has(#samplerScaleQuickSelect),
body:not(.dark-theme) .effect-group:has(#samplerScaleQuickSelect) {
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    width: 100% !important;
}

body.dark-theme #samplerScaleQuickSelect:focus,
body:not(.dark-theme) #samplerScaleQuickSelect:focus {
    outline: none !important;
    border-color: #4CAF50 !important;
    box-shadow: 0 0 3px rgba(76, 175, 80, 0.3) !important;
}

/* Light mode styling for sampler scale quick select */
body:not(.dark-theme) #samplerScaleQuickSelect {
    background-color: #fff !important;
    color: #333 !important;
    border: 1px solid #ccc !important;
}

body:not(.dark-theme) #samplerScaleQuickSelect:focus {
    border-color: #4CAF50 !important;
    box-shadow: 0 0 3px rgba(76, 175, 80, 0.3) !important;
}

/* Style the sampler scale presets toggle button */
body.dark-theme #samplerScalePresetsToggle,
body:not(.dark-theme) #samplerScalePresetsToggle {
    height: 22px !important;
    padding: 3px 12px !important;
    font-size: 0.75em !important;
    margin-right: 10px !important;
    background-color: #FF8C00 !important; /* Orange */
    color: white !important;
    border: 1px solid #E67300 !important; /* Darker orange border */
    border-radius: 3px !important;
    cursor: pointer !important;
    min-width: 120px !important; /* Increased to match sampler button width */
}

body.dark-theme #samplerScalePresetsToggle:hover,
body:not(.dark-theme) #samplerScalePresetsToggle:hover {
    background-color: #FFA333 !important; /* Lighter orange on hover */
    box-shadow: 0 0 5px rgba(255, 140, 0, 0.5) !important;
}

/* Style the sampler current scale display - Override inline styles */
body.dark-theme #samplerCurrentScaleDisplay {
    font-size: 1em !important; /* Bigger text */
    font-weight: bold !important; /* Bold text */
    color: #FFD700 !important; /* Yellow in dark mode */
    max-width: 150px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    line-height: 1.2 !important;
    min-width: 100px !important;
    margin-top: 6px !important;
    margin-bottom: 4px !important;
    padding-left: 1px !important;
    width: 100% !important;
    text-align: left !important;
}

body:not(.dark-theme) #samplerCurrentScaleDisplay {
    font-size: 1em !important; /* Bigger text */
    font-weight: bold !important; /* Bold text */
    color: #1E3A8A !important; /* Dark blue in light mode */
    max-width: 150px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    line-height: 1.2 !important;
    min-width: 100px !important;
    margin-top: 4px !important;
    margin-bottom: 3px !important;
    padding-left: 1px !important;
    width: 100% !important;
    text-align: left !important;
}

/* Additional override for sampler inline styles */
body.dark-theme #samplerCurrentScaleDisplay[style*="color: #888"] {
    color: #FFD700 !important; /* Force yellow in dark mode */
}

body:not(.dark-theme) #samplerCurrentScaleDisplay[style*="color: #888"] {
    color: #1E3A8A !important; /* Force dark blue in light mode */
}

/* Override sampler font-size and font-weight inline styles */
body.dark-theme #samplerCurrentScaleDisplay[style*="font-size: 0.85em"] {
    font-size: 1em !important; /* Force bigger text */
    font-weight: bold !important; /* Force bold text */
}

body:not(.dark-theme) #samplerCurrentScaleDisplay[style*="font-size: 0.85em"] {
    font-size: 1em !important; /* Force bigger text */
    font-weight: bold !important; /* Force bold text */
}

/* Style the sampler rhythm scale row */
body.dark-theme .sampler-rhythm-scale-row,
body:not(.dark-theme) .sampler-rhythm-scale-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    margin-bottom: 0 !important;
    margin-top: 6px !important;
}

/* Style the sampler scale controls row */
body.dark-theme .sampler-rhythm-scale-row .effect-group:first-of-type:not([style*="visibility: hidden"]),
body:not(.dark-theme) .sampler-rhythm-scale-row .effect-group:first-of-type:not([style*="visibility: hidden"]) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    margin-bottom: 5px !important;
}

/* Force left alignment for scale controls in dark mode - ULTIMATE FIX */
body.dark-theme .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    justify-content: flex-start !important;
    align-items: center !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

/* Alternative selector for browsers that don't support :has */
body.dark-theme .rhythm-scale-row .effect-group:nth-child(2) {
    justify-content: flex-start !important;
    align-items: center !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

/* Force left alignment for sampler scale controls in dark mode */
body.dark-theme .rhythm-scale-row .effect-group:has(#samplerScaleQuickSelect) {
    justify-content: flex-start !important;
    align-items: center !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

/* Alternative selector for browsers that don't support :has */
body.dark-theme .rhythm-scale-row .effect-group:nth-child(3) {
    justify-content: flex-start !important;
    align-items: center !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

/* Override any inline styles that might be causing the alignment issue */
body.dark-theme .rhythm-scale-row .effect-group[style*="justify-content"]:has(#scaleQuickSelect) {
    justify-content: flex-start !important;
}

body.dark-theme .rhythm-scale-row .effect-group[style*="justify-content"]:has(#samplerScaleQuickSelect) {
    justify-content: flex-start !important;
}

/* Force the scale dropdown to start from the left edge */
body.dark-theme #scaleQuickSelect {
    margin-left: 0 !important;
    padding-left: 2px !important;
    flex: 1 !important;
    min-width: 120px !important;
}

body.dark-theme #samplerScaleQuickSelect {
    margin-left: 0 !important;
    padding-left: 2px !important;
    flex: 1 !important;
    min-width: 120px !important;
}

/* Ensure the scale presets button is properly positioned */
body.dark-theme #scalePresetsToggle {
    margin-left: 0 !important;
    margin-right: 10px !important;
    flex-shrink: 0 !important;
}

body.dark-theme #samplerScalePresetsToggle {
    margin-left: 0 !important;
    margin-right: 10px !important;
    flex-shrink: 0 !important;
}

/* Force the rhythm-scale-row container to not add any unwanted spacing */
body.dark-theme .rhythm-scale-row {
    margin-left: 0 !important;
    padding-left: 0 !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
}

/* Override any parent container styles that might be affecting alignment */
body.dark-theme .music-generator-controls-panel .control-group {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

body.dark-theme .music-generator-controls-panel .control-group .rhythm-scale-row {
    margin-left: 0 !important;
    padding-left: 0 !important;
    justify-content: flex-start !important;
}

/* Ensure no unwanted margins or padding from any parent elements */
body.dark-theme .music-generator-controls-panel .control-group .rhythm-scale-row .effect-group {
    margin-left: 0 !important;
    padding-left: 0 !important;
    justify-content: flex-start !important;
}

/* Force left alignment for the entire scale controls section */
body.dark-theme .rhythm-scale-row .effect-group:has(#scaleQuickSelect),
body.dark-theme .rhythm-scale-row .effect-group:has(#samplerScaleQuickSelect) {
    justify-content: flex-start !important;
    align-items: center !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    position: relative !important;
    left: 0 !important;
}

/* Override any CSS that might be centering or right-aligning these elements */
body.dark-theme .rhythm-scale-row .effect-group:has(#scaleQuickSelect) *,
body.dark-theme .rhythm-scale-row .effect-group:has(#samplerScaleQuickSelect) * {
    text-align: left !important;
}

/* Force the container to start from the absolute left edge */
body.dark-theme .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before,
body.dark-theme .rhythm-scale-row .effect-group:has(#samplerScaleQuickSelect)::before {
    content: none !important;
    display: none !important;
}

/* Remove any potential spacing from pseudo-elements */
body.dark-theme .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::after,
body.dark-theme .rhythm-scale-row .effect-group:has(#samplerScaleQuickSelect)::after {
    content: none !important;
    display: none !important;
}

/* Ensure the scale dropdown starts at the very left edge */
body.dark-theme .rhythm-scale-row .effect-group:has(#scaleQuickSelect) > *:first-child,
body.dark-theme .rhythm-scale-row .effect-group:has(#samplerScaleQuickSelect) > *:first-child {
    margin-left: 0 !important;
    padding-left: 0 !important;
    position: relative !important;
    left: 0 !important;
}

/* Force left alignment for the entire rhythm-scale-row in dark mode */
body.dark-theme .rhythm-scale-row {
    justify-content: flex-start !important;
    align-items: stretch !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

/* Override any potential CSS that might be affecting the alignment */
body.dark-theme .music-generator-controls-panel .rhythm-scale-row .effect-group:has(#scaleQuickSelect),
body.dark-theme .music-generator-controls-panel .rhythm-scale-row .effect-group:has(#samplerScaleQuickSelect) {
    justify-content: flex-start !important;
    align-items: center !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    position: relative !important;
    left: 0 !important;
    transform: none !important;
}

/* Ensure no transform or positioning is affecting the alignment */
body.dark-theme .rhythm-scale-row .effect-group:has(#scaleQuickSelect),
body.dark-theme .rhythm-scale-row .effect-group:has(#samplerScaleQuickSelect) {
    transform: none !important;
    position: relative !important;
    left: 0 !important;
    right: auto !important;
    margin-right: auto !important;
}

/* Force the scale dropdown to be the first element and start from the left */
body.dark-theme .rhythm-scale-row .effect-group:has(#scaleQuickSelect) #scaleQuickSelect,
body.dark-theme .rhythm-scale-row .effect-group:has(#samplerScaleQuickSelect) #samplerScaleQuickSelect {
    order: 1 !important;
    margin-left: 0 !important;
    padding-left: 2px !important;
    flex: 1 !important;
    min-width: 120px !important;
}

/* Ensure the button comes second */
body.dark-theme .rhythm-scale-row .effect-group:has(#scaleQuickSelect) #scalePresetsToggle,
body.dark-theme .rhythm-scale-row .effect-group:has(#samplerScaleQuickSelect) #samplerScalePresetsToggle {
    order: 2 !important;
    margin-left: 0 !important;
    margin-right: 10px !important;
    flex-shrink: 0 !important;
}

/* Ensure the display text comes third */
body.dark-theme .rhythm-scale-row .effect-group:has(#scaleQuickSelect) #currentScaleDisplay,
body.dark-theme .rhythm-scale-row .effect-group:has(#samplerScaleQuickSelect) #samplerCurrentScaleDisplay {
    order: 3 !important;
    margin-left: 0 !important;
    flex-shrink: 0 !important;
}

/* ULTIMATE FIX: Override any CSS that might be centering flex containers in dark mode */
body.dark-theme .rhythm-scale-row .effect-group[style*="display: flex"] {
    justify-content: flex-start !important;
    align-items: center !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    position: relative !important;
    left: 0 !important;
    transform: none !important;
}

/* Force the scale dropdown to start from the absolute left edge */
body.dark-theme .rhythm-scale-row .effect-group[style*="display: flex"] #scaleQuickSelect,
body.dark-theme .rhythm-scale-row .effect-group[style*="display: flex"] #samplerScaleQuickSelect {
    order: 1 !important;
    margin-left: 0 !important;
    padding-left: 2px !important;
    flex: 1 !important;
    min-width: 120px !important;
    position: relative !important;
    left: 0 !important;
}

/* Ensure the scale presets button is properly positioned */
body.dark-theme .rhythm-scale-row .effect-group[style*="display: flex"] #scalePresetsToggle,
body.dark-theme .rhythm-scale-row .effect-group[style*="display: flex"] #samplerScalePresetsToggle {
    order: 2 !important;
    margin-left: 0 !important;
    margin-right: 10px !important;
    flex-shrink: 0 !important;
    position: relative !important;
    left: 0 !important;
}

/* Ensure the display text is properly positioned */
body.dark-theme .rhythm-scale-row .effect-group[style*="display: flex"] #currentScaleDisplay,
body.dark-theme .rhythm-scale-row .effect-group[style*="display: flex"] #samplerCurrentScaleDisplay {
    order: 3 !important;
    margin-left: 0 !important;
    flex-shrink: 0 !important;
    position: relative !important;
    left: 0 !important;
}

/* Override any potential CSS inheritance that might be centering content */
body.dark-theme .rhythm-scale-row .effect-group[style*="display: flex"] * {
    text-align: left !important;
}

/* Force the container to start from the absolute left edge */
body.dark-theme .rhythm-scale-row .effect-group[style*="display: flex"]::before,
body.dark-theme .rhythm-scale-row .effect-group[style*="display: flex"]::after {
    content: none !important;
    display: none !important;
}

/* Ensure the first child (scale dropdown) starts at the very left edge */
body.dark-theme .rhythm-scale-row .effect-group[style*="display: flex"] > *:first-child {
    margin-left: 0 !important;
    padding-left: 0 !important;
    position: relative !important;
    left: 0 !important;
}

/* Override any potential CSS that might be affecting the alignment */
body.dark-theme .music-generator-controls-panel .rhythm-scale-row .effect-group[style*="display: flex"] {
    justify-content: flex-start !important;
    align-items: center !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    position: relative !important;
    left: 0 !important;
    transform: none !important;
}

/* Force left alignment for the entire rhythm-scale-row in dark mode */
body.dark-theme .rhythm-scale-row[style*="display: flex"] {
    justify-content: flex-start !important;
    align-items: stretch !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

/* Override any parent container styles that might be affecting alignment */
body.dark-theme .music-generator-controls-panel .control-group {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
}

body.dark-theme .music-generator-controls-panel .control-group .rhythm-scale-row {
    margin-left: 0 !important;
    padding-left: 0 !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Ensure no unwanted margins or padding from any parent elements */
body.dark-theme .music-generator-controls-panel .control-group .rhythm-scale-row .effect-group {
    margin-left: 0 !important;
    padding-left: 0 !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force the scale dropdown to be the first element and start from the left */
body.dark-theme .rhythm-scale-row .effect-group[style*="display: flex"] #scaleQuickSelect,
body.dark-theme .rhythm-scale-row .effect-group[style*="display: flex"] #samplerScaleQuickSelect {
    order: 1 !important;
    margin-left: 0 !important;
    padding-left: 2px !important;
    flex: 1 !important;
    min-width: 120px !important;
    position: relative !important;
    left: 0 !important;
}

/* Ensure the button comes second */
body.dark-theme .rhythm-scale-row .effect-group[style*="display: flex"] #scalePresetsToggle,
body.dark-theme .rhythm-scale-row .effect-group[style*="display: flex"] #samplerScalePresetsToggle {
    order: 2 !important;
    margin-left: 0 !important;
    margin-right: 10px !important;
    flex-shrink: 0 !important;
    position: relative !important;
    left: 0 !important;
}

/* Ensure the display text comes third */
body.dark-theme .rhythm-scale-row .effect-group[style*="display: flex"] #currentScaleDisplay,
body.dark-theme .rhythm-scale-row .effect-group[style*="display: flex"] #samplerCurrentScaleDisplay {
    order: 3 !important;
    margin-left: 0 !important;
    flex-shrink: 0 !important;
    position: relative !important;
    left: 0 !important;
}

/* ===== FIX FOR SYNTH SCALE DROPDOWN AND BUTTON ALIGNMENT IN DARK MODE ===== */

/* Force left alignment for synth scale controls in dark mode */
body.dark-theme .rhythm-scale-row .effect-group:has(#scaleQuickSelect),
body.dark-theme .rhythm-scale-row .effect-group:has(#scalePresetsToggle),
body.dark-theme .rhythm-scale-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important; /* Force left alignment */
    text-align: left !important;
    align-items: center !important;
}

/* Override any centering styles for the scale dropdown container */
body.dark-theme .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scaleQuickSelect) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any centering styles for the scale button container */
body.dark-theme .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scalePresetsToggle) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any centering styles for the scale display container */
body.dark-theme .rhythm-scale-row .effect-group[style*="display: flex"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for all scale-related elements */
body.dark-theme .rhythm-scale-row .effect-group:has(#scaleQuickSelect) *,
body.dark-theme .rhythm-scale-row .effect-group:has(#scalePresetsToggle) *,
body.dark-theme .rhythm-scale-row .effect-group:has(#currentScaleDisplay) * {
    text-align: left !important;
}

/* Override any pseudo-elements that might be causing centering */
body.dark-theme .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before,
body.dark-theme .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::after,
body.dark-theme .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::before,
body.dark-theme .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::after,
body.dark-theme .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::before,
body.dark-theme .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::after {
    display: none !important;
}

/* Ensure the scale dropdown itself is left-aligned */
body.dark-theme #scaleQuickSelect {
    text-align: left !important;
    justify-self: flex-start !important;
}

/* Ensure the scale button is left-aligned */
body.dark-theme #scalePresetsToggle {
    text-align: left !important;
    justify-self: flex-start !important;
}

/* Ensure the scale display is left-aligned */
body.dark-theme #currentScaleDisplay {
    text-align: left !important;
    justify-self: flex-start !important;
}

/* Override any inline styles that might be causing centering */
body.dark-theme .rhythm-scale-row .effect-group[style*="justify-content"]:has(#scaleQuickSelect),
body.dark-theme .rhythm-scale-row .effect-group[style*="justify-content"]:has(#scalePresetsToggle),
body.dark-theme .rhythm-scale-row .effect-group[style*="justify-content"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
}

/* Force left alignment for the entire scale controls row */
body.dark-theme .rhythm-scale-row .effect-group:has(#scaleQuickSelect),
body.dark-theme .rhythm-scale-row .effect-group:has(#scalePresetsToggle),
body.dark-theme .rhythm-scale-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

/* Ensure the scale controls maintain their original layout */
body.dark-theme .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

/* Override any specific centering rules that might be applied */
body.dark-theme .transpose-detune-row .effect-group:has(#scaleQuickSelect),
body.dark-theme .transpose-detune-row .effect-group:has(#scalePresetsToggle),
body.dark-theme .transpose-detune-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for any effect-group containing scale controls */
body.dark-theme .effect-group:has(#scaleQuickSelect),
body.dark-theme .effect-group:has(#scalePresetsToggle),
body.dark-theme .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any music-generator-controls-panel specific centering */
body.dark-theme .music-generator-controls-panel .effect-group:has(#scaleQuickSelect),
body.dark-theme .music-generator-controls-panel .effect-group:has(#scalePresetsToggle),
body.dark-theme .music-generator-controls-panel .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* ===== APPLY SAME LAYOUT TO LIGHT MODE ===== */

/* Force left alignment for synth scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important; /* Force left alignment */
    text-align: left !important;
    align-items: center !important;
}

/* Override any centering styles for the scale dropdown container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scaleQuickSelect) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any centering styles for the scale button container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scalePresetsToggle) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any centering styles for the scale display container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for all scale-related elements in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) * {
    text-align: left !important;
}

/* Override any pseudo-elements that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::after {
    display: none !important;
}

/* Ensure the scale dropdown itself is left-aligned in light mode */
body:not(.dark-theme) #scaleQuickSelect {
    text-align: left !important;
    justify-self: flex-start !important;
}

/* Ensure the scale button is left-aligned in light mode */
body:not(.dark-theme) #scalePresetsToggle {
    text-align: left !important;
    justify-self: flex-start !important;
}

/* Ensure the scale display is left-aligned in light mode */
body:not(.dark-theme) #currentScaleDisplay {
    text-align: left !important;
    justify-self: flex-start !important;
}

/* Override any inline styles that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
}

/* Force left alignment for the entire scale controls row in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

/* Ensure the scale controls maintain their original layout in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

/* Override any specific centering rules that might be applied in light mode */
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for any effect-group containing scale controls in light mode */
body:not(.dark-theme) .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any music-generator-controls-panel specific centering in light mode */
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* ===== APPLY SAME LAYOUT TO LIGHT MODE ===== */

/* Force left alignment for synth scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important; /* Force left alignment */
    text-align: left !important;
    align-items: center !important;
}

/* Create vertical layout for scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

/* First row: dropdown and button side by side */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before {
    content: "" !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
}

/* Style the dropdown and button container */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    position: relative !important;
}

/* Position dropdown and button in the first row */
body:not(.dark-theme) #scaleQuickSelect {
    display: inline-block !important;
    flex: 1 !important;
    min-width: 120px !important;
    margin-right: 8px !important;
}

body:not(.dark-theme) #scalePresetsToggle {
    display: inline-block !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

/* Position the display label on the second row */
body:not(.dark-theme) #currentScaleDisplay {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* Create vertical layout for sampler scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#samplerScaleQuickSelect) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

/* Position sampler dropdown and button in the first row */
body:not(.dark-theme) #samplerScaleQuickSelect {
    display: inline-block !important;
    flex: 1 !important;
    min-width: 120px !important;
    margin-right: 8px !important;
}

body:not(.dark-theme) #samplerScalePresetsToggle {
    display: inline-block !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

/* Position the sampler display label on the second row */
body:not(.dark-theme) #samplerCurrentScaleDisplay {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* Override any centering styles for the scale dropdown container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scaleQuickSelect) {
    justify-content: flex-start !important;
    text-align: left !important;
    flex-direction: column !important;
}

/* Override any centering styles for the scale button container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scalePresetsToggle) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any centering styles for the scale display container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for all scale-related elements in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) * {
    text-align: left !important;
}

/* Override any pseudo-elements that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::after {
    display: none !important;
}

/* Override any inline styles that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
}

/* Override any specific centering rules that might be applied in light mode */
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for any effect-group containing scale controls in light mode */
body:not(.dark-theme) .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any music-generator-controls-panel specific centering in light mode */
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* ===== APPLY SAME LAYOUT TO LIGHT MODE ===== */

/* Force left alignment for synth scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important; /* Force left alignment */
    text-align: left !important;
    align-items: center !important;
}

/* Create vertical layout for scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

/* First row: dropdown and button side by side */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before {
    content: "" !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
}

/* Style the dropdown and button container */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    position: relative !important;
}

/* Position dropdown and button in the first row */
body:not(.dark-theme) #scaleQuickSelect {
    display: inline-block !important;
    flex: 1 !important;
    min-width: 120px !important;
    margin-right: 8px !important;
}

body:not(.dark-theme) #scalePresetsToggle {
    display: inline-block !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

/* Position the display label on the second row */
body:not(.dark-theme) #currentScaleDisplay {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* Create vertical layout for sampler scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#samplerScaleQuickSelect) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

/* Position sampler dropdown and button in the first row */
body:not(.dark-theme) #samplerScaleQuickSelect {
    display: inline-block !important;
    flex: 1 !important;
    min-width: 120px !important;
    margin-right: 8px !important;
}

body:not(.dark-theme) #samplerScalePresetsToggle {
    display: inline-block !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

/* Position the sampler display label on the second row */
body:not(.dark-theme) #samplerCurrentScaleDisplay {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* Override any centering styles for the scale dropdown container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scaleQuickSelect) {
    justify-content: flex-start !important;
    text-align: left !important;
    flex-direction: column !important;
}

/* Override any centering styles for the scale button container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scalePresetsToggle) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any centering styles for the scale display container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for all scale-related elements in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) * {
    text-align: left !important;
}

/* Override any pseudo-elements that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::after {
    display: none !important;
}

/* Override any inline styles that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
}

/* Override any specific centering rules that might be applied in light mode */
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for any effect-group containing scale controls in light mode */
body:not(.dark-theme) .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any music-generator-controls-panel specific centering in light mode */
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* ===== APPLY SAME LAYOUT TO LIGHT MODE ===== */

/* Force left alignment for synth scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important; /* Force left alignment */
    text-align: left !important;
    align-items: center !important;
}

/* Create vertical layout for scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

/* First row: dropdown and button side by side */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before {
    content: "" !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
}

/* Style the dropdown and button container */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    position: relative !important;
}

/* Position dropdown and button in the first row */
body:not(.dark-theme) #scaleQuickSelect {
    display: inline-block !important;
    flex: 1 !important;
    min-width: 120px !important;
    margin-right: 8px !important;
}

body:not(.dark-theme) #scalePresetsToggle {
    display: inline-block !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

/* Position the display label on the second row */
body:not(.dark-theme) #currentScaleDisplay {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* Create vertical layout for sampler scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#samplerScaleQuickSelect) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

/* Position sampler dropdown and button in the first row */
body:not(.dark-theme) #samplerScaleQuickSelect {
    display: inline-block !important;
    flex: 1 !important;
    min-width: 120px !important;
    margin-right: 8px !important;
}

body:not(.dark-theme) #samplerScalePresetsToggle {
    display: inline-block !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

/* Position the sampler display label on the second row */
body:not(.dark-theme) #samplerCurrentScaleDisplay {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* Override any centering styles for the scale dropdown container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scaleQuickSelect) {
    justify-content: flex-start !important;
    text-align: left !important;
    flex-direction: column !important;
}

/* Override any centering styles for the scale button container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scalePresetsToggle) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any centering styles for the scale display container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for all scale-related elements in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) * {
    text-align: left !important;
}

/* Override any pseudo-elements that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::after {
    display: none !important;
}

/* Override any inline styles that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
}

/* Override any specific centering rules that might be applied in light mode */
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for any effect-group containing scale controls in light mode */
body:not(.dark-theme) .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any music-generator-controls-panel specific centering in light mode */
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* ===== APPLY SAME LAYOUT TO LIGHT MODE ===== */

/* Force left alignment for synth scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important; /* Force left alignment */
    text-align: left !important;
    align-items: center !important;
}

/* Create vertical layout for scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

/* First row: dropdown and button side by side */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before {
    content: "" !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
}

/* Style the dropdown and button container */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    position: relative !important;
}

/* Position dropdown and button in the first row */
body:not(.dark-theme) #scaleQuickSelect {
    display: inline-block !important;
    flex: 1 !important;
    min-width: 120px !important;
    margin-right: 8px !important;
}

body:not(.dark-theme) #scalePresetsToggle {
    display: inline-block !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

/* Position the display label on the second row */
body:not(.dark-theme) #currentScaleDisplay {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* Create vertical layout for sampler scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#samplerScaleQuickSelect) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

/* Position sampler dropdown and button in the first row */
body:not(.dark-theme) #samplerScaleQuickSelect {
    display: inline-block !important;
    flex: 1 !important;
    min-width: 120px !important;
    margin-right: 8px !important;
}

body:not(.dark-theme) #samplerScalePresetsToggle {
    display: inline-block !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

/* Position the sampler display label on the second row */
body:not(.dark-theme) #samplerCurrentScaleDisplay {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* Override any centering styles for the scale dropdown container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scaleQuickSelect) {
    justify-content: flex-start !important;
    text-align: left !important;
    flex-direction: column !important;
}

/* Override any centering styles for the scale button container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scalePresetsToggle) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any centering styles for the scale display container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for all scale-related elements in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) * {
    text-align: left !important;
}

/* Override any pseudo-elements that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::after {
    display: none !important;
}

/* Override any inline styles that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
}

/* Override any specific centering rules that might be applied in light mode */
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for any effect-group containing scale controls in light mode */
body:not(.dark-theme) .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any music-generator-controls-panel specific centering in light mode */
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* ===== APPLY SAME LAYOUT TO LIGHT MODE ===== */

/* Force left alignment for synth scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important; /* Force left alignment */
    text-align: left !important;
    align-items: center !important;
}

/* Create vertical layout for scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

/* First row: dropdown and button side by side */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before {
    content: "" !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
}

/* Style the dropdown and button container */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    position: relative !important;
}

/* Position dropdown and button in the first row */
body:not(.dark-theme) #scaleQuickSelect {
    display: inline-block !important;
    flex: 1 !important;
    min-width: 120px !important;
    margin-right: 8px !important;
}

body:not(.dark-theme) #scalePresetsToggle {
    display: inline-block !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

/* Position the display label on the second row */
body:not(.dark-theme) #currentScaleDisplay {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* Create vertical layout for sampler scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#samplerScaleQuickSelect) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

/* Position sampler dropdown and button in the first row */
body:not(.dark-theme) #samplerScaleQuickSelect {
    display: inline-block !important;
    flex: 1 !important;
    min-width: 120px !important;
    margin-right: 8px !important;
}

body:not(.dark-theme) #samplerScalePresetsToggle {
    display: inline-block !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

/* Position the sampler display label on the second row */
body:not(.dark-theme) #samplerCurrentScaleDisplay {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* Override any centering styles for the scale dropdown container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scaleQuickSelect) {
    justify-content: flex-start !important;
    text-align: left !important;
    flex-direction: column !important;
}

/* Override any centering styles for the scale button container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scalePresetsToggle) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any centering styles for the scale display container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for all scale-related elements in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) * {
    text-align: left !important;
}

/* Override any pseudo-elements that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::after {
    display: none !important;
}

/* Override any inline styles that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
}

/* Override any specific centering rules that might be applied in light mode */
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for any effect-group containing scale controls in light mode */
body:not(.dark-theme) .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any music-generator-controls-panel specific centering in light mode */
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* ===== APPLY SAME LAYOUT TO LIGHT MODE ===== */

/* Force left alignment for synth scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important; /* Force left alignment */
    text-align: left !important;
    align-items: center !important;
}

/* Create vertical layout for scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

/* First row: dropdown and button side by side */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before {
    content: "" !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
}

/* Style the dropdown and button container */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    position: relative !important;
}

/* Position dropdown and button in the first row */
body:not(.dark-theme) #scaleQuickSelect {
    display: inline-block !important;
    flex: 1 !important;
    min-width: 120px !important;
    margin-right: 8px !important;
}

body:not(.dark-theme) #scalePresetsToggle {
    display: inline-block !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

/* Position the display label on the second row */
body:not(.dark-theme) #currentScaleDisplay {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* Create vertical layout for sampler scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#samplerScaleQuickSelect) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

/* Position sampler dropdown and button in the first row */
body:not(.dark-theme) #samplerScaleQuickSelect {
    display: inline-block !important;
    flex: 1 !important;
    min-width: 120px !important;
    margin-right: 8px !important;
}

body:not(.dark-theme) #samplerScalePresetsToggle {
    display: inline-block !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

/* Position the sampler display label on the second row */
body:not(.dark-theme) #samplerCurrentScaleDisplay {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* Override any centering styles for the scale dropdown container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scaleQuickSelect) {
    justify-content: flex-start !important;
    text-align: left !important;
    flex-direction: column !important;
}

/* Override any centering styles for the scale button container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scalePresetsToggle) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any centering styles for the scale display container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for all scale-related elements in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) * {
    text-align: left !important;
}

/* Override any pseudo-elements that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::after {
    display: none !important;
}

/* Override any inline styles that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
}

/* Override any specific centering rules that might be applied in light mode */
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for any effect-group containing scale controls in light mode */
body:not(.dark-theme) .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any music-generator-controls-panel specific centering in light mode */
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* ===== APPLY SAME LAYOUT TO LIGHT MODE ===== */

/* Force left alignment for synth scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important; /* Force left alignment */
    text-align: left !important;
    align-items: center !important;
}

/* Create vertical layout for scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

/* First row: dropdown and button side by side */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before {
    content: "" !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
}

/* Style the dropdown and button container */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    position: relative !important;
}

/* Position dropdown and button in the first row */
body:not(.dark-theme) #scaleQuickSelect {
    display: inline-block !important;
    flex: 1 !important;
    min-width: 120px !important;
    margin-right: 8px !important;
}

body:not(.dark-theme) #scalePresetsToggle {
    display: inline-block !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

/* Position the display label on the second row */
body:not(.dark-theme) #currentScaleDisplay {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* Create vertical layout for sampler scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#samplerScaleQuickSelect) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

/* Position sampler dropdown and button in the first row */
body:not(.dark-theme) #samplerScaleQuickSelect {
    display: inline-block !important;
    flex: 1 !important;
    min-width: 120px !important;
    margin-right: 8px !important;
}

body:not(.dark-theme) #samplerScalePresetsToggle {
    display: inline-block !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

/* Position the sampler display label on the second row */
body:not(.dark-theme) #samplerCurrentScaleDisplay {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* Override any centering styles for the scale dropdown container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scaleQuickSelect) {
    justify-content: flex-start !important;
    text-align: left !important;
    flex-direction: column !important;
}

/* Override any centering styles for the scale button container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scalePresetsToggle) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any centering styles for the scale display container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for all scale-related elements in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) * {
    text-align: left !important;
}

/* Override any pseudo-elements that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::after {
    display: none !important;
}

/* Override any inline styles that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
}

/* Override any specific centering rules that might be applied in light mode */
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for any effect-group containing scale controls in light mode */
body:not(.dark-theme) .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any music-generator-controls-panel specific centering in light mode */
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* ===== APPLY SAME LAYOUT TO LIGHT MODE ===== */

/* Force left alignment for synth scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important; /* Force left alignment */
    text-align: left !important;
    align-items: center !important;
}

/* Create vertical layout for scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

/* First row: dropdown and button side by side */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before {
    content: "" !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
}

/* Style the dropdown and button container */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    position: relative !important;
}

/* Position dropdown and button in the first row */
body:not(.dark-theme) #scaleQuickSelect {
    display: inline-block !important;
    flex: 1 !important;
    min-width: 120px !important;
    margin-right: 8px !important;
}

body:not(.dark-theme) #scalePresetsToggle {
    display: inline-block !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

/* Position the display label on the second row */
body:not(.dark-theme) #currentScaleDisplay {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* Create vertical layout for sampler scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#samplerScaleQuickSelect) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

/* Position sampler dropdown and button in the first row */
body:not(.dark-theme) #samplerScaleQuickSelect {
    display: inline-block !important;
    flex: 1 !important;
    min-width: 120px !important;
    margin-right: 8px !important;
}

body:not(.dark-theme) #samplerScalePresetsToggle {
    display: inline-block !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

/* Position the sampler display label on the second row */
body:not(.dark-theme) #samplerCurrentScaleDisplay {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* Override any centering styles for the scale dropdown container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scaleQuickSelect) {
    justify-content: flex-start !important;
    text-align: left !important;
    flex-direction: column !important;
}

/* Override any centering styles for the scale button container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scalePresetsToggle) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any centering styles for the scale display container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for all scale-related elements in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) * {
    text-align: left !important;
}

/* Override any pseudo-elements that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::after {
    display: none !important;
}

/* Override any inline styles that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
}

/* Override any specific centering rules that might be applied in light mode */
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for any effect-group containing scale controls in light mode */
body:not(.dark-theme) .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any music-generator-controls-panel specific centering in light mode */
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* ===== APPLY SAME LAYOUT TO LIGHT MODE ===== */

/* Force left alignment for synth scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important; /* Force left alignment */
    text-align: left !important;
    align-items: center !important;
}

/* Create vertical layout for scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

/* First row: dropdown and button side by side */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before {
    content: "" !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
}

/* Style the dropdown and button container */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    position: relative !important;
}

/* Position dropdown and button in the first row */
body:not(.dark-theme) #scaleQuickSelect {
    display: inline-block !important;
    flex: 1 !important;
    min-width: 120px !important;
    margin-right: 8px !important;
}

body:not(.dark-theme) #scalePresetsToggle {
    display: inline-block !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

/* Position the display label on the second row */
body:not(.dark-theme) #currentScaleDisplay {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* Create vertical layout for sampler scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#samplerScaleQuickSelect) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

/* Position sampler dropdown and button in the first row */
body:not(.dark-theme) #samplerScaleQuickSelect {
    display: inline-block !important;
    flex: 1 !important;
    min-width: 120px !important;
    margin-right: 8px !important;
}

body:not(.dark-theme) #samplerScalePresetsToggle {
    display: inline-block !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

/* Position the sampler display label on the second row */
body:not(.dark-theme) #samplerCurrentScaleDisplay {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* Override any centering styles for the scale dropdown container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scaleQuickSelect) {
    justify-content: flex-start !important;
    text-align: left !important;
    flex-direction: column !important;
}

/* Override any centering styles for the scale button container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scalePresetsToggle) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any centering styles for the scale display container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for all scale-related elements in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) * {
    text-align: left !important;
}

/* Override any pseudo-elements that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::after {
    display: none !important;
}

/* Override any inline styles that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
}

/* Override any specific centering rules that might be applied in light mode */
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for any effect-group containing scale controls in light mode */
body:not(.dark-theme) .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any music-generator-controls-panel specific centering in light mode */
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* ===== APPLY SAME LAYOUT TO LIGHT MODE ===== */

/* Force left alignment for synth scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important; /* Force left alignment */
    text-align: left !important;
    align-items: center !important;
}

/* Create vertical layout for scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

/* First row: dropdown and button side by side */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before {
    content: "" !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
}

/* Style the dropdown and button container */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    position: relative !important;
}

/* Position dropdown and button in the first row */
body:not(.dark-theme) #scaleQuickSelect {
    display: inline-block !important;
    flex: 1 !important;
    min-width: 120px !important;
    margin-right: 8px !important;
}

body:not(.dark-theme) #scalePresetsToggle {
    display: inline-block !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

/* Position the display label on the second row */
body:not(.dark-theme) #currentScaleDisplay {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* Create vertical layout for sampler scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#samplerScaleQuickSelect) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

/* Position sampler dropdown and button in the first row */
body:not(.dark-theme) #samplerScaleQuickSelect {
    display: inline-block !important;
    flex: 1 !important;
    min-width: 120px !important;
    margin-right: 8px !important;
}

body:not(.dark-theme) #samplerScalePresetsToggle {
    display: inline-block !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

/* Position the sampler display label on the second row */
body:not(.dark-theme) #samplerCurrentScaleDisplay {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* Override any centering styles for the scale dropdown container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scaleQuickSelect) {
    justify-content: flex-start !important;
    text-align: left !important;
    flex-direction: column !important;
}

/* Override any centering styles for the scale button container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scalePresetsToggle) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any centering styles for the scale display container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for all scale-related elements in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) * {
    text-align: left !important;
}

/* Override any pseudo-elements that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::after {
    display: none !important;
}

/* Override any inline styles that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
}

/* Override any specific centering rules that might be applied in light mode */
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for any effect-group containing scale controls in light mode */
body:not(.dark-theme) .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any music-generator-controls-panel specific centering in light mode */
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* ===== APPLY SAME LAYOUT TO LIGHT MODE ===== */

/* Force left alignment for synth scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important; /* Force left alignment */
    text-align: left !important;
    align-items: center !important;
}

/* Create vertical layout for scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

/* First row: dropdown and button side by side */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before {
    content: "" !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
}

/* Style the dropdown and button container */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    position: relative !important;
}

/* Position dropdown and button in the first row */
body:not(.dark-theme) #scaleQuickSelect {
    display: inline-block !important;
    flex: 1 !important;
    min-width: 120px !important;
    margin-right: 8px !important;
}

body:not(.dark-theme) #scalePresetsToggle {
    display: inline-block !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

/* Position the display label on the second row */
body:not(.dark-theme) #currentScaleDisplay {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* Create vertical layout for sampler scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#samplerScaleQuickSelect) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

/* Position sampler dropdown and button in the first row */
body:not(.dark-theme) #samplerScaleQuickSelect {
    display: inline-block !important;
    flex: 1 !important;
    min-width: 120px !important;
    margin-right: 8px !important;
}

body:not(.dark-theme) #samplerScalePresetsToggle {
    display: inline-block !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

/* Position the sampler display label on the second row */
body:not(.dark-theme) #samplerCurrentScaleDisplay {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* Override any centering styles for the scale dropdown container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scaleQuickSelect) {
    justify-content: flex-start !important;
    text-align: left !important;
    flex-direction: column !important;
}

/* Override any centering styles for the scale button container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scalePresetsToggle) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any centering styles for the scale display container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for all scale-related elements in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) * {
    text-align: left !important;
}

/* Override any pseudo-elements that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::after {
    display: none !important;
}

/* Override any inline styles that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
}

/* Override any specific centering rules that might be applied in light mode */
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for any effect-group containing scale controls in light mode */
body:not(.dark-theme) .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any music-generator-controls-panel specific centering in light mode */
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* ===== APPLY SAME LAYOUT TO LIGHT MODE ===== */

/* Force left alignment for synth scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important; /* Force left alignment */
    text-align: left !important;
    align-items: center !important;
}

/* Create vertical layout for scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

/* First row: dropdown and button side by side */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before {
    content: "" !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
}

/* Style the dropdown and button container */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    position: relative !important;
}

/* Position dropdown and button in the first row */
body:not(.dark-theme) #scaleQuickSelect {
    display: inline-block !important;
    flex: 1 !important;
    min-width: 120px !important;
    margin-right: 8px !important;
}

body:not(.dark-theme) #scalePresetsToggle {
    display: inline-block !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

/* Position the display label on the second row */
body:not(.dark-theme) #currentScaleDisplay {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* Create vertical layout for sampler scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#samplerScaleQuickSelect) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

/* Position sampler dropdown and button in the first row */
body:not(.dark-theme) #samplerScaleQuickSelect {
    display: inline-block !important;
    flex: 1 !important;
    min-width: 120px !important;
    margin-right: 8px !important;
}

body:not(.dark-theme) #samplerScalePresetsToggle {
    display: inline-block !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

/* Position the sampler display label on the second row */
body:not(.dark-theme) #samplerCurrentScaleDisplay {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* Override any centering styles for the scale dropdown container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scaleQuickSelect) {
    justify-content: flex-start !important;
    text-align: left !important;
    flex-direction: column !important;
}

/* Override any centering styles for the scale button container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scalePresetsToggle) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any centering styles for the scale display container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for all scale-related elements in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) * {
    text-align: left !important;
}

/* Override any pseudo-elements that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::after {
    display: none !important;
}

/* Override any inline styles that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
}

/* Override any specific centering rules that might be applied in light mode */
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for any effect-group containing scale controls in light mode */
body:not(.dark-theme) .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any music-generator-controls-panel specific centering in light mode */
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* ===== APPLY SAME LAYOUT TO LIGHT MODE ===== */

/* Force left alignment for synth scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important; /* Force left alignment */
    text-align: left !important;
    align-items: center !important;
}

/* Create vertical layout for scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

/* First row: dropdown and button side by side */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before {
    content: "" !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
}

/* Style the dropdown and button container */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    position: relative !important;
}

/* Position dropdown and button in the first row */
body:not(.dark-theme) #scaleQuickSelect {
    display: inline-block !important;
    flex: 1 !important;
    min-width: 120px !important;
    margin-right: 8px !important;
}

body:not(.dark-theme) #scalePresetsToggle {
    display: inline-block !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

/* Position the display label on the second row */
body:not(.dark-theme) #currentScaleDisplay {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* Create vertical layout for sampler scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#samplerScaleQuickSelect) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

/* Position sampler dropdown and button in the first row */
body:not(.dark-theme) #samplerScaleQuickSelect {
    display: inline-block !important;
    flex: 1 !important;
    min-width: 120px !important;
    margin-right: 8px !important;
}

body:not(.dark-theme) #samplerScalePresetsToggle {
    display: inline-block !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

/* Position the sampler display label on the second row */
body:not(.dark-theme) #samplerCurrentScaleDisplay {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* Override any centering styles for the scale dropdown container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scaleQuickSelect) {
    justify-content: flex-start !important;
    text-align: left !important;
    flex-direction: column !important;
}

/* Override any centering styles for the scale button container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scalePresetsToggle) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any centering styles for the scale display container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for all scale-related elements in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) * {
    text-align: left !important;
}

/* Override any pseudo-elements that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::after {
    display: none !important;
}

/* Override any inline styles that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
}

/* Override any specific centering rules that might be applied in light mode */
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for any effect-group containing scale controls in light mode */
body:not(.dark-theme) .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any music-generator-controls-panel specific centering in light mode */
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* ===== APPLY SAME LAYOUT TO LIGHT MODE ===== */

/* Force left alignment for synth scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important; /* Force left alignment */
    text-align: left !important;
    align-items: center !important;
}

/* Create vertical layout for scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

/* First row: dropdown and button side by side */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before {
    content: "" !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
}

/* Style the dropdown and button container */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    position: relative !important;
}

/* Position dropdown and button in the first row */
body:not(.dark-theme) #scaleQuickSelect {
    display: inline-block !important;
    flex: 1 !important;
    min-width: 120px !important;
    margin-right: 8px !important;
}

body:not(.dark-theme) #scalePresetsToggle {
    display: inline-block !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

/* Position the display label on the second row */
body:not(.dark-theme) #currentScaleDisplay {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* Create vertical layout for sampler scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#samplerScaleQuickSelect) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

/* Position sampler dropdown and button in the first row */
body:not(.dark-theme) #samplerScaleQuickSelect {
    display: inline-block !important;
    flex: 1 !important;
    min-width: 120px !important;
    margin-right: 8px !important;
}

body:not(.dark-theme) #samplerScalePresetsToggle {
    display: inline-block !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

/* Position the sampler display label on the second row */
body:not(.dark-theme) #samplerCurrentScaleDisplay {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* Override any centering styles for the scale dropdown container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scaleQuickSelect) {
    justify-content: flex-start !important;
    text-align: left !important;
    flex-direction: column !important;
}

/* Override any centering styles for the scale button container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scalePresetsToggle) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any centering styles for the scale display container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for all scale-related elements in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) * {
    text-align: left !important;
}

/* Override any pseudo-elements that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::after {
    display: none !important;
}

/* Override any inline styles that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
}

/* Override any specific centering rules that might be applied in light mode */
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for any effect-group containing scale controls in light mode */
body:not(.dark-theme) .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any music-generator-controls-panel specific centering in light mode */
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* ===== APPLY SAME LAYOUT TO LIGHT MODE ===== */

/* Force left alignment for synth scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important; /* Force left alignment */
    text-align: left !important;
    align-items: center !important;
}

/* Create vertical layout for scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

/* First row: dropdown and button side by side */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before {
    content: "" !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
}

/* Style the dropdown and button container */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    position: relative !important;
}

/* Position dropdown and button in the first row */
body:not(.dark-theme) #scaleQuickSelect {
    display: inline-block !important;
    flex: 1 !important;
    min-width: 120px !important;
    margin-right: 8px !important;
}

body:not(.dark-theme) #scalePresetsToggle {
    display: inline-block !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

/* Position the display label on the second row */
body:not(.dark-theme) #currentScaleDisplay {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* Create vertical layout for sampler scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#samplerScaleQuickSelect) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

/* Position sampler dropdown and button in the first row */
body:not(.dark-theme) #samplerScaleQuickSelect {
    display: inline-block !important;
    flex: 1 !important;
    min-width: 120px !important;
    margin-right: 8px !important;
}

body:not(.dark-theme) #samplerScalePresetsToggle {
    display: inline-block !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

/* Position the sampler display label on the second row */
body:not(.dark-theme) #samplerCurrentScaleDisplay {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* Override any centering styles for the scale dropdown container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scaleQuickSelect) {
    justify-content: flex-start !important;
    text-align: left !important;
    flex-direction: column !important;
}

/* Override any centering styles for the scale button container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scalePresetsToggle) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any centering styles for the scale display container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for all scale-related elements in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) * {
    text-align: left !important;
}

/* Override any pseudo-elements that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::after {
    display: none !important;
}

/* Override any inline styles that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
}

/* Override any specific centering rules that might be applied in light mode */
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for any effect-group containing scale controls in light mode */
body:not(.dark-theme) .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any music-generator-controls-panel specific centering in light mode */
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* ===== APPLY SAME LAYOUT TO LIGHT MODE ===== */

/* Force left alignment for synth scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important; /* Force left alignment */
    text-align: left !important;
    align-items: center !important;
}

/* Create vertical layout for scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

/* First row: dropdown and button side by side */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before {
    content: "" !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
}

/* Style the dropdown and button container */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    position: relative !important;
}

/* Position dropdown and button in the first row */
body:not(.dark-theme) #scaleQuickSelect {
    display: inline-block !important;
    flex: 1 !important;
    min-width: 120px !important;
    margin-right: 8px !important;
}

body:not(.dark-theme) #scalePresetsToggle {
    display: inline-block !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

/* Position the display label on the second row */
body:not(.dark-theme) #currentScaleDisplay {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* Create vertical layout for sampler scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#samplerScaleQuickSelect) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

/* Position sampler dropdown and button in the first row */
body:not(.dark-theme) #samplerScaleQuickSelect {
    display: inline-block !important;
    flex: 1 !important;
    min-width: 120px !important;
    margin-right: 8px !important;
}

body:not(.dark-theme) #samplerScalePresetsToggle {
    display: inline-block !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

/* Position the sampler display label on the second row */
body:not(.dark-theme) #samplerCurrentScaleDisplay {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* Override any centering styles for the scale dropdown container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scaleQuickSelect) {
    justify-content: flex-start !important;
    text-align: left !important;
    flex-direction: column !important;
}

/* Override any centering styles for the scale button container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scalePresetsToggle) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any centering styles for the scale display container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for all scale-related elements in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) * {
    text-align: left !important;
}

/* Override any pseudo-elements that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::after {
    display: none !important;
}

/* Override any inline styles that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
}

/* Override any specific centering rules that might be applied in light mode */
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for any effect-group containing scale controls in light mode */
body:not(.dark-theme) .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any music-generator-controls-panel specific centering in light mode */
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* ===== APPLY SAME LAYOUT TO LIGHT MODE ===== */

/* Force left alignment for synth scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important; /* Force left alignment */
    text-align: left !important;
    align-items: center !important;
}

/* Create vertical layout for scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

/* First row: dropdown and button side by side */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before {
    content: "" !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
}

/* Style the dropdown and button container */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    position: relative !important;
}

/* Position dropdown and button in the first row */
body:not(.dark-theme) #scaleQuickSelect {
    display: inline-block !important;
    flex: 1 !important;
    min-width: 120px !important;
    margin-right: 8px !important;
}

body:not(.dark-theme) #scalePresetsToggle {
    display: inline-block !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

/* Position the display label on the second row */
body:not(.dark-theme) #currentScaleDisplay {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* Create vertical layout for sampler scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#samplerScaleQuickSelect) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

/* Position sampler dropdown and button in the first row */
body:not(.dark-theme) #samplerScaleQuickSelect {
    display: inline-block !important;
    flex: 1 !important;
    min-width: 120px !important;
    margin-right: 8px !important;
}

body:not(.dark-theme) #samplerScalePresetsToggle {
    display: inline-block !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

/* Position the sampler display label on the second row */
body:not(.dark-theme) #samplerCurrentScaleDisplay {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* Override any centering styles for the scale dropdown container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scaleQuickSelect) {
    justify-content: flex-start !important;
    text-align: left !important;
    flex-direction: column !important;
}

/* Override any centering styles for the scale button container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scalePresetsToggle) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any centering styles for the scale display container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for all scale-related elements in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) * {
    text-align: left !important;
}

/* Override any pseudo-elements that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::after {
    display: none !important;
}

/* Override any inline styles that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
}

/* Override any specific centering rules that might be applied in light mode */
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for any effect-group containing scale controls in light mode */
body:not(.dark-theme) .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any music-generator-controls-panel specific centering in light mode */
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* ===== APPLY SAME LAYOUT TO LIGHT MODE ===== */

/* Force left alignment for synth scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important; /* Force left alignment */
    text-align: left !important;
    align-items: center !important;
}

/* Create vertical layout for scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

/* First row: dropdown and button side by side */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before {
    content: "" !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
}

/* Style the dropdown and button container */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    position: relative !important;
}

/* Position dropdown and button in the first row */
body:not(.dark-theme) #scaleQuickSelect {
    display: inline-block !important;
    flex: 1 !important;
    min-width: 120px !important;
    margin-right: 8px !important;
}

body:not(.dark-theme) #scalePresetsToggle {
    display: inline-block !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

/* Position the display label on the second row */
body:not(.dark-theme) #currentScaleDisplay {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* Create vertical layout for sampler scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#samplerScaleQuickSelect) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

/* Position sampler dropdown and button in the first row */
body:not(.dark-theme) #samplerScaleQuickSelect {
    display: inline-block !important;
    flex: 1 !important;
    min-width: 120px !important;
    margin-right: 8px !important;
}

body:not(.dark-theme) #samplerScalePresetsToggle {
    display: inline-block !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

/* Position the sampler display label on the second row */
body:not(.dark-theme) #samplerCurrentScaleDisplay {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* Override any centering styles for the scale dropdown container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scaleQuickSelect) {
    justify-content: flex-start !important;
    text-align: left !important;
    flex-direction: column !important;
}

/* Override any centering styles for the scale button container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scalePresetsToggle) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any centering styles for the scale display container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for all scale-related elements in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) * {
    text-align: left !important;
}

/* Override any pseudo-elements that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::after {
    display: none !important;
}

/* Override any inline styles that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
}

/* Override any specific centering rules that might be applied in light mode */
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for any effect-group containing scale controls in light mode */
body:not(.dark-theme) .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any music-generator-controls-panel specific centering in light mode */
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* ===== APPLY SAME LAYOUT TO LIGHT MODE ===== */

/* Force left alignment for synth scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important; /* Force left alignment */
    text-align: left !important;
    align-items: center !important;
}

/* Create vertical layout for scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

/* First row: dropdown and button side by side */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before {
    content: "" !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
}

/* Style the dropdown and button container */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    position: relative !important;
}

/* Position dropdown and button in the first row */
body:not(.dark-theme) #scaleQuickSelect {
    display: inline-block !important;
    flex: 1 !important;
    min-width: 120px !important;
    margin-right: 8px !important;
}

body:not(.dark-theme) #scalePresetsToggle {
    display: inline-block !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

/* Position the display label on the second row */
body:not(.dark-theme) #currentScaleDisplay {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* Create vertical layout for sampler scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#samplerScaleQuickSelect) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

/* Position sampler dropdown and button in the first row */
body:not(.dark-theme) #samplerScaleQuickSelect {
    display: inline-block !important;
    flex: 1 !important;
    min-width: 120px !important;
    margin-right: 8px !important;
}

body:not(.dark-theme) #samplerScalePresetsToggle {
    display: inline-block !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

/* Position the sampler display label on the second row */
body:not(.dark-theme) #samplerCurrentScaleDisplay {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* Override any centering styles for the scale dropdown container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scaleQuickSelect) {
    justify-content: flex-start !important;
    text-align: left !important;
    flex-direction: column !important;
}

/* Override any centering styles for the scale button container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scalePresetsToggle) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any centering styles for the scale display container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for all scale-related elements in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) * {
    text-align: left !important;
}

/* Override any pseudo-elements that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::after {
    display: none !important;
}

/* Override any inline styles that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
}

/* Override any specific centering rules that might be applied in light mode */
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for any effect-group containing scale controls in light mode */
body:not(.dark-theme) .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any music-generator-controls-panel specific centering in light mode */
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* ===== APPLY SAME LAYOUT TO LIGHT MODE ===== */

/* Force left alignment for synth scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important; /* Force left alignment */
    text-align: left !important;
    align-items: center !important;
}

/* Create vertical layout for scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

/* First row: dropdown and button side by side */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before {
    content: "" !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
}

/* Style the dropdown and button container */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    position: relative !important;
}

/* Position dropdown and button in the first row */
body:not(.dark-theme) #scaleQuickSelect {
    display: inline-block !important;
    flex: 1 !important;
    min-width: 120px !important;
    margin-right: 8px !important;
}

body:not(.dark-theme) #scalePresetsToggle {
    display: inline-block !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

/* Position the display label on the second row */
body:not(.dark-theme) #currentScaleDisplay {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* Create vertical layout for sampler scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#samplerScaleQuickSelect) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

/* Position sampler dropdown and button in the first row */
body:not(.dark-theme) #samplerScaleQuickSelect {
    display: inline-block !important;
    flex: 1 !important;
    min-width: 120px !important;
    margin-right: 8px !important;
}

body:not(.dark-theme) #samplerScalePresetsToggle {
    display: inline-block !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

/* Position the sampler display label on the second row */
body:not(.dark-theme) #samplerCurrentScaleDisplay {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* Override any centering styles for the scale dropdown container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scaleQuickSelect) {
    justify-content: flex-start !important;
    text-align: left !important;
    flex-direction: column !important;
}

/* Override any centering styles for the scale button container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scalePresetsToggle) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any centering styles for the scale display container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for all scale-related elements in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) * {
    text-align: left !important;
}

/* Override any pseudo-elements that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::after {
    display: none !important;
}

/* Override any inline styles that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
}

/* Override any specific centering rules that might be applied in light mode */
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for any effect-group containing scale controls in light mode */
body:not(.dark-theme) .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any music-generator-controls-panel specific centering in light mode */
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* ===== APPLY SAME LAYOUT TO LIGHT MODE ===== */

/* Force left alignment for synth scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important; /* Force left alignment */
    text-align: left !important;
    align-items: center !important;
}

/* Create vertical layout for scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

/* First row: dropdown and button side by side */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before {
    content: "" !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
}

/* Style the dropdown and button container */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    position: relative !important;
}

/* Position dropdown and button in the first row */
body:not(.dark-theme) #scaleQuickSelect {
    display: inline-block !important;
    flex: 1 !important;
    min-width: 120px !important;
    margin-right: 8px !important;
}

body:not(.dark-theme) #scalePresetsToggle {
    display: inline-block !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

/* Position the display label on the second row */
body:not(.dark-theme) #currentScaleDisplay {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* Create vertical layout for sampler scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#samplerScaleQuickSelect) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

/* Position sampler dropdown and button in the first row */
body:not(.dark-theme) #samplerScaleQuickSelect {
    display: inline-block !important;
    flex: 1 !important;
    min-width: 120px !important;
    margin-right: 8px !important;
}

body:not(.dark-theme) #samplerScalePresetsToggle {
    display: inline-block !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

/* Position the sampler display label on the second row */
body:not(.dark-theme) #samplerCurrentScaleDisplay {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* Override any centering styles for the scale dropdown container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scaleQuickSelect) {
    justify-content: flex-start !important;
    text-align: left !important;
    flex-direction: column !important;
}

/* Override any centering styles for the scale button container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scalePresetsToggle) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any centering styles for the scale display container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for all scale-related elements in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) * {
    text-align: left !important;
}

/* Override any pseudo-elements that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::after {
    display: none !important;
}

/* Override any inline styles that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
}

/* Override any specific centering rules that might be applied in light mode */
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for any effect-group containing scale controls in light mode */
body:not(.dark-theme) .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any music-generator-controls-panel specific centering in light mode */
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* ===== APPLY SAME LAYOUT TO LIGHT MODE ===== */

/* Force left alignment for synth scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important; /* Force left alignment */
    text-align: left !important;
    align-items: center !important;
}

/* Create vertical layout for scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

/* First row: dropdown and button side by side */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before {
    content: "" !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
}

/* Style the dropdown and button container */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    position: relative !important;
}

/* Position dropdown and button in the first row */
body:not(.dark-theme) #scaleQuickSelect {
    display: inline-block !important;
    flex: 1 !important;
    min-width: 120px !important;
    margin-right: 8px !important;
}

body:not(.dark-theme) #scalePresetsToggle {
    display: inline-block !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

/* Position the display label on the second row */
body:not(.dark-theme) #currentScaleDisplay {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* Create vertical layout for sampler scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#samplerScaleQuickSelect) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

/* Position sampler dropdown and button in the first row */
body:not(.dark-theme) #samplerScaleQuickSelect {
    display: inline-block !important;
    flex: 1 !important;
    min-width: 120px !important;
    margin-right: 8px !important;
}

body:not(.dark-theme) #samplerScalePresetsToggle {
    display: inline-block !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

/* Position the sampler display label on the second row */
body:not(.dark-theme) #samplerCurrentScaleDisplay {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* Override any centering styles for the scale dropdown container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scaleQuickSelect) {
    justify-content: flex-start !important;
    text-align: left !important;
    flex-direction: column !important;
}

/* Override any centering styles for the scale button container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scalePresetsToggle) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any centering styles for the scale display container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for all scale-related elements in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) * {
    text-align: left !important;
}

/* Override any pseudo-elements that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::after {
    display: none !important;
}

/* Override any inline styles that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
}

/* Override any specific centering rules that might be applied in light mode */
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for any effect-group containing scale controls in light mode */
body:not(.dark-theme) .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any music-generator-controls-panel specific centering in light mode */
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* ===== APPLY SAME LAYOUT TO LIGHT MODE ===== */

/* Force left alignment for synth scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important; /* Force left alignment */
    text-align: left !important;
    align-items: center !important;
}

/* Create vertical layout for scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

/* First row: dropdown and button side by side */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before {
    content: "" !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
}

/* Style the dropdown and button container */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    position: relative !important;
}

/* Position dropdown and button in the first row */
body:not(.dark-theme) #scaleQuickSelect {
    display: inline-block !important;
    flex: 1 !important;
    min-width: 120px !important;
    margin-right: 8px !important;
}

body:not(.dark-theme) #scalePresetsToggle {
    display: inline-block !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

/* Position the display label on the second row */
body:not(.dark-theme) #currentScaleDisplay {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* Create vertical layout for sampler scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#samplerScaleQuickSelect) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

/* Position sampler dropdown and button in the first row */
body:not(.dark-theme) #samplerScaleQuickSelect {
    display: inline-block !important;
    flex: 1 !important;
    min-width: 120px !important;
    margin-right: 8px !important;
}

body:not(.dark-theme) #samplerScalePresetsToggle {
    display: inline-block !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

/* Position the sampler display label on the second row */
body:not(.dark-theme) #samplerCurrentScaleDisplay {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* Override any centering styles for the scale dropdown container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scaleQuickSelect) {
    justify-content: flex-start !important;
    text-align: left !important;
    flex-direction: column !important;
}

/* Override any centering styles for the scale button container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scalePresetsToggle) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any centering styles for the scale display container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for all scale-related elements in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) * {
    text-align: left !important;
}

/* Override any pseudo-elements that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::after {
    display: none !important;
}

/* Override any inline styles that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
}

/* Override any specific centering rules that might be applied in light mode */
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for any effect-group containing scale controls in light mode */
body:not(.dark-theme) .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any music-generator-controls-panel specific centering in light mode */
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* ===== APPLY SAME LAYOUT TO LIGHT MODE ===== */

/* Force left alignment for synth scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important; /* Force left alignment */
    text-align: left !important;
    align-items: center !important;
}

/* Create vertical layout for scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

/* First row: dropdown and button side by side */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before {
    content: "" !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
}

/* Style the dropdown and button container */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    position: relative !important;
}

/* Position dropdown and button in the first row */
body:not(.dark-theme) #scaleQuickSelect {
    display: inline-block !important;
    flex: 1 !important;
    min-width: 120px !important;
    margin-right: 8px !important;
}

body:not(.dark-theme) #scalePresetsToggle {
    display: inline-block !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

/* Position the display label on the second row */
body:not(.dark-theme) #currentScaleDisplay {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* Create vertical layout for sampler scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#samplerScaleQuickSelect) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

/* Position sampler dropdown and button in the first row */
body:not(.dark-theme) #samplerScaleQuickSelect {
    display: inline-block !important;
    flex: 1 !important;
    min-width: 120px !important;
    margin-right: 8px !important;
}

body:not(.dark-theme) #samplerScalePresetsToggle {
    display: inline-block !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

/* Position the sampler display label on the second row */
body:not(.dark-theme) #samplerCurrentScaleDisplay {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* Override any centering styles for the scale dropdown container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scaleQuickSelect) {
    justify-content: flex-start !important;
    text-align: left !important;
    flex-direction: column !important;
}

/* Override any centering styles for the scale button container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scalePresetsToggle) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any centering styles for the scale display container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for all scale-related elements in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) * {
    text-align: left !important;
}

/* Override any pseudo-elements that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::after {
    display: none !important;
}

/* Override any inline styles that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
}

/* Override any specific centering rules that might be applied in light mode */
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for any effect-group containing scale controls in light mode */
body:not(.dark-theme) .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any music-generator-controls-panel specific centering in light mode */
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .music-generator-controls-panel .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* ===== APPLY SAME LAYOUT TO LIGHT MODE ===== */

/* Force left alignment for synth scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important; /* Force left alignment */
    text-align: left !important;
    align-items: center !important;
}

/* Create vertical layout for scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

/* First row: dropdown and button side by side */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before {
    content: "" !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
}

/* Style the dropdown and button container */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) {
    position: relative !important;
}

/* Position dropdown and button in the first row */
body:not(.dark-theme) #scaleQuickSelect {
    display: inline-block !important;
    flex: 1 !important;
    min-width: 120px !important;
    margin-right: 8px !important;
}

body:not(.dark-theme) #scalePresetsToggle {
    display: inline-block !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

/* Position the display label on the second row */
body:not(.dark-theme) #currentScaleDisplay {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* Create vertical layout for sampler scale controls in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#samplerScaleQuickSelect) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

/* Position sampler dropdown and button in the first row */
body:not(.dark-theme) #samplerScaleQuickSelect {
    display: inline-block !important;
    flex: 1 !important;
    min-width: 120px !important;
    margin-right: 8px !important;
}

body:not(.dark-theme) #samplerScalePresetsToggle {
    display: inline-block !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

/* Position the sampler display label on the second row */
body:not(.dark-theme) #samplerCurrentScaleDisplay {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* Override any centering styles for the scale dropdown container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scaleQuickSelect) {
    justify-content: flex-start !important;
    text-align: left !important;
    flex-direction: column !important;
}

/* Override any centering styles for the scale button container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#scalePresetsToggle) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Override any centering styles for the scale display container in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="display: flex"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for all scale-related elements in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle) *,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay) * {
    text-align: left !important;
}

/* Override any pseudo-elements that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scaleQuickSelect)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#scalePresetsToggle)::after,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::before,
body:not(.dark-theme) .rhythm-scale-row .effect-group:has(#currentScaleDisplay)::after {
    display: none !important;
}

/* Override any inline styles that might be causing centering in light mode */
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scaleQuickSelect),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#scalePresetsToggle),
body:not(.dark-theme) .rhythm-scale-row .effect-group[style*="justify-content: center"]:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
}

/* Style note names in transpose displays to be bigger, yellow, and bold */
body.dark-theme #transposeDisplay,
body.dark-theme #samplerTransposeDisplay {
    font-size: 1.5em !important; /* Bigger font size */
    font-weight: bold !important; /* Bold text */
    color: #FFD700 !important; /* Yellow color */
    text-shadow: 0 0 3px rgba(255, 215, 0, 0.5) !important; /* Subtle glow effect */
}

body:not(.dark-theme) .music-generator-controls-panel #transposeDisplay,
body:not(.dark-theme) .music-generator-controls-panel #samplerTransposeDisplay {
    font-size: 1.5em !important; /* Bigger font size */
    font-weight: bold !important; /* Bold text */
    color: #1e3a8a !important; /* Dark blue color for light mode */
    text-shadow: 0 0 3px rgba(30, 58, 138, 0.3) !important; /* Subtle blue glow effect */
}

/* Also style the sampler pitch value display in the sampler iframe */
#pitch-value {
    font-size: 1.5em !important;
    font-weight: bold !important;
    color: #FFD700 !important;
    text-shadow: 0 0 3px rgba(255, 215, 0, 0.5) !important;
}

/* Style the sampler pitch value in the UI panel */
#sampler-pitch-value {
    font-size: 1.5em !important;
    font-weight: bold !important;
    color: #FFD700 !important;
    text-shadow: 0 0 3px rgba(255, 215, 0, 0.5) !important;
}

/* Light mode styling for pitch value displays */
body:not(.dark-theme) #pitch-value,
body:not(.dark-theme) #sampler-pitch-value {
    color: #1e3a8a !important; /* Dark blue color for light mode */
    text-shadow: 0 0 3px rgba(30, 58, 138, 0.3) !important; /* Subtle blue glow effect */
}

/* Override any specific centering rules that might be applied in light mode */
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .transpose-detune-row .effect-group:has(#currentScaleDisplay) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force left alignment for any effect-group containing scale controls in light mode */
body:not(.dark-theme) .effect-group:has(#scaleQuickSelect),
body:not(.dark-theme) .effect-group:has(#scalePresetsToggle),
body:not(.dark-theme) .effect-group:has(#current