@font-face{font-family:'classy';src:url('https://vkfonts.storage.googleapis.com/classy.woff2') format('woff2');font-weight:normal;font-style:normal}
*{box-sizing:border-box}html,body{margin:0;background:#f5f6f8;color:#17181a;font-family:classy,system-ui,sans-serif}.top{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.95);backdrop-filter:blur(16px);border-bottom:1px solid #e1e3e6;padding:13px 20px;display:flex;align-items:center;gap:12px}.brand{font-size:22px;font-weight:700;margin-right:5px}.search-wrap{display:flex;gap:7px;flex:1;max-width:900px}.search-wrap input,.search-wrap select,.top button,.selection-bar button{height:38px;border:1px solid #d8dbe0;border-radius:9px;background:white;padding:0 11px;font:inherit;font-size:12px}.search-wrap input{flex:1}.top button,.selection-bar button{cursor:pointer;font-weight:600}.top button.active{background:#17181a;color:white}.count{font-size:11px;color:#777;white-space:nowrap}.selection-bar{position:sticky;top:65px;z-index:9;display:flex;align-items:center;gap:8px;padding:9px 20px;background:#fff;border-bottom:1px solid #e1e3e6}.selection-bar button{cursor:pointer}.hidden{display:none!important}.chips{display:flex;gap:8px;flex-wrap:wrap;padding:18px 20px 4px}.chips button{border:1px solid #dddfe3;background:#fff;border-radius:999px;padding:7px 11px;font:inherit;font-size:11px;cursor:pointer}.chips button.active{background:#17181a;color:#fff}#grid{padding:17px 20px 30px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:11px}.card{position:relative;background:#fff;border:1px solid #e0e2e5;border-radius:12px;min-height:165px;padding:17px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px}.card:hover{border-color:#aaa;transform:translateY(-1px)}.card.selected{border-color:#17181a;box-shadow:0 0 0 2px #17181a}.card delluna-icon{font-size:56px}.name{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.check{position:absolute;top:9px;left:9px;width:17px;height:17px;accent-color:#17181a}.card-actions{position:absolute;right:7px;top:7px;display:flex;gap:4px}.mini{border:1px solid #ddd;background:#fff;border-radius:7px;width:27px;height:27px;font:inherit;cursor:pointer}.detail{padding:38px}.close{position:absolute;right:10px;top:8px;border:0;background:none;font-size:25px;cursor:pointer}.detail-icon{text-align:center;font-size:130px;padding:18px}.detail h2{margin:5px 0 18px}.meta{display:grid;grid-template-columns:90px 1fr;gap:8px;font-size:12px;margin-bottom:18px}.meta b{color:#777}.detail-actions{display:flex;gap:7px;flex-wrap:wrap}.detail-actions button{height:36px;border:1px solid #ddd;background:#fff;border-radius:8px;padding:0 11px;font:inherit;cursor:pointer}.detail-actions .primary{background:#17181a;color:#fff;border-color:#17181a}@media(max-width:750px){.top{flex-wrap:wrap}.brand{width:auto}.search-wrap{order:5;min-width:100%}.selection-bar{top:108px;overflow:auto}.count{margin-left:auto}#grid{grid-template-columns:repeat(auto-fill,minmax(125px,1fr));padding:12px}.chips{padding:12px}}

/* === DELLUNA ICON SIZING FIXES ===
   Add these rules to your existing stylesheet.
   They give <delluna-icon> a guaranteed rendering box so icons
   never collapse to 0×0 regardless of how delluna.js renders internally.
*/

/* Sized wrapper injected by front.js around every <delluna-icon> in the grid */
.icon-wrap {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
}

/* The custom element itself — fills the wrapper */
delluna-icon {
  display: block;
  width: 100%;
  height: 100%;
}

/* If delluna.js injects an inline <svg>, make it fill the element */
delluna-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* If delluna.js uses an <img> internally */
delluna-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Detail modal icon — larger */
.detail-icon {
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.detail-icon delluna-icon {
  display: block;
  width: 100%;
  height: 100%;
}

.detail-icon delluna-icon svg,
.detail-icon delluna-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}