/* Universal responsive compatibility layer — loaded last on every application page. */

:root {
    --ui-safe-top: max(0px, env(safe-area-inset-top, 0px));
    --ui-safe-right: max(0px, env(safe-area-inset-right, 0px));
    --ui-safe-bottom: max(0px, env(safe-area-inset-bottom, 0px));
    --ui-safe-left: max(0px, env(safe-area-inset-left, 0px));
    --ui-phone-gutter: clamp(10px, 3.5vw, 18px);
    --ui-tablet-gutter: clamp(18px, 3vw, 30px);
    --ui-desktop-gutter: clamp(22px, 3vw, 44px);
}

html {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
}

img, svg, video, canvas, iframe {
    max-width: 100%;
}

button, input, select, textarea {
    max-width: 100%;
    font: inherit;
}

@media (hover: none), (pointer: coarse) {
    button,
    .btn,
    a.btn,
    [role="button"],
    .nav-tab {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    input,
    select,
    textarea {
        font-size: max(16px, 1em);
    }
}

/* ========================================================================== */
/* AUDIENCE / JOIN                                                           */
/* ========================================================================== */

body.audience-page {
    min-height: 100vh;
    min-height: 100dvh;
}

body.audience-page .audience-container,
body.audience-page .join-page-container {
    box-sizing: border-box !important;
}

body.audience-page .audience-vip.audience-container {
    width: min(100%, 700px) !important;
    max-width: 700px !important;
    min-width: 0 !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    margin-inline: auto !important;
    padding-top: calc(var(--ui-safe-top) + clamp(8px, 1.3vw, 18px)) !important;
    padding-right: max(var(--ui-phone-gutter), var(--ui-safe-right)) !important;
    padding-bottom: calc(var(--ui-safe-bottom) + 92px) !important;
    padding-left: max(var(--ui-phone-gutter), var(--ui-safe-left)) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
}

body.audience-page .logo-slot-compact,
body.audience-page .logo-slot-hero {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
}

body.audience-page.vote-page .logo-slot-compact {
    margin: 0 auto clamp(8px, 1.4vw, 14px) !important;
    padding: 0 !important;
}

body.audience-page.vote-page .logo-slot-compact .brand-logo {
    width: clamp(150px, 32vw, 235px) !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
}

body.audience-page .audience-header,
body.audience-page .audience-identity-bar,
body.audience-page .screen,
body.audience-page .glass-card,
body.audience-page .tip-jar-compact,
body.audience-page .vote-cards,
body.audience-page .result-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

/* Two stable header rows on every width. */
body.audience-page .audience-identity-bar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
    padding: clamp(9px, 1.8vw, 13px) !important;
    margin: 0 0 clamp(10px, 2vw, 16px) !important;
    border-radius: clamp(15px, 2.5vw, 20px) !important;
    overflow: visible !important;
}

body.audience-page .identity-row-primary {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: clamp(7px, 1.8vw, 11px) !important;
}

body.audience-page .identity-row-primary .user-avatar,
body.audience-page .identity-row-primary .identity-fallback-avatar {
    width: clamp(42px, 9vw, 52px) !important;
    height: clamp(42px, 9vw, 52px) !important;
    flex: none !important;
}

body.audience-page .identity-name-wrap {
    min-width: 0 !important;
    max-width: 100% !important;
}

body.audience-page .user-name-text {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: clamp(.9rem, 2.6vw, 1.05rem) !important;
}

body.audience-page .identity-row-primary .song-request-header-btn {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 190px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: .65rem clamp(.75rem, 2vw, 1rem) !important;
    white-space: nowrap !important;
    font-size: clamp(.76rem, 2.4vw, .9rem) !important;
    line-height: 1.15 !important;
}

body.audience-page .identity-row-controls {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, .9fr) !important;
    align-items: stretch !important;
    gap: clamp(6px, 1.4vw, 9px) !important;
    overflow: visible !important;
}

