/* =========================================== */
/*=   MODULE MANAGER STYLES v4.0             */
/*=   Менеджер модулів бота                 */
/*=   AAA-refactor: tokens/a11y/perf         */
/* =========================================== */

.dev-tools-scope {
  /* ── Акцентні кольори модулів → SSOT steampunk palette ── */
  --mod-obs:      var(--mod-observer,   #7a9e5a);
  --mod-pub:      var(--mod-publisher,  #d4a24a);
  --mod-exc:      var(--mod-executor,   #b85434);
  --mod-apl:      var(--mod-applicant,  #5a8299);
  --mod-nex:      var(--mod-nexus,      #4a9590);
  --mod-cha:      var(--mod-challenger, #c86a1c);
  --mod-pay:      var(--mod-paymaster,  #2d4a6b);
  /* --mod-devtools визначено в dev-tools-base.css (.dev-tools-scope SSOT) */

  /* ── Статусні кольори → SSOT bridge ── */
  --status-active: var(--success);
  --status-error:  var(--danger);
  --status-warn:   var(--warning);
  --cyan:          var(--accent-brass, var(--accent-brass));

  /* ── UI палітра → SSOT bridge ── */
  --bg-page:    var(--bg-void);
  --bg-card:    var(--bg-surface);
  /* FIX cc-682: видалено перевизначення --bg-surface: var(--bg-elevated) — темніший фон замість steampunk SSOT */
  --border:     var(--border-metal, rgba(255,255,255,0.08)); /* 🔧 cc-707: fallback якщо base.css не завантажено */
  --text-main:  var(--text-bright);
  --text-muted: var(--text-body);
  --text-dim:   var(--text-muted);
  --text-xdim:  rgba(160, 140, 100, 0.3);

  /* ── D3: design tokens → SSOT danger bridge ── */
  --mm-text-hard:     var(--text-muted,    #8a7a5a);
  --mm-text-hover:    var(--text-body,     #b8a880);
  --mm-color-danger:  var(--danger,        #c06060);
  --mm-danger-soft:   rgba(184, 84, 52, 0.08);
  --mm-danger-border: rgba(184, 84, 52, 0.28);
  --mm-danger-strong: rgba(184, 84, 52, 0.40);
  --mm-toggle-track:  var(--bg-void,       #0c0a06);

  /* D6: typography scale (5 tokens) */
  --mm-fs-xs: 9px;
  --mm-fs-sm: 10px;
  --mm-fs-md: 11px;
  --mm-fs-lg: 13px;
  --mm-fs-xl: 18px;

  /* D7: spacing scale (8-point grid) */
  --mm-sp-1: 4px;
  --mm-sp-2: 8px;
  --mm-sp-3: 12px;
  --mm-sp-4: 16px;
  --mm-sp-5: 24px;
  --mm-sp-6: 32px;

  /* D10: radius scale (4 values) */
  --mm-r-1: 4px;
  --mm-r-2: 6px;
  --mm-r-3: 8px;
  --mm-r-4: 12px;

  /* Mono font stack — повторюється скрізь */
  --mm-mono: 'JetBrains Mono', monospace;
}

/* ─── Page header area ──────────────────────── */

.mm-page-header {
  padding: var(--sp-space-3) var(--mm-sp-6) var(--sp-space-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  max-width: var(--max-content);
  margin: 0 auto;
}

.mm-page-subtitle {
  font-size: var(--mm-fs-md);
  color: var(--mm-text-hard);
  margin: 0;
  font-family: var(--font-dt-title, 'Cinzel', 'Oswald', serif);
  line-height: 1.5;
  letter-spacing: 0.02em;
}

/* P-10: timestamp останнього оновлення */
.mm-last-updated {
  font-size: var(--mm-fs-sm);
  font-family: var(--font-dt-title, 'Cinzel', 'Oswald', serif);
  color: var(--text-dim);
  white-space: nowrap;
  letter-spacing: 0.02em;
  opacity: 0.7;
}

.mm-refresh-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  margin-left: auto;
  padding: var(--sp-space-2) var(--sp-space-3);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: var(--mm-r-3);
  color: var(--text-muted);
  font-family: var(--font-dt-title, 'Cinzel', 'Oswald', serif);
  font-size: var(--mm-fs-md);
  cursor: pointer;
  /* D2: специфічні властивості замість all */
  transition: background-color 180ms ease-out, border-color 180ms ease-out, color 180ms ease-out;
  white-space: nowrap;
  /* Raised shadow */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.mm-refresh-btn:hover,
.mm-refresh-btn:focus-visible {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent);
  outline: none;
}

.mm-refresh-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--accent-border), 0 1px 4px rgba(0, 0, 0, 0.3);
}

.mm-refresh-btn .material-symbols-outlined {
  font-size: 15px;
}

.mm-refresh-btn.mm-refreshing .material-symbols-outlined {
  animation: mm-spin 0.8s linear infinite;
}

/* ─── Offline banner ─────────────────────────── */

.mm-offline-banner {
  display: none;
  align-items: center;
  gap: var(--sp-space-3);
  padding: var(--sp-space-3) var(--mm-sp-6);
  background: rgba(196, 151, 90, 0.08);
  border-bottom: 1px solid rgba(196, 151, 90, 0.15);
  font-family: var(--font-dt-title, 'Cinzel', 'Oswald', serif);
  font-size: var(--mm-fs-md);
  color: var(--status-warn);
  max-width: var(--max-content);
  margin: 0 auto;
}

.mm-offline-banner.mm-visible {
  display: flex;
}

.mm-offline-banner .material-symbols-outlined {
  font-size: 16px;
  flex-shrink: 0;
}

/* ─── Loading overlay ────────────────────────── */

.mm-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-space-4);
  padding: var(--mm-sp-6) var(--sp-space-5);
  color: var(--text-xdim);
  font-family: var(--font-dt-title, 'Cinzel', 'Oswald', serif);
  font-size: var(--mm-fs-lg);
  max-width: var(--max-content);
  margin: 0 auto;
}

.mm-loading.mm-hidden {
  display: none;
}

.mm-spinner-ring {
  width: 28px;
  height: 28px;
  border: 2px solid rgba(255, 255, 255, 0.06);
  border-top-color: var(--cyan);
  border-radius: 50%;
  animation: mm-spin 0.8s linear infinite;
}

/* F11: Skeleton loader */
.mm-skeleton-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-space-4);
  padding: var(--sp-space-5) var(--sp-space-5) var(--mm-sp-6);
  max-width: var(--max-content);
  margin: 0 auto;
}

.mm-skeleton-grid.mm-hidden {
  display: none;
}

.mm-skeleton-card {
  height: 120px;
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: var(--mm-r-4);
  position: relative;
  overflow: hidden;
}

.mm-skeleton-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
  animation: mm-shimmer 1.6s ease-in-out infinite;
}

@keyframes mm-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes mm-spin {
  to { transform: rotate(360deg); }
}

/* ─── Modules grid ───────────────────────────── */

.mm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-space-4);
  padding: var(--sp-space-5) var(--sp-space-5) var(--mm-sp-6);
  max-width: var(--max-content);
  margin: 0 auto;
}

.mm-grid.mm-hidden {
  display: none;
}

/* ─── Module card — D1 єдиний блок SSOT ─────── */

.mm-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: var(--mm-r-4);
  padding: var(--sp-space-4) var(--sp-space-5) var(--sp-space-4);
  /* D5: overflow visible — тіні не обрізаються */
  overflow: visible;
  /* D12: containment — перформанс при частих rerender */
  contain: layout style;
  /* D1: єдиний transition блок, специфічні властивості */
  transition:
    border-color 180ms ease-out,
    background-color 180ms ease-out,
    transform 120ms ease-out,
    box-shadow 180ms ease-out;
  /* Raised shadow (3-layer depth) */
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* D5: Accent bar через ::before замість HTML div */
.mm-card::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  border-radius: var(--mm-r-4) 0 0 var(--mm-r-4);
  background: var(--module-accent, var(--mod-devtools));
  opacity: 0.4;
  /* D8: shimmer gradient при hover */
  background-image: linear-gradient(180deg,
    var(--module-accent, var(--mod-devtools)) 0%,
    color-mix(in srgb, var(--module-accent, var(--mod-devtools)) 50%, white) 50%,
    var(--module-accent, var(--mod-devtools)) 100%);
  background-size: 100% 200%;
  background-position: 0 0;
  transition: opacity 180ms ease-out, background-position 900ms ease;
  pointer-events: none;
}

.mm-card:hover::before,
.mm-card:focus-within::before {
  opacity: 0.85;
  background-position: 0 100%;
}

/* P-12: hover тільки для звичайних карток — V4: per-module glow */
.mm-card:not(.mm-card--system):hover,
.mm-card:not(.mm-card--system):focus-within {
  border-color: color-mix(in srgb, var(--module-accent, var(--mod-devtools)) 35%, transparent);
  background: var(--bg-elevated, rgba(26, 25, 34, 0.95)); /* FIX cc-682: steampunk SSOT */
  transform: translateY(-2px);
  box-shadow:
    0 5px 16px rgba(0, 0, 0, 0.48),
    0 0 0 1px color-mix(in srgb, var(--module-accent, var(--mod-devtools)) 15%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.mm-card.mm-card--system:hover {
  border-color: rgba(255, 255, 255, 0.1);
  background: var(--bg-elevated, rgba(26, 25, 34, 0.95)); /* FIX cc-682: steampunk SSOT */
}

/* Per-module акценти */
.mm-card[data-module="system"]     { --module-accent: var(--cyan); }
.mm-card[data-module="observer"]   { --module-accent: var(--mod-obs); }
.mm-card[data-module="publisher"]  { --module-accent: var(--mod-pub); }
.mm-card[data-module="executor"]   { --module-accent: var(--mod-exc); }
.mm-card[data-module="applicant"]  { --module-accent: var(--mod-apl); }
.mm-card[data-module="nexus"]      { --module-accent: var(--mod-nex); }
.mm-card[data-module="challenger"] { --module-accent: var(--mod-cha); }
.mm-card[data-module="paymaster"]  { --module-accent: var(--mod-pay); }

/* D14: error-state — gradient accent з червоним хвостом */
.mm-card--error::before {
  background-image: linear-gradient(180deg,
    var(--module-accent, var(--mod-devtools)) 0%,
    var(--status-error) 80%,
    var(--status-error) 100%);
  opacity: 0.7;
}

/* ─── Card titlebar (full-width header zone) ─── */

.mm-card-titlebar {
  display: flex;
  align-items: center;
  gap: 6px;
  /* розтягнути до країв картки */
  margin: -12px -12px 14px;
  padding: 10px 10px;
  /* дуже ледь помітний натяк на колір модуля — не перехоплює увагу */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--module-accent, var(--accent-brass)) 7%, var(--bg-surface, #1c1a16)) 0%,
    color-mix(in srgb, var(--module-accent, var(--accent-brass)) 4%, var(--bg-void, #0d0907)) 100%);
  border-bottom: 1px solid color-mix(in srgb, var(--module-accent, var(--accent-brass)) 18%, transparent);
  box-shadow:
    0 2px 8px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.05);
  position: relative;
  border-radius: var(--mm-r-3, 4px) var(--mm-r-3, 4px) 0 0;
}

/* Декоративний роздільник-промінь між titlebar і body */
.mm-card-titlebar::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--module-accent, var(--accent-brass)) 45%, transparent) 35%,
    color-mix(in srgb, var(--module-accent, var(--accent-brass)) 60%, transparent) 50%,
    color-mix(in srgb, var(--module-accent, var(--accent-brass)) 45%, transparent) 65%,
    transparent 100%);
  z-index: 2;
}

/* Ліво: num/plate контейнер */
.mm-tb-num {
  flex-shrink: 0;
  min-width: 42px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* Центр: plate */
.mm-tb-center {
  flex: 1;
  display: flex;
  justify-content: center;
  min-width: 0;
}

/* Право: lamp */
.mm-tb-lamp {
  flex-shrink: 0;
  min-width: 42px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* ─── Card header (legacy, not used in titlebar) ─── */

.mm-card-header {
  display: flex;
  justify-content: center;
  margin-bottom: var(--sp-space-2);
}

.mm-card-icon {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
  color: var(--module-accent, var(--mod-devtools));
  opacity: 0.90;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.85));
  transition: opacity 0.15s ease, filter 0.15s ease;
}
.mm-card:hover .mm-card-icon {
  opacity: 1;
}

.mm-card-name {
  font-size: 15px;
  font-weight: 600;
  color: color-mix(in srgb, var(--module-accent, var(--text-main)) 75%, var(--text-body));
  font-family: var(--font-dt-title, 'Cinzel', 'Oswald', serif);
  letter-spacing: 0.01em;
  min-width: 0;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9), 0 0 10px rgba(0,0,0,0.6);
}

/* ─── Steampunk nameplate (icon + module name frame) ─── */

.mm-header-plate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-space-2);
  position: relative;
  width: fit-content;
  max-width: 90%;
  padding: 4px 14px 5px 12px;
  /* злегка темніший ніж titlebar, але светліший за body — утворює чітку ієрархію */
  background: color-mix(in srgb, var(--module-accent, var(--accent-brass)) 12%, var(--bg-void, #0d0907));
  border: 1px solid color-mix(in srgb, var(--module-accent, var(--accent-brass)) 35%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.30),
    0 1px 4px rgba(0,0,0,0.5);
  border-radius: 2px;
}

.mm-hp-bolt {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--sp-brass-light, #E8D07A), var(--sp-brass, #A38629) 50%, var(--sp-brass-mid, #7A6320) 80%, var(--sp-copper-dark, #6B5118));
  border: 1px solid var(--sp-copper-dark, #6B5118);
  box-shadow: inset 0 1px 2px rgba(232,208,122,0.3), 0 1px 3px rgba(0,0,0,0.5);
  z-index: 5;
}
.mm-hp-bolt::after {
  content: '+';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 7px;
  font-weight: 900;
  color: var(--sp-copper-dark, #6B5118);
  line-height: 1;
  pointer-events: none;
}
.mm-hp-bolt--tl { top: -4px; left: -4px; }
.mm-hp-bolt--tr { top: -4px; right: -4px; }
.mm-hp-bolt--bl { bottom: -4px; left: -4px; }
.mm-hp-bolt--br { bottom: -4px; right: -4px; }

/* Кольоровий тег номера модуля */
.mm-card-num {
  display: inline-block;
  font-size: var(--mm-fs-sm);
  font-family: var(--font-dt-title, 'Cinzel', 'Oswald', serif);
  padding: var(--sp-space, 1px 7px);
  border-radius: var(--mm-r-1);
  letter-spacing: 0.04em;
  border: 1px solid;
  color: var(--module-accent, var(--mod-devtools));
  background: color-mix(in srgb, var(--module-accent, var(--mod-devtools)) 8%, transparent);
  border-color: color-mix(in srgb, var(--module-accent, var(--mod-devtools)) 25%, transparent);
  flex-shrink: 0;
}

/* ─── Toggle switch ──────────────────────────── */

.mm-toggle-wrap {
  position: relative;
  flex-shrink: 0;
  margin-left: auto;
}

.mm-toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.mm-toggle-track {
  display: block;
  width: 36px;
  height: 20px;
  background: var(--mm-toggle-track);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-ui, 4px);
  cursor: pointer;
  transition: background-color 180ms ease-out, border-color 180ms ease-out;
  position: relative;
}

.mm-toggle-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--text-dim);
  /* V5: spring overshoot при включенні */
  transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1), background-color 180ms ease-out;
}

.mm-toggle-input:checked + .mm-toggle-track {
  background: rgba(94, 168, 138, 0.15);
  border-color: rgba(94, 168, 138, 0.35);
}

.mm-toggle-input:checked + .mm-toggle-track::after {
  transform: translateX(16px);
  background: var(--status-active);
}

.mm-toggle-track:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

/* F3: focus-visible на toggle */
.mm-toggle-input:focus-visible + .mm-toggle-track {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-border);
}

/* System card — toggle вимкнений */
.mm-card--system .mm-toggle-track {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* P-05: CC картка не розтягується по висоті */
.mm-card--system {
  align-self: start;
}

/* P-06: disabled toggle для системного модуля */
.mm-toggle-wrap--disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* ─── Card description ───────────────────────── */

.mm-card-desc {
  font-size: var(--mm-fs-md);
  color: var(--mm-text-hard);
  font-family: var(--font-dt-title, 'Cinzel', 'Oswald', serif);
  line-height: 1.5;
  margin-bottom: var(--sp-space-3);
  transition: color 180ms ease-out;
}

.mm-card:hover .mm-card-desc,
.mm-card:focus-within .mm-card-desc {
  color: var(--mm-text-hover);
}

/* ─── Ukrainian subtitle under module name ────── */

.mm-card-ua-name {
  font-size: var(--mm-fs-sm);
  font-family: var(--font-dt-title, 'Cinzel', 'Oswald', serif);
  color: var(--text-xdim);
  margin-top: 2px;
  letter-spacing: 0.02em;
}

/* ─── Status row ─────────────────────────────── */

.mm-card-status-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-space-1);
  margin-bottom: var(--sp-space-2);
}

.mm-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.75), inset 0 -1px 1px rgba(255,255,255,0.04);
  background: radial-gradient(circle at 35% 30%, var(--sp-steel, #6A6A6A), var(--sp-steel-dark, #3A3A3A));
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.mm-status-dot--active {
  background: radial-gradient(circle at 35% 30%, var(--success-light, #a8d4a0), var(--status-active, #5ea88a), var(--success-dark, #2a5040));
  border-color: rgba(94,168,138,0.25);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.6), 0 0 4px rgba(94,168,138,0.35);
  animation: mm-forge-breathe 3s ease-in-out infinite;
}

.mm-status-dot--disabled {
  background: radial-gradient(circle at 35% 30%, var(--sp-copper-mid, #3a3228), var(--bg-elevated, #2a2018));
  border-color: rgba(255,255,255,0.06);
}

.mm-status-dot--error {
  background: radial-gradient(circle at 35% 30%, var(--log-error-light, #e08080), var(--status-error, #c06060), var(--log-error-dark, #5a2020));
  border-color: rgba(192,96,96,0.25);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.6), 0 0 4px rgba(192,96,96,0.35);
}

.mm-status-dot--loading,
.mm-status-dot--offline {
  background: radial-gradient(circle at 35% 30%, var(--log-warn-light, #e8c87a), var(--status-warn, #c4975a), var(--sp-copper-dark, #4a3010));
  border-color: rgba(196,151,90,0.25);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.6), 0 0 4px rgba(196,151,90,0.35);
  animation: mm-forge-breathe 2.5s ease-in-out infinite;
}

@keyframes mm-forge-breathe {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.60; }
}

@media (prefers-reduced-motion: reduce) {
  .mm-status-dot { animation: none !important; }
}

.mm-status-label {
  font-size: var(--mm-fs-md);
  font-family: var(--font-dt-title, 'Cinzel', 'Oswald', serif);
  color: var(--text-dim);
}

.mm-status-label--active   { color: var(--status-active); }
.mm-status-label--disabled { color: var(--mm-text-hard); }
.mm-status-label--error    { color: var(--status-error); }
.mm-status-label--loading  { color: var(--status-warn); }
.mm-status-label--offline  { color: var(--status-warn); }

/* WIP badge */
.mm-badge-wip {
  margin-left: auto;
  padding: 2px var(--sp-space-2);
  font-size: var(--mm-fs-xs);
  font-family: var(--font-dt-title, 'Cinzel', 'Oswald', serif);
  background: rgba(196, 151, 90, 0.12);
  border: 1px solid rgba(196, 151, 90, 0.2);
  border-radius: var(--mm-r-3);
  color: var(--status-warn);
  white-space: nowrap;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space, 3px);
}

/* ─── Card meta ──────────────────────────────── */

.mm-card-meta {
  font-size: var(--mm-fs-sm);
  color: var(--mm-text-hard);
  font-family: var(--font-dt-title, 'Cinzel', 'Oswald', serif);
  margin-bottom: var(--sp-space-2);
  line-height: 1.7;
}

.mm-card-meta span {
  display: block;
}

/* ─── Card actions ───────────────────────────── */

.mm-card-actions {
  display: flex;
  gap: var(--sp-space-2);
  flex-wrap: wrap;
}

.mm-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 5px);
  padding: var(--sp-space-2) var(--sp-space-3);
  font-size: var(--mm-fs-sm);
  font-family: var(--font-dt-title, 'Cinzel', 'Oswald', serif);
  border-radius: var(--mm-r-2);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-dim);
  cursor: pointer;
  /* D2: специфічні transitions */
  transition: background-color 180ms ease-out, border-color 180ms ease-out, color 180ms ease-out;
  white-space: nowrap;
}

.mm-btn:hover,
.mm-btn:focus-visible {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-main);
  border-color: rgba(255, 255, 255, 0.12);
  outline: none;
}

.mm-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--accent-border);
}

/* D11: в disabled-state картках кнопки не реагують на hover */
.mm-card--disabled-state .mm-btn:hover {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-dim);
  border-color: var(--border);
}

.mm-btn .material-symbols-outlined {
  font-size: var(--mm-fs-lg);
}

.mm-btn--restart {
  border-color: var(--mm-danger-border);
  color: var(--mm-color-danger);
}

.mm-btn--restart:hover,
.mm-btn--restart:focus-visible {
  background: var(--mm-danger-soft);
  border-color: var(--mm-danger-strong);
  color: var(--mm-color-danger);
}

.mm-btn--restart .mm-btn-spinner {
  display: none;
  width: 10px;
  height: 10px;
  border: 1.5px solid rgba(192, 96, 96, 0.3);
  border-top-color: var(--mm-color-danger);
  border-radius: 50%;
  animation: mm-spin 0.7s linear infinite;
}

.mm-btn--restart.mm-restarting,
.mm-btn.mm-btn--busy {
  opacity: 0.7;
  pointer-events: none;
}

.mm-btn--restart.mm-restarting .mm-btn-spinner {
  display: inline-block;
}

.mm-btn--restart.mm-restarting .mm-btn-text {
  display: none;
}

/* В4: "Переглянути логи" — вторинна кнопка */
.mm-btn--logs {
  border-color: rgba(255, 255, 255, 0.05);
  color: var(--mm-text-hard);
  font-size: var(--mm-fs-xs);
  opacity: 0.7;
}

.mm-btn--logs:hover,
.mm-btn--logs:focus-visible {
  background: rgba(139, 126, 200, 0.06);
  border-color: rgba(139, 126, 200, 0.18);
  color: var(--mm-text-hover);
  opacity: 1;
}

/* Disable дії коли бот офлайн */
.mm-card--bot-offline .mm-card-actions {
  opacity: 0.35;
  pointer-events: none;
}

/* ─── Modal base ─────────────────────────────── */

.mm-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(14, 13, 18, 0.75);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: var(--sp-space-5);
}

.mm-modal-overlay.mm-open {
  display: flex;
}

/* ─── Logs modal ─────────────────────────────── */

.mm-modal {
  background: var(--bg-card);
  border: 1px solid rgba(139, 126, 200, 0.2);
  border-radius: var(--mm-r-4);
  width: 100%;
  max-width: 760px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
  animation: mm-modal-in 0.15s ease;
}

@keyframes mm-modal-in {
  from { opacity: 0; transform: translateY(-10px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.mm-modal-header {
  display: flex;
  align-items: center;
  gap: var(--sp-space-3);
  padding: var(--sp-space-4) var(--sp-space-5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.mm-modal-header h3 {
  font-size: var(--mm-fs-lg);
  font-weight: 600;
  color: var(--text-main);
  margin: 0;
  font-family: var(--font-dt-title, 'Cinzel', 'Oswald', serif);
  flex: 1;
}

.mm-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: var(--mm-r-2);
  color: var(--text-dim);
  cursor: pointer;
  transition: background-color 180ms ease-out, color 180ms ease-out, border-color 180ms ease-out;
  flex-shrink: 0;
}

.mm-modal-close:hover,
.mm-modal-close:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-main);
  outline: none;
  border-color: rgba(255, 255, 255, 0.15);
}

.mm-modal-close .material-symbols-outlined {
  font-size: 15px;
}

.mm-modal-body {
  overflow-y: auto;
  flex: 1;
  padding: var(--sp-space-4) var(--sp-space-5);
}

.mm-logs-content {
  font-family: var(--font-dt-title, 'Cinzel', 'Oswald', serif);
  font-size: var(--mm-fs-sm);
  line-height: 1.65;
  color: var(--mm-text-hard);
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0;
}

.mm-logs-content .log-line {
  display: block;
  padding: var(--sp-pad, 1px 0);
  transition: color 100ms ease-out;
}

.mm-logs-content .log-line:hover {
  color: var(--text-muted);
}

.mm-logs-content .log-line--error { color: var(--mm-color-danger); }
.mm-logs-content .log-line--warn  { color: var(--log-warn); }
.mm-logs-content .log-line--ok    { color: var(--success); }

/* ─── Confirm dialog ─────────────────────────── */

.mm-confirm {
  background: var(--bg-card);
  border: 1px solid rgba(192, 96, 96, 0.2);
  border-radius: var(--mm-r-4);
  width: 100%;
  max-width: 380px;
  padding: var(--sp-space-5);
  text-align: center;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
  animation: mm-modal-in 0.15s ease;
}

/* П12: Material Symbol в confirm замість emoji */
.mm-confirm-icon {
  font-size: 28px;
  margin-bottom: var(--sp-space-3);
  display: block;
}

.mm-confirm-mat-icon {
  font-size: 32px;
  display: block;
  color: var(--status-warn);
}

.mm-confirm-mat-icon--ok {
  color: var(--status-active);
}

.mm-confirm h3 {
  font-size: var(--mm-fs-lg);
  font-weight: 600;
  color: var(--text-main);
  margin: 0 0 var(--sp-space-2);
  font-family: var(--font-dt-title, 'Cinzel', 'Oswald', serif);
}

.mm-confirm p {
  font-size: var(--mm-fs-md);
  color: var(--mm-text-hard);
  margin: 0 0 var(--sp-space-5);
  font-family: var(--font-dt-title, 'Cinzel', 'Oswald', serif);
  line-height: 1.55;
}

.mm-confirm-actions {
  display: flex;
  gap: var(--sp-space-3);
  justify-content: center;
}

.mm-confirm-ok {
  padding: var(--sp-space-2) var(--sp-space-4);
  font-size: var(--mm-fs-md);
  font-family: var(--font-dt-title, 'Cinzel', 'Oswald', serif);
  background: var(--mm-danger-soft);
  border: 1px solid var(--mm-danger-border);
  border-radius: var(--mm-r-3);
  color: var(--mm-color-danger);
  cursor: pointer;
  transition: background-color 180ms ease-out, border-color 180ms ease-out;
}

.mm-confirm-ok:hover,
.mm-confirm-ok:focus-visible {
  background: rgba(192, 96, 96, 0.18);
  outline: none;
  border-color: var(--mm-danger-strong);
}

.mm-confirm-cancel {
  padding: var(--sp-space-2) var(--sp-space-4);
  font-size: var(--mm-fs-md);
  font-family: var(--font-dt-title, 'Cinzel', 'Oswald', serif);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--mm-r-3);
  color: var(--text-dim);
  cursor: pointer;
  transition: background-color 180ms ease-out, color 180ms ease-out;
}

.mm-confirm-cancel:hover,
.mm-confirm-cancel:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-main);
  outline: none;
}

/* ─── Empty/error state ──────────────────────── */

.mm-empty-state {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-space-3);
  padding: var(--mm-sp-6) var(--sp-space-5);
  color: var(--text-xdim);
  font-family: var(--font-dt-title, 'Cinzel', 'Oswald', serif);
  font-size: var(--mm-fs-lg);
  text-align: center;
}

.mm-empty-state.mm-visible {
  display: flex;
}

.mm-empty-state .material-symbols-outlined {
  font-size: 36px;
  color: rgba(96, 92, 112, 0.3);
}

/* ─── Summary bar ────────────────────────────── */

.mm-summary-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-space-5);
  padding: var(--sp-space-2) var(--mm-sp-6);
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  max-width: var(--max-content);
  margin: 0 auto;
  font-family: var(--font-dt-title, 'Cinzel', 'Oswald', serif);
  font-size: var(--mm-fs-sm);
  flex-wrap: wrap;
  /* Inset shadow */
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.02);
}

.mm-summary-bar.mm-hidden {
  display: none;
}

.mm-summary-stat {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 5px);
  color: var(--text-dim);
}

.mm-summary-stat .material-symbols-outlined {
  font-size: var(--mm-fs-lg);
}

/* V24: кольорові цифри в summary bar */
.mm-stat-active  { color: var(--text-dim); }
.mm-stat-active .material-symbols-outlined { color: var(--status-active); }
.mm-stat-active #statActive { color: var(--status-active); font-weight: 600; }

.mm-stat-disabled { color: var(--text-xdim); }
.mm-stat-disabled #statDisabled { color: var(--text-muted); }

.mm-stat-error { color: var(--text-xdim); }
.mm-stat-error.has-errors { color: var(--status-error); }
.mm-stat-error.has-errors .material-symbols-outlined { color: var(--status-error); }
.mm-stat-error.has-errors #statError { color: var(--status-error); font-weight: 600; }

.mm-summary-divider {
  flex: 1;
}

.mm-summary-restart-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 5px);
  padding: 4px var(--sp-space-3);
  font-size: var(--mm-fs-sm);
  font-family: var(--font-dt-title, 'Cinzel', 'Oswald', serif);
  background: rgba(196, 151, 90, 0.08);
  border: 1px solid rgba(196, 151, 90, 0.2);
  border-radius: var(--mm-r-2);
  color: var(--status-warn);
  cursor: pointer;
  transition: background-color 180ms ease-out, border-color 180ms ease-out;
}

.mm-summary-restart-btn:hover,
.mm-summary-restart-btn:focus-visible {
  background: rgba(196, 151, 90, 0.14);
  border-color: rgba(196, 151, 90, 0.35);
  outline: none;
}

.mm-summary-restart-btn .material-symbols-outlined {
  font-size: var(--mm-fs-lg);
}

.mm-summary-restart-btn.mm-hidden {
  display: none;
}

/* ─── Filter tabs ─────────────────────────────── */

