.nx-counter {
    --counter-accent: var(--nx-color-primary, var(--bs-primary, #ff7900));
    --counter-text: var(--nx-color-on-surface, var(--bs-body-color, #eef2f6));
    --counter-muted: var(--nx-color-muted, var(--bs-secondary-color, #9aa5b2));
    --counter-border: var(--nx-component-border, var(--nx-color-card-border, rgba(148, 163, 184, .22)));
    --counter-surface: var(--nx-component-card-bg, var(--nx-color-card-bg, var(--bs-card-bg, #101820)));
    --counter-soft: var(--nx-color-surface-soft, color-mix(in srgb, var(--counter-surface) 91%, var(--counter-text) 9%));
    --counter-blue: #2f7eea;
    --counter-green: #24a148;
    --counter-violet: #8945d6;
    --counter-teal: #16a39a;
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    overflow: hidden;
    box-sizing: border-box;
    color: var(--counter-text);
    background: var(--counter-surface);
    border-color: var(--counter-border);
}
.nx-counter > .card-body { padding: clamp(1rem, 2.4vw, 2rem); }
.nx-counter *, .nx-counter *::before, .nx-counter *::after { box-sizing: border-box; }
.counter-heading { display:flex; align-items:center; gap:14px; margin:0 0 1.3rem; }
.counter-heading__icon { display:grid; width:46px; height:46px; place-items:center; border-radius:10px; background:color-mix(in srgb,var(--counter-accent) 14%,transparent); color:var(--counter-accent); font-size:1.35rem; }
.counter-heading h1 { margin:0; font-size:clamp(1.8rem,3vw,2.7rem); font-weight:800; letter-spacing:-.035em; text-transform:uppercase; }
.counter-heading h1::after { display:block; width:86px; height:3px; margin-top:4px; background:var(--counter-accent); content:""; }
.counter-heading p { margin:.35rem 0 0; color:var(--counter-muted); }
.counter-notice { margin-bottom:1rem; padding:12px 15px; border:1px solid var(--counter-border); border-radius:8px; background:var(--counter-soft); }
.counter-kpis { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px; }
.counter-kpi, .counter-live, .counter-panel, .counter-status { border:1px solid var(--counter-border); background:linear-gradient(145deg,var(--counter-surface),color-mix(in srgb,var(--counter-surface) 96%,var(--counter-text) 4%)); box-shadow:0 10px 28px rgba(0,0,0,.08); }
.counter-kpi { display:flex; min-width:0; min-height:112px; align-items:center; gap:14px; padding:17px; border-radius:8px; }
.counter-kpi__icon, .counter-live__icon { display:grid; flex:0 0 auto; width:50px; height:50px; place-items:center; border-radius:8px; background:color-mix(in srgb,currentColor 12%,transparent); color:var(--counter-accent); font-size:1.55rem; }
.counter-kpi > div, .counter-live > div:not(.counter-live__meter):not(.counter-live__spark) { display:flex; min-width:0; flex-direction:column; }
.counter-kpi small, .counter-live small { overflow:hidden; color:var(--counter-muted); font-size:.72rem; font-weight:700; letter-spacing:.02em; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.counter-kpi strong { margin:2px 0; font-size:clamp(1.25rem,2vw,1.8rem); line-height:1.05; }
.counter-kpi span:not(.counter-kpi__icon), .counter-live span:not(.counter-live__icon) { color:var(--counter-muted); font-size:.75rem; }
.counter-kpi--blue .counter-kpi__icon { color:var(--counter-blue); }.counter-kpi--green .counter-kpi__icon { color:var(--counter-green); }.counter-kpi--violet .counter-kpi__icon { color:var(--counter-violet); }.counter-kpi--teal .counter-kpi__icon { color:var(--counter-teal); }
.counter-live-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:16px; }
.counter-live { display:grid; min-height:105px; grid-template-columns:auto minmax(90px,auto) 1fr; align-items:center; gap:14px; padding:18px; border-radius:8px; }
.counter-live strong { font-size:1.65rem; line-height:1; }
.counter-live__meter { justify-self:end; width:min(190px,100%); height:3px; overflow:hidden; border-radius:3px; background:var(--counter-border); }
.counter-live__meter i { display:block; height:100%; border-radius:inherit; background:currentColor; }
.counter-live--green { color:var(--counter-green); }.counter-live--blue { color:var(--counter-blue); }.counter-live--violet { color:var(--counter-violet); }
.counter-live__spark { width:min(190px,100%); justify-self:end; }
.counter-sparkline { display:block; width:100%; height:48px; }.counter-sparkline polyline { fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.counter-analysis { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(260px,.72fr) minmax(280px,.95fr); gap:16px; margin-top:16px; }
.counter-panel { min-width:0; min-height:380px; padding:18px; border-radius:8px; }
.counter-panel > header { display:flex; align-items:flex-start; gap:10px; margin-bottom:12px; }
.counter-panel__icon { color:var(--counter-accent); font-size:1.05rem; }
.counter-panel h2 { margin:0; font-size:1rem; font-weight:800; text-transform:uppercase; }
.counter-panel header p { margin:4px 0 0; color:var(--counter-muted); font-size:.78rem; }
.counter-chart { width:100%; overflow:hidden; }.counter-line-chart { display:block; width:100%; height:285px; overflow:visible; }
.counter-chart-grid line { stroke:var(--counter-border); }.counter-chart-grid text { fill:var(--counter-muted); font-size:10px; }
.counter-chart-area { fill:color-mix(in srgb,var(--counter-accent) 18%,transparent); }.counter-chart-line { fill:none; stroke:var(--counter-accent); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }.counter-chart-points circle { fill:var(--counter-accent); stroke:var(--counter-surface); stroke-width:2; }
.counter-pages { margin:0; padding:0; list-style:none; }
.counter-pages li { display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:8px; align-items:center; min-height:54px; border-bottom:1px solid var(--counter-border); }
.counter-pages li:last-child { border-bottom:0; }.counter-page-rank { color:var(--counter-muted); }
.counter-pages li > div, .counter-pages li > span:last-child { display:flex; min-width:0; flex-direction:column; }
.counter-pages li > span:last-child { align-items:flex-end; }.counter-pages strong { overflow:hidden; font-size:.82rem; text-overflow:ellipsis; white-space:nowrap; }.counter-pages small { overflow:hidden; color:var(--counter-muted); font-size:.68rem; text-overflow:ellipsis; white-space:nowrap; }
.counter-pages .counter-empty { display:block; padding:18px 0; color:var(--counter-muted); }
.counter-type-content { display:grid; grid-template-columns:140px minmax(0,1fr); align-items:center; gap:18px; min-height:245px; }
.counter-donut { position:relative; display:grid; width:138px; aspect-ratio:1; place-items:center; border-radius:50%; background:conic-gradient(var(--counter-green) 0 var(--counter-members),var(--counter-blue) var(--counter-members) var(--counter-guests),var(--counter-border) var(--counter-guests) 100%); }
.counter-donut::after { position:absolute; width:58%; aspect-ratio:1; border-radius:50%; background:var(--counter-surface); content:""; }.counter-donut span { z-index:1; font-size:1.35rem; font-weight:800; }
.counter-legend p { display:grid; grid-template-columns:10px minmax(0,1fr) auto; align-items:center; gap:9px; margin:0 0 17px; }
.counter-legend i { width:10px; height:10px; border-radius:3px; }.counter-legend .is-member{background:var(--counter-green)}.counter-legend .is-guest{background:var(--counter-blue)}.counter-legend .is-bot{background:var(--counter-violet)}
.counter-legend span { display:flex; flex-direction:column; font-size:.8rem; }.counter-legend small { color:var(--counter-muted); font-size:.66rem; }.counter-legend strong { font-size:.82rem; }
.counter-types-total { margin:0; color:var(--counter-muted); font-size:.76rem; text-align:center; }.counter-types-total strong { color:var(--counter-text); }
.counter-status { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:16px; padding:16px 20px; border-radius:8px; color:var(--counter-muted); font-size:.78rem; }
.counter-status span { display:flex; align-items:center; gap:10px; }.counter-status i { color:var(--counter-accent); font-size:1rem; }
@media (max-width:1250px){.counter-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.counter-analysis{grid-template-columns:repeat(2,minmax(0,1fr))}.counter-panel--chart{grid-column:1/-1}}
@media (max-width:820px){.counter-live-grid,.counter-analysis{grid-template-columns:1fr}.counter-panel--chart{grid-column:auto}.counter-status{align-items:flex-start;flex-direction:column}.counter-panel{min-height:0}}
@media (max-width:620px){.nx-counter{padding:1rem .75rem}.counter-kpis{grid-template-columns:1fr}.counter-live-grid{grid-template-columns:1fr}.counter-live{grid-template-columns:auto 1fr}.counter-live__meter,.counter-live__spark{grid-column:1/-1;width:100%}.counter-type-content{grid-template-columns:1fr;justify-items:center}.counter-legend{width:100%}.counter-heading{align-items:flex-start}.counter-heading h1{font-size:1.65rem}.counter-line-chart{height:235px}}
@media (max-width:620px){.nx-counter{padding:0}.nx-counter>.card-body{padding:1rem .75rem}}