/* /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 */
/* The negative margin + padding on the right give the verse column room for the
   glow of the shown verse; the content box stays where it was. */
.bible-layout[b-zvmbhfk2u7] {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: var(--space-5);
    height: 100%;
    min-height: 0;
    overflow: hidden;
    box-sizing: border-box;
    margin-right: calc(-1 * var(--space-3));
    padding-right: var(--space-3);
}

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

/* Section heads: small, uppercase, muted — with an optional mono counter on the right. */
.section-head[b-zvmbhfk2u7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    height: 30px;
    margin: 0 0 var(--space-1);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-text-muted);
    user-select: none;
}

.section-count[b-zvmbhfk2u7] {
    font-family: var(--font-mono);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

/* --- Books: one surface, grouped by testament; the open book is raised --- */

.books-column[b-zvmbhfk2u7] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-2);
    box-sizing: border-box;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.book-group[b-zvmbhfk2u7] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .book-group + .book-group[b-zvmbhfk2u7] {
        margin-top: var(--space-3);
    }

    .book-group .section-head[b-zvmbhfk2u7] {
        padding-left: var(--space-2);
    }

.book-item[b-zvmbhfk2u7] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    width: 100%;
    min-height: 30px;
    box-sizing: border-box;
    padding: 0 10px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: var(--font-size-sm);
    text-align: left;
    cursor: pointer;
    user-select: none;
    transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

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

    .book-item.selected[b-zvmbhfk2u7] {
        background: var(--color-surface-raised);
        box-shadow: var(--elevation-1);
        color: var(--color-primary);
        font-weight: 500;
    }

/* --- Chapters: small mono wells; the open chapter is filled --- */

.chapters-row[b-zvmbhfk2u7] {
    min-width: 0;
}

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

.chapter-item[b-zvmbhfk2u7] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--color-well);
    box-shadow: var(--shadow-inset);
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    cursor: pointer;
    user-select: none;
    transition: box-shadow var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}

    .chapter-item:hover[b-zvmbhfk2u7] {
        box-shadow: var(--shadow-inset), inset 0 0 12px rgba(var(--color-primary-rgb), .22);
        color: var(--color-primary);
    }

    .chapter-item.selected[b-zvmbhfk2u7] {
        background: var(--color-primary);
        box-shadow: var(--shadow-primary);
        color: var(--color-on-primary);
        font-weight: 500;
    }

/* --- Verses --- */

/* Reaches a little past its column on both sides, so the scroll box does not cut
   off the glow of the shown verse; the padding puts the content back in line. */
.verses-column[b-zvmbhfk2u7] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-height: 0;
    overflow-y: auto;
    margin: 0 calc(-1 * var(--space-3));
    padding: 0 var(--space-3);
}

.verses-header[b-zvmbhfk2u7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    min-height: 36px;
}

    .verses-header h2[b-zvmbhfk2u7] {
        flex: 1;
        margin: 0;
        font-size: var(--font-size-lg);
        font-weight: 500;
        color: var(--color-text);
    }

.hint[b-zvmbhfk2u7] {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    user-select: none;
}

.verse-list[b-zvmbhfk2u7] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: var(--space-5);
}

/* Room for the floating bar, so the last verse can scroll out from under it. */
.has-bar .verse-list[b-zvmbhfk2u7] {
    padding-bottom: 120px;
}

.verse-item[b-zvmbhfk2u7] {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: var(--space-2);
    align-items: baseline;
    width: 100%;
    box-sizing: border-box;
    padding: 11px 15px;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: var(--font-size-md);
    line-height: 1.55;
    text-align: left;
    cursor: pointer;
    user-select: none;
    transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

    .verse-item:hover[b-zvmbhfk2u7] {
        background: var(--surface-hover);
    }

    /* Deep link target: raised with a soft accent halo — weaker than the glow of
       a verse that is really on the screen. */
    .verse-item.highlighted[b-zvmbhfk2u7] {
        background: var(--color-surface-raised);
        box-shadow: var(--elevation-1), 0 0 18px rgba(var(--color-primary-rgb), .22);
    }

    /* On the screen: raised and glowing in the accent. */
    .verse-item.shown[b-zvmbhfk2u7] {
        background: var(--color-surface-raised);
        box-shadow: var(--shadow-glow);
    }

.verse-number[b-zvmbhfk2u7] {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.verse-item.shown .verse-number[b-zvmbhfk2u7] {
    color: var(--color-primary);
}

/* --- Floating range bar (Loqui composer bar) ---
   Positioned against the page frame (.dashboard), not the scrolling content, so it
   stays put while the verses scroll. */
.range-bar[b-zvmbhfk2u7] {
    position: absolute;
    left: 50%;
    bottom: var(--space-5);
    z-index: 10;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: var(--space-1);
    max-width: calc(100% - 2 * var(--space-4));
    box-sizing: border-box;
    padding: var(--space-2);
    border-radius: var(--radius-xl);
    background: var(--color-surface-overlay);
    box-shadow: var(--elevation-3);
    animation: bar-in-b-zvmbhfk2u7 .22s cubic-bezier(.16, 1, .3, 1);
}

.range-state[b-zvmbhfk2u7] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    min-width: 96px;
    padding: 0 var(--space-3) 0 var(--space-2);
}

.range-ref[b-zvmbhfk2u7] {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    font-weight: 500;
    white-space: nowrap;
}

.live-tag[b-zvmbhfk2u7] {
    padding: 2px 6px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .08em;
    line-height: 1.2;
}

/* Space, not a rule, between the button groups. */
.bar-sep[b-zvmbhfk2u7] {
    width: var(--space-3);
    flex-shrink: 0;
}

.bar-btn[b-zvmbhfk2u7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 80px;
    height: 60px;
    flex-shrink: 0;
    padding: 0 var(--space-1);
    border: 0;
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--color-text-muted);
    font: inherit;
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base), box-shadow var(--transition-base);
}

    .bar-btn i[b-zvmbhfk2u7] {
        font-size: 17px;
    }

    /* The bar is the top surface already: on hover a button lightens a step and casts
       a shadow; accent and danger only tint that raised surface. */
    .bar-btn:hover[b-zvmbhfk2u7] {
        background: linear-gradient(var(--surface-hover), var(--surface-hover)), var(--color-surface-overlay);
        box-shadow: var(--elevation-1);
        color: var(--color-text);
    }

    .bar-btn.primary[b-zvmbhfk2u7] {
        background: var(--accent-tint);
        color: var(--color-primary);
    }

        .bar-btn.primary:hover[b-zvmbhfk2u7] {
            background: linear-gradient(var(--accent-tint-strong), var(--accent-tint-strong)), var(--color-surface-overlay);
        }

    .bar-btn.danger:hover[b-zvmbhfk2u7] {
        background: linear-gradient(rgba(var(--color-danger-rgb), .15), rgba(var(--color-danger-rgb), .15)), var(--color-surface-overlay);
        color: var(--color-danger);
    }

.bar-label[b-zvmbhfk2u7] {
    font-size: var(--font-size-xs);
    line-height: 1;
    white-space: nowrap;
}

@keyframes bar-in-b-zvmbhfk2u7 {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(12px) scale(.97);
    }

    to {
        opacity: 1;
        transform: translateX(-50%);
    }
}

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

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

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

    .verses-header[b-zvmbhfk2u7] {
        position: sticky;
        top: 0;
        z-index: 1;
        padding: var(--space-1) 0;
        background: var(--color-bg);
    }

    .range-bar[b-zvmbhfk2u7] {
        bottom: var(--space-3);
    }

    .range-state[b-zvmbhfk2u7],
    .range-state + .bar-sep[b-zvmbhfk2u7] {
        display: none;
    }

    .bar-btn[b-zvmbhfk2u7] {
        width: 56px;
        height: 52px;
    }

    .bar-sep[b-zvmbhfk2u7] {
        width: var(--space-1);
    }
}
/* /Components/Bible/ModalManageTranslations.razor.rz.scp.css */
.translations-content[b-nmhb34x0ht] {
    min-width: 520px;
    max-width: 640px;
    max-height: 60vh;
    overflow-y: auto;
    color: var(--color-text);
}

@media (max-width: 720px) {
    .translations-content[b-nmhb34x0ht] {
        min-width: 0;
    }
}

.source-hint[b-nmhb34x0ht] {
    margin: 0 0 var(--space-3) 0;
    font-size: var(--font-size-xs);
    line-height: 1.5;
    color: var(--color-text-muted);
}

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

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

.loading[b-nmhb34x0ht] {
    padding: var(--space-5) 0;
    color: var(--color-text-muted);
}

/* One block a step darker than the dialog; no lines between the translations,
   each row lights up on hover instead. */
.translation-list[b-nmhb34x0ht] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--color-surface-raised);
}

.translation-row[b-nmhb34x0ht] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    min-height: 52px;
    box-sizing: border-box;
    padding: var(--space-2) 2px var(--space-2) var(--space-2);
    border-radius: var(--radius-md);
    transition: background var(--transition-base);
}

    .translation-row:hover[b-nmhb34x0ht] {
        background: rgba(255, 255, 255, .04);
    }

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

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

.details[b-nmhb34x0ht] {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.actions[b-nmhb34x0ht] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

    .actions > i[b-nmhb34x0ht] {
        color: var(--color-primary);
    }

.installed-badge[b-nmhb34x0ht] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    background: rgba(var(--color-success-rgb), .2);
    color: var(--color-success);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

    .installed-badge i[b-nmhb34x0ht] {
        font-size: 10px;
    }

.progress[b-nmhb34x0ht] {
    position: relative;
    width: 260px;
    max-width: 100%;
    height: 16px;
    margin-top: var(--space-1);
    overflow: hidden;
    border-radius: var(--radius-full);
    background: var(--color-well);
    box-shadow: var(--shadow-inset);
}

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

.progress-label[b-nmhb34x0ht] {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--color-text);
}

.action-error[b-nmhb34x0ht] {
    margin-top: var(--space-3);
}
/* /Components/Chat/ChatPanel.razor.rz.scp.css */
/* Log on top, composer pinned to the bottom of the side panel. */
.chat[b-krhbk25c7i] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.chat-log[b-krhbk25c7i] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    box-sizing: border-box;
}

/* Same head as the history timeline, so both tabs read alike. */
.day-head[b-krhbk25c7i] {
    display: flex;
    align-items: center;
    height: 30px;
    margin: 0 0 var(--space-1);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-text-muted);
}

/* --- One author's run of messages --- */
.run[b-krhbk25c7i] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

    .run.own[b-krhbk25c7i] {
        justify-content: flex-end;
    }

.avatar[b-krhbk25c7i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: var(--color-surface-raised);
    box-shadow: var(--elevation-1);
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 600;
}

.run-body[b-krhbk25c7i] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    max-width: 85%;
}

.run.own .run-body[b-krhbk25c7i] {
    align-items: flex-end;
}

.run-head[b-krhbk25c7i] {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    min-width: 0;
    padding: 0 2px;
}

.author[b-krhbk25c7i] {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.time[b-krhbk25c7i] {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.msg[b-krhbk25c7i] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    max-width: 100%;
}

.run.own .msg[b-krhbk25c7i] {
    flex-direction: row-reverse;
}

/* Raised like a card; the team's own words sit in the accent tint. */
.bubble[b-krhbk25c7i] {
    margin: 0;
    min-width: 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    background: var(--color-surface-raised);
    box-shadow: var(--elevation-1);
    line-height: 1.4;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* The first bubble of a run points at its author. */
.run-head + .msg .bubble[b-krhbk25c7i] {
    border-top-left-radius: var(--radius-sm);
}

.run.own .bubble[b-krhbk25c7i] {
    background: var(--accent-tint-strong);
}

.run.own .run-head + .msg .bubble[b-krhbk25c7i] {
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-sm);
}

.icon-btn[b-krhbk25c7i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base), box-shadow var(--transition-base), opacity var(--transition-base);
}

    /* Removing is the rare action: it only shows up on the message being pointed at. */
    .icon-btn.delete[b-krhbk25c7i] {
        opacity: 0;
    }

.msg:hover .icon-btn.delete[b-krhbk25c7i],
.icon-btn.delete:focus-visible[b-krhbk25c7i] {
    opacity: 1;
}

/* Rises like every icon button — the red only tints its surface. */
.icon-btn.delete:hover[b-krhbk25c7i] {
    background: linear-gradient(rgba(var(--color-danger-rgb), .16), rgba(var(--color-danger-rgb), .16)), var(--color-surface-raised);
    box-shadow: var(--elevation-1);
    color: var(--color-danger);
}

/* Touch devices have no hover — keep the delete button reachable there. */
@media (hover: none) {
    .icon-btn.delete[b-krhbk25c7i] {
        opacity: 1;
    }
}

/* Empty = a sunken well waiting to be filled. */
.empty[b-krhbk25c7i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-well);
    box-shadow: var(--shadow-inset);
    color: var(--color-text-muted);
    text-align: center;
}

    .empty i[b-krhbk25c7i] {
        font-size: var(--font-size-lg);
        color: var(--color-primary);
        opacity: .7;
    }

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

    .empty .empty-hint[b-krhbk25c7i] {
        font-size: var(--font-size-xs);
    }

/* --- Composer --- */
/* Anchor for the mention menu, which floats over the end of the log. */
.composer-wrap[b-krhbk25c7i] {
    position: relative;
    flex-shrink: 0;
}

.composer[b-krhbk25c7i] {
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4) var(--space-4);
}

    /* Same sunken well as every other field; chat.js grows it with the text. */
    .composer textarea[b-krhbk25c7i] {
        flex: 1;
        min-width: 0;
        min-height: 40px;
        max-height: 160px;
        box-sizing: border-box;
        padding: 10px var(--space-3);
        border: 0;
        border-radius: var(--radius-md);
        background: var(--color-well);
        box-shadow: var(--shadow-inset);
        color: var(--color-text);
        font-size: var(--font-size-sm);
        line-height: 1.4;
        resize: none;
        overflow-y: auto;
        outline: none;
        transition: box-shadow var(--transition-fast);
    }

        .composer textarea:focus[b-krhbk25c7i] {
            box-shadow: var(--shadow-inset), var(--shadow-focus);
        }

        .composer textarea[b-krhbk25c7i]::placeholder {
            color: var(--color-text-muted);
        }

.send[b-krhbk25c7i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    background: var(--color-primary);
    box-shadow: var(--shadow-primary);
    color: var(--color-on-primary);
    cursor: pointer;
    transition: background var(--transition-base), box-shadow var(--transition-base), opacity var(--transition-base);
}

    .send:hover:not(:disabled)[b-krhbk25c7i] {
        background: var(--color-primary-hover);
    }

    .send:disabled[b-krhbk25c7i] {
        opacity: .35;
        box-shadow: none;
        cursor: default;
    }

/* --- Mentions in a message: a small accent chip that links to the media --- */
.mention[b-krhbk25c7i] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    max-width: 100%;
    padding: 0 6px;
    border-radius: var(--radius-sm);
    background: var(--accent-tint);
    color: var(--color-primary);
    font-weight: 500;
    text-decoration: none;
    vertical-align: bottom;
    /* The bubble keeps line breaks; inside the chip only the title counts. */
    white-space: normal;
    transition: background var(--transition-fast), color var(--transition-fast);
}

    .mention:hover[b-krhbk25c7i] {
        background: var(--accent-tint-strong);
        color: var(--color-primary-hover);
    }

.run.own .mention[b-krhbk25c7i] {
    background: rgba(var(--color-primary-rgb), .22);
}

    .run.own .mention:hover[b-krhbk25c7i] {
        background: rgba(var(--color-primary-rgb), .32);
    }

.mention-icon[b-krhbk25c7i] {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}

/* --- Mention menu above the composer (floating material, no frame) --- */
.mention-menu[b-krhbk25c7i] {
    position: absolute;
    z-index: 5;
    left: var(--space-4);
    right: var(--space-4);
    bottom: 100%;
    max-height: 280px;
    overflow-y: auto;
    box-sizing: border-box;
    padding: var(--space-1);
    border-radius: var(--radius-lg);
    background: var(--color-surface-overlay);
    box-shadow: var(--elevation-3);
    animation: mention-menu-in-b-krhbk25c7i .14s ease-out;
}

@keyframes mention-menu-in-b-krhbk25c7i {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
}

.mention-head[b-krhbk25c7i],
.mention-empty[b-krhbk25c7i] {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.mention-head[b-krhbk25c7i] {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.mention-option[b-krhbk25c7i] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background var(--transition-fast);
}

    .mention-option:hover[b-krhbk25c7i] {
        background: var(--surface-hover);
    }

    .mention-option.is-active[b-krhbk25c7i] {
        background: var(--accent-tint);
    }

.mention-dot[b-krhbk25c7i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: var(--color-surface-raised);
    box-shadow: var(--elevation-1);
    color: var(--color-primary);
}

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

    .mention-text > span[b-krhbk25c7i] {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.mention-title[b-krhbk25c7i] {
    font-weight: 500;
}

.mention-type[b-krhbk25c7i] {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}
/* /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: var(--space-4);
    width: min(34rem, 84vw);
}

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

/* What the screen shows — black, like every screen preview; a shadow sets it off
   from the dialog instead of a frame. */
.preview[b-6nvnzsp0zr] {
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .6);
    /* 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: var(--space-3);
    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: var(--space-3);
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.hint[b-6nvnzsp0zr] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

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

@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;
    /* Screens keep their own typeface — the operator UI font must not leak onto
       the screens or into their previews. Templates may still override it. */
    font-family: Roboto, sans-serif;
    color: white;
    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/ModalChannelQrCode.razor.rz.scp.css */
.qr-code[b-gl8al9sl22] {
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    max-width: 26rem;
    margin: 0 auto;
}

/* The white quiet zone is part of the SVG; the radius only softens its corners. */
.qr-code img[b-gl8al9sl22] {
    width: min(260px, 70vw);
    height: auto;
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    box-shadow: var(--elevation-1);
}

.qr-url[b-gl8al9sl22] {
    max-width: 100%;
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-align: center;
    overflow-wrap: anywhere;
    user-select: all;
}

.qr-hint[b-gl8al9sl22] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: var(--color-text);
}

    .qr-hint i[b-gl8al9sl22] {
        margin-top: 3px;
        color: var(--color-warning);
    }
/* /Components/Display/ModalSelectSource.razor.rz.scp.css */
/* The dialog is the highest surface already — the list lies flat on it instead
   of sitting on a darker raised card. */
.source-list[b-cmyz8k5wu3]  ul {
    padding: 0;
    background: transparent;
    box-shadow: none;
}
/* /Components/Display/ModalSourceSettings.razor.rz.scp.css */
.source-settings[b-0hvy1swdhj] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 480px;
    max-width: 580px;
}

@media (max-width: 720px) {
    .source-settings[b-0hvy1swdhj] {
        min-width: 0;
    }
}

.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: var(--space-3) var(--space-1) var(--space-1) 0;
}

/* Nothing to configure: a sunken well, like every empty state. */
.empty-state[b-0hvy1swdhj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-well);
    box-shadow: var(--shadow-inset);
    color: var(--color-text-muted);
    text-align: center;
}

    .empty-state i[b-0hvy1swdhj] {
        font-size: var(--font-size-lg);
        color: var(--color-primary);
        opacity: .7;
    }

    .empty-state p[b-0hvy1swdhj] {
        margin: 0;
        font-size: var(--font-size-sm);
    }
/* /Components/Display/Preview.razor.rz.scp.css */
.preview-card[b-taqcui9u57] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    background: var(--color-surface-raised);
    box-shadow: var(--elevation-1);
}

.preview-head[b-taqcui9u57] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.dot[b-taqcui9u57] {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: var(--color-text-muted);
}

    .dot.online[b-taqcui9u57] {
        background: var(--color-success);
        box-shadow: 0 0 10px rgba(var(--color-success-rgb), .7);
    }

h3[b-taqcui9u57] {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.screens[b-taqcui9u57] {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* The ⋮ menu sits in the head as a small flat icon button that only rises on hover. */
.preview-menu[b-taqcui9u57] {
    display: inline-flex;
    flex-shrink: 0;
}

    .preview-menu[b-taqcui9u57]  .action-button {
        width: 28px;
        height: 28px;
        background: transparent;
        box-shadow: none;
    }

        .preview-menu[b-taqcui9u57]  .action-button:hover:not(:disabled) {
            background: var(--color-surface-raised);
            box-shadow: var(--elevation-1);
            transform: none;
        }

/* The live picture. #000 is the screen itself, not a UI colour. */
.preview-screen[b-taqcui9u57] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    box-sizing: border-box;
    overflow: hidden;
    pointer-events: none;
    border-radius: var(--radius-md);
    background: #000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .6);
    /* Own stacking context: the placements inside carry the z-index from their
       template (OuterDefinitions, 1..n). Without it those values compete with the
       card's chrome and a shown medium paints over the menu. */
    z-index: 0;
    isolation: isolate;
}
/* /Components/Display/PreviewAll.razor.rz.scp.css */
/* The whole panel body scrolls; the side panel itself clips. */
.preview-all[b-47gzxkcgxg] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-4);
    box-sizing: border-box;
}

ul[b-47gzxkcgxg] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Empty = a sunken well waiting to be filled. */
.empty[b-47gzxkcgxg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-well);
    box-shadow: var(--shadow-inset);
    color: var(--color-text-muted);
    text-align: center;
}

    .empty i[b-47gzxkcgxg] {
        font-size: var(--font-size-lg);
        color: var(--color-primary);
        opacity: .7;
    }

    .empty p[b-47gzxkcgxg] {
        margin: 0;
    }

/* Full-width raised button as the last row. */
.add-channel[b-47gzxkcgxg] {
    display: flex;
    flex-shrink: 0;
}

    .add-channel[b-47gzxkcgxg]  .action-button-host {
        display: flex;
        flex: 1;
    }

    .add-channel[b-47gzxkcgxg]  .action-button {
        width: 100%;
    }
/* /Components/Display/PropertyEditors/BooleanEditor.razor.rz.scp.css */
.boolean-editor[b-016dgwtvci] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    cursor: pointer;
    user-select: none;
}

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

/* Same switch as CheckboxField: the track lies sunken like a field, the knob sits
   raised on it. */
.boolean-track[b-016dgwtvci] {
    position: relative;
    flex: 0 0 auto;
    width: 38px;
    height: 22px;
    box-sizing: border-box;
    border-radius: var(--radius-full);
    background: var(--color-well);
    box-shadow: var(--shadow-inset);
    transition: background var(--transition-fast);
}

/* The real checkbox is invisible, so the track carries its keyboard focus. */
.boolean-editor:has(input:focus-visible) .boolean-track[b-016dgwtvci] {
    outline: 2px solid var(--color-primary-hover);
    outline-offset: 2px;
}

.boolean-thumb[b-016dgwtvci] {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: var(--radius-full);
    background: var(--color-text-muted);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
    transition: transform var(--transition-fast), background var(--transition-fast);
}

.boolean-editor:hover .boolean-thumb[b-016dgwtvci] {
    background: var(--color-text);
}

/* On: the well fills with the accent; the inset shadow keeps it sunken. */
.boolean-editor.on .boolean-track[b-016dgwtvci] {
    background: rgba(var(--color-primary-rgb), .55);
}

.boolean-editor.on .boolean-thumb[b-016dgwtvci] {
    transform: translateX(16px);
    background: var(--color-text);
}

.boolean-label[b-016dgwtvci] {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.boolean-editor.on .boolean-label[b-016dgwtvci] {
    color: var(--color-text);
}
/* /Components/Display/PropertyEditors/ColorEditor.razor.rz.scp.css */
.color-editor[b-f7nprlzp8t] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
}

/* The swatch shows the colour itself (inline background); the native picker lies
   invisibly on top of it. It sits raised like a button and lifts on hover. */
.color-swatch[b-f7nprlzp8t] {
    position: relative;
    flex: 0 0 auto;
    width: 44px;
    height: 36px;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: var(--radius-md);
    box-shadow: var(--elevation-1);
    cursor: pointer;
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

    .color-swatch:hover[b-f7nprlzp8t] {
        box-shadow: var(--elevation-2);
        transform: translateY(-1px);
    }

    .color-swatch:focus-within[b-f7nprlzp8t] {
        box-shadow: var(--elevation-1), var(--shadow-focus);
    }

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

.color-hex[b-f7nprlzp8t] {
    flex: 1;
    min-width: 0;
    height: 36px;
    box-sizing: border-box;
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-md);
    background: var(--color-well);
    box-shadow: var(--shadow-inset);
    color: var(--color-text);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    letter-spacing: .05em;
    text-transform: lowercase;
    transition: box-shadow var(--transition-fast);
}

    .color-hex[b-f7nprlzp8t]::placeholder {
        color: var(--color-text-muted);
    }

    .color-hex:focus[b-f7nprlzp8t] {
        outline: none;
        box-shadow: var(--shadow-inset), var(--shadow-focus);
    }