.mm-filter-tabs {
  display: flex;
  gap: var(--sp-space-2);
  padding: var(--sp-space-3) var(--mm-sp-6) 0;
  max-width: var(--max-content);
  margin: 0 auto;
}

.mm-filter-tabs.mm-hidden {
  display: none;
}

.mm-filter-tab {
  padding: var(--sp-space-1) var(--sp-space-3);
  font-size: var(--mm-fs-sm);
  font-family: var(--font-dt-title, 'Cinzel', 'Oswald', serif);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--mm-r-2);
  color: var(--text-dim);
  cursor: pointer;
  transition: background-color 180ms ease-out, border-color 180ms ease-out, color 180ms ease-out;
}

.mm-filter-tab:hover,
.mm-filter-tab:focus-visible {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-main);
  outline: none;
}

.mm-filter-tab[aria-selected="true"],
.mm-filter-tab--active {
  background: rgba(139, 126, 200, 0.08);
  border-color: rgba(139, 126, 200, 0.2);
  color: var(--cyan);
}

.mm-filter-tab--problems.has-problems:not(.mm-filter-tab--active) {
  border-color: rgba(192, 96, 96, 0.15);
  color: var(--text-dim);
  position: relative;
}

.mm-filter-tab--problems.has-problems:not(.mm-filter-tab--active)::after {
  content: '';
  position: absolute;
  top: 3px;
  right: 3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--status-error);
}

.mm-filter-tab--problems.has-problems.mm-filter-tab--active {
  border-color: var(--mm-danger-strong);
  color: var(--status-error);
  background: var(--mm-danger-soft);
}

/* ─── Error count badge (з реєстру логів) ────── */

.mm-badge-err-count {
  margin-left: var(--sp-space-2);
  padding: 2px var(--sp-space-2);
  font-size: var(--mm-fs-xs);
  font-family: var(--font-dt-title, 'Cinzel', 'Oswald', serif);
  background: rgba(220, 80, 80, 0.1);
  border: 1px solid rgba(220, 80, 80, 0.25);
  border-radius: var(--mm-r-3);
  color: var(--status-error);
  white-space: nowrap;
}

/* ─── Pending restart badge ───────────────────── */

.mm-badge-pending {
  margin-left: auto;
  padding: 2px var(--sp-space-2);
  font-size: var(--mm-fs-xs);
  font-family: var(--font-dt-title, 'Cinzel', 'Oswald', serif);
  background: rgba(196, 151, 90, 0.1);
  border: 1px solid rgba(196, 151, 90, 0.2);
  border-radius: var(--mm-r-3);
  color: var(--status-warn);
  white-space: nowrap;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space, 3px);
}

/* ─── Card status variants ────────────────────── */

.mm-card--error {
  border-color: rgba(192, 96, 96, 0.2);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.4),
    0 0 14px rgba(192, 96, 96, 0.06),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* V3: error preview блок (JS рендерить при status=error) */
.mm-error-preview {
  margin-bottom: var(--sp-space-2);
  padding: var(--sp-space-2) var(--sp-space-3);
  background: rgba(192, 96, 96, 0.04);
  border-left: 2px solid rgba(192, 96, 96, 0.3);
  border-radius: 0 var(--mm-r-1) var(--mm-r-1) 0;
  font-family: var(--font-dt-title, 'Cinzel', 'Oswald', serif);
  font-size: var(--mm-fs-xs);
  color: var(--mm-text-hard);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 48px;
  overflow: hidden;
}

/* D9: disabled-state — тільки opacity (без filter для перформансу) */
.mm-card--disabled-state {
  opacity: 0.55;
  transition: opacity 180ms ease-out;
}

.mm-card--disabled-state:hover {
  opacity: 0.85;
}

/* ─── Flash animation ─────────────────────────── */

@keyframes mm-flash {
  0%   { background: var(--bg-card); }
  30%  { background: color-mix(in srgb, var(--module-accent, var(--mod-devtools)) 12%, var(--bg-card)); }
  100% { background: var(--bg-card); }
}

.mm-card--flash {
  animation: mm-flash 0.5s ease;
}

/* ─── Toast notification ──────────────────────── */

.mm-toast {
  position: fixed;
  bottom: var(--sp-space-5);
  right: var(--sp-space-5);
  padding: var(--sp-space-3) var(--sp-space-4);
  background: var(--bg-elevated, rgba(26, 25, 34, 0.95)); /* FIX cc-682: steampunk SSOT */
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--mm-r-3);
  font-family: var(--font-dt-title, 'Cinzel', 'Oswald', serif);
  font-size: var(--mm-fs-md);
  color: var(--text-main);
  z-index: 500;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: translateY(var(--sp-space-2));
  transition: opacity 180ms ease-out, transform 180ms ease-out;
  pointer-events: none;
  max-width: 320px;
}

.mm-toast.mm-toast--visible {
  opacity: 1;
  transform: translateY(0);
}

.mm-toast.mm-toast--error {
  border-color: var(--mm-danger-border);
  background: linear-gradient(to right, var(--mm-danger-soft), rgba(26, 25, 34, 0.95));
}

/* ─── System card metric tiles ────────────────── */

.mm-metric-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-space-2);
  margin-bottom: var(--sp-space-3);
}

.mm-metric-tile {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--mm-r-2);
  padding: 4px var(--sp-space-3);
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: var(--sp-gap, 2px);
}

.mm-tile-label {
  font-size: var(--mm-fs-xs);
  font-family: var(--font-dt-title, 'Cinzel', 'Oswald', serif);
  color: var(--text-xdim);
  letter-spacing: 0.04em;
  opacity: 0.55;
  display: block;
  margin-top: 2px;
}

.mm-tile-value {
  font-size: var(--mm-fs-lg);
  font-family: var(--font-dt-title, 'Cinzel', 'Oswald', serif);
  color: var(--text-main);
  font-weight: 600;
}

.mm-tile-value.val-warn {
  color: var(--status-warn);
}

.mm-tile-value.val-ok {
  color: var(--status-active);
}

.mm-tile-value.val-error {
  color: var(--status-error);
}

/* ─── Uptime bars ─────────────────────────────── */

.mm-uptime-bars {
  display: flex;
  gap: var(--sp-gap, 2px);
  margin-bottom: var(--sp-space-3);
  align-items: flex-end;
  height: 18px;
}

.mm-uptime-bar {
  flex: 1;
  height: 12px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: background-color 180ms ease-out;
}

.mm-uptime-bar.bar-online {
  background: rgba(94, 168, 138, 0.80);
  border-color: rgba(94, 168, 138, 0.35);
  box-shadow: 0 0 4px rgba(94, 168, 138, 0.4);
}

.mm-uptime-bar.bar-online:hover {
  background: rgba(94, 168, 138, 0.90);
}

.mm-uptime-bars-label {
  font-size: var(--mm-fs-xs);
  font-family: var(--font-dt-title, 'Cinzel', 'Oswald', serif);
  color: var(--text-xdim);
  margin-bottom: var(--sp-space-1);
}

/* П5: Підпис-легенда під uptime bars */
.mm-uptime-bars-hint {
  font-size: var(--mm-fs-xs);
  font-family: var(--font-dt-title, 'Cinzel', 'Oswald', serif);
  color: var(--text-xdim);
  opacity: 0.6;
  margin-top: var(--sp-space, 3px);
  margin-bottom: var(--sp-space-3);
  letter-spacing: 0.02em;
}

/* ─── Start/Stop buttons ──────────────────────── */

.mm-btn--start {
  border-color: rgba(94, 168, 138, 0.2);
  color: var(--text-dim);
}

.mm-btn--start:hover,
.mm-btn--start:focus-visible {
  background: rgba(94, 168, 138, 0.1);
  border-color: rgba(94, 168, 138, 0.35);
  color: var(--status-active);
}

/* P-04: кнопка Stop червона (небезпечна дія) */
.mm-btn--stop {
  background: rgba(192, 96, 96, 0.12);
  border-color: var(--mm-danger-strong);
  color: var(--mm-color-danger);
}

.mm-btn--stop:hover,
.mm-btn--stop:focus-visible {
  background: rgba(192, 96, 96, 0.20);
  border-color: rgba(192, 96, 96, 0.55);
  color: var(--mm-color-danger);
}

/* ─── Flush logs button (у modal-header) ─────── */

.mm-btn--flush {
  padding: var(--sp-space-1) var(--sp-space-3);
  font-size: var(--mm-fs-sm);
  border-color: rgba(255, 255, 255, 0.07);
  color: var(--text-xdim);
  margin-left: auto;
}

.mm-btn--flush:hover,
.mm-btn--flush:focus-visible {
  background: var(--mm-danger-soft);
  border-color: rgba(192, 96, 96, 0.2);
  color: var(--mm-color-danger);
}

.mm-btn--flush .material-symbols-outlined {
  font-size: var(--mm-fs-md);
}

/* ─── val-warn for restart count ─────────────── */

.mm-restarts-val {
  font-size: var(--mm-fs-sm);
  font-family: var(--font-dt-title, 'Cinzel', 'Oswald', serif);
  color: var(--text-dim);
  margin-bottom: var(--sp-space-3);
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
}

.mm-restarts-val .mm-restarts-count {
  font-weight: 600;
}

/* ─── Adaptive: mobile/tablet ───────────────────
   Раніше 0 @media — додаємо breakpoints       */

@media (max-width: 900px) {
  .mm-grid,
  .mm-skeleton-grid {
    grid-template-columns: 1fr;
    padding: var(--sp-space-4) var(--sp-space-3) var(--sp-space-5);
    gap: var(--sp-space-3);
  }
  .mm-summary-bar,
  .mm-filter-tabs {
    padding-left: var(--sp-space-4);
    padding-right: var(--sp-space-4);
  }
  .mm-page-header {
    padding: var(--sp-space-3) var(--sp-space-4) var(--sp-space-3);
  }
  .mm-toast {
    left: var(--sp-space-3);
    right: var(--sp-space-3);
    bottom: var(--sp-space-3);
    max-width: none;
  }
}

@media (max-width: 500px) {
  .mm-card {
    padding: var(--sp-space-3) var(--sp-space-4);
  }
  .mm-card-header {
    gap: var(--sp-space-2);
  }
  .mm-metric-tiles {
    gap: var(--sp-space-1);
  }
  .mm-confirm {
    max-width: 100%;
    padding: var(--sp-space-4);
  }
}

/* ─── D4: reduced-motion (WCAG 2.3.3) ─────────── */

@media (prefers-reduced-motion: reduce) {
  .mm-status-dot--active,
  .mm-status-dot--loading,
  .mm-status-dot--offline,
  .mm-spinner-ring,
  .mm-btn--restart .mm-btn-spinner,
  .mm-refresh-btn.mm-refreshing .material-symbols-outlined,
  .mm-skeleton-card::after,
  .mm-badge-wip,
  .mm-summary-restart-btn:not(.mm-hidden),
  .mm-card {
    animation: none;
  }
  .mm-card,
  .mm-card::before,
  .mm-btn,
  .mm-filter-tab,
  .mm-toggle-track,
  .mm-toggle-track::after,
  .mm-refresh-btn,
  .mm-modal-close,
  .mm-confirm-ok,
  .mm-confirm-cancel,
  .mm-summary-restart-btn,
  .mm-card--disabled-state,
  .mm-card-desc,
  .mm-toast,
  .mm-status-dot,
  .mm-card-ua-name,
  .mm-card-num,
  .mm-offline-banner {
    transition: none;
  }
  .mm-modal,
  .mm-confirm {
    animation: none;
  }
  .mm-card:not(.mm-card--system):hover,
  .mm-card:not(.mm-card--system):focus-within {
    transform: none;
  }
}

/* ─── Custom tooltip (D15) ─────────────────────
   Для елементів з data-tip замість title       */

[data-tip] {
  position: relative;
}

[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + var(--sp-space-2));
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 4px var(--sp-space-2);
  background: rgba(14, 13, 18, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--mm-r-1);
  font-family: var(--font-dt-title, 'Cinzel', 'Oswald', serif);
  font-size: var(--mm-fs-xs);
  color: var(--text-main);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease-out 500ms, transform 180ms ease-out 500ms;
  z-index: 300;
}

[data-tip]:hover::after,
[data-tip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ─── V6: Pulsing border на restart btn при наявності pending ── */

@keyframes mm-danger-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--mm-danger-border); }
  50%       { box-shadow: 0 0 0 4px rgba(192, 96, 96, 0.1); }
}
.mm-summary-restart-btn:not(.mm-hidden) {
  animation: mm-danger-pulse 2s ease-in-out infinite;
}
.mm-summary-restart-btn:hover,
.mm-summary-restart-btn:focus-visible {
  animation: none;
}

/* ─── V7: Status dot реагує на hover картки ──── */

.mm-status-dot {
  transition: transform 180ms ease-out, box-shadow 300ms ease;
}
.mm-card:hover .mm-status-dot,
.mm-card:focus-within .mm-status-dot {
  transform: scale(1.4);
}
.mm-card:hover .mm-status-dot--active {
  box-shadow: 0 0 10px rgba(94, 168, 138, 0.7);
}
.mm-card:hover .mm-status-dot--error {
  box-shadow: 0 0 10px rgba(192, 96, 96, 0.65);
}

/* ─── V8: Staggered entry animation ──────────── */

@keyframes mm-card-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mm-card {
  animation: mm-card-in 0.28s ease both;
  animation-delay: calc(var(--card-idx, 0) * 35ms);
}

/* ─── V9: Confirm icons — кольорові + glow ───── */

.mm-confirm-mat-icon {
  font-size: 32px;
  display: block;
  color: var(--status-warn);
}
.mm-confirm-mat-icon--ok {
  color: var(--status-active););
}
.mm-confirm-mat-icon--stop {
  color: var(--mm-color-danger););
}

/* ─── V11: Uptime bars tooltip cursor ────────── */

.mm-uptime-bar {
  cursor: help;
}

/* ─── V12: ua-name hover fade-in ─────────────── */

.mm-card-ua-name {
  transition: color 180ms ease-out;
}
.mm-card:hover .mm-card-ua-name,
.mm-card:focus-within .mm-card-ua-name {
  color: var(--mm-text-hard);
}

/* ─── V13: Filter tab — underline active state ─ */

.mm-filter-tab[aria-selected="true"],
.mm-filter-tab--active {
  background: transparent;
  border-color: transparent;
  color: var(--text-main);
  border-bottom: 2px solid var(--accent);
  border-radius: var(--mm-r-2) var(--mm-r-2) 0 0;
  padding-bottom: calc(var(--sp-space-1) - 2px);
}
.mm-filter-tab--problems.has-problems.mm-filter-tab--active {
  border-bottom-color: var(--mm-color-danger);
  color: var(--mm-color-danger);
  background: transparent;
}

/* ─── V14: WIP badge — breathing pulse ───────── */

@keyframes mm-wip-breathe {
  0%, 100% { opacity: 0.75; }
  50%       { opacity: 1; }
}
.mm-badge-wip {
  animation: mm-wip-breathe 3.5s ease-in-out infinite;
}

/* ─── V15: Mini fill-bar під metric tile ─────── */

.mm-tile-bar {
  height: 2px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-ui, 1px);
  margin-top: var(--sp-space, 3px);
  position: relative;
  overflow: hidden;
  width: 100%;
}
.mm-tile-bar::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--bar-pct, 0%);
  background: var(--bar-color, var(--accent));
  border-radius: var(--radius-ui, 1px);
  transition: width 400ms ease-out;
}

/* ─── V16: Offline banner slide-down ─────────── */

@keyframes mm-slide-down {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mm-offline-banner.mm-visible {
  display: flex;
  animation: mm-slide-down 250ms ease-out;
}

/* ─── V17: Card-num badge hover ──────────────── */

.mm-card-num {
  transition: background-color 180ms ease-out, border-color 180ms ease-out;
}
.mm-card:hover .mm-card-num {
  background: color-mix(in srgb, var(--module-accent, var(--mod-devtools)) 14%, transparent);
  border-color: color-mix(in srgb, var(--module-accent, var(--mod-devtools)) 35%, transparent);
}

/* ─── V18: Bot offline — diagonal micro-stripe ─ */

.mm-card--bot-offline::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-ui, inherit);
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 12px,
    rgba(255, 255, 255, 0.012) 12px,
    rgba(255, 255, 255, 0.012) 13px
  );
  pointer-events: none;
}

/* ─── V19: Skeleton різні висоти (реалізм) ───── */

.mm-skeleton-card:nth-child(1) { height: 200px; }
.mm-skeleton-card:nth-child(2),
.mm-skeleton-card:nth-child(3) { height: 155px; }
.mm-skeleton-card:nth-child(n+4) { height: 130px; }

/* ─── V20: Focus ring per-module accent ──────── */

.mm-card:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--module-accent, var(--mod-devtools)) 60%, transparent);
  outline-offset: 2px;
}

/* ─── V21: Logs modal scrollbar ──────────────── */

.mm-modal-body {
  scrollbar-width: thin;
  scrollbar-color: rgba(139, 126, 200, 0.3) transparent;
}

/* ─── V23: Modal overlay cursor feedback ─────── */

.mm-modal-overlay {
  cursor: pointer;
}
.mm-modal,
.mm-confirm {
  cursor: default;
}

/* ─── V24: Summary stats кольорові числа ─────── */

.mm-stat-active  { color: var(--text-dim); }
.mm-stat-active .material-symbols-outlined { color: var(--status-active); }
.mm-stat-active #statActive { color: var(--status-active); font-weight: 600; }

.mm-stat-disabled { color: var(--text-xdim); }
.mm-stat-disabled #statDisabled { color: var(--text-muted); }

/* ─── V25: Card desc — 2-line clamp ──────────── */

.mm-card-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ─── Ф4: Module search input ────────────────── */

.mm-search-wrap {
  padding: var(--sp-space-2) var(--sp-space-5) 0;
  max-width: var(--max-content);
  margin: 0 auto;
}
.mm-search-wrap.mm-hidden { display: none; }
.mm-search {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--mm-r-2);
  padding: var(--sp-space-1) var(--sp-space-3);
  font-family: var(--font-dt-title, 'Cinzel', 'Oswald', serif);
  font-size: var(--mm-fs-md);
  color: var(--text-main);
  outline: none;
  transition: border-color 180ms ease-out, background-color 180ms ease-out;
}
.mm-search::placeholder { color: var(--mm-text-hard); }
.mm-search:focus {
  border-color: rgba(139, 126, 200, 0.3);
  background: rgba(255, 255, 255, 0.05);
}

/* ─── Ф10: Logs search input ─────────────────── */

.mm-logs-search {
  flex: 1;
  min-width: 100px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--mm-r-1);
  padding: 3px var(--sp-space-2);
  font-family: var(--font-dt-title, 'Cinzel', 'Oswald', serif);
  font-size: var(--mm-fs-xs);
  color: var(--text-main);
  outline: none;
}
.mm-logs-search::placeholder { color: var(--mm-text-hard); }
.mm-logs-search:focus { border-color: rgba(139, 126, 200, 0.3); }

/* ─── V29: Tooltip — bottom positioning fix ──── */

.mm-card:last-child [data-tip]::after,
.mm-card-actions [data-tip]::after {
  bottom: auto;
  top: calc(100% + var(--sp-space-2));
  transform: translateX(-50%) translateY(-4px);
}
.mm-card:last-child [data-tip]:hover::after,
.mm-card-actions [data-tip]:hover::after,
.mm-card:last-child [data-tip]:focus-visible::after,
.mm-card-actions [data-tip]:focus-visible::after {
  transform: translateX(-50%) translateY(0);
}

/* ─── V30: mmLastUpdated empty ───────────────── */

#mmLastUpdated:empty {
  opacity: 0;
}

/* ─── Focus visible escalation ───────────────── */

/* Стара правило замінена V20 вище — дублікат прибрано */

/* ═══════════════════════════════════════════════════════════ */
/*   STEAMPUNK OVERRIDES — Module Manager                     */
/*   Кований метал. Латунь. Парові механізми. Клепки.         */
/* ═══════════════════════════════════════════════════════════ */

/* ── Фон сторінки: multi-layer industrial infrastructure ── */
/* FIX cc-693: явна ізоляція .dev-tools-scope щоб уникнути витоку на інші .devtools-body сторінки */
body.devtools-body.dev-tools-scope {
  background:
    /* Vignette — затемнення по краях */
    radial-gradient(ellipse 130% 90% at 50% 40%, transparent 0%, rgba(13, 9, 7, 0.65) 100%),
    /* Горизонтальні "труби" — структурні балки кожні ~400px */
    repeating-linear-gradient(
      180deg,
      transparent 0px, transparent 188px,
      rgba(58, 46, 34, 0.16) 188px, rgba(58, 46, 34, 0.20) 196px,
      rgba(42, 32, 24, 0.12) 198px, transparent 198px, transparent 400px
    ),
    /* Вертикальні "балки" — опорні стойки кожні ~600px */
    repeating-linear-gradient(
      90deg,
      transparent 0px, transparent 286px,
      rgba(58, 46, 34, 0.10) 286px, rgba(58, 46, 34, 0.14) 292px,
      rgba(42, 32, 24, 0.08) 294px, transparent 294px, transparent 600px
    ),
    /* Сітка заклепок — dot-pattern 40x40px */
    radial-gradient(circle at 50% 50%, rgba(92, 68, 48, 0.10) 1px, transparent 1.5px),
    /* Базовий фон */
    var(--bg-void, var(--bg-void));
  background-size: 100% 100%, 100% 400px, 600px 100%, 40px 40px, 100% 100%;
  background-attachment: fixed, fixed, fixed, fixed, fixed;
}

/* ── Back button: dt-backsign стиль як в Центрі сповіщень ── */
.dev-tools-scope .devtools-back.dt-backsign {
  width: auto !important;
  min-width: auto !important;
  height: 30px !important;
  padding: var(--sp-space, 3px 14px 3px 10px) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--sp-space, 8px) !important;
  background: linear-gradient(180deg, var(--bg-elevated, var(--bg-elevated)) 0%, var(--bg-base, var(--bg-base)) 100%) !important;
  border: 1px solid var(--border-metal, var(--border-metal)) !important;
  border-radius: var(--radius-ui, 3px)!important;
  color: var(--text-body, var(--text-body)) !important;
  text-decoration: none !important;
  box-shadow: inset 0 1px 0 rgba(232,219,178,0.06), 0 2px 4px rgba(0,0,0,0.5) !important;
  font-size: 12px !important;
}

.dev-tools-scope .devtools-back.dt-backsign:hover {
  border-color: var(--accent-brass, var(--accent-brass)) !important;
  background: linear-gradient(180deg, var(--bg-surface, var(--bg-surface)) 0%, var(--bg-elevated, var(--bg-elevated)) 100%) !important;
  color: var(--accent-brass, var(--accent-brass)) !important;
  box-shadow: inset 0 1px 0 rgba(232,219,178,0.08), 0 2px 6px rgba(0,0,0,0.5), 0 0 8px rgba(197,139,58,0.15) !important;
}

.dev-tools-scope .dt-backsign__arrow {
  display: inline-flex;
  align-items: center;
}

.dev-tools-scope .dt-backsign__arrow svg {
  width: 14px !important;
  height: 14px !important;
}

.dev-tools-scope .dt-backsign__label {
  display: none !important;
}

.dev-tools-scope .dt-backsign__target {
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  color: inherit !important;
  white-space: nowrap;
}

/* ── Header: override фіолетових кольорів на brass ── */
.dev-tools-scope .devtools-header {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -3px 8px rgba(0, 0, 0, 0.5),
    0 4px 0 rgba(197, 139, 58, 0.08),
    0 6px 24px rgba(0, 0, 0, 0.5),
    0 12px 48px rgba(0, 0, 0, 0.3),
    0 2px 0 rgba(197, 139, 58, 0.12) !important;
}

.dev-tools-scope .devtools-header::after {
  background: linear-gradient(90deg,
    transparent,
    rgba(197, 139, 58, 0.35) 20%,
    rgba(197, 139, 58, 0.55) 50%,
    rgba(197, 139, 58, 0.35) 80%,
    transparent
  ) !important;
}

/* ── Block header: титул блоку (як al-feed-header в ЦС) ── */
.mm-block-header {
  padding: var(--sp-space, 10px 16px 6px);
  border-bottom: 1px solid var(--border-dim, var(--border-dim));
  background: linear-gradient(180deg, var(--bg-elevated, var(--bg-elevated)) 0%, var(--bg-surface, var(--bg-surface)) 100%);
}

.mm-block-title-row {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 8px);
}

.mm-block-icon {
  font-size: 20px;
  color: var(--accent-brass, var(--accent-brass));
  opacity: 0.8;
}

.mm-block-title {
  font-family: 'Oswald', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-brass, var(--accent-brass));
  text-shadow: 0 1px 0 rgba(0,0,0,0.8), 0 0 6px rgba(197,139,58,0.15);
}

.mm-block-hint {
  cursor: help;
  color: var(--text-muted, var(--text-muted));
  opacity: 0.55;
  transition: opacity 0.18s;
  margin-left: 2px;
  display: inline-flex;
  align-items: center;
}

.mm-block-hint .material-symbols-outlined {
  font-size: 15px;
}

/* Restart btn right edge */
.mm-block-title-row .mm-summary-restart-btn {
  margin-left: auto;
}

.mm-block-hint:hover {
  opacity: 0.85;
  color: var(--accent-brass, var(--accent-brass));
}

/* ── Compact toolbar: stats + search + filters in 1 row ── */
.mm-toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 14px);
  padding: var(--sp-space, 8px 16px);
  background:
    repeating-linear-gradient(93deg,
      rgba(232, 219, 178, 0.008) 0px, rgba(232, 219, 178, 0.014) 1px,
      transparent 2px, transparent 7px),
    linear-gradient(180deg,
      var(--bg-base, var(--bg-base)) 0%,
      var(--bg-void, var(--bg-void)) 100%);
  border-bottom: 1px solid var(--border-dim, var(--border-dim));
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
}

.mm-toolbar-stats {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 4px);
  flex-shrink: 0;
  padding: var(--sp-space, 3px 10px);
  background: var(--bg-void, var(--bg-void));
  border: 1px solid var(--border-dim, var(--border-dim));
  border-radius: var(--radius-ui, 3px);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}

.mm-stat {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  color: var(--text-muted, var(--text-muted));
  white-space: nowrap;
  padding: var(--sp-card-pad, 0 6px);
  border-right: 1px solid var(--border-dim, var(--border-dim));
}

.mm-stat:last-child {
  border-right: none;
}

.mm-stat span:first-child {
  font-weight: 600;
  color: var(--text-body, var(--text-body));
  margin-right: var(--sp-space, 3px);
}

.mm-stat-active span:first-child { color: var(--success, var(--success)); }
.mm-stat-error span:first-child  { color: var(--danger, #c06060); }

.mm-toolbar-search {
  display: flex;
  align-items: center;
  flex: 1;
  max-width: 240px;
  background: var(--bg-void, var(--bg-void));
  border: 1px solid var(--border-dim, var(--border-dim));
  border-radius: var(--radius-ui, 3px);
  padding: var(--sp-card-pad, 0 8px);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
  transition: border-color 0.18s;
}

.mm-toolbar-search:focus-within {
  border-color: var(--accent-brass, var(--accent-brass));
}

.mm-search-icon {
  font-size: 14px;
  color: var(--text-muted, var(--text-muted));
  opacity: 0.5;
}

.mm-toolbar-search .mm-search {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: var(--sp-space, 5px 6px !important);
  font-size: 11px !important;
  width: 100%;
}

.mm-toolbar-filters {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 4px);
  flex-shrink: 0;
}

.mm-toolbar-filters .mm-filter-tab {
  padding: var(--sp-space, 4px 10px !important);
  font-size: 11px !important;
  min-width: auto !important;
}

/* ── Module panel: відступ від балки (pipe section дає spacing) ── */
.mm-module-panel {
  margin-top: var(--sp-space, 8px);
}

/* ── Pipe section між header і блоком ── */
.mm-pipe-section--beam-to-main {
  height: 48px !important;
}

/* ── SVG Background Scene: шестерні, труби, вентилі ── */
.mm-bg-scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.25;
  contain: layout paint;
}

/* ── Header: кований градієнт з латунним бордером ── */
.devtools-header {
  background: linear-gradient(
    180deg,
    var(--bg-base,    #12100c) 0%,
    var(--bg-surface, #1a1710) 100%
  );
  border-bottom: 1px solid var(--border-metal);
  box-shadow:
    0 1px 0 rgba(197, 139, 58, 0.12),
    0 4px 16px rgba(0, 0, 0, 0.5);
  position: relative;
}

/* Тонка латунна лінія під header */
.devtools-header::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(197, 139, 58, 0.35) 20%,
    rgba(197, 139, 58, 0.55) 50%,
    rgba(197, 139, 58, 0.35) 80%,
    transparent
  );
  pointer-events: none;
  z-index: 1;
}

/* ── Module cards: forge-depth панелі (11-layer) ── */
.mm-card {
  background: linear-gradient(
    160deg,
    var(--bg-surface)  0%,
    var(--bg-elevated) 100%
  );
  border: 1px solid var(--border-metal, var(--border-metal));
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.85),
    0 0 0 3px var(--border-dim, var(--border-dim)),
    0 -1px 0 rgba(197, 139, 58, 0.10),
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 6px 16px rgba(0, 0, 0, 0.55),
    0 14px 36px rgba(7, 5, 3, 0.45),
    inset 0 0 0 1px rgba(0, 0, 0, 0.75),
    inset 0 2px 0 rgba(232, 219, 178, 0.06),
    inset 0 -2px 0 rgba(0, 0, 0, 0.7),
    inset 4px 4px 12px rgba(0, 0, 0, 0.20),
    inset -4px -4px 12px rgba(0, 0, 0, 0.15);
}

/* Потовщена і кольорова accent-bar зліва */
.mm-card::before {
  width: 4px;
  opacity: 0.55;
}

.mm-card:not(.mm-card--system):hover,
.mm-card:not(.mm-card--system):focus-within {
  background: linear-gradient(
    160deg,
    var(--bg-elevated) 0%,
    color-mix(in srgb, var(--bg-elevated) 80%, rgba(197, 139, 58, 0.06)) 100%
  );
  border-color: var(--border-bright, var(--border-bright));
  transform: translateY(-1px);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(197, 139, 58, 0.15),
    inset 0 1px 0 rgba(232, 219, 178, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4);
}

