:root {
    --bg-color: #e2e8f0;
    --surface: #f8fafc;
    --surface-rgb: 248, 250, 252;
    --primary: #FFB347;
    --primary-hover: #ff9d00;
    --text-main: #1a202c;
    --text-light: #475569;
    --border: #94a3b8;
    --border-strong: rgba(0, 0, 0, 0.3);
    --highlight: rgba(255, 179, 71, 0.2);
    --highlight-border: #FFB347;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --cell-bg: transparent;
    --takt-bg: rgba(0, 0, 0, 0.02);
    --grid-line: rgba(0, 0, 0, 0.10);
    --grid-8th: rgba(0, 0, 0, 0.22);
    --grid-16th: rgba(0, 0, 0, 0.12);
    --grid-32nd: rgba(0, 0, 0, 0.05);
    --color-l: #2563eb;
    /* Vibrant Blue */
    --color-l-rgb: 37, 99, 235;
    --color-r: #ea580c;
    /* Vibrant Orange */
    --color-r-rgb: 234, 88, 12;
    --hp-color-l: #3b82f6;
    /* Handpan Left Color (fixed) */
    --hp-color-l-rgb: 59, 130, 246;
    --hp-color-r: #f59e0b;
    /* Handpan Right Color (fixed) */
    --hp-color-r-rgb: 245, 158, 11;
    --sidebar-width: 250px;
    --hp-base-height: 288px;
    --hp-zone-height: calc(55px + var(--hp-base-height) * var(--hp-scale, 1));
}

body.dark-mode {
    --bg-color: #171717;
    --surface: #262626;
    --surface-rgb: 38, 38, 38;
    --primary: #FFB347;
    --primary-hover: #e6a13f;
    --text-main: #f8fafc;
    --text-light: #a3a3a3;
    --border: #404040;
    --border-strong: rgba(255, 255, 255, 0.4);
    --highlight: rgba(255, 179, 71, 0.2);
    --highlight-border: #FFB347;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
    --takt-bg: rgba(255, 255, 255, 0.02);
    --grid-line: rgba(255, 255, 255, 0.10);
    --grid-8th: rgba(255, 255, 255, 0.22);
    --grid-16th: rgba(255, 255, 255, 0.12);
    --grid-32nd: rgba(255, 255, 255, 0.05);
    --color-l: #60a5fa;
    /* Vibrant Blue */
    --color-l-rgb: 96, 165, 250;
    --color-r: #fb923c;
    /* Vibrant Orange */
    --color-r-rgb: 251, 146, 60;
}

html {
    overflow: hidden;
    height: 100%;
    height: 100dvh;
    overscroll-behavior: none;
}

body {
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-weight: 300;
    background: var(--bg-color);
    color: var(--text-main);
    margin: 0;
    padding: 5px 10px;
    display: flex;
    flex-direction: column;
    height: 100%;
    height: 100dvh;
    box-sizing: border-box;
    overflow: hidden;
    overscroll-behavior: none;
    transition: background 0.3s, color 0.3s;
}

/* Layout-Skalierung auf 90% für Standard-Desktop-Bildschirme (Full HD & kleiner), 
   um mehr Arbeitsfläche zu schaffen. Mobile Geräte (<1024px) und 4K-Bildschirme bleiben auf 100%. */
@media screen and (min-width: 1024px) and (max-width: 1920px),
screen and (min-width: 1024px) and (max-height: 1080px) {
    html {
        zoom: 0.9;
    }

    html,
    body {
        height: calc(100dvh / 0.9) !important;
    }
}

button,
input,
select,
textarea {
    font-family: 'Segoe UI', system-ui, sans-serif;
}

/* --- MENUBAR --- */
#menubar {
    display: flex;
    align-items: center;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 0 65px 0 15px;
    /* Macht rechts Platz für den schwebenden Toggle-Button */
    margin: -5px -10px 0 -10px;
    z-index: 200;
    position: relative;
    height: 52px;
    /* Leiste um 50% breiter/höher gemacht */
    flex-shrink: 0;
}

.menu-dropdown {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.menu-btn {
    background: transparent;
    border: none;
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    color: var(--text-main);
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
}

.menu-btn:hover {
    background: rgba(128, 128, 128, 0.15);
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border-radius: 0 0 6px 6px;
    min-width: 240px;
    z-index: 200;
    padding: 6px 0;
    flex-direction: column;
}

body.dark-mode .dropdown-content {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.menu-dropdown:hover .menu-btn {
    background: var(--highlight);
    color: var(--primary);
}

.menu-dropdown:hover .dropdown-content {
    display: flex;
}

.dropdown-item {
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    color: var(--text-main);
    border-radius: 0;
    transition: none;
}

.dropdown-item:hover {
    background: var(--primary);
    color: #1a202c;
}

.dropdown-item:hover .icon {
    stroke: #1a202c;
}

.dropdown-item:disabled {
    opacity: 0.5;
    pointer-events: none;
}

.dropdown-divider {
    height: 1px;
    background: var(--border);
    margin: 6px 0;
}

.shortcut {
    margin-left: auto;
    font-size: 11px;
    opacity: 0.6;
    font-weight: 500;
}

.dropdown-item:hover .shortcut {
    opacity: 0.8;
}

/* --- TAB BAR --- */
#tab-bar-container {
    display: flex;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    margin: 0 -10px 10px -10px;
    padding: 0 15px;
    height: 32px;
    align-items: flex-end;
    gap: 4px;
    z-index: 150;
    flex-shrink: 0;
}

body.dark-mode #tab-bar-container {
    background: rgba(var(--surface-rgb), 0.6);
}

#tab-bar {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}

#tab-bar::-webkit-scrollbar {
    display: none;
}

.track-tab {
    padding: 6px 12px;
    background: rgba(128, 128, 128, 0.1);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    font-size: 12px;
    font-weight: 400;
    color: var(--text-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 150px;
    white-space: nowrap;
    user-select: none;
    transition: all 0.2s;
}

.track-tab:hover {
    background: rgba(128, 128, 128, 0.15);
    color: var(--text-main);
}

.track-tab.active {
    background: var(--bg-color);
    color: var(--primary);
    border-bottom: 2px solid var(--bg-color);
    margin-bottom: -1px;
    border-top: 2px solid var(--primary);
    padding-top: 5px;
}

.track-tab.selected {
    background: rgba(128, 128, 128, 0.25);
    color: var(--primary);
    border-top: 2px solid var(--primary);
}

body:not(.dark-mode) .track-tab.selected {
    color: #d97706; /* Darker orange for readability */
}

body:not(.dark-mode) .track-tab.active {
    color: #d97706; /* Darker orange for readability */
    font-weight: 500;
}

.track-tab-close {
    font-size: 16px;
    line-height: 1;
    opacity: 0.5;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: -4px;
}

.track-tab-close:hover {
    opacity: 1;
    background: rgba(197, 48, 48, 0.15);
    color: #c53030;
}

#btn-new-tab {
    background: transparent;
    border: none;
    color: var(--text-light);
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    padding: 0 10px;
    height: 28px;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

#btn-new-tab:hover {
    background: rgba(128, 128, 128, 0.1);
    color: var(--text-main);
}

/* --- Smooth Theme Fade using View Transitions API --- */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.3s;
    animation-timing-function: ease-in-out;
}

.menubar-center-block {
    position: absolute;
    left: calc(50% + 110px);
    /* 110px = Offset durch die geöffnete Sidebar, um es auf dem Sheet zu zentrieren */
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.menubar-center-left {
    position: absolute;
    right: calc(100% + 12px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform-origin: right center;
}

.menubar-center-right {
    position: absolute;
    left: calc(100% + 12px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform-origin: left center;
}

.menubar-group-label {
    font-size: 9px;
    font-weight: 400;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

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

@media (max-width: 900px) {

    .menubar-center-left,
    .menubar-center-right {
        opacity: 0;
        transform: scale(0.5);
        pointer-events: none;
    }
}

body.left-sidebar-collapsed .menubar-center-block {
    left: 50%;
}

.menubar-btn-circle {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-main);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
}

.menubar-btn-circle:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.menubar-btn-circle.active {
    background: var(--primary);
    border-color: var(--primary);
}

.menubar-btn-circle.active .icon path {
    stroke: var(--surface) !important;
}

#btn-menubar-select-mode.active {
    color: #1a202c !important;
}

#btn-menubar-select-mode.active .icon rect {
    fill: #1a202c !important;
    stroke: none !important;
}

body.dark-mode .menubar-btn-circle {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

body.dark-mode .menubar-btn-circle:hover {
    border-color: var(--primary);
    background: rgba(255, 255, 255, 0.1);
}

body.dark-mode .menubar-btn-circle.active {
    background: var(--primary);
    border-color: var(--primary);
}

body:not(.dark-mode) .menubar-btn-circle.active {
    border-color: var(--text-light);
    color: #1a202c;
}

body:not(.dark-mode) .menubar-btn-circle.active .icon path {
    stroke: #1a202c !important;
}

.menubar-btn-circle .icon {
    width: 28px !important;
    height: 28px !important;
    transform: scale(1.3);
}

#icon-swap-lr-menubar {
    transform: scale(1.9) !important;
}

#btn-menubar-auto-adv .icon {
    transform: scale(1.9) !important;
}

#btn-menubar-select-mode .icon {
    transform: scale(1.4) !important;
}

