@layer components {
  .badge {
    display: inline-flex; align-items: center; gap: var(--s-1); min-height: 24px; padding: 0 var(--s-2);
    font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .06em; line-height: 1;
    border: 1px solid var(--line-strong); border-radius: var(--r-xs); color: var(--muted); white-space: nowrap;
  }
  .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
  .badge-plain::before { display: none; }
  .badge-cyan { color: var(--cyan-ink); border-color: color-mix(in oklab, var(--cyan-ink) 45%, transparent); }
  .badge-amber { color: var(--amber); border-color: color-mix(in oklab, var(--amber) 45%, transparent); font-size: var(--t-sm); }
  .badge-ok { color: var(--ok); border-color: color-mix(in oklab, var(--ok) 45%, transparent); }
  .badge-eol { color: var(--muted); border-style: dashed; }
  html[data-surface="paper"] .badge-ok { color: #1E8E4E; border-color: rgb(30 142 78 / .45); }
  html[data-surface="paper"] .badge-amber { color: #9A5B00; border-color: rgb(154 91 0 / .45); }

  /* 描边徽章（国产化声明用），稍大 */
  .stamp {
    display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
    border: 1.5px solid var(--cyan-ink); color: var(--cyan-ink); position: relative; flex: none;
  }
  .stamp::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 1px dashed color-mix(in oklab, var(--cyan-ink) 50%, transparent); }
  .stamp .icon { width: 26px; height: 26px; }

  .kicker { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }
}