:root{
--xws-label: #cccccc; /* cor de rótulos/ícones */
--xws-value: #fff; /* cor dos números */
--xws-border:rgba(255,255,255,.12);
--xws-online: #34d399;
}
/* chip do online */
#xtina-stats .xws-online{ gap:.5rem; position:relative; }
/* bolinha verde “antes” do chip */
#xtina-stats .xws-online::before{
content:"";
display:inline-block;
width:8px; height:8px; border-radius:50%;
background:#34d399;
box-shadow:0 0 0 0 rgba(52,211,153,.8);
vertical-align:middle;
margin-right:.25rem;
}
/* animação quando houver gente online */
#xtina-stats .xws-online.pulse::before{
animation:xwsPulse 1.6s ease-out infinite;
}
/* quando não pulsando, deixa “apagado” */
#xtina-stats .xws-online:not(.pulse)::before{
opacity:.35;
animation:none;
box-shadow:none;
}
/* (já existiam) */
@keyframes xwsPulse{
0%{box-shadow:0 0 0 0 rgba(52,211,153,.8)}
70%{box-shadow:0 0 0 10px rgba(52,211,153,0)}
100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}
}
#xtina-stats .xws-card{background:rgba(255,255,255,.045);border:1px solid var(--xws-border);border-radius:1rem}
#xtina-stats .xws-body{padding:1rem 1.25rem}
#xtina-stats .xws-section{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.9rem 1.4rem}
#xtina-stats .xws-top{padding-bottom:.7rem;border-bottom:1px dashed var(--xws-border);margin-bottom:.6rem}
/* chips */
#xtina-stats .xws-chip{display:inline-flex;align-items:center;gap:.35rem}
#xtina-stats .xws-label{color:var(--xws-label);font-weight:700;opacity:.96;white-space:nowrap;display:inline-flex;align-items:center;gap:.5rem}
/* colon colado ao texto + pequeno espaço fixo antes do número */
#xtina-stats .xws-chip{ display:inline-flex; align-items:center; gap:.25rem; } /* antes .35rem */
#xtina-stats .xws-value{color:var(--xws-value);font-weight:700;white-space:nowrap;letter-spacing:.2px}
/* ícones via CSS-mask (20px) – substitua os TODO pelos seus data:image */
#xtina-stats .ico::before{
content:"";display:inline-block;width:20px;height:20px;color:var(--xws-label);
background-color:currentColor;-webkit-mask:var(--ico) no-repeat center/contain;mask:var(--ico) no-repeat center/contain;
opacity:.95;flex:0 0 auto
}
/* TOP */
#xws-label-members.ico::before{ --ico:url("data:image/svg+xml;utf8,"); }
#xws-label-guests.ico::before{ --ico:url("data:image/svg+xml;utf8,"); }
#xws-label-record.ico::before{ --ico:url("data:image/svg+xml;utf8,"); }
/* BOTTOM */
#xws-label-photos.ico::before{ --ico:url("data:image/svg+xml;utf8,"); }
#xws-label-albums.ico::before{ --ico:url("data:image/svg+xml;utf8,"); }
#xws-label-tags.ico::before{ --ico:url("data:image/svg+xml;utf8,"); }
#xws-label-views.ico::before{ --ico:url("data:image/svg+xml;utf8,"); }
#xws-label-downloads.ico::before{--ico:url("data:image/svg+xml;utf8,"); }
/* Paleta por item – só o ícone muda de cor */
#xws-label-members.ico::before { background-color:#34d399 !important; } /* Membros */
#xws-label-guests.ico::before { background-color:#34d399 !important; } /* Visitantes */
#xws-label-record.ico::before { background-color:#34d399 !important; } /* Recorde */
#xws-label-photos.ico::before { background-color:#fff !important; } /* Fotos */
#xws-label-albums.ico::before { background-color:#fff !important; } /* Álbuns */
#xws-label-tags.ico::before { background-color:#fff !important; } /* Tags */
#xws-label-views.ico::before { background-color:#fff !important; } /* Visualizações */
#xws-label-downloads.ico::before { background-color:#fff !important; } /* Downloads */
#xtina-stats .xws-online-word{ color:var(--xws-online); }
/* dot verde (seu efeito original) */
#xtina-stats .xws-dot{width:8px;height:8px;border-radius:50%;display:inline-block;background:#34d399;box-shadow:0 0 0 0 rgba(52,211,153,.8)}
#xtina-stats .xws-dot.pulse{animation:xwsPulse 1.6s ease-out infinite}
@keyframes xwsPulse{
0%{box-shadow:0 0 0 0 rgba(52,211,153,.8)}
70%{box-shadow:0 0 0 10px rgba(52,211,153,0)}
100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}
}
@media(max-width:640px){
#xtina-stats .xws-body{padding:.9rem 1rem}
#xtina-stats .xws-section{gap:.8rem 1rem}
#xtina-stats .ico::before{width:18px;height:18px}
}
/* ====== MOBILE STACK: primeira linha vira 4 linhas ====== */
/* MOBILE empilhado e CENTRALIZADO */
@media (max-width: 531px){
/* as linhas (chips) ficam no centro do cartão */
#xtina-stats .xws-top{
display: flex;
flex-direction: column;
align-items: center; /* <— centraliza a coluna */
justify-content: flex-start;
}
/* cada chip ocupa a largura toda, mas conteúdo centralizado */
#xtina-stats .xws-top .xws-chip{
width: 100%;
justify-content: center; /* <— centraliza o ícone + texto + número */
text-align: center; /* ajuda em casos de wrap */
}
/* dois ajustes finos de espaçamento visual */
#xtina-stats .xws-top .xws-chip:not(.xws-online) .xws-label::after{
content: ":";
margin: 0 .35rem; /* : com respiro dos dois lados */
}
#xtina-stats .xws-top .xws-value{
margin-left: 0; /* já demos espaço no ":" acima */
}
}