.card-icon-field { position: relative; }
.card-icon-picker-toggle { margin-top: 9px; min-height: 38px; width: max-content; }
.card-icon-picker { margin-top: 10px; padding: 14px; border: 1px solid #cfe0e7; border-radius: 16px; background: #f7fbfc; box-shadow: 0 14px 34px rgba(18,57,75,.12); }
.card-icon-picker[hidden] { display: none; }
.card-icon-picker>div:first-child { display: grid; gap: 2px; margin-bottom: 12px; }
.card-icon-picker>div:first-child small { color: #6f8793; line-height: 1.35; }
.card-icon-grid [data-card-image] img { width: 34px; height: 34px; object-fit: contain; border-radius: 8px; background: #fff; }
.card-icon-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; max-height: 280px; overflow: auto; padding: 2px; }
.card-icon-grid button { min-width: 0; border: 1px solid #d6e4ea; border-radius: 12px; background: #fff; color: #244454; padding: 9px 5px; display: grid; place-items: center; gap: 4px; cursor: pointer; }
.card-icon-grid button:hover,.card-icon-grid button:focus-visible,.card-icon-grid button.selected { border-color: #1682a3; background: #eaf7fb; box-shadow: 0 0 0 2px rgba(22,130,163,.12); }
.card-icon-grid button span { font-size: 1.45rem; line-height: 1; }
.card-icon-grid button small { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .67rem; }
@media(max-width:700px){.card-icon-grid{grid-template-columns:repeat(4,minmax(0,1fr));}}