/* ============================================================================
   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: 8px;
  --radius-sm: 6px;
  --radius-lg: 10px;
  --smdl-side: 232px;
  --smdl-side-slim: 64px;
  --smdl-top: 64px;
  --smdl-content-gap: 32px;
  --ctl: 36px;
  --ctl-dense: 36px;
  --w-fly-s: 480px;
  --w-fly-m: 560px;
  --w-fly-l: 640px;
  --dur-fly: 200ms;
  --scrim: rgba(17, 24, 39, .18);
  /* One optical column down the left edge of the shell. The corner mark is a
     brand asset and is deliberately larger than a rail glyph, so the two are
     not the same SIZE — they share a BOX. The mark fills this column; each
     rail glyph keeps its 16px body and is centred in the same width. That is
     what puts the switcher and every nav row on one centre line, and starts
     the app name and every nav label at the same x. */
  --rail-icon-col: 27px;
  --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_cross_product_design.py fails if a
   colour is ever defined only inside a dark block. */
@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, #F64E28);
  --accent-ink: var(--app-ink, #DA380E);
  --accent-soft: var(--app-soft, #FEE0D9);
  --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, #FEE0D9);
  --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, #F64E28);
  --accent-ink: var(--app-dark, #FDA38D);
  --accent-soft: var(--app-soft-dark, #3C170F);
  --rail-active: var(--app-soft-dark, #3C170F);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .smdl[data-accent] {
    --accent: var(--app-tile, #F64E28);
    --accent-ink: var(--app-dark, #FDA38D);
    --accent-soft: var(--app-soft-dark, #3C170F);
    --rail-active: var(--app-soft-dark, #3C170F);
  }
}

/* ---------------------------------------------------------------- shell */
.smdl {
  font-size: 14px;
  line-height: 20px;
  /* 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: var(--radius-sm);
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  font-size: 13px; font-weight: 650; text-decoration: none;
  transform: translateY(calc(-100% - 16px)); transition: transform .12s ease;
}
/* The shadow is drawn only while the link is on screen. Parked above the
   viewport it still cast its 24px blur down over the corner mark — the "odd
   shadow in the top-left corner" of every page. (visibility: hidden would hide
   it too, but a hidden element cannot take focus, and taking focus is the
   link's whole job.) */
.smdl-skip-link:focus, .smdl-skip-link:focus-visible {
  transform: none; outline: 2px solid var(--accent); outline-offset: 2px;
  box-shadow: 0 8px 24px rgba(8, 11, 16, .18);
}
.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: var(--radius-sm);
  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: var(--rail-icon-col); height: var(--rail-icon-col); }
.smdl-mark { width: var(--rail-icon-col); height: var(--rail-icon-col); flex: none; }
.smdl-appname { flex: 1 1 auto; min-width: 0; 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; }
/* Collapsed, the corner has to centre its mark on the rail's icon column. The
   corner is 64px INCLUDING its 1px right border, so symmetric padding leaves a
   43px box and the mark lands half a pixel left of the glyphs (measured 31.5
   against 32). 9 right / 10 left gives the same 44px box the rail links have,
   and both centres land on 32. The 900px collapse repeats this rule below. */
.smdl.is-slim .smdl-corner { padding: 0 9px 0 10px; }
.smdl.is-slim .smdl-appname, .smdl.is-slim .smdl-switch-btn .chev { display: none; }

.smdl-switch-pop {
  position: absolute; top: calc(100% + 8px); left: 0;
  width: min(318px, calc(100vw - 16px));
  background: var(--surface); border-radius: var(--radius-lg); padding: 8px; z-index: 60;
  max-height: calc(100vh - 16px); overflow-y: auto; overscroll-behavior: contain;
  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: var(--radius-sm); 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:focus-visible {
  outline: 2px solid var(--accent-ink); outline-offset: -2px;
  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-scroll > .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;
}
.smdl-switch-org a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------------------------------------------------------------- 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;
  /* The outer tracks MUST stay symmetric: equal 1fr tracks are what centres
     the field, and the field is the one control that has to sit in the same
     place on every page.  Sizing track 3 to the tools instead (to stop them
     overflowing) made track 1 take all the slack, so the field slid to
     wherever that page's actions left room — measured across the portal it
     wandered 365px, from +165 on Settings to -200 on Marketing.
     Overflow is prevented on the tools' own side instead: they shrink, see
     .smdl-tools below. */
  /* 460px is the field's ideal, not a floor: a fixed centre track keeps its
     full width while the two sides starve, so on a narrow window the tools
     were pushed over it again.  31vw yields the same 460 at 1440 and above,
     and hands width back to the sides below that. */
  grid-template-columns: minmax(0, 1fr) minmax(0, min(460px, 31vw)) minmax(0, 1fr);
  padding: 12px 32px; background: var(--canvas); position: relative; z-index: 30;
}
/* The page title belongs to application chrome. The symmetric outer tracks
   continue to centre search; the title and tools are bounded inside those
   tracks and yield before they can push the field off centre. */
.smdl-top .smdl-heading {
  grid-column: 1; grid-row: 1; min-width: 0; overflow: hidden;
  display: flex; align-items: center;
}
.smdl-top .smdl-heading h1 {
  min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis;
  color: var(--ink); font-size: 18px; font-weight: 600; line-height: 24px;
  letter-spacing: -.01em; white-space: nowrap;
}
.smdl-heading-sub {
  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;
}
.smdl-tools {
  grid-column: 3; grid-row: 1; justify-self: end;
  display: flex; align-items: center; gap: 10px;
  min-width: 0; max-width: 100%;
}
.smdl-tools > .topbar-actions { margin-right: 6px; }
/* A page's own actions are the part of the top bar that gives way: the
   shell's New control and the account row keep their size, and a long
   actions group scrolls inside its own box rather than pushing into the
   search field. */
.topbar-actions { display: flex; align-items: center; gap: 8px; min-width: 0;
  flex-wrap: wrap; overflow: visible; }
.topbar-actions::-webkit-scrollbar { display: none; }
.topbar-actions > * { flex: none; }
.smdl-tools > .topbar-actions { flex: 1 1 auto; }
.smdl-tools > .platform-notif,
.smdl-tools > .smdl-new { flex: 0 0 auto; }
.smdl-iconbtn {
  appearance: none; border: 0; background: transparent; color: var(--ink-2);
  width: 36px; height: 36px; border-radius: var(--ctl-radius, 6px); cursor: pointer;
  display: grid; place-items: center; position: relative;
}
.smdl-iconbtn:hover { background: var(--surface-2); color: var(--ink); }
/* Notifications are persistent status, not an unlabelled decorative glyph.
   A quiet surface and hairline keep the bell findable before it has a badge. */
.smdl-iconbtn.platform-notif-bell {
  border: 1px solid var(--smdl-hair);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}
.smdl-iconbtn.platform-notif-bell:hover { background: var(--surface-2); }
.smdl-avatar {
  width: 30px; height: 30px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--accent-deep, var(--accent)); color: var(--on-accent, #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 {
  /* --accent-deep, not --accent. A filled control with a label on it has to
     clear 4.5:1, and the tile does not in every product: ITSM's green is
     3.62:1 against white and HRIS's teal 4.42:1. --accent stays what it has
     always been — the graphical tile for seat cells, meters and rings. */
  appearance: none; border: 0; background: var(--accent-deep, var(--accent));
  color: var(--on-accent, #fff);
  font: inherit; font-size: 14px; font-weight: 600; height: 36px; padding: 0 13px;
  border-radius: var(--ctl-radius, 6px); 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: var(--ctl-radius, 6px); 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: var(--ctl-radius, 6px);
}
[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% + 8px); right: 0;
  width: min(340px, calc(100vw - 16px));
  background: var(--surface); border-radius: var(--radius-lg); 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; overscroll-behavior: contain;
}
.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: var(--radius-sm); 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; }
}

/* ---------------------------------------------------------------- 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. */
/* Two tracks, and only the first one scrolls. The rail used to be a single
   scrolling flex column with the identity block as its last child, held down
   by a spring that collapses to nothing the moment the rows overflow -- so on
   any laptop the account, the appearance control and the way out all sat below
   the fold, in a rail whose own comment promised they were pinned to the foot.
   A grid puts the destinations in a bounded scrolling track and the identity in
   a track that cannot scroll away. */
.smdl-side {
  grid-area: side; background: var(--smdl-rail); padding: 10px 10px 12px;
  border-right: 1px solid var(--rail-hair);
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0; overflow: hidden;
}
/* The destinations. Reserving the scrollbar's gutter keeps the labels from
   reflowing the instant the rail starts to scroll, and the fade says there is
   more below rather than letting the last row look clipped. */
.smdl-side-scroll {
  display: flex; flex-direction: column; gap: 2px;
  min-height: 0; overflow-y: auto; overflow-x: hidden;
  scrollbar-gutter: stable; scrollbar-width: thin;
}
.smdl-side-scroll.is-overflowing {
  mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent);
}
/* Land on the row you are on, even when it is far down the rail. */
.smdl-side a { scroll-margin-block: 12px; }

/* A saved view's count. The number is the reason to look at the view rather
   than the queue it filters, so it is served with the row rather than drawn on
   a beat later by a script. Tabular figures so the column does not jitter.

   `.smdl-railcount`, NOT `.smdl-count`: that name already belongs to the
   status-filter segment further down this file. Two unrelated components on
   one class is how the filter row ended up painted in the rail's accent tint
   and vanishing whenever the rail was collapsed. */
.smdl-railcount {
  margin-left: auto; flex: 0 0 auto;
  min-width: 20px; padding: 0 5px;
  border-radius: 999px;
  background: var(--rail-active); color: var(--accent-deep, var(--accent-ink));
  font-size: 11px; font-weight: 650; line-height: 17px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.smdl-side a.is-active .smdl-railcount { background: var(--rail-hover); }
.smdl.is-slim .smdl-railcount { display: none; }

/* Configuration, at the foot and out of the work. It sits above the identity
   block in the rail's non-scrolling track, so it is reachable at any height. */
.smdl-gear {
  margin: 0 8px 4px;
  color: var(--rail-quiet);
}
.smdl-gear:hover { color: var(--rail-ink-strong); }
/* The way back out of the configuration region. */
.smdl-navback { color: var(--rail-quiet); font-weight: 600; }
.smdl-navback:hover { color: var(--rail-ink-strong); }
.smdl.is-slim .smdl-gear { margin-inline: auto; }
/* Section labels separate the platform rail from the app's own destinations.
   There is deliberately NO rule above the first one. */
/* A caption is a label, not a row. It inherited the rail's 20px line box and
   so cost 38px -- 86% of a destination -- three times over. */
.smdl-cap {
  font-size: 10.5px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase;
  line-height: 14px;
  color: var(--rail-quiet); padding: 12px 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-scroll > .smdl-soon {
  position: relative; display: flex; align-items: center; gap: 10px;
  height: 34px; padding: 0 10px; border-radius: var(--ctl-radius, 6px);
  color: var(--rail-ink); text-decoration: none; font-size: 13.5px; font-weight: 550;
  white-space: nowrap;
}
/* The collapsed rail is 64px including its 1px border. Symmetric 10px padding
   leaves 43px, into which the 44px rows only fit by overflowing to the left —
   which happened to centre them on 32 while anything that filled the box (the
   Collapse button) centred on 31.5. 9 right / 10 left makes the box 44 so every
   row, overflowing or not, centres on the same line. Same rule at 900px. */
.smdl.is-slim .smdl-side { padding-right: 9px; }
.smdl.is-slim .smdl-side a,
.smdl.is-slim .smdl-side-soon,
.smdl.is-slim .smdl-side-scroll > .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 {
  /* --accent-deep, not --accent-ink. The active row is the app's ink on its own
     soft tint, and that pairing measures 3.82 to 4.38 in five of the six
     products — under the floor for the one row in the rail whose whole job is
     to say where you are. The deeper step clears it in all six. */
  background: var(--rail-active); color: var(--accent-deep, 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-scroll > .smdl-soon .ic {
  flex: none; opacity: .92;
  margin-inline: calc((var(--rail-icon-col) - var(--icn)) / 2);
}
.smdl-side a .lbl, .smdl-side-soon .lbl, .smdl-side-scroll > .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-scroll > .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-scroll > .smdl-soon { color: var(--rail-quiet); cursor: default; }
.smdl-side-soon .smdl-soon, .smdl-side-scroll > .smdl-soon .soon {
  background: var(--rail-hover); color: var(--rail-quiet);
}
.smdl.is-slim .smdl-side-soon .smdl-soon,
.smdl.is-slim .smdl-side-scroll > .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; }
/* WHO IS SIGNED IN, at the foot of the rail. A bare initials circle in the
   top bar said who you were and nothing about where you were; the rail says
   both, and the menu that belongs to an identity now hangs off the identity
   rather than off a corner of the chrome. smdlPlaceMenu already flips a
   popover above its trigger when there is no room below, so sitting at the
   bottom of the rail is all this needed. */
.smdl-side-foot {
  position: relative;
  margin: 6px 8px 0;
  padding-top: 8px;
  border-top: 1px solid var(--rail-hair);
}
.smdl-org {
  display: flex; align-items: center; gap: 9px;
  width: 100%; min-width: 0;
  padding: 7px 8px;
  border: 0; border-radius: var(--radius);
  background: none; -webkit-appearance: none; appearance: none;
  font: inherit; text-align: left; cursor: pointer;
  color: var(--rail-ink, var(--ink-2));
  transition: background .14s ease;
}
.smdl-org:hover { background: var(--rail-hover); }
.smdl-org:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.smdl-org[aria-expanded="true"] { background: var(--rail-hover); }
.smdl-org .avatar {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 650; letter-spacing: .01em;
}
/* Two lines that must never widen the rail: the name and the organisation
   both truncate rather than push. */
.smdl-org .who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.smdl-org .who b {
  font-size: 12.5px; line-height: 16px; font-weight: 600;
  color: var(--rail-ink-strong, var(--ink));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.smdl-org .who .org {
  font-size: 11.5px; line-height: 14px; font-weight: 500;
  color: var(--rail-ink-quiet, var(--ink-3));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Slim: the initials are the whole control, centred like every other rail
   item, and the two lines of text are gone rather than clipped. */
.smdl.is-slim .smdl-side-foot { margin-left: 6px; margin-right: 6px; }
.smdl.is-slim .smdl-org { justify-content: center; padding: 7px 0; gap: 0; }
.smdl.is-slim .smdl-org .who { display: none; }

[data-smdl-side-toggle] {
  appearance: none; border: 0; background: transparent; color: var(--rail-quiet);
  border-radius: var(--ctl-radius, 6px); height: 32px; margin: 8px 0 0; cursor: pointer;
  display: flex; align-items: center; justify-content: flex-start; gap: 10px;
  padding: 0 10px; font: inherit; font-size: 12px; font-weight: 550;
}
[data-smdl-side-toggle]:hover { background: var(--rail-hover); color: var(--rail-ink-strong); }
/* Its glyph is a rail icon like any other, so it takes the icon column too;
   collapsed, the same symmetric margin centres it in the 44px row. */
[data-smdl-side-toggle] .ic {
  margin-inline: calc((var(--rail-icon-col) - var(--icn)) / 2);
  transition: transform .15s;
}
.smdl.is-slim [data-smdl-side-toggle] { justify-content: center; padding: 0; gap: 0; }
.smdl.is-slim [data-smdl-side-toggle] .ic { transform: rotate(180deg); }
.smdl.is-slim [data-smdl-side-toggle] .lbl { display: none; }
@media (prefers-reduced-motion: reduce) { [data-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: var(--radius-sm); white-space: nowrap;
  pointer-events: none; z-index: 200; display: none;
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .45);
}

/* ---------------------------------------------------------------- canvas */
/* Page identity now lives in the top application chrome. Keep the scrollport's
   actual top padding at zero so sticky controls can still pin flush to it; a
   first-child spacer supplies the initial breathing room and scrolls away with
   the page. */
.smdl-canvas {
  --smdl-content-gap: 32px;
  grid-area: canvas; min-width: 0; overflow-y: auto; overflow-x: hidden;
  padding: 0 32px 48px;
}
.smdl-canvas::before {
  display: block;
  height: var(--smdl-content-gap);
  content: "";
}
.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-soon, .smdl-side-scroll > .smdl-soon { justify-content: center; padding: 0; width: 44px; margin: 0 auto; }
  /* Same visually-hidden treatment as the is-slim rule above, for the same
     reason: `display: none` would take the label out of the accessibility tree
     and leave every rail link announcing as a bare "link". */
  .smdl-side a .lbl, .smdl-side-soon .lbl, .smdl-side-scroll > .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;
  }
  .smdl-side-soon .smdl-soon, .smdl-side-scroll > .smdl-soon .soon, .smdl-badge { display: none; }
  .smdl-side a[data-count] .dot2 { display: block; }
  .smdl-corner { padding: 0 9px 0 10px; }
  .smdl-side { padding-right: 9px; }
  .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; }
  [data-smdl-side-toggle] { display: none; }
  .smdl-canvas { --smdl-content-gap: 24px; padding: 0 24px 40px; }
  .smdl-top {
    grid-template-columns: minmax(0, 1fr) minmax(160px, 320px) minmax(0, 1fr);
    padding: 0 12px;
  }
  .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; }
  /* Only a table with nothing already scrolling it. `display: block` drops a
     table out of table layout — every column becomes shrink-to-fit and the
     header row stops lining up with its body — and the products wrap their
     own tables in .tablewrap, which already scrolls. This was re-declaring
     every one of them as a block box for no gain. */
  .smdl-canvas :not(.tablewrap) > 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: 6px;
  --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: var(--radius-sm);
  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: var(--radius-badge, 4px);
  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-calendar::before,
.ic.icon-calendar-days::before,
.ic.icon-chart-column::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-up::before,
.ic.icon-chevron-down::before,
.ic.icon-chevron-right::before,
.ic.icon-circle::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-off::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-list-todo::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-network::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-folder-git-2::before,
.ic.icon-workflow::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-user-round-plus::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-calendar::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22M8%202v4%22%20/%3E%20%3Cpath%20d=%22M16%202v4%22%20/%3E%20%3Crect%20width=%2218%22%20height=%2218%22%20x=%223%22%20y=%224%22%20rx=%222%22%20/%3E%20%3Cpath%20d=%22M3%2010h18%22%20/%3E%3C/svg%3E"); }
.icon-calendar-days::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%202v4%22%20%2F%3E%20%3Cpath%20d%3D%22M16%202v4%22%20%2F%3E%20%3Crect%20width%3D%2218%22%20height%3D%2218%22%20x%3D%223%22%20y%3D%224%22%20rx%3D%222%22%20%2F%3E%20%3Cpath%20d%3D%22M3%2010h18%22%20%2F%3E%20%3Cpath%20d%3D%22M8%2014h.01%22%20%2F%3E%20%3Cpath%20d%3D%22M12%2014h.01%22%20%2F%3E%20%3Cpath%20d%3D%22M16%2014h.01%22%20%2F%3E%20%3Cpath%20d%3D%22M8%2018h.01%22%20%2F%3E%20%3Cpath%20d%3D%22M12%2018h.01%22%20%2F%3E%20%3Cpath%20d%3D%22M16%2018h.01%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-chart-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%22M3%203v16a2%202%200%200%200%202%202h16%22%20%2F%3E%20%3Cpath%20d%3D%22M18%2017V9%22%20%2F%3E%20%3Cpath%20d%3D%22M13%2017V5%22%20%2F%3E%20%3Cpath%20d%3D%22M8%2017v-3%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-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%22m18%2015-6-6-6%206%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::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%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-off::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22m2%202%2020%2020%22%20/%3E%20%3Cpath%20d=%22M5.782%205.782A7%207%200%200%200%209%2019h8.5a4.5%204.5%200%200%200%201.307-.193%22%20/%3E%20%3Cpath%20d=%22M21.532%2016.5A4.5%204.5%200%200%200%2017.5%2010h-1.79A7.008%207.008%200%200%200%2010%205.07%22%20/%3E%3C/svg%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-list-todo::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%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%226%22%20height%3D%226%22%20rx%3D%221%22%20%2F%3E%20%3Cpath%20d%3D%22m3%2017%202%202%204-4%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-network::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%20x%3D%2216%22%20y%3D%2216%22%20width%3D%226%22%20height%3D%226%22%20rx%3D%221%22%20%2F%3E%20%3Crect%20x%3D%222%22%20y%3D%2216%22%20width%3D%226%22%20height%3D%226%22%20rx%3D%221%22%20%2F%3E%20%3Crect%20x%3D%229%22%20y%3D%222%22%20width%3D%226%22%20height%3D%226%22%20rx%3D%221%22%20%2F%3E%20%3Cpath%20d%3D%22M5%2016v-3a1%201%200%200%201%201-1h12a1%201%200%200%201%201%201v3%22%20%2F%3E%20%3Cpath%20d%3D%22M12%2012V8%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-folder-git-2::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%22M9%2020H4a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h3.9a2%202%200%200%201%201.69.9l.81%201.2a2%202%200%200%200%201.67.9H20a2%202%200%200%201%202%202v3%22%20%2F%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%2212%22%20r%3D%222%22%20%2F%3E%3Cpath%20d%3D%22M18%2019c-2.8%200-5-2.2-5-5v8%22%20%2F%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2219%22%20r%3D%222%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-workflow::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%3Crect%20width%3D%228%22%20height%3D%228%22%20x%3D%223%22%20y%3D%223%22%20rx%3D%222%22%20%2F%3E%3Cpath%20d%3D%22M7%2011v4a2%202%200%200%200%202%202h4%22%20%2F%3E%3Crect%20width%3D%228%22%20height%3D%228%22%20x%3D%2213%22%20y%3D%2213%22%20rx%3D%222%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-user-round-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%22M2%2021a8%208%200%200%201%2013.292-6%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%22M19%2016v6%22%20%2F%3E%20%3Cpath%20d%3D%22M22%2019h-6%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 white field, in the middle of the top bar, in every application. It
   searches the route the reader is standing on first. Only a miss widens to
   the rest of this application and the suite, so the common action is fast and
   the broad answer is automatic rather than hidden behind a scope control.
   ------------------------------------------------------------------------ */
/* The same control every product carries. */
/* THE SUITE'S SEARCH FIELD, to the Admin Center's geometry: 40px tall, a 10px
   radius, and a real 1px border rather than an inset hairline pretending to be
   one. It was a 34px pill here and a rounded rectangle there, which is two
   different controls doing one job across one product family.
   The HUE stays each product's own — Datacenter focuses in violet, ITSM in
   green — because a shared shell painting every field in CORE's blue would
   undo the one thing the accent is for. Only the shape is shared. */
.smdl-search {
  grid-column: 2; position: relative; min-width: 0;
  display: flex; align-items: center; gap: 9px;
  height: 36px; padding: 0 12px;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--ink) 11%, transparent);
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 2px rgba(12, 16, 24, .025);
  transition: border-color .12s ease, box-shadow .12s ease;
}
/* The ring belongs to the field, not the input inside it. */
.smdl-search:has(.smdl-search-input:focus, input[data-smdl-search-input]:focus) {
  /* Focus deepens the border and lays a soft halo outside it, so the field
     lifts without a hard 2px ring shouting something the caret already said. */
  background: var(--card);
  border-color: color-mix(in srgb, var(--accent) 62%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}
/* Put the magnifier immediately before the query. */
.smdl-search > .ic { order: 1; 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: 2; flex: 1 1 auto; min-width: 0; border: 0; background: none; font: inherit;
  font-size: 14px; color: var(--ink); height: 100%; padding: 0; 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-search-clear {
  order: 3; appearance: none; width: 24px; height: 24px; flex: none; padding: 0;
  border: 0; border-radius: var(--radius-badge, 4px); background: transparent; color: var(--ink-3);
  cursor: pointer; display: grid; place-items: center;
}
.smdl-search-clear:hover { background: var(--surface-2); color: var(--ink); }
.smdl-search-clear:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.smdl-search-clear .ic { width: auto; height: auto; font-size: 14px; }
.smdl-search-clear[hidden] { display: none; }
.smdl-search-shortcut {
  order: 3; flex: none; border: 0; background: transparent; color: var(--ink-3);
  font: inherit; font-size: 10.5px; line-height: 1; white-space: nowrap;
}
.smdl-search-shortcut[hidden] { display: none; }

.smdl-search-pop {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60;
  background: var(--surface); border-radius: var(--radius-lg); padding: 8px;
  max-height: min(66vh, 460px); overflow-y: auto; overscroll-behavior: contain;
  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-heading {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 10px 5px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .045em; text-transform: uppercase; color: var(--ink-3);
}
.smdl-search-heading small {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink-3); font-size: 10px; font-weight: 520;
  letter-spacing: 0; text-transform: none;
}
.smdl-search-page-miss {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  gap: 9px; margin-bottom: 4px; padding: 9px 10px; border-radius: var(--ctl-radius, 6px);
  background: var(--surface-2); color: var(--ink-2);
}
.smdl-search-page-miss > .ic { color: var(--ink-3); font-size: 17px; }
.smdl-search-page-miss strong, .smdl-search-page-miss small { display: block; }
.smdl-search-page-miss strong { color: var(--ink); font-size: 12px; font-weight: 620; }
.smdl-search-page-miss small { margin-top: 2px; color: var(--ink-3); font-size: 10.5px; }
.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: var(--ctl-radius, 6px); color: var(--ink); text-decoration: none;
}
.smdl-search-item:hover, .smdl-search-item.is-active { background: var(--surface-2); }
.smdl-search-item:focus-visible {
  outline: 2px solid var(--accent-ink); outline-offset: -2px;
  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 { display: grid; gap: 3px; padding: 18px 10px; color: var(--ink-3); text-align: center; }
.smdl-search-empty strong { color: var(--ink); font-size: 12.5px; }
.smdl-search-empty small { font-size: 11px; }
/* `--amber` and `--amber-ink` are defined in no stylesheet in any product, so
   this rule painted a transparent background and inherited ink: the one state
   that tells a reader their search could not be run looked exactly like a
   result. The family's warning pair is what every other warning here uses. */
.smdl-search-error {
  border-radius: var(--ctl-radius, 6px);
  background: var(--warn-soft, color-mix(in srgb, var(--ink-3) 10%, transparent));
  color: var(--warn, var(--ink-2));
}

/* ---------------------------------------------------------------- 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 {
  /* --ctl-h, not a number of its own. The trigger stands in for a native
     select on a filter row beside a .btn and a search field, and 36 against
     34 put three control heights in every one of those rows. */
  appearance: none; box-sizing: border-box; width: 100%; min-width: 0;
  min-height: var(--ctl-h, 34px);
  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% + 8px); 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: var(--radius-sm); 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); }
}
@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) minmax(0, 1fr);
  }
  .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, search and page identity take dedicated rows inside
     the application chrome. The title never falls back into the canvas, and
     contextual actions remain beside it instead of overlapping global tools. */
  .smdl-top {
    grid-template-columns: minmax(0, 1fr) max-content max-content;
    column-gap: 8px;
  }
  .smdl-search, .smdl-search-gap { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  /* The label STAYS. This used to squeeze the control to a bare plus because
     it shared the top bar with the search field; on its own row in the page
     header it has the width, and a plus with a caret beside it does not say
     what it makes. */
  .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); }

