:root { --editor-pane-width: 45%; --bg: #0f172a; --panel: #1e293b; --accent: #3b82f6; --text: #f8fafc; --input-bg: #020617; --input-text: #94a3b8; --c-br-color: #475569; --c-tx-color: #f87171; --version-color: #94a3b8; --header-border: #334155; --local-bg: #1e1b4b; --local-border: #4338ca; --local-txt: #c084fc; }
        body.light-theme { --bg: #ffffff; --panel: #f1f5f9; --accent: #2563eb; --text: #0f172a; --input-bg: #f8fafc; --input-text: #334155; --c-br-color: #94a3b8; --c-tx-color: #dc2626; --version-color: #64748b; --header-border: #cbd5e1; --local-bg: #f3e8ff; --local-border: #c084fc; --local-txt: #6b21a8; }
        
        body { margin: 0; display: flex; height: 100vh; font-family: sans-serif; background: var(--bg); color: var(--text); overflow: hidden; }
        #sidebar { width: 320px; background: var(--panel); border-right: 1px solid #334155; transition: 0.3s; display: flex; flex-direction: column; z-index: 10; }
        #sidebar.hidden { margin-left: -320px; }
        #song-list { list-style: none; padding: 0; margin: 0; overflow-y: auto; flex-grow: 1; }
        #song-list li { padding: 5px 10px; border-bottom: 1px solid #334155; display: flex; align-items: center; cursor: pointer; }
        #song-list li.active { background: var(--accent); color: white !important; }
        
        .songs-stats {
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 6px;
    padding: 8px 10px;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    }

    .songs-stats strong {
    color: #fbbf24;
    }

    .songs-visible-info {
    color: #94a3b8;
    font-weight: 500;
    }
        
        .li-content { flex-grow: 1; padding: 10px; overflow: hidden; display: flex; flex-direction: column; gap: 2px; }
        .main-title-list { font-weight: 500; font-size: 15px; }
        .version-tag { font-size: 11px; color: var(--version-color); }
        .fav-star { padding: 10px; color: #475569; font-size: 1.3em; cursor: pointer; }
        .is-fav { color: #fbbf24 !important; }
        
        #main { flex-grow: 1; display: flex; flex-direction: column; position: relative; overflow: hidden; }
        .top-nav { padding: 10px; background: var(--bg); display: flex; gap: 10px; align-items: center; border-bottom: 1px solid #334155; }
        .meta-bar { padding: 10px; background: var(--panel); display: flex; gap: 15px; font-size: 14px; align-items: center; border-bottom: 1px solid #334155; flex-wrap: wrap; }
        
        .fs-controls-overlay { display: none; position: fixed; bottom: 20px; right: 140px; z-index: 2000; background: rgba(30, 41, 59, 0.9); backdrop-filter: blur(4px); padding: 8px 15px; border-radius: 8px; border: 1px solid #475569; align-items: center; gap: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.4); }
        .fs-active .fs-controls-overlay { display: flex; }
        .fs-exit-btn { display: none; position: fixed; top: 20px; right: 20px; z-index: 2000; background: #ef4444; padding: 10px 15px; border-radius: 8px; font-weight: bold; border: none; color: white; cursor: pointer; }
        .fs-active .fs-exit-btn { display: block; }
        .fs-active #sidebar, .fs-active .top-nav, .fs-active .meta-bar { display: none; }
        .fs-active #output { padding-top: 85px !important; }
        
        #learning-panel { display: none; background: #0369a1; padding: 12px; border-bottom: 2px solid #0284c7; }
        .learn-header { font-size: 14px; font-weight: bold; margin-bottom: 8px; color: #fff; }
        .learn-box { display: flex; gap: 10px; flex-wrap: wrap; }
        .learn-chord-card { background: #fff; color: #0f172a; padding: 6px 14px; border-radius: 6px; font-weight: bold; font-family: monospace; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.2); transition: 0.2s; -webkit-user-select: none; user-select: none; }
        .learn-chord-card:hover { transform: scale(1.05); background: #e0f2fe; }

        #chord-tooltip { display: none; position: absolute; z-index: 3000; pointer-events: none; box-shadow: 0 10px 25px rgba(0,0,0,0.5); border-radius: 4px; }

        #arrangement-panel { background: #1e1b4b; padding: 15px; border-top: 2px solid #4338ca; border-radius: 8px; margin: 10px 0; display: flex; flex-direction: column; gap: 8px; }
        .asst-btn { background: #312e81; color: #f8fafc; border: 1px solid #4338ca; padding: 4px 10px; border-radius: 4px; font-family: monospace; font-size: 14px; cursor: pointer; }
        .asst-btn:hover { background: #4338ca; }
        .sec-dom { border-color: #b45309; background: #78350f; } .sec-dom:hover { background: #b45309; }
        .modal-ch { border-color: #065f46; background: #064e3b; } .modal-ch:hover { background: #065f46; }

        .editor-container { display: flex; flex-grow: 1; height: calc(100vh - 110px); overflow: hidden; }
        #edit-wrapper { display: none; flex: 0 0 var(--editor-pane-width); width: var(--editor-pane-width); min-width: 280px; max-width: 75%; height: 100%; flex-direction: column; padding: 10px; box-sizing: border-box; background: var(--input-bg); border-right: 1px solid #334155; }
        #input { flex-grow: 1; width: 100%; min-height: 0; background: transparent; color: var(--input-text); border: none; font-family: monospace; white-space: pre-wrap; resize: none; outline: none; font-size: 16px; margin-bottom: 8px; }

        .editor-width-control {
            width: 100%;
            box-sizing: border-box;
            align-items: center;
            gap: 10px;
            background: rgba(15, 23, 42, 0.92);
            border: 1px solid #334155;
            border-radius: 10px;
            padding: 8px 10px;
            margin: 4px 0 6px 0;
        }

        .editor-width-control-label {
            min-width: 150px;
            display: flex;
            flex-direction: column;
            gap: 2px;
            color: var(--text);
            font-size: 12px;
            line-height: 1.25;
        }

        .editor-width-control-label span {
            color: #93c5fd;
            font-size: 11px;
            white-space: nowrap;
        }

        .editor-width-range {
            flex: 1;
            min-width: 120px;
            accent-color: var(--accent);
            cursor: ew-resize;
        }
        
        .editor-footer-actions { display: flex; gap: 6px; width: 100%; box-sizing: border-box; padding-top: 4px; flex-wrap: wrap; }
        .editor-footer-actions button { flex: 1 1 125px; font-size: 11px; padding: 6px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* Duże przyciski korekty akordów po imporcie PDF/WWW.
   Są w przepływie edytora, więc niczego nie zasłaniają i pokazują się tylko w trybie edycji. */
.chord-nudge-panel {
    width: 100%;
    box-sizing: border-box;
    align-items: center;
    gap: 10px;
    background: rgba(15, 23, 42, 0.92);
    border: 1px solid #334155;
    border-radius: 12px;
    padding: 8px 10px;
    margin: 6px 0 4px 0;
}

.chord-nudge-btn {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    background: var(--accent) !important;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    font-weight: 900;
    font-size: 22px;
    line-height: 1;
    box-shadow: 0 4px 8px rgba(0,0,0,0.35);
    touch-action: manipulation;
}

.chord-nudge-btn:active {
    transform: scale(0.96);
}

.chord-nudge-help {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
    color: var(--text);
    line-height: 1.25;
}

.chord-nudge-help span {
    color: var(--input-text);
    font-size: 11px;
}

.chord-nudge-help small {
    color: #93c5fd;
    font-size: 11px;
    min-height: 14px;
}

@media (max-width: 900px) {
    .chord-nudge-panel {
        padding: 10px;
        gap: 12px;
    }

    .chord-nudge-btn {
        width: 56px;
        height: 56px;
        min-width: 56px;
        font-size: 26px;
    }
}

        #output { flex: 1 1 auto; width: auto; min-width: 0; height: 100%; padding: 30px; overflow-y: auto; font-family: monospace; line-height: 1.6; background: var(--bg); box-sizing: border-box; }
        .admin-active #edit-wrapper { display: flex; }
        .admin-active #output { width: auto; }
        
        .preview-song-header { border-bottom: 2px solid var(--header-border); padding-bottom: 12px; margin-bottom: 25px; font-family: sans-serif; }
        .preview-title-row { display: flex; align-items: baseline; gap: 12px; }
        .preview-title-text { font-size: 28px; font-weight: bold; margin: 0; }
        .preview-meta-row { display: flex; gap: 20px; margin-top: 10px; font-size: 14px; }
        .meta-item { background: var(--panel); padding: 4px 10px; border-radius: 6px; }

.preview-position-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #facc15;
    color: #111827;
    border: 1px solid #fbbf24;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.fs-song-position-badge {
    display: none;
}

.fs-song-position-badge:empty {
    display: none !important;
}

body.fs-active .fs-song-position-badge {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 2100;
    display: inline-flex;
    align-items: center;
    background: rgba(250, 204, 21, 0.96);
    color: #111827;
    border: 1px solid #fde68a;
    border-radius: 999px;
    padding: 8px 13px;
    font-size: 14px;
    font-weight: 900;
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
    backdrop-filter: blur(6px);
}
        
.strumming-preview {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    letter-spacing: 2px;
    font-weight: bold;
}

.strum-arrow {
    font-size: 1.65em;
    line-height: 1;
    font-weight: 900;
    display: inline-block;
}

.strum-down {
    color: #ef4444;
}

.strum-up {
    color: #10b981;
}

.strum-split {
    color: #64748b;
    margin: 0 6px;
    font-size: 1.2em;
    font-weight: bold;
}

.strum-char {
    font-size: 1em;
}
        
        .song-content { white-space: pre-wrap; word-wrap: break-word; max-width: 100%; width: 100%; display: block; }
        
        .c-br { color: var(--c-br-color); font-weight: bold; } 
        .c-tx { color: var(--c-tx-color); font-weight: bold; cursor: help; border-bottom: 1px dashed transparent; display: inline-block; margin: 0; padding: 0; -webkit-user-select: none; user-select: none; position: relative; }
        .c-tx:hover { border-bottom-color: var(--c-tx-color); background: rgba(248, 113, 113, 0.1); }
        
        .local-zone-indicator { font-size: 11px; color: var(--local-txt); background: var(--local-bg); border-left: 3px solid var(--local-border); padding: 2px 8px; margin: 4px 0; font-family: sans-serif; max-width: fit-content; }
        .local-transpose-widget { display: none; align-items: center; gap: 6px; background: var(--local-bg); padding: 2px 8px; border-radius: 6px; font-size: 13px; }
        
        .font-controls {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 2600;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 7px;
            background: rgba(15, 23, 42, 0.9);
            border: 1px solid #475569;
            border-radius: 999px;
            box-shadow: 0 4px 14px rgba(0,0,0,0.38);
            backdrop-filter: blur(6px);
        }
        .font-controls-label {
            min-width: 72px;
            padding-left: 5px;
            color: #cbd5e1;
            font-size: 11px;
            font-weight: 700;
            text-align: center;
            white-space: nowrap;
        }
        .font-target-switch {
            align-items: center;
            gap: 4px;
        }
        .font-target-switch button {
            padding: 7px 9px;
            border: 1px solid #475569;
            border-radius: 999px;
            background: #1e293b;
            font-size: 11px;
        }
        .font-target-switch button.active {
            background: #7c3aed !important;
            border-color: #c4b5fd !important;
        }
        .font-btn {
            width: 45px;
            height: 45px;
            flex: 0 0 45px;
            border-radius: 50%;
            background: var(--accent);
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            border: none;
            font-weight: bold;
            font-size: 18px;
            cursor: pointer;
            box-shadow: 0 4px 6px rgba(0,0,0,0.3);
            touch-action: manipulation;
        }
        
        button, select { background: #334155; color: white; border: none; padding: 8px 12px; border-radius: 6px; cursor: pointer; font-weight: bold; }
        .btn-accent { background: var(--accent) !important; }
        .admin-only { display: none !important; } .admin-active .admin-only { display: flex !important; }
        .admin-flex { display: none !important; } .admin-active .admin-flex { display: block !important; }

        .cat-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 5000; justify-content: center; align-items: center; }
        .cat-modal-content { background: #1e1b4b; border: 2px solid #4338ca; padding: 20px; border-radius: 8px; width: 90%; max-width: 350px; color: white; box-shadow: 0 10px 25px rgba(0,0,0,0.5); }

        .hidden { display: none !important; }
        #print-all-favorites-area { display: none; }
        
        /* Bicie - podgląd i górny pasek */
#bicieDisp {
    color: var(--text) !important;
    font-weight: bold;
}

.strumming-preview {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    letter-spacing: 2px;
    font-weight: bold;
}

.strum-arrow {
    font-size: 1.7em;
    line-height: 1;
    font-weight: 900;
    display: inline-block;
}

.strum-down {
    color: #ef4444 !important;
}

.strum-up {
    color: #10b981 !important;
}

.strum-split {
    color: #64748b !important;
    margin: 0 6px;
    font-size: 1.2em;
    font-weight: bold;
}

.strum-char {
    color: var(--text);
    font-size: 1em;
}
        
        @media print {
            body, html { background: #fff !important; color: #000 !important; overflow: visible !important; }
            #sidebar, #main, .font-controls, .fs-controls-overlay, .fs-exit-btn, .cat-modal { display: none !important; }
            #print-all-favorites-area { display: block !important; width: 100% !important; }
            .print-page-block { page-break-before: always; page-break-inside: avoid; border-bottom: 1px dashed #cbd5e1; padding-bottom: 20px; margin-bottom: 30px; }
            .print-header-block { border-bottom: 2px solid #000; padding-bottom: 8px; margin-bottom: 20px; }
            .print-title-text { font-size: 22pt !important; margin: 0; }
            .print-meta-box { display: flex; gap: 25px; font-size: 11pt; }
.print-strumming-wrapper {
    font-weight: bold;
    letter-spacing: 2px;
}

.print-arrow-down,
.print-arrow-up {
    font-size: 18pt !important;
    line-height: 1 !important;
    font-weight: 900 !important;
}

.print-arrow-down {
    color: #dc2626 !important;
}

.print-arrow-up {
    color: #10b981 !important;
}

.print-arrow-split {
    color: #64748b !important;
    margin: 0 8px;
    font-size: 14pt !important;
    font-weight: bold;
}
        }
        
        .guitar-btn {
    background: #334155;
    color: white;
    border: 1px solid #475569;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 1.1em;
}

.guitar-btn.guitar-active {
    background: #16a34a !important;
    border-color: #22c55e !important;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25);
}
        
        #main {
    position: relative;
}

.assistant-drawer {
    position: absolute;
    top: 0;
    right: 0;
    width: 430px;
    height: 100%;
    background: #0f172a;
    border-left: 1px solid #4338ca;
    box-shadow: -12px 0 24px rgba(0,0,0,0.35);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 3000;
    display: flex;
    flex-direction: column;
}

body.assistant-open .assistant-drawer {
    transform: translateX(0);
}

.assistant-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid #334155;
    background: #1e1b4b;
    color: #fff;
    font-weight: bold;
}

.assistant-drawer-content {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

/* podczas pracy z asystentem ukrywamy podgląd pieśni */
body.assistant-open #output {
    display: none;
}

body.assistant-open #edit-wrapper {
    flex-basis: 100%;
    width: 100%;
    max-width: 100%;
}

body.assistant-open .editor-width-control {
    display: none !important;
}

/* opcjonalnie: na małych ekranach drawer pełna szerokość */
@media (max-width: 900px) {
    .assistant-drawer {
        width: 100%;
    }
}

/* --- Najbliższy repertuar + wygodniejsza praca mobilna v9.1.9 --- */
.rep-star {
    padding: 10px 6px 10px 10px;
    color: #64748b;
    font-size: 1.2em;
    cursor: pointer;
    touch-action: manipulation;
}

.is-rep {
    color: #22c55e !important;
    text-shadow: 0 0 10px rgba(34, 197, 94, 0.35);
}

.repertoire-toggle-btn.is-rep {
    background: #16a34a !important;
    color: #fff !important;
}

.repertoire-nav-btn {
    background: #0f766e !important;
    color: #fff !important;
    white-space: nowrap;
}

.repertoire-floating-nav {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 1100;
    display: none;
    gap: 10px;
    background: rgba(15, 23, 42, 0.88);
    border: 1px solid #334155;
    border-radius: 999px;
    padding: 8px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
    backdrop-filter: blur(6px);
}

body.has-song .repertoire-floating-nav {
    display: flex;
}

body.admin-active .repertoire-floating-nav {
    display: none;
}

.repertoire-floating-nav button {
    background: #0f766e;
    color: #fff;
    border-radius: 999px;
    padding: 9px 13px;
    white-space: nowrap;
}

.mobile-edit-tabs {
    display: none !important;
    gap: 8px;
    padding: 8px;
    background: var(--panel);
    border-bottom: 1px solid #334155;
}

.mobile-edit-tabs button {
    flex: 1;
    padding: 12px 10px;
    font-size: 14px;
    border: 1px solid #475569;
}

body.mobile-show-edit #mobileEditTab,
body.mobile-show-preview #mobilePreviewTab {
    background: var(--accent) !important;
}

@supports (height: 100dvh) {
    body {
        height: 100dvh;
    }
}

@media (max-width: 900px) {
    body {
        height: 100dvh;
        overflow: hidden;
    }

    #sidebar {
        width: min(88vw, 340px);
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        height: 100dvh;
        box-shadow: 14px 0 26px rgba(0,0,0,0.35);
    }

    #sidebar.hidden {
        margin-left: min(-88vw, -340px);
    }

    #main {
        width: 100%;
        min-width: 0;
    }

    .top-nav,
    .meta-bar {
        gap: 6px;
        padding: 8px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .top-nav {
        flex-wrap: nowrap;
    }

    .meta-bar {
        flex-wrap: nowrap;
        align-items: center;
    }

    .top-nav button,
    .meta-bar button,
    .meta-bar select {
        padding: 9px 10px;
        font-size: 13px;
        white-space: nowrap;
        flex: 0 0 auto;
    }

    #songTitle {
        min-width: 145px;
        max-width: 54vw;
        flex: 0 0 145px;
    }

    #bicieDisp {
        min-width: max-content;
    }

    .admin-active .mobile-edit-tabs {
        display: flex !important;
    }

    .editor-container {
        height: auto;
        flex: 1;
        min-height: 0;
    }

    body.admin-active #edit-wrapper {
        flex: 1 1 auto;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
        height: auto;
        padding: 8px;
        border-right: none;
    }

    body.admin-active.mobile-show-edit #output {
        display: none !important;
    }

    body.admin-active.mobile-show-preview #edit-wrapper {
        display: none !important;
    }

    body.admin-active.mobile-show-preview #output {
        display: block !important;
        width: 100%;
        height: auto;
        padding: 16px 12px 88px;
    }

    #input {
        font-size: 16px;
        line-height: 1.45;
    }

    .editor-footer-actions {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
    }

    .editor-footer-actions button {
        flex: 0 0 auto;
        min-width: 126px;
        padding: 10px 8px;
        font-size: 12px;
    }

    .editor-width-control {
        display: none !important;
    }

    #output {
        padding: 18px 14px 92px;
    }

    .preview-title-row,
    .preview-meta-row {
        flex-wrap: wrap;
    }

    .preview-title-text {
        font-size: 22px;
    }

    .font-controls,
    body.admin-active .font-controls {
        right: 10px;
        bottom: calc(10px + env(safe-area-inset-bottom));
        z-index: 2600;
        display: flex !important;
        max-width: calc(100vw - 20px);
        box-sizing: border-box;
    }

    body.admin-active .font-target-switch {
        display: none !important;
    }

    .font-controls-label {
        min-width: 68px;
        max-width: 86px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.admin-active.mobile-show-edit #edit-wrapper {
        padding-bottom: 72px;
    }

    /* Podczas przesuwania akordu dolny pasek ma pierwszeństwo.
       A+/A− wracają po zamknięciu wyboru akordu przyciskiem ✕. */
    body.admin-active.has-selected-preview-chord .font-controls {
        display: none !important;
    }

    /* Mobile + pełny ekran: dolny panel metronomu/repertuaru jest szeroki,
       więc A+/A− podnosimy nad niego i dajemy wyższą warstwę. */
    body.fs-active .font-controls {
        right: 10px;
        bottom: calc(96px + env(safe-area-inset-bottom));
        z-index: 2600;
    }

    body.fs-active #output {
        padding-bottom: 170px !important;
    }

    .font-btn {
        width: 42px;
        height: 42px;
        font-size: 16px;
    }

    .repertoire-floating-nav {
        left: 10px;
        right: 110px;
        bottom: 12px;
        justify-content: flex-start;
        overflow-x: auto;
        border-radius: 14px;
        padding: 6px;
    }

    .repertoire-floating-nav button {
        padding: 10px 12px;
        font-size: 13px;
    }

    .fs-controls-overlay {
        left: 10px;
        right: 10px;
        bottom: 12px;
        justify-content: center;
        flex-wrap: wrap;
    }

    .fs-exit-btn {
        top: 10px;
        right: 10px;
    }

    body.fs-active .fs-song-position-badge {
        top: 10px;
        left: 10px;
        font-size: 13px;
        padding: 8px 11px;
        max-width: calc(100vw - 130px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (min-width: 901px) {
    .mobile-edit-tabs,
    body.admin-active .mobile-edit-tabs {
        display: none !important;
    }

    body.admin-active .font-target-switch {
        display: flex !important;
    }
}

@media print {
    .repertoire-floating-nav,
    .mobile-edit-tabs {
        display: none !important;
    }
}


/* --- Repertuar: wyraźne podświetlenie bez zwiększania wysokości wiersza v9.1.15 --- */
#song-list li {
    position: relative;
    border-left: 4px solid transparent;
}

#song-list li.is-repertoire-row:not(.active) {
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.28), rgba(15, 23, 42, 0.08));
    border-left-color: #facc15;
}

#song-list li.is-repertoire-row.active {
    background: linear-gradient(90deg, #16a34a, var(--accent));
    border-left-color: #fde047;
    color: #fff !important;
}

body.light-theme #song-list li.is-repertoire-row:not(.active) {
    background: linear-gradient(90deg, rgba(187, 247, 208, 0.95), rgba(241, 245, 249, 0.95));
    border-left-color: #ca8a04;
}

.rep-star {
    position: relative;
    min-width: 34px;
    width: 34px;
    height: 34px;
    margin-right: 2px;
    padding: 0 !important;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    line-height: 1;
}

.rep-star.is-rep {
    background: #fde047 !important;
    color: #0f172a !important;
    border-color: #facc15;
    box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.22), 0 4px 10px rgba(0,0,0,0.28);
    text-shadow: none !important;
}

