/* ═══════════════════════════════════════════════════════════════
   API HEALTH MONITOR - INDUSTRIAL FORGE v6.0
   Page-specific stylesheet. Header (Balka), back-arrow, chronograph
   handled by shared dt-* CSS - this file only adds page-specific
   chrome and content styling.
   ═══════════════════════════════════════════════════════════════ */

/* ─── §0. LOCAL TOKEN BRIDGE ──────────────────────────────────── */
.dev-tools-scope.ah-page,
.ah-page {
  --ah-bg:        var(--bg-base,      #14100c);
  --ah-surface:   var(--bg-surface,   #1f1812);
  --ah-elevated:  var(--bg-elevated,  #1f1812);
  --ah-void:      var(--bg-void,      #0d0907);
  --ah-yellow:    var(--accent-brass, #c8a855);
  --ah-yellow-bright: var(--accent-brass-hover);
  --ah-yellow-dim: color-mix(in srgb, var(--accent-brass) 60%, var(--bg-void));
  --ah-ember:     var(--accent-ember, var(--log-error));
  --ah-critical:  var(--log-critical, #c14418);
  --ah-high:      var(--log-error,    #e36f3d);
  --ah-medium:    var(--log-warn,     #e0c489);
  --ah-info:      var(--log-info,     #7c8f88);
  --ah-text:      var(--text-bright,  #f3efdc);
  --ah-text-mid:  var(--text-muted,   #bfa37a);
  --ah-muted:     var(--text-muted);
  --ah-border:    var(--border-metal, #5c4430);
  --ah-border-soft: rgba(92,68,48,0.45);

  /* severity backgrounds */
  --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);
  --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);

  /* forge mechanics */
  --forge-radius:  2px;
  --forge-radius-md: 3px;
  --forge-shadow:  0 4px 12px rgba(0,0,0,0.55);
  --forge-shadow-deep: 0 8px 24px rgba(0,0,0,0.7);
  --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);

  /* fonts */
  --ah-font-title:  var(--font-dt-title, 'Cinzel', 'Oswald', serif); /* 🔧 sys-1043 */
  --ah-font-ui:     'Oswald', 'Barlow', sans-serif;
  --ah-font-status: 'IBM Plex Mono', 'JetBrains Mono', monospace;
  --ah-font-body:   'Barlow', sans-serif;
  --ah-font-mono:   'JetBrains Mono', 'IBM Plex Mono', monospace;

  /* layout */
  --max-width: var(--max-content, 1400px);
  --header-h:  96px;
}

/* ─── §1. PAGE CANVAS ─────────────────────────────────────────── */
body.devtools-body.ah-page {
  background-color: var(--ah-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;
  color: var(--ah-text);
  font-family: var(--ah-font-body, 'Barlow', 'Oswald', sans-serif);
  min-height: 100vh;
  padding: 24px max(20px, calc((100vw - var(--max-width)) / 2 + 20px)) 80px;
  position: relative;
  overflow-x: hidden;
}

body.devtools-body.ah-page::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 50% at 50% 0%, rgba(197,139,58,0.14) 0%, rgba(197,139,58,0.04) 55%, transparent 100%),
    radial-gradient(ellipse at 50% 0%, rgba(30,30,30,0) 60%, rgba(0,0,0,0.70) 100%),
    radial-gradient(ellipse at 50% 100%, rgba(30,30,30,0) 60%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
  z-index: 0;
}

body.devtools-body.ah-page::after {
  content: '';
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 280px;
  background: linear-gradient(to top,
    rgba(197,139,58,0.08) 0%,
    rgba(92,68,48,0.05) 45%,
    transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* Background scene container */
.ah-bg-scene {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 1;
}

/* Scan line ambient */
.ah-scan-line {
  position: fixed;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(232, 200, 96, 0.22) 15%,
    rgba(232, 200, 96, 0.72) 50%,
    rgba(232, 200, 96, 0.22) 85%,
    transparent 100%);
  box-shadow: 0 0 10px rgba(232,200,96,0.38), 0 0 22px rgba(197,139,58,0.20);
  pointer-events: none;
  z-index: 2;
  animation: ah-scan-drift 14s linear infinite;
}
@keyframes ah-scan-drift {
  0%   { transform: translateY(0); opacity: 0; }
  10%  { opacity: 0.7; }
  90%  { opacity: 0.7; }
  100% { transform: translateY(100vh); opacity: 0; }
}

/* All page content above bg */
body.devtools-body.ah-page > *:not(.ah-bg-scene):not(.ah-scan-line):not(.ah-back-panel):not(.ah-clock-panel) {
  position: relative;
  z-index: 3;
}

/* ─── §2. HEADER OVERRIDES ───────────────────────────────────── */
.devtools-header.ah-header {
  /* canon-fix 2026-05-20: повернуто до canonical balka (full-width sticky+row).
     Body має padding max(20px, calc((100vw - max-width)/2 + 20px)) для
     центрування контенту → balka повинна вийти за межі цього padding
     через full-bleed pattern (negative margin + 100vw). */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: var(--header-h);
  background:
    linear-gradient(180deg, rgba(44,32,24,0.92) 0%, rgba(20,16,12,0.92) 100%);
  border-bottom: 2px solid var(--ah-yellow);
  box-shadow: var(--forge-shadow), var(--forge-bevel);
}

/* Crest container - relative anchor for SVG + text overlays */
.dt-crest.ah-crest {
  position: relative;
  width: clamp(360px, 64vw, 460px);
  aspect-ratio: 460 / 80;
  margin: 0 auto;
  display: block;
}

.ah-frame-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ── Crest text overlay ── */
.ah-crest-body {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}
.ah-crest-sigil-row {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 12px);
}
h1.dt-crest__title.ah-title {
  font-family: var(--ah-font-title, 'Cinzel', 'Oswald', serif);
  font-size: clamp(15px, 2.1vw, 20px);
  font-weight: 700;
  color: var(--ah-text);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0;
  text-shadow:
    0 1px 0 rgba(0,0,0,0.85),
    0 0 12px rgba(197,139,58,0.30);
  position: relative;
}

/* meta plate */
.ah-crest-meta {
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space, 9px);
  padding: var(--sp-space, 4px 14px);
  background: linear-gradient(180deg, rgba(28,20,12,0.96) 0%, rgba(16,12,8,0.96) 100%);
  border: 1px solid var(--ah-border);
  border-radius: var(--forge-radius);
  box-shadow:
    0 2px 6px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(232,219,178,0.08);
  z-index: 4;
  white-space: nowrap;
}
.ah-crest-meta-icon {
  font-size: 13px;
  color: var(--ah-yellow);
  /* glow drop-shadow видалено за steampunk-каноном */
}
.ah-crest-meta-txt {
  font-family: var(--ah-font-status);
  font-size: 10px;
  font-weight: 400;
  color: var(--ah-text-mid);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.dt-header-row-top { display: none; }

/* ─── §3. CREST GEAR ROTATION ANIMATIONS ─────────────────────── */
@keyframes ah-sv-rot-cw  { from { transform: rotate(0deg); }   to { transform: rotate(360deg); } }
@keyframes ah-sv-rot-ccw { from { transform: rotate(0deg); }   to { transform: rotate(-360deg); } }

.ah-sv-rot { transform-origin: center; transform-box: fill-box; will-change: transform; }
.ah-sv-rot--cw-16  { animation: ah-sv-rot-cw  16s linear infinite; }
.ah-sv-rot--ccw-16 { animation: ah-sv-rot-ccw 16s linear infinite; }
.ah-sv-rot--cw-20  { animation: ah-sv-rot-cw  20s linear infinite; }
.ah-sv-rot--ccw-20 { animation: ah-sv-rot-ccw 20s linear infinite; }
.ah-sv-rot--cw-28  { animation: ah-sv-rot-cw  28s linear infinite; }
.ah-sv-rot--ccw-28 { animation: ah-sv-rot-ccw 28s linear infinite; }
.ah-sv-rot--cw-40  { animation: ah-sv-rot-cw  40s linear infinite; }
.ah-sv-rot--ccw-50 { animation: ah-sv-rot-ccw 50s linear infinite; }
.ah-sv-rot--cw-55  { animation: ah-sv-rot-cw  55s linear infinite; }

/* BG-SCENE ambient gear rotations - великі повільніше, малі швидше */
.ah-bg-gear-a { transform-origin: center; transform-box: fill-box; animation: ah-sv-rot-cw  90s linear infinite; will-change: transform; }
.ah-bg-gear-b { transform-origin: center; transform-box: fill-box; animation: ah-sv-rot-ccw 120s linear infinite; will-change: transform; }
.ah-bg-gear-c { transform-origin: center; transform-box: fill-box; animation: ah-sv-rot-cw  50s linear infinite; will-change: transform; }
.ah-bg-gear-d { transform-origin: center; transform-box: fill-box; animation: ah-sv-rot-ccw 70s  linear infinite; will-change: transform; }

/* Per-FG/BG rotor pivots */
.ah-sv-fg-gear.ah-sv-fgg--tl .ah-sv-rot { transform-origin: 32px 11px; }
.ah-sv-fg-gear.ah-sv-fgg--tr .ah-sv-rot { transform-origin: 12px 10px; }
.ah-sv-fg-gear.ah-sv-fgg--bl .ah-sv-rot { transform-origin: 23.5px 6.5px; }
.ah-sv-fg-gear.ah-sv-fgg--br .ah-sv-rot { transform-origin: 26.5px 7.5px; }
.ah-sv-fg-gear.ah-sv-fgg--ml .ah-sv-rot,
.ah-sv-fg-gear.ah-sv-fgg--mr .ah-sv-rot { transform-origin: 18px 5.5px; }
.ah-sv-bg-gear.ah-sv-bgg--L .ah-sv-rot { transform-origin: 40px 12px; }
.ah-sv-bg-gear.ah-sv-bgg--R .ah-sv-rot { transform-origin: 4px 8px; }
.ah-sv-bg-gear.ah-sv-bgg--C .ah-sv-rot { transform-origin: 3px -15px; }

/* ─── §4. AMBER LAMP ANIMATIONS ───────────────────────────────── */
@keyframes ah-lamp-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1.0;  transform: scale(1.08); }
}
.ah-sv-lamp-halo {
  transform-box: fill-box;
  transform-origin: center;
  animation: ah-lamp-pulse 2.6s ease-in-out infinite;
}
.ah-sv-lamp.ah-sv-lamp--1 .ah-sv-lamp-halo { animation-delay: 0s; }
.ah-sv-lamp.ah-sv-lamp--2 .ah-sv-lamp-halo { animation-delay: 0.65s; }
.ah-sv-lamp.ah-sv-lamp--3 .ah-sv-lamp-halo { animation-delay: 1.3s; }
.ah-sv-lamp.ah-sv-lamp--4 .ah-sv-lamp-halo { animation-delay: 1.95s; }

/* Steam puffs */
@keyframes ah-steam-rise {
  0%   { opacity: 0; transform: translateY(2px); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-10px); }
}
.ah-sv-steam-puff { transform-box: fill-box; transform-origin: center; animation: ah-steam-rise 4s ease-in-out infinite; }
.ah-sv-sp--a { animation-delay: 0s; }
.ah-sv-sp--b { animation-delay: 0.6s; }
.ah-sv-sp--c { animation-delay: 1.2s; }

/* ─── §5. BACK PANEL ─────────────────────────────────────────── */
.ah-back-panel {
  position: fixed;
  top: calc(var(--header-h) / 2 + 22px);
  left: max(20px, calc((100vw - var(--max-width)) / 2 + 20px));
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: var(--sp-space, 10px);
  z-index: 50;
}

.devtools-back-wrap.ah-arrow-wrap {
  position: relative;
  width: 168px;
  height: 40px;
}
a.devtools-back.ah-arrow-btn {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}
a.devtools-back.ah-arrow-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
a.devtools-back.ah-arrow-btn:active { transform: translateY(1px); filter: brightness(0.95); }
.ah-backarrow-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.55));
}
text.ah-bk-label {
  font-family: var(--font-ui, 'Oswald', sans-serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* Back-arrow rotors */
@keyframes ah-bk-rot-back-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes ah-bk-rot-tail-spin { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@keyframes ah-bk-rot-tip-spin  { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.ah-bk-rot-back { transform-origin: center; transform-box: fill-box; animation: ah-bk-rot-back-spin 45s linear infinite; }
.ah-bk-rot-tail { transform-origin: center; transform-box: fill-box; animation: ah-bk-rot-tail-spin 55s linear infinite; }
.ah-bk-rot-tip  { transform-origin: center; transform-box: fill-box; animation: ah-bk-rot-tip-spin  45s linear infinite; }

/* Back arrow tooltip */
.ah-arrow-tooltip {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: var(--sp-space, 4px 9px);
  background: linear-gradient(180deg, rgba(28,20,12,0.96), rgba(16,12,8,0.96));
  border: 1px solid var(--ah-border);
  border-radius: var(--forge-radius);
  color: var(--ah-text-mid);
  font-family: var(--font-ui, 'Oswald', sans-serif);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
  z-index: 10;
}
a.devtools-back.ah-arrow-btn:hover + .ah-arrow-tooltip,
.devtools-back-wrap.ah-arrow-wrap:hover .ah-arrow-tooltip { opacity: 1; }

/* ─── §6. REFRESH CLUSTER ────────────────────────────────────── */
.ah-refresh-cluster {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 8px);
}
.ah-refresh-sidecol {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space, 4px);
  align-items: stretch;
}

/* Icon button */
.ah-icon-btn {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(44,32,24,0.94), rgba(20,16,12,0.94));
  border: 1px solid var(--ah-border);
  border-radius: var(--forge-radius);
  color: var(--ah-text-mid);
  cursor: pointer;
  position: relative;
  box-shadow: var(--forge-bevel);
  transition: all 0.15s ease;
}
.ah-icon-btn:hover {
  border-color: var(--ah-yellow);
  color: var(--ah-yellow);
  box-shadow: var(--forge-bevel), 0 0 0 1px rgba(197,139,58,0.25);
}
.ah-icon-btn:active { transform: translateY(1px); }
.ah-icon-btn .material-symbols-outlined { font-size: 18px; }
.ah-refresh-sidebtn { width: 38px; height: 32px; }
.ah-icon-btn.is-active {
  color: var(--ah-yellow);
  border-color: var(--ah-yellow);
  box-shadow: var(--forge-bevel), 0 0 8px rgba(232,200,96,0.35);
}

/* Forge button */
.ah-forge-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space, 8px);
  padding: var(--sp-space, 10px 18px);
  background: linear-gradient(180deg,
    rgba(60,42,22,0.96) 0%,
    rgba(36,26,14,0.96) 50%,
    rgba(20,14,8,0.96) 100%);
  border: 1px solid var(--ah-yellow-dim);
  border-radius: var(--forge-radius);
  color: var(--ah-yellow-bright);
  font-family: var(--font-ui, 'Oswald', sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: var(--forge-bevel), var(--forge-shadow);
  transition: all 0.15s ease;
}
.ah-forge-btn:hover {
  border-color: var(--ah-yellow);
  color: var(--ah-text);
  background: linear-gradient(180deg,
    rgba(80,56,28,0.96) 0%,
    rgba(48,34,18,0.96) 50%,
    rgba(28,18,10,0.96) 100%);
  box-shadow: var(--forge-bevel), 0 6px 14px rgba(0,0,0,0.6), 0 0 0 1px rgba(232,200,96,0.2);
}
.ah-forge-btn:active { transform: translateY(1px); box-shadow: var(--forge-inset); }
.ah-forge-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ah-forge-btn .material-symbols-outlined { font-size: 16px; }

.ah-forge-btn.spinning .material-symbols-outlined,
.health-btn.spinning .material-symbols-outlined { animation: ah-spin 1s linear infinite; }
@keyframes ah-spin { to { transform: rotate(360deg); } }

.ah-forge-btn--ghost {
  background: linear-gradient(180deg, rgba(34,26,18,0.92), rgba(18,14,10,0.92));
  border-color: var(--ah-border);
  color: var(--ah-text-mid);
}
.ah-forge-btn--ghost:hover {
  border-color: var(--ah-yellow);
  color: var(--ah-yellow);
}

.ah-forge-btn--icon { padding: var(--sp-card-pad, 10px 12px); }

/* steam puff */
.ah-btn-steam {
  position: absolute;
  top: -6px; left: 14px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240,220,180,0.55) 0%, rgba(240,220,180,0) 70%);
  pointer-events: none;
  opacity: 0;
}
.ah-forge-btn:active .ah-btn-steam,
.ah-forge-btn:focus .ah-btn-steam {
  animation: ah-steam-puff-anim 0.9s ease-out;
}
@keyframes ah-steam-puff-anim {
  0%   { opacity: 0;   transform: translateY(0) scale(0.6); }
  20%  { opacity: 0.9; }
  100% { opacity: 0;   transform: translateY(-22px) scale(2); }
}

#countdown-label {
  font-family: var(--ah-font-status);
  font-size: 10px;
  color: var(--ah-text-mid);
  letter-spacing: 0.1em;
  padding: var(--sp-space, 2px 6px);
  background: rgba(20,16,12,0.7);
  border: 1px solid var(--ah-border-soft);
  border-radius: var(--forge-radius);
}