/* On a phone the application rail becomes a full-width, horizontally
   scrollable icon strip. Every destination stays available without reserving
   a permanent sidebar or allowing the working canvas to overflow. */
@media (max-width: 760px) {
  .smdl, .smdl.is-slim {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 148px auto minmax(0, 1fr);
    grid-template-areas: "top" "side" "canvas";
    position: relative;
  }
  /* Global identity and utilities occupy row one, search owns row two, and
     the page title plus contextual actions share row three. All three remain
     application chrome; the canvas starts with content rather than a spare
     heading band. */
  .smdl-corner {
    display: flex;
    position: absolute; inset: 0 auto auto 0;
    /* Reserve 232px for the widest shipped phone toolbar (204px), its
       10px edge inset, and an 18px non-overlap gap. The app name can
       truncate; global tools must stay visible and tappable. */
    width: min(168px, calc(100% - 232px)); height: 56px;
    padding: 0 8px 0 10px;
    border-right: 0; border-bottom: 1px solid var(--rail-hair);
    z-index: 55;
  }
  .smdl-switch-btn {
    justify-content: flex-start; gap: 7px; min-width: 0; overflow: hidden; padding: 6px;
  }
  .smdl-appname {
    display: block; font-size: 12.5px;
  }
  .smdl-top {
    min-height: 148px;
    grid-template-columns: minmax(0, 1fr) max-content max-content;
    grid-template-rows: 56px 48px 36px;
    column-gap: 8px;
    padding: 0 10px 8px;
  }
  .smdl-top .smdl-heading {
    grid-column: 1; grid-row: 3; align-self: center;
  }
  .smdl-search-shortcut { display: none; }
  .smdl-search,
  .smdl-search-gap { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  /* Let each tool group participate in the header grid at phone widths. This
     is the responsive fallback that separates page actions from persistent
     notification/create controls without moving either out of the chrome. */
  .smdl-tools { display: contents; }
  .smdl-tools > .topbar-actions,
  .smdl-tools > .smdl-pageactions {
    grid-column: 2 / -1; grid-row: 3; justify-self: end;
    max-width: min(52vw, 280px); margin-right: 0;
  }
  .smdl-tools > .platform-notif,
  .smdl-tools > .notif { grid-column: 2; grid-row: 1; align-self: center; }
  .smdl-tools > .smdl-new { grid-column: 3; grid-row: 1; align-self: center; }
  .smdl-tools > .btn { grid-column: 2 / -1; grid-row: 1; align-self: center; }
  .smdl-side {
    min-width: 0;
    flex-direction: row;
    align-items: center;
    gap: 3px;
    padding: 7px 9px;
    border-right: 0;
    border-bottom: 1px solid var(--rail-hair);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  .smdl-side::-webkit-scrollbar { display: none; }
  .smdl-side a,
  .smdl-side-soon,
  .smdl-side-scroll > .smdl-soon {
    flex: 0 0 auto;
    width: auto;
    height: 40px;
    margin: 0;
    padding: 0 10px;
    gap: 7px;
    justify-content: center;
  }
  .smdl-side a .lbl,
  .smdl-side-soon .lbl,
  .smdl-side-scroll > .smdl-soon .lbl {
    position: static; width: auto; height: auto; margin: 0; padding: 0;
    overflow: visible; clip: auto; clip-path: none;
    white-space: nowrap; border: 0;
  }
  .smdl-side-scroll > .smdl-cap,
  .smdl-side-scroll > .smdl-spring,
  .smdl-side-scroll > .smdl-side-spring,
  [data-smdl-side-toggle] { display: none; }
  .smdl-side-foot { flex: 0 0 auto; margin: 0; }
  .smdl-org { min-height: 40px; padding: 6px 10px; }
  .smdl.is-slim .smdl-org { justify-content: flex-start; padding: 6px 10px; gap: 7px; }
  .smdl.is-slim .smdl-org .who { display: flex; }
  .smdl-canvas { --smdl-content-gap: 24px; min-width: 0; padding: 0 16px 32px; }
}

/* 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; }

/* Motion is useful only when the reader has not asked for less of it. Keep
   state changes immediate and deterministic for reduced-motion users; this
   also prevents long transform transitions from making drawers and menus feel
   stuck on lower-powered clients. */
@media (prefers-reduced-motion: reduce) {
  .smdl, .smdl *, .smdl *::before, .smdl *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* A flash message can be put away. It was pinned in the query string, so it
   came back on every reload and on every use of the back button, and there was
   nothing to press. */
.banner { position: relative; }
.banner .banner-x {
  position: absolute; top: 6px; right: 8px;
  appearance: none; border: 0; background: none; cursor: pointer;
  color: inherit; opacity: .6; font-size: 16px; line-height: 1; padding: 4px 6px;
}
.banner .banner-x:hover { opacity: 1; }
/* ------------------------------------------------- the counts ARE the filter

   A queue's status filter was a <select>: it hid how much work was in each
   state behind a closed menu, so the only number on the page was the one for
   the state you had already chosen. The count row replaces it. Each segment
   states a state and how many are in it, and pressing the segment is how you
   filter to it — the metric and the control are one object.

   It is a nav of links, not a form: every state is a real URL, so a view is
   linkable, back works, and it needs no JavaScript. The first segment is the
   page's own bare URL — no empty status parameter — and every other segment
   carries the page's remaining filters in its href.

   Markup:
     <nav class="smdl-counts" aria-label="Filter by status">
       <a class="smdl-count is-on" href="/acme/tickets" aria-current="page">
         <span class="k">Open</span><b>12</b></a>
       <a class="smdl-count" href="/acme/tickets?status=waiting">
         <span class="k">Waiting</span><b>3</b><span class="d">2 over SLA</span></a>
     </nav>                                                                  */
/* THE COUNT ROW IS A SEGMENTED CONTROL. It reads as one object — a track with
   the chosen segment raised out of it — rather than as loose links under a
   rule, because that is what it is: one choice among a fixed few, always
   exactly one of them taken. Same geometry as .smdl-seg so the suite has ONE
   segmented control and not two that almost match: --ctl-h tall, 3px of track
   around a 28px segment, and both radii come from the scale so they move with
   it: --radius-lg on the track, --radius-sm on the segment.

   Selection is ELEVATION — a raised card surface — never a tint and never the
   accent. An accent here would compete with the one loud thing these pages are
   allowed: the state of the estate. */
.smdl-counts {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: var(--ctl-h, 34px);
  max-width: 100%;
  padding: 3px;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--surface-2, var(--inset));
  box-shadow: inset 0 0 0 1px var(--smdl-hair, var(--hair-soft));
  overflow-x: auto;
  scrollbar-width: none;
}
.smdl-counts::-webkit-scrollbar { display: none; }
.smdl-count {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  position: relative;
  height: 28px;
  padding: 0 11px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  text-decoration: none;
  color: var(--ink-2);
  transition: background .14s ease, color .14s ease, box-shadow .14s ease;
}
.smdl-count:hover { color: var(--ink); text-decoration: none; }
.smdl-count:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}
/* The chosen segment is a raised card, which carries the state without colour
   and without the rule this row used to lean on. */
.smdl-count.is-on {
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--smdl-hair, var(--hair-soft)),
              0 1px 2px rgba(16, 24, 40, .06);
}
.smdl-count.is-on b { color: var(--ink-2); }
.smdl-count.is-on .k { color: var(--ink); }
.smdl-count.is-on .d { color: var(--ink-3); }
.smdl-count .k {
  font-size: 12.5px; line-height: 1; font-weight: 600;
  letter-spacing: 0; text-transform: none;
  color: inherit;
  white-space: nowrap;
}
.smdl-count.is-on .k { font-weight: 650; }
.smdl-count b {
  font-size: 12.5px; line-height: 1; font-weight: 600;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}
