:root {
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background: #0b1016;
    color: #eef3f8;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-width: 1100px;
    background:
        radial-gradient(
            circle at 80% 5%,
            rgba(90,169,255,.08),
            transparent 28%
        ),
        #0b1016;
}

button,
input,
select {
    font: inherit;
}

.app-shell {
    min-height: 100vh;
}

.topbar {
    height: 84px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 32px;

    border-bottom: 1px solid rgba(255,255,255,.08);
    background: rgba(11,16,22,.94);
}

.product {
    font-size: 21px;
    font-weight: 750;
}

.subtitle {
    margin-top: 3px;
    color: #8492a2;
    font-size: 13px;
}

.system-status {
    padding: 8px 12px;

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 10px;

    color: #9eabb9;
    background: rgba(255,255,255,.035);
}

.system-status.error {
    color: #ff8d8d;
}

.system-status.ok {
    color: #68dba6;
}

.layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    min-height: calc(100vh - 84px);
}

.sidebar {
    padding: 28px 22px;

    border-right: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.018);
}

.panel-title {
    margin-bottom: 24px;

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

    letter-spacing: .11em;
    text-transform: uppercase;

    color: #8492a2;
}

label {
    display: flex;
    flex-direction: column;

    gap: 8px;

    margin-bottom: 20px;

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

    color: #a9b5c1;
}

select,
input {
    width: 100%;

    padding: 12px 13px;

    border: 1px solid rgba(255,255,255,.11);
    border-radius: 10px;

    outline: none;

    background: #111922;
    color: #eef3f8;
}

select:focus,
input:focus {
    border-color: rgba(90,169,255,.65);
}

select:disabled,
input:disabled {
    opacity: .45;
}

.channel-summary {
    margin-top: 28px;

    padding: 14px;

    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;

    background: rgba(255,255,255,.025);

    font-size: 13px;
    line-height: 1.55;
}

.muted {
    color: #798694;
}

.workspace {
    width: min(1280px, calc(100vw - 340px));

    padding: 30px;

    display: grid;
    gap: 22px;
}

.card {
    padding: 24px;

    border: 1px solid rgba(255,255,255,.085);
    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.042),
            rgba(255,255,255,.018)
        );
}

.card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 22px;
}

h2 {
    margin: 0;

    font-size: 20px;
    font-weight: 720;
}

.card-header p {
    margin: 6px 0 0;

    color: #8795a4;

    font-size: 14px;
}

.mode-badge {
    padding: 7px 11px;

    border-radius: 999px;

    border: 1px solid rgba(255,255,255,.10);

    background: rgba(255,255,255,.04);

    font-size: 12px;
    font-weight: 750;
}

.mode-badge.pause {
    color: #ffca6a;
}

.mode-badge.normal {
    color: #69dca7;
}

.button-row {
    display: flex;
    gap: 12px;
}

.button {
    border: 0;
    border-radius: 10px;

    padding: 11px 16px;

    cursor: pointer;

    font-weight: 700;
}

.button:disabled {
    opacity: .4;
    cursor: default;
}

.button.primary {
    background: #5aa9ff;
    color: #07111b;
}

.button.warning {
    background: #e4a746;
    color: #171006;
}

.button.secondary {
    border: 1px solid rgba(255,255,255,.10);

    background: #17212c;
    color: #d7e0e9;
}

.button.danger {
    background: rgba(255,96,96,.13);
    color: #ff9797;

    border: 1px solid rgba(255,96,96,.22);
}

.settings-grid {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto;

    gap: 18px;
    align-items: end;
}

.settings-grid label {
    margin: 0;
}

.selection-info {
    margin-top: 16px;

    font-size: 13px;
    color: #8795a4;
}

.upload-form {
    display: grid;

    grid-template-columns:
        minmax(180px, .7fr)
        minmax(280px, 1fr)
        auto;

    gap: 12px;

    align-items: end;

    margin-bottom: 24px;
}

.asset-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fill, minmax(260px, 1fr));

    gap: 14px;
}

.asset-card {
    padding: 16px;

    border: 1px solid rgba(255,255,255,.09);
    border-radius: 13px;

    background: rgba(255,255,255,.025);
}

.asset-name {
    font-weight: 720;
    margin-bottom: 6px;
}

.asset-meta {
    min-height: 40px;

    color: #8492a2;

    font-size: 12px;
    line-height: 1.5;
}

.asset-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-top: 14px;
}

.asset-actions .button {
    padding: 8px 10px;
    font-size: 12px;
}

.asset-card.selected-idle {
    border-color: rgba(90,169,255,.55);
}

.asset-card.selected-pause {
    box-shadow:
        inset 0 0 0 1px rgba(228,167,70,.45);
}

.empty {
    padding: 26px;

    border: 1px dashed rgba(255,255,255,.09);
    border-radius: 12px;

    color: #768391;

    text-align: center;
}

/* ---------------------------------------------------------
   Active display asset states
   --------------------------------------------------------- */

.asset-card {
    position: relative;
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease,
        transform .18s ease;
}

.asset-card.selected-idle {
    border: 2px solid #42d392;
    box-shadow:
        0 0 0 1px rgba(66,211,146,.20),
        0 0 22px rgba(66,211,146,.10);
    background:
        linear-gradient(
            145deg,
            rgba(66,211,146,.075),
            rgba(255,255,255,.018)
        );
}

.asset-card.selected-pause {
    border: 2px solid #e4a746;
    box-shadow:
        0 0 0 1px rgba(228,167,70,.22),
        0 0 22px rgba(228,167,70,.10);
    background:
        linear-gradient(
            145deg,
            rgba(228,167,70,.075),
            rgba(255,255,255,.018)
        );
}

.asset-card.selected-idle.selected-pause {
    border-color: #42d392;
    box-shadow:
        0 0 0 2px #42d392,
        0 0 0 5px rgba(228,167,70,.85),
        0 0 26px rgba(66,211,146,.10);
}

.button.secondary.active-idle {
    border-color: #42d392;
    background: #42d392;
    color: #06140e;
    box-shadow:
        0 0 0 1px rgba(66,211,146,.22);
}

.button.secondary.active-pause {
    border-color: #e4a746;
    background: #e4a746;
    color: #171006;
    box-shadow:
        0 0 0 1px rgba(228,167,70,.24);
}

.button.secondary.active-idle:hover,
.button.secondary.active-pause:hover {
    filter: brightness(1.06);
}

/* ---------------------------------------------------------
   Active broadcast mode
   --------------------------------------------------------- */

.button.active-normal {
    background: #42d392;
    color: #06140e;
    border: 1px solid #42d392;

    box-shadow:
        0 0 0 1px rgba(66,211,146,.22),
        0 0 18px rgba(66,211,146,.10);
}

.button.active-pause-mode {
    background: #e4a746;
    color: #171006;
    border: 1px solid #e4a746;

    box-shadow:
        0 0 0 1px rgba(228,167,70,.24),
        0 0 18px rgba(228,167,70,.10);
}

/* ---------------------------------------------------------
   Live broadcast status lamp
   --------------------------------------------------------- */

.mode-badge.status-lamp {
    width: 112px;
    height: 84px;

    padding: 10px;

    display: grid;
    grid-template-columns: 18px 1fr;
    grid-template-rows: auto auto;

    column-gap: 8px;
    row-gap: 2px;

    align-items: center;

    border-radius: 14px;

    text-align: left;
}

.status-lamp-dot {
    grid-row: 1 / 3;

    width: 15px;
    height: 15px;

    border-radius: 4px;

    align-self: center;
}

.status-lamp-title {
    font-size: 13px;
    font-weight: 850;
    letter-spacing: .04em;
}

.status-lamp-state {
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .08em;
}

.mode-badge.status-lamp.normal {
    color: #73e7b2;

    border-color: rgba(66,211,146,.45);

    background:
        linear-gradient(
            145deg,
            rgba(66,211,146,.11),
            rgba(66,211,146,.035)
        );

    box-shadow:
        inset 0 0 18px rgba(66,211,146,.04);
}

.mode-badge.status-lamp.normal .status-lamp-dot {
    background: #42d392;

    box-shadow:
        0 0 8px rgba(66,211,146,.85),
        0 0 18px rgba(66,211,146,.50);

    animation:
        statusPulseNormal 1.45s ease-in-out infinite;
}

.mode-badge.status-lamp.pause {
    color: #f2bd5b;

    border-color: rgba(228,167,70,.48);

    background:
        linear-gradient(
            145deg,
            rgba(228,167,70,.12),
            rgba(228,167,70,.035)
        );

    box-shadow:
        inset 0 0 18px rgba(228,167,70,.04);
}

.mode-badge.status-lamp.pause .status-lamp-dot {
    background: #e4a746;

    box-shadow:
        0 0 8px rgba(228,167,70,.88),
        0 0 18px rgba(228,167,70,.52);

    animation:
        statusPulsePause 1.45s ease-in-out infinite;
}

@keyframes statusPulseNormal {
    0%,
    100% {
        opacity: .45;
        transform: scale(.88);
        box-shadow:
            0 0 4px rgba(66,211,146,.45),
            0 0 10px rgba(66,211,146,.25);
    }

    50% {
        opacity: 1;
        transform: scale(1.08);
        box-shadow:
            0 0 10px rgba(66,211,146,1),
            0 0 24px rgba(66,211,146,.65);
    }
}

@keyframes statusPulsePause {
    0%,
    100% {
        opacity: .45;
        transform: scale(.88);
        box-shadow:
            0 0 4px rgba(228,167,70,.45),
            0 0 10px rgba(228,167,70,.25);
    }

    50% {
        opacity: 1;
        transform: scale(1.08);
        box-shadow:
            0 0 10px rgba(228,167,70,1),
            0 0 24px rgba(228,167,70,.65);
    }
}

@media (prefers-reduced-motion: reduce) {
    .status-lamp-dot {
        animation: none !important;
    }
}

/* ---------------------------------------------------------
   Live broadcast status lamp
   --------------------------------------------------------- */

.mode-badge.status-lamp {
    width: 112px;
    height: 84px;

    padding: 10px;

    display: grid;
    grid-template-columns: 18px 1fr;
    grid-template-rows: auto auto;

    column-gap: 8px;
    row-gap: 2px;

    align-items: center;

    border-radius: 14px;

    text-align: left;
}

.status-lamp-dot {
    grid-row: 1 / 3;

    width: 15px;
    height: 15px;

    border-radius: 4px;

    align-self: center;
}

.status-lamp-title {
    font-size: 13px;
    font-weight: 850;
    letter-spacing: .04em;
}

.status-lamp-state {
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .08em;
}

.mode-badge.status-lamp.normal {
    color: #73e7b2;

    border-color: rgba(66,211,146,.45);

    background:
        linear-gradient(
            145deg,
            rgba(66,211,146,.11),
            rgba(66,211,146,.035)
        );

    box-shadow:
        inset 0 0 18px rgba(66,211,146,.04);
}

.mode-badge.status-lamp.normal .status-lamp-dot {
    background: #42d392;

    box-shadow:
        0 0 8px rgba(66,211,146,.85),
        0 0 18px rgba(66,211,146,.50);

    animation:
        statusPulseNormal 1.45s ease-in-out infinite;
}

.mode-badge.status-lamp.pause {
    color: #f2bd5b;

    border-color: rgba(228,167,70,.48);

    background:
        linear-gradient(
            145deg,
            rgba(228,167,70,.12),
            rgba(228,167,70,.035)
        );

    box-shadow:
        inset 0 0 18px rgba(228,167,70,.04);
}

.mode-badge.status-lamp.pause .status-lamp-dot {
    background: #e4a746;

    box-shadow:
        0 0 8px rgba(228,167,70,.88),
        0 0 18px rgba(228,167,70,.52);

    animation:
        statusPulsePause 1.45s ease-in-out infinite;
}

@keyframes statusPulseNormal {
    0%,
    100% {
        opacity: .45;
        transform: scale(.88);
        box-shadow:
            0 0 4px rgba(66,211,146,.45),
            0 0 10px rgba(66,211,146,.25);
    }

    50% {
        opacity: 1;
        transform: scale(1.08);
        box-shadow:
            0 0 10px rgba(66,211,146,1),
            0 0 24px rgba(66,211,146,.65);
    }
}

@keyframes statusPulsePause {
    0%,
    100% {
        opacity: .45;
        transform: scale(.88);
        box-shadow:
            0 0 4px rgba(228,167,70,.45),
            0 0 10px rgba(228,167,70,.25);
    }

    50% {
        opacity: 1;
        transform: scale(1.08);
        box-shadow:
            0 0 10px rgba(228,167,70,1),
            0 0 24px rgba(228,167,70,.65);
    }
}

@media (prefers-reduced-motion: reduce) {
    .status-lamp-dot {
        animation: none !important;
    }
}

/* =========================================================
   Broadcast-grade illuminated display output indicator
   ========================================================= */

.mode-badge.status-lamp {
    width: 176px;
    height: 94px;

    padding: 11px 12px 12px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    border-radius: 12px;

    background: #0a0f14;

    border: 1px solid rgba(255,255,255,.12);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        inset 0 -1px 0 rgba(0,0,0,.55),
        0 8px 28px rgba(0,0,0,.24);

    overflow: hidden;
}

.status-output-label {
    font-size: 9px;
    line-height: 1;

    font-weight: 800;

    letter-spacing: .16em;

    color: #6c7885;
}

.status-output-button {
    min-height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 12px;

    border-radius: 8px;

    font-size: 14px;
    line-height: 1;

    font-weight: 900;

    letter-spacing: .06em;

    text-align: center;

    border: 1px solid transparent;

    transition:
        background .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}


/* EVENT ACTIVE */

.mode-badge.status-lamp.normal
.status-output-button {
    color: #08130e;

    background:
        linear-gradient(
            180deg,
            #72e6b2 0%,
            #43cf91 100%
        );

    border-color:
        rgba(121,240,183,.92);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.38),
        inset 0 -2px 5px rgba(0,0,0,.18),
        0 0 10px rgba(67,207,145,.52),
        0 0 24px rgba(67,207,145,.22);

    animation:
        outputEventGlow 1.7s ease-in-out infinite;
}


