.chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--text); background: var(--hair); border: 1px solid var(--line); }
.chip i { font-size: 11px; color: var(--sky); }
.status { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.status.plan::before { background: var(--warn); }
.status.ext::before { background: var(--sky); }
.kind-tile { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; flex: none; font-size: 18px; color: var(--kc); background: color-mix(in srgb, var(--kc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--kc) 32%, transparent); }
.kc-feature { --kc: var(--sky); }
.kc-addon { --kc: var(--mint); }
.kc-integration { --kc: var(--int); }
.kc-branch { --kc: var(--teal); }
.kc-pack { --kc: var(--amber); }
.kc-core { --kc: var(--sky); }