/* ══════════════════════════════════════════════════════
   EventBus Monitor — Стилі v6.0.0
   Концепція: Signal Switchboard / Industrial Forge
   Глобальний редизайн: форма + маса + механіка
   ══════════════════════════════════════════════════════ */

/* ── Reset / Base ── */
/* 🔧 cc-745: обмежено до .eb-body scope — щоб не скидати margin/padding глобально */
.eb-body *, .eb-body *::before, .eb-body *::after { box-sizing: border-box; margin: 0; padding: var(--sp-card-pad, 0); }

/* ── CSS vars — scoped bridge до SSOT (dev-tools-base.css) ── */
.eb-body {
  --eb-bg:        var(--bg-base);
  --eb-surface:   var(--bg-surface);
  --eb-surface-2: var(--bg-elevated);
  --eb-border:    var(--border-metal);
  --eb-border-hi: var(--border-bright);
  --eb-accent:    var(--accent-brass);
  --eb-text:      var(--text-bright);
  --eb-muted:     var(--text-muted);
  --eb-ok:        var(--success);
  --eb-warn:      var(--warning);
  --eb-err:       var(--danger-text);
  --mod-observer:   var(--mod-observer,   #7a9e5a);
  --mod-publisher:  var(--mod-publisher,  #d4a24a);
  --mod-executor:   var(--mod-executor,   #b85434);
  --mod-applicant:  var(--mod-applicant,  #5a8299);
  --mod-nexus:      var(--mod-nexus,      #4a9590);
  --mod-challenger: var(--mod-challenger, #c86a1c);
  --mod-paymaster:  var(--mod-paymaster,  #2d4a6b);
}

::selection {
  background: rgba(197, 139, 58, 0.35);
  color: var(--text-bright, var(--text-bright));
}

.eb-body { font-size: 13px; }

/* ══════════════════════════════════════
   Keyframes
   ══════════════════════════════════════ */

/* Gear rotation — CSS (не SVG animateTransform) */
@keyframes eb-rot-cw  { to { transform: rotate(360deg);  } }
@keyframes eb-rot-ccw { to { transform: rotate(-360deg); } }

.eb-rot-cw-slow  { animation: eb-rot-cw  40s linear infinite; transform-origin: center; transform-box: fill-box; }
.eb-rot-ccw-med  { animation: eb-rot-ccw 26s linear infinite; transform-origin: center; transform-box: fill-box; }
.eb-rot-cw-med   { animation: eb-rot-cw  26s linear infinite; transform-origin: center; transform-box: fill-box; }
.eb-rot-cw-fast  { animation: eb-rot-cw  16s linear infinite; transform-origin: center; transform-box: fill-box; }
.eb-rot-ccw-fast { animation: eb-rot-ccw 16s linear infinite; transform-origin: center; transform-box: fill-box; }

/* Signal-in — із лівого краю (telegraph ticker) */
@keyframes eb-signal-in {
  0%   { opacity: 0; transform: translateX(-10px);
         box-shadow: inset 0 0 20px rgba(197, 139, 58, 0.16); }
  65%  { opacity: 1; transform: translateX(0); }
  100% { box-shadow: none; }
}

/* Heartbeat */
@keyframes eb-hb-pulse {
  0%, 100% { box-shadow: inset 0 1px 2px rgba(0,0,0,.5), 0 0 0 3px rgba(86,163,166,.22); }
  50%       { box-shadow: inset 0 1px 2px rgba(0,0,0,.5), 0 0 0 6px rgba(86,163,166,.05); }
}

/* Count flash на оновлення */
@keyframes eb-countflash {
  0%   { opacity: .4; transform: scale(1.10); }
  55%  { }
  100% { opacity: 1;  transform: scale(1); text-shadow: none; }
}

/* Anomaly warning pulse */
@keyframes eb-warn-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}

/* Red status pulse */
@keyframes eb-status-red-pulse {
  0%, 100% { box-shadow: 0 0 5px rgba(193,68,24,.55); }
  50%       { box-shadow: 0 0 11px rgba(227,111,61,.70); }
}

/* Row highlight */
@keyframes eb-row-pulse {
  0%   { background: rgba(197, 139, 58, 0.12); }
  100% { background: transparent; }
}

/* Dash flow на SVG-ребрах */
@keyframes eb-dash-flow { to { stroke-dashoffset: -12; } }

/* Empty state pulse */
@keyframes eb-empty-pulse {
  0%, 100% { opacity: .20; transform: scale(1); }
  50%      { opacity: .50; transform: scale(1.08); }
}

/* Burst badge */
@keyframes eb-burst-pulse {
  0%, 100% { box-shadow: none; }
  50%       { box-shadow: 0 0 8px rgba(224,196,137,.35); }
}

/* Meter fill animation */
@keyframes eb-meter-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ══════════════════════════════════════
   Page ambient — forge glow
   ══════════════════════════════════════ */

/* Прибираємо legacy ::before — al-bg-scene + dt-primitives перекривають */
body.dev-tools-scope.al-page.eb-body::before { content: none; }

/* Фон сторінки */
.eb-body { background-color: var(--bg-void, var(--bg-void)); }

/* ══════════════════════════════════════
   Header overrides
   ══════════════════════════════════════ */

.eb-body .devtools-title {
  text-transform: none !important;
  font-size: 15px;
}
.eb-body .devtools-title::before,
.eb-body .devtools-title::after {
  content: none !important;
  display: none !important;
}
.dev-tools-scope.al-page.eb-body .devtools-title::before,
.dev-tools-scope.al-page.eb-body .devtools-title::after {
  content: none !important;
  display: none !important;
}

.eb-title-block { display: flex; align-items: center; gap: var(--sp-gap, 10px); }

/* ── Heartbeat dot — industrial indicator light ── */
.eb-heartbeat-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--text-dim, #4a3e30);
  flex-shrink: 0;
  transition: background 0.4s;
  border: 1px solid rgba(197,139,58,.18);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.4);
}
.eb-heartbeat-dot.is-ok {
  background: var(--success, var(--success));
  box-shadow: inset 0 1px 2px rgba(0,0,0,.3),
              0 0 0 1px rgba(86,163,166,.30),
              0 0 8px rgba(86,163,166,.40);
  animation: eb-hb-pulse 2s ease-in-out infinite;
}
.eb-heartbeat-dot.is-warn {
  background: var(--warning, var(--log-warn));
  box-shadow: inset 0 1px 2px rgba(0,0,0,.3),
              0 0 0 1px rgba(224,196,137,.30),
              0 0 7px rgba(224,196,137,.35);
  animation: eb-hb-pulse 1.2s ease-in-out infinite;
}
.eb-heartbeat-dot.is-err {
  background: var(--danger-text, var(--log-error));
  box-shadow: inset 0 1px 2px rgba(0,0,0,.3),
              0 0 0 1px rgba(163,71,27,.40),
              0 0 10px rgba(227,111,61,.50);
  animation: eb-hb-pulse 0.7s ease-in-out infinite;
}
/* Meta variant */
.al-crest-meta .eb-heartbeat-dot,
.eb-heartbeat-dot--inmeta {
  width: 7px; height: 7px;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

/* Header controls layout */
.eb-header-controls {
  display: flex; align-items: center; gap: 8px;
  margin-left: auto; flex-wrap: wrap;
}

/* ══════════════════════════════════════
   Inputs, Selects
   ══════════════════════════════════════ */

.eb-select, .eb-select-sm {
  background: rgba(0,0,0,.35);
  border: 1px solid var(--eb-border);
  border-radius: var(--forge-radius, 2px);
  color: var(--eb-muted);
  font-family: inherit;
  font-size: 11px;
  padding: var(--sp-space, 5px 10px);
  cursor: pointer;
  outline: none;
  transition: border-color .15s, color .15s;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.45);
}
.eb-select:hover, .eb-select-sm:hover {
  border-color: var(--eb-border-hi);
  color: var(--eb-text);
}
.eb-select option, .eb-select-sm option {
  background: var(--bg-base, var(--bg-base));
  color: var(--eb-text);
}
.eb-select-sm { padding: var(--sp-card-pad, 4px 8px); }

/* ══════════════════════════════════════
   Buttons
   ══════════════════════════════════════ */

.eb-btn {
  display: inline-flex; align-items: center; gap: var(--sp-gap, 5px);
  background: linear-gradient(180deg, rgba(197,139,58,.12) 0%, rgba(197,139,58,.06) 100%);
  border: 1px solid rgba(197,139,58,.28);
  border-radius: var(--forge-radius, 2px);
  color: var(--text-body, var(--text-body));
  font-family: inherit; font-size: 11px;
  padding: var(--sp-space, 5px 12px); cursor: pointer;
  transition: background .15s, border-color .15s, transform .08s;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(197,139,58,.10),
    inset 0 -1px 0 rgba(0,0,0,.25),
    0 1px 3px rgba(0,0,0,.30);
}
.eb-btn .material-symbols-outlined { font-size: 14px; }
.eb-btn:hover {
  background: linear-gradient(180deg, rgba(197,139,58,.22) 0%, rgba(197,139,58,.12) 100%);
  border-color: rgba(197,139,58,.50);
  box-shadow:
    inset 0 1px 0 rgba(197,139,58,.18),
    0 0 8px rgba(197,139,58,.14),
    0 1px 3px rgba(0,0,0,.30);
}
.eb-btn:active { transform: scale(0.97); }

.eb-btn--warn {
  background: var(--danger-bg, rgba(163,71,27,.15));
  border-color: var(--danger-border, rgba(163,71,27,.50));
  color: var(--danger-text, var(--log-error));
}
.eb-btn--warn:hover {
  background: rgba(163,71,27,.25);
  border-color: var(--accent-ember, var(--log-error));
}

.eb-btn--sim {
  background: rgba(86,163,166,.12);
  border-color: rgba(86,163,166,.28);
  color: var(--success, var(--success));
}
.eb-btn--sim:hover { background: rgba(86,163,166,.22); border-color: var(--success, var(--success)); }
.eb-btn--sim.is-active { background: rgba(86,163,166,.20); border-color: var(--success, var(--success)); }

.eb-btn--accent {
  background: rgba(197,139,58,.18);
  border-color: rgba(197,139,58,.50);
  color: var(--text-bright, var(--text-bright));
  font-weight: 600;
}
.eb-btn--accent:hover { background: rgba(197,139,58,.30); }

/* Inject button — новий стиль console */
.eb-btn--inject {
  display: inline-flex; align-items: center; gap: var(--sp-gap, 7px);
  background: linear-gradient(180deg, rgba(197,139,58,.16) 0%, rgba(197,139,58,.08) 100%);
  border: 1px solid rgba(197,139,58,.45);
  border-radius: var(--forge-radius, 2px);
  color: var(--accent-brass, var(--accent-brass));
  font-family: 'Oswald', var(--font-ui, sans-serif);
  font-size: 12px; font-weight: 600;
  letter-spacing: .10em; text-transform: uppercase;
  padding: var(--sp-space, 9px 24px); cursor: pointer;
  box-shadow: var(--forge-bevel,
    inset 0 1px 0 rgba(197,139,58,.14),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 2px 6px rgba(0,0,0,.35));
  transition: background .15s, box-shadow .15s, transform .08s;
}
.eb-btn--inject .material-symbols-outlined { font-size: 16px; }
.eb-btn--inject:hover {
  background: linear-gradient(180deg, rgba(197,139,58,.26) 0%, rgba(197,139,58,.14) 100%);
  box-shadow: var(--forge-bevel,
    inset 0 1px 0 rgba(197,139,58,.20),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 2px 10px rgba(197,139,58,.18));
}
.eb-btn--inject:active { transform: scale(0.97); }

/* Small icon buttons */
.eb-btn-sm {
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.30);
  border: 1px solid var(--eb-border);
  border-radius: var(--forge-radius, 2px);
  color: var(--eb-muted);
  font-size: 11px; padding: var(--sp-card-pad, 5px 7px); cursor: pointer;
  transition: background .15s, color .15s, transform .08s;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.4);
}
.eb-btn-sm .material-symbols-outlined { font-size: 15px; }
.eb-btn-sm:hover { background: rgba(197,139,58,.10); color: var(--eb-text); border-color: var(--eb-border-hi); }
.eb-btn-sm:active { transform: scale(0.96); }
.eb-btn-sm.is-paused { color: var(--warning, var(--log-warn)); border-color: rgba(224,196,137,.35); }

/* ══════════════════════════════════════
   T2: Gauge Row — Instrument Panel
   Замінює стару .eb-pulse-strip
   ══════════════════════════════════════ */

.eb-gauge-row {
  display: flex;
  gap: var(--sp-space, 10px);
  padding: var(--sp-space, 16px 20px 14px);
  flex-wrap: wrap;
}

/* Forge gauge plate — кожна статистика */
.eb-gauge-plate {
  flex: 1;
  min-width: 120px;
  background: var(--bg-surface, var(--bg-surface));
  border: 1px solid var(--border-metal, var(--border-metal));
  border-radius: var(--forge-radius, 2px);
  padding: var(--sp-space, 12px 16px 10px);
  position: relative;
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,.50),
    inset 0 -1px 0 rgba(0,0,0,.30),
    0 2px 8px rgba(0,0,0,.35),
    0 1px 0 rgba(255,255,255,.02);
  overflow: hidden;
}

/* Steel top highlight */
.eb-gauge-plate::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: rgba(255,255,255,.06);
  pointer-events: none;
}

