/* ═══════════════════════════════════════════════════════════════════════
   devtools-style-adc.css — Dev Tools Hub (головний дашборд)
   Стиль: Industrial Forge Steampunk
   Палітра: виключно forge-токени з dev-tools-base.css (.dev-tools-scope)
   ═══════════════════════════════════════════════════════════════════════

   §1   Root / Page Setup
   §2   Main Layout
   §3   Section Labels
   §4   Live Cards Grid
   §5   Live Status Dot
   §6   Live Panel Separator
   §7   Health HUD
   §8   Command Bar
   §9   Search Input
   §10  Filter Buttons
   §11  Health Summary
   §12  Section Divider
   §13  Tools Group
   §14  Tools Grid + Standard Cards
   §15  Card Icons
   §16  Card Meta / Tags / Arrow
   §17  Debug Card Wide
   §18  Profile Quick Search
   §19  Keyboard Overlay
   §20  Command Palette
   §21  Animations
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────
   §1 ROOT / PAGE SETUP
   ───────────────────────────────────────────────────────────────────── */

.dev-tools-scope.al-page {
  background-color: 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;
  min-height: 100vh;
  color: var(--text-body);
  font-family: var(--font-ui, 'Barlow', sans-serif);
}

@media (prefers-reduced-motion: no-preference) {
  .dev-tools-scope.al-page {
    animation: dt-blueprint-drift 90s linear infinite;
  }
}

.dev-tools-scope.al-page::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(20, 16, 12, 0) 60%, rgba(10, 8, 6, 0.7) 100%),
    radial-gradient(ellipse at 50% 100%, rgba(20, 16, 12, 0) 60%, rgba(10, 8, 6, 0.5) 100%);
  pointer-events: none;
  z-index: 0;
}

/* ─────────────────────────────────────────────────────────────────────
   §2 MAIN LAYOUT
   ───────────────────────────────────────────────────────────────────── */

.devtools-main {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px 60px;
  box-sizing: border-box;
}

.devtools-section {
  padding: 20px 24px 24px;
}

.devtools-section--live {
  padding-bottom: 20px;
}

/* ─────────────────────────────────────────────────────────────────────
   §3 SECTION LABELS
   ───────────────────────────────────────────────────────────────────── */

.section-label {
  display: block;
  font-family: 'Oswald', var(--font-ui, sans-serif);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}

/* П6: live-panel — steampunk-обрамлення МОНІТОРИНГ-секції.
   Brass border + inset shadow + top decorator label + hex-bolt corners. */
.dev-tools-scope .live-panel {
  width: 100%;
  position: relative;
  border: 1px solid rgba(197, 139, 58, 0.40);
  border-top: 2px solid rgba(197, 139, 58, 0.70);
  border-radius: 2px;
  background:
    linear-gradient(180deg,
      rgba(197, 139, 58, 0.04) 0%,
      transparent 24px
    ),
    var(--bg-surface, rgba(26, 18, 10, 0.72));
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.55),
    inset 0 0 32px rgba(0, 0, 0, 0.30),
    0 0 0 1px rgba(92, 68, 48, 0.30),
    0 2px 12px rgba(0, 0, 0, 0.40);
  padding: 16px 16px 12px;
}

/* Hex-bolt corners на live-panel */
.dev-tools-scope .live-panel::before,
.dev-tools-scope .live-panel::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: radial-gradient(circle at 32% 28%,
    var(--brass-light, #d4a54a) 0%,
    var(--brass-mid, #9a6a28) 45%,
    var(--bg-void, #0d0907) 100%
  );
  border-radius: 1px;
  border: 1px solid rgba(0, 0, 0, 0.70);
}
.dev-tools-scope .live-panel::before { top: 5px;  left: 5px; }
.dev-tools-scope .live-panel::after  { top: 5px; right: 5px; }

/* Top label decorator */
.dev-tools-scope .live-panel-label {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Oswald', var(--font-ui, sans-serif);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-brass, #c58b3a);
  background: var(--bg-elevated, #2a2018);
  padding: 0 10px;
  white-space: nowrap;
}

/* Нижні hex-bolts live-panel */
.dev-tools-scope .live-panel-bolt {
  position: absolute;
  bottom: 5px;
  width: 8px;
  height: 8px;
  background: radial-gradient(circle at 32% 28%,
    var(--brass-light, #d4a54a) 0%,
    var(--brass-mid, #9a6a28) 45%,
    var(--bg-void, #0d0907) 100%
  );
  border-radius: 1px;
  border: 1px solid rgba(0, 0, 0, 0.70);
  pointer-events: none;
}
.dev-tools-scope .live-panel-bolt--bl { left:  5px; }
.dev-tools-scope .live-panel-bolt--br { right: 5px; }

/* ─────────────────────────────────────────────────────────────────────
   §4 LIVE CARDS GRID
   ───────────────────────────────────────────────────────────────────── */

.devtools-live-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

@media (max-width: 1200px) {
  .devtools-live-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .devtools-live-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .devtools-live-grid { grid-template-columns: 1fr; }
}

.devtool-card--live {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-metal);
  border-radius: var(--forge-radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--text-body);
  box-shadow: var(--forge-inset), var(--forge-shadow);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}

.devtool-card--live:hover {
  background: var(--bg-hover);
  border-color: var(--border-bright);
  box-shadow: var(--forge-inset), var(--forge-shadow), 0 0 0 1px rgba(197, 139, 58, 0.15);
  text-decoration: none;
}

.live-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 10px;
  background: linear-gradient(180deg, rgba(197, 139, 58, 0.10) 0%, rgba(197, 139, 58, 0.04) 100%);
  border-bottom: 1px solid var(--border-dim);
}

.live-card-title-row {
  flex: 1;
  min-width: 0;
}

.live-card-title-row .devtool-title {
  display: block;
  font-family: 'Oswald', var(--font-ui, sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-bright);
  margin: 0 0 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-card-body {
  flex: 1;
  padding: 10px 14px;
}

.live-card-body .devtool-desc {
  font-family: var(--font-ui, 'Barlow', sans-serif);
  font-size: 11px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
}

.live-card-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-top: 1px solid var(--border-dim);
}

.devtool-card--live .devtool-arrow {
  font-size: 16px;
  color: var(--text-muted);
  transition: color 0.15s ease, transform 0.15s ease;
  flex-shrink: 0;
}

.devtool-card--live:hover .devtool-arrow {
  color: var(--accent-brass);
  transform: translateX(3px);
}

/* ─────────────────────────────────────────────────────────────────────
   §5 LIVE STATUS DOT
   ───────────────────────────────────────────────────────────────────── */

.live-status-line {
  display: flex;
  align-items: center;
  gap: 5px;
}

.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-ember);
  box-shadow: 0 0 4px rgba(227, 111, 61, 0.55);
  flex-shrink: 0;
  animation: live-ember-pulse 2.5s ease-in-out infinite;
}

.live-status-text {
  font-family: 'IBM Plex Mono', var(--font-dt-status, monospace);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-ember);
}

/* ─────────────────────────────────────────────────────────────────────
   §6 LIVE PANEL SEPARATOR
   ───────────────────────────────────────────────────────────────────── */

.dt-live-separator {
  height: 1px;
  margin: 16px 0 14px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--border-dim) 15%,
    var(--border-metal) 50%,
    var(--border-dim) 85%,
    transparent 100%
  );
}

/* ─────────────────────────────────────────────────────────────────────
   §7 HEALTH HUD
   ───────────────────────────────────────────────────────────────────── */

.devtools-health-hud {
  display: flex;
  gap: 12px;
  padding: 0 4px 4px;
}

.health-hud-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-metal);
  border-radius: var(--forge-radius);
  box-shadow: var(--forge-inset);
  text-decoration: none;
  color: var(--text-body);
  position: relative;
  overflow: hidden;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.health-hud-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.05);
}

.health-hud-item:hover {
  border-color: var(--border-bright);
  background: var(--bg-hover);
  text-decoration: none;
}

.health-hud-num {
  font-family: 'IBM Plex Mono', var(--font-mono, monospace);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  color: var(--text-muted);
  flex-shrink: 0;
  min-width: 36px;
  letter-spacing: -0.02em;
}

.health-hud-item--bugs .health-hud-num   { color: var(--log-critical); }
.health-hud-item--tests .health-hud-num  { color: var(--log-error); }
.health-hud-item--alerts .health-hud-num { color: var(--accent-brass); }

.health-hud-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.health-hud-label {
  font-family: 'Oswald', var(--font-ui, sans-serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-bright);
}

.health-hud-sublabel {
  font-family: var(--font-ui, 'Barlow', sans-serif);
  font-size: 10px;
  color: var(--text-muted);
}

.health-hud-delta {
  font-family: 'IBM Plex Mono', var(--font-mono, monospace);
  font-size: 10px;
  color: var(--text-muted);
  margin-left: auto;
}

/* ─────────────────────────────────────────────────────────────────────
   §8 COMMAND BAR
   ───────────────────────────────────────────────────────────────────── */

.devtools-command-bar {
  background: var(--bg-surface);
  border: 1px solid var(--border-metal);
  border-radius: var(--forge-radius);
  box-shadow: var(--forge-inset), var(--forge-shadow);
  overflow: hidden;
  margin: 0 0 16px;
}

.dt-cmdbar-header {
  background: linear-gradient(180deg, rgba(197, 139, 58, 0.12) 0%, rgba(197, 139, 58, 0.05) 100%) !important;
  border-bottom: 1px solid rgba(197, 139, 58, 0.20) !important;
  padding: 9px 16px !important;
}

.dt-cmdbar-title {
  font-family: 'Oswald', var(--font-ui, sans-serif) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--accent-brass) !important;
}

.dt-cmdbar-content {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dt-cmdbar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.dt-cmdbar-stats {
  margin-left: auto;
  flex-shrink: 0;
}

.dt-cmdbar-stat {
  font-family: 'IBM Plex Mono', var(--font-mono, monospace);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}

/* ─────────────────────────────────────────────────────────────────────
   §9 SEARCH INPUT
   ───────────────────────────────────────────────────────────────────── */

.devtools-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-metal);
  border-radius: var(--forge-radius);
  padding: 6px 10px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.devtools-search-wrap:focus-within {
  border-color: rgba(197, 139, 58, 0.55);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(197, 139, 58, 0.10);
}

.devtools-search-wrap .material-symbols-outlined {
  font-size: 16px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.devtools-inline-search {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text-bright);
  font-family: var(--font-ui, 'Barlow', sans-serif);
  font-size: 12px;
  caret-color: var(--accent-brass);
}

.devtools-inline-search::placeholder {
  color: var(--text-dim);
  font-size: 11px;
}

.dt-search-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-metal);
  border-radius: var(--radius-sm);
  font-family: 'IBM Plex Mono', var(--font-mono, monospace);
  font-size: 9px;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────────
   §10 FILTER BUTTONS
   ───────────────────────────────────────────────────────────────────── */

.devtools-filter-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.dt-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: transparent;
  border: 1px solid var(--border-dim);
  border-radius: var(--forge-radius);
  color: var(--text-muted);
  font-family: 'Oswald', var(--font-ui, sans-serif);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--forge-bevel);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.dt-filter-btn .material-symbols-outlined {
  font-size: 14px;
}

.dt-filter-btn:hover {
  background: rgba(197, 139, 58, 0.08);
  border-color: rgba(197, 139, 58, 0.35);
  color: var(--text-body);
}

.dt-filter-btn--active {
  background: rgba(197, 139, 58, 0.12);
  border-color: rgba(197, 139, 58, 0.45);
  color: var(--accent-brass);
  box-shadow: var(--forge-bevel), 0 0 0 1px rgba(197, 139, 58, 0.08);
}

.dt-filter-btn--active:hover {
  background: rgba(197, 139, 58, 0.18);
  border-color: rgba(197, 139, 58, 0.60);
  color: var(--accent-brass-hover);
}

.dt-filter-btn--problems {
  border-color: rgba(193, 68, 24, 0.30);
  color: var(--text-muted);
}

.dt-filter-btn--problems:hover {
  background: var(--bg-critical);
  border-color: var(--border-critical);
  color: var(--log-error);
}

.dt-filter-btn--problems.dt-filter-btn--active {
  background: var(--bg-critical);
  border-color: var(--border-critical);
  color: var(--log-error);
}

.dt-filter-count {
  font-family: 'IBM Plex Mono', var(--font-mono, monospace);
  font-size: 9px;
  opacity: 0.7;
}

/* ─────────────────────────────────────────────────────────────────────
   §11 HEALTH SUMMARY
   ───────────────────────────────────────────────────────────────────── */

.health-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  margin: 0 0 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-metal);
  border-radius: var(--forge-radius);
  box-shadow: var(--forge-inset);
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.health-summary:hover {
  border-color: var(--border-bright);
}

.hs-icon {
  font-size: 16px;
  color: var(--text-muted);
}

.health-summary--ok .hs-icon       { color: var(--log-ok); }
.health-summary--warn .hs-icon     { color: var(--log-warn); }
.health-summary--critical .hs-icon { color: var(--log-critical); }

.hs-text {
  font-family: var(--font-ui, 'Barlow', sans-serif);
  font-size: 11px;
  color: var(--text-muted);
}

.health-summary--ok .hs-text       { color: var(--log-ok); }
.health-summary--warn .hs-text     { color: var(--log-warn); }
.health-summary--critical .hs-text { color: var(--log-error); }

/* ─────────────────────────────────────────────────────────────────────
   §12 SECTION DIVIDER
   ───────────────────────────────────────────────────────────────────── */

.tools-section-divider {
  height: 1px;
  margin: 16px 0;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--border-dim) 10%,
    var(--border-metal) 50%,
    var(--border-dim) 90%,
    transparent 100%
  );
}

/* ─────────────────────────────────────────────────────────────────────
   §13 TOOLS GROUP
   ───────────────────────────────────────────────────────────────────── */

.tools-group {
  margin-bottom: 4px;
}

.tools-group[hidden] {
  display: none;
}

.tools-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  cursor: pointer;
  user-select: none;
}

.tools-group-toggle {
  font-size: 18px;
  color: var(--text-muted);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.tools-group[data-collapsed] .tools-group-toggle {
  transform: rotate(-90deg);
}

/* Note: канонічне визначення .tools-group-label — у §16a (13px / 0.08em / text-bright). */

.tools-group-icon--monitoring {
  font-size: 15px !important;
  color: var(--log-ok) !important;
  flex-shrink: 0;
}

.tools-group-icon--docs {
  font-size: 15px !important;
  color: var(--accent-brass) !important;
  flex-shrink: 0;
}

.tools-group-icon--dev {
  font-size: 15px !important;
  color: var(--log-warn) !important;
  flex-shrink: 0;
}

.tools-group-open-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 4px;
  background: none;
  border: 1px solid var(--border-dim);
  border-radius: var(--forge-radius);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.tools-group-open-all .material-symbols-outlined {
  font-size: 14px;
}

.tools-group-open-all:hover {
  border-color: var(--border-bright);
  color: var(--accent-brass);
}

/* ─────────────────────────────────────────────────────────────────────
   §14 TOOLS GRID + STANDARD CARDS
   ───────────────────────────────────────────────────────────────────── */

.devtools-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 8px;
  padding-bottom: 4px;
}

@media (max-width: 768px) {
  .devtools-tools-grid { grid-template-columns: 1fr; }
}

.devtool-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 14px 14px 40px;
  background: var(--bg-surface);
  border: 1px solid var(--border-metal);
  border-left: 3px solid var(--border-metal);
  border-radius: var(--forge-radius);
  text-decoration: none;
  color: var(--text-body);
  box-shadow: var(--forge-inset), var(--forge-shadow);
  position: relative;
  overflow: visible;
  min-height: 150px;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
  animation: card-enter 0.2s ease both;
}

.devtool-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.05);
  pointer-events: none;
}

.devtool-card:hover {
  background: var(--bg-hover);
  border-color: var(--border-bright);
  border-left-color: var(--accent-brass);
  box-shadow: var(--forge-inset), var(--forge-shadow), 0 0 0 1px rgba(197, 139, 58, 0.10);
  text-decoration: none;
}

.devtool-card[hidden] {
  display: none;
}

.devtool-info {
  flex: 1;
  min-width: 0;
  margin-top: 4px;
}

.devtool-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: 'Oswald', var(--font-ui, sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-bright);
  margin: 0 0 5px;
}

.devtool-desc {
  font-family: var(--font-ui, 'Barlow', sans-serif);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ─────────────────────────────────────────────────────────────────────
   §15 CARD ICONS
   ───────────────────────────────────────────────────────────────────── */

.devtool-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--forge-radius);
  background: var(--bg-elevated);
  border: 1px solid var(--border-metal);
  box-shadow: var(--forge-inset);
  flex-shrink: 0;
  align-self: flex-start;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.devtool-icon .material-symbols-outlined {
  font-size: 20px;
}

.devtool-card:hover .devtool-icon {
  background: rgba(197, 139, 58, 0.08);
  border-color: rgba(197, 139, 58, 0.30);
  box-shadow: var(--forge-inset), 0 0 8px rgba(197, 139, 58, 0.15);
}

.devtool-icon--cyan        .material-symbols-outlined { color: var(--success); }
.devtool-icon--green       .material-symbols-outlined { color: var(--log-ok); }
.devtool-icon--amber       .material-symbols-outlined { color: var(--accent-brass); }
.devtool-icon--teal        .material-symbols-outlined { color: var(--mod-nexus); }
.devtool-icon--red         .material-symbols-outlined { color: var(--log-critical); }
.devtool-icon--blue        .material-symbols-outlined { color: var(--mod-applicant); }
.devtool-icon--orange      .material-symbols-outlined { color: var(--accent-ember); }
.devtool-icon--gold        .material-symbols-outlined { color: var(--mod-publisher); }
.devtool-icon--purple      .material-symbols-outlined { color: var(--success); }
.devtool-icon--green-light .material-symbols-outlined { color: var(--log-ok); }

/* ─────────────────────────────────────────────────────────────────────
   §16 CARD META / TAGS / ARROW
   ───────────────────────────────────────────────────────────────────── */

.devtool-meta {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  padding-bottom: 4px;
}

.devtool-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-sm);
  font-family: 'IBM Plex Mono', var(--font-mono, monospace);
  font-size: 9px;
  color: var(--text-muted);
  white-space: nowrap;
}

.devtool-tag.tag-all-ok {
  border-color: rgba(107, 142, 78, 0.35);
  color: var(--log-ok);
  background: rgba(107, 142, 78, 0.08);
}

.devtool-tag.tag-fixed {
  border-color: rgba(107, 142, 78, 0.35);
  color: var(--log-ok);
  background: rgba(107, 142, 78, 0.08);
}

.devtool-tag.tag-info {
  border-color: rgba(124, 143, 136, 0.30);
  color: var(--log-info);
  background: rgba(124, 143, 136, 0.07);
}

.devtool-tag--skeleton {
  color: var(--text-dim);
  letter-spacing: 0.10em;
}

.devtool-arrow {
  position: absolute;
  bottom: 12px;
  right: 14px;
  font-size: 16px;
  color: var(--text-dim);
  flex-shrink: 0;
  transition: color 0.15s ease, transform 0.15s ease;
}

.devtool-card:hover .devtool-arrow {
  color: var(--accent-brass);
  transform: translateX(3px);
}

/* ═════════════════════════════════════════════════════════════════════
   §16a CANON ALIGNMENT — Hub під стиль alerts/mysql/test-runner
   ───────────────────────────────────────────────────────────────────── */

/* ── Module panel: подвійна металева рамка (з alerts-style-adc.css) ── */
.dev-tools-scope.al-page .al-module-panel {
  position: relative;
  max-width: var(--max-width, 1400px);
  margin: 0 auto 16px;
  padding: 16px 22px 18px;
  background: var(--bg-base) !important;
  border: 2px solid var(--border-metal);
  border-radius: 4px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.85),
    0 0 0 3px 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),
    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);
}

