:root {
  --bg:#0f1115; --panel:#171a21; --border:#262b36; --text:#e6e8ec;
  --muted:#878d9d; --accent:#3b82f6; --danger:#ef4444; --live:#22c55e; --warn:#f59e0b;
}
* { box-sizing:border-box; }
body {
  margin:0; height:100vh; overflow:hidden; display:flex; flex-direction:column;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--bg); color:var(--text);
}
.hidden { display:none !important; }

button {
  font:inherit; font-size:13px; padding:7px 13px; border-radius:7px; cursor:pointer;
  background:#222732; color:var(--text); border:1px solid var(--border);
}
button:hover:not(:disabled) { background:#2b313e; }
button:disabled { opacity:.35; cursor:default; }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
button.primary:hover:not(:disabled) { background:#2f6fd0; }
button.danger { background:transparent; border-color:#5b2626; color:#f87171; }
button.danger:hover:not(:disabled) { background:#2a1616; }
input, select {
  font:inherit; font-size:13px; padding:7px 9px; border-radius:7px;
  background:#222732; color:var(--text); border:1px solid var(--border);
}
label.field { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); }
.pill {
  display:inline-flex; align-items:center; gap:6px; font-size:12px;
  padding:4px 10px; border-radius:999px; background:#0d1017;
  border:1px solid var(--border); color:var(--muted);
}
.dot { width:7px; height:7px; border-radius:50%; background:var(--muted); flex:none; }
.dot.ok { background:var(--live); } .dot.warn { background:var(--warn); } .dot.bad { background:var(--danger); }

/* ---------------- lobby ---------------- */
.lobby {
  position:fixed; inset:0; z-index:40; display:flex; align-items:center; justify-content:center;
  background:#0b0d12; padding:20px; overflow:auto;
}
.lobby .card {
  width:min(560px,96vw); background:var(--panel); border:1px solid var(--border);
  border-radius:14px; padding:24px; display:flex; flex-direction:column; gap:16px;
}
.lobby h1 { margin:0; font-size:19px; }
.lobby h2 { margin:0; font-size:13px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.lobby p { margin:0; font-size:13px; color:var(--muted); line-height:1.55; }
.lobby label { font-size:12px; color:var(--muted); display:block; margin-bottom:5px; }
.lobby input, .lobby select { width:100%; }
.row { display:flex; gap:10px; }
.row > * { flex:1; }
.divider { height:1px; background:var(--border); }

.roomlist { display:flex; flex-direction:column; gap:6px; max-height:220px; overflow:auto; }
.roomrow {
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  background:#0d1017; border:1px solid var(--border); border-radius:9px; cursor:pointer;
}
.roomrow:hover { border-color:#3a4252; }
.roomrow.sel { border-color:var(--accent); background:#131a28; }
.roomrow .nm { font-weight:600; font-size:14px; }
.roomrow .ct { margin-left:auto; font-size:12px; color:var(--muted); }
.roomrow.cheia { opacity:.45; cursor:default; }
.empty-rooms { font-size:13px; color:var(--muted); padding:14px; text-align:center; }
.err { color:#f87171; font-size:13px; }

/* ---------------- app ---------------- */
header {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 16px; border-bottom:1px solid var(--border); background:var(--panel);
}
.brand { font-weight:600; font-size:15px; }
.spacer { flex:1; }
.group { display:flex; align-items:center; gap:6px; }

.body { flex:1; min-height:0; display:flex; }
.stage { flex:1; min-width:0; padding:10px; display:flex; }

.grid { flex:1; min-height:0; display:grid; gap:10px; grid-template-columns:1fr; }
.grid.n2 { grid-template-columns:1fr 1fr; }
.grid.n3, .grid.n4 { grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }

.player {
  position:relative; min-width:0; min-height:0; background:#000;
  border-radius:10px; overflow:hidden; border:1px solid var(--border);
}
.player video { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; }
.tag {
  position:absolute; top:9px; left:9px; z-index:2; display:flex; align-items:center; gap:6px;
  font-size:11px; padding:4px 9px; border-radius:6px;
  background:rgba(0,0,0,.65); color:#fff; backdrop-filter:blur(4px);
}
.tag .live-dot { width:6px; height:6px; border-radius:50%; background:var(--live); }
.warnbadge {
  position:absolute; top:9px; right:9px; z-index:3; font-size:11px;
  padding:5px 10px; border-radius:6px; background:rgba(120,53,15,.92); color:#fde68a;
}
.controls {
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  display:flex; align-items:center; gap:8px; padding:20px 10px 8px;
  background:linear-gradient(transparent, rgba(0,0,0,.85));
  opacity:0; transition:opacity .18s ease; pointer-events:none;
}
.player:hover .controls, .player.show-controls .controls { opacity:1; pointer-events:auto; }
.controls .right { margin-left:auto; display:flex; align-items:center; gap:2px; }
.ctrl { background:transparent; border:none; padding:5px; border-radius:6px; color:#fff;
        display:inline-flex; align-items:center; cursor:pointer; }
.ctrl:hover { background:rgba(255,255,255,.16); }
.ctrl svg { width:18px; height:18px; fill:currentColor; display:block; }
.vol { width:70px; accent-color:#fff; cursor:pointer; }
.stat { font-size:10px; color:rgba(255,255,255,.8); font-variant-numeric:tabular-nums; }
.tap {
  position:absolute; inset:0; z-index:4; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px; cursor:pointer;
  background:rgba(0,0,0,.6); color:#fff; font-size:13px;
}
.tap svg { width:38px; height:38px; fill:#fff; }

.empty {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; color:var(--muted); text-align:center;
}
.empty svg { width:50px; height:50px; fill:#333a48; }
.empty h3 { margin:0; font-size:15px; color:#b9bfcc; }
.empty p { margin:0; font-size:13px; max-width:400px; line-height:1.5; }

/* ---------------- chat ---------------- */
.side {
  width:290px; flex:none; border-left:1px solid var(--border); background:var(--panel);
  display:flex; flex-direction:column;
}
.side h3 { margin:0; padding:11px 14px; font-size:12px; color:var(--muted);
           text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--border); }
.members { padding:8px 14px; display:flex; flex-wrap:wrap; gap:5px; border-bottom:1px solid var(--border); }
.member { font-size:11px; padding:3px 8px; border-radius:999px; background:#0d1017; border:1px solid var(--border); }
.member.owner::after { content:" ★"; color:var(--warn); }
.msgs { flex:1; overflow:auto; padding:10px 14px; display:flex; flex-direction:column; gap:9px; }
.msg { font-size:13px; line-height:1.45; }
.msg .who { font-weight:600; font-size:12px; color:#9db4e0; }
.msg.sys { color:var(--muted); font-size:12px; font-style:italic; }
.chatbox { display:flex; gap:6px; padding:10px; border-top:1px solid var(--border); }
.chatbox input { flex:1; }

/* ---------------- gaveta ---------------- */
.drawer { border-top:1px solid var(--border); background:var(--panel); }
.drawer summary { padding:7px 16px; font-size:12px; color:var(--muted); cursor:pointer;
                  user-select:none; list-style:none; }
.drawer summary::-webkit-details-marker { display:none; }
.drawer summary::before { content:"▸ "; }
.drawer[open] summary::before { content:"▾ "; }
#status { font-family:ui-monospace,Consolas,monospace; font-size:11px; white-space:pre-wrap;
          padding:0 16px 10px; margin:0; max-height:140px; overflow:auto; color:#9aa2b4; }

/* ---------------- banner ---------------- */
.banner {
  display:flex; align-items:flex-start; gap:12px; padding:11px 16px;
  background:#2a2010; border-bottom:1px solid #4a3a15; font-size:13px; line-height:1.5;
}
.banner svg { width:18px; height:18px; fill:var(--warn); flex:none; margin-top:1px; }
.banner b { color:#fbbf24; }
.banner code { background:#0d1017; padding:2px 6px; border-radius:4px;
               font-family:ui-monospace,Consolas,monospace; font-size:12px; }
.banner .acts { margin-left:auto; display:flex; gap:6px; flex:none; }


/* ================= palco: foco + faixa ================= */
.stage { flex:1; min-width:0; padding:10px; display:flex; flex-direction:column; gap:10px; }

.focus {
  flex:1; min-height:0; position:relative;
  background:#000; border-radius:12px; overflow:hidden; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
}
.focus.vazio { background:#12151c; }
.focus video { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; }

/* ---- faixa de participantes (estilo Discord) ---- */
.strip { flex:none; display:flex; gap:10px; height:132px; overflow-x:auto; padding-bottom:2px; }
.tile {
  position:relative; flex:0 0 208px; border-radius:10px; overflow:hidden;
  border:2px solid transparent; cursor:pointer; background:#1e2129;
  display:flex; align-items:center; justify-content:center; transition:border-color .15s;
}
.tile:hover { border-color:#3a4252; }
.tile.focado { border-color:var(--accent); }
.tile.offline { opacity:.5; cursor:default; }
.tile video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

.avatar {
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:22px; font-weight:600; color:#fff; user-select:none;
}
.tile .nome {
  position:absolute; left:8px; bottom:7px; z-index:2; max-width:calc(100% - 70px);
  font-size:12px; padding:3px 8px; border-radius:6px; color:#fff;
  background:rgba(0,0,0,.7); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tile .badge {
  position:absolute; right:8px; bottom:7px; z-index:2;
  font-size:10px; font-weight:600; letter-spacing:.04em;
  padding:3px 7px; border-radius:5px; background:var(--danger); color:#fff;
}
.tile .badge.assistindo { background:var(--accent); }
.tile .badge.mudo { background:#3a4252; }

/* ---- barra do video em foco ---- */
.focusbar {
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  display:flex; align-items:center; gap:10px; padding:22px 12px 10px;
  background:linear-gradient(transparent, rgba(0,0,0,.88));
  opacity:0; transition:opacity .18s ease; pointer-events:none;
}
.focus:hover .focusbar, .focus.show-controls .focusbar { opacity:1; pointer-events:auto; }
.focusbar .right { margin-left:auto; display:flex; align-items:center; gap:4px; }
.focusbar .quem { font-size:12px; color:#fff; display:flex; align-items:center; gap:6px; }
.focusbar .quem .live-dot { width:6px; height:6px; border-radius:50%; background:var(--live); }

/* ================= modal ================= */
.modal {
  position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.7); padding:20px;
}
.modal .card {
  width:min(440px,94vw); background:var(--panel); border:1px solid var(--border);
  border-radius:14px; padding:22px; display:flex; flex-direction:column; gap:16px;
}
.modal h2 { margin:0; font-size:17px; text-align:center; }
.modal .section { display:flex; flex-direction:column; gap:7px; }
.modal .lbl { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; font-weight:600; }
.modal .note { font-size:12px; color:var(--muted); line-height:1.55; background:#0d1017;
               border:1px solid var(--border); border-radius:8px; padding:10px; }
.modal .note b { color:#c7cdd9; }
.chips { display:flex; gap:7px; }
.chip { flex:1; padding:9px 0; border-radius:8px; background:#0d1017; border:1px solid var(--border); }
.chip.on { background:var(--accent); border-color:var(--accent); color:#fff; }
.modal-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:2px; }

.aviso {
  position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center;
  font-size:14px; color:var(--muted); background:rgba(10,12,16,.75); pointer-events:none;
}

.focusbar .pedir {
  font-size:11px; padding:4px 7px; border-radius:6px;
  background:rgba(0,0,0,.5); color:#fff; border:1px solid rgba(255,255,255,.25);
}

.aviso-sala {
  font-size:12px; line-height:1.5; color:#fbbf24;
  background:#2a2010; border:1px solid #4a3a15; border-radius:8px; padding:9px 11px;
}
.roomrow .sem-senha {
  font-size:10px; padding:2px 7px; border-radius:5px;
  background:#3a2a10; color:#fbbf24; border:1px solid #5a4520;
}

.link-priv {
  font-size:12px; color:var(--muted); text-decoration:none; text-align:center;
  border-top:1px solid var(--border); padding-top:12px; margin-top:2px;
}
.link-priv:hover { color:var(--accent); text-decoration:underline; }
#privModal .card { width:min(520px,94vw); max-height:88vh; overflow:auto; }
#privModal .note b { color:#c7cdd9; }

.aviso-sala.nivel-aberto { color:#fbbf24; background:#2a2010; border-color:#4a3a15; }
.aviso-sala.nivel-fraco  { color:#fca5a5; background:#2a1616; border-color:#5b2626; }
.aviso-sala.nivel-ok     { color:#86efac; background:#0f2318; border-color:#1e4630; }

/* ---------------- painel de convites / membros ---------------- */
.card.painel { width:min(600px,95vw); max-height:90vh; overflow:auto; }
.abas { display:flex; gap:6px; border-bottom:1px solid var(--border); padding-bottom:10px; }
.aba {
  font-size:13px; padding:6px 14px; border-radius:7px;
  background:transparent; border:1px solid transparent; color:var(--muted);
}
.aba.on { background:#222732; border-color:var(--border); color:var(--text); }

.lista { display:flex; flex-direction:column; gap:6px; max-height:260px; overflow:auto; }
.lista .vazio { font-size:13px; color:var(--muted); padding:14px; text-align:center; }
.lista .item {
  display:flex; align-items:center; gap:10px; padding:9px 11px;
  background:#0d1017; border:1px solid var(--border); border-radius:8px;
}
.lista .item.inativo { opacity:.5; }
.lista .info { flex:1; min-width:0; }
.lista .titulo { font-size:13px; font-weight:600; }
.lista .sub { font-size:11px; color:var(--muted); margin-top:2px;
              white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lista .item button { font-size:11px; padding:4px 10px; flex:none; }

.link-novo {
  background:#0f2318; border:1px solid #1e4630; border-radius:8px; padding:11px;
  display:flex; flex-direction:column; gap:6px;
}
.link-novo input { width:100%; font-family:ui-monospace,Consolas,monospace; font-size:11px; }
.note-min { font-size:11px; color:var(--muted); line-height:1.5; margin-top:7px; }
.note-min b { color:#c7cdd9; }


/* ================= lobby ================= */
.lobby .card { gap:18px; }
.lobby-topo { display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.lobby-topo h1 { margin:0; font-size:24px; letter-spacing:-.01em; }
.tagline { margin:0; font-size:13px; color:var(--muted); line-height:1.55; max-width:44ch; }
.nowrap { white-space:nowrap; }

.campo { display:flex; flex-direction:column; gap:6px; }
.campo-rotulo { font-size:12px; color:var(--muted); }
.campo input, .campo select { width:100%; }
.opcional { font-size:11px; color:#5f6674; }
.dica { font-size:11px; color:#6b7280; line-height:1.5; }

/* abas */
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--border); }
.tab {
  flex:1; padding:10px 14px; font-size:13px; font-weight:500;
  background:transparent; border:none; border-bottom:2px solid transparent;
  border-radius:7px 7px 0 0; color:var(--muted);
}
.tab:hover:not(.on) { background:#1a1e26; color:var(--text); }
.tab.on { color:var(--text); border-bottom-color:var(--accent); background:transparent; }
.tab-painel { display:flex; flex-direction:column; gap:14px; }

.vazio-salas { text-align:center; padding:22px 12px; color:var(--muted); }
.vazio-salas p { margin:0 0 6px; font-size:13px; }
.vazio-salas p:last-child { margin:0; }

button.grande { padding:11px 20px; font-weight:600; width:100%; }

/* bloco do dono: aparece so no primeiro acesso */
.dono {
  border:1px solid #3a3520; border-radius:9px; background:#1c1a12; padding:13px;
  display:flex; flex-direction:column; gap:4px;
}
.dono-topo { font-size:11px; font-weight:600; color:#fbbf24;
             text-transform:uppercase; letter-spacing:.05em; }
.dono code { background:#0d1017; padding:1px 5px; border-radius:4px;
             font-family:ui-monospace,Consolas,monospace; font-size:11px; }
.note-min { font-size:12px; color:var(--muted); line-height:1.55; margin:0 0 4px; }
.note-min b { color:#c7cdd9; }

/* foco de teclado visivel em tudo */
button:focus-visible, input:focus-visible, select:focus-visible,
summary:focus-visible, a:focus-visible, .roomrow:focus-visible, .tab:focus-visible {
  outline:2px solid var(--accent); outline-offset:2px;
}
input:focus, select:focus { border-color:#3a4252; }

@media (max-width:520px) {
  .lobby { padding:12px; align-items:flex-start; }
  .lobby .card { padding:18px; }
  .row { flex-direction:column; }
}

/* ================= sala: cabecalho ================= */
header { gap:14px; align-items:center; }
.sala-info { display:flex; flex-direction:column; gap:3px; min-width:0; margin-right:auto; }
.sala-nome { display:flex; align-items:center; gap:8px; font-size:15px; font-weight:600; }
.sala-estado { font-size:12px; color:var(--muted); white-space:nowrap;
               overflow:hidden; text-overflow:ellipsis; max-width:52ch; }

.acoes { display:flex; align-items:center; gap:8px; }
.acoes-menores { display:flex; align-items:center; gap:2px; }

/* botoes secundarios: presentes, sem competir com a acao principal */
button.quieto {
  background:transparent; border-color:transparent; color:var(--muted); font-size:12px;
}
button.quieto:hover:not(:disabled) { background:#222732; color:var(--text); }
button.icone { padding:5px 9px; line-height:1; }
button.parar { background:transparent; border-color:#5b2626; color:#f87171; }
button.parar:hover { background:#2a1616; }

/* ================= sala: conversa ================= */
.side { width:300px; }
.side-topo {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px 10px 16px; font-size:12px; color:var(--muted);
  text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--border);
}
.msgs { gap:2px; padding:14px; }
.msg { font-size:14px; line-height:1.5; display:flex; flex-direction:column; gap:3px; }
.msg + .msg { margin-top:8px; }
.msg.seguida { margin-top:2px; }
.msg .who { font-size:12px; font-weight:600; color:#9db4e0; }
.msg .balao {
  background:#1c2029; border-radius:4px 12px 12px 12px; padding:7px 11px;
  align-self:flex-start; max-width:92%; word-break:break-word;
}
.msg.minha { align-items:flex-end; }
.msg.minha .who { color:#7dd3a8; }
.msg.minha .balao { background:#1e3a2c; border-radius:12px 4px 12px 12px; align-self:flex-end; }
.msg.sys {
  color:var(--muted); font-size:12px; font-style:normal; text-align:center;
  padding:5px 0; margin-top:8px;
}
.chatbox { padding:12px; gap:8px; }
.chatbox input { font-size:14px; padding:9px 12px; border-radius:9px; }

.abrir-chat {
  position:fixed; right:16px; bottom:52px; z-index:20;
  width:42px; height:42px; border-radius:50%; font-size:17px;
  background:var(--panel); border:1px solid var(--border);
}
.abrir-chat:hover { background:#222732; }

/* ================= modal: presets ================= */
.presets { display:flex; gap:8px; }
.preset {
  flex:1; display:flex; flex-direction:column; gap:3px; align-items:flex-start;
  padding:11px; border-radius:9px; background:#0d1017; border:1px solid var(--border);
  text-align:left;
}
.preset:hover:not(.on) { border-color:#3a4252; }
.preset.on { border-color:var(--accent); background:#131a28; }
.preset-nome { font-size:13px; font-weight:600; color:var(--text); }
.preset-det { font-size:11px; color:#8b93a3; font-variant-numeric:tabular-nums; }
.preset-uso { font-size:11px; color:#6b7280; line-height:1.4; }
.modal .dica { display:block; margin-top:5px; }
.modal .dica b { color:#c7cdd9; }

@media (max-width:900px) {
  .side { width:260px; }
  .sala-estado { max-width:30ch; }
}
@media (max-width:720px) {
  header { gap:8px; }
  .acoes-menores { order:3; }
  /* O chat era position:fixed aqui, virando uma gaveta por CIMA do video: a
     transmissao continuava do tamanho todo, mas 55% dela ficava escondida
     atras do chat - dai a sensacao de "video minusculo". Empilhando de
     verdade, o video encolhe e continua inteiro visivel. */
  .body { flex-direction:column; }
  .side {
    width:auto; height:min(45vh, 340px); flex:none;
    border-left:none; border-top:1px solid var(--border);
  }
  .stage { min-height:0; }
  .presets { flex-direction:column; }
  .preset { flex-direction:row; align-items:baseline; gap:8px; }
}

/* tipo de sala: privada (padrao) ou publica */
.tipo-sala { border:0; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.tipo-sala legend { padding:0; margin-bottom:2px; }
.tipo-sala .opt {
  display:flex; align-items:flex-start; gap:9px; padding:9px 11px; cursor:pointer;
  background:#0d1017; border:1px solid var(--border); border-radius:9px;
}
.tipo-sala .opt:has(input:checked) { border-color:var(--accent); background:#111a2b; }
/* O radio herdava '.lobby input { width:100% }' (linha 49): inchava, empurrava
   o texto para fora da caixa e ele quebrava letra a letra. Precisa desfazer as
   tres coisas - largura, preenchimento e moldura - que valem para campos de
   texto e nao para um botao de radio. */
.tipo-sala .opt input[type="radio"] {
  width:auto; min-width:0; flex:0 0 auto; margin:1px 0 0;
  padding:0; background:none; border:0; border-radius:0;
  accent-color:var(--accent); cursor:pointer;
}
/* min-width:0 deixa o texto quebrar por palavra dentro do flex, nao estourar */
.tipo-sala .opt-txt { flex:1 1 auto; min-width:0; }
.tipo-sala .opt-txt { display:flex; flex-direction:column; gap:2px; }
.tipo-sala .opt-txt b { font-size:13px; font-weight:600; }
.tipo-sala .opt-txt small { font-size:11px; color:var(--muted); line-height:1.45; }

/* selos ao lado do nome da sala: dizem o tipo e se voce e o dono */
.selo {
  font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.05em;
  padding:2px 7px; border-radius:999px; background:#222732; color:var(--muted);
  border:1px solid var(--border); white-space:nowrap;
}
.selo.dono { background:#13291f; color:#7dd3a8; border-color:#1f4433; }

/* Era um style= inline. Movido para ca por causa da CSP: sem atributo style no
   markup, a politica pode usar style-src 'self' sem 'unsafe-inline'. */
.diag { margin-left:10px; font-size:11px; padding:3px 9px; }

/* Paleta dos avatares. Estava no JS e era aplicada por style.background, que a
   CSP bloqueia como estilo inline. Aqui vira classe e a politica segue estrita. */
.cor-0 { background:#5865f2; }
.cor-1 { background:#3ba55d; }
.cor-2 { background:#faa81a; }
.cor-3 { background:#ed4245; }
.cor-4 { background:#eb459e; }
.cor-5 { background:#9b59b6; }
.cor-6 { background:#1abc9c; }

/* Era style= dentro de um template de innerHTML no app.js. A CSP trata atributo
   style como estilo inline e bloqueia, mesmo vindo de innerHTML. */
.focusbar .ctrl.parar { font-size:12px; padding:5px 10px; }

/* ---------------------------------------------------------------- desenho */
/* A tela cobre a area de video inteira, mas so recebe clique quando o lapis
   esta ligado - senao ela roubaria os cliques dos controles e do proprio video. */
.tela-desenho {
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%;
  pointer-events:none; touch-action:none;
}
.tela-desenho.ativa { pointer-events:auto; cursor:crosshair; }
.focusbar .ctrl.lapis { font-size:15px; line-height:1; }
.focusbar .ctrl.on { background:var(--accent); color:#fff; }
.focusbar .ctrl.limpar { font-size:12px; padding:5px 10px; }