/* ---------- aba Site (contador de visitas do outmaker.com.br); usa a moldura da aba Início */
.sper{margin-left:auto;display:flex;align-items:center;gap:10px}
.sper .seg{margin-left:0}
.sper .btn svg{width:14px;height:14px}
.kp span em{font-style:normal;font-weight:600}
.kp span em.up{color:#6FD49A}.kp span em.dn{color:var(--verm)}
.kp.am b{position:relative;padding-left:18px}
.kp.am b::before{content:"";position:absolute;left:0;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:var(--am);box-shadow:0 0 0 0 rgba(255,196,1,.6);animation:spulso 2s infinite}
@keyframes spulso{70%{box-shadow:0 0 0 9px rgba(255,196,1,0)}100%{box-shadow:0 0 0 0 rgba(255,196,1,0)}}
@media (prefers-reduced-motion:reduce){.kp.am b::before{animation:none}}

/* gráfico de barras */
.sgraf{position:relative;padding:8px 8px 0}
.sgraf svg{display:block;max-width:100%;height:auto;overflow:visible}
.sgraf .gl line{stroke:var(--linha);stroke-width:1}
.sgraf text{fill:var(--fra);font-size:10px;font-variant-numeric:tabular-nums;text-anchor:end}
.sgraf text.xl{text-anchor:middle}
.sgraf text.xl.ag{fill:var(--am);font-weight:600}
.sgraf .br path{fill:var(--txt);opacity:.5;transition:opacity .12s}
.sgraf .br path.ag{fill:var(--am);opacity:1}
.sgraf .hit{fill:transparent;cursor:default}
.sgraf .hit:hover{fill:rgba(255,255,255,.03)}
.sgraf .tip{position:absolute;transform:translateX(-50%);pointer-events:none;background:var(--s3);border:1px solid var(--linha2);border-radius:10px;padding:8px 11px;display:flex;flex-direction:column;gap:2px;white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.4);z-index:2}
.sgraf .tip[hidden]{display:none}
.sgraf .tip small{font-size:10px;letter-spacing:.12em;color:var(--fra);font-weight:600}
.sgraf .tip b{font-size:13px;font-weight:700}
.sgraf .tip span{font-size:11px;color:var(--mut)}

/* ao vivo */
.flg{font-size:9.5px;letter-spacing:.16em;color:var(--fra);font-weight:600;padding:10px 8px 4px}
.fl{display:grid;grid-template-columns:14px minmax(0,1fr) auto;align-items:center;gap:10px;padding:7px 8px;border-radius:10px}
.fl>i{width:7px;height:7px;border-radius:50%;background:var(--fra);justify-self:center}
.fl.on>i{background:var(--am);box-shadow:0 0 0 3px rgba(255,196,1,.18)}
.fl.am .t b{color:var(--am)}
.fl.am>i{background:#6FD49A}
.fl .t{min-width:0;display:flex;flex-direction:column;gap:2px}
.fl .t b{font-weight:600;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fl .t span{color:var(--mut);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fl .q{font-size:11px;color:var(--mut);white-space:nowrap;font-variant-numeric:tabular-nums}
.fl.on .q{color:var(--am);font-weight:600}
[data-bloco="feed"] .cb{max-height:330px;overflow-y:auto}

/* listas de barras com subtítulo */
[data-bloco] .hb{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) 34px}
.hb span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--txt)}
.hb span small{display:block;color:var(--fra);font-size:10.5px;overflow:hidden;text-overflow:ellipsis}
.sfx{padding:8px 8px 4px;color:var(--mut);font-size:11.5px}

.snota{display:flex;align-items:center;gap:12px;border:1px dashed var(--linha2);border-radius:14px;padding:12px 16px;color:var(--mut);font-size:12px;flex:none}
.snota>svg{width:15px;height:15px;color:var(--am);flex:none}
.snota b{color:var(--txt);font-weight:600}
.snota .btn{margin-left:auto;height:32px}
.snota .btn svg{width:14px;height:14px}

@media (max-width:1000px){
  .sper{margin-left:0;width:100%}
  .sper .seg{flex:1;min-width:0;width:auto}
  .sper .seg button{flex:1;min-width:0;padding-left:8px;padding-right:8px}
  .sper .btn{margin-left:auto;flex:none}
  .snota{flex-wrap:wrap}.snota .btn{margin-left:0}
}