/* /Components/Bible/BibleDisplay.razor.rz.scp.css */
.bible-display-container[b-n71gq2hdqc] {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background-color: black;
    color: white;
    line-height: 1.5;
    display: grid;
    overflow: hidden;
    container-type: size;
}

.text-container[b-n71gq2hdqc] {
    font-size: clamp(1px, 5cqh, 20cqh);
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.verses[b-n71gq2hdqc] {
    font-family: var(--text-font-family, inherit);
    font-size: var(--text-font-size, 1em);
    font-weight: var(--text-font-weight, normal);
    text-align: var(--text-text-align, inherit);
    color: var(--text-color, inherit);
}

.verse-number[b-n71gq2hdqc] {
    color: var(--verse-number-color, inherit);
    opacity: 0.7;
    font-size: 0.55em;
    margin-right: 0.25em;
}

.reference[b-n71gq2hdqc] {
    font-family: var(--reference-font-family, inherit);
    font-size: var(--reference-font-size, 0.6em);
    font-weight: var(--reference-font-weight, bold);
    text-align: var(--reference-text-align, right);
    color: var(--reference-color, inherit);
    margin-top: 0.6em;
}

.reference .translation[b-n71gq2hdqc] {
    opacity: 0.7;
    font-weight: normal;
    margin-left: 0.5em;
    font-size: 0.85em;
}
/* /Components/Bible/BibleMain.razor.rz.scp.css */
.bible-layout[b-zvmbhfk2u7] {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 16px;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    padding-bottom: 80px;
    box-sizing: border-box;
}

/* Chapter band on top, verses filling the rest — only the verse list scrolls. */
.text-column[b-zvmbhfk2u7] {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 10px;
    min-height: 0;
}

/* Tablet: narrower book column. */
@media (max-width: 1100px) {
    .bible-layout[b-zvmbhfk2u7] {
        grid-template-columns: 170px 1fr;
        gap: 10px;
    }
}

/* Phone: the two columns stack, the page scrolls as a whole. */
@media (max-width: 720px) {
    .bible-layout[b-zvmbhfk2u7] {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        overflow-y: auto;
    }

    .books-column[b-zvmbhfk2u7] {
        overflow: visible;
        max-height: 220px;
        overflow-y: auto;
    }

    .verses-header[b-zvmbhfk2u7] {
        position: sticky;
        top: 0;
        background: #181818;
        z-index: 1;
        padding: 4px 0;
    }
}

.books-column[b-zvmbhfk2u7],
.verses-column[b-zvmbhfk2u7] {
    overflow-y: auto;
    min-height: 0;
    color: white;
}

/* Column headings styled like the card titles on the songs overview. */
h4[b-zvmbhfk2u7] {
    margin: 0 0 8px 0;
    font-size: 1rem;
    font-weight: normal;
    letter-spacing: 0.1rem;
    color: white;
    user-select: none;
}

.book-group[b-zvmbhfk2u7] {
    margin-bottom: 16px;
}

    /* Old/New Testament are sub-headings — smaller and more restrained. */
    .book-group h4[b-zvmbhfk2u7] {
        font-size: 0.75rem;
        letter-spacing: 0.1rem;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.5);
    }

.book-item[b-zvmbhfk2u7] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 1rem;
    padding: 5px 10px;
    border-radius: var(--BorderRadius);
    cursor: pointer;
    user-select: none;
    transition: all 0.2s;
    border: 1px solid transparent;
}

    .book-item:hover[b-zvmbhfk2u7] {
        border-color: rgba(255, 255, 255, 0.5);
    }

    .book-item.selected[b-zvmbhfk2u7] {
        background: var(--AppColor);
    }

/* Heading beside the grid, not above it — the band must stay flat so the verses
   keep their height. */
.chapters-row[b-zvmbhfk2u7] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: white;
}

    .chapters-row h4[b-zvmbhfk2u7] {
        margin: 6px 0 0 0;
        white-space: nowrap;
    }

.chapter-grid[b-zvmbhfk2u7] {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
    gap: 6px;
    /* Psalms has 150 chapters: three rows, the rest scrolls. */
    max-height: 130px;
    overflow-y: auto;
}

.chapter-item[b-zvmbhfk2u7] {
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 1rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--BorderRadius);
    cursor: pointer;
    user-select: none;
    transition: all 0.2s;
}

    .chapter-item:hover[b-zvmbhfk2u7] {
        border-color: rgba(255, 255, 255, 0.8);
    }

    .chapter-item.selected[b-zvmbhfk2u7] {
        background: var(--AppColor);
        border-color: var(--AppColor);
    }

.verses-header[b-zvmbhfk2u7] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.hint[b-zvmbhfk2u7] {
    margin: 0 0 10px 0;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    user-select: none;
}

.hint-row[b-zvmbhfk2u7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.verse-list[b-zvmbhfk2u7] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 40px;
}

.verse-item[b-zvmbhfk2u7] {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 8px;
    padding: 6px 10px;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 1rem;
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--BorderRadius);
    cursor: pointer;
    user-select: none;
    transition: all 0.2s;
    line-height: 1.4;
}

/* Focus is the only feedback while tabbing through these. */
.book-item:focus-visible[b-zvmbhfk2u7],
.chapter-item:focus-visible[b-zvmbhfk2u7],
.verse-item:focus-visible[b-zvmbhfk2u7] {
    outline: 2px solid var(--AppColor);
    outline-offset: 2px;
}

    .verse-item:hover[b-zvmbhfk2u7] {
        border-color: rgba(255, 255, 255, 0.6);
    }

    .verse-item.shown[b-zvmbhfk2u7] {
        background: var(--AppColor);
        border-color: var(--AppColor);
    }

    .verse-item.highlighted[b-zvmbhfk2u7] {
        border-color: var(--AppColor);
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
    }

.verse-number[b-zvmbhfk2u7] {
    color: rgba(255, 255, 255, 0.5);
    text-align: right;
    font-size: 0.8em;
    padding-top: 2px;
}

.verse-item.shown .verse-number[b-zvmbhfk2u7] {
    color: rgba(255, 255, 255, 0.8);
}
/* /Components/Bible/ModalManageTranslations.razor.rz.scp.css */
.translations-content[b-nmhb34x0ht] {
    min-width: 520px;
    max-width: 640px;
    max-height: 60vh;
    overflow-y: auto;
    color: white;
}

.source-hint[b-nmhb34x0ht] {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 12px 0;
}

    .source-hint a[b-nmhb34x0ht] {
        color: var(--AppColor);
    }

.loading[b-nmhb34x0ht] {
    padding: 20px 0;
    color: rgba(255, 255, 255, 0.6);
}

.translation-list[b-nmhb34x0ht] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.translation-row[b-nmhb34x0ht] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--BorderRadius);
}

    .translation-row.installed[b-nmhb34x0ht] {
        border-color: var(--AppColor);
    }

.info[b-nmhb34x0ht] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.name[b-nmhb34x0ht] {
    font-weight: bold;
}

.details[b-nmhb34x0ht] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

.actions[b-nmhb34x0ht] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.installed-badge[b-nmhb34x0ht] {
    color: var(--AppColor);
}

.progress[b-nmhb34x0ht] {
    position: relative;
    margin-top: 4px;
    height: 16px;
    width: 260px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--BorderRadius);
    overflow: hidden;
}

.progress-bar[b-nmhb34x0ht] {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--AppColor);
    transition: width 0.3s;
}

.progress-label[b-nmhb34x0ht] {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.7rem;
}

.action-error[b-nmhb34x0ht] {
    margin-top: 10px;
}
/* /Components/Clocks/ClockDisplay.razor.rz.scp.css */
/* Every clock face is in the DOM; based on the template properties clock.js sets
   the class on the root element and reveals the matching one. */

.clock[b-yedhiksoga] {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    container-type: size;
    /* The screen background is black and sets no text colour. */
    color: white;
    letter-spacing: inherit;
    font-variant-numeric: tabular-nums;
}

.clock-body[b-yedhiksoga] {
    order: 1;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.clock-caption[b-yedhiksoga] {
    font-family: var(--label-font-family, inherit);
    font-size: var(--label-font-size, min(6cqw, 9cqh));
    font-weight: var(--label-font-weight, 400);
    color: var(--label-color, inherit);
    line-height: 1.3;
    text-align: center;
    max-width: 100%;
    padding: 0 2cqw;
    box-sizing: border-box;
}

    .clock-caption:empty[b-yedhiksoga] {
        display: none;
    }

.clock-label[b-yedhiksoga] {
    order: 3;
}

.clock-date[b-yedhiksoga] {
    order: 2;
}

.clock--label-top .clock-label[b-yedhiksoga] {
    order: -1;
}

/* --- Clock face visibility --- */

.clock-digital[b-yedhiksoga],
.clock-analog[b-yedhiksoga],
.clock-flip[b-yedhiksoga] {
    display: none;
}

.clock--face-digital .clock-digital[b-yedhiksoga] {
    display: flex;
}

.clock--face-analog .clock-analog[b-yedhiksoga] {
    display: block;
}

.clock--face-flip .clock-flip[b-yedhiksoga] {
    display: flex;
}

/* --- Digital --- */

.clock-digital[b-yedhiksoga] {
    align-items: baseline;
    justify-content: center;
    white-space: nowrap;
    line-height: 1;
    font-family: var(--time-font-family, inherit);
    font-weight: var(--time-font-weight, 600);
    color: var(--time-color, inherit);
    font-size: var(--time-font-size, min(19cqw, 45cqh));
}

.clock:not(.clock--seconds) .clock-digital[b-yedhiksoga] {
    font-size: var(--time-font-size, min(28cqw, 45cqh));
}

.clock:not(.clock--seconds) .clock-secs[b-yedhiksoga] {
    display: none;
}

.clock-ampm[b-yedhiksoga] {
    font-size: .4em;
    margin-left: .3em;
}

    .clock-ampm:empty[b-yedhiksoga] {
        display: none;
    }

/* --- Analog --- */

.clock-analog[b-yedhiksoga] {
    height: 100%;
    max-height: 100%;
    max-width: 100%;
    aspect-ratio: 1 / 1;
}

.clock-ring[b-yedhiksoga] {
    fill: none;
    stroke: var(--clock-ring-color, currentColor);
    stroke-width: var(--clock-ring-width, 2);
}

.dial[b-yedhiksoga] {
    display: none;
}

.clock--dial-ticks .dial-ticks[b-yedhiksoga] {
    display: block;
}

.clock--dial-numbers .dial-numbers[b-yedhiksoga] {
    display: block;
}

.clock--dial-roman .dial-roman[b-yedhiksoga] {
    display: block;
}

.tick[b-yedhiksoga] {
    stroke: var(--clock-dial-color, currentColor);
    stroke-width: .7;
}

.tick-hour[b-yedhiksoga] {
    stroke-width: 2;
}

/* The digits go into the SVG as a MarkupString and carry no scope attribute. */
.dial-numbers[b-yedhiksoga]  text,
.dial-roman[b-yedhiksoga]  text {
    fill: var(--clock-dial-color, currentColor);
    font-family: var(--time-font-family, inherit);
    font-weight: var(--time-font-weight, 500);
    font-size: 9px;
    text-anchor: middle;
    dominant-baseline: central;
}

.dial-roman[b-yedhiksoga]  text {
    font-size: 7px;
}

.hand[b-yedhiksoga] {
    stroke: var(--clock-hand-color, currentColor);
    stroke-linecap: round;
    stroke-width: 4;
}

.hand-minute[b-yedhiksoga] {
    stroke-width: 2.6;
}

.hand-second[b-yedhiksoga] {
    stroke: var(--clock-second-hand-color, var(--RedColor, currentColor));
    stroke-width: 1.2;
}

.hand-cap[b-yedhiksoga] {
    fill: var(--clock-hand-color, currentColor);
}

.clock:not(.clock--seconds) .hand-second-group[b-yedhiksoga] {
    display: none;
}

/* --- Flip --- */

.clock-flip[b-yedhiksoga] {
    align-items: stretch;
    justify-content: center;
    gap: var(--flip-gap, .08em);
    perspective: 20em;
    line-height: 1;
    font-family: var(--time-font-family, inherit);
    font-weight: var(--time-font-weight, 700);
    color: var(--time-color, inherit);
    font-size: var(--time-font-size, min(17cqw, 40cqh));
}

.clock:not(.clock--seconds) .clock-flip[b-yedhiksoga] {
    font-size: var(--time-font-size, min(26cqw, 40cqh));
}

.clock:not(.clock--seconds) .flip-secs[b-yedhiksoga] {
    display: none;
}

.flip-card[b-yedhiksoga] {
    position: relative;
    width: 1.35em;
    height: 1.6em;
    border-radius: var(--flip-radius, .1em);
    /* Without an explicit card colour: a slightly lightened tint of the text colour. */
    background: var(--flip-card-color, color-mix(in srgb, currentColor 14%, transparent));
    overflow: hidden;
    transform-style: preserve-3d;
}

.flip-static[b-yedhiksoga],
.flip-leaf[b-yedhiksoga] {
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
}

.flip-top[b-yedhiksoga],
.flip-leaf-top[b-yedhiksoga] {
    top: 0;
    align-items: flex-start;
    border-radius: var(--flip-radius, .1em) var(--flip-radius, .1em) 0 0;
}

.flip-bottom[b-yedhiksoga],
.flip-leaf-bottom[b-yedhiksoga] {
    bottom: 0;
    align-items: flex-end;
    border-radius: 0 0 var(--flip-radius, .1em) var(--flip-radius, .1em);
    box-shadow: inset 0 1px 0 color-mix(in srgb, currentColor 25%, transparent);
}

.flip-text[b-yedhiksoga] {
    display: block;
    height: 1.6em;
    line-height: 1.6em;
}

.flip-leaf[b-yedhiksoga] {
    display: none;
    background: inherit;
    backface-visibility: hidden;
}

.flip-leaf-top[b-yedhiksoga] {
    transform-origin: bottom center;
}

.flip-leaf-bottom[b-yedhiksoga] {
    transform-origin: top center;
}

.flip-card.flipping .flip-leaf[b-yedhiksoga] {
    display: flex;
}

.flip-card.flipping .flip-leaf-top[b-yedhiksoga] {
    animation: clock-flip-top-b-yedhiksoga var(--flip-duration, 600ms) ease-in forwards;
}

.flip-card.flipping .flip-leaf-bottom[b-yedhiksoga] {
    animation: clock-flip-bottom-b-yedhiksoga var(--flip-duration, 600ms) ease-out forwards;
}

@keyframes clock-flip-top-b-yedhiksoga {
    0% {
        transform: rotateX(0deg);
    }

    50%, 100% {
        transform: rotateX(-90deg);
    }
}

@keyframes clock-flip-bottom-b-yedhiksoga {
    0%, 50% {
        transform: rotateX(90deg);
    }

    100% {
        transform: rotateX(0deg);
    }
}
/* /Components/Clocks/ModalEditClock.razor.rz.scp.css */
.edit-clock[b-6nvnzsp0zr] {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    width: min(34rem, 84vw);
}

.head[b-6nvnzsp0zr] {
    display: grid;
    grid-template-columns: 12rem 1fr;
    gap: 1.1rem;
    align-items: start;
}

.preview[b-6nvnzsp0zr] {
    aspect-ratio: 16 / 9;
    border-radius: var(--RadiusM);
    overflow: hidden;
    background: black;
    border: 1px solid rgba(255, 255, 255, .1);
    /* Neutral preview — the real clock face comes from the channel template. */
    --clock-face: digital;
    --clock-seconds: true;
}

.fields[b-6nvnzsp0zr] {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    min-width: 0;
}

/* --- Time zone entries (the select's trigger and dropdown) --- */

.zone-id[b-6nvnzsp0zr] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zone-offset[b-6nvnzsp0zr] {
    margin-left: auto;
    padding-left: .75rem;
    flex: 0 0 auto;
    font-size: .75rem;
    color: rgba(255, 255, 255, .5);
}

.hint[b-6nvnzsp0zr] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-size: .8rem;
    color: rgba(255, 255, 255, .55);
}

    .hint i[b-6nvnzsp0zr] {
        color: var(--AppColor);
    }

@media (max-width: 32rem) {
    .head[b-6nvnzsp0zr] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Display/DisplayConnection.razor.rz.scp.css */
.display-connection[b-brwiny8l1v] {
    position: relative;
    display: block;
    height: 100%;
    width: 100%;
    background: black;
    overflow: hidden;
}

.media-item[b-brwiny8l1v] {
    position: absolute;
    /* Default: full screen. Inline style from template overrides. */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    transform-origin: center center;
    will-change: opacity, transform, filter, clip-path;
}

.media-content[b-brwiny8l1v] {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.media-item.media-entering[b-brwiny8l1v] {
    animation-name: var(--animation-in, anim-none-in);
    animation-duration: var(--animation-duration, 0.4s);
    animation-timing-function: var(--animation-easing, ease);
    animation-fill-mode: both;
}

.media-item.media-leaving[b-brwiny8l1v] {
    animation-name: var(--animation-out, anim-none-out);
    animation-duration: var(--animation-duration, 0.4s);
    animation-timing-function: var(--animation-easing, ease);
    animation-fill-mode: both;
    pointer-events: none;
}
/* /Components/Display/ModalSourceSettings.razor.rz.scp.css */
.source-settings[b-0hvy1swdhj] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 480px;
    max-width: 580px;
}

.settings-tabs[b-0hvy1swdhj] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.setting-tab-content[b-0hvy1swdhj] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 48vh;
    overflow-y: auto;
    padding-right: 4px;
}

    .setting-tab-content[b-0hvy1swdhj]::-webkit-scrollbar {
        width: 6px;
    }

    .setting-tab-content[b-0hvy1swdhj]::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.15);
        border-radius: 3px;
    }

    .setting-tab-content[b-0hvy1swdhj]::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.25);
    }

.empty-state[b-0hvy1swdhj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    color: rgba(255, 255, 255, 0.45);
    text-align: center;
    gap: 12px;
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: var(--BorderRadius);
}

    .empty-state i[b-0hvy1swdhj] {
        font-size: 2rem;
        opacity: 0.5;
    }

    .empty-state p[b-0hvy1swdhj] {
        margin: 0;
        font-size: 0.9rem;
    }
/* /Components/Display/Preview.razor.rz.scp.css */
.preview[b-taqcui9u57] {
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: 5px;
}

.title[b-taqcui9u57] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

h3[b-taqcui9u57] {
    font-size: 1.1rem;
    color: white;
    font-weight: normal;
    padding: 10px 0;
    margin: 0;
    letter-spacing: 2px;
    user-select: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.connection-count[b-taqcui9u57] {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    padding: 3px 8px;
    border-radius: var(--RadiusPill);
    background: rgba(255, 255, 255, 0.08);
    user-select: none;
    flex-shrink: 0;
}

    .connection-count i[b-taqcui9u57] {
        font-size: 0.55rem;
    }

    .connection-count.online i[b-taqcui9u57] {
        color: #4caf50;
        animation: pulse-online-b-taqcui9u57 2s infinite;
    }

    .connection-count.offline i[b-taqcui9u57] {
        color: rgba(255, 255, 255, 0.35);
    }

@keyframes pulse-online-b-taqcui9u57 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.preview-container[b-taqcui9u57] {
    width: 100%;
    aspect-ratio: 16/9;
    position: relative;
}

.preview-item[b-taqcui9u57] {
    height: 100%;
    width: 100%;
    overflow: hidden;
    pointer-events: none;
    border-radius: var(--BorderRadius);
    padding: 1px;
    box-sizing: border-box;
    position: relative;
    transition: all 0.3s;
    /* Own stacking context: the placements inside carry the z-index from their
       template (OuterDefinitions, 1..n). Without it those values compete with the
       preview's own chrome and a shown medium paints over the tools button. */
    z-index: 0;
    isolation: isolate;
}

.tools[b-taqcui9u57] {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    /* Above the preview box next to it — the shown medium must never cover it. */
    z-index: 1;
}
/* /Components/Display/PreviewAll.razor.rz.scp.css */
.preview-all[b-47gzxkcgxg] {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

ul[b-47gzxkcgxg] {
    margin: 0;
    padding: 0 5px 80px 5px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    list-style: none;
    flex: 1 1 auto;
    overflow-y: auto;
}

li[b-47gzxkcgxg] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    padding: 10px;
    border-radius: var(--BorderRadius);
}

    li.empty[b-47gzxkcgxg] {
        background: transparent;
        text-align: center;
        opacity: 0.6;
        font-style: italic;
    }

.preview-actions[b-47gzxkcgxg] {
    position: absolute;
    bottom: 15px;
    right: 15px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    z-index: 5;
}
/* /Components/Display/PropertyEditors/BooleanEditor.razor.rz.scp.css */
.boolean-editor[b-016dgwtvci] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    flex: 1;
}

    .boolean-editor input[b-016dgwtvci] {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

.boolean-track[b-016dgwtvci] {
    position: relative;
    width: 44px;
    height: 24px;
    border-radius: var(--RadiusL);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: background .2s ease, border-color .2s ease;
    flex: 0 0 auto;
}

.boolean-thumb[b-016dgwtvci] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    transition: transform .2s ease;
}

