/* ============================================================================
   Simple Modern Design Language — application shell.

   Loaded after portal-v2.css and deliberately reuses its theme tokens
   (--ink, --surface, --canvas, --line, --accent…) so page content keeps
   working unchanged while the shell, geometry, and accent become SMDL.

   Structure:
     .smdl              the shell grid
       .smdl-corner     brand mark = app switcher
       .smdl-top        page heading + search, New, notifications, profile
       .smdl-side       labeled sidebar, slim-collapsible
       .smdl-canvas     the page
   ============================================================================ */

/* ---------------------------------------------------------------- geometry */
:root {
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 14px;
  --smdl-side: 232px;
  --smdl-side-slim: 64px;
  --smdl-top: 56px;
  --smdl-hair: rgba(16, 24, 40, .07);
  --smdl-ring: rgba(16, 24, 40, .05);
  --seat-dim: #D3D9E2;
  /* Shared fallbacks let product shells inherit their accent from smdl.css,
     while CORE can still override the same roles from its inline brand pack. */
  --smdl-rail: var(--surface);
  --rail-ink: var(--ink-2);
  --rail-ink-strong: var(--ink);
  --rail-quiet: var(--ink-3);
  --rail-hover: color-mix(in srgb, var(--ink) 5%, transparent);
  --rail-active: var(--accent-soft);
  --rail-hair: var(--smdl-hair);
}
[data-theme="dark"] {
  --smdl-hair: rgba(255, 255, 255, .07);
  --smdl-ring: rgba(255, 255, 255, .08);
  --seat-dim: #39414F;
}
/* …and the same when the reader has made no choice at all and their system is
   dark. Every dark rule in this file is written twice on purpose: an explicit
   choice is an attribute, a system preference is a media query, and CSS cannot
   put the two in one selector. tests/test_shell_and_account_nav.py fails if a
   [data-theme="dark"] rule here is ever left without its twin. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --smdl-hair: rgba(255, 255, 255, .07);
    --smdl-ring: rgba(255, 255, 255, .08);
    --seat-dim: #39414F;
  }
}

/* Product modules author their mark as the same accessible 3x3 seat grid;
   CORE uses supplied light/dark artwork. The shared shell supports both
   representations without asking either surface to redraw its identity. */
.seatgrid .dim { fill: var(--seat-dim); }
.seatgrid .lit { fill: var(--seat, var(--accent)); }

