/* === Test Runner v4.0 — Dev Tools Design System === */

/* ── [A] Scope-block: tr- page tokens ── */
.dev-tools-scope {
  --tr-pass: var(--log-ok);
  --tr-pass-rgb: 107, 142, 78;
  --tr-fail: var(--log-critical);
  --tr-fail-rgb: 193, 68, 24;
  --tr-warn: var(--log-warn);
  --tr-warn-rgb: 224, 196, 137;
  --tr-skip: var(--text-muted);
  --tr-skip-rgb: 122, 106, 84;
}


/* ── Page layout ── */
/* max-width / margin:auto навмисно відсутні тут — .tr-page = body-клас,
   обмеження ширини задається через .tr-content-forge щоб header лишався full-width */
.tr-page {
  padding: 0 0 24px;
}

/* ── Subtitle telemetry items — Edison Lamp LED ── */
.tr-status-dot {
  position: relative;
  width: 14px;
  height: 18px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  vertical-align: middle;
  margin-right: 2px;
  flex-shrink: 0;
}
/* Bulb body */
.tr-status-dot::before {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 35% 30%, rgba(80,70,55,0.9), rgba(20,14,10,0.95));
  border: 1px solid rgba(92,68,48,0.6);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.8), inset 0 -1px 1px rgba(255,255,255,0.04);
  display: block;
}
/* Bulb base */
.tr-status-dot::after {
  content: '';
  width: 6px;
  height: 4px;
  background: linear-gradient(180deg, rgba(92,68,48,0.8), rgba(44,32,20,0.9));
  border: 1px solid rgba(92,68,48,0.5);
  border-top: none;
  border-radius: 0 0 2px 2px;
  display: block;
}
/* Active/OK — glowing amber */
.tr-status-dot.up::before,
.tr-status-dot--ok::before,
.tr-status-dot--online::before {
  background: radial-gradient(circle at 40% 35%, var(--sp-glow-amber, #f5c842), var(--sp-glow-amber, #c58b3a) 40%, var(--sp-copper, #7a4f1a) 80%, var(--sp-copper-shadow, #3a2010));
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.3),
              0 0 6px rgba(197,139,58,0.5),
              0 0 12px rgba(197,139,58,0.2);
  animation: edison-glow 2.5s ease-in-out infinite;
}
/* Error — dark red ember */
.tr-status-dot.down::before,
.tr-status-dot--error::before,
.tr-status-dot--offline::before {
  background: radial-gradient(circle at 35% 30%, var(--log-critical, #c14418), var(--sp-copper-dark, #7a1e15) 60%, var(--bg-void, #1a0505));
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.7),
              0 0 4px rgba(193,68,24,0.3);
}
/* Warn — dim amber */
.tr-status-dot--warn::before {
  background: radial-gradient(circle at 35% 30%, var(--log-warn, #c9932a), var(--sp-copper-mid, #7a5a18) 60%, var(--sp-copper-dark, #2a1a05));
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.7),
              0 0 4px rgba(197,139,58,0.3);
}
@keyframes edison-glow {
  0%, 100% { box-shadow: inset 0 1px 2px rgba(255,255,255,0.3), 0 0 6px rgba(197,139,58,0.5), 0 0 12px rgba(197,139,58,0.2); }
  50%       { box-shadow: inset 0 1px 2px rgba(255,255,255,0.15), 0 0 3px rgba(197,139,58,0.3), 0 0 6px rgba(197,139,58,0.1); }
}
.tr-tel-val {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.03em;
}
.tr-tel-val.up { color: var(--tr-pass); }
.tr-tel-val.down { color: var(--tr-fail); }
.tr-ver-badge {
  padding: 1px 6px;
  border-radius: var(--radius-ui, 3px);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-ui, 'Oswald', sans-serif);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--border-bright);
  color: var(--accent-brass);
  background: rgba(var(--accent-brass-rgb, 197,139,58), 0.12);
}

/* ═══════════════════════════════════════════════════════
   DASHBOARD — Ring + Metrics + Beam
   ═══════════════════════════════════════════════════════ */

.tr-dashboard {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-metal);
  border-top: none;
  border-radius: 0 0 2px 2px;
  overflow: hidden;
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.65),
    inset 0 -1px 0 rgba(232,219,178,0.05),
    0 4px 20px rgba(0,0,0,0.55);
}

/* Score ring (ліворуч) */
.tr-ring-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-space-2);
}
.tr-ring-wrap {
  position: relative;
  width: 120px;
  height: 120px;
}
.tr-ring-wrap svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.tr-ring-track {
  fill: none;
  stroke: rgba(255,255,255,0.03);
  stroke-width: 4;
}
.tr-ring-ticks {
  fill: none;
  stroke: rgba(var(--accent-brass-rgb, 197,139,58), 0.08);
  stroke-width: 4;
  stroke-dasharray: 2 10.5;
}
.tr-ring-arc {
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.4s ease;
}
.tr-ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.tr-ring-pct {
  font-size: 36px;
  font-weight: 900;
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  line-height: 1;
  color: var(--accent-brass);
  
  letter-spacing: -1px;
}
.tr-ring-pct-sign {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: 1px;
}
.tr-ring-sub {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-top: 2px;
}
.tr-dur {
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  color: var(--accent-brass);
  display: flex;
  align-items: center;
  gap: var(--sp-space-1);
}
.tr-dur .material-symbols-outlined { font-size: 14px; }

