/* ============================================================
   DEVCENTER.CSS — Development Center shared components (.fm-*)
   GLOBAL — not scoped to [data-theme]; reference only --pc-* tokens.
   Built once in WP-A; consumed template-only by WP-B / WP-C.
   Carries the mockup's structure/density/iconography into the
   Pitch-Green theme system. NO hard-coded mockup hex.
   ============================================================ */

/* ============================================================
   .fm-vault — dark "confidential entrance" banner / center hero.
   The base MUST be a fixed dark ink (--fm-vault-base), never
   --pc-text: in performance-dark --pc-text is near-white and a
   text-derived gradient washes out the light foreground. The
   base equals --pc-text in the light themes, so they render
   unchanged; only the --pc-accent tint varies per theme.
   ============================================================ */
.fm-vault {
  --fm-vault-base: #16201A; /* forest ink — keep dark in ALL themes */
  --fm-vault-fg: #F3EDE3;
  --fm-vault-fg-muted: rgba(243,237,227,0.72);
  position: relative;
  overflow: hidden;
  border-radius: var(--pc-radius, 16px);
  /* solid fallback first, gradient enhancement second */
  background: #25302A;
  background:
    linear-gradient(120deg,
      color-mix(in srgb, var(--fm-vault-base) 90%, var(--pc-accent)) 0%,
      color-mix(in srgb, var(--fm-vault-base) 80%, #000) 72%,
      color-mix(in srgb, var(--fm-vault-base) 70%, var(--pc-accent)) 100%);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--fm-vault-fg);
  box-shadow: none;
}

/* accent glow bleed top-right */
.fm-vault::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--pc-accent) 30%, transparent),
    transparent 70%);
  pointer-events: none;
}
.fm-vault__row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.fm-vault--banner {
  padding: 0.95rem 1.15rem;
}
.fm-vault--hero {
  padding: 1.5rem 1.5rem 1.35rem;
}
.fm-vault--hero .fm-vault__row {
  align-items: flex-start;
}
.fm-vault__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  font-size: 1.25rem;
  background: color-mix(in srgb, var(--pc-accent) 22%, transparent);
  color: var(--pc-accent);
}
.fm-vault--hero .fm-vault__icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  font-size: 1.5rem;
}
.fm-vault__title {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 1.05rem;
  color: #FFFFFF;
  line-height: 1.15;
}
.fm-vault--hero .fm-vault__title {
  font-size: 1.45rem;
}
.fm-vault__title a {
  color: #FFFFFF;
  text-decoration: none;
}
.fm-vault__title a:hover {
  color: #FFFFFF;
  text-decoration: underline;
}
.fm-vault__body {
  margin: 0.15rem 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--fm-vault-fg-muted);
  max-width: 640px;
}
.fm-vault__note {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.35rem;
  font-size: 0.72rem;
  color: var(--fm-vault-fg-muted);
}
.fm-vault__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  z-index: 2; /* sit above any stretched-link overlay */
}
/* access card slot (hero) */
.fm-vault__access {
  margin-left: auto;
  min-width: 190px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  padding: 0.6rem 0.8rem;
  font-size: 0.74rem;
  color: var(--fm-vault-fg-muted);
}
.fm-vault__access b {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
  color: var(--fm-vault-fg);
}
.fm-vault__access a {
  color: var(--pc-accent);
  text-decoration: none;
}
.fm-vault__access a:hover {
  text-decoration: underline;
}

/* facepile (inside the vault access card) */
.fm-facepile {
  display: flex;
  margin: 0.35rem 0 0.15rem;
}
.fm-facepile span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  margin-left: -7px;
  font-size: 0.6rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--fm-vault-base, #16201A) 60%, #fff);
  border: 2px solid color-mix(in srgb, var(--fm-vault-base, #16201A) 85%, #000);
  color: #F3EDE3;
}
.fm-facepile span:first-child {
  margin-left: 0;
}

/* ============================================================
   .fm-section — eyebrow section header row (label · count + right)
   Distinct from .fm-eyebrow (a plain label).
   ============================================================ */
.fm-section {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.3rem 0 0.6rem;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pc-text, #16201A);
}
.fm-section__icon {
  color: var(--pc-accent);
  font-size: 0.9rem;
}
.fm-section__count {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  color: var(--pc-muted);
  text-transform: none;
  letter-spacing: 0;
}
.fm-section__right {
  margin-left: auto;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.74rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--pc-muted);
}

/* ============================================================
   .fm-chip — semantic status chip WITH icon slot.
   (.fm-pill stays for plain category/phase pills.)
   ============================================================ */