/* ─── §7. CHRONOGRAPH PANEL ──────────────────────────────────── */
.ah-clock-panel {
  position: fixed;
  top: calc(var(--header-h) / 2 + 22px);
  right: max(20px, calc((100vw - var(--max-width)) / 2 + 20px));
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: var(--sp-space, 10px);
  z-index: 50;
  pointer-events: auto;
}

.ah-clock-sidecol {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space, 4px);
}
.ah-clock-sidebtn { width: 38px; height: 32px; }

.clock-unit {
  position: relative;
  width: 207px;
  height: 47px;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.55));
}
.ah-clock-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.clock-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
}
.display-window {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 3px);
  font-family: var(--ah-font-status);
  font-weight: 400;
}
.nixie {
  position: relative;
  width: 22px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nixie-ghost {
  position: absolute;
  font-size: 22px;
  color: rgba(232, 156, 32, 0.10);
  font-family: var(--font-mono, 'JetBrains Mono', 'IBM Plex Mono', monospace);
}
.nixie-digit {
  position: relative;
  font-size: 22px;
  font-family: var(--font-mono, 'JetBrains Mono', 'IBM Plex Mono', monospace);
  color: var(--ah-yellow-bright);
  text-shadow:
    0 0 6px rgba(232,156,32,0.65),
    0 0 14px rgba(227,111,61,0.35);
}
.nixie-colon {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space, 4px);
  align-items: center;
  margin: 0 2px;
}
.nixie-colon .colon-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--ah-yellow-bright);
  box-shadow: 0 0 4px rgba(232,156,32,0.6);
}
.nixie-colon.colon-blink .colon-dot { animation: ah-colon-blink 1.6s ease-in-out infinite; }
@keyframes ah-colon-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.25; } }

