/* ==========================================================================
   AXING icons & SVGs
   --------------------------------------------------------------------------
   Two-layer system, single source of truth for all inline SVG artwork:

     1. :root --icon-* — SVG URLs as custom properties. Pure data, no
        opinion on rendering. Consumers can pull them via background-image,
        mask-image, content, list-style-image, etc.

     2. .ico / .ico-* — mask-image icon component. Each .ico-NAME binds
        --ico to the matching --icon-NAME, the base .ico rule renders it
        in currentColor at the chosen size.

   Adding an icon: define the SVG in :root, then add one binding rule
   .ico-NAME{--ico:var(--icon-NAME)} in section 3.

   Most icons use Tabler Icons artwork (https://tabler.io/icons, MIT). A few
   domain-specific glyphs (snmp, smartportal, neighbors, splitter, combiner,
   amp, switch, onu, sat, cam-slot, circle-x, etc.) and the topology/service
   set are hand-drawn to match Tabler's stroke language (24×24 viewBox,
   stroke-width 2, round caps/joins).
   ========================================================================== */


/* === 1. SVG ARTWORK ====================================================== */
:root {
  /* Navigation — arrows & chevrons */
  --icon-arrow-left: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='19' y1='12' x2='5' y2='12'/><polyline points='12 19 5 12 12 5'/></svg>");
  --icon-arrow-right: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/><polyline points='12 5 19 12 12 19'/></svg>");
  --icon-arrow-narrow-left: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l14 0' /><path d='M5 12l4 4' /><path d='M5 12l4 -4' /></svg>");
  --icon-arrow-narrow-right: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l14 0' /><path d='M15 16l4 -4' /><path d='M15 8l4 4' /></svg>");
  --icon-arrow-back-up: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 14l-4 -4l4 -4' /><path d='M5 10h11a4 4 0 1 1 0 8h-1' /></svg>");
  --icon-arrow-badge-down: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17 13v-6l-5 4l-5 -4v6l5 4l5 -4' /></svg>");
  --icon-arrow-fork: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 3h5v5' /><path d='M8 3h-5v5' /><path d='M21 3l-7.536 7.536a5 5 0 0 0 -1.464 3.534v6.93' /><path d='M3 3l7.536 7.536a5 5 0 0 1 1.464 3.534v.93' /></svg>");
  --icon-arrow-fork-down: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 3l-7.536 7.536a5 5 0 0 0 -1.464 3.534v6.93' /><path d='M3 3l7.536 7.536a5 5 0 0 1 1.464 3.534v.93' /><path d='M9 18l3 3l3 -3' /></svg>");
  --icon-arrow-merge: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 7l4 -4l4 4' /><path d='M12 3v5.394a6.737 6.737 0 0 1 -3 5.606a6.737 6.737 0 0 0 -3 5.606v1.394' /><path d='M12 3v5.394a6.737 6.737 0 0 0 3 5.606a6.737 6.737 0 0 1 3 5.606v1.394' /></svg>");
  --icon-arrow-up-from-arc: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 9v12' /><path d='M8 17l4 4l4 -4' /><path d='M21 12a9 9 0 0 0 -18 0' /></svg>");
  --icon-arrow-down-to-arc: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v12' /><path d='M16 11l-4 4l-4 -4' /><path d='M3 12a9 9 0 0 0 18 0' /></svg>");
  --icon-arrow-left-from-arc: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 12h12' /><path d='M17 16l4 -4l-4 -4' /><path d='M12 3a9 9 0 1 0 0 18' /></svg>");
  --icon-arrow-right-to-arc: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12h12' /><path d='M11 8l4 4l-4 4' /><path d='M12 21a9 9 0 0 0 0 -18' /></svg>");
  --icon-direction: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 10l3 -3l3 3' /><path d='M9 14l3 3l3 -3' /></svg>");
  --icon-chevron-left: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'/></svg>");
  --icon-chevron-right: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>");
  --icon-chevron-down: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  --icon-input-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/><polyline points='10 17 15 12 10 7'/><line x1='15' y1='12' x2='3' y2='12'/></svg>");
  --icon-prompt: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 7l5 5l-5 5' /><path d='M13 17l6 0' /></svg>");

  /* Shell chrome — header toggle, dialogs, overflow */
  --icon-hamburger: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l16 0' /><path d='M4 12l16 0' /><path d='M4 18l16 0' /></svg>");
  --icon-close: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 6l-12 12' /><path d='M6 6l12 12' /></svg>");
  --icon-dots: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='none'><circle cx='5' cy='12' r='2'/><circle cx='12' cy='12' r='2'/><circle cx='19' cy='12' r='2'/></svg>");
  --icon-dots-v: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='none'><circle cx='12' cy='5' r='2'/><circle cx='12' cy='12' r='2'/><circle cx='12' cy='19' r='2'/></svg>");

  /* Theme toggles */
  --icon-pc: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='3' width='20' height='14' rx='2'/><line x1='8' y1='21' x2='16' y2='21'/><line x1='12' y1='17' x2='12' y2='21'/></svg>");
  --icon-moon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/></svg>");
  --icon-sun: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='5'/><line x1='12' y1='1' x2='12' y2='3'/><line x1='12' y1='21' x2='12' y2='23'/><line x1='4.22' y1='4.22' x2='5.64' y2='5.64'/><line x1='18.36' y1='18.36' x2='19.78' y2='19.78'/><line x1='1' y1='12' x2='3' y2='12'/><line x1='21' y1='12' x2='23' y2='12'/><line x1='4.22' y1='19.78' x2='5.64' y2='18.36'/><line x1='18.36' y1='5.64' x2='19.78' y2='4.22'/></svg>");

  /* Status & info */
  --icon-help: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0' /><path d='M12 17l0 .01' /><path d='M12 13.5a1.5 1.5 0 0 1 1 -1.5a2.6 2.6 0 1 0 -3 -4' /></svg>");
  --icon-circle-i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0' /><path d='M12 9h.01' /><path d='M11 12h1v4h1' /></svg>");
  --icon-circle-x: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='15' y1='9' x2='9' y2='15'/><line x1='9' y1='9' x2='15' y2='15'/></svg>");
  --icon-cancel: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0' /><path d='M18.364 5.636l-12.728 12.728' /></svg>");
  --icon-triangle-warn: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 9v4' /><path d='M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0' /><path d='M12 16h.01' /></svg>");

  /* Actions */
  --icon-check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5l10 -10' /></svg>");
  --icon-undo: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='4 7 4 12 9 12'/><path d='M5.5 17a8 8 0 1 0 1.7-8.3L4 12'/></svg>");
  --icon-trash: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 7l16 0' /><path d='M10 11l0 6' /><path d='M14 11l0 6' /><path d='M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12' /><path d='M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3' /></svg>");
  --icon-trash-x: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 7h16' /><path d='M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12' /><path d='M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3' /><path d='M10 12l4 4m0 -4l-4 4' /></svg>");
  --icon-upload: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4'/><polyline points='17 8 12 3 7 8'/><line x1='12' y1='3' x2='12' y2='15'/></svg>");
  --icon-download: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2' /><path d='M7 11l5 5l5 -5' /><path d='M12 4l0 12' /></svg>");
  --icon-refresh: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4' /><path d='M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4' /></svg>");
  --icon-reload: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19.933 13.041a8 8 0 1 1 -9.925 -8.788c3.899 -1 7.935 1.007 9.425 4.747' /><path d='M20 4v5h-5' /></svg>");
  --icon-copy: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 9.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667l0 -8.666' /><path d='M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1' /></svg>");
  --icon-arrows-sort: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 9l4 -4l4 4m-4 -4v14' /><path d='M21 15l-4 4l-4 -4m4 4v-14' /></svg>");
  --icon-sort-ascending: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l7 0' /><path d='M4 12l7 0' /><path d='M4 18l9 0' /><path d='M15 9l3 -3l3 3' /><path d='M18 6l0 12' /></svg>");
  --icon-sort-descending: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l9 0' /><path d='M4 12l7 0' /><path d='M4 18l7 0' /><path d='M15 15l3 3l3 -3' /><path d='M18 6l0 12' /></svg>");
  --icon-arrows-split: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 17h-8l-3.5 -5h-6.5' /><path d='M21 7h-8l-3.495 5' /><path d='M18 10l3 -3l-3 -3' /><path d='M18 20l3 -3l-3 -3' /></svg>");
  --icon-arrows-split-2: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 17h-5.397a5 5 0 0 1 -4.096 -2.133l-.514 -.734a5 5 0 0 0 -4.096 -2.133h-3.897' /><path d='M21 7h-5.395a5 5 0 0 0 -4.098 2.135l-.51 .73a5 5 0 0 1 -4.097 2.135h-3.9' /><path d='M18 10l3 -3l-3 -3' /><path d='M18 20l3 -3l-3 -3' /></svg>");
  --icon-external-link: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6' /><path d='M11 13l9 -9' /><path d='M15 4h5v5' /></svg>");
  --icon-user: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0' /><path d='M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2' /></svg>");
  --icon-output: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/><polyline points='16 17 21 12 16 7'/><line x1='21' y1='12' x2='9' y2='12'/></svg>");
  --icon-edit: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1' /><path d='M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415' /><path d='M16 5l3 3' /></svg>");
  --icon-pencil: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4' /><path d='M13.5 6.5l4 4' /></svg>");
  --icon-search: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0' /><path d='M21 21l-6 -6' /></svg>");

  /* Locks */
  --icon-lock-open: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2' fill='black'/><path d='M7 11V7a5 5 0 0 1 5-5 5 5 0 0 1 5 5'/></svg>");
  --icon-lock-closed: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>");
  --icon-lock-list: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2'/><path d='M7 11V7a5 5 0 0 1 5-5 5 5 0 0 1 5 5'/><line x1='9' y1='16' x2='15' y2='16'/><line x1='9' y1='19' x2='15' y2='19'/></svg>");

  /* Layout & panels */
  --icon-aside: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='16' rx='2'/><line x1='15' y1='4' x2='15' y2='20'/></svg>");
  --icon-sliders: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 6a2 2 0 1 0 4 0a2 2 0 1 0 -4 0' /><path d='M4 6l8 0' /><path d='M16 6l4 0' /><path d='M6 12a2 2 0 1 0 4 0a2 2 0 1 0 -4 0' /><path d='M4 12l2 0' /><path d='M10 12l10 0' /><path d='M15 18a2 2 0 1 0 4 0a2 2 0 1 0 -4 0' /><path d='M4 18l11 0' /><path d='M19 18l1 0' /></svg>");
  --icon-grid: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='7' rx='1'/><rect x='14' y='3' width='7' height='7' rx='1'/><rect x='3' y='14' width='7' height='7' rx='1'/><rect x='14' y='14' width='7' height='7' rx='1'/></svg>");
  --icon-ci-menu: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='4 17 10 11 4 5'/><line x1='12' y1='19' x2='20' y2='19'/></svg>");
  --icon-cross-split: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='4' y1='5' x2='20' y2='19'/><polyline points='15 18 20 19 18 14'/><line x1='4' y1='19' x2='20' y2='5'/><polyline points='18 10 20 5 15 6'/></svg>");
  --icon-cam-slot: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><rect x='2' y='5' width='20' height='14' rx='2'/><path d='M12 5v14M7 9h3M7 12h3M7 15h2'/></svg>");
  --icon-layout-sidebar-left-collapse: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2l0 -12' /><path d='M9 4v16' /><path d='M15 10l-2 2l2 2' /></svg>");
  --icon-layout-sidebar-left-expand: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2l0 -12' /><path d='M9 4v16' /><path d='M14 10l2 2l-2 2' /></svg>");
  --icon-logs: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12h.01' /><path d='M4 6h.01' /><path d='M4 18h.01' /><path d='M8 18h2' /><path d='M8 12h2' /><path d='M8 6h2' /><path d='M14 6h6' /><path d='M14 12h6' /><path d='M14 18h6' /></svg>");
  --icon-minimize: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 19v-2a2 2 0 0 1 2 -2h2' /><path d='M15 5v2a2 2 0 0 0 2 2h2' /><path d='M5 15h2a2 2 0 0 1 2 2v2' /><path d='M5 9h2a2 2 0 0 0 2 -2v-2' /></svg>");

  /* Files & packaging */
  --icon-file: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 3v4a1 1 0 0 0 1 1h4' /><path d='M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2' /></svg>");
  --icon-file-text: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z'/><polyline points='14 2 14 8 20 8'/><line x1='8' y1='13' x2='16' y2='13'/><line x1='8' y1='17' x2='16' y2='17'/><line x1='8' y1='9' x2='10' y2='9'/></svg>");
  --icon-file-download: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 3v4a1 1 0 0 0 1 1h4' /><path d='M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2' /><path d='M12 17v-6' /><path d='M9.5 14.5l2.5 2.5l2.5 -2.5' /></svg>");
  --icon-file-upload: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 3v4a1 1 0 0 0 1 1h4' /><path d='M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2' /><path d='M12 11v6' /><path d='M9.5 13.5l2.5 -2.5l2.5 2.5' /></svg>");
  --icon-file-export: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z'/><polyline points='14 2 14 8 20 8'/><line x1='7' y1='15' x2='15' y2='15'/><polyline points='10 12 7 15 10 18'/><polyline points='12 12 15 15 12 18'/></svg>");
  --icon-package: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5' /><path d='M12 12l8 -4.5' /><path d='M12 12l0 9' /><path d='M12 12l-8 -4.5' /></svg>");
  --icon-package-import: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21l-8 -4.5v-9l8 -4.5l8 4.5v4.5' /><path d='M12 12l8 -4.5' /><path d='M12 12v9' /><path d='M12 12l-8 -4.5' /><path d='M22 18h-7' /><path d='M18 15l-3 3l3 3' /></svg>");
  --icon-file-import: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 3v4a1 1 0 0 0 1 1h4' /><path d='M5 13v-8a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2h-5.5m-9.5 -2h7m-3 -3l3 3l-3 3' /></svg>");
  --icon-save: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 4h10l4 4v10a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2' /><path d='M10 14a2 2 0 1 0 4 0a2 2 0 1 0 -4 0' /><path d='M14 4l0 4l-6 0l0 -4' /></svg>");
  --icon-mail: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10' /><path d='M3 7l9 6l9 -6' /></svg>");

  /* Data, system & monitoring */
  --icon-database: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6a8 3 0 1 0 16 0a8 3 0 1 0 -16 0' /><path d='M4 6v6a8 3 0 0 0 16 0v-6' /><path d='M4 12v6a8 3 0 0 0 16 0v-6' /></svg>");
  --icon-key: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.78 7.78 5.5 5.5 0 0 1 7.78-7.78zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4'/></svg>");
  --icon-snmp: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='8' y='2' width='8' height='5' rx='1'/><line x1='12' y1='7' x2='12' y2='10'/><line x1='6' y1='10' x2='18' y2='10'/><line x1='6' y1='10' x2='6' y2='13'/><line x1='18' y1='10' x2='18' y2='13'/><rect x='3' y='13' width='6' height='5' rx='1'/><rect x='15' y='13' width='6' height='5' rx='1'/></svg>");
  --icon-activity: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 12h-4l-3 9L9 3l-3 9H2'/></svg>");
  --icon-eye: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/><circle cx='12' cy='12' r='3'/></svg>");
  --icon-funnel: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'/></svg>");
  --icon-funnel-solid: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linejoin='round'><polygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'/></svg>");
  --icon-filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h16v2.172a2 2 0 0 1 -.586 1.414l-4.414 4.414v7l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227' /></svg>");
  --icon-filter-solid: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linejoin='round'><path d='M4 4h16v2.172a2 2 0 0 1 -.586 1.414l-4.414 4.414v7l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227' /></svg>");
  --icon-split: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='3' y1='12' x2='9' y2='12'/><polyline points='9 12 13 7 21 7'/><polyline points='9 12 13 17 21 17'/><polyline points='18 4 21 7 18 10'/><polyline points='18 14 21 17 18 20'/></svg>");
  --icon-gear: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065' /><path d='M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0' /></svg>");
  --icon-smartportal: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='16 16 12 12 8 16'/><line x1='12' y1='12' x2='12' y2='21'/><path d='M20.39 18.39A5 5 0 0018 9h-1.26A8 8 0 103 16.3'/></svg>");
  --icon-router: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 15a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2l0 -4' /><path d='M17 17l0 .01' /><path d='M13 17l0 .01' /><path d='M15 13l0 -2' /><path d='M11.75 8.75a4 4 0 0 1 6.5 0' /><path d='M8.5 6.5a8 8 0 0 1 13 0' /></svg>");
  --icon-neighbors: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='2' width='7' height='7' rx='1'/><rect x='15' y='2' width='7' height='7' rx='1'/><rect x='2' y='15' width='7' height='7' rx='1'/><rect x='15' y='15' width='7' height='7' rx='1'/><path d='M9 5.5h6M9 18.5h6M5.5 9v6M18.5 9v6'/></svg>");
  --icon-globe: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='2' y1='12' x2='22' y2='12'/><path d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/></svg>");
  --icon-network: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9a6 6 0 1 0 12 0a6 6 0 0 0 -12 0' /><path d='M12 3c1.333 .333 2 2.333 2 6s-.667 5.667 -2 6' /><path d='M12 3c-1.333 .333 -2 2.333 -2 6s.667 5.667 2 6' /><path d='M6 9h12' /><path d='M3 20h7' /><path d='M14 20h7' /><path d='M10 20a2 2 0 1 0 4 0a2 2 0 0 0 -4 0' /><path d='M12 15v3' /></svg>");
  --icon-hotel: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21l18 0' /><path d='M9 8l1 0' /><path d='M9 12l1 0' /><path d='M9 16l1 0' /><path d='M14 8l1 0' /><path d='M14 12l1 0' /><path d='M14 16l1 0' /><path d='M5 21v-16a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v16' /></svg>");
  --icon-home: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l-2 0l9 -9l9 9l-2 0' /><path d='M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7' /><path d='M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6' /></svg>");
  --icon-circuit-diode: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 12h-6' /><path d='M2 12h6' /><path d='M8 7l8 5l-8 5l0 -10' /><path d='M16 7v10' /></svg>");
  --icon-cloud-data-connection: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 9.897c0 -1.714 1.46 -3.104 3.26 -3.104c.275 -1.22 1.255 -2.215 2.572 -2.611c1.317 -.397 2.77 -.134 3.811 .69c1.042 .822 1.514 2.08 1.239 3.3h.693a2.42 2.42 0 0 1 2.425 2.414a2.42 2.42 0 0 1 -2.425 2.414h-8.315c-1.8 0 -3.26 -1.39 -3.26 -3.103' /><path d='M12 13v3' /><path d='M10 18a2 2 0 1 0 4 0a2 2 0 1 0 -4 0' /><path d='M14 18h7' /><path d='M3 18h7' /></svg>");
  --icon-cloud-lock: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 18a3.5 3.5 0 0 0 0 -7h-1c.397 -1.768 -.285 -3.593 -1.788 -4.787c-1.503 -1.193 -3.6 -1.575 -5.5 -1s-3.315 2.019 -3.712 3.787c-2.199 -.088 -4.155 1.326 -4.666 3.373c-.512 2.047 .564 4.154 2.566 5.027' /><path d='M8 16a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1v3a1 1 0 0 1 -1 1h-6a1 1 0 0 1 -1 -1l0 -3' /><path d='M10 15v-2a2 2 0 1 1 4 0v2' /></svg>");
  --icon-signal-in: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='6'/><path d='M0 12h12'/><circle cx='12' cy='12' r='2' fill='black' stroke='none'/></svg>");
  --icon-signal-out: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='6'/><path d='M12 12h12'/><circle cx='22' cy='12' r='2' fill='black' stroke='none'/></svg>");

  /* Service-card icons (Step 1 "Additional Services") */
  --icon-wifi: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='18' r='1.5' fill='black' stroke='none'/><path d='M9.172 15.172a4 4 0 0 1 5.656 0' /><path d='M6.343 12.343a8 8 0 0 1 11.314 0' /><path d='M3.515 9.515c4.686 -4.687 12.284 -4.687 17 0' /></svg>");
  --icon-waves: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M 3 5 Q 6 1 9 5 T 15 5 T 21 5'/><path d='M 3 12 Q 6 8 9 12 T 15 12 T 21 12'/><path d='M 3 19 Q 6 15 9 19 T 15 19 T 21 19'/></svg>");
  --icon-ripple: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7c3 -2 6 -2 9 0s6 2 9 0' /><path d='M3 17c3 -2 6 -2 9 0s6 2 9 0' /><path d='M3 12c3 -2 6 -2 9 0s6 2 9 0' /></svg>");
  --icon-bolt: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M13 3l0 7l6 0l-8 11l0 -7l-6 0l8 -11' /></svg>");
  --icon-tv: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 9a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2l0 -9' /><path d='M16 3l-4 4l-4 -4' /></svg>");

  /* Topology icons (Step 3) — sources, core equipment, client devices.
     Internet node uses --icon-globe (same shape). */
  --icon-sat: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 10a7.3 7.3 0 0 0 10 10Z'/><path d='M9 15l3-3'/><path d='M17 13a6 6 0 0 0-6-6'/><path d='M21 13A10 10 0 0 0 11 3'/></svg>");
  --icon-server: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v2a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3' /><path d='M3 15a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v2a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3l0 -2' /><path d='M7 8l0 .01' /><path d='M7 16l0 .01' /></svg>");
  --icon-switch: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='8' width='20' height='8' rx='1.5'/><line x1='6' y1='12' x2='6.01' y2='12'/><line x1='10' y1='12' x2='10.01' y2='12'/><line x1='14' y1='12' x2='14.01' y2='12'/><line x1='18' y1='12' x2='18.01' y2='12'/></svg>");
  --icon-mux: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 17h5l1.67 -2.386m3.66 -5.227l1.67 -2.387h6' /><path d='M18 4l3 3l-3 3' /><path d='M3 7h5l7 10h6' /><path d='M18 20l3 -3l-3 -3' /></svg>");
  --icon-mux-2: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 17h2.397a5 5 0 0 0 4.096 -2.133l.177 -.253m3.66 -5.227l.177 -.254a5 5 0 0 1 4.096 -2.133h3.397' /><path d='M18 4l3 3l-3 3' /><path d='M3 7h2.397a5 5 0 0 1 4.096 2.133l4.014 5.734a5 5 0 0 0 4.096 2.133h3.397' /><path d='M18 20l3 -3l-3 -3' /></svg>");
  --icon-amp: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='5 4 20 12 5 20 5 4'/><line x1='20' y1='12' x2='22' y2='12'/><line x1='5' y1='12' x2='2' y2='12'/></svg>");
  --icon-onu: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='8' width='20' height='8' rx='1.5'/><line x1='6' y1='12' x2='6.01' y2='12'/><line x1='13' y1='12' x2='15' y2='12'/><line x1='17' y1='12' x2='19' y2='12'/></svg>");
  --icon-headend: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='8' width='20' height='8' rx='1.5'/><line x1='5' y1='12' x2='7' y2='12'/><line x1='10' y1='12' x2='10.01' y2='12'/><line x1='14' y1='12' x2='14.01' y2='12'/><line x1='17' y1='12' x2='19' y2='12'/></svg>");
  --icon-laptop: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='12' rx='1.5'/><line x1='2' y1='20' x2='22' y2='20'/></svg>");
  --icon-ap: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='1.5' fill='black' stroke='none'/><path d='M14.828 9.172a4 4 0 0 1 0 5.656' /><path d='M17.657 6.343a8 8 0 0 1 0 11.314' /><path d='M9.168 14.828a4 4 0 0 1 0 -5.656' /><path d='M6.337 17.657a8 8 0 0 1 0 -11.314' /></svg>");
  --icon-device-desktop: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 5a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v10a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1v-10' /><path d='M7 20h10' /><path d='M9 16v4' /><path d='M15 16v4' /></svg>");
  --icon-device-mobile: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 5a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-14' /><path d='M11 4h2' /><path d='M12 17v.01' /></svg>");
}