.boolean-editor.on .boolean-track[b-016dgwtvci] {
    background: var(--AppColor);
    border-color: var(--AppColor);
}

.boolean-editor.on .boolean-thumb[b-016dgwtvci] {
    transform: translateX(20px);
}

.boolean-label[b-016dgwtvci] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
}

.boolean-editor.on .boolean-label[b-016dgwtvci] {
    color: white;
}
/* /Components/Display/PropertyEditors/ColorEditor.razor.rz.scp.css */
.color-editor[b-f7nprlzp8t] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.color-swatch[b-f7nprlzp8t] {
    position: relative;
    flex: 0 0 auto;
    width: 44px;
    height: 32px;
    border-radius: var(--BorderRadius);
    border: 1px solid rgba(255, 255, 255, 0.18);
    cursor: pointer;
    overflow: hidden;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.25);
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

    .color-swatch:hover[b-f7nprlzp8t] {
        border-color: var(--AppColor);
        box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.25), 0 0 0 3px rgba(var(--AppColorRgb), 0.25);
        transform: translateY(-1px);
    }

    .color-swatch input[type="color"][b-f7nprlzp8t] {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer;
        border: none;
        padding: 0;
        background: transparent;
        width: 100%;
        height: 100%;
    }

.color-hex[b-f7nprlzp8t] {
    flex: 1;
    min-width: 0;
    height: 32px;
    border-radius: var(--BorderRadius);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: inherit;
    padding: 0 10px;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    text-transform: lowercase;
    transition: border-color .15s ease, background .15s ease;
}

    .color-hex:focus[b-f7nprlzp8t] {
        outline: none;
        border-color: var(--AppColor);
        background: rgba(255, 255, 255, 0.07);
    }

.color-transparent[b-f7nprlzp8t] {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: var(--BorderRadius);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

    .color-transparent:hover[b-f7nprlzp8t] {
        background: rgba(255, 255, 255, 0.08);
        color: white;
    }

    .color-transparent.active[b-f7nprlzp8t] {
        background: rgba(var(--AppColorRgb), 0.2);
        border-color: var(--AppColor);
        color: white;
    }
/* /Components/Display/PropertyEditors/FontFamilyEditor.razor.rz.scp.css */
[b-agq1lq7xpe] .font-selected-sample,
[b-agq1lq7xpe] .font-option-sample {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 22px;
    border-radius: var(--RadiusS);
    background: rgba(0, 0, 0, 0.3);
    font-weight: 500;
    font-size: 0.95rem;
}

[b-agq1lq7xpe] .font-selected-name,
[b-agq1lq7xpe] .font-option-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Display/PropertyEditors/FontWeightEditor.razor.rz.scp.css */
.font-weight-editor[b-ie0lpzsk1e] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    flex: 1;
    padding: 3px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: var(--BorderRadius);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.weight-option[b-ie0lpzsk1e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 0;
    border: none;
    border-radius: calc(var(--BorderRadius) - 2px);
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    gap: 2px;
    transition: background .12s ease, color .12s ease, transform .15s ease;
}

    .weight-option:hover[b-ie0lpzsk1e] {
        background: rgba(255, 255, 255, 0.06);
        color: white;
    }

    .weight-option.selected[b-ie0lpzsk1e] {
        background: var(--AppColor);
        color: white;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }

.weight-sample[b-ie0lpzsk1e] {
    font-size: 1rem;
    line-height: 1;
}

.weight-number[b-ie0lpzsk1e] {
    font-size: 0.62rem;
    opacity: 0.75;
    letter-spacing: 0.05em;
}
/* /Components/Display/PropertyEditors/LengthEditor.razor.rz.scp.css */
.length-editor[b-427u9ah03z] {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.length-number[b-427u9ah03z] {
    flex: 1 1 auto;
    min-width: 60px;
    height: 32px;
    border-radius: var(--BorderRadius);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: inherit;
    padding: 0 10px;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
    -moz-appearance: textfield;
}

    .length-number[b-427u9ah03z]::-webkit-outer-spin-button,
    .length-number[b-427u9ah03z]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .length-number:focus[b-427u9ah03z] {
        outline: none;
        border-color: var(--AppColor);
        background: rgba(255, 255, 255, 0.07);
    }

.length-units[b-427u9ah03z] {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    padding: 2px;
    gap: 2px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: var(--BorderRadius);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.length-unit[b-427u9ah03z] {
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    padding: 4px 8px;
    border-radius: calc(var(--BorderRadius) - 2px);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: lowercase;
    cursor: pointer;
    min-width: 28px;
    transition: background .12s ease, color .12s ease;
}

    .length-unit:hover[b-427u9ah03z] {
        background: rgba(255, 255, 255, 0.06);
        color: white;
    }

    .length-unit.selected[b-427u9ah03z] {
        background: var(--AppColor);
        color: white;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }
/* /Components/Display/PropertyEditors/NumberEditor.razor.rz.scp.css */
.number-editor[b-a0rxas50au] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.number-input[b-a0rxas50au] {
    flex: 0 0 70px;
    height: 32px;
    border-radius: var(--BorderRadius);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: inherit;
    padding: 0 10px;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
    -moz-appearance: textfield;
}

    .number-input[b-a0rxas50au]::-webkit-outer-spin-button,
    .number-input[b-a0rxas50au]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .number-input:focus[b-a0rxas50au] {
        outline: none;
        border-color: var(--AppColor);
        background: rgba(255, 255, 255, 0.07);
    }

.number-slider[b-a0rxas50au] {
    flex: 1;
    min-width: 0;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: var(--RadiusS);
    background: linear-gradient(to right, var(--AppColor) 0%, var(--AppColor) var(--fill, 0%), rgba(255,255,255,0.1) var(--fill, 0%), rgba(255,255,255,0.1) 100%);
    outline: none;
    cursor: pointer;
}

    .number-slider[b-a0rxas50au]::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: white;
        cursor: pointer;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        transition: transform .1s ease;
    }

    .number-slider[b-a0rxas50au]::-webkit-slider-thumb:hover {
        transform: scale(1.15);
    }

    .number-slider[b-a0rxas50au]::-moz-range-thumb {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: white;
        cursor: pointer;
        border: none;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    }
/* /Components/Display/PropertyEditors/PropertyRow.razor.rz.scp.css */
.property-row[b-f5p1qr0dv3] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border-radius: var(--BorderRadius);
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: border-color .15s ease, background .15s ease;
}

    .property-row:hover[b-f5p1qr0dv3] {
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(255, 255, 255, 0.08);
    }

    .property-row.is-modified[b-f5p1qr0dv3] {
        border-color: rgba(var(--AppColorRgb), 0.45);
        background: rgba(var(--AppColorRgb), 0.06);
    }

.property-header[b-f5p1qr0dv3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.property-label[b-f5p1qr0dv3] {
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.92);
}

    .property-label i[b-f5p1qr0dv3] {
        font-size: 0.85rem;
        color: rgba(255, 255, 255, 0.55);
        width: 14px;
        text-align: center;
    }

.property-description[b-f5p1qr0dv3] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
    font-style: italic;
}

.property-body[b-f5p1qr0dv3] {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
}

.property-control[b-f5p1qr0dv3] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: stretch;
}

    .property-control[b-f5p1qr0dv3]  > * {
        flex: 1;
        min-width: 0;
    }

.property-reset[b-f5p1qr0dv3] {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    align-self: center;
    border-radius: var(--BorderRadius);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .2s ease;
}

    .property-reset:not(:disabled):hover[b-f5p1qr0dv3] {
        background: rgba(var(--RedColorRgb), 0.18);
        border-color: rgba(var(--RedColorRgb), 0.5);
        color: white;
    }

    .property-reset:not(:disabled):active[b-f5p1qr0dv3] {
        transform: rotate(-30deg);
    }

    .property-reset:disabled[b-f5p1qr0dv3] {
        opacity: 0.25;
        cursor: not-allowed;
    }
/* /Components/Display/PropertyEditors/SelectEditor.razor.rz.scp.css */
[b-zsxw2bd14o] .select-option-icon {
    color: rgba(255, 255, 255, 0.7);
    width: 14px;
    text-align: center;
}
/* /Components/Display/PropertyEditors/TextAlignEditor.razor.rz.scp.css */
.text-align-editor[b-8h8z8ywanx] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    flex: 1;
    padding: 3px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: var(--BorderRadius);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.align-option[b-8h8z8ywanx] {
    height: 30px;
    border: none;
    border-radius: calc(var(--BorderRadius) - 2px);
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    transition: background .12s ease, color .12s ease;
}

    .align-option:hover[b-8h8z8ywanx] {
        background: rgba(255, 255, 255, 0.06);
        color: white;
    }

    .align-option.selected[b-8h8z8ywanx] {
        background: var(--AppColor);
        color: white;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }
/* /Components/Display/PropertyEditors/TextEditor.razor.rz.scp.css */
.text-editor[b-0kbe4ul2kx] {
    flex: 1;
    width: 100%;
    height: 32px;
    border-radius: var(--BorderRadius);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: inherit;
    padding: 0 10px;
    font-size: 0.9rem;
    box-sizing: border-box;
    transition: border-color .15s ease, background .15s ease;
}

    .text-editor:focus[b-0kbe4ul2kx] {
        outline: none;
        border-color: var(--AppColor);
        background: rgba(255, 255, 255, 0.07);
    }

    .text-editor[b-0kbe4ul2kx]::placeholder {
        color: rgba(255, 255, 255, 0.3);
        font-style: italic;
    }
/* /Components/Display/ShownSourcesHistory.razor.rz.scp.css */
.shown-sources-history[b-3t3ihb8wnl] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

ul[b-3t3ihb8wnl] {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.row[b-3t3ihb8wnl] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 2px;
    padding: 4px 6px;
    border-radius: var(--BorderRadius);
    transition: background 0.15s;
}

.row:hover[b-3t3ihb8wnl] {
    background: rgba(255, 255, 255, 0.08);
}

.row-open[b-3t3ihb8wnl] {
    display: grid;
    grid-template-columns: 36px 1fr;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 4px;
    border: none;
    background: transparent;
    color: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.delete[b-3t3ihb8wnl],
.reshow[b-3t3ihb8wnl] {
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: var(--BorderRadius);
    opacity: 0.35;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
}

.row:hover .delete[b-3t3ihb8wnl],
.row:hover .reshow[b-3t3ihb8wnl] {
    opacity: 0.6;
}

.delete:hover[b-3t3ihb8wnl] {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
    color: var(--RedColor);
}

.reshow:hover[b-3t3ihb8wnl] {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
    color: var(--AppColor);
}

.row-open:focus-visible[b-3t3ihb8wnl],
.delete:focus-visible[b-3t3ihb8wnl],
.reshow:focus-visible[b-3t3ihb8wnl] {
    outline: 2px solid var(--AppColor);
    outline-offset: -2px;
    opacity: 1;
}

.icon[b-3t3ihb8wnl] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--BorderRadius);
    box-sizing: border-box;
    padding: 6px;
}

.icon img[b-3t3ihb8wnl] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.icon i[b-3t3ihb8wnl] {
    font-size: 0.9rem;
    opacity: 0.8;
}

.text[b-3t3ihb8wnl] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.text > span[b-3t3ihb8wnl] {
    margin: 0;
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.text .title[b-3t3ihb8wnl] {
    font-size: 0.9rem;
}

.text .subtitle[b-3t3ihb8wnl] {
    font-size: 0.7rem;
    opacity: 0.55;
}

.empty[b-3t3ihb8wnl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 10px;
    opacity: 0.5;
    font-style: italic;
    flex: 1;
}

.empty i[b-3t3ihb8wnl] {
    font-size: 1.8rem;
}
/* /Components/Display/ShownSourcesList.razor.rz.scp.css */
.shown-sources-list[b-in24b6adgz] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

ul[b-in24b6adgz] {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.list-head[b-in24b6adgz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 10px 8px 10px;
    flex: 0 0 auto;
}

.list-count[b-in24b6adgz] {
    font-size: 0.75rem;
    opacity: 0.6;
}

/* The generic Button carries the look; only its size is tightened for the narrow
   panel head, where the row next to it is a 0.75rem caption. */
.hide-all[b-in24b6adgz] {
    display: inline-flex;
}

.hide-all[b-in24b6adgz]  .button-container {
    padding: 6px 12px;
    font-size: 0.75rem;
}

.hide-all[b-in24b6adgz]  .button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.row[b-in24b6adgz] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    border-radius: var(--BorderRadius);
    transition: background 0.15s;
}

.row:hover[b-in24b6adgz] {
    background: rgba(255, 255, 255, 0.08);
}

.row-open[b-in24b6adgz] {
    display: grid;
    grid-template-columns: 36px 1fr;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 4px;
    border: none;
    background: transparent;
    color: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

    .row-open:focus-visible[b-in24b6adgz] {
        outline: 2px solid var(--AppColor);
        outline-offset: -2px;
        border-radius: var(--RadiusS);
    }

.icon[b-in24b6adgz] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--BorderRadius);
    box-sizing: border-box;
    padding: 6px;
}

.icon img[b-in24b6adgz] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.icon i[b-in24b6adgz] {
    font-size: 1rem;
    opacity: 0.8;
}

.text[b-in24b6adgz] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.text > span[b-in24b6adgz] {
    margin: 0;
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.text .title[b-in24b6adgz] {
    font-size: 0.95rem;
}

.text .subtitle[b-in24b6adgz] {
    font-size: 0.75rem;
    opacity: 0.6;
}

.hide-btn[b-in24b6adgz] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: var(--BorderRadius);
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.hide-btn:hover[b-in24b6adgz] {
    background: var(--RedColor);
    color: white;
}

.empty[b-in24b6adgz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 30px 10px;
    opacity: 0.5;
    font-style: italic;
}

.empty i[b-in24b6adgz] {
    font-size: 1.6rem;
}
/* /Components/FreeTexts/FreeTextDisplay.razor.rz.scp.css */
.freetext-display-container[b-nysf58ol3z] {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background-color: black;
    color: white;
    line-height: 1.5;
    display: grid;
    overflow: hidden;
    container-type: size;
}

.text-container[b-nysf58ol3z] {
    font-size: clamp(1px, 5cqh, 20cqh);
}

[b-nysf58ol3z] p,
.freetext-display-container h1[b-nysf58ol3z] {
    padding: 0;
    margin: 0;
}

.freetext-display-container h1[b-nysf58ol3z] {
    font-family: var(--header-font-family, inherit);
    font-size: var(--header-font-size, 1.2em);
    font-weight: var(--header-font-weight, bold);
    text-align: var(--header-text-align, inherit);
    color: var(--header-color, inherit);
    margin: 0 0 0.3em;
}

[b-nysf58ol3z] p {
    font-family: var(--text-font-family, inherit);
    font-size: var(--text-font-size, 1em);
    font-weight: var(--text-font-weight, normal);
    text-align: var(--text-text-align, inherit);
    color: var(--text-color, inherit);
}
/* /Components/FreeTexts/FreeTextEditor.razor.rz.scp.css */
.freetext-editor[b-c9bi57rw22] {
    display: grid;
    grid-template-rows: 1fr;
    align-content: start;
    grid-gap: 10px;
    height: 100%;
    min-height: 400px;
    padding: 0 0 100px 0;
    box-sizing: border-box;
}

    .freetext-editor.live[b-c9bi57rw22] {
        grid-template-rows: auto 1fr;
    }

.live-indicator[b-c9bi57rw22] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px var(--AppColor) solid;
    border-radius: var(--BorderRadius);
    color: var(--AppColor);
}

    .live-indicator i[b-c9bi57rw22] {
        animation: livePulse-b-c9bi57rw22 2s ease-in-out infinite;
    }

[b-c9bi57rw22] .tinymce-wrapper {
    height: 100%;
}

/* Frame styling is global (app.css) — only the editor height is page specific. */
[b-c9bi57rw22] .tox.tox-tinymce {
    min-height: 400px;
}

@keyframes livePulse-b-c9bi57rw22 {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}
/* /Components/FreeTexts/FreeTextsMain.razor.rz.scp.css */
/* Tiles, grid and empty state come from the shared MediaTile/TileGrid/EmptyState components. */
/* /Components/Images/ImageCollectionEditor.razor.rz.scp.css */
/* Scrolls as a whole; the tile grid keeps its natural height. */
.editor-content[b-a0wufvqlt6] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 0;
    overflow: auto;
    /* Room for the floating action buttons at the bottom right. */
    padding-bottom: 100px;
}

    .editor-content[b-a0wufvqlt6]  .tile-grid {
        overflow: visible;
        padding-bottom: 0;
    }
/* /Components/Images/ImageDisplay.razor.rz.scp.css */
.image-display-container[b-sv5nh8i4sd] {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: grid;
    overflow: hidden;
    border-radius: var(--image-radius, 0);
}

.image-slide[b-sv5nh8i4sd] {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    /* contain = whole picture visible, cover = fills the area (design property) */
    object-fit: var(--image-fit, contain);
    object-position: center;
    border-radius: var(--image-radius, 0);
}

/* Loaded but never laid out — only there to warm the cache for the next slide. */
.image-preload[b-sv5nh8i4sd] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
/* /Components/Images/ImagesMain.razor.rz.scp.css */
/* Scrolls as a whole; the inner grids must not stretch to equal heights. */
.images-content[b-6lhjzle4x6] {
    display: flex;
    flex-direction: column;
    align-content: start;
    min-height: 0;
    overflow: auto;
}

    .images-content[b-6lhjzle4x6]  .tile-grid {
        overflow: visible;
        padding-bottom: 0;
    }

.section-title[b-6lhjzle4x6] {
    margin: 1.5rem 0 .5rem;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .6;
}

    /* The upload component sits in front of everything (its file input is hidden but
       still a child), so the first heading is never :first-child. */
    .section-title:first-of-type[b-6lhjzle4x6] {
        margin-top: 0;
    }

.slideshow-bar[b-6lhjzle4x6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .5rem .75rem;
    margin-bottom: 1rem;
    border-radius: var(--RadiusM);
    background-color: rgba(var(--AppColorRgb), .15);
    border: 1px solid rgba(var(--AppColorRgb), .35);
}

.slideshow-info[b-6lhjzle4x6] {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
}

    .slideshow-info span[b-6lhjzle4x6] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.slide-counter[b-6lhjzle4x6] {
    opacity: .7;
    font-variant-numeric: tabular-nums;
}

.slideshow-controls[b-6lhjzle4x6] {
    display: flex;
    align-items: center;
    gap: .25rem;
}

/* Stays secondary next to the 40px round controls, but keeps a tablet-sized hit area. */
.slideshow-controls[b-6lhjzle4x6]  .shortcut-hint .trigger {
    width: 34px;
    height: 34px;
    margin-left: .25rem;
}

/* Room for the floating action buttons at the bottom right. */
.images-content > :last-child[b-6lhjzle4x6] {
    margin-bottom: 100px;
}

/* /Components/Images/ImageUpload.razor.rz.scp.css */
/* Sticks to the top of the scrolling page: an upload of 30 photos runs for a
   while, and the operator scrolls through the tiles meanwhile. */
.upload-progress[b-nhjz2bkbkk] {
    position: sticky;
    top: 0;
    z-index: 3;
    display: grid;
    gap: .4rem;
    padding: .5rem .75rem;
    margin-bottom: 1rem;
    border-radius: var(--RadiusM);
    background-color: var(--Darker);
    border: 1px solid rgba(var(--AppColorRgb), .35);
}