/* ── Module card: module-specific border-left через SSOT ── */
.mm-card[data-module="observer"]   { border-left-color: var(--mod-observer,   #7a9e5a); }
.mm-card[data-module="publisher"]  { border-left-color: var(--mod-publisher,  #d4a24a); }
.mm-card[data-module="executor"]   { border-left-color: var(--mod-executor,   #b85434); }
.mm-card[data-module="applicant"]  { border-left-color: var(--mod-applicant,  #5a8299); }
.mm-card[data-module="nexus"]      { border-left-color: var(--mod-nexus,      #4a9590); }
.mm-card[data-module="challenger"] { border-left-color: var(--mod-challenger, #c86a1c); }
.mm-card[data-module="paymaster"]  { border-left-color: var(--mod-paymaster,  #2d4a6b); }
.mm-card[data-module="system"]     { border-left-color: var(--accent-brass,   var(--accent-brass)); }

/* ── Toggle switches: латунний стиль ── */
.mm-toggle-track {
  background: var(--bg-void);
  border-color: var(--border-metal);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(0, 0, 0, 0.3);
}

.mm-toggle-track::after {
  background: var(--border-metal);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.mm-toggle-input:checked + .mm-toggle-track {
  background: rgba(122, 158, 90, 0.12);
  border-color: rgba(122, 158, 90, 0.38);
}

.mm-toggle-input:checked + .mm-toggle-track::after {
  background: var(--success);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 6px rgba(122, 158, 90, 0.4);
}

/* ── Кнопка оновити: icon-only steampunk ── */
.mm-refresh-btn {
  width: 32px !important;
  height: 30px !important;
  padding: var(--sp-card-pad, 0) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  background: linear-gradient(180deg, var(--bg-elevated, var(--bg-elevated)) 0%, var(--bg-base, var(--bg-base)) 100%) !important;
  border: 1px solid var(--border-metal, var(--border-metal)) !important;
  border-radius: var(--radius-ui, 3px)!important;
  color: var(--text-body, var(--text-body)) !important;
  box-shadow:
    inset 0 1px 0 rgba(232,219,178,0.06),
    0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

.mm-refresh-btn .material-symbols-outlined {
  font-size: 16px !important;
  margin: 0 !important;
}

.mm-refresh-btn:hover,
.mm-refresh-btn:focus-visible {
  background: linear-gradient(180deg, var(--bg-surface, var(--bg-surface)) 0%, var(--bg-elevated, var(--bg-elevated)) 100%) !important;
  border-color: var(--accent-brass, var(--accent-brass)) !important;
  color: var(--accent-brass, var(--accent-brass)) !important;
  box-shadow:
    inset 0 1px 0 rgba(232,219,178,0.08),
    0 2px 6px rgba(0, 0, 0, 0.5),
    0 0 10px rgba(197, 139, 58, 0.15) !important;
}

/* ── Summary bar: HUD-style control panel ── */
.mm-summary-bar {
  background:
    repeating-linear-gradient(
      93deg,
      rgba(232, 219, 178, 0.010) 0px,
      rgba(232, 219, 178, 0.018) 1px,
      transparent 2px,
      transparent 7px
    ),
    linear-gradient(
      180deg,
      var(--bg-elevated, var(--bg-elevated)) 0%,
      var(--bg-surface, var(--bg-surface)) 50%,
      var(--bg-base, var(--bg-base)) 100%
    );
  border: 1.5px solid var(--border-metal, var(--border-metal));
  border-radius: var(--radius-ui, 3px);
  box-shadow:
    inset 0 2px 0 rgba(232, 219, 178, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.85),
    inset 0 3px 10px rgba(0, 0, 0, 0.65),
    inset 0 -3px 10px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(92, 68, 48, 0.55),
    0 0 0 2.5px rgba(0, 0, 0, 0.75),
    0 4px 12px rgba(0, 0, 0, 0.75),
    0 8px 24px rgba(0, 0, 0, 0.4);
  position: relative;
}

/* Заклепки по кутах HUD strip */
.mm-summary-bar::before,
.mm-summary-bar::after {
  content: '';
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 32% 28%,
    /* decor: metal pewter gradient */
    var(--pewter-highlight, #a8998a) 0%,
    var(--pewter-light, #7a6a5a) 22%,
    var(--pewter-mid, #5a5048) 55%,
    var(--pewter-dark, #3a322a) 85%,
    var(--bg-void, var(--bg-void)) 100%
  );
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.85),
    inset 0 0.5px 0.5px rgba(255, 255, 255, 0.35),
    0 1px 2px rgba(0, 0, 0, 0.8);
  z-index: 1;
}

.mm-summary-bar::before { top: 5px; left: 8px; }
.mm-summary-bar::after  { top: 5px; right: 8px; }

/* ── Summary restart btn: мідяно-попереджувальний ── */
.mm-summary-restart-btn {
  background: rgba(200, 106, 28, 0.1);
  border-color: rgba(200, 106, 28, 0.28);
  color: var(--warning);
}

.mm-summary-restart-btn:hover,
.mm-summary-restart-btn:focus-visible {
  background: rgba(200, 106, 28, 0.18);
  border-color: rgba(200, 106, 28, 0.45);
}

/* ── Filter tabs: кований стиль з inset тінями ── */
.mm-filter-tab {
  border: 1px solid var(--border-dim, var(--border-dim));
  color: var(--text-muted);
  background: linear-gradient(180deg, var(--bg-surface, var(--bg-surface)) 0%, var(--bg-base, var(--bg-base)) 100%);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.4), inset 0 0 6px rgba(0,0,0,0.2);
}

.mm-filter-tab:hover,
.mm-filter-tab:focus-visible {
  background: linear-gradient(180deg, var(--bg-elevated, var(--bg-elevated)) 0%, var(--bg-surface, var(--bg-surface)) 100%);
  border-color: var(--border-metal, var(--border-metal));
  color: var(--text-body);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.3), 0 0 6px rgba(197,139,58,0.08);
}

.mm-filter-tab[aria-selected="true"],
.mm-filter-tab--active {
  background: linear-gradient(180deg, rgba(197,139,58,0.12) 0%, rgba(197,139,58,0.05) 100%);
  border-color: var(--accent-brass, var(--accent-brass));
  border-bottom: 2px solid var(--accent-brass, var(--accent-brass));
  color: var(--accent-brass, var(--accent-brass));
  box-shadow: 0 0 8px rgba(197,139,58,0.15), inset 0 1px 0 rgba(232,219,178,0.08);
}

/* ── Search: кований інпут ── */
.mm-search {
  background: var(--bg-void);
  border-color: var(--border-dim);
  color: var(--text-bright);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(0, 0, 0, 0.3);
}

.mm-search::placeholder {
  color: var(--text-disabled);
}

.mm-search:focus {
  border-color: var(--accent-brass, var(--accent-brass));
  background: var(--bg-base, #12100c);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.5),
    0 0 0 2px rgba(197, 139, 58, 0.12);
}

/* ── Кнопки карток: сталь ── */
.mm-btn {
  background: var(--bg-surface);
  border-color: var(--border-dim);
  color: var(--text-muted);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.mm-btn:hover,
.mm-btn:focus-visible {
  background: var(--bg-elevated);
  border-color: var(--border-metal);
  color: var(--text-bright);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Restart btn: мідна небезпека */
.mm-btn--restart {
  border-color: var(--mm-danger-border);
  color: color-mix(in srgb, var(--danger) 70%, var(--text-muted));
}

.mm-btn--restart:hover,
.mm-btn--restart:focus-visible {
  background: var(--mm-danger-soft);
  border-color: var(--mm-danger-strong);
  color: var(--danger);
  box-shadow: 0 0 8px rgba(184, 84, 52, 0.15);
}

/* Start btn: зелений індикатор клапана */
.mm-btn--start {
  border-color: rgba(122, 158, 90, 0.22);
  color: var(--text-muted);
}

.mm-btn--start:hover,
.mm-btn--start:focus-visible {
  background: rgba(122, 158, 90, 0.08);
  border-color: rgba(122, 158, 90, 0.38);
  color: var(--success);
  box-shadow: 0 0 8px rgba(122, 158, 90, 0.1);
}

/* ── Offline banner ── */
.mm-offline-banner {
  background: rgba(200, 106, 28, 0.06);
  border-bottom-color: rgba(200, 106, 28, 0.18);
  color: var(--warning);
}

/* ── Status dots: 3D індикатор-лампочки (steampunk) ── */
.mm-status-dot--active,
.mm-status-dot--error,
.mm-status-dot--loading,
.mm-status-dot--offline,
.mm-status-dot--disabled {
  border: 1px solid var(--border-metal, var(--border-metal));
}

.mm-status-dot--active {
  background: radial-gradient(circle at 40% 35%, var(--text-bright) 0%, var(--success) 40%, color-mix(in srgb, var(--success) 50%, var(--bg-void)) 100%);
  box-shadow: 0 0 6px rgba(86, 163, 166, 0.55), inset 0 -1px 2px rgba(0, 0, 0, 0.3);
}

.mm-status-dot--error {
  background: radial-gradient(circle at 40% 35%, var(--text-bright) 0%, var(--danger) 40%, color-mix(in srgb, var(--danger) 55%, var(--bg-void)) 100%);
  box-shadow: 0 0 6px rgba(184, 84, 52, 0.55), inset 0 -1px 2px rgba(0, 0, 0, 0.3);
}

.mm-status-dot--loading,
.mm-status-dot--offline {
  background: radial-gradient(circle at 40% 35%, var(--text-bright) 0%, var(--warning) 40%, color-mix(in srgb, var(--warning) 35%, var(--bg-void)) 100%);
  box-shadow: 0 0 5px rgba(224, 196, 137, 0.45), inset 0 -1px 2px rgba(0, 0, 0, 0.3);
}

.mm-status-dot--disabled {
  background: radial-gradient(circle at 40% 35%, rgba(255,255,255,0.15) 0%, var(--border-dim) 60%, var(--bg-void) 100%);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
  border-color: var(--border-dim, var(--border-dim));
}

/* ── WIP badge: emboss мідний ярлик ── */
.mm-badge-wip {
  background: linear-gradient(180deg, rgba(200,106,28,0.14) 0%, rgba(200,106,28,0.06) 100%);
  border-color: rgba(200, 106, 28, 0.32);
  color: var(--warning);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* ── Pending restart badge: emboss бурштиновий ── */
.mm-badge-pending {
  background: linear-gradient(180deg, rgba(200,106,28,0.14) 0%, rgba(200,106,28,0.06) 100%);
  border-color: rgba(200, 106, 28, 0.32);
  color: var(--warning);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* ── Error badge: emboss ── */
.mm-badge-err-count {
  background: linear-gradient(180deg, rgba(184,84,52,0.14) 0%, rgba(184,84,52,0.06) 100%);
  border-color: rgba(184, 84, 52, 0.38);
  color: var(--danger);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* ── Modals: forge-depth рамка ── */
.mm-modal {
  background: var(--bg-surface);
  border: 1.5px solid var(--border-metal, var(--border-metal));
  border-radius: var(--radius-ui, 4px);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(0, 0, 0, 0.9),
    0 0 0 2.5px rgba(92, 68, 48, 0.35),
    inset 0 1px 0 rgba(232, 219, 178, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}

.mm-modal-header {
  border-bottom: 1px solid var(--border-dim, var(--border-dim));
  background:
    repeating-linear-gradient(93deg,
      rgba(232, 219, 178, 0.008) 0px, rgba(232, 219, 178, 0.014) 1px,
      transparent 2px, transparent 7px),
    linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-surface) 100%);
}

.mm-modal-header h3 {
  color: var(--text-bright);
}

.mm-modal-close {
  background: var(--bg-surface);
  border-color: var(--border-dim);
  color: var(--text-muted);
}

.mm-modal-close:hover,
.mm-modal-close:focus-visible {
  background: var(--bg-elevated);
  border-color: var(--border-metal);
  color: var(--text-bright);
}

/* ── Confirm dialog ── */
.mm-confirm {
  background: var(--bg-surface);
  border-color: var(--mm-danger-border);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(184, 84, 52, 0.08);
}

.mm-confirm h3 { color: var(--text-bright); }
.mm-confirm p  { color: var(--text-muted); }

.mm-confirm-ok {
  background: var(--mm-danger-soft);
  border-color: var(--mm-danger-border);
  color: var(--danger);
}

.mm-confirm-ok:hover,
.mm-confirm-ok:focus-visible {
  background: rgba(184, 84, 52, 0.18);
  border-color: var(--mm-danger-strong);
}

.mm-confirm-cancel {
  background: var(--bg-elevated);
  border-color: var(--border-dim);
  color: var(--text-muted);
}

.mm-confirm-cancel:hover,
.mm-confirm-cancel:focus-visible {
  background: var(--bg-hover, rgba(255, 255, 255, 0.05));
  border-color: var(--border-metal);
  color: var(--text-bright);
}

/* ── Toast notification ── */
.mm-toast {
  background: var(--bg-surface);
  border-color: var(--border-metal);
  color: var(--text-bright);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(197, 139, 58, 0.06);
}

.mm-toast.mm-toast--error {
  border-color: var(--mm-danger-border);
  background: linear-gradient(to right, var(--mm-danger-soft), var(--bg-surface));
}

/* ── Metric tiles: опорні плити ── */
.mm-metric-tile {
  background: var(--bg-void);
  border-color: var(--border-dim);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.mm-tile-value { color: var(--text-bright); }
.mm-tile-label { color: var(--text-disabled); }

.mm-tile-value.val-warn  { color: var(--warning); }
.mm-tile-value.val-ok    { color: var(--success); }
.mm-tile-value.val-error { color: var(--danger);  }

/* ── Uptime bars: шкала тиску ── */
.mm-uptime-bar {
  background: var(--bg-void);
  border-color: var(--border-dim);
}

.mm-uptime-bar.bar-online {
  background: rgba(122, 158, 90, 0.70);
  border-color: rgba(122, 158, 90, 0.35);
  box-shadow: 0 0 4px rgba(122, 158, 90, 0.35);
}

/* ── Logs modal content ── */
.mm-logs-content .log-line--error { color: var(--danger);  }
.mm-logs-content .log-line--warn  { color: var(--warning); }
.mm-logs-content .log-line--ok    { color: var(--success); }

/* ── Skeleton shimmer: кований відблиск ── */
.mm-skeleton-card {
  background: var(--bg-surface);
  border-color: var(--border-dim);
}

.mm-skeleton-card::after {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(197, 139, 58, 0.05),
    transparent
  );
}

/* ── CREST: герб-заголовок з клепками ── */
.dev-tools-scope .mm-crest .dt-crest__shell {
  min-width: 320px;
  padding: var(--sp-space, 10px 28px 8px);
  background:
    repeating-linear-gradient(94deg, rgba(197,139,58,0.012) 0px, transparent 2px, transparent 5px),
    radial-gradient(ellipse at 50% 25%, var(--bg-elevated, var(--bg-elevated)) 0%, var(--bg-base, var(--bg-base)) 40%, var(--bg-void, var(--bg-void)) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.9),
    inset 0 0 0 2px var(--border-dim, var(--border-dim)),
    inset 0 0 0 3px rgba(197,139,58,0.18),
    inset 0 1px 0 rgba(232,219,178,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.85),
    inset 0 3px 8px rgba(0,0,0,0.5);
  filter:
    drop-shadow(0 2px 4px rgba(0,0,0,0.7))
    drop-shadow(0 5px 12px rgba(0,0,0,0.4));
}

.dev-tools-scope .mm-crest .dt-crest__plate {
  background: linear-gradient(180deg, var(--bg-void, var(--bg-void)) 0%, rgba(13,9,7,0.95) 100%);
  border-color: rgba(0,0,0,0.95);
  border-bottom-color: rgba(197,139,58,0.15);
  padding: var(--sp-space, 2px 14px 3px);
}

.dev-tools-scope .mm-crest .dt-crest__title {
  font-size: 22px;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: var(--text-bright, var(--text-bright));
  text-shadow:
    0 1px 0 rgba(197, 139, 58, 0.25),
    0 -1px 0 rgba(0,0,0,0.8),
    0 0 8px rgba(197, 139, 58, 0.1);
}

.dev-tools-scope .mm-crest .dt-crest__desc {
  color: var(--accent-brass, var(--accent-brass));
  line-height: 1.2;
  opacity: 0.6;
  font-size: 9px;
}

.dev-tools-scope .mm-crest .dt-crest__rivet {
  background: radial-gradient(circle at 32% 28%,
    var(--pewter-highlight, #a8998a) 0%, var(--pewter-light, #7a6a5a) 22%,
    var(--pewter-mid, #5a5048) 55%, var(--pewter-dark, #3a322a) 85%, var(--bg-void, var(--bg-void)) 100%);
}

.dev-tools-scope .mm-crest .mm-gear-icon {
  display: block;
  margin: 0 auto 2px;
  opacity: 0.5;
}

/* ── Corner brackets на заголовку (велікі, як у Alerts Center) ── */
.dev-tools-scope .mm-crest .dt-crest__shell::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  width: 20px;
  height: 20px;
  border-top: 2px solid var(--accent-brass, var(--accent-brass));
  border-left: 2px solid var(--accent-brass, var(--accent-brass));
  pointer-events: none;
  opacity: 0.75;
}

.dev-tools-scope .mm-crest .dt-crest__shell::after {
  content: '';
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  border-bottom: 2px solid var(--accent-brass, var(--accent-brass));
  border-right: 2px solid var(--accent-brass, var(--accent-brass));
  pointer-events: none;
  opacity: 0.75;
}

/* ── DT-BOLT: steampunk pewter 5-stop ── */
.dev-tools-scope .dt-bolt {
  background: radial-gradient(circle at 32% 28%,
    /* decor: metal pewter gradient */
    var(--pewter-highlight, #a8998a) 0%,
    var(--pewter-light, #7a6a5a) 22%,
    var(--pewter-mid, #5a5048) 55%,
    var(--pewter-dark, #3a322a) 85%,
    var(--bg-void, var(--bg-void)) 100%);
  border: 1px solid var(--border-dim, var(--border-dim));
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.85),
    inset 0 0.5px 0.5px rgba(255, 255, 255, 0.40),
    0 1px 2px rgba(0, 0, 0, 0.9);
}

/* ── Декор: клепки на карточках ── */
.mm-card::after {
  content: '';
  position: absolute;
  top: 7px;
  right: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 32% 28%,
    /* decor: metal pewter gradient */
    var(--pewter-highlight, #a8998a) 0%,
    var(--pewter-light,    #7a6a5a) 22%,
    var(--pewter-mid,      #5a5048) 55%,
    var(--pewter-dark,     #3a322a) 85%,
    var(--bg-void,         var(--bg-void)) 100%
  );
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.15),
    0 1px 2px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  opacity: 0.6;
  z-index: 1;
}

/* Клепки тільки не для system (щоб не перетинатись з toggle) */
.mm-card--system::after {
  display: none;
}

/* ── Card header: brushed metal texture ── */
.mm-card .mm-card-header {
  background:
    repeating-linear-gradient(180deg,
      rgba(255,255,255,0.005) 0px, rgba(255,255,255,0.005) 1px,
      transparent 1px, transparent 4px),
    linear-gradient(180deg, var(--bg-elevated, var(--bg-elevated)) 0%, var(--bg-surface, var(--bg-surface)) 100%);
  border-bottom: 1px solid var(--border-dim, var(--border-dim));
}

/* ── Декор: corner bracket (top-left, посилений) ── */
.mm-card-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  border-top: 2px solid rgba(197, 139, 58, 0.35);
  border-left: 2px solid rgba(197, 139, 58, 0.35);
  border-radius: var(--mm-r-4) 0 0 0;
  pointer-events: none;
}

/* ── Logs search ── */
.mm-logs-search {
  background: var(--bg-void);
  border-color: var(--border-dim);
  color: var(--text-bright);
}

.mm-logs-search::placeholder {
  color: var(--text-disabled);
}

.mm-logs-search:focus {
  border-color: var(--accent-brass, var(--accent-brass));
}

/* ── Tooltip: кований тип ── */
[data-tip]::after {
  background: var(--bg-elevated);
  border-color: var(--border-metal);
  color: var(--text-bright);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* ── Spinner ring: латунна шестерня ── */
.mm-spinner-ring {
  border-color: rgba(197, 139, 58, 0.12);
  border-top-color: var(--accent-brass, var(--accent-brass));
}

/* ── Overlay blur ── */
.mm-modal-overlay {
  background: rgba(8, 6, 4, 0.80);
}

/* ── Scrollbar: steampunk metallic ── */
.dev-tools-scope::-webkit-scrollbar { width: 8px; }
.dev-tools-scope::-webkit-scrollbar-track {
  background: var(--bg-void, var(--bg-void));
  border-left: 1px solid var(--border-dim, var(--border-dim));
}
.dev-tools-scope::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--border-metal) 0%, var(--border-dim) 100%);
  border: 1px solid var(--border-dim, var(--border-dim));
  border-radius: 2px;
}
.dev-tools-scope::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--border-bright) 0%, var(--border-metal) 100%);
}

/* ═══════════════════════════════════════════════════════════
   STEAMPUNK ADDITIONS v2.0 — Pipe sections, Nameplate,
   Ornament Divider, Brushed Metal Toolbar, Deep Hover Glows
   ═══════════════════════════════════════════════════════════ */

/* ── Додаткові анімації ─────────────────────────────────── */

@keyframes mm-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes mm-nameplate-glow {
  0%, 100% { opacity: 0.55; }
  50%       { opacity: 0.85; }
}

@keyframes mm-gear-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes mm-rivet-pop {
  0%   { transform: scale(0.5); opacity: 0; }
  70%  { transform: scale(1.2);  opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}

@keyframes mm-steam-drift {
  0%   { transform: translateY(0) scaleX(1); opacity: 0.5; }
  100% { transform: translateY(-8px) scaleX(1.4); opacity: 0; }
}


/* ── PIPE SECTION: між header і main ───────────────────── */

.mm-pipe-section {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  padding: 0 var(--sp-space-3, 12px);
  max-width: var(--max-content, 1400px);
  margin: 0 auto;
  height: 18px;
  position: relative;
  pointer-events: none;
}

/* Труба-лінія зліва і справа (декоративні вертикальні трубки) */
.mm-pipe {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 10px;
  opacity: 0.55;
}

.mm-pipe--left  { margin-left: 16px; }
.mm-pipe--right { margin-right: 16px; }

.mm-pipe__vertical {
  flex: 1;
  width: 4px;
  background: linear-gradient(90deg, rgba(92,68,48,0.6), rgba(140,107,70,0.8), rgba(92,68,48,0.6));
  box-shadow: inset 0 0 2px rgba(0,0,0,0.6);
}

.mm-pipe__flange {
  width: 8px;
  height: 3px;
  background: linear-gradient(180deg, rgba(140,107,70,0.7), rgba(92,68,48,0.5));
  border-radius: var(--radius-ui, 1px);
}


/* ── BRASS NAMEPLATE: CONTROL PANEL мітка ──────────────── */

.mm-nameplate {
  display: inline-flex;
  align-items: center;
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Cinzel', 'Oswald', serif;
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-brass-dim, rgba(197,139,58,0.7));
  padding: var(--sp-space, 3px 14px);
  background: linear-gradient(
    180deg,
    var(--bg-hover, var(--bg-hover))    0%,
    var(--bg-elevated, var(--bg-elevated)) 40%,
    var(--bg-surface, var(--bg-surface))  100%
  );
  border: 1px solid rgba(92, 68, 48, 0.65);
  border-radius: 2px;
  text-shadow: 0 1px 0 rgba(0,0,0,0.85), 0 0 4px rgba(197,139,58,0.15);
  box-shadow:
    inset 0 1px 0 rgba(232,219,178,0.14),
    inset 0 -1px 2px rgba(0,0,0,0.65),
    0 1px 3px rgba(0,0,0,0.75),
    0 0 0 1px rgba(0,0,0,0.5);
  white-space: nowrap;
  z-index: 2;
  animation: mm-nameplate-glow 4s ease-in-out infinite;
  pointer-events: none;
  overflow: hidden;
}

/* Shimmer ефект на nameplae */
.mm-nameplate::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(232,219,178,0.12) 50%,
    transparent 70%
  );
  animation: mm-shimmer 5s ease-in-out infinite;
  pointer-events: none;
}

/* Заклепки по боках nameplate */
.mm-nameplate::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,
    /* decor: metal pewter gradient */
    var(--pewter-light, #7a6a5a) 0%,
    var(--pewter-mid,   #5a5048) 55%,
    var(--pewter-dark,  #3a322a) 100%
  );
  box-shadow: inset 0 0.5px 1px rgba(255,255,255,0.2), 0 1px 2px rgba(0,0,0,0.7);
}


/* ── ORNAMENT DIVIDER: між filter tabs і grid ───────────── */

.mm-ornament-divider {
  display: flex;
  align-items: center;
  gap: 0;
  max-width: var(--max-content, 1400px);
  margin: var(--sp-space, 8px auto 4px);
  padding: 0 var(--sp-space-3, 12px);
}

.mm-ornament-divider__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(92,68,48,0.45) 15%,
    rgba(140,107,70,0.6) 50%,
    rgba(92,68,48,0.45) 85%,
    transparent
  );
  box-shadow: 0 1px 0 rgba(0,0,0,0.3);
}

.mm-ornament-divider__center {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 5px);
  padding: var(--sp-card-pad, 0 8px);
  flex-shrink: 0;
}

.mm-ornament-divider__gear {
  color: var(--accent-brass-dim, rgba(197,139,58,0.55));
  animation: mm-gear-slow 20s linear infinite;
  flex-shrink: 0;);
}

.mm-ornament-divider__rivet {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,
    var(--pewter-light, #7a6a5a) 0%,
    var(--pewter-mid,   #5a5048) 55%,
    var(--pewter-dark,  #3a322a) 100%
  );
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.6),
    inset 0 0.5px 1px rgba(255,255,255,0.2);
  flex-shrink: 0;
  animation: mm-rivet-pop 0.4s ease both;
}

.mm-ornament-divider__rivet--l2 { animation-delay: 0.0s; opacity: 0.5; width: 3px; height: 3px; }
.mm-ornament-divider__rivet--l1 { animation-delay: 0.1s; }
.mm-ornament-divider__rivet--r1 { animation-delay: 0.2s; }
.mm-ornament-divider__rivet--r2 { animation-delay: 0.3s; opacity: 0.5; width: 3px; height: 3px; }


/* ── FILTER TABS ROW: brushed metal toolbar ─────────────── */

.mm-filter-tabs {
  background:
    repeating-linear-gradient(
      93deg,
      rgba(232,219,178,0.008) 0px,
      rgba(232,219,178,0.014) 1px,
      transparent 2px,
      transparent 6px
    ),
    linear-gradient(
      180deg,
      var(--bg-elevated, var(--bg-elevated)) 0%,
      var(--bg-surface,  var(--bg-surface)) 60%,
      var(--bg-base,     var(--bg-base)) 100%
    );
  border: 1px solid var(--border-metal, var(--border-metal));
  border-radius: var(--radius-ui, 3px);
  padding: var(--sp-space, 5px 8px);
  box-shadow:
    inset 0 2px 0 rgba(232,219,178,0.07),
    inset 0 -1px 0 rgba(0,0,0,0.65),
    inset 0 2px 6px rgba(0,0,0,0.45),
    0 0 0 1px rgba(0,0,0,0.6),
    0 2px 6px rgba(0,0,0,0.4);
  position: relative;
}

/* Заклепки на filter tabs row */
.mm-filter-tabs::before,
.mm-filter-tabs::after {
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%,
    /* decor: metal pewter gradient */
    var(--pewter-highlight, #a8998a) 0%,
    var(--pewter-light,     #7a6a5a) 22%,
    var(--pewter-mid,       #5a5048) 55%,
    var(--pewter-dark,      #3a322a) 85%,
    var(--bg-void,          var(--bg-void)) 100%
  );
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.8),
    inset 0 0.5px 1px rgba(255,255,255,0.25);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
}

.mm-filter-tabs::before { left: 6px; }
.mm-filter-tabs::after  { right: 6px; }


/* ── SEARCH WRAP: brushed metal row ─────────────────────── */

.mm-search-wrap {
  position: relative;
}

.mm-search-wrap::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(92,68,48,0.8)' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-size: contain;
  pointer-events: none;
  z-index: 1;
  opacity: 0.7;
}


/* ── SUMMARY BAR: підсилений nameplate контейнер ────────── */

.mm-summary-bar {
  position: relative;
}

/* Заклепки внизу summary-bar (додаткові, по нижніх кутах) */
.mm-summary-bar .mm-summary-stat:first-of-type {
  padding-left: var(--sp-space, 24px);
}


/* ── MODULE CARDS: corner rivets на всіх кутах ───────────── */

/* Кутова заклепка top-left через обгортку mm-card-header::before */
/* (вже є) — додаємо bottom-left через mm-card-footer або тіло картки */

.mm-card {
  position: relative;
}

/* Нижній лівий кут клепки — через shadow-only pseudo (tr вже є ::after) */
/* Замість DOM-клепок — додаємо 2-шаровий кутовий bracket знизу справа */
.mm-card-body::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border-bottom: 1.5px solid rgba(197,139,58,0.22);
  border-right:  1.5px solid rgba(197,139,58,0.22);
  pointer-events: none;
}


/* ── BUTTON DEEP HOVER GLOWS ─────────────────────────────── */

/* Refresh button — гарячий латунний glow при hover */
.mm-refresh-btn:hover,
.mm-refresh-btn:focus-visible {
  box-shadow:
    0 2px 8px rgba(0,0,0,0.4),
    0 0 16px rgba(197,139,58,0.18),
    0 0 32px rgba(197,139,58,0.08),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.35);
}

/* Summary restart button — попереджувальне тепло */
.mm-summary-restart-btn:hover,
.mm-summary-restart-btn:focus-visible {
  box-shadow:
    0 0 12px rgba(200,106,28,0.25),
    0 0 24px rgba(200,106,28,0.10),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

/* Кнопки карток — тонкий brass glow */
.mm-btn:hover,
.mm-btn:focus-visible {
  box-shadow:
    0 2px 8px rgba(0,0,0,0.5),
    0 0 8px rgba(197,139,58,0.10),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

/* Filter tab active — glowing edge */
.mm-filter-tab[aria-selected="true"],
.mm-filter-tab--active {
  box-shadow:
    0 0 10px rgba(197,139,58,0.2),
    0 0 20px rgba(197,139,58,0.08),
    inset 0 1px 0 rgba(232,219,178,0.10),
    inset 0 -1px 2px rgba(0,0,0,0.5);
}


/* ── METRIC TILES: інструментальна фактура ────────────────── */

.mm-metric-tile {
  background:
    repeating-linear-gradient(
      93deg,
      rgba(232,219,178,0.006) 0px,
      rgba(232,219,178,0.012) 1px,
      transparent 2px,
      transparent 8px
    ),
    linear-gradient(
      180deg,
      var(--bg-base, var(--bg-base)) 0%,
      var(--bg-void, var(--bg-void)) 100%
    );
  border: 1px solid rgba(92,68,48,0.5);
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,0.55),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    0 1px 0 rgba(232,219,178,0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mm-metric-tile:hover {
  border-color: rgba(140,107,70,0.45);
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,0.55),
    0 0 8px rgba(197,139,58,0.08);
}


/* ── OFFLINE BANNER: небезпека з hazard stripe ───────────── */

.mm-offline-banner {
  position: relative;
  overflow: hidden;
}

.mm-offline-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: repeating-linear-gradient(
    45deg,
    rgba(200,106,28,0.6) 0,
    rgba(200,106,28,0.6) 6px,
    transparent 6px,
    transparent 12px
  );
  pointer-events: none;
}


/* ── CARD HEADER MODULE-SPECIFIC ACCENTS ─────────────────── */

.mm-card[data-module="observer"]   .mm-card-header::before { border-color: rgba(122,158,90,0.40);  }
.mm-card[data-module="publisher"]  .mm-card-header::before { border-color: rgba(212,162,74,0.40);  }
.mm-card[data-module="executor"]   .mm-card-header::before { border-color: rgba(184,84,52,0.40);   }
.mm-card[data-module="applicant"]  .mm-card-header::before { border-color: rgba(90,130,153,0.40);  }
.mm-card[data-module="nexus"]      .mm-card-header::before { border-color: rgba(74,149,144,0.40);  }
.mm-card[data-module="challenger"] .mm-card-header::before { border-color: rgba(200,106,28,0.40);  }
.mm-card[data-module="paymaster"]  .mm-card-header::before { border-color: rgba(45,74,107,0.50);   }
.mm-card[data-module="system"]     .mm-card-header::before { border-color: rgba(197,139,58,0.45);  }


/* ── DEVTOOLS SUBTITLE: гравійована підпис-стрічка ───────── */

.devtools-subtitle {
  background:
    repeating-linear-gradient(
      93deg,
      rgba(232,219,178,0.006) 0px,
      rgba(232,219,178,0.010) 1px,
      transparent 2px,
      transparent 7px
    ),
    linear-gradient(180deg, var(--bg-base, var(--bg-base)) 0%, var(--bg-void, var(--bg-void)) 100%);
  border-bottom: 1px solid rgba(92,68,48,0.4);
  color: var(--text-muted, var(--text-muted));
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,0.6),
    inset 0 -1px 0 rgba(232,219,178,0.04);
  letter-spacing: 0.04em;
}


/* ── MODULE PANEL WRAPPER (аналог al-module-panel) ──────── */

main#mainContent {
  position: relative;
}

/* Серійний номер-плашка зверху main (аналог al-module-plate) */
main#mainContent::before {
  content: '02';
  position: absolute;
  top: -10px;
  right: 20px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.12em;
  color: rgba(92,68,48,0.5);
  pointer-events: none;
  z-index: 1;
}


/* ═══════════════════════════════════════════════════════════ */
/*   END STEAMPUNK OVERRIDES                                  */
/* ═══════════════════════════════════════════════════════════ */

/* ─── MM: Фіксовані вертикальні труби ─────────────────────── */

.mm-sp-pipes {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.mm-sp-pipe {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 14px;
}

.mm-sp-pipe--left {
  left: 20px;
  background:
    linear-gradient(90deg,
      transparent 0%, rgba(92,68,48,0.12) 30%, rgba(140,107,70,0.28) 46%,
      rgba(168,152,138,0.18) 50%, rgba(92,68,48,0.22) 55%, transparent 80%),
    linear-gradient(90deg,
      /* decor: metal pewter gradient */
      var(--bg-void, var(--bg-void)) 0%, var(--pewter-dark, #3a3028) 20%, var(--pewter-mid, #5a5048) 45%,
      var(--pewter-dark, #3a3028) 75%, var(--bg-void, var(--bg-void)) 100%);
  border-left:  1px solid rgba(58,46,34,0.55);
  border-right: 1px solid rgba(58,46,34,0.55);
}

.mm-sp-pipe--right {
  right: 20px;
  background:
    linear-gradient(90deg,
      transparent 20%, rgba(92,68,48,0.22) 45%, rgba(168,152,138,0.18) 50%,
      rgba(140,107,70,0.28) 54%, rgba(92,68,48,0.12) 70%, transparent 100%),
    linear-gradient(90deg,
      /* decor: metal pewter gradient */
      var(--bg-void, var(--bg-void)) 0%, var(--pewter-dark, #3a3028) 25%, var(--pewter-mid, #5a5048) 55%,
      var(--pewter-dark, #3a3028) 80%, var(--bg-void, var(--bg-void)) 100%);
  border-left:  1px solid rgba(58,46,34,0.55);
  border-right: 1px solid rgba(58,46,34,0.55);
}

/* Фланці кожні 125px */
.mm-sp-pipe--left::before,
.mm-sp-pipe--right::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg,
    transparent        0px,
    transparent        59px,
    rgba(92,68,48,0.45)  60px,
    rgba(168,152,138,0.35) 61px,
    rgba(92,68,48,0.55)  62px,
    rgba(168,152,138,0.25) 63px,
    rgba(92,68,48,0.45)  64px,
    transparent        65px,
    transparent       124px);
}

@media (max-width: 700px) {
  .mm-sp-pipes { display: none; }
}

/* ─── MM: Module Panel (обгортка контенту main) ───────────── */

.mm-module-panel {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--sp-space, 16px 20px 20px);
  background: var(--bg-base, var(--bg-base));
  border: 2px solid var(--border-metal, var(--border-metal));
  border-radius: var(--radius-ui, 4px);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.85),
    0 0 0 3px var(--border-dim, var(--border-dim)),
    0 0 0 4px rgba(0,0,0,0.6),
    0 4px 12px rgba(0,0,0,0.7),
    0 8px 24px rgba(0,0,0,0.4),
    inset 0 0 0 1px rgba(0,0,0,0.75),
    inset 0 0 0 3px var(--border-dim, var(--border-dim)),
    inset 0 0 0 4px rgba(197,139,58,0.08),
    inset 0 2px 0 rgba(232,219,178,0.05),
    inset 0 -2px 0 rgba(0,0,0,0.8);
}

/* Заклепки кутів */
.mm-module-rivet {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(circle at 32% 28%,
    /* decor: metal pewter gradient */
    var(--pewter-highlight, var(--text-bright)) 0%,
    var(--pewter-light, #a09080)    22%,
    var(--pewter-mid, #5a5048)      55%,
    var(--pewter-dark, #3a3028)     85%,
    var(--bg-void, var(--bg-void))        100%);
  border: 1px solid rgba(0,0,0,0.8);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.7),
    inset 0 1px 0.5px rgba(255,255,255,0.35),
    0 2px 3px rgba(0,0,0,0.8);
}

.mm-module-rivet::before {
  content: '';
  position: absolute;
  inset: 2px;
  background:
    linear-gradient(0deg,   transparent 44%, rgba(0,0,0,0.5) 44%, rgba(0,0,0,0.5) 56%, transparent 56%),
    linear-gradient(90deg,  transparent 44%, rgba(0,0,0,0.5) 44%, rgba(0,0,0,0.5) 56%, transparent 56%);
  border-radius: 50%;
}

.mm-module-rivet--tl { top: 8px;    left: 8px;  }
.mm-module-rivet--tr { top: 8px;    right: 8px; }
.mm-module-rivet--bl { bottom: 8px; left: 8px;  }
.mm-module-rivet--br { bottom: 8px; right: 8px; }

/* Шестерня зверху по центру */
.mm-module-gear {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  line-height: 0;
  pointer-events: none;
  color: var(--border-bright, var(--border-bright));
}

/* Серійний номер */
.mm-module-plate {
  position: absolute;
  top: 8px;
  right: 28px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.15em;
  color: var(--text-muted, var(--text-muted));
  opacity: 0.5;
  pointer-events: none;
  z-index: 3;
}


/* ================================================================
   ╔═══════════════════════════════════════════════════════════╗
   ║  STEAMPUNK PARITY v1.0 — 2026-04-13                       ║
   ║  Паритет з «Центром сповіщень» для Менеджера модулів.     ║
   ║  Вимагає: shared/steampunk-kit.css.                       ║
   ╚═══════════════════════════════════════════════════════════╝ */

/* ─── [SP] Module card — forge-bevel + proper border ──── */
.dev-tools-scope .mm-card {
  background: linear-gradient(180deg,
    var(--bg-surface) 0%,
    var(--bg-base) 100%) !important;
  border: 1px solid var(--border-metal) !important;
  border-radius: var(--forge-radius) !important;
  box-shadow:
    var(--forge-shadow),
    inset 0 1px 0 rgba(232,219,178,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.45) !important;
}
.dev-tools-scope .mm-card:not(.mm-card--system):hover,
.dev-tools-scope .mm-card:not(.mm-card--system):focus-within {
  background: linear-gradient(180deg,
    var(--bg-elevated) 0%,
    var(--bg-surface) 100%) !important;
  border-color: color-mix(in srgb, var(--module-accent, var(--accent-brass)) 55%, var(--border-metal)) !important;
  box-shadow:
    0 6px 16px rgba(0,0,0,0.6),
    0 0 0 1px color-mix(in srgb, var(--module-accent, var(--accent-brass)) 30%, transparent),
    inset 0 1px 0 rgba(232,219,178,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.45) !important;
}

/* Card accent left — ширина 4px + brass glow */
.dev-tools-scope .mm-card::before {
  width: 4px !important;
  opacity: 0.7;
  box-shadow: 0 0 6px color-mix(in srgb, var(--module-accent, var(--accent-brass)) 40%, transparent);
}
.dev-tools-scope .mm-card:hover::before,
.dev-tools-scope .mm-card:focus-within::before {
  opacity: 1;
  box-shadow: 0 0 10px color-mix(in srgb, var(--module-accent, var(--accent-brass)) 55%, transparent);
}

/* ─── [SP] Module number tag → brass nameplate ────────── */
.dev-tools-scope .mm-card-num {
  background: linear-gradient(180deg,
    var(--brass-plate-hi) 0%,
    var(--brass-plate-mid) 45%,
    var(--brass-plate-low) 100%) !important;
  border: 1px solid rgba(0,0,0,0.55) !important;
  border-radius: 2px !important;
  color: var(--brass-plate-ink) !important;
  font-family: 'Oswald', sans-serif !important;
  font-weight: 600 !important;
  font-size: 9px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  text-shadow:
    0 1px 0 rgba(232,208,122,0.45),
    0 -1px 0 rgba(0,0,0,0.5) !important;
  box-shadow:
    inset 0 1px 0.5px rgba(232,208,122,0.40),
    inset 0 -1px 0.5px rgba(0,0,0,0.45),
    0 1px 3px rgba(0,0,0,0.5) !important;
  padding: var(--sp-space, 2px 8px !important);
}

/* Card name — Oswald */
.dev-tools-scope .mm-card-name {
  font-family: 'Oswald', sans-serif !important;
  letter-spacing: 0.08em !important;
  color: color-mix(in srgb, var(--module-accent, var(--text-bright)) 75%, var(--text-body)) !important;
}
.dev-tools-scope .mm-card-ua-name {
  font-family: var(--font-ui, 'Oswald', sans-serif) !important;
  color: var(--text-muted) !important;
}
.dev-tools-scope .mm-card-desc {
  font-family: 'IBM Plex Mono', monospace !important;
  color: var(--text-body) !important;
}

/* ─── [SP] TOGGLE SWITCH → BRASS LEVER ─────────────────── */
.dev-tools-scope .mm-toggle-track {
  width: 44px !important;
  height: 22px !important;
  background: linear-gradient(180deg,
    var(--bg-void) 0%,
    var(--bg-base) 100%) !important;
  border: 1px solid var(--border-metal) !important;
  border-radius: var(--radius-ui, 4px)!important;
  box-shadow:
    inset 0 2px 3px rgba(0,0,0,0.65),
    inset 0 -1px 0 rgba(232,219,178,0.06) !important;
  position: relative;
}
/* 0/1 tick marks */
.dev-tools-scope .mm-toggle-track::before {
  content: 'O';
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  font: 600 7px/1 'IBM Plex Mono', monospace;
  color: var(--text-muted);
  opacity: 0.45;
  letter-spacing: 0;
  pointer-events: none;
  z-index: 1;
}
/* Brass knob (thumb) — replaces default ::after styling */
.dev-tools-scope .mm-toggle-track::after {
  top: 2px !important;
  left: 2px !important;
  width: 16px !important;
  height: 16px !important;
  background: radial-gradient(circle at 30% 25%,
    color-mix(in srgb, white 20%, var(--accent-brass) 80%) 0%,
    var(--accent-brass) 55%,
    color-mix(in srgb, var(--accent-brass) 45%, black) 100%) !important;
  border: 1px solid rgba(0,0,0,0.55);
  box-shadow:
    0 1px 2px rgba(0,0,0,0.6),
    inset 0 1px 1px rgba(255,220,150,0.40),
    inset 0 -1px 1px rgba(0,0,0,0.25) !important;
  transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1), background 180ms ease-out !important;
  z-index: 2;
}

/* ON state — green brass lever */
.dev-tools-scope .mm-toggle-input:checked + .mm-toggle-track {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--sev-ok) 25%, var(--bg-base)) 0%,
    color-mix(in srgb, var(--sev-ok) 12%, var(--bg-void)) 100%) !important;
  border-color: color-mix(in srgb, var(--sev-ok) 55%, var(--border-metal)) !important;
  box-shadow:
    inset 0 2px 3px rgba(0,0,0,0.55),
    inset 0 -1px 0 rgba(232,219,178,0.08),
    0 0 6px color-mix(in srgb, var(--sev-ok) 30%, transparent) !important;
}
.dev-tools-scope .mm-toggle-input:checked + .mm-toggle-track::before {
  content: 'I';
  left: auto !important;
  right: 8px !important;
  color: var(--sev-ok) !important;
  opacity: 0.75;
}
.dev-tools-scope .mm-toggle-input:checked + .mm-toggle-track::after {
  transform: translateX(22px) !important;
  background: radial-gradient(circle at 30% 25%,
    color-mix(in srgb, white 18%, var(--sev-ok) 82%) 0%,
    var(--sev-ok) 55%,
    color-mix(in srgb, var(--sev-ok) 45%, black) 100%) !important;
}

/* Focus ring */
.dev-tools-scope .mm-toggle-input:focus-visible + .mm-toggle-track {
  box-shadow:
    inset 0 2px 3px rgba(0,0,0,0.55),
    0 0 0 2px rgba(197,139,58,0.35) !important;
}

/* ─── [SP] Status dot → industrial LED ─────────────────── */
.dev-tools-scope .mm-status-dot {
  width: 9px !important;
  height: 9px !important;
  background: radial-gradient(circle at 35% 30%,
    var(--text-muted) 0%,
    var(--text-disabled) 100%) !important;
  border: 1px solid rgba(0,0,0,0.5);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.18),
    inset 0 -1px 1px rgba(0,0,0,0.35),
    0 0 2px rgba(0,0,0,0.5) !important;
  animation: none !important;
}
.dev-tools-scope .mm-status-dot--active {
  background: radial-gradient(circle at 35% 30%,
    color-mix(in srgb, white 15%, var(--sev-ok) 85%) 0%,
    var(--sev-ok) 55%,
    color-mix(in srgb, var(--sev-ok) 50%, black) 100%) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.30),
    inset 0 -1px 1px rgba(0,0,0,0.35),
    0 0 4px color-mix(in srgb, var(--sev-ok) 50%, transparent) !important;
  --sp-lamp-color: var(--sev-ok);
  animation: sp-lamp-pulse 2.4s ease-in-out infinite !important;
}
.dev-tools-scope .mm-status-dot--error {
  background: radial-gradient(circle at 35% 30%,
    color-mix(in srgb, white 15%, var(--sev-error) 85%) 0%,
    var(--sev-error) 55%,
    color-mix(in srgb, var(--sev-error) 50%, black) 100%) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.30),
    inset 0 -1px 1px rgba(0,0,0,0.35),
    0 0 6px color-mix(in srgb, var(--sev-error) 60%, transparent) !important;
  --sp-lamp-color: var(--sev-error);
  animation: sp-lamp-pulse 1.6s ease-in-out infinite !important;
}
.dev-tools-scope .mm-status-dot--offline {
  background: radial-gradient(circle at 35% 30%,
    color-mix(in srgb, white 12%, var(--sev-warn) 88%) 0%,
    var(--sev-warn) 60%,
    color-mix(in srgb, var(--sev-warn) 50%, black) 100%) !important;
  --sp-lamp-color: var(--sev-warn);
  animation: sp-lamp-pulse 2.8s ease-in-out infinite !important;
}
.dev-tools-scope .mm-status-dot--disabled {
  opacity: 0.5;
}

.dev-tools-scope .mm-status-label {
  font-family: var(--font-ui, 'Oswald', sans-serif); /* UPPERCASE */
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
}
.dev-tools-scope .mm-status-label--active   { color: var(--sev-ok) !important; }
.dev-tools-scope .mm-status-label--error    { color: var(--sev-error) !important; }
.dev-tools-scope .mm-status-label--offline,
.dev-tools-scope .mm-status-label--loading { color: var(--sev-warn) !important; }

/* ─── [SP] Toolbar stats → riveted mini-plates ──────────── */
.dev-tools-scope .mm-toolbar {
  background: linear-gradient(180deg,
    var(--bg-surface) 0%,
    var(--bg-base) 100%) !important;
  border: 1px solid var(--border-metal) !important;
  border-radius: var(--forge-radius) !important;
  box-shadow: var(--forge-bevel-strong) !important;
  padding: var(--sp-space, 10px 14px !important);
}
.dev-tools-scope .mm-stat {
  background: var(--bg-base) !important;
  border: 1px solid var(--border-metal) !important;
  border-radius: 2px !important;
  box-shadow: var(--forge-bevel) !important;
  padding: var(--sp-space, 3px 10px !important);
  font-family: var(--font-ui, 'Oswald', sans-serif); /* UPPERCASE */
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  font-size: 10px !important;
}
.dev-tools-scope .mm-stat-active {
  color: var(--sev-ok) !important;
  border-color: var(--sev-ok-border) !important;
}
.dev-tools-scope .mm-stat-error {
  color: var(--sev-error) !important;
  border-color: var(--sev-error-border) !important;
}
.dev-tools-scope .mm-stat-disabled {
  color: var(--text-muted) !important;
}

/* ─── [SP] Search input — inset forge-surface ──────────── */
.dev-tools-scope .mm-toolbar-search,
.dev-tools-scope .mm-search-wrap {
  background: var(--bg-void) !important;
  border: 1px solid var(--border-metal) !important;
  border-radius: 2px !important;
  box-shadow: var(--forge-inset) !important;
}
.dev-tools-scope .mm-search {
  background: transparent !important;
  border: none !important;
  color: var(--text-bright) !important;
  font-family: 'IBM Plex Mono', monospace !important;
  letter-spacing: 0.04em;
}
.dev-tools-scope .mm-search::placeholder {
  color: var(--text-muted) !important;
  font-family: 'IBM Plex Mono', monospace;
}
.dev-tools-scope .mm-search-icon {
  color: var(--accent-brass) !important;
  opacity: 0.6;
}

/* ─── [SP] Filter tabs → riveted brass toggle ───────────── */
.dev-tools-scope .mm-filter-tab {
  background: var(--bg-base) !important;
  border: 1px solid var(--border-metal) !important;
  border-radius: 2px !important;
  color: var(--text-muted) !important;
  font-family: 'Oswald', sans-serif !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: var(--sp-space, 4px 12px !important);
  box-shadow:
    inset 0 1px 0 rgba(232,219,178,0.06),
    0 2px 4px rgba(0,0,0,0.5) !important;
}
.dev-tools-scope .mm-filter-tab:hover {
  border-color: var(--accent-brass) !important;
  color: var(--accent-brass) !important;
}
.dev-tools-scope .mm-filter-tab--active {
  background: linear-gradient(180deg,
    rgba(197,139,58,0.22) 0%,
    rgba(197,139,58,0.08) 100%) !important;
  border-color: var(--accent-brass) !important;
  color: var(--accent-brass) !important;
  box-shadow:
    inset 0 1px 0 rgba(232,219,178,0.14),
    inset 0 -1px 0 rgba(0,0,0,0.45),
    0 0 8px color-mix(in srgb, var(--accent-brass) 35%, transparent) !important;
}
.dev-tools-scope .mm-filter-tab--problems.mm-filter-tab--active {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--sev-error) 25%, transparent) 0%,
    color-mix(in srgb, var(--sev-error) 10%, transparent) 100%) !important;
  border-color: var(--sev-error) !important;
  color: var(--sev-error) !important;
  box-shadow:
    inset 0 1px 0 rgba(232,219,178,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.45),
    0 0 8px color-mix(in srgb, var(--sev-error) 40%, transparent) !important;
}

/* ─── [SP] Module buttons → forge-bevel variants ────────── */
.dev-tools-scope .mm-btn {
  background: linear-gradient(180deg,
    var(--bg-elevated) 0%,
    var(--bg-base) 100%) !important;
  border: 1px solid var(--border-metal) !important;
  border-radius: 2px !important;
  color: var(--text-body) !important;
  font-family: 'Oswald', sans-serif !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  box-shadow:
    inset 0 1px 0 rgba(232,219,178,0.06),
    0 2px 4px rgba(0,0,0,0.5) !important;
}
.dev-tools-scope .mm-btn:hover {
  border-color: var(--accent-brass) !important;
  color: var(--accent-brass) !important;
  box-shadow:
    inset 0 1px 0 rgba(232,219,178,0.10),
    0 2px 6px rgba(0,0,0,0.5),
    0 0 8px rgba(197,139,58,0.20) !important;
}
.dev-tools-scope .mm-btn--restart {
  color: var(--sev-warn) !important;
  border-color: color-mix(in srgb, var(--sev-warn) 45%, var(--border-metal)) !important;
}
.dev-tools-scope .mm-btn--restart:hover {
  background: linear-gradient(180deg,
    var(--sev-warn-bg) 0%,
    var(--bg-base) 100%) !important;
  border-color: var(--sev-warn) !important;
  color: var(--sev-warn) !important;
}
.dev-tools-scope .mm-btn--start {
  color: var(--sev-ok) !important;
  border-color: color-mix(in srgb, var(--sev-ok) 45%, var(--border-metal)) !important;
}
.dev-tools-scope .mm-btn--stop {
  color: var(--sev-error) !important;
  border-color: color-mix(in srgb, var(--sev-error) 45%, var(--border-metal)) !important;
}

.dev-tools-scope .mm-refresh-btn {
  background: linear-gradient(180deg,
    var(--bg-elevated) 0%,
    var(--bg-base) 100%) !important;
  border: 1px solid var(--border-metal) !important;
  border-radius: 2px !important;
  color: var(--text-body) !important;
  box-shadow:
    inset 0 1px 0 rgba(232,219,178,0.06),
    0 2px 4px rgba(0,0,0,0.5) !important;
}
.dev-tools-scope .mm-refresh-btn:hover {
  border-color: var(--accent-brass) !important;
  color: var(--accent-brass) !important;
}

/* ─── [SP] Summary restart button — brass pulse ─────────── */
.dev-tools-scope .mm-summary-restart-btn {
  background: linear-gradient(180deg,
    var(--sev-warn-bg) 0%,
    var(--bg-base) 100%) !important;
  border: 1px solid var(--sev-warn) !important;
  border-radius: 2px !important;
  color: var(--sev-warn) !important;
  font-family: 'Oswald', sans-serif !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  box-shadow:
    inset 0 1px 0 rgba(232,219,178,0.08),
    0 0 10px color-mix(in srgb, var(--sev-warn) 35%, transparent) !important;
}

/* ─── [SP] Badges (wip / pending / err-count) ──────────── */
.dev-tools-scope .mm-badge-wip {
  background: var(--sev-warn-bg) !important;
  border: 1px solid var(--sev-warn-border) !important;
  border-radius: 2px !important;
  color: var(--sev-warn) !important;
  font-family: 'IBM Plex Mono', monospace !important;
  letter-spacing: 0.06em !important;
  box-shadow: var(--forge-bevel) !important;
}
.dev-tools-scope .mm-badge-err-count {
  background: var(--sev-error-bg) !important;
  border: 1px solid var(--sev-error-border) !important;
  border-radius: 2px !important;
  color: var(--sev-error) !important;
  font-family: 'IBM Plex Mono', monospace !important;
  box-shadow: var(--forge-bevel) !important;
}
.dev-tools-scope .mm-badge-pending {
  background: var(--sev-warn-bg) !important;
  border: 1px solid var(--sev-warn-border) !important;
  border-radius: 2px !important;
  color: var(--sev-warn) !important;
  font-family: 'IBM Plex Mono', monospace !important;
  box-shadow: var(--forge-bevel) !important;
}

/* ─── [SP] Modal — forge frame + brass nameplate header ── */
.dev-tools-scope .mm-modal-overlay {
  background: rgba(13, 9, 7, 0.80) !important;
}
.dev-tools-scope .mm-modal {
  background: linear-gradient(180deg,
    var(--bg-surface) 0%,
    var(--bg-base) 100%) !important;
  border: 2px solid var(--border-metal) !important;
  border-radius: var(--forge-radius) !important;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.75),
    0 0 0 3px var(--border-dim),
    0 12px 40px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(232,219,178,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.5) !important;
}
.dev-tools-scope .mm-modal-header {
  background:
    repeating-linear-gradient(180deg,
      rgba(232,219,178,0.012) 0px,
      rgba(232,219,178,0.012) 1px,
      transparent 1px,
      transparent 4px),
    linear-gradient(180deg,
      rgba(42, 32, 24, 0.5) 0%,
      rgba(20, 16, 12, 0.3) 100%) !important;
  border-bottom: 1px solid var(--border-metal) !important;
  font-family: 'Oswald', sans-serif !important;
  letter-spacing: 0.08em !important;
  color: var(--text-bright) !important;
}
.dev-tools-scope .mm-modal-close {
  background: transparent !important;
  border: 1px solid var(--border-metal) !important;
  border-radius: 2px !important;
  color: var(--text-muted) !important;
}
.dev-tools-scope .mm-modal-close:hover {
  border-color: var(--sev-error) !important;
  color: var(--sev-error) !important;
  background: var(--sev-error-bg) !important;
}
.dev-tools-scope .mm-logs-content {
  background: var(--bg-void) !important;
  border: 1px solid var(--border-metal) !important;
  border-radius: 2px !important;
  box-shadow: var(--forge-inset) !important;
  font-family: 'IBM Plex Mono', monospace !important;
  color: var(--text-body) !important;
}

/* Confirm dialog — forge + hazard header */
.dev-tools-scope .mm-confirm {
  background: linear-gradient(180deg,
    var(--bg-surface) 0%,
    var(--bg-base) 100%) !important;
  border: 1px solid var(--border-metal) !important;
  border-radius: var(--forge-radius) !important;
  box-shadow: var(--forge-bevel-strong) !important;
}
.dev-tools-scope .mm-confirm-ok {
  background: linear-gradient(180deg,
    var(--sev-ok-bg) 0%,
    var(--bg-base) 100%) !important;
  border: 1px solid var(--sev-ok) !important;
  color: var(--sev-ok) !important;
  font-family: 'Oswald', sans-serif !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}
.dev-tools-scope .mm-confirm-cancel {
  background: var(--bg-base) !important;
  border: 1px solid var(--border-metal) !important;
  color: var(--text-muted) !important;
  font-family: 'Oswald', sans-serif !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

/* ─── [SP] Toast — brass forge + hazard accent ──────────── */
.dev-tools-scope .mm-toast {
  background: linear-gradient(180deg,
    var(--bg-surface) 0%,
    var(--bg-base) 100%) !important;
  border: 1px solid var(--border-metal) !important;
  border-radius: var(--forge-radius) !important;
  box-shadow: var(--forge-bevel-strong) !important;
  color: var(--text-bright) !important;
  font-family: 'IBM Plex Mono', monospace !important;
  position: relative;
  overflow: hidden;
}
.dev-tools-scope .mm-toast::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent-brass);
}

/* ─── [SP] Uptime bars → steam gauge ─────────────────────── */
.dev-tools-scope .mm-uptime-bars {
  background: var(--bg-void) !important;
  border: 1px solid var(--border-metal) !important;
  border-radius: 2px !important;
  box-shadow: var(--forge-inset) !important;
  padding: var(--sp-space, 4px !important);
}
.dev-tools-scope .mm-uptime-bar {
  background: linear-gradient(180deg,
    color-mix(in srgb, white 15%, var(--sev-ok) 85%) 0%,
    var(--sev-ok) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(232,219,178,0.25),
    inset 0 -1px 0 rgba(0,0,0,0.4) !important;
}

/* ─── [SP] Metric tiles — riveted plates ─────────────────── */
.dev-tools-scope .mm-metric-tile {
  background: var(--bg-base) !important;
  border: 1px solid var(--border-metal) !important;
  border-radius: 2px !important;
  box-shadow: var(--forge-bevel) !important;
  padding: var(--sp-space, 6px 10px !important);
}
.dev-tools-scope .mm-tile-label {
  font-family: var(--font-ui, 'Oswald', sans-serif) !important;
  color: var(--text-muted) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  font-size: 9px !important;
}
.dev-tools-scope .mm-tile-value {
  font-family: 'Oswald', sans-serif !important;
  color: var(--text-bright) !important;
  letter-spacing: 0.04em;
}

/* ─── [SP] Error preview → hazard-framed card ─────────── */
.dev-tools-scope .mm-card--error {
  border-left: 3px solid var(--sev-error) !important;
}
.dev-tools-scope .mm-card--error::before {
  opacity: 0.9 !important;
  box-shadow: 0 0 10px color-mix(in srgb, var(--sev-error) 50%, transparent) !important;
}
.dev-tools-scope .mm-error-preview {
  background: var(--sev-error-bg) !important;
  border: 1px solid var(--sev-error-border) !important;
  border-radius: 2px !important;
  color: var(--sev-error) !important;
  font-family: 'IBM Plex Mono', monospace !important;
  box-shadow: var(--forge-bevel) !important;
}

/* ─── [SP] Ornament divider enhancements ───────────────── */
.dev-tools-scope .mm-ornament-divider__rivet {
  background: radial-gradient(circle at 32% 28%,
    var(--pewter-highlight), var(--pewter-mid) 60%, var(--pewter-dark)) !important;
  border: 1px solid rgba(0,0,0,0.6);
  box-shadow: inset 0 1px 0.5px rgba(255,255,255,0.25);
}

/* ─── [SP] Module plate inside panel wrap — brass nameplate ─ */
.dev-tools-scope .mm-module-plate {
  top: 12px !important;
  right: 22px !important;
  padding: var(--sp-space, 2px 8px !important);
  background: linear-gradient(180deg,
    var(--brass-plate-hi) 0%,
    var(--brass-plate-mid) 50%,
    var(--brass-plate-low) 100%) !important;
  border: 1px solid rgba(0,0,0,0.55);
  border-radius: 2px;
  font-family: 'Oswald', sans-serif !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  color: var(--brass-plate-ink) !important;
  opacity: 1 !important;
  text-shadow:
    0 1px 0 rgba(232,208,122,0.40),
    0 -1px 0 rgba(0,0,0,0.5);
  box-shadow:
    inset 0 1px 0.5px rgba(232,208,122,0.40),
    inset 0 -1px 0.5px rgba(0,0,0,0.45),
    0 1px 3px rgba(0,0,0,0.5);
}

/* ─── [SP] Block header — warm metal plate ─────────────── */
.dev-tools-scope .mm-block-header {
  background: linear-gradient(180deg,
    var(--bg-surface) 0%,
    var(--bg-base) 100%) !important;
  border: 1px solid var(--border-metal) !important;
  border-radius: var(--forge-radius) !important;
  box-shadow: var(--forge-bevel) !important;
}
.dev-tools-scope .mm-block-title {
  font-family: 'Oswald', sans-serif !important;
  color: var(--text-bright) !important;
  letter-spacing: 0.1em !important;
}
.dev-tools-scope .mm-block-icon {
  color: var(--accent-brass) !important;
}

/* ─── [SP] Module panel inner — subtle blueprint grid ──── */
.dev-tools-scope .mm-module-panel {
  background:
    linear-gradient(rgba(197,139,58,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(197,139,58,0.025) 1px, transparent 1px),
    var(--bg-base) !important;
  background-size: 32px 32px, 32px 32px, auto !important;
}

/* ─── [SP] Offline banner → hazard-framed ──────────────── */
.dev-tools-scope .mm-offline-banner {
  background: var(--sev-error-bg) !important;
  border: 1px solid var(--sev-error-border) !important;
  border-radius: var(--forge-radius) !important;
  color: var(--sev-error) !important;
  font-family: 'IBM Plex Mono', monospace !important;
  box-shadow: var(--forge-bevel) !important;
  position: relative;
  overflow: hidden;
}
.dev-tools-scope .mm-offline-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: repeating-linear-gradient(
    45deg,
    var(--sev-error) 0 8px,
    transparent 8px 16px);
  opacity: 0.8;
}

/* ─── [SP] Flash animation → brass glow ─────────────────── */
@keyframes mm-flash-brass {
  0%   { box-shadow: 0 0 0 0 rgba(197,139,58,0.6); }
  100% { box-shadow: 0 0 0 12px rgba(197,139,58,0); }
}
.dev-tools-scope .mm-card--flash {
  animation: mm-flash-brass 1.2s ease-out 1 !important;
}

/* STEAMPUNK PARITY END ─────────────────────────────────── */


/* ══════════════════════════════════════════════════════════ */
/* ═   v5.0 PHASE 2 — Brainstorm улучшення                 ═ */
/* ═   Джерело: lively-drifting-puddle.md                  ═ */
/* ══════════════════════════════════════════════════════════ */

/* ─── V-5: Живий індикатор модулів у summary bar ─────────── */
.dev-tools-scope .mm-module-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space, 3px);
  padding: var(--sp-space, 3px 6px);
  margin-right: var(--sp-space, 10px);
  background: rgba(8, 6, 4, 0.55);
  border: 1px solid var(--border-metal, rgba(92, 68, 48, 0.55));
  border-radius: var(--radius-ui, 3px);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}
.dev-tools-scope .mm-mi-square {
  display: inline-block;
  width: 10px;
  height: 14px;
  border-radius: var(--radius-ui, 1px);
  cursor: pointer;
  position: relative;
  background: var(--sq-color, var(--border-dim));
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.5),
    inset 0 1px 1px rgba(255, 255, 255, 0.08);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.dev-tools-scope .mm-mi-square:hover {
  transform: translateY(-1px) scale(1.12);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.5),
    0 0 6px var(--sq-color, currentColor);
}
.dev-tools-scope .mm-mi-square--system   { --sq-color: var(--accent-brass, var(--accent-brass)); }
.dev-tools-scope .mm-mi-square--active   { --sq-color: var(--success, #5ea88a); }
.dev-tools-scope .mm-mi-square--disabled { --sq-color: var(--border-dim); opacity: 0.55; }
.dev-tools-scope .mm-mi-square--error    {
  --sq-color: var(--danger, #c06060);
  animation: mm-mi-pulse 1.6s ease-in-out infinite;
}
.dev-tools-scope .mm-mi-square--offline,
.dev-tools-scope .mm-mi-square--loading  { --sq-color: var(--bg-surface); opacity: 0.4; }
@keyframes mm-mi-pulse {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(0,0,0,.5), 0 0 2px var(--sq-color); }
  50%      { box-shadow: inset 0 0 0 1px rgba(0,0,0,.5), 0 0 8px var(--sq-color); }
}
@media (prefers-reduced-motion: reduce) {
  .dev-tools-scope .mm-mi-square--error { animation: none; }
}


/* ─── V-7: Log line border-left by module ────────────────── */
.dev-tools-scope .mm-logs-content .log-line--mod {
  display: block;
  padding-left: var(--sp-space, 8px);
  border-left: 2px solid transparent;
  margin: 1px 0;
}
.dev-tools-scope .mm-logs-content .log-line--mod-observer   { border-left-color: var(--mod-observer,   #7a9e5a); }
.dev-tools-scope .mm-logs-content .log-line--mod-publisher  { border-left-color: var(--mod-publisher,  #d4a24a); }
.dev-tools-scope .mm-logs-content .log-line--mod-executor   { border-left-color: var(--mod-executor,   #b85434); }
.dev-tools-scope .mm-logs-content .log-line--mod-applicant  { border-left-color: var(--mod-applicant,  #5a8299); }
.dev-tools-scope .mm-logs-content .log-line--mod-nexus      { border-left-color: var(--mod-nexus,      #4a9590); }
.dev-tools-scope .mm-logs-content .log-line--mod-challenger { border-left-color: var(--mod-challenger, #c86a1c); }
.dev-tools-scope .mm-logs-content .log-line--mod-paymaster  { border-left-color: var(--mod-paymaster,  #2d4a6b); }
.dev-tools-scope .mm-logs-content .log-line--mod-server     { border-left-color: var(--accent-brass,   var(--accent-brass)); }

/* ─── V-2: Gradient accent on active cards ───────────────── */
.dev-tools-scope .mm-card[data-status="active"] {
  background-image: linear-gradient(
    135deg,
    color-mix(in srgb, var(--module-accent, var(--accent-brass)) 5%, transparent) 0%,
    transparent 42%
  );
}
.dev-tools-scope .mm-card[data-status="error"] {
  background-image: linear-gradient(
    135deg,
    color-mix(in srgb, var(--danger) 8%, transparent) 0%,
    transparent 40%
  );
}

/* ─── V-9: Disabled vs Offline — diagonal hatching ───────── */
.dev-tools-scope .mm-card[data-status="disabled"] {
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(92, 68, 48, 0.06) 0 6px,
      transparent 6px 12px
    );
}

/* ─── V-6: Scan-line skeleton (blueprint-style) ──────────── */
.dev-tools-scope .mm-skeleton-card::after {
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(197, 139, 58, 0.05) 45%,
    rgba(197, 139, 58, 0.09) 50%,
    rgba(197, 139, 58, 0.05) 55%,
    transparent 100%
  ) !important;
  animation: mm-skeleton-scan 2.2s linear infinite !important;
}
@keyframes mm-skeleton-scan {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100%);  }
}
@media (prefers-reduced-motion: reduce) {
  .dev-tools-scope .mm-skeleton-card::after { animation: none !important; }
}

/* ─── S-1/V-1: Logs modal — Steampunk border/terminal ────── */
.dev-tools-scope #logsOverlay .mm-modal {
  border: 1px solid var(--border-metal, rgba(92, 68, 48, 0.6));
  box-shadow:
    0 0 0 1px rgba(197, 139, 58, 0.22),
    0 16px 48px rgba(0, 0, 0, 0.65);
}
.dev-tools-scope #logsOverlay .mm-modal::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--accent-brass, var(--accent-brass)) 15%,
    var(--accent-brass, var(--accent-brass)) 85%,
    transparent 100%
  );
  opacity: 0.55;
  pointer-events: none;
}
.dev-tools-scope #logsOverlay .mm-modal-header .material-symbols-outlined {
  color: var(--accent-brass, var(--accent-brass)) !important;
}

/* ─── S-2: Steampunk confirm dialog ──────────────────────── */
.dev-tools-scope .mm-confirm {
  position: relative;
  border: 1px solid var(--border-metal, rgba(92, 68, 48, 0.6));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 16px 48px rgba(0, 0, 0, 0.65);
}
.dev-tools-scope .mm-confirm::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--accent-brass, var(--accent-brass)) 20%,
    var(--accent-brass, var(--accent-brass)) 80%,
    transparent 100%
  );
  opacity: 0.6;
  pointer-events: none;
}
.dev-tools-scope .mm-confirm h3 {
  font-family: 'Cinzel', 'Oswald', serif;
  letter-spacing: 0.5px;
  color: var(--text-bright);
}
.dev-tools-scope .mm-confirm .dt-bolt {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 35%,
    var(--border-bright) 0%,
    var(--border-dim) 60%,
    var(--bg-void) 100%
  );
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.6), inset 0 0 1px rgba(255, 220, 160, 0.35);
  pointer-events: none;
}
.dev-tools-scope .mm-confirm .dt-bolt--tl { top: 6px;    left: 6px;   }
.dev-tools-scope .mm-confirm .dt-bolt--tr { top: 6px;    right: 6px;  }
.dev-tools-scope .mm-confirm .dt-bolt--bl { bottom: 6px; left: 6px;   }
.dev-tools-scope .mm-confirm .dt-bolt--br { bottom: 6px; right: 6px;  }

/* ─── S-4: Toast undo button — tokenized ──────────────────── */
.dev-tools-scope .mm-toast-undo {
  background: rgba(197, 139, 58, 0.14);
  border: 1px solid rgba(197, 139, 58, 0.35);
  border-radius: var(--radius-ui, 3px);
  color: var(--accent-brass, var(--accent-brass));
  font-family: 'IBM Plex Mono', var(--mm-mono, monospace);
  font-size: 9px;
  padding: var(--sp-space, 2px 7px);
  cursor: pointer;
  margin-left: var(--sp-space, 8px);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.dev-tools-scope .mm-toast-undo:hover,
.dev-tools-scope .mm-toast-undo:focus-visible {
  background: rgba(197, 139, 58, 0.26);
  border-color: rgba(197, 139, 58, 0.55);
  outline: none;
}

/* ─── F-7: Countdown state for summary restart btn ────────── */
.dev-tools-scope .mm-summary-restart-btn--countdown {
  background: linear-gradient(
    90deg,
    rgba(94, 168, 138, 0.22) 0%,
    rgba(94, 168, 138, 0.08) 100%
  );
  border-color: rgba(94, 168, 138, 0.45);
  color: var(--success, #5ea88a);
  pointer-events: none;
}

/* ─── F-8: Split filter tab styling (errors vs disabled) ──── */
.dev-tools-scope .mm-filter-tab--errors.has-problems:not(.mm-filter-tab--active) {
  color: var(--danger, #c06060);
  border-color: rgba(192, 96, 96, 0.35);
}
.dev-tools-scope .mm-filter-tab--errors.has-problems.mm-filter-tab--active {
  background: rgba(192, 96, 96, 0.18);
  border-color: rgba(192, 96, 96, 0.55);
  color: var(--danger, #c06060);
}
.dev-tools-scope .mm-filter-tab--disabled.has-disabled:not(.mm-filter-tab--active) {
  color: var(--text-muted);
  border-color: rgba(160, 140, 100, 0.28);
}
.dev-tools-scope .mm-filter-tab--disabled.has-disabled.mm-filter-tab--active {
  background: rgba(160, 140, 100, 0.12);
  border-color: rgba(160, 140, 100, 0.4);
  color: var(--text-body);
}

/* ─── F-9: WIP badge as link + Paymaster Dev button ───────── */
.dev-tools-scope .mm-badge-wip--link {
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.dev-tools-scope .mm-badge-wip--link:hover,
.dev-tools-scope .mm-badge-wip--link:focus-visible {
  background: rgba(200, 106, 28, 0.28);
  box-shadow: 0 0 0 1px rgba(200, 106, 28, 0.5);
  outline: none;
}
.dev-tools-scope .mm-btn--devlink {
  text-decoration: none;
  background: rgba(45, 74, 107, 0.22);
  border: 1px solid rgba(45, 74, 107, 0.48);
  color: var(--mod-paymaster, #5a7fa8);
}
.dev-tools-scope .mm-btn--devlink:hover,
.dev-tools-scope .mm-btn--devlink:focus-visible {
  background: rgba(45, 74, 107, 0.38);
  border-color: rgba(100, 140, 190, 0.7);
  outline: none;
}
.dev-tools-scope .mm-btn--devlink .material-symbols-outlined {
  font-size: 13px;
}

/* PHASE 2 END ───────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════
   BALKA v6 — MODULE MANAGER
   Clock panel + header layout fixes
   ═══════════════════════════════════════════════════════════ */

/* ── Header: actions праворуч від back button ── */
.dev-tools-scope .mm-hdr-actions {
  margin-left: auto;
}

/* ── Clock panel: фіксований top-right ── */
.dev-tools-scope .al-clock-panel {
  position: fixed;
  top: calc(var(--header-h, 96px) / 2);
  transform: translateY(-50%);
  right: max(20px, calc((100vw - var(--max-width, 1400px)) / 2 + 20px));
  z-index: 100;
  pointer-events: none;
}

/* ── Clock unit: brass корпус ── */
.dev-tools-scope .al-clock-panel .clock-unit {
  position: relative;
  width: 164px;
  padding: var(--sp-space, 4px 5px 3px);
  border-radius: var(--radius-ui, 4px);
  background:
    repeating-linear-gradient(0deg, transparent, transparent 12px, rgba(0,0,0,0.03) 12px, rgba(0,0,0,0.03) 13px),
    linear-gradient(165deg, var(--border-bright) 0%, var(--border-bright) 15%, var(--border-metal) 40%, var(--border-dim) 60%, var(--border-metal) 85%, var(--border-bright) 100%);
  box-shadow:
    inset 0 1px 1px rgba(180,140,90,0.25),
    inset 0 -1px 2px rgba(40,25,10,0.5),
    0 0 0 1px var(--bg-elevated),
    0 0 0 2px var(--border-metal),
    0 0 0 3px var(--bg-elevated),
    0 3px 8px rgba(0,0,0,0.6);
}

/* ── SVG розмір ── */
.dev-tools-scope .al-clock-panel .al-clock-svg {
  display: block;
  width: 130px;
  height: 47px;
  overflow: visible;
}

/* ── HTML overlay поверх SVG ── */
.dev-tools-scope .al-clock-panel .clock-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* ── Display window (nixie frame) ── */
.dev-tools-scope .al-clock-panel .display-window {
  position: relative;
  background: var(--bg-void);
  border-radius: var(--radius-ui, 3px);
  padding: var(--sp-space, 3px 2px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-gap, 1px);
  border: 1px solid var(--border-dim);
  box-shadow: inset 0 0 8px rgba(0,0,0,0.8), 0 1px 0 var(--border-metal);
}

/* ── Nixie лампа ── */
.dev-tools-scope .al-clock-panel .nixie {
  position: relative;
  width: 15px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 50%, rgba(15,10,5,0.9) 0%, rgba(8,6,3,0.95) 60%, var(--bg-void) 100%);
  border-radius: 2px;
  border: 0.5px solid var(--border-dim);
}
.dev-tools-scope .al-clock-panel .nixie-digit {
  font-family: 'Courier New', monospace;
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  color: var(--accent-brass-hover);
  z-index: 2;
}
.dev-tools-scope .al-clock-panel .nixie-ghost {
  position: absolute;
  font-family: 'Courier New', monospace;
  font-size: 16px;
  font-weight: bold;
  color: rgba(197,139,58,0.05);
  z-index: 1;
}

/* ── Двокрапка ── */
.dev-tools-scope .al-clock-panel .nixie-colon {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--sp-card-pad, 0 1px); align-items: center; justify-content: center;
}
.dev-tools-scope .al-clock-panel .colon-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent-brass-hover);
  box-shadow: 0 0 3px rgba(230,168,72,0.8), 0 0 6px rgba(197,139,58,0.4);
}
@keyframes mm-colon-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.2; }
}
.dev-tools-scope .al-clock-panel .colon-blink .colon-dot {
  animation: mm-colon-blink 1s step-end infinite;
}

/* ── Date tooltip ── */
.dev-tools-scope .al-clock-panel .al-clock-tooltip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-space, 4px);
  padding: var(--sp-space, 2px 6px);
  font-family: var(--mm-mono, 'JetBrains Mono', monospace);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: rgba(197,139,58,0.7);
  border-top: 1px solid rgba(92,58,26,0.3);
}
.dev-tools-scope .al-clock-panel .clock-date-label {
  color: rgba(197,139,58,0.5);
  font-size: 8px;
  letter-spacing: 0.1em;
}

/* ── Gear animations ── */
@keyframes mm-spin-cw  { from { transform: rotate(0deg); }   to { transform: rotate(360deg); } }
@keyframes mm-spin-ccw { from { transform: rotate(0deg); }   to { transform: rotate(-360deg); } }
.dev-tools-scope .mm-clk-spin-cw  {
  animation: mm-spin-cw  45s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.dev-tools-scope .mm-clk-spin-ccw {
  animation: mm-spin-ccw 60s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}

/* ── Lamp halo pulse ── */
@keyframes mm-lamp-pulse {
  0%, 100% { opacity: 0.28; transform: scale(1); }
  50%       { opacity: 0.62; transform: scale(1.30); }
}
.dev-tools-scope .mm-clk-lamp-halo {
  animation: mm-lamp-pulse 2.5s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.dev-tools-scope .mm-clk-lamp--2 .mm-clk-lamp-halo {
  animation-delay: 0.7s;
}

/* ═══════════════════════════════════════════════════════════
   MM CREST FORGE — SVG frame, overlays, animations
   ═══════════════════════════════════════════════════════════ */

/* Ховаємо старий shell */
.dev-tools-scope .mm-crest .dt-crest__shell { display: none; }

/* SVG frame sizing */
.dev-tools-scope .mm-crest .mm-frame-svg {
  display: block;
  width: 100%;
  max-width: 460px;
  height: 80px;
  overflow: visible;
}

/* Text overlay поверх SVG */
.dev-tools-scope .mm-crest .al-crest-body {
  position: absolute;
  inset: 0 0 14px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.dev-tools-scope .mm-crest .al-title {
  font-family: var(--font-dt-title, 'Cinzel', serif) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--text-bright) !important;
  margin: 0;
}

/* Meta plate */
.dev-tools-scope .mm-crest .al-crest-meta {
  position: absolute;
  bottom: -17px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--sp-space, 4px);
  white-space: nowrap;
  font-family: var(--mm-mono, 'JetBrains Mono', monospace);
  font-size: 8px;
  letter-spacing: 0.14em;
  color: rgba(197,139,58,0.55);
}
.dev-tools-scope .mm-crest .al-crest-meta-icon {
  font-size: 10px;
  color: rgba(197,139,58,0.40);
}

/* ── SVG анімації шестерень (rescoped з al-page → mm-crest) ── */
.dev-tools-scope .mm-crest .al-sv-rot--ccw-16 { animation: mm-v5-rot-ccw 16s linear infinite; transform-box: fill-box; transform-origin: center; }
.dev-tools-scope .mm-crest .al-sv-rot--cw-16  { animation: mm-v5-rot-cw  16s linear infinite; transform-box: fill-box; transform-origin: center; }
.dev-tools-scope .mm-crest .al-sv-rot--cw-20  { animation: mm-v5-rot-cw  20s linear infinite; transform-box: fill-box; transform-origin: center; }
.dev-tools-scope .mm-crest .al-sv-rot--ccw-20 { animation: mm-v5-rot-ccw 20s linear infinite; transform-box: fill-box; transform-origin: center; }
.dev-tools-scope .mm-crest .al-sv-rot--cw-28  { animation: mm-v5-rot-cw  28s linear infinite; transform-box: fill-box; transform-origin: center; }
.dev-tools-scope .mm-crest .al-sv-rot--ccw-28 { animation: mm-v5-rot-ccw 28s linear infinite; transform-box: fill-box; transform-origin: center; }
.dev-tools-scope .mm-crest .al-sv-rot--cw-40  { animation: mm-v5-rot-cw  40s linear infinite; transform-box: fill-box; transform-origin: center; }
.dev-tools-scope .mm-crest .al-sv-rot--ccw-50 { animation: mm-v5-rot-ccw 50s linear infinite; transform-box: fill-box; transform-origin: center; }
.dev-tools-scope .mm-crest .al-sv-rot--cw-55  { animation: mm-v5-rot-cw  55s linear infinite; transform-box: fill-box; transform-origin: center; }

@keyframes mm-v5-rot-cw  { from { transform: rotate(0deg);   } to { transform: rotate(360deg);  } }
@keyframes mm-v5-rot-ccw { from { transform: rotate(0deg);   } to { transform: rotate(-360deg); } }

/* ── Amber лампи ── */
.dev-tools-scope .mm-crest .al-sv-lamp-halo             { animation: mm-v5-lamp-halo 2.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.dev-tools-scope .mm-crest .al-sv-lamp--1 .al-sv-lamp-halo { animation-delay: 0s; }
.dev-tools-scope .mm-crest .al-sv-lamp--2 .al-sv-lamp-halo { animation-delay: 0.7s; }
.dev-tools-scope .mm-crest .al-sv-lamp--3 .al-sv-lamp-halo { animation-delay: 1.4s; }
.dev-tools-scope .mm-crest .al-sv-lamp--4 .al-sv-lamp-halo { animation-delay: 2.1s; }

@keyframes mm-v5-lamp-halo {
  0%, 100% { opacity: 0.28; transform: scale(1); }
  50%       { opacity: 0.62; transform: scale(1.30); }
}

/* ── Парова пара ── */
.dev-tools-scope .mm-crest .al-sv-steam-puff    { animation: mm-v5-steam-rise 3.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.dev-tools-scope .mm-crest .al-sv-sp--a          { animation-delay: 0s; }
.dev-tools-scope .mm-crest .al-sv-sp--b          { animation-delay: 0.4s; }
.dev-tools-scope .mm-crest .al-sv-sp--c          { animation-delay: 0.8s; }
.dev-tools-scope .mm-crest .al-sv-steam--R .al-sv-sp--a { animation-delay: 1.2s; }
.dev-tools-scope .mm-crest .al-sv-steam--R .al-sv-sp--b { animation-delay: 1.6s; }
.dev-tools-scope .mm-crest .al-sv-steam--R .al-sv-sp--c { animation-delay: 2.0s; }

@keyframes mm-v5-steam-rise {
  0%   { opacity: 0;    transform: translateY(0)     scaleX(1);   }
  15%  { opacity: 0.45; transform: translateY(-4px)  scaleX(1.1); }
  60%  { opacity: 0.25; transform: translateY(-10px) scaleX(1.3); }
  100% { opacity: 0;    transform: translateY(-18px) scaleX(1.6); }
}

/* ═══════════════════════════════════════════════════════════
   STEAMPUNK-DESIGNER AUDIT v1.0 — 2026-04-19
   Focused forge-reinforcement: logs modal bolts, block-header
   nameplate rivets, hazard stripe, module-panel brass brackets,
   nixie-weight stat digits.
   ═══════════════════════════════════════════════════════════ */

/* ─── [SP-AUDIT] Logs modal: 4 hex bolts ──────────────── */
.dev-tools-scope #logsOverlay .mm-modal {
  position: relative;
}
.dev-tools-scope #logsOverlay .mm-modal > .dt-bolt {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%,
    /* decor: metal pewter gradient */
    var(--pewter-highlight, #a8998a) 0%,
    var(--pewter-light, #7a6a5a) 22%,
    var(--pewter-mid, #5a5048) 55%,
    var(--pewter-dark, #3a322a) 85%,
    var(--bg-void, var(--bg-void)) 100%);
  border: 1px solid rgba(0,0,0,0.7);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.6),
    inset 0 0.5px 0.5px rgba(255,255,255,0.25),
    0 1px 2px rgba(0,0,0,0.7);
  z-index: 5;
  pointer-events: none;
}
.dev-tools-scope #logsOverlay .mm-modal > .dt-bolt--tl { top: 8px;    left: 8px;   }
.dev-tools-scope #logsOverlay .mm-modal > .dt-bolt--tr { top: 8px;    right: 8px;  }
.dev-tools-scope #logsOverlay .mm-modal > .dt-bolt--bl { bottom: 8px; left: 8px;   }
.dev-tools-scope #logsOverlay .mm-modal > .dt-bolt--br { bottom: 8px; right: 8px;  }

/* ─── [SP-AUDIT] Block header: pewter rivets → steel plate ─ */
.dev-tools-scope .mm-block-header {
  position: relative;
  padding-left: var(--sp-space, 26px !important);
  padding-right: var(--sp-space, 26px !important);
}
.dev-tools-scope .mm-block-header::before,
.dev-tools-scope .mm-block-header::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%,
    /* decor: metal pewter gradient */
    var(--pewter-highlight, #a8998a) 0%,
    var(--pewter-mid, #5a5048) 55%,
    var(--pewter-dark, #3a322a) 100%);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.75),
    inset 0 0.5px 0.5px rgba(255,255,255,0.3),
    0 1px 2px rgba(0,0,0,0.7);
  pointer-events: none;
  z-index: 1;
}
.dev-tools-scope .mm-block-header::before { left: 9px;  }
.dev-tools-scope .mm-block-header::after  { right: 9px; }

/* ─── [SP-AUDIT] Summary restart btn: accent top line ── */
.dev-tools-scope .mm-summary-restart-btn:not(.mm-hidden) {
  position: relative;
  overflow: hidden;
}
.dev-tools-scope .mm-summary-restart-btn:not(.mm-hidden)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(193, 68, 24, 0.7);
  pointer-events: none;
  z-index: 1;
}

/* ─── [SP-AUDIT] Module panel: brass corner brackets ───── */
.dev-tools-scope .mm-module-panel::before,
.dev-tools-scope .mm-module-panel::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  pointer-events: none;
  z-index: 2;
}
.dev-tools-scope .mm-module-panel::before {
  top: 22px;
  left: 22px;
  border-top:  1.5px solid rgba(197, 139, 58, 0.38);
  border-left: 1.5px solid rgba(197, 139, 58, 0.38);
}
.dev-tools-scope .mm-module-panel::after {
  bottom: 22px;
  right: 22px;
  border-bottom: 1.5px solid rgba(197, 139, 58, 0.38);
  border-right:  1.5px solid rgba(197, 139, 58, 0.38);
}

/* ─── [SP-AUDIT] Stat numbers: nixie-weight amber digits ── */
.dev-tools-scope .mm-stat > span:first-child {
  font-family: var(--font-ui, 'Oswald', sans-serif); /* UPPERCASE */
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* STEAMPUNK-DESIGNER AUDIT END ──────────────────────────── */


/* ═══════════════════════════════════════════════════════════════
   ╔═══════════════════════════════════════════════════════════╗
   ║   STEAMPUNK FORGE REBIRTH v3.0 — 2026-04-19              ║
   ║   Глобальна переробка: картки, перемикачі, лампи,        ║
   ║   заголовки, модалки, тулбар. Форма + маса + механіка.   ║
   ╚═══════════════════════════════════════════════════════════╝
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. MODULE CARD: Forge-plate з 4 hex-bolts у кутах ─── */

.dev-tools-scope .mm-card {
  padding: var(--sp-space, 16px 18px 16px 22px !important);
  border: 2px solid var(--border-metal, var(--border-metal)) !important;
  border-radius: var(--radius-ui, 3px)!important;
  background:
    /* TL bolt */
    radial-gradient(circle 4.5px at 9px 9px,
      var(--text-bright) 0%, var(--text-muted) 35%, var(--border-dim) 70%, var(--bg-void) 100%) no-repeat,
    /* TR bolt */
    radial-gradient(circle 4.5px at calc(100% - 9px) 9px,
      var(--text-bright) 0%, var(--text-muted) 35%, var(--border-dim) 70%, var(--bg-void) 100%) no-repeat,
    /* BL bolt */
    radial-gradient(circle 4.5px at 9px calc(100% - 9px),
      var(--text-bright) 0%, var(--text-muted) 35%, var(--border-dim) 70%, var(--bg-void) 100%) no-repeat,
    /* BR bolt */
    radial-gradient(circle 4.5px at calc(100% - 9px) calc(100% - 9px),
      var(--text-bright) 0%, var(--text-muted) 35%, var(--border-dim) 70%, var(--bg-void) 100%) no-repeat,
    /* Top brass shine */
    linear-gradient(180deg,
      rgba(197, 139, 58, 0.12) 0%,
      rgba(197, 139, 58, 0.04) 4%,
      transparent 12%) no-repeat,
    /* Right pipe-seam edge */
    linear-gradient(90deg,
      transparent 94%,
      rgba(92, 68, 48, 0.35) 94.5%,
      rgba(168, 152, 138, 0.28) 96%,
      rgba(92, 68, 48, 0.35) 97.5%,
      transparent 100%) no-repeat,
    /* Diamond plate texture overlay */
    repeating-linear-gradient(45deg,
      transparent 0, transparent 14px,
      rgba(232, 219, 178, 0.012) 14px, rgba(232, 219, 178, 0.012) 15px,
      transparent 15px, transparent 28px) no-repeat,
    /* Main forge plate */
    linear-gradient(160deg,
      var(--bg-surface, var(--bg-surface)) 0%,
      color-mix(in srgb, var(--bg-surface) 85%, var(--bg-base)) 50%,
      var(--bg-base, var(--bg-base)) 100%) no-repeat !important;
  box-shadow:
    /* Brass top-edge glint */
    0 -1px 0 rgba(232, 208, 122, 0.12),
    /* Main drop shadow */
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 6px 14px rgba(0, 0, 0, 0.55),
    0 12px 28px rgba(7, 5, 3, 0.4),
    /* Inner forge bevel */
    inset 0 1px 0 rgba(232, 219, 178, 0.10),
    inset 0 -2px 0 rgba(0, 0, 0, 0.7),
    inset 0 0 0 1px rgba(0, 0, 0, 0.55),
    inset 2px 0 5px rgba(0, 0, 0, 0.25),
    inset -2px 0 5px rgba(0, 0, 0, 0.2) !important;
}

/* Hover: ember warmup ефект */
.dev-tools-scope .mm-card:not(.mm-card--system):hover,
.dev-tools-scope .mm-card:not(.mm-card--system):focus-within {
  border-color: color-mix(in srgb, var(--module-accent, var(--accent-brass)) 55%, var(--border-bright)) !important;
  transform: translateY(-2px) !important;
  box-shadow:
    0 -1px 0 rgba(232, 208, 122, 0.18),
    0 4px 8px rgba(0, 0, 0, 0.55),
    0 10px 24px rgba(0, 0, 0, 0.65),
    0 20px 48px rgba(7, 5, 3, 0.45),
    0 0 0 1px color-mix(in srgb, var(--module-accent, var(--accent-brass)) 25%, transparent),
    0 0 18px color-mix(in srgb, var(--module-accent, var(--accent-brass)) 18%, transparent),
    inset 0 1px 0 rgba(232, 219, 178, 0.16),
    inset 0 -2px 0 rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(0, 0, 0, 0.4) !important;
}

/* Redefine ::before — brass accent bar + grain (не стертий) */
.dev-tools-scope .mm-card::before {
  width: 5px !important;
  left: 0 !important;
  background:
    repeating-linear-gradient(180deg,
      transparent 0, transparent 3px,
      rgba(0, 0, 0, 0.25) 3px, rgba(0, 0, 0, 0.25) 3.5px,
      transparent 3.5px, transparent 7px),
    linear-gradient(180deg,
      color-mix(in srgb, var(--module-accent, var(--accent-brass)) 90%, white) 0%,
      var(--module-accent, var(--accent-brass)) 35%,
      color-mix(in srgb, var(--module-accent, var(--accent-brass)) 55%, black) 100%) !important;
  opacity: 0.95 !important;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.35),
    0 0 8px color-mix(in srgb, var(--module-accent, var(--accent-brass)) 40%, transparent) !important;
  border-radius: var(--radius-ui, 0)!important;
}

/* Redefine ::after — inner gear marker (верх-право) */
.dev-tools-scope .mm-card::after {
  content: '';
  top: auto !important;
  bottom: 8px !important;
  right: 18px !important;
  width: 10px !important;
  height: 10px !important;
  background:
    radial-gradient(circle at 50% 50%,
      transparent 0%, transparent 28%,
      rgba(197, 139, 58, 0.4) 28%, rgba(197, 139, 58, 0.4) 34%,
      transparent 34%, transparent 100%),
    conic-gradient(from 0deg,
      rgba(197, 139, 58, 0.22) 0deg, transparent 30deg,
      rgba(197, 139, 58, 0.22) 45deg, transparent 75deg,
      rgba(197, 139, 58, 0.22) 90deg, transparent 120deg,
      rgba(197, 139, 58, 0.22) 135deg, transparent 165deg,
      rgba(197, 139, 58, 0.22) 180deg, transparent 210deg,
      rgba(197, 139, 58, 0.22) 225deg, transparent 255deg,
      rgba(197, 139, 58, 0.22) 270deg, transparent 300deg,
      rgba(197, 139, 58, 0.22) 315deg, transparent 345deg) !important;
  border-radius: 50% !important;
  opacity: 0.55 !important;
  animation: sp-forge-gear 40s linear infinite;
  pointer-events: none;
}

@keyframes sp-forge-gear {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ─── 2. TOGGLE → VALVE WHEEL (круглий клапан-перемикач) ─── */

.dev-tools-scope .mm-toggle-wrap {
  width: 44px;
  height: 44px;
  position: relative;
}

.dev-tools-scope .mm-toggle-track {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background:
    /* 8 рамок-хрестовин (spokes) */
    conic-gradient(
      from 22.5deg,
      var(--bg-void, var(--bg-void)) 0deg,
      transparent 8deg, transparent 37deg,
      var(--bg-void, var(--bg-void)) 45deg,
      transparent 53deg, transparent 82deg,
      var(--bg-void, var(--bg-void)) 90deg,
      transparent 98deg, transparent 127deg,
      var(--bg-void, var(--bg-void)) 135deg,
      transparent 143deg, transparent 172deg,
      var(--bg-void, var(--bg-void)) 180deg,
      transparent 188deg, transparent 217deg,
      var(--bg-void, var(--bg-void)) 225deg,
      transparent 233deg, transparent 262deg,
      var(--bg-void, var(--bg-void)) 270deg,
      transparent 278deg, transparent 307deg,
      var(--bg-void, var(--bg-void)) 315deg,
      transparent 323deg, transparent 352deg,
      var(--bg-void, var(--bg-void)) 360deg),
    radial-gradient(circle at 30% 25%,
      /* decor: metal pewter gradient */
      color-mix(in srgb, white 15%, var(--pewter-mid, #6a5a44)) 0%,
      var(--pewter-mid, #6a5a44) 30%,
      var(--pewter-dark, #3a3228) 75%,
      var(--bg-void, var(--bg-void)) 100%) !important;
  border: 1.5px solid var(--border-metal, var(--border-metal)) !important;
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, 0.6),
    inset 0 -1px 2px rgba(232, 219, 178, 0.05),
    0 2px 6px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(0, 0, 0, 0.65) !important;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
              border-color 0.25s ease,
              box-shadow 0.25s ease !important;
}

/* Центральний болт (hex-bolt у центрі клапана) */
.dev-tools-scope .mm-toggle-track::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%,
    var(--text-bright) 0%, var(--text-muted) 35%, var(--border-dim) 75%, var(--bg-void) 100%);
  border: 1px solid rgba(0, 0, 0, 0.7);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.25),
    inset 0 -1px 1px rgba(0, 0, 0, 0.4),
    0 1px 2px rgba(0, 0, 0, 0.8);
  z-index: 2;
}

/* Hide default thumb "::after" (не потрібен — спиці та центр болт досить) */
.dev-tools-scope .mm-toggle-track::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--bg-void) !important;
  box-shadow: inset 0 0.5px 1px rgba(255, 255, 255, 0.15) !important;
  z-index: 3;
  transition: none !important;
}

/* ON state: valve повертається 45° + brass heat */
.dev-tools-scope .mm-toggle-input:checked + .mm-toggle-track {
  background:
    conic-gradient(
      from 22.5deg,
      var(--bg-void, var(--bg-void)) 0deg,
      transparent 8deg, transparent 37deg,
      var(--bg-void, var(--bg-void)) 45deg,
      transparent 53deg, transparent 82deg,
      var(--bg-void, var(--bg-void)) 90deg,
      transparent 98deg, transparent 127deg,
      var(--bg-void, var(--bg-void)) 135deg,
      transparent 143deg, transparent 172deg,
      var(--bg-void, var(--bg-void)) 180deg,
      transparent 188deg, transparent 217deg,
      var(--bg-void, var(--bg-void)) 225deg,
      transparent 233deg, transparent 262deg,
      var(--bg-void, var(--bg-void)) 270deg,
      transparent 278deg, transparent 307deg,
      var(--bg-void, var(--bg-void)) 315deg,
      transparent 323deg, transparent 352deg,
      var(--bg-void, var(--bg-void)) 360deg),
    radial-gradient(circle at 30% 25%,
      color-mix(in srgb, white 20%, var(--accent-brass-bright, #e8c860)) 0%,
      var(--accent-brass, var(--accent-brass)) 35%,
      color-mix(in srgb, var(--accent-brass) 50%, black) 80%,
      var(--bg-void, var(--bg-void)) 100%) !important;
  border-color: var(--accent-brass, var(--accent-brass)) !important;
  transform: rotate(45deg) !important;
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, 0.45),
    inset 0 -1px 2px rgba(232, 219, 178, 0.15),
    0 2px 6px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(0, 0, 0, 0.5),
    0 0 14px color-mix(in srgb, var(--accent-brass) 45%, transparent) !important;
}

.dev-tools-scope .mm-toggle-input:checked + .mm-toggle-track::before {
  background: radial-gradient(circle at 32% 28%,
    var(--text-bright) 0%, var(--accent-brass) 25%, var(--accent-brass) 55%, color-mix(in srgb, var(--accent-brass) 35%, var(--bg-void)) 100%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.5),
    inset 0 -1px 1px rgba(0, 0, 0, 0.3),
    0 1px 2px rgba(0, 0, 0, 0.6),
    0 0 6px rgba(232, 208, 122, 0.5);
}

/* Hover: valve тремтить (готовий до повороту) */
.dev-tools-scope .mm-toggle-track:hover {
  border-color: var(--border-bright, var(--border-bright)) !important;
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, 0.6),
    inset 0 -1px 2px rgba(232, 219, 178, 0.08),
    0 3px 8px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(0, 0, 0, 0.65),
    0 0 10px rgba(197, 139, 58, 0.18) !important;
}

/* ─── 3. STATUS DOT → EDISON LAMP з filament ─── */

.dev-tools-scope .mm-status-dot {
  width: 12px !important;
  height: 12px !important;
  position: relative !important;
  background:
    radial-gradient(ellipse 3px 2.5px at 50% 45%,
      rgba(255, 255, 255, 0.12) 0%, transparent 70%),
    radial-gradient(circle at 35% 30%,
      rgba(40, 30, 22, 0.95) 0%,
      rgba(20, 14, 10, 1) 100%) !important;
  border: 1px solid rgba(0, 0, 0, 0.85) !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.15),
    inset 0 -1px 1px rgba(0, 0, 0, 0.4),
    0 1px 2px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(92, 68, 48, 0.35) !important;
}

/* Filament — внутрішній дріт */
.dev-tools-scope .mm-status-dot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.35;
  pointer-events: none;
}

/* Halo glow — зовнішнє світіння */
.dev-tools-scope .mm-status-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: radial-gradient(circle,
    currentColor 0%, transparent 55%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.dev-tools-scope .mm-status-dot--active {
  color: var(--success, var(--success)) !important;
  background:
    radial-gradient(ellipse 3px 2.5px at 50% 45%,
      rgba(255, 255, 255, 0.45) 0%, transparent 70%),
    radial-gradient(circle at 35% 30%,
      color-mix(in srgb, white 40%, var(--success, var(--success))) 0%,
      var(--success, var(--success)) 45%,
      color-mix(in srgb, var(--success) 40%, black) 100%) !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.4),
    inset 0 -1px 1px rgba(0, 0, 0, 0.35),
    0 0 8px color-mix(in srgb, var(--success) 55%, transparent),
    0 0 16px color-mix(in srgb, var(--success) 30%, transparent) !important;
  animation: sp-edison-breathe 2.4s ease-in-out infinite !important;
}
.dev-tools-scope .mm-status-dot--active::after {
  opacity: 0.35;
}
.dev-tools-scope .mm-status-dot--active::before {
  background: var(--text-bright);
  opacity: 0.7;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
}

.dev-tools-scope .mm-status-dot--error {
  color: var(--danger, var(--log-critical)) !important;
  background:
    radial-gradient(ellipse 3px 2.5px at 50% 45%,
      rgba(255, 200, 150, 0.55) 0%, transparent 70%),
    radial-gradient(circle at 35% 30%,
      color-mix(in srgb, white 30%, var(--danger, var(--log-critical))) 0%,
      var(--danger, var(--log-critical)) 45%,
      color-mix(in srgb, var(--danger) 35%, black) 100%) !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.4),
    inset 0 -1px 1px rgba(0, 0, 0, 0.35),
    0 0 10px color-mix(in srgb, var(--danger) 65%, transparent),
    0 0 22px color-mix(in srgb, var(--danger) 35%, transparent) !important;
  animation: sp-edison-flicker 1.2s ease-in-out infinite !important;
}
.dev-tools-scope .mm-status-dot--error::after { opacity: 0.45; }

.dev-tools-scope .mm-status-dot--loading,
.dev-tools-scope .mm-status-dot--offline {
  color: var(--warning, var(--log-warn)) !important;
  background:
    radial-gradient(ellipse 3px 2.5px at 50% 45%,
      rgba(255, 240, 180, 0.55) 0%, transparent 70%),
    radial-gradient(circle at 35% 30%,
      color-mix(in srgb, white 35%, var(--warning, var(--log-warn))) 0%,
      var(--warning, var(--log-warn)) 50%,
      color-mix(in srgb, var(--warning) 40%, black) 100%) !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.45),
    inset 0 -1px 1px rgba(0, 0, 0, 0.3),
    0 0 8px color-mix(in srgb, var(--warning) 55%, transparent),
    0 0 18px color-mix(in srgb, var(--warning) 30%, transparent) !important;
  animation: sp-edison-breathe 3s ease-in-out infinite !important;
}

.dev-tools-scope .mm-status-dot--disabled {
  background:
    radial-gradient(ellipse 3px 2.5px at 50% 45%,
      rgba(120, 108, 92, 0.2) 0%, transparent 70%),
    radial-gradient(circle at 35% 30%,
      rgba(90, 80, 72, 0.8) 0%,
      rgba(40, 32, 24, 1) 100%) !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.08),
    inset 0 -1px 1px rgba(0, 0, 0, 0.4),
    0 1px 2px rgba(0, 0, 0, 0.6) !important;
  opacity: 0.55;
}

@keyframes sp-edison-breathe {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.35); }
}

@keyframes sp-edison-flicker {
  0%, 100% { filter: brightness(1);   }
  15%      { filter: brightness(1.4); }
  20%      { filter: brightness(0.7); }
  25%      { filter: brightness(1.3); }
  50%      { filter: brightness(1.1); }
  75%      { filter: brightness(1.45);}
}

@media (prefers-reduced-motion: reduce) {
  .dev-tools-scope .mm-status-dot--active,
  .dev-tools-scope .mm-status-dot--error,
  .dev-tools-scope .mm-status-dot--loading,
  .dev-tools-scope .mm-status-dot--offline {
    animation: none !important;
  }
}

/* ─── 4. BLOCK HEADER → Великa Brass Nameplate ─── */

.dev-tools-scope .mm-block-header {
  padding: var(--sp-space, 14px 30px 10px !important);
  background:
    repeating-linear-gradient(90deg,
      transparent 0, transparent 28px,
      rgba(0, 0, 0, 0.25) 28px, rgba(0, 0, 0, 0.25) 29px,
      rgba(232, 219, 178, 0.04) 29px, rgba(232, 219, 178, 0.04) 30px,
      transparent 30px, transparent 58px),
    linear-gradient(180deg,
      rgba(197, 139, 58, 0.14) 0%,
      rgba(197, 139, 58, 0.06) 50%,
      rgba(197, 139, 58, 0.10) 100%),
    linear-gradient(180deg,
      var(--bg-elevated, var(--bg-elevated)) 0%,
      var(--bg-surface, var(--bg-surface)) 100%) !important;
  border: 1.5px solid var(--border-metal, var(--border-metal)) !important;
  border-radius: var(--radius-ui, 3px)!important;
  box-shadow:
    inset 0 1px 0 rgba(232, 219, 178, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(0, 0, 0, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.55),
    0 4px 12px rgba(0, 0, 0, 0.3) !important;
  position: relative;
  overflow: hidden;
}

/* Brass edge shine top */
.dev-tools-scope .mm-block-header > .mm-block-title-row {
  position: relative;
  z-index: 2;
}

/* Великі hex-bolts у 4 кутах замість simple rivets */
.dev-tools-scope .mm-block-header::before {
  content: '';
  position: absolute;
  top: 7px;
  left: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%,
    var(--text-bright) 0%, var(--text-muted) 35%, var(--border-dim) 75%, var(--bg-void) 100%);
  border: 1px solid rgba(0, 0, 0, 0.75);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.6),
    inset 0 0.5px 0.5px rgba(255, 255, 255, 0.35),
    inset 0 -0.5px 0.5px rgba(0, 0, 0, 0.3),
    0 1px 2px rgba(0, 0, 0, 0.75);
  transform: none !important;
  z-index: 1;
}
/* Інші 3 болти через дублікат як box-shadow "тіні-болти" — багатошаровий shadow approach */
.dev-tools-scope .mm-block-header::after {
  content: '';
  position: absolute;
  bottom: 7px;
  right: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%,
    var(--text-bright) 0%, var(--text-muted) 35%, var(--border-dim) 75%, var(--bg-void) 100%);
  border: 1px solid rgba(0, 0, 0, 0.75);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.6),
    inset 0 0.5px 0.5px rgba(255, 255, 255, 0.35),
    inset 0 -0.5px 0.5px rgba(0, 0, 0, 0.3),
    0 1px 2px rgba(0, 0, 0, 0.75);
  transform: none !important;
  z-index: 1;
}

