@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&display=swap');

/* ================================================================ */
/*=  ALERTS CENTER — Steampunk Migration v5.0                      =*/
/*=  Palette: dev-tools-base.css (.dev-tools-scope SSOT)           =*/
/*=  Materiality: warm forged iron + pewter + brass accents        =*/
/*=  Severity: мапінг до --log-* родини з SSOT                    =*/
/*=                                                                 =*/
/*=  ⚠️ ЛОКАЛЬНІ ТОКЕНИ нижче — це МІСТ до нових steampunk-токенів */
/*=  з dev-tools-base.css. Не замінюй їх хардкодами — всі вони    */
/*=  тепер беруть значення з .dev-tools-scope родин.              */
/* ================================================================ */

.dev-tools-scope.al-page,
.al-page {
  /* ── Steampunk палітра (через міст з dev-tools-base.css) ─── */
  --al-bg:          var(--bg-base,     var(--bg-base));
  --al-surface:     var(--bg-surface,  var(--bg-surface));
  --al-surface-2:   var(--bg-elevated, var(--bg-elevated));
  --al-yellow:      var(--accent-brass, var(--accent-brass));
  --al-critical:    var(--log-critical, var(--log-critical));
  --al-high:        var(--log-error,    var(--accent-ember));
  --al-medium:      var(--log-warn,     var(--warning));
  --al-info:        var(--log-info,     var(--info));
  --al-text:        var(--text-bright,  var(--text-bright));
  --al-muted:       var(--text-muted,   var(--log-debug));
  --al-border:      var(--border-metal, var(--border-metal));
  --al-border-y:    var(--accent-brass, var(--accent-brass));
  --al-steel-hi:    rgba(232, 219, 178, 0.06);
  --al-steel-lo:    rgba(0, 0, 0, 0.45);

  /* ── Severity (сумісність з JS) ─────────────────── */
  --color-critical: var(--log-critical, var(--log-critical));
  --color-high:     var(--log-error,    var(--accent-ember));
  --color-medium:   var(--log-warn,     var(--warning));
  --color-info:     var(--log-info,     var(--info));

  /* Severity backgrounds — warmer industrial tints */
  --bg-critical: rgba(193, 68, 24, 0.10);
  --bg-high:     rgba(227, 111, 61, 0.09);
  --bg-medium:   rgba(224, 196, 137, 0.08);
  --bg-info:     rgba(124, 143, 136, 0.07);

  /* Severity borders */
  --border-critical: rgba(193, 68, 24, 0.42);
  --border-high:     rgba(227, 111, 61, 0.38);
  --border-medium:   rgba(224, 196, 137, 0.32);
  --border-info:     rgba(124, 143, 136, 0.30);

  /* Severity hover — без glow, просто border посилення */
  --glow-critical: rgba(193, 68, 24, 0.15);
  --glow-high:     rgba(227, 111, 61, 0.12);
  --glow-medium:   rgba(224, 196, 137, 0.10);
  --glow-info:     rgba(124, 143, 136, 0.10);

  /* Scan colors — для HUD */
  --scan-critical: var(--al-critical);
  --scan-high:     var(--al-high);
  --scan-medium:   var(--al-medium);
  --scan-info:     var(--al-info);

  /* UI bridge → devtools-style vars */
  --bg-page:    var(--bg-base,     var(--bg-base));
  --bg-card:    var(--bg-surface,  var(--bg-surface));
  --bg-surface: var(--bg-elevated, var(--bg-elevated));
  --border:     var(--border-metal, rgba(92,68,48,0.55));
  --text-main:  var(--text-bright, var(--text-bright));
  /* FIX cc-683: видалено --text-muted override (var(--log-notice) замість SSOT var(--log-debug)) — тепер використовує SSOT значення */
  --text-dim:   var(--text-muted,  var(--log-debug));

  --max-width: var(--max-content, 1400px);

  /* ── Industrial layout (без змін) ──────────────────────── */
  --forge-radius: 2px;
  --forge-shadow: 0 4px 12px rgba(0,0,0,0.55);
  --forge-inset:  inset 0 2px 6px rgba(0,0,0,0.65), inset 0 -1px 0 rgba(232,219,178,0.05);
  --forge-bevel:  inset 0 1px 0 rgba(232,219,178,0.08), inset 0 -1px 0 rgba(0,0,0,0.55);
}


/* ================================================================
   KEYFRAMES — Industrial animations, no bounce
   ================================================================ */

/* forge-pulse — замінює ring-pulse і neon-glow */
@keyframes forge-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(230, 57, 70, 0);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 0 4px rgba(230, 57, 70, 0.18);
  }
}

/* Status dot pulse — жорсткий */
@keyframes status-forge-ok {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.65; }
}

/* Вхід картки — вниз без bounce */
@keyframes card-enter {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Dismiss — слайд вправо та collapse */
@keyframes card-dismiss {
  0% {
    opacity: 1;
    transform: translateX(0);
    max-height: 200px;
    margin-bottom: 6px;
  }
  40% {
    opacity: 0.2;
    transform: translateX(28px);
  }
  70% {
    opacity: 0;
    transform: translateX(52px);
    max-height: 200px;
  }
  100% {
    opacity: 0;
    transform: translateX(70px);
    max-height: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* Flash для нового критичного */
@keyframes new-critical-flash {
  0%, 100% { background: var(--bg-critical); }
  35%       { background: rgba(230, 57, 70, 0.16); }
  65%       { background: var(--bg-critical); }
}

/* Accent-пульс нової картки */
@keyframes accent-pulse {
  0%, 100% { opacity: 1; width: 4px; }
  50%       { opacity: 0.8; width: 5px; }
}

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

/* Спін loading */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Lock pulse */
@keyframes lock-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}

/* Banner slide-in */
@keyframes banner-slide-in {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hint slide down */
@keyframes hint-slide-down {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Silenced badge pulse */
@keyframes silenced-pulse {
  0%, 100% { opacity: 0.8; }
  50%       { opacity: 0.45; }
}

/* Stamp appear — для critical badge */
@keyframes stamp-appear {
  from { opacity: 0; transform: scale(1.15) rotate(-1deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* Blueprint shimmer — тонке переміщення блакитного по фону */
@keyframes blueprint-drift {
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 32px 32px, 32px 32px; }
}


/* ================================================================
   SCAN LINE — HIDDEN (industrial style замість сканування)
   ================================================================ */

.al-scan-line {
  display: none !important;
}

/* Залишаємо клас щоб JS не ламався */
.al-page.has-critical .al-scan-line {
  display: none !important;
}


/* ================================================================
   PAGE LAYOUT — forge black + blueprint grid
   ================================================================ */

.al-page {
  min-height: 100vh;
  background-color: var(--al-bg);
  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;
  position: relative;
}

/* Dark vignette поверх blueprint grid */
.al-page::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(30,30,30,0) 60%, rgba(10,10,10,0.7) 100%),
    radial-gradient(ellipse at 50% 100%, rgba(30,30,30,0) 60%, rgba(10,10,10,0.5) 100%);
  pointer-events: none;
  z-index: 0;
}


/* ================================================================
   HEADER — steel panel з hex bolt corners
   ================================================================ */

.al-header {
  position: sticky;
  top: 0;
  z-index: 50;
}

/* Перекриваємо базовий devtools-header border-bottom */
.devtools-header.al-header {
  border-bottom: 2px solid var(--al-yellow) !important;
  background:
    linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-elevated) 50%, var(--bg-base) 100%) !important;
  box-shadow:
    0 4px 16px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.4) !important;
}

/* Hex bolt corners — кружечки в кутах header */
.dt-bolt {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--pewter-mid), var(--bg-elevated));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.8), 0 1px 0 rgba(255,255,255,0.04);
  z-index: 10;
}
.dt-bolt::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  transform: translate(-50%, -50%);
}
.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; }

/* Identity */
.al-header-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.al-header-icon-wrap {
  position: relative;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(242, 193, 78, 0.35);
  border-radius: var(--forge-radius);
  box-shadow: var(--forge-inset);
}

.al-header-icon {
  font-size: 20px !important;
  color: var(--al-yellow);
  position: relative;
  z-index: 1;
  transition: color 0.15s ease;
}

/* Кільце — приховуємо (замінено steel box) */
.al-header-icon-ring {
  display: none;
}

/* Critical state — іконка червона */
.al-page.has-critical .al-header-icon-wrap {
  border-color: rgba(230, 57, 70, 0.5);
}
.al-page.has-critical .al-header-icon {
  color: var(--al-critical);
}

.al-header-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.al-title {
  margin: 0;
  font-family: var(--font-dt-title, 'Oswald', sans-serif) !important; /* FIX cc-704 */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--al-text) !important;
}

.al-header-subtitle {
  font-size: 10px;
  color: var(--al-muted);
  font-family: var(--font-ui, 'Oswald', sans-serif); /* UPPERCASE label — canon font */
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.al-hdr-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}


/* ================================================================
   SUBTITLE
   ================================================================ */

.devtools-subtitle {
  font-family: 'Barlow', var(--font-ui, sans-serif) !important;
  color: var(--al-muted) !important;
  font-size: 12px !important;
  letter-spacing: 0.02em;
}


/* ================================================================
   HUD STATUS STRIP — engraved inset steel plate
   ================================================================ */

.al-hud-strip {
  display: flex;
  align-items: center;
  gap: 0;
  max-width: var(--max-width);
  margin: 12px auto 0;
  background: var(--al-surface);
  border: 1px solid var(--al-border);
  border-radius: var(--forge-radius);
  overflow: hidden;
  position: relative;
  box-shadow: var(--forge-inset), var(--forge-shadow);
}

/* Steel texture line у верхній частині */
.al-hud-strip::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255,255,255,0.06);
  pointer-events: none;
}

/* System Status Indicator */
.al-hud-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-right: 1px solid var(--al-border);
  min-width: 140px;
  background: rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.03);
}

.al-hud-status-dot {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--success);
  flex-shrink: 0;
  transition: background 0.15s ease, box-shadow 0.15s ease;
  /* Без neon glow — industrial LED */
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
}

/* Стани dot — industrial LED без glow */
.al-hud-status-dot.dot-ok {
  background: var(--success);
  box-shadow: 0 0 4px rgba(76, 175, 80, 0.5), inset 0 1px 2px rgba(0,0,0,0.3);
  animation: status-forge-ok 3s ease-in-out infinite;
}
.al-hud-status-dot.dot-warn {
  background: var(--al-high);
  box-shadow: 0 0 4px rgba(212, 132, 58, 0.5), inset 0 1px 2px rgba(0,0,0,0.3);
}
.al-hud-status-dot.dot-critical {
  background: var(--al-critical);
  box-shadow: 0 0 6px rgba(230, 57, 70, 0.5), inset 0 1px 2px rgba(0,0,0,0.3);
  animation: forge-pulse 2s ease-in-out infinite;
}

/* ::after ring — hidden (industrial, без ring-pulse) */
.al-hud-status-dot::after {
  display: none;
}

.al-hud-status-label {
  font-family: var(--font-ui, 'Oswald', sans-serif); /* UPPERCASE label — canon font */
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--al-muted);
  white-space: nowrap;
  text-transform: uppercase;
}

/* HUD Meters */
.al-hud-meters {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 12px;
  flex: 1;
}

.al-hud-meter {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px 4px 8px;
  border-radius: var(--forge-radius);
  border: 1px solid transparent;
  cursor: default;
  transition: background 0.15s ease, border-color 0.15s ease;
  min-width: 0;
  position: relative;
  overflow: hidden;
}

/* Тонка meter bar знизу */
.al-hud-meter-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
}
.al-hud-meter-fill {
  height: 100%;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.5s ease;
}

.al-hud-meter-icon {
  font-size: 8px;
  flex-shrink: 0;
  line-height: 1;
}

.al-hud-meter-count {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace); /* FIX cc-704 */
  font-size: 13px;
  font-weight: 400;
  min-width: 18px;
  text-align: right;
  line-height: 1;
  transition: color 0.15s ease;
}

.al-hud-meter-label {
  font-family: var(--font-ui, 'Oswald', sans-serif); /* UPPERCASE label — canon font */
  font-size: 8px;
  letter-spacing: 0.12em;
  opacity: 0.6;
  white-space: nowrap;
  text-transform: uppercase;
}

/* Critical meter */
.al-hud-meter--critical .al-hud-meter-icon  { color: var(--al-critical); }
.al-hud-meter--critical .al-hud-meter-count { color: var(--al-critical); }
.al-hud-meter--critical .al-hud-meter-fill  { background: var(--al-critical); }
.al-hud-meter--critical.has-alerts {
  background: rgba(230, 57, 70, 0.10);
  border-color: rgba(230, 57, 70, 0.30);
}
.al-hud-meter--critical.has-alerts .al-hud-meter-icon {
  animation: forge-pulse 2s ease-in-out infinite;
}

/* High meter */
.al-hud-meter--high .al-hud-meter-icon  { color: var(--al-high); }
.al-hud-meter--high .al-hud-meter-count { color: var(--al-high); }
.al-hud-meter--high .al-hud-meter-fill  { background: var(--al-high); }
.al-hud-meter--high.has-alerts {
  background: rgba(212, 132, 58, 0.09);
  border-color: rgba(212, 132, 58, 0.28);
}

/* Medium meter */
.al-hud-meter--medium .al-hud-meter-icon  { color: var(--al-medium); }
.al-hud-meter--medium .al-hud-meter-count { color: var(--al-medium); }
.al-hud-meter--medium .al-hud-meter-fill  { background: var(--al-medium); }
.al-hud-meter--medium.has-alerts {
  background: rgba(232, 197, 74, 0.08);
  border-color: rgba(232, 197, 74, 0.26);
}

/* Info meter */
.al-hud-meter--info .al-hud-meter-icon  { color: var(--al-info); }
.al-hud-meter--info .al-hud-meter-count { color: var(--al-info); }
.al-hud-meter--info .al-hud-meter-fill  { background: var(--al-info); }

/* Divider */
.al-hud-divider {
  width: 1px;
  height: 28px;
  background: var(--al-border);
  flex-shrink: 0;
  margin: 0 4px;
}

/* Sources inline */
.al-hud-sources {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 12px;
  font-size: 10.5px;
  color: var(--al-muted);
  font-family: var(--font-ui, 'Oswald', sans-serif); /* UPPERCASE label — canon font */
  letter-spacing: 0.06em;
  cursor: default;
  flex-shrink: 0;
  transition: color 0.15s ease;
  text-transform: uppercase;
}
.al-hud-sources .material-symbols-outlined { font-size: 13px; }
.al-hud-sources.ok,
.summary-sources-inline.ok   { color: var(--success); }
.al-hud-sources.warn,
.summary-sources-inline.warn { color: var(--al-high); }
.al-hud-sources.err,
.summary-sources-inline.err  { color: var(--al-critical); }

.summary-sources-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 12px;
  font-size: 10.5px;
  color: var(--al-muted);
  font-family: var(--font-ui, 'Oswald', sans-serif); /* UPPERCASE label — canon font */
  letter-spacing: 0.06em;
  cursor: default;
  flex-shrink: 0;
  transition: color 0.15s ease;
  text-transform: uppercase;
}
.summary-sources-inline .material-symbols-outlined { font-size: 13px; }

/* Silenced inline */
.summary-row-divider {
  color: rgba(255, 255, 255, 0.08);
  font-size: 12px;
  padding: 0 2px;
  user-select: none;
}

.summary-silenced-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  color: var(--al-medium);
  font-family: var(--font-ui, 'Oswald', sans-serif); /* UPPERCASE label — canon font */
  letter-spacing: 0.06em;
  cursor: default;
  padding: 0 8px;
  animation: silenced-pulse 3s ease-in-out infinite;
  text-transform: uppercase;
}
.summary-silenced-inline .material-symbols-outlined { font-size: 13px; }

/* Timestamp */
.al-hud-timestamp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--al-muted);
  font-family: var(--font-mono, 'IBM Plex Mono', monospace); /* FIX cc-704 */
  letter-spacing: 0.06em;
  padding: 0 14px 0 12px;
  flex-shrink: 0;
  border-left: 1px solid var(--al-border);
  margin-left: auto;
}
.al-hud-timestamp .material-symbols-outlined { font-size: 12px; }


/* ================================================================
   SOURCES INFO
   ================================================================ */

.sources-info {
  margin: 6px auto 0;
  max-width: var(--max-width);
  padding: 4px 14px;
  border-radius: var(--forge-radius);
  font-size: 10px;
  font-family: var(--font-ui, 'Oswald', sans-serif); /* UPPERCASE label — canon font */
  letter-spacing: 0.06em;
  cursor: default;
  transition: background 0.15s ease;
  text-transform: uppercase;
}
.sources-info--ok    { background: rgba(76,175,80,0.06);    color: var(--success); border: 1px solid rgba(76,175,80,0.20); }
.sources-info--warn  { background: rgba(212,132,58,0.06);   color: var(--al-high); border: 1px solid rgba(212,132,58,0.22); }
.sources-info--error { background: rgba(230,57,70,0.06);    color: var(--al-critical); border: 1px solid rgba(230,57,70,0.22); }


/* ================================================================
   THREAT STATUS BANNER — hazard stripe + steel panel
   ================================================================ */

.al-threat-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px auto 0;
  max-width: var(--max-width);
  border-radius: var(--forge-radius);
  padding: 0 18px 0 0;
  border: 1px solid var(--al-border);
  position: relative;
  overflow: hidden;
  transition: background 0.15s ease, border-color 0.15s ease;
  animation: banner-slide-in 0.25s ease;
  background: var(--al-surface);
  box-shadow: var(--forge-shadow);
}

/* Декоративний кут */
.al-threat-banner-corner {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 18px 18px 0;
  border-color: transparent rgba(255,255,255,0.04) transparent transparent;
  pointer-events: none;
}

.al-threat-icon {
  font-size: 18px !important;
  flex-shrink: 0;
  padding: 14px 16px;
  background: rgba(0,0,0,0.25);
  border-right: 1px solid var(--al-border);
  align-self: stretch;
  display: flex;
  align-items: center;
}

.al-threat-banner-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.al-threat-banner-label {
  font-family: 'Oswald', var(--font-ui, sans-serif);
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.18em;
  opacity: 0.55;
  text-transform: uppercase;
  color: var(--al-muted);
}

#statusBannerText {
  font-family: 'Barlow', var(--font-ui, sans-serif);
  font-size: 13px;
  color: var(--al-text);
}

/* State OK */
.al-threat-banner.state-ok {
  border-color: rgba(76, 175, 80, 0.30);
}
.al-threat-banner.state-ok .al-threat-icon { color: var(--success); }

/* State WARN */
.al-threat-banner.state-warn {
  border-color: rgba(212, 132, 58, 0.32);
}
.al-threat-banner.state-warn .al-threat-icon { color: var(--al-high); }

/* State CRITICAL — hazard stripe зверху */
.al-threat-banner.state-critical {
  border-color: rgba(230, 57, 70, 0.40);
  animation: banner-slide-in 0.25s ease;
}
.al-threat-banner.state-critical .al-threat-icon { color: var(--al-critical); }

/* Hazard stripe accent — 3px зверху critical banner */
.al-threat-banner.state-critical::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: repeating-linear-gradient(
    45deg,
    var(--al-critical) 0,
    var(--al-critical) 8px,
    transparent 8px,
    transparent 16px
  );
  pointer-events: none;
}


/* ================================================================
   LAST VIEWED BANNER
   ================================================================ */

.al-last-viewed-banner {
  margin: 8px auto 0;
  max-width: var(--max-width);
  padding: 8px 14px;
  background: rgba(232, 197, 74, 0.06);
  border: 1px solid rgba(232, 197, 74, 0.22);
  border-radius: var(--forge-radius);
  font-size: 11px;
  color: var(--al-medium);
  font-family: var(--font-ui, 'Oswald', sans-serif); /* UPPERCASE label — canon font */
  line-height: 1.5;
  animation: banner-slide-in 0.25s ease;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}


/* ================================================================
   CUSTOM ALERT FORM — steel panel з riveted header
   ================================================================ */

.al-custom-form {
  margin: 10px auto 0;
  max-width: var(--max-width);
  background: var(--al-surface);
  border: 1px solid var(--al-border);
  border-radius: var(--forge-radius);
  overflow: hidden;
  animation: hint-slide-down 0.18s ease;
  box-shadow: var(--forge-shadow);
}

/* Riveted header — Oswald + заклепки */
.al-custom-form-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background:
    linear-gradient(180deg, rgba(242, 193, 78, 0.12) 0%, rgba(242, 193, 78, 0.06) 100%);
  border-bottom: 1px solid rgba(242, 193, 78, 0.25);
  font-size: 11px;
  font-weight: 600;
  color: var(--al-yellow);
  font-family: 'Oswald', var(--font-ui, sans-serif);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  position: relative;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3);
}
/* Заклепки в header форми */
.al-custom-form-header::before,
.al-custom-form-header::after {
  content: '';
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--pewter-mid), var(--bg-elevated));
  border: 1px solid rgba(255,255,255,0.10);
  flex-shrink: 0;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.7);
}
.al-custom-form-header .material-symbols-outlined { font-size: 16px; }

.al-custom-close {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--al-muted);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
  transition: color 0.15s ease;
}
.al-custom-close:hover { color: var(--al-text); }

.al-custom-form-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.al-custom-row         { display: flex; flex-direction: column; gap: 4px; }
.al-custom-row--inline { flex-direction: row; gap: 12px; }
.al-custom-field       { flex: 1; display: flex; flex-direction: column; gap: 4px; }

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

.al-custom-input,
.al-custom-textarea,
.al-custom-select {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--al-border);
  border-radius: var(--forge-radius);
  color: var(--al-text);
  font-family: var(--font-mono, 'IBM Plex Mono', monospace); /* FIX cc-704 */
  font-size: 11px;
  padding: 8px 10px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  resize: vertical;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.03);
}
.al-custom-input:focus,
.al-custom-textarea:focus,
.al-custom-select:focus {
  border-color: rgba(242, 193, 78, 0.55);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(242, 193, 78, 0.10);
}

.al-custom-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 4px;
}

.al-custom-status {
  font-size: 11px;
  font-family: var(--font-mono, 'IBM Plex Mono', monospace); /* FIX cc-704 */
  color: var(--al-muted);
  letter-spacing: 0.04em;
}

/* Submit кнопка — inset bevel yellow */
.al-custom-submit {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(242, 193, 78, 0.12);
  border: 1px solid rgba(242, 193, 78, 0.40);
  color: var(--al-yellow);
  font-family: 'Oswald', var(--font-ui, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: var(--forge-radius);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  box-shadow: var(--forge-bevel);
}
.al-custom-submit:hover {
  background: rgba(242, 193, 78, 0.20);
  border-color: rgba(242, 193, 78, 0.60);
  box-shadow: var(--forge-bevel), 0 2px 8px rgba(242, 193, 78, 0.15);
}
.al-custom-submit .material-symbols-outlined { font-size: 14px; }
.al-custom-submit:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}


/* ================================================================
   HINT (collapsible) — steel panel
   ================================================================ */

.al-hint-details {
  margin: 8px auto 0;
  max-width: var(--max-width);
  background: rgba(0,0,0,0.2);
  border: 1px solid var(--al-border);
  border-radius: var(--forge-radius);
  overflow: hidden;
  transition: border-color 0.15s ease;
}
.al-hint-details[open] {
  border-color: rgba(242, 193, 78, 0.20);
}

.al-hint-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 10px;
  color: var(--al-muted);
  font-family: var(--font-ui, 'Oswald', sans-serif); /* UPPERCASE label — canon font */
  letter-spacing: 0.08em;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: color 0.15s ease;
  text-transform: uppercase;
}
.al-hint-summary::-webkit-details-marker { display: none; }
.al-hint-summary:hover { color: var(--al-text); }
.al-hint-summary .material-symbols-outlined { font-size: 14px; flex-shrink: 0; }

.al-hint-toggle-icon {
  margin-left: auto;
  font-size: 14px !important;
  transition: transform 0.15s ease;
}
.al-hint-details[open] .al-hint-toggle-icon {
  transform: rotate(180deg);
}

.al-hint-body {
  padding: 0 14px 10px 40px;
  font-size: 10.5px;
  color: var(--al-muted);
  font-family: 'Barlow', var(--font-ui, sans-serif);
  line-height: 1.65;
  letter-spacing: 0.01em;
  animation: hint-slide-down 0.15s ease;
  opacity: 0.8;
}


/* ================================================================
   HEADER ACTIONS — кнопки
   ================================================================ */

/* Icon buttons — inset bevel */
.al-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: var(--al-surface);
  border: 1px solid var(--al-border);
  border-radius: var(--forge-radius);
  color: var(--al-muted);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  box-shadow: var(--forge-bevel);
}
.al-icon-btn:hover,
.al-icon-btn.is-active {
  background: rgba(242, 193, 78, 0.10);
  border-color: rgba(242, 193, 78, 0.40);
  color: var(--al-yellow);
}
.al-icon-btn .material-symbols-outlined { font-size: 16px; }

/* Interval wrap */
.al-interval-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--al-surface);
  border: 1px solid var(--al-border);
  border-radius: var(--forge-radius);
  padding: 0 6px 0 8px;
  transition: border-color 0.15s ease;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.4), inset 0 -1px 0 rgba(255,255,255,0.04);
}
.al-interval-wrap:hover,
.al-interval-wrap:focus-within {
  border-color: rgba(242, 193, 78, 0.30);
}

/* Lock icon */
.al-lock-icon {
  font-size: 13px !important;
  color: var(--success);
  cursor: help;
  transition: color 0.15s ease;
  flex-shrink: 0;
}
.al-lock-icon.is-manual { color: var(--al-muted); }
.al-lock-icon.is-active { animation: lock-pulse 2.5s ease-in-out infinite; }

.al-interval-select {
  background: transparent;
  border: none;
  color: var(--al-muted);
  font-family: var(--font-mono, 'IBM Plex Mono', monospace); /* FIX cc-704 */
  font-size: 11px;
  padding: 4px 4px 4px 0;
  cursor: pointer;
  outline: none;
  transition: color 0.15s ease;
}
.al-interval-select:hover,
.al-interval-select:focus {
  color: var(--al-text);
}

/* Countdown */
.al-countdown {
  font-size: 11px;
  color: var(--al-muted);
  margin-left: 2px;
  min-width: 28px;
  font-family: var(--font-mono, 'IBM Plex Mono', monospace); /* FIX cc-704 */
  letter-spacing: 0.04em;
  display: inline-block;
}

/* Refresh button — primary yellow inset bevel */
.al-refresh-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(242, 193, 78, 0.10);
  border: 1px solid rgba(242, 193, 78, 0.38);
  color: var(--al-yellow);
  font-family: 'Oswald', var(--font-ui, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--forge-radius);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  box-shadow: var(--forge-bevel);
}
.al-refresh-btn:hover {
  background: rgba(242, 193, 78, 0.18);
  border-color: rgba(242, 193, 78, 0.55);
  box-shadow: var(--forge-bevel), 0 2px 8px rgba(242, 193, 78, 0.12);
}
.al-refresh-btn .material-symbols-outlined { font-size: 14px; }
.al-refresh-btn.spinning .material-symbols-outlined {
  animation: spin 0.8s linear infinite;
}

/* Notification button */
.al-notif-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: var(--al-surface);
  border: 1px solid var(--al-border);
  border-radius: var(--forge-radius);
  color: var(--al-muted);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  position: relative;
  box-shadow: var(--forge-bevel);
}
.al-notif-btn:hover {
  background: rgba(242, 193, 78, 0.10);
  border-color: rgba(242, 193, 78, 0.38);
  color: var(--al-yellow);
}
.al-notif-btn .material-symbols-outlined { font-size: 16px; }
.al-notif-btn.is-enabled {
  background: rgba(76, 175, 80, 0.08);
  border-color: rgba(76, 175, 80, 0.30);
  color: var(--success);
}
.al-notif-btn.is-denied { opacity: 0.35; cursor: not-allowed; }


/* ================================================================
   CONTROLS (TABS + FILTERS)
   ================================================================ */

.alerts-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  max-width: var(--max-width);
  margin: 10px auto 0;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--al-border);
}

/* Tabs — steel strip */
.alerts-tabs {
  display: flex;
  gap: 2px;
  background: var(--al-surface);
  border: 1px solid var(--al-border);
  border-radius: var(--forge-radius);
  padding: 3px;
  box-shadow: var(--forge-inset);
}

/* Журнал — архівна вкладка, розміщена серед фільтрів справа.
   Стилізована як filter-select/al-group-btn (темний фон, латунний hover) — НЕ як ліві tabs. */
.dev-tools-scope.al-page .alerts-tab--journal {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: auto;
  padding: 4px 10px;
  background: var(--al-surface);
  border: 1px solid var(--al-border);
  border-radius: var(--forge-radius);
  color: var(--al-muted);
  font-family: 'Oswald', var(--font-ui, sans-serif);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
  flex-shrink: 0;
  line-height: 1;
}
.dev-tools-scope.al-page .alerts-tab--journal:hover {
  border-color: rgba(242, 193, 78, 0.40);
  color: var(--al-text, #e8dbb2);
}
.dev-tools-scope.al-page .alerts-tab--journal.alerts-tab--active {
  background: rgba(242, 193, 78, 0.12);
  border-color: rgba(242, 193, 78, 0.55);
  color: var(--al-yellow, #f2c14e);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.4), 0 0 6px rgba(242, 193, 78, 0.18);
}
.dev-tools-scope.al-page .alerts-tab--journal .material-symbols-outlined {
  font-size: 14px;
  text-transform: none;
}
.dev-tools-scope.al-page .alerts-tab--journal .tab-count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  opacity: 0.75;
  text-transform: none;
}

.alerts-tab {
  background: transparent;
  border: none;
  color: var(--al-muted);
  font-family: 'Oswald', var(--font-ui, sans-serif);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--forge-radius);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
  position: relative;
}
.alerts-tab:hover {
  color: var(--al-text);
  background: rgba(255, 255, 255, 0.04);
}

/* Yellow underline active */
.alerts-tab--active {
  background: rgba(242, 193, 78, 0.10);
  color: var(--al-yellow);
  border-bottom: 2px solid var(--al-yellow);
}

.tab-count {
  color: var(--al-muted);
  font-family: var(--font-mono, 'IBM Plex Mono', monospace); /* FIX cc-704 */
  font-size: 10px;
  font-weight: 400;
}
.alerts-tab--active .tab-count { color: var(--al-yellow); opacity: 0.8; }

/* Filters */
.alerts-filters {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Group toggle */
.al-group-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--al-surface);
  border: 1px solid var(--al-border);
  border-radius: var(--forge-radius);
  color: var(--al-muted);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  box-shadow: var(--forge-bevel);
}
.al-group-btn:hover { color: var(--al-text); border-color: rgba(255,255,255,0.12); }
.al-group-btn.is-active {
  background: rgba(242, 193, 78, 0.12);
  border-color: rgba(242, 193, 78, 0.38);
  color: var(--al-yellow);
}
.al-group-btn .material-symbols-outlined { font-size: 15px; }

/* Filter select — dark + yellow focus */
.alerts-filter-select {
  background: var(--al-surface);
  border: 1px solid var(--al-border);
  color: var(--al-muted);
  font-family: var(--font-mono, 'IBM Plex Mono', monospace); /* FIX cc-704 */
  font-size: 11px;
  padding: 4px 8px;
  border-radius: var(--forge-radius);
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s ease, color 0.15s ease;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
}
.alerts-filter-select:hover,
.alerts-filter-select:focus {
  border-color: rgba(242, 193, 78, 0.40);
  color: var(--al-text);
}


/* ================================================================
   BULK DISMISS
   ================================================================ */

.al-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Oswald', var(--font-ui, sans-serif);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--forge-radius);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
  box-shadow: var(--forge-bevel);
}
.al-btn--ghost {
  background: transparent;
  border: 1px solid var(--al-border);
  color: var(--al-muted);
}
.al-btn--ghost:hover {
  background: rgba(232, 197, 74, 0.07);
  border-color: rgba(232, 197, 74, 0.32);
  color: var(--al-medium);
}
.al-btn--ghost .material-symbols-outlined { font-size: 14px; }

.al-bulk-confirm {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  margin: 6px auto 0;
  background: rgba(232, 197, 74, 0.06);
  border: 1px solid rgba(232, 197, 74, 0.22);
  border-radius: var(--forge-radius);
  font-size: 11px;
  color: var(--al-medium);
  font-family: var(--font-ui, 'Oswald', sans-serif); /* UPPERCASE label — canon font */
  max-width: var(--max-width);
  animation: hint-slide-down 0.18s ease;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.al-bulk-confirm-text { flex: 1; }
.al-bulk-confirm-yes {
  background: rgba(232, 197, 74, 0.12);
  border: 1px solid rgba(232, 197, 74, 0.38);
  color: var(--al-medium);
  font-family: 'Oswald', var(--font-ui, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--forge-radius);
  cursor: pointer;
  transition: background 0.15s ease;
  box-shadow: var(--forge-bevel);
}
.al-bulk-confirm-yes:hover { background: rgba(232, 197, 74, 0.22); }
.al-bulk-confirm-no {
  background: transparent;
  border: 1px solid var(--al-border);
  color: var(--al-muted);
  font-family: 'Oswald', var(--font-ui, sans-serif);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--forge-radius);
  cursor: pointer;
  transition: color 0.15s ease;
}
.al-bulk-confirm-no:hover { color: var(--al-text); }


/* ================================================================
   ALERT FEED
   ================================================================ */

.alerts-feed {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 10px 0 64px;
}


/* ================================================================
   GROUPED SECTIONS
   ================================================================ */

.alerts-group {
  margin-bottom: 8px;
}

.alerts-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: var(--al-surface);
  border: 1px solid var(--al-border);
  border-radius: var(--forge-radius);
  padding: 8px 14px;
  cursor: pointer;
  font-family: 'Oswald', var(--font-ui, sans-serif);
  font-size: 11px;
  font-weight: 400;
  color: var(--al-muted);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease;
  box-shadow: var(--forge-bevel);
}
.alerts-group-header:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.10);
  color: var(--al-text);
}

.alerts-group-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
}
.alerts-group-dot--critical { background: var(--al-critical); }
.alerts-group-dot--high     { background: var(--al-high); }
.alerts-group-dot--medium   { background: var(--al-medium); }
.alerts-group-dot--info     { background: var(--al-info); }

.alerts-group-name  { flex: 1; font-weight: 600; }
.alerts-group-count {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--al-border);
  border-radius: var(--forge-radius);
  padding: 1px 8px;
  font-family: var(--font-mono, 'IBM Plex Mono', monospace); /* FIX cc-704 */
  font-size: 10px;
  color: var(--al-muted);
}
.alerts-group-arrow { font-size: 16px; margin-left: auto; flex-shrink: 0; }
.alerts-group-body {
  padding: 6px 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.alerts-group-body.is-hidden { display: none; }


/* ================================================================
   ALERT CARD — Industrial Forge design
   ================================================================ */

.alert-card {
  display: flex;
  border-radius: var(--forge-radius);
  border: 1px solid var(--al-border);
  background: var(--al-surface);
  overflow: hidden;
  position: relative;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  margin-bottom: 4px;
  box-shadow:
    var(--forge-shadow),
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -1px 0 rgba(0,0,0,0.3);
  animation: card-enter 0.22s ease both;
}
.alert-card:last-child { margin-bottom: 0; }

/* Hover — мінімальний підйом */
.alert-card:not(.alert-card--resolved):hover {
  transform: translateY(-1px);
  box-shadow:
    0 6px 16px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.3);
}

/* Severity borders при hover */
.alert-card--critical:not(.alert-card--resolved):hover { border-color: rgba(230, 57, 70, 0.50); }
.alert-card--high:not(.alert-card--resolved):hover     { border-color: rgba(212, 132, 58, 0.45); }
.alert-card--medium:not(.alert-card--resolved):hover   { border-color: rgba(232, 197, 74, 0.40); }
.alert-card--info:not(.alert-card--resolved):hover     { border-color: rgba(74, 157, 196, 0.38); }

/* Severity backgrounds */
.alert-card--critical {
  border-color: var(--border-critical);
  background: var(--bg-critical);
}
.alert-card--high {
  border-color: var(--border-high);
  background: var(--bg-high);
}
.alert-card--medium {
  border-color: var(--border-medium);
  background: var(--bg-medium);
}
.alert-card--info {
  border-color: var(--border-info);
  background: var(--bg-info);
}

/* Critical — hazard stripe зверху картки (3px) */
.alert-card--critical::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: repeating-linear-gradient(
    45deg,
    var(--al-critical) 0,
    var(--al-critical) 8px,
    transparent 8px,
    transparent 16px
  );
  pointer-events: none;
  z-index: 1;
}

/* Critical — flash при появі */
.alert-card--critical.is-new {
  animation:
    card-enter 0.22s ease both,
    new-critical-flash 0.8s ease 0.3s 3;
}

/* Resolved */
.alert-card--resolved {
  opacity: 0.35;
  filter: grayscale(0.6) brightness(0.85);
  border-color: var(--al-border) !important;
  background: rgba(0,0,0,0.15) !important;
  transform: none !important;
}
.alert-card--resolved::before { display: none; }
.alert-card--resolved .alert-card-accent { background: var(--border-metal) !important; }

/* Dismiss анімація */
.alert-card.is-dismissing {
  animation: card-dismiss 0.30s ease forwards;
  pointer-events: none;
}

/* Accent ліва смуга */
.alert-card-accent {
  width: 4px;
  flex-shrink: 0;
  position: relative;
}
.alert-card--critical .alert-card-accent { background: var(--al-critical); }
.alert-card--high .alert-card-accent     { background: var(--al-high); }
.alert-card--medium .alert-card-accent   { background: var(--al-medium); }
.alert-card--info .alert-card-accent     { background: var(--al-info); }

/* Нова картка — pulse accent */
.alert-card.is-new .alert-card-accent {
  animation: accent-pulse 0.7s ease 4;
}

/* Card content */
.alert-card-content {
  flex: 1;
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  /* Відступ для critical hazard stripe */
}
.alert-card--critical .alert-card-content {
  padding-top: 12px;
}

/* Card header */
.alert-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.alert-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Level badge — stamped rectangular */
.alert-level-badge {
  font-family: 'Oswald', var(--font-ui, sans-serif);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  padding: 2px 8px;
  border-radius: var(--forge-radius);
  text-transform: uppercase;
  border: 1px solid;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
}

.badge-critical {
  background: rgba(230, 57, 70, 0.18);
  color: var(--al-critical);
  border-color: rgba(230, 57, 70, 0.45);
  animation: stamp-appear 0.2s ease;
}
.badge-high {
  background: rgba(212, 132, 58, 0.16);
  color: var(--al-high);
  border-color: rgba(212, 132, 58, 0.40);
}
.badge-medium {
  background: rgba(232, 197, 74, 0.14);
  color: var(--al-medium);
  border-color: rgba(232, 197, 74, 0.38);
}
.badge-info {
  background: rgba(74, 157, 196, 0.12);
  color: var(--al-info);
  border-color: rgba(74, 157, 196, 0.30);
}

/* Time */
.alert-time,
.alert-time-rel {
  font-size: 10px;
  color: var(--al-muted);
  letter-spacing: 0.05em;
  font-family: var(--font-mono, 'IBM Plex Mono', monospace); /* FIX cc-704 */
  cursor: default;
}

/* Module tag */
.alert-module-tag {
  font-family: var(--font-ui, 'Oswald', sans-serif); /* UPPERCASE label — canon font */
  font-size: 9.5px;
  color: var(--al-muted);
  padding: 1px 8px;
  border: 1px solid var(--al-border);
  border-radius: var(--forge-radius);
  letter-spacing: 0.08em;
  font-weight: 400;
  text-transform: uppercase;
}
.alert-module-tag[data-module="#obs"]   { color: var(--mod-observer); border-color: rgba(86,163,166,0.30); background: rgba(86,163,166,0.06); }
.alert-module-tag[data-module="#pub"]   { color: var(--mod-publisher); border-color: rgba(201,147,42,0.30);  background: rgba(201,147,42,0.06); }
.alert-module-tag[data-module="#exc"]   { color: var(--mod-executor); border-color: rgba(193,68,24,0.30);   background: rgba(193,68,24,0.06); }
.alert-module-tag[data-module="#apl"]   { color: var(--mod-applicant); border-color: rgba(74,138,181,0.30);  background: rgba(74,138,181,0.06); }
.alert-module-tag[data-module="#nex"]   { color: var(--mod-nexus); border-color: rgba(0,212,170,0.30);   background: rgba(0,212,170,0.06); }
.alert-module-tag[data-module="#chl"]   { color: var(--mod-challenger); border-color: rgba(255,126,0,0.30);   background: rgba(255,126,0,0.06); }
.alert-module-tag[data-module="#pay"]   { color: var(--mod-paymaster); border-color: rgba(74,143,212,0.30);  background: rgba(74,143,212,0.06); }
.alert-module-tag[data-module="system"] { color: var(--al-yellow); border-color: rgba(242,193,78,0.28); background: rgba(242,193,78,0.06); }

/* Manual badge */
.alert-manual-badge {
  font-family: var(--font-ui, 'Oswald', sans-serif); /* UPPERCASE label — canon font */
  font-size: 9px;
  color: var(--al-yellow);
  padding: 1px 6px;
  border: 1px solid rgba(242, 193, 78, 0.30);
  border-radius: var(--forge-radius);
  background: rgba(242, 193, 78, 0.08);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Card title */
.alert-title {
  font-family: 'Barlow', var(--font-ui, sans-serif);
  font-size: 13px;
  font-weight: 500;
  color: var(--al-text);
  letter-spacing: 0.01em;
  line-height: 1.4;
  margin: 0;
}

.alert-details {
  font-family: 'Barlow', var(--font-ui, sans-serif);
  font-size: 11px;
  color: var(--al-muted);
  line-height: 1.55;
  margin: 0;
  opacity: 0.90;
}

/* Card footer */
.alert-card-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 1px;
}

/* Source badge */
.alert-source {
  font-family: var(--font-ui, 'Oswald', sans-serif); /* UPPERCASE label — canon font */
  font-size: 9.5px;
  color: var(--al-muted);
  letter-spacing: 0.06em;
  padding: 2px 8px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--al-border);
  border-radius: var(--forge-radius);
  white-space: nowrap;
  text-transform: uppercase;
}

.alert-footer-spacer { flex: 1; }

/* Dismiss button */
.alert-dismiss-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 1px solid var(--al-border);
  color: var(--al-muted);
  font-family: 'Oswald', var(--font-ui, sans-serif);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--forge-radius);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
  box-shadow: var(--forge-bevel);
}
.alert-dismiss-btn:hover {
  background: rgba(76, 175, 80, 0.08);
  border-color: rgba(76, 175, 80, 0.32);
  color: var(--success);
}
.alert-dismiss-btn .material-symbols-outlined {
  font-size: 12px;
  text-transform: none; /* fix: parent uppercase ламав material ligatures */
}

/* A2: Quick-actions — icon-only кнопки, показуються при hover картки */
.alert-quick-actions {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  opacity: 0;
  transform: translateX(6px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.alert-card:hover .alert-quick-actions,
.alert-card:focus-within .alert-quick-actions {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.alert-qa-btn {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--al-border);
  color: var(--al-muted);
  border-radius: var(--forge-radius);
  cursor: pointer;
  padding: 0;
  box-shadow: var(--forge-bevel);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.alert-qa-btn:hover {
  background: rgba(201, 162, 74, 0.12);
  border-color: rgba(201, 162, 74, 0.50);
  color: var(--accent-brass, #c9a24a);
}
.alert-qa-btn .material-symbols-outlined { font-size: 13px; }
.alert-qa-btn.is-copied {
  background: rgba(76, 175, 80, 0.15);
  border-color: rgba(76, 175, 80, 0.55);
  color: var(--success);
}
.alert-qa-btn:focus-visible {
  outline: 2px solid var(--accent-brass, #c9a24a);
  outline-offset: 2px;
}

/* Restore button */
.alert-restore-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 1px solid var(--al-border);
  color: var(--al-muted);
  font-family: 'Oswald', var(--font-ui, sans-serif);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--forge-radius);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
  box-shadow: var(--forge-bevel);
}
.alert-restore-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--al-text);
}
.alert-restore-btn .material-symbols-outlined { font-size: 12px; }

/* Action link button */
.alert-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Oswald', var(--font-ui, sans-serif);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--al-yellow);
  text-decoration: none;
  padding: 3px 8px;
  border: 1px solid rgba(242, 193, 78, 0.28);
  border-radius: var(--forge-radius);
  background: rgba(242, 193, 78, 0.07);
  transition: background 0.15s ease, border-color 0.15s ease;
  flex-shrink: 0;
  box-shadow: var(--forge-bevel);
}
.alert-action-btn:hover {
  background: rgba(242, 193, 78, 0.14);
  border-color: rgba(242, 193, 78, 0.45);
}


/* ================================================================
   SILENCE BUTTON + DROPDOWN
   ================================================================ */

.al-silence-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  color: var(--al-muted);
  cursor: pointer;
  padding: 3px 4px;
  border-radius: var(--forge-radius);
  font-size: 12px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}
.al-silence-btn:hover {
  background: rgba(232, 197, 74, 0.07);
  border-color: rgba(232, 197, 74, 0.22);
  color: var(--al-medium);
}
.al-silence-btn.is-silenced {
  background: rgba(232, 197, 74, 0.10);
  border-color: rgba(232, 197, 74, 0.30);
  color: var(--al-medium);
}
.al-silence-btn .material-symbols-outlined { font-size: 12px; }

.al-silence-dropdown {
  position: absolute;
  z-index: 200;
  min-width: 170px;
  background: var(--al-surface-2);
  border: 1px solid var(--al-border);
  border-radius: var(--forge-radius);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.60);
  overflow: hidden;
  animation: hint-slide-down 0.12s ease;
}
.al-silence-dropdown-item {
  display: block;
  width: 100%;
  padding: 8px 14px;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--al-muted);
  font-family: var(--font-ui, 'Oswald', sans-serif); /* UPPERCASE label — canon font */
  font-size: 11px;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.al-silence-dropdown-item:last-child { border-bottom: none; }
.al-silence-dropdown-item:hover {
  background: rgba(242, 193, 78, 0.08);
  color: var(--al-yellow);
}
.al-silence-dropdown-item.is-remove { color: var(--al-medium); }
.al-silence-dropdown-item.is-remove:hover {
  background: rgba(232, 197, 74, 0.08);
  color: var(--al-medium);
}


/* ================================================================
   AGGREGATE CARD
   ================================================================ */

.alert-card--aggregate {
  border-style: dashed;
  border-color: var(--al-border);
}
.alert-card--aggregate .alert-title {
  font-size: 12px;
  color: var(--al-muted);
}

.alert-agg-toggle {
  background: transparent;
  border: 1px solid var(--al-border);
  color: var(--al-muted);
  font-family: var(--font-ui, 'Oswald', sans-serif); /* UPPERCASE label — canon font */
  font-size: 10px;
  padding: 2px 8px;
  border-radius: var(--forge-radius);
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.alert-agg-toggle:hover {
  color: var(--al-text);
  border-color: rgba(255,255,255,0.14);
}
.alert-agg-children {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  margin-top: 6px;
  padding-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.alert-agg-child {
  padding: 4px 8px;
  border-radius: var(--forge-radius);
  background: rgba(0, 0, 0, 0.2);
  font-size: 11px;
  color: var(--al-muted);
  font-family: var(--font-mono, 'IBM Plex Mono', monospace); /* FIX cc-704 */
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,0.03);
}


/* ================================================================
   BADGE "НОВІ"
   ================================================================ */

.al-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--forge-radius);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  margin-left: 3px;
  font-family: var(--font-mono, 'IBM Plex Mono', monospace); /* FIX cc-704 */
}
.al-badge--new {
  background: rgba(242, 193, 78, 0.18);
  color: var(--al-yellow);
  border: 1px solid rgba(242, 193, 78, 0.38);
  animation: lock-pulse 2s ease-in-out infinite;
}


/* ================================================================
   HISTORY FEED
   ================================================================ */

.alerts-history-feed {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 10px 0 64px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hist-sparkline-wrap {
  margin-bottom: 10px;
  padding: 10px 14px;
  background: var(--al-surface);
  border: 1px solid var(--al-border);
  border-radius: var(--forge-radius);
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--forge-inset);
}
.hist-sparkline-label {
  font-family: var(--font-ui, 'Oswald', sans-serif); /* UPPERCASE label — canon font */
  font-size: 10px;
  color: var(--al-muted);
  letter-spacing: 0.08em;
  white-space: nowrap;
  text-transform: uppercase;
}
.hist-sparkline-wrap svg {
  display: block;
  overflow: visible;
}

.hist-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 8px 14px;
  border-radius: var(--forge-radius);
  border: 1px solid var(--al-border);
  background: var(--al-surface);
  transition: background 0.15s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.hist-row:hover { background: rgba(255, 255, 255, 0.02); }

.hist-time {
  font-size: 10px;
  color: var(--al-muted);
  font-family: var(--font-mono, 'IBM Plex Mono', monospace); /* FIX cc-704 */
  white-space: nowrap;
  min-width: 120px;
  padding-top: 2px;
  letter-spacing: 0.04em;
}

.hist-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hist-pills {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

/* History pills — stamped rectangular */
.hist-pill {
  font-family: 'Oswald', var(--font-ui, sans-serif);
  font-size: 9px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: var(--forge-radius);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border: 1px solid;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.4);
}
.hist-pill--critical { background: rgba(230,57,70,0.14);   color: var(--al-critical); border-color: rgba(230,57,70,0.30); }
.hist-pill--high     { background: rgba(212,132,58,0.14);  color: var(--al-high);     border-color: rgba(212,132,58,0.28); }
.hist-pill--medium   { background: rgba(232,197,74,0.12);  color: var(--al-medium);   border-color: rgba(232,197,74,0.26); }
.hist-pill--info     { background: rgba(74,157,196,0.10);  color: var(--al-info);     border-color: rgba(74,157,196,0.22); }
.hist-pill--ok       { background: rgba(76,175,80,0.08);   color: var(--success);            border-color: rgba(76,175,80,0.20); }

.hist-titles {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.hist-title {
  font-family: 'Barlow', var(--font-ui, sans-serif);
  font-size: 10px;
  color: var(--al-muted);
}
.hist-title--critical { color: var(--al-critical); }
.hist-title--high     { color: var(--al-high); }
.hist-title--medium   { color: var(--al-medium); }

.hist-more {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace); /* FIX cc-704 */
  font-size: 10px;
  color: var(--al-muted);
  font-style: italic;
}

.alerts-load-more-btn {
  display: block;
  width: 100%;
  padding: 10px;
  background: transparent;
  border: 1px dashed rgba(255,255,255,0.10);
  border-radius: var(--forge-radius);
  color: var(--al-muted);
  font-family: 'Oswald', var(--font-ui, sans-serif);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 8px;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.alerts-load-more-btn:hover {
  border-color: rgba(242,193,78,0.30);
  color: var(--al-yellow);
  background: rgba(242,193,78,0.04);
}


/* ================================================================
   LOADING / EMPTY / ERROR — stamped plate states
   ================================================================ */

.alerts-loading-inline,
.alerts-empty-inline,
.alerts-error-inline {
  text-align: center;
  padding: 40px;
  font-family: var(--font-ui, 'Oswald', sans-serif); /* UPPERCASE label — canon font */
  font-size: 11px;
  color: var(--al-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Централізований контейнер станів — показує тільки один стан за раз */
.alerts-states {
  position: relative;
}
.alerts-states > [data-state-key] { display: none; }
.alerts-states[data-state="loading"] > [data-state-key="loading"],
.alerts-states[data-state="empty"]   > [data-state-key="empty"],
.alerts-states[data-state="error"]   > [data-state-key="error"] {
  display: flex;
}
.alerts-states[data-state="loaded"] { display: none; }

.alerts-loading,
.alerts-empty,
.alerts-error {
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 16px;
  font-family: 'Oswald', var(--font-ui, sans-serif);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  max-width: var(--max-width);
  margin: 0 auto;
  color: var(--al-muted);
}

.alerts-error { color: var(--al-critical); }

.alerts-loading-icon {
  font-size: 24px;
  animation: spin 1.2s linear infinite;
  color: var(--al-yellow);
}
.alerts-empty .material-symbols-outlined,
.alerts-error .material-symbols-outlined {
  font-size: 24px;
  opacity: 0.50;
}
.alerts-error .material-symbols-outlined { opacity: 0.70; color: var(--al-critical); }


/* ================================================================
   RESPONSIVE
   ================================================================ */

@media (max-width: 900px) {
  .al-hud-meter-label { display: none; }
  .al-hud-status { min-width: 110px; }
}

@media (max-width: 700px) {
  .devtools-hdr-actions { width: 100%; }

  .al-hud-strip {
    flex-wrap: wrap;
    padding-bottom: 8px;
  }
  .al-hud-status {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--al-border);
  }
  .al-hud-meters {
    padding: 8px 10px;
    flex: 1;
  }
  .al-hud-timestamp {
    border-left: none;
    padding: 0 10px;
    margin-left: 0;
  }

  .alerts-controls {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .al-custom-row--inline { flex-direction: column; }
  .hist-time { min-width: 90px; }
  .alert-card-footer { gap: 4px; }

  .al-threat-banner { padding-right: 14px; }
  .al-header-identity { gap: 8px; }

  .dt-bolt--tl,
  .dt-bolt--tr { top: 6px; }
  .dt-bolt--bl,
  .dt-bolt--br { bottom: 6px; }
}

@media (max-width: 480px) {
  .al-hud-meters { gap: 0; }
  .al-hud-meter  { padding: 4px; }
  .al-hud-meter-count { font-size: 12px; }
  .al-page {
    background-size: 24px 24px;
  }
}


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║  STEAMPUNK OVERRIDES v1.1 — Phase 1.2                            ║
   ║  100% SSOT: КОЖЕН колір через var() з dev-tools-base.css          ║
   ║  Ієрархія контрасту (від темного до світлого):                    ║
   ║    --bg-void (var(--bg-void))     → фон сторінки                         ║
   ║    --bg-base (var(--bg-base))     → sub-surfaces, inset-and-darker       ║
   ║    --bg-surface (var(--bg-surface))  → картки, таблиці, панелі              ║
   ║    --bg-elevated (var(--bg-elevated)) → header, HUD, modal                   ║
   ║    --bg-hover (var(--bg-hover))    → hover states                         ║
   ║  Текст: --text-bright (var(--text-bright)) для основного (максимальний       ║
   ║  контраст), --text-body для вторинного, --text-muted для підписів ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* ─── Анімація обертання декоративних шестерень ─── */
@keyframes al-sp-gear-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes al-sp-gear-slow-rev {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

/* ─── Body: найтемніший шар (--bg-void) ─── */
.dev-tools-scope.al-page {
  background:
    /* Vignette — затемнення країв */
    radial-gradient(
      ellipse 120% 80% at 50% 35%,
      transparent 0%,
      rgba(0, 0, 0, 0.50) 80%,
      rgba(0, 0, 0, 0.80) 100%
    ),
    /* Молот-штрихи (дуже тонкі) */
    repeating-linear-gradient(
      178deg,
      rgba(197, 139, 58, 0.020) 0px,
      rgba(197, 139, 58, 0.020) 1px,
      transparent 1px,
      transparent 5px
    ),
    /* Основний суцільний найтемніший SSOT тон */
    var(--bg-void) !important;
  background-attachment: fixed !important;
  min-height: 100vh;
  /* ВАЖЛИВО: основний текст сторінки — найяскравіший для читабельності */
  color: var(--text-bright) !important;
}

/* Декоративні шестерні на фоні — 2 великих в кутах */
.dev-tools-scope.al-page::before {
  content: '';
  position: fixed;
  top: -120px;
  right: -140px;
  width: 440px;
  height: 440px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg transform='translate(100 100)' fill='none' stroke='%235c4430' stroke-width='2'%3E%3Ccircle r='82' stroke-opacity='0.35'/%3E%3Ccircle r='64' stroke-opacity='0.3'/%3E%3Ccircle r='46' stroke-opacity='0.3'/%3E%3Ccircle r='14' stroke-opacity='0.45'/%3E%3Cg stroke-opacity='0.35'%3E%3Crect x='-5' y='-95' width='10' height='18' rx='1.5'/%3E%3Crect x='-5' y='-95' width='10' height='18' rx='1.5' transform='rotate(30)'/%3E%3Crect x='-5' y='-95' width='10' height='18' rx='1.5' transform='rotate(60)'/%3E%3Crect x='-5' y='-95' width='10' height='18' rx='1.5' transform='rotate(90)'/%3E%3Crect x='-5' y='-95' width='10' height='18' rx='1.5' transform='rotate(120)'/%3E%3Crect x='-5' y='-95' width='10' height='18' rx='1.5' transform='rotate(150)'/%3E%3Crect x='-5' y='-95' width='10' height='18' rx='1.5' transform='rotate(180)'/%3E%3Crect x='-5' y='-95' width='10' height='18' rx='1.5' transform='rotate(210)'/%3E%3Crect x='-5' y='-95' width='10' height='18' rx='1.5' transform='rotate(240)'/%3E%3Crect x='-5' y='-95' width='10' height='18' rx='1.5' transform='rotate(270)'/%3E%3Crect x='-5' y='-95' width='10' height='18' rx='1.5' transform='rotate(300)'/%3E%3Crect x='-5' y='-95' width='10' height='18' rx='1.5' transform='rotate(330)'/%3E%3C/g%3E%3Cg stroke-opacity='0.3' stroke-width='6'%3E%3Cline x1='0' y1='-60' x2='0' y2='60'/%3E%3Cline x1='-60' y1='0' x2='60' y2='0'/%3E%3Cline x1='-42' y1='-42' x2='42' y2='42'/%3E%3Cline x1='-42' y1='42' x2='42' y2='-42'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  animation: al-sp-gear-slow 160s linear infinite;
  pointer-events: none;
  z-index: 0;
  opacity: 0.65;
}

.dev-tools-scope.al-page::after {
  content: '';
  position: fixed;
  bottom: -160px;
  left: -180px;
  width: 520px;
  height: 520px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg transform='translate(100 100)' fill='none' stroke='%238c6b46' stroke-width='1.8'%3E%3Ccircle r='80' stroke-opacity='0.28'/%3E%3Ccircle r='60' stroke-opacity='0.24'/%3E%3Ccircle r='38' stroke-opacity='0.22'/%3E%3Ccircle r='12' stroke-opacity='0.35'/%3E%3Cg stroke-opacity='0.28'%3E%3Crect x='-4' y='-92' width='8' height='16' rx='1.5'/%3E%3Crect x='-4' y='-92' width='8' height='16' rx='1.5' transform='rotate(36)'/%3E%3Crect x='-4' y='-92' width='8' height='16' rx='1.5' transform='rotate(72)'/%3E%3Crect x='-4' y='-92' width='8' height='16' rx='1.5' transform='rotate(108)'/%3E%3Crect x='-4' y='-92' width='8' height='16' rx='1.5' transform='rotate(144)'/%3E%3Crect x='-4' y='-92' width='8' height='16' rx='1.5' transform='rotate(180)'/%3E%3Crect x='-4' y='-92' width='8' height='16' rx='1.5' transform='rotate(216)'/%3E%3Crect x='-4' y='-92' width='8' height='16' rx='1.5' transform='rotate(252)'/%3E%3Crect x='-4' y='-92' width='8' height='16' rx='1.5' transform='rotate(288)'/%3E%3Crect x='-4' y='-92' width='8' height='16' rx='1.5' transform='rotate(324)'/%3E%3C/g%3E%3Cg stroke-opacity='0.25' stroke-width='5'%3E%3Cline x1='0' y1='-55' x2='0' y2='55'/%3E%3Cline x1='-55' y1='0' x2='55' y2='0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  animation: al-sp-gear-slow-rev 220s linear infinite;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
}

/* Весь контент має бути ПОНАД декоративними шестернями */
.dev-tools-scope.al-page > * {
  position: relative;
  z-index: 1;
}

/* ─── HEADER: Найсвітліший шар (--bg-elevated) для контрасту з фоном ─── */
.dev-tools-scope.al-page .al-header {
  background:
    /* Вертикальні молот-штрихи */
    repeating-linear-gradient(
      91deg,
      rgba(232, 219, 178, 0.014) 0px,
      rgba(232, 219, 178, 0.022) 1px,
      transparent 2px,
      transparent 8px
    ),
    /* Горизонтальні шари кування */
    repeating-linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.08) 0px,
      transparent 1px,
      transparent 5px
    ),
    /* Металевий градієнт: зверху --bg-elevated → низ --bg-base */
    linear-gradient(
      180deg,
      var(--bg-elevated) 0%,
      var(--bg-surface) 50%,
      var(--bg-base) 100%
    ) !important;
  border-bottom: 2px solid var(--bg-void) !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 219, 178, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.85),
    inset 0 -3px 8px rgba(0, 0, 0, 0.55),
    0 4px 0 rgba(197, 139, 58, 0.12),
    0 6px 20px rgba(0, 0, 0, 0.6),
    0 12px 40px rgba(0, 0, 0, 0.3) !important;
}

/* Header icon — мідний патінований кулон (використовує border-bright=8c6b46 + border-metal=5c4430) */
.dev-tools-scope.al-page .al-header-icon-wrap {
  background: radial-gradient(
    circle at 35% 30%,
    var(--border-bright) 0%,
    var(--border-metal) 35%,
    var(--bg-elevated) 80%
  ) !important;
  border: 1.5px solid var(--bg-void) !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 219, 178, 0.28),
    inset 0 -2px 3px rgba(0, 0, 0, 0.75),
    0 2px 4px rgba(0, 0, 0, 0.85),
    0 0 0 2px rgba(92, 68, 48, 0.35),
    0 0 12px rgba(197, 139, 58, 0.15) !important;
}
.dev-tools-scope.al-page .al-header-icon {
  color: var(--accent-brass-hover) !important;
  filter: drop-shadow(0 1px 0 var(--bg-void)) drop-shadow(0 0 4px rgba(216, 157, 72, 0.45));
}

.dev-tools-scope.al-page .al-title {
  color: var(--text-bright) !important;
  text-shadow:
    0 1px 0 var(--bg-void),
    0 2px 3px rgba(0, 0, 0, 0.85),
    0 0 10px rgba(197, 139, 58, 0.1) !important;
  letter-spacing: 0.08em;
}
.dev-tools-scope.al-page .al-header-subtitle {
  color: var(--accent-brass) !important;
  letter-spacing: 0.22em;
  font-size: 10px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9);
}

/* ─── HUD STRIP: Пульт приладів (--bg-surface поверх --bg-void) ─── */
/* Попередній HUD strip override прибрано — використовується блок нижче (секція 4) */
/* Заклепки по кутах HUD strip (використовують pewter-family з SSOT) */
.dev-tools-scope.al-page .al-hud-strip::before,
.dev-tools-scope.al-page .al-hud-strip::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 32% 28%,
    var(--pewter-highlight) 0%,
    var(--pewter-light) 22%,
    var(--pewter-mid) 55%,
    var(--pewter-dark) 85%,
    var(--bg-void) 100%
  );
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.85),
    inset 0 0.5px 0.5px rgba(255, 255, 255, 0.40),
    0 1px 2px rgba(0, 0, 0, 0.9);
}
.dev-tools-scope.al-page .al-hud-strip::before {
  top: 6px;
  left: 8px;
}
.dev-tools-scope.al-page .al-hud-strip::after {
  top: 6px;
  right: 8px;
}

/* HUD meters — "манометри" на --bg-base */
.dev-tools-scope.al-page .al-hud-meter {
  background:
    linear-gradient(180deg,
      var(--bg-base) 0%,
      var(--bg-void) 100%
    ) !important;
  border: 1px solid rgba(92, 68, 48, 0.55) !important;
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.85),
    inset 0 0 8px rgba(0, 0, 0, 0.55),
    0 1px 0 rgba(232, 219, 178, 0.05) !important;
  padding: 6px 10px !important;
  border-radius: 2px;
}
.dev-tools-scope.al-page .al-hud-meter.has-alerts {
  border-color: rgba(197, 139, 58, 0.55) !important;
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.85),
    inset 0 0 8px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(197, 139, 58, 0.22),
    0 0 8px rgba(197, 139, 58, 0.15) !important;
}

.dev-tools-scope.al-page .al-hud-status {
  background: linear-gradient(180deg, var(--bg-base) 0%, var(--bg-void) 100%) !important;
  border: 1px solid rgba(92, 68, 48, 0.55) !important;
  padding: 8px 12px !important;
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.85),
    0 1px 0 rgba(232, 219, 178, 0.05) !important;
}
.dev-tools-scope.al-page .al-hud-status-label {
  color: var(--text-bright) !important;
}
.dev-tools-scope.al-page .al-hud-meter-label,
.dev-tools-scope.al-page .al-hud-meter-count {
  color: var(--text-bright) !important;
}

/* ─── THREAT BANNER: Табличка попередження (--bg-elevated підйом) ─── */
.dev-tools-scope.al-page .al-threat-banner {
  background:
    repeating-linear-gradient(
      91deg,
      rgba(232, 219, 178, 0.012) 0px,
      transparent 1px,
      transparent 6px
    ),
    linear-gradient(180deg,
      var(--bg-elevated) 0%,
      var(--bg-surface) 50%,
      var(--bg-base) 100%
    ) !important;
  border: 1.5px solid rgba(92, 68, 48, 0.65) !important;
  border-left: 4px solid var(--accent-brass) !important;
  border-radius: 2px;
  color: var(--text-bright) !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 219, 178, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.75),
    inset 0 2px 6px rgba(0, 0, 0, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.7),
    0 6px 18px rgba(0, 0, 0, 0.4) !important;
}
.dev-tools-scope.al-page .al-threat-banner.state-critical {
  border-left-color: var(--log-critical) !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 219, 178, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.75),
    inset 0 2px 6px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(193, 68, 24, 0.45),
    0 0 16px rgba(193, 68, 24, 0.25),
    0 6px 18px rgba(0, 0, 0, 0.5) !important;
}
.dev-tools-scope.al-page .al-threat-banner.state-warn {
  border-left-color: var(--log-warn) !important;
}
.dev-tools-scope.al-page .al-threat-banner.state-ok {
  border-left-color: var(--success) !important;
}
.dev-tools-scope.al-page .al-threat-banner-label {
  color: var(--accent-brass) !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9);
  letter-spacing: 0.18em;
}

/* ─── TABS: Важелі пульта (контейнер заглиблений у --bg-base) ─── */
.dev-tools-scope.al-page .alerts-tabs {
  background:
    linear-gradient(180deg, var(--bg-base) 0%, var(--bg-void) 100%) !important;
  border: 1.5px solid rgba(92, 68, 48, 0.55) !important;
  border-radius: 3px;
  padding: 4px !important;
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.85),
    inset 0 -1px 0 rgba(232, 219, 178, 0.05),
    0 2px 4px rgba(0, 0, 0, 0.65) !important;
}
.dev-tools-scope.al-page .alerts-tab {
  background: transparent !important;
  color: var(--text-body) !important;
  border: 1px solid transparent !important;
  padding: 8px 14px !important;
  border-radius: 2px;
  letter-spacing: 0.05em;
  transition: all 0.2s ease;
}
.dev-tools-scope.al-page .alerts-tab:hover {
  background: rgba(92, 68, 48, 0.25) !important;
  color: var(--text-bright) !important;
  border-color: rgba(140, 107, 70, 0.35) !important;
}
.dev-tools-scope.al-page .alerts-tab--active {
  background:
    linear-gradient(180deg,
      var(--bg-elevated) 0%,
      var(--bg-surface) 100%
    ) !important;
  color: var(--accent-brass-hover) !important;
  border: 1px solid rgba(197, 139, 58, 0.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 219, 178, 0.12),
    inset 0 -1px 2px rgba(0, 0, 0, 0.65),
    0 1px 0 rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 0 8px rgba(197, 139, 58, 0.18) !important;
  text-shadow: 0 1px 0 var(--bg-void), 0 0 4px rgba(216, 157, 72, 0.35);
}
.dev-tools-scope.al-page .alerts-tab--active .tab-count {
  color: var(--accent-brass-hover) !important;
}

/* ─── CARDS: Картки на --bg-surface (контраст з --bg-void фоном) ─── */
.dev-tools-scope.al-page .alerts-feed > * {
  background:
    repeating-linear-gradient(
      93deg,
      rgba(232, 219, 178, 0.008) 0px,
      transparent 1px,
      transparent 6px
    ),
    linear-gradient(180deg,
      var(--bg-surface) 0%,
      var(--bg-base) 100%
    ) !important;
  border: 1px solid rgba(92, 68, 48, 0.55) !important;
  border-left-width: 4px !important;
  border-radius: 2px !important;
  color: var(--text-bright) !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 219, 178, 0.05),
    inset 0 -1px 0 rgba(0, 0, 0, 0.85),
    inset 0 2px 4px rgba(0, 0, 0, 0.35),
    0 2px 4px rgba(0, 0, 0, 0.55),
    0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* ─── INPUTS / SELECTS у controls ─── */
.dev-tools-scope.al-page .alerts-filter-select,
.dev-tools-scope.al-page .al-interval-select {
  background: linear-gradient(180deg, var(--bg-base) 0%, var(--bg-void) 100%) !important;
  color: var(--text-bright) !important;
  border: 1px solid rgba(92, 68, 48, 0.65) !important;
  border-radius: 2px;
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.85),
    0 1px 0 rgba(232, 219, 178, 0.05) !important;
}
.dev-tools-scope.al-page .alerts-filter-select:hover,
.dev-tools-scope.al-page .al-interval-select:hover {
  border-color: var(--border-bright) !important;
}

/* ─── BUTTONS: brass кнопки на --bg-elevated → --bg-base ─── */
.dev-tools-scope.al-page .al-refresh-btn,
.dev-tools-scope.al-page .al-icon-btn,
.dev-tools-scope.al-page .al-notif-btn,
.dev-tools-scope.al-page .al-group-btn {
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-base) 100%) !important;
  color: var(--accent-brass-hover) !important;
  border: 1px solid rgba(92, 68, 48, 0.65) !important;
  border-radius: 2px;
  box-shadow:
    inset 0 1px 0 rgba(232, 219, 178, 0.10),
    inset 0 -1px 2px rgba(0, 0, 0, 0.55),
    0 1px 0 rgba(0, 0, 0, 0.75),
    0 2px 3px rgba(0, 0, 0, 0.5) !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.85);
}
.dev-tools-scope.al-page .al-refresh-btn:hover,
.dev-tools-scope.al-page .al-icon-btn:hover,
.dev-tools-scope.al-page .al-notif-btn:hover,
.dev-tools-scope.al-page .al-group-btn:hover {
  background: linear-gradient(180deg, var(--bg-hover) 0%, var(--bg-surface) 100%) !important;
  border-color: var(--accent-brass) !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 219, 178, 0.14),
    inset 0 -1px 2px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(197, 139, 58, 0.35),
    0 0 8px rgba(197, 139, 58, 0.2),
    0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

/* ─── SUBTITLE: Гравійована підпис-стрічка ─── */
.dev-tools-scope.al-page .devtools-subtitle {
  background: linear-gradient(180deg, var(--bg-base) 0%, var(--bg-void) 100%) !important;
  color: var(--text-body) !important;
  border-bottom: 1px solid rgba(92, 68, 48, 0.45) !important;
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.65),
    inset 0 -1px 0 rgba(232, 219, 178, 0.05) !important;
  letter-spacing: 0.05em;
}


/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║  STEAMPUNK ARCH v2.0 — Архітектурна переробка                            ║
   ║  Форма · Глибина · Механіка · Фізичність                                 ║
   ║  Специфічність: .dev-tools-scope.al-page → перекриває все вище           ║
   ║  Палітра: 100% SSOT (dev-tools-base.css)                                 ║
   ╚═══════════════════════════════════════════════════════════════════════════╝ */

/* ═══════════════════════════════════════════════════════════════
   НОВІ АНІМАЦІЇ — character + physicality
   ═══════════════════════════════════════════════════════════════ */

/* Manometer pressure-pulse — НЕ flat opacity, а справжній тиск */
@keyframes al-arch-pressure {
  0%   { transform: scaleY(1);    opacity: 1; }
  40%  { transform: scaleY(1.06); opacity: 0.9; }
  55%  { transform: scaleY(0.97); opacity: 1; }
  100% { transform: scaleY(1);    opacity: 1; }
}

/* Stamp — картка "вдаряється" на появу як штамп */
@keyframes al-arch-stamp {
  0%   { transform: scaleX(1.04) scaleY(1.07); opacity: 0.6;
         box-shadow: 0 20px 60px rgba(0,0,0,0.85); }
  60%  { transform: scaleX(0.99) scaleY(0.99); opacity: 1;
         box-shadow: 0 2px 8px rgba(0,0,0,0.6); }
  80%  { transform: scaleX(1.005) scaleY(1.005); }
  100% { transform: scaleX(1) scaleY(1);
         box-shadow: 0 4px 12px rgba(0,0,0,0.55); }
}

/* Key-turn — рефреш кнопка крутиться як ключ: 45° → -10° → 0° */
@keyframes al-arch-keyturn {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(48deg); }
  65%  { transform: rotate(-12deg); }
  85%  { transform: rotate(6deg); }
  100% { transform: rotate(0deg); }
}

/* Tab lever-click — важіль натискається + пружина */
@keyframes al-arch-lever {
  0%   { transform: translateY(0) scaleY(1); }
  30%  { transform: translateY(2px) scaleY(0.96); }
  65%  { transform: translateY(-1px) scaleY(1.02); }
  100% { transform: translateY(0) scaleY(1); }
}

/* Signal lamp — пульс тиску (не flat glow) */
@keyframes al-arch-lamp-critical {
  0%, 100% { box-shadow: 0 0 4px rgba(193, 68, 24, 0.5),
                          inset 0 1px 2px rgba(0,0,0,0.6); }
  45%       { box-shadow: 0 0 12px rgba(193, 68, 24, 0.9),
                          0 0 20px rgba(193, 68, 24, 0.4),
                          inset 0 1px 2px rgba(0,0,0,0.3); }
}

/* Gear micro-spin — маленькі вбудовані шестерні */
@keyframes al-arch-gear-micro {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes al-arch-gear-micro-rev {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

/* Forge-heat — border підсвічується як розжарений метал */
@keyframes al-arch-heat {
  0%, 100% { border-color: rgba(92, 68, 48, 0.65); }
  50%       { border-color: rgba(197, 139, 58, 0.55); }
}

/* Rivet-appear — заклепки з'являються */
@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; }
}


/* ═══════════════════════════════════════════════════════════════
   1. ФОРМА HEADER — трирівнева панель з виступаючими вставками
   ═══════════════════════════════════════════════════════════════ */

/* Відключаємо попередній override — перекриваємо з вищою специфічністю */
.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,
      var(--bg-elevated) 0%,
      var(--bg-base) 25%,
      var(--bg-base) 55%,
      var(--bg-base) 85%,
      var(--bg-elevated) 100%
    ) !important;
  border-bottom: 0 none !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  padding-bottom: 0 !important;
  box-shadow:
    /* Верхній brass-bevel — коронка балки */
    inset 0 2px 0 rgba(197, 139, 58, 0.30),
    inset 0 1px 0 rgba(232, 219, 178, 0.18),
    /* Нижній темний контр-bevel */
    inset 0 -2px 0 rgba(0, 0, 0, 0.90),
    /* Зовнішній обід */
    0 0 0 1px rgba(92, 68, 48, 0.70),
    /* Brass rail знизу — потужна лінія */
    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;
}

/* Декоративна нижня brass rail (pseudo, додаткова глибина) */
.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;
}

/* Заклепки header — з'являються з анімацією */
.dev-tools-scope.al-page .dt-bolt {
  width: 12px;
  height: 12px;
  background: radial-gradient(
    circle at 32% 28%,
    var(--pewter-highlight) 0%,
    var(--pewter-light)     25%,
    var(--pewter-mid)       55%,
    var(--pewter-dark)      82%,
    var(--bg-void)          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%);
}

/* Іконка header — мідна монета з рел'єфним зображенням */
.dev-tools-scope.al-page .al-header-icon-wrap {
  width: 42px !important;
  height: 42px !important;
  background: radial-gradient(
    ellipse at 32% 28%,
    var(--border-bright)    0%,
    var(--accent-brass-dim) 35%,
    var(--bg-elevated)      65%,
    var(--bg-base)          100%
  ) !important;
  border: 0 none !important;
  border-radius: 3px !important;
  box-shadow:
    /* Зовнішній обід */
    0 0 0 1px rgba(0,0,0,0.85),
    0 0 0 2px rgba(92, 68, 48, 0.55),
    0 0 0 3px rgba(0,0,0,0.7),
    /* Bevel зверху */
    inset 0 1.5px 0 rgba(197, 139, 58, 0.35),
    /* Inset тінь */
    inset 0 -2px 4px rgba(0,0,0,0.8),
    inset 0 0 12px rgba(0,0,0,0.5),
    /* Легкий warm glow */
    0 0 16px rgba(197, 139, 58, 0.18) !important;
  clip-path: polygon(2px 0, calc(100% - 2px) 0, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 0 calc(100% - 2px), 0 2px) !important;
}

/* Заголовок — викарбуваний */
.dev-tools-scope.al-page .al-title {
  font-family: 'Cinzel', 'Oswald', sans-serif !important;
  font-size: 17px !important;
  letter-spacing: 0.18em !important;
  color: var(--text-bright) !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;
}

/* Subtitle — гравюра на металі */
.dev-tools-scope.al-page .al-header-subtitle {
  font-size: 9px !important;
  letter-spacing: 0.28em !important;
  color: var(--accent-brass) !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,0.95),
    0 0 6px rgba(197, 139, 58, 0.3) !important;
}

/* Cinzel display шрифт — @import перенесено на початок файлу (CSS spec) */


/* ═══════════════════════════════════════════════════════════════
   2. КНОПКИ — механічні вентилі / важелі
   ═══════════════════════════════════════════════════════════════ */

/* Refresh — ключ запалювання */
.dev-tools-scope.al-page .al-refresh-btn {
  background: linear-gradient(
    165deg,
    var(--bg-hover)    0%,
    var(--bg-elevated) 40%,
    var(--bg-surface)  70%,
    var(--bg-base)     100%
  ) !important;
  border: 1px solid rgba(92, 68, 48, 0.75) !important;
  border-radius: 3px !important;
  color: var(--accent-brass-hover) !important;
  font-family: 'Oswald', sans-serif !important;
  letter-spacing: 0.15em !important;
  padding: 8px 18px !important;
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px) !important;
  box-shadow:
    inset 0 2px 0 rgba(197, 139, 58, 0.20),
    inset 0 1px 0 rgba(232, 219, 178, 0.12),
    inset 0 -2px 4px rgba(0,0,0,0.75),
    0 0 0 1px rgba(0,0,0,0.85),
    0 2px 0 rgba(0,0,0,0.9),
    0 4px 8px rgba(0,0,0,0.6),
    0 0 12px rgba(197, 139, 58, 0.1) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.9), 0 0 5px rgba(197, 139, 58, 0.25);
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative;
}
.dev-tools-scope.al-page .al-refresh-btn:hover {
  background: linear-gradient(
    165deg,
    var(--bg-hover)    0%,
    var(--bg-hover)    30%,
    var(--bg-elevated) 65%,
    var(--bg-surface)  100%
  ) !important;
  border-color: var(--accent-brass) !important;
  box-shadow:
    inset 0 2px 0 rgba(197, 139, 58, 0.30),
    inset 0 -2px 4px rgba(0,0,0,0.7),
    0 0 0 1px rgba(0,0,0,0.85),
    0 0 0 2px rgba(197, 139, 58, 0.35),
    0 2px 0 rgba(0,0,0,0.9),
    0 4px 8px rgba(0,0,0,0.6),
    0 0 18px rgba(197, 139, 58, 0.22) !important;
  transform: translateY(-1px) !important;
}
/* Натискання — фізичне "клацання" */
.dev-tools-scope.al-page .al-refresh-btn:active {
  transform: translateY(1px) !important;
  box-shadow:
    inset 0 3px 6px rgba(0,0,0,0.85),
    inset 0 1px 0 rgba(197, 139, 58, 0.08),
    0 0 0 1px rgba(0,0,0,0.85),
    0 1px 2px rgba(0,0,0,0.7) !important;
}
/* Ключ-обертання при спінінгу */
.dev-tools-scope.al-page .al-refresh-btn.spinning .material-symbols-outlined {
  animation: al-arch-keyturn 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
}

/* Icon кнопки — круглі вентилі */
.dev-tools-scope.al-page .al-icon-btn,
.dev-tools-scope.al-page .al-notif-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: radial-gradient(
    ellipse at 35% 30%,
    var(--bg-hover)    0%,
    var(--bg-elevated) 45%,
    var(--bg-base)     100%
  ) !important;
  border: 1px solid rgba(92, 68, 48, 0.7) !important;
  color: var(--text-body) !important;
  box-shadow:
    inset 0 1px 0 rgba(197, 139, 58, 0.15),
    inset 0 -2px 3px rgba(0,0,0,0.7),
    0 0 0 1px rgba(0,0,0,0.8),
    0 2px 4px rgba(0,0,0,0.65) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.dev-tools-scope.al-page .al-icon-btn:hover,
.dev-tools-scope.al-page .al-notif-btn:hover {
  color: var(--accent-brass-hover) !important;
  border-color: rgba(197, 139, 58, 0.65) !important;
  box-shadow:
    inset 0 1px 0 rgba(197, 139, 58, 0.25),
    inset 0 -2px 3px rgba(0,0,0,0.6),
    0 0 0 1px rgba(0,0,0,0.8),
    0 0 0 2px rgba(197, 139, 58, 0.28),
    0 0 12px rgba(197, 139, 58, 0.18),
    0 3px 6px rgba(0,0,0,0.6) !important;
  transform: scale(1.06) !important;
}
.dev-tools-scope.al-page .al-icon-btn:active,
.dev-tools-scope.al-page .al-notif-btn:active {
  transform: scale(0.95) !important;
  box-shadow:
    inset 0 3px 6px rgba(0,0,0,0.8),
    inset 0 1px 0 rgba(197, 139, 58, 0.06),
    0 0 0 1px rgba(0,0,0,0.8) !important;
}

/* Group btn — прямокутний перемикач */
.dev-tools-scope.al-page .al-group-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 2px !important;
  background: linear-gradient(
    180deg,
    var(--bg-elevated) 0%,
    var(--bg-base)     100%
  ) !important;
  border: 1px solid rgba(92, 68, 48, 0.65) !important;
  color: var(--text-muted) !important;
  clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 3px) !important;
  box-shadow:
    inset 0 1px 0 rgba(197, 139, 58, 0.12),
    inset 0 -1px 3px rgba(0,0,0,0.7),
    0 0 0 1px rgba(0,0,0,0.8),
    0 2px 4px rgba(0,0,0,0.55) !important;
  transition: all 0.18s ease !important;
}
.dev-tools-scope.al-page .al-group-btn:hover {
  color: var(--text-bright) !important;
  border-color: rgba(140, 107, 70, 0.75) !important;
}
.dev-tools-scope.al-page .al-group-btn.is-active {
  background: linear-gradient(
    180deg,
    var(--bg-base)  0%,
    var(--bg-void)  100%
  ) !important;
  color: var(--accent-brass-hover) !important;
  border-color: rgba(197, 139, 58, 0.65) !important;
  box-shadow:
    inset 0 3px 6px rgba(0,0,0,0.85),
    inset 0 1px 0 rgba(0,0,0,0.5),
    0 0 0 1px rgba(0,0,0,0.8),
    0 0 8px rgba(197, 139, 58, 0.2) !important;
}


/* ═══════════════════════════════════════════════════════════════
   3. TABS — фізичні важелі пульта (виступають з рейки)
   ═══════════════════════════════════════════════════════════════ */

/* Контейнер tabs — рейка пульта */
.dev-tools-scope.al-page .alerts-tabs {
  background: linear-gradient(
    180deg,
    var(--bg-void) 0%,
    var(--bg-base) 40%,
    var(--bg-void) 100%
  ) !important;
  border: 1.5px solid rgba(58, 46, 34, 0.9) !important;
  border-top: 1.5px solid rgba(92, 68, 48, 0.5) !important;
  border-radius: 3px !important;
  padding: 6px 4px !important;
  box-shadow:
    inset 0 3px 8px rgba(0,0,0,0.9),
    inset 0 1px 0 rgba(58, 46, 34, 0.8),
    inset 0 -1px 0 rgba(197, 139, 58, 0.06),
    0 0 0 1px rgba(0,0,0,0.75),
    0 3px 6px rgba(0,0,0,0.7) !important;
  align-items: flex-end !important;
  gap: 3px !important;
}

/* Кожен tab — важіль */
.dev-tools-scope.al-page .alerts-tab {
  background: linear-gradient(
    180deg,
    var(--bg-elevated) 0%,
    var(--bg-surface)  60%,
    var(--bg-base)     100%
  ) !important;
  border: 1px solid rgba(92, 68, 48, 0.65) !important;
  border-bottom: 2px solid rgba(0,0,0,0.75) !important;
  border-radius: 3px 3px 0 0 !important;
  color: var(--text-muted) !important;
  padding: 8px 14px 6px !important;
  letter-spacing: 0.12em !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: 10px !important;
  clip-path: none !important;
  box-shadow:
    inset 0 1px 0 rgba(197, 139, 58, 0.10),
    inset 0 -1px 2px rgba(0,0,0,0.6),
    0 0 0 1px rgba(0,0,0,0.65),
    0 -1px 0 rgba(92, 68, 48, 0.3) !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transform-origin: bottom center;
  position: relative;
}
.dev-tools-scope.al-page .alerts-tab:hover {
  background: linear-gradient(
    180deg,
    var(--bg-hover)    0%,
    var(--bg-elevated) 60%,
    var(--bg-surface)  100%
  ) !important;
  color: var(--text-bright) !important;
  border-color: rgba(140, 107, 70, 0.6) !important;
  transform: translateY(-2px) !important;
  box-shadow:
    inset 0 1px 0 rgba(197, 139, 58, 0.15),
    inset 0 -1px 2px rgba(0,0,0,0.5),
    0 0 0 1px rgba(0,0,0,0.65),
    0 4px 8px rgba(0,0,0,0.55) !important;
}
/* Активний tab — ВИСТУПАЄ з рейки (підіймається) */
.dev-tools-scope.al-page .alerts-tab--active {
  background: linear-gradient(
    180deg,
    var(--bg-hover)    0%,
    var(--bg-elevated) 50%,
    var(--bg-surface)  100%
  ) !important;
  color: var(--accent-brass-hover) !important;
  border: 1.5px solid rgba(197, 139, 58, 0.65) !important;
  border-bottom: 3px solid var(--bg-void) !important;
  transform: translateY(-4px) !important;
  border-bottom-color: var(--accent-brass) !important;
  box-shadow:
    inset 0 2px 0 rgba(197, 139, 58, 0.25),
    inset 0 1px 0 rgba(232, 219, 178, 0.15),
    inset 0 -1px 3px rgba(0,0,0,0.5),
    0 0 0 1px rgba(0,0,0,0.75),
    0 6px 14px rgba(0,0,0,0.65),
    0 0 16px rgba(197, 139, 58, 0.20) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.9), 0 0 6px rgba(197, 139, 58, 0.3);
  animation: al-arch-lever 0.25s cubic-bezier(0.4, 0, 0.2, 1) both;
  z-index: 2;
}
.dev-tools-scope.al-page .alerts-tab--active .tab-count {
  color: var(--accent-brass) !important;
}


/* ═══════════════════════════════════════════════════════════════
   4. HUD STRIP — манометри з фізичним виглядом
   ═══════════════════════════════════════════════════════════════ */

/* Загальний strip — важча панель */
.dev-tools-scope.al-page .al-hud-strip {
  background:
    repeating-linear-gradient(
      91deg,
      rgba(197, 139, 58, 0.014) 0px,
      rgba(197, 139, 58, 0.022) 1px,
      transparent 1px,
      transparent 9px
    ),
    linear-gradient(
      180deg,
      var(--bg-elevated) 0%,
      var(--bg-surface)  45%,
      var(--bg-base)     100%
    ) !important;
  border: none !important;
  border-top: 1px solid rgba(92, 68, 48, 0.25) !important;
  border-bottom: 1px solid rgba(0,0,0,0.85) !important;
  outline: none !important;
  border-radius: 2px !important;
  padding: 6px 12px !important;
  box-shadow:
    inset 0 1px 0 rgba(197, 139, 58, 0.06),
    inset 0 -2px 0 rgba(0,0,0,0.9),
    inset 0 3px 10px rgba(0,0,0,0.6),
    inset 0 -3px 10px rgba(0,0,0,0.4),
    0 0 0 2px rgba(0,0,0,0.75),
    0 4px 16px rgba(0,0,0,0.8),
    0 12px 36px rgba(0,0,0,0.4) !important;
  gap: 4px !important;
  isolation: isolate; /* запобігає bleedthrough blueprint grid */
}

/* Манометр — кожен meter виглядає як окремий прилад */
.dev-tools-scope.al-page .al-hud-meter {
  background: radial-gradient(
    ellipse at 45% 30%,
    var(--bg-base)     0%,
    var(--bg-void)     55%,
    var(--bg-base)     100%
  ) !important;
  border: 1px solid rgba(58, 46, 34, 0.9) !important;
  border-top: 1px solid rgba(92, 68, 48, 0.5) !important;
  border-radius: 2px !important;
  padding: 8px 10px !important;
  min-width: 62px;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.9),
    inset 0 0 12px rgba(0,0,0,0.6),
    inset 0 -1px 0 rgba(197, 139, 58, 0.04),
    0 1px 0 rgba(232, 219, 178, 0.04) !important;
  position: relative;
  flex-direction: column !important;
  gap: 3px !important;
  align-items: center !important;
}

/* Метр-значення — великий */
.dev-tools-scope.al-page .al-hud-meter-count {
  font-size: 18px !important;
  font-family: 'IBM Plex Mono', monospace !important;
  min-width: auto !important;
  text-align: center !important;
  line-height: 1 !important;
  color: var(--text-bright) !important;
}

/* Метр-лейбл — підпис знизу */
.dev-tools-scope.al-page .al-hud-meter-label {
  font-size: 7px !important;
  letter-spacing: 0.18em !important;
  opacity: 0.7 !important;
  color: var(--text-muted) !important;
  order: 2;
}

/* Meter icon — сигнальна лампа (кружок) */
.dev-tools-scope.al-page .al-hud-meter-icon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  font-size: 0 !important;
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,0.5);
}
.dev-tools-scope.al-page .al-hud-meter--critical .al-hud-meter-icon {
  background: var(--log-critical);
  box-shadow: 0 0 6px rgba(193, 68, 24, 0.7), inset 0 1px 2px rgba(0,0,0,0.5);
}
.dev-tools-scope.al-page .al-hud-meter--critical.has-alerts .al-hud-meter-icon {
  animation: al-arch-lamp-critical 1.4s ease-in-out infinite;
}
.dev-tools-scope.al-page .al-hud-meter--high .al-hud-meter-icon {
  background: var(--log-error);
  box-shadow: 0 0 4px rgba(227, 111, 61, 0.6), inset 0 1px 2px rgba(0,0,0,0.5);
}
.dev-tools-scope.al-page .al-hud-meter--medium .al-hud-meter-icon {
  background: var(--log-warn);
  box-shadow: 0 0 4px rgba(224, 196, 137, 0.5), inset 0 1px 2px rgba(0,0,0,0.5);
}
.dev-tools-scope.al-page .al-hud-meter--info .al-hud-meter-icon {
  background: var(--log-info);
  box-shadow: 0 0 3px rgba(124, 143, 136, 0.4), inset 0 1px 2px rgba(0,0,0,0.5);
}

/* Meter bar — горизонтальна смуга тиску внизу манометра */
.dev-tools-scope.al-page .al-hud-meter-bar {
  height: 3px !important;
  background: rgba(0,0,0,0.6) !important;
  border-radius: 1px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.8);
  order: 3;
  width: 100%;
}
.dev-tools-scope.al-page .al-hud-meter-fill {
  border-radius: 1px;
}

/* Has-alerts манометр — "нагрівається" */
.dev-tools-scope.al-page .al-hud-meter.has-alerts {
  animation: al-arch-heat 3s ease-in-out infinite;
}
.dev-tools-scope.al-page .al-hud-meter--critical.has-alerts {
  border-color: rgba(193, 68, 24, 0.7) !important;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.9),
    inset 0 0 12px rgba(193, 68, 24, 0.12),
    0 0 8px rgba(193, 68, 24, 0.25),
    0 1px 0 rgba(232, 219, 178, 0.04) !important;
}

/* Status dot — більша сигнальна лампа */
.dev-tools-scope.al-page .al-hud-status-dot {
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(0,0,0,0.7) !important;
}
.dev-tools-scope.al-page .al-hud-status-dot.dot-ok {
  background: radial-gradient(circle at 35% 30%, var(--success), var(--bg-base)) !important;
  box-shadow:
    0 0 8px rgba(86, 163, 166, 0.6),
    inset 0 1px 1px rgba(255,255,255,0.25),
    inset 0 -1px 2px rgba(0,0,0,0.5) !important;
}
.dev-tools-scope.al-page .al-hud-status-dot.dot-critical {
  background: radial-gradient(circle at 35% 30%, var(--danger-text), var(--log-critical)) !important;
  box-shadow:
    0 0 10px rgba(193, 68, 24, 0.75),
    0 0 20px rgba(193, 68, 24, 0.35),
    inset 0 1px 1px rgba(255,255,255,0.15),
    inset 0 -1px 2px rgba(0,0,0,0.6) !important;
  animation: al-arch-lamp-critical 1.4s ease-in-out infinite !important;
}

/* HUD status panel */
.dev-tools-scope.al-page .al-hud-status {
  background: radial-gradient(
    ellipse at 40% 30%,
    var(--bg-base) 0%,
    var(--bg-void) 100%
  ) !important;
  border: 1px solid rgba(58, 46, 34, 0.9) !important;
  border-radius: 2px !important;
  padding: 8px 14px !important;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.9),
    inset 0 0 8px rgba(0,0,0,0.5),
    0 1px 0 rgba(197, 139, 58, 0.04) !important;
}
.dev-tools-scope.al-page .al-hud-status-label {
  font-size: 8px !important;
  letter-spacing: 0.18em !important;
  color: var(--text-body) !important;
}


/* ═══════════════════════════════════════════════════════════════
   5. ALERT CARDS — штамповані документи з фізичним рельєфом
   ═══════════════════════════════════════════════════════════════ */

/* Всі картки — тришарова конструкція */
.dev-tools-scope.al-page .alert-card {
  background:
    /* Штрихи ковки */
    repeating-linear-gradient(
      92deg,
      rgba(197, 139, 58, 0.007) 0px,
      transparent 1px,
      transparent 7px
    ),
    linear-gradient(
      180deg,
      var(--bg-elevated) 0%,
      var(--bg-surface)  100%
    ) !important;
  /* Рамка прибрана — severity індикація через .alert-card-accent div */
  border: none !important;
  border-bottom: 1px solid var(--border-dim) !important;
  border-radius: 0 3px 3px 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(197, 139, 58, 0.06),
    inset 0 -1px 0 rgba(0,0,0,0.8),
    inset 0 2px 5px rgba(0,0,0,0.3),
    0 2px 4px rgba(0,0,0,0.55),
    0 4px 12px rgba(0,0,0,0.35) !important;
  animation: al-arch-stamp 0.32s cubic-bezier(0.4, 0, 0.2, 1) both !important;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px)) !important;
  transition:
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.2s ease !important;
}

/* Hover — "нагрівається" + підіймається */
.dev-tools-scope.al-page .alert-card:not(.alert-card--resolved):hover {
  transform: translateY(-2px) translateX(1px) !important;
  box-shadow:
    inset 0 1px 0 rgba(197, 139, 58, 0.08),
    inset 0 -1px 0 rgba(0,0,0,0.8),
    inset 0 2px 5px rgba(0,0,0,0.25),
    0 6px 20px rgba(0,0,0,0.65),
    0 12px 32px rgba(0,0,0,0.35),
    0 0 20px rgba(197, 139, 58, 0.08) !important;
}

/* Active — штамп натискається */
.dev-tools-scope.al-page .alert-card:not(.alert-card--resolved):active {
  transform: translateY(0) translateX(0) !important;
  box-shadow:
    inset 0 3px 8px rgba(0,0,0,0.75),
    inset 0 1px 0 rgba(0,0,0,0.5),
    0 1px 3px rgba(0,0,0,0.5) !important;
}

/* Severity-specific hover — glow через box-shadow (border прибрано) */
.dev-tools-scope.al-page .alert-card--critical:not(.alert-card--resolved):hover {
  box-shadow:
    inset 0 1px 0 rgba(232, 219, 178, 0.04),
    0 6px 20px rgba(0,0,0,0.65),
    0 0 18px rgba(193, 68, 24, 0.18) !important;
}
.dev-tools-scope.al-page .alert-card--high:not(.alert-card--resolved):hover {
  box-shadow:
    inset 0 1px 0 rgba(232, 219, 178, 0.04),
    0 6px 20px rgba(0,0,0,0.65),
    0 0 16px rgba(227, 111, 61, 0.15) !important;
}

/* Accent смуга — ширша, виглядає як запечатана планка */
.dev-tools-scope.al-page .alert-card-accent {
  width: 5px !important;
  box-shadow: inset -1px 0 2px rgba(0,0,0,0.5) !important;
}

/* Level badge — штампований прямокутник */
.dev-tools-scope.al-page .alert-level-badge {
  font-family: 'Oswald', sans-serif !important;
  letter-spacing: 0.16em !important;
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 2px rgba(0,0,0,0.5) !important;
}
.dev-tools-scope.al-page .badge-critical {
  background: rgba(193, 68, 24, 0.22) !important;
  color: var(--danger-text) !important;
  border-color: rgba(193, 68, 24, 0.55) !important;
}

/* Alert title — жирніший */
.dev-tools-scope.al-page .alert-title {
  font-family: 'Barlow', sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  color: var(--text-bright) !important;
  letter-spacing: 0.02em !important;
}

/* Alert details — tinted muted */
.dev-tools-scope.al-page .alert-details {
  color: var(--text-body) !important;
}

/* Dismiss кнопка — скошений вентиль */
.dev-tools-scope.al-page .alert-dismiss-btn {
  clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 3px) !important;
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-base) 100%) !important;
  border: 1px solid rgba(92, 68, 48, 0.6) !important;
  color: var(--text-muted) !important;
  box-shadow:
    inset 0 1px 0 rgba(197, 139, 58, 0.08),
    inset 0 -1px 2px rgba(0,0,0,0.65),
    0 1px 0 rgba(0,0,0,0.75),
    0 2px 4px rgba(0,0,0,0.45) !important;
  transition: all 0.18s ease !important;
}
.dev-tools-scope.al-page .alert-dismiss-btn:hover {
  background: linear-gradient(180deg, var(--bg-hover) 0%, var(--bg-elevated) 100%) !important;
  border-color: var(--success) !important;
  color: var(--success) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    inset 0 1px 0 rgba(86, 163, 166, 0.15),
    inset 0 -1px 2px rgba(0,0,0,0.6),
    0 0 8px rgba(86, 163, 166, 0.2),
    0 2px 6px rgba(0,0,0,0.5) !important;
}
.dev-tools-scope.al-page .alert-dismiss-btn:active {
  transform: translateY(0) !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.8) !important;
}

/* Source tag — "штамп джерела" */
.dev-tools-scope.al-page .alert-source {
  background: linear-gradient(180deg, var(--bg-base) 0%, var(--bg-void) 100%) !important;
  border: 1px solid rgba(58, 46, 34, 0.85) !important;
  color: var(--text-muted) !important;
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.7) !important;
}

/* Module tag */
.dev-tools-scope.al-page .alert-module-tag {
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.6) !important;
  font-size: 9px !important;
  letter-spacing: 0.10em !important;
}


/* ═══════════════════════════════════════════════════════════════
   6. ДЕКОРАТИВНІ ВБУДОВАНІ ШЕСТЕРНІ — SVG + CSS маленькі
   ═══════════════════════════════════════════════════════════════ */

/* Шестерні вбудовані в HUD strip — через ::before/::after псевдо-елементи
   вже використані. Додаємо через .al-hud-meters відносне позиціонування */
.dev-tools-scope.al-page .al-hud-meters {
  position: relative !important;
}
/* Мала шестерня між meters і status */
.dev-tools-scope.al-page .al-hud-divider {
  width: 16px !important;
  height: 16px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg transform='translate(8,8)' fill='none' stroke='%235c4430' stroke-width='1'%3E%3Ccircle r='3' stroke-opacity='0.7'/%3E%3Ccircle r='5.5' stroke-opacity='0.5'/%3E%3Cg stroke-opacity='0.6'%3E%3Crect x='-1' y='-7' width='2' height='3' rx='0.5'/%3E%3Crect x='-1' y='-7' width='2' height='3' rx='0.5' transform='rotate(45)'/%3E%3Crect x='-1' y='-7' width='2' height='3' rx='0.5' transform='rotate(90)'/%3E%3Crect x='-1' y='-7' width='2' height='3' rx='0.5' transform='rotate(135)'/%3E%3Crect x='-1' y='-7' width='2' height='3' rx='0.5' transform='rotate(180)'/%3E%3Crect x='-1' y='-7' width='2' height='3' rx='0.5' transform='rotate(225)'/%3E%3Crect x='-1' y='-7' width='2' height='3' rx='0.5' transform='rotate(270)'/%3E%3Crect x='-1' y='-7' width='2' height='3' rx='0.5' transform='rotate(315)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  animation: al-arch-gear-micro 18s linear infinite !important;
  flex-shrink: 0 !important;
  margin: 0 8px !important;
  opacity: 0.7;
}


/* ═══════════════════════════════════════════════════════════════
   7. FILTERS AREA — поворотні ручки / перемикачі
   ═══════════════════════════════════════════════════════════════ */

.dev-tools-scope.al-page .alerts-filter-select {
  background: linear-gradient(
    170deg,
    var(--bg-base)    0%,
    var(--bg-void)    50%,
    var(--bg-base)    100%
  ) !important;
  border: 1px solid rgba(92, 68, 48, 0.7) !important;
  border-top-color: rgba(58, 46, 34, 0.9) !important;
  color: var(--text-body) !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.06em !important;
  padding: 6px 10px !important;
  border-radius: 2px !important;
  clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 3px) !important;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.85),
    inset 0 0 8px rgba(0,0,0,0.5),
    0 1px 0 rgba(197, 139, 58, 0.05) !important;
  transition: all 0.18s ease !important;
}
.dev-tools-scope.al-page .alerts-filter-select:focus,
.dev-tools-scope.al-page .alerts-filter-select:hover {
  border-color: var(--border-bright) !important;
  color: var(--text-bright) !important;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.85),
    inset 0 0 8px rgba(0,0,0,0.4),
    0 0 0 1px rgba(197, 139, 58, 0.3),
    0 0 8px rgba(197, 139, 58, 0.15) !important;
}

/* Interval wrap — як відліковий циферблат */
.dev-tools-scope.al-page .al-interval-wrap {
  background: linear-gradient(
    180deg,
    var(--bg-base) 0%,
    var(--bg-void) 100%
  ) !important;
  border: 1px solid rgba(92, 68, 48, 0.7) !important;
  border-radius: 3px !important;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.85),
    0 1px 0 rgba(197, 139, 58, 0.04) !important;
  gap: 4px !important;
  padding: 0 8px 0 10px !important;
}
.dev-tools-scope.al-page .al-interval-select {
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  color: var(--text-body) !important;
}
.dev-tools-scope.al-page .al-interval-select:hover {
  color: var(--text-bright) !important;
}


/* ═══════════════════════════════════════════════════════════════
   8. CUSTOM FORM — "Виклик аварійного сигналу"
   ═══════════════════════════════════════════════════════════════ */

.dev-tools-scope.al-page .al-custom-form {
  background: linear-gradient(
    180deg,
    var(--bg-elevated) 0%,
    var(--bg-surface)  60%,
    var(--bg-base)     100%
  ) !important;
  border: 1.5px solid rgba(92, 68, 48, 0.65) !important;
  border-radius: 2px !important;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)) !important;
  box-shadow:
    inset 0 2px 0 rgba(197, 139, 58, 0.15),
    inset 0 -1px 0 rgba(0,0,0,0.85),
    inset 0 3px 8px rgba(0,0,0,0.5),
    0 0 0 1px rgba(0,0,0,0.8),
    0 6px 20px rgba(0,0,0,0.7),
    0 0 40px rgba(197, 139, 58, 0.08) !important;
}

.dev-tools-scope.al-page .al-custom-form-header {
  background:
    repeating-linear-gradient(
      91deg,
      rgba(197, 139, 58, 0.020) 0px,
      transparent 1px,
      transparent 8px
    ),
    linear-gradient(
      180deg,
      var(--bg-hover)    0%,
      var(--bg-elevated) 100%
    ) !important;
  border-bottom: 1px solid rgba(197, 139, 58, 0.30) !important;
  color: var(--accent-brass-hover) !important;
  font-family: 'Oswald', sans-serif !important;
  letter-spacing: 0.15em !important;
  font-size: 10px !important;
  box-shadow:
    inset 0 1px 0 rgba(197, 139, 58, 0.15),
    inset 0 -1px 0 rgba(0,0,0,0.75) !important;
}

.dev-tools-scope.al-page .al-custom-input,
.dev-tools-scope.al-page .al-custom-textarea,
.dev-tools-scope.al-page .al-custom-select {
  background: linear-gradient(180deg, var(--bg-base) 0%, var(--bg-void) 100%) !important;
  border: 1px solid rgba(92, 68, 48, 0.65) !important;
  border-radius: 2px !important;
  color: var(--text-bright) !important;
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,0.8),
    inset 0 0 8px rgba(0,0,0,0.5),
    0 1px 0 rgba(197, 139, 58, 0.05) !important;
}
.dev-tools-scope.al-page .al-custom-input:focus,
.dev-tools-scope.al-page .al-custom-textarea:focus,
.dev-tools-scope.al-page .al-custom-select:focus {
  border-color: var(--accent-brass) !important;
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,0.8),
    inset 0 0 8px rgba(0,0,0,0.4),
    0 0 0 1px rgba(197, 139, 58, 0.35),
    0 0 10px rgba(197, 139, 58, 0.15) !important;
}

.dev-tools-scope.al-page .al-custom-label {
  color: var(--accent-brass-dim) !important;
  font-family: 'Oswald', sans-serif !important;
  letter-spacing: 0.14em !important;
  font-size: 8px !important;
}

.dev-tools-scope.al-page .al-custom-submit {
  background: linear-gradient(
    180deg,
    var(--bg-hover)    0%,
    var(--bg-elevated) 50%,
    var(--bg-surface)  100%
  ) !important;
  border: 1px solid rgba(197, 139, 58, 0.55) !important;
  color: var(--accent-brass-hover) !important;
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px) !important;
  box-shadow:
    inset 0 2px 0 rgba(197, 139, 58, 0.18),
    inset 0 -1px 3px rgba(0,0,0,0.7),
    0 0 0 1px rgba(0,0,0,0.8),
    0 2px 4px rgba(0,0,0,0.6),
    0 0 12px rgba(197, 139, 58, 0.12) !important;
  font-family: 'Oswald', sans-serif !important;
  letter-spacing: 0.14em !important;
  transition: all 0.18s ease !important;
}
.dev-tools-scope.al-page .al-custom-submit:hover {
  background: linear-gradient(
    180deg,
    var(--bg-hover)    0%,
    var(--bg-hover)    40%,
    var(--bg-elevated) 100%
  ) !important;
  border-color: var(--accent-brass-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    inset 0 2px 0 rgba(197, 139, 58, 0.25),
    inset 0 -1px 3px rgba(0,0,0,0.65),
    0 0 0 1px rgba(0,0,0,0.8),
    0 0 0 2px rgba(197, 139, 58, 0.35),
    0 4px 10px rgba(0,0,0,0.6),
    0 0 18px rgba(197, 139, 58, 0.22) !important;
}
.dev-tools-scope.al-page .al-custom-submit:active {
  transform: translateY(1px) !important;
  box-shadow: inset 0 3px 7px rgba(0,0,0,0.85) !important;
}


/* ═══════════════════════════════════════════════════════════════
   9. THREAT BANNER — "Аварійна табличка"
   ═══════════════════════════════════════════════════════════════ */

.dev-tools-scope.al-page .al-threat-banner {
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)) !important;
  border-left: 5px solid var(--accent-brass) !important;
  border: 1.5px solid rgba(92, 68, 48, 0.65) !important;
  border-left: 5px solid var(--accent-brass) !important;
}
.dev-tools-scope.al-page .al-threat-banner.state-critical {
  border-left-color: var(--log-critical) !important;
}
.dev-tools-scope.al-page .al-threat-banner.state-ok {
  border-left-color: var(--success) !important;
}
.dev-tools-scope.al-page .al-threat-banner.state-warn {
  border-left-color: var(--log-warn) !important;
}

.dev-tools-scope.al-page .al-threat-banner-label {
  font-family: 'Oswald', sans-serif !important;
  font-size: 7px !important;
  letter-spacing: 0.22em !important;
  color: var(--accent-brass) !important;
}


/* ═══════════════════════════════════════════════════════════════
   10. HINT / CONTROLS BAR — гравійована пластина
   ═══════════════════════════════════════════════════════════════ */

.dev-tools-scope.al-page .al-hint-details {
  background: linear-gradient(
    180deg,
    var(--bg-base)    0%,
    var(--bg-void)    100%
  ) !important;
  border: 1px solid rgba(58, 46, 34, 0.85) !important;
  border-radius: 2px !important;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.75),
    0 1px 0 rgba(197, 139, 58, 0.04) !important;
}
.dev-tools-scope.al-page .al-hint-details[open] {
  border-color: rgba(197, 139, 58, 0.30) !important;
}
.dev-tools-scope.al-page .al-hint-summary {
  color: var(--text-muted) !important;
  letter-spacing: 0.10em !important;
}
.dev-tools-scope.al-page .al-hint-summary:hover {
  color: var(--text-body) !important;
}
.dev-tools-scope.al-page .al-hint-body {
  color: var(--text-muted) !important;
}

/* Controls bar — компактніше */
.dev-tools-scope.al-page .alerts-controls {
  border-bottom: 1px solid rgba(58, 46, 34, 0.75) !important;
  padding: 4px 0 6px !important;
  margin-top: 4px !important;
  gap: 4px !important;
  flex-wrap: wrap !important;
}

/* Bulk confirm */
.dev-tools-scope.al-page .al-bulk-confirm {
  background: linear-gradient(180deg, var(--bg-base) 0%, var(--bg-void) 100%) !important;
  border: 1px solid rgba(224, 196, 137, 0.28) !important;
  clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 3px) !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.7) !important;
}
.dev-tools-scope.al-page .al-bulk-confirm-yes {
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-surface) 100%) !important;
  border: 1px solid rgba(224, 196, 137, 0.45) !important;
  color: var(--log-warn) !important;
  clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 3px) !important;
  box-shadow: inset 0 1px 0 rgba(224, 196, 137, 0.12), inset 0 -1px 2px rgba(0,0,0,0.65) !important;
}
.dev-tools-scope.al-page .al-bulk-confirm-no {
  border: 1px solid rgba(92, 68, 48, 0.55) !important;
  color: var(--text-muted) !important;
}


/* ═══════════════════════════════════════════════════════════════
   11. HISTORY FEED — архівні журнали
   ═══════════════════════════════════════════════════════════════ */

.dev-tools-scope.al-page .hist-row {
  background: linear-gradient(
    180deg,
    var(--bg-surface) 0%,
    var(--bg-base)    100%
  ) !important;
  border: 1px solid rgba(58, 46, 34, 0.8) !important;
  border-radius: 1px !important;
  box-shadow:
    inset 0 1px 0 rgba(197, 139, 58, 0.05),
    inset 0 -1px 0 rgba(0,0,0,0.7) !important;
  transition: all 0.18s ease !important;
}
.dev-tools-scope.al-page .hist-row:hover {
  background: linear-gradient(
    180deg,
    var(--bg-elevated) 0%,
    var(--bg-surface)  100%
  ) !important;
  border-color: rgba(92, 68, 48, 0.65) !important;
  transform: translateX(2px) !important;
}
.dev-tools-scope.al-page .hist-sparkline-wrap {
  background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-base) 100%) !important;
  border: 1px solid rgba(58, 46, 34, 0.8) !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.6) !important;
}

/* Load more */
.dev-tools-scope.al-page .alerts-load-more-btn {
  border: 1px dashed rgba(92, 68, 48, 0.55) !important;
  border-radius: 2px !important;
  color: var(--text-muted) !important;
  background: transparent !important;
  letter-spacing: 0.14em !important;
}
.dev-tools-scope.al-page .alerts-load-more-btn:hover {
  border-color: rgba(197, 139, 58, 0.45) !important;
  color: var(--accent-brass) !important;
  background: rgba(197, 139, 58, 0.04) !important;
}


/* ═══════════════════════════════════════════════════════════════
   12. EMPTY / LOADING / ERROR states — "Чекаємо сигналу"
   ═══════════════════════════════════════════════════════════════ */

.dev-tools-scope.al-page .alerts-loading,
.dev-tools-scope.al-page .alerts-empty,
.dev-tools-scope.al-page .alerts-error {
  color: var(--text-muted) !important;
  background:
    radial-gradient(ellipse at 50% 40%, var(--bg-surface) 0%, var(--bg-base) 100%) !important;
  border: 1px solid rgba(58, 46, 34, 0.8);
  border-radius: 2px;
  margin: 20px auto;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.75);
}

.dev-tools-scope.al-page .alerts-loading-icon {
  color: var(--accent-brass) !important;
}

/* ═══════════════════════════════════════════════════════════════
   13. BADGE "НОВІ" — розжарена мідна бляха
   ═══════════════════════════════════════════════════════════════ */
.dev-tools-scope.al-page .al-badge--new {
  background: rgba(197, 139, 58, 0.22) !important;
  border: 1px solid rgba(197, 139, 58, 0.50) !important;
  color: var(--accent-brass-hover) !important;
  box-shadow:
    0 0 6px rgba(197, 139, 58, 0.35),
    inset 0 1px 0 rgba(232, 219, 178, 0.15) !important;
}

/* ═══════════════════════════════════════════════════════════════
   14. SCROLLBAR — промислова рейка
   ═══════════════════════════════════════════════════════════════ */
.dev-tools-scope.al-page ::-webkit-scrollbar {
  width: 6px;
}
.dev-tools-scope.al-page ::-webkit-scrollbar-track {
  background: var(--bg-void);
  border-left: 1px solid rgba(58, 46, 34, 0.6);
}
.dev-tools-scope.al-page ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--pewter-mid) 0%, var(--pewter-dark) 100%);
  border-radius: 2px;
  border: 1px solid rgba(0,0,0,0.5);
}
.dev-tools-scope.al-page ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--pewter-light) 0%, var(--pewter-mid) 100%);
}

/* ═══════════════════════════════════════════════════════════════
   15. GROUPE HEADER — залізний роздільник
   ═══════════════════════════════════════════════════════════════ */
.dev-tools-scope.al-page .alerts-group-header {
  background: linear-gradient(
    180deg,
    var(--bg-surface) 0%,
    var(--bg-base)    100%
  ) !important;
  border: 1px solid var(--border-dim) !important;
  border-left: 4px solid var(--border-metal) !important;
  clip-path: none !important;
  border-radius: 2px !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 219, 178, 0.04),
    inset 0 -1px 0 rgba(0,0,0,0.65),
    0 1px 3px rgba(0,0,0,0.5) !important;
}
.dev-tools-scope.al-page .alerts-group-header:hover {
  background: linear-gradient(
    180deg,
    var(--bg-elevated) 0%,
    var(--bg-surface)  100%
  ) !important;
  color: var(--text-bright) !important;
  border-color: var(--border-metal) !important;
  border-left-color: var(--border-bright) !important;
}
.dev-tools-scope.al-page .alerts-group-count {
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(58, 46, 34, 0.8) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.65) !important;
}
.dev-tools-scope.al-page .alerts-group-dot {
  box-shadow: 0 0 4px currentColor, inset 0 1px 1px rgba(0,0,0,0.5) !important;
}

/* Silence dropdown */
.dev-tools-scope.al-page .al-silence-dropdown {
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-surface) 100%) !important;
  border: 1px solid rgba(92, 68, 48, 0.7) !important;
  box-shadow:
    0 12px 36px rgba(0,0,0,0.8),
    0 0 0 1px rgba(0,0,0,0.75) !important;
}
.dev-tools-scope.al-page .al-silence-dropdown-item:hover {
  background: rgba(197, 139, 58, 0.10) !important;
  color: var(--accent-brass-hover) !important;
}

/* Action link btn */
.dev-tools-scope.al-page .alert-action-btn {
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-surface) 100%) !important;
  border: 1px solid rgba(197, 139, 58, 0.40) !important;
  color: var(--accent-brass-hover) !important;
  clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 3px) !important;
  box-shadow:
    inset 0 1px 0 rgba(197, 139, 58, 0.12),
    inset 0 -1px 2px rgba(0,0,0,0.65) !important;
}
.dev-tools-scope.al-page .alert-action-btn:hover {
  background: linear-gradient(180deg, var(--bg-hover) 0%, var(--bg-elevated) 100%) !important;
  border-color: var(--accent-brass) !important;
  transform: translateY(-1px);
}

/* Restore btn */
.dev-tools-scope.al-page .alert-restore-btn {
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-base) 100%) !important;
  border: 1px solid rgba(92, 68, 48, 0.6) !important;
  color: var(--text-muted) !important;
  clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 3px) !important;
  box-shadow: inset 0 1px 0 rgba(197, 139, 58, 0.06), inset 0 -1px 2px rgba(0,0,0,0.6) !important;
}
.dev-tools-scope.al-page .alert-restore-btn:hover {
  border-color: rgba(140, 107, 70, 0.65) !important;
  color: var(--text-body) !important;
}

/* Sources info row */
.dev-tools-scope.al-page .al-hud-sources,
.dev-tools-scope.al-page .summary-sources-inline {
  color: var(--text-muted) !important;
  font-size: 9px !important;
  letter-spacing: 0.10em !important;
}
.dev-tools-scope.al-page .al-hud-sources.ok,
.dev-tools-scope.al-page .summary-sources-inline.ok {
  color: var(--success) !important;
}
.dev-tools-scope.al-page .al-hud-timestamp {
  font-size: 9px !important;
  letter-spacing: 0.08em !important;
  color: var(--text-muted) !important;
  border-left: 1px solid rgba(58, 46, 34, 0.7) !important;
}

/* ═══════════════════════════════════════════════════════════════
   16. ВБУДОВАНІ SVG-ШЕСТЕРНІ — декоративні елементи в UI
   ═══════════════════════════════════════════════════════════════ */

/* Контейнер gear-decor в header */
.dev-tools-scope.al-page .al-header-gear-decor {
  display: flex;
  align-items: center;
  opacity: 0.45;
  margin: 0 6px;
  flex-shrink: 0;
  pointer-events: none;
}

/* Всі SVG-шестерні — базовий стиль */
.al-gear-svg {
  display: block;
  flex-shrink: 0;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
   17. TYPOGRAPHY UPGRADES — Cinzel для заголовків
   ═══════════════════════════════════════════════════════════════ */

/* Cinzel для всіх major-заголовків */
.dev-tools-scope.al-page .al-title,
.dev-tools-scope.al-page h1.devtools-title {
  font-family: 'Cinzel', 'Oswald', serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.20em !important;
  font-size: 16px !important;
}

/* Cinzel для header форми */
.dev-tools-scope.al-page .al-custom-form-header {
  font-family: 'Oswald', sans-serif !important;
  letter-spacing: 0.16em !important;
}

/* Tabs — розширений межбуквний */
.dev-tools-scope.al-page .alerts-tab {
  font-family: 'Oswald', sans-serif !important;
  letter-spacing: 0.14em !important;
  font-size: 10px !important;
}

/* Cinzel для group headers */
.dev-tools-scope.al-page .alerts-group-header {
  font-family: 'Oswald', sans-serif !important;
  letter-spacing: 0.14em !important;
}

/* ═══════════════════════════════════════════════════════════════
   18. FOCUS-VISIBLE — фізично помітний фокус-ринг
   ═══════════════════════════════════════════════════════════════ */

.dev-tools-scope.al-page *:focus-visible {
  outline: 2px solid var(--border-focus) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(197, 139, 58, 0.18) !important;
}

/* ═══════════════════════════════════════════════════════════════
   19. RESPONSIVE ADJUSTMENTS — архітектурні фікси під малий екран
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 700px) {
  /* Clip-path на малих екранах може ламати overflow — прибираємо */
  .dev-tools-scope.al-page .al-refresh-btn,
  .dev-tools-scope.al-page .al-group-btn,
  .dev-tools-scope.al-page .alert-dismiss-btn,
  .dev-tools-scope.al-page .alert-restore-btn,
  .dev-tools-scope.al-page .alert-action-btn,
  .dev-tools-scope.al-page .al-custom-submit,
  .dev-tools-scope.al-page .al-bulk-confirm,
  .dev-tools-scope.al-page .al-bulk-confirm-yes,
  .dev-tools-scope.al-page .alerts-filter-select {
    clip-path: none !important;
    border-radius: 2px !important;
  }
  /* Tabs не виступають (немає місця) */
  .dev-tools-scope.al-page .alerts-tab--active {
    transform: translateY(-2px) !important;
  }
  .dev-tools-scope.al-page .alerts-tab:hover {
    transform: none !important;
  }
  /* Meter — вертикальна орієнтація */
  .dev-tools-scope.al-page .al-hud-meter {
    min-width: 48px !important;
  }
  /* Header gear — hide на мобільному */
  .dev-tools-scope.al-page .al-header-gear-decor {
    display: none;
  }
}

@media (max-width: 480px) {
  .dev-tools-scope.al-page .al-hud-meter-count {
    font-size: 15px !important;
  }
}

/* ─── End STEAMPUNK ARCH v2.0 ─── */


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  STEAMPUNK ARCH v3.0 — Pipes · Nameplates · Steam · Stamps · Dividers  ║
   ║  Шар поверх v2.0 — ЗБАГАЧЕННЯ, не заміна                               ║
   ║  Палітра: 100% SSOT (dev-tools-base.css) — жодного hex поза SSOT       ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */


/* ═══════════════════════════════════════════════════════════════════
   НОВІ KEYFRAMES v3.0
   ═══════════════════════════════════════════════════════════════════ */

/* Steam puff — пара вгору і розчиняється */
@keyframes al-v3-steam {
  0%   { opacity: 0;    transform: translateY(0)    scaleX(1);    filter: blur(1px); }
  15%  { opacity: 0.55; transform: translateY(-6px) scaleX(1.2);  filter: blur(2px); }
  50%  { opacity: 0.30; transform: translateY(-18px) scaleX(1.6); filter: blur(4px); }
  100% { opacity: 0;    transform: translateY(-32px) scaleX(2.2); filter: blur(8px); }
}

/* Electric current через дріт (stroke-dashoffset) — CSS only */
@keyframes al-v3-current {
  from { stroke-dashoffset: 120; }
  to   { stroke-dashoffset: 0; }
}

/* Орнамент divider — поворот ромбу */
@keyframes al-v3-diamond-spin {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.08); }
  100% { transform: rotate(360deg) scale(1); }
}

/* Nameplate shimmer — латунний блиск */
@keyframes al-v3-brass-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* Pipe pressure — труба "вібрує" */
@keyframes al-v3-pipe-throb {
  0%, 100% { opacity: 0.55; }
  50%       { opacity: 0.75; }
}

/* Stamp inkblot — badge з'являється зі слабким "розмазуванням" */
@keyframes al-v3-inkstamp {
  0%   { transform: scale(1.25) rotate(-3deg); opacity: 0; filter: blur(2px); }
  60%  { transform: scale(0.97) rotate(0.5deg); opacity: 1; filter: blur(0); }
  80%  { transform: scale(1.02) rotate(-0.3deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; filter: blur(0); }
}

/* Divider pulse — орнамент пульсує */
@keyframes al-v3-ornament-pulse {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%       { opacity: 0.70; transform: scale(1.05); }
}

/* Valve ring — кільце на клапані */
@keyframes al-v3-valve-ring {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* ═══════════════════════════════════════════════════════════════════
   1. PIPES — вертикальні металеві труби по боках сторінки
   ═══════════════════════════════════════════════════════════════════ */

/* Контейнер труб — фіксований, за контентом */
.dev-tools-scope.al-page .al-sp-pipes {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Базова труба */
.dev-tools-scope.al-page .al-sp-pipe {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 14px;
  animation: al-v3-pipe-throb 6s ease-in-out infinite;
}

/* Ліва труба */
.dev-tools-scope.al-page .al-sp-pipe--left {
  left: 20px;
  background:
    /* Центральна смуга — висвітлення */
    linear-gradient(90deg,
      transparent 0%,
      rgba(92, 68, 48, 0.12) 30%,
      rgba(140, 107, 70, 0.28) 46%,
      rgba(168, 152, 138, 0.18) 50%,
      rgba(92, 68, 48, 0.22) 55%,
      transparent 80%
    ),
    /* Основне тіло труби */
    linear-gradient(90deg,
      var(--bg-void)      0%,
      var(--pewter-dark)  20%,
      var(--pewter-mid)   45%,
      var(--pewter-dark)  75%,
      var(--bg-void)      100%
    );
  border-left: 1px solid rgba(58, 46, 34, 0.55);
  border-right: 1px solid rgba(58, 46, 34, 0.55);
}

/* Права труба */
.dev-tools-scope.al-page .al-sp-pipe--right {
  right: 20px;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(92, 68, 48, 0.12) 30%,
      rgba(140, 107, 70, 0.28) 46%,
      rgba(168, 152, 138, 0.18) 50%,
      rgba(92, 68, 48, 0.22) 55%,
      transparent 80%
    ),
    linear-gradient(90deg,
      var(--bg-void)      0%,
      var(--pewter-dark)  20%,
      var(--pewter-mid)   45%,
      var(--pewter-dark)  75%,
      var(--bg-void)      100%
    );
  border-left: 1px solid rgba(58, 46, 34, 0.55);
  border-right: 1px solid rgba(58, 46, 34, 0.55);
  animation-delay: 2.5s;
}

/* Фланці (кільця на трубах) — через pseudo + repeating-gradient */
.dev-tools-scope.al-page .al-sp-pipe--left::before,
.dev-tools-scope.al-page .al-sp-pipe--right::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    180deg,
    transparent            0px,
    transparent            59px,
    rgba(92, 68, 48, 0.45) 60px,
    rgba(168, 152, 138, 0.35) 61px,
    rgba(92, 68, 48, 0.55) 62px,
    rgba(168, 152, 138, 0.25) 63px,
    rgba(92, 68, 48, 0.45) 64px,
    transparent            65px,
    transparent            124px
  );
  pointer-events: none;
}

/* Верхній і нижній кінці труби — заглушки */
.dev-tools-scope.al-page .al-sp-pipe::after {
  content: '';
  position: absolute;
  left: -3px;
  right: -3px;
  height: 8px;
  background: linear-gradient(180deg, var(--pewter-mid) 0%, var(--pewter-dark) 100%);
  border: 1px solid rgba(0,0,0,0.6);
  box-shadow: 0 2px 4px rgba(0,0,0,0.8);
}
.dev-tools-scope.al-page .al-sp-pipe--left::after  { top: 0;    border-radius: 1px 1px 0 0; }
.dev-tools-scope.al-page .al-sp-pipe--right::after { bottom: 0; border-radius: 0 0 1px 1px; }

/* Ховаємо труби на дуже малих екранах */
@media (max-width: 700px) {
  .dev-tools-scope.al-page .al-sp-pipes { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   2. STEAM VENTS — пар з header і threat banner
   ═══════════════════════════════════════════════════════════════════ */

/* Паровий отвір — базовий клас */
.dev-tools-scope.al-page .al-sp-vent {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--pewter-dark) 40%, var(--bg-void) 100%);
  border: 1px solid rgba(92, 68, 48, 0.65);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.85);
  pointer-events: none;
  z-index: 2;
  overflow: visible;
}

/* "Хмарка" пари — ::before */
.dev-tools-scope.al-page .al-sp-vent::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 14px;
  background: radial-gradient(ellipse at 50% 80%,
    rgba(243, 239, 220, 0.55) 0%,
    rgba(243, 239, 220, 0.20) 50%,
    transparent 100%
  );
  border-radius: 50% 50% 30% 30%;
  animation: al-v3-steam 3.5s ease-out infinite;
  pointer-events: none;
}

/* Другий відставлений пуф пари */
.dev-tools-scope.al-page .al-sp-vent::after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-60%);
  width: 8px;
  height: 10px;
  background: radial-gradient(ellipse at 50% 80%,
    rgba(243, 239, 220, 0.35) 0%,
    transparent 70%
  );
  border-radius: 50%;
  animation: al-v3-steam 3.5s ease-out 1.6s infinite;
  pointer-events: none;
}

/* Позиції вентів на header */
.dev-tools-scope.al-page .al-sp-vent--h1 {
  bottom: 4px;
  left: 38%;
}
.dev-tools-scope.al-page .al-sp-vent--h2 {
  bottom: 4px;
  left: 62%;
  animation-delay: 1.8s;
}
.dev-tools-scope.al-page .al-sp-vent--h2::before {
  animation-delay: 1.8s;
}
.dev-tools-scope.al-page .al-sp-vent--h2::after {
  animation-delay: 3.2s;
}

/* Вент на banner */
.dev-tools-scope.al-page .al-sp-vent--banner {
  top: 50%;
  right: 22px;
  transform: translateY(-50%);
}
.dev-tools-scope.al-page .al-sp-vent--banner::before {
  animation-delay: 0.9s;
}


/* ═══════════════════════════════════════════════════════════════════
   3. BRASS NAMEPLATES — латунні таблички на заголовках блоків
   ═══════════════════════════════════════════════════════════════════ */

/* Латунна табличка — базовий компонент */
.dev-tools-scope.al-page .al-sp-nameplate {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  padding: 3px 12px 3px 10px;
  font-family: 'Cinzel', 'Oswald', serif;
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-brass-dim);
  background:
    /* Shimmer overlay */
    linear-gradient(105deg,
      transparent 30%,
      rgba(232, 219, 178, 0.12) 45%,
      rgba(232, 219, 178, 0.06) 55%,
      transparent 70%
    ),
    /* Основний латунний градієнт */
    linear-gradient(180deg,
      var(--bg-hover)    0%,
      var(--bg-elevated) 40%,
      var(--bg-surface)  100%
    );
  background-size: 200% 100%, 100% 100%;
  border: 1px solid rgba(92, 68, 48, 0.65);
  border-top: 1px solid rgba(140, 107, 70, 0.55);
  border-radius: 1px;
  box-shadow:
    inset 0 1px 0 rgba(232, 219, 178, 0.14),
    inset 0 -1px 2px rgba(0,0,0,0.65),
    0 1px 3px rgba(0,0,0,0.75);
  text-shadow: 0 1px 0 rgba(0,0,0,0.85), 0 0 4px rgba(197,139,58,0.15);
  animation: al-v3-brass-shimmer 8s linear infinite;
}

/* Заклепки на табличці — ::before / ::after */
.dev-tools-scope.al-page .al-sp-nameplate::before,
.dev-tools-scope.al-page .al-sp-nameplate::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--pewter-highlight), var(--pewter-dark));
  border: 1px solid rgba(0,0,0,0.7);
  box-shadow: inset 0 0.5px 0.5px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.8);
  flex-shrink: 0;
}

/* Nameplate на HUD status label */
.dev-tools-scope.al-page .al-hud-status-label {
  font-family: 'IBM Plex Mono', monospace !important;
  letter-spacing: 0.16em !important;
  font-size: 8px !important;
  color: var(--text-body) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.85) !important;
}

/* Threat banner label — виглядає як гравірована пластина */
.dev-tools-scope.al-page .al-threat-banner-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Cinzel', 'Oswald', serif !important;
  font-size: 7px !important;
  letter-spacing: 0.25em !important;
  color: var(--accent-brass) !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,0.9),
    0 0 6px rgba(197, 139, 58, 0.2) !important;
  background:
    linear-gradient(180deg, var(--bg-hover) 0%, var(--bg-elevated) 100%);
  padding: 2px 8px;
  border: 1px solid rgba(92, 68, 48, 0.55);
  border-radius: 1px;
  box-shadow:
    inset 0 1px 0 rgba(232, 219, 178, 0.12),
    inset 0 -1px 2px rgba(0,0,0,0.6);
}


/* ═══════════════════════════════════════════════════════════════════
   4. PRINTING PRESS STAMPS — severity badges як штампи друкарні
   ═══════════════════════════════════════════════════════════════════ */

/* Всі badges — базовий штамп */
.dev-tools-scope.al-page .alert-level-badge {
  font-family: 'IBM Plex Mono', monospace !important;
  letter-spacing: 0.18em !important;
  transform: rotate(-0.8deg);
  border-style: solid;
  border-radius: 1px !important;
  position: relative;
  animation: al-v3-inkstamp 0.28s cubic-bezier(0.4, 0, 0.2, 1) both !important;
}

/* Critical — темно-червоне чорнило, нерівний штамп */
.dev-tools-scope.al-page .badge-critical {
  background: rgba(193, 68, 24, 0.20) !important;
  color: var(--danger-text) !important;
  border-color: rgba(193, 68, 24, 0.60) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 2px rgba(0,0,0,0.55),
    0 0 4px rgba(193, 68, 24, 0.25) !important;
  transform: rotate(-1.2deg) !important;
  filter: none !important;
}

/* High — помаранчеве чорнило */
.dev-tools-scope.al-page .badge-high {
  background: rgba(227, 111, 61, 0.16) !important;
  color: var(--log-error) !important;
  border-color: rgba(227, 111, 61, 0.50) !important;
  transform: rotate(-0.5deg) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -1px 2px rgba(0,0,0,0.5) !important;
}

/* Medium — жовте чорнило */
.dev-tools-scope.al-page .badge-medium {
  background: rgba(224, 196, 137, 0.14) !important;
  color: var(--log-warn) !important;
  border-color: rgba(224, 196, 137, 0.45) !important;
  transform: rotate(0.7deg) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -1px 2px rgba(0,0,0,0.45) !important;
}

/* Info — сіре чорнило */
.dev-tools-scope.al-page .badge-info {
  background: rgba(124, 143, 136, 0.12) !important;
  color: var(--log-info) !important;
  border-color: rgba(124, 143, 136, 0.38) !important;
  transform: rotate(-0.4deg) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 -1px 2px rgba(0,0,0,0.4) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   5. SECTION DIVIDERS — орнаментальні розподільники між блоками
   ═══════════════════════════════════════════════════════════════════ */

/* Базовий divider */
.dev-tools-scope.al-page .al-sp-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 4px auto;
  max-width: var(--max-width, 1400px);
  position: relative;
  height: 18px;
  pointer-events: none;
}

/* Горизонтальні лінії — по обидва боки від символу */
.dev-tools-scope.al-page .al-sp-divider::before,
.dev-tools-scope.al-page .al-sp-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(92, 68, 48, 0.25) 30%,
    rgba(140, 107, 70, 0.45) 60%,
    rgba(92, 68, 48, 0.35) 85%,
    transparent 100%
  );
}
.dev-tools-scope.al-page .al-sp-divider::after {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(92, 68, 48, 0.35) 15%,
    rgba(140, 107, 70, 0.45) 40%,
    rgba(92, 68, 48, 0.25) 70%,
    transparent 100%
  );
}

/* SVG орнамент всередині */
.dev-tools-scope.al-page .al-sp-divider svg {
  flex-shrink: 0;
  margin: 0 6px;
  opacity: 0.45;
  animation: al-v3-ornament-pulse 5s ease-in-out infinite;
}

/* Різні варіанти divider */
.dev-tools-scope.al-page .al-sp-divider--sm {
  height: 12px;
  margin: 2px auto;
}
.dev-tools-scope.al-page .al-sp-divider--sm svg {
  opacity: 0.30;
}


/* ═══════════════════════════════════════════════════════════════════
   6. COPPER WIRES — декоративний SVG дріт між блоками
   ═══════════════════════════════════════════════════════════════════ */

/* Контейнер дроту */
.dev-tools-scope.al-page .al-sp-wire {
  display: block;
  width: 100%;
  max-width: var(--max-width, 1400px);
  margin: 0 auto;
  height: 28px;
  pointer-events: none;
  overflow: visible;
}

/* SVG path всередині — through CSS animation */
.dev-tools-scope.al-page .al-sp-wire-path {
  fill: none;
  stroke: var(--accent-brass-dim);
  stroke-width: 1.2;
  stroke-dasharray: 6 4;
  stroke-dashoffset: 120;
  opacity: 0.38;
  animation: al-v3-current 4s linear infinite;
}

/* Другий провід — більш мідний */
.dev-tools-scope.al-page .al-sp-wire-path--copper {
  stroke: var(--border-bright);
  stroke-width: 0.8;
  stroke-dasharray: 3 6;
  opacity: 0.22;
  animation: al-v3-current 6s linear infinite reverse;
}


/* ═══════════════════════════════════════════════════════════════════
   7. VALVE DIAL OVERLAY — поворотне кільце на select-елементах
   ═══════════════════════════════════════════════════════════════════ */

/* Обгортка select з dial-overlay */
.dev-tools-scope.al-page .al-sp-dial-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Декоративне dial-кільце навколо select */
.dev-tools-scope.al-page .al-sp-dial-wrap::after {
  content: '';
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 35% 30%,
    var(--pewter-light)     0%,
    var(--pewter-mid)       40%,
    var(--pewter-dark)      75%,
    var(--bg-void)          100%
  );
  border: 1px solid rgba(0,0,0,0.7);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.25),
    inset 0 -1px 2px rgba(0,0,0,0.6),
    0 0 0 1px rgba(58,46,34,0.55),
    0 1px 3px rgba(0,0,0,0.7);
  pointer-events: none;
  animation: al-v3-valve-ring 12s linear infinite;
}

/* Насічки на кільці — через радіальний shadow */
.dev-tools-scope.al-page .al-sp-dial-wrap::before {
  content: '';
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px dashed rgba(92, 68, 48, 0.40);
  pointer-events: none;
  z-index: 1;
  animation: al-v3-valve-ring 18s linear infinite reverse;
}

/* Hover на wrap */
.dev-tools-scope.al-page .al-sp-dial-wrap:hover::after {
  border-color: rgba(197, 139, 58, 0.65);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.3),
    inset 0 -1px 2px rgba(0,0,0,0.5),
    0 0 0 1px rgba(197, 139, 58, 0.45),
    0 0 8px rgba(197, 139, 58, 0.20);
}


/* ═══════════════════════════════════════════════════════════════════
   8. PUNCH CARD STRIPES — текстура перфокарти на HUD strip
   ═══════════════════════════════════════════════════════════════════ */

/* Punch-card overlay на HUD strip поверх існуючого фону */
.dev-tools-scope.al-page .al-hud-strip::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Горизонтальні пунктирні рядки перфокарти */
    repeating-linear-gradient(
      180deg,
      transparent         0px,
      transparent         7px,
      rgba(197, 139, 58, 0.035) 8px,
      transparent         9px,
      transparent         11px
    );
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}

/* Контент strip повинен бути поверх punch-card overlay */
.dev-tools-scope.al-page .al-hud-strip > * {
  position: relative;
  z-index: 1;
}


/* ═══════════════════════════════════════════════════════════════════
   9. ENHANCED HEADER BOTTOM — шкіряна стяжка + латунні застібки
   ═══════════════════════════════════════════════════════════════════ */

/* Нижня "шкіряна" смуга header — через новий псевдо-елемент .al-header::after
   Але ::before вже зайнято в v2.0 для brass strip.
   Тому додаємо новий HTML елемент .al-sp-strap */

.dev-tools-scope.al-page .al-sp-strap {
  position: absolute;
  bottom: 3px;
  left: 28px;
  right: 28px;
  height: 5px;
  background:
    /* Нойз-текстура шкіри */
    repeating-linear-gradient(
      90deg,
      rgba(0,0,0,0.18) 0px,
      transparent 2px,
      rgba(0,0,0,0.08) 3px,
      transparent 5px
    ),
    linear-gradient(180deg, var(--bg-hover) 0%, var(--border-dim) 50%, var(--bg-hover) 100%);
  border-radius: 1px;
  pointer-events: none;
  z-index: 3;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.5),
    0 1px 0 rgba(0,0,0,0.7);
}

/* Застібки на стяжці — 3 точки через box-shadow */
.dev-tools-scope.al-page .al-sp-strap::before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 25%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--pewter-highlight), var(--pewter-dark));
  border: 1px solid rgba(0,0,0,0.75);
  box-shadow:
    200px 0 0 -1px var(--pewter-mid),
    200px 0 0 0 rgba(0,0,0,0.65),
    -200px 0 0 -1px var(--pewter-mid),
    -200px 0 0 0 rgba(0,0,0,0.65),
    inset 0 0.5px 0 rgba(255,255,255,0.35);
}


/* ═══════════════════════════════════════════════════════════════════
   10. SIDEBAR CONNECTOR LINES — горизонтальні з'єднання від труб до блоків
   ═══════════════════════════════════════════════════════════════════ */

/* Маленькі горизонтальні "труби" від country-pipe до header */
.dev-tools-scope.al-page .al-sp-connector {
  position: absolute;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--pewter-dark)  20%,
    var(--pewter-mid)   50%,
    var(--pewter-dark)  80%,
    transparent 100%
  );
  pointer-events: none;
}

.dev-tools-scope.al-page .al-sp-connector--left {
  left: 0;
  width: 28px;
}

.dev-tools-scope.al-page .al-sp-connector--right {
  right: 0;
  width: 28px;
}


/* ═══════════════════════════════════════════════════════════════════
   11. ENHANCED SCROLLBAR — промисловіша рейка
   ═══════════════════════════════════════════════════════════════════ */

.dev-tools-scope.al-page ::-webkit-scrollbar {
  width: 8px !important;
}

.dev-tools-scope.al-page ::-webkit-scrollbar-track {
  background: var(--bg-void) !important;
  border-left: 2px solid rgba(58, 46, 34, 0.55) !important;
  box-shadow: inset 1px 0 0 rgba(92, 68, 48, 0.25) !important;
}

.dev-tools-scope.al-page ::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg,
    var(--pewter-dark) 0%,
    var(--pewter-mid)  40%,
    var(--pewter-dark) 100%
  ) !important;
  border-radius: 1px !important;
  border: 1px solid rgba(0,0,0,0.6) !important;
  box-shadow:
    inset 0 1px 0 rgba(168, 152, 138, 0.25),
    inset 0 -1px 0 rgba(0,0,0,0.5) !important;
}

.dev-tools-scope.al-page ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg,
    var(--pewter-mid)   0%,
    var(--pewter-light) 40%,
    var(--pewter-mid)   100%
  ) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   12. ENHANCED ALERT CARD FOOTER — трубопровідна подача
   ═══════════════════════════════════════════════════════════════════ */

/* Source badge — "заводська бирка" */
.dev-tools-scope.al-page .alert-source {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 8.5px !important;
  letter-spacing: 0.12em !important;
  background:
    linear-gradient(180deg, var(--bg-base) 0%, var(--bg-void) 100%) !important;
  border: 1px solid rgba(58, 46, 34, 0.85) !important;
  color: var(--text-muted) !important;
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.75),
    inset 0 -1px 0 rgba(197,139,58,0.04) !important;
  clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 3px) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   13. RESPONSIVE v3.0
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .dev-tools-scope.al-page .al-sp-vent--h1,
  .dev-tools-scope.al-page .al-sp-vent--h2 { display: none; }
}

@media (max-width: 700px) {
  .dev-tools-scope.al-page .al-sp-divider { margin: 2px auto; }
  .dev-tools-scope.al-page .al-sp-strap   { display: none; }
  .dev-tools-scope.al-page .al-sp-dial-wrap::before,
  .dev-tools-scope.al-page .al-sp-dial-wrap::after { display: none; }
}




/* ═══════════════════════════════════════════════════════════════════
   STEAMPUNK ARCH v3.2 — Immersive Background
   Шар 1: Механічна стіна (SVG, z:-2)
   Шар 2: Пара і туман (CSS, z:-1)
   Шар 3: Fog overlay (посилений vignette, вбудований в al-page)
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Шар 1: контейнер механічної стіни ─── */
.dev-tools-scope.al-page .al-bg-machinery {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
  contain: layout paint;
}

.dev-tools-scope.al-page .al-bg-machinery svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ─── Шестерні: анімація через SVG animateTransform (надійніше ніж CSS transform-origin у SVG) ─── */
/* CSS класи шестерень потрібні лише для responsive override-ів */
/* Самі анімації rotate вбудовані в HTML через <animateTransform> */

/* ─── Шар 2: контейнер пари ─── */
.dev-tools-scope.al-page .al-bg-steam {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  contain: layout paint;
}

/* ─── Анімації пари ─── */
@keyframes al-v32-steam-rise {
  0% {
    opacity: 0;
    transform: translateY(0) scaleX(0.85);
  }
  12% {
    opacity: 1;
    transform: translateY(-12px) scaleX(1);
  }
  55% {
    opacity: 0.5;
    transform: translateY(-50px) scaleX(1.3);
  }
  100% {
    opacity: 0;
    transform: translateY(-100px) scaleX(1.8);
  }
}

@keyframes al-v32-cloud-drift {
  0%   { opacity: 0;    transform: translateY(0)     scaleX(1);    }
  18%  { opacity: 1;    transform: translateY(-8px)  scaleX(1.05); }
  60%  { opacity: 0.55; transform: translateY(-28px) scaleX(1.15); }
  100% { opacity: 0;    transform: translateY(-70px) scaleX(1.4);  }
}

@keyframes al-v32-fog-breathe {
  0%,  100% { opacity: 0.04; transform: translateX(0); }
  33%        { opacity: 0.07; transform: translateX(14px); }
  66%        { opacity: 0.05; transform: translateX(-10px); }
}

/* ─── Великі ambient хмарки пари (blur тільки через filter, розмір малий) ─── */
.dev-tools-scope.al-page .al-steam-cloud {
  position: absolute;
  border-radius: 50%;
  background: rgba(232, 219, 178, 0.06);
  filter: blur(40px);
  pointer-events: none;
}

/* Хмарка 1: top-left (поряд з v-трубою та h-трубою) */
.dev-tools-scope.al-page .al-steam-cloud--1 {
  width: 180px;
  height: 120px;
  top: 8%;
  left: 5%;
  animation: al-v32-cloud-drift 12s ease-in-out infinite;
  animation-delay: 0s;
}

/* Хмарка 2: center-left (зона перетину v1 і h2) */
.dev-tools-scope.al-page .al-steam-cloud--2 {
  width: 220px;
  height: 160px;
  top: 42%;
  left: 3%;
  animation: al-v32-cloud-drift 15s ease-in-out infinite;
  animation-delay: -4s;
}

/* Хмарка 3: top-center (над вентилем h1) */
.dev-tools-scope.al-page .al-steam-cloud--3 {
  width: 160px;
  height: 110px;
  top: 5%;
  left: 40%;
  animation: al-v32-cloud-drift 10s ease-in-out infinite;
  animation-delay: -7s;
}

/* Хмарка 4: center-right (поряд з h2 і великою шестернею) */
.dev-tools-scope.al-page .al-steam-cloud--4 {
  width: 200px;
  height: 140px;
  top: 50%;
  right: 8%;
  animation: al-v32-fog-breathe 18s ease-in-out infinite;
  animation-delay: -2s;
}

/* Хмарка 5: bottom fog (загальне затуманювання низу) */
.dev-tools-scope.al-page .al-steam-cloud--5 {
  width: 500px;
  height: 200px;
  bottom: 0;
  left: 20%;
  background: rgba(232, 219, 178, 0.04);
  filter: blur(60px);
  animation: al-v32-fog-breathe 22s ease-in-out infinite;
  animation-delay: -11s;
}

/* ─── Конкретні витоки пари (стовпчики з точок з'єднань) ─── */
.dev-tools-scope.al-page .al-steam-jet {
  position: absolute;
  pointer-events: none;
  filter: blur(5px);
}

/* Витік 1: вентиль h1 ~x=634, y=134 */
.dev-tools-scope.al-page .al-steam-jet--1 {
  left: calc(634 / 1440 * 100%);
  top: calc(80 / 900 * 100%);
  width: 6px;
  height: 55px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(232, 219, 178, 0.10) 30%,
    rgba(232, 219, 178, 0.14) 60%,
    rgba(232, 219, 178, 0.06) 100%
  );
  border-radius: 3px;
  animation: al-v32-steam-rise 9s ease-out infinite;
  animation-delay: 0s;
}

/* Витік 2: перетин v1+h2 ~x=160, y=449 */
.dev-tools-scope.al-page .al-steam-jet--2 {
  left: calc(154 / 1440 * 100%);
  top: calc(380 / 900 * 100%);
  width: 5px;
  height: 65px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(232, 219, 178, 0.08) 25%,
    rgba(232, 219, 178, 0.12) 55%,
    rgba(232, 219, 178, 0.05) 100%
  );
  border-radius: 3px;
  animation: al-v32-steam-rise 11s ease-out infinite;
  animation-delay: -3.5s;
}

/* Витік 3: манометр h2 ~x=820, y=444 */
.dev-tools-scope.al-page .al-steam-jet--3 {
  left: calc(820 / 1440 * 100%);
  top: calc(375 / 900 * 100%);
  width: 4px;
  height: 45px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(232, 219, 178, 0.09) 35%,
    rgba(232, 219, 178, 0.11) 65%,
    transparent 100%
  );
  border-radius: 2px;
  animation: al-v32-steam-rise 7.5s ease-out infinite;
  animation-delay: -6s;
}

/* ─── Шар 3: fog overlay — посилений vignette + bottom fog ─── */
/* Перевизначаємо ::before al-page для глибшого затуманювання.
   Базове ::before вже є (vignette з .al-page блоку вище),
   тут лише додаємо посилення через більш важкий vignette.
   Стара ::before (з .al-page без .dev-tools-scope) вже має content:''.
   Ця специфічніша версія (.dev-tools-scope.al-page) перекриє її. */
.dev-tools-scope.al-page::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    /* Brass fog знизу — теплий туман машинного відділення */
    radial-gradient(ellipse 140% 50% at 50% 110%, rgba(197, 139, 58, 0.04) 0%, transparent 55%),
    /* Vignette кутів — важчий ніж у базовому al-page */
    radial-gradient(ellipse 100% 70% at 50% 40%, transparent 30%, rgba(0, 0, 0, 0.65) 100%),
    radial-gradient(ellipse 60% 60% at 0% 0%,   rgba(0, 0, 0, 0.45) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 100% 0%,  rgba(0, 0, 0, 0.45) 0%, transparent 60%),
    radial-gradient(ellipse 80% 40% at 50% 100%, rgba(0, 0, 0, 0.55) 0%, transparent 60%);
}

/* Старі шестерні v1.1 (::after = bottom-left) — трохи притишуємо
   щоб не конкурували з новою сценою */
.dev-tools-scope.al-page::after {
  opacity: 0.30;
}

/* ─── Responsive: мобільні екрани ─── */
@media (max-width: 768px) {
  /* Шестерні 1 і 2 трохи зменшуємо через scale */
  .dev-tools-scope.al-page .al-bg-gear--1 { opacity: 0.18; }
  .dev-tools-scope.al-page .al-bg-gear--2 { opacity: 0.20; }
  .dev-tools-scope.al-page .al-bg-gear--5 { opacity: 0.12; }

  /* Хмарки пари залишаються але менш яскраві */
  .dev-tools-scope.al-page .al-steam-cloud { opacity: 0.6; }

  /* Приховуємо складні труби на малих екранах */
  .dev-tools-scope.al-page .al-bg-pipe-h2,
  .dev-tools-scope.al-page .al-bg-pipe-h3,
  .dev-tools-scope.al-page .al-bg-pipe-v2 { display: none; }
}

@media (max-width: 500px) {
  .dev-tools-scope.al-page .al-bg-machinery { opacity: 0.7; }
  .dev-tools-scope.al-page .al-bg-steam     { opacity: 0.7; }
}

/* ─── End STEAMPUNK ARCH v3.2 ─── */


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║  STEAMPUNK FIXES v3.3 — 14 точкових виправлень                   ║
   ║  8 проблем від користувача + 6 від аудиту скріншота               ║
   ║  Селектори .dev-tools-scope.al-page для високої специфічності     ║
   ║  100% SSOT: все через var() або rgba від SSOT кольорів            ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* ═══ FIX-1: Зелена смужка sources — зі старої палітри → --success ═══ */
.dev-tools-scope.al-page .al-hud-sources.ok,
.dev-tools-scope.al-page .al-hud-sources.ok .material-symbols-outlined {
  color: var(--success) !important;
}
.dev-tools-scope.al-page .al-hud-sources {
  color: var(--text-body) !important;
}

/* ═══ FIX-2: Пунктирні рамки — dashed тільки на групових контейнерах ═══ */
/* Усі інші — solid */
.dev-tools-scope.al-page .al-threat-banner,
.dev-tools-scope.al-page .al-hud-strip,
.dev-tools-scope.al-page .alerts-feed > *,
.dev-tools-scope.al-page .al-custom-form,
.dev-tools-scope.al-page .al-hint-details,
.dev-tools-scope.al-page .al-last-viewed-banner,
.dev-tools-scope.al-page .al-bulk-confirm {
  border-style: solid !important;
}
/* Групові контейнери — solid subtle, без dashed (конфліктує з подвійною рамкою модуля) */
.dev-tools-scope.al-page .alerts-group {
  border-style: solid !important;
  border-color: rgba(92, 68, 48, 0.25) !important;
}

/* ═══ FIX-3: Фонові шестерні — зменшити opacity ═══ */
.dev-tools-scope.al-page .al-bg-machinery {
  opacity: 0.22 !important;
}
/* Старі великі шестерні з v1.1 ::before/::after теж приглушити */
.dev-tools-scope.al-page::before {
  opacity: 0.25 !important;
}
.dev-tools-scope.al-page::after {
  opacity: 0.18 !important;
}

/* ═══ FIX-4: Контраст дрібного тексту — підняти ═══ */
/* Body-текст карток → --text-body */
.dev-tools-scope.al-page .alerts-feed > * {
  color: var(--text-body) !important;
}
/* Заголовки карток → --text-bright */
.dev-tools-scope.al-page .alert-card-title,
.dev-tools-scope.al-page [class*="alert-card"] h3,
.dev-tools-scope.al-page [class*="alert-card"] .alert-title {
  color: var(--text-bright) !important;
}
/* Hint-текст, descriptions → підвищити з var(--log-debug) до var(--al-x, #8a7a64) приблизно = --text-muted + 10% */
.dev-tools-scope.al-page .al-hint-body,
.dev-tools-scope.al-page .alert-card-body,
.dev-tools-scope.al-page .alert-card-details,
.dev-tools-scope.al-page .al-hint-summary {
  color: var(--text-body) !important;
}
/* Timestamps і дрібні підписи */
.dev-tools-scope.al-page .alert-card-time,
.dev-tools-scope.al-page .alert-card-source,
.dev-tools-scope.al-page .alert-card-module {
  color: var(--text-muted) !important;
}

/* ═══ FIX-5: Бейдж "КРИТИЧНО" — використати SSOT --log-critical ═══ */
.dev-tools-scope.al-page .alert-card-badge[class*="critical"],
.dev-tools-scope.al-page .severity-badge[class*="critical"],
.dev-tools-scope.al-page [class*="badge"][class*="critical"],
.dev-tools-scope.al-page .al-card-severity--critical {
  background: var(--danger-bg) !important;
  color: var(--log-critical) !important;
  border-color: var(--danger-border) !important;
}
.dev-tools-scope.al-page .alert-card-badge[class*="high"],
.dev-tools-scope.al-page .severity-badge[class*="high"],
.dev-tools-scope.al-page [class*="badge"][class*="high"],
.dev-tools-scope.al-page .al-card-severity--high {
  color: var(--log-error) !important;
}
.dev-tools-scope.al-page .alert-card-badge[class*="medium"],
.dev-tools-scope.al-page .severity-badge[class*="medium"],
.dev-tools-scope.al-page [class*="badge"][class*="medium"],
.dev-tools-scope.al-page .al-card-severity--medium {
  color: var(--log-warn) !important;
}
.dev-tools-scope.al-page .alert-card-badge[class*="info"],
.dev-tools-scope.al-page .severity-badge[class*="info"],
.dev-tools-scope.al-page [class*="badge"][class*="info"],
.dev-tools-scope.al-page .al-card-severity--info {
  color: var(--log-info) !important;
}

/* ═══ FIX-6: Severity підписи — збільшити font-size + кольори ═══ */
.dev-tools-scope.al-page .al-hud-meter-label {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
}
/* Кольори підписів відповідають severity */
.dev-tools-scope.al-page .al-hud-meter--critical .al-hud-meter-label {
  color: var(--log-critical) !important;
}
.dev-tools-scope.al-page .al-hud-meter--high .al-hud-meter-label {
  color: var(--log-error) !important;
}
.dev-tools-scope.al-page .al-hud-meter--medium .al-hud-meter-label {
  color: var(--log-warn) !important;
}
.dev-tools-scope.al-page .al-hud-meter--info .al-hud-meter-label {
  color: var(--log-info) !important;
}
/* Лічильники теж у severity-кольорах */
.dev-tools-scope.al-page .al-hud-meter--critical .al-hud-meter-count {
  color: var(--log-critical) !important;
}
.dev-tools-scope.al-page .al-hud-meter--high .al-hud-meter-count {
  color: var(--log-error) !important;
}
.dev-tools-scope.al-page .al-hud-meter--medium .al-hud-meter-count {
  color: var(--log-warn) !important;
}
.dev-tools-scope.al-page .al-hud-meter--info .al-hud-meter-count {
  color: var(--log-info) !important;
}

/* ═══ FIX-7: Модульні акценти — Paymaster → --mod-paymaster ═══ */
.dev-tools-scope.al-page .alerts-group-dot--paymaster,
.dev-tools-scope.al-page .alerts-group-dot[style*="paymaster"],
.dev-tools-scope.al-page .alerts-group-dot[class*="pay"] {
  background: var(--mod-paymaster) !important;
}
/* Група модулів — приглушені border-left кольори (opacity через напівпрозорість) */
.dev-tools-scope.al-page .alerts-group[data-module] {
  border-left: 3px solid rgba(92, 68, 48, 0.30) !important;
}

/* ═══ FIX-8: Активний таб — чіткіший сигнал ═══ */
.dev-tools-scope.al-page .alerts-tab--active {
  background:
    linear-gradient(180deg,
      var(--bg-hover) 0%,
      var(--bg-elevated) 100%
    ) !important;
  color: var(--accent-brass-hover) !important;
  border: 1px solid var(--accent-brass) !important;
  border-bottom: 3px solid var(--accent-brass-hover) !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 219, 178, 0.15),
    inset 0 -2px 4px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 0 12px rgba(197, 139, 58, 0.25),
    0 2px 6px rgba(0, 0, 0, 0.7) !important;
  text-shadow: 0 1px 0 var(--bg-void), 0 0 6px rgba(216, 157, 72, 0.45) !important;
  transform: translateY(-3px) !important;
}

/* ═══ MY-FIX-1: Контраст картки ↔ фон — підняти bg карток ═══ */
.dev-tools-scope.al-page .alerts-feed > * {
  background:
    repeating-linear-gradient(
      93deg,
      rgba(232, 219, 178, 0.010) 0px,
      transparent 1px,
      transparent 6px
    ),
    linear-gradient(180deg,
      var(--bg-elevated) 0%,
      var(--bg-surface) 100%
    ) !important;
}

/* ═══ MY-FIX-2: Severity border-left на картках — товстіший ═══ */
.dev-tools-scope.al-page .alerts-feed > * {
  border-left-width: 5px !important;
}

/* ═══ MY-FIX-3: Заголовок "ЦЕНТР СПОВІЩЕНЬ" — більший і яскравіший ═══ */
.dev-tools-scope.al-page .al-title {
  font-size: 22px !important;
  color: var(--text-bright) !important;
  text-shadow:
    0 1px 0 var(--bg-void),
    0 2px 4px rgba(0, 0, 0, 0.9),
    0 0 14px rgba(197, 139, 58, 0.2) !important;
  letter-spacing: 0.15em !important;
}

/* ═══ MY-FIX-4: HUD meters — додати gap ═══ */
.dev-tools-scope.al-page .al-hud-meters {
  gap: 10px !important;
}
.dev-tools-scope.al-page .al-hud-meter {
  padding: 8px 12px !important;
  min-width: 56px !important;
}

/* ═══ MY-FIX-5: Неактивні таби — базовий контраст ═══ */
.dev-tools-scope.al-page .alerts-tab {
  color: var(--text-body) !important;
}
.dev-tools-scope.al-page .alerts-tab .tab-count {
  color: var(--text-muted) !important;
}

/* ═══ MY-FIX-6: Threat banner text — читабельність ═══ */
.dev-tools-scope.al-page .al-threat-banner {
  color: var(--text-bright) !important;
}
.dev-tools-scope.al-page #statusBannerText {
  color: var(--text-bright) !important;
}

/* ═══ GLOBAL: Усі severity-кольорові елементи через SSOT ═══ */
/* Перевизначення будь-яких залишків старих хардкодів */
.dev-tools-scope.al-page [style*="color: var(--success)"],
.dev-tools-scope.al-page [style*="color:var(--success)"],
.dev-tools-scope.al-page [style*="color: var(--mod-observer)"],
.dev-tools-scope.al-page [style*="color:var(--mod-observer)"] {
  color: var(--success) !important;
}
.dev-tools-scope.al-page [style*="color: var(--mod-executor)"],
.dev-tools-scope.al-page [style*="color:var(--mod-executor)"],
.dev-tools-scope.al-page [style*="color: var(--log-critical)"],
.dev-tools-scope.al-page [style*="color:var(--log-critical)"] {
  color: var(--log-critical) !important;
}

/* ─── End STEAMPUNK FIXES v3.3 ─── */


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║  STEAMPUNK FIXES v3.4 — 7 проблем зі скріншоту #2               ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* ═══ P1: Threat banner рамка — тільки border-left червоний, решта приглушена ═══ */
.dev-tools-scope.al-page .al-threat-banner {
  border: 1.5px solid var(--border-dim) !important;
  border-left: 5px solid var(--log-critical) !important;
}
.dev-tools-scope.al-page .al-threat-banner.state-ok {
  border-left-color: var(--success) !important;
}
.dev-tools-scope.al-page .al-threat-banner.state-warn {
  border-left-color: var(--log-warn) !important;
}
.dev-tools-scope.al-page .al-threat-banner.state-critical {
  border-left-color: var(--log-critical) !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 219, 178, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(193, 68, 24, 0.25),
    0 0 10px rgba(193, 68, 24, 0.12),
    0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

/* ═══ P2: Групові контейнери — solid subtle border, без dashed ═══ */
.dev-tools-scope.al-page .alerts-group {
  border: 1px solid rgba(92, 68, 48, 0.15) !important;
  border-left: 3px solid rgba(92, 68, 48, 0.30) !important;
  background: rgba(31, 24, 18, 0.20) !important;
  border-radius: 3px;
  padding: 6px !important;
  margin-bottom: 10px !important;
}

/* ═══ P3: Картки всередині груп — прибрати рамку, тільки severity border-left ═══ */
.dev-tools-scope.al-page .alerts-group .alerts-feed > *,
.dev-tools-scope.al-page .alerts-group [class*="alert-card"] {
  border: none !important;
  border-left: 4px solid rgba(92, 68, 48, 0.5) !important;
  border-radius: 2px !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 219, 178, 0.03),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55),
    0 1px 3px rgba(0, 0, 0, 0.5) !important;
}
/* Severity border-left — тихі, не конкурують з рамкою блоку */
.dev-tools-scope.al-page .alerts-group [class*="alert-card"][class*="critical"],
.dev-tools-scope.al-page .alerts-group [data-severity="critical"] {
  border-left-color: rgba(193, 68, 24, 0.45) !important;
}
.dev-tools-scope.al-page .alerts-group [class*="alert-card"][class*="high"],
.dev-tools-scope.al-page .alerts-group [data-severity="high"] {
  border-left-color: rgba(227, 111, 61, 0.40) !important;
}
.dev-tools-scope.al-page .alerts-group [class*="alert-card"][class*="medium"],
.dev-tools-scope.al-page .alerts-group [data-severity="medium"] {
  border-left-color: rgba(224, 196, 137, 0.35) !important;
}
.dev-tools-scope.al-page .alerts-group [class*="alert-card"][class*="info"],
.dev-tools-scope.al-page .alerts-group [data-severity="info"] {
  border-left-color: rgba(124, 143, 136, 0.35) !important;
}

/* ═══ P4: HUD severity meters — компактніше ═══ */
.dev-tools-scope.al-page .al-hud-meters {
  gap: 8px !important;
}
.dev-tools-scope.al-page .al-hud-meter {
  padding: 4px 10px !important;
  min-width: 52px !important;
  text-align: center !important;
  border-radius: 3px !important;
  position: relative;
}
/* Розділювач між meters через ::after */
.dev-tools-scope.al-page .al-hud-meter:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -8px;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: var(--border-dim);
}

/* ═══ P5: Header кнопки — більше простору ═══ */
.dev-tools-scope.al-page .al-hdr-actions {
  gap: 14px !important;
  padding-right: 8px !important;
}
.dev-tools-scope.al-page .al-interval-wrap {
  gap: 8px !important;
  padding: 4px 12px !important;
}

/* ═══ P6: Dismiss кнопки — стімпанк стиль ═══ */
.dev-tools-scope.al-page .alert-card-dismiss,
.dev-tools-scope.al-page [class*="dismiss"],
.dev-tools-scope.al-page .al-dismiss-btn {
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-base) 100%) !important;
  color: var(--text-body) !important;
  border: 1px solid var(--border-metal) !important;
  border-radius: 2px !important;
  padding: 4px 10px !important;
  font-family: var(--font-ui, 'Oswald', sans-serif); /* UPPERCASE label — canon font */
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 219, 178, 0.08),
    inset 0 -1px 1px rgba(0, 0, 0, 0.55),
    0 1px 2px rgba(0, 0, 0, 0.6) !important;
  transition: all 0.2s ease !important;
  cursor: pointer;
}
.dev-tools-scope.al-page .alert-card-dismiss:hover,
.dev-tools-scope.al-page [class*="dismiss"]:hover,
.dev-tools-scope.al-page .al-dismiss-btn:hover {
  background: linear-gradient(180deg, var(--bg-hover) 0%, var(--bg-surface) 100%) !important;
  color: var(--success) !important;
  border-color: var(--success) !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 219, 178, 0.10),
    inset 0 -1px 1px rgba(0, 0, 0, 0.45),
    0 0 6px rgba(86, 163, 166, 0.2),
    0 1px 3px rgba(0, 0, 0, 0.6) !important;
  transform: translateY(-1px);
}

/* ═══ P7: Активний таб — ще чіткіший контраст ═══ */
.dev-tools-scope.al-page .alerts-tab--active {
  background: var(--bg-hover) !important;
  color: var(--text-bright) !important;
  border: 1px solid var(--accent-brass) !important;
  border-bottom: 3px solid var(--accent-brass-hover) !important;
  font-weight: 700 !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 219, 178, 0.18),
    inset 0 -2px 5px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 0 14px rgba(197, 139, 58, 0.30),
    0 3px 8px rgba(0, 0, 0, 0.7) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.8), 0 0 8px rgba(216, 157, 72, 0.5) !important;
  transform: translateY(-3px) !important;
}
/* Неактивні таби — чітко м'якший */
.dev-tools-scope.al-page .alerts-tab:not(.alerts-tab--active) {
  background: var(--bg-base) !important;
  color: var(--text-muted) !important;
  border: 1px solid transparent !important;
  font-weight: 400 !important;
}
.dev-tools-scope.al-page .alerts-tab:not(.alerts-tab--active):hover {
  background: var(--bg-surface) !important;
  color: var(--text-body) !important;
  border-color: var(--border-dim) !important;
}

/* ─── End STEAMPUNK FIXES v3.4 ─── */


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║  FINAL OVERRIDES — останні правила, перебивають все вище.         ║
   ║  Розміщено в САМОМУ КІНЦІ файлу. Однакова специфічність +        ║
   ║  !important + остання позиція = гарантована перемога.             ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* ═══ F: Group header — приглушити рамку ═══ */
.dev-tools-scope.al-page .alerts-group-header {
  background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-base) 100%) !important;
  border: 1px solid var(--border-dim) !important;
  border-left: 4px solid var(--border-metal) !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 219, 178, 0.04),
    inset 0 -1px 0 rgba(0, 0, 0, 0.65),
    0 1px 3px rgba(0, 0, 0, 0.5) !important;
  border-radius: 2px !important;
}
.dev-tools-scope.al-page .alerts-group-header:hover {
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-surface) 100%) !important;
  border-color: var(--border-metal) !important;
  border-left-color: var(--border-bright) !important;
  color: var(--text-bright) !important;
}

/* Group dots — steampunk модульні кольори */
.dev-tools-scope.al-page .alerts-group-dot {
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.15),
    0 0 4px currentColor,
    0 1px 2px rgba(0,0,0,0.8) !important;
}

/* Group name + count */
.dev-tools-scope.al-page .alerts-group-name {
  color: var(--text-bright) !important;
  letter-spacing: 0.06em !important;
}
.dev-tools-scope.al-page .alerts-group-count {
  background: var(--bg-void) !important;
  border: 1px solid var(--border-dim) !important;
  color: var(--text-body) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.7) !important;
}

/* ═══ F: Tabs — фінальне одне правило замість 4 дублів ═══ */
.dev-tools-scope.al-page .alerts-tab--active {
  background: var(--bg-hover) !important;
  color: var(--text-bright) !important;
  font-weight: 700 !important;
  border: 1px solid var(--accent-brass) !important;
  border-bottom: 3px solid var(--accent-brass-hover) !important;
  transform: translateY(-3px) !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 219, 178, 0.20),
    inset 0 -2px 5px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 0 16px rgba(197, 139, 58, 0.30),
    0 4px 10px rgba(0, 0, 0, 0.7) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.9), 0 0 8px rgba(216, 157, 72, 0.5) !important;
}
.dev-tools-scope.al-page .alerts-tab--active .tab-count {
  color: var(--accent-brass-hover) !important;
  opacity: 1 !important;
}
.dev-tools-scope.al-page .alerts-tab:not(.alerts-tab--active) {
  background: var(--bg-void) !important;
  color: var(--text-muted) !important;
  font-weight: 400 !important;
  border: 1px solid transparent !important;
  transform: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.dev-tools-scope.al-page .alerts-tab:not(.alerts-tab--active):hover {
  background: var(--bg-base) !important;
  color: var(--text-body) !important;
  border-color: var(--border-dim) !important;
}

/* ═══ F: Subtitle — яскравіший ═══ */
.dev-tools-scope.al-page .devtools-subtitle {
  color: var(--text-body) !important;
  background: var(--bg-base) !important;
  border-bottom: 1px solid var(--border-dim) !important;
}

/* ═══ F: Alert cards — рамку прибрати окрім severity left ═══ */
.dev-tools-scope.al-page .alerts-feed > *,
.dev-tools-scope.al-page [class*="alert-card"] {
  border-top: none !important;
  border-right: none !important;
  border-bottom: 1px solid var(--border-dim) !important;
  border-left: 5px solid var(--border-metal) !important;
  background: var(--bg-surface) !important;
  color: var(--text-bright) !important;
}
/* Severity border-left на картках (фінальне) */
.dev-tools-scope.al-page [class*="alert-card"][class*="critical"],
.dev-tools-scope.al-page [data-severity="critical"] {
  border-left-color: var(--log-critical) !important;
}
.dev-tools-scope.al-page [class*="alert-card"][class*="high"],
.dev-tools-scope.al-page [data-severity="high"] {
  border-left-color: var(--log-error) !important;
}
.dev-tools-scope.al-page [class*="alert-card"][class*="medium"],
.dev-tools-scope.al-page [data-severity="medium"] {
  border-left-color: var(--log-warn) !important;
}
.dev-tools-scope.al-page [class*="alert-card"][class*="info"],
.dev-tools-scope.al-page [data-severity="info"] {
  border-left-color: var(--log-info) !important;
}

/* ═══ F: Sources OK — зелений var(--success) → --success (var(--success)) ═══ */
/* Перекриваємо ВСІ варіанти зеленого: inline, expanded, всі класи */
.dev-tools-scope.al-page .summary-sources-inline.ok,
.dev-tools-scope.al-page .al-hud-sources.ok,
.dev-tools-scope.al-page .sources-info--ok,
.dev-tools-scope.al-page .sources-info.sources-info--ok {
  color: var(--success) !important;
  background: rgba(86, 163, 166, 0.12) !important;
  border-color: rgba(86, 163, 166, 0.30) !important;
}
.dev-tools-scope.al-page .summary-sources-inline.ok .material-symbols-outlined,
.dev-tools-scope.al-page .al-hud-sources.ok .material-symbols-outlined,
.dev-tools-scope.al-page .sources-info--ok .material-symbols-outlined {
  color: var(--success) !important;
}

/* ═══ F: Threat banner — solid замість dashed ═══ */
.dev-tools-scope.al-page .al-threat-banner {
  border-style: solid !important;
}

/* ═══ F: Group dots — пояснення ═══ */
/* Dots показують SEVERITY групи (не модуль). Це ПРАВИЛЬНО.
   Paymaster dot = помаранчевий бо має high-severity алерт.
   Модульний колір через border-left на group-header. */

/* ─── End FINAL OVERRIDES ─── */


/* ════════════════════════════════════════════════════════════════
   STEAMPUNK MINIMAL v4.0 — 4 типи CSS-декору. Без анімацій.
   ════════════════════════════════════════════════════════════════ */

/* ── Приховати всі v2.0-v3.2 декоративні елементи (backup) ── */
.dev-tools-scope.al-page .al-bg-machinery,
.dev-tools-scope.al-page .al-bg-steam,
.dev-tools-scope.al-page .al-sp-pipes,
.dev-tools-scope.al-page .al-sp-vent,
.dev-tools-scope.al-page .al-sp-divider,
.dev-tools-scope.al-page .al-sp-wire,
.dev-tools-scope.al-page .al-sp-dial-wrap,
.dev-tools-scope.al-page .al-sp-nameplate,
.dev-tools-scope.al-page .al-sp-strap,
.dev-tools-scope.al-page .al-header-gear-decor {
  display: none !important;
}

/* ── Чистий фон сторінки — замінено на STEAMPUNK BACKGROUND v5.0 нижче ── */
/* .dev-tools-scope.al-page { background: var(--bg-void) !important; } */
.dev-tools-scope.al-page::before,
.dev-tools-scope.al-page::after {
  display: none !important;
}

/* ════ ТИП 1: Заклепки на dt-bolt (вже в HTML, новий стиль) ════ */
.dev-tools-scope.al-page .dt-bolt {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--border-bright), var(--border-metal) 60%, var(--bg-elevated));
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.10), 0 1px 2px rgba(0,0,0,0.4);
  border: none;
}
.dev-tools-scope.al-page .dt-bolt::after {
  /* прибираємо стару псевдо-крапку, залишаємо чистий вигляд */
  display: none;
}

/* ════ ТИП 2: Металевий шов — приховано для компактності ════ */
.dev-tools-scope.al-page .al-metal-seam {
  display: none !important;
  position: relative;
  height: 1px;
  background: var(--border-dim);
  margin: 20px auto;
  max-width: var(--max-content, 1400px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.02);
}
.dev-tools-scope.al-page .al-metal-seam::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 2px solid var(--border-metal);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
}
.dev-tools-scope.al-page .al-metal-seam::after {
  content: '+';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 8px;
  color: var(--border-bright);
  line-height: 1;
  font-family: monospace;
}

/* ════ ТИП 3: Кутові накладки на заголовку header ════ */
.dev-tools-scope.al-page .al-header-text {
  position: relative;
  padding: 4px 12px;
}
.dev-tools-scope.al-page .al-header-text::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  width: 20px;
  height: 20px;
  border-top: 2px solid var(--accent-brass);
  border-left: 2px solid var(--accent-brass);
  pointer-events: none;
  opacity: 0.75;
}
.dev-tools-scope.al-page .al-header-text::after {
  content: '';
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  border-bottom: 2px solid var(--accent-brass);
  border-right: 2px solid var(--accent-brass);
  pointer-events: none;
  opacity: 0.75;
}

/* ════ ТИП 4: Індикаторна лампочка (status dot) ════ */
.dev-tools-scope.al-page .al-hud-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--border-metal);
  flex-shrink: 0;
}
.dev-tools-scope.al-page .al-hud-status-dot.dot-ok {
  background: radial-gradient(circle at 40% 35%, var(--text-bright) 0%, var(--success) 40%, var(--pewter-dark, #2a4a4c) 100%);
  box-shadow: 0 0 6px var(--success), inset 0 -1px 2px rgba(0,0,0,0.3);
}
.dev-tools-scope.al-page .al-hud-status-dot.dot-warn {
  background: radial-gradient(circle at 40% 35%, var(--text-bright) 0%, var(--warning) 40%, var(--pewter-dark, #4a3a20) 100%);
  box-shadow: 0 0 6px var(--warning), inset 0 -1px 2px rgba(0,0,0,0.3);
}
.dev-tools-scope.al-page .al-hud-status-dot.dot-critical {
  background: radial-gradient(circle at 40% 35%, var(--text-bright) 0%, var(--log-critical) 40%, var(--pewter-dark, #5a2010) 100%);
  box-shadow: 0 0 6px var(--log-critical), inset 0 -1px 2px rgba(0,0,0,0.3);
}


/* ════════════════════════════════════════════════════════════════
   STEAMPUNK BACKGROUND v5.0
   Шар 1: CSS multi-layer backgrounds (dot-grid + structural lines)
   Шар 2: Inline SVG scene (.al-bg-scene) — шестерні, труба, компас
   ════════════════════════════════════════════════════════════════ */

/* ── Override чистого фону — підключаємо multi-layer ── */
.dev-tools-scope.al-page {
  background:
    /* Vignette — затемнення по краях */
    radial-gradient(ellipse 130% 90% at 50% 40%, transparent 0%, rgba(13, 9, 7, 0.65) 100%),

    /* Горизонтальні "труби" — структурні балки кожні ~400px */
    repeating-linear-gradient(
      180deg,
      transparent 0px,
      transparent 188px,
      rgba(58, 46, 34, 0.16) 188px,
      rgba(58, 46, 34, 0.20) 196px,
      rgba(42, 32, 24, 0.12) 198px,
      transparent 198px,
      transparent 400px
    ),

    /* Вертикальні "балки" — опорні стойки кожні ~600px */
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 286px,
      rgba(58, 46, 34, 0.10) 286px,
      rgba(58, 46, 34, 0.14) 292px,
      rgba(42, 32, 24, 0.08) 294px,
      transparent 294px,
      transparent 600px
    ),

    /* Сітка заклепок — dot-pattern 40x40px */
    radial-gradient(circle at 50% 50%, rgba(92, 68, 48, 0.10) 1px, transparent 1.5px),

    /* Базовий фон */
    var(--bg-void, var(--bg-void));

  background-size:
    100% 100%,
    100% 400px,
    600px 100%,
    40px 40px,
    100% 100%;

  background-attachment: fixed, fixed, fixed, fixed, fixed;
}

/* ── Скасувати заблокований ::before / ::after (v3.x залишки) ── */
.dev-tools-scope.al-page::before,
.dev-tools-scope.al-page::after {
  display: none !important;
}

/* ── SVG сцена — фіксований шар під всім контентом ── */
.dev-tools-scope.al-page .al-bg-scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.25;
  contain: layout paint;
}

/* ─── End STEAMPUNK MINIMAL v4.0 ─── */


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║  MODULAR LAYOUT v6.0 — Модульні панелі + труби + hub-style герб ║
   ║  Балка → Труби → Блок 1 (Control) → Труби → Блок 2 (Feed)      ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* ═══════════════════════════════════════════════════════════════
   ГЕРБ v3.0 — Steampunk Frame Kit (Wide 2: gear corners)
   ═══════════════════════════════════════════════════════════════ */

/* ─── Герб: зовнішній контейнер (обгортка з position) ─── */
.dev-tools-scope.al-page .al-crest {
  position: absolute;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  filter: none !important;
  padding: 0 !important;
}

/* ─── Shell — саме sp-frame (рамка з декором) ─── */
.dev-tools-scope.al-page .al-crest .dt-crest__shell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 320px;
  min-height: 60px;
  padding: 8px 28px 6px;
  background:
    radial-gradient(ellipse at 50% 30%, var(--bg-elevated) 0%, var(--bg-void) 80%),
    linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-void) 100%) !important;
  border: 4px solid var(--border-metal) !important;
  border-radius: 3px !important;
  clip-path: none !important;
  box-shadow:
    inset 0 0 0 1px rgba(218,154,107,0.20),
    inset 0 2px 6px rgba(0,0,0,0.5),
    0 0 0 1px rgba(90,53,21,0.5),
    0 4px 14px rgba(0,0,0,0.6) !important;
  overflow: visible !important;
}
/* Внутрішня фаска — warm brass accent */
.dev-tools-scope.al-page .al-crest .dt-crest__shell::before {
  content: '';
  position: absolute;
  inset: 2px;
  border: 1px solid rgba(197, 139, 58, 0.12);
  border-radius: 2px;
  pointer-events: none;
  z-index: 0;
}
.dev-tools-scope.al-page .al-crest .dt-crest__shell::after {
  display: none;
}
.dev-tools-scope.al-page .al-crest .dt-crest__rivet {
  display: none !important;
}

/* Ховаємо старий plate — використовуємо al-crest-plate */
.dev-tools-scope.al-page .al-crest .dt-crest__plate {
  all: unset;
  display: contents;
}

/* Табличка секції — кріпиться зверху на рамці */
.dev-tools-scope.al-page .al-crest-plate {
  position: absolute;
  left: 50%;
  top: -5px;
  transform: translate(-50%, -50%);
  padding: 1px 10px;
  background: linear-gradient(to bottom, var(--bg-elevated), var(--bg-base), var(--bg-base));
  border: 1px solid var(--sp-brass-shadow);
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 7px;
  letter-spacing: 2px;
  color: var(--sp-brass);
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 6;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

/* Body — внутрішня зона з сігіл + назва + мета */
.dev-tools-scope.al-page .al-crest-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  position: relative;
  z-index: 2;
}

/* Ряд: сігіл + title horizontal */
.dev-tools-scope.al-page .al-crest-sigil-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Сігіл (знак-дзвін) — вписаний в коло з brass-рамкою */
.dev-tools-scope.al-page .al-crest-sigil {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%,
    var(--bg-elevated), var(--bg-base) 50%, var(--bg-void));
  border: 1.5px solid var(--sp-brass-dark);
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,0.7),
    0 1px 3px rgba(0,0,0,0.5),
    0 0 0 1px rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Лого-текст */
.dev-tools-scope.al-page .al-crest .dt-crest__title {
  font-family: 'Cinzel', 'Oswald', serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  line-height: 1.1 !important;
  margin: 0 !important;
  color: var(--text-bright) !important;
  -webkit-text-fill-color: var(--text-bright) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  text-transform: uppercase;
  text-shadow:
    0 1px 0 rgba(197, 139, 58, 0.35),
    0 -1px 0 rgba(0,0,0,0.9),
    0 0 8px rgba(197, 139, 58, 0.12) !important;
}

/* Мета-рядок з dots */
.dev-tools-scope.al-page .al-crest-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 1px;
}
.dev-tools-scope.al-page .al-crest-meta-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--sp-brass);
  box-shadow: 0 0 4px rgba(200, 168, 74, 0.5);
}
.dev-tools-scope.al-page .al-crest-meta-txt {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.25em;
  color: var(--sp-brass);
  opacity: 0.85;
  text-transform: uppercase;
}

/* Лампи герба — сигналізація (колір від стану) */
.dev-tools-scope.al-page .al-crest-lamp {
  position: absolute;
  left: 50%;
  --sp-lamp-size: 7px;
  --sp-lamp-color: var(--sp-glow-amber);
  width: var(--sp-lamp-size);
  height: var(--sp-lamp-size);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%,
    var(--sp-lamp-color),
    color-mix(in srgb, var(--sp-lamp-color) 60%, var(--bg-void)) 70%);
  border: 1px solid var(--sp-brass-shadow);
  box-shadow:
    0 0 5px var(--sp-lamp-color),
    0 0 10px color-mix(in srgb, var(--sp-lamp-color) 40%, transparent),
    inset 0 1px 1px rgba(255,255,255,0.3);
  z-index: 6;
}
.dev-tools-scope.al-page .al-crest-lamp--top { top: -5px; transform: translate(-50%, -50%); }
.dev-tools-scope.al-page .al-crest-lamp--bot { bottom: -5px; transform: translate(-50%, 50%); animation-delay: 0.6s; }

/* Critical — лампи червоніють */
.dev-tools-scope.al-page.has-critical .al-crest-lamp {
  --sp-lamp-color: var(--sp-glow-red);
}

/* ─── Мікро-шестерня між title і subtitle ─── */
.al-micro-gear {
  display: block;
  margin: 1px auto 0;
  color: var(--accent-brass);
  opacity: 0.3;
}
.dev-tools-scope.al-page .al-crest .dt-crest__desc-frame {
  margin-top: 2px !important;
}

/* ─── Critical — герб тремтить (ВИДАЛЕНО v4.0: замінено на al-mech-breath пульс) ─── */
/* @keyframes al-crest-tilt ПРИБРАНО — не використовується */
/* .al-page.has-critical .al-crest wobble СКАСОВАНО — дивись ЖИВИЙ МЕХАНІЗМ v4.0 */

/* Critical — червоне свічення оболонки */
.dev-tools-scope.al-page.has-critical .al-crest .dt-crest__shell {
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.9),
    inset 0 0 0 2.5px var(--border-dim),
    inset 0 0 0 3.5px rgba(193, 68, 24, 0.35),
    inset 0 0 0 5px rgba(0,0,0,0.6),
    inset 0 2px 0 rgba(232,219,178,0.08),
    inset 0 -2px 0 rgba(0,0,0,0.85),
    inset 0 4px 12px rgba(0,0,0,0.6) !important;
  filter:
    drop-shadow(0 3px 6px rgba(0,0,0,0.8))
    drop-shadow(0 7px 16px rgba(0,0,0,0.5))
    drop-shadow(0 0 14px rgba(193, 68, 24, 0.25)) !important;
  transition: filter 0.3s ease, box-shadow 0.3s ease;
}

/* ─── F4: Header layout — фіксовані позиції ─── */
.dev-tools-scope.al-page .dt-header-row-top {
  justify-content: space-between !important;
  width: 100% !important;
  position: relative !important;
}

/* ─── F5: Back button — компактний steampunk редизайн ─── */
.dev-tools-scope.al-page .dt-backsign {
  min-width: auto !important;
  height: 28px !important;
  padding: 3px 12px 3px 8px !important;
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-base) 100%) !important;
  border: 1px solid var(--border-dim) !important;
  border-top-color: rgba(197, 139, 58, 0.2) !important;
  color: var(--text-body) !important;
  border-radius: 2px !important;
  gap: 6px !important;
  box-shadow:
    inset 0 1px 0 rgba(232,219,178,0.05),
    inset 0 -1px 0 rgba(0,0,0,0.5),
    0 2px 4px rgba(0,0,0,0.4) !important;
  transform: none !important;
}
.dev-tools-scope.al-page .dt-backsign:hover {
  border-color: var(--border-bright) !important;
  background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-elevated) 100%) !important;
}
/* Прибрати двохрядкову структуру — label ховаємо */
.dev-tools-scope.al-page .dt-backsign__label {
  display: none !important;
}
.dev-tools-scope.al-page .dt-backsign__target {
  font-size: 11px !important;
  font-weight: 500 !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: var(--text-body) !important;
  color: var(--text-body) !important;
}
.dev-tools-scope.al-page .dt-backsign__arrow svg {
  width: 14px !important;
  height: 14px !important;
}
/* ─── МОДУЛЬНІ ПАНЕЛІ — подвійна металева рамка ─── */
.dev-tools-scope.al-page .al-module-panel {
  position: relative;
  max-width: var(--max-width, 1400px);
  margin: 0 auto;
  padding: 10px 16px;
  background: var(--bg-base) !important;
  /* Подвійна рамка: зовнішня + inner через box-shadow */
  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);
}

/* Заклепки модульних панелей */
.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) 0%, var(--pewter-light) 22%,
    var(--pewter-mid) 55%, var(--pewter-dark) 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%;
}
.al-module-rivet--tl { top: 8px; left: 8px; }
.al-module-rivet--tr { top: 8px; right: 8px; }
.al-module-rivet--bl { bottom: 8px; left: 8px; }
.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;
}

/* ═══════════════════════════════════════════════════════════════
   Z2: РІЗЬБЛЕНА ПЛАНКА-МОЛДІНГ (балка → Block 1)
   Вікторіанський карниз — горизонтальний профіль з латунними
   засічками і болтами по краях. Заповнює 112px простір.
   ═══════════════════════════════════════════════════════════════ */

/* Pipe-секції перевикористані як контейнери для нового декору */
.dev-tools-scope.al-page .al-pipe-section {
  position: relative;
  max-width: var(--max-width, 1400px);
  margin: 0 auto;
  pointer-events: none;
  z-index: 2;
}

/* ═══════════════════════════════════════════════════════════════
   STEAMPUNK PIPE KIT v1.0 — інтеграція з Alerts Center
   Джерело: steampunk-pipes-kit.html (паралельна сесія)
   ═══════════════════════════════════════════════════════════════ */

/* ── Pipe Kit: CSS змінні ── */
.dev-tools-scope.al-page {
  /* Copper — приглушені, вписуються в steampunk палітру */
  --sp-copper-light:  var(--al-x, #9a7350);
  --sp-copper:        var(--accent-brass-dim);
  --sp-copper-mid:    var(--al-x, #6a4a2a);
  --sp-copper-dark:   var(--al-x, #4a3518);
  --sp-copper-shadow: var(--border-dim);
  /* Brass — теж тихіші */
  --sp-brass-light:   var(--al-x, #c8a855);
  --sp-brass:         var(--accent-brass-dim);
  --sp-brass-mid:     var(--al-x, #806828);
  --sp-brass-dark:    var(--accent-brass-dim);
  --sp-brass-shadow:  var(--al-x, #4a3a12);
  --sp-pipe-width:    22px;
  --sp-pipe-outer:    26px;
  --sp-band-width:    6px;
  --sp-rivet-size:    5px;
  /* Steel (для steel-frame) */
  --sp-steel-light:   var(--al-x, #8A8A8A);
  --sp-steel:         var(--al-x, #6A6A6A);
  --sp-steel-mid:     var(--pewter-mid);
  --sp-steel-dark:    var(--border-metal);
  /* Glow-кольори для ламп — вписані в steampunk палітру */
  --sp-glow-amber:    var(--accent-brass);
  --sp-glow-teal:     var(--info);
  --sp-glow-red:      var(--log-critical);
}

/* ═══════════════════════════════════════════════════════════════
   FRAME KIT: Corner helpers (sp-corner, sp-edge-bolt, gears)
   ═══════════════════════════════════════════════════════════════ */
.dev-tools-scope.al-page .sp-corner {
  position: absolute;
  z-index: 5;
  pointer-events: none;
}
.dev-tools-scope.al-page .sp-corner-tl { top: 0; left: 0; transform: translate(-50%, -50%); }
.dev-tools-scope.al-page .sp-corner-tr { top: 0; right: 0; transform: translate(50%, -50%); }
.dev-tools-scope.al-page .sp-corner-bl { bottom: 0; left: 0; transform: translate(-50%, 50%); }
.dev-tools-scope.al-page .sp-corner-br { bottom: 0; right: 0; transform: translate(50%, 50%); }

.dev-tools-scope.al-page .sp-corner-gear {
  width: var(--sp-gear-size, 24px);
  height: var(--sp-gear-size, 24px);
}
.dev-tools-scope.al-page .sp-corner-gear svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Обертання шестерень у кутах */
@keyframes sp-spin-tl { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes sp-spin-tr { to { transform: translate(50%,-50%) rotate(-360deg); } }
@keyframes sp-spin-bl { to { transform: translate(-50%,50%) rotate(360deg); } }
@keyframes sp-spin-br { to { transform: translate(50%,50%) rotate(-360deg); } }
@media (prefers-reduced-motion: no-preference) {
  .dev-tools-scope.al-page .sp-corner-tl.sp-corner-gear-spin { animation: sp-spin-tl 30s linear infinite; }
  .dev-tools-scope.al-page .sp-corner-tr.sp-corner-gear-spin { animation: sp-spin-tr 30s linear infinite; }
  .dev-tools-scope.al-page .sp-corner-bl.sp-corner-gear-spin { animation: sp-spin-bl 30s linear infinite; }
  .dev-tools-scope.al-page .sp-corner-br.sp-corner-gear-spin { animation: sp-spin-br 30s linear infinite; }
}

/* Бічна заклепка (край рамки) */
.dev-tools-scope.al-page .sp-edge-bolt {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,
    var(--sp-brass-light), var(--sp-brass-mid) 60%, var(--sp-brass-shadow));
  border: 0.5px solid var(--sp-brass-shadow);
  box-shadow: 0 1px 2px rgba(0,0,0,0.4);
  z-index: 5;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Лампи-пульсація (колір через --sp-lamp-color) */
@keyframes sp-lamp-pulse-kf {
  0%, 100% {
    box-shadow:
      0 0 5px var(--sp-lamp-color, var(--sp-glow-amber)),
      0 0 10px color-mix(in srgb, var(--sp-lamp-color, var(--sp-glow-amber)) 40%, transparent),
      inset 0 1px 1px rgba(255,255,255,0.3);
  }
  50% {
    box-shadow:
      0 0 8px var(--sp-lamp-color, var(--sp-glow-amber)),
      0 0 16px color-mix(in srgb, var(--sp-lamp-color, var(--sp-glow-amber)) 55%, transparent),
      inset 0 1px 1px rgba(255,255,255,0.4);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .dev-tools-scope.al-page .sp-lamp-pulse { animation: sp-lamp-pulse-kf 2.5s ease-in-out infinite; }
}

/* ── Висота секцій ── */
.al-pipe-section--beam-to-b1 { height: 112px; }
.al-pipe-section--b1-to-b2 { height: 56px; }

/* ── Pipe контейнер (позиціонування) ── */
.dev-tools-scope.al-page .al-pipe {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.al-pipe--left  { left: 56px; }
.al-pipe--right { right: 56px; }

/* ── Вертикальна труба (sp-pipe-v з кіту) ── */
.dev-tools-scope.al-page .sp-pipe-v {
  position: relative;
  width: var(--sp-pipe-outer);
  background: linear-gradient(
    to right,
    var(--sp-copper-light) 0%,
    var(--sp-copper) 30%,
    var(--sp-copper-mid) 65%,
    var(--sp-copper-dark) 100%
  );
  border-left: 1px solid var(--sp-copper-light);
  border-right: 1px solid var(--sp-copper-shadow);
  box-shadow:
    inset 2px 0 3px rgba(218, 154, 107, 0.3),
    inset -2px 0 3px rgba(90, 53, 21, 0.4),
    2px 0 6px rgba(0, 0, 0, 0.5);
}
/* Розтягнути трубу на весь вільний простір */
.dev-tools-scope.al-page .al-pipe-stretch {
  flex: 1;
}

/* ── Бандаж на вертикальній трубі ── */
.dev-tools-scope.al-page .sp-band {
  position: absolute;
  background: linear-gradient(
    to bottom,
    var(--sp-brass-light),
    var(--sp-brass) 30%,
    var(--sp-brass-mid) 70%,
    var(--sp-brass-dark)
  );
  border: 1px solid var(--sp-brass-shadow);
  box-shadow:
    inset 0 1px 2px rgba(232, 208, 122, 0.5),
    0 1px 3px rgba(0, 0, 0, 0.4);
  z-index: 2;
}
.dev-tools-scope.al-page .sp-band-v {
  height: var(--sp-band-width);
  width: calc(var(--sp-pipe-outer) + 4px);
  left: -2px;
  border-radius: 1px;
}

/* ── Фланець (горизонтальний — для вертикальних труб) ── */
.dev-tools-scope.al-page .sp-flange {
  position: relative;
  width: calc(var(--sp-pipe-outer) + 6px);
  height: 10px;
  background: linear-gradient(
    to right,
    var(--sp-brass-light),
    var(--sp-brass) 30%,
    var(--sp-brass-mid) 70%,
    var(--sp-brass-dark)
  );
  border: 1px solid var(--sp-brass-shadow);
  border-radius: 2px;
  box-shadow:
    inset 0 1px 2px rgba(232, 208, 122, 0.5),
    0 1px 3px rgba(0, 0, 0, 0.4);
  z-index: 3;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 3px;
  flex-shrink: 0;
}

/* ── Заклепка ── */
.dev-tools-scope.al-page .sp-rivet {
  width: var(--sp-rivet-size);
  height: var(--sp-rivet-size);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,
    var(--sp-brass-light),
    var(--sp-brass-mid) 60%,
    var(--sp-brass-shadow)
  );
  border: 0.5px solid var(--sp-brass-shadow);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   A2: VOLUMETRIC BOX-SHADOW — об'ємні тіні на блоках
   Перепад освітлення: верхнє ребро світліше (відблиск),
   нижнє/бічні — глибокі warm тіні. Ефект "кована пластина на стіні".
   ═══════════════════════════════════════════════════════════════ */

.dev-tools-scope.al-page .al-module-panel {
  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 -1px 0 rgba(197, 139, 58, 0.10),
    /* ── Падаюча тінь — 3 рівні глибини ── */
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 6px 16px rgba(0, 0, 0, 0.55),
    0 14px 36px rgba(7, 5, 3, 0.65),
    /* ── Внутрішня рамка ── */
    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),
    /* ── Верхнє ребро всередині — highlight ── */
    inset 0 2px 0 rgba(232, 219, 178, 0.07),
    /* ── Ліве ребро — легкий highlight ── */
    inset 1px 0 0 rgba(232, 219, 178, 0.04),
    /* ── Праве ребро — тінь ── */
    inset -1px 0 0 rgba(0, 0, 0, 0.35),
    /* ── Нижнє ребро — глибока тінь ── */
    inset 0 -2px 0 rgba(0, 0, 0, 0.8),
    /* ── Ambient occlusion в кутах ── */
    inset 4px 4px 12px rgba(0, 0, 0, 0.30),
    inset -4px -4px 12px rgba(0, 0, 0, 0.20),
    inset -4px 4px 10px rgba(0, 0, 0, 0.18),
    inset 4px -4px 10px rgba(0, 0, 0, 0.18) !important;
}

/* ═══════════════════════════════════════════════════════════════
   SELECT / OPTION — темний фон для випадаючих списків
   Без цього браузер показує білий фон на option елементах.
   ═══════════════════════════════════════════════════════════════ */

.dev-tools-scope.al-page select,
.dev-tools-scope.al-page .alerts-filter-select,
.dev-tools-scope.al-page .al-interval-select,
.dev-tools-scope.al-page .al-custom-select {
  background-color: var(--bg-void, var(--bg-base)) !important;
  color: var(--text-bright, var(--text-bright)) !important;
}

.dev-tools-scope.al-page select option,
.dev-tools-scope.al-page .alerts-filter-select option,
.dev-tools-scope.al-page .al-interval-select option,
.dev-tools-scope.al-page .al-custom-select option {
  background-color: var(--al-x, #1a1410) !important;
  color: var(--text-bright) !important;
  padding: 4px 8px;
}

.dev-tools-scope.al-page select option:hover,
.dev-tools-scope.al-page select option:checked {
  background-color: var(--bg-elevated) !important;
  color: var(--accent-brass, var(--accent-brass)) !important;
}

/* ═══════════════════════════════════════════════════════════════
   STEAMPUNK DETAILS PACK v1.0 — 10 візуальних покращень
   ═══════════════════════════════════════════════════════════════ */

/* ── #1: Патинований subtitle — вигравіруваний напис ── */
.dev-tools-scope.al-page .devtools-subtitle {
  text-shadow:
    0 -1px 0 rgba(0,0,0,0.85),
    0 1px 0 rgba(232, 219, 178, 0.08) !important;
  color: var(--pewter-light) !important;
}

/* ── #2: Латунний tab count — одометр ── */
.dev-tools-scope.al-page .alerts-tab--active .tab-count {
  background: linear-gradient(180deg, var(--bg-void) 0%, rgba(13,9,7,0.95) 100%) !important;
  border: 1px solid rgba(197, 139, 58, 0.35) !important;
  padding: 0 4px !important;
  border-radius: 2px !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.8) !important;
}

/* ── #8: Brass manual badge — мідний штампик ── */
.dev-tools-scope.al-page .alert-manual-badge {
  background: linear-gradient(180deg, rgba(197,139,58,0.14) 0%, rgba(160,128,64,0.08) 100%) !important;
  border-color: rgba(197, 139, 58, 0.45) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.7);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.4) !important;
}

/* ── #14: Тіньовий виріз навколо gear — отвір в металі ── */
.dev-tools-scope.al-page .al-module-gear::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.7),
    0 0 0 2px rgba(92,68,48,0.3);
  z-index: -1;
  pointer-events: none;
}

/* ── #20: F8 — phosphor glow прибрано, тільки тиснення ── */
.dev-tools-scope.al-page #alHudStatusLabel {
  text-shadow: 0 -1px 0 rgba(0,0,0,0.6), 0 1px 0 rgba(232,219,178,0.06) !important;
}

/* ── Серійний номер — brass-gradient плашка (паритет з mm-module-plate) ── */
.dev-tools-scope.al-page .al-module-plate {
  font-family: 'Oswald', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  /* brass-plate-hi:var(--accent-brass-dim) / mid:var(--al-x, #806828) / low:var(--accent-brass-dim) / ink:var(--bg-base) — з steampunk-kit */
  color: var(--bg-base);
  padding: 2px 8px;
  background: linear-gradient(180deg,
    var(--accent-brass-dim) 0%,
    var(--al-x, #806828) 50%,
    var(--accent-brass-dim) 100%);
  border: 1px solid rgba(0,0,0,0.55);
  border-radius: 2px;
  text-shadow:
    0 1px 0 rgba(232,208,122,0.40),
    0 -1px 0 rgba(0,0,0,0.5);
  box-shadow:
    inset 0 1px 0.5px rgba(232,208,122,0.40),
    inset 0 -1px 0.5px rgba(0,0,0,0.45),
    0 1px 3px rgba(0,0,0,0.5);
  pointer-events: none;
  flex-shrink: 0;
  position: static;
}
/* Dismiss підказка — справа від титулу */
.dev-tools-scope.al-page .al-b1-hint {
  margin-left: auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px;
  color: var(--text-muted);
  opacity: 0.5;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 55%;
  flex-shrink: 1;
}

/* Sources panel — steampunk екранчик з лампочковим годинником */
.dev-tools-scope.al-page .al-hud-sources-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  padding: 4px 8px;
  flex-shrink: 0;
  /* Екранчик — вдавлена панель, виразна рамка */
  background:
    radial-gradient(ellipse at 50% 30%, rgba(42,32,24,0.7) 0%, var(--bg-void) 80%);
  border: 1.5px solid rgba(92,68,48,0.4);
  border-top-color: rgba(92,68,48,0.5);
  border-radius: 2px;
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.8),
    inset 0 -1px 0 rgba(232,219,178,0.04),
    0 1px 0 rgba(232,219,178,0.05);
  min-width: 100px;
}

/* Джерела — верхній рядок екранчика */
.dev-tools-scope.al-page .al-hud-sources-panel .al-hud-sources {
  padding: 0 !important;
  font-size: 9px !important;
  justify-content: center;
  color: var(--accent-brass) !important;
  opacity: 0.8;
}
.dev-tools-scope.al-page .al-hud-sources-panel .al-hud-sources .material-symbols-outlined {
  font-size: 11px !important;
  color: var(--accent-brass);
}

/* Годинник — лампові цифри steampunk */
.dev-tools-scope.al-page .al-hud-sources-panel .al-hud-timestamp {
  padding: 3px 6px !important;
  font-size: 12px !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--al-x, #d4a844) !important;
  text-align: center;
  justify-content: center;
  /* Лампове свічення цифр — nixie tube glow */
  /* text-shadow removed (canon: glow forbidden) */
  /* Підкладка — темне скло трубки */
  background: linear-gradient(180deg,
    rgba(0,0,0,0.6) 0%,
    rgba(13,9,7,0.8) 100%
  );
  border-radius: 2px;
  border: 1px solid rgba(92,68,48,0.3);
  box-shadow:
    inset 0 1px 4px rgba(0,0,0,0.7),
    inset 0 -1px 0 rgba(212,168,68,0.04),
    0 0 6px rgba(212,168,68,0.04);
}
.dev-tools-scope.al-page .al-hud-sources-panel .al-hud-timestamp .material-symbols-outlined {
  font-size: 11px !important;
  color: rgba(197, 139, 58, 0.5);
}

/* Silenced всередині panel */
.dev-tools-scope.al-page .al-hud-sources-panel .summary-silenced-inline {
  font-size: 8px !important;
  justify-content: center;
  text-align: center;
  opacity: 0.6;
}

/* Status banner — між табами і фільтрами (компактний) */
.dev-tools-scope.al-page .alerts-controls .al-threat-banner {
  padding: 4px 12px !important;
  margin: 4px 0 !important;
  font-size: 11px !important;
  border-radius: 2px !important;
  justify-content: center !important;
  gap: 6px !important;
}
.dev-tools-scope.al-page .alerts-controls .al-threat-banner .al-threat-icon {
  font-size: 15px !important;
}
.dev-tools-scope.al-page .alerts-controls .al-threat-banner .al-threat-banner-body,
.dev-tools-scope.al-page .alerts-controls .al-threat-banner .al-threat-banner-label,
.dev-tools-scope.al-page .alerts-controls .al-threat-banner .al-threat-banner-corner {
  display: none !important;
}

/* ── Уніфіковані відступи обох блоків ── */
.dev-tools-scope.al-page .al-module-panel {
  padding-top: 4px !important;
  padding-bottom: 12px !important;
}

/* Уніфікований заголовок блоків (al-feed-header) */
.dev-tools-scope.al-page .al-feed-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 12px 6px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(92, 68, 48, 0.20);
}

/* 3-секційна структура: left | mid | right */
.dev-tools-scope.al-page .al-feed-header-left,
.dev-tools-scope.al-page .al-feed-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.dev-tools-scope.al-page .al-feed-header-mid {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  justify-content: center;
  min-width: 0;
}

.dev-tools-scope.al-page .al-feed-header-icon {
  font-size: 16px;
  color: var(--accent-brass);
  opacity: 0.6;
}
.dev-tools-scope.al-page .al-feed-header-title {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-shadow: 0 -1px 0 rgba(0,0,0,0.6), 0 1px 0 rgba(232,219,178,0.05);
}
.dev-tools-scope.al-page .al-feed-header-count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--accent-brass);
  opacity: 0.5;
}

/* F3: Permanent search input у стрічці сповіщень ─── */
.dev-tools-scope.al-page .al-feed-search-input-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  border: 1px solid rgba(92, 68, 48, 0.45);
  background: rgba(18, 14, 10, 0.55);
  border-radius: 3px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
  flex: 0 1 220px;
  min-width: 120px;
  transition: border-color .15s ease;
}
.dev-tools-scope.al-page .al-feed-search-input-wrap:focus-within {
  border-color: rgba(201, 162, 74, 0.55);
}
.dev-tools-scope.al-page .al-feed-search-icon {
  font-size: 13px;
  color: var(--accent-brass);
  opacity: 0.55;
  flex-shrink: 0;
}
.dev-tools-scope.al-page .al-feed-search-input {
  width: 100%;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary, #e8dbb2);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  line-height: 1;
  padding: 0;
}
.dev-tools-scope.al-page .al-feed-search-input::placeholder {
  color: var(--text-muted);
  opacity: 0.45;
}
.dev-tools-scope.al-page .al-feed-search-input::-webkit-search-cancel-button {
  display: none;
}
.dev-tools-scope.al-page .al-feed-search-clear {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-muted);
  opacity: 0.5;
  cursor: pointer;
  padding: 0;
  border-radius: 2px;
}
.dev-tools-scope.al-page .al-feed-search-clear:hover {
  opacity: 1;
  background: rgba(193, 68, 24, 0.18);
  color: var(--accent-ember);
}
.dev-tools-scope.al-page .al-feed-search-clear .material-symbols-outlined {
  font-size: 12px;
}

/* V1 (R2): Time-dividers toggle ─────────────── */
.dev-tools-scope.al-page .al-feed-timesort-btn {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(92, 68, 48, 0.30);
  background: rgba(32, 24, 18, 0.35);
  border-radius: 3px;
  color: var(--accent-brass);
  opacity: 0.65;
  cursor: pointer;
  padding: 0;
  transition: opacity .15s ease, border-color .15s ease, background .15s ease;
  flex-shrink: 0;
}
.dev-tools-scope.al-page .al-feed-timesort-btn:hover {
  opacity: 1;
  border-color: rgba(201, 162, 74, 0.55);
  background: rgba(201, 162, 74, 0.10);
}
.dev-tools-scope.al-page .al-feed-timesort-btn.is-active {
  opacity: 1;
  border-color: rgba(201, 162, 74, 0.75);
  background: rgba(201, 162, 74, 0.18);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
}
.dev-tools-scope.al-page .al-feed-timesort-btn .material-symbols-outlined {
  font-size: 14px;
  line-height: 1;
}

/* V1 (R2): Time dividers між картками ─────── */
.dev-tools-scope.al-page .al-time-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 2px 4px;
  padding: 0 2px;
  user-select: none;
}
.dev-tools-scope.al-page .al-time-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(92, 68, 48, 0) 0%,
    rgba(201, 162, 74, 0.35) 50%,
    rgba(92, 68, 48, 0) 100%);
}
.dev-tools-scope.al-page .al-time-divider-label {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-brass);
  opacity: 0.75;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  padding: 1px 6px;
  border: 1px solid rgba(92, 68, 48, 0.35);
  background: rgba(18, 14, 10, 0.55);
  border-radius: 2px;
}
.dev-tools-scope.al-page .al-time-divider[data-bucket="now"] .al-time-divider-label {
  color: var(--accent-ember);
  border-color: rgba(227, 111, 61, 0.45);
  background: rgba(227, 111, 61, 0.10);
}

/* F3 (R2): Incident banner ─────────────────── */
.dev-tools-scope.al-page .al-incident-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 2px 12px;
  padding: 10px 14px;
  border-radius: 3px;
  border: 1px solid rgba(193, 68, 24, 0.55);
  background:
    linear-gradient(180deg, rgba(193, 68, 24, 0.16) 0%, rgba(76, 30, 14, 0.22) 100%);
  box-shadow:
    inset 0 1px 0 rgba(232, 219, 178, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55),
    0 0 14px rgba(193, 68, 24, 0.18);
  position: relative;
  overflow: hidden;
}
.dev-tools-scope.al-page .al-incident-banner--high {
  border-color: rgba(227, 111, 61, 0.50);
  background:
    linear-gradient(180deg, rgba(227, 111, 61, 0.14) 0%, rgba(92, 44, 20, 0.20) 100%);
  box-shadow:
    inset 0 1px 0 rgba(232, 219, 178, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55),
    0 0 12px rgba(227, 111, 61, 0.15);
}
.dev-tools-scope.al-page .al-incident-banner--medium {
  border-color: rgba(224, 196, 137, 0.45);
  background:
    linear-gradient(180deg, rgba(224, 196, 137, 0.10) 0%, rgba(56, 44, 24, 0.22) 100%);
  box-shadow: inset 0 1px 0 rgba(232, 219, 178, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.55);
}
.dev-tools-scope.al-page .al-incident-banner--info {
  border-color: rgba(124, 143, 136, 0.40);
  background:
    linear-gradient(180deg, rgba(124, 143, 136, 0.08) 0%, rgba(30, 40, 40, 0.22) 100%);
  box-shadow: inset 0 1px 0 rgba(232, 219, 178, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.55);
}

.dev-tools-scope.al-page .al-incident-pulse-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--log-critical);
  box-shadow: 0 0 8px rgba(193, 68, 24, 0.75), 0 0 16px rgba(193, 68, 24, 0.35);
  flex-shrink: 0;
  animation: alIncidentPulse 1.6s ease-in-out infinite;
}
.dev-tools-scope.al-page .al-incident-banner--high  .al-incident-pulse-dot { background: var(--accent-ember); box-shadow: 0 0 8px rgba(227, 111, 61, 0.70); }
.dev-tools-scope.al-page .al-incident-banner--medium .al-incident-pulse-dot { background: var(--warning); box-shadow: 0 0 6px rgba(224, 196, 137, 0.55); animation: none; }
.dev-tools-scope.al-page .al-incident-banner--info   .al-incident-pulse-dot { background: var(--info); animation: none; }

@keyframes alIncidentPulse {
  0%, 100% { transform: scale(1);    opacity: 1;   }
  50%      { transform: scale(1.35); opacity: 0.6; }
}

.dev-tools-scope.al-page .al-incident-body {
  flex: 1;
  min-width: 0;
}
.dev-tools-scope.al-page .al-incident-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-bright);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7);
}
.dev-tools-scope.al-page .al-incident-title .material-symbols-outlined {
  font-size: 18px;
  color: var(--log-critical);
}
.dev-tools-scope.al-page .al-incident-banner--high  .al-incident-title .material-symbols-outlined { color: var(--accent-ember); }
.dev-tools-scope.al-page .al-incident-banner--medium .al-incident-title .material-symbols-outlined { color: var(--warning); }
.dev-tools-scope.al-page .al-incident-banner--info   .al-incident-title .material-symbols-outlined { color: var(--info); }

.dev-tools-scope.al-page .al-incident-meta {
  margin-top: 4px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.85;
}
.dev-tools-scope.al-page .al-incident-meta strong {
  color: var(--accent-brass);
  font-weight: 600;
}

.dev-tools-scope.al-page .al-incident-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.dev-tools-scope.al-page .al-incident-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid rgba(201, 162, 74, 0.45);
  background: rgba(18, 14, 10, 0.55);
  color: var(--accent-brass);
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 3px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  box-shadow: inset 0 1px 0 rgba(232, 219, 178, 0.06), inset 0 -1px 0 rgba(0, 0, 0, 0.45);
}
.dev-tools-scope.al-page .al-incident-btn:hover {
  background: rgba(201, 162, 74, 0.15);
  border-color: rgba(201, 162, 74, 0.75);
  color: var(--text-bright);
}
.dev-tools-scope.al-page .al-incident-btn .material-symbols-outlined {
  font-size: 13px;
}
.dev-tools-scope.al-page .al-incident-btn--dismiss:hover {
  background: rgba(76, 175, 80, 0.15);
  border-color: rgba(76, 175, 80, 0.65);
  color: var(--al-x, #a7dba9);
}

/* V5 (R2): Error state з retry ─────────────── */
.dev-tools-scope.al-page .alerts-error {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
  border: 1px solid rgba(193, 68, 24, 0.45);
  background:
    linear-gradient(180deg, rgba(193, 68, 24, 0.10) 0%, rgba(40, 20, 14, 0.35) 100%);
  border-radius: 3px;
  margin: 8px 2px;
  box-shadow: inset 0 1px 0 rgba(232, 219, 178, 0.06), inset 0 -1px 0 rgba(0, 0, 0, 0.55);
}
.dev-tools-scope.al-page .al-error-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dev-tools-scope.al-page .al-error-head .material-symbols-outlined {
  font-size: 18px;
  color: var(--log-critical);
}
.dev-tools-scope.al-page .al-error-title {
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-bright);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7);
}
.dev-tools-scope.al-page .al-error-msg {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
  padding-left: 28px;
  word-break: break-word;
}
.dev-tools-scope.al-page .al-error-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 28px;
  margin-top: 4px;
}
.dev-tools-scope.al-page .al-error-retry {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border: 1px solid rgba(201, 162, 74, 0.55);
  background: rgba(18, 14, 10, 0.55);
  color: var(--accent-brass);
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border-radius: 3px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  box-shadow: inset 0 1px 0 rgba(232, 219, 178, 0.06), inset 0 -1px 0 rgba(0, 0, 0, 0.45);
}
.dev-tools-scope.al-page .al-error-retry:hover {
  background: rgba(201, 162, 74, 0.15);
  border-color: rgba(201, 162, 74, 0.8);
  color: var(--text-bright);
}
.dev-tools-scope.al-page .al-error-retry .material-symbols-outlined {
  font-size: 12px;
}
.dev-tools-scope.al-page .al-error-attempts {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--text-muted);
  opacity: 0.75;
  letter-spacing: 0.05em;
}

/* Підказка Block 2 — справа */
.dev-tools-scope.al-page .al-b2-hint {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px;
  color: var(--text-muted);
  opacity: 0.45;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

/* ── #22: Вентиль між meters — з'єднувальний вузол ── */
.dev-tools-scope.al-page .al-meter-valve {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,
    var(--pewter-light) 0%, var(--pewter-mid) 40%, var(--pewter-dark) 100%
  );
  border: 1px solid rgba(0,0,0,0.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    0 1px 2px rgba(0,0,0,0.6);
  flex-shrink: 0;
  margin: 0 2px;
}
/* Хрест на вентилі */
.dev-tools-scope.al-page .al-meter-valve::before {
  content: '+';
  font-size: 8px;
  font-weight: 700;
  color: rgba(0,0,0,0.45);
  line-height: 1;
  text-shadow: 0 1px 0 rgba(232,219,178,0.12);
}

/* ── #23: Скляне покриття meter — відблиск на кришці ── */
.dev-tools-scope.al-page .al-meter-glass {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(232,219,178,0.06) 0%,
    rgba(232,219,178,0.02) 25%,
    transparent 40%,
    transparent 100%
  );
  pointer-events: none;
  border-radius: inherit;
  z-index: 1;
}

/* ── #25: Пара при refresh — steam puff ── */
@keyframes al-steam-rise {
  0%   { opacity: 0.45; transform: translateY(0) scale(0.8); }
  50%  { opacity: 0.2;  transform: translateY(-10px) scale(1.6); }
  100% { opacity: 0;    transform: translateY(-22px) scale(2.5); }
}
.dev-tools-scope.al-page .al-steam-puff {
  position: absolute;
  top: -2px;
  right: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(176, 168, 152, 0.4) 0%,
    rgba(176, 168, 152, 0.1) 60%,
    transparent 100%
  );
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}
.dev-tools-scope.al-page .al-steam-puff::before,
.dev-tools-scope.al-page .al-steam-puff::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(176, 168, 152, 0.3) 0%, transparent 100%
  );
  opacity: 0;
}
.dev-tools-scope.al-page .al-steam-puff::before {
  width: 4px; height: 4px;
  left: -3px; top: 1px;
}
.dev-tools-scope.al-page .al-steam-puff::after {
  width: 3px; height: 3px;
  left: 4px; top: -1px;
}
/* Активація — JS додає клас */
.dev-tools-scope.al-page .al-steam-puff.is-active {
  animation: al-steam-rise 0.9s ease-out forwards;
}
.dev-tools-scope.al-page .al-steam-puff.is-active::before {
  animation: al-steam-rise 0.9s ease-out 0.12s forwards;
}
.dev-tools-scope.al-page .al-steam-puff.is-active::after {
  animation: al-steam-rise 0.9s ease-out 0.25s forwards;
}

/* ── #28: Заклепочна лінія під tabs — рейка прикручена ── */
.dev-tools-scope.al-page .al-tabs-rivet-strip {
  height: 5px;
  margin: 4px 0 0;
  background:
    repeating-radial-gradient(
      circle,
      rgba(74,64,54,0.45) 0, rgba(74,64,54,0.45) 1.5px,
      transparent 1.5px, transparent 100%
    );
  background-size: 16px 5px;
  opacity: 0.5;
  pointer-events: none;
}

/* ═══ Прибрати дублікати: HUD status (2 КРИТИЧНИХ) + sources-info ═══ */
.dev-tools-scope.al-page .al-hud-status {
  display: none !important;
}
.dev-tools-scope.al-page .sources-info {
  display: none !important;
}

/* ═══ PIPE KIT: Gauge (манометр) ═══ */
.dev-tools-scope.al-page .sp-gauge { display: flex; flex-direction: column; align-items: center; z-index: 5; }
.dev-tools-scope.al-page .sp-gauge-stub {
  width: 8px; height: 10px;
  background: linear-gradient(to right, var(--sp-brass-light), var(--sp-brass) 30%, var(--sp-brass-dark));
  border: 0.5px solid var(--sp-brass-shadow);
}
.dev-tools-scope.al-page .sp-gauge-body {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--sp-brass-mid);
  border: 1.5px solid var(--sp-brass-shadow);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}
.dev-tools-scope.al-page .sp-gauge-face {
  width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(to bottom, var(--al-x, #FFF8E8), var(--al-x, #E8DCC0));
  border: 0.5px solid var(--sp-brass-mid);
  position: relative; overflow: hidden;
}
.dev-tools-scope.al-page .sp-gauge-needle {
  position: absolute; bottom: 50%; left: 50%;
  width: 1.5px; height: 9px;
  background: var(--al-x, #8B0000);
  transform-origin: bottom center;
  transform: translateX(-50%) rotate(var(--angle, 45deg));
  border-radius: 1px 1px 0 0;
}
.dev-tools-scope.al-page .sp-gauge-needle::after {
  content: ''; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; background: var(--al-x, #444); border-radius: 50%;
}
.dev-tools-scope.al-page .sp-gauge-label {
  position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
  font-family: serif; font-size: 4px; color: var(--al-x, #666); letter-spacing: 0.5px;
}
/* Gauge повернутий горизонтально — stub кріпиться до труби, циферблат збоку */
.dev-tools-scope.al-page .al-pipe-gauge {
  position: absolute;
  top: 15px;
  left: calc(var(--sp-pipe-outer) + 2px);
  flex-direction: row-reverse !important;
  align-items: center !important;
}
.dev-tools-scope.al-page .al-pipe-gauge .sp-gauge-stub {
  width: 10px !important;
  height: 6px !important;
}

/* ═══ PIPE KIT: Valve (вентиль/кран) ═══ */
.dev-tools-scope.al-page .sp-valve { display: flex; flex-direction: column; align-items: center; z-index: 5; }
.dev-tools-scope.al-page .sp-valve-body {
  width: 36px; height: 28px;
  background: linear-gradient(to bottom, var(--al-x, #c8a845), var(--al-x, #a08530) 50%, var(--al-x, #7a6220));
  border: 1px solid var(--sp-brass-shadow);
  border-radius: 3px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  padding: 4px;
  box-shadow: inset 0 1px 2px rgba(200,168,70,0.3), 0 2px 5px rgba(0,0,0,0.5);
  position: relative;
}
.dev-tools-scope.al-page .sp-valve-stem {
  width: 5px; height: 16px;
  background: linear-gradient(to right, var(--sp-brass-light), var(--sp-brass) 30%, var(--sp-brass-dark));
  border: 0.5px solid var(--sp-brass-shadow);
  margin: 0 auto;
}
.dev-tools-scope.al-page .sp-valve-wheel {
  width: 24px; height: 24px;
  border: 2.5px solid var(--sp-brass-mid);
  border-radius: 50%;
  position: relative;
  box-shadow: 0 0 0 0.5px rgba(160,133,53,0.4);
}
.dev-tools-scope.al-page .sp-valve-wheel::before,
.dev-tools-scope.al-page .sp-valve-wheel::after {
  content: ''; position: absolute;
  background: var(--sp-brass-mid); border-radius: 1px;
}
.dev-tools-scope.al-page .sp-valve-wheel::before { width: 100%; height: 2px; top: 50%; left: 0; transform: translateY(-50%); }
.dev-tools-scope.al-page .sp-valve-wheel::after { width: 2px; height: 100%; top: 0; left: 50%; transform: translateX(-50%); }
.dev-tools-scope.al-page .sp-valve-nut {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 8px; height: 8px;
  background: radial-gradient(circle at 35% 30%, var(--sp-brass-light), var(--sp-brass-mid) 60%, var(--sp-brass-shadow));
  border-radius: 50%; border: 0.5px solid var(--sp-brass-shadow); z-index: 1;
}
/* Позиція valve — збоку від труби (ліва сторона) */
.dev-tools-scope.al-page .al-pipe-valve {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: calc(var(--sp-pipe-outer) + 4px);
}

/* Вентиль прикріплений до лівого боку Block 2 (повернутий на -90° — body до блоку) */
.dev-tools-scope.al-page .al-block-valve {
  position: absolute;
  left: -48px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  z-index: 5;
  transform-origin: center center;
}

/* ═══════════════════════════════════════════════════════════════
   STEAM CONVERTER UNIT v2 — компактний, фіксований справа
   Ширина 140px, висота підігнана під header (96px)
   Layout: [nixie clock] / [date + PSI bar]
   ═══════════════════════════════════════════════════════════════ */

/* Clock panel — legacy позиціонування; override у §1 STEAMPUNK REDESIGN v2 (row-based grid, top center) */
.dev-tools-scope.al-page .al-clock-panel {
  z-index: 50;
}

/* Кнопки сповіщень біля годинника (над/під) */
.dev-tools-scope.al-page .al-clock-sidebtn {
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-base) 100%) !important;
  border: 1px solid var(--border-dim) !important;
  border-top-color: rgba(197, 139, 58, 0.25) !important;
  border-radius: 3px !important;
  color: var(--text-body) !important;
  box-shadow:
    inset 0 1px 0 rgba(232,219,178,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.5),
    0 2px 4px rgba(0,0,0,0.5);
  cursor: pointer;
  flex-shrink: 0;
}
.dev-tools-scope.al-page .al-clock-sidebtn:hover {
  border-color: var(--border-bright) !important;
  background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-elevated) 100%) !important;
  color: var(--accent-brass) !important;
}
.dev-tools-scope.al-page .al-clock-sidebtn .material-symbols-outlined {
  font-size: 18px;
}

.dev-tools-scope.al-page .clock-unit {
  position: relative;
  width: 140px;
  padding: 4px 4px 3px;
  border-radius: 4px;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 12px, rgba(0,0,0,0.03) 12px, rgba(0,0,0,0.03) 13px),
    linear-gradient(165deg,
      var(--accent-brass-dim) 0%, var(--al-x, #6a4a2a) 15%, var(--al-x, #5a3e22) 40%,
      var(--border-metal) 60%, var(--al-x, #5a3e22) 85%, var(--al-x, #6a4a2a) 100%
    );
  box-shadow:
    inset 0 1px 1px rgba(180,140,90,0.25),
    inset 0 -1px 2px rgba(40,25,10,0.5),
    0 0 0 1px var(--border-dim),
    0 0 0 2px var(--al-x, #5a3e22),
    0 0 0 3px var(--bg-elevated),
    0 3px 8px rgba(0,0,0,0.6);
  z-index: 200;
  pointer-events: auto;
}

/* Шурупи корпуса */
.dev-tools-scope.al-page .clock-unit .body-screw {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--accent-brass-dim), var(--accent-brass-dim) 60%, var(--border-metal));
  border: 0.5px solid var(--border-metal);
  box-shadow: inset 0 0.5px 1px rgba(200,168,74,0.3), 0 1px 2px rgba(0,0,0,0.5);
  z-index: 10;
}
.dev-tools-scope.al-page .clock-unit .body-screw::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%) rotate(35deg);
  width: 60%; height: 0.8px; background: var(--al-x, #2a1a08);
}
.dev-tools-scope.al-page .clock-unit .screw-tl { top: 2px; left: 2px; }
.dev-tools-scope.al-page .clock-unit .screw-tr { top: 2px; right: 2px; }
.dev-tools-scope.al-page .clock-unit .screw-bl { bottom: 2px; left: 2px; }
.dev-tools-scope.al-page .clock-unit .screw-br { bottom: 2px; right: 2px; }

/* ── ВЕРХНЯ ПОЛОВИНА: Nixie clock ── */
.dev-tools-scope.al-page .clock-unit .display-window {
  position: relative;
  background: linear-gradient(180deg, var(--al-x, #0a0a0a), var(--al-x, #111) 20%, var(--al-x, #0d0d0d) 80%, var(--al-x, #080808));
  border-radius: 3px;
  padding: 3px 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: 1px solid var(--border-metal);
  box-shadow:
    inset 0 0 8px rgba(0,0,0,0.8),
    0 1px 0 var(--accent-brass-dim);
  margin-bottom: 3px;
}
.dev-tools-scope.al-page .clock-unit .display-screw {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--accent-brass-dim), var(--accent-brass-dim) 60%, var(--border-metal));
  border: 0.5px solid var(--border-metal);
  z-index: 6;
}

/* Nixie лампа (менша) */
.dev-tools-scope.al-page .clock-unit .nixie {
  position: relative;
  width: 15px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 50%, rgba(15,10,5,0.9) 0%, rgba(8,6,3,0.95) 60%, var(--al-x, #060604) 100%);
  border-radius: 2px;
  border: 0.5px solid var(--al-x, #2A2218);
}
.dev-tools-scope.al-page .clock-unit .nixie-digit {
  font-family: 'Courier New', monospace;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  color: var(--accent-brass);
  /* text-shadow removed (canon: glow forbidden) */
  z-index: 2;
}
.dev-tools-scope.al-page .clock-unit .nixie-ghost {
  position: absolute;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  font-weight: bold;
  color: rgba(197, 139, 58, 0.05);
  z-index: 1;
}

/* Двокрапка */
.dev-tools-scope.al-page .clock-unit .nixie-colon {
  display: flex; flex-direction: column; gap: 4px;
  padding: 0 1px; align-items: center; justify-content: center;
}
.dev-tools-scope.al-page .clock-unit .colon-dot {
  width: 2px; height: 2px; border-radius: 50%;
  background: var(--accent-brass);
  box-shadow: 0 0 2px rgba(197, 139, 58, 0.7), 0 0 5px rgba(197, 139, 58, 0.4);
}
@keyframes clk-colon-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.2; }
}
.dev-tools-scope.al-page .clock-unit .colon-blink .colon-dot {
  animation: clk-colon-blink 1s step-end infinite;
}

/* ── НИЖНЯ ПОЛОВИНА: Дата + PSI bar ── */
.dev-tools-scope.al-page .clock-unit .data-strip {
  display: flex;
  align-items: stretch;
  gap: 3px;
}

/* Дата-табло */
.dev-tools-scope.al-page .clock-unit .clock-date-box {
  flex: 0 0 52px;
  background: linear-gradient(180deg, var(--al-x, #0d0d0d), var(--al-x, #141410));
  border: 1px solid var(--border-metal);
  border-radius: 2px;
  padding: 1px 4px;
  box-shadow: inset 0 0 4px rgba(0,0,0,0.6), 0 1px 0 var(--accent-brass-dim);
  display: flex;
  align-items: center;
  gap: 3px;
  min-height: 14px;
}
.dev-tools-scope.al-page .clock-unit .data-value {
  font-family: 'Courier New', monospace;
  font-size: 9px;
  font-weight: bold;
  color: var(--accent-brass);
  /* text-shadow removed (canon: glow forbidden) */
  letter-spacing: 0.5px;
}

/* LED */
.dev-tools-scope.al-page .clock-unit .led {
  width: 3px; height: 3px;
  border-radius: 50%;
  border: 0.5px solid var(--border-metal);
  box-shadow: 0 0 2px var(--led-color, var(--accent-brass));
  background: radial-gradient(circle at 40% 35%,
    var(--led-color, var(--accent-brass)),
    color-mix(in srgb, var(--led-color, var(--accent-brass)) 50%, var(--bg-void))
  );
  flex-shrink: 0;
}
@keyframes clk-led-pulse {
  0%,100% { box-shadow: 0 0 2px var(--led-color, var(--accent-brass)); }
  50%     { box-shadow: 0 0 5px var(--led-color, var(--accent-brass)), 0 0 8px color-mix(in srgb, var(--led-color, var(--accent-brass)) 40%, transparent); }
}
.dev-tools-scope.al-page .clock-unit .led-pulse { animation: clk-led-pulse 2s ease-in-out infinite; }

/* PSI Bar Gauge (вертикальні LED-сегменти — НЕ як круговий на трубі) */
.dev-tools-scope.al-page .clock-unit .psi-bar-gauge {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 3px;
  background: linear-gradient(180deg, var(--al-x, #0d0d0d), var(--al-x, #141410));
  border: 1px solid var(--border-metal);
  border-radius: 2px;
  padding: 1px 4px;
  box-shadow: inset 0 0 4px rgba(0,0,0,0.6), 0 1px 0 var(--accent-brass-dim);
  min-height: 14px;
}
.dev-tools-scope.al-page .clock-unit .psi-bar-label {
  font-family: 'Courier New', monospace;
  font-size: 7px;
  color: var(--accent-brass);
  opacity: 0.7;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.dev-tools-scope.al-page .clock-unit .psi-bar-track {
  display: flex;
  align-items: center;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.dev-tools-scope.al-page .clock-unit .psi-bar-seg {
  flex: 1;
  height: 6px;
  background: rgba(197, 139, 58, 0.08);
  border: 0.5px solid rgba(197, 139, 58, 0.15);
  border-radius: 1px;
  transition: background 0.3s, box-shadow 0.3s;
}
/* Активні сегменти */
.dev-tools-scope.al-page .clock-unit .psi-bar-seg.is-on {
  background: linear-gradient(180deg, var(--al-x, #e8a850), var(--accent-brass) 50%, var(--accent-brass-dim));
  border-color: rgba(197, 139, 58, 0.5);
  box-shadow:
    0 0 3px rgba(197, 139, 58, 0.5),
    inset 0 1px 0 rgba(232, 219, 178, 0.3);
}
/* Високі рівні — червоніють (>4) */
.dev-tools-scope.al-page .clock-unit .psi-bar-seg.is-on[data-level="5"] {
  background: linear-gradient(180deg, var(--accent-ember), var(--log-critical));
  border-color: rgba(193, 68, 24, 0.5);
  box-shadow: 0 0 3px rgba(193, 68, 24, 0.5), inset 0 1px 0 rgba(232, 219, 178, 0.3);
}
.dev-tools-scope.al-page .clock-unit .psi-bar-value {
  font-family: 'Courier New', monospace;
  font-size: 8px;
  font-weight: bold;
  color: var(--accent-brass);
  /* text-shadow removed (canon: glow forbidden) */
  flex-shrink: 0;
  min-width: 18px;
  text-align: right;
}

/* Ховаємо старий timestamp в HUD sources panel (дублікат з clock-unit) */
.dev-tools-scope.al-page .al-hud-sources-panel .al-hud-timestamp {
  display: none !important;
}
/* Clock-unit перенесений поза header — header не потребує padding-right */
.dev-tools-scope.al-page .dt-header-row-top {
  padding-right: 20px !important;
  justify-content: flex-start !important;
}

/* ═══════════════════════════════════════════════════════════════
   HEADER LEFT CLUSTER — back-btn + refresh+interval
   ═══════════════════════════════════════════════════════════════ */
.dev-tools-scope.al-page .al-header-left-cluster {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Refresh-combo — refresh + interval об'єднані в один блок */
.dev-tools-scope.al-page .al-refresh-combo {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  min-width: 120px;
}

/* Інфо-рядок НАД кнопкою Оновити (без темно-коричневої рамки) */
.dev-tools-scope.al-page .al-refresh-info {
  display: flex !important;
  align-items: center;
  gap: 4px;
  background: none !important;
  border: none !important;
  padding: 0 2px !important;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  color: var(--text-muted);
}
.dev-tools-scope.al-page .al-refresh-info .al-lock-icon {
  font-size: 11px !important;
  color: var(--accent-brass) !important;
  opacity: 0.7;
}
.dev-tools-scope.al-page .al-refresh-info .al-interval-select {
  background: transparent !important;
  border: none !important;
  color: var(--accent-brass) !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 9px !important;
  padding: 0 !important;
  height: auto !important;
  outline: none !important;
  cursor: pointer;
  box-shadow: none !important;
}
.dev-tools-scope.al-page .al-refresh-info .al-countdown {
  color: var(--accent-brass);
  opacity: 0.6;
  margin-left: auto;
  font-size: 9px;
}

/* Кнопка Оновити — розтягнута на всю ширину combo */
.dev-tools-scope.al-page .al-refresh-combo .al-refresh-btn {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px !important;
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-base) 100%) !important;
  border: 1px solid var(--border-dim) !important;
  border-top-color: rgba(197, 139, 58, 0.25) !important;
  border-radius: 2px !important;
  color: var(--text-body) !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(232,219,178,0.05),
    inset 0 -1px 0 rgba(0,0,0,0.5),
    0 2px 4px rgba(0,0,0,0.4) !important;
}
.dev-tools-scope.al-page .al-refresh-combo .al-refresh-btn:hover {
  border-color: var(--border-bright) !important;
  color: var(--accent-brass) !important;
}
.dev-tools-scope.al-page .al-refresh-combo .al-refresh-btn .material-symbols-outlined {
  font-size: 16px;
}

/* ═══════════════════════════════════════════════════════════════
   BLOCK 1 — КОМПАКТНА ПЕРЕОРГАНІЗАЦІЯ v6.0 (ЗАМІНЕНО v7.0)
   Правила нижче збережено для сумісності але перекрито v7.0 вище
   ═══════════════════════════════════════════════════════════════ */

/* ЗАМІНЕНО: v7.0 grid зонування вище перекриває ці правила */
/* .al-module--control display/flex-direction — скасовано grid у v7.0 */

/* order правила — більше не потрібні, але залишено для безпеки */
.dev-tools-scope.al-page .al-module--control > .al-metal-seam { display: none !important; }

/* alerts-controls у зоні C — flex row (v7.0) */
/* Вертикальне колонкове розміщення tabs/filters скасовано */

/* HUD strip в зоні B — grid керує layout */
/* Sources panel у B — прихована, дублюється у зоні E (v7.0) */

/* Status banner тепер зона D — стилі в v7.0 */

/* ─── End MODULAR LAYOUT v6.0 ─── */


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  ZONE LAYOUT v7.0 — A-B-C-D-E grid зонування                    ║
   ║  CSS Grid замість flex+order для чіткого розмежування зон        ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ── Контейнер: CSS Grid 5 зон ── */
.dev-tools-scope.al-page .al-module--control {
  display: grid !important;
  grid-template-areas:
    "zone-a"
    "zone-b"
    "zone-c"
    "zone-d"
    "zone-e" !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto auto auto auto !important;
  gap: 0 !important;
  flex-direction: unset !important;
}

/* ── Зона A: Header ── */
.dev-tools-scope.al-page .al-zone--a {
  grid-area: zone-a;
}

/* ── Зона B: Severity Console ── */
.dev-tools-scope.al-page .al-zone--b {
  grid-area: zone-b;
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  grid-template-rows: 1fr !important;
  align-items: stretch !important;
  position: relative;
  margin: 0 !important;
}

/* al-hud-meters займає центральну колонку — 4 рівних стовпці */
.dev-tools-scope.al-page .al-zone--b .al-hud-meters {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr !important;
  grid-template-rows: 1fr !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 auto !important;
  flex: unset !important;
}

/* Severity meter cell — рівна висота з консоллю, вертикальне центрування */
.dev-tools-scope.al-page .al-zone--b .al-hud-meter {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 14px 20px !important;
  border-radius: 0 !important;
  min-width: 80px !important;
  height: 100% !important;
  border: none !important;
  border-right: 1px solid rgba(92, 68, 48, 0.30) !important;
  transition: background 0.20s ease !important;
}
.dev-tools-scope.al-page .al-zone--b .al-hud-meter:last-child {
  border-right: none !important;
}

/* rivet-divider між колонками — вузька вертикальна смужка з болтом */
.dev-tools-scope.al-page .al-rivet-divider {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  background: rgba(0,0,0,0.25) !important;
  border-left: 1px solid rgba(92,68,48,0.25) !important;
  border-right: 1px solid rgba(92,68,48,0.25) !important;
  position: relative !important;
}

/* al-meter-valve всередині rivet-divider — залишаємо існуючі стилі */
.dev-tools-scope.al-page .al-rivet-divider .al-meter-valve {
  display: flex !important;
  margin: 0 !important;
}

/* Hex-bolts по 4 кутах консолі B */
.dev-tools-scope.al-page .al-console-bolt {
  position: absolute;
  width: 10px;
  height: 10px;
  z-index: 3;
  pointer-events: none;
}
.dev-tools-scope.al-page .al-console-bolt::before {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  background: radial-gradient(circle at 35% 30%, var(--al-x, #f0e090) 0%, var(--al-x, #b87c30) 45%, var(--al-x, #6a3e18) 80%, var(--al-x, #2a1608) 100%);
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  box-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.dev-tools-scope.al-page .al-console-bolt--tl { top: 6px; left: 6px; }
.dev-tools-scope.al-page .al-console-bolt--tr { top: 6px; right: 6px; }
.dev-tools-scope.al-page .al-console-bolt--bl { bottom: 6px; left: 6px; }
.dev-tools-scope.al-page .al-console-bolt--br { bottom: 6px; right: 6px; }

/* Status у зоні B — ліва панель-стовпець */
.dev-tools-scope.al-page .al-zone--b .al-hud-status {
  flex-direction: column !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 14px 16px !important;
  min-width: 80px !important;
  border-right: 1px solid rgba(92,68,48,0.40) !important;
  border-bottom: none !important;
  background: rgba(0,0,0,0.30) !important;
}

/* Sources panel у B — права вертикальна панель (прихована у E є дублікат) */
.dev-tools-scope.al-page .al-zone--b .al-hud-divider {
  display: none !important;
}
.dev-tools-scope.al-page .al-zone--b .al-hud-sources-panel {
  display: none !important;
}

/* ── Зона C: Control Row ── */
.dev-tools-scope.al-page .al-zone--c {
  grid-area: zone-c;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  border-top: 1px solid rgba(92,68,48,0.22) !important;
  border-bottom: 1px solid rgba(92,68,48,0.22) !important;
  flex-wrap: nowrap !important;
  margin: 0 !important;
}

/* Tabs у зоні C — ліва сторона */
.dev-tools-scope.al-page .al-zone--c .alerts-tabs {
  order: 1 !important;
  flex-shrink: 0 !important;
}

/* Rivet strip — схована в C, він у B вже є болти */
.dev-tools-scope.al-page .al-zone--c .al-tabs-rivet-strip {
  display: none !important;
}

/* Filters + bulk — права сторона */
.dev-tools-scope.al-page .al-zone--c .alerts-filters {
  order: 2 !important;
  flex-shrink: 0 !important;
  padding-top: 0 !important;
  position: static !important;
}
/* sources-label над filters у C — прибираємо (він тепер у E) */
.dev-tools-scope.al-page .al-zone--c .alerts-filters::before {
  display: none !important;
}

/* ── Зона D: Hero Banner — full-width, conditional ── */
.dev-tools-scope.al-page .al-zone--d {
  grid-area: zone-d;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 12px 20px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  border-top: none !important;
  border-bottom: 1px solid rgba(92,68,48,0.30) !important;
  position: relative;
  overflow: hidden;
  /* Фоновий pulse при появі */
  animation: zone-d-appear 0.30s ease forwards;
}

/* Hex-bolts по боках банера D */
.dev-tools-scope.al-page .al-banner-bolt {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  pointer-events: none;
  z-index: 2;
}
.dev-tools-scope.al-page .al-banner-bolt::before {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  background: radial-gradient(circle at 35% 30%, var(--al-x, #f0e090) 0%, var(--al-x, #b87c30) 45%, var(--al-x, #6a3e18) 80%, var(--al-x, #2a1608) 100%);
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  box-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.dev-tools-scope.al-page .al-banner-bolt--l { left: 12px; }
.dev-tools-scope.al-page .al-banner-bolt--r { right: 12px; }

/* Анімація появи банера D */
@keyframes zone-d-appear {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Зона E: Status Footer — тонкий рядок ── */
.dev-tools-scope.al-page .al-zone--e {
  grid-area: zone-e;
}

/* al-status-footer: тонкий горизонтальний рядок */
.dev-tools-scope.al-page .al-status-footer {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 4px 14px !important;
  background: rgba(0,0,0,0.20) !important;
  border-top: 1px solid rgba(92,68,48,0.18) !important;
  min-height: 28px !important;
}

/* Іконки зони E */
.dev-tools-scope.al-page .al-sf-icon {
  font-size: 12px !important;
  color: var(--accent-brass) !important;
  opacity: 0.55 !important;
}

/* Sources block у E */
.dev-tools-scope.al-page .al-sf-sources {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 10px !important;
  color: var(--accent-brass) !important;
  opacity: 0.70 !important;
  white-space: nowrap !important;
}

/* Divider між sources і silenced у E */
.dev-tools-scope.al-page .al-sf-divider {
  width: 1px !important;
  height: 12px !important;
  background: rgba(92,68,48,0.40) !important;
  flex-shrink: 0 !important;
}

/* Silenced block у E */
.dev-tools-scope.al-page .al-sf-silenced {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 10px !important;
  color: var(--al-medium) !important;
  opacity: 0.70 !important;
  white-space: nowrap !important;
}

/* Spacer у E штовхає timestamp вправо */
.dev-tools-scope.al-page .al-sf-spacer {
  flex: 1 !important;
}

/* Timestamp у E — права сторона */
.dev-tools-scope.al-page .al-sf-timestamp {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 10px !important;
  color: var(--accent-brass) !important;
  opacity: 0.55 !important;
  white-space: nowrap !important;
}

/* ─── End ZONE LAYOUT v7.0 ─── */


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  VISUAL POLISH v3.5 — типографіка, spacing, контрасти           ║
   ║  Скрін #3: дрібний текст, стиснуті контроли, агресивна рамка    ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ─── Локальні токени контрасту (WCAG AA для дрібного тексту) ─── */
.dev-tools-scope.al-page {
  --al-muted: var(--al-x, #9e8a6c);
  --al-text-secondary: var(--log-notice);
}

/* ─── Typography: підняти розміри найдрібніших підписів ─── */
.dev-tools-scope.al-page .al-hud-meter-label {
  font-size: 10px !important;
  letter-spacing: 0.10em !important;
}
.dev-tools-scope.al-page .al-hud-meter-count {
  font-size: 14px !important;
  font-weight: 600 !important;
}
.dev-tools-scope.al-page .al-threat-banner-label {
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
}
.dev-tools-scope.al-page .al-threat-banner-title,
.dev-tools-scope.al-page #statusBannerText {
  font-size: 13px !important;
  font-weight: 600 !important;
}
.dev-tools-scope.al-page .alerts-tab {
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  padding: 8px 14px !important;
}
.dev-tools-scope.al-page .alerts-tabs {
  padding: 4px !important;
}
.dev-tools-scope.al-page .alerts-filter-select {
  font-size: 12px !important;
  padding: 8px 12px !important;
}
.dev-tools-scope.al-page .alert-level-badge {
  font-size: 10px !important;
  padding: 3px 10px !important;
}
.dev-tools-scope.al-page .alert-module-tag {
  font-size: 10.5px !important;
  padding: 2px 8px !important;
}
.dev-tools-scope.al-page .alert-title,
.dev-tools-scope.al-page [class*="alert-card"] .alert-title {
  font-size: 14px !important;
  line-height: 1.45 !important;
}
.dev-tools-scope.al-page .al-b1-hint,
.dev-tools-scope.al-page .al-b2-hint {
  font-size: 10px !important;
  opacity: 0.75 !important;
  color: var(--al-text-secondary) !important;
}

/* ─── Ghost-кнопка "Закрити некритичні" — читабельний підпис ─── */
.dev-tools-scope.al-page .al-btn--ghost {
  padding: 8px 14px !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
}

/* ─── Header блоків — дихання між заголовком і вмістом ─── */
.dev-tools-scope.al-page .al-feed-header {
  padding: 8px 14px !important;
  margin-bottom: 10px !important;
}
.dev-tools-scope.al-page .al-feed-header-title {
  font-size: 12px !important;
  color: var(--al-text-secondary) !important;
}

/* ─── Threat banner: послабити агресивну червону рамку при critical ─── */
.dev-tools-scope.al-page .alerts-controls .al-threat-banner {
  padding: 6px 14px !important;
  margin: 6px 0 !important;
  font-size: 12px !important;
}
.dev-tools-scope.al-page .al-threat-banner.state-critical {
  box-shadow:
    inset 0 1px 0 rgba(232, 219, 178, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(193, 68, 24, 0.15),
    0 0 6px rgba(193, 68, 24, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.5) !important;
}
.dev-tools-scope.al-page .alerts-controls .al-threat-banner::before {
  display: none !important;
}

/* ─── Module tags: steampunk палітра замість яскравих хардкодів ─── */
.dev-tools-scope.al-page .alert-module-tag[data-module="#obs"] {
  color: var(--mod-observer) !important;
  border-color: color-mix(in srgb, var(--mod-observer) 40%, transparent) !important;
  background: color-mix(in srgb, var(--mod-observer) 8%, transparent) !important;
}
.dev-tools-scope.al-page .alert-module-tag[data-module="#pub"] {
  color: var(--mod-publisher) !important;
  border-color: color-mix(in srgb, var(--mod-publisher) 40%, transparent) !important;
  background: color-mix(in srgb, var(--mod-publisher) 8%, transparent) !important;
}
.dev-tools-scope.al-page .alert-module-tag[data-module="#exc"] {
  color: var(--mod-executor) !important;
  border-color: color-mix(in srgb, var(--mod-executor) 40%, transparent) !important;
  background: color-mix(in srgb, var(--mod-executor) 8%, transparent) !important;
}
.dev-tools-scope.al-page .alert-module-tag[data-module="#apl"] {
  color: var(--mod-applicant) !important;
  border-color: color-mix(in srgb, var(--mod-applicant) 40%, transparent) !important;
  background: color-mix(in srgb, var(--mod-applicant) 8%, transparent) !important;
}
.dev-tools-scope.al-page .alert-module-tag[data-module="#nex"] {
  color: var(--mod-nexus) !important;
  border-color: color-mix(in srgb, var(--mod-nexus) 40%, transparent) !important;
  background: color-mix(in srgb, var(--mod-nexus) 8%, transparent) !important;
}
.dev-tools-scope.al-page .alert-module-tag[data-module="#chl"] {
  color: var(--mod-challenger) !important;
  border-color: color-mix(in srgb, var(--mod-challenger) 40%, transparent) !important;
  background: color-mix(in srgb, var(--mod-challenger) 8%, transparent) !important;
}
.dev-tools-scope.al-page .alert-module-tag[data-module="#pay"] {
  color: var(--mod-paymaster) !important;
  border-color: color-mix(in srgb, var(--mod-paymaster) 40%, transparent) !important;
  background: color-mix(in srgb, var(--mod-paymaster) 8%, transparent) !important;
}

/* ─── Focus-visible для клавіатурної навігації ─── */
.dev-tools-scope.al-page .alerts-tab:focus-visible,
.dev-tools-scope.al-page .alerts-filter-select:focus-visible,
.dev-tools-scope.al-page .al-btn:focus-visible,
.dev-tools-scope.al-page .alert-dismiss-btn:focus-visible {
  outline: 2px solid var(--accent-brass, var(--accent-brass)) !important;
  outline-offset: 2px !important;
}

/* ─── End VISUAL POLISH v3.5 ─── */


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  HEADER POLISH v3.6 — годинник, side-btns, refresh, логотип     ║
   ║  1. Clock → симетрія з back-btn (над правою трубою)             ║
   ║  2. Side-btns → колонка збоку від годинника (не зверху/знизу)   ║
   ║  3. Refresh + interval → уніфікований control strip             ║
   ║  4. Crest → steampunk-пластина у стилі back-btn                 ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ─── 1. CLOCK PANEL — фіксований над правою трубою ─── */
/* Вирівнюємо по вертикалі з back-кнопкою: top=top-header-row */
.dev-tools-scope.al-page .al-clock-panel {
  position: absolute !important;
  right: 20px !important;
  top: 10px !important;
  display: grid !important;
  grid-template-columns: auto auto !important;
  grid-template-rows: 1fr 1fr !important;
  column-gap: 6px !important;
  row-gap: 4px !important;
  align-items: center !important;
  justify-items: center !important;
  z-index: 50 !important;
}

/* ─── 2. SIDE-BTNS — колонка збоку від годинника (праворуч) ─── */
.dev-tools-scope.al-page .al-clock-panel .clock-unit {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
}
.dev-tools-scope.al-page .al-clock-panel .al-clock-sidebtn--top {
  grid-column: 2 !important;
  grid-row: 1 !important;
}
.dev-tools-scope.al-page .al-clock-panel .al-clock-sidebtn--bot {
  grid-column: 2 !important;
  grid-row: 2 !important;
}
/* Розмір side-btns злегка компактніший, щоб 2 кнопки = висота годинника */
.dev-tools-scope.al-page .al-clock-sidebtn {
  width: 30px !important;
  height: 30px !important;
}
.dev-tools-scope.al-page .al-clock-sidebtn .material-symbols-outlined {
  font-size: 16px !important;
}

/* ─── 3. REFRESH-COMBO — уніфікований control strip ─── */
.dev-tools-scope.al-page .al-refresh-combo {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  min-width: 140px !important;
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-base) 100%) !important;
  border: 1px solid var(--border-dim) !important;
  border-top-color: rgba(197, 139, 58, 0.25) !important;
  border-radius: 3px !important;
  padding: 3px !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 219, 178, 0.05),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.4) !important;
  overflow: hidden !important;
}

/* Інфо-ряд — верхня секція strip (lock + interval + countdown) */
.dev-tools-scope.al-page .al-refresh-combo .al-refresh-info {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 8px 4px !important;
  background: rgba(0, 0, 0, 0.25) !important;
  border: none !important;
  border-bottom: 1px solid rgba(92, 68, 48, 0.35) !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 10px !important;
  color: var(--al-text-secondary) !important;
}
.dev-tools-scope.al-page .al-refresh-combo .al-refresh-info .al-lock-icon {
  font-size: 13px !important;
  color: var(--accent-brass) !important;
  opacity: 0.85 !important;
}
.dev-tools-scope.al-page .al-refresh-combo .al-refresh-info .al-interval-select {
  background: transparent !important;
  border: none !important;
  color: var(--accent-brass) !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 10px !important;
  padding: 0 2px !important;
  height: auto !important;
  outline: none !important;
  cursor: pointer !important;
  box-shadow: none !important;
}
.dev-tools-scope.al-page .al-refresh-combo .al-refresh-info .al-countdown {
  color: var(--accent-brass) !important;
  opacity: 0.7 !important;
  margin-left: auto !important;
  font-size: 10px !important;
  font-weight: 500 !important;
}

/* Нижня секція — кнопка Оновити (без окремої рамки, частина strip) */
.dev-tools-scope.al-page .al-refresh-combo .al-refresh-btn {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 30px !important;
  padding: 0 12px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--text-body) !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.10em !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}
.dev-tools-scope.al-page .al-refresh-combo .al-refresh-btn:hover {
  background: rgba(197, 139, 58, 0.08) !important;
  color: var(--accent-brass) !important;
}
.dev-tools-scope.al-page .al-refresh-combo .al-refresh-btn:active {
  background: rgba(0, 0, 0, 0.3) !important;
}
.dev-tools-scope.al-page .al-refresh-combo .al-refresh-btn .material-symbols-outlined {
  font-size: 16px !important;
}

/* ─── 4. CREST — steampunk-пластина у стилі back-btn ─── */
/* Shell: linear gradient + border-dim з brass-top (як .dt-backsign) */
.dev-tools-scope.al-page .al-crest .dt-crest__shell {
  min-width: 280px !important;
  min-height: 56px !important;
  padding: 6px 24px 4px !important;
  background: linear-gradient(180deg,
    var(--bg-elevated) 0%,
    var(--bg-base) 55%,
    var(--bg-void) 100%) !important;
  border: 1px solid var(--border-dim) !important;
  border-top-color: rgba(197, 139, 58, 0.30) !important;
  border-radius: 3px !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 219, 178, 0.08),
    inset 0 -2px 4px rgba(0, 0, 0, 0.55),
    0 2px 6px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 0, 0, 0.45) !important;
}
/* Внутрішня фаска — ледь помітна brass-лінія (як inset back-btn) */
.dev-tools-scope.al-page .al-crest .dt-crest__shell::before {
  content: '' !important;
  position: absolute !important;
  inset: 3px !important;
  border: 1px solid rgba(197, 139, 58, 0.10) !important;
  border-radius: 2px !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Crest plate (табличка "DEV TOOLS // MONITOR") — маленький підпис */
.dev-tools-scope.al-page .al-crest-plate {
  top: -4px !important;
  padding: 1px 10px !important;
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-base) 100%) !important;
  border: 1px solid var(--border-dim) !important;
  border-top-color: rgba(197, 139, 58, 0.25) !important;
  border-radius: 2px !important;
  font-size: 8px !important;
  letter-spacing: 0.18em !important;
  color: var(--accent-brass) !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 219, 178, 0.05),
    0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

/* Логотип-текст — зменшити зайвий glow, залишити brass-тінь як у back__target */
.dev-tools-scope.al-page .al-crest .dt-crest__title {
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em !important;
  color: var(--text-bright) !important;
  -webkit-text-fill-color: var(--text-bright) !important;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.85),
    0 0 6px rgba(197, 139, 58, 0.14) !important;
}

/* Мета-рядок під логотипом — як подвійний label back-btn */
.dev-tools-scope.al-page .al-crest-meta {
  margin-top: 2px !important;
}
.dev-tools-scope.al-page .al-crest-meta-txt {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 8.5px !important;
  letter-spacing: 0.16em !important;
  color: var(--al-text-secondary) !important;
  opacity: 0.85 !important;
}

/* Приховати декоративні лампи, щоб не конкурували з компактним стилем */
.dev-tools-scope.al-page .al-crest-lamp {
  opacity: 0.35 !important;
}

/* ─── End HEADER POLISH v3.6 ─── */


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  HEADER UNIFIED v1.0 — єдина дизайн-система для всієї балки     ║
   ║                                                                  ║
   ║  Принципи:                                                       ║
   ║  • Один метал-язик: чавун (var(--bg-base)→var(--bg-elevated)) = корпус;           ║
   ║    латунь (var(--accent-brass)→var(--accent-brass-hover)) = акценти, бровки, world            ║
   ║  • Балка: глибока фактура насічок + потужний brass rail знизу   ║
   ║  • Crest: відкриті кутові шестерні + кольорові лампи-статуси    ║
   ║  • Back + refresh: єдина чавунна плита з латунною коронкою      ║
   ║  • Sidecol: узгоджений з clock-корпусом (той самий градієнт)    ║
   ║  • Clock: ширший/солідніший, 164px, вписується у 96px балки     ║
   ║                                                                  ║
   ║  ⚠️ Специфічність: body.dev-tools-scope.al-page                  ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ═══════════════════════════════════════════════════════════════════
   §1. CLOCK PANEL — позиціонування та grid-розкладка
   ═══════════════════════════════════════════════════════════════════ */

/* Fixed-прив'язка — прив'язка до краю контент-колонки (як back), вертикально по центру балки */
body.dev-tools-scope.al-page .al-clock-panel {
  position: fixed !important;
  top: calc(var(--header-h, 96px) / 2) !important;
  transform: translateY(-50%) !important;
  right: max(20px, calc((100vw - var(--max-width, 1400px)) / 2 + 20px)) !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 100 !important;
  pointer-events: auto !important;
  /* sidecol ліворуч, clock-unit праворуч */
  display: grid !important;
  grid-template-columns: auto auto !important;
  grid-template-rows: auto !important;
  column-gap: 8px !important;
  row-gap: 0 !important;
  align-items: center !important;
}
body.dev-tools-scope.al-page .al-clock-panel > .al-clock-sidecol {
  grid-column: 1 / 2 !important;
  grid-row: 1 / 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 !important;
  pointer-events: auto !important;
}
body.dev-tools-scope.al-page .al-clock-panel > .clock-unit {
  grid-column: 2 / 3 !important;
  grid-row: 1 / 2 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   §2. CLOCK-UNIT — латунний хронограф
   ═══════════════════════════════════════════════════════════════════ */

body.dev-tools-scope.al-page .al-clock-panel > .clock-unit {
  width: 164px !important;
  padding: 4px 8px !important;
  position: relative !important;
  /* Латунний корпус — той самий градієнт що й sidecol та back-btn */
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0px, transparent 3px,
      rgba(0, 0, 0, 0.08) 3px, rgba(0, 0, 0, 0.08) 4px
    ),
    linear-gradient(180deg,
      var(--al-x, #3a2a18) 0%,
      var(--al-x, #2a1e10) 30%,
      var(--al-x, #1e1408) 65%,
      var(--al-x, #2a1e10) 100%
    ) !important;
  border: 1px solid var(--bg-void) !important;
  border-top-color: rgba(216, 179, 112, 0.50) !important;
  border-radius: 3px !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 200, 140, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.65),
    inset 0 0 16px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(92, 68, 48, 0.5),
    0 3px 8px rgba(0, 0, 0, 0.6) !important;
}

/* Болти корпусу — латунні мікро-кнопки */
body.dev-tools-scope.al-page .clock-unit .body-screw {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 32% 28%, var(--warning), var(--border-bright) 55%, var(--bg-elevated)) !important;
  border: 0.5px solid var(--bg-void) !important;
  box-shadow:
    inset 0 0.5px 1px rgba(255, 255, 255, 0.25),
    0 1px 2px rgba(0, 0, 0, 0.65) !important;
}
body.dev-tools-scope.al-page .clock-unit .body-screw::after {
  display: none !important;
}
body.dev-tools-scope.al-page .clock-unit .screw-tl { top: 3px !important; left: 3px !important; }
body.dev-tools-scope.al-page .clock-unit .screw-tr { top: 3px !important; right: 3px !important; }
body.dev-tools-scope.al-page .clock-unit .screw-bl { bottom: 3px !important; left: 3px !important; }
body.dev-tools-scope.al-page .clock-unit .screw-br { bottom: 3px !important; right: 3px !important; }

/* Декоративна мікро-шестерня */
body.dev-tools-scope.al-page .clock-unit .clock-deco-gear {
  position: absolute !important;
  left: 5px !important;
  top: 50% !important;
  width: 10px !important;
  height: 10px !important;
  transform: translateY(-50%) !important;
  color: rgba(197, 139, 58, 0.35) !important;
  animation: clk-deco-gear-spin 28s linear infinite !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
@keyframes clk-deco-gear-spin {
  from { transform: translateY(-50%) rotate(0deg); }
  to   { transform: translateY(-50%) rotate(360deg); }
}

/* ─── Display window — nixie tubes ─── */
body.dev-tools-scope.al-page .clock-unit .display-window {
  padding: 3px 4px !important;
  gap: 1px !important;
  justify-content: space-between !important;
  align-items: center !important;
  min-height: 26px !important;
  border: 1px solid var(--al-x, #1c1208) !important;
  border-radius: 2px !important;
  margin-bottom: 3px !important;
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%, rgba(197, 139, 58, 0.06) 0%, transparent 70%),
    linear-gradient(180deg, var(--al-x, #030201), var(--al-x, #080604) 30%, var(--al-x, #040301) 90%) !important;
  box-shadow:
    inset 0 0 8px rgba(0, 0, 0, 0.90),
    inset 0 0 14px rgba(197, 139, 58, 0.05),
    0 1px 0 rgba(140, 107, 70, 0.30) !important;
}

/* Nixie лампа */
body.dev-tools-scope.al-page .clock-unit .nixie {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: auto !important;
  height: 20px !important;
  border: 0.5px solid var(--al-x, #242018) !important;
  border-radius: 1.5px !important;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(20, 13, 6, 0.90) 0%, rgba(5, 3, 1, 0.97) 75%) !important;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.90) !important;
}
body.dev-tools-scope.al-page .clock-unit .nixie-digit {
  font-family: 'IBM Plex Mono', 'Courier New', monospace !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: var(--accent-brass-hover) !important;
  /* text-shadow removed (canon: glow forbidden) */
}
body.dev-tools-scope.al-page .clock-unit .nixie-ghost {
  font-family: 'IBM Plex Mono', 'Courier New', monospace !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: rgba(197, 139, 58, 0.10) !important;
  text-shadow: none !important;
}

/* Двокрапка */
body.dev-tools-scope.al-page .clock-unit .nixie-colon {
  flex: 0 0 auto !important;
  width: 8px !important;
  gap: 4px !important;
}
body.dev-tools-scope.al-page .clock-unit .colon-dot {
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: var(--accent-brass-hover) !important;
  box-shadow:
    0 0 4px rgba(230, 168, 72, 1.0),
    0 0 9px rgba(230, 168, 72, 0.65),
    0 0 2px rgba(255, 230, 180, 0.55) !important;
}

/* ─── Date-strip ─── */
body.dev-tools-scope.al-page .clock-unit .data-strip {
  gap: 0 !important;
  align-items: stretch !important;
  padding-left: 16px !important;
}
body.dev-tools-scope.al-page .clock-unit .clock-date-box {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 16px !important;
  padding: 1px 8px !important;
  gap: 6px !important;
  display: flex !important;
  align-items: center !important;
  border: 1px solid var(--al-x, #1c1208) !important;
  border-radius: 2px !important;
  background:
    radial-gradient(ellipse 80% 70% at 50% 45%, rgba(197, 139, 58, 0.04) 0%, transparent 70%),
    linear-gradient(180deg, var(--al-x, #050301) 0%, var(--al-x, #0c0804) 50%, var(--al-x, #050301) 100%) !important;
  box-shadow:
    inset 0 0 6px rgba(0, 0, 0, 0.90),
    0 1px 0 rgba(140, 107, 70, 0.38) !important;
}
body.dev-tools-scope.al-page .clock-unit .clock-date-label {
  font-family: 'Cinzel', 'Special Elite', serif !important;
  font-size: 7.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1.8px !important;
  color: rgba(216, 154, 63, 0.72) !important;
  text-transform: uppercase !important;
  flex-shrink: 0 !important;
  /* text-shadow removed (canon: glow forbidden) */
}
body.dev-tools-scope.al-page .clock-unit .clock-date-sep {
  flex: 1 1 auto !important;
  height: 1px !important;
  min-width: 8px !important;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(197, 139, 58, 0.28) 20%,
    rgba(216, 154, 63, 0.50) 50%,
    rgba(197, 139, 58, 0.28) 80%,
    transparent 100%
  ) !important;
  align-self: center !important;
}
body.dev-tools-scope.al-page .clock-unit .data-value {
  font-family: 'IBM Plex Mono', 'Courier New', monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--accent-brass-hover) !important;
  letter-spacing: 1px !important;
  /* text-shadow removed (canon: glow forbidden) */
  flex-shrink: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   §3. SIDECOL-КНОПКИ — узгоджений чавун, латунний акцент
   ═══════════════════════════════════════════════════════════════════ */

body.dev-tools-scope.al-page .al-clock-panel > .al-clock-sidecol > .al-clock-sidebtn,
body.dev-tools-scope.al-page .al-clock-panel > .al-clock-sidecol > #customAlertToggle,
body.dev-tools-scope.al-page .al-clock-panel > .al-clock-sidecol > #al-notif-toggle {
  position: relative !important;
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* Той самий чавун-корпус що і back-btn */
  background:
    linear-gradient(180deg,
      var(--bg-elevated) 0%,
      var(--bg-base) 45%,
      var(--bg-void) 100%
    ) !important;
  border: 1px solid var(--bg-void) !important;
  border-top-color: rgba(216, 179, 112, 0.45) !important;
  border-radius: 2px !important;
  color: var(--accent-brass-hover) !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 200, 140, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.70),
    0 0 0 1px rgba(92, 68, 48, 0.45),
    0 2px 5px rgba(0, 0, 0, 0.55) !important;
  cursor: pointer !important;
  transition: background 0.20s ease, border-color 0.20s ease,
              box-shadow 0.20s ease, transform 0.10s ease !important;
  /* Заклепка праворуч-знизу (декоративна) */
  overflow: visible !important;
}
/* Псевдо-заклепка */
body.dev-tools-scope.al-page .al-clock-panel > .al-clock-sidecol > .al-clock-sidebtn::after,
body.dev-tools-scope.al-page .al-clock-panel > .al-clock-sidecol > #customAlertToggle::after,
body.dev-tools-scope.al-page .al-clock-panel > .al-clock-sidecol > #al-notif-toggle::after {
  content: '' !important;
  position: absolute !important;
  bottom: 2px !important;
  right: 2px !important;
  width: 3px !important;
  height: 3px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 30%, var(--warning), var(--border-bright) 55%, var(--border-dim)) !important;
  box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.6) !important;
  pointer-events: none !important;
}
body.dev-tools-scope.al-page .al-clock-panel > .al-clock-sidecol > .al-clock-sidebtn:hover,
body.dev-tools-scope.al-page .al-clock-panel > .al-clock-sidecol > #customAlertToggle:hover,
body.dev-tools-scope.al-page .al-clock-panel > .al-clock-sidecol > #al-notif-toggle:hover {
  border-top-color: var(--accent-brass-hover) !important;
  border-color: rgba(197, 139, 58, 0.70) !important;
  background:
    linear-gradient(180deg,
      var(--border-metal) 0%,
      var(--al-x, #241810) 50%,
      var(--al-x, #140c08) 100%
    ) !important;
  color: var(--text-bright) !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 200, 140, 0.38),
    inset 0 -1px 0 rgba(0, 0, 0, 0.70),
    inset 0 0 10px rgba(197, 139, 58, 0.10),
    0 0 0 1px rgba(230, 168, 72, 0.50),
    0 0 8px rgba(197, 139, 58, 0.22),
    0 2px 5px rgba(0, 0, 0, 0.50) !important;
}
body.dev-tools-scope.al-page .al-clock-panel > .al-clock-sidecol > .al-clock-sidebtn:active,
body.dev-tools-scope.al-page .al-clock-panel > .al-clock-sidecol > #customAlertToggle:active,
body.dev-tools-scope.al-page .al-clock-panel > .al-clock-sidecol > #al-notif-toggle:active {
  transform: translateY(1px) !important;
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(230, 168, 72, 0.50),
    0 1px 2px rgba(0, 0, 0, 0.40) !important;
}
body.dev-tools-scope.al-page .al-clock-panel > .al-clock-sidecol > .al-clock-sidebtn .material-symbols-outlined,
body.dev-tools-scope.al-page .al-clock-panel > .al-clock-sidecol > #customAlertToggle .material-symbols-outlined,
body.dev-tools-scope.al-page .al-clock-panel > .al-clock-sidecol > #al-notif-toggle .material-symbols-outlined {
  font-size: 17px !important;
  pointer-events: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   §4. BACK-BTN + REFRESH-COMBO — єдина ліва чавунна плита
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Загальний ліво-кластер: back + refresh side-by-side ─── */
body.dev-tools-scope.al-page .al-header-left-cluster {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
}

/* ─── Back-btn: чавунна плита v2.0 ─── */
body.dev-tools-scope.al-page .dt-backsign {
  position: relative !important;
  display: inline-flex !important;
  align-items: stretch !important;
  height: 32px !important;
  min-width: auto !important;
  padding: 0 !important;
  gap: 0 !important;
  background:
    linear-gradient(180deg,
      var(--bg-elevated) 0%,
      var(--bg-base) 45%,
      var(--bg-void) 100%
    ) !important;
  border: 1px solid var(--bg-void) !important;
  border-top-color: rgba(216, 179, 112, 0.55) !important;
  border-radius: 2px !important;
  color: var(--accent-brass-hover) !important;
  text-decoration: none !important;
  transform: none !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 200, 140, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.70),
    inset 0 0 12px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(92, 68, 48, 0.45),
    0 2px 4px rgba(0, 0, 0, 0.50) !important;
  overflow: hidden !important;
  transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease !important;
}
/* Заклепка ліворуч-зверху */
body.dev-tools-scope.al-page .dt-backsign::before {
  content: '' !important;
  position: absolute !important;
  top: 2px !important;
  left: 3px !important;
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 30%, var(--warning), var(--border-bright) 55%, var(--border-dim)) !important;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.6), 0 0 0 0.5px var(--bg-void) !important;
  z-index: 3 !important;
  pointer-events: none !important;
}
/* Заклепка праворуч-знизу */
body.dev-tools-scope.al-page .dt-backsign::after {
  content: '' !important;
  position: absolute !important;
  bottom: 2px !important;
  right: 3px !important;
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 30%, var(--warning), var(--border-bright) 55%, var(--border-dim)) !important;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.6), 0 0 0 0.5px var(--bg-void) !important;
  z-index: 3 !important;
  pointer-events: none !important;
}
/* Ліва секція — arrow із вертикальним розділювачем */
body.dev-tools-scope.al-page .dt-backsign__arrow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 10px 0 12px !important;
  height: 100% !important;
  position: relative !important;
  background:
    linear-gradient(180deg,
      rgba(197, 139, 58, 0.12) 0%,
      rgba(92, 68, 48, 0.18) 55%,
      rgba(58, 37, 16, 0.25) 100%
    ) !important;
  box-shadow:
    inset -1px 0 0 rgba(0, 0, 0, 0.55),
    inset -2px 0 0 rgba(140, 107, 70, 0.30),
    inset 0 1px 0 rgba(232, 200, 140, 0.15) !important;
}
body.dev-tools-scope.al-page .dt-backsign__arrow svg {
  width: 14px !important;
  height: 14px !important;
  color: var(--accent-brass-hover) !important;
  /* filter drop-shadow glow removed (canon) */
  stroke-width: 2.4 !important;
}
/* Права секція — текст */
body.dev-tools-scope.al-page .dt-backsign__text {
  display: flex !important;
  align-items: center !important;
  padding: 0 14px 0 10px !important;
  height: 100% !important;
}
body.dev-tools-scope.al-page .dt-backsign__label {
  display: none !important;
}
body.dev-tools-scope.al-page .dt-backsign__target {
  font-family: 'Cinzel', 'Special Elite', serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 2.2px !important;
  color: var(--accent-brass) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: var(--accent-brass) !important;
  text-transform: uppercase !important;
  /* text-shadow removed (canon: glow forbidden) */
  line-height: 1 !important;
  white-space: nowrap !important;
}
/* Back-btn hover */
body.dev-tools-scope.al-page .dt-backsign:hover {
  background:
    linear-gradient(180deg,
      var(--border-metal) 0%,
      var(--al-x, #241810) 50%,
      var(--al-x, #140c08) 100%
    ) !important;
  border-top-color: var(--accent-brass-hover) !important;
  border-bottom-color: rgba(92, 68, 48, 0.60) !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 200, 140, 0.40),
    inset 0 -1px 0 rgba(0, 0, 0, 0.70),
    inset 0 0 18px rgba(197, 139, 58, 0.14),
    0 0 0 1px rgba(230, 168, 72, 0.55),
    0 0 10px rgba(197, 139, 58, 0.22),
    0 2px 6px rgba(0, 0, 0, 0.55) !important;
}
body.dev-tools-scope.al-page .dt-backsign:hover .dt-backsign__arrow {
  background:
    linear-gradient(180deg,
      rgba(230, 168, 72, 0.22) 0%,
      rgba(140, 107, 70, 0.28) 55%,
      rgba(92, 68, 48, 0.32) 100%
    ) !important;
}
body.dev-tools-scope.al-page .dt-backsign:hover .dt-backsign__arrow svg {
  color: var(--text-bright) !important;
  /* filter drop-shadow glow removed (canon) */
}
body.dev-tools-scope.al-page .dt-backsign:hover .dt-backsign__target {
  color: var(--text-bright) !important;
  -webkit-text-fill-color: var(--text-bright) !important;
  /* text-shadow removed (canon: glow forbidden) */
}
/* Back-btn active */
body.dev-tools-scope.al-page .dt-backsign:active {
  transform: translateY(1px) !important;
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.60),
    inset 0 0 15px rgba(197, 139, 58, 0.12),
    0 0 0 1px rgba(230, 168, 72, 0.55),
    0 1px 2px rgba(0, 0, 0, 0.40) !important;
}

/* ─── Refresh-combo: та сама плита що й back ─── */
body.dev-tools-scope.al-page .al-refresh-combo {
  position: relative !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 0 !important;
  height: 32px !important;
  /* Той самий чавун-корпус */
  background:
    linear-gradient(180deg,
      var(--bg-elevated) 0%,
      var(--bg-base) 45%,
      var(--bg-void) 100%
    ) !important;
  border: 1px solid var(--bg-void) !important;
  border-top-color: rgba(216, 179, 112, 0.45) !important;
  border-radius: 2px !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 200, 140, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.70),
    inset 0 0 10px rgba(0, 0, 0, 0.40),
    0 0 0 1px rgba(92, 68, 48, 0.45),
    0 2px 4px rgba(0, 0, 0, 0.50) !important;
  overflow: hidden !important;
  transition: border-color 0.22s ease, box-shadow 0.22s ease !important;
}
/* Верхня заклепка на refresh-combo */
body.dev-tools-scope.al-page .al-refresh-combo::before {
  content: '' !important;
  position: absolute !important;
  top: 2px !important;
  left: 3px !important;
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 30%, var(--warning), var(--border-bright) 55%, var(--border-dim)) !important;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.6), 0 0 0 0.5px var(--bg-void) !important;
  z-index: 3 !important;
  pointer-events: none !important;
}
/* Секція інтервалу — ліворуч з вертикальним розділювачем */
body.dev-tools-scope.al-page .al-refresh-combo .al-refresh-info {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 0 10px 0 14px !important;
  margin: 0 !important;
  border: none !important;
  height: 100% !important;
  white-space: nowrap !important;
  /* Та сама ліва секція що й у back-btn (arrow секція) */
  background:
    linear-gradient(180deg,
      rgba(197, 139, 58, 0.10) 0%,
      rgba(92, 68, 48, 0.15) 55%,
      rgba(58, 37, 16, 0.22) 100%
    ) !important;
  box-shadow:
    inset -1px 0 0 rgba(0, 0, 0, 0.55),
    inset -2px 0 0 rgba(140, 107, 70, 0.28),
    inset 0 1px 0 rgba(232, 200, 140, 0.12) !important;
}
body.dev-tools-scope.al-page .al-refresh-combo .al-refresh-info .al-lock-icon {
  font-size: 13px !important;
  color: var(--accent-brass-hover) !important;
  /* filter drop-shadow glow removed (canon) */
  flex-shrink: 0 !important;
}
body.dev-tools-scope.al-page .al-refresh-combo .al-refresh-info .al-interval-select {
  background: transparent !important;
  border: none !important;
  color: var(--accent-brass) !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  outline: none !important;
  cursor: pointer !important;
  box-shadow: none !important;
  min-width: 38px !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.80) !important;
}
body.dev-tools-scope.al-page .al-refresh-combo .al-refresh-info .al-countdown {
  font-family: 'IBM Plex Mono', monospace !important;
  color: var(--accent-brass) !important;
  opacity: 0.80 !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  min-width: 28px !important;
  text-align: right !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.80) !important;
}
/* Секція кнопки — права частина */
body.dev-tools-scope.al-page .al-refresh-combo .al-refresh-btn {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  height: 100% !important;
  min-width: 0 !important;
  padding: 0 12px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--accent-brass) !important;
  font-family: 'Cinzel', 'Special Elite', serif !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  box-shadow: none !important;
  /* text-shadow removed (canon: glow forbidden) */
  transition: background 0.18s ease, color 0.18s ease !important;
}
body.dev-tools-scope.al-page .al-refresh-combo .al-refresh-btn:hover {
  background: rgba(197, 139, 58, 0.10) !important;
  color: var(--text-bright) !important;
  /* text-shadow removed (canon: glow forbidden) */
}
body.dev-tools-scope.al-page .al-refresh-combo .al-refresh-btn:active {
  background: rgba(0, 0, 0, 0.35) !important;
  transform: translateY(1px) !important;
}
body.dev-tools-scope.al-page .al-refresh-combo .al-refresh-btn .material-symbols-outlined {
  font-size: 15px !important;
  color: var(--accent-brass-hover) !important;
  /* filter drop-shadow glow removed (canon) */
}
/* Refresh-combo hover — brass обводка як у back-btn */
body.dev-tools-scope.al-page .al-refresh-combo:focus-within,
body.dev-tools-scope.al-page .al-refresh-combo:has(.al-refresh-btn:hover) {
  border-top-color: rgba(230, 168, 72, 0.65) !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 200, 140, 0.32),
    inset 0 -1px 0 rgba(0, 0, 0, 0.70),
    inset 0 0 14px rgba(197, 139, 58, 0.10),
    0 0 0 1px rgba(230, 168, 72, 0.40),
    0 0 8px rgba(197, 139, 58, 0.16),
    0 2px 4px rgba(0, 0, 0, 0.50) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   §5. CREST — інтегрований у балку центральний медальйон
   ═══════════════════════════════════════════════════════════════════ */

body.dev-tools-scope.al-page .dt-header-row-top {
  justify-content: space-between !important;
  width: 100% !important;
  position: relative !important;
}

/* Crest shell — глибший корпус, виразні кутові шестерні */
body.dev-tools-scope.al-page .al-crest .dt-crest__shell {
  min-width: 280px !important;
  min-height: 62px !important;
  padding: 6px 28px 6px !important;
  position: relative !important;
  /* Той самий чавун що й в балці — але з насічками по центру */
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0px, transparent 5px,
      rgba(197, 139, 58, 0.012) 5px, rgba(197, 139, 58, 0.012) 6px
    ),
    linear-gradient(180deg,
      var(--bg-elevated) 0%,
      var(--bg-base) 40%,
      var(--al-x, #120c06) 65%,
      var(--bg-base) 100%
    ) !important;
  border: 1px solid var(--bg-void) !important;
  border-top-color: rgba(216, 179, 112, 0.50) !important;
  border-radius: 3px !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 200, 140, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.70),
    inset 0 0 20px rgba(0, 0, 0, 0.50),
    0 0 0 1px rgba(92, 68, 48, 0.50),
    0 0 0 2px rgba(0, 0, 0, 0.60),
    0 3px 8px rgba(0, 0, 0, 0.65) !important;
  overflow: visible !important;
}
/* Внутрішня рамка-гравіровка */
body.dev-tools-scope.al-page .al-crest .dt-crest__shell::before {
  content: '' !important;
  position: absolute !important;
  inset: 3px !important;
  border: 1px solid rgba(197, 139, 58, 0.12) !important;
  border-top-color: rgba(197, 139, 58, 0.22) !important;
  border-radius: 2px !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
body.dev-tools-scope.al-page .al-crest .dt-crest__shell::after {
  display: none !important;
}

/* Кутові шестерні — акцентні (не приховані), зменшені розміри */
body.dev-tools-scope.al-page .al-crest .sp-corner {
  opacity: 0.65 !important;
  z-index: 2 !important;
}
body.dev-tools-scope.al-page .al-crest .sp-corner.sp-corner-tl { top: -6px !important; left: -6px !important; }
body.dev-tools-scope.al-page .al-crest .sp-corner.sp-corner-tr { top: -6px !important; right: -6px !important; }
body.dev-tools-scope.al-page .al-crest .sp-corner.sp-corner-bl { bottom: -6px !important; left: -6px !important; }
body.dev-tools-scope.al-page .al-crest .sp-corner.sp-corner-br { bottom: -6px !important; right: -6px !important; }

/* Бічні заклепки crest */
body.dev-tools-scope.al-page .al-crest .sp-edge-bolt {
  opacity: 0.55 !important;
}

/* Лампи-індикатори: тихі в спокої, спалахують при критичних алертах */
body.dev-tools-scope.al-page .al-crest-lamp {
  opacity: 0.30 !important;
  transform: scale(0.75) !important;
  transition: opacity 0.4s ease, transform 0.4s ease !important;
}
body.dev-tools-scope.al-page.has-critical .al-crest-lamp {
  opacity: 0.90 !important;
  transform: scale(1) !important;
  animation: al-lamp-critical-pulse 1.5s ease-in-out infinite !important;
}
@keyframes al-lamp-critical-pulse {
  0%, 100% { opacity: 0.90; filter: brightness(1); }
  50%       { opacity: 0.55; filter: brightness(0.7); }
}

/* Табличка "DEV TOOLS // MONITOR" */
body.dev-tools-scope.al-page .al-crest-plate {
  position: absolute !important;
  top: -6px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  padding: 2px 14px !important;
  /* Той самий чавун */
  background:
    linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-base) 100%) !important;
  border: 1px solid var(--bg-void) !important;
  border-top-color: rgba(216, 179, 112, 0.45) !important;
  border-radius: 2px !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 7.5px !important;
  letter-spacing: 0.22em !important;
  color: var(--accent-brass) !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.85) !important;
  white-space: nowrap !important;
  z-index: 5 !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 200, 140, 0.15),
    0 0 0 1px rgba(92, 68, 48, 0.40),
    0 2px 4px rgba(0, 0, 0, 0.50) !important;
}

/* Сігіл-іконка */
body.dev-tools-scope.al-page .al-crest-sigil {
  width: 22px !important;
  height: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  opacity: 0.88 !important;
}

/* Заголовок — карбована латунь */
body.dev-tools-scope.al-page .al-crest .dt-crest__title {
  font-family: 'Cinzel', 'Special Elite', serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  line-height: 1.15 !important;
  color: var(--text-bright, var(--text-bright)) !important;
  -webkit-text-fill-color: var(--text-bright, var(--text-bright)) !important;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.95),
    0 2px 4px rgba(0, 0, 0, 0.80),
    0 0 8px rgba(197, 139, 58, 0.15) !important;
  margin: 0 !important;
}

/* Мета-рядок "THREAT MONITOR · LIVE" */
body.dev-tools-scope.al-page .al-crest-meta {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 3px !important;
}
body.dev-tools-scope.al-page .al-crest-meta-txt {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 8px !important;
  letter-spacing: 0.22em !important;
  color: var(--log-notice) !important;
  opacity: 0.85 !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.80) !important;
}
body.dev-tools-scope.al-page .al-crest-meta-dot {
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: var(--accent-brass) !important;
  opacity: 0.55 !important;
  box-shadow: 0 0 3px rgba(197, 139, 58, 0.40) !important;
}
/* Живий індикатор поряд із "LIVE" — першопочатковий пульс */
body.dev-tools-scope.al-page .al-crest-meta-dot:last-child {
  animation: al-live-dot-pulse 2.2s ease-in-out infinite !important;
  opacity: 0.80 !important;
}
@keyframes al-live-dot-pulse {
  0%, 100% { opacity: 0.80; box-shadow: 0 0 3px rgba(197, 139, 58, 0.45); }
  50%       { opacity: 0.40; box-shadow: 0 0 1px rgba(197, 139, 58, 0.20); }
}

/* ─── End HEADER UNIFIED v1.0 ─── */

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  HEADER ARTIFACTS v2.0 — унікальні steampunk-артефакти          ║
   ║                                                                  ║
   ║  Back-btn  → Мідна музейна табличка на ланцюжках                ║
   ║  Refresh   → Хронографний прилад (Dial + Pump)                  ║
   ║                                                                  ║
   ║  Специфічність: body.dev-tools-scope.al-page (перекриває v1.0)  ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ═══════════════════════════════════════════════════════════════════
   §A. PLAQUE — Мідна табличка на ланцюжках
   ═══════════════════════════════════════════════════════════════════ */

/* Зовнішня обгортка — простір для ланцюжків зверху */
body.dev-tools-scope.al-page .al-plaque-wrap {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
  position: relative !important;
}

/* Ланцюги — горизонтальний рядок двох ланцюжків */
body.dev-tools-scope.al-page .al-plaque-chains {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  width: calc(100% - 20px) !important;
  padding: 0 6px !important;
  height: 8px !important;
  pointer-events: none !important;
  position: relative !important;
  z-index: 2 !important;
}

body.dev-tools-scope.al-page .al-chain {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 1px !important;
}

body.dev-tools-scope.al-page .al-chain-link {
  display: block !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 25%, var(--al-x, #e8c070), var(--accent-brass-dim) 50%, var(--border-metal)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 160, 0.30),
    0 1px 2px rgba(0, 0, 0, 0.70),
    0 0 0 0.5px rgba(80, 55, 20, 0.90) !important;
}

/* Між ланками — вертикальна "шпилька" з'єднання */
body.dev-tools-scope.al-page .al-chain-link + .al-chain-link {
  position: relative !important;
}
body.dev-tools-scope.al-page .al-chain-link + .al-chain-link::before {
  content: '' !important;
  position: absolute !important;
  left: -2px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 2px !important;
  height: 3px !important;
  background: linear-gradient(180deg, var(--accent-brass-dim), var(--border-metal)) !important;
  pointer-events: none !important;
}

/* Сама табличка — трапеція зі скошеними кутами, глибока мідь */
body.dev-tools-scope.al-page .al-plaque {
  position: relative !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0 !important;
  height: 34px !important;
  min-width: 130px !important;
  padding: 0 !important;
  text-decoration: none !important;
  overflow: visible !important;
  /* Скошена форма табличок — класична трапеція */
  clip-path: polygon(
    6px 0%,
    calc(100% - 6px) 0%,
    100% 100%,
    0% 100%
  ) !important;
  /* Мідно-бронзовий градієнт — відмінний від чавуну */
  background:
    linear-gradient(
      175deg,
      var(--border-metal) 0%,
      var(--border-dim) 15%,
      var(--al-x, #2e1c0c) 40%,
      var(--border-dim) 70%,
      var(--border-metal) 100%
    ) !important;
  border: none !important;
  /* Підсвічування зверху — "вибита" лиця мідь */
  box-shadow:
    inset 0 2px 0 rgba(216, 154, 63, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.85),
    inset 2px 0 0 rgba(160, 133, 53, 0.25),
    inset -2px 0 0 rgba(160, 133, 53, 0.25),
    inset 0 0 18px rgba(0, 0, 0, 0.55),
    0 3px 8px rgba(0, 0, 0, 0.70),
    0 1px 0 rgba(74, 50, 24, 0.80) !important;
  color: var(--accent-brass-hover) !important;
  cursor: pointer !important;
  /* Hover: гойдання табличку */
  transition:
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.25s ease,
    filter 0.25s ease !important;
  transform-origin: center top !important;
}

/* Болти-кутники — 4 латунних заклепки */
body.dev-tools-scope.al-page .al-plaque-bolt {
  position: absolute !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 30% 25%, var(--al-x, #f0d888), var(--accent-brass) 45%, var(--al-x, #5c3e18)) !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 200, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.60),
    0 1px 2px rgba(0, 0, 0, 0.70),
    0 0 0 1px rgba(50, 30, 10, 0.80) !important;
  z-index: 4 !important;
  pointer-events: none !important;
}
body.dev-tools-scope.al-page .al-plaque-bolt::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 2px !important;
  height: 2px !important;
  border-radius: 50% !important;
  background: rgba(255, 240, 180, 0.60) !important;
}
body.dev-tools-scope.al-page .al-plaque-bolt--tl { top: 3px !important; left: 8px !important; }
body.dev-tools-scope.al-page .al-plaque-bolt--tr { top: 3px !important; right: 8px !important; }
body.dev-tools-scope.al-page .al-plaque-bolt--bl { bottom: 3px !important; left: 10px !important; }
body.dev-tools-scope.al-page .al-plaque-bolt--br { bottom: 3px !important; right: 10px !important; }

/* Стрілка — вигравірована ліворуч */
body.dev-tools-scope.al-page .al-plaque-arrow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 10px 0 18px !important;
  height: 100% !important;
  flex-shrink: 0 !important;
  position: relative !important;
}
body.dev-tools-scope.al-page .al-plaque-arrow svg {
  color: var(--accent-brass-hover) !important;
  /* filter drop-shadow glow removed (canon) */
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Гравіровний розділювач між стрілкою і текстом */
body.dev-tools-scope.al-page .al-plaque-divider {
  display: block !important;
  width: 1px !important;
  height: 18px !important;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(160, 133, 53, 0.45) 20%,
    rgba(216, 154, 63, 0.65) 50%,
    rgba(160, 133, 53, 0.45) 80%,
    transparent 100%
  ) !important;
  flex-shrink: 0 !important;
  align-self: center !important;
}

/* Текстова зона */
body.dev-tools-scope.al-page .al-plaque-text {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 0 14px 0 10px !important;
  height: 100% !important;
  gap: 1px !important;
}
body.dev-tools-scope.al-page .al-plaque-label {
  display: block !important;
  font-family: var(--font-ui, 'Oswald', sans-serif); /* UPPERCASE label — canon font */
  font-size: 7px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(197, 139, 58, 0.60) !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.90) !important;
  line-height: 1 !important;
}
body.dev-tools-scope.al-page .al-plaque-target {
  display: block !important;
  font-family: 'Cinzel', 'Special Elite', serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--accent-brass-hover) !important;
  -webkit-text-fill-color: var(--accent-brass-hover) !important;
  background: none !important;
  /* text-shadow removed (canon: glow forbidden) */
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Shine overlay — відблиск поверхні */
body.dev-tools-scope.al-page .al-plaque-shine {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 40% !important;
  background: linear-gradient(
    180deg,
    rgba(216, 154, 63, 0.09) 0%,
    rgba(216, 154, 63, 0.03) 60%,
    transparent 100%
  ) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* ── Hover: табличка гойдається і світліє ── */
body.dev-tools-scope.al-page .al-plaque:hover {
  transform: rotate(-1.2deg) translateY(-1px) !important;
  filter: brightness(1.12) !important;
  box-shadow:
    inset 0 2px 0 rgba(230, 168, 72, 0.80),
    inset 0 -1px 0 rgba(0, 0, 0, 0.85),
    inset 0 0 22px rgba(197, 139, 58, 0.20),
    0 4px 14px rgba(0, 0, 0, 0.80),
    0 0 12px rgba(197, 139, 58, 0.18),
    0 1px 0 rgba(74, 50, 24, 0.80) !important;
}
body.dev-tools-scope.al-page .al-plaque:hover .al-plaque-arrow svg {
  transform: translateX(-2px) !important;
  color: var(--text-bright) !important;
  /* filter drop-shadow glow removed (canon) */
}
body.dev-tools-scope.al-page .al-plaque:hover .al-plaque-target {
  color: var(--text-bright) !important;
  -webkit-text-fill-color: var(--text-bright) !important;
  /* text-shadow removed (canon: glow forbidden) */
}

/* ── Active: табличка притискається ── */
body.dev-tools-scope.al-page .al-plaque:active {
  transform: rotate(0deg) translateY(1px) !important;
  filter: brightness(0.90) !important;
  box-shadow:
    inset 0 3px 6px rgba(0, 0, 0, 0.65),
    inset 0 0 16px rgba(0, 0, 0, 0.50),
    0 1px 3px rgba(0, 0, 0, 0.70) !important;
}

/* ── Анімація легкого погойдування ланцюжків при hover ── */
@media (prefers-reduced-motion: no-preference) {
  body.dev-tools-scope.al-page .al-plaque-wrap:hover .al-chain-l {
    animation: al-chain-swing-l 0.60s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
  }
  body.dev-tools-scope.al-page .al-plaque-wrap:hover .al-chain-r {
    animation: al-chain-swing-r 0.60s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
  }
}
@keyframes al-chain-swing-l {
  0%   { transform: translateX(0) rotate(0deg); }
  40%  { transform: translateX(-2px) rotate(-4deg); }
  70%  { transform: translateX(1px) rotate(2deg); }
  100% { transform: translateX(0) rotate(0deg); }
}
@keyframes al-chain-swing-r {
  0%   { transform: translateX(0) rotate(0deg); }
  40%  { transform: translateX(2px) rotate(4deg); }
  70%  { transform: translateX(-1px) rotate(-2deg); }
  100% { transform: translateX(0) rotate(0deg); }
}

/* Перекриття старих v1.0 стилів на backsign — в контексті plaque */
body.dev-tools-scope.al-page .al-plaque.dt-backsign {
  border-radius: 0 !important;
}
body.dev-tools-scope.al-page .al-plaque .dt-backsign__arrow {
  background: none !important;
  box-shadow: none !important;
}
body.dev-tools-scope.al-page .al-plaque .dt-backsign__text {
  padding: 0 !important;
}
body.dev-tools-scope.al-page .al-plaque .dt-backsign__label {
  display: block !important;
}
body.dev-tools-scope.al-page .al-plaque .dt-backsign__target {
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  color: var(--accent-brass-hover) !important;
  -webkit-text-fill-color: var(--accent-brass-hover) !important;
  /* text-shadow removed (canon: glow forbidden) */
}
body.dev-tools-scope.al-page .al-plaque:hover .dt-backsign__target {
  color: var(--text-bright) !important;
  -webkit-text-fill-color: var(--text-bright) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   §B. CHRONO-UNIT — Хронографний прилад
   ═══════════════════════════════════════════════════════════════════ */

/* Зовнішній контейнер — округлений корпус приладу, відмінний від плоскої таблички */
body.dev-tools-scope.al-page .al-chrono-unit {
  position: relative !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 0 !important;
  height: 38px !important;
  /* Тепліший, більш закруглений корпус — відрізняється від трапеції таблички */
  background:
    linear-gradient(160deg,
      var(--bg-base) 0%,
      var(--al-x, #160e08) 30%,
      var(--al-x, #0e0906) 65%,
      var(--al-x, #1a1008) 100%
    ) !important;
  border: 1px solid rgba(92, 68, 48, 0.70) !important;
  border-top-color: rgba(160, 133, 53, 0.40) !important;
  border-radius: 4px !important;
  box-shadow:
    inset 0 1px 0 rgba(200, 165, 90, 0.18),
    inset 0 -2px 0 rgba(0, 0, 0, 0.75),
    inset 0 0 14px rgba(0, 0, 0, 0.50),
    0 0 0 1px rgba(60, 42, 22, 0.60),
    0 3px 10px rgba(0, 0, 0, 0.70) !important;
  overflow: visible !important;
  transition: box-shadow 0.22s ease, border-color 0.22s ease !important;
}

/* Заклепки корпусу приладу */
body.dev-tools-scope.al-page .al-chrono-unit::before {
  content: '' !important;
  position: absolute !important;
  top: 3px !important;
  left: 4px !important;
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 32% 26%, var(--warning), var(--border-bright) 55%, var(--bg-elevated)) !important;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.65), 0 0 0 0.5px var(--bg-void) !important;
  z-index: 5 !important;
  pointer-events: none !important;
}
body.dev-tools-scope.al-page .al-chrono-unit::after {
  content: '' !important;
  position: absolute !important;
  bottom: 3px !important;
  right: 4px !important;
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 32% 26%, var(--warning), var(--border-bright) 55%, var(--bg-elevated)) !important;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.65), 0 0 0 0.5px var(--bg-void) !important;
  z-index: 5 !important;
  pointer-events: none !important;
}

/* ── DIAL-секція: регулятор інтервалу ── */
body.dev-tools-scope.al-page .al-chrono-dial {
  position: relative !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 10px 0 14px !important;
  margin: 0 !important;
  border: none !important;
  border-right: 1px solid rgba(92, 68, 48, 0.50) !important;
  height: 100% !important;
  white-space: nowrap !important;
  /* Вгнута "мисочка" приладу — інша фактура від кнопки */
  background:
    radial-gradient(ellipse 80% 90% at 50% 50%,
      rgba(0, 0, 0, 0.35) 0%,
      transparent 70%
    ),
    linear-gradient(180deg,
      rgba(30, 20, 10, 0.80) 0%,
      rgba(14, 9, 4, 0.60) 50%,
      rgba(26, 16, 8, 0.75) 100%
    ) !important;
  box-shadow:
    inset 1px 0 0 rgba(200, 165, 90, 0.08),
    inset 0 2px 5px rgba(0, 0, 0, 0.50),
    inset -1px 0 0 rgba(0, 0, 0, 0.65) !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* Кругла рамка-манометр */
body.dev-tools-scope.al-page .al-dial-frame {
  position: relative !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 42% 36%, rgba(197, 139, 58, 0.18) 0%, rgba(0, 0, 0, 0.70) 60%),
    linear-gradient(135deg, var(--al-x, #2a1e10), var(--al-x, #0e0906)) !important;
  border: 1.5px solid rgba(160, 133, 53, 0.50) !important;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.80),
    inset 0 0 8px rgba(0, 0, 0, 0.60),
    0 0 0 1px rgba(40, 26, 10, 0.90),
    0 1px 3px rgba(0, 0, 0, 0.65),
    0 0 6px rgba(197, 139, 58, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
}

/* Засічки шкали на циферблаті */
body.dev-tools-scope.al-page .al-dial-tick {
  position: absolute !important;
  width: 2px !important;
  height: 4px !important;
  background: rgba(197, 139, 58, 0.55) !important;
  border-radius: 1px !important;
  transform-origin: center 14px !important;
  pointer-events: none !important;
}
body.dev-tools-scope.al-page .al-dial-tick--1 { transform: rotate(0deg) translateX(-1px); top: 0px; left: 11px; }
body.dev-tools-scope.al-page .al-dial-tick--2 { transform: rotate(90deg) translateX(-1px); top: 11px; right: 0px; height: 3px; opacity: 0.40; }
body.dev-tools-scope.al-page .al-dial-tick--3 { transform: rotate(180deg) translateX(-1px); bottom: 0px; left: 11px; height: 3px; opacity: 0.40; }
body.dev-tools-scope.al-page .al-dial-tick--4 { transform: rotate(270deg) translateX(-1px); top: 11px; left: 0px; height: 3px; opacity: 0.40; }

/* Іконка lock всередині циферблату */
body.dev-tools-scope.al-page .al-dial-icon {
  font-size: 13px !important;
  color: var(--accent-brass-hover) !important;
  /* text-shadow removed (canon: glow forbidden) */
  z-index: 2 !important;
  pointer-events: none !important;
  position: relative !important;
}

/* Прозорий select поверх діалу — клікабельний але невидимий */
body.dev-tools-scope.al-page .al-dial-select {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: pointer !important;
  z-index: 10 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Зона мітки значення поруч з діалом */
body.dev-tools-scope.al-page .al-dial-label-area {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 1px !important;
  pointer-events: none !important;
}
body.dev-tools-scope.al-page .al-dial-value-display {
  font-family: 'IBM Plex Mono', 'Courier New', monospace !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--accent-brass-hover) !important;
  /* text-shadow removed (canon: glow forbidden) */
  line-height: 1 !important;
  white-space: nowrap !important;
  letter-spacing: 0.05em !important;
}
body.dev-tools-scope.al-page .al-dial-sub {
  font-family: var(--font-ui, 'Oswald', sans-serif); /* UPPERCASE label — canon font */
  font-size: 6.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.20em !important;
  color: rgba(197, 139, 58, 0.55) !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.90) !important;
  line-height: 1 !important;
}

/* Countdown — мікро-nixie-дисплей під dial-value */
body.dev-tools-scope.al-page .al-dial-countdown-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 28px !important;
  pointer-events: none !important;
}
body.dev-tools-scope.al-page .al-dial-countdown {
  font-family: 'IBM Plex Mono', 'Courier New', monospace !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: rgba(197, 139, 58, 0.75) !important;
  /* text-shadow removed (canon: glow forbidden) */
  letter-spacing: 0.05em !important;
  min-width: 24px !important;
  text-align: right !important;
  display: inline-block !important;
}

/* Hover на chrono-unit змінює кольори dial-display */
body.dev-tools-scope.al-page .al-chrono-unit:hover .al-dial-value-display {
  color: var(--text-bright) !important;
  /* text-shadow removed (canon: glow forbidden) */
}
body.dev-tools-scope.al-page .al-chrono-unit:hover .al-dial-frame {
  border-color: rgba(230, 168, 72, 0.70) !important;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.80),
    inset 0 0 8px rgba(0, 0, 0, 0.60),
    0 0 0 1px rgba(40, 26, 10, 0.90),
    0 0 8px rgba(197, 139, 58, 0.22) !important;
}

/* ── PUMP-кнопка: масивна латунна помпа ── */
body.dev-tools-scope.al-page .al-pump-btn {
  position: relative !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 0 16px !important;
  min-width: 80px !important;
  height: 100% !important;
  /* Масивний латунний корпус — виступає назовні, об'ємний */
  background:
    linear-gradient(170deg,
      var(--al-x, #5c4018) 0%,
      var(--al-x, #3a2a0e) 25%,
      var(--bg-elevated) 50%,
      var(--al-x, #3a2a0e) 75%,
      var(--al-x, #4a3214) 100%
    ) !important;
  border: none !important;
  border-left: 1px solid rgba(92, 68, 48, 0.40) !important;
  border-radius: 0 4px 4px 0 !important;
  color: var(--accent-brass-hover) !important;
  cursor: pointer !important;
  overflow: hidden !important;
  box-shadow:
    inset 0 2px 0 rgba(216, 180, 80, 0.45),
    inset 0 -2px 0 rgba(0, 0, 0, 0.80),
    inset 2px 0 0 rgba(216, 180, 80, 0.18),
    inset 0 0 20px rgba(0, 0, 0, 0.45),
    0 1px 0 rgba(74, 50, 12, 0.85) !important;
  transition: transform 0.10s ease, box-shadow 0.18s ease, background 0.18s ease, filter 0.18s ease !important;
}

/* Штуцер-насадка на верхівці помпи */
body.dev-tools-scope.al-page .al-pump-nozzle {
  position: absolute !important;
  top: -5px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 28px !important;
  height: 7px !important;
  background: linear-gradient(180deg, var(--al-x, #4a3214), var(--bg-elevated)) !important;
  border: 1px solid rgba(92, 68, 48, 0.60) !important;
  border-top-color: rgba(197, 139, 58, 0.55) !important;
  border-radius: 2px 2px 0 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(216, 180, 80, 0.30),
    0 -1px 3px rgba(0, 0, 0, 0.55) !important;
  pointer-events: none !important;
  z-index: 3 !important;
}

/* Тіло помпи — вертикальний лейаут: іконка + підпис */
body.dev-tools-scope.al-page .al-pump-body {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  position: relative !important;
  z-index: 2 !important;
}
body.dev-tools-scope.al-page .al-pump-icon {
  font-size: 16px !important;
  color: var(--accent-brass-hover) !important;
  /* text-shadow removed (canon: glow forbidden) */
  transition: transform 0.30s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
body.dev-tools-scope.al-page .al-pump-label {
  font-family: 'Cinzel', 'Special Elite', serif !important;
  font-size: 7px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(197, 139, 58, 0.80) !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.90) !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

/* Горизонтальні ребра-насічки збоку помпи */
body.dev-tools-scope.al-page .al-pump-rib {
  position: absolute !important;
  right: 0 !important;
  height: 1px !important;
  width: 5px !important;
  background: linear-gradient(90deg, transparent, rgba(197, 139, 58, 0.35)) !important;
  pointer-events: none !important;
}
body.dev-tools-scope.al-page .al-pump-rib--1 { top: 30%; }
body.dev-tools-scope.al-page .al-pump-rib--2 { top: 50%; }
body.dev-tools-scope.al-page .al-pump-rib--3 { top: 70%; }

/* Hover: помпа "засвічується" */
body.dev-tools-scope.al-page .al-pump-btn:hover {
  background:
    linear-gradient(170deg,
      var(--al-x, #6e4c1e) 0%,
      var(--al-x, #4a3412) 25%,
      var(--al-x, #3a280c) 50%,
      var(--al-x, #4a3412) 75%,
      var(--al-x, #5c3e18) 100%
    ) !important;
  box-shadow:
    inset 0 2px 0 rgba(230, 190, 90, 0.60),
    inset 0 -2px 0 rgba(0, 0, 0, 0.80),
    inset 0 0 24px rgba(197, 139, 58, 0.15),
    0 0 0 1px rgba(160, 133, 53, 0.35),
    0 0 12px rgba(197, 139, 58, 0.20),
    0 1px 0 rgba(74, 50, 12, 0.85) !important;
  filter: brightness(1.08) !important;
  color: var(--text-bright) !important;
}
body.dev-tools-scope.al-page .al-pump-btn:hover .al-pump-icon {
  color: var(--text-bright) !important;
  /* text-shadow removed (canon: glow forbidden) */
  transform: rotate(20deg) !important;
}
body.dev-tools-scope.al-page .al-pump-btn:hover .al-pump-label {
  color: rgba(243, 224, 168, 0.90) !important;
}

/* Active: помпа "натискається" — физичний рух вниз */
body.dev-tools-scope.al-page .al-pump-btn:active {
  transform: translateY(2px) !important;
  filter: brightness(0.88) !important;
  box-shadow:
    inset 0 4px 8px rgba(0, 0, 0, 0.70),
    inset 0 0 18px rgba(0, 0, 0, 0.55),
    0 0 3px rgba(0, 0, 0, 0.50) !important;
}
body.dev-tools-scope.al-page .al-pump-btn:active .al-pump-icon {
  transform: rotate(360deg) !important;
  transition: transform 0.35s ease !important;
}

/* Spinning стан — іконка оберається (перекриває al-arch-keyturn з v1.0) */
body.dev-tools-scope.al-page .al-pump-btn.spinning .al-pump-icon,
body.dev-tools-scope.al-page .al-pump-btn.spinning .al-pump-icon.material-symbols-outlined {
  animation: al-pump-spin 0.80s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
  color: var(--text-bright) !important;
  transform: none !important;
}
@keyframes al-pump-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Hover на chrono-unit — м'яка рамка навколо всього приладу */
body.dev-tools-scope.al-page .al-chrono-unit:hover {
  border-color: rgba(160, 133, 53, 0.55) !important;
  border-top-color: rgba(197, 139, 58, 0.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(200, 165, 90, 0.22),
    inset 0 -2px 0 rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(80, 60, 22, 0.55),
    0 0 10px rgba(197, 139, 58, 0.14),
    0 3px 10px rgba(0, 0, 0, 0.70) !important;
}

/* Перекриття старих v1.0 стилів у .al-refresh-combo коли він .al-chrono-unit */
body.dev-tools-scope.al-page .al-chrono-unit.al-refresh-combo .al-refresh-info {
  background: none !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}
body.dev-tools-scope.al-page .al-chrono-unit .al-refresh-btn {
  width: auto !important;
  flex: 0 0 auto !important;
  flex-direction: column !important;
  font-size: 7px !important;
  letter-spacing: 0.22em !important;
  color: var(--accent-brass-hover) !important;
}

/* Анімація пульсу на dial-frame у стані auto-refresh активний */
@media (prefers-reduced-motion: no-preference) {
  body.dev-tools-scope.al-page .al-chrono-dial:has(#lockIcon) .al-dial-frame {
    animation: al-dial-pulse 4s ease-in-out infinite !important;
  }
}
@keyframes al-dial-pulse {
  0%, 100% { box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.80),
    inset 0 0 8px rgba(0, 0, 0, 0.60),
    0 0 0 1px rgba(40, 26, 10, 0.90),
    0 1px 3px rgba(0, 0, 0, 0.65),
    0 0 4px rgba(197, 139, 58, 0.06); }
  50% { box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.80),
    inset 0 0 8px rgba(0, 0, 0, 0.60),
    0 0 0 1px rgba(40, 26, 10, 0.90),
    0 1px 3px rgba(0, 0, 0, 0.65),
    0 0 9px rgba(197, 139, 58, 0.18); }
}

/* ─── End HEADER ARTIFACTS v2.0 ─── */

/* ================================================================
   HEADER ARTIFACTS v4.0 — Arrow Pointer + Gear Selector
   18 fixes: rivets, engraving, stamp, deco, tail, gradient,
   layout, tooltip, bezel ticks, size, dome btn, countdown,
   custom dropdown, dropdown placement, hint, palette, align,
   mountbar
   ================================================================ */

/* ── Keyframes v4.0 ─────────────────────────────────────────── */

/* Латунний shine sweep по стрілці */
@keyframes al-arrow-shine-sweep {
  0%   { left: -120%; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 0.7; }
  100% { left: 120%; opacity: 0; }
}

/* Amber glow pulse на стрілці при hover */
@keyframes al-arrow-glow-pulse {
  0%, 100% {
    filter: drop-shadow(0 3px 8px rgba(0,0,0,0.65))
            drop-shadow(0 0 8px rgba(230,168,72,0.4));
  }
  50% {
    filter: drop-shadow(0 3px 8px rgba(0,0,0,0.65))
            drop-shadow(0 0 16px rgba(230,168,72,0.75))
            drop-shadow(0 0 28px rgba(230,168,72,0.3));
  }
}

/* Обертання шестерні — повільне фонове */
@keyframes al-gear-slow-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Burst — швидкий спін при натисканні refresh */
@keyframes al-gear-burst {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(720deg); }
}

/* Спін іконки refresh у центрі */
@keyframes al-center-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Steam puff — хмарка пари вгору */
@keyframes al-steam-rise {
  0%   { opacity: 0; transform: translateY(0) scale(0.5); }
  30%  { opacity: 0.85; }
  100% { opacity: 0; transform: translateY(-18px) scale(1.4); }
}

/* Tick активація — amber flash (glow text-shadow forbidden by canon) */
@keyframes al-tick-activate {
  0%   { opacity: 0.55; }
  40%  { opacity: 1; }
  100% { opacity: 1; }
}

/* Hint pulse — підказка "першого разу" */
@keyframes al-gear-hint-pulse {
  0%   { opacity: 0; transform: scale(0.97); }
  30%  { opacity: 1; transform: scale(1); }
  70%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.97); }
}

/* Stamp spin на hover стрілки */
@keyframes al-stamp-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Dropdown slideIn */
@keyframes al-dropdown-in {
  0%   { opacity: 0; transform: translateY(-6px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── BACK ARROW v4.0 ─────────────────────────────────────────── */
/* УВАГА: правила нижче (до рядка ~9742) superseded by STEAMPUNK REDESIGN v2 наприкінці файлу */

/* Wrapper */
/* BACK-PANEL — дзеркало al-clock-panel, прив'язка до лівого краю контент-колонки */
body.dev-tools-scope.al-page .al-back-panel {
  position: fixed !important;
  top: calc(var(--header-h, 96px) / 2) !important;
  transform: translateY(-50%) !important;
  left: max(20px, calc((100vw - var(--max-width, 1400px)) / 2 + 20px)) !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 100 !important;
  pointer-events: auto !important;
  /* back-wrap ліворуч (col 1), refresh-sidecol праворуч (col 2) — дзеркало al-clock-panel */
  display: grid !important;
  grid-template-columns: auto auto !important;
  grid-template-rows: auto !important;
  column-gap: 20px !important;
  row-gap: 0 !important;
  align-items: center !important;
}
body.dev-tools-scope.al-page .al-back-panel > .al-arrow-wrap {
  grid-column: 1 / 2 !important;
  grid-row: 1 / 2 !important;
  display: flex !important;
  align-items: center !important;
  pointer-events: auto !important;
}
body.dev-tools-scope.al-page .al-back-panel > .al-refresh-cluster {
  grid-column: 2 / 3 !important;
  grid-row: 1 / 2 !important;
  pointer-events: auto !important;
}

/* Сама стрілка — вістря ліворуч, виразний хвіст праворуч */
body.dev-tools-scope.al-page .al-arrow-btn {
  /* Форма: ромб-стрілка: вістря ліво, хвіст-засічка право */
  clip-path: polygon(
    0% 50%,
    22px 0%,
    calc(100% - 18px) 0%,
    100% 50%,
    calc(100% - 18px) 100%,
    22px 100%
  ) !important;

  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 178px !important;
  height: 46px !important;
  padding: 0 24px 0 32px !important;
  text-decoration: none !important;
  overflow: visible !important;
  cursor: pointer !important;

  /* Плавний 9-stop латунний градієнт — без смуг */
  background: linear-gradient(
    160deg,
    var(--text-bright) 0%,
    var(--accent-brass-hover) 12%,
    var(--accent-brass-hover) 25%,
    var(--accent-brass) 42%,
    var(--al-x, #b8823a) 55%,
    var(--accent-brass-dim) 68%,
    var(--al-x, #8c6e35) 80%,
    var(--accent-brass-dim) 92%,
    var(--al-x, #5a3a18) 100%
  ) !important;

  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.65))
          drop-shadow(0 1px 2px rgba(0,0,0,0.9)) !important;
  transition: filter 0.25s ease, transform 0.15s ease !important;
}

/* Highlight-штрих верхньої грані */
body.dev-tools-scope.al-page .al-arrow-btn::before {
  content: '' !important;
  position: absolute !important;
  top: 1px !important;
  left: 24px !important;
  right: 20px !important;
  height: 2px !important;
  background: linear-gradient(90deg,
    transparent,
    rgba(243,224,168,0.75) 25%,
    rgba(255,240,200,0.95) 52%,
    rgba(243,224,168,0.75) 78%,
    transparent
  ) !important;
  pointer-events: none !important;
  z-index: 2 !important;
  box-shadow: 0 0 6px rgba(243,224,168,0.35) !important;
}

/* Внутрішня тінь — глибина корпусу */
body.dev-tools-scope.al-page .al-arrow-btn::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(180deg,
      transparent 0%,
      transparent 52%,
      rgba(0,0,0,0.2) 75%,
      rgba(0,0,0,0.4) 100%
    ),
    linear-gradient(175deg,
      rgba(255,240,200,0.1) 0%,
      transparent 32%,
      transparent 68%,
      rgba(0,0,0,0.08) 100%
    ) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* ── Заклепки: 4 симетрично по діагоналі ── */
body.dev-tools-scope.al-page .al-arrow-rivet {
  position: absolute !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 30%,
    var(--al-x, #f5eca0) 0%,
    var(--accent-brass) 40%,
    var(--accent-brass-dim) 70%,
    var(--bg-elevated) 100%
  ) !important;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.8),
    0 0 0 0.5px rgba(0,0,0,0.9),
    inset 0 1px 0 rgba(255,255,255,0.25) !important;
  z-index: 4 !important;
  pointer-events: none !important;
}
/* Top-left: біля вістря зверху */
body.dev-tools-scope.al-page .al-arrow-rivet--tl {
  top: 9px !important;
  left: 30px !important;
}
/* Bottom-left: біля вістря знизу */
body.dev-tools-scope.al-page .al-arrow-rivet--bl {
  bottom: 9px !important;
  left: 30px !important;
}
/* Top-right: біля хвоста зверху */
body.dev-tools-scope.al-page .al-arrow-rivet--tr {
  top: 9px !important;
  right: 26px !important;
}
/* Bottom-right: біля хвоста знизу */
body.dev-tools-scope.al-page .al-arrow-rivet--br {
  bottom: 9px !important;
  right: 26px !important;
}

/* ── Обгортка тексту ── */
body.dev-tools-scope.al-page .al-arrow-textwrap {
  position: relative !important;
  z-index: 5 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  pointer-events: none !important;
}

/* SVG-шестерня stamp (6 зубів, 18px) */
body.dev-tools-scope.al-page .al-arrow-stamp {
  width: 18px !important;
  height: 18px !important;
  color: var(--border-dim) !important;
  opacity: 0.85 !important;
  flex-shrink: 0 !important;
  filter:
    drop-shadow(0 1px 0 rgba(243,224,168,0.55))
    drop-shadow(0 -0.5px 0 rgba(0,0,0,0.65)) !important;
  transition: color 0.25s ease, opacity 0.25s ease, filter 0.25s ease !important;
}

/* Двошаровий brass engraved напис */
body.dev-tools-scope.al-page .al-arrow-label {
  position: relative !important;
  z-index: 5 !important;
  font-family: 'Cinzel', serif !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.17em !important;
  /* background-clip: text для ефекту полірованої гравюри */
  background: linear-gradient(180deg,
    var(--bg-elevated) 0%,
    var(--border-bright) 45%,
    var(--bg-elevated) 100%
  ) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  /* Карбований ефект через text-shadow (::before trick не потрібен) */
  filter:
    drop-shadow(0 1px 0 rgba(255,240,200,0.5))
    drop-shadow(0 -1px 0 rgba(0,0,0,0.85))
    drop-shadow(0 0 2px rgba(0,0,0,0.4)) !important;
  pointer-events: none !important;
  user-select: none !important;
}

/* Deco — подвійна стрілка ⟨⟨ після напису */
body.dev-tools-scope.al-page .al-arrow-deco {
  position: relative !important;
  z-index: 5 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -3px !important;
  /* Теж engraved brass */
  background: linear-gradient(180deg, var(--border-dim) 0%, var(--accent-brass) 50%, var(--border-dim) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  filter: drop-shadow(0 1px 0 rgba(255,240,200,0.4)) drop-shadow(0 -1px 0 rgba(0,0,0,0.7)) !important;
  pointer-events: none !important;
  user-select: none !important;
  margin-left: -2px !important;
}

/* Shine-sweep overlay */
body.dev-tools-scope.al-page .al-arrow-shine {
  position: absolute !important;
  top: 0 !important;
  left: -120% !important;
  width: 60% !important;
  height: 100% !important;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(243,224,168,0.0) 30%,
    rgba(243,224,168,0.45) 50%,
    rgba(243,224,168,0.0) 70%,
    transparent 100%
  ) !important;
  pointer-events: none !important;
  z-index: 6 !important;
  opacity: 0 !important;
}

/* ── Custom tooltip ── */
body.dev-tools-scope.al-page .al-arrow-tooltip {
  position: absolute !important;
  bottom: calc(100% + 8px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  white-space: nowrap !important;
  background: var(--bg-void) !important;
  border: 1px solid var(--border-metal) !important;
  border-top: 2px solid var(--accent-brass) !important;
  color: var(--accent-brass) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 9.5px !important;
  letter-spacing: 1.5px !important;
  padding: 4px 10px !important;
  border-radius: 2px !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transition: opacity 0.2s ease !important;
  z-index: 100 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.7) !important;
}
body.dev-tools-scope.al-page .al-arrow-btn:hover .al-arrow-tooltip {
  opacity: 1 !important;
}

/* ── Hover стрілки ── */
body.dev-tools-scope.al-page .al-arrow-btn:hover {
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.65))
          drop-shadow(0 0 12px rgba(230,168,72,0.55))
          drop-shadow(0 0 24px rgba(230,168,72,0.25)) !important;
  transform: translateX(-2px) !important;
  animation: al-arrow-glow-pulse 1.8s ease-in-out infinite !important;
}
body.dev-tools-scope.al-page .al-arrow-btn:hover .al-arrow-shine {
  animation: al-arrow-shine-sweep 1.1s ease-out forwards !important;
}
body.dev-tools-scope.al-page .al-arrow-btn:hover .al-arrow-stamp {
  color: var(--bg-void) !important;
  opacity: 1 !important;
  animation: al-stamp-spin 4s linear infinite !important;
}

/* ── Active стрілки ── */
body.dev-tools-scope.al-page .al-arrow-btn:active {
  transform: translateX(-4px) !important;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.8))
          drop-shadow(0 0 6px rgba(230,168,72,0.3)) !important;
  animation: none !important;
}

/* ── MOUNT-BAR: brass pipe між стрілкою і шестернею ── */
body.dev-tools-scope.al-page .al-header-mountbar {
  position: relative !important;
  flex: 0 0 auto !important;
  width: 36px !important;
  height: 14px !important;
  background: linear-gradient(180deg,
    var(--accent-brass-hover) 0%,
    var(--accent-brass-dim) 50%,
    var(--accent-brass-dim) 100%
  ) !important;
  border-top: 1px solid var(--text-bright) !important;
  border-bottom: 1px solid var(--bg-elevated) !important;
  box-shadow:
    inset 0 1px 0 rgba(243,224,168,0.45),
    inset 0 -1px 0 rgba(0,0,0,0.5),
    0 0 4px rgba(0,0,0,0.5) !important;
  border-radius: 1px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 6px !important;
  pointer-events: none !important;
}
body.dev-tools-scope.al-page .al-mountbar-rivet {
  display: block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 30%,
    var(--al-x, #f5eca0) 0%,
    var(--accent-brass) 40%,
    var(--accent-brass-dim) 70%,
    var(--bg-elevated) 100%
  ) !important;
  box-shadow:
    0 1px 1px rgba(0,0,0,0.8),
    0 0 0 0.5px rgba(0,0,0,0.9),
    inset 0 0.5px 0 rgba(255,255,255,0.2) !important;
}

/* ── REFRESH GEAR v4.0 ─────────────────────────────────────── */
/* УВАГА: правила нижче (al-gear-body, al-gear-svg, al-gear-ticks...) superseded by STEAMPUNK REDESIGN v2 наприкінці файлу */

/* Головний контейнер шестерні */
body.dev-tools-scope.al-page .al-gear-unit {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Тіло шестерні — 72px (збільшено, компроміс видимості/вирівнювання) */
body.dev-tools-scope.al-page .al-gear-body {
  position: relative !important;
  width: 72px !important;
  height: 72px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 0 !important;
  cursor: pointer !important;
}

/* SVG шестерні */
body.dev-tools-scope.al-page .al-gear-svg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  filter:
    drop-shadow(0 2px 6px rgba(0,0,0,0.8))
    drop-shadow(0 0 8px rgba(197,139,58,0.2)) !important;
  transition: filter 0.3s ease !important;
}

/* Обертання коли не ручний режим */
body.dev-tools-scope.al-page .al-gear-body:not(.is-manual) .al-gear-svg {
  animation: al-gear-slow-spin 20s linear infinite !important;
}

/* Burst */
body.dev-tools-scope.al-page .al-gear-body.burst .al-gear-svg {
  animation: al-gear-burst 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Hover */
body.dev-tools-scope.al-page .al-gear-body:hover .al-gear-svg {
  filter:
    drop-shadow(0 2px 6px rgba(0,0,0,0.8))
    drop-shadow(0 0 18px rgba(230,168,72,0.6))
    drop-shadow(0 0 32px rgba(197,139,58,0.3)) !important;
}

/* ── Текстові мітки на bezeli ── */
body.dev-tools-scope.al-page .al-gear-ticks {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 3 !important;
}

body.dev-tools-scope.al-page .al-gear-tick {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 24px !important;
  height: 13px !important;
  margin-top: -6.4px !important;
  margin-left: -12px !important;

  /* translateY(-29px) — радіус безелю (між r=28 і r=36) */
  transform:
    rotate(var(--tick-angle))
    translateY(-29px)
    rotate(calc(-1 * var(--tick-angle))) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-family: 'Cinzel', 'Special Elite', monospace !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  line-height: 1 !important;
  white-space: nowrap !important;

  /* На темному bezeli — amber видно добре */
  color: var(--border-bright) !important;
  opacity: 0.9 !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,0.6),
    0 -0.5px 0 rgba(232,200,140,0.2) !important;
  transition: color 0.3s ease, opacity 0.3s ease, text-shadow 0.3s ease !important;
  pointer-events: none !important;
  user-select: none !important;
}

/* Активна мітка — яскравий amber на темному bezeli */
body.dev-tools-scope.al-page .al-gear-tick.is-active {
  color: var(--accent-brass-hover) !important;
  opacity: 1 !important;
  /* text-shadow removed (canon: glow forbidden) */
  animation: al-tick-activate 0.5s ease forwards !important;
}

/* ── Центральна кнопка — мідний КУПОЛ (convex) ── */
body.dev-tools-scope.al-page .al-gear-center-btn {
  position: relative !important;
  z-index: 5 !important;
  width: 35px !important;
  height: 35px !important;
  border-radius: 50% !important;
  border: 1.5px solid var(--bg-elevated) !important;
  cursor: pointer !important;

  /* Мідний купол — radialGradient з highlight зверху-ліво */
  background: radial-gradient(circle at 38% 30%,
    var(--text-bright) 0%,
    var(--accent-brass-hover) 30%,
    var(--accent-brass-dim) 65%,
    var(--al-x, #5a3a18) 100%
  ) !important;
  box-shadow:
    inset 0 1px 0 rgba(243,224,168,0.55),
    inset 0 -2px 0 rgba(0,0,0,0.55),
    0 2px 5px rgba(0,0,0,0.65),
    0 0 0 1px rgba(0,0,0,0.5) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: box-shadow 0.15s ease, background 0.15s ease !important;
  outline: none !important;
}

/* Іконка refresh — світла і чітка */
body.dev-tools-scope.al-page .al-gear-refresh-icon {
  font-size: 18px !important;
  color: var(--text-bright) !important;
  line-height: 1 !important;
  filter:
    drop-shadow(0 1px 0 rgba(0,0,0,0.7))
    drop-shadow(0 0 5px rgba(230,168,72,0.45)) !important;
  transition: color 0.2s ease, filter 0.2s ease !important;
}

/* Hover купола */
body.dev-tools-scope.al-page .al-gear-center-btn:hover {
  background: radial-gradient(circle at 38% 30%,
    var(--al-x, #fff8e0) 0%,
    var(--accent-brass-hover) 30%,
    var(--al-x, #b8823a) 65%,
    var(--accent-brass-dim) 100%
  ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,248,224,0.65),
    inset 0 -2px 0 rgba(0,0,0,0.5),
    0 3px 8px rgba(0,0,0,0.7),
    0 0 12px rgba(230,168,72,0.4),
    0 0 0 1.5px rgba(100,70,30,0.6) !important;
}
body.dev-tools-scope.al-page .al-gear-center-btn:hover .al-gear-refresh-icon {
  color: var(--text-bright) !important;
  filter:
    drop-shadow(0 1px 0 rgba(0,0,0,0.8))
    drop-shadow(0 0 8px rgba(255,248,224,0.6)) !important;
}

/* Active — купол "провалюється" */
body.dev-tools-scope.al-page .al-gear-center-btn:active {
  background: radial-gradient(circle at 50% 60%,
    var(--al-x, #3a2a12) 0%,
    var(--al-x, #1a1008) 60%,
    var(--bg-void) 100%
  ) !important;
  box-shadow:
    inset 0 4px 10px rgba(0,0,0,0.95),
    inset 0 2px 5px rgba(0,0,0,0.9),
    0 0 0 1.5px rgba(0,0,0,0.8) !important;
}

/* Spinning state */
body.dev-tools-scope.al-page .al-gear-center-btn.spinning .al-gear-refresh-icon {
  animation: al-center-spin 0.65s linear infinite !important;
  color: var(--text-bright) !important;
}

/* Steam puff */
body.dev-tools-scope.al-page .al-steam-puff {
  position: absolute !important;
  top: -6px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(243,224,168,0.7) 0%, transparent 70%) !important;
  pointer-events: none !important;
  opacity: 0 !important;
  z-index: 10 !important;
}
body.dev-tools-scope.al-page .al-steam-puff.active {
  animation: al-steam-rise 0.7s ease-out forwards !important;
}

/* Countdown — nixie-табло під шестернею */
body.dev-tools-scope.al-page .al-gear-countdown {
  position: absolute !important;
  bottom: -18px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--accent-brass-hover) !important;
  background: var(--al-x, #0a0604) !important;
  border: 0.5px solid var(--al-x, #241810) !important;
  border-radius: 2px !important;
  padding: 1px 4px !important;
  line-height: 1.4 !important;
  letter-spacing: 0.05em !important;
  white-space: nowrap !important;
  /* text-shadow removed (canon: glow forbidden) */
  min-width: 22px !important;
  text-align: center !important;
  z-index: 6 !important;
  pointer-events: none !important;
  /* Приховати якщо порожній */
  display: block !important;
}
body.dev-tools-scope.al-page .al-gear-countdown:empty {
  display: none !important;
}

/* Підказка "першого разу" */
body.dev-tools-scope.al-page .al-gear-hint-text {
  position: absolute !important;
  bottom: -30px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 5.5px !important;
  letter-spacing: 2px !important;
  color: var(--border-bright) !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 6 !important;
  transition: opacity 0.5s ease !important;
}
body.dev-tools-scope.al-page .al-gear-unit.hint-active .al-gear-hint-text {
  animation: al-gear-hint-pulse 3s ease-in-out 2 !important;
}
body.dev-tools-scope.al-page .al-gear-unit.hint-done .al-gear-hint-text {
  display: none !important;
}

/* Select — прихований для a11y */
body.dev-tools-scope.al-page .al-gear-select-overlay {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
  overflow: hidden !important;
}

/* ── Custom dropdown popup ── */
body.dev-tools-scope.al-page .al-gear-dropdown {
  position: absolute !important;
  /* Зліва від шестерні, вертикально центрований */
  right: calc(100% + 8px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 50 !important;
  background: var(--bg-void) !important;
  border: 1px solid var(--border-metal) !important;
  border-top: 2px solid var(--accent-brass) !important;
  border-radius: 3px !important;
  box-shadow:
    0 8px 24px rgba(0,0,0,0.8),
    0 0 0 1px rgba(92,68,48,0.5),
    inset 0 1px 0 rgba(232,200,140,0.1) !important;
  min-width: 90px !important;
  overflow: hidden !important;
  animation: al-dropdown-in 0.18s ease-out !important;
}
body.dev-tools-scope.al-page .al-gear-dropdown[hidden] {
  display: none !important;
}
body.dev-tools-scope.al-page .al-gear-dropdown-header {
  font-family: 'Cinzel', serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  color: var(--accent-ember) !important;
  /* text-shadow removed (canon: glow forbidden) */
  padding: 6px 12px 4px !important;
  text-align: center !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid rgba(197,139,58,0.4) !important;
  user-select: none !important;
  background: linear-gradient(180deg, rgba(197,139,58,0.08), transparent) !important;
}
body.dev-tools-scope.al-page .al-gear-dropdown-opt {
  display: block !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(92,68,48,0.3) !important;
  color: var(--accent-brass-dim) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  padding: 8px 12px !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  outline: none !important;
}
body.dev-tools-scope.al-page .al-gear-dropdown-opt:last-child {
  border-bottom: none !important;
}
body.dev-tools-scope.al-page .al-gear-dropdown-opt:hover,
body.dev-tools-scope.al-page .al-gear-dropdown-opt:focus {
  background: rgba(197,139,58,0.15) !important;
  color: var(--text-bright) !important;
  /* text-shadow removed (canon: glow forbidden) */
}
body.dev-tools-scope.al-page .al-gear-dropdown-opt.is-selected {
  color: var(--accent-brass-hover) !important;
  background: rgba(197,139,58,0.1) !important;
}

/* ── Ліва кластер-група — align-items: center, gap між стрілкою і gear ── */
body.dev-tools-scope.al-page .al-header-left-cluster {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 32px !important;
}

/* ─── End HEADER ARTIFACTS v4.0 ─── */

/* === 🎨 STEAMPUNK REDESIGN v2 (back-arrow swallowtail + gear-capsule 52px) === */

/* ── BACK-BUTTON v5: Banner-Swallowtail ── */
/* superseded v4 clip-path (ромб) → swallowtail (прапор з V-хвостом) */

body.dev-tools-scope.al-page .al-arrow-btn {
  /* Форма swallowtail: гострий наконечник ліво + плиткий V-розріз хвоста право */
  clip-path: polygon(
    0% 50%,
    16% 0%,
    100% 0%,
    92% 50%,
    100% 100%,
    16% 100%
  ) !important;

  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 186px !important;
  height: 50px !important;
  padding: 0 28px 0 40px !important;
  gap: 0 !important;
  text-decoration: none !important;
  overflow: visible !important;
  cursor: pointer !important;

  /* 9-stop латунний градієнт під кутом 160° */
  background: linear-gradient(
    160deg,
    var(--text-bright) 0%,
    var(--accent-brass-hover) 10%,
    var(--accent-brass-hover) 22%,
    var(--accent-brass) 38%,
    var(--al-x, #b8823a) 50%,
    var(--accent-brass-dim) 63%,
    var(--al-x, #8c6e35) 74%,
    var(--accent-brass-dim) 88%,
    var(--al-x, #5a3a18) 100%
  ) !important;

  filter: drop-shadow(0 3px 10px rgba(0,0,0,0.7))
          drop-shadow(0 1px 2px rgba(0,0,0,0.95)) !important;
  transition: filter 0.3s ease, transform 0.15s ease !important;
}

/* Highlight-штрих верхньої грані */
body.dev-tools-scope.al-page .al-arrow-btn::before {
  content: '' !important;
  position: absolute !important;
  top: 1.5px !important;
  left: 36px !important;
  right: 28px !important;
  height: 1.5px !important;
  background: linear-gradient(90deg,
    transparent,
    rgba(243,224,168,0.65) 20%,
    rgba(255,240,200,0.9) 50%,
    rgba(243,224,168,0.65) 80%,
    transparent
  ) !important;
  pointer-events: none !important;
  z-index: 2 !important;
  box-shadow: 0 0 5px rgba(243,224,168,0.3) !important;
}

/* Внутрішня глибина */
body.dev-tools-scope.al-page .al-arrow-btn::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(180deg,
      transparent 0%,
      transparent 50%,
      rgba(0,0,0,0.18) 78%,
      rgba(0,0,0,0.38) 100%
    ),
    linear-gradient(175deg,
      rgba(255,240,200,0.08) 0%,
      transparent 30%,
      transparent 70%,
      rgba(0,0,0,0.06) 100%
    ) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* ── Велика шестерня на лівому вістрі (30px) ── */
body.dev-tools-scope.al-page .al-arrow-gear-tip {
  position: absolute !important;
  left: 5px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 6 !important;
  pointer-events: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  filter:
    drop-shadow(0 1px 3px rgba(0,0,0,0.8))
    drop-shadow(0 0 4px rgba(197,139,58,0.5)) !important;
  transition: filter 0.3s ease !important;
}

/* Spin on hover — повільне обертання 30s */
body.dev-tools-scope.al-page .al-arrow-btn:hover .al-arrow-gear-tip svg {
  animation: al-arrow-tip-spin 30s linear infinite !important;
  transform-origin: center center !important;
}
body.dev-tools-scope.al-page .al-arrow-btn:hover .al-arrow-gear-tip {
  filter:
    drop-shadow(0 1px 3px rgba(0,0,0,0.8))
    drop-shadow(0 0 8px rgba(227,111,61,0.65))
    drop-shadow(0 0 16px rgba(197,139,58,0.35)) !important;
}

/* ── Середня декоративна шестерня між текстом і хвостом ── */
body.dev-tools-scope.al-page .al-arrow-gear-mid {
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  margin-left: 4px !important;
  opacity: 0.6 !important;
  pointer-events: none !important;
  filter: drop-shadow(0 0.5px 1px rgba(0,0,0,0.7)) !important;
}

/* ── Дрібна шестерня-декор на хвості (16px, counter-spin) ── */
body.dev-tools-scope.al-page .al-arrow-gear-tail {
  position: absolute !important;
  right: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 6 !important;
  pointer-events: none !important;
  opacity: 0.85 !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.7))
          drop-shadow(0 0 3px rgba(197,139,58,0.2)) !important;
  transition: opacity 0.25s ease, filter 0.25s ease !important;
}
body.dev-tools-scope.al-page .al-arrow-btn:hover .al-arrow-gear-tail {
  opacity: 1 !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.7))
          drop-shadow(0 0 7px rgba(227,111,61,0.5)) !important;
  animation: al-arrow-tail-counterspin 45s linear infinite !important;
}

/* ── Hex-гайки (замінюють round rivets) ── */
body.dev-tools-scope.al-page .al-arrow-rivet {
  position: absolute !important;
  width: 10px !important;
  height: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 4 !important;
  pointer-events: none !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.85)) !important;
}
/* Top-left */
body.dev-tools-scope.al-page .al-arrow-rivet--tl {
  top: 8px !important;
  left: 36px !important;
}
/* Bottom-left */
body.dev-tools-scope.al-page .al-arrow-rivet--bl {
  bottom: 8px !important;
  left: 36px !important;
}
/* Top-right */
body.dev-tools-scope.al-page .al-arrow-rivet--tr {
  top: 8px !important;
  right: 30px !important;
}
/* Bottom-right */
body.dev-tools-scope.al-page .al-arrow-rivet--br {
  bottom: 8px !important;
  right: 30px !important;
}

/* ── Обгортка тексту ── */
body.dev-tools-scope.al-page .al-arrow-textwrap {
  position: relative !important;
  z-index: 5 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  pointer-events: none !important;
  /* Відступ від лівої шестерні (30px tip) */
  margin-left: 18px !important;
}

/* DEV TOOLS — engraved латунна гравюра */
body.dev-tools-scope.al-page .al-arrow-label {
  position: relative !important;
  z-index: 5 !important;
  font-family: 'Cinzel', serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;

  /* Полірована гравюра — темний текст зі світлим highlights */
  background: linear-gradient(180deg,
    var(--bg-elevated) 0%,
    var(--accent-brass-dim) 40%,
    var(--bg-elevated) 100%
  ) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  filter:
    drop-shadow(0 1.5px 0 rgba(255,240,200,0.55))
    drop-shadow(0 -1px 0 rgba(0,0,0,0.9))
    drop-shadow(0 0 3px rgba(0,0,0,0.4)) !important;

  pointer-events: none !important;
  user-select: none !important;
  transition: filter 0.25s ease !important;
}

/* Hover/focus тексту — темний на латуні (класичний Steampunk, максимальний контраст) */
body.dev-tools-scope.al-page .al-arrow-btn:hover .al-arrow-label,
body.dev-tools-scope.al-page .al-arrow-btn:focus-visible .al-arrow-label {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: var(--bg-void) !important;
  color: var(--bg-void) !important;
  filter:
    drop-shadow(0 1px 0 rgba(255,243,200,0.9))
    drop-shadow(0 -0.5px 0 rgba(0,0,0,0.3)) !important;
}

/* Shine-sweep overlay */
body.dev-tools-scope.al-page .al-arrow-shine {
  position: absolute !important;
  top: 0 !important;
  left: -120% !important;
  width: 55% !important;
  height: 100% !important;
  background: linear-gradient(
    110deg,
    transparent 0%,
    rgba(243,224,168,0.0) 35%,
    rgba(243,224,168,0.4) 50%,
    rgba(243,224,168,0.0) 65%,
    transparent 100%
  ) !important;
  pointer-events: none !important;
  z-index: 6 !important;
  opacity: 0 !important;
}

/* ── Custom tooltip ── */
body.dev-tools-scope.al-page .al-arrow-tooltip {
  position: absolute !important;
  bottom: calc(100% + 8px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  white-space: nowrap !important;
  background: var(--bg-base) !important;
  border: 1px solid var(--border-metal) !important;
  border-top: 2px solid var(--accent-brass) !important;
  color: var(--accent-brass) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 9.5px !important;
  letter-spacing: 1.5px !important;
  padding: 4px 10px !important;
  border-radius: 2px !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transition: opacity 0.2s ease !important;
  z-index: 100 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.75) !important;
}
body.dev-tools-scope.al-page .al-arrow-btn:hover .al-arrow-tooltip {
  opacity: 1 !important;
}

/* ── Hover стрілки ── */
body.dev-tools-scope.al-page .al-arrow-btn:hover {
  filter: drop-shadow(0 3px 10px rgba(0,0,0,0.7))
          drop-shadow(0 0 14px rgba(227,111,61,0.5))
          drop-shadow(0 0 28px rgba(227,111,61,0.2)) !important;
  transform: translateX(-3px) !important;
  animation: al-arrow-glow-pulse-v2 2s ease-in-out infinite !important;
}
body.dev-tools-scope.al-page .al-arrow-btn:hover .al-arrow-shine {
  animation: al-arrow-shine-sweep 1.1s ease-out forwards !important;
}
body.dev-tools-scope.al-page .al-arrow-btn:hover .al-arrow-gear-tip {
  filter:
    drop-shadow(0 1px 2px rgba(0,0,0,0.7))
    drop-shadow(0 0 10px rgba(227,111,61,0.5)) !important;
}

/* ── Active ── */
body.dev-tools-scope.al-page .al-arrow-btn:active {
  transform: translateX(-5px) !important;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.85))
          drop-shadow(0 0 6px rgba(197,139,58,0.3)) !important;
  animation: none !important;
}

/* ── Мікро-підпис "INTERVAL" над шестернею ── */
body.dev-tools-scope.al-page .al-gear-label-top {
  display: block !important;
  text-align: center !important;
  font-family: 'Cinzel', serif !important;
  font-size: 6px !important;
  letter-spacing: 2.5px !important;
  color: var(--log-debug) !important;
  margin-bottom: 3px !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  user-select: none !important;
  text-transform: uppercase !important;
}

/* ── GEAR CAPSULE v5: 52×52px компактний ── */
/* superseded v4 gear-body 72×72 */

body.dev-tools-scope.al-page .al-gear-body {
  position: relative !important;
  width: 52px !important;
  height: 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 0 !important;
  cursor: pointer !important;
  overflow: visible !important;
  /* Прибираємо квадратний фон/рамку */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Також прибираємо фон у обгортці .al-gear-unit */
body.dev-tools-scope.al-page .al-refresh-combo.al-gear-unit {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* SVG шестерні — новий viewBox 60×60 */
body.dev-tools-scope.al-page .al-gear-svg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  overflow: visible !important;
  filter:
    drop-shadow(0 2px 5px rgba(0,0,0,0.8))
    drop-shadow(0 0 6px rgba(197,139,58,0.15)) !important;
  transition: filter 0.3s ease !important;
}

/* DOM-тіки — приховані від вигляду, збережені для JS */
body.dev-tools-scope.al-page .al-gear-ticks {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 3 !important;
  visibility: hidden !important;
}
body.dev-tools-scope.al-page .al-gear-tick {
  position: absolute !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* SVG-насічки на bezeli — ВИДИМІ, активна підсвічується ember */
body.dev-tools-scope.al-page .al-gear-body .al-svg-tick {
  transition: stroke 0.3s ease, opacity 0.3s ease !important;
  /* Базова насічка — видима мідна риска */
  stroke: var(--accent-brass-dim) !important;
  opacity: 1 !important;
}
/* Активна насічка (додається JS-класом або data-атрибутом) */
body.dev-tools-scope.al-page .al-gear-body .al-svg-tick.is-active,
body.dev-tools-scope.al-page .al-gear-body .al-svg-tick[data-active="true"] {
  stroke: var(--accent-ember) !important;
  /* filter drop-shadow glow removed (canon) */
}

/* Центральна кнопка — 32×32 всередині 52×52 */
body.dev-tools-scope.al-page .al-gear-center-btn {
  position: relative !important;
  z-index: 5 !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: 1.5px solid var(--bg-elevated) !important;
  cursor: pointer !important;

  background: radial-gradient(circle at 38% 30%,
    var(--text-bright) 0%,
    var(--accent-brass-hover) 30%,
    var(--accent-brass-dim) 65%,
    var(--al-x, #5a3a18) 100%
  ) !important;
  box-shadow:
    inset 0 1px 0 rgba(243,224,168,0.55),
    inset 0 -2px 0 rgba(0,0,0,0.55),
    0 2px 5px rgba(0,0,0,0.65),
    0 0 0 1px rgba(0,0,0,0.5) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: box-shadow 0.15s ease, background 0.15s ease !important;
  outline: none !important;
}

/* Іконка refresh у компактному куполі — ember-колір, виразна */
body.dev-tools-scope.al-page .al-gear-refresh-icon {
  font-size: 18px !important;
  color: var(--accent-ember) !important;
  line-height: 1 !important;
  filter:
    drop-shadow(0 1px 0 rgba(0,0,0,0.8))
    drop-shadow(0 0 6px rgba(227,111,61,0.6)) !important;
  transition: color 0.2s ease, filter 0.2s ease !important;
}

/* Hover купола */
body.dev-tools-scope.al-page .al-gear-center-btn:hover {
  background: radial-gradient(circle at 38% 30%,
    var(--al-x, #fff8e0) 0%,
    var(--accent-brass-hover) 30%,
    var(--al-x, #b8823a) 65%,
    var(--accent-brass-dim) 100%
  ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,248,224,0.65),
    inset 0 -2px 0 rgba(0,0,0,0.5),
    0 3px 8px rgba(0,0,0,0.7),
    0 0 12px rgba(227,111,61,0.45),
    0 0 0 1.5px rgba(100,70,30,0.6) !important;
}
body.dev-tools-scope.al-page .al-gear-center-btn:hover .al-gear-refresh-icon {
  color: var(--text-bright) !important;
  filter:
    drop-shadow(0 1px 0 rgba(0,0,0,0.8))
    drop-shadow(0 0 7px rgba(255,248,224,0.6)) !important;
}

/* Active — купол "провалюється" */
body.dev-tools-scope.al-page .al-gear-center-btn:active {
  background: radial-gradient(circle at 50% 60%,
    var(--al-x, #3a2a12) 0%,
    var(--al-x, #1a1008) 60%,
    var(--bg-void) 100%
  ) !important;
  box-shadow:
    inset 0 4px 10px rgba(0,0,0,0.95),
    inset 0 2px 5px rgba(0,0,0,0.9),
    0 0 0 1.5px rgba(0,0,0,0.8) !important;
}

/* Spinning state */
body.dev-tools-scope.al-page .al-gear-center-btn.spinning .al-gear-refresh-icon {
  animation: al-center-spin 0.65s linear infinite !important;
  color: var(--text-bright) !important;
}

/* Hover SVG шестерні — ember glow */
body.dev-tools-scope.al-page .al-gear-body:hover .al-gear-svg {
  filter:
    drop-shadow(0 2px 5px rgba(0,0,0,0.8))
    drop-shadow(0 0 14px rgba(227,111,61,0.55))
    drop-shadow(0 0 26px rgba(197,139,58,0.25)) !important;
}

/* Обертання — авто-режим */
body.dev-tools-scope.al-page .al-gear-body:not(.is-manual) .al-gear-svg {
  animation: al-gear-slow-spin 20s linear infinite !important;
}

/* Burst */
body.dev-tools-scope.al-page .al-gear-body.burst .al-gear-svg {
  animation: al-gear-burst 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Countdown — ember-свічення нижче шестерні (збільшений, виразний) */
body.dev-tools-scope.al-page .al-gear-countdown {
  position: absolute !important;
  bottom: -18px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--accent-ember) !important;
  background: var(--al-x, #0a0604) !important;
  border: 1px solid var(--al-x, #3a2010) !important;
  border-top: 1px solid var(--al-x, #5c3018) !important;
  border-radius: 2px !important;
  padding: 2px 4px !important;
  line-height: 1.3 !important;
  letter-spacing: 0.08em !important;
  white-space: nowrap !important;
  /* text-shadow removed (canon: glow forbidden) */
  min-width: 24px !important;
  text-align: center !important;
  z-index: 6 !important;
  pointer-events: none !important;
  display: block !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.03) !important;
}
body.dev-tools-scope.al-page .al-gear-countdown:empty {
  display: none !important;
}

/* Hint-text */
body.dev-tools-scope.al-page .al-gear-hint-text {
  position: absolute !important;
  bottom: -28px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 5px !important;
  letter-spacing: 2px !important;
  color: var(--log-debug) !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 6 !important;
  transition: opacity 0.5s ease !important;
}
body.dev-tools-scope.al-page .al-gear-unit.hint-active .al-gear-hint-text {
  animation: al-gear-hint-pulse 3s ease-in-out 2 !important;
}
body.dev-tools-scope.al-page .al-gear-unit.hint-done .al-gear-hint-text {
  display: none !important;
}

/* Steam puff */
body.dev-tools-scope.al-page .al-steam-puff {
  position: absolute !important;
  top: -6px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(243,224,168,0.7) 0%, transparent 70%) !important;
  pointer-events: none !important;
  opacity: 0 !important;
  z-index: 10 !important;
}
body.dev-tools-scope.al-page .al-steam-puff.active {
  animation: al-steam-rise 0.7s ease-out forwards !important;
}

/* Select — прихований для a11y */
body.dev-tools-scope.al-page .al-gear-select-overlay {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
  overflow: hidden !important;
}

/* ── Нові @keyframes для v2 ── */

/* Tip-gear spin при hover (повільний 30s) */
@keyframes al-arrow-tip-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Ember glow pulse для swallowtail */
@keyframes al-arrow-glow-pulse-v2 {
  0%, 100% {
    filter: drop-shadow(0 3px 10px rgba(0,0,0,0.7))
            drop-shadow(0 0 10px rgba(227,111,61,0.4));
  }
  50% {
    filter: drop-shadow(0 3px 10px rgba(0,0,0,0.7))
            drop-shadow(0 0 20px rgba(227,111,61,0.75))
            drop-shadow(0 0 36px rgba(227,111,61,0.25));
  }
}

/* Counter-spin для tail-gear (зворотній напрямок до tip-gear) */
@keyframes al-arrow-tail-counterspin {
  from { transform: translateY(-50%) rotate(0deg); }
  to   { transform: translateY(-50%) rotate(-360deg); }
}

/* === 🔧 STEAMPUNK v2.2 FIXES — nowrap text + larger gear === */

/* Фікс: текст DEV TOOLS має бути на одному рядку */
body.dev-tools-scope.al-page .al-arrow-label {
  white-space: nowrap !important;
  display: inline-block !important;
}
body.dev-tools-scope.al-page .al-arrow-textwrap {
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}

/* Ширша стрілка — достатньо місця для тексту + mid-gear + запас */
body.dev-tools-scope.al-page .al-arrow-btn {
  width: 216px !important;
  padding: 0 32px 0 40px !important;
}

/* Позиція tail-gear — достатньо далеко від V-розрізу swallowtail */
body.dev-tools-scope.al-page .al-arrow-gear-tail {
  right: 34px !important;
}

/* Позиції hex-гайок — адаптація під ширшу кнопку */
body.dev-tools-scope.al-page .al-arrow-rivet--tl,
body.dev-tools-scope.al-page .al-arrow-rivet--bl {
  left: 40px !important;
}
body.dev-tools-scope.al-page .al-arrow-rivet--tr,
body.dev-tools-scope.al-page .al-arrow-rivet--br {
  right: 36px !important;
}

/* Gear-body — 42×42, гарантовано поміщається у row-top (висота back-btn 50px) */
body.dev-tools-scope.al-page .al-gear-body {
  width: 42px !important;
  height: 42px !important;
  overflow: visible !important;
}

/* Центральна кнопка — пропорційно (26×26 у 42×42) */
body.dev-tools-scope.al-page .al-gear-center-btn {
  width: 26px !important;
  height: 26px !important;
}

/* Іконка refresh */
body.dev-tools-scope.al-page .al-gear-refresh-icon {
  font-size: 15px !important;
}

/* Countdown — НАД шестернею, у row-top але видно частина в row-bottom gap */
body.dev-tools-scope.al-page .al-gear-countdown {
  top: -14px !important;
  font-size: 9px !important;
}

/* Прибрати крапку-заклепку від старого стилю refresh-combo */
body.dev-tools-scope.al-page .al-refresh-combo::before,
body.dev-tools-scope.al-page .al-refresh-combo::after {
  display: none !important;
  content: none !important;
}

/* Dropdown — переставити ПІД шестерню (замість ліворуч, де перекривається стрілкою) */
body.dev-tools-scope.al-page .al-gear-dropdown {
  right: auto !important;
  top: calc(100% + 10px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 100 !important;
}


/* ═══════════════════════════════════════════════════════════════════
   === UNIFIED BALKA v6 (back + clock) — SVG-монолит SSOT ===
   Всі 3 елементи балки (back + logo + clock) використовують:
   - Однаковий градієнт пластини (bk-plate / clk-plate ≡ alG-plate)
   - 4-шарова brass кромка (outer brass + dark outline + bevel + highlight)
   - Hex-болти на 4 кутах однакової форми polygon 6-hex
   - Ідентичні фільтри: metal-noise, gear-shadow, lamp-glow
   ═══════════════════════════════════════════════════════════════════ */

/* ── BACK-BUTTON v6: SVG-монолит ── */
/* Скидаємо clip-path з попередніх версій — форма тепер у SVG <path> */
body.dev-tools-scope.al-page .al-backarrow-host {
  clip-path: none !important;
  background: none !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  overflow: visible !important;
  cursor: pointer !important;
  position: relative !important;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,0.70))
          drop-shadow(0 1px 2px rgba(0,0,0,0.95)) !important;
  transition: filter 0.3s ease, transform 0.15s ease !important;
}

/* Розміри SVG-монолита back-кнопки */
body.dev-tools-scope.al-page .al-backarrow-svg {
  width: 210px !important;
  height: 50px !important;
  display: block !important;
  overflow: visible !important;
}

/* Back-gear — ВЕЛИКА шестерня ЗА пластиною, обертається CW 45s */
.al-bk-rot-back {
  animation: bk-back-spin-idle 45s linear infinite;
  transform-box: fill-box;
  transform-origin: center center;
}
@keyframes bk-back-spin-idle {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Hover: прискорення back-шестерні + 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.50))
    drop-shadow(0 0 4px rgba(197,139,58,0.40)) !important;
  transform: translateX(-3px) !important;
}
body.dev-tools-scope.al-page .al-backarrow-host:hover .al-bk-rot-back {
  animation-duration: 10s !important;
}

/* Active: pressed-down effect */
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))
    drop-shadow(0 0 6px rgba(197,139,58,0.30)) !important;
}

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

/* Tooltip — стиль як у meta-plate (brass plate з hex-bolts по боках).
   Зсунутий вправо до кінця хвоста стрілки (замість центру). */
body.dev-tools-scope.al-page .al-backarrow-host .al-arrow-tooltip {
  position: absolute !important;
  top: calc(100% + 4px) !important;
  bottom: auto !important;
  left: auto !important;
  right: 8px !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 3px 14px !important;
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-base) 50%, var(--al-x, #100c06) 100%) !important;
  border: 1px solid var(--border-dim) !important;
  border-top-color: rgba(240, 200, 100, 0.50) !important;
  border-radius: 3px !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;
  font-family: var(--font-ui, 'Oswald', sans-serif); /* UPPERCASE tooltip — canon font */
  font-size: 7.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--mod-publisher) !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.90), 0 0 4px rgba(197,139,58,0.3) !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.2s ease !important;
  z-index: 20 !important;
}
/* Hex-bolts по боках tooltip (brass rivets, як у meta-plate) */
body.dev-tools-scope.al-page .al-backarrow-host .al-arrow-tooltip::before,
body.dev-tools-scope.al-page .al-backarrow-host .al-arrow-tooltip::after {
  content: '' !important;
  position: absolute !important;
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 30%, var(--mod-publisher), var(--al-x, #7a4e18)) !important;
  border: 0.5px solid var(--al-x, #1a0a04) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
body.dev-tools-scope.al-page .al-backarrow-host .al-arrow-tooltip::before { left: 3px !important; }
body.dev-tools-scope.al-page .al-backarrow-host .al-arrow-tooltip::after  { right: 3px !important; }
/* Показ при hover */
body.dev-tools-scope.al-page .al-backarrow-host:hover .al-arrow-tooltip {
  opacity: 1 !important;
}
body.dev-tools-scope.al-page .al-backarrow-host:hover .al-arrow-tooltip {
  opacity: 1 !important;
}

/* Скидаємо старі ::before/::after що були для clip-path bg */
body.dev-tools-scope.al-page .al-backarrow-host::before,
body.dev-tools-scope.al-page .al-backarrow-host::after {
  display: none !important;
  content: none !important;
}


/* ── CLOCK-UNIT v7: SVG-монолит корпус + HTML overlay ── */

/* Позиціонування відносно контейнера */
body.dev-tools-scope.al-page .al-clock-panel > .clock-unit {
  position: relative !important;
  width: 207px !important;
  height: 47px !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* SVG-пластина — абсолютна підкладка */
body.dev-tools-scope.al-page .al-clock-svg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  overflow: visible !important;
  pointer-events: none !important;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,0.65)) !important;
}

/* HTML overlay — поверх SVG. Циферблат вертикально по центру рамки (data-strip винесений у tooltip) */
body.dev-tools-scope.al-page .clock-overlay {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  padding: 4px 20px !important;
  box-sizing: border-box !important;
}

/* Фонові шестерні — CW і CCW через спільний клас */
.al-clock-bg-gear--L .al-bk-rot-tail {
  animation: bk-tail-spin-idle 55s linear infinite;
}
.al-clock-bg-gear--R .al-bk-rot-tip {
  animation: bk-tip-spin-idle 45s linear infinite;
}

/* ── МАЯТНИК — унікальна декорація годинника, окремий SVG поверх overlay ── */
body.dev-tools-scope.al-page .al-clock-pendulum-svg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  overflow: visible !important;
  z-index: 4 !important;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.55)) !important;
}
body.dev-tools-scope.al-page .al-clock-pendulum {
  pointer-events: none !important;
}
/* Внутрішня група swing — гойдається навколо pivot (0,0) */
body.dev-tools-scope.al-page .al-clock-pendulum-swing {
  transform-box: fill-box !important;
  transform-origin: center top !important;
  animation: clk-pendulum-swing 2.6s ease-in-out infinite !important;
}
@keyframes clk-pendulum-swing {
  0%   { transform: rotate(-14deg); }
  50%  { transform: rotate(14deg); }
  100% { transform: rotate(-14deg); }
}

/* Amber лампи (inherit от al-sv-lamp keyframes) */
body.dev-tools-scope.al-page .al-clock-lamp .al-sv-lamp-halo {
  animation: clk-lamp-flicker 3.5s ease-in-out infinite;
}
@keyframes clk-lamp-flicker {
  0%, 100% { opacity: 0.55; }
  45%       { opacity: 0.85; }
  55%       { opacity: 0.70; }
  80%       { opacity: 0.90; }
}

/* Скидаємо старі body-screw (тепер SVG hex-болти) */
body.dev-tools-scope.al-page .clock-unit .body-screw {
  display: none !important;
}

/* Скидаємо старий clock-deco-gear (тепер SVG bg-gears) */
body.dev-tools-scope.al-page .clock-unit .clock-deco-gear {
  display: none !important;
}

/* Display window — майже весь корпус 207×47 (мінус padding overlay) */
body.dev-tools-scope.al-page .clock-overlay .display-window {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  width: 100% !important;
  min-height: 22px !important;
  max-height: 26px !important;
  flex: 0 0 auto !important;
  padding: 2px 6px !important;
  border: 1px solid var(--al-x, #1c1208) !important;
  border-radius: 2px !important;
  margin: 0 !important;
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%, rgba(197,139,58,0.06) 0%, transparent 70%),
    linear-gradient(180deg, var(--al-x, #030201), var(--al-x, #080604) 30%, var(--al-x, #040301) 90%) !important;
  box-shadow:
    inset 0 0 8px rgba(0,0,0,0.90),
    inset 0 0 14px rgba(197,139,58,0.05),
    0 1px 0 rgba(140,107,70,0.25) !important;
}

/* ── CLOCK TOOLTIP ── Дата виринає ПІД рамкою годинника на hover.
   Стиль дзеркалить al-arrow-tooltip (brass-plate + hex-bolts), тільки позиціонована справа. */
body.dev-tools-scope.al-page .clock-unit .al-clock-tooltip {
  position: absolute !important;
  top: calc(100% + 4px) !important;
  right: 8px !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 3px 14px !important;
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-base) 50%, var(--al-x, #100c06) 100%) !important;
  border: 1px solid var(--border-dim) !important;
  border-top-color: rgba(240, 200, 100, 0.50) !important;
  border-radius: 3px !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;
  font-family: var(--font-ui, 'Oswald', sans-serif) !important; /* UPPERCASE tooltip */
  font-size: 7.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--mod-publisher) !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.90), 0 0 4px rgba(197,139,58,0.3) !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.2s ease !important;
  z-index: 20 !important;
}
/* Hex-bolts по боках tooltip (brass rivets, як у back-tooltip) */
body.dev-tools-scope.al-page .clock-unit .al-clock-tooltip::before,
body.dev-tools-scope.al-page .clock-unit .al-clock-tooltip::after {
  content: '' !important;
  position: absolute !important;
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 30%, var(--mod-publisher), var(--al-x, #7a4e18)) !important;
  border: 0.5px solid var(--al-x, #1a0a04) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
body.dev-tools-scope.al-page .clock-unit .al-clock-tooltip::before { left: 3px !important; }
body.dev-tools-scope.al-page .clock-unit .al-clock-tooltip::after  { right: 3px !important; }
/* Візуальні дрібні деталі тексту — label приглушений, sep крапка, value яскравіший */
body.dev-tools-scope.al-page .clock-unit .al-clock-tooltip .clock-date-label {
  opacity: 0.60 !important;
}
body.dev-tools-scope.al-page .clock-unit .al-clock-tooltip .clock-date-sep {
  display: inline-block !important;
  width: 3px !important;
  height: 3px !important;
  border-radius: 50% !important;
  background: var(--accent-brass-dim) !important;
}
body.dev-tools-scope.al-page .clock-unit .al-clock-tooltip .data-value {
  color: var(--warning) !important;
  opacity: 1 !important;
}
/* Показ при hover по рамці годинника */
body.dev-tools-scope.al-page .clock-unit:hover .al-clock-tooltip,
body.dev-tools-scope.al-page .al-clock-panel:hover .al-clock-tooltip {
  opacity: 1 !important;
}

/* Countdown — НАД шестернею (над балкою б обрізало знизу) */
body.dev-tools-scope.al-page .al-gear-countdown {
  bottom: auto !important;
  top: -16px !important;
  font-size: 10px !important;
}

/* Приховати hint-text "КЛІК ДЛЯ ВИБОРУ" постійно (зайвий артефакт) */
body.dev-tools-scope.al-page .al-gear-hint-text {
  display: none !important;
}

/* Steam-puff не повинен виходити за межі (потенційний артефакт-крапка) */
body.dev-tools-scope.al-page .al-steam-puff {
  display: none !important;
}

/* Видалити dead-code правила mountbar (DOM видалено — CSS залишив артефакти при ::before/::after на inheritance) */
body.dev-tools-scope.al-page .al-header-mountbar,
body.dev-tools-scope.al-page .al-mountbar-rivet,
body.dev-tools-scope.al-page .al-mountbar-rivet--l,
body.dev-tools-scope.al-page .al-mountbar-rivet--r {
  display: none !important;
}

/* Refresh-combo — прибрати висоту/overflow/фон/рамку зі старих правил (8303-8327) */
body.dev-tools-scope.al-page .al-refresh-combo.al-gear-unit {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Такий же фікс для `.al-refresh-combo` без модифікатора (щоб перекрити старі правила) */
body.dev-tools-scope.al-page .al-header-left-cluster .al-refresh-combo {
  height: auto !important;
  overflow: visible !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Dropdown випадає за межі балки (.devtools-header має overflow:hidden у SSOT).
   Скасовуємо обрізання ТІЛЬКИ коли dropdown відкритий — через :has() не ламаємо декор. */
body.dev-tools-scope.al-page:has(#alGearDropdown:not([hidden])) .devtools-header,
body.dev-tools-scope.al-page:has(#alGearDropdown:not([hidden])) .dt-header-row-top,
body.dev-tools-scope.al-page:has(#alGearDropdown:not([hidden])) .al-header-left-cluster {
  overflow: visible !important;
}

/* Коли dropdown відкритий — піднімаємо весь header над іншими блоками сторінки
   (.devtools-header у SSOT має z-index:100, command panel і інше може бути поруч) */
body.dev-tools-scope.al-page:has(#alGearDropdown:not([hidden])) .devtools-header {
  z-index: 50 !important; /* FIX cc-713: знижено з 99999, header z-index=50 per balka SSOT */
}

/* Dropdown — системний z-index (узгоджено з devtools SSOT hierarchy) */
/* 🔧 sys-1012: використовуємо --z-dropdown токен замість magic 10540 */
body.dev-tools-scope.al-page .al-gear-dropdown {
  z-index: var(--z-dropdown, 10540) !important;
}

/* Refresh-combo relative + високий z-index щоб створити окремий stacking context для dropdown */
body.dev-tools-scope.al-page .al-refresh-combo.al-gear-unit {
  z-index: 999 !important;
}

/* ─── End STEAMPUNK REDESIGN v2 ─── */

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  ЖИВИЙ МЕХАНІЗМ v4.0 — повна переробка герба Центру сповіщень       ║
   ║  Шари: задні шестерні → рамка → передні шестерні                    ║
   ║  Анімації: за/проти годинникової, зчеплені передачі                 ║
   ║  Видалено: wobble/tilt/sway анімація рамки                          ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ═══ КРИТИЧНО: скасовуємо wobble (al-crest-tilt) на .has-critical ═══ */
.al-page.has-critical .al-crest {
  animation: none !important;
}

/* ═══ ГЕРБ: зовнішня обгортка — position:relative для layering ═══ */
body.dev-tools-scope.al-page .al-crest {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  /* ЖОДНИХ transform-анімацій — стабільний якір механізму */
  animation: none !important;
}

/* ═══ РАМКА: пульс тіні (плавне "дихання" механізму) ═══ */
@keyframes al-mech-breath {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(232, 200, 140, 0.22),
      inset 0 -1px 0 rgba(0, 0, 0, 0.70),
      inset 0 0 20px rgba(0, 0, 0, 0.50),
      0 0 0 1px rgba(92, 68, 48, 0.50),
      0 0 0 2px rgba(0, 0, 0, 0.60),
      0 3px 8px rgba(0, 0, 0, 0.65),
      0 0 18px rgba(92, 68, 48, 0.15) !important;
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(232, 200, 140, 0.28),
      inset 0 -1px 0 rgba(0, 0, 0, 0.70),
      inset 0 0 20px rgba(0, 0, 0, 0.50),
      0 0 0 1px rgba(92, 68, 48, 0.65),
      0 0 0 2px rgba(0, 0, 0, 0.60),
      0 3px 14px rgba(0, 0, 0, 0.70),
      0 0 32px rgba(92, 68, 48, 0.28) !important;
  }
}
body.dev-tools-scope.al-page .al-crest .dt-crest__shell {
  /* ТІЛЬКИ box-shadow анімація — без transform */
  animation: al-mech-breath 2.5s ease-in-out infinite !important;
}

/* ═══ ШАРИ: позиціонування відносно al-crest ═══ */
body.dev-tools-scope.al-page .al-mech-layer {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
}

/* Задній шар — z-index менший ніж рамка (рамка має z-index 1 або auto) */
body.dev-tools-scope.al-page .al-mech-layer--behind {
  z-index: 0 !important;
  /* Рамка .dt-crest__shell має z-index auto (в стеку = 1 після неї) */
}

/* Передній шар — поверх рамки */
body.dev-tools-scope.al-page .al-mech-layer--front {
  z-index: 10 !important;
}

/* ═══ ЗАДНІ ШЕСТЕРНІ ═══ */
/* Загальний стиль задніх шестерень — тьмяні, "в тіні за рамкою" */
body.dev-tools-scope.al-page .al-bg-gear {
  position: absolute !important;
  pointer-events: none !important;
  opacity: 0.32 !important;
  /* filter drop-shadow glow removed (canon) */
}
body.dev-tools-scope.al-page .al-bg-gear svg {
  display: block !important;
}

/* Задня ліво — великий, виступає за ліву сторону рамки */
body.dev-tools-scope.al-page .al-bg-gear--left {
  left: -22px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
body.dev-tools-scope.al-page .al-bg-gear--left .al-bg-gear-svg {
  animation: al-gear-cw 28s linear infinite !important;
  transform-origin: 50px 24px !important;
}

/* Задня право — середній, виступає за праву сторону */
body.dev-tools-scope.al-page .al-bg-gear--right {
  right: -18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
body.dev-tools-scope.al-page .al-bg-gear--right .al-bg-gear-svg {
  /* Зчеплена з лівою — проти годинникової */
  animation: al-gear-ccw 22s linear infinite !important;
  transform-origin: 50px 24.5px !important;
}

/* Задня центр — маленька, проміжна передача між лівою і правою */
body.dev-tools-scope.al-page .al-bg-gear--center {
  left: 50% !important;
  bottom: -14px !important;
  transform: translateX(-50%) !important;
}
body.dev-tools-scope.al-page .al-bg-gear--center .al-bg-gear-svg {
  /* Зчеплена з правою — за годинниковою */
  animation: al-gear-cw 35s linear infinite !important;
  transform-origin: 40px 21px !important;
}

/* ═══ ПЕРЕДНІ ШЕСТЕРНІ ═══ */
/* Яскравіші, brass highlights, легкий glow */
body.dev-tools-scope.al-page .al-fg-gear {
  position: absolute !important;
  pointer-events: none !important;
  opacity: 0.78 !important;
  filter:
    drop-shadow(0 1px 3px rgba(0, 0, 0, 0.85))
    drop-shadow(0 0 5px rgba(197, 139, 58, 0.22)) !important;
}
body.dev-tools-scope.al-page .al-fg-gear svg {
  display: block !important;
}

/* Передня ліво верх — прикриває лівий верхній кут рамки */
body.dev-tools-scope.al-page .al-fg-gear--tl {
  top: -10px !important;
  left: -10px !important;
}
body.dev-tools-scope.al-page .al-fg-gear--tl .al-fg-gear-svg {
  /* Проти годинникової, 14s — "відповідає" кутовій шестерні рамки */
  animation: al-gear-ccw 14s linear infinite !important;
  transform-origin: 30px 19px !important;
}

/* Передня право верх — зчеплена з tl (за годинниковою) */
body.dev-tools-scope.al-page .al-fg-gear--tr {
  top: -8px !important;
  right: -8px !important;
}
body.dev-tools-scope.al-page .al-fg-gear--tr .al-fg-gear-svg {
  animation: al-gear-cw 14s linear infinite !important;
  transform-origin: 30px 18.5px !important;
}

/* Передня право низ — менша, незалежна передача */
body.dev-tools-scope.al-page .al-fg-gear--br {
  bottom: -7px !important;
  right: -5px !important;
}
body.dev-tools-scope.al-page .al-fg-gear--br .al-fg-gear-svg {
  /* Зчеплена з tr — проти годинникової */
  animation: al-gear-ccw 18s linear infinite !important;
  transform-origin: 25px 16.5px !important;
}

/* ═══ АНІМАЦІЇ ОБЕРТАННЯ (SSOT) ═══ */
@keyframes al-gear-cw {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes al-gear-ccw {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

/* ═══ ПАРОВІ КЛУБКИ ═══ */
body.dev-tools-scope.al-page .al-crest-steam {
  position: absolute !important;
  top: -18px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  align-items: flex-end !important;
  gap: 6px !important;
  pointer-events: none !important;
  z-index: 11 !important;
}
body.dev-tools-scope.al-page .al-steam-puff {
  display: block !important;
  border-radius: 50% !important;
  background: radial-gradient(circle,
    rgba(160, 130, 90, 0.55) 0%,
    rgba(92, 68, 48, 0.20) 60%,
    transparent 100%) !important;
  filter: blur(2px) !important;
}
body.dev-tools-scope.al-page .al-steam-puff--1 {
  width: 10px !important;
  height: 10px !important;
  animation: al-steam-pulse 3s ease-in-out infinite !important;
}
body.dev-tools-scope.al-page .al-steam-puff--2 {
  width: 14px !important;
  height: 14px !important;
  animation: al-steam-pulse 3s ease-in-out 0.8s infinite !important;
}
body.dev-tools-scope.al-page .al-steam-puff--3 {
  width: 8px !important;
  height: 8px !important;
  animation: al-steam-pulse 3s ease-in-out 1.6s infinite !important;
}
@keyframes al-steam-pulse {
  0%, 100% { opacity: 0.20; transform: scaleY(0.9); }
  50%       { opacity: 0.50; transform: scaleY(1.1); }
}

/* ═══ НИЖНЯ ТАБЛИЧКА: al-crest-meta → під рамкою ═══ */
/* META перенесено всередину .dt-crest__shell але позиціонується назовні */
body.dev-tools-scope.al-page .al-crest-meta {
  position: absolute !important;
  bottom: -11px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  /* Табличка-стиль (аналог .al-crest-plate але менша) */
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 1px 10px !important;
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-base) 100%) !important;
  border: 1px solid var(--bg-void) !important;
  border-top-color: rgba(216, 179, 112, 0.35) !important;
  border-radius: 2px !important;
  white-space: nowrap !important;
  z-index: 6 !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 200, 140, 0.10),
    0 0 0 1px rgba(92, 68, 48, 0.35),
    0 2px 4px rgba(0, 0, 0, 0.50) !important;
  margin-top: 0 !important;
}
body.dev-tools-scope.al-page .al-crest-meta-txt {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 7px !important;
  letter-spacing: 0.20em !important;
  color: var(--al-x, #a07040) !important;
  opacity: 0.90 !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.85) !important;
}
body.dev-tools-scope.al-page .al-crest-meta-dot {
  width: 3px !important;
  height: 3px !important;
  border-radius: 50% !important;
  background: var(--accent-brass) !important;
  opacity: 0.50 !important;
  box-shadow: 0 0 2px rgba(197, 139, 58, 0.35) !important;
  flex-shrink: 0 !important;
}
body.dev-tools-scope.al-page .al-crest-meta-dot:last-child {
  animation: al-live-dot-pulse 2.2s ease-in-out infinite !important;
  opacity: 0.75 !important;
}

/* ═══ CRITICAL STATE: передні шестерні розгораються ═══ */
body.dev-tools-scope.al-page.has-critical .al-fg-gear {
  opacity: 0.92 !important;
  filter:
    drop-shadow(0 1px 3px rgba(0, 0, 0, 0.85))
    drop-shadow(0 0 8px rgba(193, 68, 24, 0.45)) !important;
}
body.dev-tools-scope.al-page.has-critical .al-bg-gear {
  opacity: 0.45 !important;
}

/* ─── End ЖИВИЙ МЕХАНІЗМ v4.0 ─── */


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  STEAMPUNK FORGE v5.0 — SVG-FRAME ANIMATION SYSTEM                 ║
   ║  Повна заміна v4.0. 25+ SVG елементів, 6 шестерень виступають      ║
   ║  за межі рамки, 4 amber лампи, 3 манометри, 8 болтів, 4 муфти.    ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ═══ ХЕДЕР: overflow visible для виступаючих шестерень ═══ */
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;
  /* Ширина + overflow visible щоб шестерні виступали */
  width: 460px !important;
  height: 80px !important;
  overflow: visible !important;
}

/* ═══ SVG РАМКА — масштабована ═══ */
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;
  /* "Дихання" рамки — через drop-shadow (не transform) */
  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;
}
/* Sigil icon — Material Symbol notifications_active у brass стилі */
body.dev-tools-scope.al-page .al-crest-sigil {
  flex-shrink: 0 !important;
  font-size: 34px !important;
  color: var(--warning) !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;
}
@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); }
}

body.dev-tools-scope.al-page .al-crest .dt-crest__title {
  font-family: var(--font-dt-title), 'Cinzel', serif !important;
  font-size: 34px !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  /* Solid gold fill — чіткі літери як у референсі. Engraved gradient прибрано (замилював шрифт) */
  color: var(--warning) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: var(--warning) !important;
  /* Глибинний text-shadow: темний контур + ember glow */
  text-shadow:
    0 1px 0 var(--al-x, #5c3818),
    0 2px 0 var(--border-dim),
    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;
  /* Brass plate */
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-base) 50%, var(--al-x, #100c06) 100%) !important;
  border: 1px solid var(--border-dim) !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;
  /* Заклепки через pseudo-elements */
}
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%, var(--mod-publisher), var(--al-x, #7a4e18)) !important;
  border: 0.5px solid var(--al-x, #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-mono), 'IBM Plex Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  color: var(--mod-publisher) !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;
}

/* Іконки-дзвіночки по боках тексту в meta-plate (замість крапок) */
body.dev-tools-scope.al-page .al-crest-meta-icon {
  font-size: 14px !important;
  color: var(--warning) !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: var(--accent-brass) !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 ШЕСТЕРЕНЬ ═══ */

/* Rotation keyframes через SVG transform-origin = центр відповідної групи */
/* CSS класи на g.al-sv-rot → animation встановлюється в CSS */

/* CW 16s — TL і зчеплені */
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;
}
/* CW 20s — BL/BR */
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;
}
/* CW 28s — бокові */
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;
}
/* CW 40s, 50s, 55s — задні великі */
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;
}

@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); }
}

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

@keyframes al-v5-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-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; }

@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); }
}

/* ═══ РАМКА: "дихання" через filter ═══ */
@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));
  }
}

/* ═══ LIVE DOT ═══ */
@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); }
}

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

/* ═══ СУМІСНІСТЬ: ховаємо старі 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; }
/* .dt-crest__shell більше не використовується як рамка (замінено SVG), ховаємо лишки */
body.dev-tools-scope.al-page .al-crest .dt-crest__shell {
  display: none !important;
}

/* ─── End STEAMPUNK FORGE v5.0 ─── */

/* ═══════════════════════════════════════════════════════════════════
   §7. REFRESH-CLUSTER v7 — квадратні кнопки (клон al-clock-sidecol)
   ═══════════════════════════════════════════════════════════════════ */

/* Скасовуємо старі gear-capsule стилі (superseded) */
body.dev-tools-scope.al-page .al-refresh-cluster {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  height: auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 999 !important;
}
body.dev-tools-scope.al-page .al-refresh-cluster::before,
body.dev-tools-scope.al-page .al-refresh-cluster::after {
  display: none !important;
  content: none !important;
}

/* Стовпчик 2 кнопки — зі скріпленням brass-скобами по боках */
body.dev-tools-scope.al-page .al-refresh-sidecol {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 8px !important;
}
/* Ліва brass-скоба (візуальний зв'язок між 2 кнопками) */
body.dev-tools-scope.al-page .al-refresh-sidecol::before,
body.dev-tools-scope.al-page .al-refresh-sidecol::after {
  content: '' !important;
  position: absolute !important;
  top: 4px !important;
  bottom: 4px !important;
  width: 3px !important;
  background: linear-gradient(180deg,
    var(--al-x, #5c3818) 0%,
    var(--accent-brass) 15%,
    var(--al-x, #d4a54a) 50%,
    var(--accent-brass) 85%,
    var(--al-x, #5c3818) 100%
  ) !important;
  border-radius: 1.5px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,240,180,0.35),
    inset 0 -1px 0 rgba(0,0,0,0.55),
    0 0 3px rgba(0,0,0,0.6) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
body.dev-tools-scope.al-page .al-refresh-sidecol::before { left: 0 !important; }
body.dev-tools-scope.al-page .al-refresh-sidecol::after  { right: 0 !important; }

/* Квадратна чавунна кнопка — ідентично al-clock-sidebtn */
body.dev-tools-scope.al-page .al-refresh-sidebtn {
  position: relative !important;
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background:
    linear-gradient(180deg,
      var(--bg-elevated) 0%,
      var(--bg-base) 45%,
      var(--bg-void) 100%
    ) !important;
  border: 1px solid var(--bg-void) !important;
  border-top-color: rgba(216, 179, 112, 0.45) !important;
  border-radius: 2px !important;
  color: var(--accent-brass-hover) !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 200, 140, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.70),
    0 0 0 1px rgba(92, 68, 48, 0.45),
    0 2px 5px rgba(0, 0, 0, 0.55) !important;
  cursor: pointer !important;
  transition: background 0.20s ease, border-color 0.20s ease,
              box-shadow 0.20s ease, transform 0.10s ease !important;
  overflow: visible !important;
}
/* Декоративна заклепка справа-знизу */
body.dev-tools-scope.al-page .al-refresh-sidebtn::after {
  content: '' !important;
  position: absolute !important;
  bottom: 2px !important;
  right: 2px !important;
  width: 3px !important;
  height: 3px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 30%, var(--warning), var(--border-bright) 55%, var(--border-dim)) !important;
  box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.6) !important;
  pointer-events: none !important;
}
body.dev-tools-scope.al-page .al-refresh-sidebtn:hover {
  border-top-color: var(--accent-brass-hover) !important;
  border-color: rgba(197, 139, 58, 0.70) !important;
  background:
    linear-gradient(180deg,
      var(--border-metal) 0%,
      var(--al-x, #241810) 50%,
      var(--al-x, #140c08) 100%
    ) !important;
  color: var(--text-bright) !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 200, 140, 0.38),
    inset 0 -1px 0 rgba(0, 0, 0, 0.70),
    inset 0 0 10px rgba(197, 139, 58, 0.10),
    0 0 0 1px rgba(230, 168, 72, 0.50),
    0 0 8px rgba(197, 139, 58, 0.22),
    0 2px 5px rgba(0, 0, 0, 0.50) !important;
}
body.dev-tools-scope.al-page .al-refresh-sidebtn:active {
  transform: translateY(1px) !important;
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(230, 168, 72, 0.50),
    0 1px 2px rgba(0, 0, 0, 0.40) !important;
}
body.dev-tools-scope.al-page .al-refresh-sidebtn .material-symbols-outlined {
  font-size: 17px !important;
  pointer-events: none !important;
}
/* Burst-анімація для refresh button при manual click */
body.dev-tools-scope.al-page .al-refresh-sidebtn#refreshBtn .material-symbols-outlined {
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
body.dev-tools-scope.al-page .al-refresh-sidebtn#refreshBtn:active .material-symbols-outlined {
  transform: rotate(360deg) !important;
}

/* Countdown — ВСЕРЕДИНІ schedule-кнопки (замість material icon).
   При активному інтервалі показує цифри, icon ховається.
   При manual (value=0) — іконка видима, countdown порожній. */
body.dev-tools-scope.al-page .al-refresh-countdown {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-family: var(--font-mono), 'IBM Plex Mono', monospace !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  color: var(--accent-ember) !important;
  /* text-shadow removed (canon: glow forbidden) */
  pointer-events: none !important;
  white-space: nowrap !important;
  z-index: 2 !important;
  background: rgba(20,14,8,0.85) !important;
  padding: 0 3px !important;
  border-radius: 1.5px !important;
}
/* Якщо countdown має значення — ховаємо material icon в schedule button */
body.dev-tools-scope.al-page #al-gear-body:has(#al-countdown:not(:empty)) .material-symbols-outlined {
  opacity: 0.15 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   §8. UNIVERSAL STEAMPUNK TOOLTIP — працює на ВСІХ [data-tooltip]
   Tooltip випадає ЗНИЗУ (під кнопкою), щоб не обрізатись overflow:hidden balkою
   ═══════════════════════════════════════════════════════════════════ */

body.dev-tools-scope.al-page [data-tooltip] {
  position: relative !important;
}
/* При hover — піднімаємо елемент над сусідами щоб tooltip не обрізався siblings */
body.dev-tools-scope.al-page [data-tooltip]:hover,
body.dev-tools-scope.al-page [data-tooltip]:focus-visible {
  z-index: 10535 !important;
}
/* Tooltip bubble */
body.dev-tools-scope.al-page [data-tooltip]::before {
  content: attr(data-tooltip) !important;
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(-4px) !important;
  padding: 3px 10px !important;
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-base) 50%, var(--al-x, #100c06) 100%) !important;
  border: 1px solid var(--border-dim) !important;
  border-top-color: rgba(240, 200, 100, 0.50) !important;
  border-radius: 3px !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 6px rgba(0, 0, 0, 0.65) !important;
  font-family: var(--font-mono), 'IBM Plex Mono', monospace !important;
  font-size: 7.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--mod-publisher) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.9), 0 0 4px rgba(197,139,58,0.3) !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s !important;
  z-index: 10550 !important;
}
/* Хвостик-стрілка (brass diamond) над tooltip, вказує на кнопку */
body.dev-tools-scope.al-page [data-tooltip]::after {
  content: '' !important;
  position: absolute !important;
  top: calc(100% + 4px) !important;
  left: 50% !important;
  width: 6px !important;
  height: 6px !important;
  background: linear-gradient(135deg, var(--border-dim) 0%, var(--bg-elevated) 100%) !important;
  border-top: 1px solid rgba(240, 200, 100, 0.50) !important;
  border-left: 1px solid var(--border-dim) !important;
  transform: translateX(-50%) rotate(45deg) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.18s ease, visibility 0s linear 0.18s !important;
  pointer-events: none !important;
  z-index: 10545 !important;
}
body.dev-tools-scope.al-page [data-tooltip]:hover::before,
body.dev-tools-scope.al-page [data-tooltip]:focus-visible::before {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(0) !important;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s !important;
}
body.dev-tools-scope.al-page [data-tooltip]:hover::after,
body.dev-tools-scope.al-page [data-tooltip]:focus-visible::after {
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity 0.18s ease, visibility 0s !important;
}
/* Tooltip НЕ має показуватись на елементах з .no-tooltip (opt-out) */
body.dev-tools-scope.al-page [data-tooltip].no-tooltip::before,
body.dev-tools-scope.al-page [data-tooltip].no-tooltip::after {
  display: none !important;
}

/* Tooltip позиціонується ЗНИЗУ кнопки (top: 100%+8px) — для back+clock sidebtn
   має вміщатись у балці 96px без потреби overflow:visible. Якщо кнопка знаходиться
   у нижній частині балки і tooltip обрізається — додайте data-tooltip на батька
   або використайте alt-span. Override балки через :has() ВИДАЛЕНО — ламав clock. */

/* ─── Dropdown — під sidecol з кнопками ─── */
body.dev-tools-scope.al-page .al-refresh-cluster .al-gear-dropdown {
  position: absolute !important;
  right: auto !important;
  left: 50% !important;
  top: calc(100% + 6px) !important;
  transform: translateX(-50%) !important;
  z-index: 10540 !important;
}

/* ─── End REFRESH-CLUSTER v7 ─── */


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  4-ROW CONSOLE LAYOUT v9.0                                       ║
   ║  RS1: title ліво + info-plate право (~40px)                      ║
   ║  RS2: CONSOLE — severity pills | tabs | filters (40px)           ║
   ║  RS3: TELEGRAM BANNER — hero alert повна ширина (~36px+)         ║
   ║  RS4: FOOTER — sources · silenced | bulk-btn | time (28px)       ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ── Контейнер: 3-рядковий grid v10.0 ── */
.dev-tools-scope.al-page .al-module--control {
  display: grid !important;
  grid-template-areas:
    "row-header"
    "row-hero"
    "row-footer"
    "row-confirm" !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto auto auto !important;
  gap: 0 !important;
  flex-direction: unset !important;
}

/* Приховати старі zone-b/d (лише прямі діти — не banner у RS2) */
.dev-tools-scope.al-page .al-module--control > .al-zone--b { display: none !important; }
.dev-tools-scope.al-page .al-module--control > .al-zone--d { display: none !important; }

/* ── CRITICAL FIX: скасувати legacy grid-area zone-d + order для #statusBanner у RS2 ── */
/* .al-zone--d (рядок 7362) ставить grid-area:zone-d, що виносить banner із RS2 grid */
/* .al-zone--c .alerts-tabs (рядок 7340) + .alerts-filters (7351) мають order:1/2 — banner має бути order:1 щоб стояти між ними */
.dev-tools-scope.al-page .al-mc-row--console .al-zone--d,
.dev-tools-scope.al-page .al-mc-row--console #statusBanner {
  grid-area: unset !important;
  grid-column: auto !important;
  grid-row: auto !important;
  position: static !important;
  order: 1 !important;
  padding: 6px 14px !important;
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  border-bottom: none !important;
  border-top: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: center !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 320px !important;
  overflow: hidden !important;
}
/* Tabs і filters: явні order для дзеркала до legacy — DOM-порядок гарантовано зліва-направо */
.dev-tools-scope.al-page .al-mc-row--console .alerts-tabs {
  order: 0 !important;
}
.dev-tools-scope.al-page .al-mc-row--console .alerts-filters {
  order: 2 !important;
}

/* ── RS1: Header row — 3-col grid: title | pills | info-plate ── */
.dev-tools-scope.al-page .al-mc-row--header {
  grid-area: row-header;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 6px 14px !important;
  border-bottom: 1px solid rgba(92, 68, 48, 0.22) !important;
  min-height: 46px !important;
}

/* RS1: Title group — ліва колонка */
.dev-tools-scope.al-page .al-mc-title-group {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  justify-self: start !important;
}
.dev-tools-scope.al-page .al-mc-title-icon {
  font-size: 15px !important;
  color: var(--accent-brass, var(--accent-brass)) !important;
  opacity: 0.65 !important;
}
.dev-tools-scope.al-page .al-mc-title-text {
  font-family: 'Oswald', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--al-text-secondary, var(--log-notice)) !important;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.5) !important;
}

/* RS1: Header right — inline hint + plate "01" (дзеркало block 2: al-feed-header) */
.dev-tools-scope.al-page .al-mc-header-right {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  justify-self: end !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  overflow: visible !important;
}
.dev-tools-scope.al-page .al-mc-header-right .al-b1-hint {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 10px !important;
  color: var(--al-text-secondary, var(--log-notice)) !important;
  opacity: 0.75 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  max-width: none !important;
  min-width: 0 !important;
  overflow: visible !important;
  text-overflow: clip !important;
  margin-left: 0 !important;
}
.dev-tools-scope.al-page .al-mc-header-right .al-b1-hint .material-symbols-outlined {
  color: var(--accent-brass, var(--accent-brass)) !important;
  opacity: 0.55 !important;
  flex-shrink: 0 !important;
}
/* Plate всередині header-right — не абсолютна, inline-flex */
.dev-tools-scope.al-page .al-mc-header-right .al-module-plate {
  position: static !important;
  top: auto !important;
  right: auto !important;
  flex-shrink: 0 !important;
}

/* RS1: Severity pills у header — центральна колонка */
.dev-tools-scope.al-page .al-mc-row--header .al-header-pills {
  justify-self: center !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
  flex-shrink: 0 !important;
}
/* Rivet dividers у RS1 pills — breathing room */
.dev-tools-scope.al-page .al-mc-row--header .al-rivet-divider--v {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 10px !important;
  height: 16px !important;
  align-self: center !important;
  flex-shrink: 0 !important;
  border: none !important;
  background: transparent !important;
  position: relative !important;
}
.dev-tools-scope.al-page .al-mc-row--header .al-rivet-divider--v::before {
  content: '' !important;
  display: block !important;
  width: 1px !important;
  height: 12px !important;
  background: rgba(92,68,48,0.32) !important;
}

/* RS1: Hex-bolts на info-plate */
.dev-tools-scope.al-page .al-mc-info-bolt {
  position: absolute !important;
  width: 7px !important;
  height: 7px !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
.dev-tools-scope.al-page .al-mc-info-bolt::before {
  content: '' !important;
  display: block !important;
  width: 7px !important;
  height: 7px !important;
  background: radial-gradient(circle at 35% 30%, var(--al-x, #f0e090) 0%, var(--al-x, #b87c30) 45%, var(--al-x, #6a3e18) 80%, var(--al-x, #2a1608) 100%) !important;
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.6) !important;
}
.dev-tools-scope.al-page .al-mc-info-bolt--tl { top: 3px !important; left: 3px !important; }
.dev-tools-scope.al-page .al-mc-info-bolt--tr { top: 3px !important; right: 3px !important; }


/* ═══════════════════════════════════════════════════════════════
   RS2 CONTROL ROW v10.1 — 3-col grid: [1fr | hero-banner | 1fr] — дзеркало RS1
   ═══════════════════════════════════════════════════════════════ */

.dev-tools-scope.al-page .al-mc-row--console {
  grid-area: row-hero;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 14px !important;
  min-height: 52px !important;
  border-bottom: 1px solid rgba(92, 68, 48, 0.22) !important;
  background: rgba(0,0,0,0.12) !important;
  overflow: visible !important;
}

/* ── Severity pills group — ліва секція ── */
.dev-tools-scope.al-page .al-console-pills-group {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0 !important;
  flex-shrink: 0 !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* ── Severity pill (inline, compact 26px tall) ── */
.dev-tools-scope.al-page .al-console-pill {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 4px !important;
  height: 26px !important;
  padding: 0 8px !important;
  border-radius: 3px !important;
  border: 1px solid transparent !important;
  cursor: default !important;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, opacity 0.3s ease, filter 0.3s ease !important;
  flex-shrink: 0 !important;
  position: relative !important;
  text-decoration: none !important;
}

/* Severity pill — кольори по типу */
.dev-tools-scope.al-page .al-console-pill--critical {
  background: var(--bg-critical, rgba(193,68,24,0.10)) !important;
  border-color: var(--border-critical, rgba(193,68,24,0.38)) !important;
}
.dev-tools-scope.al-page .al-console-pill--high {
  background: var(--bg-high, rgba(227,111,61,0.09)) !important;
  border-color: var(--border-high, rgba(227,111,61,0.32)) !important;
}
.dev-tools-scope.al-page .al-console-pill--medium {
  background: var(--bg-medium, rgba(224,196,137,0.08)) !important;
  border-color: var(--border-medium, rgba(224,196,137,0.28)) !important;
}
.dev-tools-scope.al-page .al-console-pill--info {
  background: var(--bg-info, rgba(124,143,136,0.07)) !important;
  border-color: var(--border-info, rgba(124,143,136,0.25)) !important;
}

/* Hover — посилення рамки */
.dev-tools-scope.al-page .al-console-pill--critical:hover {
  border-color: rgba(193,68,24,0.65) !important;
  box-shadow: 0 0 6px rgba(193,68,24,0.15) !important;
}
.dev-tools-scope.al-page .al-console-pill--high:hover {
  border-color: rgba(227,111,61,0.60) !important;
  box-shadow: 0 0 6px rgba(227,111,61,0.12) !important;
}
.dev-tools-scope.al-page .al-console-pill--medium:hover {
  border-color: rgba(224,196,137,0.50) !important;
  box-shadow: 0 0 6px rgba(224,196,137,0.10) !important;
}
.dev-tools-scope.al-page .al-console-pill--info:hover {
  border-color: rgba(124,143,136,0.45) !important;
}

/* pill-dot — 8px кольоровий */
.dev-tools-scope.al-page .al-pill-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  display: block !important;
}
.dev-tools-scope.al-page .al-console-pill--critical .al-pill-dot {
  background: var(--al-critical, var(--log-critical)) !important;
  box-shadow: 0 0 4px rgba(193,68,24,0.55) !important;
}
.dev-tools-scope.al-page .al-console-pill--high .al-pill-dot {
  background: var(--al-high, var(--accent-ember)) !important;
  box-shadow: 0 0 4px rgba(227,111,61,0.45) !important;
}
.dev-tools-scope.al-page .al-console-pill--medium .al-pill-dot {
  background: var(--al-medium, var(--warning)) !important;
}
.dev-tools-scope.al-page .al-console-pill--info .al-pill-dot {
  background: var(--al-info, var(--info)) !important;
}

/* pill-label — 9px uppercase mono */
.dev-tools-scope.al-page .al-pill-label {
  font-family: var(--font-ui, 'Oswald', sans-serif); /* UPPERCASE label — canon font */
  font-size: 9px !important;
  font-weight: 400 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  flex-shrink: 0 !important;
}
.dev-tools-scope.al-page .al-console-pill--critical .al-pill-label { color: rgba(193,68,24,0.80) !important; }
.dev-tools-scope.al-page .al-console-pill--high .al-pill-label { color: rgba(227,111,61,0.80) !important; }
.dev-tools-scope.al-page .al-console-pill--medium .al-pill-label { color: rgba(224,196,137,0.75) !important; }
.dev-tools-scope.al-page .al-console-pill--info .al-pill-label { color: rgba(124,143,136,0.75) !important; }

/* pill-count — 13px brass-nixie */
.dev-tools-scope.al-page .al-pill-count {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  min-width: 14px !important;
  text-align: right !important;
}
.dev-tools-scope.al-page .al-console-pill--critical .al-pill-count { color: var(--al-critical, var(--log-critical)) !important; }
.dev-tools-scope.al-page .al-console-pill--high .al-pill-count { color: var(--al-high, var(--accent-ember)) !important; }
.dev-tools-scope.al-page .al-console-pill--medium .al-pill-count { color: var(--al-medium, var(--warning)) !important; }
.dev-tools-scope.al-page .al-console-pill--info .al-pill-count { color: var(--al-info, var(--info)) !important; }

/* pill-trend — 10px trend arrow */
.dev-tools-scope.al-page .al-pill-trend {
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
  display: block !important;
  min-width: 8px !important;
}
.dev-tools-scope.al-page .al-pill-trend[data-trend="up"]::after {
  content: '▲' !important;
  color: rgba(193,68,24,0.80) !important;
}
.dev-tools-scope.al-page .al-pill-trend[data-trend="down"]::after {
  content: '▼' !important;
  color: rgba(197,139,58,0.75) !important;
}
.dev-tools-scope.al-page .al-pill-trend[data-trend="flat"]::after {
  content: '' !important;
}

/* ── is-zero dimming — pill з count=0 приглушується ── */
.dev-tools-scope.al-page .al-console-pill.is-zero {
  opacity: 0.45 !important;
  filter: grayscale(0.3) !important;
  transition: opacity 0.3s ease, filter 0.3s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;
}
.dev-tools-scope.al-page .al-console-pill.is-zero:hover {
  opacity: 0.7 !important;
  filter: grayscale(0) !important;
}

/* ── Клікабельність + активний стан severity-pills ── */
.dev-tools-scope.al-page .al-console-pill[role="button"] {
  cursor: pointer !important;
}
.dev-tools-scope.al-page .al-console-pill[role="button"]:hover {
  filter: brightness(1.12) !important;
  transform: translateY(-1px) !important;
}
.dev-tools-scope.al-page .al-console-pill[role="button"]:focus-visible {
  outline: 2px solid currentColor !important;
  outline-offset: 2px !important;
}

/* Active — підсвічення своїм severity-кольором */
.dev-tools-scope.al-page .al-console-pill--active {
  filter: brightness(1.18) !important;
  opacity: 1 !important;
}
.dev-tools-scope.al-page .al-console-pill--critical.al-console-pill--active {
  border-color: rgba(193,68,24,0.85) !important;
  box-shadow: 0 0 0 1px rgba(193,68,24,0.55) inset, 0 0 10px rgba(193,68,24,0.35) !important;
}
.dev-tools-scope.al-page .al-console-pill--high.al-console-pill--active {
  border-color: rgba(227,111,61,0.80) !important;
  box-shadow: 0 0 0 1px rgba(227,111,61,0.50) inset, 0 0 10px rgba(227,111,61,0.30) !important;
}
.dev-tools-scope.al-page .al-console-pill--medium.al-console-pill--active {
  border-color: rgba(224,196,137,0.75) !important;
  box-shadow: 0 0 0 1px rgba(224,196,137,0.45) inset, 0 0 10px rgba(224,196,137,0.25) !important;
}
.dev-tools-scope.al-page .al-console-pill--info.al-console-pill--active {
  border-color: rgba(124,143,136,0.70) !important;
  box-shadow: 0 0 0 1px rgba(124,143,136,0.45) inset, 0 0 10px rgba(124,143,136,0.25) !important;
}

/* ── Console separator (вертикальна риска, rivet-band) ── */
.dev-tools-scope.al-page .al-console-sep {
  display: inline-block !important;
  width: 1px !important;
  height: 20px !important;
  background: rgba(92,68,48,0.40) !important;
  margin: 0 10px !important;
  flex-shrink: 0 !important;
  position: relative !important;
  align-self: center !important;
}
/* Rivet-bolts на separator */
.dev-tools-scope.al-page .al-console-sep::before,
.dev-tools-scope.al-page .al-console-sep::after {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 30%, var(--al-x, #c8a84a) 0%, var(--al-x, #7a4e1a) 60%, var(--border-dim) 100%) !important;
  border: 1px solid rgba(92,68,48,0.6) !important;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.7) !important;
}
.dev-tools-scope.al-page .al-console-sep::before { top: -3px !important; }
.dev-tools-scope.al-page .al-console-sep::after  { bottom: -3px !important; }

/* ── RS2: Tabs — ліва колонка (justify-self: start) ── */
.dev-tools-scope.al-page .al-mc-row--console .alerts-tabs {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0 !important;
  flex-shrink: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: 36px !important;
  justify-self: start !important;
  align-self: center !important;
}
.dev-tools-scope.al-page .al-mc-row--console .alerts-tab {
  flex: 0 0 auto !important;
  height: 28px !important;
  padding: 0 12px !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  font-family: var(--font-ui, 'Oswald', sans-serif) !important; /* UPPERCASE nav tab */
  font-size: 10.5px !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
  background: transparent !important;
  color: var(--al-muted, var(--log-debug)) !important;
  cursor: pointer !important;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
}
.dev-tools-scope.al-page .al-mc-row--console .alerts-tab:hover:not(.alerts-tab--active) {
  background: rgba(197,139,58,0.06) !important;
  color: var(--al-text-secondary, var(--log-notice)) !important;
}
.dev-tools-scope.al-page .al-mc-row--console .alerts-tab--active {
  background: rgba(197,139,58,0.10) !important;
  color: var(--accent-amber, var(--accent-ember)) !important;
  border-bottom: 2px solid var(--accent-amber, var(--accent-ember)) !important;
}
.dev-tools-scope.al-page .al-mc-row--console .alerts-tab--active .tab-count {
  color: var(--accent-amber, var(--accent-ember)) !important;
  opacity: 0.80 !important;
}

/* ── RS2: Filters — права колонка ── */
.dev-tools-scope.al-page .al-mc-row--console .alerts-filters {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 4px !important;
  margin-left: 0 !important;
  flex-shrink: 0 !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  justify-self: end !important;
  align-self: center !important;
}
.dev-tools-scope.al-page .al-mc-row--console .alerts-filters::before {
  display: none !important;
}
.dev-tools-scope.al-page .al-mc-row--console .al-group-btn {
  height: 28px !important;
  padding: 0 8px !important;
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  font-size: 11px !important;
}
.dev-tools-scope.al-page .al-mc-row--console .alerts-filter-select {
  height: 28px !important;
  font-size: 10.5px !important;
  padding: 0 8px !important;
  width: 100px !important;
  min-width: 90px !important;
  max-width: 110px !important;
  flex-shrink: 0 !important;
}

/* Rivet divider vertical — між pills (тепер тонкий 14px) */
.dev-tools-scope.al-page .al-mc-row--console .al-rivet-divider--v {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 10px !important;
  height: 20px !important;
  align-self: center !important;
  flex-shrink: 0 !important;
  border: none !important;
  background: transparent !important;
  position: relative !important;
}
.dev-tools-scope.al-page .al-mc-row--console .al-rivet-divider--v::before {
  content: '' !important;
  display: block !important;
  width: 1px !important;
  height: 14px !important;
  background: rgba(92,68,48,0.38) !important;
}

/* ── Приховати старий al-tabs-rivet-strip ── */
.dev-tools-scope.al-page .al-mc-row--hero .al-tabs-rivet-strip {
  display: none !important;
}

/* ── Hero-banner у RS2 (геометричний центр — дзеркало RS1) ── */
.dev-tools-scope.al-page .al-mc-row--console .al-hero-in-control {
  grid-area: unset !important;
  justify-self: center !important;
  align-self: center !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 320px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  padding: 6px 14px !important;
  height: 36px !important;
  border-radius: 2px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
  overflow: hidden !important;
  position: relative !important;
  border: 1px solid rgba(92,68,48,0.20) !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  animation: banner-slide-in 0.25s ease !important;
  background: rgba(0,0,0,0.18) !important;
}

/* Banner hidden у RS2 — stable state (напівпрозорий) */
.dev-tools-scope.al-page .al-mc-row--console .al-hero-in-control[hidden] {
  display: flex !important;
  visibility: visible !important;
  opacity: 0.38 !important;
  border-color: rgba(92,68,48,0.10) !important;
}

/* Banner severity states у RS2 */
.dev-tools-scope.al-page .al-mc-row--console .al-hero-in-control.al-banner--critical {
  background: rgba(193,68,24,0.07) !important;
  border-color: rgba(193,68,24,0.35) !important;
}
.dev-tools-scope.al-page .al-mc-row--console .al-hero-in-control.al-banner--high {
  background: rgba(227,111,61,0.05) !important;
  border-color: rgba(227,111,61,0.30) !important;
}
.dev-tools-scope.al-page .al-mc-row--console .al-hero-in-control.al-banner--medium {
  background: rgba(224,196,137,0.04) !important;
  border-color: rgba(224,196,137,0.22) !important;
}

/* Hex-bolts по боках banner у RS2 */
.dev-tools-scope.al-page .al-hero-in-control .al-banner-bolt--l {
  left: 5px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  position: absolute !important;
}
.dev-tools-scope.al-page .al-hero-in-control .al-banner-bolt--r {
  right: 5px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  position: absolute !important;
}

/* ═══════════════════════════════════════════════════════════════
   RS3 TELEGRAM BANNER — ПРИБРАНО (banner тепер у RS2)
   Рядок row-status більше не існує в grid, але .al-mc-row--banner
   можна зустріти у старому JS — приховуємо на випадок.
   ═══════════════════════════════════════════════════════════════ */

.dev-tools-scope.al-page .al-mc-row--banner:not(.al-mc-row--console) {
  display: none !important;
  grid-area: unset !important;
}

/* Hex-bolts загальні (legacy, збережено для JS) */
.dev-tools-scope.al-page .al-mc-hero-banner .al-banner-bolt--l {
  left: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  position: absolute !important;
}
.dev-tools-scope.al-page .al-mc-hero-banner .al-banner-bolt--r {
  right: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  position: absolute !important;
}

/* Banner severity-badge праворуч */
.dev-tools-scope.al-page .al-banner-severity-badge {
  margin-left: auto !important;
  flex-shrink: 0 !important;
  font-family: var(--font-ui, 'Oswald', sans-serif); /* UPPERCASE — canon */
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 2px 6px !important;
  border-radius: 2px !important;
  display: none !important;
}
.dev-tools-scope.al-page .al-banner--critical .al-banner-severity-badge {
  display: inline-flex !important;
  background: rgba(193,68,24,0.18) !important;
  color: var(--al-critical, var(--log-critical)) !important;
  border: 1px solid rgba(193,68,24,0.40) !important;
}
.dev-tools-scope.al-page .al-banner--critical .al-banner-severity-badge::before {
  content: 'КРИТИЧНО' !important;
}
.dev-tools-scope.al-page .al-banner--high .al-banner-severity-badge {
  display: inline-flex !important;
  background: rgba(227,111,61,0.15) !important;
  color: var(--al-high, var(--accent-ember)) !important;
  border: 1px solid rgba(227,111,61,0.35) !important;
}
.dev-tools-scope.al-page .al-banner--high .al-banner-severity-badge::before {
  content: 'ВАЖЛИВО' !important;
}

/* ═══════════════════════════════════════════════════════════════
   RS4 FOOTER ROW — тонкий 28px
   ═══════════════════════════════════════════════════════════════ */

.dev-tools-scope.al-page .al-mc-row--footer {
  grid-area: row-footer;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 14px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  background: rgba(0,0,0,0.22) !important;
  border-top: 1px solid rgba(92,68,48,0.18) !important;
}

/* RS4: Smoke ліво (sources + silenced) */
.dev-tools-scope.al-page .al-mc-row--footer .al-mc-smoke {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
  justify-self: start !important;
}
.dev-tools-scope.al-page .al-mc-smoke-sources,
.dev-tools-scope.al-page .al-mc-smoke-silenced {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 10px !important;
  color: var(--accent-brass, var(--accent-brass)) !important;
  opacity: 0.65 !important;
  white-space: nowrap !important;
}
.dev-tools-scope.al-page .al-mc-smoke-silenced {
  color: var(--al-medium, var(--accent-ember)) !important;
}
.dev-tools-scope.al-page .al-mc-smoke-sep {
  font-size: 10px !important;
  color: rgba(92,68,48,0.50) !important;
  margin: 0 2px !important;
}
.dev-tools-scope.al-page .al-mc-smoke-icon {
  font-size: 11px !important;
  opacity: 0.55 !important;
}

/* RS4: Footer center (bulk btn) — auto-колонка grid, центр блоку */
.dev-tools-scope.al-page .al-mc-footer-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: center !important;
}
.dev-tools-scope.al-page .al-mc-bulk-btn {
  font-size: 10.5px !important;
  padding: 3px 10px !important;
  height: 22px !important;
  letter-spacing: 0.07em !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.dev-tools-scope.al-page .al-mc-bulk-btn .material-symbols-outlined {
  font-size: 13px !important;
}

/* RS4: Action group (time) — справа до правого краю блоку */
.dev-tools-scope.al-page .al-mc-row--footer .al-mc-action-group {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
  justify-self: end !important;
}
.dev-tools-scope.al-page .al-mc-action-time {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 10px !important;
  color: var(--accent-brass, var(--accent-brass)) !important;
  opacity: 0.45 !important;
  white-space: nowrap !important;
  justify-self: end !important;
}
.dev-tools-scope.al-page .al-mc-time-text {
  font-family: 'IBM Plex Mono', monospace !important;
}

/* Bulk confirm — row-confirm grid-area */
.dev-tools-scope.al-page .al-module--control > .al-bulk-confirm {
  grid-area: row-confirm;
}

/* ─── End 3-ROW CONTROL LAYOUT v10.0 ─── */

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

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

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