/* ==========================================================================
   HalloFrame UI — design system condiviso dei frame HALLOVPS
   --------------------------------------------------------------------------
   Fonte unica: HalloFrame/_ui/hf-ui.css  (copiata in ogni frame da
   HalloFrame/_ui/sync.sh → app/static/css/hf-ui.css o static/hf-ui.css).
   NON modificare le copie nei frame: modifica _ui/hf-ui.css e rilancia sync.

   Linguaggio visivo = quello della dashboard Hallotech (app.hallotech.it):
   ink #071013, carta #f5f8f3, menta #63ee9a / #18a76b, Inter, raggi 10/14.
   Ogni frame dichiara solo il proprio colore in app.css:
       :root { --hf-accent: #e88b3a; }
   (lo stesso `color` che ha nella sidebar Hallotech, DEFAULT_FRAMES).

   Vocabolario markup: HalloFrame/_ui/README.md
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Palette piattaforma --- */
  --hf-ink: #071013;
  --hf-graphite: #1d272b;
  --hf-text: #16232a;
  --hf-muted: #607076;
  --hf-faint: #8d9ca1;
  --hf-line: #dde5e1;
  --hf-line-strong: #c6d1cc;
  --hf-paper: #f5f8f3;
  --hf-panel: #ffffff;
  --hf-panel-soft: #f8faf8;
  --hf-mint: #63ee9a;
  --hf-mint-dark: #18a76b;

  /* --- Accento del frame (override in app.css) --- */
  --hf-accent: #18a76b;
  --hf-accent-ink: #ffffff;
  --hf-accent-soft: color-mix(in srgb, var(--hf-accent) 12%, white);
  --hf-accent-line: color-mix(in srgb, var(--hf-accent) 28%, white);
  --hf-accent-text: color-mix(in srgb, var(--hf-accent) 82%, black);

  /* --- Semantici --- */
  --hf-ok: #15803d;      --hf-ok-soft: #dcfce7;
  --hf-warn: #b45309;    --hf-warn-soft: #fef3c7;
  --hf-danger: #b42318;  --hf-danger-soft: #fee2e2;
  --hf-info: #2f5fdd;    --hf-info-soft: #e3eafd;

  /* --- Forma --- */
  --hf-radius: 10px;
  --hf-radius-lg: 14px;
  --hf-radius-sm: 8px;
  --hf-shadow: 0 1px 2px rgba(7, 16, 19, 0.04), 0 10px 30px rgba(7, 16, 19, 0.05);
  --hf-shadow-lg: 0 24px 70px rgba(7, 16, 19, 0.16);
  --hf-transition: 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --hf-sidebar-w: 256px;
  --hf-content-max: 1240px;

  --hf-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --hf-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

/* Alias retro-compatibili con i vecchi token usati dai template/CSS dei frame */
:root {
  --ink: var(--hf-ink);
  --ink-soft: var(--hf-graphite);
  --muted: var(--hf-muted);
  --line: var(--hf-line);
  --line-strong: var(--hf-line-strong);
  --bg: var(--hf-paper);
  --panel: var(--hf-panel);
  --accent: var(--hf-accent);
  --accent-soft: var(--hf-accent-soft);
  --ok: var(--hf-ok); --ok-soft: var(--hf-ok-soft);
  --warn: var(--hf-warn); --warn-soft: var(--hf-warn-soft);
  --danger: var(--hf-danger); --danger-soft: var(--hf-danger-soft);
  --radius: var(--hf-radius);
  --shadow: var(--hf-shadow);
  --shadow-lg: var(--hf-shadow-lg);
  --mono: var(--hf-mono);
  --sans: var(--hf-sans);
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--hf-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--hf-text);
  background:
    linear-gradient(90deg, rgba(99, 238, 154, 0.05) 0 1px, transparent 1px 72px),
    linear-gradient(180deg, rgba(47, 95, 221, 0.035) 0 1px, transparent 1px 72px),
    var(--hf-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--hf-accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { color: var(--hf-ink); letter-spacing: -0.015em; line-height: 1.2; }
h1 { font-size: 24px; font-weight: 700; }
h2 { font-size: 16px; font-weight: 700; }
h3 { font-size: 14px; font-weight: 700; }
code, kbd, pre { font-family: var(--hf-mono); }
code {
  font-size: 0.88em;
  padding: 1px 6px;
  border-radius: 5px;
  background: rgba(7, 16, 19, 0.06);
  color: var(--hf-graphite);
}
pre code { padding: 0; background: transparent; color: inherit; font-size: inherit; }
hr { border: 0; border-top: 1px solid var(--hf-line); margin: 16px 0; }
:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--hf-accent) 45%, transparent);
  outline-offset: 2px;
  border-radius: 4px;
}
::selection { background: color-mix(in srgb, var(--hf-mint) 45%, white); }

/* ==========================================================================
   UTILITIES
   ========================================================================== */

.muted { color: var(--hf-muted); }
.faint { color: var(--hf-faint); }
.small { font-size: 12.5px; }
.tiny { font-size: 11px; }
.mono { font-family: var(--hf-mono); font-size: 0.92em; }
.right { text-align: right; }
.center { text-align: center; }
.num { font-variant-numeric: tabular-nums; text-align: right; }
.grow { flex: 1 1 auto; min-width: 0; }
.inline { display: inline; }
.block { display: block; width: 100%; }
.nowrap { white-space: nowrap; }
.break { word-break: break-all; overflow-wrap: anywhere; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mb-0 { margin-bottom: 0; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row.end, .row-end { justify-content: flex-end; }
.row.between, .row-between { justify-content: space-between; }
.row.gap { gap: 14px; }
.vstack { display: grid; gap: 12px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.ok { color: var(--hf-ok); }
.warn { color: var(--hf-warn); }
.err, .error-text { color: var(--hf-danger); }
p.err, p.error { color: var(--hf-danger); font-size: 13px; font-weight: 600; margin: 8px 0 0; }
.lede { color: var(--hf-muted); font-size: 14.5px; line-height: 1.55; max-width: 62ch; }

/* Icona generica: <span class="hf-icon" data-icon="bell"></span> */
.hf-icon, [data-icon]::before {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  vertical-align: -4px;
  background-color: currentColor;
  -webkit-mask: var(--hf-i) center / contain no-repeat;
  mask: var(--hf-i) center / contain no-repeat;
}
[data-icon]::before { content: ""; }
.hf-icon::before { content: none; }
.hf-icon { -webkit-mask: none; mask: none; background: none; }
.hf-icon[data-icon]::before { display: block; width: 100%; height: 100%; vertical-align: 0; }
[data-icon].hf-icon-lg, .hf-icon-lg[data-icon]::before { width: 22px; height: 22px; }

/* ==========================================================================
   SHELL: sidebar + main
   ========================================================================== */

.layout, .shell, .admin-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--hf-sidebar-w) minmax(0, 1fr);
}

.sidebar, .side {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 14px 16px;
  background: var(--hf-panel);
  border-right: 1px solid rgba(7, 16, 19, 0.08);
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 60;
  transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Brand del frame: <a class="sidebar-brand"><span class="brand-mark" data-icon="bell"></span><span class="brand-text"><small>HalloFrame</small><strong>Notify</strong></span></a> */
.sidebar-brand, .brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 4px 6px 16px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--hf-line);
  color: var(--hf-ink);
  text-decoration: none;
  min-width: 0;
}
.sidebar-brand:hover, .brand:hover { text-decoration: none; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 11px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--hf-accent) 88%, white), color-mix(in srgb, var(--hf-accent) 78%, black));
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--hf-accent) 32%, transparent);
  transition: transform var(--hf-transition);
}
.brand-mark[data-icon]::before { width: 20px; height: 20px; vertical-align: 0; }
.brand-mark:not([data-icon]) { font-size: 15px; }
.sidebar-brand:hover .brand-mark { transform: rotate(-5deg) scale(1.04); }
.brand-text, .sidebar-brand > div, .brand > div, .brand > span:not(.brand-mark) {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  line-height: 1.15;
}
.brand-text small, .brand small, .brand-text .brand-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hf-muted);
}
.brand-text strong, .brand strong, .brand-name {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--hf-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-nav, .side-nav, .nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar-nav p, .sidebar-section-label {
  margin: 14px 10px 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hf-faint);
}
.sidebar-nav p:first-child { margin-top: 4px; }
.sidebar-nav a, .side-nav a, .nav a, .nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 7px 10px;
  border-radius: var(--hf-radius-sm);
  color: var(--hf-graphite);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--hf-transition), color var(--hf-transition);
}
.sidebar-nav a::before, .side-nav a::before, .nav a::before, .nav-item::before {
  width: 18px; height: 18px; opacity: 0.72; vertical-align: 0;
}
.sidebar-nav a:hover, .side-nav a:hover, .nav a:hover, .nav-item:hover {
  background: color-mix(in srgb, var(--hf-accent) 7%, transparent);
  color: var(--hf-accent-text);
  text-decoration: none;
}
.sidebar-nav a.active, .side-nav a.active, .nav a.active, .nav-item.is-active {
  background: var(--hf-accent-soft);
  color: var(--hf-accent-text);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--hf-accent-line);
}
.sidebar-nav a.active::before, .nav a.active::before, .nav-item.is-active::before { opacity: 1; }
.sidebar-nav a[target="_blank"]::after {
  content: "\2197";
  margin-left: auto;
  font-size: 11px;
  color: var(--hf-faint);
}

