/* === Shared Dev Tools: Balka (Header) === */
/* Підключається до всіх Dev Tools сторінок. Не містить page-unique стилів. */

/* ============================================================
   DEVTOOLS HEADER — балка
   ============================================================ */
.devtools-header {
  position: sticky;
  top: 0;
  z-index: 500;
  width: 100%;
  height: var(--header-h, 96px);
  background: var(--bg-elevated, #2a2018);
  border-bottom: 1px solid var(--border-metal, rgba(92,68,48,0.55));
  box-shadow:
    0 2px 0 rgba(232, 200, 96, 0.06),
    0 4px 16px rgba(0,0,0,0.65),
    0 8px 32px rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  box-sizing: border-box;
  overflow: visible;
}

.devtools-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(197, 139, 58, 0.4) 20%,
    rgba(232, 200, 96, 0.7) 50%,
    rgba(197, 139, 58, 0.4) 80%,
    transparent 100%
  );
  pointer-events: none;
}

.devtools-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(92, 68, 48, 0.8) 30%,
    rgba(184, 92, 58, 0.4) 50%,
    rgba(92, 68, 48, 0.8) 70%,
    transparent 100%
  );
  pointer-events: none;
}

/* ============================================================
   CORNER BOLTS — dt-bolt
   ============================================================ */
.dt-bolt {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 35%,
    var(--pewter-highlight, #d4c8b8) 0%,
    var(--pewter-light, #a89880) 30%,
    var(--pewter-mid, #6a5a44) 60%,
    var(--pewter-dark, #3a3228) 100%
  );
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.15),
    inset 0 -1px 1px rgba(0,0,0,0.5),
    0 1px 3px rgba(0,0,0,0.6),
    0 0 0 1px rgba(92, 68, 48, 0.7);
  z-index: 10;
  pointer-events: none;
}

.dt-bolt::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.8);
}

.dt-bolt--tl { top:  8px; left:  10px; }
.dt-bolt--tr { top:  8px; right: 10px; }
.dt-bolt--bl { bottom: 8px; left:  10px; }
.dt-bolt--br { bottom: 8px; right: 10px; }

/* ============================================================
   CREST — al-crest / dt-crest
   ============================================================ */
.dt-crest,
.al-crest {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 5;
  user-select: none;
}

.al-frame-svg {
  display: block;
  width: 460px;
  height: 80px;
  overflow: visible;
  flex-shrink: 0;
  pointer-events: none;
}

.al-crest-body {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}

.al-crest-sigil-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

.dt-crest__title,
.al-title {
  font-family: var(--font-dt-title, Cinzel, serif);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-brass-bright, #e8c860);
  text-shadow:
    0 0 12px rgba(232,200,96,0.55),
    0 1px 2px rgba(0,0,0,0.8);
  margin: 0;
  padding: 0;
  line-height: 1.1;
  white-space: nowrap;
}

.al-crest-meta {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}

.al-crest-meta-icon {
  font-size: 11px;
  color: var(--accent-brass-dim, #8a5a22);
  opacity: 0.75;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
  user-select: none;
}

.al-crest-meta-txt {
  font-family: var(--font-dt-status, 'IBM Plex Mono', monospace);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  color: var(--text-muted, #7a6a54);
  text-transform: uppercase;
}

/* ============================================================
   HEADER ROW TOP (back + cluster)
   ============================================================ */
.dt-header-row-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h, 96px);
  display: flex;
  align-items: center;
  padding: 0 16px;
  pointer-events: none;
  justify-content: space-between;
}

.al-header-left-cluster {
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}

/* ============================================================
   GENERIC HEADER BUTTONS (al-hdr-* family)
   ============================================================ */
