.icon-picker-grid { display: grid; gap: var(--space-2); grid-template-columns: repeat(6, 1fr); padding: var(--space-2); }
.picker { display: flex; flex-direction: column; gap: var(--space-2); max-height: 60vh; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: var(--space-2); }
.picker:has(.icon-picker-grid) { max-height: none; overflow: visible; padding: 0; }
.picker__back { align-items: center; background: var(--surface-alt); border: none; border-radius: var(--radius); color: var(--text-muted); cursor: pointer; display: flex; height: var(--size-lg); justify-content: center; transition: var(--transition-interactive), transform 0.2s ease; width: var(--size-lg); }
.picker__back:hover { background: var(--surface); color: var(--text); }
.picker__divider { align-items: center; color: var(--text-muted); display: flex; font-size: var(--font-size-micro); font-weight: var(--font-semibold); gap: var(--space-2); letter-spacing: 0.05em; margin: var(--space-1) 0; padding: 0 var(--space-2); text-transform: uppercase; }
.picker__divider::after { background: var(--border); content: ""; flex: 1; height: 1px; }
.picker__empty { gap: var(--space-2); padding: var(--space-4); } /* extends .empty-state */
.picker__empty-icon { color: var(--text-muted); opacity: 0.4; }
.picker__empty-text { font-size: var(--text-sm); }
.picker__header { align-items: center; display: flex; gap: var(--space-2); padding: var(--space-2) var(--space-1); }
.picker__subtitle { color: var(--text-muted); font-size: var(--text-xs); }
.picker__title { color: var(--text); font-size: var(--text-sm); font-weight: var(--font-semibold); }
.picker-item { align-items: center; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; display: flex; gap: var(--space-2); min-height: var(--size-2xl); padding: var(--space-2); transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease; width: 100%; }
.picker-item:active { transform: translateY(0); }
.picker-item:hover { background: var(--surface); border-color: var(--accent); transform: translateY(-1px); }
.picker-item:hover .picker-item__chevron { color: var(--accent); opacity: 1; transform: translateX(2px); }
.picker-item:hover .picker-item__icon { color: var(--accent); }
.picker-item:hover .picker-item__icon--category { background: color-mix(in srgb, var(--cat-color, var(--accent)) 18%, transparent); border-color: var(--cat-color, var(--accent)); }
.picker-item__check { align-items: center; background: var(--success); border-radius: 50%; color: var(--bg); display: flex; flex-shrink: 0; height: var(--size-xs); justify-content: center; width: var(--size-xs); }
.picker-item__chevron { color: var(--text-muted); flex-shrink: 0; opacity: 0.5; transition: color 0.2s ease, opacity 0.2s ease, transform 0.2s ease; }
.picker-item__content { display: flex; flex: 1; flex-direction: column; gap: 0; min-width: 0; text-align: left; }
.picker-item__icon { align-items: center; background: var(--surface); border-radius: var(--radius); color: var(--text-muted); display: flex; flex-shrink: 0; height: var(--size-btn); justify-content: center; transition: var(--transition-interactive); width: var(--size-btn); }
.picker-item__icon--category { background: color-mix(in srgb, var(--cat-color, var(--accent)) 12%, transparent); border: 1.5px solid color-mix(in srgb, var(--cat-color, var(--accent)) 25%, transparent); color: var(--cat-color, var(--accent)); }
.picker-item__action { align-items: center; display: flex; flex-shrink: 0; justify-content: center; width: var(--size-sm); }
.picker-item__count { color: var(--text-muted); flex-shrink: 0; font-family: var(--font-num), sans-serif; font-size: var(--text-sm); font-variant-numeric: tabular-nums; font-weight: var(--font-medium); text-align: right; }
.picker-item__meta { color: var(--text-muted); font-size: var(--text-xs); }
.picker-item__name { color: var(--text); font-size: var(--text-sm); font-weight: var(--font-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-item__value { align-items: flex-end; display: flex; flex-direction: column; flex-shrink: 0; gap: 0; }
.picker-item--all { border-style: dashed; }
.picker-item--all .picker-item__name { font-weight: var(--font-medium); }
.picker-item--disabled { cursor: not-allowed; opacity: 0.4; }
.picker-item--disabled:hover { background: var(--surface-alt); border-color: var(--border); transform: none; }
.picker-item--icon { aspect-ratio: 1; background: transparent; border: 1px solid var(--border); flex-direction: column; gap: 0; justify-content: center; max-width: var(--size-2xl); min-height: 0; padding: var(--space-3); position: relative; }
.picker-item--icon .icon-md { height: var(--size-sm); width: var(--size-sm); }
.picker-item--icon .picker-item__check { height: var(--size-2xs); position: absolute; right: 2px; top: 2px; width: var(--size-2xs); }
.picker-item--icon .picker-item__icon { background: transparent; height: auto; width: auto; }
.picker-item--icon:hover { background: var(--surface-alt); }
.picker-item--icon.picker-item--selected { background: rgba(var(--accent-rgb), 0.15); border-color: var(--accent); }
.picker-item--selected { background: rgba(var(--accent-rgb), 0.08); border-color: var(--accent); }
.picker-item--selected .picker-item__icon { background: rgba(var(--accent-rgb), 0.15); color: var(--accent); }
.picker-item--sub { background: var(--bg); border-color: transparent; }
.picker-item--sub:hover { background: var(--surface-alt); border-color: var(--border); }
.picker-item--sub.picker-item--selected { background: rgba(var(--accent-rgb), 0.06); border-color: var(--accent); }