/* /Components/Audio/AudioPlayer.razor.rz.scp.css */
/* === FLOWCOMPOSER PREMIUM PLAYER === */

.fc-player-yellow[b-e7dusrvve1] {
    background: linear-gradient( 180deg, #f7c400 0%, #e0a800 100% );
    color: #6A2F7A;
    border-radius: 24px;
    padding: 8px 16px;
    height: 56px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 0 12px rgba(240,180,0,0.35), inset 0 0 6px rgba(255,255,255,0.15);
    position: relative;
    width: 520px;
    transition: box-shadow 0.3s ease, transform 0.2s ease;
    margin-bottom: 18px;
}

    .fc-player-yellow .fc-time[b-e7dusrvve1] {
        color: #6A2F7A; /* lub dowolny */
    }

    /* Player aktywny */
    .fc-player-yellow.playing[b-e7dusrvve1] {
        box-shadow: 0 0 22px rgba(240,180,0,0.55);
        transform: translateY(-1px);
    }

    /* === PLAY BUTTON z ringiem === */
    .fc-player-yellow .fc-btn[b-e7dusrvve1] {
        width: 36px;
        height: 36px;
        background: #5C286A;
        color: var(--fc-accent);
        border-radius: 50%;
        border: none;
        font-size: 18px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        transition: background 0.2s ease, transform 0.15s ease;
    }

        .fc-player-yellow .fc-btn:hover[b-e7dusrvve1] {
            background: #6A2F7A;
            transform: scale(1.05);
        }

        /* Ring wokół play */
        .fc-player-yellow .fc-btn[b-e7dusrvve1]::before {
            content: "";
            position: absolute;
            inset: -4px;
            border-radius: 50%;
            border: 2px solid rgba(0,0,0,0.35);
            opacity: 0.7;
            transition: all 0.3s ease;
        }

    /* Ring pulsujący przy odtwarzaniu */
    .fc-player-yellow.playing .fc-btn[b-e7dusrvve1]::before {
        border: 2px solid transparent;
        border-top-color: #5C286A;
        border-right-color: #5C286A;
        animation: spin-b-e7dusrvve1 1.2s linear infinite;
        opacity: 1;
    }

@keyframes spin-b-e7dusrvve1 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes fc-pulse-b-e7dusrvve1 {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

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

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

/* === WAVEFORM === */
.fc-player-yellow .fc-wave-wrapper[b-e7dusrvve1] {
    position: relative;
    width: 300px;
    height: 36px;
    background: linear-gradient( to bottom, #201E1F 0%, #6A2F7A 45%, #6A2F7A 55%, #201E1F 100% );
    border-radius: 18px;
    cursor: pointer;
    overflow: hidden;
}

/* Shimmer efekt */
.fc-wave-wrapper[b-e7dusrvve1]::after {
    content: "";
    position: absolute;
    top: 0;
    left: -40%;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.fc-player-yellow.playing .fc-wave-wrapper[b-e7dusrvve1]::after {
    opacity: 1;
    animation: shimmer-b-e7dusrvve1 2.4s linear infinite;
}

@keyframes shimmer-b-e7dusrvve1 {
    from {
        left: -40%;
    }

    to {
        left: 100%;
    }
}

/* Progress overlay */
.fc-player-yellow .fc-progress[b-e7dusrvve1] {
    position: absolute;
    top: 0;
    left: 0;
    height: 36px;
    background: var(--fc-accent);
    opacity: 0.55;
    pointer-events: none;
    backdrop-filter: blur(2px);
}

/* Time */
.fc-player-yellow .fc-time[b-e7dusrvve1] {
    font-family: monospace;
    font-size: 14px;
    color: black;
    font-weight: 600;
}
/* /Components/Audio/FlowComposerAudioPlayer.razor.rz.scp.css */
/* === FLOWCOMPOSER PREMIUM PLAYER === */

.fc-player-yellow[b-qamwnwu9k0] {
    background: linear-gradient( 180deg, #f7c400 0%, #e0a800 100% );
    color: #6A2F7A;
    border-radius: 24px;
    padding: 8px 16px;
    height: 56px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 0 12px rgba(240,180,0,0.35), inset 0 0 6px rgba(255,255,255,0.15);
    position: relative;
    width: 520px;
    transition: box-shadow 0.3s ease, transform 0.2s ease;
    margin-bottom: 18px;
}

    .fc-player-yellow .fc-time[b-qamwnwu9k0] {
        color: #6A2F7A; /* lub dowolny */
    }

    /* Player aktywny */
    .fc-player-yellow.playing[b-qamwnwu9k0] {
        box-shadow: 0 0 22px rgba(240,180,0,0.55);
        transform: translateY(-1px);
    }

    /* === PLAY BUTTON z ringiem === */
    .fc-player-yellow .fc-btn[b-qamwnwu9k0] {
        width: 36px;
        height: 36px;
        background: #5C286A;
        color: var(--fc-accent);
        border-radius: 50%;
        border: none;
        font-size: 18px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        transition: background 0.2s ease, transform 0.15s ease;
    }

        .fc-player-yellow .fc-btn:hover[b-qamwnwu9k0] {
            background: #6A2F7A;
            transform: scale(1.05);
        }

        /* Ring wokół play */
        .fc-player-yellow .fc-btn[b-qamwnwu9k0]::before {
            content: "";
            position: absolute;
            inset: -4px;
            border-radius: 50%;
            border: 2px solid rgba(0,0,0,0.35);
            opacity: 0.7;
            transition: all 0.3s ease;
        }

    /* Ring pulsujący przy odtwarzaniu */
    .fc-player-yellow.playing .fc-btn[b-qamwnwu9k0]::before {
        border: 2px solid transparent;
        border-top-color: #5C286A;
        border-right-color: #5C286A;
        animation: spin-b-qamwnwu9k0 1.2s linear infinite;
        opacity: 1;
    }

@keyframes spin-b-qamwnwu9k0 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes fc-pulse-b-qamwnwu9k0 {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

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

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

/* === WAVEFORM === */
.fc-player-yellow .fc-wave-wrapper[b-qamwnwu9k0] {
    position: relative;
    width: 300px;
    height: 36px;
    background: linear-gradient( to bottom, #201E1F 0%, #6A2F7A 45%, #6A2F7A 55%, #201E1F 100% );
    border-radius: 18px;
    cursor: pointer;
    overflow: hidden;
}

/* Shimmer efekt */
.fc-wave-wrapper[b-qamwnwu9k0]::after {
    content: "";
    position: absolute;
    top: 0;
    left: -40%;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.fc-player-yellow.playing .fc-wave-wrapper[b-qamwnwu9k0]::after {
    opacity: 1;
    animation: shimmer-b-qamwnwu9k0 2.4s linear infinite;
}

@keyframes shimmer-b-qamwnwu9k0 {
    from {
        left: -40%;
    }

    to {
        left: 100%;
    }
}

/* Progress overlay */
.fc-player-yellow .fc-progress[b-qamwnwu9k0] {
    position: absolute;
    top: 0;
    left: 0;
    height: 36px;
    background: var(--fc-accent);
    opacity: 0.55;
    pointer-events: none;
    backdrop-filter: blur(2px);
}

/* Time */
.fc-player-yellow .fc-time[b-qamwnwu9k0] {
    font-family: monospace;
    font-size: 14px;
    color: black;
    font-weight: 600;
}
/* /Components/Auth/Authorizing.razor.rz.scp.css */
.fc-auth-message[b-zkw927trm6] {
    margin: 80px auto;
    padding: 40px 50px;
    max-width: 420px;
    background: #0d0d0d;
    border: 1px solid #1c1c1c;
    border-radius: 4px;
    text-align: center;
    color: #d0d0d0;
    box-shadow: 0 0 40px rgba(0,0,0,0.6);
}

    .fc-auth-message h2[b-zkw927trm6] {
        margin-bottom: 12px;
        font-size: 1.4rem;
        color: #e5e5e5;
        letter-spacing: 0.5px;
    }

    .fc-auth-message p[b-zkw927trm6] {
        margin: 0;
        font-size: 0.95rem;
        color: #b0b0b0;
    }
/* /Components/Auth/NotAuthorized.razor.rz.scp.css */
.fc-auth-message[b-vfjvx7fvre] {
    margin: 80px auto;
    padding: 40px 50px;
    max-width: 420px;
    background: #0d0d0d;
    border: 1px solid #1c1c1c;
    border-radius: 4px;
    text-align: center;
    color: #d0d0d0;
    box-shadow: 0 0 40px rgba(0,0,0,0.6);
}

    .fc-auth-message h2[b-vfjvx7fvre] {
        margin-bottom: 12px;
        font-size: 1.4rem;
        color: #e5e5e5;
        letter-spacing: 0.5px;
    }

    .fc-auth-message p[b-vfjvx7fvre] {
        margin: 0;
        font-size: 0.95rem;
        color: #b0b0b0;
    }
/* /Components/Auth/NotFound.razor.rz.scp.css */
.fc-auth-message[b-qskpye7dyo] {
    margin: 80px auto;
    padding: 40px 50px;
    max-width: 420px;
    background: #0d0d0d;
    border: 1px solid #1c1c1c;
    border-radius: 4px;
    text-align: center;
    color: #d0d0d0;
    box-shadow: 0 0 40px rgba(0,0,0,0.6);
}

    .fc-auth-message h2[b-qskpye7dyo] {
        margin-bottom: 12px;
        font-size: 1.4rem;
        color: #e5e5e5;
        letter-spacing: 0.5px;
    }

    .fc-auth-message p[b-qskpye7dyo] {
        margin: 0;
        font-size: 0.95rem;
        color: #b0b0b0;
    }
/* /Components/Common/Dialog.razor.rz.scp.css */
.fc-dialog-overlay[b-dv661awozy] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    z-index: 9999;
}

.fc-dialog-window[b-dv661awozy] {
    background: #0d0d0d;
    border: 1px solid #1c1c1c;
    border-radius: 4px;
    width: 420px;
    max-width: 90vw;
    max-height: 90vh;
    overflow: auto;
    box-shadow: 0 0 40px rgba(0,0,0,0.7);
    display: flex;
    flex-direction: column;
}

.fc-dialog-header[b-dv661awozy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    font-size: 1.05rem;
    color: #e5e5e5;
    background: linear-gradient( to bottom, #1a1a1a 0%, #141414 100% );
    border-bottom: 1px solid #1f1f1f;
    letter-spacing: 0.5px;
}

.fc-dialog-close[b-dv661awozy] {
    background: none;
    border: none;
    color: #888;
    font-size: 1.4rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.15s ease;
}

    .fc-dialog-close:hover[b-dv661awozy] {
        color: #fff;
    }

.fc-dialog-body[b-dv661awozy] {
    padding: 22px;
    color: #d0d0d0;
    font-size: 0.95rem;
}
/* /Components/Common/LoadingIndicator.razor.rz.scp.css */
.fc-loader-indicator[b-80zzfe757g] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    background: #000;
}

.fc-loader-indicator-inner[b-80zzfe757g] {
    position: relative;
    display: inline-block;
}

    .fc-loader-indicator-inner img[b-80zzfe757g] {
        width: 220px;
        height: auto;
        display: block;
        position: relative;
    }

.fc-loader-indicator-text[b-80zzfe757g] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.55);
    color: #fffe00;
    padding: 6px 10px;
    border-radius: 6px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 600;
    text-align: center;
    pointer-events: none;
    white-space: nowrap;
}
/* /Components/Common/SectionJumper.razor.rz.scp.css */
.section-jumper[b-witejo3ciu] {
    position: absolute;
    bottom: 24px; /* tuż nad bottom bar */
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    cursor: pointer;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.arrow-svg[b-witejo3ciu] {
    width: 36px;
    height: 36px;
    opacity: 0.9;
    animation: arrowPulse-b-witejo3ciu 1.8s ease-in-out infinite;
}

@keyframes arrowPulse-b-witejo3ciu {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0.7;
    }

    50% {
        transform: translateY(6px) scale(1.15);
        opacity: 1;
    }

    100% {
        transform: translateY(0) scale(1);
        opacity: 0.7;
    }
}
/* /Components/Curation/CurationTable.razor.rz.scp.css */
/* Kontener z pionowym scrollem */
.curation-table-container[b-m1atb558u6] {
    width: 100%;
    max-height: 75vh; /* wysokość widocznej części */
    overflow-y: auto; /* scroll pionowy */
    overflow-x: hidden; /* poziomy wyłączony */
    background: transparent; /* zero białego tła */
}

/* Tabela przezroczysta */
.curation-table[b-m1atb558u6] {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #b0b0b0 !important;
    table-layout: fixed;
}

    .curation-table td[b-m1atb558u6],
    .curation-table th[b-m1atb558u6] {
        color: #b0b0b0 !important; /* ten sam kolor co nagłówki */
        background: transparent !important;
        border-right: 1px solid rgba(255,255,255,0.06);
        display: table-cell !important;
    }

        /* usuń linię po ostatniej kolumnie */
        .curation-table td:last-child[b-m1atb558u6],
        .curation-table th:last-child[b-m1atb558u6] {
            border-right: none;
        }

    /* Sticky header */
    .curation-table thead th[b-m1atb558u6] {
        position: sticky;
        top: 0;
        z-index: 10;
        background: rgba(0,0,0,0.35); /* półprzezroczysty, bitwig-like */
        backdrop-filter: blur(4px);
        padding: 6px 8px;
        font-size: 11px;
        font-weight: 500;
        color: #b0b0b0;
        text-transform: none;
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    /* Komórki */
    .curation-table td[b-m1atb558u6] {
        background: transparent !important;
        padding: 4px 8px;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }

    /* Hover na wierszu */
    .curation-table tr:hover td[b-m1atb558u6] {
        background: rgba(255,255,255,0.03) !important;
    }

    /* Name — najdłuższe tytuły, ale niech nie rozwalają tabeli */
    .curation-table td:nth-child(1)[b-m1atb558u6],
    .curation-table th:nth-child(1)[b-m1atb558u6] {
        max-width: 220px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Artist */
    .curation-table td:nth-child(2)[b-m1atb558u6],
    .curation-table th:nth-child(2)[b-m1atb558u6] {
        max-width: 160px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Genre */
    .curation-table td:nth-child(3)[b-m1atb558u6],
    .curation-table th:nth-child(3)[b-m1atb558u6] {
        max-width: 120px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .curation-table td.name-artist-cell[b-m1atb558u6],
    .curation-table th:first-child[b-m1atb558u6] {
        width: 240px;
        max-width: 240px;
        min-width: 200px;
    }

    .curation-table td:nth-child(2)[b-m1atb558u6],
    .curation-table th:nth-child(2)[b-m1atb558u6] {
        width: 150px;
        max-width: 200px;
        min-width: 120px;
        white-space: normal;
        word-break: break-word;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Ustawiamy proporcje kolumn jakości */
    .curation-table th.playColumn[b-m1atb558u6],
    .curation-table td.playColumn[b-m1atb558u6] {
        width: 40px;
    }

    .curation-table th.recommended[b-m1atb558u6],
    .curation-table td.recommended[b-m1atb558u6] {
        width: 10%;
    }

    .curation-table th.energy[b-m1atb558u6],
    .curation-table td.energy[b-m1atb558u6] {
        width: 15%;
    }

    .curation-table th.mood[b-m1atb558u6],
    .curation-table td.mood[b-m1atb558u6] {
        width: 20%;
    }

    .curation-table th.sound[b-m1atb558u6],
    .curation-table td.sound[b-m1atb558u6] {
        width: 30%;
    }

    .curation-table th.mix[b-m1atb558u6],
    .curation-table td.mix[b-m1atb558u6] {
        width: 25%;
    }







/* Scrollbar – cienki, elegancki */
.curation-table-container[b-m1atb558u6]::-webkit-scrollbar {
    width: 6px;
}

.curation-table-container[b-m1atb558u6]::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 3px;
}

    .curation-table-container[b-m1atb558u6]::-webkit-scrollbar-thumb:hover {
        background: rgba(255,255,255,0.25);
    }

.curation-table thead th.energy[b-m1atb558u6] {
    color: var(--color-energy) !important;
}

.curation-table thead th.mood[b-m1atb558u6] {
    color: var(--color-mood) !important;
}

.curation-table thead th.sound[b-m1atb558u6] {
    color: var(--color-sound) !important;
}

.curation-table thead th.mix[b-m1atb558u6] {
    color: var(--color-mix) !important;
}

.selected-row[b-m1atb558u6] {
    background-color: rgba(0, 150, 255, 0.15);
}

.name-artist-cell[b-m1atb558u6] {
    display: flex !important; /* nadpisujemy table-cell */
    flex-direction: row;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.track-text[b-m1atb558u6] {
    display: flex;
    flex-direction: column; /* tytuł nad, autor pod */
    min-width: 0;
    overflow: hidden;
}

.track-name[b-m1atb558u6] {
    font-weight: 600;
    color: #e0e0e0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.track-artist[b-m1atb558u6] {
    font-size: 11px;
    font-style: italic;
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}


.cue-btn[b-m1atb558u6] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    position: relative;
    /* Ciemny metaliczny korpus */
    background: radial-gradient(circle at 50% 50%, #3a3a3a 0%, #2e2e2e 40%, #1f1f1f 100%);
    border: 2px solid #1a1a1a;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.05), inset 0 -1px 2px rgba(0,0,0,0.6), 0 0 4px rgba(0,0,0,0.4);
    transition: transform 0.1s ease;
}

    /* RING */
    .cue-btn[b-m1atb558u6]::after {
        content: "";
        position: absolute;
        inset: 2px;
        border-radius: 50%;
        /* Kolor systemowy */
        box-shadow: 0 0 0 2px #f0b400 inset;
        transition: box-shadow 0.2s ease;
    }

/* TRÓJKĄT PLAY */
.cue-icon[b-m1atb558u6] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-40%, -50%);
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    /* neutralny popiel */
    border-left: 10px solid #d0d0d0;
    transition: border-left-color 0.2s ease;
}

/* HOVER — ring + trójkąt rozświetlają się */
.cue-btn:hover[b-m1atb558u6]::after {
    box-shadow: 0 0 0 2px #ffd24d inset;
}

.cue-btn:hover .cue-icon[b-m1atb558u6] {
    border-left-color: #f0f0f0;
}

/* ACTIVE — kliknięcie */
.cue-btn:active[b-m1atb558u6] {
    transform: scale(0.92);
}

    .cue-btn:active[b-m1atb558u6]::after {
        box-shadow: 0 0 0 2px #c99700 inset;
    }

/* PLAYING — ring i trójkąt zmieniają kolor */
.cue-btn.playing[b-m1atb558u6]::after {
    box-shadow: 0 0 0 2px #00ff9c inset; /* zielonkawy BitWyg vibe */
}

.cue-btn.playing .cue-icon[b-m1atb558u6] {
    border-left-color: #00ff9c;
}
/* /Components/Curation/CurationTableTagsCell.razor.rz.scp.css */
.quality-view[b-x5usnq7key] {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 2px;
}

/* Tag pill – minimalistyczny, bitwig-like */
.tag-pill[b-x5usnq7key] {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
    color: #e0e0e0;
}

/* X button */
.tag-remove[b-x5usnq7key] {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 12px;
    color: #aaa;
    padding: 0;
    margin: 0;
}

    .tag-remove:hover[b-x5usnq7key] {
        color: #fff;
    }

.subquality-group[b-x5usnq7key] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 2px;
}

.subquality-label[b-x5usnq7key] {
    font-size: 10px;
    opacity: 0.6;
    margin-right: 4px;
    text-transform: lowercase;
}

/* Jedna linia subquality */
.subquality-row[b-x5usnq7key] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    line-height: 1.2;
}
/* Label subquality */

.subquality-label[b-x5usnq7key] {
    font-size: 10px;
    opacity: 0.6;
    text-transform: lowercase;
    margin-right: 4px;
    white-space: nowrap;
}

/* ENERGY */
.curation-table .tag-pill.energy[b-x5usnq7key] {
    border-color: var(--color-energy) !important;
    background-color: rgba(255, 192, 0, 0.15) !important;
    color: var(--color-energy) !important;
}

/* MOOD */
.curation-table .tag-pill.mood[b-x5usnq7key] {
    border-color: var(--color-mood) !important;
    background-color: rgba(0, 176, 240, 0.15) !important;
    color: var(--color-mood) !important;
}

/* SOUND */
.curation-table .tag-pill.sound[b-x5usnq7key] {
    border-color: var(--color-sound) !important;
    background-color: rgba(146, 208, 80, 0.15) !important;
    color: var(--color-sound) !important;
}

/* MIX */
.curation-table .tag-pill.mix[b-x5usnq7key] {
    border-color: var(--color-mix) !important;
    background-color: rgba(255, 51, 153, 0.15) !important;
    color: var(--color-mix) !important;
}
/* /Components/Curation/CurationTableUserRecommendedTagsCell.razor.rz.scp.css */
.quality-view[b-esfwtbzvjq] {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 2px;
}

/* Tag pill – minimalistyczny, bitwig-like */
.tag-pill[b-esfwtbzvjq] {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
    color: #e0e0e0;
}

/* X button */
.tag-remove[b-esfwtbzvjq] {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 12px;
    color: #aaa;
    padding: 0;
    margin: 0;
}

    .tag-remove:hover[b-esfwtbzvjq] {
        color: #fff;
    }

.subquality-group[b-esfwtbzvjq] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 2px;
}

.subquality-label[b-esfwtbzvjq] {
    font-size: 10px;
    opacity: 0.6;
    margin-right: 4px;
    text-transform: lowercase;
}

/* Jedna linia subquality */
.subquality-row[b-esfwtbzvjq] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    line-height: 1.2;
}
/* Label subquality */

.subquality-label[b-esfwtbzvjq] {
    font-size: 10px;
    opacity: 0.6;
    text-transform: lowercase;
    margin-right: 4px;
    white-space: nowrap;
}

/* ENERGY */
.curation-table .tag-pill.energy[b-esfwtbzvjq] {
    border-color: var(--color-energy) !important;
    background-color: rgba(255, 192, 0, 0.15) !important;
    color: var(--color-energy) !important;
}

/* MOOD */
.curation-table .tag-pill.mood[b-esfwtbzvjq] {
    border-color: var(--color-mood) !important;
    background-color: rgba(0, 176, 240, 0.15) !important;
    color: var(--color-mood) !important;
}

/* SOUND */
.curation-table .tag-pill.sound[b-esfwtbzvjq] {
    border-color: var(--color-sound) !important;
    background-color: rgba(146, 208, 80, 0.15) !important;
    color: var(--color-sound) !important;
}

/* MIX */
.curation-table .tag-pill.mix[b-esfwtbzvjq] {
    border-color: var(--color-mix) !important;
    background-color: rgba(255, 51, 153, 0.15) !important;
    color: var(--color-mix) !important;
}
/* /Components/Curation/DspHorizontalActionBar.razor.rz.scp.css */
/* --- ACTION BAR --- */
.horizontal-action-bar[b-bh9p8r89q8] {
    width: 100%;
    height: 30px;
    background: #1e1e1e; /* Bitwig dark */
    border-bottom: 1px solid #2a2a2a;
    display: flex;
    align-items: center;
    position: relative;
}

/* kontener na przyciski */
.horizontal-action-bar-inner[b-bh9p8r89q8] {
    display: flex;
    gap: 5px;
    position: absolute;
    left: 375px;
}

/* --- BUTTONS --- */
.action-btn[b-bh9p8r89q8] {
    background: #2b2b2b;
    color: #e0e0e0;
    border: none;
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

    .action-btn:hover[b-bh9p8r89q8] {
        background: #3a3a3a;
        color: white;
    }

    .action-btn:active[b-bh9p8r89q8] {
        background: #505050;
    }

.action-icon[b-bh9p8r89q8] {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    display: block;
    margin-top: 0px;
}

.action-group[b-bh9p8r89q8] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.action-group-label[b-bh9p8r89q8] {
    font-size: 10px;
    opacity: 0.55;
    letter-spacing: 0.3px;
    margin-right: 4px;
    user-select: none;
}
/* /Components/Curation/DspTable.razor.rz.scp.css */
/* Kontener z pionowym scrollem */
.curation-table-container[b-0md5s5rea4] {
    width: 100%;
    max-height: 75vh; /* wysokość widocznej części */
    overflow-y: auto; /* scroll pionowy */
    overflow-x: hidden; /* poziomy wyłączony */
    background: transparent; /* zero białego tła */
}

/* Tabela przezroczysta */
.curation-table[b-0md5s5rea4] {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #b0b0b0 !important;
    table-layout: fixed;
}

    .curation-table td[b-0md5s5rea4],
    .curation-table th[b-0md5s5rea4] {
        color: #b0b0b0 !important; /* ten sam kolor co nagłówki */
        background: transparent !important;
        border-right: 1px solid rgba(255,255,255,0.06);
        display: table-cell !important;
    }

        /* usuń linię po ostatniej kolumnie */
        .curation-table td:last-child[b-0md5s5rea4],
        .curation-table th:last-child[b-0md5s5rea4] {
            border-right: none;
        }

    /* Sticky header */
    .curation-table thead th[b-0md5s5rea4] {
        position: sticky;
        top: 0;
        z-index: 10;
        background: rgba(0,0,0,0.35); /* półprzezroczysty, bitwig-like */
        backdrop-filter: blur(4px);
        padding: 6px 8px;
        font-size: 11px;
        font-weight: 500;
        color: #b0b0b0;
        text-transform: none;
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    /* Komórki */
    .curation-table td[b-0md5s5rea4] {
        background: transparent !important;
        padding: 4px 8px;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }

    /* Hover na wierszu */
    .curation-table tr:hover td[b-0md5s5rea4] {
        background: rgba(255,255,255,0.03) !important;
    }

    /* Name — najdłuższe tytuły, ale niech nie rozwalają tabeli */
    .curation-table td:nth-child(1)[b-0md5s5rea4],
    .curation-table th:nth-child(1)[b-0md5s5rea4] {
        max-width: 220px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Artist */
    .curation-table td:nth-child(2)[b-0md5s5rea4],
    .curation-table th:nth-child(2)[b-0md5s5rea4] {
        max-width: 160px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Genre */
    .curation-table td:nth-child(3)[b-0md5s5rea4],
    .curation-table th:nth-child(3)[b-0md5s5rea4] {
        max-width: 120px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .curation-table td.name-artist-cell[b-0md5s5rea4],
    .curation-table th:first-child[b-0md5s5rea4] {
        width: 240px;
        max-width: 240px;
        min-width: 200px;
    }

    .curation-table td:nth-child(2)[b-0md5s5rea4],
    .curation-table th:nth-child(2)[b-0md5s5rea4] {
        width: 150px;
        max-width: 200px;
        min-width: 120px;
        white-space: normal;
        word-break: break-word;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Ustawiamy proporcje kolumn jakości */
    .curation-table th.playColumn[b-0md5s5rea4],
    .curation-table td.playColumn[b-0md5s5rea4] {
        width: 40px;
    }

    .curation-table th.energy[b-0md5s5rea4],
    .curation-table td.energy[b-0md5s5rea4] {
        width: 15%;
    }

    .curation-table th.mood[b-0md5s5rea4],
    .curation-table td.mood[b-0md5s5rea4] {
        width: 25%;
    }

    .curation-table th.sound[b-0md5s5rea4],
    .curation-table td.sound[b-0md5s5rea4] {
        width: 30%;
    }

    .curation-table th.mix[b-0md5s5rea4],
    .curation-table td.mix[b-0md5s5rea4] {
        width: 30%;
    }







/* Scrollbar – cienki, elegancki */
.curation-table-container[b-0md5s5rea4]::-webkit-scrollbar {
    width: 6px;
}

.curation-table-container[b-0md5s5rea4]::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 3px;
}

    .curation-table-container[b-0md5s5rea4]::-webkit-scrollbar-thumb:hover {
        background: rgba(255,255,255,0.25);
    }

.curation-table thead th.energy[b-0md5s5rea4] {
    color: var(--color-energy) !important;
}

.curation-table thead th.mood[b-0md5s5rea4] {
    color: var(--color-mood) !important;
}

.curation-table thead th.sound[b-0md5s5rea4] {
    color: var(--color-sound) !important;
}

.curation-table thead th.mix[b-0md5s5rea4] {
    color: var(--color-mix) !important;
}

.selected-row[b-0md5s5rea4] {
    background-color: rgba(0, 150, 255, 0.15);
}

.name-artist-cell[b-0md5s5rea4] {
    display: flex !important; /* nadpisujemy table-cell */
    flex-direction: row;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.track-text[b-0md5s5rea4] {
    display: flex;
    flex-direction: column; /* tytuł nad, autor pod */
    min-width: 0;
    overflow: hidden;
}

.track-name[b-0md5s5rea4] {
    font-weight: 600;
    color: #e0e0e0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.track-artist[b-0md5s5rea4] {
    font-size: 11px;
    font-style: italic;
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}


.cue-btn[b-0md5s5rea4] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    position: relative;
    /* Ciemny metaliczny korpus */
    background: radial-gradient(circle at 50% 50%, #3a3a3a 0%, #2e2e2e 40%, #1f1f1f 100%);
    border: 2px solid #1a1a1a;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.05), inset 0 -1px 2px rgba(0,0,0,0.6), 0 0 4px rgba(0,0,0,0.4);
    transition: transform 0.1s ease;
}

    /* RING */
    .cue-btn[b-0md5s5rea4]::after {
        content: "";
        position: absolute;
        inset: 2px;
        border-radius: 50%;
        /* Kolor systemowy */
        box-shadow: 0 0 0 2px #f0b400 inset;
        transition: box-shadow 0.2s ease;
    }

/* TRÓJKĄT PLAY */
.cue-icon[b-0md5s5rea4] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-40%, -50%);
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    /* neutralny popiel */
    border-left: 10px solid #d0d0d0;
    transition: border-left-color 0.2s ease;
}

/* HOVER — ring + trójkąt rozświetlają się */
.cue-btn:hover[b-0md5s5rea4]::after {
    box-shadow: 0 0 0 2px #ffd24d inset;
}

.cue-btn:hover .cue-icon[b-0md5s5rea4] {
    border-left-color: #f0f0f0;
}

/* ACTIVE — kliknięcie */
.cue-btn:active[b-0md5s5rea4] {
    transform: scale(0.92);
}

    .cue-btn:active[b-0md5s5rea4]::after {
        box-shadow: 0 0 0 2px #c99700 inset;
    }

/* PLAYING — ring i trójkąt zmieniają kolor */
.cue-btn.playing[b-0md5s5rea4]::after {
    box-shadow: 0 0 0 2px #00ff9c inset; /* zielonkawy BitWyg vibe */
}

.cue-btn.playing .cue-icon[b-0md5s5rea4] {
    border-left-color: #00ff9c;
}

.dsp-group-rows[b-0md5s5rea4] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px;
}

.dsp-row[b-0md5s5rea4] {
    display: flex;
    align-items: center;
    height: 14px;
}

.dsp-row-label[b-0md5s5rea4] {
    width: 80px;
    font-size: 10px;
    color: #aaa;
    margin-right: 6px;
    white-space: nowrap;
}

.dsp-row-bar[b-0md5s5rea4] {
    height: 100%;
    border-radius: 2px;
    transition: width 0.25s ease-out;
}

/* /Components/Curation/GenreTree.razor.rz.scp.css */
.curation-genre-tree[b-p4gg3x4a97] {
    width: 400px;
}

.curation-genre-node[b-p4gg3x4a97] {
    display: flex;
    align-items: center;
    justify-content: space-between; /* <<< TO ZAŁATWIA SPRAWĘ */
    height: 24px;
    line-height: 24px;
    cursor: default;
    user-select: none;
    color: #ddd;
    font-family: Inter, Segoe UI, sans-serif;
    transition: background 0.15s ease;
    padding-right: 8px; /* żeby ikonki nie kleiły się do krawędzi */
}

    .curation-genre-node:hover[b-p4gg3x4a97] {
        background: rgba(255, 255, 255, 0.06);
    }
/* /Components/Curation/GenreTreeNode.razor.rz.scp.css */
.curation-genre-node-left[b-l505zqc8rf] {
    display: flex;
    align-items: center;
    gap: 6px;
}


.curation-genre-node-left-toggle[b-l505zqc8rf] {
    cursor: pointer;
    width: 18px;
    display: inline-block;
    text-align: center;
    color: #aaa;
    font-size: 12px;
}

.toggle:hover[b-l505zqc8rf] {
    color: #fff;
}

.curation-genre-node-left-toggle-placeholder[b-l505zqc8rf] {
    width: 18px;
    display: inline-block;
}

.curation-genre-node-left-node-icon[b-l505zqc8rf] {
    width: 20px;
    text-align: center;
    opacity: 0.7;
    margin-right: 4px;
}

.curation-genre-node-left-node-label[b-l505zqc8rf] {
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
}

    .curation-genre-node-left-node-label:hover[b-l505zqc8rf] {
        background: rgba(255, 255, 255, 0.1);
    }

.curation-genre-node-left-edit-input[b-l505zqc8rf] {
    background: #222;
    color: #fff;
    border: 1px solid #555;
    padding: 2px 4px;
    border-radius: 3px;
    width: 160px;
}

.curation-genre-node-left-actions[b-l505zqc8rf] {
    margin-left: auto;
    display: flex;
    gap: 4px;
}

.curation-genre-node-left-action-btn[b-l505zqc8rf] {
    background: transparent;
    border: none;
    cursor: pointer;
    opacity: 0.6;
}

    .curation-genre-node-left-action-btn:hover[b-l505zqc8rf] {
        opacity: 1;
    }
/* /Components/Curation/HorizontalActionBar.razor.rz.scp.css */
/* --- ACTION BAR --- */
.horizontal-action-bar[b-0oplrot93j] {
    width: 100%;
    height: 30px;
    background: #1e1e1e; /* Bitwig dark */
    border-bottom: 1px solid #2a2a2a;
    display: flex;
    align-items: center;
    position: relative;
}

/* kontener na przyciski */
.horizontal-action-bar-inner[b-0oplrot93j] {
    display: flex;
    gap: 5px;
    position: absolute;
    left: 375px;
}

/* --- BUTTONS --- */
.action-btn[b-0oplrot93j] {
    background: #2b2b2b;
    color: #e0e0e0;
    border: none;
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

    .action-btn:hover[b-0oplrot93j] {
        background: #3a3a3a;
        color: white;
    }

    .action-btn:active[b-0oplrot93j] {
        background: #505050;
    }

.action-icon[b-0oplrot93j] {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    display: block;
    margin-top: 0px;
}

.action-group[b-0oplrot93j] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.action-group-label[b-0oplrot93j] {
    font-size: 10px;
    opacity: 0.55;
    letter-spacing: 0.3px;
    margin-right: 4px;
    user-select: none;
}
/* /Components/Curation/PlaylistTree.razor.rz.scp.css */
/* Każdy węzeł drzewa */
.curation-playlist-tree-node[b-69kytmawpd] {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    margin: 2px 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.2; /* mniejsze line-height = brak pseudo‑ramki */
    font-weight: 400;
    letter-spacing: 0.2px;
}

    /* Hover tylko na label */
    .curation-playlist-tree-node:hover .curation-playlist-tree-label[b-69kytmawpd] {
        text-decoration: underline;
    }

/* --- IKONA --- */
/* Kontener ikony — BEZ RAMKI, BEZ BASELINE, BEZ ARTEFAKTÓW */
.curation-playlist-tree-icon[b-69kytmawpd] {
    width: 20px;
    height: 20px;
    display: flex; /* zamiast inline-block */
    align-items: center;
    justify-content: center;
    line-height: 0; /* usuwa baseline */
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    outline: none;
}

    /* SVG w środku — absolutnie kluczowe */
    .curation-playlist-tree-icon svg[b-69kytmawpd] {
        display: block; /* usuwa mikro‑padding i pseudo‑ramkę */
        width: 100%;
        height: 100%;
    }

/* Label obok ikony */
.curation-playlist-tree-label[b-69kytmawpd] {
    margin-left: 4px;
}

/* --- KOLORY DOMEN --- */
.node-domain[data-domain="Energy"] .curation-playlist-tree-label[b-69kytmawpd] {
    color: #ffb347;
}

.node-domain[data-domain="Mood"] .curation-playlist-tree-label[b-69kytmawpd] {
    color: #a0a0ff;
}

.node-domain[data-domain="Sound"] .curation-playlist-tree-label[b-69kytmawpd] {
    color: #7ed957;
}

.node-domain[data-domain="Mix"] .curation-playlist-tree-label[b-69kytmawpd] {
    color: #ff7f7f;
}

/* --- NAGŁÓWKI DOMEN --- */
.node-domain .curation-playlist-tree-label[b-69kytmawpd] {
    display: block;
    margin-left: -20px;
    padding: 12px 0 0px 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* --- PERCEPTION --- */
.node-perception[b-69kytmawpd] {
    margin-left: 10px;
    padding-left: 6px;
}

    .node-perception .curation-playlist-tree-label[b-69kytmawpd] {
        font-size: 10px;
        font-style: italic;
        font-weight: 500;
        color: #b8b8b8;
        text-align: right;
        width: 100%;
        display: inline-block;
        border-bottom: 1px solid #444;
        padding-bottom: 0px;
        margin-bottom: 0px;
    }

.badge-inline[b-69kytmawpd] {
    margin-right: 6px;
    color: #888;
    font-size: 12px;
    font-weight: 600;
}

.delete-icon[b-69kytmawpd] {
    margin-left: 6px;
    opacity: 0.5;
    cursor: pointer;
}

    .delete-icon:hover[b-69kytmawpd] {
        opacity: 1;
    }
/* /Components/Curation/TagPill.razor.rz.scp.css */
.curation-pill[b-f7yafd1g36] {
    display: inline-flex;
    align-items: stretch; /* pozwala akcentowi mieć pełną wysokość */
    border-radius: 4px;
    overflow: hidden;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: #e0e0e0;
    cursor: pointer;
    font-size: 11px;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    min-height: 20px; /* kluczowe */
    margin-right: 4px !important;
    margin-bottom: 1px !important;
}

    .curation-pill:hover[b-f7yafd1g36] {
        background: rgba(255,255,255,0.12);
        border-color: rgba(255,255,255,0.25);
    }

/* Pasek domeny */
.pill-accent[b-f7yafd1g36] {
    width: 6px;
    height: auto;
    flex-shrink: 0;
}

/* Kolory domen — zgodne z Twoim :root */
.accent-energy[b-f7yafd1g36] {
    background: var(--color-energy);
}

.accent-mood[b-f7yafd1g36] {
    background: var(--color-mood);
}

.accent-sound[b-f7yafd1g36] {
    background: var(--color-sound);
}

.accent-mix[b-f7yafd1g36] {
    background: var(--color-mix);
}

.accent-default[b-f7yafd1g36] {
    background: #888;
}

/* Treść pilla */
.pill-body[b-f7yafd1g36] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
}

.pill-label[b-f7yafd1g36] {
    white-space: nowrap;
}

.pill-action[b-f7yafd1g36] {
    background: none;
    border: none;
    color: #aaa;
    cursor: pointer;
    padding: 0;
    font-size: 12px;
    line-height: 1;
}

    .pill-action.add[b-f7yafd1g36] {
        color: #d0d0d0;
        font-weight: bold;
    }

        .pill-action.add:hover[b-f7yafd1g36] {
            color: #ffffff;
        }

    .pill-action:hover[b-f7yafd1g36] {
        color: #fff;
    }

.pill-energy[b-f7yafd1g36] {
    background: rgba( var(--color-energy-rgb), 0.15 );
}

.pill-mood[b-f7yafd1g36] {
    background: rgba( var(--color-mood-rgb), 0.15 );
}

.pill-sound[b-f7yafd1g36] {
    background: rgba( var(--color-sound-rgb), 0.15 );
}

.pill-mix[b-f7yafd1g36] {
    background: rgba( var(--color-mix-rgb), 0.15 );
}

.dsp-pill[b-f7yafd1g36] {
    border: 1px solid #6c6c6c;
    background: rgba(120, 120, 120, 0.12);
    box-shadow: inset 0 0 6px rgba(150, 150, 150, 0.25);
}

    .dsp-pill .pill-accent[b-f7yafd1g36] {
        background: #7a7a7a !important; /* stalowy szary */
    }

    .dsp-pill .pill-label[b-f7yafd1g36] {
        font-weight: 600;
        letter-spacing: 0.3px;
        color: #cfcfcf; /* jasny szary tekst */
    }

    .dsp-pill .pill-source-icon[b-f7yafd1g36] {
        color: #cfcfcf;
    }

    .dsp-pill .pill-action[b-f7yafd1g36] {
        color: #cfcfcf;
    }


.pill-proposed[b-f7yafd1g36] {
    background: rgba(160,160,160,0.12) !important;
    border-color: rgba(160,160,160,0.28) !important;
    color: rgba(220,220,220,0.75) !important;
}

    .pill-proposed .pill-source-icon[b-f7yafd1g36] {
        color: #d0d0d0 !important;
        opacity: 0.8;
    }

.pill-rejected[b-f7yafd1g36] {
    background: rgba(255,60,60,0.10) !important;
    border-color: rgba(255,60,60,0.25) !important;
    color: rgba(255,120,120,0.55) !important;
    text-decoration: line-through;
}

    .pill-rejected .pill-action[b-f7yafd1g36] {
        color: rgba(220,220,220,0.8);
    }

        .pill-rejected .pill-action:hover[b-f7yafd1g36] {
            color: #fff;
        }

    .pill-rejected .pill-accent[b-f7yafd1g36] {
        filter: grayscale(100%) brightness(0.6);
        opacity: 0.5;
    }

.pill-recommended[b-f7yafd1g36] {
    background: rgba(255,215,0,0.15) !important; /* złoty glow */
    border-color: rgba(255,215,0,0.35) !important;
    color: #f5e8a3 !important;
}

    .pill-recommended .pill-source-icon[b-f7yafd1g36] {
        color: #ffd700 !important; /* złota gwiazdka */
        font-weight: bold;
    }

    .pill-recommended .pill-action.reject[b-f7yafd1g36] {
        color: #ff8080; /* czerwony × */
    }

        .pill-recommended .pill-action.reject:hover[b-f7yafd1g36] {
            color: #ffb3b3;
        }
/* /Components/Curation/TagsLinker.razor.rz.scp.css */
/* ROOT */
.tags-linker[b-sfhh8q34s8] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    background: rgba(32, 32, 32, 0.72);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 -6px 12px rgba(0,0,0,0.35);
}

/* --- CATEGORY ROW (inline layout) --- */
.tag-category-row[b-sfhh8q34s8] {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 4px 0;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* --- CATEGORY HEADER INLINE --- */
.tag-category-header-inline[b-sfhh8q34s8] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    cursor: pointer;
    min-width: 140px;
}

.tag-category-title[b-sfhh8q34s8] {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,0.45);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    line-height: 1.1;
}

/* --- INLINE TAGS (assigned) --- */
.tag-inline-tags[b-sfhh8q34s8] {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    column-gap: 6px;
    row-gap: 4px;
}

/* --- EXPANDED BODY --- */
.tag-category-body[b-sfhh8q34s8] {
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-left: 20px;
}

/* --- AVAILABLE TAGS LIST --- */
.tag-subcategory-list[b-sfhh8q34s8] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.subcategory-block[b-sfhh8q34s8] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 6px;
}

.subcategory-inline-container[b-sfhh8q34s8] {
    display: block;
    width: 100%;
    padding-top: 2px;
    padding-bottom: 10px;
}

/* --- LABEL PRZED GRUPĄ --- */
.subcategory-inline-label[b-sfhh8q34s8] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.45);
    white-space: nowrap;
    margin-right: 8px; /* więcej miejsca przed linią */
}

/* --- SEPARATOR MIĘDZY GRUPAMI (delikatniejszy) --- */
.subcategory-separator[b-sfhh8q34s8] {
    padding: 0 6px;
    color: rgba(255,255,255,0.15);
    font-size: 10px;
    white-space: nowrap;
}

/* --- NOWE: GRUPA Z LINIĄ POD PILLS --- */
.subcategory-inline-group[b-sfhh8q34s8] {
    position: relative;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 6px;
    row-gap: 4px;
    padding: 0 4px; /* delikatny bufor */
}

    /* linia biegnąca pod całą grupą */
    .subcategory-inline-group[b-sfhh8q34s8]::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: 1px;
        background: rgba(255,255,255,0.08);
        transform: translateY(-50%);
        z-index: 0;
    }

/* pille nad linią */
.curation-pill[b-sfhh8q34s8] {
    position: relative;
    z-index: 1;
    margin-right: 6px !important;
    margin-bottom: 4px !important;
}

/* zakończenie grupy */
.subcategory-end[b-sfhh8q34s8] {
    position: relative;
    z-index: 1;
    padding-left: 6px;
    color: rgba(255,255,255,0.35);
    font-size: 10px;
    white-space: nowrap;
}

/* --- CATEGORY COLORS (tylko nagłówki) --- */
.tag-category-title.energy[b-sfhh8q34s8] {
    color: var(--color-energy);
}

.tag-category-title.mood[b-sfhh8q34s8] {
    color: var(--color-mood);
}

.tag-category-title.sound[b-sfhh8q34s8] {
    color: var(--color-sound);
}

.tag-category-title.mix[b-sfhh8q34s8] {
    color: var(--color-mix);
}
/* /Components/Graphs/Dashboard/CurationOverviewSunburstChart.razor.rz.scp.css */
#curationOverviewSunburst[b-skuey019k1], .plotly-graph-div[b-skuey019k1] {
    background-color: transparent !important;
}
/* /Components/Graphs/Dashboard/DomainByGenreRadarChart.razor.rz.scp.css */
#domainCurationRadarByGenre[b-8os26mocii], .plotly-graph-div[b-8os26mocii] {
    background-color: transparent !important;
}
/* /Components/Graphs/Dashboard/DomainGapsVerticalBarChart.razor.rz.scp.css */
body[b-y9ro5mvluf] {
}
/* /Components/Graphs/Dashboard/DomainPerceptionHorizontalBarChart.razor.rz.scp.css */
#domainPerceptionCuration[b-6iyzbrp5q0], .plotly-graph-div[b-6iyzbrp5q0] {
    background-color: transparent !important;
}
/* /Components/Graphs/Dashboard/DomainRadarChart.razor.rz.scp.css */
#domainCurationRadar[b-c7l0vlzlkw], .plotly-graph-div[b-c7l0vlzlkw] {
    background-color: transparent !important;
}
/* /Components/Graphs/Dashboard/GenreCurationDetailsSunburstChart.razor.rz.scp.css */
#genreCurationDetails[b-6fbxdgh6xy], .plotly-graph-div[b-6fbxdgh6xy] {
    background-color: transparent !important;
}