/* Raised icon button; switched on it takes the accent. */
.color-transparent[b-f7nprlzp8t] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    box-sizing: border-box;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    background: var(--color-surface-raised);
    box-shadow: var(--elevation-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

    .color-transparent:hover[b-f7nprlzp8t] {
        box-shadow: var(--elevation-2);
        transform: translateY(-1px);
        color: var(--color-text);
    }

    .color-transparent.active[b-f7nprlzp8t] {
        background: linear-gradient(var(--accent-tint-strong), var(--accent-tint-strong)), var(--color-surface-raised);
        color: var(--color-primary);
    }
/* /Components/Display/PropertyEditors/FontFamilyEditor.razor.rz.scp.css */
/* "Aa" sample in front of each font name, set in that font — a faint lighter chip,
   readable both in the sunken field and in the dropdown. */
[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(--radius-sm);
    background: var(--surface-hover);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

[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 */
/* Segmented control: a sunken well, the chosen weight sits raised in it. */
.font-weight-editor[b-ie0lpzsk1e] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2px;
    flex: 1;
    padding: var(--space-1);
    border-radius: var(--radius-md);
    background: var(--color-well);
    box-shadow: var(--shadow-inset);
}

.weight-option[b-ie0lpzsk1e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    font-family: inherit;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

    .weight-option:hover[b-ie0lpzsk1e] {
        background: var(--surface-hover);
        color: var(--color-text);
    }

    .weight-option.selected[b-ie0lpzsk1e] {
        background: var(--color-surface-raised);
        box-shadow: var(--elevation-1);
        color: var(--color-primary);
    }

.weight-sample[b-ie0lpzsk1e] {
    font-size: var(--font-size-md);
    line-height: 1;
}

.weight-number[b-ie0lpzsk1e] {
    font-family: var(--font-mono);
    font-size: 10px;
    opacity: .8;
}
/* /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: 36px;
    box-sizing: border-box;
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-md);
    background: var(--color-well);
    box-shadow: var(--shadow-inset);
    color: var(--color-text);
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    font-variant-numeric: tabular-nums;
    text-align: right;
    -moz-appearance: textfield;
    transition: box-shadow var(--transition-fast);
}

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

    .length-number[b-427u9ah03z]::placeholder {
        color: var(--color-text-muted);
    }

    .length-number:focus[b-427u9ah03z] {
        outline: none;
        box-shadow: var(--shadow-inset), var(--shadow-focus);
    }

/* Unit switch: segmented control in the same sunken well as the input; the
   chosen unit sits raised in it. */
.length-units[b-427u9ah03z] {
    display: inline-flex;
    flex-direction: row;
    align-items: stretch;
    gap: 2px;
    padding: 3px;
    border-radius: var(--radius-md);
    background: var(--color-well);
    box-shadow: var(--shadow-inset);
}

.length-unit[b-427u9ah03z] {
    min-width: 28px;
    padding: 0 var(--space-2);
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: lowercase;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

    .length-unit:hover[b-427u9ah03z] {
        background: var(--surface-hover);
        color: var(--color-text);
    }

    .length-unit.selected[b-427u9ah03z] {
        background: var(--color-surface-raised);
        box-shadow: var(--elevation-1);
        color: var(--color-primary);
    }
/* /Components/Display/PropertyEditors/NumberEditor.razor.rz.scp.css */
.number-editor[b-a0rxas50au] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
    flex: 1;
    min-width: 0;
}

.number-input[b-a0rxas50au] {
    flex: 0 0 76px;
    height: 36px;
    box-sizing: border-box;
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-md);
    background: var(--color-well);
    box-shadow: var(--shadow-inset);
    color: var(--color-text);
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    font-variant-numeric: tabular-nums;
    text-align: right;
    -moz-appearance: textfield;
    transition: box-shadow var(--transition-fast);
}

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

    .number-input[b-a0rxas50au]::placeholder {
        color: var(--color-text-muted);
    }

    .number-input:focus[b-a0rxas50au] {
        outline: none;
        box-shadow: var(--shadow-inset), var(--shadow-focus);
    }

/* The track is a narrow well that fills with the accent up to the value; the
   knob sits raised on it, like the switch knob. */
.number-slider[b-a0rxas50au] {
    flex: 1;
    min-width: 0;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    border-radius: var(--radius-full);
    background: linear-gradient(to right, var(--color-primary) 0%, var(--color-primary) var(--fill, 0%), var(--color-well) var(--fill, 0%), var(--color-well) 100%);
    box-shadow: var(--shadow-inset);
    outline: none;
    cursor: pointer;
}

    .number-slider:focus-visible[b-a0rxas50au] {
        outline: 2px solid var(--color-primary-hover);
        outline-offset: 6px;
    }

    .number-slider[b-a0rxas50au]::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 16px;
        height: 16px;
        border: 0;
        border-radius: var(--radius-full);
        background: var(--color-text);
        cursor: pointer;
        box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
        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: 0;
        border-radius: var(--radius-full);
        background: var(--color-text);
        cursor: pointer;
        box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
    }
/* /Components/Display/PropertyEditors/PropertyRow.razor.rz.scp.css */
/* One design property as a small block, a step darker than the dialog. A changed
   value takes on an accent tint and glows from the inside — no frame. */
.property-row[b-f5p1qr0dv3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: 11px 13px;
    border-radius: var(--radius-md);
    background: var(--color-surface-raised);
    transition: background var(--transition-base), box-shadow var(--transition-base);
}

    .property-row:hover[b-f5p1qr0dv3] {
        background: linear-gradient(var(--surface-hover), var(--surface-hover)), var(--color-surface-raised);
    }

    .property-row.is-modified[b-f5p1qr0dv3] {
        background: linear-gradient(var(--accent-tint), var(--accent-tint)), var(--color-surface-raised);
        box-shadow: inset 0 0 20px rgba(var(--color-primary-rgb), .28);
    }

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

.property-label[b-f5p1qr0dv3] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text);
}

    .property-label i[b-f5p1qr0dv3] {
        width: 14px;
        font-size: var(--font-size-xs);
        text-align: center;
        color: var(--color-text-muted);
    }

.is-modified .property-label i[b-f5p1qr0dv3] {
    color: var(--color-primary);
}

.property-description[b-f5p1qr0dv3] {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.property-body[b-f5p1qr0dv3] {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: var(--space-2);
}

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

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

/* Reset as a small icon button; only meaningful once the value was changed. */
.property-reset[b-f5p1qr0dv3] {
    flex: 0 0 auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base), box-shadow var(--transition-base), opacity var(--transition-base), transform .2s ease;
}

    .property-reset:not(:disabled):hover[b-f5p1qr0dv3] {
        background: var(--color-surface-raised);
        box-shadow: var(--elevation-1);
        color: var(--color-text);
    }

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

    .property-reset:disabled[b-f5p1qr0dv3] {
        opacity: .25;
        cursor: default;
    }
/* /Components/Display/PropertyEditors/SelectEditor.razor.rz.scp.css */
[b-zsxw2bd14o] .select-option-icon {
    width: 14px;
    text-align: center;
    color: var(--color-text-muted);
}
/* /Components/Display/PropertyEditors/TextAlignEditor.razor.rz.scp.css */
/* Segmented control: a sunken well, the chosen alignment sits raised in it. */
.text-align-editor[b-8h8z8ywanx] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    flex: 1;
    padding: var(--space-1);
    border-radius: var(--radius-md);
    background: var(--color-well);
    box-shadow: var(--shadow-inset);
}

.align-option[b-8h8z8ywanx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

    .align-option:hover[b-8h8z8ywanx] {
        background: var(--surface-hover);
        color: var(--color-text);
    }

    .align-option.selected[b-8h8z8ywanx] {
        background: var(--color-surface-raised);
        box-shadow: var(--elevation-1);
        color: var(--color-primary);
    }
/* /Components/Display/PropertyEditors/TextEditor.razor.rz.scp.css */
.text-editor[b-0kbe4ul2kx] {
    flex: 1;
    width: 100%;
    height: 36px;
    box-sizing: border-box;
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-md);
    background: var(--color-well);
    box-shadow: var(--shadow-inset);
    color: var(--color-text);
    font-family: inherit;
    font-size: var(--font-size-sm);
    transition: box-shadow var(--transition-fast);
}

    .text-editor:focus[b-0kbe4ul2kx] {
        outline: none;
        box-shadow: var(--shadow-inset), var(--shadow-focus);
    }

    .text-editor[b-0kbe4ul2kx]::placeholder {
        color: var(--color-text-muted);
    }
/* /Components/Display/ShownSourcesHistory.razor.rz.scp.css */
/* The whole panel body scrolls; the side panel itself clips. */
.shown-sources-history[b-3t3ihb8wnl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-4);
    box-sizing: border-box;
}

.day-head[b-3t3ihb8wnl] {
    display: flex;
    align-items: center;
    height: 30px;
    margin: 0 0 var(--space-1);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-text-muted);
}

.timeline[b-3t3ihb8wnl] {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* One step of the timeline: raised dot + text + actions. No connecting line —
   the dots stand on their own and the spacing carries the sequence. */
.tl[b-3t3ihb8wnl] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-1);
    padding-bottom: 18px;
}

.row-open[b-3t3ihb8wnl] {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

    .row-open:hover .title[b-3t3ihb8wnl] {
        color: var(--color-primary);
    }

.tl-dot[b-3t3ihb8wnl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    box-sizing: border-box;
    border-radius: var(--radius-full);
    background: var(--color-surface-raised);
    box-shadow: var(--elevation-1);
    color: var(--color-primary);
    font-size: 11px;
}

.tl-icon[b-3t3ihb8wnl] {
    width: 12px;
    height: 12px;
    background-color: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}

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

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

    .text .title[b-3t3ihb8wnl] {
        font-weight: 500;
        transition: color var(--transition-fast);
    }

    .text .subtitle[b-3t3ihb8wnl] {
        font-family: var(--font-mono);
        font-size: var(--font-size-xs);
        color: var(--color-text-muted);
    }

.icon-btn[b-3t3ihb8wnl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base), box-shadow var(--transition-base), opacity var(--transition-base);
}

    .icon-btn:hover[b-3t3ihb8wnl] {
        background: var(--color-surface-raised);
        box-shadow: var(--elevation-1);
        color: var(--color-text);
    }

    /* Removing is the rare action: it only shows up on the row being pointed at. */
    .icon-btn.delete[b-3t3ihb8wnl] {
        opacity: 0;
    }

.tl:hover .icon-btn.delete[b-3t3ihb8wnl],
.icon-btn.delete:focus-visible[b-3t3ihb8wnl] {
    opacity: 1;
}

/* Rises like the other icon buttons — the red only tints its surface. */
.icon-btn.delete:hover[b-3t3ihb8wnl] {
    background: linear-gradient(rgba(var(--color-danger-rgb), .16), rgba(var(--color-danger-rgb), .16)), var(--color-surface-raised);
    color: var(--color-danger);
}

/* Touch devices have no hover — keep the delete button reachable there. */
@media (hover: none) {
    .icon-btn.delete[b-3t3ihb8wnl] {
        opacity: 1;
    }
}

/* Empty = a sunken well waiting to be filled. */
.empty[b-3t3ihb8wnl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-well);
    box-shadow: var(--shadow-inset);
    color: var(--color-text-muted);
    text-align: center;
}

    .empty i[b-3t3ihb8wnl] {
        font-size: var(--font-size-lg);
        color: var(--color-primary);
        opacity: .7;
    }

    .empty p[b-3t3ihb8wnl] {
        margin: 0;
    }
/* /Components/Display/ShownSourcesList.razor.rz.scp.css */
/* The whole panel body scrolls; the side panel itself clips. */
.shown-sources-list[b-in24b6adgz] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-4);
    box-sizing: border-box;
}

/* Emergency stop as a full-width destructive row. The generic Button brings the
   colours; only the size is set here. */
.hide-all[b-in24b6adgz] {
    display: flex;
    flex-shrink: 0;
}

    .hide-all[b-in24b6adgz]  .button-container {
        flex: 1;
        width: 100%;
        height: 44px;
    }

    .hide-all[b-in24b6adgz]  .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
    }

.list-count[b-in24b6adgz] {
    padding: var(--space-1) 2px 0;
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* Every shown medium is its own raised card; space separates them. */
.list-card[b-in24b6adgz] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.row[b-in24b6adgz] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 52px;
    box-sizing: border-box;
    padding: var(--space-2) 6px var(--space-2) 10px;
    border-radius: var(--radius-lg);
    background: var(--color-surface-raised);
    box-shadow: var(--elevation-1);
    transition: box-shadow var(--transition-base);
}

    .row:hover[b-in24b6adgz] {
        box-shadow: var(--elevation-2);
    }

.row-open[b-in24b6adgz] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.chip[b-in24b6adgz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--accent-tint);
    color: var(--color-primary);
    font-size: 13px;
}

.chip-icon[b-in24b6adgz] {
    width: 15px;
    height: 15px;
    background-color: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}

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

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

    .text .title[b-in24b6adgz] {
        font-weight: 500;
    }

    .text .subtitle[b-in24b6adgz] {
        font-family: var(--font-mono);
        font-size: var(--font-size-xs);
        color: var(--color-text-muted);
    }

.hide-btn[b-in24b6adgz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base), box-shadow var(--transition-base);
}

    .hide-btn:hover[b-in24b6adgz] {
        background: rgba(var(--color-danger-rgb), .16);
        box-shadow: var(--elevation-1);
        color: var(--color-danger);
    }

/* Empty = a sunken well waiting to be filled. */
.empty[b-in24b6adgz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-well);
    box-shadow: var(--shadow-inset);
    color: var(--color-text-muted);
    text-align: center;
}

    .empty i[b-in24b6adgz] {
        font-size: var(--font-size-lg);
        color: var(--color-primary);
        opacity: .7;
    }

    .empty p[b-in24b6adgz] {
        margin: 0;
    }
/* /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;
    gap: var(--space-3);
    height: 100%;
    min-height: 400px;
    box-sizing: border-box;
}

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

/* Live bar: the editor writes straight to the screen — tinted and glowing like
   everything that is on the screen right now. */
.live-indicator[b-c9bi57rw22] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    /* The tint lies on a raised surface, like the footer of a live tile. */
    background: linear-gradient(var(--accent-tint), var(--accent-tint)), var(--color-surface-raised);
    box-shadow: var(--shadow-glow);
    color: var(--color-text);
    font-size: var(--font-size-sm);
}

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

.live-tag[b-c9bi57rw22] {
    flex-shrink: 0;
    padding: 2px 6px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .08em;
}

[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: .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. The Dashboard
   brings the bottom padding. */
.editor-content[b-a0wufvqlt6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-height: 0;
    overflow: auto;
    /* A scroll container clips what is drawn outside it: the padding is the room
       for the tiles' shadows and the live glow. The negative margin hands it back
       to the Dashboard's padding, so the tiles stay where they were. */
    margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-4)) 0;
    padding: var(--space-2) var(--space-4) var(--space-4);
}
/* /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;
    /* A scroll container clips what is drawn outside it: the padding is the room
       for the tiles' shadows and the live glow. The negative margin hands it back
       to the Dashboard's padding, so the tiles stay where they were. */
    margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-4)) 0;
    padding: var(--space-2) var(--space-4) var(--space-4);
}

/* Section heads: small, uppercase, muted. */
.section-title[b-6lhjzle4x6] {
    margin: var(--space-5) 0 var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-text-muted);
}

    /* 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;
    }

/* --- Running slideshow: it is on the screen, so the raised bar glows --- */
.slideshow-bar[b-6lhjzle4x6] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: 10px 10px 10px var(--space-3);
    margin-bottom: var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--color-surface-raised);
    box-shadow: var(--shadow-glow);
}

.bar-chip[b-6lhjzle4x6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--accent-tint);
    color: var(--color-primary);
}

.slideshow-info[b-6lhjzle4x6] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 160px;
    min-width: 0;
}

.slideshow-title[b-6lhjzle4x6] {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.slide-counter[b-6lhjzle4x6] {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The fill runs in a sunken track. */
.slideshow-progress[b-6lhjzle4x6] {
    flex: 0 1 160px;
    height: 4px;
    border-radius: var(--radius-full);
    background: var(--color-well);
    box-shadow: var(--shadow-inset);
    overflow: hidden;
}

.slideshow-progress-fill[b-6lhjzle4x6] {
    height: 100%;
    background: var(--color-primary);
    transition: width var(--transition-base);
}

.slideshow-controls[b-6lhjzle4x6] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

    /* Icon buttons lie flat on the bar and rise on hover; play/pause carries the
       accent. */
    .slideshow-controls[b-6lhjzle4x6]  .action-button {
        background: transparent;
        box-shadow: none;
    }

        .slideshow-controls[b-6lhjzle4x6]  .action-button:hover:not(:disabled) {
            background: var(--color-surface-raised);
            box-shadow: var(--elevation-1);
        }

        .slideshow-controls[b-6lhjzle4x6]  .action-button.accent {
            background: var(--accent-tint);
            color: var(--color-primary);
        }

            /* Accent and danger rise like the others — the colour only tints the surface. */
            .slideshow-controls[b-6lhjzle4x6]  .action-button.accent:hover:not(:disabled) {
                background: linear-gradient(var(--accent-tint-strong), var(--accent-tint-strong)), var(--color-surface-raised);
                color: var(--color-primary);
            }

        .slideshow-controls[b-6lhjzle4x6]  .action-button.danger:hover:not(:disabled) {
            background: linear-gradient(rgba(var(--color-danger-rgb), .15), rgba(var(--color-danger-rgb), .15)), var(--color-surface-raised);
            color: var(--color-danger);
        }

/* Space, not a rule, between stepping and hiding. */
.controls-separator[b-6lhjzle4x6] {
    flex-shrink: 0;
    width: var(--space-2);
}

/* Stays secondary next to the controls, but keeps a tablet-sized hit area. */
.slideshow-controls[b-6lhjzle4x6]  .shortcut-hint .trigger {
    width: 34px;
    height: 34px;
}
/* /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. It floats above
   them like a toast — overlay surface and shadow, no frame. */
.upload-progress[b-nhjz2bkbkk] {
    position: sticky;
    top: 0;
    z-index: 3;
    display: grid;
    gap: var(--space-2);
    padding: 10px var(--space-3);
    margin-bottom: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-surface-overlay);
    box-shadow: var(--elevation-2);
}

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

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

/* 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;
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* The fill runs in a sunken track. */
.upload-bar[b-nhjz2bkbkk] {
    height: 4px;
    border-radius: var(--radius-full);
    background: var(--color-well);
    box-shadow: var(--shadow-inset);
    overflow: hidden;
}

.upload-bar-fill[b-nhjz2bkbkk] {
    height: 100%;
    background-color: var(--color-primary);
    transition: width var(--transition-base);
}

/* 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, var(--color-primary-hover) 0 25%, transparent 25% 50%, var(--color-primary-hover) 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;
    /* A scroll container clips what is drawn outside it: the padding is the room
       for the tiles' shadows, the negative margin hands it back to the dialog's
       padding. */
    margin: calc(-1 * var(--space-3));
    padding: var(--space-3);
}

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

/* Same tile language as the overview: raised tile with a shadow, picture on top,
   name below. Hover lifts it; a picked one keeps a soft accent halo. */
.image-option[b-gd36avk2l8] {
    position: relative;
    display: grid;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--color-surface-raised);
    box-shadow: var(--elevation-1);
    color: var(--color-text);
    font: inherit;
    cursor: pointer;
    text-align: left;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

    .image-option:hover[b-gd36avk2l8] {
        box-shadow: var(--elevation-2);
        transform: translateY(-2px);
    }

    .image-option.selected[b-gd36avk2l8] {
        box-shadow: var(--elevation-1), 0 0 18px rgba(var(--color-primary-rgb), .22);
    }

        .image-option.selected:hover[b-gd36avk2l8] {
            box-shadow: var(--elevation-2), 0 0 18px rgba(var(--color-primary-rgb), .22);
        }

    /* contain: picking the right picture means seeing all of it, not a crop. The
       letterbox sits one step below the tile, so no line is needed above the name. */
    .image-option img[b-gd36avk2l8] {
        display: block;
        width: 100%;
        aspect-ratio: 4 / 3;
        object-fit: contain;
        background: var(--color-surface);
    }

.caption[b-gd36avk2l8] {
    padding: var(--space-2) 10px;
    font-size: var(--font-size-xs);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.image-option.selected .caption[b-gd36avk2l8] {
    background: var(--accent-tint);
    color: var(--color-primary);
}

.badge[b-gd36avk2l8] {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-size: 11px;
}

.empty[b-gd36avk2l8] {
    margin: 0;
    color: var(--color-text-muted);
}
/* /Components/Images/ModalSlideshowSettings.razor.rz.scp.css */
.slideshow-settings[b-1lagkg3j0i] {
    display: grid;
    gap: var(--space-3);
    min-width: 26rem;
    max-width: 32rem;
}

/* One setting per block: icon chip, label + hint, control on the right. A block
   inside the dialog sits one surface step below it — no frame. */
.setting[b-1lagkg3j0i] {
    display: grid;
    gap: var(--space-3);
    padding: 14px var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--color-surface-raised);
}

.setting-head[b-1lagkg3j0i] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

    .setting-head > i[b-1lagkg3j0i] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 32px;
        height: 32px;
        border-radius: var(--radius-md);
        background: var(--accent-tint);
        color: var(--color-primary);
        font-size: 13px;
    }

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

.setting-title[b-1lagkg3j0i] {
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.setting-hint[b-1lagkg3j0i] {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.duration[b-1lagkg3j0i] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: none;
}

    .duration[b-1lagkg3j0i]  input[type="number"] {
        width: 4.5rem;
        text-align: center;
        font-family: var(--font-mono);
    }

.unit[b-1lagkg3j0i] {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

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

/* Chips: a faint fill instead of an outline; the picked one is filled with the
   accent and casts its coloured lift. */
.preset[b-1lagkg3j0i] {
    min-width: 3rem;
    height: 28px;
    padding: 0 10px;
    font: inherit;
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    background: var(--surface-hover);
    border: 0;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
}

    .preset:hover[b-1lagkg3j0i] {
        background: var(--accent-tint);
        color: var(--color-primary);
    }

    .preset.active[b-1lagkg3j0i] {
        background: var(--color-primary);
        box-shadow: var(--shadow-primary);
        color: var(--color-on-primary);
    }
/* /Components/Layout/AuthLayout.razor.rz.scp.css */
/* The sign-in is the first surface anyone sees: lifted and friendlier than the
   near-black app (same look as Loqui-Note's AuthShell). The few colours that
   exist only here are named once on the root instead of scattered below. */
.auth-layout[b-ahknyqdg27] {
    --surface-auth: #1b2836;
    --auth-bg-top: #16222f;
    --auth-bg-mid: #101923;
    --auth-text-soft: #9aa8b6;
    --auth-text-label: #c4cfda;
    /* The one place with light input fields — they read as "type here" at a glance. */
    --auth-field-bg: #f2f6fa;
    --auth-field-text: #111;
    --auth-field-placeholder: #5b6673;
    /* No frame on the light fields: a faint inner shadow sets them into the card. */
    --shadow-auth-field: inset 0 1px 3px rgba(0, 0, 0, .25);
    --radius-auth: 20px;
    --shadow-auth: 0 24px 60px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .05);
    height: 100%;
    width: 100%;
    /* Flex + margin:auto on the card: centred while it fits, scrollable from the
       top when it does not (align-items:center would cut off the head). */
    display: flex;
    padding: var(--space-5);
    box-sizing: border-box;
    overflow: auto;
    background:
        radial-gradient(80% 55% at 50% 18%, rgba(var(--color-primary-rgb), .22), transparent 70%),
        linear-gradient(180deg, var(--auth-bg-top) 0%, var(--auth-bg-mid) 55%, var(--color-bg) 100%);
    color: var(--color-text);
}

.auth-card[b-ahknyqdg27] {
    width: 100%;
    max-width: 420px;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
    padding: 36px 36px var(--space-6);
    border-radius: var(--radius-auth);
    background: var(--surface-auth);
    box-shadow: var(--shadow-auth);
}

/* --- Brand: logo, name, tagline --- */
.auth-head[b-ahknyqdg27] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    text-align: center;
}

.auth-logo[b-ahknyqdg27] {
    width: 56px;
    height: 56px;
    object-fit: contain;
    /* Gentle breathing; the global reduced-motion rule stops it. */
    animation: auth-breathe-b-ahknyqdg27 2s ease-in-out infinite alternate;
}

@keyframes auth-breathe-b-ahknyqdg27 {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.08);
    }
}

.auth-brand[b-ahknyqdg27] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.auth-brand-title[b-ahknyqdg27] {
    color: var(--color-primary);
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .25rem;
}

.auth-brand-subtitle[b-ahknyqdg27] {
    color: var(--auth-text-soft);
    font-size: var(--font-size-sm);
}

/* Space, not a rule, between brand and form. */
.auth-body[b-ahknyqdg27] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: var(--space-2);
}

/* --- Page content: the pages render into @Body, so their markup needs ::deep --- */
.auth-body[b-ahknyqdg27]  h1 {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 600;
    line-height: 1.3;
}

.auth-body[b-ahknyqdg27]  .auth-intro {
    margin: var(--space-1) 0 0;
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: var(--auth-text-soft);
}

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

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

.auth-body[b-ahknyqdg27]  .auth-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

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

.auth-body[b-ahknyqdg27]  .form-field-label {
    font-size: var(--font-size-sm);
    color: var(--auth-text-label);
}

/* The selector chain (incl. the :not() pair) outranks the generic FormField input rules. */
.auth-body[b-ahknyqdg27]  .auth-field .form-field input:not([type="checkbox"]):not([type="radio"]) {
    width: 100%;
    height: 42px;
    box-sizing: border-box;
    padding: 0 14px;
    border: 0;
    border-radius: var(--radius-md);
    background: var(--auth-field-bg);
    color: var(--auth-field-text);
    font-size: 15px;
    outline: none;
    box-shadow: var(--shadow-auth-field);
    transition: box-shadow var(--transition-fast);
}

    .auth-body[b-ahknyqdg27]  .auth-field .form-field input:not([type="checkbox"]):not([type="radio"]):hover {
        background: var(--auth-field-bg);
    }

    /* Focus lights the field up in the accent instead of drawing a frame. */
    .auth-body[b-ahknyqdg27]  .auth-field .form-field input:not([type="checkbox"]):not([type="radio"]):focus {
        background: var(--auth-field-bg);
        box-shadow: var(--shadow-auth-field), var(--shadow-focus);
    }

    .auth-body[b-ahknyqdg27]  .auth-field .form-field input::placeholder {
        color: var(--auth-field-placeholder);
        font-style: normal;
    }

    /* Validation glows red instead of the global outline; focused, the glow
       gets a firmer edge so focus stays visible on an invalid field. */
    .auth-body[b-ahknyqdg27]  .auth-field .form-field input:not([type="checkbox"]):not([type="radio"]).invalid {
        outline: none;
        box-shadow: var(--shadow-auth-field), 0 0 14px rgba(var(--color-danger-rgb), .5);
    }

        .auth-body[b-ahknyqdg27]  .auth-field .form-field input:not([type="checkbox"]):not([type="radio"]).invalid:focus {
            box-shadow: var(--shadow-auth-field), 0 0 0 3px rgba(var(--color-danger-rgb), .45), 0 0 14px rgba(var(--color-danger-rgb), .5);
        }

    .auth-body[b-ahknyqdg27]  .auth-field .form-field input:not([type="checkbox"]):not([type="radio"]).valid.modified {
        outline: none;
    }

    /* Browser autofill would paint the fields yellow; the fill colour can only be
       overridden with an inset shadow (the engine ignores background). The :not()
       pair lets these outrank the field rules above, which reset box-shadow. */
    .auth-body[b-ahknyqdg27]  .auth-field .form-field input:not([type="checkbox"]):not([type="radio"]):-webkit-autofill,
    .auth-body[b-ahknyqdg27]  .auth-field .form-field input:not([type="checkbox"]):not([type="radio"]):-webkit-autofill:hover {
        -webkit-text-fill-color: var(--auth-field-text);
        box-shadow: var(--shadow-auth-field), inset 0 0 0 1000px var(--auth-field-bg);
    }

    .auth-body[b-ahknyqdg27]  .auth-field .form-field input:not([type="checkbox"]):not([type="radio"]):-webkit-autofill:focus {
        -webkit-text-fill-color: var(--auth-field-text);
        box-shadow: var(--shadow-auth-field), var(--shadow-focus), inset 0 0 0 1000px var(--auth-field-bg);
    }

