body { background: #000; }
.cartao { max-width: 380px; margin: 40px auto; padding: 20px; background: var(--fundo); border-radius: 12px; }
.marca { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.marca img { width: 32px; height: 32px; }
.marca h1 { font-size: 20px; margin: 0; }
.largo { width: 100%; margin-top: 12px; }
#lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
#lista button { width: 100%; text-align: left; background: var(--painel); padding: 10px 12px; }
#lista small { display: block; color: var(--texto-2); }
.vazio { color: var(--texto-2); text-align: center; }

.palco { position: fixed; inset: 0; background: #000; }
.palco.sem-cursor { cursor: none; }
video { width: 100%; height: 100%; object-fit: contain; display: block; }
.mensagem { position: absolute; inset: 0; display: grid; place-items: center; color: var(--texto-2); font-size: 18px; pointer-events: none; }
.mensagem:empty { display: none; }

.controles {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 24px 12px 10px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
  transition: opacity 0.2s;
}
.palco.calmo .controles { opacity: 0; pointer-events: none; }
.controles button { background: rgba(30, 27, 42, 0.85); padding: 6px 10px; }
.controles button[aria-pressed='true'] { border-color: var(--ciano); color: var(--ciano); }
.titulo { font-weight: 600; text-shadow: 0 1px 3px #000; }
.espaco { flex: 1; }
.volume { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--texto); font-size: 14px; }
.volume input { width: 110px; accent-color: var(--roxo); }