/* A segment's detail keeps its information without earning a second line:
   "Down 1 · 1 firing". */
.smdl-count .d {
  font-size: 12px; line-height: 1;
  color: var(--ink-3);
  white-space: nowrap;
}
.smdl-count .d::before { content: "· "; color: var(--ink-4); }
/* A segment that is a reading and not a filter — a total, an average. It keeps
   the row's rhythm but must not look pressable. */
.smdl-count.is-static { cursor: default; }
.smdl-count.is-static:hover { color: var(--ink-2); }
/* The row that carries the control, and anything that belongs beside it
   rather than inside it. */
.smdl-countrow {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  min-width: 0;
}
/* A link across a boundary the segments do not cross — the decommission line,
   the archive. Quiet, and never shaped like a segment. */
.smdl-crossover {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; line-height: 1;
  color: var(--ink-3);
  text-decoration: none;
  white-space: nowrap;
}
.smdl-crossover:hover { color: var(--ink-2); text-decoration: underline; }
.smdl-crossover:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-badge); }
.smdl-crossover b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.smdl-crossover .d { color: var(--ink-4); }
.smdl-crossover .d::before { content: "· "; }

/* Narrow: the track scrolls inside itself rather than crushing five numbers
   into a phone, and the segments keep their own width. */
@media (max-width: 760px) {
  .smdl-counts { scroll-snap-type: x proximity; }
  .smdl-count { scroll-snap-align: start; }
}