/* "Angemeldet bleiben" as a switch — pure CSS, so the POST form keeps sending
   the native checkbox value. The input stays focusable, only visually hidden. */
.auth-body[b-ahknyqdg27]  .auth-check {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    font-size: var(--font-size-sm);
    color: var(--auth-text-label);
}

    .auth-body[b-ahknyqdg27]  .auth-check input {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: 0;
        opacity: 0;
    }

/* Track sunk into the card as a well, knob raised above it. */
.auth-body[b-ahknyqdg27]  .auth-switch {
    position: relative;
    flex-shrink: 0;
    width: 38px;
    height: 22px;
    box-sizing: border-box;
    border-radius: var(--radius-full);
    background: var(--color-well);
    box-shadow: var(--shadow-inset);
    transition: background var(--transition-base);
}

    .auth-body[b-ahknyqdg27]  .auth-switch::after {
        content: "";
        position: absolute;
        top: 3px;
        left: 3px;
        width: 16px;
        height: 16px;
        border-radius: var(--radius-full);
        background: var(--color-text-muted);
        box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
        transition: transform var(--transition-base), background var(--transition-base);
    }

.auth-body[b-ahknyqdg27]  .auth-check input:checked + .auth-switch {
    background: var(--color-primary);
}

    .auth-body[b-ahknyqdg27]  .auth-check input:checked + .auth-switch::after {
        transform: translateX(16px);
        background: var(--color-text);
    }

.auth-body[b-ahknyqdg27]  .auth-check input:focus-visible + .auth-switch {
    outline: 2px solid var(--color-primary-hover);
    outline-offset: 2px;
}

.auth-body[b-ahknyqdg27]  .auth-hint {
    margin: -6px 0 0;
    font-size: var(--font-size-xs);
    color: var(--auth-text-soft);
}

.auth-body[b-ahknyqdg27]  .auth-error {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px var(--space-3);
    border-radius: var(--radius-md);
    /* Tinted fill only — the colour carries it, no frame. */
    background: rgba(var(--color-danger-rgb), .18);
    font-size: var(--font-size-sm);
    line-height: 1.4;
}

    .auth-body[b-ahknyqdg27]  .auth-error i {
        margin-top: 2px;
        color: var(--color-danger);
    }

/* The logo gradient as the one filled button; dark text is the only readable one on it. */
.auth-body[b-ahknyqdg27]  .auth-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 46px;
    margin-top: 6px;
    border: none;
    border-radius: var(--radius-md);
    background: linear-gradient(145deg, var(--color-primary-hover), var(--color-primary));
    color: var(--color-on-primary);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(var(--color-primary-rgb), .18);
    transition: filter var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

    .auth-body[b-ahknyqdg27]  .auth-submit:hover {
        filter: brightness(1.05);
        box-shadow: 0 10px 28px rgba(var(--color-primary-rgb), .28);
    }

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

.auth-body[b-ahknyqdg27]  .auth-secondary {
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--auth-text-soft);
}

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

        .auth-body[b-ahknyqdg27]  .auth-secondary a:hover {
            color: var(--color-primary-hover);
        }

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

@media (max-width: 480px) {
    .auth-layout[b-ahknyqdg27] {
        padding: var(--space-3);
    }

    .auth-card[b-ahknyqdg27] {
        padding: var(--space-5) 20px;
    }

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

#blazor-error-ui[b-ahknyqdg27] {
    color-scheme: light only;
    background: lightyellow;
    color: #111;
    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] {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr;
    background: var(--color-bg);
    isolation: isolate;
}

    /* Ambient shimmer at the top — so faint it only livens the surface up. */
    .layout[b-6mjxd7leva]::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: -1;
        background: radial-gradient(120% 60% at 50% 0%, rgba(var(--color-primary-rgb), .05), transparent 70%);
    }

.layout-top[b-6mjxd7leva] {
    position: relative;
    z-index: 3;
}

.layout-center[b-6mjxd7leva] {
    display: grid;
    /* navigation | content | side panel + rail */
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 0;
    overflow: hidden;
}

/* Navigation and side panel are raised columns: they cast their shadow onto the
   content between them instead of being cut off by a line. */
.layout-center-left[b-6mjxd7leva] {
    grid-column: 1;
    position: relative;
    z-index: 2;
    min-height: 0;
    display: flex;
}

.layout-center-content[b-6mjxd7leva] {
    grid-column: 2;
    position: relative;
    z-index: 1;
    display: grid;
    min-width: 0;
    min-height: 0;
    overflow: auto;
}

    /* Content that covers the window by itself (.app-fullscreen — the sheet
       fullscreen where the browser has no Fullscreen API) has to rise above the
       title bar and the side columns; its z-index only counts inside this column. */
    .layout:has(.app-fullscreen) .layout-center-content[b-6mjxd7leva] {
        z-index: 4;
    }

/* The side panel decides its own visibility and animation (RightSidebar.razor.css):
   below 1280px it slides in over the content, out of this column. */
.layout-center-right[b-6mjxd7leva] {
    grid-column: 3;
    display: flex;
    position: relative;
    z-index: 2;
    min-height: 0;
    background: var(--color-surface);
    box-shadow: var(--shadow-side);
}

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

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

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


#blazor-error-ui[b-6mjxd7leva] {
    color-scheme: light only;
    background: lightyellow;
    color: #111;
    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/PrintLayout.razor.rz.scp.css */
.print-layout[b-52jbmtar3q] {
    min-height: 100%;
}

/* Same strip as in the other layouts. */
#blazor-error-ui[b-52jbmtar3q] {
    color-scheme: light only;
    background: lightyellow;
    color: #111;
    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-52jbmtar3q] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

@media print {
    #blazor-error-ui[b-52jbmtar3q] {
        display: none !important;
    }
}
/* /Components/Layout/RightSidebar.razor.rz.scp.css */
/* --- Panel ---
   On wide screens a column beside the content; below 1280px (tablets) it is folded
   away unless the user opens it, and then it slides in over the content instead of
   squeezing it. Either way it opens and closes through its width while head and body
   keep theirs, so the content slides in under the rail instead of reflowing on every
   frame. Never display:none, because that cannot be animated — the open state is
   published as --view-open for checkBeamView.isVisible instead. */
.side-panel[b-fvcbloa23c] {
    --side-panel-w: var(--layout-right-width, 340px);
    --view-open: 1;
    position: relative;
    width: var(--side-panel-w);
    flex-shrink: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* visibility stays "visible" until a closing transition has ended. */
    transition: width var(--transition-slide), visibility var(--transition-slide);
}

    /* Dragging the handle: the width follows the pointer, it does not ease after it. */
    .side-panel:has(.layout-resize-handle.is-dragging)[b-fvcbloa23c] {
        transition: none;
    }

    .side-panel.is-closed[b-fvcbloa23c] {
        --view-open: 0;
        width: 0;
        visibility: hidden;
    }

@media (max-width: 1279px) {
    .side-panel[b-fvcbloa23c] {
        --side-panel-w: min(var(--layout-right-width, 340px), calc(100vw - var(--RailWidth)));
        position: absolute;
        top: 0;
        bottom: 0;
        /* Left of the rail, which is all that is left of the column. */
        right: 100%;
        background: var(--color-surface);
        box-shadow: var(--shadow-side);
        /* The shadow falls onto the content, not onto the rail beside it. */
        clip-path: inset(0 0 0 -48px);
    }

        .side-panel:not(.is-open)[b-fvcbloa23c] {
            --view-open: 0;
            width: 0;
            visibility: hidden;
        }
}

/* Sits on the left edge of the panel; invisible until hovered. */
.layout-resize-handle[b-fvcbloa23c] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 6px;
    cursor: ew-resize;
    background: transparent;
    transition: background var(--transition-base);
    user-select: none;
    touch-action: none;
}

    .layout-resize-handle:hover[b-fvcbloa23c],
    .layout-resize-handle.is-dragging[b-fvcbloa23c] {
        background: var(--accent-tint-strong);
    }

.side-panel-head[b-fvcbloa23c] {
    width: var(--side-panel-w);
    height: var(--shell-header-h);
    box-sizing: border-box;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: 0 var(--space-2) 0 var(--space-4);
    font-weight: 600;
}

.side-panel-title[b-fvcbloa23c] {
    animation: side-panel-swap-b-fvcbloa23c .22s cubic-bezier(.16, 1, .3, 1);
}

    .side-panel-title i[b-fvcbloa23c] {
        margin-right: var(--space-2);
        color: var(--color-primary);
    }

.side-panel-hide[b-fvcbloa23c] {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base), box-shadow var(--transition-base);
}

    /* Rises one surface step above the panel head. */
    .side-panel-hide:hover[b-fvcbloa23c] {
        background: var(--color-surface-overlay);
        box-shadow: var(--elevation-1);
        color: var(--color-text);
    }

.side-panel-body[b-fvcbloa23c] {
    width: var(--side-panel-w);
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* Re-created on every tab switch (@key), so the new tab fades in. */
    animation: side-panel-swap-b-fvcbloa23c .22s cubic-bezier(.16, 1, .3, 1);
}

@keyframes side-panel-swap-b-fvcbloa23c {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
}

/* --- Rail --- */
.right-rail[b-fvcbloa23c] {
    position: relative;
    width: var(--RailWidth);
    flex-shrink: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    /* Set apart from the panel by a slightly darker floor instead of a rule. */
    background: rgba(0, 0, 0, .14);
    /* The first button sits centred in the 48px header line of the other columns. */
    padding: calc((var(--shell-header-h) - 40px) / 2) var(--space-2) var(--space-2);
}

/* The raised surface behind the active button. Buttons are 40px with a --space-2
   gap, so the tab's index alone gives its place. */
.rail-marker[b-fvcbloa23c] {
    --rail-y: calc(var(--rail-index, 0) * (40px + var(--space-2)));
    position: absolute;
    top: calc((var(--shell-header-h) - 40px) / 2);
    left: calc(50% - 20px);
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--color-surface-raised);
    box-shadow: var(--elevation-1);
    pointer-events: none;
    transform: translateY(var(--rail-y));
    transition: transform var(--transition-slide), opacity var(--transition-slide);
}

    /* With the panel goes the marker — and the accent of the active button. */
    .side-panel.is-closed ~ .right-rail .rail-marker[b-fvcbloa23c] {
        opacity: 0;
        transform: translateY(var(--rail-y)) scale(.6);
    }

    .side-panel.is-closed ~ .right-rail .rail-button.active:not(:hover)[b-fvcbloa23c] {
        color: var(--color-text-muted);
    }

@media (max-width: 1279px) {
    .side-panel:not(.is-open) ~ .right-rail .rail-marker[b-fvcbloa23c] {
        opacity: 0;
        transform: translateY(var(--rail-y)) scale(.6);
    }

    .side-panel:not(.is-open) ~ .right-rail .rail-button.active:not(:hover)[b-fvcbloa23c] {
        color: var(--color-text-muted);
    }
}

.rail-button[b-fvcbloa23c] {
    /* Above the marker. */
    position: relative;
    z-index: 1;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-muted);
    font-size: 16px;
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base), box-shadow var(--transition-base);
}

    .rail-button:hover[b-fvcbloa23c] {
        color: var(--color-text);
    }

    .rail-button.active[b-fvcbloa23c] {
        color: var(--color-primary);
    }

.rail-badge[b-fvcbloa23c] {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    box-sizing: border-box;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}
/* /Components/LiveVideo/LiveVideoDisplay.razor.rz.scp.css */
/* Screen output: no UI tokens here — the operator design must never reach the screens. */
.live-video[b-hq65vr0eit] {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.live-video-layer[b-hq65vr0eit] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: var(--video-fit, contain);
    object-position: center;
    background: transparent;
}

/* The front layer appears with the first frame of its stream (class set by liveVideo.js),
   over the bridge picture behind it. */
.live-video-layer.front[b-hq65vr0eit] {
    opacity: 0;
    transition: opacity var(--animation-duration, 400ms) ease;
}

.live-video.is-ready .live-video-layer.front[b-hq65vr0eit] {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .live-video-layer.front[b-hq65vr0eit] {
        transition: none;
    }
}
/* /Components/LiveVideo/LiveVideoMain.razor.rz.scp.css */
.live-video-page[b-l8wn2f82vm] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Number, status and facts sit on the picture, at the bottom, readable on any image. */
.tile-overlay[b-l8wn2f82vm] {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: linear-gradient(transparent, var(--color-scrim));
    color: var(--color-text);
    text-align: left;
    pointer-events: none;
}

.tile-number[b-l8wn2f82vm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    box-sizing: border-box;
    border-radius: var(--radius-sm);
    background: var(--color-scrim);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.tile-status[b-l8wn2f82vm] {
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: rgba(var(--color-warning-rgb), .85);
    color: var(--color-on-primary);
    font-size: var(--font-size-xs);
    font-weight: 600;
    white-space: nowrap;
}

.tile-facts[b-l8wn2f82vm] {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.keyboard-hint[b-l8wn2f82vm] {
    display: flex;
    align-items: center;
}
/* /Components/LiveVideo/LiveVideoPreview.razor.rz.scp.css */
.live-video-preview[b-kb3zsu8mam] {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

    .live-video-preview video[b-kb3zsu8mam] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        opacity: 0;
        transition: opacity var(--transition-fast);
    }

    .live-video-preview.is-ready video[b-kb3zsu8mam] {
        opacity: 1;
    }
/* /Components/LiveVideo/LiveVideoSend.razor.rz.scp.css */
.send-page[b-li8s2ob0we] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Picture next to the form on wide screens, above it on a phone. */
.send-layout[b-li8s2ob0we] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
    gap: var(--space-5);
    align-items: start;
}

@media (max-width: 900px) {
    .send-layout[b-li8s2ob0we] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.send-preview[b-li8s2ob0we] {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--color-well);
    box-shadow: var(--shadow-inset);
}

.send-placeholder[b-li8s2ob0we] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: var(--color-text-muted);
}

.send-status[b-li8s2ob0we] {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    background: var(--color-scrim);
    color: var(--color-text);
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.status-dot[b-li8s2ob0we] {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--color-text-muted);
}

.send-status.live .status-dot[b-li8s2ob0we] {
    background: var(--color-danger);
    box-shadow: 0 0 10px rgba(var(--color-danger-rgb), .8);
    animation: live-pulse-b-li8s2ob0we 1.6s ease-in-out infinite;
}

.send-status.pending .status-dot[b-li8s2ob0we] {
    background: var(--color-warning);
}

@keyframes live-pulse-b-li8s2ob0we {
    50% {
        opacity: .45;
    }
}

@media (prefers-reduced-motion: reduce) {
    .send-status.live .status-dot[b-li8s2ob0we] {
        animation: none;
    }
}

.send-form[b-li8s2ob0we] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.send-hint[b-li8s2ob0we] {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
}
/* /Components/LiveVideo/ModalEditVideoSource.razor.rz.scp.css */
.source-form[b-jgm2kpd2c4] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 520px;
    max-width: 100%;
}

.source-hint[b-jgm2kpd2c4] {
    margin: calc(-1 * var(--space-2)) 0 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.source-test[b-jgm2kpd2c4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.source-test-result[b-jgm2kpd2c4] {
    font-size: var(--font-size-sm);
}

    .source-test-result.ok[b-jgm2kpd2c4] {
        color: var(--color-success);
    }

    .source-test-result.bad[b-jgm2kpd2c4] {
        color: var(--color-danger);
    }

.source-fixed[b-jgm2kpd2c4] {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    word-break: break-all;
}
/* /Components/LiveVideo/VideoSourcesMain.razor.rz.scp.css */
.sources-page[b-kije7586g6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    max-width: 960px;
}

/* --- Card: raised, 48px head with icon chip (as on the users page) --- */
.sources-card[b-kije7586g6] {
    border-radius: var(--radius-lg);
    background: var(--color-surface-raised);
    box-shadow: var(--elevation-1);
}

.sources-card-head[b-kije7586g6] {
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--shell-header-h);
    box-sizing: border-box;
    padding: 0 var(--space-2) 0 14px;
}

    .sources-card-head h2[b-kije7586g6] {
        margin: 0;
        font-size: var(--font-size-sm);
        font-weight: 600;
    }

.icon-chip[b-kije7586g6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-md);
    background: var(--accent-tint);
    color: var(--color-primary);
    font-size: 13px;
}

/* --- Rows: flat, separated by space; the order is the order of the live video page --- */
.source-list[b-kije7586g6] {
    margin: 0;
    padding: 0 var(--space-2) var(--space-2);
    list-style: none;
}

.source-row[b-kije7586g6] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 52px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
}

    .source-row:hover[b-kije7586g6] {
        background: var(--surface-hover);
    }

    .source-row.is-hidden .source-text[b-kije7586g6] {
        opacity: .55;
    }

.source-kind[b-kije7586g6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text-muted);
}

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

.source-name[b-kije7586g6] {
    overflow: hidden;
    color: var(--color-text);
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.source-address[b-kije7586g6] {
    overflow: hidden;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.source-badge[b-kije7586g6] {
    flex-shrink: 0;
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    background: var(--surface-hover);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: 500;
    white-space: nowrap;
}

    .source-badge.ok[b-kije7586g6] {
        background: rgba(var(--color-success-rgb), .18);
        color: var(--color-success);
    }

    .source-badge.bad[b-kije7586g6] {
        background: rgba(var(--color-danger-rgb), .18);
        color: var(--color-danger);
    }

.source-actions[b-kije7586g6] {
    display: flex;
    flex-shrink: 0;
    gap: 2px;
}

.row-action[b-kije7586g6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-muted);
    font-size: 13px;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

    .row-action:hover:not(:disabled)[b-kije7586g6] {
        background: var(--color-surface-overlay);
        box-shadow: var(--elevation-1);
        color: var(--color-text);
    }

    .row-action.danger:hover:not(:disabled)[b-kije7586g6] {
        background: linear-gradient(rgba(var(--color-danger-rgb), .14), rgba(var(--color-danger-rgb), .14)), var(--color-surface-overlay);
        box-shadow: var(--shadow-danger);
        color: var(--color-danger);
    }

    .row-action:disabled[b-kije7586g6] {
        opacity: .35;
        cursor: default;
    }

@media (max-width: 720px) {
    .source-badge[b-kije7586g6] {
        display: none;
    }
}

.ndi-note[b-kije7586g6] {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

    .ndi-note a[b-kije7586g6] {
        color: var(--color-primary);
    }
/* /Components/MainMenu/Navbar.razor.rz.scp.css */
.title-bar[b-ssbqj5t5mo] {
    height: 52px;
    box-sizing: border-box;
    /* Search in the middle of the window: both sides share the remaining width
       equally (that centres it), but never shrink below their content — on a
       narrow window the search gives way instead of covering the buttons. */
    display: grid;
    grid-template-columns: minmax(max-content, 1fr) minmax(0, 640px) minmax(max-content, 1fr);
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--space-4) 0 var(--space-2);
    /* The bar casts its shadow onto the columns below — no line. */
    background: var(--color-surface);
    box-shadow: var(--shadow-bar);
}

.title-bar-start[b-ssbqj5t5mo],
.title-bar-end[b-ssbqj5t5mo] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.title-bar-end[b-ssbqj5t5mo] {
    justify-content: flex-end;
}

.title-bar-toggle[b-ssbqj5t5mo] {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base), box-shadow var(--transition-base);
}

    /* Rises one surface step above the title bar. */
    .title-bar-toggle:hover[b-ssbqj5t5mo] {
        background: var(--color-surface-overlay);
        box-shadow: var(--elevation-1);
        color: var(--color-text);
    }

.title-bar-brand[b-ssbqj5t5mo] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
    color: var(--color-text);
    text-decoration: none;
}

    .title-bar-brand img[b-ssbqj5t5mo] {
        width: 26px;
        height: 26px;
    }

    .title-bar-brand span[b-ssbqj5t5mo] {
        font-size: var(--font-size-md);
        font-weight: 600;
        letter-spacing: -.01em;
    }

/* "This browser sends live video": a raised pill like the account, the dot pulses red
   while the stream runs and stays amber while it connects. */
.title-bar-live[b-ssbqj5t5mo] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 36px;
    box-sizing: border-box;
    padding: 0 var(--space-3);
    border-radius: var(--radius-full);
    background: var(--color-surface-raised);
    box-shadow: var(--elevation-1);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

    .title-bar-live:hover[b-ssbqj5t5mo] {
        background: var(--color-surface-overlay);
        box-shadow: var(--elevation-2);
    }

.title-bar-live-dot[b-ssbqj5t5mo] {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--color-warning);
}

.title-bar-live.is-live .title-bar-live-dot[b-ssbqj5t5mo] {
    background: var(--color-danger);
    box-shadow: 0 0 10px rgba(var(--color-danger-rgb), .8);
    animation: title-bar-live-pulse-b-ssbqj5t5mo 1.6s ease-in-out infinite;
}

@keyframes title-bar-live-pulse-b-ssbqj5t5mo {
    50% {
        opacity: .45;
    }
}

@media (prefers-reduced-motion: reduce) {
    .title-bar-live.is-live .title-bar-live-dot[b-ssbqj5t5mo] {
        animation: none;
    }
}

/* User pill: frame + full radius, avatar as a tinted circle. */
.title-bar-user[b-ssbqj5t5mo] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 36px;
    box-sizing: border-box;
    padding: 0 var(--space-3) 0 4px;
    border: 0;
    border-radius: var(--radius-full);
    background: var(--color-surface-raised);
    box-shadow: var(--elevation-1);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

    .title-bar-user:hover[b-ssbqj5t5mo],
    .title-bar-user.is-open[b-ssbqj5t5mo] {
        box-shadow: var(--elevation-2);
        transform: translateY(-1px);
    }

.title-bar-avatar[b-ssbqj5t5mo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: var(--accent-tint-strong);
    color: var(--color-primary);
    font-size: 12px;
}

.title-bar-user-name[b-ssbqj5t5mo] {
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.title-bar-caret[b-ssbqj5t5mo] {
    font-size: 11px;
    color: var(--color-text-muted);
    transition: transform var(--transition-base);
}

.is-open .title-bar-caret[b-ssbqj5t5mo] {
    transform: rotate(180deg);
}

/* --- Account menu (same material as MenuHost in Loqui-Note) --- */
.usermenu-backdrop[b-ssbqj5t5mo] {
    position: fixed;
    inset: 0;
    z-index: 1249;
}

.usermenu[b-ssbqj5t5mo] {
    position: fixed;
    top: 56px;
    right: var(--space-4);
    z-index: 1250;
    width: min(260px, calc(100vw - 2 * var(--space-4)));
    box-sizing: border-box;
    padding: var(--space-2);
    border-radius: var(--radius-lg);
    background: var(--color-surface-overlay);
    box-shadow: var(--elevation-3);
    transform-origin: top right;
    animation: usermenu-in-b-ssbqj5t5mo .18s ease-out;
}

.usermenu-head[b-ssbqj5t5mo] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-2) var(--space-3) var(--space-3);
    margin-bottom: var(--space-1);
}

.usermenu-name[b-ssbqj5t5mo] {
    font-weight: 700;
    color: var(--color-text);
}

.usermenu-role[b-ssbqj5t5mo] {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

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

.usermenu-item[b-ssbqj5t5mo] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    text-align: left;
    cursor: pointer;
    transition: background var(--transition-base);
}

    .usermenu-item:hover[b-ssbqj5t5mo] {
        background: var(--surface-hover);
    }

    .usermenu-item i[b-ssbqj5t5mo] {
        width: 18px;
        text-align: center;
        color: var(--color-text-muted);
    }

/* Groups are set apart by space, not by a rule. */
.usermenu-sep[b-ssbqj5t5mo] {
    height: var(--space-2);
}

.usermenu-logout[b-ssbqj5t5mo],
.usermenu-logout i[b-ssbqj5t5mo] {
    color: var(--color-danger);
}

    .usermenu-logout:hover[b-ssbqj5t5mo] {
        background: rgba(var(--color-danger-rgb), .15);
    }

@keyframes usermenu-in-b-ssbqj5t5mo {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(.97);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* The search needs the room: on tablets the account button folds down to its
   icon, on phones the brand keeps only its logo. */
@media (max-width: 1023px) {
    .title-bar-user-name[b-ssbqj5t5mo] {
        display: none;
    }
}

@media (max-width: 720px) {
    .title-bar-brand span[b-ssbqj5t5mo] {
        display: none;
    }
}
/* /Components/MainMenu/Sidebar.razor.rz.scp.css */
.nav[b-ilwbeaekul] {
    width: var(--NavWidth);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* Raised column: its shadow (on .layout-center-left's stacking level) falls
       onto the content — no dividing line. */
    background: var(--color-surface);
    box-shadow: var(--shadow-side);
}

.nav-scroll[b-ilwbeaekul] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-3);
}

.nav-section[b-ilwbeaekul] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-foot[b-ilwbeaekul] {
    flex-shrink: 0;
    padding: var(--space-3) var(--space-3) var(--space-3);
    /* Set apart by a slightly darker floor instead of a rule. */
    background: rgba(0, 0, 0, .14);
}

.nav-section-head[b-ilwbeaekul] {
    display: flex;
    align-items: center;
    height: 30px;
    padding-left: var(--space-2);
    margin-bottom: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
}

[b-ilwbeaekul] .nav-row {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 34px;
    box-sizing: border-box;
    padding: 0 10px;
    border-radius: var(--radius-md);
    color: var(--color-text);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: background var(--transition-base), box-shadow var(--transition-base);
}

    [b-ilwbeaekul] .nav-row:hover {
        background: var(--surface-hover);
    }

    /* The current page sits raised, like a pressed-out key. */
    [b-ilwbeaekul] .nav-row.active {
        background: var(--color-surface-raised);
        box-shadow: var(--elevation-1);
    }

.nav-icon[b-ilwbeaekul] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    flex-shrink: 0;
    font-size: 13px;
    color: var(--color-text-muted);
    transition: color var(--transition-base);
}

