<style>
    .category-icon-preview {
        width: 48px;
        height: 48px;
        display: grid;
        place-items: center;
        border: 1px solid var(--admin-border);
        border-radius: 8px;
        background: #eff6ff;
        color: var(--admin-primary);
        font-size: 22px;
    }

    .icon-picker-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
        gap: 10px;
        max-height: 420px;
        overflow-y: auto;
        padding-right: 4px;
    }

    .icon-picker-option {
        min-height: 76px;
        border: 1px solid var(--admin-border);
        border-radius: 8px;
        background: #ffffff;
        color: var(--admin-text);
    }

    .icon-picker-option:hover,
    .icon-picker-option.is-selected {
        border-color: var(--admin-primary);
        background: #eff6ff;
        color: var(--admin-primary);
    }

    .icon-picker-option i {
        font-size: 22px;
    }

    .icon-picker-option span {
        max-width: 100%;
        font-size: 11px;
    }
</style>
