/* DAIZ-Metrics – Zähler in der Fussleiste.
   Farben kommen aus dem Theme (--dp-*), die Fallbacks gelten nur, falls das
   Plugin einmal woanders läuft. */

.daiz-metrics {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 14px;
  margin-left: 10px; font-size: 13px; color: var(--dp-muted, #9aa0a6);
}
.daiz-metrics__item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.daiz-metrics__item b { font-weight: 600; color: var(--dp-fg, #fff); font-variant-numeric: tabular-nums; }

.daiz-metrics__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--dp-primary, #18988B);
  box-shadow: 0 0 0 0 rgba(24, 152, 139, .6);
  animation: daiz-metrics-puls 2.4s ease-out infinite;
}
@keyframes daiz-metrics-puls {
  0%   { box-shadow: 0 0 0 0 rgba(24, 152, 139, .6); }
  70%  { box-shadow: 0 0 0 6px rgba(24, 152, 139, 0); }
  100% { box-shadow: 0 0 0 0 rgba(24, 152, 139, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .daiz-metrics__dot { animation: none; }
}

/* Auf dem Handy steht der Zähler auf einer eigenen Zeile, sonst quetscht er
   sich neben die Versionsnummer. */
@media (max-width: 640px) {
  .daiz-metrics { display: flex; margin-left: 0; margin-top: 8px; gap: 4px 12px; }
}