.upload-head[b-nhjz2bkbkk] {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
}

    .upload-head i[b-nhjz2bkbkk] {
        color: var(--AppColor);
    }

/* The file name is the part that may be long — it yields, the percentage does not. */
.upload-file[b-nhjz2bkbkk] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upload-percent[b-nhjz2bkbkk] {
    flex: 0 0 auto;
    opacity: .7;
    font-variant-numeric: tabular-nums;
}

.upload-bar[b-nhjz2bkbkk] {
    height: 6px;
    border-radius: var(--RadiusPill);
    background-color: rgba(var(--AppColorRgb), .2);
    overflow: hidden;
}

.upload-bar-fill[b-nhjz2bkbkk] {
    height: 100%;
    background-color: var(--AppColor);
    transition: width .2s ease;
}

/* While the picture is decoded and scaled down no bytes move. The stripes say
   "still working" instead of letting the bar look stuck. */
.upload-bar-fill.working[b-nhjz2bkbkk] {
    background-image: linear-gradient(115deg, rgba(255, 255, 255, .3) 0 25%, transparent 25% 50%, rgba(255, 255, 255, .3) 50% 75%, transparent 75% 100%);
    background-size: 28px 28px;
    animation: upload-stripes-b-nhjz2bkbkk .8s linear infinite;
}

@keyframes upload-stripes-b-nhjz2bkbkk {
    to {
        background-position: 28px 0;
    }
}

/* The native input stays out of the layout — button and drop zone drive it. */
.file-input[b-nhjz2bkbkk] {
    display: none;
}
/* /Components/Images/ModalSelectImages.razor.rz.scp.css */
.select-images[b-gd36avk2l8] {
    max-height: 60vh;
    overflow-y: auto;
}

    .select-images ul[b-gd36avk2l8] {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: .6rem;
    }

.image-option[b-gd36avk2l8] {
    position: relative;
    display: grid;
    gap: .3rem;
    width: 100%;
    padding: .3rem;
    border: 2px solid transparent;
    border-radius: var(--RadiusM);
    background-color: rgba(var(--AppColorRgb), .08);
    color: inherit;
    cursor: pointer;
    text-align: left;
}

    .image-option.selected[b-gd36avk2l8] {
        border-color: var(--AppColor);
        background-color: rgba(var(--AppColorRgb), .22);
    }

    /* contain: picking the right picture means seeing all of it, not a crop. */
    .image-option img[b-gd36avk2l8] {
        width: 100%;
        aspect-ratio: 4 / 3;
        object-fit: contain;
        background-color: rgba(0, 0, 0, .35);
        border-radius: var(--RadiusS);
        display: block;
    }

.caption[b-gd36avk2l8] {
    font-size: .85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.badge[b-gd36avk2l8] {
    position: absolute;
    top: .5rem;
    right: .5rem;
    width: 1.5rem;
    height: 1.5rem;
    display: grid;
    place-items: center;
    border-radius: var(--RadiusPill);
    background-color: var(--AppColor);
    color: #fff;
    font-size: .75rem;
}

.empty[b-gd36avk2l8] {
    opacity: .7;
    margin: 0;
}
/* /Components/Images/ModalSlideshowSettings.razor.rz.scp.css */
.slideshow-settings[b-1lagkg3j0i] {
    display: grid;
    gap: .75rem;
    min-width: 26rem;
    max-width: 32rem;
}

.setting[b-1lagkg3j0i] {
    display: grid;
    gap: .75rem;
    padding: .9rem 1rem;
    border-radius: var(--BorderRadius);
    background-color: rgba(var(--AppColorRgb), .1);
}

.setting-head[b-1lagkg3j0i] {
    display: flex;
    align-items: center;
    gap: .85rem;
}

    .setting-head > i[b-1lagkg3j0i] {
        font-size: 1.1rem;
        width: 1.4rem;
        text-align: center;
        color: var(--AppColor);
        flex: none;
    }

.setting-labels[b-1lagkg3j0i] {
    display: grid;
    gap: .15rem;
    /* Takes the free space so the control stays right-aligned. */
    flex: 1;
    min-width: 0;
}

.setting-title[b-1lagkg3j0i] {
    font-size: .95rem;
}

.setting-hint[b-1lagkg3j0i] {
    font-size: .8rem;
    opacity: .6;
}

.duration[b-1lagkg3j0i] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: none;
}

    .duration[b-1lagkg3j0i]  input[type="number"] {
        width: 4.5rem;
        text-align: center;
    }

.unit[b-1lagkg3j0i] {
    font-size: .85rem;
    opacity: .6;
}

/* Quick picks for the intervals that actually get used. */
.presets[b-1lagkg3j0i] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    /* Aligned with the labels, not with the icon. */
    padding-left: 2.25rem;
}

.preset[b-1lagkg3j0i] {
    min-width: 3rem;
    padding: .3rem .6rem;
    font: inherit;
    font-size: .85rem;
    color: inherit;
    background-color: rgba(255, 255, 255, .08);
    border: 1px solid transparent;
    border-radius: var(--RadiusPill);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

    .preset:hover[b-1lagkg3j0i] {
        background-color: rgba(255, 255, 255, .16);
    }

    .preset.active[b-1lagkg3j0i] {
        background-color: var(--AppColor);
        border-color: var(--AppColor);
        color: white;
    }

    .preset:focus-visible[b-1lagkg3j0i] {
        outline: 2px solid var(--AppColor);
        outline-offset: 2px;
    }
/* /Components/Layout/AuthLayout.razor.rz.scp.css */
.auth-layout[b-ahknyqdg27] {
    height: 100%;
    width: 100%;
    /* Flex, not grid: a centered grid track sizes to the card's max-content and would
       push it out of the viewport on narrow screens. */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    overflow: auto;
    /* Same dark base as the app shell, with a soft accent glow behind the card. */
    background: radial-gradient(120% 80% at 50% 0%, rgba(var(--AppColorRgb), 0.16), rgba(0, 0, 0, 0) 60%), #181818;
}

.auth-card[b-ahknyqdg27] {
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    border-radius: var(--RadiusL);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #1f1f1f;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
    overflow: hidden;
}

/* Head mirrors the app menu header so both panels read as one family. */
.auth-head[b-ahknyqdg27] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(135deg, rgba(var(--AppColorRgb), 0.18), rgba(var(--AppColorRgb), 0) 70%);
}

.auth-brand-mark[b-ahknyqdg27] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    filter: drop-shadow(0 4px 12px rgba(var(--AppColorRgb), 0.35));
}

    .auth-brand-mark img[b-ahknyqdg27] {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.auth-brand-text[b-ahknyqdg27] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.auth-brand-title[b-ahknyqdg27] {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.2;
}

.auth-brand-subtitle[b-ahknyqdg27] {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.2;
}

.auth-body[b-ahknyqdg27] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px;
}

/* The pages render into @Body, so their markup needs ::deep. */
.auth-body[b-ahknyqdg27]  h1 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
}

.auth-body[b-ahknyqdg27]  .auth-intro {
    margin: 6px 0 0 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.6);
}

.auth-body[b-ahknyqdg27]  .auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Label + input + validation message travel together. */
.auth-body[b-ahknyqdg27]  .auth-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.auth-body[b-ahknyqdg27]  .auth-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 480px) {
    .auth-body[b-ahknyqdg27]  .auth-row {
        grid-template-columns: 1fr;
    }

    .auth-layout[b-ahknyqdg27] {
        padding: 12px;
    }

    .auth-body[b-ahknyqdg27] {
        padding: 20px;
    }
}

/* Without these two the inputs keep their intrinsic width and break out of the card. */
.auth-body[b-ahknyqdg27]  .form-field {
    min-width: 0;
}

.auth-body[b-ahknyqdg27]  input[type="text"],
.auth-body[b-ahknyqdg27]  input[type="email"],
.auth-body[b-ahknyqdg27]  input[type="password"] {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    border-radius: var(--RadiusM);
    font-size: 0.95rem;
}

    .auth-body[b-ahknyqdg27]  input:focus {
        border-color: var(--AppColor);
        box-shadow: 0 0 0 3px rgba(var(--AppColorRgb), 0.18);
    }

.auth-body[b-ahknyqdg27]  .form-field-label {
    font-size: 0.8rem;
}

.auth-body[b-ahknyqdg27]  .auth-check {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
}

    .auth-body[b-ahknyqdg27]  .auth-check input {
        width: 16px;
        height: 16px;
        margin: 0;
        accent-color: var(--AppColor);
        cursor: pointer;
    }

.auth-body[b-ahknyqdg27]  .auth-hint {
    margin: -6px 0 0 0;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.45);
}

.auth-body[b-ahknyqdg27]  .auth-error {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--RadiusM);
    border: 1px solid rgba(var(--RedColorRgb), .45);
    background: rgba(var(--RedColorRgb), .15);
    font-size: 0.85rem;
    line-height: 1.4;
}

.auth-body[b-ahknyqdg27]  .auth-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    margin-top: 2px;
    border: none;
    border-radius: var(--RadiusM);
    background: var(--AppColor);
    color: white;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter .15s ease, transform .1s ease;
}

    .auth-body[b-ahknyqdg27]  .auth-submit:hover {
        filter: brightness(1.12);
    }

    .auth-body[b-ahknyqdg27]  .auth-submit:active {
        transform: translateY(1px);
    }

    .auth-body[b-ahknyqdg27]  .auth-submit:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(var(--AppColorRgb), 0.35);
    }

.auth-body[b-ahknyqdg27]  .auth-secondary {
    text-align: center;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
}

    .auth-body[b-ahknyqdg27]  .auth-secondary a {
        color: var(--AppColor);
        text-decoration: none;
    }

        .auth-body[b-ahknyqdg27]  .auth-secondary a:hover {
            text-decoration: underline;
        }

.auth-body[b-ahknyqdg27]  .validation-message {
    font-size: 0.78rem;
    color: var(--RedColor);
}

#blazor-error-ui[b-ahknyqdg27] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-ahknyqdg27] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/DisplayLayout.razor.rz.scp.css */
.display-layout[b-grk6ggo6pg] {
    display: block;
    height: 100%;
    width: 100%;
    background: black;
}

.display-layout-content[b-grk6ggo6pg] {
    display: block;
    height: 100%;
    width: 100%;
}


#blazor-error-ui[b-grk6ggo6pg] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-grk6ggo6pg] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.layout[b-6mjxd7leva] {
    height: 100%;
    width: 100%;
    overflow: auto;
    display: grid;
    background: #181818;
    grid-template-rows: auto 1fr;
}

.layout-top[b-6mjxd7leva] {
    z-index: 1;
}

.layout-center[b-6mjxd7leva] {
    display: grid;
    /* rail | playlist | content | resize handle | preview */
    grid-template-columns: auto auto 1fr auto auto;
    overflow: auto;
    z-index: 0;
}

/* Pinned columns: the playlist column is the only auto-placed one, because
   .layout-center-left is display:contents and its child is the real grid item.
   Without the pins, hiding the playlist would slide the content into an auto
   column and it would stop filling the free space. */
.layout-center[b-6mjxd7leva]  .rail {
    grid-column: 1;
}

.layout-resize-handle[b-6mjxd7leva] {
    grid-column: 4;
    width: 6px;
    cursor: col-resize;
    background: transparent;
    transition: background 0.15s;
    user-select: none;
    touch-action: none;
}

.layout-resize-handle:hover[b-6mjxd7leva],
.layout-resize-handle.is-dragging[b-6mjxd7leva] {
    background: rgba(255, 255, 255, 0.15);
}

.layout-center-left[b-6mjxd7leva] {
    padding: 0 0 0 0;
    display: contents;
}

.layout-center-content[b-6mjxd7leva] {
    grid-column: 3;
    display: grid;
    overflow: auto;
    padding: 0 0 0 0;
    background: linear-gradient(0deg,rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.05) 50%);
    border-radius: var(--BorderRadius);
}

.layout-center-right[b-6mjxd7leva] {
    grid-column: 5;
    padding: 0 0 0 0;
    width: var(--layout-right-width, 400px);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* Stretch the generic Tabs to fill the right-side panel. */
.layout-center-right[b-6mjxd7leva]  .tabs {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

.layout-center-right[b-6mjxd7leva]  .tabs-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.layout-center-right[b-6mjxd7leva]  .tab-panel {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* Mobile (< 768px): hide the playlist by default */
@media (max-width: 767px) {
    .layout:not(.playlist-force-open) .layout-center-left[b-6mjxd7leva] {
        display: none;
    }
}

/* Tablet and below (< 1024px): hide the preview by default */
@media (max-width: 1023px) {
    .layout:not(.preview-force-open) .layout-resize-handle[b-6mjxd7leva],
    .layout:not(.preview-force-open) .layout-center-right[b-6mjxd7leva] {
        display: none;
    }
}

/* Manual overrides — they switch the automatic logic off */
.layout.playlist-force-open .layout-center-left[b-6mjxd7leva] {
    display: contents;
}

.layout.playlist-force-closed .layout-center-left[b-6mjxd7leva] {
    display: none;
}

.layout.preview-force-open .layout-resize-handle[b-6mjxd7leva],
.layout.preview-force-open .layout-center-right[b-6mjxd7leva] {
    display: block;
}

.layout.preview-force-closed .layout-resize-handle[b-6mjxd7leva],
.layout.preview-force-closed .layout-center-right[b-6mjxd7leva] {
    display: none;
}


#blazor-error-ui[b-6mjxd7leva] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-6mjxd7leva] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/PlaylistToggle.razor.rz.scp.css */
.playlist-toggle[b-mytt2475ni] {
    position: fixed;
    top: 50%;
    /* Sits right of the icon rail, which the fixed positioning does not know about. */
    left: var(--RailWidth);
    transform: translateY(-50%);
    z-index: 10;
    width: 22px;
    height: 60px;
    background: rgba(255, 255, 255, 0.08);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 var(--BorderRadius) var(--BorderRadius) 0;
    transition: background 0.2s, left 0.3s ease;
    user-select: none;
    padding: 0;
    font-size: 0.85rem;
}

.playlist-toggle:hover[b-mytt2475ni] {
    background: rgba(255, 255, 255, 0.18);
}

.playlist-toggle i[b-mytt2475ni] {
    transition: transform 0.3s ease;
}

/* The tab sticks to the right edge of the playlist as soon as it is visible.
   The visibility logic mirrors the rules in MainLayout.razor.css: visible from
   tablet upwards (unless force-closed) or when force-open. */
@media (min-width: 768px) {
    .layout:not(.playlist-force-closed) .playlist-toggle[b-mytt2475ni] {
        left: calc(var(--RailWidth) + 300px);
    }

    .layout:not(.playlist-force-closed) .playlist-toggle i[b-mytt2475ni] {
        transform: rotate(180deg);
    }
}

/* Same offset as the media-query rule above: the fixed tab knows nothing about
   the icon rail, so the playlist width has to be added to it. */
.layout.playlist-force-open .playlist-toggle[b-mytt2475ni] {
    left: calc(var(--RailWidth) + 300px);
}

.layout.playlist-force-open .playlist-toggle i[b-mytt2475ni] {
    transform: rotate(180deg);
}

.layout.playlist-force-closed .playlist-toggle[b-mytt2475ni] {
    left: var(--RailWidth);
}

.layout.playlist-force-closed .playlist-toggle i[b-mytt2475ni] {
    transform: rotate(0deg);
}
/* /Components/MainMenu/Navbar.razor.rz.scp.css */
menu[b-ssbqj5t5mo] {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    margin: 5px;
    padding: 0;
    color: white;
}

.righttop[b-ssbqj5t5mo] {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 4px;
    border-radius: var(--BorderRadius);
}

.title[b-ssbqj5t5mo] {
    display: flex;
    user-select: none;
    align-items: center;
}

    .title button[b-ssbqj5t5mo] {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0;
        font-family: inherit;
        font-size: 1.1rem;
        padding: 8px 10px;
        border: none;
        background: transparent;
        color: inherit;
        cursor: pointer;
        transition: all 0.3s;
        border-radius: var(--BorderRadius);
    }

        .title button img[b-ssbqj5t5mo] {
            width: 24px;
            height: 24px;
            object-fit: contain;
            flex-shrink: 0;
        }

        .title button:hover[b-ssbqj5t5mo] {
            background: rgba(255, 255, 255, 0.1);
        }

        .title button:focus-visible[b-ssbqj5t5mo] {
            outline: 2px solid var(--AppColor);
            outline-offset: -2px;
        }

.lefttop[b-ssbqj5t5mo] {
    display: flex;
    flex-direction: row;
    border-radius: var(--BorderRadius);
    overflow: hidden;
}

.topmenubutton[b-ssbqj5t5mo] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    margin: 0 2px;
    border: none;
    background: transparent;
    color: inherit;
    font-family: inherit;
    cursor: pointer;
    user-select: none;
    border-radius: var(--BorderRadius);
    transition: background 0.2s, color 0.2s;
    position: relative;
}

    .topmenubutton:focus-visible[b-ssbqj5t5mo] {
        outline: 2px solid var(--AppColor);
        outline-offset: -2px;
    }

    .topmenubutton p[b-ssbqj5t5mo] {
        margin: 0;
        padding: 0;
        font-size: 1rem;
    }

    .topmenubutton i[b-ssbqj5t5mo] {
        font-size: 1.05rem;
        line-height: 1;
        opacity: 0.9;
    }

    .topmenubutton:hover[b-ssbqj5t5mo] {
        background: rgba(255, 255, 255, 0.1);
    }

    .topmenubutton.active[b-ssbqj5t5mo] {
        background: rgba(255, 255, 255, 0.18);
    }

        .topmenubutton.active i[b-ssbqj5t5mo] {
            opacity: 1;
        }

.centertop[b-ssbqj5t5mo] {
    display: grid;
}

.usermenu-backdrop[b-ssbqj5t5mo] {
    position: fixed;
    inset: 0;
    z-index: 998;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(2px);
    animation: usermenu-fade-b-ssbqj5t5mo 0.15s ease;
}

/* Account menu — the only dropdown left in the top bar; navigation moved to the rail. */
.usermenu[b-ssbqj5t5mo] {
    position: fixed;
    top: 56px;
    right: 12px;
    z-index: 999;
    width: min(280px, calc(100vw - 24px));
    background: #1f1f1f;
    color: white;
    border-radius: var(--RadiusL);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    overflow: hidden;
    transform-origin: top right;
    animation: usermenu-pop-b-ssbqj5t5mo 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}

.usermenu-head[b-ssbqj5t5mo] {
    display: flex;
    flex-direction: column;
    padding: 10px 12px;
    border-radius: var(--RadiusM);
    background: linear-gradient(135deg, rgba(var(--AppColorRgb), 0.18), rgba(var(--AppColorRgb), 0) 70%);
}

.usermenu-name[b-ssbqj5t5mo] {
    font-size: 0.95rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.usermenu-role[b-ssbqj5t5mo] {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.25;
}

.usermenu form[b-ssbqj5t5mo] {
    margin: 0;
}

.usermenu-logout[b-ssbqj5t5mo] {
    width: 100%;
}

/* --- Menu rows --- */
.usermenu-list[b-ssbqj5t5mo] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.usermenu-item[b-ssbqj5t5mo] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: none;
    color: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: var(--RadiusM);
    transition: background 0.15s;
}

    .usermenu-item:hover[b-ssbqj5t5mo] {
        background: rgba(255, 255, 255, 0.08);
    }

.usermenu-item-icon[b-ssbqj5t5mo] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--RadiusM);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
}

.usermenu-item:hover .usermenu-item-icon[b-ssbqj5t5mo] {
    background: rgba(var(--AppColorRgb), 0.2);
    color: white;
}

.usermenu-item-body[b-ssbqj5t5mo] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.usermenu-item-title[b-ssbqj5t5mo] {
    font-size: 0.95rem;
    line-height: 1.25;
}

