/* Aparencia compartilhada das interfaces de reproducao.
   Nao define posicionamento, dimensoes ou comportamento responsivo. */

/* Superficies gerais */
body.cabin-pc-page,
body.mobile-control-page,
body.mobile-body,
.tv-setup {
    color: var(--kp-text);
    background-color: var(--kp-bg);
}

body.cabin-pc-page {
    --pc-dialog: var(--kp-surface);
    --pc-dialog-raised: var(--kp-surface-raised);
    --pc-dialog-line: var(--kp-border);
    --pc-dialog-text: var(--kp-text);
    --pc-dialog-muted: var(--kp-muted);
    --pc-dialog-yellow: var(--kp-yellow);
}

body.mobile-body {
    --mobile-sheet: var(--kp-surface);
    --mobile-sheet-raised: var(--kp-surface-raised);
    --mobile-line: var(--kp-border);
    --mobile-copy: var(--kp-text);
    --mobile-muted: var(--kp-muted);
    --mobile-yellow: var(--kp-yellow);
    --mobile-blue: var(--kp-blue);
}

body.cabin-pc-page .panel,
.mobile-state-card,
.now-playing-card,
.mobile-catalog-card,
.mobile-queue-card,
.mobile-role-switch,
.tv-setup-card,
.pair-card {
    border-color: var(--kp-border);
    background-color: var(--kp-surface);
    box-shadow: var(--kp-shadow);
}

/* Titulos pequenos e estados ativos usam roxo; laranja fica prioritario. */
body.cabin-pc-page :is(.dashboard-eyebrow,.panel-eyebrow),
.mobile-control-page .eyebrow,
.mobile-body :is(.mobile-modal-eyebrow,.section-eyebrow),
.tv-eyebrow,
.pair-eyebrow {
    color: var(--kp-lilac) !important;
}

body.cabin-pc-page :is(.header-action-primary,.queue-count-badge),
.mobile-control-page :is(.icon-text-button,.tone-buttons button),
.tv-toolbar button {
    border-color: var(--kp-lilac-line) !important;
}
body.cabin-pc-page .header-action-primary {
    color: var(--color-text-primary) !important;
    background: var(--color-navigation-soft) !important;
}
body.cabin-pc-page .queue-count-badge {
    color: var(--kp-text) !important;
    background: var(--kp-lilac) !important;
}
body.cabin-pc-page :is(#djStatGenre,.stat-bubble i,.pc-modal-eyebrow,.setting-item > label > i,.account-action > i:first-child,.hotkey-legend strong) {
    color: var(--kp-lilac) !important;
}
body.cabin-pc-page :is(.setting-item-featured,.diff-btn input:checked + span) {
    border-color: var(--kp-lilac-line) !important;
    background: var(--kp-lilac-soft) !important;
}
body.cabin-pc-page .diff-btn input:checked + span {
    color: var(--kp-text) !important;
}

/* Acoes primarias */
body.cabin-pc-page :is(.btn-main,.btn-song-play),
.mobile-control-page :is(.primary-action,.main-control,.mobile-dj-dock-play,.sheet-primary-action),
.tv-primary-button,
.tv-start-playback,
.pair-primary {
    border-color: transparent !important;
    color: #0E0A14 !important;
    background: var(--kp-yellow) !important;
    box-shadow: none !important;
}

/* Cabine PC */
body.cabin-pc-page {
    background: radial-gradient(circle at 24% -16%, rgba(138, 63, 252, .13), transparent 34%), radial-gradient(circle at 100% 100%, rgba(255, 79, 216, .08), transparent 30%), var(--color-bg-canvas) !important;
}
body.cabin-pc-page .panel {
    background: rgba(23, 17, 31, .94) !important;
}
body.cabin-pc-page :is(.song-item,.queue-item,.host-action-card) {
    border-color: transparent !important;
    background: rgba(255, 255, 255, .025) !important;
}
body.cabin-pc-page :is(.song-item:hover,.queue-item:hover,.host-action-card:hover) {
    border-color: var(--kp-blue-line) !important;
    background: var(--kp-blue-soft) !important;
}
body.cabin-pc-page .queue-item.is-current {
    border-color: var(--kp-lilac-line) !important;
    background: var(--kp-lilac-soft) !important;
}
body.cabin-pc-page .queue-item.is-current .rank {
    color: var(--kp-text) !important;
    background: var(--kp-lilac) !important;
}
body.cabin-pc-page .btn-song-queue,
body.cabin-pc-page :is(.btn-control,.btn-mini) {
    border-color: var(--kp-border) !important;
    color: var(--kp-text-soft) !important;
    background: rgba(255, 255, 255, .035) !important;
}
body.cabin-pc-page :is(.btn-control,.btn-mini):hover {
    border-color: var(--kp-blue-line) !important;
    color: var(--kp-text) !important;
    background: var(--kp-blue-soft) !important;
}
body.cabin-pc-page .controls.compact-panel {
    border-color: var(--kp-border-strong) !important;
    background: rgba(14, 10, 20, .95) !important;
    box-shadow: var(--kp-shadow) !important;
}
body.cabin-pc-page :is(.tone-control,.volume-control) {
    border-color: var(--kp-border) !important;
    background: rgba(255, 255, 255, .03) !important;
}
body.cabin-pc-page .progress-bar-inner {
    background: linear-gradient(90deg, var(--kp-blue), var(--kp-lilac)) !important;
}
body.cabin-pc-page .vu-meter-bar {
    background: linear-gradient(0deg, var(--kp-lilac), var(--kp-blue)) !important;
}