.al-hdr-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--bg-elevated, #2a2018);
  border: 1px solid var(--border-metal, rgba(92,68,48,0.55));
  border-radius: var(--forge-radius, 2px);
  color: var(--text-body, #bfa37a);
  font-family: var(--font-ui, Oswald, sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  box-shadow: var(--forge-bevel, inset 0 1px 0 rgba(232,219,178,0.08), inset 0 -1px 0 rgba(0,0,0,0.55));
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
}
.al-hdr-btn:hover {
  background: var(--bg-surface, #1f1812);
  border-color: var(--accent-brass-dim, #8a5a22);
  color: var(--text-bright, #f3efdc);
}
.al-hdr-btn:active {
  background: var(--bg-elevated, #2a2018);
  border-color: var(--accent-brass, #c58b3a);
}
.al-hdr-btn .material-symbols-outlined {
  font-size: 15px;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
}

.al-hdr-icon-btn {
  padding: 5px 8px;
}

.al-hdr-divider {
  width: 1px;
  height: 28px;
  background: var(--border-metal, rgba(92,68,48,0.55));
  flex-shrink: 0;
}

.al-hdr-label {
  font-family: var(--font-dt-status, 'IBM Plex Mono', monospace);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--text-muted, #7a6a54);
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
}

/* ============================================================
   REFRESH CLUSTER
   ============================================================ */
.al-refresh-cluster {
  display: flex;
  align-items: center;
  gap: 6px;
}

.al-refresh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 8px;
  background: var(--bg-elevated, #2a2018);
  border: 1px solid var(--border-metal, rgba(92,68,48,0.55));
  border-radius: var(--forge-radius, 2px);
  color: var(--text-body, #bfa37a);
  font-family: var(--font-dt-status, 'IBM Plex Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  box-shadow: var(--forge-bevel, inset 0 1px 0 rgba(232,219,178,0.08), inset 0 -1px 0 rgba(0,0,0,0.55));
  white-space: nowrap;
  user-select: none;
}
.al-refresh-btn:hover {
  background: var(--bg-surface, #1f1812);
  border-color: var(--accent-brass-dim, #8a5a22);
  color: var(--text-bright, #f3efdc);
}
.al-refresh-btn .material-symbols-outlined {
  font-size: 14px;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
  transition: transform 0.6s ease;
}
.al-refresh-btn.spinning .material-symbols-outlined {
  animation: al-hdr-spin 0.6s linear;
}
@keyframes al-hdr-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.al-refresh-interval-select {
  background: var(--bg-elevated, #2a2018);
  border: 1px solid var(--border-metal, rgba(92,68,48,0.55));
  border-radius: var(--forge-radius, 2px);
  color: var(--text-body, #bfa37a);
  font-family: var(--font-dt-status, 'IBM Plex Mono', monospace);
  font-size: 10px;
  padding: 3px 6px;
  cursor: pointer;
  box-shadow: var(--forge-bevel, inset 0 1px 0 rgba(232,219,178,0.08), inset 0 -1px 0 rgba(0,0,0,0.55));
  outline: none;
}
.al-refresh-interval-select:focus {
  border-color: var(--accent-brass-dim, #8a5a22);
}

/* ============================================================================
   STEAMPUNK FORGE — МІГРОВАНО З alerts-style-adc.css (2026-04-25)
   Джерело SSOT: раніше жило в mon-tool-alerts-adc/alerts-style-adc.css
   Перенесено сюди, щоб усі Dev Tools сторінки з body.al-page
   отримували повний вигляд балки без підключення alerts-CSS.
   ============================================================================ */

/* ─── Keyframes (обов'язкові для балки) ─── */
@keyframes al-arch-rivet-pop {
  0%   { transform: scale(0.4); opacity: 0; }
  70%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@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 al-v5-lamp-halo {
  0%, 100% { opacity: 0.28; transform: scale(1); }
  50%      { opacity: 0.62; transform: scale(1.30); }
}
@keyframes al-v5-steam-rise {
  0%   { opacity: 0;    transform: translateY(0) scaleX(1); }
  15%  { opacity: 0.45; transform: translateY(-4px) scaleX(1.1); }
  60%  { opacity: 0.25; transform: translateY(-10px) scaleX(1.3); }
  100% { opacity: 0;    transform: translateY(-18px) scaleX(1.6); }
}
@keyframes al-v5-frame-breath {
  0%, 100% {
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.60))
            drop-shadow(0 0 12px rgba(92,58,26,0.18));
  }
  50% {
    filter: drop-shadow(0 2px 14px rgba(0,0,0,0.75))
            drop-shadow(0 0 24px rgba(197,139,58,0.28));
  }
}
@keyframes al-v5-frame-critical {
  0%, 100% {
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.60))
            drop-shadow(0 0 12px rgba(193,68,24,0.20));
  }
  50% {
    filter: drop-shadow(0 2px 14px rgba(0,0,0,0.75))
            drop-shadow(0 0 28px rgba(193,68,24,0.45));
  }
}
@keyframes al-v5-live-dot {
  0%, 100% { opacity: 0.45; box-shadow: 0 0 2px rgba(197, 139, 58, 0.30); }
  50%      { opacity: 0.90; box-shadow: 0 0 6px rgba(197, 139, 58, 0.55); }
}
@keyframes al-crest-bell-pulse {
  0%, 100% { transform: rotate(0deg); }
  8%       { transform: rotate(-8deg); }
  16%      { transform: rotate(6deg); }
  24%      { transform: rotate(-4deg); }
  32%      { transform: rotate(0deg); }
}

/* ============================================================================
   STEAMPUNK ARCH v2.0 — header overrides (чавунний градієнт + brass rail)
   Специфічність .dev-tools-scope.al-page перекриває базовий .devtools-header.
   ============================================================================ */
.dev-tools-scope.al-page .devtools-header.al-header {
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0px, transparent 7px,
      rgba(197, 139, 58, 0.014) 7px, rgba(197, 139, 58, 0.014) 8px
    ),
    repeating-linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.05) 0px, rgba(0, 0, 0, 0.05) 1px,
      transparent 1px, transparent 4px
    ),
    linear-gradient(
      180deg,
      #2a2018 0%,
      #1e1610 25%,
      #16100a 55%,
      #1e1610 85%,
      #2a2018 100%
    ) !important;
  border-bottom: 0 none !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  padding-bottom: 0 !important;
  box-shadow:
    inset 0 2px 0 rgba(197, 139, 58, 0.30),
    inset 0 1px 0 rgba(232, 219, 178, 0.18),
    inset 0 -2px 0 rgba(0, 0, 0, 0.90),
    0 0 0 1px rgba(92, 68, 48, 0.70),
    0 4px 0 rgba(197, 139, 58, 0.32),
    0 5px 0 rgba(0, 0, 0, 0.85),
    0 8px 24px rgba(0, 0, 0, 0.80),
    0 18px 48px rgba(0, 0, 0, 0.45) !important;
  overflow: visible !important;
}

/* Декоративна нижня brass rail */
.dev-tools-scope.al-page .devtools-header.al-header::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent   0%,
    rgba(92, 68, 48, 0.6)    3%,
    rgba(197, 139, 58, 0.85) 12%,
    rgba(216, 163, 72, 1.0)  30%,
    rgba(230, 180, 90, 0.95) 50%,
    rgba(216, 163, 72, 1.0)  70%,
    rgba(197, 139, 58, 0.85) 88%,
    rgba(92, 68, 48, 0.6)    97%,
    transparent   100%
  );
  box-shadow: 0 1px 4px rgba(197, 139, 58, 0.35), 0 0 8px rgba(197, 139, 58, 0.15);
  pointer-events: none;
  z-index: 2;
}

/* Болти-заклепки: патина + шліц-хрест */
.dev-tools-scope.al-page .dt-bolt {
  width: 12px;
  height: 12px;
  background: radial-gradient(
    circle at 32% 28%,
    var(--pewter-highlight, #d4c8b8) 0%,
    var(--pewter-light, #a89880)     25%,
    var(--pewter-mid, #6a5a44)       55%,
    var(--pewter-dark, #3a3228)      82%,
    var(--bg-void, #0d0907)          100%
  ) !important;
  border: 1px solid rgba(0,0,0,0.85) !important;
  box-shadow:
    inset 0 0.5px 1px rgba(255,255,255,0.35),
    inset 0 -0.5px 1px rgba(0,0,0,0.7),
    0 0 0 1px rgba(58, 50, 42, 0.6),
    0 1px 3px rgba(0,0,0,0.85) !important;
  animation: al-arch-rivet-pop 0.4s ease both;
}
.dev-tools-scope.al-page .dt-bolt::before,
.dev-tools-scope.al-page .dt-bolt::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: rgba(0,0,0,0.55);
  border-radius: 1px;
}
.dev-tools-scope.al-page .dt-bolt::before {
  width: 5px;
  height: 1px;
  transform: translate(-50%, -50%);
}
.dev-tools-scope.al-page .dt-bolt::after {
  width: 1px;
  height: 5px;
  transform: translate(-50%, -50%);
}

/* Title — engraved, warm glow */
.dev-tools-scope.al-page .al-title {
  font-family: var(--font-dt-title, 'Cinzel', 'Oswald', sans-serif) !important;
  font-size: 17px !important;
  letter-spacing: 0.18em !important;
  color: var(--text-bright, #f3efdc) !important;
  text-transform: uppercase;
  text-shadow:
    0 1px 0 rgba(0,0,0,0.95),
    0 2px 4px rgba(0,0,0,0.85),
    0 0 14px rgba(197, 139, 58, 0.12) !important;
}
.dev-tools-scope.al-page .al-header-subtitle {
  font-size: 9px !important;
  letter-spacing: 0.28em !important;
  color: var(--accent-brass, #c58b3a) !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,0.95),
    0 0 6px rgba(197, 139, 58, 0.3) !important;
}

/* ============================================================================
   FORGE v5.0 — crest (SVG-монолит герба)
   Головний візуальний компонент балки: SVG-рамка 460×80 з шестернями,
   лампами, парою. Герб абсолютно позиціонований у центрі header'а.
   ============================================================================ */

/* Header: overflow visible для виступаючих шестерень (FORGE v5 шар) */
body.dev-tools-scope.al-page .devtools-header.al-header {
  overflow: visible !important;
}

/* Контейнер герба */
body.dev-tools-scope.al-page .al-crest {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  animation: none !important;
  width: 460px !important;
  height: 80px !important;
  overflow: visible !important;
}

/* SVG-рамка — масштабована 100% з "диханням" */
body.dev-tools-scope.al-page .al-frame-svg {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
  pointer-events: none !important;
  animation: al-v5-frame-breath 3s ease-in-out infinite !important;
}

/* Текстовий контент поверх SVG */
body.dev-tools-scope.al-page .al-crest-body {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 5 !important;
  pointer-events: none !important;
}
body.dev-tools-scope.al-page .al-crest-sigil-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
body.dev-tools-scope.al-page .al-crest-sigil {
  flex-shrink: 0 !important;
  font-size: 34px !important;
  color: #e8c860 !important;
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24 !important;
  filter:
    drop-shadow(0 1px 0 rgba(0,0,0,0.9))
    drop-shadow(0 0 6px rgba(227,111,61,0.55))
    drop-shadow(0 0 12px rgba(197,139,58,0.35)) !important;
  animation: al-crest-bell-pulse 2.4s ease-in-out infinite !important;
}

body.dev-tools-scope.al-page .al-crest .dt-crest__title {
  font-family: var(--font-dt-title, Cinzel), 'Cinzel', serif !important;
  font-size: 34px !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: #e8c860 !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #e8c860 !important;
  text-shadow:
    0 1px 0 #5c3818,
    0 2px 0 #3a2208,
    0 3px 2px rgba(0,0,0,0.9),
    0 0 12px rgba(227,111,61,0.35),
    0 0 24px rgba(197,139,58,0.2) !important;
  filter: none !important;
  margin: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Нижня табличка (brass plate з заклепками) */
body.dev-tools-scope.al-page .al-crest-meta {
  position: absolute !important;
  bottom: -14px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 20px !important;
  background: linear-gradient(180deg, #2e2008 0%, #1a1208 50%, #100c06 100%) !important;
  border: 1px solid #3a2208 !important;
  border-top-color: rgba(240, 200, 100, 0.50) !important;
  border-radius: 3px !important;
  white-space: nowrap !important;
  z-index: 8 !important;
  box-shadow:
    inset 0 1px 0 rgba(240, 210, 120, 0.14),
    0 0 0 1px rgba(92, 58, 26, 0.40),
    0 2px 5px rgba(0, 0, 0, 0.55) !important;
}
body.dev-tools-scope.al-page .al-crest-meta::before,
body.dev-tools-scope.al-page .al-crest-meta::after {
  content: '' !important;
  position: absolute !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 30%, #d4a840, #7a4e18) !important;
  border: 0.5px solid #1a0a04 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
body.dev-tools-scope.al-page .al-crest-meta::before { left: 4px !important; }
body.dev-tools-scope.al-page .al-crest-meta::after  { right: 4px !important; }

body.dev-tools-scope.al-page .al-crest-meta-txt {
  font-family: var(--font-dt-status, 'IBM Plex Mono'), monospace !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  color: #d4a840 !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.90), 0 0 4px rgba(197,139,58,0.3) !important;
  text-transform: uppercase !important;
  user-select: none !important;
}

body.dev-tools-scope.al-page .al-crest-meta-icon {
  font-size: 14px !important;
  color: #e8c860 !important;
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20 !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  filter:
    drop-shadow(0 1px 0 rgba(0,0,0,0.9))
    drop-shadow(0 0 4px rgba(227,111,61,0.6)) !important;
  animation: al-crest-bell-pulse 2.4s ease-in-out infinite !important;
}
body.dev-tools-scope.al-page .al-crest-meta-icon:last-child {
  transform: scaleX(-1) !important;
  animation-delay: 1.2s !important;
}

body.dev-tools-scope.al-page .al-crest-meta-dot {
  width: 3px !important;
  height: 3px !important;
  border-radius: 50% !important;
  background: #c58b3a !important;
  box-shadow: 0 0 3px rgba(197, 139, 58, 0.40) !important;
  animation: al-v5-live-dot 2.2s ease-in-out infinite !important;
  flex-shrink: 0 !important;
}
body.dev-tools-scope.al-page .al-crest-meta-dot:first-child {
  animation-delay: 0s !important;
  opacity: 0.5 !important;
}
body.dev-tools-scope.al-page .al-crest-meta-dot:last-child {
  animation-delay: 1.1s !important;
  opacity: 0.75 !important;
}

/* Анімації обертання SVG шестерень */
body.dev-tools-scope.al-page .al-sv-rot--ccw-16 {
  animation: al-v5-rot-ccw 16s linear infinite !important;
  transform-box: fill-box !important;
  transform-origin: center !important;
}
body.dev-tools-scope.al-page .al-sv-rot--cw-16 {
  animation: al-v5-rot-cw 16s linear infinite !important;
  transform-box: fill-box !important;
  transform-origin: center !important;
}
body.dev-tools-scope.al-page .al-sv-rot--cw-20 {
  animation: al-v5-rot-cw 20s linear infinite !important;
  transform-box: fill-box !important;
  transform-origin: center !important;
}
body.dev-tools-scope.al-page .al-sv-rot--ccw-20 {
  animation: al-v5-rot-ccw 20s linear infinite !important;
  transform-box: fill-box !important;
  transform-origin: center !important;
}
body.dev-tools-scope.al-page .al-sv-rot--cw-28 {
  animation: al-v5-rot-cw 28s linear infinite !important;
  transform-box: fill-box !important;
  transform-origin: center !important;
}
body.dev-tools-scope.al-page .al-sv-rot--ccw-28 {
  animation: al-v5-rot-ccw 28s linear infinite !important;
  transform-box: fill-box !important;
  transform-origin: center !important;
}
body.dev-tools-scope.al-page .al-sv-rot--cw-40 {
  animation: al-v5-rot-cw 40s linear infinite !important;
  transform-box: fill-box !important;
  transform-origin: center !important;
}
body.dev-tools-scope.al-page .al-sv-rot--ccw-50 {
  animation: al-v5-rot-ccw 50s linear infinite !important;
  transform-box: fill-box !important;
  transform-origin: center !important;
}
body.dev-tools-scope.al-page .al-sv-rot--cw-55 {
  animation: al-v5-rot-cw 55s linear infinite !important;
  transform-box: fill-box !important;
  transform-origin: center !important;
}

/* Amber лампи — pulsing glow */
body.dev-tools-scope.al-page .al-sv-lamp-halo {
  animation: al-v5-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; }
body.dev-tools-scope.al-page .al-sv-lamp--3 .al-sv-lamp-halo { animation-delay: 1.4s !important; }
body.dev-tools-scope.al-page .al-sv-lamp--4 .al-sv-lamp-halo { animation-delay: 2.1s !important; }

/* Парова пара */
body.dev-tools-scope.al-page .al-sv-steam-puff {
  animation: al-v5-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; }

/* Critical state: шестерні прискорюються, лампи червоніють */
body.dev-tools-scope.al-page.has-critical .al-sv-rot--ccw-16 { animation-duration: 8s !important; }
body.dev-tools-scope.al-page.has-critical .al-sv-rot--cw-16  { animation-duration: 8s !important; }
body.dev-tools-scope.al-page.has-critical .al-sv-rot--cw-20  { animation-duration: 10s !important; }
body.dev-tools-scope.al-page.has-critical .al-sv-rot--ccw-20 { animation-duration: 10s !important; }
body.dev-tools-scope.al-page.has-critical .al-frame-svg {
  animation: al-v5-frame-critical 1.8s ease-in-out infinite !important;
}

/* Сумісність: ховаємо старі v4.0 елементи */
body.dev-tools-scope.al-page .al-mech-layer  { display: none !important; }
body.dev-tools-scope.al-page .al-bg-gear     { display: none !important; }
body.dev-tools-scope.al-page .al-fg-gear     { display: none !important; }
body.dev-tools-scope.al-page .al-crest-steam { display: none !important; }
body.dev-tools-scope.al-page .al-crest .dt-crest__shell {
  display: none !important;
}
/* ─── End FORGE v5.0 ─── */