@keyframes usermenu-pop-b-ssbqj5t5mo {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(-6px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes usermenu-fade-b-ssbqj5t5mo {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
/* /Components/MainMenu/Sidebar.razor.rz.scp.css */
.rail[b-ilwbeaekul] {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: var(--RailWidth);
    /* Optical top edge, not the box edge: the h1 of the content column starts ~8px
       below its box (leading above the cap height), the rail glyph ~11px below the
       tile edge. The difference is taken off here so both sit on one line. */
    padding: calc(var(--LayoutPadTop) - 3px) 0 12px 0;
    background: rgba(0, 0, 0, 0.22);
    color: white;
    /* No scroll container anywhere in the rail: overflow would clip the tooltip
       bubbles, which reach past the right edge. With a handful of entries the rail
       fits; beyond that the surrounding .layout-center scrolls. */
    overflow: visible;
}

.rail-group[b-ilwbeaekul] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.rail-spacer[b-ilwbeaekul] {
    flex: 1 1 auto;
    min-height: 8px;
}

/* The start entry is set off by spacing, not by a rule — the app has no borders. */
.rail[b-ilwbeaekul]  .rail-home {
    margin-bottom: 10px;
}

/* ::deep throughout: the entries are NavLink *components*, so their root <a> never
   carries this component's scope attribute — a plain `.rail-item {…}` rule would
   silently not match and the links would fall back to the browser's link styling. */

/* Every entry is a tile with its own surface — bare icons on the dark background
   ran into each other. Images and Font Awesome glyphs share the same tile. */
.rail[b-ilwbeaekul]  .rail-item {
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--RadiusM);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.75);
    font-size: 1.05rem;
    line-height: 1;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.rail[b-ilwbeaekul]  .rail-item img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    opacity: 0.8;
    transition: opacity 0.15s;
}

.rail[b-ilwbeaekul]  .rail-item:hover {
    background: rgba(255, 255, 255, 0.16);
    color: white;
}

.rail[b-ilwbeaekul]  .rail-item:hover img {
    opacity: 1;
}

.rail[b-ilwbeaekul]  .rail-item:focus-visible {
    outline: 2px solid var(--AppColor);
    outline-offset: 2px;
}

/* Active page: the tinted tile alone. An extra marker on the rail edge would sit
   outside the 8px margin and get cut off by the window. */
.rail[b-ilwbeaekul]  .rail-item.active {
    background: rgba(var(--AppColorRgb), 0.38);
    color: white;
}

.rail[b-ilwbeaekul]  .rail-item.active img {
    opacity: 1;
}

/* --- Speech-bubble tooltip --- */
.rail[b-ilwbeaekul]  .rail-tip {
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    z-index: 50;
    padding: 6px 10px;
    border-radius: var(--RadiusM);
    background: #2b2b2b;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
    color: white;
    font-size: 0.82rem;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-50%) translateX(-4px);
    transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
}

/* The bubble's tail. */
.rail[b-ilwbeaekul]  .rail-tip::after {
    content: "";
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-right-color: #2b2b2b;
}

.rail[b-ilwbeaekul]  .rail-item:hover .rail-tip,
.rail[b-ilwbeaekul]  .rail-item:focus-visible .rail-tip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}
/* /Components/Modals.razor.rz.scp.css */
.modal-container[b-asbw6v7awu] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    z-index: 1;
}

.modal-wrapper[b-asbw6v7awu] {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 2;
}

.modal[b-asbw6v7awu] {
    pointer-events: all;
    background: #373434;
    border-radius: var(--BorderRadius);
    animation: Show-b-asbw6v7awu 0.3s forwards;
}

    .modal.hidden[b-asbw6v7awu] {
        animation: Hide-b-asbw6v7awu 0.3s forwards;
        pointer-events: none;
    }

@keyframes Hide-b-asbw6v7awu {
    from {
        box-shadow: 0 0 50px rgba(0, 0, 0,0.5);
        transform: scale(1);
        opacity: 1;
    }

    to {
        box-shadow: 0 0 0px rgba(0, 0, 0,0);
        transform: scale(0.8);
        opacity: 0;
    }
}

@keyframes Show-b-asbw6v7awu {
    from {
        box-shadow: 0 0 0px rgba(0, 0, 0,0);
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        box-shadow: 0 0 50px rgba(0, 0, 0, 1);
        transform: scale(1);
        opacity: 1;
    }
}
/* /Components/Pages/ChannelEditor.razor.rz.scp.css */
/* Screen left, layer panel right. The panel scrolls on its own so a channel
   with many placements never pushes the screen out of view. */
.channel-editor[b-3jhn6wip7o] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
    width: 100%;
    box-sizing: border-box;
    gap: 20px;
    /* Reserve room for the absolute action buttons (BIG button ~50px + 30px margin) */
    padding-bottom: 100px;
}

@media (max-width: 1100px) {
    .channel-editor[b-3jhn6wip7o] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Otherwise the layer actions are too small to hit on a phone. */
@media (max-width: 720px) {
    .channel-editor[b-3jhn6wip7o] {
        gap: 12px;
    }

    .layer-item[b-3jhn6wip7o] {
        flex-wrap: wrap;
    }

    .layer-action[b-3jhn6wip7o] {
        min-width: 40px;
        min-height: 40px;
    }
}

    .channel-editor *[b-3jhn6wip7o],
    .channel-editor *[b-3jhn6wip7o]::before,
    .channel-editor *[b-3jhn6wip7o]::after {
        box-sizing: border-box;
    }

.screen-frame[b-3jhn6wip7o] {
    width: 100%;
    background: #1a1a1a;
    border-radius: var(--BorderRadius);
    padding: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.screen[b-3jhn6wip7o] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--RadiusS);
    overflow: visible;
    user-select: none;
    touch-action: none;
}

.source-box[b-3jhn6wip7o] {
    position: absolute;
    background: rgba(var(--AppColorRgb), 0.18);
    border: 2px dashed rgba(var(--AppColorRgb), 0.7);
    border-radius: var(--RadiusS);
    cursor: move;
    transition: background 0.15s, border-color 0.15s;
    overflow: hidden;
    color: white;
    min-width: 5%;
    min-height: 5%;
}

    .source-box:hover[b-3jhn6wip7o] {
        background: rgba(var(--AppColorRgb), 0.28);
        border-color: rgba(var(--AppColorRgb), 0.95);
    }

    .source-box.selected[b-3jhn6wip7o] {
        background: rgba(var(--AppColorRgb), 0.3);
        border: 2px solid var(--AppColor);
        box-shadow: 0 0 0 3px rgba(var(--AppColorRgb), 0.35);
    }

    .source-box.dragging[b-3jhn6wip7o] {
        cursor: grabbing;
        opacity: 0.85;
    }

.source-box-label[b-3jhn6wip7o] {
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    font-size: 0.85rem;
}

.source-box-name[b-3jhn6wip7o] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.source-box-index[b-3jhn6wip7o] {
    flex: none;
    min-width: 18px;
    padding: 0 4px;
    border-radius: var(--RadiusPill);
    background: rgba(0, 0, 0, 0.45);
    font-size: 0.65rem;
    font-family: monospace;
    text-align: center;
    text-shadow: none;
}

.source-box-dims[b-3jhn6wip7o] {
    font-size: 0.7rem;
    opacity: 0.85;
    font-family: monospace;
}

.source-box-resize-handle[b-3jhn6wip7o] {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 16px;
    height: 16px;
    background: linear-gradient(135deg, transparent 0%, transparent 50%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0.7) 100%);
    cursor: nwse-resize;
    border-bottom-right-radius: var(--RadiusS);
}

/* ---------- layer panel ---------- */

.layer-panel[b-3jhn6wip7o] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 8px;
    position: sticky;
    top: 0;
}

.layer-panel-head[b-3jhn6wip7o] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.6;
    font-weight: 600;
}

.layer-panel-count[b-3jhn6wip7o] {
    padding: 1px 7px;
    border-radius: var(--RadiusPill);
    background: rgba(255, 255, 255, 0.1);
    letter-spacing: 0;
}

.layer-list[b-3jhn6wip7o] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* Long stacks scroll here instead of stretching the page. */
    max-height: min(60vh, 520px);
    overflow-y: auto;
    padding-right: 4px;
}

.layer-item[b-3jhn6wip7o] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px 7px 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--BorderRadius);
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    color: white;
    transition: background 0.15s, border-color 0.15s;
}

    .layer-item:hover[b-3jhn6wip7o] {
        border-color: var(--AppColor);
        background: rgba(var(--AppColorRgb), 0.12);
    }

    .layer-item.selected[b-3jhn6wip7o] {
        border-color: var(--AppColor);
        background: rgba(var(--AppColorRgb), 0.22);
        box-shadow: 0 0 0 2px rgba(var(--AppColorRgb), 0.25);
    }

.layer-index[b-3jhn6wip7o] {
    flex: none;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--RadiusS);
    background: rgba(255, 255, 255, 0.1);
    font-family: monospace;
    font-size: 0.75rem;
}

.layer-item.selected .layer-index[b-3jhn6wip7o] {
    background: var(--AppColor);
}

.layer-text[b-3jhn6wip7o] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.layer-name[b-3jhn6wip7o] {
    font-weight: 600;
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.layer-dims[b-3jhn6wip7o] {
    font-size: 0.7rem;
    opacity: 0.6;
    font-family: monospace;
    white-space: nowrap;
}

.layer-sep[b-3jhn6wip7o] {
    opacity: 0.5;
    margin: 0 2px;
}

.layer-actions[b-3jhn6wip7o] {
    flex: none;
    display: flex;
    gap: 2px;
}

.layer-action[b-3jhn6wip7o] {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: var(--RadiusS);
    background: transparent;
    color: white;
    opacity: 0.55;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s, color 0.15s;
}

    .layer-action:hover:not(:disabled)[b-3jhn6wip7o] {
        opacity: 1;
        background: rgba(255, 255, 255, 0.14);
    }

    .layer-action.destructive:hover:not(:disabled)[b-3jhn6wip7o] {
        background: rgba(var(--RedColorRgb), 0.25);
        color: var(--RedColor);
    }

    .layer-action:disabled[b-3jhn6wip7o] {
        opacity: 0.15;
        cursor: default;
    }

/* /Components/Pages/Home.razor.rz.scp.css */
.home[b-urvlg2vlkz] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 40px;
}

/* Status panels ---------------------------------------------------------- */

.overview-grid[b-urvlg2vlkz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
    align-items: stretch;
}

/* Same frosted panel as the list rows (ListView.razor.css) so the dashboard
   and the lists below read as one surface. */
.panel[b-urvlg2vlkz] {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    /* Clips the header gradient to the rounded corners. */
    overflow: hidden;
    border-radius: var(--RadiusL);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* Same accent wash as the account menu head (.usermenu-head in Navbar.razor.css) —
   it marks the head of a panel throughout the app. */
.panel-head[b-urvlg2vlkz] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 14px;
    background: linear-gradient(135deg, rgba(var(--AppColorRgb), 0.18), rgba(var(--AppColorRgb), 0) 70%);
}

.panel-icon[b-urvlg2vlkz] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: var(--RadiusM);
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
}

    /* Green means "something is really going out to a screen" — the one state
       an operator has to see from across the room. */
    .panel-icon.live[b-urvlg2vlkz] {
        background: rgba(var(--GreenColorRgb), .18);
        color: var(--GreenColor);
    }

.panel-titles[b-urvlg2vlkz] {
    min-width: 0;
}

    .panel-titles h2[b-urvlg2vlkz] {
        margin: 0;
        font-size: 0.95rem;
        font-weight: 600;
        letter-spacing: 0.03em;
        color: white;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.panel-sub[b-urvlg2vlkz] {
    margin: 0;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.badge[b-urvlg2vlkz] {
    padding: 2px 9px;
    border-radius: var(--RadiusPill);
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
}

    .badge.live[b-urvlg2vlkz] {
        background: rgba(var(--GreenColorRgb), .18);
        color: var(--GreenColor);
    }

.panel-body[b-urvlg2vlkz] {
    min-height: 88px;
    max-height: 250px;
    padding: 10px;
    box-sizing: border-box;
    overflow-y: auto;
}

.panel-empty[b-urvlg2vlkz] {
    margin: 0;
    padding: 6px 4px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.8rem;
    line-height: 1.4;
    user-select: none;
}

/* Compact rows ----------------------------------------------------------- */

.rows[b-urvlg2vlkz] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .rows li[b-urvlg2vlkz] {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        border-radius: var(--RadiusM);
        transition: background 0.15s;
    }

    /* Hover only where a row actually reacts — the playlist preview is static. */
    .rows.media li:hover[b-urvlg2vlkz],
    .rows.channels li:hover[b-urvlg2vlkz] {
        background: rgba(255, 255, 255, 0.07);
    }

.row-main[b-urvlg2vlkz] {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
    padding: 6px 8px;
    box-sizing: border-box;
    border: none;
    border-radius: var(--RadiusM);
    background: transparent;
    color: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

    .row-main:focus-visible[b-urvlg2vlkz] {
        outline: 2px solid var(--AppColor);
        outline-offset: -2px;
    }

.row-icon[b-urvlg2vlkz] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    padding: 6px;
    box-sizing: border-box;
    border-radius: var(--RadiusM);
    background: rgba(255, 255, 255, 0.1);
    transition: background 0.15s;
}

.rows.media li:hover .row-icon[b-urvlg2vlkz] {
    background: rgba(var(--AppColorRgb), .2);
}

.row-icon img[b-urvlg2vlkz] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.row-text[b-urvlg2vlkz] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.row-title[b-urvlg2vlkz] {
    font-size: 0.85rem;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.row-sub[b-urvlg2vlkz] {
    font-size: 0.72rem;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.row-action[b-urvlg2vlkz] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-right: 6px;
    flex-shrink: 0;
    border: none;
    border-radius: var(--RadiusS);
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8rem;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

    .row-action:hover[b-urvlg2vlkz] {
        background: rgba(255, 255, 255, 0.12);
        color: white;
    }

    .row-action.danger:hover[b-urvlg2vlkz] {
        background: rgba(var(--RedColorRgb), .25);
        color: var(--RedColor);
    }

    .row-action:focus-visible[b-urvlg2vlkz] {
        outline: 2px solid var(--AppColor);
        outline-offset: -2px;
    }

/* Playlist preview */

.rows.numbered li[b-urvlg2vlkz] {
    grid-template-columns: auto 1fr;
    gap: 10px;
    padding: 5px 8px;
}

.row-num[b-urvlg2vlkz] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: var(--RadiusPill);
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
}

.more-hint[b-urvlg2vlkz] {
    margin: 8px 0 0 0;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.4);
}

/* Channel status */

/* Needs `.rows.channels li` — a bare `.channel-row` loses against `.rows li`
   and the pill would wrap into a row of its own. */
.rows.channels li[b-urvlg2vlkz] {
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 8px;
    padding: 4px 6px 4px 10px;
    min-height: 34px;
}

.rows.channels .row-title[b-urvlg2vlkz] {
    font-size: 0.85rem;
}

.rows.channels .row-action[b-urvlg2vlkz] {
    width: 26px;
    height: 26px;
    margin-right: 0;
}

.dot[b-urvlg2vlkz] {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
}

.channel-row.online .dot[b-urvlg2vlkz] {
    background: var(--GreenColor);
    box-shadow: 0 0 0 3px rgba(var(--GreenColorRgb), .18);
}

.pill[b-urvlg2vlkz] {
    padding: 2px 8px;
    border-radius: var(--RadiusPill);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.7rem;
    white-space: nowrap;
}

.channel-row.online .pill[b-urvlg2vlkz] {
    background: rgba(var(--GreenColorRgb), .15);
    color: var(--GreenColor);
}

/* Extension tiles ---------------------------------------------------------- */

.viewer-grid[b-urvlg2vlkz] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px;
}

/* Hover stays in the same register as the list rows: the colour moves, nothing else.
   The base gradient lives on background-image and stays put — only background-color
   animates underneath it. Animating the `background` shorthand would jump, because a
   gradient cannot interpolate into a flat colour. */
.viewer-tile[b-urvlg2vlkz] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: var(--RadiusL);
    background-color: transparent;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    color: white;
    text-decoration: none;
    transition: background-color 0.15s;
}

.viewer-tile:hover[b-urvlg2vlkz],
.viewer-tile:focus-visible[b-urvlg2vlkz] {
    background-color: rgba(var(--AppColorRgb), .18);
}

.tile-icon[b-urvlg2vlkz] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    padding: 9px;
    box-sizing: border-box;
    border-radius: var(--RadiusM);
    background-color: rgba(255, 255, 255, 0.1);
    transition: background-color 0.15s;
}

.viewer-tile:hover .tile-icon[b-urvlg2vlkz],
.viewer-tile:focus-visible .tile-icon[b-urvlg2vlkz] {
    background-color: rgba(var(--AppColorRgb), .28);
}

.tile-icon img[b-urvlg2vlkz] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tile-body[b-urvlg2vlkz] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tile-title[b-urvlg2vlkz] {
    font-size: 0.95rem;
    line-height: 1.25;
}

.tile-desc[b-urvlg2vlkz] {
    font-size: 0.75rem;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.45);
}

.tile-arrow[b-urvlg2vlkz] {
    flex-shrink: 0;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.25);
    transition: color 0.15s;
}

.viewer-tile:hover .tile-arrow[b-urvlg2vlkz],
.viewer-tile:focus-visible .tile-arrow[b-urvlg2vlkz] {
    color: var(--AppColor);
}

.viewer-tile:focus-visible[b-urvlg2vlkz] {
    outline: 2px solid var(--AppColor);
    outline-offset: 2px;
}

@media (max-width: 720px) {
    .overview-grid[b-urvlg2vlkz] {
        gap: 10px;
    }

    .viewer-grid[b-urvlg2vlkz] {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 10px;
    }

    .panel-body[b-urvlg2vlkz] {
        min-height: 0;
        max-height: 200px;
    }
}
/* /Components/Pages/ViewerNotFound.razor.rz.scp.css */
p[b-ysg756kkek] {
    color: #9d9d9d;
    margin: 0 0 20px 0;
    line-height: 1.5rem;
}
/* /Components/Playlist/Playlist.razor.rz.scp.css */
.playlist[b-0wv6b8k4rf] {
    /* Optical top edge, same reasoning as .rail: the first row's icon sits 17px
       inside the panel (6px list padding + 5px row padding + 6px icon inset), the
       h1 of the content column only ~8px below its box. The 9px difference is taken
       off here so rail icon, first playlist row and page title share one line. */
    padding: calc(var(--LayoutPadTop) - 9px) 8px 0;
    width: 300px;
    box-sizing: border-box;
    transition: all 1s;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* --- Items --- */
.playlist-body[b-0wv6b8k4rf] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    z-index: 1;
}

/* The entries are the generic ListView; ::deep only tightens the spacing for the
   narrow sidebar and paints the "currently on the screen" state. */
.playlist-body[b-0wv6b8k4rf]  .list-item-clickable {
    gap: 8px;
    padding: 5px 8px;
}

.playlist-body[b-0wv6b8k4rf]  .icon {
    width: 28px;
    height: 28px;
    padding: 6px;
}

.playlist-body[b-0wv6b8k4rf]  .buttons {
    padding-right: 2px;
}

.playlist-body[b-0wv6b8k4rf]  .list-item-button {
    width: 28px;
    height: 28px;
    padding: 7px;
    font-size: 0.8rem;
}

/* Live is an accent bar, not a fill — a filled row already means "selected". */
.playlist-body[b-0wv6b8k4rf]  li.live {
    box-shadow: inset 3px 0 0 var(--AppColor);
}

    .playlist-body[b-0wv6b8k4rf]  li.live .list-item-subtitle {
        color: var(--AppColor);
    }

/* Fills the whole list area so the hint sits in the middle of the empty sidebar
   instead of clinging under the caption. */
.playlist-empty[b-0wv6b8k4rf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 100%;
    box-sizing: border-box;
    padding: 30px 16px;
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8rem;
}

    .playlist-empty i[b-0wv6b8k4rf] {
        font-size: 1.6rem;
    }

    .playlist-empty p[b-0wv6b8k4rf] {
        margin: 0;
    }

/* --- Actions --- */
/* Same grammar as .action-buttons in Dashboard.razor.css — big primary action on
   the right, three-dot menu next to it. In the flow rather than absolute: the
   sidebar has no spare corner to float over, and the list must not slide under it.
   ActionButton and ContextMenuItem carry their own :focus-visible styles. */
.playlist-actions[b-0wv6b8k4rf] {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    padding: 12px 4px 14px;
    z-index: 2;
    /* Anchor for the menu, see below. */
    position: relative;
}

/* The menu is anchored to the bar, not to the button it belongs to. Hanging off
   the button it grew leftwards past the panel edge, and .playlist clips its
   overflow, so half the entries were cut off. Pinned to the right edge of the bar
   the 250px menu fits the 300px sidebar with room to spare. */
