/* ==========================================================================
   App UI — standalone stylesheet for the app views.
   Built from the app design system (tokens, Button, Input, Tag,
   Fragment, ContextGraph, Loader). Does not depend on the legacy theme.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  color-scheme: dark;

  --bg-000: #060709;
  --bg-100: #0b0d10;
  --bg-200: #121519;
  --bg-300: #1a1e24;
  --line-100: #252a32;
  --line-200: #646d7a;
  --ink: #e9ebee;
  --ink-muted: #9ba2ad;
  --ink-faint: #838b96;
  --trace: #c6f36b;
  --trace-dim: #3a4a1c;
  --on-trace: #0b0d10;
  --node: #62d6e0;
  --ember: #ff8a5c;
  --lilac: #b9a8ff;
  --sand: #e3cf9e;
  --success: var(--trace);
  --warning: #f5c04e;
  --danger: #ff6f61;

  --font-sans: "Geist", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", "SFMono-Regular", Menlo, monospace;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  --radius-0: 0px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-pill: 999px;

  --shadow-focus: 0 0 0 1px #0b0d10, 0 0 0 3px #c6f36b;
  --shadow-overlay: 0 24px 64px rgba(0, 0, 0, 0.6);

  --stroke-hair: 1px;
  --stroke-trace: 1.5px;

  --sidebar-w: 248px;
  --sidebar-w-mini: 64px;
  --topbar-h: 56px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }
body {
  background: var(--bg-100);
  color: var(--ink);
  font: 400 15px/24px var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--trace); }
img, svg, video { max-width: 100%; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-weight: 500; }
hr { border: 0; border-top: var(--stroke-hair) solid var(--line-100); margin: var(--space-6) 0; }
code, pre, kbd, samp { font-family: var(--font-mono); }
code { font-size: 13px; color: var(--ink); background: var(--bg-300); padding: 1px 4px; border-radius: var(--radius-sm); }
pre { margin: 0; }
small { font-size: 13px; }
::selection { background: var(--trace-dim); color: var(--ink); }
:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-md); }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
table { border-collapse: collapse; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-100); border-radius: var(--radius-pill); border: 2px solid var(--bg-100); }
::-webkit-scrollbar-thumb:hover { background: var(--line-200); }
* { scrollbar-color: var(--line-100) transparent; scrollbar-width: thin; }

/* Icons (Tabler webfont) sit on the text baseline */
.ti { font-size: 18px; line-height: 1; vertical-align: -3px; }

/* ---------- 3. Type ---------- */
.fg-display-xl { font: 300 64px/64px var(--font-sans); letter-spacing: -0.03em; }
.fg-display { font: 300 40px/44px var(--font-sans); letter-spacing: -0.02em; }
.fg-title { font: 500 24px/30px var(--font-sans); letter-spacing: -0.01em; }
.fg-heading { font: 500 17px/24px var(--font-sans); }
.fg-body { font: 400 15px/24px var(--font-sans); }
.fg-body-sm { font: 400 13px/20px var(--font-sans); }
.fg-label { font: 500 11px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.fg-data { font: 400 13px/20px var(--font-mono); font-variant-numeric: tabular-nums; }
.fg-mono { font-family: var(--font-mono); }
.fg-ink { color: var(--ink); }
.fg-muted { color: var(--ink-muted); }
.fg-faint { color: var(--ink-faint); }
.fg-trace { color: var(--trace); }
.fg-danger-text { color: var(--danger); }
.fg-warning-text { color: var(--warning); }
.fg-node-text { color: var(--node); }
.fg-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fg-nowrap { white-space: nowrap; }
.fg-break { word-break: break-word; overflow-wrap: anywhere; }
.fg-right { text-align: right; }
.fg-center { text-align: center; }
.fg-prose { color: var(--ink-muted); max-width: 72ch; }
.fg-prose p + p { margin-top: var(--space-3); }
.fg-prose strong { color: var(--ink); font-weight: 500; }
.fg-prose a, a.fg-link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-200); text-underline-offset: 3px; }
.fg-prose a:hover, a.fg-link:hover { text-decoration-color: var(--trace); color: var(--ink); }

/* ---------- 4. Layout primitives ---------- */
.fg-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.fg-stack--sm { gap: var(--space-2); }
.fg-stack--lg { gap: var(--space-6); }
.fg-stack--xl { gap: var(--space-8); }
.fg-row { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.fg-row--sm { gap: var(--space-2); }
.fg-row--top { align-items: flex-start; }
.fg-row--wrap { flex-wrap: wrap; }
.fg-split { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-width: 0; }
.fg-split--top { align-items: flex-start; }
.fg-grow { flex: 1 1 auto; min-width: 0; }
.fg-none { flex: none; }
.fg-push { margin-left: auto; }
.fg-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.fg-grid--tight { gap: var(--space-4); }
.fg-grid > * { grid-column: span 12; min-width: 0; }
.fg-cards { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.fg-cards--sm { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-4); }
.fg-cards--lg { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
@media (min-width: 720px) {
  .fg-col-6 { grid-column: span 6 !important; }
  .fg-col-4 { grid-column: span 6 !important; }
  .fg-col-3 { grid-column: span 6 !important; }
}
@media (min-width: 1100px) {
  .fg-col-3 { grid-column: span 3 !important; }
  .fg-col-4 { grid-column: span 4 !important; }
  .fg-col-5 { grid-column: span 5 !important; }
  .fg-col-7 { grid-column: span 7 !important; }
  .fg-col-8 { grid-column: span 8 !important; }
  .fg-col-9 { grid-column: span 9 !important; }
}
.fg-mt-2 { margin-top: var(--space-2); }
.fg-mt-4 { margin-top: var(--space-4); }
.fg-mt-6 { margin-top: var(--space-6); }
.fg-mt-8 { margin-top: var(--space-8); }
.fg-mb-4 { margin-bottom: var(--space-4); }
.fg-mb-6 { margin-bottom: var(--space-6); }
.fg-w-full { width: 100%; }
.fg-max-sm { max-width: 520px; }
.fg-max-md { max-width: 760px; }
.fg-max-lg { max-width: 1040px; }
.fg-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 719px) { .fg-hide-sm { display: none !important; } }
@media (min-width: 720px) { .fg-only-sm { display: none !important; } }

/* Parametric dot grid (space-4 step, line-100) */
.fg-dots {
  background-color: var(--bg-000);
  background-image: radial-gradient(circle at 1px 1px, var(--line-100) 1px, transparent 1.4px);
  background-size: var(--space-4) var(--space-4);
}
.fg-dots--wide { background-size: 32px 32px; }

/* ---------- 5. App shell ---------- */
.fg-app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; }
.fg-app[data-sidebar="mini"] { grid-template-columns: var(--sidebar-w-mini) minmax(0, 1fr); }

.fg-sidebar {
  position: sticky; top: 0; height: 100vh; z-index: 40;
  display: flex; flex-direction: column;
  background: var(--bg-200);
  border-right: var(--stroke-hair) solid var(--line-100);
  overflow: hidden;
}
.fg-sidebar__brand { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); height: var(--topbar-h); padding: 0 var(--space-4); border-bottom: var(--stroke-hair) solid var(--line-100); flex: none; }
.fg-sidebar__brand a { display: inline-flex; align-items: center; }
.fg-sidebar__logo { height: 22px; width: auto; display: block; }
.fg-sidebar__mark { height: 24px; width: 24px; display: none; }
.fg-sidebar__nav { flex: 1 1 auto; overflow-y: auto; padding: var(--space-3) var(--space-2) var(--space-6); }
.fg-sidebar__group { margin-top: var(--space-4); }
.fg-sidebar__group:first-child { margin-top: 0; }
.fg-sidebar__group-label { padding: var(--space-2) var(--space-3) var(--space-1); }
.fg-nav-link {
  display: flex; align-items: center; gap: var(--space-3);
  height: 36px; padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  color: var(--ink-muted);
  font: 400 14px/20px var(--font-sans);
  white-space: nowrap;
  transition: background .15s ease-out, color .15s ease-out;
}
.fg-nav-link .ti { font-size: 18px; flex: none; width: 20px; text-align: center; }
.fg-nav-link:hover { background: var(--bg-300); color: var(--ink); }
.fg-nav-link.is-active, .fg-nav-link[aria-current="page"] { background: var(--bg-300); color: var(--ink); }
.fg-nav-link.is-active .ti, .fg-nav-link[aria-current="page"] .ti { color: var(--trace); }
.fg-nav-link__text { overflow: hidden; text-overflow: ellipsis; }
.fg-sidebar__foot { flex: none; border-top: var(--stroke-hair) solid var(--line-100); padding: var(--space-2); }
.fg-account {
  display: flex; align-items: center; gap: var(--space-3); width: 100%;
  padding: var(--space-2); border-radius: var(--radius-md);
  background: transparent; border: 0; cursor: pointer; text-align: left; color: var(--ink);
}
.fg-account:hover { background: var(--bg-300); color: var(--ink); }
.fg-account__text { min-width: 0; display: flex; flex-direction: column; }
.fg-account__name { font: 500 13px/18px var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fg-account__meta { font: 400 11px/16px var(--font-mono); letter-spacing: .04em; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fg-app[data-sidebar="mini"] .fg-sidebar__logo,
.fg-app[data-sidebar="mini"] .fg-sidebar__group-label,
.fg-app[data-sidebar="mini"] .fg-nav-link__text,
.fg-app[data-sidebar="mini"] .fg-account__text,
.fg-app[data-sidebar="mini"] .fg-account .ti { display: none; }
.fg-app[data-sidebar="mini"] .fg-sidebar__mark { display: block; }
.fg-app[data-sidebar="mini"] .fg-sidebar__brand { justify-content: center; padding: 0; }
.fg-app[data-sidebar="mini"] .fg-nav-link { justify-content: center; padding: 0; }
.fg-app[data-sidebar="mini"] .fg-sidebar__group { margin-top: var(--space-2); padding-top: var(--space-2); border-top: var(--stroke-hair) solid var(--line-100); }
.fg-app[data-sidebar="mini"] .fg-sidebar__group:first-child { border-top: 0; padding-top: 0; }
.fg-app[data-sidebar="mini"] .fg-account { justify-content: center; }

.fg-main { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.fg-topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--space-3);
  height: var(--topbar-h); padding: 0 var(--space-6);
  background: rgba(11, 13, 16, .86);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: var(--stroke-hair) solid var(--line-100);
}
.fg-topbar__bar { display: flex; align-items: center; gap: var(--space-1); min-width: 0; overflow-x: auto; scrollbar-width: none; }
.fg-topbar__bar::-webkit-scrollbar { display: none; }
.fg-topbar__actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); flex: none; }
.fg-barlink {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 32px; padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  color: var(--ink-muted); font: 400 14px/20px var(--font-sans); white-space: nowrap;
  background: transparent; border: 0; cursor: pointer;
}
.fg-barlink:hover { background: var(--bg-300); color: var(--ink); }
.fg-barlink.is-active { color: var(--ink); background: var(--bg-300); }
.fg-barlink.is-active::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--trace); }
.fg-search-trigger {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 32px; min-width: 220px; padding: 0 var(--space-2) 0 var(--space-3);
  border-radius: var(--radius-md); border: var(--stroke-hair) solid var(--line-100);
  background: var(--bg-200); color: var(--ink-faint); cursor: pointer;
  font: 400 13px/20px var(--font-sans);
}
.fg-search-trigger:hover { border-color: var(--line-200); color: var(--ink-muted); }
.fg-search-trigger .fg-kbd { margin-left: auto; }
@media (max-width: 899px) { .fg-search-trigger { min-width: 0; } .fg-search-trigger__text, .fg-search-trigger .fg-kbd { display: none; } }

