/* Coruja em rede — paleta herdada do app da Coruja */
:root {
  --noite: #0E1116; --breu: #080A0D; --carvao: #171C24; --carvao2: #1E252F;
  --linha: #28313D; --leite: #EAEFF5; --neblina: #93A1B1;
  --ambar: #F2A33C; --brasa: #E0533F; --sereno: #5FD08A;
}
@media (prefers-color-scheme: light) {
  /* O app é pensado para o escuro; a tela de vídeo continua escura nos dois casos. */
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--noite); color: var(--leite);
  font: 400 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; overflow: hidden;
}
h1, h2, h3 { font-weight: 600; margin: 0; letter-spacing: .01em; }
h1 { font-size: 34px; line-height: 1; }
h2 { font-size: 24px; }
h3 { font-size: 17px; margin-bottom: 10px; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ambar); outline-offset: 2px; border-radius: 6px; }

.tela { display: none; height: 100%; overflow-y: auto; padding: 0 0 calc(24px + env(safe-area-inset-bottom)); }
.tela.ativa { display: block; }
[hidden] { display: none !important; }

/* ---------- início ---------- */
#inicio {
  display: none; flex-direction: column; justify-content: center; gap: 14px;
  max-width: 480px; margin: 0 auto; padding: 32px 22px calc(24px + env(safe-area-inset-bottom));
  min-height: 100%;
}
#inicio.ativa { display: flex; }
.marca { display: flex; align-items: center; gap: 14px; }
.marca img { width: 56px; height: 56px; border-radius: 14px; }
.sub { color: var(--neblina); margin: 0 0 8px; }
.escolha {
  display: block; width: 100%; text-align: left; background: var(--carvao);
  border: 1px solid var(--linha); border-radius: 16px; padding: 18px 20px;
}
.escolha:hover { border-color: #3b4756; }
.escolha b { display: block; font-size: 22px; font-weight: 600; margin-bottom: 2px; }
.escolha span { color: var(--neblina); font-size: 14px; }
.aviso {
  background: rgba(224, 83, 63, .12); border: 1px solid rgba(224, 83, 63, .4);
  border-radius: 12px; padding: 12px 14px; font-size: 14px; margin: 8px 0 0;
}
.rodape { color: var(--neblina); font-size: 12.5px; margin-top: 12px; }

/* ---------- barra de topo das telas ---------- */
.barra {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px;
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px; background: var(--noite);
  border-bottom: 1px solid var(--linha);
}
.barra h2 { margin-right: auto; }
.sair {
  border: 1px solid var(--linha); border-radius: 10px; padding: 8px 14px;
  background: var(--carvao); font-size: 14px;
}

/* ---------- palco de vídeo ---------- */
.palco {
  position: relative; background: var(--breu); aspect-ratio: 16 / 9; width: 100%;
}
.palco.grande { aspect-ratio: 16 / 9; max-height: 70vh; }
.palco video { width: 100%; height: 100%; object-fit: contain; display: block; background: var(--breu); }
.selo {
  position: absolute; top: 12px; left: 12px; display: flex; align-items: center; gap: 8px;
  background: rgba(8, 10, 13, .75); border: 1px solid var(--linha); border-radius: 999px;
  padding: 5px 12px; font-size: 13px; font-weight: 600;
}
.selo i { width: 9px; height: 9px; border-radius: 50%; background: var(--neblina); }
.selo.ao-vivo i { background: var(--sereno); box-shadow: 0 0 0 0 rgba(95, 208, 138, .6); animation: pulso 2.4s infinite; }
.selo.gravando i { background: var(--brasa); animation: pisca 1s steps(2, end) infinite; }
.selo.ruim i { background: var(--brasa); }
@keyframes pulso { 70% { box-shadow: 0 0 0 11px rgba(95, 208, 138, 0); } 100% { box-shadow: 0 0 0 0 rgba(95, 208, 138, 0); } }
@keyframes pisca { 50% { opacity: .2; } }

.alertaVivo {
  position: absolute; left: 12px; right: 12px; bottom: 12px; background: rgba(242, 163, 60, .95);
  color: #231803; border-radius: 12px; padding: 10px 14px; font-weight: 600; font-size: 14px;
}

/* ---------- cartões e controles ---------- */
.cartao {
  background: var(--carvao); border: 1px solid var(--linha); border-radius: 16px;
  padding: 16px; margin: 14px 16px 0;
}
.codigoBox { text-align: center; }
.codigoBox strong {
  display: block; font-size: 44px; letter-spacing: .12em; font-variant-numeric: tabular-nums;
  color: var(--ambar); margin: 4px 0; font-family: ui-monospace, Consolas, monospace;
}
.rotulo { display: block; color: var(--neblina); font-size: 13px; margin-bottom: 8px; }
.campo { display: block; color: var(--neblina); font-size: 13px; margin-bottom: 12px; }
.campo select, .campo input {
  display: block; width: 100%; margin-top: 6px; padding: 12px 13px; border-radius: 11px;
  background: var(--carvao2); border: 1px solid var(--linha);
}
#codigoEntrada { text-transform: uppercase; letter-spacing: .14em; font-size: 22px; font-family: ui-monospace, Consolas, monospace; }
.leitura { color: var(--neblina); font-size: 13px; margin: 10px 0 0; }
.dados { color: var(--neblina); font-size: 13px; margin: 10px 16px 0; font-variant-numeric: tabular-nums; }
.nada { color: var(--neblina); font-size: 14px; margin: 6px 0; }
.recado {
  position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
  background: var(--carvao2); border: 1px solid var(--linha); border-radius: 12px; padding: 12px 14px;
  font-size: 14px; z-index: 20; margin: 0;
}
.falha {
  background: rgba(224, 83, 63, .12); border: 1px solid rgba(224, 83, 63, .4);
  border-radius: 12px; padding: 12px 14px; font-size: 14px; margin: 12px 0 0;
}

.pilulas { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 4px; }
.pilulas button {
  flex: 1 1 0; min-width: 84px; padding: 11px 8px; border-radius: 11px;
  border: 1px solid var(--linha); background: var(--carvao2); font-size: 14.5px;
}
.pilulas button[aria-checked="true"] {
  border-color: var(--ambar); color: var(--ambar);
  background: linear-gradient(180deg, rgba(242, 163, 60, .14), transparent);
  font-weight: 600;
}

.regua { display: block; margin-top: 14px; }
.regua .cabeca { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.regua output { color: var(--ambar); font-variant-numeric: tabular-nums; font-size: 15px; }
input[type="range"] { width: 100%; accent-color: var(--ambar); margin: 0; }

.acoes { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.principal, .secundario {
  flex: 1 1 auto; border-radius: 12px; padding: 13px 16px; font-weight: 600; font-size: 15px;
  border: 1px solid var(--linha);
}
.principal { background: var(--ambar); color: #231803; border-color: transparent; width: calc(100% - 32px); margin: 14px 16px 0; display: block; }
.cartao .principal { width: 100%; margin: 14px 0 0; }
.acoes .principal, .acoes .secundario { width: auto; margin: 0; }
.acoes .principal { flex: 1 1 160px; }
.secundario { background: var(--carvao2); }
.principal:disabled, .secundario:disabled { opacity: .45; }
.gravando-btn { background: var(--brasa) !important; color: #fff !important; }

.chave {
  display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 0 0;
  border-top: 1px solid var(--linha); font-size: 14.5px; cursor: pointer;
}
.chave input { width: 18px; height: 18px; accent-color: var(--ambar); flex: none; }

/* ---------- lista de trechos ---------- */
.trecho {
  display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--linha);
}
.trecho:first-of-type { border-top: none; }
.trecho .quando { font-size: 18px; font-variant-numeric: tabular-nums; font-weight: 600; }
.trecho .sub { font-size: 13px; color: var(--neblina); margin: 0; }
.trecho .acoes { margin: 0 0 0 auto; flex-wrap: nowrap; }
.trecho .acoes .botaoLink {
  border: 1px solid var(--linha); border-radius: 9px; padding: 8px 12px; font-size: 13.5px;
  background: var(--carvao2); font-weight: 500; color: var(--leite); text-decoration: none;
}
.trecho .acoes button {
  flex: none; border: 1px solid var(--linha); border-radius: 9px; padding: 8px 12px; font-size: 13.5px;
  background: var(--carvao2); font-weight: 500;
}

/* ---------- janela do trecho ---------- */
dialog {
  border: 1px solid var(--linha); background: var(--carvao); color: var(--leite);
  border-radius: 16px; padding: 14px; width: min(900px, 94vw);
}
dialog::backdrop { background: rgba(5, 7, 10, .8); }
dialog video { width: 100%; max-height: 72vh; border-radius: 10px; background: #000; display: block; }
dialog .barra { position: static; background: none; border: none; padding: 12px 0 0; }
dialog .barra span { margin-right: auto; }
dialog .barra button { border: 1px solid var(--linha); border-radius: 9px; padding: 8px 15px; background: var(--carvao2); }

@media (min-width: 900px) {
  .tela { max-width: 760px; margin: 0 auto; }
  .cartao { margin-left: 0; margin-right: 0; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }