:root{
  --fundo:       #0e1014;
  --painel:      #161a21;
  --painel-alto: #1d222b;
  --borda:       #2a313d;
  --texto:       #e7eaf0;
  --texto-fraco: #99a2b3;
  --acento:      #4cc2ff;
  --acento-esc:  #1b6a94;
  --ambar:       #f0b429;
  --erro:        #ff6b6b;
  --raio:        10px;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
}

*{ box-sizing:border-box; }

[hidden]{ display:none !important; }

html{ scrollbar-width:none; -ms-overflow-style:none; }
html::-webkit-scrollbar{ width:0; height:0; display:none; }
*{ scrollbar-width:none; -ms-overflow-style:none; }
*::-webkit-scrollbar{ width:0; height:0; display:none; }

html,body{ margin:0; padding:0; }

body{
  background:var(--fundo);
  color:var(--texto);
  font-family:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:15px;
  line-height:1.5;
  -webkit-text-size-adjust:100%;
  overscroll-behavior-y:none;
}

.topo{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
  padding:12px 16px;
  padding-top:calc(12px + env(safe-area-inset-top));
  background:var(--painel);
  border-bottom:1px solid var(--borda);
  position:sticky; top:0; z-index:20;
}
.marca{ display:flex; align-items:center; gap:11px; min-width:0; }
.ico-marca{ width:26px; height:26px; flex:none; fill:none; stroke:var(--acento); stroke-width:1.8; }
.topo h1{ margin:0; font-size:1.02rem; font-weight:650; letter-spacing:-.01em; }
.topo p{ margin:0; font-size:.74rem; color:var(--texto-fraco); }

.acoes-topo{ display:flex; gap:8px; flex-wrap:wrap; }