.fg-content { flex: 1 1 auto; width: 100%; max-width: 1480px; margin: 0 auto; padding: var(--space-8) var(--space-12) var(--space-16); }
.fg-content--wide { max-width: none; }
.fg-content--flush { padding: 0; max-width: none; }
@media (max-width: 1099px) { .fg-content { padding: var(--space-6) var(--space-6) var(--space-12); } }
@media (max-width: 719px) { .fg-content { padding: var(--space-4) var(--space-4) var(--space-12); } .fg-topbar { padding: 0 var(--space-4); } }

.fg-scrim { display: none; }
@media (max-width: 959px) {
  .fg-app, .fg-app[data-sidebar="mini"] { grid-template-columns: minmax(0, 1fr); }
  .fg-sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 280px; transform: translateX(-100%); transition: transform .2s var(--ease); }
  .fg-app[data-sidebar="mini"] .fg-sidebar__logo,
  .fg-app[data-sidebar="mini"] .fg-sidebar__group-label,
  .fg-app[data-sidebar="mini"] .fg-nav-link__text,
  .fg-app[data-sidebar="mini"] .fg-account__text { display: initial; }
  .fg-app[data-sidebar="mini"] .fg-sidebar__mark { display: none; }
  .fg-app[data-sidebar="mini"] .fg-nav-link { justify-content: flex-start; padding: 0 var(--space-3); }
  .fg-app.is-nav-open .fg-sidebar { transform: none; box-shadow: var(--shadow-overlay); }
  .fg-app.is-nav-open .fg-scrim { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(6, 7, 9, .6); }
}

/* Focused shells: editor / report / public */
.fg-shell { min-height: 100vh; display: flex; flex-direction: column; }
.fg-shell__bar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--space-4);
  height: var(--topbar-h); padding: 0 var(--space-6);
  background: rgba(11, 13, 16, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: var(--stroke-hair) solid var(--line-100);
}
.fg-shell__bar .fg-sidebar__logo { height: 20px; }
.fg-shell__divider { width: 1px; height: 20px; background: var(--line-100); flex: none; }
.fg-shell__title { font: 500 14px/20px var(--font-sans); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fg-shell__body { flex: 1 1 auto; min-height: 0; }

/* ---------- 6. Page header ---------- */
.fg-page-head { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-8); }
.fg-page-head__top { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
.fg-page-head__titles { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.fg-page-head__title { font: 300 40px/44px var(--font-sans); letter-spacing: -0.02em; color: var(--ink); }
.fg-page-head__count { font: 400 15px/24px var(--font-mono); color: var(--ink-faint); margin-left: var(--space-2); letter-spacing: 0; vertical-align: 6px; }
.fg-page-head__desc { color: var(--ink-muted); max-width: 72ch; }
.fg-page-head__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
@media (max-width: 719px) { .fg-page-head__title { font-size: 30px; line-height: 36px; } .fg-page-head { margin-bottom: var(--space-6); } }

.fg-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.fg-crumbs li { display: inline-flex; align-items: center; gap: var(--space-2); }
.fg-crumbs li + li::before { content: "/"; color: var(--line-200); font: 500 11px/16px var(--font-mono); }
.fg-crumbs a, .fg-crumbs span { font: 500 11px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.fg-crumbs a:hover { color: var(--ink); }
.fg-crumbs li:last-child span { color: var(--ink-muted); }

.fg-section-title { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.fg-section-title h2, .fg-section-title h3 { font: 500 17px/24px var(--font-sans); }

/* ---------- 7. Buttons ---------- */
.fg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 36px; padding: 0 var(--space-3);
  border-radius: var(--radius-md); border: var(--stroke-hair) solid transparent;
  font: 500 14px/20px var(--font-sans); white-space: nowrap; text-decoration: none;
  cursor: pointer; user-select: none;
  transition: background .15s ease-out, border-color .15s ease-out, color .15s ease-out, filter .15s ease-out;
}
.fg-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.fg-btn .ti { font-size: 16px; vertical-align: 0; }
.fg-btn--primary { background: var(--trace); color: var(--on-trace); }
.fg-btn--primary:hover { filter: brightness(1.06); color: var(--on-trace); }
.fg-btn--secondary { background: var(--bg-200); color: var(--ink); border-color: var(--line-200); }
.fg-btn--secondary:hover { background: var(--bg-300); color: var(--ink); }
.fg-btn--ghost { background: transparent; color: var(--ink-muted); }
.fg-btn--ghost:hover { background: var(--bg-300); color: var(--ink); }
.fg-btn--danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.fg-btn--danger:hover { background: rgba(255, 111, 97, .1); color: var(--danger); }
.fg-btn--sm { height: 28px; padding: 0 var(--space-2); font-size: 13px; gap: 6px; }
.fg-btn--lg { height: 44px; padding: 0 var(--space-4); font-size: 15px; }
.fg-btn--block { width: 100%; }
.fg-btn--icon { width: 36px; padding: 0; }
.fg-btn--icon.fg-btn--sm { width: 28px; }
.fg-btn[disabled], .fg-btn.is-disabled { background: var(--bg-200); color: var(--ink-faint); border-color: var(--line-100); cursor: not-allowed; filter: none; pointer-events: none; }
.fg-kbd { display: inline-flex; align-items: center; height: 18px; padding: 0 5px; border-radius: var(--radius-sm); border: var(--stroke-hair) solid var(--line-100); font: 400 11px/16px var(--font-mono); color: var(--ink-faint); }
.fg-btn--primary .fg-kbd { border-color: transparent; color: inherit; opacity: .7; }
.fg-icon-link { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-md); color: var(--ink-muted); background: transparent; border: 0; cursor: pointer; }
.fg-icon-link:hover { background: var(--bg-300); color: var(--ink); }
.fg-icon-link--danger:hover { color: var(--danger); }
.fg-btn-group { display: inline-flex; }
.fg-btn-group > .fg-btn { border-radius: 0; }
.fg-btn-group > .fg-btn:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.fg-btn-group > .fg-btn:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.fg-btn-group > .fg-btn + .fg-btn { margin-left: -1px; }

/* ---------- 8. Forms ---------- */
.fg-field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.fg-field__label { font: 500 11px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.fg-field__help { font: 400 13px/20px var(--font-sans); color: var(--ink-muted); }
.fg-field__error { font: 400 13px/20px var(--font-sans); color: var(--danger); }
.fg-input {
  display: flex; align-items: center; gap: var(--space-2);
  height: 40px; padding: 0 var(--space-3);
  background: var(--bg-300); border: var(--stroke-hair) solid var(--line-200); border-radius: var(--radius-md);
  color: var(--ink); font: 400 15px/24px var(--font-sans);
  transition: border-color .15s ease-out;
}
.fg-input input, .fg-input select { all: unset; flex: 1; min-width: 0; color: var(--ink); font: inherit; }
.fg-input input::placeholder { color: var(--ink-faint); }
.fg-input:focus-within { border-color: var(--trace); box-shadow: var(--shadow-focus); }
.fg-input > .ti { flex: none; color: var(--ink-muted); font-size: 16px; vertical-align: 0; }
.fg-input--sm { height: 32px; font-size: 13px; }
.fg-control, select.fg-control, textarea.fg-control {
  display: block; width: 100%;
  min-height: 40px; padding: 7px var(--space-3);
  background: var(--bg-300); color: var(--ink);
  border: var(--stroke-hair) solid var(--line-200); border-radius: var(--radius-md);
  font: 400 15px/24px var(--font-sans);
  transition: border-color .15s ease-out;
  appearance: none; -webkit-appearance: none;
}
.fg-control::placeholder { color: var(--ink-faint); }
.fg-control:focus { outline: none; border-color: var(--trace); box-shadow: var(--shadow-focus); }
.fg-control[readonly], .fg-control[disabled] { color: var(--ink-muted); background: var(--bg-200); border-color: var(--line-100); }
textarea.fg-control { min-height: 96px; resize: vertical; }
textarea.fg-control--code { font: 400 13px/20px var(--font-mono); }
select.fg-control {
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%239ba2ad' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
select.fg-control option { background: var(--bg-200); color: var(--ink); }
.fg-control--sm { min-height: 32px; padding: 3px var(--space-2); font-size: 13px; line-height: 24px; }
.fg-check { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; color: var(--ink); font: 400 14px/20px var(--font-sans); }
.fg-check input[type="checkbox"], .fg-check input[type="radio"] {
  appearance: none; -webkit-appearance: none; margin: 0;
  width: 16px; height: 16px; flex: none;
  border: var(--stroke-hair) solid var(--line-200); border-radius: var(--radius-sm); background: var(--bg-300);
  display: inline-grid; place-content: center; cursor: pointer;
}
.fg-check input[type="radio"] { border-radius: var(--radius-pill); }
.fg-check input:checked { background: var(--trace); border-color: var(--trace); }
.fg-check input[type="checkbox"]:checked::after { content: ""; width: 8px; height: 4px; border-left: 1.5px solid var(--on-trace); border-bottom: 1.5px solid var(--on-trace); transform: rotate(-45deg) translate(1px, -1px); }
.fg-check input[type="radio"]:checked::after { content: ""; width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--on-trace); }
.fg-check input:focus-visible { box-shadow: var(--shadow-focus); }
.fg-switch { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.fg-switch input { appearance: none; -webkit-appearance: none; margin: 0; width: 32px; height: 18px; border-radius: var(--radius-pill); background: var(--bg-300); border: var(--stroke-hair) solid var(--line-200); position: relative; cursor: pointer; transition: background .15s ease-out; }
.fg-switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: var(--radius-pill); background: var(--ink-muted); transition: transform .15s ease-out, background .15s ease-out; }
.fg-switch input:checked { background: var(--trace-dim); border-color: var(--trace); }
.fg-switch input:checked::after { transform: translateX(14px); background: var(--trace); }
.fg-form { display: flex; flex-direction: column; gap: var(--space-4); }
.fg-form-row { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.fg-toolbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-6); }
.fg-toolbar .fg-input { min-width: 260px; }
@media (max-width: 719px) { .fg-toolbar .fg-input { min-width: 0; flex: 1 1 100%; } }

/* ---------- 9. Tags, dots, avatars, progress ---------- */
.fg-tag {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 var(--space-2); max-width: 100%;
  border-radius: var(--radius-sm); background: var(--bg-300); border: var(--stroke-hair) solid var(--line-100);
  color: var(--ink-muted); font: 500 11px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle;
}
a.fg-tag:hover, button.fg-tag:hover { border-color: var(--line-200); color: var(--ink); }
button.fg-tag { cursor: pointer; }
.fg-tag .fg-faint { letter-spacing: 0; }
.fg-tag__dot { width: 6px; height: 6px; border-radius: var(--radius-pill); background: currentColor; flex: none; }
.fg-tag--active { background: var(--trace-dim); border-color: var(--trace); color: var(--ink); }
.fg-tag--active .fg-tag__dot { background: var(--trace); }
.fg-tag--node .fg-tag__dot { background: var(--node); }
.fg-tag--ember .fg-tag__dot { background: var(--ember); }
.fg-tag--lilac .fg-tag__dot { background: var(--lilac); }
.fg-tag--sand .fg-tag__dot { background: var(--sand); }
.fg-tag--success { color: var(--success); }
.fg-tag--warning { color: var(--warning); }
.fg-tag--danger { color: var(--danger); }
.fg-tag--plain { text-transform: none; letter-spacing: 0; font: 400 12px/16px var(--font-mono); }
.fg-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fg-dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--ink-faint); flex: none; }
.fg-dot--success { background: var(--success); }
.fg-dot--warning { background: var(--warning); }
.fg-dot--danger { background: transparent; box-shadow: inset 0 0 0 1.5px var(--danger); }
.fg-dot--node { background: var(--node); }
.fg-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 32px; height: 32px; border-radius: var(--radius-pill);
  background: var(--bg-300); border: var(--stroke-hair) solid var(--line-100);
  color: var(--ink); font: 500 12px/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; overflow: hidden;
}
.fg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.fg-avatar--sm { width: 24px; height: 24px; font-size: 10px; }
.fg-avatar--lg { width: 48px; height: 48px; font-size: 15px; }
.fg-avatar--xl { width: 72px; height: 72px; font-size: 20px; }
.fg-avatar--square { border-radius: var(--radius-md); }
.fg-progress { position: relative; height: 4px; min-width: 80px; background: var(--bg-300); border-radius: var(--radius-pill); overflow: hidden; }
.fg-progress__bar { position: absolute; inset: 0 auto 0 0; background: var(--trace); border-radius: var(--radius-pill); }
.fg-progress--node .fg-progress__bar { background: var(--node); }
.fg-meter { display: flex; align-items: center; gap: var(--space-2); }
.fg-meter .fg-progress { flex: 1 1 auto; }
.fg-meter__value { font: 400 12px/16px var(--font-mono); color: var(--ink-faint); min-width: 36px; text-align: right; }