/* Brass accent at left edge */
.eb-gauge-plate::after {
  content: '';
  position: absolute; top: 10%; left: 0; bottom: 10%; width: 2px;
  background: linear-gradient(180deg, transparent, rgba(197,139,58,.30), transparent);
  pointer-events: none;
}

/* Industrial LED per gauge */
.eb-gauge-led {
  width: 8px; height: 8px; border-radius: 50%;
  margin-bottom: var(--sp-space, 9px);
  background: radial-gradient(circle at 35% 30%, var(--text-muted), var(--bg-elevated));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.7);
  transition: background .4s, box-shadow .4s;
}
.eb-gauge-led.is-ok {
  background: var(--success);
  box-shadow: 0 0 5px rgba(76,175,80,.50), inset 0 1px 2px rgba(0,0,0,.25);
  animation: status-forge-ok 3s ease-in-out infinite;
}
.eb-gauge-led.is-warn {
  background: var(--accent-ember, var(--log-error));
  box-shadow: 0 0 5px rgba(227,111,61,.45), inset 0 1px 2px rgba(0,0,0,.25);
}
.eb-gauge-led.is-err {
  background: var(--danger-text, var(--log-error));
  box-shadow: 0 0 6px rgba(193,68,24,.55), inset 0 1px 2px rgba(0,0,0,.25);
  animation: forge-pulse 2s ease-in-out infinite;
}

