:root{
  --bg:#0a0a0a;   /* direção A (01-04-01) */
  --card:#141414;    /* cartão normal */
  --card-sel:#1e1e1e; /* cartão selecionado: um pouco mais claro */
  --line:#2a2a2a;
  --line-strong:#3a3a3a;
  --muted:#a3a3a3;
  --quiet:#8a8a8a;
  --red:#851416;
  --warn:#f5c518;
  --mod:216px;   /* altura de um módulo; cada cartão ocupa o número de módulos que o conteúdo pede */
  --gap:12px;
  --halo:#141414; /* cor do fundo, usada no 'corte' do traço de ícones riscados */
  --ovh:182px;   /* altura fixa do cartão fora do painel (borda, margens, cabeçalho, barra, tempo, controles e espaços) */
  --in:8px;      /* espaço entre as linhas internas do cartão */
  --redhi:#c4282c; /* vermelho um pouco mais claro, para ícones sobre o fundo escuro */
}
*{box-sizing:border-box}
html{overflow-y:scroll;scrollbar-gutter:stable}   /* a barra de rolagem nunca aparece/some: a página não treme */
html,body{margin:0;background:var(--bg);color:#fff;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
body{padding:20px;margin:0;overflow-anchor:none}   /* sem largura máxima: em monitores grandes a zona ativa ganha mais colunas */
[hidden]{display:none!important}

header{display:flex;align-items:center;gap:10px;margin-bottom:18px}
header>b{font-size:20px;font-weight:500;letter-spacing:1px}
header>span{font-size:12px;color:var(--muted)}   /* só o subtítulo (não o texto do botão Adicionar faixa) */

button{font:inherit;color:#fff;background:transparent;border:1px solid var(--line-strong);border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px}
button:hover{border-color:#6b6b6b}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #fff;outline-offset:2px}
input[type=text],input[type=number],textarea{background:var(--cbg,var(--card));color:#fff;border:1px solid var(--line-strong);border-radius:8px;padding:10px 12px;font:inherit;font-size:14px}
input[type=range]{accent-color:var(--red)}
svg{width:18px;height:18px;flex:none}

.add{display:flex;gap:6px}
.addin{position:relative;flex:1;min-width:0;display:flex}
.add input{flex:1;min-width:0;width:100%;padding:7px 10px;font-size:13px}
.add button{flex:none;padding:0 12px;border-radius:8px;background:var(--red);border-color:var(--red);font-size:13px}
.add .ib{background:transparent;border-color:transparent;padding:0}
/* texto-guia do campo: fica no lugar do "placeholder" para poder correr em loop quando não cabe */
.phold{position:absolute;left:11px;right:11px;top:0;bottom:0;display:flex;align-items:center;pointer-events:none;overflow:hidden}
.phold .nm-wrap{font-size:13px;font-weight:400;color:var(--quiet);line-height:19px;height:19px}
.addin.has .phold{display:none}
#msg:empty{display:none}
.zone .ptitle{position:relative}
.zone .ptitle .tools{margin-left:8px}
.addfull{display:flex;flex-direction:column;gap:7px}
.addfull[hidden]{display:none}
.afl{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--quiet);min-width:0;flex:1}
.addfull input[type=text],.addfull select{width:100%;min-width:0;background:var(--cbg,#141414);color:#fff;border:1px solid var(--line-strong);border-radius:8px;font:inherit;font-size:12px;padding:5px 8px}
.afc{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--muted);cursor:pointer}
.afc input{accent-color:var(--red);margin:0}
.info{font-size:12px;color:var(--quiet);line-height:1.6;margin:0}

.bar{--halo:var(--bg);display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 18px}
.bar button{padding:8px 14px;font-size:13px}
.bar .mv{display:flex;align-items:center;gap:8px;margin-left:8px;font-size:12px;color:var(--muted)}   /* o volume geral e o organizador da zona vêm logo depois dos botões */
.zsortw{position:relative;display:inline-flex}
.zsortw .zsortm{top:36px;right:0;left:auto}
.bar .mv input[type=range]{width:140px}

/* caixa de porcentagem: mesma folga (5px) nos quatro lados do texto mais largo, "100%" */
input[type=text].num{background:transparent;color:#fff;border:1px solid var(--line-strong);border-radius:6px;padding:5px;font:inherit;font-size:12px;line-height:14px;height:26px;text-align:center;flex:none;width:46px}
input[type=text].num:hover{border-color:#6b6b6b}

.grid{position:relative;display:grid;gap:var(--gap);grid-auto-rows:var(--mod);grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.card{--cbg:var(--card);background:var(--cbg);border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;justify-content:space-between;gap:var(--in);min-width:0;position:relative}   /* altura = módulos inteiros; a folga se distribui entre as linhas */
.card.measure{align-self:start}
.card{user-select:none;-webkit-user-select:none}
.card input,.card textarea,.val,.desc{user-select:text;-webkit-user-select:text}   /* textos para copiar */
/* borda de estado desenhada por um anel SVG sobre a borda do cartão (não muda o tamanho do conteúdo):
   .rg = trecho colorido (fade, tocando), .sp = pontilhado da faixa suspensa */
.ring{position:absolute;left:-1px;top:-1px;pointer-events:none;overflow:visible}
.ring path{fill:none;stroke:var(--red);stroke-width:3}
.ring .rg{display:none}
.ring .sp{display:none}                       /* suspensa: tracejado vermelho (traço 12 / espaço 8, ajustado em JS) */
.ring .dg{display:none;stroke:#6b6b6b;stroke-width:2}   /* guia de destino ao arrastar: mesmo tracejado, cinza */
.card.drag .ring .dg{display:block}
.card.drag .ring .sp,.card.drag .ring .rg{display:none!important}
.card.drag.nodash .ring .dg{display:none}
.grid.dragging .vid iframe{visibility:hidden}   /* durante o arraste os vídeos não são redesenhados: bem mais leve */
.grid.dragging .card{will-change:transform}   /* ponteiro fora da grade: sem tracejado */
.card.susp .ring .sp{display:block}
.card.susp .play{color:var(--redhi)}
/* cartão selecionado */
.card.sel{--cbg:var(--card-sel);--halo:var(--card-sel)}   /* selecionado: fundo um pouco mais claro (sem borda branca) */
/* guia ao arrastar: contorno tracejado na vaga de destino */
.card.drag{background:transparent;border-color:transparent;box-shadow:none}
.card.drag>*:not(.ring){visibility:hidden}

.head{display:flex;align-items:center;gap:8px;min-height:40px}
.grip{flex:none;display:flex;align-items:center;justify-content:center;width:12px;height:40px;color:#6b6b6b;cursor:grab}
.grip svg{width:12px;height:16px}
.cover{width:40px;height:40px;border-radius:8px;background:#242424;color:#e5e5e5;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none}
.cover img{width:100%;height:100%;object-fit:cover;display:block}
.cover svg{width:22px;height:22px}
.ttl{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px;cursor:grab}
.line{display:flex;gap:6px;align-items:center;min-width:0}
.warn{flex:none;display:flex}
.nm-wrap{flex:1;min-width:0;overflow:hidden;white-space:nowrap;font-size:14px;font-weight:500;line-height:19px;height:19px}
.nm-in{display:inline-block}
.nm-in.mq{animation:mq linear infinite;will-change:transform}
.nm-in.mq:hover{animation-play-state:paused}
.nm-in.ell{display:block;overflow:hidden;text-overflow:ellipsis}
.seg{display:inline-block;padding-right:36px}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.nm-in.mq{animation:none}}
.orig{display:flex;align-items:center;gap:4px;color:var(--muted);cursor:pointer;min-width:0;height:14px}
.orig .chev{flex:none;display:flex;width:14px;height:14px}
.orig .chev svg{width:14px;height:14px}
.orig .nm-wrap{font-size:11px;font-weight:400;line-height:14px;height:14px;color:var(--muted)}
.errl{font-size:11px;line-height:14px;height:14px;color:var(--quiet);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ib{width:28px;height:28px;border-radius:8px;padding:0;color:var(--muted);border-color:transparent;flex:none}
.ib:hover{color:#fff;border-color:var(--line-strong)}
.ib.act{color:#fff;border-color:#6b6b6b}

.tbar{display:flex;align-items:center;height:28px}
.tl{display:flex;align-items:center;gap:2px;flex:1;min-width:0;margin-left:-5px}   /* o 1º ícone segue o alinhamento dos pontinhos */
.confirm{flex:1;min-width:0;display:flex;align-items:center;gap:6px}
.confirm .q{flex:1;min-width:0;font-size:14px;font-weight:500;line-height:19px;white-space:nowrap;overflow:hidden}
.confirm button{width:28px;height:28px;padding:0;flex:none}
.confirm .yes{background:#fff;color:#000;border-color:#fff}
.confirm .yes:hover{background:#e5e5e5;border-color:#fff}
.selo{width:28px;height:28px;display:flex;align-items:center;justify-content:center;flex:none;color:#7a7a7a;font-size:16px;font-weight:600;line-height:1;margin-right:-5px;cursor:default}   /* só um sinal: sem círculo, sem borda, cor apagada */
.selo svg{width:17px;height:17px;stroke-width:1.6}

.body{display:flex;flex-direction:column}
.body.fill{flex:1;min-height:0}
.pane{flex:none}
.fld{display:flex;flex-direction:column;gap:4px}
.pane.fillp{flex:1;display:flex;flex-direction:column;min-height:0}
.desc{font-size:12px;line-height:16px;color:#c9c9c9;overflow-wrap:anywhere}
/* painel de informações: mesmas linhas, fontes e espaços da edição */
.val{font-size:13px;line-height:18px;overflow-wrap:anywhere;color:#fff}
.val.mu{color:#6b6b6b}
.val a{color:var(--muted)}
.val a:hover{color:#fff}
/* tudo da aba de informações tem o mesmo ritmo: espaços iguais entre as linhas */
.pane.info{justify-content:flex-start;gap:4px}
.pane.info .fld.grow{flex:1 1 auto}   /* toda a folga do painel fica com o nome original */
.pane.info .fld{gap:2px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.two .fld:last-child{text-align:right;align-items:flex-end}
.two .fld:last-child .lb{justify-content:flex-end}
.pane .lb{font-size:11px;line-height:14px;color:var(--muted);display:flex;justify-content:space-between;gap:6px}
.edit .lb em{font-style:normal;color:#6b6b6b}
.edit input[type=text],.edit input[type=number],.edit textarea{width:100%;padding:5px 8px;font-size:13px;line-height:18px;border-radius:8px}
.edit textarea{resize:none;height:46px;font-size:12px;line-height:16px;display:block}
.edit .chips{display:flex;gap:4px;flex-wrap:wrap}
.edit .chip{font-size:11.5px;color:var(--muted);border:1px solid var(--line-strong);border-radius:999px;padding:2px 7px;cursor:pointer;line-height:16px;white-space:nowrap}
.edit .chip.act{background:var(--red);border-color:var(--red);color:#fff}
.edit .fade{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.edit .fade label{margin:0;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.edit .fade input.fnum{width:56px;flex:none}
.edit{display:flex;flex-direction:column;gap:8px}
.efields{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:5px}
.efields>.fld{flex:none}
/* com a grade de ícones aberta, os quatro primeiros campos ficam onde estavam (o espaço entre eles é fixado em --eg);
   a grade ocupa o módulo extra, entre o botão de ícone e o fade, que continua sendo o último campo */
.edit.icons .efields{justify-content:flex-start;gap:var(--eg,5px)}
.igrid{flex:1 1 auto;min-height:160px;display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:1fr;gap:2px}
.ig{width:100%;height:100%;min-height:25px;border-radius:8px;padding:0;color:#c9c9c9;border-color:transparent}
.ig svg{width:19px;height:19px}
.ig:hover{border-color:var(--line-strong)}
.ig.sel{border-color:#fff;color:#fff;background:#242424}

.vid{height:200px;border-radius:8px;overflow:hidden;background:#000;flex:none;position:relative}
.vid iframe{width:100%;height:200px;pointer-events:none;display:block;border:0}
.vid.off{position:fixed;left:-10000px;top:0;width:200px;height:200px}
.vid.off iframe{width:200px;height:200px}
/* camada sobre o vídeo: clique toca/pausa; o link do YouTube fica no canto */
.vov{position:absolute;inset:0;z-index:1;cursor:pointer}
.vov .hint{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s}
.vov .hint svg{width:22px;height:22px}
.vov:hover .hint{opacity:.9}
.vov .ytl{position:absolute;right:8px;bottom:8px;width:30px;height:30px;border-radius:8px;background:rgba(0,0,0,.6);color:#fff;border:1px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;opacity:.55;transition:opacity .15s}
.vov .ytl svg{width:16px;height:16px}
.vov:hover .ytl,.vov .ytl:focus-visible{opacity:1}
.vov .ytl:hover{border-color:#fff}

.seek{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted);height:16px;line-height:16px}
.seek input{flex:1;min-width:0;height:16px;margin:0}
.ctl{display:flex;align-items:center;gap:8px}
.circ{width:36px;height:36px;border-radius:50%;padding:0;flex:none}
.card.on .play{background:var(--red);border-color:var(--red)}
.loop.act{border-color:#fff}
.loop:not(.act){color:var(--quiet)}
.vol{display:flex;align-items:center;gap:6px;flex:1;min-width:0;font-size:12px;color:var(--muted)}
.vol input[type=range]{flex:1;min-width:0}
.bar .vbtn{width:26px;height:26px}
.vbtn{width:26px;height:26px;border-radius:6px;padding:0;color:var(--muted);border-color:transparent;flex:none}
.vbtn:hover{color:#fff}
.vbtn.mut{color:var(--quiet)}

.bar .split{display:inline-flex;align-items:stretch;border:1px solid var(--line-strong);border-radius:999px;overflow:hidden}
.bar .split:hover{border-color:#6b6b6b}
.bar .split button{border:0;border-radius:0;background:transparent}
.bar .split button:hover{background:#1a1a1a}
.bar .split button:focus-visible{outline-offset:-3px}
.bar .split .sep{width:1px;margin:7px 0;background:var(--line-strong)}
.bar .split #orgBtn{padding-right:6px}   /* cada parte da cápsula tem a sua área, sem se sobrepor: o brilho do hover não invade a vizinha */
.bar .split .sw{display:inline-flex;align-items:center;gap:6px;padding:0 12px 0 6px;margin-left:0;font-size:11px;color:var(--quiet);cursor:pointer;user-select:none;-webkit-user-select:none}
.bar .split .sw:hover{background:#1a1a1a}
.bar .split .sw:focus-visible{outline:2px solid #fff;outline-offset:-3px}
.bar .split .sw i{position:relative;width:24px;height:14px;border-radius:7px;border:1px solid var(--line-strong);flex:none}
.bar .split .sw i::after{content:'';position:absolute;top:2px;left:2px;width:8px;height:8px;border-radius:50%;background:#6b6b6b;transition:transform .15s,background .15s}
.bar .split .sw.on{color:#fff}
.bar .split .sw.on i{background:var(--red);border-color:var(--red)}
.bar .split .sw.on i::after{background:#fff;transform:translateX(10px)}
.bar .split .lockbtn{padding:8px 12px}
.bar .split.locked{border-color:var(--red)}
.bar .split.locked .sep{background:var(--red)}
.bar .split .lockbtn.act{color:var(--redhi)}
.bar #pauseBtn.resume{background:var(--red);border-color:var(--red)}
.bar button:disabled{opacity:.4;cursor:default}
.bar button:disabled:hover{border-color:var(--line-strong)}
body.locked .ttl,body.locked .grip{cursor:default}
/* confirmação "Remover todas as faixas?" no lugar do botão, como no cartão */
.dc{display:flex;align-items:center;gap:6px}
.dc .q{font-size:13px;font-weight:500;white-space:nowrap}
.bar .dc button.sq{width:28px;height:28px;padding:0}
.bar .dc button.yes,.ctx button.yes{background:#fff;color:#000;border-color:#fff}
.bar .dc button.yes:hover,.ctx button.yes:hover{background:#e5e5e5;border-color:#fff}
/* menu do botão direito */
.ctx{--halo:var(--card);position:fixed;z-index:50;min-width:250px;background:var(--card);border:1px solid var(--line-strong);border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:6px;box-shadow:0 8px 28px rgba(0,0,0,.6)}
.ctx button{width:100%;justify-content:flex-start;padding:8px 14px;font-size:13px;border-radius:8px}
.ctx button.resume{background:var(--red);border-color:var(--red)}
.ctx .cap{font-size:11px;color:var(--quiet);padding:2px 6px 0}
.ctx .sepl{height:1px;background:var(--line);margin:2px 0}
.ctx .dc{padding:0}
.ctx .dc button.sq{width:28px;height:28px;padding:0;justify-content:center;flex:none}
.ctx .dc .q{flex:1;padding-left:4px}
.ctx .lockon{color:var(--redhi);border-color:var(--red)}
/* retângulo de seleção */
.marq{position:absolute;z-index:40;border:1px solid #fff;background:rgba(255,255,255,.08);pointer-events:none}

/* ---------- fila de espera (esquerda) e zona ativa (direita) ---------- */
.main{display:flex;gap:24px;align-items:flex-start;min-height:calc(100vh - var(--mtop,110px) - 20px)}   /* a linha divisória (borda da fila) vai até o fim da tela mesmo sem faixas */
.queue{--halo:var(--bg);flex:none;width:325px;min-width:0;padding-right:24px;border-right:1px solid var(--line);position:sticky;top:12px;align-self:stretch;min-height:min(60vh,420px);max-height:calc(100vh - 24px);display:flex;flex-direction:column}   /* sempre alto o bastante para servir de alvo ao soltar um cartão */
.queue[hidden]{display:none}
.zone{flex:1;min-width:0;position:relative}
.main{gap:24px}
.ptitle{display:flex;align-items:center;gap:8px;min-height:32px;margin-bottom:6px}
.ptitle b{font-size:15px;font-weight:500;letter-spacing:.5px}
.ptitle .cnt{font-size:12px;color:var(--quiet)}
.ptitle .ytnote{font-size:12px;line-height:1.3;color:var(--quiet);margin-left:10px;min-width:0}   /* quebra em 2 linhas se a zona estiver estreita */
.ptitle .ytnote[hidden]{display:none}
.ib[hidden]{display:none}
.ptitle .tools{margin-left:auto;display:flex;gap:2px}
.zone .bar{margin-top:8px}
.zone.dropping{outline:1px dashed #6b6b6b;outline-offset:8px;border-radius:12px}
.queue.qdropz{outline:1px dashed #6b6b6b;outline-offset:4px;border-radius:12px}
#empty{min-height:200px;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 16px}
#empty[hidden]{display:none}
.gghost{border:2px dashed #6b6b6b;border-radius:12px;pointer-events:none}

/* barra de ações da seleção na fila */
.qbar{position:absolute;left:0;right:12px;z-index:5;display:flex;align-items:center;gap:6px;min-height:36px;padding:3px 3px 3px 10px;background:#1b1b1b;border:1px solid var(--line-strong);border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.55)}   /* flutua logo abaixo da última faixa selecionada; as linhas não se mexem */
.qbar[hidden]{display:none}
.qbar .qn{flex:1;min-width:0;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qbtns{display:flex;align-items:center;gap:2px}
.qbar{pointer-events:none}   /* só os botões do painel recebem cliques: o resto deixa passar para a faixa de baixo */
.qbar button,.qbar select,.qbfm{pointer-events:auto}
.qbar .qconf{pointer-events:auto}
.qbar.thru{opacity:.55}
.qbar.conf .qn{display:none}
.qbar .qconf .q{white-space:nowrap;overflow:visible;text-overflow:clip}
.qbar.thru button,.qbar.thru select,.qbar.thru .qconf,.qbar.thru .qbfm{pointer-events:none}
.qbtns[hidden]{display:none}
.qbar .ib[hidden]{display:none}
.qbar select,.qset select{background:var(--cbg,#141414);color:#fff;border:1px solid var(--line-strong);border-radius:8px;font:inherit;font-size:12px;padding:3px 4px;max-width:104px}
.qset select{max-width:none;width:100%;padding:5px 8px;font-size:13px}
.qconf{display:flex;align-items:center;gap:6px;flex:1;min-width:0;justify-content:flex-end}
.qconf[hidden]{display:none}
.qconf .q{flex:1;min-width:0;font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
.qconf button.sq{width:28px;height:28px;padding:0;flex:none}
.qconf button.yes{background:#fff;color:#000;border-color:#fff}
.qconf button.yes:hover{background:#e5e5e5;border-color:#fff}

.qlist{position:relative;overflow-y:auto;overflow-x:hidden;flex:1;min-height:60px;display:flex;flex-direction:column;gap:6px;padding:0 12px 16px 0;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#333 transparent}
.qf{display:flex;flex-direction:column;gap:4px}
.qf.loose:not(.has-f){flex:1;min-height:40px}
.qf.loose.has-f{margin-top:6px}
.qfh{--fhbg:var(--bg);--metaw:50px;position:relative;display:flex;align-items:center;gap:4px;min-height:30px;padding:0 2px 0 0;font-size:13px;cursor:default}
.qfh[hidden]{display:none}
.qfh .qgrip{flex:none;width:12px;height:28px;display:flex;align-items:center;justify-content:center;color:#6b6b6b;cursor:grab}
.qfh .qgrip svg{width:12px;height:16px}
.qfh .fi{flex:none;display:flex;color:var(--muted)}
.qfh .fi svg{width:16px;height:16px}
.qfh .fico{color:var(--quiet);margin-right:2px}
.qfh .fn{font-size:13px;line-height:17px;height:17px;font-weight:500;cursor:pointer}
.qfh.sem .fn{font-weight:400;color:var(--quiet);cursor:default}
.qfh input.fedit{flex:1;min-width:0;padding:3px 8px;font-size:13px;border-radius:6px;background:var(--bg)}
/* números: coluna fixa à direita, igual em todas as pastas e em "Sem pasta" (bolinha | total), algarismos de mesma largura */
.qmeta{flex:none;width:calc(var(--metaw) - 2px);display:grid;grid-template-columns:20px 22px;column-gap:3px;align-items:center;font-variant-numeric:tabular-nums}
.qmeta .qb{grid-column:1;justify-self:center;width:20px;height:18px;padding:0;box-sizing:border-box;border-radius:9px;background:var(--red);color:#fff;font-size:10.5px;line-height:18px;font-weight:500;text-align:center}   /* vermelho = faixas da pasta na zona ativa */
.qmeta .qb[hidden]{display:none}
.qmeta .ct{grid-column:2;justify-self:end;font-size:11.5px;color:var(--quiet);white-space:nowrap}
/* lápis e x: só com o mouse em cima; flutuam à esquerda dos números (nada se desloca) */
.qfa{position:absolute;right:var(--metaw);top:0;bottom:0;display:none;align-items:center;gap:0;padding-left:16px;background:linear-gradient(to right,transparent,var(--fhbg) 14px)}
.qfh:hover .qfa,.qfh:focus-within .qfa{display:flex}
.qfa .ib{width:24px;height:24px}
.qfa .ib svg{width:15px;height:15px}
.qfh.qover{--fhbg:#161616;background:#161616;border-radius:6px}
.qfh.conf .fn,.qfh.conf .qmeta,.qfh.conf .qfa{display:none}
.qfh .qconf{justify-content:flex-end}
.qfb{display:flex;flex-direction:column;gap:6px;padding-left:12px;min-height:6px}
.qf.shut .qfb{display:none}
.qf.loose:not(.has-f) .qfb{padding-left:0;flex:1}
.qf.loose .qfb{padding-left:0}
.qhint{font-size:11px;color:var(--quiet);padding:4px 6px}

.qit{--cbg:var(--card);--halo:var(--cbg);background:var(--cbg);border:1px solid var(--line);border-radius:8px;min-width:0}
.qit.sel{--cbg:var(--card-sel)}
.qit.pl{border-color:var(--red);box-shadow:0 0 0 1px var(--red)}   /* tocando na zona ativa: borda vermelha, como no cartão */
.qit.drag,.qf.drag{opacity:.35}
.qind{position:absolute;left:0;right:12px;height:2px;background:var(--redhi);border-radius:2px;pointer-events:none;z-index:2}
.qind[hidden]{display:none}
.qrow{display:flex;align-items:center;gap:6px;padding:4px 4px 4px 3px;min-height:44px;cursor:default;user-select:none;-webkit-user-select:none}
.qgrip{flex:none;width:12px;height:36px;display:flex;align-items:center;justify-content:center;color:#6b6b6b;cursor:grab}
.qgrip svg{width:12px;height:16px}
.qdot{flex:none;width:8px;height:8px;border-radius:50%;background:transparent}
.qit.inz>.qrow .qdot{background:var(--redhi)}
.qtx{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:1px}
.qtx .nm-wrap{flex:none}
.qtx .qn{font-size:13px;font-weight:500;line-height:17px;height:17px}
/* hierarquia da fila: nome (13 px, branco, médio) > descrição (12 px, cinza-claro) > nome original (10,5 px, itálico, cinza escuro) */
.qtx .qd{font-size:12px;font-weight:400;line-height:15px;height:15px;color:#d6d6d6}
.qtx .qo{font-size:10.5px;font-weight:400;font-style:italic;line-height:14px;height:14px;color:#7d7d7d}
.qtx .qo[hidden],.qtx .qd[hidden]{display:none}
.qselo{flex:none;display:flex;color:var(--muted)}
.qselo svg{width:15px;height:15px}
.qselo[hidden]{display:none}
.qwarn{flex:none;display:flex}
.qwarn svg{width:15px;height:15px}
.qwarn[hidden]{display:none}
.qrow .ib{width:26px;height:26px}
.qrow .ib svg{width:16px;height:16px}
.qsend[hidden],.qback[hidden],.qmore[hidden]{display:none}
.qmore{flex:none}
.qrow .qconf{flex:1;min-width:0}
.qrow.conf>*:not(.qconf):not(.qgrip){display:none}
.qgear.act{color:#fff;border-color:#6b6b6b}

/* largura da fila: linha arrastável entre a fila e a zona ativa */
.qresize{position:absolute;top:0;bottom:0;right:-5px;width:11px;cursor:col-resize;z-index:6;touch-action:none}
.qresize::after{content:'';position:absolute;left:5px;top:0;bottom:0;width:1px;background:transparent}
.qresize:hover::after,.qresize.on::after,.qresize:focus-visible::after{left:4px;width:3px;border-radius:2px;background:#6b6b6b}
.qresize:focus-visible{outline:none}
body.resizing{cursor:col-resize;user-select:none;-webkit-user-select:none}

/* organizador da fila */
.qsortm{position:absolute;top:38px;right:26px;z-index:20;width:268px;padding:6px;background:#141414;border:1px solid var(--line-strong);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:2px}
.qsortm[hidden]{display:none}
.qsh{font-size:11px;color:var(--quiet);padding:4px 8px 6px}
.qsi{box-sizing:border-box;width:100%;justify-content:flex-start;align-items:flex-start;gap:8px;text-align:left;padding:6px 8px;border-radius:8px;border-color:transparent}
.qsi:hover{border-color:var(--line-strong)}
.qsi .ck{flex:none;width:16px;height:18px;display:flex;align-items:center;color:#fff}
.qsi .ck svg{width:15px;height:15px}
.qsi .tx{display:flex;flex-direction:column;gap:1px;min-width:0}
.qsi b{font-size:13px;font-weight:500;line-height:18px}
.qsi small{font-size:11px;line-height:14px;color:var(--quiet)}
.qsi.on{background:#1e1e1e}
.qsn{font-size:11px;line-height:14px;color:var(--quiet);padding:6px 8px 4px;border-top:1px solid var(--line);margin-top:4px}

/* configurações da faixa (abre sob a linha) */
.qset{--eg:8px;padding:4px 10px 10px 10px;border-top:1px solid var(--line)}
.qset .efields{gap:8px;padding-top:6px}
.qset .lb{font-size:11px;line-height:14px;color:var(--muted);display:flex;justify-content:space-between;gap:6px}
.qset .qvol input[type=text].num{width:46px;flex:none;padding:5px;font-size:12px;line-height:14px;height:26px;border-radius:6px;background:transparent}
.qset .igrid{min-height:150px}
.qset .qvol{display:flex;align-items:center;gap:4px}
.qset .qvol input[type=range]{flex:1;min-width:0}
.qset .qvol .ib{width:26px;height:26px;flex:none}
.qset .qvol .loop:not(.act){color:var(--quiet)}
.qset .qvol .loop.act{border-color:#fff;color:#fff}
.qset .qinfo{font-size:11px;color:var(--muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.qset .qinfo a{color:var(--muted)}
.qset .qinfo a:hover{color:#fff}
.qset{display:flex;flex-direction:column;gap:8px}
.qset .qacts{display:flex;flex-direction:column;gap:6px;padding-top:2px}
.qset .qtog .chv{margin-left:auto;display:flex}
.qset .qtog svg{width:15px;height:15px}
.qset .qtog.act{border-color:#6b6b6b}
.qset .qsub{padding:2px 0 4px 8px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.qset .qsub[hidden]{display:none}
.qset .qsub .efields{padding-top:2px}
.qset .qlink{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);text-decoration:none;padding:4px 0}
.qset .qlink:hover{color:#fff}
.qset .qlink svg{width:14px;height:14px}
.qset .qbtn svg{width:15px;height:15px;flex:none}
.qset .qbtn[hidden],.qset .qdel[hidden]{display:none}
.qset .qbtn,.qset .qtog{box-sizing:border-box;width:100%;min-height:32px;justify-content:flex-start;padding:6px 12px;font-size:12.5px;border-radius:8px}   /* todos os botões do menu têm o mesmo tamanho */
.qset .qdel{display:flex;align-items:center;gap:6px;width:100%}
.qset .qdel>.qbtn{flex:1}
.qset .qdel .qconf{box-sizing:border-box;justify-content:flex-start;min-height:32px;padding-left:12px}   /* mesma caixa e mesmo recuo do botão que ela substitui */
.qset .qdel .qconf .q{text-align:left}

@media (max-width:900px){
  .main{flex-direction:column;min-height:0}
  .queue{align-self:auto;position:static;width:100%!important;min-height:0;max-height:60vh;padding-right:0;border-right:0}
  .qresize{display:none}
  .zone{width:100%}
}
@media (max-width:520px){
  body{padding:14px}
  .bar .mv{margin-left:0;width:100%}
  .bar .mv input[type=range]{flex:1}
}

/* menu de pastas do painel da seleção (abre a partir do ícone de pasta) */
.qbfm{position:absolute;top:calc(100% + 4px);right:0;z-index:7;min-width:170px;max-width:100%;max-height:220px;overflow:auto;padding:5px;background:#141414;border:1px solid var(--line-strong);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:2px}
.qbfm[hidden]{display:none}
.qbfi{box-sizing:border-box;width:100%;justify-content:flex-start;gap:8px;text-align:left;padding:6px 8px;border-radius:8px;border-color:transparent;font-size:13px}
.qbfi:hover{border-color:var(--line-strong);background:#1e1e1e}
.qbfi .fi{flex:none;width:16px;height:16px;display:flex;align-items:center;color:var(--muted)}
.qbfi .fi svg{width:15px;height:15px}
.qbfi .tx{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* pergunta no meio da tela (faixa que já está na mesa) */
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6);padding:16px}
.modal[hidden]{display:none}
.mbox>*{flex-shrink:0}   /* em telas baixas o pop-up rola; nada dentro dele é espremido (a capa 16:9 distorcia) */
.mbox{width:min(380px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:20px 22px;background:#141414;border:1px solid var(--line-strong);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.7);display:flex;flex-direction:column;gap:6px}
.mbox .mq{margin:0;font-size:15px;font-weight:500;line-height:1.4}
.mbox .info{overflow-wrap:anywhere}
.mbtns{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.mbtns button{padding:7px 16px;font-size:13px}
.mbtns .mred{background:var(--red);border-color:var(--red)}

/* editor da adição completa (dentro do pop-up de adição) */
.afed{padding:0;border:0}
.afed .qsub{margin-top:2px;padding-left:0;border-left:0}

.mwide{width:min(460px,100%)}
.amopts{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.amopt{box-sizing:border-box;width:100%;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:3px;text-align:left;padding:12px 14px;border-radius:10px}
.amopt b{font-size:14px;font-weight:500}
.amopt span{font-size:12px;color:var(--quiet)}
.mbox .addfull{margin-top:8px}
.afdest{display:flex;flex-direction:column;gap:7px;margin-top:10px;padding-top:12px;border-top:1px solid var(--line)}   /* pasta e zona ativa ficam no fim, junto do botão Adicionar */
#dupName{margin:8px 0 0;font-size:13px;color:#fff}
/* caçamba e devolver tudo: com texto (como os outros botões da zona); quando falta espaço ficam só com o símbolo (fitBar) */
.bar #delBtn svg{width:20px;height:20px}
.bar #backBtn svg{width:19px;height:19px}
.bar.nodel #delBtn span,.bar.noback #backBtn span{display:none}
.bar.nodel #delBtn{padding:6px 11px}
.bar.noback #backBtn{padding:7px 11px}

/* botão fixo do cabeçalho: abre o pop-up de adição (fica no mesmo lugar com a fila aberta ou fechada) */
.addopen{margin-left:auto;padding:8px 18px 8px 14px;font-size:14px;font-weight:500;gap:7px;background:var(--red);border-color:var(--red)}   /* mesma fonte e espessura dos títulos e apelidos */
.addopen:hover{background:#9a1a1d;border-color:#9a1a1d}
.addopen svg{width:17px;height:17px;stroke-width:3.4}   /* o "+" também mais grosso */
.mbox .add{margin-top:12px}
.mbox .add input{padding:9px 11px;font-size:13px}
.mbox #msg{margin:6px 0 0}
#amLink{margin:4px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar.nolbl .mv>span{display:none}   /* sem espaço: o texto "Volume geral" some (o ícone de volume e o título do campo continuam) */
/* encolhimento ao vivo da barra de botões: só o símbolo fica */
.bar.noorg #orgBtn span,.bar.novid #vidBtn span,.bar.nostop #stopBtn span,.bar.nopause #pauseBtn span{display:none}
.bar.noorg .split #orgBtn{padding:8px 8px 8px 12px}
.bar.novid #vidBtn,.bar.nostop #stopBtn,.bar.nopause #pauseBtn{padding:8px 11px}
/* teste estético: os pop-ups têm a mesma borda vermelha do cartão que está tocando (anel de 3 px) */
.mbox{border-color:var(--red);box-shadow:0 0 0 2px var(--red),0 12px 40px rgba(0,0,0,.7)}
.amopt:hover,.amopt:focus-visible{border-color:var(--red);background:var(--card-sel);box-shadow:0 0 0 1px var(--red);outline:none}   /* ao passar o cursor: borda vermelha e o brilho de seleção */

/* ---------- arquivos locais (etapa 01-03) ---------- */
/* área de arrastar/escolher arquivo no pop-up: clicável, por isso tem borda (tracejada) */
.amor{display:flex;align-items:center;gap:10px;margin:10px 0 0;font-size:12px;color:var(--quiet)}
.amor::before,.amor::after{content:"";flex:1;height:1px;background:var(--line)}
.dz{box-sizing:border-box;width:100%;margin-top:10px;justify-content:flex-start;gap:12px;text-align:left;padding:14px 16px;border-radius:10px;border-style:dashed}
.dz .dzi{flex:none;color:var(--muted);display:flex}
.dz .dzi svg{width:24px;height:24px}
.dz .dzt{display:flex;flex-direction:column;gap:3px;min-width:0}
.dz .dzt b{font-size:14px;font-weight:500}
.dz .dzt span{font-size:12px;color:var(--quiet)}
.dz:hover,.dz:focus-visible,.dz.over{border-color:var(--red);background:var(--card-sel);outline:none}
.dz.over{box-shadow:0 0 0 1px var(--red)}
.dz.over .dzi{color:#fff}
/* arquivos já escolhidos (ainda não adicionados) */
.fchips{display:flex;flex-direction:column;gap:6px;margin-top:12px;max-height:168px;overflow:auto}
.fchip{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 12px;border-radius:8px;background:var(--card)}
.fchip .fn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.fchip .fm{flex:none;font-size:11px;color:var(--quiet)}
.fchip .fx{flex:none;width:26px;height:26px;padding:0;border-radius:999px}
.fchip .fx svg{width:14px;height:14px}
.fchips+.dz{margin-top:8px;padding:9px 14px}
.fchips+.dz .dzi svg{width:18px;height:18px}
/* arrastando arquivos sobre a tela */
.dropov{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.72);pointer-events:none}
.dropov>div{display:flex;flex-direction:column;align-items:center;gap:6px;padding:48px 64px;border:2px dashed var(--red);border-radius:16px;background:#141414;box-shadow:0 0 0 2px var(--red)}
.dropov b{font-size:18px;font-weight:500}
.dropov span{font-size:12px;color:var(--quiet)}
/* aviso curto no pé da tela */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:120;max-width:min(560px,calc(100vw - 32px));padding:10px 16px;border-radius:10px;background:#1e1e1e;color:#fff;font-size:13px;line-height:1.45;box-shadow:0 8px 28px rgba(0,0,0,.6);text-align:center}
/* player de arquivo dentro do cartão */
.lhost{height:200px;position:relative;background:#000}
.lhost video{width:100%;height:200px;object-fit:contain;display:block;pointer-events:none;background:#000}
.lhost audio{display:none}
.lhost .apic{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#3a3a3a;background:#0b0b0b}
.lhost .apic svg{width:64px;height:64px;stroke-width:1.5}
.lhost .apic img{width:100%;height:100%;object-fit:contain;display:block}
.vid.off .lhost,.vid.off .lhost video{width:200px;height:200px}
.grid.dragging .vid video{visibility:hidden}

/* ---------- várias mesas (01-03-02) ---------- */
header{flex-wrap:wrap;row-gap:10px;min-height:35px}   /* altura fixa: DJ-DM fica no mesmo lugar nas Minhas mesas e dentro da mesa */
/* botão que minimiza a mesa: ícone de camadas + texto (não se parece com a seta de devolver à fila) */
.hubbtn{padding:7px 14px 7px 11px;font-size:13px}
.hubbtn svg{width:17px;height:17px}
.mcur{display:flex;align-items:center;gap:10px;min-width:0;padding-left:14px;margin-left:4px;border-left:1px solid var(--line)}
.mcov{flex:none;width:34px;height:34px;border-radius:8px;overflow:hidden;background:#242424;color:#e5e5e5;display:flex;align-items:center;justify-content:center}
.mcov img{width:100%;height:100%;object-fit:cover;display:block}
.mcov svg{width:18px;height:18px}
.mnm{font-size:17px;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(40vw,420px)}
.mcur .ib{flex:none}
/* tela Minhas mesas */
.hubt{margin-bottom:6px}   /* título igual ao de Fila de espera e Zona ativa (.ptitle) */
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.mcard{position:relative;box-sizing:border-box;display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:14px;background:#141414;border:1px solid var(--line-strong);cursor:pointer;outline:none}
.mcard:hover,.mcard:focus-visible{border-color:var(--red);background:var(--card-sel);box-shadow:0 0 0 1px var(--red)}   /* igual às opções de adição */
.mcard:focus-visible{outline:none}
.mcover{position:relative;aspect-ratio:16/9;min-height:0;border-radius:10px;overflow:hidden;background:#242424;color:#e5e5e5;display:flex;align-items:center;justify-content:center}
.mcover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.mcover svg{width:44px;height:44px;stroke-width:1.6}
.mname{flex:none;font-size:17px;font-weight:500;overflow:hidden;white-space:nowrap;line-height:24px;height:24px;padding:0 2px}
.mmeta{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:26px;padding:0 2px}
.mtools{position:absolute;top:22px;right:22px;display:flex;gap:4px;padding:3px;border-radius:11px;background:rgba(0,0,0,.65);opacity:0;transition:opacity .12s}
.mcard:hover .mtools,.mcard:focus-within .mtools{opacity:1}
.mtools .ib{width:30px;height:30px;padding:0}
.mtools .ib svg{width:16px;height:16px}
.mnew{border-style:dashed;border-color:var(--line-strong);background:transparent;align-items:center;justify-content:center;min-height:200px;color:var(--muted);font-size:15px}
.mnew .mplus svg{width:26px;height:26px}
.mnew:hover,.mnew:focus-visible{color:#fff}
/* pop-up nova mesa / editar */
.mmf{margin-top:8px;font-size:12px}
.mmf input{padding:9px 11px;font-size:14px;margin-top:4px}
.mmcov{position:relative;aspect-ratio:16/9;min-height:0;margin-top:12px;border-radius:10px;overflow:hidden;background:#242424;color:#e5e5e5;display:flex;align-items:center;justify-content:center}
.mmcov img{width:100%;height:100%;object-fit:cover;display:block}
.mmcov svg{width:48px;height:48px;stroke-width:1.6}
.mmbtns{display:flex;gap:8px;margin-top:8px}
.mmbtns button{padding:6px 14px;font-size:13px}
.mmicons{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:6px}   /* 7 x 6 = 42 ícones, sem sobra, como na edição do cartão */
.mmicons .mmic{width:100%;height:36px;padding:0;border-radius:8px}
.mmicons .mmic svg{width:18px;height:18px}
.mmicons .mmic.act{border-color:var(--red);background:var(--card-sel);box-shadow:0 0 0 1px var(--red)}
#mmMsg:empty{display:none}

/* pop-up de exclusão da mesa: texto legível */
#mdelQ{font-size:17px}
.mdelname{margin:6px 0 0;font-size:15px;font-weight:500;color:#fff;overflow-wrap:anywhere}
.mdelinfo{margin:2px 0 10px;font-size:14px;line-height:1.55;color:#cfcfcf}

/* capa da mesa: reposicionar (arrastar) e zoom */
.mmcov.edit{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.mmcov.edit.grab{cursor:grabbing}
.mmcov canvas,.mmcov img{position:absolute;inset:0;width:100%;height:100%;display:block}   /* fora do fluxo: o conteúdo não estica a caixa 16:9 (capa distorcida em alguns monitores) */
.mmcov.edit:focus-visible{outline:2px solid #fff;outline-offset:2px}
.mmadj{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px;font-size:12px;color:var(--muted)}
.mmadj label{display:flex;align-items:center;gap:8px}
.mmadj input[type=range]{width:120px}
/* cabeçalho: altura fixa e folgada, para o DJ-DM ficar exatamente no mesmo lugar nas Minhas mesas e dentro da mesa */
header{min-height:40px}
.hubbtn,.addopen{height:36px;box-sizing:border-box}
.mcur{height:36px}
#hSub{font-size:14px;color:#bdbdbd}
/* "Nova mesa": o tracejado padrão (o mesmo da vaga de reposicionar os cartões) */
.mnew{border:2px dashed #6b6b6b;background:transparent}

.plhost{position:fixed;left:-10000px;top:0;width:200px;height:200px;overflow:hidden}   /* player escondido que só lê a lista de uma playlist */
#plQ{font-size:17px}
.amsetnote{margin:2px 0 8px;color:#e5e5e5}   /* aviso do passo 2 de um conjunto: a edição vale para todas as faixas */

/* aviso no rodapé (muitas faixas na zona ativa): vermelho, texto branco, fecha com "Entendido" */
.zwarn{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:125;display:flex;align-items:center;gap:16px;max-width:calc(100vw - 32px);padding:12px 14px 12px 18px;border-radius:12px;background:var(--red);border:1px solid var(--redhi);box-shadow:0 0 0 2px var(--redhi),0 10px 30px rgba(0,0,0,.65);color:#fff;font-size:15px;line-height:1.45}
.zwarn[hidden]{display:none}
.zwarn button{flex:none;padding:7px 16px;font-size:14px;font-weight:500;background:#fff;color:#000;border-color:#fff}
.zwarn button:hover{background:#e5e5e5;border-color:#fff}
body.zb .toast{bottom:96px}
@media (min-width:1000px){.zwarn span{white-space:nowrap}}   /* em telas largas o texto fica numa linha só */
@media (max-width:560px){.zwarn{flex-direction:column;align-items:flex-start}}
#plModal .mbox{width:min(460px,100%)}
#plModal .mbtns button{white-space:nowrap}

/* 01-03-09: 'arrastar um arquivo' usa o tracejado padrão (2px, igual ao Nova mesa e à reposição de cartões) */
.dz{border:2px dashed #6b6b6b}
.dz:hover,.dz:focus-visible,.dz.over{border-color:var(--red)}


/* ---------- pintura da direção A (01-04-01): SÓ APARÊNCIA, nenhuma função muda ----------
   Fonte Figtree (carregada no index.html; sem internet cai para a fonte do sistema), títulos mais firmes, cartões das mesas com o desenho aprovado */
html,body{font-family:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
header>b{font-size:22px;font-weight:800;letter-spacing:.5px}
/* (botões mantêm o peso normal: o peso 500 alargava a barra de comandos e quebrava o ajuste automático) */
.ptitle b{font-weight:600}
.hubt b{font-size:38px;font-weight:800;letter-spacing:-.5px;line-height:1.15}
.hubt .cnt{font-size:16px}
.mcard{border-width:2px;border-color:var(--line);padding:13px}   /* 2 px como no desenho; o padding cai 1 px para o cartão não mudar de tamanho */
.mcard:hover,.mcard:focus-visible{border-color:var(--red)}
.mname{font-weight:700}
.mcover{border-radius:8px}
.mnew{border-color:#6b6b6b}   /* o tracejado de Nova mesa continua o padrão: 2 px, #6b6b6b */
.mnew:hover,.mnew:focus-visible{border-color:var(--red)}

/* ---------- melhorias de UI (01-04-04, aprovadas em 24/10): SÓ APARÊNCIA ----------
   fila como painel (mais claro) x zona ativa no fundo (o "palco"); títulos em Inter Tight; logo com as três barras;
   barra de comandos em grupos; vermelho só no que está tocando; aviso do YouTube num ícone "i" */
:root{--panel:#111}
header>b,.hubt b,.mnm,.ptitle b{font-family:"Inter Tight","Figtree",system-ui,sans-serif}
header>b{letter-spacing:-.02em}
header>.lmark{display:inline-flex;align-items:flex-end;gap:2px;height:16px;margin-right:-2px;font-size:0}
header>.lmark i{display:block;width:3px;border-radius:1px;background:#fff}
header>.lmark i:nth-child(1){height:9px}header>.lmark i:nth-child(2){height:16px;background:var(--redhi)}header>.lmark i:nth-child(3){height:11px}
.hubt b{letter-spacing:-.035em}
.ptitle:not(.hubt) b{font-size:16px;font-weight:700;letter-spacing:-.01em}
/* fila de espera: painel próprio, um tom acima do fundo */
.queue{--halo:var(--panel);background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 10px 0 14px}
.queue .qfh{--fhbg:var(--panel)}
.queue .qit{--cbg:#181818}
.queue .qit.sel{--cbg:#232323}
.queue .ptitle{padding-right:4px}
/* zona ativa: o palco (fundo da página); o título ganha um ponto vermelho quando algo toca */
.zone .ptitle b::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--line-strong);margin-right:8px;vertical-align:2px}
.zone.tocando .ptitle b::before{background:var(--redhi);box-shadow:0 0 0 3px rgba(196,40,44,.18)}
/* barra de comandos em grupos: tocar | organizar | volume */
.bar #backBox{position:relative}
.bar #backBox::before{content:'';position:absolute;left:-6px;top:7px;bottom:7px;width:1px;background:var(--line)}
.bar .mv::before{content:'';position:absolute;left:-10px;top:7px;bottom:7px;width:1px;background:var(--line)}
.bar .mv{position:relative}
.bar .mv>span{color:#d6d6d6}
/* vermelho só no que toca: controles deslizantes neutros; no cartão tocando, a barra de tempo fica vermelha */
input[type=range]{accent-color:#d6d6d6}
.card.on .seek,.card.on input.tl,.card.on .tbar input[type=range]{accent-color:var(--red)}
/* pontinhos de arrastar um pouco mais visíveis */
.grip,.qgrip,.qfh .qgrip{color:#8a8a8a}
/* aviso do YouTube: voltou a ser a frase visível ao lado do título (pedido de 24/10) */