:root {
  color-scheme: dark;
  --bg: #181818;
  --stage: #1b1b1b;
  --hdr: #282828;
  --pill: #303030;
  --pill-b: #444444;
  --card: #292929;
  --card-b: #424242;
  --edge-g: #ffffff;
  --edge-h: #2e7df6;
  --edge-ch: #ff3b30;
  --edge-branch: #a3a3a3;
  --risk-ink: #67e8f9;
  --risk-border: #155e75;
  --risk-bg: #102b34;
}

html:not([data-theme="light"]) #fb-node-layer .card {
  background: linear-gradient(180deg, #2b2b2b, #242424);
}
html:not([data-theme="light"]) #fb-node-layer .card .header .cmd {
  background: #3a3a3a;
}
html:not([data-theme="light"]) #sheet,
html:not([data-theme="light"]) #sheet .detail-wrap,
html:not([data-theme="light"]) #fb-node-menu {
  background: var(--card) !important;
  border-color: var(--card-b) !important;
}
html:not([data-theme="light"]) #sheet .sheet-x,
html:not([data-theme="light"]) #sheet .pick-item,
html:not([data-theme="light"]) #sheet .pill,
html:not([data-theme="light"]) #fb-node-menu button:not(.nm-conn):not(#nm-risk):not(#nm-del) {
  background: var(--pill) !important;
  border-color: var(--pill-b) !important;
}
html:not([data-theme="light"]) #sheet .pick-item:hover {background:#3b3b3b !important;}
html:not([data-theme="light"]) #sheet input,
html:not([data-theme="light"]) #fb-add-search-form,
html:not([data-theme="light"]) #fb-add-character {
  background: var(--bg) !important;
  border-color: var(--pill-b) !important;
}

#sheet {
  box-sizing: border-box;
  min-width: 0 !important;
  width: min(560px, calc(100vw - 24px));
  max-width: calc(100vw - 24px) !important;
}
#sheet input, #fb-add-search-form { box-sizing: border-box; min-width: 0; }
#sheet .detail-wrap { box-sizing: border-box; min-width: 0 !important; }

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f6f8;
  --stage: #f4f6f8;
  --hdr: #e8edf2;
  --ink: #35424a;
  --ink-d: #52636a;
  --pill: #ffffff;
  --pill-b: #cbd5df;
  --card: #ffffff;
  --card-b: #c7d2de;
  --edge-g: #475569;
  --edge-h: #1d65ce;
  --edge-ch: #c72d25;
  --edge-branch: #6b6b6b;
  --risk-ink: #0e7490;
  --risk-border: #a5dfeb;
  --risk-bg: #ecfeff;
}

/* Soft gray text, slightly deeper for the FlowBuilder canvas. */
html[data-theme="light"] :is(#btnAdd, #btnAddAction, #btnZoomOut, #btnZoomIn, #btnMenu) {
  color: #435159;
}

html[data-theme="light"] #fb-node-layer .card {
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  box-shadow: 0 6px 20px rgba(32, 52, 74, .12);
}
html[data-theme="light"] #fb-node-layer .card .header .cmd {
  background: #e8eef5;
  color: var(--ink);
}
html[data-theme="light"] #fb-node-layer .card .risk-panel {
  border-top-color: var(--risk-border);
  background: var(--risk-bg);
}
html[data-theme="light"] #fb-node-layer .card .risk-title,
html[data-theme="light"] #fb-node-layer .card .risk-value { color: var(--risk-ink); }
html[data-theme="light"] #fb-node-layer .card .risk-source { color: var(--ink-d); }

/* Sheets are created dynamically by the existing picker and graph modules. */
html[data-theme="light"] #sheet,
html[data-theme="light"] #sheet .detail-wrap,
html[data-theme="light"] #fb-node-menu {
  background: #ffffff !important;
  border-color: var(--card-b) !important;
  color: var(--ink) !important;
  box-shadow: 0 16px 40px rgba(32, 52, 74, .18) !important;
}
html[data-theme="light"] #sheet .sheet-x,
html[data-theme="light"] #sheet .pick-item,
html[data-theme="light"] #sheet .pill,
html[data-theme="light"] #fb-node-menu button:not(.nm-conn) {
  background: var(--pill) !important;
  border-color: var(--pill-b) !important;
  color: var(--ink) !important;
}
html[data-theme="light"] #sheet .pick-item:hover,
html[data-theme="light"] #sheet .sheet-x:hover,
html[data-theme="light"] #fb-node-menu button:not(.nm-conn):hover {
  background: #eaf1f8 !important;
}
html[data-theme="light"] #sheet input {
  box-sizing: border-box;
  min-width: 0;
  background: #ffffff !important;
  border-color: var(--pill-b) !important;
  color: var(--ink) !important;
}
html[data-theme="light"] #sheet h3,
html[data-theme="light"] #sheet .detail-grid .row > div.key,
html[data-theme="light"] #fb-add-character { color: var(--ink) !important; }
html[data-theme="light"] #sheet hr,
html[data-theme="light"] #sheet .detail-grid,
html[data-theme="light"] #sheet .detail-grid .row > div { border-color: var(--pill-b) !important; }
html[data-theme="light"] #fb-add-search-form,
html[data-theme="light"] #fb-add-character,
html[data-theme="light"] #sheet .sheet-body > div[style*="background:#0b0c0e"],
html[data-theme="light"] #fb-node-menu > div[style*="background:#222"] {
  background: #f0f4f8 !important;
  border-color: var(--pill-b) !important;
}
html[data-theme="light"] #fb-add-search-message { color: var(--ink-d) !important; }
html[data-theme="light"] #sheet #m-clear,
html[data-theme="light"] #fb-node-menu #nm-del { color: #b42332 !important; }
html[data-theme="light"] #fb-node-menu #nm-risk {
  background: var(--risk-bg) !important;
  border-color: var(--risk-border) !important;
  color: var(--risk-ink) !important;
}
html[data-theme="light"] #fb-node-menu .nm-conn[data-m="G"] {
  color: var(--edge-g) !important;
  border-color: var(--edge-g) !important;
}
html[data-theme="light"] .conn-label,
html[data-theme="light"][data-mini-card="1"] .conn-label {
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 2px 8px rgba(32, 52, 74, .15) !important;
}
html[data-theme="light"] .edge-under { stroke-opacity: .12; }