/* Large forge value */
.eb-gauge-value {
  font-family: 'IBM Plex Mono', var(--font-mono, monospace);
  font-size: 28px; font-weight: 400;
  color: var(--accent-brass, var(--accent-brass));
  line-height: 1; margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
  transition: color .3s;
}
.eb-gauge-value.is-counting {
  animation: eb-countflash .35s ease-out;
}
.eb-gauge-value--err  { color: var(--danger-text, var(--log-error)); }
.eb-gauge-value--sub  { color: var(--text-primary, var(--text-body)); }
.eb-gauge-value--ok   { color: var(--success, var(--success)); }
.eb-gauge-value--anom { color: var(--warning, var(--log-warn)); }

/* HUD meter bar */
.eb-gauge-meter {
  height: 3px;
  background: rgba(0,0,0,.45);
  border-radius: var(--radius-ui, 1px);
  margin-bottom: var(--sp-space, 7px);
  overflow: hidden;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.4);
}
.eb-gauge-meter-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--accent-brass, var(--accent-brass)), rgba(197,139,58,.70));
  border-radius: var(--radius-ui, 1px);
  transition: width .6s ease;
  transform-origin: left;
}
.eb-gauge-meter-fill--err  { background: linear-gradient(90deg, var(--danger-text, var(--log-error)), rgba(163,71,27,.70)); }
.eb-gauge-meter-fill--ok   { background: linear-gradient(90deg, var(--success, var(--success)), rgba(86,163,166,.70)); }
.eb-gauge-meter-fill--anom { background: linear-gradient(90deg, var(--warning, var(--log-warn)), rgba(224,196,137,.70)); }

/* Gauge label */
.eb-gauge-label {
  font-family: 'Oswald', var(--font-ui, sans-serif);
  font-size: 8px; font-weight: 600;
  color: var(--text-muted, var(--text-muted));
  letter-spacing: .14em; text-transform: uppercase;
}

/* Anomaly strip (повна ширина, після gauge row) */
.eb-anomaly-strip {
  padding: var(--sp-card-pad, 0 20px 14px);
}
.eb-anomaly-banner {
  background: rgba(224,196,137,.07);
  border: 1px solid rgba(224,196,137,.20);
  border-left: 3px solid var(--warning, var(--log-warn));
  border-radius: var(--forge-radius, 2px);
  padding: var(--sp-space, 9px 14px);
  display: flex; flex-direction: column; gap: var(--sp-gap, 5px);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.30);
}
.eb-anomaly-row {
  font-size: 11px; color: var(--warning, var(--log-warn));
  display: flex; align-items: center; gap: var(--sp-gap, 6px);
}
.eb-anomaly-row .material-symbols-outlined { font-size: 14px; animation: eb-warn-pulse 1.5s ease-in-out infinite; }
.eb-anomaly-actions { display: inline-flex; gap: var(--sp-gap, 5px); margin-left: 6px; }
.eb-anomaly-btn {
  background: rgba(224,196,137,.08);
  border: 1px solid rgba(224,196,137,.22);
  border-radius: var(--forge-radius, 2px);
  color: var(--warning, var(--log-warn));
  font-family: inherit; font-size: 10px;
  padding: var(--sp-space, 2px 7px); cursor: pointer;
  transition: background .15s, transform .08s;
}
.eb-anomaly-btn:hover { background: rgba(224,196,137,.18); }
.eb-anomaly-btn:active { transform: scale(0.96); }

/* Legacy compat: .eb-pulse-strip fallback у старих панелях */
.eb-pulse-strip {
  display: flex; align-items: center;
  background: transparent; border: none;
  padding: var(--sp-space, 14px 24px); position: relative; overflow: visible;
}
.eb-pulse-stat { display: flex; flex-direction: column; align-items: center; padding: var(--sp-card-pad, 4px 28px); min-width: 100px; }
.eb-pulse-divider { width: 1px; height: 36px; background: var(--eb-border); flex-shrink: 0; }
.eb-pulse-spacer { flex: 1; }
.eb-pulse-num {
  font-size: 28px; font-weight: 700; font-family: var(--font-mono);
  color: var(--accent-brass, var(--accent-brass)); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.eb-pulse-num.is-counting { animation: eb-countflash .35s ease-out; }
.eb-pulse-num--err  { color: var(--danger-text, var(--log-error)); }
.eb-pulse-num--sub  { color: var(--success, var(--success)); }
.eb-pulse-num--anom { color: var(--warning, var(--log-warn)); }
.eb-pulse-lbl {
  font-size: 9px; color: var(--eb-muted);
  margin-top: var(--sp-space, 4px); letter-spacing: .08em; text-transform: uppercase;
}

/* Quick stats strip */
.eb-quick-stats {
  display: flex; align-items: center; gap: 0;
  padding: var(--sp-space, 5px 20px);
  background: var(--bg-elevated, var(--bg-elevated));
  border-bottom: 1px solid var(--border-dim, var(--border-dim));
  font-size: 11px; color: var(--eb-muted);
  flex-wrap: wrap; min-height: 30px;
}
.eb-qs-item { display: flex; align-items: center; gap: 4px; white-space: nowrap; padding: var(--sp-card-pad, 0 8px); }
.eb-qs-sep  { color: var(--eb-border-hi); font-size: 10px; opacity: .5; }
.eb-qs-num  { font-weight: 600; font-variant-numeric: tabular-nums; }
.eb-qs-num--ok   { color: var(--success, var(--success)); }
.eb-qs-num--warn { color: var(--warning, var(--log-warn)); }
.eb-qs-num--err  { color: var(--danger-text, var(--log-error)); }
.eb-qs-num--dim  { color: var(--text-body, var(--text-body)); }

/* ══════════════════════════════════════
   Section Headers — Steel Forge
   ══════════════════════════════════════ */

.eb-section-header {
  display: flex; align-items: center; gap: var(--sp-gap, 10px);
  padding: var(--sp-space, 11px 18px 10px);
  background: linear-gradient(180deg, rgba(197,139,58,.09) 0%, rgba(197,139,58,.04) 100%);
  border-bottom: 1px solid rgba(197,139,58,.18);
  flex-wrap: wrap; position: relative;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.30);
}

/* Rivet pseudo-elements */
.eb-section-header::before,
.eb-section-header::after {
  content: '';
  flex-shrink: 0;
  width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--text-muted), var(--bg-elevated));
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.7);
  align-self: center;
}
.eb-section-header::after {
  margin-left: auto;
}

