@layer components {
  .badge {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 26px; padding: 3px 10px; border-radius: var(--r-full);
    background: color-mix(in srgb, var(--c, var(--c-gray)) 14%, transparent);
    color: var(--c-ink, var(--c-gray-ink));
    font-size: var(--fs-xs); font-weight: var(--fw-bold); line-height: 1.2;
  }
  .badge::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--c, var(--c-gray)); }

  /* Шилдик тарифа (макрос plan_badge): один вид для «Про», «Бизнес», «Базового» */
  .plan-badge {
    display: inline-flex; align-items: center; gap: 4px;
    min-height: 28px; padding: 4px 11px; border-radius: var(--r-full);
    background: var(--brand-soft); color: var(--brand);
    font-size: var(--fs-xs); font-weight: var(--fw-bold); line-height: 1.2;
    white-space: nowrap;
  }
  .plan-badge[data-plan="business"] {
    background: color-mix(in srgb, var(--c-purple) 14%, transparent);
    color: var(--c-purple-ink);
  }
  .plan-badge[data-plan="basic"] {
    background: color-mix(in srgb, var(--c-gray) 14%, transparent);
    color: var(--c-gray-ink);
  }

  .count-badge {
    position: absolute; top: -3px; right: -3px;
    min-width: 20px; height: 20px; padding: 0 5px;
    display: grid; place-items: center;
    border-radius: var(--r-full); background: var(--danger); color: #fff;
    font-size: var(--fs-2xs); font-weight: var(--fw-heavy);
    box-shadow: 0 0 0 2px var(--brand-deep);
    pointer-events: none;
  }
}