body.audience-page .identity-row-controls > *,
body.audience-page .identity-row-controls .lang-dropdown,
body.audience-page .identity-row-controls .lang-dropdown-toggle,
body.audience-page .identity-row-controls .btn,
body.audience-page .identity-row-controls .lux-sound-toggle {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 42px !important;
    margin: 0 !important;
}

body.audience-page .identity-row-controls .lang-dropdown-toggle,
body.audience-page .identity-row-controls .btn,
body.audience-page .identity-row-controls .lux-sound-toggle {
    padding-inline: clamp(.5rem, 1.4vw, .8rem) !important;
    justify-content: center !important;
    font-size: clamp(.72rem, 2vw, .86rem) !important;
    white-space: nowrap !important;
}

body.audience-page .identity-row-controls .lang-dropdown-menu {
    min-width: max(100%, 150px) !important;
    max-width: min(90vw, 260px) !important;
    z-index: 9999 !important;
}

body.audience-page #screen-waiting,
body.audience-page #screen-voting,
body.audience-page #screen-results {
    flex: 0 0 auto !important;
}

body.audience-page .waiting-card {
    min-height: clamp(340px, 48dvh, 510px) !important;
    padding: clamp(30px, 6vw, 52px) clamp(18px, 4vw, 34px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
}

body.audience-page .waiting-card h2 {
    max-width: 18ch !important;
    margin: clamp(10px, 2vw, 16px) auto 10px !important;
    font-size: clamp(2rem, 5.3vw, 3rem) !important;
    line-height: 1.08 !important;
}

body.audience-page .waiting-card p {
    font-size: clamp(.9rem, 2vw, 1rem) !important;
    line-height: 1.55 !important;
}

body.audience-page .waiting-tip {
    margin-top: 1rem !important;
}

body.audience-page .tip-jar-compact {
    margin-top: clamp(12px, 2vw, 18px) !important;
    padding: clamp(14px, 2.6vw, 20px) !important;
}

body.audience-page .vote-cards {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: clamp(10px, 2vw, 15px) !important;
}

body.audience-page .vote-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 112px !important;
}

body.audience-page .vote-card-copy,
body.audience-page .vote-card-title,
body.audience-page .vote-card-artist,
body.audience-page .result-card,
body.audience-page #result-content {
    min-width: 0 !important;
    overflow-wrap: anywhere;
}

body.audience-page .countdown-wrap {
    width: clamp(100px, 20vw, 126px) !important;
    height: clamp(100px, 20vw, 126px) !important;
}

body.audience-page .song-request-modal {
    padding: calc(var(--ui-safe-top) + 12px) max(var(--ui-phone-gutter), var(--ui-safe-right)) calc(var(--ui-safe-bottom) + 12px) max(var(--ui-phone-gutter), var(--ui-safe-left)) !important;
}