[b-ilwbeaekul] .nav-row:hover .nav-icon,
[b-ilwbeaekul] .nav-row.active .nav-icon {
    color: var(--color-primary);
}

.nav-mask[b-ilwbeaekul] {
    display: block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}

.nav-label[b-ilwbeaekul] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* /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;
}

/* Own stacking context per modal, so a later modal (backdrop included) always
   lies above an earlier one. */
.modal-layer[b-asbw6v7awu] {
    position: absolute;
    inset: 0;
    isolation: isolate;
}

/* Loqui modal backdrop: darkened and slightly blurred, so the dialog clearly
   stands off the page. The generic Overlay itself stays transparent — context
   menus and popovers use it as an invisible click-away layer. */
.modal-layer[b-asbw6v7awu]  .overlay {
    /* Viewport-sized: the Overlay's oversized default would blur a huge area. */
    inset: 0;
    background: var(--color-scrim);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    animation: modal-backdrop-in-b-asbw6v7awu .18s ease-out both;
}

/* A modal on top of a modal: lighter veil, the one below is already dimmed. */
.modal-layer + .modal-layer[b-asbw6v7awu]  .overlay {
    background: var(--color-scrim-light);
}

.modal-layer.hidden[b-asbw6v7awu]  .overlay {
    animation: modal-backdrop-out-b-asbw6v7awu .2s ease-in both;
}

.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;
    padding: var(--space-4);
    box-sizing: border-box;
}

.modal[b-asbw6v7awu] {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    max-height: 100%;
    pointer-events: all;
    /* Floating material: the highest surface step with a deep shadow, no frame. */
    background: var(--color-surface-overlay);
    border-radius: var(--radius-lg);
    box-shadow: var(--elevation-3);
    /* Clips the content at the round corners (the footer has its own floor). */
    overflow: hidden;
    transform-origin: center;
    animation: modal-in-b-asbw6v7awu .22s cubic-bezier(.16, 1, .3, 1) both;
}

    /* Must finish well inside ModalService.CloseAnimationDuration (500ms). */
    .modal.hidden[b-asbw6v7awu] {
        animation: modal-out-b-asbw6v7awu .2s ease-in both;
        pointer-events: none;
    }

.modal-content[b-asbw6v7awu] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
}

@keyframes modal-in-b-asbw6v7awu {
    from {
        opacity: 0;
        transform: translateY(12px) scale(.97);
    }

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

@keyframes modal-out-b-asbw6v7awu {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(8px) scale(.98);
    }
}

@keyframes modal-backdrop-in-b-asbw6v7awu {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes modal-backdrop-out-b-asbw6v7awu {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}
/* /Components/Pages/ChannelEditor.razor.rz.scp.css */
/* Stage left, layer panel right. The panel scrolls on its own so a channel
   with many placements never pushes the stage out of view. */
.channel-editor[b-3jhn6wip7o] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    width: 100%;
    box-sizing: border-box;
    gap: var(--space-5);
}

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

/* Facts line in the page head (rendered inside the Dashboard's mono .facts). */
.facts-line[b-3jhn6wip7o] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.dot[b-3jhn6wip7o] {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: var(--color-text-muted);
}

    .dot.online[b-3jhn6wip7o] {
        background: var(--color-success);
        box-shadow: 0 0 10px rgba(var(--color-success-rgb), .7);
    }

/* ---------- stage ---------- */

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

/* The stage sits on a surface panel; the black screen in it casts a shadow. */
.screen-frame[b-3jhn6wip7o] {
    width: 100%;
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

/* #000 is the screen itself, not a UI colour. */
.screen[b-3jhn6wip7o] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .6);
    overflow: visible;
    user-select: none;
    touch-action: none;
}

/* A placement is a tool overlay, not content: an accent tint that glows in from
   its edges. The selected one glows stronger, also outwards, and shows its grip.
   .selected / .dragging are toggled by channelEditor.js as well. */
.source-box[b-3jhn6wip7o] {
    position: absolute;
    min-width: 5%;
    min-height: 5%;
    border-radius: var(--radius-sm);
    background: rgba(var(--color-primary-rgb), .10);
    box-shadow: inset 0 0 24px rgba(var(--color-primary-rgb), .35);
    color: var(--color-text);
    cursor: move;
    transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

    .source-box:hover[b-3jhn6wip7o] {
        background: rgba(var(--color-primary-rgb), .14);
        box-shadow: inset 0 0 24px rgba(var(--color-primary-rgb), .5);
    }

    .source-box.selected[b-3jhn6wip7o] {
        background: rgba(var(--color-primary-rgb), .16);
        box-shadow: inset 0 0 8px rgba(var(--color-primary-rgb), .7), inset 0 0 30px rgba(var(--color-primary-rgb), .45), 0 0 22px rgba(var(--color-primary-rgb), .35);
    }

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

/* Label pill: number circle, name, mono size. It is clipped to the box, so small
   placements keep their label inside their own frame. */
.source-box-label[b-3jhn6wip7o] {
    position: absolute;
    top: 6px;
    left: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 12px);
    height: 22px;
    padding: 0 var(--space-2) 0 3px;
    overflow: hidden;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--color-bg) 85%, transparent);
    font-size: 11px;
    white-space: nowrap;
    pointer-events: none;
}

.source-box-index[b-3jhn6wip7o] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
}

.source-box-name[b-3jhn6wip7o] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.source-box-dims[b-3jhn6wip7o] {
    flex: none;
    font-family: var(--font-mono);
    color: var(--color-text-muted);
}

/* The only resize grip (bottom right) — a small raised square on the corner; its
   drop shadow sets it off the picture underneath. */
.source-box-resize-handle[b-3jhn6wip7o] {
    position: absolute;
    right: -6px;
    bottom: -6px;
    width: 12px;
    height: 12px;
    border-radius: var(--radius-sm);
    background: rgba(var(--color-primary-rgb), .7);
    box-shadow: var(--shadow-e1);
    cursor: nwse-resize;
}

.source-box.selected .source-box-resize-handle[b-3jhn6wip7o] {
    width: 14px;
    height: 14px;
    right: -7px;
    bottom: -7px;
    background: var(--color-primary);
}

.stage-hint[b-3jhn6wip7o] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

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

.layer-panel[b-3jhn6wip7o] {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: var(--space-2);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.layer-panel-head[b-3jhn6wip7o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 30px;
    margin-bottom: var(--space-1);
    padding: 0 var(--space-1) 0 var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-text-muted);
}

.layer-panel-count[b-3jhn6wip7o] {
    font-family: var(--font-mono);
    font-weight: 400;
    letter-spacing: 0;
}

.layer-list[b-3jhn6wip7o] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* Long stacks scroll here instead of stretching the page. The list reaches
       into the panel padding so the scroll box does not cut off the shadow of
       the raised (selected) row; its own padding keeps the rows in place. */
    max-height: min(60vh, 520px);
    overflow-y: auto;
    margin: calc(-1 * var(--space-1)) calc(-1 * var(--space-2)) calc(-1 * var(--space-2));
    padding: var(--space-1) var(--space-2) var(--space-2);
}

.layer-item[b-3jhn6wip7o] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 7px 7px 7px 13px;
    border-radius: var(--radius-md);
    color: var(--color-text);
    cursor: pointer;
    transition: background var(--transition-base), box-shadow var(--transition-base);
}

    .layer-item:hover[b-3jhn6wip7o] {
        background: var(--surface-hover);
    }

    /* Selected: the row is raised; the accent sits on its number. */
    .layer-item.selected[b-3jhn6wip7o] {
        background: var(--color-surface-raised);
        box-shadow: var(--elevation-1);
    }

.layer-index[b-3jhn6wip7o] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-sm);
    background: var(--color-surface-raised);
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: 11px;
}

.layer-item.selected .layer-index[b-3jhn6wip7o] {
    background: var(--color-primary);
    box-shadow: var(--shadow-primary);
    color: var(--color-on-primary);
}

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

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

.layer-dims[b-3jhn6wip7o] {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

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

.layer-action[b-3jhn6wip7o] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base), box-shadow var(--transition-base), opacity var(--transition-base);
}

    .layer-action:hover:not(:disabled)[b-3jhn6wip7o] {
        background: var(--color-surface-raised);
        box-shadow: var(--elevation-1);
        color: var(--color-text);
    }

    /* Rises like the other layer actions — the red only tints its surface. */
    .layer-action.destructive:hover:not(:disabled)[b-3jhn6wip7o] {
        background: linear-gradient(rgba(var(--color-danger-rgb), .16), rgba(var(--color-danger-rgb), .16)), var(--color-surface-raised);
        color: var(--color-danger);
    }

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

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

    .layer-panel[b-3jhn6wip7o] {
        position: static;
    }
}

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

    .screen-frame[b-3jhn6wip7o] {
        padding: 10px;
    }

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

    .layer-action[b-3jhn6wip7o] {
        min-width: 40px;
        min-height: 40px;
    }
}
/* /Components/Pages/Error.razor.rz.scp.css */
/* Plain text page (static SSR, shown by the exception handler) — just the app's type scale. */
.error-page[b-1lgu0mqrqz] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 70ch;
    padding: var(--space-6);
    color: var(--color-text-muted);
    line-height: 1.5;
}

h1[b-1lgu0mqrqz] {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--color-danger);
}

h2[b-1lgu0mqrqz] {
    margin: 0 0 var(--space-3);
    font-size: var(--font-size-lg);
    font-weight: 500;
    color: var(--color-text);
}

h3[b-1lgu0mqrqz] {
    margin: var(--space-3) 0 0;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
}

p[b-1lgu0mqrqz] {
    margin: 0;
}

strong[b-1lgu0mqrqz] {
    color: var(--color-text);
    font-weight: 600;
}

code[b-1lgu0mqrqz] {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--color-text);
}
/* /Components/Pages/Home.razor.rz.scp.css */
.home[b-urvlg2vlkz] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Key figures ------------------------------------------------------------ */

.stats[b-urvlg2vlkz] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
}

.stat[b-urvlg2vlkz] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-3) 14px;
    border-radius: var(--radius-md);
    background: var(--color-surface-raised);
    box-shadow: var(--elevation-1);
}

.stat-num[b-urvlg2vlkz] {
    font-size: var(--font-size-xl);
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.stat-of[b-urvlg2vlkz] {
    font-size: var(--font-size-md);
    font-weight: 500;
    color: var(--color-text-muted);
}

.stat-label[b-urvlg2vlkz] {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* Cards ------------------------------------------------------------------ */

.cards[b-urvlg2vlkz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-4);
    align-items: start;
}

.card[b-urvlg2vlkz] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--color-surface-raised);
    box-shadow: var(--elevation-1);
}

.card-head[b-urvlg2vlkz] {
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--shell-header-h);
    box-sizing: border-box;
    flex-shrink: 0;
    padding: 0 var(--space-2) 0 14px;
}

    .card-head h2[b-urvlg2vlkz] {
        flex: 1;
        min-width: 0;
        margin: 0;
        font-size: var(--font-size-sm);
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.card-sub[b-urvlg2vlkz] {
    margin-left: 6px;
    font-weight: 400;
    color: var(--color-text-muted);
}

.card-count[b-urvlg2vlkz] {
    padding-right: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.chip[b-urvlg2vlkz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--accent-tint);
    color: var(--color-primary);
    font-size: 13px;
}

.card-empty[b-urvlg2vlkz] {
    margin: 0;
    padding: var(--space-4) 14px;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: 1.45;
}

/* Rows inside a card: no lines in between, each row lights up on hover; long
   lists scroll inside the card. */
.lines[b-urvlg2vlkz] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0 0 6px;
    max-height: 320px;
    overflow-y: auto;
}

/* The side margin keeps the hover fill off the card edge; margin + padding line
   the content up with the card head. */
.line[b-urvlg2vlkz] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 52px;
    box-sizing: border-box;
    margin: 0 6px;
    padding: 6px 2px 6px var(--space-2);
    border-radius: var(--radius-md);
    transition: background var(--transition-base);
}

    .line:hover[b-urvlg2vlkz] {
        background: rgba(255, 255, 255, .035);
    }

.line-main[b-urvlg2vlkz] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

    .line-main:hover .line-title[b-urvlg2vlkz] {
        color: var(--color-primary);
    }

.line-icon[b-urvlg2vlkz] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    background-color: var(--color-text-muted);
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}

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

.line-title[b-urvlg2vlkz] {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--transition-fast);
}

.line-meta[b-urvlg2vlkz] {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Channel status */

.channel-line[b-urvlg2vlkz] {
    min-height: 44px;
}

.channel-name[b-urvlg2vlkz] {
    flex: 1;
    min-width: 0;
    color: var(--color-text-muted);
}

.channel-line.online .channel-name[b-urvlg2vlkz] {
    color: var(--color-text);
}

.dot[b-urvlg2vlkz] {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: var(--color-text-muted);
}

/* Green means "something really goes out to a screen" — the one state an
   operator has to see from across the room. */
.channel-line.online .dot[b-urvlg2vlkz] {
    background: var(--color-success);
    box-shadow: 0 0 10px rgba(var(--color-success-rgb), .7);
}

.channel-line .icon-btn[b-urvlg2vlkz] {
    font-size: var(--font-size-xs);
}

/* Playlist preview */

.playlist-line[b-urvlg2vlkz] {
    min-height: 40px;
}

.line-num[b-urvlg2vlkz] {
    width: 18px;
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.playlist-line .line-title[b-urvlg2vlkz] {
    font-weight: 400;
}

/* Footer on a darker floor instead of a rule above it. */
.more-hint[b-urvlg2vlkz] {
    margin: 0;
    padding: var(--space-2) 14px var(--space-3);
    background: rgba(0, 0, 0, .16);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* Icon buttons */

.icon-btn[b-urvlg2vlkz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base), box-shadow var(--transition-base);
}

    .icon-btn:hover[b-urvlg2vlkz] {
        background: var(--color-surface-raised);
        box-shadow: var(--elevation-1);
        color: var(--color-text);
    }

    /* Rises like the other icon buttons — the red only tints its surface. */
    .icon-btn.danger:hover[b-urvlg2vlkz] {
        background: linear-gradient(rgba(var(--color-danger-rgb), .16), rgba(var(--color-danger-rgb), .16)), var(--color-surface-raised);
        color: var(--color-danger);
    }

/* Extensions ------------------------------------------------------------- */

.extensions[b-urvlg2vlkz] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.section-head[b-urvlg2vlkz] {
    margin: 0;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-text-muted);
}

.action-grid[b-urvlg2vlkz] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}

.action[b-urvlg2vlkz] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-surface-raised);
    box-shadow: var(--elevation-1);
    color: var(--color-text);
    text-decoration: none;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

    .action:hover[b-urvlg2vlkz] {
        box-shadow: var(--elevation-2);
        transform: translateY(-2px);
        color: var(--color-text);
    }

.action-badge[b-urvlg2vlkz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: rgba(var(--color-primary-rgb), .14);
}

.action-icon[b-urvlg2vlkz] {
    width: 16px;
    height: 16px;
    background-color: var(--color-primary);
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}

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

.action-name[b-urvlg2vlkz] {
    font-size: var(--font-size-sm);
    font-weight: 500;
    line-height: 1.2;
}

.action-desc[b-urvlg2vlkz] {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.action-chev[b-urvlg2vlkz] {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    transition: color var(--transition-fast), transform var(--transition-fast);
}

.action:hover .action-chev[b-urvlg2vlkz] {
    color: var(--color-primary);
    transform: translateX(2px);
}

@media (max-width: 1100px) {
    .stats[b-urvlg2vlkz] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .action-grid[b-urvlg2vlkz] {
        grid-template-columns: minmax(0, 1fr);
    }

    .cards[b-urvlg2vlkz] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Pages/ScoreImport.razor.rz.scp.css */
/* One card with the table, like the song tables: the table scrolls inside it. */
.import-card[b-uagxso2fuz] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    border-radius: var(--radius-lg);
    background: var(--color-surface-raised);
    box-shadow: var(--elevation-1);
}

.import-cell[b-uagxso2fuz] {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: var(--space-2) var(--space-3);
    overflow: hidden;
}

    .import-cell.file[b-uagxso2fuz] {
        font-family: var(--font-mono);
        font-size: var(--font-size-xs);
        color: var(--color-text-muted);
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .import-cell.recognised[b-uagxso2fuz],
    .import-cell.problems[b-uagxso2fuz] {
        display: block;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .import-cell.problems[b-uagxso2fuz] {
        color: var(--color-text-muted);
        font-size: var(--font-size-xs);
    }

    /* The song picker needs its popup; the cell must not clip the trigger. */
    .import-cell.song[b-uagxso2fuz] {
        overflow: visible;
    }

        .import-cell.song[b-uagxso2fuz]  .select-trigger {
            width: 100%;
        }

    .import-cell input[type="checkbox"][b-uagxso2fuz] {
        width: 18px;
        height: 18px;
        accent-color: var(--color-primary);
    }

.imported[b-uagxso2fuz] {
    color: var(--color-success);
    font-size: var(--font-size-lg);
}

.error[b-uagxso2fuz] {
    color: var(--color-danger);
}

.muted[b-uagxso2fuz] {
    color: var(--color-text-muted);
}

code[b-uagxso2fuz] {
    font-family: var(--font-mono);
    color: var(--color-text);
}

.upload-input[b-uagxso2fuz] {
    display: none;
}
/* /Components/Pages/ScorePrint.razor.rz.scp.css */
/* On screen: options on the left, the sheet as an A4 preview on the right. In print
   only the sheet remains, and the page margins come from @page (app.css). */
.print-view[b-xnxsalgemb] {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    min-height: 100vh;
}

.print-options[b-xnxsalgemb] {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    height: 100vh;
    padding: var(--space-5);
    overflow-y: auto;
    box-sizing: border-box;
    background: var(--color-surface);
    box-shadow: var(--shadow-side);
}

    .print-options h1[b-xnxsalgemb] {
        margin: 0;
        font-size: var(--font-size-lg);
        font-weight: 600;
    }

    .print-options section[b-xnxsalgemb] {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }

    .print-options h2[b-xnxsalgemb] {
        margin: 0;
        color: var(--color-text-muted);
        font-size: var(--font-size-xs);
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

.back-link[b-xnxsalgemb] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-text-muted);
    text-decoration: none;
}

    .back-link:hover[b-xnxsalgemb] {
        color: var(--color-text);
    }

.hint[b-xnxsalgemb] {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.print-action[b-xnxsalgemb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: auto;
}

/* − key + like on the song page. */
.transpose[b-xnxsalgemb] {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: var(--space-1);
    padding: var(--space-1);
    border-radius: var(--radius-lg);
    background: var(--color-well);
    box-shadow: var(--shadow-inset);
}

.transpose-key[b-xnxsalgemb] {
    min-width: 6.5em;
    height: 30px;
    padding: 0 var(--space-2);
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text);
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    white-space: nowrap;
}

    .transpose-key.moved[b-xnxsalgemb] {
        color: var(--color-primary);
        cursor: pointer;
    }

        .transpose-key.moved:hover[b-xnxsalgemb] {
            background: var(--color-surface-raised);
            box-shadow: var(--elevation-1);
        }

    .transpose-key:disabled[b-xnxsalgemb] {
        cursor: default;
    }

/* Segment: sunken well, the active option raised out of it. */
.segment[b-xnxsalgemb] {
    display: inline-flex;
    align-self: flex-start;
    gap: var(--space-1);
    padding: var(--space-1);
    border-radius: var(--radius-lg);
    background: var(--color-well);
    box-shadow: var(--shadow-inset);
}

.segment-option[b-xnxsalgemb] {
    height: 30px;
    padding: 0 14px;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);
}

    .segment-option:hover[b-xnxsalgemb] {
        color: var(--color-text);
    }

    .segment-option.active[b-xnxsalgemb] {
        background: var(--color-surface-raised);
        box-shadow: var(--elevation-1);
        color: var(--color-text);
        font-weight: 500;
    }

    .segment-option:focus-visible[b-xnxsalgemb] {
        outline-offset: -2px;
    }

.print-preview[b-xnxsalgemb] {
    padding: var(--space-6);
    overflow-x: auto;
}

/* A4 on screen: 210 mm wide, the printable area inside the margins of @page. */
.print-sheet[b-xnxsalgemb] {
    box-sizing: border-box;
    width: 210mm;
    max-width: 100%;
    min-height: 297mm;
    margin: 0 auto;
    padding: 14mm;
    background: var(--color-paper);
    box-shadow: var(--elevation-2);
    color: var(--color-ink);
    font-family: Helvetica, Arial, sans-serif;
}

.sheet-head[b-xnxsalgemb] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-2) var(--space-5);
    margin-bottom: 6mm;
}

    .sheet-head h1[b-xnxsalgemb] {
        margin: 0;
        font-size: 22pt;
        font-weight: 700;
        line-height: 1.15;
    }

.sheet-info[b-xnxsalgemb] {
    display: grid;
    gap: 1mm;
    margin: 0;
    font-size: 9pt;
    text-align: right;
}

    .sheet-info div[b-xnxsalgemb] {
        display: flex;
        justify-content: flex-end;
        gap: 2mm;
    }

    .sheet-info dt[b-xnxsalgemb] {
        opacity: .65;
    }

    .sheet-info dd[b-xnxsalgemb] {
        margin: 0;
    }

/* Systems drawn by abcjs, one wrapper each: a page break never cuts through one. */
.score-render[b-xnxsalgemb]  > div {
    break-inside: avoid;
}

.sheet-lyrics[b-xnxsalgemb] {
    columns: 2;
    column-gap: 10mm;
    margin-top: 8mm;
    font-size: 11pt;
    line-height: 1.4;
}

.sheet-stanza[b-xnxsalgemb] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2.5mm;
    margin-bottom: 5mm;
    break-inside: avoid;
}

.stanza-label[b-xnxsalgemb] {
    font-weight: 700;
}

.stanza-text[b-xnxsalgemb]  p {
    margin: 0;
}

.sheet-foot[b-xnxsalgemb] {
    margin-top: 8mm;
    font-size: 8pt;
    opacity: .7;
}

.print-missing[b-xnxsalgemb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-7);
    color: var(--color-text-muted);
}

@media (max-width: 900px) {
    .print-view[b-xnxsalgemb] {
        grid-template-columns: minmax(0, 1fr);
    }

    .print-options[b-xnxsalgemb] {
        position: static;
        height: auto;
    }

    .print-preview[b-xnxsalgemb] {
        padding: var(--space-4) 0;
    }

    .print-sheet[b-xnxsalgemb] {
        padding: var(--space-4);
        min-height: 0;
    }
}

@media print {
    .print-view[b-xnxsalgemb] {
        display: block;
        min-height: 0;
    }

    .print-options[b-xnxsalgemb] {
        display: none;
    }

    .print-preview[b-xnxsalgemb] {
        padding: 0;
        overflow: visible;
    }

    .print-sheet[b-xnxsalgemb] {
        width: auto;
        min-height: 0;
        padding: 0;
        background: none;
        box-shadow: none;
    }
}
/* /Components/Pages/ViewerNotFound.razor.rz.scp.css */
p[b-ysg756kkek] {
    max-width: 60ch;
    margin: 0;
    color: var(--color-text-muted);
    line-height: 1.5;
}
/* /Components/Playlist/Playlist.razor.rz.scp.css */
.playlist[b-0wv6b8k4rf] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.playlist-head[b-0wv6b8k4rf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 30px;
    padding-left: var(--space-2);
    margin-bottom: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.playlist-add[b-0wv6b8k4rf] {
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--color-surface-raised);
    color: var(--color-text-muted);
    font-size: 11px;
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base), box-shadow var(--transition-base);
}

    .playlist-add:hover[b-0wv6b8k4rf] {
        background: linear-gradient(var(--accent-tint), var(--accent-tint)), var(--color-surface-overlay);
        box-shadow: var(--elevation-1);
        color: var(--color-primary);
    }

/* --- Switcher --- */
.playlist-switch-host[b-0wv6b8k4rf] {
    position: relative;
    margin-bottom: 6px;
}

.playlist-switch[b-0wv6b8k4rf] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    height: 34px;
    box-sizing: border-box;
    padding: 0 10px;
    border: 0;
    border-radius: var(--radius-md);
    background: var(--color-surface-raised);
    box-shadow: var(--elevation-1);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

    .playlist-switch:hover[b-0wv6b8k4rf] {
        box-shadow: var(--elevation-2);
        transform: translateY(-1px);
    }

    .playlist-switch i[b-0wv6b8k4rf] {
        font-size: 11px;
        color: var(--color-text-muted);
    }

.playlist-switch-name[b-0wv6b8k4rf] {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.playlist-switch-count[b-0wv6b8k4rf] {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    font-weight: 400;
    color: var(--color-text-muted);
}

/* The menu spans the switcher's width instead of hanging off one edge. */
.playlist-switch-host[b-0wv6b8k4rf]  .context-menu {
    left: 0;
    right: 0;
}

.playlist-switch-host[b-0wv6b8k4rf]  .context-wrapper {
    width: 100%;
    left: 0;
}

.playlist-switch-host[b-0wv6b8k4rf]  .context-wrapper ul {
    max-height: 60vh;
    overflow-y: auto;
}

/* Space, not a rule, between "switch to" and the management entries. */
.playlist-switch-host[b-0wv6b8k4rf]  li.section-start {
    margin-top: var(--space-3) !important;
}

.playlist-switch-host[b-0wv6b8k4rf]  li.current > button {
    color: var(--color-primary);
}

/* --- Rows --- */
.playlist-list[b-0wv6b8k4rf] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.playlist-row[b-0wv6b8k4rf] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 34px;
    box-sizing: border-box;
    padding: 0 4px 0 10px;
    border-radius: var(--radius-md);
    color: var(--color-text);
    transition: background var(--transition-base), box-shadow var(--transition-base);
}

    .playlist-row:hover[b-0wv6b8k4rf] {
        background: var(--surface-hover);
    }

    .playlist-row.is-selected[b-0wv6b8k4rf] {
        background: var(--color-surface-raised);
        box-shadow: var(--elevation-1);
    }

    /* On the screen right now: the row is raised and glows in the accent. */
    .playlist-row.is-live[b-0wv6b8k4rf] {
        background: var(--color-surface-raised);
        box-shadow: var(--shadow-glow);
        color: var(--color-primary);
    }