/* Title group: icon + text + count badge */
.eb-section-title-group {
  display: flex; align-items: center; gap: var(--sp-gap, 7px);
  flex-shrink: 0;
}
.eb-section-title-group .material-symbols-outlined {
  font-size: 17px;
  color: var(--accent-brass, var(--accent-brass)););
}
.eb-section-title-text {
  font-family: 'Oswald', var(--font-ui, sans-serif);
  font-size: 12px; font-weight: 600;
  color: var(--accent-brass, var(--accent-brass));
  letter-spacing: .08em; text-transform: uppercase;
}
.eb-section-count {
  background: rgba(197,139,58,.15);
  color: var(--text-body, var(--text-body));
  border-radius: var(--radius-ui, 4px);
  font-size: 10px; font-family: 'IBM Plex Mono', var(--font-mono);
}

/* Legacy title variant */
.eb-section-title {
  display: flex; align-items: center; gap: var(--sp-gap, 7px);
  font-family: 'Oswald', var(--font-ui, sans-serif);
  font-size: 12px; font-weight: 600;
  color: var(--accent-brass, var(--accent-brass));
  letter-spacing: .08em; text-transform: uppercase;
}
.eb-section-title .material-symbols-outlined {
  font-size: 17px; color: var(--accent-brass, var(--accent-brass)););
}
.eb-section-hint {
  font-size: 11px; color: var(--eb-muted);
}

/* Stream controls — pills + search + actions */
.eb-stream-controls {
  display: flex; align-items: center; gap: var(--sp-gap, 6px);
  flex-wrap: wrap; flex: 1; min-width: 0;
}
.eb-controls-right {
  display: flex; align-items: center; gap: var(--sp-gap, 6px);
  margin-left: auto; flex-wrap: nowrap;
}

/* Legacy controls */
.eb-timeline-controls {
  display: flex; align-items: center; gap: var(--sp-gap, 6px);
  flex-wrap: wrap; margin-left: auto;
}

/* ══════════════════════════════════════
   T3: Flow Map — Signal Routing Board
   ══════════════════════════════════════ */

.eb-flowmap-wrap {
  display: flex; gap: 0;
  align-items: stretch;
  border-top: 1px solid var(--border-dim, var(--border-dim));
}

.eb-flowmap-svg {
  flex: 1; min-height: 300px; max-height: 340px;
  width: 100%; display: block;
  background: var(--bg-void, var(--bg-void));
  border-right: 1px solid var(--border-dim, var(--border-dim));
  box-shadow: inset 0 2px 6px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.03);
}

/* Warm iron node fill — потрібно для JS-генерованих SVG елементів */
.fm-node-circle {
  cursor: pointer;
  transition: filter .2s;
}
.fm-node-circle:hover { filter: brightness(1.25); }

.fm-node-label {
  font-family: 'IBM Plex Mono', var(--font-mono, monospace);
  font-size: 10px; fill: var(--text-bright, var(--text-bright));
  text-anchor: middle; pointer-events: none; font-weight: 600;
}
.fm-node-count {
  font-family: 'IBM Plex Mono', var(--font-mono, monospace);
  font-size: 11px; fill: var(--text-bright, var(--text-bright));
  text-anchor: middle; pointer-events: none;
  font-weight: 600; opacity: .85;
}
.fm-node-count-label {
  font-family: 'IBM Plex Mono', var(--font-mono, monospace);
  font-size: 8px; fill: var(--text-muted, var(--text-muted));
  text-anchor: middle; pointer-events: none;
}

/* Signal edge lines */
.fm-edge {
  stroke-width: 1.5; fill: none; opacity: .28;
  stroke-dasharray: 6 4;
  transition: opacity .2s, stroke-width .2s;
  marker-end: url(#arrowhead);
}
.fm-edge.is-highlighted {
  opacity: .70; stroke-width: 2.5; stroke-dasharray: 8 4;
  animation: eb-dash-flow .8s linear infinite;
}
.fm-particle { r: 4; opacity: 0; }

/* Legend — forge pills */
.eb-flowmap-legend {
  width: 175px; flex-shrink: 0;
  padding: var(--sp-space, 12px 12px);
  display: flex; flex-direction: column; gap: 4px;
  overflow-y: auto;
}
.eb-fm-legend-title {
  font-family: 'Oswald', var(--font-ui); font-size: 9px; font-weight: 600;
  color: var(--text-muted); letter-spacing: .12em; text-transform: uppercase;
  padding: var(--sp-space, 2px 4px); margin-bottom: 4px;
}
.eb-fm-legend-item {
  display: flex; align-items: center; gap: var(--sp-gap, 7px);
  padding: var(--sp-space, 5px 8px);
  background: var(--bg-surface, var(--bg-surface));
  border: 1px solid var(--border-dim, var(--border-dim));
  border-radius: var(--forge-radius, 2px);
  cursor: pointer;
  transition: background .15s, border-color .15s;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.30);
}
.eb-fm-legend-item:hover {
  background: var(--bg-elevated, var(--bg-elevated));
  border-color: var(--border-metal, var(--border-metal));
}
.eb-fm-legend-item.is-selected {
  border-color: var(--mod-accent, var(--accent-brass, var(--accent-brass)));
  background: rgba(197,139,58,.07);
}
.eb-fm-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--mod-accent, var(--accent-brass, var(--accent-brass)));
  flex-shrink: 0;
  box-shadow: 0 0 4px var(--mod-accent, var(--accent-brass));
  border: 1px solid rgba(255,255,255,.10);
}
.eb-fm-dot.is-active { animation: status-forge-ok 3s ease-in-out infinite; }
.eb-fm-legend-name {
  font-size: 11px; color: var(--text-body, var(--text-body));
  font-family: 'Oswald', var(--font-ui); font-size: 10px;
  font-weight: 600; letter-spacing: .04em;
}
.eb-fm-legend-meta {
  font-size: 10px; color: var(--eb-muted);
  margin-left: auto; font-variant-numeric: tabular-nums;
  font-family: 'IBM Plex Mono', var(--font-mono);
}
.eb-fm-legend-meta::after { content: ' под.'; font-size: 8px; opacity: .6; }

/* ══════════════════════════════════════
   T4: Registry Accordion — Forge Logbook
   ══════════════════════════════════════ */

.eb-registry {
  margin: 0 16px;
  border: 1px solid var(--border-dim, var(--border-dim));
  border-radius: var(--forge-radius, 2px);
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.35);
}

/* Riveted forge header */
.eb-registry-header {
  display: flex; align-items: center; gap: 8px;
  padding: var(--sp-space, 10px 14px);
  background: linear-gradient(180deg, rgba(197,139,58,.10) 0%, rgba(197,139,58,.05) 100%);
  border-bottom: 1px solid rgba(197,139,58,.18);
  cursor: pointer; user-select: none;
  font-family: 'Oswald', var(--font-ui); font-size: 11px; font-weight: 600;
  color: var(--accent-brass, var(--accent-brass)); letter-spacing: .10em; text-transform: uppercase;
  transition: background .15s;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.30);
  position: relative;
}
/* Rivet pseudo-elements */
.eb-registry-header::before,
.eb-registry-header::after {
  content: '';
  flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--text-muted), var(--bg-elevated));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.7);
}
.eb-registry-header::after { margin-left: auto; }
.eb-registry-header:hover { background: linear-gradient(180deg, rgba(197,139,58,.16) 0%, rgba(197,139,58,.08) 100%); }
.eb-registry-header .material-symbols-outlined { font-size: 15px; color: var(--accent-brass); }