/* ── Рівет-кулі на 4 кутах module panel ── */
.dev-tools-scope.al-page .al-module-rivet {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  z-index: 3;
  background: radial-gradient(circle at 32% 28%,
    var(--pewter-highlight, #b8b1a4) 0%,
    var(--pewter-light, #8a8074) 22%,
    var(--pewter-mid, #5c5046) 55%,
    var(--pewter-dark, #2e2820) 85%,
    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);
}
.dev-tools-scope.al-page .al-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%;
}
.dev-tools-scope.al-page .al-module-rivet--tl { top: 8px; left: 8px; }
.dev-tools-scope.al-page .al-module-rivet--tr { top: 8px; right: 8px; }
.dev-tools-scope.al-page .al-module-rivet--bl { bottom: 8px; left: 8px; }
.dev-tools-scope.al-page .al-module-rivet--br { bottom: 8px; right: 8px; }

/* ── Декоративна міні-шестерня по центру верхньої рамки ── */
.dev-tools-scope.al-page .al-module-gear {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  background: var(--bg-base);
  padding: 0 6px;
  line-height: 0;
  color: var(--border-bright);
}
.dev-tools-scope.al-page .al-module-gear svg { display: block; }

/* ── Tools-group у module panel: прибрати власні margin ── */
.al-module-panel > .tools-group { margin-bottom: 0; }
.al-module-panel > .tools-group-header { padding: 0 0 12px; }

/* ── Tools-group-header: канонічний стиль (Oswald 13/600/0.08em + counter) ── */
.tools-group-header {
  position: relative;
  padding: 10px 0 12px;
  margin: 0 0 4px;
  border-bottom: 1px solid var(--border-dim);
}
.tools-group-header::before,
.tools-group-header::after {
  content: '';
  position: absolute;
  bottom: -3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-brass);
  opacity: .6;
  box-shadow: 0 0 4px rgba(197, 139, 58, .5);
}
.tools-group-header::before { left: 0; }
.tools-group-header::after  { right: 0; }
.tools-group-label {
  font-family: 'Oswald', var(--font-ui, sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-bright);
}

/* ── Posilennya akcentu na devtool-card: 5px border-left + per-tool mapping ── */
.devtool-card {
  border-left-width: 5px;
}
.devtool-card[data-tool-id="api-health"]        { border-left-color: var(--success); }
.devtool-card[data-tool-id="monitor"]           { border-left-color: var(--mod-observer); }
.devtool-card[data-tool-id="module-manager"]    { border-left-color: var(--mod-publisher); }
.devtool-card[data-tool-id="alerts"]            { border-left-color: var(--accent-ember); }
.devtool-card[data-tool-id="eventbus-monitor"]  { border-left-color: var(--mod-nexus); }
.devtool-card[data-tool-id="emoji-ref"]         { border-left-color: var(--accent-brass); }
.devtool-card[data-tool-id="log-registry"]      { border-left-color: var(--mod-applicant); }
.devtool-card[data-tool-id="project-map"]       { border-left-color: var(--mod-applicant); }
.devtool-card[data-tool-id="changelog"]         { border-left-color: var(--mod-publisher); }
.devtool-card[data-tool-id="agent-journal"]     { border-left-color: var(--mod-observer); }
.devtool-card[data-tool-id="debug-audit"]       { border-left-color: var(--mod-executor); }
.devtool-card[data-tool-id="test-runner"]       { border-left-color: var(--mod-observer); }
.devtool-card[data-tool-id="testing-center"]    { border-left-color: var(--accent-ember); }
.devtool-card[data-tool-id="profile-inspector"] { border-left-color: var(--mod-nexus); }
.devtool-card[data-tool-id="paymaster-tools"]   { border-left-color: var(--mod-publisher); }
.devtool-card[data-tool-id="mysql-migration"]   { border-left-color: #c86a1c; }
.devtool-card[data-tool-id="claude-code"]       { border-left-color: var(--mod-applicant); }

/* hover — посилений border-left + glow */
.devtool-card[data-tool-id]:hover {
  border-left-width: 5px;
}

/* ═════════════════════════════════════════════════════════════════════
   §16a-TC TOOL CARDS — макет "Dev Tools Hub.html"
   Картки інструментів зі steampunk-сенсорною панеллю.
   ═════════════════════════════════════════════════════════════════════ */

.tc {
  --ac: var(--accent-brass);
  --ac-rgb: 197, 139, 58;
  position: relative;
  z-index: 1;
  background: var(--bg-surface);
  border: 1px solid var(--border-metal);
  border-radius: var(--forge-radius);
  overflow: visible;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--text-body);
  transition: border-color .2s, box-shadow .2s, transform .2s, z-index 0s .2s;
  box-shadow:
    inset 0 1px 0 rgba(232, 219, 178, .07),
    inset 0 -1px 0 rgba(0, 0, 0, .5),
    0 3px 10px rgba(0, 0, 0, .55);
  min-height: 150px;
}

.tc-inner {
  border-radius: var(--forge-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
}

.tc-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: repeating-linear-gradient(0deg,
    transparent, transparent 3px,
    rgba(0, 0, 0, .035) 3px, rgba(0, 0, 0, .035) 4px);
}

.tc:hover {
  border-color: var(--border-bright);
  box-shadow:
    inset 0 1px 0 rgba(232, 219, 178, .12),
    0 0 0 1px rgba(var(--ac-rgb), .2),
    0 8px 24px rgba(0, 0, 0, .65),
    0 0 18px rgba(var(--ac-rgb), .07);
  transform: translateY(-3px);
  z-index: 10;
  transition: border-color .2s, box-shadow .2s, transform .2s, z-index 0s 0s;
  text-decoration: none;
}

/* ── Keyboard focus ring (a11y) ──────────────────────────────── */
.tc:focus-visible,
.devtool-card:focus-visible {
  outline: 2px solid var(--accent-brass);
  outline-offset: 2px;
  border-color: var(--border-bright);
  box-shadow:
    inset 0 1px 0 rgba(232, 219, 178, .12),
    0 0 0 1px rgba(var(--ac-rgb, 197, 139, 58), .35),
    0 0 24px rgba(var(--ac-rgb, 197, 139, 58), .25);
}

/* ── SVG corner brackets ─────────────────────────────────────── */
.tc-corner {
  position: absolute;
  width: 16px;
  height: 16px;
  pointer-events: none;
  z-index: 20;
  opacity: .65;
  transition: opacity .2s;
  color: var(--ac);
}
.tc-corner svg { width: 100%; height: 100%; display: block; }
.tc:hover .tc-corner { opacity: 1; }

.tc-corner--tl { top: -1px; left: -1px; }
.tc-corner--tr { top: -1px; right: -1px; transform: scaleX(-1); }
.tc-corner--bl { bottom: -1px; left: -1px; transform: scaleY(-1); }
.tc-corner--br { bottom: -1px; right: -1px; transform: scale(-1, -1); }

/* ── Pin/Note/Task badges ────────────────────────────────────── */
.tc-badges {
  position: absolute;
  top: 6px;
  left: 20px;
  display: flex;
  gap: 4px;
  z-index: 15;
  pointer-events: none;
}
.tc-badge {
  font-family: 'Material Symbols Outlined';
  font-size: 10px;
  line-height: 1;
  color: var(--accent-brass);
  opacity: .85;
}
.tc-badge.pin   { display: none; }
.tc-badge.note  { display: none; }
.tc-badge.task  { display: none; }
.tc.pinned .tc-badge.pin   { display: block; }
.tc.noted  .tc-badge.note  { display: block; }
.tc.tasked .tc-badge.task  { display: block; color: var(--mod-publisher); }
.devtool-card--pinned.tc .tc-badge.pin   { display: block; }
.devtool-card--noted.tc  .tc-badge.note  { display: block; }
.devtool-card--tasked.tc .tc-badge.task  { display: block; color: var(--mod-publisher); }

/* ── Accent left stripe ──────────────────────────────────────── */
.tc-stripe {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  z-index: 5;
  background: linear-gradient(180deg,
    var(--ac) 0%,
    color-mix(in srgb, var(--ac) 20%, transparent) 70%,
    transparent 100%);
  opacity: .65;
  transition: opacity .2s;
  border-radius: 2px 0 0 2px;
}
.tc:hover .tc-stripe { opacity: 1; }

/* ── Category watermark ──────────────────────────────────────── */
.tc-bg-mark {
  position: absolute;
  top: 22px;
  right: 6px;
  pointer-events: none;
  z-index: 0;
  opacity: .055;
  transition: opacity .2s;
  color: var(--ac);
}
.tc:hover .tc-bg-mark { opacity: .10; }

/* ── Top section (gauge panel + identity) ────────────────────── */
.tc-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--border-dim);
  min-height: 88px;
}

.tc-gz {
  width: 90px;
  flex-shrink: 0;
  background:
    linear-gradient(180deg, var(--bg-surface) 0%, var(--border-metal) 30%, var(--pewter-light, #8a8074) 50%, var(--border-metal) 70%, var(--bg-surface) 100%) top/100% 5px no-repeat,
    linear-gradient(180deg, var(--bg-surface) 0%, var(--border-metal) 30%, var(--pewter-light, #8a8074) 50%, var(--border-metal) 70%, var(--bg-surface) 100%) bottom/100% 5px no-repeat,
    var(--bg-void);
  border-right: 1px solid var(--border-dim);
  box-shadow:
    inset 2px 0 0 rgba(0, 0, 0, .4),
    inset -1px 0 0 rgba(255, 255, 255, .03);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 8px 10px;
  gap: 8px;
  position: relative;
  overflow: hidden;
}
.tc-gz::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid var(--border-dim);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5);
  pointer-events: none;
  z-index: 0;
}

.tc-slabel {
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ac);
  line-height: 1;
  position: relative;
  z-index: 1;
}

.tc-tool-icon-ms {
  font-family: 'Material Symbols Outlined';
  font-size: 44px;
  line-height: 1;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ac);
  opacity: .6;
  transition: opacity .2s, filter .2s;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(var(--ac-rgb), .25));
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48;
  position: relative;
  z-index: 1;
}
.tc:hover .tc-tool-icon-ms {
  opacity: 1;
  filter: drop-shadow(0 0 10px rgba(var(--ac-rgb), .55));
}

.tc-id {
  flex: 1;
  min-width: 0;
  padding: 8px 24px 10px 14px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 5px;
  position: relative;
}

.tc-name {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-bright);
  line-height: 1.2;
  background: var(--bg-void);
  border: 1px solid var(--border-dim);
  border-top: 1px solid var(--border-metal);
  box-shadow: inset 0 1px 0 rgba(232, 219, 178, .05), 0 1px 4px rgba(0, 0, 0, .4);
  padding: 3px 10px;
  text-align: center;
  display: block;
  min-width: 0;
  max-width: 200px;
  align-self: center;
  margin: 0;
}

.tc-desc {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--text-muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

/* ── Hero metrics (3-cell row) ───────────────────────────────── */
.tc-hero {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--border-dim);
}
.tc-hc {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 8px 8px;
  gap: 3px;
  border-right: 1px solid var(--border-dim);
  position: relative;
}
.tc-hc:last-child { border-right: none; }
.tc-hc::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(var(--ac-rgb), .04) 0%, transparent 100%);
  opacity: 0;
  transition: opacity .2s;
}
.tc:hover .tc-hc::before { opacity: 1; }

.tc-num {
  font-family: var(--font-mono);
  font-size: 21px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ac);
  text-shadow: 0 0 8px rgba(var(--ac-rgb), .35), 0 0 20px rgba(var(--ac-rgb), .12);
  transition: text-shadow .2s;
  letter-spacing: -.02em;
}
.tc:hover .tc-num {
  text-shadow: 0 0 10px rgba(var(--ac-rgb), .55), 0 0 26px rgba(var(--ac-rgb), .22);
}
.tc-num.v-ok     { color: var(--success); }
.tc-num.v-warn   { color: var(--warning); }
.tc-num.v-danger { color: var(--danger-text); }
.tc-num.v-muted  { font-size: 12px; color: var(--text-muted); text-shadow: none; }

.tc-nlabel {
  font-family: var(--font-ui);
  font-size: 7px;
  color: var(--text-disabled);
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1;
}

/* ── Progress bar ────────────────────────────────────────────── */
.tc-bar {
  height: 2px;
  background: var(--bg-void);
  position: relative;
  overflow: hidden;
  z-index: 2;
}
.tc-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--ac);
  box-shadow: 0 0 5px rgba(var(--ac-rgb), .45);
  transition: width .9s cubic-bezier(.4, 0, .2, 1);
}

/* ── Footer ──────────────────────────────────────────────────── */
.tc-foot {
  position: relative;
  z-index: 2;
  padding: 6px 12px 7px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-top: 1px solid var(--border-dim);
  background: rgba(0, 0, 0, .22);
  margin-top: auto;
}
.tc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  flex: 1;
}
.tc-tag {
  font-family: var(--font-mono);
  font-size: 7.5px;
  letter-spacing: .04em;
  padding: 2px 5px;
  border-radius: 2px;
  border: 1px solid var(--border-dim);
  background: var(--bg-void);
  color: var(--text-muted);
  line-height: 14px;
  white-space: nowrap;
}
.tc-tag.ac  { border-color: rgba(var(--ac-rgb), .35); color: var(--ac);            background: rgba(var(--ac-rgb), .07); }
.tc-tag.ok  { border-color: rgba(86, 163, 166, .3);   color: var(--success);       background: rgba(86, 163, 166, .07); }
.tc-tag.wn  { border-color: rgba(224, 196, 137, .3);  color: var(--warning);       background: rgba(224, 196, 137, .07); }
.tc-tag.er  { border-color: rgba(227, 111, 61, .3);   color: var(--danger-text);   background: rgba(163, 71, 27, .1); }
.tc-tag.obs { border-color: rgba(122, 158, 90, .3);   color: var(--mod-observer);  background: rgba(122, 158, 90, .07); }
.tc-tag.pub { border-color: rgba(212, 162, 74, .3);   color: var(--mod-publisher); background: rgba(212, 162, 74, .07); }
.tc-tag.exc { border-color: rgba(184, 84, 52, .3);    color: var(--mod-executor);  background: rgba(184, 84, 52, .08); }
.tc-tag.nex { border-color: rgba(74, 149, 144, .3);   color: var(--mod-nexus);     background: rgba(74, 149, 144, .07); }
.tc-tag.apl { border-color: rgba(90, 130, 153, .3);   color: var(--mod-applicant); background: rgba(90, 130, 153, .07); }

/* ── Animated steam (hover only) ─────────────────────────────── */
.tc-steam {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 20;
  display: flex;
  gap: 4px;
  align-items: flex-end;
  opacity: 0;
  transition: opacity .1s;
}
.tc:hover .tc-steam { opacity: 1; }
.tc-steam .sp {
  width: 5px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: rgba(255, 255, 255, .05);
  animation: tc-sp-rise 1.8s ease-in-out infinite;
}
.tc-steam .sp:nth-child(2) { animation-delay: .5s; }
.tc-steam .sp:nth-child(3) { animation-delay: 1s; }
@keyframes tc-sp-rise {
  0%   { height: 0;     opacity: 0;  transform: translateY(0) scaleX(1); }
  35%  { opacity: .8; }
  100% { height: 18px;  opacity: 0;  transform: translateY(-16px) scaleX(2); }
}

/* ── Accent mapping per data-tool-id ─────────────────────────── */
.tc[data-tool-id="api-health"]        { --ac: var(--success);       --ac-rgb: 86, 163, 166; }
.tc[data-tool-id="monitor"]           { --ac: var(--mod-observer);  --ac-rgb: 122, 158, 90; }
.tc[data-tool-id="module-manager"]    { --ac: var(--mod-publisher); --ac-rgb: 212, 162, 74; }
.tc[data-tool-id="alerts"]            { --ac: var(--accent-ember);  --ac-rgb: 227, 111, 61; }
.tc[data-tool-id="eventbus-monitor"]  { --ac: var(--mod-nexus);     --ac-rgb: 74, 149, 144; }
.tc[data-tool-id="emoji-ref"]         { --ac: var(--accent-brass);  --ac-rgb: 197, 139, 58; }
.tc[data-tool-id="log-registry"]      { --ac: var(--mod-applicant); --ac-rgb: 90, 130, 153; }
.tc[data-tool-id="project-map"]       { --ac: var(--mod-applicant); --ac-rgb: 90, 130, 153; }
.tc[data-tool-id="changelog"]         { --ac: var(--mod-publisher); --ac-rgb: 212, 162, 74; }
.tc[data-tool-id="agent-journal"]     { --ac: var(--mod-observer);  --ac-rgb: 122, 158, 90; }
.tc[data-tool-id="debug-audit"]       { --ac: var(--mod-executor);  --ac-rgb: 184, 84, 52; }
.tc[data-tool-id="test-runner"]       { --ac: var(--mod-observer);  --ac-rgb: 122, 158, 90; }
.tc[data-tool-id="testing-center"]    { --ac: var(--accent-ember);  --ac-rgb: 227, 111, 61; }
.tc[data-tool-id="profile-inspector"] { --ac: var(--mod-nexus);     --ac-rgb: 74, 149, 144; }
.tc[data-tool-id="paymaster-tools"]   { --ac: var(--mod-publisher); --ac-rgb: 212, 162, 74; }
.tc[data-tool-id="mysql-migration"]   { --ac: var(--accent-ember);  --ac-rgb: 227, 111, 61; }
.tc[data-tool-id="claude-code"]       { --ac: var(--mod-applicant); --ac-rgb: 90, 130, 153; }

/* Full-width variant (debug audit) */
.tc.tc--bento-wide { grid-column: 1 / -1; }
.tc.tc--bento-wide .tc-gz { width: 110px; }
.tc.tc--bento-wide .tc-tool-icon-ms { font-size: 56px; width: 68px; height: 68px; }

/* ─────────────────────────────────────────────────────────────────────
   §16b CARD CONTEXT MENU BUTTON
   ───────────────────────────────────────────────────────────────────── */

.cm-hint-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  z-index: 2;
}

.devtool-card:hover .cm-hint-btn {
  opacity: 1;
}

.cm-hint-btn:hover {
  background: var(--bg-elevated);
  border-color: var(--border-metal);
  color: var(--text-bright);
}

.cm-hint-btn:active {
  background: var(--bg-hover);
}

.cm-hint-btn .material-symbols-outlined {
  font-size: 15px;
  line-height: 1;
}

/* ─────────────────────────────────────────────────────────────────────
   §16c CONTEXT MENU (right-click / кнопка ⋮)
   ───────────────────────────────────────────────────────────────────── */

.context-menu {
  display: none;
  position: fixed;
  z-index: 99999;
  background: var(--bg-elevated);
  border: 1px solid var(--border-metal);
  border-radius: var(--forge-radius);
  box-shadow: var(--forge-shadow), 0 8px 28px rgba(0, 0, 0, 0.50);
  min-width: 192px;
  padding: 4px 0;
  user-select: none;
  animation: cm-drop 0.12s ease both;
}

@keyframes cm-drop {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.context-menu.cm-visible {
  display: block;
}

.cm-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  font-size: 11px;
  font-family: var(--font-ui, 'Barlow', sans-serif);
  color: var(--text-body);
  cursor: pointer;
  transition: background 0.1s ease, color 0.1s ease;
  white-space: nowrap;
}

.cm-item:hover {
  background: var(--bg-hover);
  color: var(--text-bright);
}

.cm-item .material-symbols-outlined {
  font-size: 15px;
  color: var(--text-dim);
  flex-shrink: 0;
  transition: color 0.1s ease;
}

.cm-item:hover .material-symbols-outlined {
  color: var(--accent-brass);
}

.cm-item--sep {
  height: 1px;
  background: var(--border-dim);
  margin: 3px 0;
  padding: 0;
  cursor: default;
  pointer-events: none;
}

.cm-item--has-sub {
  flex-wrap: wrap;
  gap: 6px 8px;
}

.cm-color-row {
  display: flex;
  gap: 5px;
  margin-left: auto;
  align-items: center;
}

.cm-color-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  flex-shrink: 0;
}

.cm-color-dot:hover {
  transform: scale(1.4);
  box-shadow: 0 0 4px currentColor;
}

.cm-subtask-row {
  display: flex;
  gap: 4px;
  margin-left: auto;
  align-items: center;
  flex-wrap: wrap;
}

.cm-subtask-btn {
  font-size: 10px;
  font-family: var(--font-ui, 'Barlow', sans-serif);
  padding: 2px 7px;
  background: var(--bg-surface);
  border: 1px solid var(--border-dim);
  border-radius: 3px;
  cursor: pointer;
  color: var(--text-body);
  transition: background 0.1s ease, border-color 0.1s ease, color 0.1s ease;
  white-space: nowrap;
}

.cm-subtask-btn:hover {
  background: var(--bg-hover);
  color: var(--text-bright);
  border-color: var(--border-metal);
}

/* ─────────────────────────────────────────────────────────────────────
   §17 DEBUG CARD WIDE
   ───────────────────────────────────────────────────────────────────── */

.devtool-card--bento-wide {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px 18px;
}

.devtool-card--debug {
  border-left-color: rgba(193, 68, 24, 0.50);
}