/* wymusza, żeby kontener i svg zajmowały 100% rodzica */
.js-plotly-plot[b-6fbxdgh6xy],
.js-plotly-plot .plotly[b-6fbxdgh6xy],
.js-plotly-plot .plotly .main-svg[b-6fbxdgh6xy],
.js-plotly-plot svg[b-6fbxdgh6xy] {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
}
/* /Components/Graphs/Dashboard/GenreCurationOverviewSunburstChart.razor.rz.scp.css */
#genreCurationOverview[b-mv26a2557m], .plotly-graph-div[b-mv26a2557m] {
    background-color: transparent !important;
}

/* wymusza, żeby kontener i svg zajmowały 100% rodzica */
.js-plotly-plot[b-mv26a2557m],
.js-plotly-plot .plotly[b-mv26a2557m],
.js-plotly-plot .plotly .main-svg[b-mv26a2557m],
.js-plotly-plot svg[b-mv26a2557m] {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
}
/* /Components/Graphs/Dashboard/GenreCurationOverviewSunburstChartWrapper.razor.rz.scp.css */
/* -------------------------
   GenreCurationOverviewSunburstChartWrapper final
   ------------------------- */

/* wrapper: flex column, toolbar nad wykresem, plot-area wypełnia resztę */
.genre-sunburst-wrapper[b-nmf76tiald] {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  background: transparent;
  align-items: stretch;
  justify-content: stretch;
}

