/* ───────────────────────────────────────────────────────────────────────────
   Egglee — Design System "Dark Premium"
   Tokens + componentes compartilhados por todas as telas do painel admin.
   Mantém os nomes de classe/variáveis legados (.side, .grid, .cell, .tb,
   .modal, --bg, --panel…) para não quebrar o JS/markup existente.
─────────────────────────────────────────────────────────────────────────── */
:root {
  /* superfícies */
  --bg:        #08090d;
  --bg-soft:   #0d0f16;
  --panel:     #12141d;
  --panel-2:   #171a25;
  --elev:      #1c2030;
  --border:    #242838;
  --border-2:  #313650;
  /* texto */
  --text:      #eceffa;
  --muted:     #888fa6;
  --faint:     #5b6178;
  /* marca (violeta → rosa) */
  --accent:    #b06cff;
  --accent2:   #8b3dff;
  --pink:      #ec4899;
  --blue:      #6366f1;
  --grad:      linear-gradient(135deg, #8b5cff 0%, #c64bdd 55%, #ec4899 100%);
  --grad-soft: linear-gradient(135deg, rgba(139,92,255,.18), rgba(236,72,153,.18));
  --ok:        #2fd07a;
  --danger:    #fb5a6e;
  /* efeitos */
  --radius:    16px;
  --radius-sm: 11px;
  --shadow:    0 18px 50px -12px rgba(0,0,0,.6), 0 4px 14px rgba(0,0,0,.4);
  --shadow-sm: 0 4px 16px -4px rgba(0,0,0,.5);
  --glow:      0 10px 30px -6px rgba(160,80,230,.5);
  --ring:      0 0 0 3px rgba(176,108,255,.30);
  --tbar:      62px;
  --side-w:    230px;
  --font-display: "Sora", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background:
    radial-gradient(1200px 640px at 10% -10%, rgba(139,92,255,.14), transparent 60%),
    radial-gradient(1000px 560px at 105% -5%, rgba(236,72,153,.10), transparent 55%),
    radial-gradient(900px 700px at 50% 115%, rgba(99,102,241,.08), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}
a { color: inherit; }
::selection { background: rgba(176,108,255,.35); }

/* scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 20px; }
*::-webkit-scrollbar-track { background: transparent; }

/* ── Topbar ─────────────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 40;
  height: var(--tbar);
  display: flex; align-items: center; gap: 18px;
  padding: 0 20px;
  background: rgba(10,11,16,.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -.2px; text-decoration: none; color: var(--text); }
.brand .logo {
  width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
  background: url("/static/favicon.svg") center/cover no-repeat;
  font-size: 0; box-shadow: 0 4px 14px rgba(176,108,255,.45), inset 0 0 0 1px rgba(255,255,255,.12);
}
.brand b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: 10px; text-decoration: none;
  color: var(--muted); font-size: 14px; font-weight: 500; transition: .15s;
}
.nav a:hover { color: var(--text); background: var(--panel); }
.nav a.active { color: var(--text); background: var(--grad-soft); box-shadow: inset 0 0 0 1px var(--border-2), 0 2px 10px -4px rgba(176,108,255,.5); }
.topbar .sp { flex: 1; }
.topbar .right { display: flex; align-items: center; gap: 10px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--faint); box-shadow: 0 0 0 3px rgba(255,255,255,.03); }
.dot.ok { background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.ghost {
  color: var(--muted); text-decoration: none; font-size: 14px; padding: 8px 12px;
  border-radius: 10px; border: 1px solid var(--border); transition: .15s; cursor: pointer; background: transparent;
}
.ghost:hover { color: var(--text); border-color: var(--border-2); }
.menu-btn { display: none; background: transparent; border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: 7px 10px; font-size: 18px; cursor: pointer; }

/* ── Layout helpers ─────────────────────────────────────────────────────── */
.page { padding: 22px; max-width: 1500px; margin: 0 auto; }
.h-title { font-family: var(--font-display); font-size: 23px; font-weight: 700; letter-spacing: -.5px; margin: 0 0 3px; }
.h-sub { color: var(--muted); font-size: 14px; margin: 0 0 20px; }

.card {
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0)) , var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card.pad { padding: 18px; }

/* ── Inputs ─────────────────────────────────────────────────────────────── */
label { display: block; font-size: 12.5px; color: var(--muted); margin: 14px 0 6px; font-weight: 500; }
input[type=text], input[type=number], input[type=password], select, textarea {
  width: 100%; padding: 10px 12px;
  background: var(--bg-soft); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 14px; font-family: inherit; transition: .15s; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent2); box-shadow: var(--ring); }