.dev-tools-scope .mm-block-title {
  font-family: 'Cinzel', 'Oswald', serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  color: var(--text-bright, var(--text-bright)) !important;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.85),
    0 -1px 0 rgba(232, 208, 122, 0.15),
    0 0 10px rgba(197, 139, 58, 0.3) !important;
}

.dev-tools-scope .mm-block-icon {
  color: var(--accent-brass-bright, #e8c860) !important;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.7));
  opacity: 1 !important;
}

/* ─── 5. TOOLBAR: HUD Control Strip з pressure-gauge frames ─── */

.dev-tools-scope .mm-toolbar {
  padding: var(--sp-space, 10px 20px) !important;
  background:
    /* Hazard stripe бокова смуга */
    repeating-linear-gradient(90deg,
      transparent 0, transparent 14px,
      rgba(197, 139, 58, 0.025) 14px, rgba(197, 139, 58, 0.025) 15px,
      transparent 15px, transparent 30px),
    linear-gradient(180deg,
      var(--bg-elevated, var(--bg-elevated)) 0%,
      var(--bg-surface, var(--bg-surface)) 50%,
      var(--bg-base, var(--bg-base)) 100%) !important;
  border: 1.5px solid var(--border-metal, var(--border-metal)) !important;
  border-top: 2px solid var(--accent-brass-dim, #8a5a22) !important;
  border-radius: var(--radius-ui, 3px)!important;
  box-shadow:
    inset 0 1px 0 rgba(232, 219, 178, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55),
    inset 0 3px 8px rgba(0, 0, 0, 0.5),
    0 3px 10px rgba(0, 0, 0, 0.5) !important;
  position: relative;
}

/* Риски-заклепки у 4 кутах toolbar */
.dev-tools-scope .mm-toolbar::before,
.dev-tools-scope .mm-toolbar::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%,
    var(--text-bright) 0%, var(--text-muted) 35%, var(--border-dim) 75%, var(--bg-void) 100%);
  border: 1px solid rgba(0, 0, 0, 0.75);
  box-shadow:
    inset 0 0.5px 0.5px rgba(255, 255, 255, 0.3),
    0 1px 2px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  z-index: 2;
}
.dev-tools-scope .mm-toolbar::before { top: 6px; left: 7px; }
.dev-tools-scope .mm-toolbar::after  { top: 6px; right: 7px; }