/* Informacoes e fila publicas: PC, fullscreen e segunda tela */
:is(.cabin-pc-page,#audienceStage) .floating-info-box {
    border-color: var(--kp-lilac-line) !important;
    color: var(--kp-text) !important;
    background: var(--kp-surface-overlay) !important;
    box-shadow: var(--kp-shadow) !important;
}
:is(.cabin-pc-page,#audienceStage) .floating-info-box .info-label {
    color: var(--kp-lilac) !important;
}
:is(.cabin-pc-page,#audienceStage) .floating-info-box p {
    color: var(--kp-text-soft) !important;
}
:is(.cabin-pc-page,#audienceStage) .fs-queue-box {
    border-color: var(--kp-lilac-line) !important;
    color: var(--kp-text) !important;
    background: var(--kp-surface-overlay) !important;
    box-shadow: var(--kp-shadow) !important;
}
:is(.cabin-pc-page,#audienceStage) :is(.fs-label-header,.fs-col-pc.current .fs-rank-pc) {
    color: var(--kp-lilac) !important;
}
:is(.cabin-pc-page,#audienceStage) .fs-col-pc.current {
    border-color: var(--kp-lilac-line) !important;
    background: var(--kp-lilac-soft) !important;
}
:is(.cabin-pc-page,#audienceStage) .fs-divider-v-pc {
    background: rgba(138, 63, 252, .28) !important;
}
:is(.cabin-pc-page,#audienceStage) .qr-fullscreen-box {
    border-color: var(--kp-blue-line) !important;
    color: var(--kp-text) !important;
    background: var(--kp-surface-overlay) !important;
}
:is(.cabin-pc-page,#audienceStage) :is(.qr-party-name,.qr-mobile-link) {
    color: var(--kp-blue) !important;
}
:is(.cabin-pc-page,#audienceStage) .qr-fs-room-code {
    border-color: var(--kp-lilac-line) !important;
    background: var(--kp-lilac-soft) !important;
}

/* Palco publico da cabine: fullscreen e segunda tela compartilham a mesma
   temperatura de cor sem interferir no enquadramento do video. */
