/* ═════════════════════════════════════════════════════════════════════ */
/* CSS-HTML Optimizer Upgrades v1.0 - 25 changes (Edison Workshop)        */
/* Page-scoped: devtools-web-adc.html (hub)                               */
/* ═════════════════════════════════════════════════════════════════════ */

/* [UPGRADE 1A.1] Заголовок-монумент: великі різьблені латунні літери */
body.devtools-body .dt-crest__title.al-title{
  font-size:clamp(56px,8vw,108px) !important;
  line-height:1 !important;
  letter-spacing:.06em !important;
  font-weight:700 !important;
  background:linear-gradient(180deg,var(--text-bright, #f3efdc) 0%,var(--warning, #e0c489) 22%,var(--sp-glow-amber, #c58b3a) 48%,var(--sp-copper-dark, #4a3518) 78%,var(--bg-void, #0d0907) 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
  -webkit-text-stroke:.5px rgba(40,22,8,.5) !important;
  text-shadow:0 4px 22px rgba(245,169,38,.32), 0 10px 36px rgba(0,0,0,.55) !important;
  position:relative;
}

/* [UPGRADE 1A.2] Кінематичне світло: теплий конус згори + туман знизу */
body.devtools-body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:2;
  background:
    radial-gradient(ellipse 70% 45% at 50% -5%,
      rgba(255,210,130,.20) 0%,
      rgba(255,200,120,.10) 25%,
      transparent 60%),
    linear-gradient(180deg,
      transparent 0%,
      transparent 55%,
      rgba(13,9,7,.50) 88%,
      rgba(13,9,7,.85) 100%);
}

/* [UPGRADE 1A.3] Колір під цех (monitoring/docs/dev) */
body.devtools-body .tc.devtool-card[data-category="monitoring"]{
  --card-accent:var(--mod-publisher, #d4a24a); --card-accent-glow:rgba(212,165,74,.42);
}
body.devtools-body .tc.devtool-card[data-category="docs"]{
  --card-accent:var(--mod-applicant, #5a8299); --card-accent-glow:rgba(90,130,153,.42);
}
body.devtools-body .tc.devtool-card[data-category="dev"]{
  --card-accent:var(--mod-challenger, #c86a1c); --card-accent-glow:rgba(200,106,28,.42);
}
body.devtools-body .tc.devtool-card .tc-stripe{
  background:linear-gradient(90deg, transparent 0%, var(--card-accent,var(--sp-glow-amber, #c58b3a)) 35%, var(--card-accent,var(--sp-glow-amber, #c58b3a)) 65%, transparent 100%) !important;
  opacity:.95 !important;
}
body.devtools-body .tc.devtool-card .tc-tool-icon-ms{
  color:var(--card-accent,var(--sp-glow-amber, #c58b3a)) !important;
  /* text-shadow glow замінено на box-shadow на псевдоелементі */
}
body.devtools-body .tc.devtool-card .tc-slabel{
  color:var(--card-accent,var(--sp-glow-amber, #c58b3a)) !important;
  border-color:var(--card-accent,var(--sp-glow-amber, #c58b3a)) !important;
}
body.devtools-body .tc.devtool-card .tc-bg-mark{
  color:var(--card-accent,var(--sp-glow-amber, #c58b3a)) !important;
}

/* [UPGRADE 1A.4] Живі лампи на місці прочерків у tc-hero */
body.devtools-body .tc-hero .tc-hc .tc-num{
  position:relative;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  min-width:28px;
  min-height:28px;
}
body.devtools-body .tc-hero .tc-hc .tc-num::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:10px; height:10px;
  border-radius:50%;
  background:radial-gradient(circle, var(--warning, #e0c489) 0%, var(--card-accent,var(--sp-glow-amber, #c58b3a)) 55%, var(--bg-void, #0d0907) 100%);
  box-shadow:
    0 0 6px 1px rgba(245,200,120,.55),
    0 0 14px 4px var(--card-accent-glow, rgba(245,169,38,.22)),
    inset 0 1px 1px rgba(255,240,200,.5);
  z-index:-1;
  animation:dt-lamp-pulse 2.2s ease-in-out infinite;
}
body.devtools-body .tc-hero .tc-hc .tc-num.v-muted::after{
  background:radial-gradient(circle, var(--border-bright, #8c6b46) 0%, var(--border-dim, #3a2e22) 60%, var(--bg-base, #14100c) 100%) !important;
  box-shadow:0 0 3px rgba(122,106,84,.4) !important;
  animation-duration:6s !important;
}
@keyframes dt-lamp-pulse{
  0%,100%{ opacity:.75; transform:translate(-50%,-50%) scale(1); }
  50%   { opacity:1;   transform:translate(-50%,-50%) scale(1.18); }
}

/* [UPGRADE 1A.5] Гідравлічний вентиль між блоками */
body.devtools-body .tools-section-divider .tools-sd-valve{
  transform:scale(1.65) !important;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(245,169,38,.20)) !important;
  transition:filter .6s ease !important;
}
body.devtools-body .tools-section-divider .sp-valve-wheel{
  animation:dt-valve-idle 14s linear infinite !important;
}
body.devtools-body .tools-section-divider:hover .sp-valve-wheel,
body.devtools-body .tools-section-divider:focus-within .sp-valve-wheel{
  animation:dt-valve-fast 1.6s linear infinite !important;
}
body.devtools-body .tools-section-divider:hover .tools-sd-valve{
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.55)) drop-shadow(0 0 28px rgba(245,169,38,.45)) !important;
}
@keyframes dt-valve-idle{ to{ transform:rotate(360deg); } }
@keyframes dt-valve-fast{ to{ transform:rotate(360deg); } }

/* ──────────────────────────────────────────────────────────────────── */
/* RIVEN 2                                                              */
/* ──────────────────────────────────────────────────────────────────── */

/* [UPGRADE 2.1] ID-плита блоку - більша, тиснена */
body.devtools-body .al-mc-row--header .al-module-plate{
  font-family:'Cinzel', serif !important;
  font-size:24px !important;
  font-weight:700 !important;
  padding:4px 14px !important;
  letter-spacing:.18em !important;
  background:linear-gradient(180deg, var(--bg-surface, #1f1812) 0%, var(--bg-void, #0d0907) 100%) !important;
  color:var(--warning, #e0c489) !important;
  border:1.5px solid var(--border-metal, #5c4430) !important;
  border-radius:2px !important;
  box-shadow:
    inset 0 1px 0 rgba(245,220,160,.22),
    inset 0 -1px 0 rgba(0,0,0,.7),
    0 2px 6px rgba(0,0,0,.5) !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,.85),
    0 -1px 0 rgba(245,220,160,.18) !important;
}

/* [UPGRADE 2.2] Hover-lift на картках */
body.devtools-body .tc.devtool-card{
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .35s ease !important;
}
body.devtools-body .tc.devtool-card:hover{
  transform:translateY(-6px) rotate(-.4deg) !important;
  box-shadow:
    2px 14px 32px rgba(0,0,0,.62),
    2px 4px 10px rgba(0,0,0,.42),
    0 0 0 1px var(--card-accent,var(--sp-glow-amber,#c58b3a)),
    0 0 28px var(--card-accent-glow,rgba(197,139,58,.34)) !important;
  z-index:5;
}

/* [UPGRADE 2.3] Health-summary стає аналоговим манометром */
body.devtools-body .health-summary{
  position:relative;
  display:inline-flex !important;
  align-items:center;
  gap:14px !important;
  padding:12px 18px 12px 70px !important;
  min-height:60px;
  background:linear-gradient(180deg, var(--bg-elevated, #2a2018) 0%, var(--bg-surface, #1a130d) 100%) !important;
  border:1px solid var(--border-metal,#5c4430) !important;
  border-radius:3px !important;
  box-shadow:
    inset 0 1px 0 rgba(245,220,160,.18),
    inset 0 -1px 0 rgba(0,0,0,.55),
    0 3px 8px rgba(0,0,0,.5) !important;
  overflow:hidden;
}
body.devtools-body .health-summary .hs-icon{ display:none !important; }
body.devtools-body .health-summary::before{
  content:"";
  position:absolute;
  left:8px; top:50%;
  transform:translateY(-50%);
  width:46px; height:46px;
  border-radius:50%;
  background:
    conic-gradient(from -135deg,
      rgba(86,163,166,.85) 0deg 90deg,
      rgba(224,196,137,.85) 90deg 180deg,
      rgba(227,111,61,.85) 180deg 270deg,
      transparent 270deg 360deg),
    radial-gradient(circle, var(--bg-base, #14100c) 0%, var(--bg-surface, #1a130d) 100%);
  border:1.5px solid var(--border-metal, #5c4430);
  box-shadow:
    inset 0 0 10px rgba(0,0,0,.75),
    0 0 8px rgba(245,169,38,.25);
}
body.devtools-body .health-summary::after{
  content:"";
  position:absolute;
  left:31px; top:50%;
  width:22px; height:2.5px;
  background:linear-gradient(90deg, var(--bg-base, #14100c) 0%, var(--mod-publisher, #d4a54a) 55%, var(--text-bright, #f5e8b0) 100%);
  transform-origin:0% 50%;
  transform:translateY(-50%) rotate(-45deg);
  box-shadow:0 0 4px rgba(245,220,160,.65);
  border-radius:1px;
  transition:transform .8s cubic-bezier(.5,0,.4,1.4);
}
body.devtools-body .health-summary.health-summary--ok::after      { transform:translateY(-50%) rotate(-45deg); }
body.devtools-body .health-summary.health-summary--warn::after    { transform:translateY(-50%) rotate(45deg); }
body.devtools-body .health-summary.health-summary--critical::after{ transform:translateY(-50%) rotate(135deg); }
body.devtools-body .health-summary .hs-text{
  font-family:'Cinzel', serif !important;
  letter-spacing:.08em !important;
  font-size:13px !important;
  color:var(--warning, #e0c489) !important;
}

/* [UPGRADE 2.4] Фон реагує на стан стеку (JS toggle: body.has-critical-alert) */
body.devtools-body.has-critical-alert .al-bg-scene ellipse{
  animation-duration:1.4s !important;
}
body.devtools-body.has-critical-alert::before{
  background:
    radial-gradient(ellipse 70% 45% at 50% -5%,
      rgba(227,111,61,.22) 0%,
      rgba(227,111,61,.10) 28%,
      transparent 60%),
    linear-gradient(180deg, transparent 0%, transparent 50%, rgba(20,10,5,.65) 88%, rgba(20,10,5,.92) 100%) !important;
}

/* [UPGRADE 2.5] Фільтри як вертикальні секторні перемикачі */
body.devtools-body .devtools-filter-row{ gap:10px !important; }
body.devtools-body .devtools-filter-row .dt-filter-btn{
  display:inline-flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:var(--sp-space-1) !important;
  min-width:92px !important;
  padding:10px 12px !important;
  border-radius:3px !important;
  line-height:1.1 !important;
  font-size:12px !important;
}
body.devtools-body .devtools-filter-row .dt-filter-btn > .material-symbols-outlined{
  font-size:22px !important;
}
body.devtools-body .devtools-filter-row .dt-filter-btn .dt-filter-count{
  font-size:11px !important;
  opacity:.75;
}

/* [UPGRADE 2.6] Глобальна health-смуга під балкою - три зони */
body.devtools-body .dt-top-health-rail{
  position:fixed;
  top:96px; left:0; right:0;
  height:3px;
  z-index:9;
  pointer-events:none;
  overflow:hidden;
  background:linear-gradient(90deg,
    var(--success,#56a3a6) 0%, var(--success,#56a3a6) 33.33%,
    var(--warning,#e0c489) 33.33%, var(--warning,#e0c489) 66.66%,
    var(--success,#56a3a6) 66.66%, var(--success,#56a3a6) 100%);
  box-shadow:0 2px 8px rgba(0,0,0,.55), 0 0 12px rgba(245,169,38,.18);
  opacity:.92;
}

/* [UPGRADE 2.7] Cartouche заголовки секцій */
body.devtools-body .al-mc-row--header .al-mc-title-group{
  position:relative;
  padding:6px 26px !important;
  background:linear-gradient(180deg, rgba(42,32,24,.55) 0%, rgba(20,16,12,.55) 100%) !important;
  border-left:3px double var(--accent-brass,#c58b3a) !important;
  border-right:3px double var(--accent-brass,#c58b3a) !important;
  box-shadow:
    inset 0 1px 0 rgba(245,220,160,.2),
    inset 0 -1px 0 rgba(0,0,0,.5) !important;
}
body.devtools-body .al-mc-row--header .al-mc-title-group::before,
body.devtools-body .al-mc-row--header .al-mc-title-group::after{
  content:"";
  position:absolute;
  top:50%;
  width:14px; height:14px;
  border:1.5px solid var(--accent-brass,#c58b3a);
  border-radius:50%;
  background:radial-gradient(circle, var(--bg-base, #14100c) 0%, var(--bg-surface, #1f1812) 100%);
  transform:translateY(-50%);
}
body.devtools-body .al-mc-row--header .al-mc-title-group::before{ left:-10px; }
body.devtools-body .al-mc-row--header .al-mc-title-group::after { right:-10px; }
body.devtools-body .al-mc-row--header .al-mc-title-text{
  font-family:'Cinzel', serif !important;
  letter-spacing:.10em !important;
  text-transform:uppercase;
}

/* [UPGRADE 2.8] Forge Footer виростає в епілогну секцію */
body.devtools-body .dt-forge-footer{
  padding:34px 0 !important;
  background:linear-gradient(180deg, transparent 0%, rgba(20,16,12,.7) 28%, rgba(13,9,7,.95) 100%) !important;
  border-top:1px solid var(--border-dim,#3a2e22) !important;
}
body.devtools-body .dt-forge-footer-band{
  position:relative;
  padding:24px 70px !important;
  background:linear-gradient(180deg, var(--bg-elevated, #2a2018) 0%, var(--bg-surface, #1a130d) 50%, var(--bg-void, #0d0907) 100%) !important;
  border-top:2px solid var(--border-metal, #5c4430) !important;
  border-bottom:2px solid var(--bg-elevated, #2a2018) !important;
  box-shadow:
    inset 0 1px 0 rgba(245,220,160,.18),
    inset 0 -2px 6px rgba(0,0,0,.7),
    0 6px 22px rgba(0,0,0,.6) !important;
}
body.devtools-body .dt-forge-footer-mark{
  font-family:'Cinzel', serif !important;
  font-size:22px !important;
  letter-spacing:.28em !important;
  text-transform:uppercase;
  color:var(--warning, #e0c489) !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,.85),
    0 -1px 0 rgba(245,220,160,.18),
    0 0 22px rgba(245,169,38,.32) !important;
}
body.devtools-body .dt-forge-footer-band::before,
body.devtools-body .dt-forge-footer-band::after{
  content:"";
  position:absolute;
  top:8px; bottom:8px;
  width:8px;
  background:linear-gradient(180deg, var(--text-bright, #f5e8b0) 0%, var(--mod-publisher, #d4a54a) 22%, var(--sp-brass-dark, #5a4a1a) 72%, var(--bg-void, #0d0907) 100%);
  border:1px solid var(--bg-elevated, #2a2018);
  border-radius:1px;
  box-shadow:0 0 4px rgba(0,0,0,.5);
}
body.devtools-body .dt-forge-footer-band::before{ left:14px; }
body.devtools-body .dt-forge-footer-band::after { right:14px; }

/* [UPGRADE 2.9] Тег-чіпи як круглі статусні лампи */
body.devtools-body .tc-tag.devtool-tag{
  display:inline-flex !important;
  align-items:center;
  gap:6px;
  padding:3px 10px 3px 22px !important;
  position:relative;
  background:linear-gradient(180deg, var(--bg-surface, #1a130d) 0%, var(--bg-void, #0d0907) 100%) !important;
  border:1px solid var(--border-dim,#3a2e22) !important;
  border-radius:12px !important;
  font-size:11px !important;
}
body.devtools-body .tc-tag.devtool-tag::before{
  content:"";
  position:absolute;
  left:7px; top:50%;
  transform:translateY(-50%);
  width:8px; height:8px;
  border-radius:50%;
  background:radial-gradient(circle, var(--warning, #e0c489) 0%, var(--card-accent,var(--sp-glow-amber, #c58b3a)) 60%, var(--bg-void, #0d0907) 100%);
  box-shadow:0 0 6px var(--card-accent-glow, rgba(245,169,38,.5));
}
body.devtools-body .tc-tag.tag-all-ok::before{
  background:radial-gradient(circle, var(--success-bg, rgba(86,163,166,.5)) 0%, var(--success, #56a3a6) 60%, rgba(26,58,60,.8) 100%) !important;
  box-shadow:0 0 6px rgba(86,163,166,.65) !important;
}
body.devtools-body .tc-tag.tag-info::before{
  background:radial-gradient(circle, var(--text-muted, #7a6a54) 0%, var(--info, #7c8f88) 60%, var(--border-dim, #3a2e22) 100%) !important;
  box-shadow:0 0 5px rgba(124,143,136,.55) !important;
}
body.devtools-body .tc-tag.devtool-tag.tag-fixed{
  background:rgba(100,160,100,.15);
  color:var(--log-ok);
  border-color:rgba(100,160,100,.4);
}
body.devtools-body .tc-tag.devtool-tag.tag-fixed::before{
  background:radial-gradient(circle, rgba(126,207,126,.5) 0%, var(--success, #56a3a6) 60%, rgba(30,60,30,.8) 100%) !important;
  box-shadow:0 0 6px rgba(100,160,100,.65) !important;
}

/* [UPGRADE 2.10] Активний фільтр горить лампою з halo */
body.devtools-body .dt-filter-btn.dt-filter-btn--active{
  background:
    radial-gradient(circle at 50% 100%, rgba(245,169,38,.30) 0%, transparent 70%),
    linear-gradient(180deg, var(--sp-copper-dark, #4a3518) 0%, var(--bg-surface, #1a130d) 100%) !important;
  border-color:var(--accent-brass,#c58b3a) !important;
  color:var(--text-bright, #f3efdc) !important;
  animation:dt-active-pulse 2.4s ease-in-out infinite !important;
}
@keyframes dt-active-pulse{
  0%,100%{
    box-shadow:
      inset 0 1px 0 rgba(245,220,160,.3),
      0 0 16px rgba(245,169,38,.38),
      0 0 32px rgba(245,169,38,.12);
  }
  50%{
    box-shadow:
      inset 0 1px 0 rgba(245,220,160,.45),
      0 0 26px rgba(245,169,38,.55),
      0 0 52px rgba(245,169,38,.24);
  }
}
body.devtools-body .dt-filter-btn:not(.dt-filter-btn--active){ opacity:.62; }
body.devtools-body .dt-filter-btn:not(.dt-filter-btn--active):hover{ opacity:.92; }

/* ──────────────────────────────────────────────────────────────────── */
/* RIVEN 3 - Поліш                                                      */
/* ──────────────────────────────────────────────────────────────────── */

/* [UPGRADE L3.1] Внутрішня кромка-фреза на картках */
body.devtools-body .tc.devtool-card{ position:relative; }
body.devtools-body .tc.devtool-card > .tc-inner{ position:relative; z-index:2; }
body.devtools-body .tc.devtool-card::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:
    inset 0 1px 0 rgba(245,220,160,.14),
    inset 0 -1px 0 rgba(0,0,0,.55);
  z-index:1;
}

/* [UPGRADE L3.2] Повітря між літер у назвах інструментів */
body.devtools-body .tc.devtool-card .tc-name{ letter-spacing:.025em !important; }

/* [UPGRADE L3.3] Цифра модуля по бейзлайну заголовка */
body.devtools-body .al-mc-row--header{ align-items:baseline !important; }
body.devtools-body .al-mc-row--header .al-mc-title-group{ align-items:baseline !important; }

/* [UPGRADE L3.4] Вищі фільтр-кнопки під палець */
body.devtools-body .dt-filter-btn{ min-height:44px !important; }

/* [UPGRADE L3.5] Hover розводить corner-brackets на 1px назовні */
body.devtools-body .tc.devtool-card .tc-corner{ transition:transform .3s ease !important; }
body.devtools-body .tc.devtool-card:hover .tc-corner--tl{ transform:translate(-1px,-1px) !important; }
body.devtools-body .tc.devtool-card:hover .tc-corner--tr{ transform:translate( 1px,-1px) !important; }
body.devtools-body .tc.devtool-card:hover .tc-corner--bl{ transform:translate(-1px, 1px) !important; }
body.devtools-body .tc.devtool-card:hover .tc-corner--br{ transform:translate( 1px, 1px) !important; }

/* [UPGRADE L3.6] Спільний ритм пульсу 2.2с для акцентних джерел */
body.devtools-body .dt-lamp,
body.devtools-body .live-panel-bolt{
  animation-duration:2.2s !important;
  animation-timing-function:ease-in-out !important;
}

/* [UPGRADE L3.7] Тонша обведення rivet на панелях */
body.devtools-body .al-module-rivet{
  box-shadow:
    inset 0 0 0 .5px rgba(20,12,5,.75),
    inset 0 1px 1px rgba(245,220,160,.3),
    0 1px 1px rgba(0,0,0,.4) !important;
}

/* [UPGRADE L3.8] Steam-puffs з власною затримкою на картках */
body.devtools-body .tc.devtool-card:nth-child(3n+1) .tc-steam .sp:nth-child(1){ animation-delay:0ms !important; }
body.devtools-body .tc.devtool-card:nth-child(3n+2) .tc-steam .sp:nth-child(1){ animation-delay:380ms !important; }
body.devtools-body .tc.devtool-card:nth-child(3n)   .tc-steam .sp:nth-child(1){ animation-delay:720ms !important; }
body.devtools-body .tc.devtool-card .tc-steam .sp:nth-child(2){ animation-delay:220ms !important; }
body.devtools-body .tc.devtool-card .tc-steam .sp:nth-child(3){ animation-delay:540ms !important; }

/* [UPGRADE L3.10] Тонка обведення на kbd-плитках */
body.devtools-body .kb-key,
body.devtools-body .dt-search-kbd{
  border:1px solid var(--border-bright,#8c6b46) !important;
  box-shadow:
    inset 0 1px 0 rgba(245,220,160,.20),
    inset 0 -1px 0 rgba(0,0,0,.55),
    0 1px 0 rgba(0,0,0,.45) !important;
}

/* ──────────────────────────────────────────────────────────────────── */
/* RIVEN 4 - UX/A11y                                                    */
/* ──────────────────────────────────────────────────────────────────── */

/* [UPGRADE R4.A] Focus-visible на inputs і кнопках */
body.devtools-body .cp-input:focus-visible,
body.devtools-body .profile-quick-search input:focus-visible{
  outline:2px solid var(--accent-brass,#c58b3a);
  outline-offset:2px;
}
body.devtools-body .pqs-go:focus-visible,
body.devtools-body .kb-close:focus-visible,
body.devtools-body .tools-group-open-all:focus-visible{
  outline:2px solid var(--accent-brass,#c58b3a);
  outline-offset:3px;
}

/* [UPGRADE R4.B] Touch targets для .pqs-go та .kb-close */
body.devtools-body .pqs-go{
  min-width:44px;
  min-height:44px;
}
body.devtools-body .kb-close{
  min-width:44px;
  min-height:44px;
  font-size:22px;
  line-height:1;
}

/* [UPGRADE R4.C] Placeholder контраст */
body.devtools-body .cp-input::placeholder,
body.devtools-body .profile-quick-search input::placeholder{
  color:var(--text-muted,#7a6a54);
  opacity:.85;
}

/* [UPGRADE R4.D] prefers-reduced-motion */
@media (prefers-reduced-motion:reduce){
  body.devtools-body .al-module-gear svg,
  body.devtools-body .tools-section-divider .sp-valve-wheel,
  body.devtools-body .tc-steam .sp,
  body.devtools-body .dt-top-health-rail::after{
    animation:none !important;
  }
  body.devtools-body .tc.devtool-card{
    transition:none !important;
  }
}

/* [UPGRADE R4.E] Command Palette і KB Overlay fade-in */
body.devtools-body .command-palette:not([hidden]),
body.devtools-body .kb-overlay:not([hidden]){
  animation:dt-fade-in 150ms ease;
}
@keyframes dt-fade-in{
  from{ opacity:0; transform:translateY(-4px); }
  to  { opacity:1; transform:translateY(0); }
}

/* [UPGRADE R4.F] tools-group-header cursor */
body.devtools-body .tools-group-header{
  cursor:pointer;
}

/* ──────────────────────────────────────────────────────────────────── */
/* RIVEN 5 - Трансформація + Підсилення + Поліш                         */
/* ──────────────────────────────────────────────────────────────────── */

/* [1A.3] Ghost section labels - велетенська назва секції позаду карток */
body.devtools-body .tools-group{
  position:relative;
}
body.devtools-body .tools-group::before{
  content:attr(data-group);
  position:absolute;
  bottom:-16px;
  right:-4px;
  font-family:'Cinzel',serif;
  font-size:clamp(64px,9vw,108px);
  font-weight:700;
  text-transform:uppercase;
  color:var(--bg-elevated,#2a2018);
  opacity:.32;
  pointer-events:none;
  letter-spacing:.1em;
  white-space:nowrap;
  z-index:0;
  line-height:1;
  user-select:none;
}
/* Картки мають бути вище фантомного тексту */
body.devtools-body .devtools-tools-grid .tc.devtool-card{
  position:relative;
  z-index:1;
}

/* [1A.4] Жорстке вінетне стиснення - обідок по краях */
body.devtools-body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:2;
  background:radial-gradient(ellipse 78% 78% at 50% 50%,
    transparent 52%,
    rgba(13,9,7,.55) 75%,
    rgba(7,4,3,.88) 100%);
}

/* [1A.5] Постійна підсвітка карток вниз - category glow під картками */
body.devtools-body .tc.devtool-card:not(:hover){
  box-shadow:
    2px 2px 4px rgba(0,0,0,.70),
    2px 8px 20px rgba(0,0,0,.40),
    0 18px 36px -10px var(--card-accent-glow,rgba(197,139,58,.22)) !important;
}

/* [L2.5] Живий пульс Health Rail */
body.devtools-body .dt-top-health-rail::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(245,169,38,.55) 50%,
    transparent 100%);
  background-size:40% 100%;
  animation:dt-rail-wave 4s ease-in-out infinite;
}
@keyframes dt-rail-wave{
  0%  { background-position:-40% center; }
  100%{ background-position:140% center; }
}

/* [L2.6] LIVE-картки яскравіші за tools-картки */
body.devtools-body .devtools-live-grid .tc.devtool-card{
  --card-accent-glow:rgba(197,139,58,.52) !important;
  filter:brightness(1.08);
}
body.devtools-body .devtools-live-grid .tc.devtool-card:hover{
  filter:brightness(1.15);
}

/* [L2.10 bug-fix] Amber-свічення на inline search при фокусі */
body.devtools-body .devtools-inline-search:focus,
body.devtools-body .devtools-search-wrap:focus-within{
  outline:none;
}
body.devtools-body .devtools-search-wrap:focus-within{
  box-shadow:0 0 0 1.5px var(--accent-brass,#c58b3a), 0 0 14px rgba(197,139,58,.38) !important;
}
body.devtools-body .devtools-inline-search:focus-visible{
  outline:2px solid var(--accent-brass,#c58b3a);
  outline-offset:2px;
}

/* [L3.1] Tabular-nums на всіх числових метриках */
body.devtools-body .tc-num,
body.devtools-body .health-hud-num,
body.devtools-body .debug-num,
body.devtools-body .debug-mc-open,
body.devtools-body .debug-mc-fixed{
  font-variant-numeric:tabular-nums;
}

/* [L3.3] Читаність тегів категорій */
body.devtools-body .tc-tag.devtool-tag{
  color:var(--text-body,#c4a26a) !important;
  opacity:1;
}


/* [L3.8] Letter-spacing на ярликах AUDIT LIVE TEST FIND */
body.devtools-body .tc-slabel{
  letter-spacing:.18em !important;
}

/* [L3.4 / skip] Skip-to-main link */
body.devtools-body .dt-skip-to-main{
  position:absolute;
  top:-100%;
  left:0;
  padding:8px 16px;
  background:var(--accent-brass,#c58b3a);
  color:var(--bg-void,#0d0907);
  font-family:'Barlow',sans-serif;
  font-weight:600;
  font-size:14px;
  z-index:9999;
  text-decoration:none;
}
body.devtools-body .dt-skip-to-main:focus{
  top:0;
}

/* [UTIL] JS-керовані елементи - дефолтний прихований стан */
body.devtools-body #sysHealthBadge{ display:none; }

/* [DEFAULT STATE] Progress bars - дефолт 0%, JS оновлює */
body.devtools-body .tc-bar-fill{ width:0%; }
body.devtools-body .debug-progress-bar{ width:0%; }

/* ═════════════════════════════════════════════════════════════════════ */
/* HOTFIX 2026-05-12 - Control Report findings                            */
/* ═════════════════════════════════════════════════════════════════════ */

/* [HOTFIX 1] .al-bg-scene винесена з потоку документа.
   Базове правило є у shared/dt-steampunk.css, але він не підключений
   до devtools-web-adc.html - звідси phantom scroll ~1650px.
   Локальне дублювання правила з shared/dt-steampunk.css:168. */
body.devtools-body .al-bg-scene{
  position:fixed !important;
  inset:0 !important;
  z-index:-1 !important;
  pointer-events:none !important;
  opacity:.25 !important;
  contain:layout paint;
}

/* [HOTFIX 2] LIVE-картки інколи застрягають на opacity:0 після boot stagger
   (анімація card-enter, fill-mode:both не доходить до 100%).
   Після додавання класу dt-boot-done гарантуємо повну видимість. */
body.dt-boot-done .devtools-live-grid .tc.devtool-card{
  opacity:1 !important;
  animation:none !important;
}

/* [HOTFIX 3] Defensive overflow-x clip - захист від декору що виходить
   за межі на дуже широких viewport (>2560px). */
body.devtools-body.dev-tools-scope{
  overflow-x:clip;
}