.playlist-actions[b-0wv6b8k4rf]  .action-button-host {
    position: static;
}

.playlist-actions[b-0wv6b8k4rf]  .context-menu.left {
    left: auto;
    right: 0;
}

/* A long list of playlists must not grow past the top of the sidebar — .playlist
   clips it. Sits on the ul, not the wrapper, whose max-height the open animation owns. */
.playlist-actions[b-0wv6b8k4rf]  .context-wrapper ul {
    max-height: 60vh;
    overflow-y: auto;
}

/* Space, not a rule, between "switch to" and the management entries. */
.playlist-actions[b-0wv6b8k4rf]  li.section-start {
    margin-top: 10px !important;
}

.playlist-actions[b-0wv6b8k4rf]  li.current > button {
    color: var(--AppColor);
}
/* /Components/PopupHost.razor.rz.scp.css */
.popup-host-root[b-iempkpvnyd] {
    position: relative;
    z-index: 9000;
}

[b-iempkpvnyd] .popup-host {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9000;
    visibility: hidden;
    border-radius: var(--BorderRadius);
    background: rgb(35, 35, 38);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
    overflow: auto;
    animation: popup-fade-in-b-iempkpvnyd .12s ease-out;
}

@keyframes popup-fade-in-b-iempkpvnyd {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* /Components/Search/MainSearch.razor.rz.scp.css */
.mainsearch[b-gdw2xp8xpw] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    color: white;
}

.wrapper[b-gdw2xp8xpw] {
    max-width: 500px;
    position: relative;
    width: 100%;
    height: 38px;
    border-radius: var(--BorderRadius);
}

input[b-gdw2xp8xpw] {
    background-color: rgba(255, 255, 255, 0.8);
    border: 0 none;
    width: 100%;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    box-sizing: border-box;
    outline: none;
    padding: 10px 40px 10px 15px;
    font-size: 0.9rem;
    transition: all 0.3s;
    overflow: hidden;
    position: absolute;
    z-index: 1001;
    border-radius: var(--BorderRadius);
}

.isopen input[b-gdw2xp8xpw] {
    background-color: white;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.7);
}

.endlinewrapper[b-gdw2xp8xpw] {
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
    border-radius: var(--BorderRadius);
}

.endline[b-gdw2xp8xpw] {
    height: 2px;
    width: 0;
    background: var(--AppColor);
    position: absolute;
    bottom: 0px;
    left: 50%;
    transition: all 0.3s;
    transition-delay: 0.2s;
    z-index: 1002;
    border-radius: var(--BorderRadius);
}

.isopen input ~ .endlinewrapper .endline[b-gdw2xp8xpw] {
    left: 0;
    width: 100%;
}

.isopen input ~ .searchicon .icon[b-gdw2xp8xpw] {
    color: var(--AppColor);
}

.searchicon[b-gdw2xp8xpw] {
    position: absolute;
    right: 10px;
    top: 0.5rem;
    z-index: 1002;
    user-select: none;
    pointer-events: none;
}

    .searchicon i[b-gdw2xp8xpw] {
        margin: 0;
        padding: 0;
        color: gray;
    }

.isopen .searchicon i[b-gdw2xp8xpw] {
    color: var(--AppColor);
}

ul[b-gdw2xp8xpw] {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
}

.msg p[b-gdw2xp8xpw] {
    text-align: center;
    font-size: 0.9rem;
    opacity: 1;
    animation: ShowMsg-b-gdw2xp8xpw 0.8s ease-in;
}

.searchresultspopup[b-gdw2xp8xpw] {
    position: absolute;
    top: -5px;
    width: 100%;
    animation: Show-b-gdw2xp8xpw 0.2s ease-in;
    opacity: 1;
    transition: opacity 0.3s;
    /* No clicks by default — only the open state captures events, so the closing
       fade-out no longer swallows clicks. */
    pointer-events: none;
}

.searchresultspopup.open[b-gdw2xp8xpw] {
    pointer-events: auto;
}

.hiding.searchresultspopup[b-gdw2xp8xpw] {
    opacity: 0;
    pointer-events: none;
}

.container[b-gdw2xp8xpw] {
    position: absolute;
    box-shadow: 0px 0px 10px 0px rgb(0, 0, 0);
    z-index: 100;
    background: rgba(150, 150, 150, 0.4);
    backdrop-filter: blur(20px);
    left: -10px;
    right: -10px;
    padding-top: 45px;
    border-radius: var(--BorderRadius);
    overflow: hidden;
}

.shortcuts[b-gdw2xp8xpw] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.15);
    color: rgba(255, 255, 255, 0.85);
}

[b-gdw2xp8xpw] .dotmenu:hover {
    background: white;
}

@keyframes Show-b-gdw2xp8xpw {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes ShowMsg-b-gdw2xp8xpw {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
/* /Components/Search/SearchResult.razor.rz.scp.css */

.top[b-55ilccvzjl] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
}

.searchresult[b-55ilccvzjl] {
    transition: all 0.2s;
    user-select: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: auto 1fr 56px;
}

.img[b-55ilccvzjl] {
    display: flex;
    text-align: center;
    flex-direction: column;
    justify-content: center;
    font-size: 1.3rem;
    padding: 10px 5px 10px 10px;
    width: 25px;
}

.searchresult:hover[b-55ilccvzjl],
.searchresult.highlighted[b-55ilccvzjl] {
    background: var(--AppColor);
}

.tools[b-55ilccvzjl] {
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: center;
    padding: 10px;
}

    .tools .add-to-playlist[b-55ilccvzjl] {
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.7);
        color: var(--Darker);
        height: 35px;
        width: 35px;
        border: none;
        border-radius: 30%;
        transition: all 0.3s;
        position: relative;
        cursor: pointer;
        font-size: 1rem;
    }

    .tools .add-to-playlist:focus-visible[b-55ilccvzjl] {
        outline: 2px solid white;
        outline-offset: 2px;
    }

    .tools .add-to-playlist:hover[b-55ilccvzjl] {
        background: rgba(255, 255, 255, 1);
    }

    .tools .add-icon[b-55ilccvzjl] {
        position: absolute;
        right: 2px;
        bottom: 2px;
        height: 12px;
        width: 12px;
        border-radius: 100%;
        background: var(--AppColor);
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .tools .add-icon i[b-55ilccvzjl] {
            font-size: 0.5rem;
        }

.title p[b-55ilccvzjl] {
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.description p[b-55ilccvzjl] {
    font-size: 0.8rem;
}

.description[b-55ilccvzjl] {
    display: flex;
    align-items: center;
}

.preview p[b-55ilccvzjl] {
    font-size: 0.8rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    opacity: 0.7;
}

.searchresult p[b-55ilccvzjl] {
    margin: 0;
    padding: 0;
}

.itemtext[b-55ilccvzjl] {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px;
    border: none;
    background: transparent;
    color: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

    .itemtext:focus-visible[b-55ilccvzjl] {
        outline: 2px solid white;
        outline-offset: -2px;
    }

.shortcuts[b-55ilccvzjl] {
    display: flex;
    flex-direction: row;
    gap: 5px;
}
/* /Components/Settings/SettingsMain.razor.rz.scp.css */
.settings-page[b-54pb5rvhrg] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 720px;
    padding-bottom: 40px;
}

.settings-form[b-54pb5rvhrg] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Status block: a darker inset on the card — same idea as the black tile content
   inside its coloured shell. */
.settings-status[b-54pb5rvhrg] {
    margin-top: 16px;
    padding: 10px 16px;
    border-radius: var(--BorderRadius);
    background: rgba(0, 0, 0, 0.2);
}

    .settings-status h3[b-54pb5rvhrg] {
        margin: 0 0 8px 0;
        font-size: 0.75rem;
        font-weight: normal;
        letter-spacing: 0.1rem;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.5);
        user-select: none;
    }

    .settings-status dl[b-54pb5rvhrg] {
        display: grid;
        grid-template-columns: max-content 1fr;
        gap: 6px 16px;
        margin: 0;
        align-items: center;
    }

    .settings-status dt[b-54pb5rvhrg] {
        color: rgba(255, 255, 255, 0.6);
    }

    .settings-status dd[b-54pb5rvhrg] {
        margin: 0;
        min-width: 0;
        overflow-wrap: anywhere;
    }

.error-text[b-54pb5rvhrg] {
    color: var(--RedColor);
}

.settings-actions[b-54pb5rvhrg] {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.save-message[b-54pb5rvhrg] {
    margin-top: 12px;
}
/* /Components/Shared/AddTile.razor.rz.scp.css */
.add-tile[b-ksnpr1ehui] {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: .35rem;
    aspect-ratio: 4 / 3;
    padding: 1rem;
    text-align: center;
    color: rgba(255, 255, 255, .55);
    border: 2px dashed rgba(255, 255, 255, .25);
    border-radius: var(--BorderRadius);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

    .add-tile i[b-ksnpr1ehui] {
        font-size: 1.6rem;
    }

    .add-tile:hover[b-ksnpr1ehui],
    .add-tile:focus-visible[b-ksnpr1ehui] {
        color: white;
        border-color: var(--AppColor);
        outline: none;
    }

    /* Set by dropzone.js while files hover over the tile. */
    .add-tile.drag-over[b-ksnpr1ehui] {
        color: white;
        border-color: var(--AppColor);
        border-style: solid;
        background-color: rgba(var(--AppColorRgb), .18);
    }

.add-label[b-ksnpr1ehui] {
    font-size: .9rem;
}

.add-hint[b-ksnpr1ehui] {
    font-size: .75rem;
    opacity: .7;
}
/* /Components/Shared/Card.razor.rz.scp.css */
section[b-u1amz56bje] {
    padding: 10px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--BorderRadius);
    margin: 0;
    display: grid;
    grid-template-rows: auto 1fr;
    grid-gap: 10px;
}

section.frameless[b-u1amz56bje] {
    padding: 0;
    background: transparent;
    border-radius: var(--BorderRadius);
    margin: 0;
    display: grid;
    grid-template-rows: auto 1fr;
    grid-gap: 10px;
}


h3[b-u1amz56bje] {
    color: white;
    margin: 0;
    font-size: 1.1rem;
    letter-spacing: 0.1rem;
    font-weight: normal;
}

    h3 i[b-u1amz56bje] {
        color: var(--AppColor);
        font-size: 0.9em;
        margin-right: 8px;
    }
/* /Components/Shared/CardGrid.razor.rz.scp.css */
.card-grid[b-odnx4owknp] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 10px;
    align-items: start; 
    align-content: start;
}
/* /Components/Shared/Dashboard.razor.rz.scp.css */
.dashboard[b-8wh5o8z0ry] {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: auto;
    grid-gap: 20px;
    /* Shared top edge of the three columns: rail tiles, playlist panel and the
       content start on the same line. The h1 carries its own leading above the cap
       height — the boxes line up, not the letters. */
    padding: var(--LayoutPadTop) 20px 0 20px;
}

h1[b-8wh5o8z0ry] {
    font-size: 2rem;
    padding: 0;
    text-align: center;
    color: var(--AppColor);
    font-weight: normal;
    letter-spacing: 2px;
    margin: 0;
    border-radius: var(--BorderRadius);
    user-select: none;
    animation-name: title-fade-in-b-vetvuzq6no;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
    text-wrap: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.dashboard-top[b-8wh5o8z0ry] {
    display: grid;
    grid-template-columns: 1fr auto;
}

.top-buttons[b-8wh5o8z0ry] {
    display: flex;
    flex-direction: row;
}

.title[b-8wh5o8z0ry] {
    display: flex;
    margin: 0;
    gap: 10px;
    overflow: hidden;
}

.dashboard-content[b-8wh5o8z0ry] {
    display: grid;
    overflow: auto;
    z-index: 0;
}

.action-buttons[b-8wh5o8z0ry] {
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 30px;
    display: flex;
    flex-direction: row-reverse;
    gap: 10px;
    z-index: 2;
}

/* Narrow devices: title and header buttons stack, otherwise the title gets
   squeezed down to a few characters. */
@media (max-width: 720px) {
    .dashboard[b-8wh5o8z0ry] {
        padding: 12px 12px 0 12px;
        grid-gap: 12px;
    }

    .dashboard-top[b-8wh5o8z0ry] {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .top-buttons[b-8wh5o8z0ry] {
        flex-wrap: wrap;
        gap: 8px;
    }

    h1[b-8wh5o8z0ry] {
        font-size: 1.5rem;
        text-align: left;
    }

    .action-buttons[b-8wh5o8z0ry] {
        margin: 16px;
    }
}

@keyframes title-fade-in-b-8wh5o8z0ry {
    0% {
        transform: translateX(-10px);
        opacity: 0;
    }

    100% {
        transform: translateX(0px);
        opacity: 1;
    }
}
/* /Components/Shared/GenericUI/ActionButton.razor.rz.scp.css */
/* Wraps button + context menu; the menu positions itself against this box. */
.action-button-host[b-m3oor7cjd2] {
    position: relative;
    display: inline-flex;
}

.action-button[b-m3oor7cjd2] {
    border: none;
    border-radius: 30%;
    width: 40px;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    color: var(--Darker);
    font-family: inherit;
    font-size: 1rem;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s;
    animation: ShowActionbutton-b-wmyw8kco3t 1s ease;
    transform: none;
    opacity: 1;
    position: relative;
}

    .action-button:focus-visible[b-m3oor7cjd2] {
        outline: 2px solid var(--AppColor);
        outline-offset: 3px;
    }

    /* Icon glyphs bring their own side bearings, so a bare <i> sits slightly off
       centre. A square, centred box makes every icon land in the middle. */
    .action-button i[b-m3oor7cjd2] {
        display: block;
        width: 1em;
        line-height: 1;
        text-align: center;
    }

.action-button.primary[b-m3oor7cjd2] {
    background: var(--AppColor);
    color: white;
}

.action-button.red[b-m3oor7cjd2] {
    background: var(--RedColor);
    color: white;
}

.action-button.big[b-m3oor7cjd2] {
    height: 50px;
    width: 50px;
    font-size: 1.2rem;
}

p.icon[b-m3oor7cjd2] {
    font-size: 1rem;
}

p.icon[b-m3oor7cjd2] {
    font-size: 1rem;
}

p.submenubutton[b-m3oor7cjd2] {
    font-weight: bold;
    margin: -1px 0 0 -1px;
    font-size: 1.3rem;
}

@keyframes ShowActionbutton-b-m3oor7cjd2 {
    0% {
        transform: scale(0.8, 0.8);
        opacity: 0;
    }

    50% {
        transform: scale(0.8, 0.8);
        opacity: 0;
    }

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

.action-button:active[b-m3oor7cjd2] {
    background: var(--BorderColor);
}

.action-button:hover[b-m3oor7cjd2] {
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);
    color: var(--AppColor);
}

.action-button.primary:hover[b-m3oor7cjd2] {
    color: white;
}

.action-button:disabled[b-m3oor7cjd2] {
    box-shadow: none;
    cursor: default;
    color: var(--BorderColor);
}

    /* Native :disabled suppresses hover anyway — keep the visual reset explicit. */
    .action-button:disabled:hover[b-m3oor7cjd2] {
        box-shadow: none;
        color: var(--BorderColor);
    }
/* /Components/Shared/GenericUI/Button.razor.rz.scp.css */
.button-container[b-mp1ermhx99] {
    box-sizing: border-box;
    border: none;
    border-radius: var(--BorderRadius);
    background: linear-gradient(90deg,rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.2) 50%);
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    padding: 10px 20px;
    transition: all 0.3s;
    font-family: inherit;
    font-size: 0.9rem;
    text-align: center;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    position: relative;
    text-wrap: nowrap;
}

    .button-container:focus-visible[b-mp1ermhx99] {
        outline: 2px solid white;
        outline-offset: 2px;
    }

    .button-container:disabled[b-mp1ermhx99] {
        opacity: 0.45;
        cursor: default;
        box-shadow: none;
    }

    .button-container:disabled:hover[b-mp1ermhx99]::before {
        background: transparent;
    }

    .button-container.selected[b-mp1ermhx99] {
        background: var(--AppColor);
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
    }

    .button-container.primary[b-mp1ermhx99] {
        background: var(--AppColor);
        color: white
    }

    .button-container.destructive[b-mp1ermhx99] {
        background: linear-gradient(90deg, rgba(var(--RedColorRgb), 0.35) 0%, rgba(var(--RedColorRgb), 0.25) 50%);
        color: white;
    }
    .button-container[b-mp1ermhx99]::before {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        content: '';
        background: transparent;
        transition: all 0.3s;
        border-radius: var(--BorderRadius);
    }

    .button-container:hover[b-mp1ermhx99]::before {
        background: rgba(255, 255, 255, 0.2);
    }

    .button-container:active[b-mp1ermhx99]::before {
        background: rgba(0, 0, 0, 0.3);
    }

    .button-container:active[b-mp1ermhx99] {
        color: rgba(255, 255, 255, 0.4);
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
    }
/* /Components/Shared/GenericUI/Callout.razor.rz.scp.css */
.callout[b-zhv5tujfk9] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 8px 12px;
    border: 1px solid var(--AppColor);
    border-radius: var(--BorderRadius);
    background: rgba(var(--AppColorRgb), 0.1);
    color: white;
}

    .callout > i[b-zhv5tujfk9] {
        margin-top: 3px;
        color: var(--AppColor);
    }

    .callout.success[b-zhv5tujfk9] {
        border-color: var(--GreenColor);
        background: rgba(var(--GreenColorRgb), 0.1);
    }

        .callout.success > i[b-zhv5tujfk9] {
            color: var(--GreenColor);
        }

    .callout.warning[b-zhv5tujfk9] {
        border-color: var(--YellowColor);
        background: rgba(186, 168, 91, 0.1);
    }

        .callout.warning > i[b-zhv5tujfk9] {
            color: var(--YellowColor);
        }

    .callout.error[b-zhv5tujfk9] {
        border-color: var(--RedColor);
        background: rgba(var(--RedColorRgb), 0.1);
    }

        .callout.error > i[b-zhv5tujfk9] {
            color: var(--RedColor);
        }

.callout-content[b-zhv5tujfk9] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    min-width: 0;
}

    .callout-content[b-zhv5tujfk9]  p {
        margin: 0;
    }

    .callout-content[b-zhv5tujfk9]  a {
        color: var(--AppColor);
    }
/* /Components/Shared/GenericUI/CheckboxField.razor.rz.scp.css */
.checkbox-field[b-mxwu3v8zpj] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

    .checkbox-field input[b-mxwu3v8zpj] {
        width: 16px;
        height: 16px;
        margin: 0;
        accent-color: var(--AppColor);
        cursor: pointer;
    }
/* /Components/Shared/GenericUI/ContextMenu.razor.rz.scp.css */
.context-menu[b-65nk6m9u6y] {
    position: absolute;

}
    .context-menu.up[b-65nk6m9u6y] {
        top: -5px;
    }

    .context-menu.down[b-65nk6m9u6y] {
        bottom: -5px;
    }

    .context-menu.left[b-65nk6m9u6y] {
        left: 0;
    }

    .context-menu.center[b-65nk6m9u6y] {
        left: 50%;
    }

    .context-menu.right[b-65nk6m9u6y] {
        right: 0;
    }

    .context-menu.closed[b-65nk6m9u6y] {
        display: none;
        pointer-events: none;
    }

.context-wrapper[b-65nk6m9u6y] {
    position: absolute;
    z-index: 1000;
    width: 250px;
    backdrop-filter: blur(10px);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
    height: auto;
    animation: ease 1s openmenu-b-65nk6m9u6y;
    overflow: hidden;
    border-radius: var(--BorderRadius);
    background: rgba(0, 0, 0, 0.5);
}

.up .context-wrapper[b-65nk6m9u6y] {
    bottom: 0;
    right: 0;
}

.down .context-wrapper[b-65nk6m9u6y] {
    top: 0;
    right: 0;
}

.center .context-wrapper[b-65nk6m9u6y] {
    left: 50%;
    transform: translateX(-50%);
}

ul[b-65nk6m9u6y] {
    margin: 0;
    padding: 0;
    margin: 0;
    padding: 0;
    background: rgba(255, 255, 255, 0.1);
}

.horizontal-line[b-65nk6m9u6y] {
    height: 2px;
    width: 100%;
    background: var(--AppColor);
    animation: ease 1s showline-b-65nk6m9u6y;
    margin: 0 auto;
}