/* Metrics block (праворуч) */
.tr-metrics-col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-2);
}
.tr-metrics-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-space-2);
}
.tr-metric {
  position: relative;
  padding: 20px 12px 16px;
  text-align: center;
  border-radius: var(--forge-radius, 2px);
  background: linear-gradient(160deg, var(--bg-plate-hi, #1c1510) 0%, var(--bg-plate, #13100d) 100%);
  border: 1px solid var(--border-metal);
  border-top: 3px solid var(--mc, var(--border-metal));
  overflow: hidden;
  transition: background 0.25s ease, border-color 0.25s ease;
  cursor: default;
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.65),
    inset 0 -1px 0 rgba(232,219,178,0.04),
    0 4px 12px rgba(0,0,0,0.5);
}
.tr-metric::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent);
  pointer-events: none;
}
/* Corner rivet via pseudo-element */
.tr-metric::after {
  content: '';
  position: absolute;
  top: 4px; right: 4px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--sp-steel-mid, #555), var(--sp-steel-dark, #222));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.7);
  pointer-events: none;
}
.tr-metric:hover {
  border-color: rgba(var(--mc-rgb), 0.25);
  background: linear-gradient(160deg, var(--bg-hover, #201810) 0%, var(--bg-dark, #161109) 100%);
}
.tr-metric-num {
  font-size: 36px;
  font-weight: 900;
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  line-height: 1;
  color: var(--mc, var(--accent-brass));
  
  transition: color var(--tr-normal, 0.25s ease);
}
.tr-metric-label {
  font-size: 11px;
  font-weight: 600;
  font-family: 'Oswald', var(--font-ui, sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-top: 6px;
}

/* Progress beam */
.tr-beam {
  height: 6px;
  border-radius: 2px;
  display: flex;
  overflow: hidden;
  background: rgba(0,0,0,0.4);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.6);
}
.tr-beam-seg {
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 0;
}
.tr-beam-seg--pass { background: var(--tr-pass); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 8px rgba(0,0,0,0.4); }
.tr-beam-seg--fail { background: var(--tr-fail); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 8px rgba(0,0,0,0.4); }
.tr-beam-seg--warn { background: var(--tr-warn); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 8px rgba(0,0,0,0.4); }
.tr-beam-seg--skip { background: rgba(var(--tr-skip-rgb), 0.35); }
.tr-beam-legend {
  display: flex;
  gap: var(--sp-space-3);
  margin-top: var(--sp-space-1);
  font-size: 11px;
  font-family: var(--font-mono, monospace);
  color: var(--text-muted);
}
.tr-beam-legend-item { display: inline-flex; align-items: center; gap: var(--sp-space-1); }
.tr-beam-legend-dot { width: 5px; height: 5px; border-radius: 50%; }

/* ── Module Health Grid ── */
.tr-module-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-space-3);
  margin-bottom: 0;
  padding: var(--sp-space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-metal);
  border-top: none;
  border-radius: 0 0 2px 2px;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.4);
}
.tr-mod-card {
  position: relative;
  background: linear-gradient(160deg, var(--bg-mod, #1c1712) 0%, var(--bg-surface, #13100c) 100%);
  border: 1px solid var(--border-metal);
  border-top: 3px solid var(--mc, var(--border-dim));
  border-radius: var(--forge-radius, 2px);
  overflow: hidden;
  padding: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 2px 8px rgba(0,0,0,0.45);
  transition: var(--tr-normal, 0.25s ease);
}
.tr-mod-card:hover {
  border-color: var(--border-bright);
  border-top-color: var(--mc);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 4px 14px rgba(0,0,0,0.55);
}
.tr-mod-header {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  margin-bottom: 0;
}
.tr-mod-icon {
  font-size: 20px;
  line-height: 1;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
  opacity: 0.9;
  flex-shrink: 0;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 0 1px rgba(0,0,0,0.9);
}
.tr-mod-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--mc, var(--text-bright));
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 0 1px rgba(0,0,0,0.9);
}
.tr-mod-tag {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 500;
  padding: 1px 4px;
  border-radius: var(--radius-ui, 3px);
  background: rgba(var(--mc-rgb, 100,116,139), 0.12);
  color: var(--mc);
  opacity: 0.55;
  letter-spacing: 0.08em;
  margin-left: auto;
}
.tr-mod-stats {
  display: flex;
  gap: var(--sp-space-2);
  margin-bottom: var(--sp-space-2);
  font-size: 11px;
  font-family: var(--font-mono, monospace);
}
.tr-mod-stat {
  display: flex;
  align-items: center;
  gap: var(--sp-space-1);
}
.tr-mod-stat-num {
  font-weight: 700;
}
.tr-mod-stat-num.is-pass { color: rgba(var(--tr-pass-rgb), 0.80); }
.tr-mod-stat-num.is-fail { color: rgba(var(--tr-fail-rgb), 0.80); }
.tr-mod-stat-num.is-warn { color: rgba(var(--tr-warn-rgb), 0.75); }
.tr-mod-stat-lbl {
  color: var(--text-muted);
  font-size: 11px;
}
.tr-mod-status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space-1);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-ui, 4px);
  margin-bottom: var(--sp-space-2);
}
.tr-mod-status--healthy  { background: rgba(var(--tr-pass-rgb),0.10); color: rgba(var(--tr-pass-rgb),0.75); }
.tr-mod-status--degraded { background: rgba(var(--tr-warn-rgb),0.10); color: rgba(var(--tr-warn-rgb),0.70); }
.tr-mod-status--critical { background: rgba(var(--tr-fail-rgb),0.10); color: rgba(var(--tr-fail-rgb),0.75); }
.tr-mod-progress {
  height: 4px;
  border-radius: 2px;
  background: rgba(0,0,0,0.35);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.55);
  overflow: hidden;
}
.tr-mod-progress-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--mc);
  transition: width 0.4s ease;
}

/* ── Tabs ── */
.tr-tabs {
  display: flex;
  gap: 2px;
  margin: 20px 0 0;
  background: linear-gradient(180deg, var(--bg-section, #1a140e) 0%, var(--bg-base, #141009) 100%);
  border: 1px solid var(--border-metal);
  border-bottom: 2px solid var(--border-metal);
  border-radius: 2px 2px 0 0;
  padding: 6px 8px 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.tr-tab {
  padding: 8px 20px;
  font-size: 11px;
  font-weight: 600;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: rgba(0,0,0,0.2);
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 2px 2px 0 0;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
  top: 2px;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space-2);
}
.tr-tab:hover {
  color: var(--text-body);
  background: rgba(197,139,58,0.06);
  border-color: rgba(197,139,58,0.15);
}
.tr-tab.active {
  color: var(--accent-brass);
  background: var(--bg-surface);
  border-color: rgba(197,139,58,0.35);
  border-bottom: 2px solid var(--bg-surface);
  
}
.tr-tab-count {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: var(--radius-ui, 4px);
  background: rgba(255,255,255,0.06);
}
.tr-tab.active .tr-tab-count {
  background: rgba(var(--accent-brass-rgb, 197,139,58), 0.2);
  color: var(--accent-brass);
}
.tr-tab-content { display: none; }
.tr-tab-content.active { display: block; }

/* ── Filter Row ── */
.tr-filter-row {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.tr-search {
  flex: 0 0 240px;
  padding: 6px 10px;
  border-radius: var(--forge-radius, 2px);
  border: 1px solid var(--border-metal);
  background: rgba(0,0,0,0.35);
  color: var(--text-bright);
  font-size: 11px;
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  outline: none;
  transition: var(--tr-fast, 0.15s ease);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.03);
}
.tr-search:focus {
  border-color: rgba(197,139,58,0.55);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5), 0 0 0 2px rgba(197,139,58,0.10);
}
.tr-search::placeholder { color: var(--text-muted); }

.tr-quick-filters {
  display: flex;
  gap: var(--sp-space-1);
}
.tr-qf {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--radius-ui, 4px);
  border: 1px solid var(--border-metal);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--tr-fast, 0.15s ease);
  font-family: var(--font-mono, monospace);
}
.tr-qf:hover { color: var(--text-body); background: var(--bg-hover); }
.tr-qf.active {
  background: rgba(var(--accent-brass-rgb, 197,139,58), 0.15);
  color: var(--accent-brass);
  border-color: rgba(var(--accent-brass-rgb, 197,139,58), 0.3);
}

