:root {
  --bg: #0f1419;
  --card: #1b232c;
  --fg: #e8edf2;
  --muted: #9aa7b4;
  --accent: #ff9900;
  --danger: #d13212;
  --ok: #1d8102;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--fg);
  background: var(--bg);
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.warn { color: #ffb4a3; }

.screen { min-height: 100vh; }
#error, #prejoin { display: grid; place-items: center; padding: 24px; }
.card { background: var(--card); border-radius: 12px; padding: 28px; max-width: 920px; width: 100%; }
.prejoin { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; }
.prejoin video { width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 8px; object-fit: cover; transform: scaleX(-1); }
.prejoin-side { display: flex; flex-direction: column; gap: 12px; }
.prejoin-side h1 { margin: 0; font-size: 1.5rem; }
@media (max-width: 720px) { .prejoin { grid-template-columns: 1fr; } }

label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--muted); }
label.check { flex-direction: row; align-items: center; gap: 8px; }
input, select, textarea { font: inherit; color: var(--fg); background: #0f1419; border: 1px solid #33404d; border-radius: 6px; padding: 8px; }
button { font: inherit; color: var(--fg); background: #2a3643; border: 1px solid #3d4b59; border-radius: 8px; padding: 10px 16px; cursor: pointer; }
button:hover { background: #33424f; }
button:disabled { opacity: .5; cursor: wait; }
button.primary { background: var(--accent); color: #111; border-color: var(--accent); font-weight: 600; }
button.danger { background: var(--danger); border-color: var(--danger); }
/* Estado desligado também é dito no TEXTO do botão, não só na cor */
button.off { border-style: dashed; color: #ffb4a3; }
button.wide { width: 100%; margin-top: 12px; }
.row { display: flex; gap: 8px; }

.meter { height: 6px; background: #0f1419; border-radius: 3px; overflow: hidden; }
.meter div { height: 100%; width: 0; background: var(--ok); transition: width 60ms linear; }

#room { display: grid; grid-template-rows: auto 1fr auto; height: 100vh; }
#room:has(#panel:not([hidden])) { grid-template-columns: 1fr 340px; }
#room:has(#panel:not([hidden])) > :not(#panel) { grid-column: 1; }
.topbar { display: flex; gap: 12px; align-items: center; padding: 10px 16px; }
.badge { padding: 4px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.badge.off { background: #2a3643; border: 1px dashed var(--muted); }
.badge.on { background: var(--danger); border: 2px solid #fff; }

.tiles { --cols: 1; display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 8px; padding: 8px 16px; align-content: center; overflow: hidden; }
.tile { position: relative; background: #000; border-radius: 8px; aspect-ratio: 16/9; overflow: hidden; border: 3px solid transparent; }
.tile.speaking { border: 3px solid var(--ok); }
.tile video { width: 100%; height: 100%; object-fit: cover; }
.tile.no-video video { display: none; }
.tile.no-video::after { content: 'câmera desligada'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); }
.tile .name { position: absolute; left: 8px; bottom: 8px; background: rgba(0,0,0,.65); padding: 2px 8px; border-radius: 4px; font-size: .85rem; }
.controls { display: flex; justify-content: center; gap: 8px; padding: 12px; }

.panel { grid-column: 2; grid-row: 1 / span 3; background: var(--card); padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.panel h2 { font-size: .95rem; margin: 14px 0 0; color: var(--accent); }
.panel h2:first-child { margin-top: 0; }