body {
    margin: 0;
    font-family: 'Orbitron', monospace;
    background-color: #1E1E1E; /* Dark background for the page */
    color: #E0E0E0; /* Light text color for better contrast on dark background */
    overflow: hidden; /* Prevents scrollbars from Three.js canvas */
}

/* Universal Orbitron font rule to ensure ALL elements use Orbitron */
* {
    font-family: 'Orbitron', monospace !important;
}

#main-synth-container canvas {
    display: block;
}

#collapsible-ui-container {
    position: fixed;
    top: 10px;
    left: 10px; /* Changed from right to left */
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align toggle button to the left */
}

#ui-toggle-button {
    padding: 6px 10px; /* Adjusted padding for icon */
    background-color: rgba(60, 64, 67, 0.9); /* Darker gray, slightly transparent */
    color: #E0E0E0; /* Light gray for icon */
    border: 1px solid rgba(95, 99, 104, 0.7); /* Darker subtle border */
    border-radius: 8px; /* Rounded corners for square */
    cursor: pointer;
    margin-bottom: 5px;
    font-size: 22px; /* Adjusted font size for gear icon */
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    transition: background-color 0.3s ease, transform 0.1s ease;
    width: 40px; /* Fixed width */
    height: 40px; /* Fixed height */
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1; /* Ensure icon is centered vertically */
}

#ui-toggle-button:hover {
    background-color: rgba(70, 74, 77, 0.95); /* Slightly lighter dark on hover */
    border-color: rgba(105, 109, 114, 0.8);
}
#ui-toggle-button:active {
    transform: scale(0.9);
}
#ui-content-panel {
    background-color: rgba(40, 43, 46, 0.97); /* Dark gray, high transparency */
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3); /* Adjusted shadow for dark background */
    display: flex;
    flex-direction: column;
    gap: 20px; /* Space between preset and MIDI sections */
    max-height: calc(100vh - 80px); /* Max height with some padding from top/bottom */
    overflow-y: auto; /* Scroll if content exceeds max height */
    width: 280px; /* Fixed width for the panel */
    box-sizing: border-box;
}

/* Styling for preset-controls section */
#preset-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 15px;
    border-bottom: 1px solid #4A4E54; /* Darker separator for dark theme */
}

#preset-controls h3 {
    margin: 0 0 5px 0;
    color: #79A6DC; /* Lighter blue for dark theme */
    font-size: 16px;
    text-align: center;
    font-family: 'Orbitron', monospace;
}

#preset-controls input[type="text"],
#preset-controls select {
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #5F6368; /* Darker border for inputs */
    background-color: #3C4043; /* Dark background for inputs */
    color: #E0E0E0; /* Light text for inputs */
    width: 100%;
    box-sizing: border-box;
    font-size: 14px;
    font-family: 'Orbitron', monospace;
}

#preset-controls .preset-buttons {
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

#preset-controls button {
    padding: 8px 12px;
    background-color: #4A5C4F; /* Darker, slightly desaturated green for dark theme */
    color: #D0E0D0; /* Lighter green-tinted text */
    border: 1px solid #6A8C7F; /* Subtle border for definition */
    border-radius: 4px;
    cursor: pointer;
    flex-grow: 1;
    font-size: 14px;
    font-family: 'Orbitron', monospace;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
#preset-controls button:hover {
    background-color: #5A7C6F; /* Lighter green on hover */
    border-color: #7A9C8F;
}

/* MIDI Controls Container styling */
#midi-controls-container {
    width: 100%; 
    padding: 15px; 
    box-shadow: none; 
    border: none; 
    background-color: #2F343A; /* Dark background */
    /* Retain flex properties for internal layout */
    display: flex;
    flex-direction: column;
    gap: 8px; /* Default gap from original JS, can be fine-tuned */
    color: #E0E0E0; /* Light text */
    font-family: 'Orbitron', monospace;
    font-size: 12px; /* Default font size from original JS */
    border-radius: 6px; /* Rounded corners for the dark block */
    box-sizing: border-box; /* Ensure padding doesn't expand overall width */
}

/* MIDI Learn specific styling */
#midi-learn-button {
    transition: all 0.3s ease;
}

#midi-learn-button:hover {
    opacity: 0.8;
    transform: translateY(-1px);
}

#midi-learn-button.active {
    background-color: #FFA500 !important;
    color: #000 !important;
    box-shadow: 0 0 10px rgba(255, 165, 0, 0.5);
}

#midi-learn-button.cancel {
    background-color: #CC4444 !important;
    color: #FFF !important;
    box-shadow: 0 0 10px rgba(204, 68, 68, 0.5);
}

#midi-learn-status {
    transition: all 0.3s ease;
}

#midi-learn-status.active {
    background-color: #4A5C2A;
    border-color: #6A8C4A;
    color: #D0E0D0;
}

#midi-mappings-list {
    max-height: 200px;
    overflow-y: auto;
}

.midi-mapping-item {
    transition: background-color 0.2s ease;
}

.midi-mapping-item:hover {
    background-color: #404854 !important;
}

.midi-mapping-remove {
    transition: all 0.2s ease;
}