/* --- FRACTIONS FOR TIMING --- */
.fraction {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

.fraction .num {
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 500;
}

.fraction .den {
    margin-top: 2px;
    font-size: 11px;
    font-weight: 400;
}

.fraction .line {
    width: 100%;
    min-width: 10px;
    height: 1px;
    background-color: currentColor;
    opacity: 0.7;
}

/* --- NOTATION TOGGLE SWITCH --- */
.notation-toggle {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: rgba(0, 0, 0, 0.08);
    /* Etwas dunklerer Track für mehr Kontrast */
    border-radius: 8px;
    padding: 3px;
    border: 1px solid var(--border);
    cursor: pointer;
    user-select: none;
    width: 140px;
    /* Breiter und exakt definierte Größe für perfekte Zentrierung */
    height: 32px;
    /* Feste Höhe, damit es identisch zu den Kreis-Buttons ist */
    box-sizing: border-box;
}

body.dark-mode .notation-toggle {
    background: rgba(0, 0, 0, 0.4);
    box-shadow: none;
}

.notation-toggle-slider {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc(50% - 3px);
    /* Füllt genau die Hälfte aus */
    background: var(--surface);
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    /* Deutlicherer Schatten */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

body.dark-mode .notation-toggle-slider {
    background: #333;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.notation-toggle.mode-neutral .notation-toggle-slider {
    transform: translateX(100%);
}

.notation-toggle-btn {
    position: relative;
    z-index: 2;
    background: transparent;
    border: none;
    color: var(--text-light);
    padding: 0;
    height: 100%;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: color 0.3s ease;
    pointer-events: none;
    /* Klicks gehen direkt an den Container */
    width: 100%;
}

.notation-toggle-btn.active {
    color: var(--text-main);
}

.hand-left {
    margin-right: -4px;
}

.hand-right {
    margin-left: -4px;
}

/* --- THEME TOGGLE BUTTON IN MENUBAR --- */
.btn-theme-toggle {
    position: fixed;
    left: auto;
    right: 20px;
    top: 8px;
    width: 40px;
    height: 40px;
    background-color: var(--surface) !important;
    /* Button komplett deckend machen */
    opacity: 1 !important;
    border: 1px solid var(--border);
    border-radius: 50%;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    /* Schneidet die Enden der diagonalen Linie exakt am runden Button-Rand ab */
    z-index: 300;
}

.btn-theme-toggle svg {
    width: 100%;
    height: 100%;
}

.theme-outline {
    stroke: var(--border-strong);
    transition: stroke 0.3s;
}

.theme-outline-bg {
    stroke: var(--surface);
    transition: stroke 0.3s;
}

.sun-part,
.moon-part {
    transition: all 0.3s ease;
}

/* transform-origin entfernt, damit CSS nicht in die SVG-Skalierung eingreift */

/* Light Mode State */
body:not(.dark-mode) .sun-part {
    stroke: #e6a13f;
    /* Schlichteres, weniger knalliges Orange */
    color: #e6a13f;
    /* Schein entfernt */
}

body:not(.dark-mode) .moon-part {
    opacity: 0.15;
    color: var(--text-light);
}

/* Light Mode HOVER (mimic Dark Mode) */
@media (hover: hover) {
    body:not(.dark-mode) .btn-theme-toggle:hover {
        transform: scale(1.08);
        background-color: var(--surface) !important;
        border-color: var(--primary);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    }

    body:not(.dark-mode) .btn-theme-toggle:hover .theme-outline {
        stroke: var(--primary);
    }

    body:not(.dark-mode) .btn-theme-toggle:hover .sun-part {
        opacity: 0.15;
        stroke: var(--text-light);
        color: var(--text-light);
    }

    body:not(.dark-mode) .btn-theme-toggle:hover .moon-part {
        opacity: 1;
        color: var(--text-main);
        /* Dunkler Mond, damit er auf hellem Hintergrund sichtbar ist */
        filter: none;
    }
}

/* Dark Mode State */
body.dark-mode .btn-theme-toggle {
    background-color: var(--surface) !important;
    /* Auch im Dark Mode komplett deckend */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
    border-color: rgba(255, 255, 255, 0.3);
}

body.dark-mode .theme-outline {
    stroke: rgba(255, 255, 255, 0.3);
}

body.dark-mode .sun-part {
    opacity: 0.15;
    stroke: var(--text-light);
    color: var(--text-light);
}

body.dark-mode .moon-part {
    color: #ffffff;
    /* Weißer Mond */
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8));
    /* Weißes Leuchten */
}

/* Dark Mode HOVER (mimic Light Mode) */
@media (hover: hover) {
    body.dark-mode .btn-theme-toggle:hover {
        transform: scale(1.08);
        background-color: var(--surface) !important;
        border-color: var(--primary);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8);
    }

    body.dark-mode .btn-theme-toggle:hover .theme-outline {
        stroke: var(--primary);
    }

    body.dark-mode .btn-theme-toggle:hover .sun-part {
        opacity: 1;
        stroke: #e6a13f;
        color: #e6a13f;
    }

    body.dark-mode .btn-theme-toggle:hover .moon-part {
        opacity: 0.15;
        color: var(--text-light);
        filter: none;
    }
}

/* --- FULLSCREEN TOGGLE BUTTON --- */
.btn-fullscreen-toggle {
    position: fixed;
    right: 70px;
    /* Platziert ihn direkt links neben dem Theme-Toggle */
    top: 8px;
    width: 40px;
    height: 40px;
    background-color: var(--surface) !important;
    opacity: 1 !important;
    border: 1px solid var(--border);
    border-radius: 50%;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 300;
}

.btn-fullscreen-toggle .icon {
    width: 18px;
    height: 18px;
    transition: all 0.3s ease;
}

body.dark-mode .btn-fullscreen-toggle {
    background-color: var(--surface) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
    border-color: rgba(255, 255, 255, 0.3);
}

@media (hover: hover) {
    body:not(.dark-mode) .btn-fullscreen-toggle:hover {
        transform: scale(1.08);
        background-color: var(--surface) !important;
        border-color: var(--primary);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
        color: var(--primary);
    }

    body.dark-mode .btn-fullscreen-toggle:hover {
        transform: scale(1.08);
        background-color: var(--surface) !important;
        border-color: var(--primary);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8);
        color: var(--primary);
    }
}

.tool-group {
    background: rgba(var(--surface-rgb), 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(128, 128, 128, 0.2);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
}

.highlight-group {
    border: 1px solid rgba(128, 128, 128, 0.25);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
    transform: scale(1.05);
    background: rgba(var(--surface-rgb), 0.95);
    z-index: 10;
}

body.dark-mode .highlight-group {
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6);
}

.highlight-group .tool-group-content {
    padding: 6px 14px;
    gap: 12px;
}

.btn-play-large {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary) !important;
    color: #1a202c !important;
}

.btn-play-large .icon {
    width: 22px;
    height: 22px;
    margin-left: 2px;
}

.tool-group-label {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--text-light);
    text-align: center;
    background: transparent;
    padding: 3px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.15);
    letter-spacing: 0.5px;
}

.tool-group-content {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    height: 100%;
    flex-wrap: wrap;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.res-btn {
    padding: 4px 6px;
    font-family: monospace;
    font-size: 11px;
    border-radius: 4px;
}

label {
    font-weight: 400;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

input,
select {
    padding: 4px 6px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
    background: var(--surface);
    color: var(--text-main);
}

input:disabled,
select:disabled,
button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

input[readonly] {
    opacity: 0.7;
    background: rgba(128, 128, 128, 0.1);
    pointer-events: none;
    border-color: transparent;
}

#bpm {
    width: 40px !important;
    text-align: center;
    padding: 4px 2px;
}

#playbackSpeed {
    width: 48px !important;
    text-align: center;
    padding: 4px 2px;
}

#timeSig {
    width: 44px !important;
    text-align: center;
    padding: 4px 2px;
}

input:focus,
select:focus {
    outline: 2px solid var(--primary);
    outline-offset: -1px;
    background-color: var(--surface);
    color: var(--text-main);
}

select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23718096' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    padding-right: 22px;
}

select option {
    background: var(--surface);
    color: var(--text-main);
}

body.dark-mode select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a0aec0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* Entfernt die systemeigenen Pfeile (Spin-Buttons) bei Zahlen-Eingabefeldern */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

button {
    padding: 5px 10px;
    border: none;
    border-radius: 6px;
    font-weight: 400;
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-main);
    transition: 0.2s;
}

button.primary {
    background: var(--primary);
    color: #1a202c;
}

button.primary:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
}

button.primary .auto-adv-icon path {
    stroke: #1a202c !important;
}

button.btn-delete-repeat {
    background-color: var(--primary) !important;
    color: #1a202c !important;
}

button.btn-delete-repeat svg {
    stroke: #1a202c !important;
}

button.secondary {
    background: var(--surface);
    border: 1px solid var(--border);
}

button.secondary:hover {
    background: var(--border);
}

.icon {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: inline-block;
    vertical-align: middle;
}

.icon-fill {
    fill: currentColor;
    stroke: none;
}

.btn-icon {
    padding: 6px;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    justify-content: center;
}

.divider {
    width: 1px;
    height: 25px;
    background: var(--border);
    margin: 0 5px;
}

#track-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    margin: 0;
    padding: 15px 20px 10px 20px;
    background: rgba(var(--surface-rgb), 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--border);
    border-radius: 12px 12px 0 0;
    z-index: 90;
    transition: 0.2s;
    flex-shrink: 0;
}

body.dark-mode #track-header {
    background: rgba(var(--surface-rgb), 0.55);
}

#track-header h1 {
    margin: 0;
    font-size: 18px;
}

#track-header h3 {
    margin: 0;
    font-size: 13px;
    color: var(--text-light);
}

#track-header p {
    margin: 0;
    font-size: 11px;
    color: var(--text-light);
    transition: color 0.2s ease;
}

#track-header p:hover {
    color: var(--primary);
}

/* --- TRACK INFO POPOVER --- */
.track-info-popover {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) scale(0.95);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 15px;
    width: 250px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.15s ease, opacity 0.15s ease;
    text-align: left;
}

body.dark-mode .track-info-popover {
    background: rgba(var(--surface-rgb), 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.track-info-popover.active {
    opacity: 1;
    pointer-events: all;
    transform: translateX(-50%) scale(1);
}

.track-info-popover .popover-header h4 {
    margin: 0 0 10px 0;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--text-light);
    letter-spacing: 0.5px;
}

.track-info-popover .form-group {
    margin-bottom: 10px;
}

.track-info-popover .form-group label {
    display: block;
    margin-bottom: 4px;
    color: var(--text-light);
    font-size: 11px;
    font-weight: 400;
}

.track-info-popover .form-group input {
    width: 100%;
    padding: 6px 8px;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-color);
    color: var(--text-main);
    font-size: 13px;
}

.track-info-popover .btn-small {
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 4px;
}


#transport-row {
    position: absolute;
    bottom: var(--hp-zone-height, 0px);
    top: auto;
    left: 50%;
    transform: translateX(-50%);
    z-index: 85;
    width: max-content;
    max-width: calc(100vw - 20px);
    display: flex;
    gap: 10px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

body.hp-collapsed #transport-row {
    bottom: 0;
}

/* Make transport bar attach to the editor frame */
#transport-row .tool-group {
    transform: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 1px solid var(--border);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-top: 1px solid rgba(128, 128, 128, 0.2);
    padding-bottom: 2px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 -4px 12px rgba(0, 0, 0, 0.05);
    max-width: 100%;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

body.dark-mode #transport-row .tool-group {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 -4px 12px rgba(0, 0, 0, 0.1);
}

#main-layout {
    display: flex;
    flex: 1;
    gap: 10px;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    position: relative;
    overflow: visible;
}

#editor-container {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-radius: 12px;
    padding: 10px 20px 0px 20px;
    overflow: hidden;
    min-width: 0;
    max-width: 100%;
    box-shadow: var(--shadow);
    outline: none;
    transition: width 0.3s ease;
}


#editor {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--grid-min, 350px), 1fr));
    gap: 24px 24px;
    align-items: start;
    align-content: start;
    padding-top: 85px;
    padding-right: 10px;
    padding-bottom: calc(var(--hp-zone-height) + 80px);
    margin-bottom: 0px;
    transition: padding-bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    scrollbar-width: none;
    /* Versteckt native Scrollbar in Firefox */
}