.fm-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.16rem 0.55rem;
  border-radius: var(--pc-radius-pill, 999px);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  background: var(--pc-surface-2, #EDF0ED);
  color: var(--pc-muted, #6F766F);
}
.fm-chip > i { font-size: 0.85em; }
.fm-chip--ok      { background: var(--pc-ok-soft);     color: var(--pc-ok-ink); }
.fm-chip--warn    { background: var(--pc-warn-soft);   color: var(--pc-warn-ink); }
.fm-chip--danger  { background: var(--pc-danger-soft); color: var(--pc-danger-ink); }
.fm-chip--info    { background: var(--pc-info-soft);   color: var(--pc-info-ink); }
.fm-chip--accent  { background: var(--pc-accent-soft); color: var(--pc-accent); }
.fm-chip--neutral { background: var(--pc-surface-2);   color: var(--pc-muted); }
/* uppercase pill modifier (round status: "CLOSED 12 MAY") */
.fm-chip--pill {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.66rem;
}

/* account-status chip is just a .fm-chip; keep a hook for any tuning */
.fm-account-chip { }

/* ============================================================
   Position badges (.fm-pos) — primary / dashed secondary / GK.
   ============================================================ */
.fm-pos {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  border-radius: 6px;
  padding: 0.14rem 0.45rem;
  background: var(--pc-accent-soft);
  color: var(--pc-accent);
  border: 1px solid var(--pc-accent-soft);
}
/* distinct GK color (teal/info tint) */
.fm-pos--gk {
  background: var(--pc-info-soft);
  color: var(--pc-info-ink);
  border-color: var(--pc-info-soft);
}
/* secondary position — dashed outline, muted */
.fm-pos--sec {
  background: transparent;
  color: var(--pc-muted);
  border: 1px dashed var(--pc-border);
  font-weight: 600;
}

/* ============================================================
   .fm-lvtag — soft squad-level tag (A/AB/B/BC/C). Bridge levels
   (AB/BC) render as a split gradient. See models.PLAYER_LEVELS.
   ============================================================ */
.fm-lvtag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 0.25rem;
  border-radius: 5px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.fm-lvtag--dual {
  min-width: 28px;
  font-size: 0.62rem;
  color: #2A3445;
}
.fm-lvtag--a  { background: #BFE3CE; color: #086B3C; }
.fm-lvtag--b  { background: #C2D8EE; color: #2C588C; }
.fm-lvtag--c  { background: #F4DBAF; color: #97601F; }
.fm-lvtag--ab { background: linear-gradient(105deg, #BFE3CE 45%, #C2D8EE 55%); }
.fm-lvtag--bc { background: linear-gradient(105deg, #C2D8EE 45%, #F4DBAF 55%); }
.fm-lvtag-lock {
  font-size: 0.7rem;
  margin-left: 0.25rem;
  color: var(--pc-warn, #B3722A);
}

/* ============================================================
   .fm-shirt — serif tabular shirt numeral (no pill).
   ============================================================ */
.fm-shirt {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--pc-muted);
}

/* ============================================================
   .fm-dtable — dense dev-center table rhythm.
   ============================================================ */
.fm-dtable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.fm-dtable thead th {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pc-muted);
  text-align: left;
  white-space: nowrap;
  padding: 0.6rem 0.8rem;
  background: var(--pc-bg);
  border-bottom: 1px solid var(--pc-border);
}
.fm-dtable tbody td {
  padding: 0.55rem 0.8rem;
  border-bottom: 1px solid var(--pc-border);
  vertical-align: middle;
  font-size: 0.875rem;
  color: var(--pc-text);
}
.fm-dtable tbody tr:last-child > td { border-bottom: 0; }
.fm-dtable tbody tr:hover > td { background: var(--pc-surface-2); }
/* collapse rows (inline edit) keep transparent */
.fm-dtable tbody tr.collapse > td,
.fm-dtable tbody tr.collapsing > td { background: transparent !important; }

/* ============================================================
   .fm-kpi — KPI / stat card with progress bar.
   ============================================================ */
.fm-kpi {
  background: var(--pc-surface);
  border: 1px solid var(--pc-border);
  border-radius: 13px;
  padding: 0.65rem 0.85rem;
}
.fm-kpi__label {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pc-muted);
}
.fm-kpi__value {
  margin: 0.1rem 0;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.15;
  color: var(--pc-text);
}
.fm-kpi__value--num {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
}
.fm-kpi__value small {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.74rem;
  font-weight: 400;
  color: var(--pc-muted);
}
.fm-kpi__bar {
  height: 5px;
  border-radius: 4px;
  background: var(--pc-surface-2);
  overflow: hidden;
  margin-top: 0.35rem;
}
.fm-kpi__bar > i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--pc-accent);
}
.fm-kpi__bar--ok > i { background: var(--pc-ok); }

/* ============================================================
   .fm-pipeline / .fm-pstep — mini pipeline step cards.
   ============================================================ */
.fm-pipeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.6rem;
}
.fm-pstep {
  background: var(--pc-surface);
  border: 1px solid var(--pc-border);
  border-radius: 12px;
  padding: 0.6rem 0.75rem;
}
.fm-pstep__k {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pc-muted);
}
.fm-pstep__k > i { color: var(--pc-accent); }
.fm-pstep__v {
  margin: 0.15rem 0 0.35rem;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--pc-text);
}
.fm-pstep__v small {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--pc-muted);
}
.fm-pstep__bar {
  height: 5px;
  border-radius: 4px;
  background: var(--pc-surface-2);
  overflow: hidden;
}
.fm-pstep__bar > i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--pc-accent);
}
.fm-pstep__bar--ok > i { background: var(--pc-ok); }