.playlist-num[b-0wv6b8k4rf] {
    width: 18px;
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.playlist-icon[b-0wv6b8k4rf] {
    display: inline-flex;
    width: 16px;
    flex-shrink: 0;
    color: var(--color-text-muted);
    transition: color var(--transition-base);
}

.playlist-row:hover .playlist-icon[b-0wv6b8k4rf],
.playlist-row.is-live .playlist-icon[b-0wv6b8k4rf] {
    color: var(--color-primary);
}

.playlist-mask[b-0wv6b8k4rf] {
    display: block;
    width: 15px;
    height: 15px;
    background-color: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}

.playlist-open[b-0wv6b8k4rf] {
    flex: 1 1 auto;
    min-width: 0;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: var(--font-size-sm);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.live-tag[b-0wv6b8k4rf] {
    flex-shrink: 0;
    padding: 2px 6px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .08em;
}

/* Row actions appear on hover or keyboard focus and take no room otherwise, so
   titles are not cut short for buttons nobody sees. Touch devices have no hover,
   so there they are always visible. */
.playlist-actions[b-0wv6b8k4rf] {
    display: none;
    flex-shrink: 0;
}

.playlist-row:hover .playlist-actions[b-0wv6b8k4rf],
.playlist-row:focus-within .playlist-actions[b-0wv6b8k4rf] {
    display: inline-flex;
}

@media (hover: none) {
    .playlist-actions[b-0wv6b8k4rf] {
        display: inline-flex;
    }
}

.playlist-btn[b-0wv6b8k4rf] {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    font-size: 11px;
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base), box-shadow var(--transition-base);
}

    /* Rises one surface step above the row; show and remove only tint that surface. */
    .playlist-btn:hover:not(:disabled)[b-0wv6b8k4rf] {
        background: var(--color-surface-overlay);
        box-shadow: var(--elevation-1);
        color: var(--color-text);
    }

    .playlist-btn.show:hover[b-0wv6b8k4rf] {
        background: linear-gradient(var(--accent-tint), var(--accent-tint)), var(--color-surface-overlay);
        color: var(--color-primary);
    }

    .playlist-btn.remove:hover[b-0wv6b8k4rf] {
        background: linear-gradient(rgba(var(--color-danger-rgb), .15), rgba(var(--color-danger-rgb), .15)), var(--color-surface-overlay);
        color: var(--color-danger);
    }

    .playlist-btn:disabled[b-0wv6b8k4rf] {
        opacity: .35;
        cursor: default;
    }

.playlist-sort-done[b-0wv6b8k4rf] {
    align-self: flex-start;
    margin-top: var(--space-2);
    height: 30px;
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-md);
    background: var(--color-surface-raised);
    box-shadow: var(--elevation-1);
    color: var(--color-text);
    font-size: var(--font-size-xs);
    cursor: pointer;
    transition: box-shadow var(--transition-base);
}

    .playlist-sort-done:hover[b-0wv6b8k4rf] {
        box-shadow: var(--elevation-2);
        color: var(--color-primary);
    }

.playlist-empty[b-0wv6b8k4rf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4);
    /* Empty = a sunken well waiting to be filled. */
    border-radius: var(--radius-md);
    background: var(--color-well);
    box-shadow: var(--shadow-inset);
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: 1.5;
}

    .playlist-empty i[b-0wv6b8k4rf] {
        font-size: 18px;
        color: var(--color-primary);
        opacity: .7;
    }

    .playlist-empty p[b-0wv6b8k4rf] {
        margin: 0;
    }
/* /Components/PopupHost.razor.rz.scp.css */
.popup-host-root[b-iempkpvnyd] {
    position: relative;
    z-index: 9000;
}

/* Same material as the context menus: floating surface, deep shadow, no frame. */
[b-iempkpvnyd] .popup-host {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9000;
    visibility: hidden;
    box-sizing: border-box;
    border-radius: var(--radius-lg);
    background: var(--color-surface-overlay);
    color: var(--color-text);
    box-shadow: var(--elevation-3);
    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] {
    position: relative;
    width: 100%;
}

.wrapper[b-gdw2xp8xpw] {
    position: relative;
    width: 100%;
}

/* Search field: raised like the other controls of the title bar — a sunken well
   (the usual input look) vanishes on the bar's dark surface. Focus lights it up
   instead of drawing a frame. */
.field[b-gdw2xp8xpw] {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: 36px;
    box-sizing: border-box;
    padding: 0 var(--space-3);
    border-radius: var(--radius-lg);
    background: var(--color-surface-raised);
    box-shadow: var(--elevation-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    cursor: text;
    transition: background var(--transition-base), box-shadow var(--transition-base);
}

    .field:hover[b-gdw2xp8xpw] {
        background: var(--color-surface-overlay);
    }

    .field:focus-within[b-gdw2xp8xpw],
    .isopen .field[b-gdw2xp8xpw] {
        background: var(--color-surface-overlay);
        box-shadow: var(--elevation-1), var(--shadow-focus);
    }

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

input[b-gdw2xp8xpw] {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--space-2) 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--color-text);
    font-size: var(--font-size-sm);
}

    input[b-gdw2xp8xpw]::placeholder {
        color: var(--color-text-muted);
    }

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

.msg[b-gdw2xp8xpw] {
    padding: var(--space-4);
    text-align: center;
    color: var(--color-text-muted);
}

    .msg p[b-gdw2xp8xpw] {
        margin: 0;
        animation: ShowMsg-b-gdw2xp8xpw 0.8s ease-in;
    }

/* The result list hangs from the title bar over the content, centred under the
   field. It is as wide as the field, but where the title bar squeezes the field
   (tablet, phone) it keeps a readable width. `translate` instead of `transform`,
   which the Show animation overwrites. */
.searchresultspopup[b-gdw2xp8xpw] {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    translate: -50% 0;
    z-index: 2;
    width: max(100%, min(480px, calc(100vw - 2 * var(--space-4))));
    opacity: 1;
    transition: opacity 0.3s;
    animation: Show-b-gdw2xp8xpw .18s ease-out;
    /* 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] {
    padding: var(--space-2);
    border-radius: var(--radius-lg);
    background: var(--color-surface-overlay);
    box-shadow: var(--elevation-3);
    overflow: hidden;
}

.shortcuts[b-gdw2xp8xpw] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-3) 2px;
    color: var(--color-text-muted);
}

@keyframes Show-b-gdw2xp8xpw {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

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

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
/* /Components/Search/SearchResult.razor.rz.scp.css */
.searchresult[b-55ilccvzjl] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--space-2) 0 var(--space-3);
    border-radius: var(--radius-md);
    user-select: none;
    cursor: pointer;
    transition: background var(--transition-base), box-shadow var(--transition-base);
}

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

    /* The keyboard-marked hit is lifted out of the list. */
    .searchresult.highlighted[b-55ilccvzjl] {
        background: var(--color-surface-raised);
        box-shadow: var(--elevation-1);
    }

/* Icon chip: accent tint behind the type icon (Loqui-Note result card). */
.img[b-55ilccvzjl] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-md);
    background: var(--accent-tint);
}

    .img img[b-55ilccvzjl] {
        width: 15px;
        height: 15px;
    }

.itemtext[b-55ilccvzjl] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-2) 0;
    border: none;
    background: transparent;
    color: var(--color-text);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

    .itemtext:focus-visible[b-55ilccvzjl] {
        outline: 2px solid var(--color-primary-hover);
        outline-offset: 2px;
        border-radius: var(--radius-sm);
    }

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

.title p[b-55ilccvzjl] {
    font-size: var(--font-size-sm);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.preview p[b-55ilccvzjl] {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

    .tools .add-to-playlist[b-55ilccvzjl] {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border: none;
        border-radius: var(--radius-md);
        background: var(--color-surface-raised);
        box-shadow: var(--elevation-1);
        color: var(--color-text-muted);
        font-size: 14px;
        cursor: pointer;
        transition: box-shadow var(--transition-base), color var(--transition-base), transform var(--transition-base);
    }

        .tools .add-to-playlist:hover[b-55ilccvzjl] {
            box-shadow: var(--elevation-2);
            transform: translateY(-1px);
            color: var(--color-primary);
        }

    .tools .add-icon[b-55ilccvzjl] {
        position: absolute;
        right: -3px;
        bottom: -3px;
        width: 13px;
        height: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-full);
        background: var(--color-primary);
        color: var(--color-on-primary);
    }

        .tools .add-icon i[b-55ilccvzjl] {
            font-size: 0.5rem;
        }
/* /Components/Settings/SettingsMain.razor.rz.scp.css */
.settings-page[b-54pb5rvhrg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    max-width: 720px;
}

/* --- Card: raised, 48px head with icon chip, body, action footer --- */
.settings-card[b-54pb5rvhrg] {
    border-radius: var(--radius-lg);
    background: var(--color-surface-raised);
    box-shadow: var(--elevation-1);
}

.settings-card-head[b-54pb5rvhrg] {
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--shell-header-h);
    box-sizing: border-box;
    padding: 0 var(--space-2) 0 14px;
}

    .settings-card-head h2[b-54pb5rvhrg] {
        margin: 0;
        font-size: var(--font-size-sm);
        font-weight: 600;
    }

.icon-chip[b-54pb5rvhrg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-md);
    background: var(--accent-tint);
    color: var(--color-primary);
    font-size: 13px;
}

.settings-card-body[b-54pb5rvhrg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4);
}

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

/* Status block: embedded in the card, one surface step darker — no frame. */
.settings-status[b-54pb5rvhrg] {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

    .settings-status h3[b-54pb5rvhrg] {
        margin: 0 0 var(--space-3);
        font-size: var(--font-size-xs);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--color-text-muted);
        user-select: none;
    }

    .settings-status dl[b-54pb5rvhrg] {
        display: grid;
        grid-template-columns: max-content 1fr;
        gap: var(--space-2) var(--space-5);
        margin: 0;
        align-items: center;
    }

    .settings-status dt[b-54pb5rvhrg] {
        color: var(--color-text-muted);
    }

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

        .settings-status dd.value[b-54pb5rvhrg] {
            font-family: var(--font-mono);
            font-size: var(--font-size-xs);
            color: var(--color-text);
        }

.error-text[b-54pb5rvhrg],
.settings-status dd.error-text[b-54pb5rvhrg] {
    color: var(--color-danger);
}

/* Footer on a darker floor instead of a rule; its corners follow the card. */
.settings-actions[b-54pb5rvhrg] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    background: rgba(0, 0, 0, .16);
}

@media (max-width: 480px) {
    .settings-status dl[b-54pb5rvhrg] {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .settings-status dd[b-54pb5rvhrg] {
        margin-bottom: var(--space-2);
    }
}
/* /Components/Shared/AddTile.razor.rz.scp.css */
/* A sunken well, muted — the "+" at the end of a grid, a slot waiting to be
   filled. It stretches to the row height of its neighbours; the minimum keeps it
   a tile when it stands alone. */
.add-tile[b-ksnpr1ehui] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 160px;
    box-sizing: border-box;
    padding: var(--space-4);
    text-align: center;
    color: var(--color-text-muted);
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--color-well);
    box-shadow: var(--shadow-inset);
    font-size: var(--font-size-sm);
    cursor: pointer;
    user-select: none;
    transition: color var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
}

    .add-tile i[b-ksnpr1ehui] {
        font-size: var(--font-size-lg);
    }

    .add-tile:hover[b-ksnpr1ehui] {
        color: var(--color-primary);
        box-shadow: var(--shadow-inset), var(--shadow-focus);
    }

    /* Set by dropzone.js while files hover over the tile. */
    .add-tile.drag-over[b-ksnpr1ehui] {
        color: var(--color-primary);
        box-shadow: var(--shadow-inset), var(--shadow-focus);
        background: var(--accent-tint);
    }

.add-label[b-ksnpr1ehui] {
    font-weight: 500;
}

.add-hint[b-ksnpr1ehui] {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}
/* /Components/Shared/Card.razor.rz.scp.css */
/* Card: a raised surface with a shadow, no frame. The 48px head is set apart by
   its weight and the space below it, not by a rule. */
section[b-u1amz56bje] {
    margin: 0;
    display: grid;
    grid-template-rows: auto 1fr;
    min-width: 0;
    border-radius: var(--radius-lg);
    background: var(--color-surface-raised);
    box-shadow: var(--elevation-1);
}

h3[b-u1amz56bje] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    box-sizing: border-box;
    margin: 0;
    padding: 0 var(--space-4) 0 14px;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

/* Icon chip in front of the title. */
.card-icon[b-u1amz56bje] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-md);
    background: var(--accent-tint);
    color: var(--color-primary);
    font-size: 13px;
}

.card-content[b-u1amz56bje] {
    min-width: 0;
    padding: var(--space-1) var(--space-4) var(--space-4);
}

/* Frameless: no surface and no shadow — the title becomes a section head above the
   content (which usually brings its own surface, e.g. a ListView). */
section.frameless[b-u1amz56bje] {
    gap: var(--space-1);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

    section.frameless h3[b-u1amz56bje] {
        min-height: 30px;
        padding: 0;
        color: var(--color-text-muted);
        font-size: var(--font-size-xs);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .08em;
    }

    section.frameless .card-icon[b-u1amz56bje] {
        width: auto;
        height: auto;
        background: transparent;
        font-size: var(--font-size-xs);
    }

    section.frameless .card-content[b-u1amz56bje] {
        padding: 0;
    }
/* /Components/Shared/CardGrid.razor.rz.scp.css */
.card-grid[b-odnx4owknp] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-5) var(--space-4);
    align-items: start;
    align-content: start;
}
/* /Components/Shared/Dashboard.razor.rz.scp.css */
.dashboard[b-8wh5o8z0ry] {
    position: relative;
    display: grid;
    /* Grid items default to their min-content width — a long title plus the
       actions would otherwise make the page wider than its column. */
    min-width: 0;
    grid-template-rows: auto auto minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
}

    /* Without the bar the content must still get the last, height-bound row —
       pages that keep their table head and pager in view depend on it. */
    .dashboard.no-bar[b-8wh5o8z0ry] {
        grid-template-rows: auto minmax(0, 1fr);
    }

/* --- 48px bar: in line with the navigation search and the side panel header --- */
.dashboard-bar[b-8wh5o8z0ry] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    height: var(--shell-header-h);
    box-sizing: border-box;
    padding: 0 var(--space-3) 0 var(--space-6);
}

.back-link[b-8wh5o8z0ry] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    white-space: nowrap;
    text-decoration: none;
    transition: color var(--transition-base);
}

    .back-link:hover[b-8wh5o8z0ry] {
        color: var(--color-text);
    }

    .back-link i[b-8wh5o8z0ry] {
        font-size: 10px;
    }

/* Stays on the right, with or without a back link next to it. */
.top-buttons[b-8wh5o8z0ry] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
    margin-left: auto;
}

/* --- Page head --- */
.dashboard-head[b-8wh5o8z0ry] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6) var(--space-2);
}

    /* Without the bar the head opens the page: as much room above as to the side. */
    .dashboard.no-bar .dashboard-head[b-8wh5o8z0ry] {
        padding-top: var(--space-6);
    }

.dashboard-heading[b-8wh5o8z0ry] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
}

.eyebrow[b-8wh5o8z0ry] {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.title[b-8wh5o8z0ry] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

h1[b-8wh5o8z0ry] {
    min-width: 0;
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    animation: title-fade-in-b-8wh5o8z0ry .25s ease-out;
}

.facts[b-8wh5o8z0ry] {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* Actions sit right in the head; the first one listed is the rightmost, so the
   primary action keeps its place at the outer edge. */
.action-buttons[b-8wh5o8z0ry] {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

    .action-buttons:empty[b-8wh5o8z0ry] {
        display: none;
    }

.dashboard-content[b-8wh5o8z0ry] {
    /* Default stretch: pages that fill the view (bible, transcript) rely on
       height: 100% of their content. */
    display: grid;
    min-height: 0;
    overflow: auto;
    /* Room on every side for the shadows and the live glow of the first and
       outermost tiles — the scroll box would clip them otherwise. */
    padding: var(--space-5) var(--space-6) var(--space-6);
}

/* Narrow devices: actions go below the title instead of squeezing it. */
@media (max-width: 720px) {
    .dashboard-bar[b-8wh5o8z0ry] {
        padding-left: var(--space-4);
    }

    .dashboard-head[b-8wh5o8z0ry],
    .dashboard.no-bar .dashboard-head[b-8wh5o8z0ry] {
        flex-direction: column;
        align-items: stretch;
        padding: var(--space-4);
    }

    .action-buttons[b-8wh5o8z0ry] {
        flex-wrap: wrap-reverse;
        justify-content: flex-end;
    }

    h1[b-8wh5o8z0ry] {
        font-size: 24px;
        white-space: normal;
    }

    .dashboard-content[b-8wh5o8z0ry] {
        padding: var(--space-4) var(--space-4) var(--space-5);
    }
}

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

    to {
        transform: none;
        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;
}

/* Raised icon button: lighter surface plus shadow, muted icon. Hover lifts it. */
.action-button[b-m3oor7cjd2] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 36px;
    height: 36px;
    box-sizing: border-box;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    background: var(--color-surface-raised);
    box-shadow: var(--elevation-1);
    color: var(--color-text-muted);
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
    animation: action-button-in-b-m3oor7cjd2 .2s ease-out;
}

    /* 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:hover:not(:disabled)[b-m3oor7cjd2] {
        box-shadow: var(--elevation-2);
        transform: translateY(-1px);
        color: var(--color-text);
    }

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

    /* Labeled: a real button with icon and text. */
    .action-button.labeled[b-m3oor7cjd2] {
        width: auto;
        padding: 0 var(--space-4);
        color: var(--color-text);
    }

    .action-button.primary[b-m3oor7cjd2] {
        background: var(--color-primary);
        box-shadow: var(--shadow-primary);
        color: var(--color-on-primary);
    }

        .action-button.primary:hover:not(:disabled)[b-m3oor7cjd2] {
            background: var(--color-primary-hover);
            box-shadow: var(--shadow-primary);
            color: var(--color-on-primary);
        }

    .action-button.red[b-m3oor7cjd2] {
        background: var(--color-danger);
        box-shadow: var(--shadow-danger);
        color: var(--color-on-danger);
    }

        .action-button.red:hover:not(:disabled)[b-m3oor7cjd2] {
            background: var(--color-danger);
            color: var(--color-on-danger);
            filter: brightness(1.1);
        }

    .action-button:disabled[b-m3oor7cjd2] {
        opacity: .45;
        box-shadow: none;
        cursor: not-allowed;
    }

@keyframes action-button-in-b-m3oor7cjd2 {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}
/* /Components/Shared/GenericUI/Button.razor.rz.scp.css */
/* No frames: the default (secondary) button is a raised surface with a shadow and
   lifts on hover; only the one primary action per view is filled.
   Height comes from padding + line-height (11 + 14 + 11 = 36px), so a caller that
   tightens the padding (e.g. a panel head) also gets a smaller button. */
.button-container[b-mp1ermhx99] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 11px var(--space-4);
    border: 0;
    border-radius: var(--radius-md);
    background: var(--color-surface-raised);
    box-shadow: var(--elevation-1);
    color: var(--color-text);
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: 500;
    line-height: 1;
    text-align: center;
    text-wrap: nowrap;
    cursor: pointer;
    transition: background var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

/* Icon + text inside the button keep a steady gap. */
.button[b-mp1ermhx99] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

    .button-container:hover:not(:disabled)[b-mp1ermhx99] {
        box-shadow: var(--elevation-2);
        transform: translateY(-1px);
    }

    .button-container:disabled[b-mp1ermhx99] {
        opacity: .5;
        box-shadow: none;
        cursor: not-allowed;
    }

    /* Toggle state (e.g. a view switch): the raised surface takes on an accent
       tint, never the fill — it must not compete with the primary action. */
    .button-container.selected[b-mp1ermhx99] {
        background: linear-gradient(var(--accent-tint), var(--accent-tint)), var(--color-surface-raised);
        color: var(--color-primary);
    }

        .button-container.selected:hover:not(:disabled)[b-mp1ermhx99] {
            background: linear-gradient(var(--accent-tint-strong), var(--accent-tint-strong)), var(--color-surface-raised);
        }

    /* Text on the accent fill is dark — white on cyan is unreadable. */
    .button-container.primary[b-mp1ermhx99] {
        background: var(--color-primary);
        box-shadow: var(--shadow-primary);
        color: var(--color-on-primary);
    }

        .button-container.primary:hover:not(:disabled)[b-mp1ermhx99] {
            background: var(--color-primary-hover);
            box-shadow: var(--shadow-primary);
        }

    /* Irreversible action: tinted red with a red glow underneath, never filled —
       it must not look like the default. */
    .button-container.destructive[b-mp1ermhx99] {
        background: rgba(var(--color-danger-rgb), .14);
        box-shadow: var(--shadow-danger);
        color: var(--color-danger);
    }

        .button-container.destructive:hover:not(:disabled)[b-mp1ermhx99] {
            background: rgba(var(--color-danger-rgb), .22);
            box-shadow: var(--shadow-danger);
        }

    .button-container:active:not(:disabled)[b-mp1ermhx99] {
        transform: translateY(1px);
    }
/* /Components/Shared/GenericUI/Callout.razor.rz.scp.css */
/* Hint box: a tinted surface in the status colour, no frame — the icon carries the
   colour, the text stays readable in the normal text colour. */
.callout[b-zhv5tujfk9] {
    --callout-rgb: var(--color-primary-rgb);
    --callout-color: var(--color-primary);
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px var(--space-3);
    border-radius: var(--radius-md);
    background: rgba(var(--callout-rgb), .12);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    line-height: 1.45;
}

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

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

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

    .callout.error[b-zhv5tujfk9] {
        --callout-rgb: var(--color-danger-rgb);
        --callout-color: var(--color-danger);
    }

.callout-content[b-zhv5tujfk9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    align-items: flex-start;
    min-width: 0;
}

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

    .callout-content[b-zhv5tujfk9]  a {
        color: var(--color-primary);
    }

        .callout-content[b-zhv5tujfk9]  a:hover {
            color: var(--color-primary-hover);
        }
/* /Components/Shared/GenericUI/CheckboxField.razor.rz.scp.css */
/* Every use is an on/off setting, so the checkbox is drawn as a switch: the track
   lies sunken like a field, the knob sits raised on it. It stays a native checkbox
   underneath: keyboard, form semantics and the global :focus-visible outline keep
   working. */
.checkbox-field[b-mxwu3v8zpj] {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

    .checkbox-field input[b-mxwu3v8zpj] {
        appearance: none;
        -webkit-appearance: none;
        position: relative;
        flex: none;
        width: 40px;
        height: 24px;
        margin: 0;
        box-sizing: border-box;
        border: 0;
        border-radius: var(--radius-full);
        background: var(--color-well);
        box-shadow: var(--shadow-inset);
        cursor: pointer;
        transition: background var(--transition-base);
    }

        .checkbox-field input[b-mxwu3v8zpj]::before {
            content: "";
            position: absolute;
            top: 3px;
            left: 3px;
            width: 18px;
            height: 18px;
            border-radius: var(--radius-full);
            background: var(--color-text-muted);
            box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
            transition: transform var(--transition-base), background var(--transition-base);
        }

        .checkbox-field input:hover[b-mxwu3v8zpj]::before {
            background: var(--color-text);
        }

        /* On: the well fills with the accent; the inset shadow keeps it sunken. */
        .checkbox-field input:checked[b-mxwu3v8zpj] {
            background: rgba(var(--color-primary-rgb), .55);
        }

            .checkbox-field input:checked[b-mxwu3v8zpj]::before {
                background: var(--color-text);
                transform: translateX(16px);
            }

    /* Label="" (the switch sits next to its own caption) must not leave a gap. */
    .checkbox-field span:empty[b-mxwu3v8zpj] {
        display: none;
    }
/* /Components/Shared/GenericUI/ContextMenu.razor.rz.scp.css */
.context-menu[b-65nk6m9u6y] {
    position: absolute;
    z-index: 1250;
}

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

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

    .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;
    }

/* Floating material: the highest surface step with a deep shadow, no frame. */
.context-wrapper[b-65nk6m9u6y] {
    position: absolute;
    z-index: 1250;
    width: 250px;
    box-sizing: border-box;
    padding: var(--space-2);
    border-radius: var(--radius-lg);
    background: var(--color-surface-overlay);
    box-shadow: var(--elevation-3);
    overflow: hidden;
    animation: menu-in-b-65nk6m9u6y .18s ease-out;
}

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

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

.center .context-wrapper[b-65nk6m9u6y] {
    left: 50%;
    right: auto;
    translate: -50% 0;
}

ul[b-65nk6m9u6y] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
}

/* Kept in the markup for compatibility; the new material needs no accent line. */
.horizontal-line[b-65nk6m9u6y] {
    display: none;
}

@keyframes menu-in-b-65nk6m9u6y {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(.97);
    }

    to {
        opacity: 1;
        transform: none;
    }
}
/* /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: var(--space-2) var(--space-3);
        border: 0;
        border-radius: var(--radius-md);
        background: transparent;
        transition: background var(--transition-base);
        font-family: inherit;
        font-size: var(--font-size-sm);
        display: grid;
        grid-template-columns: 18px 1fr auto;
        gap: var(--space-3);
        align-items: center;
        color: var(--color-text);
        cursor: pointer;
        user-select: none;
        text-decoration: none;
        text-align: left;
    }

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

        li > button:focus-visible[b-2abq92aktr],
        li > a:focus-visible[b-2abq92aktr] {
            outline: 2px solid var(--color-primary-hover);
            outline-offset: -2px;
        }

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

        li.red > button:hover[b-2abq92aktr],
        li.red > a:hover[b-2abq92aktr] {
            background: rgba(var(--color-danger-rgb), .15);
        }

    li p[b-2abq92aktr] {
        margin: 0;
        padding: 0;
        font-size: var(--font-size-sm);
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.icon[b-2abq92aktr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    color: var(--color-text-muted);
}
/* /Components/Shared/GenericUI/EmptyState.razor.rz.scp.css */
/* Empty = a sunken well waiting to be filled; a leading icon picks up the accent,
   dimmed. */
.empty-state[b-dbg5k0gp0h] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-6) var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--color-well);
    box-shadow: var(--shadow-inset);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    text-align: center;
    user-select: none;
}

    .empty-state[b-dbg5k0gp0h]  > i {
        margin-bottom: var(--space-1);
        font-size: 22px;
        color: var(--color-primary);
        opacity: .7;
    }

    .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: 6px;
}

.form-field-label[b-uhs3s7f3kn] {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    user-select: none;
}

