/* GhostStat Live Online — scoped under .gs-live. Green accent to match the app/VI module. */
.gs-live{
  --l-accent:#1FA463; --l-accent-2:#178A52; --l-accent-soft:#E7F5EC;
  --l-ink:#1A1D24; --l-ink-2:#3C4350; --l-muted:#8C95A1; --l-muted-2:#AAB2BD;
  --l-line:#E9EDF3; --l-line-2:#DFE4EB; --l-r-lg:16px; --l-sh-1:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.05);
  color:var(--l-ink);
}
.gs-live .num{font-variant-numeric:tabular-nums}
.gs-live .head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.gs-live .crumb{font-size:12.5px;color:var(--l-muted);display:flex;align-items:center;gap:7px;margin-bottom:3px}
.gs-live h1{margin:0;font-size:22px;font-weight:800;letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
.gs-live .head-actions{display:flex;align-items:center;gap:8px}
.gs-live .btn.text{background:none;border:1px solid transparent;color:var(--l-ink-2);height:32px;border-radius:6px;padding:0 12px;font-weight:600;font-size:13px;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.gs-live .btn.text:hover{color:var(--l-accent)}
.gs-live .mb-pill{position:relative;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:1px solid var(--l-line-2);border-radius:6px;background:#fff;font-size:12.5px;font-weight:600;color:var(--l-ink-2);cursor:pointer;white-space:nowrap}
.gs-live .mb-pill .car{font-size:11px;color:var(--l-muted-2)}
.gs-live .menu{position:absolute;top:36px;left:0;min-width:130px;background:#fff;border:1px solid var(--l-line);border-radius:10px;box-shadow:0 10px 30px rgba(16,24,40,.14);padding:6px;z-index:40;display:none}
.gs-live .menu.open{display:block}
.gs-live .menu .mi{padding:8px 10px;border-radius:7px;font-size:13px;font-weight:600;color:var(--l-ink-2);cursor:pointer}
.gs-live .menu .mi:hover{background:#F5F7FA}
.gs-live .menu .mi.sel{color:var(--l-accent);background:var(--l-accent-soft)}

/* live pulse dot */
.gs-live .live-dot{width:11px;height:11px;border-radius:50%;background:var(--l-accent);box-shadow:0 0 0 0 rgba(31,164,99,.5);animation:lpulse 1.8s infinite}
.gs-live .live-dot.paused{background:var(--l-muted-2);animation:none}
@keyframes lpulse{0%{box-shadow:0 0 0 0 rgba(31,164,99,.45)}70%{box-shadow:0 0 0 9px rgba(31,164,99,0)}100%{box-shadow:0 0 0 0 rgba(31,164,99,0)}}

/* counters */
.gs-live .l-counters{display:grid;grid-template-columns:1.2fr 1fr 1fr 2fr;gap:14px;margin-bottom:14px}
.gs-live .lc{background:#fff;border:1px solid var(--l-line);border-radius:12px;box-shadow:var(--l-sh-1);padding:14px 16px}
.gs-live .lc .l{font-size:11px;color:var(--l-muted);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.gs-live .lc .v{font-size:30px;font-weight:800;letter-spacing:-.02em;margin-top:2px}
.gs-live .lc .hint{font-size:11px;color:var(--l-muted-2);font-weight:600;margin-top:1px}
.gs-live .lc-hero .v{color:var(--l-accent)}
.gs-live .lc-spark{display:flex;flex-direction:column}
.gs-live .spark{flex:1;display:flex;align-items:flex-end;gap:2px;margin-top:10px;min-height:46px}
.gs-live .spark i{flex:1;background:var(--l-accent-soft);border-radius:2px 2px 0 0;min-height:2px;transition:height .3s}
.gs-live .spark i.hot{background:var(--l-accent)}
@media(max-width:900px){.gs-live .l-counters{grid-template-columns:1fr 1fr}.gs-live .lc-spark{grid-column:1/-1}}

/* grid */
.gs-live .l-grid{display:grid;grid-template-columns:1fr 340px;gap:14px}
@media(max-width:900px){.gs-live .l-grid{grid-template-columns:1fr}}
.gs-live .chartcard{background:#fff;border:1px solid var(--l-line);border-radius:var(--l-r-lg);box-shadow:var(--l-sh-1);overflow:hidden;margin-bottom:14px}
.gs-live .cc-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--l-line)}
.gs-live .cc-head h5{margin:0;font-size:13px}
.gs-live .vt-scroll{overflow-x:auto}

/* active visitors table */
.gs-live table.lt{width:100%;border-collapse:collapse;font-size:12px}
.gs-live table.lt th{font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--l-muted);text-align:left;padding:9px 14px;border-bottom:1px solid var(--l-line);white-space:nowrap;font-weight:700}
.gs-live table.lt td{padding:9px 14px;border-bottom:1px solid var(--l-line);white-space:nowrap;color:var(--l-ink-2)}
.gs-live table.lt td.page{font-weight:600;color:var(--l-ink);max-width:230px;overflow:hidden;text-overflow:ellipsis}
.gs-live table.lt tr:last-child td{border-bottom:0}
.gs-live .state{display:inline-flex;align-items:center;gap:5px;font-weight:700;font-size:11px}
.gs-live .state i{width:7px;height:7px;border-radius:50%}
.gs-live .state.active{color:var(--l-accent-2)}.gs-live .state.active i{background:var(--l-accent)}
.gs-live .state.idle{color:var(--l-muted)}.gs-live .state.idle i{background:var(--l-muted-2)}

/* feed */
.gs-live .feed{max-height:280px;overflow-y:auto}
.gs-live .frow{display:flex;align-items:center;gap:10px;padding:9px 16px;border-bottom:1px solid var(--l-line);font-size:12px}
.gs-live .frow:last-child{border-bottom:0}
.gs-live .fdot{width:7px;height:7px;border-radius:50%;flex:none}
.gs-live .fdot.pv{background:#2A6FE8}.gs-live .fdot.ev{background:var(--l-accent)}
.gs-live .flabel{flex:1;font-weight:600;color:var(--l-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs-live .fmeta{color:var(--l-muted);font-size:11px;flex:none}
.gs-live .fnew{animation:fin .5s ease}
@keyframes fin{from{background:var(--l-accent-soft)}to{background:transparent}}

/* breakdowns */
.gs-live .brk{padding:12px 16px;border-bottom:1px solid var(--l-line)}
.gs-live .brk:last-child{border-bottom:0}
.gs-live .brk-t{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--l-muted);font-weight:700;margin-bottom:8px}
.gs-live .bbar{display:flex;align-items:center;gap:10px;margin-bottom:7px;font-size:12px}
.gs-live .bbar .lbl{width:92px;color:var(--l-ink-2);font-weight:600;text-transform:capitalize;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs-live .bbar .trk{flex:1;height:8px;background:#EEF2F7;border-radius:5px;overflow:hidden}
.gs-live .bbar .trk i{display:block;height:100%;background:var(--l-accent);border-radius:5px;transition:width .3s}
.gs-live .bbar .n{width:34px;text-align:right;font-weight:700;color:var(--l-ink)}

.gs-live .l-empty{padding:26px;text-align:center;color:var(--l-muted);font-size:13px}
.gs-live .v-banner{border-radius:12px;padding:12px 15px;margin-top:14px;font-size:13px;background:#FFF6E6;border:1px solid #FFE2A8;color:#7A5A12}


/* Row -> profile. This page exists to answer "who is that?", so the door is on every row. */
.gs-live .l-act{width:34px;text-align:center}
.gs-live .l-open{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:6px;color:#6B7280;text-decoration:none;transition:background .12s,color .12s}
.gs-live .l-open:hover{background:#E7F0FE;color:#1F5FD0}
.gs-live tbody tr:hover .l-open{color:#1F5FD0}
.gs-live .l-geo{color:inherit;text-decoration:none;border-bottom:1px dotted transparent}
.gs-live .l-geo:hover{color:#1F5FD0;border-bottom-color:currentColor}