.midi-mapping-remove:hover {
    background-color: #DD5555 !important;
    transform: scale(1.1);
}

/* Knob learn mode styling */
.knob-learn-mode {
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.6) !important;
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0%, 100% { box-shadow: 0 0 15px rgba(0, 255, 0, 0.6); }
    50% { box-shadow: 0 0 25px rgba(0, 255, 0, 0.8); }
}

#midi-controls-container h3 {
    color: #79A6DC; /* Lighter blue for dark theme */
    font-size: 16px;
    text-align: center;
    margin: 0 0 10px 0; 
    padding-bottom: 5px;
    border-bottom: 1px solid #4A4E54; /* Darker separator for dark theme */
    font-family: 'Orbitron', monospace;
}

#midi-controls-container label {
    font-weight: bold;
    margin-bottom: 3px; 
    font-size: 13px; 
    color: #B0B0B0; /* Lighter gray for dark theme */
    font-family: 'Orbitron', monospace;
}

#midi-controls-container select {
    width: 100%; 
    padding: 8px; /* Harmonized padding */
    font-size: 14px; /* Harmonized font size */
    background-color: #3C4043; /* Dark background for select */
    color: #E0E0E0; /* Light text for select */
    border: 1px solid #5F6368; /* Darker border for select */
    border-radius: 4px;
    box-sizing: border-box;
    font-family: 'Orbitron', monospace;
}
/* Style for H4 sub-headings within MIDI controls, like 'Octave Shift' */
#midi-controls-container h4 {
    color: #79A6DC; /* Lighter blue for dark theme, consistent with h3 */
    font-size: 14px; /* Slightly smaller than the main h3 title */
    font-weight: bold;
    margin: 0 0 4px 0; /* Provides spacing below the title, before the octave buttons/display */
    padding: 0; /* Reset any default h4 padding */
    text-align: left; /* Align to the left, suitable for a sub-section title */
    font-family: 'Orbitron', monospace;
}
#midi-controls-container > div { 
    margin-bottom: 8px; 
}
#octave-controls {
    /* position: fixed, bottom, left, z-index, and box-shadow are removed to allow normal flow */
    display: flex; /* Retained for internal layout of buttons/display */
    align-items: center; /* Retained */
    gap: 8px; /* Retained */
    background-color: transparent; /* Changed to blend into the parent container */
    padding: 8px; /* Retained, provides spacing around buttons/display */
    border-radius: 4px; /* Adjusted for consistency with other internal elements */
    width: 100%; /* Ensures it takes the full width of its parent column */
    box-sizing: border-box; /* Ensures padding/border are included in the width calculation */
    /* This element will now flow naturally within its parent in the MIDI settings panel */
}
#octave-controls button {
    background-color: #777; /* Gray for octave buttons, distinct but fitting */
    color: white;
    border: none;
    border-radius: 4px; /* Rectangular to match other buttons */
    padding: 8px; /* Adjusted padding */
    font-size: 14px; /* Consistent font size */
    font-weight: bold;
    font-family: 'Orbitron', monospace;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, transform 0.1s ease;
    /* box-shadow removed */
}
#octave-controls button:hover {
    background-color: #666; /* Darker gray on hover */
}
#octave-controls button:active {
    transform: scale(0.95);
}
#octave-display {
    background-color: #3C4043; /* Dark background to match other inputs/selects */
    color: #E0E0E0; /* Light text */
    padding: 8px; /* Harmonized padding */
    border-radius: 4px;
    font-size: 14px; /* Harmonized font size */
    border: 1px solid #5F6368; /* Darker border for consistency */
    min-width: 80px; /* Ensure it has some width for "Octave: X" */
    text-align: center;
    font-family: 'Orbitron', monospace; /* Monospaced for number stability */
}
/* Simple scrollbar styling for the panel */
#ui-content-panel::-webkit-scrollbar {
    width: 8px;
}

#ui-content-panel::-webkit-scrollbar-track {
    background: #282B2E; /* Dark track for dark panel */
    border-radius: 8px;
}
#ui-content-panel::-webkit-scrollbar-thumb {
    background: #5F6368; /* Medium-dark thumb */
    border-radius: 8px;
}
#ui-content-panel::-webkit-scrollbar-thumb:hover {
    background: #7F8388; /* Slightly lighter hover for thumb */
}
/* Synth Knob Styling */
/* This container holds a single knob and its label, and provides spacing */
.knob-component-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 12px 8px; /* Spacing around each knob unit */
}
/* The visual knob element */
.knob {
    width: 80px;  /* Increased from 60px */
    height: 80px; /* Increased from 60px */
    border-radius: 50%; /* Makes it circular */
    background: radial-gradient(circle at 65% 35%, #555, #333); /* Dark metallic look */
    border: 2px solid #2a2a2a; /* Darker border */
    box-shadow: 0 3px 6px rgba(0,0,0,0.4), /* Shadow adapted for dark theme */
                inset 0 -2px 3px rgba(0,0,0,0.3),
                inset 0 2px 3px rgba(255,255,255,0.1); /* Subtle highlight */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: grab; /* Indicates interactivity */
    position: relative; /* For positioning the pointer */
    transition: box-shadow 0.2s ease;
}
.knob:active {
    cursor: grabbing;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3), /* Reduced shadow when active for dark theme */
                inset 0 -1px 2px rgba(0,0,0,0.2),
                inset 0 1px 2px rgba(255,255,255,0.05); /* Softer highlight when active */
}
/* Pointer/indicator on the knob */
.knob-pointer {
    width: 6px; /* Scaled from 4px */
    height: 24px; /* Scaled from 18px */
    background-color: #b0b0b0; /* Lighter pointer for contrast on dark knob */
    border-radius: 2px; /* Adjusted for new width if needed, 2px is fine */
    position: absolute;
    top: 11px; /* Scaled from 8px, new knob radius 40px - 29px origin = 11px */
    left: calc(50% - 3px); /* Centering the new 6px pointer */
    transform-origin: 50% 29px; /* Scaled from 22px (New knob radius 40px - new top 11px = 29px) */
    /* The 'transform: rotate(Zdeg)' will be set by JavaScript */
}
/* Label for the knob */
.knob-label {
    font-size: 14px; /* Increased font size */
    color: #c0c0c0;   /* Lighter gray for good contrast on dark background */
    margin-top: 11px;  /* Scaled from 8px */
    text-align: center;
    width: 85px;      /* Max width for the label, adjust as needed */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Show ... if text is too long */
    user-select: none; /* Prevent text selection on the label */
    font-family: 'Orbitron', monospace;
}
/* Musical Keyboard Key Styling */
.keyboard-container {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Align black keys correctly over white keys */
    padding: 15px;
    background-color: #2A2D30; /* Slightly lighter dark background for the keyboard area */
    border-radius: 8px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.3);
    margin-top: 20px; /* Space above keyboard if it's added to the main page flow */
    min-height: 200px; /* Ensure container has some default height */
}
.key {
    box-sizing: border-box;
    cursor: pointer;
    border-radius: 4px; /* Softer radius */
    transition: background 0.05s ease, box-shadow 0.05s ease, transform 0.05s ease;
    user-select: none;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 10px;
    font-family: 'Orbitron', monospace;
    font-weight: 600; /* Slightly bolder */
    font-size: 11px; /* For note names if any */
}
.key:active {
    transform: translateY(1.5px) scale(0.97); /* More noticeable press effect */
}
.white-key {
    background: linear-gradient(to bottom, #FFFFFF 0%, #F8F8F8 100%); /* Brighter white gradient */
    color: #4A4A4A; /* Dark gray text for contrast */
    border: 1px solid #A0A0A0; /* Medium gray border */
    width: 42px; /* Standard white key width */
    height: 180px;
    box-shadow: 0px 3px 0px #B0B0B0, /* Base shadow giving thickness */
                0px 5px 5px rgba(0,0,0,0.1), /* Softer overall shadow */
                inset 0px 1px 0px #FFFFFF, /* Top edge highlight */
                inset 0px -2px 1px rgba(0,0,0,0.05); /* Subtle bottom inner shadow */
    margin: 0 1.5px; /* Slightly wider gap */
    position: relative;
    z-index: 1;
}
.white-key:active {
    background: linear-gradient(to bottom, #F0F0F0 0%, #E8E8E8 100%); /* Slightly darker pressed gradient for whiter keys */
    box-shadow: 0px 1px 0px #909090, inset 0px 1px 2px rgba(0,0,0,0.15);
    color: #333333;
}
.black-key {
    background: linear-gradient(to bottom, #454545 0%, #282828 100%); /* Rich dark gradient */
    color: #D8D8D8; /* Light gray text */
    border: 1px solid #121212; /* Very dark border */
    width: 28px;
    height: 115px; /* Proportionate height */
    box-shadow: 0px 2px 0px #1A1A1A, /* Base shadow */
                0px 4px 4px rgba(0,0,0,0.25), /* Softer overall shadow */
                inset 0px 1px 0px rgba(120,120,120,0.3), /* Top highlight */
                inset 0px -2px 1px rgba(0,0,0,0.2); /* Bottom inner shadow */
    position: relative;
    margin-left: -15.5px; /* Centering: (28/2) + 1.5px margin of white key */
    margin-right: -15.5px;
    z-index: 2; /* Above white keys */
}
.black-key:active {
    background: linear-gradient(to bottom, #303030 0%, #181818 100%); /* Pressed gradient */
    box-shadow: 0px 1px 0px #0A0A0A, inset 0px 1px 2px rgba(0,0,0,0.3);
    color: #FFFFFF;
}

/* Fullscreen button styling */
.fullscreen-control {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    min-width: auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fullscreen-btn {
    background: rgba(0, 255, 255, 0.2);
    border: 1px solid #00ffff;
    color: #00ffff;
    padding: 4px 6px;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Orbitron', monospace;
    font-size: 0.8rem;
    transition: all 0.2s;
    min-width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fullscreen-btn:hover {
    background: rgba(0, 255, 255, 0.3);
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.4);
    transform: translateY(-1px);
}

.fullscreen-btn:active {
    transform: translateY(0);
    background: rgba(0, 255, 255, 0.4);
}