.devtool-card--debug:hover {
  border-left-color: var(--log-critical);
}

.debug-preview-stats {
  flex: 1;
  min-width: 280px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.debug-preview-summary {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.debug-preview-big {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.debug-num {
  font-family: 'IBM Plex Mono', var(--font-mono, monospace);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
}

.debug-num--open  { color: var(--log-critical); }
.debug-num--fixed { color: var(--log-ok); }

.debug-lbl {
  font-family: 'Oswald', var(--font-ui, sans-serif);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.debug-preview-grid {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 4px;
  align-content: start;
}

.debug-mini-card {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-dim);
  border-radius: var(--forge-radius);
  font-family: 'IBM Plex Mono', var(--font-mono, monospace);
  font-size: 9px;
}

.debug-mini-card[data-module="cc"]  { border-left: 2px solid var(--mod-devtools); }
.debug-mini-card[data-module="obs"] { border-left: 2px solid var(--mod-observer); }
.debug-mini-card[data-module="pub"] { border-left: 2px solid var(--mod-publisher); }
.debug-mini-card[data-module="exc"] { border-left: 2px solid var(--mod-executor); }
.debug-mini-card[data-module="apl"] { border-left: 2px solid var(--mod-applicant); }
.debug-mini-card[data-module="nex"] { border-left: 2px solid var(--mod-nexus); }
.debug-mini-card[data-module="chl"] { border-left: 2px solid var(--mod-challenger); }
.debug-mini-card[data-module="pay"] { border-left: 2px solid var(--mod-paymaster); }

.debug-mc-name  { color: var(--text-muted); }
.debug-mc-open  { color: var(--log-critical); }
.debug-mc-sep   { color: var(--text-dim); }
.debug-mc-fixed { color: var(--log-ok); }

.debug-progress-wrap {
  width: 100%;
  height: 3px;
  background: var(--bg-elevated);
  border-radius: 1px;
  overflow: hidden;
  margin-top: 8px;
  grid-column: 1 / -1;
}

.debug-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--log-critical), var(--accent-ember));
  border-radius: 1px;
  transition: width 0.6s ease;
}

/* ─────────────────────────────────────────────────────────────────────
   §18 PROFILE QUICK SEARCH
   ───────────────────────────────────────────────────────────────────── */

.profile-quick-search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid var(--border-dim);
  border-radius: var(--forge-radius);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45);
  margin-top: 6px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}

.profile-quick-search:focus-within {
  border-color: rgba(197, 139, 58, 0.45);
}

.pqs-icon {
  font-size: 13px !important;
  color: var(--text-muted);
  flex-shrink: 0;
}

.profile-quick-search input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text-bright);
  font-family: 'IBM Plex Mono', var(--font-mono, monospace);
  font-size: 10px;
  min-width: 0;
}

.profile-quick-search input::placeholder {
  color: var(--text-dim);
}

.pqs-go {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: rgba(197, 139, 58, 0.10);
  border: 1px solid rgba(197, 139, 58, 0.30);
  border-radius: var(--forge-radius);
  color: var(--accent-brass);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease;
}

.pqs-go .material-symbols-outlined {
  font-size: 13px;
}

.pqs-go:hover {
  background: rgba(197, 139, 58, 0.22);
}

/* ─────────────────────────────────────────────────────────────────────
   §19 KEYBOARD OVERLAY
   ───────────────────────────────────────────────────────────────────── */

.kb-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 3, 2, 0.85);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kb-overlay[hidden] {
  display: none;
}

.kb-modal {
  background: linear-gradient(160deg, var(--bg-elevated) 0%, var(--bg-surface) 55%, var(--bg-void) 100%);
  border: 1px solid var(--border-metal);
  border-radius: var(--forge-radius);
  min-width: 340px;
  max-width: 440px;
  box-shadow:
    0 0 0 1px var(--border-dim),
    inset 0 1px 0 rgba(232, 219, 178, 0.07),
    0 20px 60px rgba(0, 0, 0, 0.85);
  overflow: hidden;
}

.kb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  background: linear-gradient(180deg, rgba(197, 139, 58, 0.12) 0%, rgba(197, 139, 58, 0.05) 100%);
  border-bottom: 1px solid rgba(197, 139, 58, 0.20);
}

.kb-title {
  font-family: 'Oswald', var(--font-ui, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-brass);
}

.kb-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: none;
  border: 1px solid var(--border-dim);
  border-radius: var(--forge-radius);
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.kb-close:hover {
  border-color: var(--border-bright);
  color: var(--text-bright);
}

.kb-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kb-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kb-section-label {
  font-family: 'Oswald', var(--font-ui, sans-serif);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border-dim);
}

.kb-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.kb-row span {
  font-family: var(--font-ui, 'Barlow', sans-serif);
  font-size: 11px;
  color: var(--text-body);
}

.kb-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding: 3px 7px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-metal);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  font-family: 'IBM Plex Mono', var(--font-mono, monospace);
  font-size: 10px;
  color: var(--text-bright);
  box-shadow: var(--forge-bevel);
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────────
   §20 COMMAND PALETTE
   ───────────────────────────────────────────────────────────────────── */

.command-palette {
  position: fixed;
  inset: 0;
  background: rgba(5, 3, 2, 0.80);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 120px;
}

.command-palette[hidden] {
  display: none;
}

.cp-modal {
  width: 100%;
  max-width: 560px;
  background: linear-gradient(160deg, var(--bg-elevated) 0%, var(--bg-surface) 60%, var(--bg-void) 100%);
  border: 1px solid var(--border-metal);
  border-radius: var(--forge-radius);
  box-shadow:
    0 0 0 1px var(--border-dim),
    inset 0 1px 0 rgba(232, 219, 178, 0.07),
    0 24px 80px rgba(0, 0, 0, 0.90);
  overflow: hidden;
}

.cp-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 18px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-metal);
  outline: none;
  color: var(--text-bright);
  font-family: var(--font-ui, 'Barlow', sans-serif);
  font-size: 14px;
  caret-color: var(--accent-brass);
}

.cp-input::placeholder {
  color: var(--text-dim);
}

.cp-suggestions {
  max-height: 360px;
  overflow-y: auto;
  padding: 8px 0;
}

.cp-suggestions:empty {
  display: none;
}

.cp-suggestions::-webkit-scrollbar { width: 4px; }
.cp-suggestions::-webkit-scrollbar-track { background: var(--bg-surface); }
.cp-suggestions::-webkit-scrollbar-thumb { background: var(--border-metal); border-radius: 2px; }

/* ─────────────────────────────────────────────────────────────────────
   §21 ANIMATIONS
   ───────────────────────────────────────────────────────────────────── */

@keyframes live-ember-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}

@keyframes card-enter {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

/* Blueprint drift — тонке зміщення сітки, атмосферний ambient */
@keyframes dt-blueprint-drift {
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 32px 32px, 32px 32px; }
}

/* Stamp appear — для статусних маркерів і декоративних плашок */
@keyframes dt-stamp-appear {
  from { opacity: 0; transform: scale(1.15) rotate(-1deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* ─────────────────────────────────────────────────────────────────────
   §23 MODULE PANEL HEADER ROW
   ───────────────────────────────────────────────────────────────────── */

.al-mc-row--header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px 8px 14px;
  background: linear-gradient(180deg, rgba(197,139,58,0.10) 0%, rgba(197,139,58,0.04) 100%);
  border-bottom: 1px solid rgba(197,139,58,0.20);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3);
  position: relative;
}

.al-mc-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.al-mc-title-icon {
  font-size: 16px;
  color: var(--accent-brass);
}

.al-mc-title-text {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent-brass);
}

.al-module-plate {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 2px 6px;
  border: 1px solid var(--border-dim);
  border-radius: var(--forge-radius);
  background: var(--bg-void);
}

/* ═══════════════════════════════════════════════════════
   STEAMPUNK HUB AUDIT v1.0 — 2026-04-19
   forge-level card treatment, section valves
   ═══════════════════════════════════════════════════════ */

/* Body class fix: al-page ДОДАНО до body — вмикає blueprint grid,
   vignette overlay, valve styles (dt-panels.css) */
.dev-tools-scope.dt-page.al-page { /* inherited from al-page — ok */ }

/* ── Tool card: forge-level depth ───────────────────── */
.dev-tools-scope .devtool-card {
  position: relative;
  overflow: visible;
}
.dev-tools-scope .devtool-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  pointer-events: none;
}
.dev-tools-scope .devtool-card::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow:
    inset 0 1px 0 rgba(232,204,128,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.35);
  pointer-events: none;
  border-radius: inherit;
}

/* ── Card corner rivets ─────────────────────────────── */
.dev-tools-scope .devtool-rivet {
  position: absolute;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%,
    #a8998a 0%, #7a6a5a 22%, #5a5048 55%, #3a322a 85%, #0d0907 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);
  pointer-events: none;
  z-index: 3;
}
.dev-tools-scope .devtool-rivet--tl { top: 6px; left: 6px; }
.dev-tools-scope .devtool-rivet--tr { top: 6px; right: 6px; }
.dev-tools-scope .devtool-rivet--bl { bottom: 6px; left: 6px; }
.dev-tools-scope .devtool-rivet--br { bottom: 6px; right: 6px; }

/* ── Section divider with valve ─────────────────────── */
.dev-tools-scope .tools-section-divider {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 8px 0;
  padding: 0 16px;
  min-height: 40px;
}
.dev-tools-scope .tools-sd-pipe {
  flex: 1;
  height: 6px;
  background: linear-gradient(180deg,
    rgba(92,68,48,0.15) 0%,
    rgba(58,46,34,0.25) 50%,
    rgba(92,68,48,0.12) 100%);
  border-top: 1px solid rgba(92,68,48,0.35);
  border-bottom: 1px solid rgba(0,0,0,0.4);
  position: relative;
}
.dev-tools-scope .tools-sd-pipe::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(232,204,128,0.08);
}
.dev-tools-scope .tools-sd-center {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
}
.dev-tools-scope .tools-sd-rivet {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%,
    #a8998a 0%, #5a5048 55%, #0d0907 100%);
  border: 1px solid rgba(0,0,0,0.6);
  box-shadow:
    inset 0 0.5px 1px rgba(255,255,255,0.2),
    0 1px 2px rgba(0,0,0,0.6);
  flex-shrink: 0;
}

/* ── Section divider valve wrapper ──────────────────────── */
.dev-tools-scope .tools-sd-valve {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  position: relative;
  z-index: 5;
}

/* ── Group header: steel forge treatment ────────────── */
.dev-tools-scope .tools-group-header {
  position: relative;
}
.dev-tools-scope .tools-group-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(255,255,255,0.05);
  pointer-events: none;
}
.dev-tools-scope .tools-group-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(0,0,0,0.4);
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────
   §24 TOPBAR VITALS — system status strip in header row-top
   ───────────────────────────────────────────────────────────────────── */

/* П3: topbar-vitals прибрані з балки — інформація дублюється у live-картках.
   Залишаємо HTML структуру для JS-сумісності, але ховаємо візуально. */
.dev-tools-scope .topbar-vitals {
  display: none !important;
}

.dev-tools-scope .status-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  cursor: default;
  position: relative;
  border-radius: var(--forge-radius);
  transition: background 0.15s ease;
}

.dev-tools-scope .status-item:hover {
  background: var(--bg-hover);
}

.dev-tools-scope .status-item:hover .status-detail {
  display: flex !important;
}

.dev-tools-scope .dt-lamp {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: radial-gradient(circle at 35% 30%, #525252, #2a2a2a);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.8);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

/* Лампа — стани через JS class */
.dev-tools-scope .dt-lamp.ok {
  background: radial-gradient(circle at 35% 30%, var(--log-ok), #3a5c2a);
  box-shadow: 0 0 4px rgba(107,142,78,0.55), inset 0 1px 2px rgba(0,0,0,0.4);
  animation: status-forge-ok 3s ease-in-out infinite;
}
.dev-tools-scope .dt-lamp.warn {
  background: radial-gradient(circle at 35% 30%, var(--log-warn), #8a6a28);
  box-shadow: 0 0 4px rgba(224,196,137,0.50), inset 0 1px 2px rgba(0,0,0,0.4);
}
.dev-tools-scope .dt-lamp.error {
  background: radial-gradient(circle at 35% 30%, var(--log-critical), #7a2a10);
  box-shadow: 0 0 5px rgba(193,68,24,0.60), inset 0 1px 2px rgba(0,0,0,0.4);
  animation: forge-pulse 2s ease-in-out infinite;
}
.dev-tools-scope .dt-lamp.loading {
  background: radial-gradient(circle at 35% 30%, var(--text-muted), #3a2e22);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.6);
  opacity: 0.6;
}

.dev-tools-scope .status-label {
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.dev-tools-scope .status-val {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-body);
  letter-spacing: 0.04em;
}

.dev-tools-scope .topbar-sep {
  width: 1px;
  height: 16px;
  background: var(--border-dim);
  flex-shrink: 0;
  margin: 0 2px;
}

.dev-tools-scope .status-detail {
  display: none;
  flex-direction: column;
  gap: 2px;
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-elevated);
  border: 1px solid var(--border-metal);
  border-radius: var(--forge-radius);
  padding: 6px 10px;
  box-shadow: var(--forge-shadow);
  white-space: nowrap;
  z-index: 200;
}

.dev-tools-scope .sd-row {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* П2: health badge прихований через CSS — JS може встановлювати display:''
   але CSS з вищою specificity !important перевизначає. */
.dev-tools-scope .devtools-health-badge {
  display: none !important;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
  padding: 2px 6px;
  border: 1px solid var(--border-dim);
  border-radius: var(--forge-radius);
  background: var(--bg-void);
  margin-right: 8px;
}

/* ─────────────────────────────────────────────────────────────────────
   §25 GEAR ROTATIONS — crest & bg-scene animated gears
   ───────────────────────────────────────────────────────────────────── */

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

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

@keyframes forge-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}

body.dev-tools-scope.al-page .al-sv-rot--ccw-16 {
  animation: al-v5-rot-ccw 16s linear infinite !important;
  transform-origin: center;
  transform-box: fill-box;
}
body.dev-tools-scope.al-page .al-sv-rot--cw-16 {
  animation: al-v5-rot-cw 16s linear infinite !important;
  transform-origin: center;
  transform-box: fill-box;
}
body.dev-tools-scope.al-page .al-sv-rot--cw-20 {
  animation: al-v5-rot-cw 20s linear infinite !important;
  transform-origin: center;
  transform-box: fill-box;
}
body.dev-tools-scope.al-page .al-sv-rot--ccw-20 {
  animation: al-v5-rot-ccw 20s linear infinite !important;
  transform-origin: center;
  transform-box: fill-box;
}
body.dev-tools-scope.al-page .al-sv-rot--cw-28 {
  animation: al-v5-rot-cw 28s linear infinite !important;
  transform-origin: center;
  transform-box: fill-box;
}
body.dev-tools-scope.al-page .al-sv-rot--ccw-28 {
  animation: al-v5-rot-ccw 28s linear infinite !important;
  transform-origin: center;
  transform-box: fill-box;
}
body.dev-tools-scope.al-page .al-sv-rot--cw-40 {
  animation: al-v5-rot-cw 40s linear infinite !important;
  transform-origin: center;
  transform-box: fill-box;
}
body.dev-tools-scope.al-page .al-sv-rot--ccw-50 {
  animation: al-v5-rot-ccw 50s linear infinite !important;
  transform-origin: center;
  transform-box: fill-box;
}
body.dev-tools-scope.al-page .al-sv-rot--cw-55 {
  animation: al-v5-rot-cw 55s linear infinite !important;
  transform-origin: center;
  transform-box: fill-box;
}

/* ─────────────────────────────────────────────────────────────────────
   §26 HUB — MISSING ANIMATIONS + FIXES
   ───────────────────────────────────────────────────────────────────── */

/* ── Фікс: секційний роздільник — прибрати старий 1px gradient ─────── */
.dev-tools-scope .tools-section-divider {
  background: transparent !important;
}

/* ── Back-button gear: idle spin 45s CW ────────────────────────────── */
.dev-tools-scope .al-bk-rot-back {
  animation: hub-bk-spin-idle 45s linear infinite;
  transform-box: fill-box;
  transform-origin: center center;
}
@keyframes hub-bk-spin-idle {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Back-button hover: drop-shadow ember glow + translateX */
body.dev-tools-scope.al-page .al-backarrow-host:hover {
  filter:
    drop-shadow(0 3px 14px rgba(0,0,0,0.80))
    drop-shadow(0 0 12px rgba(227,111,61,0.45))
    drop-shadow(0 0 4px rgba(197,139,58,0.35)) !important;
  transform: translateX(-3px) !important;
  transition: transform 0.15s ease, filter 0.15s ease !important;
}
body.dev-tools-scope.al-page .al-backarrow-host:hover .al-bk-rot-back {
  animation-duration: 10s !important;
}
body.dev-tools-scope.al-page .al-backarrow-host:active {
  transform: translateX(-1px) scale(0.98) !important;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.90)) !important;
}

/* ── Amber лампи: pulsing halo glow ────────────────────────────────── */
@keyframes hub-lamp-halo {
  0%, 100% { opacity: 0.28; transform: scale(1); }
  50%       { opacity: 0.62; transform: scale(1.30); }
}

body.dev-tools-scope.al-page .al-sv-lamp-halo {
  animation: hub-lamp-halo 2.5s ease-in-out infinite !important;
  transform-box: fill-box !important;
  transform-origin: center !important;
}
body.dev-tools-scope.al-page .al-sv-lamp--1 .al-sv-lamp-halo { animation-delay: 0s !important; }
body.dev-tools-scope.al-page .al-sv-lamp--2 .al-sv-lamp-halo { animation-delay: 0.7s !important; }

/* ── Пара з труб: steam puffs ──────────────────────────────────────── */
@keyframes hub-steam-rise {
  0%   { opacity: 0;    transform: translateY(0) scaleX(1); }
  15%  { opacity: 0.40; transform: translateY(-4px) scaleX(1.1); }
  60%  { opacity: 0.22; transform: translateY(-10px) scaleX(1.3); }
  100% { opacity: 0;    transform: translateY(-18px) scaleX(1.6); }
}

body.dev-tools-scope.al-page .al-sv-steam-puff {
  animation: hub-steam-rise 3.5s ease-in-out infinite !important;
  transform-box: fill-box !important;
  transform-origin: center !important;
}
body.dev-tools-scope.al-page .al-sv-sp--a { animation-delay: 0s !important; }
body.dev-tools-scope.al-page .al-sv-sp--b { animation-delay: 0.4s !important; }
body.dev-tools-scope.al-page .al-sv-sp--c { animation-delay: 0.8s !important; }
body.dev-tools-scope.al-page .al-sv-steam--R .al-sv-sp--a { animation-delay: 1.2s !important; }
body.dev-tools-scope.al-page .al-sv-steam--R .al-sv-sp--b { animation-delay: 1.6s !important; }
body.dev-tools-scope.al-page .al-sv-steam--R .al-sv-sp--c { animation-delay: 2.0s !important; }

/* ── Crest SVG: тонке "дихання" рамки ──────────────────────────────── */
@keyframes hub-frame-breath {
  0%, 100% { filter: drop-shadow(0 2px 8px rgba(0,0,0,0.60)) drop-shadow(0 0 10px rgba(92,58,26,0.15)); }
  50%       { filter: drop-shadow(0 2px 14px rgba(0,0,0,0.75)) drop-shadow(0 0 22px rgba(197,139,58,0.25)); }
}

body.dev-tools-scope.al-page .al-frame-svg {
  animation: hub-frame-breath 6s ease-in-out infinite;
  transition: filter 0.3s ease;
}

/* ── gears-running: пауза коли вкладка прихована ────────────────────── */
body.dev-tools-scope.al-page .al-sv-rot--cw-40,
body.dev-tools-scope.al-page .al-sv-rot--ccw-50,
body.dev-tools-scope.al-page .al-sv-rot--cw-55,
body.dev-tools-scope.al-page .al-sv-rot--ccw-28,
body.dev-tools-scope.al-page .al-sv-rot--cw-16,
body.dev-tools-scope.al-page .al-sv-rot--ccw-16,
body.dev-tools-scope.al-page .al-sv-rot--cw-20,
body.dev-tools-scope.al-page .al-sv-rot--ccw-20,
body.dev-tools-scope.al-page .al-bk-rot-back,
body.dev-tools-scope.al-page .al-sv-lamp-halo,
body.dev-tools-scope.al-page .al-sv-steam-puff {
  animation-play-state: var(--gears-running, running) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   §27 ATMOSPHERIC DENSITY ADDITIONS (audit-driven v2.0)
   Blueprint drift, stamp-appear, prefers-reduced-motion compliance
   ───────────────────────────────────────────────────────────────────── */

/* ── Stamp-appear: для статусних маркерів і декоративних плашок ─── */
.dev-tools-scope .devtool-tag.tag-all-ok,
.dev-tools-scope .devtool-tag.tag-fixed,
.dev-tools-scope .live-dot {
  animation: dt-stamp-appear 0.25s ease both;
}

/* ── Layered shadows: поглиблений inset на картках ──────────────── */
.dev-tools-scope .devtool-card {
  box-shadow:
    var(--forge-inset),
    var(--forge-shadow),
    inset 0 -2px 0 rgba(0,0,0,0.45),
    inset 2px 0 0 rgba(0,0,0,0.25);
}

.dev-tools-scope .devtool-card:hover {
  box-shadow:
    var(--forge-inset),
    var(--forge-shadow),
    0 0 0 1px rgba(197,139,58,0.10),
    inset 0 -2px 0 rgba(0,0,0,0.45),
    inset 2px 0 0 rgba(0,0,0,0.20);
}

/* ── Layered shadows: live cards ────────────────────────────────── */
.dev-tools-scope .devtool-card--live {
  box-shadow:
    var(--forge-inset),
    var(--forge-shadow),
    inset 0 -1px 0 rgba(0,0,0,0.40);
}

.dev-tools-scope .devtool-card--live:hover {
  box-shadow:
    var(--forge-inset),
    var(--forge-shadow),
    0 0 0 1px rgba(197,139,58,0.15),
    inset 0 -1px 0 rgba(0,0,0,0.40);
}

/* ── prefers-reduced-motion: скасовуємо всі ambient анімації ───── */
@media (prefers-reduced-motion: reduce) {
  body.dev-tools-scope.al-page .al-sv-rot--cw-40,
  body.dev-tools-scope.al-page .al-sv-rot--ccw-50,
  body.dev-tools-scope.al-page .al-sv-rot--cw-55,
  body.dev-tools-scope.al-page .al-sv-rot--ccw-28,
  body.dev-tools-scope.al-page .al-sv-rot--cw-16,
  body.dev-tools-scope.al-page .al-sv-rot--ccw-16,
  body.dev-tools-scope.al-page .al-sv-rot--cw-20,
  body.dev-tools-scope.al-page .al-sv-rot--ccw-20,
  body.dev-tools-scope.al-page .al-bk-rot-back,
  body.dev-tools-scope.al-page .al-sv-lamp-halo,
  body.dev-tools-scope.al-page .al-sv-steam-puff,
  body.dev-tools-scope.al-page .al-frame-svg,
  .dev-tools-scope .live-dot,
  .dev-tools-scope .devtool-tag.tag-all-ok,
  .dev-tools-scope .devtool-tag.tag-fixed {
    animation: none !important;
    transition: none !important;
  }
  .dev-tools-scope.al-page {
    animation: none !important;
  }
}

/* ── Decal: горизонтальна декоративна риска під section labels ── */
.dev-tools-scope .section-label::after {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: linear-gradient(90deg, var(--border-metal), transparent);
  margin-left: 8px;
  vertical-align: middle;
  opacity: 0.5;
}

/* ═══════════════════════════════════════════════════════════════════════
   §28 AGGRESSIVE PASS v2 — HERO GAUGE CLUSTER + CARD FORGE + DECALS
   Industrial Forge commanding control panel atmosphere
   ═══════════════════════════════════════════════════════════════════════ */

/* ── §28a HAZARD STRIPE BAND — під header ─────────────────────────── */
.dev-tools-scope .dt-hazard-band {
  width: 100%;
  height: 6px;
  flex-shrink: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--accent-brass) 0px,
    var(--accent-brass) 8px,
    var(--bg-void)      8px,
    var(--bg-void)      16px
  );
  opacity: 0.28;
  pointer-events: none;
  position: relative;
  z-index: 5;
}

/* ── §28b NIXIE TOOL COUNT — моноширинний дисплей-лічильник ──────── */
.dev-tools-scope .dt-nixie-display {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-family: 'IBM Plex Mono', var(--font-dt-status, monospace);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--accent-ember);
  text-shadow:
    0 0 8px rgba(227, 111, 61, 0.70),
    0 0 20px rgba(197, 139, 58, 0.35);
  background: var(--bg-void);
  border: 1px solid var(--border-dim);
  border-radius: 2px;
  padding: 3px 10px;
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.70),
    inset 0 0 12px rgba(197,139,58,0.06);
}

.dev-tools-scope .dt-nixie-display .dt-nixie-label {
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-shadow: none;
  margin-right: 6px;
  opacity: 0.7;
}

.dev-tools-scope .dt-nixie-display .dt-nixie-val {
  color: var(--accent-ember);
  font-size: 14px;
  letter-spacing: 0.06em;
  animation: dt-nixie-glow 3.5s ease-in-out infinite;
}

@keyframes dt-nixie-glow {
  0%, 100% {
    text-shadow:
      0 0 6px rgba(227,111,61,0.65),
      0 0 16px rgba(197,139,58,0.30);
  }
  50% {
    text-shadow:
      0 0 12px rgba(227,111,61,0.90),
      0 0 32px rgba(197,139,58,0.55),
      0 0 48px rgba(197,139,58,0.20);
  }
}

/* ── §28d CARD FORGE RIVETS — hex-bolt corners ───────────────────── */
/* Restyle devtool-rivet → більш помітні hex-болти */
.dev-tools-scope .devtool-rivet {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 32%,
    #d4a850 0%,
    #8a5a22 45%,
    #3c2010 80%,
    #1a0a04 100%
  );
  border: 1px solid rgba(0,0,0,0.65);
  box-shadow:
    inset 0 1px 2px rgba(255,230,120,0.22),
    inset 0 -1px 2px rgba(0,0,0,0.70),
    0 1px 3px rgba(0,0,0,0.65);
  pointer-events: none;
  z-index: 4;
}