.sidebar-foot, .side-foot, .sidebar-footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--hf-line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sidebar-foot form, .side-foot form, .sidebar-footer form { margin: 0; display: contents; }
.sidebar-foot a, .sidebar-foot button, .side-foot button, .sidebar-footer a, .sidebar-footer button,
.ghost-link, .logout button, .back-link, .logout-button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  padding: 7px 10px;
  border: 0;
  border-radius: var(--hf-radius-sm);
  background: transparent;
  color: var(--hf-graphite);
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--hf-transition), color var(--hf-transition);
}
.sidebar-foot a:hover, .sidebar-foot button:hover, .side-foot button:hover, .sidebar-footer a:hover,
.sidebar-footer button:hover, .ghost-link:hover, .logout button:hover, .back-link:hover, .logout-button:hover {
  background: var(--hf-paper);
  color: var(--hf-ink);
  text-decoration: none;
}
.sidebar-foot a::before, .sidebar-foot button::before, .sidebar-footer a::before, .sidebar-footer button::before {
  opacity: 0.7;
}
.sidebar-hub {
  color: var(--hf-mint-dark) !important;
}

.sidebar-backdrop, .sidebar-overlay {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(7, 16, 19, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: hf-fade 200ms ease-out;
}
@keyframes hf-fade { from { opacity: 0; } to { opacity: 1; } }

.main, .main-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 10px clamp(16px, 3vw, 28px);
  background: rgba(255, 255, 255, 0.86);
  border-bottom: 1px solid rgba(7, 16, 19, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.topbar h1, .page-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-actions, .topbar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.topbar-user {
  display: flex; align-items: center; gap: 9px; margin-left: auto;
  padding: 4px 10px 4px 4px; border: 1px solid var(--hf-line); border-radius: 999px; background: #fff;
}
.topbar-user div { display: flex; flex-direction: column; line-height: 1.15; }
.topbar-user strong { font-size: 12.5px; }
.topbar-user small { font-size: 11px; color: var(--hf-muted); }
.user-avatar {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--hf-ink); color: #fff; font-size: 12px; font-weight: 800;
}
.menu-toggle, .menu-button, .hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--hf-line);
  border-radius: var(--hf-radius-sm);
  background: var(--hf-panel);
  color: var(--hf-ink);
  font-size: 0;
  cursor: pointer;
}
.menu-toggle::before, .menu-button::before, .hamburger::before {
  content: "";
  width: 20px; height: 20px; display: block;
  background: currentColor;
  -webkit-mask: var(--hf-i-menu) center / contain no-repeat;
  mask: var(--hf-i-menu) center / contain no-repeat;
}
.env-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; min-height: 30px;
  border: 1px solid rgba(24, 167, 107, 0.22); border-radius: 999px;
  background: rgba(99, 238, 154, 0.14); color: #0c6d48; font-size: 12px; font-weight: 700; white-space: nowrap;
}
.env-pill::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--hf-mint-dark);
  box-shadow: 0 0 0 0 rgba(24, 167, 107, 0.45); animation: hf-pulse 1.8s ease-in-out infinite;
}
@keyframes hf-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(24, 167, 107, 0.45); }
  50% { box-shadow: 0 0 0 6px rgba(24, 167, 107, 0); }
}

.content {
  width: min(var(--hf-content-max), 100%);
  margin: 0 auto;
  padding: clamp(18px, 3vw, 30px) clamp(16px, 3vw, 28px) 70px;
  flex: 1 0 auto;
}
.content > * + * { margin-top: 16px; }
.content > .card + .card, .content > section + section { margin-top: 16px; }
.content > h2, .content > h3 { margin-top: 26px; }

/* ==========================================================================
   PAGE HEAD / breadcrumb
   ========================================================================== */

.page-head, .page-header, .page-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 24px;
  margin-bottom: 6px;
}
.page-head > div, .page-header > div, .page-intro > div { min-width: 0; max-width: 72ch; }
.page-head h1, .page-header h1, .page-intro h2 {
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin: 2px 0 4px;
}
.page-head p:not(.eyebrow), .page-header p:not(.eyebrow), .page-intro p:not(.eyebrow) {
  color: var(--hf-muted);
  font-size: 14px;
  line-height: 1.55;
  margin-top: 6px;
}
.page-head form, .page-head .actions, .page-intro > a, .page-head > a, .page-head > button {
  margin: 0;
  flex: 0 0 auto;
}
.eyebrow, .kpi-label, .snav-eyebrow {
  margin: 0 0 2px;
  color: var(--hf-accent-text);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.crumbs, .breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin-bottom: 12px; font-size: 12.5px; color: var(--hf-muted);
}
.crumbs a, .breadcrumb { color: var(--hf-muted); font-weight: 600; }
.crumbs a:hover { color: var(--hf-ink); }

/* ==========================================================================
   CARD / PANEL
   ========================================================================== */