@media (max-width: 480px) {
  #headerStrip { padding: 6px 8px; }
  #bar { gap: 6px; }
  #charWrap { min-width: 0; padding: 0 8px; }
  #charDd { gap: 6px; min-width: 0; }
  #charDd #charName { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #charDd #charAvatar { width: 24px; height: 24px; }
  #btnAdd { min-width: 68px; padding: 0 8px; }
  #btnZoomOut, #btnZoomIn, #btnMenu { width: 38px; flex: none; }
}

/* One chip: outcome / branch first, execution conditions second. */
.conn-label { align-items: stretch; overflow: hidden; }
.conn-label button {
  font: inherit; color: inherit; border: 0; background: transparent;
  padding: 6px 10px; cursor: pointer; white-space: nowrap; touch-action: manipulation;
}
.conn-label .conn-extra {
  border-left: 1px solid currentColor; font-size: 11px; font-weight: 500;
  background: color-mix(in srgb, currentColor 8%, transparent);
}
.conn-label .conn-extra:not(.has-conditions) { display: none; }
.conn-label .conn-primary:focus-visible + .conn-extra,
.conn-label .conn-extra:focus-visible { display: block; }
@media (hover: hover) and (pointer: fine) {
  .conn-label:hover .conn-extra { display: block; }
}
.conn-label button:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }
.fb-edge-conditions { display: grid; gap: 14px; padding: 8px; }
.fb-edge-conditions h3 { margin: 0 32px 4px 0; font-size: 16px; }
.fb-condition-option { display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; }
.fb-condition-option input { width: 18px; height: 18px; accent-color: var(--edge-h); }
.fb-edge-conditions .pill { justify-self: end; cursor: pointer; }

#btnAddAction { flex: none; text-align: center; }
#btnAddAction:hover { filter: brightness(1.08); }
.fb-action-picker h3, .fb-action-form h3 { margin: 0 34px 14px 0; font-size: 16px; }
.fb-action-picker h4 { color: var(--ink-d); font-size: 12px; margin: 18px 0 8px; }
.fb-action-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fb-action-list .pick-item { min-width: 0; overflow-wrap: anywhere; }
.fb-action-command { color: var(--ink-d); font: 12px/1.5 ui-monospace, monospace; }
.fb-action-form { display: grid; gap: 14px; padding: 4px; }
.fb-action-form label { display: grid; gap: 6px; }
.fb-action-form input, .fb-action-form textarea {
  width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--card-b); background: var(--card); color: var(--ink); font: inherit;
}
.fb-action-form textarea { resize: vertical; min-height: 90px; }
#fb-node-layer .action-card .header { align-items: flex-start; }
#fb-node-layer .action-card .cmd { max-width: 48%; overflow-wrap: anywhere; white-space: normal; }
#fb-node-layer .action-card .name { white-space: normal; overflow-wrap: anywhere; }
.action-notes { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; padding: 8px 14px 12px; }
.action-hint { color: var(--ink-d); font-size: 11px; padding: 4px 14px 12px; }
.card.mini .action-notes, .card.mini .action-hint { display: none; }
@media (max-width: 600px) {
  #bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); height: auto; }
  #charWrap { grid-column: 1; grid-row: 1; width: max-content; }
  #btnZoomOut { grid-column: 2; grid-row: 1; justify-self: end; }
  #btnZoomIn { grid-column: 3; grid-row: 1; justify-self: end; }
  #btnMenu { grid-column: 4; grid-row: 1; justify-self: end; }
  #btnAdd { grid-column: 1 / 3; grid-row: 2; margin-left: 0; min-width: 0; }
  #btnAddAction { grid-column: 3 / 5; grid-row: 2; padding: 0 9px; }
  #btnZoomOut, #btnZoomIn, #btnMenu { height: 44px; }
  .fb-action-form input, .fb-action-form textarea { font-size: 16px; }
}
@media (max-width: 380px) {
  .fb-action-list { grid-template-columns: minmax(0, 1fr); }
}