.rep-order-badge {
    position: absolute;
    top: -6px;
    right: -7px;
    min-width: 17px;
    height: 17px;
    padding: 0 3px;
    box-sizing: border-box;
    border-radius: 999px;
    background: #16a34a;
    color: #fff;
    border: 1px solid #bbf7d0;
    font-size: 10px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Gdyby gdzieś została stara etykieta opisowa repertuaru, ukrywamy ją, żeby nie podnosiła wierszy. */
.repertoire-title-note,
.repertoire-list-label,
.repertoire-row-label {
    display: none !important;
}

.repertoire-manager-content {
    max-width: 720px !important;
    width: 95% !important;
    max-height: 88dvh;
    display: flex;
    flex-direction: column;
}

.repertoire-manager-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 12px;
}

.repertoire-manager-header h3 {
    margin: 0;
    color: #fde047;
    font-size: 17px;
}

.repertoire-manager-header p {
    margin: 5px 0 0 0;
    color: #cbd5e1;
    font-size: 12px;
    line-height: 1.35;
}

.repertoire-manager-close {
    background: #475569 !important;
    flex: 0 0 auto;
}

.repertoire-manager-list {
    overflow-y: auto;
    border: 1px solid #334155;
    border-radius: 10px;
    background: #0f172a;
    padding: 8px;
    min-height: 120px;
}

.repertoire-manager-row {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    gap: 10px;
    align-items: center;
    background: #111827;
    border: 1px solid #334155;
    border-left: 4px solid #facc15;
    border-radius: 10px;
    padding: 8px;
    margin-bottom: 8px;
    cursor: grab;
}