/* ---------- 10. Surfaces ---------- */
.fg-panel { background: var(--bg-200); border: var(--stroke-hair) solid var(--line-100); border-radius: var(--radius-md); min-width: 0; }
.fg-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: var(--stroke-hair) solid var(--line-100); min-height: 52px; }
.fg-panel__title { font: 500 15px/22px var(--font-sans); color: var(--ink); margin: 0; }
.fg-panel__sub { font: 400 13px/20px var(--font-sans); color: var(--ink-muted); }
.fg-panel__body { padding: var(--space-4); }
.fg-panel__body--lg { padding: var(--space-6); }
.fg-panel__body--flush { padding: 0; }
.fg-panel__foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: var(--stroke-hair) solid var(--line-100); }
.fg-panel--canvas { background: var(--bg-000); border-radius: var(--radius-0); }
.fg-panel--link { display: block; transition: border-color .15s ease-out, background .15s ease-out; color: inherit; }
.fg-panel--link:hover { border-color: var(--line-200); color: inherit; }
.fg-panel--selected, .fg-panel[aria-selected="true"] { border-color: var(--trace); }
.fg-panel--danger { border-color: rgba(255, 111, 97, .45); }

/* Fragment card (design system component) */
.fg-fragment { position: relative; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); background: var(--bg-200); border: var(--stroke-hair) solid var(--line-100); border-radius: var(--radius-md); min-width: 0; color: inherit; transition: border-color .15s ease-out; }
a.fg-fragment:hover, .fg-fragment:hover { border-color: var(--line-200); color: inherit; }
.fg-fragment[aria-selected="true"] { border-color: var(--trace); }
.fg-fragment__meta { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); font: 500 11px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.fg-fragment__title { margin: 0; font: 500 17px/24px var(--font-sans); color: var(--ink); }
.fg-fragment__body { margin: 0; font: 400 15px/24px var(--font-sans); color: var(--ink-muted); }
.fg-fragment__body mark { background: var(--trace-dim); color: var(--ink); padding: 0 2px; border-radius: var(--radius-sm); }
.fg-fragment__foot { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; padding-top: var(--space-2); margin-top: auto; border-top: var(--stroke-hair) solid var(--line-100); }
.fg-fragment__score { font: 400 13px/20px var(--font-mono); color: var(--ink-muted); }
.fg-fragment__icon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: var(--bg-300); border: var(--stroke-hair) solid var(--line-100); color: var(--ink-muted); flex: none; }
.fg-fragment__icon .ti { font-size: 20px; vertical-align: 0; }
.fg-fragment__icon img { width: 24px; height: 24px; object-fit: contain; }

/* Stats (KPI) */
.fg-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); border: var(--stroke-hair) solid var(--line-100); border-radius: var(--radius-md); background: var(--bg-200); overflow: hidden; }
.fg-stat { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border-right: var(--stroke-hair) solid var(--line-100); border-bottom: var(--stroke-hair) solid var(--line-100); margin: 0 -1px -1px 0; min-width: 0; }
.fg-stat__value { font: 300 32px/36px var(--font-sans); letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fg-stat__value--sm { font-size: 24px; line-height: 30px; }
.fg-stat__delta { font: 400 12px/16px var(--font-mono); color: var(--ink-faint); display: inline-flex; align-items: center; gap: 4px; }
.fg-stat__delta--up { color: var(--success); }
.fg-stat__delta--down { color: var(--danger); }

/* Key / value list */
.fg-kv { display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); gap: var(--space-2) var(--space-6); margin: 0; }
.fg-kv dt { font: 500 11px/24px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.fg-kv dd { margin: 0; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.fg-kv--stacked { grid-template-columns: minmax(0, 1fr); gap: 0; }
.fg-kv--stacked dd { margin-bottom: var(--space-3); }

/* Lists */
.fg-list { list-style: none; margin: 0; padding: 0; }
.fg-list > li, .fg-list__item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: var(--stroke-hair) solid var(--line-100); min-width: 0; }
.fg-list > li:last-child, .fg-list__item:last-child { border-bottom: 0; }
a.fg-list__item { color: inherit; }
a.fg-list__item:hover { background: var(--bg-300); color: inherit; }

/* Timeline */
.fg-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.fg-timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 1px; background: var(--line-100); }
.fg-timeline__item { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--space-3); padding-bottom: var(--space-4); }
.fg-timeline__item:last-child { padding-bottom: 0; }
.fg-timeline__dot { position: relative; z-index: 1; width: 15px; height: 15px; margin-top: 4px; border-radius: var(--radius-pill); background: var(--bg-200); border: var(--stroke-hair) solid var(--line-200); display: grid; place-items: center; }
.fg-timeline__dot::after { content: ""; width: 5px; height: 5px; border-radius: var(--radius-pill); background: var(--ink-faint); }
.fg-timeline__dot--trace::after { background: var(--trace); }
.fg-timeline__dot--node::after { background: var(--node); }
.fg-timeline__dot--ember::after { background: var(--ember); }
.fg-timeline__dot--lilac::after { background: var(--lilac); }
.fg-timeline__dot--sand::after { background: var(--sand); }
.fg-timeline__time { font: 400 12px/16px var(--font-mono); color: var(--ink-faint); }

/* ---------- 11. Tables ---------- */
.fg-table-wrap { position: relative; overflow-x: auto; }
.fg-table { width: 100%; border-collapse: collapse; font: 400 13px/20px var(--font-sans); color: var(--ink); }
.fg-table th { text-align: left; font: 500 11px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); padding: var(--space-3) var(--space-4); border-bottom: var(--stroke-hair) solid var(--line-100); white-space: nowrap; background: var(--bg-200); }
.fg-table td { padding: var(--space-3) var(--space-4); border-bottom: var(--stroke-hair) solid var(--line-100); vertical-align: middle; }
.fg-table tbody tr:last-child td { border-bottom: 0; }
.fg-table tbody tr { transition: background .12s ease-out; }
.fg-table tbody tr:hover { background: var(--bg-300); }
.fg-table tr.is-link { cursor: pointer; }
.fg-table .fg-num, .fg-table td.fg-num, .fg-table th.fg-num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fg-table .fg-actions { text-align: right; white-space: nowrap; width: 1%; }
.fg-table tfoot td { border-top: var(--stroke-hair) solid var(--line-100); border-bottom: 0; font-weight: 500; }
.fg-table--compact td, .fg-table--compact th { padding: var(--space-2) var(--space-3); }
.fg-table--plain th { background: transparent; }
.fg-cell-main { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
/* In auto-layout tables a truncating flex cell has a min-content width of 0
   and collapses (image and name disappear): give it a floor. */
.fg-table td .fg-cell-main { min-width: 200px; }
.fg-cell-main > img, .fg-cell-main > .fg-avatar, .fg-cell-main > .fg-fragment__icon { max-width: none; flex: none; }
.fg-cell-main__text { display: flex; flex-direction: column; min-width: 0; }
.fg-cell-main__title { font: 500 14px/20px var(--font-sans); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.fg-cell-main__title:hover, a .fg-cell-main__title:hover { color: var(--trace); }
.fg-cell-main__sub { font: 400 12px/16px var(--font-mono); color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 12. Tabs, segmented, pagination ---------- */
.fg-tabs { display: flex; gap: var(--space-6); border-bottom: var(--stroke-hair) solid var(--line-100); overflow-x: auto; scrollbar-width: none; }
.fg-tabs::-webkit-scrollbar { display: none; }
.fg-tab { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) 0; margin-bottom: -1px; color: var(--ink-muted); font: 400 14px/20px var(--font-sans); white-space: nowrap; background: none; border: 0; border-bottom: var(--stroke-trace) solid transparent; cursor: pointer; }
.fg-tab:hover { color: var(--ink); }
.fg-tab.is-active, .fg-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--trace); }
.fg-tab .ti { font-size: 16px; vertical-align: 0; }
.fg-tab__count { font: 400 11px/16px var(--font-mono); color: var(--ink-faint); }
.fg-tabpane { display: none; }
.fg-tabpane.is-active { display: block; }
.fg-segmented { display: inline-flex; padding: 2px; gap: 2px; border-radius: var(--radius-md); background: var(--bg-200); border: var(--stroke-hair) solid var(--line-100); }
.fg-segmented > a, .fg-segmented > button, .fg-segmented > label { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 var(--space-3); border-radius: var(--radius-sm); border: 0; background: transparent; color: var(--ink-muted); font: 400 13px/20px var(--font-sans); cursor: pointer; white-space: nowrap; }
.fg-segmented > a:hover, .fg-segmented > button:hover, .fg-segmented > label:hover { color: var(--ink); }
.fg-segmented > .is-active, .fg-segmented > [aria-pressed="true"], .fg-segmented > input:checked + label { background: var(--bg-300); color: var(--ink); }
.fg-segmented > input { position: absolute; opacity: 0; pointer-events: none; }
.fg-pagination { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-top: var(--stroke-hair) solid var(--line-100); }
.fg-pagination__info { font: 400 12px/16px var(--font-mono); color: var(--ink-faint); }

/* ---------- 13. Feedback: alerts, empty, loader, toast ---------- */
.fg-alert { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: var(--stroke-hair) solid var(--line-100); background: var(--bg-200); color: var(--ink-muted); }
.fg-alert > .ti { font-size: 18px; margin-top: 3px; color: var(--ink-muted); flex: none; }
.fg-alert__title { color: var(--ink); font-weight: 500; }
.fg-alert--danger { border-color: rgba(255, 111, 97, .5); }
.fg-alert--danger > .ti, .fg-alert--danger .fg-alert__title { color: var(--danger); }
.fg-alert--warning { border-color: rgba(245, 192, 78, .45); }
.fg-alert--warning > .ti, .fg-alert--warning .fg-alert__title { color: var(--warning); }
.fg-alert--success { border-color: rgba(198, 243, 107, .4); }
.fg-alert--success > .ti, .fg-alert--success .fg-alert__title { color: var(--success); }
.fg-alert--info > .ti { color: var(--node); }