#editor::-webkit-scrollbar {
    display: none;
    /* Versteckt native Scrollbar in Chrome/Safari */
}

/* --- CUSTOM EDITOR SCROLLBAR --- */
#editor-scrollbar {
    position: absolute;
    top: 85px;
    bottom: calc(var(--hp-zone-height) + 5px);
    /* +5px Puffer zur Glas-Kante */
    right: 5px;
    width: 14px;
    overflow-y: scroll;
    z-index: 100;
    transition: bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

body.hp-collapsed #editor-scrollbar {
    bottom: 5px;
}

#editor-scrollbar::-webkit-scrollbar {
    width: 8px;
}

#editor-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

#editor-scrollbar::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 10px;
}

#editor-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--text-light);
}

body.hp-collapsed #editor {
    padding-bottom: 70px;
    margin-bottom: 0;
}

#editor-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, rgba(var(--surface-rgb), 0.6) 40%, rgba(var(--surface-rgb), 0.95) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 40%);
    mask-image: linear-gradient(to bottom, transparent, black 40%);
    z-index: 50;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

body.hp-collapsed #editor-container::after {
    opacity: 1;
}

#handpan-backdrop {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--hp-zone-height);
    background-color: rgba(var(--surface-rgb), 0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-top: 1px solid var(--border);
    border-radius: 0 0 12px 12px;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    z-index: 90;
    pointer-events: auto;
    /* Blockiert Klicks durch die Glas-Fläche auf das Sheet dahinter */
}

body.dark-mode #handpan-backdrop {
    background-color: rgba(var(--surface-rgb), 0.55);
}

#handpan-backdrop.collapsed {
    transform: translateY(100%);
    opacity: 0;
}

.hp-backdrop-close {
    position: absolute;
    bottom: calc(var(--hp-zone-height) - 30px);
    right: 15px;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
    z-index: 100;
}

body.hp-collapsed .hp-backdrop-close {
    bottom: -30px;
    opacity: 0;
    pointer-events: none;
}

/* --- Allgemeiner Hover-Stil für Schließen-Buttons --- */
.hp-backdrop-close:hover,
#btn-close-timeline:hover,
#tl-mini-close:hover,
button[onclick*="cancelHandpanConfig"]:hover,
#btn-show-left-sidebar:hover,
#sidebar-shortcuts h2 .btn-icon:hover,
#sidebar-handpan h2 .btn-icon:hover,
#sidebar-markers h2 .btn-icon:hover {
    color: var(--primary);
    border-color: var(--primary);
    transform: scale(1.1);
    background: var(--surface);
    /* Überschreibt den :hover-Stil von .secondary Buttons */
}

/* Hover-Effekt für aktive Toolbar-Buttons (zum Schließen von Sidebars) */
#btn-sidebar-shortcuts.primary:hover,
#btn-sidebar-handpan.primary:hover,
#btn-sidebar-markers.primary:hover {
    color: var(--primary);
    border-color: var(--primary);
    transform: scale(1.1);
    background: var(--surface);
}

@media (max-width: 900px) {
    #editor {
        /* Flexbox handles responsiveness naturally, no override needed */
    }
}

body.force-single-col #editor {
    flex-direction: column;
}

/* --- SIDEBAR LEFT (Notes, Grid, Timing) --- */
#sidebar-left {
    width: 180px;
    background: var(--surface);
    border-radius: 12px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    padding: 0 10px 0 10px;
    gap: 10px;
    flex-shrink: 0;
    overflow-y: auto;
    overflow-x: hidden;
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
}

#sidebar-left.collapsed {
    margin-left: -210px;
    /* 180px width + 20px padding + 10px gap */
    visibility: hidden;
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0.3s;
}

.sidebar-header-left {
    display: none;
    /* Interner Header wird nicht mehr gebraucht, da der Button nun außen sitzt */
}

.sidebar-header-left .btn-icon {
    width: 28px;
    height: 28px;
}

#sidebar-left::before {
    content: '';
    position: sticky;
    top: 0;
    margin: 0 -10px 0 -10px;
    height: 30px;
    background: linear-gradient(to bottom, rgba(var(--surface-rgb), 1) 40%, rgba(var(--surface-rgb), 0) 100%);
    z-index: 50;
    pointer-events: none;
    flex-shrink: 0;
}

.sidebar-segment {
    display: flex;
    flex-direction: column;
}

.segment-header {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--text-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 10px;
    user-select: none;
    letter-spacing: 0.5px;
}

.segment-header:hover {
    color: var(--primary);
}

.segment-header .chevron {
    transition: transform 0.3s ease;
}

.segment-header.collapsed .chevron {
    transform: rotate(-90deg);
}

.segment-content {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}

.sidebar-divider {
    grid-column: span 5;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--border-strong), transparent);
    margin: 4px 0;
}

.segment-content.collapsed {
    display: none !important;
}

.segment-btn {
    width: 100%;
    justify-content: center;
    padding: 6px 0px;
}

.note-btn {
    flex-direction: column;
    gap: 4px;
    font-size: 10px;
    padding: 6px 4px;
}

.note-btn .icon {
    width: 20px;
    height: 20px;
}

/* Tab um linke Sidebar wieder auszuhändigen */
#btn-show-left-sidebar {
    position: absolute;
    left: calc(180px - 16px);
    top: 4px;
    z-index: 100;
    opacity: 1;
    pointer-events: all;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--text-light);
}

#sidebar-left.collapsed~#btn-show-left-sidebar {
    left: -10px;
}

/* --- SIDEBAR --- */
#sidebar-shortcuts {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 100;
    width: var(--sidebar-width);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-left: 1px solid var(--border-strong);
    border-radius: 0 12px 12px 0;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, opacity 0.3s ease;
    padding: 20px;
    overflow-y: auto;
    white-space: nowrap;
    flex-shrink: 0;
}

body.dark-mode #sidebar-shortcuts {
    background: rgba(0, 0, 0, 0.3);
}

#sidebar-shortcuts.collapsed {
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
}

.shortcut-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 14px;
    color: var(--text-main);
}

.shortcut-category {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-main);
    margin-top: 24px;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
}

.kbd {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 2px 0 var(--border);
    border-radius: 4px;
    padding: 3px 8px;
    font-weight: 400;
    font-size: 12px;
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.2s ease;
}

.kbd:hover {
    background: var(--surface-hover, rgba(0,0,0,0.05));
    border-color: var(--primary);
}