/* Stats container → engraved brass meter-plate */
.dev-tools-scope .mm-toolbar-stats {
  padding: var(--sp-space, 6px 14px !important);
  background:
    radial-gradient(ellipse at 50% 50%,
      rgba(232, 208, 122, 0.04) 0%,
      transparent 70%),
    linear-gradient(180deg,
      var(--bg-void, var(--bg-void)) 0%,
      var(--bg-base, var(--bg-base)) 100%) !important;
  border: 1.5px solid var(--border-metal, var(--border-metal)) !important;
  border-radius: var(--radius-ui, 3px)!important;
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.7),
    inset 0 -1px 0 rgba(232, 219, 178, 0.05),
    inset 0 0 0 1px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(232, 219, 178, 0.06) !important;
  position: relative;
}

/* Окремі stat-пластинки: кожна - forge rivet-plate */
.dev-tools-scope .mm-stat {
  padding: var(--sp-space, 3px 12px !important);
  font-family: var(--font-ui, 'Oswald', sans-serif); /* UPPERCASE */
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  color: var(--text-muted, var(--text-muted)) !important;
  border-right: 1px solid rgba(92, 68, 48, 0.35) !important;
  position: relative;
}

.dev-tools-scope .mm-stat > span:first-child {
  font-family: var(--font-ui, 'Oswald', sans-serif); /* UPPERCASE */
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.04em;
  margin-right: var(--sp-space, 5px);
}