.card, .panel, .auth-card {
  position: relative;
  background: var(--hf-panel);
  border: 1px solid rgba(7, 16, 19, 0.08);
  border-radius: var(--hf-radius-lg);
  padding: 20px 22px;
  box-shadow: var(--hf-shadow);
}
.card + .card, .panel + .panel { margin-top: 16px; }
.card.no-pad, .panel.no-pad { padding: 0; overflow: hidden; }
.card.no-pad > .card-head, .panel.no-pad > .panel-head, .card.no-pad > .card-header, .panel-heading.padded {
  margin: 0; padding: 16px 22px; border-bottom: 1px solid var(--hf-line);
}
.card.no-pad > .table-wrap { border-radius: 0; border: 0; }
.card > h2:first-child, .panel > h2:first-child, .card > h3:first-child { margin-bottom: 14px; }
.card.help, .card.highlight, .card.with-accent {
  border-color: var(--hf-accent-line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--hf-accent) 6%, white), #fff 70%);
}
.card.highlight { border-color: color-mix(in srgb, var(--hf-ok) 35%, white); background: linear-gradient(180deg, #f0fbf4, #fff 70%); }
.card.sticky { position: sticky; bottom: 14px; z-index: 5; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(6px); }
.card-head, .card-header, .panel-head, .panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 14px;
}
.card-head h2, .card-header h2, .panel-head h2, .panel-heading h3, .card-head h3, .card-header h3 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.card-head > a, .card-header > a, .panel-head > a, .panel-heading > a {
  font-size: 12.5px; font-weight: 700; color: var(--hf-accent-text); white-space: nowrap;
}
.card-head .eyebrow, .panel-heading .eyebrow { margin-bottom: 2px; }
.card-foot {
  margin: 16px -22px -20px; padding: 12px 22px;
  border-top: 1px solid var(--hf-line); background: var(--hf-panel-soft);
  border-radius: 0 0 var(--hf-radius-lg) var(--hf-radius-lg);
  display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
}
.card > p.muted:only-child, .card > .empty:only-child { margin: 4px 0; }

/* Griglie */
.grid, .grid-2, .grid-3, .grid-4, .two-columns, .three-columns, .grid.two {
  display: grid;
  gap: 16px;
  align-items: start;
}
.grid-2, .two-columns, .grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3, .three-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-2 > *, .grid-3 > *, .grid-4 > *, .grid.two > *, .two-columns > *, .three-columns > * { min-width: 0; }
.grid-2 > .card, .grid-3 > .card, .grid-4 > .card, .grid.two > .panel, .two-columns > .panel { margin: 0; }
.content > * { min-width: 0; max-width: 100%; }
.wide { grid-column: 1 / -1; }

/* ==========================================================================
   KPI
   ========================================================================== */

.kpi-grid, .stats, .stat-grid, .kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 4px;
}
.kpi-grid + .card, .stats + .panel, .stat-grid + .card { margin-top: 16px; }
.kpi-card, .kpi-grid .kpi, .stats article, .stat, .kpis .card, .grid-3.kpis > .card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 104px;
  padding: 16px 18px;
  margin: 0;
  background: var(--hf-panel);
  border: 1px solid rgba(7, 16, 19, 0.08);
  border-radius: var(--hf-radius-lg);
  box-shadow: var(--hf-shadow);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.kpi-card::after, .kpi-grid .kpi::after, .stats article::after, .stat::after, .kpis .card::after {
  content: "";
  position: absolute;
  right: -26px;
  top: -26px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--hf-accent) 14%, transparent), transparent 70%);
  pointer-events: none;
}
a.stat:hover, a.kpi-card:hover { border-color: var(--hf-accent-line); text-decoration: none; transform: translateY(-1px); }
.kpi-label, .stats small, .stat .l, .kpi-card > span:not(.kpi-value):not(.kpi-foot), .kpis .eyebrow {
  order: 0;
  margin: 0;
  color: var(--hf-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.kpi-value, .kpi-card > .kpi-value, .kpi, .stats span, .stat .n, .kpi-card > strong {
  order: 1;
  display: block;
  margin: 0;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--hf-ink);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.kpi-foot, .kpi-card > .kpi-foot, .kpi-card > small, .kpi-card .muted.small, .kpis .card .muted { order: 2; margin: 0; color: var(--hf-muted); font-size: 12px; }
.stat.ok .n { color: var(--hf-ok); }
.stat.warn .n { color: var(--hf-warn); }
.stat.danger .n { color: var(--hf-danger); }
.kpi-card.accent { background: linear-gradient(145deg, var(--hf-ink), var(--hf-graphite)); border-color: transparent; }
.kpi-card.accent > *, .kpi-card.accent .kpi-label { color: #fff; }
.kpi-card.accent .kpi-value { color: var(--hf-mint); }

/* ==========================================================================
   TABLES
   ========================================================================== */

.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--hf-line);
  border-radius: var(--hf-radius);
}
.card > .table-wrap, .panel > .table-wrap { border: 0; border-radius: 0; margin: 0 -22px; width: auto; }
.card > .table-wrap:last-child, .panel > .table-wrap:last-child { margin-bottom: -20px; }
.card.no-pad > .table-wrap, .panel.no-pad > .table-wrap { margin: 0; }

.table, .tbl, .data-table, .table-wrap table, .card > table, .panel > table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.table th, .table td, .tbl th, .tbl td, .data-table th, .data-table td,
.table-wrap table th, .table-wrap table td, .card > table th, .card > table td, .panel > table th, .panel > table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--hf-line);
  text-align: left;
  vertical-align: middle;
}
.table th, .tbl th, .data-table th, .table-wrap table th, .card > table th, .panel > table th {
  background: var(--hf-panel-soft);
  color: var(--hf-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.table thead th:first-child { border-top-left-radius: var(--hf-radius-sm); }
.table thead th:last-child { border-top-right-radius: var(--hf-radius-sm); }
.table tbody tr:last-child td, .tbl tbody tr:last-child td, .data-table tbody tr:last-child td,
.table-wrap table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td, .tbl tbody tr:hover td, .data-table tbody tr:hover td, .table-wrap table tbody tr:hover td {
  background: color-mix(in srgb, var(--hf-accent) 4%, transparent);
}
.table td > form, .tbl td > form, .table-wrap td > form { margin: 0; display: inline-flex; gap: 6px; align-items: center; }
.table td small, .table-wrap td small { display: block; color: var(--hf-muted); font-size: 11.5px; margin-top: 2px; }
.table td.right, .table th.right, .table .num { text-align: right; }
.table td.muted:only-child, .table td[colspan] { color: var(--hf-muted); text-align: center; padding: 22px 12px; }
.table.tight th, .table.tight td, .table-tight th, .table-tight td { padding: 7px 10px; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.row-actions form { margin: 0; }

/* ==========================================================================
   PILL / BADGE / STATUS
   ========================================================================== */

.pill, .badge, .status, .status-pill, .level-pill, .count-pill, .live-pill, .server-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(7, 16, 19, 0.06);
  color: var(--hf-graphite);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.55;
  white-space: nowrap;
  vertical-align: middle;
}
.pill.big { padding: 5px 13px; font-size: 13px; }
.pill.small, .badge.small { padding: 1px 7px; font-size: 10.5px; }
.pill.mono, .status.mono { font-family: var(--hf-mono); }
.pill.ok, .badge.ok, .status.ok, .status-pill.ok, .pill-ok, .pill-succeeded, .pill-active, .pill-trialing, .pill-paid,
.status-sent, .status-delivered, .status-verified, .live-pill, .server-state,
.pill.status-resolved, .pill.status-closed-ok {
  background: var(--hf-ok-soft); color: var(--hf-ok);
}
.pill.warn, .badge.warn, .status.warn, .status-pill.warn, .pill-pending, .pill-processing, .pill-incomplete,
.status-sending, .status-queued, .pill.status-in_progress, .pill.status-waiting_user, .pill.priority-high {
  background: var(--hf-warn-soft); color: var(--hf-warn);
}
.pill.off, .pill.danger, .pill.err, .badge.err, .badge.danger, .status.danger, .status-pill.danger,
.pill-fail, .pill-failed, .pill-canceled, .pill-unpaid, .pill-past_due, .status-failed, .pill.priority-urgent {
  background: var(--hf-danger-soft); color: var(--hf-danger);
}
.pill.info, .badge.info, .status-queued.info, .pill.status-open, .pill.priority-normal, .level-pill {
  background: var(--hf-info-soft); color: var(--hf-info);
}
.pill.neutral, .status-cancelled, .status.neutral, .status-pill.neutral, .pill-off, .pill-refunded,
.pill.status-closed, .pill.priority-low, .count-pill { background: rgba(7, 16, 19, 0.06); color: var(--hf-muted); }
.pill.accent { background: var(--hf-accent-soft); color: var(--hf-accent-text); }
.status-dot, .dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--hf-faint); flex: 0 0 auto;
}
.status-dot.ok, .dot.ok { background: var(--hf-mint-dark); }
.status-dot.warn, .dot.warn { background: #e88b3a; }
.status-dot.danger, .dot.danger { background: #e74c3c; }
.live-pill i, .live-pill::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--hf-mint-dark);
  box-shadow: 0 0 0 0 rgba(24, 167, 107, 0.45); animation: hf-pulse 1.8s ease-in-out infinite;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.primary, .secondary, .ghost, .danger, .btn, .btn-primary, .btn-ghost, .btn-danger, .btn-small, .btn-chip,
.btn-copy, .button-primary, .button-ghost, .button-danger, .btn-link-cta, .tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid transparent;
  border-radius: var(--hf-radius-sm);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--hf-transition), border-color var(--hf-transition), color var(--hf-transition),
              transform var(--hf-transition), box-shadow var(--hf-transition);
}
.primary:hover, .secondary:hover, .ghost:hover, .danger:hover, .btn:hover, .btn-primary:hover, .btn-ghost:hover,
.btn-danger:hover, .button-primary:hover, .button-ghost:hover, .button-danger:hover, .btn-link-cta:hover { text-decoration: none; }
.primary:disabled, .btn:disabled, .btn-primary:disabled, button:disabled { opacity: 0.55; cursor: not-allowed; transform: none !important; }