@keyframes showline-b-65nk6m9u6y {
    0% {
        width: 0;
    }

    50% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

@keyframes openmenu-b-65nk6m9u6y {
    from {
        max-height: 0;
        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.0);
    }

    to {
        max-height: 1000px;
        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
    }
}
/* /Components/Shared/GenericUI/ContextMenuItem.razor.rz.scp.css */
/* The row itself is the <button>/<a> inside the <li> — the li is only the list slot. */
li[b-2abq92aktr] {
    margin: 0 !important;
    padding: 0;
    list-style: none;
}

    li > button[b-2abq92aktr],
    li > a[b-2abq92aktr] {
        width: 100%;
        box-sizing: border-box;
        padding: 10px;
        border: 1px transparent solid;
        background: transparent;
        transition: all 0.3s;
        font-family: inherit;
        font-size: 0.9rem;
        display: grid;
        grid-template-columns: auto 1fr auto auto;
        gap: 12px;
        align-items: center;
        letter-spacing: 0.8px;
        color: rgba(255, 255, 255, 0.8);
        cursor: pointer;
        user-select: none;
        text-decoration: none;
        text-align: left;
    }

    li.red > button[b-2abq92aktr],
    li.red > a[b-2abq92aktr] {
        color: var(--RedColor);
    }

    li > button:hover[b-2abq92aktr],
    li > a:hover[b-2abq92aktr] {
        background: rgba(255, 255, 255, 0.1);
        color: var(--AppColor);
    }

    li > button:focus-visible[b-2abq92aktr],
    li > a:focus-visible[b-2abq92aktr] {
        outline: 2px solid var(--AppColor);
        outline-offset: -2px;
        background: rgba(255, 255, 255, 0.1);
    }

    li > button:active[b-2abq92aktr],
    li > a:active[b-2abq92aktr] {
        background: var(--BorderColor);
    }

    li p[b-2abq92aktr] {
        margin: 0;
        padding: 0;
        font-size: 0.9rem;
        text-align: left;
    }

.icon[b-2abq92aktr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* /Components/Shared/GenericUI/EmptyState.razor.rz.scp.css */
.empty-state[b-dbg5k0gp0h] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 40px;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    user-select: none;
}

    .empty-state[b-dbg5k0gp0h]  p {
        margin: 0;
    }
/* /Components/Shared/GenericUI/FormField.razor.rz.scp.css */
.form-field[b-uhs3s7f3kn] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-field-label[b-uhs3s7f3kn] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    user-select: none;
}

.form-field[b-uhs3s7f3kn]  input {
    height: 32px;
    padding: 0 10px;
    border-radius: var(--BorderRadius);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: inherit;
    font: inherit;
    font-size: 0.9rem;
    box-sizing: border-box;
    outline: none;
    transition: border-color .15s ease, background .15s ease;
}

    .form-field[b-uhs3s7f3kn]  input:hover {
        background: rgba(255, 255, 255, 0.07);
    }

    .form-field[b-uhs3s7f3kn]  input:focus {
        border-color: var(--AppColor);
        background: rgba(255, 255, 255, 0.07);
    }

    .form-field[b-uhs3s7f3kn]  input::placeholder {
        color: rgba(255, 255, 255, 0.4);
        font-style: italic;
    }
/* /Components/Shared/GenericUI/Input.razor.rz.scp.css */
input[b-5qd387kku7] {
    background-color: rgba(255, 255, 255, 0.8);
    border: none;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
    box-sizing: border-box;
    outline: none;
    padding: 10px;
    font-size: 0.9rem;
    transition: all 0.3s;
    overflow: hidden;
    border-radius: var(--BorderRadius);
}

    input:focus[b-5qd387kku7] {
        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
        border-color: var(--AppColor);
    }

    input[b-5qd387kku7]::placeholder {
        color: rgba(0, 0, 0, 0.4);
        font-style: italic;
    }
/* /Components/Shared/GenericUI/ListItemButton.razor.rz.scp.css */
.list-item-button[b-rjfl6rcivg] {
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    box-sizing: border-box;
    font-size: 0.9rem;
    position: relative;
    border-radius: var(--RadiusM);
    /* Reset for the native button/anchor element. */
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    font-family: inherit;
    text-decoration: none;
}

    .list-item-button:hover[b-rjfl6rcivg] {
        background: rgba(255, 255, 255, 0.12);
        color: white;
    }

    .list-item-button:focus-visible[b-rjfl6rcivg] {
        outline: 2px solid var(--AppColor);
        outline-offset: -2px;
        border-radius: var(--RadiusM);
    }

    /* Positive primary action of a row (show, play) picks up the accent colour. */
    .list-item-button.show:hover[b-rjfl6rcivg] {
        background: rgba(var(--AppColorRgb), .25);
        color: white;
    }

    .list-item-button.remove:hover[b-rjfl6rcivg] {
        background: rgba(var(--RedColorRgb), .25);
        color: white;
    }

    .list-item-button:active[b-rjfl6rcivg] {
        animation: klick-b-rjfl6rcivg 0.5s;
    }


@keyframes klick-b-rjfl6rcivg {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(0.9)
    }

    100% {
        transform: scale(1)
    }
}
/* /Components/Shared/GenericUI/ListView.razor.rz.scp.css */
/* Same visual language as the account menu rows (.usermenu-item in Navbar.razor.css):
   flat transparent rows, a rounded icon tile that picks up the accent colour on
   hover, and a muted second line. The depth sits on the panel below, not on the
   rows — they stay flat so hover and selection remain the only moving parts. */
ul[b-2nk7gn7l5x] {
    list-style: none;
    padding: 6px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: white;
    /* Frosted panel behind the rows. The blur stays light on purpose: it only has
       to separate the list from the layout gradient behind it, and every extra
       pixel of blur is paint time on long lists. */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    /* The prefix keeps the blur on iPads before Safari 18 — plausible hardware for
       an operator tablet. Without it only the gradient shows, which still works. */
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-radius: var(--RadiusL);
}

li[b-2nk7gn7l5x] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    border-radius: var(--RadiusM);
    background: transparent;
    transition: background 0.15s;
}

    /* Lifted against the panel underneath — at the old 0.08 the hover almost
       matched the list background and rows stopped reacting visibly. */
    li:hover[b-2nk7gn7l5x] {
        background: rgba(255, 255, 255, 0.12);
    }

    li.selected[b-2nk7gn7l5x] {
        background: rgba(var(--AppColorRgb), .22);
    }

.list-item-clickable[b-2nk7gn7l5x] {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
    padding: 8px 12px;
    box-sizing: border-box;
    border: none;
    border-radius: var(--RadiusM);
    background: transparent;
    color: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

    .list-item-clickable:focus-visible[b-2nk7gn7l5x] {
        outline: 2px solid var(--AppColor);
        outline-offset: -2px;
    }

.icon[b-2nk7gn7l5x] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    padding: 7px;
    box-sizing: border-box;
    border-radius: var(--RadiusM);
    background: rgba(255, 255, 255, 0.1);
    transition: background 0.15s;
}

li:hover .icon[b-2nk7gn7l5x] {
    background: rgba(var(--AppColorRgb), .2);
}

li.selected .icon[b-2nk7gn7l5x] {
    background: rgba(var(--AppColorRgb), .3);
}

img[b-2nk7gn7l5x] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.list-item-head[b-2nk7gn7l5x] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

    .list-item-head p.list-item-title[b-2nk7gn7l5x] {
        margin: 0;
        font-size: 0.95rem;
        line-height: 1.25;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    /* The subtitle animates its height so rows that gain or lose a second line
       do not jump. The text itself comes from the cache in ListView.razor. */
    .list-item-head p.list-item-subtitle[b-2nk7gn7l5x] {
        margin: 0;
        font-size: 0.78rem;
        line-height: 1.25;
        color: rgba(255, 255, 255, 0.45);
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        max-height: 0;
    }

        .list-item-head p.list-item-subtitle.shown[b-2nk7gn7l5x] {
            opacity: 0;
            animation-name: fade-in-b-2nk7gn7l5x;
            animation-duration: 0.4s;
            animation-fill-mode: forwards;
        }

        .list-item-head p.list-item-subtitle.hidden[b-2nk7gn7l5x] {
            max-height: 100px;
            opacity: 1;
            animation-name: fade-out-b-2nk7gn7l5x;
            animation-duration: 0.4s;
            animation-fill-mode: forwards;
        }

/* Once any entry in this list has a subtitle, every row reserves the second line.
   Only the text fades then — the row height stays put, so a list whose subtitles
   come and go (playlist: "Läuft gerade") no longer resizes under the pointer. */
ul.with-subtitles .list-item-head p.list-item-subtitle[b-2nk7gn7l5x] {
    max-height: none;
    min-height: 1.25em;
}

    ul.with-subtitles .list-item-head p.list-item-subtitle.shown[b-2nk7gn7l5x] {
        animation-name: text-fade-in-b-2nk7gn7l5x;
    }

    ul.with-subtitles .list-item-head p.list-item-subtitle.hidden[b-2nk7gn7l5x] {
        animation-name: text-fade-out-b-2nk7gn7l5x;
    }

.buttons[b-2nk7gn7l5x] {
    display: flex;
    align-items: center;
    gap: 2px;
    padding-right: 8px;
}

/* Sort mode */
ul.sorting li[b-2nk7gn7l5x] {
    grid-template-columns: auto 1fr auto;
}

.sort-buttons[b-2nk7gn7l5x] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 6px;
}

.sort-button[b-2nk7gn7l5x] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: var(--RadiusS);
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.65rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, opacity 0.15s;
}

    .sort-button:hover:not(:disabled)[b-2nk7gn7l5x] {
        background: rgba(255, 255, 255, 0.12);
        color: white;
    }

    .sort-button:disabled[b-2nk7gn7l5x] {
        opacity: 0.25;
        cursor: default;
    }

    .sort-button:focus-visible[b-2nk7gn7l5x] {
        outline: 2px solid var(--AppColor);
        outline-offset: -1px;
    }

/* Height-free variants for lists that reserve the subtitle row. */
@keyframes text-fade-in-b-2nk7gn7l5x {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes text-fade-out-b-2nk7gn7l5x {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fade-out-b-2nk7gn7l5x {
    0% {
        max-height: 100px;
        opacity: 1;
    }

    50% {
        max-height: 100px;
        opacity: 0;
    }

    100% {
        max-height: 0;
        opacity: 0;
    }
}

@keyframes fade-in-b-2nk7gn7l5x {
    0% {
        max-height: 0;
    }

    50% {
        max-height: 100px;
        opacity: 0;
    }

    100% {
        max-height: 100px;
        opacity: 1;
    }
}
/* /Components/Shared/GenericUI/Overlay.razor.rz.scp.css */
.overlay[b-3oizl7tfew] {
    position: fixed;
    top: -10000px;
    right: -10000px;
    bottom: -10000px;
    left: -10000px;
    z-index: 1;
    cursor: default;
    pointer-events: all;
}
/* /Components/Shared/GenericUI/Pager.razor.rz.scp.css */
.pager[b-qysk5vr0kq] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 12px 4px 4px;
    color: white;
}

.pager-step[b-qysk5vr0kq],
.pager-page[b-qysk5vr0kq] {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: none;
    border-radius: var(--RadiusM);
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

    .pager-step:hover:not(:disabled)[b-qysk5vr0kq],
    .pager-page:hover:not(.current)[b-qysk5vr0kq] {
        background: rgba(255, 255, 255, 0.08);
        color: white;
    }

    .pager-step:disabled[b-qysk5vr0kq] {
        opacity: 0.25;
        cursor: default;
    }

    .pager-page.current[b-qysk5vr0kq] {
        background: rgba(var(--AppColorRgb), .25);
        color: white;
        cursor: default;
    }

    .pager-step:focus-visible[b-qysk5vr0kq],
    .pager-page:focus-visible[b-qysk5vr0kq] {
        outline: 2px solid var(--AppColor);
        outline-offset: -2px;
    }

.pager-gap[b-qysk5vr0kq] {
    padding: 0 2px;
    color: rgba(255, 255, 255, 0.25);
    font-size: 0.85rem;
}

.pager-info[b-qysk5vr0kq] {
    margin-left: auto;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.45);
}
/* /Components/Shared/GenericUI/Select.razor.rz.scp.css */
.select-trigger[b-mi0zd4no6s] {
    width: 100%;
    height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    border-radius: var(--BorderRadius);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: inherit;
    cursor: pointer;
    text-align: left;
    font-size: 0.9rem;
    transition: border-color .15s ease, background .15s ease;
    box-sizing: border-box;
}

    .select-trigger:hover:not(:disabled)[b-mi0zd4no6s] {
        background: rgba(255, 255, 255, 0.07);
    }

    .select-trigger.open[b-mi0zd4no6s] {
        border-color: var(--AppColor);
        background: rgba(255, 255, 255, 0.07);
    }

    .select-trigger:disabled[b-mi0zd4no6s] {
        opacity: 0.45;
        cursor: not-allowed;
    }

    .select-trigger.compact[b-mi0zd4no6s] {
        height: 28px;
        font-size: 0.85rem;
    }

.select-value[b-mi0zd4no6s] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.select-placeholder[b-mi0zd4no6s] {
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
}

.select-chevron[b-mi0zd4no6s] {
    flex: 0 0 auto;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    transition: transform .15s ease;
}

.select-trigger.open .select-chevron[b-mi0zd4no6s] {
    transform: rotate(180deg);
}
/* /Components/Shared/GenericUI/SelectDropdown.razor.rz.scp.css */
.select-dropdown[b-7b8uxjjui9] {
    padding: 4px;
    min-width: 160px;
    max-height: inherit;
}

/* Stays pinned to the top while the options scroll (the scroll container is .popup-host). */
.select-search[b-7b8uxjjui9] {
    position: sticky;
    top: -4px;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -4px -4px 4px -4px;
    padding: 8px 10px;
    background: rgb(35, 35, 38);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

    .select-search i[b-7b8uxjjui9] {
        font-size: 0.75rem;
        color: rgba(255, 255, 255, 0.4);
    }

    .select-search input[b-7b8uxjjui9] {
        flex: 1;
        min-width: 0;
        border: none;
        background: transparent;
        color: inherit;
        font: inherit;
        font-size: 0.9rem;
        outline: none;
    }

        .select-search input[b-7b8uxjjui9]::placeholder {
            color: rgba(255, 255, 255, 0.4);
            font-style: italic;
        }

.select-note[b-7b8uxjjui9] {
    padding: 6px 10px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
}

.select-option[b-7b8uxjjui9] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 6px 10px;
    border: none;
    border-radius: var(--RadiusS);
    background: transparent;
    color: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background .1s ease;
    white-space: nowrap;
}

    .select-option:focus-visible[b-7b8uxjjui9] {
        outline: 2px solid var(--AppColor);
        outline-offset: -2px;
    }

    .select-option:hover[b-7b8uxjjui9] {
        background: rgba(255, 255, 255, 0.06);
    }

    .select-option.selected[b-7b8uxjjui9] {
        background: rgba(var(--AppColorRgb), 0.22);
    }

    .select-option.clear[b-7b8uxjjui9] {
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        margin-bottom: 2px;
        padding-bottom: 8px;
        margin-top: 2px;
    }

.select-option-label.muted[b-7b8uxjjui9] {
    color: rgba(255, 255, 255, 0.45);
    font-style: italic;
}
/* /Components/Shared/GenericUI/ShortcutHint.razor.rz.scp.css */
.shortcut-hint[b-qhivzvlmzm] {
    position: relative;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

/* Lifts trigger and tooltip above the click-away backdrop (Overlay uses z-index 1). */
.shortcut-hint.open[b-qhivzvlmzm] {
    z-index: 2;
}

.trigger[b-qhivzvlmzm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--RadiusS);
    background: transparent;
    color: inherit;
    font-size: 0.85rem;
    opacity: 0.6;
    cursor: pointer;
    transition: opacity 0.2s, background 0.2s;
}

    .trigger:hover[b-qhivzvlmzm] {
        opacity: 1;
        background: rgba(255, 255, 255, 0.12);
    }

    .trigger:focus-visible[b-qhivzvlmzm] {
        outline: 2px solid var(--AppColor);
        outline-offset: 2px;
    }

.open .trigger[b-qhivzvlmzm] {
    opacity: 1;
    background: rgba(var(--AppColorRgb), 0.25);
    border-color: var(--AppColor);
}

.popover[b-qhivzvlmzm] {
    position: absolute;
    z-index: 3;
    width: max-content;
    max-width: min(380px, 80vw);
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--RadiusM);
    background: rgba(20, 20, 20, 0.92);
    backdrop-filter: blur(10px);
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.78rem;
    text-align: left;
    cursor: default;
    animation: shortcut-hint-in-b-qhivzvlmzm 0.15s ease;
}

    .popover.up[b-qhivzvlmzm] {
        bottom: calc(100% + 6px);
    }

    .popover.down[b-qhivzvlmzm] {
        top: calc(100% + 6px);
    }

    .popover.left[b-qhivzvlmzm] {
        left: 0;
    }

    .popover.right[b-qhivzvlmzm] {
        right: 0;
    }

    .popover.center[b-qhivzvlmzm] {
        left: 50%;
        transform: translateX(-50%);
    }

.popover-title[b-qhivzvlmzm] {
    margin-bottom: 8px;
    font-weight: 600;
    opacity: 0.75;
}

.popover ul[b-qhivzvlmzm] {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.popover li[b-qhivzvlmzm] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: center;
}

.keys[b-qhivzvlmzm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
}

.plus[b-qhivzvlmzm] {
    opacity: 0.6;
}

.description[b-qhivzvlmzm] {
    opacity: 0.85;
}

.note[b-qhivzvlmzm] {
    margin: 10px 0 0 0;
    font-size: 0.72rem;
    line-height: 1.4;
    opacity: 0.6;
}

kbd[b-qhivzvlmzm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.2em;
    padding: 1px 5px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-bottom-width: 2px;
    border-radius: var(--RadiusS);
    background: rgba(255, 255, 255, 0.18);
    font-family: inherit;
    font-size: 0.72rem;
    line-height: 1.4;
    white-space: nowrap;
}

@keyframes shortcut-hint-in-b-qhivzvlmzm {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
}

.popover.center[b-qhivzvlmzm] {
    animation: shortcut-hint-in-center-b-qhivzvlmzm 0.15s ease;
}

@keyframes shortcut-hint-in-center-b-qhivzvlmzm {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(4px);
    }
}
/* /Components/Shared/GenericUI/StatusBadge.razor.rz.scp.css */
.status-badge[b-uzo7sed2rp] {
    display: inline-block;
    padding: 1px 8px;
    border-radius: var(--RadiusPill);
    font-size: 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: rgba(255, 255, 255, 0.8);
    user-select: none;
}

    .status-badge.ok[b-uzo7sed2rp] {
        border-color: var(--GreenColor);
        color: var(--GreenColor);
    }

    .status-badge.warn[b-uzo7sed2rp] {
        border-color: var(--YellowColor);
        color: var(--YellowColor);
    }

    .status-badge.bad[b-uzo7sed2rp] {
        border-color: var(--RedColor);
        color: var(--RedColor);
    }
/* /Components/Shared/GenericUI/Table.razor.rz.scp.css */
/* Same flat language as ListView and the app menu: rows carry no frame of their
   own, they are separated by space and light up under the cursor. The body sits
   on the same frosted panel as ListView; the column labels stay outside it, the
   way the pager does — panel means data, not chrome. */
.table[b-xnqegcjpl4] {
    display: flex;
    flex-direction: column;
    border: none;
    font-size: 0.9rem;
    color: white;
}

/* Narrow devices: the table scrolls horizontally instead of squeezing the columns. */
@media (max-width: 900px) {
    .tablehead[b-xnqegcjpl4],
    .tablebody[b-xnqegcjpl4] {
        overflow-x: auto;
    }

    .row[b-xnqegcjpl4] {
        min-width: 700px;
    }
}

.row[b-xnqegcjpl4] {
    display: grid;
    align-items: center;
    padding: 4px 8px;
    cursor: pointer;
    grid-gap: 10px;
    border-radius: var(--RadiusM);
}

    .row.noclick[b-xnqegcjpl4] {
        cursor: default;
    }