.fg-empty { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-16) var(--space-8); border: var(--stroke-hair) solid var(--line-100); border-radius: var(--radius-md); overflow: hidden; }
.fg-empty::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, var(--line-100) 1px, transparent 1.4px); background-size: var(--space-4) var(--space-4); -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 100%); mask-image: linear-gradient(90deg, transparent 30%, #000 100%); pointer-events: none; }
.fg-empty > * { position: relative; }
.fg-empty__icon { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); border: var(--stroke-hair) solid var(--line-200); color: var(--ink-muted); background: var(--bg-200); }
.fg-empty__icon .ti { font-size: 22px; vertical-align: 0; }
.fg-empty__title { font: 300 28px/34px var(--font-sans); letter-spacing: -0.02em; color: var(--ink); }
.fg-empty__text { color: var(--ink-muted); max-width: 56ch; }
.fg-empty--sm { padding: var(--space-8) var(--space-6); }
.fg-empty--sm .fg-empty__title { font: 500 17px/24px var(--font-sans); letter-spacing: 0; }

.fg-loader { display: inline-block; width: 48px; height: 48px; color: var(--ink); }
.fg-loader--sm { width: 24px; height: 24px; }
.fg-loader--lg { width: 96px; height: 96px; }
.fg-loader svg { display: block; width: 100%; height: 100%; }
.fg-loader__d { fill: currentColor; transform-box: fill-box; transform-origin: center; animation: fg-pulse 1.6s cubic-bezier(.45, 0, .55, 1) infinite; }
.fg-loader__d--core { fill: var(--trace); }
@keyframes fg-pulse { 0%, 100% { transform: scale(.45); opacity: .35; } 50% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fg-loader__d { animation: none; opacity: .6; } .fg-loader__d--core { opacity: 1; } }
.fg-loading { display: flex; align-items: center; justify-content: center; padding: var(--space-12); }

.fg-toasts { position: fixed; right: var(--space-6); bottom: var(--space-6); z-index: 90; display: flex; flex-direction: column; gap: var(--space-2); }
.fg-toast { display: flex; align-items: center; gap: var(--space-3); min-width: 260px; max-width: 420px; padding: var(--space-3) var(--space-4); background: var(--bg-200); border: var(--stroke-hair) solid var(--line-200); border-radius: var(--radius-md); box-shadow: var(--shadow-overlay); color: var(--ink); font-size: 14px; animation: fg-in .18s var(--ease); }
.fg-toast--danger { border-color: var(--danger); }
@keyframes fg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- 14. Overlays: menu, modal, drawer, palette ---------- */
.fg-menu-wrap { position: relative; display: inline-flex; }
.fg-menu {
  position: absolute; z-index: 60; top: calc(100% + 6px); right: 0; min-width: 220px; max-width: 320px;
  padding: var(--space-1); background: var(--bg-200); border: var(--stroke-hair) solid var(--line-200);
  border-radius: var(--radius-md); box-shadow: var(--shadow-overlay);
  display: none;
}
.fg-menu--left { right: auto; left: 0; }
.fg-menu--up { top: auto; bottom: calc(100% + 6px); }
.fg-menu.is-open { display: block; animation: fg-in .14s var(--ease); }
.fg-menu__item { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: transparent; border: 0; color: var(--ink-muted); font: 400 14px/20px var(--font-sans); text-align: left; cursor: pointer; white-space: nowrap; }
.fg-menu__item:hover, .fg-menu__item:focus-visible { background: var(--bg-300); color: var(--ink); box-shadow: none; }
.fg-menu__item .ti { font-size: 16px; vertical-align: 0; }
.fg-menu__item--danger:hover { color: var(--danger); }
.fg-menu__sep { height: 1px; background: var(--line-100); margin: var(--space-1) 0; }
.fg-menu__head { padding: var(--space-3); }

.fg-modal { position: fixed; inset: 0; z-index: 80; display: none; align-items: flex-start; justify-content: center; padding: 10vh var(--space-4) var(--space-4); background: rgba(6, 7, 9, .72); overflow-y: auto; }
.fg-modal.is-open { display: flex; }
.fg-modal__dialog { width: 100%; max-width: 560px; background: var(--bg-200); border: var(--stroke-hair) solid var(--line-200); border-radius: var(--radius-md); box-shadow: var(--shadow-overlay); animation: fg-in .18s var(--ease); }
.fg-modal--lg .fg-modal__dialog { max-width: 880px; }
.fg-modal--xl .fg-modal__dialog { max-width: 1180px; }
.fg-modal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-bottom: var(--stroke-hair) solid var(--line-100); }
.fg-modal__title { font: 500 17px/24px var(--font-sans); }
.fg-modal__body { padding: var(--space-6); }
.fg-modal__foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-6); border-top: var(--stroke-hair) solid var(--line-100); }
body.fg-locked { overflow: hidden; }

.fg-drawer { position: fixed; inset: 0; z-index: 80; display: none; background: rgba(6, 7, 9, .6); }
.fg-drawer.is-open { display: block; }
.fg-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(480px, 100%); background: var(--bg-200); border-left: var(--stroke-hair) solid var(--line-200); box-shadow: var(--shadow-overlay); display: flex; flex-direction: column; animation: fg-slide .2s var(--ease); }
.fg-drawer__body { flex: 1 1 auto; overflow-y: auto; padding: var(--space-6); }
.fg-drawer__head { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-bottom: var(--stroke-hair) solid var(--line-100); }
.fg-drawer__title { font: 500 20px/28px var(--font-sans); letter-spacing: -0.01em; }
.fg-drawer--wide .fg-drawer__panel { width: min(820px, 100%); }
@keyframes fg-slide { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }

.fg-palette { position: fixed; inset: 0; z-index: 95; display: none; justify-content: center; align-items: flex-start; padding: 14vh var(--space-4) var(--space-4); background: rgba(6, 7, 9, .7); }
.fg-palette.is-open { display: flex; }
.fg-palette__box { width: 100%; max-width: 600px; background: var(--bg-200); border: var(--stroke-hair) solid var(--line-200); border-radius: var(--radius-md); box-shadow: var(--shadow-overlay); overflow: hidden; animation: fg-in .16s var(--ease); }
.fg-palette__input { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-4); height: 52px; border-bottom: var(--stroke-hair) solid var(--line-100); }
.fg-palette__input input { all: unset; flex: 1; font: 400 16px/24px var(--font-sans); color: var(--ink); }
.fg-palette__input input::placeholder { color: var(--ink-faint); }
.fg-palette__list { max-height: 52vh; overflow-y: auto; padding: var(--space-1); }
.fg-palette__group { padding: var(--space-3) var(--space-3) var(--space-1); }
.fg-palette__item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--ink-muted); cursor: pointer; }
.fg-palette__item .ti { font-size: 16px; vertical-align: 0; }
.fg-palette__item.is-active { background: var(--bg-300); color: var(--ink); }
.fg-palette__item.is-active .ti { color: var(--trace); }
.fg-palette__foot { display: flex; gap: var(--space-4); padding: var(--space-2) var(--space-4); border-top: var(--stroke-hair) solid var(--line-100); }

.fg-tooltip { position: fixed; z-index: 99; pointer-events: none; padding: 4px 8px; border-radius: var(--radius-sm); background: var(--ink); color: var(--bg-100); font: 400 12px/16px var(--font-sans); max-width: 280px; }

/* Collapsible */
.fg-collapse { display: none; }
.fg-collapse.is-open { display: block; }
.fg-details { border: var(--stroke-hair) solid var(--line-100); border-radius: var(--radius-md); background: var(--bg-200); }
.fg-details + .fg-details { margin-top: var(--space-2); }
.fg-details > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); cursor: pointer; font-weight: 500; }
.fg-details > summary::-webkit-details-marker { display: none; }
.fg-details > summary::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid var(--ink-muted); border-bottom: 1.5px solid var(--ink-muted); transform: rotate(45deg); transition: transform .15s ease-out; margin-right: 4px; }
.fg-details[open] > summary::after { transform: rotate(-135deg); }
.fg-details__body { padding: 0 var(--space-4) var(--space-4); }

/* Code */
.fg-code { position: relative; background: var(--bg-000); border: var(--stroke-hair) solid var(--line-100); border-radius: var(--radius-md); padding: var(--space-4); font: 400 13px/20px var(--font-mono); color: var(--ink); overflow-x: auto; white-space: pre; }
.fg-code--wrap { white-space: pre-wrap; word-break: break-all; }
.fg-copy { position: absolute; top: var(--space-2); right: var(--space-2); }

/* ---------- 15. Auth / centered screens ---------- */
.fg-auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.fg-auth__art { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: var(--space-12); border-right: var(--stroke-hair) solid var(--line-100); overflow: hidden; }
.fg-auth__art .fg-graph { position: absolute; inset: 0; border: 0; background: transparent; }
.fg-auth__art > *:not(.fg-graph):not(.fg-waves) { position: relative; z-index: 1; }
.fg-auth__claim { font: 300 48px/52px var(--font-sans); letter-spacing: -0.03em; max-width: 14ch; }
.fg-auth__main { display: flex; align-items: center; justify-content: center; padding: var(--space-12) var(--space-6); }
.fg-auth__box { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: var(--space-6); }
.fg-auth__logo { height: 24px; width: auto; align-self: flex-start; }
@media (max-width: 959px) { .fg-auth { grid-template-columns: minmax(0, 1fr); } .fg-auth__art { display: none; } }
.fg-center-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-6); }

/* ---------- 16. Context graph (design system component) ---------- */
.fg-graph { position: relative; background: var(--bg-000); border: var(--stroke-hair) solid var(--line-100); border-radius: var(--radius-0); overflow: hidden; }
.fg-graph svg { display: block; width: 100%; height: auto; }
.fg-graph .grid { fill: var(--line-100); }
.fg-graph .edge { stroke: var(--line-200); stroke-width: var(--stroke-hair); fill: none; }
.fg-graph .edge--active { stroke: var(--trace); stroke-width: var(--stroke-trace); stroke-dasharray: 400; stroke-dashoffset: 400; animation: fg-draw 1.4s var(--ease) .2s forwards; }
.fg-graph .n-active { fill: var(--trace); }
.fg-graph .n-doc { fill: var(--node); }
.fg-graph .n-person { fill: var(--ember); }
.fg-graph .n-decision { fill: var(--lilac); }
.fg-graph .n-meeting { fill: var(--sand); }
.fg-graph .ring { fill: none; stroke: var(--trace); stroke-width: var(--stroke-hair); }
.fg-graph .lbl { font: 500 11px var(--font-mono); letter-spacing: .08em; fill: var(--ink-muted); text-transform: uppercase; }
.fg-graph__legend { display: flex; flex-wrap: wrap; gap: var(--space-4); padding: var(--space-2) var(--space-3); border-top: var(--stroke-hair) solid var(--line-100); font: 500 11px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.fg-graph__legend span { display: inline-flex; align-items: center; gap: 6px; }
.fg-graph__legend i { width: 6px; height: 6px; border-radius: var(--radius-pill); display: inline-block; }
@keyframes fg-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .fg-graph .edge--active { animation: none; stroke-dashoffset: 0; } }

/* ---------- 17. Kanban & chat ---------- */
.fg-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr); gap: var(--space-4); overflow-x: auto; padding-bottom: var(--space-4); align-items: start; }
.fg-board__col { display: flex; flex-direction: column; gap: var(--space-2); background: var(--bg-000); border: var(--stroke-hair) solid var(--line-100); border-radius: var(--radius-md); padding: var(--space-2); min-height: 200px; }
.fg-board__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2); }
.fg-board__list { display: flex; flex-direction: column; gap: var(--space-2); min-height: 40px; }
.fg-board__card { background: var(--bg-200); border: var(--stroke-hair) solid var(--line-100); border-radius: var(--radius-md); padding: var(--space-3); cursor: grab; }
.fg-board__card:hover { border-color: var(--line-200); }