.primary, .btn-primary, .button-primary, .btn.primary, .btn-link-cta {
  background: var(--hf-ink);
  color: #fff;
  border-color: var(--hf-ink);
  box-shadow: 0 6px 16px rgba(7, 16, 19, 0.14);
}
.primary:hover, .btn-primary:hover, .button-primary:hover, .btn.primary:hover, .btn-link-cta:hover {
  background: #122227; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(7, 16, 19, 0.2);
}
.primary:active, .btn-primary:active { transform: translateY(0); }
.primary.accent, .btn-primary.accent, .btn.accent { background: var(--hf-accent); border-color: var(--hf-accent); color: var(--hf-accent-ink); }

.secondary, .ghost, .btn, .btn-ghost, .btn-small, .btn-chip, .btn-copy, .button-ghost, .link-button {
  background: var(--hf-panel);
  color: var(--hf-graphite);
  border-color: var(--hf-line-strong);
}
.secondary:hover, .ghost:hover, .btn:hover, .btn-ghost:hover, .btn-small:hover, .btn-chip:hover, .btn-copy:hover, .button-ghost:hover {
  background: var(--hf-paper); border-color: var(--hf-graphite); color: var(--hf-ink);
}
.btn.ok { background: var(--hf-ok); border-color: var(--hf-ok); color: #fff; }
.btn.warn { background: var(--hf-warn); border-color: var(--hf-warn); color: #fff; }
.btn.ok:hover, .btn.warn:hover { filter: brightness(0.94); }

.danger, .btn-danger, .button-danger, .btn.danger, .btn-small.danger, .row-actions button.danger, .link-danger {
  background: transparent;
  color: var(--hf-danger);
  border-color: color-mix(in srgb, var(--hf-danger) 30%, white);
}
.danger:hover, .btn-danger:hover, .button-danger:hover, .btn.danger:hover, .btn-small.danger:hover, .link-danger:hover {
  background: var(--hf-danger-soft); border-color: var(--hf-danger);
}
.btn.danger { background: var(--hf-danger); color: #fff; border-color: var(--hf-danger); }
.btn.danger:hover { background: #941d14; }
.primary.danger, .btn-primary.danger { background: var(--hf-danger); border-color: var(--hf-danger); color: #fff; }
.link-danger { border-color: transparent; padding: 0 8px; min-height: 30px; font-size: 12.5px; }

.small.primary, .small.ghost, .small.danger, .primary.small, .ghost.small, .danger.small, .secondary.small,
.btn.small, .btn-small, .btn-chip, .btn-copy, .button-primary.small, .button-ghost.small, .button-danger.small,
.btn-danger.small, .btn-sm, .row-actions button, .row-actions a {
  min-height: 30px;
  padding: 0 10px;
  font-size: 12.5px;
  border-radius: 7px;
}
.btn.full, .block.primary, .primary.block, .btn-primary.block, .button-primary.block, .login-form button { width: 100%; }
.btn-link-cta { margin-top: 8px; }
.link { color: var(--hf-accent-text); font-weight: 700; }
.link:hover { text-decoration: underline; }
a.primary, a.ghost, a.danger, a.btn { text-decoration: none; }

/* ==========================================================================
   FORMS
   ========================================================================== */

.field, .lbl, .form-grid > label, .form-row > label, .grid-form > label, .login-form label, .modal-body > label,
.form-grid > .field, form.form > label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--hf-graphite);
}
.field > span, .field > label, .field-label, .lbl > span, .form-grid > label > span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hf-muted);
}
.field > span:not(.check-label), .field > label { order: -1; }
.field small, .form-hint, .help-text { font-size: 12px; font-weight: 500; color: var(--hf-muted); line-height: 1.45; }
.field--lg, .field.full, .full { grid-column: 1 / -1; }

.field input, .field select, .field textarea, .lbl input, .lbl select, .lbl textarea,
.form-grid > label input, .form-grid > label select, .form-grid > label textarea,
.form-row > label input, .form-row > label select, .grid-form > label input, .grid-form > label select,
.filters input, .filters select, .filter-bar input, .filter-bar select, .inline-form input, .inline-form select,
.login-form input, .login-card input, .modal-body input, .modal-body select, .modal-body textarea,
.hf-input, .test-email-input, .th-search input, .th-select {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--hf-line-strong);
  border-radius: var(--hf-radius-sm);
  background: #fbfdfb;
  color: var(--hf-ink);
  font-size: 14px;
  font-weight: 500;
  outline: none;
  transition: border-color var(--hf-transition), box-shadow var(--hf-transition), background var(--hf-transition);
}
.field textarea, .lbl textarea, .form-grid > label textarea, .modal-body textarea {
  min-height: 96px; resize: vertical; line-height: 1.5; font-family: inherit;
}
.field textarea.mono, textarea.code-area, .field textarea.code { font-family: var(--hf-mono); font-size: 13px; }
.field input:focus, .field select:focus, .field textarea:focus, .lbl input:focus, .lbl select:focus, .lbl textarea:focus,
.form-grid > label input:focus, .form-grid > label select:focus, .form-grid > label textarea:focus,
.form-row > label input:focus, .grid-form > label input:focus, .form-row > label select:focus, .grid-form > label select:focus,
.filters input:focus, .filters select:focus, .filter-bar input:focus, .filter-bar select:focus, .login-form input:focus,
.login-card input:focus, .modal-body input:focus, .modal-body select:focus, .modal-body textarea:focus, .hf-input:focus {
  border-color: var(--hf-accent);
  background: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--hf-accent) 16%, transparent);
}
.field input:disabled, .field select:disabled, .field textarea:disabled { background: var(--hf-paper); color: var(--hf-muted); }
.field input[type="color"] { padding: 3px; height: 40px; width: 64px; }
.field input[type="checkbox"], .field input[type="radio"], .check input, .checks input, label.check input {
  width: 16px; height: 16px; min-height: 0; margin: 0; padding: 0; accent-color: var(--hf-accent); cursor: pointer;
}
select, .field select, .filters select, .filter-bar select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23607076' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  padding-right: 34px;
}
select[multiple] { background-image: none; padding-right: 12px; }

