/* ═══════════════════════════════════════════════════════════════════
   dt-components.css — Shared Dev Tools Component Library  v1.0
   Canonical dt-* classes for ALL Dev Tools pages (18 pages).
   ADDITIVE — does NOT replace existing al-*, eb-*, pm-* classes.
   Pages can migrate gradually; import is mandatory from v1.0 onward.

   Import order: після devtools-style-adc.css, перед dt-primitives.css
   (або перед page-specific CSS якщо primitives вже є).

   Tokens: успадковуються від dt-primitives.css (.dev-tools-scope).
   Scope:  всі класи обгорнуто в .dev-tools-scope.
   ═══════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────
   1. STATUS DOTS
   Usage: <span class="dt-status dt-status--green"></span>
   Variants: --green --red --yellow --blue --grey
───────────────────────────────────────────────────────────────── */
.dev-tools-scope .dt-status {
  display: inline-block;
  width:  8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  background: var(--sp-steel-mid, #555);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
}
/* 🔧 cc-728: замінено hardcoded hex на CSS токени */
.dev-tools-scope .dt-status--green {
  background: var(--success, #56a3a6);
  box-shadow: 0 0 5px 1px rgba(63,168,122,0.50), 0 0 0 1px rgba(0,0,0,0.3);
  animation: status-forge-ok 2.4s ease-in-out infinite;
}
.dev-tools-scope .dt-status--red {
  background: var(--log-critical, #c14418);
  box-shadow: 0 0 5px 1px rgba(193,68,24,0.55), 0 0 0 1px rgba(0,0,0,0.3);
  animation: status-forge-ok 1.6s ease-in-out infinite;
}
.dev-tools-scope .dt-status--yellow {
  background: var(--log-warn, #c9932a);
  box-shadow: 0 0 5px 1px rgba(201,147,42,0.50), 0 0 0 1px rgba(0,0,0,0.3);
  animation: status-forge-ok 2s ease-in-out infinite;
}
.dev-tools-scope .dt-status--blue {
  background: var(--mod-applicant, #4a8ab5);
  box-shadow: 0 0 5px 1px rgba(74,138,181,0.50), 0 0 0 1px rgba(0,0,0,0.3);
}
.dev-tools-scope .dt-status--grey {
  background: var(--sp-steel-mid, #555);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.07);
}


/* ─────────────────────────────────────────────────────────────────
   2. STATS ROW
   Usage:
     <div class="dt-stats-row">
       <div class="dt-stat">
         <span class="dt-stat-num">42</span>
         <span class="dt-stat-lbl">Events</span>
       </div>
     </div>
───────────────────────────────────────────────────────────────── */
.dev-tools-scope .dt-stats-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex-wrap: wrap;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(92,68,48,0.28);
  background: rgba(0,0,0,0.18);
}
.dev-tools-scope .dt-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 16px;
  border-right: 1px solid rgba(92,68,48,0.22);
  min-width: 70px;
  flex: 1;
}
.dev-tools-scope .dt-stat:last-child {
  border-right: none;
}
.dev-tools-scope .dt-stat-num {
  font-family: var(--font-mono, 'JetBrains Mono', 'Courier New', monospace);
  font-size: 18px;
  font-weight: 700;
  color: var(--sp-brass-light, #c8a855);
  letter-spacing: 0.04em;
  line-height: 1;
}
.dev-tools-scope .dt-stat-lbl {
  font-family: var(--font-dt-title, 'Oswald', 'Cinzel', sans-serif);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(240,232,216,0.45);
  line-height: 1;
}


/* ─────────────────────────────────────────────────────────────────
   3. TABS
   Usage:
     <div class="dt-tabs">
       <button class="dt-tab active" data-tab="a">Label</button>
       <button class="dt-tab"        data-tab="b">Label</button>
     </div>
───────────────────────────────────────────────────────────────── */
.dev-tools-scope .dt-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(92,68,48,0.28);
  border-radius: 3px;
  flex-wrap: wrap;
}
.dev-tools-scope .dt-tab {
  font-family: var(--font-dt-title, 'Oswald', 'Cinzel', sans-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(240,232,216,0.50);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 5px 12px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.dev-tools-scope .dt-tab:hover {
  color: rgba(240,232,216,0.80);
  background: rgba(160,133,53,0.08);
  border-color: rgba(160,133,53,0.20);
}
.dev-tools-scope .dt-tab.active {
  color: var(--sp-brass-light, #c8a855);
  background: rgba(160,133,53,0.14);
  border-color: rgba(160,133,53,0.35);
}


/* ─────────────────────────────────────────────────────────────────
   4. SEARCH
   Usage:
     <div class="dt-search">
       <input type="text" placeholder="Пошук…">
     </div>
───────────────────────────────────────────────────────────────── */
.dev-tools-scope .dt-search {
  position: relative;
  display: flex;
  align-items: center;
}
.dev-tools-scope .dt-search input {
  font-family: var(--font-mono, 'JetBrains Mono', 'Courier New', monospace);
  font-size: 12px;
  color: rgba(240,232,216,0.85);
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(92,68,48,0.35);
  border-radius: 2px;
  padding: 5px 10px 5px 28px;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
  width: 200px;
}
.dev-tools-scope .dt-search input::placeholder {
  color: rgba(240,232,216,0.28);
  font-style: italic;
}
.dev-tools-scope .dt-search input:focus {
  border-color: rgba(160,133,53,0.50);
  background: rgba(0,0,0,0.38);
}
.dev-tools-scope .dt-search::before {
  content: '';
  position: absolute;
  left: 9px;
  width: 10px;
  height: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238a7a6a' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='6.5' cy='6.5' r='4'/%3E%3Cpath d='m10 10 3 3'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}


/* ─────────────────────────────────────────────────────────────────
   5. TOAST NOTIFICATIONS
   Usage:
     <div class="dt-toasts" id="toasts"></div>
     JS: toasts.innerHTML += `<div class="dt-toast dt-toast--ok">…</div>`
   Variants: --ok  --err  --warn  --info
───────────────────────────────────────────────────────────────── */
.dev-tools-scope .dt-toasts {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.dev-tools-scope .dt-toast {
  font-family: var(--font-mono, 'JetBrains Mono', 'Courier New', monospace);
  font-size: 12px;
  color: rgba(240,232,216,0.92);
  background: rgba(28,20,14,0.94);
  border: 1px solid rgba(92,68,48,0.45);
  border-left-width: 3px;
  border-left-color: var(--sp-brass, #a08535);
  border-radius: 3px;
  padding: 8px 14px;
  min-width: 220px;
  max-width: 380px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.55);
  pointer-events: auto;
  animation: card-enter 0.18s ease-out;
}
.dev-tools-scope .dt-toast--ok   { border-left-color: var(--success, #56a3a6) /* FIX cc-791 */; }
.dev-tools-scope .dt-toast--err  { border-left-color: #c14418; }
.dev-tools-scope .dt-toast--warn { border-left-color: #c9932a; }
.dev-tools-scope .dt-toast--info { border-left-color: #4a8ab5; }


/* ─────────────────────────────────────────────────────────────────
   6. EMPTY STATE
   Usage:
     <div class="dt-empty">
       <div class="dt-empty-icon">⚙</div>
       <div class="dt-empty-text">Нічого не знайдено</div>
     </div>
───────────────────────────────────────────────────────────────── */
.dev-tools-scope .dt-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 20px;
  text-align: center;
  opacity: 0.7;
}
.dev-tools-scope .dt-empty-icon {
  font-size: 32px;
  opacity: 0.35;
  line-height: 1;
  filter: grayscale(0.6);
}
.dev-tools-scope .dt-empty-text {
  font-family: var(--font-dt-title, 'Oswald', 'Cinzel', sans-serif);
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(240,232,216,0.38);
}


/* ─────────────────────────────────────────────────────────────────
   7. ICON BUTTON
   Usage: <button class="dt-icon-btn" title="…">SVG</button>
───────────────────────────────────────────────────────────────── */
.dev-tools-scope .dt-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(92,68,48,0.32);
  border-radius: 2px;
  color: rgba(240,232,216,0.55);
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.dev-tools-scope .dt-icon-btn:hover {
  background: rgba(160,133,53,0.12);
  border-color: rgba(160,133,53,0.38);
  color: var(--sp-brass-light, #c8a855);
}
.dev-tools-scope .dt-icon-btn:active {
  background: rgba(160,133,53,0.20);
}
.dev-tools-scope .dt-icon-btn svg {
  width: 14px;
  height: 14px;
  pointer-events: none;
}


/* ─────────────────────────────────────────────────────────────────
   8. BADGES / PILLS
   Usage: <span class="dt-badge dt-badge--critical">CRITICAL</span>
   Variants: --critical  --high  --medium  --info  --ok
───────────────────────────────────────────────────────────────── */
.dev-tools-scope .dt-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono, 'JetBrains Mono', 'Courier New', monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 2px;
  border: 1px solid currentColor;
  line-height: 1.5;
  white-space: nowrap;
  flex-shrink: 0;
}
.dev-tools-scope .dt-badge--critical {
  color: #e86040;
  background: rgba(232,96,64,0.12);
  border-color: rgba(232,96,64,0.35);
}
.dev-tools-scope .dt-badge--high {
  color: #c9932a;
  background: rgba(201,147,42,0.12);
  border-color: rgba(201,147,42,0.35);
}
.dev-tools-scope .dt-badge--medium {
  color: var(--sp-brass-light, #c8a855);
  background: rgba(160,133,53,0.10);
  border-color: rgba(160,133,53,0.30);
}
.dev-tools-scope .dt-badge--info {
  color: #4a8ab5;
  background: rgba(74,138,181,0.10);
  border-color: rgba(74,138,181,0.30);
}
.dev-tools-scope .dt-badge--ok {
  color: var(--success, #56a3a6) /* FIX cc-791 */;
  background: rgba(63,168,122,0.10);
  border-color: rgba(63,168,122,0.30);
}


/* ─────────────────────────────────────────────────────────────────
   9. MODULE PLATE  (standalone content card / panel)
   Usage:
     <div class="dt-plate">
       content here
     </div>
   Note: для великих монітор-панелей використовуй .al-module-panel
   (з alerts-style-adc.css). dt-plate — для менших блоків/карток.
───────────────────────────────────────────────────────────────── */
.dev-tools-scope .dt-plate {
  background: rgba(20,14,10,0.72);
  border: 1px solid rgba(92,68,48,0.32);
  border-radius: 4px;
  box-shadow:
    0 2px 12px rgba(0,0,0,0.38),
    inset 0 1px 0 rgba(197,139,58,0.06);
  position: relative;
  overflow: hidden;
}
.dev-tools-scope .dt-plate::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(197,139,58,0.04) 0%,
    transparent 40%);
  pointer-events: none;
}


/* ─────────────────────────────────────────────────────────────────
   10. SECTION HEADER  (inner block headers inside panels)
   Usage:
     <div class="dt-section-hdr">
       <span class="dt-section-title">НАЗВА</span>
       <span class="dt-section-hint">підказка</span>
       <span class="dt-section-count">42</span>
     </div>
   Mirrors: al-mc-row--header / eb-section-header
───────────────────────────────────────────────────────────────── */
.dev-tools-scope .dt-section-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 16px;
  background: rgba(0,0,0,0.25);
  border-bottom: 1px solid rgba(0,0,0,0.40);
  position: relative;
}
.dev-tools-scope .dt-section-hdr::before,
.dev-tools-scope .dt-section-hdr::after {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #525252, #2a2a2a);
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.70);
  align-self: center;
}
.dev-tools-scope .dt-section-hdr::after {
  margin-left: auto;
}
.dev-tools-scope .dt-section-title {
  font-family: var(--font-dt-title, 'Oswald', 'Cinzel', sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(240,232,216,0.90);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.dev-tools-scope .dt-section-hint {
  font-size: 11px;
  color: rgba(240,232,216,0.35);
  font-style: italic;
  flex: 1;
}
.dev-tools-scope .dt-section-count {
  font-family: var(--font-mono, 'JetBrains Mono', 'Courier New', monospace);
  font-size: 11px;
  color: var(--sp-brass-light, #c8a855);
  background: rgba(160,133,53,0.08);
  border: 1px solid rgba(160,133,53,0.30);
  padding: 1px 6px;
  border-radius: 2px;
}


/* ─────────────────────────────────────────────────────────────────
   11. DROPDOWN
   Usage:
     <div class="dt-dropdown">
       <button class="dt-dropdown-trigger">Вибір ▾</button>
       <div class="dt-dropdown-menu">
         <div class="dt-dropdown-opt active">Option A</div>
         <div class="dt-dropdown-opt">Option B</div>
       </div>
     </div>
   JS: toggle class "open" on .dt-dropdown to show menu
───────────────────────────────────────────────────────────────── */
.dev-tools-scope .dt-dropdown {
  position: relative;
  display: inline-flex;
}
.dev-tools-scope .dt-dropdown-trigger {
  font-family: var(--font-mono, 'JetBrains Mono', 'Courier New', monospace);
  font-size: 11px;
  color: rgba(240,232,216,0.72);
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(92,68,48,0.38);
  border-radius: 2px;
  padding: 5px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: border-color 0.15s, background 0.15s;
  white-space: nowrap;
}
.dev-tools-scope .dt-dropdown-trigger:hover,
.dev-tools-scope .dt-dropdown.open .dt-dropdown-trigger {
  border-color: rgba(160,133,53,0.45);
  background: rgba(0,0,0,0.38);
  color: rgba(240,232,216,0.90);
}
.dev-tools-scope .dt-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  background: rgba(18,12,8,0.97);
  border: 1px solid rgba(92,68,48,0.42);
  border-radius: 2px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.60);
  z-index: 200;
  overflow: hidden;
}
.dev-tools-scope .dt-dropdown.open .dt-dropdown-menu {
  display: block;
}
.dev-tools-scope .dt-dropdown-opt {
  font-family: var(--font-mono, 'JetBrains Mono', 'Courier New', monospace);
  font-size: 11px;
  color: rgba(240,232,216,0.70);
  padding: 7px 12px;
  cursor: pointer;
  border-bottom: 1px solid rgba(92,68,48,0.16);
  transition: background 0.12s, color 0.12s;
}
.dev-tools-scope .dt-dropdown-opt:last-child {
  border-bottom: none;
}
.dev-tools-scope .dt-dropdown-opt:hover {
  background: rgba(160,133,53,0.10);
  color: rgba(240,232,216,0.92);
}
.dev-tools-scope .dt-dropdown-opt.active {
  color: var(--sp-brass-light, #c8a855);
  background: rgba(160,133,53,0.08);
}


/* ─────────────────────────────────────────────────────────────────
   12. DIVIDER  (декоративна розділююча лінія)
   Usage:
     <div class="dt-divider"></div>          ← горизонтальний
     <div class="dt-divider dt-divider--v"></div> ← вертикальний
   Варіанти:
     --brass  (brass accent на середині)
     --rivets (rivet-bolt на кінцях)
───────────────────────────────────────────────────────────────── */
.dev-tools-scope .dt-divider {
  position: relative;
  height: 1px;
  margin: 10px 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(92, 68, 48, 0.55) 15%,
    rgba(160, 133, 53, 0.42) 50%,
    rgba(92, 68, 48, 0.55) 85%,
    transparent 100%);
  box-shadow: 0 1px 0 rgba(232, 219, 178, 0.04);
  flex-shrink: 0;
}
.dev-tools-scope .dt-divider--v {
  width: 1px;
  height: auto;
  min-height: 24px;
  margin: 0 10px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(92, 68, 48, 0.55) 15%,
    rgba(160, 133, 53, 0.42) 50%,
    rgba(92, 68, 48, 0.55) 85%,
    transparent 100%);
  box-shadow: 1px 0 0 rgba(232, 219, 178, 0.04);
}
.dev-tools-scope .dt-divider--rivets::before,
.dev-tools-scope .dt-divider--rivets::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #525252, #2a2a2a);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.7);
  transform: translateY(-50%);
}
.dev-tools-scope .dt-divider--rivets::before { left: 8px; }
.dev-tools-scope .dt-divider--rivets::after  { right: 8px; }
.dev-tools-scope .dt-divider--brass {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(197, 139, 58, 0.18) 20%,
    rgba(232, 200, 96, 0.55) 50%,
    rgba(197, 139, 58, 0.18) 80%,
    transparent 100%);
}


/* ─────────────────────────────────────────────────────────────────
   13. MODULE LIST  (sidebar-стиль переліку модулів)
   Референс: сайдбар Dev Tools Hub (SERVER/OBSERVER/PUBLISHER/…).
   Riveted plate per item, кольорова іконка зліва, монотекст справа.
   Usage:
     <ul class="dt-module-list">
       <li class="dt-module-item" style="--mod-color:#2ecc71">
         <span class="dt-module-rivet dt-module-rivet--tl"></span>
         <span class="dt-module-rivet dt-module-rivet--bl"></span>
         <span class="dt-module-icon material-symbols-outlined">visibility</span>
         <span class="dt-module-name">OBSERVER</span>
       </li>
     </ul>
───────────────────────────────────────────────────────────────── */
.dev-tools-scope .dt-module-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dev-tools-scope .dt-module-item {
  --mod-color: var(--sp-brass-light, #c8a855);
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 12px;
  background: linear-gradient(180deg,
    rgba(28, 22, 16, 0.85) 0%,
    rgba(20, 14, 10, 0.90) 100%);
  border: 1px solid rgba(92, 68, 48, 0.42);
  border-left: 3px solid var(--mod-color);
  border-radius: 2px;
  box-shadow:
    inset 0 1px 0 rgba(232, 219, 178, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45),
    0 1px 3px rgba(0, 0, 0, 0.40);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.10s;
}
.dev-tools-scope .dt-module-item:hover {
  background: linear-gradient(180deg,
    rgba(40, 30, 22, 0.90) 0%,
    rgba(28, 20, 14, 0.95) 100%);
  border-color: rgba(160, 133, 53, 0.55);
}
.dev-tools-scope .dt-module-item:active {
  transform: translateY(1px);
}
.dev-tools-scope .dt-module-item.active,
.dev-tools-scope .dt-module-item[aria-current="true"] {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--mod-color) 12%, transparent) 0%,
    rgba(20, 14, 10, 0.95) 100%);
  border-color: var(--mod-color);
}
.dev-tools-scope .dt-module-rivet {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #525252, #2a2a2a);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.70);
  pointer-events: none;
}
.dev-tools-scope .dt-module-rivet--tl { top: 3px; left: 6px; }
.dev-tools-scope .dt-module-rivet--bl { bottom: 3px; left: 6px; }
.dev-tools-scope .dt-module-icon {
  font-size: 18px;
  color: var(--mod-color);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--mod-color) 30%, transparent));
  flex-shrink: 0;
}
.dev-tools-scope .dt-module-name {
  font-family: var(--font-dt-title, 'Oswald', 'Cinzel', sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mod-color);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dev-tools-scope .dt-module-count {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  color: rgba(240, 232, 216, 0.55);
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid rgba(92, 68, 48, 0.30);
  padding: 1px 6px;
  border-radius: 2px;
}


/* ─────────────────────────────────────────────────────────────────
   14. MANOMETER  (pressure gauge для pipe-секцій)
   Usage: <div class="dt-manometer" style="--needle:42"></div>
   --needle: 0-100 (відсоток тиску, напрямок стрілки 0 = -135°, 100 = 135°)
───────────────────────────────────────────────────────────────── */
.dev-tools-scope .dt-manometer {
  --needle: 50;
  --angle: calc((var(--needle) * 2.7deg) - 135deg);
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%,
      rgba(232, 219, 178, 0.10) 0%,
      rgba(40, 28, 18, 0.95) 40%,
      rgba(10, 7, 5, 0.98) 100%);
  border: 2px solid rgba(92, 68, 48, 0.75);
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, 0.80),
    inset 0 -1px 0 rgba(232, 219, 178, 0.05),
    0 2px 6px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 0, 0, 0.40);
  flex-shrink: 0;
}
.dev-tools-scope .dt-manometer::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 100%,
    rgba(197, 139, 58, 0.08) 0%,
    rgba(5, 3, 1, 0.95) 70%);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.80);
}
.dev-tools-scope .dt-manometer::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 16px;
  background: linear-gradient(180deg, #e8c860 0%, #c58b3a 70%, #7a4e18 100%);
  transform: translate(-50%, -100%) rotate(var(--angle));
  transform-origin: 50% 100%;
  box-shadow: 0 0 4px rgba(232, 200, 96, 0.55);
  border-radius: 1px;
  transition: transform 0.5s ease;
}
.dev-tools-scope .dt-manometer-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e8c880, #8c6b46 55%, #2a1810);
  border: 1px solid #1a0e06;
  box-shadow: inset 0 0.5px 1px rgba(255,255,255,0.35), 0 1px 2px rgba(0,0,0,0.6);
  transform: translate(-50%, -50%);
  z-index: 2;
}