/* === 2. MASK-IMAGE ICON COMPONENT ========================================
   HTML usage: <span class="ico ico-NAME"></span>          (16px default)
               <span class="ico ico-NAME ico-24"></span>   (any size 16..48)
   Size scale (steps of 4, plus a 36→48 jump for prominent standalone use):
       16  20  24  28  32  36  48
   Each binding rule in section 3 sets --ico to the matching --icon-NAME;
   the base .ico rule wires --ico into mask-image and renders it in
   currentColor — so the icon adopts the parent's text color. */
.ico{display:inline-block;width:16px;height:16px;background-color:currentColor;flex-shrink:0;vertical-align:-3px;
     -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
     -webkit-mask-position:center;mask-position:center;
     -webkit-mask-size:contain;mask-size:contain;
     -webkit-mask-image:var(--ico);mask-image:var(--ico)}
.ico-16{width:16px;height:16px}
.ico-20{width:20px;height:20px}
.ico-24{width:24px;height:24px}
.ico-28{width:28px;height:28px}
.ico-32{width:32px;height:32px}
.ico-36{width:36px;height:36px}
.ico-48{width:48px;height:48px}


/* === 3. ICON BINDINGS ====================================================
   One line per icon: bind .ico-NAME to var(--icon-NAME). */

/* Navigation */
.ico-arrow-left         {--ico:var(--icon-arrow-left)}
.ico-arrow-right        {--ico:var(--icon-arrow-right)}
.ico-arrow-narrow-left  {--ico:var(--icon-arrow-narrow-left)}
.ico-arrow-narrow-right {--ico:var(--icon-arrow-narrow-right)}
.ico-arrow-back-up      {--ico:var(--icon-arrow-back-up)}
.ico-arrow-badge-down   {--ico:var(--icon-arrow-badge-down)}
.ico-arrow-fork         {--ico:var(--icon-arrow-fork)}
.ico-arrow-fork-down    {--ico:var(--icon-arrow-fork-down)}
.ico-arrow-merge        {--ico:var(--icon-arrow-merge)}
.ico-arrow-up-from-arc  {--ico:var(--icon-arrow-up-from-arc)}
.ico-arrow-down-to-arc  {--ico:var(--icon-arrow-down-to-arc)}
.ico-arrow-left-from-arc{--ico:var(--icon-arrow-left-from-arc)}
.ico-arrow-right-to-arc {--ico:var(--icon-arrow-right-to-arc)}
.ico-direction          {--ico:var(--icon-direction)}
.ico-chevron-left       {--ico:var(--icon-chevron-left)}
.ico-chevron-right      {--ico:var(--icon-chevron-right)}
.ico-chevron-down       {--ico:var(--icon-chevron-down)}
.ico-input-arrow        {--ico:var(--icon-input-arrow)}
.ico-prompt             {--ico:var(--icon-prompt)}