.kbd.listening {
    background: var(--primary);
    color: white;
    border-color: var(--primary-dark, #e6a13f);
    box-shadow: 0 2px 0 var(--primary-dark, #e6a13f);
}

.kbd.unassigned {
    opacity: 0.8;
    border: 1px dashed var(--border);
    color: #f59e0b; /* Orange for dark mode */
    background: transparent;
    box-shadow: none;
}

body:not(.dark-mode) .kbd.unassigned {
    color: #d97706; /* Darker orange for light mode */
    border-color: #d97706;
}

/* --- GRID --- */
.region-header {
    position: absolute;
    bottom: 100%;
    left: 28px;
    /* Platz für die Takt-Nummer */
    margin-bottom: 6px;
    background: var(--marker-bg, var(--surface));
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 11px;
    padding: 4px 10px;
    color: var(--text-main);
    border: 1px solid var(--marker-color, var(--border));
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    white-space: nowrap;
    z-index: 15;
}

.region-header:hover {
    border-color: var(--marker-color, var(--primary));
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

body.dark-mode .region-header {
    background: var(--marker-bg, var(--surface));
    border-color: var(--marker-color, rgba(255, 255, 255, 0.1));
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

body.dark-mode .region-header:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.param-header {
    position: absolute;
    bottom: 100%;
    left: 28px;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 500;
    color: var(--primary);
    background: var(--surface);
    padding: 2px 6px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    white-space: nowrap;
    z-index: 15;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

body.dark-mode .param-header {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.region-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
    margin-right: 6px;
    flex-shrink: 0;
}

.takt-container {
    max-width: 100%;
    background: var(--takt-bg);
    border-radius: 8px;
    padding: 4px 0px 0px 0px;
    margin-top: 56px;
    position: relative;
    display: flex;
    min-width: min-content;
    box-sizing: border-box;
    border-left: 1px solid var(--border-strong);
    border-right: 1px solid var(--border-strong);
}

border-right: 1px solid var(--border-strong);
}

/* wide-takt is obsolete as we use flexbox */

.takt-container.has-repeat-start {
    margin-left: 24px;
}

.takt-container.row-has-triplet {
    margin-top: 86px;
}

.takt-container.row-has-triplet .takt-num-overlay {
    top: -52px;
}

.takt-container.row-has-triplet .region-header {
    margin-bottom: 36px;
}

.takt-container.row-has-triplet .param-header {
    margin-bottom: 36px;
}

.ramp-overlay {
    position: absolute;
    top: -50px;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    z-index: 10;
}

.takt-container.row-has-triplet .ramp-overlay {
    top: -80px;
}

/* --- REPEAT MARKERS --- */
.double-barline {
    width: 14px;
    box-sizing: border-box;
    flex-shrink: 0;
    position: relative;
    margin-top: -4px;
    margin-right: -1px;
    margin-left: 12px;
    border-right: 4px solid var(--text-light);
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    background: transparent;
    z-index: 5;
}

.double-barline::before {
    content: "";
    position: absolute;
    top: -1px;
    bottom: -1px;
    right: 2px;
    width: 10px;
    border-right: 1.5px solid var(--text-light);
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.repeat-start {
    width: 14px;
    box-sizing: border-box;
    position: absolute;
    left: -20px;
    top: -1px;
    bottom: -1px;
    border-left: 4px solid var(--text-light);
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    background: transparent;
    z-index: 5;
}

.repeat-start::before {
    content: "";
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: 2px;
    width: 10px;
    border-left: 1.5px solid var(--text-light);
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.repeat-start::after {
    content: ":";
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    font-weight: 500;
    color: var(--text-light);
    line-height: 1;
    margin-top: -2px;
}

.repeat-end {
    width: 14px;
    box-sizing: border-box;
    flex-shrink: 0;
    position: relative;
    margin-top: -4px;
    margin-right: -1px;
    margin-left: 12px;
    border-right: 4px solid var(--text-light);
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    background: transparent;
    z-index: 5;
}

.repeat-end::before {
    content: "";
    position: absolute;
    top: -1px;
    bottom: -1px;
    right: 2px;
    width: 10px;
    border-right: 1.5px solid var(--text-light);
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.repeat-end::after {
    content: ":";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    font-weight: 500;
    color: var(--text-light);
    line-height: 1;
    margin-top: -2px;
}

.repeat-count {
    position: absolute;
    top: -24px;
    right: -2px;
    font-size: 16px;
    font-weight: normal;
    color: var(--text-main);
    background: transparent;
    padding: 0;
    border-radius: 0;
    white-space: nowrap;
    box-shadow: none;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.takt-num-overlay {
    position: absolute;
    top: -22px;
    left: 0px;
    font-size: 13px;
    font-weight: 400;
    color: var(--text-light);
    background: var(--surface);
    /* Verdeckt eventuelle Hilfslinien dahinter */
    padding: 0 4px;
    border-radius: 4px;
    z-index: 15;
}

body.lr-mode .takt-num-overlay {
    left: 11px;
    /* Exakt mittig über dem LR Balken */
    transform: translateX(-50%);
}

.beat-line-overlay {
    position: absolute;
    top: -4px;
    /* Ragt leicht über den Takt hinaus */
    bottom: -4px;
    /* Ragt leicht über den Takt hinaus */
    width: 1px;
    background-color: var(--border-strong);
    opacity: 0.5;
    pointer-events: none;
    z-index: 2;
    transform: translateX(-50%);
    /* Zentriert die Linie exakt auf der %-Position */
}

.beat-line-overlay.beat-line-strong {
    width: 2px;
    opacity: 0.8;
}

.takt-row {
    display: flex;
    width: 100%;
    align-items: stretch;
    position: relative;
}

.spalte {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--grid-line);
    transition: background-color 0.6s ease-out;
    box-sizing: border-box;
    min-width: 25px;
}

.spalte:first-child {
    border-left: none;
}

.spalte.sub-beat-8th {
    border-left: 1px solid var(--grid-8th);
}

.spalte.sub-beat-16th {
    border-left: 1px solid var(--grid-16th);
}

.spalte.sub-beat-32nd {
    border-left: 1px solid var(--grid-32nd);
}

.spalte.alt-beat {
    background-color: rgba(0, 0, 0, 0.015);
}

body.dark-mode .spalte.alt-beat {
    background-color: rgba(255, 255, 255, 0.015);
}

.spalte.playing {
    position: relative;
    background-color: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    transition: none;
}

.playhead-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0%;
    background-color: rgba(255, 179, 71, 0.3);
    animation: playheadSweep linear forwards;
    z-index: 20;
    pointer-events: none;
}

.playhead-line::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: -3px;
    width: 3px;
    background-color: var(--primary);
}

@keyframes playheadSweep {
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}

.spalte.marked {
    background-color: var(--highlight) !important;
    border-radius: 4px;
}

/* -- ÄUSSERER RAHMEN FÜR DIE SELEKTION -- */
.zelle.marked-cell {
    background-color: rgba(128, 128, 128, 0.15) !important;
    border-radius: 0;
    z-index: 9;
    position: relative;
    --mark-l: none;
    --mark-r: none;
    --mark-t: none;
    --mark-b: none;
}

.zelle.marked-cell::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 15;
    box-sizing: border-box;
    border-left: var(--mark-l);
    border-right: var(--mark-r);
    border-top: var(--mark-t);
    border-bottom: var(--mark-b);
}

.zelle.marked-left {
    --mark-l: 2px dashed var(--text-light);
}

.zelle.marked-right {
    --mark-r: 2px dashed var(--text-light);
}

.zelle.marked-top {
    --mark-t: 2px dashed var(--text-light);
}

.zelle.marked-bottom {
    --mark-b: 2px dashed var(--text-light);
}

.zelle.marked-left.marked-top {
    border-top-left-radius: 4px;
}

.zelle.marked-right.marked-top {
    border-top-right-radius: 4px;
}

.zelle.marked-left.marked-bottom {
    border-bottom-left-radius: 4px;
}

.zelle.marked-right.marked-bottom {
    border-bottom-right-radius: 4px;
}

.zelle {
    height: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 400;
    cursor: pointer;
    font-size: clamp(12px, 0.8vw + 4px, 16px);
    padding: 0 4px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--grid-line);
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.zelle:last-child {
    border-bottom: none;
}

.zelle.active-cell {
    background-color: rgba(128, 128, 128, 0.15);
    outline: 2px solid var(--text-light);
    outline-offset: -2px;
    border-radius: 4px;
    border-bottom: none;
}

.zelle.selected {
    background-color: rgba(128, 128, 128, 0.15);
    outline: 2px dashed var(--text-light);
    outline-offset: -2px;
    border-radius: 4px;
    border-bottom: none;
}

.zelle:hover {
    background-color: rgba(128, 128, 128, 0.15);
    border-radius: 4px;
}

.zelle:nth-child(1) {
    background-color: rgba(0, 0, 0, 0.03);
    border-bottom: 2px solid var(--border-strong);
}

.zelle:nth-child(4) {
    border-bottom: 2px solid var(--border-strong);
}

.zelle:nth-child(5) {
    display: none;
}

.zelle:nth-child(6) {
    background-color: rgba(128, 128, 128, 0.03);
}

.zelle .icon {
    width: 1.1em;
    height: 1.1em;
}

body.show-ring4 .zelle {
    height: 22px;
    font-size: clamp(11px, 0.7vw + 4px, 14px);
}

body.show-ring4 .zelle:nth-child(4) {
    border-bottom: 1px solid var(--grid-line);
}

body.show-ring4 .zelle:nth-child(5) {
    display: flex;
    border-bottom: 2px solid var(--border-strong);
}

body.dark-mode .zelle:nth-child(1) {
    background-color: rgba(255, 255, 255, 0.03);
}

body.dark-mode .zelle:nth-child(6) {
    background-color: rgba(255, 255, 255, 0.02);
}

/* --- LR MODE (L/R Hands) --- */
/* L/R Mode Labels */
.lr-row-labels-outside {
    position: absolute;
    left: -20px;
    top: 0;
    bottom: 0;
    width: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: transparent;
    z-index: 5;
}

.lr-row-labels-outside .lr-label-l,
.lr-row-labels-outside .lr-label-r {
    height: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 500;
    width: 100%;
}

.lr-row-labels-outside .lr-label-l {
    color: var(--color-l);
}

.lr-row-labels-outside .lr-label-r {
    color: var(--color-r);
}

/* Mehr Platz auf der linken Seite für die Labels schaffen */

body.lr-mode .zelle.lr-cell {
    display: flex !important;
    height: 32px;
}

body.lr-mode.show-ring4 .zelle.lr-cell {
    height: 32px;
}

body.lr-mode .zelle.lr-cell:nth-child(1),
body.lr-mode .zelle.lr-cell:nth-child(2) {
    background-color: rgba(var(--color-l-rgb), 0.05);
    color: var(--color-l);
}

body.lr-mode .zelle.lr-cell:nth-child(3),
body.lr-mode .zelle.lr-cell:nth-child(4) {
    background-color: rgba(var(--color-r-rgb), 0.05);
    color: var(--color-r);
}

/* Specific Grid Lines for L/R Mode */
body.lr-mode .zelle.lr-cell:nth-child(1) {
    border-bottom: 1px solid var(--grid-line);
}

body.lr-mode .zelle.lr-cell:nth-child(2) {
    border-bottom: 2px solid var(--border-strong) !important;
}

body.lr-mode .zelle.lr-cell:nth-child(3) {
    border-bottom: 1px solid var(--grid-line);
}

body.lr-mode .zelle.lr-cell:nth-child(4) {
    border-bottom: none;
}

/* --- DYNAMICS (VELOCITY) STYLES --- */
.dyn-1 {
    opacity: 0.35;
    font-weight: 300;
    filter: saturate(0.5);
}

.dyn-2 {
    opacity: 0.55;
    font-weight: 300;
    filter: saturate(0.7);
}

.dyn-3 {
    opacity: 0.75;
    font-weight: 400;
    filter: saturate(0.85);
}

.dyn-4 {
    opacity: 0.90;
    font-weight: 400;
    filter: saturate(1.0);
}

.dyn-5 {
    opacity: 1.0;
    font-weight: 500;
    filter: saturate(1.4) brightness(1.1);
}

/* Override Selected State */
body.lr-mode .zelle.lr-cell.active-cell {
    outline: 2px solid var(--text-light);
    outline-offset: -2px;
    box-shadow: none;
    z-index: 10;
}

body.lr-mode .zelle.lr-cell.active-cell:nth-child(1),
body.lr-mode .zelle.lr-cell.active-cell:nth-child(2) {
    background-color: rgba(var(--color-l-rgb), 0.25);
}

body.lr-mode .zelle.lr-cell.active-cell:nth-child(3),
body.lr-mode .zelle.lr-cell.active-cell:nth-child(4) {
    background-color: rgba(var(--color-r-rgb), 0.25);
}

body.lr-mode .zelle.lr-cell.selected {
    outline: 2px dashed var(--text-light);
    outline-offset: -2px;
    box-shadow: none;
    z-index: 10;
}

body.lr-mode .zelle.lr-cell.selected:nth-child(1),
body.lr-mode .zelle.lr-cell.selected:nth-child(2) {
    background-color: rgba(var(--color-l-rgb), 0.25);
}

body.lr-mode .zelle.lr-cell.selected:nth-child(3),
body.lr-mode .zelle.lr-cell.selected:nth-child(4) {
    background-color: rgba(var(--color-r-rgb), 0.25);
}


/* --- TRIPLETS VISUALIZATION --- */
.spalte.triplet {
    position: relative;
    overflow: visible;
}

.spalte.triplet::before {
    content: '';
    position: absolute;
    top: -24px;
    height: 6px;
    border-top: 1.5px solid var(--text-light);
    width: 100%;
    z-index: 10;
    pointer-events: none;
}

.spalte.triplet-start::before {
    border-left: 1.5px solid var(--text-light);
    width: calc(100% + 1px);
}

.spalte.triplet-mid::before {
    width: calc(100% + 1px);
}

.spalte.triplet-end::before {
    border-right: 1.5px solid var(--text-light);
}

.spalte.triplet-mid::after {
    content: '3';
    position: absolute;
    top: -37px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: 400;
    color: var(--text-light);
    z-index: 11;
    pointer-events: none;
}

/* --- ADD BAR BUTTON --- */
.add-bar-btn {
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
    align-items: center;
    background: var(--takt-bg);
    border: 2px dashed var(--border);
    border-radius: 8px;
    height: 140px;
    align-self: end;
    cursor: pointer;
    color: var(--text-light);
    transition: all 0.2s ease;
    box-sizing: border-box;
    touch-action: none;
}

.add-bar-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--highlight);
}

.add-bar-btn .icon {
    width: 36px;
    height: 36px;
    opacity: 0.4;
    transition: all 0.2s ease;
}

.add-bar-btn:hover .icon {
    opacity: 1;
    transform: scale(1.1);
}

#handpan-toggle-tab {
    position: absolute;
    bottom: -5px;
    /* Standard: Sidebar offen, Handpan offen -> Zentriert unter der Haupt-Handpan */
    left: calc(50% + 110px);
    transform: translateX(-50%);
    z-index: 105;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: stretch;
    background: transparent;
    height: 34px;
    box-sizing: border-box;
    transition: bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1), left 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#sidebar-left.collapsed~#handpan-toggle-tab {
    /* Sidebar zu, Handpan offen -> Zentriert unter der Haupt-Handpan (Fenstermitte) */
    left: 50%;
}

