: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 redesenhado ================= */
.lobby .card { gap:20px; }
.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; }

.secao {
  margin:0 0 10px; font-size:12px; color:var(--muted); font-weight:600;
  text-transform:uppercase; letter-spacing:.05em;
}
.lobby section { display:flex; flex-direction:column; }
button.grande { padding:10px 20px; font-weight:600; flex:none; }

/* blocos recolhidos: presentes, mas fora do caminho */
.opcoes, .dono { border:1px solid var(--border); border-radius:9px; background:#0d1017; }
.opcoes { margin-top:10px; }
.opcoes > summary, .dono > summary {
  padding:9px 12px; font-size:12px; color:var(--muted); cursor:pointer;
  user-select:none; list-style:none;
}
.opcoes > summary::-webkit-details-marker, .dono > summary::-webkit-details-marker { display:none; }
.opcoes > summary::before, .dono > summary::before { content:"▸ "; }
.opcoes[open] > summary::before, .dono[open] > summary::before { content:"▾ "; }
.opcoes > summary:hover, .dono > summary:hover { color:var(--text); }
.opcoes-corpo {
  padding:0 12px 12px; display:flex; flex-direction:column; gap:12px;
  border-top:1px solid var(--border); padding-top:12px;
}

/* foco visivel de teclado - antes so havia o padrao do navegador */
button:focus-visible, input:focus-visible, select:focus-visible,
summary:focus-visible, a:focus-visible, .roomrow: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; }
  button.grande { width:100%; }
}