/* Shell chrome */
.ico-hamburger          {--ico:var(--icon-hamburger)}
.ico-close              {--ico:var(--icon-close)}
.ico-dots               {--ico:var(--icon-dots)}
.ico-dots-v             {--ico:var(--icon-dots-v)}

/* Theme */
.ico-pc                 {--ico:var(--icon-pc)}
.ico-moon               {--ico:var(--icon-moon)}
.ico-sun                {--ico:var(--icon-sun)}

/* Status & info */
.ico-help               {--ico:var(--icon-help)}
.ico-circle-i           {--ico:var(--icon-circle-i)}
.ico-circle-x           {--ico:var(--icon-circle-x)}
.ico-cancel             {--ico:var(--icon-cancel)}
.ico-triangle-warn      {--ico:var(--icon-triangle-warn)}

/* Actions */
.ico-check              {--ico:var(--icon-check)}
.ico-undo               {--ico:var(--icon-undo)}
.ico-trash              {--ico:var(--icon-trash)}
.ico-trash-x            {--ico:var(--icon-trash-x)}
.ico-upload             {--ico:var(--icon-upload)}
.ico-download           {--ico:var(--icon-download)}
.ico-refresh            {--ico:var(--icon-refresh)}
.ico-reload             {--ico:var(--icon-reload)}
.ico-copy               {--ico:var(--icon-copy)}
.ico-arrows-sort        {--ico:var(--icon-arrows-sort)}
.ico-sort-ascending     {--ico:var(--icon-sort-ascending)}
.ico-sort-descending    {--ico:var(--icon-sort-descending)}
.ico-arrows-split       {--ico:var(--icon-arrows-split)}
.ico-arrows-split-2     {--ico:var(--icon-arrows-split-2)}
.ico-external-link      {--ico:var(--icon-external-link)}
.ico-user               {--ico:var(--icon-user)}
.ico-output             {--ico:var(--icon-output)}
.ico-edit               {--ico:var(--icon-edit)}
.ico-pencil             {--ico:var(--icon-pencil)}
.ico-search             {--ico:var(--icon-search)}

