/* pMan design system: tokens, primitives, and the icon set, shared by ALL THREE
   clients. Canonical copy lives here (Tauri's frontendDist cannot reach outside
   crates/app/ui); the server embeds it at /theme.css and build-extension.ps1
   copies it into the extension. Load it BEFORE the client stylesheet
   (style.css for app + portal, popup.css for the extension), which owns layout.
   Nothing here sizes <body> or the page, so the 360px popup can load it too. */

:root {
  color-scheme: dark;

  /* Surfaces, darkest to lightest. */
  --bg: #0d0f13;
  --bg-elev: #12151a;
  --panel: #171a20;
  --panel-2: #1d2128;
  --panel-3: #262b33;
  --line: #242932;
  --line-strong: #323844;

  /* Text. */
  --text: #e8ebf0;
  --muted: #8e96a4;
  --faint: #5d6574;

  /* Accent: the brand emerald from the favicon. */
  --accent: #6ee7b7;
  --accent-hover: #8af0c9;
  --accent-ink: #03261a;
  --accent-soft: rgba(110, 231, 183, 0.12);
  --accent-line: rgba(110, 231, 183, 0.34);

  /* Status. */
  --danger: #f58f8f;
  --danger-ink: #2b0808;
  --danger-soft: rgba(245, 143, 143, 0.12);
  --warn: #f1c26b;
  --warn-soft: rgba(241, 194, 107, 0.12);
  --online: #3fd07a;

  /* Per-type avatar tints (item_type 1..6). */
  --t1: #6ee7b7;
  --t2: #f1c26b;
  --t3: #8ab4ff;
  --t4: #e7d77a;
  --t5: #c4a1ff;
  --t6: #6fd6e8;

  --radius-sm: 6px;
  --radius: 9px;
  --radius-lg: 14px;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.6), 0 6px 18px rgba(0, 0, 0, 0.35);
  --ring: 0 0 0 3px rgba(110, 231, 183, 0.26);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
    "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui,
    -apple-system, "Inter", "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", "Cascadia Code", Consolas, ui-monospace,
    "SF Mono", Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.01em; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: var(--mono); font-size: 0.92em; }
hr { border: none; border-top: 1px solid var(--line); margin: 18px 0; }
::selection { background: rgba(110, 231, 183, 0.3); }

.hidden { display: none !important; }
/* The [hidden] attribute must win over any author `display` (buttons are
   inline-flex, list rows flex): the UA sheet alone loses to author rules. */
[hidden] { display: none !important; }
.muted { color: var(--muted); font-weight: 400; }
.small { font-size: 0.86em; }
.center { text-align: center; }

/* Scrollbars: thin and quiet so dense lists don't look like a spreadsheet. */
* { scrollbar-width: thin; scrollbar-color: var(--panel-3) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--panel-3);
  border: 3px solid transparent;
  border-radius: 10px;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--line-strong); }
::-webkit-scrollbar-track { background: transparent; }

/* ---- form controls ---------------------------------------------------------- */

input, textarea, select {
  width: 100%;
  padding: 9px 11px;
  margin-top: 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:hover, textarea:hover, select:hover { border-color: #3d4452; }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent-line);
  box-shadow: var(--ring);
  background: var(--panel);
}
input[readonly] { color: var(--muted); background: var(--panel); }
textarea { resize: vertical; min-height: 70px; }
select {
  appearance: none;
  padding-right: 32px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e96a4' 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;
}
select:disabled { opacity: 0.6; cursor: default; }
option { background: var(--panel-2); color: var(--text); }

input[type="checkbox"] {
  appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--line-strong);
  border-radius: 5px;
  background: var(--panel-2);
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  vertical-align: -4px;
}
input[type="checkbox"]::before {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--accent-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: scale(0);
  transition: transform 0.12s var(--ease);
}
input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
input[type="checkbox"]:checked::before { transform: scale(1); }

progress {
  appearance: none;
  height: 8px;
  border: none;
  border-radius: 99px;
  background: var(--panel-3);
  overflow: hidden;
}
progress::-webkit-progress-bar { background: var(--panel-3); border-radius: 99px; }
progress::-webkit-progress-value { background: var(--accent); border-radius: 99px; transition: width 0.2s ease; }
progress::-moz-progress-bar { background: var(--accent); border-radius: 99px; }