.tr-module-pills {
  display: flex;
  gap: var(--sp-space-1);
  margin-left: auto;
}
.tr-mpill {
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  border-radius: var(--radius-ui, 4px);
  border: 1px solid transparent;
  background: rgba(var(--mp-rgb, 100,116,139), 0.1);
  color: var(--mp, var(--text-muted));
  cursor: pointer;
  transition: var(--tr-fast, 0.15s ease);
  font-family: var(--font-ui, 'Oswald', sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.tr-mpill:hover { background: rgba(var(--mp-rgb, 100,116,139), 0.2); }
.tr-mpill.active {
  background: rgba(var(--mp-rgb, 100,116,139), 0.25);
  border-color: var(--mp);
}

/* ── Results Table ── */
.tr-table-wrap {
  max-height: calc(100vh - 520px);
  min-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--border-metal);
  border-top: none;
  border-radius: 0 0 2px 2px;
  background: var(--bg-surface);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}
.tr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-family: var(--font-mono, monospace);
}
.tr-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
}
.tr-table th {
  padding: 8px 10px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  background: linear-gradient(180deg, var(--bg-tab, #1e1812) 0%, var(--bg-alt, #161210) 100%);
  border-bottom: 2px solid var(--border-metal);
  border-right: 1px solid rgba(255,255,255,0.02);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: color 0.15s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.tr-table th:hover { color: var(--text-body); background: linear-gradient(180deg, var(--bg-elevated, #2a2018) 0%, var(--bg-base, #14100c) 100%); }
.tr-table th.sorted { color: var(--accent-brass); }
.tr-sort-arrow {
  font-size: 11px;
  margin-left: 2px;
  opacity: 0.5;
}
th.sorted .tr-sort-arrow { opacity: 1; }
.tr-table td {
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.02);
  color: var(--text-body);
  vertical-align: middle;
}
.tr-table tbody tr {
  transition: background 0.15s;
}
.tr-table tbody tr:hover {
  background: var(--bg-hover);
}

/* Status icon in first column */
.tr-result-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-ui, 4px);
  font-size: 13px;
}
.tr-result-icon--pass { background: rgba(var(--tr-pass-rgb),0.12); }
.tr-result-icon--fail { background: rgba(var(--tr-fail-rgb),0.12); }
.tr-result-icon--warn { background: rgba(var(--tr-warn-rgb),0.12); }
.tr-result-icon--skip { background: rgba(var(--tr-skip-rgb),0.12); }

/* Module pill */
.tr-mod-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space-1);
  padding: 2px 8px;
  border-radius: var(--radius-ui, 4px);
  font-size: 11px;
  font-weight: 700;
  background: rgba(var(--mp-rgb, 100,116,139), 0.12);
  color: var(--mp, var(--text-muted));
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.tr-mod-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mp);
}

/* Method badge */
.tr-method {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--radius-ui, 3px);
  letter-spacing: 0.03em;
}
.tr-method--GET { background: rgba(107,142,78,0.12); color: var(--log-ok); }
.tr-method--POST { background: rgba(197,139,58,0.12); color: var(--mod-applicant); }
.tr-method--PUT { background: rgba(224,196,137,0.12); color: var(--log-warn); }
.tr-method--DELETE { background: rgba(193,68,24,0.12); color: var(--log-critical); }
.tr-method--PATCH { background: rgba(197,139,58,0.12); color: var(--accent-brass); }

/* Endpoint path */
.tr-endpoint {
  color: var(--text-bright);
  font-weight: 500;
}

/* HTTP code */
.tr-code {
  font-weight: 700;
  font-size: 11px;
}
.tr-code--2xx { color: var(--tr-pass); }
.tr-code--3xx { color: var(--accent-brass); }
.tr-code--4xx { color: var(--tr-warn); }
.tr-code--5xx { color: var(--tr-fail); }

/* Latency heatmap */
.tr-ms {
  font-weight: 600;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: var(--radius-ui, 3px);
}
.tr-ms--fast { background: rgba(var(--tr-pass-rgb),0.1); color: var(--tr-pass); }
.tr-ms--medium { background: rgba(var(--tr-warn-rgb),0.1); color: var(--tr-warn); }
.tr-ms--slow { background: rgba(255,126,0,0.12); color: var(--mod-challenger); }
.tr-ms--critical { background: rgba(var(--tr-fail-rgb),0.1); color: var(--tr-fail); }

/* Response size */
.tr-size {
  color: var(--text-muted);
  font-size: 11px;
}

/* Expand toggle */
.tr-expand-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
  border-radius: var(--radius-ui, 4px);
  transition: var(--tr-fast, 0.15s ease);
  display: inline-flex;
  align-items: center;
}
.tr-expand-btn:hover { color: var(--text-body); background: var(--bg-hover); }
.tr-expand-btn.expanded { transform: rotate(90deg); }

/* Detail row (expanded) */
.tr-detail-row td {
  padding: 8px 10px 8px 48px;
  background: rgba(255,255,255,0.01);
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.tr-detail-content {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
}
.tr-detail-content code {
  background: rgba(255,255,255,0.05);
  padding: 1px 4px;
  border-radius: var(--radius-ui, 3px);
  font-size: 11px;
}
.tr-detail-content .tr-body-preview {
  margin-top: var(--sp-space-1);
  padding: 6px 10px;
  background: rgba(0,0,0,0.3);
  border-radius: var(--radius-ui, 4px);
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: var(--text-body);
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 120px;
  overflow-y: auto;
}

.tr-results-info {
  font-size: 11px;
  color: var(--text-muted);
  /* padding/text-align скасовані — елемент тепер всередині tr-sechdr */
  padding: 0;
  text-align: left;
}

/* ── Failure & Warning Cards ── */
.tr-issue-cards {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-3);
}
.tr-issue-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-metal);
  border-left: 4px solid var(--ic, var(--tr-fail));
  border-radius: var(--radius-md, 4px);
  padding: var(--sp-space-4);
  transition: var(--tr-normal, 0.25s ease);
}
.tr-issue-card:hover {
  background: var(--bg-elevated);
}
.tr-issue-card--fail { --ic: var(--tr-fail); }
.tr-issue-card--warn { --ic: var(--tr-warn); }
.tr-issue-card--critical { --ic: var(--tr-fail); border-left-width: 5px; }
.tr-issue-header {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  margin-bottom: var(--sp-space-2);
  flex-wrap: wrap;
}
.tr-issue-endpoint {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-bright);
  font-family: var(--font-mono, monospace);
}
.tr-issue-severity {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-ui, 4px);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.tr-issue-severity--critical { background: rgba(var(--tr-fail-rgb),0.15); color: var(--tr-fail); }
.tr-issue-severity--error { background: rgba(var(--tr-fail-rgb),0.12); color: var(--tr-fail); }
.tr-issue-severity--warning { background: rgba(var(--tr-warn-rgb),0.12); color: var(--tr-warn); }
.tr-issue-summary {
  font-size: 13px;
  color: var(--text-body);
  margin-bottom: var(--sp-space-2);
  line-height: 1.5;
}
.tr-issue-details {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: var(--sp-space-2);
  padding: 8px 12px;
  background: rgba(0,0,0,0.2);
  border-radius: var(--radius-ui, 4px);
}
.tr-issue-debug-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space-1);
  padding: 4px 10px;
  border: 1px solid var(--border-metal);
  border-radius: var(--radius-ui, 4px);
  background: rgba(255,255,255,0.03);
  color: var(--text-body);
  font-size: 11px;
  cursor: pointer;
  transition: var(--tr-fast, 0.15s ease);
  font-family: var(--font-mono, monospace);
}
.tr-issue-debug-btn:hover {
  background: rgba(var(--accent-brass-rgb, 197,139,58), 0.12);
  color: var(--accent-brass);
  border-color: rgba(var(--accent-brass-rgb, 197,139,58), 0.3);
}
.tr-issue-debug-btn .material-symbols-outlined { font-size: 14px; }