body.audience-page .song-request-panel {
    width: min(100%, 600px) !important;
    max-width: 600px !important;
    max-height: calc(100dvh - var(--ui-safe-top) - var(--ui-safe-bottom) - 24px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* Edge social actions are true viewport-fixed controls. */
body.audience-page .social-links-audience.social-links-float {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    overflow: visible !important;
    pointer-events: none !important;
    transform: none !important;
    /* This is only a positioning layer, never a full-screen painted pill. */
    max-width: none !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    z-index: 40 !important;
}

body.audience-page .social-links-audience .social-link {
    position: fixed !important;
    top: auto !important;
    bottom: calc(var(--ui-safe-bottom) + clamp(12px, 2vw, 24px)) !important;
    width: clamp(48px, 4vw, 58px) !important;
    height: clamp(48px, 4vw, 58px) !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 58px !important;
    max-height: 58px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
}

body.audience-page .social-links-audience .social-link-whatsapp {
    left: max(var(--ui-safe-left), clamp(12px, 2vw, 26px)) !important;
    right: auto !important;
}

body.audience-page .social-links-audience .social-link-instagram {
    right: max(var(--ui-safe-right), clamp(12px, 2vw, 26px)) !important;
    left: auto !important;
}

/* Join screen */
body.audience-page.join-page .join-page-container {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    padding: calc(var(--ui-safe-top) + clamp(12px, 3vw, 28px)) max(var(--ui-phone-gutter), var(--ui-safe-right)) calc(var(--ui-safe-bottom) + 28px) max(var(--ui-phone-gutter), var(--ui-safe-left)) !important;
    justify-content: flex-start !important;
}

body.audience-page.join-page .logo-slot-hero,
body.audience-page.join-page .join-card,
body.audience-page.join-page .social-links-join {
    width: min(100%, 560px) !important;
    max-width: 560px !important;
    margin-inline: auto !important;
}

body.audience-page.join-page .join-card {
    padding: clamp(20px, 4vw, 34px) !important;
}

/* ========================================================================== */
/* ADMIN                                                                       */
/* ========================================================================== */

body.admin-page {
    --admin-universal-gutter: clamp(12px, 2.3vw, 32px);
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    overflow-x: hidden;
}

body.admin-page .admin-header,
body.admin-page .admin-header-compact {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(170px, auto) minmax(0, 1fr) auto !important;
    grid-template-areas: "brand nav actions" !important;
    align-items: center !important;
    gap: 8px 16px !important;
    padding-top: calc(var(--ui-safe-top) + 10px) !important;
    padding-right: max(var(--admin-universal-gutter), var(--ui-safe-right)) !important;
    padding-bottom: 10px !important;
    padding-left: max(var(--admin-universal-gutter), var(--ui-safe-left)) !important;
}

body.admin-page .admin-header > .header-left,
body.admin-page .admin-header > .header-brand,
body.admin-page .admin-header-compact > .header-left,
body.admin-page .admin-header-compact > .header-brand {
    grid-area: brand !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
}

body.admin-page .admin-nav,
body.admin-page .admin-nav-inline {
    grid-area: nav !important;
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
}

body.admin-page .header-right {
    grid-area: actions !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 0 !important;
}

body.admin-page .header-meta {
    min-width: 0 !important;
}

body.admin-page .nav-tab,
body.admin-page .header-right .btn,
body.admin-page .header-right .lang-dropdown-toggle {
    min-height: 42px !important;
}

body.admin-page .admin-main,
body.admin-page main.admin-main,
body.admin-page .repertoire-layout,
body.admin-page .competition-layout,
body.admin-page .requests-layout {
    width: min(calc(100% - (2 * var(--admin-universal-gutter))), 1500px) !important;
    max-width: 1500px !important;
    min-width: 0 !important;
    margin-inline: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: clamp(12px, 1.7vw, 24px) !important;
    padding-bottom: calc(var(--ui-safe-bottom) + clamp(24px, 3vw, 42px)) !important;
}

body.admin-page .dashboard-grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(12px, 1.8vw, 20px) !important;
}

body.admin-page .glass-card,
body.admin-page .repertoire-section,
body.admin-page .poll-section,
body.admin-page .competition-control-card,
body.admin-page .competition-live-card,
body.admin-page .competition-final-card,
body.admin-page .competition-history-card,
body.admin-page .requests-card,
body.admin-page .stat-card {
    min-width: 0 !important;
    max-width: 100% !important;
}

body.admin-page .repertoire-layout-stacked {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px) !important;
    grid-template-areas: "repertoire poll" !important;
    align-items: start !important;
    gap: clamp(14px, 2vw, 24px) !important;
}

body.admin-page .repertoire-layout-stacked .repertoire-section {
    grid-area: repertoire !important;
    order: 0 !important;
}