.dev-tools-scope .devtool-rivet::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%,
    rgba(255,220,80,0.40) 0%,
    rgba(0,0,0,0.55) 100%
  );
}

.dev-tools-scope .devtool-rivet--tl { top: 6px;  left: 6px; }
.dev-tools-scope .devtool-rivet--tr { top: 6px;  right: 6px; }
.dev-tools-scope .devtool-rivet--bl { bottom: 6px; left: 6px; }
.dev-tools-scope .devtool-rivet--br { bottom: 6px; right: 6px; }

/* ── §28e CARD LED INDICATOR — мигаючий LED (HTML-елемент) ───────── */
.dev-tools-scope .dt-card-led {
  position: absolute;
  top: 8px;
  right: 36px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,
    var(--accent-ember),
    rgba(120, 40, 8, 0.8)
  );
  box-shadow:
    0 0 4px rgba(227, 111, 61, 0.55),
    inset 0 1px 1px rgba(255,200,100,0.35);
  animation: dt-card-led-flicker 2.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 3;
}

@keyframes dt-card-led-flicker {
  0%, 100% { opacity: 1;    box-shadow: 0 0 4px rgba(227,111,61,0.55), inset 0 1px 1px rgba(255,200,100,0.35); }
  35%       { opacity: 0.60; box-shadow: 0 0 2px rgba(227,111,61,0.30), inset 0 1px 1px rgba(255,200,100,0.20); }
  55%       { opacity: 0.85; box-shadow: 0 0 6px rgba(227,111,61,0.70), inset 0 1px 1px rgba(255,200,100,0.40); }
  75%       { opacity: 0.50; box-shadow: 0 0 2px rgba(227,111,61,0.25), inset 0 1px 1px rgba(255,200,100,0.15); }
}

/* Live-картки теж мають LED, але зелений */
.dev-tools-scope .devtool-card--live .dt-card-led {
  background: radial-gradient(circle at 35% 30%,
    var(--log-ok),
    rgba(30, 60, 20, 0.8)
  );
  box-shadow:
    0 0 4px rgba(107, 142, 78, 0.55),
    inset 0 1px 1px rgba(200,255,150,0.25);
  animation: dt-card-led-ok 3.5s ease-in-out infinite;
}

@keyframes dt-card-led-ok {
  0%, 100% { opacity: 1;    box-shadow: 0 0 4px rgba(107,142,78,0.55); }
  50%       { opacity: 0.65; box-shadow: 0 0 2px rgba(107,142,78,0.25); }
}

/* ── §28f CARD TITLE: CINZEL upgrade ─────────────────────────────── */
.dev-tools-scope .devtool-title {
  font-family: 'Cinzel', 'Oswald', var(--font-ui, sans-serif) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--text-bright) !important;
}

/* ── §28g CARD HOVER — ember glow підсвітка ──────────────────────── */
.dev-tools-scope .devtool-card:hover {
  background: var(--bg-hover) !important;
  border-color: var(--border-bright) !important;
  border-left-color: var(--accent-brass) !important;
  box-shadow:
    var(--forge-inset),
    var(--forge-shadow),
    0 0 0 1px rgba(197, 139, 58, 0.18),
    0 4px 24px rgba(197, 139, 58, 0.12),
    inset 0 -2px 0 rgba(0,0,0,0.45),
    inset 2px 0 0 rgba(0,0,0,0.20) !important;
  transform: translateY(-1px);
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.20s ease,
    transform 0.15s ease !important;
}

/* ── §28h CARD BRASS HEADER PLANK ────────────────────────────────── */
/* Підкладка за заголовком картки — brass plank ефект */
.dev-tools-scope .devtool-icon {
  position: relative;
}
.dev-tools-scope .devtool-icon::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(197, 139, 58, 0.35),
    transparent
  );
  pointer-events: none;
}

/* ── §28m SECTION RIVET-PIN BAND — металева смуга між секціями ──── */
.dev-tools-scope .dt-rivet-band {
  display: flex;
  align-items: center;
  gap: 0;
  height: 20px;
  margin: 12px 0;
  background: linear-gradient(180deg,
    rgba(92,68,48,0.12) 0%,
    rgba(42,32,20,0.28) 50%,
    rgba(92,68,48,0.10) 100%
  );
  border-top: 1px solid rgba(92,68,48,0.30);
  border-bottom: 1px solid rgba(0,0,0,0.45);
  position: relative;
  overflow: hidden;
}

.dev-tools-scope .dt-rivet-band::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(232,204,128,0.06);
}

.dev-tools-scope .dt-rivet-band-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%,
    #a8998a 0%, #5a5048 55%, #0d0907 100%
  );
  border: 1px solid rgba(0,0,0,0.65);
  box-shadow:
    inset 0 0.5px 1px rgba(255,255,255,0.18),
    0 1px 2px rgba(0,0,0,0.60);
  flex-shrink: 0;
  margin-left: 32px;
}

.dev-tools-scope .dt-rivet-band-dot:first-child { margin-left: 24px; }

/* ── §28n prefers-reduced-motion — скасувати всі нові анімації ───── */
@media (prefers-reduced-motion: reduce) {
  .dev-tools-scope .dt-nixie-val,
  .dev-tools-scope .dt-card-led,
  .dev-tools-scope .devtool-card:hover {
    transform: none !important;
  }
  .dev-tools-scope .dt-nixie-val {
    text-shadow: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   §29 THIRD PASS — DEPTH, ATMOSPHERE & LIVING MACHINE
   Chronograph scale band · Card bevel depth · Footer forge plate
   Corner vignettes · System heartbeat · Hover orchestration
   ═══════════════════════════════════════════════════════════════════════ */

/* ── §29a VIEWPORT CORNER VIGNETTES — brass-burn у 4 кутах ──────────
   Накладаються поверх bg-scene через fixed::after на .al-page         */
.dev-tools-scope.al-page::after {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 0% 0%,   rgba(92,58,26,0.28) 0%, transparent 38%),
    radial-gradient(ellipse at 100% 0%,  rgba(92,58,26,0.22) 0%, transparent 35%),
    radial-gradient(ellipse at 0% 100%,  rgba(92,58,26,0.25) 0%, transparent 40%),
    radial-gradient(ellipse at 100% 100%,rgba(92,58,26,0.32) 0%, transparent 42%);
  pointer-events: none;
  z-index: 0;
}

/* ── §29b CHRONOGRAPH SCALE BAND — вертикальна латунна шкала ────────
   CSS-only через ::before на .devtools-main (широка контентна зона)   */
.dev-tools-scope .devtools-main::before {
  content: '';
  position: fixed;
  left: 0; top: 0;
  width: 5px;
  height: 100vh;
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0px,
      transparent 19px,
      rgba(197,139,58,0.18) 19px,
      rgba(197,139,58,0.18) 20px
    ),
    repeating-linear-gradient(
      180deg,
      transparent 0px,
      transparent 39px,
      rgba(197,139,58,0.35) 39px,
      rgba(197,139,58,0.35) 40px
    ),
    linear-gradient(180deg,
      rgba(92,68,48,0.20) 0%,
      rgba(42,32,20,0.30) 50%,
      rgba(92,68,48,0.18) 100%
    );
  border-right: 1px solid rgba(92,68,48,0.22);
  pointer-events: none;
  z-index: 0;
  animation: dt-scale-glow 8s ease-in-out infinite;
}

.dev-tools-scope .devtools-main::after {
  content: '';
  position: fixed;
  right: 0; top: 0;
  width: 5px;
  height: 100vh;
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0px,
      transparent 19px,
      rgba(197,139,58,0.15) 19px,
      rgba(197,139,58,0.15) 20px
    ),
    repeating-linear-gradient(
      180deg,
      transparent 0px,
      transparent 39px,
      rgba(197,139,58,0.28) 39px,
      rgba(197,139,58,0.28) 40px
    ),
    linear-gradient(180deg,
      rgba(92,68,48,0.16) 0%,
      rgba(42,32,20,0.25) 50%,
      rgba(92,68,48,0.14) 100%
    );
  border-left: 1px solid rgba(92,68,48,0.18);
  pointer-events: none;
  z-index: 0;
  animation: dt-scale-glow 8s ease-in-out 4s infinite;
}

@keyframes dt-scale-glow {
  0%, 100% { opacity: 0.65; }
  50%       { opacity: 1.00; }
}

/* ── §29c CARD INNER BEVEL — фрезерований метал ─────────────────────
   Подвійний inset shadow: light highlight зверху + dark shadow знизу  */
.dev-tools-scope .devtool-card {
  box-shadow:
    var(--forge-inset),
    var(--forge-shadow),
    inset 0 -2px 0 rgba(0,0,0,0.50),
    inset 2px 0 0 rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,230,120,0.06),
    inset -1px 0 0 rgba(255,255,255,0.03) !important;
}

/* ── §29d PRESSURE PIPE ACCENT — вертикальна латунна лінія зліва ─────
   Замінюємо border-left 3px на більш виразний gradient pipe           */
.dev-tools-scope .devtool-card {
  border-left: 3px solid transparent !important;
  background-image: linear-gradient(var(--bg-surface), var(--bg-surface)),
    linear-gradient(180deg,
      rgba(197,139,58,0.12) 0%,
      rgba(197,139,58,0.55) 30%,
      rgba(160,100,30,0.70) 60%,
      rgba(120,70,20,0.45) 85%,
      rgba(92,58,26,0.18) 100%
    ) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
}

.dev-tools-scope .devtool-card:hover {
  background-image: linear-gradient(var(--bg-hover), var(--bg-hover)),
    linear-gradient(180deg,
      rgba(227,180,80,0.20) 0%,
      rgba(227,180,80,0.80) 30%,
      rgba(197,139,58,0.90) 60%,
      rgba(160,100,30,0.65) 85%,
      rgba(92,58,26,0.25) 100%
    ) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
}

/* ── §29e CARD HOVER GEAR — маленька шестерня у кутку при hover ──────
   Pure CSS через ::after на .devtool-icon при hover батьківської картки */
.dev-tools-scope .devtool-card:hover .devtool-icon::before {
  content: '';
  position: absolute;
  top: -8px; right: -8px;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(197,139,58,0.45);
  background:
    conic-gradient(
      rgba(92,68,48,0.80) 0deg,  rgba(42,30,16,0.90) 45deg,
      rgba(92,68,48,0.80) 45deg, rgba(42,30,16,0.90) 90deg,
      rgba(92,68,48,0.80) 90deg, rgba(42,30,16,0.90) 135deg,
      rgba(92,68,48,0.80) 135deg,rgba(42,30,16,0.90) 180deg,
      rgba(92,68,48,0.80) 180deg,rgba(42,30,16,0.90) 225deg,
      rgba(92,68,48,0.80) 225deg,rgba(42,30,16,0.90) 270deg,
      rgba(92,68,48,0.80) 270deg,rgba(42,30,16,0.90) 315deg,
      rgba(92,68,48,0.80) 315deg,rgba(42,30,16,0.90) 360deg
    );
  animation: dt-micro-gear-spin 2.5s linear infinite;
  pointer-events: none;
  z-index: 5;
  box-shadow: 0 0 4px rgba(197,139,58,0.30);
}

@keyframes dt-micro-gear-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── §29f STATUS TAG DEPRESSED STAMP — вдавлений текст ──────────────
   Metal backdrop + inset text-shadow для "embossed" ефекту            */
.dev-tools-scope .devtool-tag.tag-fixed,
.dev-tools-scope .devtool-tag.tag-all-ok {
  text-shadow:
    0 1px 2px rgba(0,0,0,0.70),
    0 -1px 0 rgba(255,230,120,0.12);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 1px 0 rgba(255,230,120,0.08);
  letter-spacing: 0.14em;
}

/* ── §29g SYSTEM HEARTBEAT — "жива машина" (6s, всі LED + Nixie) ─────
   Синхронізований повільний пульс усіх індикаторів системи            */
@keyframes dt-system-heartbeat {
  0%,  8%  { opacity: 1.00; }
  12%, 18% { opacity: 0.70; }
  22%, 30% { opacity: 0.90; }
  34%, 40% { opacity: 0.60; }
  44%, 52% { opacity: 0.85; }
  56%      { opacity: 1.00; }
  100%     { opacity: 1.00; }
}

/* Heartbeat: Nixie display — загальний контейнер пульсує */
.dev-tools-scope .dt-nixie-display {
  animation: dt-system-heartbeat 6s ease-in-out infinite !important;
}

/* Heartbeat: LED-индикатори на картках (синхронізовано з heartbeat) */
.dev-tools-scope .dt-card-led {
  animation: dt-system-heartbeat 6s ease-in-out 0.3s infinite !important;
}

/* Heartbeat: Live-dot у картках реального часу */
.dev-tools-scope .live-dot {
  animation: dt-system-heartbeat 6s ease-in-out 0.8s infinite !important;
}

/* ── §29h HOVER ORCHESTRATION — затемнення non-hovered карток ────────
   :has() selector: сітка затемнює всі картки крім hovered             */
@supports selector(:has(*)) {
  .dev-tools-scope .devtools-tools-grid:has(.devtool-card:hover) .devtool-card:not(:hover) {
    opacity: 0.55;
    filter: brightness(0.70);
    transition: opacity 0.20s ease, filter 0.20s ease;
  }
  .dev-tools-scope .devtools-tools-grid:has(.devtool-card:hover) .devtool-card:hover {
    opacity: 1;
    filter: none;
    box-shadow:
      var(--forge-inset),
      var(--forge-shadow),
      0 0 0 1px rgba(197,139,58,0.25),
      0 0 24px rgba(197,139,58,0.18),
      0 0 48px rgba(197,139,58,0.08),
      inset 0 1px 0 rgba(255,230,120,0.08) !important;
  }
  /* Live-grid hover orchestration */
  .dev-tools-scope .devtools-live-grid:has(.devtool-card--live:hover) .devtool-card--live:not(:hover) {
    opacity: 0.55;
    filter: brightness(0.70);
    transition: opacity 0.20s ease, filter 0.20s ease;
  }
}

/* ── §29i FORGE FOOTER PLATE — металева смуга внизу контенту ────────
   Стилі для dt-forge-footer що додається в HTML (1 елемент)           */
.dev-tools-scope .dt-forge-footer {
  margin-top: 40px;
  position: relative;
  overflow: hidden;
}

.dev-tools-scope .dt-forge-footer-band {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  background: linear-gradient(180deg,
    rgba(42,32,20,0.60) 0%,
    rgba(20,16,10,0.80) 50%,
    rgba(42,32,20,0.55) 100%
  );
  border-top: 1px solid rgba(92,68,48,0.50);
  border-bottom: 1px solid rgba(0,0,0,0.70);
  position: relative;
}