/* TOOLBAR nad wykresem: nie absolutny, nie wypycha layoutu */
.genre-sunburst-wrapper .genre-toolbar[b-nmf76tiald],
.genre-sunburst-wrapper .toolbar[b-nmf76tiald] {
  position: static;               /* ważne: toolbar w flow dokumentu */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(0,0,0,0.36);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex: 0 0 auto;                 /* toolbar nie rośnie; wykres zajmuje resztę */
  z-index: 20;
  box-sizing: border-box;
}

/* układ toolbaru: left / center / right */
.genre-sunburst-wrapper .toolbar-left[b-nmf76tiald] { display:flex; gap:8px; align-items:center; }
.genre-sunburst-wrapper .toolbar-center[b-nmf76tiald] { display:flex; align-items:center; justify-content:center; flex:1; padding:0 8px; }
.genre-sunburst-wrapper .toolbar-right[b-nmf76tiald] { display:flex; align-items:center; justify-content:flex-end; gap:8px; }

/* ukrywanie toolbaru bez reflow */
.genre-sunburst-wrapper .genre-toolbar.hidden[b-nmf76tiald],
.genre-sunburst-wrapper .toolbar.hidden[b-nmf76tiald] { display: none !important; }

/* tytuł/label w toolbarze */
.genre-sunburst-wrapper .toolbar-title[b-nmf76tiald] {
  font-size: 0.95rem;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* PLOT AREA: wykresy wypełniają resztę wysokości wrappera */
.genre-plot-area[b-nmf76tiald] {
  display: flex;
  flex: 1 1 0%;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  align-items: stretch;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Jeśli komponent renderuje dodatkowe wrappery, upewnij się, że też są flexami */
.genre-sunburst-wrapper > div[b-nmf76tiald],
.genre-sunburst-wrapper .inner-wrapper[b-nmf76tiald],
.genre-plot-area > div[b-nmf76tiald] {
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
  min-height: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

/* chart-card i chart-canvas wypełniają slide / plot area */
.chart-card[b-nmf76tiald],
.chart-canvas[b-nmf76tiald],
.genre-plot-area .chart-card[b-nmf76tiald],
.genre-plot-area .chart-canvas[b-nmf76tiald] {
  display: flex;
  flex: 1 1 0%;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  align-items: stretch;
  justify-content: center;
}

/* Track/slide zabezpieczenia (jeśli karuzela używana) */
.carousel-wrapper[b-nmf76tiald],
.carousel-viewport[b-nmf76tiald],
.carousel-track[b-nmf76tiald],
.carousel-slide[b-nmf76tiald] {
  height: 100% !important;
  min-height: 0 !important;
  box-sizing: border-box;
}

/* Wymuszenie 100% dla wszystkich znanych kontenerów Plotly i svg
   (nadpisuje inline style / atrybuty SVG) */
.genre-plot-area .js-plotly-plot[b-nmf76tiald],
.genre-plot-area .plotly-graph-div[b-nmf76tiald],
.genre-plot-area .plot-container[b-nmf76tiald],
.genre-plot-area .plotly[b-nmf76tiald],
.genre-plot-area .user-select-none.svg-container[b-nmf76tiald],
.genre-plot-area svg[b-nmf76tiald],
.genre-plot-area svg.main-svg[b-nmf76tiald] {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  background: transparent !important;
}

/* dodatkowe zabezpieczenie: jeśli jakiś element ma inline height, nadpisz go */
#genresOverview[b-nmf76tiald],
#genreDetail[b-nmf76tiald],
.genres-overview[b-nmf76tiald],
.genre-detail[b-nmf76tiald] {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
}

/* Przyciski toolbaru */
.genre-sunburst-wrapper .btn[b-nmf76tiald] {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
}

/* Animacja przejścia wysokości, żeby nie skakało przy zmianie trybu */
.genre-sunburst-wrapper[b-nmf76tiald],
.genre-plot-area[b-nmf76tiald],
.genre-sunburst-wrapper .chart-canvas[b-nmf76tiald] {
  transition: height 160ms ease, min-height 160ms ease;
}

/* Debug helpers (usuń w produkcji) */
.genre-sunburst-wrapper.debug-outline[b-nmf76tiald] { outline: 1px dashed rgba(255,0,0,0.18); }
.genre-sunburst-wrapper .chart-canvas.debug-outline[b-nmf76tiald] { outline: 1px dashed rgba(0,255,0,0.18); }
.genre-sunburst-wrapper .plotly-graph-div.debug-outline[b-nmf76tiald] { outline: 1px dashed rgba(0,0,255,0.18); }

/* toolbar nad wykresem (w flow, nie absolutny) */
.genre-sunburst-wrapper[b-nmf76tiald] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

.genre-toolbar[b-nmf76tiald] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(0,0,0,0.36);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex: 0 0 auto; /* kluczowe: toolbar nie rośnie */
    z-index: 20;
    box-sizing: border-box;
}

    .genre-toolbar.hidden[b-nmf76tiald] {
        display: none !important;
    }

    .genre-toolbar .toolbar-left[b-nmf76tiald],
    .genre-toolbar .toolbar-center[b-nmf76tiald],
    .genre-toolbar .toolbar-right[b-nmf76tiald] {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .genre-toolbar .toolbar-center[b-nmf76tiald] {
        flex: 1;
        justify-content: center;
        padding: 0 8px;
    }

.genre-plot-area[b-nmf76tiald] {
    display: flex;
    flex: 1 1 0%;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    align-items: stretch;
    justify-content: center;
    overflow: hidden;
}

    /* wymuszenie 100% dla Plotly i svg (nadpisuje inline/atrybuty) */
    .genre-plot-area .js-plotly-plot[b-nmf76tiald],
    .genre-plot-area .plotly-graph-div[b-nmf76tiald],
    .genre-plot-area .plot-container[b-nmf76tiald],
    .genre-plot-area svg[b-nmf76tiald],
    .genre-plot-area svg.main-svg[b-nmf76tiald] {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

/* zabezpieczenie łańcucha rodziców */
.carousel-wrapper[b-nmf76tiald],
.carousel-viewport[b-nmf76tiald],
.carousel-track[b-nmf76tiald],
.carousel-slide[b-nmf76tiald],
.chart-card[b-nmf76tiald],
.chart-canvas[b-nmf76tiald] {
    height: 100% !important;
    min-height: 0 !important;
}

/* umieść toolbar w prawym górnym rogu kontenera */
    .genre-sunburst-wrapper > .genreDetailToolbar[b-nmf76tiald] {
        position: absolute;
        top: 8px;
        right: 8px;
        z-index: 999;
        display: flex;
        gap: 8px;
        align-items: center;
        background: rgba(0,0,0,0.36);
        padding: 6px 10px;
        border-radius: 6px;
        box-shadow: 0 6px 18px rgba(0,0,0,0.25);
        pointer-events: auto;
    }

        .genre-sunburst-wrapper > .genreDetailToolbar.hidden[b-nmf76tiald] {
            display: none !important;
        }

        .genre-sunburst-wrapper > .genreDetailToolbar .btn[b-nmf76tiald] {
            padding: 6px 10px;
            border-radius: 6px;
            border: 1px solid rgba(255,255,255,0.06);
            background: rgba(255,255,255,0.03);
            color: #fff;
        }

        .genre-sunburst-wrapper > .genreDetailToolbar .ml-2[b-nmf76tiald] {
            color: #fff;
            max-width: 28ch;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
/* /Components/Graphs/Dashboard/GenrePresenceSunburstChart.razor.rz.scp.css */
#genrePresence[b-a6egx1zsn8], .plotly-graph-div[b-a6egx1zsn8] {
    background-color: transparent !important;
}
/* /Components/Graphs/Dashboard/MissingCurationOverviewSunburstChart.razor.rz.scp.css */
#missingCurationOverviewSunburst[b-wh3xbik2bm], .plotly-graph-div[b-wh3xbik2bm] {
    background-color: transparent !important;
}
/* /Components/Graphs/Dashboard/PerceptionGapsByGenreHeatmapChart.razor.rz.scp.css */
body[b-ib6b9fimo1] {
}
/* /Components/Graphs/Dashboard/PerceptionGapsHorizontalBarChart.razor.rz.scp.css */
body[b-l2rtlaq02a] {
}
/* /Components/Graphs/DashboardCarouselCharts.razor.rz.scp.css */
/* CarouselCharts.razor.css - pełne wypełnienie kontenera rodzica */

/* reset box-sizing */
*[b-m6xu3jrd2t],
*[b-m6xu3jrd2t]::before,
*[b-m6xu3jrd2t]::after {
    box-sizing: border-box;
}

/* wrapper: wypełnia rodzica (nie ustawia viewportu na 48vh) */
.carousel-wrapper[b-m6xu3jrd2t] {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* viewport: zajmuje całą wysokość wrappera */
.carousel-viewport[b-m6xu3jrd2t] {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    position: relative;
    touch-action: pan-y;
    display: flex;
    flex-direction: column;
}

/* track: flex, transform animowany, wysokość 100% */
.carousel-track[b-m6xu3jrd2t] {
    display: flex;
    flex-direction: row;
    transition: transform 360ms cubic-bezier(.2,.8,.2,1);
    will-change: transform;
    height: 100%;
    transform: translateZ(0);
}

/* slide: dokładnie 100% viewportu, bez paddingu/margins */
.carousel-slide[b-m6xu3jrd2t] {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

    /* opcjonalny efekt dla aktywnego slajdu */
    .carousel-slide.active .chart-card[b-m6xu3jrd2t] {
        transform: scale(1.01);
        transition: transform 220ms ease;
    }

/* karta i canvas: wypełniają slide w 100% */
.chart-card[b-m6xu3jrd2t] {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
    background: transparent;
    box-sizing: border-box;
}

.chart-canvas[b-m6xu3jrd2t] {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
    box-sizing: border-box;
}

/* controls jako overlay nad karuzelą (nie zmienia wysokości viewportu) */
.carousel-controls[b-m6xu3jrd2t] {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    display: flex;
    gap: 12px;
    align-items: center;
    pointer-events: auto;
}

/* dots i przyciski */
.carousel-dots[b-m6xu3jrd2t] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.dot[b-m6xu3jrd2t] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    border: none;
    cursor: pointer;
}

    .dot.active[b-m6xu3jrd2t] {
        background: var(--accent,#f6c84c);
        box-shadow: 0 0 6px rgba(246,200,76,0.25);
    }

.carousel-controls .btn[b-m6xu3jrd2t] {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
}

/* wymuszenie 100% dla wewnętrznych divów Plotly */
.carousel-viewport .plotly-graph-div[b-m6xu3jrd2t],
.carousel-viewport .plotly-container[b-m6xu3jrd2t],
.carousel-viewport .chart-canvas > div[b-m6xu3jrd2t] {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* responsywność: nic nie narzucamy wysokości, rodzic decyduje */
@media (min-width:1400px) {
    /* ewentualne drobne dopasowanie paddingu slajdów */
    .carousel-slide[b-m6xu3jrd2t] {
        padding: 0;
    }
}

/* Wyrównanie wysokości slajdów i zabezpieczenia dla trzeciego wykresu */
.carousel-track[b-m6xu3jrd2t] {
    align-items: stretch;
}
/* ważne: track rozciąga slajdy */
.carousel-slide[b-m6xu3jrd2t] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    min-height: 0;
}

/* karta i canvas muszą być flex itemami, by wypełnić slajd */
.chart-card[b-m6xu3jrd2t] {
    display: flex;
    flex: 1 1 0%;
    min-height: 0;
    height: 100%;
    padding: 0;
    margin: 0;
}

.chart-canvas[b-m6xu3jrd2t] {
    display: flex;
    flex: 1 1 0%;
    min-height: 0;
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

/* jeśli wrapper wewnątrz trzeciego slajdu ma klasę .genre-sunburst-wrapper */
.genre-sunburst-wrapper[b-m6xu3jrd2t] {
    display: flex;
    flex-direction: column;
    flex: 1 1 0%;
    min-height: 0;
    height: 100%;
    position: relative;
}

    /* toolbar absolutny, żeby nie wypychał wykresu */
    .genre-sunburst-wrapper .toolbar[b-m6xu3jrd2t] {
        position: absolute;
        top: 8px;
        left: 8px;
        z-index: 20;
    }

/* wymuszenie 100% dla wewnętrznych divów Plotly */
.carousel-viewport .plotly-graph-div[b-m6xu3jrd2t],
.carousel-viewport .plotly-container[b-m6xu3jrd2t],
.carousel-viewport .chart-canvas > div[b-m6xu3jrd2t] {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* tymczasowe debugowanie: obrys pokaże, który element ma nieprawidłowy box */
.carousel-slide.debug-outline[b-m6xu3jrd2t] {
    outline: 1px dashed rgba(255,0,0,0.25);
}

.chart-card.debug-outline[b-m6xu3jrd2t] {
    outline: 1px dashed rgba(0,255,0,0.25);
}

.chart-canvas.debug-outline[b-m6xu3jrd2t] {
    outline: 1px dashed rgba(0,0,255,0.25);
}

/* /Components/Graphs/DramaturgyFlowlineChart.razor.rz.scp.css */

#dramaturgyFlowlineChart[b-rz4mfk2m1n], .plotly-graph-div[b-rz4mfk2m1n] {
    background-color: transparent !important;
}
/* /Components/Graphs/OppositesMatrixPlot.razor.rz.scp.css */
body[b-wrixikhzpb] {
}
/* /Components/Graphs/SankeyFlowPlot.razor.rz.scp.css */
body[b-v21iqxj0g9] {
}
/* /Components/Graphs/SimilarityMatrixPlot.razor.rz.scp.css */
body[b-gps9hu920d] {
}
/* /Components/Graphs/WorkspaceCarouselCharts.razor.rz.scp.css */
.chart-carousel[b-10r43uta59] {
    position: relative;
    width: 100%;
    height: 330px;
}

.carousel-content[b-10r43uta59] {
    width: 100%;
    height: 100%;
}

.carousel-controls[b-10r43uta59] {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

    .carousel-controls button[b-10r43uta59] {
        pointer-events: auto;
        background: rgba(255,255,255,0.05);
        border: none;
        color: #fff;
        font-size: 24px;
        padding: 6px 12px;
        border-radius: 6px;
        cursor: pointer;
        transition: background 0.2s;
    }

        .carousel-controls button:hover[b-10r43uta59] {
            background: rgba(255,255,255,0.15);
        }

.carousel-dots[b-10r43uta59] {
    position: absolute;
    bottom: 8px;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 6px;
}

    .carousel-dots .dot[b-10r43uta59] {
        width: 8px;
        height: 8px;
        background: rgba(255,255,255,0.2);
        border-radius: 50%;
        cursor: pointer;
        transition: background 0.2s;
    }

        .carousel-dots .dot.active[b-10r43uta59] {
            background: rgba(255,255,255,0.8);
        }
/* /Components/Ontology/OntologyDomainMap.razor.rz.scp.css */
/* === ROOT PANEL – BITWIG MAP BLOCK (ULTRA COMPACT) === */

.ontology-domain.compact[b-6bpmou337r] {
    background: linear-gradient( 180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.03) 100% );
    border: 2px solid var(--domain-color);
    border-radius: 12px;
    padding: 16px 20px 18px 20px;
    box-shadow: 0 0 18px rgba(0,0,0,0.35), inset 0 0 10px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: var(--domain-width, 900px);
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* === DOMAIN HEADER === */

.domain-header-expanded[b-6bpmou337r] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

.domain-header-row[b-6bpmou337r] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

/* Nazwa domeny */
.domain-title[b-6bpmou337r] {
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    color: var(--domain-color);
}

/* PROMPT domeny — mocny, charakterystyczny */
.domain-prompt[b-6bpmou337r] {
    font-size: 13px;
    font-weight: 700;
    opacity: 0.95;
    white-space: nowrap;
    margin-left: 12px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(255,255,255,0.08);
}

/* Opis domeny */
.domain-description-full[b-6bpmou337r] {
    font-size: 12px;
    opacity: 0.75;
    line-height: 1.32;
}

/* === PERCEPTIONS === */

.domain-body[b-6bpmou337r] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ontology-section[b-6bpmou337r] {
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Percepcja: tytuł + prompt */
.section-header[b-6bpmou337r] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.section-title[b-6bpmou337r] {
    font-size: 14px;
    font-weight: 600;
    color: var(--domain-color);
}

/* PROMPT percepcji — mocniejszy, bardziej widoczny */
.section-prompt[b-6bpmou337r] {
    font-size: 12px;
    font-weight: 700;
    opacity: 0.9;
    white-space: nowrap;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(255,255,255,0.06);
}

/* Usuwamy short description — niepotrzebne */

/* Full description percepcji */
.section-description-full[b-6bpmou337r] {
    font-size: 11px;
    opacity: 0.65;
    margin-top: 4px;
}

/* === CONTEXTS (SOUND ONLY) === */

.context-block[b-6bpmou337r] {
    margin-top: 10px;
    padding-left: 10px;
    border-left: 3px solid var(--domain-color);
}

.context-header[b-6bpmou337r] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.context-title[b-6bpmou337r] {
    font-size: 13px;
    font-weight: 600;
}

/* PROMPT kontekstu — mocny */
.context-prompt[b-6bpmou337r] {
    font-size: 11px;
    font-weight: 700;
    opacity: 0.85;
    white-space: nowrap;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(255,255,255,0.06);
}

/* Usuwamy short description — niepotrzebne */

/* Full description kontekstu */
.context-description-full[b-6bpmou337r] {
    font-size: 11px;
    opacity: 0.65;
    margin-top: 4px;
}

/* === TAGS (EXPANDED, COMPACT) === */

.tag-blocks[b-6bpmou337r] {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tag-block[b-6bpmou337r] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    max-width: 520px;
}

.tag-prompt[b-6bpmou337r] {
    font-size: 11px;
    opacity: 0.75;
    white-space: nowrap;
}

/* TagPill alignment */
.tag-block .curation-pill[b-6bpmou337r] {
    align-self: flex-start;
}

/* TagPill accent color override */
.tag-block .pill-accent[b-6bpmou337r] {
    background: var(--domain-color) !important;
}

.collapsible[b-6bpmou337r] {
    cursor: pointer;
}

.ontology-section[b-6bpmou337r],
.context-block[b-6bpmou337r] {
    transition: all 0.25s ease;
}

.collapsible:hover .section-title[b-6bpmou337r],
.collapsible:hover .context-title[b-6bpmou337r] {
    text-decoration: underline;
}


/* /Components/Video/VideoPlayer.razor.rz.scp.css */
.video-wrapper[b-pjvkoi1tkp] {
    position: relative;
    width: 100%;
    height: 100%;
}

/* PLAY BUTTON OVERLAY */
.video-play-button[b-pjvkoi1tkp] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.6);
    color: white;
    font-size: 40px;
    cursor: pointer;
    transition: opacity 0.3s ease;
    z-index: 10;
}

    .video-play-button:hover[b-pjvkoi1tkp] {
        background: rgba(0,0,0,0.75);
    }

/* FULLSCREEN VIDEO */
.fullscreen-video[b-pjvkoi1tkp] {
    width: 100%;
    min-height: calc(100dvh - 56px);
    height: calc(100dvh - 56px);
    overflow: hidden;
    position: relative;
}

/* CUSTOM SIZE VIDEO */
.custom-video[b-pjvkoi1tkp] {
    position: relative;
    overflow: hidden;
    min-height: unset;
}

/* VIDEO */
.hero-video[b-pjvkoi1tkp] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
/* /Components/Workspace/DramaturgyTable.razor.rz.scp.css */


/* Kontener z pionowym scrollem */
.workspace-table-container[b-ot1f4gs3uq] {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    background: transparent;
}

/* Tabela przezroczysta */
.workspace-table[b-ot1f4gs3uq] {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    background: transparent;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #b0b0b0 !important;
    table-layout: fixed;
}

    .workspace-table td[b-ot1f4gs3uq],
    .workspace-table th[b-ot1f4gs3uq] {
        color: #b0b0b0 !important; /* ten sam kolor co nagłówki */
        background: transparent !important;
        border-right: 1px solid rgba(255,255,255,0.06);
        display: table-cell !important;
    }

        /* usuń linię po ostatniej kolumnie */
        .workspace-table td:last-child[b-ot1f4gs3uq],
        .workspace-table th:last-child[b-ot1f4gs3uq] {
            border-right: none;
        }


    /* Sticky header */
    .workspace-table thead th[b-ot1f4gs3uq] {
        position: sticky;
        top: 0;
        z-index: 10;
        background: rgba(0,0,0,0.35); /* półprzezroczysty, bitwig-like */
        backdrop-filter: blur(4px);
        padding: 6px 8px;
        font-size: 11px;
        font-weight: 500;
        color: #b0b0b0;
        text-transform: none;
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    /* Komórki */
    .workspace-table td[b-ot1f4gs3uq] {
        background: transparent !important;
        padding: 4px 8px;
        border-bottom: 1px solid rgba(255,255,255,0.05);
        vertical-align: middle;
    }

    /* Hover na wierszu */
    .workspace-table tr:hover td[b-ot1f4gs3uq] {
        background: rgba(255,255,255,0.03) !important;
    }

/* Scrollbar – cienki, elegancki */
.workspace-table-container[b-ot1f4gs3uq]::-webkit-scrollbar {
    width: 6px;
}

.workspace-table-container[b-ot1f4gs3uq]::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 3px;
}

    .workspace-table-container[b-ot1f4gs3uq]::-webkit-scrollbar-thumb:hover {
        background: rgba(255,255,255,0.25);
    }

.workspace-table thead th.energy[b-ot1f4gs3uq] {
    color: var(--color-energy) !important;
}

.workspace-table thead th.mood-header[b-ot1f4gs3uq] {
    color: var(--color-mood) !important;
    text-align: center;
    padding 0;
}

.workspace-table thead th.sound[b-ot1f4gs3uq] {
    color: var(--color-sound) !important;
}

.workspace-table thead th.mix[b-ot1f4gs3uq] {
    color: var(--color-mix) !important;
}

.workspace-table th.playColumn[b-ot1f4gs3uq],
.workspace-table td.playColumn[b-ot1f4gs3uq] {
    width: 40px;
}

.mood-subtitles[b-ot1f4gs3uq] {
    display: flex;
    justify-items: center;
    align-items: end;
    width: 100%;
}

.vertical-label[b-ot1f4gs3uq] {
    display: block;
    margin: 0 auto;
    width: 26px;
    text-align: center;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 11px;
    opacity: 0.7;
    font-weight: bold;
}

.mood-axis-overlay[b-ot1f4gs3uq] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
}

.name-artist-cell[b-ot1f4gs3uq] {
    display: flex !important; /* nadpisujemy table-cell */
    flex-direction: row;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.track-text[b-ot1f4gs3uq] {
    display: flex;
    flex-direction: column; /* tytuł nad, autor pod */
    min-width: 0;
    overflow: hidden;
}

.track-name[b-ot1f4gs3uq] {
    font-weight: 600;
    color: #e0e0e0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.track-artist[b-ot1f4gs3uq] {
    font-size: 11px;
    font-style: italic;
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}


.cue-btn[b-ot1f4gs3uq] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    position: relative;
    /* Ciemny metaliczny korpus */
    background: radial-gradient(circle at 50% 50%, #3a3a3a 0%, #2e2e2e 40%, #1f1f1f 100%);
    border: 2px solid #1a1a1a;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.05), inset 0 -1px 2px rgba(0,0,0,0.6), 0 0 4px rgba(0,0,0,0.4);
    transition: transform 0.1s ease;
}

    /* RING */
    .cue-btn[b-ot1f4gs3uq]::after {
        content: "";
        position: absolute;
        inset: 2px;
        border-radius: 50%;
        /* Kolor systemowy */
        box-shadow: 0 0 0 2px #f0b400 inset;
        transition: box-shadow 0.2s ease;
    }

/* TRÓJKĄT PLAY */
.cue-icon[b-ot1f4gs3uq] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-40%, -50%);
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    /* neutralny popiel */
    border-left: 10px solid #d0d0d0;
    transition: border-left-color 0.2s ease;
}

/* HOVER — ring + trójkąt rozświetlają się */
.cue-btn:hover[b-ot1f4gs3uq]::after {
    box-shadow: 0 0 0 2px #ffd24d inset;
}

.cue-btn:hover .cue-icon[b-ot1f4gs3uq] {
    border-left-color: #f0f0f0;
}

/* ACTIVE — kliknięcie */
.cue-btn:active[b-ot1f4gs3uq] {
    transform: scale(0.92);
}

    .cue-btn:active[b-ot1f4gs3uq]::after {
        box-shadow: 0 0 0 2px #c99700 inset;
    }

/* PLAYING — ring i trójkąt zmieniają kolor */
.cue-btn.playing[b-ot1f4gs3uq]::after {
    box-shadow: 0 0 0 2px #00ff9c inset; /* zielonkawy BitWyg vibe */
}

.cue-btn.playing .cue-icon[b-ot1f4gs3uq] {
    border-left-color: #00ff9c;
}

.selected-row[b-ot1f4gs3uq] {
    background-color: rgba(0, 150, 255, 0.15);
}
/* /Components/Workspace/TechnicalTable.razor.rz.scp.css */


/* Kontener z pionowym scrollem */
.workspace-table-container[b-6ttf8f3ne9] {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    background: transparent;
}

/* Tabela przezroczysta */
.workspace-table[b-6ttf8f3ne9] {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    background: transparent;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #b0b0b0 !important;
    table-layout: fixed;
}

    .workspace-table td[b-6ttf8f3ne9],
    .workspace-table th[b-6ttf8f3ne9] {
        color: #b0b0b0 !important; /* ten sam kolor co nagłówki */
        background: transparent !important;
        border-right: 1px solid rgba(255,255,255,0.06);
        display: table-cell !important;
    }

        /* usuń linię po ostatniej kolumnie */
        .workspace-table td:last-child[b-6ttf8f3ne9],
        .workspace-table th:last-child[b-6ttf8f3ne9] {
            border-right: none;
        }


    /* Sticky header */
    .workspace-table thead th[b-6ttf8f3ne9] {
        position: sticky;
        top: 0;
        z-index: 10;
        background: rgba(0,0,0,0.35); /* półprzezroczysty, bitwig-like */
        backdrop-filter: blur(4px);
        padding: 6px 8px;
        font-size: 11px;
        font-weight: 500;
        color: #b0b0b0;
        text-transform: none;
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    /* Komórki */
    .workspace-table td[b-6ttf8f3ne9] {
        background: transparent !important;
        padding: 4px 8px;
        border-bottom: 1px solid rgba(255,255,255,0.05);
        vertical-align: middle;
    }

    /* Hover na wierszu */
    .workspace-table tr:hover td[b-6ttf8f3ne9] {
        background: rgba(255,255,255,0.03) !important;
    }

/* Scrollbar – cienki, elegancki */
.workspace-table-container[b-6ttf8f3ne9]::-webkit-scrollbar {
    width: 6px;
}

.workspace-table-container[b-6ttf8f3ne9]::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 3px;
}

    .workspace-table-container[b-6ttf8f3ne9]::-webkit-scrollbar-thumb:hover {
        background: rgba(255,255,255,0.25);
    }

.workspace-table thead th.energy[b-6ttf8f3ne9] {
    color: var(--color-energy) !important;
}

.workspace-table thead th.mood-header[b-6ttf8f3ne9] {
    color: var(--color-mood) !important;
    text-align: center;
    padding 0;
}

.workspace-table thead th.sound[b-6ttf8f3ne9] {
    color: var(--color-sound) !important;
}

.workspace-table thead th.mix[b-6ttf8f3ne9] {
    color: var(--color-mix) !important;
}

.workspace-table th.playColumn[b-6ttf8f3ne9],
.workspace-table td.playColumn[b-6ttf8f3ne9] {
    width: 40px;
}

.mood-subtitles[b-6ttf8f3ne9] {
    display: flex;
    justify-items: center;
    align-items: end;
    width: 100%;
}

.vertical-label[b-6ttf8f3ne9] {
    display: block;
    margin: 0 auto;
    width: 26px;
    text-align: center;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 11px;
    opacity: 0.7;
    font-weight: bold;
}

.mood-axis-overlay[b-6ttf8f3ne9] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
}

.name-artist-cell[b-6ttf8f3ne9] {
    display: flex !important; /* nadpisujemy table-cell */
    flex-direction: row;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.track-text[b-6ttf8f3ne9] {
    display: flex;
    flex-direction: column; /* tytuł nad, autor pod */
    min-width: 0;
    overflow: hidden;
}

.track-name[b-6ttf8f3ne9] {
    font-weight: 600;
    color: #e0e0e0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.track-artist[b-6ttf8f3ne9] {
    font-size: 11px;
    font-style: italic;
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}


.cue-btn[b-6ttf8f3ne9] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    position: relative;
    /* Ciemny metaliczny korpus */
    background: radial-gradient(circle at 50% 50%, #3a3a3a 0%, #2e2e2e 40%, #1f1f1f 100%);
    border: 2px solid #1a1a1a;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.05), inset 0 -1px 2px rgba(0,0,0,0.6), 0 0 4px rgba(0,0,0,0.4);
    transition: transform 0.1s ease;
}

    /* RING */
    .cue-btn[b-6ttf8f3ne9]::after {
        content: "";
        position: absolute;
        inset: 2px;
        border-radius: 50%;
        /* Kolor systemowy */
        box-shadow: 0 0 0 2px #f0b400 inset;
        transition: box-shadow 0.2s ease;
    }

/* TRÓJKĄT PLAY */
.cue-icon[b-6ttf8f3ne9] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-40%, -50%);
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    /* neutralny popiel */
    border-left: 10px solid #d0d0d0;
    transition: border-left-color 0.2s ease;
}

/* HOVER — ring + trójkąt rozświetlają się */
.cue-btn:hover[b-6ttf8f3ne9]::after {
    box-shadow: 0 0 0 2px #ffd24d inset;
}

.cue-btn:hover .cue-icon[b-6ttf8f3ne9] {
    border-left-color: #f0f0f0;
}

/* ACTIVE — kliknięcie */
.cue-btn:active[b-6ttf8f3ne9] {
    transform: scale(0.92);
}

    .cue-btn:active[b-6ttf8f3ne9]::after {
        box-shadow: 0 0 0 2px #c99700 inset;
    }

/* PLAYING — ring i trójkąt zmieniają kolor */
.cue-btn.playing[b-6ttf8f3ne9]::after {
    box-shadow: 0 0 0 2px #00ff9c inset; /* zielonkawy BitWyg vibe */
}

.cue-btn.playing .cue-icon[b-6ttf8f3ne9] {
    border-left-color: #00ff9c;
}

.selected-row[b-6ttf8f3ne9] {
    background-color: rgba(0, 150, 255, 0.15);
}
/* /Components/Workspace/WorkspaceMoodDualBars.razor.rz.scp.css */
.dual-bars[b-s8kbgwn81d] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bar[b-s8kbgwn81d] {
    position: relative;
    width: 100%;
    height: 10px;
    background: rgba(255,255,255,0.04); /* subtelne tło */
    border-radius: 2px;
    overflow: visible;
}

/* Wypełnienie */
.bar-fill[b-s8kbgwn81d] {
    position: absolute;
    top: 0;
    height: 100%;
    left: var(--start);
    width: var(--width);
    border-radius: 2px;
}

/* Kolory */
.bar.activation .bar-fill[b-s8kbgwn81d] {
    background: white;
}

.bar.valence .bar-fill[b-s8kbgwn81d] {
    background: #888; /* stonowany szary */
}

/* Tooltip */
.bar-tooltip[b-s8kbgwn81d] {
    position: absolute;
    top: -6px;
    left: 100%;
    transform: translate(-50%, -120%);
    background: rgba(0,0,0,0.85);
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 10px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
}

.bar-fill:hover .bar-tooltip[b-s8kbgwn81d] {
    opacity: 1;
    transform: translate(-50%, -140%);
}
/* /Components/Workspace/WorkspaceMoods.razor.rz.scp.css */
.workspace-table td.mood[b-n3egv85wfm] {
    width: 26px !important;
    min-width: 26px !important;
    max-width: 26px !important;
    border: none !important;
    background: transparent !important;
    text-align: center;
}

.mood-cell[b-n3egv85wfm] {
    position: relative;
}

.mood-tag[b-n3egv85wfm] {
    display: block;
    width: 16px;
    height: 20px;
    border-radius: 3px;
    margin: 0 auto;
}

    .mood-tag.missing[b-n3egv85wfm] {
        background: #777 !important;
        opacity: 0.15 !important;
        filter: grayscale(100%);
    }
/* /Components/Workspace/WorkspaceParameterBars.razor.rz.scp.css */
.dual-bars[b-no2czo17s9] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bar[b-no2czo17s9] {
    position: relative;
    width: 100%;
    height: 10px;
    background: rgba(255,255,255,0.04);
    border-radius: 2px;
    overflow: visible;
}

.bar-fill[b-no2czo17s9] {
    position: absolute;
    top: 0;
    height: 100%;
    left: var(--start);
    width: var(--width);
    border-radius: 2px;
}

/* Kolory – oba białe, ale drugi lekko przygaszony */
.bar.original .bar-fill[b-no2czo17s9] {
    background: white;
}

.bar.modified .bar-fill[b-no2czo17s9] {
    background: rgba(255,255,255,0.55);
}

/* Tooltip */
.bar-tooltip[b-no2czo17s9] {
    position: absolute;
    top: -6px;
    left: 100%;
    transform: translate(-50%, -120%);
    background: rgba(0,0,0,0.85);
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 10px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
}

.bar-fill:hover .bar-tooltip[b-no2czo17s9] {
    opacity: 1;
    transform: translate(-50%, -140%);
}

/* Etykiety skrajne */
.bar-min[b-no2czo17s9],
.bar-max[b-no2czo17s9] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    opacity: 0.45;
    color: rgba(255,255,255,0.6);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
}

.bar-min[b-no2czo17s9] {
    left: -2px; /* minimalny offset */
}

.bar-max[b-no2czo17s9] {
    right: -2px;
}
/* /Components/Workspace/WorkspaceScalarBar.razor.rz.scp.css */
.scalar-bar[b-cgduf93xlf] {
    display: inline-block;
    min-width: 40px; /* STAŁA SZEROKOŚĆ */
    height: 20px; /* STAŁA WYSOKOŚĆ */
    position: relative;
    vertical-align: middle;
    box-sizing: border-box; /* KLUCZOWE */
}

    .scalar-bar .center-line[b-cgduf93xlf] {
        position: absolute;
        left: 50%;
        top: 0;
        bottom: 0;
        width: 1px;
        background: rgba(255,255,255,0.25);
    }

    /* LINIA NA WIERZCHU */
    .scalar-bar[b-cgduf93xlf]::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 0;
        bottom: 0;
        width: 1px;
        background: rgba(255,255,255,0.25);
        z-index: 3; /* KLUCZOWE */
    }

    /* Pasek pod spodem */
    .scalar-bar .bar[b-cgduf93xlf] {
        position: absolute;
        top: 0;
        bottom: 0;
        background: #4CE96A;
        border-radius: 2px;
        z-index: 1; /* KLUCZOWE */
    }

        .scalar-bar .bar.positive[b-cgduf93xlf] {
            left: 50%;
        }

        .scalar-bar .bar.negative[b-cgduf93xlf] {
            right: 50%;
        }

    .scalar-bar .neutral-box[b-cgduf93xlf] {
        position: absolute;
        left: calc(50% - 3px);
        width: 6px;
        height: 6px;
        background: rgba(255,255,255,0.4);
        border-radius: 2px;
    }

    .scalar-bar.missing[b-cgduf93xlf]::after {
        content: "";
        position: absolute;
        left: calc(50% - 4px);
        width: 8px;
        height: 8px;
        background: rgba(255,255,255,0.15);
        border-radius: 2px;
    }