.form-grid, .grid-2-form, .grid-form, .form-grid.cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  align-items: end;
}
.form-grid.cols, .grid-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid > button, .grid-form > button, .form-row > button, .form-grid > .checks { align-self: end; }
.form-grid > button, .grid-form > button { justify-self: start; }
.form-row {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
}
.form-row > label { flex: 1 1 180px; }
.form-grid + button, .form-grid + .primary, .form-grid + .btn, .form-grid + .row, .form-grid + .actions, .form-grid + p,
.grid-form + button, .form-row + p, form > .field + button, form > .field + .primary { margin-top: 16px; }
form > .field + .field { margin-top: 12px; }
.form-row > label.grow { flex: 2 1 240px; }
form.form { display: flex; flex-direction: column; gap: 14px; }
.form-actions, .actions {
  display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 16px;
}
.actions { justify-content: flex-start; }
.check, .checks label, label.check, .field.check, .switch-row {
  display: flex; flex-direction: row; align-items: center; gap: 9px;
  font-size: 13.5px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--hf-graphite); cursor: pointer;
}
.field.check > span, .check > span, .checks label > span { font-size: 13.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--hf-graphite); order: 0; }
.checks { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
fieldset, .form-fieldset, .mode-group, .scope-fieldset {
  min-width: 0; margin: 0; padding: 14px 16px; border: 1px solid var(--hf-line); border-radius: var(--hf-radius);
}
legend { padding: 0 8px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hf-muted); }
fieldset.mode-group { margin: 16px 0 10px; background: var(--hf-panel-soft); }
fieldset.mode-group.mode-active { background: #fff; border-color: var(--hf-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hf-accent) 10%, transparent); }
fieldset.mode-group.mode-active legend { color: var(--hf-accent-text); }

/* Filtri */
.filters, .filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin: 0 0 16px;
}
.filters.card, .filter-bar.card, form.card.filter-bar { margin-bottom: 16px; padding: 14px 18px; }
.filters > input, .filters > select { width: auto; min-width: 160px; flex: 1 1 160px; }
.filters > input[type="search"] { flex: 2 1 240px; }
.filter-bar .field { flex: 1 1 180px; margin: 0; }
.filter-bar .field.grow, .filter-bar .search-field { flex: 2 1 260px; }
.filters > button, .filter-bar > button, .filters > a, .filter-bar > a { flex: 0 0 auto; }
.inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inline-form input, .inline-form select { flex: 1 1 160px; width: auto; }
.card > .filters:first-child, .card > .filter-bar:first-child { margin-bottom: 14px; }

/* Switch (label.switch > input + span) */
.switch { position: relative; display: inline-flex; width: 42px; height: 24px; flex: 0 0 auto; }
.switch input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--hf-line-strong); transition: background var(--hf-transition); }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform var(--hf-transition); }
.switch input:checked + span { background: var(--hf-mint-dark); }
.switch input:checked + span::after { transform: translateX(18px); }

/* ==========================================================================
   ALERT / FLASH / NOTICE / EMPTY
   ========================================================================== */

.alert, .flash, .notice, .service-alert, .demo-banner, .callout {
  display: block;
  padding: 12px 16px;
  border: 1px solid var(--hf-info-soft);
  border-left: 3px solid var(--hf-info);
  border-radius: var(--hf-radius);
  background: var(--hf-info-soft);
  color: #1d3a8a;
  font-size: 13.5px;
  line-height: 1.5;
}
.alert p, .flash p { margin: 0; }
.alert p + p { margin-top: 6px; }
.alert.ok, .alert.success, .alert-ok, .flash.ok, .flash-ok, .notice.ok {
  background: var(--hf-ok-soft); border-color: var(--hf-ok-soft); border-left-color: var(--hf-ok); color: #14532d;
}
.alert.warn, .alert-warn, .flash.warn, .callout.warn, .demo-banner {
  background: var(--hf-warn-soft); border-color: var(--hf-warn-soft); border-left-color: var(--hf-warn); color: #7c2d12;
}
.alert.err, .alert.error, .alert.danger, .alert-error, .flash.err, .flash-error, .notice.err {
  background: var(--hf-danger-soft); border-color: var(--hf-danger-soft); border-left-color: var(--hf-danger); color: #7f1d1d;
}
.alert code, .flash code, .notice code { background: rgba(255, 255, 255, 0.7); }
.notice.strong code { display: block; margin-top: 8px; padding: 10px 12px; word-break: break-all; font-size: 13px; }
.demo-banner strong { display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 2px; }
.empty, .empty-state, .empty-hero {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 120px; padding: 28px 20px; text-align: center; color: var(--hf-muted); font-size: 13.5px;
  border: 1px dashed var(--hf-line-strong); border-radius: var(--hf-radius); background: var(--hf-panel-soft);
}
.empty-state strong { color: var(--hf-ink); font-size: 14.5px; }
.empty-state p { margin: 0; max-width: 46ch; }
.empty-state .primary, .empty-state .btn-primary { margin-top: 10px; }
.card > .empty, .card > .empty-state { margin: 2px 0; }
.card.no-pad > .empty, .card.no-pad > .empty-state { border: 0; border-radius: 0; background: transparent; }

/* ==========================================================================
   CODE / KEY BOXES / DEFINITION LISTS
   ========================================================================== */