/* Highlight-лінія зверху смуги */
.dev-tools-scope .dt-forge-footer-band::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(232,204,128,0.08);
}

/* Заклепки через repeating-gradient */
.dev-tools-scope .dt-forge-footer-band::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0px,
    transparent 39px,
    radial-gradient(circle at 50% 50%,
      rgba(168,153,138,0.50) 0%,
      rgba(90,80,72,0.60) 45%,
      rgba(13,9,7,0.70) 100%
    ) 39px,
    transparent 47px
  );
  pointer-events: none;
}

/* Maker's mark — центральний текст */
.dev-tools-scope .dt-forge-footer-mark {
  font-family: var(--font-dt-title, 'Cinzel', serif);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-dim);
  opacity: 0.55;
  user-select: none;
  pointer-events: none;
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,0.80);
}

/* Patina: легкі radial градієнти зношеності */
.dev-tools-scope .dt-forge-footer-patina {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(92,68,48,0.12) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 50%, rgba(92,68,48,0.10) 0%, transparent 55%);
  pointer-events: none;
}

/* ── §29i HUB BG-SCENE — Edison Workshop override ────────────────────
   Hub замінює старий industrial bg на Edison-lamе сцену.
   Opacity 0.92 — фон має бути ВИДИМИМ і ЕПІЧНИМ.
   !important перекриває базовий .al-bg-scene { opacity: 0.25 } з dt-steampunk.css */
.dev-tools-scope .hub-bg-scene {
  opacity: 0.92 !important;
}

/* ── §29j COLOR DEPTH / GRAIN TEXTURE — SVG turbulence overlay ───────
   Накладаємо тонкий noise через SVG-фільтр на bg-scene через ::after  */
.dev-tools-scope .al-bg-scene::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E") repeat;
  opacity: 0.035;
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* ── §29k CSS CLOCK SECOND-HAND — tick animation 60-step ─────────────
   Якщо є .dt-clockface у header — додаємо CSS стрілку               */
.dev-tools-scope .dt-clockface-secondhand {
  transform-origin: 50% 85%;
  transform-box: fill-box;
  animation: dt-clock-tick 60s steps(60, end) infinite;
}

@keyframes dt-clock-tick {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── §29l prefers-reduced-motion — всі нові §29 анімації ────────────── */
@media (prefers-reduced-motion: reduce) {
  .dev-tools-scope .devtools-main::before,
  .dev-tools-scope .devtools-main::after {
    animation: none !important;
    opacity: 0.50 !important;
  }
  .dev-tools-scope .dt-nixie-display,
  .dev-tools-scope .dt-card-led,
  .dev-tools-scope .live-dot {
    animation: none !important;
    opacity: 1 !important;
  }
  .dev-tools-scope .devtool-card:hover .devtool-icon::before {
    animation: none !important;
  }
  @supports selector(:has(*)) {
    .dev-tools-scope .devtools-tools-grid:has(.devtool-card:hover) .devtool-card:not(:hover) {
      opacity: 1;
      filter: none;
      transition: none;
    }
  }
  .dev-tools-scope .dt-clockface-secondhand {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   §30  FOURTH PASS — Scrollbar / Cartouches / Category Tones /
        Entrance Animations / Active States / Tooltips / Live Aura
   ═══════════════════════════════════════════════════════════════════════ */

/* ── §30a CUSTOM INDUSTRIAL FORGE SCROLLBAR ────────────────────────────
   Firefox fallback + Webkit full control. Brass piston thumb,
   engraved iron track, ember-glow on hover.                             */

/* Firefox fallback */
.dev-tools-scope {
  scrollbar-color: rgba(168,120,52,0.70) rgba(13,9,7,0.90);
  scrollbar-width: thin;
}

/* Webkit — track: engraved iron channel */
.dev-tools-scope ::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

.dev-tools-scope ::-webkit-scrollbar-track {
  background:
    linear-gradient(180deg,
      rgba(8,6,4,0.95) 0%,
      rgba(18,14,10,0.90) 50%,
      rgba(8,6,4,0.95) 100%
    );
  border-left: 1px solid rgba(42,30,18,0.70);
  box-shadow:
    inset 2px 0 4px rgba(0,0,0,0.70),
    inset -1px 0 2px rgba(0,0,0,0.40),
    inset 0 0 8px rgba(0,0,0,0.60);
}

.dev-tools-scope ::-webkit-scrollbar-track:vertical {
  border-left: 1px solid rgba(42,30,18,0.70);
}

/* Thumb: brass piston з двома декоративними рисками */
.dev-tools-scope ::-webkit-scrollbar-thumb {
  background:
    /* Декоративна риска 1 (верх) */
    linear-gradient(180deg,
      transparent      0%,
      transparent      30%,
      rgba(232,196,96,0.55) 30%,
      rgba(232,196,96,0.55) 32%,
      transparent      32%,
      transparent      66%,
      rgba(232,196,96,0.55) 66%,
      rgba(232,196,96,0.55) 68%,
      transparent      68%,
      transparent      100%
    ),
    /* Brass piston body */
    linear-gradient(180deg,
      rgba(110,82,38,0.90) 0%,
      rgba(168,120,52,0.95) 15%,
      rgba(197,150,68,0.90) 35%,
      rgba(148,108,44,0.95) 55%,
      rgba(168,120,52,0.90) 75%,
      rgba(100,72,30,0.95) 100%
    );
  border: 1px solid rgba(197,150,68,0.40);
  border-radius: 2px;
  box-shadow:
    inset 1px 0 0 rgba(255,230,120,0.15),
    inset -1px 0 0 rgba(0,0,0,0.40),
    0 1px 3px rgba(0,0,0,0.60);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

/* Thumb hover: ember glow */
.dev-tools-scope ::-webkit-scrollbar-thumb:hover {
  background:
    linear-gradient(180deg,
      transparent      0%,
      transparent      30%,
      rgba(255,210,80,0.75) 30%,
      rgba(255,210,80,0.75) 32%,
      transparent      32%,
      transparent      66%,
      rgba(255,210,80,0.75) 66%,
      rgba(255,210,80,0.75) 68%,
      transparent      68%,
      transparent      100%
    ),
    linear-gradient(180deg,
      rgba(130,96,44,0.95) 0%,
      rgba(197,150,68,1.00) 20%,
      rgba(232,180,80,0.95) 40%,
      rgba(180,132,56,1.00) 60%,
      rgba(197,150,68,0.95) 80%,
      rgba(120,86,32,1.00) 100%
    );
  box-shadow:
    inset 1px 0 0 rgba(255,240,140,0.25),
    inset -1px 0 0 rgba(0,0,0,0.30),
    0 0 8px rgba(197,150,68,0.50),
    0 0 16px rgba(197,150,68,0.25),
    0 1px 4px rgba(0,0,0,0.60);
  border-color: rgba(232,196,96,0.65);
}

/* Corner piece */
.dev-tools-scope ::-webkit-scrollbar-corner {
  background: rgba(8,6,4,0.95);
}

/* ── §30b SECTION CARTOUCHES — brass engraved nameplates ──────────────
   Трансформуємо .tools-group-header у латунний картуш з flanged corners,
   ember underglow і riveted-lines ліво/право від тексту.                */

.dev-tools-scope .tools-group-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px 10px 16px;
  margin-bottom: 16px;
  background:
    linear-gradient(180deg,
      rgba(52,38,20,0.70) 0%,
      rgba(36,26,14,0.85) 50%,
      rgba(26,18,10,0.80) 100%
    );
  border: 1px solid rgba(120,88,44,0.45);
  border-radius: 2px;
  overflow: visible;
  /* Engraved inset effect */
  box-shadow:
    inset 0 1px 0 rgba(255,230,120,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.50),
    inset 2px 0 4px rgba(0,0,0,0.30),
    0 2px 8px rgba(0,0,0,0.45),
    0 0 0 1px rgba(42,30,14,0.60);
  /* Ember underglow */
  filter: drop-shadow(0 2px 12px rgba(197,139,58,0.10));
  animation: dt-cartouche-arrive 0.5s ease both;
}

/* Flanged corners — ::before (decorative bracket effect) */
.dev-tools-scope .tools-group-header::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px; right: -1px; bottom: -1px;
  border: 1px solid transparent;
  border-radius: 2px;
  background:
    /* TL corner bracket */
    linear-gradient(to right, rgba(197,150,68,0.60) 8px, transparent 8px) top left /  8px 2px no-repeat,
    linear-gradient(to bottom, rgba(197,150,68,0.60) 8px, transparent 8px) top left /  2px 8px no-repeat,
    /* TR corner bracket */
    linear-gradient(to left,  rgba(197,150,68,0.60) 8px, transparent 8px) top right / 8px 2px no-repeat,
    linear-gradient(to bottom, rgba(197,150,68,0.60) 8px, transparent 8px) top right / 2px 8px no-repeat,
    /* BL corner bracket */
    linear-gradient(to right, rgba(197,150,68,0.60) 8px, transparent 8px) bottom left /  8px 2px no-repeat,
    linear-gradient(to top,   rgba(197,150,68,0.60) 8px, transparent 8px) bottom left /  2px 8px no-repeat,
    /* BR corner bracket */
    linear-gradient(to left,  rgba(197,150,68,0.60) 8px, transparent 8px) bottom right / 8px 2px no-repeat,
    linear-gradient(to top,   rgba(197,150,68,0.60) 8px, transparent 8px) bottom right / 2px 8px no-repeat;
  pointer-events: none;
}

/* Riveted line ПІСЛЯ label — горизонтальна лінія з заклепками */
.dev-tools-scope .tools-group-header::after {
  content: '';
  flex: 1;
  height: 1px;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 11px,
      rgba(92,68,40,0.60) 11px,
      rgba(92,68,40,0.60) 12px,
      rgba(120,88,48,0.35) 12px,
      rgba(120,88,48,0.35) 13px,
      transparent 13px,
      transparent 16px
    );
  margin-left: 4px;
}

/* Category glyph ♦ перед label (через :first-child або pseudo на label) */
.dev-tools-scope .tools-group-label {
  font-family: var(--font-dt-title, 'Cinzel', serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--text-head, rgba(232,204,128,0.90));
  text-shadow:
    0 1px 3px rgba(0,0,0,0.70),
    0 0 8px rgba(197,139,58,0.20);
  position: relative;
  white-space: nowrap;
}

/* Category icon (material symbol у header) — brass tint */
.dev-tools-scope .tools-group-header .material-symbols-outlined:not(.tools-group-toggle):not(.tools-group-open-all .material-symbols-outlined) {
  font-size: 16px;
  color: rgba(197,150,68,0.80);
  opacity: 0.85;
  flex-shrink: 0;
}

/* Section cartouche slide-in */
@keyframes dt-cartouche-arrive {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Monitoring group — emerald tint на header */
.dev-tools-scope [data-group="monitoring"] .tools-group-header {
  border-color: rgba(72,160,100,0.35);
  box-shadow:
    inset 0 1px 0 rgba(120,220,140,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.50),
    0 0 0 1px rgba(42,30,14,0.60),
    0 2px 12px rgba(72,160,100,0.10);
}
.dev-tools-scope [data-group="monitoring"] .tools-group-header::before {
  background:
    linear-gradient(to right, rgba(72,200,120,0.55) 8px, transparent 8px) top left /  8px 2px no-repeat,
    linear-gradient(to bottom, rgba(72,200,120,0.55) 8px, transparent 8px) top left /  2px 8px no-repeat,
    linear-gradient(to left,  rgba(72,200,120,0.55) 8px, transparent 8px) top right / 8px 2px no-repeat,
    linear-gradient(to bottom, rgba(72,200,120,0.55) 8px, transparent 8px) top right / 2px 8px no-repeat,
    linear-gradient(to right, rgba(72,200,120,0.55) 8px, transparent 8px) bottom left /  8px 2px no-repeat,
    linear-gradient(to top,   rgba(72,200,120,0.55) 8px, transparent 8px) bottom left /  2px 8px no-repeat,
    linear-gradient(to left,  rgba(72,200,120,0.55) 8px, transparent 8px) bottom right / 8px 2px no-repeat,
    linear-gradient(to top,   rgba(72,200,120,0.55) 8px, transparent 8px) bottom right / 2px 8px no-repeat;
}

/* Docs group — warm amber tint */
.dev-tools-scope [data-group="docs"] .tools-group-header {
  border-color: rgba(197,150,68,0.45);
  box-shadow:
    inset 0 1px 0 rgba(255,210,80,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.50),
    0 0 0 1px rgba(42,30,14,0.60),
    0 2px 12px rgba(197,150,68,0.12);
}

/* Dev group — copper/ember tint */
.dev-tools-scope [data-group="dev"] .tools-group-header {
  border-color: rgba(180,90,40,0.45);
  box-shadow:
    inset 0 1px 0 rgba(255,140,60,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.50),
    0 0 0 1px rgba(42,30,14,0.60),
    0 2px 12px rgba(180,90,40,0.12);
}
.dev-tools-scope [data-group="dev"] .tools-group-header::before {
  background:
    linear-gradient(to right, rgba(210,110,52,0.55) 8px, transparent 8px) top left /  8px 2px no-repeat,
    linear-gradient(to bottom, rgba(210,110,52,0.55) 8px, transparent 8px) top left /  2px 8px no-repeat,
    linear-gradient(to left,  rgba(210,110,52,0.55) 8px, transparent 8px) top right / 8px 2px no-repeat,
    linear-gradient(to bottom, rgba(210,110,52,0.55) 8px, transparent 8px) top right / 2px 8px no-repeat,
    linear-gradient(to right, rgba(210,110,52,0.55) 8px, transparent 8px) bottom left /  8px 2px no-repeat,
    linear-gradient(to top,   rgba(210,110,52,0.55) 8px, transparent 8px) bottom left /  2px 8px no-repeat,
    linear-gradient(to left,  rgba(210,110,52,0.55) 8px, transparent 8px) bottom right / 8px 2px no-repeat,
    linear-gradient(to top,   rgba(210,110,52,0.55) 8px, transparent 8px) bottom right / 2px 8px no-repeat;
}

/* ── §30c CATEGORY-TONE ACCENTS — attribute selectors per tool type ───
   Pipe strip (left border), LED color, hover rim — via data-category     */

/* Monitoring — emerald steam pressure */
.dev-tools-scope .devtool-card[data-category="monitoring"] {
  border-left: 3px solid rgba(72,180,108,0.55);
}
.dev-tools-scope .devtool-card[data-category="monitoring"]:hover {
  box-shadow:
    var(--forge-inset),
    var(--forge-shadow),
    0 0 0 1px rgba(72,180,108,0.30),
    0 0 20px rgba(72,180,108,0.14),
    inset 0 1px 0 rgba(120,220,140,0.07) !important;
}
.dev-tools-scope .devtool-card[data-category="monitoring"] .dt-card-led {
  background: radial-gradient(circle, rgba(72,200,120,0.90) 30%, rgba(36,120,70,0.60) 100%);
  box-shadow: 0 0 4px rgba(72,200,120,0.70), 0 0 8px rgba(72,200,120,0.35);
}

/* Docs — amber/brass */
.dev-tools-scope .devtool-card[data-category="docs"] {
  border-left: 3px solid rgba(197,150,68,0.55);
}
.dev-tools-scope .devtool-card[data-category="docs"]:hover {
  box-shadow:
    var(--forge-inset),
    var(--forge-shadow),
    0 0 0 1px rgba(197,150,68,0.30),
    0 0 20px rgba(197,150,68,0.16),
    inset 0 1px 0 rgba(255,210,80,0.07) !important;
}

/* Dev tools — copper/ember */
.dev-tools-scope .devtool-card[data-category="dev"] {
  border-left: 3px solid rgba(200,100,40,0.55);
}
.dev-tools-scope .devtool-card[data-category="dev"]:hover {
  box-shadow:
    var(--forge-inset),
    var(--forge-shadow),
    0 0 0 1px rgba(200,100,40,0.30),
    0 0 20px rgba(200,100,40,0.14),
    inset 0 1px 0 rgba(255,140,60,0.07) !important;
}
.dev-tools-scope .devtool-card[data-category="dev"] .dt-card-led {
  background: radial-gradient(circle, rgba(220,110,50,0.90) 30%, rgba(140,60,20,0.60) 100%);
  box-shadow: 0 0 4px rgba(220,110,50,0.70), 0 0 8px rgba(220,110,50,0.35);
}

/* Micro-gear tint при hover — category-aware */
.dev-tools-scope .devtool-card[data-category="monitoring"]:hover .devtool-icon::before {
  border-color: rgba(72,200,120,0.55);
  box-shadow: 0 0 6px rgba(72,200,120,0.35);
}
.dev-tools-scope .devtool-card[data-category="dev"]:hover .devtool-icon::before {
  border-color: rgba(220,110,50,0.55);
  box-shadow: 0 0 6px rgba(220,110,50,0.35);
}

/* ── §30d ENTRANCE LOAD ANIMATIONS — staggered cascade on page load ───
   Картки влітають зі зміщенням translateY + fade. Одноразово.
   Entrance не повертається після завершення (forwards).                  */

@keyframes dt-card-arrive {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes dt-section-slide-in {
  from {
    opacity: 0;
    transform: translateX(-16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Live cards — staggered arrive (5 cards × 80ms) */
.dev-tools-scope .devtool-card--live:nth-child(1) {
  animation: dt-card-arrive 0.45s cubic-bezier(0.22,0.61,0.36,1) 0.10s both;
}
.dev-tools-scope .devtool-card--live:nth-child(2) {
  animation: dt-card-arrive 0.45s cubic-bezier(0.22,0.61,0.36,1) 0.18s both;
}
.dev-tools-scope .devtool-card--live:nth-child(3) {
  animation: dt-card-arrive 0.45s cubic-bezier(0.22,0.61,0.36,1) 0.26s both;
}
.dev-tools-scope .devtool-card--live:nth-child(4) {
  animation: dt-card-arrive 0.45s cubic-bezier(0.22,0.61,0.36,1) 0.34s both;
}
.dev-tools-scope .devtool-card--live:nth-child(5) {
  animation: dt-card-arrive 0.45s cubic-bezier(0.22,0.61,0.36,1) 0.42s both;
}

/* Tools-grid cards — later stagger (починається після live) */
.dev-tools-scope .devtools-tools-grid .devtool-card:nth-child(1) {
  animation: dt-card-arrive 0.42s cubic-bezier(0.22,0.61,0.36,1) 0.30s both;
}
.dev-tools-scope .devtools-tools-grid .devtool-card:nth-child(2) {
  animation: dt-card-arrive 0.42s cubic-bezier(0.22,0.61,0.36,1) 0.39s both;
}
.dev-tools-scope .devtools-tools-grid .devtool-card:nth-child(3) {
  animation: dt-card-arrive 0.42s cubic-bezier(0.22,0.61,0.36,1) 0.48s both;
}
.dev-tools-scope .devtools-tools-grid .devtool-card:nth-child(4) {
  animation: dt-card-arrive 0.42s cubic-bezier(0.22,0.61,0.36,1) 0.57s both;
}
.dev-tools-scope .devtools-tools-grid .devtool-card:nth-child(5) {
  animation: dt-card-arrive 0.42s cubic-bezier(0.22,0.61,0.36,1) 0.66s both;
}
.dev-tools-scope .devtools-tools-grid .devtool-card:nth-child(6) {
  animation: dt-card-arrive 0.42s cubic-bezier(0.22,0.61,0.36,1) 0.75s both;
}

/* Section cartouche: slide-in з лівого боку */
.dev-tools-scope [data-group="monitoring"] .tools-group-header {
  animation: dt-section-slide-in 0.50s cubic-bezier(0.22,0.61,0.36,1) 0.20s both, dt-cartouche-arrive 0s 0.20s both;
}
.dev-tools-scope [data-group="docs"] .tools-group-header {
  animation: dt-section-slide-in 0.50s cubic-bezier(0.22,0.61,0.36,1) 0.35s both, dt-cartouche-arrive 0s 0.35s both;
}
.dev-tools-scope [data-group="dev"] .tools-group-header {
  animation: dt-section-slide-in 0.50s cubic-bezier(0.22,0.61,0.36,1) 0.50s both, dt-cartouche-arrive 0s 0.50s both;
}

/* ── §30e CARD ACTIVE / PRESSED STATE ─────────────────────────────────
   Легке втиснення на :active (translateY + deeper inset shadow).
   Ember-flash keyframe 200ms.                                            */

@keyframes dt-card-press-flash {
  0%   { box-shadow: var(--forge-inset), var(--forge-shadow), 0 0 12px rgba(197,139,58,0.50); }
  40%  { box-shadow: var(--forge-inset), inset 0 3px 8px rgba(0,0,0,0.55), 0 0 24px rgba(197,139,58,0.70); }
  100% { box-shadow: var(--forge-inset), var(--forge-shadow); }
}

.dev-tools-scope .devtool-card:active {
  transform: translateY(1px) scale(0.995);
  box-shadow:
    var(--forge-inset),
    inset 0 3px 8px rgba(0,0,0,0.55),
    0 1px 4px rgba(0,0,0,0.60);
  transition:
    transform 0.08s ease,
    box-shadow 0.08s ease;
}

/* Flash при відпусканні — через animation на :focus-visible як proxy */
.dev-tools-scope .devtool-card:active .dt-card-led {
  filter: brightness(2.0) saturate(1.5);
  transition: filter 0.12s ease;
}

/* Категорійна ember-flash при active */
.dev-tools-scope .devtool-card[data-category="monitoring"]:active {
  box-shadow:
    var(--forge-inset),
    inset 0 3px 8px rgba(0,0,0,0.55),
    0 0 12px rgba(72,180,108,0.40);
}
.dev-tools-scope .devtool-card[data-category="dev"]:active {
  box-shadow:
    var(--forge-inset),
    inset 0 3px 8px rgba(0,0,0,0.55),
    0 0 12px rgba(200,100,40,0.40);
}

/* ── §30f INDUSTRIAL FORGE TOOLTIPS ───────────────────────────────────
   Для [data-tooltip] атрибутів — pure CSS tooltip без JS.
   Dark iron backdrop, 1px brass border, Cinzel font.                    */

.dev-tools-scope [data-tooltip] {
  position: relative;
}

/* Tooltip backdrop */
.dev-tools-scope [data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  white-space: nowrap;
  font-family: var(--font-dt-title, 'Cinzel', serif);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-head, rgba(232,204,128,0.92));
  background:
    linear-gradient(180deg,
      rgba(26,18,10,0.97) 0%,
      rgba(18,12,8,0.98)  100%
    );
  border: 1px solid rgba(120,88,44,0.70);
  padding: 6px 12px;
  border-radius: 2px;
  box-shadow:
    /* Hex-bolt TL */
    -6px -6px 0 0 rgba(26,18,10,0.97),
    inset 0 1px 0 rgba(255,230,120,0.08),
    0 4px 12px rgba(0,0,0,0.70),
    0 0 0 1px rgba(42,30,14,0.60);
  opacity: 0;
  pointer-events: none;
  z-index: 200;
  transition:
    opacity 0.20s ease,
    transform 0.20s ease;
}

/* Tooltip arrow — clip-path triangle */
.dev-tools-scope [data-tooltip]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid rgba(120,88,44,0.70);
  opacity: 0;
  pointer-events: none;
  z-index: 201;
  transition:
    opacity 0.20s ease,
    transform 0.20s ease;
}

/* Show tooltip on hover */
.dev-tools-scope [data-tooltip]:hover::after,
.dev-tools-scope [data-tooltip]:focus::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.dev-tools-scope [data-tooltip]:hover::before,
.dev-tools-scope [data-tooltip]:focus::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── §30g LIVE-CARD AURA — pulsing radial glow (breathing, 6s sync) ───
   .devtool-card--live отримує повільну пульсуючу ауру ззовні картки.
   Синхронізовано з system-heartbeat (однаковий 6s period).             */

@keyframes dt-live-aura {
  0%,  100% { box-shadow: var(--forge-inset), var(--forge-shadow), 0 0 0 rgba(72,180,108,0); }
  30%       { box-shadow: var(--forge-inset), var(--forge-shadow), 0 0 16px rgba(72,180,108,0.18), 0 0 32px rgba(72,180,108,0.08); }
  55%       { box-shadow: var(--forge-inset), var(--forge-shadow), 0 0 8px rgba(72,180,108,0.10), 0 0 18px rgba(72,180,108,0.05); }
  80%       { box-shadow: var(--forge-inset), var(--forge-shadow), 0 0 20px rgba(72,180,108,0.22), 0 0 40px rgba(72,180,108,0.10); }
}

.dev-tools-scope .devtool-card--live {
  animation: dt-live-aura 6s ease-in-out infinite;
}

/* При hover live-card — підсилена аура (override через :hover) */
.dev-tools-scope .devtool-card--live:hover {
  animation: none;
  box-shadow:
    var(--forge-inset),
    var(--forge-shadow),
    0 0 0 1px rgba(72,180,108,0.35),
    0 0 24px rgba(72,180,108,0.28),
    0 0 48px rgba(72,180,108,0.14),
    inset 0 1px 0 rgba(120,220,140,0.08) !important;
}

/* ── §30h prefers-reduced-motion — всі нові §30 анімації ─────────────── */
@media (prefers-reduced-motion: reduce) {
  /* Scrollbar — немає анімацій, лише transition */
  .dev-tools-scope ::-webkit-scrollbar-thumb {
    transition: none;
  }
  /* Cartouche arrive — миттєво */
  .dev-tools-scope .tools-group-header,
  .dev-tools-scope [data-group="monitoring"] .tools-group-header,
  .dev-tools-scope [data-group="docs"] .tools-group-header,
  .dev-tools-scope [data-group="dev"] .tools-group-header {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  /* Card entrance — вимкнено */
  .dev-tools-scope .devtool-card--live,
  .dev-tools-scope .devtool-card--live:nth-child(1),
  .dev-tools-scope .devtool-card--live:nth-child(2),
  .dev-tools-scope .devtool-card--live:nth-child(3),
  .dev-tools-scope .devtool-card--live:nth-child(4),
  .dev-tools-scope .devtool-card--live:nth-child(5) {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .dev-tools-scope .devtools-tools-grid .devtool-card:nth-child(1),
  .dev-tools-scope .devtools-tools-grid .devtool-card:nth-child(2),
  .dev-tools-scope .devtools-tools-grid .devtool-card:nth-child(3),
  .dev-tools-scope .devtools-tools-grid .devtool-card:nth-child(4),
  .dev-tools-scope .devtools-tools-grid .devtool-card:nth-child(5),
  .dev-tools-scope .devtools-tools-grid .devtool-card:nth-child(6) {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  /* Active press — без transform */
  .dev-tools-scope .devtool-card:active {
    transform: none !important;
    transition: none !important;
  }
  /* Tooltip — без transition */
  .dev-tools-scope [data-tooltip]::after,
  .dev-tools-scope [data-tooltip]::before {
    transition: none !important;
  }
  /* Live aura — вимкнено */
  .dev-tools-scope .devtool-card--live:not(:hover) {
    animation: none !important;
    box-shadow: var(--forge-inset), var(--forge-shadow) !important;
  }
  /* dt-cartouche-arrive — skip */
  .dev-tools-scope .tools-group-header {
    animation: none !important;
    filter: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   §31  BOOT SEQUENCE OVERLAY
   Fullscreen, ~1.5s, fade-out after dt-boot-done on body
   ═══════════════════════════════════════════════════════════════════════ */

/* prefers-reduced-motion: skip overlay entirely */
@media (prefers-reduced-motion: reduce) {
  .dev-tools-scope #dt-boot-overlay {
    display: none !important;
  }
}

#dt-boot-overlay {
  position: fixed;
  inset: 0;
  z-index: 9900;
  background:
    linear-gradient(180deg, #0d0907 0%, #14100c 60%, #0d0907 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: opacity 0.55s ease, filter 0.55s ease;
  pointer-events: all;
}

/* Труби-trim горизонтальні — "запалюються" зверху і знизу */
#dt-boot-overlay::before,
#dt-boot-overlay::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--accent-brass-dim) 15%,
    var(--accent-brass) 35%,
    var(--accent-ember) 50%,
    var(--accent-brass) 65%,
    var(--accent-brass-dim) 85%,
    transparent 100%
  );
  animation: dt-boot-pipe-light 1.0s ease-out forwards;
}

#dt-boot-overlay::before { top: 0; }
#dt-boot-overlay::after  { bottom: 0; animation-delay: 0.2s; }

@keyframes dt-boot-pipe-light {
  0%   { opacity: 0; transform: scaleX(0.1); }
  60%  { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0.6; transform: scaleX(1); }
}

/* Центральний cartouche */
.dt-boot-cartouche {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border-metal);
  border-top: 2px solid var(--accent-brass);
  border-bottom: 2px solid var(--accent-brass);
  padding: 32px 56px;
  background: var(--bg-surface);
  box-shadow:
    0 0 40px rgba(197, 139, 58, 0.12),
    0 0 80px rgba(227, 111, 61, 0.06),
    inset 0 1px 0 rgba(197, 139, 58, 0.15),
    inset 0 -1px 0 rgba(197, 139, 58, 0.08);
  animation: dt-boot-cartouche-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
}

@keyframes dt-boot-cartouche-in {
  0%   { opacity: 0; transform: scaleY(0.85) translateY(12px); filter: blur(4px); }
  100% { opacity: 1; transform: scaleY(1) translateY(0); filter: blur(0); }
}

.dt-boot-title {
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--accent-brass);
  text-transform: uppercase;
  text-shadow: 0 0 20px rgba(197, 139, 58, 0.45);
}

.dt-boot-sub {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Pulsing ember dot */
.dt-boot-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--accent-ember);
  animation: dt-boot-dot-pulse 0.9s ease-in-out infinite;
}

@keyframes dt-boot-dot-pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.7); }
  50%       { opacity: 1;   transform: scale(1.2); box-shadow: 0 0 6px var(--accent-ember); }
}