.repertoire-manager-row.dragging {
    opacity: 0.55;
}

.repertoire-row-number {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: #16a34a;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
}

.repertoire-row-title {
    font-weight: 700;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.repertoire-row-actions {
    display: flex;
    gap: 6px;
}

.repertoire-row-actions button {
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
}

.repertoire-row-actions button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.repertoire-manager-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.repertoire-empty {
    padding: 18px;
    color: #94a3b8;
    text-align: center;
    font-style: italic;
}

@media (max-width: 900px) {
    .repertoire-manager-content {
        width: calc(100% - 18px) !important;
        max-height: 92dvh;
        padding: 14px !important;
    }

    .repertoire-manager-row {
        grid-template-columns: 36px 1fr;
    }

    .repertoire-row-actions {
        grid-column: 1 / -1;
        justify-content: stretch;
    }

    .repertoire-row-actions button {
        flex: 1;
        min-height: 46px;
        font-size: 16px;
    }
}

/* =========================================================
   Śpiewnik 9.2.1 — stabilizacja, alternatywne bicie i mobile
   ========================================================= */

body {
    height: 100dvh;
}

.editor-container {
    height: auto;
    min-height: 0;
}

.sidebar-mobile-close {
    display: none;
}

.save-status {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #14532d;
    color: #bbf7d0;
    border: 1px solid #166534;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.save-status[data-state="dirty"] {
    background: #7f1d1d;
    color: #fecaca;
    border-color: #dc2626;
}

.save-status[data-state="draft"] {
    background: #713f12;
    color: #fef08a;
    border-color: #ca8a04;
}

.save-status[data-state="saving"] {
    background: #1e3a8a;
    color: #bfdbfe;
    border-color: #3b82f6;
}

.editing-warning {
    display: none;
    padding: 9px 12px;
    background: #7c2d12;
    color: #ffedd5;
    border-bottom: 1px solid #ea580c;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

.editing-warning.visible {
    display: block;
}

.strum-variant-controls {
    display: none;
    align-items: center;
    gap: 4px;
    padding: 2px;
    border: 1px solid #475569;
    border-radius: 8px;
    background: #0f172a;
}

body.has-alt-strum .strum-variant-controls {
    display: inline-flex;
}

.strum-variant-controls button,
.strum-variant-btn {
    padding: 6px 9px;
    font-size: 11px;
    background: #334155;
    color: #cbd5e1;
    border: 1px solid transparent;
    white-space: nowrap;
}

.strum-variant-controls button.active,
.strum-variant-btn.active {
    background: #7c3aed !important;
    color: #fff !important;
    border-color: #c4b5fd;
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2);
}

.fs-controls-overlay .strum-variant-btn {
    display: none;
}

body.has-alt-strum.fs-active .fs-controls-overlay .strum-variant-btn {
    display: inline-flex;
}

.strumming-label {
    color: #c4b5fd;
    font-size: 11px;
    font-family: sans-serif;
    font-weight: 800;
    margin-right: 3px;
}

.youtube-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    background: #dc2626;
    color: #fff;
    border-radius: 6px;
    padding: 5px 10px;
    font-weight: 800;
    font-family: sans-serif;
    font-size: 13px;
}

.c-tx.selected-chord {
    background: #facc15 !important;
    color: #111827 !important;
    border-radius: 4px;
    outline: 2px solid #fde68a;
    outline-offset: 1px;
}

.preview-chord-nudge {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    z-index: 2500;
    display: none !important;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 24px);
    padding: 8px;
    background: rgba(15, 23, 42, 0.96);
    border: 1px solid #475569;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.45);
    backdrop-filter: blur(7px);
}

body.admin-active.has-selected-preview-chord .preview-chord-nudge {
    display: flex !important;
}

.preview-chord-nudge button {
    min-width: 54px;
    min-height: 42px;
    padding: 8px;
}

.preview-chord-nudge strong {
    min-width: 88px;
    max-width: 180px;
    color: #fde047;
    text-align: center;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preview-chord-nudge .preview-nudge-close {
    min-width: 42px;
    background: #7f1d1d;
}

.chord-nudge-btn.chord-nudge-small {
    background: #475569 !important;
    font-size: 18px;
}

@media (max-width: 900px) {
    .sidebar-mobile-close {
        position: sticky;
        top: 0;
        z-index: 30;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 44px;
        border-radius: 0;
        background: #b91c1c;
        border-bottom: 1px solid #ef4444;
    }

    .mobile-edit-tabs {
        overflow-x: auto;
    }

    .mobile-edit-tabs button {
        min-width: 112px;
    }

    .preview-chord-nudge {
        position: fixed;
        left: 8px;
        right: 8px;
        bottom: calc(8px + env(safe-area-inset-bottom));
        transform: none;
        max-width: none;
        overflow-x: auto;
        justify-content: flex-start;
    }

    .preview-chord-nudge strong {
        position: sticky;
        left: 0;
        min-width: 96px;
    }

    body.admin-active.has-selected-preview-chord.mobile-show-preview #output {
        padding-bottom: 112px !important;
    }

    .chord-nudge-panel {
        overflow-x: auto;
    }

    .chord-nudge-btn.chord-nudge-small {
        width: 46px;
        min-width: 46px;
        height: 46px;
    }
}

@media print {
    .preview-chord-nudge,
    .editing-warning,
    .save-status,
    .strum-variant-controls {
        display: none !important;
    }
}

/* Kategorie generowane bez inline HTML — odporne na apostrofy w nazwach. */
.category-filter-option,
.song-category-option {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.category-filter-option {
    color: #fff;
    font-size: 13px;
    margin-bottom: 5px;
}

.song-category-option {
    font-size: 14px;
    color: #e2e8f0;
    margin-bottom: 8px;
    background: #2e1065;
    padding: 8px;
    border-radius: 4px;
}

.category-manager-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
    padding: 5px;
    background: #2e1065;
    border-radius: 4px;
}

.category-delete-btn {
    background: #ef4444 !important;
    font-size: 11px;
    padding: 2px 8px;
    margin: 0;
}

.category-fixed-label {
    font-size: 11px;
    color: #64748b;
}


/* =========================================================
   9.2.1 — jedno przesuwanie akordów i porządek narzędzi mobile
   ========================================================= */
.mobile-admin-tools-close,
.mobile-tools-backdrop {
    display: none;
}

.preview-chord-nudge strong.nudge-error {
    color: #fca5a5;
}

.preview-chord-nudge strong.nudge-ok {
    color: #86efac;
}

@media (max-width: 900px) {
    /* W górnym pasku zostają tylko ustawienia używane podczas grania.
       Rozbudowane narzędzia admina otwierają się dopiero na żądanie. */
    .meta-bar .admin-meta-tools {
        display: none !important;
    }

    body.mobile-tools-open .meta-bar .admin-meta-tools {
        position: fixed;
        left: 8px;
        right: 8px;
        bottom: calc(8px + env(safe-area-inset-bottom));
        z-index: 5100;
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        max-height: min(76dvh, 620px);
        overflow-y: auto;
        padding: 14px;
        box-sizing: border-box;
        background: rgba(15, 23, 42, 0.98);
        border: 1px solid #475569;
        border-radius: 14px;
        box-shadow: 0 16px 42px rgba(0,0,0,.58);
        overscroll-behavior: contain;
    }

    body.mobile-tools-open .meta-bar .admin-meta-tools input[type="text"],
    body.mobile-tools-open .meta-bar .admin-meta-tools input[type="number"] {
        min-height: 38px;
        flex: 1 1 150px;
        width: auto !important;
        min-width: 130px;
        box-sizing: border-box;
    }

    .mobile-admin-tools-close {
        display: block;
        flex: 1 0 100%;
        min-height: 44px;
        margin-top: 4px;
        background: #b91c1c;
    }

    .mobile-tools-backdrop {
        position: fixed;
        inset: 0;
        z-index: 5000;
        background: rgba(2, 6, 23, .62);
    }

    body.mobile-tools-open .mobile-tools-backdrop {
        display: block;
    }

    #mobileToolsTab.active {
        background: #7c3aed !important;
        border-color: #c4b5fd !important;
    }

    /* Ostrzeżenie o równoczesnej edycji ma jedną niewysoką linię.
       Dotknięcie rozwija pełną treść. */
    .editing-warning.visible {
        display: block;
        flex: 0 0 auto;
        max-height: 36px;
        padding: 7px 10px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        cursor: pointer;
    }

    .editing-warning.visible.expanded {
        max-height: 120px;
        overflow-y: auto;
        white-space: normal;
    }

    /* Stary drugi pasek przesuwania został usunięty. */
    .chord-nudge-panel {
        display: none !important;
    }
}


/* =========================================================
   9.2.3 — osobna czcionka edytora i podglądu
   ========================================================= */
#input {
    font-size: 16px;
}

body.light-theme .font-controls {
    background: rgba(241, 245, 249, 0.94);
    border-color: #94a3b8;
}

body.light-theme .font-controls-label {
    color: #334155;
}


/* =========================================================
   9.2.4 — panel Narzędzia pozostaje otwarty przy klawiaturze mobilnej
   ========================================================= */