/* Locks */
.ico-lock-open          {--ico:var(--icon-lock-open)}
.ico-lock-closed        {--ico:var(--icon-lock-closed)}
.ico-lock-list          {--ico:var(--icon-lock-list)}

/* Layout & panels */
.ico-aside              {--ico:var(--icon-aside)}
.ico-sliders            {--ico:var(--icon-sliders)}
.ico-grid               {--ico:var(--icon-grid)}
.ico-ci-menu            {--ico:var(--icon-ci-menu)}
.ico-cross-split        {--ico:var(--icon-cross-split)}
.ico-cam-slot           {--ico:var(--icon-cam-slot)}
.ico-layout-sidebar-left-collapse {--ico:var(--icon-layout-sidebar-left-collapse)}
.ico-layout-sidebar-left-expand   {--ico:var(--icon-layout-sidebar-left-expand)}
.ico-logs               {--ico:var(--icon-logs)}
.ico-minimize           {--ico:var(--icon-minimize)}

/* Files & packaging */
.ico-file               {--ico:var(--icon-file)}
.ico-file-text          {--ico:var(--icon-file-text)}
.ico-file-download      {--ico:var(--icon-file-download)}
.ico-file-upload        {--ico:var(--icon-file-upload)}
.ico-file-export        {--ico:var(--icon-file-export)}
.ico-package            {--ico:var(--icon-package)}
.ico-package-import     {--ico:var(--icon-package-import)}
.ico-file-import        {--ico:var(--icon-file-import)}
.ico-save               {--ico:var(--icon-save)}
.ico-mail               {--ico:var(--icon-mail)}