/* clock tooltip */
.ah-clock-tooltip {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space, 8px);
  padding: var(--sp-space, 4px 10px);
  background: linear-gradient(180deg, rgba(28,20,12,0.96), rgba(16,12,8,0.96));
  border: 1px solid var(--ah-border);
  border-radius: var(--forge-radius);
  font-family: var(--font-ui, 'Oswald', sans-serif);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ah-text-mid);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
.ah-clock-panel:hover .ah-clock-tooltip { opacity: 1; }
.clock-date-label { color: var(--ah-yellow); }
.clock-date-sep {
  width: 1px; height: 9px;
  background: var(--ah-border);
}
.data-value { color: var(--ah-text); font-weight: 400; }

/* ─── §8. PIPE SECTION ───────────────────────────────────────── */
.ah-pipe-section {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  margin: var(--sp-space, 12px 0 18px);
  padding: var(--sp-card-pad, 0 32px);
  height: 56px;
  pointer-events: none;
}
.ah-pipe { display: flex; flex-direction: column; align-items: center; gap: 0; }
.ah-pipe--left  { transform: translateX(-8px); }
.ah-pipe--right { transform: translateX(8px); position: relative; }
.ah-pipe-stretch { height: 38px; }
.ah-pipe-gauge {
  position: absolute;
  right: -36px;
  top: 50%;
  transform: translateY(-50%);
}

/* ─── §9. TOOLBAR ───────────────────────────────────────────── */
.ah-toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 14px);
  flex-wrap: wrap;
  padding: var(--sp-space, 12px 18px);
  margin-bottom: var(--sp-space, 18px);
  background: linear-gradient(180deg, rgba(34,26,18,0.92), rgba(18,14,10,0.92));
  border: 1px solid var(--ah-border);
  border-radius: var(--forge-radius);
  box-shadow: var(--forge-bevel), var(--forge-shadow);
  position: relative;
}
.ah-ctrl-group { display: inline-flex; align-items: center; gap: var(--sp-gap, 10px); }
.ah-ctrl-sep {
  width: 1px;
  height: 22px;
  background: linear-gradient(180deg, transparent 0%, var(--ah-border) 50%, transparent 100%);
}
.ah-ctrl-label {
  font-family: var(--font-ui, 'Oswald', sans-serif);
  font-size: 10px;
  font-weight: 600;
  color: var(--ah-text-mid);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ah-forge-select,
.ah-forge-input {
  padding: var(--sp-space, 7px 10px);
  background: rgba(13, 9, 7, 0.85);
  border: 1px solid var(--ah-border);
  border-radius: var(--forge-radius);
  color: var(--ah-text);
  font-family: var(--ah-font-mono, 'IBM Plex Mono', monospace);
  font-size: 11px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
  outline: none;
  transition: all 0.15s ease;
}
.ah-forge-select:focus,
.ah-forge-input:focus {
  border-color: var(--ah-yellow);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5), 0 0 0 1px rgba(197,139,58,0.3);
}
.ah-forge-select { cursor: pointer; min-width: 110px; }
.ah-forge-input { min-width: 220px; padding-left: 32px; }

.ah-search-wrap { position: relative; }
.ah-search-wrap > .material-symbols-outlined {
  position: absolute;
  top: 50%; left: 8px;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--ah-muted);
  pointer-events: none;
}

.ah-filter-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space, 6px);
  font-family: var(--font-ui, 'Oswald', sans-serif);
  font-size: 10px;
  font-weight: 500;
  color: var(--ah-text-mid);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
}
.ah-filter-label input[type="checkbox"] {
  width: 14px; height: 14px;
  accent-color: var(--ah-yellow);
  cursor: pointer;
}

/* ─── §10. MODULE PANEL CONTAINER ───────────────────────────── */
.ah-module-panel {
  position: relative;
  padding: var(--sp-space, 22px 22px 28px);
  background: linear-gradient(180deg, rgba(31,24,18,0.92), rgba(20,16,12,0.92));
  border: 1px solid var(--ah-border);
  border-radius: var(--forge-radius);
  box-shadow: var(--forge-shadow), var(--forge-inset);
  margin-bottom: var(--sp-space, 22px);
}