/* ── Empty State ── */
.tr-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  text-align: center;
  padding: 40px 24px;
}
.tr-empty-icon {
  font-size: 64px;
  color: var(--text-muted);
  margin-bottom: 16px;
  opacity: 0.5;
}
.tr-empty-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-body);
  margin-bottom: var(--sp-space-2);
}
.tr-empty-desc {
  font-size: 13px;
  color: var(--text-muted);
  max-width: 400px;
  line-height: 1.6;
}

/* ── Staleness / Reload Banner ── */
.tr-banner {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--sp-space-2);
  padding: 8px 16px;
  margin: 0 auto 12px;
  max-width: 1440px;
  border-radius: var(--radius-sm, 4px);
  font-size: 12px;
  font-weight: 600;
  animation: card-enter 0.25s ease;
}
.tr-banner.visible { display: flex; }
.tr-banner--stale {
  background: rgba(var(--tr-warn-rgb), 0.1);
  border: 1px solid rgba(var(--tr-warn-rgb), 0.2);
  color: var(--tr-warn);
}
.tr-banner--reload {
  background: rgba(var(--accent-brass-rgb, 197,139,58), 0.1);
  border: 1px solid rgba(var(--accent-brass-rgb, 197,139,58), 0.2);
  color: var(--accent-brass);
}
.tr-banner--info {
  background: rgba(122, 106, 84, 0.08);
  border: 1px solid rgba(122, 106, 84, 0.2);
  color: var(--text-muted, #7a6a54);
}
.tr-banner--info code {
  padding: 0 4px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.3);
  color: var(--text-body, #bfa37a);
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
}
.tr-banner-btn {
  padding: 2px 10px;
  border-radius: var(--radius-ui, 4px);
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--tr-fast, 0.15s ease);
}
.tr-banner-btn:hover { background: rgba(255,255,255,0.1); }

/* ── Footer ── */
.tr-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  margin-top: 20px;
  background: linear-gradient(180deg, var(--bg-section, #1a140e) 0%, var(--bg-base, #141009) 100%);
  border: 1px solid var(--border-metal);
  border-top: 2px solid var(--border-metal);
  border-radius: 2px;
  font-size: 11px;
  color: var(--text-muted);
  flex-wrap: wrap;
  gap: var(--sp-space-2);
  position: relative;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 4px 12px rgba(0,0,0,0.5);
}

.tr-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 20px; right: 20px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(197,139,58,0.3) 30%,
    rgba(197,139,58,0.3) 70%,
    transparent 100%
  );
  pointer-events: none;
}
.tr-footer-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  flex-wrap: wrap;
}
.tr-footer-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
}
.tr-auto-refresh {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space-1);
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
}
.tr-auto-refresh input[type="checkbox"] {
  accent-color: var(--accent-brass);
}
.tr-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--forge-radius, 2px);
  border: 1px solid var(--border-metal);
  background: linear-gradient(180deg, var(--bg-tab, #1e1812) 0%, var(--bg-base, #151009) 100%);
  color: var(--text-body);
  font-size: 11px;
  font-weight: 600;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    0 2px 6px rgba(0,0,0,0.35);
}
.tr-btn:hover {
  background: linear-gradient(180deg, var(--bg-hover-dark, #261e14) 0%, var(--bg-elevated, #1c1410) 100%);
  border-color: rgba(197,139,58,0.35);
  color: var(--text-bright);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 0 8px rgba(197,139,58,0.1);
}
.tr-btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}
.tr-btn--primary {
  background: linear-gradient(180deg, rgba(197,139,58,0.18) 0%, rgba(197,139,58,0.10) 100%);
  border-color: rgba(197,139,58,0.45);
  color: var(--accent-brass);
}
.tr-btn--primary:hover {
  background: linear-gradient(180deg, rgba(197,139,58,0.28) 0%, rgba(197,139,58,0.18) 100%);
  border-color: rgba(197,139,58,0.70);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 12px rgba(197,139,58,0.2);
}
.tr-btn .material-symbols-outlined { font-size: 14px; }

.tr-relative-time {
  font-style: italic;
  opacity: 0.8;
}

/* ── Toast ── */
.tr-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 8px 16px;
  border-radius: var(--radius-sm, 4px);
  background: var(--bg-elevated);
  border: 1px solid var(--border-metal);
  color: var(--text-bright);
  font-size: 12px;
  font-family: var(--font-mono, monospace);
  z-index: 1000;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--tr-normal, 0.25s ease), transform var(--tr-normal, 0.25s ease);
  pointer-events: none;
}
.tr-toast.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .tr-module-grid { grid-template-columns: repeat(2, 1fr); }
  .tr-module-pills { display: none; }
  .tr-dashboard-body { grid-template-columns: 100px 1fr; gap: 16px; }
  .tr-ring-wrap { width: 100px; height: 100px; }
  .tr-ring-pct { font-size: 26px; }
}
@media (max-width: 768px) {
  .tr-dashboard-body { grid-template-columns: 1fr; }
  .tr-ring-col { flex-direction: row; align-items: center; gap: 16px; }
  .tr-ring-wrap { width: 80px; height: 80px; }
  .tr-ring-pct { font-size: 22px; }
  .tr-metrics-row { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
  .tr-module-grid { grid-template-columns: 1fr; }
  .tr-search { flex: 1 1 100%; }
  .tr-footer { flex-direction: column; align-items: flex-start; }
  .tr-metrics-row { grid-template-columns: repeat(2, 1fr); }
  .tr-metric-num { font-size: 24px; }
}

/* ═══════════════════════════════════════════════════════
   STEAMPUNK UPGRADE — Background Scene v5.0 (tr-)
   ═══════════════════════════════════════════════════════ */

/* Background Scene */
.tr-bg-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.tr-bg-scene svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Scan Line — Industrial Forge atmosphere (K-canon) */
.tr-scan-line {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    transparent 0px,
    transparent 3px,
    rgba(0,0,0,0.04) 3px,
    rgba(0,0,0,0.04) 4px
  );
  opacity: 0.7;
  animation: sp-scan 8s linear infinite;
}