[b-xnqegcjpl4] .row > p {
    padding: 6px 2px;
    max-width: 250px;
    text-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    box-sizing: border-box;
    margin: 0;
}

.tablehead .row[b-xnqegcjpl4] {
    user-select: none;
    padding: 0 8px;
    cursor: default;
}

.column[b-xnqegcjpl4] {
    padding: 6px 2px;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    /* Reset for the sortable header buttons. */
    border: none;
    background: transparent;
    font-family: inherit;
    text-align: left;
    /* Section-label look: small, uppercase, wide-tracked. */
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    transition: color 0.15s;
}

    .column:hover[b-xnqegcjpl4] {
        color: rgba(255, 255, 255, 0.75);
    }

    .column.selected[b-xnqegcjpl4] {
        color: var(--AppColor);
    }

    .column:focus-visible[b-xnqegcjpl4] {
        outline: 2px solid var(--AppColor);
        outline-offset: -2px;
        border-radius: var(--RadiusS);
    }

.sortindicator[b-xnqegcjpl4] {
    font-size: 0.7rem;
}

.tablebody[b-xnqegcjpl4] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* Kept in sync with ul in ListView.razor.css — both are "the list". */
    padding: 6px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-radius: var(--RadiusL);
}

    .tablebody .row[b-xnqegcjpl4] {
        transition: background 0.15s;
    }

        /* Lifted against the panel underneath, see ListView.razor.css. */
        .tablebody .row:not(.noclick):hover[b-xnqegcjpl4] {
            background: rgba(255, 255, 255, 0.12);
        }

[b-xnqegcjpl4] .tablefoot > * {
    flex: none !important;
}
/* /Components/Shared/GenericUI/Tabs.razor.rz.scp.css */
.tabs[b-tr7e3qcfwa] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.tabs-header[b-tr7e3qcfwa] {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    /* The header keeps its natural height — it must not shrink when the
       .tabs-body content grows and fills the flex column. */
    flex: 0 0 auto;
    gap: 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0 2px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

    .tabs-header[b-tr7e3qcfwa]::-webkit-scrollbar {
        height: 4px;
    }

    .tabs-header[b-tr7e3qcfwa]::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.15);
        border-radius: 2px;
    }

.tabs-header-spacer[b-tr7e3qcfwa] {
    flex: 1;
    min-width: 0;
}

.tab-button[b-tr7e3qcfwa] {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px 11px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    border-radius: var(--RadiusS) var(--RadiusS) 0 0;
    transition: background .12s ease, color .12s ease;
    white-space: nowrap;
}

    .tab-button:hover[b-tr7e3qcfwa] {
        background: rgba(255, 255, 255, 0.04);
        color: rgba(255, 255, 255, 0.85);
    }

    .tab-button.active[b-tr7e3qcfwa] {
        color: white;
    }

        .tab-button.active[b-tr7e3qcfwa]::after {
            content: "";
            position: absolute;
            left: 8px;
            right: 8px;
            bottom: -1px;
            height: 2px;
            background: var(--AppColor);
            border-radius: 2px 2px 0 0;
        }

    .tab-button:focus-visible[b-tr7e3qcfwa] {
        outline: none;
        background: rgba(255, 255, 255, 0.06);
    }

    .tab-button i[b-tr7e3qcfwa] {
        font-size: 0.85rem;
        opacity: 0.85;
    }

.tab-button-badge[b-tr7e3qcfwa] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: var(--RadiusPill);
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.7rem;
    font-weight: 600;
}

.tab-button.active .tab-button-badge[b-tr7e3qcfwa] {
    background: var(--AppColor);
    color: white;
}

.tabs-body[b-tr7e3qcfwa] {
    padding-top: 14px;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

[b-tr7e3qcfwa] .tab-panel {
    display: flex;
    flex-direction: column;
    gap: 6px;
    animation: tab-fade-b-tr7e3qcfwa .15s ease-out;
}

@keyframes tab-fade-b-tr7e3qcfwa {
    from {
        opacity: 0;
        transform: translateY(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Components/Shared/MediaTile.razor.rz.scp.css */
.media-tile[b-1e17m569cu] {
    position: relative;
    border: 3px rgba(255,255,255,0.3) solid;
    color: white;
    margin: 0;
    aspect-ratio: var(--tile-aspect, 16 / 9);
    box-shadow: 0 0 5px rgba(0,0,0,0);
    transition: all 0.5s;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    width: 100%;
    max-width: 600px;
    justify-self: start;
    box-sizing: border-box;
    outline: none;
    border-radius: var(--BorderRadius);
    display: grid;
    animation: showMediaTile-b-1e17m569cu 0.5s ease forwards;
    opacity: 0;
}

    .media-tile:hover[b-1e17m569cu] {
        box-shadow: 0 0 10px rgba(0,0,0,1);
        border: 3px rgba(255,255,255,0.8) solid;
    }

    .media-tile:focus-visible[b-1e17m569cu] {
        border-color: var(--AppColor);
        box-shadow: 0 0 0 2px var(--AppColor);
    }

    /* Deep link target: visible, but not to be confused with "currently shown". */
    .media-tile.highlighted[b-1e17m569cu] {
        border-style: dashed;
        border-color: var(--AppColor);
    }

    .media-tile.shown[b-1e17m569cu] {
        box-shadow: 0 0 10px rgba(0,0,0,1);
        border: 3px var(--AppColor) solid;
        background: var(--AppColor);
        cursor: default;
    }

    .media-tile.shown.clickable-when-shown[b-1e17m569cu] {
        cursor: pointer;
    }

.tile-content[b-1e17m569cu] {
    border-radius: var(--BorderRadius);
    background: black;
    display: grid;
    grid-template-rows: auto 1fr;
}

h3[b-1e17m569cu] {
    margin: 0;
    padding: 0;
    font-size: 1rem;
    font-weight: normal;
    color: var(--AppColor);
}

.title[b-1e17m569cu] {
    padding: 8px 8px 0 8px;
    user-select: none;
}

.text[b-1e17m569cu] {
    padding: 8px;
    user-select: none;
    overflow: hidden;
}

[b-1e17m569cu] p {
    font-size: 0.8rem;
    margin: 0;
    line-height: 1.2rem;
}

[b-1e17m569cu] h1,
[b-1e17m569cu] h2 {
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.3;
}

.action-buttons[b-1e17m569cu] {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: end;
    align-items: end;
}

    .action-buttons > *[b-1e17m569cu] {
        opacity: 0.5;
        transition: all 0.3s;
    }

.media-tile:hover .action-buttons > *[b-1e17m569cu] {
    opacity: 1;
}

.hide-button[b-1e17m569cu] {
    position: absolute;
    right: 0;
    top: 0;
    width: 70px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--AppColor);
    border: none;
    color: inherit;
    font-size: 1rem;
    border-radius: 0 0 0 var(--BorderRadius);
    cursor: pointer;
    transition: all 0.3s;
    z-index: 1;
}

.hidden .hide-button[b-1e17m569cu] {
    pointer-events: none;
    opacity: 0;
}

.shown .hide-button[b-1e17m569cu] {
    pointer-events: all;
    opacity: 1;
}

    .hide-button:hover[b-1e17m569cu] {
        box-shadow: 0 0 10px rgba(0,0,0,1);
    }

    .hide-button i[b-1e17m569cu] {
        transition: all 0.3s;
    }

    .hide-button:hover i[b-1e17m569cu] {
        color: var(--RedColor);
    }

/* Picture variant — the thumbnail is the tile, the caption sits underneath.
   No border: a frame around a photo only adds noise. */
.media-tile.photo[b-1e17m569cu] {
    border: none;
    aspect-ratio: auto;
    max-width: none;
    background: transparent;
    box-shadow: none;
    /* The frame clips the pictures itself; the tile must not, or it would cut off
       an opened context menu. */
    overflow: visible;
    grid-template-rows: auto auto;
    gap: 6px;
    align-content: start;
    /* No "transition: all" here: it fights the fill-forwards opacity of the
       intro animation, which makes the tile flicker while hovering. */
    transition: none;
}

    .media-tile.photo:hover[b-1e17m569cu],
    .media-tile.photo:focus-visible[b-1e17m569cu],
    .media-tile.photo.shown[b-1e17m569cu],
    .media-tile.photo.highlighted[b-1e17m569cu] {
        border: none;
        background: transparent;
        box-shadow: none;
    }

.photo-frame[b-1e17m569cu] {
    grid-area: 1 / 1;
    position: relative;
    aspect-ratio: var(--tile-aspect, 4 / 3);
    border-radius: var(--BorderRadius);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
    /* Ring instead of a border: it sits inside the frame, so nothing shifts.
       Width and offset stay fixed in every state — only the colour changes,
       otherwise the tile would resize under the cursor and flicker. */
    outline: 2px solid transparent;
    outline-offset: -2px;
    transition: outline-color 0.15s ease;
}

    /* contain, not cover: the operator has to recognise the picture, and a cropped
       portrait shows the wrong half of it. The frame background is the letterbox. */
    .photo-frame img[b-1e17m569cu] {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }

/* Stack of the first previews — a collection at a glance. All layers are the same
   size and sit inset, so the offset and rotation stay inside the tile. */
.photo-frame.stack[b-1e17m569cu] {
    overflow: visible;
}

    /* Explicit width/height, not inset: for a replaced element like <img>,
       "width: auto" means its intrinsic size, so left/right would be ignored and
       the thumbnail would spill out of the tile at its own pixel size. */
    .photo-frame.stack .stack-item[b-1e17m569cu] {
        position: absolute;
        left: 10%;
        top: 10%;
        width: 80%;
        height: 80%;
        object-fit: contain;
        /* The cards keep their size while the picture fits inside — without the
           backdrop a portrait would float in mid-air over the layers below. */
        background-color: rgba(0, 0, 0, .55);
        border-radius: var(--RadiusS);
        box-shadow: 0 2px 10px rgba(0, 0, 0, .8);
    }

    .photo-frame.stack .depth-0[b-1e17m569cu] {
        z-index: 3;
    }

    .photo-frame.stack .depth-1[b-1e17m569cu] {
        z-index: 2;
        transform: translate(5%, -5%) rotate(3deg);
        filter: brightness(.65);
    }

    .photo-frame.stack .depth-2[b-1e17m569cu] {
        z-index: 1;
        transform: translate(10%, -10%) rotate(6deg);
        filter: brightness(.45);
    }

/* Collection without any picture yet. */
.photo-empty[b-1e17m569cu] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 2rem;
    color: rgba(255, 255, 255, .25);
}

/* Discreet ring on hover — enough to show the tile reacts. */
.media-tile.photo:hover .photo-frame[b-1e17m569cu] {
    outline-color: rgba(255, 255, 255, 0.55);
}

.media-tile.photo.shown .photo-frame[b-1e17m569cu] {
    outline-color: var(--AppColor);
}

.media-tile.photo.highlighted .photo-frame[b-1e17m569cu] {
    outline-color: var(--AppColor);
    outline-style: dashed;
}

.media-tile.photo:focus-visible .photo-frame[b-1e17m569cu] {
    outline-color: var(--AppColor);
}

/* Same grid cell as the frame, but outside its clipping — hide button and
   context menu can overlap the tile edge. */
.photo-overlay[b-1e17m569cu] {
    grid-area: 1 / 1;
    position: relative;
    z-index: 5;
    pointer-events: none;
}

    .photo-overlay > *[b-1e17m569cu] {
        pointer-events: auto;
    }

.photo-caption[b-1e17m569cu] {
    padding: 0 2px;
    font-size: 0.9rem;
    color: white;
    user-select: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.media-tile.photo.shown .photo-caption[b-1e17m569cu] {
    color: var(--AppColor);
}

/* Compact row layout (IsList) — no preview, full width */
.media-tile.list[b-1e17m569cu] {
    aspect-ratio: auto;
    max-width: none;
    min-height: 52px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 14px;
    background: black;
}

    .media-tile.list.shown[b-1e17m569cu] {
        background: var(--AppColor);
    }

.list-title[b-1e17m569cu] {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    user-select: none;
    color: white;
}

    .list-title i[b-1e17m569cu] {
        color: var(--AppColor);
        flex-shrink: 0;
    }

    .media-tile.list.shown .list-title i[b-1e17m569cu] {
        color: white;
    }

    .list-title span[b-1e17m569cu] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.95rem;
    }

.list-actions[b-1e17m569cu] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

    .list-actions > *[b-1e17m569cu] {
        opacity: 0.55;
        transition: opacity 0.3s;
    }

.media-tile.list:hover .list-actions > *[b-1e17m569cu] {
    opacity: 1;
}

.list-hide-button[b-1e17m569cu] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    color: inherit;
    font-size: 1rem;
    border-radius: var(--BorderRadius);
    cursor: pointer;
    transition: all 0.3s;
}

.hide-button:focus-visible[b-1e17m569cu],
.list-hide-button:focus-visible[b-1e17m569cu] {
    outline: 2px solid white;
    outline-offset: -2px;
}

.media-tile.list.hidden .list-hide-button[b-1e17m569cu] {
    display: none;
}

.list-hide-button:hover i[b-1e17m569cu] {
    color: var(--RedColor);
}

@keyframes showMediaTile-b-1e17m569cu {
    0% {
        transform: scale(0.98);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}
/* /Components/Shared/Modals/Alert.razor.rz.scp.css */
.content-text[b-kawld1g0ys] {
    display: flex;
    align-items: center;
    justify-content: center;
}

p[b-kawld1g0ys] {
    max-width: 500px;
    line-height: 1.5rem;
}
/* /Components/Shared/Modals/ModalTemplate.razor.rz.scp.css */
.modal-template[b-jquaf3b1cf] {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-width: 500px;
    min-height: 200px;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: var(--BorderRadius);
    grid-gap: 20px;
}

.modal-center[b-jquaf3b1cf] {
    overflow: auto;
    display: grid;
    padding: 0 10px;
}

h2[b-jquaf3b1cf] {
    font-size: 1.2rem;
    padding: 5px 10px;
    text-align: center;
    color: white;
    font-weight: normal;
    letter-spacing: 2px;
    margin: 0;
    border-radius: var(--BorderRadius);
    user-select: none;
}

.modal-title[b-jquaf3b1cf] {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0 0 0;
}

.modal-footer[b-jquaf3b1cf] {
    display: flex;
    padding: 20px;
    background: rgba(255, 255, 255, 0.1);
    gap: 20px;
    animation: show-buttons-b-jquaf3b1cf 0.3s ease forwards;
    opacity: 0;
    animation-delay: 0.3s;
}


    [b-jquaf3b1cf] .button-container {
        flex: 1 1 0;
    }

@keyframes show-buttons-b-jquaf3b1cf {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Components/Shared/Modals/Prompt.razor.rz.scp.css */
.prompt-content[b-vnychjeft6] {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 40px 0;
}

p[b-vnychjeft6] {
    text-align: center;
    margin: 0;
    color: white;
}
/* /Components/Shared/TileGrid.razor.rz.scp.css */
.tile-grid[b-5j7csy89nn] {
    overflow: auto;
    list-style: none;
    margin: 0;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(var(--tile-min, 400px), 1fr));
    justify-content: start;
    align-content: start;
    padding: 0 0 100px 0;
}

    .tile-grid.list[b-5j7csy89nn] {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
/* /Components/Shared/Toasts.razor.rz.scp.css */
/* Bottom right, stacked upwards: the newest message stays closest to the corner
   the eye is already in after a click. The offset clears the big ActionButton
   (50px + 30px margin in Dashboard.razor.css) so a toast never covers it. */
.toast-host[b-g2ewrm9ynb] {
    position: fixed;
    right: 16px;
    bottom: 92px;
    z-index: 900;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 8px;
    max-width: min(380px, calc(100vw - 32px));
    pointer-events: none;
}

.toast[b-g2ewrm9ynb] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 13px;
    border-radius: var(--RadiusM);
    background: var(--Darker);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
    font-size: 0.85rem;
    cursor: pointer;
    pointer-events: auto;
    overflow: hidden;
    /* In, then out again in the last 300ms of its lifetime — the server removes the
       element right after, so the two never fight over the same frame. */
    animation: toast-in-b-g2ewrm9ynb 0.2s ease-out,
               toast-out-b-g2ewrm9ynb 0.3s ease-in calc(var(--ToastLife, 4000ms) - 300ms) forwards;
}

    /* Kind is carried by the icon and the progress bar alone — no accent border. */
    .toast i[b-g2ewrm9ynb] {
        opacity: 0.9;
    }

    .toast.success i[b-g2ewrm9ynb] {
        color: var(--GreenColor);
    }

    .toast.error i[b-g2ewrm9ynb] {
        color: var(--RedColor);
    }

/* Remaining time as a bar along the bottom edge. scaleX runs on the compositor,
   so a long list of toasts costs no layout work. */
.toast-bar[b-g2ewrm9ynb] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--AppColor);
    transform-origin: left center;
    animation: toast-bar-run-b-g2ewrm9ynb var(--ToastLife, 4000ms) linear forwards;
}

.toast.success .toast-bar[b-g2ewrm9ynb] {
    background: var(--GreenColor);
}

.toast.error .toast-bar[b-g2ewrm9ynb] {
    background: var(--RedColor);
}

@keyframes toast-bar-run-b-g2ewrm9ynb {
    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}