body.hp-collapsed #handpan-toggle-tab {
    bottom: -5px;
    /* Handpan zu -> Zentriert unter der Mini-Handpan (100px = Mitte der linken Sidebar) */
    left: 100px;
}

body.hp-collapsed #sidebar-left.collapsed~#handpan-toggle-tab {
    /* Handpan zu & Sidebar zu -> Bleibt griffbereit am Rand schweben */
    left: 80px;
}

#btn-toggle-handpan {
    border-radius: 12px;
    padding: 4px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-main);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
}

#handpan-wrapper {
    position: absolute;
    bottom: 35px;
    left: 50%;
    margin-left: -144px;
    width: 288px;
    height: 288px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99;
    transition: width 0.3s, height 0.3s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), scale 0.3s ease, opacity 0.3s ease, visibility 0s, background-color 0.3s;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.8), 0 15px 35px rgba(0, 0, 0, 0.6);
    transform-origin: bottom center;
    scale: var(--hp-scale, 1);
    touch-action: none;
    background-color: var(--hp-bg, #2c2c2c);
}

#handpan-wrapper.collapsed {
    transform: translateY(calc(100% + 150px));
    opacity: 1;
    pointer-events: none;
    visibility: visible;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

body:not(.dark-mode) #handpan-wrapper {
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2), 0 15px 35px rgba(0, 0, 0, 0.15);
}

#bottom-zone-tabs {
    position: absolute;
    bottom: calc(var(--hp-zone-height) - 32px);
    left: 20px;
    display: flex;
    z-index: 105;
    /* Über dem Backdrop */
    transition: bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

body.hp-collapsed #bottom-zone-tabs {
    bottom: -32px;
    opacity: 0;
    pointer-events: none;
}

/* --- REGISTERKARTEN / TABS --- */
.bottom-tab {
    height: 32px;
    padding: 0 16px;
    background: rgba(128, 128, 128, 0.1);
    border: 1px solid var(--border);
    border-top: 1px solid var(--border);
    border-radius: 0 0 8px 8px;
    margin-right: 4px;
    color: var(--text-light);
    font-weight: 400;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    margin-top: -1px;
    /* Zieht den Tab genau unter den Border der Zone */
    box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.05);
}

body.dark-mode .bottom-tab {
    background: rgba(0, 0, 0, 0.2);
}

.bottom-tab:hover {
    color: var(--text-main);
    background: rgba(128, 128, 128, 0.2);
}

.bottom-tab.active {
    background: var(--surface);
    color: var(--primary);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    border-bottom: 2px solid var(--primary);
    border-top: 1px solid var(--surface);
    /* Stempelt den Border vom Backdrop weg */
}

body:not(.dark-mode) .bottom-tab.active {
    color: #d97706; /* Darker orange for readability */
    font-weight: 500;
    text-shadow: none;
}

body.dark-mode .bottom-tab.active {
    border-top: 1px solid var(--surface);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.bottom-tab .icon {
    width: 15px;
    height: 15px;
    margin-right: 6px;
}

#handpan-wrapper.tab-hidden {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transform: scale(0.9);
    transition: transform 0.4s ease, opacity 0.3s ease, visibility 0s 0.3s;
}

/* --- FROSTED GLASS BACKGROUND (ALL MODES) --- */
#handpan-wrapper.glass-rim,
#mini-handpan-container.glass-rim {
    background-color: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

body:not(.dark-mode) #handpan-wrapper.glass-rim,
body:not(.dark-mode) #mini-handpan-container.glass-rim {
    background-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

#handpan-view {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    scale: 1;
    transition: scale 0.3s;
}

/* SVG Handpan Notes styling */
.note-circle {
    cursor: pointer;
    user-select: none;
}

.note-shape {
    fill: url(#pad-gradient);
    stroke: #181a1d;
    stroke-width: 2;
    filter: url(#bevel-shadow);
    transition: all 0.1s linear;
    transform-box: fill-box;
    transform-origin: center;
    transform: rotate(var(--rot, 0deg)) scale(1);
}

.note-shape.note-mulde {
    filter: url(#bevel-mulde);
    opacity: 0.4;
    /* Basis-Transparenz */
}

/* Ring und Mutant Helligkeitsanpassung im Classic Mode */
.ring .note-shape.note-mulde,
.mutant .note-shape.note-mulde {
    opacity: 0.65;
    /* Ring/Mutant-Flächen leicht hervorheben */
}

body:not(.dark-mode) .ring .note-shape.note-mulde,
body:not(.dark-mode) .mutant .note-shape.note-mulde {
    fill: url(#classic-ding-grad);
    opacity: 0.8;
    /* Gleicher gläserner/silberner Look wie das Ding */
}

body:not(.dark-mode) .ring .note-dimple,
body:not(.dark-mode) .mutant .note-dimple {
    fill: url(#ding-dome-grad);
    stroke: rgba(0, 0, 0, 0.2);
    /* Gleiche Kontur und Füllung wie die Ding-Kuppel */
}

/* D und S Helligkeitsanpassung im Classic Mode */
.shoulder .note-shape.note-mulde {
    filter: drop-shadow(0 -1px 1px rgba(255, 255, 255, 0.15));
    /* Weiches Licht um den Rand */
    fill: rgba(255, 255, 255, 0.04);
    /* Schulterfläche wieder einheitlich subtil */
    stroke: url(#classic-shoulder-grad);
    /* Lichtbrechung auf der Kontur! */
    stroke-width: 3.5;
    /* Kontur minimal dicker machen */
    opacity: 1;
}

.ding .note-shape.note-mulde {
    opacity: 0.8;
    /* D Fläche präsenter für den 3D-Effekt */
    fill: url(#classic-ding-grad);
}

body:not(.dark-mode) .shoulder .note-shape.note-mulde {
    fill: rgba(0, 0, 0, 0.04);
    /* Schafft Kontrast auf hellem Glas im Light Mode */
    filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.7));
    /* Lichtbruch unten statt oben */
}

/* Bottom Notes im Light Mode an das Ding angleichen */
body:not(.dark-mode) .classic-hp .bottom .note-shape {
    fill: url(#classic-ding-grad);
    opacity: 0.9;
}

.note-dimple {
    transform-box: fill-box;
    transform-origin: center;
    transform: rotate(var(--rot, 0deg)) scale(1);
    transition: all 0.1s linear;
    pointer-events: none;
}

.note-mulde~.hp-text,
.classic-hp .bottom .hp-text {
    fill: #ffffff !important;
    text-shadow: 0px 1px 4px rgba(0, 0, 0, 0.9);
}

body:not(.dark-mode) .note-mulde~.hp-text,
body:not(.dark-mode) .classic-hp .bottom .hp-text {
    fill: #334155 !important;
    text-shadow: 0px 1px 2px rgba(255, 255, 255, 0.8);
}

.hp-text {
    fill: #929292;
    /* Dezenter Helligkeits-Boost (vorher #7d7d7d) */
    font-size: 20px;
    font-weight: 500;
    pointer-events: none;
    text-anchor: middle;
    dominant-baseline: central;
    transition: fill 0.1s linear;
    /* FIX: Force hardware acceleration to prevent rendering lag during parent scaling */
    transform: translateZ(0);
}

body:not(.dark-mode) .hp-text {
    fill: #1e293b;
}

body:not(.dark-mode) .note-shape {
    stroke: url(#classic-shoulder-grad);
    stroke-width: 2.5;
}

.mutant-note-circle {
    fill: none;
    stroke: #929292;
    stroke-width: 1.5;
    pointer-events: none;
    transition: stroke 0.1s linear;
}

body:not(.dark-mode) .mutant-note-circle {
    stroke: #1e293b;
}

.note-circle:active .note-shape {
    filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.8)) !important;
    transform: rotate(var(--rot, 0deg)) scale(0.97);
}

.note-circle:active .note-dimple {
    transform: rotate(var(--rot, 0deg)) scale(0.97);
}

.note-circle.active-note-l .note-shape {
    fill: #3e3831 !important;
    stroke: var(--hp-color-l) !important;
    stroke-width: 2.5 !important;
    filter: drop-shadow(0px 0px 8px rgba(59, 130, 246, 0.5)) !important;
    opacity: 1 !important;
}

.note-circle.active-note-l .hp-text {
    fill: var(--hp-color-l) !important;
    text-shadow: none !important;
}

.note-circle.active-note-l .mutant-note-circle {
    stroke: var(--hp-color-l) !important;
}

body:not(.dark-mode) .note-circle.active-note-l .note-shape {
    fill: #f1f5f9 !important;
    filter: drop-shadow(0px 2px 6px rgba(59, 130, 246, 0.4)) !important;
}

.note-circle.playing-note-l .note-shape {
    fill: var(--hp-color-l) !important;
    stroke: #fff !important;
    filter: drop-shadow(0px 0px 15px var(--hp-color-l)) !important;
    transform: rotate(var(--rot, 0deg)) scale(1.02);
    opacity: 1 !important;
}

body:not(.dark-mode) .note-circle.playing-note-l .note-shape {
    stroke: #f8fafc !important;
    filter: drop-shadow(0px 2px 10px rgba(59, 130, 246, 0.6)) !important;
}

.note-circle.playing-note-l .note-dimple {
    transform: rotate(var(--rot, 0deg)) scale(1.02);
}

.note-circle.playing-note-l .hp-text {
    fill: #fff !important;
    text-shadow: none !important;
}

.note-circle.playing-note-l .mutant-note-circle {
    stroke: #fff !important;
}

.note-circle.active-note-r .note-shape {
    fill: #3e3831 !important;
    stroke: var(--hp-color-r) !important;
    stroke-width: 2.5 !important;
    filter: drop-shadow(0px 0px 8px rgba(245, 158, 11, 0.5)) !important;
    opacity: 1 !important;
}

body:not(.dark-mode) .note-circle.active-note-r .note-shape {
    fill: #f1f5f9 !important;
    filter: drop-shadow(0px 2px 6px rgba(245, 158, 11, 0.4)) !important;
}

.note-circle.active-note-r .hp-text {
    fill: var(--hp-color-r) !important;
    text-shadow: none !important;
}

.note-circle.active-note-r .mutant-note-circle {
    stroke: var(--hp-color-r) !important;
}

.note-circle.playing-note-r .note-shape {
    fill: var(--hp-color-r) !important;
    stroke: #fff !important;
    filter: drop-shadow(0px 0px 15px var(--hp-color-r)) !important;
    transform: rotate(var(--rot, 0deg)) scale(1.02);
    opacity: 1 !important;
}

body:not(.dark-mode) .note-circle.playing-note-r .note-shape {
    stroke: #f8fafc !important;
    filter: drop-shadow(0px 2px 10px rgba(245, 158, 11, 0.6)) !important;
}

.note-circle.playing-note-r .note-dimple {
    transform: rotate(var(--rot, 0deg)) scale(1.02);
}

.note-circle.playing-note-r .hp-text {
    fill: #fff !important;
    text-shadow: none !important;
}

.note-circle.playing-note-r .mutant-note-circle {
    stroke: #fff !important;
}

/* --- HOVER HIGHLIGHT (FROM CONFIG MENU) --- */
.note-circle.hover-highlight-group {
    filter: drop-shadow(0 0 8px var(--primary));
}

.note-circle.hover-highlight-group .note-shape {
    stroke: var(--primary) !important;
    stroke-width: 3 !important;
}

.note-circle.hover-highlight-group .hp-text {
    fill: var(--primary) !important;
}

.note-circle.hover-highlight-group .mutant-note-circle {
    stroke: var(--primary) !important;
}

/* --- ACTION BUTTONS (EDIT & SETTINGS) AUF HANDPAN --- */
.hp-actions-container {
    position: absolute;
    top: 50%;
    right: -38px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 20;
    transition: right 0.2s ease;
}

.hp-action-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: 0.2s;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

body:not(.dark-mode) .hp-action-btn {
    color: #1e293b;
    text-shadow: none;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: inset 1px 1px 3px rgba(255, 255, 255, 0.8), inset -1px -1px 3px rgba(0, 0, 0, 0.05), 1px 1px 3px rgba(0, 0, 0, 0.15);
}

body.dark-mode .hp-action-btn {
    color: #f8fafc;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.3), inset -1px -1px 3px rgba(255, 255, 255, 0.05), 1px 1px 3px rgba(0, 0, 0, 0.4);
}

.hp-action-btn:hover {
    color: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 0 15px var(--primary);
    text-shadow: none;
}

body:not(.dark-mode) .hp-action-btn.active,
body.dark-mode .hp-action-btn.active {
    background: var(--primary);
    color: #1a202c;
    border-color: var(--primary);
    box-shadow: 0 0 15px rgba(255, 179, 71, 0.5);
    text-shadow: none;
}

.hp-action-btn:hover {
    transform: scale(1.1);
}

.hp-action-btn .icon {
    width: 13px;
    height: 13px;
}

/* --- MINI HANDPAN --- */
#mini-handpan-wrapper {
    position: sticky;
    bottom: 0px;
    margin: auto -10px 0 -10px;
    padding-top: 30px;
    padding-bottom: 60px;
    width: calc(100% + 20px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    pointer-events: none;
    /* Lässt Scrollen auf dem transparenten Bereich zu */
    background: linear-gradient(to bottom, rgba(var(--surface-rgb), 0) 0px, rgba(var(--surface-rgb), 1) 30px, rgba(var(--surface-rgb), 1) 100%);
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
}

#mini-handpan-container {
    position: relative;
    width: var(--mini-size, 144px);
    height: var(--mini-size, 144px);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
    /* Reaktiviert Klicks für die Mini-Handpan */
    background-color: var(--hp-bg, #2c2c2c);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8);
    touch-action: none;
    transition: width 0.3s ease, height 0.3s ease;
}

body:not(.dark-mode) #mini-handpan-container {
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.3);
}

#mini-handpan-view {
    position: absolute;
    width: 360px;
    height: 360px;
    top: 50%;
    left: 50%;
    margin-top: -180px;
    margin-left: -180px;
    display: flex;
    justify-content: center;
    align-items: center;
    scale: var(--mini-scale, 0.4);
    transition: scale 0.3s;
}

#mini-handpan-wrapper.hidden {
    opacity: 0;
    transform: scale(0.85);
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0.4s;
}

/* --- HANDPAN RESIZER --- */
#hp-resizer {
    position: absolute;
    top: -5px;
    left: 0;
    right: 0;
    height: 10px;
    cursor: ns-resize;
    pointer-events: auto;
    touch-action: none;
    z-index: 101;
    display: flex;
    justify-content: center;
    align-items: center;
}