/* Прогрес-бар */
.dt-boot-progress-wrap {
  width: 240px;
  height: 6px;
  background: var(--bg-void);
  border: 1px solid var(--border-dim);
  overflow: hidden;
}

.dt-boot-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-ember-dim), var(--accent-ember), var(--accent-brass));
  width: 0%;
  animation: dt-boot-progress-fill 1.1s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
  box-shadow: 0 0 8px var(--accent-ember);
}

@keyframes dt-boot-progress-fill {
  0%   { width: 0%; }
  100% { width: 100%; }
}

/* Коли body.dt-boot-done — overlay ховається */
body.dt-boot-done #dt-boot-overlay {
  opacity: 0;
  filter: blur(6px);
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   §32  SELECTION STYLING (CSS-only)
   amber highlight для виділеного тексту
   ═══════════════════════════════════════════════════════════════════════ */

.dev-tools-scope ::selection {
  background: var(--accent-ember);
  color: var(--bg-void);
}

.dev-tools-scope ::-moz-selection {
  background: var(--accent-ember);
  color: var(--bg-void);
}

/* ═══════════════════════════════════════════════════════════════════════
   §33  :FOCUS-VISIBLE KEYBOARD NAVIGATION RINGS
   Brass shield rim + ember-glow, тільки при keyboard navigation
   ═══════════════════════════════════════════════════════════════════════ */

.dev-tools-scope a:focus-visible,
.dev-tools-scope button:focus-visible,
.dev-tools-scope input:focus-visible,
.dev-tools-scope select:focus-visible,
.dev-tools-scope [tabindex]:focus-visible {
  outline: 2px dashed var(--border-focus);
  outline-offset: 4px;
  box-shadow:
    0 0 0 3px rgba(197, 139, 58, 0.18),
    0 0 12px rgba(197, 139, 58, 0.12);
}

/* Картки потребують окремого скидання outline — мають власний border-radius */
.dev-tools-scope .devtool-card:focus-visible {
  outline: 2px dashed var(--border-focus);
  outline-offset: 3px;
  box-shadow:
    var(--forge-inset),
    var(--forge-shadow),
    0 0 0 2px rgba(197, 139, 58, 0.25),
    0 0 16px rgba(197, 139, 58, 0.14);
}

/* ═══════════════════════════════════════════════════════════════════════
   §34  DECORATIVE ENGRAVED FRIEZE
   Тонкі горизонтальні орнаментальні стрічки між секціями
   ═══════════════════════════════════════════════════════════════════════ */

/* Frieze під hero-header (після section--live) */
.dev-tools-scope .devtools-section--live::after {
  content: '';
  display: block;
  height: 10px;
  margin: 20px -24px -4px;
  background:
    repeating-linear-gradient(
      90deg,
      transparent           0px,
      transparent           14px,
      rgba(92, 68, 48, 0.28) 14px,
      rgba(92, 68, 48, 0.28) 15px,
      transparent           15px,
      transparent           22px,
      rgba(197, 139, 58, 0.12) 22px,
      rgba(197, 139, 58, 0.12) 24px,
      transparent           24px,
      transparent           29px,
      rgba(92, 68, 48, 0.28) 29px,
      rgba(92, 68, 48, 0.28) 30px
    );
}

/* Frieze між categories (перед footer, через pseudo на devtools-main) */
.dev-tools-scope .devtools-main::before {
  content: '';
  display: block;
  height: 8px;
  margin: 0 0 0 0;
  background:
    repeating-linear-gradient(
      90deg,
      transparent           0px,
      transparent           10px,
      rgba(92, 68, 48, 0.22) 10px,
      rgba(92, 68, 48, 0.22) 11px,
      transparent           11px,
      transparent           18px,
      rgba(197, 139, 58, 0.09) 18px,
      rgba(197, 139, 58, 0.09) 20px
    );
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   §35  SCROLL PROGRESS BAROMETER
   Вертикальний gauge-stick у правому верхньому куті (fixed)
   CSS animation-timeline (scroll) з JS fallback через --scroll-progress
   ═══════════════════════════════════════════════════════════════════════ */

.dt-scroll-barometer {
  position: fixed;
  right: 14px;
  top: 112px;   /* під балкою (96px) + 16px gap */
  width: 10px;
  height: 80px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  pointer-events: none;
}

/* Зовнішня трубка */
.dt-scroll-barometer-tube {
  position: relative;
  width: 8px;
  height: 64px;
  background: var(--bg-void);
  border: 1px solid var(--border-metal);
  overflow: hidden;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.6),
    0 0 4px rgba(0,0,0,0.4);
}

/* Fluid — заповнення через JS custom property */
.dt-scroll-barometer-fluid {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(0deg, var(--accent-ember-dim), var(--accent-ember));
  height: calc(var(--scroll-progress, 0) * 1%);
  box-shadow: 0 0 6px var(--accent-ember);
  transition: height 0.1s linear;
}

/* Тики — ¼ ½ ¾ */
.dt-scroll-barometer-ticks {
  position: absolute;
  top: 0;
  right: -8px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8px 0;
}

.dt-scroll-barometer-tick {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 6px;
  color: var(--text-muted);
  line-height: 1;
  letter-spacing: 0;
}

/* CSS scroll-timeline support (прогресивне покращення) */
@supports (animation-timeline: scroll()) {
  .dt-scroll-barometer-fluid {
    animation: dt-scroll-fill linear;
    animation-timeline: scroll(root);
    animation-fill-mode: both;
    height: auto;
  }

  @keyframes dt-scroll-fill {
    from { transform: scaleY(0); transform-origin: bottom; }
    to   { transform: scaleY(1); transform-origin: bottom; }
  }
}

/* Підпис знизу */
.dt-scroll-barometer-cap {
  width: 12px;
  height: 4px;
  background: var(--accent-brass-dim);
  border: 1px solid var(--border-metal);
  margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  .dt-scroll-barometer-fluid {
    transition: none !important;
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   §36  BACK-TO-TOP STEAMPUNK LEVER
   Brass lever-handle у правому нижньому куті
   Зявляється через body.dt-show-top
   ═══════════════════════════════════════════════════════════════════════ */

.dt-top-lever {
  position: fixed;
  right: 20px;
  bottom: 28px;
  z-index: 300;
  width: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

body.dt-show-top .dt-top-lever {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

/* Монтажна plate */
.dt-top-lever-plate {
  width: 40px;
  height: 40px;
  background:
    linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-surface) 100%);
  border: 1px solid var(--border-metal);
  border-top: 2px solid var(--accent-brass-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow:
    var(--forge-shadow),
    inset 0 1px 0 rgba(197, 139, 58, 0.12);
}

/* 4 hex-bolts на plate */
.dt-top-lever-plate::before,
.dt-top-lever-plate::after {
  content: '⬡ ⬡';
  position: absolute;
  top: 2px;
  font-size: 6px;
  color: var(--pewter-mid);
  letter-spacing: 12px;
  left: 3px;
}
.dt-top-lever-plate::after {
  top: auto;
  bottom: 2px;
}

/* Рукоятка важеля */
.dt-top-lever-handle {
  width: 8px;
  height: 22px;
  background: linear-gradient(
    90deg,
    var(--accent-brass-dim) 0%,
    var(--accent-brass) 35%,
    var(--accent-brass-bright, #e8c860) 50%,
    var(--accent-brass) 65%,
    var(--accent-brass-dim) 100%
  );
  border: 1px solid var(--accent-brass-dim);
  box-shadow:
    0 2px 8px rgba(197, 139, 58, 0.28),
    inset 0 1px 0 rgba(255,255,255,0.1);
  transform-origin: bottom center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  order: -1;
  margin-bottom: 0;
}

/* Мітка TOP */
.dt-top-lever-label {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 7px;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-top: 4px;
}

/* Hover — нахил рукоятки + ember glow */
.dt-top-lever:hover .dt-top-lever-handle {
  transform: rotate(-8deg);
  box-shadow:
    0 4px 16px rgba(227, 111, 61, 0.4),
    0 2px 8px rgba(197, 139, 58, 0.3),
    inset 0 1px 0 rgba(255,255,255,0.15);
}

.dt-top-lever:hover .dt-top-lever-plate {
  border-color: var(--accent-brass);
  box-shadow:
    var(--forge-shadow),
    0 0 12px rgba(197, 139, 58, 0.22),
    inset 0 1px 0 rgba(197, 139, 58, 0.2);
}

/* Active press */
.dt-top-lever:active .dt-top-lever-handle {
  transform: rotate(8deg);
  box-shadow: 0 1px 4px rgba(197, 139, 58, 0.2);
}

/* Pulse animation після кліку */
@keyframes dt-lever-pulse {
  0%   { box-shadow: var(--forge-shadow), 0 0 0 0 rgba(227, 111, 61, 0.5); }
  70%  { box-shadow: var(--forge-shadow), 0 0 0 10px rgba(227, 111, 61, 0); }
  100% { box-shadow: var(--forge-shadow), 0 0 0 0 rgba(227, 111, 61, 0); }
}

.dt-top-lever-plate.dt-lever-clicked {
  animation: dt-lever-pulse 0.6s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .dt-top-lever {
    transition: opacity 0.15s ease !important;
    transform: none !important;
  }
  body.dt-show-top .dt-top-lever { transform: none !important; }
  .dt-top-lever:hover .dt-top-lever-handle { transform: none !important; }
  .dt-top-lever:active .dt-top-lever-handle { transform: none !important; }
  .dt-top-lever-plate.dt-lever-clicked { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   §37  VERSION / BUILD CHIPS  (::after pseudo, data-card-mark)
   Маленька brass-плашка у правому верхньому куті картки
   Управляється CSS custom property --dt-card-mark (дефолт: MK-I)
   ═══════════════════════════════════════════════════════════════════════ */

.dev-tools-scope .devtool-card {
  --dt-card-mark: "MK-I";
}

/* Monitoring cards */
.dev-tools-scope .devtool-card[data-category="monitoring"] { --dt-card-mark: "MK-II"; }
.dev-tools-scope .devtool-card[data-category="docs"]       { --dt-card-mark: "MK-III"; }
.dev-tools-scope .devtool-card[data-category="dev"]        { --dt-card-mark: "R-04"; }
.dev-tools-scope .devtool-card[data-category="pay"]        { --dt-card-mark: "PAY-I"; }
.dev-tools-scope .devtool-card--live                       { --dt-card-mark: "LIVE"; }

.dev-tools-scope .devtool-card::after {
  content: var(--dt-card-mark);
  position: absolute;
  top: 6px;
  right: 28px;   /* не перекрити rivet--tr */
  bottom: auto;  /* скидаємо bottom:0 від §28h inset:0 */
  left: auto;    /* скидаємо left:0 від §28h inset:0 */
  width: auto;
  height: auto;
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 7px;
  font-weight: 400;
  letter-spacing: 0.10em;
  color: var(--pewter-mid);
  background: var(--bg-void);
  border: 1px solid var(--border-dim);
  padding: 1px 4px;
  pointer-events: none;
  z-index: 2;
  text-transform: uppercase;
  line-height: 1.4;
}

/* Hover — brass highlight */
.dev-tools-scope .devtool-card:hover::after {
  color: var(--accent-brass-dim);
  border-color: var(--accent-brass-dim);
}

/* ═══════════════════════════════════════════════════════════════════════
   §39  NEW §31-§38 ANIMATIONS — prefers-reduced-motion guard
   ═══════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  #dt-boot-overlay {
    display: none !important;
  }
  .dt-boot-cartouche,
  .dt-boot-progress-bar,
  .dt-boot-dot,
  #dt-boot-overlay::before,
  #dt-boot-overlay::after {
    animation: none !important;
  }
  .dt-scroll-barometer { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   §40  HUB-SPECIFIC HEADER — канонічна 96px балка
   Action-buttons вбудовані inline у dt-header-row-top праворуч від vitals.
   Другого рядку немає — всі елементи в одному row.
   ═══════════════════════════════════════════════════════════════════════ */

/* Hub header = канонічна висота 96px (без override) */
body.dev-tools-scope.al-page {
  --header-h: 96px;
}

/* ═══════════════════════════════════════════════════════════════════════
   §40b  BRASS CONTROL BAR — нижній шар балки (Варіант B)
   6 brass-pushbuttons вмонтованих у нижній шар балки.
   Висота балки лишається 96px — нижні 34px це зона control bar.
   ═══════════════════════════════════════════════════════════════════════ */

/* Control bar — нижня зона балки з 6 brass-pushbuttons.
   Позиціонований absolute в нижніх 34px балки (з 96px загальної висоти).
   z-index: 20 — вище al-crest (z:5) і al-crest-body (z:5), щоб кнопки
   не перекривалися логотипом і al-crest-meta (bottom:-14px).
   Верхній рядок (vitals/crest) залишається в зоні 0-62px. */
.dev-tools-scope .devtools-hdr-control-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 160px;
  height: 34px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: 1px solid rgba(92, 68, 48, 0.55);
  background:
    linear-gradient(180deg,
      rgba(20, 14, 8, 0.60) 0%,
      rgba(30, 22, 14, 0.75) 100%
    );
  overflow: visible;
  pointer-events: auto;
  z-index: 20;
}

/* Hammered texture рядок у control bar */
.dev-tools-scope .devtools-hdr-control-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 3px,
      rgba(92, 68, 48, 0.04) 3px,
      rgba(92, 68, 48, 0.04) 4px
    );
  pointer-events: none;
}

/* Inline actions — залишаємо у row-top, але без перевантаження */
.dev-tools-scope .devtools-hdr-actions {
  display: none; /* замінено на devtools-hdr-control-bar */
}

/* ── BRASS PUSHBUTTON — основний компонент ── */
.dev-tools-scope .dt-brass-pushbtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  position: relative;
  padding: 0 12px;
  height: 24px;
  background:
    radial-gradient(ellipse at 50% 25%, rgba(245, 232, 176, 0.18) 0%, transparent 60%),
    linear-gradient(180deg,
      rgba(197, 139, 58, 0.28) 0%,
      rgba(138, 90, 34, 0.45) 45%,
      rgba(58, 32, 16, 0.60) 100%
    );
  border: 1px solid rgba(197, 139, 58, 0.55);
  border-top-color: rgba(240, 220, 140, 0.35);
  border-bottom-color: rgba(30, 12, 4, 0.80);
  border-radius: 2px;
  color: var(--text-muted, #8a7060);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  flex-shrink: 0;
  /* Rivet inset shadow */
  box-shadow:
    inset 0 1px 0 rgba(240, 220, 140, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.60),
    inset 0 2px 4px rgba(0, 0, 0, 0.35),
    0 1px 2px rgba(0, 0, 0, 0.50);
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.12s ease;
}

/* Hex-bolts по 4 кутах кнопки */
.dev-tools-scope .dt-brass-pushbtn::before,
.dev-tools-scope .dt-brass-pushbtn::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle at 35% 30%, rgba(240, 220, 140, 0.70) 0%, rgba(106, 62, 24, 0.90) 65%, rgba(30, 12, 4, 1) 100%);
  border-radius: 1px;
  top: 3px;
}

.dev-tools-scope .dt-brass-pushbtn::before { left: 4px; }
.dev-tools-scope .dt-brass-pushbtn::after  { right: 4px; }

/* Нижні болти через span-декор */
.dev-tools-scope .dt-brass-pushbtn .pb-bolt-bl,
.dev-tools-scope .dt-brass-pushbtn .pb-bolt-br {
  position: absolute;
  bottom: 3px;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle at 35% 30%, rgba(240, 220, 140, 0.55) 0%, rgba(106, 62, 24, 0.90) 65%, rgba(30, 12, 4, 1) 100%);
  border-radius: 1px;
  pointer-events: none;
}