.eb-registry-count {
  background: rgba(197,139,58,.15);
  color: var(--text-body, var(--text-body));
  border-radius: var(--radius-ui, 4px);
  font-family: 'IBM Plex Mono', var(--font-mono);
  font-size: 10px;
}
.eb-registry-arrow {
  font-size: 15px !important; color: var(--text-muted) !important;
  transition: transform .20s; flex-shrink: 0;
}
.eb-registry-header.is-open .eb-registry-arrow { transform: rotate(180deg); }
.eb-registry-body { border-top: 1px solid var(--border-dim, var(--border-dim)); }

/* ── Table (реєстр) ── */
.eb-table-wrap { overflow-x: auto; }
.eb-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.eb-table thead { position: sticky; top: 0; z-index: 2; }
.eb-table thead tr {
  background: linear-gradient(180deg, var(--bg-elevated, var(--bg-elevated)) 0%, var(--bg-surface, var(--bg-surface)) 100%);
  border-bottom: 1px solid var(--border-metal, var(--border-metal));
}
.eb-table th {
  padding: var(--sp-space, 7px 12px); text-align: left;
  font-family: 'Oswald', var(--font-ui); font-size: 9px; font-weight: 600;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: .10em; white-space: nowrap;
}
.eb-table td {
  padding: var(--sp-space, 8px 12px);
  border-bottom: 1px solid var(--border-dim, var(--border-dim));
  vertical-align: middle;
}
.eb-row:last-child td { border-bottom: none; }
.eb-row:nth-child(even) td { background: rgba(197,139,58,.025); }
.eb-row:hover td { background: var(--bg-hover, var(--bg-hover)); }
.eb-row:hover td:first-child { box-shadow: inset 3px 0 0 var(--accent-brass, var(--accent-brass)); }
.eb-row:hover td { box-shadow: inset 0 0 0 1px rgba(197,139,58,.10); }

.eb-row--anomaly td { background: rgba(163,71,27,.08); }
.eb-row--anomaly:hover td { background: rgba(163,71,27,.14); }
.eb-row--anomaly:hover td:first-child { box-shadow: inset 3px 0 0 var(--danger-text, var(--log-error)); }
.eb-row--pulse td { animation: eb-row-pulse 1.5s ease-out forwards; }

/* Event code chip */
.eb-event-code {
  font-family: 'IBM Plex Mono', var(--font-mono, monospace);
  font-size: 11px; color: var(--accent-brass, var(--accent-brass));
  background: rgba(197,139,58,.10);
  padding: var(--sp-space, 2px 6px); border-radius: var(--forge-radius, 2px);
  border: 1px solid rgba(197,139,58,.15);
}

/* Module badges */
.eb-source, .eb-listener {
  display: inline-block; font-size: 10px;
  background: rgba(90,80,72,.25); color: var(--text-body, var(--text-body));
  border-radius: var(--forge-radius, 2px);
  padding: var(--sp-space, 2px 6px); white-space: nowrap;
  font-family: 'IBM Plex Mono', var(--font-mono); font-size: 9px;
  border: 1px solid rgba(90,80,72,.30);
}
.eb-listener { margin-right: 3px; }
.eb-source[data-module="Observer"],  .eb-listener[data-module="Observer"]   { color: var(--mod-observer);   background: rgba(122,158,90,.10);  border-color: rgba(122,158,90,.20); }
.eb-source[data-module="Publisher"], .eb-listener[data-module="Publisher"]  { color: var(--mod-publisher);  background: rgba(212,162,74,.10);  border-color: rgba(212,162,74,.20); }
.eb-source[data-module="Executor"],  .eb-listener[data-module="Executor"]   { color: var(--mod-executor);   background: rgba(184,84,52,.10);   border-color: rgba(184,84,52,.20); }
.eb-source[data-module="Applicant"], .eb-listener[data-module="Applicant"]  { color: var(--mod-applicant);  background: rgba(90,130,153,.10);  border-color: rgba(90,130,153,.20); }
.eb-source[data-module="Nexus"],     .eb-listener[data-module="Nexus"]      { color: var(--mod-nexus);      background: rgba(74,149,144,.10);  border-color: rgba(74,149,144,.20); }
.eb-source[data-module="Challenger"],.eb-listener[data-module="Challenger"] { color: var(--mod-challenger); background: rgba(200,106,28,.10);  border-color: rgba(200,106,28,.20); }
.eb-source[data-module="Paymaster"], .eb-listener[data-module="Paymaster"]  { color: var(--mod-paymaster);  background: rgba(45,74,107,.14);   border-color: rgba(45,74,107,.25); }
.eb-source--link:hover, .eb-listener--link:hover { filter: brightness(1.3); text-decoration: underline; }

.eb-num { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-body, var(--text-body)); }
.eb-num--error { color: var(--danger-text, var(--log-error)); font-weight: 600; }
.eb-none { color: var(--eb-muted); }

/* Status dots — industrial LEDs */
.eb-status {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  vertical-align: middle;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.5);
}
.eb-status--green  {
  background: var(--success, var(--success));
  box-shadow: 0 0 5px rgba(86,163,166,.45), inset 0 1px 2px rgba(0,0,0,.25);
  animation: status-forge-ok 3s ease-in-out infinite;
}
.eb-status--yellow {
  background: var(--warning, var(--log-warn));
  box-shadow: 0 0 5px rgba(224,196,137,.40), inset 0 1px 2px rgba(0,0,0,.25);
}
.eb-status--red {
  background: var(--danger-text, var(--log-error));
  box-shadow: 0 0 5px rgba(193,68,24,.55), inset 0 1px 2px rgba(0,0,0,.25);
  animation: eb-status-red-pulse 1.5s ease-in-out infinite;
}
.eb-status--grey {
  background: radial-gradient(circle at 35% 30%, var(--text-muted), var(--bg-elevated));
  border: 1px solid rgba(255,255,255,.08);
}
.eb-last-emit { font-size: 10px; color: var(--eb-muted); white-space: nowrap; font-family: 'IBM Plex Mono', var(--font-mono); }
.eb-empty { text-align: center; padding: var(--sp-card-pad, 28px); color: var(--eb-muted); font-size: 12px; }

/* Status Legend bar */
.eb-status-legend {
  display: flex; align-items: center; gap: var(--sp-gap, 14px);
  padding: var(--sp-space, 5px 18px);
  border-top: 1px solid var(--border-dim, var(--border-dim));
  background: var(--bg-elevated, var(--bg-elevated));
  font-size: 10px; color: var(--eb-muted); flex-wrap: wrap;
}
.eb-status-legend-label {
  font-family: 'Oswald', var(--font-ui); font-size: 9px;
  text-transform: uppercase; letter-spacing: .08em; opacity: .55; flex-shrink: 0;
}
.eb-sl-item { display: flex; align-items: center; gap: var(--sp-gap, 5px); white-space: nowrap; }

