.chip { display: inline-flex; align-items: center; gap: var(--sp-1-5); height: var(--control-h-sm); padding: 0 var(--sp-3-25); border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: var(--text-chip); font-weight: var(--w-medium); white-space: nowrap; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.chip:hover { background: var(--surface-hover); }
.chip.is-active { background: var(--primary); border-color: var(--primary); color: var(--on-accent); }
.chip .icon { width: var(--size-14); height: var(--size-14); }
.chip__count { color: var(--text-3); font-variant-numeric: tabular-nums; }
.chip.is-active .chip__count { color: var(--on-accent-muted); }
.chip-row { display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; }
.chip-row::-webkit-scrollbar { display: none; }
.chip-row--wrap { flex-wrap: wrap; overflow: visible; }