html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.operator-page {
    min-height: 100vh;
    background: #101414;
    color: white;
}

.operator-topbar {
    height: 80px;
    background: #244b4b;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
}

.operator-topbar h1 {
    margin: 0;
    font-size: 28px;
}

.operator-topbar span {
    color: #b8cccc;
}

.operator-topbar .operator-destination {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 5px;
    padding: 5px 9px;
    border: 1px solid var(--destination-color);
    border-radius: 999px;
    background: color-mix(in srgb, var(--destination-color) 18%, transparent);
    color: white;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
}

.operator-destination::before {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--destination-color);
    box-shadow: 0 0 8px var(--destination-color);
    content: "";
}

.top-actions {
    display: flex;
    gap: 10px;
}

.channel-picker {
    display: flex;
    flex-direction: column;
    gap: 3px;
    color: #b8caca;
    font-size: 11px;
    font-weight: 700;
}

.channel-picker select {
    min-width: 125px;
    padding: 8px 10px;
    border: 1px solid #4b8585;
    border-radius: 8px;
    background: #101818;
    color: white;
    font-weight: 700;
}

.projector-channel-link {
    display: flex;
    align-items: center;
    border-radius: 8px;
    padding: 14px 18px;
    background: #315c70;
    color: white;
    font-weight: 700;
    text-decoration: none;
}

.projector-channel-link:hover {
    color: white;
    background: #3a6d84;
}

.top-actions button {
    border: 0;
    border-radius: 8px;
    padding: 14px 22px;
    font-weight: 700;
    cursor: pointer;
}

.btn-upload {
    display: flex;
    align-items: center;
    border-radius: 8px;
    padding: 14px 22px;
    background: #357171;
    color: white;
    font-weight: 700;
    cursor: pointer;
}

.upload-input {
    display: none;
}

.btn-settings {
    background: #3c7777;
    color: white;
}

.btn-bible-quick {
    min-width: 54px;
    padding-inline: 15px !important;
    background: #315c70;
    color: white;
    font-size: 22px;
}

.quick-bible {
    display: grid;
    grid-template-columns: minmax(240px, 25%) minmax(0, 75%);
    height: min(720px, calc(100vh - 100px));
    min-height: 560px;
    border-bottom: 2px solid #3f8585;
    background: #111818;
    color: white;
}

.quick-bible-preview {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 14px;
    background: #333838;
    border-right: 2px solid #182222;
}

.quick-bible-preview-header {
    display: grid;
    gap: 4px;
    padding-bottom: 10px;
    border-bottom: 1px solid #596262;
}

.quick-bible-preview-header strong {
    color: #7de0d8;
    font-size: 12px;
    letter-spacing: .06em;
}

.quick-bible-preview-header span {
    min-height: 1.4em;
    font-weight: 800;
}

.quick-bible-preview > p {
    margin: auto;
    color: #b5bebe;
    text-align: center;
}

.quick-bible-preview-scroll {
    flex: 1;
    overflow-y: auto;
    margin: 8px -4px;
    padding-right: 4px;
}

.quick-bible-preview-scroll button {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 7px;
    width: 100%;
    padding: 10px 8px;
    border: 0;
    border-bottom: 1px solid #555e5e;
    background: transparent;
    color: #f4f7f7;
    text-align: left;
    line-height: 1.35;
}

.quick-bible-preview-scroll button:hover,
.quick-bible-preview-scroll button.selected {
    background: #447575;
}

.quick-bible-preview small {
    color: #b9caca;
    text-align: center;
}

.quick-bible-picker {
    display: grid;
    min-width: 0;
    grid-template-rows: auto minmax(230px, 1fr) minmax(190px, .65fr);
    overflow: hidden;
}

.quick-bible-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: #1b2626;
}

.quick-bible-toolbar label {
    color: #7de0d8;
    font-size: 12px;
    font-weight: 800;
}

.quick-bible-toolbar select {
    border: 1px solid #527070;
    border-radius: 6px;
    padding: 6px 10px;
    background: #0f1717;
    color: white;
}

.quick-bible-toolbar button {
    margin-left: auto;
    border: 0;
    border-radius: 6px;
    padding: 4px 12px;
    background: #873838;
    color: white;
    font-size: 22px;
}

.quick-bible-books {
    display: grid;
    grid-template-columns: repeat(11, minmax(72px, 1fr));
    grid-auto-rows: minmax(54px, 1fr);
    gap: 2px;
    overflow-y: auto;
    padding: 2px;
    background: #263030;
}

.quick-bible-books button {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px solid transparent;
    padding: 5px 3px;
    color: white;
    text-align: center;
}

.quick-bible-books button strong {
    font-size: clamp(16px, 1.4vw, 23px);
    line-height: 1;
}

