/* ═════════════════════════════════════════════════════════════════════════
   BUSINESS GRAPH styles — Obsidian-ish dark canvas with warm accents.
   Lives alongside the legacy workflow-brain visuals inside .wf-wrapper.
   ═════════════════════════════════════════════════════════════════════════ */

.wf-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.wf-mode-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 22px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-2, #1a1916);
}
.wf-mode-seg {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-1, #141311);
}
.wf-mode-seg button {
  background: transparent; border: none; color: var(--text-2, #a8a39a);
  padding: 6px 14px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  border-right: 1px solid var(--border);
  transition: background 0.15s, color 0.15s;
}
.wf-mode-seg button:last-child { border-right: none; }
.wf-mode-seg button:hover { color: var(--text-1, #f4f2ee); background: rgba(255,255,255,0.03); }
.wf-mode-seg button.on {
  background: #c87945; color: #0f0e0c;
}
.wf-mode-ic { font-size: 10px; opacity: 0.8; }
.wf-mode-hint { font-size: 12px; color: var(--text-3, #76716a); font-style: italic; }

/* ─── Root layout ─────────────────────────────────────────────────────── */
.bg-root {
  display: flex; flex-direction: column;
  flex: 1; min-height: 0;
  background: #0f0e0c;
  color: #f4f2ee;
}
.bg-topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 22px; gap: 14px;
  border-bottom: 1px solid #2a2824;
}
.bg-title { font-size: 20px; font-weight: 700; font-family: 'Fraunces', serif; letter-spacing: -0.01em; }
.bg-sub { font-size: 12.5px; color: #a8a39a; margin-top: 2px; }
.bg-topbar-r { display: flex; gap: 10px; align-items: center; }
.bg-toggle {
  display: inline-flex; border: 1px solid #2a2824; border-radius: 6px; overflow: hidden;
}
.bg-toggle button {
  background: transparent; border: none; color: #a8a39a;
  padding: 6px 11px; font-size: 11.5px; font-weight: 500; cursor: pointer;
  border-right: 1px solid #2a2824; transition: all 0.15s;
}
.bg-toggle button:last-child { border-right: none; }
.bg-toggle button.on { background: #2a2824; color: #f4f2ee; }
.bg-btn {
  background: transparent; border: 1px solid #2a2824; color: #a8a39a;
  padding: 6px 12px; border-radius: 6px; font-size: 12px; cursor: pointer;
  transition: all 0.15s;
}
.bg-btn:hover { border-color: #c87945; color: #f4f2ee; }
.bg-btn.primary { background: #c87945; color: #0f0e0c; border-color: #c87945; font-weight: 600; }
.bg-btn.primary:hover { background: #d88955; }
.bg-btn.ghost { background: transparent; }

/* ─── Main layout ─────────────────────────────────────────────────────── */
.bg-layout {
  display: grid;
  grid-template-columns: 260px 1fr 340px;
  flex: 1; min-height: 0;
  overflow: hidden;
}
.bg-side {
  background: #141311;
  overflow-y: auto;
  display: flex; flex-direction: column;
  gap: 12px;
  padding: 14px;
}
.bg-side-l { border-right: 1px solid #2a2824; }
.bg-side-r { border-left: 1px solid #2a2824; }

.bg-panel {
  background: #1a1916;
  border: 1px solid #2a2824;
  border-radius: 8px;
  padding: 12px;
}
.bg-panel-h {
  font-size: 11px; font-weight: 700; letter-spacing: 1.2px; color: #a8a39a;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: flex; justify-content: space-between; align-items: baseline;
}
.bg-panel-hint { font-size: 9.5px; font-weight: 500; color: #6b665d; letter-spacing: 0.5px; text-transform: none; font-style: italic; }

/* ─── Cluster list ────────────────────────────────────────────────────── */
.bg-cluster-list { display: flex; flex-direction: column; gap: 2px; }
.bg-cluster-row {
  display: flex; align-items: center; gap: 10px;
  background: transparent; border: none; color: #d6d1c7;
  padding: 7px 8px; border-radius: 5px;
  cursor: pointer; text-align: left; width: 100%;
  font-size: 12.5px;
  transition: background 0.12s;
}
.bg-cluster-row:hover { background: #221f1a; }
.bg-cluster-row.on { background: #2a2520; color: #f4f2ee; }
.bg-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.bg-cluster-name { flex: 1; }
.bg-cluster-ct { color: #76716a; font-size: 11px; font-variant-numeric: tabular-nums; }

/* ─── Scenarios ───────────────────────────────────────────────────────── */
.bg-scenario {
  display: block; width: 100%; text-align: left;
  background: #0f0e0c; border: 1px solid #2a2824; border-radius: 6px;
  padding: 9px 11px; margin-bottom: 6px;
  cursor: pointer; transition: all 0.15s;
}
.bg-scenario:hover { border-color: #c87945; }
.bg-scenario.on { border-color: #c87945; background: #1e1814; }
.bg-scenario-t { font-size: 12.5px; font-weight: 600; color: #f4f2ee; line-height: 1.3; }
.bg-scenario-sub { font-size: 10.5px; color: #76716a; margin-top: 3px; }

/* ─── Leverage list ───────────────────────────────────────────────────── */
.bg-lev-explain { font-size: 10.5px; color: #76716a; line-height: 1.4; margin-bottom: 8px; }
.bg-lev-row {
  display: grid; grid-template-columns: 18px 1fr 40px;
  align-items: center; gap: 8px;
  background: transparent; border: none; color: #d6d1c7;
  padding: 6px 4px; border-radius: 4px;
  cursor: pointer; text-align: left; width: 100%;
  font-size: 12px;
  transition: background 0.12s;
}
.bg-lev-row:hover { background: #221f1a; color: #f4f2ee; }
.bg-lev-rank { color: #c87945; font-weight: 700; font-size: 11px; font-variant-numeric: tabular-nums; }
.bg-lev-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bg-lev-score { color: #d4a545; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; font-size: 11px; }

/* ─── Canvas ──────────────────────────────────────────────────────────── */
.bg-canvas-wrap {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 50%, #1a1815 0%, #0f0e0c 80%),
    #0f0e0c;
  overflow: hidden;
  cursor: grab;
}
.bg-canvas-wrap:active { cursor: grabbing; }
.bg-canvas {
  width: 100%; height: 100%;
  display: block;
  user-select: none;
}
.bg-canvas.panning { cursor: grabbing; }

/* Legend */
.bg-legend {
  position: absolute; bottom: 14px; left: 14px;
  background: rgba(20, 19, 17, 0.92);
  border: 1px solid #2a2824; border-radius: 6px;
  padding: 8px 11px;
  font-size: 10.5px; color: #a8a39a;
  display: flex; flex-direction: column; gap: 4px;
  backdrop-filter: blur(6px);
}
.bg-lg-row { display: flex; align-items: center; gap: 8px; }
.bg-lg-line { width: 22px; height: 1.5px; display: inline-block; }
.bg-lg-line.pos { background: #e8a87c; }
.bg-lg-line.neg { background: #60a5fa; }
.bg-lg-line.dep { background: #e8a87c; opacity: 0.4; border-top: 1.5px dashed #e8a87c; height: 0; background: none; }
.bg-lg-shape { width: 10px; height: 10px; background: #c87945; display: inline-block; }
.bg-lg-shape.circle { border-radius: 50%; }
.bg-lg-shape.square { border-radius: 2px; }
.bg-lg-sep { height: 1px; background: #2a2824; margin: 3px 0; }

/* Tooltip */
.bg-tooltip {
  position: absolute;
  transform: translate(16px, -50%);
  background: rgba(20, 19, 17, 0.97);
  border: 1px solid #c87945;
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 12px;
  max-width: 260px;
  pointer-events: none;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  z-index: 10;
}
.bg-tt-t { font-weight: 700; color: #f4f2ee; font-size: 13px; margin-bottom: 2px; }
.bg-tt-v { color: #c87945; font-size: 11.5px; font-weight: 600; margin-bottom: 4px; }
.bg-tt-d { color: #a8a39a; font-size: 11px; line-height: 1.4; }

/* ─── Right side: narrative / detail ──────────────────────────────────── */
.bg-narrative, .bg-node-detail, .bg-empty {
  display: flex; flex-direction: column; gap: 10px;
}

/* Narrative (scenario) */
.bg-nar-head { position: relative; }
.bg-nar-eyebrow { font-size: 9.5px; font-weight: 700; color: #c87945; letter-spacing: 1.5px; margin-bottom: 4px; }
.bg-nar-title { font-size: 17px; font-weight: 700; font-family: 'Fraunces', serif; line-height: 1.2; padding-right: 26px; }
.bg-nar-close {
  position: absolute; top: -2px; right: -2px;
  background: transparent; border: none; color: #76716a; font-size: 18px;
  cursor: pointer; padding: 2px 6px;
}
.bg-nar-close:hover { color: #f4f2ee; }
.bg-nar-summary {
  font-size: 12.5px; color: #d6d1c7; line-height: 1.5;
  padding: 10px; background: #0f0e0c; border-radius: 6px;
  border-left: 2px solid #c87945;
}
.bg-nar-chain-h, .bg-nar-risks-h, .bg-nd-sec-h {
  font-size: 10.5px; font-weight: 700; color: #a8a39a;
  letter-spacing: 1.2px; text-transform: uppercase;
  margin-top: 6px;
}
.bg-nar-chain { display: flex; flex-direction: column; gap: 6px; }
.bg-nar-step {
  display: grid; grid-template-columns: 24px 1fr; gap: 8px;
  padding: 8px 10px; border-radius: 6px;
  background: #0f0e0c; border: 1px solid #2a2824;
}
.bg-nar-step.neg { border-left: 2px solid #d45252; }
.bg-nar-step.pos { border-left: 2px solid #6bbf73; }
.bg-nar-step.risk { border-left: 2px solid #d4a545; }
.bg-nar-step-n {
  background: #2a2520; border-radius: 50%; width: 20px; height: 20px;
  font-size: 10.5px; font-weight: 700; color: #c87945;
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.bg-nar-step-head { display: flex; justify-content: space-between; gap: 6px; align-items: baseline; }
.bg-nar-step-node { font-size: 12px; font-weight: 600; color: #f4f2ee; }
.bg-nar-step-delta {
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.bg-nar-step-delta.pos { color: #6bbf73; }
.bg-nar-step-delta.neg { color: #d45252; }
.bg-nar-step-delta.risk { color: #d4a545; }
.bg-nar-step-t { font-size: 11.5px; color: #a8a39a; line-height: 1.4; margin-top: 3px; }

.bg-nar-risks { display: flex; flex-direction: column; gap: 4px; }
.bg-nar-risk {
  font-size: 11.5px; color: #e4c282;
  padding: 6px 10px; background: rgba(212,165,69,0.08);
  border-radius: 4px; border-left: 2px solid #d4a545;
  line-height: 1.4;
}
.bg-nar-actions {
  display: flex; gap: 8px; margin-top: 10px;
  padding-top: 10px; border-top: 1px solid #2a2824;
}
.bg-nar-actions .bg-btn { flex: 1; }

/* Node detail */
.bg-nd-head { position: relative; }
.bg-nd-cluster { font-size: 9.5px; font-weight: 700; letter-spacing: 1.5px; margin-bottom: 4px; }
.bg-nd-name { font-size: 17px; font-weight: 700; font-family: 'Fraunces', serif; line-height: 1.2; padding-right: 26px; }
.bg-nd-val { color: #c87945; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bg-nd-desc { font-size: 12px; color: #a8a39a; line-height: 1.5; }

.bg-nd-sim {
  background: #0f0e0c; border: 1px solid #2a2824; border-radius: 6px;
  padding: 10px;
}
.bg-nd-sim-h { font-size: 10.5px; font-weight: 700; color: #c87945; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; }
.bg-nd-sim-range input[type=range] { width: 100%; accent-color: #c87945; }
.bg-nd-sim-hint { font-size: 10.5px; color: #76716a; margin-top: 4px; }

.bg-nd-edges { display: flex; flex-direction: column; gap: 3px; }
.bg-nd-edge {
  display: grid; grid-template-columns: 16px 1fr 40px 44px;
  gap: 6px; align-items: center;
  padding: 6px 8px; border-radius: 4px;
  font-size: 11.5px;
  cursor: pointer; transition: background 0.12s;
}
.bg-nd-edge:hover { background: #221f1a; }
.bg-nd-e-arrow { font-size: 13px; font-weight: 700; color: #a8a39a; }
.bg-nd-e-arrow.pos { color: #6bbf73; }
.bg-nd-e-arrow.neg { color: #d45252; }
.bg-nd-e-name { color: #d6d1c7; }
.bg-nd-e-w { color: #c87945; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.bg-nd-e-lag { color: #76716a; font-size: 10.5px; text-align: right; }
.bg-nd-e-note {
  grid-column: 2 / -1; font-size: 10.5px; color: #a8a39a;
  font-style: italic; margin-top: 2px;
}

.bg-nd-ripple { display: flex; flex-direction: column; gap: 2px; }
.bg-nd-rip {
  display: grid; grid-template-columns: 28px 1fr 50px;
  gap: 6px; align-items: center;
  padding: 4px 8px; font-size: 11.5px;
}
.bg-nd-rip-d { color: #76716a; font-size: 10px; font-weight: 700; }
.bg-nd-rip-n { color: #d6d1c7; }
.bg-nd-rip-w { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; font-size: 11px; }
.bg-nd-rip-w.pos { color: #6bbf73; }
.bg-nd-rip-w.neg { color: #d45252; }
.bg-nd-rip-more { font-size: 10.5px; color: #76716a; font-style: italic; padding: 4px 8px; }

/* Empty state */
.bg-empty-t { font-size: 16px; font-weight: 700; font-family: 'Fraunces', serif; color: #f4f2ee; }
.bg-empty-d { font-size: 12px; color: #a8a39a; line-height: 1.6; margin-top: 6px; }
.bg-empty-d b { color: #c87945; font-weight: 600; }
.bg-empty-stats {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid #2a2824;
}
.bg-es { text-align: center; }
.bg-es .v {
  font-size: 22px; font-weight: 700; color: #c87945;
  font-family: 'Fraunces', serif; font-variant-numeric: tabular-nums;
}
.bg-es .k { font-size: 10.5px; color: #76716a; letter-spacing: 1px; text-transform: uppercase; margin-top: 2px; }

/* Scrollbars in side panels (dark) */
.bg-side::-webkit-scrollbar { width: 6px; }
.bg-side::-webkit-scrollbar-track { background: transparent; }
.bg-side::-webkit-scrollbar-thumb { background: #2a2824; border-radius: 3px; }
.bg-side::-webkit-scrollbar-thumb:hover { background: #3a3731; }

/* ═════════════════════════════════════════════════════════════════════════
   PROPOSALS PANEL — AI-drafted graph edits, user approves/rejects
   ═════════════════════════════════════════════════════════════════════════ */
.bg-proposals { border-left-color: #a78bfa !important; }
.bg-prop-list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.bg-prop {
  background: #16140f;
  border: 1px solid #2a2824;
  border-radius: 5px;
  overflow: hidden;
  transition: border-color 0.15s;
}
.bg-prop:hover { border-color: #3a3731; }
.bg-prop.open { border-color: #8b7355; }
.bg-prop.op-add_node  { border-left: 3px solid #6bbf73; }
.bg-prop.op-edit_node { border-left: 3px solid #d4a545; }
.bg-prop.op-delete_node, .bg-prop.op-delete_edge { border-left: 3px solid #d45252; }
.bg-prop.op-add_edge  { border-left: 3px solid #6aa8c7; }
.bg-prop.op-edit_edge { border-left: 3px solid #a78bfa; }

.bg-prop-head {
  padding: 10px 12px;
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
  cursor: pointer;
}
.bg-prop-kind {
  font-size: 9.5px; font-weight: 700; letter-spacing: 1.2px;
  color: #9a928a; text-transform: uppercase;
  background: #0f0e0c; padding: 3px 7px; border-radius: 3px;
}
.bg-prop-summary { font-size: 12.5px; color: #e4dfd4; line-height: 1.35; }
.bg-prop-conf { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: #76716a; font-variant-numeric: tabular-nums; }
.bg-prop-conf-bar { width: 40px; height: 4px; background: #2a2824; border-radius: 2px; overflow: hidden; }
.bg-prop-conf-fill { height: 100%; transition: width 0.3s; }

.bg-prop-body {
  padding: 0 12px 12px;
  border-top: 1px dashed #2a2824;
  padding-top: 10px;
}
.bg-prop-section-h {
  font-size: 9.5px; letter-spacing: 1.2px; color: #76716a; text-transform: uppercase;
  margin: 8px 0 4px;
}
.bg-prop-reasoning { font-size: 12px; color: #c9c1b3; line-height: 1.5; }
.bg-prop-impact { font-size: 12px; color: #a8b9a0; line-height: 1.45; font-style: italic; }
.bg-prop-cascade { font-size: 11.5px; color: #9a928a; padding-left: 12px; line-height: 1.5; }
.bg-prop-actions { display: flex; gap: 6px; margin-top: 12px; justify-content: flex-end; }

.bg-prop-empty { text-align: center; padding: 30px 20px; color: #76716a; }
.bg-prop-empty-t { font-size: 13px; color: #e4dfd4; font-weight: 600; margin-bottom: 6px; }
.bg-prop-empty-d { font-size: 11.5px; line-height: 1.5; }

/* ═════════════════════════════════════════════════════════════════════════
   HISTORY PANEL — revision log
   ═════════════════════════════════════════════════════════════════════════ */
.bg-history { border-left-color: #6aa8c7 !important; }
.bg-hist-list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.bg-hist-row {
  display: grid; grid-template-columns: 24px 1fr; gap: 10px;
  padding: 10px 12px;
  background: #16140f;
  border: 1px solid #2a2824;
  border-radius: 4px;
}
.bg-hist-row.author-ai { border-left: 3px solid #a78bfa; }
.bg-hist-row.author-user { border-left: 3px solid #c87945; }
.bg-hist-icon { font-size: 14px; text-align: center; padding-top: 2px; }
.bg-hist-summary { font-size: 12.5px; color: #e4dfd4; line-height: 1.4; }
.bg-hist-meta { display: flex; gap: 10px; margin-top: 3px; font-size: 10.5px; color: #76716a; }
.bg-hist-author { font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; }
.bg-hist-reason { font-size: 11px; color: #9a928a; font-style: italic; margin-top: 4px; line-height: 1.45; }

/* ═════════════════════════════════════════════════════════════════════════
   INLINE EDIT UI on the node detail panel
   ═════════════════════════════════════════════════════════════════════════ */
.bg-nd-head-actions { display: flex; gap: 4px; align-items: center; }
.bg-nd-edit-btn {
  background: transparent; border: 1px solid #2a2824;
  color: #9a928a; font-size: 12px;
  width: 24px; height: 24px; border-radius: 3px; cursor: pointer;
  transition: all 0.12s;
}
.bg-nd-edit-btn:hover { color: #c87945; border-color: #c87945; }
.bg-nd-name-edit {
  flex: 1;
  background: #0f0e0c; border: 1px solid #c87945;
  color: #f4f2ee; font-family: 'Fraunces', serif; font-size: 19px; font-weight: 600;
  padding: 4px 8px; border-radius: 3px; outline: none;
  min-width: 0;
}
.bg-nd-edit-fields { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; }
.bg-nd-ef-row { display: flex; flex-direction: column; gap: 4px; }
.bg-nd-ef-row span {
  font-size: 9.5px; letter-spacing: 1.2px; color: #76716a; text-transform: uppercase;
}
.bg-nd-ef-row input, .bg-nd-ef-row textarea, .bg-nd-ef-row select {
  background: #0f0e0c; border: 1px solid #2a2824;
  color: #e4dfd4; font-family: inherit; font-size: 12.5px;
  padding: 6px 8px; border-radius: 3px; outline: none; resize: vertical;
}
.bg-nd-ef-row input:focus, .bg-nd-ef-row textarea:focus, .bg-nd-ef-row select:focus {
  border-color: #c87945;
}
.bg-nd-delete {
  align-self: flex-start; color: #d45252 !important; border-color: #4a2828 !important;
}
.bg-nd-delete:hover { background: #2a1818 !important; }

.bg-nd-sec-h { position: relative; display: flex; align-items: center; justify-content: space-between; }
.bg-nd-sec-add {
  background: transparent; border: 1px dashed #3a3731;
  color: #9a928a; font-size: 10px; letter-spacing: 0.5px;
  padding: 2px 8px; border-radius: 3px; cursor: pointer;
  text-transform: none; letter-spacing: 0;
}
.bg-nd-sec-add:hover { border-color: #c87945; color: #c87945; border-style: solid; }

.bg-nd-add-edge {
  display: grid; grid-template-columns: 1fr 70px 1fr auto auto; gap: 5px;
  padding: 8px; margin-bottom: 8px;
  background: #16140f; border: 1px solid #8b7355; border-radius: 4px;
}
.bg-nd-add-edge select, .bg-nd-add-edge input {
  background: #0f0e0c; border: 1px solid #2a2824;
  color: #e4dfd4; font-size: 11.5px;
  padding: 5px 6px; border-radius: 3px; outline: none;
  min-width: 0;
}
.bg-nd-add-edge .bg-btn { padding: 5px 10px; font-size: 11px; }

.bg-nd-edge.editing { background: #1a1713; border-color: #8b7355; padding: 0; }
.bg-nd-edge-main { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer; }
.bg-nd-e-edit {
  margin-left: auto;
  background: transparent; border: 0;
  color: #76716a; font-size: 11px; cursor: pointer;
  padding: 2px 6px; border-radius: 2px;
}
.bg-nd-e-edit:hover { background: #2a2824; color: #c87945; }
.bg-nd-e-edit-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: end;
  padding: 8px 10px 10px; border-top: 1px dashed #2a2824;
}
.bg-nd-e-edit-row label {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 9.5px; letter-spacing: 1px; color: #76716a; text-transform: uppercase;
}
.bg-nd-e-edit-row label span.pos { color: #6bbf73; }
.bg-nd-e-edit-row label span.neg { color: #f87171; }
.bg-nd-e-edit-row input[type="range"] { width: 140px; }
.bg-nd-e-edit-row input[type="text"], .bg-nd-e-edit-row input:not([type]) {
  background: #0f0e0c; border: 1px solid #2a2824; color: #e4dfd4;
  font-size: 11.5px; padding: 4px 6px; border-radius: 3px; outline: none; width: 70px;
}
.bg-nd-e-delete { padding: 4px 8px !important; font-size: 13px !important; color: #d45252 !important; }

.bg-btn { position: relative; }
.bg-btn-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 5px;
  margin-left: 5px;
  background: #a78bfa; color: #0f0e0c;
  font-size: 10px; font-weight: 700; border-radius: 8px;
  font-variant-numeric: tabular-nums;
}
.bg-btn.primary .bg-btn-badge { background: #fff; color: #c87945; }
.bg-btn.has-badge { border-color: #a78bfa; }