/* Side Pipes */
.tr-sp-pipes {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  display: flex;
  justify-content: space-between;
}
.tr-sp-pipe {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 14px;
  margin-top: 96px;
}
.tr-sp-pipe--left  { margin-left: 6px; }
.tr-sp-pipe--right { margin-right: 6px; }
.tr-sp-flange {
  width: 14px;
  height: 10px;
  background: linear-gradient(180deg, var(--accent-brass) 0%, var(--accent-brass-dim) 50%, var(--bg-void) 100%);
  border-radius: 2px;
  border: 1px solid var(--accent-brass-dim);
  flex-shrink: 0;
  opacity: 0.65;
}
.tr-sp-flange--gauge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, var(--accent-brass-hover), var(--accent-brass-dim), var(--bg-base));
  border: 1px solid var(--accent-brass-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  font-family: var(--font-mono, monospace);
  color: var(--text-bright);
  letter-spacing: 0.03em;
  font-weight: 700;
  margin-left: -8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 8px rgba(0,0,0,0.4);
  opacity: 0.72;
}
.tr-sp-pipe-body {
  width: 8px;
  flex: 1;
  min-height: 40px;
  background: linear-gradient(90deg, var(--bg-base) 0%, var(--accent-brass-dim) 15%, var(--accent-brass) 30%, var(--accent-brass) 50%, var(--accent-brass-dim) 70%, var(--bg-elevated) 100%);
  opacity: 0.45;
  position: relative;
}
.tr-sp-pipe-body::after {
  content: '';
  position: absolute;
  left: 1px;
  top: 0; bottom: 0;
  width: 1.5px;
  background: rgba(255,240,140,0.10);
}

/* Pipe Section */
.tr-pipe-section {
  display: flex;
  justify-content: space-between;
  padding: 0 24px;
  height: 18px;
  position: relative;
  z-index: 2;
  pointer-events: none;
}
.tr-pipe-section__left,
.tr-pipe-section__right {
  display: flex;
  align-items: center;
  gap: var(--sp-space-1);
}
.tr-ps-flange {
  width: 10px;
  height: 8px;
  background: linear-gradient(180deg, var(--accent-brass), var(--accent-brass-dim));
  border-radius: var(--radius-ui, 1px);
  border: 1px solid var(--accent-brass-dim);
  opacity: 0.55;
}
.tr-ps-pipe-v {
  width: 6px;
  height: 14px;
  background: linear-gradient(90deg, var(--bg-base) 0%, var(--accent-brass-dim) 40%, var(--accent-brass) 50%, var(--accent-brass-dim) 60%, var(--bg-base) 100%);
  opacity: 0.45;
}
.tr-ps-pipe-v--gauge {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, var(--accent-brass-hover), var(--accent-brass-dim), var(--bg-base));
  border: 1px solid var(--accent-brass-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.65;
}
.tr-ps-gauge-label {
  font-size: 5px;
  font-family: var(--font-mono, monospace);
  color: var(--text-bright);
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* ── [A] Inline-removed helpers ── */
.tr-count-highlight {
  color: var(--accent-brass);
  font-family: var(--font-mono, monospace);
}
.tr-banner-icon { font-size: 16px; }

/* ── [A] Table column widths (moved from inline) ── */
.tr-col-result  { width: 40px; }
.tr-col-method  { width: 60px; }
.tr-col-status  { width: 55px; }
.tr-col-duration { width: 75px; }
.tr-col-size    { width: 65px; }
.tr-col-expand  { width: 36px; }

  to   { opacity: 1; transform: translateY(0); }
}

/* ── [G] :focus-visible states ── */
.tr-btn:focus-visible,
.tr-qf:focus-visible,
.tr-tab:focus-visible,
.tr-search:focus-visible {
  outline: 2px solid var(--accent-brass);
  outline-offset: 2px;
}

/* ── [K] Blueprint grid on body ── */
.devtools-body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(197,139,58,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(197,139,58,0.03) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 0;
}

/* ── [I] prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  .tr-banner,
  .tr-btn,
  .tr-tab,
  .tr-metric,
  .tr-status-dot::before,
  .tr-status-dot.up::before,
  .tr-status-dot--ok::before,
  .tr-status-dot--online::before,
  .tr-hud-status-dot,
  .tr-hud-status-dot.up { animation: none !important; transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   BACK-ARROW PANEL — tr-page scope
   dt-backarrow.css is scoped to .al-page; test-runner uses .tr-page.
   ═══════════════════════════════════════════════════════════════════════ */

body.dev-tools-scope.tr-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;
  display: grid !important;
  grid-template-columns: auto auto !important;
  column-gap: 20px !important;
  align-items: center !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   CLOCK OVERLAY — tr-page scope
   dt-chronograph.css is scoped to .al-page; test-runner uses .tr-page.
   These overrides mirror chronograph layout rules for .tr-page context.
   ═══════════════════════════════════════════════════════════════════════ */

body.dev-tools-scope.tr-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;
  display: grid !important;
  grid-template-columns: auto !important;
  grid-template-rows: auto !important;
  column-gap: 8px !important;
  row-gap: 0 !important;
  align-items: center !important;
}

body.dev-tools-scope.tr-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;
  display: block !important;
}

body.dev-tools-scope.tr-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;
}

body.dev-tools-scope.tr-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 24px !important;
  box-sizing: border-box !important;
}