/* ---------------------------------------------------------------- palette
   Per-application colour. The hex codes live in portal/brand.py and arrive on
   the shell element as --app-* custom properties, so this file wires ROLES and
   never carries a colour of its own — retinting an application is a one-line
   edit to the palette, not a stylesheet change.

     tile  filled shapes >= 16px: seat cells, switcher tiles, primary buttons
     ink   coloured TEXT on light, links, the wordmark dot — clears 4.5:1
     soft  a light tint of the app's own hue for selected rows and badge fills
     dark  the same hue lifted for a near-black canvas — never another hue

   --smdl-rail is the nav rail's own surface. It is NOT the app's colour: the
   rail is the same calm ground a card is, set off from the canvas by a
   hairline rather than by paint. Painting it the app's colour at full depth
   put a muddy band down the left of every page — coral driven to near-black
   reads brown, teal reads swamp — and the loudest thing on screen was the
   furniture. Identity is carried where it identifies: the corner mark, the
   selected row, and the accents.
*/
.smdl[data-accent] {
  --accent: var(--app-tile, #EA580C);
  --accent-ink: var(--app-ink, #C2410C);
  --accent-soft: var(--app-soft, #FFEDD5);
  --smdl-rail: var(--surface);
  /* The rail reads with the page now, so its text is the page's ink. */
  --rail-ink: var(--ink-2);
  --rail-ink-strong: var(--ink);
  --rail-quiet: var(--ink-3);
  --rail-hover: color-mix(in srgb, var(--ink) 5%, transparent);
  --rail-active: var(--app-soft, #FFEDD5);
  --rail-hair: var(--smdl-hair);
}
[data-theme="dark"] .smdl[data-accent] {
  /* The roles split on a near-black canvas, and getting this backwards is what
     makes dark mode unreadable:

       --accent      stays the TILE. It is a fill — a button, a ring, a bar —
                     and the white label on it has to keep its contrast. Filled
                     with the lifted hue instead, every primary button in the
                     portal became white text on pale coral.
       --accent-ink  becomes the DARK variant: the same hue lifted, which is
                     what coloured TEXT needs against near-black.
       --accent-soft becomes the deep tint of the app's own hue.
  */
  --accent: var(--app-tile, #EA580C);
  --accent-ink: var(--app-dark, #F97316);
  --accent-soft: var(--app-soft-dark, #3B1A08);
  --rail-active: var(--app-soft-dark, #3B1A08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .smdl[data-accent] {
    --accent: var(--app-tile, #EA580C);
    --accent-ink: var(--app-dark, #F97316);
    --accent-soft: var(--app-soft-dark, #3B1A08);
    --rail-active: var(--app-soft-dark, #3B1A08);
  }
}

/* ---------------------------------------------------------------- shell */
.smdl {
  /* The chrome holds still and the canvas scrolls — the same behaviour the
     fixed rail and topbar gave before, without position: fixed anywhere. */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: grid;
  /* minmax, not a fixed row: detail pages put a crumb + title + meta in the
     heading slot, and a fixed row clips them against the canvas. One-line
     pages still get exactly --smdl-top. */
  grid-template-rows: minmax(var(--smdl-top), auto) 1fr;
  grid-template-columns: var(--smdl-side) minmax(0, 1fr);
  grid-template-areas: "corner top" "side canvas";
  background: var(--canvas);
}
.smdl.is-slim { grid-template-columns: var(--smdl-side-slim) minmax(0, 1fr); }

/* Keyboard users get a direct route past the repeated shell furniture. It is
   visually quiet until focused, then sits above every piece of chrome. */
.smdl-skip-link {
  position: fixed; top: 8px; left: 10px; z-index: 300;
  padding: 8px 12px; border-radius: 8px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(8, 11, 16, .18);
  font-size: 13px; font-weight: 650; text-decoration: none;
  transform: translateY(calc(-100% - 16px)); transition: transform .12s ease;
}
.smdl-skip-link:focus, .smdl-skip-link:focus-visible { transform: none; outline: 2px solid var(--accent); outline-offset: 2px; }
.smdl-canvas:focus { outline: none; }
@media (prefers-reduced-motion: reduce) { .smdl-skip-link { transition: none; } }

/* ---------------------------------------------------------------- corner */
/* The corner is the top of the nav rail, so it shares its surface: one
   continuous column down the left edge, held apart from the canvas and the
   top bar by a hairline rather than by colour. */
.smdl-corner {
  grid-area: corner;
  background: var(--smdl-rail);
  border-right: 1px solid var(--rail-hair);
  border-bottom: 1px solid var(--rail-hair);
  display: flex; align-items: center;
  padding: 0 10px 0 12px;
  position: relative; z-index: 40;
}
.smdl-switch { position: relative; width: 100%; }
/* Borderless at rest — no outline until it is hovered or focused. */
.smdl-switch-btn {
  appearance: none; border: 0; background: transparent; font: inherit; cursor: pointer;
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 6px 8px; border-radius: 10px;
  color: var(--rail-ink-strong); font-size: 13.5px; font-weight: 650; letter-spacing: -.01em;
}
.smdl-switch-btn:hover { background: var(--rail-hover); }
.smdl-switch-btn:focus-visible { outline: 2px solid var(--rail-ink-strong); outline-offset: -2px; }

/* The mark, as authored. Two files — the light canvas and the near-black
   canvas — and the theme decides which one is visible. Nothing is redrawn in
   CSS, so the geometry can only ever come from the logo pack. */
.smdl-markimg { display: inline-flex; flex: none; line-height: 0; }
.smdl-markimg img { width: 100%; height: 100%; display: block; }
.smdl-markimg .mk-d { display: none; }
[data-theme="dark"] .smdl-markimg .mk-l { display: none; }
[data-theme="dark"] .smdl-markimg .mk-d { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .smdl-markimg .mk-l { display: none; }
  :root:not([data-theme="light"]) .smdl-markimg .mk-d { display: block; }
}
/* On the painted rail the canvas is always deep, whatever the page theme is. */
/* The corner mark follows the theme like every other mark. It was pinned to
   the dark-background variant because the rail was painted dark whatever the
   page was doing; the rail is the page's own surface now. */
.smdl-markimg.is-corner { width: 27px; height: 27px; }
.smdl-mark { width: 27px; height: 27px; flex: none; }
.smdl-appname { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smdl-switch-btn .chev { color: var(--rail-quiet); flex: none; }
.smdl.is-slim .smdl-switch-btn { justify-content: center; padding: 6px 0; gap: 0; }
.smdl.is-slim .smdl-appname, .smdl.is-slim .smdl-switch-btn .chev { display: none; }

.smdl-switch-pop {
  position: absolute; top: calc(100% + 6px); left: 0; width: 318px;
  background: var(--surface); border-radius: 14px; padding: 8px; z-index: 60;
  box-shadow: 0 0 0 1px var(--smdl-ring), 0 18px 48px -12px rgba(8, 11, 16, .28);
}
.smdl-switch-pop[hidden] { display: none; }
.smdl-brandrow {
  display: flex; align-items: center; padding: 8px 10px 10px;
  font-weight: 680; letter-spacing: -.02em; font-size: 13px; color: var(--ink);
  box-shadow: inset 0 -1px var(--smdl-hair); margin-bottom: 6px; white-space: nowrap;
}
.smdl-brandrow .bdot { color: var(--accent-ink); }
.smdl-app-item {
  appearance: none; border: 0; background: none; font: inherit; cursor: pointer;
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 8px 10px; border-radius: 10px; color: var(--ink-2);
  font-size: 13px; font-weight: 550; text-decoration: none;
}
.smdl-app-item:hover { background: var(--surface-2); color: var(--ink); }
.smdl-app-item .pm, .smdl-app-item .smdl-markimg { width: 26px; height: 26px; flex: none; }
.smdl-app-item .pm .lit { fill: var(--seat); }
.smdl-app-item > span:not(.smdl-markimg):not(.smdl-soon) { min-width: 0; flex: 1 1 auto; }
.smdl-app-item small { display: block; font-size: 11px; color: var(--ink-3); font-weight: 450; }
.smdl-app-item .check { margin-left: auto; color: var(--accent-ink); }
/* "soon" — the sidebar's badge for a destination that is coming. The app
   switcher has no use for it: a seat that has not shipped is not listed
   there at all, because that menu is a list of places you can go. */
.smdl-side-soon .smdl-soon,
.smdl-app-item .smdl-soon,
.smdl-side > .smdl-soon .soon {
  margin-left: auto; flex: none; font-size: 10.5px; font-weight: 650;
  color: var(--ink-3);
  background: var(--surface-3); border-radius: 999px; padding: 2px 7px;
}
.smdl-switch-sec {
  margin-top: 6px; padding: 12px 10px 4px; box-shadow: inset 0 1px var(--smdl-hair);
  font-size: 10.5px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-3);
}
[data-theme="dark"] .smdl-app-item .pm .lit { fill: var(--seat-dark, var(--seat)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .smdl-app-item .pm .lit { fill: var(--seat-dark, var(--seat)); }
}
.smdl-switch-org {
  margin-top: 6px; box-shadow: inset 0 1px var(--smdl-hair);
  padding: 10px 10px 4px; font-size: 12px; color: var(--ink-3);
}
.smdl-switch-org .orow { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.smdl-switch-org b { color: var(--ink-2); font-weight: 600; }
.smdl-switch-org a {
  display: inline-block; margin: 4px 0 0 22px; font-size: 12px;
  color: var(--accent-ink); font-weight: 550; text-decoration: none; white-space: nowrap;
}

/* ---------------------------------------------------------------- top bar */
/* Three columns so the search field is CENTRED on the window, not merely
   between its neighbours: the heading and the tools each take one flexible
   side and the field takes the middle. */
.smdl-top {
  min-width: 0;
  grid-area: top; display: grid; align-items: center; gap: 10px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px) minmax(0, 1fr);
  padding: 8px 16px; background: var(--canvas); position: relative; z-index: 30;
}
.smdl-top .smdl-heading {
  grid-column: 1; grid-row: 1; min-width: 0; overflow: hidden;
  display: flex; align-items: baseline; gap: 10px;
}
.smdl-top .smdl-heading h1 {
  margin: 0; font-size: 16px; line-height: 22px; font-weight: 650;
  letter-spacing: -.01em; color: var(--ink); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
/* The title never gives way before its own subtitle: the strapline shrinks to
   nothing first, so a page still tells you what it is when the top bar is
   tight. */
.smdl-top .smdl-heading h1 { flex: 0 1 auto; min-width: 0; }
.smdl-top .smdl-heading p { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; margin: 0; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.smdl-tools { grid-column: 3; grid-row: 1; justify-self: end; display: flex; align-items: center; gap: 10px; }
.smdl-tools > .topbar-actions { margin-right: 6px; }
.smdl-iconbtn {
  appearance: none; border: 0; background: transparent; color: var(--ink-2);
  width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
  display: grid; place-items: center; position: relative;
}
.smdl-iconbtn:hover { background: var(--surface-2); color: var(--ink); }
.smdl-avatar {
  width: 30px; height: 30px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--accent); color: #fff; font: inherit; font-size: 11px;
  font-weight: 650; display: grid; place-items: center; overflow: hidden; padding: 0;
}
.smdl-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* New menu */
.smdl-new { position: relative; }
.smdl-new-btn {
  appearance: none; border: 0; background: var(--accent); color: #fff;
  font: inherit; font-size: 13px; font-weight: 600; height: 34px; padding: 0 13px;
  border-radius: 9px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap; transition: filter .12s ease;
}
.smdl-new-btn:hover { filter: brightness(1.06); }
.smdl-new-btn .ic { font-weight: 400; }
.smdl-new-btn.smdl-new-main { text-decoration: none; }

/* Split control: the page's primary create on the left, everything else
   behind the caret. One pill — the container carries the radius and clips both
   halves, so there is no seam, no gap, and no doubled inner corner. The two
   hit targets stay separate; only the divider tells you so. */
/* The container is the POSITIONING context and must never clip: the popup is
   its child. The pill inside is what clips the two button halves into one
   seamless control. These were the same element, so overflow:hidden cut the
   open menu down to a 34px strip — the caret appeared dead while working. */
.smdl-new.has-default { display: inline-flex; position: relative; }
.smdl-new.has-default .smdl-new-pill {
  display: inline-flex; align-items: stretch;
  border-radius: 9px; overflow: hidden; isolation: isolate;
  background: var(--accent);
}
.smdl-new.has-default .smdl-new-btn {
  border-radius: 0; height: 34px; background: transparent; color: #fff;
  transition: background-color .12s ease;
}
.smdl-new.has-default .smdl-new-main { padding: 0 12px; gap: 6px; }
/* The glyphs come from an icon font with no bold face, so inheriting the
   label's 600 makes the browser synthesise one and the mark smears. Keep icons
   at their drawn weight and a step below the 18px used for standalone icons,
   so the plus sits beside 13px text instead of shouting over it. */
.smdl-new.has-default .ic { font-weight: 400; }
.smdl-new.has-default .smdl-new-main .ic { font-size: 16px; opacity: .95; }
.smdl-new.has-default .smdl-new-caret {
  padding: 0 7px; box-shadow: inset 1px 0 rgba(0, 0, 0, .18);
}
.smdl-new.has-default .smdl-new-caret .ic { font-size: 15px; }
/* Feedback lands on the half you are actually pointing at. */
.smdl-new.has-default .smdl-new-btn:hover { background: rgba(0, 0, 0, .14); }
.smdl-new.has-default .smdl-new-btn:active { background: rgba(0, 0, 0, .22); }
.smdl-new.has-default .smdl-new-btn:focus-visible {
  outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: 9px;
}
[data-theme="dark"] .smdl-new.has-default .smdl-new-btn { color: #0b1020; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .smdl-new.has-default .smdl-new-btn { color: #0b1020; }
}

/* The menu the caret opens.
   This had no styles at all. The trigger worked, the JS removed [hidden] on
   click, and an unstyled static div appeared inside a flex toolbar — nothing
   the eye could find, so the caret read as dead. Mirrors .smdl-switch-pop,
   which is the same control on the other side of the shell, but anchored to
   the right edge because this one sits at the end of the top bar and a
   left-anchored panel would run off screen. */
.smdl-new-pop {
  position: absolute; top: calc(100% + 6px); right: 0; width: 296px;
  background: var(--surface); border-radius: 14px; padding: 8px; z-index: 60;
  box-shadow: 0 0 0 1px var(--smdl-ring), 0 18px 48px -12px rgba(8, 11, 16, .28);
  max-height: min(70vh, 560px); overflow-y: auto;
}
.smdl-new-pop[hidden] { display: none; }
.smdl-new-sec {
  padding: 8px 10px 4px; font-size: 11px; font-weight: 640; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-3);
}
.smdl-new-sec + .smdl-new-item { margin-top: 0; }
.smdl-new-sec:not(:first-child) {
  margin-top: 6px; box-shadow: inset 0 1px var(--smdl-hair); padding-top: 12px;
}
.smdl-new-item {
  display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px;
  border-radius: 10px; color: var(--ink-2); font-size: 13px; font-weight: 550;
  text-decoration: none;
}
.smdl-new-item:hover { background: var(--surface-2); color: var(--ink); }
.smdl-new-item:focus-visible {
  outline: 2px solid var(--accent-ink); outline-offset: -2px; background: var(--surface-2);
}
.smdl-new-item .ic { font-size: 17px; font-weight: 400; color: var(--ink-3); margin-top: 1px; }
.smdl-new-item:hover .ic { color: var(--accent-ink); }
.smdl-new-item b { display: block; font-weight: 600; color: inherit; }
.smdl-new-item small {
  display: block; margin-top: 1px; font-size: 11px; font-weight: 450;
  color: var(--ink-3); line-height: 1.4;
}
@media (prefers-reduced-motion: reduce) {
  .smdl-new.has-default .smdl-new-btn { transition: none; }
}
.smdl-new-pop {
  position: absolute; top: calc(100% + 8px); right: 0; width: 340px;
  background: var(--surface); border-radius: 14px; padding: 8px; z-index: 60;
  max-height: 70vh; overflow-y: auto;
  box-shadow: 0 0 0 1px var(--smdl-ring), 0 18px 48px -12px rgba(8, 11, 16, .28);
}
.smdl-new-pop[hidden] { display: none; }
.smdl-new-sec {
  font-size: 10.5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-3); padding: 9px 10px 3px;
}
.smdl-new-item {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left;
  border: 0; background: none; font: inherit; border-radius: 9px; padding: 7px 10px;
  cursor: pointer; color: var(--ink); text-decoration: none;
}
.smdl-new-item:hover { background: var(--surface-2); }
.smdl-new-item .ic { color: var(--ink-3); margin-top: 1px; flex: none; }
.smdl-new-item b { display: block; font-size: 13px; font-weight: 600; }
.smdl-new-item small { display: block; font-size: 11.5px; color: var(--ink-3); line-height: 15px; }

/* ---------------------------------------------------------------- sidebar */
/* The seat colour becomes the room: the rail is painted full-height in the
   app's own deep cut, in both themes, with white text and icons on it. The
   working canvas stays calm — colour belongs to chrome and accents only. */
.smdl-side {
  grid-area: side; background: var(--smdl-rail); padding: 10px 10px 12px;
  border-right: 1px solid var(--rail-hair);
  display: flex; flex-direction: column; gap: 2px;
  overflow-y: auto; overflow-x: hidden;
}
/* Section labels separate the platform rail from the app's own destinations.
   There is deliberately NO rule above the first one. */
.smdl-cap {
  font-size: 10.5px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase;
  color: var(--rail-quiet); padding: 14px 10px 4px; white-space: nowrap; margin: 0;
}
.smdl.is-slim .smdl-cap {
  padding: 0; margin: 7px 10px; height: 0; overflow: hidden;
  box-shadow: inset 0 1px var(--rail-hair);
}
.smdl.is-slim .smdl-cap.is-first { box-shadow: none; margin: 11px 10px 3px; }
.smdl-side a, .smdl-side-soon, .smdl-side > .smdl-soon {
  position: relative; display: flex; align-items: center; gap: 10px;
  height: 34px; padding: 0 10px; border-radius: 9px;
  color: var(--rail-ink); text-decoration: none; font-size: 13.5px; font-weight: 550;
  white-space: nowrap;
}
.smdl.is-slim .smdl-side a,
.smdl.is-slim .smdl-side-soon,
.smdl.is-slim .smdl-side > .smdl-soon { justify-content: center; padding: 0; width: 44px; margin: 0 auto; }
.smdl-side a:hover { background: var(--rail-hover); color: var(--rail-ink-strong); }
.smdl-side a:focus-visible { outline: 2px solid var(--rail-ink-strong); outline-offset: -2px; }
/* The selected destination is one calm filled row. Weight, fill, and the
   current-page semantic in the markup carry the state without a decorative
   vertical rail competing with the icon. */
.smdl-side a.is-active {
  background: var(--rail-active); color: var(--accent-ink); font-weight: 620;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent);
}
.smdl-side a .ic, .smdl-side-soon .ic, .smdl-side > .smdl-soon .ic { flex: none; opacity: .92; }
.smdl-side a .lbl, .smdl-side-soon .lbl, .smdl-side > .smdl-soon .lbl { overflow: hidden; text-overflow: ellipsis; }
/* Hidden to the eye, still there for a screen reader.
   `display: none` took the label out of the accessibility TREE as well as the
   layout, so every rail link in a collapsed sidebar announced as a bare "link"
   with no name — and the icon beside it is aria-hidden, so there was nothing
   else to fall back on. The rail is collapsed by default for anyone who has
   ever collapsed it, and for every viewport under 900px. */
.smdl.is-slim .smdl-side a .lbl,
.smdl.is-slim .smdl-side-soon .lbl,
.smdl.is-slim .smdl-side > .smdl-soon .lbl {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
/* A rail seat for something that does not exist yet. Not a link, so it cannot
   take anyone nowhere. */
.smdl-side-soon, .smdl-side > .smdl-soon { color: var(--rail-quiet); cursor: default; }
.smdl-side-soon .smdl-soon, .smdl-side > .smdl-soon .soon {
  background: var(--rail-hover); color: var(--rail-quiet);
}
.smdl.is-slim .smdl-side-soon .smdl-soon,
.smdl.is-slim .smdl-side > .smdl-soon .soon { display: none; }
.smdl-badge {
  margin-left: auto; font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums;
  background: var(--rail-active); color: var(--rail-ink-strong); border-radius: 999px; padding: 1px 7px;
}
.smdl-side a.is-active .smdl-badge { background: var(--accent); color: var(--on-accent, #fff); }
.smdl.is-slim .smdl-badge { display: none; }
.smdl-side a .dot2 {
  position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); border: 1.5px solid var(--smdl-rail); display: none;
}
.smdl.is-slim .smdl-side a[data-count] .dot2 { display: block; }
.smdl-spring, .smdl-side-spring { flex: 1 1 auto; }
.smdl-side-toggle {
  appearance: none; border: 0; background: transparent; color: var(--rail-quiet);
  border-radius: 9px; height: 32px; margin: 8px 0 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-size: 12px; font-weight: 550;
}
.smdl-side-toggle:hover { background: var(--rail-hover); color: var(--rail-ink-strong); }
.smdl-side-toggle .ic { transition: transform .15s; }
.smdl.is-slim .smdl-side-toggle .ic { transform: rotate(180deg); }
.smdl.is-slim .smdl-side-toggle .lbl { display: none; }
@media (prefers-reduced-motion: reduce) { .smdl-side-toggle .ic { transition: none; } }

/* floating tooltip for slim mode + icon buttons */
.smdl-tip {
  position: fixed; background: #191c22; color: #fff; font-size: 11.5px; font-weight: 550;
  line-height: 15px; padding: 5px 9px; border-radius: 6px; white-space: nowrap;
  pointer-events: none; z-index: 200; display: none;
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .45);
}

/* ---------------------------------------------------------------- canvas */
.smdl-canvas { grid-area: canvas; min-width: 0; overflow-y: auto; overflow-x: hidden; padding: 6px 28px 44px; }
.smdl-canvas:has(> .section-nav) { padding-top: 0; }
.smdl-canvas .workspace, .smdl-canvas .content-inner { padding: 0; margin: 0; }
.smdl-canvas > .section-nav { margin: 0 0 18px; }

/* Page tabs (Overview · Website · Reports). The top bar is a separate grid row,
   so this strip can stick to the top of the scrolling canvas with no offset and
   no chance of covering the top bar or sidebar. */
.smdl-canvas .section-nav {
  position: sticky; inset: auto; top: 0; height: auto; z-index: 20; overflow: visible;
  display: flex; gap: 22px; box-shadow: inset 0 -1px var(--smdl-hair);
  background: var(--canvas); border: 0; padding: 0; margin: 0 0 18px;
}
.smdl-canvas .section-nav-link {
  position: static; min-height: 0;
  padding: 7px 2px 10px; font-size: 13.5px; font-weight: 600;
  color: var(--ink-3); text-decoration: none; border: 0; background: none; border-radius: 0;
}
.smdl-canvas .section-nav-link::after { display: none; }
.smdl-canvas .section-nav-link:hover { color: var(--ink); background: none; }
.smdl-canvas .section-nav-link.is-active {
  color: var(--accent-ink); background: none; box-shadow: inset 0 -2px var(--accent);
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 900px) {
  .smdl, .smdl.is-slim { grid-template-columns: var(--smdl-side-slim) minmax(0, 1fr); }
  .smdl-cap { padding: 0; margin: 7px 10px; height: 0; overflow: hidden; box-shadow: inset 0 1px var(--smdl-hair); }
  .smdl-cap.is-first { box-shadow: none; margin: 11px 10px 3px; }
  .smdl-side a, .smdl-side > .smdl-soon { justify-content: center; padding: 0; width: 44px; margin: 0 auto; }
  .smdl-side a .lbl, .smdl-side > .smdl-soon .lbl, .smdl-side > .smdl-soon .soon, .smdl-badge { display: none; }
  .smdl-side a[data-count] .dot2 { display: block; }
  .smdl-switch-btn { justify-content: center; padding: 6px 0; gap: 0; }
  .smdl-appname { display: none; }
  /* This must outrank the later generic .ic[class*="icon-"] display rule. */
  .smdl .smdl-switch-btn .ic.chev { display: none; }
  .smdl-side-toggle { display: none; }
  .smdl-canvas { padding: 4px 14px 36px; }
  .smdl-top {
    grid-template-columns: minmax(0, 1fr) minmax(160px, 320px) max-content;
    padding: 0 12px;
  }
  .smdl-top .smdl-heading p { display: none; }
  .smdl-search { grid-column: 2; grid-row: 1; width: 100%; }
  .smdl-tools { grid-column: 3; grid-row: 1; }
}

@media (max-width: 520px) {
  .smdl-tools { gap: 6px; }
  .smdl-tools > .topbar-actions { margin-right: 2px; }
}

/* ---------------------------------------------------------------------------
   Account surface inside the shell
   The sidebar owns section navigation and the top bar owns the page title, so
   the two controls the standalone account layout carried for those jobs — the
   segmented switcher and the in-page <h1> — stand down on wide screens. Both
   come back below 900px, where the sidebar is icons only.
--------------------------------------------------------------------------- */
.smdl-canvas .account-shell { max-width: 980px; margin: 0; padding: 4px 0 56px; }
.smdl-canvas .account-head { margin-bottom: 2px; }
.smdl-canvas .account-head > .account-kicker,
.smdl-canvas .account-head > .muted,
.smdl-canvas .account-head > h1 { display: none; }
.smdl-canvas .account-head:not(:has(> :not(.account-kicker):not(h1):not(.muted))) { display: none; }
.smdl-canvas .account-switcher { display: none; }

/* Focused single-purpose steps (naming an organization, authorizing a device)
   drop the sidebar: the brand stays, the task gets the full canvas. */
.smdl.is-focus {
  grid-template-columns: max-content minmax(0, 1fr);
  grid-template-areas: "corner top" "canvas canvas";
}
.smdl.is-focus .smdl-corner { padding-right: 18px; }
.smdl.is-focus .smdl-side { display: none; }

/* Wide in-canvas strips scroll inside themselves on small screens — the page
   never scrolls sideways. */
@media (max-width: 760px) {
  .smdl-canvas .section-nav {
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
  .smdl-canvas .section-nav::-webkit-scrollbar { display: none; }
  .smdl-canvas .section-nav-link { flex: none; white-space: nowrap; }
  .smdl-canvas .tk-toolbar-actions { flex-wrap: wrap; row-gap: 8px; }
  .smdl-canvas .segmented { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .smdl-canvas .segmented::-webkit-scrollbar { display: none; }
  .smdl-canvas table { display: block; overflow-x: auto; }
  .smdl-canvas .product-grid { grid-template-columns: minmax(0, 1fr); }
  .smdl-canvas .product-grid > * { min-width: 0; }
  .smdl-canvas .prod-head { flex-wrap: wrap; row-gap: 4px; }
  .smdl-canvas .prod-head > * { min-width: 0; }
  .smdl-canvas .prod-meta > * { max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 900px) {
  .smdl-canvas .account-head { display: block; }
  .smdl-canvas .account-head > h1 { display: block; }
  .smdl-canvas .account-switcher { display: inline-flex; }
}

/* ---------------------------------------------------------------------------
   One brand, one set of control metrics.

   Every interactive control in every app — CORE's .button, the products'
   .btn, the chips, the pills, the segmented switchers — reads these tokens
   instead of carrying its own numbers. The apps differ by accent color on
   purpose; they must never differ by geometry.
   ------------------------------------------------------------------------ */
:root {
  --ctl-h: 34px;        /* control height — matches the New button and topbar icons */
  --ctl-h-sm: 28px;
  --ctl-radius: 9px;
  --ctl-fs: 13px;
  --ctl-fw: 620;
  --chip-h: 22px;
  --chip-fs: 11.5px;
  --chip-fw: 650;
  --chip-pad: 9px;
}

/* ---------------------------------------------------------------------------
   Icons, drawn — not typed.

   The lucide glyph FONT bakes its 2px stroke into the letterforms, which is
   why every icon in the chrome read heavier than the type beside it, and no
   CSS could thin it. These rules replace the font glyph with the same lucide
   artwork as an alpha mask at a 1.5 stroke, colored by currentColor, without
   touching a single call site: any `<i class="ic icon-x">` in any of the
   three apps picks this up on specificity alone. Names without a rule here
   keep the font glyph, so a missing icon degrades to heavy, never to blank.
   ------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------------
   The segmented control — one definition, one set of numbers.

   There were three, in one stylesheet, and they overrode each other: a pill
   item at radius 999 with a solid accent fill; a square track at radius 6 with
   items at radius 4 and a raised selection; and the map's own third set. The
   later rule won the container and the earlier one won the items, so a fully
   rounded pill sat inside a 6px box. That mismatch is what reads as "harsh
   square buttons that don't belong".

   Two rules settle it, and both come from how Apple and Google actually build
   these:

   1. SELECTION IS ELEVATION, NOT COLOUR. Apple's segmented control marks the
      chosen segment by lifting it — a light surface, a hairline, a soft shadow
      — over a recessed track. Material 3 tints with a soft secondary container,
      never the full-saturation action colour. Colour here means "this is the
      thing to press"; a filter is not an action. A solid orange "All" said the
      loudest thing on the page about the least important decision on it.

   2. RADII ARE CONCENTRIC. The track radius is the item radius plus the track
      padding (10 = 7 + 3), so the curves are parallel instead of a round thing
      fighting a square one. This is the same rule Apple's continuous corners
      follow and the reason nested corners look wrong when both are set by hand.

   Metrics: 34px overall to match --ctl-h, which is the search field's height,
   so a control and a field on the same row line up without anybody nudging.
--------------------------------------------------------------------------- */
.smdl-seg {
  display: inline-flex; align-items: center; gap: 2px;
  height: var(--ctl-h, 34px); padding: 3px;
  border: 0; border-radius: 10px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--smdl-hair);
}
.smdl-seg > * {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 28px; padding: 0 11px; border: 0; border-radius: 7px;
  background: none; -webkit-appearance: none; appearance: none; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1;
  color: var(--ink-2); text-decoration: none; white-space: nowrap;
  transition: background .14s ease, color .14s ease, box-shadow .14s ease;
}
/* Hover moves the ink only. A fill here would read as a second selection. */
.smdl-seg > *:hover { color: var(--ink); }
.smdl-seg > *:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
.smdl-seg > .is-active,
.smdl-seg > .active,
.smdl-seg > [aria-selected="true"],
.smdl-seg > [aria-pressed="true"] {
  background: var(--card);
  color: var(--ink);
  font-weight: 650;
  box-shadow: 0 0 0 1px var(--smdl-hair), 0 1px 2px rgba(16, 24, 40, .06);
}
.smdl-seg > * > .ic { color: currentColor; }
/* A count riding along with a label — quieter than the label, never a badge
   with its own fill, which would be a third weight inside one small control. */
.smdl-seg .seg-count { color: var(--ink-3); font-weight: 600; font-variant-numeric: tabular-nums; }
.smdl-seg > .is-active .seg-count { color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) {
  .smdl-seg > * { transition: none; }
}

/* ---------------------------------------------------------------------------
   Icon scale — ONE definition, in the shared shell.

   This file is what makes the applications look like one product, and it never
   said how big an icon is. So each host stylesheet answered for itself: CORE
   pinned .ic to 18px, the products let it inherit the label's font-size and got
   13.5px in the rail. The same glyph was a third larger in one application than
   in another, and the artwork is stroked at 1.5 on a 24 grid, so size IS
   weight: 18px renders a 1.125px stroke and 13.5px renders 0.84px. What read as
   "CORE's icons are bold" was CORE's icons being bigger.

   16px is the size the artwork was drawn for: 1.5 x 16/24 lands the stroke on
   exactly 1.0px, so it sits on the pixel grid instead of straddling it. Sizes
   are a short scale rather than a free number — every icon in the family is one
   of these four, and they are set together (width, height, font-size) because
   the mask reads the box and the font reads the em.
--------------------------------------------------------------------------- */
:root {
  --icn-sm: 14px;   /* dense metadata, table cells, captions */
  --icn: 16px;      /* the default: rails, buttons, inline with body text */
  --icn-md: 20px;   /* section headers, empty-state marks */
  --icn-lg: 28px;   /* feature marks, large empty states */
}
.ic { width: var(--icn); height: var(--icn); font-size: var(--icn); }
.ic.ic-sm { width: var(--icn-sm); height: var(--icn-sm); font-size: var(--icn-sm); }
.ic.ic-md { width: var(--icn-md); height: var(--icn-md); font-size: var(--icn-md); }
.ic.ic-lg { width: var(--icn-lg); height: var(--icn-lg); font-size: var(--icn-lg); }
/* The rail is the one place the size was visibly different between apps. It
   takes the default explicitly so a host stylesheet's font-size cannot set it
   by accident, which is exactly how the two ended up 4.5px apart. */
.smdl-side a .ic, .smdl-side-soon .ic,
.smdl-rail .ic, .smdl-top .ic {
  width: var(--icn); height: var(--icn); font-size: var(--icn);
}
.ic[class*="icon-"] { display: inline-block; line-height: 1; vertical-align: -0.125em; }
.ic.icon-activity::before,
.ic.icon-arrow-left::before,
.ic.icon-arrow-right::before,
.ic.icon-arrow-up-right::before,
.ic.icon-bell::before,
.ic.icon-bold::before,
.ic.icon-book-open::before,
.ic.icon-boxes::before,
.ic.icon-braces::before,
.ic.icon-briefcase-business::before,
.ic.icon-bug::before,
.ic.icon-building-2::before,
.ic.icon-chart-line::before,
.ic.icon-chart-no-axes-column::before,
.ic.icon-chart-no-axes-combined::before,
.ic.icon-check::before,
.ic.icon-chevron-down::before,
.ic.icon-chevron-right::before,
.ic.icon-circle-alert::before,
.ic.icon-circle-check::before,
.ic.icon-clipboard-list::before,
.ic.icon-clock-3::before,
.ic.icon-cloud::before,
.ic.icon-cloud-cog::before,
.ic.icon-cloud-upload::before,
.ic.icon-columns-2::before,
.ic.icon-copy::before,
.ic.icon-cpu::before,
.ic.icon-credit-card::before,
.ic.icon-download::before,
.ic.icon-eraser::before,
.ic.icon-external-link::before,
.ic.icon-eye::before,
.ic.icon-files::before,
.ic.icon-filter::before,
.ic.icon-fingerprint::before,
.ic.icon-flask-conical::before,
.ic.icon-funnel::before,
.ic.icon-gauge::before,
.ic.icon-glasses::before,
.ic.icon-globe::before,
.ic.icon-grip-vertical::before,
.ic.icon-hard-drive::before,
.ic.icon-history::before,
.ic.icon-image::before,
.ic.icon-image-plus::before,
.ic.icon-house::before,
.ic.icon-inbox::before,
.ic.icon-italic::before,
.ic.icon-key-round::before,
.ic.icon-layers::before,
.ic.icon-layout-dashboard::before,
.ic.icon-layout-grid::before,
.ic.icon-layout-template::before,
.ic.icon-life-buoy::before,
.ic.icon-link-2::before,
.ic.icon-list::before,
.ic.icon-list-checks::before,
.ic.icon-list-ordered::before,
.ic.icon-list-plus::before,
.ic.icon-lock-keyhole::before,
.ic.icon-log-in::before,
.ic.icon-log-out::before,
.ic.icon-map::before,
.ic.icon-megaphone::before,
.ic.icon-monitor::before,
.ic.icon-monitor-up::before,
.ic.icon-moon::before,
.ic.icon-move-vertical::before,
.ic.icon-palette::before,
.ic.icon-panel-left-close::before,
.ic.icon-pencil::before,
.ic.icon-play::before,
.ic.icon-plug-zap::before,
.ic.icon-plus::before,
.ic.icon-quote::before,
.ic.icon-radio-tower::before,
.ic.icon-receipt::before,
.ic.icon-redo-2::before,
.ic.icon-refresh-cw::before,
.ic.icon-rocket::before,
.ic.icon-save::before,
.ic.icon-scale::before,
.ic.icon-scan::before,
.ic.icon-scroll-text::before,
.ic.icon-circle-check-mark::before,
.ic.icon-trending-up::before,
.ic.icon-trending-down::before,
.ic.icon-minus::before,
.ic.icon-circle-dashed::before,
.ic.icon-shuffle::before,
.ic.icon-github::before,
.ic.icon-search::before,
.ic.icon-send::before,
.ic.icon-server::before,
.ic.icon-settings::before,
.ic.icon-settings-2::before,
.ic.icon-shield-alert::before,
.ic.icon-shield-check::before,
.ic.icon-shopping-cart::before,
.ic.icon-smartphone::before,
.ic.icon-sparkles::before,
.ic.icon-square-pen::before,
.ic.icon-sun::before,
.ic.icon-tablet::before,
.ic.icon-tag::before,
.ic.icon-text::before,
.ic.icon-ticket::before,
.ic.icon-trash-2::before,
.ic.icon-triangle-alert::before,
.ic.icon-tv::before,
.ic.icon-type::before,
.ic.icon-underline::before,
.ic.icon-undo-2::before,
.ic.icon-user-check::before,
.ic.icon-user-plus::before,
.ic.icon-user-round::before,
.ic.icon-users::before,
.ic.icon-users-round::before,
.ic.icon-wand-sparkles::before,
.ic.icon-watch::before,
.ic.icon-x::before {
  content: "" !important;
  display: block;
  width: 1em; height: 1em;
  background: currentColor;
  -webkit-mask: var(--icn) no-repeat center / contain;
  mask: var(--icn) no-repeat center / contain;
}
.icon-activity::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M22%2012h-2.48a2%202%200%200%200-1.93%201.46l-2.35%208.36a.25.25%200%200%201-.48%200L9.24%202.18a.25.25%200%200%200-.48%200l-2.35%208.36A2%202%200%200%201%204.49%2012H2%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-arrow-left::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22m12%2019-7-7%207-7%22%20%2F%3E%20%3Cpath%20d%3D%22M19%2012H5%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-arrow-right::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M5%2012h14%22%20%2F%3E%20%3Cpath%20d%3D%22m12%205%207%207-7%207%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-arrow-up-right::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M7%207h10v10%22%20%2F%3E%20%3Cpath%20d%3D%22M7%2017%2017%207%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-bell::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M10.268%2021a2%202%200%200%200%203.464%200%22%20%2F%3E%20%3Cpath%20d%3D%22M3.262%2015.326A1%201%200%200%200%204%2017h16a1%201%200%200%200%20.74-1.673C19.41%2013.956%2018%2012.499%2018%208A6%206%200%200%200%206%208c0%204.499-1.411%205.956-2.738%207.326%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-bold::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M6%2012h9a4%204%200%200%201%200%208H7a1%201%200%200%201-1-1V5a1%201%200%200%201%201-1h7a4%204%200%200%201%200%208%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-book-open::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M12%205v16%22%20%2F%3E%20%3Cpath%20d%3D%22M20.001%2019A2%202%200%200022%2017V5a2%202%200%2000-1.999-2L16%203.002A5%205%200%200012%205a5%205%200%2000-4-2H4a2%202%200%2000-2%202v12a2%202%200%20001.999%202H8a5%205%200%20014%202%205%205%200%20014-2z%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-boxes::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M2.97%2012.92A2%202%200%200%200%202%2014.63v3.24a2%202%200%200%200%20.97%201.71l3%201.8a2%202%200%200%200%202.06%200L12%2019v-5.5l-5-3-4.03%202.42Z%22%20%2F%3E%20%3Cpath%20d%3D%22m7%2016.5-4.74-2.85%22%20%2F%3E%20%3Cpath%20d%3D%22m7%2016.5%205-3%22%20%2F%3E%20%3Cpath%20d%3D%22M7%2016.5v5.17%22%20%2F%3E%20%3Cpath%20d%3D%22M12%2013.5V19l3.97%202.38a2%202%200%200%200%202.06%200l3-1.8a2%202%200%200%200%20.97-1.71v-3.24a2%202%200%200%200-.97-1.71L17%2010.5l-5%203Z%22%20%2F%3E%20%3Cpath%20d%3D%22m17%2016.5-5-3%22%20%2F%3E%20%3Cpath%20d%3D%22m17%2016.5%204.74-2.85%22%20%2F%3E%20%3Cpath%20d%3D%22M17%2016.5v5.17%22%20%2F%3E%20%3Cpath%20d%3D%22M7.97%204.42A2%202%200%200%200%207%206.13v4.37l5%203%205-3V6.13a2%202%200%200%200-.97-1.71l-3-1.8a2%202%200%200%200-2.06%200l-3%201.8Z%22%20%2F%3E%20%3Cpath%20d%3D%22M12%208%207.26%205.15%22%20%2F%3E%20%3Cpath%20d%3D%22m12%208%204.74-2.85%22%20%2F%3E%20%3Cpath%20d%3D%22M12%2013.5V8%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-braces::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M8%203H7a2%202%200%200%200-2%202v5a2%202%200%200%201-2%202%202%202%200%200%201%202%202v5c0%201.1.9%202%202%202h1%22%20%2F%3E%20%3Cpath%20d%3D%22M16%2021h1a2%202%200%200%200%202-2v-5c0-1.1.9-2%202-2a2%202%200%200%201-2-2V5a2%202%200%200%200-2-2h-1%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-briefcase-business::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M12%2012h.01%22%20%2F%3E%20%3Cpath%20d%3D%22M16%206V4a2%202%200%200%200-2-2h-4a2%202%200%200%200-2%202v2%22%20%2F%3E%20%3Cpath%20d%3D%22M22%2013a18.15%2018.15%200%200%201-20%200%22%20%2F%3E%20%3Crect%20width%3D%2220%22%20height%3D%2214%22%20x%3D%222%22%20y%3D%226%22%20rx%3D%222%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-bug::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M12%2020v-9%22%20%2F%3E%20%3Cpath%20d%3D%22M14%207a4%204%200%200%201%204%204v3a6%206%200%200%201-12%200v-3a4%204%200%200%201%204-4z%22%20%2F%3E%20%3Cpath%20d%3D%22M14.12%203.88%2016%202%22%20%2F%3E%20%3Cpath%20d%3D%22M21%2021a4%204%200%200%200-3.81-4%22%20%2F%3E%20%3Cpath%20d%3D%22M21%205a4%204%200%200%201-3.55%203.97%22%20%2F%3E%20%3Cpath%20d%3D%22M22%2013h-4%22%20%2F%3E%20%3Cpath%20d%3D%22M3%2021a4%204%200%200%201%203.81-4%22%20%2F%3E%20%3Cpath%20d%3D%22M3%205a4%204%200%200%200%203.55%203.97%22%20%2F%3E%20%3Cpath%20d%3D%22M6%2013H2%22%20%2F%3E%20%3Cpath%20d%3D%22m8%202%201.88%201.88%22%20%2F%3E%20%3Cpath%20d%3D%22M9%207.13V6a3%203%200%201%201%206%200v1.13%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-building-2::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M10%2012h4%22%20%2F%3E%20%3Cpath%20d%3D%22M10%208h4%22%20%2F%3E%20%3Cpath%20d%3D%22M14%2021v-3a2%202%200%200%200-4%200v3%22%20%2F%3E%20%3Cpath%20d%3D%22M6%2010H4a2%202%200%200%200-2%202v7a2%202%200%200%200%202%202h16a2%202%200%200%200%202-2V9a2%202%200%200%200-2-2h-2%22%20%2F%3E%20%3Cpath%20d%3D%22M6%2021V5a2%202%200%200%201%202-2h8a2%202%200%200%201%202%202v16%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-chart-line::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M3%203v16a2%202%200%200%200%202%202h16%22%20%2F%3E%20%3Cpath%20d%3D%22m19%209-5%205-4-4-3%203%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-chart-no-axes-column::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M5%2021v-6%22%20%2F%3E%20%3Cpath%20d%3D%22M12%2021V3%22%20%2F%3E%20%3Cpath%20d%3D%22M19%2021V9%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-chart-no-axes-combined::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M12%2016v5%22%20%2F%3E%20%3Cpath%20d%3D%22M16%2014.639V21%22%20%2F%3E%20%3Cpath%20d%3D%22M20%2010.656V21%22%20%2F%3E%20%3Cpath%20d%3D%22m22%203-8.646%208.646a.5.5%200%200%201-.708%200L9.354%208.354a.5.5%200%200%200-.707%200L2%2015%22%20%2F%3E%20%3Cpath%20d%3D%22M4%2018.463V21%22%20%2F%3E%20%3Cpath%20d%3D%22M8%2014.656V21%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-check::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-chevron-down::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-chevron-right::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22m9%2018%206-6-6-6%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-circle-alert::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%20%2F%3E%20%3Cline%20x1%3D%2212%22%20x2%3D%2212%22%20y1%3D%228%22%20y2%3D%2212%22%20%2F%3E%20%3Cline%20x1%3D%2212%22%20x2%3D%2212.01%22%20y1%3D%2216%22%20y2%3D%2216%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-circle-check::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%20%2F%3E%20%3Cpath%20d%3D%22m9%2012%202%202%204-4%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-clipboard-list::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22%20%2F%3E%20%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22%20%2F%3E%20%3Cpath%20d%3D%22M12%2011h4%22%20%2F%3E%20%3Cpath%20d%3D%22M12%2016h4%22%20%2F%3E%20%3Cpath%20d%3D%22M8%2011h.01%22%20%2F%3E%20%3Cpath%20d%3D%22M8%2016h.01%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-clock-3::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%20%2F%3E%20%3Cpath%20d%3D%22M12%206v6h4%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-cloud::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M17.5%2019H9a7%207%200%201%201%206.71-9h1.79a4.5%204.5%200%201%201%200%209Z%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-cloud-cog::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22m10.852%2019.772-.383.924%22%20%2F%3E%20%3Cpath%20d%3D%22m13.148%2014.228.383-.923%22%20%2F%3E%20%3Cpath%20d%3D%22M13.148%2019.772a3%203%200%201%200-2.296-5.544l-.383-.923%22%20%2F%3E%20%3Cpath%20d%3D%22m13.53%2020.696-.382-.924a3%203%200%201%201-2.296-5.544%22%20%2F%3E%20%3Cpath%20d%3D%22m14.772%2015.852.923-.383%22%20%2F%3E%20%3Cpath%20d%3D%22m14.772%2018.148.923.383%22%20%2F%3E%20%3Cpath%20d%3D%22M4.2%2015.1a7%207%200%201%201%209.93-9.858A7%207%200%200%201%2015.71%208h1.79a4.5%204.5%200%200%201%202.5%208.2%22%20%2F%3E%20%3Cpath%20d%3D%22m9.228%2015.852-.923-.383%22%20%2F%3E%20%3Cpath%20d%3D%22m9.228%2018.148-.923.383%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-cloud-upload::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M12%2013v8%22%20%2F%3E%20%3Cpath%20d%3D%22M4%2014.899A7%207%200%201%201%2015.71%208h1.79a4.5%204.5%200%200%201%202.5%208.242%22%20%2F%3E%20%3Cpath%20d%3D%22m8%2017%204-4%204%204%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-columns-2::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20width%3D%2218%22%20height%3D%2218%22%20x%3D%223%22%20y%3D%223%22%20rx%3D%222%22%20%2F%3E%20%3Cpath%20d%3D%22M12%203v18%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-copy::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20x%3D%228%22%20y%3D%228%22%20rx%3D%222%22%20ry%3D%222%22%20%2F%3E%20%3Cpath%20d%3D%22M4%2016c-1.1%200-2-.9-2-2V4c0-1.1.9-2%202-2h10c1.1%200%202%20.9%202%202%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-cpu::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M12%2020v2%22%20%2F%3E%20%3Cpath%20d%3D%22M12%202v2%22%20%2F%3E%20%3Cpath%20d%3D%22M17%2020v2%22%20%2F%3E%20%3Cpath%20d%3D%22M17%202v2%22%20%2F%3E%20%3Cpath%20d%3D%22M2%2012h2%22%20%2F%3E%20%3Cpath%20d%3D%22M2%2017h2%22%20%2F%3E%20%3Cpath%20d%3D%22M2%207h2%22%20%2F%3E%20%3Cpath%20d%3D%22M20%2012h2%22%20%2F%3E%20%3Cpath%20d%3D%22M20%2017h2%22%20%2F%3E%20%3Cpath%20d%3D%22M20%207h2%22%20%2F%3E%20%3Cpath%20d%3D%22M7%2020v2%22%20%2F%3E%20%3Cpath%20d%3D%22M7%202v2%22%20%2F%3E%20%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%2216%22%20height%3D%2216%22%20rx%3D%222%22%20%2F%3E%20%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%228%22%20height%3D%228%22%20rx%3D%221%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-credit-card::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20width%3D%2220%22%20height%3D%2214%22%20x%3D%222%22%20y%3D%225%22%20rx%3D%222%22%20%2F%3E%20%3Cline%20x1%3D%222%22%20x2%3D%2222%22%20y1%3D%2210%22%20y2%3D%2210%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-download::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M12%2015V3%22%20%2F%3E%20%3Cpath%20d%3D%22M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%22%20%2F%3E%20%3Cpath%20d%3D%22m7%2010%205%205%205-5%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-eraser::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M21%2021H8a2%202%200%200%201-1.42-.587l-3.994-3.999a2%202%200%200%201%200-2.828l10-10a2%202%200%200%201%202.829%200l5.999%206a2%202%200%200%201%200%202.828L12.834%2021%22%20%2F%3E%20%3Cpath%20d%3D%22m5.082%2011.09%208.828%208.828%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-external-link::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M15%203h6v6%22%20%2F%3E%20%3Cpath%20d%3D%22M10%2014%2021%203%22%20%2F%3E%20%3Cpath%20d%3D%22M18%2013v6a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V8a2%202%200%200%201%202-2h6%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-eye::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M2.062%2012.348a1%201%200%200%201%200-.696%2010.75%2010.75%200%200%201%2019.876%200%201%201%200%200%201%200%20.696%2010.75%2010.75%200%200%201-19.876%200%22%20%2F%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-files::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M15%202h-4a2%202%200%200%200-2%202v11a2%202%200%200%200%202%202h8a2%202%200%200%200%202-2V8%22%20%2F%3E%20%3Cpath%20d%3D%22M16.706%202.706A2.4%202.4%200%200%200%2015%202v5a1%201%200%200%200%201%201h5a2.4%202.4%200%200%200-.706-1.706z%22%20%2F%3E%20%3Cpath%20d%3D%22M5%207a2%202%200%200%200-2%202v11a2%202%200%200%200%202%202h8a2%202%200%200%200%201.732-1%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-filter::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M10%2020a1%201%200%200%200%20.553.895l2%201A1%201%200%200%200%2014%2021v-7a2%202%200%200%201%20.517-1.341L21.74%204.67A1%201%200%200%200%2021%203H3a1%201%200%200%200-.742%201.67l7.225%207.989A2%202%200%200%201%2010%2014z%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-fingerprint::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M12%2010a2%202%200%200%200-2%202c0%201.02-.1%202.51-.26%204%22%20%2F%3E%20%3Cpath%20d%3D%22M14%2013.12c0%202.38%200%206.38-1%208.88%22%20%2F%3E%20%3Cpath%20d%3D%22M17.29%2021.02c.12-.6.43-2.3.5-3.02%22%20%2F%3E%20%3Cpath%20d%3D%22M2%2012a10%2010%200%200%201%2018-6%22%20%2F%3E%20%3Cpath%20d%3D%22M2%2016h.01%22%20%2F%3E%20%3Cpath%20d%3D%22M21.8%2016c.2-2%20.131-5.354%200-6%22%20%2F%3E%20%3Cpath%20d%3D%22M5%2019.5C5.5%2018%206%2015%206%2012a6%206%200%200%201%20.34-2%22%20%2F%3E%20%3Cpath%20d%3D%22M8.65%2022c.21-.66.45-1.32.57-2%22%20%2F%3E%20%3Cpath%20d%3D%22M9%206.8a6%206%200%200%201%209%205.2v2%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-flask-conical::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M14%202v6a2%202%200%200%200%20.245.96l5.51%2010.08A2%202%200%200%201%2018%2022H6a2%202%200%200%201-1.755-2.96l5.51-10.08A2%202%200%200%200%2010%208V2%22%20%2F%3E%20%3Cpath%20d%3D%22M6.453%2015h11.094%22%20%2F%3E%20%3Cpath%20d%3D%22M8.5%202h7%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-funnel::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M10%2020a1%201%200%200%200%20.553.895l2%201A1%201%200%200%200%2014%2021v-7a2%202%200%200%201%20.517-1.341L21.74%204.67A1%201%200%200%200%2021%203H3a1%201%200%200%200-.742%201.67l7.225%207.989A2%202%200%200%201%2010%2014z%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-gauge::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22m12%2014%204-4%22%20%2F%3E%20%3Cpath%20d%3D%22M3.34%2019a10%2010%200%201%201%2017.32%200%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-glasses::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2215%22%20r%3D%224%22%20%2F%3E%20%3Ccircle%20cx%3D%2218%22%20cy%3D%2215%22%20r%3D%224%22%20%2F%3E%20%3Cpath%20d%3D%22M14%2015a2%202%200%200%200-2-2%202%202%200%200%200-2%202%22%20%2F%3E%20%3Cpath%20d%3D%22M2.5%2013%205%207c.7-1.3%201.4-2%203-2%22%20%2F%3E%20%3Cpath%20d%3D%22M21.5%2013%2019%207c-.7-1.3-1.5-2-3-2%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-globe::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%20%2F%3E%20%3Cpath%20d%3D%22M12%202a14.5%2014.5%200%200%200%200%2020%2014.5%2014.5%200%200%200%200-20%22%20%2F%3E%20%3Cpath%20d%3D%22M2%2012h20%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-grip-vertical::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2212%22%20r%3D%221%22%20%2F%3E%20%3Ccircle%20cx%3D%229%22%20cy%3D%225%22%20r%3D%221%22%20%2F%3E%20%3Ccircle%20cx%3D%229%22%20cy%3D%2219%22%20r%3D%221%22%20%2F%3E%20%3Ccircle%20cx%3D%2215%22%20cy%3D%2212%22%20r%3D%221%22%20%2F%3E%20%3Ccircle%20cx%3D%2215%22%20cy%3D%225%22%20r%3D%221%22%20%2F%3E%20%3Ccircle%20cx%3D%2215%22%20cy%3D%2219%22%20r%3D%221%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-hard-drive::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M10%2016h.01%22%20%2F%3E%20%3Cpath%20d%3D%22M2.212%2011.577a2%202%200%200%200-.212.896V18a2%202%200%200%200%202%202h16a2%202%200%200%200%202-2v-5.527a2%202%200%200%200-.212-.896L18.55%205.11A2%202%200%200%200%2016.76%204H7.24a2%202%200%200%200-1.79%201.11z%22%20%2F%3E%20%3Cpath%20d%3D%22M21.946%2012.013H2.054%22%20%2F%3E%20%3Cpath%20d%3D%22M6%2016h.01%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-history::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M3%2012a9%209%200%201%200%209-9%209.75%209.75%200%200%200-6.74%202.74L3%208%22%20%2F%3E%20%3Cpath%20d%3D%22M3%203v5h5%22%20%2F%3E%20%3Cpath%20d%3D%22M12%207v5l4%202%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-image::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20width%3D%2218%22%20height%3D%2218%22%20x%3D%223%22%20y%3D%223%22%20rx%3D%222%22%20ry%3D%222%22%20%2F%3E%20%3Ccircle%20cx%3D%229%22%20cy%3D%229%22%20r%3D%222%22%20%2F%3E%20%3Cpath%20d%3D%22m21%2015-3.086-3.086a2%202%200%200%200-2.828%200L6%2021%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-image-plus::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M16%205h6%22%20%2F%3E%20%3Cpath%20d%3D%22M19%202v6%22%20%2F%3E%20%3Cpath%20d%3D%22M21%2011.5V19a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h7.5%22%20%2F%3E%20%3Cpath%20d%3D%22m21%2015-3.086-3.086a2%202%200%200%200-2.828%200L6%2021%22%20%2F%3E%20%3Ccircle%20cx%3D%229%22%20cy%3D%229%22%20r%3D%222%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-house::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M15%2021v-8a1%201%200%200%200-1-1h-4a1%201%200%200%200-1%201v8%22%20%2F%3E%20%3Cpath%20d%3D%22M3%2010a2%202%200%200%201%20.709-1.528l7-5.999a2%202%200%200%201%202.582%200l7%205.999A2%202%200%200%201%2021%2010v9a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2z%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-inbox::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpolyline%20points%3D%2222%2012%2016%2012%2014%2015%2010%2015%208%2012%202%2012%22%20%2F%3E%20%3Cpath%20d%3D%22M5.45%205.11%202%2012v6a2%202%200%200%200%202%202h16a2%202%200%200%200%202-2v-6l-3.45-6.89A2%202%200%200%200%2016.76%204H7.24a2%202%200%200%200-1.79%201.11z%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-italic::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cline%20x1%3D%2219%22%20x2%3D%2210%22%20y1%3D%224%22%20y2%3D%224%22%20%2F%3E%20%3Cline%20x1%3D%2214%22%20x2%3D%225%22%20y1%3D%2220%22%20y2%3D%2220%22%20%2F%3E%20%3Cline%20x1%3D%2215%22%20x2%3D%229%22%20y1%3D%224%22%20y2%3D%2220%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-key-round::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M2.586%2017.414A2%202%200%200%200%202%2018.828V21a1%201%200%200%200%201%201h3a1%201%200%200%200%201-1v-1a1%201%200%200%201%201-1h1a1%201%200%200%200%201-1v-1a1%201%200%200%201%201-1h.172a2%202%200%200%200%201.414-.586l.814-.814a6.5%206.5%200%201%200-4-4z%22%20%2F%3E%20%3Ccircle%20cx%3D%2216.5%22%20cy%3D%227.5%22%20r%3D%22.5%22%20fill%3D%22currentColor%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-layers::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M12.83%202.18a2%202%200%200%200-1.66%200L2.6%206.08a1%201%200%200%200%200%201.83l8.58%203.91a2%202%200%200%200%201.66%200l8.58-3.9a1%201%200%200%200%200-1.83z%22%20%2F%3E%20%3Cpath%20d%3D%22M2%2012a1%201%200%200%200%20.58.91l8.6%203.91a2%202%200%200%200%201.65%200l8.58-3.9A1%201%200%200%200%2022%2012%22%20%2F%3E%20%3Cpath%20d%3D%22M2%2017a1%201%200%200%200%20.58.91l8.6%203.91a2%202%200%200%200%201.65%200l8.58-3.9A1%201%200%200%200%2022%2017%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-layout-dashboard::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20width%3D%227%22%20height%3D%229%22%20x%3D%223%22%20y%3D%223%22%20rx%3D%221%22%20%2F%3E%20%3Crect%20width%3D%227%22%20height%3D%225%22%20x%3D%2214%22%20y%3D%223%22%20rx%3D%221%22%20%2F%3E%20%3Crect%20width%3D%227%22%20height%3D%229%22%20x%3D%2214%22%20y%3D%2212%22%20rx%3D%221%22%20%2F%3E%20%3Crect%20width%3D%227%22%20height%3D%225%22%20x%3D%223%22%20y%3D%2216%22%20rx%3D%221%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-layout-grid::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20width%3D%227%22%20height%3D%227%22%20x%3D%223%22%20y%3D%223%22%20rx%3D%221%22%20%2F%3E%20%3Crect%20width%3D%227%22%20height%3D%227%22%20x%3D%2214%22%20y%3D%223%22%20rx%3D%221%22%20%2F%3E%20%3Crect%20width%3D%227%22%20height%3D%227%22%20x%3D%2214%22%20y%3D%2214%22%20rx%3D%221%22%20%2F%3E%20%3Crect%20width%3D%227%22%20height%3D%227%22%20x%3D%223%22%20y%3D%2214%22%20rx%3D%221%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-layout-template::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20width%3D%2218%22%20height%3D%227%22%20x%3D%223%22%20y%3D%223%22%20rx%3D%221%22%20%2F%3E%20%3Crect%20width%3D%229%22%20height%3D%227%22%20x%3D%223%22%20y%3D%2214%22%20rx%3D%221%22%20%2F%3E%20%3Crect%20width%3D%225%22%20height%3D%227%22%20x%3D%2216%22%20y%3D%2214%22%20rx%3D%221%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-life-buoy::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%20%2F%3E%20%3Cpath%20d%3D%22m4.93%204.93%204.24%204.24%22%20%2F%3E%20%3Cpath%20d%3D%22m14.83%209.17%204.24-4.24%22%20%2F%3E%20%3Cpath%20d%3D%22m14.83%2014.83%204.24%204.24%22%20%2F%3E%20%3Cpath%20d%3D%22m9.17%2014.83-4.24%204.24%22%20%2F%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-link-2::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M9%2017H7A5%205%200%200%201%207%207h2%22%20%2F%3E%20%3Cpath%20d%3D%22M15%207h2a5%205%200%201%201%200%2010h-2%22%20%2F%3E%20%3Cline%20x1%3D%228%22%20x2%3D%2216%22%20y1%3D%2212%22%20y2%3D%2212%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-list::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M3%205h.01%22%20%2F%3E%20%3Cpath%20d%3D%22M3%2012h.01%22%20%2F%3E%20%3Cpath%20d%3D%22M3%2019h.01%22%20%2F%3E%20%3Cpath%20d%3D%22M8%205h13%22%20%2F%3E%20%3Cpath%20d%3D%22M8%2012h13%22%20%2F%3E%20%3Cpath%20d%3D%22M8%2019h13%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-list-checks::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M13%205h8%22%20%2F%3E%20%3Cpath%20d%3D%22M13%2012h8%22%20%2F%3E%20%3Cpath%20d%3D%22M13%2019h8%22%20%2F%3E%20%3Cpath%20d%3D%22m3%2017%202%202%204-4%22%20%2F%3E%20%3Cpath%20d%3D%22m3%207%202%202%204-4%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-list-ordered::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M11%205h10%22%20%2F%3E%20%3Cpath%20d%3D%22M11%2012h10%22%20%2F%3E%20%3Cpath%20d%3D%22M11%2019h10%22%20%2F%3E%20%3Cpath%20d%3D%22M4%204h1v5%22%20%2F%3E%20%3Cpath%20d%3D%22M4%209h2%22%20%2F%3E%20%3Cpath%20d%3D%22M6.5%2020H3.4c0-1%202.6-1.925%202.6-3.5a1.5%201.5%200%200%200-2.6-1.02%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-list-plus::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M16%205H3%22%20%2F%3E%20%3Cpath%20d%3D%22M11%2012H3%22%20%2F%3E%20%3Cpath%20d%3D%22M16%2019H3%22%20%2F%3E%20%3Cpath%20d%3D%22M18%209v6%22%20%2F%3E%20%3Cpath%20d%3D%22M21%2012h-6%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-lock-keyhole::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2216%22%20r%3D%221%22%20%2F%3E%20%3Crect%20x%3D%223%22%20y%3D%2210%22%20width%3D%2218%22%20height%3D%2212%22%20rx%3D%222%22%20%2F%3E%20%3Cpath%20d%3D%22M7%2010V7a5%205%200%200%201%2010%200v3%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-log-in::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22m10%2017%205-5-5-5%22%20%2F%3E%20%3Cpath%20d%3D%22M15%2012H3%22%20%2F%3E%20%3Cpath%20d%3D%22M15%203h4a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202h-4%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-log-out::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22m16%2017%205-5-5-5%22%20%2F%3E%20%3Cpath%20d%3D%22M21%2012H9%22%20%2F%3E%20%3Cpath%20d%3D%22M9%2021H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h4%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-map::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M14.106%205.553a2%202%200%200%200%201.788%200l3.659-1.83A1%201%200%200%201%2021%204.619v12.764a1%201%200%200%201-.553.894l-4.553%202.277a2%202%200%200%201-1.788%200l-4.212-2.106a2%202%200%200%200-1.788%200l-3.659%201.83A1%201%200%200%201%203%2019.381V6.618a1%201%200%200%201%20.553-.894l4.553-2.277a2%202%200%200%201%201.788%200z%22%20%2F%3E%20%3Cpath%20d%3D%22M15%205.764v15%22%20%2F%3E%20%3Cpath%20d%3D%22M9%203.236v15%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-megaphone::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M11%206a13%2013%200%200%200%208.4-2.8A1%201%200%200%201%2021%204v12a1%201%200%200%201-1.6.8A13%2013%200%200%200%2011%2014H5a2%202%200%200%201-2-2V8a2%202%200%200%201%202-2z%22%20%2F%3E%20%3Cpath%20d%3D%22M6%2014a12%2012%200%200%200%202.4%207.2%202%202%200%200%200%203.2-2.4A8%208%200%200%201%2010%2014%22%20%2F%3E%20%3Cpath%20d%3D%22M8%206v8%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-monitor::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20width%3D%2220%22%20height%3D%2214%22%20x%3D%222%22%20y%3D%223%22%20rx%3D%222%22%20%2F%3E%20%3Cline%20x1%3D%228%22%20x2%3D%2216%22%20y1%3D%2221%22%20y2%3D%2221%22%20%2F%3E%20%3Cline%20x1%3D%2212%22%20x2%3D%2212%22%20y1%3D%2217%22%20y2%3D%2221%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-monitor-up::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22m9%2010%203-3%203%203%22%20%2F%3E%20%3Cpath%20d%3D%22M12%2013V7%22%20%2F%3E%20%3Crect%20width%3D%2220%22%20height%3D%2214%22%20x%3D%222%22%20y%3D%223%22%20rx%3D%222%22%20%2F%3E%20%3Cpath%20d%3D%22M12%2017v4%22%20%2F%3E%20%3Cpath%20d%3D%22M8%2021h8%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-moon::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M20.985%2012.486a9%209%200%201%201-9.473-9.472c.405-.022.617.46.402.803a6%206%200%200%200%208.268%208.268c.344-.215.825-.004.803.401%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-move-vertical::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M12%202v20%22%20%2F%3E%20%3Cpath%20d%3D%22m8%2018%204%204%204-4%22%20%2F%3E%20%3Cpath%20d%3D%22m8%206%204-4%204%204%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-palette::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M12%2022a1%201%200%200%201%200-20%2010%209%200%200%201%2010%209%205%205%200%200%201-5%205h-2.25a1.75%201.75%200%200%200-1.4%202.8l.3.4a1.75%201.75%200%200%201-1.4%202.8z%22%20%2F%3E%20%3Ccircle%20cx%3D%2213.5%22%20cy%3D%226.5%22%20r%3D%22.5%22%20fill%3D%22currentColor%22%20%2F%3E%20%3Ccircle%20cx%3D%2217.5%22%20cy%3D%2210.5%22%20r%3D%22.5%22%20fill%3D%22currentColor%22%20%2F%3E%20%3Ccircle%20cx%3D%226.5%22%20cy%3D%2212.5%22%20r%3D%22.5%22%20fill%3D%22currentColor%22%20%2F%3E%20%3Ccircle%20cx%3D%228.5%22%20cy%3D%227.5%22%20r%3D%22.5%22%20fill%3D%22currentColor%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-panel-left-close::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20width%3D%2218%22%20height%3D%2218%22%20x%3D%223%22%20y%3D%223%22%20rx%3D%222%22%20%2F%3E%20%3Cpath%20d%3D%22M9%203v18%22%20%2F%3E%20%3Cpath%20d%3D%22m16%2015-3-3%203-3%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-pencil::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M21.174%206.812a1%201%200%200%200-3.986-3.987L3.842%2016.174a2%202%200%200%200-.5.83l-1.321%204.352a.5.5%200%200%200%20.623.622l4.353-1.32a2%202%200%200%200%20.83-.497z%22%20%2F%3E%20%3Cpath%20d%3D%22m15%205%204%204%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-play::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M5%205a2%202%200%200%201%203.008-1.728l11.997%206.998a2%202%200%200%201%20.003%203.458l-12%207A2%202%200%200%201%205%2019z%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-plug-zap::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M6.3%2020.3a2.4%202.4%200%200%200%203.4%200L12%2018l-6-6-2.3%202.3a2.4%202.4%200%200%200%200%203.4Z%22%20%2F%3E%20%3Cpath%20d%3D%22m2%2022%203-3%22%20%2F%3E%20%3Cpath%20d%3D%22M7.5%2013.5%2010%2011%22%20%2F%3E%20%3Cpath%20d%3D%22M10.5%2016.5%2013%2014%22%20%2F%3E%20%3Cpath%20d%3D%22m18%203-4%204h6l-4%204%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-plus::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M5%2012h14%22%20%2F%3E%20%3Cpath%20d%3D%22M12%205v14%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-quote::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M16%203a2%202%200%200%200-2%202v6a2%202%200%200%200%202%202%201%201%200%200%201%201%201v1a2%202%200%200%201-2%202%201%201%200%200%200-1%201v2a1%201%200%200%200%201%201%206%206%200%200%200%206-6V5a2%202%200%200%200-2-2z%22%20%2F%3E%20%3Cpath%20d%3D%22M5%203a2%202%200%200%200-2%202v6a2%202%200%200%200%202%202%201%201%200%200%201%201%201v1a2%202%200%200%201-2%202%201%201%200%200%200-1%201v2a1%201%200%200%200%201%201%206%206%200%200%200%206-6V5a2%202%200%200%200-2-2z%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-radio-tower::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M4.9%2016.1C1%2012.2%201%205.8%204.9%201.9%22%20%2F%3E%20%3Cpath%20d%3D%22M7.8%204.7a6.14%206.14%200%200%200-.8%207.5%22%20%2F%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%229%22%20r%3D%222%22%20%2F%3E%20%3Cpath%20d%3D%22M16.2%204.8c2%202%202.26%205.11.8%207.47%22%20%2F%3E%20%3Cpath%20d%3D%22M19.1%201.9a9.96%209.96%200%200%201%200%2014.1%22%20%2F%3E%20%3Cpath%20d%3D%22M9.5%2018h5%22%20%2F%3E%20%3Cpath%20d%3D%22m8%2022%204-11%204%2011%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-receipt::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M12%2017V7%22%20%2F%3E%20%3Cpath%20d%3D%22M16%208h-6a2%202%200%200%200%200%204h4a2%202%200%200%201%200%204H8%22%20%2F%3E%20%3Cpath%20d%3D%22M4%203a1%201%200%200%201%201-1%201.3%201.3%200%200%201%20.7.2l.933.6a1.3%201.3%200%200%200%201.4%200l.934-.6a1.3%201.3%200%200%201%201.4%200l.933.6a1.3%201.3%200%200%200%201.4%200l.933-.6a1.3%201.3%200%200%201%201.4%200l.934.6a1.3%201.3%200%200%200%201.4%200l.933-.6A1.3%201.3%200%200%201%2019%202a1%201%200%200%201%201%201v18a1%201%200%200%201-1%201%201.3%201.3%200%200%201-.7-.2l-.933-.6a1.3%201.3%200%200%200-1.4%200l-.934.6a1.3%201.3%200%200%201-1.4%200l-.933-.6a1.3%201.3%200%200%200-1.4%200l-.933.6a1.3%201.3%200%200%201-1.4%200l-.934-.6a1.3%201.3%200%200%200-1.4%200l-.933.6a1.3%201.3%200%200%201-.7.2%201%201%200%200%201-1-1z%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-redo-2::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22m15%2014%205-5-5-5%22%20%2F%3E%20%3Cpath%20d%3D%22M20%209H9.5A5.5%205.5%200%200%200%204%2014.5A5.5%205.5%200%200%200%209.5%2020H13%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-refresh-cw::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M3%2012a9%209%200%200%201%209-9%209.75%209.75%200%200%201%206.74%202.74L21%208%22%20%2F%3E%20%3Cpath%20d%3D%22M21%203v5h-5%22%20%2F%3E%20%3Cpath%20d%3D%22M21%2012a9%209%200%200%201-9%209%209.75%209.75%200%200%201-6.74-2.74L3%2016%22%20%2F%3E%20%3Cpath%20d%3D%22M8%2016H3v5%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-rocket::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M12%2015v5s3.03-.55%204-2c1.08-1.62%200-5%200-5%22%20%2F%3E%20%3Cpath%20d%3D%22M4.5%2016.5c-1.5%201.26-2%205-2%205s3.74-.5%205-2c.71-.84.7-2.13-.09-2.91a2.18%202.18%200%200%200-2.91-.09%22%20%2F%3E%20%3Cpath%20d%3D%22M9%2012a22%2022%200%200%201%202-3.95A12.88%2012.88%200%200%201%2022%202c0%202.72-.78%207.5-6%2011a22.4%2022.4%200%200%201-4%202z%22%20%2F%3E%20%3Cpath%20d%3D%22M9%2012H4s.55-3.03%202-4c1.62-1.08%205%20.05%205%20.05%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-save::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M15.2%203a2%202%200%200%201%201.4.6l3.8%203.8a2%202%200%200%201%20.6%201.4V19a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2z%22%20%2F%3E%20%3Cpath%20d%3D%22M17%2021v-7a1%201%200%200%200-1-1H8a1%201%200%200%200-1%201v7%22%20%2F%3E%20%3Cpath%20d%3D%22M7%203v4a1%201%200%200%200%201%201h7%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-scale::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M12%203v18%22%20%2F%3E%20%3Cpath%20d%3D%22m19%208%203%208a5%205%200%200%201-6%200zV7%22%20%2F%3E%20%3Cpath%20d%3D%22M3%207h1a17%2017%200%200%200%208-2%2017%2017%200%200%200%208%202h1%22%20%2F%3E%20%3Cpath%20d%3D%22m5%208%203%208a5%205%200%200%201-6%200zV7%22%20%2F%3E%20%3Cpath%20d%3D%22M7%2021h10%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-scan::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M3%207V5a2%202%200%200%201%202-2h2%22%20%2F%3E%20%3Cpath%20d%3D%22M17%203h2a2%202%200%200%201%202%202v2%22%20%2F%3E%20%3Cpath%20d%3D%22M21%2017v2a2%202%200%200%201-2%202h-2%22%20%2F%3E%20%3Cpath%20d%3D%22M7%2021H5a2%202%200%200%201-2-2v-2%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-scroll-text::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M15%2012h-5%22%20%2F%3E%20%3Cpath%20d%3D%22M15%208h-5%22%20%2F%3E%20%3Cpath%20d%3D%22M19%2017V5a2%202%200%200%200-2-2H4%22%20%2F%3E%20%3Cpath%20d%3D%22M8%2021h12a2%202%200%200%200%202-2v-1a1%201%200%200%200-1-1H11a1%201%200%200%200-1%201v1a2%202%200%201%201-4%200V5a2%202%200%201%200-4%200v2a1%201%200%200%200%201%201h3%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-circle-check-mark::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%20%2F%3E%3Cpath%20d%3D%27m8.5%2012.2%202.4%202.4%204.6-4.9%27%20%2F%3E%3C/svg%3E"); }
.icon-trending-up::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%27M3%2017%209.5%2010.5l3.5%203.5L21%206.5%27%20%2F%3E%3Cpath%20d%3D%27M15.5%206.5H21v5.5%27%20%2F%3E%3C/svg%3E"); }
.icon-trending-down::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%27M3%207%209.5%2013.5l3.5-3.5L21%2017.5%27%20%2F%3E%3Cpath%20d%3D%27M15.5%2017.5H21V12%27%20%2F%3E%3C/svg%3E"); }
.icon-minus::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%27M5%2012h14%27%20%2F%3E%3C/svg%3E"); }
.icon-circle-dashed::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%27M10.1%203.2a9%209%200%200%200-3.6%201.5%27%20%2F%3E%3Cpath%20d%3D%27M4.7%206.5A9%209%200%200%200%203.2%2010.1%27%20%2F%3E%3Cpath%20d%3D%27M3.2%2013.9a9%209%200%200%200%201.5%203.6%27%20%2F%3E%3Cpath%20d%3D%27M6.5%2019.3a9%209%200%200%200%203.6%201.5%27%20%2F%3E%3Cpath%20d%3D%27M13.9%2020.8a9%209%200%200%200%203.6-1.5%27%20%2F%3E%3Cpath%20d%3D%27M19.3%2017.5a9%209%200%200%200%201.5-3.6%27%20%2F%3E%3Cpath%20d%3D%27M20.8%2010.1a9%209%200%200%200-1.5-3.6%27%20%2F%3E%3Cpath%20d%3D%27M17.5%204.7a9%209%200%200%200-3.6-1.5%27%20%2F%3E%3C/svg%3E"); }
.icon-shuffle::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%27M16%203h5v5%27%20%2F%3E%3Cpath%20d%3D%27M4%2020%2021%203%27%20%2F%3E%3Cpath%20d%3D%27M21%2016v5h-5%27%20%2F%3E%3Cpath%20d%3D%27M15%2015l6%206%27%20%2F%3E%3Cpath%20d%3D%27M4%204l5%205%27%20%2F%3E%3C/svg%3E"); }
.icon-github::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%27M9%2019c-4.3%201.4-4.3-2.5-6-3%27%20%2F%3E%3Cpath%20d%3D%27M15%2021v-3.5a3%203%200%200%200-.9-2.4c2.9-.3%206-1.5%206-6.4a4.8%204.8%200%200%200-1.3-3.3%204.5%204.5%200%200%200-.1-3.4s-1.1-.3-3.6%201.3a12.3%2012.3%200%200%200-6.2%200C6.4%201.8%205.3%202.1%205.3%202.1a4.5%204.5%200%200%200-.1%203.4A4.8%204.8%200%200%200%203.9%208.8c0%204.9%203%206.1%205.9%206.4a3%203%200%200%200-.9%202.3V21%27%20%2F%3E%3C/svg%3E"); }
.icon-search::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22m21%2021-4.34-4.34%22%20%2F%3E%20%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%228%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-send::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M14.536%2021.686a.5.5%200%200%200%20.937-.024l6.5-19a.496.496%200%200%200-.635-.635l-19%206.5a.5.5%200%200%200-.024.937l7.93%203.18a2%202%200%200%201%201.112%201.11z%22%20%2F%3E%20%3Cpath%20d%3D%22m21.854%202.147-10.94%2010.939%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-server::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20width%3D%2220%22%20height%3D%228%22%20x%3D%222%22%20y%3D%222%22%20rx%3D%222%22%20ry%3D%222%22%20%2F%3E%20%3Crect%20width%3D%2220%22%20height%3D%228%22%20x%3D%222%22%20y%3D%2214%22%20rx%3D%222%22%20ry%3D%222%22%20%2F%3E%20%3Cline%20x1%3D%226%22%20x2%3D%226.01%22%20y1%3D%226%22%20y2%3D%226%22%20%2F%3E%20%3Cline%20x1%3D%226%22%20x2%3D%226.01%22%20y1%3D%2218%22%20y2%3D%2218%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-settings::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M9.671%204.136a2.34%202.34%200%200%201%204.659%200%202.34%202.34%200%200%200%203.319%201.915%202.34%202.34%200%200%201%202.33%204.033%202.34%202.34%200%200%200%200%203.831%202.34%202.34%200%200%201-2.33%204.033%202.34%202.34%200%200%200-3.319%201.915%202.34%202.34%200%200%201-4.659%200%202.34%202.34%200%200%200-3.32-1.915%202.34%202.34%200%200%201-2.33-4.033%202.34%202.34%200%200%200%200-3.831A2.34%202.34%200%200%201%206.35%206.051a2.34%202.34%200%200%200%203.319-1.915%22%20%2F%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-settings-2::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M14%2017H5%22%20%2F%3E%20%3Cpath%20d%3D%22M19%207h-9%22%20%2F%3E%20%3Ccircle%20cx%3D%2217%22%20cy%3D%2217%22%20r%3D%223%22%20%2F%3E%20%3Ccircle%20cx%3D%227%22%20cy%3D%227%22%20r%3D%223%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-shield-alert::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M20%2013c0%205-3.5%207.5-7.66%208.95a1%201%200%200%201-.67-.01C7.5%2020.5%204%2018%204%2013V6a1%201%200%200%201%201-1c2%200%204.5-1.2%206.24-2.72a1.17%201.17%200%200%201%201.52%200C14.51%203.81%2017%205%2019%205a1%201%200%200%201%201%201z%22%20%2F%3E%20%3Cpath%20d%3D%22M12%208v4%22%20%2F%3E%20%3Cpath%20d%3D%22M12%2016h.01%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-shield-check::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M20%2013c0%205-3.5%207.5-7.66%208.95a1%201%200%200%201-.67-.01C7.5%2020.5%204%2018%204%2013V6a1%201%200%200%201%201-1c2%200%204.5-1.2%206.24-2.72a1.17%201.17%200%200%201%201.52%200C14.51%203.81%2017%205%2019%205a1%201%200%200%201%201%201z%22%20%2F%3E%20%3Cpath%20d%3D%22m9%2012%202%202%204-4%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-shopping-cart::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2221%22%20r%3D%221%22%20%2F%3E%20%3Ccircle%20cx%3D%2219%22%20cy%3D%2221%22%20r%3D%221%22%20%2F%3E%20%3Cpath%20d%3D%22M2.05%202.05h2l2.66%2012.42a2%202%200%200%200%202%201.58h9.78a2%202%200%200%200%201.95-1.57l1.65-7.43H5.12%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-smartphone::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20width%3D%2214%22%20height%3D%2220%22%20x%3D%225%22%20y%3D%222%22%20rx%3D%222%22%20ry%3D%222%22%20%2F%3E%20%3Cpath%20d%3D%22M12%2018h.01%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-sparkles::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M11.017%202.814a1%201%200%200%201%201.966%200l1.051%205.558a2%202%200%200%200%201.594%201.594l5.558%201.051a1%201%200%200%201%200%201.966l-5.558%201.051a2%202%200%200%200-1.594%201.594l-1.051%205.558a1%201%200%200%201-1.966%200l-1.051-5.558a2%202%200%200%200-1.594-1.594l-5.558-1.051a1%201%200%200%201%200-1.966l5.558-1.051a2%202%200%200%200%201.594-1.594z%22%20%2F%3E%20%3Cpath%20d%3D%22M20%202v4%22%20%2F%3E%20%3Cpath%20d%3D%22M22%204h-4%22%20%2F%3E%20%3Ccircle%20cx%3D%224%22%20cy%3D%2220%22%20r%3D%222%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-square-pen::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M12%203H5a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2v-7%22%20%2F%3E%20%3Cpath%20d%3D%22M18.375%202.625a1%201%200%200%201%203%203l-9.013%209.014a2%202%200%200%201-.853.505l-2.873.84a.5.5%200%200%201-.62-.62l.84-2.873a2%202%200%200%201%20.506-.852z%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-sun::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%20%2F%3E%20%3Cpath%20d%3D%22M12%202v2%22%20%2F%3E%20%3Cpath%20d%3D%22M12%2020v2%22%20%2F%3E%20%3Cpath%20d%3D%22m4.93%204.93%201.41%201.41%22%20%2F%3E%20%3Cpath%20d%3D%22m17.66%2017.66%201.41%201.41%22%20%2F%3E%20%3Cpath%20d%3D%22M2%2012h2%22%20%2F%3E%20%3Cpath%20d%3D%22M20%2012h2%22%20%2F%3E%20%3Cpath%20d%3D%22m6.34%2017.66-1.41%201.41%22%20%2F%3E%20%3Cpath%20d%3D%22m19.07%204.93-1.41%201.41%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-tablet::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20width%3D%2216%22%20height%3D%2220%22%20x%3D%224%22%20y%3D%222%22%20rx%3D%222%22%20ry%3D%222%22%20%2F%3E%20%3Cline%20x1%3D%2212%22%20x2%3D%2212.01%22%20y1%3D%2218%22%20y2%3D%2218%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-tag::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M12.586%202.586A2%202%200%200%200%2011.172%202H4a2%202%200%200%200-2%202v7.172a2%202%200%200%200%20.586%201.414l8.704%208.704a2.426%202.426%200%200%200%203.42%200l6.58-6.58a2.426%202.426%200%200%200%200-3.42z%22%20%2F%3E%20%3Ccircle%20cx%3D%227.5%22%20cy%3D%227.5%22%20r%3D%22.5%22%20fill%3D%22currentColor%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-text::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M21%205H3%22%20%2F%3E%20%3Cpath%20d%3D%22M15%2012H3%22%20%2F%3E%20%3Cpath%20d%3D%22M17%2019H3%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-ticket::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M2%209a3%203%200%200%201%200%206v2a2%202%200%200%200%202%202h16a2%202%200%200%200%202-2v-2a3%203%200%200%201%200-6V7a2%202%200%200%200-2-2H4a2%202%200%200%200-2%202Z%22%20%2F%3E%20%3Cpath%20d%3D%22M13%205v2%22%20%2F%3E%20%3Cpath%20d%3D%22M13%2017v2%22%20%2F%3E%20%3Cpath%20d%3D%22M13%2011v2%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-trash-2::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M10%2011v6%22%20%2F%3E%20%3Cpath%20d%3D%22M14%2011v6%22%20%2F%3E%20%3Cpath%20d%3D%22M19%206v14a2%202%200%200%201-2%202H7a2%202%200%200%201-2-2V6%22%20%2F%3E%20%3Cpath%20d%3D%22M3%206h18%22%20%2F%3E%20%3Cpath%20d%3D%22M8%206V4a2%202%200%200%201%202-2h4a2%202%200%200%201%202%202v2%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-triangle-alert::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22m21.73%2018-8-14a2%202%200%200%200-3.48%200l-8%2014A2%202%200%200%200%204%2021h16a2%202%200%200%200%201.73-3%22%20%2F%3E%20%3Cpath%20d%3D%22M12%209v4%22%20%2F%3E%20%3Cpath%20d%3D%22M12%2017h.01%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-tv::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22m17%202-5%205-5-5%22%20%2F%3E%20%3Crect%20width%3D%2220%22%20height%3D%2215%22%20x%3D%222%22%20y%3D%227%22%20rx%3D%222%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-type::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M12%204v16%22%20%2F%3E%20%3Cpath%20d%3D%22M4%207V5a1%201%200%200%201%201-1h14a1%201%200%200%201%201%201v2%22%20%2F%3E%20%3Cpath%20d%3D%22M9%2020h6%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-underline::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M6%204v6a6%206%200%200%200%2012%200V4%22%20%2F%3E%20%3Cline%20x1%3D%224%22%20x2%3D%2220%22%20y1%3D%2220%22%20y2%3D%2220%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-undo-2::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M9%2014%204%209l5-5%22%20%2F%3E%20%3Cpath%20d%3D%22M4%209h10.5a5.5%205.5%200%200%201%205.5%205.5a5.5%205.5%200%200%201-5.5%205.5H11%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-user-check::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22m16%2011%202%202%204-4%22%20%2F%3E%20%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22%20%2F%3E%20%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-user-plus::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22%20%2F%3E%20%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22%20%2F%3E%20%3Cline%20x1%3D%2219%22%20x2%3D%2219%22%20y1%3D%228%22%20y2%3D%2214%22%20%2F%3E%20%3Cline%20x1%3D%2222%22%20x2%3D%2216%22%20y1%3D%2211%22%20y2%3D%2211%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-user-round::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%225%22%20%2F%3E%20%3Cpath%20d%3D%22M20%2021a8%208%200%200%200-16%200%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-users::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22%20%2F%3E%20%3Cpath%20d%3D%22M16%203.128a4%204%200%200%201%200%207.744%22%20%2F%3E%20%3Cpath%20d%3D%22M22%2021v-2a4%204%200%200%200-3-3.87%22%20%2F%3E%20%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-users-round::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M18%2021a8%208%200%200%200-16%200%22%20%2F%3E%20%3Ccircle%20cx%3D%2210%22%20cy%3D%228%22%20r%3D%225%22%20%2F%3E%20%3Cpath%20d%3D%22M22%2020c0-3.37-2-6.5-4-8a5%205%200%200%200-.45-8.3%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-wand-sparkles::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22m21.64%203.64-1.28-1.28a1.21%201.21%200%200%200-1.72%200L2.36%2018.64a1.21%201.21%200%200%200%200%201.72l1.28%201.28a1.2%201.2%200%200%200%201.72%200L21.64%205.36a1.2%201.2%200%200%200%200-1.72%22%20%2F%3E%20%3Cpath%20d%3D%22m14%207%203%203%22%20%2F%3E%20%3Cpath%20d%3D%22M5%206v4%22%20%2F%3E%20%3Cpath%20d%3D%22M19%2014v4%22%20%2F%3E%20%3Cpath%20d%3D%22M10%202v2%22%20%2F%3E%20%3Cpath%20d%3D%22M7%208H3%22%20%2F%3E%20%3Cpath%20d%3D%22M21%2016h-4%22%20%2F%3E%20%3Cpath%20d%3D%22M11%203H9%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-watch::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M12%2010v2.2l1.6%201%22%20%2F%3E%20%3Cpath%20d%3D%22m16.13%207.66-.81-4.05a2%202%200%200%200-2-1.61h-2.68a2%202%200%200%200-2%201.61l-.78%204.05%22%20%2F%3E%20%3Cpath%20d%3D%22m7.88%2016.36.8%204a2%202%200%200%200%202%201.61h2.72a2%202%200%200%200%202-1.61l.81-4.05%22%20%2F%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%226%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-x::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M18%206%206%2018%22%20%2F%3E%20%3Cpath%20d%3D%22m6%206%2012%2012%22%20%2F%3E%3C%2Fsvg%3E"); }

/* ---------------------------------------------------------------------------
   Centred search.

   One field, in the middle of the top bar, in every application. It searches
   the application you are standing in by default; the scope button on its left
   names the other applications this person can reach. Where a scope cannot be
   searched from here, the panel says so — an empty result list would read as
   an answer.
   ------------------------------------------------------------------------ */
/* The same control the products carry: a filled field, and a raised chip on
   its left naming what will be searched. The field was white with a border
   here and grey-filled there, and the scope was a bare text button here and a
   native <select> there — one question, three answers. */
.smdl-search {
  grid-column: 2; position: relative; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  /* Equal on both sides. The chip is a pill inside a pill, so it wants the
     SAME inset all the way round — left, top and bottom — and the icon at the
     far end wants that inset too. */
  height: var(--ctl-h); padding: 0 5px;
  background: var(--surface-2); border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--smdl-hair);
  transition: box-shadow .12s ease;
}
/* The ring belongs to the FIELD, and only when the field has focus.
   :focus-within also fires for the scope button, so opening the chooser lit
   this ring and the chip's own at the same time — two accent outlines nested
   one inside the other, which is what the control looked like in use. */
.smdl-search:has(.smdl-search-input:focus, input[data-smdl-search-input]:focus) {
  /* Focus LIFTS the field out of the bar — white against the grey — with a
     hairline in the accent. A 2px accent ring around a pill this wide is the
     loudest thing on the page, and it is announcing something the caret has
     already said. */
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--accent), 0 1px 2px rgba(16, 24, 40, .06);
}
/* No caret, deliberately: the chip is the affordance, and an arrow here would
   sit a few pixels from the switcher's own arrow and say it twice. */
.smdl-scope {
  appearance: none; border: 0; font: inherit; cursor: pointer;
  /* Height is explicit so the vertical inset is arithmetic rather than a
     consequence of the font, and lands on the same 5 as the sides. */
  display: inline-flex; align-items: center; flex: none;
  max-width: 40%; height: 24px; padding: 0 9px;
  border-radius: 999px; background: var(--card); color: var(--ink-2);
  box-shadow: 0 0 0 1px var(--smdl-hair);
  font-size: 11.5px; font-weight: 650; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.smdl-scope > span { overflow: hidden; text-overflow: ellipsis; }
.smdl-scope:hover { color: var(--ink); box-shadow: 0 0 0 1px var(--smdl-ring); }
.smdl-scope:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Open needs no outline: the chooser is hanging off it, which is the loudest
   possible statement that it is open. A pressed-in fill is enough. */
.smdl-scope[aria-expanded="true"] {
  color: var(--ink); background: var(--surface-3, var(--surface-2));
  box-shadow: 0 0 0 1px var(--smdl-hair);
}
/* Put the magnifier where readers expect a search affordance: immediately
   before the query. Pinning it to the trailing edge made the empty field read
   as two unrelated controls, especially once the header became compact. */
.smdl-search > .ic { order: 4; margin-left: 3px; margin-right: -1px; flex: none;
  /* width/height explicitly cleared: the host stylesheet gives every .ic an
     18px box, and an 18px box around a 16px glyph is the same one-pixel lie
     the 24px box was, only smaller. */
  width: auto; height: auto;
  color: var(--ink-3); font-size: 16px;
}
.smdl-search-input,
.smdl-search input[data-smdl-search-input] {
  order: 5; flex: 1 1 auto; min-width: 0; border: 0; background: none; font: inherit;
  font-size: 13px; color: var(--ink); height: 100%; padding: 0 4px; outline: none;
}
/* The pill itself is the focus ring — the field inside must not draw a second
   one on top of it. The host stylesheet rings every focused input with a
   box-shadow, and `outline: none` cannot cancel a box-shadow, so the field
   clears both or the pill ends up wearing a rounded rectangle inside it. */
.smdl-search-input:focus, .smdl-search-input:focus-visible,
.smdl-search input[data-smdl-search-input]:focus,
.smdl-search input[data-smdl-search-input]:focus-visible {
  outline: none; box-shadow: none;
}
.smdl-search-input::placeholder,
.smdl-search input[data-smdl-search-input]::placeholder { color: var(--ink-3); }
.smdl-search-input::-webkit-search-cancel-button,
.smdl-search input[data-smdl-search-input]::-webkit-search-cancel-button { -webkit-appearance: none; }

.smdl-scope-pop {
  position: absolute; top: calc(100% + 6px); left: 0; width: 248px; z-index: 60;
  background: var(--surface); border-radius: 14px; padding: 8px;
  box-shadow: 0 0 0 1px var(--smdl-ring), 0 18px 48px -12px rgba(8, 11, 16, .28);
}
.smdl-scope-pop[hidden] { display: none; }
.smdl-scope-sec {
  padding: 6px 8px 4px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
}
.smdl-scope-item {
  appearance: none; border: 0; background: none; font: inherit; cursor: pointer;
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 7px 10px; border-radius: 9px; color: var(--ink-2);
  font-size: 13px; font-weight: 550;
}
.smdl-scope-item:hover { background: var(--surface-2); color: var(--ink); }
.smdl-scope-item .smdl-markimg { width: 20px; height: 20px; }
/* The label only. The mark is a <span> too, and left in the match it took
   flex: 1 1 auto and stretched, pushing every application's name off the
   left edge it should line up on. The switcher's rows already guard this. */
.smdl-scope-item > span:not(.smdl-markimg) { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Scoped under .smdl-search: a bare class loses to `.smdl-search .ic`, which
   paints every icon in the field the magnifier's grey — so the mark that says
   "selected" came out reading as disabled. */
.smdl-search .smdl-scope-tick { margin-left: auto; flex: none; color: var(--accent-ink); visibility: hidden; }
.smdl-scope-foot { margin-top: 4px; padding-top: 5px; box-shadow: inset 0 1px var(--smdl-hair); }
.smdl-scope-all {
  width: 100%; border: 0; border-radius: 9px; padding: 7px 8px; background: none;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--accent-ink);
  text-align: left; cursor: pointer;
}
.smdl-scope-all:hover { background: var(--surface-2); }
.smdl-scope-all:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.smdl-scope-item[aria-checked="true"] .smdl-scope-tick { visibility: visible; }

.smdl-search-pop {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  background: var(--surface); border-radius: 14px; padding: 8px;
  max-height: min(66vh, 460px); overflow-y: auto;
  box-shadow: 0 0 0 1px var(--smdl-ring), 0 18px 48px -12px rgba(8, 11, 16, .28);
}
.smdl-search-pop[hidden] { display: none; }
.smdl-search-group {
  padding: 9px 10px 3px; font-size: 10.5px; font-weight: 650; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-3);
}
.smdl-search-item {
  display: flex; flex-direction: column; gap: 1px; padding: 7px 10px;
  border-radius: 9px; color: var(--ink); text-decoration: none;
}
.smdl-search-item:hover, .smdl-search-item.is-active { background: var(--surface-2); }
.smdl-search-item b { font-size: 13px; font-weight: 600; }
.smdl-search-item small { font-size: 11.5px; color: var(--ink-3); }
.smdl-search-note {
  padding: 12px 10px; font-size: 12.5px; color: var(--ink-2); line-height: 1.5;
}
.smdl-search-note a {
  display: inline-block; margin-top: 8px; color: var(--accent-ink);
  font-weight: 620; text-decoration: none;
}
.smdl-search-empty { padding: 14px 10px; font-size: 12.5px; color: var(--ink-3); }
.smdl-search-error {
  border-radius: 9px;
  background: color-mix(in srgb, var(--amber) 10%, var(--surface));
  color: var(--amber-ink);
}

/* ---------------------------------------------------------------- selects
   The real <select> remains in the form as the source of truth. JavaScript
   adds this keyboard-complete surface so the operating system's oversized,
   visually unrelated menu does not become the platform's dropdown design. */
.smdl-select { position: relative; width: 100%; min-width: 0; }
:where(.filters, .inlineform, .actions, .btnrow, .tk-toolbar-actions, .rpt-filters) .smdl-select {
  width: auto; min-width: 160px; max-width: 100%; flex: 0 1 220px;
}
.smdl-select-native {
  position: absolute !important; width: 1px !important; height: 1px !important;
  margin: -1px !important; padding: 0 !important; overflow: hidden !important;
  clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important;
  white-space: nowrap !important; border: 0 !important; opacity: 0 !important;
  pointer-events: none !important;
}
.smdl-select-trigger {
  appearance: none; box-sizing: border-box; width: 100%; min-width: 0; min-height: 36px;
  display: flex; align-items: center; gap: 10px; padding: 7px 11px;
  border: 1px solid var(--hair, var(--smdl-hair)); border-radius: var(--radius-sm, 8px);
  background: var(--field, var(--surface)); color: var(--ink); cursor: pointer;
  font: inherit; font-size: 13.5px; line-height: 20px; text-align: left;
}
.smdl-select-trigger:hover { border-color: color-mix(in srgb, var(--ink-3) 55%, transparent); }
.smdl-select-trigger:focus-visible {
  outline: 0; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.smdl-select.is-open .smdl-select-trigger {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.smdl-select-value {
  flex: 1 1 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.smdl-select-arrow {
  flex: none; width: 7px; height: 7px; margin: -3px 2px 0 6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  color: var(--ink-3); transform: rotate(45deg); transform-origin: 62% 62%;
  transition: transform .12s ease;
}
.smdl-select.is-open .smdl-select-arrow { transform: rotate(225deg); }
.smdl-select-menu {
  position: absolute; z-index: 120; top: calc(100% + 6px); left: 0; right: 0;
  min-width: max(100%, 180px); max-height: min(320px, calc(100vh - 96px));
  overflow-y: auto; overscroll-behavior: contain; padding: 6px;
  border-radius: var(--radius, 12px); background: var(--card, var(--surface));
  box-shadow: 0 0 0 1px var(--smdl-ring), 0 14px 36px -10px rgba(8, 11, 16, .28);
  scrollbar-width: thin;
}
.smdl-select-menu[hidden] { display: none; }
.smdl-select-group {
  padding: 8px 9px 5px; color: var(--ink-3); font-size: 10.5px;
  font-weight: 700; letter-spacing: .06em; line-height: 1.2; text-transform: uppercase;
}
.smdl-select-option {
  position: relative; min-height: 34px; display: flex; align-items: center;
  padding: 7px 32px 7px 10px; border-radius: 8px; color: var(--ink-2);
  cursor: pointer; font-size: 13px; line-height: 20px; overflow-wrap: anywhere;
}
.smdl-select-option.is-active,
.smdl-select-option:hover:not(.is-disabled) { background: var(--surface-2, var(--hover)); color: var(--ink); }
.smdl-select-option.is-selected { color: var(--ink); font-weight: 620; }
.smdl-select-option.is-selected::after {
  content: ""; position: absolute; right: 12px; top: 50%; width: 8px; height: 4px;
  border-left: 1.5px solid var(--accent-ink, var(--accent));
  border-bottom: 1.5px solid var(--accent-ink, var(--accent));
  transform: translateY(-65%) rotate(-45deg);
}
.smdl-select-option.is-disabled { color: var(--ink-3); cursor: not-allowed; opacity: .6; }
.smdl-select.is-disabled .smdl-select-trigger,
.smdl-select-trigger:disabled { cursor: not-allowed; opacity: .55; }

@media (max-width: 760px) {
  .smdl-select-trigger { min-height: 40px; }
  .smdl-select-option { min-height: 40px; padding-top: 9px; padding-bottom: 9px; }
  .smdl-select-menu { max-height: min(50vh, 320px); }
}
@media (prefers-reduced-motion: reduce) {
  .smdl-select-arrow { transition: none; }
}

@media (max-width: 1040px) {
  /* Descriptive copy yields before the primary search. Equal side tracks keep
     the field optically centred at the annotated compact-desktop width. */
  .smdl-top { grid-template-columns: minmax(0, 1fr) minmax(160px, 320px) minmax(0, 1fr); }
  .smdl-top .smdl-heading p { display: none; }
}
@media (max-width: 900px) {
  /* Keep the same three header zones used by every product shell. The middle
     field is allowed to shrink instead of being pushed onto another row. */
  .smdl-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(160px, 320px) max-content;
  }
  .smdl-search { display: flex; grid-column: 2; grid-row: 1; width: 100%; }
  .smdl-search, .smdl-search-gap { grid-column: 2; grid-row: 1; width: 100%; }
  .smdl-tools { grid-column: 3; grid-row: 1; margin-left: 0; }
}
@media (max-width: 760px) {
  /* Below tablet width the tools take their intrinsic space; title and search
     share what remains without either painting beneath its neighbour. */
  .smdl-top {
    grid-template-columns: minmax(0, 1fr) minmax(96px, 1.5fr) max-content;
    column-gap: 6px;
  }
}

@media (max-width: 520px) {
  /* Preserve the one-row header at phone widths. The accessible label remains
     in the control while the visible affordance compacts to the plus icon. */
  .smdl-new-btn { width: 34px; padding: 0; justify-content: center; font-size: 0; }
  .smdl-new.has-default .smdl-new-main { width: 34px; padding: 0; }
  .smdl-new.has-default .smdl-new-caret { width: 28px; padding: 0; }
  .smdl-new:not(.has-default) .smdl-new-btn .icon-chevron-down { display: none; }
}

/* ---------------------------------------------------------------------------
   The canvas stays calm.

   The rail carries the colour; the working surface is near-white in light and
   near-black in dark, and nothing tints it.
   ------------------------------------------------------------------------ */
.smdl-canvas { background: var(--canvas); }

/* The signed-out account header is a brand surface, not an application: the
   company signs it, so the wordmark and its controls read coral rather than
   borrowing the default page accent. The shell overrides these again inside
   .smdl, so a signed-in application still wears its own colour. */
.account-body .account-top,
.account-body .account-main,
.account-body .account-foot {
  --accent: var(--app-tile); --accent-ink: var(--app-ink); --accent-soft: var(--app-soft);
}
[data-theme="dark"] .account-body .account-top,
[data-theme="dark"] .account-body .account-main,
[data-theme="dark"] .account-body .account-foot {
  /* Same split as the shell: the fill keeps the tile so white labels hold, and
     text takes the lifted hue. */
  --accent: var(--app-tile); --accent-ink: var(--app-dark); --accent-soft: var(--app-soft-dark);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .account-body .account-top,
  :root:not([data-theme="light"]) .account-body .account-main,
  :root:not([data-theme="light"]) .account-body .account-foot {
    --accent: var(--app-tile); --accent-ink: var(--app-dark); --accent-soft: var(--app-soft-dark);
  }
}
.account-brand .smdl-markimg.is-brand { width: 28px; height: 28px; }