/* The search sits in the middle track of the top bar's own symmetric grid, so
   it is centred on the CONTENT COLUMN — the space a reader is actually looking
   at. It used to be pulled out of that grid and re-centred on the viewport,
   which put it left of everything it sat above by half the rail's width. */
.smdl-top > .smdl-search {
  grid-column: 2; grid-row: 1;
  width: 100%; min-width: 0;
  justify-self: center;
}
@media (max-width: 760px) {
  .smdl-top > .smdl-search {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* Compact desktop: retain every control, but give search its own row before
   the title and actions run out of room. Phone navigation keeps its existing
   layout below 761px. This rule is shared by every cloud application. */
@media (min-width: 761px) and (max-width: 1160px) {
  .smdl-top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(34px, auto) 40px;
    gap: 12px 16px;
    padding: 12px 24px;
  }
  .smdl-top > .smdl-search,
  .smdl-top > .smdl-search-gap {
    grid-column: 1 / -1; grid-row: 2;
    width: min(440px, 100%); min-width: 0; justify-self: center;
  }
  .smdl-tools { grid-column: 2; grid-row: 1; }
}

/* Active run controls must remain visible, including approval and cancellation.
   A second search row is intentional when live actions need more room; hiding
   a horizontal scrollbar made destructive/recovery controls look truncated. */
@media (min-width: 761px) and (max-width: 1600px) {
  .smdl-top:has(.smdl-live-actions) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    grid-template-rows: minmax(34px, auto) 40px;
    gap: 12px 16px;
  }
  .smdl-top:has(.smdl-live-actions) > .smdl-search,
  .smdl-top:has(.smdl-live-actions) > .smdl-search-gap {
    grid-column: 1 / -1; grid-row: 2;
    width: min(440px, 100%); justify-self: center;
  }
  .smdl-top:has(.smdl-live-actions) .smdl-tools {
    grid-column: 2; grid-row: 1; flex-wrap: wrap; justify-content: flex-end;
  }
  .smdl-top:has(.smdl-live-actions) .topbar-actions {
    overflow: visible; flex: 0 1 auto; margin-right: 0;
  }
  .smdl-top .smdl-live-actions { min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
}

/* Connected workspace: common reading geometry, not product-specific skins. */
.smdl-canvas :where(.page, .ud) { width: 100%; max-width: none; margin-inline: 0; }
.smdl-canvas :where(.btn, button, input, select) { font-size: 14px; }
.smdl-canvas :where(.btn, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select) { min-height: 36px; }
.smdl-canvas :where(.list, .ticket-table) { font-size: 14px; line-height: 20px; }
.smdl-canvas :where(.list, .ticket-table) th { font-size: 12px; line-height: 18px; }
.smdl-canvas :where(.list, .ticket-table) td { padding-block: 14px; }
.smdl-canvas :where(.rowsub, .muted, .hint, .note) { font-size: 12px; line-height: 18px; }
.smdl-canvas :where(.list, .ticket-table) tbody > tr { background: var(--surface); }
.smdl-canvas :where(.list, .ticket-table) tbody > tr:hover { background: var(--surface-2); }
.smdl-canvas :where(.tablewrap, .ticket-table-wrap) { min-width: 0; max-width: 100%; overflow-x: auto; position: relative; }
.smdl-mobile-nav-toggle { display: none; }
/* CORE uses these named slots instead of the product template's heading.
   They are aliases, not a second header implementation. */
.smdl-top > .smdl-pagetitle { grid-column: 1; grid-row: 1; align-self: center; min-width: 0; overflow: hidden; }
.smdl-top.smdl-pagehead { display: grid; align-items: center; min-width: 0; }
.smdl-pagetitle { display: flex; align-items: center; min-width: 0; }
.smdl-pagetitle h1, .smdl-pagetitle .smdl-section-label { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.smdl-pagetitle p { display: none; }
.smdl-pageactions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; flex: 0 1 auto; min-width: 0; }
.smdl-canvas:has(> .local-nav) { padding-top: 0; }
.smdl-canvas .local-nav { position: sticky; top: 0; z-index: 20; background: var(--canvas); margin: 0 0 18px; padding: 0; }
.smdl.is-focus .smdl-new-btn, .smdl.is-focus .smdl-switch-btn .chev { display: none; }
.smdl.is-focus .smdl-switch-btn { pointer-events: none; }
.smdl .smdl-side .user-pop .user-pop-item { width: 100%; min-height: 36px; height: auto; margin: 0; padding: 8px 10px; justify-content: flex-start; gap: 9px; color: var(--ink); white-space: normal; }
.smdl .smdl-side .user-pop .user-pop-item .ic { margin-inline: 0; }
.smdl .smdl-side .user-pop .user-pop-item .lbl { position: static; width: auto; height: auto; margin: 0; padding: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; }
.ic.icon-link::before, .ic.icon-video::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; }
.smdl-mobile-navigation {
  position: fixed; inset: 0 auto 0 0; width: min(320px, 100vw); height: 100dvh;
  max-width: 100vw; max-height: 100dvh; margin: 0; padding: 0;
  background: var(--surface); color: var(--ink); border: 0;
  box-shadow: 12px 0 40px rgba(17,24,39,.12);
}
.smdl-mobile-navigation[open] { display: flex; flex-direction: column; }
.smdl-mobile-navigation::backdrop { background: var(--scrim); }
.smdl-mobile-navigation-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; border-bottom: 1px solid var(--line); }
.smdl-mobile-navigation .smdl-side {
  display: flex; flex-direction: column; align-items: stretch; gap: 3px;
  width: 100%; min-height: 0; padding: 16px 12px; overflow-y: auto; overflow-x: hidden;
}
.smdl-mobile-navigation .smdl-side a,
.smdl-mobile-navigation .smdl-side-soon { width: 100%; min-height: 40px; padding: 8px 12px; justify-content: flex-start; }
.smdl-mobile-navigation .smdl-side .lbl { position: static; width: auto; height: auto; clip: auto; clip-path: none; white-space: normal; overflow: visible; }
.smdl-mobile-navigation .smdl-cap { display: block; height: auto; margin: 20px 12px 6px; padding: 0; overflow: visible; box-shadow: none; }
.smdl-mobile-navigation .smdl-side-foot { margin-top: auto; padding-top: 24px; }
.smdl-mobile-navigation [data-smdl-side-toggle] { display: none; }
@media (max-width: 760px) {
  .smdl.has-mobile-navigation { grid-template-rows: 148px minmax(0, 1fr); grid-template-areas: "top" "canvas"; }
  .smdl.has-mobile-navigation > .smdl-side { display: none; }
  .smdl.has-mobile-navigation .smdl-mobile-nav-toggle { display: grid; flex: none; margin-right: 8px; }
  .smdl-top { padding-inline: 16px; }
  .smdl-top > .smdl-pagetitle { grid-column: 1; grid-row: 3; }
  .smdl-mobile-navigation[open] { animation: smdl-navigation-enter 200ms cubic-bezier(.16,1,.3,1); }
}
@keyframes smdl-navigation-enter { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .smdl-mobile-navigation[open] { animation: none; } }
.icon-link::before { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http:%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%2013a5%205%200%200%200%207.54.54l3-3a5%205%200%200%200-7.07-7.07l-1.72%201.71%22%20%2F%3E%20%3Cpath%20d%3D%22M14%2011a5%205%200%200%200-7.54-.54l-3%203a5%205%200%200%200%207.07%207.07l1.71-1.71%22%20%2F%3E%3C%2Fsvg%3E"); }
.icon-video::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%2013%205.223%203.482a.5.5%200%200%200%20.777-.416V7.934a.5.5%200%200%200-.777-.416L16%2011%22%20%2F%3E%3Crect%20x%3D%222%22%20y%3D%226%22%20width%3D%2214%22%20height%3D%2212%22%20rx%3D%222%22%20%2F%3E%3C%2Fsvg%3E"); }