body.hp-collapsed #hp-resizer {
    display: none;
}

.hp-resizer-handle {
    width: 40px;
    height: 4px;
    background: var(--border-strong);
    border-radius: 2px;
    transition: background 0.2s;
}

#hp-resizer:hover .hp-resizer-handle,
body.hp-is-resizing .hp-resizer-handle {
    background: var(--primary);
}

/* --- DRAG HINT ANIMATION (Pulsierende Pfeile) --- */
@keyframes dragPulse {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    50% {
        transform: scale(1.08);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0.6;
    }
}

.drag-hint-text {
    animation: dragPulse 1.5s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
}

#sidebar-handpan h2 {
    padding: 20px 20px 15px 20px;
    margin: 0 -20px 0 -20px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.2);
    flex-shrink: 0;
}

/* --- FIX: Disable transitions while dragging the zoom slider to prevent lag --- */
body.hp-is-resizing,
body.hp-is-resizing *,
body.hp-is-resizing *::before,
body.hp-is-resizing *::after,
body.hp-is-resizing svg,
body.hp-is-resizing svg * {
    transition: none !important;
    animation: none !important;
}

/* --- HANDPAN KNOCK & SLAP VISUALS --- */
.hp-slap-overlay,
.hp-knock-overlay {
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.08s ease;
    z-index: 2;
}

.hp-slap-overlay {
    top: 0;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.hp-knock-overlay {
    top: 50%;
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
}

.hp-slap-overlay.selected-overlay-l,
.hp-knock-overlay.selected-overlay-l {
    opacity: 0.25;
}

.hp-slap-overlay.active-l,
.hp-knock-overlay.active-l {
    opacity: 0.7;
}

body:not(.dark-mode) .hp-slap-overlay.active-l,
body:not(.dark-mode) .hp-knock-overlay.active-l {
    opacity: 0.5;
}

.hp-slap-overlay.selected-overlay-l,
.hp-slap-overlay.active-l {
    background: radial-gradient(circle at 50% 100%, transparent 0%, rgba(var(--hp-color-l-rgb), 0.6) 100%);
}

.hp-knock-overlay.selected-overlay-l,
.hp-knock-overlay.active-l {
    background: radial-gradient(circle at 50% 0%, transparent 0%, rgba(var(--hp-color-l-rgb), 0.6) 100%);
}

.hp-slap-overlay.selected-overlay-r,
.hp-knock-overlay.selected-overlay-r {
    opacity: 0.25;
}

.hp-slap-overlay.active-r,
.hp-knock-overlay.active-r {
    opacity: 0.7;
}

body:not(.dark-mode) .hp-slap-overlay.active-r,
body:not(.dark-mode) .hp-knock-overlay.active-r {
    opacity: 0.5;
}

.hp-slap-overlay.selected-overlay-r,
.hp-slap-overlay.active-r {
    background: radial-gradient(circle at 50% 100%, transparent 0%, rgba(var(--hp-color-r-rgb), 0.6) 100%);
}

.hp-knock-overlay.selected-overlay-r,
.hp-knock-overlay.active-r {
    background: radial-gradient(circle at 50% 0%, transparent 0%, rgba(var(--hp-color-r-rgb), 0.6) 100%);
}

/* --- TIMELINE OVERLAY --- */
#timeline-overlay {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--hp-zone-height);
    background: transparent;
    z-index: 95;
    border-bottom: none;
    border-top: none;
    padding: 15px 25px 45px 25px;
    /* Macht Platz für das kleine Toggle-Menü */
    box-sizing: border-box;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, visibility 0s 0.4s;
}

#timeline-overlay.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, visibility 0s;
}

body.hp-collapsed #timeline-overlay {
    transform: translateY(100%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

#btn-close-timeline {
    display: none !important;
    /* Wird durch den allgemeinen X-Button des Backdrops gesteuert */
}

#timeline-canvas-container {
    flex: 1;
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);
}

body.dark-mode #timeline-canvas-container {
    background: rgba(0, 0, 0, 0.2);
}

#timeline-canvas {
    display: block;
    height: 100%;
    cursor: crosshair;
    touch-action: pan-x pan-y;
}

body.alt-pressed #timeline-canvas {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cline x1='17' y1='7' x2='7' y2='17' stroke='%23c53030' stroke-width='3' stroke-linecap='round'/%3E%3Cline x1='7' y1='7' x2='17' y2='17' stroke='%23c53030' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") 12 12, crosshair !important;
}

#timeline-playhead {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    background-color: var(--color-r);
    display: none;
    z-index: 10;
    pointer-events: none;
}

#timeline-playhead::before {
    content: '';
    position: absolute;
    top: 0;
    left: -4px;
    width: 10px;
    height: 10px;
    background-color: var(--color-r);
    border-radius: 50%;
}

#tl-mini-title-input {
    transition: all 0.2s ease;
    padding: 4px 6px;
}

#tl-mini-title-input:focus {
    outline: none !important;
    border: 1px solid var(--primary) !important;
    background: var(--surface) !important;
    box-shadow: 0 0 0 2px rgba(255, 179, 71, 0.2);
}

/* --- MODALS --- */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: 0.2s;
    backdrop-filter: blur(2px);
}

.overlay.active {
    opacity: 1;
    pointer-events: all;
}

.modal {
    background: rgba(var(--surface-rgb), 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(128, 128, 128, 0.2);
    padding: 25px;
    border-radius: 12px;
    width: 90%;
    max-width: 450px;
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.3);
    max-height: 90vh;
    overflow-y: auto;
}

body.dark-mode .modal {
    background: rgba(var(--surface-rgb), 0.65);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    color: var(--text-light);
    font-size: 13px;
}

.form-group input {
    width: 100%;
    box-sizing: border-box;
}

.config-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    align-items: center;
}

.config-row input {
    flex: 1;
}

.btn-remove {
    background: #fff5f5;
    color: #c53030;
    border: 1px solid #feb2b2;
    width: 34px;
    height: 34px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
}

body.dark-mode .btn-remove {
    background: #742a2a;
    border-color: #9b2c2c;
    color: #fed7d7;
}

#config-rows {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
}

.cfg-header {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--text-light);
    margin-top: 15px;
    margin-bottom: 5px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 4px;
    letter-spacing: 0.5px;
    width: 100%;
}

.preview-note .note-shape {
    fill: transparent !important;
    stroke: var(--text-light) !important;
    stroke-dasharray: 4 4 !important;
    opacity: 0.6;
    filter: none !important;
}

.preview-note .hp-text {
    fill: var(--text-light) !important;
    opacity: 0.6;
}

.preview-note .note-dimple {
    display: none !important;
}

/* Versteckt die mittlere Mulde bei der Vorschau */