.dev-tools-scope .dt-brass-pushbtn .pb-bolt-bl { left: 4px; }
.dev-tools-scope .dt-brass-pushbtn .pb-bolt-br { right: 4px; }

/* Icon у кнопці */
.dev-tools-scope .dt-brass-pushbtn .material-symbols-outlined {
  font-size: 14px;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
  line-height: 1;
  flex-shrink: 0;
  color: var(--text-muted, #8a7060);
  transition: color 0.15s ease;
}

/* Label кнопки */
.dev-tools-scope .dt-brass-pushbtn .pb-label {
  font-family: 'Oswald', var(--font-ui, sans-serif);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted, #8a7060);
  transition: color 0.15s ease;
  line-height: 1;
}

/* HOVER — brass світліє, ember glow під кнопкою */
.dev-tools-scope .dt-brass-pushbtn:hover {
  background:
    radial-gradient(ellipse at 50% 25%, rgba(245, 232, 176, 0.28) 0%, transparent 60%),
    linear-gradient(180deg,
      rgba(220, 168, 80, 0.40) 0%,
      rgba(165, 110, 46, 0.55) 45%,
      rgba(80, 48, 20, 0.70) 100%
    );
  border-color: rgba(220, 168, 80, 0.75);
  border-top-color: rgba(255, 240, 160, 0.50);
  color: var(--text-body, #bfa37a);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 160, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.65),
    inset 0 2px 4px rgba(0, 0, 0, 0.30),
    0 0 10px rgba(197, 139, 58, 0.35),
    0 0 20px rgba(197, 139, 58, 0.15),
    0 2px 4px rgba(0, 0, 0, 0.55);
}

.dev-tools-scope .dt-brass-pushbtn:hover .material-symbols-outlined,
.dev-tools-scope .dt-brass-pushbtn:hover .pb-label {
  color: var(--text-body, #bfa37a);
}

/* ACTIVE/PRESSED — глибокий inset */
.dev-tools-scope .dt-brass-pushbtn:active {
  transform: translateY(1px);
  background:
    radial-gradient(ellipse at 50% 75%, rgba(245, 232, 176, 0.10) 0%, transparent 60%),
    linear-gradient(180deg,
      rgba(80, 48, 20, 0.70) 0%,
      rgba(138, 90, 34, 0.40) 55%,
      rgba(197, 139, 58, 0.20) 100%
    );
  border-color: rgba(138, 90, 34, 0.55);
  box-shadow:
    inset 0 3px 6px rgba(0, 0, 0, 0.65),
    inset 0 1px 2px rgba(0, 0, 0, 0.50),
    0 0 0 rgba(197, 139, 58, 0);
}

.dev-tools-scope .dt-brass-pushbtn:active .pb-label {
  color: var(--text-dim, #5c4430);
}

/* FOCUS */
.dev-tools-scope .dt-brass-pushbtn:focus-visible {
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(240, 220, 140, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.60),
    inset 0 2px 4px rgba(0, 0, 0, 0.35),
    0 0 0 2px rgba(197, 139, 58, 0.50);
}

/* ACTIVE STATE (toggle) */
.dev-tools-scope .dt-brass-pushbtn--active {
  background:
    radial-gradient(ellipse at 50% 25%, rgba(245, 232, 176, 0.22) 0%, transparent 60%),
    linear-gradient(180deg,
      rgba(227, 175, 80, 0.35) 0%,
      rgba(165, 110, 46, 0.50) 45%,
      rgba(80, 48, 20, 0.65) 100%
    );
  border-color: rgba(227, 175, 80, 0.70);
  color: var(--accent-brass, #c58b3a);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 160, 0.15),
    inset 0 -1px 0 rgba(0, 0, 0, 0.60),
    inset 0 2px 4px rgba(0, 0, 0, 0.30),
    0 0 12px rgba(197, 139, 58, 0.45);
}

.dev-tools-scope .dt-brass-pushbtn--active .material-symbols-outlined,
.dev-tools-scope .dt-brass-pushbtn--active .pb-label {
  color: var(--accent-brass, #c58b3a);
}

/* ── NIXIE COUNTER у кнопці (Алерти / Нотатки) ── */
.dev-tools-scope .dt-btn-nixie {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 3px;
  background: radial-gradient(circle at 50% 60%, rgba(227, 111, 61, 0.18) 0%, rgba(10, 7, 4, 0.85) 75%);
  border: 1px solid rgba(197, 139, 58, 0.35);
  border-radius: 1px;
  position: relative;
}

.dev-tools-scope .dt-btn-nixie::before {
  content: '';
  position: absolute;
  inset: 1px;
  background: radial-gradient(circle at 50% 60%, rgba(227, 111, 61, 0.10) 0%, transparent 70%);
  pointer-events: none;
}

.dev-tools-scope .dt-btn-nixie-val {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 9px;
  font-weight: 700;
  color: var(--accent-ember, #e36f3d);
  text-shadow:
    0 0 4px rgba(227, 111, 61, 0.80),
    0 0 8px rgba(227, 111, 61, 0.35);
  line-height: 1;
  letter-spacing: 0;
  position: relative;
  z-index: 1;
  animation: nixie-flicker 6s ease-in-out infinite;
}

/* Nixie counter hidden by default */
.dev-tools-scope .dt-btn-nixie[hidden] {
  display: none !important;
}

/* Separator між кнопками у control bar */
.dev-tools-scope .pb-separator {
  width: 1px;
  height: 16px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(92, 68, 48, 0.55) 30%,
    rgba(92, 68, 48, 0.55) 70%,
    transparent 100%
  );
  flex-shrink: 0;
}

/* prefers-reduced-motion для control bar */
@media (prefers-reduced-motion: reduce) {
  .dev-tools-scope .dt-btn-nixie-val {
    animation: none !important;
  }
  .dev-tools-scope .dt-brass-pushbtn {
    transition: none !important;
  }
}

/* Legacy notif-badge всередині dt-brass-pushbtn — прихований, замінений Nixie */
.dev-tools-scope .dt-brass-pushbtn .notif-badge {
  display: none !important;
}

/* Legacy dt-action-item — залишаємо для сумісності JS (display:none через .devtools-hdr-actions) */
.dev-tools-scope .dt-action-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--forge-radius, 2px);
  color: var(--text-muted);
  font-family: var(--font-ui, 'Barlow', sans-serif);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  user-select: none;
  white-space: nowrap;
  position: relative;
}

/* Notification bell badge (legacy + новий .dt-btn-nixie) */
.dev-tools-scope .dt-action-item .notif-badge {
  position: absolute;
  top: 1px;
  right: 2px;
  min-width: 13px;
  height: 13px;
  background: var(--log-critical, #c14418);
  color: var(--text-bright, #f3efdc);
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2px;
  line-height: 1;
  animation: forge-pulse 2s ease-in-out infinite;
}

/* Label текст action item */
.dev-tools-scope .dt-action-label {
  font-family: var(--font-ui, 'Barlow', sans-serif);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════════
   §41  LIVE CARD FIXES — видимість через animation conflict
   dt-card-arrive (nth-child) та dt-live-aura конкурують.
   Забезпечуємо що opacity завжди 1 після завершення entrance.
   ═══════════════════════════════════════════════════════════════════════ */

/* Live картки: animation-fill-mode forwards (не both) — прибирає opacity:0
   під час delay. Картки завжди видимі, лише translateY анімується. */
.dev-tools-scope .devtool-card--live:nth-child(1),
.dev-tools-scope .devtool-card--live:nth-child(2),
.dev-tools-scope .devtool-card--live:nth-child(3),
.dev-tools-scope .devtool-card--live:nth-child(4),
.dev-tools-scope .devtool-card--live:nth-child(5) {
  animation-fill-mode: forwards !important;
}

/* Tools-grid картки: те ж саме — forwards щоб запобігти opacity:0 до стартe */
.dev-tools-scope .devtools-tools-grid .devtool-card:nth-child(1),
.dev-tools-scope .devtools-tools-grid .devtool-card:nth-child(2),
.dev-tools-scope .devtools-tools-grid .devtool-card:nth-child(3),
.dev-tools-scope .devtools-tools-grid .devtool-card:nth-child(4),
.dev-tools-scope .devtools-tools-grid .devtool-card:nth-child(5),
.dev-tools-scope .devtools-tools-grid .devtool-card:nth-child(6) {
  animation-fill-mode: forwards !important;
}

/* Переконатись що devtool-card--live отримує правильний ::after content */
.dev-tools-scope .devtool-card--live::after {
  content: var(--dt-card-mark, "LIVE") !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   §42  ENHANCED TOOL GRID — більша щільність карток
   ═══════════════════════════════════════════════════════════════════════ */

/* tools-grid — стабільна 3-колонкова сітка */
.dev-tools-scope .devtools-tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

@media (max-width: 1100px) {
  .dev-tools-scope .devtools-tools-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .dev-tools-scope .devtools-tools-grid {
    grid-template-columns: 1fr;
  }
}

/* Debug card wide — повна ширина у 3-колонковій сітці */
.dev-tools-scope .devtool-card--bento-wide {
  grid-column: 1 / -1;
}

/* ═══════════════════════════════════════════════════════════════════════
   §43  BACK-PANEL POSITIONING FIX
   al-back-panel розташований після </header>.
   dt-chronograph.css використовує calc(var(--header-h)/2) для годинника,
   тому при --header-h:140px він автоматично центрується у верхніх 96px.
   Але годинник має бути у верхній половині (back+vitals зона), не center.
   ═══════════════════════════════════════════════════════════════════════ */

/* Clock panel і back panel — центруємо у верхній частині балки (рядок vitals 0-96px).
   dt-chronograph.css і dt-backarrow.css обраховують top:calc(var(--header-h)/2)=70px при 140px.
   Ми хочемо обидва елементи на top:48px (центр верхнього рядку 0-96px з transform:-50%). */
body.dev-tools-scope.al-page .al-clock-panel,
body.dev-tools-scope.al-page .al-back-panel {
  top: 48px !important;
}

/* prefers-reduced-motion guard для §40-§43 */
@media (prefers-reduced-motion: reduce) {
  .dev-tools-scope .notif-badge {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   §45  VISUAL POLISH PASS — Hover depth, live scanlines, boot stagger,
        parallax, easter-egg clock glow, reduced-motion upgrade
   ═══════════════════════════════════════════════════════════════════════ */

/* ── §45a DEVTOOL-CARD — enhanced hover lift & ember glow ─────────────
   Lift: translateY(-2px) + vertical bottom-glow. All via composited
   transform + opacity — no top/left/width changes for perf.            */

/* Перевизначаємо transition щоб включити transform */
.dev-tools-scope .devtool-card {
  transition:
    background 0.25s cubic-bezier(0.4, 0.0, 0.2, 1),
    border-color 0.25s cubic-bezier(0.4, 0.0, 0.2, 1),
    box-shadow 0.25s cubic-bezier(0.4, 0.0, 0.2, 1),
    transform 0.25s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
}

.dev-tools-scope .devtool-card:hover {
  transform: translateY(-2px) !important;
}

/* Ember glow — CSS-only через background-image transition.
   На hover додаємо radial-gradient поверх base bg через background-image,
   використовуючи вже встановлений border-box gradient trick з §29d.
   Окремий ::before вже є (top highlight), ::after зайнятий MK-chip.
   Тому реалізуємо через посилений box-shadow + outline-glow variant.    */

/* Card hover: посилений ambient glow (підсилення §29h) */
.dev-tools-scope .devtool-card:hover {
  box-shadow:
    var(--forge-inset),
    var(--forge-shadow),
    0 0 0 1px rgba(197, 139, 58, 0.22),
    0 4px 20px rgba(197, 139, 58, 0.14),
    0 8px 32px rgba(197, 139, 58, 0.06),
    inset 0 -2px 0 rgba(0,0,0,0.50),
    inset 2px 0 0 rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,230,120,0.06),
    inset -1px 0 0 rgba(255,255,255,0.03) !important;
}

/* Icon shimmer на hover */
.dev-tools-scope .devtool-card:hover .devtool-icon {
  box-shadow:
    var(--forge-inset),
    0 0 12px rgba(227, 111, 61, 0.40),
    0 0 6px rgba(197, 139, 58, 0.30) !important;
  transition: box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease !important;
}

/* Arrow slide 4px (поліпшено з 3px) + easing */
.dev-tools-scope .devtool-card:hover .devtool-arrow {
  transform: translateX(4px) !important;
  transition: color 0.20s ease, transform 0.20s ease !important;
}

/* Title brass underline на hover */
.dev-tools-scope .devtool-card:hover .devtool-title::after {
  content: '';
  display: block;
  height: 1px;
  margin-top: 3px;
  background: linear-gradient(90deg,
    var(--accent-brass-dim) 0%,
    transparent 100%
  );
  opacity: 0.55;
}

/* Left border посилення: 1px → 3px уже є, посилюємо яскравість */
.dev-tools-scope .devtool-card[data-category="monitoring"]:hover {
  border-left-width: 3px !important;
  border-left-color: rgba(72, 200, 120, 0.75) !important;
}
.dev-tools-scope .devtool-card[data-category="docs"]:hover {
  border-left-width: 3px !important;
  border-left-color: rgba(220, 168, 80, 0.80) !important;
}
.dev-tools-scope .devtool-card[data-category="dev"]:hover {
  border-left-width: 3px !important;
  border-left-color: rgba(220, 110, 50, 0.80) !important;
}

/* ── §45b LIVE-CARDS SCANLINE EFFECT ──────────────────────────────────
   Тонка горизонтальна лінія повільно проходить картку zgori-vnyzu.
   Реалізація: position:absolute кастом-::after через окремий елемент.
   CSS-only: animation з translateY(-100%)→translateY(110%).             */

/* scanline-host потрібен окремий елемент (::after вже зайнятий MK-chip) */
.dev-tools-scope .live-card-scanline {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
  z-index: 1;
}

.dev-tools-scope .live-card-scanline::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(107, 142, 78, 0.22) 25%,
    rgba(107, 142, 78, 0.35) 50%,
    rgba(107, 142, 78, 0.22) 75%,
    transparent 100%
  );
  opacity: 0.6;
  animation: dt-scanline-traverse 6s linear infinite;
}

@keyframes dt-scanline-traverse {
  0%   { transform: translateY(0); }
  100% { transform: translateY(calc(var(--live-card-h, 240px) + 2px)); }
}

/* На hover пришвидшення scanline до ~2s */
.dev-tools-scope .devtool-card--live:hover .live-card-scanline::after {
  animation-duration: 2s !important;
}

/* Live-dot breathing (2s breathing effect) */
.dev-tools-scope .live-dot {
  animation: dt-live-dot-breath 2s ease-in-out infinite !important;
}

@keyframes dt-live-dot-breath {
  0%, 100% { opacity: 1;    box-shadow: 0 0 4px rgba(227, 111, 61, 0.55); transform: scale(1); }
  50%       { opacity: 0.60; box-shadow: 0 0 2px rgba(227, 111, 61, 0.25); transform: scale(0.85); }
}

/* ── §45c ENHANCED SECTION DIVIDERS — brass center marker ─────────────
   Підсилюємо центральний елемент розділювача: brass-dot посередині
   + анімована мерехтлива латунна частинка                              */

.dev-tools-scope .tools-sd-valve {
  position: relative;
}

/* Brass pulse marker — периодичний спалах у центрі клапану */
.dev-tools-scope .tools-sd-rivet {
  animation: dt-rivet-glint 8s ease-in-out infinite;
}

.dev-tools-scope .tools-sd-center .tools-sd-rivet:first-child {
  animation-delay: 0s;
}
.dev-tools-scope .tools-sd-center .tools-sd-rivet:last-child {
  animation-delay: 4s;
}

@keyframes dt-rivet-glint {
  0%, 90%, 100% { opacity: 0.70; }
  92%            { opacity: 1.00; box-shadow: 0 0 6px rgba(197, 139, 58, 0.55); }
  94%            { opacity: 0.85; }
  96%            { opacity: 1.00; box-shadow: 0 0 4px rgba(197, 139, 58, 0.40); }
}

/* Pipe в divider — subtle glow drift */
.dev-tools-scope .tools-sd-pipe {
  animation: dt-pipe-shimmer 10s ease-in-out infinite;
}

.dev-tools-scope .tools-section-divider .tools-sd-pipe:last-child {
  animation-delay: 5s;
}

@keyframes dt-pipe-shimmer {
  0%, 100% { opacity: 0.85; }
  50%       { opacity: 1.00; }
}

/* ── §45d PARALLAX EDISON LAMPS (CSS-only via --scroll-y) ─────────────
   JS snippet у HTML оновлює --scroll-y на root при кожному scroll.
   Layer 1 (halo плями): parallax 0.3x — рухаються швидше.
   Layer 2 (основна Edison рейка): 0.1x — ледь рухається.
   Layer 4 (cage bulbs): 0.05x — майже статичні.
   will-change: transform для composited rendering.                       */

.dev-tools-scope .al-bg-scene {
  will-change: transform;
}

/* Halo-плями (перший шар background гало) */
.dev-tools-scope .hub-bg-scene .al-sv-lamp-halo {
  transform: translateY(calc(var(--scroll-y, 0px) * -0.3)) !important;
  will-change: transform;
}

/* Основна рейка — мінімальний parallax */
.dev-tools-scope .hub-bg-scene .al-sv-lamp-body {
  transform: translateY(calc(var(--scroll-y, 0px) * -0.1)) !important;
  will-change: transform;
}

/* ── §45e BOOT STAGGER — groups + card cascade ─────────────────────────
   LIVE-секція: delay 0. Monitoring: delay 200ms. Docs: 400ms. Dev: 600ms.
   Cascade всередині кожної групи: +50ms per card (nth-child).
   animation-fill-mode: forwards !important зберігаємо з §41.            */

/* Groups поява — delay за порядком */
.dev-tools-scope [data-group="monitoring"] {
  animation: dt-group-arrive 0.50s cubic-bezier(0.22, 0.61, 0.36, 1) 0.20s both;
}
.dev-tools-scope [data-group="docs"] {
  animation: dt-group-arrive 0.50s cubic-bezier(0.22, 0.61, 0.36, 1) 0.40s both;
}
.dev-tools-scope [data-group="dev"] {
  animation: dt-group-arrive 0.50s cubic-bezier(0.22, 0.61, 0.36, 1) 0.60s both;
}

@keyframes dt-group-arrive {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Card cascade — кожна наступна на 50ms пізніше за базову групи.
   Monitoring (base 0.20s): cards +50ms each
   Docs (base 0.40s): cards +50ms each
   Dev (base 0.60s): cards +50ms each                                   */

/* Monitoring group cards */
.dev-tools-scope [data-group="monitoring"] .devtools-tools-grid .devtool-card:nth-child(1) {
  animation: dt-card-arrive 0.42s cubic-bezier(0.22,0.61,0.36,1) 0.25s both;
}
.dev-tools-scope [data-group="monitoring"] .devtools-tools-grid .devtool-card:nth-child(2) {
  animation: dt-card-arrive 0.42s cubic-bezier(0.22,0.61,0.36,1) 0.30s both;
}
.dev-tools-scope [data-group="monitoring"] .devtools-tools-grid .devtool-card:nth-child(3) {
  animation: dt-card-arrive 0.42s cubic-bezier(0.22,0.61,0.36,1) 0.35s both;
}
.dev-tools-scope [data-group="monitoring"] .devtools-tools-grid .devtool-card:nth-child(4) {
  animation: dt-card-arrive 0.42s cubic-bezier(0.22,0.61,0.36,1) 0.40s both;
}
.dev-tools-scope [data-group="monitoring"] .devtools-tools-grid .devtool-card:nth-child(5) {
  animation: dt-card-arrive 0.42s cubic-bezier(0.22,0.61,0.36,1) 0.45s both;
}

/* Docs group cards */
.dev-tools-scope [data-group="docs"] .devtools-tools-grid .devtool-card:nth-child(1) {
  animation: dt-card-arrive 0.42s cubic-bezier(0.22,0.61,0.36,1) 0.45s both;
}
.dev-tools-scope [data-group="docs"] .devtools-tools-grid .devtool-card:nth-child(2) {
  animation: dt-card-arrive 0.42s cubic-bezier(0.22,0.61,0.36,1) 0.50s both;
}
.dev-tools-scope [data-group="docs"] .devtools-tools-grid .devtool-card:nth-child(3) {
  animation: dt-card-arrive 0.42s cubic-bezier(0.22,0.61,0.36,1) 0.55s both;
}
.dev-tools-scope [data-group="docs"] .devtools-tools-grid .devtool-card:nth-child(4) {
  animation: dt-card-arrive 0.42s cubic-bezier(0.22,0.61,0.36,1) 0.60s both;
}
.dev-tools-scope [data-group="docs"] .devtools-tools-grid .devtool-card:nth-child(5) {
  animation: dt-card-arrive 0.42s cubic-bezier(0.22,0.61,0.36,1) 0.65s both;
}

/* Dev group cards */
.dev-tools-scope [data-group="dev"] .devtools-tools-grid .devtool-card:nth-child(1) {
  animation: dt-card-arrive 0.42s cubic-bezier(0.22,0.61,0.36,1) 0.65s both;
}
.dev-tools-scope [data-group="dev"] .devtools-tools-grid .devtool-card:nth-child(2) {
  animation: dt-card-arrive 0.42s cubic-bezier(0.22,0.61,0.36,1) 0.70s both;
}
.dev-tools-scope [data-group="dev"] .devtools-tools-grid .devtool-card:nth-child(3) {
  animation: dt-card-arrive 0.42s cubic-bezier(0.22,0.61,0.36,1) 0.75s both;
}
.dev-tools-scope [data-group="dev"] .devtools-tools-grid .devtool-card:nth-child(4) {
  animation: dt-card-arrive 0.42s cubic-bezier(0.22,0.61,0.36,1) 0.80s both;
}
.dev-tools-scope [data-group="dev"] .devtools-tools-grid .devtool-card:nth-child(5) {
  animation: dt-card-arrive 0.42s cubic-bezier(0.22,0.61,0.36,1) 0.85s both;
}
.dev-tools-scope [data-group="dev"] .devtools-tools-grid .devtool-card:nth-child(6) {
  animation: dt-card-arrive 0.42s cubic-bezier(0.22,0.61,0.36,1) 0.90s both;
}
.dev-tools-scope [data-group="dev"] .devtools-tools-grid .devtool-card:nth-child(7) {
  animation: dt-card-arrive 0.42s cubic-bezier(0.22,0.61,0.36,1) 0.95s both;
}
.dev-tools-scope [data-group="dev"] .devtools-tools-grid .devtool-card:nth-child(8) {
  animation: dt-card-arrive 0.42s cubic-bezier(0.22,0.61,0.36,1) 1.00s both;
}

/* animation-fill-mode: forwards зберігаємо для всіх нових card-arrive */
.dev-tools-scope [data-group="monitoring"] .devtools-tools-grid .devtool-card,
.dev-tools-scope [data-group="docs"] .devtools-tools-grid .devtool-card,
.dev-tools-scope [data-group="dev"] .devtools-tools-grid .devtool-card {
  animation-fill-mode: forwards !important;
}

/* ── §45f CLOCK PANEL SUBTLE HOVER GLOW ──────────────────────────────
   Easter egg dblclick реалізований через JS + клас .dt-steam-released.
   CSS тут: hover glow на годинникову панель + steam-burst keyframe.     */

body.dev-tools-scope.al-page .al-clock-panel {
  transition: filter 0.20s ease !important;
  cursor: default;
}

body.dev-tools-scope.al-page .al-clock-panel:hover {
  filter:
    drop-shadow(0 0 8px rgba(197, 139, 58, 0.40))
    drop-shadow(0 0 16px rgba(197, 139, 58, 0.18)) !important;
}

/* Steam burst effect — з'являється при dblclick через JS */
.dt-steam-burst {
  position: fixed;
  pointer-events: none;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  animation: dt-steam-burst-rise 1.4s ease-out forwards;
}

.dt-steam-burst-puff {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--accent-brass-dim);
  text-transform: uppercase;
  text-shadow: 0 0 6px rgba(197, 139, 58, 0.50);
  opacity: 0.90;
}

.dt-steam-burst-text {
  font-family: var(--font-ui, 'Barlow', sans-serif);
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--text-muted);
  text-transform: uppercase;
  opacity: 0.70;
}

@keyframes dt-steam-burst-rise {
  0%   { opacity: 1;    transform: translateY(0)    scale(1.0); filter: blur(0px); }
  40%  { opacity: 0.90; transform: translateY(-18px) scale(1.1); filter: blur(0px); }
  80%  { opacity: 0.50; transform: translateY(-36px) scale(1.2); filter: blur(1px); }
  100% { opacity: 0;    transform: translateY(-52px) scale(1.3); filter: blur(3px); }
}

/* ── §45g REDUCED MOTION — guard для всіх §45 additions ──────────────── */
@media (prefers-reduced-motion: reduce) {
  /* Card transition — instant (no duration) */
  .dev-tools-scope .devtool-card {
    transition: none !important;
  }
  /* No lift on hover */
  .dev-tools-scope .devtool-card:hover {
    transform: none !important;
  }
  /* No icon shimmer transition */
  .dev-tools-scope .devtool-card:hover .devtool-icon {
    transition: none !important;
  }
  /* No arrow slide */
  .dev-tools-scope .devtool-card:hover .devtool-arrow {
    transform: none !important;
    transition: none !important;
  }
  /* Scanline — disable */
  .dev-tools-scope .live-card-scanline::after {
    animation: none !important;
    opacity: 0 !important;
  }
  /* Live dot — instant, no breathing */
  .dev-tools-scope .live-dot {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  /* Rivet glint + pipe shimmer — off */
  .dev-tools-scope .tools-sd-rivet,
  .dev-tools-scope .tools-sd-pipe {
    animation: none !important;
    opacity: 1 !important;
  }
  /* Parallax — freeze */
  .dev-tools-scope .hub-bg-scene .al-sv-lamp-halo,
  .dev-tools-scope .hub-bg-scene .al-sv-lamp-body {
    transform: none !important;
  }
  /* Group arrive + card cascade — instant */
  .dev-tools-scope [data-group="monitoring"],
  .dev-tools-scope [data-group="docs"],
  .dev-tools-scope [data-group="dev"],
  .dev-tools-scope [data-group="monitoring"] .devtools-tools-grid .devtool-card,
  .dev-tools-scope [data-group="docs"] .devtools-tools-grid .devtool-card,
  .dev-tools-scope [data-group="dev"] .devtools-tools-grid .devtool-card {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  /* Clock hover glow — disable */
  body.dev-tools-scope.al-page .al-clock-panel {
    transition: none !important;
  }
  body.dev-tools-scope.al-page .al-clock-panel:hover {
    filter: none !important;
  }
  /* Steam burst — instant disappear */
  .dt-steam-burst {
    animation: none !important;
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   §44  LIVE CARD STEAMPUNK VISUALIZATIONS
   CSS-only інструментальні панелі для 5 LIVE-карток.
   Немає зовнішніх залежностей. Анімація через @keyframes.
   Дані оновлюються JS через textContent / CSS custom props.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Загальний контейнер live-viz ── */
.dev-tools-scope .live-viz {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 10px 6px;
  margin-bottom: 8px;
  background: var(--bg-void);
  border: 1px solid var(--border-dim);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

/* Subtle left border accent */
.dev-tools-scope .live-viz::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent-brass-dim);
  opacity: 0.55;
}

/* Blueprint grid texture overlay на viz блок */
.dev-tools-scope .live-viz::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(197,139,58,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(197,139,58,0.04) 1px, transparent 1px);
  background-size: 8px 8px;
  pointer-events: none;
}

.dev-tools-scope .live-viz-label {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pewter-mid);
  line-height: 1;
}

/* ── LIVE-VIZ 1: Response Graph (API Health) ── */

.dev-tools-scope .live-viz--response-graph .live-viz-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 22px;
}

.dev-tools-scope .live-viz--response-graph .lvb {
  flex: 1;
  background: var(--accent-brass-dim);
  border-radius: 1px 1px 0 0;
  opacity: 0.75;
  animation: lvb-flicker 3s ease-in-out infinite;
  min-height: 3px;
}

/* Different heights for each bar — simulates response time sparkline */
.dev-tools-scope .lvb--1 { height: 8px;  animation-delay: 0s;    }
.dev-tools-scope .lvb--2 { height: 14px; animation-delay: 0.4s;  }
.dev-tools-scope .lvb--3 { height: 6px;  animation-delay: 0.8s;  }
.dev-tools-scope .lvb--4 { height: 18px; animation-delay: 1.2s;  }
.dev-tools-scope .lvb--5 { height: 10px; animation-delay: 0.2s;  }
.dev-tools-scope .lvb--6 { height: 4px;  animation-delay: 0.6s;  }
.dev-tools-scope .lvb--7 { height: 12px; animation-delay: 1.0s;  }
.dev-tools-scope .lvb--8 { height: 16px; animation-delay: 1.4s;  background: var(--log-ok); }

@keyframes lvb-flicker {
  0%, 100% { opacity: 0.75; }
  50%       { opacity: 0.45; }
}

.dev-tools-scope .live-viz-readout {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-brass);
  letter-spacing: 0.06em;
  line-height: 1;
  margin-top: 2px;
}

/* ── LIVE-VIZ 2: Arc Gauge Pair (System Monitor) ── */

.dev-tools-scope .live-gauge-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  justify-content: center;
  padding: 2px 0;
}

.dev-tools-scope .live-arc-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.dev-tools-scope .live-arc-svg {
  width: 52px;
  height: 32px;
  display: block;
  overflow: visible;
}

.dev-tools-scope .live-arc-track {
  stroke: var(--border-dim);
}

.dev-tools-scope .live-arc-fill--cpu {
  stroke: var(--log-ok);
  animation: arc-breathe-cpu 4s ease-in-out infinite;
}

.dev-tools-scope .live-arc-fill--ram {
  stroke: var(--accent-brass-dim);
  animation: arc-breathe-ram 5s ease-in-out infinite;
}

@keyframes arc-breathe-cpu {
  0%, 100% { stroke-dashoffset: 35; }
  50%       { stroke-dashoffset: 28; }
}

@keyframes arc-breathe-ram {
  0%, 100% { stroke-dashoffset: 24; }
  50%       { stroke-dashoffset: 20; }
}

.dev-tools-scope .live-arc-label {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 7px;
  letter-spacing: 0.12em;
  color: var(--pewter-mid);
  text-transform: uppercase;
}

/* ── LIVE-VIZ 3: Module Counter + LEDs (Module Manager) ── */

.dev-tools-scope .live-viz--module-counter .live-nixie-counter {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin: 3px 0;
}

.dev-tools-scope .live-nixie-digit {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 26px;
  font-weight: 700;
  color: var(--accent-brass);
  text-shadow:
    0 0 6px rgba(197, 139, 58, 0.6),
    0 0 12px rgba(197, 139, 58, 0.25);
  line-height: 1;
  letter-spacing: -0.02em;
  animation: nixie-flicker 8s ease-in-out infinite;
}

.dev-tools-scope .live-nixie-digit--total {
  font-size: 18px;
  opacity: 0.55;
  animation-delay: 1.5s;
  text-shadow: none;
}

.dev-tools-scope .live-nixie-sep {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 20px;
  color: var(--pewter-mid);
  opacity: 0.55;
  line-height: 1;
}

@keyframes nixie-flicker {
  0%, 96%, 100% { opacity: 1; }
  97%            { opacity: 0.7; }
  98%            { opacity: 1; }
  99%            { opacity: 0.8; }
}

.dev-tools-scope .live-module-leds {
  display: flex;
  gap: 4px;
  align-items: center;
}

.dev-tools-scope .live-led {
  width: 6px;
  height: 6px;
  border-radius: 1px;
  flex-shrink: 0;
}

.dev-tools-scope .live-led--on {
  background: var(--log-ok);
  box-shadow: 0 0 4px rgba(107, 142, 78, 0.7);
  animation: led-pulse 2.5s ease-in-out infinite;
}

.dev-tools-scope .live-led--warn {
  background: var(--log-warn);
  box-shadow: 0 0 4px rgba(197, 130, 58, 0.7);
  animation: led-pulse-warn 1.8s ease-in-out infinite;
}

.dev-tools-scope .live-led--off {
  background: var(--border-dim);
  opacity: 0.4;
}

@keyframes led-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}

@keyframes led-pulse-warn {
  0%, 100% { opacity: 1; box-shadow: 0 0 4px rgba(197,130,58,0.7); }
  50%       { opacity: 0.7; box-shadow: 0 0 8px rgba(197,130,58,0.9); }
}

/* ── LIVE-VIZ 4: Nixie Tube Alert Counter (Alerts Center) ── */

.dev-tools-scope .live-nixie-tube-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 3px 0;
}

.dev-tools-scope .live-nixie-tube {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 38px;
  background: var(--bg-surface);
  border: 1px solid var(--border-metal);
  border-radius: 2px;
  position: relative;
}

/* Inner glow of nixie tube */
.dev-tools-scope .live-nixie-tube::before {
  content: '';
  position: absolute;
  inset: 2px;
  background: radial-gradient(circle at 50% 60%, rgba(227,111,61,0.12) 0%, transparent 75%);
  border-radius: 1px;
  pointer-events: none;
}

.dev-tools-scope .live-nixie-glow {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 24px;
  font-weight: 700;
  color: var(--accent-ember);
  text-shadow:
    0 0 5px rgba(227, 111, 61, 0.85),
    0 0 12px rgba(227, 111, 61, 0.40);
  line-height: 1;
  animation: nixie-flicker 6s ease-in-out infinite;
  position: relative;
  z-index: 1;
}

.dev-tools-scope .live-alert-severity-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.dev-tools-scope .live-severity-pip {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 10px;
  font-weight: 700;
  width: 18px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1px;
  border: 1px solid transparent;
  line-height: 1;
  letter-spacing: 0;
}

.dev-tools-scope .live-severity-pip--crit {
  color: var(--log-critical);
  border-color: var(--log-critical);
  background: rgba(193, 68, 24, 0.12);
}

.dev-tools-scope .live-severity-pip--warn {
  color: var(--log-warn);
  border-color: var(--log-warn);
  background: rgba(197, 130, 58, 0.12);
}

.dev-tools-scope .live-severity-pip--info {
  color: var(--pewter-mid);
  border-color: var(--border-dim);
  background: transparent;
}

/* ── LIVE-VIZ 5: Events/sec Ticker (EventBus Monitor) ── */

.dev-tools-scope .live-ticker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 3px 0;
}

.dev-tools-scope .live-ticker-num {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 22px;
  font-weight: 700;
  color: var(--mod-nexus);
  text-shadow: 0 0 6px rgba(74,149,144,0.5);
  line-height: 1;
  letter-spacing: -0.01em;
  min-width: 44px;
}

.dev-tools-scope .live-ticker-pulses {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.dev-tools-scope .live-pulse-dot {
  width: 28px;
  height: 3px;
  border-radius: 1px;
  background: var(--log-ok);
  opacity: 0.4;
  animation: pulse-sweep 1.6s ease-in-out infinite;
}

.dev-tools-scope .live-pulse-dot--1 { animation-delay: 0s;    opacity: 0.7; width: 28px; }
.dev-tools-scope .live-pulse-dot--2 { animation-delay: 0.32s; opacity: 0.5; width: 22px; }
.dev-tools-scope .live-pulse-dot--3 { animation-delay: 0.64s; opacity: 0.4; width: 16px; }
.dev-tools-scope .live-pulse-dot--4 { animation-delay: 0.96s; opacity: 0.3; width: 10px; }
.dev-tools-scope .live-pulse-dot--5 { animation-delay: 1.28s; opacity: 0.2; width: 6px;  }

@keyframes pulse-sweep {
  0%   { transform: scaleX(1);    opacity: inherit; }
  50%  { transform: scaleX(0.55); opacity: 0.15; }
  100% { transform: scaleX(1);    opacity: inherit; }
}

/* ── prefers-reduced-motion for §44 ── */
@media (prefers-reduced-motion: reduce) {
  .dev-tools-scope .lvb,
  .dev-tools-scope .live-arc-fill--cpu,
  .dev-tools-scope .live-arc-fill--ram,
  .dev-tools-scope .live-nixie-digit,
  .dev-tools-scope .live-nixie-glow,
  .dev-tools-scope .live-led--on,
  .dev-tools-scope .live-led--warn,
  .dev-tools-scope .live-pulse-dot {
    animation: none !important;
  }
}