.fg-chat { display: grid; grid-template-columns: 320px minmax(0, 1fr); height: calc(100vh - var(--topbar-h)); }
.fg-chat__list { border-right: var(--stroke-hair) solid var(--line-100); background: var(--bg-200); display: flex; flex-direction: column; min-height: 0; }
.fg-chat__main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.fg-chat__scroll { flex: 1 1 auto; overflow-y: auto; padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.fg-chat__composer { border-top: var(--stroke-hair) solid var(--line-100); padding: var(--space-3) var(--space-4); display: flex; gap: var(--space-2); align-items: flex-end; background: var(--bg-100); }
.fg-chat__composer textarea { flex: 1 1 auto; min-height: 40px; max-height: 200px; }
.fg-msg { max-width: min(640px, 80%); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--bg-200); border: var(--stroke-hair) solid var(--line-100); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.fg-msg--out { align-self: flex-end; background: var(--bg-300); border-color: var(--line-200); }
.fg-msg--system { align-self: center; background: transparent; border: 0; color: var(--ink-faint); font: 400 12px/16px var(--font-mono); }
.fg-msg__meta { display: block; margin-top: 4px; font: 400 11px/16px var(--font-mono); color: var(--ink-faint); }
.fg-convo { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: var(--stroke-hair) solid var(--line-100); color: inherit; cursor: pointer; }
.fg-convo:hover { background: var(--bg-300); color: inherit; }
.fg-convo.is-active { background: var(--bg-300); box-shadow: inset 0 -1px 0 var(--line-100); }
@media (max-width: 899px) { .fg-chat { grid-template-columns: minmax(0, 1fr); height: auto; } .fg-chat__list { max-height: 40vh; } }

/* ---------- 18. Third-party skins ---------- */

/* ApexCharts */
.apexcharts-canvas { font-family: var(--font-sans) !important; }
.apexcharts-svg { background: transparent !important; }
.apexcharts-tooltip.apexcharts-theme-dark, .apexcharts-tooltip { background: var(--bg-200) !important; border: var(--stroke-hair) solid var(--line-200) !important; box-shadow: var(--shadow-overlay) !important; color: var(--ink) !important; }
.apexcharts-tooltip-title { background: var(--bg-300) !important; border-bottom: var(--stroke-hair) solid var(--line-100) !important; font-family: var(--font-mono) !important; font-size: 11px !important; }
.apexcharts-xaxistooltip, .apexcharts-yaxistooltip { background: var(--bg-200) !important; border-color: var(--line-200) !important; color: var(--ink) !important; }
.apexcharts-legend-text { color: var(--ink-muted) !important; font-family: var(--font-mono) !important; font-size: 11px !important; letter-spacing: .06em; text-transform: uppercase; }
.apexcharts-menu { background: var(--bg-200) !important; border-color: var(--line-200) !important; }
.apexcharts-menu-item:hover { background: var(--bg-300) !important; }

/* Choices.js */
.choices { margin-bottom: 0; font-size: 15px; }
.choices__inner { background: var(--bg-300) !important; border: var(--stroke-hair) solid var(--line-200) !important; border-radius: var(--radius-md) !important; min-height: 40px !important; padding: 4px 8px !important; color: var(--ink); }
.is-focused .choices__inner, .is-open .choices__inner { border-color: var(--trace) !important; box-shadow: var(--shadow-focus); }
.choices__input { background: transparent !important; color: var(--ink) !important; }
.choices__list--dropdown, .choices__list[aria-expanded] { background: var(--bg-200) !important; border: var(--stroke-hair) solid var(--line-200) !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-overlay); color: var(--ink); z-index: 70 !important; }
.choices__list--dropdown .choices__item--selectable.is-highlighted, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted { background: var(--bg-300) !important; }
.choices__list--multiple .choices__item { background: var(--trace-dim) !important; border: var(--stroke-hair) solid var(--trace) !important; color: var(--ink) !important; border-radius: var(--radius-sm) !important; font: 500 11px/16px var(--font-mono); letter-spacing: .06em; }
.choices[data-type*="select-one"]::after { border-color: var(--ink-muted) transparent transparent !important; }
.choices__heading { color: var(--ink-faint) !important; border-color: var(--line-100) !important; }
.choices__placeholder { color: var(--ink-faint); opacity: 1; }

/* daterangepicker */
.daterangepicker { background: var(--bg-200) !important; border: var(--stroke-hair) solid var(--line-200) !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-overlay); color: var(--ink) !important; font-family: var(--font-sans) !important; }
.daterangepicker::before, .daterangepicker::after { display: none !important; }
.daterangepicker .calendar-table { background: var(--bg-200) !important; border-color: var(--bg-200) !important; }
.daterangepicker td.off, .daterangepicker td.off.in-range { background: transparent !important; color: var(--line-200) !important; }
.daterangepicker td.available:hover, .daterangepicker th.available:hover { background: var(--bg-300) !important; }
.daterangepicker td.in-range { background: var(--trace-dim) !important; color: var(--ink) !important; }
.daterangepicker td.active, .daterangepicker td.active:hover { background: var(--trace) !important; color: var(--on-trace) !important; }
.daterangepicker .ranges li { color: var(--ink-muted); }
.daterangepicker .ranges li:hover { background: var(--bg-300) !important; }
.daterangepicker .ranges li.active { background: var(--trace) !important; color: var(--on-trace) !important; }
.daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span { border-color: var(--ink-muted) !important; }
.daterangepicker .drp-buttons { border-top-color: var(--line-100) !important; padding: var(--space-3) var(--space-4) !important; line-height: 28px !important; }
.daterangepicker .drp-selected { vertical-align: middle; padding-right: var(--space-2) !important; font: 400 12px var(--font-mono) !important; color: var(--ink-muted); }
.daterangepicker.show-ranges.ltr .drp-calendar.left, .daterangepicker.show-ranges.rtl .drp-calendar.right, .daterangepicker .drp-calendar.left, .daterangepicker .ranges { border-color: var(--line-100) !important; }
.daterangepicker select { background: var(--bg-300); color: var(--ink); border: var(--stroke-hair) solid var(--line-200); }
.daterangepicker .drp-buttons .btn { display: inline-flex; align-items: center; vertical-align: middle; height: 28px; margin: 0 0 0 var(--space-2) !important; padding: 0 12px !important; border-radius: var(--radius-md); font: 500 13px/1 var(--font-sans) !important; border: var(--stroke-hair) solid var(--line-200); background: var(--bg-200); color: var(--ink); cursor: pointer; }
.daterangepicker .drp-buttons .btn:hover { background: var(--bg-300); }
.daterangepicker .drp-buttons .btn-primary, .daterangepicker .drp-buttons .applyBtn, .daterangepicker .drp-buttons .applyBtn:hover { background: var(--trace); color: var(--on-trace); border-color: var(--trace); }
.daterangepicker .drp-buttons .applyBtn:disabled { opacity: .5; cursor: not-allowed; }

/* DataTables */
.dataTables_wrapper { color: var(--ink-muted); font-size: 13px; }
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { background: var(--bg-300); border: var(--stroke-hair) solid var(--line-200); border-radius: var(--radius-md); color: var(--ink); padding: 4px 8px; }
.dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--ink-muted) !important; border: 0 !important; border-radius: var(--radius-md) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--bg-300) !important; color: var(--ink) !important; }
table.dataTable thead th, table.dataTable thead td { border-bottom-color: var(--line-100) !important; }
table.dataTable.no-footer { border-bottom-color: var(--line-100) !important; }
.dt-buttons .dt-button { background: var(--bg-200) !important; border: var(--stroke-hair) solid var(--line-200) !important; color: var(--ink) !important; border-radius: var(--radius-md) !important; }

/* driver.js */
.driver-popover { background: var(--bg-200) !important; color: var(--ink) !important; border: var(--stroke-hair) solid var(--line-200); border-radius: var(--radius-md) !important; box-shadow: var(--shadow-overlay) !important; font-family: var(--font-sans) !important; }
.driver-popover-title { font: 500 17px/24px var(--font-sans) !important; }
.driver-popover-description { color: var(--ink-muted) !important; }
.driver-popover-arrow { border-color: var(--bg-200) !important; }
.driver-popover-footer button { background: var(--bg-300) !important; color: var(--ink) !important; border: var(--stroke-hair) solid var(--line-200) !important; text-shadow: none !important; border-radius: var(--radius-md) !important; font-family: var(--font-sans) !important; }
.driver-popover-footer .driver-popover-next-btn { background: var(--trace) !important; color: var(--on-trace) !important; border-color: var(--trace) !important; }

/* Gridstack */
.grid-stack-item-content { background: var(--bg-200); border: var(--stroke-hair) solid var(--line-100); border-radius: var(--radius-md); }
.grid-stack-placeholder > .placeholder-content { background: var(--trace-dim) !important; border: 1px dashed var(--trace) !important; border-radius: var(--radius-md); }

/* Drawflow */
#drawflow, .fg-drawflow { background-color: var(--bg-000); background-image: radial-gradient(circle at 1px 1px, var(--line-100) 1px, transparent 1.4px); background-size: 16px 16px; }
.drawflow .drawflow-node { background: var(--bg-200) !important; border: var(--stroke-hair) solid var(--line-200) !important; border-radius: var(--radius-md) !important; color: var(--ink) !important; box-shadow: none !important; padding: 0 !important; width: 260px !important; }
.drawflow .drawflow-node.selected { border-color: var(--trace) !important; background: var(--bg-200) !important; }
.drawflow .connection .main-path { stroke: var(--line-200) !important; stroke-width: 1.5px !important; }
.drawflow .connection .main-path.selected, .drawflow .connection .main-path:hover { stroke: var(--trace) !important; }
.drawflow .drawflow-node .input, .drawflow .drawflow-node .output { background: var(--bg-100) !important; border: var(--stroke-hair) solid var(--line-200) !important; width: 14px !important; height: 14px !important; }
.drawflow .drawflow-node .output:hover, .drawflow .drawflow-node .input:hover { background: var(--trace) !important; border-color: var(--trace) !important; }
.drawflow-delete { background: var(--bg-300) !important; color: var(--danger) !important; border: var(--stroke-hair) solid var(--danger) !important; }

/* ---------- 19. Compatibility skin for generated markup (Formio, QueryBuilder) ---------- */
/* Formio and jQuery-QueryBuilder emit Bootstrap-style markup. These rules
   restyle that markup with Fragmental tokens inside their own containers. */