/* Raw inputs dropped into a field look like the generic Input: a sunken well. */
.form-field[b-uhs3s7f3kn]  input:not([type="checkbox"]):not([type="radio"]) {
    height: 36px;
    box-sizing: border-box;
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-md);
    background: var(--color-well);
    box-shadow: var(--shadow-inset);
    color: var(--color-text);
    font: inherit;
    font-size: var(--font-size-sm);
    outline: none;
    transition: box-shadow var(--transition-fast);
}

    .form-field[b-uhs3s7f3kn]  input:not([type="checkbox"]):not([type="radio"]):focus {
        box-shadow: var(--shadow-inset), var(--shadow-focus);
    }

    .form-field[b-uhs3s7f3kn]  input::placeholder {
        color: var(--color-text-muted);
    }
/* /Components/Shared/GenericUI/Input.razor.rz.scp.css */
/* Same field as FormField and Select: a sunken well, focus lights it up in the
   accent instead of drawing a frame. */
input[b-5qd387kku7] {
    height: 36px;
    box-sizing: border-box;
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-md);
    background: var(--color-well);
    box-shadow: var(--shadow-inset);
    color: var(--color-text);
    font-family: inherit;
    font-size: var(--font-size-sm);
    outline: none;
    transition: box-shadow var(--transition-fast);
}

    input:focus[b-5qd387kku7] {
        box-shadow: var(--shadow-inset), var(--shadow-focus);
    }

    input[readonly][b-5qd387kku7] {
        color: var(--color-text-muted);
    }

    input[b-5qd387kku7]::placeholder {
        color: var(--color-text-muted);
    }
/* /Components/Shared/GenericUI/ListItemButton.razor.rz.scp.css */
/* Icon button of a list row: transparent and muted at rest, never framed. On
   hover it rises one surface step above the (raised) list card it sits in. */
.list-item-button[b-rjfl6rcivg] {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    padding: var(--space-2);
    box-sizing: border-box;
    /* Reset for the native button/anchor element. */
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-muted);
    font-family: inherit;
    font-size: var(--font-size-sm);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base), box-shadow var(--transition-base);
}

    .list-item-button:hover[b-rjfl6rcivg] {
        background: var(--color-surface-overlay);
        box-shadow: var(--elevation-1);
        color: var(--color-text);
    }

    .list-item-button:focus-visible[b-rjfl6rcivg] {
        outline: 2px solid var(--color-primary-hover);
        outline-offset: -2px;
    }

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

    /* Removing rises like every other row button — the red only tints its surface. */
    .list-item-button.remove:hover[b-rjfl6rcivg] {
        background: linear-gradient(rgba(var(--color-danger-rgb), .14), rgba(var(--color-danger-rgb), .14)), var(--color-surface-overlay);
        color: var(--color-danger);
    }

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


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

    50% {
        transform: scale(.92)
    }

    100% {
        transform: scale(1)
    }
}
/* /Components/Shared/GenericUI/ListView.razor.rz.scp.css */
/* Grouped list as a raised card. No lines between the rows: they are separated by
   a little space, and each row rounds its own hover fill. The selected row rises
   one surface step above the card. The leading icon sits on an accent-tinted chip
   (the icons are white SVGs, which read well on it). */
ul[b-2nk7gn7l5x] {
    list-style: none;
    padding: var(--space-1);
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--color-text);
    border-radius: var(--radius-lg);
    background: var(--color-surface-raised);
    box-shadow: var(--elevation-1);
}

li[b-2nk7gn7l5x] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    border-radius: var(--radius-md);
    background: transparent;
    transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

    li:hover[b-2nk7gn7l5x] {
        background: var(--surface-hover);
    }

    li.selected[b-2nk7gn7l5x] {
        background: var(--color-surface-overlay);
        box-shadow: var(--elevation-1);
    }

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

    .list-item-clickable:focus-visible[b-2nk7gn7l5x] {
        outline: 2px solid var(--color-primary-hover);
        outline-offset: -2px;
        border-radius: var(--radius-md);
    }

/* Icon chip */
.icon[b-2nk7gn7l5x] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    padding: 7px;
    box-sizing: border-box;
    border-radius: var(--radius-md);
    background: var(--accent-tint);
    transition: background var(--transition-fast);
}

li:hover .icon[b-2nk7gn7l5x],
li.selected .icon[b-2nk7gn7l5x] {
    background: var(--accent-tint-strong);
}

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

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

    .list-item-head p.list-item-title[b-2nk7gn7l5x] {
        margin: 0;
        font-size: var(--font-size-sm);
        font-weight: 500;
        line-height: 1.3;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    li.selected .list-item-head p.list-item-title[b-2nk7gn7l5x] {
        color: var(--color-primary);
    }

    /* Facts line in mono. 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-family: var(--font-mono);
        font-size: var(--font-size-xs);
        line-height: 1.3;
        color: var(--color-text-muted);
        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: .3s;
            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: .3s;
            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.3em;
}

    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: var(--space-2);
}

/* 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: var(--space-2);
}

.sort-button[b-2nk7gn7l5x] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    font-size: 10px;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
}

    /* Rises above the list card, like the row buttons on the right. */
    .sort-button:hover:not(:disabled)[b-2nk7gn7l5x] {
        background: var(--color-surface-overlay);
        box-shadow: var(--elevation-1);
        color: var(--color-text);
    }

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

    .sort-button:focus-visible[b-2nk7gn7l5x] {
        outline: 2px solid var(--color-primary-hover);
        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: var(--space-1);
    padding: var(--space-3) 0 0;
    color: var(--color-text);
}

.pager-step[b-qysk5vr0kq],
.pager-page[b-qysk5vr0kq] {
    min-width: 32px;
    height: 32px;
    padding: 0 var(--space-2);
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-muted);
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.pager-step[b-qysk5vr0kq] {
    font-size: var(--font-size-xs);
}

    .pager-step:hover:not(:disabled)[b-qysk5vr0kq],
    .pager-page:hover:not(.current)[b-qysk5vr0kq] {
        background: var(--surface-hover);
        color: var(--color-text);
    }

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

    /* The current page is raised, the number in the accent. */
    .pager-page.current[b-qysk5vr0kq] {
        background: var(--color-surface-raised);
        box-shadow: var(--elevation-1);
        color: var(--color-primary);
        font-weight: 600;
        cursor: default;
    }

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

.pager-gap[b-qysk5vr0kq] {
    padding: 0 2px;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

/* "1–25 von 412" is a fact — mono. */
.pager-info[b-qysk5vr0kq] {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}
/* /Components/Shared/GenericUI/Select.razor.rz.scp.css */
/* Looks like the text fields (Input, FormField): a sunken well that lights up in
   the accent while open or focused. */
.select-trigger[b-mi0zd4no6s] {
    width: 100%;
    height: 36px;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-md);
    background: var(--color-well);
    box-shadow: var(--shadow-inset);
    color: var(--color-text);
    font-family: inherit;
    font-size: var(--font-size-sm);
    text-align: left;
    cursor: pointer;
    transition: box-shadow var(--transition-fast);
    box-sizing: border-box;
}

    .select-trigger:hover:not(:disabled) .select-chevron[b-mi0zd4no6s] {
        color: var(--color-text);
    }

    .select-trigger.open[b-mi0zd4no6s],
    .select-trigger:focus-visible[b-mi0zd4no6s] {
        outline: none;
        box-shadow: var(--shadow-inset), var(--shadow-focus);
    }

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

    .select-trigger.compact[b-mi0zd4no6s] {
        height: 30px;
        padding: 0 10px;
        font-size: var(--font-size-xs);
    }

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

.select-placeholder[b-mi0zd4no6s] {
    color: var(--color-text-muted);
}

.select-chevron[b-mi0zd4no6s] {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--color-text-muted);
    transition: transform var(--transition-fast), color var(--transition-fast);
}

.select-trigger.open .select-chevron[b-mi0zd4no6s] {
    transform: rotate(180deg);
    color: var(--color-primary);
}
/* /Components/Shared/GenericUI/SelectDropdown.razor.rz.scp.css */
/* Rows like the context menu items: flat, hover lifts, the current value is
   tinted with the accent. The surface (overlay, floating shadow) comes from PopupHost. */
.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).
   It is a search field, so it lies sunken like every other field — no rule below it. */
.select-search[b-7b8uxjjui9] {
    position: sticky;
    top: -4px;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: -4px -4px 4px -4px;
    padding: 10px var(--space-3);
    background: var(--color-well);
    box-shadow: var(--shadow-inset);
}

    .select-search i[b-7b8uxjjui9] {
        font-size: 12px;
        color: var(--color-text-muted);
    }

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

        .select-search input[b-7b8uxjjui9]::placeholder {
            color: var(--color-text-muted);
        }

.select-note[b-7b8uxjjui9] {
    padding: 6px var(--space-3);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.select-option[b-7b8uxjjui9] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 34px;
    box-sizing: border-box;
    padding: 6px var(--space-3);
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text);
    font-family: inherit;
    font-size: var(--font-size-sm);
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transition-fast);
}

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

    .select-option:hover[b-7b8uxjjui9] {
        background: var(--surface-hover);
    }

    .select-option.selected[b-7b8uxjjui9] {
        background: var(--accent-tint);
        color: var(--color-primary);
    }

    /* "(nicht gesetzt)" is set apart from the values by space, not a rule. */
    .select-option.clear[b-7b8uxjjui9] {
        margin: 0 0 var(--space-2);
    }

.select-option-label.muted[b-7b8uxjjui9] {
    color: var(--color-text-muted);
}
/* /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;
}

/* Plain icon button like the other icon buttons in page heads: transparent at
   rest, raised on hover, raised with the accent while its tooltip is open. */
.trigger[b-qhivzvlmzm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-muted);
    font-size: 16px;
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base), box-shadow var(--transition-base);
}

    .trigger:hover[b-qhivzvlmzm] {
        background: var(--color-surface-raised);
        box-shadow: var(--elevation-1);
        color: var(--color-text);
    }

.open .trigger[b-qhivzvlmzm] {
    background: var(--color-surface-raised);
    box-shadow: var(--elevation-1);
    color: var(--color-primary);
}

/* Same material as the context menus: floating surface, deep shadow, no frame. */
.popover[b-qhivzvlmzm] {
    position: absolute;
    z-index: 3;
    width: max-content;
    max-width: min(380px, 80vw);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--color-surface-overlay);
    box-shadow: var(--elevation-3);
    color: var(--color-text);
    font-size: var(--font-size-xs);
    text-align: left;
    cursor: default;
    animation: shortcut-hint-in-b-qhivzvlmzm .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%);
    }

/* Section-head look. */
.popover-title[b-qhivzvlmzm] {
    margin-bottom: 10px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-text-muted);
}

.popover ul[b-qhivzvlmzm] {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.popover li[b-qhivzvlmzm] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-3);
    align-items: center;
}

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

.plus[b-qhivzvlmzm] {
    color: var(--color-text-muted);
}

.description[b-qhivzvlmzm] {
    font-size: 13px;
    color: var(--color-text);
}

/* Set apart from the list by space, not a rule. */
.note[b-qhivzvlmzm] {
    margin: var(--space-4) 0 0 0;
    font-size: var(--font-size-xs);
    line-height: 1.4;
    color: var(--color-text-muted);
}

/* Keys as small dark keycaps that cast a shadow — no frame. */
kbd[b-qhivzvlmzm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    box-sizing: border-box;
    border-radius: var(--radius-sm);
    background: var(--color-well);
    box-shadow: var(--elevation-1);
    color: var(--color-text);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    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 .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 */
/* Badge: a pill tinted with the status colour, text in that colour — no frame. */
.status-badge[b-uzo7sed2rp] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    background: var(--surface-hover);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: 500;
    line-height: 1.6;
    white-space: nowrap;
    user-select: none;
}

    .status-badge.ok[b-uzo7sed2rp] {
        background: rgba(var(--color-success-rgb), .18);
        color: var(--color-success);
    }

    .status-badge.warn[b-uzo7sed2rp] {
        background: rgba(var(--color-warning-rgb), .18);
        color: var(--color-warning);
    }

    .status-badge.bad[b-uzo7sed2rp] {
        background: rgba(var(--color-danger-rgb), .18);
        color: var(--color-danger);
    }
/* /Components/Shared/GenericUI/Table.razor.rz.scp.css */
/* No lines anywhere: head and body share one block, the head sits on a darker
   floor, rows are told apart by a faint zebra and light up under the cursor.
   The block is one surface step down and casts no shadow — tables live inside
   cards and dialogs, where it reads as an embedded area. */
.table[b-xnqegcjpl4] {
    display: flex;
    flex-direction: column;
    /* In a height-bound parent (dialog) the table shrinks to fit instead of
       overflowing it; only the frame scrolls then, head and pager stay put. */
    min-height: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

.table-frame[b-xnqegcjpl4] {
    min-height: 0;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    overflow-x: hidden;
    overflow-y: auto;
}

/* Narrow devices: the table scrolls horizontally instead of squeezing the columns.
   Head and body sit in the same scroll box, so the columns stay aligned. */
@media (max-width: 900px) {
    .table-frame[b-xnqegcjpl4] {
        overflow-x: auto;
    }

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

/* A table with its own MinWidth scrolls whenever its card is narrower — the card
   is squeezed by the side columns, not only by a small screen. */
.table-frame.scrolls-x[b-xnqegcjpl4] {
    overflow-x: auto;
}

.row[b-xnqegcjpl4] {
    display: grid;
    align-items: center;
    padding: 0 var(--space-2) 0 14px;
    cursor: pointer;
    grid-gap: var(--space-3);
    /* Numbers (dates, counts) line up from row to row. */
    font-variant-numeric: tabular-nums;
}

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

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

/* The head sticks to the top of the frame while the rows scroll beneath it. */
.tablehead[b-xnqegcjpl4] {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* The floor sits on the row, not on .tablehead: on narrow screens the row is wider
   than the scroll box and the floor has to follow it. Opaque (darker floor over the
   frame's surface), otherwise the rows show through the sticky head. */
.tablehead .row[b-xnqegcjpl4] {
    min-height: 40px;
    user-select: none;
    cursor: default;
    background: linear-gradient(rgba(0, 0, 0, .14), rgba(0, 0, 0, .14)), var(--color-surface);
}

.column[b-xnqegcjpl4] {
    padding: 6px 0;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    cursor: pointer;
    /* Reset for the sortable header buttons. */
    border: none;
    background: transparent;
    font-family: inherit;
    text-align: left;
    /* Section-head look: small, muted, wide-tracked. */
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    color: var(--color-text-muted);
    transition: color var(--transition-fast);
}

    .column:hover[b-xnqegcjpl4] {
        color: var(--color-text);
    }

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

    .column:focus-visible[b-xnqegcjpl4] {
        outline: 2px solid var(--color-primary-hover);
        outline-offset: -2px;
        border-radius: var(--radius-sm);
    }

.sortindicator[b-xnqegcjpl4] {
    font-size: var(--font-size-xs);
}

.tablebody[b-xnqegcjpl4] {
    display: flex;
    flex-direction: column;
}

    .tablebody .row[b-xnqegcjpl4] {
        min-height: 48px;
        transition: background var(--transition-fast);
    }

        .tablebody .row:nth-child(even)[b-xnqegcjpl4] {
            background: rgba(255, 255, 255, .02);
        }

        .tablebody .row:not(.noclick):hover[b-xnqegcjpl4] {
            background: var(--surface-hover);
        }

[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;
}

/* Segment tabs: the header is a sunken well that hugs its tabs, the active tab
   sits raised in it. No underline, no hairline. */
.tabs-header[b-tr7e3qcfwa] {
    position: relative;
    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;
    /* As wide as its tabs, at most the full width — then it scrolls sideways. */
    align-self: flex-start;
    max-width: 100%;
    box-sizing: border-box;
    gap: var(--space-1);
    padding: var(--space-1);
    border-radius: var(--radius-lg);
    background: var(--color-well);
    box-shadow: var(--shadow-inset);
    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: var(--surface-hover);
        border-radius: var(--radius-full);
    }

/* The well hugs its tabs, so the filler has nothing to fill (and would only add
   a trailing gap). */
.tabs-header-spacer[b-tr7e3qcfwa] {
    display: none;
}

/* The raised surface behind the active tab: one element that slides from tab to tab.
   tabs.js sets its size and position and then data-ready; until then (first paint)
   the active tab carries the surface itself. */
.tabs-marker[b-tr7e3qcfwa] {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: var(--radius-md);
    background: var(--color-surface-raised);
    box-shadow: var(--elevation-1);
    opacity: 0;
    pointer-events: none;
}

    .tabs-marker[data-ready][b-tr7e3qcfwa] {
        opacity: 1;
        transition: transform .28s cubic-bezier(.2, .8, .2, 1), width .28s cubic-bezier(.2, .8, .2, 1);
    }

        .tabs-marker[data-ready] ~ .tab-button.active[b-tr7e3qcfwa] {
            background: transparent;
            box-shadow: none;
        }

.tab-button[b-tr7e3qcfwa] {
    /* Above the marker. */
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 32px;
    padding: 0 var(--space-3);
    box-sizing: border-box;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-muted);
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);
}

    .tab-button:hover[b-tr7e3qcfwa] {
        color: var(--color-text);
    }

    .tab-button.active[b-tr7e3qcfwa] {
        background: var(--color-surface-raised);
        box-shadow: var(--elevation-1);
        color: var(--color-text);
    }

    .tab-button:focus-visible[b-tr7e3qcfwa] {
        outline: 2px solid var(--color-primary-hover);
        outline-offset: -2px;
    }

    .tab-button i[b-tr7e3qcfwa] {
        font-size: 13px;
    }

    .tab-button.active i[b-tr7e3qcfwa] {
        color: var(--color-primary);
    }

/* Small pill with a count. */
.tab-button-badge[b-tr7e3qcfwa] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    box-sizing: border-box;
    border-radius: var(--radius-full);
    background: var(--surface-hover);
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
}

.tab-button.active .tab-button-badge[b-tr7e3qcfwa] {
    background: var(--accent-tint-strong);
    color: var(--color-primary);
}

.tabs-body[b-tr7e3qcfwa] {
    padding-top: var(--space-4);
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* min-height: 0 down the chain: in a height-bound parent (a page that must not
   scroll as a whole) the panel shrinks to fit, and its content scrolls inside. */
[b-tr7e3qcfwa] .tab-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    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 */
/* Tile: a raised surface with a shadow instead of a frame — preview area on top,
   footer below. Hover lifts it, "shown" makes it glow. */
.media-tile[b-1e17m569cu] {
    position: relative;
    top: 0;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--color-surface-raised);
    box-shadow: var(--elevation-1);
    color: var(--color-text);
    cursor: pointer;
    transition: top var(--transition-base), box-shadow var(--transition-base);
    /* "backwards", not "forwards": a held end state would override the tile's own
       styles afterwards (and keep a transform = stacking context on every tile). */
    animation: media-tile-in-b-1e17m569cu .25s ease-out backwards;
}

    /* Lifted through "top", not a transform: a transform would turn the tile into
       the containing block of the fixed backdrop of an open action menu, which
       then no longer covers the page and stretches the scroll area instead. */
    .media-tile:hover[b-1e17m569cu] {
        top: -2px;
        box-shadow: var(--elevation-2);
    }

    /* Open context menus of the footer actions must paint above the next tiles. */
    .media-tile:hover[b-1e17m569cu],
    .media-tile:focus-within[b-1e17m569cu] {
        z-index: 2;
    }

    /* Deep link target: a soft accent halo — visible, but weaker than the live glow. */
    .media-tile.highlighted[b-1e17m569cu] {
        box-shadow: var(--elevation-1), 0 0 18px rgba(var(--color-primary-rgb), .22);
    }

        .media-tile.highlighted:hover[b-1e17m569cu] {
            box-shadow: var(--elevation-2), 0 0 18px rgba(var(--color-primary-rgb), .22);
        }

    /* On the screen: the tile glows in the accent, the footer is tinted. */
    .media-tile.shown[b-1e17m569cu],
    .media-tile.shown:hover[b-1e17m569cu] {
        box-shadow: var(--shadow-glow);
        cursor: default;
    }

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

/* --- Footer (screen and picture variant) --- */
.tile-foot[b-1e17m569cu] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    box-sizing: border-box;
    padding: var(--space-1) 6px var(--space-1) 14px;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    transition: background var(--transition-base);
}

.media-tile.shown .tile-foot[b-1e17m569cu] {
    background: var(--accent-tint);
}

/* Kind of medium, e.g. "STROPHE 1". */
.tile-label[b-1e17m569cu] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    user-select: none;
}

    .tile-label span[b-1e17m569cu] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.media-tile.shown .tile-label[b-1e17m569cu] {
    color: var(--color-primary);
}

.tile-text[b-1e17m569cu] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
    user-select: none;
}

.tile-name[b-1e17m569cu] {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tile-meta[b-1e17m569cu] {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-tag[b-1e17m569cu] {
    flex-shrink: 0;
    padding: 2px 6px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .08em;
    user-select: none;
}

/* Icon button: hides the medium from the screen. Flat on the footer, it rises
   in danger colours on hover. */
.hide-button[b-1e17m569cu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

    .hide-button:hover[b-1e17m569cu] {
        background: rgba(var(--color-danger-rgb), .15);
        box-shadow: var(--elevation-1);
        color: var(--color-danger);
    }

/* Actions of the caller (edit, delete, menu): quiet until the tile is hovered or
   focused. Touch devices have no hover, so they keep them visible. */
.tile-actions[b-1e17m569cu] {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.media-tile:hover .tile-actions[b-1e17m569cu],
.media-tile:focus-within .tile-actions[b-1e17m569cu] {
    opacity: 1;
}

@media (hover: none) {
    .tile-actions[b-1e17m569cu] {
        opacity: 1;
    }
}

    /* Inside a tile the action buttons lie flat on the footer and only rise on hover. */
    .tile-actions[b-1e17m569cu]  .action-button {
        width: 32px;
        height: 32px;
        background: transparent;
        box-shadow: none;
    }

        .tile-actions[b-1e17m569cu]  .action-button:hover:not(:disabled) {
            background: var(--color-surface-raised);
            box-shadow: var(--elevation-1);
        }

/* --- Screen variant: what the screen shows, on black --- */
.screen-preview[b-1e17m569cu] {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: var(--tile-aspect, 16 / 9);
    box-sizing: border-box;
    padding: 14px 20px;
    overflow: hidden;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: #000;
    color: var(--color-text);
    text-align: center;
    user-select: none;
}

    .screen-preview .text[b-1e17m569cu] {
        max-height: 100%;
        overflow: hidden;
        font-size: var(--font-size-xs);
        line-height: 1.5;
    }

    .screen-preview.fill[b-1e17m569cu] {
        position: relative;
        padding: 0;
    }

        .screen-preview.fill .text[b-1e17m569cu] {
            position: absolute;
            inset: 0;
            max-height: none;
        }

[b-1e17m569cu] p {
    margin: 0;
}

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

/* --- Picture variant --- */
.photo-frame[b-1e17m569cu] {
    position: relative;
    aspect-ratio: var(--tile-aspect, 16 / 10);
    overflow: hidden;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    /* One step below the tile: the letterbox reads as the picture's area, the
       footer stays on the tile surface — no line needed between them. */
    background: var(--color-surface);
}

    /* 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] {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

/* Stack of the first previews — a collection at a glance. All layers are the same
   size and sit inset, so offset and rotation stay inside the preview area. */
    /* 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: 12%;
        top: 16%;
        width: 70%;
        height: 70%;
        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: var(--color-bg);
        border-radius: var(--radius-sm);
        box-shadow: var(--shadow-e1);
    }

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

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

    .photo-frame.stack .depth-2[b-1e17m569cu] {
        z-index: 1;
        transform: translate(8%, -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: 28px;
    color: var(--color-text-muted);
    opacity: .7;
}

.media-tile.photo .tile-foot[b-1e17m569cu] {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
}

/* --- List variant (IsList): 52px raised row, no preview --- */
.media-tile.list[b-1e17m569cu] {
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
    min-height: 52px;
    padding: 6px 6px 6px 10px;
    border-radius: var(--radius-md);
}

    /* A row only rises by a pixel — a list of them would jump otherwise. */
    .media-tile.list:hover[b-1e17m569cu] {
        top: -1px;
    }

    /* On the screen: glows like the tiles, the title takes the accent. */
    .media-tile.list.shown .tile-name[b-1e17m569cu] {
        color: var(--color-primary);
    }

.list-chip[b-1e17m569cu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: var(--accent-tint);
    color: var(--color-primary);
    font-size: 13px;
}

.media-tile.list.shown .list-chip[b-1e17m569cu] {
    background: var(--accent-tint-strong);
}

@keyframes media-tile-in-b-1e17m569cu {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}
/* /Components/Shared/Modals/Alert.razor.rz.scp.css */
.content-text[b-kawld1g0ys] {
    display: flex;
    align-items: flex-start;
}

p[b-kawld1g0ys] {
    max-width: 500px;
    margin: 0;
    color: var(--color-text);
    line-height: 1.5;
}
/* /Components/Shared/Modals/ModalTemplate.razor.rz.scp.css */
/* Modal: head (title left, close right), content and footer (buttons right) with no
   rules between them — the footer sits on a darker floor instead; only the middle
   scrolls. The surface itself (overlay, radius, floating shadow) comes from .modal
   in Modals.razor.css. */
.modal-template[b-jquaf3b1cf] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    min-width: min(500px, calc(100vw - 2 * var(--space-4)));
    box-sizing: border-box;
}

.modal-title[b-jquaf3b1cf] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: none;
    padding: var(--space-4) var(--space-3) var(--space-1) var(--space-4);
}

h2[b-jquaf3b1cf] {
    flex: 1;
    min-width: 0;
    margin: 0;
    color: var(--color-text);
    font-size: var(--font-size-md);
    font-weight: 700;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    user-select: none;
}

.modal-close[b-jquaf3b1cf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    margin: calc(-1 * var(--space-1)) 0;
    border: none;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--font-size-md);
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base), box-shadow var(--transition-base);
}

    /* The dialog is the top surface already: the button lightens a step and casts a shadow. */
    .modal-close:hover[b-jquaf3b1cf] {
        background: linear-gradient(var(--surface-hover), var(--surface-hover)), var(--color-surface-overlay);
        box-shadow: var(--elevation-1);
        color: var(--color-text);
    }

.modal-center[b-jquaf3b1cf] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    display: grid;
    /* The column may shrink below the content's width: a dialog narrowed by the
       viewport then really narrows its content (max-width: 100% takes hold) instead of
       scrolling sideways. Without a constraint it still takes the content's width. */
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-3) var(--space-4) var(--space-4);
    color: var(--color-text);
}