/* corner rivets */
.ah-module-rivet {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--border-metal) 10%, var(--bg-elevated) 80%);
  border: 1px solid rgba(232,219,178,0.10);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.7), 0 1px 0 rgba(232,219,178,0.05);
}
.ah-module-rivet--tl { top: 7px; left: 7px; }
.ah-module-rivet--tr { top: 7px; right: 7px; }
.ah-module-rivet--bl { bottom: 7px; left: 7px; }
.ah-module-rivet--br { bottom: 7px; right: 7px; }

@keyframes ah-module-gear-spin {
  from { transform: translateX(-50%) rotate(0deg); }
  to   { transform: translateX(-50%) rotate(360deg); }
}
.ah-module-gear {
  position: absolute;
  top: 6px; left: 50%;
  display: inline-flex;
  color: var(--ah-yellow-dim);
  opacity: 0.55;
  pointer-events: none;
  animation: ah-module-gear-spin 24s linear infinite;
  transform-origin: left center;
}

/* ─── §11. BLOCK HEADER ─────────────────────────────────────── */
.ah-block-header {
  margin-bottom: var(--sp-space, 16px);
  padding-bottom: var(--sp-space, 12px);
  border-bottom: 1px dashed var(--ah-border-soft);
}
.ah-block-title-row {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 10px);
}
.ah-block-icon {
  font-size: 22px;
  color: var(--ah-yellow);
  /* glow drop-shadow видалено за steampunk-каноном */
}
.ah-block-title {
  font-family: var(--ah-font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--ah-text);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ah-block-hint {
  display: inline-flex;
  color: var(--ah-muted);
  cursor: help;
}
.ah-block-hint .material-symbols-outlined { font-size: 16px; }
.ah-block-hint:hover { color: var(--ah-yellow); }

/* ─── §12. HUD STRIP - health score ─────────────────────────── */
.ah-hud-strip {
  position: relative;
  padding: var(--sp-space, 16px 20px);
  margin-bottom: var(--sp-space, 14px);
  background: linear-gradient(180deg, rgba(20,16,12,0.96), rgba(13,9,7,0.96));
  border: 1px solid var(--ah-border);
  border-radius: var(--forge-radius);
  box-shadow: var(--forge-inset), var(--forge-shadow);
}
.ah-score-rivet {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 7px; height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--border-metal) 10%, var(--bg-elevated) 80%);
  border: 1px solid rgba(232,219,178,0.10);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.7);
}
.ah-score-rivet--l { left: 7px; }
.ah-score-rivet--r { right: 7px; }

.score-bar-inner {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--sp-space, 18px);
  padding-left: var(--sp-space, 14px);
  padding-right: var(--sp-space, 14px);
}
.score-value {
  font-family: var(--font-mono, 'JetBrains Mono', 'IBM Plex Mono', monospace);
  font-size: 28px;
  font-weight: 600;
  color: var(--ah-yellow);
  letter-spacing: 0.06em;
  min-width: 88px;
  text-align: center;
  /* glow text-shadow видалено за steampunk-каноном */
}
.score-value.score-warn  { color: var(--ah-medium); }
.score-value.score-error { color: var(--ah-critical); }

.score-info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space, 6px);
}
.score-label {
  font-family: var(--ah-font-ui);
  font-size: 11px;
  font-weight: 400;
  color: var(--ah-text-mid);
  letter-spacing: 0.06em;
}
.score-track {
  height: 8px;
  background: rgba(13,9,7,0.85);
  border: 1px solid var(--ah-border-soft);
  border-radius: var(--forge-radius);
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.85);
}
.score-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--mod-observer) 0%, var(--accent-brass) 60%, var(--accent-brass-hover) 100%);
  transition: width 0.6s ease;
  box-shadow: 0 0 10px rgba(197,139,58,0.55);
}
.score-fill.fill-warn    { background: linear-gradient(90deg, var(--accent-brass) 0%, var(--log-warn) 100%); }
.score-fill.fill-error   { background: linear-gradient(90deg, var(--log-critical) 0%, var(--log-error) 100%); }
.score-fill.fill-perfect { background: linear-gradient(90deg, var(--mod-observer) 0%, color-mix(in srgb, var(--mod-observer) 60%, var(--text-bright)) 100%); }

.ah-streak-wrap { display: inline-flex; }
.ah-streak-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space, 5px);
  padding: var(--sp-space, 4px 10px);
  font-family: var(--font-ui, 'Oswald', sans-serif);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--ah-border);
  border-radius: var(--forge-radius);
  background: rgba(20,16,12,0.8);
  color: var(--ah-text-mid);
}
.ah-streak-badge.streak-ok      { color: color-mix(in srgb, var(--mod-observer) 60%, var(--text-bright)); border-color: rgba(168,200,120,0.4); }
.ah-streak-badge.streak-perfect { color: var(--ah-yellow-bright); border-color: rgba(232,200,96,0.5); box-shadow: 0 0 6px rgba(232,200,96,0.3); }
.ah-streak-badge.streak-broken  { color: var(--ah-high); border-color: rgba(227,111,61,0.4); }

.score-meta {
  font-family: var(--ah-font-mono, 'IBM Plex Mono', monospace);
  font-size: 10px;
  color: var(--ah-muted);
  letter-spacing: 0.06em;
}

/* ─── §13. CORRELATION BANNER ───────────────────────────────── */
.ah-correlation-banner {
  padding: var(--sp-space, 10px 16px);
  margin-bottom: var(--sp-space, 14px);
  background: linear-gradient(180deg, var(--bg-medium), rgba(20,16,12,0.85));
  border: 1px solid var(--border-medium);
  border-left: 3px solid var(--ah-medium);
  border-radius: var(--forge-radius);
  font-family: var(--ah-font-mono, 'IBM Plex Mono', monospace);
  font-size: 11px;
  color: var(--ah-text);
  animation: ah-banner-slide 0.25s ease-out;
}
@keyframes ah-banner-slide {
  from { transform: translateY(-6px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ─── §14. HINT (collapsible) ───────────────────────────────── */
.ah-hint {
  margin-bottom: var(--sp-space, 14px);
  background: rgba(13,9,7,0.55);
  border: 1px solid var(--ah-border-soft);
  border-radius: var(--forge-radius);
  overflow: hidden;
}
.ah-hint-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-space, 10px);
  padding: var(--sp-space, 10px 14px);
  background: linear-gradient(180deg, rgba(34,26,18,0.7), rgba(18,14,10,0.7));
  border: none;
  border-bottom: 1px solid transparent;
  color: var(--ah-text-mid);
  font-family: var(--font-ui, 'Oswald', sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ah-hint-toggle:hover { color: var(--ah-yellow); background: linear-gradient(180deg, rgba(50,38,24,0.7), rgba(28,22,14,0.7)); }
.ah-hint-toggle .material-symbols-outlined { font-size: 16px; color: var(--ah-yellow); }
.ah-hint-toggle-label { flex: 1; text-align: left; }
.ah-hint-arrow {
  transition: transform 0.2s ease;
}
.ah-hint-toggle[aria-expanded="true"] .ah-hint-arrow { transform: rotate(180deg); }
.ah-hint-content[hidden] { display: none; }
.ah-hint-content {
  padding: var(--sp-space, 16px);
  animation: ah-hint-slide 0.18s ease-out;
}
@keyframes ah-hint-slide { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.ah-hint-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-space, 10px);
  margin-bottom: var(--sp-space, 14px);
}
.ah-hint-card {
  display: flex;
  gap: var(--sp-space, 10px);
  padding: var(--sp-space, 10px 12px);
  background: linear-gradient(180deg, rgba(31,24,18,0.6), rgba(13,9,7,0.6));
  border: 1px solid var(--ah-border-soft);
  border-radius: var(--forge-radius);
}
.ah-hint-card-icon { font-size: 22px; color: var(--ah-yellow); flex-shrink: 0; }
.ah-hint-card-title {
  font-family: var(--font-ui, 'Oswald', sans-serif);
  font-size: 11px;
  font-weight: 600;
  color: var(--ah-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--sp-space, 4px);
}
.ah-hint-card-text {
  font-family: var(--ah-font-body, 'Barlow', 'Oswald', sans-serif);
  font-size: 12px;
  color: var(--ah-text-mid);
  line-height: 1.5;
}
.ah-hint-card-text code {
  font-family: var(--ah-font-mono, 'IBM Plex Mono', monospace);
  font-size: 11px;
  color: var(--ah-yellow);
  padding: var(--sp-space, 1px 5px);
  background: rgba(13,9,7,0.7);
  border: 1px solid var(--ah-border-soft);
  border-radius: 2px;
}
.ah-pill {
  display: inline-block;
  padding: var(--sp-space, 1px 6px);
  font-family: var(--ah-font-mono, 'IBM Plex Mono', monospace);
  font-size: 10px;
  border-radius: 2px;
  border: 1px solid var(--ah-border-soft);
  background: rgba(13,9,7,0.65);
}
.ah-pill--ok   { color: color-mix(in srgb, var(--mod-observer) 60%, var(--text-bright)); border-color: rgba(168,200,120,0.4); }
.ah-pill--warn { color: var(--ah-medium); border-color: rgba(224,196,137,0.4); }
.ah-pill--err  { color: var(--ah-high); border-color: rgba(227,111,61,0.4); }

.ah-hint-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space, 10px);
  padding-top: var(--sp-space, 12px);
  border-top: 1px dashed var(--ah-border-soft);
}
.ah-hint-shortcuts,
.ah-hint-config {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-space, 10px);
  font-family: var(--font-ui, 'Oswald', sans-serif);
  font-size: 10px;
  color: var(--ah-text-mid);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ah-hint-shortcuts-label,
