/*
 * Oráculo — visual «Régie» (proposta A), fase 1: base visual.
 * Carregado DEPOIS do app.css: só muda o aspeto (cores, letra, alturas, alinhamento), nunca a função.
 * Retirar este ficheiro do index.html repõe o visual anterior.
 */

/* ---------- letras (incluídas no Oráculo, ver fonts/LICENCAS.txt) ---------- */
@font-face {
  font-family: 'Inter Tight'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('fonts/inter-tight-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url('fonts/jetbrains-mono-latin.woff2') format('woff2');
}

/* ---------- cores e letra ---------- */
:root {
  --bg: #0b0e13; --panel: #12161d; --panel2: #171c25; --line: #222a35; --text: #e7eaf0; --muted: #8f99ab;
  --ok: #2fb36f; --warn: #f5b04a; --err: #e5484d; --accent: #3b82f6; --input: #0e1218;
  --sans: 'Inter Tight', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  --cond: var(--sans);
  /* escala de 8 px e alturas fixas (a densidade só mexe nestas variáveis) */
  --hd-h: 44px; --row-py: 10px; --ctl-h: 36px; --launch-h: 38px; --av: 48px;
}
html, body { font-family: var(--sans); font-size: calc(15px * var(--fz, 1)); }
button, input, select, textarea { font-family: var(--sans); }
kbd, .lv-key, .lv-clock strong, .lv-time, .lv-cd, .lv-direct small { font-family: var(--mono) !important; }

/* densidade (Definições do painel) */
main.live[data-density="compacta"] { --hd-h: 40px; --row-py: 6px; --ctl-h: 32px; --launch-h: 32px; --av: 40px; }
main.live[data-density="confortavel"] { --hd-h: 48px; --row-py: 14px; --ctl-h: 40px; --launch-h: 44px; --av: 56px; }

/* ---------- cabeçalho do painel: uma barra compacta ---------- */
main.live { padding: 0 16px; gap: 16px; }
.lv-head { min-height: 56px; padding: 8px 0; gap: 12px; background: #0e1218; margin: 0 -16px; padding-inline: 16px; border-bottom: 1px solid #1c232d; }
.lv-brand { padding-right: 14px; gap: 10px; }
.lv-brand strong { font: 700 calc(15px * var(--fz, 1))/1 var(--sans); letter-spacing: .08em; }
.lv-brand small { font: 600 calc(10px * var(--fz, 1)) var(--sans); letter-spacing: .12em; }
.lv-logo { width: 28px; height: 28px; border-radius: 6px; background: var(--accent); box-shadow: none; }
.lv-ev-t strong { font: 600 calc(17px * var(--fz, 1))/1.2 var(--sans); }
.lv-ev-t small { font-size: calc(12px * var(--fz, 1)); }
.lv-studio, .lv-direct { padding: 6px 12px; border-radius: 6px; }
.lv-studio strong, .lv-direct strong { font: 600 calc(13px * var(--fz, 1))/1.15 var(--sans); }
.lv-studio small { font-size: calc(11px * var(--fz, 1)); }
.lv-direct small { font-size: calc(13px * var(--fz, 1)); }
.lv-studio-dot { width: 12px; height: 12px; }
.lv-clock strong { font-size: calc(22px * var(--fz, 1)); font-weight: 700; letter-spacing: .01em; }
.lv-clock small { font-size: calc(12px * var(--fz, 1)); }
.lv-lay button { width: 30px; height: 30px; border-radius: 5px; font: 700 calc(12px * var(--fz, 1)) var(--sans); }
.lv-panic { border: 1.5px solid var(--err); color: #ff9a9e; font: 700 calc(13px * var(--fz, 1)) var(--sans); letter-spacing: .04em; text-transform: uppercase; padding: 0 14px; height: var(--ctl-h); border-radius: 6px; }

/* ---------- botões ---------- */
.lv-btn { height: var(--ctl-h); padding: 0 12px; border-radius: 6px; font: 600 calc(13px * var(--fz, 1)) var(--sans); }
.lv-btn.sm { height: 30px; padding: 0 10px; font-size: calc(13px * var(--fz, 1)); }
.lv-btn.big { height: 44px; padding: 0 18px; font-size: calc(15px * var(--fz, 1)); }
.lv-icon { border-radius: 6px; }
.lv-icon.box { width: var(--ctl-h); height: var(--ctl-h); padding: 0; }
.lv-launch, .lv-pvt, .lv-row.it2 .lv-vote { height: var(--launch-h); border-radius: 6px; font: 700 calc(13px * var(--fz, 1)) var(--sans); letter-spacing: .01em; }
.lv-launch { background: #16301f; border: 1.5px solid var(--ok); color: #9af0bf; }
.lv-launch:hover { background: #1c3d28; }
.lv-launch.off { background: #2a1517; border-color: var(--err); color: #ffb4b7; }
.lv-gc { font: 600 calc(12px * var(--fz, 1)) var(--sans); border-radius: 5px; }
.lv-menu { border-radius: 8px; }
.lv-menu button { font-size: calc(13px * var(--fz, 1)); }

/* ---------- cartões: cabeçalho de altura fixa, conteúdo encostado às margens ---------- */
.lv-body, .lv-lrow, .lv-col { gap: 16px; }
.lv-sec { padding: 0; gap: 0; border-radius: 8px; border-color: #1c232d; overflow: hidden; }
.lv-sec > .lv-hd { min-height: var(--hd-h); padding: 4px 8px 4px 14px; border-bottom: 1px solid #1c232d; gap: 8px; }
.lv-sec > :not(.lv-hd):not(.lv-list) { margin: 10px 14px 0; }
.lv-sec > :last-child:not(.lv-hd) { margin-bottom: 12px; }
.lv-sec > .lv-list:last-child { margin-bottom: 0; }
.lv-hd h2 { font: 700 calc(13px * var(--fz, 1)) var(--sans); letter-spacing: .1em; }
.lv-hd-ic svg { width: 18px; height: 18px; }
.lv-hd-ic { color: var(--muted); }
.lv-count { font: 600 calc(12px * var(--fz, 1)) var(--sans); background: transparent; border: 0; padding: 0; color: var(--muted); }
/* ferramentas do cabeçalho: mudam de linha sempre juntas, encostadas à direita (nunca um «⋯» sozinho em baixo) */
.lv-hd-tools { gap: 6px; flex-wrap: nowrap; max-width: 100%; min-width: 0; }
.lv-hd-tools .lv-search { min-width: 120px; flex: 0 1 200px; }

/* linhas: mesma altura e as mesmas margens em todos os cartões */
.lv-list { margin: 0; }
.lv-row { padding: var(--row-py) 14px; border-radius: 0; border-bottom: 1px solid #1a2029; gap: 10px; }
.lv-row.onair { background: #1a1416; box-shadow: inset 3px 0 0 var(--err); }
.lv-t { font: 600 calc(15px * var(--fz, 1))/1.25 var(--sans); }
.lv-s { font-size: calc(12px * var(--fz, 1)); }
.lv-av { width: var(--av); height: var(--av); border-radius: 6px; }
.lv-key { min-width: 40px; height: 32px; border-radius: 5px; font-size: calc(13px * var(--fz, 1)); }
.lv-empty { padding: 14px; }
.lv-search { height: var(--ctl-h); border-radius: 6px; }
.lv-search input { padding: 0; font-size: calc(14px * var(--fz, 1)); }
.lv-select { height: var(--ctl-h); border-radius: 6px; }

/* tempos: algarismos certos */
.lv-time { font-weight: 700; letter-spacing: .01em; }

/* saídas e ecrã final */
.lv-out { border-radius: 8px; }
.lv-out-hd strong { font: 600 calc(15px * var(--fz, 1)) var(--sans); }
.lv-screen { border-radius: 6px; }

/* histórico (rodapé) */
.lv-hist { font-size: calc(12px * var(--fz, 1)); }

/* janelas */
.modal-box { border-radius: 10px; }
.lv-hd-tools .lv-select { min-width: 0; width: auto; max-width: 130px; }

/* Saídas e Ecrã final: o cabeçalho vem dentro de .lv-hdbox; fica igual aos outros cartões */
.lv-outs-sec, .lv-final { padding: 0; }
.lv-sec > .lv-hdbox { margin: 0; padding: 4px 8px 4px 14px; min-height: var(--hd-h); display: flex; align-items: center; border-bottom: 1px solid #1c232d; }
.lv-sec > .lv-hdbox > .lv-hd { flex: 1; min-width: 0; }
.lv-outs-sec .lv-hd h2, .lv-final .lv-hd h2 { font-size: calc(13px * var(--fz, 1)); }
.lv-outs-sec > .lv-outs { margin: 12px 14px 14px; }
.lv-final > :last-child { margin: 12px 14px 14px; }

/* ======================= fase 2: topo e PVW | TAKE | PGM ======================= */

/* estado das saídas no topo */
.lv-hd-outs { display: flex; gap: 6px; flex-wrap: wrap; }
.lv-ho { height: 28px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: 4px; background: var(--panel2); border: 1px solid var(--line);
  color: var(--text); font: 600 calc(12px * var(--fz, 1)) var(--sans); box-shadow: inset 3px 0 0 var(--c); }
.lv-ho i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.lv-ho.air i, .lv-ho.err i { background: var(--err); }
.lv-ho.warn i { background: var(--warn); }
.lv-ho.free i { background: var(--ok); }
.lv-ho.off { color: var(--muted); }
.lv-ho-w { font: 700 calc(10px * var(--fz, 1)) var(--sans); letter-spacing: .08em; color: #ff9a9e; }
.lv-ho-w:empty { display: none; }
.lv-ho.off .lv-ho-w { color: var(--muted); }

/* três colunas: PVW | TAKE | PGM (estreito: monitores lado a lado e TAKE por baixo) */
.lv-pp3 { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) minmax(240px, 320px) minmax(0, 1fr); grid-template-areas: "pvw take pgm"; align-items: start; }
.lv-pp3 > .lv-pp-mon.pvw { grid-area: pvw; }
.lv-pp3 > .lv-pp-mon.pgm { grid-area: pgm; }
.lv-pp3 > .lv-take { grid-area: take; }
@container (max-width: 820px) { .lv-pp3 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "pvw pgm" "take take"; } }
@container (max-width: 420px) { .lv-pp3 { grid-template-columns: minmax(0, 1fr); grid-template-areas: "pvw" "pgm" "take"; } }
.lv-pp-tag { font: 700 calc(11px * var(--fz, 1)) var(--sans); letter-spacing: .1em; padding: 2px 8px; border-radius: 3px; }
.lv-pp-tag.pgm { background: #4a1519; color: #ffb4b7; box-shadow: inset 3px 0 0 var(--c, transparent); }
.lv-pp-tag.pvw { background: #1d3a26; color: #7ee2a8; border: 0; }
.lv-pp-mon .lv-screen { border-width: 2px; }
.lv-pp-mon.pgm .lv-screen.on { border-color: var(--err); }

/* coluna TAKE */
.lv-take { display: flex; flex-direction: column; gap: 10px; padding-top: 30px; min-width: 0; }
.lv-take-next { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; min-height: 92px; padding: 10px 16px; border-radius: 8px;
  background: #1f8f55; border: 2px solid var(--ok); color: #fff; text-align: left; cursor: pointer; }
.lv-take-next:hover:not(:disabled) { background: #22a05f; }
.lv-take-next:disabled { background: var(--input); border-color: var(--line); color: var(--muted); cursor: default; }
.lv-take-k { display: flex; align-items: center; width: 100%; font: 700 calc(11px * var(--fz, 1)) var(--sans); letter-spacing: .12em; color: #c9f7dc; }
.lv-take-next:disabled .lv-take-k { color: var(--muted); }
.lv-take-k kbd { margin-left: auto; font: 600 calc(10px * var(--fz, 1)) var(--mono); padding: 1px 6px; border-radius: 3px; border: 1px solid rgba(255, 255, 255, .45); }
.lv-take-n { font: 700 calc(19px * var(--fz, 1))/1.2 var(--sans); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-take-go { height: 48px; border-radius: 8px; background: var(--panel2); border: 1.5px solid var(--ok); color: #7ee2a8; font: 700 calc(14px * var(--fz, 1)) var(--sans); letter-spacing: .05em;
  display: flex; align-items: center; justify-content: center; gap: 8px; white-space: pre; }
.lv-take-go:hover:not(:disabled) { background: #16301f; }
.lv-take-go:disabled { border-color: var(--line); color: var(--muted); }
.lv-take-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lv-take-row .lv-btn { width: 100%; min-width: 0; }
.lv-take-row .lv-btn.on { background: #3b2a06; border-color: #f59e0b; color: #fcd34d; }
.lv-take-lbl { margin-top: 2px; font: 700 calc(11px * var(--fz, 1)) var(--sans); letter-spacing: .1em; color: var(--muted); }
.lv-take-layers { display: flex; flex-wrap: wrap; gap: 6px; }
.lv-take-x { height: 30px; padding: 0 10px; border-radius: 4px; background: #2a1517; border: 1px solid #6b2a2e; color: #ffb4b7; font: 600 calc(12px * var(--fz, 1)) var(--sans); white-space: pre; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.lv-take-x:hover { background: #3a1a1d; }
.lv-take-x.all { background: transparent; border-color: var(--err); }
.lv-take-none { font-size: calc(12px * var(--fz, 1)); color: var(--muted); }
.lv-take-clear { align-self: flex-start; height: 30px; font-size: calc(12px * var(--fz, 1)); }
@container (max-width: 820px) { .lv-take { padding-top: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lv-take-next { grid-row: span 2; } .lv-take-lbl, .lv-take-layers, .lv-take-clear { grid-column: 1 / -1; } }

/* barra de topo numa só linha (o que é secundário passa ao «title» / some em ecrãs estreitos) */
.lv-head { flex-wrap: nowrap; }
.lv-head > * { flex-shrink: 0; }
.lv-head > .lv-ev { flex-shrink: 1; min-width: 120px; }
.lv-head > .spacer { flex: 1 1 0; min-width: 0; }
.lv-hd-outs { flex-wrap: nowrap; }
.lv-brand small, .lv-lay small, .lv-clock small, .lv-studio small, .lv-direct small { display: none; }
.lv-brand { border-right: 0; padding-right: 4px; }
.lv-studio, .lv-direct { height: var(--ctl-h); padding: 0 12px; white-space: nowrap; }
.lv-studio-dot { width: 10px; height: 10px; }
.lv-direct-ic { width: 14px; height: 14px; border-width: 2px; }
.lv-panic { white-space: nowrap; }
.lv-uname { display: none; }
@media (max-width: 1280px) { .lv-ho-w { display: none; } .lv-studio strong { max-width: 110px; overflow: hidden; text-overflow: ellipsis; } }
@media (max-width: 1100px) { .lv-head { flex-wrap: wrap; } }
.lv-studio-s { display: none; font: 600 calc(13px * var(--fz, 1)) var(--sans); font-style: normal; }
.lv-ho { padding: 0 8px; }
@media (max-width: 1680px) {
  .lv-studio strong { display: none !important; }
  .lv-studio-s { display: inline; }
  .lv-combo-txt { display: none; }
  .lv-combo-btn { width: var(--ctl-h); padding: 0; }
  .lv-brand > span:not(.lv-logo) { display: none; }
}

/* 👁 ao lado do «Lançar no ar» (tempos, composições da lista, oradores de outros eventos) */
.lv-lw { display: flex; align-items: center; gap: 6px; min-width: 0; }
.lv-lw > .lv-launch { flex: 1; min-width: 136px; }
.lv-tm-pub, .lv-cc-pub { grid-template-columns: auto auto; }
.lv-row.sp-o { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.lv-row.team > .lv-pv-b { justify-self: start; }
.lv-res-pv { padding: 2px; color: inherit; }
@container (max-width: 780px) {
  .lv-row.team > .lv-pv-b { grid-row: 2; grid-column: 1 / -1; justify-self: end; margin-right: 144px; }
  .lv-row.team > .lv-it-gfx { margin-right: 190px; }
}

/* pré-visualização com vários grafismos: um por linha de legenda, com a saída e × */
.lv-pv-list { display: flex; flex-wrap: wrap; gap: 6px; white-space: normal; min-height: 26px; }
.lv-pv-i { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 26px; padding: 0 2px 0 8px; border-radius: 5px; background: var(--panel2);
  border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); color: var(--text); font: 600 calc(12px * var(--fz, 1)) var(--sans); }
.lv-pv-i.live { border-style: dashed; opacity: .7; }
.lv-pv-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-pv-i small { flex: none; font: 700 calc(10px * var(--fz, 1)) var(--sans); padding: 1px 5px; border-radius: 3px; background: var(--c); color: #fff; }
.lv-pv-x { flex: none; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font-size: calc(15px * var(--fz, 1)); line-height: 1; }
.lv-pv-x:hover { color: #fff; background: rgba(255, 255, 255, .1); }

/* ======================= fase 3: listas em colunas fixas ======================= */
:root { --w-launch: 132px; --w-ic: 36px; }

/* escolha da saída: botões por saída só em cartões largos; nos outros, «● GFX 2 ▾» */
.lv-it-gfx > .lv-gc, .lv-it-gfx > .lv-it-gl { display: none; }
.lv-gsel { position: relative; height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 0 8px 0 10px; border-radius: 5px; white-space: nowrap;
  background: color-mix(in srgb, var(--c) 16%, transparent); border: 1.5px solid color-mix(in srgb, var(--c) 70%, transparent); color: var(--text); font: 600 calc(12px * var(--fz, 1)) var(--sans); }
.lv-gsel i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.lv-gsel:hover { border-color: var(--c); }
.lv-gsel.live::after { content: ''; position: absolute; top: -4px; right: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--err); box-shadow: 0 0 0 2px var(--panel); }
@container (min-width: 1000px) {
  .lv-it-gfx > .lv-gc, .lv-it-gfx > .lv-it-gl { display: inline-flex; }
  .lv-it-gfx > .lv-it-gl { display: inline; }
  .lv-it-gfx > .lv-gsel { display: none; }
}
.lv-launch { width: var(--w-launch); }
.lv-lw > .lv-launch { flex: none; min-width: 0; width: var(--w-launch); }

/* oradores e equipas: as mesmas colunas (o 👁, o falar, o Lançar, a tecla e o ⋯ ficam por baixo uns dos outros) */
.lv-row.sp, .lv-row.team {
  grid-template-columns: 18px var(--av) minmax(0, 1fr) auto var(--w-ic) var(--w-ic) var(--w-launch) 44px 32px;
  grid-template-areas: "grip av main gfx pv mic launch key dots";
  column-gap: 8px; row-gap: 6px;
}
.lv-row.team { grid-template-areas: "sw sw main gfx pv . launch . dots"; margin-top: 0; border-left-width: 3px; }
.lv-row.sp > .lv-grip { grid-area: grip; }
.lv-row.sp > .lv-av { grid-area: av; }
.lv-row.sp > .lv-main, .lv-row.team > .lv-main { grid-area: main; }
.lv-row.sp > .lv-it-gfx, .lv-row.team > .lv-it-gfx { grid-area: gfx; justify-self: end; margin: 0; }
.lv-row.sp > .lv-pv-b, .lv-row.team > .lv-pv-b { grid-area: pv; justify-self: center; margin: 0; }
.lv-row.sp > .lv-mic { grid-area: mic; justify-self: center; }
.lv-row.sp > .lv-launch, .lv-row.team > .lv-launch { grid-area: launch; width: var(--w-launch); justify-self: end; margin: 0; }
.lv-row.sp > .lv-key { grid-area: key; justify-self: center; }
.lv-row.sp > .lv-icon:last-child, .lv-row.team > .lv-icon:last-child { grid-area: dots; justify-self: end; }
.lv-row.team > .lv-team-sw { grid-area: sw; justify-self: start; }
.lv-row.sp > .lv-pv-b, .lv-row.sp > .lv-mic, .lv-row.team > .lv-pv-b { width: var(--w-ic); height: var(--w-ic); }
@container (max-width: 760px) {
  /* duas linhas: nome, tecla e ⋯ em cima; saída, 👁, falar e Lançar em baixo (sempre nas mesmas colunas) */
  .lv-row.sp, .lv-row.team { grid-template-columns: 18px var(--av) minmax(0, 1fr) var(--w-ic) var(--w-ic) var(--w-launch); }
  .lv-row.sp { grid-template-areas: "grip av main main key dots" "grip av gfx pv mic launch"; }
  .lv-row.team { grid-template-areas: "sw sw main main main dots" "sw sw gfx pv . launch"; }
  .lv-row.sp > .lv-key { width: var(--w-ic); min-width: 0; }
}

/* oradores de outros eventos (com 👁 + Lançar) e da base (só «Ao evento») */
.lv-row.sp-o { grid-template-columns: var(--av) minmax(0, 1fr) auto auto; grid-template-areas: "av main gfx act"; }
.lv-row.sp-o > .lv-av { grid-area: av; } .lv-row.sp-o > .lv-main { grid-area: main; }
.lv-row.sp-o > .lv-it-gfx { grid-area: gfx; justify-self: end; } .lv-row.sp-o > .lv-lw { grid-area: act; }
.lv-row.sp-b { grid-template-columns: var(--av) minmax(0, 1fr) auto; }
@container (max-width: 560px) {
  .lv-row.sp-o { grid-template-areas: "av main main main" "av gfx gfx act"; }
}

/* tempos: nome e relógio em cima; controlos à esquerda e saída · 👁 · Lançar à direita em baixo */
.lv-row.tm { grid-template-columns: 44px auto minmax(0, 1fr) auto; grid-template-areas: "sw name . time" "btns btns btns pub"; row-gap: 8px; padding: var(--row-py) 14px; }
.lv-row.tm > .lv-sw { grid-area: sw; } .lv-row.tm > .lv-tm-name { grid-area: name; }
.lv-row.tm > .lv-time { grid-area: time; justify-self: end; }
.lv-row.tm > .lv-tm-btns { grid-area: btns; justify-content: flex-start; }
.lv-row.tm > .lv-tm-pub { grid-area: pub; justify-self: end; display: flex; gap: 6px; align-items: center; }
.lv-row.tm > .lv-sw { width: 36px; height: 36px; border-radius: 6px; }
.lv-tm-name { font: 700 calc(17px * var(--fz, 1)) var(--sans); min-width: 0; }
.lv-tb { height: var(--ctl-h); min-width: 44px; border-radius: 6px; font: 600 calc(14px * var(--fz, 1)) var(--sans); }
.lv-tb.go { min-width: 52px; }
@container (min-width: 1100px) {
  .lv-row.tm { grid-template-columns: 44px auto minmax(0, 1fr) auto auto auto; grid-template-areas: "sw name . time btns pub"; }
}

/* ordem de trabalhos: saída · Lançar · 👁 · Votação · ⋯ numa linha */
.it-r { grid-template-columns: auto auto var(--w-launch) var(--w-ic) auto 32px; gap: 6px; }
.it-r > .lv-launch { width: var(--w-launch); }
.it-r > .lv-pv-b { width: var(--w-ic); height: var(--w-ic); }
.lv-row.it2 .lv-vote { width: auto; padding: 0 12px; }
@container (max-width: 880px) { .it-r { grid-template-columns: auto var(--w-launch) var(--w-ic) auto 32px; } }
@container (max-width: 560px) {
  .it-r { grid-template-columns: auto var(--w-launch) var(--w-ic) minmax(0, 1fr) 32px; justify-content: stretch; }
  .it-r > .lv-it-gfx { grid-column: auto; flex-wrap: nowrap; }
}
.lv-row.it2 { padding: var(--row-py) 14px; margin-bottom: 0; border-radius: 0; }
.lv-row.it2 .lv-num { width: 40px; height: 40px; font-size: calc(17px * var(--fz, 1)); border-radius: 6px; }
.lv-row.it2 .lv-t { font: 600 calc(15px * var(--fz, 1))/1.25 var(--sans); }

/* vídeos: miniatura · nome · Repetir/Som · saída · 👁 · Lançar */
.lv-vd-pub { display: flex; gap: 6px; align-items: center; }
.lv-row.vd { grid-template-columns: 112px minmax(0, 1fr) auto; grid-template-areas: "th main main" "th opts pub"; row-gap: 8px; padding: var(--row-py) 14px; }
.lv-row.vd > :first-child { grid-area: th; align-self: start; }
.lv-row.vd > .lv-main { grid-area: main; }
.lv-row.vd > .lv-vd-opts { grid-area: opts; flex-wrap: nowrap; }
.lv-row.vd > .lv-vd-pub { grid-area: pub; justify-self: end; }
.lv-tgl { height: 32px; border-radius: 5px; font: 600 calc(12px * var(--fz, 1)) var(--sans); }
@container (min-width: 1100px) { .lv-row.vd { grid-template-columns: 112px minmax(0, 1fr) auto auto; grid-template-areas: "th main opts pub"; } }
@container (max-width: 520px) { .lv-row.vd { grid-template-areas: "th main main" "opts opts opts" "pub pub pub"; } }

/* ======================= fase 4: janelas e restantes páginas ======================= */

/* barra de topo das páginas (fora da Realização), igual à da Régie */
.top { min-height: 56px; padding: 0 16px; gap: 14px; flex-wrap: nowrap; background: #0e1218; border-bottom: 1px solid #1c232d; position: sticky; top: 0; z-index: 5; }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 700 calc(15px * var(--fz, 1)) var(--sans); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.brand::before { content: ''; width: 24px; height: 24px; border-radius: 6px; background: var(--accent); }
.top select { min-width: 0; max-width: 240px; height: 34px; padding: 0 10px; font-size: calc(13px * var(--fz, 1)); }
.nav { flex-wrap: nowrap; gap: 2px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.nav::-webkit-scrollbar { display: none; }
.nav button { height: 56px; padding: 0 10px; border-radius: 0; font: 600 calc(13px * var(--fz, 1)) var(--sans); color: var(--muted); white-space: nowrap; background: transparent; box-shadow: inset 0 -2px 0 transparent; }
.nav button:hover:not(:disabled) { color: var(--text); filter: none; }
.nav button.on { background: transparent; color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.top .user { font-size: calc(13px * var(--fz, 1)); white-space: nowrap; }
.top > button { white-space: nowrap; }

/* conteúdo: largura máxima confortável */
body:not(.live-mode) main { max-width: 1600px; margin: 0 auto; width: 100%; box-sizing: border-box; }

/* secções das páginas: cabeçalho como os cartões da Régie */
main:not(.live) section { padding: 0 0 14px; border-radius: 8px; border-color: #1c232d; overflow: hidden; }
main:not(.live) section > h2 { margin: 0 0 4px; padding: 0 14px; min-height: var(--hd-h); display: flex; align-items: center; border-bottom: 1px solid #1c232d;
  font: 700 calc(13px * var(--fz, 1)) var(--sans); letter-spacing: .1em; color: var(--text); }
main:not(.live) section > :not(h2) { margin-left: 14px; margin-right: 14px; }
main:not(.live) section > :first-child:not(h2) { margin-top: 14px; }
.login section { padding: 22px !important; }
.login section > * { margin-left: 0 !important; margin-right: 0 !important; }
.login h1 { font: 700 calc(20px * var(--fz, 1)) var(--sans); }

/* formulários */
input, select, textarea { border-radius: 6px; border-color: #273040; background: var(--input); }
:is(main:not(.live), .modal-box, .top) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), select):not(.ed *) { min-height: 36px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
label { font: 600 calc(12px * var(--fz, 1)) var(--sans); letter-spacing: .02em; }

/* botões comuns: só nas páginas, nas janelas e na barra de topo (o painel e o editor têm os seus) */
:is(main:not(.live), .modal-box, .top) button:not([class*="lv-"]):not(.ed button) { min-height: 36px; padding: 0 14px; border-radius: 6px; font: 600 calc(13px * var(--fz, 1)) var(--sans); background: #1c2330; border: 1px solid #2a3343; }
:is(main:not(.live), .modal-box, .top) button:not([class*="lv-"]):not(.ed button):hover:not(:disabled) { filter: none; background: #232c3b; }
:is(main:not(.live), .modal-box, .top) button.primary:not(.ed button) { background: var(--accent); border-color: var(--accent); }
:is(main:not(.live), .modal-box, .top) button.primary:not(.ed button):hover:not(:disabled) { background: #2f6fe0; }
:is(main:not(.live), .modal-box, .top) button.danger:not(.ed button) { background: var(--err); border-color: var(--err); }
:is(main:not(.live), .modal-box, .top) button.ghost:not(.ed button) { background: transparent; border-color: #2a3343; }
:is(main:not(.live), .modal-box, .top) button.ghost:not(.ed button):hover:not(:disabled) { background: #161c26; }
:is(main:not(.live), .modal-box, .top) button.small:not(.ed button) { min-height: 30px; padding: 0 10px; font-size: calc(12px * var(--fz, 1)); }
.danger-soft { background: transparent !important; border-color: #5a2328 !important; color: #ff9a9e !important; }
.danger-soft:hover:not(:disabled) { background: #2a1517 !important; }
.nav button { border: 0 !important; min-height: 0 !important; }

/* tabelas */
th { font: 700 calc(11px * var(--fz, 1)) var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 10px 8px; border-bottom-color: #222a35; }
td { padding: 10px 8px; border-bottom-color: #1a2029; font-size: calc(14px * var(--fz, 1)); }
tbody tr:hover td { background: #141922; }
main:not(.live) td button:not(.ed button) { min-height: 30px; padding: 0 10px; font-size: calc(12px * var(--fz, 1)); background: transparent; border: 1px solid #2a3343; }
main:not(.live) td button:not(.ed button):hover:not(:disabled) { background: #1c2330; }

/* separadores e cartões (Grafismos, Recursos) */
main:not(.live) .tabs button { min-height: 32px; padding: 0 12px; border-radius: 999px; font-size: calc(13px * var(--fz, 1)); background: transparent; border-color: #2a3343; }
main:not(.live) .tabs button.on { background: color-mix(in srgb, var(--accent) 22%, transparent); border-color: var(--accent); color: var(--text); }
.card { background: var(--panel); border: 1px solid #1c232d; }
.card:hover { border-color: #2c3646; }
main:not(.live) :is(.card .body, .asset) button { min-height: 30px; padding: 0 10px; font-size: calc(12px * var(--fz, 1)); }
.asset { border-radius: 8px; }

/* janelas */
.modal { background: rgba(4, 6, 10, .72); backdrop-filter: blur(2px); }
.modal-box { border-radius: 12px; border-color: #273040; padding: 20px 22px; box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }
.modal-box h3 { font: 700 calc(17px * var(--fz, 1)) var(--sans); margin-bottom: 12px; }
.modal-box .row.end { margin-top: 18px; padding-top: 14px; border-top: 1px solid #1c232d; }
.modal-box .ed-f { font-size: calc(12px * var(--fz, 1)); }
.modal-box .ed-f > span { font-weight: 600; }
.top .nav button { background: transparent !important; padding: 0 9px; }
.top .nav button.on { box-shadow: inset 0 -2px 0 var(--accent); }
@media (max-width: 1600px) { .top .user { display: none; } }
main:not(.live) .card .body .row { gap: 6px; margin-top: 6px; }
main:not(.live) .card .body button:not(.lv-icon) { min-height: 28px !important; padding: 0 8px !important; font-size: calc(12px * var(--fz, 1)) !important; }
main:not(.live) .card .title { font: 600 calc(15px * var(--fz, 1))/1.25 var(--sans); }

/* alarme: faixa fixa enquanto a saída (ou o servidor) não voltar */
.lv-banners { position: sticky; top: 64px; z-index: 6; }
.lv-alarm { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: #5a1015; color: #ffd7d9; border: 1.5px solid var(--err); font-size: calc(13px * var(--fz, 1));
  animation: lv-alarm-pulse 1.6s ease-in-out infinite; }
.lv-alarm strong { letter-spacing: .04em; color: #fff; }
.lv-alarm .lv-btn { background: #2a0d10; border-color: #ff8a8f; color: #fff; }
.lv-alarm-m { font-size: calc(12px * var(--fz, 1)); color: #ffb4b7; }
@keyframes lv-alarm-pulse { 50% { background: #3d0b0f; } }
@media (prefers-reduced-motion: reduce) { .lv-alarm { animation: none; } }

/* playlists (cartão Vídeos e janela) */
.lv-pl-th { display: flex; flex-direction: column; gap: 2px; color: #cfe0ff; font: 700 calc(14px * var(--fz, 1)) var(--sans); background: #13213a; }
.lv-row.vd.pl { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.lv-pl-list { display: grid; gap: 4px; max-height: 320px; overflow: auto; padding: 6px; border: 1px solid #222a35; border-radius: 6px; background: var(--input); }
.lv-pl-it { display: grid; grid-template-columns: 22px minmax(0, 1fr) 70px 32px 32px 32px; gap: 6px; align-items: center; }
.lv-pl-n { font: 700 calc(12px * var(--fz, 1)) var(--mono); color: var(--muted); text-align: right; }
.lv-pl-name { font-size: calc(13px * var(--fz, 1)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-box .lv-pl-dur { min-height: 30px !important; height: 30px; padding: 0 6px; font: 600 calc(12px * var(--fz, 1)) var(--mono); text-align: center; }
.lv-pl-dur.bad { border-color: var(--err); }
.lv-pl-it .lv-icon { width: 32px; height: 32px; padding: 0; }
.lv-pl-it .lv-icon.off { opacity: .35; }
.k-playlist { --k: #ec4899; } .k-manual { --k: #3b82f6; }
.lv-pl-it { grid-template-columns: 22px minmax(0, 1fr) 70px 30px 30px 30px; }
.modal-box .lv-pl-b { min-height: 30px !important; height: 30px; padding: 0 !important; font-size: calc(14px * var(--fz, 1)) !important; }
main:not(.live) section > table { width: calc(100% - 28px); }

/* página «Alinhamentos» */
.rd-page .row select { width: auto; min-width: 220px; }
.rd-table td { vertical-align: middle; }
.rd-table .rd-n { font: 700 calc(13px * var(--fz, 1)) var(--mono); color: var(--muted); width: 36px; }
.rd-table .lv-rd-o { margin-right: 4px; }
.rd-table .rd-st { font: 700 calc(11px * var(--fz, 1)) var(--sans); letter-spacing: .08em; width: 80px; }
.rd-table tr.rd-next td { background: rgba(34, 197, 94, .07); }
.rd-table tr.rd-next td:first-child { box-shadow: inset 3px 0 0 #22c55e; }
.rd-table tr.rd-next .rd-st { color: #4ade80; }
.rd-table tr.rd-cur td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.rd-table tr.rd-cur .rd-st { color: var(--warn); }
.rd-table tr.rd-bad strong { color: var(--err); }
.rd-table .rd-act { width: 1%; white-space: nowrap; }

/* conta (topo das páginas) */
.acct { position: relative; flex: none; }
.top .acct-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 0 !important; height: 36px; padding: 0 6px !important; background: transparent !important; border: 0 !important; }
.acct-av { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; font: 700 calc(12px * var(--fz, 1)) var(--sans); color: #fff; }
.acct-c { color: var(--muted); font-size: calc(12px * var(--fz, 1)); }
.acct-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 220px; padding: 6px; display: grid; background: var(--panel2); border: 1px solid #273040; border-radius: 8px; box-shadow: 0 12px 30px rgba(0, 0, 0, .5); }
.acct-name { padding: 6px 10px 8px; font-size: calc(12px * var(--fz, 1)); color: var(--muted); border-bottom: 1px solid #222a35; margin-bottom: 4px; }
.top .acct-menu button { min-height: 34px !important; justify-content: flex-start; text-align: left; background: transparent !important; border: 0 !important; padding: 0 10px !important; }
.top .acct-menu button:hover { background: #1b2740 !important; }
.fz-row { display: flex; align-items: center; gap: 6px; padding: 4px 6px 6px 10px; margin-bottom: 4px; border-bottom: 1px solid #273040; color: var(--muted, #8b95a7); font-size: calc(13px * var(--fz, 1)); }
.fz-row > span:first-child { flex: 1; white-space: nowrap; margin-right: 6px; }
.top .acct-menu .fz-row .fz-b { min-height: 30px !important; min-width: 34px; justify-content: center; padding: 0 6px !important; border: 1px solid #273040 !important; font-weight: 700; }
.fz-val { min-width: 42px; text-align: center; font-variant-numeric: tabular-nums; color: var(--text, #e7ebf2); }
.top .nav button { padding: 0 8px; }
.top select { max-width: 200px; }

/* editor: «+ Animado» */
.ed-anim-btn { border-color: #6d4fd8 !important; color: #d6c6ff !important; }
.ed-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.modal-box .ed-preset { display: grid; gap: 4px; justify-items: start; text-align: left; min-height: 0 !important; height: auto; padding: 12px 14px !important; border-radius: 8px; background: var(--input) !important; border: 1px solid #273040 !important; }
.modal-box .ed-preset:hover { border-color: #6d4fd8 !important; background: #161226 !important; }
.ed-preset strong { font: 700 calc(14px * var(--fz, 1)) var(--sans); color: var(--text); }
.ed-preset span { font: 400 calc(12px * var(--fz, 1))/1.35 var(--sans); color: var(--muted); }
@media (max-width: 600px) { .ed-presets { grid-template-columns: 1fr; } }
.ed-preset-cat { margin: 14px 0 6px; font: 700 calc(11px * var(--fz, 1)) var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.modal-box:has(.ed-presets) { width: min(860px, 100%); }
.ed-presets { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* fontes remotas (cartão Vídeos) */
.lv-rm-th { display: flex; flex-direction: column; gap: 2px; font-size: calc(20px * var(--fz, 1)); background: #1a1f29; }
.lv-rm-th small { font: 700 calc(9px * var(--fz, 1)) var(--sans); letter-spacing: .1em; color: var(--muted); }
.lv-rm-th.live { background: #2a1517; box-shadow: inset 0 0 0 1.5px var(--err); }
.lv-rm-th.live small { color: #ff9a9e; }
.lv-row.vd.rm { background: color-mix(in srgb, var(--err) 4%, transparent); }
.lv-rm-link { margin-top: 10px; }
.lv-rm-link input { font: 500 calc(12px * var(--fz, 1)) var(--mono); }

/* apresentações (janela, Recursos e cartão Vídeos) */
.pr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; max-height: 360px; overflow: auto; padding: 6px; border: 1px solid #222a35; border-radius: 6px; background: var(--input); }
.pr-sl { display: grid; gap: 4px; }
.pr-sl img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #000; border-radius: 4px; }
.pr-sl-bar { display: flex; gap: 4px; align-items: center; }
.pr-sl-n { flex: 1; font: 700 calc(12px * var(--fz, 1)) var(--mono); color: var(--muted); }
.pr-th { width: 88px; aspect-ratio: 16 / 9; object-fit: contain; background: #000; border-radius: 4px; display: block; }
.lv-row.vd.pr { background: color-mix(in srgb, var(--ok, #2fb36f) 5%, transparent); }
.lv-pr-th { position: relative; padding: 0; overflow: hidden; background: #000; }
.lv-pr-th img { width: 100%; height: 100%; object-fit: contain; display: block; }
.lv-pr-th small { position: absolute; right: 4px; bottom: 3px; padding: 0 4px; border-radius: 3px; background: rgb(0 0 0 / .75); font: 700 calc(10px * var(--fz, 1)) var(--mono); color: #fff; }
.lv-pr-nav { display: inline-flex; gap: 4px; align-items: center; }
.lv-pr-nav .lv-pr-n { min-width: 52px; text-align: center; font: 700 calc(13px * var(--fz, 1)) var(--mono); }
.lv-pr-next { width: 54px; aspect-ratio: 16 / 9; object-fit: contain; background: #000; border-radius: 3px; opacity: .8; }
.lv-pr-list { margin-top: 10px; }
.lv-pr-list:empty { display: none; }
.lv-pr-h { font: 700 calc(11px * var(--fz, 1)) var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 4px 14px; }

/* biblioteca multimédia (Recursos): pastas à esquerda, pesquisa, seleção de vários */
.lib { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 12px; }
@media (max-width: 760px) { .lib { grid-template-columns: minmax(0, 1fr); } .lib-folders { position: static; flex-direction: row; flex-wrap: wrap; } .lib-f-h { display: none; } }
.lib-folders { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 12px; }
.lib-f { display: flex; align-items: center; gap: 2px; border-radius: 6px; }
.lib-f.on { background: var(--panel2); box-shadow: inset 3px 0 0 var(--accent); }
.lib-f-b { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; background: transparent; border: 0; color: var(--text); padding: 7px 10px; text-align: left; cursor: pointer; }
.lib-f-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-f-b small { color: var(--muted); font: 600 calc(12px * var(--fz, 1)) var(--mono); }
.lib-f-x { opacity: 0; } .lib-f:hover .lib-f-x, .lib-f.on .lib-f-x, .lib-f-x:focus { opacity: 1; }
.lib-f-h { font: 700 calc(11px * var(--fz, 1)) var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 10px 10px 2px; }
.lib-f-new { justify-self: start; margin-top: 6px; }
.lib-main { display: grid; gap: 10px; min-width: 0; }
.lib-bar { display: flex; gap: 8px; } .lib-q { flex: 1; min-width: 0; } .lib-bar select { width: auto; }
.lib-sel { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 12px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 14%, var(--panel2)); border: 1px solid var(--accent); }
.lib-sel .spacer { flex: 1; }
.lib-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 8px; }
.lib-big { display: grid; place-items: center; background: #000; border-radius: 8px; min-height: 200px; }
.lib-big img, .lib-big video { max-width: 100%; max-height: 70vh; display: block; }
.lib-scope { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 2px; margin-bottom: 8px; border-radius: 8px; background: var(--input); border: 1px solid var(--line); }
.lib-scope button { padding: 6px 4px; font-size: calc(12px * var(--fz, 1)); border: 0; background: transparent; color: var(--muted); border-radius: 6px; }
.lib-scope button.on { background: var(--panel2); color: var(--text); font-weight: 700; }
@media (max-width: 760px) { .lib-scope { width: 100%; } }

/* Recursos: cabeçalho com ações, largar ficheiros em toda a secção */
main:not(.live) section.lib-sec { position: relative; overflow: visible; }
main:not(.live) section.lib-sec > .lib-head { margin: 0; padding: 8px 14px; min-height: var(--hd-h); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-bottom: 1px solid #1c232d; }
main:not(.live) section.lib-sec > .lib-head > h2 { margin: 0; padding: 0; border: 0; min-height: 0; flex: 1 1 auto; font: 700 calc(13px * var(--fz, 1)) var(--sans); letter-spacing: .1em; color: var(--text); }
.lib-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lib-actions select.lib-kind { width: auto; min-height: 34px; }
.lib-limits { color: var(--muted); font-size: calc(12px * var(--fz, 1)); }
@media (max-width: 1100px) { .lib-limits { display: none; } }
.lib-up-msg { display: flex; align-items: center; gap: 10px; margin-top: 12px !important; padding: 8px 12px; border-radius: 8px; background: var(--panel2); font-size: calc(13px * var(--fz, 1)); }
.lib-up-msg.err { background: #2a1517; border: 1px solid var(--err); color: #ffd7d9; align-items: flex-start; }
.lib-up-msg .lib-err { flex: 1; display: grid; gap: 2px; }
.lib-bar-p { flex: 0 0 140px; height: 6px; border-radius: 3px; background: #1a202b; overflow: hidden; }
.lib-bar-p i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
section.lib-sec.drop::after { content: attr(data-drop); position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; border: 2px dashed var(--accent); border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 14%, rgb(11 14 19 / .85)); color: var(--text); font: 700 calc(16px * var(--fz, 1)) var(--sans); pointer-events: none; }

/* coluna das pastas */
.lib { margin-top: 14px; }
.lib-folders { gap: 1px; }
.lib-f-b { padding: 6px 10px; font-size: calc(13px * var(--fz, 1)); }
.lib-f.on .lib-f-b { font-weight: 700; }
@media (max-width: 760px) {
  .lib-folders { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .lib-scope { flex: 0 0 100%; }
  .lib-f { flex: 0 0 auto; border: 1px solid var(--line); }
  .lib-f.on { box-shadow: none; border-color: var(--accent); }
  .lib-f-new { margin-top: 0; }
}

/* cartões dos ficheiros */
.lib .assets { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.asset { position: relative; display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; border: 1px solid #222a35; border-radius: 8px; background: var(--panel2); transition: border-color .12s; }
.asset:hover { border-color: #33405a; }
.asset.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.asset .thumb { position: relative; height: auto; aspect-ratio: 16 / 10; margin: 0; border-radius: 0; cursor: zoom-in; overflow: hidden; }
.asset .thumb img, .asset .thumb video { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; display: block; }
.asset .thumb .thumb-link { position: absolute; inset: 0; }
.asset-info { padding: 8px 10px 10px; display: grid; gap: 2px; min-width: 0; }
.asset-n { font-weight: 600; font-size: calc(13px * var(--fz, 1)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset .meta { font-size: calc(11.5px * var(--fz, 1)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-badge { position: absolute; left: 8px; bottom: 8px; padding: 1px 6px; border-radius: 4px; background: rgb(0 0 0 / .7); color: #fff; font: 700 calc(10.5px * var(--fz, 1)) var(--sans); letter-spacing: .03em; }
.asset-ck { position: absolute; top: 8px; left: 8px; z-index: 2; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); cursor: pointer; opacity: 0; transition: opacity .12s; }
.asset-acts { position: absolute; top: 6px; right: 6px; z-index: 2; display: flex; gap: 4px; opacity: 0; transition: opacity .12s; }
.asset:hover :is(.asset-ck, .asset-acts), .asset:focus-within :is(.asset-ck, .asset-acts), .assets.selecting .asset-ck, .asset-ck:checked { opacity: 1; }
@media (hover: none) { .asset-ck, .asset-acts { opacity: 1; } }
.asset-a { display: grid; place-items: center; width: 28px; height: 28px; min-height: 0; padding: 0; border-radius: 6px; border: 1px solid rgb(255 255 255 / .12); background: rgb(11 14 19 / .82); color: #e7eaf0; cursor: pointer; }
.asset-a:hover { background: #1c2330; }
.asset-a.danger:hover { color: #ffb4b7; border-color: var(--err); }
.asset-use { margin: 0 10px 10px; }
.lib .empty { grid-column: 1 / -1; padding: 30px 0; text-align: center; }

.lib-scope > button { border: 0 !important; box-shadow: none; min-height: 30px; background: transparent; color: var(--muted); font: 600 calc(12px * var(--fz, 1)) var(--sans); }
.lib-scope > button.on { background: var(--panel2); color: var(--text); box-shadow: 0 1px 0 rgb(0 0 0 / .3); }
.lib-main { gap: 8px; }
.lib-main > .tabs { flex-wrap: wrap; }
.lib-main > .tabs button { min-height: 30px; padding: 4px 12px; font-size: calc(12.5px * var(--fz, 1)); border-radius: 999px; }
.lib-note { padding: 8px 12px; border-radius: 8px; font-size: calc(12.5px * var(--fz, 1)); color: #cfe0ff; background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }

/* cartão «Biblioteca» (Realização): imagens e vídeos em ecrã inteiro */
.lv-md-scope { display: inline-flex; gap: 2px; padding: 2px; border-radius: 7px; background: var(--input); border: 1px solid var(--line); }
.lv-md-scope > button { border: 0 !important; min-height: 26px; padding: 2px 10px; font: 600 calc(12px * var(--fz, 1)) var(--sans); background: transparent; color: var(--muted); border-radius: 5px; }
.lv-md-scope > button.on { background: var(--panel2); color: var(--text); }
.lv-md-top { display: grid; gap: 10px; padding: 10px 14px 0; }
.lv-md-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 10px 14px 0; }
.lv-md-dyn { display: contents; }
.lv-md-q { flex: 1 1 160px; min-width: 0; }
.lv-md-f { width: auto; max-width: 180px; }
.lv-md-k { display: inline-flex; gap: 4px; }
.lv-md-sel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 12px; align-items: start; }
@container (max-width: 520px) { .lv-md-sel { grid-template-columns: minmax(0, 1fr); } }
.lv-md-prev { position: relative; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; border: 1px solid var(--line);
  background: repeating-conic-gradient(#2a3342 0% 25%, #1a202b 0% 50%) 50% / 14px 14px; }
.lv-md-prev.black { background: #000; }
.lv-md-prev > img, .lv-md-prev > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.lv-md-prev.cover > img, .lv-md-prev.cover > video { object-fit: cover; }
.lv-md-air { position: absolute; left: 6px; top: 6px; padding: 2px 7px; border-radius: 4px; background: var(--err); color: #fff; font: 700 calc(10.5px * var(--fz, 1)) var(--sans); letter-spacing: .05em; }
.lv-md-info { display: grid; gap: 6px; min-width: 0; }
.lv-md-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-md-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.lv-md-pub { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.lv-md-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; padding: 10px 14px 14px; max-height: 320px; overflow: auto; }
.lv-md-t { display: grid; gap: 4px; padding: 0; min-height: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--panel2); overflow: hidden; cursor: pointer; text-align: left; color: var(--text); }
.lv-md-t:hover { border-color: #33405a; }
.lv-md-t.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.lv-md-t.air { border-color: var(--err); }
.lv-md-t.air.sel { box-shadow: 0 0 0 1px var(--err); }
.lv-md-th { position: relative; display: block; aspect-ratio: 16 / 10; background: repeating-conic-gradient(#2a3342 0% 25%, #1a202b 0% 50%) 50% / 12px 12px; }
.lv-md-th > img, .lv-md-th > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.lv-md-th > i { position: absolute; right: 4px; bottom: 3px; font: 700 calc(10px * var(--fz, 1)) var(--sans); font-style: normal; padding: 0 4px; border-radius: 3px; background: rgb(0 0 0 / .7); color: #fff; }
.lv-md-lnk { position: absolute; inset: 0; display: grid; place-items: center; background: #0b0f16; color: #cfd6e2; }
.lv-md-n { padding: 0 6px 5px; font-size: calc(11.5px * var(--fz, 1)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* apresentação no cartão Composições: em cartões estreitos, a miniatura do seguinte não cabe ao lado dos botões */
.lv-row.vd.pr > .lv-vd-opts { flex-wrap: wrap; min-width: 0; }
@container (max-width: 760px) { .lv-pr-next { display: none; } }
.irow-where { display: grid; gap: 4px; min-width: 0; }
.ch-out { width: 100%; font: calc(13px * var(--fz, 1))/1.5 var(--mono); }

/* modo «Botões» (segundo ecrã / ecrã tátil) */
main.btn-mode { padding-bottom: 24px; }
.lv-bhead { gap: 14px; flex-wrap: wrap; }
.lv-bh-ev { display: grid; line-height: 1.15; }
.lv-bh-ev strong { font: 700 calc(16px * var(--fz, 1)) var(--sans); }
.lv-bh-ev small { color: var(--muted); font-size: calc(12px * var(--fz, 1)); letter-spacing: .06em; text-transform: uppercase; }
.lv-bh-outs { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.lv-bh-outs small { color: var(--muted); font-size: calc(12px * var(--fz, 1)); margin-right: 2px; }
.lv-bh-o { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); font: 700 calc(15px * var(--fz, 1)) var(--sans); }
.lv-bh-o i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.lv-bh-o.sel { border-color: var(--c); box-shadow: inset 0 0 0 2px var(--c); background: color-mix(in srgb, var(--c) 16%, var(--panel2)); }
.lv-board { display: grid; gap: 18px; padding: 16px; }
.lv-bsec h3 { margin: 0 0 8px; font: 700 calc(12px * var(--fz, 1)) var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.lv-bgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.lv-bsec.ctrl .lv-bgrid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.lv-bt { display: flex; flex-direction: column; border-radius: 12px; border: 1px solid #2a3343; background: var(--panel2); overflow: hidden; }
.lv-bt.on { border-color: var(--err); box-shadow: 0 0 0 2px var(--err); background: color-mix(in srgb, var(--err) 14%, var(--panel2)); }
.lv-bt-main { flex: 1; width: 100%; box-sizing: border-box; display: grid; align-content: start; gap: 4px; min-height: 104px; padding: 14px 14px 12px; border: 0; border-radius: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer; position: relative; touch-action: manipulation; }
.lv-bt-main:active:not(:disabled) { background: rgb(255 255 255 / .06); }
.lv-bt-main:disabled { opacity: .45; cursor: default; }
.lv-bt-main strong { font: 800 calc(18px * var(--fz, 1))/1.2 var(--sans); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lv-bt-main span { color: var(--muted); font-size: calc(13px * var(--fz, 1)); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lv-bt-main em { font: 800 calc(11px * var(--fz, 1)) var(--sans); font-style: normal; letter-spacing: .08em; color: #ff9a9e; margin-top: 4px; }
.lv-bt-main kbd { position: absolute; right: 10px; top: 10px; font: 700 calc(11px * var(--fz, 1)) var(--mono); color: var(--muted); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; }
.lv-bt.b-item .lv-bt-main strong { font-size: calc(15px * var(--fz, 1)); font-weight: 700; }
.lv-bt.b-done:not(.on) > .lv-bt-main { opacity: .6; } /* ponto tratado: só o título fica esbatido (a votação não) */
.lv-bt.b-vote .lv-bt-main strong { color: #cfe0ff; }
.lv-bt.b-big .lv-bt-main { min-height: 120px; }
.lv-bt.b-big .lv-bt-main strong { font-size: calc(26px * var(--fz, 1)); }
.lv-bt.b-go { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--panel2)); }
.lv-bt-tm, .lv-bt-pr { display: flex; gap: 6px; align-items: center; padding: 8px 10px; border-top: 1px solid #2a3343; }
.lv-bt-tm { box-shadow: inset 4px 0 0 var(--c); }
.lv-bt-tm .lv-time { flex: 1; font: 800 calc(26px * var(--fz, 1)) var(--mono); }
.lv-bt-tm .lv-time.over { color: var(--err); }
.lv-bt-s { min-height: 44px; min-width: 52px; padding: 0 10px; border-radius: 8px; border: 1px solid #2a3343; background: #1c2330; color: var(--text); font: 700 calc(15px * var(--fz, 1)) var(--sans); display: grid; place-items: center; }
.lv-bt-s.on { border-color: var(--ok, #2fb36f); color: #9be7b9; }
.lv-bt-s:disabled { opacity: .35; }
.lv-bt-pr .lv-bt-s { flex: 1; font-size: calc(20px * var(--fz, 1)); }
/* tempos: contador numa linha, botões por baixo (cabem sempre) */
.lv-bt.b-tm .lv-bt-main { min-height: 56px; }
.lv-bt-tm { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.lv-bt-tm .lv-time { grid-column: 1 / -1; font-size: calc(34px * var(--fz, 1)); line-height: 1.1; }
.lv-bt-tm .lv-bt-s { min-width: 0; }
.lv-bt.b-tm.b-run { border-color: var(--ok, #2fb36f); }
.lv-bt.b-tm.b-run.on { border-color: var(--err); }
main.btn-mode .lv-bsec { margin: 0; }
@media (max-width: 700px) { .lv-board { padding: 10px; gap: 12px; } .lv-bgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }

/* modo botões: destino de cada botão (a saída da Realização) e votações */
.lv-bt-dest { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font: 700 calc(11px * var(--fz, 1)) var(--sans); letter-spacing: .06em; color: var(--muted); }
.lv-bt-dest i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
span.lv-bh-o { cursor: default; min-height: 36px; }
span.lv-bh-o b { font: 800 calc(10px * var(--fz, 1)) var(--sans); letter-spacing: .08em; color: #ff9a9e; }
.lv-bt.b-vote .lv-bt-main strong { color: #cfe0ff; }
.lv-bt.b-vote:not(.b-voted) { border-style: dashed; }
.lv-bt-s.on-air { border-color: var(--err); color: #ffb4b7; }
.lv-bt.b-vote .lv-bt-pr .lv-bt-s { font-size: calc(14px * var(--fz, 1)); }

.lv-bt-vote { display: grid; grid-template-columns: auto 1fr; gap: 6px; padding: 8px 10px; border-top: 1px solid #2a3343; }
.lv-bt-vote .lv-bt-s { gap: 6px; display: inline-flex; justify-content: center; font-size: calc(14px * var(--fz, 1)); }
.lv-bt-vote .lv-bt-res { grid-column: 1 / -1; color: #cfe0ff; font-size: calc(12px * var(--fz, 1)); line-height: 1.3; }
.lv-bt.b-resair { border-color: var(--err); }