body.dev-tools-scope.tr-page .clock-overlay .display-window {
  display: flex !important;
  flex-direction: row !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(--bg-clock-border, #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(--bg-nixie-d, #030201), var(--bg-nixie-m, #080604) 30%, var(--bg-nixie-b, #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;
}

body.dev-tools-scope.tr-page .clock-unit .nixie {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  width: auto !important;
  height: 20px !important;
  border: 0.5px solid var(--border-nixie, #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.tr-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(--sp-glow-amber, #d89a3f) !important;
  
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 2 !important;
}

body.dev-tools-scope.tr-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;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 1 !important;
}

body.dev-tools-scope.tr-page .clock-unit .nixie-colon {
  flex: 0 0 auto !important;
  width: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
}

body.dev-tools-scope.tr-page .clock-unit .colon-dot {
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: var(--sp-glow-amber, #e6a848) !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;
}

body.dev-tools-scope.tr-page .clock-unit .al-clock-tooltip {
  position: absolute !important;
  top: calc(100% + 3px) !important;
  right: 4px !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 1px 7px !important;
  background: linear-gradient(180deg, var(--bg-tooltip, #2e2008) 0%, var(--bg-dark, #1a1208) 50%, var(--bg-base, #100c06) 100%) !important;
  border: 1px solid var(--border-tooltip, #3a2208) !important;
  border-top-color: rgba(240,200,100,0.40) !important;
  border-radius: 2px !important;
  box-shadow:
    inset 0 1px 0 rgba(240,210,120,0.10),
    0 0 0 1px rgba(92,58,26,0.32),
    0 1px 3px rgba(0,0,0,0.50) !important;
  font-family: var(--font-ui, 'Oswald', sans-serif) !important;
  font-size: 6.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: var(--sp-glow-amber, #d4a840) !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.2s ease !important;
  z-index: 20 !important;
}

body.dev-tools-scope.tr-page .clock-unit:hover .al-clock-tooltip {
  opacity: 1 !important;
}

body.dev-tools-scope.tr-page .clock-unit .clock-date-label {
  font-family: 'Cinzel', 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;
}

body.dev-tools-scope.tr-page .clock-unit .data-value {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--sp-glow-amber, #e6a848) !important;
  letter-spacing: 1px !important;
  
  flex-shrink: 0 !important;
}

body.dev-tools-scope.tr-page .clock-unit .clock-date-sep {
  display: inline-block !important;
  width: 3px !important;
  height: 3px !important;
  border-radius: 50% !important;
  background: var(--sp-copper, #7a5a35) !important;
  flex-shrink: 0 !important;
}

body.dev-tools-scope.tr-page .clock-unit .body-screw { display: none !important; }
body.dev-tools-scope.tr-page .clock-unit .clock-deco-gear { display: none !important; }

/* ── COLON BLINK для tr-page ── */
body.dev-tools-scope.tr-page .clock-unit .colon-blink .colon-dot {
  animation: clk-colon-blink 1s step-end infinite;
}

/* ═══════════════════════════════════════════════════════════════════════
   STEEL PANEL HEADERS — Forge density upgrade
   ═══════════════════════════════════════════════════════════════════════ */

/* Dashboard: steel header */
.tr-dashboard {
  position: relative;
  padding: 0;
}

.tr-dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: linear-gradient(180deg, rgba(197,139,58,0.14) 0%, rgba(197,139,58,0.06) 100%);
  border-bottom: 1px solid rgba(197,139,58,0.30);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -1px 0 rgba(0,0,0,0.3), 0 1px 0 rgba(197,139,58,0.10);
  position: relative;
}

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

.tr-dashboard-header-badge {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  opacity: 0.8;
}

.tr-dashboard-body {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  align-items: start;
  padding: var(--sp-space-4);
}

/* Rivets on dashboard */
.tr-rivet {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--sp-steel-mid, #555), var(--sp-steel-dark, #2A2A2A));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.7);
  pointer-events: none;
}
.tr-rivet--tl { top: 8px; left: 8px; }
.tr-rivet--tr { top: 8px; right: 8px; }
.tr-rivet--bl { bottom: 8px; left: 8px; }
.tr-rivet--br { bottom: 8px; right: 8px; }

/* Module card steel header — forge density upgrade */
.tr-mod-card {
  position: relative;
  overflow: hidden;
  padding: 0;
}

.tr-mod-header {
  padding: 8px 12px;
  background: linear-gradient(180deg,
    rgba(var(--mc-rgb, 197,139,58), 0.10) 0%,
    rgba(var(--mc-rgb, 197,139,58), 0.04) 100%);
  border-bottom: 1px solid rgba(var(--mc-rgb, 197,139,58), 0.22);
  margin-bottom: 0;
}

.tr-mod-status,
.tr-mod-stats,
.tr-mod-progress {
  margin-left: 12px;
  margin-right: 12px;
}

.tr-mod-status {
  margin-top: 8px;
}

.tr-mod-progress {
  margin-bottom: 10px;
}

/* .tr-mod-card-header kept for potential future use */
.tr-mod-card-header {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
  border-bottom: 1px solid rgba(197,139,58,0.18);
}

/* Table section steel header */
.tr-table-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  margin-bottom: var(--sp-space-2);
  background: linear-gradient(180deg, rgba(197,139,58,0.10), rgba(197,139,58,0.04));
  border: 1px solid var(--border-metal);
  border-bottom: 1px solid rgba(197,139,58,0.22);
  border-radius: 3px 3px 0 0;
  position: relative;
}

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

/* Filter buttons forge style */
.tr-qf {
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--forge-radius, 2px);
  border: 1px solid var(--border-metal);
  background: var(--bg-base);
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--tr-fast, 0.15s ease);
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 -1px 0 rgba(0,0,0,0.35),
    0 1px 3px rgba(0,0,0,0.30);
}
.tr-qf:hover {
  color: var(--text-body);
  background: var(--bg-surface);
  border-color: rgba(197,139,58,0.25);
}
.tr-qf.active {
  background: rgba(197,139,58,0.08);
  border-color: var(--accent-brass);
  color: var(--accent-brass);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.35),
    0 0 6px rgba(197,139,58,0.15);
}

/* Module grid section header */
.tr-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 10px 16px;
  background: linear-gradient(180deg, rgba(197,139,58,0.10) 0%, rgba(197,139,58,0.04) 100%);
  border: 1px solid var(--border-metal);
  border-left: 3px solid var(--accent-brass);
  border-radius: var(--forge-radius, 2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 2px 6px rgba(0,0,0,0.3);
}

.tr-section-header-icon {
  font-size: 16px;
  color: var(--accent-brass);
  flex-shrink: 0;
}

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

.tr-section-sep {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(197,139,58,0.15) 0%,
    rgba(197,139,58,0.08) 50%,
    transparent 100%
  );
}

/* ── [G] Filter button status-specific active variants ── */
.tr-qf--pass.active {
  border-color: rgba(107,142,78,0.60);
  color: var(--tr-pass);
  background: rgba(107,142,78,0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 -1px 0 rgba(0,0,0,0.35);
}
.tr-qf--fail.active {
  border-color: rgba(193,68,24,0.60);
  color: var(--tr-fail);
  background: rgba(193,68,24,0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 -1px 0 rgba(0,0,0,0.35);
}
.tr-qf--warn.active {
  border-color: rgba(224,196,137,0.60);
  color: var(--tr-warn);
  background: rgba(224,196,137,0.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 -1px 0 rgba(0,0,0,0.35);
}
.tr-qf--skip.active {
  border-color: rgba(122,106,84,0.50);
  color: var(--text-muted);
  background: rgba(122,106,84,0.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 -1px 0 rgba(0,0,0,0.35);
}

/* ── [G] Table zebra stripe ── */
.tr-table tbody tr:nth-child(even) {
  background: rgba(255,255,255,0.01);
}

/* ── [G] Run button — ember CTA ── */
.tr-run-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--sp-button-pad, 8px 12px);
  background: rgba(227,111,61,0.12);
  border: 1px solid rgba(227,111,61,0.45);
  border-radius: var(--forge-radius, 2px);
  color: var(--accent-ember);
  font-family: 'Oswald', var(--font-ui, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--forge-bevel), 0 2px 8px rgba(0,0,0,0.3);
  transition: all 0.15s ease;
}
.tr-run-btn .material-symbols-outlined { font-size: 16px; }
.tr-run-btn:hover {
  background: rgba(227,111,61,0.20);
  border-color: rgba(227,111,61,0.70);
  box-shadow: 0 0 12px rgba(227,111,61,0.20), var(--forge-bevel);
}
.tr-run-btn:active {
  transform: translateY(1px);
  box-shadow: var(--forge-bevel);
}
.tr-run-btn:focus-visible {
  outline: 2px solid var(--accent-ember);
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════
   HUD STRIP — Industrial telemetry bar
   ══════════════════════════════════════════════ */
.tr-hud-strip {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0;
  height: 34px;
  padding: 0 20px;
  background: linear-gradient(180deg, var(--bg-plate-hi, #1c1510) 0%, var(--bg-plate, #151009) 100%);
  border-top: 1px solid var(--border-dim, #3a2e22);
  border-bottom: 1px solid var(--border-metal, #5c4430);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    0 2px 8px rgba(0,0,0,0.35);
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

/* Steel texture top line */
.tr-hud-strip::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(197,139,58,0.08) 20%,
    rgba(197,139,58,0.15) 50%,
    rgba(197,139,58,0.08) 80%,
    transparent 100%
  );
  pointer-events: none;
}

.tr-hud-left {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  flex-shrink: 0;
}

.tr-hud-center {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
  justify-content: center;
  padding: 0 20px;
  border-left: 1px solid var(--border-dim, #3a2e22);
  border-right: 1px solid var(--border-dim, #3a2e22);
  margin: 0 16px;
  height: 100%;
}

.tr-hud-right {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  flex-shrink: 0;
}

.tr-hud-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--sp-steel, #6A6A6A), var(--sp-steel-dark, #2A2A2A));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.8), inset 0 -1px 1px rgba(255,255,255,0.04);
  transition: background 0.3s, box-shadow 0.3s;
  flex-shrink: 0;
}
.tr-hud-status-dot.up {
  background: radial-gradient(circle at 35% 30%, var(--success, #5cc8a0), var(--success-dark, #2d7a5c));
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.6), 0 0 4px rgba(86,163,166,0.4);
  animation: status-forge-ok 3s ease-in-out infinite;
}
.tr-hud-status-dot.down {
  background: radial-gradient(circle at 35% 30%, var(--log-critical, #c14418), var(--sp-copper-dark, #7a1e15));
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.6), 0 0 4px rgba(193,68,24,0.4);
}

  50% { opacity: 0.6; }
}

/* Industrial LED — status forge animation */
@keyframes status-forge-ok {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

.tr-hud-label {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-brass, #c58b3a);
}

.tr-hud-sep {
  color: var(--border-metal, #5c4430);
  font-size: 12px;
}

.tr-hud-endpoint-count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--text-muted, #7a6a54);
  letter-spacing: 0.05em;
}

.tr-hud-endpoint-count strong {
  color: var(--text-body, #bfa37a);
  font-weight: 700;
}

.tr-hud-meter {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
}

.tr-hud-meter-label {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted, #7a6a54);
  flex-shrink: 0;
  width: 52px;
}

.tr-hud-meter-bar {
  width: 60px;
  height: 2px;
  background: rgba(255,255,255,0.06);
  border-radius: 1px;
  overflow: hidden;
  flex-shrink: 0;
}

.tr-hud-meter-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--success, #56a3a6);
  border-radius: 1px;
  transition: width 0.5s ease, background 0.3s ease;
}

.tr-hud-meter.is-down .tr-hud-meter-fill {
  background: var(--accent-ember, #e36f3d);
  width: 100%;
}
.tr-hud-meter.is-up .tr-hud-meter-fill {
  background: var(--success, #56a3a6);
  width: 100%;
}

.tr-hud-meter-val {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted, #7a6a54);
  flex-shrink: 0;
  min-width: 44px;
  transition: color 0.3s;
}
.tr-hud-meter-val.up { color: var(--success, #56a3a6); }
.tr-hud-meter-val.down { color: var(--accent-ember, #e36f3d); }

/* JS перезаписує className — підтримуємо tr-tel-val.up/.down */
#sBackend.tr-tel-val,
#sBot.tr-tel-val {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  min-width: 44px;
  transition: color 0.3s;
}
#sBackend.up, #sBot.up { color: var(--success, #56a3a6); }
#sBackend.down, #sBot.down { color: var(--accent-ember, #e36f3d); }

/* Dot sync: коли dotBackend.up → meter bar зелений */
/* Використовуємо :has() якщо підтримується */
#tr-hud-backend:has(+ * + #sBackend.up) .tr-hud-meter-fill,
#tr-hud-bot:has(+ * + #sBot.up) .tr-hud-meter-fill {
  width: 100%;
  background: var(--success, #56a3a6);
}

/* Fallback — meter bar реагує на клас батьківського div через CSS */
.tr-hud-meter.is-up .tr-hud-meter-fill {
  width: 100%;
  background: var(--success, #56a3a6);
}
.tr-hud-meter.is-down .tr-hud-meter-fill {
  width: 100%;
  background: var(--accent-ember, #e36f3d);
}

.tr-hud-divider {
  width: 1px;
  height: 20px;
  background: var(--border-dim, #3a2e22);
  flex-shrink: 0;
}

.tr-hud-run-label {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted, #7a6a54);
}

.tr-hud-run-val {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-body, #bfa37a);
}

.tr-hud-ver {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-brass, #c58b3a);
  padding: 1px 6px;
  border: 1px solid rgba(197,139,58,0.25);
  border-radius: 2px;
  background: rgba(197,139,58,0.06);
  letter-spacing: 0.08em;
}

/* ══════════════════════════════════════════════
   PIPE FLANGE SEPARATOR
   ══════════════════════════════════════════════ */
.tr-pipe-sep {
  display: flex;
  align-items: center;
  padding: 0 8px;
  height: 28px;
  margin: 16px 0;
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.tr-pipe-sep-track {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(92,68,48,0.06) 50%, transparent 60%);
}

.tr-pipe-flange {
  flex-shrink: 0;
  width: 14px;
  height: 20px;
  background: linear-gradient(180deg,
    var(--sp-copper-dark, #2a1a08) 0%,
    var(--sp-copper-mid, #a07030) 20%,
    var(--sp-brass-light, #e8cc80) 45%,
    var(--sp-brass, #c5923a) 55%,
    var(--sp-brass-mid, #9a6828) 78%,
    var(--sp-copper-shadow, #1e1006) 100%
  );
  border-radius: 2px;
  border: 1px solid var(--accent-brass-dim, #8c6328);
  box-shadow:
    inset 0 1px 0 rgba(255,240,140,0.25),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    0 2px 6px rgba(0,0,0,0.6);
  opacity: 0.9;
}

.tr-pipe-flange--gauge {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%,
    var(--accent-brass-hover, #d89d48),
    var(--accent-brass-dim, #8c6328),
    var(--bg-base, #14100c)
  );
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 2px 8px rgba(0,0,0,0.5);
  opacity: 0.8;
}

.tr-pipe-gauge-label {
  font-size: 4px;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 700;
  color: var(--text-bright, #f3efdc);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tr-pipe-body {
  flex: 1;
  height: 7px;
  background: linear-gradient(90deg,
    var(--bg-base, #14100c) 0%,
    var(--accent-brass-dim, #8c6328) 15%,
    var(--accent-brass, #c58b3a) 30%,
    var(--accent-brass, #c58b3a) 50%,
    var(--accent-brass-dim, #8c6328) 70%,
    var(--bg-elevated, #2a2018) 100%
  );
  opacity: 0.35;
  position: relative;
}

.tr-pipe-body::after {
  content: '';
  position: absolute;
  left: 1px;
  top: 0; bottom: 0;
  width: 1.5px;
  background: rgba(255,240,140,0.08);
}

.tr-pipe-sep-line {
  flex: 2;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--border-dim, #3a2e22) 20%,
    var(--border-metal, #5c4430) 50%,
    var(--border-dim, #3a2e22) 80%,
    transparent 100%
  );
  margin: 0 8px;
}

/* ══════════════════════════════════════════════
   CORNER BRACKETS — Module Cards
   ══════════════════════════════════════════════ */
.tr-mod-corner {
  position: absolute;
  width: 10px;
  height: 10px;
  pointer-events: none;
  z-index: 2;
}

.tr-mod-corner--tl {
  top: 0;
  left: 0;
  border-top: 2px solid var(--mc, var(--accent-brass));
  border-left: 2px solid var(--mc, var(--accent-brass));
}

.tr-mod-corner--br {
  bottom: 0;
  right: 0;
  border-bottom: 2px solid var(--mc, var(--accent-brass));
  border-right: 2px solid var(--mc, var(--accent-brass));
}

/* ══════════════════════════════════════════════
   SECTION HEADERS — Steel panel headers
   ══════════════════════════════════════════════ */
.tr-section-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  margin-bottom: 0;
  background: linear-gradient(180deg,
    rgba(197,139,58,0.16) 0%,
    rgba(197,139,58,0.08) 100%
  );
  border: 1px solid var(--border-metal);
  border-left: 4px solid var(--accent-brass);
  border-bottom: 1px solid rgba(197,139,58,0.30);
  border-radius: 2px 2px 0 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.3),
    0 2px 8px rgba(0,0,0,0.3);
  position: relative;
}

.tr-section-hdr + .tr-dashboard,
.tr-section-hdr + .tr-module-grid,
.tr-section-hdr + .tr-table-wrap {
  border-top: none;
  border-radius: 0 0 2px 2px;
}

.tr-section-hdr::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(197,139,58,0.4) 0%,
    rgba(197,139,58,0.15) 40%,
    transparent 100%
  );
  pointer-events: none;
}

.tr-sechdr-bolt {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,
    var(--border-metal, #5c4430),
    var(--border-dim, #3a2e22)
  );
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.7);
  position: relative;
}

.tr-sechdr-bolt::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
}

.tr-sechdr-icon {
  font-size: 15px;
  color: var(--accent-brass, #c58b3a);
  flex-shrink: 0;
}

.tr-sechdr-title {
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-brass);
  
  flex-shrink: 0;
}

.tr-sechdr-sep {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(197,139,58,0.20) 0%,
    rgba(197,139,58,0.08) 50%,
    transparent 100%
  );
  display: block;
}

.tr-sechdr-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, #7a6a54);
  letter-spacing: 0.05em;
}

/* ══════════════════════════════════════════════
   ISSUE CARDS — Dramatic steampunk upgrade
   ══════════════════════════════════════════════ */
.tr-issue-card {
  position: relative;
  overflow: hidden;
}

/* Hazard stripe for critical issues */
.tr-issue-card--critical::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: repeating-linear-gradient(
    45deg,
    var(--tr-fail, #e36f3d),
    var(--tr-fail, #e36f3d) 8px,
    transparent 8px,
    transparent 16px
  );
  opacity: 0.7;
  pointer-events: none;
  z-index: 1;
}

/* Pulse animation for critical */
.tr-issue-card--critical {
  animation: tr-critical-pulse 3s ease-in-out infinite;
}

@keyframes tr-critical-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(193,68,24,0); }
  50% { box-shadow: 0 0 0 2px rgba(193,68,24,0.20); }
}

/* Corner accent top-right for all issue cards */
.tr-issue-card::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border-top: 2px solid var(--ic, var(--tr-fail));
  border-right: 2px solid var(--ic, var(--tr-fail));
  opacity: 0.5;
  pointer-events: none;
}

/* Issue card header rivet */
.tr-issue-header {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
}

.tr-issue-header::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--sp-copper, #5a5048), var(--sp-copper-mid, #2a2018));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.7);
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════
   GEAR ANIMATIONS — Background Scene
   ══════════════════════════════════════════════ */

/* Gear animations */
.tr-gear-a {
  animation: tr-spin-cw 80s linear infinite;
  transform-origin: 1340px 820px;
}
.tr-gear-b {
  animation: tr-spin-ccw 120s linear infinite;
  transform-origin: 68px 80px;
}
.tr-gear-c {
  animation: tr-spin-cw 35s linear infinite;
  transform-origin: 1380px 430px;
}
.tr-gear-d {
  animation: tr-spin-ccw 50s linear infinite;
  transform-origin: 20px 480px;
}
.tr-gear-compass {
  animation: tr-spin-cw 200s linear infinite;
  transform-origin: 100px 820px;
}

@keyframes tr-spin-cw {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes tr-spin-ccw {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .tr-gear-a, .tr-gear-b, .tr-gear-c, .tr-gear-d, .tr-gear-compass {
    animation: none;
  }
}

/* ══════════════════════════════════════════════
   CONTENT FORGE FRAME — Riveted iron panel wrapper
   ══════════════════════════════════════════════ */
.tr-content-forge {
  position: relative;
  max-width: 1440px;
  margin: 8px auto 32px;
  padding: 2px;
  background: var(--bg-surface);
  border: 1px solid var(--border-metal);
  border-top: 2px solid var(--accent-brass);
  border-radius: var(--forge-radius, 2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 -2px 0 rgba(0,0,0,0.5),
    0 8px 32px rgba(0,0,0,0.6),
    0 2px 8px rgba(0,0,0,0.4);
}

.tr-content-forge::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(197,139,58,0.6) 20%,
    rgba(197,139,58,0.9) 50%,
    rgba(197,139,58,0.6) 80%,
    transparent 100%
  );
  pointer-events: none;
}

/* Corner rivets for the content forge frame */
.tr-cf-rivet {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--sp-steel, #6A6A6A), var(--sp-steel-dark, #2A2A2A));
  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: 5;
}
.tr-cf-rivet::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%);
}
.tr-cf-rivet--tl { top: -5px;  left: 16px; }
.tr-cf-rivet--tr { top: -5px;  right: 16px; }
.tr-cf-rivet--bl { bottom: -5px; left: 16px; }
.tr-cf-rivet--br { bottom: -5px; right: 16px; }

/* Vignette overlay — K-canon atmosphere */
body.dev-tools-scope.tr-page::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.35) 100%);
}


/* ═══════════════════════════════════════════════════════════════════ */
/* CONSISTENCY 2026-05-13 — Dev Tools cross-page normalization       */
/* (per DevTools-Facts-Scan-2026-05-13.md)                            */
/* ═══════════════════════════════════════════════════════════════════ */

/* A. body.overflow-x — уніфіковано до clip (було visible/hidden mix) */
body.devtools-body { overflow-x: clip !important; }

/* B. .al-bg-scene fixed — fallback якщо локальний CSS не задає */
.dev-tools-scope .al-bg-scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}