:root {
  --bg: #04060d;
  --vidro: rgba(14, 22, 44, .66);
  --vidro-forte: rgba(18, 28, 56, .9);
  --linha: rgba(120, 170, 255, .14);
  --linha-forte: rgba(120, 200, 255, .35);
  --tx: #e6f1ff;
  --mut: #8a9cc0;
  --ciano: #22e6ff;
  --violeta: #9b7bff;
  --lima: #a6ff4d;
  --verde: #2fd47a;
  --ambar: #ffc547;
  --verm: #ff5470;
  --raio: 16px;
  --titulo: "Orbitron", "Segoe UI", sans-serif;
  --texto: "Rajdhani", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", "Consolas", monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  background: radial-gradient(1200px 700px at 80% -10%, rgba(155, 123, 255, .16), transparent 60%),
              radial-gradient(900px 600px at -10% 110%, rgba(34, 230, 255, .12), transparent 60%), var(--bg);
  background-attachment: fixed;
  color: var(--tx); font: 500 17px/1.5 var(--texto); letter-spacing: .2px; overflow-x: hidden;
}
.scan { position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.016) 0 1px, transparent 1px 3px); }
a { color: var(--ciano); }
code { font: 500 .88em var(--mono); background: rgba(34,230,255,.08); border: 1px solid var(--linha);
  padding: 1px 6px; border-radius: 6px; color: #bff6ff; word-break: break-word; }

/* ---------- topo ---------- */
header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 12px 16px;
  background: linear-gradient(180deg, rgba(4,6,13,.94), rgba(4,6,13,.7)); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linha); }
.marca { display: flex; align-items: center; gap: 12px; min-width: 0; }
.orbe { flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, var(--ciano) 30%, var(--violeta) 70%, transparent 72%);
  box-shadow: 0 0 18px var(--ciano), 0 0 36px rgba(155,123,255,.5); animation: pulsar 2.6s ease-in-out infinite; }
@keyframes pulsar { 50% { transform: scale(.9); box-shadow: 0 0 10px var(--ciano), 0 0 20px rgba(155,123,255,.4); } }
.marca h1 { margin: 0; font: 700 15px/1.15 var(--titulo); letter-spacing: 2px; }
.marca small { display: block; color: var(--mut); font: 600 11px var(--texto); letter-spacing: 3px; text-transform: uppercase; }
.topo-dir { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.progresso { font: 600 13px var(--texto); color: var(--mut); white-space: nowrap; }
.progresso b { color: var(--ciano); }
.sino { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--linha-forte);
  background: var(--vidro); color: var(--tx); display: grid; place-items: center; cursor: pointer; }
.sino svg { width: 20px; height: 20px; }
.sino.toca { animation: tocar .9s ease-in-out 3; border-color: var(--ambar); color: var(--ambar); }
@keyframes tocar { 20% { transform: rotate(16deg); } 40% { transform: rotate(-14deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } }
.sino .bolinha { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--verm); color: #fff; font: 700 11px/18px var(--texto); text-align: center; display: none; }
.sino .bolinha.ver { display: block; }

main { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; padding: 22px 16px 80px; }
.intro { color: var(--mut); margin: 4px 0 22px; }
.intro strong { color: var(--tx); }
.ao-vivo { display: inline-flex; align-items: center; gap: 8px; font: 700 12px var(--titulo); letter-spacing: 2px;
  color: var(--verm); margin-bottom: 6px; }
.ao-vivo::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--verm);
  box-shadow: 0 0 10px var(--verm); animation: pulsar 1.6s infinite; }
.ao-vivo.off { color: var(--mut); }
.ao-vivo.off::before { background: var(--mut); box-shadow: none; animation: none; }

/* ---------- etapas ---------- */
.etapa { position: relative; margin: 0 0 14px; border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--vidro); backdrop-filter: blur(8px); overflow: hidden; }
.etapa.liberada { border-color: var(--linha-forte); }
.etapa.nova { animation: chegou 2.4s ease-out; }
@keyframes chegou { 0% { box-shadow: 0 0 0 0 rgba(34,230,255,.0); } 20% { box-shadow: 0 0 0 4px rgba(34,230,255,.55), 0 0 40px rgba(34,230,255,.5); } 100% { box-shadow: 0 0 0 0 rgba(34,230,255,0); } }
.cab { width: 100%; display: flex; align-items: center; gap: 14px; padding: 16px; background: none; border: 0;
  color: inherit; text-align: left; font: inherit; cursor: pointer; }
