/*
Copyright (c) 2026 Christopher Lepenik

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, version 3.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
html, body {
    width: 100%;
}

body {
    font-family: 'Segoe UI', sans-serif;
    background-color: #1a1a1a;
    color: #f0f0f0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    height: 100vh;
    margin: 0;
    overflow: hidden;
}

.page-scroll {
    width: 100%;
    min-height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px 0;
    box-sizing: border-box;
}

.synth-case {
    background: #2b2b2b;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    border-top: 4px solid #444;
    width: 920px;
    max-width: none;
    box-sizing: border-box;
    margin: 0 auto;
}

/* Header Config */
.synth-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #333;
    padding-bottom: 15px;
}

.synth-header h2 {
    margin: 0;
    color: #fff;
    letter-spacing: 1px;
}

.config-group select {
    background: #222;
    color: #888;
    border: 1px solid #444;
    padding: 4px 8px;
    font-size: 11px;
    border-radius: 4px;
}

.config-group select:hover {
    color: #ccc;
    border-color: #666;
}

.config-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.about-btn {
    background: #2a2a2a;
    color: #ccc;
    border: 1px solid #444;
    padding: 4px 10px;
    font-size: 11px;
    border-radius: 4px;
    cursor: pointer;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.about-btn:hover {
    color: #fff;
    border-color: #666;
}

.record-btn {
    background: #2a2a2a;
    color: #ddd;
    border: 1px solid #444;
    padding: 4px 10px;
    font-size: 11px;
    border-radius: 4px;
    cursor: pointer;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.record-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.record-btn-start:hover:not(:disabled) {
    color: #fff;
    border-color: #666;
}

.record-btn-stop {
    border-color: #663333;
    color: #ffb3b3;
}

.record-btn-stop:hover:not(:disabled) {
    border-color: #aa4444;
    color: #fff;
}

.controls-row {
    display: flex;
    gap: 30px;
    margin-bottom: 25px;
    background: #222;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #333;
    align-items: flex-start;
}

.utility-row {
    display: flex;
    gap: 14px;
    align-items: stretch;
    margin-bottom: 15px;
}

.utility-panel {
    flex: 1;
    background: #222;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.utility-panel-midi {
    flex: 1.6;
}

.utility-label {
    font-size: 11px;
    text-transform: uppercase;
    color: #9f9f9f;
    letter-spacing: 0.5px;
}

.midi-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.utility-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.midi-btn {
    color: #ddd;
}

.midi-controls select {
    min-width: 240px;
}

.midi-status {
    font-size: 11px;
    color: #d8b36e;
    border: 1px solid #3d3527;
    background: #1d1a14;
    border-radius: 999px;
    padding: 4px 10px;
    white-space: normal;
    max-width: 100%;
}

@media (max-width: 980px) {
    .utility-row {
        flex-direction: column;
    }

    .utility-panel-midi {
        flex: 1;
    }
}

.control-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 150px;
    width: 180px;
}

label { font-size: 12px; text-transform: uppercase; color: #aaa; letter-spacing: 0.5px; }

.value-label {
    font-size: 12px;
    color: #ff9d00;
}

.value-label-octave {
    font-size: 14px;
    min-width: 20px;
    text-align: center;
    font-weight: bold;
}

input[type=range] {
    width: 150px;
    accent-color: #ff9d00;
    cursor: pointer;
}

.range-control {
    display: flex;
    align-items: center;
    gap: 6px;
}

.param-stepper {
    background: #2a2a2a;
    color: #f3c06a;
    border: 1px solid #444;
    border-radius: 4px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s, color 0.1s;
}

.param-stepper:hover {
    background: #333;
    border-color: #666;
    color: #ffd08a;
}

.param-stepper:active {
    background: #ff9d00;
    border-color: #ff9d00;
    color: #1a1a1a;
}

.param-stepper:focus-visible {
    outline: 2px solid #ff9d00;
    outline-offset: 2px;
}

select {
    padding: 5px;
    background: #444;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.toggle-switch {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toggle-switch input[type="checkbox"] {
    appearance: none;
    width: 46px;
    height: 22px;
    background: #2a2a2a;
    border: 1px solid #555;
    border-radius: 999px;
    position: relative;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.toggle-switch input[type="checkbox"]::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ff9d00;
    transition: transform 0.15s ease;
}

.toggle-switch input[type="checkbox"]:checked {
    background: #1f1f1f;
    border-color: #ff9d00;
}

.toggle-switch input[type="checkbox"]:checked::after {
    transform: translateX(22px);
}

.toggle-switch input[type="checkbox"]:focus-visible {
    outline: 2px solid #ff9d00;
    outline-offset: 2px;
}

.toggle-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #777;
    cursor: pointer;
    user-select: none;
}

.toggle-label-active {
    color: #ffb347;
}

.octave-btn {
    background: #444;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    transition: background 0.1s;
}

.octave-btn:hover {
    background: #555;
}

.octave-btn:active {
    background: #ff9d00;
    color: #000;
}

.piano-container {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: 10px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.key {
    border: 1px solid #000;
    border-radius: 0 0 4px 4px;
    cursor: pointer;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    transition: background 0.05s, transform 0.05s;
    box-sizing: border-box;
}

.white-key {
    width: 50px;
    height: 200px;
    background: #fdfdfd;
    color: #333;
    z-index: 1;
    box-shadow: inset 0 -5px 10px rgba(0,0,0,0.1);
}

.white-key.active { 
    background: #e0e0e0; 
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.4);
    transform: translateY(2px);
}

.black-key {
    width: 32px;
    height: 120px;
    background: linear-gradient(180deg, #333 0%, #000 100%);
    color: white;
    position: absolute;
    z-index: 2;
    margin-left: -16px; 
    border-bottom: 4px solid #111;
}

.black-key.active { 
    background: #222;
    border-bottom: 1px solid #111;
    transform: translateY(2px);
}

/* Hardcoded positions for black keys relative to left edge */
.bk-1 { left: 50px; }
.bk-2 { left: 100px; }
.bk-3 { left: 200px; }
.bk-4 { left: 250px; }
.bk-5 { left: 300px; }
.bk-6 { left: 400px; }
.bk-7 { left: 450px; }

.key-hint {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    opacity: 0.5;
    pointer-events: none;
}

.overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    cursor: pointer;
    color: white;
    flex-direction: column;
}

.overlay h1 { font-size: 24px; font-weight: normal; }
.overlay p { color: #aaa; margin-top: 10px; }

.about-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: 20px;
}

.about-modal.open {
    display: flex;
}

.about-content {
    background: #1f1f1f;
    border: 1px solid #333;
    border-radius: 10px;
    padding: 20px 22px;
    max-width: 560px;
    width: 100%;
    box-shadow: 0 20px 40px rgba(0,0,0,0.6);
    position: relative;
}

.about-content h3 {
    margin: 0 0 10px 0;
}

.about-content h4 {
    margin: 14px 0 6px 0;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #bbb;
}

.about-content p {
    margin: 8px 0;
    color: #ddd;
    line-height: 1.4;
    font-size: 13px;
}

.about-content a {
    color: #ffb545;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 181, 69, 0.4);
}

.about-content a:hover {
    color: #ffd08a;
    border-bottom-color: rgba(255, 208, 138, 0.8);
}

.about-quote {
    background: #151515;
    border-left: 3px solid #ff9d00;
    padding: 8px 10px;
    font-style: italic;
}

.about-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: transparent;
    border: none;
    color: #aaa;
    font-size: 20px;
    cursor: pointer;
}

.about-close:hover {
    color: #fff;
}