.navigation-icon-field{display:grid;gap:4px}.navigation-icon-field>span{font-size:11px;font-weight:800;color:#53677d;text-transform:uppercase;letter-spacing:.04em}.navigation-icon-select{width:68px;min-height:40px;padding:4px 5px;display:grid;grid-template-columns:24px minmax(0,1fr);align-items:center;gap:4px;border:1px solid #afc3d9;border-radius:9px;color:#24548e;background:linear-gradient(180deg,#fff,#f4f8fc)}.navigation-icon-select>span{width:24px;height:24px;display:grid;place-items:center;border-radius:6px;background:#e8f1fb}.navigation-icon-select>small{font-size:8px;font-weight:800;color:#60758b}.navigation-icon-select:hover:not(:disabled){border-color:#4481c5;background:#edf5ff}.navigation-icon-select .vbz-navigation-icon{width:18px;height:18px}.navigation-icon-dialog{width:min(940px,calc(100vw - 32px));max-height:min(820px,calc(100vh - 32px));padding:0;border:0;border-radius:18px;color:var(--ink);background:#fff;box-shadow:0 28px 80px rgba(10,31,57,.35)}.navigation-icon-dialog::backdrop{background:rgba(14,30,49,.56);backdrop-filter:blur(3px)}.navigation-icon-picker{max-height:min(820px,calc(100vh - 32px));display:grid;grid-template-rows:auto auto auto minmax(220px,1fr) auto;overflow:hidden}.navigation-icon-picker>header{padding:18px 20px;display:flex;align-items:flex-start;justify-content:space-between;gap:18px;border-bottom:1px solid #dbe4ee;background:linear-gradient(135deg,#fff,#edf5ff)}.navigation-icon-picker h2{margin:4px 0;font-size:20px}.navigation-icon-picker p{margin:0;color:#5d7085}.navigation-icon-picker-tools{padding:14px 18px 8px;display:grid;gap:10px}.navigation-icon-picker-tools>label{display:grid;gap:5px}.navigation-icon-picker-tools>label>span{font-size:10px;font-weight:850;letter-spacing:.05em;text-transform:uppercase;color:#50677e}.navigation-icon-picker-tools input{width:100%;min-height:42px;padding:9px 12px;border:1px solid #b8cadc;border-radius:10px}.navigation-icon-categories{display:flex;gap:6px;overflow-x:auto;padding:2px 0 5px}.navigation-icon-category{min-height:32px;padding:6px 10px;border:1px solid #c7d5e4;border-radius:999px;color:#52677e;background:#fff;font-size:10px;font-weight:800;white-space:nowrap}.navigation-icon-category:hover{border-color:#6e9bc9;background:#f0f6fd}.navigation-icon-category.active{color:#fff;border-color:#24549d;background:#285db0}.navigation-icon-results-meta{padding:0 18px 8px;color:#65788c;font-size:11px;font-weight:700}.navigation-icon-grid{padding:4px 18px 18px;display:grid;grid-template-columns:repeat(6,minmax(94px,1fr));gap:8px;overflow:auto}.navigation-icon-option{min-height:84px;padding:10px 7px;display:grid;place-items:center;align-content:center;gap:7px;border:1px solid #d1dce8;border-radius:11px;color:#345571;background:#fff;text-align:center}.navigation-icon-option>span{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;color:#2856ad;background:#edf4fd}.navigation-icon-option .vbz-navigation-icon{width:22px;height:22px}.navigation-icon-option strong{font-size:10px;line-height:1.25}.navigation-icon-option:hover,.navigation-icon-option.selected{border-color:#3e75b7;background:#f0f6fd;box-shadow:0 4px 12px rgba(31,74,120,.1)}.navigation-icon-option.selected{box-shadow:inset 0 0 0 2px #2856ad}.navigation-icon-empty{grid-column:1/-1;padding:28px;border:1px dashed #b8c9da;border-radius:12px;color:#64788d;text-align:center}.navigation-icon-picker>footer{padding:12px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #dbe4ee;background:#f7f9fc}.navigation-icon-picker>footer span{font-size:10px;color:#677a8e}
@media(max-width:900px){.navigation-icon-grid{grid-template-columns:repeat(4,minmax(88px,1fr))}}
@media(max-width:600px){.navigation-icon-dialog{width:calc(100vw - 12px);max-height:calc(100vh - 12px)}.navigation-icon-picker{max-height:calc(100vh - 12px)}.navigation-icon-grid{grid-template-columns:repeat(3,minmax(76px,1fr));padding-inline:10px}.navigation-icon-picker-tools,.navigation-icon-picker>header,.navigation-icon-picker>footer{padding-inline:12px}.navigation-icon-picker>footer{align-items:stretch;flex-direction:column}.navigation-icon-picker>footer .button{width:100%}}