.ah-hint-config-label {
  color: var(--ah-yellow);
  font-weight: 600;
}
.ah-hint-shortcuts kbd {
  padding: var(--sp-space, 2px 7px);
  background: linear-gradient(180deg, var(--bg-elevated), var(--bg-base));
  border: 1px solid var(--ah-border);
  border-radius: 2px;
  font-family: var(--ah-font-mono, 'IBM Plex Mono', monospace);
  font-size: 10px;
  color: var(--ah-text);
  box-shadow: 0 1px 0 rgba(0,0,0,0.6), inset 0 1px 0 rgba(232,219,178,0.08);
}
.ah-hint-config label { display: inline-flex; align-items: center; gap: var(--sp-gap, 5px); cursor: pointer; }
.ah-hint-config input[type="number"] {
  width: 60px;
  padding: var(--sp-space, 4px 6px);
  background: rgba(13,9,7,0.85);
  border: 1px solid var(--ah-border);
  border-radius: var(--forge-radius);
  color: var(--ah-text);
  font-family: var(--ah-font-mono, 'IBM Plex Mono', monospace);
  font-size: 11px;
  text-align: center;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}
.ah-hint-config input[type="number"]:focus {
  outline: none;
  border-color: var(--ah-yellow);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.5), 0 0 0 1px rgba(197,139,58,0.3);
}

/* ─── §15. MAIN ─────────────────────────────────────────────── */
.health-main { display: block; min-height: 100px; }
.ah-main-init {
  padding: var(--sp-space, 40px 0);
  text-align: center;
  color: var(--ah-muted);
  font-family: var(--font-ui, 'Oswald', sans-serif);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  animation: ah-init-pulse 2s ease-in-out infinite;
}
@keyframes ah-init-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }

/* ─── §16. MODULE SECTIONS ──────────────────────────────────── */
.module-section,
.special-section {
  position: relative;
  margin-bottom: var(--sp-space, 14px);
  background: linear-gradient(180deg, rgba(31,24,18,0.85), rgba(20,16,12,0.85));
  border: 1px solid var(--ah-border);
  border-left: 6px solid var(--mod-color, var(--ah-border));
  border-radius: var(--forge-radius);
  box-shadow: var(--forge-inset), inset 0 1px 0 rgba(232,219,178,0.14), var(--forge-shadow), -2px 0 12px var(--mod-glow, rgba(92,68,48,0.08));
  overflow: hidden;
  animation: ah-card-enter 0.2s ease-out;
}
@keyframes ah-card-enter { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

.module-section::before,
.module-section::after,
.special-section::before,
.special-section::after {
  content: '';
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--border-metal) 10%, var(--bg-base) 80%);
  border: 1px solid rgba(232,219,178,0.08);
  box-shadow: inset 0 1px 1.5px rgba(0,0,0,0.7);
  pointer-events: none;
  z-index: 1;
}
.module-section::before, .special-section::before { top: 6px; left: 6px; }
.module-section::after,  .special-section::after  { top: 6px; right: 6px; }

.module-header,
.special-header {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 10px);
  padding: var(--sp-space, 10px 14px);
  background: linear-gradient(180deg, rgba(50,36,22,0.45), rgba(28,22,14,0.45));
  border-bottom: 1px solid var(--ah-border-soft);
  cursor: pointer;
  transition: background 0.15s ease;
}
.module-header:hover,
.special-header:hover { background: linear-gradient(180deg, rgba(70,52,32,0.5), rgba(36,28,18,0.5)); }
.module-icon {
  font-size: 18px;
  color: var(--mod-color, var(--ah-yellow));
}
.module-name {
  font-family: var(--font-ui, 'Oswald', sans-serif);
  font-size: 12px;
  font-weight: 600;
  color: var(--ah-text);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  flex: 1;
}
.module-badge {
  padding: var(--sp-space, 2px 8px);
  font-family: var(--ah-font-mono, 'IBM Plex Mono', monospace);
  font-size: 10px;
  border-radius: var(--forge-radius);
  border: 1px solid var(--ah-border);
  background: rgba(13,9,7,0.7);
  color: var(--ah-text-mid);
}
.module-badge.badge-ok      { color: color-mix(in srgb, var(--mod-observer) 60%, var(--text-bright)); border-color: rgba(168,200,120,0.4); }
.module-badge.badge-warn    { color: var(--ah-medium); border-color: rgba(224,196,137,0.4); }
.module-badge.badge-error   { color: var(--ah-high); border-color: rgba(227,111,61,0.5); background: rgba(227,111,61,0.08); }
.module-badge.badge-pending { color: var(--ah-muted); }

.ah-collapse-arrow {
  font-size: 16px;
  color: var(--ah-muted);
  transition: transform 0.2s ease;
}
.module-section.is-collapsed .ah-collapse-arrow { transform: rotate(-90deg); }
.module-section.is-collapsed .ah-module-table-wrap,
.module-section.is-collapsed .endpoints-table { display: none; }

.module-section.has-error  { border-left-color: var(--ah-high); }
.module-section.has-warn   { border-left-color: var(--ah-medium); }