/* ─────────────────────────────────────────────────────────────────
   15. PIPE VALVE WHEEL  (декоративне вентильне колесо)
   Usage:
     <div class="dt-pipe-valve">
       <div class="dt-pipe-valve-wheel"></div>
       <div class="dt-pipe-valve-stem"></div>
     </div>
   Додатково: додати клас .dt-pipe-valve--spin для повільного обертання.
───────────────────────────────────────────────────────────────── */
.dev-tools-scope .dt-pipe-valve {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 36px;
  flex-shrink: 0;
}
.dev-tools-scope .dt-pipe-valve-wheel {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,
      transparent 0%,
      transparent 22%,
      rgba(197, 139, 58, 0.40) 23%,
      rgba(160, 133, 53, 0.55) 38%,
      rgba(92, 68, 48, 0.40) 55%,
      transparent 60%),
    conic-gradient(from 0deg,
      rgba(197, 139, 58, 0.55) 0deg,
      rgba(92, 68, 48, 0.30) 45deg,
      rgba(197, 139, 58, 0.55) 90deg,
      rgba(92, 68, 48, 0.30) 135deg,
      rgba(197, 139, 58, 0.55) 180deg,
      rgba(92, 68, 48, 0.30) 225deg,
      rgba(197, 139, 58, 0.55) 270deg,
      rgba(92, 68, 48, 0.30) 315deg,
      rgba(197, 139, 58, 0.55) 360deg);
  border: 1px solid rgba(28, 18, 10, 0.85);
  box-shadow:
    inset 0 1px 0 rgba(232, 200, 140, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.65),
    0 2px 4px rgba(0, 0, 0, 0.55);
  position: relative;
}
.dev-tools-scope .dt-pipe-valve-wheel::before {
  content: '';
  position: absolute;
  inset: 28%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e8c880, #8c6b46 55%, #2a1810);
  border: 1px solid rgba(28, 18, 10, 0.85);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.30), 0 1px 2px rgba(0,0,0,0.55);
}
.dev-tools-scope .dt-pipe-valve-stem {
  width: 4px;
  height: 10px;
  background: linear-gradient(180deg,
    rgba(197, 139, 58, 0.55) 0%,
    rgba(92, 68, 48, 0.70) 100%);
  border: 1px solid rgba(28, 18, 10, 0.70);
  border-top: none;
  box-shadow:
    inset 1px 0 0 rgba(232, 200, 140, 0.15),
    inset -1px 0 0 rgba(0, 0, 0, 0.55);
}
.dev-tools-scope .dt-pipe-valve--spin .dt-pipe-valve-wheel {
  animation: spin 22s linear infinite;
}


/* ─────────────────────────────────────────────────────────────────
   16. RESPONSIVE
───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .dev-tools-scope .dt-stats-row { gap: 0; }
  .dev-tools-scope .dt-stat { padding: 6px 10px; min-width: 55px; }
  .dev-tools-scope .dt-stat-num { font-size: 15px; }
  .dev-tools-scope .dt-search input { width: 150px; }
  .dev-tools-scope .dt-section-hdr { padding: 8px 12px; }
  .dev-tools-scope .dt-tabs { gap: 1px; padding: 2px; }
  .dev-tools-scope .dt-tab { padding: 4px 8px; font-size: 10px; }
  .dev-tools-scope .dt-toasts { bottom: 12px; right: 12px; }
}
@media (max-width: 480px) {
  .dev-tools-scope .dt-stats-row { flex-direction: column; }
  .dev-tools-scope .dt-stat { border-right: none; border-bottom: 1px solid rgba(92,68,48,0.22); }
  .dev-tools-scope .dt-stat:last-child { border-bottom: none; }
  .dev-tools-scope .dt-search input { width: 120px; }
  .dev-tools-scope .dt-toast { min-width: 180px; max-width: calc(100vw - 30px); }
}