/* Homepage live stats bar under the hero button. Behaviour: scripts/live-stats.js */
.lvs {
  --ok: 96, 208, 150; --warn: 245, 180, 84;
  --acc: var(--cl-accent-rgb, 163, 191, 240);
  position: relative; isolation: isolate;
  display: inline-flex; flex-wrap: wrap; align-items: stretch; justify-content: center;
  max-width: min(100%, 900px); margin: clamp(26px, 3vw, 38px) auto 0; padding: 8px;
  border-radius: 22px; border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 30px 60px -36px rgba(var(--acc), 0.7);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.lvs::before { content: ""; position: absolute; top: 0; left: 18%; right: 18%; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--acc), 0.9), transparent); }
.lvs.is-first { animation: lvs-in 1s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both; }
.lvs.is-first .lvs-stat { animation: lvs-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(0.6s + var(--k, 0) * 100ms); }
@keyframes lvs-in { from { opacity: 0; transform: translateY(12px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }

.lvs-live {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px;
  border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgb(var(--ok)); background: #121314; border: 1px solid rgba(var(--ok), 0.35);
  --tone: var(--ok);
}
.lvs-stat {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 12px 20px; border-radius: 16px; color: #fff; text-decoration: none; text-align: left;
  transition: background-color 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.lvs-stat + .lvs-stat::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: rgba(255, 255, 255, 0.08); }
a.lvs-stat:hover { color: #fff; background: rgba(255, 255, 255, 0.05); transform: translateY(-2px); }
.lvs-stat__ic { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 12px; color: rgb(var(--acc)); background: rgba(var(--acc), 0.1); border: 1px solid rgba(var(--acc), 0.22); transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
a.lvs-stat:hover .lvs-stat__ic { transform: rotate(-8deg) scale(1.08); }
.lvs-stat__ic svg { width: 18px; height: 18px; }
.lvs-stat__txt { display: flex; flex-direction: column; line-height: 1.1; }
.lvs-stat__txt b { font-family: "Clash Display", var(--font-body, sans-serif); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lvs-stat__txt b em { font-style: normal; }
.lvs-stat__txt b i { font-style: normal; font-size: 0.62em; font-weight: 600; color: rgba(255, 255, 255, 0.5); }
.lvs-stat__txt small { margin-top: 4px; font-size: 12px; font-weight: 500; color: #8f919d; white-space: nowrap; }
.lvs-stat--status { --tone: var(--ok); }
.lvs-stat--status[data-tone="warn"] { --tone: var(--warn); }
.lvs-stat--status .lvs-stat__ic { color: rgb(var(--tone)); background: rgba(var(--tone), 0.1); border-color: rgba(var(--tone), 0.3); box-shadow: 0 0 18px -4px rgba(var(--tone), 0.6); }
.lvs-stat--status b em { color: rgb(var(--tone)); text-shadow: 0 0 18px rgba(var(--tone), 0.45); }
.lvs-dot { position: relative; width: 7px; height: 7px; flex: none; border-radius: 50%; background: rgb(var(--tone)); box-shadow: 0 0 10px rgba(var(--tone), 0.8); }
.lvs-dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgb(var(--tone)); animation: lvs-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite; }
@keyframes lvs-ping { 75%, 100% { transform: scale(2.6); opacity: 0; } }

@media (max-width: 760px) {
  .lvs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .lvs-stat { padding: 10px 12px; gap: 10px; }
  .lvs-stat + .lvs-stat::before { display: none; }
  .lvs-stat__ic { width: 32px; height: 32px; border-radius: 10px; }
  .lvs-stat__txt b { font-size: 18px; }
  .lvs-stat__txt small { font-size: 11px; white-space: normal; }
}