/* ─── §17. ENDPOINTS TABLE ──────────────────────────────────── */
.ah-module-table-wrap { padding: var(--sp-card-pad, 0); }
.endpoints-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ah-font-mono, 'IBM Plex Mono', monospace);
  font-size: 11px;
}
.endpoints-table thead th {
  padding: var(--sp-space, 7px 12px);
  background: rgba(13,9,7,0.65);
  border-bottom: 1px solid var(--ah-border-soft);
  font-family: var(--font-ui, 'Oswald', sans-serif);
  font-size: 10px;
  font-weight: 600;
  color: var(--ah-yellow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
}
.endpoint-row {
  border-bottom: 1px solid rgba(92,68,48,0.18);
  transition: background 0.1s ease;
}
.endpoint-row:nth-child(odd) { background: rgba(31,24,18,0.35); }
.endpoint-row:hover { background: rgba(80,58,30,0.65); box-shadow: inset 3px 0 0 var(--ah-yellow); }
.endpoint-row td { padding: var(--sp-card-pad, 7px 12px); vertical-align: middle; color: var(--ah-text); }
.endpoint-row.status-changed { animation: ah-row-flash 1.2s ease-out; }
@keyframes ah-row-flash {
  0%   { background: rgba(232,200,96,0.18); }
  100% { background: rgba(31,24,18,0.35); }
}

/* method badges */
.method-badge {
  display: inline-block;
  padding: var(--sp-space, 1px 6px);
  font-family: var(--font-ui, 'Oswald', sans-serif);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  border-radius: var(--forge-radius);
  border: 1px solid var(--ah-border);
  background: rgba(13,9,7,0.7);
  color: var(--ah-text-mid);
  text-transform: uppercase;
}
.method-badge.get    { color: var(--mod-applicant); border-color: rgba(106,158,200,0.4); }
.method-badge.post   { color: color-mix(in srgb, var(--mod-observer) 80%, var(--accent-brass)); border-color: rgba(138,168,106,0.4); }
.method-badge.patch  { color: var(--ah-medium); border-color: rgba(224,196,137,0.4); }
.method-badge.delete { color: var(--ah-high); border-color: rgba(227,111,61,0.4); }
.method-badge.put    { color: var(--ah-yellow); border-color: rgba(197,139,58,0.4); }

/* path cell */
.ep-path-cell { max-width: 360px; }
.ep-path {
  font-family: var(--ah-font-mono, 'IBM Plex Mono', monospace);
  font-size: 11px;
  color: var(--ah-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ep-label {
  display: block;
  font-family: var(--ah-font-body, 'Barlow', 'Oswald', sans-serif);
  font-size: 10px;
  color: var(--ah-muted);
  margin-top: 2px;
}
.ep-copy-url {
  margin-left: var(--sp-space, 6px);
  background: none;
  border: none;
  color: var(--ah-muted);
  cursor: pointer;
  padding: var(--sp-card-pad, 0);
  font-size: 12px;
}
.ep-copy-url:hover { color: var(--ah-yellow); }
.ep-copy-url.copied { color: color-mix(in srgb, var(--mod-observer) 60%, var(--text-bright)); }

/* status pills */
.ep-status {
  display: inline-block;
  padding: var(--sp-space, 1px 7px);
  font-family: var(--ah-font-mono, 'IBM Plex Mono', monospace);
  font-size: 10px;
  border-radius: var(--forge-radius);
  border: 1px solid var(--ah-border);
  background: rgba(13,9,7,0.7);
  color: var(--ah-text-mid);
}
.ep-status.s-ok      { color: color-mix(in srgb, var(--mod-observer) 60%, var(--text-bright)); border-color: rgba(168,200,120,0.4); }
.ep-status.s-warn    { color: var(--ah-medium); border-color: rgba(224,196,137,0.4); }
.ep-status.s-error   { color: var(--ah-high); border-color: rgba(227,111,61,0.5); background: rgba(227,111,61,0.10); }
.ep-status.s-pending { color: var(--ah-muted); }

/* response time */
.ep-ms { font-family: var(--ah-font-mono, 'IBM Plex Mono', monospace); font-size: 11px; }
.ep-ms.ms-fast { color: color-mix(in srgb, var(--mod-observer) 60%, var(--text-bright)); }
.ep-ms.ms-warn { color: var(--ah-medium); }
.ep-ms.ms-slow { color: var(--ah-high); }

/* status LED dot */
.ep-dot {
  display: inline-block;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--text-muted), var(--bg-elevated));
  border: 1px solid rgba(232,219,178,0.15);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.8);
  flex-shrink: 0;
  vertical-align: middle;
}
.ep-dot.dot-ok       { background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--mod-observer) 50%, var(--text-bright)) 5%, var(--mod-observer) 60%, color-mix(in srgb, var(--mod-observer) 30%, var(--bg-void)) 100%); box-shadow: inset 0 1px 2px rgba(0,0,0,0.5), 0 0 4px rgba(168,200,120,0.45); animation: ah-status-forge-ok 3s ease-in-out infinite; }
.ep-dot.dot-error    { background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent-ember) 70%, var(--text-bright)) 5%, var(--log-critical) 60%, color-mix(in srgb, var(--log-critical) 60%, var(--bg-void)) 100%); box-shadow: inset 0 1px 2px rgba(0,0,0,0.5), 0 0 5px rgba(227,111,61,0.55); animation: ah-forge-pulse 2s ease-in-out infinite; }
.ep-dot.dot-warn     { background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent-brass-hover) 70%, var(--text-bright)) 5%, var(--accent-brass) 60%, color-mix(in srgb, var(--accent-brass) 35%, var(--bg-void)) 100%); box-shadow: inset 0 1px 2px rgba(0,0,0,0.5), 0 0 4px rgba(232,200,96,0.45); }
.ep-dot.dot-scanning { background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--mod-applicant) 50%, var(--text-bright)) 5%, var(--mod-applicant) 60%, color-mix(in srgb, var(--mod-applicant) 30%, var(--bg-void)) 100%); box-shadow: inset 0 1px 2px rgba(0,0,0,0.5); animation: ah-status-forge-ok 1.4s ease-in-out infinite; }

@keyframes ah-status-forge-ok { 0%, 100% { opacity: 1; } 50% { opacity: 0.65; } }
@keyframes ah-forge-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }

/* history dots */
.ep-history { display: inline-flex; align-items: center; gap: var(--sp-gap, 2px); }
.ep-history span {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ah-muted);
  opacity: 0.4;
}
.ep-history span.h-ok    { background: var(--mod-observer); opacity: 0.85; }
.ep-history span.h-error { background: var(--ah-high); opacity: 0.9; }
.ep-history span.h-warn  { background: var(--ah-medium); opacity: 0.85; }
.ep-history svg { display: inline-block; }

.ep-trend {
  display: inline-block;
  margin-left: var(--sp-space, 4px);
  font-size: 12px;
}
.ep-trend.trend-up   { color: var(--ah-high); }
.ep-trend.trend-down { color: color-mix(in srgb, var(--mod-observer) 60%, var(--text-bright)); }

/* detail row */
.ep-detail-row { background: rgba(8, 6, 4, 0.65); }
.ep-detail-cell { padding: var(--sp-card-pad, 12px 16px); }
.ep-detail-json {
  font-family: var(--ah-font-mono, 'IBM Plex Mono', monospace);
  font-size: 10.5px;
  color: var(--ah-text-mid);
  background: rgba(0,0,0,0.5);
  border: 1px solid var(--ah-border-soft);
  border-radius: var(--forge-radius);
  padding: var(--sp-space, 10px 12px);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 320px;
  overflow: auto;
}

/* special section internals */
.special-body { padding: var(--sp-card-pad, 12px 14px); }
.special-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-space, 5px 0);
  font-family: var(--ah-font-mono, 'IBM Plex Mono', monospace);
  font-size: 11px;
  border-bottom: 1px dashed rgba(92,68,48,0.18);
}
.special-item:last-child { border-bottom: none; }
.special-item-value { color: var(--ah-text); }
.special-item-value.val-ok    { color: color-mix(in srgb, var(--mod-observer) 60%, var(--text-bright)); }
.special-item-value.val-error { color: var(--ah-high); }
.special-item-value.val-warn  { color: var(--ah-medium); }

.uptime-badge {
  display: inline-block;
  padding: var(--sp-space, 2px 7px);
  font-family: var(--ah-font-mono, 'IBM Plex Mono', monospace);
  font-size: 10px;
  border-radius: var(--forge-radius);
  border: 1px solid var(--ah-border);
  background: rgba(13,9,7,0.7);
}
.uptime-badge.uptime-ok    { color: color-mix(in srgb, var(--mod-observer) 60%, var(--text-bright)); border-color: rgba(168,200,120,0.4); }
.uptime-badge.uptime-warn  { color: var(--ah-medium); border-color: rgba(224,196,137,0.4); }
.uptime-badge.uptime-error { color: var(--ah-high); border-color: rgba(227,111,61,0.4); }