/* PAUSE ACTIVE */

.mode-badge.status-lamp.pause
.status-output-button {
    color: #181006;

    background:
        linear-gradient(
            180deg,
            #f2c165 0%,
            #e2a53d 100%
        );

    border-color:
        rgba(255,209,114,.92);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.34),
        inset 0 -2px 5px rgba(0,0,0,.19),
        0 0 10px rgba(226,165,61,.52),
        0 0 24px rgba(226,165,61,.22);

    animation:
        outputPauseGlow 1.7s ease-in-out infinite;
}


/* Whole illuminated-button breathing */

@keyframes outputEventGlow {
    0%,
    100% {
        filter: brightness(.88);

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.30),
            inset 0 -2px 5px rgba(0,0,0,.18),
            0 0 7px rgba(67,207,145,.34),
            0 0 16px rgba(67,207,145,.14);
    }

    50% {
        filter: brightness(1.08);

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.42),
            inset 0 -2px 5px rgba(0,0,0,.16),
            0 0 14px rgba(67,207,145,.66),
            0 0 30px rgba(67,207,145,.28);
    }
}

@keyframes outputPauseGlow {
    0%,
    100% {
        filter: brightness(.88);

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.28),
            inset 0 -2px 5px rgba(0,0,0,.19),
            0 0 7px rgba(226,165,61,.34),
            0 0 16px rgba(226,165,61,.14);
    }

    50% {
        filter: brightness(1.08);

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.40),
            inset 0 -2px 5px rgba(0,0,0,.17),
            0 0 14px rgba(226,165,61,.66),
            0 0 30px rgba(226,165,61,.28);
    }
}

@media (prefers-reduced-motion: reduce) {
    .status-output-button {
        animation: none !important;
    }
}

/* =========================================================
   Language selector
   ========================================================= */

.topbar-tools {
    display: flex;
    align-items: center;
    gap: 14px;
}

.language-control {
    margin: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 9px;
}

.language-label {
    display: flex;
    align-items: center;
    gap: 6px;

    color: #8492a2;
    font-size: 12px;
    font-weight: 700;
}

.language-control select {
    width: auto;
    min-width: 132px;

    padding: 8px 30px 8px 10px;

    border-radius: 9px;

    background: #111922;
    color: #eef3f8;

    cursor: pointer;
}

/* ---------------------------------------------------------
   Unified public-display control buttons
   --------------------------------------------------------- */

.live-control-row {
    align-items: flex-end;
}

.display-control-button {
    width: 154px;
    height: 54px;

    flex: 0 0 154px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 16px;

    border-radius: 11px;

    font-size: 14px;
    font-weight: 800;
    line-height: 1.1;

    text-align: center;

    transition:
        background .16s ease,
        border-color .16s ease,
        color .16s ease,
        box-shadow .16s ease;
}


/* ACTIVE = always green */

.display-control-button.display-control-active {
    color: #07140e;

    background:
        linear-gradient(
            180deg,
            #67e0aa 0%,
            #43cf91 100%
        );

    border: 1px solid #72e6b2;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.34),
        0 0 14px rgba(67,207,145,.24);
}


/* INACTIVE = same neutral appearance */

.display-control-button.display-control-inactive {
    color: #b8c3ce;

    background: #17212c;

    border: 1px solid rgba(255,255,255,.11);

    box-shadow: none;
}


/* Disabled but still visually consistent */

.display-control-button:disabled {
    cursor: default;
}

.display-control-button.display-control-inactive:disabled {
    opacity: .52;
}

.display-control-button.display-control-active:disabled {
    opacity: .72;
}


/* Theme buttons must not use old width rule */

.theme-inline-group .display-control-button {
    min-width: 154px;
}


/* ---------------------------------------------------------
   Display control groups
   --------------------------------------------------------- */

.live-control-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    align-items: flex-start;

    gap: 34px;

    width: 100%;
}

.display-control-group {
    display: flex;
    flex-direction: column;

    gap: 10px;
}

.display-control-group-title {
    font-size: 13px;
    font-weight: 750;

    color: #8e9baa;

    letter-spacing: .02em;
}

.display-control-buttons {
    display: flex;

    gap: 10px;
}

.display-control-buttons
.display-control-button {
    width: 168px;
    height: 56px;

    min-width: 168px;
    max-width: 168px;

    flex: 0 0 168px;

    margin: 0;
}


/* ---------------------------------------------------------
   Boxed display control groups
   --------------------------------------------------------- */

.display-control-group {
    display: flex;
    flex-direction: column;

    gap: 12px;

    padding: 16px 18px 18px;

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.028),
            rgba(255,255,255,.012)
        );
}

.display-control-group-title {
    margin: 0;

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

    letter-spacing: .05em;

    color: #8e9baa;
}

.display-control-buttons {
    display: flex;
    gap: 10px;
}

.display-control-buttons
.display-control-button {
    width: 168px;
    height: 56px;

    min-width: 168px;
    max-width: 168px;

    flex: 0 0 168px;
}


/* =========================================================
   Compact operator layout
   ========================================================= */

[hidden] {
    display: none !important;
}

body {
    min-width: 960px;
    overflow: hidden;
}

.app-shell {
    height: 100vh;
    min-height: 0;
}

.topbar {
    height: 64px;
    padding: 0 22px;
}

.product {
    font-size: 18px;
}

.layout {
    grid-template-columns: 260px minmax(0, 1fr);
    height: calc(100vh - 64px);
    min-height: 0;
}

.sidebar {
    height: 100%;
    padding: 20px 16px;
    overflow: hidden;
}

.panel-title {
    margin-bottom: 18px;
    font-size: 11px;
}

.sidebar label {
    gap: 6px;
    margin-bottom: 14px;
    font-size: 12px;
}

.sidebar select,
.sidebar input {
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 12px;
}

.sidebar .channel-summary {
    margin-top: 12px;
    padding: 10px;
    border-radius: 9px;
    font-size: 11px;
    line-height: 1.4;
}

.workspace {
    width: 100%;
    height: 100%;
    padding: 16px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 12px;
}

.workspace > .card:first-child,
.workspace > .card:last-child {
    grid-column: 1 / -1;
}

.card {
    padding: 15px;
    border-radius: 12px;
}

.card-header {
    gap: 12px;
    margin-bottom: 13px;
}

h2 {
    font-size: 17px;
}

.card-header p {
    margin-top: 3px;
    font-size: 12px;
}

.live-control-row {
    flex-wrap: nowrap;
    gap: 12px;
}

.display-control-group {
    min-width: 0;
    flex: 1 1 0;
    gap: 8px;
    padding: 11px;
    border-radius: 10px;
}

.display-control-buttons {
    gap: 7px;
}

.display-control-buttons .display-control-button {
    width: auto;
    min-width: 0;
    max-width: none;
    height: 42px;
    flex: 1 1 0;
    padding: 0 10px;
    font-size: 12px;
}

.mode-badge.status-output {
    transform: scale(.84);
    transform-origin: top right;
    margin-bottom: -12px;
}

.settings-grid {
    grid-template-columns: minmax(160px, 1fr) auto;
    gap: 10px;
}

.settings-grid select,
.settings-grid .button,
.upload-form input,
.upload-form .button {
    min-height: 38px;
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 12px;
}

.selection-info,
.selection-summary {
    margin-top: 8px;
    font-size: 11px;
}

.upload-form {
    margin-bottom: 12px;
}

.asset-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 9px;
}

.asset-card {
    padding: 11px;
}

@media (max-width: 1180px) {
    .layout {
        grid-template-columns: 230px minmax(0, 1fr);
    }

    .live-control-row {
        flex-wrap: wrap;
    }

    .display-control-group {
        min-width: 220px;
    }
}

body.embedded-mode {
    min-width: 0;
    background: #0b1016;
}

body.embedded-mode .app-shell {
    min-height: 0;
}

body.embedded-mode .topbar {
    display: none;
}

body.embedded-mode .layout {
    grid-template-columns: 230px minmax(0, 1fr);
    min-height: 0;
}

body.embedded-mode .sidebar {
    padding: 18px 14px;
}

body.embedded-mode .workspace {
    width: 100%;
    height: auto;
    min-height: 860px;
    padding: 16px;
}

@media (max-width: 900px) {
    body.embedded-mode .layout {
        grid-template-columns: 1fr;
    }

    body.embedded-mode .sidebar {
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.08);
    }
}