.btn{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--painel-alto); color:var(--texto);
  border:1px solid var(--borda); border-radius:var(--raio);
  padding:9px 13px; font-size:.86rem; font-family:inherit;
  cursor:pointer; transition:border-color .15s, background .15s;
}
.btn:hover:not(:disabled){ border-color:var(--acento-esc); }
.btn:disabled{ opacity:.4; cursor:not-allowed; }
.btn-primario{ background:var(--acento-esc); border-color:var(--acento-esc); }
.btn-primario:hover{ background:#2280b0; }
.btn:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }
.ico{ width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

.palco{
  display:flex; flex-direction:column;
  gap:14px; padding:14px;
  padding-bottom:calc(14px + env(safe-area-inset-bottom));
}

.area-imagem{ display:flex; flex-direction:column; gap:8px; }

.tela{
  position:relative;
  background:
    linear-gradient(45deg,#1a1e26 25%,transparent 25%,transparent 75%,#1a1e26 75%),
    linear-gradient(45deg,#1a1e26 25%,#12151b 25%,#12151b 75%,#1a1e26 75%);
  background-size:18px 18px; background-position:0 0, 9px 9px;
  border:1px solid var(--borda); border-radius:var(--raio);
  min-height:230px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.tela img{ max-width:100%; max-height:62vh; display:block; }

.vazio{ text-align:center; color:var(--texto-fraco); padding:34px 18px; }
.vazio p{ margin:4px 0; font-size:.88rem; }
.vazio .dica{ font-size:.79rem; opacity:.75; }
.ico-vazio{ width:40px; height:40px; fill:none; stroke:currentColor; stroke-width:1.4; opacity:.5; margin-bottom:8px; }

.carregando{ position:absolute; inset:0; background:rgba(14,16,20,.55); display:flex; align-items:center; justify-content:center; }
.carregando span{
  width:26px; height:26px; border:2.5px solid var(--borda);
  border-top-color:var(--acento); border-radius:50%;
  animation:girar .7s linear infinite;
}
@keyframes girar{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .carregando span{ animation-duration:2s; } }

.barra-imagem{ display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:.8rem; color:var(--texto-fraco); }
.dim{ font-family:var(--mono); font-size:.76rem; }

.painel{
  background:var(--painel);
  border:1px solid var(--borda); border-radius:var(--raio);
  overflow:hidden;
}

.abas{ display:flex; border-bottom:1px solid var(--borda); overflow-x:auto; scrollbar-width:none; }
.abas::-webkit-scrollbar{ display:none; }
.aba{
  flex:1 0 auto; background:none; border:none; border-bottom:2px solid transparent;
  color:var(--texto-fraco); font-family:inherit; font-size:.83rem;
  padding:12px 14px; cursor:pointer; white-space:nowrap;
}
.aba.ativa{ color:var(--texto); border-bottom-color:var(--acento); }
.aba:focus-visible{ outline:2px solid var(--acento); outline-offset:-2px; }

.conteudo-aba{ display:none; padding:16px; }
.conteudo-aba.ativa{ display:block; }

.explica{
  margin:0 0 16px; font-size:.83rem; color:var(--texto-fraco);
  background:var(--painel-alto); border-left:2px solid var(--acento-esc);
  padding:10px 12px; border-radius:0 6px 6px 0;
}
.explica code{ font-family:var(--mono); color:var(--acento); font-size:.9em; }

.campo{ margin-bottom:14px; }
.dupla, .tripla{ display:grid; gap:12px; }
.dupla{ grid-template-columns:1fr 1fr; }
.tripla{ grid-template-columns:repeat(3,1fr); }

.rotulo{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; font-size:.82rem; }
.rotulo output{ font-family:var(--mono); font-size:.79rem; color:var(--acento); }
.rotulo-simples{ display:block; margin-bottom:6px; font-size:.82rem; }

input[type=range]{
  width:100%; height:26px; background:none; -webkit-appearance:none; appearance:none; cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{ height:4px; background:var(--borda); border-radius:2px; }
input[type=range]::-moz-range-track{ height:4px; background:var(--borda); border-radius:2px; }
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:18px; height:18px; margin-top:-7px;
  background:var(--acento); border-radius:50%; border:none;
}
input[type=range]::-moz-range-thumb{ width:18px; height:18px; background:var(--acento); border-radius:50%; border:none; }
input[type=range]:focus-visible{ outline:2px solid var(--acento); outline-offset:4px; }

select{
  width:100%; padding:9px 11px; font-family:inherit; font-size:.85rem;
  background:var(--painel-alto); color:var(--texto);
  border:1px solid var(--borda); border-radius:8px;
}
select:focus-visible{ outline:2px solid var(--acento); outline-offset:1px; }

.nota{ margin:5px 0 0; font-size:.74rem; color:var(--texto-fraco); font-style:italic; }
.nota.recuo{ margin-bottom:14px; }
.nota code{ font-family:var(--mono); font-style:normal; font-size:.92em; color:var(--acento); }

.chk{ display:inline-flex; align-items:center; gap:8px; font-size:.84rem; cursor:pointer; }
.chk input{ width:17px; height:17px; accent-color:var(--acento); }
.chk.destaque{ background:var(--painel-alto); border:1px solid var(--borda); border-radius:8px; padding:10px 12px; width:100%; }
.linha-chks{ display:flex; gap:18px; flex-wrap:wrap; margin-bottom:2px; }

.bloco-dependente{ margin-top:14px; opacity:.4; pointer-events:none; transition:opacity .2s; }
.bloco-dependente.ligado{ opacity:1; pointer-events:auto; }

.faixa-demo{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:.8rem; color:var(--acento); margin:10px 0; }
.degrade{ flex:1; height:16px; border-radius:4px; background:linear-gradient(90deg,#4cc2ff,#f0b429); }

.grupo-matriz{ margin-bottom:22px; }
.grupo-matriz h3{ margin:0 0 9px; font-size:.86rem; font-weight:600; }
.grupo-matriz h3 small{ font-weight:400; color:var(--texto-fraco); font-size:.8em; margin-left:6px; }

.matriz{
  display:inline-grid; grid-template-columns:repeat(3,minmax(62px,1fr)); gap:1px;
  background:var(--borda); border:1px solid var(--borda); border-radius:6px;
  overflow:hidden; font-family:var(--mono); font-size:.79rem;
  width:100%; max-width:330px;
}
.matriz span{
  background:var(--painel-alto); padding:9px 6px; text-align:center;
  font-variant-numeric:tabular-nums;
}
.matriz span.zero{ color:var(--texto-fraco); opacity:.5; }
.matriz span.um{ color:var(--acento); }
.matriz span.neg{ color:var(--ambar); }

.metricas{ display:flex; gap:20px; margin-top:10px; flex-wrap:wrap; }
.metricas div{ display:flex; flex-direction:column; }
.metricas span{ font-size:.71rem; color:var(--texto-fraco); text-transform:uppercase; letter-spacing:.05em; }
.metricas strong{ font-family:var(--mono); font-size:.92rem; color:var(--ambar); font-variant-numeric:tabular-nums; }

.passo{ margin-bottom:14px; }
.passo .cab{ display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:.8rem; }
.passo .simbolo{
  font-family:var(--mono); font-weight:700; color:var(--acento);
  background:var(--painel-alto); border:1px solid var(--borda);
  border-radius:5px; padding:1px 7px; font-size:.8rem;
}
.op{ text-align:center; font-family:var(--mono); color:var(--texto-fraco); margin:2px 0 10px; font-size:.9rem; }

.tab-cantos{ width:100%; border-collapse:collapse; font-family:var(--mono); font-size:.77rem; }
.tab-cantos td{ padding:6px 8px; border-bottom:1px solid var(--borda); font-variant-numeric:tabular-nums; }
.tab-cantos td:first-child{ color:var(--texto-fraco); }
.tab-cantos td:nth-child(2){ text-align:center; color:var(--acento); width:34px; }
.tab-cantos td:last-child{ color:var(--ambar); text-align:right; }

/* faixa das matrizes ao vivo: só no desktop, onde sobra largura.
   No celular esse conteúdo continua na aba “Matrizes”. */
.vivo{ display:none; }

@media (min-width:900px){
  .vivo{
    display:flex; gap:20px; align-items:flex-start; flex:none;
    background:var(--painel); border:1px solid var(--borda);
    border-radius:var(--raio); padding:12px 14px;
  }
  .vivo-bloco{ min-width:0; }
  .vivo-bloco h4{
    margin:0 0 7px; font-size:.68rem; font-weight:600;
    text-transform:uppercase; letter-spacing:.06em; color:var(--texto-fraco);
  }
  .vivo-bloco h4 span{
    text-transform:none; letter-spacing:0; font-weight:400;
    margin-left:6px; font-family:var(--mono); opacity:.8;
  }
  .matriz.compacta{
    max-width:220px; font-size:.7rem;
    grid-template-columns:repeat(3,minmax(44px,1fr));
  }
  .matriz.compacta span{ padding:5px 4px; }
  .vivo-num{ display:flex; flex-direction:column; gap:5px; flex:1; }
  .vivo-num > div{ display:flex; align-items:baseline; gap:9px; }
  .vivo-num > div span{
    font-size:.66rem; color:var(--texto-fraco);
    text-transform:uppercase; letter-spacing:.05em; min-width:104px;
  }
  .vivo-num strong{
    font-family:var(--mono); font-size:.84rem; color:var(--ambar);
    font-variant-numeric:tabular-nums;
  }
  .vivo-num .nota{ margin-top:3px; }

  /* seis abas em 400px não cabem numa linha: reduz e deixa quebrar */
  .abas{ flex-wrap:wrap; overflow-x:visible; }
  .aba{ flex:1 1 auto; padding:10px 7px; font-size:.78rem; }

  /* a altura vem do flex, não de uma conta com a altura do topo:
     assim a faixa das matrizes nunca fica cortada embaixo */
  body{ display:flex; flex-direction:column; height:100vh; overflow:hidden; }
  .topo{ flex:none; position:static; }

  .palco{
    flex-direction:row; align-items:stretch;
    gap:18px; padding:18px;
    flex:1 1 auto; min-height:0;
  }
  .area-imagem{ flex:1 1 auto; min-width:0; min-height:0; }
  .tela{ flex:1 1 auto; min-height:120px; }
  .tela img{ max-height:100%; }
  .painel{ flex:0 0 420px; max-width:420px; display:flex; flex-direction:column; min-height:0; }
  .abas{ flex:none; }
  .conteudo-aba.ativa{ flex:1; overflow-y:auto; }
  .matriz{ max-width:100%; }
}

@media (min-width:1400px){
  .painel{ flex-basis:460px; max-width:460px; }
}

.btn.largo{ width:100%; justify-content:center; margin-bottom:6px; }
h3.sub{ font-size:.86rem; font-weight:600; margin:20px 0 10px; color:var(--texto); }
h3.sub small{ font-weight:400; color:var(--texto-fraco); font-size:.8em; margin-left:6px; }
input[type=text], input[type=number]{
  width:100%; padding:9px 11px; font-family:inherit; font-size:.85rem;
  background:var(--painel-alto); color:var(--texto);
  border:1px solid var(--borda); border-radius:8px;
}
input[type=text]:focus-visible, input[type=number]:focus-visible{ outline:2px solid var(--acento); outline-offset:1px; }
.galeria{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 4px; }
.cartao-rosto{ position:relative; width:72px; text-align:center; }
.cartao-rosto img{ width:72px; height:72px; object-fit:cover; border-radius:8px; border:1px solid var(--borda); display:block; }
.cartao-rosto span{ display:block; font-size:.7rem; color:var(--texto-fraco); margin-top:4px; word-break:break-word; }
.cartao-rosto button{
  position:absolute; top:-6px; right:-6px; width:20px; height:20px; line-height:1;
  border-radius:50%; border:1px solid var(--borda); background:var(--painel-alto);
  color:var(--texto-fraco); cursor:pointer; font-size:.8rem; padding:0;
}
.cartao-rosto button:hover{ color:var(--ambar); border-color:var(--ambar); }
.veredito{
  background:var(--painel-alto); border:1px solid var(--borda); border-left:3px solid var(--acento);
  border-radius:8px; padding:14px 16px; margin:14px 0 10px;
  font-size:1.05rem; font-weight:600;
}
.veredito.incerto{ border-left-color:var(--ambar); }
.veredito small{ display:block; font-weight:400; font-size:.78rem; color:var(--texto-fraco); margin-top:4px; }
.veredito .nome-ok{ color:var(--acento); }
.tiras{ display:flex; flex-wrap:wrap; gap:10px; margin:10px 0; }
.tiras figure{ margin:0; text-align:center; }
.tiras img{ width:74px; height:74px; object-fit:cover; border-radius:6px; border:1px solid var(--borda); display:block; image-rendering:pixelated; }
.tiras figcaption{ font-size:.68rem; color:var(--texto-fraco); margin-top:4px; }