/* Cores da marca: na etapa 6 vêm do revendedor (white label). */
:root {
  --marca: #22c55e;
  --marca-escura: #15803d;
  --fundo: #0f1720;
  --cartao: #18222e;
  --texto: #f1f5f9;
  --suave: #94a3b8;
  --alerta: #ef4444;
  --raio: 16px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--fundo); color: var(--texto);
  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
.tela { display: none; min-height: 100%; max-width: 520px; margin: 0 auto; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); flex-direction: column; gap: 12px; }
.tela.ativa { display: flex; }
.oculto { display: none !important; }

.topo { display: flex; justify-content: space-between; align-items: center; }
.marca { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.marca img { width: 28px; height: 28px; }
.data { color: var(--suave); font-size: 14px; text-transform: capitalize; }
.cartao { background: var(--cartao); border-radius: var(--raio); padding: 16px; }
.rotulo { color: var(--suave); font-size: 13px; text-transform: uppercase; letter-spacing: .05em; }
h1 { margin: 4px 0 12px; font-size: 22px; }
.lista-treino { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.lista-treino small { color: var(--suave); display: block; }
.botao-grande {
  width: 100%; border: 0; border-radius: var(--raio); padding: 18px; font-size: 22px; font-weight: 800;
  background: var(--marca); color: #04130a; cursor: pointer;
}
.botao-grande:active { background: var(--marca-escura); }
.aviso { color: var(--suave); font-size: 14px; margin: 0; }
.modo-teste { color: var(--suave); font-size: 14px; }

/* Treino */
.treino-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.t-nome { font-size: 22px; font-weight: 800; }
.t-info { color: var(--suave); }
.t-passo { color: var(--suave); font-size: 13px; white-space: nowrap; }
.faixa-superserie { background: #f59e0b; color: #1f1300; font-weight: 700; border-radius: 10px; padding: 6px 10px; font-size: 14px; }

.palco { position: relative; flex-shrink: 0; border-radius: var(--raio); overflow: hidden; background: #000; transition: height .35s ease; display: flex; justify-content: center; }
/* Tela de treino sempre cabe no celular: o vídeo usa o espaço que sobrar e os botões ficam visíveis. */
#tela-treino { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; gap: 8px; }
.palco.cheia { flex: 1 1 0; min-height: 140px; }
.palco.reduzida { flex: 0 0 17vh; }
.palco.nenhuma { flex: 0 0 0; }
.palco video { height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.sem-midia { position: absolute; inset: 0; background: var(--cartao); padding: 14px; overflow: auto; }
.sem-midia-titulo { font-weight: 800; margin-bottom: 6px; }
.sem-midia ul { margin: 0 0 10px; padding-left: 18px; }
.sem-midia a, .link-execucao a { color: var(--marca); font-weight: 700; }
.selo-proximo { position: absolute; left: 8px; top: 8px; background: rgba(0,0,0,.65); padding: 4px 8px; border-radius: 8px; font-size: 13px; }

.painel { display: flex; flex-direction: column; align-items: center; }
.painel { flex-shrink: 0; }
.t-rotulo { font-size: 20px; font-weight: 700; min-height: 28px; text-align: center; }
.numero-area { position: relative; width: 124px; height: 124px; }
.palco.reduzida ~ .painel .numero-area { width: 180px; height: 180px; }
.anel { width: 100%; height: 100%; transform: rotate(-90deg); }
.anel-fundo { fill: none; stroke: #263241; stroke-width: 10; }
.anel-valor { fill: none; stroke: var(--marca); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 339.3; stroke-dashoffset: 339.3; transition: stroke-dashoffset .25s linear; }
.numero { position: absolute; inset: 0; display: flex; align-items: baseline; justify-content: center; padding-top: 36%; font-weight: 900; font-size: 44px; font-variant-numeric: tabular-nums; }
.palco.reduzida ~ .painel .numero { font-size: 72px; padding-top: 34%; }
.numero small { font-size: 18px; color: var(--suave); margin-left: 4px; }
.t-lado { color: var(--suave); min-height: 20px; }

.link-execucao { text-align: center; }
.alerta { background: var(--alerta); color: #fff; border-radius: 12px; padding: 10px 12px; font-weight: 700; }
.fala { background: var(--cartao); border-radius: 12px; padding: 10px 12px; }
.legenda { font-size: 16px; min-height: 24px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ouvido { color: var(--suave); font-size: 14px; display: flex; gap: 6px; align-items: center; margin-top: 4px; min-height: 20px; }
.mic { width: 10px; height: 10px; border-radius: 50%; background: #475569; flex: none; }
.mic.ouvindo { background: var(--marca); box-shadow: 0 0 0 4px rgba(34,197,94,.25); }
.mic.negado { background: var(--alerta); }

.teste form { display: flex; gap: 8px; }
.teste input { flex: 1; padding: 12px; border-radius: 10px; border: 1px solid #334155; background: #0b1219; color: var(--texto); font-size: 16px; }
.teste button { padding: 0 14px; border-radius: 10px; border: 0; background: #334155; color: var(--texto); font-weight: 700; }

.controles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; flex-shrink: 0; }
.fala, .link-execucao, .alerta, .teste, .treino-topo, .faixa-superserie, .botao-grande.pronto { flex-shrink: 0; }
.controles button { border: 0; border-radius: 12px; padding: 12px 4px; background: #263241; color: var(--texto); font-weight: 700; font-size: 14px; }
.botao-grande.pronto { font-size: 26px; padding: 20px; }

/* Resumo */
.resumo-linha { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #263241; gap: 12px; }
.resumo-linha:last-child { border-bottom: 0; }
.resumo-linha span:last-child { color: var(--suave); text-align: right; }
.destaques { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0 14px; }
.destaques div { background: #0f1720; border-radius: 12px; padding: 10px; text-align: center; }
.destaques b { display: block; font-size: 22px; }
.destaques small { color: var(--suave); }

/* Conta e equipe */
.form { display: grid; gap: 12px; }
.form h1 { margin: 0; }
.form label { display: grid; gap: 4px; font-size: 14px; color: var(--suave); }
.form input, .form select { padding: 12px; border-radius: 10px; border: 1px solid #334155; background: #0b1219; color: var(--texto); font-size: 16px; }
.form label.check { display: flex; gap: 8px; align-items: center; color: var(--texto); font-size: 16px; }
.form label.check input { width: 22px; height: 22px; }
.erro-form { color: #fca5a5; margin: 0; min-height: 0; }
.erro-form:empty { display: none; }
.link { background: none; border: 0; color: var(--marca); font-weight: 700; font-size: 15px; padding: 6px 0; cursor: pointer; }
.termo { font-size: 14px; line-height: 1.5; max-height: 45vh; overflow: auto; background: #0f1720; border-radius: 10px; padding: 4px 12px; }
.ola { display: flex; justify-content: space-between; align-items: center; font-weight: 700; }
.lista-historico { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.lista-historico li { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.lista-historico small { color: var(--suave); }
.resultado { border: 2px solid var(--marca); }
.resultado .senha { font: 700 26px/1.2 ui-monospace, monospace; letter-spacing: 2px; margin: 6px 0; }
.usuario { border-bottom: 1px solid #263241; padding: 10px 0; display: grid; gap: 4px; }
.usuario:last-child { border-bottom: 0; }
.usuario .linha { display: flex; justify-content: space-between; gap: 8px; }
.usuario small { color: var(--suave); }
.usuario .acoes { display: flex; gap: 14px; }
.usuario.inativo { opacity: .5; }
.selo { font-size: 12px; background: #263241; border-radius: 6px; padding: 2px 6px; color: var(--suave); }
code { background: #0b1219; padding: 1px 4px; border-radius: 4px; }

/* Etapa 3 */
.form textarea { padding: 12px; border-radius: 10px; border: 1px solid #334155; background: #0b1219; color: var(--texto); font: 16px/1.4 inherit; resize: vertical; }
.previa { width: 100%; max-height: 40vh; border-radius: 12px; background: #000; }
.linha-consumo { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid #263241; font-size: 14px; }
.linha-consumo:last-child { border-bottom: 0; }
.item-bib { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid #263241; width: 100%; background: none; border-left: 0; border-right: 0; border-top: 0; color: var(--texto); text-align: left; font-size: 16px; cursor: pointer; }
.item-bib:last-child { border-bottom: 0; }
.item-bib small { color: var(--suave); display: block; }
#resumo-ia p { margin: 6px 0 0; font-size: 17px; line-height: 1.5; }