/* /Components/Workspace/WorkspaceStackedParameterBars.razor.rz.scp.css */
.aggregated-bars[b-sfig0b933e] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
}

.aggregated-row[b-sfig0b933e] {
    width: 100%;
}
/* /Layout/CollectionShell.razor.rz.scp.css */
.fc-collection-shell[b-ua1qni9zyb] {
    display: flex;
    height: 100%;
}

.fc-collection-shell-content[b-ua1qni9zyb] {
    flex: 1;
    overflow: hidden;
    background: radial-gradient(circle at 20% 80%, rgba(255,60,60,0.12), #0f0f0f 80%);
}

.fc-collection-shell-background[b-ua1qni9zyb] {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
/* /Layout/CurateShell.razor.rz.scp.css */
.fc-curate-shell[b-e7xh4i3w1x] {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* shell nie scrolluje */
}

.fc-curate-shell-content[b-e7xh4i3w1x] {
    width: 100%;
    max-width: none;
    flex: 1;
    overflow: hidden; /* też nie scrolluje */
}

.fc-curate-shell-background[b-e7xh4i3w1x] {
    width: 100%;
    display: grid;
    grid-template-rows: auto 1fr; /* top auto, bottom wypełnia */
    height: 100%;
}

.curate-page-root[b-e7xh4i3w1x] {
    width: 100%;
}
/* /Layout/MainLayout.razor.rz.scp.css */
.fc-root[b-eb12qrr4l0] {
    display: flex;
    flex-direction: column;
    height: 100vh; /* KLUCZOWE */
    overflow: hidden; /* KLUCZOWE */
}

.fc-content[b-eb12qrr4l0] {
    flex: 1; /* KLUCZOWE */
    min-height: 0; /* KLUCZOWE */
    display: flex; /* KLUCZOWE */
    flex-direction: column;
    overflow: hidden;
}

.fc-auth-btn[b-eb12qrr4l0] {
    background: none;
    border: none;
    color: var(--fc-accent);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 6px 14px;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.15s ease, color 0.15s ease;
}

    .fc-auth-btn:hover[b-eb12qrr4l0] {
        opacity: 1;
        color: #fff; /* lub var(--fc-accent) jeśli chcesz tylko rozjaśnienie */
    }

.fc-auth-container[b-eb12qrr4l0] {
    display: flex;
    gap: 18px;
}

.fc-title-inline[b-eb12qrr4l0] {
    display: flex;
    align-items: baseline;
    gap: 6px; /* odstęp między nazwą a podpisem */
}

.fc-title[b-eb12qrr4l0] {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.8px;
    color: #f2f2f2;
    opacity: 0.95;
    text-transform: uppercase;
}

.fc-subtitle[b-eb12qrr4l0] {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 0.5px;
    color: #aaa;
    opacity: 0.55;
    font-weight: 400;
    text-transform: none;
    margin-top: 1px;
    text-transform: uppercase;
}

/* /Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-rwia8rfbyw] {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row[b-rwia8rfbyw] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-rwia8rfbyw] {
    font-size: 1.1rem;
}

.bi[b-rwia8rfbyw] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-rwia8rfbyw] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-rwia8rfbyw] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-rwia8rfbyw] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-rwia8rfbyw] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-rwia8rfbyw] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-rwia8rfbyw] {
        padding-bottom: 1rem;
    }

    .nav-item[b-rwia8rfbyw]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

.nav-item[b-rwia8rfbyw]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-rwia8rfbyw]  a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

@media (min-width: 641px) {
    .navbar-toggler[b-rwia8rfbyw] {
        display: none;
    }

    .collapse[b-rwia8rfbyw] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }

    .nav-scrollable[b-rwia8rfbyw] {
        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Layout/OntologyShell.razor.rz.scp.css */
.fc-ontology-shell[b-z5pyxzenm7] {
    display: flex;
    height: 100%;
}

.fc-ontology-shell-content[b-z5pyxzenm7] {
    flex: 1;
    overflow: hidden;
    background: radial-gradient(circle at 30% 40%, rgba(240,180,0,0.08), #141414 70%);
}

.fc-ontology-shell-background[b-z5pyxzenm7] {
    width: 100%;
    height: 100%;
    
}
/* /Layout/StageShell.razor.rz.scp.css */
.fc-stage-shell[b-uq43wtgvcf] {
    display: flex;
    height: 100%;
}

.fc-stage-shell-content[b-uq43wtgvcf] {
    flex: 1;
    overflow: hidden;
    background: radial-gradient(circle at 20% 80%, rgba(255,60,60,0.12), #0f0f0f 80%);
}

.fc-stage-shell-background[b-uq43wtgvcf] {
    width: 100%;
    height: 100%;
    
}
/* /Layout/StartShell.razor.rz.scp.css */
.fc-start-shell[b-2pjcrn7ogn] {
    display: flex;
    height: 100%;
}

.fc-start-shell-content[b-2pjcrn7ogn] {
    flex: 1;
    overflow: hidden;
    background: radial-gradient(circle at 20% 80%, rgba(255,60,60,0.12), #0f0f0f 80%);
}

/* ROOT INSIDE STARTSHELL */

.fc-start-shell-background[b-2pjcrn7ogn] {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    position: relative;
}

section[b-2pjcrn7ogn] {
    height: 100vh;
    width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 48px;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

    section.active[b-2pjcrn7ogn] {
        opacity: 1;
        transform: translateY(0);
    }

.slide img[b-2pjcrn7ogn] {
    transform: scale(1.05);
    transition: transform 1.2s ease;
}

.slide.active img[b-2pjcrn7ogn] {
    transform: scale(1);
}

section.problem-carousel[b-2pjcrn7ogn],
section.product-carousel[b-2pjcrn7ogn] {
    padding: 0 !important;
}

.fc-start-overlay[b-2pjcrn7ogn] {
    position: fixed;
    inset: 0;
    z-index: 999999;
    pointer-events: none;
}

    .fc-start-overlay > *[b-2pjcrn7ogn] {
        pointer-events: auto;
    }

/* /Layout/WorkspaceShell.razor.rz.scp.css */
.fc-workspace-shell[b-flxokxckgw] {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* shell nie scrolluje */
}

.fc-workspace-shell-content[b-flxokxckgw] {
    width: 100%;
    max-width: none;
    flex: 1;
    overflow: hidden; /* też nie scrolluje */
}

.fc-workspace-shell-background[b-flxokxckgw] {
    width: 100%;
    display: grid;
    grid-template-rows: auto 1fr; /* top auto, bottom wypełnia */
    height: 100%;
}

.workspace-page-root[b-flxokxckgw] {
    width: 100%;
}
/* /Pages/Analysis/DspView.razor.rz.scp.css */
.fc-curate-shell-background[b-mkx363nlue] {
    display: grid;
    grid-template-rows: auto auto 1fr;
    grid-template-columns: 1fr;
    gap: 20px;
    min-height: 100%;
}

.curation-table-container[b-mkx363nlue] {
    height: 100%;
    overflow-y: auto;
}

.curate-top[b-mkx363nlue] {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 20px;
}

.curate-bottom[b-mkx363nlue] {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 20px;
    height: 100%;
    overflow: hidden;
}

.curate-playlists-container[b-mkx363nlue] {
    height: 100%; 
    overflow: hidden;
}

.curation-playlist-tree[b-mkx363nlue] {
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
}

    /* Scrollbar – cienki, elegancki (jak tabela) */
    .curation-playlist-tree[b-mkx363nlue]::-webkit-scrollbar {
        width: 6px;
    }

    .curation-playlist-tree[b-mkx363nlue]::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,0.15);
        border-radius: 3px;
    }

        .curation-playlist-tree[b-mkx363nlue]::-webkit-scrollbar-thumb:hover {
            background: rgba(255,255,255,0.25);
        }

/* Firefox */
.curation-playlist-tree[b-mkx363nlue] {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}

.curation-actionbar-container[b-mkx363nlue] {
    flex-shrink: 0;
    width: 100%;
    z-index: 2; /* żeby był nad gridem, jeśli trzeba */
}
/* /Pages/Collection/CollectionDashboard.razor.rz.scp.css */
/* -------------------------
   CollectionShell base (zachowane)
   ------------------------- */
.collection-shell[b-z9w2knq4ds] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    height: 100vh;
}

    .collection-shell .shell-header[b-z9w2knq4ds] {
        height: var(--shell-header-h, 64px);
        flex: 0 0 auto;
    }

    .collection-shell .shell-footer[b-z9w2knq4ds] {
        height: var(--shell-footer-h, 48px);
        flex: 0 0 auto;
    }

/* -------------------------
   Scope inside collection background
   (minimalny wpływ na resztę aplikacji)
   ------------------------- */
.fc-collection-shell-background .dashboard-shell[b-z9w2knq4ds],
.fc-collection-shell-background .dashboard-section[b-z9w2knq4ds] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

/* -------------------------
   Top bar (przyciski po lewej)
   ------------------------- */
.fc-collection-shell-background .dashboard-topbar[b-z9w2knq4ds] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background: rgba(10,10,10,0.6);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    flex: 0 0 auto;
    z-index: 10;
}

.fc-collection-shell-background .topbar-left[b-z9w2knq4ds] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.fc-collection-shell-background .topbar-center[b-z9w2knq4ds] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.fc-collection-shell-background .topbar-right[b-z9w2knq4ds] {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* przyciski wygląd */
.fc-collection-shell-background .dashboard-topbar .btn[b-z9w2knq4ds] {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
}

/* -------------------------
   Main area (karuzela wypełnia resztę)
   ------------------------- */
.fc-collection-shell-background .dashboard-main[b-z9w2knq4ds] {
    flex: 1 1 0%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

/* zachowane reguły karuzeli z Twojego projektu, scoped */
.fc-collection-shell-background .carousel-wrapper[b-z9w2knq4ds] {
    display: flex;
    flex-direction: column;
    flex: 1 1 0%;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.fc-collection-shell-background .carousel-viewport[b-z9w2knq4ds] {
    flex: 1 1 0%;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    position: relative;
    touch-action: pan-y;
}

.fc-collection-shell-background .carousel-track[b-z9w2knq4ds] {
    display: flex;
    transition: transform 360ms cubic-bezier(.2,.8,.2,1);
    height: 100%;
    will-change: transform;
    align-items: stretch;
}

.fc-collection-shell-background .carousel-slide[b-z9w2knq4ds] {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 0;
    margin: 0;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
}

    /* karta i canvas wykresu */
    .fc-collection-shell-background .carousel-slide .chart-card[b-z9w2knq4ds] {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        display: flex;
        align-items: stretch;
        justify-content: center;
        background: transparent;
        box-sizing: border-box;
    }

    .fc-collection-shell-background .carousel-slide .chart-canvas[b-z9w2knq4ds] {
        flex: 1 1 0%;
        width: 100%;
        height: 100%;
        min-height: 0;
        box-sizing: border-box;
    }

/* kontrolki karuzeli jako overlay lub pod karuzelą (nie wpływają na wysokość) */
.fc-collection-shell-background .carousel-controls[b-z9w2knq4ds] {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    display: flex;
    gap: 12px;
    align-items: center;
    pointer-events: auto;
}

/* -------------------------
   Plotly i wewnętrzne kontenery
   nadpisanie inline height i svg height
   ------------------------- */
/* wymuszenie 100% dla wewnętrznych divów Plotly i svg (nadpisuje inline) */
.fc-collection-shell-background .js-plotly-plot[b-z9w2knq4ds],
.fc-collection-shell-background .js-plotly-plot svg[b-z9w2knq4ds],
.fc-collection-shell-background .plotly-graph-div[b-z9w2knq4ds],
.fc-collection-shell-background .plotly-container[b-z9w2knq4ds],
.fc-collection-shell-background .user-select-none.svg-container[b-z9w2knq4ds],
.fc-collection-shell-background .plot-container[b-z9w2knq4ds],
.fc-collection-shell-background svg.main-svg[b-z9w2knq4ds] {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    background: transparent !important;
}

/* dodatkowe zabezpieczenia dla łańcucha rodziców */
.fc-collection-shell-background .carousel-wrapper[b-z9w2knq4ds],
.fc-collection-shell-background .carousel-viewport[b-z9w2knq4ds],
.fc-collection-shell-background .carousel-track[b-z9w2knq4ds],
.fc-collection-shell-background .carousel-slide[b-z9w2knq4ds],
.fc-collection-shell-background .genre-sunburst-wrapper[b-z9w2knq4ds],
.fc-collection-shell-background .chart-card[b-z9w2knq4ds],
.fc-collection-shell-background .chart-canvas[b-z9w2knq4ds] {
    height: 100% !important;
    min-height: 0 !important;
}

    /* -------------------------
   Debug helpers (usuń w produkcji)
   ------------------------- */
    .fc-collection-shell-background .carousel-slide.debug-outline[b-z9w2knq4ds] {
        outline: 1px dashed rgba(255,0,0,0.18);
    }

    .fc-collection-shell-background .chart-card.debug-outline[b-z9w2knq4ds] {
        outline: 1px dashed rgba(0,255,0,0.18);
    }

    .fc-collection-shell-background .chart-canvas.debug-outline[b-z9w2knq4ds] {
        outline: 1px dashed rgba(0,0,255,0.18);
    }

/* -------------------------
   Responsywność drobne poprawki
   ------------------------- */
@media (min-width: 1400px) {
    .fc-collection-shell-background .carousel-viewport[b-z9w2knq4ds] { /* delikatne zwiększenie przestrzeni na duże ekrany */
        /* nie narzucamy wysokości; rodzic decyduje */
    }
}
/* /Pages/Collection/ManageCollection.razor.rz.scp.css */
/* -------------------------
   CollectionShell base (zachowane)
   ------------------------- */
.collection-shell[b-bvujc3gwz4] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    height: 100vh;
}

    .collection-shell .shell-header[b-bvujc3gwz4] {
        height: var(--shell-header-h, 64px);
        flex: 0 0 auto;
    }

    .collection-shell .shell-footer[b-bvujc3gwz4] {
        height: var(--shell-footer-h, 48px);
        flex: 0 0 auto;
    }

/* -------------------------
   Scope inside collection background
   (minimalny wpływ na resztę aplikacji)
   ------------------------- */
.fc-collection-shell-background .dashboard-shell[b-bvujc3gwz4],
.fc-collection-shell-background .dashboard-section[b-bvujc3gwz4] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

/* -------------------------
   Top bar (przyciski po lewej)
   ------------------------- */
.fc-collection-shell-background .dashboard-topbar[b-bvujc3gwz4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background: rgba(10,10,10,0.6);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    flex: 0 0 auto;
    z-index: 10;
}

.fc-collection-shell-background .topbar-left[b-bvujc3gwz4] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.fc-collection-shell-background .topbar-center[b-bvujc3gwz4] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.fc-collection-shell-background .topbar-right[b-bvujc3gwz4] {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* przyciski wygląd */
.fc-collection-shell-background .dashboard-topbar .btn[b-bvujc3gwz4] {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
}

/* -------------------------
   Main area (karuzela wypełnia resztę)
   ------------------------- */
.fc-collection-shell-background .dashboard-main[b-bvujc3gwz4] {
    flex: 1 1 0%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

/* zachowane reguły karuzeli z Twojego projektu, scoped */
.fc-collection-shell-background .carousel-wrapper[b-bvujc3gwz4] {
    display: flex;
    flex-direction: column;
    flex: 1 1 0%;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.fc-collection-shell-background .carousel-viewport[b-bvujc3gwz4] {
    flex: 1 1 0%;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    position: relative;
    touch-action: pan-y;
}

.fc-collection-shell-background .carousel-track[b-bvujc3gwz4] {
    display: flex;
    transition: transform 360ms cubic-bezier(.2,.8,.2,1);
    height: 100%;
    will-change: transform;
    align-items: stretch;
}

.fc-collection-shell-background .carousel-slide[b-bvujc3gwz4] {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 0;
    margin: 0;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
}

    /* karta i canvas wykresu */
    .fc-collection-shell-background .carousel-slide .chart-card[b-bvujc3gwz4] {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        display: flex;
        align-items: stretch;
        justify-content: center;
        background: transparent;
        box-sizing: border-box;
    }

    .fc-collection-shell-background .carousel-slide .chart-canvas[b-bvujc3gwz4] {
        flex: 1 1 0%;
        width: 100%;
        height: 100%;
        min-height: 0;
        box-sizing: border-box;
    }

/* kontrolki karuzeli jako overlay lub pod karuzelą (nie wpływają na wysokość) */
.fc-collection-shell-background .carousel-controls[b-bvujc3gwz4] {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    display: flex;
    gap: 12px;
    align-items: center;
    pointer-events: auto;
}

/* -------------------------
   Plotly i wewnętrzne kontenery
   nadpisanie inline height i svg height
   ------------------------- */
/* wymuszenie 100% dla wewnętrznych divów Plotly i svg (nadpisuje inline) */
.fc-collection-shell-background .js-plotly-plot[b-bvujc3gwz4],
.fc-collection-shell-background .js-plotly-plot svg[b-bvujc3gwz4],
.fc-collection-shell-background .plotly-graph-div[b-bvujc3gwz4],
.fc-collection-shell-background .plotly-container[b-bvujc3gwz4],
.fc-collection-shell-background .user-select-none.svg-container[b-bvujc3gwz4],
.fc-collection-shell-background .plot-container[b-bvujc3gwz4],
.fc-collection-shell-background svg.main-svg[b-bvujc3gwz4] {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    background: transparent !important;
}

/* dodatkowe zabezpieczenia dla łańcucha rodziców */
.fc-collection-shell-background .carousel-wrapper[b-bvujc3gwz4],
.fc-collection-shell-background .carousel-viewport[b-bvujc3gwz4],
.fc-collection-shell-background .carousel-track[b-bvujc3gwz4],
.fc-collection-shell-background .carousel-slide[b-bvujc3gwz4],
.fc-collection-shell-background .genre-sunburst-wrapper[b-bvujc3gwz4],
.fc-collection-shell-background .chart-card[b-bvujc3gwz4],
.fc-collection-shell-background .chart-canvas[b-bvujc3gwz4] {
    height: 100% !important;
    min-height: 0 !important;
}

    /* -------------------------
   Debug helpers (usuń w produkcji)
   ------------------------- */
    .fc-collection-shell-background .carousel-slide.debug-outline[b-bvujc3gwz4] {
        outline: 1px dashed rgba(255,0,0,0.18);
    }

    .fc-collection-shell-background .chart-card.debug-outline[b-bvujc3gwz4] {
        outline: 1px dashed rgba(0,255,0,0.18);
    }

    .fc-collection-shell-background .chart-canvas.debug-outline[b-bvujc3gwz4] {
        outline: 1px dashed rgba(0,0,255,0.18);
    }

/* -------------------------
   Responsywność drobne poprawki
   ------------------------- */
@media (min-width: 1400px) {
    .fc-collection-shell-background .carousel-viewport[b-bvujc3gwz4] { /* delikatne zwiększenie przestrzeni na duże ekrany */
        /* nie narzucamy wysokości; rodzic decyduje */
    }
}
/* /Pages/Curate/CurationView.razor.rz.scp.css */
.fc-curate-shell-background[b-0sw5kvt6t6] {
    display: grid;
    grid-template-rows: auto auto 1fr;
    grid-template-columns: 1fr;
    gap: 20px;
    min-height: 100%;
}

.curation-table-container[b-0sw5kvt6t6] {
    height: 100%;
    overflow-y: auto;
}

.curate-top[b-0sw5kvt6t6] {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 20px;
}

.curate-bottom[b-0sw5kvt6t6] {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 20px;
    height: 100%;
    overflow: hidden;
}

.curate-playlists-container[b-0sw5kvt6t6] {
    height: 100%; 
    overflow: hidden;
}

.curation-playlist-tree[b-0sw5kvt6t6] {
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
}

    /* Scrollbar – cienki, elegancki (jak tabela) */
    .curation-playlist-tree[b-0sw5kvt6t6]::-webkit-scrollbar {
        width: 6px;
    }

    .curation-playlist-tree[b-0sw5kvt6t6]::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,0.15);
        border-radius: 3px;
    }

        .curation-playlist-tree[b-0sw5kvt6t6]::-webkit-scrollbar-thumb:hover {
            background: rgba(255,255,255,0.25);
        }

/* Firefox */
.curation-playlist-tree[b-0sw5kvt6t6] {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}

.curation-actionbar-container[b-0sw5kvt6t6] {
    flex-shrink: 0;
    width: 100%;
    z-index: 2; /* żeby był nad gridem, jeśli trzeba */
}
/* /Pages/Ontology/Map.razor.rz.scp.css */
/* === FULLSCREEN CAROUSEL === */

.ontology-carousel[b-u8kzp8t07e] {
    position: relative;
    width: 100%;
    height: calc(100vh - 80px); /* bezpieczny offset od top bar */
    overflow: hidden;
    display: flex;
    align-items: center; /* pionowe centrowanie */
    justify-content: center;
}

/* Track przesuwany transformem */
.carousel-track[b-u8kzp8t07e] {
    display: flex;
    transition: transform 0.45s ease;
    height: 100%;
}

/* Każdy slajd = pełny ekran */
.carousel-slide[b-u8kzp8t07e] {
    min-width: 100%;
    height: calc(100vh - 80px); /* stała wysokość jak w drzewie */
    overflow-y: auto; /* <<< SCROLL JAK W DRZEWIE */
    overflow-x: hidden;
    display: flex;
    justify-content: center; /* poziome centrowanie */
    align-items: flex-start; /* NIE center — bo scroll ma działać od góry */
    padding: 40px 0; /* żeby nie kleiło się do krawędzi */
}

/* === STRZAŁKI === */

.carousel-arrow[b-u8kzp8t07e] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    color: white;
    font-size: 32px;
    font-weight: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
}

    .carousel-arrow:hover[b-u8kzp8t07e] {
        background: rgba(255,255,255,0.15);
    }

    .carousel-arrow.left[b-u8kzp8t07e] {
        left: 24px;
    }

    .carousel-arrow.right[b-u8kzp8t07e] {
        right: 24px;
    }
/* /Pages/Stage/Export.razor.rz.scp.css */
.curate-playlists-container[b-7lfvimr5bt] {
    height: 100%;
    overflow: hidden;
}

.curation-playlist-tree[b-7lfvimr5bt] {
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
}

    /* Scrollbar – cienki, elegancki (jak tabela) */
    .curation-playlist-tree[b-7lfvimr5bt]::-webkit-scrollbar {
        width: 6px;
    }

    .curation-playlist-tree[b-7lfvimr5bt]::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,0.15);
        border-radius: 3px;
    }

        .curation-playlist-tree[b-7lfvimr5bt]::-webkit-scrollbar-thumb:hover {
            background: rgba(255,255,255,0.25);
        }

/* Firefox */
.curation-playlist-tree[b-7lfvimr5bt] {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}

.export-toolbar[b-7lfvimr5bt] {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: var(--panel-bg);
    border-bottom: 1px solid var(--border-color);
}

.toolbar-left[b-7lfvimr5bt] {
    display: flex;
    gap: 16px;
    align-items: center;
}

.toolbar-right[b-7lfvimr5bt] {
    opacity: 0.7;
    font-size: 0.9rem;
}

.toolbar-button[b-7lfvimr5bt] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    color: var(--text-color);
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    transition: background 0.15s ease;
}

    .toolbar-button:hover[b-7lfvimr5bt] {
        background: var(--hover-bg);
    }

/* /Pages/Start/Welcome.razor.rz.scp.css */
:root[b-6ldjinyrfd] {
    /* Module colors */
    --fc-accent: #f0b400;
    --fc-bg: #050509;
    --fc-text: #f5f5f7;
    --module-item-analysis: #ff9f7f;
    --module-item-collection: #b8ffb8;
    --module-item-community: #f5f5f7;
    --module-item-core: #f0b400;
    --module-item-curation: #d0b4ff;
    --module-item-discovery: #7fffd4;
    --module-item-ontology: #7fc8ff;
    --module-item-stage: #ff7f7f;
    --module-item-workspace: #ffd480;
}

.fc-badge[b-6ldjinyrfd] {
    border-radius: 6px;
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-left: 8px;
    opacity: 0.9;
    padding: 3px 8px;
    text-transform: uppercase;
}

.fc-badge[b-6ldjinyrfd] {
    border-radius: 6px;
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-left: 8px;
    padding: 3px 8px;
    text-transform: uppercase;
}

.fc-badge[b-6ldjinyrfd] { /* było 12–14px */
    font-size: 11px;
    padding: 2px 6px;
}

.fc-badge-available[b-6ldjinyrfd] { /* półprzezroczysty zielony */
    background: rgba(47,143,47,0.35);
    color: #b8ffb8;
}

.fc-badge-available[b-6ldjinyrfd] {
    background: #2f8f2f;
    color: #fff;
}

.fc-bagde-inDev[b-6ldjinyrfd] {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    color: #ddd;
}

.fc-bagde-inDev[b-6ldjinyrfd] {
    background: #555;
    border: 1px solid #777;
    color: #ddd;
}

.fc-card[b-6ldjinyrfd] {
    backdrop-filter: blur(10px);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-left: 4px solid rgba(255,215,0,0.35);
    border-radius: 14px;
    min-height: 160px;
    padding: 36px;
    transition: all 0.25s ease;
}

    .fc-card fc-card--perception[b-6ldjinyrfd] {
        backdrop-filter: blur(10px);
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.08);
        border-left: 4px solid rgba(255,215,0,0.35);
        border-radius: 14px;
        min-height: 380px;
        overflow: hidden;
        padding: 36px;
        position: relative;
        transition: all 0.25s ease;
    }

        .fc-card fc-card--perception > *[b-6ldjinyrfd] {
            position: relative;
            z-index: 1;
        }

        .fc-card fc-card--perception h3[b-6ldjinyrfd] {
            color: #fff;
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 16px;
        }

        .fc-card fc-card--perception p[b-6ldjinyrfd] {
            color: #dcdcdc;
            font-size: 14px;
            line-height: 1.55;
            opacity: 0.9;
        }

        .fc-card fc-card--perception[b-6ldjinyrfd]::before {
            background-position: center;
            background-size: cover;
            content: "";
            filter: blur(1px);
            inset: 0;
            opacity: 0.28;
            position: absolute;
            z-index: 0;
        }

        .fc-card fc-card--perception:hover[b-6ldjinyrfd] {
            background: rgba(255,255,255,0.07);
            border-left-color: rgba(255,215,0,0.55);
            box-shadow: 0 8px 22px rgba(0,0,0,0.35);
            transform: translateY(-6px);
        }

    .fc-card h3[b-6ldjinyrfd] {
        color: #fff;
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 12px;
    }

    .fc-card p[b-6ldjinyrfd] {
        color: #dcdcdc;
        font-size: 14px;
        line-height: 1.55;
        opacity: 0.9;
    }

    .fc-card:hover[b-6ldjinyrfd] {
        background: rgba(255,255,255,0.07);
        border-left-color: rgba(255,215,0,0.55);
        box-shadow: 0 8px 22px rgba(0,0,0,0.35);
        transform: translateY(-6px);
    }

    .fc-card.fc-card--perception[b-6ldjinyrfd]::before {
        background-position: center;
        background-size: cover;
        content: "";
        filter: blur(1px);
        inset: 0;
        opacity: 0.28;
        position: absolute;
        z-index: 0;
    }

    .fc-card.fc-card--perception.fc-card--step-ai[b-6ldjinyrfd]::before {
        background-image: url('/images/screens/pexels-janmesh-shah-2054521694-30704246.jpg');
    }

    .fc-card.fc-card--perception.fc-card--step-dsp[b-6ldjinyrfd]::before {
        background-image: url('/images/screens/pexels-mahdibafande-14240573.jpg');
    }

    .fc-card.fc-card--perception.fc-card--step-export[b-6ldjinyrfd]::before {
        background-image: url('/images/screens/pexels-robert-clark-504241532-20133547.jpg');
    }

    .fc-card.fc-card--perception.fc-card--step-import[b-6ldjinyrfd]::before {
        background-image: url('/images/screens/pexels-mart-production-7577750.jpg');
    }

    .fc-card.fc-card--perception.fc-card--step-ontology[b-6ldjinyrfd]::before {
        background-image: url('/images/screens/pexels-robert-clark-504241532-20133646.jpg');
    }

    .fc-card.fc-card--perception.fc-card--step-workspace[b-6ldjinyrfd]::before {
        background-image: url('/images/screens/pexels-valentin-ivantsov-2154772556-39342615.jpg');
    }

.fc-cta[b-6ldjinyrfd] {
    margin: 20px 0;
    text-align: center;
}

    .fc-cta h2[b-6ldjinyrfd] {
        margin-bottom: 32px;
    }

.fc-cta__buttons[b-6ldjinyrfd] {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.fc-cta__primary[b-6ldjinyrfd] {
    background: var(--fc-accent);
    color: #000;
}

.fc-cta__primary[b-6ldjinyrfd],
.fc-cta__secondary[b-6ldjinyrfd] {
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 12px 28px;
    text-decoration: none;
    transition: 0.2s ease;
}

    .fc-cta__primary:hover[b-6ldjinyrfd] {
        transform: translateY(-2px);
    }

.fc-cta__secondary[b-6ldjinyrfd] {
    border: 1px solid var(--fc-accent);
    color: var(--fc-accent);
}

    .fc-cta__secondary:hover[b-6ldjinyrfd] {
        background: rgba(255,255,255,0.1);
        transform: translateY(-2px);
    }

.fc-cta__status[b-6ldjinyrfd] {
    color: rgba(255, 255, 255, 0.45);
    font-size: 12px;
    font-weight: 300;
    margin-top: 16px;
    opacity: 0.9;
    text-align: center;
}

.fc-grid[b-6ldjinyrfd] {
    display: grid;
    gap: 48px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 0 80px;
    width: 100%;
}

.fc-hero[b-6ldjinyrfd] {
    align-items: center;
    background: radial-gradient(circle at top, #202030 0, #050509 55%);
    display: flex;
    flex-direction: column;
    font-family: 'Inter', sans-serif;
    gap: 0.2rem;
    height: 100%;
    justify-content: flex-start;
    overflow: hidden;
    padding: 0px 48px;
    position: relative;
    text-align: center;
}

    .fc-hero .fc-pills[b-6ldjinyrfd] {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 10px;
        align-items: center;
        justify-content: center;
    }

        .fc-hero .fc-pills span[b-6ldjinyrfd] {
            background: rgba(10, 10, 18, 0.8);
            border: 1px solid #3a3a4f;
            border-radius: 999px;
            color: #d0d0dd;
            font-size: 0.8rem;
            letter-spacing: 0.08em;
            padding: 8px 14px;
            text-transform: uppercase;
        }

.fc-hero__logo[b-6ldjinyrfd] {
    height: auto;
    max-width: 120px;
    width: 8vw;
}

.fc-hero__logo[b-6ldjinyrfd] {
    height: auto;
    max-width: 120px;
    width: 8vw;
}

.fc-hero__slide[b-6ldjinyrfd] {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    inset: 0;
    justify-content: center;
    opacity: 0;
    position: absolute;
    transition: opacity 0.6s ease;
    width: 100%;
}

.fc-hero__slide--top-center .fc-hero__slide-background[b-6ldjinyrfd] {
    background-position: 20% center;
}

.fc-hero__slide--top-center2 .fc-hero__slide-background[b-6ldjinyrfd] {
    background-position: center 80%;
}

.fc-hero__slide-background[b-6ldjinyrfd] {
    background-position: center;
    background-size: cover;
    filter: brightness(0.75);
    height: 100%;
    inset: 0;
    position: absolute;
    width: 100%;
    z-index: 0;
}

    .fc-hero__slide-background[b-6ldjinyrfd]::after {
        background: radial-gradient( circle at center, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.15) 40%, rgba(0,0,0,0.35) 65%, rgba(5,5,9,1.0) 100% );
        content: "";
        inset: 0;
        pointer-events: none;
        position: absolute;
    }

.fc-hero__slide-definition[b-6ldjinyrfd] {
    font-size: 18px;
    margin: 12px 0 24px 0;
    max-width: 600px;
    opacity: 0.85;
    text-shadow: 0 0 8px rgba(255,255,255,0.08);
    text-transform: uppercase;
    z-index: 2;
}

.fc-hero__slide-logoWithTitle[b-6ldjinyrfd] {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 1.6rem;
    justify-content: center;
    z-index: 2;
}

.fc-hero__slide-question[b-6ldjinyrfd] { /* <<< kursywa */ /* <<< duże, mocne */ /* <<< lekka, elegancka */ /* <<< subtelne rozstrzelenie */ /* głębsze zanurzenie */
    color: #f5f5f7;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-style: italic;
    font-weight: 300;
    letter-spacing: 0.04em;
    line-height: 1.35;
    margin: 0 auto;
    max-width: 900px;
    position: relative;
    text-align: center;
    text-shadow: 0 0 22px rgba(0,0,0,0.55), /* miękkie halo */
    0 0 45px rgba(0,0,0,0.35);
    text-transform: uppercase;
    transition: opacity 0.4s ease;
    z-index: 3;
}

.fc-hero__slide-tagline[b-6ldjinyrfd] {
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1.6;
    margin: 0;
    opacity: 0.75;
    padding-bottom: 20px;
    z-index: 1;
}

.fc-hero__slide-tagline[b-6ldjinyrfd] {
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1.6;
    margin: 0;
    opacity: 0.75;
    padding-bottom: 20px;
    z-index: 2;
}

.fc-hero__slide-title[b-6ldjinyrfd] {
    font-size: 7.2rem !important;
    font-weight: 600;
    letter-spacing: -1px;
    margin: 0;
    margin-top: 50px;
}

.fc-hero__slide.active[b-6ldjinyrfd] {
    opacity: 1;
}

.fc-hero__slides[b-6ldjinyrfd] {
    align-items: center;
    background: radial-gradient(circle at top, #202030 0, #050509 55%);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    max-width: 100vw;
    min-height: 600px;
    overflow: hidden;
    padding: 60px 48px;
    position: relative;
    width: 100vw;
}

.fc-ontology[b-6ldjinyrfd] {
    margin: 60px 0;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.fc-ontology__nav[b-6ldjinyrfd] {
    backdrop-filter: blur(8px);
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    color: white;
    cursor: pointer;
    font-size: 32px;
    padding: 8px 16px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: 0.25s ease;
}

    .fc-ontology__nav.fc-ontology__nav--next[b-6ldjinyrfd] {
        right: 20px;
    }

    .fc-ontology__nav.fc-ontology__nav--prev[b-6ldjinyrfd] {
        left: 20px;
    }

.fc-ontology__rail[b-6ldjinyrfd] {
    display: flex;
    transition: transform 0.5s ease;
}

.fc-ontology__slide[b-6ldjinyrfd] {
    align-items: center;
    display: flex;
    flex: 0 0 100%;
    justify-content: center;
}

.fc-ontology__visual[b-6ldjinyrfd] { /* zamiast width:80% */ /* zachowuje proporcje */
    backdrop-filter: blur(12px);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    box-shadow: 0 0 22px rgba(0,0,0,0.25);
    height: auto;
    max-width: 80%;
    opacity: 0.92;
    padding: 12px;
    transition: 0.25s ease;
}

    .fc-ontology__visual:hover[b-6ldjinyrfd] {
        box-shadow: 0 0 32px rgba(0,0,0,0.35);
        opacity: 1;
    }

.fc-pills[b-6ldjinyrfd] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin-top: 25px;
    margin-top: 20px;
    position: relative;
    z-index: 5;
}

.fc-pills__pill[b-6ldjinyrfd] {
    align-items: center;
    background: rgba(255,255,255,0.06);
    border-radius: 8px;
    color: var(--fc-text);
    display: inline-flex;
    font-size: 13px;
    font-weight: 600;
    gap: 8px;
    letter-spacing: 0.5px;
    padding: 8px 14px;
    text-transform: uppercase;
    transition: 0.2s ease;
}

    .fc-pills__pill svg[b-6ldjinyrfd] {
        height: 16px;
        opacity: 0.85;
        width: 16px;
    }

    .fc-pills__pill:hover[b-6ldjinyrfd] {
        background: rgba(255,255,255,0.12);
        transform: translateY(-2px);
    }

    .fc-pills__pill.fc-pills__pill--active[b-6ldjinyrfd] { /* złoty glow */
        background: rgba(240, 180, 0, 0.25);
        border-color: #f0b400;
        box-shadow: 0 0 12px rgba(240,180,0,0.45);
        color: #f0b400;
        transform: translateY(-2px);
    }

.fc-section[b-6ldjinyrfd] {
    background: #050509;
    color: #e6e6e6;
    font-family: 'Inter', sans-serif;
    max-width: 100%;
    padding: 0px 0;
    width: 100%;
}

    .fc-section .fc-group__heading[b-6ldjinyrfd] {
        color: #f0b400;
        font-size: 22px;
        font-weight: 600;
        letter-spacing: 0.08em;
        margin: 40px 0 16px 0;
        padding-left: 80px;
        padding-right: 80px;
        text-transform: uppercase;
    }

    .fc-section .fc-group__lead[b-6ldjinyrfd] {
        font-size: 16px;
        line-height: 1.55;
        margin-bottom: 20px;
        max-width: 1400px;
        opacity: 0.75;
        padding-left: 80px;
        padding-right: 80px;
    }

    .fc-section .fc-section__heading[b-6ldjinyrfd] {
        display: block;
        font-family: 'Inter', sans-serif;
        font-size: 32px;
        font-weight: 600;
        letter-spacing: -0.5px;
        margin-bottom: 16px;
        padding-left: 80px;
        padding-right: 80px;
        text-align: left;
    }

    .fc-section .fc-section__lead[b-6ldjinyrfd] {
        font-family: 'Inter', sans-serif;
        font-size: 18px;
        line-height: 1.55;
        margin-bottom: 80px;
        opacity: 0.75;
        padding-left: 80px;
        padding-right: 80px;
        text-align: left;
    }

.fc-section__heading[b-6ldjinyrfd] {
    align-items: center;
    color: #f5f5f7 !important;
    display: flex;
    flex-direction: column;
    font-family: 'Inter', sans-serif;
    gap: 0.2rem;
    justify-content: center;
    padding: 10px 3rem;
    text-align: center;
    text-transform: uppercase;
}

.module.item[b-6ldjinyrfd] { /* półprzezroczyste premium tło */ /* kolor modułu */
    backdrop-filter: blur(10px);
    background: rgba(255,255,255,0.06);
    border-left: 6px solid currentColor;
    border-radius: 14px;
    padding: 26px 24px;
    text-align: left;
    transition: all 0.25s ease;
}

    .module.item h3[b-6ldjinyrfd],
    .module.item p[b-6ldjinyrfd] {
        color: #e0e0e0;
    }

    .module.item:hover[b-6ldjinyrfd] {
        background: rgba(255,255,255,0.10);
        box-shadow: 0 8px 22px rgba(0,0,0,0.35);
        transform: translateY(-6px);
    }

    .module.item.analysis[b-6ldjinyrfd] {
        color: var(--module-item-analysis);
    }

    .module.item.collection[b-6ldjinyrfd] {
        color: var(--module-item-collection);
    }

    .module.item.community[b-6ldjinyrfd] {
        color: var(--module-item-community);
    }

    .module.item.core[b-6ldjinyrfd] {
        color: var(--module-item-core);
    }

    .module.item.curation[b-6ldjinyrfd] {
        color: var(--module-item-curation);
    }

    .module.item.discovery[b-6ldjinyrfd] {
        color: var(--module-item-discovery);
    }

    .module.item.ontology[b-6ldjinyrfd] {
        color: var(--module-item-ontology);
    }

    .module.item.stage[b-6ldjinyrfd] {
        color: var(--module-item-stage);
    }

    .module.item.workspace[b-6ldjinyrfd] {
        color: var(--module-item-workspace);
    }

.perception-video-wrapper[b-6ldjinyrfd] { /* cinematic offset */ /* <<< klucz: centrowanie poziome */ /* <<< opcjonalnie: centrowanie pionowe */
    align-items: center;
    display: flex;
    justify-content: center;
    margin-bottom: 100px;
    padding: 0 80px;
    width: 100%;
}

.perceptual-workflow[b-6ldjinyrfd] {
    color: #e6e6e6;
    margin: 0 auto;
    max-width: 1400px;
    padding: 120px 0;
    width: 100%;
}

    .perceptual-workflow .fc-section__heading[b-6ldjinyrfd] {
        font-size: 48px;
        font-weight: 600;
        letter-spacing: -0.5px;
        margin-bottom: 40px;
        text-align: center;
    }

.section-divider[b-6ldjinyrfd] {
    background: #f0b400;
    height: 5px;
    margin: 60px auto;
    width: 150px;
}

.welcome-root[b-6ldjinyrfd] {
    background: #050509;
    color: var(--fc-text);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
    width: 100%;
}

h1[b-6ldjinyrfd], h2[b-6ldjinyrfd], h3[b-6ldjinyrfd] {
    font-weight: 600;
    letter-spacing: 0.04em;
    padding-bottom: 5px;
}

p[b-6ldjinyrfd] {
    line-height: 1.5;
}




/* XS — PHONES */
@media (max-width: 599px) {
    .fc-card h3[b-6ldjinyrfd] {
        font-size: 16px !important;
        margin-bottom: 10px !important;
    }

    .fc-card p[b-6ldjinyrfd] {
        font-size: 13px !important;
    }

    /* HERO */
    .fc-hero[b-6ldjinyrfd] {
        padding-left: 0 !important;
        padding-right: 0 !important;
        height: auto !important;
        min-height: 100%;
        overflow: visible !important;
    }

    .fc-hero__slides[b-6ldjinyrfd] {
        min-height: 380px !important;
        padding: 32px 20px !important;
    }

    .fc-hero__slide-background[b-6ldjinyrfd] {
        background-position: center 40% !important;
    }

    .fc-hero__slide-title[b-6ldjinyrfd] {
        font-size: 2.8rem !important;
        margin-top: 20px !important;
        text-align: center;
        padding: 0;
    }

    .fc-hero__slide-question[b-6ldjinyrfd] {
        font-size: 14px !important;
        line-height: 1.3 !important;
        padding: 0 20px !important;
        max-width: 95% !important;
    }

    .fc-hero__slide-definition[b-6ldjinyrfd] {
        font-size: 14px !important;
        max-width: 90% !important;
        margin-top: 10px !important;
    }

    .fc-hero__slide-tagline[b-6ldjinyrfd] {
        font-size: 0.70rem !important;
        line-height: 1.35 !important;
        max-width: 90% !important;
    }

    .fc-hero__logo[b-6ldjinyrfd] {
        width: 22vw !important;
        max-width: 60px !important;
    }

    .fc-hero__slide-logoWithTitle[b-6ldjinyrfd] {
        flex-direction: column !important;
        gap: 0.6rem !important;
        width: 100%;
        overflow: visible;
    }

    /* GRID */
    .fc-grid[b-6ldjinyrfd] {
        grid-template-columns: 1fr !important;
        padding: 0 20px !important;
        gap: 20px !important;
    }

    .fc-logo[b-6ldjinyrfd] {
        width: 18px !important;
        height: 18px !important;
    }

    .fc-topbar[b-6ldjinyrfd] {
        min-height: 36px !important;
        padding: 4px 8px !important;
    }

    .fc-pills[b-6ldjinyrfd] {
        gap: 12px 16px;
        margin-top: 15px;
        margin-top: 10px;
    }

    /* SECTION */
    .fc-section__heading[b-6ldjinyrfd] {
        font-size: 24px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        margin-bottom: 12px !important;
    }

    .fc-section__lead[b-6ldjinyrfd] {
        font-size: 15px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        margin-bottom: 40px !important;
        line-height: 1.45 !important;
    }

    .fc-group__heading[b-6ldjinyrfd] {
        font-size: 18px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        margin-top: 40px !important;
        margin-bottom: 10px !important;
    }

    .fc-group__lead[b-6ldjinyrfd] {
        font-size: 14px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        margin-bottom: 30px !important;
        line-height: 1.45 !important;
    }

    /* PILLS */
    .fc-pills[b-6ldjinyrfd] {
        justify-content: center !important;
        gap: 8px 10px !important;
    }

    .fc-pills__pill[b-6ldjinyrfd] {
        font-size: 11px !important;
        padding: 6px 10px !important;
    }

    /* CARDS */
    .fc-card[b-6ldjinyrfd] {
        padding: 20px !important;
        min-height: auto !important;
    }

        .fc-card.fc-card--perception[b-6ldjinyrfd] {
            padding: 20px !important;
            min-height: auto !important;
        }

    /* ONTOLOGY */
    .fc-ontology__visual[b-6ldjinyrfd] {
        max-width: 95% !important;
    }

    /* GLOBAL FIXES */
    html[b-6ldjinyrfd], body[b-6ldjinyrfd] {
        overflow-x: hidden !important;
    }

    .section-divider[b-6ldjinyrfd] {
        width: 80px !important;
        height: 4px !important;
        margin: 40px auto !important;
    }
}

/* SM — SMALL TABLETS */
@media (min-width: 600px) and (max-width: 899px) {
    .fc-card h3[b-6ldjinyrfd] {
        font-size: 17px;
    }

    .fc-grid[b-6ldjinyrfd] {
        grid-template-columns: repeat(2, 1fr);
        padding: 0 60px;
        gap: 40px;
    }

    .fc-hero__slide-title[b-6ldjinyrfd] {
        font-size: 3.6rem !important;
    }

    .fc-hero__slide-question[b-6ldjinyrfd] {
        font-size: 15px !important;
    }

    .fc-hero__slide-definition[b-6ldjinyrfd] {
        font-size: 15px !important;
    }

    .section-divider[b-6ldjinyrfd] {
        width: 100px;
        height: 4px;
        margin: 50px auto;
    }
}

/* MD — LARGE TABLETS / SMALL LAPTOPS */
@media (min-width: 900px) and (max-width: 1200px) {
    .fc-card h3[b-6ldjinyrfd] {
        font-size: 18px;
    }

    .fc-grid[b-6ldjinyrfd] {
        grid-template-columns: repeat(2, 1fr);
    }

    .fc-hero__slide-title[b-6ldjinyrfd] {
        font-size: 4.8rem !important;
    }

    .section-divider[b-6ldjinyrfd] {
        width: 110px;
        height: 5px;
        margin: 55px auto;
    }
}

/* LG — STANDARD LAPTOPS */
@media (min-width: 1201px) and (max-width: 1600px) {
    .fc-card h3[b-6ldjinyrfd] {
        font-size: 22px;
    }

    .fc-grid[b-6ldjinyrfd] {
        grid-template-columns: repeat(3, 1fr);
    }

    .fc-hero__slide-title[b-6ldjinyrfd] {
        font-size: 6rem !important;
    }

    .section-divider[b-6ldjinyrfd] {
        width: 120px;
        height: 5px;
        margin: 60px auto;
    }
}

/* XL — ULTRA-WIDE */
@media (min-width: 2000px) {

    .fc-grid[b-6ldjinyrfd] {
        grid-template-columns: repeat(5, 1fr);
    }

    .fc-hero__slide-title[b-6ldjinyrfd] {
        font-size: 8rem !important;
    }

    .fc-hero__slide-question[b-6ldjinyrfd] {
        font-size: 22px !important;
    }

    .section-divider[b-6ldjinyrfd] {
        width: 160px;
        height: 6px;
        margin: 80px auto;
    }
}
/* /Pages/Workspace/DramaturgyView.razor.rz.scp.css */
.workspace-root[b-8dro5q17ns] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* TOP */
.workspace-top[b-8dro5q17ns] {
    flex-shrink: 0;
    padding: 0px;
}

/* BOTTOM */
.workspace-bottom[b-8dro5q17ns] {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 0px;
    padding: 00px;
    overflow: hidden;
}

/* TREE */
.workspace-tree[b-8dro5q17ns] {
    min-height: 0;
    overflow: hidden;
}

    .workspace-tree .placeholder-scroll[b-8dro5q17ns] {
        height: 100%;
        overflow-y: auto;
        background: rgba(255,255,255,0.05);
        padding: 0px;
    }

/* TABLE */
.workspace-table[b-8dro5q17ns] {
    min-height: 0;
    overflow: hidden;
}

    .workspace-table .placeholder-scroll[b-8dro5q17ns] {
        height: 100%;
        overflow-y: auto;
        background: rgba(255,255,255,0.05);
        padding: 0px;
    }

/* Placeholder visuals */
.placeholder-box[b-8dro5q17ns] {
    background: rgba(255,255,255,0.1);
    padding: 0px;
    text-align: center;
    border-radius: 6px;
}

.workspace-actionbar-container[b-8dro5q17ns] {
    flex-shrink: 0;
    width: 100%;
    z-index: 2; /* żeby był nad gridem, jeśli trzeba */
}
/* /Pages/Workspace/TechnicalView.razor.rz.scp.css */
.workspace-root[b-vd5lscyeiq] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* TOP */
.workspace-top[b-vd5lscyeiq] {
    flex-shrink: 0;
    padding: 0px;
}

/* BOTTOM */
.workspace-bottom[b-vd5lscyeiq] {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 0px;
    padding: 00px;
    overflow: hidden;
}

/* TREE */
.workspace-tree[b-vd5lscyeiq] {
    min-height: 0;
    overflow: hidden;
}

    .workspace-tree .placeholder-scroll[b-vd5lscyeiq] {
        height: 100%;
        overflow-y: auto;
        background: rgba(255,255,255,0.05);
        padding: 0px;
    }

/* TABLE */
.workspace-table[b-vd5lscyeiq] {
    min-height: 0;
    overflow: hidden;
}

    .workspace-table .placeholder-scroll[b-vd5lscyeiq] {
        height: 100%;
        overflow-y: auto;
        background: rgba(255,255,255,0.05);
        padding: 0px;
    }

/* Placeholder visuals */
.placeholder-box[b-vd5lscyeiq] {
    background: rgba(255,255,255,0.1);
    padding: 0px;
    text-align: center;
    border-radius: 6px;
}

.workspace-actionbar-container[b-vd5lscyeiq] {
    flex-shrink: 0;
    width: 100%;
    z-index: 2; /* żeby był nad gridem, jeśli trzeba */
}