@media (max-width: 900px) {
    body.mobile-tools-open .meta-bar .admin-meta-tools {
        /* Stabilizuje panel podczas zmian wysokości viewportu wywołanych klawiaturą. */
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    body.mobile-tools-open .meta-bar .admin-meta-tools input,
    body.mobile-tools-open .meta-bar .admin-meta-tools select,
    body.mobile-tools-open .meta-bar .admin-meta-tools button {
        touch-action: manipulation;
    }
}


/* =========================================================
   9.2.6 — kontrolki czcionki bez kolizji z metronomem i przesuwaniem akordów
   ========================================================= */
/* W pełnym ekranie panel metronomu/repertuaru zajmuje dół ekranu.
   A+/A− przenosimy więc na prawą krawędź i ustawiamy pionowo. */
body.fs-active .font-controls {
    top: 50%;
    right: max(10px, env(safe-area-inset-right));
    bottom: auto;
    left: auto;
    transform: translateY(-50%);
    flex-direction: column;
    width: auto;
    max-width: none;
    padding: 6px;
    gap: 6px;
    border-radius: 16px;
    z-index: 2800;
}

/* W pełnym ekranie liczy się szybka zmiana rozmiaru — opis i wybór celu
   niepotrzebnie poszerzały panel i mogły zasłaniać metrum/bicie. */
body.fs-active .font-target-switch,
body.fs-active .font-controls-label {
    display: none !important;
}

body.fs-active .font-btn {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
}

@media (max-width: 900px) {
    body.fs-active .font-controls {
        top: 50%;
        right: max(6px, env(safe-area-inset-right));
        bottom: auto;
        transform: translateY(-50%);
        padding: 5px;
        gap: 5px;
        border-radius: 14px;
    }

    body.fs-active .font-btn {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }

    /* Pasek przesuwania wybranego akordu ma zawsze pierwszeństwo.
       Regulacja czcionki wraca po zamknięciu wyboru akordu. */
    body.admin-active.has-selected-preview-chord .font-controls,
    body.admin-active.has-selected-preview-chord.fs-active .font-controls {
        display: none !important;
    }
}


/* =========================================================
   9.2.7 — wspólne przesuwanie akordu w podglądzie i edytorze mobilnym
   ========================================================= */
@media (max-width: 900px) {
    /* W aktywnym trybie przesuwania pasek A+/A− nie może pozostać nad
       kontrolkami korekty — niezależnie od tego, czy akord wybrano
       w podglądzie, czy bezpośrednio w textarea. */
    body.admin-active.has-selected-preview-chord .font-controls,
    body.admin-active.mobile-show-edit.has-selected-preview-chord .font-controls,
    body.admin-active.mobile-show-preview.has-selected-preview-chord .font-controls {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.admin-active.mobile-show-edit.has-selected-preview-chord #edit-wrapper {
        padding-bottom: calc(104px + env(safe-area-inset-bottom));
    }

    body.admin-active.mobile-show-edit.has-selected-preview-chord .preview-chord-nudge {
        display: flex !important;
    }
}

/* =========================================================
   Śpiewnik 9.3.0 — biblioteka wielu repertuarów
   ========================================================= */
.repertoire-library-content {
    max-width: 1080px !important;
    width: min(96vw, 1080px) !important;
    max-height: 92dvh;
}

.repertoire-library-grid {
    display: grid;
    grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
    gap: 14px;
    min-height: 0;
    flex: 1;
}

.repertoire-library-sidebar,
.repertoire-library-detail {
    min-height: 0;
    border: 1px solid #334155;
    border-radius: 12px;
    background: #0f172a;
    padding: 10px;
}

.repertoire-library-sidebar {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.repertoire-library-detail {
    overflow-y: auto;
}

.repertoire-create-btn {
    width: 100%;
    background: #16a34a !important;
    min-height: 42px;
}

.repertoire-library-filter {
    color: #cbd5e1;
    font-size: 12px;
    padding: 2px 4px;
}

.repertoire-library-filter label {
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
}

.repertoire-set-list {
    overflow-y: auto;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.repertoire-set-card {
    width: 100%;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    border: 1px solid #334155;
    border-left: 4px solid #475569;
    background: #111827;
    padding: 10px;
}

.repertoire-set-card strong {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.repertoire-set-card span {
    color: #94a3b8;
    font-size: 11px;
    font-weight: 500;
}

.repertoire-set-card small {
    color: #cbd5e1;
    font-size: 10px;
    letter-spacing: .05em;
}

.repertoire-set-card.selected {
    border-color: #60a5fa;
    box-shadow: 0 0 0 2px rgba(59,130,246,.2);
}

.repertoire-set-card.active {
    border-left-color: #facc15;
    background: linear-gradient(90deg, rgba(22,163,74,.34), #111827 75%);
}

.repertoire-set-card.active small {
    color: #fde047;
}

.repertoire-set-card.archived {
    opacity: .72;
    filter: saturate(.65);
}

.repertoire-detail-status-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.repertoire-active-badge,
.repertoire-archive-badge,
.repertoire-song-count {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
}

.repertoire-active-badge {
    color: #14532d;
    background: #fde047;
    border: 1px solid #facc15;
}

.repertoire-archive-badge {
    color: #ffedd5;
    background: #9a3412;
    border: 1px solid #ea580c;
}

.repertoire-song-count {
    color: #bfdbfe;
    background: #1e3a8a;
    border: 1px solid #2563eb;
    margin-left: auto;
}

.repertoire-detail-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    gap: 10px;
    margin-bottom: 10px;
}

.repertoire-detail-form label {
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.repertoire-detail-form input,
.repertoire-detail-form textarea {
    width: 100%;
    box-sizing: border-box;
    background: #020617;
    color: #f8fafc;
    border: 1px solid #334155;
    border-radius: 7px;
    padding: 9px;
    font: inherit;
}

.repertoire-notes-field {
    grid-column: 1 / -1;
}

.repertoire-detail-actions {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 13px;
    padding-bottom: 12px;
    border-bottom: 1px solid #334155;
}

.repertoire-song-list-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.repertoire-song-list-header > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.repertoire-song-list-header small {
    color: #94a3b8;
    font-size: 11px;
}

.repertoire-empty.compact {
    padding: 10px;
    font-size: 12px;
}

.repertoire-manage-btn {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .repertoire-library-content {
        width: calc(100vw - 12px) !important;
        max-height: 96dvh;
        padding: 11px !important;
    }

    .repertoire-library-grid {
        grid-template-columns: 1fr;
        overflow-y: auto;
    }

    .repertoire-library-sidebar,
    .repertoire-library-detail {
        overflow: visible;
    }

    .repertoire-set-list {
        max-height: 210px;
    }

    .repertoire-detail-form {
        grid-template-columns: 1fr;
    }

    .repertoire-notes-field {
        grid-column: auto;
    }

    .repertoire-detail-actions button {
        flex: 1 1 145px;
        min-height: 44px;
    }

    .repertoire-song-list-header {
        align-items: stretch;
    }
}


/* =========================================================
   TRYB WYSTĘPU 9.4.2
   ========================================================= */
.performance-start-btn {
    background: #be123c !important;
    border: 1px solid #fb7185 !important;
    box-shadow: 0 0 0 1px rgba(251, 113, 133, .16);
}

.performance-hud,
.performance-nav-zone {
    display: none;
}

body.performance-mode {
    overflow: hidden;
    background: var(--bg);
}

body.performance-mode #sidebar,
body.performance-mode .top-nav,
body.performance-mode .meta-bar,
body.performance-mode #learning-panel,
body.performance-mode #editingWarning,
body.performance-mode .mobile-edit-tabs,
body.performance-mode .font-controls,
body.performance-mode .fs-controls-overlay,
body.performance-mode .fs-exit-btn,
body.performance-mode .fs-song-position-badge,
body.performance-mode .repertoire-floating-nav,
body.performance-mode .preview-chord-nudge,
body.performance-mode #edit-wrapper,
body.performance-mode .assistant-drawer {
    display: none !important;
}

body.performance-mode #main,
body.performance-mode .editor-container,
body.performance-mode #output {
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
}

body.performance-mode #output {
    display: block !important;
    padding: 92px 9vw 118px !important;
    overflow-y: auto;
    scroll-behavior: auto;
    overscroll-behavior-y: contain;
}

body.performance-mode .preview-song-header {
    display: none !important;
}

body.performance-mode .song-content {
    max-width: 1200px;
    margin: 0 auto;
    line-height: 1.65;
}

body.performance-mode .performance-hud {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 7000;
    pointer-events: none;
}

.performance-topbar {
    position: absolute;
    top: max(8px, env(safe-area-inset-top));
    left: 10px;
    right: 10px;
    min-height: 62px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid #475569;
    background: rgba(15, 23, 42, .94);
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .38);
    pointer-events: auto;
}

.performance-current-info {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.performance-position {
    min-width: 58px;
    padding: 8px 9px;
    border-radius: 9px;
    background: #facc15;
    color: #111827;
    font-size: 17px;
    font-weight: 900;
    text-align: center;
}

.performance-current-info > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.performance-current-info strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    font-size: 18px;
}

.performance-current-info small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #94a3b8;
    font-size: 11px;
}

.performance-next-title {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #bfdbfe;
    font-size: 12px;
    font-weight: 700;
}

.performance-exit {
    background: #dc2626 !important;
    padding: 10px 13px;
}

.performance-song-note {
    display: none;
    position: absolute;
    top: calc(max(8px, env(safe-area-inset-top)) + 72px);
    left: 50%;
    transform: translateX(-50%);
    width: min(720px, calc(100vw - 36px));
    padding: 8px 12px;
    border-radius: 9px;
    border: 1px solid #f59e0b;
    background: rgba(120, 53, 15, .94);
    color: #fef3c7;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
    pointer-events: auto;
}

.performance-song-note.visible {
    display: block;
}

.performance-dock {
    position: absolute;
    left: 50%;
    bottom: max(10px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100vw - 20px);
    padding: 9px;
    border-radius: 14px;
    border: 1px solid #475569;
    background: rgba(15, 23, 42, .95);
    backdrop-filter: blur(8px);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, .38);
    pointer-events: auto;
}

.performance-dock button {
    min-height: 44px;
    white-space: nowrap;
}

.performance-main-nav {
    background: #1d4ed8 !important;
    font-size: 14px;
}

.performance-auto-btn.active,
.performance-more-btn.active,
.performance-strum-btn.active {
    background: #16a34a !important;
}

.performance-speed {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px;
    border-radius: 8px;
    background: #111827;
}

.performance-speed button {
    min-width: 36px;
    padding: 6px 9px;
}

.performance-speed span {
    min-width: 78px;
    color: #cbd5e1;
    text-align: center;
    font-size: 11px;
}

.performance-extra-controls {
    display: none;
    position: absolute;
    left: 50%;
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + 72px);
    transform: translateX(-50%);
    max-width: calc(100vw - 24px);
    padding: 9px;
    border-radius: 12px;
    border: 1px solid #475569;
    background: rgba(15, 23, 42, .96);
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    pointer-events: auto;
}

body.performance-extra-open .performance-extra-controls {
    display: flex;
}

.performance-control-group {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 6px;
    border-radius: 8px;
    background: #111827;
}

.performance-control-group span,
.performance-wake-status {
    color: #94a3b8;
    font-size: 11px;
}

.performance-control-group strong {
    min-width: 26px;
    text-align: center;
    color: #fff;
}

body.performance-mode .performance-nav-zone {
    display: flex;
    position: fixed;
    top: 86px;
    bottom: 105px;
    z-index: 6900;
    width: min(11vw, 92px);
    padding: 0;
    border: 0;
    border-radius: 0;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: rgba(148, 163, 184, .22);
    font-size: 74px;
    font-weight: 300;
    transition: background .15s, color .15s;
}

body.performance-mode .performance-nav-zone:active,
body.performance-mode .performance-nav-zone:hover {
    background: rgba(59, 130, 246, .08);
    color: rgba(191, 219, 254, .68);
}

.performance-prev-zone { left: 0; }
.performance-next-zone { right: 0; }

.performance-settings-content {
    width: min(620px, 94vw);
    max-width: 620px;
}

.performance-settings-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.performance-settings-header h3 {
    margin: 0;
    color: #fda4af;
}

.performance-settings-header p {
    margin: 4px 0 0;
    color: #cbd5e1;
    font-size: 12px;
}

.performance-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.performance-settings-grid label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #e2e8f0;
    font-size: 13px;
    font-weight: 700;
}

.performance-settings-grid input,
.performance-settings-grid select,
.performance-settings-grid textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 9px;
    border: 1px solid #475569;
    border-radius: 7px;
    background: #0f172a;
    color: #fff;
}

.performance-settings-grid small {
    color: #94a3b8;
    font-size: 10px;
    font-weight: 400;
}

.performance-settings-note {
    grid-column: 1 / -1;
}

.performance-settings-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.repertoire-row-title {
    min-width: 0;
}

.repertoire-performance-summary {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #93c5fd;
    font-size: 10px;
    font-weight: 500;
}

@media (max-width: 900px) {
    body.performance-mode #output {
        padding: 84px 18px 116px !important;
    }

    .performance-topbar {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 7px;
        min-height: 55px;
    }

    .performance-position {
        min-width: 48px;
        padding: 7px;
        font-size: 15px;
    }

    .performance-current-info strong {
        font-size: 15px;
    }

    .performance-next-title {
        display: none;
    }

    .performance-exit {
        padding: 9px;
        font-size: 11px;
    }

    .performance-song-note {
        top: calc(max(8px, env(safe-area-inset-top)) + 64px);
        font-size: 12px;
    }

    .performance-dock {
        width: calc(100vw - 14px);
        box-sizing: border-box;
        gap: 5px;
        padding: 6px;
        overflow-x: auto;
        justify-content: flex-start;
    }

    .performance-dock button {
        min-height: 46px;
        padding: 8px 10px;
        font-size: 12px;
    }

    .performance-main-nav {
        min-width: 92px;
    }

    .performance-speed span {
        min-width: 68px;
    }

    .performance-extra-controls {
        bottom: calc(max(10px, env(safe-area-inset-bottom)) + 68px);
        width: calc(100vw - 18px);
        box-sizing: border-box;
        max-height: 35vh;
        overflow-y: auto;
    }

    body.performance-mode .performance-nav-zone {
        top: 78px;
        bottom: 102px;
        width: 42px;
        font-size: 52px;
    }

    .performance-settings-grid {
        grid-template-columns: 1fr;
    }

    .performance-settings-note {
        grid-column: auto;
    }
}