textarea { resize: vertical; min-height: 84px; max-height: 55vh; overflow-y: auto;
  overflow-wrap: anywhere; word-break: break-word; line-height: 1.45; }
select { appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888fa6' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
.row { display: flex; gap: 12px; }
.row > * { flex: 1; min-width: 0; }
.check { display: flex; align-items: center; gap: 9px; margin-top: 14px; }
.check input { width: auto; accent-color: var(--accent2); }
.check label { margin: 0; color: var(--text); font-size: 14px; }
input[type=range] { accent-color: var(--accent2); }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn, button.go {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 16px; font-size: 14.5px; font-weight: 600; font-family: inherit;
  border: none; border-radius: var(--radius-sm); cursor: pointer; transition: .16s;
  background: var(--grad); color: #fff; box-shadow: 0 6px 18px rgba(176,108,255,.30);
}
.btn:hover, button.go:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn:active, button.go:active { transform: translateY(0); }
.btn:disabled, button.go:disabled { opacity: .5; cursor: not-allowed; filter: none; transform: none; box-shadow: none; }
button.go { width: 100%; margin-top: 20px; padding: 13px; font-size: 15px; }
button.go.ds { background: linear-gradient(135deg,#3b82f6,#06b6d4); box-shadow: 0 6px 18px rgba(59,130,246,.28); }

.btn-2, button.mini, button.tb, button.hd, .dlbtn, .ghost-btn {
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 13px; font-size: 13px; font-weight: 500; cursor: pointer; transition: .15s;
  white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
.btn-2:hover, button.mini:hover, button.tb:hover, button.hd:hover, .dlbtn:hover {
  border-color: var(--border-2); background: var(--elev);
}
button.tb.on { border-color: var(--accent2); color: var(--accent); background: var(--grad-soft); }
button.tb.danger, .acts .del { color: var(--danger); }
button.tb.danger:hover { border-color: var(--danger); }
button.tb:disabled { opacity: .4; cursor: default; }
button.hd:hover, .dlbtn:hover { border-color: var(--accent2); color: var(--accent); }

/* ── Badges / chips ─────────────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; background: var(--grad-soft); color: var(--accent);
  border: 1px solid var(--border-2); }

/* ── Spinner ────────────────────────────────────────────────────────────── */
.spinner { width: 34px; height: 34px; border: 3px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 12px; }
@keyframes spin { to { transform: rotate(360deg); } }
.hidden { display: none; }

/* ── Dashboard ──────────────────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 14px; margin-bottom: 22px; }
.stat { position: relative; overflow: hidden; padding: 18px; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.stat::after { content: ""; position: absolute; right: -30px; top: -30px; width: 90px; height: 90px;
  border-radius: 50%; background: var(--grad-soft); filter: blur(6px); }
.stat .ico { font-size: 20px; margin-bottom: 8px; }
.stat .num { font-family: var(--font-display); font-size: 28px; font-weight: 800; letter-spacing: -1px; }
.stat .lbl { color: var(--muted); font-size: 13px; margin-top: 2px; }
.quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: 14px; margin-bottom: 26px; }
.qa { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--border); text-decoration: none; color: var(--text);
  transition: .16s; box-shadow: var(--shadow-sm); }
.qa:hover { border-color: var(--border-2); transform: translateY(-2px); box-shadow: var(--shadow); }
.qa .qa-ico { width: 46px; height: 46px; border-radius: 12px; background: var(--grad-soft);
  display: grid; place-items: center; font-size: 22px; flex-shrink: 0; box-shadow: inset 0 0 0 1px var(--border-2); }
.qa .qa-t { font-weight: 600; font-size: 15px; }
.qa .qa-d { color: var(--muted); font-size: 12.5px; }
.sec-title { font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: -.2px; margin: 0 0 12px; display: flex; align-items: center; gap: 9px; }
.sec-title::before { content: ""; width: 3px; height: 15px; border-radius: 3px; background: var(--grad); flex-shrink: 0; }

/* ── Responsivo ─────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .menu-btn { display: inline-flex; }
  .nav { position: fixed; top: var(--tbar); left: 0; right: 0; flex-direction: column; gap: 2px;
    background: var(--bg-soft); border-bottom: 1px solid var(--border); padding: 10px; align-items: stretch;
    transform: translateY(-12px); opacity: 0; pointer-events: none; transition: .18s; z-index: 39; }
  .nav.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav a { padding: 12px 14px; }
  .topbar .right .hide-sm { display: none; }
  .page { padding: 16px; }
  .stat .num { font-size: 24px; }
}

/* ── Ícones (line-icons monocromáticos, herdam a cor via currentColor) ── */
.ic{ display:inline-block; width:1.12em; height:1.12em; vertical-align:-.17em; flex-shrink:0;
  background:currentColor; -webkit-mask:var(--i) center/contain no-repeat; mask:var(--i) center/contain no-repeat; }
.ic-home{ --i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d=%22M3 10.8 12 3.5l9 7.3%22/><path d=%22M5.2 9.4V19a1.4 1.4 0 0 0 1.4 1.4h3.4v-5.2h4v5.2h3.4A1.4 1.4 0 0 0 18.8 19V9.4%22/></svg>") }
.ic-spark{ --i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d=%22M12 2.5l2.2 5.7 5.8 2.1-5.8 2.1L12 18l-2.2-5.6L4 10.3l5.8-2.1z%22/><path d=%22M18.5 14.2l.9 2.3 2.3.9-2.3.9-.9 2.3-.9-2.3-2.3-.9 2.3-.9z%22/></svg>") }
.ic-inbox{ --i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d=%22M4 13.5h4l1.4 2.6h5.2L20 13.5%22/><path d=%22M4.2 13.5 6 5.4A2 2 0 0 1 8 3.9h8a2 2 0 0 1 2 1.5l1.8 8.1V17a2 2 0 0 1-2 2H6.2a2 2 0 0 1-2-2z%22/></svg>") }
.ic-star{ --i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d=%22M12 3.4l2.7 5.5 6 .9-4.4 4.2 1 6L12 17.3 6.7 20l1-6L3.3 9.8l6-.9z%22/></svg>") }
.ic-image{ --i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><rect x=%223%22 y=%224%22 width=%2218%22 height=%2216%22 rx=%222.6%22/><circle cx=%228.4%22 cy=%229.4%22 r=%221.9%22/><path d=%22M4 16.5l4.6-4.4 3.4 3 3-2.6L20 16.5%22/></svg>") }
.ic-chat{ --i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d=%22M20.5 12.2a8 8 0 0 1-11.2 7.3L4 21l1.5-5.1A8 8 0 1 1 20.5 12.2z%22/></svg>") }
.ic-grid{ --i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><rect x=%223.2%22 y=%223.2%22 width=%227%22 height=%227%22 rx=%221.8%22/><rect x=%2213.8%22 y=%223.2%22 width=%227%22 height=%227%22 rx=%221.8%22/><rect x=%223.2%22 y=%2213.8%22 width=%227%22 height=%227%22 rx=%221.8%22/><rect x=%2213.8%22 y=%2213.8%22 width=%227%22 height=%227%22 rx=%221.8%22/></svg>") }
.ic-box{ --i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d=%22M12 3.3l8 4.4v8.6L12 20.7l-8-4.4V7.7z%22/><path d=%22M4.3 7.9 12 12.2l7.7-4.3%22/><path d=%22M12 12.2v8.5%22/></svg>") }
.ic-clip{ --i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><rect x=%225%22 y=%224.3%22 width=%2214%22 height=%2216.4%22 rx=%222.6%22/><rect x=%228.7%22 y=%222.6%22 width=%226.6%22 height=%224%22 rx=%221.6%22/><path d=%22M8.8 11.2h6.4M8.8 15.2h4.2%22/></svg>") }
.ic-users{ --i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><circle cx=%229%22 cy=%228%22 r=%223.3%22/><path d=%22M3.4 20a5.6 5.6 0 0 1 11.2 0%22/><path d=%22M16 5.1a3.3 3.3 0 0 1 0 6.4%22/><path d=%22M17.2 14.3A5.6 5.6 0 0 1 20.6 20%22/></svg>") }
.ic-bolt{ --i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d=%22M13 2.5 4.5 13.5H10l-1 8 8.5-11H12z%22/></svg>") }
.ic-film{ --i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><rect x=%223%22 y=%224.5%22 width=%2218%22 height=%2215%22 rx=%222.4%22/><path d=%22M7.5 4.5v15M16.5 4.5v15M3 9.5h4.5M16.5 9.5H21M3 14.5h4.5M16.5 14.5H21%22/></svg>") }
.ic-folder{ --i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d=%22M4 6.4a2 2 0 0 1 2-2h3.6l2 2.4H18a2 2 0 0 1 2 2v8.4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z%22/></svg>") }
.ic-link{ --i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d=%22M9.6 14.4 14.4 9.6%22/><path d=%22M11.2 7.2 12.9 5.5a4 4 0 0 1 5.6 5.6l-1.7 1.7%22/><path d=%22M12.8 16.8l-1.7 1.7a4 4 0 0 1-5.6-5.6l1.7-1.7%22/></svg>") }
.ic-cog{ --i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><circle cx=%2212%22 cy=%2212%22 r=%223.2%22/><path d=%22M12 3v2.2M12 18.8V21M21 12h-2.2M5.2 12H3M18.4 5.6l-1.6 1.6M7.2 16.8l-1.6 1.6M18.4 18.4l-1.6-1.6M7.2 7.2 5.6 5.6%22/></svg>") }

/* ícones nos cards de dashboard/quick-actions herdam o roxo da marca */
.stat .ico .ic, .qa .qa-ico .ic { color: var(--accent); }
.stat .ico { color: var(--accent); }

.ic-menu{ --i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d=%22M4 7h16M4 12h16M4 17h16%22/></svg>") }
.ic-edit{ --i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d=%22M4 20.5h4L18.6 9.9a2.1 2.1 0 0 0-3-3L5 17.5v3z%22/><path d=%22M13.6 6.9l3 3%22/></svg>") }
.ic-copy{ --i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><rect x=%229%22 y=%229%22 width=%2211%22 height=%2211%22 rx=%222.2%22/><path d=%22M15 9V5.5a2 2 0 0 0-2-2H5.5a2 2 0 0 0-2 2V13a2 2 0 0 0 2 2H9%22/></svg>") }
.ic-down{ --i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d=%22M12 3.5v11.5%22/><path d=%22M7 10.5l5 5 5-5%22/><path d=%22M4 20.5h16%22/></svg>") }
.ic-trash{ --i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d=%22M4 6.5h16%22/><path d=%22M9 6.5V5A1.6 1.6 0 0 1 10.6 3.4h2.8A1.6 1.6 0 0 1 15 5v1.5%22/><path d=%22M6 6.5l1 13a2 2 0 0 0 2 1.9h6a2 2 0 0 0 2-1.9l1-13%22/><path d=%22M10 10.5v6.5M14 10.5v6.5%22/></svg>") }
.ic-save{ --i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d=%22M5 3.5h10.5L20 8v11.5a1.5 1.5 0 0 1-1.5 1.5H5.5A1.5 1.5 0 0 1 4 19.5V5A1.5 1.5 0 0 1 5.5 3.5z%22/><path d=%22M8 3.5v5h6.5V3.5%22/><rect x=%228%22 y=%2212.5%22 width=%228%22 height=%226.5%22 rx=%221%22/></svg>") }
.ic-refresh{ --i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d=%22M4 11a8 8 0 0 1 13.7-4.9L20 8%22/><path d=%22M20 3.5V8h-4.5%22/><path d=%22M20 13a8 8 0 0 1-13.7 4.9L4 16%22/><path d=%22M4 20.5V16h4.5%22/></svg>") }
.ic-plus{ --i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d=%22M12 5v14M5 12h14%22/></svg>") }
.ic-search{ --i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><circle cx=%2211%22 cy=%2211%22 r=%226.6%22/><path d=%22M20 20l-4.4-4.4%22/></svg>") }
.ic-tag{ --i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d=%22M3.6 11.6 11.2 4h7.3A1.5 1.5 0 0 1 20 5.5v7.3l-7.6 7.6a1.6 1.6 0 0 1-2.3 0L3.6 13.9a1.6 1.6 0 0 1 0-2.3z%22/><circle cx=%2215.5%22 cy=%228.5%22 r=%221.5%22/></svg>") }
.ic-ext{ --i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d=%22M14 4.5h5.5V10%22/><path d=%22M19.5 4.5 10.5 13.5%22/><path d=%22M18 13v5.5a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 4 18.5v-11A1.5 1.5 0 0 1 5.5 6H11%22/></svg>") }
.ic-mail{ --i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><rect x=%223%22 y=%225%22 width=%2218%22 height=%2214%22 rx=%222.4%22/><path d=%22M4 7l8 5.5L20 7%22/></svg>") }
.ic-palette{ --i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d=%22M12 3.2a8.8 8.8 0 1 0 0 17.6c1.4 0 2.1-1 2.1-1.9 0-.5-.3-.9-.6-1.2-.3-.3-.6-.7-.6-1.2 0-.8.7-1.4 1.5-1.4H16a4.8 4.8 0 0 0 4.8-4.9c0-3.8-3.9-7-8.8-7z%22/><circle cx=%227.6%22 cy=%2212%22 r=%221.1%22/><circle cx=%229.8%22 cy=%228%22 r=%221.1%22/><circle cx=%2214.5%22 cy=%228%22 r=%221.1%22/></svg>") }
.ic-puzzle{ --i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d=%22M9.2 4.6a1.6 1.6 0 0 1 3.2 0c0 .8.5 1.3 1.3 1.3H16a1 1 0 0 1 1 1v2.4c0 .8.5 1.3 1.3 1.3a1.6 1.6 0 0 1 0 3.2c-.8 0-1.3.5-1.3 1.3V18a1 1 0 0 1-1 1h-2.4c-.8 0-1.3.5-1.3 1.3a1.6 1.6 0 0 1-3.2 0c0-.8-.5-1.3-1.3-1.3H5a1 1 0 0 1-1-1v-2.3c0-.8-.5-1.4-1.3-1.4a1.6 1.6 0 0 1 0-3.2c.8 0 1.3-.5 1.3-1.3V6.9a1 1 0 0 1 1-1h2.9c.8 0 1.3-.5 1.3-1.3z%22/></svg>") }
.ic-id{ --i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><rect x=%223%22 y=%225%22 width=%2218%22 height=%2214%22 rx=%222.4%22/><circle cx=%228.5%22 cy=%2211%22 r=%222.3%22/><path d=%22M5.2 16.6a3.4 3.4 0 0 1 6.6 0%22/><path d=%22M14 9.5h4M14 12.5h4M14 15.5h2.6%22/></svg>") }
.ic-brain{ --i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d=%22M9.5 4.6A2.6 2.6 0 0 0 7 7.2a2.5 2.5 0 0 0-1 4.9v3A2.5 2.5 0 0 0 10 17%22/><path d=%22M14.5 4.6A2.6 2.6 0 0 1 17 7.2a2.5 2.5 0 0 1 1 4.9v3A2.5 2.5 0 0 1 14 17%22/><path d=%22M12 4.6v13%22/></svg>") }
.ic-moon{ --i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d=%22M20 13.6A8 8 0 1 1 10.4 4 6.2 6.2 0 0 0 20 13.6z%22/></svg>") }
.ic-camera{ --i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><rect x=%223%22 y=%227%22 width=%2218%22 height=%2213%22 rx=%222.4%22/><path d=%22M8 7l1.6-2.4h4.8L16 7%22/><circle cx=%2212%22 cy=%2213.3%22 r=%223.4%22/></svg>") }
.ic-mega{ --i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d=%22M4 10v4a1 1 0 0 0 1 1h2l7 4V5L7 9H5a1 1 0 0 0-1 1z%22/><path d=%22M17.5 9.2a3.6 3.6 0 0 1 0 5.6%22/></svg>") }
.ic-scale{ --i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d=%22M12 4v16%22/><path d=%22M7 20.5h10%22/><path d=%22M4.5 8 12 6l7.5 2%22/><path d=%22M4.5 8 2.3 13.2a2.8 2.8 0 0 0 4.4 0z%22/><path d=%22M19.5 8l-2.2 5.2a2.8 2.8 0 0 0 4.4 0z%22/></svg>") }
.ic-rocket{ --i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d=%22M5.5 14.5c-1.6 1.6-2 5.5-2 5.5s3.9-.4 5.5-2%22/><path d=%22M9 15 4.5 13.5l3-4.2C10 5.5 13.7 3.5 18 3.7c.2 4.3-1.8 8-5.6 10.5L8.5 17 9 15z%22/><circle cx=%2214.7%22 cy=%229.3%22 r=%221.6%22/></svg>") }
.ic-warn{ --i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d=%22M12 4 3 19.5h18z%22/><path d=%22M12 10v4.2%22/><path d=%22M12 17.4h.01%22/></svg>") }
.ic-sliders{ --i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d=%22M4 8h9M17 8h3%22/><circle cx=%2215%22 cy=%228%22 r=%222.2%22/><path d=%22M4 16h3M11 16h9%22/><circle cx=%229%22 cy=%2216%22 r=%222.2%22/></svg>") }

.ic-globe{ --i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><circle cx=%2212%22 cy=%2212%22 r=%228.5%22/><path d=%22M3.5 12h17%22/><path d=%22M12 3.5c2.6 2.4 4 5.4 4 8.5s-1.4 6.1-4 8.5c-2.6-2.4-4-5.4-4-8.5s1.4-6.1 4-8.5z%22/></svg>") }
.ic-lock{ --i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><rect x=%225%22 y=%2210.5%22 width=%2214%22 height=%229.6%22 rx=%222.2%22/><path d=%22M8 10.5V7.8a4 4 0 0 1 8 0v2.7%22/></svg>") }