/* Module filter pills */
.eb-tl-pills { display: flex; gap: 4px; flex-wrap: wrap; }
.eb-tl-pill, .eb-mod-pill {
  background: rgba(0,0,0,.30);
  border: 1px solid var(--border-dim, var(--border-dim));
  border-radius: var(--forge-radius, 2px);
  color: var(--eb-muted);
  font-family: 'Oswald', var(--font-ui); font-size: 9px; letter-spacing: .06em;
  padding: var(--sp-space, 3px 10px); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .08s;
  white-space: nowrap;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
}
.eb-tl-pill:hover, .eb-mod-pill:hover { border-color: var(--border-metal, var(--border-metal)); color: var(--eb-text); }
.eb-tl-pill:active, .eb-mod-pill:active { transform: scale(0.96); }
.eb-tl-pill.is-active, .eb-mod-pill--active {
  background: color-mix(in srgb, var(--pill-accent, var(--accent-brass)) 15%, transparent);
  border-color: var(--pill-accent, var(--accent-brass));
  color: var(--pill-accent, var(--accent-brass));
  font-weight: 600;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.25);
}
.eb-tl-pill:not(.is-active):not([data-mod=""]) {
  color: color-mix(in srgb, var(--pill-accent, var(--eb-muted)) 55%, var(--eb-muted));
  border-color: color-mix(in srgb, var(--pill-accent, var(--border-dim)) 28%, var(--border-dim));
}

/* Search input */
.eb-tl-search {
  background: rgba(0,0,0,.35);
  border: 1px solid var(--border-dim, var(--border-dim));
  border-radius: var(--forge-radius, 2px);
  color: var(--text-bright, var(--text-bright));
  font-family: 'IBM Plex Mono', var(--font-mono, monospace);
  font-size: 11px; padding: var(--sp-card-pad, 4px 10px);
  outline: none; width: 140px;
  transition: border-color .15s, box-shadow .15s;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.45);
}
.eb-tl-search:focus {
  border-color: rgba(197,139,58,.55);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.45), 0 0 0 2px rgba(197,139,58,.10);
}
.eb-tl-search::placeholder { color: var(--text-dim, #4a3e30); }

/* Module filter bar */
.eb-module-filter {
  display: flex; gap: var(--sp-gap, 5px); flex-wrap: wrap;
  padding: var(--sp-space, 8px 14px);
  background: var(--bg-elevated, var(--bg-elevated));
  border-bottom: 1px solid var(--border-dim, var(--border-dim));
}

/* ══════════════════════════════════════
   T4 (cont): Signal Feed — Ticker
   ══════════════════════════════════════ */

.eb-feed {
  max-height: 520px;
  overflow-y: auto;
  padding: var(--sp-space, 10px 12px);
  font-family: 'IBM Plex Mono', var(--font-mono, monospace);
  font-size: 11px;
}
.eb-feed::-webkit-scrollbar { width: 3px; }
.eb-feed::-webkit-scrollbar-track { background: transparent; }
.eb-feed::-webkit-scrollbar-thumb {
  background: rgba(197,139,58,.22); border-radius: 2px;
  transition: background .15s;
}
.eb-feed:hover::-webkit-scrollbar-thumb { background: rgba(197,139,58,.45); }

/* Feed item — Telegraph Ticker card */
.eb-feed-item {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--sp-space, 9px 13px 9px 15px);
  margin-bottom: var(--sp-space, 4px);
  border-radius: var(--forge-radius, 2px);
  border: 1px solid var(--border-dim, var(--border-dim));
  border-left: 3px solid var(--signal-color, var(--border-metal, var(--border-metal)));
  background: linear-gradient(180deg, var(--bg-elevated, var(--bg-elevated)) 0%, rgba(31,24,18,.65) 100%);
  cursor: pointer;
  transition: background .15s, box-shadow .15s;
  position: relative;
  box-shadow:
    0 1px 4px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(197,139,58,.05);
}
/* Steel top highlight */
.eb-feed-item::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: rgba(255,255,255,.04); pointer-events: none;
}
.eb-feed-item:hover {
  background: linear-gradient(180deg, var(--bg-hover, var(--bg-hover)) 0%, rgba(42,32,24,.80) 100%);
  box-shadow:
    0 2px 8px rgba(0,0,0,.35),
    inset 0 0 20px rgba(var(--signal-rgb, 197,139,58), .05),
    inset 0 1px 0 rgba(197,139,58,.07);
}
.eb-feed-item--expanded {
  background: linear-gradient(180deg, var(--bg-hover, var(--bg-hover)) 0%, rgba(42,32,24,.90) 100%);
}

/* New item — from left, forge flash */
.eb-feed-item--new { animation: eb-signal-in .4s ease-out; }

.eb-feed-item--burst { border-left-color: var(--warning, var(--log-warn)) !important; }
.eb-feed-item--highlight {
  background: rgba(197,139,58,.09) !important;
  border-left-color: var(--accent-brass, var(--accent-brass)) !important;
  box-shadow: 0 0 12px rgba(197,139,58,.12);
}

