:root {
  --preto: #0a080e;
  --palco: #060509;
  --painel: #131019;
  --painel-alto: #1c1826;
  --linha: #2a2436;
  --linha-forte: #3a3248;
  --texto: #e9e6f0;
  --fraco: #97909f;
  --roxo: #a685ff;
  --roxo-forte: #8b63ff;
  --vivo: #e879f9;
  --erro: #ff6b6b;
  --raio: 5px;
  --sans: "IBM Plex Sans", ui-sans-serif, "Segoe UI", Roboto, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  background: var(--preto);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.tela { height: 100%; }
.tela.rola { overflow-y: auto; }
[hidden] { display: none !important; }

/* ------------------------------------------------------------ marca e tipos */
.marca {
  font-size: clamp(34px, 8vw, 54px);
  font-weight: 600;
  letter-spacing: -0.035em;
  margin: 0;
  line-height: 0.98;
}
.marca .segunda {
  display: block;
  font-weight: 400;
  color: var(--roxo);
}
.marca.pequena {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
}
.marca.pequena .segunda { display: inline; font-weight: 400; }

/* ---------------------------------------------------------------- botões */
.botao {
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--texto);
  background: var(--painel-alto);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 9px 15px;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.botao:hover { background: #262034; border-color: var(--linha-forte); }
.botao:focus-visible { outline: 2px solid var(--roxo); outline-offset: 2px; }
.botao.principal {
  background: var(--roxo-forte);
  border-color: var(--roxo-forte);
  color: #0d0716;
  font-weight: 600;
}
.botao.principal:hover { background: var(--roxo); border-color: var(--roxo); }
.botao.perigo { background: transparent; border-color: #5a2c34; color: var(--erro); }
.botao.perigo:hover { background: rgba(255, 107, 107, .12); border-color: var(--erro); }
.botao.fantasma { background: transparent; }
.botao.fantasma:hover { background: var(--painel-alto); }
.botao.ativo { border-color: var(--roxo); color: var(--roxo); }
.botao[disabled] { opacity: .45; cursor: not-allowed; }

/* --------------------------------------------------------------- campos */
.campo { display: block; margin-bottom: 16px; }
.campo > span {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  color: var(--fraco);
  margin-bottom: 6px;
}
.campo input[type="password"],
.campo input[type="text"],
.campo select {
  width: 100%;
  font: inherit;
  color: var(--texto);
  background: var(--preto);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 10px 12px;
}
.campo input:focus, .campo select:focus { outline: none; border-color: var(--roxo); }
input[type="range"] { accent-color: var(--roxo); }
.campo input[type="range"] { width: 100%; }
.caixa-marcar {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--fraco);
  margin: 4px 0 20px;
}
.caixa-marcar input { accent-color: var(--roxo); margin-top: 3px; }
.dica { font-size: 12px; color: var(--fraco); margin: -10px 0 18px; }
.aviso { color: var(--erro); font-size: 14px; margin: 12px 0 0; }

/* ----------------------------------------------------------- tela senha */
.porta { display: grid; place-items: center; padding: 32px 24px; overflow-y: auto; }
.porta-conteudo { width: 100%; max-width: 380px; }
.porta-texto { color: var(--fraco); margin: 14px 0 34px; max-width: 34ch; }
.porta-form { margin-bottom: 26px; }
.porta-form .botao { width: 100%; padding: 11px 15px; }
.porta-rodape {
  font-size: 13px;
  color: var(--fraco);
  border-top: 1px solid var(--linha);
  padding-top: 16px;
  margin: 0;
  max-width: 44ch;
}

/* ---------------------------------------------------------------- topo */
.topo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--linha);
  background: var(--painel);
  flex-shrink: 0;
  min-height: 0;
}
.topo-dir { margin-left: auto; display: flex; gap: 8px; flex-shrink: 0; }
.topo .botao { padding: 6px 12px; }

/* --------------------------------------------------------------- lobby */
.lobby { max-width: 800px; margin: 0 auto; padding: 44px 20px 60px; }
.titulo-secao { font-size: 14px; font-weight: 500; color: var(--fraco); margin: 0 0 14px; }
.salas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sala-item {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  text-align: left;
  font: inherit;
  color: var(--texto);
  background: var(--painel);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--linha-forte);
  border-radius: var(--raio);
  padding: 17px 20px;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.sala-item:hover { background: var(--painel-alto); border-left-color: var(--roxo); }