/* Platzaufteilung in der Config-Reihe optimieren & Highlight */
.config-row {
    gap: 8px;
    width: 100%;
    padding: 4px;
    border: 1px solid transparent;
    border-radius: 6px;
    transition: all 0.2s;
}

.config-row.highlight-row {
    background: rgba(255, 179, 71, 0.1);
    border-color: var(--primary);
}

/* --- DRAFT ROW STYLES --- */
.config-row[data-draft="false"] .cfg-type,
.config-row[data-draft="false"] .cfg-note {
    pointer-events: none;
    opacity: 0.5;
}

.config-row .cfg-action-btn-wrapper {
    position: relative;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
}

.config-row .cfg-action-btn-wrapper>* {
    position: absolute;
    top: 0;
    left: 0;
}

.config-row[data-draft="false"] .btn-remove {
    display: none !important;
}

.config-row[data-draft="true"] .btn-edit {
    display: none !important;
}

/* --- NEUE ADD BUTTONS IN CONFIG --- */
.cfg-add-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    margin: 4px 0 10px 0;
    background: rgba(128, 128, 128, 0.05);
    border: 1px dashed var(--border);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-light);
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    box-sizing: border-box;
}

body.dark-mode .cfg-add-btn {
    background: rgba(255, 255, 255, 0.02);
}

.cfg-add-btn:hover:not(.disabled) {
    background: var(--highlight);
    border-color: var(--primary);
    color: var(--primary);
}

.cfg-add-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    border-style: solid;
    background: transparent;
}

.cfg-add-btn .icon {
    width: 14px;
    height: 14px;
    margin-right: 6px;
}

/* Alter Button falls vorhanden verstecken */
#btn-add-note {
    display: none !important;
}

/* --- HANDPAN STYLE BUTTONS (CONFIG) --- */
.style-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-light);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

body.dark-mode .style-btn {
    background: rgba(255, 255, 255, 0.02);
}

.style-btn:hover {
    background: var(--highlight);
    border-color: rgba(255, 179, 71, 0.4);
}

.style-btn.active {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(255, 179, 71, 0.1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.style-btn svg {
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.style-btn.active svg {
    transform: scale(1.08);
}

/* --- CONFIG MENU ACTIONS (STICKY) --- */
.sticky-sidebar-actions {
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid rgba(128, 128, 128, 0.2);
    flex-shrink: 0;
}

body.dark-mode .sticky-sidebar-actions {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- CONTEXT MENU --- */
.context-menu {
    position: fixed;
    background: rgba(var(--surface-rgb), 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 6px;
    display: none;
    flex-direction: column;
    z-index: 10000;
    opacity: 0;
    transform: scale(0.95);
    transform-origin: top left;
    transition: opacity 0.15s ease, transform 0.15s ease;
    min-width: 160px;
}

body.dark-mode .context-menu {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.1);
}

.context-menu.visible {
    opacity: 1;
    transform: scale(1);
}

.context-menu-item {
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 400;
    color: var(--text-main);
    transition: background 0.15s;
}

.context-menu-item:hover {
    background: var(--highlight);
    color: var(--primary);
}

.context-menu-item .icon {
    width: 18px;
    height: 18px;
}

.context-menu-separator {
    height: 1px;
    background: var(--border);
    margin: 6px 0;
}

.context-menu-label {
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--text-light);
    margin: 4px 6px;
}

.context-menu-dyn-row {
    display: flex;
    gap: 4px;
    justify-content: space-between;
    padding: 0 4px 4px 4px;
}

.context-menu-dyn-row .btn-icon {
    width: 26px;
    height: 26px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
    border-radius: 4px;
}

.print-only {
    display: none;
}

@media print {

    #menubar,
    #tab-bar-container,
    #transport-row,
    #sidebar-left,
    #sidebar-shortcuts,
    #sidebar-handpan,
    #sidebar-markers,
    #handpan-toggle-tab,
    #handpan-wrapper,
    #mini-handpan-wrapper,
    .overlay,
    .add-bar-btn,
    #btn-show-left-sidebar,
    #timeline-overlay,
    #handpan-backdrop,
    #bottom-zone-tabs,
    .hp-backdrop-close,
    #editor-scrollbar {
        display: none !important;
    }

    body {
        background: white;
        padding: 0;
        overflow: visible !important;
    }

    #main-layout {
        overflow: visible !important;
    }

    #editor-container {
        box-shadow: none;
        overflow: visible !important;
        padding: 0;
    }

    #editor {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        overflow-x: hidden;
        overflow-y: visible !important;
        height: auto !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }

    .takt-container {
        background: transparent;
        border: 1px solid #ccc;
        break-inside: avoid;
        margin-top: 15px;
    }

    .region-header {
        border: 2px solid black !important;
        color: black !important;
        background: white !important;
        box-shadow: none !important;
    }

    .param-header {
        color: black !important;
        background: white !important;
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }

    .spalte {
        border-right: 1px dashed #ccc;
    }

    .spalte.beat-mark {
        border-left: 2px solid #666;
    }

    .zelle {
        color: black;
        border-bottom: 1px solid #ddd;
    }

    .zelle:nth-child(1),
    .zelle:nth-child(4) {
        border-bottom: 2px solid #999;
    }

    body.show-ring4 .zelle:nth-child(4) {
        border-bottom: 1px solid #ddd;
    }

    body.show-ring4 .zelle:nth-child(5) {
        border-bottom: 2px solid #999;
    }

    .res-label {
        background: transparent;
        border-right: 2px solid black;
        color: black;
    }

    #track-header {
        margin-top: -15mm !important;
        padding-top: 15mm !important;
        margin-bottom: -16mm !important;
        padding-bottom: 2mm !important;
        background: white !important;
        position: relative;
        z-index: 10;
        /* Deckt den kleinen Print-Header auf Seite 1 sauber ab */
        page-break-after: avoid;
    }

    #track-header h1,
    #track-header h3,
    #track-header p {
        color: black;
    }

    #editor {
        padding-top: 16mm !important;
    }

    /* Korrekte horizontale Linien im L/R Modus für den Druck */
    body.lr-mode .zelle.lr-cell:nth-child(1) {
        border-bottom: 1px solid #ddd !important;
    }

    body.lr-mode .zelle.lr-cell:nth-child(2) {
        border-bottom: 1px solid black !important;
    }

    body.lr-mode .zelle.lr-cell:nth-child(3) {
        border-bottom: 1px solid #ddd !important;
    }

    body.lr-mode .zelle.lr-cell:nth-child(4) {
        border-bottom: none !important;
    }

    /* L/R Noten & Icons für den Druck */
    body.lr-mode .zelle.lr-cell:nth-child(1),
    body.lr-mode .zelle.lr-cell:nth-child(2) {
        color: var(--color-l) !important;
    }

    body.lr-mode .zelle.lr-cell:nth-child(3),
    body.lr-mode .zelle.lr-cell:nth-child(4) {
        color: var(--color-r) !important;
    }

    /* Hide Selection in Print */
    .zelle.selected,
    .zelle.marked-cell {
        background-color: transparent !important;
        box-shadow: none !important;
    }

    .print-only {
        display: block !important;
    }

    #print-header {
        display: block !important;
        position: static !important;
        height: 8mm;
        line-height: 8mm;
        text-align: center;
        font-size: 9pt;
        font-weight: 500;
        color: #888;
        border-bottom: 1px solid #ccc;
        border-top: none;
        background: transparent;
    }

    /* Platz für den Header und Seitenzahlen definieren */
    @page {
        margin: 15mm 10mm;

        @bottom-center {
            content: "Seite " counter(page);
            font-size: 9pt;
            color: #888;
        }
    }

    /* Zählzeiten-Linien für den PDF-Druck sichtbar machen */
    .beat-line-overlay {
        background-color: #aaa !important;
        width: 0.5px !important;
        opacity: 1 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .beat-line-overlay.beat-line-strong {
        background-color: #666 !important;
        width: 1px !important;
    }
}

#sidebar-shortcuts,
#sidebar-handpan,
#sidebar-markers {
    position: absolute;
    right: -10px;
    top: 0;
    bottom: 0;
    z-index: 100;
    width: var(--sidebar-width);
    background: rgba(var(--surface-rgb), 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-left: 1px solid rgba(128, 128, 128, 0.2);
    border-radius: 12px 0 0 12px;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s;
    padding: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

#sidebar-shortcuts,
#sidebar-handpan {
    padding-top: 0;
    padding-bottom: 0;
}

#sidebar-shortcuts,
#sidebar-handpan,
#sidebar-markers {
    overflow-y: hidden;
    padding-bottom: 20px;
}

body.dark-mode #sidebar-shortcuts,
body.dark-mode #sidebar-handpan,
body.dark-mode #sidebar-markers {
    background: rgba(var(--surface-rgb), 0.75);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

#sidebar-shortcuts.collapsed,
#sidebar-handpan.collapsed,
#sidebar-markers.collapsed {
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s 0.3s;
}

#sidebar-handpan::before {
    display: none;
}

/* Entfernt den globalen Gradienten für diese spezifische Sticky-Leiste */
body.dark-mode #sidebar-handpan h2 {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#sidebar-shortcuts h2,
#sidebar-handpan h2,
#sidebar-markers h2 {
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

#sidebar-shortcuts::before {
    content: '';
    position: sticky;
    top: 0;
    margin: 0 -20px 0 -20px;
    height: 20px;
    background: linear-gradient(to bottom, rgba(var(--surface-rgb), 1) 0%, rgba(var(--surface-rgb), 0) 100%);
    z-index: 50;
    pointer-events: none;
    flex-shrink: 0;
}

#sidebar-shortcuts::after {
    content: '';
    position: sticky;
    bottom: 0;
    margin: auto -20px 0 -20px;
    height: 20px;
    background: linear-gradient(to top, rgba(var(--surface-rgb), 1) 0%, rgba(var(--surface-rgb), 0) 100%);
    z-index: 50;
    pointer-events: none;
    flex-shrink: 0;
}

/* --- MARKER MANAGER UI --- */
.sidebar-scrollable {
    flex: 1;
    overflow-y: auto;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15px, black calc(100% - 15px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 15px, black calc(100% - 15px), transparent 100%);
    margin-right: -10px;
    padding-right: 10px;
    padding-top: 15px;
    padding-bottom: 20px;
}

#marker-list {
    flex: 1;
    overflow-y: auto;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15px, black calc(100% - 15px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 15px, black calc(100% - 15px), transparent 100%);
    margin-right: -10px;
    /* Schiebt Scrollbar an den Rand */
    padding-right: 10px;
    padding-top: 15px;
    padding-bottom: 20px;
}

.marker-card {
    background: var(--bg-color);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    transition: 0.3s;
    cursor: pointer;
}

.marker-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