pre.codes, .code-box, .copybox, .filebox, .key-show, .code-block, pre.mono {
  display: block;
  margin: 8px 0 0;
  padding: 12px 14px;
  border-radius: var(--hf-radius-sm);
  background: #0b1518;
  color: #cfe9d8;
  font-family: var(--hf-mono);
  font-size: 12.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  overflow: auto;
  max-height: 480px;
}
pre.codes { color: #a7f3d0; }
.copybox, .key-show { cursor: copy; user-select: all; position: relative; }
.copybox:hover, .key-show:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--hf-mint-dark) 30%, transparent); }
.copybox.pre { white-space: pre-wrap; }
.prose { white-space: pre-wrap; word-break: break-word; }
.secret-reveal { display: grid; gap: 12px; padding: 18px 20px; border: 1px solid var(--hf-accent-line); border-radius: var(--hf-radius-lg); background: linear-gradient(180deg, var(--hf-accent-soft), #fff 80%); }
.secret-reveal code { display: block; padding: 12px; background: #0b1518; color: #cfe9d8; border-radius: 8px; font-size: 13px; word-break: break-all; }

.dl, .kv, .definition-list {
  display: grid;
  gap: 0;
  margin: 0;
}
.dl > div, .kv > div, .definition-list > div {
  display: grid;
  grid-template-columns: minmax(120px, 0.38fr) 1fr;
  gap: 4px 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--hf-line);
  font-size: 13.5px;
}
.dl > div:last-child, .kv > div:last-child, .definition-list > div:last-child { border-bottom: 0; }
.dl dt, .kv span, .definition-list dt { color: var(--hf-muted); font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; align-self: center; }
.dl dd, .kv b, .definition-list dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.kv { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 24px; }

/* Liste */
.recent-list, .status-list, .attachments-list, .evidence-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.recent-list li, .status-list > div, .attachments-list li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  padding: 9px 12px; border-radius: var(--hf-radius-sm); background: var(--hf-panel-soft); border: 1px solid var(--hf-line);
  font-size: 13px;
}
.recent-list li strong { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-list li .muted { width: 100%; }
.status-list > div { justify-content: space-between; }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 14px 0 20px; }
.tab-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.tab { min-height: 34px; padding: 0 13px; border-radius: 999px; background: transparent; color: var(--hf-graphite); border-color: transparent; }
.tab:hover { background: rgba(7, 16, 19, 0.05); }
.tab.is-active, .tab[aria-selected="true"] { background: var(--hf-ink); color: #fff; }

/* ==========================================================================
   TOAST
   ========================================================================== */

.toast, .toast-container .toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 200;
  max-width: min(360px, calc(100vw - 32px));
  padding: 12px 16px;
  border-radius: var(--hf-radius);
  background: var(--hf-ink);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  box-shadow: 0 16px 44px rgba(7, 16, 19, 0.3);
  animation: hf-toast-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.toast-container { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast-container .toast { position: static; opacity: 0; transform: translateY(8px); transition: 220ms; pointer-events: auto; animation: none; }
.toast-container .toast.show { opacity: 1; transform: none; }
.toast.ok, .toast.success, .toast-ok, .toast-success, .toast[data-kind="ok"], .toast[data-kind="success"] { background: linear-gradient(135deg, #18a76b, #0c6d48); }
.toast.error, .toast.err, .toast-error, .toast[data-kind="error"] { background: linear-gradient(135deg, #b42318, #7a2418); }
@keyframes hf-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   LOGIN (pagina intera)
   ========================================================================== */

.login-body, .login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 18% 8%, rgba(99, 238, 154, 0.22), transparent 42%),
    radial-gradient(circle at 88% 92%, color-mix(in srgb, var(--hf-accent) 30%, transparent), transparent 46%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 72px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 72px),
    var(--hf-ink);
}
.login-shell { width: min(100%, 440px); display: grid; gap: 18px; }
.login-shell .login-brand, .login-brand { justify-self: center; margin: 0; padding: 0; border: 0; color: #fff; }
.login-brand .brand-text strong, .login-brand strong { color: #fff; }
.login-brand .brand-text small, .login-brand small { color: rgba(255, 255, 255, 0.62); }
.login-card, .login-panel {
  width: 100%;
  padding: 30px 30px 26px;
  background: var(--hf-panel);
  border-radius: 18px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.45);
  text-align: left;
}
.login-card .brand, .login-card .sidebar-brand, .login-panel .brand-stack { margin: 0 0 18px; padding: 0; border: 0; }
.login-card h1, .login-panel h1, .login-panel .brand-name {
  font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin: 4px 0 8px;
}
.login-card .eyebrow, .login-eyebrow, .login-card .login-sub { margin-bottom: 4px; }
.login-card .lede, .login-lede, .login-sub, .login-card > p.muted, .login-panel .brand-tag {
  color: var(--hf-muted); font-size: 14px; line-height: 1.5; margin: 0 0 20px;
}
.login-card form, .login-form { display: grid; gap: 12px; }
.login-card form label:not(.field), .login-form label, .login-card label { display: grid; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hf-muted); }
.login-card input, .login-form input { min-height: 46px; margin: 0; }
.login-card .primary, .login-card .btn-primary, .login-card .btn.primary, .login-card .button-primary, .login-form button, .login-card form > button {
  width: 100%; min-height: 46px; margin-top: 4px; font-size: 14.5px;
}
.login-card .form-error, .login-form .form-error, .login-error, .login-card p.error {
  margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--hf-danger-soft); color: var(--hf-danger); font-size: 13px; font-weight: 600;
}
.login-error:empty { display: none; }
.login-foot { margin: 16px 0 0; text-align: center; color: var(--hf-muted); font-size: 12.5px; }
.login-foot a { color: var(--hf-accent-text); font-weight: 700; }
.login-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: var(--hf-faint); font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--hf-line); }
.sso-callout { padding: 14px 16px; border: 1px solid var(--hf-accent-line); border-radius: var(--hf-radius); background: var(--hf-accent-soft); font-size: 13.5px; }
.sso-callout strong { display: block; color: var(--hf-ink); margin-bottom: 4px; }
.sso-callout p { margin: 0 0 8px; color: var(--hf-graphite); }
.login-stage-note { text-align: center; color: rgba(255, 255, 255, 0.6); font-size: 12.5px; }
.login-stage-note a { color: var(--hf-mint); font-weight: 700; }


/* ==========================================================================
   AUTH / PORTAL — pagine per l'utente finale (Identity, Help Desk portal)
   ========================================================================== */

.auth-body, .portal-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 12% 0%, rgba(99, 238, 154, 0.16), transparent 38%),
    radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--hf-accent) 12%, transparent), transparent 40%),
    var(--hf-paper);
}
.auth-shell {
  width: min(100%, 460px);
  margin: auto;
  padding: 28px 16px;
  display: grid;
  gap: 16px;
}
.auth-shell.wide { width: min(100%, 780px); }
.auth-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.auth-header .brand, .portal-topbar .brand { margin: 0; padding: 0; border: 0; }
.auth-card { padding: 28px 28px 24px; }
.auth-card h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.025em; margin-bottom: 6px; }
.auth-card > .muted { margin: 0 0 18px; }
.auth-card form { display: grid; gap: 12px; }
.auth-card form .field { margin: 0; }
.auth-card form > .primary, .auth-card form > .btn-primary { margin-top: 4px; min-height: 44px; }
.auth-links { text-align: center; margin: 18px 0 0; font-size: 13.5px; color: var(--hf-muted); }
.auth-links a { font-weight: 700; }
.auth-footer, .portal-footer { text-align: center; padding: 18px; color: var(--hf-faint); font-size: 12px; }
.federated-list { display: grid; gap: 8px; margin-bottom: 4px; }
.federated-btn {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px;
  background: #fff; border: 1px solid var(--hf-line-strong); border-radius: var(--hf-radius-sm);
  color: var(--hf-ink); font-size: 14px; font-weight: 600; text-decoration: none;
  transition: border-color var(--hf-transition), background var(--hf-transition);
}
.federated-btn:hover { border-color: var(--hf-ink); background: var(--hf-paper); text-decoration: none; }
.provider-mark {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px;
  background: var(--hf-accent-soft); color: var(--hf-accent-text); font-weight: 800; font-size: 13px;
}
.divider { display: flex; align-items: center; gap: 10px; margin: 16px 0; color: var(--hf-faint); font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--hf-line); }
.magic-form { margin-top: 4px; }
.magic-form .row { display: flex; gap: 8px; }
.magic-form .row input { flex: 1; }

.portal-topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px clamp(16px, 3vw, 28px);
  background: rgba(255, 255, 255, 0.86); border-bottom: 1px solid rgba(7, 16, 19, 0.08);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.portal-topbar-right { display: flex; align-items: center; gap: 12px; }
.portal-main { flex: 1; display: flex; padding: 24px 16px; }
.portal-main > .auth-card { margin: auto; width: min(100%, 460px); }
.portal-page { width: min(100%, 860px); margin: 0 auto; }
.portal-page > h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.025em; margin-bottom: 4px; }
.portal-page > p.muted { margin-bottom: 18px; }
.portal-page > .card, .portal-page > form.card { margin-top: 16px; }
.hide-sm { display: none; }
@media (min-width: 600px) { .hide-sm { display: inline; } }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid.cols, .grid-form, .form-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .layout, .shell, .admin-shell { grid-template-columns: 1fr; }
  .sidebar, .side {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(300px, 86vw);
    height: 100vh;
    transform: translateX(-104%);
    box-shadow: 24px 0 64px rgba(7, 16, 19, 0.2);
    z-index: 70;
  }
  .sidebar.open, .sidebar.is-open, body.sidebar-open .sidebar, .side.open { transform: translateX(0); }
  .menu-toggle, .menu-button, .hamburger { display: inline-flex; }
  .grid-2, .grid-3, .two-columns, .three-columns, .grid.two, .detail-grid { grid-template-columns: 1fr; }
  .topbar-user div { display: none; }
  .topbar-user { padding: 3px; border: 0; background: transparent; }
}

