/* Panels and Controls - sticky panels, playback controls, waveforms */

/* App header bar (row 1) */
.app-header-bar {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 12px 24px;
    background-color: var(--panel-muted);
    border-bottom: 1px solid var(--panel-border);
    position: sticky;
    top: 0;
    z-index: 101;
}

.app-title {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
    color: #55556a;
    transition: color 0.3s ease, text-shadow 0.3s ease;
    cursor: default;
    margin: 0;
    flex-shrink: 0;
}

.app-title:hover {
    color: #e8e8f0;
    text-shadow: 0 0 8px rgba(232, 232, 240, 0.3);
}

.app-title strong {
    color: #6699ff;
    font-weight: 700;
    transition: text-shadow 0.3s ease;
}

.app-title:hover strong {
    text-shadow: 0 0 12px rgba(102, 153, 255, 0.5), 0 0 24px rgba(102, 153, 255, 0.2);
}

.title-sep {
    color: #55556a;
    font-size: 18px;
    opacity: 0.4;
    user-select: none;
    flex-shrink: 0;
    margin: 0 -8px;
}

/* Session header slot */
.session-header-slot {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 0;
    min-width: 80px;
}

/* Title wrapper: input + saved indicator inline */
.session-title-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 2px 8px 2px 6px;
    transition: border-color 0.25s ease, background 0.25s ease, max-width 0.3s ease;
}

.session-title-wrapper.restore-active {
    border-color: rgba(100, 130, 170, 0.35);
    background: rgba(255, 255, 255, 0.025);
}

.session-title-wrapper.restore-active .session-title-input {
    border-color: transparent;
    padding-right: 6px;
}

.session-instrument-thumb {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
    margin-right: 4px;
    filter: brightness(0.9);
    opacity: 0.85;
}

.session-title-input {
    font-family: inherit;
    font-size: clamp(13px, 1.2vw, 15px);
    font-weight: 500;
    color: #9a9ab0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 4px 50px 4px 6px;
    flex: 0 1 auto;
    width: auto;
    min-width: 60px;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.3s ease;
    letter-spacing: 0.01em;
}

.session-title-input::placeholder {
    color: #55665a;
    opacity: 0.5;
    font-weight: 400;
}

.session-title-input:hover {
    border-color: rgba(132, 150, 137, 0.3);
    background: rgba(255, 255, 255, 0.02);
}

.session-title-input:focus {
    color: #e8ede9;
    border-color: rgba(132, 180, 137, 0.5);
    background: rgba(255, 255, 255, 0.04);
    box-shadow: 0 0 12px rgba(132, 180, 137, 0.1);
}

.session-title-wrapper .session-autosave-indicator {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    flex-shrink: 0;
}

/* Clear Notes / Undo / Redo in header row (between session info and History button) */
.header-edit-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.header-edit-actions button {
    font-family: inherit !important;
    font-size: clamp(13px, 1.1vw, 15px) !important;
    font-weight: 500 !important;
    padding: 7px 16px !important;
    border: 1px solid var(--panel-border) !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: var(--text-secondary) !important;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    box-shadow: none !important;
    height: auto !important;
    width: auto !important;
}

.header-edit-actions button:hover {
    color: var(--text-primary) !important;
    border-color: #6699ff !important;
    background: rgba(102, 153, 255, 0.08) !important;
    box-shadow: 0 0 12px rgba(102, 153, 255, 0.06) !important;
}

.header-edit-actions button:active {
    transform: scale(0.96);
}

/* Header actions (right-aligned utility buttons) */
.header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
}

.header-actions button,
.header-actions #helpButton,
.header-actions #settingsButton,
.header-actions #changeInstrumentButton,
.header-actions #sessionHistoryBtn {
    font-family: inherit !important;
    font-size: clamp(13px, 1.1vw, 15px) !important;
    font-weight: 500 !important;
    padding: 7px 16px !important;
    border: 1px solid var(--panel-border) !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: var(--text-secondary) !important;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    box-shadow: none !important;
    height: auto !important;
    width: auto !important;
}

.header-actions button:hover,
.header-actions #helpButton:hover,
.header-actions #settingsButton:hover,
.header-actions #changeInstrumentButton:hover,
.header-actions #sessionHistoryBtn:hover {
    color: var(--text-primary) !important;
    border-color: #6699ff !important;
    background: rgba(102, 153, 255, 0.08) !important;
    box-shadow: 0 0 12px rgba(102, 153, 255, 0.06) !important;
}

.header-actions button:active {
    transform: scale(0.96);
}

/* Diagram controls row (row 2, below header) */
#diagramControls {
    background-color: var(--panel-muted);
    padding: 2px 0px;
    margin: 0;
    border-radius: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0px;
}

/* Make speed controls + tempo sticky at bottom */
#speedControls {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 9px;
    z-index: 100;
    background-color: var(--panel-muted);
    padding: 10px 16px;
    margin: 0;
    box-shadow: 0 -10px 30px var(--shadow-strong);
    border-top: 1px solid var(--panel-border);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

/* Speed popup - floating row above bottom bar */
.speed-popup {
    position: fixed;
    bottom: 4.2em;
    left: 15px;
    z-index: 101;
    display: flex;
    flex-wrap: nowrap;
    gap: 0px;
    align-items: center;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.speed-popup:hover {
    opacity: 1;
}

.speed-popup.hidden {
    display: none;
}

/* Speed toggle button style */
.speed-toggle-btn {
    background-color: #1abc9c !important;
    border-color: #dddcdc !important;
}

.speed-toggle-btn.active {
    background-color: #2c7d59 !important;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

/* Legacy - keep for any remaining references */
.speed-buttons-container {
    display: flex;
    flex: 1;
    flex-wrap: nowrap;
    gap: 0px;
    justify-content: center;
    align-items: center;
    min-width: 320px;
    max-width: 20vw;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.speed-download-slot {
    display: flex;
    align-items: center;
    padding: 4px 12px;
    border-left: 1px solid var(--panel-border);
    border-right: 1px solid var(--panel-border);
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.speed-buttons-container:hover,
.speed-download-slot:hover {
    opacity: 1;
}

#speedControls .tempo-muted {
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

#speedControls .tempo-muted:hover {
    opacity: 1;
}

#speedControls .audio-muted {
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

#speedControls .audio-muted:hover {
    opacity: 1;
}

#speedControls .speed-download-slot #downloadBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 5px 10px;
    font-size: 14px;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .speed-popup {
        flex-wrap: wrap;
    }
}

/* Hide duplicate controls - keep only sticky panel versions */
.controls-column .tempo-controls,
.controls-column .tempo-display,
.tuning-column,
.controls-column .volume-controls,
.controls-column .waveform-buttons,
.controls-column .waveform-mixer {
    display: none !important;
}

/* Hide the entire audioControls panel since all visible controls moved to sticky panels */
#audioControls {
    display: none !important;
}

#diagramControls,
#audioControls,
#playbackControls {
    width: 100%;
    box-sizing: border-box;
    min-width: 98vw;
}

#audioControls, #playbackControls {
    position: relative;
    z-index: 50;
    margin: 0px 0;
    padding: 8px 0px;
    /* border-radius: 12px; */
    background-color: var(--panel-muted);
    /* box-shadow: 0 2px 4px rgba(0,0,0,0.1); */
    /* border: 1px solid var(--panel-border); */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

/* Flex container for side-by-side controls */
.controls-flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.controls-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

#audioControls label {
    margin: 0 3px;
}

.volume-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 1px;
    white-space: nowrap;
}

#volumeControl {
    width: 70px;
    vertical-align: middle;
    margin-right: 2px;
}

#volumeControl2 {
    width: 7vw;
    vertical-align: middle;
    margin-right: 2px;
}

.tempo-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 1px;
    white-space: nowrap;
}

.tempo-slider {
    width: 7vw;
    vertical-align: middle;
    margin-right: 2px;
}

.bpm-stack {
    position: relative;
    display: flex;
    align-items: center;
}

.bpm-label {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #8a929a;
    line-height: 1;
}