.fg-compat, .formio-form, .formio-component-form, .query-builder { color: var(--ink); font: 400 15px/24px var(--font-sans); }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog, .query-builder) .row { display: flex; flex-wrap: wrap; margin: 0 calc(var(--space-2) * -1); }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog, .query-builder) .row > [class*="col"] { padding: 0 var(--space-2); flex: 1 1 0; min-width: 0; }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .row > .col-md-1, :is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .row > .col-sm-1 { flex: 0 0 8.333%; }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .row > .col-md-2, :is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .row > .col-sm-2 { flex: 0 0 16.666%; }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .row > .col-md-3, :is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .row > .col-sm-3 { flex: 0 0 25%; }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .row > .col-md-4, :is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .row > .col-sm-4 { flex: 0 0 33.333%; }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .row > .col-md-6, :is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .row > .col-sm-6 { flex: 0 0 50%; }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .row > .col-md-8, :is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .row > .col-sm-8 { flex: 0 0 66.666%; }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .row > .col-md-9, :is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .row > .col-sm-9 { flex: 0 0 75%; }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .row > .col-md-12, :is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .row > .col-sm-12 { flex: 0 0 100%; }
@media (max-width: 719px) { :is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .row > [class*="col-md-"] { flex: 0 0 100%; } }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .formio-component, :is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .form-group { margin-bottom: var(--space-4); }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .formio-component-button { margin-bottom: 0; margin-top: var(--space-2); }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) label, :is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .col-form-label, :is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) legend { display: inline-block; margin-bottom: var(--space-1); padding: 0; font: 500 11px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .form-check label, :is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) label.form-check-label { text-transform: none; letter-spacing: 0; font: 400 14px/20px var(--font-sans); color: var(--ink); display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .field-required::after, :is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .field-required:after { content: " *"; color: var(--trace); }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog, .query-builder) .form-control, :is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .choices__inner {
  display: block; width: 100%; min-height: 40px; padding: 7px var(--space-3);
  background: var(--bg-300); color: var(--ink);
  border: var(--stroke-hair) solid var(--line-200); border-radius: var(--radius-md);
  font: 400 15px/24px var(--font-sans); box-shadow: none;
}
.query-builder .form-control { display: inline-block; width: auto; min-height: 32px; padding: 3px 8px; font-size: 13px; }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog, .query-builder) select.form-control { appearance: none; -webkit-appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%239ba2ad' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog, .query-builder) select.form-control option { background: var(--bg-200); }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) textarea.form-control { min-height: 96px; }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog, .query-builder) .form-control:focus { outline: none; border-color: var(--trace); box-shadow: var(--shadow-focus); }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .form-control::placeholder { color: var(--ink-faint); }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .form-control[disabled], :is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .form-control[readonly] { background: var(--bg-200); color: var(--ink-muted); border-color: var(--line-100); }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .form-text, :is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .text-muted, :is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .help-block { display: block; margin-top: var(--space-1); color: var(--ink-muted); font: 400 13px/20px var(--font-sans); }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .input-group { display: flex; align-items: stretch; width: 100%; }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .input-group > .form-control { flex: 1 1 auto; width: 1%; }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .input-group-text { display: flex; align-items: center; padding: 0 var(--space-3); background: var(--bg-200); border: var(--stroke-hair) solid var(--line-200); color: var(--ink-muted); font: 400 13px/20px var(--font-mono); }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .input-group-prepend .input-group-text { border-right: 0; border-radius: var(--radius-md) 0 0 var(--radius-md); }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .input-group-append .input-group-text { border-left: 0; border-radius: 0 var(--radius-md) var(--radius-md) 0; }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .input-group-prepend + .form-control { border-top-left-radius: 0; border-bottom-left-radius: 0; }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .form-control:has(+ .input-group-append) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .form-check { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); padding: 0; }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .form-check-inline { display: inline-flex; margin-right: var(--space-4); }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) input[type="checkbox"], :is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) input[type="radio"] {
  appearance: none; -webkit-appearance: none; position: static; margin: 0;
  width: 16px; height: 16px; flex: none; border: var(--stroke-hair) solid var(--line-200); border-radius: var(--radius-sm); background: var(--bg-300);
  display: inline-grid; place-content: center; cursor: pointer;
}
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) input[type="radio"] { border-radius: var(--radius-pill); }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) input[type="checkbox"]:checked, :is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) input[type="radio"]:checked { background: var(--trace); border-color: var(--trace); }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) input[type="checkbox"]:checked::after { content: ""; width: 8px; height: 4px; border-left: 1.5px solid var(--on-trace); border-bottom: 1.5px solid var(--on-trace); transform: rotate(-45deg) translate(1px, -1px); }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) input[type="radio"]:checked::after { content: ""; width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--on-trace); }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog, .query-builder) .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 36px; padding: 0 var(--space-3);
  border-radius: var(--radius-md); border: var(--stroke-hair) solid var(--line-200);
  background: var(--bg-200); color: var(--ink); font: 500 14px/20px var(--font-sans);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s ease-out, border-color .15s ease-out;
}
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog, .query-builder) .btn:hover { background: var(--bg-300); color: var(--ink); }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog, .query-builder) .btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .btn-primary, :is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .btn-success, :is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) button[type="submit"].btn { background: var(--trace); color: var(--on-trace); border-color: var(--trace); }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .btn-primary:hover, :is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .btn-success:hover, :is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) button[type="submit"].btn:hover { background: var(--trace); color: var(--on-trace); filter: brightness(1.06); }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog, .query-builder) .btn-danger { background: transparent; color: var(--danger); border-color: var(--danger); }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .btn-light, :is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .btn-link, :is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .btn-default { background: transparent; border-color: transparent; color: var(--ink-muted); }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog, .query-builder) .btn-sm, .query-builder .btn-xs { height: 28px; padding: 0 var(--space-2); font-size: 13px; }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .btn[disabled], :is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .btn.disabled { background: var(--bg-200); color: var(--ink-faint); border-color: var(--line-100); cursor: not-allowed; filter: none; }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .card { background: var(--bg-200); border: var(--stroke-hair) solid var(--line-100); border-radius: var(--radius-md); margin-bottom: var(--space-4); }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .card-header { padding: var(--space-3) var(--space-4); border-bottom: var(--stroke-hair) solid var(--line-100); background: transparent; }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .card-title { font: 500 15px/22px var(--font-sans); margin: 0; color: var(--ink); text-transform: none; letter-spacing: 0; }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .card-body { padding: var(--space-4); }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .card-body > .formio-component:last-child { margin-bottom: 0; }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .formio-component-panel > .card, :is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .formio-component-fieldset fieldset { background: transparent; }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) fieldset { border: var(--stroke-hair) solid var(--line-100); border-radius: var(--radius-md); padding: var(--space-4); margin: 0 0 var(--space-4); }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .alert { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: var(--stroke-hair) solid var(--line-100); background: var(--bg-200); color: var(--ink-muted); margin-bottom: var(--space-4); }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .alert-danger { border-color: rgba(255, 111, 97, .5); color: var(--danger); }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .alert-success { border-color: rgba(198, 243, 107, .4); color: var(--success); }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .alert-warning { border-color: rgba(245, 192, 78, .45); color: var(--warning); }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .alert-info { color: var(--ink-muted); }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .alert p, :is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .alert ul { margin: 0; }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .invalid-feedback, :is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .formio-errors .error, :is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .help-block.error { display: block; margin-top: var(--space-1); color: var(--danger); font: 400 13px/20px var(--font-sans); }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .has-error .form-control, :is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .is-invalid, :is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .formio-error-wrapper .form-control { border-color: var(--danger); }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .formio-error-wrapper, :is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .formio-warning-wrapper { padding: 0; background: transparent; color: inherit; }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-3); font-size: 13px; }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .table th { text-align: left; font: 500 11px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); padding: var(--space-2); border-bottom: var(--stroke-hair) solid var(--line-100); }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .table td { padding: var(--space-2); border-bottom: var(--stroke-hair) solid var(--line-100); vertical-align: top; }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .table-bordered { border: var(--stroke-hair) solid var(--line-100); }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .nav-tabs { display: flex; gap: var(--space-6); border-bottom: var(--stroke-hair) solid var(--line-100); list-style: none; padding: 0; margin: 0 0 var(--space-4); }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .nav-tabs .nav-link { display: inline-block; padding: var(--space-3) 0; margin-bottom: -1px; color: var(--ink-muted); border: 0; border-bottom: var(--stroke-trace) solid transparent; background: none; }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .nav-tabs .nav-link.active { color: var(--ink); border-bottom-color: var(--trace); }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .card-header-tabs { margin: 0; border: 0; }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .list-group { list-style: none; padding: 0; margin: 0; border: var(--stroke-hair) solid var(--line-100); border-radius: var(--radius-md); }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .list-group-item { padding: var(--space-3) var(--space-4); border-bottom: var(--stroke-hair) solid var(--line-100); background: transparent; }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .list-group-item:last-child { border-bottom: 0; }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .badge { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: var(--radius-sm); background: var(--bg-300); border: var(--stroke-hair) solid var(--line-100); color: var(--ink-muted); font: 500 11px/16px var(--font-mono); }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .formio-component-htmlelement, :is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .formio-component-content { color: var(--ink-muted); }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .formio-component-htmlelement h1, :is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .formio-component-htmlelement h2, :is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .formio-component-htmlelement h3, :is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .formio-component-htmlelement h4, :is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .formio-component-htmlelement h5 { color: var(--ink); margin-bottom: var(--space-2); }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .formio-component-htmlelement p { margin-bottom: var(--space-2); }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .formio-component-htmlelement a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-200); }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .formio-component-file .fileSelector { border: 1px dashed var(--line-200); border-radius: var(--radius-md); padding: var(--space-6); text-align: center; color: var(--ink-muted); background: var(--bg-300); }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .formio-component-file .fileSelector a { color: var(--trace); }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .formio-component-datagrid .datagrid-table, :is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .formio-component-editgrid .list-group { background: transparent; }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .formio-component-textarea .ace_editor { border-radius: var(--radius-md); border: var(--stroke-hair) solid var(--line-200); }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .ql-toolbar, :is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .ql-container { border-color: var(--line-200) !important; background: var(--bg-300); color: var(--ink); }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .ql-toolbar .ql-stroke { stroke: var(--ink-muted) !important; }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .ql-toolbar .ql-fill { fill: var(--ink-muted) !important; }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .ql-picker { color: var(--ink-muted) !important; }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .flatpickr-input[readonly] { background: var(--bg-300); color: var(--ink); }
.flatpickr-calendar { background: var(--bg-200) !important; border: var(--stroke-hair) solid var(--line-200) !important; box-shadow: var(--shadow-overlay) !important; }
.flatpickr-calendar .flatpickr-day { color: var(--ink) !important; }
.flatpickr-calendar .flatpickr-day.selected { background: var(--trace) !important; color: var(--on-trace) !important; border-color: var(--trace) !important; }
.flatpickr-calendar .flatpickr-day:hover { background: var(--bg-300) !important; }
.flatpickr-calendar .flatpickr-months, .flatpickr-calendar .flatpickr-weekdays, .flatpickr-calendar span.flatpickr-weekday, .flatpickr-calendar .flatpickr-month { background: var(--bg-200) !important; color: var(--ink) !important; fill: var(--ink) !important; }
.flatpickr-calendar .flatpickr-day.prevMonthDay, .flatpickr-calendar .flatpickr-day.nextMonthDay { color: var(--line-200) !important; }
.formio-loader-wrapper { background: transparent !important; }
.formio-loader { border-color: var(--line-100) !important; border-top-color: var(--trace) !important; }
.formio-component-submit .btn, .formio-component-button .btn { min-width: 120px; }
:is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .fa, :is(.fg-compat, .fg-formio, .formio-form, .formio-dialog) .bi { font-size: 14px; }

/* QueryBuilder — its default stylesheet loads after this one (light panels,
   beige groups), so these rules use a higher specificity and !important. */