/* ---- buttons ---------------------------------------------------------------
   Default <button> is the primary action. .btn-dim is secondary, .danger-btn
   is destructive, .icon-btn is a chrome-less square icon target. */

button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease,
    transform 0.08s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
button:hover:not(:disabled) { background: var(--accent-hover); }
button:active:not(:disabled) { transform: translateY(1px) scale(0.985); }
button:disabled { opacity: 0.45; cursor: default; }
button:focus-visible, a:focus-visible, [role="button"]:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

.btn-dim {
  background: var(--panel-3);
  color: var(--text);
  border-color: var(--line-strong);
}
.btn-dim:hover:not(:disabled) { background: #2f3540; border-color: #414856; }

.icon-btn {
  background: transparent;
  color: var(--muted);
}
.icon-btn:hover:not(:disabled) {
  background: var(--panel-3);
  color: var(--text);
}

.icon-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  flex: none;
  border-radius: 8px;
}

.danger-btn { background: var(--danger); color: var(--danger-ink); }
.danger-btn:hover:not(:disabled) { background: #f8a5a5; }
/* A destructive icon (trash, revoke) warns on hover without shouting at rest. */
.icon-btn.danger:hover:not(:disabled) { background: var(--danger-soft); color: var(--danger); }

.linklike {
  display: inline;
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.linklike:hover:not(:disabled) { background: none; text-decoration: underline; }

/* ---- icons -----------------------------------------------------------------
   <span class="i" data-icon="NAME"> paints currentColor through an SVG mask,
   so an icon follows its button's text colour in every state. Built from JS by
   pmanShared.icon(name). Path data adapted from Lucide (ISC licence,
   https://lucide.dev), several simplified. */

.i {
  display: inline-block;
  width: var(--icon-size, 16px);
  height: var(--icon-size, 16px);
  flex: none;
  background: currentColor;
  -webkit-mask: var(--svg) center / contain no-repeat;
  mask: var(--svg) center / contain no-repeat;
}
.icon-btn .i { --icon-size: 17px; }

/* Transient success state (pmanShared.flashIcon). */
.icon-btn.done, .icon-btn.done:hover:not(:disabled) { color: var(--accent); }

@keyframes pman-spin { to { transform: rotate(1turn); } }
.i.spin { animation: pman-spin 0.8s linear infinite; }

/* ---- shared pieces ------------------------------------------------------------ */

/* Item avatar: a tinted tile carrying the type icon, or a login's monogram. */
.avatar {
  --tint: var(--t1);
  width: 36px;
  height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--tint);
  background: color-mix(in srgb, var(--tint) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint) 22%, transparent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  --icon-size: 18px;
}
.avatar.t2 { --tint: var(--t2); }
.avatar.t3 { --tint: var(--t3); }
.avatar.t4 { --tint: var(--t4); }
.avatar.t5 { --tint: var(--t5); }
.avatar.t6 { --tint: var(--t6); }
/* Site icon in place of the letter (DESIGN §23). A light chip so dark favicons
   stay visible on the dark theme. */
.avatar.has-icon {
  background: #eef1f4;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.avatar img { width: 20px; height: 20px; object-fit: contain; display: block; }

/* Search field with a leading magnifier icon. */
.search-box { position: relative; display: block; color: var(--faint); }
.search-box > .i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.search-box input { margin: 0; padding-left: 36px; }

/* The star after a favorite's name (pmanShared.favMark). */
.fav-mark { --icon-size: 12px; margin-left: 6px; color: var(--warn); }

/* Type filter chips. */
.type-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.type-tab {
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: transparent;
  color: var(--muted);
  font-weight: 500;
  font-size: 0.9em;
}
.type-tab:hover:not(:disabled) { background: var(--panel-2); color: var(--text); }
.type-tab.active, .type-tab.active:hover:not(:disabled) {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
}

/* Segmented control (generator mode). */
.gen-tabs {
  display: flex;
  gap: 2px;
  padding: 3px;
  margin-bottom: 14px;
  border-radius: 11px;
  background: var(--bg);
  border: 1px solid var(--line);
}
.gen-tabs button {
  flex: 1;
  padding: 6px 10px;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
}
.gen-tabs button:hover:not(:disabled) { background: var(--panel-2); color: var(--text); }
.gen-tabs button.active, .gen-tabs button.active:hover:not(:disabled) {
  background: var(--panel-3);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 0 0 1px var(--line-strong);
}

/* Tab bar (dialogs with several sections): underline tabs that scroll
   sideways instead of wrapping when there are many. */
.dialog-tabs {
  display: flex;
  gap: 2px;
  margin: 6px 0 16px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.dialog-tabs::-webkit-scrollbar { display: none; }
.dialog-tabs .tab {
  flex: none;
  padding: 8px 11px;
  margin-bottom: -1px;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
}
.dialog-tabs .tab:hover:not(:disabled) { background: transparent; color: var(--text); }
.dialog-tabs .tab.active, .dialog-tabs .tab.active:hover:not(:disabled) {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Brand mark: the favicon's padlock, drawn with the same mask mechanism. */
.brand-mark {
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: linear-gradient(145deg, #7ff0c2, #34c796);
  color: var(--accent-ink);
  box-shadow: 0 4px 14px rgba(110, 231, 183, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  --icon-size: 16px;
}

/* A read-only secret or generated value. */
.secret-display {
  display: block;
  font-family: var(--mono);
  font-size: 1.08em;
  letter-spacing: 0.04em;
  word-break: break-all;
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 12px 14px;
  border-radius: var(--radius);
  user-select: all;
}

.draft-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 99px;
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent-line);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  vertical-align: 1px;
}

.i[data-icon="search"] { --svg: 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='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); }
.i[data-icon="plus"] { --svg: 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 12h14M12 5v14'/%3E%3C/svg%3E"); }
.i[data-icon="lock"] { --svg: 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='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); }
.i[data-icon="folder"] { --svg: 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"); }
.i[data-icon="star"] { --svg: 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 2.5l2.94 5.96 6.56.95-4.75 4.63 1.12 6.54L12 17.5l-5.87 3.08 1.12-6.54L2.5 9.41l6.56-.95z'/%3E%3C/svg%3E"); }
.i[data-icon="star-fill"] { --svg: 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 fill='black' d='M12 2.5l2.94 5.96 6.56.95-4.75 4.63 1.12 6.54L12 17.5l-5.87 3.08 1.12-6.54L2.5 9.41l6.56-.95z'/%3E%3C/svg%3E"); }
.i[data-icon="user"] { --svg: 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"); }
.i[data-icon="key"] { --svg: 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.59 17.41A2 2 0 0 0 2 18.83V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.17a2 2 0 0 0 1.42-.59l.81-.81a6.5 6.5 0 1 0-4-4z'/%3E%3Ccircle cx='16.5' cy='7.5' r='.5'/%3E%3C/svg%3E"); }
.i[data-icon="clock"] { --svg: 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='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.i[data-icon="hash"] { --svg: 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 9h16M4 15h16M10 3 8 21M16 3l-2 18'/%3E%3C/svg%3E"); }
.i[data-icon="pencil"] { --svg: 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 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/%3E%3Cpath d='m15 5 4 4'/%3E%3C/svg%3E"); }
.i[data-icon="trash"] { --svg: 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 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M10 11v6M14 11v6'/%3E%3C/svg%3E"); }
.i[data-icon="eye"] { --svg: 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 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.i[data-icon="dice"] { --svg: 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='3'/%3E%3Cpath d='M8 8h.01M16 8h.01M12 12h.01M8 16h.01M16 16h.01' stroke-width='3'/%3E%3C/svg%3E"); }
.i[data-icon="archive"] { --svg: 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='5' rx='1'/%3E%3Cpath d='M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8M10 12h4'/%3E%3C/svg%3E"); }
.i[data-icon="undo"] { --svg: 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%3C/svg%3E"); }
.i[data-icon="external"] { --svg: 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 3h6v6M10 14 21 3M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E"); }
.i[data-icon="history"] { --svg: 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 3v5h5M12 7v5l4 2'/%3E%3C/svg%3E"); }
.i[data-icon="check"] { --svg: 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"); }
.i[data-icon="copy"] { --svg: 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 16a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2'/%3E%3C/svg%3E"); }
.i[data-icon="refresh"] { --svg: 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 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8'/%3E%3Cpath d='M21 3v5h-5M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16'/%3E%3Cpath d='M8 16H3v5'/%3E%3C/svg%3E"); }
.i[data-icon="upload"] { --svg: 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-4M17 8l-5-5-5 5M12 3v12'/%3E%3C/svg%3E"); }
.i[data-icon="download"] { --svg: 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-4M7 10l5 5 5-5M12 15V3'/%3E%3C/svg%3E"); }
.i[data-icon="shield"] { --svg: 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"); }
.i[data-icon="activity"] { --svg: 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-4l-3 9L9 3l-3 9H2'/%3E%3C/svg%3E"); }
.i[data-icon="sliders"] { --svg: 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 20H3M14 2v4M8 10v4M16 18v4'/%3E%3C/svg%3E"); }
.i[data-icon="monitor"] { --svg: 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 21h8M12 17v4'/%3E%3C/svg%3E"); }
.i[data-icon="chevron-left"] { --svg: 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 18-6-6 6-6'/%3E%3C/svg%3E"); }
.i[data-icon="grid"] { --svg: 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.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E"); }
.i[data-icon="inbox"] { --svg: 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"); }
.i[data-icon="paperclip"] { --svg: 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.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E"); }
.i[data-icon="backspace"] { --svg: 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 5a2 2 0 0 0-1.34.52l-5.74 5.74a1 1 0 0 0 0 1.48l5.74 5.74A2 2 0 0 0 10 19h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2z'/%3E%3Cpath d='m12 9 6 6M18 9l-6 6'/%3E%3C/svg%3E"); }
.i[data-icon="face"] { --svg: 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 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2'/%3E%3Cpath d='M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01'/%3E%3C/svg%3E"); }
.i[data-icon="globe"] { --svg: 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='9'/%3E%3Cpath d='M12 3a13 13 0 0 0 0 18 13 13 0 0 0 0-18M3 12h18'/%3E%3C/svg%3E"); }
.i[data-icon="card"] { --svg: 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 10h20M6 15h4'/%3E%3C/svg%3E"); }
.i[data-icon="id"] { --svg: 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%3Ccircle cx='8' cy='11' r='2'/%3E%3Cpath d='M5 16a3 3 0 0 1 6 0M14 10h5M14 14h4'/%3E%3C/svg%3E"); }
.i[data-icon="note"] { --svg: 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 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4M16 13H8M16 17H8M10 9H8'/%3E%3C/svg%3E"); }
.i[data-icon="award"] { --svg: 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.48 12.89 17 22l-5-3-5 3 1.52-9.11'/%3E%3C/svg%3E"); }
.i[data-icon="fingerprint"] { --svg: 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 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4M14 13.12c0 2.38 0 6.38-1 8.88M17.29 21.02c.12-.6.43-2.3.5-3.02M2 12a10 10 0 0 1 18-6M2 16h.01M21.8 16c.2-2 .13-5.35 0-6M5 19.5C5.5 18 6 15 6 12a6 6 0 0 1 .34-2M8.65 22c.21-.66.45-1.32.57-2M9 6.8a6 6 0 0 1 9 5.2v2'/%3E%3C/svg%3E"); }
.i[data-icon="bell"] { --svg: 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-9M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E"); }
.i[data-icon="ban"] { --svg: 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='9'/%3E%3Cpath d='m5.6 5.6 12.8 12.8'/%3E%3C/svg%3E"); }
.i[data-icon="file-search"] { --svg: 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 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Ccircle cx='11.5' cy='14.5' r='2.5'/%3E%3Cpath d='M13.3 16.3 15 18'/%3E%3C/svg%3E"); }
.i[data-icon="zap"] { --svg: 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"); }