.bpm-group {
    display: inline-flex;
    align-items: center;
    background: #151a1f;
    border: 1px solid #2a323a;
    border-radius: 8px;
    box-shadow: 0 0 0 1px rgba(120, 170, 255, 0.1), 0 6px 16px rgba(8, 12, 18, 0.35);
    overflow: hidden;
    opacity: 0.7;
    transition: opacity 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.tempo-controls:hover .bpm-group,
.bpm-group:hover,
.bpm-group:focus-within {
    opacity: 1;
}

.bpm-group:hover,
.bpm-group:focus-within {
    background: #1b2128;
    border-color: #3a4653;
    box-shadow: 0 0 0 1px rgba(160, 200, 255, 0.18), 0 8px 18px rgba(8, 12, 18, 0.45);
}

/* Focused state: green glow, full opacity, overrides hover shadow */
.bpm-group.stepper-focused {
    opacity: 1;
    background: #1b2128;
    border-color: rgba(76, 175, 80, 0.5);
    box-shadow: 0 0 0 2.5px rgba(76, 175, 80, 0.8), 0 0 10px rgba(76, 175, 80, 0.4);
    outline: none;
}

.bpm-group > * {
    border: 0;
    background: transparent;
}

.bpm-group > * + * {
    border-left: 1px solid #2a323a;
}

.bpm-group > *:hover {
    background-color: #1b2128;
}

.bpm-display {
    min-width: 28px;
    text-align: center;
    font-weight: 700;
    color: #f2f5f8;
    cursor: pointer;
    padding: 8px 6px;
    border-radius: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: all 0.2s ease;
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.2px;
}

.bpm-display:hover {
    color: #ffffff;
}

.bpm-input {
    min-width: 28px;
    padding: 8px 6px;
    border-radius: 0;
    font-weight: 700;
    font-family: inherit;
    font-size: inherit;
    background: transparent;
    color: #f2f5f8;
    outline: none;
    text-align: center;
}

.bpm-button {
    padding: 8px 5px;
    margin: 0;
    color: #d7dde3;
    border-radius: 0;
    cursor: pointer;
    font-weight: 600;
    font-size: 12px;
    transition: all 0.2s ease;
    min-width: 22px;
}

.tempo-controls .bpm-button:first-of-type {
    border-radius: 8px 0 0 8px;
}

.tempo-controls .bpm-button:nth-of-type(2) {
    border-radius: 0 8px 8px 0;
}

.bpm-button:hover {
    color: #f4f7fa;
}

.bpm-button:active {
    transform: scale(0.95);
}

/* Canvas overlay button (for note replacement toggle) */
.canvas-overlay-button {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 38px;
    height: 38px;
    box-sizing: border-box;
    border-radius: 10px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px solid #dee2e6;
    color: #6c757d;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 0;
    margin: 0;
}

.canvas-overlay-toolbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    z-index: 12;
    margin: 0 auto 8px auto;
}

.canvas-overlay-toolbar .canvas-overlay-button {
    position: relative;
    top: 0;
    left: 0;
    right: auto;
}

.canvas-overlay-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.canvas-overlay-spacer {
    width: 10px;
    flex: 0 0 10px;
}

#noteReplacementToggle.canvas-overlay-button,
#labelVisibilityToggle.canvas-overlay-button {
    font-size: 20px;
}

#labelVisibilityToggle.canvas-overlay-button[aria-pressed="false"] {
    font-size: 24px;
}

#autoLabelToggle.canvas-overlay-button {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.35px;
}

.canvas-overlay-button.labels-suspended {
    border: 2px solid rgba(140, 180, 210, 0.45);
    box-shadow: 0 0 0 2px rgba(140, 180, 210, 0.16);
    opacity: 0.92;
}

.canvas-overlay-button.labels-suspended.active {
    border: 2px solid rgba(140, 180, 210, 0.45);
    box-shadow: 0 0 0 2px rgba(140, 180, 210, 0.16);
}

.canvas-overlay-button.labels-suspended:hover,
.canvas-overlay-button.labels-suspended:active {
    transform: none;
}

.canvas-overlay-button.labels-suspended:disabled {
    opacity: 0.92;
}

.auto-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    letter-spacing: 0.2px;
    text-align: center;
    color: inherit;
    line-height: 1;
    gap: 0px;
}

.auto-stack-top {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 6px;
    line-height: 6px;
    font-weight: 800;
    white-space: nowrap;
    height: 6px;
}

.auto-stack-mid {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    line-height: 15px;
    font-weight: 900;
    letter-spacing: 0.1px;
    white-space: nowrap;
    height: 15px;
}

.auto-stack-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 7px;
    line-height: 7px;
    font-weight: 800;
    letter-spacing: 0.05px;
    white-space: nowrap;
    height: 6px;
}

/* Per-button tweaks */
#autoNumberButton .auto-stack-mid {
    font-size: 13px;
    line-height: 13px;
    font-weight: 700;
}

#autoNumberButton .auto-stack-bottom {
    font-size: 6px;
    line-height: 6px;
}

.solfege-toggle {
    width: 38px;
    height: 38px;
    padding: 2px;
}

.solfege-toggle .solfege-toggle-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: rotate(358deg) translate(1px, 0px);
    /* transform-origin: left bottom; */
    font-weight: 800;
    text-align: center;
    letter-spacing: 0.35px;
    color: inherit;
}

.solfege-toggle .solfege-line {
    display: block;
}

.solfege-toggle .solfege-do {
    font-size: 12px;
    line-height: 11px;
}

.solfege-toggle .solfege-re {
    font-size: 9px;
    line-height: 9px;
}

.solfege-toggle .solfege-mi {
    font-size: 7px;
    line-height: 7px;
}

.convert-solfege-button {
    width: 38px;
    height: 38px;
    padding: 1px;
    flex-direction: column;
    gap: 0px;
}

.convert-solfege-top {
    display: block;
    font-weight: 800;
    font-size: 14px;
    line-height: 14px;
    letter-spacing: 0.25px;
    text-align: center;
    color: inherit;
}

.convert-solfege-bottom {
    display: block;
    font-weight: 800;
    font-size: 6px;
    line-height: 6px;
    letter-spacing: 0.2px;
    text-align: center;
    color: inherit;
    white-space: nowrap;
}

/* ---- Chord Label Button & Area ---- */

.chord-label-btn-text {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    line-height: 1;
}

.chord-label-area {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 24px auto 0;
    height: 38px;
    outline: none;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    width: 180px;
    cursor: text;
    z-index: 20;
}

.chord-label-area.focused {
    border-color: rgba(34, 201, 119, 0.5);
    box-shadow: 0 0 8px rgba(34, 201, 119, 0.2);
}

.chord-label-text {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 28px;
    font-weight: 500;
    color: #212529;
    white-space: nowrap;
    user-select: none;
    line-height: 1;
}

.chord-label-text.placeholder {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #94a3b8;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.chord-label-text .chord-root {
    font-size: 1em;
}

.chord-label-text .chord-accidental {
    font-size: 0.7em;
    vertical-align: super;
    line-height: 0;
    margin-left: -1px;
}

.chord-label-text .chord-quality {
    font-size: 0.85em;
    font-weight: 300;
}

.chord-label-text .chord-ext {
    font-size: 0.6em;
    font-weight: 300;
    vertical-align: super;
    line-height: 0;
}

.chord-label-text .chord-slash {
    font-size: 0.8em;
    font-weight: 300;
    margin: 0 1px;
}

.chord-label-text .chord-bass {
    font-size: 0.85em;
}

/* Dark theme chord label */
html.theme-dark .chord-label-area.focused,
:root.theme-dark .chord-label-area.focused,
html[data-theme="dark"] .chord-label-area.focused {
    border-color: rgba(34, 201, 119, 0.5);
    box-shadow: 0 0 8px rgba(34, 201, 119, 0.2);
}

html.theme-dark .chord-label-text,
:root.theme-dark .chord-label-text,
html[data-theme="dark"] .chord-label-text {
    color: #f0f6ff;
}

html.theme-dark .chord-label-text.placeholder,
:root.theme-dark .chord-label-text.placeholder,
html[data-theme="dark"] .chord-label-text.placeholder {
    color: #5a6a7a;
}

html.theme-dark .canvas-overlay-button,
:root.theme-dark .canvas-overlay-button,
html[data-theme="dark"] .canvas-overlay-button {
    background: linear-gradient(135deg, #1a2b45 0%, #102035 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    color: #e7f4ff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

html.theme-dark .canvas-overlay-button:hover,
:root.theme-dark .canvas-overlay-button:hover,
html[data-theme="dark"] .canvas-overlay-button:hover {
    background: linear-gradient(135deg, #233759 0%, #152a45 100%);
    border-color: rgba(34, 201, 119, 0.75);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(34, 201, 119, 0.25);
    color: #e7f4ff;
}

html.theme-dark .canvas-overlay-button:active,
:root.theme-dark .canvas-overlay-button:active,
html[data-theme="dark"] .canvas-overlay-button:active {
    transform: translateY(0);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.canvas-overlay-left-right {
    left: 54px; /* 4px gap from crown button (12px + 38px + 4px = 54px) */
}

.canvas-overlay-right {
    left: auto;
    right: 12px;
}

.canvas-overlay-right-left {
    left: auto;
    right: 54px; /* Position to the left of the rightmost button */
}

.canvas-overlay-right-left-left {
    left: auto;
    right: 96px; /* Position to the left of the relabel button */
}

.canvas-overlay-right-left-left-left {
    left: auto;
    right: 138px; /* Position to the left of the auto line button */
}

.canvas-overlay-right-left-left-left-left {
    left: auto;
    right: 180px; /* Additional slot for extended button rows */
}

.canvas-overlay-right-left-left-left-left-left {
    left: auto;
    right: 222px; /* Further slot left of the MIDI button */
}

.canvas-overlay-right-left-left-left-left-left-left {
    left: auto;
    right: 264px; /* Slot for DoReMi button */
}

.canvas-overlay-right-left-left-left-left-left-left-left {
    left: auto;
    right: 306px; /* Slot for Scale Degree button */
}


.canvas-overlay-button:hover {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    border-color: #f39c12;
    color: #856404;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.canvas-overlay-button:disabled,
.canvas-overlay-button.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

.canvas-overlay-button.active {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px solid #22c977;
    color: #6c757d;
    box-shadow: 0 0 8px rgba(34, 201, 119, 0.3), 0 2px 4px rgba(0,0,0,0.1);
}

html.theme-dark .canvas-overlay-button:hover,
:root.theme-dark .canvas-overlay-button:hover,
html[data-theme="dark"] .canvas-overlay-button:hover {
    background: linear-gradient(135deg, #22395a 0%, #1a2f4e 100%);
    border-color: rgba(34, 201, 119, 0.85);
    color: #e7f4ff;
}

html.theme-dark .canvas-overlay-button.active,
:root.theme-dark .canvas-overlay-button.active,
html[data-theme="dark"] .canvas-overlay-button.active {
    background: linear-gradient(135deg, #1a2b45 0%, #102035 100%);
    border: 2px solid #22c977;
    color: #e7f4ff;
    box-shadow: 0 0 8px rgba(34, 201, 119, 0.4), 0 8px 20px rgba(0, 0, 0, 0.35);
}

/* Custom tooltip for canvas overlay button */
.canvas-overlay-tooltip {
    position: absolute;
    bottom: 120%; /* Position above the button */
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 9999; /* Ensure it's above everything */
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
}

.canvas-overlay-button:hover .canvas-overlay-tooltip,
.canvas-overlay-button:focus-visible .canvas-overlay-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(-4px);
    visibility: visible;
}

.canvas-overlay-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #2c3e50;
    border-bottom: none;
}

.canvas-overlay-tooltip.show {
    opacity: 1;
    transform: translateX(-50%) translateY(-4px);
}

/* Canvas overlay tooltips that should appear below the buttons */
.canvas-overlay-toolbar.tooltips-below .canvas-overlay-tooltip {
    bottom: auto;
    top: 120%;
}

.canvas-overlay-toolbar.tooltips-below .canvas-overlay-button:hover .canvas-overlay-tooltip,
.canvas-overlay-toolbar.tooltips-below .canvas-overlay-button:focus-visible .canvas-overlay-tooltip,
.canvas-overlay-toolbar.tooltips-below .canvas-overlay-tooltip.show {
    transform: translateX(-50%) translateY(4px);
}

.canvas-overlay-toolbar.tooltips-below .canvas-overlay-tooltip::after {
    top: auto;
    bottom: 100%;
    border-top: none;
    border-bottom-color: #2c3e50;
}

/* Prevent tooltips from clipping off-screen near right edge */
.canvas-overlay-button.canvas-overlay-right .canvas-overlay-tooltip,
.canvas-overlay-button.canvas-overlay-right-left .canvas-overlay-tooltip,
.canvas-overlay-button.canvas-overlay-right-left-left .canvas-overlay-tooltip,
.canvas-overlay-button.canvas-overlay-right-left-left-left .canvas-overlay-tooltip,
.canvas-overlay-button.canvas-overlay-right-left-left-left-left .canvas-overlay-tooltip,
.canvas-overlay-button.canvas-overlay-right-left-left-left-left-left .canvas-overlay-tooltip,
.canvas-overlay-button.canvas-overlay-right-left-left-left-left-left-left .canvas-overlay-tooltip,
.canvas-overlay-button.canvas-overlay-right-left-left-left-left-left-left-left .canvas-overlay-tooltip {
    left: auto;
    right: 9px;
    transform: translateY(-4px);
}

.canvas-overlay-toolbar.tooltips-below .canvas-overlay-button.canvas-overlay-right .canvas-overlay-tooltip,
.canvas-overlay-toolbar.tooltips-below .canvas-overlay-button.canvas-overlay-right-left .canvas-overlay-tooltip,
.canvas-overlay-toolbar.tooltips-below .canvas-overlay-button.canvas-overlay-right-left-left .canvas-overlay-tooltip,
.canvas-overlay-toolbar.tooltips-below .canvas-overlay-button.canvas-overlay-right-left-left-left .canvas-overlay-tooltip,
.canvas-overlay-toolbar.tooltips-below .canvas-overlay-button.canvas-overlay-right-left-left-left-left .canvas-overlay-tooltip,
.canvas-overlay-toolbar.tooltips-below .canvas-overlay-button.canvas-overlay-right-left-left-left-left-left .canvas-overlay-tooltip,
.canvas-overlay-toolbar.tooltips-below .canvas-overlay-button.canvas-overlay-right-left-left-left-left-left-left .canvas-overlay-tooltip,
.canvas-overlay-toolbar.tooltips-below .canvas-overlay-button.canvas-overlay-right-left-left-left-left-left-left-left .canvas-overlay-tooltip {
    transform: translateY(4px);
}

.canvas-overlay-button.canvas-overlay-right .canvas-overlay-tooltip::after,
.canvas-overlay-button.canvas-overlay-right-left .canvas-overlay-tooltip::after,
.canvas-overlay-button.canvas-overlay-right-left-left .canvas-overlay-tooltip::after,
.canvas-overlay-button.canvas-overlay-right-left-left-left .canvas-overlay-tooltip::after,
.canvas-overlay-button.canvas-overlay-right-left-left-left-left .canvas-overlay-tooltip::after,
.canvas-overlay-button.canvas-overlay-right-left-left-left-left-left .canvas-overlay-tooltip::after,
.canvas-overlay-button.canvas-overlay-right-left-left-left-left-left-left .canvas-overlay-tooltip::after,
.canvas-overlay-button.canvas-overlay-right-left-left-left-left-left-left-left .canvas-overlay-tooltip::after {
    left: auto;
    right: 12px;
}
.canvas-overlay-tooltip.royal-active {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
    border-color: rgba(255,255,255,0.2);
    box-shadow: 0 4px 12px rgba(243, 156, 18, 0.4);
}

.canvas-overlay-tooltip.royal-active::after {
    border-top-color: #f39c12;
}

.canvas-overlay-tooltip.auto-number-tooltip {
    white-space: normal;
    min-width: 280px;
    max-width: 420px;
    line-height: 1.35;
}

.canvas-overlay-tooltip.auto-number-tooltip .tooltip-strong {
    font-weight: 700;
    letter-spacing: 0.2px;
}

.canvas-overlay-tooltip.auto-number-tooltip .tooltip-em {
    color: #f1c40f;
    font-weight: 600;
}

.canvas-overlay-tooltip.auto-number-tooltip .tooltip-note {
    color: #d9e6f4;
    font-weight: 500;
}

@keyframes crownPulse {
    0%, 100% {
        box-shadow: 0 0 8px rgba(241, 196, 15, 0.3), 0 4px 8px rgba(0,0,0,0.15);
    }
    50% {
        box-shadow: 0 0 16px rgba(241, 196, 15, 0.6), 0 4px 8px rgba(0,0,0,0.15);
    }
}


/* Octave Shift - Compact Icon + Badge Design */
.octave-shift-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 0px;
    padding: 0px 12px;
    height: 27px;
    border-radius: 20px;
    border: 2px solid rgb(17 18 16 / 52%);
    background: #382f4a;
    backdrop-filter: blur(6px);
    transition: all 0.2s ease;
}

.octave-shift-inline:hover {
    border-color: rgb(37 186 112 / 90%);
    box-shadow: 0 0 10px rgba(34, 201, 119, 0.25);
}

.octave-shift-button {
    background: rgba(255, 255, 255, 0.04);
    border: 2px solid rgba(34, 201, 119, 0.55);
    border-radius: 999px;
    width: 21px;
    height: 21px;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.octave-shift-button:hover,
.octave-shift-button:focus-visible {
    background: rgba(34, 201, 119, 0.12);
    border-color: rgb(69 217 144);
    outline: none;
    transform: translateY(-1px);
    box-shadow: 0 0 16px rgba(34, 201, 119, 0.35);
}

.octave-shift-icon {
    font-size: 16px;
    opacity: 0.7;
    flex-shrink: 0;
    line-height: 1;
}

.octave-shift-badge {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    text-shadow: 0 0 10px rgba(34, 201, 119, 0.35);
    min-width: 24px;
    text-align: center;
    line-height: 1;
}

/* Legacy classes for backward compatibility */
.octave-shift-readout {
    display: flex;
    align-items: center;
    gap: 4px;
}

.octave-shift-label {
    font-size: 10px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.octave-shift-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    text-shadow: 0 0 10px rgba(34, 201, 119, 0.35);
}

/* Key range dropdown (arpeggio-style) */
.key-range-control {
    display: inline-flex;
    align-items: center;
    position: relative;
    z-index: 120;
    gap: 0;
}

/* Override instrument-config button margin for flush joined buttons */
.key-range-control button {
    margin: 0 !important;
}

.key-range-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 600;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    background: linear-gradient(135deg, #4a4f8d 0%, #3a3f78 100%);
    border: 1px solid rgba(140, 150, 220, 0.35);
    color: rgba(235, 231, 255, 0.85);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.key-range-button:hover {
    background: linear-gradient(135deg, #5a63b0 0%, #4953a0 100%);
    border-color: rgba(150, 170, 255, 0.7);
    color: rgba(235, 231, 255, 0.95);
}

.key-range-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.key-range-state {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(20, 20, 40, 0.45);
    color: rgba(235, 231, 255, 0.9);
    border: 1px solid rgba(140, 150, 220, 0.35);
}

.key-range-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 4px;
    min-width: 22px;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    background: linear-gradient(135deg, #4a4f8d 0%, #3a3f78 100%);
    border: 1px solid rgba(140, 150, 220, 0.35);
    border-left-color: rgba(140, 150, 220, 0.18);
    color: rgba(235, 231, 255, 0.85);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.2s ease;
    gap: 2px;
}

.key-range-toggle::before {
    content: "⚙";
    color: rgba(235, 231, 255, 0.95);
    font-size: 16px;
}

.key-range-toggle:hover {
    background: linear-gradient(135deg, #5a63b0 0%, #4953a0 100%);
    border-color: rgba(150, 170, 255, 0.7);
    color: rgba(235, 231, 255, 0.95);
}

.key-range-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    padding: 6px;
    border-radius: 10px;
    background: rgba(42, 44, 78, 0.98);
    box-shadow: 0 8px 20px rgba(12, 14, 30, 0.45);
    border: 1px solid rgba(150, 140, 210, 0.35);
    display: none;
    flex-direction: row;
    gap: 6px;
    align-items: center;
    justify-content: space-between;
    z-index: 200;
    box-sizing: border-box;
}

.key-range-menu.open {
    display: flex;
}

.key-range-option {
    flex: 0 0 auto;
    white-space: nowrap;
    background: linear-gradient(135deg, #4a4f8d 0%, #3a3f78 100%);
    border: 1px solid rgba(140, 150, 220, 0.35);
    color: rgba(235, 231, 255, 0.85);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    height: 26px;
    padding: 0 10px;
    font-size: 11px;
    border-radius: 6px;
    line-height: 1.1;
    cursor: pointer;
    transition: all 0.2s ease;
}

.key-range-option:hover,
.key-range-option:focus-visible {
    background: linear-gradient(135deg, #5a63b0 0%, #4953a0 100%);
    border-color: rgba(150, 170, 255, 0.7);
    color: rgba(235, 231, 255, 0.95);
}

.key-range-option.active {
    background: linear-gradient(135deg, #6a7bff 0%, #4e63e6 100%);
    border-color: rgba(170, 190, 255, 0.9);
    color: white;
    box-shadow: 0 0 12px rgba(120, 150, 255, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* Divider between sub-sections within a control group */
.config-divider {
    width: 1px;
    height: 20px;
    background: rgba(150, 140, 210, 0.35);
    margin: 0 4px;
}

/* Octave shift when inside a control group loses standalone container styling */
.control-group .octave-shift-inline {
    background: transparent;
    border: none;
    padding: 0 4px;
    height: auto;
    border-radius: 0;
}

/* Waveform buttons */
.waveform-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 0 1px;
}

.waveButton,
.sampleButton {
    /* Uniform sizing */
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    max-width: 32px;
    max-height: 32px;
    box-sizing: border-box;

    /* Centering content */
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* Typography */
    font-size: 16px;
    line-height: 1;

    /* Spacing */
    margin: 0;
    padding: 0;

    /* Modern styling */
    border-radius: 8px;
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    cursor: pointer;
    transition: all 0.2s ease;
}

.waveButton {
    background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
    color: #a0aec0;
}

.waveButton:hover {
    background: linear-gradient(135deg, #5a6578 0%, #3d4758 100%);
    border-color: rgba(255, 255, 255, 0.3);
    color: #e2e8f0;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.waveButton.active {
    background: linear-gradient(135deg, #2b4a6f 0%, #1a365d 100%);
    border: 1.5px solid rgba(99, 179, 237, 0.6);
    color: #90cdf4;
    box-shadow: 0 0 12px rgba(99, 179, 237, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.sampleButton {
    background: linear-gradient(135deg, #276749 0%, #1a4731 100%);
    color: #9ae6b4;
    font-size: 14px; /* Slightly smaller for emoji */
}

.sampleButton:hover {
    background: linear-gradient(135deg, #2f855a 0%, #22543d 100%);
    border-color: rgba(154, 230, 180, 0.4);
    color: #c6f6d5;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.sampleButton.active {
    background: linear-gradient(135deg, #22543d 0%, #1a4731 100%);
    border: 1.5px solid rgba(72, 187, 120, 0.7);
    color: #9ae6b4;
    box-shadow: 0 0 12px rgba(72, 187, 120, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Per-icon adjustments for consistent visual size and centering */
#waveSine, #waveSine2 {
    font-size: 0; /* Hide original text */
}

#waveSine::before, #waveSine2::before {
    content: '∿';
    font-size: 20px;
    transform: translateY(-3px);
    display: block;
}

#waveSquare, #waveSquare2 {
    font-size: 0; /* Hide original text */
}

#waveSquare::before, #waveSquare2::before {
    content: '⊓';
    font-size: 15px;
    transform: translateY(-2px);
    display: block;
}

#waveSawtooth, #waveSawtooth2 {
    font-size: 16px;
}

#waveTriangle, #waveTriangle2 {
    font-size: 14px;
}

/* Playback button styles */
.action-buttons, .sequence-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 0px;
}

.action-buttons {
    justify-content: flex-start;
}

.action-buttons-left,
.action-buttons-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.action-buttons-right {
    margin-left: auto;
    gap: 6px;
}

.rhythm-buttons-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0px;
}


.string-generator-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-left: 0px;
}

.control-group.playback-card {
    background: rgba(58, 54, 96, 0.28);
    border: 1px solid rgba(150, 140, 210, 0.35);
    border-radius: 8px;
    padding: 3px 8px;
    gap: 4px;
}

#playbackControls .playback-card .actionButton,
#playbackControls .playback-card .playback-button,
#playbackControls .playback-card .sequence-button {
    background: linear-gradient(135deg, #4a4f8d 0%, #3a3f78 100%);
    border: 1px solid rgba(140, 150, 220, 0.35);
    color: rgba(235, 231, 255, 0.85);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    height: 28px;
    padding: 0 10px;
    font-size: 13px;
    border-radius: 6px;
    line-height: 1.1;
    white-space: nowrap;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

#playbackControls .playback-card .actionButton:hover,
#playbackControls .playback-card .playback-button:hover,
#playbackControls .playback-card .sequence-button:hover {
    background: linear-gradient(135deg, #5a63b0 0%, #4953a0 100%);
    border-color: rgba(150, 170, 255, 0.7);
    color: rgba(235, 231, 255, 0.95);
}

#playbackControls .playback-card .actionButton.active,
#playbackControls .playback-card .playback-button.active,
#playbackControls .playback-card .sequence-button.active,
#playbackControls .playback-card .actionButton.last-action {
    background: linear-gradient(135deg, #5967c0 0%, #4350a8 100%);
    border-color: rgba(170, 190, 255, 0.8);
    color: rgba(245, 243, 255, 0.98);
    box-shadow: 0 0 10px rgba(120, 140, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    font-weight: 600;
}

#playbackControls .playback-card #loopButton,
#playbackControls .playback-card #loopMemoryButton {
    flex: 0 0 auto;
}

/* Brain & Loop buttons — absolutely positioned to track canvas center */
.brain-loop-centered {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 5px;
    z-index: 2;
    pointer-events: auto;
}

/* Loop buttons in bottom bar */
.bottom-bar-loops {
    display: flex;
    align-items: center;
    gap: 5px;
}

.loop-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.25s ease;
    border: 1px solid rgba(140, 150, 220, 0.3);
    background: linear-gradient(135deg, #3e4272 0%, #2f3563 100%);
    color: rgba(200, 210, 240, 0.85);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 8px rgba(20, 25, 60, 0.35);
    text-transform: uppercase;
}

.loop-btn-icon {
    font-size: 11px;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.loop-btn-label {
    line-height: 1;
}

.loop-btn:hover {
    background: linear-gradient(135deg, #4d5399 0%, #3d4590 100%);
    border-color: rgba(150, 170, 255, 0.55);
    color: rgba(230, 235, 255, 0.95);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 4px 12px rgba(30, 40, 90, 0.4);
}

.loop-btn:hover .loop-btn-icon {
    opacity: 1;
}

.loop-btn.active {
    background: linear-gradient(135deg, #c0392b 0%, #962d22 100%);
    border-color: rgba(255, 130, 110, 0.6);
    color: #fff;
    box-shadow: 0 0 14px rgba(220, 60, 40, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    animation: loop-active-pulse 1.8s ease-in-out infinite;
}

.loop-btn.active .loop-btn-icon {
    opacity: 1;
}

@keyframes loop-active-pulse {
    0%, 100% { box-shadow: 0 0 14px rgba(220, 60, 40, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
    50% { box-shadow: 0 0 20px rgba(220, 60, 40, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
}

/* Speed buttons styles */
#speedControls {
    font-size: 15px;
    font-family: inherit;
}

.speed-row {
    /* Remove speed-row styling since we're using direct flexbox now */
    display: contents;
}

.speedButton {
    background-color: #1abc9c;
    border: 2px solid #dddcdc;
    margin: 0 0px;
    padding: 5px 7px;
    font-size: 13px;
    min-width: 32px;
    flex: 0 0 auto;
}

.speedButton:hover {
    background-color: #16a085;
}

.speedButton.active {
    background-color: #2c7d59;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.7); /* Already accounted for */
    font-weight: bold;
}

/* Rhythm control styles */
.rhythm-sequence-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
    margin: 3px 0;
}

.rhythm-button, .sequence-button {
    border: 2px solid transparent; /* Prevent size changes */
    margin: 0;
    padding: 6px 10px;
    font-size: 14px;
    flex: 0 1 auto;
    max-width: 120px;
    min-width: 70px;
    white-space: nowrap;
}

.rhythm-button {
    background-color: #4CAF50;
}

.rhythm-button:hover {
    background-color: #3d8b40;
}

.rhythm-button.active {
    background-color: #2c7d59;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.7); /* Already accounted for */
    font-weight: bold;
}

/* Ensure sequence buttons have identical styling to rhythm buttons when active */
/* Ensure the base sequence button styling doesn't override playback card styles */
#playbackControls .playback-card #arpeggioButton,
#playbackControls .playback-card #bassStrumButton {
    border-width: 1px;
    min-width: 70px;
}

#playbackControls .playback-card #arpeggioToggle {
    border-width: 1px;
    min-width: 0;
}

#playbackControls .playback-card #strumButton,
#playbackControls .playback-card #strumToggle {
    border-width: 1px;
    min-width: 0;
}

#playbackControls .playback-card #bassStrumToggle {
    border-width: 1px;
    min-width: 0;
}

/* Last action highlighting */
.actionButton.last-action {
    background: linear-gradient(135deg, #5967c0 0%, #4350a8 100%);
    border: 1px solid rgba(170, 190, 255, 0.8);
    color: rgba(245, 243, 255, 0.98);
    box-shadow: 0 0 10px rgba(120, 140, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    font-weight: 600;
}

/* Arpeggio control */
.arpeggio-control {
    display: inline-flex;
    align-items: center;
    position: relative;
    z-index: 120;
}

.arpeggio-button {
    border-top-left-radius: 6px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 6px !important;
    gap: 6px;
    padding: 0 12px;
}

.arpeggio-label {
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.2px;
}

.arpeggio-state {
    font-size: 12px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(20, 20, 40, 0.45);
    color: rgba(235, 231, 255, 0.9);
    border: 1px solid rgba(140, 150, 220, 0.35);
}

.arpeggio-toggle {
    border-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
    border-bottom-left-radius: 0 !important;
    padding: 0 4px !important;
    min-width: 22px !important;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    margin-left: -1px;
    border-left-color: rgba(140, 150, 220, 0.18) !important;
    gap: 2px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.arpeggio-toggle::before {
    content: "⚙";
    color: rgba(235, 231, 255, 0.95);
    font-size: 18px;
    margin-right: 0px;
}

.arpeggio-menu {
    position: absolute;
    bottom: calc(100% + 6px);
    left: -7px;
    right: auto;
    width: calc(100% - 9px);
    padding: 6px;
    border-radius: 10px;
    background: rgba(42, 44, 78, 0.98);
    box-shadow: 0 8px 20px rgba(12, 14, 30, 0.45);
    border: 1px solid rgba(150, 140, 210, 0.35);
    display: none;
    flex-direction: row;
    gap: 6px;
    align-items: center;
    justify-content: space-between;
    z-index: 1000;
    box-sizing: border-box;
}

.arpeggio-menu.open {
    display: flex;
}

.arpeggio-menu .arpeggio-option {
    flex: 1 1 0;
    min-width: 0;
    background: linear-gradient(135deg, #4a4f8d 0%, #3a3f78 100%);
    border: 1px solid rgba(140, 150, 220, 0.35);
    color: rgba(235, 231, 255, 0.85);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    height: 26px;
    padding: 0 8px;
    font-size: 12px;
    border-radius: 6px;
    line-height: 1.1;
    cursor: pointer;
}

.arpeggio-option:hover,
.arpeggio-option:focus-visible {
    background: linear-gradient(135deg, #5a63b0 0%, #4953a0 100%);
    border-color: rgba(150, 170, 255, 0.7);
    color: rgba(235, 231, 255, 0.95);
}

.arpeggio-menu .arpeggio-option:last-child {
    padding-right: 12px !important;
}

/* Strum control */
.strum-control {
    display: inline-flex;
    align-items: center;
    position: relative;
    z-index: 120;
}

.strum-button {
    border-top-left-radius: 6px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 6px !important;
    gap: 6px;
    padding: 0 12px;
}

.strum-label {
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.2px;
}

.strum-state {
    font-size: 12px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(20, 20, 40, 0.45);
    color: rgba(235, 231, 255, 0.9);
    border: 1px solid rgba(140, 150, 220, 0.35);
}

.strum-toggle {
    border-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
    border-bottom-left-radius: 0 !important;
    padding: 0 4px !important;
    min-width: 22px !important;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    margin-left: -1px;
    border-left-color: rgba(140, 150, 220, 0.18) !important;
    gap: 2px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.strum-toggle::before {
    content: "⚙";
    color: rgba(235, 231, 255, 0.95);
    font-size: 18px;
    margin-right: 0px;
}

/* ── Strum dropdown menu ── */
.strum-menu {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    width: max-content;
    padding: 5px;
    border-radius: 10px;
    background: rgba(38, 40, 72, 0.98);
    box-shadow: 0 8px 24px rgba(8, 10, 24, 0.5);
    border: 1px solid rgba(130, 140, 210, 0.3);
    display: none;
    flex-direction: row;
    gap: 4px;
    align-items: center;
    z-index: 1000;
    box-sizing: border-box;
}

.strum-menu.open {
    display: flex;
}

/* ── Simple / ADV mode toggle ── */
.strum-mode-toggle {
    display: flex;
    flex-shrink: 0;
    order: 0;
}

.strum-mode-btn {
    background: rgba(40, 42, 70, 0.9);
    border: 1px solid rgba(130, 140, 210, 0.3);
    color: rgba(195, 192, 225, 0.65);
    height: 24px;
    padding: 0 7px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    line-height: 1;
    position: relative;
}

.strum-mode-btn:first-child {
    border-radius: 5px 0 0 5px;
}

.strum-mode-btn:last-child {
    border-radius: 0 5px 5px 0;
    margin-left: -1px;
}

.strum-mode-btn.active {
    background: linear-gradient(135deg, #5460b4 0%, #4650a0 100%);
    border-color: rgba(130, 140, 210, 0.3);
    color: rgba(240, 238, 255, 0.95);
    z-index: 1;
}

.strum-mode-btn:hover:not(.active) {
    background: rgba(52, 56, 90, 0.9);
    color: rgba(215, 212, 240, 0.8);
}

/* Bass strum mode toggle buttons (reuses .strum-mode-toggle container) */
.bass-strum-mode-btn {
    background: rgba(40, 42, 70, 0.9);
    border: 1px solid rgba(130, 140, 210, 0.3);
    color: rgba(195, 192, 225, 0.65);
    height: 24px;
    padding: 0 7px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    line-height: 1;
    position: relative;
}

.bass-strum-mode-btn:first-child {
    border-radius: 5px 0 0 5px;
}

.bass-strum-mode-btn:last-child {
    border-radius: 0 5px 5px 0;
    margin-left: -1px;
}

.bass-strum-mode-btn.active {
    background: linear-gradient(135deg, #5460b4 0%, #4650a0 100%);
    border-color: rgba(130, 140, 210, 0.3);
    color: rgba(240, 238, 255, 0.95);
    z-index: 1;
}

.bass-strum-mode-btn:hover:not(.active) {
    background: rgba(52, 56, 90, 0.9);
    color: rgba(215, 212, 240, 0.8);
}

/* ── Options panels ── */
.strum-simple-options,
.strum-adv-options,
.bass-strum-simple-options,
.bass-strum-adv-options {
    display: flex;
    gap: 3px;
    align-items: center;
    order: 1;
}

/* ── Shared pill style for both panels ── */
.strum-option,
.strum-adv-options .bass-strum-option {
    flex: 0 0 auto;
    white-space: nowrap;
    background: linear-gradient(135deg, #464b88 0%, #3a3f74 100%);
    border: 1px solid rgba(130, 140, 210, 0.3);
    color: rgba(225, 221, 250, 0.85);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    height: 24px;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 5px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

.strum-option:hover,
.strum-option:focus-visible,
.strum-adv-options .bass-strum-option:hover,
.strum-adv-options .bass-strum-option:focus-visible {
    background: linear-gradient(135deg, #5a63b4 0%, #4e56a4 100%);
    border-color: rgba(150, 165, 255, 0.6);
    color: rgba(240, 238, 255, 0.95);
}

/* ── Strum pattern pills (ADV panel) ── */
.strum-pattern-option {
    flex: 0 0 auto;
    white-space: nowrap;
    background: linear-gradient(135deg, #464b88 0%, #3a3f74 100%);
    border: 1px solid rgba(130, 140, 210, 0.3);
    color: rgba(225, 221, 250, 0.85);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    height: 24px;
    padding: 0 10px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 5px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

.strum-pattern-option:hover,
.strum-pattern-option:focus-visible {
    background: linear-gradient(135deg, #5a63b4 0%, #4e56a4 100%);
    border-color: rgba(150, 165, 255, 0.6);
    color: rgba(240, 238, 255, 0.95);
}

.strum-pattern-option.active {
    background: linear-gradient(135deg, #6a72d4 0%, #5860c0 100%);
    border-color: rgba(170, 185, 255, 0.7);
    color: #fff;
    box-shadow: 0 0 8px rgba(120, 130, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Bass Strum control */
.bass-strum-control {
    display: inline-flex;
    align-items: center;
    position: relative;
    z-index: 120;
}

.bass-strum-button {
    border-top-left-radius: 6px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 6px !important;
    gap: 6px;
    padding: 0 14px;
    min-width: 140px;
    max-width: none;
    flex: 0 1 auto;
}

.bass-strum-label {
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.2px;
}

.bass-strum-state {
    font-size: 12px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(20, 20, 40, 0.45);
    color: rgba(235, 231, 255, 0.9);
    border: 1px solid rgba(140, 150, 220, 0.35);
}

.bass-strum-toggle {
    border-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
    border-bottom-left-radius: 0 !important;
    padding: 0 4px !important;
    min-width: 22px !important;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    margin-left: -1px;
    border-left-color: rgba(140, 150, 220, 0.18) !important;
    gap: 2px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bass-strum-toggle::before {
    content: "⚙";
    color: rgba(235, 231, 255, 0.95);
    font-size: 18px;
    margin-right: 0px;
}

/* Hum control */
.hum-control {
    display: inline-flex;
    align-items: center;
    position: relative;
    z-index: 120;
}

.hum-button {
    border-top-left-radius: 6px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 6px !important;
    gap: 6px;
    padding: 0 12px;
}

.hum-toggle {
    border-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
    border-bottom-left-radius: 0 !important;
    padding: 0 4px !important;
    min-width: 22px !important;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    margin-left: -1px;
    border-left-color: rgba(140, 150, 220, 0.18) !important;
    gap: 2px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hum-toggle::before {
    content: "⚙";
    color: rgba(235, 231, 255, 0.95);
    font-size: 18px;
    margin-right: 0px;
}

/* Record control */
.record-control {
    display: inline-flex;
    align-items: center;
    position: relative;
    z-index: 120;
}

.record-main-btn {
    border-top-left-radius: 6px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 6px !important;
    gap: 6px;
    padding: 0 12px;
}

.record-settings-toggle {
    border-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
    border-bottom-left-radius: 0 !important;
    padding: 0 4px !important;
    min-width: 22px !important;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    margin-left: -1px;
    border-left-color: rgba(140, 150, 220, 0.18) !important;
    gap: 2px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.record-settings-toggle::before {
    content: "⚙";
    color: rgba(235, 231, 255, 0.95);
    font-size: 18px;
    margin-right: 0px;
}

.record-menu {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    width: max-content;
    padding: 5px;
    border-radius: 10px;
    background: rgba(38, 40, 72, 0.98);
    box-shadow: 0 8px 24px rgba(8, 10, 24, 0.5);
    border: 1px solid rgba(130, 140, 210, 0.3);
    display: none;
    flex-direction: row;
    gap: 4px;
    align-items: center;
    z-index: 1000;
    box-sizing: border-box;
}

.record-menu.open {
    display: flex;
}

.record-mode-option {
    flex: 0 0 auto;
    white-space: nowrap;
    background: linear-gradient(135deg, #464b88 0%, #3a3f74 100%);
    border: 1px solid rgba(130, 140, 210, 0.3);
    color: rgba(225, 221, 250, 0.85);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    height: 26px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    line-height: 1.1;
    cursor: pointer;
}

.record-mode-option:hover,
.record-mode-option:focus-visible {
    background: linear-gradient(135deg, #5a63b4 0%, #4e56a4 100%);
    border-color: rgba(150, 165, 255, 0.6);
    color: rgba(240, 238, 255, 0.95);
}

.record-adv-option {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
}

.bass-strum-menu {
    position: absolute;
    bottom: calc(100% + 6px);
    left: -7px;
    right: auto;
    width: max-content;
    min-width: 100%;
    padding: 6px;
    border-radius: 10px;
    background: rgba(42, 44, 78, 0.98);
    box-shadow: 0 8px 20px rgba(12, 14, 30, 0.45);
    border: 1px solid rgba(150, 140, 210, 0.35);
    display: none;
    flex-direction: row;
    gap: 6px;
    align-items: center;
    justify-content: space-between;
    z-index: 1000;
    box-sizing: border-box;
}

.bass-strum-menu.open {
    display: flex;
}

.bass-strum-option {
    white-space: nowrap;
    background: linear-gradient(135deg, #4a4f8d 0%, #3a3f78 100%);
    border: 1px solid rgba(140, 150, 220, 0.35);
    color: rgba(235, 231, 255, 0.85);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    height: 26px;
    padding: 0 8px;
    font-size: 12px;
    border-radius: 6px;
    line-height: 1.1;
    cursor: pointer;
}

.bass-strum-option:hover,
.bass-strum-option:focus-visible {
    background: linear-gradient(135deg, #5a63b0 0%, #4953a0 100%);
    border-color: rgba(150, 170, 255, 0.7);
    color: rgba(235, 231, 255, 0.95);
}

#playbackControls {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0px;
}

/* Tempo controls */
.tempo-tap {
    background-color: #9b59b6;
    border: 2px solid transparent; /* Prevent size changes */
    padding: 6px 10px;
    font-weight: bold;
    font-size: 13px;
}

.tempo-tap:hover {
    background-color: #8e44ad;
}

.tempo-tap.tapping {
    background-color: #8e44ad;
    border: 2px solid rgba(255, 255, 255, 0.5); /* Visual feedback without scaling */
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}

.tempo-display {
    font-weight: bold;
    margin-top: 2px;
    font-size: 14px;
    text-align: center;
}

.manual-strum-controls {
    display: flex;
    justify-content: center;
    margin-top: 1.2em;
    margin-bottom: 0.2em;
    width: 200px;
    justify-self: center;
}

.modal-action-button {
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid rgba(33, 150, 243, 0.4);
    background: rgba(33, 150, 243, 0.08);
    color: #1f5fab;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-action-button:hover,
.modal-action-button:focus-visible {
    background: rgba(33, 150, 243, 0.2);
    border-color: rgba(33, 150, 243, 0.7);
}

.modal-action-button.small {
    padding: 4px 12px;
    font-size: 18px;
}

.strum4-group {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin-left: 0px;
}

.strum4-controls {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 180px;
    padding: 10px;
    border-radius: 10px;
    background: rgba(42, 44, 78, 0.98);
    box-shadow: 0 8px 20px rgba(12, 14, 30, 0.45);
    border: 1px solid rgba(150, 140, 210, 0.35);
    display: none;
    flex-direction: column;
    gap: 8px;
    z-index: 30;
}

.strum4-controls.open {
    display: flex;
}

.strum4-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(200, 190, 230, 0.85);
}

.strum4-quick-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.strum4-length-btn {
    flex: 1 1 40px;
    padding: 4px 0;
    border-radius: 999px;
    border: 1px solid rgba(140, 150, 220, 0.35);
    background: linear-gradient(135deg, #4a4f8d 0%, #3a3f78 100%);
    font-size: 12px;
    font-weight: 600;
    color: rgba(235, 231, 255, 0.85);
    cursor: pointer;
    transition: all 0.15s ease;
}

.strum4-length-btn.active,
.strum4-length-btn:hover,
.strum4-length-btn:focus-visible {
    background: linear-gradient(135deg, #5a63b0 0%, #4953a0 100%);
    border-color: rgba(150, 170, 255, 0.7);
    color: rgba(235, 231, 255, 0.95);
}

.strum4-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(140, 150, 220, 0.35);
    border-radius: 999px;
    padding: 2px 10px;
    background: rgba(52, 56, 94, 0.95);
}

.strum4-step {
    border: none;
    background: transparent;
    font-size: 16px;
    cursor: pointer;
    color: rgba(235, 231, 255, 0.85);
    padding: 2px 6px;
}

#strum4LengthDisplay {
    min-width: 30px;
    text-align: center;
    font-weight: 700;
    color: rgba(235, 231, 255, 0.95);
}

.strum4-hint {
    font-size: 11px;
    color: rgba(170, 170, 210, 0.85);
    text-align: center;
}

/* Waveform Blend Sliders - Modern Glass Morphism Design */
.wave-button-wrapper {
    position: relative;
    display: inline-block;
}

.waveform-slider-item {
    position: absolute;
    bottom: calc(100% + 0px);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 4px 6px 4px;
    background: linear-gradient(135deg,
        rgba(20, 184, 166, 0.15) 0%,
        rgba(139, 92, 246, 0.15) 100%);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    z-index: 1000;
    width: 35px;
}

.waveform-slider-item.visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.waveform-slider-item.active {
    background: linear-gradient(135deg,
        rgba(20, 184, 166, 0.25) 0%,
        rgba(139, 92, 246, 0.25) 100%);
    border-color: rgba(139, 92, 246, 0.4);
    box-shadow:
        0 8px 32px rgba(139, 92, 246, 0.4),
        0 0 20px rgba(139, 92, 246, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.waveform-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 32px;
    height: 100px;
    background: transparent;
    outline: none;
    writing-mode: bt-lr;
    -webkit-appearance: slider-vertical;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

.waveform-slider::-webkit-slider-runnable-track {
    width: 8px;
    height: 100px;
    background: linear-gradient(to bottom,
        rgba(139, 92, 246, 0.8) 0%,
        rgba(20, 184, 166, 0.8) 50%,
        rgba(59, 130, 246, 0.8) 100%);
    border-radius: 6px;
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.3),
        0 0 8px rgba(139, 92, 246, 0.3);
}

.waveform-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(240, 240, 255, 0.95) 100%);
    border: 2px solid rgba(139, 92, 246, 0.8);
    border-radius: 50%;
    cursor: grab;
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.3),
        0 0 12px rgba(139, 92, 246, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.waveform-slider::-webkit-slider-thumb:hover {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(250, 250, 255, 1) 100%);
    border-color: rgba(139, 92, 246, 1);
    box-shadow:
        0 6px 12px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(139, 92, 246, 0.8),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transform: scale(1.15);
}

.waveform-slider::-webkit-slider-thumb:active {
    cursor: grabbing;
    background: linear-gradient(135deg,
        rgba(230, 230, 255, 1) 0%,
        rgba(220, 220, 255, 1) 100%);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.4),
        0 0 16px rgba(139, 92, 246, 0.6);
    transform: scale(1.0);
}

/* Firefox */
.waveform-slider::-moz-range-track {
    width: 8px;
    height: 100px;
    background: linear-gradient(to bottom,
        rgba(139, 92, 246, 0.8) 0%,
        rgba(20, 184, 166, 0.8) 50%,
        rgba(59, 130, 246, 0.8) 100%);
    border-radius: 6px;
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.3),
        0 0 8px rgba(139, 92, 246, 0.3);
}

.waveform-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(240, 240, 255, 0.95) 100%);
    border: 2px solid rgba(139, 92, 246, 0.8);
    border-radius: 50%;
    cursor: grab;
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.3),
        0 0 12px rgba(139, 92, 246, 0.5);
    transition: all 0.2s ease;
}

.waveform-slider::-moz-range-thumb:hover {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(250, 250, 255, 1) 100%);
    border-color: rgba(139, 92, 246, 1);
    box-shadow:
        0 6px 12px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(139, 92, 246, 0.8);
}

.waveform-slider::-moz-range-thumb:active {
    cursor: grabbing;
}

/* MS Edge/IE */
.waveform-slider::-ms-track {
    width: 8px;
    height: 100px;
    background: transparent;
    border-color: transparent;
    color: transparent;
}

.waveform-slider::-ms-fill-lower,
.waveform-slider::-ms-fill-upper {
    background: linear-gradient(to bottom,
        rgba(139, 92, 246, 0.8) 0%,
        rgba(20, 184, 166, 0.8) 50%,
        rgba(59, 130, 246, 0.8) 100%);
    border-radius: 6px;
}

.waveform-slider::-ms-thumb {
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(240, 240, 255, 0.95) 100%);
    border: 2px solid rgba(139, 92, 246, 0.8);
    border-radius: 50%;
    cursor: grab;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.slider-value {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.5),
        0 0 8px rgba(139, 92, 246, 0.6);
    min-width: 40px;
    text-align: center;
    padding: 2px 6px;
    background: linear-gradient(135deg,
        rgba(139, 92, 246, 0.3) 0%,
        rgba(20, 184, 166, 0.3) 100%);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
}

/* ========================================
   Preference Toggle Tooltips
   ======================================== */

.note-preference {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.preference-hint {
    position: absolute;
    top: 42px;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    pointer-events: none;
}

.preference-toggle {
    background: rgba(46, 61, 98, 0.92);
    color: #e8f0ff;
    border-radius: 6px;
    padding: 7px 12px;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.preference-toggle.show {
    opacity: 1;
    transform: translateY(0);
}

.preference-tip {
    background: rgba(46, 61, 98, 0.92);
    color: #e8f0ff;
    border: 1px solid rgba(232, 240, 255, 0.2);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 15px;
    font-weight: 500;
    width: max-content;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.preference-tip.show {
    opacity: 1;
    transform: translateY(0);
}

.preference-toggle.hidden,
.preference-tip.hidden {
    display: none;
}

/* Enhanced preference tooltips for sharp/flat buttons */
.preference-tooltip {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    background: rgba(30, 41, 59, 0.97);
    color: #e8f0ff;
    border: 1px solid rgba(232, 240, 255, 0.25);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    z-index: 10001;
    min-width: 160px;
    text-align: center;
    pointer-events: auto;
}

.preference-tooltip.hidden {
    display: none;
}

.preference-tooltip .tooltip-title {
    font-weight: 700;
    font-size: 14px;
    color: #fff;
    margin-bottom: 4px;
}

.preference-tooltip .tooltip-subtitle {
    font-size: 12px;
    color: rgba(232, 240, 255, 0.7);
    font-style: italic;
    margin-bottom: 8px;
}

.preference-tooltip .tooltip-example {
    font-size: 12px;
    color: rgba(232, 240, 255, 0.85);
    margin-bottom: 6px;
    letter-spacing: 0;
}

.accidental-tight {
    display: inline-block;
    margin-left: -1px;
}

.preference-tooltip .tooltip-click-hint {
    font-size: 11px;
    color: rgba(165, 180, 252, 0.9);
    margin-bottom: 8px;
    font-style: italic;
}

.preference-tooltip .tooltip-click-hint[hidden] {
    display: none;
}

.preference-tooltip .tooltip-active-confirm {
    font-size: 12px;
    color: #4ade80;
    margin-bottom: 8px;
    font-weight: 600;
}

.preference-tooltip .tooltip-active-confirm[hidden] {
    display: none;
}

.preference-tooltip .tooltip-check {
    color: #4ade80;
    font-size: 12px;
    font-weight: 700;
    margin-right: 4px;
}

.preference-tooltip .tooltip-check-label {
    font-size: 11px;
    color: rgba(232, 240, 255, 0.75);
    margin-right: 6px;
}

.preference-tooltip .tooltip-info-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 8px;
    position: relative;
}

.preference-tooltip .tooltip-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: rgba(99, 102, 241, 0.3);
    border: 1px solid rgba(99, 102, 241, 0.5);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    color: #a5b4fc;
    cursor: help;
    transition: all 0.2s ease;
}

.preference-tooltip .tooltip-info-icon:hover {
    background: rgba(99, 102, 241, 0.5);
    border-color: rgba(99, 102, 241, 0.8);
    color: #fff;
}

.preference-tooltip .tooltip-info-text {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 6px;
    background: rgba(15, 23, 42, 0.98);
    color: #e8f0ff;
    border: 1px solid rgba(99, 102, 241, 0.4);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 11px;
    font-style: normal;
    line-height: 1.4;
    width: 200px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    z-index: 10002;
}

.preference-tooltip .tooltip-info-text.hidden {
    display: none;
}

.preference-tooltip .tooltip-action {
    font-size: 11px;
    color: rgba(232, 240, 255, 0.6);
    border-top: 1px solid rgba(232, 240, 255, 0.15);
    padding-top: 8px;
    margin-top: 4px;
}

/* UI Tooltips - styled to match preference tooltips */
.ui-tooltip {
    position: fixed;
    background: rgba(46, 61, 98, 0.92);
    color: #e8f0ff;
    border: 1px solid rgba(232, 240, 255, 0.2);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 15px;
    font-weight: 500;
    max-width: 300px;
    width: max-content;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    z-index: 10000;
    text-align: center;
    line-height: 1.4;
}

.ui-tooltip--swing {
    max-width: none;
    white-space: nowrap;
}

.swing-notation {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    white-space: nowrap;
    position: relative;
    top: 2px;
    filter: drop-shadow(0 0 4px rgba(120, 170, 255, 0.35));
}

.swing-notation .swing-pair {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    height: 26px;
}

.swing-notation svg {
    width: 68px;
    height: 38px;
    display: block;
}

.swing-notation .swing-pair svg {
    width: 56px;
    height: 32px;
}

.ui-tooltip .swing-label {
    position: relative;
    top: -8px;
}

#devReloadPrompt {
    position: fixed;
    right: 16px;
    bottom: 16px;
    background: rgba(20, 26, 34, 0.95);
    border: 1px solid rgba(120, 170, 255, 0.25);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
    color: #e8f0ff;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 500;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    z-index: 10001;
}

#devReloadPrompt.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

#devReloadPrompt .dev-reload-content {
    display: grid;
    gap: 6px;
}

#devReloadPrompt .dev-reload-title {
    font-weight: 600;
    letter-spacing: 0.2px;
}

#devReloadPrompt .dev-reload-subtitle {
    color: rgba(232, 240, 255, 0.7);
}

#devReloadPrompt .dev-reload-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

#devReloadPrompt button {
    border-radius: 6px;
    border: 1px solid rgba(120, 170, 255, 0.2);
    background: rgba(46, 61, 98, 0.55);
    color: #e8f0ff;
    padding: 4px 8px;
    font-size: 12px;
    cursor: pointer;
}

#devReloadPrompt .dev-reload-cancel {
    background: rgba(46, 61, 98, 0.3);
}

.ui-tooltip .tooltip-strong {
    font-weight: 600;
}

.ui-tooltip.show {
    opacity: 1;
    transform: translateY(0);
}

/* Frequency Monitor - Minimal floating widget */
.frequency-monitor-container {
    position: fixed;
    bottom: 4.5em;
    left: 15px;
    z-index: 9999;
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    pointer-events: auto;
}

/* Bump Hz readout up when speed popup is open */
.frequency-monitor-container.speed-popup-open {
    bottom: 6.5em;
}

.frequency-monitor-detune-row {
    position: fixed;
    top: 10em;
    right: 0px;
    z-index: 10002;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 8px;
    min-width: 360px;
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.playback-control-dock .frequency-monitor-detune-row {
    position: static;
    top: auto;
    right: auto;
    margin-left: auto;
}

.frequency-monitor-detune-row.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.frequency-monitor-detune-row .frequency-monitor-btn {
    padding: 0 14px;
    min-width: 68px;
    width: auto;
    height: 36px;
}

.frequency-monitor-detune-btn {
    font-size: 14px;
}

.frequency-monitor-detune-btn.dragging {
    box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.8), 0 0 22px var(--frequency-feedback-color, rgba(0, 230, 118, 0.6)), 0 4px 12px rgba(0, 0, 0, 0.3);
}

.frequency-monitor-bend-value {
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    font-weight: 600;
    min-width: 68px;
    text-align: center;
    letter-spacing: 0.3px;
}

.frequency-monitor-mod-value {
    position: relative;
    font-size: 12px;
    font-weight: 600;
    color: #a6f0ff;
    margin-left: -2px;
}

.frequency-detune-slider {
    position: relative;
    width: 40px;
    height: 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
    flex-shrink: 0;
}
.frequency-detune-slider-fill {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, #7dd3fc, #0ea5e9);
    transition: width 0.12s ease, background 0.25s ease, box-shadow 0.25s ease;
    pointer-events: none;
}
.frequency-monitor-btn {
    width: 30px;
    height: 28px;
    background: rgba(46, 61, 98, 0.92);
    color: #e8f0ff;
    border: 1.5px solid rgba(232, 240, 255, 0.2);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0.8;
    flex-shrink: 0;
}

.frequency-monitor-btn.frequency-monitor-feedback {
    border-color: var(--frequency-feedback-color, rgba(0, 230, 118, 0.6));
    box-shadow: 0 0 calc(10px + 18px * var(--frequency-feedback-strength, 0)) var(--frequency-feedback-color, rgba(0, 230, 118, 0.6)), 0 4px 12px rgba(0, 0, 0, 0.3);
    opacity: 0.6;
}

.frequency-monitor-btn:hover,
.frequency-monitor-btn:focus-visible {
    background: rgba(56, 71, 108, 0.95);
    border-color: rgba(232, 240, 255, 0.4);
    opacity: 1;
}

.frequency-monitor-btn.active {
    background: rgba(33, 150, 243, 0.92);
    border-color: rgba(0, 230, 118, 0.6);
    box-shadow: 0 0 8px rgba(0, 230, 118, 0.3);
    opacity: 0.9;
}

.frequency-monitor-display {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(46, 61, 98, 0.98);
    color: #ffffff;
    border: 2px solid rgba(0, 230, 118, 0.4);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Courier New', monospace;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    overflow-x: auto;
    z-index: 10000;
    transition: all 0.3s ease;
}

/* Theme support */
html.theme-dark .frequency-monitor-btn {
    background: rgba(46, 61, 98, 0.92);
    color: #e8f0ff;
}

html.theme-dark .frequency-monitor-display {
    background: rgba(46, 61, 98, 0.95);
    color: #e8f0ff;
}

html[data-theme="light"] .frequency-monitor-btn,
:root:not(.theme-dark) .frequency-monitor-btn {
    background: rgba(255, 255, 255, 0.95);
    color: #2c3e50;
    border-color: rgba(44, 62, 80, 0.2);
}

html[data-theme="light"] .frequency-monitor-btn:hover,
:root:not(.theme-dark) .frequency-monitor-btn:hover {
    background: rgba(245, 247, 250, 0.98);
    border-color: rgba(44, 62, 80, 0.3);
}

html[data-theme="light"] .frequency-monitor-btn.active,
:root:not(.theme-dark) .frequency-monitor-btn.active {
    background: rgba(33, 150, 243, 0.15);
    border-color: rgba(33, 150, 243, 0.5);
    color: #1976D2;
}

html[data-theme="light"] .frequency-monitor-display,
:root:not(.theme-dark) .frequency-monitor-display {
    background: rgba(255, 255, 255, 0.98);
    color: #000000;
    border: 2px solid rgba(33, 150, 243, 0.5);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* ========================================
   Responsive Layout for Tablet/Smaller Screens
   ======================================== */

@media (max-width: 1200px) {
    /* Prevent horizontal scrollbar */
    body {
        overflow-x: hidden;
    }

    /* Ensure container doesn't cause overflow */
    .container {
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* Center parent action buttons container */
    .action-buttons {
        justify-content: center;
    }

    /* Center action buttons when they wrap */
    .action-buttons-left,
    .action-buttons-right {
        justify-content: center;
        margin-left: 0;
    }

    /* Center rhythm and sequence buttons when they wrap */
    .rhythm-buttons-group,
    .string-generator-buttons {
        justify-content: center;
    }

    /* Make speed popup buttons compact on smaller screens */
    .speed-popup {
        flex-wrap: wrap;
        max-width: 280px;
        gap: 1px;
    }

    .speed-popup .speedButton {
        padding: 3px 5px;
        font-size: 11px;
        min-width: auto;
        width: calc(20% - 1px);
        flex: 0 0 calc(20% - 1px);
        box-sizing: border-box;
    }

    /* Reduce bottom padding on speed controls to save space */
    #speedControls {
        padding: 8px 12px;
    }

    /* Ensure panels don't overflow */
    #diagramControls,
    #audioControls,
    #playbackControls {
        min-width: auto;
        max-width: 100vw;
        box-sizing: border-box;
    }

    /* Adjust diagram container to prevent overflow */
    .diagram-container {
        max-width: 100vw;
        box-sizing: border-box;
        overflow-x: hidden;
    }
}

/* Additional breakpoint for tablets and smaller screens */
@media (max-width: 900px) {
    /* Fix em-based positioning to prevent jumping when font size changes */
    .chord-indicator {
        top: 10.9rem !important; /* Use rem instead of em - won't recalculate */
    }

    .diagram-container {
        margin-top: -3.35rem !important; /* Use rem instead of em */
    }
}

/* Fix jumping at 768px specifically */
@media (max-width: 768px) {
    /* Fix floating effect button positions - 3.5rem spacing */
    .pitch-detector-btn {
        bottom: 8rem !important;
        right: 16px !important;
    }

    .balloon-mode-btn {
        bottom: 11.5rem !important;
        right: 16px !important;
    }

    .lightning-mode-btn {
        bottom: 15rem !important;
        right: 16px !important;
    }

    .flame-mode-btn {
        bottom: 18.5rem !important;
        right: 16px !important;
    }

    .keyboard-shortcuts-btn {
        bottom: 25.5rem !important;
        right: 16px !important;
    }

    .playback-actions-btn {
        bottom: 29rem !important;
        right: 16px !important;
    }

    .record-action-btn {
        bottom: 32.5rem !important;
        right: 16px !important;
    }

    .accidentals-action-btn {
        bottom: 36rem !important;
        right: 16px !important;
    }

    .capo-action-btn {
        bottom: 39.5rem !important;
        right: 16px !important;
    }

    .frets-action-btn {
        bottom: 43rem !important;
        right: 16px !important;
    }

    .tuning-action-btn {
        bottom: 46.5rem !important;
        right: 16px !important;
    }

    .caged-mode-btn {
        bottom: 22rem !important;
        right: 16px !important;
    }

    /* Reduce button sizes to prevent awkward wrapping */
    .playback-button {
        padding: 4px 8px;
        font-size: 14px;
        min-width: 65px;
    }

    /* Tighter spacing in action button rows */
    .action-buttons-left,
    .action-buttons-right {
        gap: 1px;
    }

    /* Reduce button sizes for rhythm/sequence buttons */
    .rhythm-button,
    .sequence-button {
        padding: 5px 8px;
        font-size: 13px;
        min-width: 65px;
    }
}

/* Compact speed popup at 832px and below */
@media (max-width: 832px) {
    .speed-popup .speedButton {
        padding: 3px 5px;
        font-size: 11px;
    }
}

/* Hide tempo display when it wraps at 603px */
@media (max-width: 603px) {
    .tempo-display {
        display: none;
    }
}