/* Cako Zone Contador v1.0.0 */
:root{--accent:#a8ff60;--panel:#12171f;--text:#f6f8fc;--muted:#8f9aaa;--radius:24px}
/* Mantém a estrutura nativa disponível sem duplicar o contador na cena. */
#platform_container{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important;clip-path:inset(50%)}
*{box-sizing:border-box}body{margin:0;background:transparent;font-family:Inter,"Segoe UI",sans-serif;color:var(--text)}
.viewer-widget{width:360px;max-width:100%;padding:24px;background:var(--panel);border:1px solid #ffffff1c;border-radius:var(--radius);position:relative;overflow:hidden;box-shadow:0 14px 40px #0003;animation:arrive .6s ease both}
.viewer-widget:before{content:"";position:absolute;top:0;left:24px;right:24px;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent)}
.counter-header{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:700;letter-spacing:1.3px}.live-dot{width:6px;height:6px;flex-shrink:0;border-radius:50%;background:var(--muted)}
[data-state="live"] .live-dot,[data-state="demo"] .live-dot{background:var(--accent);box-shadow:0 0 12px var(--accent);animation:pulse 2.5s infinite}
#data-status{margin-left:auto;font-size:8px;letter-spacing:.6px;color:var(--muted)}
.counter-main{display:flex;align-items:center;gap:16px;margin:24px 0}.eye{width:30px;flex-shrink:0;color:var(--accent)}#viewer-total{font-size:64px;font-weight:750;line-height:1.1;letter-spacing:-3px;font-variant-numeric:tabular-nums}.counter-caption{color:var(--muted);font-size:12px;line-height:1.6}
.platform-list{display:flex;gap:8px;flex-wrap:wrap}.platform-chip{display:flex;align-items:center;gap:10px;background:#ffffff06;border:1px solid #ffffff0d;border-radius:10px;padding:9px 12px;min-width:64px;font-size:12px}.platform-logo{width:18px;height:18px;flex-shrink:0;fill:var(--platform-color)}.platform-count{font-weight:700;font-variant-numeric:tabular-nums}
.counter-footer{display:flex;justify-content:space-between;gap:12px;border-top:1px solid #ffffff0c;padding-top:15px;margin-top:18px;font-size:9px;color:var(--muted)}#mode-label{letter-spacing:1.5px;color:var(--accent)}
.viewer-widget.compact{width:280px;padding:16px;border-radius:16px}.compact .counter-header{font-size:8px;letter-spacing:.7px;flex-wrap:wrap}.compact #data-status{font-size:7px}.compact .counter-main{margin:14px 0;gap:12px}.compact #viewer-total{font-size:44px;letter-spacing:-2px}.compact .eye{width:24px}.compact .counter-caption{font-size:10px}.compact .platform-list{gap:6px}.compact .platform-chip{padding:6px 9px;min-width:50px;gap:7px;font-size:11px}.compact .platform-logo{width:15px;height:15px}.compact .counter-footer{display:none}
@keyframes pulse{50%{opacity:.4}}@keyframes arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){*,*:before{animation:none!important;transition:none!important}}
.viewer-widget.mini{display:flex;align-items:center;flex-wrap:wrap;gap:10px;width:fit-content;max-width:100%;padding:10px 14px;border-radius:14px}
.mini .counter-header,.mini .counter-caption,.mini .counter-footer{display:none}
.mini .counter-main{margin:0;gap:8px;min-width:0}.mini #viewer-total{font-size:28px;letter-spacing:-1px;overflow-wrap:anywhere}.mini .eye{width:20px}
.mini .platform-list{gap:10px;border-left:1px solid #ffffff20;padding-left:10px;min-width:0}.mini .platform-chip{min-width:0;padding:0;gap:5px;border:0;background:none;font-size:12px}.mini .platform-logo{width:16px;height:16px}
.mini[data-single="true"] .platform-list{order:-1;border:0;padding:0}.mini[data-single="true"] .platform-count,.mini[data-single="true"] .eye{display:none}
.mini[data-notice]:not([data-notice=""]):after{content:attr(data-notice);color:var(--muted);font-size:7px;letter-spacing:.6px}
.viewer-widget.bare{background:transparent;border:0;box-shadow:none;padding:4px;overflow:visible}.bare:before{display:none}.viewer-widget.bare .eye{display:block}.viewer-widget.bare .platform-list{order:0;border-left:1px solid #ffffff55;padding-left:10px}.viewer-widget.bare .platform-list:empty{display:none}.bare #viewer-total,.bare .platform-count{text-shadow:0 1px 3px #0009}
.viewer-widget{--totalScale:1;--countScale:1;--iconScale:1;--total-base:64px;--count-base:12px;--logo-base:18px;--eye-base:30px}
.viewer-widget.compact{--total-base:44px;--count-base:11px;--logo-base:15px;--eye-base:24px}
.viewer-widget.mini{--total-base:28px;--count-base:12px;--logo-base:16px;--eye-base:20px}
.viewer-widget #viewer-total{font-size:calc(var(--total-base)*var(--totalScale));overflow-wrap:anywhere;min-width:0}
.viewer-widget .platform-count{font-size:calc(var(--count-base)*var(--countScale))}
.viewer-widget .platform-logo{width:calc(var(--logo-base)*var(--iconScale));height:calc(var(--logo-base)*var(--iconScale))}
.viewer-widget .eye{width:calc(var(--eye-base)*var(--iconScale))}
.viewer-widget .counter-main{flex-wrap:wrap}.viewer-widget .platform-chip{max-width:100%;overflow-wrap:anywhere}

/* Painéis com até três plataformas por linha; a quarta começa sob a primeira. */
.viewer-widget:not(.mini) .platform-list{display:grid;grid-template-columns:repeat(var(--platform-columns,3),minmax(0,1fr));align-items:stretch}
.viewer-widget:not(.mini) .platform-chip{min-width:0;justify-content:center;flex-wrap:wrap;padding-inline:8px}
.viewer-widget:not(.mini) .platform-count{min-width:0;overflow-wrap:anywhere}
.viewer-widget:not(.mini) .counter-header{flex-wrap:wrap;row-gap:6px}.viewer-widget:not(.mini) .counter-footer{flex-wrap:wrap}