/* Append after the existing shell CSS. Standard icons retain all old rules.
 * Set app-icon--illustrated ONLY when svg() returned a known illustration.
 */
.app-icon.app-icon--illustrated {
  background: none;
  border: 0;
  box-shadow: none;
  overflow: visible;
  isolation: auto;
}
.app-icon.app-icon--illustrated::before { display: none; }
.app-icon.app-icon--illustrated > .illustrated-app-svg {
  display: block;
  flex: none;
  width: 100%;
  height: 100%;
  max-width: none;
  filter: none;
}
/* The compact title wrapper must not inherit the full app-card dimensions. */
.window-title > .app-icon {
  display: inline-flex;
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  border-radius: 0;
  border: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}
.window-title > .app-icon::before { display: none; }
.window-title > .app-icon > svg { width: 17px; height: 17px; }
.window-title > .app-icon--illustrated { flex-basis: 20px; width: 20px; height: 20px; }
.window-title > .app-icon--illustrated > svg { width: 20px; height: 20px; }
/* Existing taskbar wrapper size can be retained. 26–28px is recommended. */
.taskbar .app-icon.app-icon--illustrated { min-width: 26px; min-height: 26px; }
@media (forced-colors: active) {
  /* These are decorative multicolour app identities next to text labels.
   * Keep their authored contrast; controls and focus rings remain adaptive. */
  .app-icon--illustrated > .illustrated-app-svg { forced-color-adjust: none; }
}

.window-title > .app-icon { color: inherit; }
.icon-style-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.icon-style-choice{min-height:124px;min-width:0;border:2px solid var(--line);border-radius:14px;padding:15px 10px;display:flex;flex-direction:column;align-items:center;gap:14px;background:var(--panel);color:var(--text);font-size:13px;font-weight:650;touch-action:manipulation}
.icon-style-choice.active{border-color:var(--accent);background:var(--accent-soft)}
.icon-style-choice:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
.icon-style-samples{display:flex;gap:9px;align-items:center;justify-content:center}
.icon-style-samples .app-icon{width:38px;height:38px;flex:none;border-radius:9px}
.icon-style-samples .app-icon:not(.app-icon--illustrated) svg{width:23px;height:23px}
@container(max-width:380px){.icon-style-options{grid-template-columns:1fr}.icon-style-choice{min-height:104px}.icon-style-samples .app-icon{width:34px;height:34px}}