body .query-builder { color: var(--ink); font: 400 14px/20px var(--font-sans); }
body .query-builder .rules-group-container { background: var(--bg-100) !important; border: var(--stroke-hair) solid var(--line-100) !important; border-radius: var(--radius-md) !important; padding: var(--space-3) var(--space-3) var(--space-2) !important; margin: var(--space-2) 0 !important; }
body .query-builder .rules-group-container .rules-group-container { background: var(--bg-200) !important; }
body .query-builder .rule-container, body .query-builder .rule-placeholder { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); background: var(--bg-200) !important; border: var(--stroke-hair) solid var(--line-100) !important; border-radius: var(--radius-md) !important; padding: var(--space-2) !important; margin: var(--space-2) 0 !important; }
body .query-builder .rules-group-container .rules-group-container .rule-container { background: var(--bg-300) !important; }
body .query-builder .rule-placeholder { border-style: dashed !important; border-color: var(--line-200) !important; }
body .query-builder .rules-group-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2) !important; }
body .query-builder .rule-header { order: 10; margin-left: auto; float: none; }
body .query-builder .float-end { float: none !important; }
body .query-builder .rule-filter-container, body .query-builder .rule-operator-container, body .query-builder .rule-value-container { margin: 0 !important; }
body .query-builder .rule-value-container { border-left: var(--stroke-hair) solid var(--line-100) !important; padding-left: var(--space-2) !important; }
body .query-builder .rules-list { padding-left: var(--space-4) !important; }
body .query-builder .rules-list > ::before, body .query-builder .rules-list > ::after { border-color: var(--line-200) !important; }
body .query-builder .rules-list > ::before { border-width: 0 0 1px 1px !important; }
body .query-builder .rules-list > ::after { border-width: 0 0 0 1px !important; }
body .query-builder .form-control, body .query-builder .form-select {
  display: inline-block; width: auto; min-width: 160px; height: 32px; min-height: 32px; padding: 0 var(--space-2) !important;
  background-color: var(--bg-300) !important; color: var(--ink) !important;
  border: var(--stroke-hair) solid var(--line-200) !important; border-radius: var(--radius-md) !important;
  font: 400 13px/30px var(--font-sans) !important; box-shadow: none !important;
}
body .query-builder .form-select { appearance: none; -webkit-appearance: none; padding-right: 30px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%239ba2ad' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 8px center !important; }
body .query-builder .form-select option, body .query-builder .form-control option { background: var(--bg-200); color: var(--ink); }
body .query-builder .form-control:focus, body .query-builder .form-select:focus { outline: none; border-color: var(--trace) !important; box-shadow: var(--shadow-focus) !important; }
body .query-builder .form-check { display: inline-flex; align-items: center; gap: 6px; margin-right: var(--space-3); }
body .query-builder .form-check-input { accent-color: var(--trace); }
body .query-builder .btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 28px; padding: 0 var(--space-2); border-radius: var(--radius-md); border: var(--stroke-hair) solid var(--line-200); background: var(--bg-200); color: var(--ink); font: 500 12px/20px var(--font-sans); cursor: pointer; text-shadow: none; box-shadow: none; }
body .query-builder .btn:hover { background: var(--bg-300); color: var(--ink); }
body .query-builder .btn .ti { font-size: 14px; vertical-align: 0; }
body .query-builder .btn-success, body .query-builder .group-actions .btn:not(.btn-danger) { background: var(--bg-200); color: var(--ink); border-color: var(--line-200); }
body .query-builder .btn-danger { background: transparent; color: var(--ink-muted); border-color: transparent; }
body .query-builder .btn-danger:hover { color: var(--danger); background: rgba(255, 111, 97, .1); }
body .query-builder .btn-group { display: inline-flex; gap: 0; }
body .query-builder .btn-group > .btn { border-radius: 0; }
body .query-builder .btn-group > .btn + .btn { margin-left: -1px; }
body .query-builder .btn-group > .btn:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
body .query-builder .btn-group > .btn:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
body .query-builder .btn-group > .btn:only-child { border-radius: var(--radius-md); }
body .query-builder .group-actions { gap: var(--space-1); }
body .query-builder .group-actions > .btn { border-radius: var(--radius-md) !important; margin-left: 0 !important; }
/* AND / OR switch: labels wrapping hidden radios */
body .query-builder .group-conditions .btn { background: var(--bg-200); color: var(--ink-muted); border-color: var(--line-200); font: 500 11px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; min-width: 44px; }
body .query-builder .group-conditions .btn.active, body .query-builder .group-conditions .btn:has(input:checked) { background: var(--trace-dim); border-color: var(--trace); color: var(--ink); position: relative; z-index: 1; }
body .query-builder .group-conditions input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
body .query-builder .error-container { color: var(--danger) !important; }
body .query-builder .has-error { background: rgba(255, 111, 97, .06) !important; border-color: var(--danger) !important; }
body .query-builder p.filter-description { background: var(--bg-300) !important; border: var(--stroke-hair) solid var(--line-100) !important; color: var(--ink-muted) !important; }

/* Formio builder (drag & drop) and its component dialogs */
:is(.fg-compat, .formio-dialog) .collapse:not(.show) { display: none; }
:is(.fg-compat, .formio-dialog) .float-right { float: right; }
:is(.fg-compat, .formio-dialog) .float-left { float: left; }
:is(.fg-compat, .formio-dialog) .text-right { text-align: right; }
:is(.fg-compat, .formio-dialog) .text-center { text-align: center; }
:is(.fg-compat, .formio-dialog) .d-none { display: none !important; }
:is(.fg-compat, .formio-dialog) .w-100 { width: 100%; }
:is(.fg-compat, .formio-dialog) .mt-2 { margin-top: var(--space-2); }
:is(.fg-compat, .formio-dialog) .mt-3 { margin-top: var(--space-3); }
:is(.fg-compat, .formio-dialog) .mb-2 { margin-bottom: var(--space-2); }
:is(.fg-compat, .formio-dialog) .mb-3 { margin-bottom: var(--space-3); }
:is(.fg-compat, .formio-dialog) .ml-1, :is(.fg-compat, .formio-dialog) .ml-2 { margin-left: var(--space-2); }
:is(.fg-compat, .formio-dialog) .mr-1, :is(.fg-compat, .formio-dialog) .mr-2 { margin-right: var(--space-2); }
:is(.fg-compat, .formio-dialog) .p-2 { padding: var(--space-2); }
:is(.fg-compat, .formio-dialog) .btn-block { display: flex; width: 100%; }
:is(.fg-compat, .formio-dialog) .btn-xxs, :is(.fg-compat, .formio-dialog) .btn-xs { height: 22px; padding: 0 6px; font-size: 12px; gap: 4px; }
:is(.fg-compat, .formio-dialog) .btn-secondary, :is(.fg-compat, .formio-dialog) .btn-outline-primary, :is(.fg-compat, .formio-dialog) .btn-info { background: var(--bg-200); color: var(--ink); border-color: var(--line-200); }
:is(.fg-compat, .formio-dialog) .text-danger { color: var(--danger); }
:is(.fg-compat, .formio-dialog) .text-success { color: var(--success); }
:is(.fg-compat, .formio-dialog) .bg-light, :is(.fg-compat, .formio-dialog) .bg-default { background: var(--bg-300) !important; }
:is(.fg-compat, .formio-dialog) .border { border: 1px solid var(--line-100) !important; }
:is(.fg-compat, .formio-dialog) .rounded { border-radius: var(--radius-md); }
:is(.fg-compat, .formio-dialog) .row > .col-xs-4, :is(.fg-compat, .formio-dialog) .row > .col-sm-3.formcomponents, :is(.fg-compat, .formio-dialog) .row > .col-md-2.formcomponents { flex: 0 0 260px; max-width: 260px; }
:is(.fg-compat, .formio-dialog) .row > .formarea { flex: 1 1 0; }
:is(.fg-compat, .formio-dialog) .row > .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
.fg-compat .formcomponents .card { margin-bottom: var(--space-2); }
.fg-compat .formcomponents .card-header { padding: 0; }
.fg-compat .formcomponents .card-header .btn, .fg-compat .builder-group-button { width: 100%; justify-content: space-between; height: 36px; background: transparent; border: 0; color: var(--ink); font-weight: 500; }
.fg-compat .formcomponents .card-body { padding: var(--space-2); display: flex; flex-direction: column; gap: 4px; }
.fg-compat .formcomponents .formcomponent, .fg-compat .formcomponents .drag-copy { justify-content: flex-start; height: 32px; font-size: 13px; font-weight: 400; background: var(--bg-300); border: 1px solid var(--line-100); color: var(--ink-muted); border-radius: var(--radius-sm); cursor: grab; }
.fg-compat .formcomponents .formcomponent:hover { border-color: var(--line-200); color: var(--ink); }
.fg-compat .formcomponents .builder-sidebar_search { margin-bottom: var(--space-2); }
.fg-compat .formarea { min-height: 60vh; }
.fg-compat .formarea .drag-container, .fg-compat .formbuilder .drag-container { min-height: 64px; padding: var(--space-2); border: 1px dashed transparent; border-radius: var(--radius-md); }
.fg-compat .formarea .drag-container:hover { border-color: var(--line-100); }
.fg-compat .drag-and-drop-alert { padding: var(--space-3); text-align: center; color: var(--ink-faint); border: 1px dashed var(--line-200); border-radius: var(--radius-md); background: transparent; }
.fg-compat .builder-component { position: relative; border-radius: var(--radius-md); }
.fg-compat .builder-component:hover { outline: 1px solid var(--line-200); outline-offset: 4px; }
.fg-compat .component-btn-group { position: absolute; right: 0; top: -14px; z-index: 5; display: none; gap: 2px; }
.fg-compat .builder-component:hover > .component-btn-group { display: flex; }
.fg-compat .component-btn-group .btn { width: 24px; height: 24px; padding: 0; background: var(--bg-200); }
.fg-compat .component-btn-group .btn-danger { color: var(--danger); }
.fg-compat .gu-mirror, .gu-mirror { background: var(--bg-200) !important; border: 1px solid var(--trace) !important; color: var(--ink) !important; opacity: .9; }
.gu-transit { opacity: .4; }
.formio-dialog.formio-dialog-theme-default { background: rgba(6, 7, 9, .72) !important; padding-top: 6vh; }
.formio-dialog.formio-dialog-theme-default .formio-dialog-content { background: var(--bg-200) !important; color: var(--ink) !important; border: 1px solid var(--line-200); border-radius: var(--radius-md) !important; box-shadow: var(--shadow-overlay) !important; padding: var(--space-6) !important; width: min(1100px, 94vw) !important; font-family: var(--font-sans) !important; }
.formio-dialog.formio-dialog-theme-default .formio-dialog-close::before { background: transparent !important; color: var(--ink-muted) !important; }
.formio-dialog .lead { font: 500 17px/24px var(--font-sans); color: var(--ink); margin-bottom: var(--space-3); }
.formio-dialog .preview-panel .card-body { background: var(--bg-100); }
.formio-dialog .component-preview { padding: var(--space-3); }

/* GrapesJS editor chrome */
.gjs-one-bg { background-color: var(--bg-200) !important; }
.gjs-two-color { color: var(--ink-muted) !important; }
.gjs-three-bg { background-color: var(--trace) !important; color: var(--on-trace) !important; }
.gjs-four-color, .gjs-four-color-h:hover { color: var(--trace) !important; }

/* ---------- 20. Page-level pieces ---------- */
.fg-formio { position: relative; }
.fg-formio .fg-loading { padding: var(--space-6) 0; justify-content: flex-start; }
.fg-formio--danger .btn-primary, .fg-formio--danger button[type="submit"].btn { background: transparent !important; color: var(--danger) !important; border-color: var(--danger) !important; filter: none !important; }
.fg-formio--danger .btn-primary:hover, .fg-formio--danger button[type="submit"].btn:hover { background: rgba(255, 111, 97, .1) !important; }
.fg-page-head__filters .formio-component { margin-bottom: 0 !important; }
.fg-page-head__filters .formio-form > div, .fg-datefilter .formio-form > div { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; }
.fg-datefilter .formio-component { margin-bottom: 0 !important; }