.dev-tools-scope .mm-stat-active > span:first-child    { color: var(--success, var(--success)) !important; }
.dev-tools-scope .mm-stat-error > span:first-child     { color: var(--danger, var(--log-critical)) !important; }
.dev-tools-scope .mm-stat-disabled > span:first-child  { color: var(--text-body, var(--text-body)) !important; }

/* Search wrap → forge sightglass з pipe-flanges */
.dev-tools-scope .mm-toolbar-search {
  padding: var(--sp-card-pad, 0 10px) !important;
  background:
    radial-gradient(ellipse 70% 40% at 50% 50%,
      rgba(197, 139, 58, 0.04) 0%,
      transparent 80%),
    linear-gradient(180deg,
      var(--bg-void, var(--bg-void)) 0%,
      var(--bg-void) 100%) !important;
  border: 1.5px solid var(--border-metal, var(--border-metal)) !important;
  border-radius: var(--radius-ui, 3px)!important;
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.8),
    inset 0 0 0 1px rgba(0, 0, 0, 0.5) !important;
  position: relative;
}
/* Фланець-кепка зліва */
.dev-tools-scope .mm-toolbar-search::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 18px;
  background: linear-gradient(90deg,
    var(--text-muted) 0%, color-mix(in srgb, var(--text-muted) 50%, var(--border-dim)) 50%, var(--border-dim) 100%);
  border: 1px solid rgba(0, 0, 0, 0.7);
  border-radius: var(--radius-ui, 1px);
  box-shadow:
    inset 0 1px 0 rgba(232, 219, 178, 0.25),
    0 1px 2px rgba(0, 0, 0, 0.6);
  z-index: 2;
}

.dev-tools-scope .mm-toolbar-search:focus-within {
  border-color: var(--accent-brass, var(--accent-brass)) !important;
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.8),
    inset 0 0 0 1px rgba(0, 0, 0, 0.5),
    0 0 12px rgba(197, 139, 58, 0.25) !important;
}

.dev-tools-scope .mm-search-icon {
  color: var(--accent-brass-bright, #e8c860) !important;
  opacity: 0.65 !important;
}

/* ─── 6. FILTER TABS → Industrial Lever Switches ─── */

.dev-tools-scope .mm-filter-tab {
  padding: var(--sp-space, 5px 14px !important);
  background:
    /* skew-grain pattern = "поверхня важеля" */
    repeating-linear-gradient(93deg,
      transparent 0, transparent 3px,
      rgba(232, 219, 178, 0.025) 3px, rgba(232, 219, 178, 0.025) 3.5px,
      transparent 3.5px, transparent 7px),
    linear-gradient(180deg,
      var(--bg-surface, var(--bg-surface)) 0%,
      var(--bg-base, var(--bg-base)) 100%) !important;
  border: 1.5px solid var(--border-metal, var(--border-metal)) !important;
  border-radius: var(--radius-ui, 3px)!important;
  color: var(--text-muted, var(--text-muted)) !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 219, 178, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55),
    inset 0 2px 4px rgba(0, 0, 0, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.5) !important;
  position: relative;
  overflow: hidden;
  transition: all 0.18s ease !important;
}

/* Полосати індикатор знизу важеля */
.dev-tools-scope .mm-filter-tab::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 2px;
  background: transparent;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.dev-tools-scope .mm-filter-tab:hover {
  border-color: var(--border-bright, var(--border-bright)) !important;
  color: var(--text-body, var(--text-body)) !important;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(232, 219, 178, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 3px 6px rgba(0, 0, 0, 0.55),
    0 0 8px rgba(197, 139, 58, 0.12) !important;
}

.dev-tools-scope .mm-filter-tab--active {
  background:
    repeating-linear-gradient(93deg,
      transparent 0, transparent 3px,
      rgba(232, 208, 122, 0.06) 3px, rgba(232, 208, 122, 0.06) 3.5px,
      transparent 3.5px, transparent 7px),
    linear-gradient(180deg,
      rgba(197, 139, 58, 0.25) 0%,
      rgba(197, 139, 58, 0.08) 100%) !important;
  border-color: var(--accent-brass, var(--accent-brass)) !important;
  color: var(--accent-brass-bright, #e8c860) !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 219, 178, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45),
    inset 0 2px 4px rgba(0, 0, 0, 0.3),
    0 2px 6px rgba(0, 0, 0, 0.5),
    0 0 12px rgba(197, 139, 58, 0.35),
    0 0 24px rgba(197, 139, 58, 0.12) !important;
}

.dev-tools-scope .mm-filter-tab--active::before {
  background: linear-gradient(90deg,
    transparent, var(--accent-brass-bright, #e8c860), transparent);
  box-shadow: 0 0 6px rgba(232, 208, 122, 0.8);
}

.dev-tools-scope .mm-filter-tab--errors.has-problems.mm-filter-tab--active {
  background: linear-gradient(180deg,
    rgba(193, 68, 24, 0.30) 0%,
    rgba(193, 68, 24, 0.10) 100%) !important;
  border-color: var(--danger, var(--log-critical)) !important;
  color: var(--danger, var(--log-critical)) !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 180, 150, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.5),
    0 0 14px rgba(193, 68, 24, 0.4) !important;
  animation: sp-danger-throb 2s ease-in-out infinite;
}
.dev-tools-scope .mm-filter-tab--errors.has-problems.mm-filter-tab--active::before {
  background: linear-gradient(90deg,
    transparent, var(--danger), transparent);
  box-shadow: 0 0 6px var(--danger);
}

@keyframes sp-danger-throb {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.2); }
}

/* ─── 7. MODAL → Vault Door (потужніший frame + corner gears) ─── */

.dev-tools-scope .mm-modal-overlay {
  background: radial-gradient(ellipse at center,
    rgba(13, 9, 7, 0.55) 0%,
    rgba(6, 4, 2, 0.92) 100%) !important;
}

.dev-tools-scope .mm-modal {
  background:
    radial-gradient(ellipse at 50% 0%,
      rgba(197, 139, 58, 0.06) 0%,
      transparent 35%),
    linear-gradient(180deg,
      var(--bg-surface, var(--bg-surface)) 0%,
      var(--bg-base, var(--bg-base)) 100%) !important;
  border: 2px solid var(--border-metal, var(--border-metal)) !important;
  border-radius: var(--radius-ui, 3px)!important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.75),
    0 0 0 3px var(--border-dim, var(--border-dim)),
    0 0 0 4px rgba(0, 0, 0, 0.85),
    0 0 0 5px rgba(197, 139, 58, 0.18),
    0 8px 24px rgba(0, 0, 0, 0.65),
    0 20px 60px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(232, 219, 178, 0.10),
    inset 0 -2px 0 rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(0, 0, 0, 0.5) !important;
}

.dev-tools-scope .mm-modal-header {
  padding: var(--sp-space, 14px 22px !important);
  background:
    repeating-linear-gradient(93deg,
      transparent 0, transparent 4px,
      rgba(232, 219, 178, 0.018) 4px, rgba(232, 219, 178, 0.018) 4.5px,
      transparent 4.5px, transparent 9px),
    linear-gradient(180deg,
      rgba(197, 139, 58, 0.18) 0%,
      rgba(197, 139, 58, 0.05) 50%,
      rgba(197, 139, 58, 0.12) 100%),
    linear-gradient(180deg,
      var(--bg-elevated, var(--bg-elevated)) 0%,
      var(--bg-surface, var(--bg-surface)) 100%) !important;
  border-bottom: 2px solid var(--accent-brass-dim, #8a5a22) !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 219, 178, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6) !important;
}

.dev-tools-scope .mm-modal-header h3 {
  font-family: 'Cinzel', 'Oswald', serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase;
  color: var(--accent-brass-bright, #e8c860) !important;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.85),
    0 -1px 0 rgba(232, 208, 122, 0.12),
    0 0 12px rgba(197, 139, 58, 0.35) !important;
}

/* Logs modal bolts — переробка у великі форматні (6 points total) */
.dev-tools-scope #logsOverlay .mm-modal > .dt-bolt {
  width: 11px !important;
  height: 11px !important;
  background: radial-gradient(circle at 32% 28%,
    var(--accent-brass-hover) 0%, var(--accent-brass) 40%, var(--accent-brass-dim) 75%, var(--accent-brass-dim) 100%) !important;
  border: 1.5px solid rgba(0, 0, 0, 0.85) !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.6),
    inset 0 1px 1px rgba(255, 255, 255, 0.4),
    inset 0 -1px 1px rgba(0, 0, 0, 0.4),
    0 1px 3px rgba(0, 0, 0, 0.8) !important;
  z-index: 10;
}
.dev-tools-scope #logsOverlay .mm-modal > .dt-bolt::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 1px rgba(232, 208, 122, 0.3);
}
.dev-tools-scope #logsOverlay .mm-modal > .dt-bolt--tl { top: 10px !important;    left: 10px !important;  }
.dev-tools-scope #logsOverlay .mm-modal > .dt-bolt--tr { top: 10px !important;    right: 10px !important; }
.dev-tools-scope #logsOverlay .mm-modal > .dt-bolt--bl { bottom: 10px !important; left: 10px !important;  }
.dev-tools-scope #logsOverlay .mm-modal > .dt-bolt--br { bottom: 10px !important; right: 10px !important; }