.etapa.trancada .cab { cursor: default; }
.num { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  font: 700 15px var(--titulo); border: 1px solid var(--linha-forte); color: var(--ciano); background: rgba(34,230,255,.06); }
.etapa.trancada .num { color: var(--mut); border-color: var(--linha); background: transparent; }
.num svg { width: 18px; height: 18px; }
.cab-tx { min-width: 0; flex: 1; }
.cab-tx .meta { font: 600 12px var(--texto); letter-spacing: 2px; text-transform: uppercase; color: var(--mut); }
.cab-tx h2 { margin: 2px 0 0; font: 700 17px/1.25 var(--titulo); letter-spacing: .5px; }
.etapa.trancada h2 { color: #9fb0cf; }
.selo { flex: none; font: 700 11px var(--texto); letter-spacing: 1.5px; text-transform: uppercase; padding: 4px 10px;
  border-radius: 20px; border: 1px solid var(--linha); color: var(--mut); white-space: nowrap; }
.etapa.liberada .selo { color: var(--lima); border-color: rgba(166,255,77,.4); }
.seta { flex: none; width: 18px; height: 18px; color: var(--mut); transition: transform .2s; }
.etapa.aberta .seta { transform: rotate(180deg); }
.corpo { display: none; padding: 0 16px 18px; border-top: 1px solid var(--linha); }
.etapa.aberta .corpo { display: block; }
.resumo { margin: 14px 0 0; color: #c9d7f2; }

.palavra { margin: 16px 0 4px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px;
  border-radius: 14px; border: 1px solid rgba(34,230,255,.45);
  background: linear-gradient(135deg, rgba(34,230,255,.12), rgba(155,123,255,.12)); }
.palavra span { font: 600 12px var(--texto); letter-spacing: 2px; text-transform: uppercase; color: var(--mut); }
.palavra strong { font: 800 22px var(--titulo); letter-spacing: 3px; color: #fff; text-shadow: 0 0 16px rgba(34,230,255,.6); }
.palavra .copiar { margin-left: auto; }

.downloads { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
.baixar { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 12px; text-decoration: none;
  background: var(--verde); color: #04140a; font: 700 15px var(--texto); box-shadow: 0 0 16px rgba(47,212,122,.35); }
.baixar svg { width: 16px; height: 16px; }
.baixar:hover { filter: brightness(1.08); }

.secao h3 { margin: 22px 0 8px; font: 700 13px var(--titulo); letter-spacing: 2px; text-transform: uppercase; color: var(--ciano); }
.passo { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px dashed var(--linha); }
.passo:last-child { border-bottom: 0; }
.passo input { flex: none; appearance: none; width: 22px; height: 22px; margin: 1px 0 0; border-radius: 6px; cursor: pointer;
  border: 1.5px solid var(--linha-forte); background: rgba(0,0,0,.25); display: grid; place-items: center; }
.passo input:checked { background: var(--lima); border-color: var(--lima); }
.passo input:checked::after { content: ""; width: 6px; height: 11px; border: solid #0a1400; border-width: 0 2.5px 2.5px 0;
  transform: translateY(-1px) rotate(45deg); }
.passo input:focus-visible { outline: 2px solid var(--ciano); outline-offset: 2px; }
.passo-tx { flex: 1; min-width: 0; }
.passo.feito .passo-tx > p { color: var(--mut); text-decoration: line-through; text-decoration-color: rgba(138,156,192,.5); }
.passo-tx p { margin: 0; }
.passo.sem-caixa { padding-left: 34px; }

.cmd { margin-top: 8px; display: flex; align-items: stretch; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--linha-forte); background: rgba(0,0,0,.45); }
.cmd pre { margin: 0; flex: 1; min-width: 0; padding: 10px 12px; font: 500 14px var(--mono); color: #d8fbff; overflow-x: auto; white-space: pre; }
.copiar { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border: 0; cursor: pointer;
  background: rgba(34,230,255,.14); color: var(--ciano); font: 700 13px var(--texto); letter-spacing: 1px; text-transform: uppercase; }
.palavra .copiar { padding: 9px 14px; border-radius: 10px; border: 1px solid rgba(34,230,255,.5); }
.copiar:hover { background: rgba(34,230,255,.24); }
.copiar.ok { background: var(--lima); color: #0a1400; }
.copiar svg { width: 15px; height: 15px; }

.dicas { margin: 20px 0 0; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255,197,71,.3); background: rgba(255,197,71,.06); }
.dicas h4 { margin: 0 0 6px; font: 700 12px var(--titulo); letter-spacing: 2px; color: var(--ambar); text-transform: uppercase; }
.dicas ul { margin: 0; padding-left: 18px; color: #e9dcbc; }
.dicas li { margin: 4px 0; }

.trancada-msg { margin: 0; padding: 0 16px 16px 72px; color: var(--mut); font-size: 15px; display: none; }

/* ---------- aviso ---------- */
.toast { position: fixed; left: 50%; bottom: 22px; z-index: 50; transform: translate(-50%, 140%); transition: transform .35s;
  max-width: calc(100% - 32px); display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 14px;
  background: var(--vidro-forte); border: 1px solid var(--ciano); box-shadow: 0 0 30px rgba(34,230,255,.35); }
.toast.ver { transform: translate(-50%, 0); }
.toast b { font: 700 14px var(--titulo); letter-spacing: 1px; color: var(--ciano); }
.toast button { margin-left: 8px; padding: 7px 12px; border-radius: 9px; border: 1px solid var(--linha-forte);
  background: rgba(34,230,255,.12); color: var(--tx); font: 700 13px var(--texto); cursor: pointer; }

.rodape { margin-top: 30px; color: var(--mut); font-size: 14px; text-align: center; }
.erro-rede { display: none; margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(255,84,112,.4);
  background: rgba(255,84,112,.08); color: #ffc2cc; font-size: 15px; }
.erro-rede.ver { display: block; }

/* ---------- administração ---------- */
.adm-login { max-width: 380px; margin: 60px auto 0; padding: 24px; border-radius: var(--raio); border: 1px solid var(--linha-forte); background: var(--vidro); }
.adm-login h2 { margin: 0 0 14px; font: 700 18px var(--titulo); letter-spacing: 1px; }
.adm-login input { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--linha-forte); background: rgba(0,0,0,.4);
  color: var(--tx); font: 600 17px var(--texto); }
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: 11px; border: 0;
  font: 700 15px var(--texto); letter-spacing: .5px; cursor: pointer; }
.botao.prim { background: var(--ciano); color: #021016; }
.botao.lib { background: var(--verde); color: #04140a; min-width: 118px; }
.botao.tra { background: transparent; color: var(--mut); border: 1px solid var(--linha-forte); min-width: 118px; }
.botao.tra.certeza { background: var(--verm); color: #fff; border-color: var(--verm); }
.botao:disabled { opacity: .55; cursor: wait; }
.adm-login .botao { width: 100%; margin-top: 12px; }
.adm-msg { min-height: 22px; margin-top: 10px; color: var(--verm); font-size: 15px; }
.adm-lista { margin-top: 8px; }
.adm-linha { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 10px; border-radius: var(--raio);
  border: 1px solid var(--linha); background: var(--vidro); }
.adm-linha.on { border-color: rgba(47,212,122,.55); }
.adm-linha .cab-tx h2 { font-size: 15px; }
.adm-linha .quando { color: var(--mut); font-size: 13px; }
.adm-pal { font: 700 13px var(--mono); color: var(--ciano); }
.adm-topo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 16px; }
.adm-topo .intro { margin: 0; }
.adm-topo .botao { margin-left: auto; }

@media (max-width: 560px) {
  body { font-size: 16px; }
  .marca small { display: none; }
  .progresso { display: none; }
  .cab { padding: 14px 12px; gap: 11px; }
  .num { width: 36px; height: 36px; border-radius: 10px; font-size: 13px; }
  .cab-tx h2 { font-size: 15px; }
  .selo { display: none; }
  .corpo { padding: 0 12px 16px; }
  .palavra strong { font-size: 19px; }
  .palavra .copiar { margin-left: 0; }
  .passo.sem-caixa { padding-left: 0; }
  .adm-linha { flex-wrap: wrap; }
  .adm-linha .botao { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }