.utilio-icon{width:32px;height:32px;display:block;flex:none;overflow:visible}
.tool-icon{--icon-surface:#edf3ff;--icon-ink:#4775cb;background:var(--icon-surface);color:var(--icon-ink);border:1px solid color-mix(in srgb,var(--icon-ink) 12%,transparent);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:inset 0 1px 0 #ffffffb3;transition:transform .18s ease,box-shadow .18s ease}
.tool-icon.blue{--icon-surface:#edf3ff;--icon-ink:#4673c5}.tool-icon.teal{--icon-surface:#e9f6f3;--icon-ink:#268475}.tool-icon.purple{--icon-surface:#f0edfc;--icon-ink:#7a5ac2}.tool-icon.orange{--icon-surface:#fff2e5;--icon-ink:#b86e28}.tool-icon.green{--icon-surface:#eef5e6;--icon-ink:#658933}
.icon-badge-bg{fill:var(--icon-surface,#fff)}
.tool-card:hover .tool-icon{transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff,0 4px 9px #22213c09}
.tool-card:focus-visible{outline:2px solid var(--primary);outline-offset:4px}
.tool-links a>span{display:inline-flex;width:23px;flex:none;align-items:center;justify-content:center}.tool-links .utilio-icon{width:22px;height:22px}.tool-links a.active{--icon-surface:#eeedff}
.category-icon .utilio-icon{width:21px;height:21px}.category-cover-icon .utilio-icon{width:36px;height:36px}
@media(max-width:480px){.tool-icon .utilio-icon{width:27px;height:27px}}
@media(prefers-reduced-motion:reduce){.tool-icon{transition:none}.tool-card:hover .tool-icon{transform:none}}

.upload-art>span{display:flex;align-items:center;justify-content:center;--icon-surface:#ececff}.upload-art .utilio-icon{width:38px;height:38px}

/* Home recommendations retain the original theme gradients and per-tool palette. */
.home-tools .tool-icon{color:#fff;border:0;box-shadow:none}
.home-tools .tool-icon.blue{background:linear-gradient(130deg,#5796ff,#297aff);--icon-surface:#297aff}
.home-tools .tool-icon.teal{background:linear-gradient(130deg,#23d9c7,#0cc3b7);--icon-surface:#0cc3b7}
.home-tools .tool-icon.purple{background:linear-gradient(130deg,#8773ff,#6044ff);--icon-surface:#6044ff}
.home-tools .tool-icon.orange{background:linear-gradient(130deg,#ff9a24,#ff6409);--icon-surface:#ff6409}
.home-tools .tool-icon.green{background:linear-gradient(130deg,#0ed689,#00b96a);--icon-surface:#00b96a}
.home-tools .tool-card:hover .tool-icon{box-shadow:none}