/* Shelf-Lab: o chão da loja visto pelo monitor do CFTV. Página cor de piso de
   concreto com rejunte fino, tinta grafite, laranja do REC e verde-limão da caixa de
   detecção. Cantos em colchete, como o rastreador desenha cada pessoa. O palco é o
   monitor escuro. Cor chapada em todo fundo. */
:root {
  --fundo: #eeebe3; --sup: #faf8f3; --sup2: #e3dfd4; --tinta: #15171c; --tinta2: #3b3f48; --fraco: #6b6e76;
  --linha: rgba(21, 23, 28, .16); --cor: #c2410c; --cor-t: #ffffff; --cor2: #d7ff3a;
  --esc: #15171c; --esc-t: #eeebe3; --esc-f: rgba(238, 235, 227, .7);
  --raio: 4px; --raio-p: 3px; --sombra: 4px 4px 0 var(--tinta);
  --f-tit: 'Chakra Petch', system-ui, sans-serif; --f-txt: 'Schibsted Grotesk', system-ui, sans-serif; --f-mono: 'DM Mono', ui-monospace, monospace;
  --tit-peso: 600; --tit-esp: -.012em;
  --lima: #d7ff3a; --rec: #ff3b30;
  --p-b: #0e1014; --p-s: #171a20; --p-s2: #22262e; --p-l: rgba(255, 255, 255, .09); --p-t: #e8eaed; --p-f: #9aa0aa;
  color-scheme: light;
}
/* Piso: placas de 56 px com rejunte, desenhadas em SVG chapado. */
body { background-color: var(--fundo); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M55.5 0v56M0 55.5h56' stroke='%2315171c' stroke-opacity='.055'/%3E%3Ccircle cx='17' cy='23' r='.8' fill='%2315171c' fill-opacity='.07'/%3E%3Ccircle cx='38' cy='41' r='.6' fill='%2315171c' fill-opacity='.06'/%3E%3C/svg%3E"); }
h1 { font-size: clamp(2.2rem, 4.6vw, 3.9rem); line-height: 1.04; font-weight: 600; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.9rem); line-height: 1.06; }
h3 { font-weight: 600; letter-spacing: 0; }
/* O destaque do título é a etiqueta do rastreador: caixa grafite, letra limão. */
h1 em, h2 em { color: var(--lima); background: var(--tinta); padding: 0 .16em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
::selection { background: var(--lima); color: var(--tinta); }

.topo { background: var(--fundo); backdrop-filter: none; border-bottom: 1px solid var(--tinta); }
.cassi { font-family: var(--f-txt); font-weight: 700; }
.prod { font: 600 1.02rem var(--f-tit); letter-spacing: .01em; }
.prod b { color: var(--cor); font-weight: 700; }
.links a { font: 500 .8rem var(--f-mono); color: var(--tinta2); }
.idiomas { border-radius: 3px; border-color: var(--tinta); }
.idiomas a { border-radius: 2px; }
.idiomas a[aria-current] { background: var(--tinta); color: var(--lima); }
.btn { border: 1px solid var(--tinta); font: 600 .88rem var(--f-txt); }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--tinta); }
.btn-p { background: var(--cor); border-color: var(--tinta); color: #fff; }

.sobre { font: 500 .72rem var(--f-mono); letter-spacing: .12em; color: var(--cor); display: flex; align-items: center; gap: 10px; }
.sobre::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rec); flex: none; box-shadow: 0 0 0 3px rgba(255, 59, 48, .18); }
@media (min-width: 1081px) { .heroi { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.lede { color: var(--tinta2); }
/* O palco é o monitor da sala de segurança: moldura grafite grossa, sombra chapada. */
.palco { background: var(--p-b); border: 0; border-radius: 6px; box-shadow: 0 0 0 7px var(--tinta), 12px 12px 0 7px rgba(21, 23, 28, .14); aspect-ratio: 16 / 10.6; }
.ilus { letter-spacing: .04em; margin-top: 10px; }

/* Cantos de detecção: dois colchetes em diagonal em cada cartão. */
.tc, .pv, .ps, .cx { position: relative; }
.tc::before, .pv::before, .ps::before, .cx::before, .tc::after, .pv::after, .ps::after, .cx::after { content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none; }
.tc::before, .pv::before, .ps::before, .cx::before { left: 7px; top: 7px; border-left: 2px solid var(--cor); border-top: 2px solid var(--cor); }
.tc::after, .pv::after, .ps::after, .cx::after { right: 7px; bottom: 7px; border-right: 2px solid var(--cor); border-bottom: 2px solid var(--cor); }

.tcs { border-color: var(--tinta); border-radius: var(--raio); }
.tc { padding-top: 30px; }
.tc h3 { font-size: 1.18rem; }
.tag { font: 500 .62rem var(--f-mono); border: 0; background: var(--sup2); color: var(--tinta2); border-radius: 2px; padding: 4px 7px; }
.tc-cassi { background: var(--tinta); }
.tc-cassi h3 { color: var(--lima); }
.tc-cassi p { color: rgba(238, 235, 227, .82); }
.tc-cassi .tag { background: var(--lima); color: var(--tinta); }
.tc-cassi::before, .tc-cassi::after { border-color: var(--lima); }
blockquote { border-left: 4px solid var(--cor); font: 500 clamp(1.15rem, 2vw, 1.55rem)/1.38 var(--f-tit); font-style: normal; color: var(--tinta); max-width: 38em; margin-top: 44px; }

.rl { border-top-color: var(--tinta); }
.rl:last-child { border-bottom-color: var(--tinta); }
.rl h3 { font: 500 clamp(1.12rem, 1.8vw, 1.45rem)/1.25 var(--f-tit); }
.et b { display: inline-block; background: var(--tinta); color: var(--lima); padding: 4px 8px; border-radius: 2px; font-weight: 500; letter-spacing: .08em; }
.et span { display: block; margin-top: 7px; }

/* Método: faixa grafite, número limão como ID de rastreio. */
.sec-esc { background: var(--esc); }
.ps { border: 1px solid rgba(238, 235, 227, .18); border-radius: 2px; background: rgba(238, 235, 227, .03); padding-top: 28px; }
.ps::before, .ps::after { border-color: var(--lima); }
.ps .n { font: 700 1.5rem/1 var(--f-tit); color: var(--lima); padding-top: 0; }
.ps .n::before { content: "#"; opacity: .55; }
.ps .gt { color: var(--lima) !important; border-top: 1px dashed rgba(238, 235, 227, .22); padding-top: 10px; }

/* Provas: cada número com o seu ID, como uma pessoa rastreada. */
.pvs { counter-reset: pv; }
.pv { counter-increment: pv; border: 1px solid var(--tinta); border-radius: 2px; padding-top: 34px; }
.pv b { color: var(--tinta); font-weight: 700; white-space: nowrap; }
.pv span { color: var(--tinta2); }
.pv b::after { content: " #0" counter(pv); font: 500 .66rem var(--f-mono); color: var(--cor); letter-spacing: .06em; vertical-align: top; margin-left: 6px; }
.dupla { margin-top: 28px; align-items: start; }
.cx { border: 1px solid var(--tinta); border-radius: 2px; }
.cx:first-child { background: var(--tinta); color: var(--esc-t); }
.cx:first-child::before, .cx:first-child::after { border-color: var(--lima); }
.cx:first-child h3 { color: var(--lima); }
.cx:first-child li { color: rgba(238, 235, 227, .85); }
.nao li::before { content: "×"; color: var(--rec); }
.sim li::before { content: "■"; font-size: .6rem; top: 6px; color: var(--cor); }

.fqs, .fq { border-color: var(--tinta); }
.fq summary h3 { font: 500 1.12rem/1.3 var(--f-tit); }
.fq summary::after { color: var(--cor); }

.sec.fim { max-width: none; background: var(--tinta); color: var(--esc-t); }
.fim h2 { color: var(--esc-t); }
.fim > p { color: var(--esc-f); }
.fc { border: 1px solid var(--tinta); border-radius: 2px; }
.fc input, .fc textarea { border-radius: 2px; }
.fim .btn { background: transparent; color: var(--esc-t); border-color: rgba(238, 235, 227, .5); }
.fim .btn:hover { box-shadow: 4px 4px 0 var(--lima); }
.fim .fc .btn-p { background: var(--cor); color: #fff; border-color: var(--tinta); }
.fim .fc .btn-p:hover { box-shadow: 4px 4px 0 var(--tinta); }
.rodape { background: var(--fundo); border-top: 1px solid var(--tinta); }

/* ---------- Palco: o app no tema escuro ---------- */
.palco .pc-abas { background: #15181e; border-bottom-color: var(--p-l); }
.palco .pc-aba { color: #8b919c; border-radius: 3px; }
.palco .pc-aba[aria-selected="true"] { background: var(--lima); color: #111; }
.palco .pc-prog { background: var(--lima); }
.cena { padding: 12px; color: var(--p-t); font-family: var(--f-txt); }
.cena h4 { font: 600 .62rem var(--f-txt); color: var(--p-t); letter-spacing: 0; }
.s-sim { flex: none; font: 500 .48rem var(--f-mono); color: #111; background: #ffb020; padding: 3px 7px; border-radius: 2px; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.s-cab { display: flex; align-items: center; gap: 10px; min-width: 0; }
.s-cab-t { min-width: 0; flex: 1; }
.s-cab-t b { display: block; font: 600 .84rem var(--f-tit); color: var(--p-t); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-cab-t small { display: block; font: 400 .5rem var(--f-mono); color: var(--p-f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-nota { font: 400 .5rem/1.45 var(--f-txt); color: var(--p-f); }

/* Cena 1: câmera e painel ao vivo */
.s-m { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .5fr); gap: 10px; }
.s-m-v { display: flex; flex-direction: column; gap: 7px; min-height: 0; }
.s-vid { position: relative; aspect-ratio: 16 / 10; border-radius: 3px; overflow: hidden; background: #000; flex: none; }
.s-vid svg { display: block; width: 100%; height: 100%; }
.s-linha { display: flex; align-items: center; gap: 8px; font: 400 .56rem var(--f-mono); color: var(--p-f); }
.s-play { flex: none; width: 18px; height: 18px; display: grid; place-items: center; background: var(--p-s2); border-radius: 3px; font-size: .46rem; color: var(--p-t); }
.s-trilho { position: relative; flex: 1; height: 6px; background: var(--p-s2); border-radius: 3px; }
.s-cursor { position: absolute; top: -4px; width: 2px; height: 14px; background: #fff; left: 45%; transition: left 1s linear; }
.s-marca { position: absolute; top: 0; width: 3px; height: 6px; border-radius: 1px; margin-left: -1px; }
.s-pipe { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.s-pipe span { background: var(--p-s); border: 1px solid var(--p-l); border-radius: 3px; padding: 4px 6px; min-width: 0; }
.s-pipe b { display: block; font: 500 .56rem var(--f-mono); color: var(--lima); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-pipe small { display: block; font: 400 .5rem var(--f-txt); color: var(--p-f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-m-p { display: flex; flex-direction: column; gap: 8px; background: var(--p-s); border: 1px solid var(--p-l); border-radius: 4px; padding: 10px; min-height: 0; overflow: hidden; }
.s-ao { display: flex; align-items: center; gap: 6px; font: 400 .56rem var(--f-mono); }
.s-ao i { width: 7px; height: 7px; border-radius: 50%; background: var(--rec); animation: s-pisca 1.2s steps(2) infinite; }
.s-ao b { font: 600 .66rem var(--f-txt); color: var(--p-t); }
.s-ao-t { margin-left: auto; color: var(--p-f); }
.s-cont { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.s-c { background: var(--p-s2); border-radius: 3px; padding: 5px 7px; border-left: 3px solid #5c6370; min-width: 0; }
.s-c0 { border-left-color: var(--lima); } .s-c1 { border-left-color: #9aa3b2; } .s-c2 { border-left-color: #5b93ff; }
.s-c3 { border-left-color: #ffb020; } .s-c4 { border-left-color: #3ddc97; } .s-c5 { border-left-color: #b98cff; }
.s-c small { display: block; font: 400 .48rem var(--f-mono); color: var(--p-f); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-c b { display: block; font: 700 1.1rem/1.1 var(--f-tit); color: var(--p-t); }
.s-c span { display: block; font: 400 .48rem var(--f-txt); color: var(--p-f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-c.pisca b { animation: s-luz .7s ease; }
.s-fb { display: grid; gap: 5px; }
.s-fb-l .rw { display: flex; justify-content: space-between; gap: 6px; font: 400 .52rem var(--f-txt); color: var(--p-f); }
.s-fb-l .rw b { color: var(--p-t); font: 500 .56rem var(--f-mono); }
.s-fb-l .bar, .s-nv .bar { height: 5px; background: var(--p-s2); border-radius: 3px; overflow: hidden; margin-top: 2px; }
.s-fb-l u, .s-nv u { display: block; height: 100%; width: 0; transition: width .6s ease; }
.s-feed { display: grid; gap: 4px; align-content: start; min-height: 0; }
.s-feed > small { font: 400 .48rem var(--f-mono); color: var(--p-f); text-transform: uppercase; letter-spacing: .06em; }
.s-ev { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; align-items: center; font: 400 .52rem var(--f-txt); opacity: 0; transform: translateX(8px); transition: opacity .35s, transform .35s; }
.s-ev.on { opacity: 1; transform: none; }
.s-tag { font: 500 .44rem var(--f-mono); color: #0f172a; padding: 2px 5px; border-radius: 2px; text-transform: uppercase; white-space: nowrap; }
.s-ev-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--p-t); }
.s-ev em { font: normal 400 .46rem var(--f-mono); color: var(--p-f); }
.m-pulso { transform-box: fill-box; transform-origin: center; }
.m-pulso.on { opacity: 1; animation: s-pulso .9s ease-out infinite; }
.m-rec { animation: s-pisca 1.2s steps(2) infinite; }
@keyframes s-pisca { 50% { opacity: .15; } }
@keyframes s-luz { 0% { color: var(--lima); transform: translateY(-2px); } 100% { color: var(--p-t); transform: none; } }
@keyframes s-pulso { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.9); opacity: 0; } }

/* Cena 2: funil */
.s-f { height: 100%; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); gap: 8px; }
.s-banda { height: 62px; }
.s-banda svg { width: 100%; height: 100%; display: block; }
.f-seg { opacity: 0; transition: opacity .5s ease; }
.f-seg.on { opacity: 1; }
.s-ets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.s-et { background: var(--p-s); border: 1px solid var(--p-l); border-top: 3px solid var(--c); border-radius: 3px; padding: 7px 8px; display: flex; flex-direction: column; gap: 3px; min-width: 0; opacity: .22; transition: opacity .4s; }
.s-et.on { opacity: 1; }
.s-et-h b { font: 600 .66rem var(--f-txt); color: var(--p-t); }
.s-et-h small { display: block; font: 400 .46rem var(--f-mono); color: var(--p-f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-et-n { font: 700 1.25rem/1 var(--f-tit); color: var(--p-t); }
.s-et-r { font: 400 .52rem var(--f-txt); color: var(--p-f); }
.s-et-r b { color: var(--c); font: 700 .74rem var(--f-tit); }
.s-ic { font: 400 .46rem var(--f-mono); color: var(--p-f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-bar { position: relative; height: 7px; background: var(--p-s2); border-radius: 2px; }
.s-bar u { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--c); opacity: .5; transition: width .8s ease; }
.s-bar s { position: absolute; top: -3px; bottom: -3px; left: 0; width: 0; border-left: 1.5px solid #fff; border-right: 1.5px solid #fff; background: rgba(255, 255, 255, .35); transition: left .8s ease, width .8s ease; }
.s-did { align-self: stretch; display: flex; justify-content: space-between; gap: 6px; font: 500 .48rem var(--f-mono); padding: 3px 6px; border-radius: 2px; opacity: 0; transform: translateY(4px); transition: opacity .35s, transform .35s; }
.s-did b { font-weight: 500; white-space: nowrap; }
.s-did small { font: inherit; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.s-et.did .s-did { opacity: 1; transform: none; }
.s-did.sig { background: rgba(61, 220, 151, .16); color: #3ddc97; }
.s-did.inc { background: rgba(154, 163, 178, .18); color: #c3c8d0; }
.s-tab { display: grid; align-content: start; gap: 3px; min-height: 0; overflow: hidden; }
.s-tr { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, .5fr) minmax(0, .45fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: center; font: 400 .56rem var(--f-txt); padding: 4px 7px; background: var(--p-s); border-radius: 3px; opacity: 0; transform: translateY(4px); transition: opacity .35s, transform .35s; }
.s-tr.on, .s-th { opacity: 1; transform: none; }
.s-th { background: none; font: 400 .46rem var(--f-mono); color: var(--p-f); text-transform: uppercase; letter-spacing: .04em; padding-top: 0; padding-bottom: 0; }
.s-th span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-nm { display: flex; align-items: center; gap: 5px; min-width: 0; }
.s-nm i { width: 8px; height: 12px; border-radius: 1px; flex: none; }
.s-nm b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--p-t); }
.s-nm em { font: normal 500 .42rem var(--f-mono); color: #111; background: var(--lima); padding: 1px 4px; border-radius: 2px; flex: none; text-transform: uppercase; }
.s-num { font: 400 .56rem var(--f-mono); color: var(--p-t); }
.s-wh { display: flex; align-items: center; gap: 6px; min-width: 0; }
.s-wh b { font: 400 .54rem var(--f-mono); color: var(--p-t); width: 3.6em; flex: none; }
.s-wh i { position: relative; flex: 1; height: 6px; background: var(--p-s2); border-radius: 3px; }
.s-wh u { position: absolute; top: -1px; bottom: -1px; left: 0; width: 0; background: #5b93ff; border-radius: 3px; transition: left .7s ease, width .7s ease; }
.s-wh:last-child u { background: #3ddc97; }

/* Cena 3: mapa de calor */
.s-h { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .44fr); grid-template-rows: auto minmax(0, 1fr); gap: 8px 10px; }
.s-h > .s-cab { grid-column: 1 / -1; }
.s-seg { display: flex; gap: 2px; background: var(--p-s2); padding: 2px; border-radius: 3px; min-width: 0; }
.s-seg span { font: 400 .5rem var(--f-mono); padding: 3px 6px; color: var(--p-f); border-radius: 2px; white-space: nowrap; transition: background .3s, color .3s; }
.s-seg span.on { background: var(--lima); color: #111; }
.s-h-g { position: relative; min-height: 0; background: #1e222a; border-radius: 3px; overflow: hidden; }
.s-h-g svg { width: 100%; height: 100%; display: block; }
.h-l { opacity: 0; transition: opacity .5s ease; }
.h-l.on { opacity: 1; }
.h-c { opacity: 0; transition: opacity .35s ease var(--d, 0ms); }
.h-l.on .h-c { opacity: 1; }
.s-leg { position: absolute; left: 8px; bottom: 8px; display: flex; align-items: center; gap: 2px; background: rgba(14, 16, 20, .82); padding: 4px 6px; border-radius: 2px; }
.s-leg i { width: 14px; height: 7px; }
.s-leg small { font: 400 .46rem var(--f-mono); color: var(--p-f); margin: 0 3px; }
.s-aviso { position: absolute; right: 8px; top: 8px; max-width: 52%; font: 500 .48rem/1.35 var(--f-mono); color: #111; background: var(--lima); padding: 4px 7px; border-radius: 2px; opacity: 0; transform: translateY(-4px); transition: opacity .4s, transform .4s; }
.s-h[data-modo="2"] .s-aviso { opacity: 1; transform: none; }
.s-h-n { background: var(--p-s); border: 1px solid var(--p-l); border-radius: 3px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow: hidden; }
.s-nv { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tt n" "bar bar"; gap: 2px 6px; opacity: .25; transition: opacity .4s; }
.s-nv.on { opacity: 1; }
.s-nv .tt { grid-area: tt; min-width: 0; }
.s-nv .tt b { display: block; font: 600 .56rem var(--f-txt); color: var(--p-t); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-nv .tt small { display: block; font: 400 .46rem var(--f-mono); color: var(--p-f); white-space: nowrap; }
.s-nv strong { grid-area: n; font: 700 .86rem var(--f-tit); color: var(--p-t); align-self: end; }
.s-nv .bar { grid-area: bar; }
.s-nv u { background: #2f8fe0; }
.s-nv.top u { background: #baf0ff; }
.s-nv.top strong { color: #baf0ff; }
.s-h-n .s-nota { margin-top: auto; }

/* Cena 4: comparar períodos */
.s-c4 { height: 100%; display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 8px; }
.s-efs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.s-ef { background: var(--p-s); border: 1px solid var(--p-l); border-radius: 3px; padding: 7px 9px; display: grid; gap: 2px; min-width: 0; opacity: .25; transition: opacity .4s; }
.s-ef.on { opacity: 1; }
.s-ef small { font: 400 .5rem var(--f-mono); color: var(--p-f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-ef strong { font: 700 1.22rem/1.05 var(--f-tit); color: var(--p-t); white-space: nowrap; }
.s-ef-ic { font: 400 .46rem var(--f-mono); color: var(--p-f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-ef-w { height: 22px; }
.s-ef-w svg, .s-psk-l .w svg { width: 100%; height: 100%; display: block; }
.s-ver { justify-self: start; font: 500 .46rem var(--f-mono); padding: 2px 6px; border-radius: 2px; text-transform: uppercase; letter-spacing: .04em; opacity: 0; transition: opacity .35s; }
.s-ver.on { opacity: 1; }
.s-ver.sig { background: #3ddc97; color: #0e1014; }
.s-ver.inc { background: #4a505b; color: #e8eaed; }
.s-c4-b { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 8px; min-height: 0; }
.s-graf, .s-psk { background: var(--p-s); border: 1px solid var(--p-l); border-radius: 3px; padding: 8px 9px; min-height: 0; display: flex; flex-direction: column; gap: 5px; overflow: hidden; }
.s-gh { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.s-lg { font: 400 .46rem var(--f-mono); color: var(--p-f); display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.s-lg i { width: 10px; height: 3px; display: inline-block; }
.s-lg i.t { background: #5b93ff; } .s-lg i.c { background: #8b919c; }
.s-gsvg { flex: 1; min-height: 0; }
.s-gsvg svg { width: 100%; height: 100%; display: block; }
.g-ln { stroke-dasharray: 1400; stroke-dashoffset: 1400; transition: stroke-dashoffset 2.6s ease; }
.g-ln.on { stroke-dashoffset: 0; }
.g-ln.t { transition-delay: .35s; }
.s-psk-l { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) auto; gap: 6px; align-items: center; opacity: 0; transition: opacity .35s; }
.s-psk-l.on { opacity: 1; }
.s-psk-l .nm { display: flex; gap: 5px; align-items: center; min-width: 0; }
.s-psk-l .nm i { width: 7px; height: 10px; border-radius: 1px; flex: none; }
.s-psk-l .nm b { font: 500 .52rem var(--f-txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--p-t); }
.s-psk-l .w { height: 16px; }
.s-psk-l em { font: normal 400 .5rem var(--f-mono); color: var(--p-t); min-width: 4.4em; text-align: right; }
.s-psk .s-nota { opacity: 0; transition: opacity .4s; margin-top: auto; }
.s-psk .s-nota.on { opacity: 1; }

/* Cena 5: relatório e prova de privacidade */
.s-r { position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 10px; }
.s-doc { background: #f7f5ef; color: #15171c; border-radius: 3px; overflow: hidden; display: flex; flex-direction: column; min-height: 0; opacity: .3; transform: translateY(8px); transition: opacity .45s, transform .45s; }
.s-doc.on { opacity: 1; transform: none; }
.s-doc-h { background: #15171c; color: #eeebe3; padding: 8px 10px; display: flex; align-items: center; gap: 8px; }
.s-doc-h > div { flex: 1; min-width: 0; }
.s-doc-h b { display: block; font: 700 .72rem var(--f-tit); }
.s-doc-h small { display: block; font: 400 .48rem var(--f-mono); opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-doc-c { padding: 9px 11px; display: flex; flex-direction: column; gap: 5px; min-height: 0; flex: 1; }
.s-doc-c h3 { font: 600 .86rem var(--f-tit); color: #15171c; letter-spacing: 0; }
.s-doc-p { font: 400 .5rem/1.4 var(--f-txt); color: #555; }
.s-doc-k { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; border-top: 1px solid #ddd8cc; border-bottom: 1px solid #ddd8cc; padding: 5px 0; }
.s-doc-k small { display: block; font: 400 .44rem var(--f-mono); color: #6b6e76; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-doc-k b { font: 700 .82rem var(--f-tit); }
.s-doc-c h4 { font: 600 .58rem var(--f-txt); color: #15171c; }
.s-doc-l { padding-left: 14px; display: grid; gap: 4px; margin: 0; }
.s-doc-l li { font: 400 .52rem/1.4 var(--f-txt); color: #333; opacity: 0; transition: opacity .4s; }
.s-doc-l li.on { opacity: 1; }
.s-doc-r { font: 400 .52rem/1.45 var(--f-txt); color: #333; background: #ebe7dc; border-left: 3px solid var(--cor); padding: 5px 8px; opacity: 0; transition: opacity .4s; }
.s-doc-r.on { opacity: 1; }
.s-pdf { margin-top: auto; align-self: flex-start; border: 0; background: var(--cor); color: #fff; font: 600 .6rem var(--f-txt); padding: 6px 11px; border-radius: 3px; box-shadow: 0 3px 0 #15171c; transition: transform .15s, box-shadow .15s; }
.s-pdf.pulsa { animation: s-bate .9s ease-in-out infinite; }
.s-pdf.press { transform: translateY(3px); box-shadow: 0 0 0 #15171c; }
@keyframes s-bate { 50% { transform: scale(1.05); } }
.s-toast { position: absolute; left: 26%; bottom: 14px; transform: translate(-50%, 160%); opacity: 0; background: #3ddc97; color: #0e1014; font: 600 .6rem var(--f-txt); padding: 6px 11px; border-radius: 3px; transition: transform .4s, opacity .3s; white-space: nowrap; }
.s-toast.on { transform: translate(-50%, 0); opacity: 1; }
.s-priv { background: var(--p-s); border: 1px solid var(--p-l); border-radius: 3px; padding: 9px; display: flex; flex-direction: column; gap: 7px; min-height: 0; overflow: hidden; }
.s-fr { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; align-items: center; }
.s-fr figure { margin: 0; position: relative; border-radius: 3px; overflow: hidden; aspect-ratio: 4 / 3; background: #000; }
.s-fr figure svg { width: 100%; height: 100%; display: block; }
.s-fr figcaption { position: absolute; left: 0; right: 0; bottom: 0; font: 400 .44rem/1.3 var(--f-mono); background: rgba(0, 0, 0, .7); color: #e8eaed; padding: 3px 5px; }
.s-seta { color: var(--lima); font: 700 .9rem var(--f-mono); }
.s-fr-b .p-mz { opacity: 0; transition: opacity .5s ease .8s; }
.s-fr-b.on .p-mz { opacity: 1; }
.s-scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--lima); opacity: 0; }
.s-fr-b.on .s-scan { animation: s-scan 1.3s ease forwards; }
@keyframes s-scan { 0% { top: 0; opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.s-ck { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.s-ck li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px; align-items: start; font: 400 .54rem/1.35 var(--f-txt); color: var(--p-t); opacity: .22; transition: opacity .35s; }
.s-ck li.on { opacity: 1; }
.s-ck i { font: normal 500 .5rem/13px var(--f-mono); width: 13px; height: 13px; border-radius: 2px; background: var(--p-s2); color: #0e1014; text-align: center; }
.s-ck li.on i { background: var(--lima); }
.s-pap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: auto; opacity: 0; transition: opacity .4s; }
.s-pap.on { opacity: 1; }
.s-pap span { background: var(--p-s2); border-radius: 3px; padding: 4px 6px; min-width: 0; }
.s-pap b { display: block; font: 600 .5rem var(--f-txt); color: var(--p-t); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-pap small { display: block; font: 400 .44rem/1.3 var(--f-mono); color: var(--p-f); }

@media (max-width: 1080px) {
  .palco { aspect-ratio: 16 / 11; }
}
@media (max-width: 720px) {
  .palco { aspect-ratio: auto; box-shadow: 0 0 0 5px var(--tinta), 7px 7px 0 5px rgba(21, 23, 28, .14); }
  .heroi { padding-left: 21px; padding-right: 21px; }
  .cena { padding: 8px; }
  .s-m { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 6px; }
  .s-pipe span { padding: 3px 4px; }
  .s-pipe small { display: none; }
  .s-pipe b { font-size: .46rem; }
  .s-m-p { padding: 7px; gap: 6px; }
  .s-cont { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .s-c { padding: 4px 5px; }
  .s-c b { font-size: .92rem; }
  .s-feed { display: none; }
  .s-fb { gap: 3px; }
  .s-fb-l:nth-child(4) { display: none; }
  .s-m-v .s-linha { font-size: .5rem; }
  .s-cab { flex-wrap: wrap; row-gap: 4px; }
  .s-cab-t { flex-basis: 100%; }
  .s-cab .s-sim { order: 3; }
  .palco .pc-aba small { display: none; }
  .palco .pc-aba { padding: 7px 3px; }
  .palco .pc-aba b { font-size: .56rem; }
  .s-f { gap: 6px; }
  .s-banda { height: 34px; }
  .s-ets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  .s-et { padding: 5px 6px; gap: 2px; }
  .s-et-n { font-size: 1.05rem; }
  .s-tr { grid-template-columns: minmax(0, 1.6fr) minmax(0, .7fr) minmax(0, .8fr); gap: 6px; padding: 3px 5px; }
  .s-tr > :nth-child(3), .s-tr > :nth-child(4), .s-nm em { display: none; }
  .s-did small { display: none; }
  .s-did b { white-space: normal; }
  .s-ic { white-space: normal; }
  .s-tr:nth-child(n+5) { display: none; }
  .s-wh { gap: 3px; }
  .s-wh i { display: none; }
  .s-h { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; align-content: start; gap: 6px; }
  .s-seg { order: 2; flex-basis: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .s-seg span { overflow: hidden; text-overflow: ellipsis; text-align: center; padding: 3px 2px; font-size: .46rem; }
  .s-h-g { aspect-ratio: 3 / 2.1; }
  .s-h-n { padding: 7px; gap: 4px; }
  .s-h-n h4, .s-h-n .s-nota { display: none; }
  .s-nv .tt small { display: none; }
  .s-nv { grid-template-columns: 7.2em minmax(0, 1fr) auto; grid-template-areas: "tt bar n"; align-items: center; }
  .s-nv .bar { margin-top: 0; }
  .s-aviso { max-width: 80%; }
  .s-c4 { gap: 6px; }
  .s-efs { gap: 4px; }
  .s-ef { padding: 5px 6px; }
  .s-ef strong { font-size: .95rem; }
  .s-ef-ic { display: none; }
  .s-ver { font-size: .4rem; padding: 2px 4px; }
  .s-lg { display: none; }
  .s-c4-b { grid-template-rows: minmax(150px, 1fr) auto; }
  .s-c4-b { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 6px; }
  .s-psk .s-nota { display: none; }
  .s-psk-l:nth-of-type(n+5) { display: none; }
  .s-r { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 6px; }
  .s-doc-p, .s-doc-c h4, .s-doc-l, .s-doc-r { display: none; }
  .s-doc-c { gap: 4px; padding: 7px 9px; }
  .s-pap { display: none; }
  .s-fr figure { aspect-ratio: 16 / 10; }
  .s-ck li { font-size: .5rem; }
  .s-toast { left: 50%; bottom: auto; top: 6px; }
}