#performance-settings-modal { z-index: 9200; }
.performance-meta { color: #facc15 !important; }
body.performance-mode.has-performance-note #output { padding-top: 128px !important; }

@media (max-width: 900px) {
    .performance-topbar {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
    }
    .performance-current-info { grid-column: 1; grid-row: 1; }
    .performance-exit { grid-column: 2; grid-row: 1; }
    .performance-next-title {
        display: block;
        grid-column: 1 / -1;
        grid-row: 2;
        max-width: none;
        padding-left: 58px;
        color: #bfdbfe;
        font-size: 11px;
    }
    body.performance-mode #output { padding-top: 103px !important; }
    body.performance-mode.has-performance-note #output { padding-top: 142px !important; }
    .performance-song-note { top: calc(max(8px, env(safe-area-inset-top)) + 86px); }
}

@media (max-width: 900px) {
    .performance-dock {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-areas:
            "prev auto next"
            "speed strum more";
        width: calc(100vw - 14px);
        overflow: visible;
        gap: 5px;
    }
    .performance-dock > :nth-child(1) { grid-area: prev; }
    .performance-dock > :nth-child(2) { grid-area: auto; }
    .performance-dock > :nth-child(3) { grid-area: speed; }
    .performance-dock > :nth-child(4) { grid-area: strum; }
    .performance-dock > :nth-child(5) { grid-area: more; }
    .performance-dock > :nth-child(6) { grid-area: next; }
    .performance-dock > button,
    .performance-speed {
        width: 100%;
        box-sizing: border-box;
        min-width: 0;
    }
    .performance-speed {
        justify-content: space-between;
    }
    .performance-speed span {
        min-width: 0;
        flex: 1;
    }
    body.performance-mode #output { padding-bottom: 162px !important; }
    .performance-extra-controls {
        bottom: calc(max(10px, env(safe-area-inset-bottom)) + 118px);
    }
    body.performance-mode .performance-nav-zone {
        bottom: 148px;
    }
}


/* =========================================================
   TRYB WYSTĘPU 9.4.2 — widoczne bicie i stabilne przewijanie
   ========================================================= */
.performance-strumming-display {
    display: none;
    grid-column: 1 / -1;
    min-width: 0;
    align-items: center;
    gap: 8px;
    padding: 6px 9px;
    border-radius: 9px;
    background: rgba(2, 6, 23, .74);
    color: #e2e8f0;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: thin;
}

.performance-strumming-display.visible {
    display: flex;
}

.performance-strumming-display strong {
    flex: 0 0 auto;
    color: #facc15;
    font-family: sans-serif;
    font-size: 12px;
}

.performance-strumming-display .strumming-preview {
    flex: 0 0 auto;
    letter-spacing: 1px;
}

.performance-strumming-display .strum-arrow {
    font-size: 1.35em;
}

.performance-no-strumming {
    color: #94a3b8;
    font-size: 12px;
    font-style: italic;
}

body.performance-mode.has-performance-strumming #output {
    padding-top: 136px !important;
}

body.performance-mode.has-performance-strumming .performance-song-note {
    top: calc(max(8px, env(safe-area-inset-top)) + 116px);
}

body.performance-mode.has-performance-note.has-performance-strumming #output {
    padding-top: 174px !important;
}

@media (max-width: 900px) {
    .performance-strumming-display {
        padding: 5px 7px;
        gap: 6px;
    }

    .performance-strumming-display strong {
        font-size: 11px;
    }

    .performance-strumming-display .strum-arrow {
        font-size: 1.2em;
    }

    body.performance-mode.has-performance-strumming #output {
        padding-top: 151px !important;
    }

    body.performance-mode.has-performance-strumming .performance-song-note {
        top: calc(max(8px, env(safe-area-inset-top)) + 132px);
    }

    body.performance-mode.has-performance-note.has-performance-strumming #output {
        padding-top: 190px !important;
    }
}


/* =========================================================
   TRYB WYSTĘPU 9.4.2 — metrum i tempo metronomu
   ========================================================= */
.performance-tempo {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 5px;
    border-radius: 8px;
    background: #111827;
    white-space: nowrap;
}

.performance-tempo select {
    min-height: 36px;
    padding: 5px 7px;
    border: 1px solid #475569;
    border-radius: 6px;
    background: #0f172a;
    color: #fff;
    font-weight: 800;
}

.performance-tempo strong {
    min-width: 30px;
    color: #facc15;
    text-align: center;
    font-size: 13px;
}

.performance-tempo button {
    min-width: 34px;
    padding: 6px 8px;
}

.performance-audio-btn {
    min-width: 36px !important;
    padding: 6px !important;
}

.performance-metro-dot {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    border: 1px solid #64748b;
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 0 0 2px rgba(148, 163, 184, .08);
}

@media (min-width: 901px) {
    .performance-dock {
        flex-wrap: wrap;
        justify-content: center;
        width: min(1180px, calc(100vw - 20px));
        box-sizing: border-box;
    }
}

@media (max-width: 900px) {
    .performance-dock {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-areas:
            "prev auto next"
            "speed tempo strum"
            ". more .";
    }

    .performance-dock > :nth-child(1) { grid-area: prev; }
    .performance-dock > :nth-child(2) { grid-area: auto; }
    .performance-dock > :nth-child(3) { grid-area: next; }
    .performance-dock > :nth-child(4) { grid-area: speed; }
    .performance-dock > :nth-child(5) { grid-area: tempo; }
    .performance-dock > :nth-child(6) { grid-area: strum; }
    .performance-dock > :nth-child(7) { grid-area: more; }

    .performance-tempo {
        width: 100%;
        box-sizing: border-box;
        justify-content: center;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .performance-tempo::-webkit-scrollbar { display: none; }

    .performance-tempo .performance-audio-btn {
        display: none;
    }

    .performance-tempo select {
        min-width: 52px;
        padding: 5px 3px;
    }

    .performance-tempo button {
        min-width: 30px;
        padding: 6px 5px;
    }

    body.performance-mode #output {
        padding-bottom: 214px !important;
    }

    .performance-extra-controls {
        bottom: calc(max(10px, env(safe-area-inset-bottom)) + 170px);
    }

    body.performance-mode .performance-nav-zone {
        bottom: 200px;
    }
}


/* =========================================================
   TRYB WYSTĘPU 9.5.0 — kompaktowy topbar, Intro i pewne marginesy
   ========================================================= */
:root {
    --performance-top-safe: 100px;
    --performance-bottom-safe: 150px;
    --performance-topbar-bottom: 86px;
}

body.performance-mode #output {
    padding-top: var(--performance-top-safe) !important;
    padding-bottom: var(--performance-bottom-safe) !important;
    scroll-padding-top: var(--performance-top-safe);
    scroll-padding-bottom: var(--performance-bottom-safe);
}

.performance-topbar {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 420px) auto;
    grid-template-areas:
        "current secondary exit"
        "intro intro intro";
    min-height: 0;
    align-items: center;
    padding: 7px 9px;
    gap: 6px 10px;
}

.performance-current-info { grid-area: current; }
.performance-secondary-info {
    grid-area: secondary;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    align-items: center;
    gap: 8px;
}
.performance-exit { grid-area: exit; }
.performance-intro-display { grid-area: intro; }

.performance-secondary-info .performance-next-title {
    max-width: none;
    min-width: 0;
}

.performance-secondary-info .performance-strumming-display {
    display: none;
    min-width: 0;
    padding: 3px 7px;
    border-radius: 7px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    background: rgba(2, 6, 23, .68);
}

.performance-secondary-info .performance-strumming-display.visible {
    display: flex;
}

.performance-secondary-info .performance-strumming-display strong {
    font-size: 10px;
}

.performance-secondary-info .performance-strumming-display .strum-arrow {
    font-size: 1.05em;
}

.performance-intro-display {
    display: none;
    min-width: 0;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 8px;
    background: rgba(30, 41, 59, .82);
    color: #e2e8f0;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: thin;
}

