/* Audio Nexus Codec IP — visual próprio (broadcast escuro). Fontes abertas (OFL): IBM Plex Sans/Mono, Barlow
   Condensed. Tudo pensado para mouse e para tela de toque: alvos de 44 px ou mais, nada que dependa de passar o
   mouse por cima. */
@font-face { font-family: "Plex"; src: url("fontes/IBMPlexSans-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex"; src: url("fontes/IBMPlexSans-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Plex"; src: url("fontes/IBMPlexSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Plex"; src: url("fontes/IBMPlexSans-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "PlexMono"; src: url("fontes/IBMPlexMono-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "PlexMono"; src: url("fontes/IBMPlexMono-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Cond"; src: url("fontes/BarlowCondensed-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Cond"; src: url("fontes/BarlowCondensed-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --fundo: #090B0E; --painel: #0E1115; --cartao: #13171D; --cartao-2: #161B22; --botao: #1A1F27;
  --linha: #1F252E; --linha-2: #222832; --borda: #2A313C;
  --texto: #E9EDF2; --texto-2: #C9D1DB; --suave: #A3ADBB; --fraco: #8B96A6;
  --azul: #5AA2FF; --azul-bt: #2367D1; --azul-fundo: rgba(90,162,255,.14);
  --ar: #D9343B; --ar-texto: #FF6B6F; --ar-fundo: #1A0D0E;
  --ambar: #F0B232; --ambar-texto: #1A1300; --verde: #3CCB8A; --verde-fundo: #0F1A15;
  --raio: 14px;
  --fonte: "Plex", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "PlexMono", ui-monospace, Consolas, monospace;
  --cond: "Cond", "Plex", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fundo); color: var(--texto); font-family: var(--fonte); font-size: 15px;
  line-height: 1.45; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
a { color: var(--azul); }
a:hover { color: #8CC0FF; }
h1, h2, h3 { margin: 0; line-height: 1.2; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
.mono { font-family: var(--mono); }
.cond { font-family: var(--cond); letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
.suave { color: var(--suave); }
.fraco { color: var(--fraco); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* ------------------------------------------------------------------ marca */
.cx-marca { display: flex; align-items: center; gap: 12px; color: var(--texto); text-decoration: none; }
.cx-marca svg { flex: none; }
.cx-marca .t1 { font-family: var(--cond); font-weight: 700; font-size: 12px; letter-spacing: .18em; color: var(--suave); text-transform: uppercase; }
.cx-marca .t2 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.cx-marca span { display: flex; flex-direction: column; line-height: 1.15; }

/* ------------------------------------------------------------------ botões e campos */
.cx-bt { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px;
  border-radius: 11px; border: 1px solid var(--borda); background: var(--botao); color: var(--texto); font-size: 15px;
  font-weight: 500; text-decoration: none; white-space: nowrap; }
.cx-bt:hover { color: var(--texto); border-color: #3A4350; }
.cx-bt.primario { background: var(--azul-bt); border-color: var(--azul-bt); color: #fff; font-weight: 600; }
.cx-bt.primario:hover { background: #2a73e0; color: #fff; }
.cx-bt.perigo { color: var(--ar-texto); border-color: #3A2326; background: #160E10; }
.cx-bt.grande { min-height: 56px; font-size: 17px; border-radius: 14px; }
.cx-bt.cheio { width: 100%; }
.cx-bt.peq { min-height: 38px; padding: 0 12px; font-size: 14px; border-radius: 9px; }
.cx-bt:disabled { opacity: .5; cursor: default; }
.cx-bt svg { flex: none; }

.cx-campo { display: flex; flex-direction: column; gap: 6px; }
.cx-campo label, .cx-campo .rot { font-size: 14px; font-weight: 500; color: var(--texto-2); }
.cx-campo input, .cx-campo select, .cx-campo textarea { min-height: 50px; padding: 0 14px; border-radius: 12px;
  border: 1px solid var(--borda); background: var(--cartao); color: var(--texto); font-size: 16px; width: 100%; }
.cx-campo textarea { padding: 12px 14px; min-height: 90px; }
.cx-campo input:focus, .cx-campo select:focus { outline: 2px solid var(--azul); outline-offset: 1px; border-color: transparent; }
.cx-campo input[readonly] { background: #0F1318; color: var(--suave); }
.cx-campo .ajuda { font-size: 13px; color: var(--suave); }
.cx-campo .erro { font-size: 13px; color: var(--ar-texto); }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--suave) 50%), linear-gradient(135deg, var(--suave) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px !important; }

.cx-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.cx-seg button, .cx-seg label { min-height: 46px; border-radius: 11px; border: 1px solid var(--borda); background: var(--botao);
  color: var(--texto-2); font-size: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 4px 6px; text-align: center; cursor: pointer; }
.cx-seg input { position: absolute; opacity: 0; pointer-events: none; }
.cx-seg [aria-pressed="true"], .cx-seg label:has(input:checked) { border-color: var(--azul); background: var(--azul-fundo); color: var(--texto); font-weight: 600; }
.cx-seg small { font-size: 11px; color: var(--suave); font-weight: 400; }
.cx-seg button:disabled { opacity: .45; cursor: default; }

.cx-chave { position: relative; width: 56px; height: 32px; flex: none; border-radius: 999px; border: 0; background: var(--borda); padding: 0; }
.cx-chave::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; transition: left .15s; }
.cx-chave[aria-checked="true"] { background: var(--azul-bt); }
.cx-chave[aria-checked="true"]::after { left: 27px; }
.cx-linha-chave { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 54px; }

.cx-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; background: var(--cartao);
  border: 1px solid var(--linha-2); font-family: var(--mono); font-size: 11.5px; color: var(--texto-2); white-space: nowrap; }
.cx-ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--fraco); flex: none; }
.cx-ponto.ok { background: var(--verde); box-shadow: 0 0 6px var(--verde); }
.cx-ponto.atencao { background: var(--ambar); box-shadow: 0 0 6px var(--ambar); }
.cx-ponto.mal { background: #FF5A5F; box-shadow: 0 0 6px #FF5A5F; }
.cx-lampada { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 7px; font-family: var(--cond);
  font-weight: 700; letter-spacing: .16em; font-size: 15px; background: var(--botao); color: var(--suave); border: 1px solid var(--borda); }
.cx-lampada.ar { background: var(--ar); color: #fff; border-color: #FF6B6F; box-shadow: 0 0 18px rgba(217,52,59,.55); }
.cx-lampada.aberta { background: rgba(60,203,138,.14); border-color: rgba(60,203,138,.45); color: #7FE3B6; }

.cx-cartao { border-radius: 16px; background: var(--cartao); border: 1px solid var(--linha-2); }
.cx-rotulo { font-family: var(--cond); font-weight: 700; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--suave); }
.cx-aviso { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; font-size: 14px; line-height: 1.5;
  background: #0F1620; border: 1px solid rgba(90,162,255,.3); color: #CFE2FF; }
.cx-aviso.ok { background: var(--verde-fundo); border-color: rgba(60,203,138,.35); color: #BFEFD7; }
.cx-aviso.erro { background: var(--ar-fundo); border-color: rgba(255,90,95,.4); color: #FFC9CB; }
.cx-aviso.atencao { background: #1E1808; border-color: rgba(240,178,50,.4); color: #FFE2A3; }
.cx-aviso svg { flex: none; margin-top: 2px; }
.cx-flash { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }

/* ------------------------------------------------------------------ páginas da rádio (com menu lateral) */
.cx-pagina { min-height: 100vh; display: flex; flex-wrap: wrap; }
.cx-menu { flex: 1 1 230px; max-width: 100%; padding: 20px 14px; background: var(--painel); border-right: 1px solid var(--linha);
  display: flex; flex-direction: column; gap: 4px; }
.cx-menu .cx-marca { padding: 4px 8px 20px; }
.cx-menu a.item { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 12px; border-radius: 10px; color: var(--texto-2);
  text-decoration: none; font-size: 15px; }
.cx-menu a.item[aria-current="page"] { background: #1C2433; color: var(--texto); font-weight: 500; }
.cx-menu a.item[aria-current="page"] svg { color: var(--azul); }
.cx-menu .conta { margin-top: auto; padding: 14px 12px; border-radius: 12px; background: var(--cartao); border: 1px solid var(--linha-2);
  display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.cx-conteudo { flex: 999 1 640px; min-width: 0; padding: 28px 32px 40px; display: flex; flex-direction: column; gap: 22px; }
.cx-cabeca { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.cx-cabeca h1 { font-size: 30px; font-weight: 700; letter-spacing: -.01em; }
.cx-cabeca p { margin: 6px 0 0; color: var(--suave); }
@media (max-width: 900px) {
  .cx-menu { flex-basis: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--linha); }
  .cx-menu .cx-marca { padding: 0 8px 0 0; margin-right: auto; }
  .cx-menu .conta { display: none; }
  .cx-menu a.item span { display: none; }
  .cx-conteudo { padding: 20px 16px 32px; }
}

/* salas */
.cx-salas { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.cx-salas .lista { flex: 999 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.cx-salas aside { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.cx-sala { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.cx-sala.aberta { border-color: rgba(201,53,59,.5); }
.cx-sala .topo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: flex-start; }
.cx-sala h2 { font-size: 20px; font-weight: 600; }
.cx-sala .acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.cx-pessoas { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.cx-pessoa { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: #0F1318; border: 1px solid var(--linha); }
.cx-avatar { width: 36px; height: 36px; flex: none; border-radius: 50%; background: #1E2632; color: #CFE2FF; font-size: 13px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; }
.cx-pessoa .n { font-weight: 600; font-size: 14px; }
.cx-pessoa .c { font-size: 13px; color: var(--suave); }
.cx-info { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--suave); }
.cx-nova { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.cx-grade-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.cx-tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.cx-tabela th { text-align: left; font-family: var(--cond); letter-spacing: .14em; text-transform: uppercase; font-size: 12.5px; color: var(--suave);
  font-weight: 700; padding: 10px 12px; border-bottom: 1px solid var(--linha-2); }
.cx-tabela td { padding: 12px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.cx-rolagem { overflow-x: auto; }

/* mapa */
.cx-mapa { position: relative; overflow: hidden; border-radius: 16px; background: #0F1318; border: 1px solid var(--linha-2); }
.cx-mapa svg { display: block; width: 100%; height: 100%; }
.cx-mapa svg path { fill: #232A35; stroke: #36404D; stroke-width: .25; vector-effect: non-scaling-stroke; }
.cx-mapa .vazio { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--suave); font-size: 14px; text-align: center; padding: 20px; }
.cx-mapa .legenda { position: absolute; left: 14px; bottom: 14px; display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 12px; border-radius: 10px;
  background: rgba(9,11,14,.9); border: 1px solid var(--borda); font-size: 13px; }
.cx-mapa .legenda span { display: flex; align-items: center; gap: 6px; }

/* ------------------------------------------------------------------ telas de celular (locutor) e login */
.cx-tela { max-width: 460px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; padding: max(20px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 20px; }
.cx-tela h1 { font-size: 28px; font-weight: 700; }
.cx-entrar { min-height: 100vh; display: flex; flex-wrap: wrap; }
.cx-entrar .lado { flex: 1 1 520px; min-width: 0; padding: 64px 72px; background: #0E1115; border-right: 1px solid var(--linha);
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.cx-entrar .form { flex: 1 1 440px; min-width: 0; padding: 48px 32px; display: flex; align-items: center; justify-content: center; }
.cx-entrar form { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 18px; }
.cx-entrar h1.grande { font-size: 44px; line-height: 1.1; letter-spacing: -.02em; }
.cx-entrar ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 16px; }
.cx-entrar li { display: flex; gap: 12px; align-items: center; }
@media (max-width: 860px) { .cx-entrar .lado { display: none; } .cx-entrar .form { padding: 32px 20px; } }

.cx-check { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 15px; }
.cx-check input { width: 22px; height: 22px; accent-color: var(--azul-bt); }

/* app do locutor: luz do estúdio (tally) */
.cx-tally { margin: calc(-1 * max(20px, env(safe-area-inset-top))) -20px 0; padding: max(22px, env(safe-area-inset-top)) 20px 20px;
  display: flex; flex-direction: column; gap: 8px; background: var(--cartao); border-bottom: 1px solid var(--borda); transition: background .2s; }
.cx-tally .t { font-family: var(--cond); font-weight: 700; font-size: 42px; line-height: 1; letter-spacing: .07em; }
.cx-tally .f { font-size: 15px; color: var(--suave); }
.cx-tally .linha { display: flex; justify-content: space-between; align-items: center; }
.cx-tally[data-estado="no_ar"] { background: #B8262D; border-color: #FF6B6F; box-shadow: 0 6px 30px rgba(217,52,59,.45); }
.cx-tally[data-estado="no_ar"] .f, .cx-tally[data-estado="no_ar"] .cx-rotulo { color: #FFD9DA; }
.cx-tally[data-estado="mudo"] { background: var(--ambar); border-color: #FFD27A; color: var(--ambar-texto); }
.cx-tally[data-estado="mudo"] .f, .cx-tally[data-estado="mudo"] .cx-rotulo { color: #3D2E05; }
.cx-tally[data-estado="desconectado"] { background: #1E1416; }

.cx-mic { width: 128px; height: 128px; flex: none; border-radius: 50%; border: 2px solid var(--verde); background: var(--verde-fundo);
  box-shadow: 0 0 0 8px rgba(60,203,138,.12); color: var(--verde); display: flex; align-items: center; justify-content: center; }
.cx-mic[aria-pressed="true"] { border-color: var(--ar-texto); background: var(--botao); box-shadow: 0 0 0 8px rgba(255,90,95,.10); color: var(--ar-texto); }
.cx-mic .fechado { display: none; }
.cx-mic[aria-pressed="true"] .aberto { display: none; }
.cx-mic[aria-pressed="true"] .fechado { display: block; }

.cx-medidor { display: block; width: 100%; height: 10px; }
.cx-escuro { position: fixed; inset: 0; z-index: 50; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; color: #6B7584; text-align: center; padding: 24px; }
.cx-escuro .luz { width: 14px; height: 14px; border-radius: 50%; background: #333; }
.cx-escuro[data-estado="no_ar"] .luz { background: #D9343B; box-shadow: 0 0 14px #D9343B; }
.cx-escuro[data-estado="mudo"] .luz { background: var(--ambar); }
.cx-escuro .texto { font-family: var(--cond); font-weight: 700; letter-spacing: .14em; font-size: 18px; color: #8B96A6; }

/* ------------------------------------------------------------------ mesa do estúdio */
.cx-mesa { min-height: 100vh; display: flex; flex-direction: column; background: var(--fundo); user-select: none; -webkit-user-select: none; }
.cx-mesa header { display: flex; flex-wrap: wrap; align-items: stretch; border-bottom: 1px solid var(--linha); background: var(--painel); }
.cx-mesa header > * { padding: 10px 22px; display: flex; align-items: center; }
.cx-mesa header .sala { border-right: 1px solid var(--linha); gap: 12px; text-decoration: none; color: var(--texto); }
.cx-mesa header .centro { flex: 1 1 auto; justify-content: center; gap: 26px; flex-wrap: wrap; }
.cx-mesa header .direita { gap: 10px; border-left: 1px solid var(--linha); }
.cx-relogio { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.cx-relogio .h { font-family: var(--mono); font-size: 30px; font-weight: 600; margin-top: 4px; }
.cx-noar { display: flex; align-items: center; gap: 14px; padding: 8px 18px 8px 10px; border-radius: 12px; background: var(--botao); border: 1px solid var(--borda); }
.cx-noar.ligado { background: var(--ar-fundo); border-color: rgba(255,90,95,.45); }
.cx-noar .tempo { font-family: var(--mono); font-size: 24px; font-weight: 600; color: var(--suave); }
.cx-noar.ligado .tempo { color: #FFD9DA; }
.cx-rotas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1px; background: var(--linha); border-bottom: 1px solid var(--linha); }
.cx-rota { background: var(--painel); padding: 12px 22px; display: flex; align-items: center; gap: 14px; }
.cx-rota .ic { width: 40px; height: 40px; flex: none; border-radius: 10px; background: var(--cartao-2); border: 1px solid var(--borda); display: flex; align-items: center; justify-content: center; }
.cx-rota .meio { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.cx-rota select { min-height: 40px; border-radius: 9px; border: 1px solid var(--borda); background: var(--botao); color: var(--texto); padding: 0 12px; font-size: 14px; width: 100%; }
.cx-mesa main { flex: 1; display: flex; flex-wrap: wrap; gap: 14px; padding: 16px 22px 20px; align-items: stretch; }
.cx-canais { flex: 999 1 700px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 10px; padding: 10px;
  border-radius: 18px; background: var(--painel); border: 1px solid var(--linha); align-content: start; }
.cx-canal { border-radius: 12px; background: var(--cartao); border: 1px solid var(--linha-2); overflow: hidden; display: flex; flex-direction: column; }
.cx-canal .tally { height: 6px; background: var(--linha); }
.cx-canal.ar .tally { background: var(--ar); box-shadow: 0 0 14px rgba(217,52,59,.7); }
.cx-canal .nome { padding: 10px 12px 8px; display: flex; flex-direction: column; gap: 5px; background: var(--cartao-2); border-bottom: 1px solid var(--linha-2); }
.cx-canal .nome .l1 { display: flex; justify-content: space-between; align-items: center; }
.cx-canal .nome b { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-canal .nome .cid { font-size: 12px; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-canal .nome .q { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; color: var(--texto-2); }
.cx-canal .x { width: 36px; height: 36px; margin: -8px -8px -8px 0; border-radius: 8px; border: 0; background: transparent; color: var(--fraco);
  display: flex; align-items: center; justify-content: center; }
.cx-canal .corpo { display: flex; justify-content: center; gap: 10px; padding: 14px 8px 10px; }
.cx-canal canvas.med { width: 22px; height: 300px; }
.cx-escala { display: flex; flex-direction: column; justify-content: space-between; height: 300px; font-family: var(--mono); font-size: 10px; color: var(--fraco); text-align: right; }
.cx-fader { position: relative; width: 52px; height: 300px; touch-action: none; cursor: grab; outline: none; }
.cx-fader:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 8px; }
.cx-fader .trilho { position: absolute; left: 23px; top: 0; bottom: 0; width: 6px; border-radius: 3px; background: #07090C; border: 1px solid var(--linha-2); }
.cx-fader .cap { position: absolute; left: 3px; width: 46px; height: 34px; border-radius: 6px; background: #CDD3DB; border-top: 2px solid #F2F5F8;
  border-bottom: 2px solid #8C96A3; box-shadow: 0 4px 10px rgba(0,0,0,.6); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.cx-fader .cap i { width: 30px; height: 2px; background: #2C333D; }
.cx-fader .cap i.meio { height: 3px; background: #5A6573; }
.cx-canal.ar .cx-fader .cap i.meio { background: var(--ar); }
.cx-canal .db { margin: 0 12px; padding: 6px 0; border-radius: 7px; background: #07090C; border: 1px solid var(--linha); font-family: var(--mono); font-size: 15px;
  font-weight: 600; text-align: center; color: #9FE6C4; }
.cx-canal .botoes { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.cx-canal .bt-mudo { min-height: 50px; border-radius: 9px; border: 1px solid var(--borda); background: var(--botao); color: var(--suave);
  font-family: var(--cond); font-size: 18px; font-weight: 700; letter-spacing: .14em; display: flex; align-items: center; justify-content: center; gap: 8px; }
.cx-canal .bt-mudo[aria-pressed="true"] { background: var(--ambar); border-color: #FFD27A; color: var(--ambar-texto); }
.cx-canal .bt-ar { min-height: 58px; border-radius: 10px; border: 1px solid var(--borda); background: var(--botao); color: var(--suave);
  font-family: var(--cond); font-size: 20px; font-weight: 700; letter-spacing: .18em; }
.cx-canal .bt-ar[aria-pressed="true"] { background: var(--ar); border-color: #FF6B6F; color: #fff; box-shadow: 0 0 16px rgba(217,52,59,.45); }
.cx-canal.livre { border: 1.5px dashed var(--borda); background: transparent; align-items: center; justify-content: center; gap: 10px; color: var(--suave);
  text-decoration: none; text-align: center; padding: 16px; min-height: 560px; }
.cx-programa { flex: 1 1 250px; min-width: 0; border-radius: 18px; background: var(--painel); border: 1px solid var(--linha); padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.cx-programa .meds { display: flex; justify-content: center; gap: 10px; padding: 12px 0; border-radius: 12px; background: var(--cartao); border: 1px solid var(--linha-2); }
.cx-programa canvas.med { width: 34px; height: 330px; }
.cx-programa .cx-escala { height: 330px; font-size: 11px; }
.cx-mesa footer { display: flex; flex-wrap: wrap; gap: 8px 26px; padding: 10px 22px; border-top: 1px solid var(--linha); background: var(--painel);
  font-family: var(--mono); font-size: 12px; color: var(--suave); }
.cx-cortina { position: fixed; inset: 0; z-index: 40; background: rgba(9,11,14,.92); display: flex; align-items: center; justify-content: center; padding: 20px; }
.cx-cortina .caixa { max-width: 480px; width: 100%; padding: 26px; border-radius: 18px; background: var(--cartao); border: 1px solid var(--borda);
  display: flex; flex-direction: column; gap: 16px; text-align: center; align-items: center; }