@layer blocks {
  /* ── Card ────────────────────────────────────────── */

  .stats-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
    transition:
      transform var(--duration-normal) var(--ease-out-expo),
      box-shadow var(--duration-normal) var(--ease-out-expo),
      border-color var(--duration-normal) ease;
  }

  .stats-card::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 2px;
    background: var(--gradient-accent);
  }

  .stats-card-label {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .stats-card-value {
    margin: 0;
    font-family: var(--font-mono);
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 700;
    line-height: 1;
    color: var(--color-text);
    min-block-size: 2.25rem;
  }

  .stats-card-detail {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
  }

  /* ── Uptime health states ────────────────────────── */

  .stats-card[data-health='good'] .stats-card-value {
    color: var(--color-success);
  }

  .stats-card[data-health='warning'] .stats-card-value {
    color: var(--color-accent);
  }

  .stats-card[data-health='bad'] .stats-card-value {
    color: var(--color-error);
  }

  /* ── Skeleton loading ────────────────────────────── */

  .stats-card-skeleton {
    display: block;
    block-size: 2.25rem;
    inline-size: 5rem;
    border-radius: var(--radius-sm);
    background: linear-gradient(
      90deg,
      var(--color-surface-raised) 25%,
      var(--color-border) 50%,
      var(--color-surface-raised) 75%
    );
    background-size: 200% 100%;
    animation: stats-shimmer 1.5s ease-in-out infinite;
  }

  @keyframes stats-shimmer {
    from {
      background-position: 200% 0;
    }

    to {
      background-position: -200% 0;
    }
  }

  /* ── Live status indicator ───────────────────────── */

  .stats-status {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-block-start: var(--space-lg);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
  }

  .stats-status-dot {
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: var(--color-text-muted);
    flex-shrink: 0;
  }

  .stats-status[data-state='connected'] .stats-status-dot {
    background: var(--color-success);
    animation: stats-pulse 2s ease-in-out infinite;
  }

  .stats-status[data-state='disconnected'] .stats-status-dot {
    background: var(--color-text-muted);
    animation: none;
  }

  @keyframes stats-pulse {
    0%,
    100% {
      opacity: 1;
    }

    50% {
      opacity: 0.4;
    }
  }

  .stats-status-since::before {
    content: '\00b7';
    margin-inline-end: var(--space-sm);
  }

  .stats-status-since:empty::before {
    content: none;
  }

  /* ── Hover ───────────────────────────────────────── */

  @media (prefers-reduced-motion: no-preference) {
    .stats-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 30px var(--color-glow);
      border-color: var(--color-accent);
    }
  }

  /* ── Mobile ──────────────────────────────────────── */

  @media (width <= 480px) {
    .stats-card {
      padding: var(--space-md);
    }
  }
}