.fg-report-hero { border: var(--stroke-hair) solid var(--line-100); border-radius: var(--radius-md); margin-bottom: var(--space-8); }
.fg-report-hero__inner { padding: var(--space-16) var(--space-12) var(--space-12); display: flex; flex-direction: column; gap: var(--space-3); }
@media (max-width: 719px) { .fg-report-hero__inner { padding: var(--space-12) var(--space-4) var(--space-8); } .fg-report-hero .fg-display-xl { font-size: 40px; line-height: 44px; } }

.fg-auth__art .fg-graph svg { height: 100%; }
.fg-auth__art { background-color: var(--bg-000); background-image: radial-gradient(circle at 1px 1px, var(--line-100) 1px, transparent 1.4px); background-size: 32px 32px; }
.fg-waves { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.fg-auth--single { grid-template-columns: minmax(0, 1fr); }
.fg-auth--single .fg-auth__main { align-items: flex-start; padding-top: 12vh; }
.fg-auth--single .fg-auth__box { max-width: 560px; }

.fg-public { background: var(--bg-100); }
.fg-public__wrap { max-width: 760px; margin: 0 auto; padding: var(--space-8) var(--space-4) var(--space-16); display: flex; flex-direction: column; gap: var(--space-8); }
.fg-public__head { display: flex; align-items: center; min-height: 40px; }
.fg-public__foot { text-align: center; }

.fg-editor-body { overflow: hidden; }
.fg-editor-body .fg-shell { height: 100vh; }
.fg-editor-body .fg-shell__body { position: relative; overflow: hidden; }

/* ---------- 21. Reports ---------- */
.fg-report-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-6); }
.fg-daterange { display: inline-flex; align-items: center; gap: var(--space-2); height: 36px; padding: 0 var(--space-3); border-radius: var(--radius-md); border: var(--stroke-hair) solid var(--line-200); background: var(--bg-200); color: var(--ink); cursor: pointer; font: 400 13px/20px var(--font-mono); }
.fg-daterange:hover { background: var(--bg-300); }
.fg-daterange input { all: unset; width: 200px; cursor: pointer; }
.fg-daterange .ti { color: var(--ink-muted); font-size: 16px; vertical-align: 0; }
.grid-stack { margin: 0 -6px; }
.grid-stack > .grid-stack-item > .grid-stack-item-content { inset: 6px !important; }
.fg-widget { display: flex; flex-direction: column; background: var(--bg-200); border: var(--stroke-hair) solid var(--line-100); border-radius: var(--radius-md); overflow: hidden !important; }
.fg-widget--bare { background: transparent; border-color: transparent; }
.fg-widget.is-edited { border: 1px dashed var(--warning); }
.fg-widget__head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: var(--stroke-hair) solid var(--line-100); }
.fg-widget__title { font: 500 14px/20px var(--font-sans); color: var(--ink); }
.fg-widget__body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: var(--space-4); }
.fg-widget__body--flush { padding: 0; }
.fg-widget .fg-table th { position: sticky; top: 0; z-index: 1; }
.grid-stack-controls { position: absolute; top: 12px; right: 12px; z-index: 6; display: flex; gap: 2px; padding: 2px; background: var(--bg-300); border: 1px solid var(--line-200); border-radius: var(--radius-md); opacity: 0; transition: opacity .15s ease-out; }
.grid-stack-item:hover > .grid-stack-controls, .grid-stack-controls:focus-within, .fg-editing .grid-stack-controls { opacity: 1; }
.fg-editing .grid-stack-item-content { cursor: move; }
.fg-editing .fg-widget { border-style: dashed; border-color: var(--line-200); }
.fg-kpi { height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); }
.fg-kpi__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.fg-kpi__value { font: 300 32px/36px var(--font-sans); letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fg-kpi__icon { width: 32px; height: 32px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); border: var(--stroke-hair) solid var(--line-100); background: var(--bg-300); color: var(--ink-muted); }
.fg-kpi__icon .ti { font-size: 16px; vertical-align: 0; }
.fg-note { font: 400 12px/16px var(--font-sans); color: var(--ink-faint); padding: var(--space-3) var(--space-4); border-top: var(--stroke-hair) solid var(--line-100); }
.fg-note sup, .fg-mark { color: var(--warning); }
.fg-widget-title { display: flex; align-items: flex-end; height: 100%; padding: 0 0 var(--space-2); border-bottom: var(--stroke-hair) solid var(--line-100); }
.fg-widget-title h2 { font: 500 17px/24px var(--font-sans); }
.fg-masonry { columns: 3 280px; column-gap: var(--space-4); }
.fg-masonry > * { break-inside: avoid; margin-bottom: var(--space-4); }
.fg-media-card { background: var(--bg-200); border: var(--stroke-hair) solid var(--line-100); border-radius: var(--radius-md); overflow: hidden; }
.fg-media-card img, .fg-media-card video { display: block; width: 100%; height: auto; background: var(--bg-000); }
.fg-media-card__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
/* FunnelGraph */
.svg-funnel-js { position: relative; display: block; width: 100%; height: 280px; color: var(--ink); font-family: var(--font-sans); }
.svg-funnel-js:not(.svg-funnel-js--vertical) { padding-top: 84px; padding-bottom: 8px; }
.svg-funnel-js svg { display: block; }
.svg-funnel-js .svg-funnel-js__container { width: 100%; height: 100%; }
.svg-funnel-js .svg-funnel-js__labels { position: absolute; display: flex; width: 100%; height: 100%; top: 0; left: 0; box-sizing: border-box; }
.svg-funnel-js .svg-funnel-js__label { flex: 1 1 0; position: relative; padding: 0 var(--space-4); border-left: var(--stroke-hair) solid var(--line-100); }
.svg-funnel-js .svg-funnel-js__label:first-child { border-left: 0; }
.svg-funnel-js .svg-funnel-js__label .label__value { font: 300 28px/32px var(--font-sans); letter-spacing: -0.02em; color: var(--ink); }
.svg-funnel-js .svg-funnel-js__label .label__title { font: 500 11px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin-top: 4px; }
.svg-funnel-js .svg-funnel-js__label .label__percentage { font: 400 13px/20px var(--font-mono); color: var(--trace); }
.svg-funnel-js .svg-funnel-js__label .label__segment-percentages { display: none; }

/* ---------- 22. Inbox ---------- */
.fg-inbox { display: grid; grid-template-columns: 340px minmax(0, 1fr); height: calc(100vh - var(--topbar-h)); min-height: 520px; }
.fg-inbox__list { display: flex; flex-direction: column; min-height: 0; border-right: var(--stroke-hair) solid var(--line-100); background: var(--bg-200); }
.fg-inbox__list-head { flex: none; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-bottom: var(--stroke-hair) solid var(--line-100); }
.fg-inbox__convos { flex: 1 1 auto; overflow-y: auto; list-style: none; margin: 0; padding: 0; }
.fg-inbox__thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.fg-inbox__thread-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-6); border-bottom: var(--stroke-hair) solid var(--line-100); min-height: 64px; }
.fg-inbox__body { flex: 1 1 auto; display: flex; min-height: 0; position: relative; }
.fg-inbox__messages { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.fg-inbox__scroll { flex: 1 1 auto; overflow-y: auto; padding: var(--space-6); }
.fg-inbox__scroll .chat-list { display: flex; flex-direction: column; gap: var(--space-3); }
.fg-inbox__contact { flex: 0 0 300px; overflow-y: auto; border-left: var(--stroke-hair) solid var(--line-100); background: var(--bg-200); }
.fg-inbox__contact[hidden] { display: none !important; }
.fg-inbox__empty { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: var(--space-8); }
.fg-convo { align-items: flex-start; }
.fg-convo__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fg-convo__name { font: 500 14px/20px var(--font-sans); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fg-convo__last { font: 400 13px/18px var(--font-sans); color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fg-convo__side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.fg-chat-av { position: relative; display: inline-flex; flex: none; }
.fg-chat-av__ch { position: absolute; right: -4px; bottom: -3px; width: 16px; height: 16px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; background: var(--bg-100); border: var(--stroke-hair) solid var(--line-200); color: var(--ink-muted); }
.fg-chat-av__ch .ti { font-size: 10px; vertical-align: 0; }
.fg-day { align-self: center; margin: var(--space-2) 0; }
.fg-bubble-row { display: flex; gap: var(--space-3); align-items: flex-end; }
.fg-bubble-row--out { justify-content: flex-end; }
.fg-bubble { max-width: min(560px, 78%); display: flex; flex-direction: column; gap: 4px; }
.fg-bubble-row--out .fg-bubble { align-items: flex-end; }
.fg-bubble__meta { font: 400 11px/16px var(--font-mono); color: var(--ink-faint); display: inline-flex; align-items: center; gap: 4px; }
.fg-bubble__text { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--bg-200); border: var(--stroke-hair) solid var(--line-100); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 21px; }
.fg-bubble--agent .fg-bubble__text { background: var(--bg-300); border-color: var(--line-200); }
.fg-bubble--ai .fg-bubble__text { background: var(--bg-300); border-color: var(--line-100); }
.fg-suggestion { width: min(560px, 100%); padding: var(--space-3); border: 1px dashed var(--warning); border-radius: var(--radius-md); background: rgba(245, 192, 78, .05); display: flex; flex-direction: column; gap: var(--space-2); }
.fg-suggestion textarea { all: unset; display: block; width: 100%; min-height: 64px; color: var(--ink); font: 400 14px/21px var(--font-sans); white-space: pre-wrap; resize: vertical; }
.fg-composer { flex: none; display: flex; align-items: flex-end; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: var(--stroke-hair) solid var(--line-100); background: var(--bg-100); }
.fg-composer textarea { flex: 1 1 auto; min-height: 40px; max-height: 180px; resize: none; }
@media (max-width: 1199px) { .fg-inbox__contact { position: absolute; right: 0; top: 0; bottom: 0; width: 300px; z-index: 5; box-shadow: var(--shadow-overlay); } }
@media (max-width: 899px) {
  .fg-inbox { grid-template-columns: minmax(0, 1fr); height: auto; }
  .fg-inbox__list { max-height: 44vh; }
  .fg-inbox__thread { min-height: 70vh; }
}

/* File drop zone */
.fg-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-12) var(--space-6); text-align: center; border: 1px dashed var(--line-200); border-radius: var(--radius-md); background: var(--bg-000); cursor: pointer; transition: border-color .15s ease-out, background .15s ease-out; }
.fg-dropzone:hover, .fg-dropzone.is-over { border-color: var(--trace); background: var(--bg-100); }
.fg-dropzone.is-filled { border-style: solid; border-color: var(--line-200); }
.fg-dropzone:focus-within { box-shadow: var(--shadow-focus); }

/* Option cards (choose a type / platform) */
.fg-option { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); background: var(--bg-200); border: var(--stroke-hair) solid var(--line-100); border-radius: var(--radius-md); color: inherit; transition: border-color .15s ease-out, background .15s ease-out; }
.fg-option:hover { border-color: var(--line-200); background: var(--bg-300); color: inherit; }
.fg-option__icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); border: var(--stroke-hair) solid var(--line-200); color: var(--ink); background: var(--bg-100); }
.fg-option__icon .ti { font-size: 22px; vertical-align: 0; }
.fg-option__icon img { width: 26px; height: 26px; object-fit: contain; }
.fg-option__title { font: 500 17px/24px var(--font-sans); }
.fg-option__text { color: var(--ink-muted); font-size: 13px; line-height: 20px; }
.fg-option__go { position: absolute; top: var(--space-6); right: var(--space-6); color: var(--ink-faint); transition: transform .15s ease-out, color .15s ease-out; }
.fg-option:hover .fg-option__go { color: var(--trace); transform: translateX(2px); }