@keyframes flashMarker {
    0% {
        box-shadow: inset 0 0 0 2px var(--primary);
        background: var(--highlight);
    }

    100% {
        box-shadow: inset 0 0 0 0px transparent;
        background: var(--bg-color);
    }
}

.marker-card.highlight {
    animation: flashMarker 2s ease-out;
}

/* --- MARKER EXT GROUPS (BPM / TIME) --- */
.marker-ext-group {
    display: flex;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    opacity: 0.6;
    transition: all 0.2s;
}

.marker-ext-group.active {
    opacity: 1;
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
}

.marker-ext-toggle {
    background: transparent;
    border: none;
    border-right: 1px solid var(--border);
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-light);
    cursor: pointer;
    border-radius: 0;
    transition: all 0.2s;
}

.marker-ext-group.active .marker-ext-toggle {
    color: #1a202c;
    background: var(--primary);
    border-right-color: var(--primary);
}

body.dark-mode .marker-ext-group.active .marker-ext-toggle {
    color: #1a202c;
}

.marker-ext-input {
    border: none;
    background: transparent;
    padding: 4px 2px;
    font-size: 12px;
    font-weight: 400;
    color: var(--text-main);
    width: 44px;
    text-align: center;
    outline: none !important;
}

.marker-ext-input:disabled {
    color: var(--text-light);
}

.ramp-toggles {
    display: flex;
    border-left: 1px solid var(--border);
    background: rgba(128, 128, 128, 0.05);
}

.marker-ext-group.active .ramp-toggles {
    border-left-color: var(--primary);
}

.ramp-btn {
    background: transparent;
    border: none;
    padding: 4px 6px;
    cursor: pointer;
    color: var(--text-light);
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
    transition: all 0.2s;
    flex-shrink: 0;
}

.ramp-btn:hover {
    opacity: 1;
    color: var(--text-main);
}

.ramp-btn.active {
    color: var(--primary);
    opacity: 1;
    background: rgba(255, 179, 71, 0.1);
}

.ramp-btn .icon {
    width: 14px;
    height: 14px;
}

.color-swatch {
    height: 18px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid var(--border-strong);
    transition: 0.1s;
}

.color-swatch:hover {
    transform: scale(1.1);
}

.color-swatch.selected {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* --- CUSTOM SCROLLBAR --- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
    /* Macht den Hintergrund (die Spur) unsichtbar */
}

::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    /* Nutzt deine bestehende, halbtransparente Variable */
    border-radius: 10px;
    /* Macht die Enden schön rund */
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-light);
    /* Wird beim Drüberfahren etwas deutlicher */
}

/* Fallback für Firefox (Firefox unterstützt die ::-webkit Präfixe nicht) */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
    -webkit-tap-highlight-color: transparent;
}

/* Breite exklusiv für die Handpan-Sidebar erhöhen & horizontalen Scroll verhindern */
#sidebar-handpan {
    width: 360px;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* --- CUSTOM SLIDER --- */
.custom-slider {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    outline: none;
    margin: 0;
}

.custom-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 2px;
    background: var(--border-strong);
    border-radius: 2px;
}

.custom-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--text-light);
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    transition: transform 0.1s;
    margin-top: -6px;
}

.custom-slider:focus {
    outline: none !important;
    box-shadow: none !important;
}

.custom-slider::-webkit-slider-thumb:hover,
.custom-slider:active::-webkit-slider-thumb {
    background: var(--primary);
    transform: scale(1.1);
}

#transport-time-wrapper {
    transition: all 0.3s ease;
    max-width: 150px;
    overflow: hidden;
    white-space: nowrap;
}

#transport-time-divider {
    transition: all 0.3s ease;
}

/* --- RESPONSIVE TRANSPORT ROW --- */
@media (max-width: 900px) {
    #transport-row .tool-group-content label {
        flex-direction: column;
        align-items: center;
        gap: 3px;
    }

    #transport-time-wrapper {
        opacity: 0;
        transform: scale(0.5);
        max-width: 0;
        margin: 0 !important;
        padding: 0 !important;
        pointer-events: none;
    }

    #transport-time-divider {
        opacity: 0;
        width: 0;
        margin: 0 !important;
    }

    .bottom-tab {
        padding: 0 10px;
    }

    .bottom-tab span {
        display: none;
    }

    /* Text ausblenden, nur Icons zeigen */
    .bottom-tab .icon {
        margin-right: 0;
        width: 18px;
        height: 18px;
    }
}

.config-row input.cfg-id {
    flex: 0 0 35px;
    text-align: center;
    padding: 5px;
    min-width: 0;
}

.config-row .cfg-id-display {
    flex: 0 0 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    font-weight: 500;
    font-size: 13px;
    min-height: 25px;
    padding: 4px 0;
    box-sizing: border-box;
}

.config-row .cfg-id-display .icon {
    width: 14px;
    height: 14px;
}

@media (max-width: 768px) {
    :root {
        --hp-zone-height: calc(40px + (var(--hp-base-height) * 0.868) * var(--hp-scale, 1));
    }

    body {
        padding: 10px;
    }

    #main-layout {
        gap: 10px;
    }

    #sidebar-left.collapsed {
        margin-left: -210px;
    }

    /* 180px width + 20px padding + 10px gap */

    #handpan-wrapper {
        width: 250px;
        height: 250px;
        bottom: 20px;
        left: 50%;
        margin-left: -125px;
        box-shadow: none !important;
    }

    #handpan-view {
        scale: 1;
    }

    /* Korrektur für Sidebars im mobilen Layout (da dort das body-padding nur 10px beträgt) */
    #sidebar-shortcuts,
    #sidebar-handpan,
    #sidebar-markers {
        right: -10px;
    }
}

/* --- MOBILE & TABLET PERFORMANCE OPTIMIZATIONS --- */
body.is-mobile-device * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.is-mobile-device #handpan-backdrop,
body.is-mobile-device #menubar,
body.is-mobile-device #sidebar-shortcuts,
body.is-mobile-device #sidebar-handpan,
body.is-mobile-device #sidebar-markers,
body.is-mobile-device .modal,
body.is-mobile-device .context-menu,
body.is-mobile-device .overlay,
body.is-mobile-device .hp-action-btn:not(.active),
body.is-mobile-device #bottom-zone-tabs,
body.is-mobile-device .tool-group,
body.is-mobile-device #track-header {
    background-color: rgba(var(--surface-rgb), 0.95) !important;
}

@media (max-width: 1024px) {

    /* Fallback for smaller screens that might not be caught by JS */
    * {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    #handpan-backdrop,
    #menubar,
    #sidebar-shortcuts,
    #sidebar-handpan,
    #sidebar-markers,
    .modal,
    .context-menu,
    .overlay,
    .hp-action-btn:not(.active),
    #bottom-zone-tabs,
    .tool-group,
    #track-header {
        background-color: rgba(var(--surface-rgb), 0.95) !important;
    }

    /* Reduziere komplexe Schatten und Filter auf der Handpan */
    #handpan-wrapper,
    #mini-handpan-container {
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
    }

    .note-shape {
        filter: none !important;
        box-shadow: none !important;
        -webkit-filter: none !important;
    }

    .note-circle:active .note-shape {
        transform: rotate(var(--rot, 0deg)) scale(0.97) !important;
    }
}

body.is-mobile-device #handpan-wrapper,
body.is-mobile-device #mini-handpan-container {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
}

body.is-mobile-device .note-shape {
    filter: none !important;
    box-shadow: none !important;
    -webkit-filter: none !important;
}

body.is-mobile-device .note-circle:active .note-shape {
    transform: rotate(var(--rot, 0deg)) scale(0.97) !important;
}

.config-row input.cfg-note {
    flex: 0 0 65px;
    text-align: center;
    padding: 5px;
    min-width: 0;
}

/* --- FORCE GRABBING CURSOR DURING DRAG --- */
body.is-dragging-to-add,
body.is-dragging-to-add * {
    cursor: grabbing !important;
}

/* --- TOGGLE PILL FOR SIDEBAR --- */
.toggle-pill {
    width: 24px;
    height: 14px;
    border-radius: 7px;
    position: relative;
    background: var(--border-strong);
    transition: background 0.2s;
}

.toggle-pill::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: white;
    transition: transform 0.2s;
}

.toggle-pill.primary {
    background: var(--primary) !important;
}

.toggle-pill.primary::after {
    transform: translateX(10px);
}

/* --- DYNAMIC BUTTONS --- */
.dyn-btn {
    background: transparent !important;
    border: 1px solid transparent !important;
    padding: 0 !important;
    display: flex;
    align-items: flex-end;
    box-shadow: none !important;
}

.dyn-btn .dyn-bar {
    width: 100%;
    border-radius: 4px;
    background: var(--border-strong);
    transition: 0.2s;
    pointer-events: none;
}

.dyn-btn:hover .dyn-bar {
    background: var(--text-light);
}

.dyn-btn.primary .dyn-bar {
    background: var(--primary) !important;
}

/* Remove glow from sidebar */
.sidebar-segment * {
    text-shadow: none !important;
}

.sidebar-segment .icon {
    filter: none !important;
}

/* Adjust SVGs for lower velocities to make them thinner/smaller */
.dyn-1 svg *[stroke] {
    stroke-width: 1.0px !important;
}

.dyn-2 svg *[stroke] {
    stroke-width: 1.2px !important;
}

.dyn-3 svg *[stroke] {
    stroke-width: 1.3px !important;
}

.dyn-4 svg *[stroke] {
    stroke-width: 1.5px !important;
}

.dyn-5 svg *[stroke] {
    stroke-width: 1.8px !important;
}

/* Shoulder gets slightly thicker at higher velocities */
.dyn-4 .shoulder-icon circle {
    stroke-width: 2.2px !important;
}

.dyn-5 .shoulder-icon circle {
    stroke-width: 3.2px !important;
}


body.ignore-velocity .dyn-1,
body.ignore-velocity .dyn-2,
body.ignore-velocity .dyn-3,
body.ignore-velocity .dyn-4,
body.ignore-velocity .dyn-5 {
    opacity: 0.90 !important;
    font-weight: 400 !important;
    filter: saturate(1.0) !important;
}

body.ignore-velocity .dyn-1 svg *[stroke],
body.ignore-velocity .dyn-2 svg *[stroke],
body.ignore-velocity .dyn-3 svg *[stroke],
body.ignore-velocity .dyn-4 svg *[stroke],
body.ignore-velocity .dyn-5 svg *[stroke] {
    stroke-width: 1.5px !important;
}

body.ignore-velocity .dyn-1 .shoulder-icon circle,
body.ignore-velocity .dyn-2 .shoulder-icon circle,
body.ignore-velocity .dyn-3 .shoulder-icon circle,
body.ignore-velocity .dyn-4 .shoulder-icon circle,
body.ignore-velocity .dyn-5 .shoulder-icon circle {
    stroke-width: 3px !important;
}