body.admin-page .repertoire-layout-stacked .poll-section-top {
    grid-area: poll !important;
    order: 0 !important;
    position: sticky !important;
    top: calc(var(--ui-safe-top) + 82px) !important;
    max-height: calc(100dvh - var(--ui-safe-top) - 100px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
}

body.admin-page .repertoire-toolbar,
body.admin-page .toolbar-row,
body.admin-page .toolbar-actions,
body.admin-page .search-row,
body.admin-page .search-row-split,
body.admin-page .poll-controls,
body.admin-page .btn-group,
body.admin-page .requests-toolbar,
body.admin-page .requests-actions,
body.admin-page .competition-control-row,
body.admin-page .competition-actions {
    min-width: 0 !important;
    max-width: 100% !important;
}

body.admin-page .search-row-split {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

body.admin-page .toolbar-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

body.admin-page .toolbar-actions {
    display: flex !important;
    align-items: stretch !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
}

body.admin-page .toolbar-actions .btn,
body.admin-page .toolbar-actions label.btn,
body.admin-page .competition-actions .btn,
body.admin-page .requests-actions .btn {
    min-height: 42px !important;
}

body.admin-page .selected-songs-grid,
body.admin-page .sets-list,
body.admin-page .requests-list,
body.admin-page .competition-history-list,
body.admin-page .live-songs {
    min-width: 0 !important;
    max-width: 100% !important;
}

body.admin-page .table-card,
body.admin-page .competition-table-wrap,
body.admin-page .data-table-wrap,
body.admin-page .songs-list-wrap,
body.admin-page .songs-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
}

body.admin-page .data-table {
    width: 100% !important;
    min-width: 680px;
    max-width: none !important;
}

body.admin-page input,
body.admin-page select,
body.admin-page textarea {
    min-width: 0 !important;
    max-width: 100% !important;
}

body.admin-page .modal {
    padding: calc(var(--ui-safe-top) + 12px) max(var(--admin-universal-gutter), var(--ui-safe-right)) calc(var(--ui-safe-bottom) + 12px) max(var(--admin-universal-gutter), var(--ui-safe-left)) !important;
}

body.admin-page .modal-content,
body.admin-page .reuse-song-modal-card,
body.admin-page .set-editor-card {
    width: min(100%, 820px) !important;
    max-width: 820px !important;
    max-height: calc(100dvh - var(--ui-safe-top) - var(--ui-safe-bottom) - 24px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

body.admin-page.login-page .page-container {
    min-height: 100vh !important;
    min-height: 100dvh !important;
    padding: calc(var(--ui-safe-top) + 18px) max(var(--ui-phone-gutter), var(--ui-safe-right)) calc(var(--ui-safe-bottom) + 18px) max(var(--ui-phone-gutter), var(--ui-safe-left)) !important;
}

body.admin-page.login-page .login-card {
    width: min(100%, 440px) !important;
    max-width: 440px !important;
}

/* ========================================================================== */
/* TV / SETUP / GENERIC                                                       */
/* ========================================================================== */

body.tv-page,
body.setup-page {
    min-height: 100vh;
    min-height: 100dvh;
}

body.setup-page .page-container {
    padding: calc(var(--ui-safe-top) + var(--ui-phone-gutter)) max(var(--ui-phone-gutter), var(--ui-safe-right)) calc(var(--ui-safe-bottom) + var(--ui-phone-gutter)) max(var(--ui-phone-gutter), var(--ui-safe-left)) !important;
}

body.setup-page .glass-card {
    max-width: min(100%, 720px) !important;
}

/* ========================================================================== */
/* TABLETS / MEDIUM VIEWPORTS                                                 */
/* ========================================================================== */

@media (max-width: 1100px) {
    body.admin-page .admin-header,
    body.admin-page .admin-header-compact {
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "brand actions"
            "nav nav" !important;
    }

    body.admin-page .admin-nav,
    body.admin-page .admin-nav-inline {
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 1px;
    }

    body.admin-page .admin-nav::-webkit-scrollbar,
    body.admin-page .admin-nav-inline::-webkit-scrollbar {
        display: none;
    }

    body.admin-page .nav-tab {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    body.admin-page .repertoire-layout-stacked {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
            "poll"
            "repertoire" !important;
    }

    body.admin-page .repertoire-layout-stacked .poll-section-top {
        position: static !important;
        max-height: none !important;
        overflow: visible !important;
    }

    body.admin-page .dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* ========================================================================== */
/* PHONES                                                                     */
/* ========================================================================== */

@media (max-width: 768px) {
    body.audience-page .audience-vip.audience-container {
        width: 100% !important;
        max-width: none !important;
        padding-right: max(var(--ui-phone-gutter), var(--ui-safe-right)) !important;
        padding-left: max(var(--ui-phone-gutter), var(--ui-safe-left)) !important;
    }

    body.audience-page.vote-page .logo-slot-compact .brand-logo {
        width: clamp(135px, 42vw, 185px) !important;
    }

    body.audience-page .waiting-card {
        min-height: clamp(310px, 43dvh, 420px) !important;
        padding: clamp(24px, 6vw, 36px) clamp(15px, 4vw, 24px) !important;
    }

    body.audience-page .waiting-card h2 {
        font-size: clamp(1.8rem, 8vw, 2.45rem) !important;
    }

    body.admin-page {
        --admin-universal-gutter: clamp(10px, 3.4vw, 16px);
    }

    body.admin-page .admin-header,
    body.admin-page .admin-header-compact {
        position: sticky !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
            "brand"
            "nav"
            "actions" !important;
        gap: 8px !important;
        padding-bottom: 9px !important;
    }

    body.admin-page .admin-header > .header-left,
    body.admin-page .admin-header > .header-brand,
    body.admin-page .admin-header-compact > .header-left,
    body.admin-page .admin-header-compact > .header-brand {
        width: 100% !important;
        justify-content: flex-start !important;
    }

    body.admin-page .header-right {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, .85fr) !important;
        gap: 6px !important;
    }

    body.admin-page .header-right > *,
    body.admin-page .header-right > .btn,
    body.admin-page .header-right > a.btn,
    body.admin-page .header-right > .lang-dropdown,
    body.admin-page .header-right .lang-dropdown-toggle {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    body.admin-page .header-right .btn,
    body.admin-page .header-right .lang-dropdown-toggle {
        justify-content: center !important;
        padding-inline: .55rem !important;
        font-size: clamp(.7rem, 2.8vw, .82rem) !important;
        white-space: normal !important;
        text-align: center !important;
        line-height: 1.15 !important;
    }

    body.admin-page .admin-main,
    body.admin-page main.admin-main,
    body.admin-page .repertoire-layout,
    body.admin-page .competition-layout,
    body.admin-page .requests-layout {
        width: calc(100% - (2 * var(--admin-universal-gutter))) !important;
        max-width: none !important;
    }

    body.admin-page .dashboard-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    body.admin-page .glass-card,
    body.admin-page .poll-section,
    body.admin-page .competition-control-card,
    body.admin-page .competition-live-card,
    body.admin-page .competition-final-card,
    body.admin-page .competition-history-card,
    body.admin-page .requests-card,
    body.admin-page .stat-card {
        padding: clamp(12px, 3.6vw, 17px) !important;
        border-radius: clamp(12px, 3vw, 18px) !important;
    }

    body.admin-page .search-row-split {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 7px !important;
    }

    body.admin-page .toolbar-row {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    body.admin-page .toolbar-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
    }

    body.admin-page .toolbar-actions .btn,
    body.admin-page .toolbar-actions label.btn {
        width: 100% !important;
        min-width: 0 !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: normal !important;
    }

    body.admin-page .poll-controls,
    body.admin-page .competition-control-row,
    body.admin-page .requests-toolbar {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 9px !important;
    }

    body.admin-page .poll-btn-group,
    body.admin-page .competition-actions,
    body.admin-page .requests-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
        width: 100% !important;
    }

    body.admin-page .poll-btn-group .btn,
    body.admin-page .competition-actions .btn,
    body.admin-page .requests-actions .btn {
        width: 100% !important;
        min-width: 0 !important;
        justify-content: center !important;
        white-space: normal !important;
    }

    body.admin-page .competition-totals {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    body.admin-page .competition-total-item {
        min-width: 0 !important;
        padding: 9px 6px !important;
        text-align: center !important;
    }

    body.admin-page .data-table {
        min-width: 620px !important;
    }

    body.admin-page .modal {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    body.admin-page .modal-content,
    body.admin-page .reuse-song-modal-card,
    body.admin-page .set-editor-card {
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(92dvh - var(--ui-safe-bottom)) !important;
        margin: 0 !important;
        border-radius: 20px 20px 0 0 !important;
        padding-bottom: calc(var(--ui-safe-bottom) + 16px) !important;
    }
}

/* Very narrow phones / legacy iPod-sized widths. */
@media (max-width: 370px) {
    body.audience-page .identity-row-primary {
        grid-template-columns: 40px minmax(0, 1fr) auto !important;
        gap: 6px !important;
    }

    body.audience-page .identity-row-primary .user-avatar,
    body.audience-page .identity-row-primary .identity-fallback-avatar {
        width: 40px !important;
        height: 40px !important;
    }

    body.audience-page .identity-row-primary .song-request-header-btn {
        max-width: 132px !important;
        min-height: 40px !important;
        padding-inline: .6rem !important;
        font-size: .72rem !important;
    }

    body.audience-page .identity-row-controls {
        gap: 5px !important;
    }

    body.audience-page .identity-row-controls .lang-dropdown-toggle,
    body.audience-page .identity-row-controls .btn,
    body.audience-page .identity-row-controls .lux-sound-toggle {
        min-height: 40px !important;
        padding-inline: .35rem !important;
        font-size: .69rem !important;
    }

    body.admin-page .toolbar-actions,
    body.admin-page .poll-btn-group,
    body.admin-page .competition-actions,
    body.admin-page .requests-actions {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.admin-page .header-right {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    body.admin-page .header-right .btn,
    body.admin-page .header-right .lang-dropdown-toggle {
        font-size: .67rem !important;
        padding-inline: .3rem !important;
    }
}

/* Landscape phones / short-height devices. */
@media (orientation: landscape) and (max-height: 560px) {
    body.audience-page .audience-vip.audience-container {
        width: min(100%, 900px) !important;
        max-width: 900px !important;
        padding-top: calc(var(--ui-safe-top) + 6px) !important;
        padding-bottom: calc(var(--ui-safe-bottom) + 66px) !important;
    }

    body.audience-page.vote-page .logo-slot-compact .brand-logo {
        width: clamp(110px, 20vw, 150px) !important;
    }

    body.audience-page .audience-identity-bar {
        margin-bottom: 8px !important;
    }

    body.audience-page .waiting-card {
        min-height: 240px !important;
        padding-block: 18px !important;
    }

    body.audience-page .waiting-card h2 {
        font-size: clamp(1.6rem, 4.5vw, 2.15rem) !important;
        margin-block: 6px !important;
    }

    body.audience-page .waiting-card p {
        line-height: 1.35 !important;
    }

    body.audience-page .tip-jar-compact {
        padding-block: 10px !important;
    }

    body.audience-page .social-links-audience .social-link {
        bottom: calc(var(--ui-safe-bottom) + 8px) !important;
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
    }

    body.admin-page .admin-header,
    body.admin-page .admin-header-compact {
        position: relative !important;
    }
}

/* Larger desktops should not render the audience UI as a tiny phone column. */
@media (min-width: 1200px) {
    body.audience-page .audience-vip.audience-container {
        width: min(700px, calc(100vw - 80px)) !important;
        max-width: 700px !important;
    }

    body.audience-page .waiting-card {
        min-height: min(52dvh, 520px) !important;
    }
}

@media (min-width: 1700px) {
    body.audience-page .audience-vip.audience-container {
        width: min(760px, calc(100vw - 100px)) !important;
        max-width: 760px !important;
    }

    body.audience-page .waiting-card h2 {
        font-size: 3.1rem !important;
    }

    body.admin-page .admin-main,
    body.admin-page main.admin-main,
    body.admin-page .repertoire-layout,
    body.admin-page .competition-layout,
    body.admin-page .requests-layout {
        max-width: 1640px !important;
    }
}


/* Admin layout corrections: explicit metadata slot and consistent mobile rules. */
body.admin-page.repertoire-page .admin-header {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 2fr) auto !important;
    grid-template-areas: "brand meta nav actions" !important;
}

body.admin-page .header-meta {
    grid-area: meta !important;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    overflow-wrap: anywhere;
}

body.admin-page .header-brand,
body.admin-page .header-left,
body.admin-page .brand-text,
body.admin-page .header-right > *,
body.admin-page .set-editor-layout > * {
    min-width: 0;
}

body.admin-page .header-left h1,
body.admin-page .header-poll-status,
body.admin-page .app-name,
body.admin-page .nav-tab {
    overflow-wrap: anywhere;
    white-space: normal;
}

body.admin-page .modal-content {
    max-height: calc(100vh - var(--ui-safe-top) - var(--ui-safe-bottom) - 24px) !important;
    max-height: calc(100dvh - var(--ui-safe-top) - var(--ui-safe-bottom) - 24px) !important;
    overscroll-behavior: contain;
}

@media (max-width: 1100px) {
    /* Let a multi-row header scroll away, leaving room for the actual controls. */
    body.admin-page .admin-header,
    body.admin-page .admin-header-compact {
        position: relative !important;
        top: auto !important;
    }

    body.admin-page.repertoire-page .admin-header {
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas: "brand meta" "nav nav" "actions actions" !important;
    }

    body.admin-page .admin-nav,
    body.admin-page .admin-nav-inline {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        overflow: visible !important;
    }

    body.admin-page .admin-nav .nav-tab {
        width: 100%;
        min-width: 0;
        min-height: 44px !important;
        white-space: normal !important;
        text-align: center;
    }
}

@media (max-width: 768px) {
    body.admin-page.repertoire-page .admin-header {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas: "brand" "meta" "nav" "actions" !important;
    }

    body.admin-page .header-meta {
        justify-self: start;
    }

    body.admin-page .admin-nav,
    body.admin-page .admin-nav-inline,
    body.admin-page .header-right {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.admin-page .header-right > a.btn:first-child {
        grid-column: 1 / -1;
    }

    body.admin-page .header-right .btn,
    body.admin-page .header-right .lang-dropdown-toggle,
    body.admin-page .toolbar-actions .btn {
        min-height: 44px !important;
        font-size: .85rem !important;
    }

    body.admin-page input:not([type="checkbox"]):not([type="radio"]),
    body.admin-page select,
    body.admin-page textarea {
        font-size: 16px !important;
    }

    body.admin-page .set-editor-card {
        height: auto;
    }

    /* Keep both song lists and the save controls reachable on short screens. */
    body.admin-page .set-editor-layout {
        flex: 0 0 auto;
        overflow: visible;
    }

    body.admin-page .set-editor-selected-panel,
    body.admin-page .set-editor-picker {
        flex: 0 0 auto;
        max-height: none;
    }

    body.admin-page .set-picker-list,
    body.admin-page .set-selected-list {
        max-height: 32vh;
        max-height: 32dvh;
        overflow-y: auto;
    }
}