.module-panel-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space, 4px);
  color: var(--ah-yellow);
  text-decoration: none;
  font-family: var(--font-ui, 'Oswald', sans-serif);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.module-panel-link:hover { color: var(--ah-yellow-bright); text-decoration: underline; }

.section-retest-btn {
  background: none;
  border: 1px solid var(--ah-border);
  color: var(--ah-text-mid);
  padding: var(--sp-space, 3px 7px);
  border-radius: var(--forge-radius);
  cursor: pointer;
  font-size: 12px;
  transition: all 0.15s ease;
}
.section-retest-btn:hover { color: var(--ah-yellow); border-color: var(--ah-yellow); }
.section-retest-btn.spinning { animation: ah-spin 1s linear infinite; }

/* ─── §18. CHART MODAL ──────────────────────────────────────── */
.ah-chart-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.86);
  /* canon-fix 2026-05-20: видалено backdrop-filter blur - glassmorphism
     заборонений canon-правилами; підвищено opacity фону до 0.86 для
     еквівалентного відокремлення від контенту під модалкою. */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.ah-chart-inner {
  background: linear-gradient(180deg, rgba(31,24,18,0.98), rgba(20,16,12,0.98));
  border: 1px solid var(--ah-yellow-dim);
  border-radius: var(--forge-radius);
  box-shadow: var(--forge-shadow-deep);
  padding: var(--sp-space, 20px);
  max-width: 720px;
  width: calc(100vw - 60px);
  position: relative;
}
.ah-chart-title {
  font-family: var(--font-ui, 'Oswald', sans-serif);
  font-size: 12px;
  font-weight: 600;
  color: var(--ah-yellow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--sp-space, 14px);
}
.ah-chart-close {
  position: absolute;
  top: 10px; right: 10px;
  background: none;
  border: 1px solid var(--ah-border);
  color: var(--ah-text-mid);
  width: 28px; height: 28px;
  border-radius: var(--forge-radius);
  cursor: pointer;
}
.ah-chart-close:hover { color: var(--ah-yellow); border-color: var(--ah-yellow); }
.ah-chart-svg-wrap { background: rgba(13,9,7,0.7); border: 1px solid var(--ah-border-soft); border-radius: var(--forge-radius); padding: var(--sp-card-pad, 10px); margin-bottom: 12px; }
.ah-chart-legend { display: flex; gap: 16px; font-family: var(--ah-font-mono, 'IBM Plex Mono', monospace); font-size: 10px; color: var(--ah-text-mid); }

/* ─── §19. HEATMAP CELLS ────────────────────────────────────── */
.ah-heatmap-cell {
  display: inline-block;
  width: 14px; height: 14px;
  margin: 1px;
  border-radius: var(--radius-ui, 1px);
  background: rgba(40,30,22,0.6);
}

/* ─── §20. OPERATOR'S LOG ───────────────────────────────────── */
.ah-operator-log {
  position: fixed;
  bottom: 0;
  left: 0; right: 0;
  background: linear-gradient(180deg, rgba(20,16,12,0.97), rgba(8,6,4,0.97));
  border-top: 1px solid var(--ah-yellow-dim);
  z-index: 100;
  font-family: var(--ah-font-mono, 'IBM Plex Mono', monospace);
  box-shadow: 0 -4px 18px rgba(0,0,0,0.6);
}
.ah-operator-log-head {
  display: flex;
  align-items: center;
  padding: var(--sp-space, 8px 18px);
  background: linear-gradient(180deg, rgba(50,36,22,0.5), rgba(28,22,14,0.5));
  border-bottom: 1px solid var(--ah-border-soft);
  position: relative;
}
.ah-op-toggle-btn {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--sp-space, 10px);
  background: none;
  border: none;
  color: var(--ah-text-mid);
  cursor: pointer;
  padding: var(--sp-card-pad, 0);
  text-align: left;
}
.ah-op-icon { font-size: 18px; color: var(--ah-yellow); }
.ah-op-title {
  font-family: var(--font-ui, 'Oswald', sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ah-op-badge {
  padding: var(--sp-space, 1px 7px);
  background: rgba(13,9,7,0.7);
  border: 1px solid var(--ah-border);
  border-radius: var(--forge-radius);
  font-family: var(--ah-font-mono, 'IBM Plex Mono', monospace);
  font-size: 10px;
  color: var(--ah-yellow);
}
.ah-op-chevron {
  margin-left: auto;
  font-size: 18px;
  color: var(--ah-muted);
  transition: transform 0.2s ease;
}
.ah-operator-log[data-collapsed="true"] .ah-op-chevron { transform: rotate(180deg); }
.ah-op-clear {
  background: none;
  border: 1px solid var(--ah-border);
  color: var(--ah-text-mid);
  width: 28px; height: 28px;
  border-radius: var(--forge-radius);
  cursor: pointer;
  margin-left: var(--sp-space, 10px);
}
.ah-op-clear:hover { color: var(--ah-high); border-color: var(--ah-high); }

.ah-operator-log-body {
  max-height: 220px;
  overflow-y: auto;
  padding: var(--sp-space, 8px 18px 12px);
  font-family: var(--ah-font-mono, 'IBM Plex Mono', monospace);
  font-size: 11px;
  color: var(--ah-text-mid);
}
.ah-operator-log[data-collapsed="true"] .ah-operator-log-body { display: none; }
.ah-op-line {
  padding: var(--sp-space-1) var(--sp-space-2);
  display: flex;
  gap: var(--sp-space, 10px);
  border-bottom: 1px dashed rgba(92,68,48,0.15);
  border-radius: 1px;
}
.ah-op-line:last-child { border-bottom: none; }
.ah-op-line--ok    { color: color-mix(in srgb, var(--mod-observer) 60%, var(--text-bright)); background: rgba(122,158,90,0.07); border-left: 2px solid rgba(122,158,90,0.35); padding-left: 8px; }
.ah-op-line--warn  { color: var(--ah-medium); background: rgba(224,196,137,0.07); border-left: 2px solid rgba(224,196,137,0.38); padding-left: 8px; }
.ah-op-line--error { color: var(--ah-high); background: rgba(227,111,61,0.10); border-left: 2px solid rgba(227,111,61,0.45); padding-left: 8px; }

/* ─── §21. SCROLLBAR ────────────────────────────────────────── */
.ah-page ::-webkit-scrollbar { width: 9px; height: 9px; }
.ah-page ::-webkit-scrollbar-track { background: rgba(13,9,7,0.6); }
.ah-page ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--ah-yellow-dim), color-mix(in srgb, var(--accent-brass) 35%, var(--bg-void)));
  border-radius: 2px;
  border: 1px solid var(--bg-void);
}
.ah-page ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--ah-yellow), var(--ah-yellow-dim)); }