/* ============================================================
   .fm-feature — anchor feature tile (dev-home grid).
   ============================================================ */
.fm-feature {
  position: relative;
  display: block;
  background: var(--pc-surface);
  border: 1px solid var(--pc-border);
  border-radius: 14px;
  padding: 0.95rem 1.05rem;
  text-decoration: none;
  color: var(--pc-text);
  box-shadow: none;
  transition:
    border-color 200ms var(--pc-ease, cubic-bezier(0.22,1,0.36,1)),
    box-shadow   200ms var(--pc-ease, cubic-bezier(0.22,1,0.36,1));
}
.fm-feature:hover {
  border-color: #C8D2C9;
  box-shadow: 0 3px 12px rgba(0,0,0,.06);
  color: var(--pc-text);
}
.fm-feature__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 1.05rem;
  margin-bottom: 0.55rem;
  /* --ic set inline per tile; falls back to accent */
  background: var(--ic-soft, var(--pc-accent-soft));
  color: var(--ic, var(--pc-accent));
}
.fm-feature__title {
  margin: 0 0 0.2rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.98rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--pc-text);
}
.fm-feature__body {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--pc-muted);
  min-height: 2.6em;
}
.fm-feature__stat {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.55rem;
  font-size: 0.74rem;
  color: var(--pc-text);
}
.fm-feature__arrow {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  color: var(--pc-muted);
}
.fm-feature--soon { opacity: 0.78; }
.fm-feature__soonchip {
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--pc-surface-2);
  color: var(--pc-muted);
  border-radius: 6px;
  padding: 0.08rem 0.4rem;
}

/* ============================================================
   .fm-attn — attention chip strip (big Fraunces numbers).
   ============================================================ */
.fm-attn {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.fm-attn__item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--pc-surface);
  border: 1px solid var(--pc-border);
  border-radius: 11px;
  padding: 0.45rem 0.75rem;
  font-size: 0.8rem;
  color: var(--pc-text);
  text-decoration: none;
  transition: border-color 200ms var(--pc-ease, cubic-bezier(0.22,1,0.36,1));
}
.fm-attn__item:hover {
  border-color: var(--pc-accent);
  color: var(--pc-text);
}
.fm-attn__n {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--pc-warn-ink);
}
.fm-attn__item .bi-chevron-right { color: var(--pc-muted); }

/* ============================================================
   .fm-feed — activity feed (dashed rows + icon squares).
   ============================================================ */
.fm-feed {
  margin: 0;
  padding: 0;
  list-style: none;
}
.fm-feed__row {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.55rem 0;
  border-top: 1px dashed var(--pc-border);
  font-size: 0.82rem;
  line-height: 1.4;
}
.fm-feed__row:first-child { border-top: 0; }
.fm-feed__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  margin-top: 0.05rem;
  font-size: 0.78rem;
  background: var(--pc-surface-2);
  color: var(--pc-muted);
}
.fm-feed__body { min-width: 0; }
.fm-feed__when {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.72rem;
  color: var(--pc-muted);
}

/* ============================================================
   .fm-boundary — "what leaves this area" yes/no list.
   ============================================================ */
.fm-boundary {
  margin: 0.2rem 0 0;
  padding: 0;
  list-style: none;
}
.fm-boundary li {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  padding: 0.4rem 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--pc-text);
}
.fm-boundary i.fm-boundary__yes { color: var(--pc-ok); }
.fm-boundary i.fm-boundary__no  { color: var(--pc-danger); }