/* Buttons keep their natural width, right-aligned — the last one (primary) sits in
   the corner. A darker floor instead of a rule sets the footer apart. */
.modal-footer[b-jquaf3b1cf] {
    display: flex;
    flex: none;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: 14px var(--space-4);
    background: rgba(0, 0, 0, .16);
}

    .modal-footer:empty[b-jquaf3b1cf] {
        display: none;
    }
/* /Components/Shared/Modals/Prompt.razor.rz.scp.css */
.prompt-content[b-vnychjeft6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

p[b-vnychjeft6] {
    margin: 0;
    color: var(--color-text-muted);
    line-height: 1.5;
}

    /* No question text — no empty gap above the field. */
    p:empty[b-vnychjeft6] {
        display: none;
    }

/* Ways out of a problem, side by side under its message. */
.problem-actions[b-vnychjeft6] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
/* /Components/Shared/TileGrid.razor.rz.scp.css */
/* Grows with its content — the page (Dashboard) scrolls, not the grid, and the
   Dashboard also provides the bottom padding. */
.tile-grid[b-5j7csy89nn] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fill, minmax(var(--tile-min, 400px), 1fr));
    justify-content: start;
    align-content: start;
}

    .tile-grid.list[b-5j7csy89nn] {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }
/* /Components/Shared/Toasts.razor.rz.scp.css */
/* Bottom right, stacked upwards: the newest message stays closest to the corner.
   The page's ActionButtons sit in the Dashboard head now, so nothing down here
   needs to be cleared. */
.toast-host[b-g2ewrm9ynb] {
    position: fixed;
    right: var(--space-4);
    bottom: var(--space-5);
    z-index: 900;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: var(--space-3);
    max-width: min(460px, calc(100vw - 2 * var(--space-4)));
    pointer-events: none;
}

/* Floating surface with a lifted shadow, no frame; a 3px strip in the kind's colour
   along the top — resting dimmed (::before), with the countdown bar on top of it. */
.toast[b-g2ewrm9ynb] {
    --toast-accent: var(--color-primary);
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: min(320px, calc(100vw - 2 * var(--space-4)));
    box-sizing: border-box;
    padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--color-surface-overlay);
    box-shadow: var(--elevation-3);
    color: var(--color-text);
    font-size: var(--font-size-md);
    line-height: 1.45;
    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 .2s ease-out,
               toast-out-b-g2ewrm9ynb .3s ease-in calc(var(--ToastLife, 4000ms) - 300ms) forwards;
}

    .toast.success[b-g2ewrm9ynb] {
        --toast-accent: var(--color-success);
    }

    .toast.error[b-g2ewrm9ynb] {
        --toast-accent: var(--color-danger);
    }

    .toast[b-g2ewrm9ynb]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--toast-accent);
        opacity: .28;
    }

    /* The pointer on the toast holds the countdown (the server pauses in step). */
    .toast:hover[b-g2ewrm9ynb],
    .toast:hover .toast-bar[b-g2ewrm9ynb] {
        animation-play-state: paused;
    }

/* Kind is carried by the icon and the strip — no coloured border. */
.toast-icon[b-g2ewrm9ynb] {
    flex: none;
    align-self: flex-start;
    margin-top: 3px;
    font-size: 18px;
    color: var(--toast-accent);
}

.toast-message[b-g2ewrm9ynb] {
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

/* "Rückgängig": a quiet text button in the accent colour, like a link. */
.toast-action[b-g2ewrm9ynb] {
    flex: none;
    height: 34px;
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-primary);
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

    .toast-action:hover[b-g2ewrm9ynb] {
        background: var(--surface-hover);
        color: var(--color-primary-hover);
    }

    .toast-action:focus-visible[b-g2ewrm9ynb] {
        outline-offset: -2px;
    }

/* Remaining time as a bar along the top 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;
    top: 0;
    height: 3px;
    background: var(--toast-accent);
    transform-origin: left center;
    animation: toast-bar-run-b-g2ewrm9ynb var(--ToastLife, 4000ms) linear forwards;
}

@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 .2s linear calc(var(--ToastLife, 4000ms) - 200ms) forwards;
    }
}

@keyframes toast-fade-out-b-g2ewrm9ynb {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}
/* /Components/Songs/CcliNumberCell.razor.rz.scp.css */
/* No overflow clipping: it would cut off the shadow of "Nummer hinterlegen". */
.ccli-cell[b-kvgetrxul0] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    min-width: 0;
}

/* The number is a fact — mono. */
.ccli-number[b-kvgetrxul0] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
}

/* Copy and edit next to the number. */
.cell-action[b-kvgetrxul0] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

    /* Rises like the row buttons in the same table (ListItemButton). */
    .cell-action:hover[b-kvgetrxul0] {
        background: var(--color-surface-overlay);
        box-shadow: var(--elevation-1);
        color: var(--color-text);
    }
/* /Components/Songs/ModalCompareSongs.razor.rz.scp.css */
/* Wide enough for two columns of lyrics; narrower screens squeeze them. */
.compare[b-g7aro1wzwa] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 760px;
    max-width: 100%;
    min-width: 0;
}

/* Each song is a column card, one surface step above the dialog; the rows of both
   cards line up so facts sit next to each other. No rules — the gap between the
   columns does the separating. */
table[b-g7aro1wzwa] {
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: var(--space-2) 0;
    /* border-spacing also pads the outer edges — pulled back so the cards end flush
       with the callout above. */
    margin: 0 calc(-1 * var(--space-2));
    width: calc(100% + 2 * var(--space-2));
    font-size: var(--font-size-sm);
}

    table td:first-child[b-g7aro1wzwa],
    table th[scope="row"][b-g7aro1wzwa] {
        width: 110px;
    }

/* On a phone every pixel goes to the two songs: the label column gives way and each
   value carries its label above it (data-label in the markup). */
@media (max-width: 600px) {
    thead td:first-child[b-g7aro1wzwa],
    th[scope="row"][b-g7aro1wzwa] {
        display: none;
    }

    tbody td[b-g7aro1wzwa]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        color: var(--color-text-muted);
        font-size: var(--font-size-xs);
        font-weight: 500;
    }
}

thead th[b-g7aro1wzwa],
tbody td[b-g7aro1wzwa] {
    background: var(--color-surface-raised);
    color: var(--color-text);
    text-align: left;
    vertical-align: top;
    padding: var(--space-2) var(--space-3);
    min-width: 0;
    overflow-wrap: anywhere;
}

thead th[b-g7aro1wzwa] {
    padding-top: var(--space-3);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    font-weight: normal;
}

tbody tr:last-child td[b-g7aro1wzwa] {
    padding-bottom: var(--space-3);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Row labels: small and muted, like the eyebrows. */
th[scope="row"][b-g7aro1wzwa] {
    padding: var(--space-2) 0;
    text-align: left;
    vertical-align: top;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: 500;
    line-height: 28px;
}

.column-label[b-g7aro1wzwa] {
    display: block;
    margin-bottom: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* As long as both carry the number, its row is tinted — the surface stays, only its
   colour changes. */
tr.conflict td[b-g7aro1wzwa] {
    background: linear-gradient(rgba(var(--color-warning-rgb), .14), rgba(var(--color-warning-rgb), .14)), var(--color-surface-raised);
}

.ccli-entered[b-g7aro1wzwa] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--space-2);
    min-height: 28px;
}

/* Same look as the number in CcliNumberCell. */
.ccli-number[b-g7aro1wzwa] {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
}

.muted[b-g7aro1wzwa] {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

tbody td[b-g7aro1wzwa] {
    line-height: 1.5;
}

/* Plain lines, no screen preview — reading both texts side by side is the point. */
.lyrics[b-g7aro1wzwa] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.stanza[b-g7aro1wzwa] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--font-size-xs);
}

.stanza-label[b-g7aro1wzwa] {
    font-family: var(--font-mono);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}
/* /Components/Songs/ModalEditStanza.razor.rz.scp.css */
.edit-stanza[b-h42e8vfvjc] {
    display: grid;
    grid-template-rows: auto auto 400px;
    align-content: start;
    padding: 0;
    gap: var(--space-3);
}

/* TinyMCE frame styling lives in app.css — the grid row above sets the height. */
/* /Components/Songs/ModalHistory.razor.rz.scp.css */
/* Takes the height the dialog leaves and hands it to the table, which scrolls only
   its rows — the column head and the pager stay visible. min-width: 0 leaves the
   horizontal scrolling on narrow screens to the table, too. */
.history-wrapper[b-saiy1uxxcp] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}
/* /Components/Songs/ModalNewSong.razor.rz.scp.css */
.new-song[b-flsv1q1y8p] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    /* min() keeps the modal inside narrow screens. */
    min-width: min(360px, 100%);
}
/* /Components/Songs/ModalOpenReports.razor.rz.scp.css */
/* A fixed width: the table has few columns and would otherwise make the dialog
   narrow. min-height: 0 hands the dialog's height on to the table, which scrolls
   only its rows — head and pager stay visible (as in the history dialog). */
.open-reports[b-v6pbtrm33a] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 560px;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
}

/* Song and its CCLI number once, above the plays. */
.open-reports-song[b-v6pbtrm33a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-width: 0;
    padding: 0 var(--space-2);
}
/* /Components/Songs/ModalSelectStanza.razor.rz.scp.css */
.select-stanza[b-v2zd2ah95h] {
    overflow: auto;
}

ul[b-v2zd2ah95h] {
    margin: 0;
    padding: var(--space-1) 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-height: 500px;
    overflow: auto;
}

/* One stanza per block: type on top, the screen preview, actions below. A block
   inside the dialog sits one surface step below it — no frame. */
li[b-v2zd2ah95h] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    background: var(--color-surface-raised);
    user-select: none;
}

.title[b-v2zd2ah95h] {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.preview-tag[b-v2zd2ah95h] {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* What the screen shows — white on black. */
.preview[b-v2zd2ah95h] {
    position: relative;
    min-height: 40px;
    max-height: 160px;
    overflow: hidden;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: #000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .6);
    color: var(--color-text);
    font-size: var(--font-size-xs);
    line-height: 1.5;
    text-align: center;
}

    .preview[b-v2zd2ah95h]::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 40px;
        background: linear-gradient(transparent, #000);
    }

.action-buttons[b-v2zd2ah95h] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
}

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: var(--space-2) 0;
    padding: 0;
    gap: var(--space-2);
    min-height: 200px;
}

    ul.info-list li[b-j2h5gn01sx] {
        list-style: none;
        display: grid;
        gap: var(--space-3);
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }

.info-name[b-j2h5gn01sx] {
    display: flex;
    align-items: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

    .info-name p[b-j2h5gn01sx] {
        margin: 0;
    }
/* /Components/Songs/PresentationView.razor.rz.scp.css */
.view-wrapper[b-ssb4ks2plw] {
    display: block;
}

/* Two columns on a normal content width; the page (Dashboard) scrolls and brings
   the bottom padding. */
.song-stanzas[b-ssb4ks2plw] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    justify-content: start;
    align-content: start;
}

/* Same footprint as a stanza tile (it stretches to the row height) — the next tile
   of the grid, a sunken well like the shared AddTile. */
.create-stanza[b-ssb4ks2plw] {
    display: flex;
    min-height: 160px;
    box-sizing: border-box;
    border-radius: var(--radius-lg);
    background: var(--color-well);
    box-shadow: var(--shadow-inset);
    color: var(--color-text-muted);
    transition: box-shadow var(--transition-base), color var(--transition-base), background var(--transition-base);
}

    .create-stanza:hover[b-ssb4ks2plw] {
        box-shadow: var(--shadow-inset), var(--shadow-focus);
        color: var(--color-primary);
    }

    .create-stanza.drag-over[b-ssb4ks2plw] {
        box-shadow: var(--shadow-inset), var(--shadow-focus);
        background: var(--accent-tint);
        color: var(--color-primary);
    }

.create-stanza-button[b-ssb4ks2plw] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 0;
    border-radius: inherit;
    background: transparent;
    color: inherit;
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
}

    .create-stanza-button i[b-ssb4ks2plw] {
        font-size: var(--font-size-lg);
    }

/* Sits below the stanza grid — tells the operator that a presenter remote works. */
.keyboard-hint[b-ssb4ks2plw] {
    display: flex;
    align-items: center;
    padding: var(--space-3) 0 0;
}
/* /Components/Songs/Scores/ScoreEditor.razor.rz.scp.css */
/* Tools on top; below the score on paper, with the scan beside it while comparing;
   the ABC text at the bottom. Score and scan scroll on their own, the page does not. */
.score-editor[b-23so2ev1t2] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "tools"
        "score"
        "source";
    gap: var(--space-3);
    height: 100%;
    min-height: 0;
}

    .score-editor.with-scan[b-23so2ev1t2] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "tools tools"
            "score scan"
            "source source";
    }

/* --- Toolbar: groups of flat tools in sunken wells, like the segments. A tool
   rises on hover, sinks while pressed, and a toggle that is on (the selected note's
   value, its accidental …) is lit in the accent colour. --- */
.editor-tools[b-23so2ev1t2] {
    grid-area: tools;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.tool-group[b-23so2ev1t2] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: var(--space-1);
    border-radius: var(--radius-lg);
    background: var(--color-well);
    box-shadow: var(--shadow-inset);
}

.tool[b-23so2ev1t2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text);
    font-family: inherit;
    font-size: var(--font-size-md);
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
}

    .tool.text[b-23so2ev1t2] {
        padding: 0 var(--space-3);
        font-size: var(--font-size-sm);
    }

    .tool:hover:not(:disabled)[b-23so2ev1t2] {
        background: var(--color-surface-raised);
        box-shadow: var(--elevation-1);
    }

    .tool:active:not(:disabled)[b-23so2ev1t2] {
        background: var(--color-surface);
        box-shadow: var(--shadow-inset);
    }

    .tool[aria-pressed="true"][b-23so2ev1t2] {
        background: linear-gradient(var(--accent-tint-strong), var(--accent-tint-strong)), var(--color-surface-raised);
        box-shadow: var(--elevation-1);
        color: var(--color-primary);
    }

    .tool:disabled[b-23so2ev1t2] {
        color: var(--color-text-muted);
        opacity: .35;
        cursor: default;
    }

    .tool:focus-visible[b-23so2ev1t2] {
        outline-offset: -2px;
    }

    .tool.play[b-23so2ev1t2] {
        color: var(--color-primary);
    }

    /* Entering is a mode: a raised button that is filled while it is on. */
    .tool.mode[b-23so2ev1t2] {
        height: 42px;
        padding: 0 var(--space-4);
        background: var(--color-surface-raised);
        box-shadow: var(--elevation-1);
        font-size: var(--font-size-sm);
    }

        .tool.mode:hover[b-23so2ev1t2] {
            background: var(--color-surface-overlay);
            box-shadow: var(--elevation-2);
        }

        .tool.mode[aria-pressed="true"][b-23so2ev1t2] {
            background: var(--color-primary);
            box-shadow: var(--shadow-primary);
            color: var(--color-on-primary);
        }

            .tool.mode[aria-pressed="true"]:hover[b-23so2ev1t2] {
                background: var(--color-primary-hover);
            }

    .tool .stop-icon[b-23so2ev1t2],
    .is-playing .tool .play-icon[b-23so2ev1t2] {
        display: none;
    }

    .is-playing .tool .stop-icon[b-23so2ev1t2] {
        display: block;
    }

.editor-key[b-23so2ev1t2] {
    min-width: 6.5em;
    color: var(--color-text);
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    text-align: center;
    white-space: nowrap;
}

/* --- Score: black on white like the printout --- */
.editor-score[b-23so2ev1t2] {
    grid-area: score;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-1);
}

.score-paper[b-23so2ev1t2] {
    padding: var(--space-5);
    border-radius: var(--radius-md);
    background: var(--color-paper);
    box-shadow: var(--elevation-1);
    color: var(--color-ink);
}

/* Focus means "keys act on the score" — the ring says so. */
.score-render[b-23so2ev1t2] {
    border-radius: var(--radius-sm);
}

    .score-render:focus-visible[b-23so2ev1t2],
    .score-render:focus-within[b-23so2ev1t2] {
        outline: none;
        box-shadow: var(--shadow-focus);
    }

    /* abcjs makes every note focusable; the ring belongs to the whole score. */
    .score-render[b-23so2ev1t2]  [selectable="true"]:focus {
        outline: none;
    }

    .score-render[b-23so2ev1t2]  [selectable="true"] {
        cursor: pointer;
    }

    /* Entering: the pointer places a note, a faint one shows where. */
    .is-input .score-render[b-23so2ev1t2],
    .is-input .score-render[b-23so2ev1t2]  [selectable="true"] {
        cursor: crosshair;
    }

    .score-render[b-23so2ev1t2] {
        touch-action: manipulation;
    }

.editor-warnings[b-23so2ev1t2] {
    margin: 0;
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-6);
    border-radius: var(--radius-md);
    background: rgba(var(--color-warning-rgb), .1);
    color: var(--color-warning);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
}

/* --- Scan to compare against --- */
.editor-scan[b-23so2ev1t2] {
    grid-area: scan;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-1);
}

    .editor-scan img[b-23so2ev1t2] {
        display: block;
        width: 100%;
        height: auto;
        border-radius: var(--radius-md);
        box-shadow: var(--elevation-1);
    }

/* --- ABC text --- */
.editor-source[b-23so2ev1t2] {
    grid-area: source;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

    .editor-source[hidden][b-23so2ev1t2] {
        display: none;
    }

.abc-source[b-23so2ev1t2] {
    box-sizing: border-box;
    width: 100%;
    height: 11rem;
    min-height: 5rem;
    max-height: 50vh;
    padding: var(--space-3);
    border: 0;
    border-radius: var(--radius-md);
    background: var(--color-well);
    box-shadow: var(--shadow-inset);
    color: var(--color-text);
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    resize: vertical;
    white-space: pre;
    overflow-wrap: normal;
    overflow: auto;
}

    .abc-source:focus-visible[b-23so2ev1t2] {
        outline: none;
        box-shadow: var(--shadow-inset), var(--shadow-focus);
    }

    /* The note picked in the score, while the field itself has no focus. */
    .abc-source[b-23so2ev1t2]::selection {
        background: var(--accent-tint-strong);
    }

/* --- Bar toggles (Scan, ABC-Text) --- */
.view-toggles[b-23so2ev1t2] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1);
    border-radius: var(--radius-lg);
    background: var(--color-well);
    box-shadow: var(--shadow-inset);
}

.view-toggle[b-23so2ev1t2] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 30px;
    padding: 0 14px;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);
}

    .view-toggle:hover[b-23so2ev1t2] {
        color: var(--color-text);
    }

    .view-toggle.active[b-23so2ev1t2] {
        background: var(--color-surface-raised);
        box-shadow: var(--elevation-1);
        color: var(--color-text);
        font-weight: 500;
    }

    .view-toggle:focus-visible[b-23so2ev1t2] {
        outline-offset: -2px;
    }

/* Tablets: the scan goes below the score instead of halving it. */
@media (max-width: 1100px) {
    .score-editor.with-scan[b-23so2ev1t2] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr) minmax(0, .8fr) auto;
        grid-template-areas:
            "tools"
            "score"
            "scan"
            "source";
    }
}

@media (max-width: 720px) {
    .view-toggle span[b-23so2ev1t2] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .score-paper[b-23so2ev1t2] {
        padding: var(--space-3);
    }
}

/* Fingers need bigger targets than a mouse. */
@media (pointer: coarse) {
    .tool[b-23so2ev1t2] {
        min-width: 42px;
        height: 42px;
    }
}
/* /Components/Songs/Scores/ScoreView.razor.rz.scp.css */
/* What goes fullscreen: the scrolling frame with the paper, plus the key help and,
   only there, the exit button. */
.score-stage[b-l2idg98dzs] {
    position: relative;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
}

    /* Covers the window by itself where the browser offers no real fullscreen;
       MainLayout lifts the content column above the shell for it (as for the scans). */
    .score-stage.app-fullscreen[b-l2idg98dzs] {
        position: fixed;
        inset: 0;
        z-index: 10;
        background: var(--color-bg);
    }

/* The page turn scrolls this frame (score.js, turnPage) — it must be the scroll box. */
.score-frame[b-l2idg98dzs] {
    position: relative;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Room for the paper's shadow. */
    padding: var(--space-1) var(--space-2) var(--space-6);
}

.app-fullscreen .score-frame[b-l2idg98dzs] {
    padding: var(--space-4);
}

/* Black on white like the scan and the printout. abcjs draws with currentColor. */
.score-paper[b-l2idg98dzs] {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--space-6);
    border-radius: var(--radius-md);
    background: var(--color-paper);
    box-shadow: var(--elevation-1);
    color: var(--color-ink);
}

.app-fullscreen .score-paper[b-l2idg98dzs] {
    max-width: 1200px;
}

.score-empty[b-l2idg98dzs] {
    margin: 0;
    color: var(--color-ink);
    opacity: .6;
    text-align: center;
}

.score-keys[b-l2idg98dzs] {
    position: absolute;
    right: var(--space-3);
    bottom: var(--space-3);
    z-index: 1;
}

.fullscreen-exit[b-l2idg98dzs] {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    z-index: 1;
}

@media (max-width: 720px) {
    .score-paper[b-l2idg98dzs] {
        padding: var(--space-4) var(--space-3);
    }
}

/* Lied-Metadaten ueber den Noten — dezent, damit die Noten selbst im Fokus bleiben.
   Nur sichtbar, wenn Song.razor ShowInfos true setzt. */
.score-infos[b-l2idg98dzs] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0 var(--space-3);
    margin: 0 0 var(--space-3);
    padding: 0;
    font-size: 0.85em;
    color: var(--color-text-muted);
}

.score-infos > div[b-l2idg98dzs] {
    display: contents;
}

.score-infos dt[b-l2idg98dzs] {
    font-weight: normal;
    opacity: 0.75;
}

.score-infos dd[b-l2idg98dzs] {
    margin: 0;
    color: var(--color-text);
}
/* /Components/Songs/SheetView.razor.rz.scp.css */
/* Empty state: a sunken well, muted, with typesetting and upload as the ways out. */
.no-sheets[b-89dmp3xo88] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-6);
    border-radius: var(--radius-md);
    background: var(--color-well);
    box-shadow: var(--shadow-inset);
    color: var(--color-text-muted);
    text-align: center;
}

    .no-sheets p[b-89dmp3xo88] {
        margin: 0;
    }

    .no-sheets-actions[b-89dmp3xo88] {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-2);
    }

.song-sheets[b-89dmp3xo88] {
    display: grid;
    overflow: auto;
    grid-template-rows: 1fr auto;
    gap: var(--space-5);
}

/* What goes fullscreen: the swipe strip with the page arrows floating above it,
   plus, only there, the exit button and the pager. */
.sheet-stage[b-89dmp3xo88] {
    position: relative;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
}

    /* Covers the window by itself — the fallback where the browser offers no real
       fullscreen (iPhone); MainLayout lifts the content column above the shell for
       it. Real fullscreen keeps these rules and adds the browser's own. */
    .sheet-stage.app-fullscreen[b-89dmp3xo88] {
        position: fixed;
        inset: 0;
        z-index: 10;
        background: var(--color-bg);
    }

.fullscreen-exit[b-89dmp3xo88] {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
}

/* Page arrows at the left and right edge, where the thumbs rest on a tablet.
   Round and bigger than an icon button: they are hit in passing, mid-song. */
.sheet-arrow[b-89dmp3xo88] {
    position: absolute;
    top: 50%;
    z-index: 1;
    transform: translateY(-50%);
}

    .sheet-arrow.previous[b-89dmp3xo88] {
        left: var(--space-3);
    }

    .sheet-arrow.next[b-89dmp3xo88] {
        right: var(--space-3);
    }

    .sheet-arrow[b-89dmp3xo88]  .action-button {
        width: 48px;
        height: 48px;
        border-radius: var(--radius-full);
        background: var(--color-surface-overlay);
        box-shadow: var(--elevation-2);
        font-size: var(--font-size-lg);
        transition: opacity var(--transition-base), box-shadow var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
    }

        /* No page that way: the arrow goes rather than lingering over the music. */
        .sheet-arrow[b-89dmp3xo88]  .action-button:disabled {
            opacity: 0;
            pointer-events: none;
        }

/* Key help on the page; in fullscreen it moves into the pager. */
.sheet-keys[b-89dmp3xo88] {
    position: absolute;
    right: var(--space-3);
    bottom: var(--space-3);
    z-index: 1;
}

/* Floating pager at the bottom edge: page count and key help — the arrows sit at
   the sides. */
.fullscreen-pager[b-89dmp3xo88] {
    position: absolute;
    left: 50%;
    bottom: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1);
    border-radius: var(--radius-lg);
    background: var(--color-surface-overlay);
    box-shadow: var(--elevation-3);
    transform: translateX(-50%);
}

    .fullscreen-pager[b-89dmp3xo88]  .shortcut-hint .trigger {
        width: 36px;
        height: 36px;
    }

.page-count[b-89dmp3xo88] {
    min-width: 4.5em;
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
    text-align: center;
}

/* One sheet per page in a horizontal scroll-snap strip: the browser does the swipe
   itself on iPad and Windows touch. sheetSwipe.js counts pages by the strip's
   width — keep gap and padding at 0. snap-stop turns exactly one page per flick,
   overscroll-behavior keeps the edge swipe from navigating back. */
.song-sheet-preview[b-89dmp3xo88] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    grid-template-rows: minmax(0, 1fr);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    opacity: 1;
    transition: opacity var(--transition-base);
}

    .song-sheet-preview[b-89dmp3xo88]::-webkit-scrollbar {
        display: none;
    }

.edit .song-sheet-preview[b-89dmp3xo88] {
    opacity: 0;
}

/* Thumbnail strip to pick the sheet. It scrolls sideways, so the padding is the
   room the thumbnails' shadows need. */
.song-sheet-selector[b-89dmp3xo88] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    overflow: auto;
    gap: var(--space-2);
    padding: var(--space-3);
}

.edit .song-sheet-selector[b-89dmp3xo88] {
    box-sizing: border-box;
    flex-wrap: wrap;
    gap: var(--space-4);
}

/* Raised thumbnail; hover lifts it, the selected one keeps a soft accent halo. */
.sheet-selection[b-89dmp3xo88] {
    position: relative;
    display: grid;
    overflow: hidden;
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    box-sizing: border-box;
    border-radius: var(--radius-md);
    background: var(--color-surface-raised);
    box-shadow: var(--elevation-1);
    cursor: pointer;
    transition: box-shadow var(--transition-base);
}