@keyframes toast-in-b-g2ewrm9ynb {
    from {
        opacity: 0;
        transform: translateX(16px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toast-out-b-g2ewrm9ynb {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(24px);
    }
}

/* Reduced motion keeps the countdown — it is information, not decoration — but
   drops the sliding. */
@media (prefers-reduced-motion: reduce) {
    .toast[b-g2ewrm9ynb] {
        animation: toast-fade-out-b-g2ewrm9ynb 0.2s linear calc(var(--ToastLife, 4000ms) - 200ms) forwards;
    }
}

@keyframes toast-fade-out-b-g2ewrm9ynb {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}
/* /Components/Shared/TopButton.razor.rz.scp.css */
.top-button-host[b-l5xcd0tx05] {
    position: relative;
    display: inline-flex;
}

.top-button[b-l5xcd0tx05] {
    display: flex;
    gap: 10px;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    border: none;
    padding: 5px 20px;
    border-radius: var(--BorderRadius);
    color: inherit;
    font-family: inherit;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    user-select: none;
}

.top-button:hover[b-l5xcd0tx05] {
    background: rgba(0, 0, 0, 0.5);
}

.top-button:focus-visible[b-l5xcd0tx05] {
    outline: 2px solid var(--AppColor);
    outline-offset: 2px;
}

.title[b-l5xcd0tx05], .icon[b-l5xcd0tx05], .expander[b-l5xcd0tx05] {
    color: rgba(255, 255, 255, 0.4);
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
}

.top-button:hover .title[b-l5xcd0tx05], .top-button:hover .icon[b-l5xcd0tx05], .top-button:hover .expander[b-l5xcd0tx05] {
    color: rgba(255, 255, 255, 0.8);
}
/* /Components/Songs/ModalEditStanza.razor.rz.scp.css */
.edit-stanza[b-h42e8vfvjc] {
    display: grid;
    grid-template-rows: auto auto 400px;
    align-content: start;
    padding: 0;
    grid-gap: 10px;
}

/* TinyMCE frame styling lives in app.css — the grid row above sets the height. */
/* /Components/Songs/ModalHistory.razor.rz.scp.css */
.history-wrapper[b-saiy1uxxcp] {
    max-height: 400px;
    display: grid;
}

.ccli-cell[b-saiy1uxxcp],
.reported-cell[b-saiy1uxxcp] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-start;
    justify-content: center;
}

.ccli[b-saiy1uxxcp] {
    display: flex;
    gap: 5px;
    align-items: center;
    padding: 0 10px;
}

.copy[b-saiy1uxxcp] {
    display: flex;
    align-items: center;
    padding: 5px;
    transition: all 0.3s;
    cursor: pointer;
    border: none;
    background: transparent;
    color: inherit;
    font-size: 0.9rem;
    border-radius: var(--BorderRadius);
    height: 20px;
    width: 20px;
    justify-content: center;
}

    .copy:focus-visible[b-saiy1uxxcp] {
        outline: 2px solid var(--AppColor);
        outline-offset: 1px;
    }

.copy p[b-saiy1uxxcp] {
    padding: 0;
}

.copy:hover[b-saiy1uxxcp] {
    background: rgba(255, 255, 255, 0.2);
}
/* /Components/Songs/ModalSelectStanza.razor.rz.scp.css */
.select-stanza[b-v2zd2ah95h] {
    overflow: auto;
}

.title[b-v2zd2ah95h] {
    color: var(--AppColor);
}

.preview[b-v2zd2ah95h] {
    font-size: 0.8rem;
    max-height: 200px;
    overflow: hidden;
    position: relative;
    margin: 0 0 10px 0;
    min-height: 40px;
    line-height: 1.2rem;
}

    .preview[b-v2zd2ah95h]::after {
        position: absolute;
        bottom: 0;
        height: 50px;
        width: 100%;
        content: '';
        background: linear-gradient(transparent, black);
    }

.preview-tag[b-v2zd2ah95h] {
    color: var(--BorderColor);
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 1rem;
}

ul[b-v2zd2ah95h] {
    margin: 0;
    padding: 10px 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 500px;
    overflow: auto;
}

li[b-v2zd2ah95h] {
    padding: 10px;
    border-radius: var(--BorderRadius);
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: relative;
    transition: all 0.3s;
    user-select: none;
    background: black;
}

.action-buttons[b-v2zd2ah95h] {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    gap: 10px;
}

p[b-v2zd2ah95h] {
    margin: 0;
}

/* /Components/Songs/ModalSongInfo.razor.rz.scp.css */
ul.info-list[b-j2h5gn01sx] {
    list-style: none;
    display: flex;
    flex-direction: column;
    margin: 20px 0;
    padding: 0;
    gap: 5px;
    min-height: 200px;
}

ul.info-list li[b-j2h5gn01sx] {
    list-style: none;
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr;
}

.info-name[b-j2h5gn01sx] {
    display: flex;
    align-items: center;
}

.info-name p[b-j2h5gn01sx] {
    margin: 0;
}
/* /Components/Songs/PresentationView.razor.rz.scp.css */
.view-wrapper[b-ssb4ks2plw] {
    display: block;
    overflow: auto;
}

.song-stanzas[b-ssb4ks2plw] {
    overflow: auto;
    list-style: none;
    margin: 0;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    justify-content: start;
    padding: 0px 0px 100px 0px;
}

.song-content[b-ssb4ks2plw] {
    overflow: auto;
}

/* Same footprint as a stanza tile — it is the next tile of the grid, not a page-wide area. */
.create-stanza[b-ssb4ks2plw] {
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 16 / 9;
    border: 2px var(--BorderColor) dashed;
    border-radius: var(--BorderRadius);
    margin: 5px;
    box-sizing: border-box;
    transition: all 0.2s;
}

    .create-stanza.drag-over[b-ssb4ks2plw] {
        border-color: var(--AppColor);
        background: rgba(255, 255, 255, 0.05);
    }

/* Sits below the stanza grid — tells the operator that a presenter remote works. */
.keyboard-hint[b-ssb4ks2plw] {
    display: flex;
    align-items: center;
    padding: 0 4px 10px 4px;
}

.btn[b-ssb4ks2plw] {
    padding: 10px;
    border: 1px var(--BorderColor) solid;
    border-radius: var(--BorderRadius);
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

    .btn:hover[b-ssb4ks2plw] {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    }

    .btn:focus-visible[b-ssb4ks2plw] {
        outline: 2px solid var(--AppColor);
        outline-offset: 2px;
    }
/* /Components/Songs/SheetView.razor.rz.scp.css */
.no-sheets[b-89dmp3xo88] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.song-sheets[b-89dmp3xo88] {
    display: grid;
    overflow: auto;
    grid-template-rows: 1fr auto;
    grid-gap: 20px;
    padding: 0 0 30px 0;
}

.song-sheet-preview[b-89dmp3xo88] {
    display: grid;
    overflow: auto;
    opacity: 1;
    transition: all 0.3s;
}

.edit .song-sheet-preview[b-89dmp3xo88] {
    display: grid;
    overflow: auto;
    opacity: 0;
}

.song-sheet-selector[b-89dmp3xo88] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    overflow: auto;
    gap: 10px;
    transition: all 0.3s;
}

.edit .song-sheet-selector[b-89dmp3xo88] {
    margin-bottom: 60px;
    box-sizing: border-box;
    flex-wrap: wrap;
}


.sheet-selection[b-89dmp3xo88] {
    position: relative;
    display: grid;
    overflow: hidden;
    height: 100px;
    width: 100px;
    cursor: pointer;
    transition: all 0.3s;
    border-radius: var(--BorderRadius);
    border: 2px transparent solid;
}

.song-sheets:not(.edit) .sheet-selection.selected[b-89dmp3xo88] {
    border: 2px white solid;
}

.sheet-selection img[b-89dmp3xo88] {
    object-fit: cover;
    opacity: 0.3;
    transition: all 0.3s;
}

.song-sheets:not(.edit) .sheet-selection:hover img[b-89dmp3xo88] {
    opacity: 1;
    transform: scale(1.1);
}

.song-sheets:not(.edit) .sheet-selection:hover[b-89dmp3xo88] {
    opacity: 1;
}

.edit .sheet-selection[b-89dmp3xo88] {
    height: 200px;
    width: 200px;
    animation: showSheet-b-89dmp3xo88 0.3s ease forwards;
}

    .edit .sheet-selection img[b-89dmp3xo88] {
        cursor: default;
        opacity: 1;
    }


.sheet[b-89dmp3xo88] {
    display: grid;
    overflow: auto;
    animation: showSheet-b-89dmp3xo88 0.5s ease forwards;
}

img[b-89dmp3xo88] {
    width: 100%;
    object-fit: contain;
    height: 100%;
    overflow: hidden;
}

.upload-input[b-89dmp3xo88] {
    display: none;
}

@keyframes showSheet-b-89dmp3xo88 {
    0% {
        transform: scale(0.9);
        opacity: 0;
    }

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

.action-buttons[b-89dmp3xo88] {
    position: absolute;
    right: 10px;
    bottom: 10px;
}

.sheet-selection.add-sheet[b-89dmp3xo88] {
    cursor: default;
    border: 2px var(--BorderColor) dashed;
    border-radius: var(--BorderRadius);
    display: flex;
    justify-content: center;
    align-items: center;
}
/* /Components/Songs/Song.razor.rz.scp.css */
.song-content[b-ta2llajm7b]
 {
    display: contents;
}
/* /Components/Songs/SongDisplay.razor.rz.scp.css */
.song-display-container[b-ewba2t3x5z] {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background-color: black;
    color: white;
    line-height: 1.5;
    display: grid;
    overflow: hidden;
    container-type: size;
}

.text-container[b-ewba2t3x5z] {
    font-size: clamp(1px, 5cqh, 20cqh);
}

[b-ewba2t3x5z] p,
.song-display-container h1[b-ewba2t3x5z],
.song-display-container h2[b-ewba2t3x5z] {
    padding: 0;
    margin: 0;
}

.song-display-container h1[b-ewba2t3x5z] {
    font-family: var(--header-font-family, inherit);
    font-size: var(--header-font-size, 1.2em);
    font-weight: var(--header-font-weight, bold);
    text-align: var(--header-text-align, inherit);
    color: var(--header-color, inherit);
}

.song-display-container h2[b-ewba2t3x5z] {
    font-family: var(--stanza-type-font-family, inherit);
    font-size: var(--stanza-type-font-size, 0.7em);
    font-weight: var(--stanza-type-font-weight, normal);
    text-align: var(--stanza-type-text-align, inherit);
    color: var(--stanza-type-color, var(--AppColor));
    margin: 0.0em 0 0.3em;
}

[b-ewba2t3x5z] p {
    font-family: var(--text-font-family, inherit);
    font-size: var(--text-font-size, 1em);
    font-weight: var(--text-font-weight, normal);
    text-align: var(--text-text-align, inherit);
    color: var(--text-color, inherit);
}
/* /Components/Songs/SongsMain.razor.rz.scp.css */
.add-icon[b-33pqdj4han] {
    position: absolute;
    right: 2px;
    bottom: 2px;
    height: 12px;
    width: 12px;
    border-radius: 100%;
    background: var(--AppColor);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .add-icon i[b-33pqdj4han] {
        font-size: 0.5rem;
    }

.more[b-33pqdj4han] {
    display: flex;
    justify-content: center;
}

/* Frameless search field: a soft surface instead of a border. */
.all-songs-filter[b-33pqdj4han] {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 0 10px 0;
}

    .all-songs-filter > i[b-33pqdj4han] {
        position: absolute;
        left: 12px;
        color: rgba(255, 255, 255, 0.35);
        font-size: 0.8rem;
        pointer-events: none;
    }

    .all-songs-filter input[b-33pqdj4han] {
        flex: 1 1 auto;
        min-width: 0;
        padding: 9px 36px;
        border: none;
        border-radius: var(--RadiusM);
        background: rgba(255, 255, 255, 0.06);
        color: inherit;
        font-family: inherit;
        font-size: 0.9rem;
        transition: background 0.15s;
    }

        .all-songs-filter input[b-33pqdj4han]::placeholder {
            color: rgba(255, 255, 255, 0.35);
        }

        .all-songs-filter input:hover[b-33pqdj4han] {
            background: rgba(255, 255, 255, 0.09);
        }

        .all-songs-filter input:focus[b-33pqdj4han] {
            outline: none;
            background: rgba(255, 255, 255, 0.12);
        }

        .all-songs-filter input:focus-visible[b-33pqdj4han] {
            outline: 2px solid var(--AppColor);
            outline-offset: -2px;
        }

.filter-clear[b-33pqdj4han] {
    position: absolute;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: var(--RadiusM);
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

    .filter-clear:hover[b-33pqdj4han] {
        background: rgba(255, 255, 255, 0.12);
        color: white;
    }

    .filter-clear:focus-visible[b-33pqdj4han] {
        outline: 2px solid var(--AppColor);
        outline-offset: -2px;
    }

/* --- Song table cells --- */
.song-cell[b-33pqdj4han] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
}

.song-title[b-33pqdj4han] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.song-icon[b-33pqdj4han] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    padding: 6px;
    box-sizing: border-box;
    border-radius: var(--RadiusM);
    background: rgba(255, 255, 255, 0.06);
    transition: background 0.15s;
}

    .song-icon img[b-33pqdj4han] {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.song-name[b-33pqdj4han] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.95rem;
    color: white;
}

.song-number[b-33pqdj4han] {
    font-variant-numeric: tabular-nums;
}

.song-never[b-33pqdj4han] {
    color: rgba(255, 255, 255, 0.3);
}

.song-actions[b-33pqdj4han] {
    display: flex;
    justify-content: flex-end;
}

/* Bar relative to the most-played song. */
.popularity[b-33pqdj4han] {
    height: 6px;
    border-radius: var(--RadiusPill);
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.popularity-bar[b-33pqdj4han] {
    height: 100%;
    min-width: 0;
    border-radius: var(--RadiusPill);
    background: var(--AppColor);
    transition: width 0.3s;
}

    .more button[b-33pqdj4han] {
        font-family: inherit;
        font-size: 0.8rem;
        margin: 10px 0 0 0;
        padding: 10px;
        border: none;
        background: transparent;
        border-radius: var(--BorderRadius);
        cursor: pointer;
        transition: all 0.3s;
        color: var(--AppColor);
    }

    .more button:hover[b-33pqdj4han] {
        background: rgba(255, 255, 255, 0.1);
    }

    .more button:focus-visible[b-33pqdj4han] {
        outline: 2px solid var(--AppColor);
        outline-offset: 2px;
    }
/* /Components/Songs/Stanza.razor.rz.scp.css */
.stanza[b-t5rfsd4p6q] {
    position: relative;
    border: 3px rgba(255,255,255,0.3) solid;
    color: white;
    margin: 0;
    aspect-ratio: 16 / 9;
    box-shadow: 0 0 5px rgba(0,0,0,0);
    transition: all 0.5s;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    width: 100%;
    max-width: 600px;
    justify-self: start;
    box-sizing: border-box;
    outline: none;
    border-radius: var(--BorderRadius);
    display: grid;
    animation: showStanza-b-t5rfsd4p6q 0.5s ease forwards;
    opacity: 0;
}

    .stanza:hover[b-t5rfsd4p6q] {
        box-shadow: 0 0 10px rgba(0,0,0,1);
        border: 3px rgba(255,255,255,0.8) solid;
    }

    .stanza.shown[b-t5rfsd4p6q] {
        box-shadow: 0 0 10px rgba(0,0,0,1);
        border: 3px var(--AppColor) solid;
        background: var(--AppColor);
        cursor: default;
    }

    .stanza.edit[b-t5rfsd4p6q] {
        cursor: grab;
        box-shadow: none;
        border: 3px transparent solid;
    }

    .stanza.edit:active[b-t5rfsd4p6q] {
        cursor: grabbing;
    }

    .stanza.dragging[b-t5rfsd4p6q] {
        opacity: 0.4;
    }

    .stanza.drag-over-before[b-t5rfsd4p6q] {
        box-shadow: -6px 0 0 0 var(--AppColor);
    }

.stanza-content[b-t5rfsd4p6q] {
    border-radius: var(--BorderRadius);
    background: black;
    display: grid;
    grid-template-rows: auto 1fr;
}

h3[b-t5rfsd4p6q] {
    margin: 0;
    padding: 0;
    font-size: 1rem;
    font-weight: normal;
    color: var(--AppColor);
}

.title[b-t5rfsd4p6q] {
    padding: 8px 8px 0 8px;
    user-select: none;
}

.text[b-t5rfsd4p6q] {
    padding: 8px;
    user-select: none;
}

[b-t5rfsd4p6q] p {
    font-size: 0.8rem;
    margin: 0;
    line-height: 1.2rem;
}

.action-buttons[b-t5rfsd4p6q] {
    position: absolute;
    bottom: 10px;
    right: 10px;
    left: 10px;
    display: grid;
    grid-template-columns: auto 1fr auto;

    top: 10px;
}

    .action-buttons > *[b-t5rfsd4p6q] {
        opacity: 0.5;
        transition: all 0.3s;
    }

    .action-buttons .add[b-t5rfsd4p6q] {
        transition: all 0.8s;
        opacity: 1;
    }

.stanza:hover .action-buttons > *[b-t5rfsd4p6q] {
    opacity: 1;
}

    .stanza:hover .action-buttons .add[b-t5rfsd4p6q] {
        opacity: 1;
    }

.action-group[b-t5rfsd4p6q] {
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: center;
    align-items: end;
}

.hide-button[b-t5rfsd4p6q] {
    position: absolute;
    right: 0;
    top: 0;
    width: 70px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--AppColor);
    border: none;
    color: inherit;
    font-size: 1rem;
    border-radius: 0 0 0 var(--BorderRadius);
    cursor: pointer;
    transition: all 0.3s;
    z-index: 1;
}

    .hide-button:focus-visible[b-t5rfsd4p6q] {
        outline: 2px solid white;
        outline-offset: -2px;
    }

.stanza:focus-visible[b-t5rfsd4p6q] {
    border-color: var(--AppColor);
    box-shadow: 0 0 0 2px var(--AppColor);
}

.hidden .hide-button[b-t5rfsd4p6q] {
    pointer-events: none;
    opacity: 0;
}

.shown .hide-button[b-t5rfsd4p6q] {
    pointer-events: all;
    opacity: 1;
}

    .hide-button:hover[b-t5rfsd4p6q] {
        box-shadow: 0 0 10px rgba(0,0,0,1);
    }

    .hide-button i[b-t5rfsd4p6q] {
        transition: all 0.3s;
    }

    .hide-button:hover i[b-t5rfsd4p6q] {
        color: var(--RedColor);
    }

@keyframes showStanza-b-t5rfsd4p6q {
    0% {
        transform: scale(0.98);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
/* /Components/Tickers/ModalEditTicker.razor.rz.scp.css */
.edit-ticker[b-3mylm59uyi] {
    display: grid;
    grid-template-rows: auto 250px;
    align-content: start;
    padding: 0;
    grid-gap: 10px;
}

/* TinyMCE frame styling lives in app.css — the grid row above sets the height. */
/* /Components/Tickers/TickerDisplay.razor.rz.scp.css */
.ticker-display-container[b-q1z2o3qyok] {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-color: black;
    color: white;
    display: grid;
    align-content: center;
    overflow: hidden;
    container-type: size;
    font-size: clamp(1px, 55cqh, 90cqh);
    line-height: 1.2;
}

.ticker-track[b-q1z2o3qyok] {
    width: max-content;
    white-space: nowrap;
    will-change: transform;
    font-family: var(--text-font-family, inherit);
    font-weight: var(--text-font-weight, normal);
    color: var(--text-color, inherit);
    animation: checkbeam-ticker-scroll-b-q1z2o3qyok var(--ticker-duration, 20s) linear infinite;
}

    .ticker-track[b-q1z2o3qyok]  p {
        display: inline;
        margin: 0;
        padding: 0;
        font-size: var(--text-font-size, 1em);
    }

@keyframes checkbeam-ticker-scroll-b-q1z2o3qyok {
    from {
        transform: translateX(100cqw);
    }

    to {
        transform: translateX(-100%);
    }
}
/* /Components/Tickers/TickersMain.razor.rz.scp.css */
/* Grid and empty state come from the shared TileGrid/EmptyState components. */
/* /Components/Transcription/TranscriptDisplay.razor.rz.scp.css */
.transcript-display-container[b-n5g3h3hj91] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0.25em 0.75em;
}

/* Subtitle behaviour: lines stick to the bottom, older ones run off the top of
   the visible area. The height follows from the configured line count. */
.transcript-lines[b-n5g3h3hj91] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    max-height: calc(var(--transcript-visible-lines, 2) * 1.45em);
    overflow: hidden;
    line-height: 1.45em;
}

.transcript-line[b-n5g3h3hj91] {
    white-space: pre-wrap;
    word-break: break-word;
}

.transcript-line.partial[b-n5g3h3hj91] {
    opacity: 0.75;
}
/* /Components/Transcription/TranscriptionMain.razor.rz.scp.css */
.transcription-page[b-y79fxw8226] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    min-height: 0;
    /* Room for the action buttons in the bottom right corner. */
    padding-bottom: 90px;
    box-sizing: border-box;
}

.transcription-controls[b-y79fxw8226] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.transcription-status[b-y79fxw8226] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.6);
    user-select: none;
}

.recording-dot[b-y79fxw8226] {
    color: var(--RedColor);
    font-size: 0.6rem;
    animation: transcription-pulse-b-y79fxw8226 1.2s ease-in-out infinite;
}

@keyframes transcription-pulse-b-y79fxw8226 {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.25;
    }
}

.transcript-monitor[b-y79fxw8226] {
    flex: 1;
    min-height: 0;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--BorderRadius);
    padding: 10px 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

    /* Leerzustand mittig im Monitor. */
    .transcript-monitor[b-y79fxw8226]  .empty-state {
        margin: auto;
    }

/* column-reverse keeps the view anchored at the bottom; the newest entry (the
   partial) is rendered as the first child and shows up at the very bottom. */
.transcript-monitor-lines[b-y79fxw8226] {
    display: flex;
    flex-direction: column-reverse;
    overflow-y: auto;
    min-height: 0;
    gap: 6px;
}

.monitor-line[b-y79fxw8226] {
    display: flex;
    gap: 10px;
    align-items: baseline;
}

    .monitor-line.partial[b-y79fxw8226] {
        opacity: 0.65;
        font-style: italic;
    }

.monitor-time[b-y79fxw8226] {
    font-size: 0.75em;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
}
/* /Components/Users/ModalEditUser.razor.rz.scp.css */
.user-form[b-7fb4hjj4ff] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 380px;
}

.user-form-row[b-7fb4hjj4ff] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
/* /Components/Users/ModalResetPassword.razor.rz.scp.css */
.user-form[b-rndk9qu10j] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 340px;
}

.user-form-hint[b-rndk9qu10j] {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.65);
}
/* /Components/Users/UsersMain.razor.rz.scp.css */
.users-page[b-fqwev15vfg] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 960px;
    padding-bottom: 40px;
}

/* Table rows are rendered by the generic Table component, so the cells need ::deep. */
.users-page[b-fqwev15vfg]  .user-cell {
    display: flex;
    align-items: center;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.users-page[b-fqwev15vfg]  .user-name {
    font-weight: 500;
}

.users-page[b-fqwev15vfg]  .user-actions {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
    overflow: visible;
}