/* ============================================================
   .fm-catdot — 4-color category dot (order-indexed).
   ============================================================ */
.fm-catdot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--pc-muted);
}
.fm-catdot--1 { background: var(--pc-chart-1); }
.fm-catdot--2 { background: var(--pc-chart-2); }
.fm-catdot--3 { background: var(--pc-chart-3); }
.fm-catdot--4 { background: var(--pc-chart-4); }

/* ============================================================
   .fm-focuscard — colored-left-border focus card (plans show).
   --fc = category color, set inline.
   ============================================================ */
.fm-focuscard {
  background: var(--pc-surface);
  border: 1px solid var(--pc-border);
  border-left: 3px solid var(--fc, var(--pc-accent));
  border-radius: var(--pc-radius-sm, 10px);
  padding: 0.85rem 1rem;
}
.fm-focuscard__cat {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pc-muted);
}
.fm-focuscard__skill {
  margin: 0.2rem 0 0;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--pc-text);
}
.fm-focuscard__why {
  margin: 0.3rem 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--pc-muted);
}
.fm-focuscard__label {
  margin: 0.6rem 0 0.3rem;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pc-muted);
}
.fm-focuscard__drills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.fm-drill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.55rem;
  border-radius: var(--pc-radius-pill, 999px);
  font-size: 0.74rem;
  font-weight: 500;
  background: var(--pc-surface-2);
  color: var(--pc-text);
  border: 1px solid var(--pc-border);
  text-decoration: none;
}
.fm-drill:hover { border-color: var(--pc-accent); color: var(--pc-text); }
/* dots progress meter */
.fm-meter {
  display: inline-flex;
  gap: 0.2rem;
  align-items: center;
}
.fm-meter i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pc-surface-2);
  border: 1px solid var(--pc-border);
}
.fm-meter i.on { background: var(--fc, var(--pc-accent)); border-color: transparent; }

/* ============================================================
   .fm-quote — goal quote block.
   ============================================================ */
.fm-quote {
  position: relative;
  background: var(--pc-surface-2);
  border-radius: var(--pc-radius-sm, 10px);
  padding: 0.9rem 1rem 0.9rem 2.4rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--pc-text);
}
.fm-quote::before {
  content: "\201C";
  position: absolute;
  left: 0.6rem;
  top: 0.2rem;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 2rem;
  line-height: 1;
  color: var(--pc-accent);
}
.fm-quote__caption {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.74rem;
  color: var(--pc-muted);
}

/* ============================================================
   .fm-handnote — handwritten-style coach note.
   ============================================================ */
.fm-handnote {
  background: var(--pc-surface-2);
  border-radius: var(--pc-radius-sm, 10px);
  padding: 0.9rem 1rem;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--pc-text);
  white-space: pre-wrap;
}

/* ============================================================
   .fm-cmp / .fm-brow — per-category comparison bars (finalize).
   ============================================================ */
.fm-cmp { display: flex; flex-direction: column; gap: 0.35rem; }
.fm-brow {
  display: grid;
  grid-template-columns: 5.5rem 1fr 2.2rem;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
}
.fm-brow__name { color: var(--pc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-brow__track {
  height: 7px;
  border-radius: 4px;
  background: var(--pc-surface-2);
  overflow: hidden;
}
.fm-brow__track > i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--fc, var(--pc-accent));
}
.fm-brow__val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.74rem;
  color: var(--pc-text);
  text-align: right;
}
/* disagreement callout */
.fm-dis {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.3rem;
  padding: 0.18rem 0.55rem;
  border-radius: var(--pc-radius-pill, 999px);
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--pc-warn-soft);
  color: var(--pc-warn-ink);
}

/* ============================================================
   .fm-gear — three-dot / gear icon-button (table + cards).
   ============================================================ */
.fm-gear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.4rem;
  border-radius: 7px;
  color: var(--pc-muted);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.fm-gear:hover {
  background: var(--pc-surface-2);
  color: var(--pc-text);
}

/* ============================================================
   Dark-theme contrast fixes for the dialogue form.
   Placeholder text and the "Staff only" confidentiality chip
   need a brighter colour in performance-dark.
   ============================================================ */
[data-theme="performance-dark"] .fm-chip--accent {
  background: rgba(63,190,130,0.22);
  color: #6FD3A1;
}
[data-theme="performance-dark"] .form-control::placeholder,
[data-theme="performance-dark"] .form-select::placeholder {
  color: #7A9184;
  opacity: 1;
}