/* Modal close button → brass valve */
.dev-tools-scope .mm-modal-close {
  width: 30px !important;
  height: 30px !important;
  background: linear-gradient(180deg,
    var(--bg-elevated, var(--bg-elevated)) 0%,
    var(--bg-base, var(--bg-base)) 100%) !important;
  border: 1.5px solid var(--border-metal, var(--border-metal)) !important;
  border-radius: 50% !important;
  color: var(--text-body, var(--text-body)) !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 219, 178, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55),
    0 2px 4px rgba(0, 0, 0, 0.5) !important;
  transition: all 0.2s ease !important;
}
.dev-tools-scope .mm-modal-close:hover {
  background: linear-gradient(180deg,
    rgba(193, 68, 24, 0.25) 0%,
    var(--bg-base, var(--bg-base)) 100%) !important;
  border-color: var(--danger, var(--log-critical)) !important;
  color: var(--danger, var(--log-critical)) !important;
  transform: rotate(90deg);
  box-shadow:
    inset 0 1px 0 rgba(232, 180, 150, 0.15),
    0 2px 6px rgba(0, 0, 0, 0.55),
    0 0 12px rgba(193, 68, 24, 0.35) !important;
}

/* Logs content — engraved terminal */
.dev-tools-scope .mm-logs-content {
  padding: var(--sp-space, 14px !important);
  background:
    repeating-linear-gradient(0deg,
      transparent 0, transparent 18px,
      rgba(197, 139, 58, 0.02) 18px, rgba(197, 139, 58, 0.02) 19px,
      transparent 19px, transparent 38px),
    linear-gradient(180deg,
      var(--bg-void, var(--bg-void)) 0%,
      var(--bg-void) 100%) !important;
  border: 1.5px solid var(--border-metal, var(--border-metal)) !important;
  border-radius: var(--radius-ui, 3px)!important;
  color: var(--text-body, var(--text-body)) !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 10.5px !important;
  line-height: 1.7 !important;
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.75),
    inset 0 0 0 1px rgba(0, 0, 0, 0.5) !important;
}

/* ─── 8. CONFIRM DIALOG → Danger Panel з hazard striping ─── */

.dev-tools-scope .mm-confirm {
  padding: var(--sp-space, 24px 28px !important);
  background:
    radial-gradient(ellipse at 50% 0%,
      rgba(193, 68, 24, 0.10) 0%,
      transparent 45%),
    linear-gradient(180deg,
      var(--bg-surface, var(--bg-surface)) 0%,
      var(--bg-base, var(--bg-base)) 100%) !important;
  border: 2px solid var(--border-metal, var(--border-metal)) !important;
  border-radius: var(--radius-ui, 3px)!important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.8),
    0 0 0 3px rgba(193, 68, 24, 0.25),
    0 0 0 4px rgba(0, 0, 0, 0.8),
    0 12px 36px rgba(0, 0, 0, 0.75),
    0 24px 60px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(232, 219, 178, 0.08),
    inset 0 -2px 0 rgba(0, 0, 0, 0.6) !important;
  position: relative;
  overflow: hidden;
}

/* Hazard stripes зверху + знизу */
.dev-tools-scope .mm-confirm::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: repeating-linear-gradient(45deg,
    var(--danger, var(--log-critical)) 0, var(--danger, var(--log-critical)) 8px,
    var(--bg-void) 8px, var(--bg-void) 16px);
  opacity: 0.75;
  z-index: 1;
}

.dev-tools-scope .mm-confirm h3 {
  font-family: 'Cinzel', serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase;
  color: var(--text-bright, var(--text-bright)) !important;
  margin: var(--sp-space, 8px 0 6px !important);
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.85),
    0 0 10px rgba(193, 68, 24, 0.2) !important;
}

.dev-tools-scope .mm-confirm p {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 11px !important;
  line-height: 1.65 !important;
  color: var(--text-body, var(--text-body)) !important;
  letter-spacing: 0.02em;
}

.dev-tools-scope .mm-confirm-icon {
  margin-bottom: var(--sp-space, 10px !important);
}

.dev-tools-scope .mm-confirm-mat-icon {
  font-size: 38px !important;
  color: var(--warning, var(--log-warn)) !important;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.8));
  animation: sp-warning-breathe 2.5s ease-in-out infinite;
}
@keyframes sp-warning-breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.7; }
}

/* Confirm bolts — більші hex */
.dev-tools-scope .mm-confirm > .dt-bolt {
  width: 10px !important;
  height: 10px !important;
  background: radial-gradient(circle at 32% 28%,
    var(--accent-brass-hover) 0%, var(--accent-brass) 40%, var(--accent-brass-dim) 75%, var(--accent-brass-dim) 100%) !important;
  border: 1.5px solid rgba(0, 0, 0, 0.85) !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.6),
    inset 0 1px 1px rgba(255, 255, 255, 0.4),
    inset 0 -1px 1px rgba(0, 0, 0, 0.4),
    0 1px 3px rgba(0, 0, 0, 0.8) !important;
  z-index: 5;
}
.dev-tools-scope .mm-confirm > .dt-bolt--tl { top: 10px !important;    left: 10px !important;  }
.dev-tools-scope .mm-confirm > .dt-bolt--tr { top: 10px !important;    right: 10px !important; }
.dev-tools-scope .mm-confirm > .dt-bolt--bl { bottom: 10px !important; left: 10px !important;  }
.dev-tools-scope .mm-confirm > .dt-bolt--br { bottom: 10px !important; right: 10px !important; }

/* Confirm action buttons → industrial levers */
.dev-tools-scope .mm-confirm-ok,
.dev-tools-scope .mm-confirm-cancel {
  padding: var(--sp-space, 8px 20px !important);
  font-family: 'Oswald', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  border-radius: var(--radius-ui, 3px)!important;
  min-width: 120px;
  position: relative;
  overflow: hidden;
}

.dev-tools-scope .mm-confirm-ok {
  background: linear-gradient(180deg,
    rgba(193, 68, 24, 0.35) 0%,
    rgba(193, 68, 24, 0.15) 100%) !important;
  border: 1.5px solid var(--danger, var(--log-critical)) !important;
  color: var(--text-bright, var(--text-bright)) !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8), 0 0 6px rgba(193, 68, 24, 0.4) !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 180, 150, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 2px 6px rgba(0, 0, 0, 0.55),
    0 0 12px rgba(193, 68, 24, 0.3) !important;
}
.dev-tools-scope .mm-confirm-ok::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: repeating-linear-gradient(45deg,
    var(--danger, var(--log-critical)) 0, var(--danger, var(--log-critical)) 4px,
    transparent 4px, transparent 8px);
  opacity: 0.8;
}
.dev-tools-scope .mm-confirm-ok:hover {
  background: linear-gradient(180deg,
    rgba(193, 68, 24, 0.55) 0%,
    rgba(193, 68, 24, 0.25) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 180, 150, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 3px 8px rgba(0, 0, 0, 0.6),
    0 0 18px rgba(193, 68, 24, 0.5) !important;
}

.dev-tools-scope .mm-confirm-cancel {
  background: linear-gradient(180deg,
    var(--bg-elevated, var(--bg-elevated)) 0%,
    var(--bg-base, var(--bg-base)) 100%) !important;
  border: 1.5px solid var(--border-metal, var(--border-metal)) !important;
  color: var(--text-body, var(--text-body)) !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 219, 178, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55),
    0 2px 4px rgba(0, 0, 0, 0.5) !important;
}
.dev-tools-scope .mm-confirm-cancel:hover {
  border-color: var(--accent-brass, var(--accent-brass)) !important;
  color: var(--accent-brass, var(--accent-brass)) !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 219, 178, 0.14),
    0 3px 6px rgba(0, 0, 0, 0.55),
    0 0 10px rgba(197, 139, 58, 0.2) !important;
}

/* ─── 9. TOAST → Signal Plate з pipe-connector ─── */

.dev-tools-scope .mm-toast {
  padding: var(--sp-space, 12px 18px 12px 24px !important);
  background:
    linear-gradient(90deg,
      rgba(197, 139, 58, 0.12) 0%,
      transparent 6%),
    linear-gradient(180deg,
      var(--bg-surface, var(--bg-surface)) 0%,
      var(--bg-base, var(--bg-base)) 100%) !important;
  border: 1.5px solid var(--border-metal, var(--border-metal)) !important;
  border-radius: var(--radius-ui, 3px)!important;
  color: var(--text-bright, var(--text-bright)) !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.04em;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 0 0 2px rgba(197, 139, 58, 0.15),
    0 6px 18px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(232, 219, 178, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5) !important;
  position: relative;
  overflow: hidden;
}
.dev-tools-scope .mm-toast::before {
  content: '' !important;
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px !important;
  background: linear-gradient(180deg,
    var(--accent-brass-bright, #e8c860) 0%,
    var(--accent-brass, var(--accent-brass)) 50%,
    var(--accent-brass-dim, #8a5a22) 100%) !important;
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.35), 0 0 8px rgba(197, 139, 58, 0.35);
}

.dev-tools-scope .mm-toast.mm-toast--error {
  border-color: var(--danger, var(--log-critical)) !important;
  background:
    linear-gradient(90deg,
      rgba(193, 68, 24, 0.18) 0%,
      transparent 10%),
    linear-gradient(180deg,
      var(--bg-surface, var(--bg-surface)) 0%,
      var(--bg-base, var(--bg-base)) 100%) !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 0 0 2px rgba(193, 68, 24, 0.25),
    0 6px 18px rgba(0, 0, 0, 0.7),
    0 0 18px rgba(193, 68, 24, 0.2) !important;
}
.dev-tools-scope .mm-toast.mm-toast--error::before {
  background: linear-gradient(180deg,
    var(--log-error) 0%, var(--danger, var(--log-critical)) 50%, color-mix(in srgb, var(--danger) 50%, var(--bg-void)) 100%) !important;
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.35), 0 0 10px rgba(193, 68, 24, 0.5);
}

/* ─── 10. CARD BUTTONS → Forge action-levers ─── */

.dev-tools-scope .mm-btn {
  padding: var(--sp-space, 6px 12px !important);
  font-family: 'Oswald', sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  border: 1.5px solid var(--border-metal, var(--border-metal)) !important;
  border-radius: var(--radius-ui, 3px)!important;
  background: linear-gradient(180deg,
    var(--bg-elevated, var(--bg-elevated)) 0%,
    var(--bg-base, var(--bg-base)) 100%) !important;
  color: var(--text-body, var(--text-body)) !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 219, 178, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55),
    0 2px 4px rgba(0, 0, 0, 0.55) !important;
  transition: all 0.18s ease !important;
  position: relative;
}

.dev-tools-scope .mm-btn:hover {
  border-color: var(--accent-brass, var(--accent-brass)) !important;
  color: var(--accent-brass-bright, #e8c860) !important;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(232, 219, 178, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 3px 6px rgba(0, 0, 0, 0.6),
    0 0 10px rgba(197, 139, 58, 0.25) !important;
}

.dev-tools-scope .mm-btn--restart {
  border-color: color-mix(in srgb, var(--danger, var(--log-critical)) 50%, var(--border-metal)) !important;
  color: color-mix(in srgb, var(--danger, var(--log-critical)) 80%, var(--text-body)) !important;
}
.dev-tools-scope .mm-btn--restart:hover {
  border-color: var(--danger, var(--log-critical)) !important;
  color: var(--danger, var(--log-critical)) !important;
  background: linear-gradient(180deg,
    rgba(193, 68, 24, 0.18) 0%,
    var(--bg-base, var(--bg-base)) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 180, 150, 0.12),
    0 3px 6px rgba(0, 0, 0, 0.6),
    0 0 14px rgba(193, 68, 24, 0.4) !important;
}

/* ─── 11. REFRESH BUTTON → brass valve-handle ─── */

.dev-tools-scope .mm-refresh-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background:
    conic-gradient(
      from 45deg,
      transparent 0deg,
      rgba(0, 0, 0, 0.5) 18deg, transparent 27deg,
      rgba(0, 0, 0, 0.5) 63deg, transparent 72deg,
      rgba(0, 0, 0, 0.5) 108deg, transparent 117deg,
      rgba(0, 0, 0, 0.5) 153deg, transparent 162deg,
      rgba(0, 0, 0, 0.5) 198deg, transparent 207deg,
      rgba(0, 0, 0, 0.5) 243deg, transparent 252deg,
      rgba(0, 0, 0, 0.5) 288deg, transparent 297deg,
      rgba(0, 0, 0, 0.5) 333deg, transparent 342deg),
    radial-gradient(circle at 30% 25%,
      /* decor: metal pewter gradient */
      color-mix(in srgb, white 15%, var(--pewter-mid, #6a5a44)) 0%,
      var(--pewter-mid, #6a5a44) 35%,
      var(--pewter-dark, #3a3228) 75%,
      var(--bg-void, var(--bg-void)) 100%) !important;
  border: 1.5px solid var(--border-metal, var(--border-metal)) !important;
  color: var(--accent-brass-bright, #e8c860) !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.2),
    inset 0 -2px 3px rgba(0, 0, 0, 0.5),
    0 2px 5px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 0, 0, 0.55) !important;
  transition: all 0.3s ease !important;
}

.dev-tools-scope .mm-refresh-btn .material-symbols-outlined {
  color: var(--accent-brass-bright, #e8c860) !important;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.8)) !important;
}

.dev-tools-scope .mm-refresh-btn:hover {
  border-color: var(--accent-brass, var(--accent-brass)) !important;
  transform: rotate(60deg) scale(1.05);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.25),
    inset 0 -2px 3px rgba(0, 0, 0, 0.45),
    0 4px 10px rgba(0, 0, 0, 0.65),
    0 0 14px rgba(197, 139, 58, 0.35),
    0 0 28px rgba(197, 139, 58, 0.12) !important;
}

.dev-tools-scope .mm-refresh-btn.mm-refreshing {
  animation: sp-valve-spin 0.8s linear infinite !important;
}
@keyframes sp-valve-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ─── 12. ORNAMENT DIVIDER → Pipe section з pressure gauge ─── */

.dev-tools-scope .mm-ornament-divider {
  margin: var(--sp-space, 14px auto 8px !important);
  padding: var(--sp-card-pad, 0 20px) !important;
}

.dev-tools-scope .mm-ornament-divider__line {
  height: 3px !important;
  background:
    linear-gradient(180deg,
      rgba(232, 219, 178, 0.15) 0%,
      rgba(92, 68, 48, 0.6) 50%,
      rgba(0, 0, 0, 0.5) 100%),
    linear-gradient(90deg,
      transparent 0%,
      /* decor: metal pewter gradient */
      var(--pewter-mid, #6a5a44) 15%,
      var(--accent-brass-dim, #8a5a22) 50%,
      /* decor: metal pewter gradient */
      var(--pewter-mid, #6a5a44) 85%,
      transparent 100%) !important;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(232, 219, 178, 0.14) !important;
  border-radius: var(--radius-ui, 1.5px);
}

.dev-tools-scope .mm-ornament-divider__center {
  gap: var(--sp-space, 7px !important);
  padding: var(--sp-card-pad, 0 14px) !important;
  position: relative;
}

/* Pressure-gauge-style центральний елемент */
.dev-tools-scope .mm-ornament-divider__gear {
  width: 22px !important;
  height: 22px !important;
  background:
    radial-gradient(circle at 50% 50%,
      transparent 0%, transparent 30%,
      var(--accent-brass, var(--accent-brass)) 30%, var(--accent-brass, var(--accent-brass)) 34%,
      transparent 34%, transparent 100%),
    radial-gradient(circle at 35% 30%,
      var(--text-bright) 0%, var(--text-muted) 45%, var(--border-dim) 100%);
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, 0.7);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.2),
    inset 0 -2px 3px rgba(0, 0, 0, 0.45),
    0 2px 4px rgba(0, 0, 0, 0.7),
    0 0 8px rgba(197, 139, 58, 0.25);
  color: transparent !important;
  position: relative;
  flex-shrink: 0;
  animation: sp-forge-gear 24s linear infinite !important;
  filter: none !important;
}

/* Додаткові декорації — тікс на кільці */
.dev-tools-scope .mm-ornament-divider__gear::before,
.dev-tools-scope .mm-ornament-divider__gear::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(197, 139, 58, 0.8);
  border-radius: var(--radius-ui, 0.5px);
  box-shadow: 0 0 3px rgba(197, 139, 58, 0.6);
}
.dev-tools-scope .mm-ornament-divider__gear::before {
  width: 2px;
  height: 8px;
}
.dev-tools-scope .mm-ornament-divider__gear::after {
  width: 8px;
  height: 2px;
}

.dev-tools-scope .mm-ornament-divider__rivet {
  width: 7px !important;
  height: 7px !important;
  background: radial-gradient(circle at 32% 28%,
    var(--text-bright) 0%, var(--text-muted) 35%, var(--border-dim) 75%, var(--bg-void) 100%) !important;
  border: 1px solid rgba(0, 0, 0, 0.8) !important;
  box-shadow:
    inset 0 0.5px 0.5px rgba(255, 255, 255, 0.35),
    inset 0 -0.5px 0.5px rgba(0, 0, 0, 0.35),
    0 1px 2px rgba(0, 0, 0, 0.75) !important;
}

/* ─── 13. MODULE PANEL: ще масивніший forge-frame ─── */

.dev-tools-scope .mm-module-panel {
  padding: var(--sp-space, 24px 24px 28px !important);
  background:
    /* Blueprint grid — тонше */
    linear-gradient(rgba(197, 139, 58, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(197, 139, 58, 0.025) 1px, transparent 1px),
    /* Плита */
    radial-gradient(ellipse at 50% 0%,
      rgba(197, 139, 58, 0.05) 0%,
      transparent 40%),
    linear-gradient(180deg,
      var(--bg-surface, var(--bg-surface)) 0%,
      var(--bg-base, var(--bg-base)) 100%) !important;
  background-size: 32px 32px, 32px 32px, auto, auto !important;
  border: 2px solid var(--border-metal, var(--border-metal)) !important;
  border-radius: var(--radius-ui, 3px)!important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.85),
    0 0 0 3px var(--border-dim, var(--border-dim)),
    0 0 0 4px rgba(0, 0, 0, 0.75),
    0 0 0 5px rgba(197, 139, 58, 0.1),
    0 8px 24px rgba(0, 0, 0, 0.6),
    0 16px 48px rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px rgba(0, 0, 0, 0.75),
    inset 0 2px 0 rgba(232, 219, 178, 0.07),
    inset 0 -2px 0 rgba(0, 0, 0, 0.75),
    inset 3px 0 12px rgba(0, 0, 0, 0.3),
    inset -3px 0 12px rgba(0, 0, 0, 0.25) !important;
}

/* Module panel — великі рівети (replace existing) */
.dev-tools-scope .mm-module-rivet {
  width: 14px !important;
  height: 14px !important;
  background: radial-gradient(circle at 32% 28%,
    var(--accent-brass-hover) 0%, var(--accent-brass) 35%, var(--accent-brass-dim) 70%, var(--accent-brass-dim) 100%) !important;
  border: 1.5px solid rgba(0, 0, 0, 0.85) !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.6),
    inset 0 1px 1px rgba(255, 255, 255, 0.4),
    inset 0 -1px 1px rgba(0, 0, 0, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.85) !important;
}
.dev-tools-scope .mm-module-rivet::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background:
    linear-gradient(0deg,   transparent 42%, rgba(0, 0, 0, 0.6) 42%, rgba(0, 0, 0, 0.6) 58%, transparent 58%),
    linear-gradient(60deg,  transparent 42%, rgba(0, 0, 0, 0.5) 42%, rgba(0, 0, 0, 0.5) 58%, transparent 58%),
    linear-gradient(120deg, transparent 42%, rgba(0, 0, 0, 0.5) 42%, rgba(0, 0, 0, 0.5) 58%, transparent 58%);
  opacity: 0.5;
}
.dev-tools-scope .mm-module-rivet--tl { top: 10px !important;    left: 10px !important;  }
.dev-tools-scope .mm-module-rivet--tr { top: 10px !important;    right: 10px !important; }
.dev-tools-scope .mm-module-rivet--bl { bottom: 10px !important; left: 10px !important;  }
.dev-tools-scope .mm-module-rivet--br { bottom: 10px !important; right: 10px !important; }

/* ─── 14. METRIC TILES → gauge-plates з pressure-indicator ─── */

.dev-tools-scope .mm-metric-tile {
  padding: var(--sp-space, 8px 12px 6px !important);
  background:
    radial-gradient(ellipse 60% 40% at 50% 50%,
      rgba(197, 139, 58, 0.06) 0%,
      transparent 80%),
    linear-gradient(180deg,
      var(--bg-void, var(--bg-void)) 0%,
      var(--bg-base, var(--bg-base)) 100%) !important;
  border: 1.5px solid var(--border-metal, var(--border-metal)) !important;
  border-radius: var(--radius-ui, 3px)!important;
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.75),
    inset 0 -1px 0 rgba(232, 219, 178, 0.05),
    inset 0 0 0 1px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(232, 219, 178, 0.05) !important;
  position: relative;
}

.dev-tools-scope .mm-tile-value {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  color: var(--accent-brass-bright, #e8c860) !important;
}

.dev-tools-scope .mm-tile-label {
  font-family: var(--font-ui, 'Oswald', sans-serif) !important;
  font-size: 8px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--text-muted, var(--text-muted)) !important;
  opacity: 0.7 !important;
}

/* ─── 15. OFFLINE BANNER → Warning Beacon plate ─── */

.dev-tools-scope .mm-offline-banner {
  padding: var(--sp-space, 10px 20px) !important;
  background:
    linear-gradient(90deg,
      rgba(193, 68, 24, 0.12) 0%,
      rgba(193, 68, 24, 0.06) 50%,
      rgba(193, 68, 24, 0.12) 100%) !important;
  border: 1.5px solid var(--danger, var(--log-critical)) !important;
  border-radius: var(--radius-ui, 3px)!important;
  color: var(--danger, var(--log-critical)) !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.06em;
  box-shadow:
    inset 0 1px 0 rgba(232, 180, 150, 0.15),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 2px 6px rgba(0, 0, 0, 0.5),
    0 0 14px rgba(193, 68, 24, 0.18) !important;
  position: relative;
  overflow: hidden;
  animation: sp-warning-breathe 2.8s ease-in-out infinite;
}

/* Hazard-striping зверху + знизу */
.dev-tools-scope .mm-offline-banner::before,
.dev-tools-scope .mm-offline-banner::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 3px;
  background: repeating-linear-gradient(45deg,
    var(--danger, var(--log-critical)) 0, var(--danger, var(--log-critical)) 8px,
    var(--bg-void) 8px, var(--bg-void) 16px);
  opacity: 0.85;
  z-index: 1;
}
.dev-tools-scope .mm-offline-banner::before { top: 0; }
.dev-tools-scope .mm-offline-banner::after  { bottom: 0; }

.dev-tools-scope .mm-offline-banner .material-symbols-outlined {
  font-size: 20px !important;
  color: var(--danger, var(--log-critical)) !important;
}

/* ─── 16. SUMMARY RESTART BTN → Warning Lever з hazard frame ─── */

.dev-tools-scope .mm-summary-restart-btn {
  padding: var(--sp-space, 7px 14px !important);
  background: linear-gradient(180deg,
    rgba(193, 68, 24, 0.25) 0%,
    rgba(193, 68, 24, 0.10) 100%) !important;
  border: 1.5px solid var(--danger, var(--log-critical)) !important;
  border-radius: var(--radius-ui, 3px)!important;
  color: var(--text-bright, var(--text-bright)) !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8), 0 0 6px rgba(193, 68, 24, 0.4) !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 180, 150, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.55),
    0 0 12px rgba(193, 68, 24, 0.25) !important;
  position: relative;
  overflow: hidden;
}

.dev-tools-scope .mm-summary-restart-btn:not(.mm-hidden)::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: rgba(193, 68, 24, 0.65) !important;
  opacity: 1 !important;
  z-index: 1;
  pointer-events: none;
}
.dev-tools-scope .mm-summary-restart-btn:not(.mm-hidden)::after {
  content: none !important;
}

.dev-tools-scope .mm-summary-restart-btn:hover {
  background: linear-gradient(180deg,
    rgba(193, 68, 24, 0.45) 0%,
    rgba(193, 68, 24, 0.20) 100%) !important;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(232, 180, 150, 0.22),
    0 3px 8px rgba(0, 0, 0, 0.6),
    0 0 20px rgba(193, 68, 24, 0.45) !important;
}

/* ─── 17. CARD NAME TYPOGRAPHY: engraved brass ─── */

.dev-tools-scope .mm-card-name {
  font-family: 'Oswald', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--module-accent, var(--text-bright)) 75%, var(--text-body)) !important;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.85),
    0 -1px 0 rgba(232, 208, 122, 0.10) !important;
}

.dev-tools-scope .mm-card-ua-name {
  font-family: var(--font-ui, 'Oswald', sans-serif) !important;
  font-size: 9px !important;
  letter-spacing: 0.14em !important;
  color: var(--text-muted, var(--text-muted)) !important;
  text-transform: uppercase;
  opacity: 0.75;
}

.dev-tools-scope .mm-card-desc {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 10.5px !important;
  line-height: 1.65 !important;
  color: var(--text-body, var(--text-body)) !important;
  letter-spacing: 0.01em;
}

/* ─── 18. CARD NUMBER → великий brass nameplate ─── */

.dev-tools-scope .mm-card-num {
  padding: 4px 10px !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--module-accent, var(--accent-brass)) 30%, var(--bg-surface)) 0%,
    color-mix(in srgb, var(--module-accent, var(--accent-brass)) 10%, var(--bg-base)) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--module-accent, var(--accent-brass)) 55%, rgba(0,0,0,0.6)) !important;
  border-radius: 2px !important;
  color: color-mix(in srgb, var(--module-accent, var(--accent-brass)) 90%, white) !important;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.85),
    0 0 6px color-mix(in srgb, var(--module-accent, var(--accent-brass)) 50%, transparent) !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 219, 178, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 1px 3px rgba(0, 0, 0, 0.5),
    0 0 8px color-mix(in srgb, var(--module-accent, var(--accent-brass)) 30%, transparent) !important;
}

/* Dim num when disabled */
.mm-card[data-status="disabled"] .mm-card-num,
.mm-card--disabled-state .mm-card-num {
  opacity: 0.35 !important;
  box-shadow: none !important;
  filter: saturate(0.2) !important;
}

/* ─── 19. SPINNER → forge gear ─── */

.dev-tools-scope .mm-spinner-ring {
  width: 32px !important;
  height: 32px !important;
  border: 3px solid var(--border-metal, var(--border-metal)) !important;
  border-top-color: var(--accent-brass-bright, #e8c860) !important;
  border-right-color: var(--accent-brass, var(--accent-brass)) !important;
  box-shadow:
    inset 0 0 4px rgba(0, 0, 0, 0.6),
    0 0 10px rgba(197, 139, 58, 0.35) !important;
  animation: sp-valve-spin 0.9s linear infinite !important;
}

/* ─── 20. SCROLLBAR → brass pipe ─── */

.dev-tools-scope::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,
    var(--accent-brass-bright, #e8c860) 0%,
    var(--accent-brass, var(--accent-brass)) 50%,
    var(--accent-brass-dim, #8a5a22) 100%) !important;
  border: 1px solid rgba(0, 0, 0, 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4);
}

/* ═══════════════════════════════════════════════════════════════
   STEAMPUNK FORGE REBIRTH v3.0 — END
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   ALERTS PARITY v1.0 — Структурна відповідність еталону
   Всі нові елементи: scan-line, back-panel, refresh-cluster,
   clock-sidecol, sp-gauge в pipe, sp-valve на панелі
   ═══════════════════════════════════════════════════════════════ */

/* ─── al-header: знижуємо z-index 500→50 щоб clock/back панелі (z:100) були зверху ─── */

.dev-tools-scope .al-header {
  z-index: 50 !important;
}

/* ─── Scan line ambient effect ─── */

.dev-tools-scope .mm-scan-line {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(197, 139, 58, 0.0) 30%,
    rgba(197, 139, 58, 0.55) 50%,
    rgba(197, 139, 58, 0.0) 70%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 2;
  animation: mm-scan-sweep 6s ease-in-out infinite;
  opacity: 0.7;
}

@keyframes mm-scan-sweep {
  0%   { transform: translateX(-100%); opacity: 0; }
  10%  { opacity: 0.7; }
  90%  { opacity: 0.7; }
  100% { transform: translateX(200%); opacity: 0; }
}

/* ─── Back panel + SVG monolith ─── */

.dev-tools-scope .al-back-panel {
  position: fixed !important;
  top: calc(var(--header-h, 96px) / 2) !important;
  transform: translateY(-50%) !important;
  left: max(20px, calc((100vw - var(--max-width, 1400px)) / 2 + 20px)) !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 100 !important;
  pointer-events: auto !important;
  display: grid !important;
  grid-template-columns: auto auto !important;
  column-gap: 20px !important;
  align-items: center !important;
}

.dev-tools-scope .al-arrow-wrap {
  display: block;
}

.dev-tools-scope .al-arrow-btn {
  display: block;
  position: relative;
  text-decoration: none;
  outline: none;
}

.dev-tools-scope .al-arrow-btn:focus-visible .al-backarrow-svg {
  outline: 2px solid var(--accent-brass);
  outline-offset: 2px;
  border-radius: 2px;
}

.dev-tools-scope .al-backarrow-svg {
  display: block;
  width: 210px;
  height: 50px;
  transition: filter 0.15s ease;
}

.dev-tools-scope .al-arrow-btn:hover .al-backarrow-svg {
  opacity: 0.9;
}

.dev-tools-scope .mm-bk-gear {
  animation: spin 4s linear infinite;
  transform-origin: 188px 25px;
  transform-box: fill-box;
}

.dev-tools-scope .al-arrow-tooltip {
  position: absolute;
  bottom: -26px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-elevated, var(--bg-elevated));
  border: 1px solid var(--border-metal, var(--border-metal));
  color: var(--text-body, var(--text-body));
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  letter-spacing: 0.08em;
  padding: var(--sp-space, 3px 8px);
  border-radius: 2px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 10;
}

.dev-tools-scope .al-arrow-btn:hover .al-arrow-tooltip {
  opacity: 1;
}

/* ─── Refresh cluster ─── */

.dev-tools-scope .al-refresh-cluster {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-space, 4px);
}