/* Feed top row */
.eb-feed-top {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.eb-feed-time {
  color: var(--text-dim, #4a3e30); white-space: nowrap;
  font-size: 10px; min-width: 56px; flex-shrink: 0;
}
.eb-feed-icon {
  font-size: 15px;
  color: var(--signal-color, var(--accent-brass, var(--accent-brass)));
  flex-shrink: 0; opacity: .85;
}
.eb-feed-event-name {
  font-size: 12px; font-weight: 600;
  color: var(--signal-color, var(--accent-brass, var(--accent-brass)));
  white-space: nowrap;
}
.eb-feed-badges {
  display: flex; align-items: center; gap: 4px;
  flex-wrap: wrap; margin-left: auto;
}
.eb-feed-badge {
  display: inline-block; font-size: 10px;
  padding: var(--sp-space, 2px 6px); border-radius: var(--forge-radius, 2px);
  white-space: nowrap; font-weight: 600;
}
.eb-feed-arrow { color: var(--text-dim, #4a3e30); font-size: 10px; }
.eb-feed-payload-preview {
  color: var(--text-muted, var(--text-muted)); font-size: 10px;
  overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; padding-left: 2px; opacity: .85;
}
.eb-feed-payload-preview .eb-pv-key { color: var(--text-body, var(--text-body)); }
.eb-feed-payload-preview .eb-pv-val { color: var(--text-dim, #4a3e30); }

.eb-feed-count {
  background: rgba(197,139,58,.14);
  color: var(--text-body, var(--text-body));
  border-radius: var(--forge-radius, 2px); padding: var(--sp-card-pad, 1px 5px); font-size: 10px;
}
.eb-feed-burst {
  background: rgba(224,196,137,.13);
  color: var(--warning, var(--log-warn));
  border-radius: var(--radius-ui, 4px);
  font-size: 10px; font-weight: 700;
  animation: eb-burst-pulse 1s ease-in-out 3;
}

/* JSON payload */
.eb-feed-detail {
  margin-top: var(--sp-space, 6px); overflow: hidden;
  transition: max-height .25s ease;
}
.eb-feed-json {
  background: var(--bg-void, var(--bg-void));
  border: 1px solid rgba(197,139,58,.10);
  border-radius: var(--forge-radius, 2px);
  padding: var(--sp-space, 10px 14px);
  font-family: 'IBM Plex Mono', var(--font-mono, monospace);
  font-size: 11px; color: var(--text-dim, #4a3e30);
  white-space: pre-wrap; word-break: break-all;
  max-height: 260px; overflow-y: auto; line-height: 1.5;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.45);
}
.eb-json-key  { color: var(--text-body, var(--text-body)); }
.eb-json-str  { color: var(--mod-observer, #7a9e5a); }
.eb-json-num  { color: var(--mod-nexus, #4a9590); }
.eb-json-bool { color: var(--mod-challenger, #c86a1c); }
.eb-json-null { color: var(--text-dim, #4a3e30); }

/* Empty state */
.eb-feed-empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--sp-space, 10px); padding: var(--sp-card-pad, 40px);
  color: var(--eb-muted); font-size: 12px;
  font-family: 'Oswald', var(--font-ui);
  letter-spacing: .06em; text-transform: uppercase;
}
.eb-feed-empty-icon {
  font-size: 32px; color: var(--accent-brass, var(--accent-brass));
  opacity: .28; animation: eb-empty-pulse 2.5s ease-in-out infinite;
}

/* Inline simulate button */
.eb-row-sim-btn {
  display: none; align-items: center; gap: var(--sp-gap, 3px);
  background: rgba(86,163,166,.10);
  border: 1px solid rgba(86,163,166,.25);
  border-radius: var(--forge-radius, 2px);
  color: var(--success, var(--success)); font-size: 10px;
  padding: var(--sp-space, 2px 6px); cursor: pointer;
  white-space: nowrap; font-family: inherit;
  transition: background .15s; margin-left: 4px;
  vertical-align: middle;
}
.eb-row:hover .eb-row-sim-btn { display: inline-flex; }
.eb-row-sim-btn:hover { background: rgba(86,163,166,.22); }
.eb-row-sim-btn:active { transform: scale(0.95); }

/* ══════════════════════════════════════
   T5: Simulate Console — Signal Injector
   ══════════════════════════════════════ */

/* Console body — structured rows */
.eb-console-body {
  padding: var(--sp-space, 16px 20px 20px);
  display: flex; flex-direction: column; gap: 12px;
  border-top: 1px solid var(--border-dim, var(--border-dim));
  margin: 0 16px;
}
.eb-console-row { display: flex; flex-direction: column; gap: var(--sp-gap, 5px); }
.eb-console-label {
  font-family: 'Oswald', var(--font-ui, sans-serif);
  font-size: 8px; font-weight: 600;
  color: var(--text-muted, var(--text-muted));
  letter-spacing: .14em; text-transform: uppercase;
}
.eb-console-select { width: 100%; }
.eb-console-footer { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Simulate body (legacy) */
.eb-simulate-body {
  padding: var(--sp-space, 14px 18px 18px);
  display: flex; flex-direction: column; gap: 8px;
  border-top: 1px solid var(--border-dim, var(--border-dim));
  margin: 0 16px;
}
.eb-sim-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.eb-sim-select { flex: 1; min-width: 220px; }

/* Textarea — forge recessed well */
.eb-sim-textarea {
  background: rgba(0,0,0,.40);
  border: 1px solid var(--border-dim, var(--border-dim));
  border-radius: var(--forge-radius, 2px);
  color: var(--text-bright, var(--text-bright));
  font-family: 'IBM Plex Mono', var(--font-mono, monospace);
  font-size: 11px; padding: var(--sp-card-pad, 9px 12px);
  resize: vertical; min-height: 60px; width: 100%;
  transition: border-color .15s, box-shadow .15s;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.02);
}
.eb-sim-textarea:focus {
  outline: none;
  border-color: rgba(197,139,58,.50);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.55), 0 0 0 2px rgba(197,139,58,.10);
}

/* Simulate status */
.eb-sim-status { font-size: 11px; color: var(--eb-muted); font-family: 'IBM Plex Mono', var(--font-mono); }
.eb-sim-status--ok    { color: var(--success, var(--success)); }
.eb-sim-status--error { color: var(--danger-text, var(--log-error)); }

/* Simulate section legacy border */
.eb-simulate-section {
  background: transparent;
  border: none;
}

/* Simulate toggle button — активний */
#simulateToggleBtn.is-active {
  border-color: rgba(86,163,166,.60) !important;
  color: var(--success) !important;
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-base) 45%, var(--bg-void) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(232,200,140,.22),
    inset 0 -1px 0 rgba(0,0,0,.70),
    0 0 0 1px rgba(86,163,166,.45),
    0 0 8px rgba(86,163,166,.20),
    0 2px 5px rgba(0,0,0,.55) !important;
}

/* Pause button — активний */
#pauseBtn.is-paused {
  color: var(--log-warn) !important;
  border-color: rgba(224,196,137,.45) !important;
}

/* ══════════════════════════════════════
   Responsive
   ══════════════════════════════════════ */

@media (max-width: 900px) {
  .eb-flowmap-legend { display: none; }
  .eb-flowmap-svg    { max-height: 260px; }
  .eb-gauge-plate    { min-width: 90px; }
  .eb-gauge-value    { font-size: 22px; }
  .eb-feed-item      { padding: var(--sp-card-pad, 7px 10px 7px 13px); margin-bottom: 3px; }
  .dev-tools-scope.al-page .al-module-panel .eb-pulse-stat { padding: var(--sp-card-pad, 4px 16px); min-width: 70px; }
  .dev-tools-scope.al-page .eb-module--stream .eb-registry  { margin: 0 8px; }
  .dev-tools-scope.al-page .eb-module--simulate .eb-simulate-body { margin: 0 8px; }
  .dev-tools-scope.al-page .eb-console-body { margin: 0 8px; }
}

@media (max-width: 640px) {
  .eb-gauge-row    { gap: var(--sp-gap, 6px); padding: var(--sp-card-pad, 12px 12px 10px); }
  .eb-gauge-plate  { min-width: 80px; padding: var(--sp-card-pad, 10px 12px 8px); }
  .eb-gauge-value  { font-size: 20px; }
  .eb-tl-pills     { display: none; }
  .eb-tl-search    { width: 100px; }
  .eb-table th:nth-child(3),
  .eb-table td:nth-child(3) { display: none; }
  .eb-feed-badges  { flex-wrap: nowrap; overflow: hidden; }
  .eb-feed-item    { padding: var(--sp-card-pad, 6px 8px 6px 11px); }
}

/* ═══════════════════════════════════════════════════════════════════
   Module Panel Integration v6.0
   Контекстні overrides всередині al-module-panel оболонок
   ═══════════════════════════════════════════════════════════════════ */

/* Pulse strip і gauge row у module-panel */
.dev-tools-scope.al-page .al-module-panel .eb-pulse-strip {
  background: transparent !important;
  border: none !important; border-radius: 0 !important;
  box-shadow: none !important;
  padding: var(--sp-space, 14px 24px); position: relative; overflow: visible;
}
.dev-tools-scope.al-page .al-module-panel .eb-pulse-strip::before,
.dev-tools-scope.al-page .al-module-panel .eb-pulse-strip::after { content: none !important; }

/* Flow map у panel */
.dev-tools-scope.al-page .eb-module--flowmap .eb-flowmap-wrap {
  border-top: 1px solid var(--border-dim, var(--border-dim));
}

/* Stream module */
.dev-tools-scope.al-page .eb-module--stream .eb-registry {
  margin: 0 16px;
  border: 1px solid var(--border-dim, var(--border-dim));
}
.dev-tools-scope.al-page .eb-module--stream .eb-feed {
  padding: var(--sp-space, 8px 12px);
}
.dev-tools-scope.al-page .eb-module--stream .eb-status-legend {
  margin: 0;
}
.dev-tools-scope.al-page .eb-module--stream .eb-timeline-controls {
  margin-left: auto;
  margin-right: var(--sp-space, 8px);
}

/* Section header у panel — без власного margin, без подвійного декору */
.dev-tools-scope.al-page .al-module-panel .eb-section-header {
  margin: 0;
  background: transparent !important;
  border-bottom: 1px solid rgba(92, 68, 48, 0.22) !important;
  padding: var(--sp-space, 6px 14px !important);
  box-shadow: none !important;
}
.dev-tools-scope.al-page .al-module-panel .eb-section-header::before,
.dev-tools-scope.al-page .al-module-panel .eb-section-header::after {
  content: none !important;
}

/* Block 2/3/4 header — hint ліворуч від plate (дзеркально titulу) */
.dev-tools-scope.al-page .al-module-panel .eb-section-header .eb-section-title,
.dev-tools-scope.al-page .al-module-panel .eb-section-header .eb-section-title-group {
  order: 0 !important;
  flex-shrink: 0 !important;
}
.dev-tools-scope.al-page .al-module-panel .eb-section-header .eb-section-hint {
  order: 1 !important;
  margin-left: auto !important;
  margin-right: var(--sp-space, 8px !important);
  text-align: right !important;
  font-size: 11px !important;
  color: var(--text-muted) !important;
  flex-shrink: 1 !important;
}
.dev-tools-scope.al-page .al-module-panel .eb-section-header .al-module-plate {
  order: 2 !important;
  margin-left: 0 !important;
  flex-shrink: 0 !important;
}
/* stream controls (block 03) — між title і hint/plate */
.dev-tools-scope.al-page .al-module-panel .eb-section-header .eb-stream-controls {
  order: 1 !important;
}

/* Block 1 header — hint і plate разом справа, hint ліворуч від plate */
.dev-tools-scope.al-page .al-module-panel .al-mc-row--header .al-mc-header-right {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: var(--sp-space, 8px !important);
  flex-shrink: 0 !important;
  grid-column: 3 !important;
  justify-self: end !important;
}
.dev-tools-scope.al-page .al-module-panel .al-mc-row--header .al-b1-hint {
  display: flex !important;
  align-items: center !important;
  gap: var(--sp-space, 4px !important);
  font-size: 11px !important;
  color: var(--text-muted, var(--text-muted)) !important;
  letter-spacing: 0.03em !important;
  white-space: nowrap !important;
}
.dev-tools-scope.al-page .al-module-panel .al-mc-row--header .al-b1-hint .material-symbols-outlined {
  font-size: 13px !important;
  color: var(--accent-brass-dim, #8a5a22) !important;
}

/* Block 1 gauges — рівномірний розподіл без великих порожніх зон */
.dev-tools-scope .al-module-panel .eb-gauge-row {
  padding: var(--sp-space, 12px 14px 10px !important);
  gap: var(--sp-space, 8px !important);
  flex-wrap: nowrap;
}
.dev-tools-scope .al-module-panel .eb-gauge-plate {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  padding: var(--sp-space, 10px 12px 8px !important);
}
@media (max-width: 780px) {
  .dev-tools-scope .al-module-panel .eb-gauge-row {
    flex-wrap: wrap;
  }
  .dev-tools-scope .al-module-panel .eb-gauge-plate {
    flex: 1 1 calc(50% - 8px) !important;
  }
}

/* Max-width для всіх панелей */
.dev-tools-scope.al-page.eb-body .al-module-panel,
.dev-tools-scope.al-page.eb-body .al-pipe-section {
  max-width: var(--max-content, 1400px);
  margin-left: auto;
  margin-right: auto;
}

/* Last update label */
.eb-last-update {
  font-size: 11px; font-family: 'IBM Plex Mono', var(--font-mono);
  color: var(--text-muted); white-space: nowrap; opacity: .6;
}

/* ══════════════════════════════════════════════════════════
   БАЛКА — Fixed override (щоб header/back-panel/clock тримались разом)
   ══════════════════════════════════════════════════════════ */

/* Хедер фіксований (не sticky) — тримається з back-panel і clock-panel */
.dev-tools-scope.al-page.eb-body .devtools-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 500 !important;
}

/* Side-panels (back, clock, refresh) мають бути ПОНАД фіксованим header'ом.
   Без цього z-index їх перекриває .devtools-header (z:500) і панелі ховаються. */
.dev-tools-scope.al-page.eb-body .al-clock-panel { z-index: 501 !important; }
.dev-tools-scope.al-page.eb-body .al-back-panel  { z-index: 501 !important; }

/* Перша pipe-section (балка → блок 1) отримує margin щоб контент не ховався під фіксованим хедером */
.dev-tools-scope.al-page.eb-body .al-pipe-section--beam-to-b1 {
  margin-top: calc(var(--header-h, 96px) + 8px) !important;
}

/* ══════════════════════════════════════════════════════════
   Годинник tooltip — зменшити вдвічі при hover
   ══════════════════════════════════════════════════════════ */

.dev-tools-scope.al-page.eb-body .al-clock-panel .al-clock-tooltip {
  font-size: 9px !important;
  padding: var(--sp-space, 5px 10px !important);
  line-height: 1.5 !important;
  min-width: unset !important;
  max-width: 200px !important;
}
.dev-tools-scope.al-page.eb-body .al-clock-panel .al-clock-tooltip .clock-date-label,
.dev-tools-scope.al-page.eb-body .al-clock-panel .al-clock-tooltip .data-value {
  font-size: 9px !important;
}

/* === K. Atmosphere === */
/* Vignette overlay */
body.dev-tools-scope.eb-body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.25) 80%, rgba(0,0,0,0.40) 100%);
}

/* Blueprint grid scan-line */
.eb-scan-line {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9997;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 1px,
    rgba(0,0,0,0.04) 1px,
    rgba(0,0,0,0.04) 2px
  );
  animation: eb-scan-move 8s linear infinite;
}
@keyframes eb-scan-move {
  from { background-position: 0 0; }
  to { background-position: 0 100vh; }
}


/* === I. Animation — Reduced Motion === */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .eb-scan-line {
    animation: none !important;
  }
}

/* Blueprint grid — 32×32 atmospheric texture */
.eb-blueprint-grid {
  background:
    linear-gradient(rgba(197,139,58,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(197,139,58,0.03) 1px, transparent 1px);
  background-size: 32px 32px;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* CONSISTENCY 2026-05-13 — Dev Tools cross-page normalization       */
/* (per DevTools-Facts-Scan-2026-05-13.md)                            */
/* ═══════════════════════════════════════════════════════════════════ */

/* A. body.overflow-x — уніфіковано до clip (було visible/hidden mix) */
body.devtools-body { overflow-x: clip !important; }

/* B. .al-bg-scene fixed — fallback якщо локальний CSS не задає */
.dev-tools-scope .al-bg-scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}