/* ─── §22. MODULE COLOR OVERRIDES ───────────────────────────── */
.module-section[data-module="Server"]      { --mod-color: var(--text-muted,     var(--text-muted)); --mod-glow: rgba(122,106, 84,0.20); }
.module-section[data-module="Observer"]    { --mod-color: var(--mod-observer,   #7a9e5a); --mod-glow: rgba(122,158, 90,0.22); }
.module-section[data-module="Publisher"]   { --mod-color: var(--mod-publisher,  #d4a24a); --mod-glow: rgba(212,162, 74,0.22); }
.module-section[data-module="Executor"]    { --mod-color: var(--mod-executor,   #b85434); --mod-glow: rgba(184, 84, 52,0.22); }
.module-section[data-module="Applicant"]   { --mod-color: var(--mod-applicant,  #5a8299); --mod-glow: rgba( 90,130,153,0.22); }
.module-section[data-module="Nexus"]       { --mod-color: var(--mod-nexus,      #4a9590); --mod-glow: rgba( 74,149,144,0.22); }
.module-section[data-module="Challenger"]  { --mod-color: var(--mod-challenger, #c86a1c); --mod-glow: rgba(200,106, 28,0.22); }
.module-section[data-module="Paymaster"]   { --mod-color: var(--mod-paymaster,  #2d4a6b); --mod-glow: rgba( 45, 74,107,0.22); }
.module-section[data-module="Dev Tools"]   { --mod-color: var(--mod-devtools,   var(--accent-brass)); --mod-glow: rgba(197,139, 58,0.22); }

/* ─── §23. RESPONSIVE ───────────────────────────────────────── */
@media (max-width: 980px) {
  body.devtools-body.ah-page { padding: var(--sp-card-pad, 16px 14px 80px); }
  .ah-back-panel,
  .ah-clock-panel { position: static; transform: none; margin: 0; }
  .ah-back-panel { margin-bottom: 12px; }
  .ah-clock-panel { display: none; }
  .ah-pipe-section { display: none; }
  .score-bar-inner { grid-template-columns: 1fr; gap: var(--sp-gap, 10px); }
  .ah-toolbar { gap: 8px; }
  .ah-forge-input { min-width: 160px; }
}

/* ─── §24. NOTIFICATION BUTTON ACTIVE STATE ─────────────────── */
#ah-notif-btn.is-active {
  color: var(--ah-yellow-bright);
  border-color: var(--ah-yellow);
  box-shadow: var(--forge-bevel), 0 0 8px rgba(232,200,96,0.45);
}

/* ─── §25. HEALTH-BTN LEGACY COMPAT ─────────────────────────── */
.health-btn {
  display: inline-flex; align-items: center; gap: var(--sp-gap, 6px);
  padding: var(--sp-space, 8px 14px);
  background: linear-gradient(180deg, rgba(34,26,18,0.92), rgba(18,14,10,0.92));
  border: 1px solid var(--ah-border);
  border-radius: var(--forge-radius);
  color: var(--ah-text-mid);
  font-family: var(--font-ui, 'Oswald', sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--forge-bevel);
}
.health-btn:hover { color: var(--ah-yellow); border-color: var(--ah-yellow); }
.health-btn.active { color: var(--ah-yellow); border-color: var(--ah-yellow); }
.health-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.health-btn--secondary { background: linear-gradient(180deg, rgba(28,22,14,0.85), rgba(14,10,6,0.85)); }

.health-select {
  padding: var(--sp-space, 7px 10px);
  background: rgba(13,9,7,0.85);
  border: 1px solid var(--ah-border);
  border-radius: var(--forge-radius);
  color: var(--ah-text);
  font-family: var(--ah-font-mono, 'IBM Plex Mono', monospace);
  font-size: 11px;
}
.health-search-wrap { position: relative; }
.health-search {
  padding: var(--sp-space, 7px 10px 7px 28px);
  background: rgba(13,9,7,0.85);
  border: 1px solid var(--ah-border);
  border-radius: var(--forge-radius);
  color: var(--ah-text);
  font-family: var(--ah-font-mono, 'IBM Plex Mono', monospace);
  font-size: 11px;
  min-width: 220px;
}
.health-search-wrap > .material-symbols-outlined {
  position: absolute; top: 50%; left: 8px;
  transform: translateY(-50%);
  font-size: 14px; color: var(--ah-muted);
}
.health-filter-label {
  display: inline-flex; align-items: center; gap: var(--sp-gap, 5px);
  font-family: var(--font-ui, 'Oswald', sans-serif);
  font-size: 10px; color: var(--ah-text-mid);
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer;
}
.health-filter-label input[type="checkbox"] { accent-color: var(--ah-yellow); }
.health-ctrl-group { display: inline-flex; align-items: center; gap: 8px; }
.health-ctrl-separator { width: 1px; height: 22px; background: var(--ah-border); }
.health-interval-label {
  font-family: var(--font-ui, 'Oswald', sans-serif);
  font-size: 10px;
  color: var(--ah-text-mid);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ─── §25.5. RESPONSIVE - Canonical breakpoints (Фаза 2)
   Canon: 768px колапс сітки, 480px мобільний layout
────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .dev-tools-scope .ah-grid,
  .dev-tools-scope [class*="ah-grid"] {
    grid-template-columns: 1fr;
  }
  .dev-tools-scope .ah-hud-strip {
    height: auto; flex-wrap: wrap; padding: 6px 12px; gap: 6px;
  }
}
@media (max-width: 480px) {
  .dev-tools-scope .ah-main { padding: 12px 10px; }
}

/* ─── §26. REDUCED MOTION ───────────────────────────────────────── */
/* Canon I: Industrial Forge - підтримка prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── §27. FOCUS-VISIBLE - keyboard navigation gold ring ────────── */
@keyframes ah-focus-breathe {
  0%, 100% { box-shadow: var(--forge-bevel), 0 0 0 2px var(--ah-yellow); }
  50%       { box-shadow: var(--forge-bevel), 0 0 0 2px var(--ah-yellow), 0 0 10px rgba(197,139,58,0.50); }
}
.ah-icon-btn:focus-visible,
.ah-forge-btn:focus-visible,
.ah-hint-toggle:focus-visible,
.health-btn:focus-visible,
.ah-op-toggle-btn:focus-visible,
.ah-op-clear:focus-visible,
.ah-chart-close:focus-visible,
.section-retest-btn:focus-visible {
  outline: none;
  animation: ah-focus-breathe 2s ease-in-out infinite;
}

.ep-copy-url:focus-visible,
.module-panel-link:focus-visible {
  outline: 2px solid var(--ah-yellow);
  outline-offset: 2px;
}

/* ─── §28. VISUAL IMPACT LAYER ──────────────────────────────────── */

/* Stagger entrance: кожна наступна картка з затримкою */
.module-section { animation-fill-mode: both; }
.module-section:nth-child(1)  { animation-delay: 0ms; }
.module-section:nth-child(2)  { animation-delay: 65ms; }
.module-section:nth-child(3)  { animation-delay: 130ms; }
.module-section:nth-child(4)  { animation-delay: 195ms; }
.module-section:nth-child(5)  { animation-delay: 260ms; }
.module-section:nth-child(6)  { animation-delay: 325ms; }
.module-section:nth-child(7)  { animation-delay: 390ms; }
.module-section:nth-child(8)  { animation-delay: 455ms; }
.module-section:nth-child(9)  { animation-delay: 520ms; }
.module-section:nth-child(10) { animation-delay: 585ms; }

/* Toolbar - виразніше відокремлення від контенту */
.ah-toolbar {
  border-top: 2px solid var(--ah-border);
  background: linear-gradient(180deg, rgba(14,10,6,0.98) 0%, rgba(9,7,4,0.98) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(232,219,178,0.07), 0 3px 12px rgba(0,0,0,0.55) !important;
}

/* LED dots - посилений гло (override §17) */
.ep-dot.dot-ok    { box-shadow: inset 0 1px 2px rgba(0,0,0,0.5), 0 0 7px rgba(168,200,120,0.72), 0 0 14px rgba(122,158,90,0.32); }
.ep-dot.dot-error { box-shadow: inset 0 1px 2px rgba(0,0,0,0.5), 0 0 8px rgba(227,111,61,0.82), 0 0 18px rgba(193,68,24,0.38); }
.ep-dot.dot-warn  { box-shadow: inset 0 1px 2px rgba(0,0,0,0.5), 0 0 7px rgba(232,200,96,0.72), 0 0 14px rgba(197,139,58,0.32); }

/* Response time right-aligned */
td .ep-ms { display: block; text-align: right; }

/* end of file */

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