/* Data, system & monitoring */
.ico-database           {--ico:var(--icon-database)}
.ico-key                {--ico:var(--icon-key)}
.ico-snmp               {--ico:var(--icon-snmp)}
.ico-activity           {--ico:var(--icon-activity)}
.ico-eye                {--ico:var(--icon-eye)}
.ico-funnel             {--ico:var(--icon-funnel)}
.ico-funnel-solid       {--ico:var(--icon-funnel-solid)}
.ico-filter             {--ico:var(--icon-filter)}
.ico-filter-solid       {--ico:var(--icon-filter-solid)}
.ico-split              {--ico:var(--icon-split)}
.ico-gear               {--ico:var(--icon-gear)}
.ico-smartportal        {--ico:var(--icon-smartportal)}
.ico-router             {--ico:var(--icon-router)}
.ico-neighbors          {--ico:var(--icon-neighbors)}
.ico-globe              {--ico:var(--icon-globe)}
.ico-network            {--ico:var(--icon-network)}
.ico-hotel              {--ico:var(--icon-hotel)}
.ico-home               {--ico:var(--icon-home)}
.ico-circuit-diode      {--ico:var(--icon-circuit-diode)}
.ico-cloud-data-connection {--ico:var(--icon-cloud-data-connection)}
.ico-cloud-lock         {--ico:var(--icon-cloud-lock)}
.ico-signal-in          {--ico:var(--icon-signal-in)}
.ico-signal-out         {--ico:var(--icon-signal-out)}

/* Service-card icons */
.ico-wifi               {--ico:var(--icon-wifi)}
.ico-waves              {--ico:var(--icon-waves)}
.ico-ripple             {--ico:var(--icon-ripple)}
.ico-bolt               {--ico:var(--icon-bolt)}
.ico-tv                 {--ico:var(--icon-tv)}

/* Topology / devices */
.ico-sat                {--ico:var(--icon-sat)}
.ico-server             {--ico:var(--icon-server)}
.ico-switch             {--ico:var(--icon-switch)}
.ico-mux                {--ico:var(--icon-mux)}
.ico-mux-2              {--ico:var(--icon-mux-2)}
.ico-amp                {--ico:var(--icon-amp)}
.ico-onu                {--ico:var(--icon-onu)}
.ico-headend            {--ico:var(--icon-headend)}
.ico-laptop             {--ico:var(--icon-laptop)}
.ico-ap                 {--ico:var(--icon-ap)}
.ico-device-desktop     {--ico:var(--icon-device-desktop)}
.ico-device-mobile      {--ico:var(--icon-device-mobile)}