@media (max-width: 720px) {
  .content { padding: 16px 14px 60px; }
  .content > * + * { margin-top: 12px; }
  .card, .panel, .auth-card { padding: 16px; border-radius: 12px; }
  .card > .table-wrap, .panel > .table-wrap { margin: 0 -16px; }
  .card-foot { margin: 14px -16px -16px; padding: 10px 16px; }
  .form-grid, .grid-2-form, .form-grid.cols, .grid-form, .form-grid-3, .grid-4 { grid-template-columns: 1fr; }
  .form-actions { justify-content: stretch; }
  .form-actions > * { flex: 1 1 auto; }
  .kpi-grid, .stats, .stat-grid, .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi-card, .kpi-grid .kpi, .stats article, .stat, .kpis .card { min-height: 92px; padding: 14px; }
  .kpi-value, .kpi-card > .kpi-value, .kpi, .stats span, .stat .n, .kpi-card > strong { font-size: 24px; }
  .page-head, .page-header, .page-intro { align-items: stretch; flex-direction: column; }
  .page-head > a, .page-head > button, .page-intro > a { width: 100%; }
  .filters > input, .filters > select, .filters > button, .filters > a, .filter-bar > button, .filter-bar > a { flex: 1 1 100%; width: 100%; }
  .kv, .dl > div, .definition-list > div { grid-template-columns: 1fr; gap: 2px; }
  .dl > div, .definition-list > div { padding: 8px 0; }
  .toast { left: 14px; right: 14px; bottom: 14px; max-width: none; }
  .toast-container { left: 14px; right: 14px; bottom: 14px; }
  .login-card, .login-panel { padding: 24px 20px; }
  .table-wrap > table { min-width: 560px; }
  /* Tabelle: scroll orizzontale sempre disponibile */
  .card > .table, .panel > .table, .card > .tbl { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .card > .table > thead, .card > .table > tbody, .panel > .table > thead, .panel > .table > tbody, .card > .tbl > thead, .card > .tbl > tbody { display: table; width: 100%; min-width: 560px; }
}

/* Tabelle "stack": righe → card. Solo con data-label sulle celle: <td data-label="Email"> */
@media (max-width: 640px) {
  .table.stack, .tbl.stack, .data-table.stack { display: block; }
  .table.stack thead, .tbl.stack thead, .data-table.stack thead { display: none; }
  .table.stack tbody, .tbl.stack tbody, .data-table.stack tbody { display: block; width: 100%; min-width: 0; }
  .table.stack thead { min-width: 0; }
  .table.stack tr, .tbl.stack tr, .data-table.stack tr {
    display: block; padding: 10px 0; border-bottom: 1px solid var(--hf-line);
  }
  .table.stack tr:last-child, .tbl.stack tr:last-child, .data-table.stack tr:last-child { border-bottom: 0; }
  .table.stack td, .tbl.stack td, .data-table.stack td {
    display: grid; grid-template-columns: minmax(90px, 0.36fr) 1fr; gap: 10px; padding: 5px 4px; border: 0; text-align: left;
    align-items: center; justify-items: start;
  }
  .table.stack td.right, .tbl.stack td.right { text-align: left; }
  .table.stack td::before, .tbl.stack td::before, .data-table.stack td::before {
    content: attr(data-label); color: var(--hf-muted); font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; align-self: center;
  }
  .table.stack td:not([data-label]), .tbl.stack td:not([data-label]) { grid-template-columns: 1fr; }
  .table.stack td:not([data-label])::before { display: none; }
  .table.stack td.row-actions, .tbl.stack td.row-actions, .data-table.stack td.row-actions {
    display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px;
  }
  .table.stack td.row-actions::before, .tbl.stack td.row-actions::before { flex: 0 0 100%; }
  .table.stack tbody tr:hover td { background: transparent; }
}

@media (max-width: 480px) {
  h1 { font-size: 21px; }
  .page-head h1, .page-header h1, .page-intro h2 { font-size: 22px; }
  .kpi-grid, .stats, .stat-grid, .kpis { grid-template-columns: 1fr 1fr; }
  .topbar { min-height: 58px; padding: 8px 12px; }
  .env-pill { display: none; }
  .brand-text strong { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0ms !important; }
}

@media print {
  .sidebar, .sidebar-backdrop, .topbar, .toast, .menu-toggle, .form-actions, .row-actions { display: none !important; }
  .layout, .shell, .admin-shell { display: block; }
  body { background: #fff; }
  .card, .panel { box-shadow: none; break-inside: avoid; }
}

/* Icona hamburger (usata dal ::before del .menu-toggle) */
:root { --hf-i-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E"); }

/* ------------------------------------------------------------------
   ICONE — set condiviso (stroke 2, 24x24) come mask CSS.
   Uso: <span class="hf-icon" data-icon="bell"></span> oppure
        <a data-icon="keys">API key</a> nella sidebar-nav / brand-mark.
   Generato da scratch gen_icons.py: per aggiungerne una, copia il pattern.
   ------------------------------------------------------------------ */
[data-icon="dashboard"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='9' rx='1'/%3E%3Crect x='14' y='3' width='7' height='5' rx='1'/%3E%3Crect x='14' y='12' width='7' height='9' rx='1'/%3E%3Crect x='3' y='16' width='7' height='5' rx='1'/%3E%3C/svg%3E")}
[data-icon="home"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V21h14V9.5'/%3E%3Cpath d='M10 21v-6h4v6'/%3E%3C/svg%3E")}
[data-icon="bell"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E")}
[data-icon="list"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13'/%3E%3Cpath d='M3 6h.01M3 12h.01M3 18h.01'/%3E%3C/svg%3E")}
[data-icon="file-text"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M16 13H8M16 17H8M10 9H8'/%3E%3C/svg%3E")}
[data-icon="users"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E")}
[data-icon="user"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E")}
[data-icon="webhook"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E")}
[data-icon="key"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='15.5' r='5.5'/%3E%3Cpath d='m21 2-9.6 9.6'/%3E%3Cpath d='m15.5 7.5 3 3L22 7l-3-3'/%3E%3C/svg%3E")}
[data-icon="audit"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 6h5M16 12h5M16 18h5'/%3E%3Cpath d='m3 6 2 2 4-4'/%3E%3Cpath d='m3 12 2 2 4-4'/%3E%3Cpath d='m3 18 2 2 4-4'/%3E%3C/svg%3E")}
[data-icon="settings"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 4h-7M10 4H3M21 12h-9M8 12H3M21 20h-5M12 20H3'/%3E%3Cpath d='M14 2v4M8 10v4M16 18v4'/%3E%3C/svg%3E")}
[data-icon="folder"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/%3E%3C/svg%3E")}
[data-icon="files"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.5 2H8.6c-.4 0-.8.2-1.1.5-.3.3-.5.7-.5 1.1v12.8c0 .4.2.8.5 1.1.3.3.7.5 1.1.5h9.8c.4 0 .8-.2 1.1-.5.3-.3.5-.7.5-1.1V6.5L15.5 2z'/%3E%3Cpath d='M3 7.6v12.8c0 .4.2.8.5 1.1.3.3.7.5 1.1.5h9.8'/%3E%3Cpath d='M15 2v5h5'/%3E%3C/svg%3E")}
[data-icon="upload"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m17 8-5-5-5 5'/%3E%3Cpath d='M12 3v12'/%3E%3C/svg%3E")}
[data-icon="download"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M12 15V3'/%3E%3C/svg%3E")}
[data-icon="cpu"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3Crect x='9' y='9' width='6' height='6'/%3E%3Cpath d='M15 2v2M15 20v2M2 15h2M2 9h2M20 15h2M20 9h2M9 2v2M9 20v2'/%3E%3C/svg%3E")}
[data-icon="sparkles"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 1.9 5.8a2 2 0 0 0 1.3 1.3L21 12l-5.8 1.9a2 2 0 0 0-1.3 1.3L12 21l-1.9-5.8a2 2 0 0 0-1.3-1.3L3 12l5.8-1.9a2 2 0 0 0 1.3-1.3L12 3z'/%3E%3C/svg%3E")}
[data-icon="layers"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z'/%3E%3Cpath d='m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65'/%3E%3Cpath d='m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65'/%3E%3C/svg%3E")}
[data-icon="activity"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2'/%3E%3C/svg%3E")}
[data-icon="printer"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M6 9V3h12v6'/%3E%3Crect x='6' y='14' width='12' height='8' rx='1'/%3E%3C/svg%3E")}
[data-icon="plug"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22v-5'/%3E%3Cpath d='M9 8V2M15 8V2'/%3E%3Cpath d='M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z'/%3E%3C/svg%3E")}
[data-icon="arrows"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3 4 7l4 4'/%3E%3Cpath d='M4 7h16'/%3E%3Cpath d='m16 21 4-4-4-4'/%3E%3Cpath d='M20 17H4'/%3E%3C/svg%3E")}
[data-icon="tag"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1'/%3E%3C/svg%3E")}
[data-icon="tags"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 5 6.3 6.3a2.4 2.4 0 0 1 0 3.4L17 19'/%3E%3Cpath d='M9.586 5.586A2 2 0 0 0 8.172 5H3a1 1 0 0 0-1 1v5.172a2 2 0 0 0 .586 1.414L8.29 18.29a2.426 2.426 0 0 0 3.42 0l3.58-3.58a2.426 2.426 0 0 0 0-3.42z'/%3E%3Ccircle cx='6.5' cy='9.5' r='.8'/%3E%3C/svg%3E")}
[data-icon="repeat"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m17 2 4 4-4 4'/%3E%3Cpath d='M3 11v-1a4 4 0 0 1 4-4h14'/%3E%3Cpath d='m7 22-4-4 4-4'/%3E%3Cpath d='M21 13v1a4 4 0 0 1-4 4H3'/%3E%3C/svg%3E")}
[data-icon="receipt"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z'/%3E%3Cpath d='M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8'/%3E%3Cpath d='M12 17.5v-11'/%3E%3C/svg%3E")}
[data-icon="flask"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2v7.31'/%3E%3Cpath d='M14 9.3V1.99'/%3E%3Cpath d='M8.5 2h7'/%3E%3Cpath d='M14 9.3a6.5 6.5 0 1 1-4 0'/%3E%3Cpath d='M5.52 16h12.96'/%3E%3C/svg%3E")}
[data-icon="megaphone"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 18-5v12L3 14v-3z'/%3E%3Cpath d='M11.6 16.8a3 3 0 1 1-5.8-1.6'/%3E%3C/svg%3E")}
[data-icon="layout"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18'/%3E%3Cpath d='M9 21V9'/%3E%3C/svg%3E")}
[data-icon="grid"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E")}
[data-icon="clock"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E")}
[data-icon="inbox"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E")}
[data-icon="kanban"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 5v11'/%3E%3Cpath d='M12 5v6'/%3E%3Cpath d='M18 5v14'/%3E%3C/svg%3E")}
[data-icon="radio"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.9 19.1C1 15.2 1 8.8 4.9 4.9'/%3E%3Cpath d='M7.8 16.2c-2.3-2.3-2.3-6.1 0-8.5'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M16.2 7.8c2.3 2.3 2.3 6.1 0 8.5'/%3E%3Cpath d='M19.1 4.9C23 8.8 23 15.1 19.1 19'/%3E%3C/svg%3E")}
[data-icon="monitor"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2'/%3E%3Cpath d='M8 21h8'/%3E%3Cpath d='M12 17v4'/%3E%3C/svg%3E")}
[data-icon="box"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E")}
[data-icon="shield"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3C/svg%3E")}
[data-icon="shield-check"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E")}
[data-icon="log-out"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='m16 17 5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E")}
[data-icon="log-in"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpath d='m10 17 5-5-5-5'/%3E%3Cpath d='M15 12H3'/%3E%3C/svg%3E")}
[data-icon="external"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E")}
[data-icon="search"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E")}
[data-icon="mail"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E")}
[data-icon="credit-card"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E")}
[data-icon="check-square"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3Cpath d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E")}
[data-icon="bar-chart"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M18 17V9'/%3E%3Cpath d='M13 17V5'/%3E%3Cpath d='M8 17v-3'/%3E%3C/svg%3E")}
[data-icon="lifebuoy"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='m4.93 4.93 4.24 4.24'/%3E%3Cpath d='m14.83 9.17 4.24-4.24'/%3E%3Cpath d='m14.83 14.83 4.24 4.24'/%3E%3Cpath d='m9.17 14.83-4.24 4.24'/%3E%3C/svg%3E")}
[data-icon="menu"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E")}
[data-icon="copy"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='14' height='14' rx='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/svg%3E")}
[data-icon="check"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
[data-icon="x"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E")}
[data-icon="chevron-down"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
[data-icon="arrow-right"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E")}
[data-icon="arrow-left"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3Cpath d='M19 12H5'/%3E%3C/svg%3E")}
[data-icon="lock"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E")}
[data-icon="award"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3Cpath d='M15.477 12.89 17 22l-5-3-5 3 1.523-9.11'/%3E%3C/svg%3E")}
[data-icon="package"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7.5 4.27 9 5.15'/%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E")}
[data-icon="database"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='9' ry='3'/%3E%3Cpath d='M3 5v14a9 3 0 0 0 18 0V5'/%3E%3Cpath d='M3 12a9 3 0 0 0 18 0'/%3E%3C/svg%3E")}
[data-icon="info"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E")}
[data-icon="alert"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E")}
[data-icon="code"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 18 6-6-6-6'/%3E%3Cpath d='m8 6-6 6 6 6'/%3E%3C/svg%3E")}
[data-icon="book"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20'/%3E%3C/svg%3E")}
[data-icon="play"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 3 14 9-14 9V3z'/%3E%3C/svg%3E")}
[data-icon="building"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cpath d='M9 22v-4h6v4'/%3E%3Cpath d='M8 6h.01M16 6h.01M12 6h.01M12 10h.01M12 14h.01M16 10h.01M16 14h.01M8 10h.01M8 14h.01'/%3E%3C/svg%3E")}
[data-icon="smartphone"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E")}
[data-icon="fingerprint"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12C2 6.5 6.5 2 12 2a10 10 0 0 1 8 4'/%3E%3Cpath d='M5 19.5C5.5 18 6 15 6 12a6 6 0 0 1 .34-2'/%3E%3Cpath d='M17.29 21.02c.12-.6.43-2.3.5-3.02'/%3E%3Cpath d='M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4'/%3E%3Cpath d='M8.65 22c.21-.66.45-1.32.57-2'/%3E%3Cpath d='M14 13.12c0 2.38 0 6.38-1 8.88'/%3E%3Cpath d='M2 16h.01'/%3E%3Cpath d='M21.8 16c.2-2 .131-5.354 0-6'/%3E%3Cpath d='M9 6.8a6 6 0 0 1 9 5.2v2'/%3E%3C/svg%3E")}
[data-icon="message"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E")}
[data-icon="image"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21'/%3E%3C/svg%3E")}
[data-icon="send"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'/%3E%3Cpath d='M22 2 11 13'/%3E%3C/svg%3E")}
[data-icon="trash"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6'/%3E%3Cpath d='M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2'/%3E%3C/svg%3E")}
[data-icon="more"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='12' cy='5' r='1'/%3E%3Ccircle cx='12' cy='19' r='1'/%3E%3C/svg%3E")}
[data-icon="refresh"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3Cpath d='M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16'/%3E%3Cpath d='M16 16h5v5'/%3E%3C/svg%3E")}
[data-icon="plus"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E")}
[data-icon="globe"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E")}
[data-icon="zap"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z'/%3E%3C/svg%3E")}
[data-icon="pen"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z'/%3E%3C/svg%3E")}
[data-icon="wrench"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E")}
[data-icon="terminal"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 17 6-6-6-6'/%3E%3Cpath d='M12 19h8'/%3E%3C/svg%3E")}
[data-icon="eye"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}
[data-icon="calendar"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E")}
[data-icon="star"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/%3E%3C/svg%3E")}
[data-icon="sliders"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21v-7'/%3E%3Cpath d='M4 10V3'/%3E%3Cpath d='M12 21v-9'/%3E%3Cpath d='M12 8V3'/%3E%3Cpath d='M20 21v-5'/%3E%3Cpath d='M20 12V3'/%3E%3Cpath d='M2 14h4'/%3E%3Cpath d='M10 8h4'/%3E%3Cpath d='M18 16h4'/%3E%3C/svg%3E")}
[data-icon="history"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3Cpath d='M12 7v5l4 2'/%3E%3C/svg%3E")}
[data-icon="link"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E")}
[data-icon="compass"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m16.24 7.76-2.12 6.36-6.36 2.12 2.12-6.36z'/%3E%3C/svg%3E")}
[data-icon="map-pin"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E")}
[data-icon="briefcase"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3Crect x='2' y='6' width='20' height='14' rx='2'/%3E%3C/svg%3E")}
[data-icon="hash"]::before{--hf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h16'/%3E%3Cpath d='M4 15h16'/%3E%3Cpath d='M10 3 8 21'/%3E%3Cpath d='m16 3-2 18'/%3E%3C/svg%3E")}