.song-sheets:not(.edit) .sheet-selection:hover[b-89dmp3xo88] {
    box-shadow: var(--elevation-2);
}

.song-sheets:not(.edit) .sheet-selection.selected[b-89dmp3xo88] {
    box-shadow: var(--elevation-1), 0 0 18px rgba(var(--color-primary-rgb), .22);
}

.sheet-selection img[b-89dmp3xo88] {
    object-fit: cover;
    opacity: .35;
    transition: opacity var(--transition-base), transform var(--transition-base);
}

.song-sheets:not(.edit) .sheet-selection:hover img[b-89dmp3xo88],
.song-sheets:not(.edit) .sheet-selection.selected img[b-89dmp3xo88] {
    opacity: 1;
}

.song-sheets:not(.edit) .sheet-selection:hover img[b-89dmp3xo88] {
    transform: scale(1.05);
}

/* In edit mode the tiles are sorted by dragging them. */
.edit .sheet-selection[b-89dmp3xo88] {
    width: 200px;
    height: 200px;
    border-radius: var(--radius-lg);
    cursor: grab;
    animation: showSheet-b-89dmp3xo88 .25s ease-out backwards;
}

    .edit .sheet-selection img[b-89dmp3xo88] {
        cursor: inherit;
        opacity: 1;
    }

    .edit .sheet-selection.dragging[b-89dmp3xo88] {
        opacity: .4;
    }

    /* Drop marker: a 3px accent bar in the gap in front of the tile — the same
       indicator as between the stanzas. */
    .edit .sheet-selection.drag-over-before[b-89dmp3xo88] {
        box-shadow: -7px 0 0 -4px var(--color-primary), var(--elevation-1);
    }

.sheet[b-89dmp3xo88] {
    display: grid;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    animation: showSheet-b-89dmp3xo88 .25s ease-out backwards;
}

    /* A swipe must move the page, not pick up the picture (drag on Windows,
       long-press menu on iPad). */
    .sheet img[b-89dmp3xo88] {
        user-select: none;
        -webkit-user-select: none;
        -webkit-user-drag: none;
        -webkit-touch-callout: none;
    }

img[b-89dmp3xo88] {
    width: 100%;
    object-fit: contain;
    height: 100%;
    overflow: hidden;
}

.upload-input[b-89dmp3xo88] {
    display: none;
}

@keyframes showSheet-b-89dmp3xo88 {
    from {
        transform: scale(.98);
        opacity: 0;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

/* Move buttons on the left, delete on the right. */
.action-buttons[b-89dmp3xo88] {
    position: absolute;
    left: var(--space-2);
    right: var(--space-2);
    bottom: var(--space-2);
    display: flex;
    gap: var(--space-2);
    cursor: default;
}

    .action-buttons[b-89dmp3xo88]  .action-button-host:last-child {
        margin-left: auto;
    }

    /* On top of a picture the button needs its own surface. */
    .action-buttons[b-89dmp3xo88]  .action-button {
        background: var(--color-surface-raised);
    }

        /* The red tints the button's surface — a bare tint would let the picture through. */
        .action-buttons[b-89dmp3xo88]  .action-button.danger:hover:not(:disabled) {
            background: linear-gradient(rgba(var(--color-danger-rgb), .15), rgba(var(--color-danger-rgb), .15)), var(--color-surface-raised);
            color: var(--color-danger);
        }

/* The upload slot at the end of the strip: a sunken well, like every add tile. */
.sheet-selection.add-sheet[b-89dmp3xo88] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-3);
    background: var(--color-well);
    box-shadow: var(--shadow-inset);
    cursor: default;
}

    /* Dropping here moves the dragged sheet to the end. */
    .sheet-selection.add-sheet.drag-over[b-89dmp3xo88] {
        box-shadow: var(--shadow-inset), var(--shadow-focus);
        background: var(--accent-tint);
    }
/* /Components/Songs/Song.razor.rz.scp.css */
.song-content[b-ta2llajm7b] {
    display: contents;
}

/* --- View switch in the Dashboard's 48px bar: a segment ---
   The tabs sit in a sunken well; the active one is raised out of it. The radii
   are concentric: well radius = tab radius + the well's padding. */
.view-tabs[b-ta2llajm7b] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1);
    border-radius: var(--radius-lg);
    background: var(--color-well);
    box-shadow: var(--shadow-inset);
}

.view-tab[b-ta2llajm7b] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 30px;
    padding: 0 14px;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);
}

    .view-tab:hover[b-ta2llajm7b] {
        color: var(--color-text);
    }

    .view-tab.active[b-ta2llajm7b] {
        background: var(--color-surface-raised);
        box-shadow: var(--elevation-1);
        color: var(--color-text);
        font-weight: 500;
    }

    .view-tab:focus-visible[b-ta2llajm7b] {
        outline-offset: -2px;
    }

/* Narrow bar: icons only — the label stays in the DOM for screen readers. */
@media (max-width: 720px) {
    .view-tab span[b-ta2llajm7b] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

/* "Noten" view with a typeset score: its controls in a row above it, then the score
   (or the scan) filling the rest. The row wraps on narrow screens. */
.notes-view[b-ta2llajm7b] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    min-height: 0;
}

.notes-toolbar[b-ta2llajm7b] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

/* Select fills its parent; here it is one control among others in the row. */
.score-version[b-ta2llajm7b] {
    width: 12rem;
    max-width: 100%;
}

.notes-toolbar-end[b-ta2llajm7b] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}

/* − key + : transposing the view by half steps. The key in the middle shows where
   it stands and, once moved, leads back to the written key. */
.transpose[b-ta2llajm7b] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1);
    border-radius: var(--radius-lg);
    background: var(--color-well);
    box-shadow: var(--shadow-inset);
}

.transpose-key[b-ta2llajm7b] {
    min-width: 6.5em;
    height: 30px;
    padding: 0 var(--space-2);
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text);
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    white-space: nowrap;
}

    .transpose-key.moved[b-ta2llajm7b] {
        color: var(--color-primary);
        cursor: pointer;
    }

        .transpose-key.moved:hover[b-ta2llajm7b] {
            background: var(--color-surface-raised);
            box-shadow: var(--elevation-1);
        }

    .transpose-key:disabled[b-ta2llajm7b] {
        cursor: default;
    }

    .transpose-key:focus-visible[b-ta2llajm7b] {
        outline-offset: -2px;
    }
/* /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);
}

/* Impressum-Folie am Ende eines Lieds. Channels ohne --song-credits sollen
   gar nichts sehen (display:none); das Flag kommt vom Placement-Template. */
.song-credits[b-ewba2t3x5z] {
    display: var(--song-credits-display, none);
    margin: 0.4em 0 0;
    padding: 0;
    font-size: 0.4em;
    line-height: 1.5;
    color: var(--text-color, inherit);
    opacity: 0.85;
}

.song-credits > div[b-ewba2t3x5z] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0 1em;
}

.song-credits dt[b-ewba2t3x5z] {
    font-weight: normal;
    opacity: 0.6;
}

.song-credits dd[b-ewba2t3x5z] {
    margin: 0;
}

/* --song-credits: 1 im Placement schaltet die Folie ein. */
:host([style*="--song-credits: 1"]) .song-credits[b-ewba2t3x5z],
.song-display-container[style*="--song-credits: 1"] .song-credits[b-ewba2t3x5z] {
    display: block;
}
/* /Components/Songs/SongHistoryTable.razor.rz.scp.css */
/* No overflow clipping on the cell: it would cut off the shadow of the raised
   "Gemeldet" button. The text spans shorten themselves instead. */
.history-cell[b-0r3hjj9i3k] {
    display: flex;
    align-items: center;
    min-width: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Play and report dates are facts — mono. */
.history-fact[b-0r3hjj9i3k] {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.history-actions[b-0r3hjj9i3k] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-1);
}
/* /Components/Songs/SongsMain.razor.rz.scp.css */
/* --- Card: raised surface with a shadow, no lines ---
   The page does not scroll as a whole: tabs, filter, table head and pager stay in
   view, only the table rows scroll. Every level passes the height on with
   min-height: 0 — the dashboard content, the tab panel, the card, its body and
   finally the table, whose frame is the one that scrolls. */
.song-card[b-33pqdj4han] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    margin: 0;
    border-radius: var(--radius-lg);
    background: var(--color-surface-raised);
    box-shadow: var(--elevation-1);
}

/* Only "Alle" has a head: the filter, flush with the table below it. */
.song-card-head[b-33pqdj4han] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--shell-header-h);
    box-sizing: border-box;
    padding: var(--space-2) var(--space-2) 0;
}

.count[b-33pqdj4han] {
    flex-shrink: 0;
    margin-left: auto;
    padding-right: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.song-card-body[b-33pqdj4han] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    padding: var(--space-2);
}

/* Small plus badge on the playlist button. */
.add-icon[b-33pqdj4han] {
    position: absolute;
    right: 2px;
    bottom: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-on-primary);
}

    .add-icon i[b-33pqdj4han] {
        font-size: 7px;
    }

/* --- "Alle": filter in the card head, a sunken field --- */
.all-songs-filter[b-33pqdj4han] {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 1 320px;
    min-width: 140px;
}

    .all-songs-filter > i[b-33pqdj4han] {
        position: absolute;
        left: 12px;
        color: var(--color-text-muted);
        font-size: var(--font-size-xs);
        pointer-events: none;
    }

    .all-songs-filter input[b-33pqdj4han] {
        flex: 1 1 auto;
        min-width: 0;
        height: 34px;
        box-sizing: border-box;
        padding: 0 34px;
        border: 0;
        border-radius: var(--radius-md);
        background: var(--color-well);
        box-shadow: var(--shadow-inset);
        color: var(--color-text);
        font-family: inherit;
        font-size: var(--font-size-sm);
        transition: box-shadow var(--transition-fast);
    }

        .all-songs-filter input[b-33pqdj4han]::placeholder {
            color: var(--color-text-muted);
        }

        .all-songs-filter input:focus[b-33pqdj4han] {
            outline: none;
            box-shadow: var(--shadow-inset), var(--shadow-focus);
        }

.filter-clear[b-33pqdj4han] {
    position: absolute;
    right: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

    .filter-clear:hover[b-33pqdj4han] {
        background: var(--surface-hover);
        color: var(--color-text);
    }

@media (max-width: 720px) {
    .song-card-head[b-33pqdj4han] {
        flex-wrap: wrap;
    }

    .all-songs-filter[b-33pqdj4han] {
        flex: 1 1 100%;
    }
}

/* --- Song table cells --- */
.song-cell[b-33pqdj4han] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Counts and dates are facts — mono. */
.song-number[b-33pqdj4han],
.song-date[b-33pqdj4han] {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    font-variant-numeric: tabular-nums;
}

.song-never[b-33pqdj4han] {
    opacity: .6;
}

/* Holds only a button — clipping would cut off its hover shadow. */
.song-actions[b-33pqdj4han] {
    display: flex;
    justify-content: flex-end;
    overflow: visible;
}

/* Bar relative to the most-played song, filling a sunken track. */
.popularity[b-33pqdj4han] {
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--color-well);
    box-shadow: var(--shadow-inset);
    overflow: hidden;
}

.popularity-bar[b-33pqdj4han] {
    height: 100%;
    min-width: 0;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    transition: width .3s ease;
}
/* /Components/Songs/SongTitleCell.razor.rz.scp.css */
.song-title[b-qy8u82knfs] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    overflow: hidden;
}

.song-icon[b-qy8u82knfs] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    padding: 6px;
    box-sizing: border-box;
    border-radius: var(--radius-md);
    background: var(--accent-tint);
}

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

.song-name[b-qy8u82knfs] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text);
}
/* /Components/Songs/Stanza.razor.rz.scp.css */
/* Stanza tile — same look as MediaTile's screen variant: raised surface with a
   shadow, black 16:9 preview of what the screen shows, footer with the stanza type. */
.stanza[b-t5rfsd4p6q] {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--color-surface-raised);
    box-shadow: var(--elevation-1);
    color: var(--color-text);
    cursor: pointer;
    transition: box-shadow var(--transition-base), opacity var(--transition-base);
    /* "backwards": a held end state would override .dragging's opacity. */
    animation: stanza-in-b-t5rfsd4p6q .25s ease-out backwards;
}

    /* Hover deepens the shadow and nothing moves. A transform would also turn the
       tile into the containing block of the menu's fixed backdrop. */
    .stanza:hover[b-t5rfsd4p6q] {
        box-shadow: var(--elevation-3);
    }

    /* An open menu in the footer must paint above the next tiles. */
    .stanza:hover[b-t5rfsd4p6q],
    .stanza:focus-within[b-t5rfsd4p6q] {
        z-index: 2;
    }

    /* On the screen: the tile glows in the accent, the footer is tinted. */
    .stanza.shown[b-t5rfsd4p6q],
    .stanza.shown:hover[b-t5rfsd4p6q] {
        box-shadow: var(--shadow-glow);
        cursor: default;
    }

    .stanza.edit[b-t5rfsd4p6q] {
        cursor: grab;
    }

        .stanza.edit:active[b-t5rfsd4p6q] {
            cursor: grabbing;
        }

    .stanza.dragging[b-t5rfsd4p6q] {
        opacity: .4;
    }

    /* Drop marker: a 3px accent bar in the gap in front of the tile — an
       indicator, not a frame; the tile keeps its own shadow. */
    .stanza.drag-over-before[b-t5rfsd4p6q] {
        box-shadow: -7px 0 0 -4px var(--color-primary), var(--elevation-1);
    }

/* --- Preview: the screen, on black --- */
.stanza-preview[b-t5rfsd4p6q] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    box-sizing: border-box;
    padding: 14px 20px;
    overflow: hidden;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: #000;
    color: var(--color-text);
    text-align: center;
    user-select: none;
}

.text[b-t5rfsd4p6q] {
    max-height: 100%;
    overflow: hidden;
    font-size: var(--font-size-xs);
    line-height: 1.5;
}

[b-t5rfsd4p6q] p {
    margin: 0;
}

/* --- Footer: on the tile surface, no line — the black preview ends above it --- */
.stanza-foot[b-t5rfsd4p6q] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 44px;
    box-sizing: border-box;
    padding: var(--space-1) 6px var(--space-1) 14px;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    transition: background var(--transition-base);
}

.stanza.shown .stanza-foot[b-t5rfsd4p6q] {
    background: var(--accent-tint);
}

.stanza-type[b-t5rfsd4p6q] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    user-select: none;
}

.stanza.shown .stanza-type[b-t5rfsd4p6q] {
    color: var(--color-primary);
}

.live-tag[b-t5rfsd4p6q] {
    flex-shrink: 0;
    margin-right: var(--space-1);
    padding: 2px 6px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .08em;
    user-select: none;
}

/* Small icon buttons of the footer: flat, they rise on hover. */
.icon-button[b-t5rfsd4p6q] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-muted);
    font-size: 13px;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
}

    .icon-button:hover:not(:disabled)[b-t5rfsd4p6q] {
        background: var(--color-surface-raised);
        box-shadow: var(--elevation-1);
        color: var(--color-text);
    }

    /* Rises like the other icon buttons — the red only tints its surface. */
    .icon-button.danger:hover:not(:disabled)[b-t5rfsd4p6q] {
        background: linear-gradient(rgba(var(--color-danger-rgb), .15), rgba(var(--color-danger-rgb), .15)), var(--color-surface-raised);
        color: var(--color-danger);
    }

    /* The eye of the live stanza is red right away: it is the way off the screen
       and must be found without hovering (touch devices have no hover). */
    .icon-button.hide[b-t5rfsd4p6q] {
        color: var(--color-danger);
    }

    .icon-button:disabled[b-t5rfsd4p6q] {
        opacity: .35;
        cursor: not-allowed;
    }

/* The menu of the presentation view shows up on hover/focus only — touch devices
   have no hover and keep it visible. Its button lies flat on the footer like the
   icon buttons and only rises on hover. */
.stanza-menu[b-t5rfsd4p6q] {
    display: inline-flex;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.stanza:hover .stanza-menu[b-t5rfsd4p6q],
.stanza:focus-within .stanza-menu[b-t5rfsd4p6q] {
    opacity: 1;
}

@media (hover: none) {
    .stanza-menu[b-t5rfsd4p6q] {
        opacity: 1;
    }
}

    .stanza-menu[b-t5rfsd4p6q]  .action-button {
        width: 32px;
        height: 32px;
        background: transparent;
        box-shadow: none;
    }

        .stanza-menu[b-t5rfsd4p6q]  .action-button:hover:not(:disabled) {
            background: var(--color-surface-raised);
            box-shadow: var(--elevation-1);
        }

/* Space, not a rule, between moving and editing. */
.separator[b-t5rfsd4p6q] {
    flex-shrink: 0;
    width: var(--space-2);
}

/* --- Edit mode: insert before/after on the preview's edges --- */
.insert-button[b-t5rfsd4p6q] {
    position: absolute;
    top: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background: var(--color-surface-raised);
    box-shadow: var(--elevation-1);
    color: var(--color-text-muted);
    font-size: 11px;
    cursor: pointer;
    opacity: .6;
    transform: translateY(-50%);
    transition: opacity var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

    .insert-button.before[b-t5rfsd4p6q] {
        left: var(--space-2);
    }

    .insert-button.after[b-t5rfsd4p6q] {
        right: var(--space-2);
    }

.stanza:hover .insert-button[b-t5rfsd4p6q],
.insert-button:focus-visible[b-t5rfsd4p6q] {
    opacity: 1;
}

.insert-button:hover[b-t5rfsd4p6q] {
    box-shadow: var(--elevation-2);
    color: var(--color-primary);
}

@keyframes stanza-in-b-t5rfsd4p6q {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}
/* /Components/Tickers/ModalEditTicker.razor.rz.scp.css */
.edit-ticker[b-3mylm59uyi] {
    display: grid;
    grid-template-rows: auto 250px;
    align-content: start;
    padding: 0;
    gap: var(--space-3);
}

/* 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%;
    overflow: hidden;
    box-sizing: border-box;
    container-type: size;
}

/* Base size follows the area, like the song display: the configured line count
   plus padding fills the height exactly, capped by the width so a full-screen
   placement does not end up with a handful of giant words per line. The
   template's --text-font-size scales from there (em / %). */
.transcript-text[b-n5g3h3hj91] {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0.25em 0.75em;
    font-size: min(100cqh / (var(--transcript-visible-lines, 2) * 1.45 + 0.5), 4cqw);
}

/* 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;
    font-size: var(--text-font-size, 1em);
    max-height: calc(var(--transcript-visible-lines, 2) * 1.45em);
    overflow: hidden;
    line-height: 1.45em;
}

/* Wraps all lines so transcript.js can measure and slide them as one block when
   a new line pushes the text up. Positioned so the lines' offsetTop is relative
   to it. */
.transcript-flow[b-n5g3h3hj91] {
    position: relative;
    flex-shrink: 0;
}

.transcript-line[b-n5g3h3hj91] {
    word-break: break-word;
    transition: opacity 200ms ease-out;
}

/* Still being recognised: dimmed until the final arrives, then the same
   element fades to full colour. */
.transcript-line.partial[b-n5g3h3hj91] {
    opacity: 0.75;
}

/* Short and front-loaded: the word is readable after a few frames, so the
   animation softens the pop without adding noticeable latency. */
.transcript-word[b-n5g3h3hj91] {
    animation: transcript-word-in-b-n5g3h3hj91 160ms ease-out;
}

@keyframes transcript-word-in-b-n5g3h3hj91 {
    from {
        opacity: 0;
    }
}
/* /Components/Transcription/TranscriptionMain.razor.rz.scp.css */
.transcription-page[b-y79fxw8226] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
}

/* --- Monitor card: 48px head (chip, title, status pill), lines below --- */
.transcript-monitor[b-y79fxw8226] {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* The content column sizes rows to their content, so the card gets its own
       height: tall enough to read along, and the lines scroll inside it. */
    min-height: 320px;
    max-height: calc(100dvh - 240px);
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--color-surface-raised);
    box-shadow: var(--elevation-1);
}

.transcript-monitor-head[b-y79fxw8226] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    height: var(--shell-header-h);
    box-sizing: border-box;
    padding: 0 var(--space-2) 0 14px;
}

    .transcript-monitor-head h2[b-y79fxw8226] {
        flex-grow: 1;
        margin: 0;
        font-size: var(--font-size-sm);
        font-weight: 600;
    }

.icon-chip[b-y79fxw8226] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-md);
    background: var(--accent-tint);
    color: var(--color-primary);
    font-size: 13px;
}

/* Empty state centred in the monitor. */
.transcript-monitor[b-y79fxw8226]  .empty-state {
    margin: auto;
}

/* --- Status pill: raised; states tint the fill, recording also glows --- */
.transcription-status[b-y79fxw8226] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    height: 30px;
    box-sizing: border-box;
    padding: 0 var(--space-3);
    border-radius: var(--radius-full);
    background: var(--color-surface-raised);
    box-shadow: var(--elevation-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    white-space: nowrap;
    user-select: none;
    transition: background var(--transition-base), box-shadow var(--transition-base), color var(--transition-base);
}

    .transcription-status > span:last-child[b-y79fxw8226] {
        overflow: hidden;
        text-overflow: ellipsis;
    }

.status-dot[b-y79fxw8226] {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--color-text-muted);
}

.transcription-status.running[b-y79fxw8226] {
    background: rgba(var(--color-warning-rgb), .14);
    color: var(--color-warning);
}

    .transcription-status.running .status-dot[b-y79fxw8226] {
        background: var(--color-warning);
    }

.transcription-status.recording[b-y79fxw8226] {
    background: rgba(var(--color-danger-rgb), .14);
    box-shadow: var(--elevation-1), 0 0 14px rgba(var(--color-danger-rgb), .25);
    color: var(--color-danger);
}

    .transcription-status.recording .status-dot[b-y79fxw8226] {
        background: var(--color-danger);
        animation: transcription-pulse-b-y79fxw8226 1.2s ease-in-out infinite;
    }

/* The dot breathes as a soft glow, not a ring. Starts and ends at rest, so
   reduced motion leaves a steady, glowing dot. */
@keyframes transcription-pulse-b-y79fxw8226 {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 10px rgba(var(--color-danger-rgb), .7);
    }

    50% {
        opacity: .55;
        box-shadow: 0 0 3px rgba(var(--color-danger-rgb), .2);
    }
}

/* --- Lines --- */
/* 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;
    gap: 6px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-3) var(--space-4);
    line-height: 1.5;
}

.monitor-line[b-y79fxw8226] {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: var(--space-3);
    align-items: baseline;
    color: var(--color-text);
}

    .monitor-line.partial[b-y79fxw8226] {
        color: var(--color-text-muted);
        font-style: italic;
    }

.monitor-time[b-y79fxw8226] {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    font-style: normal;
    color: var(--color-text-muted);
    white-space: nowrap;
}

@media (max-width: 720px) {
    .transcription-status[b-y79fxw8226] {
        max-width: 55%;
    }
}
/* /Components/Users/ModalEditUser.razor.rz.scp.css */
.user-form[b-7fb4hjj4ff] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    /* min() keeps the modal inside narrow screens. */
    min-width: min(400px, 100%);
}

.user-form-row[b-7fb4hjj4ff] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

@media (max-width: 480px) {
    .user-form-row[b-7fb4hjj4ff] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Users/ModalResetPassword.razor.rz.scp.css */
.user-form[b-rndk9qu10j] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    /* min() keeps the modal inside narrow screens. */
    min-width: min(360px, 100%);
}

.user-form-hint[b-rndk9qu10j] {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: var(--color-text-muted);
}

    .user-form-hint strong[b-rndk9qu10j] {
        color: var(--color-text);
        font-weight: 600;
    }
/* /Components/Users/UsersMain.razor.rz.scp.css */
.users-page[b-fqwev15vfg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    max-width: 960px;
}

/* --- Card: raised, 48px head with icon chip, body --- */
.users-card[b-fqwev15vfg] {
    border-radius: var(--radius-lg);
    background: var(--color-surface-raised);
    box-shadow: var(--elevation-1);
}

.users-card-head[b-fqwev15vfg] {
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--shell-header-h);
    box-sizing: border-box;
    padding: 0 var(--space-2) 0 14px;
}

    .users-card-head h2[b-fqwev15vfg] {
        margin: 0;
        font-size: var(--font-size-sm);
        font-weight: 600;
    }

.icon-chip[b-fqwev15vfg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-md);
    background: var(--accent-tint);
    color: var(--color-primary);
    font-size: 13px;
}

.users-card-body[b-fqwev15vfg] {
    padding: 0;
}

/* 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;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
}

.users-page[b-fqwev15vfg]  .user-email {
    color: var(--color-text-muted);
}

/* --- Badges: role (admin tinted in the accent, operator neutral) and status --- */
.users-page[b-fqwev15vfg]  .user-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    background: var(--surface-hover);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: 500;
    line-height: 1.6;
    white-space: nowrap;
    user-select: none;
}

    .users-page[b-fqwev15vfg]  .user-badge.admin {
        background: var(--accent-tint-strong);
        color: var(--color-primary-hover);
    }

    .users-page[b-fqwev15vfg]  .user-badge.ok {
        background: rgba(var(--color-success-rgb), .18);
        color: var(--color-success);
    }

    .users-page[b-fqwev15vfg]  .user-badge.bad {
        background: rgba(var(--color-danger-rgb), .18);
        color: var(--color-danger);
    }

/* --- Row actions: quiet icon buttons, lifted on hover --- */
.users-page[b-fqwev15vfg]  .user-actions {
    gap: 2px;
    justify-content: flex-end;
    overflow: visible;
}

.users-page[b-fqwev15vfg]  .row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-muted);
    font-size: 13px;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

    .users-page[b-fqwev15vfg]  .row-action:hover {
        background: var(--color-surface-raised);
        box-shadow: var(--elevation-1);
        color: var(--color-text);
    }

    .users-page[b-fqwev15vfg]  .row-action.danger:hover {
        background: rgba(var(--color-danger-rgb), .14);
        box-shadow: var(--shadow-danger);
        color: var(--color-danger);
    }

/* The card already lifts the table — no second surface inside it. The bottom
   corners follow the card, so a hovered last row stays inside its curve. */
.users-card-body[b-fqwev15vfg]  .table-frame {
    border: none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    background: transparent;
    box-shadow: none;
}