body.embedded-mode[data-web-ui-template="LIGHT"]{background:#edf3f5;color:#172b34}
body.embedded-mode[data-web-ui-template="LIGHT"] .sidebar{background:#f6fafb;border-color:#c6d5dc}
body.embedded-mode[data-web-ui-template="LIGHT"] .card,body.embedded-mode[data-web-ui-template="LIGHT"] .channel-summary,body.embedded-mode[data-web-ui-template="LIGHT"] .asset-card{background:#fff;color:#172b34;border-color:#c6d5dc}
body.embedded-mode[data-web-ui-template="LIGHT"] label,body.embedded-mode[data-web-ui-template="LIGHT"] .muted,body.embedded-mode[data-web-ui-template="LIGHT"] .panel-title{color:#526a76}
body.embedded-mode[data-web-ui-template="LIGHT"] select,body.embedded-mode[data-web-ui-template="LIGHT"] input{background:#f8fbfc;color:#172b34;border-color:#c6d5dc}
body.embedded-mode[data-web-ui-template="BRAND"]{background:#0a1017;color:#f6f7f9}
body.embedded-mode[data-web-ui-template="BRAND"] .card{border-color:#60404c}
body.embedded-mode[data-web-ui-template="BRAND"] .button.primary{background:#e62035;color:#fff}

/* Operator-facing institutional control surface. */
body{min-width:0;background:#0c1925;color:#eef4f7}
.topbar{border-bottom:1px solid #28404f;background:#102436;box-shadow:0 3px 16px #0002}
.topbar-tools{flex-wrap:wrap;justify-content:flex-end}
.appearance-control{display:flex;flex-direction:row;align-items:center;gap:9px;margin:0;font-size:12px;font-weight:750}
.appearance-control select{width:auto;min-width:105px;padding:8px 30px 8px 10px;cursor:pointer}
.language-control,.appearance-control{color:#c5d5df}
.layout{min-width:0}
.sidebar{background:#122839;border-color:#365163;scrollbar-gutter:stable}
.panel-title{color:#a9c8d7}
.workspace{width:100%;max-width:none;min-width:0}
.card{border-color:#304a5b;background:#142a3b;box-shadow:none}
.card-header p,.muted{color:#a4bbc8}
.button.primary{background:#42b88e;color:#082c22}
.button.secondary{background:#1c3445;color:#ecf4f7;border-color:#547184}
select:focus-visible,input:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid #4da0d0;outline-offset:2px}
body[data-web-ui-template="LIGHT"]{background:#f3f6f9;color:#172b3c;color-scheme:light}
body[data-web-ui-template="LIGHT"] .topbar{background:#fff;border-color:#c9d7df}
body[data-web-ui-template="LIGHT"] .subtitle,body[data-web-ui-template="LIGHT"] .language-label,body[data-web-ui-template="LIGHT"] .appearance-control{color:#526779}
body[data-web-ui-template="LIGHT"] .sidebar{background:#e9f0f5;border-color:#c8d7e0}
body[data-web-ui-template="LIGHT"] .panel-title{color:#3f5c6f}
body[data-web-ui-template="LIGHT"] .card,body[data-web-ui-template="LIGHT"] .channel-summary,body[data-web-ui-template="LIGHT"] .asset-card,body[data-web-ui-template="LIGHT"] .display-control-group{background:#fff;color:#172b3c;border-color:#cbd7df}
body[data-web-ui-template="LIGHT"] .card-header p,body[data-web-ui-template="LIGHT"] .muted,body[data-web-ui-template="LIGHT"] label,body[data-web-ui-template="LIGHT"] .selection-info,body[data-web-ui-template="LIGHT"] .selection-summary{color:#526779}
body[data-web-ui-template="LIGHT"] select,body[data-web-ui-template="LIGHT"] input{background:#fff;color:#172b3c;border-color:#aebfca}
body[data-web-ui-template="LIGHT"] .button.primary{background:#0b7257;color:#fff}
body[data-web-ui-template="LIGHT"] .button.secondary{background:#fff;color:#183548;border-color:#9fb8c5}
body[data-web-ui-template="LIGHT"] .button.danger{background:#fff1f2;color:#9f1f32;border-color:#c85565}
body[data-web-ui-template="LIGHT"] .system-status{background:#eef5f8;color:#3e5c6e;border-color:#bfd0da}
body[data-web-ui-template="LIGHT"] .system-status.ok{background:#e0f2e8;color:#0b6749;border-color:#81bea3}
body[data-web-ui-template="LIGHT"] .system-status.error{background:#fff1f2;color:#9f1f32;border-color:#c85565}
.system-status.operation-feedback{position:fixed;z-index:3000;top:16px;right:16px;max-width:min(440px,calc(100vw - 32px));box-shadow:0 16px 42px #0004}
body[data-web-ui-template="LIGHT"] .mode-badge{background:#eef4f7;color:#26495e;border-color:#bad0da}
body[data-web-ui-template="LIGHT"] .mode-badge.normal{background:#e0f2e8;color:#0b6749}
body[data-web-ui-template="LIGHT"] .mode-badge.pause{background:#fff3d8;color:#805109}
body[data-web-ui-template="LIGHT"] .live-control-row button:not(.button),body[data-web-ui-template="LIGHT"] .display-control-button:not(.active){color:#183548}
@media(max-width:1050px){.app-shell{height:auto;min-height:100vh}.layout{height:auto;min-height:0;grid-template-columns:220px minmax(0,1fr)}.sidebar{height:auto;overflow:visible}.topbar{height:auto;min-height:64px;gap:12px}.workspace{height:auto;grid-template-columns:1fr;overflow:visible}.workspace>.card{grid-column:1/-1}.live-control-row{flex-wrap:wrap}}
@media(max-width:760px){.app-shell{height:auto;min-height:100vh}.topbar{padding:12px 16px;align-items:flex-start;flex-wrap:wrap}.topbar-tools{width:100%;justify-content:flex-start}.layout{height:auto;min-height:0;grid-template-columns:1fr}.sidebar{height:auto;overflow:visible;padding:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px}.sidebar>.panel-title{grid-column:1/-1;margin:0}.sidebar label{margin:0}.sidebar .channel-summary{grid-column:1/-1}.workspace{height:auto;padding:14px}.settings-grid{grid-template-columns:1fr}.card-header{align-items:flex-start;flex-wrap:wrap}}
@media(max-width:520px){.sidebar{grid-template-columns:1fr}.topbar-tools{align-items:stretch}.language-control,.appearance-control{width:100%;justify-content:space-between}.language-control select,.appearance-control select{min-width:130px}.system-status{width:100%}.workspace{padding:10px}.card{padding:15px}.display-control-group{min-width:0;width:100%}.display-control-buttons{flex-wrap:wrap}}
.assembly-original-logo{display:block;width:180px;height:46px;padding:5px 8px;border-radius:7px;background:#f2f5f6;object-fit:contain;object-position:center}
/* Broadcast switcher: preview is a preparation state; only PROGRAM is live. */
.workspace>.broadcast-console{grid-column:1/-1;min-width:0;padding:24px;background:#0e1b29;border:1px solid #34556a;box-shadow:0 18px 42px #0003}
.mixer-header{align-items:center;margin-bottom:18px}.mixer-eyebrow,.mixer-section-title{display:block;color:#8bb4c8;font-size:11px;font-weight:850;letter-spacing:.15em;text-transform:uppercase}.mixer-eyebrow{margin-bottom:7px;color:#58d7aa}.mixer-header h2{font-size:24px}.mixer-clock{font-variant-numeric:tabular-nums;border:1px solid #3a5a6e;border-radius:9px;background:#08131e;color:#d2e5ee;padding:10px 13px;font-size:20px;font-weight:800;white-space:nowrap}
.mixer-monitors{display:grid;grid-template-columns:1fr 1fr;gap:14px;min-width:0}.mixer-monitor{min-height:170px;min-width:0;padding:18px 20px;border:2px solid;border-radius:14px;background:#08131e;display:flex;flex-direction:column}.mixer-program{border-color:#bd414d}.mixer-preview{border-color:#c39137}.mixer-monitor-top{display:flex;align-items:center;gap:10px;color:#cbdde6;font-size:12px;font-weight:850;letter-spacing:.1em}.mixer-monitor-led{display:inline-block;width:11px;height:11px;border-radius:50%;flex:none;background:#596978}.mixer-program .mixer-monitor-led{background:#fa5663;box-shadow:0 0 11px #fa5663;animation:mixer-onair 1.4s ease-in-out infinite}.mixer-preview .mixer-monitor-led{background:#f3c05d;box-shadow:0 0 8px #f3c05d}.broadcast-console .mode-badge.status-lamp{display:block;width:auto;height:auto;min-height:58px;margin:18px 0 0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:#fff;overflow:visible}.broadcast-console .mode-badge .status-output-label{display:none}.broadcast-console .mode-badge.status-lamp .status-output-button{display:block;min-height:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;animation:none;color:inherit;font-size:clamp(20px,2.2vw,34px);font-weight:850;line-height:1.15;letter-spacing:0;text-align:left;overflow-wrap:anywhere}.broadcast-console .mode-badge .status-output-theme{display:block;margin-top:5px;font-size:13px;color:#a8bdc9}.mixer-preview-name{margin-top:18px;font-size:clamp(20px,2.2vw,34px);font-weight:850;line-height:1.15;overflow-wrap:anywhere}.mixer-monitor-meta{margin-top:auto;padding-top:10px;color:#aac1cd;font-size:13px;overflow-wrap:anywhere}
.mixer-switcher{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:15px;margin-top:16px}.mixer-source-bank,.mixer-take-panel,.mixer-utility-group{min-width:0;padding:15px;border:1px solid #35536a;border-radius:12px;background:#14283a}.mixer-source-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:10px}.mixer-source{min-width:0;display:flex;flex-direction:column;gap:7px}.broadcast-console .mixer-source-button{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:7px;width:100%;height:94px;min-width:0;flex:none;padding:13px 15px;border:1px solid #526b7d;border-radius:10px;background:#1b3143;color:#e9f3f7;box-shadow:inset 0 -3px #091825;font-size:16px;font-weight:800;text-align:left;cursor:pointer}.broadcast-console .mixer-source-button:disabled{cursor:not-allowed;opacity:.5}.mixer-source-code{font-size:11px;font-weight:800;letter-spacing:.12em;color:#a3c0d0}.mixer-source-led{position:absolute;right:13px;top:13px;width:12px;height:12px;border:1px solid #728596;border-radius:50%;background:#526575}.mixer-source.is-preview .mixer-source-button{border-color:#e3b24b;box-shadow:inset 0 -3px #b98a26,0 0 0 1px #e3b24b}.mixer-source.is-preview .mixer-source-led{background:#f5c65c;border-color:#f5c65c;box-shadow:0 0 12px #f5c65c}.mixer-source.is-program .mixer-source-led{background:#f95061;border-color:#f95061;box-shadow:0 0 14px #f95061;animation:mixer-onair 1.4s ease-in-out infinite}.mixer-source[data-source="INFO"] .mixer-source-button{border-left:4px solid #eab72e}.mixer-source[data-source="MSO"] .mixer-source-button{border-left:4px solid #2f90db}.mixer-source select{width:100%;min-width:0;height:38px;padding:7px;background:#0c1d2b;border-color:#416077;color:#eaf4f8;font-size:12px}.mixer-take-panel{display:flex;flex-direction:column}.broadcast-console .mixer-take-button{width:100%;min-height:94px;margin-top:10px;border:1px solid #53dfaa;border-radius:10px;background:linear-gradient(180deg,#52d4a0,#199c72);color:#062b20;font-size:17px;font-weight:900;letter-spacing:.04em;box-shadow:inset 0 -5px #0f7054,0 0 18px #40c69350}.broadcast-console .mixer-take-button:disabled{background:#344c57;color:#aec4ce;border-color:#526e79;box-shadow:none;opacity:.7}.mixer-take-panel p{margin:12px 0 0;color:#abc1cd;font-size:12px;line-height:1.4}
.mixer-utility-row{display:grid;grid-template-columns:1fr 1fr minmax(190px,1.15fr);gap:12px;margin-top:14px}.mixer-utility-group{padding:13px 15px}.mixer-utility-actions{display:flex;gap:8px;margin-top:9px}.broadcast-console .mixer-utility-actions .display-control-button{width:auto;height:38px;min-width:75px;flex:1;padding:7px}.mixer-utility-group>select{width:100%;margin-top:9px;background:#0c1d2b;color:#eaf4f8;border-color:#416077}.mixer-activity{min-height:38px;max-height:80px;overflow:auto;margin:9px 0 0;padding:0;list-style:none}.mixer-activity li{display:flex;gap:9px;color:#eaf4f8;font-size:12px;padding:3px 0}.mixer-activity time{color:#8eafc1;font-variant-numeric:tabular-nums;white-space:nowrap}
.mixer-utility-row{grid-template-columns:repeat(2,minmax(0,1fr))}.mixer-audio-group{display:flex;flex-direction:column;gap:7px}.mixer-audio-group>select{margin-top:2px}.mixer-audio-group>button{align-self:flex-start}.mixer-audio-group>small{color:#a8c0cc}.mixer-log-group{grid-column:auto}
.broadcast-console .mixer-utility-actions .display-control-active{position:relative;padding-right:22px}.broadcast-console .mixer-utility-actions .display-control-active::after{content:"";position:absolute;right:9px;top:50%;width:7px;height:7px;transform:translateY(-50%);border-radius:50%;background:#eafff4;box-shadow:0 0 8px #eafff4;animation:mixer-onair 1.4s ease-in-out infinite}
.broadcast-console:not(.has-channel) .mixer-program .mixer-monitor-led{background:#596978;box-shadow:none;animation:none}.broadcast-console:not(.has-channel) .mixer-utility-actions .display-control-active::after{display:none}
@keyframes mixer-onair{0%,100%{opacity:1;filter:brightness(1.25)}50%{opacity:.38;filter:brightness(.7)}}@media(prefers-reduced-motion:reduce){.mixer-program .mixer-monitor-led,.mixer-source.is-program .mixer-source-led{animation:none}}
@media(prefers-reduced-motion:reduce){.broadcast-console .mixer-utility-actions .display-control-active::after{animation:none}}
body[data-web-ui-template="LIGHT"] .workspace>.broadcast-console{background:#e9f0f5;color:#152e3d;border-color:#9ab4c4}body[data-web-ui-template="LIGHT"] .mixer-clock,body[data-web-ui-template="LIGHT"] .mixer-monitor{background:#fff;color:#152e3d}body[data-web-ui-template="LIGHT"] .broadcast-console .mode-badge,body[data-web-ui-template="LIGHT"] .mixer-preview-name{color:#152e3d}body[data-web-ui-template="LIGHT"] .mixer-monitor-meta,body[data-web-ui-template="LIGHT"] .broadcast-console .mode-badge .status-output-theme{color:#4e6675}body[data-web-ui-template="LIGHT"] .mixer-monitor-top{color:#29485a}body[data-web-ui-template="LIGHT"] .mixer-source-bank,body[data-web-ui-template="LIGHT"] .mixer-take-panel,body[data-web-ui-template="LIGHT"] .mixer-utility-group{background:#fff;border-color:#b8cbd6}body[data-web-ui-template="LIGHT"] .mixer-source-button{background:#e7eff3;color:#172e3d;border-color:#94acb9}body[data-web-ui-template="LIGHT"] .mixer-source select,body[data-web-ui-template="LIGHT"] .mixer-utility-group>select{background:#fff;color:#172e3d;border-color:#a8bfca}body[data-web-ui-template="LIGHT"] .mixer-take-panel p,body[data-web-ui-template="LIGHT"] .mixer-activity li{color:#3f5e70}body[data-web-ui-template="LIGHT"] .mixer-section-title{color:#446479}
@media(max-width:1250px){.mixer-source-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mixer-switcher{grid-template-columns:minmax(0,1fr) 190px}.mixer-utility-row{grid-template-columns:repeat(2,minmax(0,1fr))}.mixer-log-group{grid-column:1/-1}}@media(max-width:750px){.mixer-monitors,.mixer-switcher,.mixer-utility-row{grid-template-columns:1fr}.mixer-log-group{grid-column:auto}.mixer-monitor{min-height:145px}.mixer-source-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mixer-clock{font-size:16px}}@media(max-width:430px){.workspace>.broadcast-console{padding:14px}.mixer-source-grid{gap:7px}.broadcast-console .mixer-source-button{padding:10px;font-size:14px}.mixer-source-led{right:9px;top:9px}}
.cue-publish-control{display:flex;gap:7px;align-items:center}.cue-publish-control select{min-width:72px;max-width:160px}.cue-info-button{background:#e9b638!important;color:#24210b!important;border-color:#d0a129!important}.cue-info-button.active{background:#ffd24f!important;box-shadow:0 0 0 3px #ffd24f55}.cue-mso-button{background:#2775bd!important;color:#fff!important;border-color:#296eac!important}.cue-mso-button.active{background:#268fe7!important;box-shadow:0 0 0 3px #268fe755}.cue-list{display:grid;gap:10px}.cue-item{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid #567083;border-radius:10px;padding:12px}.cue-item.info{border-left:5px solid #e9b638}.cue-item.mso{border-left:5px solid #2775bd}.cue-item.active{box-shadow:0 0 0 2px #42b88e}.cue-item strong{display:block}.cue-item small{display:block;opacity:.8;margin-top:3px}.cue-item-actions{display:flex;flex-wrap:wrap;gap:7px}.cue-preview{margin-top:18px;border:1px solid #567083;border-radius:12px;padding:12px}.cue-preview img{display:block;width:100%;max-height:420px;object-fit:contain;background:#101b26}.cue-page-controls{display:flex;align-items:center;justify-content:center;gap:15px;margin-top:12px}.cue-dialog{width:min(1100px,calc(100vw - 24px));max-height:90vh;border:1px solid #587183;border-radius:16px;padding:0;background:#142a3b;color:#fff;overflow:auto}.cue-dialog::backdrop{background:#000b}.cue-dialog-body{padding:22px;display:grid;gap:18px}.cue-dialog-header{display:flex;align-items:center;justify-content:space-between}.cue-dialog-header h2{margin:0}.cue-dialog label{display:grid;gap:7px}.cue-dialog textarea,.cue-dialog input{width:100%;background:#0a1a27;color:#fff;border:1px solid #678093;border-radius:8px;padding:12px}.cue-dialog textarea{min-height:330px;resize:vertical}.cue-editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.cue-editor-preview{aspect-ratio:16/9;min-height:270px;display:flex;flex-direction:column;padding:5%;background:#f6f8fa;color:#182233;border-radius:10px;overflow:hidden}.cue-editor-heading{font-size:clamp(16px,2vw,30px);font-weight:800;display:flex;align-items:center;gap:12px}.cue-editor-icon{display:inline-grid;place-items:center;width:1.15em;height:1.15em;border-radius:50%;background:#e63a42;color:#fff;font-family:Georgia,serif}.cue-editor-rule{height:4px;background:#e63a42;margin:2% 0}.cue-editor-message{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;white-space:pre-wrap;overflow-wrap:anywhere;font-weight:700;line-height:1.14;font-size:clamp(18px,3vw,54px)}.cue-dialog-actions{display:flex;justify-content:flex-end}body[data-web-ui-template="LIGHT"] .cue-dialog{background:#fff;color:#172b3c}body[data-web-ui-template="LIGHT"] .cue-dialog textarea,body[data-web-ui-template="LIGHT"] .cue-dialog input{background:#fff;color:#172b3c}@media(max-width:800px){.cue-editor-grid{grid-template-columns:1fr}.cue-editor-preview{min-height:200px}.cue-item{align-items:flex-start;flex-direction:column}.cue-publish-control{width:100%}}
.mixer-screen{display:block;width:100%;aspect-ratio:16/9;min-height:180px;margin:12px 0;border:1px solid #446174;border-radius:8px;background:#08131e;pointer-events:none}
.mixer-monitors .mixer-monitor{min-height:0}.mixer-monitors .mode-badge.status-lamp{margin:4px 0}.mixer-preview-name{margin-top:4px;font-size:16px}
.mixer-source[data-source="VIDEO"] .mixer-source-button{border-left:4px solid #35c9cd}.mixer-source[data-source="VIDEO"].is-preview .mixer-source-button{border-color:#35c9cd;box-shadow:0 0 0 1px #35c9cd}
.media-decks{display:grid;grid-template-columns:1fr 1fr;gap:16px}.media-deck{min-width:0;padding:18px;border:1px solid #3b596c;border-radius:12px;background:#112332}.media-deck h3{margin:0 0 14px}.media-upload{display:grid;grid-template-columns:minmax(120px,1fr) minmax(160px,1.5fr) auto;gap:8px;align-items:center}.media-upload input{margin:0}.media-list{min-height:110px;max-height:250px;overflow:auto;margin:12px 0;padding:6px;border:1px solid #36536a;border-radius:9px}.media-item{display:flex;align-items:center;gap:8px;padding:7px;border-bottom:1px solid #344c5d}.media-item:last-child{border-bottom:0}.media-item button:first-child{flex:1;text-align:left}.media-item small{color:#aac1cd}.media-item.selected{background:#155161}.media-transport{display:flex;flex-wrap:wrap;align-items:center;gap:6px}.media-transport input[type=range]{min-width:120px;flex:1}.media-sound{display:flex;align-items:center;gap:12px;margin-top:14px}.media-sound label{flex:1;margin:0}.meter{width:22px;height:52px;display:flex;align-items:flex-end;gap:4px}.meter i{width:8px;min-height:4px;height:var(--level,4px);border-radius:3px;background:linear-gradient(#f3d047,#32ce9c)}#media-status{min-height:20px;color:#a8c3d1}@media(max-width:1100px){.media-decks{grid-template-columns:1fr}.media-upload{grid-template-columns:1fr}}
body[data-web-ui-template="LIGHT"] .media-deck{background:#fff;color:#172e3d}body[data-web-ui-template="LIGHT"] .media-list{border-color:#bacbd3}body[data-web-ui-template="LIGHT"] .media-item small{color:#4e6675}

/* One-page broadcast desk. Panels scroll internally rather than overlap. */
body { min-width: 0; }
.workspace, .workspace > .card, .mixer-monitors, .media-decks,
.media-deck, .cue-card, .asset-card-panel { min-width: 0; }
.workspace > .card { overflow-wrap: anywhere; }
.button, select, input { max-width: 100%; }
.button { white-space: normal; }
.cue-item strong, .media-item button, .asset-card strong { overflow-wrap: anywhere; }
.media-item { min-width: 0; flex-wrap: wrap; }
.media-item button:first-child { min-width: 120px; }

@media (min-width: 1360px) and (min-height: 850px) {
    body:not(.embedded-mode), body:not(.embedded-mode) .app-shell { height: 100vh; overflow: hidden; }
    body:not(.embedded-mode) .topbar { height: 56px; padding: 0 18px; }
    body:not(.embedded-mode) .topbar > div:first-child { display: flex; align-items: center; gap: 12px; min-width: 0; }
    body:not(.embedded-mode) .assembly-original-logo { width: 140px; height: 36px; }
    body:not(.embedded-mode) .subtitle { margin: 0; white-space: nowrap; }
    body:not(.embedded-mode) .layout { height: calc(100vh - 56px); min-height: 0; grid-template-columns: 190px minmax(0, 1fr); }
    body:not(.embedded-mode) .sidebar { height: 100%; min-height: 0; overflow-y: auto; padding: 14px 11px; }
    body:not(.embedded-mode) .sidebar .panel-title { margin-bottom: 12px; }
    body:not(.embedded-mode) .sidebar label { margin-bottom: 10px; }
    body:not(.embedded-mode) .sidebar .channel-summary { margin-top: 8px; padding: 8px; font-size: 10px; word-break: break-word; }
    body:not(.embedded-mode) .workspace {
        width: 100%; height: 100%; min-height: 0; overflow: hidden;
        padding: 8px; gap: 8px; align-content: stretch;
        display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-template-rows: minmax(0, 1.1fr) minmax(0, .78fr) minmax(0, .42fr);
    }
    body:not(.embedded-mode) .workspace > .card { min-height: 0; padding: 11px; overflow: auto; }
    body:not(.embedded-mode) .workspace > .broadcast-console {
        grid-column: 1 / 8; grid-row: 1 / 3; overflow: hidden;
        display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 7px;
    }
    body:not(.embedded-mode) .workspace > .media-console { grid-column: 8 / -1; grid-row: 1; display: flex; flex-direction: column; overflow: hidden; }
    body:not(.embedded-mode) .workspace > .cue-card { grid-column: 8 / -1; grid-row: 2; display: flex; flex-direction: column; overflow: hidden; }
    body:not(.embedded-mode) .workspace > .idle-card { grid-column: 1 / 4; grid-row: 3; }
    body:not(.embedded-mode) .workspace > .pause-card { grid-column: 4 / 7; grid-row: 3; }
    body:not(.embedded-mode) .workspace > .asset-card-panel { grid-column: 7 / -1; grid-row: 3; }
    body:not(.embedded-mode) .card-header { margin-bottom: 7px; }
    body:not(.embedded-mode) .card-header h2 { font-size: 15px; }
    body:not(.embedded-mode) .card-header p { font-size: 11px; line-height: 1.3; }
    body:not(.embedded-mode) .mixer-header { margin: 0; }
    body:not(.embedded-mode) .mixer-header h2 { font-size: 18px; }
    body:not(.embedded-mode) .mixer-eyebrow, body:not(.embedded-mode) .mixer-section-title { font-size: 10px; letter-spacing: .1em; }
    body:not(.embedded-mode) .mixer-clock { padding: 6px 8px; font-size: 15px; }
    body:not(.embedded-mode) .mixer-monitors { min-height: 0; gap: 7px; }
    body:not(.embedded-mode) .mixer-monitor {
        min-height: 0; padding: 7px; border-radius: 9px;
        display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto;
    }
    body:not(.embedded-mode) .mixer-monitor-top { font-size: 10px; }
    body:not(.embedded-mode) .mixer-screen { min-height: 0; height: auto; max-height: 100%; aspect-ratio: 16 / 9; margin: 5px 0; align-self: center; }
    body:not(.embedded-mode) .broadcast-console .mode-badge.status-lamp { min-height: 0; margin: 3px 0 0; }
    body:not(.embedded-mode) .broadcast-console .mode-badge.status-lamp .status-output-button { font-size: 12px; }
    body:not(.embedded-mode) .broadcast-console .mode-badge .status-output-theme { margin: 0; font-size: 10px; }
    body:not(.embedded-mode) .mixer-preview-name, body:not(.embedded-mode) .mixer-monitor-meta { margin: 0; padding-top: 3px; font-size: 11px; line-height: 1.2; }
    body:not(.embedded-mode) .mixer-switcher { grid-template-columns: minmax(0, 1fr) 125px; gap: 7px; margin: 0; }
    body:not(.embedded-mode) .mixer-source-bank, body:not(.embedded-mode) .mixer-take-panel,
    body:not(.embedded-mode) .mixer-utility-group { padding: 7px; border-radius: 8px; }
    body:not(.embedded-mode) .mixer-source-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; margin-top: 5px; }
    body:not(.embedded-mode) .broadcast-console .mixer-source-button { height: 54px; padding: 5px 7px; gap: 2px; font-size: 12px; }
    body:not(.embedded-mode) .mixer-source-code { font-size: 9px; }
    body:not(.embedded-mode) .mixer-source-led { top: 6px; right: 6px; width: 7px; height: 7px; }
    body:not(.embedded-mode) .mixer-source select { height: 28px; padding: 4px; font-size: 10px; }
    body:not(.embedded-mode) .broadcast-console .mixer-take-button { min-height: 54px; margin-top: 5px; padding: 5px; font-size: 12px; }
    body:not(.embedded-mode) .mixer-take-panel p { margin: 5px 0 0; font-size: 10px; line-height: 1.2; }
    body:not(.embedded-mode) .mixer-utility-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; }
    body:not(.embedded-mode) .mixer-utility-actions { margin-top: 4px; gap: 4px; }
    body:not(.embedded-mode) .broadcast-console .mixer-utility-actions .display-control-button { height: 29px; min-width: 0; padding: 3px; font-size: 11px; }
    body:not(.embedded-mode) .mixer-utility-group > select { margin-top: 4px; padding: 5px; font-size: 11px; }
    body:not(.embedded-mode) .mixer-audio-group { gap: 3px; }
    body:not(.embedded-mode) .mixer-audio-group > button { padding: 5px; font-size: 10px; }
    body:not(.embedded-mode) .mixer-audio-group > small { font-size: 9px; line-height: 1.2; }
    body:not(.embedded-mode) .mixer-activity { min-height: 0; max-height: 70px; margin: 4px 0 0; }
    body:not(.embedded-mode) .mixer-activity li { font-size: 10px; }
    body:not(.embedded-mode) .media-console .media-decks { min-height: 0; flex: 1; gap: 6px; overflow: auto; }
    body:not(.embedded-mode) .media-deck { min-height: 0; padding: 7px; overflow: auto; }
    body:not(.embedded-mode) .media-deck h3 { margin-bottom: 5px; font-size: 12px; }
    body:not(.embedded-mode) .media-upload { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; gap: 4px; }
    body:not(.embedded-mode) .media-upload input, body:not(.embedded-mode) .media-upload button { min-width: 0; min-height: 28px; padding: 3px; font-size: 10px; }
    body:not(.embedded-mode) .media-list { min-height: 45px; max-height: 88px; margin: 5px 0; padding: 3px; }
    body:not(.embedded-mode) .media-item { gap: 4px; padding: 3px; }
    body:not(.embedded-mode) .media-item button { padding: 4px; font-size: 10px; }
    body:not(.embedded-mode) .media-item small { font-size: 9px; }
    body:not(.embedded-mode) .media-transport { gap: 3px; }
    body:not(.embedded-mode) .media-transport button { padding: 5px; font-size: 10px; }
    body:not(.embedded-mode) .media-transport input[type=range] { min-width: 70px; }
    body:not(.embedded-mode) .media-sound { gap: 5px; margin-top: 5px; }
    body:not(.embedded-mode) .media-sound button { padding: 5px; font-size: 10px; }
    body:not(.embedded-mode) .media-sound label { margin: 0; }
    body:not(.embedded-mode) .meter { height: 32px; }
    body:not(.embedded-mode) #media-status { min-height: 0; margin: 4px 0 0; font-size: 10px; }
    body:not(.embedded-mode) .cue-list { min-height: 0; overflow: auto; gap: 5px; }
    body:not(.embedded-mode) .cue-item { padding: 6px; gap: 5px; }
    body:not(.embedded-mode) .cue-item strong { font-size: 11px; }
    body:not(.embedded-mode) .cue-item small { font-size: 10px; }
    body:not(.embedded-mode) .cue-item-actions { gap: 4px; }
    body:not(.embedded-mode) .cue-item-actions .button { padding: 5px; font-size: 10px; }
    body:not(.embedded-mode) .cue-preview { margin-top: 5px; padding: 5px; }
    body:not(.embedded-mode) .cue-preview img { max-height: 65px; }
    body:not(.embedded-mode) .cue-page-controls { margin-top: 3px; gap: 5px; }
    body:not(.embedded-mode) .cue-page-controls .button { padding: 4px; font-size: 10px; }
    body:not(.embedded-mode) .settings-grid { gap: 5px; }
    body:not(.embedded-mode) .settings-grid label { min-width: 0; margin: 0; }
    body:not(.embedded-mode) .settings-grid select, body:not(.embedded-mode) .settings-grid .button { min-height: 30px; padding: 4px; font-size: 10px; }
    body:not(.embedded-mode) .selection-info { margin-top: 4px; font-size: 10px; }
    body:not(.embedded-mode) .upload-form { margin-bottom: 5px; gap: 4px; }
    body:not(.embedded-mode) .upload-form input, body:not(.embedded-mode) .upload-form .button { min-width: 0; min-height: 30px; padding: 4px; font-size: 10px; }
    body:not(.embedded-mode) .asset-grid { max-height: 80px; overflow: auto; grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); }
}

@media (min-width: 1360px) and (max-width: 1650px) and (min-height: 850px) {
    body:not(.embedded-mode) .media-decks { grid-template-columns: 1fr; }
    body:not(.embedded-mode) .media-deck { min-height: 260px; overflow: visible; }
}

@media (max-width: 1359px), (max-height: 849px) {
    .layout, .workspace, .sidebar { height: auto; min-height: 0; }
    .workspace { width: 100%; overflow: visible; }
    .workspace > .card { grid-column: 1 / -1; }
    .mixer-source-grid { grid-template-columns: repeat(auto-fit, minmax(115px, 1fr)); }
    .media-upload { grid-template-columns: minmax(0, 1fr); }
    .media-decks { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
    .mixer-screen { min-height: 0; }
}
@media (max-width: 1000px) {
    .upload-form { grid-template-columns: minmax(0, 1fr); }
    .upload-form input, .upload-form button { min-width: 0; }
    .asset-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); }
}

/* Each source keeps its identity while idle; only the active rim pulses. */
.mixer-source[data-source="EVENT"] { --source-rgb: 63, 203, 149; }
.mixer-source[data-source="PAUSE"] { --source-rgb: 240, 157, 83; }
.mixer-source[data-source="INFO"] { --source-rgb: 241, 193, 65; }
.mixer-source[data-source="MSO"] { --source-rgb: 76, 159, 235; }
.mixer-source[data-source="VIDEO"] { --source-rgb: 54, 204, 210; }
.mixer-source { --pulse-color: rgb(var(--source-rgb)); }
.broadcast-console .mixer-source .mixer-source-button,
body[data-web-ui-template="LIGHT"] .broadcast-console .mixer-source .mixer-source-button {
    border: 2px solid rgba(var(--source-rgb), .42);
    background: rgba(var(--source-rgb), .12);
    color: rgb(var(--source-rgb));
    box-shadow: none;
}
.broadcast-console .mixer-source .mixer-source-code { color: inherit; opacity: .75; }
.broadcast-console .mixer-source .mixer-source-led {
    background: rgb(var(--source-rgb));
    border-color: rgb(var(--source-rgb));
    opacity: .6;
    box-shadow: none;
    animation: none;
}
.broadcast-console .mixer-source.is-preview .mixer-source-button,
.broadcast-console .mixer-source.is-program .mixer-source-button,
body[data-web-ui-template="LIGHT"] .broadcast-console .mixer-source.is-preview .mixer-source-button,
body[data-web-ui-template="LIGHT"] .broadcast-console .mixer-source.is-program .mixer-source-button {
    background: rgba(var(--source-rgb), .33);
    border-color: rgb(var(--source-rgb));
    color: #fff;
    animation: broadcast-rim 1.35s ease-in-out infinite;
}
body[data-web-ui-template="LIGHT"] .broadcast-console .mixer-source.is-preview .mixer-source-button,
body[data-web-ui-template="LIGHT"] .broadcast-console .mixer-source.is-program .mixer-source-button {
    color: #122638;
}
.broadcast-console .mixer-source.is-preview .mixer-source-led,
.broadcast-console .mixer-source.is-program .mixer-source-led { opacity: 1; animation: none; }
.broadcast-console .mixer-source-button:disabled { opacity: .42; }
.broadcast-console .mixer-source-button:focus-visible,
.broadcast-console .mixer-take-button:focus-visible,
.media-console button:focus-visible,
.cue-card button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.broadcast-console .mixer-utility-actions .display-control-inactive,
body[data-web-ui-template="LIGHT"] .broadcast-console .mixer-utility-actions .display-control-inactive {
    background: rgba(77, 163, 224, .12);
    border: 2px solid rgba(77, 163, 224, .42);
    color: #6cb9ed;
    box-shadow: none;
}
.broadcast-console .mixer-utility-actions .display-control-active,
body[data-web-ui-template="LIGHT"] .broadcast-console .mixer-utility-actions .display-control-active {
    background: rgba(77, 163, 224, .4);
    border: 2px solid #69bcf3;
    color: #fff;
    box-shadow: none;
    animation: broadcast-rim 1.35s ease-in-out infinite;
}
body[data-web-ui-template="LIGHT"] .broadcast-console .mixer-utility-actions .display-control-active { color: #112638; }
.broadcast-console .mixer-utility-actions .display-control-active::after { animation: none; }
.cue-info-button, .cue-mso-button, .media-transport button,
.media-sound button, .asset-card .button { opacity: .78; }
.cue-info-button.active, .cue-mso-button.active,
.media-transport .is-transport-active, .media-sound button.active,
.asset-card .active-idle, .asset-card .active-pause {
    opacity: 1;
    animation: broadcast-rim 1.35s ease-in-out infinite;
}
.media-transport #video-play.is-transport-active,
.media-transport #music-play.is-transport-active {
    background: #168c68;
    border: 2px solid #4ce0ab;
    color: #fff;
}
.media-transport #video-pause.is-transport-active,
.media-transport #music-pause.is-transport-active {
    background: #9a6214;
    border: 2px solid #ffd169;
    color: #fff;
}
.media-sound button.active { background: #932a3a; border: 2px solid #ff6477; color: #fff; }
@keyframes broadcast-rim {
    0%, 100% { box-shadow: 0 0 0 1px var(--pulse-color, currentColor), 0 0 12px rgba(255,255,255,.26); }
    50% { box-shadow: 0 0 0 1px transparent, 0 0 2px transparent; }
}
@media (prefers-reduced-motion: reduce) {
    .broadcast-console .mixer-source.is-preview .mixer-source-button,
    .broadcast-console .mixer-source.is-program .mixer-source-button,
    .broadcast-console .mixer-utility-actions .display-control-active,
    .cue-info-button.active, .cue-mso-button.active,
    .media-transport .is-transport-active, .media-sound button.active,
    .asset-card .active-idle, .asset-card .active-pause { animation: none; box-shadow: 0 0 0 2px currentColor; }
}

/* Broadcast desk v006: the entire player frame is scaled into a true 16:9 monitor. */
.mixer-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid #486376;
    border-radius: 7px;
    background: #07111b;
}
.mixer-stage > .mixer-screen,
body:not(.embedded-mode) .mixer-stage > .mixer-screen {
    position: absolute;
    inset: 0 auto auto 0;
    display: block;
    width: 1920px;
    height: 1080px;
    min-width: 1920px;
    min-height: 1080px;
    max-width: none;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    aspect-ratio: auto;
    transform-origin: 0 0;
    pointer-events: none;
}

/* Narrow sidebar information becomes an event/channel routing strip. */
@media (min-width: 1360px) and (min-height: 850px) {
    body:not(.embedded-mode) .layout {
        display: flex;
        flex-direction: column;
        height: calc(100vh - 56px);
        min-height: 0;
    }
    body:not(.embedded-mode) .sidebar {
        display: flex;
        flex: 0 0 62px;
        align-items: center;
        gap: 14px;
        width: 100%;
        height: 62px;
        min-height: 0;
        padding: 7px 15px;
        overflow: hidden;
        border-right: 0;
        border-bottom: 1px solid #375165;
    }
    body:not(.embedded-mode) .sidebar .panel-title {
        flex: 0 0 120px;
        margin: 0;
        line-height: 1.2;
    }
    body:not(.embedded-mode) .sidebar label:not([hidden]) {
        flex: 1 1 0;
        min-width: 160px;
        max-width: 420px;
        gap: 2px;
        margin: 0;
        font-size: 10px;
    }
    body:not(.embedded-mode) .sidebar label:not([hidden]) select {
        height: 34px;
        padding: 5px 9px;
        font-size: 12px;
    }
    body:not(.embedded-mode) .sidebar #channel-summary { display: none; }
    body:not(.embedded-mode) .workspace {
        height: calc(100% - 62px);
        flex: 1 1 auto;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-template-rows: minmax(0, 1.18fr) minmax(0, .67fr) minmax(0, .44fr);
        gap: 8px;
    }
    body:not(.embedded-mode) .workspace > .broadcast-console { grid-column: 1 / 8; }
    body:not(.embedded-mode) .workspace > .broadcast-console {
        grid-template-rows: auto auto auto auto;
        overflow: auto;
    }
    body:not(.embedded-mode) .broadcast-console .mixer-header p { display: none; }
    body:not(.embedded-mode) .workspace > .media-console,
    body:not(.embedded-mode) .workspace > .cue-card { grid-column: 8 / -1; }
    body:not(.embedded-mode) .mixer-monitors {
        align-content: start;
        align-items: start;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    body:not(.embedded-mode) .mixer-monitor {
        grid-template-rows: auto auto auto auto;
        align-content: start;
        gap: 3px;
    }
    body:not(.embedded-mode) .mixer-monitor .mixer-stage { margin-top: 2px; }
    body:not(.embedded-mode) .mixer-stage { width: min(100%, 42vh); justify-self: center; }
    body:not(.embedded-mode) .broadcast-console .mode-badge.status-lamp,
    body:not(.embedded-mode) .mixer-preview-name { margin: 0; }

    /* One horizontal player per audio/video function; file and transport remain visible. */
    body:not(.embedded-mode) .media-console .media-decks {
        display: grid;
        flex: 1 1 auto;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: repeat(2, minmax(0, 1fr));
        overflow: hidden;
    }
    body:not(.embedded-mode) .media-deck {
        display: grid;
        grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
        grid-template-rows: auto auto minmax(0, 1fr) auto;
        align-items: start;
        gap: 3px 10px;
        min-height: 0;
        overflow: hidden;
    }
    body:not(.embedded-mode) .media-deck h3 { grid-column: 1 / -1; margin: 0; }
    body:not(.embedded-mode) .media-upload { grid-column: 1 / -1; grid-row: 2; }
    body:not(.embedded-mode) .media-list {
        grid-column: 1;
        grid-row: 3;
        align-self: stretch;
        height: 100%;
        min-height: 0;
        max-height: none;
        margin: 0;
    }
    body:not(.embedded-mode) .media-transport {
        grid-column: 2;
        grid-row: 3;
        align-content: start;
        align-self: start;
        overflow: hidden;
    }
    body:not(.embedded-mode) .media-transport button { min-height: 23px; padding: 3px 5px; }
    body:not(.embedded-mode) .media-transport input[type=range] { flex: 1 1 56%; height: 18px; }
    body:not(.embedded-mode) .media-transport > span { flex: 0 0 auto; white-space: nowrap; font-size: 10px; }
    body:not(.embedded-mode) .media-sound {
        grid-column: 1 / -1;
        grid-row: 4;
        align-items: center;
        height: 27px;
        margin: 0;
    }
    body:not(.embedded-mode) .media-sound label { flex-direction: row; align-items: center; gap: 8px; font-size: 10px; }
    body:not(.embedded-mode) .media-sound label span { flex: 0 0 auto; }
    body:not(.embedded-mode) .media-sound input { min-width: 60px; height: 18px; }
    body:not(.embedded-mode) .meter { width: 25px; height: 24px; }
    body:not(.embedded-mode) .media-deck .media-item { flex-wrap: nowrap; }
    body:not(.embedded-mode) .media-deck .media-item button:first-child { min-width: 0; }
}

@media (min-width: 1360px) and (max-width: 1650px) and (min-height: 850px) {
    body:not(.embedded-mode) .mixer-stage { width: min(100%, 36vh); }
}

@media (min-width: 1360px) and (max-width: 1439px) and (min-height: 850px) {
    body:not(.embedded-mode) .workspace {
        grid-template-rows: minmax(0, 1.31fr) minmax(0, .54fr) minmax(0, .44fr);
    }
}

/* Below the desk breakpoint the controls flow normally, without a fixed sidebar. */
@media (max-width: 1359px), (max-height: 849px) {
    body:not(.embedded-mode) { min-width: 0; overflow: auto; }
    body:not(.embedded-mode) .app-shell { height: auto; min-height: 100vh; }
    body:not(.embedded-mode) .layout { display: block; height: auto; min-height: 0; }
    body:not(.embedded-mode) .sidebar {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px 12px;
        height: auto;
        padding: 12px;
        overflow: visible;
        border-right: 0;
        border-bottom: 1px solid #375165;
    }
    body:not(.embedded-mode) .sidebar .panel-title { grid-column: 1 / -1; margin: 0; }
    body:not(.embedded-mode) .sidebar label:not([hidden]) { min-width: 0; margin: 0; }
    body:not(.embedded-mode) .sidebar label:not([hidden]) select { height: 37px; }
    body:not(.embedded-mode) .sidebar #channel-summary { display: none; }
    body:not(.embedded-mode) .workspace {
        width: 100%;
        height: auto;
        min-height: 0;
        overflow: visible;
        grid-template-columns: minmax(0, 1fr);
        padding: 12px;
    }
    body:not(.embedded-mode) .workspace > .card { min-width: 0; grid-column: 1; }
}
@media (max-width: 750px) {
    body:not(.embedded-mode) .topbar { height: auto; min-height: 64px; flex-wrap: wrap; gap: 6px; padding: 8px 12px; }
    body:not(.embedded-mode) .topbar-tools { gap: 6px; }
    body:not(.embedded-mode) .sidebar { grid-template-columns: 1fr; }
    body:not(.embedded-mode) .sidebar .panel-title { grid-column: 1; }
    body:not(.embedded-mode) .mixer-monitors,
    body:not(.embedded-mode) .mixer-switcher,
    body:not(.embedded-mode) .mixer-utility-row { grid-template-columns: 1fr; }
    body:not(.embedded-mode) .mixer-source-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body:not(.embedded-mode) .media-decks { grid-template-columns: 1fr; }
}

@media (max-width: 1359px), (max-height: 849px) {
    .mixer-stage { margin: 8px 0; }
    .mixer-monitor { overflow: hidden; }
}
@media (max-width: 750px) {
    .mixer-stage { width: 100%; }
    .media-decks { grid-template-columns: 1fr; }
}

/* Broadcast desk v007: compact routing, physical switcher, and paired playout decks. */
.output-settings { min-width: 0; display: grid; grid-template-columns: 108px 105px minmax(210px, 1fr); gap: 7px; }
.output-setting { min-width: 0; padding: 5px 7px; border: 1px solid #38576a; border-radius: 8px; background: #102332; }
.output-setting .mixer-section-title { display: block; min-width: 0; margin: 0 0 4px; color: #b8d1de; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 9px; letter-spacing: .03em; }
.output-setting .mixer-utility-actions { display: flex; gap: 4px; margin: 0; }
.output-theme .display-control-button { min-width: 0; flex: 1; height: 27px; padding: 2px 4px; font-size: 10px; border: 1px solid #537589; border-radius: 5px; background: #1b3447; color: #b4d4e4; }
.output-theme .display-control-active { border-color: #59bdf1; background: #267fb1; color: #fff; box-shadow: 0 0 0 1px #5ec7ff80; }
.output-language select, .output-audio select { width: 100%; height: 27px; min-height: 0; padding: 2px 7px; border-color: #537589; border-radius: 5px; background: #081723; color: #eaf4fa; font-size: 10px; }
.output-audio-controls { display: flex; min-width: 0; gap: 4px; }
.output-audio-controls select { flex: 1 1 0; min-width: 0; }
.output-audio-controls button { flex: 0 0 auto; min-width: 0; max-width: 115px; height: 27px; padding: 2px 6px; font-size: 9px; line-height: 1.1; }
.output-audio small { display: block; min-width: 0; margin-top: 2px; color: #93b5c7; font-size: 9px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar > #mixer-activity { display: none; }

.mixer-program { border-color: #e64f59; background: linear-gradient(180deg,#0b1a26,#07131d); }
.mixer-preview { border-color: #35cf8c; background: linear-gradient(180deg,#0b1a26,#07131d); }
.mixer-monitor-top { min-height: 24px; padding: 2px 4px; font-weight: 900; }
.mixer-program .mixer-monitor-top { color: #ffb6bd; }
.mixer-preview .mixer-monitor-top { color: #a5f2cb; }
.mixer-preview .mixer-monitor-led { background: #41e59d; box-shadow: 0 0 10px #41e59d; }
.mixer-source-bank { border-color: #516878; background: #101e2a; }
.broadcast-console .mixer-source .mixer-source-button { border-radius: 6px; background: linear-gradient(180deg,#334b5c 0%,#1a2b38 12%,#13232e 100%); box-shadow: inset 0 2px #ffffff3b,inset 0 -4px #071019,0 2px 4px #0007; }
.broadcast-console .mixer-source.is-preview .mixer-source-button { border-color: #4bea9f; background: linear-gradient(180deg,#238c65,#12583f); color: #f4fff9; box-shadow: inset 0 2px #aaffd475,inset 0 -4px #06422e,0 0 0 1px #4bea9f; }
.broadcast-console .mixer-source.is-program .mixer-source-button { border-color: #ff6570; background: linear-gradient(180deg,#a93c49,#6b2530); color: #fff8f8; box-shadow: inset 0 2px #ffc3c775,inset 0 -4px #53131e,0 0 0 1px #ff6570; }
.broadcast-console .mixer-source.is-preview .mixer-source-led { background: #b9ffd8; border-color: #b9ffd8; box-shadow: 0 0 9px #b9ffd8; }
.broadcast-console .mixer-source.is-program .mixer-source-led { background: #ffb1b9; border-color: #ffb1b9; box-shadow: 0 0 9px #ffb1b9; }
.broadcast-console .mixer-take-button { border-radius: 6px; background: linear-gradient(180deg,#6be2b4,#199c72); box-shadow: inset 0 2px #d6ffe7,inset 0 -4px #107050,0 3px 7px #0007; }

.media-console { --video-color: #35c4d9; --music-color: #b38bf3; }
.media-console .card-header { margin-bottom: 5px; }
.media-console .card-header > div { min-width: 0; max-width: 100%; }
.media-console .card-header p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-deck { --deck-color: var(--video-color); border-top: 3px solid var(--deck-color); background: linear-gradient(180deg,#132633,#0b1824); }
.media-deck:nth-child(2) { --deck-color: var(--music-color); }
.media-deck h3 { color: var(--deck-color); letter-spacing: .04em; }
.media-deck .media-upload { min-width: 0; }
.media-deck .media-list { min-width: 0; min-height: 0; max-height: none; margin: 0; overflow-y: auto; border: 1px solid #45505c; border-radius: 5px; background: #040709; box-shadow: inset 0 2px 9px #000; }
.media-deck .media-item { min-width: 0; gap: 5px; padding: 3px 5px; border-bottom-color: #263741; flex-wrap: nowrap; }
.media-deck .media-item.selected { background: color-mix(in srgb,var(--deck-color) 29%,#0d1920); box-shadow: inset 3px 0 var(--deck-color); }
.media-deck .media-item button:first-child { flex: 1; min-width: 0; padding: 3px 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border: 0; background: transparent; text-align: left; color: #f1f7fa; }
.media-deck .media-item small { flex: 0 0 auto; white-space: nowrap; }
.media-deck .media-item button:not(:first-child) { flex: 0 0 auto; min-width: 0; padding: 3px 5px; font-size: 9px; }
.media-deck .media-transport, .media-deck .media-sound { min-width: 0; min-height: 31px; margin: 0; padding: 3px; border-top: 1px solid #426071; background: #1a2b37; }
.media-deck .media-transport { display: flex; align-items: center; flex-wrap: nowrap; gap: 3px; border-radius: 5px 0 0 5px; }
.media-deck .media-transport button, .media-deck .media-sound button { position: relative; flex: 0 0 25px; width: 25px; height: 25px; min-width: 25px; min-height: 25px; padding: 0; overflow: hidden; border: 1px solid #6b8592; border-radius: 50%; background: radial-gradient(circle at 32% 25%,#536d7c,#192b37 60%,#0d1922); box-shadow: inset 0 1px #ffffff6b,0 2px 3px #0009; color: #edf8fc; font-size: 0; }
.media-deck .media-transport button::before, .media-deck .media-sound button::before { display: block; font-size: 13px; line-height: 23px; text-align: center; }
#video-restart::before { content: '↶'; } #video-back::before { content: '«'; } #video-play::before, #music-play::before { content: '▶'; font-size: 11px; } #video-pause::before, #music-pause::before { content: 'Ⅱ'; } #video-stop::before, #music-stop::before { content: '■'; } #video-forward::before { content: '»'; } #music-previous::before { content: '⏮'; } #music-next::before { content: '⏭'; } #video-mute::before, #music-mute::before { content: '♪'; }
.media-deck .media-transport .is-transport-active { border-color: var(--deck-color); background: color-mix(in srgb,var(--deck-color) 50%,#172c38); }
.media-deck .media-transport input[type=range] { flex: 1 1 60px; width: auto; min-width: 40px; height: 16px; margin: 0 3px; padding: 0; accent-color: var(--deck-color); }
.media-deck .media-transport > span { flex: 0 0 65px; width: 65px; overflow: hidden; color: #c8d9df; white-space: nowrap; font-size: 10px; font-variant-numeric: tabular-nums; }
.media-deck .media-sound { display: flex; align-items: center; justify-content: flex-end; gap: 3px; border-radius: 0 5px 5px 0; }
.media-deck .media-sound label { display: flex; flex: 1 1 65px; align-items: center; gap: 2px; min-width: 0; margin: 0; }
.media-deck .media-sound label span { flex: 0 0 16px; width: 16px; overflow: hidden; font-size: 0; }
.media-deck .media-sound label span::before { content: '♫'; font-size: 13px; color: var(--deck-color); }
.media-deck .media-sound input { flex: 1; width: 100%; min-width: 30px; max-width: 65px; height: 16px; margin: 0; padding: 0; accent-color: var(--deck-color); }
.media-deck .media-sound .meter { flex: 0 0 17px; width: 17px; height: 21px; gap: 2px; }
.media-deck .media-sound .meter i { width: 6px; }
.media-deck .media-empty { display: grid; flex: 1; place-items: center; min-height: 45px; color: #8da6b4; font-size: 11px; }

.cue-card .card-header { align-items: center; }
.cue-workbench { display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; min-height: 0; flex: 1; }
.cue-workbench.has-preview { grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); }
.cue-workbench .cue-list { min-height: 0; max-height: none; overflow-y: auto; border: 1px solid #3c5a6b; border-radius: 8px; background: #081925; }
.cue-workbench .cue-preview { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: 0; margin: 0; padding: 5px; overflow: hidden; background: #081925; }
.cue-workbench .cue-preview img { display: block; max-width: 100%; max-height: calc(100% - 31px); object-fit: contain; }
.cue-workbench .cue-item { border-left: 4px solid #edbf42; border-radius: 4px; }
.cue-workbench .cue-item.mso { border-left-color: #449dea; }
.cue-workbench .cue-item.selected { background: #203c50; box-shadow: inset 0 0 0 1px #86b5d2; }
.cue-workbench .cue-item.active { box-shadow: inset 0 0 0 1px #ff6674; }
.cue-workbench .cue-item-actions .button[aria-pressed='true'] { border-color: #6dddb7; background: #145a46; color: #fff; }
.cue-workbench .cue-empty { display: grid; place-items: center; min-height: 100%; padding: 12px; color: #92acba; text-align: center; font-size: 11px; }

.visual-console { min-width: 0; min-height: 0; display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 10px; overflow: hidden; }
.visual-tabs { display: flex; flex-direction: column; align-items: stretch; gap: 5px; min-width: 0; }
.visual-tab { flex: 1; min-height: 28px; min-width: 0; padding: 5px 8px; border: 1px solid #47667a; border-radius: 6px; background: #193244; color: #c9dce6; font-weight: 750; text-align: left; cursor: pointer; }
.visual-tab[aria-selected='true'] { border-color: #72cfec; background: #1a5e7a; color: #fff; box-shadow: inset 3px 0 #8ee7ff; }
.visual-tab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.visual-panels { min-width: 0; min-height: 0; overflow: hidden; }
.visual-panel { width: 100%; height: 100%; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: auto; }
.visual-panel .card-header { margin-bottom: 4px; }
.visual-panel .card-header h2 { font-size: 13px; }
.visual-panel .card-header p { font-size: 10px; }
.visual-panel.asset-card-panel { display: grid; grid-template-columns: minmax(230px,.7fr) minmax(0,1.3fr); grid-template-rows: auto minmax(0,1fr); gap: 3px 10px; overflow: hidden; }
.visual-panel.asset-card-panel .card-header { grid-column: 1; grid-row: 1; }
.visual-panel.asset-card-panel .upload-form { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: 1fr; gap: 3px; min-width: 0; min-height: 0; margin: 0; }
.visual-panel.asset-card-panel .upload-form input, .visual-panel.asset-card-panel .upload-form button { width: 100%; min-height: 25px; padding: 3px 6px; font-size: 10px; }
.visual-panel.asset-card-panel .asset-grid { grid-column: 2; grid-row: 1 / 3; align-self: stretch; min-height: 0; max-height: none; margin: 0; padding: 3px; overflow-y: auto; border: 1px solid #3c5a6b; border-radius: 6px; background: #0b1b27; }

@media (min-width: 1360px) and (min-height: 850px) {
    body:not(.embedded-mode) .sidebar { flex-basis: 82px; height: 82px; gap: 9px; padding: 6px 11px; }
    body:not(.embedded-mode) .sidebar .panel-title { flex-basis: 105px; }
    body:not(.embedded-mode) .sidebar label:not([hidden]) { flex: 1 1 0; min-width: 125px; max-width: 260px; }
    body:not(.embedded-mode) .sidebar .output-settings { flex: 2.3 1 450px; max-width: 700px; height: 68px; }
    body:not(.embedded-mode) .workspace { height: calc(100% - 82px); grid-template-rows: minmax(0,1.30fr) minmax(0,.56fr) minmax(0,.43fr); }
    body:not(.embedded-mode) .workspace > .broadcast-console { grid-template-rows: auto minmax(0,1fr) auto; overflow: hidden; }
    body:not(.embedded-mode) .mixer-monitors { align-items: stretch; align-content: stretch; }
    body:not(.embedded-mode) .mixer-monitor { height: 100%; grid-template-rows: auto minmax(0,1fr) auto auto; }
    body:not(.embedded-mode) .mixer-monitor .mixer-stage { width: 100%; max-width: none; align-self: center; }
    body:not(.embedded-mode) .workspace > .visual-console { grid-column: 1 / -1; grid-row: 3; overflow: hidden; }
    body:not(.embedded-mode) .workspace > .media-console .media-decks { grid-template-rows: repeat(2,minmax(0,1fr)); }
    body:not(.embedded-mode) .media-deck { grid-template-columns: minmax(0,1fr) 148px; grid-template-rows: auto auto minmax(0,1fr) 31px; gap: 3px 0; }
    body:not(.embedded-mode) .media-deck h3, body:not(.embedded-mode) .media-deck .media-upload, body:not(.embedded-mode) .media-deck .media-list { grid-column: 1 / -1; }
    body:not(.embedded-mode) .media-deck h3 { grid-row: 1; }
    body:not(.embedded-mode) .media-deck .media-upload { grid-row: 2; }
    body:not(.embedded-mode) .media-deck .media-list { grid-row: 3; }
    body:not(.embedded-mode) .media-deck .media-transport { grid-column: 1; grid-row: 4; }
    body:not(.embedded-mode) .media-deck .media-sound { grid-column: 2; grid-row: 4; }
    body:not(.embedded-mode) .cue-card .cue-workbench { min-height: 0; }
}
@media (min-width: 1360px) and (max-width: 1439px) and (min-height: 850px) {
    body:not(.embedded-mode) .workspace { grid-template-rows: minmax(0,1.35fr) minmax(0,.51fr) minmax(0,.43fr); }
}
@media (max-width: 1359px), (max-height: 849px) {
    body:not(.embedded-mode) .sidebar .output-settings { grid-column: 1 / -1; }
    body:not(.embedded-mode) .workspace > .visual-console { grid-column: 1; }
    body:not(.embedded-mode) .visual-console { min-height: 180px; }
    body:not(.embedded-mode) .media-deck { display: grid; grid-template-columns: minmax(0,1fr) 150px; grid-template-rows: auto auto minmax(80px,1fr) auto; gap: 5px 0; }
    body:not(.embedded-mode) .media-deck h3, body:not(.embedded-mode) .media-deck .media-upload, body:not(.embedded-mode) .media-deck .media-list { grid-column: 1 / -1; }
    body:not(.embedded-mode) .media-deck .media-transport { grid-column: 1; }
    body:not(.embedded-mode) .media-deck .media-sound { grid-column: 2; }
}
@media (max-width: 750px) {
    .output-settings { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .output-audio { grid-column: 1 / -1; }
    body:not(.embedded-mode) .media-deck { grid-template-columns: minmax(0,1fr); }
    body:not(.embedded-mode) .media-deck .media-transport, body:not(.embedded-mode) .media-deck .media-sound { grid-column: 1; border-radius: 5px; }
    .media-deck .media-transport button { flex-basis: 23px; width: 23px; height: 23px; min-width: 23px; min-height: 23px; }
    .media-deck .media-transport > span { flex-basis: 58px; width: 58px; font-size: 9px; }
    .media-deck .media-transport input[type=range] { min-width: 25px; margin-inline: 1px; }
    .visual-console { grid-template-columns: 1fr; }
    .visual-tabs { flex-direction: row; }
    .visual-panel.asset-card-panel { grid-template-columns: 1fr; grid-template-rows: auto auto minmax(90px,1fr); }
    .visual-panel.asset-card-panel .asset-grid { grid-column: 1; grid-row: 3; }
}

body[data-web-ui-template='LIGHT'] .output-setting,
body[data-web-ui-template='LIGHT'] .visual-tab { background: #eaf1f4; color: #173345; border-color: #abc3cf; }
body[data-web-ui-template='LIGHT'] .output-setting .mixer-section-title { color: #38576b; }
body[data-web-ui-template='LIGHT'] .output-language select,
body[data-web-ui-template='LIGHT'] .output-audio select { background: #fff; color: #173345; border-color: #abc3cf; }
body[data-web-ui-template='LIGHT'] .output-theme .display-control-button { background: #d6e5ec; color: #244a60; }
body[data-web-ui-template='LIGHT'] .output-theme .display-control-active,
body[data-web-ui-template='LIGHT'] .visual-tab[aria-selected='true'] { background: #217aab; color: #fff; border-color: #2279a4; }
body[data-web-ui-template='LIGHT'] .media-deck { background: #e7f0f4; }
body[data-web-ui-template='LIGHT'] .cue-workbench .cue-list,
body[data-web-ui-template='LIGHT'] .cue-workbench .cue-preview,
body[data-web-ui-template='LIGHT'] .visual-panel.asset-card-panel .asset-grid { background: #edf3f6; border-color: #b9cbd3; }
body[data-web-ui-template='LIGHT'] .cue-workbench .cue-item.selected { background: #d9ebf2; }

/* Broadcast desk v009: monitoring uses half-size screens; the recovered space
   belongs to source operations, cue navigation, and the image library. */
.cue-workbench { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr); gap: 0; }
.cue-workbench .cue-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-content: start; gap: 6px; padding: 4px; }
.cue-workbench .cue-item { min-width: 0; min-height: 56px; padding: 4px 6px; }
.cue-workbench .cue-item > div:first-child { min-width: 0; flex: 1 1 auto; }
.cue-workbench .cue-item strong, .cue-workbench .cue-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cue-workbench .cue-item-actions { flex: 0 0 auto; align-items: center; }
.cue-card .card-header .button-row { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.cue-card .cue-pager { display: flex; justify-content: flex-end; align-items: center; min-height: 28px; margin-right: 10px; padding: 0; border: 0; background: transparent; }
.cue-card .cue-pager[hidden] { display: none; }
.cue-card .cue-page-controls { display: flex; align-items: center; gap: 8px; margin: 0; }
.cue-card .cue-page-controls .button { min-height: 25px; padding: 3px 9px; }
.cue-card .cue-page-controls span { min-width: 42px; text-align: center; font-variant-numeric: tabular-nums; }
.visual-panel.asset-card-panel .asset-grid { grid-template-columns: repeat(auto-fill,minmax(250px,1fr)); align-content: start; }
.visual-panel.asset-card-panel .asset-card { min-width: 0; padding: 7px 8px; }
.visual-panel.asset-card-panel .asset-name { margin-bottom: 2px; overflow-wrap: anywhere; font-size: 12px; }
.visual-panel.asset-card-panel .asset-meta { min-height: 0; font-size: 10px; line-height: 1.25; }
.visual-panel.asset-card-panel .asset-actions { flex-wrap: nowrap; gap: 4px; margin-top: 7px; }
.visual-panel.asset-card-panel .asset-actions .button { min-width: 0; padding: 4px 6px; font-size: 10px; white-space: nowrap; }

@media (min-width: 1360px) and (min-height: 850px) {
    body:not(.embedded-mode) .workspace { grid-template-rows: minmax(0,1.30fr) minmax(0,.50fr) minmax(0,.64fr); }
    body:not(.embedded-mode) .workspace > .broadcast-console { grid-column: 1 / 8; grid-row: 1; grid-template-rows: auto minmax(0,1fr) auto; }
    body:not(.embedded-mode) .workspace > .media-console { grid-column: 8 / -1; grid-row: 1; }
    body:not(.embedded-mode) .workspace > .cue-card { grid-column: 1 / -1; grid-row: 2; }
    body:not(.embedded-mode) .workspace > .visual-console { grid-column: 1 / -1; grid-row: 3; }
    body:not(.embedded-mode) .mixer-monitors { min-height: 0; align-content: stretch; align-items: stretch; }
    body:not(.embedded-mode) .mixer-monitor { display: grid; grid-template-columns: minmax(0,55%) minmax(0,1fr); grid-template-rows: auto minmax(0,1fr) auto; gap: 3px 8px; height: 100%; overflow: hidden; }
    body:not(.embedded-mode) .mixer-monitor-top { grid-column: 1 / -1; grid-row: 1; }
    body:not(.embedded-mode) .mixer-monitor .mixer-stage { grid-column: 1; grid-row: 2 / 4; align-self: center; justify-self: center; width: min(100%,25vh); max-width: 100%; margin: 0; }
    body:not(.embedded-mode) .mixer-monitor .mode-badge,
    body:not(.embedded-mode) .mixer-monitor .mixer-preview-name { grid-column: 2; grid-row: 2; align-self: end; min-width: 0; overflow-wrap: anywhere; }
    body:not(.embedded-mode) .mixer-monitor .mixer-monitor-meta { grid-column: 2; grid-row: 3; align-self: start; min-width: 0; overflow-wrap: anywhere; }
    body:not(.embedded-mode) .mixer-source-bank { min-height: 128px; }
    body:not(.embedded-mode) .cue-card .cue-workbench { min-height: 0; }
    body:not(.embedded-mode) .visual-panel.asset-card-panel { grid-template-columns: minmax(260px,.6fr) minmax(0,1.4fr); }
}
@media (min-width: 1360px) and (max-width: 1439px) and (min-height: 850px) {
    body:not(.embedded-mode) .workspace { grid-template-rows: minmax(0,1.30fr) minmax(0,.50fr) minmax(0,.64fr); }
}
@media (max-width: 1359px), (max-height: 849px) {
    .cue-workbench .cue-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 750px) {
    .cue-workbench .cue-list { grid-template-columns: minmax(0,1fr); }
    .cue-workbench .cue-item { min-height: 0; }
    .visual-panel.asset-card-panel .asset-actions { flex-wrap: wrap; }
}

/* Broadcast desk v010: give each control group a deliberate working width.
   Avoid stretching small forms and cue cards across the entire console. */
.output-settings {
    grid-template-columns: minmax(140px, .72fr) minmax(150px, .78fr) minmax(340px, 1.8fr);
    gap: 8px;
}
.output-setting { padding: 6px 8px; }
.output-setting .mixer-section-title { font-size: 9px; letter-spacing: .025em; }
.output-audio-controls button { max-width: 145px; padding-inline: 8px; }

.visual-panel:not(.asset-card-panel) {
    display: grid;
    grid-template-columns: minmax(250px, 390px) minmax(360px, 650px);
    grid-template-rows: auto auto;
    align-content: start;
    gap: 8px 22px;
    width: min(100%, 1080px);
    height: 100%;
    padding: 10px 12px;
    overflow: auto;
}
.visual-panel:not(.asset-card-panel) .card-header { grid-column: 1; grid-row: 1; align-self: end; margin: 0; }
.visual-panel:not(.asset-card-panel) .settings-grid {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: grid;
    grid-template-columns: minmax(190px, 1fr) minmax(190px, 260px);
    align-content: center;
    align-items: end;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 14px;
    border: 1px solid #38576a;
    border-radius: 10px;
    background: linear-gradient(145deg,#142c3d,#0d1e2a);
}
.visual-panel:not(.asset-card-panel) .settings-grid label { min-width: 0; gap: 5px; }
.visual-panel:not(.asset-card-panel) .settings-grid label select { min-width: 0; width: 100%; }
.visual-panel:not(.asset-card-panel) .settings-grid > .button { width: 100%; min-height: 36px; }
.visual-panel:not(.asset-card-panel) .selection-info {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    min-width: 0;
    max-width: 390px;
    margin: 0;
    padding: 9px 11px;
    border-left: 3px solid #3dbb91;
    border-radius: 0 6px 6px 0;
    background: #102534;
    color: #b6cfdb;
    overflow-wrap: anywhere;
}

.visual-panel.asset-card-panel {
    width: min(100%, 1200px);
    grid-template-columns: minmax(260px, 320px) minmax(0, 820px);
    grid-template-rows: auto minmax(0,1fr);
    align-content: stretch;
    gap: 8px 16px;
    padding: 8px 10px;
}
.visual-panel.asset-card-panel .card-header { align-self: end; margin: 0; }
.visual-panel.asset-card-panel .upload-form { align-content: start; gap: 7px; }
.visual-panel.asset-card-panel .upload-form input,
.visual-panel.asset-card-panel .upload-form button { min-height: 32px; padding: 6px 8px; }
.visual-panel.asset-card-panel .asset-grid {
    grid-template-columns: repeat(auto-fill,minmax(min(100%, 250px), 300px));
    align-content: start;
    justify-content: start;
    gap: 8px;
    padding: 8px;
}

.cue-workbench .cue-list {
    grid-template-columns: repeat(auto-fill,minmax(min(100%, 390px), 500px));
    justify-content: start;
    align-content: start;
    gap: 8px;
    padding: 8px;
}
.cue-workbench .cue-item { min-height: 64px; padding: 7px 9px; }
.cue-workbench .cue-item strong,
.cue-workbench .cue-item small { text-overflow: ellipsis; }

body[data-web-ui-template='LIGHT'] .visual-panel:not(.asset-card-panel) .settings-grid { background: linear-gradient(145deg,#f4f8fa,#eaf1f4); border-color: #b9cbd3; }
body[data-web-ui-template='LIGHT'] .visual-panel:not(.asset-card-panel) .selection-info { background: #edf4f6; color: #36566a; }

@media (min-width: 1360px) and (min-height: 850px) {
    body:not(.embedded-mode) .sidebar .output-settings { flex: 1 1 760px; max-width: 900px; }
}
@media (max-width: 1359px), (max-height: 849px) {
    .visual-panel:not(.asset-card-panel) { width: 100%; }
    .visual-panel.asset-card-panel { width: 100%; }
}
@media (max-width: 750px) {
    .output-settings { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .visual-panel:not(.asset-card-panel) {
        grid-template-columns: minmax(0,1fr);
        grid-template-rows: auto auto auto;
        gap: 8px;
        padding: 4px;
    }
    .visual-panel:not(.asset-card-panel) .card-header,
    .visual-panel:not(.asset-card-panel) .settings-grid,
    .visual-panel:not(.asset-card-panel) .selection-info { grid-column: 1; }
    .visual-panel:not(.asset-card-panel) .card-header { grid-row: 1; }
    .visual-panel:not(.asset-card-panel) .settings-grid { grid-row: 2; grid-template-columns: minmax(0,1fr); }
    .visual-panel:not(.asset-card-panel) .selection-info { grid-row: 3; max-width: none; }
    .visual-panel.asset-card-panel { grid-template-columns: 1fr; grid-template-rows: auto auto minmax(90px,1fr); }
    .visual-panel.asset-card-panel .asset-grid { grid-column: 1; grid-row: 3; }
    .cue-workbench .cue-list { grid-template-columns: minmax(0,1fr); }
}

/* Broadcast desk v011: readable cue library. Keep each entry's full text
   visible and use two broad cards instead of three cramped, clipped columns. */
.cue-workbench .cue-list {
    grid-template-columns: repeat(auto-fit,minmax(min(100%, 680px),1fr));
    align-content: start;
    justify-content: stretch;
    gap: 8px;
    padding: 8px;
}
.cue-workbench .cue-item {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 10px 12px;
    border-radius: 7px;
}
.cue-workbench .cue-item > div:first-child { min-width: 0; }
.cue-workbench .cue-item strong {
    display: block;
    margin-bottom: 4px;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    font-size: 12px;
    line-height: 1.3;
}
.cue-workbench .cue-item small {
    display: block;
    max-height: 5.2em;
    overflow: auto;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: pre-wrap;
    font-size: 11px;
    line-height: 1.45;
}
.cue-workbench .cue-item.mso small { color: #a9c7d9; }
.cue-workbench .cue-item.info small { color: #e3d6b5; }
.cue-workbench .cue-item-actions { flex-wrap: nowrap; gap: 6px; }
.cue-workbench .cue-item-actions .button { min-height: 30px; padding: 5px 9px; white-space: nowrap; }
.cue-workbench .cue-item.selected { background: #203c50; }
.cue-workbench .cue-item.active { box-shadow: inset 0 0 0 2px #ff6674; }
body[data-web-ui-template='LIGHT'] .cue-workbench .cue-item.info small { color: #654f1c; }
body[data-web-ui-template='LIGHT'] .cue-workbench .cue-item.mso small { color: #315b76; }
@media (max-width: 750px) {
    .cue-workbench .cue-list { grid-template-columns: minmax(0,1fr); }
    .cue-workbench .cue-item { grid-template-columns: minmax(0,1fr); align-items: start; }
    .cue-workbench .cue-item-actions { flex-wrap: wrap; }
}

/* Keep transient success/error feedback clear of the persistent header tools. */
.system-status.operation-feedback { top: 72px; right: 16px; }
@media (max-width: 760px) {
    .system-status.operation-feedback { top: auto; right: 12px; bottom: 12px; }
}

/* v013: two working rows, with libraries given usable vertical space. */
.visual-console {
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: auto minmax(0,1fr);
    gap: 12px;
}
.visual-tabs { flex-direction: row; gap: 6px; }
.visual-tab { flex: 1 1 0; min-height: 36px; text-align: center; }
.visual-panels { overflow: auto; }
.visual-panel.asset-card-panel {
    width: 100%;
    padding: 0;
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: auto auto minmax(100px,1fr);
    gap: 10px;
}
.visual-panel.asset-card-panel .card-header { grid-column: 1; grid-row: 1; }
.visual-panel.asset-card-panel .upload-form {
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: minmax(0,1fr) minmax(0,1.25fr) auto;
    align-items: center;
    gap: 6px;
}
.visual-panel.asset-card-panel .asset-grid {
    grid-column: 1;
    grid-row: 3;
    grid-template-columns: repeat(auto-fill,minmax(min(100%,210px),1fr));
    gap: 10px;
    padding: 10px;
}
.visual-panel:not(.asset-card-panel) {
    width: 100%;
    padding: 4px;
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: auto auto auto;
    gap: 14px;
}
.visual-panel:not(.asset-card-panel) .card-header { grid-column: 1; grid-row: 1; }
.visual-panel:not(.asset-card-panel) .settings-grid {
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    padding: 14px;
}
.visual-panel:not(.asset-card-panel) .selection-info { grid-column: 1; grid-row: 3; max-width: none; }
.cue-workbench .cue-list { grid-template-columns: minmax(0,1fr); scrollbar-gutter: stable; }
.cue-card .card-header { flex-wrap: wrap; gap: 8px; }
.cue-card .card-header > div { min-width: 0; }
.cue-workbench .cue-item { min-height: 66px; }
.cue-workbench .cue-item small { max-height: 4.4em; }
.cue-workbench .cue-item strong { font-size: 13px; }
.cue-workbench .cue-item small { font-size: 12px; }
.topbar-tools { flex-shrink: 0; }
.system-status.operation-feedback {
    top: auto;
    bottom: 18px;
    background: #183344;
    border-color: #64869b;
}
body[data-web-ui-template='LIGHT'] .system-status.operation-feedback { background: #f0f7fa; }

@media (min-width:1360px) and (min-height:850px) {
    body:not(.embedded-mode) .workspace {
        grid-template-rows: minmax(360px,1.12fr) minmax(260px,1fr);
        gap: 10px;
    }
    body:not(.embedded-mode) .workspace > .broadcast-console { grid-column: 1 / 8; grid-row: 1; }
    body:not(.embedded-mode) .workspace > .media-console { grid-column: 8 / -1; grid-row: 1; }
    body:not(.embedded-mode) .workspace > .cue-card { grid-column: 1 / 8; grid-row: 2; }
    body:not(.embedded-mode) .workspace > .visual-console { grid-column: 8 / -1; grid-row: 2; }
    body:not(.embedded-mode) .mixer-monitor {
        grid-template-columns: minmax(0,1fr);
        grid-template-rows: auto minmax(0,1fr) auto auto;
        gap: 4px;
        padding: 9px 12px;
    }
    body:not(.embedded-mode) .mixer-monitor .mixer-stage {
        grid-column: 1;
        grid-row: 2;
        width: min(100%,28vh);
        align-self: center;
        margin: 0;
    }
    body:not(.embedded-mode) .mixer-monitor .mode-badge,
    body:not(.embedded-mode) .mixer-monitor .mixer-preview-name {
        grid-column: 1;
        grid-row: 3;
        align-self: end;
        font-size: 12px;
    }
    body:not(.embedded-mode) .mixer-monitor .mixer-monitor-meta {
        grid-column: 1;
        grid-row: 4;
        font-size: 11px;
        line-height: 1.3;
    }
    body:not(.embedded-mode) .visual-panel.asset-card-panel { grid-template-columns: minmax(0,1fr); }
    body:not(.embedded-mode) .cue-item strong { font-size: 13px; }
    body:not(.embedded-mode) .cue-item small { font-size: 12px; }
    body:not(.embedded-mode) .cue-item-actions .button { min-height: 32px; padding: 6px 9px; font-size: 11px; }
    body:not(.embedded-mode) .media-deck { grid-template-columns: minmax(0,1fr) 112px; }
    body:not(.embedded-mode) .sidebar > label:not([hidden]) { min-width: 130px; }
    body:not(.embedded-mode) .sidebar .output-settings { min-width: 630px; }
}
@media (max-width:1359px), (max-height:849px) {
    .cue-workbench .cue-list { max-height: 360px; }
    .visual-console { min-height: 310px; }
    .visual-panel.asset-card-panel .asset-grid { max-height: 280px; }
}
@media (max-width:750px) {
    .visual-panel.asset-card-panel .upload-form,
    .visual-panel:not(.asset-card-panel) .settings-grid { grid-template-columns: minmax(0,1fr); }
    .visual-tab { font-size: 12px; padding: 6px; }
    .topbar-tools { flex-shrink: 1; }
}

/* v014: compact now-playing decks and a transactional playlist editor. */
.media-deck { position: relative; }
.media-deck h3 { min-height: 28px; padding-right: 95px; display: flex; align-items: center; }
.media-deck .playlist-open { position: absolute; top: 6px; right: 8px; min-height: 27px; padding: 4px 10px; font-size: 11px; }
.media-deck .media-list { display: flex; align-items: center; padding: 8px 12px; min-height: 40px; }
.media-current-title { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: #e2f3fa; }
.media-deck .media-transport .media-loop {
    flex: 0 0 48px; width: 48px; min-width: 48px; border-radius: 6px;
    font-size: 10px; font-weight: 800;
}

/* v015: separate player chassis, fixed audio controls and playlist modes. */
body .media-deck {
    background: linear-gradient(160deg,#263640,#10191f 65%);
    border: 1px solid #55707d;
    border-top: 3px solid var(--deck-color);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 #ffffff20,0 4px 12px #0005;
    padding: 10px;
}
body .media-deck h3 { color: var(--deck-color); letter-spacing: .08em; }
body .media-deck .media-list {
    background: linear-gradient(#030809,#0a151a);
    border: 1px solid #55707d; border-radius: 5px;
    box-shadow: inset 0 2px 8px #000; min-height: 38px;
}
body .media-deck .media-transport { gap: 5px; }
body .media-deck .media-transport > span { flex: 0 0 76px; width: 76px; }
body:not(.embedded-mode) .media-deck { grid-template-columns: minmax(0,1fr) 148px; }
body .media-deck .media-sound {
    display: grid; grid-template-columns: minmax(0,1fr) 28px 12px;
    gap: 7px; align-items: center; min-width: 0;
    padding: 4px 6px; overflow: hidden;
}
body .media-deck .media-sound label {
    display: grid; grid-template-columns: 12px minmax(0,1fr);
    gap: 3px; width: auto; min-width: 0; margin: 0;
}
body .media-deck .media-sound label input[type="range"] {
    width: 100%; min-width: 0; max-width: 100%; padding: 0; margin: 0;
}
body .media-deck .media-sound button { margin: 0; width: 28px; min-width: 28px; }
body .media-deck .media-sound .meter { width: 12px; min-width: 0; margin: 0; }
.playlist-options:not([hidden]) { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.playlist-options small { flex: 1 1 200px; line-height: 1.4; }
.playlist-options [aria-pressed="true"] { background: #7042a8; border-color: #cda4ff; color: #fff; }
@media (max-width:1500px) {
    body:not(.embedded-mode) .media-deck .media-transport { grid-column: 1 / -1; }
    body:not(.embedded-mode) .media-deck .media-sound { grid-column: 1 / -1; grid-row: auto; width: 190px; justify-self: end; }
}
.media-deck .media-transport .media-loop[aria-pressed='true'] {
    color: #fff; background: color-mix(in srgb,var(--deck-color) 48%,#152430);
    box-shadow: inset 0 0 0 1px var(--deck-color);
}
.playlist-dialog { width: min(950px,calc(100vw - 24px)); }
.playlist-dialog .cue-dialog-body { display: flex; flex-direction: column; max-height: 86vh; gap: 12px; }
.playlist-dialog p { margin: 0; font-size: 13px; line-height: 1.45; }
.playlist-items { min-height: 60px; overflow-y: auto; display: grid; align-content: start; gap: 8px; }
.playlist-row { display: grid; grid-template-columns: 25px minmax(120px,1fr) 65px auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid #38596e; border-radius: 8px; }
.playlist-row.selected { background: #1b4354; border-color: #45c2bd; }
.playlist-row input { padding: 8px; min-width: 0; }
.playlist-number { color: #8ca9bc; font-variant-numeric: tabular-nums; }
.playlist-actions,.playlist-footer { display: flex; gap: 6px; align-items: center; }
.playlist-actions .button { min-height: 32px; padding: 5px 9px; font-size: 12px; }
.playlist-actions [aria-pressed='true'] { background: #146c58; color: #fff; border-color: #52d6b5; }
.playlist-footer { justify-content: flex-end; padding-top: 12px; border-top: 1px solid #38596e; }
#playlist-error { color: #ff9da8; }
body[data-web-ui-template='LIGHT'] .playlist-row.selected { background: #d9eef1; }
body[data-web-ui-template='LIGHT'] #playlist-error { color: #a61e32; }
@media (min-width:1360px) and (min-height:850px) {
    body:not(.embedded-mode) .workspace { grid-template-rows: minmax(330px,.9fr) minmax(300px,1.1fr); }
    body:not(.embedded-mode) .mixer-monitor .mixer-stage { width: min(100%,20vh); }
}
@media (max-width:750px) {
    .playlist-row { grid-template-columns: 22px minmax(0,1fr) 50px; gap: 6px; padding: 8px; }
    .playlist-actions { grid-column: 1 / -1; justify-content: flex-end; flex-wrap: wrap; }
    .playlist-dialog .cue-dialog-body { padding: 14px; }
    .media-deck .media-transport { flex-wrap: wrap; }
}
@media (min-width:1360px) and (max-width:1500px) and (min-height:850px) {
    body:not(.embedded-mode) .workspace { grid-template-rows: minmax(470px,1.2fr) minmax(300px,.8fr); }
    body:not(.embedded-mode) .media-deck { grid-template-rows: 28px 30px minmax(38px,1fr) 32px 34px; }
}
body .media-deck .media-sound button::before { content: "🔊"; }
body .media-deck .media-sound button[aria-pressed="true"]::before { content: "🔇"; }
/* Event-owned context is information, not a second workspace selector. */
.sidebar select[hidden] { display: none !important; }
.sidebar .bound-context {
    display: block;
    min-width: 0;
    min-height: 34px;
    padding: 7px 9px;
    border-left: 2px solid #45cdb1;
    background: rgba(0, 0, 0, .12);
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* Context and editable output controls occupy separate rows at every desk width. */
body:not(.embedded-mode) .sidebar,
body.embedded-mode .sidebar {
    display: grid;
    grid-template-columns: minmax(0,1.2fr) minmax(0,1fr) minmax(0,.8fr);
    grid-template-rows: auto auto;
    align-items: start;
    align-content: start;
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
    overflow: visible;
    gap: 7px 14px;
    padding: 9px 14px;
}
body .sidebar > .panel-title,
body .sidebar > #channel-summary { display: none; }
body:not(.embedded-mode) .sidebar > label:not([hidden]),
body.embedded-mode .sidebar > label:not([hidden]) {
    min-width: 0;
    max-width: none;
    margin: 0;
    display: grid;
    gap: 3px;
    font-size: 10px;
}
body .sidebar .bound-context {
    min-height: 30px;
    padding: 5px 9px;
    line-height: 20px;
    font-size: 12px;
}
body:not(.embedded-mode) .sidebar .output-settings,
body.embedded-mode .sidebar .output-settings {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(160px,.8fr) minmax(160px,.8fr) minmax(340px,2fr);
    width: 100%;
    min-width: 0;
    max-width: none;
    height: auto;
    gap: 8px;
}
body .sidebar .output-setting { min-width: 0; }
@media (min-width:1360px) and (min-height:850px) {
    body:not(.embedded-mode) .workspace { height: auto; flex: 1 1 0; }
}
@media (max-width:760px) {
    body:not(.embedded-mode) .sidebar,
    body.embedded-mode .sidebar { grid-template-columns: minmax(0,1fr); }
    body:not(.embedded-mode) .sidebar .output-settings,
    body.embedded-mode .sidebar .output-settings { grid-template-columns: minmax(0,1fr); }
}

/* Event panels use the current mixer layout, not the legacy 230px sidebar. */
body.embedded-panel { min-width:0; height:auto; overflow:auto; }
body.embedded-panel .app-shell { height:auto; min-height:100vh; overflow:visible; }
body.embedded-panel .topbar { display:none; }
body.embedded-panel .layout { display:block; height:auto; min-height:0; }
body.embedded-panel .sidebar { width:100%; flex:none; height:auto; }
body.embedded-panel .workspace { width:100%; height:auto; min-height:0; flex:none; overflow:visible; grid-template-rows:max-content; grid-auto-rows:max-content; align-content:start; }
body.embedded-panel .workspace > .card { min-width:0; }
body.embedded-panel .mixer-monitor .mixer-stage { width:100%; max-width:240px; margin:auto; }
@media(min-width:1050px){
  body.embedded-panel .workspace { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:10px; padding:10px; }
  body.embedded-panel .workspace > .broadcast-console { grid-column:1; grid-row:1; }
  body.embedded-panel .workspace > .media-console { grid-column:2; grid-row:1; }
  body.embedded-panel .workspace > .cue-card { grid-column:1; grid-row:2; }
  body.embedded-panel .workspace > .visual-console { grid-column:2; grid-row:2; }
  body.embedded-panel .card { padding:12px; }
  body.embedded-panel .mixer-source-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:5px; }
  body.embedded-panel .mixer-source-grid .button { padding:7px; min-height:54px; font-size:11px; overflow-wrap:anywhere; }
  body.embedded-panel .media-deck { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto 40px 32px 32px; gap:6px; }
  body.embedded-panel .media-deck h3 { margin:0; min-height:26px; font-size:13px; }
  body.embedded-panel .media-upload { display:grid; grid-template-columns:minmax(90px,.8fr) minmax(140px,1.2fr) auto; gap:5px; }
  body.embedded-panel .media-upload input,body.embedded-panel .media-upload button { min-width:0; min-height:30px; padding:4px; font-size:11px; }
  body.embedded-panel .media-deck .media-list { min-height:38px; padding:6px 8px; }
  body.embedded-panel .media-deck .media-transport { grid-column:1; grid-row:4; }
  body.embedded-panel .media-deck .media-sound { grid-column:1; grid-row:5; width:180px; justify-self:end; }
}