.dev-tools-scope .al-refresh-sidecol {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-space, 4px);
}

.dev-tools-scope .al-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface, var(--bg-surface));
  border: 1px solid var(--border-metal, var(--border-metal));
  color: var(--text-muted, var(--text-muted));
  border-radius: var(--forge-radius, 2px);
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.dev-tools-scope .al-icon-btn:hover {
  border-color: var(--border-bright, var(--border-bright));
  color: var(--accent-brass, var(--accent-brass));
  background: var(--bg-elevated, var(--bg-elevated));
}

.dev-tools-scope .al-icon-btn:active {
  background: var(--bg-base, var(--bg-base));
  border-color: var(--accent-brass, var(--accent-brass));
}

.dev-tools-scope .al-icon-btn .material-symbols-outlined {
  font-size: 18px;
  line-height: 1;
}

.dev-tools-scope .al-refresh-sidebtn {
  width: 34px;
  height: 34px;
  box-shadow: var(--forge-inset, inset 0 2px 6px rgba(0,0,0,0.65));
}

/* ─── Interval dropdown (al-gear-dropdown) — портовано з alerts ─── */

.dev-tools-scope.mm-page .al-gear-dropdown {
  position: absolute !important;
  right: calc(100% + 8px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 200 !important;
  background: var(--bg-void) !important;
  border: 1px solid var(--border-metal) !important;
  border-top: 2px solid var(--accent-brass) !important;
  border-radius: 3px !important;
  box-shadow:
    0 8px 24px rgba(0,0,0,0.8),
    0 0 0 1px rgba(92,68,48,0.5),
    inset 0 1px 0 rgba(232,200,140,0.1) !important;
  min-width: 90px !important;
  overflow: hidden !important;
}

.dev-tools-scope.mm-page .al-gear-dropdown[hidden] {
  display: none !important;
}

.dev-tools-scope.mm-page .al-gear-dropdown-header {
  font-family: 'Cinzel', serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  color: var(--accent-ember) !important;
  padding: 6px 12px 5px !important;
  text-align: center !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid rgba(197,139,58,0.4) !important;
  user-select: none !important;
  background: linear-gradient(180deg, rgba(197,139,58,0.08), transparent) !important;
}

.dev-tools-scope.mm-page .al-gear-dropdown-opt {
  display: block !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(92,68,48,0.3) !important;
  color: var(--text-muted) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  padding: 8px 12px !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  outline: none !important;
}

.dev-tools-scope.mm-page .al-gear-dropdown-opt:last-child {
  border-bottom: none !important;
}

.dev-tools-scope.mm-page .al-gear-dropdown-opt:hover,
.dev-tools-scope.mm-page .al-gear-dropdown-opt:focus {
  background: rgba(197,139,58,0.15) !important;
  color: var(--text-bright) !important;
}

.dev-tools-scope.mm-page .al-gear-dropdown-opt.is-selected {
  color: var(--accent-brass) !important;
  background: rgba(197,139,58,0.10) !important;
}

.dev-tools-scope.mm-page .al-gear-select-overlay {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ─── Countdown таймер в schedule button ─── */

.dev-tools-scope.mm-page .al-refresh-countdown {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  color: var(--accent-ember) !important;
  pointer-events: none !important;
  white-space: nowrap !important;
  z-index: 2 !important;
  background: rgba(20,14,8,0.85) !important;
  padding: 0 3px !important;
  border-radius: 1.5px !important;
}

.dev-tools-scope.mm-page #al-gear-body:has(#al-countdown:not(:empty)) .material-symbols-outlined {
  opacity: 0.15 !important;
}

.dev-tools-scope .mm-steam-puff {
  position: absolute;
  top: -8px;
  right: -4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(197, 139, 58, 0.6);
  pointer-events: none;
  opacity: 0;
}

.dev-tools-scope .mm-steam-puff.active {
  animation: mm-puff-out 0.6s ease forwards;
}

@keyframes mm-puff-out {
  0%   { transform: scale(0); opacity: 0.8; }
  60%  { transform: scale(2.5); opacity: 0.4; }
  100% { transform: scale(4); opacity: 0; }
}

/* ─── Clock sidecol ─── */

.dev-tools-scope .al-clock-panel {
  display: flex !important;
  align-items: center;
  gap: var(--sp-space, 8px);
  pointer-events: auto !important;
}

.dev-tools-scope .al-clock-sidecol {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-space, 4px);
  flex-shrink: 0;
}

.dev-tools-scope .al-clock-sidebtn {
  width: 32px;
  height: 32px;
  padding: var(--sp-card-pad, 0);
}

.dev-tools-scope .al-clock-sidebtn--top {
  border-radius: var(--forge-radius, 2px) var(--forge-radius, 2px) 0 0;
}

.dev-tools-scope .al-clock-sidebtn--bot {
  border-radius: 0 0 var(--forge-radius, 2px) var(--forge-radius, 2px);
}

.dev-tools-scope .al-clock-sidebtn .material-symbols-outlined {
  font-size: 16px;
}

/* ─── sp-gauge в pipe section ─── */

.dev-tools-scope .mm-pipe-gauge {
  position: absolute;
  right: -22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

.dev-tools-scope .mm-pipe-gauge .sp-gauge-label {
  font-family: 'Oswald', sans-serif;
  font-size: 7px;
  letter-spacing: 0.08em;
}

/* ─── sp-valve на лівому краї панелі ─── */

.dev-tools-scope .mm-block-valve {
  position: absolute;
  left: -24px;
  top: 38%;
  transform: translateY(-50%);
  z-index: 2;
}

/* ─── mm-page: blueprint grid background ─── */

body.mm-page {
  background-color: var(--bg-base, var(--bg-base));
  background-image:
    linear-gradient(rgba(92, 68, 48, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 68, 48, 0.04) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* ─── Control Block: 3-Row Grid ─── */

.dev-tools-scope .mm-control-block {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border-metal, var(--border-metal));
  border-radius: var(--forge-radius, 2px);
  background: var(--bg-surface, var(--bg-surface));
  box-shadow: var(--forge-inset, inset 0 2px 6px rgba(0,0,0,0.65)), var(--forge-shadow, 0 4px 12px rgba(0,0,0,0.55));
  margin-bottom: var(--sp-space, 8px);
  overflow: hidden;
}

.dev-tools-scope .mm-mc-row {
  display: grid;
  align-items: center;
  padding: var(--sp-card-pad, 0 16px);
  border-bottom: 1px solid var(--border-dim, var(--border-dim));
  min-height: 44px;
  position: relative;
}

.dev-tools-scope .mm-mc-row:last-child {
  border-bottom: none;
}

/* RS1 — Header Row: title | pills | right */
.dev-tools-scope .mm-mc-row--header {
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-space, 16px);
  min-height: 46px;
  background: linear-gradient(180deg, rgba(197,139,58,0.10) 0%, rgba(197,139,58,0.04) 100%);
}

/* RS2 — Console Row: tabs | banner | search */
.dev-tools-scope .mm-mc-row--console {
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-space, 12px);
  min-height: 52px;
}

/* RS3 — Footer Row: indicator | center | time */
.dev-tools-scope .mm-mc-row--footer {
  grid-template-columns: 1fr auto 1fr;
  gap: var(--sp-space, 12px);
  min-height: 36px;
  background: rgba(0,0,0,0.15);
}

/* Title group */
.dev-tools-scope .mm-mc-title-group {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 8px);
  flex-shrink: 0;
}

.dev-tools-scope .mm-mc-title-icon {
  font-size: 16px;
  color: var(--accent-brass, var(--accent-brass));
}

.dev-tools-scope .mm-mc-title-text {
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-bright, var(--text-bright));
}

/* Pills group */
.dev-tools-scope .mm-mc-pills-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-space, 4px);
}

.dev-tools-scope .mm-mc-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space, 5px);
  padding: var(--sp-space, 3px 10px);
  border: 1px solid var(--border-metal, var(--border-metal));
  border-radius: var(--forge-radius, 2px);
  background: var(--bg-elevated, var(--bg-elevated));
  cursor: default;
  transition: border-color 0.15s ease;
}

.dev-tools-scope .mm-mc-pill:hover {
  border-color: var(--border-bright, var(--border-bright));
}

.dev-tools-scope .mm-pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.6);
}

.dev-tools-scope .mm-pill-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--text-muted, var(--text-muted));
}

.dev-tools-scope .mm-pill-count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 400;
  min-width: 16px;
  text-align: center;
}

/* Pill variants */
.dev-tools-scope .mm-mc-pill--active .mm-pill-dot  { background: var(--success, var(--success)); }
.dev-tools-scope .mm-mc-pill--active .mm-pill-count { color: var(--success, var(--success)); }
.dev-tools-scope .mm-mc-pill--active.mm-mc-pill     { border-color: rgba(86,163,166,0.3); }

.dev-tools-scope .mm-mc-pill--disabled .mm-pill-dot  { background: var(--text-muted, var(--text-muted)); }
.dev-tools-scope .mm-mc-pill--disabled .mm-pill-count { color: var(--text-muted, var(--text-muted)); }

.dev-tools-scope .mm-mc-pill--error .mm-pill-dot  { background: var(--danger-text, var(--log-error)); }
.dev-tools-scope .mm-mc-pill--error .mm-pill-count { color: var(--danger-text, var(--log-error)); }
.dev-tools-scope .mm-mc-pill--error.has-errors     { border-color: var(--danger-border, var(--danger)); background: var(--danger-bg, rgba(163,71,27,0.18)); }
.dev-tools-scope .mm-mc-pill--error.has-errors .mm-pill-dot { background: var(--log-critical, var(--log-critical)); }
.dev-tools-scope .mm-mc-pill--error.has-errors .mm-pill-count { color: var(--log-critical, var(--log-critical)); }

/* Rivet divider between pills */
.dev-tools-scope .mm-rivet-div {
  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,0.08);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.7);
  flex-shrink: 0;
}

/* Header right */
.dev-tools-scope .mm-mc-header-right {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 8px);
  flex-shrink: 0;
  justify-content: flex-end;
}

.dev-tools-scope .mm-b1-hint {
  font-family: 'Barlow', sans-serif;
  font-size: 11px;
  color: var(--text-muted, var(--text-muted));
  white-space: nowrap;
}

/* mm-module-plate in header row (inline, no absolute) */
.dev-tools-scope .mm-mc-header-right .mm-module-plate {
  position: static;
  top: unset;
  right: unset;
}

/* Filter tabs (RS2 left) */
.dev-tools-scope .mm-mc-tabs {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 3px);
  flex-shrink: 0;
}

/* Hero Banner (RS2 center) */
.dev-tools-scope .mm-mc-hero-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-space, 8px);
  padding: var(--sp-space, 8px 20px);
  border: 1px solid var(--border-metal, var(--border-metal));
  border-radius: var(--forge-radius, 2px);
  background: var(--bg-elevated, var(--bg-elevated));
  font-family: 'Barlow', sans-serif;
  font-size: 13px;
  color: var(--text-body, var(--text-body));
  position: relative;
  transition: border-color 0.2s ease, background 0.2s ease;
  box-shadow: var(--forge-inset, inset 0 2px 6px rgba(0,0,0,0.65));
}

.dev-tools-scope .mm-mc-hero-banner--ok {
  border-color: var(--success-border, var(--success));
  background: var(--success-bg, rgba(86,163,166,0.15));
  color: var(--success, var(--success));
}

.dev-tools-scope .mm-mc-hero-banner--warn {
  border-color: var(--warning-border, var(--log-warn));
  background: var(--warning-bg, rgba(224,196,137,0.15));
  color: var(--warning, var(--log-warn));
}

.dev-tools-scope .mm-mc-hero-banner--error {
  border-color: var(--danger-border, var(--danger));
  background: var(--danger-bg, rgba(163,71,27,0.18));
  color: var(--danger-text, var(--log-error));
}

.dev-tools-scope .mm-banner-icon {
  font-size: 16px;
}

.dev-tools-scope .mm-banner-bolt {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--text-muted), var(--bg-elevated));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.7);
}

.dev-tools-scope .mm-banner-bolt--l { left: 6px; top: 50%; transform: translateY(-50%); }
.dev-tools-scope .mm-banner-bolt--r { right: 6px; top: 50%; transform: translateY(-50%); }

/* Footer row */
.dev-tools-scope .mm-mc-smoke {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 6px);
}

.dev-tools-scope .mm-mc-smoke-icon {
  font-size: 14px;
  color: var(--text-muted, var(--text-muted));
  flex-shrink: 0;
}

.dev-tools-scope .mm-mc-footer-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dev-tools-scope .mm-mc-action-group {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-space, 5px);
}

.dev-tools-scope .mm-mc-action-group .mm-last-updated {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-muted, var(--text-muted));
}

/* Summary restart btn (footer center) */
.dev-tools-scope .mm-summary-restart-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space, 5px);
  padding: var(--sp-space, 4px 12px);
  background: var(--danger-bg, rgba(163,71,27,0.18));
  border: 1px solid var(--danger-border, var(--danger));
  border-radius: var(--forge-radius, 2px);
  color: var(--danger-text, var(--log-error));
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.dev-tools-scope .mm-summary-restart-btn:hover {
  background: rgba(163,71,27,0.3);
  border-color: var(--log-error, var(--log-error));
}

.dev-tools-scope .mm-summary-restart-btn .material-symbols-outlined {
  font-size: 15px;
}

/* ═══════════════════════════════════════════════════════════════
   ALERTS PARITY v1.0 — END
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   FORGE MODAL v1.0 — Confirm Dialog + Logs Modal steampunk finish
   Еталон: скріншот "ОЧИСТИТИ PM2 ЛОГИ?" (темна панель, рамка,
   іконка-кільце, ember CTA, dark cancel)
   ═══════════════════════════════════════════════════════════════ */

/* ── Overlay: глибокий ковальський туман ── */
.dev-tools-scope .mm-modal-overlay {
  background: rgba(5, 3, 2, 0.90);
}

/* ── Confirm panel: темна деревина + mеталева рамка ── */
.dev-tools-scope .mm-confirm {
  background: linear-gradient(160deg, var(--bg-surface) 0%, var(--bg-void) 55%, var(--bg-void) 100%);
  border: 2px solid var(--border-metal, var(--border-metal));
  border-radius: var(--forge-radius, 2px);
  max-width: 420px;
  padding: var(--sp-space, 40px 36px 32px);
  text-align: center;
  position: relative;
  box-shadow:
    0 0 0 1px var(--border-dim, var(--border-dim)),
    inset 0 1px 0 rgba(232, 219, 178, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.60),
    0 24px 80px rgba(0, 0, 0, 0.90);
}

/* ── Іконка: металеве кільце (60px) ── */
.dev-tools-scope .mm-confirm-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 20px;
  border: 2px solid var(--border-metal, var(--border-metal));
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--border-dim), var(--bg-void));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 1px 0 rgba(232, 219, 178, 0.10),
    0 4px 12px rgba(0, 0, 0, 0.55);
  font-size: 0;
}

.dev-tools-scope .mm-confirm-mat-icon {
  font-size: 26px;
  color: var(--text-muted, var(--text-muted));
  display: block;
  filter: none;
}

.dev-tools-scope .mm-confirm-mat-icon--ok {
  color: var(--success, var(--success));
  filter: none;
}

.dev-tools-scope .mm-confirm-mat-icon--stop {
  color: var(--accent-ember, var(--log-error));
  filter: none;
}

/* ── Заголовок: Oswald CAPS ── */
.dev-tools-scope .mm-confirm h3 {
  font-family: 'Oswald', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-bright, var(--text-bright));
  margin: 0 0 10px;
}

/* ── Опис: Barlow, body-tone ── */
.dev-tools-scope .mm-confirm p {
  font-family: 'Barlow', sans-serif;
  font-size: 11px;
  line-height: 1.65;
  color: var(--text-body, var(--text-body));
  margin: 0 0 28px;
  letter-spacing: 0.02em;
}

/* ── Кнопки ── */
.dev-tools-scope .mm-confirm-actions {
  display: flex;
  gap: var(--sp-space, 12px);
  justify-content: center;
}

/* Primary — ПІДТВЕРДИТИ (ember border + fill on hover) */
.dev-tools-scope .mm-confirm-ok {
  padding: var(--sp-space, 9px 22px);
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  background: transparent;
  border: 2px solid var(--accent-ember, var(--log-error));
  border-radius: var(--forge-radius, 2px);
  color: var(--accent-ember, var(--log-error));
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.dev-tools-scope .mm-confirm-ok:hover,
.dev-tools-scope .mm-confirm-ok:focus-visible {
  background: var(--accent-ember, var(--log-error));
  color: var(--bg-void, var(--bg-void));
  border-color: var(--accent-ember-hover, #ef7f4d);
  outline: none;
}

/* Cancel — СКАСУВАТИ (dark metal border, muted) */
.dev-tools-scope .mm-confirm-cancel {
  padding: var(--sp-space, 9px 22px);
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  background: transparent;
  border: 2px solid var(--border-metal, var(--border-metal));
  border-radius: var(--forge-radius, 2px);
  color: var(--text-muted, var(--text-muted));
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.dev-tools-scope .mm-confirm-cancel:hover,
.dev-tools-scope .mm-confirm-cancel:focus-visible {
  border-color: var(--border-bright, var(--border-bright));
  color: var(--text-body, var(--text-body));
  outline: none;
}

/* ── Logs modal: мінімальний апдейт — scrollbar і border ── */
.dev-tools-scope .mm-modal-body {
  scrollbar-width: thin;
  scrollbar-color: var(--border-metal, var(--border-metal)) transparent;
}

.dev-tools-scope .mm-modal-body::-webkit-scrollbar { width: 6px; }
.dev-tools-scope .mm-modal-body::-webkit-scrollbar-track {
  background: transparent;
}
.dev-tools-scope .mm-modal-body::-webkit-scrollbar-thumb {
  background: var(--border-metal, var(--border-metal));
  border-radius: 2px;
}
.dev-tools-scope .mm-modal-body::-webkit-scrollbar-thumb:hover {
  background: var(--border-bright, var(--border-bright));
}

/* ── Modal header: Oswald font для заголовку ── */
.dev-tools-scope .mm-modal-header h3 {
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-bright, var(--text-bright));
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   FORGE MODAL v1.0 — END
   ═══════════════════════════════════════════════════════════════ */

/* ─── Back-arrow SVG: шрифт тексту "DEV TOOLS" ─── */
.dev-tools-scope .al-backarrow-svg .al-bk-label {
  font-family: var(--font-mono, 'IBM Plex Mono', 'Cinzel', monospace);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  pointer-events: none;
}

/* Brass shine sweep — горизонтальна лінія поверх тексту */
.dev-tools-scope .al-backarrow-svg .al-bk-shine-line {
  pointer-events: none;
}

/* Back-gear — велика шестерня ЗА пластиною, обертається CW 45s */
.dev-tools-scope .al-backarrow-svg .al-bk-rot-back {
  animation: mm-bk-back-spin 45s linear infinite;
  transform-box: fill-box;
  transform-origin: center center;
}

@keyframes mm-bk-back-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Hover: прискорення шестерні + amber glow + translateX */
.dev-tools-scope .al-back-panel .al-arrow-btn:hover {
  filter:
    drop-shadow(0 3px 14px rgba(0,0,0,0.80))
    drop-shadow(0 0 12px rgba(227,111,61,0.50))
    drop-shadow(0 0 4px rgba(197,139,58,0.40));
  transform: translateX(-3px);
}

.dev-tools-scope .al-back-panel .al-arrow-btn:hover .al-bk-rot-back {
  animation-duration: 10s;
}

/* Active: pressed-down effect */
.dev-tools-scope .al-back-panel .al-arrow-btn:active {
  transform: translateX(-1px) scale(0.98);
  filter:
    drop-shadow(0 1px 4px rgba(0,0,0,0.90))
    drop-shadow(0 0 6px rgba(197,139,58,0.30));
}

/* Focus-visible: amber outline */
.dev-tools-scope .al-back-panel .al-arrow-btn:focus-visible .al-backarrow-svg {
  outline: 2px solid var(--accent-brass);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ─── mm-crest-sigil-row — wrapper навколо заголовку ─── */
.dev-tools-scope .mm-crest .mm-crest-sigil-row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════
   NEW CARD COMPONENTS v5.0
   ═══════════════════════════════════════════════════════════ */

/* ─── Edison lamp toggle (SVG cage bulb) ─── */

.mm-tb-lamp .mm-toggle-wrap { display: block; cursor: pointer; }

/* track — прозорий контейнер, форма задається SVG */
.mm-tb-lamp .mm-toggle-track {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important; height: auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
.mm-tb-lamp .mm-toggle-track::after { display: none !important; }

/* SVG lamp: розмір і тіні */
.mm-bulb-svg {
  width: 26px; height: 38px;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.85));
  transition: filter 0.35s ease;
}

/* OFF: темна лампа — вже задано в SVG fill */
.mm-bulb-glass { transition: fill 0.35s ease; }
.mm-bulb-filament { transition: stroke 0.35s ease; }

/* ON: включена — тепла янтарна лампа */
.mm-tb-lamp .mm-toggle-input:checked + .mm-toggle-track .mm-bulb-glass {
  fill: rgba(185, 100, 8, 0.52) !important;
}
.mm-tb-lamp .mm-toggle-input:checked + .mm-toggle-track .mm-bulb-filament {
  stroke: rgba(255, 220, 150, 0.92) !important;
}
.mm-tb-lamp .mm-toggle-input:checked + .mm-toggle-track .mm-bulb-svg {
  filter:
    drop-shadow(0 0 8px rgba(255,160,30,0.80))
    drop-shadow(0 0 4px rgba(255,210,80,0.55))
    drop-shadow(0 2px 5px rgba(0,0,0,0.70)) !important;
  animation: mm-forge-breathe 3s ease-in-out infinite !important;
}

/* ERROR: червона лампа */
.mm-tb-lamp .mm-toggle--error + .mm-toggle-track .mm-bulb-glass {
  fill: rgba(130, 25, 20, 0.60) !important;
}
.mm-tb-lamp .mm-toggle--error + .mm-toggle-track .mm-bulb-filament {
  stroke: rgba(255,100,90,0.72) !important;
}
.mm-tb-lamp .mm-toggle--error + .mm-toggle-track .mm-bulb-svg {
  box-shadow: 0 2px 5px rgba(0,0,0,0.70) !important;animation: mm-forge-breathe 1.8s ease-in-out infinite !important;
}

/* Bot offline — всі лампи мигають червоним */
.mm-card--bot-offline .mm-tb-lamp .mm-bulb-svg,
.mm-card--bot-offline .mm-lamp-btn .mm-bulb-svg {
  animation: mm-lamp-warn-bulb 1.8s ease-in-out infinite !important;
}
@keyframes mm-lamp-warn-bulb {
  0%, 100% { opacity: 0.75; }
  50%       { opacity: 1; }
}

/* System lamp-btn — прозорий, форму задає SVG */
.mm-lamp-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: auto !important; height: auto !important;
  padding: 0 !important;
  cursor: pointer;
  transition: filter 0.25s ease !important;
}
.mm-lamp-btn--on .mm-bulb-glass { fill: rgba(185, 100, 8, 0.52); }
.mm-lamp-btn--on .mm-bulb-filament { stroke: rgba(255,220,150,0.92); }
.mm-lamp-btn--on .mm-bulb-svg {
  filter:
    drop-shadow(0 0 8px rgba(255,160,30,0.80))
    drop-shadow(0 0 4px rgba(255,210,80,0.55))
    drop-shadow(0 2px 5px rgba(0,0,0,0.70));
  animation: mm-forge-breathe 3s ease-in-out infinite;
}
.mm-lamp-btn--off .mm-bulb-glass { fill: rgba(120, 20, 18, 0.55); }
.mm-lamp-btn--off .mm-bulb-filament { stroke: rgba(255,90,80,0.45); }
.mm-lamp-btn--off .mm-bulb-svg {
  box-shadow: 0 2px 5px rgba(0,0,0,0.70) !important;}
.mm-lamp-btn:hover .mm-bulb-svg { filter: brightness(1.2) drop-shadow(0 2px 5px rgba(0,0,0,0.8)) !important; }
.mm-lamp-btn:active { transform: scale(0.94) !important; }

/* ─── System "Anbu-Bot" plate ────────────────── */
.mm-sys-plate {
  font-family: 'Oswald', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-brass, #c58b3a);
  background: color-mix(in srgb, var(--accent-brass, #c58b3a) 8%, var(--bg-void, #0d0907));
  border: 1px solid color-mix(in srgb, var(--accent-brass, #c58b3a) 28%, transparent);
  padding: 3px 8px;
  border-radius: 2px;
  box-shadow: 0 0 6px color-mix(in srgb, var(--accent-brass, #c58b3a) 20%, transparent);
}

/* ─── System lamp button (Start/Stop bot) ──── */
.mm-lamp-btn {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.10);
  cursor: pointer;
  background: radial-gradient(circle at 35% 30%, var(--sp-steel, #6A6A6A), var(--sp-steel-dark, #3A3A3A));
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.75), inset 0 -1px 1px rgba(255,255,255,0.04);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.mm-lamp-btn--on {
  background: radial-gradient(circle at 35% 30%, var(--success-light, #a8d4a0), var(--success, #5ea88a), var(--success-dark, #2a5040));
  border-color: rgba(94,168,138,0.25);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.5), 0 0 8px rgba(94,168,138,0.5);
  animation: mm-forge-breathe 3s ease-in-out infinite;
}
.mm-lamp-btn--off {
  background: radial-gradient(circle at 35% 30%, var(--log-error-light, #e08080), var(--log-error, #c06060), var(--log-error-dark, #5a2020));
  border-color: rgba(192,96,96,0.25);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.5), 0 0 6px rgba(192,96,96,0.4);
}
.mm-lamp-btn:hover { filter: brightness(1.15); }

/* ─── Бот offline → всі лампи/toggle блимають червоним ── */
.mm-card--bot-offline .mm-toggle-track {
  animation: mm-lamp-warn 1.8s ease-in-out infinite !important;
}
@keyframes mm-lamp-warn {
  0%, 100% { box-shadow: inset 0 1px 2px rgba(0,0,0,0.6), 0 0 3px rgba(192,96,96,0.2); }
  50%       { box-shadow: inset 0 1px 2px rgba(0,0,0,0.6), 0 0 10px rgba(192,96,96,0.7); }
}

/* ─── Вимкнений модуль — затемнення + "ВИМК" label ──── */
.mm-card--disabled-state {
  opacity: 0.6;
  filter: saturate(0.4);
  transition: opacity 0.3s ease, filter 0.3s ease;
}
.mm-card--disabled-state::after {
  content: 'ВИМК';
  position: absolute;
  bottom: 8px; right: 10px;
  font-family: 'Oswald', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(192,96,96,0.55);
  border: 1px solid rgba(192,96,96,0.20);
  padding: 2px 6px;
  border-radius: 2px;
  pointer-events: none;
}

/* ─── Loading spinner ── */
.mm-spinner-ring {
  width: 36px; height: 36px;
  border: 3px solid rgba(197,139,58,0.15);
  border-top-color: var(--accent-brass, #c58b3a);
  border-radius: 50%;
  animation: mm-spin 0.9s linear infinite;
}
@keyframes mm-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .mm-spinner-ring { animation: none !important; }
}
.mm-loading span {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted, #8a7a6a);
  margin-top: 6px;
}

/* ─── Interval dropdown (копія стилю з Alerts) ── */
body.dev-tools-scope.mm-page .al-gear-dropdown {
  position: absolute !important;
  right: auto !important;
  left: 50% !important;
  top: calc(100% + 6px) !important;
  transform: translateX(-50%) !important;
  z-index: 10540 !important;
  background: var(--bg-elevated, #1c1a16) !important;
  border: 1px solid rgba(197,139,58,0.35) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.6), inset 0 1px 0 rgba(232,200,140,0.1) !important;
  min-width: 90px !important;
  overflow: hidden !important;
  animation: al-dropdown-in 0.18s ease-out !important;
}
body.dev-tools-scope.mm-page .al-gear-dropdown[hidden] { display: none !important; }

body.dev-tools-scope.mm-page .al-gear-dropdown-header {
  font-family: 'Cinzel', serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  color: var(--accent-ember, #e36f3d) !important;
  padding: 8px 12px 6px !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid rgba(197,139,58,0.4) !important;
  background: linear-gradient(180deg, rgba(197,139,58,0.08), transparent) !important;
}
body.dev-tools-scope.mm-page .al-gear-dropdown-opt {
  display: block !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(92,68,48,0.3) !important;
  padding: 8px 12px !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 11px !important;
  color: var(--text-body, #b8a880) !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}
body.dev-tools-scope.mm-page .al-gear-dropdown-opt:last-child { border-bottom: none !important; }
body.dev-tools-scope.mm-page .al-gear-dropdown-opt:hover,
body.dev-tools-scope.mm-page .al-gear-dropdown-opt:focus {
  background: rgba(197,139,58,0.15) !important;
  color: var(--text-bright, #f3efdc) !important;
}
body.dev-tools-scope.mm-page .al-gear-dropdown-opt.is-selected {
  color: var(--accent-brass, #c58b3a) !important;
  background: rgba(197,139,58,0.1) !important;
}
body.dev-tools-scope.mm-page .al-refresh-cluster { position: relative !important; }

@keyframes al-dropdown-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-4px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* K. Atmosphere — vignette */
body.dev-tools-scope.mm-body::after,
body.dev-tools-scope.module-manager-page::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%);
}

/* ═══════════════════════════════════════════════════════════════════ */
/* 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;
}