:is(
    body.cabin-pc-page #playerContainer:fullscreen,
    body.cabin-pc-page #playerContainer.is-native-fullscreen,
    #audienceStage,
    #audienceStage #playerContainer
) {
    background:
        radial-gradient(circle at 50% -12%, rgba(138, 63, 252, .14), transparent 38%),
        radial-gradient(circle at 88% 88%, rgba(255, 79, 216, .055), transparent 30%),
        var(--color-bg-deep, #09060D) !important;
}
:is(
    body.cabin-pc-page #playerContainer:fullscreen,
    body.cabin-pc-page #playerContainer.is-native-fullscreen,
    #audienceStage
) :is(#player,video) {
    background-color: transparent !important;
}

/* Entrada, suspense e nota da cabine PC e da segunda tela. */
:is(.cabin-pc-page,#audienceStage) :is(.coming-next-overlay,.score-suspense-overlay,.score-final-overlay) {
    --show-yellow: var(--kp-yellow);
    --show-blue: var(--kp-blue);
    background:
        radial-gradient(circle at 50% 38%, rgba(138, 63, 252, .2), transparent 43%),
        radial-gradient(circle at 72% 68%, rgba(255, 79, 216, .08), transparent 34%),
        var(--color-bg-deep, #09060D) !important;
}
:is(.cabin-pc-page,#audienceStage) :is(.cn-badge,.sf-badge) {
    border-color: var(--color-action-primary-line) !important;
    color: var(--color-action-primary) !important;
    background: var(--color-action-primary-soft) !important;
}
:is(.cabin-pc-page,#audienceStage) .cn-stage-glow {
    background:
        radial-gradient(circle, rgba(138, 63, 252, .22), transparent 58%),
        radial-gradient(circle at 58% 48%, rgba(255, 79, 216, .08), transparent 68%) !important;
}
:is(.cabin-pc-page,#audienceStage) .cn-singer-name {
    text-shadow: 0 0 42px rgba(138, 63, 252, .3), 0 0 72px rgba(255, 79, 216, .12) !important;
}
:is(.cabin-pc-page,#audienceStage) .cn-bar {
    --show-bar-peak: var(--color-navigation-hover);
    background: var(--color-navigation) !important;
}
:is(.cabin-pc-page,#audienceStage) .cn-bar:nth-child(2),
:is(.cabin-pc-page,#audienceStage) .cn-bar:nth-child(6) {
    --show-bar-peak: var(--color-social-hover);
    background: var(--color-social) !important;
}
:is(.cabin-pc-page,#audienceStage) .cn-bar:nth-child(4) {
    --show-bar-peak: var(--color-action-primary-hover);
    background: var(--color-action-primary) !important;
}
:is(.cabin-pc-page,#audienceStage) .sf-ticker-value {
    color: var(--color-text-primary) !important;
    text-shadow: 0 0 48px rgba(138, 63, 252, .34), 0 0 76px rgba(255, 79, 216, .12) !important;
}
:is(.cabin-pc-page,#audienceStage) .sf-score-value {
    color: var(--color-text-primary) !important;
    text-shadow: 0 0 42px rgba(255, 122, 0, .24), 0 0 80px rgba(138, 63, 252, .18) !important;
}

/* A TV conserva sua propria composicao, usando os mesmos papeis semanticos. */
:is(.tv-show-overlay,.tv-score) {
    --show-yellow: var(--kp-yellow);
    --show-blue: var(--kp-blue);
    background: var(--kp-stage-gradient) !important;
}
:is(.tv-show-badge,.tv-score > span) {
    border-color: var(--kp-lilac-line) !important;
    color: var(--kp-lilac) !important;
    background: var(--kp-lilac-soft) !important;
}
.tv-show-glow {
    background: radial-gradient(circle, rgba(138, 63, 252, .2), transparent 66%) !important;
}
.tv-equalizer i {
    background: var(--kp-blue) !important;
}

/* Rankings e destaques */
:is(.cabin-pc-page,#audienceStage) .ranking-ticker,
.tv-ranking-ticker {
    border-color: var(--kp-lilac-line) !important;
    background: rgba(14, 10, 20, .92) !important;
}
:is(.cabin-pc-page,#audienceStage) :is(.ranking-ticker-card-title,.ranking-ticker-card-title i),
.tv-ranking-ticker span {
    color: var(--kp-lilac) !important;
}
:is(.cabin-pc-page,#audienceStage) .ranking-ticker-value,
.tv-ranking-ticker small {
    color: var(--kp-blue) !important;
}
:is(.cabin-pc-page,#audienceStage) .party-ranking-board {
    color: var(--kp-text) !important;
    background: var(--kp-stage-gradient) !important;
}
:is(.cabin-pc-page,#audienceStage) :is(.party-ranking-board-heading span,.party-ranking-board > h3) {
    color: var(--kp-lilac) !important;
}
:is(.cabin-pc-page,#audienceStage) :is(.party-ranking-podium li,.party-ranking-highlight),
.tv-ranking li {
    border-color: var(--kp-border) !important;
    background: rgba(23, 17, 31, .92) !important;
}
:is(.cabin-pc-page,#audienceStage) .party-ranking-podium li:first-child,
.tv-ranking li:first-child {
    border-color: var(--kp-yellow-line) !important;
    background: linear-gradient(100deg, var(--kp-yellow-soft), rgba(23, 17, 31, .94)) !important;
}
:is(.cabin-pc-page,#audienceStage) :is(.party-ranking-podium b,.party-ranking-highlight > i),
.tv-ranking li b {
    color: var(--kp-lilac) !important;
}
:is(.cabin-pc-page,#audienceStage) :is(.party-ranking-podium span,.party-ranking-highlight > small),
.tv-ranking li span {
    color: var(--kp-blue) !important;
}

/* A segunda tela replica a hierarquia cromatica efetiva do fullscreen da
   cabine. Somente destaques equivalentes recebem o laranja prioritario. */
#audienceStage .floating-info-box .info-label,
#audienceStage :is(.fs-label-header,.fs-col-pc.current .fs-rank-pc),
#audienceStage :is(.qr-party-name,.qr-mobile-link),
#audienceStage :is(.ranking-ticker-card-title,.ranking-ticker-card-title i),
#audienceStage :is(.party-ranking-board-heading span,.party-ranking-board > h3),
#audienceStage :is(.party-ranking-podium b,.party-ranking-highlight > i) {
    color: var(--kp-yellow) !important;
}
#audienceStage .fs-queue-box,
#audienceStage .qr-fullscreen-box,
#audienceStage .ranking-ticker {
    border-color: var(--kp-yellow-line) !important;
}
#audienceStage .fs-col-pc.current {
    border-color: var(--kp-yellow-line) !important;
    background: var(--kp-yellow-soft) !important;
}
#audienceStage :is(.ranking-ticker-value,.party-ranking-podium span,.party-ranking-highlight > small) {
    color: var(--kp-text-soft) !important;
}

/* Rodape publico ampliado para leitura em projetores. A mesma geometria vale
   para a cabine em tela cheia e para a segunda tela. */
:is(
    body.cabin-pc-page #playerContainer:fullscreen,
    body.cabin-pc-page #playerContainer.is-native-fullscreen,
    #audienceStage #playerContainer
) {
    --public-footer-height: 56px;
    --public-footer-gap: 12px;
}
:is(
    body.cabin-pc-page #playerContainer:fullscreen,
    body.cabin-pc-page #playerContainer.is-native-fullscreen,
    #audienceStage #playerContainer
) .ranking-ticker {
    bottom: 0 !important;
    height: var(--public-footer-height) !important;
}
:is(
    body.cabin-pc-page #playerContainer:fullscreen,
    body.cabin-pc-page #playerContainer.is-native-fullscreen,
    #audienceStage #playerContainer
) :is(.ranking-ticker-viewport,.ranking-ticker-track,.ranking-ticker-card) {
    height: var(--public-footer-height) !important;
}
:is(
    body.cabin-pc-page #playerContainer:fullscreen,
    body.cabin-pc-page #playerContainer.is-native-fullscreen,
    #audienceStage #playerContainer
) .ranking-ticker-card {
    padding-inline: clamp(22px, 2vw, 34px) !important;
}
:is(
    body.cabin-pc-page #playerContainer:fullscreen,
    body.cabin-pc-page #playerContainer.is-native-fullscreen,
    #audienceStage #playerContainer
) :is(.ranking-ticker-card-title,.ranking-ticker-card-title i) {
    font-size: clamp(12px, .82vw, 15px) !important;
}
:is(
    body.cabin-pc-page #playerContainer:fullscreen,
    body.cabin-pc-page #playerContainer.is-native-fullscreen,
    #audienceStage #playerContainer
) .ranking-ticker-leader {
    margin-left: 11px !important;
    font-size: clamp(16px, 1.08vw, 20px) !important;
}
:is(
    body.cabin-pc-page #playerContainer:fullscreen,
    body.cabin-pc-page #playerContainer.is-native-fullscreen,
    #audienceStage #playerContainer
) .ranking-ticker-value {
    margin-left: 9px !important;
    font-size: clamp(12px, .82vw, 15px) !important;
}
:is(
    body.cabin-pc-page #playerContainer:fullscreen,
    body.cabin-pc-page #playerContainer.is-native-fullscreen,
    #audienceStage #playerContainer
) .progress-container {
    bottom: var(--public-footer-height) !important;
    height: 7px !important;
}
:is(
    body.cabin-pc-page #playerContainer:fullscreen,
    body.cabin-pc-page #playerContainer.is-native-fullscreen,
    #audienceStage #playerContainer
) .progress-time-display {
    bottom: calc(var(--public-footer-height) + var(--public-footer-gap)) !important;
    font-size: clamp(.9rem, 1vw, 1.12rem) !important;
}
:is(
    body.cabin-pc-page #playerContainer:fullscreen,
    body.cabin-pc-page #playerContainer.is-native-fullscreen,
    #audienceStage #playerContainer
) .compact-controls-wrapper {
    bottom: calc(var(--public-footer-height) + 10px) !important;
}
:is(
    body.cabin-pc-page #playerContainer:fullscreen,
    body.cabin-pc-page #playerContainer.is-native-fullscreen,
    #audienceStage #playerContainer
) .qr-fullscreen-box {
    bottom: calc(var(--public-footer-height) + var(--public-footer-gap)) !important;
}
:is(
    body.cabin-pc-page #playerContainer:fullscreen,
    body.cabin-pc-page #playerContainer.is-native-fullscreen,
    #audienceStage #playerContainer
) .qr-fullscreen-box .qr-fs-label {
    font-size: clamp(13px, .9vw, 16px) !important;
}

/* A fila precisa manter proporcao visual mesmo quando o projetor informa uma
   resolucao modesta. Os limites minimos impedem que o texto encolha junto com
   os pixels logicos; o componente ainda preserva a area do QR Code. */
:is(
    body.cabin-pc-page #playerContainer:fullscreen,
    body.cabin-pc-page #playerContainer.is-native-fullscreen,
    #audienceStage #playerContainer
) .fs-queue-box {
    top: 4px !important;
    left: 50% !important;
    right: auto !important;
    width: min(1100px, calc(100% - 2 * clamp(210px, 22vw, 340px))) !important;
    min-width: 0 !important;
    max-width: 1100px !important;
    box-sizing: border-box !important;
    padding: 7px clamp(18px, 1.8vw, 30px) 9px !important;
    transform: translateX(-50%) !important;
}
:is(
    body.cabin-pc-page #playerContainer:fullscreen,
    body.cabin-pc-page #playerContainer.is-native-fullscreen,
    #audienceStage #playerContainer
) .fs-label-header {
    margin-bottom: 4px !important;
    font-size: clamp(12px, .82vw, 15px) !important;
    letter-spacing: clamp(2px, .2vw, 4px) !important;
}
:is(
    body.cabin-pc-page #playerContainer:fullscreen,
    body.cabin-pc-page #playerContainer.is-native-fullscreen,
    #audienceStage #playerContainer
) .fs-row-container {
    gap: clamp(14px, 1.4vw, 24px) !important;
}
:is(
    body.cabin-pc-page #playerContainer:fullscreen,
    body.cabin-pc-page #playerContainer.is-native-fullscreen,
    #audienceStage #playerContainer
) .fs-col-pc {
    min-width: 0;
    gap: clamp(8px, .7vw, 12px) !important;
}
:is(
    body.cabin-pc-page #playerContainer:fullscreen,
    body.cabin-pc-page #playerContainer.is-native-fullscreen,
    #audienceStage #playerContainer
) .fs-col-pc.current {
    padding: 6px 12px !important;
}
:is(
    body.cabin-pc-page #playerContainer:fullscreen,
    body.cabin-pc-page #playerContainer.is-native-fullscreen,
    #audienceStage #playerContainer
) .fs-col-pc.current .fs-name-pc {
    font-size: clamp(18px, 1.22vw, 26px) !important;
}
:is(
    body.cabin-pc-page #playerContainer:fullscreen,
    body.cabin-pc-page #playerContainer.is-native-fullscreen,
    #audienceStage #playerContainer
) .fs-col-pc:not(.current) .fs-name-pc {
    font-size: clamp(15px, 1vw, 21px) !important;
}
:is(
    body.cabin-pc-page #playerContainer:fullscreen,
    body.cabin-pc-page #playerContainer.is-native-fullscreen,
    #audienceStage #playerContainer
) .fs-song-pc {
    max-width: clamp(150px, 14vw, 280px) !important;
    font-size: clamp(12px, .82vw, 17px) !important;
    line-height: 1.25 !important;
}
:is(
    body.cabin-pc-page #playerContainer:fullscreen,
    body.cabin-pc-page #playerContainer.is-native-fullscreen,
    #audienceStage #playerContainer
) .fs-rank-pc {
    font-size: clamp(10px, .68vw, 13px) !important;
}
:is(
    body.cabin-pc-page #playerContainer:fullscreen,
    body.cabin-pc-page #playerContainer.is-native-fullscreen,
    #audienceStage #playerContainer
) .fs-divider-v-pc {
    height: 34px !important;
}

/* Reserva espaco real para a marca e o slogan. A segunda tela decide
   quantos itens mostrar pela propria largura, independente da cabine. */
:is(body.cabin-pc-page #playerContainer:fullscreen, body.cabin-pc-page #playerContainer.is-native-fullscreen, #audienceStage #playerContainer) .video-overlay-banner {
    box-sizing: border-box;
    padding-inline: clamp(16px, 3vw, 50px);
}
:is(body.cabin-pc-page #playerContainer:fullscreen, body.cabin-pc-page #playerContainer.is-native-fullscreen, #audienceStage #playerContainer) .banner-left img {
    width: clamp(165px, 16vw, 260px);
    height: auto;
    max-height: 64px;
    object-fit: contain;
}
:is(body.cabin-pc-page #playerContainer:fullscreen, body.cabin-pc-page #playerContainer.is-native-fullscreen, #audienceStage #playerContainer) .banner-right {
    max-width: clamp(150px, 16vw, 260px);
}
:is(body.cabin-pc-page #playerContainer:fullscreen, body.cabin-pc-page #playerContainer.is-native-fullscreen, #audienceStage #playerContainer) .banner-right span {
    font-size: clamp(12px, 1.1vw, 18px);
}
:is(body.cabin-pc-page #playerContainer:fullscreen, body.cabin-pc-page #playerContainer.is-native-fullscreen, #audienceStage #playerContainer) .fs-row-container { gap: 10px !important; }
:is(body.cabin-pc-page #playerContainer:fullscreen, body.cabin-pc-page #playerContainer.is-native-fullscreen, #audienceStage #playerContainer) .fs-col-pc { flex: 1 1 0; opacity: 1; }
:is(body.cabin-pc-page #playerContainer:fullscreen, body.cabin-pc-page #playerContainer.is-native-fullscreen, #audienceStage #playerContainer) .fs-col-pc.current { flex: 1.25 1 0; }
:is(body.cabin-pc-page #playerContainer:fullscreen, body.cabin-pc-page #playerContainer.is-native-fullscreen, #audienceStage #playerContainer) .fs-info-pc { min-width: 0; flex: 1; }
:is(body.cabin-pc-page #playerContainer:fullscreen, body.cabin-pc-page #playerContainer.is-native-fullscreen, #audienceStage #playerContainer) :is(.fs-name-pc, .fs-song-pc) {
    max-width: 100% !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap !important;
}
:is(body.cabin-pc-page #playerContainer:fullscreen, body.cabin-pc-page #playerContainer.is-native-fullscreen, #audienceStage #playerContainer) .fs-col-pc:not(.current) .fs-name-pc { color: #e0dce8 !important; }
:is(body.cabin-pc-page #playerContainer:fullscreen, body.cabin-pc-page #playerContainer.is-native-fullscreen, #audienceStage #playerContainer) .fs-divider-v-pc { flex: 0 0 1px; }
:is(body.cabin-pc-page #playerContainer:fullscreen, body.cabin-pc-page #playerContainer.is-native-fullscreen, #audienceStage #playerContainer) .fs-row-container > :nth-child(n+6) { display: none !important; }
@media (min-width: 1800px) {
    :is(body.cabin-pc-page #playerContainer:fullscreen, body.cabin-pc-page #playerContainer.is-native-fullscreen, #audienceStage #playerContainer) .fs-row-container > :nth-child(6),
    :is(body.cabin-pc-page #playerContainer:fullscreen, body.cabin-pc-page #playerContainer.is-native-fullscreen, #audienceStage #playerContainer) .fs-row-container > :nth-child(7) { display: flex !important; }
}
@media (max-width: 1100px) {
    :is(body.cabin-pc-page #playerContainer:fullscreen, body.cabin-pc-page #playerContainer.is-native-fullscreen, #audienceStage #playerContainer) .fs-row-container > :nth-child(n+4) { display: none !important; }
}
@media (max-width: 900px) {
    :is(body.cabin-pc-page #playerContainer:fullscreen, body.cabin-pc-page #playerContainer.is-native-fullscreen, #audienceStage #playerContainer) .fs-queue-box {
        top: 84px !important;
        width: calc(100% - 24px) !important;
    }
}

/* TV / Android TV */
.tv-setup {
    background: radial-gradient(circle at 18% 0, rgba(138, 63, 252, .15), transparent 32%), radial-gradient(circle at 90% 80%, rgba(255, 122, 0, .08), transparent 28%), var(--color-bg-canvas) !important;
}
.tv-setup-card {
    background: linear-gradient(150deg, rgba(33, 23, 43, .97), rgba(14, 10, 20, .98)) !important;
}
.tv-stage {
    color: var(--kp-text);
}
.tv-backdrop {
    background: var(--kp-stage-gradient) !important;
}
.tv-now-playing,
.tv-queue-panel {
    border-color: var(--kp-border) !important;
    background: var(--kp-surface-overlay) !important;
}
.tv-now-playing > span,
.tv-queue-panel > p,
.tv-queue-panel li:first-child span {
    color: var(--kp-lilac) !important;
}
.tv-stage .tv-connection {
    color: var(--color-state-success) !important;
}
.tv-stage .tv-connection.is-offline {
    color: var(--color-state-danger) !important;
}
.tv-stage :is(.tv-pairing-box span,.tv-floating-message strong) {
    color: var(--color-navigation) !important;
}
.tv-progress span {
    background: linear-gradient(90deg, var(--kp-blue), var(--kp-lilac)) !important;
}
.tv-room-label,
.tv-pairing-box {
    border-color: var(--kp-blue-line) !important;
    background: var(--kp-blue-soft) !important;
}

/* Controle movel do DJ */
.mobile-control-page {
    background: radial-gradient(circle at 20% -10%, rgba(138, 63, 252, .15), transparent 34%), radial-gradient(circle at 100% 40%, rgba(255, 79, 216, .07), transparent 32%), var(--color-bg-canvas) !important;
}
.mobile-control-header,
.mobile-dj-dock {
    border-color: var(--kp-border) !important;
    background: rgba(14, 10, 20, .94) !important;
}
.now-playing-card,
.mobile-catalog-card,
.mobile-queue-card {
    background: rgba(23, 17, 31, .94) !important;
}
.now-playing-label,
.mobile-section-heading > span,
.mobile-mode-note {
    color: var(--kp-muted) !important;
}
.mobile-adjustments input[type='range'] {
    accent-color: var(--kp-blue) !important;
}
.mobile-playback-controls button:not(.main-control),
.tone-buttons button,
.mobile-queue-actions button,
.mobile-dj-dock button:not(.mobile-dj-dock-play) {
    border-color: var(--kp-border) !important;
    color: var(--kp-text-soft) !important;
    background: rgba(255, 255, 255, .035) !important;
}
.mobile-playback-controls button:not(.main-control):active,
.tone-buttons button:active {
    border-color: var(--kp-blue-line) !important;
    background: var(--kp-blue-soft) !important;
}
.mobile-queue-list li.is-current .mobile-queue-position,
.mobile-dj-dock-song span {
    color: var(--kp-lilac) !important;
}
.mobile-queue-actions .queue-next-action,
.sheet-next-action {
    border-color: var(--kp-blue-line) !important;
    color: #dce9ff !important;
    background: var(--kp-blue-soft) !important;
}
.mobile-role-switch,
.mobile-dj-dock a {
    border-color: var(--kp-lilac-line) !important;
    background: var(--kp-lilac-soft) !important;
}
.mobile-role-switch a,
.mobile-dj-dock a {
    color: #E6D9FF !important;
}

/* Area do cantor: preserva estrutura e adota a hierarquia oficial. */
.mobile-body {
    --bg: var(--kp-bg);
    --accent: var(--kp-lilac);
    --accent2: var(--kp-blue);
    --blue: var(--kp-blue);
    --purple: var(--kp-lilac);
    --glass: rgba(23, 17, 31, .8);
    --border: var(--kp-border);
    color: var(--kp-text) !important;
    background-color: var(--kp-bg) !important;
}
.mobile-body :is(.btn-confirm,.btn-primary,.mobile-primary-action) {
    color: #0E0A14 !important;
    background: var(--kp-yellow) !important;
}
.mobile-body :is(.tab-btn.active,.active-tab,.selected,.is-active) {
    border-color: var(--kp-lilac-line) !important;
}
.mobile-body :is(.reactions-row,.interaction-section) :is(button,.interaction-chip) {
    border-color: var(--color-social-line) !important;
}
.mobile-body :is(.reaction-btn,.interaction-chip-icon) {
    color: var(--color-social) !important;
}
.mobile-body #btnSendMobileMsg {
    color: var(--color-text-inverse) !important;
    background: var(--color-social) !important;
}

/* Interacoes, desafios e dialogos compartilhados */
:is(.challenge-launch,.challenge-btn,.party-button) {
    border-color: var(--color-social-line) !important;
    color: var(--kp-text) !important;
    background: var(--color-social-soft) !important;
}
.challenge-launch {
    background: linear-gradient(110deg, rgba(255, 79, 216, .16), rgba(138, 63, 252, .08)) !important;
}
:is(.challenge-dialog,.party-dialog) {
    border-color: var(--kp-lilac-line) !important;
    color: var(--kp-text) !important;
    background: linear-gradient(150deg, var(--kp-surface-raised), var(--kp-bg-deep)) !important;
    box-shadow: 0 28px 90px rgba(0, 0, 0, .48) !important;
}
:is(.challenge-dialog,.party-dialog)::backdrop {
    background: rgba(8, 10, 15, .8) !important;
}
:is(.challenge-dialog,.party-dialog) :is(input,textarea,select) {
    border-color: var(--kp-border-strong) !important;
    color: var(--kp-text) !important;
    background: var(--kp-bg-deep) !important;
}
:is(.challenge-card,.party-card) {
    border-color: var(--kp-border) !important;
    background: rgba(255, 255, 255, .025) !important;
}
:is(.challenge-muted,.party-muted) {
    color: var(--kp-muted) !important;
}
:is(.challenge-feedback,.challenge-counter,.challenge-hero,.challenge-announcement) {
    color: var(--color-social) !important;
}
.challenge-announcement,
.challenge-note {
    border-color: var(--color-social-line) !important;
    background: var(--color-social-soft) !important;
}
.challenge-screen-bar {
    border-color: var(--kp-lilac-line) !important;
    color: var(--kp-text) !important;
    background: rgba(14, 10, 20, .95) !important;
}
.interaction-chip,
.host-action-card {
    border-color: var(--color-social-line) !important;
    color: var(--kp-text) !important;
    background: linear-gradient(135deg, rgba(255, 79, 216, .13), rgba(138, 63, 252, .08)) !important;
    box-shadow: none !important;
}
.interaction-chip-icon,
.host-action-card .interaction-chip-icon {
    color: var(--color-social) !important;
    filter: none !important;
}
.voice-playback-overlay {
    border-color: var(--color-social-line) !important;
    background: linear-gradient(145deg, var(--kp-surface-overlay), rgba(15, 18, 25, .96)) !important;
}
.voice-playback-avatar,
.voice-playback-bars i {
    background: linear-gradient(135deg, var(--color-social), var(--color-navigation)) !important;
}
.voice-playback-label {
    color: var(--color-social) !important;
}

/* Selecao de modo e telas de acesso */
.mode-entry-page,
.mobile-control-page {
    color: var(--kp-text) !important;
    background-color: var(--kp-bg) !important;
}
.mode-card {
    border-color: var(--kp-border) !important;
    background: linear-gradient(145deg, rgba(33, 23, 43, .94), rgba(14, 10, 20, .94)) !important;
}
.mode-card-primary {
    border-color: var(--kp-lilac-line) !important;
}
.mode-card::after {
    background: var(--kp-blue) !important;
}
.mode-card-primary::after {
    background: var(--kp-lilac) !important;
}
.mode-icon,
.detail-icon,
.mode-action,
.singer-label {
    color: var(--kp-lilac) !important;
}
.singer-callout {
    border-color: var(--kp-lilac-line) !important;
    background: var(--kp-lilac-soft) !important;
}
.singer-callout a {
    border-color: var(--kp-lilac-line) !important;
}

/* Segunda tela */
#audienceStatus {
    color: var(--kp-text) !important;
    background: var(--kp-bg) !important;
}
#audienceToolbar button {
    border-color: var(--kp-blue-line) !important;
    color: var(--kp-text) !important;
    background: var(--kp-surface-overlay) !important;
}
.audience-ambient {
    color: var(--kp-text) !important;
    background: var(--kp-stage-gradient) !important;
}

/* Pareamento */
body:has(.pair-shell) {
    color: var(--kp-text) !important;
    background: radial-gradient(circle at 15% 0, rgba(138, 63, 252, .15), transparent 34%), radial-gradient(circle at 90% 90%, rgba(255, 122, 0, .08), transparent 30%), var(--kp-bg) !important;
}
body:has(.pair-shell) .pair-card {
    background: linear-gradient(150deg, rgba(33, 23, 43, .97), rgba(14, 10, 20, .98)) !important;
}
.pair-form input:focus,
.mobile-auth-form input:focus,
.room-code-form input:focus,
.mobile-catalog-search input:focus,
.mobile-singer-input input:focus,
.tv-form input:focus {
    border-color: var(--kp-blue) !important;
    box-shadow: var(--kp-focus) !important;
}

/* Foco consistente sem neon exagerado. */
:where(.cabin-pc-page,.mobile-control-page,.mobile-body,.tv-setup,body:has(.pair-shell)) :is(button,a,input,select,textarea):focus-visible {
    outline: 2px solid var(--kp-blue) !important;
    outline-offset: 2px;
    box-shadow: var(--kp-focus);
}