.quick-bible-books button span {
    overflow: hidden;
    max-width: 100%;
    margin-top: 4px;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quick-bible-books button:hover,
.quick-bible-books button.selected {
    z-index: 1;
    border-color: white;
    filter: brightness(1.2);
}

.bible-category-1 { background: #94520c; }
.bible-category-2 { background: #d76c08; }
.bible-category-3 { background: #c7142b; }
.bible-category-4 { background: #8b188f; }
.bible-category-5 { background: #ae159b; }
.bible-category-6 { background: #174fa8; }
.bible-category-7 { background: #1389a9; }
.bible-category-8 { background: #149346; }
.bible-category-9 { background: #72b912; }

.quick-bible-lower {
    display: grid;
    min-height: 0;
    grid-template-columns: 1fr 1fr;
    background: #172020;
}

.quick-bible-chapters,
.quick-bible-verses {
    overflow-y: auto;
    padding: 10px;
}

.quick-bible-chapters {
    border-right: 2px solid #314242;
}

.quick-bible-lower h3 {
    margin: 0 0 8px;
    color: #7de0d8;
    font-size: 15px;
}

.quick-bible-chapters > div,
.quick-bible-verses > div {
    display: grid;
    grid-template-columns: repeat(8, minmax(42px, 1fr));
    gap: 4px;
}

.quick-bible-lower button {
    min-height: 42px;
    border: 1px solid #76501d;
    border-radius: 4px;
    background: #9a5a11;
    color: white;
    font-size: 17px;
    font-weight: 800;
}

.quick-bible-lower button:hover,
.quick-bible-lower button.selected {
    border-color: white;
    background: #c57b20;
}

@media (max-width: 900px) {
    .quick-bible {
        grid-template-columns: 1fr;
        height: auto;
        max-height: none;
    }

    .quick-bible-preview {
        min-height: 260px;
        max-height: 38vh;
        border-right: 0;
        border-bottom: 2px solid #182222;
    }

    .quick-bible-picker {
        grid-template-rows: auto 430px minmax(260px, auto);
    }

    .quick-bible-books {
        grid-template-columns: repeat(6, minmax(62px, 1fr));
    }

    .quick-bible-chapters > div,
    .quick-bible-verses > div {
        grid-template-columns: repeat(5, minmax(40px, 1fr));
    }
}

.projector-settings {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 12px 16px;
    background: #172020;
    color: white;
    border-bottom: 1px solid #334444;
}

.projector-settings label {
    margin: 0;
    color: #b8cccc;
    font-weight: 700;
}

.projector-settings input {
    width: min(320px, 35vw);
    accent-color: #42b8d6;
}

.projector-settings strong {
    min-width: 58px;
    color: #6fd7d7;
}

.projector-settings button {
    border: 0;
    border-radius: 7px;
    padding: 9px 14px;
    background: #2f9ac1;
    color: white;
    font-weight: 700;
    cursor: pointer;
}

.btn-black {
    background: black;
    color: white;
    border: 0 !important;
}

.btn-clear {
    background: #2f9ac1;
    color: white;
}

.screen-actions {
    display: flex;
    overflow: hidden;
    border: 1px solid #4b8585;
    border-radius: 8px;
}

.top-actions .screen-actions button {
    border-radius: 0;
}

.screen-actions button + button {
    border-left: 1px solid #4b8585;
}

.operator-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    height: calc(100vh - 80px);
}

.operator-grid-clean {
    grid-template-columns: minmax(0, 1fr);
}

.song-number-entry {
    display: grid;
    grid-template-columns: minmax(12rem, 22ch) auto 1fr;
    gap: 8px 12px;
    padding: 12px 16px;
    border-top: 1px solid #334444;
}

.song-number-entry label,
.song-number-entry span {
    grid-column: 1 / -1;
    color: #b8cccc;
}

.song-number-entry input {
    width: 100%;
    min-height: 44px;
    border: 1px solid #3a5555;
    border-radius: 7px;
    padding: 10px 12px;
    background: #0f1515;
    color: white;
}

.song-number-entry button {
    border: 0;
    border-radius: 7px;
    padding: 0 16px;
    background: #357171;
    color: white;
    font-weight: 800;
}

.operator-selection-empty {
    padding: 8px 16px 14px;
    color: #91a5a5;
}

.visual-chord-editor {
    display: grid;
    gap: 14px;
    margin: 8px 0 14px;
}

.visual-chord-heading {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    align-items: baseline;
    color: #a8c0c0;
}

.visual-chord-heading strong {
    color: #70d795;
}

.visual-chord-line {
    min-width: 0;
    padding: 14px;
    border: 1px solid #345252;
    border-radius: 10px;
    background: #121a1a;
}

.chord-character-grid {
    display: flex;
    overflow-x: auto;
    padding-bottom: 7px;
}

.chord-character-grid button {
    flex: 0 0 2rem;
    width: 2rem;
    height: 2.25rem;
    border: 1px solid #3d5555;
    border-radius: 0;
    padding: 0;
    background: #202c2c;
    color: white;
    font: 700 1rem/1 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.chord-character-grid button:first-child {
    border-radius: 6px 0 0 6px;
}

.chord-character-grid button:last-child {
    border-radius: 0 6px 6px 0;
}

.chord-character-grid button.selected {
    position: relative;
    z-index: 1;
    border-color: #70d795;
    background: #357151;
    box-shadow: 0 0 0 2px rgba(112, 215, 149, .22);
}

.new-chord-row,
.positioned-chord {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 9px;
}

.new-chord-row input,
.positioned-chord input {
    border: 1px solid #486363;
    border-radius: 6px;
    padding: 8px 10px;
    background: #0b1111;
    color: white;
}

.new-chord-row button,
.manual-chord-editor button {
    border: 0;
    border-radius: 6px;
    padding: 9px 12px;
    background: #357171;
    color: white;
    font-weight: 800;
}

.positioned-chord {
    padding: 7px;
    border-radius: 7px;
    background: #1b2828;
}

.positioned-chord > input:first-child {
    width: 110px;
    color: #70d795;
    font-weight: 800;
}

.positioned-chord label {
    display: flex;
    gap: 6px;
    align-items: center;
    margin: 0;
}

.positioned-chord input[type="number"] {
    width: 76px;
}

.positioned-chord button {
    border: 0;
    border-radius: 6px;
    padding: 7px 11px;
    background: #963d3d;
    color: white;
}

.chord-alignment-preview,
.lyric-alignment-preview {
    display: block;
    overflow-x: auto;
    min-height: 1.35em;
    white-space: pre;
    color: #70d795;
    font: 700 1rem/1.35 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.chord-alignment-preview {
    margin-top: 12px;
}

.lyric-alignment-preview {
    color: #eef6f6;
}

.manual-chord-editor {
    padding: 10px 12px;
    border: 1px solid #334747;
    border-radius: 8px;
}

.manual-chord-editor summary {
    cursor: pointer;
    color: #b8cccc;
    font-weight: 700;
}

.manual-chord-editor textarea,
.manual-chord-editor label,
.manual-chord-editor button {
    display: block;
    width: 100%;
    margin-top: 9px;
}

@media (max-width: 640px) {
    .song-number-entry {
        grid-template-columns: 1fr;
    }

    .song-number-entry > * {
        grid-column: 1;
    }

    .song-number-entry button {
        min-height: 44px;
    }
}

.songs-panel {
    background: #172020;
    padding: 16px;
    overflow-y: auto;
}

.search-box {
    width: 100%;
    padding: 12px 14px;
    margin-bottom: 15px;
    border: 1px solid #3a4a4a;
    border-radius: 8px;
    background: #0f1515;
    color: white;
}

.new-song-button {
    width: 100%;
    margin-bottom: .75rem;
    background: #2f8a83;
    color: #fff;
    font-weight: 800;
}

.song-item {
    width: 100%;
    display: flex;
    gap: 10px;
    align-items: center;
    text-align: left;
    margin-bottom: 7px;
    padding: 13px;
    border: 0;
    border-radius: 7px;
    background: #263232;
    color: white;
    cursor: pointer;
}

.song-item:hover {
    background: #315050;
}

.song-item.selected {
    background: #357171;
}

.song-item strong {
    color: #6fd7d7;
}

.sections-panel {
    padding: 24px;
    overflow-y: auto;
}

.song-header {
    margin-bottom: 20px;
}

.sections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 14px;
}

.section-card {
    background: #202929;
    color: white;
    border: 2px solid transparent;
    border-radius: 10px;
    padding: 18px;
    text-align: left;
    cursor: pointer;
}

.section-card:hover {
    border-color: #42b8d6;
}

.youth-mode-button {
    border: 1px solid #d99328;
    border-radius: 7px;
    padding: 11px 16px;
    background: #523711;
    color: #ffd78b;
    font-weight: 800;
    cursor: pointer;
}

.youth-mode-button.active {
    background: #d98616;
    color: #111;
    box-shadow: 0 0 18px rgba(255, 165, 35, .3);
}

.youth-mode-help {
    padding: 10px 13px;
    border-left: 4px solid #e89a29;
    border-radius: 5px;
    background: #312719;
    color: #e8d5b6;
}

.youth-mode-toolbar {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 12px;
}

.youth-mode-toolbar .youth-mode-help {
    flex: 1;
}

.youth-emphasis-switch,
.youth-cursive-switch {
    display: grid;
    overflow: hidden;
    border: 1px solid #604d31;
    border-radius: 7px;
    background: #251f17;
}

.youth-emphasis-switch {
    grid-template-columns: repeat(3, auto);
}

.youth-cursive-switch {
    grid-template-columns: repeat(2, auto);
}

.youth-emphasis-switch > span,
.youth-cursive-switch > span {
    grid-column: 1 / -1;
    padding: 4px 10px;
    color: #bca57d;
    font-size: 11px;
    font-weight: 800;
    text-align: center;
}

.youth-emphasis-switch button,
.youth-cursive-switch button {
    min-width: 68px;
    padding: 7px 9px;
    border: 0;
    border-top: 1px solid #604d31;
    background: #332b20;
    color: #d8c7aa;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.youth-emphasis-switch button + button,
.youth-cursive-switch button + button {
    border-left: 1px solid #604d31;
}

.youth-emphasis-switch button.active,
.youth-cursive-switch button.active {
    background: #d98616;
    color: #111;
}

@media (max-width: 900px) {
    .youth-mode-toolbar {
        flex-wrap: wrap;
    }

    .youth-mode-toolbar .youth-mode-help {
        flex-basis: 100%;
    }

    .youth-emphasis-switch,
    .youth-cursive-switch {
        flex: 1;
    }
}

.youth-phrases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px;
}

.youth-phrase-card {
    min-height: 118px;
    padding: 0;
    border: 2px solid #4f4130;
    border-radius: 10px;
    background: linear-gradient(145deg, #292622, #202929);
    color: white;
    text-align: left;
}

.youth-phrase-card:hover,
.youth-phrase-card:focus-within {
    border-color: #e89a29;
    outline: none;
}

.youth-phrase-card.current {
    border-color: #5cff74;
    box-shadow: 0 0 0 2px rgba(92, 255, 116, .55), 0 0 18px rgba(92, 255, 116, .32);
}

.youth-phrase-project {
    width: 100%;
    min-height: 84px;
    padding: 15px;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.youth-boundary-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid #4f4130;
}

.youth-boundary-controls button {
    padding: 8px 6px;
    border: 0;
    background: #362d20;
    color: #f3c77d;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}

.youth-boundary-controls button + button {
    border-left: 1px solid #4f4130;
}

.youth-boundary-controls button:disabled {
    color: #746a59;
    cursor: default;
}

.section-title {
    display: block;
    color: #42b8d6;
    font-weight: 700;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.section-text {
    display: block;
    white-space: pre-line;
    font-size: 18px;
    line-height: 1.45;
}

.empty-state {
    color: #888;
    text-align: center;
    margin-top: 100px;
    font-size: 24px;
}
.bible-page {
    min-height: 100vh;
    background: #101414;
    color: white;
    padding: 24px 24px 100px 24px;
    position: relative;
}

.bible-version-selector {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: #172020;
    border: 1px solid #334444;
    border-radius: 10px;
}

.bible-version-selector label {
    margin: 0;
    color: #6fd7d7;
    font-weight: 700;
}

.bible-version-selector select {
    min-width: 280px;
    padding: 9px 12px;
    background: #263232;
    color: white;
    border: 1px solid #3a4a4a;
    border-radius: 7px;
}

.bible-title {
    background: #244b4b;
    border-radius: 10px;
    padding: 14px 18px;
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 20px;
}

.bible-search {
    width: 100%;
    padding: 14px 16px;
    margin-bottom: 22px;
    border: 1px solid #3a4a4a;
    border-radius: 8px;
    background: #0f1515;
    color: white;
    font-size: 17px;
}

.testament-section {
    margin-bottom: 28px;
}

.testament-section h2 {
    margin-bottom: 12px;
    color: #6fd7d7;
    font-size: 22px;
}

.book-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.book-button {
    background: #263232;
    color: white;
    border: 0;
    border-radius: 8px;
    padding: 13px 14px;
    text-align: left;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.book-button:hover {
    background: #315050;
}

.chapter-heading {
    margin: 10px 0 20px;
    color: #b8cccc;
}

.chapter-grid {
    display: grid;
    grid-template-columns: repeat(10, minmax(50px, 1fr));
    gap: 10px;
}

.chapter-button {
    background: #263232;
    color: white;
    border: 0;
    border-radius: 8px;
    padding: 13px 0;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
}

.chapter-button:hover {
    background: #357171;
}

.back-button {
    margin-top: 24px;
    background: #2f9ac1;
    color: white;
    border: 0;
    border-radius: 8px;
    padding: 12px 18px;
    font-weight: 700;
    cursor: pointer;
}

.chapter-toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
}

.chapter-toolbar button,
.chapter-toolbar span {
    background: #263232;
    color: white;
    border: 0;
    border-radius: 8px;
    padding: 12px 18px;
    font-weight: 700;
}

.chapter-verses {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.verse-row {
    width: 100%;
    display: grid;
    grid-template-columns: 54px 1fr;
    align-items: center;
    gap: 16px;
    background: #202929;
    color: white;
    border: 2px solid transparent;
    border-radius: 10px;
    padding: 16px;
    cursor: pointer;
    text-align: left;
}

.verse-row:hover {
    border-color: #42b8d6;
}

.verse-number {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #357171;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

.verse-text {
    font-size: 20px;
    line-height: 1.45;
}

.selection-panel {
    position: fixed;
    left: 280px;
    right: 18px;
    bottom: 18px;

    min-height: 56px;

    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;

    background: #172020;

    border: 1px solid #334444;
    border-radius: 12px;

    padding: 10px 12px;

    box-shadow: 0 10px 30px rgba(0,0,0,0.35);

    z-index: 1000;
}
.selection-panel h3 {
    margin: 0 10px 0 0;
    color: #6fd7d7;
    font-size: 14px;
    white-space: nowrap;
}

.selected-verse {
    width: auto;

    background: #357171;
    color: white;

    border: 0;
    border-radius: 7px 0 0 7px;

    padding: 8px 12px;
    margin: 0;

    font-size: 13px;
    font-weight: 700;

    white-space: nowrap;

    cursor: pointer;
}

.selected-verse:hover {
    background: #418989;
}

.clear-selection {
    width: auto;

    margin: 0 0 0 auto;

    background: #7d3333;
    color: white;

    border: 0;
    border-radius: 7px;

    padding: 8px 12px;

    font-size: 12px;
    font-weight: 700;

    white-space: nowrap;

    cursor: pointer;
}

.search-results {
    margin-bottom: 25px;
}

.verse-search-result {
    width: 100%;
    background: #202929;
    color: white;
    border: 2px solid transparent;
    border-radius: 9px;
    padding: 13px;
    margin-bottom: 8px;
    text-align: left;
    cursor: pointer;
}

.verse-search-result:hover {
    border-color: #42b8d6;
}

.verse-search-result strong {
    display: block;
    color: #6fd7d7;
    margin-bottom: 4px;
}

.verse-search-result span {
    display: block;
    line-height: 1.4;
}

.bible-home-button {
    background: #357171 !important;
    font-size: 20px;
    min-width: 48px;
    cursor: pointer;
}

.bible-home-button:hover {
    background: #418989 !important;
}

.song-item {
    flex-wrap: wrap;
}

.song-match {
    display: block;
    width: 100%;
    margin-left: 35px;

    color: #9fb5b5;
    font-size: 12px;
    line-height: 1.3;
}

.navbar-brand {
    font-weight: 800;
}

.nav-link {
    font-size: 16px;
}

.nav-link.active {
    background: #357171 !important;
    color: white !important;
}

.edit-song-button,
.musician-button {
    border: 0;
    border-radius: 8px;
    padding: 10px 14px;
    font-weight: 700;
    cursor: pointer;
}

.edit-song-button {
    background: #3b6f6f;
    color: white;
}

.musician-button {
    background: #315060;
    color: white;
}

.musician-page {
    min-height: 100vh;
    background: #101414;
    color: white;
    padding: 24px;
}

.musician-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #244b4b;
    padding: 16px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.musician-section {
    background: #1b2323;
    border-radius: 10px;
    padding: 18px;
    margin-bottom: 18px;
}

.musician-section-title {
    color: #6fd7d7;
    font-weight: 800;
    margin-bottom: 10px;
}

.musician-chords {
    color: #7cff00;
    font-size: 22px;
    font-weight: 700;
    white-space: pre-wrap;
    margin-bottom: 6px;
}

.musician-lyrics {
    color: white;
    font-size: 22px;
    white-space: pre-wrap;
}

.transpose-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}

.song-editor {
    min-height: 100vh;
    background: #101414;
    color: white;
    padding: 24px;
}

.editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    background: #244b4b;
    border-radius: 10px;

    padding: 16px 18px;
    margin-bottom: 20px;
}

.editor-header h2 {
    margin: 0;
}

.editor-header button {
    border: 0;
    border-radius: 8px;
    padding: 10px 16px;
    font-weight: 700;
    cursor: pointer;
}

.save-button {
    background: #2f9ac1;
    color: white;
}

.song-editor-simple {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px 36px;
}

.simple-song-heading {
    width: calc(100% + 40px);
    margin: 0 -20px 28px;
    padding: 15px 20px;
    background: #244b4b;
    text-align: center;
}

.simple-song-heading h1 {
    margin: 0;
    font-size: clamp(24px, 4vw, 34px);
}

.simple-song-card {
    width: min(100%, 720px);
}

.simple-song-title,
.simple-song-content {
    box-sizing: border-box;
    width: 100%;
    border: 2px solid #3a5555;
    border-radius: 8px;
    background: #f7f7f5;
    color: #111;
}

.simple-song-title {
    padding: 12px 14px;
    margin-bottom: 8px;
    font-size: 21px;
    font-weight: 700;
}

.simple-song-tabs {
    display: flex;
    border: 2px solid #2f9ac1;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    background: #e9eded;
}

.simple-song-tabs button {
    flex: 1;
    border: 0;
    border-right: 1px solid #b8c5c5;
    padding: 12px 16px;
    background: transparent;
    color: #243333;
    font-weight: 800;
}

.simple-song-tabs button:last-child { border-right: 0; }
.simple-song-tabs button.active { background: #357171; color: white; }

.simple-song-content {
    display: block;
    min-height: min(54vh, 570px);
    border-color: #2f9ac1;
    border-radius: 0 0 8px 8px;
    padding: 18px;
    resize: vertical;
    font: 700 17px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: pre-wrap;
}

.simple-song-chords { color: #166f30; }

.simple-song-help {
    margin: 8px 2px 0;
    color: #b8cccc;
    font-size: 14px;
}

.simple-song-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
}

.simple-song-actions button {
    min-width: 120px;
    border: 0;
    border-radius: 8px;
    padding: 12px 18px;
    background: #357171;
    color: white;
    font-weight: 800;
}

.simple-song-actions .save-button { background: #2f9ac1; }

@media (max-width: 640px) {
    .song-editor-simple { padding-inline: 12px; }
    .simple-song-heading { width: calc(100% + 24px); margin-inline: -12px; }
    .simple-song-content { min-height: 56vh; font-size: 16px; padding: 13px; }
    .simple-song-actions button { flex: 1; min-width: 0; }
}

.editor-fields {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 10px;

    background: #172020;
    border-radius: 10px;

    padding: 18px;
    margin-bottom: 20px;
}

.editor-fields input,
.section-editor input,
.section-editor textarea {
    width: 100%;

    background: #0f1515;
    color: white;

    border: 1px solid #3a4a4a;
    border-radius: 7px;

    padding: 10px;
}

.section-editor {
    background: #202929;
    border-radius: 10px;

    padding: 18px;
    margin-bottom: 14px;
}

.section-editor label {
    display: block;

    margin-top: 12px;
    margin-bottom: 6px;

    color: #6fd7d7;
    font-weight: 700;
}

.section-name-editor {
    font-size: 18px;
    font-weight: 700;
}

.section-editor-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: end;
}

.section-editor-heading label {
    display: grid;
    gap: 5px;
    margin: 0;
    color: #6fd7d7;
    font-size: 12px;
    font-weight: 800;
}

.section-editor-heading select {
    min-width: 125px;
    border: 1px solid #4a6b6b;
    border-radius: 7px;
    padding: 10px;
    background: #0f1515;
    color: white;
    font-weight: 700;
}

@media (max-width: 640px) {
    .section-editor-heading {
        grid-template-columns: 1fr;
    }
}

.musician-combined {
    font-family: monospace;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.45;
    white-space: pre;
    overflow-x: auto;
}

.chord-line {
    color: #7cff00;
    white-space: pre;
}

.lyric-line {
    color: white;
    white-space: pre;
}

.operator-selection {
    background: #172020;
    border-bottom: 1px solid #334444;
    padding: 10px 16px;
}

.projection-preview {
    max-height: 145px;
    overflow-y: auto;
    padding: 10px 16px 12px;
    background: #101717;
    color: white;
    border-bottom: 1px solid #334444;
    text-align: center;
}

.projection-preview-label {
    margin-bottom: 5px;
    color: #6fd7d7;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.projection-preview-text {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    white-space: pre-line;
}

.projection-preview.editing {
    max-height: none;
}

.quick-edit-open {
    margin-top: 8px;
    padding: 5px 10px;
    border: 1px solid #4f8585;
    border-radius: 6px;
    background: #203838;
    color: #8de5e5;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
}

.quick-edit-panel {
    max-width: 760px;
    margin: 10px auto 0;
    padding: 10px;
    border: 1px solid #4f8585;
    border-radius: 8px;
    background: #182626;
    text-align: left;
}

.quick-edit-panel label {
    display: block;
    margin-bottom: 6px;
    color: #6fd7d7;
    font-size: 11px;
    font-weight: 900;
}

.quick-edit-panel textarea {
    width: 100%;
    resize: vertical;
    padding: 9px;
    border: 1px solid #557070;
    border-radius: 6px;
    background: #0d1515;
    color: white;
    font: inherit;
}

.quick-edit-panel > div {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.quick-edit-panel button {
    padding: 7px 12px;
    border: 0;
    border-radius: 5px;
    font-weight: 900;
    cursor: pointer;
}

.quick-edit-apply {
    background: #3f9292;
    color: white;
}

.quick-edit-cancel {
    background: #4a5555;
    color: white;
}

.quick-edit-panel small {
    display: block;
    margin-top: 7px;
    color: #a7b3b3;
}

.projection-preview-image {
    display: block;
    max-width: 180px;
    max-height: 85px;
    margin: 0 auto;
    object-fit: contain;
}

.uploaded-image-panel {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: #172020;
    color: white;
    border-bottom: 1px solid #334444;
}

.uploaded-image-panel img {
    width: 100px;
    height: 65px;
    object-fit: contain;
    background: black;
    border-radius: 6px;
}

.uploaded-image-panel > div {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.uploaded-image-panel strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.uploaded-image-panel button {
    border: 0;
    border-radius: 7px;
    padding: 9px 12px;
    background: #2f9ac1;
    color: white;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.image-message {
    padding: 8px 16px;
    background: #203030;
    color: #b8cccc;
    border-bottom: 1px solid #334444;
    font-size: 13px;
}

.image-library-panel {
    padding: 14px 16px;
    border-bottom: 1px solid #334444;
    background: #172020;
    color: white;
}

.background-library-panel {
    padding: 14px 16px;
    border-bottom: 1px solid #334444;
    background: #172020;
    color: white;
}

.background-library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}

.background-brightness-control {
    display: grid;
    grid-template-columns: auto minmax(180px, 420px) 54px;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #202b2b;
    color: #bfe8e8;
    font-size: 13px;
    font-weight: 800;
}

.background-brightness-control input {
    width: 100%;
    accent-color: #49b8b8;
}

.background-library-card {
    overflow: hidden;
    padding: 0 0 9px;
    border: 2px solid #3b5050;
    border-radius: 9px;
    background: #223030;
    color: white;
    text-align: left;
    cursor: pointer;
}

.background-library-card.selected {
    border-color: #6fd7d7;
    box-shadow: 0 0 0 2px rgba(111, 215, 215, .2);
}

.background-library-card img {
    display: block;
    width: 100%;
    height: 105px;
    margin-bottom: 8px;
    background: #050808;
    object-fit: cover;
}

.background-library-card strong {
    display: block;
    padding-inline: 9px;
}

.background-remove-button {
    border: 1px solid #6fd7d7;
    border-radius: 7px;
    padding: 9px 13px;
    background: transparent;
    color: #bff4f4;
    font-weight: 800;
    cursor: pointer;
}

.image-library-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.image-library-header > div {
    display: flex;
    flex-direction: column;
}

.image-library-header strong {
    color: #6fd7d7;
    font-size: 18px;
}

.image-library-header span,
.image-library-empty {
    color: #aebebe;
    font-size: 13px;
}

.image-library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.image-library-card {
    position: relative;
    overflow: hidden;
    border: 1px solid #3b5050;
    border-radius: 9px;
    background: #223030;
}

.image-library-select {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 0 0 9px;
    border: 0;
    background: transparent;
    color: white;
    text-align: left;
    cursor: pointer;
}

.image-library-select img {
    width: 100%;
    height: 105px;
    background: #0b0f0f;
    object-fit: cover;
}

.image-library-select strong,
.image-library-select span {
    margin-inline: 9px;
}

.image-library-select strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.image-library-select span {
    color: #6fd7d7;
    font-size: 9px;
    font-weight: 800;
}

.image-library-remove {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #8b3434;
    color: white;
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
}

.projection-preview-reference {
    margin-top: 5px;
    color: #6fd7d7;
    font-size: 14px;
    font-weight: 700;
}

.projection-preview-status,
.projection-preview-empty {
    font-size: 15px;
    font-weight: 700;
}

.projection-preview-empty {
    color: #8fa3a3;
}

.operator-selection-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    color: #6fd7d7;
}

.operator-selection-title span {
    color: #8fa3a3;
    font-size: 12px;
}

.operator-selection-title button {
    margin-left: auto;
    background: #7d3333;
    color: white;
    border: 0;
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
}

.operator-selection-items {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.operator-selected-item {
    background: #357171;
    color: white;
    border: 0;
    border-radius: 0;
    padding: 8px 11px;
    font-weight: 600;
    cursor: pointer;
}

.operator-selected-item:hover {
    background: #418989;
}

.selected-image-thumbnail {
    width: 42px;
    height: 32px;
    margin-right: 6px;
    border-radius: 4px;
    object-fit: cover;
    vertical-align: middle;
}

.selected-item-with-remove {
    display: inline-flex;
    align-items: stretch;
}

.selected-item-order {
    display: flex;
    flex-direction: column;
}

.selected-item-order button {
    flex: 1;
    min-width: 25px;
    padding: 0 5px;
    border: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    background: #285858;
    color: white;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}

.selected-item-order button:first-child {
    border-radius: 7px 0 0 0;
}

.selected-item-order button:last-child {
    border-radius: 0 0 0 7px;
}

.selected-item-order button:disabled {
    opacity: .35;
    cursor: default;
}

.remove-selected-item {
    min-width: 30px;
    margin: 0;
    padding: 4px 8px;
    background: #7d3333;
    color: white;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0 7px 7px 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.remove-selected-item:hover {
    background: #a13f3f;
}

.saved-lists-panel {
    padding: 12px 16px;
    background: #172020;
    color: white;
    border-bottom: 1px solid #334444;
}

.save-list-form,
.saved-lists {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.save-list-form input {
    min-width: 260px;
    padding: 9px 12px;
    background: #0f1515;
    color: white;
    border: 1px solid #3a4a4a;
    border-radius: 7px;
}

.save-list-form button,
.load-list-button {
    padding: 9px 12px;
    background: #357171;
    color: white;
    border: 0;
    border-radius: 7px;
    cursor: pointer;
}

.save-list-form button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.saved-list-message {
    display: block;
    margin: 8px 0;
    color: #8ff0b3;
    font-size: 13px;
}

.saved-list-item {
    display: inline-flex;
}

.load-list-button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 7px 0 0 7px;
}

.load-list-button small {
    color: #c4d7d7;
}

.delete-list-button {
    padding: 0 10px;
    background: #7d3333;
    color: white;
    border: 0;
    border-radius: 0 7px 7px 0;
    font-size: 18px;
    cursor: pointer;
}

.duplicate-list-button {
    padding: 0 10px;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, .2);
    border-radius: 0;
    background: #315c70;
    color: white;
    font-size: 17px;
    cursor: pointer;
}

.schedule-page {
    min-height: 100vh;
    padding-bottom: 30px;
    background: #101414;
    color: white;
}

.schedule-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px;
    background: #244b4b;
}

.manage-teams-link,
.teams-header a {
    padding: 10px 14px;
    background: #357171;
    color: white;
    border-radius: 7px;
    font-weight: 700;
    text-decoration: none;
}

.schedule-page-message {
    margin: 12px 18px 0;
    padding: 10px 14px;
    background: #203b2b;
    border-radius: 7px;
}

.schedule-header h1,
.schedule-header span,
.groups-section h2,
.calendar-toolbar h2 {
    margin: 0;
}

.schedule-header span {
    color: #b8cccc;
}

.groups-section,
.calendar-section {
    margin: 18px;
    padding: 16px;
    background: #172020;
    border: 1px solid #334444;
    border-radius: 12px;
}

.groups-section h2 {
    color: #6fd7d7;
    font-size: 21px;
}

.group-form {
    display: grid;
    grid-template-columns: minmax(180px, 0.8fr) minmax(240px, 1.5fr) auto;
    gap: 10px;
    margin: 14px 0;
}

.group-form input,
.schedule-editor input,
.schedule-editor select {
    padding: 10px 12px;
    background: #0f1515;
    color: white;
    border: 1px solid #3a4a4a;
    border-radius: 7px;
}

.group-form button,
.save-schedule-button {
    padding: 10px 14px;
    background: #2f9ac1;
    color: white;
    border: 0;
    border-radius: 7px;
    font-weight: 700;
    cursor: pointer;
}

.schedule-message {
    margin-bottom: 10px;
    color: #8ff0b3;
}

.group-list {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.group-chip {
    display: flex;
    align-items: stretch;
    background: #263232;
    border-radius: 8px;
    overflow: hidden;
}

.group-chip > div {
    display: flex;
    flex-direction: column;
    padding: 9px 12px;
}

.group-chip small {
    color: #b8cccc;
}

.group-chip button,
.calendar-entry button {
    border: 0;
    background: #7d3333;
    color: white;
    cursor: pointer;
}

.schedule-editor {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px;
    padding: 14px 16px;
    background: #203030;
    border: 1px solid #42b8d6;
    border-radius: 10px;
}

.schedule-editor > div {
    display: flex;
    flex-direction: column;
    min-width: 190px;
}

.schedule-editor span {
    color: #b8cccc;
    font-size: 13px;
}

.cancel-schedule-button {
    padding: 10px 14px;
    background: #4a5555;
    color: white;
    border: 0;
    border-radius: 7px;
    cursor: pointer;
}

.calendar-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 14px;
}

.calendar-toolbar button {
    width: 40px;
    height: 36px;
    background: #357171;
    color: white;
    border: 0;
    border-radius: 7px;
    cursor: pointer;
}

.calendar-grid {
    display: grid;
    grid-template-columns:
        repeat(6, minmax(95px, 0.72fr))
        minmax(230px, 1.8fr);
}

.calendar-weekdays div {
    padding: 8px;
    color: #6fd7d7;
    text-align: center;
    font-weight: 700;
}

.calendar-day {
    min-height: 165px;
    padding: 8px;
    background: #202929;
    border: 1px solid #334444;
}

.calendar-day-empty {
    background: #141a1a;
}

.calendar-sunday {
    background: #243333;
    border-color: #357171;
}

.calendar-day-number {
    margin-bottom: 6px;
    font-weight: 800;
}

.calendar-entries {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sunday-program-title {
    margin: 2px 0 3px;
    color: #6fd7d7;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
}

.sunday-program-panel {
    margin: 18px 18px 0;
    padding: 16px;
    background: #172020;
    color: white;
    border: 1px solid #42b8d6;
    border-radius: 12px;
}

.sunday-program-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.sunday-program-panel-header > div:first-child {
    display: flex;
    flex-direction: column;
}

.sunday-program-panel-header strong {
    color: #6fd7d7;
    font-size: 20px;
}

.sunday-program-panel-header span {
    color: #b8cccc;
}

.sunday-program-panel-header > div:last-child,
.program-panel-actions {
    display: flex;
    gap: 5px;
}

.add-program-button,
.print-program-button,
.close-program-button,
.program-panel-actions button {
    padding: 8px 11px;
    background: #357171;
    color: white;
    border: 0;
    border-radius: 6px;
    font-weight: 700;
    cursor: pointer;
}

.print-program-button {
    display: inline-flex;
    align-items: center;
    padding: 8px 11px;
    border-radius: 6px;
    background: #315c70;
    color: white;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.print-plan-page {
    min-height: 100vh;
    padding: 28px;
    background: #f3f5f4;
    color: #182020;
}

.print-actions {
    max-width: 940px;
    display: flex;
    justify-content: space-between;
    margin: 0 auto 18px;
}

.print-actions a,
.print-actions button {
    padding: 10px 14px;
    border: 0;
    border-radius: 7px;
    background: #357171;
    color: white;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.print-plan-header,
.print-plan-summary,
.print-plan-section,
.print-plan-empty {
    max-width: 940px;
    margin-inline: auto;
    background: white;
}

.print-plan-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px;
    border-top: 8px solid #357171;
    border-radius: 8px 8px 0 0;
}

.print-plan-logo {
    width: min(390px, 48%);
    height: auto;
    object-fit: contain;
}

.print-plan-header span {
    color: #357171;
    font-weight: 800;
}

.print-plan-header h1 {
    margin: 5px 0 2px;
    font-size: 27px;
    font-weight: 700;
}

.print-plan-header strong {
    color: #285f5f;
    font-size: 22px;
    line-height: 1.2;
}

.print-plan-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 0 28px 24px;
}

.print-plan-summary > div,
.print-plan-section {
    border-top: 1px solid #d7dfdd;
}

.print-plan-summary h2,
.print-plan-section h2 {
    margin-bottom: 10px;
    color: #285f5f;
}

.print-plan-summary > div > span,
.print-ministry,
.print-ministry small {
    display: block;
}

.print-ministry {
    margin-bottom: 7px;
}

.print-ministry small,
.print-program-list span {
    color: #586565;
}

.print-plan-section {
    padding: 20px 28px;
}

.print-plan-section:last-child {
    padding-bottom: 30px;
    border-radius: 0 0 8px 8px;
}

.print-program-list,
.print-selection-list {
    margin: 0;
    padding-left: 28px;
}

.print-program-list li {
    margin-bottom: 8px;
    padding-left: 5px;
}

.print-program-list li span {
    display: block;
    font-size: 13px;
}

.print-program-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.print-program-table .program-time-column {
    width: 22%;
}

.print-program-table .program-name-column {
    width: 25%;
}

.print-program-table .program-notes-column {
    width: 38%;
}

.print-program-table .program-duration-column {
    width: 15%;
}

.print-program-table th,
.print-program-table td {
    padding: 9px 10px;
    border: 1px solid #aeb9b7;
    text-align: left;
    vertical-align: top;
}

.print-program-table th {
    background: #e4ecea;
    color: #285f5f;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.print-program-table tbody tr:nth-child(even) {
    background: #f4f7f6;
}

.print-time-cell,
.print-duration-cell {
    white-space: nowrap;
    font-weight: 700;
}

.print-time-cell {
    color: #285f5f;
}

.print-selection-list {
    columns: 2;
}

.print-selection-list li {
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
    break-inside: avoid;
}

.print-selection-icon {
    min-width: 22px;
    font-size: 17px;
    text-align: center;
}

.print-selection-thumbnail {
    width: 58px;
    height: 40px;
    border: 1px solid #b9c3c1;
    border-radius: 4px;
    object-fit: cover;
}

.print-plan-empty {
    padding: 30px;
    border-radius: 8px;
}

@media print {
    @page {
        size: A4;
        margin: 12mm;
    }

    .sidebar,
    .print-actions,
    #blazor-error-ui {
        display: none !important;
    }

    .page,
    .page main,
    .page article {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .print-plan-page {
        min-height: auto;
        padding: 0;
        background: white;
    }

    .print-plan-header,
    .print-plan-summary,
    .print-plan-section {
        max-width: none;
    }

    .print-plan-section,
    .print-plan-summary > div {
        break-inside: avoid;
    }
}

.close-program-button,
.program-panel-actions .delete-program-button {
    background: #7d3333;
}

.sunday-program-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 8px;
}

.sunday-saved-selection {
    display: grid;
    grid-template-columns: minmax(210px, 1fr) minmax(220px, 1.2fr) auto auto;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    padding: 11px;
    border: 1px solid #365858;
    border-radius: 9px;
    background: #202d2d;
}

.sunday-template-selector {
    display: grid;
    grid-template-columns: minmax(210px, 1fr) minmax(220px, 1.2fr) auto auto;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
    padding: 11px;
    border: 1px solid #665a3a;
    border-radius: 9px;
    background: #302d24;
}

.sunday-template-selector > div {
    display: flex;
    flex-direction: column;
}

.sunday-template-selector > div strong {
    color: #e1bc68;
}

.sunday-template-selector > div span {
    color: #c2bba9;
    font-size: 12px;
}

.sunday-template-selector select {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid #655d49;
    border-radius: 7px;
    background: #15130f;
    color: white;
}

.sunday-template-selector button,
.sunday-template-selector > a {
    padding: 9px 11px;
    border: 0;
    border-radius: 7px;
    background: #9a7431;
    color: white;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.sunday-template-selector button:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.schedule-header-links {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.templates-page {
    min-height: 100vh;
    padding: 26px;
    background: #101414;
    color: white;
}

.template-create-card,
.template-editor-card {
    margin-top: 18px;
    padding: 18px;
    border: 1px solid #304747;
    border-radius: 12px;
    background: #172020;
}

.template-create-card h2 {
    margin: 0 0 12px;
    color: #6fd7d7;
}

.template-create-form,
.template-editor-header {
    display: grid;
    grid-template-columns: 1fr 1.4fr auto;
    gap: 9px;
}

.template-create-form input,
.template-editor-header input,
.template-item-row input,
.template-add-item input {
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid #425555;
    border-radius: 6px;
    background: #0f1515;
    color: white;
}

.template-create-form button,
.template-editor-header button,
.template-add-item button,
.template-item-row button {
    padding: 8px 10px;
    border: 0;
    border-radius: 6px;
    background: #357171;
    color: white;
    font-weight: 700;
    cursor: pointer;
}

.template-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.template-editor-header {
    grid-template-columns: minmax(280px, 1fr) auto auto;
    align-items: center;
}

.template-editor-header > div {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 8px;
}

.template-editor-header .template-delete-button,
.template-item-row .template-item-delete {
    background: #7d3333;
}

.template-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 13px;
}

.template-item-row {
    display: grid;
    grid-template-columns: 30px minmax(160px, 1fr) 100px 78px minmax(140px, 1fr) auto;
    align-items: center;
    gap: 6px;
    padding: 7px;
    border-radius: 7px;
    background: #223030;
}

.template-item-row > span {
    color: #6fd7d7;
    font-weight: 800;
    text-align: center;
}

.template-item-row > div {
    display: flex;
    gap: 3px;
}

.template-add-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 7px;
    margin-top: 10px;
}

.sunday-saved-selection > div {
    display: flex;
    flex-direction: column;
}

.sunday-saved-selection > div strong {
    color: #6fd7d7;
}

.sunday-saved-selection > div span {
    color: #aebebe;
    font-size: 12px;
}

.sunday-saved-selection select {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid #455b5b;
    border-radius: 7px;
    background: #0f1515;
    color: white;
}

.sunday-saved-selection button {
    padding: 9px 11px;
    border: 0;
    border-radius: 7px;
    background: #357171;
    color: white;
    font-weight: 700;
    cursor: pointer;
}

.sunday-saved-selection .load-sunday-selection {
    background: #2f9ac1;
}

.sunday-saved-selection button:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.sunday-program-panel-item {
    display: grid;
    grid-template-columns: 58px minmax(150px, 1fr) auto auto;
    align-items: center;
    gap: 9px;
    padding: 9px;
    background: #263232;
    border-radius: 8px;
}

.sunday-program-panel-item .program-order {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 30px;
    background: #357171;
    border-radius: 50%;
    font-weight: 800;
}

.sunday-program-panel-item .program-order.has-time {
    border-radius: 7px;
    background: #2f6868;
    font-size: 12px;
}

.sunday-program-panel-item .program-event-order {
    color: #809494;
    font-size: 10px;
}

.sunday-program-panel-item > div:nth-child(2) {
    display: flex;
    flex-direction: column;
}

.sunday-program-panel-item small {
    color: #c4d7d7;
}

.sunday-program-panel-item .program-time-summary,
.print-program-time {
    color: #4d9f9f;
    font-weight: 700;
}

.program-timing-editor {
    display: flex;
    align-items: flex-end;
    gap: 5px;
}

.program-timing-editor label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: #aebebe;
    font-size: 10px;
    font-weight: 700;
}

.program-timing-editor input {
    width: 82px;
    min-height: 31px;
    padding: 4px 6px;
    border: 1px solid #455b5b;
    border-radius: 5px;
    background: #111919;
    color: white;
}

.program-timing-editor input[type="number"] {
    width: 62px;
}

.program-timing-editor button {
    min-height: 31px;
    padding: 5px 9px;
    border: 0;
    border-radius: 5px;
    background: #347979;
    color: white;
    font-weight: 800;
    cursor: pointer;
}

.program-calendar-button {
    background: #2f9ac1 !important;
}

.sunday-program-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 4px 5px;
    background: #2b3d3d;
    border-left: 3px solid #42b8d6;
    border-radius: 4px;
    font-size: 11px;
}

.sunday-program-item > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.sunday-program-item small {
    display: block;
    color: #c4d7d7;
}

.program-item-actions {
    display: flex;
    flex-shrink: 0;
}

.program-item-actions button {
    width: 21px;
    height: 21px;
    padding: 0;
    background: transparent;
    color: #b8cccc;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
}

.program-item-actions button:hover {
    background: #496060;
    color: white;
}

.calendar-entry {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    border-radius: 5px;
    overflow: hidden;
    font-size: 12px;
}

.calendar-entry span {
    flex: 1;
    padding: 5px 6px;
}

.calendar-entry small {
    display: block;
}

.calendar-entry-notes {
    margin-top: 3px;
    color: #e0eded;
    white-space: normal;
    overflow-wrap: anywhere;
}

.sunday-entry {
    background: #357171;
}

.rehearsal-entry {
    background: #38506a;
}

.ministry-entry {
    background: #66502f;
}

.ministry-entry strong {
    display: block;
    color: #ffe0a3;
}

.teams-page {
    min-height: 100vh;
    background: #101414;
    color: white;
}

.teams-message {
    margin: 16px 18px 0;
    padding: 10px 14px;
    background: #203b2b;
    color: #8ff0b3;
    border-radius: 8px;
}

.teams-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding: 18px;
}

.team-management-card {
    padding: 16px;
    background: #172020;
    border: 1px solid #334444;
    border-radius: 12px;
}

.team-management-card h2 {
    margin: 0 0 14px;
    color: #6fd7d7;
}

.team-create-form,
.team-editor-row {
    display: grid;
    grid-template-columns: minmax(140px, 0.8fr) minmax(180px, 1.3fr) auto;
    gap: 8px;
}

.team-create-form {
    margin-bottom: 14px;
}

.team-create-form.ministry-create-form {
    grid-template-columns: minmax(130px, .7fr) minmax(150px, 1fr) minmax(190px, 1.3fr) auto;
}

.team-create-form input,
.team-editor-row input {
    min-width: 0;
    padding: 9px 11px;
    background: #0f1515;
    color: white;
    border: 1px solid #3a4a4a;
    border-radius: 7px;
}

.team-create-form button,
.team-save-button {
    padding: 9px 12px;
    background: #2f9ac1;
    color: white;
    border: 0;
    border-radius: 7px;
    font-weight: 700;
    cursor: pointer;
}

.team-editor-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.team-editor-row {
    grid-template-columns: minmax(140px, 0.8fr) minmax(180px, 1.3fr) auto 34px;
}

.team-editor-row.ministry-editor-row {
    grid-template-columns: minmax(120px, .7fr) minmax(140px, .9fr) minmax(190px, 1.3fr) auto 34px;
}

.team-delete-button {
    background: #7d3333;
    color: white;
    border: 0;
    border-radius: 7px;
    font-size: 18px;
    cursor: pointer;
}

.calendar-day-actions {
    display: flex;
    gap: 4px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.calendar-day-actions button {
    padding: 5px 7px;
    background: #2f6868;
    color: white;
    border: 0;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}

.projectors-page {
    min-height: 100vh;
    padding: 28px;
    background: #101414;
    color: white;
}

.projectors-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 22px;
}

.projectors-header > a {
    padding: 11px 14px;
    border-radius: 8px;
    background: #347979;
    color: white;
    font-weight: 700;
    text-decoration: none;
}

.projectors-header h1 {
    margin: 0;
    color: #6fd7d7;
}

.projectors-header p {
    margin: 4px 0 0;
    color: #aabcbc;
}

.projectors-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.projector-status-card {
    overflow: hidden;
    border: 1px solid #304747;
    border-radius: 14px;
    background: #172020;
    border-top: 5px solid var(--destination-color);
}

.projector-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px;
}

.projector-card-header h2 {
    margin: 0 0 6px;
}

.projector-card-header > a,
.projector-card-actions a,
.projector-card-actions button {
    border: 0;
    border-radius: 7px;
    color: white;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.projector-card-header > a {
    padding: 8px 10px;
    background: #315c70;
}

.projector-connection {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #9caeae;
    font-size: 12px;
}

.projector-connection i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #a74444;
}

.projector-connection.connected {
    color: #76d2a0;
}

.projector-connection.connected i {
    background: #49c882;
    box-shadow: 0 0 8px #49c882;
}

.projector-card-preview {
    min-height: 180px;
    max-height: 240px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    overflow: hidden;
    background: #0b0f0f;
    text-align: center;
    white-space: pre-line;
}

.projector-card-preview strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: 17px;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
}

.projector-card-preview small {
    color: #6fd7d7;
}

.projector-card-preview img {
    width: 100%;
    height: 200px;
    object-fit: contain;
}

.projector-card-preview > span {
    color: #94a3a3;
    font-weight: 700;
}

.projector-card-preview.black {
    background: black;
}

.projector-card-actions {
    display: flex;
    gap: 8px;
    padding: 14px;
}

.projector-card-actions a,
.projector-card-actions button {
    padding: 9px 11px;
}

.projector-card-actions a {
    flex: 1;
    background: #347979;
    text-align: center;
}

.projector-card-actions .black {
    background: black;
    border: 1px solid #525252;
}

.projector-card-actions .clear {
    background: #2f9ac1;
}

.projection-settings-page {
    min-height: 100vh;
    padding: 26px;
    background: #101414;
    color: white;
}

.projection-destination-card {
    margin-top: 18px;
    padding: 20px;
    border: 1px solid #304747;
    border-radius: 13px;
    background: #172020;
}

.projection-destination-card h2 {
    margin: 0 0 14px;
    color: #6fd7d7;
}

.projection-destination-create {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
}

.projection-destination-create input,
.projection-destination-row input[type="text"],
.projection-destination-row > div > input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #3a4a4a;
    border-radius: 7px;
    background: #0f1515;
    color: white;
}

.projection-destination-create button,
.projection-destination-row button {
    padding: 10px 14px;
    border: 0;
    border-radius: 7px;
    background: #2f9ac1;
    color: white;
    font-weight: 700;
    cursor: pointer;
}

.projection-destination-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.projection-destination-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto auto auto auto;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border-radius: 9px;
    background: #223030;
}

.projection-destination-row > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.projection-destination-row small {
    color: #91a6a6;
}

.projection-destination-row > label {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.projection-destination-row .destination-color-field {
    flex-direction: column;
    gap: 2px;
    font-size: 11px;
}

.destination-color-field input[type="color"] {
    width: 42px;
    height: 30px;
    padding: 2px;
    border: 1px solid #647777;
    border-radius: 6px;
    background: #0f1515;
    cursor: pointer;
}

.backup-page {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    padding: 42px 24px;
    background: #101414;
    color: white;
}

.backup-card {
    width: min(720px, 100%);
    height: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 34px;
    border: 1px solid #365858;
    border-radius: 16px;
    background: #172020;
    text-align: center;
}

.backup-icon {
    font-size: 54px;
}

.backup-card h1 {
    margin: 0 0 7px;
    color: #6fd7d7;
}

.backup-card p,
.backup-card small {
    margin: 0;
    color: #adbbbb;
}

.backup-contents {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 16px;
    border-radius: 10px;
    background: #223030;
    text-align: left;
}

.backup-contents span::before {
    margin-right: 8px;
    color: #6fd7d7;
    content: "✓";
}

.download-backup-button {
    padding: 13px 20px;
    border-radius: 8px;
    background: #2f9ac1;
    color: white;
    font-weight: 800;
    text-decoration: none;
}

.download-backup-button:hover {
    background: #39abd3;
    color: white;
}

.survey-admin-page,
.survey-operator-page {
    min-height: 100vh;
    padding: 24px;
    background: #0c1220;
    color: white;
}

.survey-question-create,
.survey-question-editor,
.survey-operator-setup,
.survey-operator-status,
.survey-operator-board {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid #2b528d;
    border-radius: 12px;
    background: #101d35;
}

.survey-question-create,
.survey-answer-create,
.survey-operator-setup {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
}

.survey-question-create input,
.survey-question-editor input,
.survey-operator-setup input,
.survey-operator-setup select {
    min-width: 0;
    padding: 10px;
    border: 1px solid #365b91;
    border-radius: 7px;
    background: #081223;
    color: white;
}

.survey-question-create button,
.survey-question-editor button,
.survey-operator-setup button,
.survey-sidebar-toggle,
.survey-operator-header a {
    padding: 9px 11px;
    border: 0;
    border-radius: 7px;
    background: #176fc0;
    color: white;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.survey-sidebar-toggle { background: #526070; }
.survey-show-intro { background: #d07810; }

.survey-question-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.survey-question-editor-header {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: 8px;
}

.survey-question-editor-header > strong {
    padding: 8px;
    border-radius: 7px;
    background: #704b22;
}

.survey-question-editor-header > strong.complete {
    background: #237044;
}

.survey-delete-button {
    background: #8d303b !important;
}

.survey-answer-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
}

.survey-answer-row {
    display: grid;
    grid-template-columns: 30px 1fr 100px auto;
    align-items: center;
    gap: 7px;
    padding: 7px;
    border-radius: 7px;
    background: #172947;
}

.survey-answer-row > span {
    font-size: 18px;
    font-weight: 800;
    text-align: center;
}

.survey-answer-row label {
    display: flex;
    flex-direction: column;
    color: #a9c7ef;
    font-size: 10px;
}

.survey-answer-row > div {
    display: flex;
    gap: 3px;
}

.survey-answer-create {
    grid-template-columns: 1fr 100px auto;
    margin-top: 9px;
}

.survey-operator-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.survey-operator-header h1 {
    margin: 0;
    color: #54c7ff;
}

.survey-operator-header > div:last-child {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.survey-operator-setup {
    grid-template-columns: minmax(240px, 1.5fr) auto auto auto 1fr 1fr auto;
}

.survey-operator-setup .survey-random-mode {
    background: #775622;
}

.survey-operator-setup .survey-random-mode.active,
.survey-operator-setup .survey-next-question {
    background: #198554;
}

.survey-operator-status {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

.survey-team-status,
.survey-round-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 14px;
    border-radius: 10px;
    background: #172947;
}

.survey-team-status.left { border: 2px solid #20a7ef; }
.survey-team-status.right { border: 2px solid #ef3340; }
.survey-team-status.active { box-shadow: 0 0 20px #58d5ff; }
.survey-team-status > span,
.survey-round-status > strong { font-size: 38px; font-weight: 900; }

.survey-team-status button,
.survey-round-status button {
    padding: 8px 11px;
    border: 0;
    border-radius: 6px;
    background: #176fc0;
    color: white;
    font-weight: 800;
    cursor: pointer;
}

.survey-team-status .survey-control-button { background: #5d3ba4; }
.survey-team-status .survey-undo-award { background: #76511d; }
.survey-round-status .survey-wrong-answer { background: #a92536; }
.survey-steal-status { color: #ffd166; font-weight: 900; }
.survey-faceoff-status { color: #54c7ff; font-weight: 900; }

.survey-strike-counter,
.survey-projector-strikes {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.survey-strike-counter b {
    color: #4f607b;
    font-size: 30px;
    line-height: 1;
}

.survey-strike-counter b.active,
.survey-projector-strikes b.active {
    color: #ff3049;
    text-shadow: 0 0 10px #ff3049;
}

.survey-round-status .survey-reset-score { background: #7a3139; }
.survey-round-status .survey-finish-game { background: #d07810; }
.survey-round-status .survey-resume-game { background: #198554; }
.survey-operator-board h2 { margin-top: 0; text-align: center; }

.survey-operator-answers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(var(--survey-answer-rows), auto);
    grid-auto-flow: column;
    gap: 8px;
}

.survey-operator-answers button {
    display: grid;
    grid-template-columns: 42px 1fr 50px auto;
    align-items: center;
    gap: 8px;
    padding: 11px;
    border: 1px solid #347ac0;
    border-radius: 8px;
    background: #173563;
    color: white;
    cursor: pointer;
}

.survey-operator-answers button:not(.revealed) {
    border-style: dashed;
    background: #182b4d;
    opacity: .82;
}

.survey-operator-answers button.revealed { background: #155995; }
.survey-operator-answers span,
.survey-operator-answers b { font-size: 22px; }
.survey-operator-answers small { color: #9ec8ee; font-weight: 800; }

.survey-projector-page {
    position: fixed;
    inset: 0;
    overflow: hidden;
    padding: 3vh 4vw;
    background: radial-gradient(circle at center, #123e83, #03091b 70%);
    color: white;
    font-family: Arial, sans-serif;
}

.survey-game-intro {
    position: fixed;
    z-index: 150;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3vh;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 45%, rgb(255 150 20 / 24%), transparent 28%),
        radial-gradient(circle at center, #174785, #020716 72%);
    color: white;
    opacity: 0;
    pointer-events: none;
    transition: opacity .9s ease;
}

.survey-game-intro.visible {
    opacity: 1;
    pointer-events: auto;
}

.survey-game-intro-logo {
    position: relative;
    min-width: min(65vw, 900px);
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    padding: 4vh 5vw;
    border: 7px solid #ff9f1c;
    border-radius: 42px;
    background: linear-gradient(145deg, #164e96, #082753);
    box-shadow: 0 0 35px #ff9f1c, inset 0 0 40px #020c21;
    transform: skew(-3deg);
}

.survey-game-intro-logo::after {
    position: absolute;
    right: 9%;
    bottom: -45px;
    width: 80px;
    height: 80px;
    background: #ff9f1c;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    content: "";
}

.survey-game-intro-logo span {
    grid-row: 1 / 3;
    padding-right: 3vw;
    color: #ffb13b;
    font-size: clamp(130px, 20vw, 310px);
    font-weight: 1000;
    line-height: .75;
    letter-spacing: -.1em;
    text-shadow: 5px 7px 0 #8b3800;
}

.survey-game-intro-logo strong {
    color: white;
    font-size: clamp(85px, 12vw, 190px);
    line-height: .85;
    letter-spacing: .05em;
    text-shadow: 4px 5px 0 #07152e;
}

.survey-game-intro-logo b {
    width: fit-content;
    padding: .05em .35em;
    border-radius: 10px;
    background: #ff9f1c;
    color: #10264c;
    font-size: clamp(42px, 5.5vw, 90px);
    line-height: 1;
    letter-spacing: .12em;
}

.survey-game-intro > small {
    color: #ffd48d;
    font-size: clamp(22px, 2.2vw, 42px);
    font-weight: 900;
    letter-spacing: .18em;
}

.survey-projector-top {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 3vw;
}

.survey-projector-score,
.survey-projector-round {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 22px;
    border: 3px solid #31bfff;
    border-radius: 14px;
    background: #071d43;
}

.survey-projector-score.right { border-color: #ef3340; }
.survey-projector-score.active.left {
    background: #0b4d96;
    box-shadow: 0 0 18px #31bfff, 0 0 45px rgb(49 191 255 / 75%);
    transform: scale(1.035);
}
.survey-projector-score.active.right {
    background: #8d1725;
    box-shadow: 0 0 18px #ff3f52, 0 0 45px rgb(255 63 82 / 75%);
    transform: scale(1.035);
}
.survey-projector-score.inactive { opacity: .45; }
.survey-projector-score { transition: opacity .2s, transform .2s, box-shadow .2s; }
.survey-projector-score span,
.survey-projector-round strong { font-size: 4vw; font-weight: 900; }
.survey-projector-round { flex-direction: column; gap: 0; }
.survey-projector-round {
    border-color: #ff9f1c;
    background: linear-gradient(#a95608, #693006);
    box-shadow: 0 0 18px rgb(255 159 28 / 55%);
}
.survey-projector-page h1 { margin: 3vh 0 2vh; text-align: center; font-size: 3vw; }

.survey-buzzer-winner {
    margin: 0 auto 2vh;
    width: fit-content;
    padding: 10px 26px;
    border-radius: 999px;
    background: #168bd1;
    font-size: 2vw;
    font-weight: 900;
}

.survey-buzzer-winner.right { background: #c92336; }

.survey-projector-round-state {
    min-height: 5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2vw;
    margin: 0 auto 1.5vh;
    font-size: 1.5vw;
}

.survey-projector-round-state > strong {
    padding: 10px 30px;
    border: 3px solid transparent;
    border-radius: 999px;
    color: white;
    font-size: 1.8vw;
    letter-spacing: .04em;
}

.survey-projector-round-state.left > strong {
    border-color: #31bfff;
    background: #0b4d96;
    box-shadow: 0 0 20px rgb(49 191 255 / 65%);
}

.survey-projector-round-state.right > strong {
    border-color: #ff3f52;
    background: #8d1725;
    box-shadow: 0 0 20px rgb(255 63 82 / 65%);
}

.survey-projector-strikes b {
    color: #243d66;
    font-size: 3vw;
    line-height: 1;
}

.survey-strike-overlay {
    position: fixed;
    z-index: 100;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgb(0 0 0 / 45%);
    pointer-events: none;
}

.survey-strike-overlay span {
    color: #f51d3f;
    font-family: Arial Black, Arial, sans-serif;
    font-size: min(70vh, 55vw);
    font-weight: 900;
    line-height: .7;
    text-shadow: 0 0 18px white, 0 0 45px #f51d3f;
    animation: survey-strike-in .2s ease-out;
}

@keyframes survey-strike-in {
    from { opacity: 0; transform: scale(.35); }
    to { opacity: 1; transform: scale(1); }
}

.survey-winner-overlay {
    position: fixed;
    z-index: 120;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2vh;
    background: radial-gradient(circle at center, #193d78, #020716 72%);
    color: white;
    text-align: center;
    animation: survey-winner-in .45s ease-out;
}

.survey-winner-overlay small {
    color: #ffbd4a;
    font-size: clamp(24px, 3vw, 52px);
    font-weight: 900;
    letter-spacing: .12em;
}

.survey-winner-overlay strong {
    padding: 2vh 5vw;
    border: 6px solid #ffbd4a;
    border-radius: 24px;
    font-size: clamp(70px, 11vw, 190px);
    line-height: 1;
    text-shadow: 0 0 25px currentColor;
}

.survey-winner-overlay strong.left {
    border-color: #31bfff;
    color: #69d2ff;
    box-shadow: 0 0 55px rgb(49 191 255 / 70%);
}

.survey-winner-overlay strong.right {
    border-color: #ff3f52;
    color: #ff6675;
    box-shadow: 0 0 55px rgb(255 63 82 / 70%);
}

.survey-winner-overlay span {
    font-size: clamp(42px, 6vw, 100px);
    font-weight: 900;
}

@keyframes survey-winner-in {
    from { opacity: 0; transform: scale(.92); }
    to { opacity: 1; transform: scale(1); }
}

.survey-projector-board {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(var(--survey-answer-rows), minmax(8vh, auto));
    grid-auto-flow: column;
    gap: 1.4vh 1.4vw;
    max-width: 1300px;
    margin: auto;
}

.survey-projector-answer {
    min-height: 8vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    border: 4px solid #ff9f1c;
    border-radius: 12px;
    background: linear-gradient(#bd650c, #713305);
    box-shadow: inset 0 0 15px #3c1800, 0 0 8px rgb(255 159 28 / 35%);
}

.survey-projector-answer b { font-size: 3vw; }
.survey-projector-answer.revealed {
    justify-content: space-between;
    background: #fff0d5;
    color: #4a2100;
}
.survey-projector-answer strong { font-size: 2vw; text-transform: uppercase; }
.survey-projector-answer span { font-size: 2.5vw; font-weight: 900; }

.survey-buzzer-page {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 24px;
    background: #062a50;
    color: white;
}

.survey-buzzer-page.right { background: #55220c; }
.survey-buzzer-name { font-size: clamp(28px, 7vw, 64px); font-weight: 900; }

.survey-buzzer-button {
    width: min(75vw, 520px);
    aspect-ratio: 1;
    border: 14px solid #9edfff;
    border-radius: 50%;
    background: #e62037;
    color: white;
    box-shadow: 0 18px 0 #76101b, 0 25px 40px #0008;
    font-size: clamp(24px, 6vw, 56px);
    font-weight: 900;
    cursor: pointer;
    touch-action: manipulation;
}

.survey-buzzer-button:active:not(:disabled) { transform: translateY(10px); box-shadow: 0 8px 0 #76101b; }
.survey-buzzer-button.locked { background: #67717b; border-color: #aab4bd; box-shadow: none; }

@media (max-width: 1000px) {
    .survey-operator-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .survey-operator-setup,
    .survey-operator-status,
    .survey-question-editor-header,
    .survey-answer-row,
    .survey-answer-create {
        grid-template-columns: 1fr;
    }

    .survey-operator-answers {
        grid-template-columns: 1fr;
    }

    .operator-topbar {
        height: auto;
        min-height: 80px;
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
        padding-block: 16px;
    }

    .top-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .image-library-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .calendar-section {
        overflow-x: auto;
    }

    .calendar-grid {
        min-width: 980px;
    }

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

    .schedule-editor {
        align-items: stretch;
        flex-direction: column;
    }

    .teams-columns {
        grid-template-columns: 1fr;
    }

    .team-create-form,
    .team-editor-row,
    .team-create-form.ministry-create-form,
    .team-editor-row.ministry-editor-row {
        grid-template-columns: 1fr;
    }

    .schedule-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .sunday-saved-selection {
        grid-template-columns: 1fr;
    }

    .sunday-template-selector,
    .template-create-form,
    .template-editor-header,
    .template-editor-header > div,
    .template-item-row,
    .template-add-item {
        grid-template-columns: 1fr;
    }

    .schedule-header-links {
        justify-content: flex-start;
    }

    .sunday-program-panel-item {
        grid-template-columns: 58px minmax(0, 1fr) auto;
    }

    .program-timing-editor {
        grid-column: 2 / -1;
    }

    .projectors-grid {
        grid-template-columns: 1fr;
    }

    .projectors-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .projection-destination-row,
    .projection-destination-create {
        grid-template-columns: 1fr;
    }
}

.section-format-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 18px;
    margin-bottom: 20px;
    background: #172020;
    border-radius: 10px;
}
.section-format-controls select, .section-format-controls button {
    padding: 10px 14px;
    border: 1px solid #3a4a4a;
    border-radius: 7px;
    background: #244b4b;
    color: white;
}
.section-format-controls p { flex-basis: 100%; margin: 0; color: #b8cccc; }
.editor-message { color: #6fd7d7; }

/* Operador responsive: prioriza los controles de uso frecuente y evita
   desplazamientos horizontales al operar desde un teléfono o una tablet. */
@media (max-width: 900px) {
    .operator-page {
        min-width: 0;
        overflow-x: hidden;
    }

    .operator-topbar {
        box-sizing: border-box;
        width: 100%;
    }

    .top-actions > * {
        box-sizing: border-box;
    }

    .operator-grid {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(220px, 38vh) auto;
        height: auto;
        min-height: 0;
    }

    .operator-grid-clean {
        grid-template-rows: auto;
    }

    .songs-panel {
        max-height: 38vh;
        border-bottom: 1px solid #334444;
    }

    .sections-panel {
        overflow: visible;
        padding: 16px;
    }

    .sections-grid {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }

    .projector-settings {
        align-items: stretch;
        flex-direction: column;
    }

    .projector-settings input {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .operator-topbar {
        gap: 10px;
        padding: 12px;
    }

    .operator-topbar h1 {
        font-size: 22px;
    }

    .operator-topbar .operator-destination {
        font-size: 10px;
    }

    .top-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    .top-actions .channel-picker {
        grid-column: 1 / -1;
    }

    .top-actions .screen-actions {
        grid-column: 1 / -1;
    }

    .top-actions .screen-actions button {
        flex: 1;
    }

    .channel-picker select {
        width: 100%;
        min-width: 0;
        min-height: 44px;
    }

    .projector-channel-link,
    .top-actions button,
    .btn-upload {
        justify-content: center;
        min-width: 0;
        min-height: 44px;
        padding: 10px 7px;
        font-size: 12px;
        text-align: center;
    }

    .btn-bible-quick {
        font-size: 20px !important;
    }

    .projection-preview {
        max-height: 118px;
        padding: 8px 10px 10px;
    }

    .projection-preview-text {
        font-size: 15px;
    }

    .operator-selection {
        padding: 10px;
    }

    .operator-selection-title {
        flex-wrap: wrap;
        gap: 5px 9px;
    }

    .operator-selection-title button {
        min-height: 38px;
    }

    .song-number-entry {
        padding: 10px 0 4px;
    }

    .song-number-entry input {
        width: 100%;
        min-height: 44px;
        font-size: 16px;
    }

    .operator-selection-items {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-inline: -10px;
        padding: 8px 10px 5px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .selected-item-with-remove {
        flex: 0 0 auto;
        max-width: 88vw;
        scroll-snap-align: start;
    }

    .operator-selected-item {
        overflow: hidden;
        max-width: 68vw;
        min-height: 44px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .selected-item-order button,
    .remove-selected-item {
        min-width: 32px;
    }

    .operator-grid {
        grid-template-rows: minmax(210px, 42vh) auto;
    }

    .operator-grid-clean {
        grid-template-rows: auto;
    }

    .songs-panel {
        max-height: 42vh;
        padding: 10px;
    }

    .search-box {
        min-height: 44px;
        margin-bottom: 9px;
        font-size: 16px;
    }

    .song-item {
        min-height: 48px;
        margin-bottom: 5px;
        padding: 10px;
    }

    .sections-panel {
        padding: 12px 10px 30px;
    }

    .song-header {
        margin-bottom: 12px;
    }

    .song-header h2 {
        margin-bottom: 4px;
        font-size: 21px;
    }

    .sections-grid {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .section-card {
        min-height: 52px;
        padding: 13px;
    }

    .section-title {
        margin-bottom: 6px;
        font-size: 13px;
    }

    .section-text {
        font-size: 16px;
        line-height: 1.35;
    }

    .edit-song-button,
    .musician-button {
        flex: 1 1 145px;
        min-height: 44px;
    }

    .empty-state {
        margin-top: 45px;
        font-size: 19px;
    }

    .uploaded-image-panel,
    .uploaded-image-panel > div,
    .image-library-header {
        align-items: stretch;
        flex-direction: column;
    }

    .uploaded-image-panel img {
        width: 100%;
        height: 120px;
    }

    .image-library-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quick-bible-preview {
        min-height: 210px;
        max-height: 32vh;
    }

    .quick-bible-picker {
        grid-template-rows: auto 370px minmax(235px, auto);
    }

    .quick-bible-books {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .quick-bible-lower {
        grid-template-columns: 1fr 1fr;
    }

    .quick-bible-chapters,
    .quick-bible-verses {
        padding: 7px;
    }

    .quick-bible-chapters > div,
    .quick-bible-verses > div {
        grid-template-columns: repeat(3, minmax(38px, 1fr));
    }
}

/* Vista exclusiva del selector bíblico rápido. */
.operator-topbar > div:first-child {
    flex: 0 0 auto;
    min-width: 205px;
}

.operator-topbar h1 {
    white-space: nowrap;
}

.operator-topbar .operator-destination {
    max-width: 100%;
    white-space: nowrap;
}

.operator-topbar .top-actions {
    min-width: 0;
    justify-content: flex-end;
}

.quick-bible-mode > .projector-settings,
.quick-bible-mode > .image-library-panel,
.quick-bible-mode > .background-library-panel,
.quick-bible-mode > .saved-lists-panel,
.quick-bible-mode > .projection-preview,
.quick-bible-mode > .image-message,
.quick-bible-mode > .operator-selection,
.quick-bible-mode > .operator-grid {
    display: none;
}

.quick-bible-mode {
    display: flex;
    height: 100vh;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
}

.quick-bible-mode .operator-topbar {
    flex: 0 0 auto;
}

.quick-bible-mode .quick-bible {
    flex: 1 1 auto;
    grid-template-columns: minmax(270px, 23%) minmax(620px, 1fr) minmax(220px, 18%);
    height: auto;
    min-height: 0;
    overflow: hidden;
}

.quick-bible-mode .quick-bible-preview {
    min-height: 0;
    overflow: hidden;
}

.quick-bible-mode .quick-bible-picker {
    height: 100%;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1.15fr) minmax(210px, .85fr);
}

.quick-bible-mode .quick-bible-books,
.quick-bible-mode .quick-bible-chapters,
.quick-bible-mode .quick-bible-verses {
    min-height: 0;
    overscroll-behavior: contain;
}

.quick-bible-selection {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    border-left: 2px solid #314242;
    padding: 12px 10px;
    background: #172020;
}

.quick-bible-selection-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid #3d5050;
}

.quick-bible-selection-header > div {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.quick-bible-selection-header strong {
    color: #6fd7d7;
    font-size: 12px;
}

.quick-bible-selection-header span,
.quick-bible-selection > p {
    color: #9db0b0;
    font-size: 12px;
}

.quick-bible-selection-header button,
.quick-bible-selection-remove {
    flex: 0 0 34px;
    width: 34px;
    min-height: 34px;
    border: 0;
    border-radius: 6px;
    background: #873838;
    color: white;
    font-size: 20px;
    font-weight: 800;
}

.quick-bible-selection-header button:disabled {
    opacity: .45;
}

.quick-bible-selection-items {
    display: grid;
    gap: 7px;
    overflow-y: auto;
    padding-top: 10px;
    overscroll-behavior: contain;
}

.quick-bible-selection-items > div {
    display: flex;
    min-width: 0;
}

.quick-bible-selection-open {
    display: grid;
    min-width: 0;
    flex: 1;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 7px;
    align-items: center;
    border: 0;
    border-radius: 7px 0 0 7px;
    padding: 9px;
    background: #315f5f;
    color: white;
    text-align: left;
}

.quick-bible-selection-open strong {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quick-bible-selection-remove {
    border-radius: 0 7px 7px 0;
}

@media (max-width: 1500px) and (min-width: 901px) {
    .operator-topbar {
        height: auto;
        min-height: 80px;
        gap: 10px;
        padding: 10px 14px;
    }

    .operator-topbar > div:first-child {
        min-width: 175px;
    }

    .operator-topbar h1 {
        font-size: 23px;
    }

    .top-actions {
        flex-wrap: wrap;
        gap: 7px;
    }

    .projector-channel-link,
    .top-actions button,
    .btn-upload {
        padding: 10px 12px;
        font-size: 13px;
    }

    .quick-bible-mode .quick-bible {
        height: auto;
        grid-template-columns: minmax(235px, 24%) minmax(480px, 1fr) minmax(190px, 19%);
    }

    .quick-bible-books {
        grid-template-columns: repeat(8, minmax(58px, 1fr));
    }
}

@media (max-width: 900px) {
    .quick-bible-mode {
        height: auto;
        overflow: visible;
    }

    .quick-bible-mode .quick-bible {
        grid-template-columns: minmax(220px, 36%) minmax(0, 64%);
        height: auto;
        min-height: 620px;
    }

    .quick-bible-mode .quick-bible-preview {
        max-height: none;
        border-right: 2px solid #182222;
        border-bottom: 0;
    }

    .quick-bible-mode .quick-bible-picker {
        grid-template-rows: auto minmax(320px, 1fr) minmax(230px, .75fr);
    }

    .quick-bible-selection {
        display: none;
    }
}

@media (max-width: 640px) {
    .operator-topbar > div:first-child {
        min-width: 0;
    }

    .quick-bible-mode .quick-bible {
        display: grid;
        grid-template-columns: 1fr;
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .quick-bible-mode .quick-bible-preview {
        min-height: 210px;
        max-height: 32vh;
        border-right: 0;
        border-bottom: 2px solid #182222;
    }

    .quick-bible-mode .quick-bible-picker {
        height: auto;
        grid-template-rows: auto 370px minmax(235px, auto);
    }
}