.performance-intro-display.visible { display: flex; }
.performance-intro-display strong {
    flex: 0 0 auto;
    color: #38bdf8;
    font-size: 11px;
}
.performance-intro-display > span { display: inline-flex; gap: 6px; align-items: center; }
.performance-intro-chord {
    color: #f87171;
    font-family: monospace;
    font-weight: 900;
}
.performance-intro-separator { color: #94a3b8; }

.performance-song-note {
    top: var(--performance-topbar-bottom) !important;
}

.performance-settings-intro {
    grid-column: 1 / -1;
}

@media (max-width: 900px) {
    .performance-topbar {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "current exit"
            "secondary secondary"
            "intro intro";
        padding: 6px 8px;
        gap: 5px 7px;
    }

    .performance-current-info { gap: 8px; }
    .performance-position {
        min-width: 48px;
        padding: 7px 8px;
    }
    .performance-current-info strong { font-size: 15px; }
    .performance-current-info small { font-size: 10px; }

    .performance-secondary-info {
        grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
        gap: 6px;
        padding-left: 56px;
    }

    .performance-secondary-info .performance-next-title {
        display: block;
        padding-left: 0;
        font-size: 10px;
    }

    .performance-secondary-info .performance-strumming-display {
        padding: 2px 5px;
        gap: 4px;
    }

    .performance-secondary-info .performance-strumming-display strong { font-size: 9px; }
    .performance-secondary-info .performance-strumming-display .strum-arrow { font-size: .98em; }

    .performance-intro-display {
        padding: 4px 6px;
        gap: 5px;
    }

    .performance-dock {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-areas:
            "prev auto next"
            "tempo tempo tempo"
            "speed strum more";
    }

    .performance-dock > :nth-child(1) { grid-area: prev; }
    .performance-dock > :nth-child(2) { grid-area: auto; }
    .performance-dock > :nth-child(3) { grid-area: next; }
    .performance-dock > :nth-child(4) { grid-area: speed; }
    .performance-dock > :nth-child(5) { grid-area: tempo; }
    .performance-dock > :nth-child(6) { grid-area: strum; }
    .performance-dock > :nth-child(7) { grid-area: more; }

    .performance-tempo {
        width: 100%;
        box-sizing: border-box;
        justify-content: center;
        overflow: visible;
    }

    .performance-tempo select { min-width: 66px; }
    .performance-tempo button { min-width: 38px; }
    .performance-tempo strong { min-width: 42px; font-size: 16px; }

    .performance-strum-btn {
        grid-area: strum;
    }
}

/* Reset starszych reguł siatki po przeniesieniu bicia do bloku pomocniczego. */
.performance-secondary-info .performance-next-title {
    grid-column: auto !important;
    grid-row: auto !important;
    padding-left: 0 !important;
}
.performance-secondary-info .performance-strumming-display {
    grid-column: auto !important;
    grid-row: auto !important;
}


/* ================================================================
   HISTORIA WERSJI I KOSZ 9.5.0
   ================================================================ */
.song-history-content,
.song-trash-content {
    width: min(1180px, 96vw);
    max-width: 1180px;
    max-height: 92dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #111827;
    border-color: #4338ca;
}

.song-history-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #334155;
}
.song-history-header h3 { margin: 0; color: #c4b5fd; }
.song-history-header p { margin: 4px 0 0; color: #94a3b8; font-size: 13px; }
.song-history-header > button { background: #475569; }

.song-history-layout {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 14px;
    margin-top: 14px;
}
.song-history-sidebar,
.song-history-comparison {
    min-height: 0;
    border: 1px solid #334155;
    border-radius: 10px;
    background: #0f172a;
    overflow: hidden;
}
.song-history-sidebar { display: flex; flex-direction: column; }
.song-history-sidebar-title {
    display: flex;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid #334155;
}
.song-history-sidebar-title span {
    min-width: 28px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #4338ca;
    text-align: center;
}
.song-history-list { overflow-y: auto; padding: 8px; }
.song-history-version-row {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    margin-bottom: 7px;
    padding: 10px;
    text-align: left;
    background: #1e293b;
    border: 1px solid #334155;
}
.song-history-version-row:hover,
.song-history-version-row.selected { background: #312e81; border-color: #818cf8; }
.song-history-version-row span { color: #e2e8f0; font-size: 12px; }
.song-history-version-row small { color: #94a3b8; white-space: normal; }
.song-history-comparison { overflow-y: auto; padding: 12px; }
.song-history-empty { padding: 24px; color: #94a3b8; text-align: center; }
.history-error { color: #fca5a5; }
.song-history-comparison-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.song-history-comparison-head > div { display: flex; flex-direction: column; gap: 3px; }
.song-history-comparison-head small { color: #94a3b8; }
.song-history-field-diff {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 6px;
    margin-bottom: 10px;
}
.song-history-field-diff > div {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr;
    gap: 6px;
    align-items: center;
    padding: 7px 9px;
    border-radius: 7px;
    background: #1e293b;
    font-size: 12px;
}
.song-history-field-diff .field-changed { outline: 1px solid #f59e0b; }
.song-history-field-diff span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.song-history-diff-legend { display: flex; gap: 8px; margin: 8px 0; font-size: 11px; }
.song-history-diff-legend span { padding: 3px 8px; border-radius: 999px; }
.history-removed { background: rgba(239,68,68,.2); color: #fca5a5; }
.history-added { background: rgba(34,197,94,.2); color: #86efac; }
.song-history-diff {
    border: 1px solid #334155;
    border-radius: 8px;
    overflow: auto;
    font-family: monospace;
    font-size: 13px;
}
.song-history-diff-row {
    display: grid;
    grid-template-columns: 42px minmax(260px,1fr) 42px minmax(260px,1fr);
    min-width: 700px;
    border-bottom: 1px solid #1e293b;
}
.song-history-diff-row:last-child { border-bottom: 0; }
.song-history-diff-row pre { margin: 0; padding: 5px 8px; white-space: pre-wrap; word-break: break-word; }
.diff-line-no { padding: 5px; color: #64748b; text-align: right; background: #020617; }
.song-history-diff-row.removed .diff-old { background: rgba(127,29,29,.35); color: #fecaca; }
.song-history-diff-row.added .diff-new { background: rgba(20,83,45,.35); color: #bbf7d0; }
.song-history-actions {
    display: flex;
    gap: 8px;
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid #334155;
}
.song-trash-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 12px 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: #0f172a;
}
.song-trash-list { overflow-y: auto; min-height: 180px; }
.song-trash-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px;
    margin-bottom: 8px;
    border: 1px solid #334155;
    border-radius: 10px;
    background: #1e293b;
}
.song-trash-row > div:first-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.song-trash-row strong { color: #fff; }
.song-trash-row span { color: #cbd5e1; font-size: 12px; }
.song-trash-row small { color: #94a3b8; }
.song-trash-row > div:last-child { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 900px) {
    .song-history-content,
    .song-trash-content {
        width: 96vw;
        max-height: 96dvh;
        padding: 12px;
    }
    .song-history-layout {
        grid-template-columns: 1fr;
        overflow-y: auto;
    }
    .song-history-sidebar { min-height: 220px; max-height: 34dvh; }
    .song-history-comparison { min-height: 360px; overflow: visible; }
    .song-history-comparison-head { align-items: flex-start; flex-direction: column; }
    .song-history-comparison-head button { width: 100%; }
    .song-history-field-diff { grid-template-columns: 1fr; }
    .song-trash-row { align-items: flex-start; flex-direction: column; }
    .song-trash-row > div:last-child { width: 100%; }
    .song-trash-row > div:last-child button { flex: 1; }
    .song-history-actions { flex-wrap: wrap; }
    .song-history-actions button { flex: 1 1 180px; }
}


/* =========================================================
   9.5.1 — stały suwak szerokości edytora i podglądu na desktopie
   ========================================================= */
.desktop-editor-width-bar {
    flex: 0 0 auto;
    width: auto;
    margin: 8px 10px;
    padding: 8px 12px;
    background: rgba(15, 23, 42, 0.96);
}

.desktop-editor-width-bar .editor-width-control-label {
    min-width: 220px;
}

@media (min-width: 901px) {
    body.admin-active .desktop-editor-width-bar {
        display: flex !important;
    }
}

@media (max-width: 900px) {
    .desktop-editor-width-bar,
    body.admin-active .desktop-editor-width-bar {
        display: none !important;
    }
}


/* =========================================================
   9.6.1 — PWA, instalacja i stan pracy offline
   ========================================================= */
.pwa-install-btn {
    background: #0369a1 !important;
    border: 1px solid #38bdf8 !important;
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.15);
}

.pwa-status-pill {
    position: fixed;
    left: 12px;
    bottom: 12px;
    z-index: 3600;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: min(76vw, 320px);
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid #475569;
    background: rgba(15, 23, 42, 0.94);
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: 0 6px 18px rgba(0,0,0,.28);
    backdrop-filter: blur(8px);
    pointer-events: none;
}

.pwa-status-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: #94a3b8;
    box-shadow: 0 0 0 3px rgba(148,163,184,.15);
}

.pwa-status-pill.online .pwa-status-dot { background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.18); }
.pwa-status-pill.offline .pwa-status-dot { background:#f97316; box-shadow:0 0 0 3px rgba(249,115,22,.18); }
.pwa-status-pill.syncing .pwa-status-dot { background:#38bdf8; box-shadow:0 0 0 3px rgba(56,189,248,.18); animation:pwaPulse 1.1s infinite; }
.pwa-status-pill.cached .pwa-status-dot { background:#eab308; box-shadow:0 0 0 3px rgba(234,179,8,.18); }

@keyframes pwaPulse {
    0%,100% { opacity:.45; transform:scale(.86); }
    50% { opacity:1; transform:scale(1.12); }
}

.pwa-update-bar {
    position: fixed;
    top: max(10px, env(safe-area-inset-top));
    left: 50%;
    transform: translate(-50%, -140%);
    z-index: 8000;
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(92vw, 620px);
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #38bdf8;
    border-radius: 10px;
    background: #0c4a6e;
    color: #f0f9ff;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 12px 30px rgba(0,0,0,.42);
    transition: transform .25s ease;
}

.pwa-update-bar.visible { transform: translate(-50%, 0); }
.pwa-update-bar span { flex:1; }
.pwa-update-bar button { background:#0284c7; }
.pwa-update-bar .pwa-update-close { background:transparent; padding:5px 7px; }

.pwa-toast {
    position: fixed;
    left: 50%;
    bottom: 68px;
    z-index: 7800;
    max-width: min(88vw, 560px);
    box-sizing: border-box;
    padding: 10px 14px;
    border: 1px solid #475569;
    border-radius: 10px;
    background: rgba(15,23,42,.97);
    color: #f8fafc;
    font-size: 13px;
    font-weight: 650;
    text-align: center;
    box-shadow: 0 10px 28px rgba(0,0,0,.42);
    opacity: 0;
    transform: translate(-50%, 18px);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}

.pwa-toast.visible { opacity:1; transform:translate(-50%, 0); }
.pwa-toast[data-state="success"] { border-color:#22c55e; }
.pwa-toast[data-state="warning"] { border-color:#f97316; }
.pwa-toast[data-state="error"] { border-color:#ef4444; }

body.performance-mode .pwa-status-pill,
body.performance-mode .pwa-update-bar,
body.performance-mode .pwa-toast,
.fs-active .pwa-status-pill {
    display: none !important;
}

@media (max-width: 900px) {
    .pwa-status-pill {
        left: 8px;
        bottom: calc(8px + env(safe-area-inset-bottom));
        max-width: 72vw;
        padding: 6px 9px;
        font-size: 10px;
    }
    .pwa-toast {
        bottom: calc(54px + env(safe-area-inset-bottom));
        font-size: 12px;
    }
    .pwa-update-bar {
        align-items: stretch;
        flex-wrap: wrap;
    }
    .pwa-update-bar span { flex:1 1 100%; }
    .pwa-update-bar button:not(.pwa-update-close) { flex:1; }
}


/* ================================================================
   MASTER + PEŁNY TEKST — rozwój od 9.7.1
   ================================================================ */
.master-mode-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #334155;
    border: 1px solid #475569;
    white-space: nowrap;
}

.master-mode-btn.active {
    background: #15803d !important;
    border-color: #4ade80;
    box-shadow: 0 0 0 2px rgba(74, 222, 128, .2);
}

.master-mode-btn.remote {
    background: #a16207 !important;
    border-color: #facc15;
}

.master-viewer-count {
    min-width: 21px;
    height: 21px;
    padding: 0 5px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, .7);
    color: #fff;
    font-size: 11px;
    line-height: 1;
}

.full-lyrics-content {
    width: min(920px, 94vw);
    max-width: 920px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.full-lyrics-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
}

.full-lyrics-header h3 { margin: 0; color: #7dd3fc; }
.full-lyrics-header p { margin: 5px 0 0; color: #cbd5e1; }
.full-lyrics-help {
    padding: 10px 12px;
    border: 1px solid #334155;
    border-radius: 8px;
    background: #0f172a;
    color: #cbd5e1;
    font-size: 13px;
    line-height: 1.45;
}
.full-lyrics-toolbar,
.full-lyrics-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
#full-lyrics-input {
    width: 100%;
    min-height: 330px;
    flex: 1 1 330px;
    box-sizing: border-box;
    resize: vertical;
    background: #020617;
    color: #f8fafc;
    border: 1px solid #475569;
    border-radius: 10px;
    padding: 16px;
    font: 17px/1.55 sans-serif;
}
.full-lyrics-status-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #93c5fd;
    font-size: 12px;
}
.full-lyrics-status-row small { color: #94a3b8; text-align: right; }

@media (max-width: 900px) {
    .master-mode-btn { padding: 8px 9px; }
    .full-lyrics-content { width: 96vw; height: 94vh; max-height: 94vh; padding: 14px; }
    #full-lyrics-input { min-height: 45vh; font-size: 16px; }
    .full-lyrics-status-row { flex-direction: column; }
    .full-lyrics-status-row small { text-align: left; }
}

.schola-page-link {
    display: inline-flex;
    align-items: center;
    margin-top: 7px;
    padding: 6px 9px;
    border-radius: 7px;
    background: #0369a1;
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
}
.schola-page-link:hover { background: #0284c7; }


/* ================================================================
   9.8.4 — lokalny serwer LAN i ręcznie zapisywany stan aktywny XR18
   ================================================================ */
.pwa-status-pill.lan-only .pwa-status-dot { background:#a855f7; box-shadow:0 0 0 3px rgba(168,85,247,.2); }
.lan-status-btn { background:#334155 !important; border:1px solid #64748b !important; white-space:nowrap; }
.lan-status-btn.active { background:#5b21b6 !important; border-color:#a78bfa !important; }
.lan-status-btn.offline { opacity:.72; }
.xr18-panel-btn { background:#334155 !important; border:1px solid #64748b !important; white-space:nowrap; }
.xr18-panel-btn.connected { background:#166534 !important; border-color:#22c55e !important; }
.xr18-panel-btn.disconnected { background:#7f1d1d !important; }
.xr18-panel-btn:disabled { opacity:.55; cursor:not-allowed; }
.lan-mixer-modal-content { width:min(96vw,1120px) !important; max-width:1120px !important; max-height:94vh; overflow:auto; box-sizing:border-box; background:#111827 !important; border-color:#475569 !important; }
.lan-mixer-header { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; border-bottom:1px solid #334155; padding-bottom:12px; margin-bottom:14px; }
.lan-mixer-header h3 { margin:0; color:#c4b5fd; font-size:20px; }
.lan-mixer-header p { margin:6px 0 0; color:#94a3b8; font-size:13px; }
.lan-modal-close { background:#475569 !important; }
.lan-server-section,.xr18-section { border:1px solid #334155; border-radius:12px; padding:14px; margin-bottom:14px; background:#0f172a; }
.lan-section-title { display:flex; justify-content:space-between; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:10px; }
.lan-server-badge,.xr18-status-badge { display:inline-flex; padding:6px 10px; border-radius:999px; font-size:12px; border:1px solid #475569; }
.lan-server-badge.online,.xr18-status-badge.online { background:#14532d; border-color:#22c55e; color:#dcfce7; }
.lan-server-badge.offline,.xr18-status-badge.offline { background:#450a0a; border-color:#ef4444; color:#fee2e2; }
.lan-server-details { color:#cbd5e1; font-size:13px; line-height:1.5; }
.lan-address-actions,.xr18-group-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.lan-address-actions a { display:inline-flex; align-items:center; padding:8px 12px; border-radius:6px; background:#0369a1; color:#fff; font-weight:bold; text-decoration:none; }
.xr18-config-row { display:flex; gap:10px; align-items:end; flex-wrap:wrap; }
.xr18-config-row label { display:flex; flex-direction:column; gap:4px; color:#94a3b8; font-size:12px; }
.xr18-config-row input { background:#020617; color:#fff; border:1px solid #475569; border-radius:6px; padding:9px 10px; min-width:150px; }
.xr18-config-row input[type="number"] { min-width:90px; width:100px; }
.xr18-save-btn { background:#166534 !important; }
.xr18-safety-note { margin:12px 0; padding:9px 11px; border-left:4px solid #f59e0b; background:#451a03; color:#fde68a; font-size:12px; }
.xr18-restore-status { margin:-4px 0 12px; padding:9px 11px; border:1px solid #475569; border-radius:8px; background:#111827; color:#94a3b8; font-size:12px; line-height:1.45; }
.xr18-restore-status.ready { background:#052e16; border-color:#22c55e; color:#bbf7d0; }
.xr18-active-state-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:12px 0; padding:12px; border:1px solid #2563eb; border-radius:10px; background:#0c1f3f; }
.xr18-active-state-actions span { flex:1 1 240px; color:#bfdbfe; font-size:12px; line-height:1.4; }
.xr18-active-state-save-btn { min-height:50px; background:#1d4ed8 !important; border:2px solid #60a5fa !important; color:#fff !important; font-size:14px; font-weight:900 !important; }
.xr18-active-state-save-btn:disabled { background:#475569 !important; border-color:#64748b !important; color:#cbd5e1 !important; opacity:.55; cursor:not-allowed; }
.xr18-channel-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin-top:12px; }
.xr18-channel { min-height:82px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:3px; text-align:left; border:2px solid #475569 !important; }
.xr18-channel-number { font-size:11px; opacity:.75; }
.xr18-channel strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.xr18-channel small { font-size:10px; }
.xr18-channel.on { background:#166534 !important; border-color:#22c55e !important; }
.xr18-channel.muted { background:#7f1d1d !important; border-color:#ef4444 !important; }
.xr18-channel.unknown { background:#334155 !important; }
@media (max-width:900px) {
  .xr18-channel-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lan-mixer-modal-content { width:100vw !important; max-height:100vh; min-height:100vh; border-radius:0 !important; }
  .xr18-config-row label { flex:1 1 140px; }
  .xr18-config-row input { min-width:0; width:100%; box-sizing:border-box; }
}


/* 9.8.4 — szybkie wyciszenie i przywracanie zapisanego stanu aktywnego XR18 */
.xr18-quick-controls { display:inline-flex; gap:5px; align-items:center; flex:0 0 auto; }
.xr18-mute-all-btn, .xr18-unmute-all-btn { font-weight:900 !important; border:2px solid transparent !important; white-space:nowrap; }
.xr18-mute-all-btn { background:#b91c1c !important; border-color:#f87171 !important; color:#fff !important; }
.xr18-unmute-all-btn { background:#15803d !important; border-color:#4ade80 !important; color:#fff !important; }
.xr18-mute-all-btn:disabled, .xr18-unmute-all-btn:disabled { background:#475569 !important; border-color:#64748b !important; color:#cbd5e1 !important; opacity:.55; cursor:not-allowed; }
.xr18-all-actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:12px 0; }
.xr18-all-actions button { min-height:58px; font-size:15px; }
.performance-xr18-all { display:inline-flex; gap:6px; }
.performance-xr18-all button { min-height:44px; }
@media(max-width:900px){
  .xr18-quick-controls button { padding:9px 10px; font-size:12px; }
  .xr18-all-actions { grid-template-columns:1fr; }
  .performance-xr18-all { width:100%; display:grid; grid-template-columns:1fr 1fr; }
}


/* =========================================================
   9.8.7 — uporządkowany i kompaktowy widok desktopowy
   ========================================================= */
@media (min-width: 901px) {
    #sidebar { width: 270px; }
    #sidebar.hidden { margin-left: -270px; }
    #sidebar > div { padding: 10px !important; gap: 7px !important; }
    #sidebar #search { padding: 7px 8px !important; }
    #song-list li { padding: 3px 7px; }
    .li-content { padding: 7px 6px; }
    .main-title-list { font-size: 13px; }
    .fav-star { padding: 7px; font-size: 1.08em; }
    .songs-stats { padding: 6px 8px; font-size: 11px; }

    .desktop-command-center { display: block; padding: 5px 7px; background: var(--bg); border-bottom: 1px solid #334155; }
    .desktop-toolbar-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
    .desktop-toolbar-primary { margin-bottom: 5px; }
    .desktop-toolbar-secondary { overflow-x: auto; overflow-y: hidden; padding-bottom: 2px; scrollbar-width: thin; }
    .toolbar-group, .toolbar-section, .rhythm-toolbar { display: flex; align-items: center; gap: 5px; min-width: 0; }
    .toolbar-song-group { flex: 1 1 auto; }
    .toolbar-primary-actions { flex: 0 0 auto; }
    .toolbar-section { flex: 0 0 auto; padding: 3px 5px; border: 1px solid #334155; border-radius: 8px; background: rgba(30, 41, 59, 0.58); }
    .toolbar-section-label { color: #94a3b8; font-size: 9px; font-weight: 900; letter-spacing: .06em; white-space: nowrap; }
    .desktop-song-title { flex: 1 1 260px; min-width: 180px; height: 30px; padding: 0 5px; background: transparent; border: none; color: var(--text); font-size: 15px; font-weight: 800; outline: none; }
    .desktop-command-center button, .compact-meta-bar button, .desktop-editor-commandbar button { min-height: 29px; padding: 5px 8px; border-radius: 6px; font-size: 10.5px; line-height: 1; white-space: nowrap; }
    .toolbar-icon-btn { min-width: 30px; padding: 4px 7px !important; }
    .lock-compact { font-size: 15px !important; background: transparent !important; }
    .compact-arrow { min-width: 31px; font-size: 14px !important; padding: 4px !important; }
    .transpose-compact { display: inline-flex; align-items: center; gap: 3px; padding: 2px 3px; border: 1px solid #334155; border-radius: 7px; }
    .transpose-compact span { min-width: 23px; text-align: center; font-size: 11px; }
    .transpose-compact button { min-width: 27px; padding: 4px !important; }
    .local-transpose-widget { padding: 2px 5px; font-size: 10px; }
    .local-transpose-widget button { min-width: 26px; padding: 3px !important; }
    #toggleRepertoireBtn { max-width: 126px; overflow: hidden; text-overflow: ellipsis; }
    #masterModeBtn { max-width: 155px; }
    #xr18MuteAllTopBtn, #xr18UnmuteAllTopBtn { min-width: 76px; }

    .compact-meta-bar { display: block; padding: 5px 7px; background: var(--panel); border-bottom: 1px solid #334155; }
    .rhythm-toolbar { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
    .metro-dot-compact { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; border: 1px solid #334155; }
    .compact-field, .admin-compact-field { display: inline-flex; align-items: center; gap: 4px; color: #cbd5e1; font-size: 10px; font-weight: 800; white-space: nowrap; }
    .compact-field input, .compact-field select, .admin-compact-field input { height: 29px; box-sizing: border-box; padding: 4px 6px; background: #0f172a; color: #fff; border: 1px solid #334155; border-radius: 5px; font-size: 11px; }
    #tempo { width: 44px; text-align: center; }
    #metrum { width: 63px; }
    #capo { width: 39px; }
    .bicie-compact { min-width: max-content; font-size: 11px; }
    .strum-variant-controls { gap: 3px; }
    .compact-admin-meta-tools { width: 100%; margin-top: 5px; padding-top: 5px; border-top: 1px solid #334155; gap: 5px !important; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
    .compact-admin-meta-tools .admin-compact-field input { width: 126px; }
    .compact-admin-meta-tools .admin-yt-field input { width: 88px; }
    .compact-admin-meta-tools .save-status { font-size: 10px; }

    .desktop-editor-commandbar { display: flex !important; align-items: center; flex-wrap: nowrap; gap: 7px; margin: 5px 7px; padding: 5px 7px; min-height: 36px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
    .desktop-editor-commandbar .editor-width-control-label { min-width: 135px; line-height: 1.1; }
    .desktop-editor-commandbar .editor-width-control-label strong { font-size: 10.5px; }
    .desktop-editor-commandbar .editor-width-control-label span { font-size: 9px; }
    .desktop-editor-commandbar .editor-width-range { flex: 1 1 210px; min-width: 130px; max-width: 330px; }
    .segmented-toggle { display: inline-flex; align-items: center; padding: 2px; border: 1px solid #475569; border-radius: 7px; background: #0f172a; }
    .segmented-toggle button { background: transparent; color: #94a3b8; }
    .segmented-toggle button.active { background: var(--accent); color: #fff; }
    .editor-command-btn.active { background: #2563eb !important; box-shadow: 0 0 0 1px #60a5fa; }
    .desktop-editor-actions { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
    .desktop-editor-actions button { min-width: 0; padding: 5px 7px; }
    .mobile-editor-actions { display: none !important; }

    .editor-container { height: auto; flex: 1; min-height: 0; }
    #edit-wrapper { padding: 7px; }
    #output { padding: 17px 17px 68px; }
    .preview-song-header { margin-bottom: 15px; padding-bottom: 9px; }
    .preview-title-text { font-size: 23px; }
    .preview-meta-row { gap: 8px; margin-top: 7px; font-size: 11px; }
    .meta-item { padding: 3px 7px; }

    .font-controls { right: 12px; bottom: 12px; gap: 5px; padding: 6px; background: rgba(15,23,42,.92); border: 1px solid #334155; border-radius: 14px; backdrop-filter: blur(6px); }
    .font-controls-label { min-width: 68px; font-size: 10px; }
    .font-target-switch { gap: 2px; }
    .font-target-switch button { padding: 5px 7px; font-size: 9px; }
    .font-btn { width: 38px; height: 38px; font-size: 14px; }

    .preview-chord-nudge { position: fixed; }
    body.admin-active.has-selected-preview-chord .preview-chord-nudge { display: none !important; }
    body.admin-active.nudge-panel-enabled .preview-chord-nudge { display: flex !important; }
    body.line-layout-fit #input, body.line-layout-fit .song-content { white-space: pre !important; overflow-wrap: normal !important; word-break: normal !important; }
}

@media (max-width: 900px) {
    .desktop-editor-actions { display: none !important; }
    .mobile-editor-actions { display: flex; }
}

/* Zachowanie istniejącego interfejsu mobilnego po podziale desktopowego paska na sekcje. */
@media (max-width: 900px) {
    .desktop-command-center {
        display: block;
        padding: 0;
        overflow: visible;
    }
    .desktop-toolbar-primary,
    .desktop-toolbar-secondary {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 7px 8px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
    }
    .desktop-toolbar-primary { border-bottom: 1px solid #334155; }
    .toolbar-song-group,
    .toolbar-primary-actions,
    .toolbar-section {
        display: flex;
        align-items: center;
        gap: 5px;
        flex: 0 0 auto;
    }
    .toolbar-section-label { display: none; }
    .desktop-song-title {
        min-width: 145px;
        max-width: 54vw;
        flex: 0 0 145px;
        height: 36px;
        background: transparent;
        border: none;
        color: var(--text);
        font-weight: 800;
    }
    .transpose-compact { display: inline-flex; align-items: center; gap: 3px; }
    .compact-meta-bar { display: block; padding: 0; overflow: visible; }
    .rhythm-toolbar {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 7px 8px;
        overflow-x: auto;
        overflow-y: hidden;
    }
    .compact-field { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
    .compact-field input,
    .compact-field select { height: 36px; background:#0f172a; color:#fff; border:1px solid #334155; }
}


/* 9.8.7 — korekty paska tytułowego i ręcznego panelu przesuwania akordów */
@media (min-width: 901px) {
    .toolbar-primary-actions {
        display: flex;
        align-items: center;
        gap: 5px;
        flex-wrap: nowrap;
    }
    .toolbar-view-primary {
        margin-left: 2px;
        padding: 2px 4px;
        border-color: #334155;
        background: rgba(30,41,59,.72);
    }
    .toolbar-view-primary .toolbar-section-label { display: none; }
}
body.admin-active.nudge-panel-enabled #previewChordNudge { display: flex !important; }
body.admin-active:not(.nudge-panel-enabled) #previewChordNudge { display: none !important; }


/* =========================================================
   9.8.10 — jasny motyw + pływające Zawijaj/Dopasuj
   ========================================================= */
@media (min-width: 901px) {
    body:not(.admin-active) .desktop-editor-commandbar { display: none !important; }
    body.admin-active .desktop-editor-commandbar { display: flex !important; }
    .floating-line-layout-toggle { display:inline-flex; flex:0 0 auto; padding:2px; border:1px solid #475569; border-radius:9px; background:#0f172a; }
    .floating-line-layout-toggle button { min-height:32px; padding:6px 9px; border-radius:7px; background:transparent; color:#94a3b8; font-size:10px; }
    .floating-line-layout-toggle button.active { background:var(--accent); color:#fff; }
    .font-controls { max-width:min(520px, calc(100vw - 290px)); flex-wrap:wrap; justify-content:flex-end; }
}
body.light-theme #sidebar { background:#e8eef5; border-right-color:#cbd5e1; }
body.light-theme #sidebar > div, body.light-theme .desktop-command-center, body.light-theme .compact-meta-bar { background:#f8fafc; border-color:#cbd5e1; }
body.light-theme #song-list li { background:#f8fafc; color:#0f172a; border-bottom-color:#cbd5e1; }
body.light-theme #song-list li:hover:not(.active) { background:#e2e8f0; }
body.light-theme #song-list li.active { background:#2563eb; color:#fff; }
body.light-theme #song-list li.is-repertoire-row:not(.active) { background:#ecfdf5; color:#134e4a; }
body.light-theme .songs-stats { background:#e2e8f0; border-color:#cbd5e1; color:#334155; }
body.light-theme #search { background:#fff !important; color:#0f172a !important; border-color:#94a3b8 !important; }
body.light-theme .toolbar-section { background:#e7edf4; border-color:#cbd5e1; }
body.light-theme .toolbar-section-label, body.light-theme .compact-field, body.light-theme .admin-compact-field { color:#475569; }
body.light-theme .transpose-compact, body.light-theme .local-transpose-widget { background:#edf2f7; border-color:#cbd5e1; }
body.light-theme .compact-field input, body.light-theme .compact-field select, body.light-theme .admin-compact-field input { background:#fff; color:#0f172a; border-color:#94a3b8; }
body.light-theme .desktop-editor-commandbar { background:rgba(241,245,249,.98); border-color:#cbd5e1; box-shadow:0 3px 12px rgba(15,23,42,.08); }
body.light-theme .desktop-editor-commandbar .editor-width-control-label, body.light-theme .desktop-editor-commandbar .editor-width-control-label strong { color:#334155; }
body.light-theme .desktop-editor-commandbar .editor-width-control-label span { color:#2563eb; }
body.light-theme .segmented-toggle, body.light-theme .floating-line-layout-toggle, body.light-theme .font-target-switch { background:#e2e8f0; border-color:#94a3b8; }
body.light-theme .segmented-toggle button, body.light-theme .floating-line-layout-toggle button, body.light-theme .font-target-switch button { color:#475569; }
body.light-theme .segmented-toggle button.active, body.light-theme .floating-line-layout-toggle button.active, body.light-theme .font-target-switch button.active { color:#fff; }
body.light-theme #edit-wrapper { background:#f8fafc; border-right-color:#cbd5e1; }
body.light-theme #input { color:#334155; }
body.light-theme #output { background:#fff; }
body.light-theme .preview-meta-row .meta-item { background:#eef2f7; color:#334155; border:1px solid #d7e0ea; }
body.light-theme .font-controls { background:rgba(248,250,252,.96); border-color:#94a3b8; box-shadow:0 8px 24px rgba(15,23,42,.16); }
@media (max-width:900px) { .floating-line-layout-toggle { display:none; } }


/* =========================================================
   9.8.11 — panel „Więcej” nad dokiem + jaśniejszy motyw
   ========================================================= */
:root {
    --performance-dock-clearance: 96px;
}

/* Panel dodatkowych narzędzi ma być zawsze NAD rzeczywistą wysokością
   dolnego doku, także gdy dok układa się w dwa wiersze. */
.performance-extra-controls {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: var(--performance-dock-clearance) !important;
    transform: translateX(-50%) !important;
    z-index: 7150 !important;
    width: min(920px, calc(100vw - 20px));
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - var(--performance-top-safe, 92px) - var(--performance-dock-clearance) - 18px) !important;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .48);
}
body.performance-extra-open .performance-extra-controls {
    display: flex !important;
}

/* Jasny motyw: neutralne przyciski nie wyglądają jak elementy z ciemnego motywu. */
body.light-theme button,
body.light-theme select {
    background: #e5eef7;
    color: #20364a;
    border-color: #b8c8d8;
    box-shadow: none;
}
body.light-theme button:hover:not(:disabled),
body.light-theme select:hover:not(:disabled) {
    background: #d8e8f7;
    border-color: #8fb2d2;
}
body.light-theme button:active:not(:disabled) {
    background: #c9def2;
}
body.light-theme button:disabled,
body.light-theme select:disabled {
    background: #edf2f7 !important;
    color: #94a3b8 !important;
    border-color: #cbd5e1 !important;
    opacity: .78;
}

/* Kolorowe funkcje i stany nadal zachowują swoje znaczenie. */
body.light-theme .btn-accent,
body.light-theme .performance-start-btn,
body.light-theme .repertoire-nav-btn,
body.light-theme .repertoire-toggle-btn.is-rep,
body.light-theme .master-mode-btn.active,
body.light-theme .master-mode-btn.remote,
body.light-theme .lan-status-btn.active,
body.light-theme .xr18-panel-btn.connected,
body.light-theme .xr18-panel-btn.disconnected,
body.light-theme .xr18-mute-all-btn:not(:disabled),
body.light-theme .xr18-unmute-all-btn:not(:disabled),
body.light-theme .save-status,
body.light-theme .compact-tool-btn.active,
body.light-theme .segmented-toggle button.active,
body.light-theme .floating-line-layout-toggle button.active,
body.light-theme .font-target-switch button.active {
    color: #fff;
}
body.light-theme .lan-status-btn.offline,
body.light-theme .xr18-panel-btn:disabled,
body.light-theme .xr18-mute-all-btn:disabled,
body.light-theme .xr18-unmute-all-btn:disabled {
    background: #e8eef5 !important;
    color: #718399 !important;
    border-color: #c6d2df !important;
    opacity: .86;
}

/* Sekcje pasków zamiast szarego „betonu” dostają delikatny błękit. */
body.light-theme .toolbar-section,
body.light-theme .transpose-compact,
body.light-theme .local-transpose-widget,
body.light-theme .segmented-toggle,
body.light-theme .floating-line-layout-toggle,
body.light-theme .font-target-switch {
    background: #edf4fa;
    border-color: #c2d1df;
}
body.light-theme .toolbar-view-primary {
    background: #f2f7fb;
    border-color: #cbd8e4;
}
body.light-theme .toolbar-section-label {
    color: #60778d;
}

/* Lista pieśni — jasne ikonki repertuaru i ulubionych. */
body.light-theme #song-list .rep-star,
body.light-theme #song-list .fav-star {
    background: #e5eef7 !important;
    border: 1px solid #c4d2df !important;
    color: #6f8498 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
body.light-theme #song-list .rep-star:hover,
body.light-theme #song-list .fav-star:hover {
    background: #d7e7f5 !important;
    border-color: #9fbad2 !important;
}
body.light-theme #song-list .rep-star.is-rep {
    background: #fde68a !important;
    color: #7c4a03 !important;
    border-color: #eab308 !important;
    box-shadow: 0 0 0 2px rgba(234, 179, 8, .18) !important;
}
body.light-theme #song-list .fav-star.is-fav {
    background: #fff4c2 !important;
    color: #b7791f !important;
    border-color: #f2c94c !important;
}
body.light-theme #song-list li.active .rep-star:not(.is-rep),
body.light-theme #song-list li.active .fav-star:not(.is-fav) {
    background: rgba(255,255,255,.18) !important;
    color: #dbeafe !important;
    border-color: rgba(255,255,255,.34) !important;
}

/* Jasny dolny panel występu, gdy aplikacja pracuje w jasnym motywie. */
body.light-theme.performance-mode .performance-extra-controls {
    background: rgba(248,250,252,.98);
    border-color: #aebfce;
    box-shadow: 0 14px 36px rgba(15,23,42,.22);
}
body.light-theme.performance-mode .performance-control-group {
    background: #e8f0f7;
    border: 1px solid #c5d3df;
}
body.light-theme.performance-mode .performance-control-group span,
body.light-theme.performance-mode .performance-wake-status {
    color: #526b82;
}
body.light-theme.performance-mode .performance-control-group strong {
    color: #172b3d;
}


/* XR18 Main L/R — 9.8.16 */
.xr18-restore-status.muted { background:#450a0a; border-color:#ef4444; color:#fecaca; }
.xr18-channel-tools-title { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin:18px 0 8px; padding-top:14px; border-top:1px solid #334155; }
.xr18-channel-tools-title span { color:#94a3b8; font-size:12px; }
body.light-theme .xr18-restore-status.muted { background:#fee2e2; border-color:#ef4444; color:#991b1b; }
body.light-theme .xr18-channel-tools-title { border-top-color:#cbd5e1; }
body.light-theme .xr18-channel-tools-title span { color:#475569; }


/* =========================================================
   TRYB WYSTĘPU 9.8.16 — zwijany dok w prawym dolnym rogu
   ========================================================= */
body.performance-mode #output {
    padding-bottom: var(--performance-bottom-safe, 22px) !important;
}

body.performance-mode .performance-dock {
    position: fixed !important;
    left: auto !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    transform: none !important;
    width: min(760px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 7px !important;
    padding: 8px !important;
    box-sizing: border-box;
    border-radius: 14px;
    z-index: 7140;
    max-height: min(72dvh, 560px);
    overflow: auto !important;
    overscroll-behavior: contain;
}

body.performance-mode.performance-dock-collapsed .performance-dock {
    display: none !important;
}

.performance-dock-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 30px;
    padding: 0 2px 4px;
    border-bottom: 1px solid rgba(148, 163, 184, .25);
    color: #e2e8f0;
    font-size: 12px;
}

.performance-dock-hide {
    min-height: 30px !important;
    padding: 5px 9px !important;
    background: #334155 !important;
    font-size: 11px !important;
}

.performance-dock-main {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
}

.performance-dock-main > button,
.performance-dock-main .performance-speed,
.performance-dock-main .performance-tempo,
.performance-dock-main .performance-xr18-all {
    flex: 0 0 auto;
}

body.performance-mode .performance-dock button {
    min-height: 38px;
    padding: 7px 10px;
    font-size: 12px;
}

body.performance-mode #performanceExtraControls {
    position: static !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    padding: 7px 0 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(148, 163, 184, .25) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    justify-content: flex-end;
    gap: 6px;
}

body.performance-mode:not(.performance-extra-open) #performanceExtraControls {
    display: none !important;
}

body.performance-mode.performance-extra-open #performanceExtraControls {
    display: flex !important;
}

.performance-dock-launcher {
    display: none;
    position: fixed;
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 7145;
    min-height: 44px;
    padding: 9px 13px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .96) !important;
    border: 1px solid #64748b !important;
    color: #f8fafc !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.38);
    pointer-events: auto;
}

body.performance-mode.performance-dock-collapsed .performance-dock-launcher {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.performance-mode .performance-nav-zone {
    bottom: 18px !important;
}

body.light-theme.performance-mode .performance-dock,
body.light-theme.performance-mode .performance-dock-launcher {
    background: rgba(248, 250, 252, .97) !important;
    border-color: #94a3b8 !important;
    color: #1e293b !important;
    box-shadow: 0 10px 30px rgba(15,23,42,.18);
}

body.light-theme.performance-mode .performance-dock-header {
    color: #1e293b;
    border-bottom-color: #cbd5e1;
}

body.light-theme.performance-mode #performanceExtraControls {
    border-top-color: #cbd5e1 !important;
}

@media (max-width: 900px) {
    body.performance-mode .performance-dock {
        right: 7px !important;
        bottom: max(7px, env(safe-area-inset-bottom)) !important;
        width: calc(100vw - 14px) !important;
        max-width: calc(100vw - 14px) !important;
        max-height: 72dvh;
    }

    .performance-dock-main {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
    }

    .performance-dock-main > * {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
        grid-area: auto !important;
    }

    .performance-dock-main .performance-speed,
    .performance-dock-main .performance-tempo,
    .performance-dock-main .performance-xr18-all {
        justify-content: center;
    }

    body.performance-mode #performanceExtraControls {
        justify-content: center;
    }

    body.performance-mode .performance-nav-zone {
        bottom: 10px !important;
    }
}

@media (max-width: 560px) {
    .performance-dock-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .performance-dock-main .performance-xr18-all {
        grid-column: 1 / -1;
    }
}