.sala-item:focus-visible { outline: 2px solid var(--roxo); outline-offset: 2px; }
.sala-item.ao-vivo { border-left-color: var(--vivo); }
.sala-nome { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.sala-info { font-size: 13px; color: var(--fraco); margin-top: 2px; }
.sala-dir { margin-left: auto; text-align: right; flex-shrink: 0; }
.sala-contagem { font-family: var(--mono); font-size: 12px; color: var(--fraco); }

.selo {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: #21082a;
  background: var(--vivo);
  border-radius: 3px;
  padding: 2px 7px;
  flex-shrink: 0;
}

/* ---------------------------------------------------------------- sala */
.sala {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}
.nome-sala {
  font-size: 15px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.palco-area {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  overflow: hidden;
}

.palco {
  flex: 1 1 auto;
  position: relative;
  background: var(--palco);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
#video {
  display: none;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;   /* respeita a proporção real, 21:9 inclusive */
  background: var(--palco);
}
#video.ligado { display: block; }
#video.preencher { object-fit: cover; }

.vazio { text-align: center; padding: 24px; max-width: 42ch; }
.vazio-titulo { font-size: 17px; margin: 0 0 6px; }
.vazio-texto { color: var(--fraco); margin: 0; font-size: 14px; }

.som-off {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #0d0716;
  background: var(--roxo);
  border: 0;
  border-radius: var(--raio);
  padding: 8px 16px;
  cursor: pointer;
  z-index: 2;
}

.telemetria {
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--roxo);
  background: rgba(6, 5, 9, .84);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 7px 11px;
  white-space: pre;
  pointer-events: none;
  max-width: calc(100% - 20px);
  z-index: 1;
}

/* -------------------------------------------------------------- painel */
.painel {
  width: 290px;
  flex: 0 0 290px;
  border-left: 1px solid var(--linha);
  background: var(--painel);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.painel.fechado { display: none; }
.painel-bloco { padding: 14px 16px; border-bottom: 1px solid var(--linha); min-height: 0; }
.painel-bloco.chat-bloco {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-bottom: 0;
}
.painel-titulo { font-size: 12px; font-weight: 500; color: var(--fraco); margin: 0 0 9px; }

.pessoas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 170px; overflow-y: auto; }
.pessoas li { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.ponto { width: 6px; height: 6px; border-radius: 50%; background: var(--linha-forte); flex-shrink: 0; }
.ponto.projetando { background: var(--vivo); }

.chat {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.chat li { font-size: 14px; word-break: break-word; flex-shrink: 0; }
.chat .quem { color: var(--roxo); font-weight: 500; }
.chat .sistema { color: var(--fraco); font-size: 13px; }
.chat-form { display: flex; gap: 8px; flex-shrink: 0; }
.chat-form input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 14px;
  color: var(--texto);
  background: var(--preto);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 8px 10px;
}
.chat-form input:focus { outline: none; border-color: var(--roxo); }
.chat-form .botao { padding: 8px 12px; }

/* ----------------------------------------------------------- controles */
.controles {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--linha);
  background: var(--painel);
  flex-wrap: wrap;
  row-gap: 8px;
  flex-shrink: 0;
}
.controles-esq, .controles-dir { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.controles-dir { margin-left: auto; }
.volume { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fraco); }
.volume input { width: 88px; }

/* --------------------------------------------------------------- modal */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(5, 4, 8, .8);
  display: grid;
  place-items: center;
  padding: 20px;
  z-index: 30;
}
.modal-caixa {
  width: 100%;
  max-width: 430px;
  max-height: min(86dvh, 720px);
  overflow-y: auto;
  background: var(--painel);
  border: 1px solid var(--linha-forte);
  border-radius: 8px;
  padding: 24px;
}
.modal-titulo { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 6px; }
.modal-texto { color: var(--fraco); font-size: 13px; margin: 0 0 22px; }
.modal-acoes { display: flex; justify-content: flex-end; gap: 8px; position: sticky; bottom: 0; }

/* --------------------------------------------------------------- toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  background: var(--painel-alto);
  border: 1px solid var(--linha-forte);
  border-left: 3px solid var(--roxo);
  border-radius: var(--raio);
  padding: 10px 16px;
  font-size: 14px;
  max-width: min(90vw, 460px);
  z-index: 50;
}

/* --------------------------------------------------------------- mobile */
@media (max-width: 860px) {
  .painel { width: 270px; flex-basis: 270px; }
}
@media (max-width: 720px) {
  .palco-area { flex-direction: column; }
  .painel {
    width: 100%;
    flex: 0 0 40%;
    border-left: 0;
    border-top: 1px solid var(--linha);
  }
  .controles { padding: 8px 12px; }
  .controles-dir { margin-left: 0; width: 100%; }
  .volume { flex: 1 1 auto; }
  .volume input { flex: 1 1 auto; width: auto; }
  .topo { padding: 10px 12px; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}