/* ============================================================ */
/*=  LOG CATALOG — FORGE REVOLUTION v3.0                       =*/
/*=  Industrial HUD · Telemetry Rail · Data Grid               =*/
/*=  Redesign 2026-04-08                                        =*/
/* ============================================================ */

/* ─── Tool-specific CSS змінні ────────────────────────────── */
/* FIX cc-654 + cc-655: :root → .dev-tools-scope.devtools-body
   (ізолюємо --mod-* і --bg-surface від глобального :root) */
.dev-tools-scope.devtools-body {
  /* Модульні кольори (SSOT — не дублювати з devtools-style) */
  --mod-obs:     var(--success);
  --mod-pub:     var(--mod-publisher);
  --mod-exc:     var(--mod-executor);
  --mod-apl:     var(--mod-applicant);
  --mod-nex: var(--mod-nexus);
  --mod-cha:     var(--mod-challenger);
  --mod-pay:     var(--mod-paymaster);
  --mod-devtools:color-mix(in srgb, var(--mod-applicant) 40%, var(--accent-ember));

  /* Локальні фони (уніфіковані з hub) */
  --bg-card:       rgba(20, 19, 26, 0.82);
  --bg-surface:    rgba(20, 19, 26, 0.88);
  --bg-card-hover: rgba(26, 25, 34, 0.92);

  /* 🔧 sys-1033: SSOT аліаси — --hud-* → dev-tools-base.css токени */
  --hud-green:  var(--log-ok, #56a3a6);
  --hud-amber:  var(--warning, #e0c489);
  --hud-cyan:   var(--info, #7c8f88);
  --accent:     var(--accent-brass, #c58b3a);
  --text-primary:   var(--text-bright, #f3efdc);
  --text-secondary: var(--text-muted, #7a6a54);
  --border-default: var(--border-metal, #5c4430);

  /* 🔧 SSOT аліаси --lr-* → dev-tools-base.css токени (Industrial Forge).
     Раніше НЕ були визначені → 359 використань падали на AI-fallback
     палітру (фіолет/холодний синій/сірий). Тепер резолвляться у steampunk. */
  --lr-success:        var(--success, #56a3a6);
  --lr-ok:             var(--success, #56a3a6);
  --lr-teal:           var(--success, #56a3a6);
  --lr-warn:           var(--warning, #e0c489);
  --lr-warn-soft:      var(--warning-bg, rgba(224,196,137,.15));
  --lr-border-warn:    var(--warning-border, #e0c489);
  --lr-danger:         var(--danger, #a3471b);
  --lr-error:          var(--log-error, #e36f3d);
  --lr-critical:       var(--log-critical, #c14418);
  --lr-info:           var(--info, #7c8f88);
  --lr-link:           var(--accent-brass, #c58b3a);
  --lr-accent:         var(--accent-brass, #c58b3a);
  --lr-highlight:      var(--accent-brass, #c58b3a);
  --lr-bright:         var(--text-bright, #f3efdc);
  --lr-icon-bright:    var(--text-bright, #f3efdc);
  --lr-icon-bright-2:  var(--accent-brass, #c58b3a);
  --lr-text-muted:     var(--text-muted, #7a6a54);
  --lr-muted-soft:     var(--text-muted, #7a6a54);
  --lr-border-accent:  var(--accent-brass-dim, #8c6328);
  --lr-border-accent-2:var(--border-bright, #8c6b46);
  --lr-border-muted:   var(--border-dim, #3a2e22);
  --lr-border-muted-2: var(--border-metal, #5c4430);
  --lr-overlay-faint:  var(--bg-hover, #332618);
  --lr-op-base:        1;

  /* Telemetry — кольори пігулок статистики */
  --tele-total:   var(--mod-devtools);
  --tele-bot:     var(--accent);
  --tele-backend: var(--hud-cyan);
  --tele-front:   var(--hud-amber);
  --tele-cats:    var(--hud-green);

  /* Cyan alias */
  --cyan: var(--hud-cyan);

  /* Danger/Error indicator */
  --hud-red: var(--danger-text, #e36f3d);

  /* Border-radius scale */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Shadow для floating елементів */
  --shadow-modal: 0 20px 60px rgba(0,0,0,0.75), 0 8px 24px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.4);

  /* Transitions */
  --tr-fast: 0.12s ease;
  --tr-normal: 0.2s ease;
  --transition-premium: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);

  /* Misc UI tokens */
  --accent-soft: rgba(197, 139, 58, 0.08);
  --bg-root: var(--bg-base, #14100c);
  --gradient-metal-beam: linear-gradient(180deg, rgba(42,32,18,0.95) 0%, rgba(20,16,12,0.98) 50%, rgba(14,10,8,1) 100%);

  /* Font aliases */
  --font-ui:      'Oswald', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;
  --font-log-tag: 'IBM Plex Mono', monospace;

  /* Steampunk panel variables (замість glassmorphism — без blur, solid фони) */
  --glass-bg:     rgba(18, 13, 10, 0.97);
  --glass-border: rgba(92, 68, 48, 0.45);

  /* Canon B-balka: канонічна висота балки (validator rule: header-height) */
  --header-h: 96px;
}


/* ╔═══════════════════════════════════════════════════════════╗
   ║  АНІМАЦІЇ — FORGE REVOLUTION                              ║
   ╚═══════════════════════════════════════════════════════════╝ */

/* Телеметрія — числа "відраховуються" при завантаженні */
@keyframes lr-tele-count-in {
  from { opacity: 0; transform: translateY(6px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Таблиця — phase-in рядків з затримкою */
@keyframes lr-row-phase {
  from { opacity: 0; transform: translateX(-4px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Level bar — заповнення сегментів */
@keyframes lr-bar-fill {
  from { width: 0; }
}

/* Expanded row — розкривання */
@keyframes lr-detail-open {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* HUD lamps — різні кольори */
@keyframes lr-lamp-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(107,142,78,0.8), 0 0 8px rgba(107,142,78,0.4); }
  50%      { box-shadow: 0 0 0 6px transparent, 0 0 16px rgba(107,142,78,0.25); }
}
@keyframes lr-lamp-amber {
  0%, 100% { box-shadow: 0 0 0 0 rgba(197,139,58,0.8), 0 0 8px rgba(197,139,58,0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(197,139,58,0), 0 0 16px rgba(197,139,58,0.25); }
}

/* Signplate swing */
@keyframes lr-signplate-swing {
  0%, 100% { transform: rotate(-0.2deg); }
  50%      { transform: rotate(0.2deg); }
}

/* Гlow accent рядок при hover */
@keyframes lr-row-glow {
  from { box-shadow: inset 0 0 0 1px rgba(197,139,58,0); }
  to   { box-shadow: inset 0 0 0 1px rgba(197,139,58,0.15); }
}

/* 🔧 sys-1009: lr-lamp-blink видалено — дублікат lamp-blink (рядок 4712). Використовуй lamp-blink. */


/* ╔═══════════════════════════════════════════════════════════╗
   ║  PAGE LAYOUT                                              ║
   ╚═══════════════════════════════════════════════════════════╝ */

* { margin: 0; padding: var(--sp-card-pad, 0); box-sizing: border-box; }

.lr-page {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: var(--sp-card-pad, 0 24px);
}


/* ╔═══════════════════════════════════════════════════════════╗
   ║  HEADER LAMPS — HUD індикатори                            ║
   ╚═══════════════════════════════════════════════════════════╝ */

.dt-header-lamps {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-space-1, 5px);
}

.dt-lamp {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}

.dt-lamp--green {
  background: var(--hud-green);
  animation: lr-lamp-green 2.4s ease-in-out infinite;
}

.dt-lamp--amber {
  background: var(--hud-amber);
  animation: lr-lamp-amber 2.8s ease-in-out infinite;
}

.dt-lamp--dim {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.08);
}

.dt-lamp--dim.active {
  background: var(--hud-cyan);
  animation: live-pulse 2s ease-in-out infinite;
  border: none;
}

.dt-lamp-label {
  font-size: 8px;
  font-family: var(--font-ui, 'Oswald', sans-serif); /* UPPERCASE */
  color: var(--lr-text-muted, #6b7280);
  letter-spacing: 0.08em;
  margin-right: var(--sp-space-2, 6px);
  text-transform: uppercase;
}


/* ╔═══════════════════════════════════════════════════════════╗
   ║  PANEL RIVETS — Canon E-panels (forge corner markers)     ║
   ╚═══════════════════════════════════════════════════════════╝ */

/* Canon: .lr-rivet--{tl/tr/bl/br} та .lr-module-rivet — декоративні заклепки по кутах dt-panel.
   display:none бо візуально handled через lr-plate-compact внутрішні рівмети. */
.lr-module-rivet,
.lr-rivet--tl,
.lr-rivet--tr,
.lr-rivet--bl,
.lr-rivet--br {
  display: none;
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--accent-brass, #c58b3a) 0%, var(--border-metal, #5c4430) 60%, var(--bg-base, #14100c) 100%);
  border: 1px solid var(--border-metal, #5c4430);
}

/* ╔═══════════════════════════════════════════════════════════╗
   ║  SIGNPLATE — підвісна табличка                            ║
   ╚═══════════════════════════════════════════════════════════╝ */

.lr-signplate {
  animation: lr-signplate-swing 6s ease-in-out infinite;
  min-width: 200px;
}

.lr-sp-line1 {
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-primary);
  position: relative;
  z-index: 1;
  margin-bottom: var(--sp-space-1, 3px);
}

.lr-sp-line2 {
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--text-secondary);
  text-transform: lowercase;
  position: relative;
  z-index: 1;
}


/* ╔═══════════════════════════════════════════════════════════╗
   ║  SUBTITLE                                                 ║
   ╚═══════════════════════════════════════════════════════════╝ */

.lr-subtitle {
  padding: var(--sp-space-2, 7px) var(--sp-space-6, 24px) var(--sp-space-2, 8px);
  font-size: 11px;
  color: var(--text-secondary);
  font-family: var(--font-log-tag, var(--font-mono));
  border-bottom: 1px solid var(--border-default);
  letter-spacing: 0.03em;
  background: var(--bg-surface-1);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.18), 0 1px 0 rgba(255,255,255,0.025);
}


/* ╔═══════════════════════════════════════════════════════════╗
   ║  STALENESS BANNER                                         ║
   ╚═══════════════════════════════════════════════════════════╝ */

.staleness-banner {
  display: none;
  align-items: center;
  gap: var(--sp-space-2, 8px);
  padding: var(--sp-space-2, 7px) var(--sp-space-6, 24px);
  font-size: 11px;
  font-family: var(--font-log-tag, var(--font-mono));
}

.staleness-banner.stale-warn {
  display: flex;
  background: rgba(197,139,58,0.06);
  border-bottom: 1px solid rgba(197,139,58,0.18);
  color: var(--hud-amber);
}

.staleness-banner.stale-crit {
  display: flex;
  background: rgba(251,113,133,0.06);
  border-bottom: 1px solid rgba(251,113,133,0.18);
  color: var(--hud-red);
}

.staleness-icon { font-size: 14px; }
.staleness-sep { opacity: 0.4; margin: 0 6px; }

.staleness-changelog a {
  color: inherit;
  opacity: 0.8;
  text-decoration: underline dotted;
}
.staleness-changelog a:hover { opacity: 1; }


/* ╔═══════════════════════════════════════════════════════════╗
   ║  RELOAD BANNER                                            ║
   ╚═══════════════════════════════════════════════════════════╝ */

.reload-banner {
  display: none;
  align-items: center;
  gap: var(--sp-space-3, 10px);
  padding: var(--sp-space-2, 8px) var(--sp-space-6, 24px);
  background: rgba(56,189,248,0.05);
  border-bottom: 1px solid rgba(56,189,248,0.18);
  font-size: 11px;
  font-family: var(--font-log-tag, var(--font-mono));
  color: var(--hud-cyan);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.3);
}

.reload-banner.visible { display: flex; }

.reload-btn {
  background: var(--hud-cyan);
  color: var(--bg-root);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--sp-space-2) var(--sp-space-4);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-log-tag, var(--font-mono));
  letter-spacing: 0.06em;
  transition: opacity var(--tr-fast);
}
.reload-btn:hover { opacity: 0.85; }

.reload-dismiss {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}


/* ╔═══════════════════════════════════════════════════════════╗
   ║  TELEMETRY RAIL — Stats Bar FORGE                         ║
   ╚═══════════════════════════════════════════════════════════╝ */

.lr-stats-bar {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--gradient-metal-beam);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,0.5),
    inset 0 -1px 0 rgba(0,0,0,0.25),
    0 1px 0 rgba(255,255,255,0.02);
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: var(--sp-card-pad, 0);
}

/* Приховати горизонтальний скролл але залишити функцію */
.lr-stats-bar::-webkit-scrollbar { height: 2px; }

/* ─── Telemetry segment (замість pill) ─── */
.lr-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-gap, 2px);
  padding: var(--sp-space, 10px 20px);
  position: relative;
  min-width: 90px;
  border-right: 1px solid rgba(255,255,255,0.04);
  transition: background var(--tr-fast);
  cursor: default;
  animation: lr-tele-count-in 0.4s ease both;
}

.lr-pill:first-child { border-left: none; }
.lr-pill:last-child { border-right: none; }

/* Верхня accent-лінія (колір по типу) */
.lr-pill::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 2px;
  border-radius: var(--radius-ui, 0 0 2px 2px);
  opacity: 0.7;
  transition: opacity var(--tr-normal), left var(--tr-normal), right var(--tr-normal);
}

.lr-pill:hover { background: rgba(255,255,255,0.025); }
.lr-pill:hover::before { opacity: 1; left: 5%; right: 5%; }

/* Анімаційні затримки для phase-in */
.lr-pill:nth-child(1) { animation-delay: 0.05s; }
.lr-pill:nth-child(2) { animation-delay: 0.10s; }
.lr-pill:nth-child(3) { animation-delay: 0.15s; }
.lr-pill:nth-child(4) { animation-delay: 0.20s; }
.lr-pill:nth-child(5) { animation-delay: 0.25s; }

/* Велике число */
.pill-count {
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* Підпис під числом */
.pill-label {
  font-family: var(--font-ui, 'Oswald', sans-serif); /* UPPERCASE */
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lr-text-muted, #6b7280);
}

/* Крапка-пульс тепер ліворуч від числа у рядку */
.pill-dot {
  display: none; /* прибираємо стару крапку — тепер accent line зверху */
}

/* Кольорові варіанти */
.pill-total::before { background: var(--tele-total); }
.pill-total .pill-count { color: var(--tele-total); }

.pill-bot::before { background: var(--tele-bot); }
.pill-bot .pill-count { color: var(--tele-bot); }

.pill-backend::before { background: var(--tele-backend); }
.pill-backend .pill-count { color: var(--tele-backend); }

.pill-frontend::before { background: var(--tele-front); }
.pill-frontend .pill-count { color: var(--tele-front); }

.pill-cats::before { background: var(--tele-cats); }
.pill-cats .pill-count { color: var(--tele-cats); }

/* ─── Level bar wrap — у телеметрії праворуч ─── */
.level-bar-wrap {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: var(--sp-space, 5px);
  padding: var(--sp-space, 8px 20px);
  border-left: 1px solid rgba(255,255,255,0.04);
  min-width: 220px;
  flex-shrink: 0;
}

/* ─── WIDE PROGRESS RAIL ─── */
.level-bar {
  display: flex;
  height: 14px;
  width: 190px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(0,0,0,0.3);
  gap: var(--sp-gap, 1px);
}

.level-bar-seg {
  height: 100%;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

/* Внутрішній glow на сегменті */
.level-bar-seg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent 60%);
  pointer-events: none;
}

.level-bar-legend {
  display: flex;
  gap: var(--sp-space, 8px);
  font-size: 9px;
  font-family: var(--font-log-tag, var(--font-mono));
}

.lbl-seg {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 3px);
  color: var(--text-secondary);
}

.lbl-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Coverage кнопка */
.btn-coverage {
  margin-left: auto;
  background: rgba(107,142,78,0.05);
  border: 1px solid rgba(107,142,78,0.2);
  border-radius: var(--radius-sm);
  color: var(--hud-green);
  font-size: 10px;
  font-family: var(--font-log-tag, var(--font-mono));
  cursor: pointer;
  padding: var(--sp-space, 4px 10px);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space, 5px);
  transition: background var(--tr-fast), box-shadow var(--tr-fast);
  letter-spacing: 0.06em;
}

.btn-coverage:hover {
  background: rgba(107,142,78,0.10);
  box-shadow: 0 0 12px rgba(107,142,78,0.15);
}


/* ╔═══════════════════════════════════════════════════════════╗
   ║  ACTION BAR                                               ║
   ╚═══════════════════════════════════════════════════════════╝ */

.lr-action-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 8px);
  padding: var(--sp-space, 6px 24px);
  background: rgba(16,14,23,0.9);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}

/* ─── Add entry кнопка ─── */
.btn-add-entry {
  background: linear-gradient(135deg, rgba(197,139,58,0.15) 0%, rgba(197,139,58,0.08) 100%);
  border: 1px solid rgba(197,139,58,0.35);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space, 5px);
  transition: var(--transition-premium);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.btn-add-entry:hover {
  background: linear-gradient(135deg, rgba(197,139,58,0.25) 0%, rgba(197,139,58,0.15) 100%);
  border-color: rgba(197,139,58,0.6);
  box-shadow: 0 0 16px rgba(197,139,58,0.2), inset 0 1px 0 rgba(255,255,255,0.06);
  opacity: 1;
}


/* ╔═══════════════════════════════════════════════════════════╗
   ║  TERMINAL COMMAND STRIP — Controls                        ║
   ╚═══════════════════════════════════════════════════════════╝ */

.controls {
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,0.007) 0px,
      rgba(255,255,255,0.007) 1px,
      transparent 1px,
      transparent 4px
    ),
    rgba(14, 12, 20, 0.92);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.025),
    0 2px 0 rgba(0,0,0,0.3);
  padding: var(--sp-space, 10px 24px);
  display: flex;
  gap: var(--sp-space, 8px);
  align-items: center;
  flex-wrap: wrap;
  position: relative;
}

/* Вертикальна лінія зліва як термінальний маркер */
.controls::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, transparent 0%, rgba(197,139,58,0.3) 30%, rgba(197,139,58,0.3) 70%, transparent 100%);
  border-radius: 2px;
}

.controls select,
.controls input {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: var(--sp-space, 5px 10px);
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 11px;
  outline: none;
  transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(0,0,0,0.3);
}

.controls select:focus,
.controls input:focus {
  border-color: rgba(197,139,58,0.4);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.5),
    0 0 0 1px rgba(197,139,58,0.15);
}

.controls select option {
  background: var(--bg-elevated);
  color: var(--text-primary);
  padding: var(--sp-space, 4px 8px);
}

.controls select option:checked {
  background: rgba(197,139,58,0.25);
}

.controls input[type="search"] { width: 200px; }
.controls input::placeholder { color: var(--lr-text-muted, #6b7280); }

/* ─── Загальний .btn ─── */
.btn {
  background: linear-gradient(135deg, rgba(197,139,58,0.9) 0%, rgba(100,85,170,0.9) 100%);
  color: var(--text-bright);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--sp-space, 5px 14px);
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-premium);
  white-space: nowrap;
  letter-spacing: 0.03em;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.15);
}

.btn:hover {
  background: linear-gradient(135deg, rgba(155,140,220,0.95) 0%, rgba(115,100,185,0.95) 100%);
  box-shadow: 0 0 16px rgba(197,139,58,0.3), 0 2px 8px rgba(0,0,0,0.4);
  transform: translateY(-1px);
  opacity: 1;
}

.btn:active { transform: translateY(0); }

/* Outline варіант */
.btn-outline {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-secondary);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.btn-outline:hover {
  background: rgba(197,139,58,0.08);
  border-color: rgba(197,139,58,0.3);
  color: var(--accent);
  box-shadow: 0 0 10px rgba(197,139,58,0.1), inset 0 1px 0 rgba(255,255,255,0.04);
  transform: none;
}

/* ─── Search wrap ─── */
.search-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space, 4px);
}

/* [UPGRADE 1А.1] Portal layer — позицію задає JS (setupFloatingDropdown) */
.search-suggestions {
  display: none;
  position: fixed;
  width: 340px;
  background: rgba(16,13,26,0.99);
  border: 1px solid rgba(197,139,58,0.28);
  border-radius: var(--radius-md);
  z-index: 1000;
  box-shadow: var(--shadow-modal);
  max-height: 220px;
  overflow-y: auto;
  margin-top: var(--sp-space, 4px);
  animation: portal-open 0.18s ease both;
}

.search-suggestions.open { display: block; }

.sugg-item {
  padding: var(--sp-space, 7px 12px);
  cursor: pointer;
  font-size: 11px;
  font-family: var(--font-log-tag, var(--font-mono));
  border-bottom: 1px solid rgba(255,255,255,0.03);
  display: flex;
  align-items: baseline;
  gap: var(--sp-space, 8px);
  transition: background var(--tr-fast);
}

.sugg-item:last-child { border-bottom: none; }
.sugg-item:hover { background: var(--accent-soft); }
.sugg-item mark { background: none; color: var(--accent); font-weight: 700; }

.sugg-label {
  color: var(--text-primary);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sugg-meta { color: var(--text-secondary); font-size: 10px; flex-shrink: 0; }

/* ─── Separator ─── */
.ctrl-sep {
  width: 1px;
  height: 18px;
  background: rgba(255,255,255,0.07);
  flex-shrink: 0;
  align-self: center;
  margin: 0 2px;
}

/* Посилений роздільник між групами */
.ctrl-sep--glow {
  width: 1px;
  height: 24px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(197,139,58,0.25) 30%,
    rgba(197,139,58,0.25) 70%,
    transparent 100%
  );
  box-shadow: 0 0 6px rgba(197,139,58,0.15);
  flex-shrink: 0;
  align-self: center;
  margin: 0 4px;
}

/* ─── Controls Groups ─── */
.ctrl-group {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space, 6px);
  flex-wrap: wrap;
  position: relative;
}

/* Мікро-лейбл над групою (data-label псевдоелемент) */
.ctrl-group::before {
  content: attr(data-label);
  position: absolute;
  top: -16px;
  left: 0;
  font-size: 8px;
  font-family: var(--font-log-tag, var(--font-mono));
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(197,139,58,0.35);
  pointer-events: none;
  white-space: nowrap;
}

/* ─── Reset filters button ─── */
.btn-reset-filters {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space, 4px);
}

/* ─── Advanced toggle ─── */
.btn-adv-toggle {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  padding: var(--sp-space, 5px 10px);
  font-size: 11px;
  font-family: var(--font-log-tag, var(--font-mono));
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space, 4px);
  transition: var(--tr-normal);
  white-space: nowrap;
  letter-spacing: 0.03em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.btn-adv-toggle:hover {
  border-color: rgba(197,139,58,0.3);
  color: var(--accent);
  background: rgba(197,139,58,0.06);
}

.btn-adv-toggle.active {
  border-color: rgba(197,139,58,0.4);
  color: var(--accent);
  background: rgba(197,139,58,0.08);
  box-shadow: 0 0 8px rgba(197,139,58,0.1), inset 0 1px 0 rgba(255,255,255,0.04);
}

.adv-toggle-arrow { transition: transform var(--tr-fast); }
.btn-adv-toggle.active .adv-toggle-arrow { transform: rotate(180deg); }

/* ─── #6: Secondary filters (progressive disclosure) ─── */
.btn-secondary-filters-toggle {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  padding: var(--sp-space, 5px 10px);
  font-size: 11px;
  font-family: var(--font-log-tag, var(--font-mono));
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space, 4px);
  transition: var(--tr-normal);
  white-space: nowrap;
  letter-spacing: 0.03em;
}
.btn-secondary-filters-toggle:hover {
  border-color: rgba(34,211,238,0.3);
  color: var(--hud-cyan);
  background: rgba(34,211,238,0.06);
}

/* .secondary-filters-wrap стилізується у блоці popover нижче */

/* ─── Regex toggle ─── */
.regex-toggle {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  padding: var(--sp-space, 5px 8px);
  font-size: 10px;
  font-family: var(--font-log-tag, var(--font-mono));
  cursor: pointer;
  white-space: nowrap;
  transition: var(--tr-normal);
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.3);
}

.regex-toggle:hover { border-color: rgba(197,139,58,0.4); color: var(--accent); }

.regex-toggle.regex-on {
  border-color: rgba(197,139,58,0.5);
  color: var(--accent);
  background: rgba(197,139,58,0.08);
  box-shadow: 0 0 8px rgba(197,139,58,0.12), inset 0 1px 0 rgba(255,255,255,0.04);
}

#searchInput.regex-error {
  border-color: rgba(251,113,133,0.5) !important;
  background: rgba(251,113,133,0.04) !important;
}

/* ─── Saved views ─── */
.saved-views-wrap { position: relative; }

/* [UPGRADE 1А.1] Portal layer — позицію задає JS (setupFloatingDropdown) */
.saved-views-dropdown {
  display: none;
  position: fixed;
  min-width: 210px;
  background: rgba(16,13,26,0.99);
  border: 1px solid rgba(197,139,58,0.28);
  border-radius: var(--radius-md);
  z-index: 1000;
  box-shadow: var(--shadow-modal);
  overflow: hidden;
  animation: portal-open 0.18s ease both;
}

.saved-views-dropdown.open { display: block; }

.sv-list { max-height: 180px; overflow-y: auto; }

.sv-item {
  display: flex;
  align-items: center;
  padding: var(--sp-space, 7px 12px);
  gap: var(--sp-space, 8px);
  font-size: 11px;
  font-family: var(--font-log-tag, var(--font-mono));
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  transition: background var(--tr-fast);
}

.sv-item:last-child { border-bottom: none; }
.sv-item:hover { background: var(--accent-soft); color: var(--text-primary); }

.sv-name { flex: 1; }

.sv-delete {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 12px;
  padding: var(--sp-card-pad, 0);
  line-height: 1;
}

.sv-delete:hover { color: var(--hud-red); }

.sv-empty {
  padding: var(--sp-space, 12px);
  font-size: 11px;
  color: var(--text-secondary);
  font-family: var(--font-log-tag, var(--font-mono));
  text-align: center;
}

.sv-save-row {
  padding: var(--sp-space, 8px 12px);
  border-top: 1px solid rgba(255,255,255,0.05);
  display: flex;
  gap: var(--sp-space, 6px);
}

.sv-input {
  flex: 1;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: var(--sp-space, 4px 8px);
  font-size: 10px;
  font-family: var(--font-log-tag, var(--font-mono));
  outline: none;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
}

.sv-input:focus { border-color: rgba(197,139,58,0.4); }

.sv-save-btn {
  background: var(--accent-soft);
  border: 1px solid rgba(197,139,58,0.3);
  border-radius: var(--radius-sm);
  color: var(--accent);
  padding: var(--sp-space, 4px 10px);
  font-size: 10px;
  cursor: pointer;
  font-family: var(--font-log-tag, var(--font-mono));
  transition: var(--tr-fast);
}

.sv-save-btn:hover { background: rgba(197,139,58,0.2); }


/* ╔═══════════════════════════════════════════════════════════╗
   ║  ADVANCED FILTERS — Metal Panel                           ║
   ╚═══════════════════════════════════════════════════════════╝ */

.advanced-filters {
  display: none;
  padding: var(--sp-space, 8px 24px 10px 36px);
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,0.005) 0px,
      rgba(255,255,255,0.005) 1px,
      transparent 1px,
      transparent 4px
    ),
    rgba(12,10,18,0.9);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.4);
  gap: var(--sp-space, 10px);
  align-items: center;
  flex-wrap: wrap;
  animation: portal-open 0.2s ease both;
}

.advanced-filters.open { display: flex; }


/* ╔═══════════════════════════════════════════════════════════╗
   ║  FILTER CHIPS — HUD style                                 ║
   ╚═══════════════════════════════════════════════════════════╝ */

.filter-chips {
  display: none;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-space, 6px);
  padding: var(--sp-space, 7px 24px);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  background: rgba(197,139,58,0.03);
}

.filter-chips.has-chips { display: flex; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space, 5px);
  background: rgba(197,139,58,0.08);
  border: 1px solid rgba(197,139,58,0.3);
  border-radius: var(--radius-sm);
  padding: var(--sp-space, 3px 9px);
  font-size: 10px;
  font-family: var(--font-log-tag, var(--font-mono));
  color: var(--accent);
  transition: var(--tr-fast);
  animation: phase-in 0.2s ease both;
}

.chip:hover { background: rgba(197,139,58,0.14); box-shadow: 0 0 8px rgba(197,139,58,0.15); }

.chip-label { opacity: 0.6; letter-spacing: 0.06em; }
.chip-value { font-weight: 600; }

.chip-remove {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: var(--sp-card-pad, 0);
  opacity: 0.6;
  transition: opacity var(--tr-fast);
}

.chip-remove:hover { opacity: 1; }

.chips-clear-all {
  background: none;
  border: none;
  color: var(--lr-text-muted, #6b7280);
  font-size: 10px;
  cursor: pointer;
  font-family: var(--font-log-tag, var(--font-mono));
  padding: var(--sp-space, 3px 6px);
  margin-left: auto;
  letter-spacing: 0.06em;
}

.chips-clear-all:hover { color: var(--hud-red); }


/* ╔═══════════════════════════════════════════════════════════╗
   ║  HUD SEGMENT CONTROL — View bar                           ║
   ╚═══════════════════════════════════════════════════════════╝ */

.lr-view-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 8px);
  padding: var(--sp-space, 6px 24px);
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 18px,
      rgba(255,255,255,0.005) 18px,
      rgba(255,255,255,0.005) 19px
    ),
    rgba(13,11,20,0.92);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  flex-wrap: wrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}

/* Група кнопок перемикання виду */
.view-toggle-group {
  display: inline-flex;
  align-items: center;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-sm);
  padding: var(--sp-pad, 2px);
  gap: var(--sp-gap, 2px);
}

.lr-view-bar-label {
  font-size: 9px;
  font-family: var(--font-ui, 'Oswald', sans-serif); /* UPPERCASE */
  color: var(--lr-text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-right: var(--sp-space, 4px);
}

.btn-view-toggle {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.07);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: var(--sp-space, 5px);
  border-radius: var(--radius-sm);
  padding: var(--sp-space, 4px 12px);
  font-size: 11px;
  font-family: var(--font-log-tag, var(--font-mono));
  cursor: pointer;
  transition: var(--tr-normal);
  letter-spacing: 0.03em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}

.btn-view-toggle:hover {
  background: rgba(197,139,58,0.06);
  border-color: rgba(197,139,58,0.25);
  color: var(--text-primary);
}

.btn-view-toggle.active {
  background: linear-gradient(135deg, 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);
  box-shadow: 0 0 12px rgba(197,139,58,0.15), inset 0 1px 0 rgba(255,255,255,0.06);
}


/* ╔═══════════════════════════════════════════════════════════╗
   ║  RESULTS BAR — Metal Strip                                ║
   ╚═══════════════════════════════════════════════════════════╝ */

.lr-results-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 10px);
  padding: var(--sp-space, 5px 24px);
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,0.006) 0px,
      rgba(255,255,255,0.006) 1px,
      transparent 1px,
      transparent 3px
    ),
    rgba(12,10,18,0.85);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.015), inset 0 -1px 0 rgba(0,0,0,0.2);
  flex-wrap: wrap;
}

.results-info {
  font-size: 11px;
  color: var(--lr-text-muted, #6b7280);
  margin-left: auto;
  font-family: var(--font-log-tag, var(--font-mono));
  letter-spacing: 0.03em;
}

.btn-empty-notes {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  padding: var(--sp-space, 4px 10px);
  font-size: 11px;
  font-family: var(--font-log-tag, var(--font-mono));
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space, 5px);
  transition: var(--tr-normal);
  white-space: nowrap;
  letter-spacing: 0.03em;
}

.btn-empty-notes:hover {
  border-color: rgba(197,139,58,0.35);
  color: var(--hud-amber);
  background: rgba(197,139,58,0.06);
}

.btn-empty-notes.active {
  border-color: rgba(197,139,58,0.45);
  color: var(--hud-amber);
  background: rgba(197,139,58,0.08);
  box-shadow: 0 0 8px rgba(197,139,58,0.12);
}

.notes-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(197,139,58,0.15);
  border-radius: var(--radius-sm);
  font-size: 9px;
  font-family: var(--font-log-tag, var(--font-mono));
  font-weight: 700;
  color: var(--hud-amber);
  padding: var(--sp-card-pad, 0 5px);
  min-width: 16px;
  height: 14px;
}

/* ─── Results sep ─── */
.results-sep {
  width: 1px;
  height: 20px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255,255,255,0.1) 30%,
    rgba(255,255,255,0.1) 70%,
    transparent 100%
  );
  flex-shrink: 0;
  align-self: center;
  margin: 0 4px;
}

/* ─── Utility button group ─── */
.utility-btn-group {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space, 4px);
}

/* Нові utility кнопки з tooltip */
.btn-utility {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  padding: var(--sp-space, 4px 10px);
  font-size: 11px;
  font-family: var(--font-log-tag, var(--font-mono));
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space, 5px);
  transition: all 0.2s ease;
  white-space: nowrap;
  letter-spacing: 0.03em;
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.ubtn-icon { font-size: 12px; }
.ubtn-label { font-size: 11px; }

/* Tooltip що з'являється при hover */
.ubtn-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(14,12,20,0.97);
  border: 1px solid rgba(197,139,58,0.25);
  border-radius: var(--radius-sm);
  padding: var(--sp-space, 5px 9px);
  font-size: 9px;
  font-family: var(--font-log-tag, var(--font-mono));
  color: var(--text-secondary);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 100;
  letter-spacing: 0.06em;
}

/* Стрілочка tooltip */
.ubtn-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: rgba(197,139,58,0.25);
}

.btn-utility:hover .ubtn-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.btn-utility:hover {
  border-color: rgba(197,139,58,0.35);
  color: var(--hud-amber);
  background: rgba(197,139,58,0.06);
  box-shadow: 0 0 8px rgba(197,139,58,0.08), inset 0 1px 0 rgba(255,255,255,0.03);
}

.btn-utility.active {
  border-color: rgba(197,139,58,0.45);
  color: var(--hud-amber);
  background: rgba(197,139,58,0.08);
  box-shadow: 0 0 10px rgba(197,139,58,0.12);
}

/* Варіант danger (зниклі записи) */
.btn-utility--danger:hover {
  border-color: rgba(248,113,113,0.4);
  color: var(--lr-error, #f87171);
  background: rgba(248,113,113,0.06);
  box-shadow: 0 0 8px rgba(248,113,113,0.1), inset 0 1px 0 rgba(255,255,255,0.03);
}

.btn-utility--danger.active {
  border-color: rgba(248,113,113,0.5);
  color: var(--lr-error, #f87171);
  background: rgba(248,113,113,0.08);
}

/* Варіант info (snapshot/diff) */
.btn-utility--info:hover {
  border-color: rgba(99,179,237,0.4);
  color: var(--lr-info, #60a5fa);
  background: rgba(99,179,237,0.06);
  box-shadow: 0 0 8px rgba(99,179,237,0.1), inset 0 1px 0 rgba(255,255,255,0.03);
}

.btn-utility--info.active {
  border-color: rgba(99,179,237,0.5);
  color: var(--lr-info, #60a5fa);
  background: rgba(99,179,237,0.08);
}


/* ─── #7: Bulk action bar ─── */
.bulk-action-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 8px);
  padding: var(--sp-space, 6px 16px);
  background: rgba(34,211,238,0.06);
  border: 1px solid rgba(34,211,238,0.2);
  border-radius: var(--radius-sm);
  margin: var(--sp-space, 4px 0);
  flex-wrap: wrap;
}
.bulk-count {
  font-size: 11px;
  font-family: var(--font-log-tag, var(--font-mono));
  color: var(--hud-cyan);
  white-space: nowrap;
  font-weight: 600;
}
.bulk-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 6px);
  flex-wrap: wrap;
}
.bulk-field-select, .bulk-value-input {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: var(--sp-space, 3px 8px);
  font-size: 11px;
  font-family: var(--font-log-tag, var(--font-mono));
}
.btn-bulk-apply {
  background: rgba(34,211,238,0.1);
  border-color: rgba(34,211,238,0.3);
  color: var(--hud-cyan);
}
.btn-bulk-apply:hover:not(:disabled) {
  background: rgba(34,211,238,0.2);
}
.btn-bulk-apply:disabled { opacity: 0.4; cursor: not-allowed; }
.bulk-deselect { color: var(--lr-text-muted, #6b7280); }
.bulk-status { font-size: 11px; font-family: var(--font-log-tag, var(--font-mono)); }

.bulk-row-check { cursor: pointer; accent-color: var(--hud-cyan); }
tr.bulk-selected { background: rgba(34,211,238,0.04) !important; }
.bulk-check-cell { pointer-events: auto; }

/* ─── #15: Diff panel rows ─── */
.diff-row {
  display: flex; gap: 8px; align-items: baseline;
  padding: var(--sp-space, 3px 0); border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 10px; font-family: var(--font-log-tag, var(--font-mono));
}
.diff-op   { min-width: 12px; font-weight: 700; }
.diff-id   { color: var(--text-sec); min-width: 160px; }
.diff-detail { color: var(--text-dim); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.diff-meta { color: var(--lr-text-muted, #6b7280); font-size: 9px; white-space: nowrap; }
.diff-added   .diff-op { color: var(--lr-success, #4ade80); }
.diff-added   .diff-id { color: var(--lr-success, #4ade80); }
.diff-removed .diff-op { color: var(--lr-error, #f87171); }
.diff-removed .diff-id { color: var(--lr-error, #f87171); text-decoration: line-through; opacity: .7; }
.diff-changed .diff-op { color: var(--lr-info, #60a5fa); }
.diff-changed .diff-id { color: var(--lr-info, #60a5fa); }

/* ─── #11: Deeplink highlight ─── */
@keyframes lr-deeplink-flash {
  0%   { background: rgba(99,179,237,0.25); }
  70%  { background: rgba(99,179,237,0.1); }
  100% { background: transparent; }
}
tr.lr-deeplink-highlight { animation: lr-deeplink-flash 3s ease-out forwards; }

/* ─── #8: Orphan panel ─── */
.orphan-panel {
  background: rgba(248,113,113,0.05);
  border: 1px solid rgba(248,113,113,0.2);
  border-radius: var(--radius-sm);
  margin: var(--sp-space, 6px 0);
  padding: var(--sp-space, 8px 14px);
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 11px;
}
.orphan-panel-header {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 6px);
  margin-bottom: var(--sp-space, 8px);
  padding-bottom: var(--sp-space, 6px);
  border-bottom: 1px solid rgba(248,113,113,0.15);
  font-size: 12px;
}
.orphan-panel-body {
  max-height: 220px;
  overflow-y: auto;
  padding: var(--sp-section-pad, 2px 0);
}

/* ╔═══════════════════════════════════════════════════════════╗
   ║  INDUSTRIAL DATA GRID — Таблиця                           ║
   ╚═══════════════════════════════════════════════════════════╝ */

.table-wrap {
  overflow-x: auto;
  padding: var(--sp-card-pad, 0 24px 24px);
  min-height: 400px;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 2px;
  margin-top: var(--sp-space, 10px);
}

/* ─── THEAD — Metal bar ─── */
thead {
  position: sticky;
  top: 0;
  z-index: 10;
}

th {
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,0.008) 0px,
      rgba(255,255,255,0.008) 1px,
      transparent 1px,
      transparent 3px
    ),
    rgba(18,16,26,0.97);
  border: none;
  padding: var(--sp-space, 8px 10px);
  text-align: center;
  border-right: 1px solid rgba(255,255,255,0.04);
  font-size: 9px;
  font-weight: 700;
  color: var(--lr-text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: color var(--tr-fast);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    inset 0 -1px 0 rgba(0,0,0,0.3);
}

th:first-child { border-radius: var(--radius-sm) 0 0 0; }
th:last-child  { border-radius: 0 var(--radius-sm) 0 0; }
th:hover { color: var(--hud-cyan); }

th.sorted-asc::after  { content: " \25b2"; color: var(--hud-cyan); }
th.sorted-desc::after { content: " \25bc"; color: var(--hud-cyan); }
th.sorted-asc, th.sorted-desc { color: var(--hud-cyan); }

/* ─── TD ─── */
td {
  border: none;
  padding: var(--sp-space, 6px 10px);
  vertical-align: middle;
  background: transparent;
  font-size: 11px;
  color: var(--text-primary);
  text-align: center;
  border-right: 1px solid rgba(255,255,255,0.03);
}

th:last-child, td:last-child { border-right: none; }

td.notes-cell {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

td.col-sorted { background: rgba(56,189,248,0.03) !important; }

/* ─── Expand arrow (col 1) ─── */
.expand-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-ui, 3px);
  border: 1px solid rgba(197,139,58,0.15);
  background: rgba(197,139,58,0.06);
  transition: all 0.2s ease;
  position: relative;
  cursor: pointer;
}

.expand-arrow::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid rgba(197,139,58,0.5);
  transition: transform 0.25s ease, border-color 0.2s;
}

tr:hover .expand-arrow {
  border-color: rgba(197,139,58,0.35);
  background: rgba(197,139,58,0.12);
}

tr:hover .expand-arrow::after { border-top-color: var(--accent); }

tr.row-expanded .expand-arrow::after {
  transform: rotate(180deg);
  border-top-color: var(--hud-cyan);
}

.stale-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--hud-amber);
}

/* ─── ID + Tag (col 2) ─── */
.id-tag-cell {
  line-height: 1.2;
}

.id-tag-cell .tag-cell {
  display: inline-block;
  margin-bottom: 2px;
  vertical-align: middle;
}

.id-tag-id {
  display: block;
  font-size: 9px;
  font-family: var(--font-log-tag, var(--font-mono));
  color: var(--lr-text-muted, #6b7280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  opacity: 0.7;
}

/* ─── Layer icon (col 3) ─── */
.layer-icon {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space, 4px);
}

.layer-icon .material-symbols-outlined {
  font-size: 18px;
}

.layer-icon-text {
  font-size: 10px;
  color: var(--text-secondary);
}

/* ─── Name + Level (col 5) ─── */
.name-level-cell {
  line-height: 1.3;
}

.level-pill-sharp {
  display: inline-block;
  font-size: 8px;
  font-weight: 700;
  font-family: var(--font-ui, 'Oswald', sans-serif); /* UPPERCASE */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--sp-space, 1px 6px);
  margin-bottom: 2px;
  border: 1px solid;
  border-radius: var(--radius-ui, 0);
}

.level-pill-sharp.level-pill-INFO    { color: var(--hud-cyan);  background: rgba(56,189,248,0.08);   border-color: rgba(56,189,248,0.3); }
.level-pill-sharp.level-pill-WARN    { color: var(--hud-amber); background: rgba(197,139,58,0.08);   border-color: rgba(197,139,58,0.3); }
.level-pill-sharp.level-pill-ERROR   { color: var(--hud-red);   background: rgba(251,113,133,0.08);  border-color: rgba(251,113,133,0.3); }
.level-pill-sharp.level-pill-DEBUG   { color: var(--text-secondary); background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); }
.level-pill-sharp.level-pill-SUCCESS { color: var(--hud-green); background: rgba(107,142,78,0.08);   border-color: rgba(107,142,78,0.3); }
.level-pill-sharp.level-pill-MIXED   { color: var(--accent);    background: rgba(197,139,58,0.08);  border-color: rgba(197,139,58,0.3); }

.name-level-label {
  display: block;
  font-size: 11px;
  color: var(--text-primary);
}

/* ─── TH hint (muted subtitles) ─── */
.th-hint {
  font-size: 8px;
  font-weight: 400;
  color: var(--lr-text-muted, #6b7280);
  opacity: 0.5;
}

/* ─── TR — рядки ─── */
tr { background: var(--bg-card); }

tr:hover {
  background: rgba(26,24,36,0.98) !important;
  box-shadow: inset 0 0 0 1px rgba(197,139,58,0.25), 0 0 12px rgba(197,139,58,0.08);
  animation: lr-row-glow 0.2s ease forwards;
}

/* Смуга по шарах */
tr.row-expandable { cursor: pointer; }
tr.row-expandable td:first-child {
  border-left: 3px solid transparent;
  transition: border-color var(--tr-normal);
}
tr.row-expandable:hover td:first-child { color: var(--hud-cyan); }

/* Кольорові смуги по шарах */
tr.row-backend  td:first-child { border-left-color: rgba(56,189,248,0.4) !important; }
tr.row-bot      td:first-child { border-left-color: rgba(197,139,58,0.4) !important; }
tr.row-frontend td:first-child { border-left-color: rgba(197,139,58,0.4) !important; }

/* ─── EXPANDED ROW ─── */
tr.row-detail-row td {
  background: rgba(10,8,16,0.97) !important;
  padding: var(--sp-card-pad, 0);
  border-top: none;
}

.row-detail-content {
  padding: var(--sp-card-pad, 0);
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  background: rgba(8,7,14,0.98);
  border-left: 3px solid rgba(197,139,58,0.3);
  animation: lr-detail-open 0.22s ease both;
}

/* ─── Секції detail row ─── */
.rd-section {
  padding: var(--sp-space, 12px 18px);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.rd-section:last-child { border-bottom: none; }

/* Заголовок секції */
.rd-section-header {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 6px);
  margin-bottom: var(--sp-space, 10px);
}

.rd-section-icon {
  font-size: 13px;
  color: var(--accent);
  opacity: 0.7;
  flex-shrink: 0;
}

.rd-section-title {
  font-size: 9px;
  font-family: var(--font-ui, 'Oswald', sans-serif); /* UPPERCASE */
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--lr-text-muted, #6b7280);
  flex-shrink: 0;
}

/* Лінія-роздільник після заголовку */
.rd-section-rail {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(197,139,58,0.2) 0%, transparent 100%);
  margin-left: var(--sp-space, 4px);
}

/* Сітка ідентифікації */
.rd-identity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--sp-space, 10px);
}

/* Секція дій */
.rd-section--actions {
  background: rgba(0,0,0,0.15);
}

.rd-section--identity .rd-section-icon { color: var(--hud-cyan); }
.rd-section--template .rd-section-icon { color: var(--accent); }
.rd-section--context  .rd-section-icon { color: var(--hud-amber); }
.rd-section--actions  .rd-section-icon { color: var(--hud-green); }

/* Акцентне значення */
.rd-value--accent {
  color: var(--accent);
  font-weight: 700;
}

/* Блок приміток */
.rd-notes-block {
  background: rgba(197,139,58,0.05);
  border: 1px solid rgba(197,139,58,0.15);
  border-left: 3px solid rgba(197,139,58,0.4);
  border-radius: var(--radius-sm);
  padding: var(--sp-space, 8px 12px);
  margin-bottom: var(--sp-space, 8px);
}

.rd-notes-text {
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Timestamps у окремому полі */
.rd-field--timestamps {
  grid-column: 1 / -1;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--sp-space, 8px);
  align-items: center;
}

/* Рядок дій */
.rd-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-space, 6px);
  align-items: center;
  margin-bottom: var(--sp-space, 8px);
}

.rd-action-btn--cyan {
  background: rgba(34,211,238,0.08) !important;
  border-color: rgba(34,211,238,0.25) !important;
  color: var(--cyan) !important;
}

/* Акордеон редагування */
.rd-edit-accordion-trigger {
  width: 100%;
  justify-content: flex-start;
}

.rd-edit-accordion-arrow {
  margin-left: auto;
  transition: transform 0.2s ease;
  font-size: 10px;
  opacity: 0.6;
}

.rd-edit-form.open ~ * .rd-edit-accordion-arrow,
.rd-edit-accordion-trigger.expanded .rd-edit-accordion-arrow {
  transform: rotate(180deg);
}

.rd-field { display: flex; flex-direction: column; gap: 4px; }

/* ─── Copy ID кнопка ─── */
.rd-copy-id {
  background: rgba(6,182,212,0.1);
  border: 1px solid rgba(6,182,212,0.25);
  border-radius: var(--forge-radius-card, 4px);
  color: var(--cyan);
  font-size: 11px;
  cursor: pointer;
  padding: var(--sp-space, 1px 7px);
  font-family: 'JetBrains Mono', monospace;
  transition: background 0.15s ease;
  flex-shrink: 0;
}

.rd-copy-id:hover {
  background: rgba(6,182,212,0.2);
  border-color: rgba(6,182,212,0.4);
}

.rd-label {
  font-size: 9px;
  font-family: var(--font-ui, 'Oswald', sans-serif); /* UPPERCASE */
  color: var(--lr-text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.rd-value {
  font-size: 11px;
  color: var(--text-secondary);
  font-family: var(--font-log-tag, var(--font-mono));
  word-break: break-word;
}

.rd-full-template {
  grid-column: 1 / -1;
  background: rgba(56,189,248,0.04);
  border: 1px solid rgba(56,189,248,0.12);
  border-left: 3px solid rgba(56,189,248,0.4);
  border-radius: var(--radius-sm);
  padding: var(--sp-space, 8px 12px);
}

.rd-id-row { display: flex; align-items: center; gap: 8px; }

.expand-icon {
  font-size: 10px;
  color: var(--lr-text-muted, #6b7280);
  transition: transform 0.2s ease, color 0.2s ease;
  display: inline-block;
}

tr.row-open .expand-icon { transform: rotate(90deg); color: var(--accent); }

tr.row-open .expand-arrow::after {
  transform: rotate(180deg);
  border-top-color: var(--hud-cyan);
}

tr.row-open .expand-arrow {
  border-color: rgba(56,189,248,0.3);
  background: rgba(56,189,248,0.08);
}

/* ─── Layer colors ─── */
.layer-bot      { color: var(--accent); }
.layer-backend  { color: var(--hud-cyan); }
.layer-frontend { color: var(--hud-amber); }

/* ─── Level colors ─── */
.level-INFO    { color: var(--hud-cyan); }
.level-WARN    { color: var(--hud-amber); }
.level-ERROR   { color: var(--hud-red); }
.level-DEBUG   { color: var(--text-secondary); }
.level-SUCCESS { color: var(--hud-green); }
.level-MIXED   { color: var(--accent); }

/* ─── LEVEL PILL BADGES — HUD ─── */
.level-pill {
  font-size: 9px;
  font-family: var(--font-ui, 'Oswald', sans-serif); /* UPPERCASE */
  border-radius: var(--radius-sm);
  padding: var(--sp-space, 2px 7px);
  display: inline-block;
  letter-spacing: 0.08em;
  border: 1px solid;
  cursor: pointer;
  transition: var(--tr-fast);
  text-transform: uppercase;
  font-weight: 700;
}

.level-pill:hover { opacity: 0.8; transform: scale(0.96); }

.level-pill-INFO    { color: var(--hud-cyan);  background: rgba(56,189,248,0.10);  border-color: rgba(56,189,248,0.4);  box-shadow: 0 0 10px rgba(56,189,248,0.20), inset 0 1px 0 rgba(255,255,255,0.08); }
.level-pill-WARN    { color: var(--hud-amber); background: rgba(197,139,58,0.10); border-color: rgba(197,139,58,0.4); box-shadow: 0 0 10px rgba(197,139,58,0.20), inset 0 1px 0 rgba(255,255,255,0.08); }
.level-pill-ERROR   { color: var(--hud-red);   background: rgba(251,113,133,0.10); border-color: rgba(251,113,133,0.4); box-shadow: 0 0 10px rgba(251,113,133,0.20), inset 0 1px 0 rgba(255,255,255,0.08); }
.level-pill-DEBUG   { color: var(--text-secondary); background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); }
.level-pill-SUCCESS { color: var(--hud-green); background: rgba(107,142,78,0.10);  border-color: rgba(107,142,78,0.35);  box-shadow: 0 0 10px rgba(107,142,78,0.18), inset 0 1px 0 rgba(255,255,255,0.08); }
.level-pill-MIXED   { color: var(--accent);    background: rgba(197,139,58,0.10); border-color: rgba(197,139,58,0.4); box-shadow: 0 0 10px rgba(197,139,58,0.18), inset 0 1px 0 rgba(255,255,255,0.08); }

/* ─── Module tag cells ─── */
.tag-cell {
  font-size: 10px;
  font-family: var(--font-log-tag, var(--font-mono));
  border-radius: var(--radius-sm);
  padding: var(--sp-space, 1px 7px);
  display: inline-block;
  letter-spacing: 0.06em;
  border: 1px solid;
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.08);
  color: var(--text-secondary);
}

.tag-system      { color: var(--hud-cyan);  background: rgba(56,189,248,0.08);   border-color: rgba(56,189,248,0.25); }
.tag-observer    { color: var(--mod-obs);   background: rgba(86,163,166,0.08);   border-color: rgba(86,163,166,0.25); }
.tag-publisher   { color: var(--mod-pub);   background: rgba(197,139,58,0.08);   border-color: rgba(197,139,58,0.25); }
.tag-executor    { color: var(--mod-exc);   background: rgba(184,84,52,0.08);    border-color: rgba(184,84,52,0.25); }
.tag-applicant   { color: var(--mod-apl);   background: rgba(124,143,136,0.08);   border-color: rgba(124,143,136,0.25); }
.tag-nexus       { color: var(--mod-nex);   background: rgba(0,212,170,0.08);    border-color: rgba(0,212,170,0.25); }
.tag-challenger  { color: var(--mod-cha);   background: rgba(255,126,0,0.08);    border-color: rgba(255,126,0,0.25); }
.tag-paymaster   { color: color-mix(in srgb, var(--lr-info, #60a5fa) 80%, var(--text-bright));          background: rgba(26,77,154,0.12);    border-color: rgba(26,77,154,0.3); }
.tag-devtools    { color: var(--mod-devtools); background: rgba(197,139,58,0.08); border-color: rgba(197,139,58,0.25); }
.tag-error       { color: var(--hud-red);   background: rgba(251,113,133,0.08);  border-color: rgba(251,113,133,0.25); }
.tag-warn        { color: var(--hud-amber); background: rgba(197,139,58,0.08);   border-color: rgba(197,139,58,0.25); }
.tag-internal-http { color: var(--hud-cyan); background: rgba(56,189,248,0.08);  border-color: rgba(56,189,248,0.25); }
.tag-interaction { color: var(--accent);    background: rgba(197,139,58,0.08);  border-color: rgba(197,139,58,0.25); }

.icon-cell { text-align: center; padding: var(--sp-card-pad, 0 4px) !important; }

/* ─── Merged module + category cell ─── */
.mod-cat-cell { line-height: 1.2; }

.mod-cat-module {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  font-family: var(--font-log-tag, var(--font-mono));
}

.mod-cat-category {
  display: block;
  font-size: 9px;
  color: var(--lr-text-muted, #6b7280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

/* ─── Count cell ─── */
.count-cell-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-gap, 2px);
}

.count-num {
  font-weight: 700;
  color: var(--accent);
  font-size: 12px;
  font-family: var(--font-log-tag, var(--font-mono));
}

.count-mini-bar {
  width: 52px;
  height: 3px;
  background: rgba(197,139,58,0.12);
  border-radius: 2px;
  overflow: hidden;
}

.count-mini-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), rgba(56,189,248,0.8));
  border-radius: 2px;
  min-width: 2px;
  transition: width 0.4s ease;
}

.template-cell {
  font-size: 11px;
  color: var(--text-secondary);
  min-width: 120px;
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tmpl-brace { color: var(--lr-text-muted, #6b7280); }
.tmpl-param { color: var(--accent); font-weight: 700; }

.notes-cell { font-size: 10px; color: var(--text-secondary); max-width: 200px; }

/* Target + Format */
.target-console { color: var(--hud-green); }
.target-debug   { color: var(--text-secondary); }
.target-browser { color: var(--hud-amber); }

.format-logger-v3     { color: var(--hud-cyan); }
.format-console-raw   { color: var(--hud-red); }
.format-nexus-wrapper { color: var(--accent); }

/* ─── Copy cell ─── */
.copy-cell { position: relative; padding-right: 32px !important; }

.copy-cell .copy-btn {
  display: none;
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(56,189,248,0.10);
  border: 1px solid rgba(56,189,248,0.2);
  border-radius: var(--radius-sm);
  color: var(--hud-cyan);
  font-size: 12px;
  cursor: pointer;
  padding: var(--sp-space, 2px 4px);
  line-height: 1;
  font-family: 'Material Symbols Outlined';
  transition: background var(--tr-fast);
}

.copy-cell:hover .copy-btn { display: block; }
.copy-cell .copy-btn:hover { background: rgba(56,189,248,0.20); }

.copy-cell .copy-btn.copied {
  color: var(--hud-green);
  border-color: rgba(107,142,78,0.3);
  background: rgba(107,142,78,0.08);
}

/* ─── File link ─── */
.file-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 10px;
  transition: color var(--tr-fast);
}

.file-link:hover {
  color: var(--mod-devtools);
  text-decoration: underline dotted;
}

/* ─── Filterable cells ─── */
td.filterable-cell {
  cursor: pointer;
  transition: background var(--tr-fast), color var(--tr-fast);
}

td.filterable-cell:hover {
  background: rgba(197,139,58,0.08) !important;
  color: var(--accent) !important;
}

/* ─── Стале рядки ─── */
tr.row-stale { opacity: 0.55; }
tr.row-stale td:first-child { border-left-color: rgba(197,139,58,0.3) !important; }

.stale-icon {
  font-size: 10px;
  color: var(--hud-amber);
  cursor: help;
  margin-left: var(--sp-space, 3px);
  vertical-align: middle;
  opacity: 0.8;
}

/* ─── Empty state ─── */
.empty-state {
  text-align: center;
  padding: var(--sp-space, 48px);
  color: var(--text-secondary);
  font-size: 14px;
  font-family: var(--font-log-tag, var(--font-mono));
  display: none;
}

.empty-state-ctx {
  text-align: center;
  padding: var(--sp-space, 36px 24px);
  display: none;
}

.empty-state-ctx.visible { display: block; }

.esc-icon {
  font-size: 32px;
  color: var(--text-secondary);
  margin-bottom: var(--sp-space, 8px);
}

.esc-title {
  font-size: 13px;
  color: var(--text-secondary);
  font-family: var(--font-log-tag, var(--font-mono));
  margin-bottom: var(--sp-space, 12px);
}

.esc-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-space, 6px);
  justify-content: center;
  margin-bottom: var(--sp-space, 12px);
}

.esc-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space, 5px);
  background: rgba(251,113,133,0.08);
  border: 1px solid rgba(251,113,133,0.2);
  border-radius: var(--radius-sm);
  padding: var(--sp-space-2) var(--sp-space-3);
  font-size: 10px;
  font-family: var(--font-log-tag, var(--font-mono));
  color: var(--hud-red);
}

.esc-chip-remove {
  background: none;
  border: none;
  color: var(--hud-red);
  cursor: pointer;
  font-size: 12px;
  padding: var(--sp-card-pad, 0);
  opacity: 0.7;
}

.esc-chip-remove:hover { opacity: 1; }


/* ╔═══════════════════════════════════════════════════════════╗
   ║  GROUPED VIEW — HUD Cards                                 ║
   ╚═══════════════════════════════════════════════════════════╝ */

.grouped-view { display: none; padding: var(--sp-card-pad, 16px 24px 24px); }
.grouped-view.active { display: block; }

.group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-space, 12px);
  margin-top: var(--sp-space, 8px);
}

.group-card {
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition-premium);
  animation: phase-in 0.3s ease both;
}

.group-card:hover {
  transform: translateY(-3px);
  border-color: rgba(197,139,58,0.25);
  box-shadow: 0 8px 28px rgba(0,0,0,0.4), 0 0 0 1px rgba(197,139,58,0.1);
}

.group-card-hdr {
  padding: var(--sp-space, 10px 14px);
  display: flex;
  align-items: center;
  gap: var(--sp-space, 8px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,0.006) 0px,
      rgba(255,255,255,0.006) 1px,
      transparent 1px,
      transparent 3px
    ),
    rgba(255,255,255,0.015);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.group-accent {
  width: 3px;
  height: 20px;
  border-radius: 2px;
  flex-shrink: 0;
  box-shadow: 0 0 6px currentColor;
  opacity: 0.8;
}

.group-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  flex: 1;
  letter-spacing: 0.03em;
}

.group-count-badge {
  font-size: 10px;
  font-family: var(--font-log-tag, var(--font-mono));
  color: var(--text-secondary);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-sm);
  padding: var(--sp-space, 1px 8px);
}

.group-card-body { padding: var(--sp-card-pad, 10px 14px); display: flex; flex-direction: column; gap: var(--sp-gap, 5px); }

.group-layer-row {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 6px);
  font-size: 10px;
  font-family: var(--font-log-tag, var(--font-mono));
  color: var(--text-secondary);
}

/* Mini level bar */
.group-level-mini {
  display: flex;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  gap: var(--sp-gap, 1px);
  margin-top: var(--sp-space, 4px);
  transition: height 0.2s ease;
}

.group-card:hover .group-level-mini { height: 10px; }
.group-level-seg { height: 100%; border-radius: 2px; }

.group-level-footer {
  font-size: 9px;
  font-family: var(--font-log-tag, var(--font-mono));
  color: var(--text-secondary);
  margin-top: 2px;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.2s ease, max-height 0.2s ease;
  white-space: nowrap;
  display: flex;
  gap: var(--sp-space, 6px);
  flex-wrap: wrap;
}

.group-card:hover .group-level-footer { opacity: 1; max-height: 20px; }


/* ╔═══════════════════════════════════════════════════════════╗
   ║  CATEGORY VIEW — HUD Cards                                ║
   ╚═══════════════════════════════════════════════════════════╝ */

.category-view { display: none; padding: var(--sp-card-pad, 16px 24px 24px); }
.category-view.active { display: block; }

.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--sp-space, 12px);
  margin-top: var(--sp-space, 8px);
}

.cat-card {
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: var(--transition-premium);
  animation: phase-in 0.3s ease both;
}

.cat-card:hover {
  border-color: rgba(197,139,58,0.2);
  box-shadow: 0 6px 20px rgba(0,0,0,0.35), 0 0 0 1px rgba(197,139,58,0.08);
  transform: translateY(-2px);
}

.cat-card-hdr {
  padding: var(--sp-space, 8px 14px);
  display: flex;
  align-items: center;
  gap: var(--sp-space, 8px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  background: rgba(255,255,255,0.018);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
}

.cat-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  flex: 1;
  font-family: var(--font-log-tag, var(--font-mono));
  letter-spacing: 0.06em;
}

.cat-count-badge {
  font-size: 9px;
  color: var(--text-secondary);
  font-family: var(--font-log-tag, var(--font-mono));
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-sm);
  padding: var(--sp-space, 1px 7px);
}

.cat-modules {
  padding: var(--sp-space, 8px 14px);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-space, 4px);
}

.cat-mod-tag {
  font-size: 9px;
  font-family: var(--font-log-tag, var(--font-mono));
  border-radius: var(--radius-sm);
  padding: var(--sp-space, 1px 6px);
  border: 1px solid;
  opacity: 0.8;
}


/* ╔═══════════════════════════════════════════════════════════╗
   ║  FILE VIEW — HUD Cards                                    ║
   ╚═══════════════════════════════════════════════════════════╝ */

.file-view { display: none; padding: var(--sp-card-pad, 16px 24px 24px); }
.file-view.active { display: block; }

.file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-space, 10px);
  margin-top: var(--sp-space, 8px);
}

.file-card {
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition-premium);
  animation: phase-in 0.3s ease both;
}

.file-card:hover {
  transform: translateY(-2px);
  border-color: rgba(197,139,58,0.25);
  box-shadow: 0 6px 20px rgba(0,0,0,0.35), 0 0 0 1px rgba(197,139,58,0.08);
}

.file-card-hdr {
  padding: var(--sp-space, 8px 12px);
  display: flex;
  align-items: center;
  gap: var(--sp-space, 7px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  background: rgba(255,255,255,0.018);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
}

.file-name {
  font-size: 11px;
  font-family: var(--font-log-tag, var(--font-mono));
  color: var(--mod-devtools);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-entry-badge {
  font-size: 9px;
  font-family: var(--font-log-tag, var(--font-mono));
  color: var(--text-secondary);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-sm);
  padding: var(--sp-space, 1px 7px);
  flex-shrink: 0;
}

.file-card-body { padding: var(--sp-card-pad, 8px 12px); }

.file-card-stats {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 8px);
  font-size: 10px;
  font-family: var(--font-log-tag, var(--font-mono));
  color: var(--text-secondary);
  margin-bottom: var(--sp-space, 5px);
}

.file-level-bar {
  display: flex;
  height: 3px;
  border-radius: 2px;
  overflow: hidden;
  gap: var(--sp-gap, 1px);
}

/* File context */
.file-ctx-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 6px);
  cursor: pointer;
  font-size: 10px;
  font-family: var(--font-log-tag, var(--font-mono));
  color: var(--text-secondary);
  margin-top: var(--sp-space, 6px);
  user-select: none;
  transition: color var(--tr-fast);
}

.file-ctx-toggle:hover { color: var(--text-primary); }

.file-ctx-toggle .fct-icon {
  font-size: 13px;
  transition: transform 0.2s ease;
}

.file-ctx-toggle.open .fct-icon { transform: rotate(90deg); }

.file-ctx-list {
  display: none;
  margin-top: var(--sp-space, 6px);
  border-left: 2px solid rgba(255,255,255,0.06);
  padding-left: var(--sp-space, 8px);
}

.file-ctx-list.open { display: block; }

.file-ctx-entry {
  font-size: 10px;
  font-family: var(--font-log-tag, var(--font-mono));
  color: var(--text-secondary);
  padding: var(--sp-space, 3px 0);
  display: flex;
  align-items: center;
  gap: var(--sp-space, 6px);
  border-bottom: 1px solid rgba(255,255,255,0.025);
}

.file-ctx-entry:last-child { border-bottom: none; }

.file-ctx-entry.current {
  color: var(--hud-cyan);
  padding: var(--sp-space, 3px 4px);
  background: rgba(56,189,248,0.04);
  border-radius: var(--radius-sm);
}

/* File group card */
.file-group-card { margin-bottom: 16px; }


/* ╔═══════════════════════════════════════════════════════════╗
   ║  STATS DRAWER — Metal Frame Glass                         ║
   ╚═══════════════════════════════════════════════════════════╝ */

.stats-drawer {
  position: fixed;
  right: -340px;
  top: 0;
  bottom: 0;
  width: 320px;
  background: var(--glass-bg);
  border-left: 1px solid var(--glass-border);
  z-index: 500;
  display: flex;
  flex-direction: column;
  transition: right 0.32s cubic-bezier(0.4,0,0.2,1);
  overflow: hidden;
  box-shadow: -8px 0 32px rgba(0,0,0,0.5);
}

.stats-drawer.open { right: 0; }

/* Accent glow line зверху */
.stats-drawer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(197,139,58,0.6), transparent);
  pointer-events: none;
}

.sd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-space, 14px 16px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
  background: rgba(255,255,255,0.02);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.25);
}

.sd-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--sp-space, 6px);
  letter-spacing: 0.06em;
}

.sd-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: color var(--tr-fast);
}

.sd-close:hover { color: var(--hud-red); }

.sd-body { flex: 1; overflow-y: auto; padding: var(--sp-card-pad, 12px 16px); }

.sd-section { margin-bottom: 18px; }

.sd-section-title {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--lr-text-muted, #6b7280);
  font-family: var(--font-ui, 'Oswald', sans-serif); /* UPPERCASE */
  margin-bottom: var(--sp-space, 7px);
}

.sd-row {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 6px);
  margin-bottom: var(--sp-space, 4px);
  cursor: pointer;
  transition: background var(--tr-fast);
  border-radius: var(--radius-sm);
  padding: var(--sp-space, 2px 4px);
}

.sd-row:hover { background: rgba(197,139,58,0.06); }
.sd-row:hover .sd-row-label { color: var(--text-primary); }

.sd-row-label {
  font-size: 10px;
  font-family: var(--font-log-tag, var(--font-mono));
  color: var(--text-secondary);
  width: 80px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--tr-fast);
}

.sd-bar-track {
  flex: 1;
  height: 5px;
  background: rgba(255,255,255,0.04);
  border-radius: 2px;
  overflow: hidden;
}

.sd-bar-fill {
  height: 100%;
  border-radius: 2px;
  min-width: 2px;
  transition: width 0.45s ease;
}

.sd-row-count {
  font-size: 10px;
  font-family: var(--font-log-tag, var(--font-mono));
  color: var(--text-secondary);
  width: 28px;
  text-align: right;
  flex-shrink: 0;
}

.stats-drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 499;
  background: rgba(0,0,0,0.3);
}

.stats-drawer-backdrop.visible { display: block; }


/* ╔═══════════════════════════════════════════════════════════╗
   ║  COVERAGE INSPECTOR — Metal Frame                         ║
   ╚═══════════════════════════════════════════════════════════╝ */

.coverage-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(0,0,0,0.7);
  align-items: center;
  justify-content: center;
}

.coverage-overlay.open { display: flex; }

.coverage-box {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  width: 680px;
  max-width: 96vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-modal);
  overflow: hidden;
  animation: phase-in 0.25s ease both;
  position: relative;
}

/* Accent line зверху */
.coverage-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(107,142,78,0.5), transparent);
  pointer-events: none;
}

.coverage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-space, 14px 18px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
  background: rgba(255,255,255,0.02);
}

.coverage-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--sp-space, 7px);
  letter-spacing: 0.06em;
}

.coverage-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  transition: color var(--tr-fast);
}

.coverage-close:hover { color: var(--hud-red); }

.coverage-body { flex: 1; overflow-y: auto; padding: var(--sp-card-pad, 16px 18px); }

.cov-matrix {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 2px;
}

.cov-matrix th {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--lr-text-muted, #6b7280);
  font-family: var(--font-ui, 'Oswald', sans-serif); /* UPPERCASE */
  padding: var(--sp-space, 4px 8px);
  text-align: center;
  background: none;
  border: none;
  cursor: default;
  user-select: none;
}

.cov-matrix th:hover { color: var(--lr-text-muted, #6b7280); }

.cov-matrix td {
  padding: var(--sp-space, 5px 8px);
  font-size: 10px;
  font-family: var(--font-log-tag, var(--font-mono));
  text-align: center;
  border-radius: var(--radius-sm);
}

.cov-matrix td:first-child {
  text-align: left;
  color: var(--text-secondary);
  font-weight: 600;
  min-width: 100px;
}

.cov-cell-active {
  color: var(--hud-green);
  background: rgba(107,142,78,0.08);
  border: 1px solid rgba(107,142,78,0.2);
  box-shadow: 0 0 4px rgba(107,142,78,0.08);
}

.cov-cell-empty {
  color: var(--lr-text-muted, #6b7280);
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
}

/* Health matrix */
.health-matrix-grid {
  display: grid;
  grid-template-columns: 90px repeat(3, 1fr);
  gap: var(--sp-gap, 2px);
  margin-top: var(--sp-space, 6px);
}

.hm-cell {
  padding: var(--sp-space, 4px 6px);
  font-size: 9px;
  font-family: var(--font-log-tag, var(--font-mono));
  text-align: center;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hm-header { color: var(--lr-text-muted, #6b7280); background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.04); }
.hm-label  { text-align: left; color: var(--text-secondary); background: none; border: none; }
.hm-green  { color: var(--hud-green); background: rgba(107,142,78,0.07); border-color: rgba(107,142,78,0.18); }
.hm-yellow { color: var(--hud-amber); background: rgba(197,139,58,0.07); border-color: rgba(197,139,58,0.18); }
.hm-red    { color: var(--hud-red);   background: rgba(251,113,133,0.07); border-color: rgba(251,113,133,0.18); }
.hm-empty  { color: var(--lr-text-muted, #6b7280); background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.04); }


/* ╔═══════════════════════════════════════════════════════════╗
   ║  ADD ENTRY MODAL — Metal Frame                            ║
   ╚═══════════════════════════════════════════════════════════╝ */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(0,0,0,0.7);
  align-items: center;
  justify-content: center;
}

.modal-overlay.open { display: flex; }

.modal-box {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  width: 560px;
  max-width: 96vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-modal);
  animation: phase-in 0.25s ease both;
  position: relative;
  overflow: hidden;
}

/* Accent line зверху */
.modal-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(197,139,58,0.8), transparent);
  box-shadow: 0 2px 8px rgba(197,139,58,0.25);
  pointer-events: none;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-space, 14px 18px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
  background: rgba(255,255,255,0.02);
}

.modal-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--sp-space, 7px);
  letter-spacing: 0.06em;
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  transition: color var(--tr-fast);
}

.modal-close:hover { color: var(--hud-red); }

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-space, 16px 18px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-space, 10px);
}

.modal-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: center;
  gap: var(--sp-space, 8px);
}

.modal-row.full { grid-template-columns: 1fr; }

.modal-lbl {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lr-text-muted, #6b7280);
  font-family: var(--font-ui, 'Oswald', sans-serif); /* UPPERCASE */
}

.modal-input, .modal-select, .modal-textarea {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 11px;
  padding: var(--sp-space, 5px 9px);
  outline: none;
  transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
  width: 100%;
  box-sizing: border-box;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
}

.modal-input:focus, .modal-select:focus, .modal-textarea:focus {
  border-color: rgba(197,139,58,0.45);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.4), 0 0 0 1px rgba(197,139,58,0.15);
}

.modal-textarea { resize: vertical; min-height: 60px; }

.modal-id-preview {
  font-size: 10px;
  font-family: var(--font-log-tag, var(--font-mono));
  color: var(--accent);
  padding: var(--sp-space, 4px 8px);
  background: rgba(197,139,58,0.08);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(197,139,58,0.2);
}

.modal-footer {
  padding: var(--sp-space, 12px 18px);
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  gap: var(--sp-space, 8px);
  align-items: center;
  flex-shrink: 0;
  background: rgba(255,255,255,0.01);
}

.modal-save {
  background: linear-gradient(135deg, rgba(197,139,58,0.9), rgba(100,85,170,0.9));
  color: var(--text-bright);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--sp-space, 7px 18px);
  font-size: 11px;
  font-family: var(--font-log-tag, var(--font-mono));
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-premium);
  letter-spacing: 0.06em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.15);
}

.modal-save:hover {
  box-shadow: 0 0 16px rgba(197,139,58,0.3), 0 2px 8px rgba(0,0,0,0.4);
  transform: translateY(-1px);
}

.modal-save:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.modal-cancel {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  padding: var(--sp-space, 7px 14px);
  font-size: 11px;
  font-family: var(--font-log-tag, var(--font-mono));
  cursor: pointer;
  transition: var(--tr-fast);
}

.modal-cancel:hover { border-color: rgba(255,255,255,0.14); color: var(--text-primary); }

.modal-status {
  font-size: 10px;
  font-family: var(--font-log-tag, var(--font-mono));
  margin-left: var(--sp-space, 6px);
}

.modal-status.ok  { color: var(--hud-green); }
.modal-status.err { color: var(--hud-red); }


/* ╔═══════════════════════════════════════════════════════════╗
   ║  INFO MODAL — Logger Design System                        ║
   ║  Steampunk shell · SSOT log colors inside                 ║
   ╚═══════════════════════════════════════════════════════════╝ */

/* Підсилений overlay — затемнює всю сторінку (на випадок коли
   --glass-bg недовизначений у проекті, див. debug-audit). */
#infoModal.modal-overlay {
  background: rgba(6, 4, 12, 0.86);
  /* backdrop-filter removed (canon: glassmorphism forbidden) */
  /* -webkit-backdrop-filter removed (canon) */
  z-index: 1200;
}

.modal-box.modal-box--xl {
  width: 1180px;
  max-width: 96vw;
  max-height: 92vh;
  background: rgba(15, 12, 22, 0.985);
  border-color: rgba(139, 126, 200, 0.22);
  box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(197,139,58,0.10);
}

.modal-body.modal-body--docs {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 0;
  padding: var(--sp-card-pad, 0);
  overflow: hidden;
  background: rgba(12, 10, 18, 0.985);
}

.modal-footer.modal-footer--docs {
  justify-content: space-between;
  background: rgba(8, 6, 14, 0.985);
}

/* TOC --------------------------------------------------------- */
.ids-toc {
  position: sticky;
  top: 0;
  align-self: start;
  padding: var(--sp-space, 14px 8px 14px 14px);
  border-right: 1px solid var(--glass-border);
  background: rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  gap: var(--sp-gap, 2px);
  max-height: calc(92vh - 110px);
  overflow-y: auto;
}

.ids-toc-link {
  font-family: var(--font-ui, 'Oswald', sans-serif); /* UPPERCASE */
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--lr-text-muted, #6b7280);
  text-decoration: none;
  padding: var(--sp-space, 6px 10px);
  border-radius: var(--radius-sm);
  border-left: 2px solid transparent;
  transition: color var(--tr-fast), background var(--tr-fast), border-color var(--tr-fast);
  white-space: nowrap;
  text-transform: uppercase;
}
.ids-toc-link:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.03);
}
.ids-toc-link.active {
  color: var(--accent);
  background: rgba(197,139,58,0.10);
  border-left-color: var(--accent);
}

/* Content area ------------------------------------------------ */
.ids-content {
  padding: var(--sp-space, 18px 22px 28px);
  overflow-y: auto;
  max-height: calc(92vh - 110px);
  scroll-behavior: smooth;
  display: flex;
  flex-direction: column;
  gap: var(--sp-space, 36px);
}

.ids-sec { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 8px; }
.ids-sec-t {
  font-family: var(--font-ui, 'Oswald', sans-serif); /* UPPERCASE */
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--lr-text-muted, #6b7280);
  display: flex;
  align-items: center;
  gap: var(--sp-space, 10px);
  margin: 0;
}
.ids-sec-t::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--glass-border);
}
.ids-sec-sub {
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 11px;
  color: var(--lr-text-muted, #6b7280);
  margin: var(--sp-space, -4px 0 6px);
}
.ids-ig-label {
  font-family: var(--font-ui, 'Oswald', sans-serif); /* UPPERCASE */
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--lr-text-muted, #6b7280);
  padding: var(--sp-space, 6px 0 4px);
  border-bottom: 1px solid var(--glass-border);
  margin: var(--sp-space, 6px 0 2px);
}

/* Code chip --------------------------------------------------- */
.ids-content code {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  background: rgba(197,139,58,0.12);
  border-radius: var(--radius-ui, 3px);
  padding: var(--sp-card-pad, 0 4px);
  font-size: 11px;
  color: var(--accent);
}

/* Tables ------------------------------------------------------ */
.ids-tw {
  overflow-x: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
}
.ids-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.ids-table th {
  background: rgba(197,139,58,0.06);
  border-bottom: 1px solid rgba(197,139,58,0.2);
  padding: var(--sp-space, 7px 11px);
  text-align: left;
  font-family: var(--font-ui, 'Oswald', sans-serif); /* UPPERCASE */
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lr-text-muted, #6b7280);
  white-space: nowrap;
}
.ids-table td {
  padding: var(--sp-space, 8px 11px);
  border-bottom: 1px solid var(--glass-border);
  vertical-align: middle;
  color: var(--text-secondary);
}
.ids-table tr:last-child td { border-bottom: none; }
.ids-table tbody tr:hover td { background: rgba(255,255,255,0.02); }
.ids-table strong { color: var(--text-primary); font-weight: 700; }

/* Color swatch ------------------------------------------------ */
.ids-sw {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space, 6px);
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 10px;
  color: var(--lr-text-muted, #6b7280);
}
.ids-sd {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Tag chip / Level badge / Border-left bar -------------------- */
.ids-lt {
  display: inline-block;
  font-family: var(--font-ui, 'Oswald', sans-serif); /* UPPERCASE */
  font-size: 10px;
  font-weight: 700;
  border-radius: var(--radius-ui, 4px);
  padding: var(--sp-space, 1px 6px);
  background: rgba(0,0,0,0.5);
  border: 1px solid;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.ids-lv {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space, 5px);
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 10px;
  font-weight: 700;
  border-radius: var(--forge-radius-card, 4px);
  padding: var(--sp-space, 2px 8px);
  border: 1px solid;
  white-space: nowrap;
}
.ids-bl { display: inline-block; width: 3px; height: 16px; border-radius: var(--radius-ui, 1px); vertical-align: middle; }
.ids-kw {
  display: inline-block;
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--forge-radius-card, 4px);
  padding: var(--sp-space, 1px 7px);
  white-space: nowrap;
}

/* Icon grid (section 0) -------------------------------------- */
.ids-igrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: var(--sp-space, 8px);
}
.ids-ic {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-space, 9px);
  padding: var(--sp-space, 16px 6px 12px);
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--tr-fast);
}
.ids-ic:hover { border-color: rgba(255,255,255,0.15); }
.ids-ic-g {
  font-size: 30px;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 40;
  width: 46px; height: 46px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.ids-ic-n {
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 10px;
  color: var(--text-primary);
  text-align: center;
  line-height: 1.3;
  font-weight: 600;
}
.ids-ic-id {
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 8.5px;
  color: var(--lr-text-muted, #6b7280);
  text-align: center;
  margin-top: var(--sp-space, -4px);
}
.ids-ic-badge {
  position: absolute;
  top: 5px; right: 5px;
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--sp-space, 1px 4px);
  border-radius: var(--radius-ui, 3px);
}

/* Schema cards (section 5) ----------------------------------- */
.ids-agrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-space, 14px);
}
.ids-acard {
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: var(--sp-space, 14px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-space, 8px);
}
.ids-acard-t {
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--lr-text-muted, #6b7280);
  margin-bottom: 2px;
}
.ids-arow {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-space, 10px);
  padding: var(--sp-space, 5px 10px);
  border-radius: var(--forge-radius-card, 4px);
  background: rgba(255,255,255,0.02);
  border-left: 3px solid;
}
.ids-af {
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  min-width: 78px;
}
.ids-av {
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
  word-break: break-word;
}

/* Anatomy (section 6) ---------------------------------------- */
.ids-ea {
  background: rgba(255,77,79,0.04);
  border: 1px solid rgba(255,77,79,0.18);
  border-radius: var(--radius-sm);
  padding: var(--sp-space, 16px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-space, 10px);
}
.ids-ea-t {
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255,107,109,0.7);
}
.ids-ea-row {
  display: grid;
  grid-template-columns: 88px 1fr;
  align-items: start;
  gap: var(--sp-space, 11px);
}
.ids-ea-k {
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--sp-space, 3px 8px);
  border-radius: var(--radius-ui, 4px);
  text-align: center;
  white-space: nowrap;
}
.ids-ea-v {
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.ids-ea-v strong { color: var(--text-primary); font-weight: 700; }
.ids-ea-sep { height: 1px; background: rgba(255,77,79,0.12); }

.ids-vsgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ids-vs-l {
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  margin-bottom: var(--sp-space, 4px);
}
.ids-ea-good {
  background: rgba(86,163,166,0.05);
  border: 1px solid rgba(86,163,166,0.18);
  border-radius: var(--forge-radius-card, 4px);
  padding: var(--sp-space, 10px 12px);
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 11px;
  color: var(--lr-success, #4ade80);
  line-height: 1.6;
}
.ids-ea-bad {
  background: rgba(255,77,79,0.06);
  border: 1px solid rgba(255,77,79,0.15);
  border-radius: var(--forge-radius-card, 4px);
  padding: var(--sp-space, 10px 12px);
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 11px;
  color: var(--lr-error, #f87171);
  line-height: 1.6;
}

/* Live preview / Sequence (sections 7–8) --------------------- */
.ids-lps {
  background: rgba(0,0,0,0.45);
  border-radius: var(--radius-sm);
  padding: var(--sp-space, 9px 7px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-space, 3px);
  border: 1px solid var(--glass-border);
}
.ids-lm {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 8px);
  min-height: 33px;
  padding: var(--sp-space, 6px 11px);
  border-radius: var(--forge-radius-card, 4px);
  border-left: 2px solid;
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 11px;
  line-height: 1.4;
  background: rgba(255,255,255,0.025);
}
.ids-lm--sm { min-height: 28px; padding: var(--sp-card-pad, 4px 10px); font-size: 10.5px; }
.ids-lm--xs { min-height: 26px; padding: var(--sp-card-pad, 4px 9px); font-size: 10px; }
.ids-lm-i {
  font-size: 16px;
  flex-shrink: 0;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}
.ids-lm--sm .ids-lm-i, .ids-lm--xs .ids-lm-i { font-size: 14px; }
.ids-tp {
  font-family: var(--font-log-tag, var(--font-mono));
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ids-lt2 {
  font-family: var(--font-ui, 'Oswald', sans-serif); /* UPPERCASE */
  font-size: 9px;
  color: var(--lr-text-muted, #6b7280);
  margin-left: auto;
  padding-left: var(--sp-space, 10px);
  white-space: nowrap;
  flex-shrink: 0;
}
.ids-step {
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 9px;
  font-weight: 700;
  border-radius: var(--radius-ui, 3px);
  padding: var(--sp-space, 1px 5px);
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: var(--sp-space, 4px);
}

/* Inline pills (used inside .ids-tp) -------------------------- */
.ids-pill-amber  { color: var(--warning); background: rgba(197,139,58,0.08); padding: var(--sp-card-pad, 0 4px); border-radius: var(--radius-ui, 3px); font-family: var(--font-log-tag, var(--font-mono)); }
.ids-pill-green  { color: var(--lr-success, #4ade80); background: rgba(74,222,128,0.08); padding: var(--sp-card-pad, 0 4px); border-radius: var(--radius-ui, 3px); font-family: var(--font-log-tag, var(--font-mono)); }
.ids-pill-orange { color: var(--lr-warn, #fb923c); background: rgba(251,146,60,0.08); padding: var(--sp-card-pad, 0 4px); border-radius: var(--radius-ui, 3px); font-family: var(--font-log-tag, var(--font-mono)); }
.ids-pill-num    { color: var(--text-bright);    background: rgba(255,255,255,0.06); padding: var(--sp-card-pad, 0 6px); border-radius: var(--forge-radius-card, 4px); font-family: var(--font-log-tag, var(--font-mono)); font-weight: 700; }
.ids-pill-id     { color: var(--lr-info, #60a5fa); background: rgba(56,189,248,0.10); padding: var(--sp-card-pad, 0 6px); border-radius: var(--forge-radius-card, 4px); font-family: var(--font-log-tag, var(--font-mono)); }
.ids-pill-vt { color: var(--accent-brass); background: rgba(92,68,48,0.12); padding: var(--sp-card-pad, 0 6px); border-radius: var(--forge-radius-card, 4px); border: 1px solid rgba(92,68,48,0.2); font-family: var(--font-log-tag, var(--font-mono)); }
.ids-pill-prp { color: var(--accent-brass); background: rgba(197,139,58,0.10); padding: var(--sp-card-pad, 0 6px); border-radius: var(--forge-radius-card, 4px); font-family: var(--font-log-tag, var(--font-mono)); }

/* Grouping (section 9) --------------------------------------- */
.ids-grp-label {
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--lr-text-muted, #6b7280);
  margin: var(--sp-space, 6px 0 4px);
}
.ids-grp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-space, 12px);
  margin-bottom: var(--sp-space, 14px);
}
.ids-grp-h {
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--sp-space, 5px);
}
.ids-grp-h--bad  { color: var(--lr-error, #f87171); }
.ids-grp-h--good { color: var(--lr-success, #4ade80); }
.ids-grp-hint {
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 9px;
  color: var(--lr-text-muted, #6b7280);
  padding: var(--sp-space, 6px 11px);
  border-left: 2px solid rgba(107,114,128,0.15);
  margin-top: 2px;
}
.ids-collapse-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space, 3px);
  border-radius: var(--forge-radius-card, 4px);
  padding: var(--sp-space, 1px 7px);
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 9px;
  font-weight: 700;
  margin-left: var(--sp-space, 4px);
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
}
.ids-collapse-pill--amber {
  background: rgba(197,139,58,0.15);
  border: 1px solid rgba(197,139,58,0.3);
  color: var(--warning);
}
.ids-collapse-pill--red {
  background: rgba(248,113,113,0.18);
  border: 1px solid rgba(248,113,113,0.4);
  color: var(--lr-error, #f87171);
}

/* Info button accent ----------------------------------------- */
.btn.btn-info-modal { color: var(--accent); }
.btn.btn-info-modal:hover { box-shadow: 0 0 0 1px rgba(197,139,58,0.25); }

/* Scrollbars (info modal panes) ------------------------------ */
.ids-toc::-webkit-scrollbar,
.ids-content::-webkit-scrollbar { width: 8px; }
.ids-toc::-webkit-scrollbar-thumb,
.ids-content::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.07);
  border-radius: var(--radius-ui, 4px);
}
.ids-toc::-webkit-scrollbar-thumb:hover,
.ids-content::-webkit-scrollbar-thumb:hover { background: rgba(197,139,58,0.25); }

/* Narrow viewport --------------------------------------------- */
@media (max-width: 760px) {
  .modal-body.modal-body--docs { grid-template-columns: 1fr; }
  .ids-toc {
    position: static;
    max-height: none;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: none;
    border-bottom: 1px solid var(--glass-border);
    padding: var(--sp-space, 8px 10px);
  }
  .ids-toc-link { white-space: nowrap; }
  .ids-content { max-height: none; }
  .ids-agrid, .ids-vsgrid, .ids-grp-grid { grid-template-columns: 1fr; }
}


/* ╔═══════════════════════════════════════════════════════════╗
   ║  LOG PANEL (PM2) — Terminal Dark                          ║
   ╚═══════════════════════════════════════════════════════════╝ */

.log-panel-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 700;
  background: rgba(0,0,0,0.55);
}

.log-panel-overlay.open { display: block; }

.log-panel {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: 480px;
  background: rgba(8,6,14,0.97);
  border-left: 1px solid rgba(56,189,248,0.2);
  display: flex;
  flex-direction: column;
  z-index: 701;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.4,0,0.2,1);
  box-shadow: -8px 0 32px rgba(0,0,0,0.6);
}

.log-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(56,189,248,0.5), transparent);
  pointer-events: none;
}

.log-panel.open { transform: translateX(0); }

.lp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-space, 12px 14px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
  background: rgba(255,255,255,0.02);
}

.lp-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--sp-space, 6px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lp-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 18px;
  transition: color var(--tr-fast);
}

.lp-close:hover { color: var(--hud-red); }

.lp-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-space, 10px 12px);
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 10px;
}

.lp-line {
  padding: var(--sp-space, 3px 4px);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  word-break: break-all;
  border-bottom: 1px solid rgba(255,255,255,0.02);
}

.lp-line.highlight {
  background: rgba(56,189,248,0.06);
  border-left: 2px solid rgba(56,189,248,0.4);
  color: var(--hud-cyan);
  padding-left: var(--sp-space, 6px);
}

.lp-empty, .lp-loading {
  color: var(--text-secondary);
  text-align: center;
  padding: var(--sp-space, 24px);
  font-size: 11px;
}


/* ╔═══════════════════════════════════════════════════════════╗
   ║  MULTI-SELECT DROPDOWNS                                   ║
   ╚═══════════════════════════════════════════════════════════╝ */

.ms-wrap { position: relative; }

.ms-btn {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  padding: var(--sp-space, 5px 10px);
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--tr-normal);
  text-align: left;
  height: 30px;
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.3);
  letter-spacing: 0.03em;
}

.ms-btn:hover, .ms-btn.ms-open {
  border-color: rgba(197,139,58,0.3);
  color: var(--text-primary);
}

.ms-btn.ms-has-value {
  border-color: rgba(197,139,58,0.45);
  color: var(--accent);
  background: rgba(197,139,58,0.08);
  box-shadow: 0 0 8px rgba(197,139,58,0.1);
}

.ms-dropdown {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 0;
  min-width: 190px;
  background: rgba(12,10,20,0.97);
  border: 1px solid rgba(197,139,58,0.25);
  border-radius: var(--radius-md);
  z-index: 500;
  box-shadow: var(--shadow-modal);
  margin-bottom: var(--sp-space, 4px);
  max-height: 280px;
  overflow-y: auto;
  animation: portal-open 0.18s ease both;
}

.ms-dropdown.open { display: block; }

.ms-item {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 8px);
  padding: var(--sp-space, 6px 12px);
  font-size: 11px;
  font-family: var(--font-log-tag, var(--font-mono));
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  transition: background var(--tr-fast);
  user-select: none;
}

.ms-item:last-child { border-bottom: none; }
.ms-item:hover { background: var(--accent-soft); color: var(--text-primary); }

.ms-item input[type="checkbox"] {
  accent-color: var(--mod-devtools);
  width: 12px;
  height: 12px;
  cursor: pointer;
  flex-shrink: 0;
}

.ms-item-count {
  margin-left: auto;
  font-size: 9px;
  color: var(--lr-text-muted, #6b7280);
  flex-shrink: 0;
}


/* ╔═══════════════════════════════════════════════════════════╗
   ║  COLUMN VISIBILITY DROPDOWN                               ║
   ╚═══════════════════════════════════════════════════════════╝ */

.col-vis-wrap { position: relative; }

/* [UPGRADE 1А.1] Portal layer — позицію задає JS (setupFloatingDropdown) */
.col-vis-dropdown {
  display: none;
  position: fixed;
  width: 180px;
  background: rgba(16,13,26,0.99);
  border: 1px solid rgba(197,139,58,0.28);
  border-radius: var(--radius-md);
  z-index: 1000;
  box-shadow: var(--shadow-modal);
  overflow: hidden;
  animation: portal-open 0.18s ease both;
}

.col-vis-dropdown.open { display: block; }

.cv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-space, 7px 12px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  background: rgba(255,255,255,0.02);
}

.cv-title {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--lr-text-muted, #6b7280);
  font-family: var(--font-log-tag, var(--font-mono));
}

.cv-reset {
  background: none;
  border: none;
  color: var(--lr-text-muted, #6b7280);
  font-size: 9px;
  font-family: var(--font-log-tag, var(--font-mono));
  cursor: pointer;
  padding: var(--sp-card-pad, 0);
  transition: color var(--tr-fast);
}

.cv-reset:hover { color: var(--accent); }

.cv-item {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 8px);
  padding: var(--sp-space, 6px 12px);
  font-size: 11px;
  font-family: var(--font-log-tag, var(--font-mono));
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  transition: background var(--tr-fast);
  user-select: none;
}

.cv-item:last-child { border-bottom: none; }
.cv-item:hover { background: var(--accent-soft); }
.cv-item input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }


/* ╔═══════════════════════════════════════════════════════════╗
   ║  TEMPLATE PREVIEW                                         ║
   ╚═══════════════════════════════════════════════════════════╝ */

.tmpl-preview-wrap {
  margin-top: var(--sp-space, 8px);
  padding: var(--sp-space, 8px 12px);
  background: rgba(197,139,58,0.04);
  border: 1px solid rgba(197,139,58,0.15);
  border-radius: var(--radius-sm);
}

.tmpl-preview-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--lr-text-muted, #6b7280);
  font-family: var(--font-log-tag, var(--font-mono));
  margin-bottom: var(--sp-space, 6px);
}

.tmpl-preview-params { display: flex; flex-wrap: wrap; gap: var(--sp-gap, 6px); margin-bottom: 8px; }

.tmpl-preview-field {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 4px);
  font-size: 10px;
  font-family: var(--font-log-tag, var(--font-mono));
}

.tmpl-preview-field-name { color: var(--accent); font-weight: 600; }

.tmpl-preview-input {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(197,139,58,0.25);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: var(--sp-space, 2px 6px);
  font-size: 10px;
  font-family: var(--font-log-tag, var(--font-mono));
  width: 90px;
  outline: none;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
}

.tmpl-preview-input:focus { border-color: rgba(197,139,58,0.5); }

.tmpl-preview-result {
  font-size: 11px;
  font-family: var(--font-log-tag, var(--font-mono));
  color: var(--text-secondary);
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-sm);
  padding: var(--sp-space, 6px 10px);
  word-break: break-word;
  min-height: 28px;
}


/* ╔═══════════════════════════════════════════════════════════╗
   ║  INLINE EDIT (expanded row)                               ║
   ╚═══════════════════════════════════════════════════════════╝ */

.rd-edit-section {
  grid-column: 1 / -1;
  margin-top: var(--sp-space, 4px);
  min-width: 0;
  overflow: hidden;
}

.rd-edit-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space, 5px);
  background: rgba(197,139,58,0.08);
  border: 1px solid rgba(197,139,58,0.25);
  border-radius: var(--radius-sm);
  color: var(--accent);
  padding: var(--sp-space, 4px 10px);
  font-size: 10px;
  font-family: var(--font-log-tag, var(--font-mono));
  cursor: pointer;
  transition: var(--tr-fast);
  letter-spacing: 0.06em;
}

.rd-edit-toggle:hover {
  background: rgba(197,139,58,0.15);
  box-shadow: 0 0 8px rgba(197,139,58,0.15);
}

.rd-edit-form {
  display: none;
  margin-top: var(--sp-space, 8px);
  background: rgba(197,139,58,0.04);
  border: 1px solid rgba(197,139,58,0.15);
  border-radius: var(--radius-sm);
  padding: var(--sp-space, 10px 14px);
  flex-direction: column;
  gap: var(--sp-space, 8px);
  max-width: 600px;
  box-sizing: border-box;
}

.rd-edit-form.open { display: flex; }

.rd-edit-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: center;
  gap: var(--sp-space, 8px);
  min-width: 0;
}

.rd-edit-lbl {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lr-text-muted, #6b7280);
  font-family: var(--font-log-tag, var(--font-mono));
}

.rd-edit-input, .rd-edit-textarea {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 11px;
  padding: var(--sp-space, 4px 8px);
  outline: none;
  transition: border-color var(--tr-fast);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
}

.rd-edit-input:focus, .rd-edit-textarea:focus { border-color: rgba(197,139,58,0.45); }
.rd-edit-textarea { resize: vertical; min-height: 52px; }

.rd-edit-actions {
  display: flex;
  gap: var(--sp-space, 6px);
  align-items: center;
  margin-top: 2px;
}

.rd-edit-save {
  background: linear-gradient(135deg, rgba(197,139,58,0.9), rgba(100,85,170,0.9));
  color: var(--text-bright);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--sp-space, 5px 14px);
  font-size: 10px;
  font-family: var(--font-log-tag, var(--font-mono));
  font-weight: 700;
  cursor: pointer;
  transition: var(--tr-fast);
  letter-spacing: 0.06em;
}

.rd-edit-save:hover { box-shadow: 0 0 12px rgba(197,139,58,0.25); }
.rd-edit-save:disabled { opacity: 0.4; cursor: not-allowed; }

.rd-edit-cancel {
  background: none;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  padding: var(--sp-space, 5px 12px);
  font-size: 10px;
  font-family: var(--font-log-tag, var(--font-mono));
  cursor: pointer;
  transition: var(--tr-fast);
}

.rd-edit-cancel:hover { border-color: rgba(255,255,255,0.14); }

.rd-edit-status { font-size: 10px; font-family: var(--font-log-tag, var(--font-mono)); margin-left: 6px; }
.rd-edit-status.ok  { color: var(--hud-green); }
.rd-edit-status.err { color: var(--hud-red); }


/* ╔═══════════════════════════════════════════════════════════╗
   ║  COVERAGE DOTS (Layer coverage)                           ║
   ╚═══════════════════════════════════════════════════════════╝ */

.coverage-dots {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space, 4px);
  margin-left: var(--sp-space, 4px);
}

.cov-dot {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-gap, 2px);
  font-size: 9px;
  font-family: var(--font-log-tag, var(--font-mono));
  padding: var(--sp-space, 1px 5px);
  border-radius: var(--radius-sm);
  border: 1px solid;
  opacity: 0.5;
}

.cov-dot.active { opacity: 1; }

.cov-dot-bot      { color: var(--accent);   border-color: rgba(197,139,58,0.35); background: rgba(197,139,58,0.08); }
.cov-dot-backend  { color: var(--hud-cyan); border-color: rgba(56,189,248,0.35);  background: rgba(56,189,248,0.06); }
.cov-dot-frontend { color: var(--hud-amber);border-color: rgba(197,139,58,0.35);  background: rgba(197,139,58,0.06); }


/* ╔═══════════════════════════════════════════════════════════╗
   ║  STALENESS / RESET / MISC                                 ║
   ╚═══════════════════════════════════════════════════════════╝ */

#resetFilters.has-active-filters {
  color: var(--hud-red);
  border-color: rgba(251,113,133,0.3);
}

#resetFilters.has-active-filters:hover {
  background: rgba(251,113,133,0.06);
  color: var(--hud-red);
}

.rd-updated-time {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space, 4px);
  font-size: 9px;
  font-family: var(--font-log-tag, var(--font-mono));
  color: var(--lr-text-muted, #6b7280);
  margin-top: var(--sp-space, 3px);
}


/* ╔═══════════════════════════════════════════════════════════╗
   ║  LOAD MORE / PAGINATION                                   ║
   ╚═══════════════════════════════════════════════════════════╝ */

.lr-load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-space, 16px 24px);
}

.btn-load-more {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(197,139,58,0.3);
  border-radius: var(--radius-sm);
  color: var(--accent);
  padding: var(--sp-space, 7px 24px);
  font-size: 11px;
  font-family: var(--font-log-tag, var(--font-mono));
  cursor: pointer;
  transition: var(--transition-premium);
  letter-spacing: 0.06em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.btn-load-more:hover {
  background: rgba(197,139,58,0.10);
  box-shadow: 0 0 16px rgba(197,139,58,0.15), inset 0 1px 0 rgba(255,255,255,0.04);
  transform: translateY(-1px);
}


/* ╔═══════════════════════════════════════════════════════════╗
   ║  DNA FINGERPRINT                                          ║
   ╚═══════════════════════════════════════════════════════════╝ */

.lr-dna-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space, 6px);
  margin-left: var(--sp-space, 10px);
  vertical-align: middle;
}

.lr-dna-svg { border-radius: var(--radius-sm); opacity: 0.75; vertical-align: middle; }

.lr-dna-badge {
  font-size: 9px;
  font-family: var(--font-log-tag, var(--font-mono));
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid rgba(197,139,58,0.3);
  border-radius: var(--radius-sm);
  padding: var(--sp-space, 1px 6px);
  animation: dna-pulse 2s ease infinite;
}

@keyframes dna-pulse { 0%,100%{opacity:1}50%{opacity:0.5} }


/* ╔═══════════════════════════════════════════════════════════╗
   ║  DEPTH EFFECTS — consistence з Hub                        ║
   ╚═══════════════════════════════════════════════════════════╝ */

.lr-stats-bar {
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,0.5),
    inset 0 -1px 0 rgba(0,0,0,0.25);
}

.lr-table-wrap {
  box-shadow:
    0 2px 10px rgba(0,0,0,0.42),
    0 0 0 1px rgba(255,255,255,0.04);
}

.lr-search {
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(0,0,0,0.3);
}


/* ╔═══════════════════════════════════════════════════════════╗
   ║  RESPONSIVE                                               ║
   ╚═══════════════════════════════════════════════════════════╝ */

@media (max-width: 1200px) {
  .controls { padding: var(--sp-card-pad, 10px 12px); }
  .table-wrap { padding: var(--sp-card-pad, 0 12px 12px); }
  .controls input[type="search"] { width: 140px; }
  .lr-stats-bar { gap: 0; }
  .level-bar-wrap { display: none; }
  .lr-pill { padding: var(--sp-card-pad, 8px 14px); min-width: 70px; }
  .pill-count { font-size: 16px; }
}

@media (max-width: 768px) {
  .lr-page { padding: var(--sp-card-pad, 0 12px); }
  .lr-stats-bar { flex-wrap: wrap; }
  .lr-pill { flex: 1; min-width: 60px; }
  .controls { padding: var(--sp-card-pad, 8px 12px); }
  .dt-signplate-wrap { display: none; }
  .group-grid { grid-template-columns: 1fr; }
  .cat-grid   { grid-template-columns: 1fr; }
  .file-grid  { grid-template-columns: 1fr; }
  .log-panel  { width: 100%; }
  .lm-main { flex-direction: column; }
  .lm-sidebar { width: 100%; max-height: 400px; }
}

/* ============================================================ */
/*=  LOG MAP — Карта логування                                  =*/
/* ============================================================ */

.log-map-view { display: none; padding: var(--sp-card-pad, 0 24px 24px); }
.log-map-view.active { display: block; }

/* --- Summary bar --- */
.lm-summary {
  margin-bottom: var(--sp-space, 16px);
}

.lm-summary-top {
  display: flex;
  gap: var(--sp-space, 16px);
  margin-bottom: var(--sp-space, 10px);
}

.lm-summary-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  padding: var(--sp-space, 8px 16px);
  min-width: 80px;
}

.lm-stat-num {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  font-family: var(--font-log-tag, var(--font-mono));
}

.lm-stat-label {
  font-size: 9px;
  color: var(--lr-text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.lm-level-bar {
  display: flex;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  margin-bottom: var(--sp-space, 10px);
}

.lm-level-seg { min-width: 2px; transition: width 0.3s ease; }

.lm-layer-cards {
  display: flex;
  gap: var(--sp-space, 10px);
}

.lm-layer-card {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--sp-space, 10px);
  background: rgba(0,0,0,0.25);
  border: 1px solid;
  border-radius: var(--radius-sm);
  padding: var(--sp-space, 10px 14px);
}

.lm-layer-card-info { display: flex; flex-direction: column; }

.lm-layer-card-name {
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-log-tag, var(--font-mono));
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.lm-layer-card-stats {
  font-size: 9px;
  color: var(--lr-text-muted, #6b7280);
  font-family: var(--font-log-tag, var(--font-mono));
}

/* --- Main layout --- */
.lm-main {
  display: flex;
  gap: var(--sp-space, 16px);
  align-items: flex-start;
}

.lm-tree { flex: 1; min-width: 0; }

.lm-sidebar {
  width: 280px;
  flex-shrink: 0;
  position: sticky;
  top: 10px;
}

/* --- Layer sections --- */
.lm-layer-section {
  margin-bottom: var(--sp-space, 12px);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.lm-layer-hdr {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 8px);
  padding: var(--sp-space, 8px 14px);
  cursor: pointer;
  background: rgba(0,0,0,0.3);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  user-select: none;
  transition: background 0.15s;
}

.lm-layer-hdr:hover { background: rgba(0,0,0,0.4); }

.lm-layer-hdr-name {
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-log-tag, var(--font-mono));
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.lm-layer-hdr-badge {
  font-size: 9px;
  color: var(--lr-text-muted, #6b7280);
  font-family: var(--font-log-tag, var(--font-mono));
  margin-left: auto;
}

.lm-expand-chevron {
  font-size: 8px;
  color: var(--lr-text-muted, #6b7280);
  transition: transform 0.2s ease;
  margin-left: var(--sp-space, 4px);
}

.lm-layer-hdr.open .lm-expand-chevron,
.lm-module-hdr.open .lm-expand-chevron,
.lm-file-hdr.open .lm-expand-chevron { transform: rotate(180deg); }

.lm-layer-body {
  display: none;
  padding: var(--sp-space, 6px);
}

.lm-layer-body.open { display: block; }

/* --- Module cards --- */
.lm-module-card {
  margin-bottom: var(--sp-space, 4px);
  border: 1px solid rgba(255,255,255,0.03);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.lm-module-hdr {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 6px);
  padding: var(--sp-space, 6px 10px);
  cursor: pointer;
  background: rgba(0,0,0,0.2);
  user-select: none;
  transition: background 0.15s;
}

.lm-module-hdr:hover { background: rgba(0,0,0,0.35); }

.lm-module-accent {
  width: 3px;
  height: 16px;
  border-radius: 2px;
  flex-shrink: 0;
}

.lm-module-name {
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-log-tag, var(--font-mono));
}

.lm-module-badge {
  font-size: 9px;
  color: var(--lr-text-muted, #6b7280);
  font-family: var(--font-log-tag, var(--font-mono));
  margin-left: auto;
  white-space: nowrap;
}

.lm-module-level-bar {
  display: flex;
  height: 3px;
  width: 50px;
  border-radius: 2px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  flex-shrink: 0;
}

.lm-module-body {
  display: none;
  padding: var(--sp-space, 2px 4px 4px 14px);
  border-top: 1px solid rgba(255,255,255,0.03);
}

.lm-module-body.open { display: block; }

/* --- File rows --- */
.lm-file-section { margin-bottom: 2px; }

.lm-file-hdr {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 5px);
  padding: var(--sp-space, 4px 8px);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 0.12s;
}

.lm-file-hdr:hover { background: rgba(197,139,58,0.06); }

.lm-file-name {
  font-size: 10px;
  font-family: var(--font-log-tag, var(--font-mono));
  color: var(--text-secondary);
}

.lm-file-badge {
  font-size: 9px;
  color: var(--lr-text-muted, #6b7280);
  font-family: var(--font-log-tag, var(--font-mono));
  margin-left: var(--sp-space, 4px);
}

.lm-file-levels {
  display: flex;
  gap: var(--sp-space, 4px);
  margin-left: auto;
}

.lm-file-level {
  font-size: 8px;
  font-family: var(--font-log-tag, var(--font-mono));
  font-weight: 600;
}

.lm-expand-sm { font-size: 7px; }

.lm-file-body {
  display: none;
  padding: var(--sp-space, 2px 0 4px 20px);
}

.lm-file-body.open { display: block; }

/* --- Entry rows --- */
.lm-entry-row {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 6px);
  padding: var(--sp-space, 2px 6px);
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.12s;
  font-size: 10px;
  font-family: var(--font-log-tag, var(--font-mono));
}

.lm-entry-row:hover { background: rgba(197,139,58,0.08); }

.lm-entry-level {
  font-size: 8px;
  font-weight: 700;
  min-width: 40px;
}

.lm-entry-id {
  color: var(--lr-text-muted, #6b7280);
  font-size: 9px;
  opacity: 0.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.lm-entry-label {
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.lm-entry-count {
  color: var(--accent);
  font-weight: 600;
  font-size: 9px;
  min-width: 16px;
  text-align: right;
}

/* --- Sidebar --- */
.lm-sidebar-section {
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: var(--radius-sm);
  padding: var(--sp-space, 12px);
  margin-bottom: var(--sp-space, 10px);
}

.lm-sidebar-title {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 6px);
  font-size: 10px;
  font-weight: 700;
  color: var(--lr-text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--sp-space, 10px);
  font-family: var(--font-log-tag, var(--font-mono));
}

.lm-cov-matrix {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 2px;
}

.lm-cov-matrix th {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lr-text-muted, #6b7280);
  font-family: var(--font-log-tag, var(--font-mono));
  padding: var(--sp-space, 3px 5px);
  text-align: center;
}

.lm-cov-matrix th:first-child { text-align: left; }

.lm-cov-matrix td {
  padding: var(--sp-space, 3px 5px);
  font-size: 9px;
  font-family: var(--font-log-tag, var(--font-mono));
  text-align: center;
  border-radius: 2px;
}

.lm-cov-matrix td:first-child {
  text-align: left;
  font-size: 9px;
}

.lm-sidebar-levels { display: flex; flex-direction: column; gap: 4px; }

.lm-sidebar-level {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 6px);
}

.lm-sidebar-level-pill {
  font-size: 8px;
  font-weight: 700;
  font-family: var(--font-log-tag, var(--font-mono));
  padding: var(--sp-space, 1px 5px);
  border: 1px solid;
  border-radius: var(--radius-ui, 0);
  min-width: 50px;
  text-align: center;
}

.lm-sidebar-level-num {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  font-family: var(--font-log-tag, var(--font-mono));
  min-width: 30px;
}

.lm-sidebar-level-pct {
  font-size: 9px;
  color: var(--lr-text-muted, #6b7280);
  font-family: var(--font-log-tag, var(--font-mono));
}

/* ============================================================ */
/*=  NAVIGATION CONSOLIDATION v2                                =*/
/*=  Злиття view bar + results bar + status footer              =*/
/* ============================================================ */

/* Активні фільтри badge */
.active-filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 14px;
  padding: var(--sp-card-pad, 0 4px);
  font-size: 9px;
  font-weight: 700;
  font-family: var(--font-log-tag, var(--font-mono));
  background: var(--hud-cyan);
  color: var(--bg-void);
  border-radius: var(--forge-radius-card, 4px);
  font-variant-numeric: tabular-nums;
  animation: badge-pulse 2s ease-in-out infinite;
  margin-left: var(--sp-space, 4px);
}

@keyframes badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,211,238,0.4); }
  50% { box-shadow: 0 0 0 3px rgba(34,211,238,0); }
}

/* Live search count inside input */
.search-count {
  position: absolute;
  right: 46px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  font-family: var(--font-log-tag, var(--font-mono));
  color: var(--lr-text-muted, #6b7280);
  background: rgba(0,0,0,0.5);
  padding: var(--sp-space, 1px 6px);
  border-radius: var(--forge-radius-card, 4px);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* Export dropdown */
.export-wrap { position: relative; }

/* [UPGRADE 1А.1] Portal layer — позицію задає JS (setupFloatingDropdown) */
.export-dropdown {
  display: none;
  position: fixed;
  min-width: 140px;
  background: rgba(16,13,26,0.99);
  border: 1px solid rgba(197,139,58,0.28);
  border-radius: var(--radius-md);
  z-index: 1000;
  box-shadow: var(--shadow-modal);
  overflow: hidden;
  animation: portal-open 0.18s ease both;
}

.export-dropdown.open { display: block; }

.export-item {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 8px);
  width: 100%;
  background: none;
  border: none;
  color: var(--text-secondary);
  padding: var(--sp-space, 8px 12px);
  font-size: 11px;
  font-family: var(--font-log-tag, var(--font-mono));
  cursor: pointer;
  text-align: left;
  transition: background var(--tr-fast), color var(--tr-fast);
}

.export-item:hover {
  background: rgba(197,139,58,0.12);
  color: var(--accent);
}

/* === НОВА NAV BAR (злиття view + results) === */
.lr-nav-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 14px);
  padding: var(--sp-space, 8px 24px);
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 24px,
      rgba(255,255,255,0.006) 24px,
      rgba(255,255,255,0.006) 25px
    ),
    linear-gradient(180deg, rgba(14,12,22,0.96), rgba(10,8,16,0.96));
  border-bottom: 1px solid rgba(255,255,255,0.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02), inset 0 -2px 6px rgba(0,0,0,0.3);
  flex-wrap: wrap;
  position: relative;
}

.nav-sep {
  width: 1px;
  height: 22px;
  background: linear-gradient(180deg, transparent, rgba(197,139,58,0.25), transparent);
  flex-shrink: 0;
}

/* View toggle group with sliding indicator */
.lr-nav-bar .view-toggle-group {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-gap, 2px);
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  padding: var(--sp-space, 3px);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.35);
}

.lr-nav-bar .btn-view-toggle {
  position: relative;
  z-index: 2;
  background: transparent;
  border: none;
  padding: var(--sp-space, 4px 12px);
  color: var(--lr-text-muted, #6b7280);
  font-size: 10px;
  font-family: var(--font-log-tag, var(--font-mono));
  letter-spacing: 0.06em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space, 5px);
  border-radius: var(--radius-sm);
  transition: color 0.2s;
  box-shadow: none;
}

.lr-nav-bar .btn-view-toggle:hover { color: var(--text-secondary); }

.lr-nav-bar .btn-view-toggle.active {
  color: var(--hud-cyan);
  background: transparent;
  box-shadow: none;
}

.view-slider {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: 0;
  background: linear-gradient(180deg, rgba(34,211,238,0.14), rgba(34,211,238,0.06));
  border: 1px solid rgba(34,211,238,0.3);
  border-radius: var(--radius-sm);
  transition: transform 0.32s cubic-bezier(0.4,0,0.2,1), width 0.32s cubic-bezier(0.4,0,0.2,1);
  pointer-events: none;
  box-shadow: 0 0 10px rgba(34,211,238,0.15), inset 0 1px 0 rgba(255,255,255,0.08);
  z-index: 1;
}

/* Utility indicators (лампочки) */
.utility-indicators {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 4px);
  flex-wrap: wrap;
}

.util-lamp {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space, 6px);
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  color: var(--lr-text-muted, #6b7280);
  padding: var(--sp-space, 4px 10px 4px 8px);
  font-size: 10px;
  font-family: var(--font-log-tag, var(--font-mono));
  cursor: pointer;
  transition: all 0.18s;
  letter-spacing: 0.03em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}

.util-lamp:hover {
  border-color: rgba(197,139,58,0.3);
  color: var(--text-secondary);
  background: rgba(197,139,58,0.05);
}

.util-lamp.active {
  border-color: rgba(197,139,58,0.4);
  color: var(--hud-amber);
  background: rgba(197,139,58,0.06);
  box-shadow: 0 0 8px rgba(197,139,58,0.12), inset 0 1px 0 rgba(255,255,255,0.03);
}

.lamp-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 4px currentColor;
}

.lamp-dot[data-lamp="ok"]     { background: var(--hud-green); color: var(--hud-green); }
.lamp-dot[data-lamp="warn"]   { background: var(--hud-amber); color: var(--hud-amber); }
.lamp-dot[data-lamp="danger"] { background: var(--hud-red);   color: var(--hud-red); }
.lamp-dot[data-lamp="info"]   { background: var(--hud-cyan);  color: var(--hud-cyan); }

.util-lamp.active .lamp-dot {
  animation: lamp-blink 1.6s ease-in-out infinite;
}

@keyframes lamp-blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px currentColor; }
  50% { opacity: 0.5; box-shadow: 0 0 2px currentColor; }
}

.lamp-icon { font-size: 13px !important; opacity: 0.7; }
.util-lamp:hover .lamp-icon, .util-lamp.active .lamp-icon { opacity: 1; }

.lamp-label { white-space: nowrap; }

.lamp-count {
  min-width: 18px;
  padding: var(--sp-card-pad, 0 5px);
  font-size: 9px;
  font-weight: 700;
  background: rgba(0,0,0,0.4);
  color: var(--text-primary);
  border-radius: var(--forge-radius-card, 4px);
  font-variant-numeric: tabular-nums;
  border: 1px solid rgba(255,255,255,0.04);
}

/* === STATUS FOOTER === */
.lr-status-footer {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 16px);
  padding: var(--sp-space, 5px 24px);
  background: linear-gradient(180deg, rgba(8,6,14,0.95), rgba(4,3,8,0.98));
  border-top: 1px solid rgba(197,139,58,0.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02), 0 -2px 8px rgba(0,0,0,0.5);
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--lr-text-muted, #6b7280);
  text-transform: uppercase;
  flex-wrap: wrap;
  position: sticky;
  bottom: 0;
  z-index: 50;
}

.status-block {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space, 5px);
  white-space: nowrap;
}

.status-key {
  color: rgba(197,139,58,0.5);
  font-weight: 700;
}

.status-val {
  color: var(--text-secondary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  /* Canon G-components: radial-gradient (industrial LED, не flat color) */
  background: radial-gradient(circle at 38% 35%, var(--text-bright, #f3efdc) 0%, var(--hud-green) 40%, var(--bg-base, #14100c) 100%);
  box-shadow: 0 0 6px var(--hud-green);
}

.status-dot--live { animation: lamp-blink 2s ease-in-out infinite; }

.status-spacer { flex: 1; }

.status-filters {
  color: var(--hud-cyan);
  font-weight: 600;
  letter-spacing: 0.06em;
}

.status-filters:empty { display: none; }

/* === TIER 3 POLISH === */

/* Однакова висота всіх control елементів */
.controls select,
.controls input,
.controls .btn,
.controls .btn-outline,
.controls .ms-btn,
.controls .btn-secondary-filters-toggle,
.controls .btn-adv-toggle,
.controls .regex-toggle,
.controls .btn-reset-filters,
.controls .btn-add-entry {
  height: 28px;
  box-sizing: border-box;
}

/* Focus rings */
.controls button:focus-visible,
.controls select:focus-visible,
.controls input:focus-visible,
.util-lamp:focus-visible,
.qlc-chip:focus-visible,
.btn-view-toggle:focus-visible {
  outline: 2px solid var(--hud-cyan);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Tabular nums для badges */
.notes-badge,
.lamp-count,
.active-filter-badge,
.pill-count { font-variant-numeric: tabular-nums; }

/* .secondary-filters-wrap — див. блок popover нижче (один SSOT) */

/* Category select з кольоровими маркерами (варіант через background) */
#filterCategory { padding-left: 14px; }

/* Chip анімації */
@keyframes chip-slide-in {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

.chip { animation: chip-slide-in 0.25s ease both; }

/* Reset анімація хвилею */
.controls.resetting select,
.controls.resetting input {
  animation: reset-wave 0.4s ease both;
}

@keyframes reset-wave {
  0% { opacity: 1; }
  50% { opacity: 0.3; filter: blur(1px); }
  100% { opacity: 1; filter: blur(0); }
}

/* Responsive */
@media (max-width: 900px) {
  .lr-nav-bar { gap: 8px; padding: var(--sp-card-pad, 6px 12px); }
  .utility-indicators { flex-wrap: wrap; }
  .util-lamp .lamp-label { display: none; }
  .lr-status-footer { padding: var(--sp-card-pad, 4px 12px); gap: var(--sp-gap, 10px); font-size: 8px; }
}

/* ============================================================ */
/*=  MASTHEAD CONSOLIDATION v3                                  =*/
/*=  Signplate + Hero Metric + Telemetry — єдиний блок          =*/
/* ============================================================ */

/* Breadcrumb */
.lr-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space, 7px);
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 11px;
  color: var(--lr-text-muted, #6b7280);
  letter-spacing: 0.06em;
  margin-left: var(--sp-space, 4px);
}

.lr-breadcrumb a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--tr-fast);
  padding: var(--sp-space, 2px 4px);
  border-radius: var(--radius-ui, 3px);
}

.lr-breadcrumb a:hover { color: var(--hud-cyan); background: rgba(34,211,238,0.05); }

.bc-sep { color: rgba(255,255,255,0.15); font-weight: 700; }

.bc-group {
  color: var(--lr-text-muted, #6b7280);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 9px;
  padding: var(--sp-space, 2px 6px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 2px;
}

.bc-current { color: var(--text-primary); font-weight: 600; }

/* Masthead layout */
.lr-masthead {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-space, 24px);
  padding: var(--sp-space, 6px 28px 14px);
  position: relative;
}

.lr-masthead-plate { margin: 0; }

/* DOC group badge + version tag */
.lr-group-badge {
  display: inline-block;
  font-size: 8px;
  font-family: var(--font-log-tag, var(--font-mono));
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: var(--sp-space, 1px 5px);
  margin-right: var(--sp-space, 6px);
  border: 1px solid rgba(197,139,58,0.35);
  color: var(--accent);
  background: rgba(197,139,58,0.08);
  border-radius: 2px;
  vertical-align: middle;
}

.lr-version-tag {
  display: inline-block;
  margin-left: var(--sp-space, 8px);
  font-size: 8px;
  font-family: var(--font-log-tag, var(--font-mono));
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: var(--sp-space, 1px 6px);
  color: var(--mod-pub);
  background: linear-gradient(180deg, rgba(212,162,74,0.12), rgba(212,162,74,0.05));
  border: 1px solid rgba(212,162,74,0.35);
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}

/* Hero metric */
.lr-hero-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-gap, 2px);
  padding: var(--sp-card-pad, 0 20px);
  min-width: 200px;
}

.lr-hero-num {
  font-size: 44px;
  font-weight: 800;
  font-family: var(--font-log-tag, var(--font-mono));
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.lr-hero-label {
  font-size: 9px;
  font-family: var(--font-log-tag, var(--font-mono));
  color: var(--lr-text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-top: 2px;
}

.lr-hero-levelbar {
  width: 100%;
  max-width: 240px;
  margin-top: var(--sp-space, 6px);
}

.lr-hero-levelbar .level-bar {
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  display: flex;
  background: rgba(255,255,255,0.04);
}

.lr-hero-levelbar .level-bar-legend {
  display: flex;
  justify-content: space-between;
  margin-top: var(--sp-space, 3px);
  font-size: 8px;
  font-family: var(--font-log-tag, var(--font-mono));
  color: var(--lr-text-muted, #6b7280);
  letter-spacing: 0.06em;
}

.lr-hero-meta {
  font-size: 9px;
  font-family: var(--font-log-tag, var(--font-mono));
  color: var(--lr-text-muted, #6b7280);
  margin-top: var(--sp-space, 4px);
  text-align: center;
  letter-spacing: 0.06em;
}

.lr-hero-meta:empty { display: none; }

/* Telemetry сегменти (Бот / Бекенд / Фронт / Категорій) */
.lr-telemetry {
  display: flex;
  gap: var(--sp-space, 8px);
  align-items: center;
}

.telemetry-seg {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space, 8px);
  padding: var(--sp-space, 6px 12px);
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.05);
  border-left-width: 2px;
  border-radius: var(--radius-sm);
  min-width: 90px;
  transition: all 0.18s;
  cursor: default;
}

.telemetry-seg:hover {
  background: rgba(197,139,58,0.06);
  border-color: rgba(197,139,58,0.3);
  transform: translateY(-1px);
}

.telemetry-seg--bot      { border-left-color: color-mix(in srgb, var(--lr-info, #60a5fa) 45%, var(--lr-warn, #fb923c)); }
.telemetry-seg--backend  { border-left-color: var(--lr-info, #60a5fa); }
.telemetry-seg--frontend { border-left-color: var(--accent-brass); }
.telemetry-seg--cats     { border-left-color: var(--accent); }

.tel-icon {
  font-size: 18px !important;
}

.telemetry-seg--bot      .tel-icon { color: color-mix(in srgb, var(--lr-info, #60a5fa) 45%, var(--lr-warn, #fb923c)); }
.telemetry-seg--backend  .tel-icon { color: var(--lr-info, #60a5fa); }
.telemetry-seg--frontend .tel-icon { color: var(--accent-brass); }
.telemetry-seg--cats     .tel-icon { color: var(--accent); }

.tel-body {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.tel-label {
  font-size: 8px;
  font-family: var(--font-log-tag, var(--font-mono));
  color: var(--lr-text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.tel-num {
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-log-tag, var(--font-mono));
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* ============================================================ */
/*=  CONTROLS STRIP v3                                           =*/
/*=  Однорядкова контрольна панель + sticky + popover secondary =*/
/* ============================================================ */

/* Sticky filter strip */
.controls {
  position: sticky;
  top: 0;
  z-index: 80;
  flex-wrap: nowrap;
  overflow: visible;
}

.controls::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 6px;
  background: linear-gradient(180deg, rgba(0,0,0,0.35), transparent);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}

.controls.is-stuck::after { opacity: 1; }

/* Secondary filters — popover з рядками [лейбл][контрол] (SSOT).
   position: fixed + координати задаються JS через getBoundingClientRect()
   кнопки #secondaryFiltersToggle. Це виводить popover з stacking-context
   батьківського `.controls` (sticky, z-index: 80), щоб popover не
   перекривався елементами з z-index > 80 у root context. */
.secondary-filters-wrap {
  position: fixed;
  min-width: 320px;
  display: none;
  flex-direction: column;
  gap: var(--sp-space, 10px);
  background: rgba(16,13,26,0.99);
  border: 1px solid rgba(197,139,58,0.28);
  border-radius: var(--radius-md);
  box-shadow: 0 14px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(197,139,58,0.08);
  padding: var(--sp-space, 12px 14px);
  z-index: 800;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.secondary-filters-wrap.open {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}

/* Рядок всередині popover: [лейбл] [контрол] */
.sf-row {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 10px);
}

.sf-row-label {
  flex: 0 0 84px;
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lr-text-muted, #6b7280);
}

.sf-row-control {
  flex: 1;
  min-width: 0;
}

/* Уніфікований вигляд для select і ms-btn у popover */
.sf-row-control.ms-wrap .ms-btn,
.sf-row-control.sf-select {
  width: 100%;
}

/* У popover .ms-dropdown відкривається донизу, а не вгору */
.secondary-filters-wrap .ms-dropdown {
  bottom: auto;
  top: 100%;
  margin-bottom: 0;
  margin-top: var(--sp-space, 4px);
}

/* Quick-filter chips по рівнях */
.quick-level-chips {
  display: inline-flex;
  gap: var(--sp-space, 3px);
  align-items: center;
  padding: var(--sp-pad, 2px);
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.35);
}

.qlc-chip {
  font-size: 9px;
  font-weight: 700;
  font-family: var(--font-log-tag, var(--font-mono));
  letter-spacing: 0.06em;
  padding: var(--sp-space, 3px 8px);
  border-radius: 2px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--lr-text-muted, #6b7280);
  cursor: pointer;
  transition: all 0.15s;
}

.qlc-chip:hover { border-color: rgba(255,255,255,0.1); }
.qlc-chip[data-level="INFO"]:not(.active):hover    { color: var(--hud-cyan);  background: rgba(56,189,248,0.07);   border-color: rgba(56,189,248,0.25); }
.qlc-chip[data-level="WARN"]:not(.active):hover    { color: var(--hud-amber); background: rgba(197,139,58,0.07);  border-color: rgba(197,139,58,0.25); }
.qlc-chip[data-level="ERROR"]:not(.active):hover   { color: var(--hud-red);   background: rgba(251,113,133,0.07); border-color: rgba(251,113,133,0.25); }
.qlc-chip[data-level="DEBUG"]:not(.active):hover   { color: var(--text-secondary); background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); }
.qlc-chip[data-level="SUCCESS"]:not(.active):hover { color: var(--hud-green); background: rgba(107,142,78,0.07);   border-color: rgba(107,142,78,0.25); }

.qlc-chip[data-level="INFO"].active    { color: var(--hud-cyan);  background: rgba(56,189,248,0.12);  border-color: rgba(56,189,248,0.4); box-shadow: 0 0 6px rgba(56,189,248,0.2); }
.qlc-chip[data-level="WARN"].active    { color: var(--hud-amber); background: rgba(197,139,58,0.12); border-color: rgba(197,139,58,0.4); box-shadow: 0 0 6px rgba(197,139,58,0.2); }
.qlc-chip[data-level="ERROR"].active   { color: var(--hud-red);   background: rgba(251,113,133,0.12); border-color: rgba(251,113,133,0.4); box-shadow: 0 0 6px rgba(251,113,133,0.2); }
.qlc-chip[data-level="DEBUG"].active   { color: var(--text-secondary); background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.15); }
.qlc-chip[data-level="SUCCESS"].active { color: var(--hud-green); background: rgba(107,142,78,0.1);   border-color: rgba(107,142,78,0.4);  box-shadow: 0 0 6px rgba(107,142,78,0.2); }

/* Density control group */
.density-group {
  display: inline-flex;
  padding: var(--sp-pad, 2px);
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.35);
}

.density-btn {
  background: transparent;
  border: none;
  color: var(--lr-text-muted, #6b7280);
  padding: var(--sp-space, 3px 6px);
  cursor: pointer;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.density-btn .material-symbols-outlined { font-size: 14px; }

.density-btn:hover { color: var(--text-secondary); background: rgba(255,255,255,0.03); }

.density-btn.active {
  color: var(--hud-cyan);
  background: rgba(56,189,248,0.1);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.4);
}

/* Table density modes */
.table-wrap.density-compact table td { padding: var(--sp-card-pad, 2px 8px) !important; font-size: 10px !important; }
.table-wrap.density-compact table td.id-tag-cell .id-tag-id { font-size: 8px; }
.table-wrap.density-compact table tr { height: auto; }

.table-wrap.density-spacious table td { padding: var(--sp-card-pad, 10px 12px) !important; font-size: 12px !important; }

/* Status view icon */
.status-view-icon {
  font-size: 11px !important;
  color: var(--hud-cyan);
  vertical-align: middle;
  margin: 0 2px;
}

/* Active view tab glow */
.lr-nav-bar .btn-view-toggle.active {
}

/* Pill hover highlight (L3.7) */
.lr-pill {
  transition: background 0.15s, border-color 0.15s;
  cursor: help;
}

.lr-pill:hover {
  background: rgba(197,139,58,0.05) !important;
  border-color: rgba(197,139,58,0.25) !important;
}

/* Dividers між pill (L3.3) */
.lr-pill + .lr-pill {
  margin-left: var(--sp-space, 4px);
  position: relative;
}

/* Pill dot gap (L3.4) */
.pill-dot { margin-right: 4px; }

/* Tabular-nums for all stats (L3.8) */
.lr-pill, .pill-count, .tel-num, .lr-hero-num, .lamp-count { font-variant-numeric: tabular-nums; }

/* Controls → chips gradient separator (L3.9) */
.filter-chips.has-chips {
  border-top: 1px solid rgba(197,139,58,0.12);
  box-shadow: 0 -1px 0 rgba(34,211,238,0.1), inset 0 1px 0 rgba(197,139,58,0.05);
}

/* Meta line під назвою */
.lr-hero-meta .hero-meta-staleness {
  color: var(--lr-text-muted, #6b7280);
  font-weight: 500;
}

/* Responsive masthead */
@media (max-width: 1100px) {
  .lr-masthead {
    grid-template-columns: 1fr;
    gap: var(--sp-space, 12px);
    padding: var(--sp-space, 6px 16px 12px);
  }
  .lr-masthead-plate { justify-self: center; }
  .lr-telemetry { justify-self: center; flex-wrap: wrap; justify-content: center; }
}

@media (max-width: 900px) {
  .lr-hero-num { font-size: 32px; }
  .telemetry-seg { min-width: 80px; padding: var(--sp-card-pad, 5px 10px); }
  .tel-num { font-size: 12px; }
  .quick-level-chips { display: none; }
}

/* ============================================================ */
/*=  MASTHEAD STRIP v4 — одна горизонтальна стрічка 56px        =*/
/* ============================================================ */

.lr-masthead--strip {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: var(--sp-space, 18px);
  padding: var(--sp-space, 8px 24px);
  min-height: 56px;
  background: linear-gradient(180deg, rgba(12,10,20,0.92), rgba(8,6,14,0.96));
  border-bottom: 1px solid rgba(197,139,58,0.1);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.02);
  position: relative;
}

/* Плоска компактна signplate без ланцюгів (А4) */
.lr-plate-compact {
  position: relative;
  padding: var(--sp-space, 6px 16px 6px 14px);
  background:
    linear-gradient(180deg, rgba(212,162,74,0.06), rgba(139,105,50,0.04)),
    rgba(18,14,24,0.85);
  border: 1px solid rgba(212,162,74,0.22);
  border-radius: var(--radius-ui, 4px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    0 2px 6px rgba(0,0,0,0.4);
  flex-shrink: 0;
  min-width: 240px;
}

/* Латунні клепки */
.lr-rivet {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--mod-pub) 10%, color-mix(in srgb, var(--accent-brass) 70%, var(--bg-void)) 60%, var(--border-dim) 100%);
  box-shadow: 0 0 2px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.2);
}
.lr-rivet--tl { top: 3px; left: 3px; }
.lr-rivet--tr { top: 3px; right: 3px; }
.lr-rivet--bl { bottom: 3px; left: 3px; }
.lr-rivet--br { bottom: 3px; right: 3px; }

.lr-plate-main {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 8px);
}

.lr-plate-title {
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--mod-pub);
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  line-height: 1;
}

.lr-plate-sub {
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 8px;
  letter-spacing: 0.1em;
  color: var(--lr-text-muted, #6b7280);
  text-transform: uppercase;
  margin-top: var(--sp-space, 3px);
  line-height: 1;
}

/* DOC badge з book-іконкою (L2.5) */
.lr-group-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space, 3px);
  font-size: 8px;
  font-family: var(--font-log-tag, var(--font-mono));
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: var(--sp-space, 2px 6px);
  border: 1px solid rgba(197,139,58,0.35);
  color: var(--accent);
  background: rgba(197,139,58,0.08);
  border-radius: 2px;
}

.lr-group-badge .material-symbols-outlined { font-size: 11px !important; }

.lr-version-tag {
  display: inline-block;
  font-size: 7px;
  font-family: var(--font-log-tag, var(--font-mono));
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: var(--sp-space, 1px 4px);
  color: var(--mod-pub);
  background: rgba(212,162,74,0.1);
  border: 1px solid rgba(212,162,74,0.3);
  border-radius: 2px;
  vertical-align: middle;
}

/* LCD-табло для hero-метрики (А5) */
.lr-lcd {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 10px);
  padding: var(--sp-space, 4px 14px);
  background: linear-gradient(180deg, var(--bg-void) 0%, var(--bg-void) 100%);
  border: 1px solid rgba(107,142,78,0.15);
  border-radius: var(--radius-ui, 3px);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.7),
    inset 0 0 12px rgba(107,142,78,0.08),
    0 0 8px rgba(107,142,78,0.05);
  flex-shrink: 0;
  min-width: 140px;
}

.lr-lcd-num {
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 26px;
  font-weight: 700;
  color: color-mix(in srgb, var(--mod-obs) 50%, var(--text-bright));
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.lr-lcd-side {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space, 3px);
  min-width: 90px;
}

.lr-lcd-label {
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 8px;
  color: rgba(106,255,158,0.6);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1;
}

.lr-lcd-levelbar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-gap, 2px);
}

.lr-lcd-levelbar .level-bar {
  height: 2px;
  border-radius: var(--radius-ui, 1px);
  background: rgba(255,255,255,0.05);
  overflow: hidden;
  display: flex;
  transition: height 0.2s;
}

.lr-lcd:hover .lr-lcd-levelbar .level-bar { height: 4px; }

.lr-lcd-levelbar .level-bar-legend {
  display: none;
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 7px;
  color: var(--lr-text-muted, #6b7280);
  letter-spacing: 0.06em;
}

.lr-lcd:hover .lr-lcd-levelbar .level-bar-legend { display: flex; gap: var(--sp-gap, 6px); }

/* Мікро telemetry — без текстових лейблів, тільки іконка+число */
.lr-telemetry--micro {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 4px);
  margin-left: auto;
}

.lr-telemetry--micro .telemetry-seg {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space, 5px);
  padding: var(--sp-space, 3px 8px);
  min-width: auto;
  border-left-width: 2px;
  border-radius: var(--radius-ui, 3px);
}

.lr-telemetry--micro .tel-body { display: none; }

.lr-telemetry--micro .tel-icon { font-size: 14px !important; }

.lr-telemetry--micro .tel-num {
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-log-tag, var(--font-mono));
  color: var(--text-primary);
}

/* Breadcrumb коротка (L2.10 / L2.10) */
.lr-breadcrumb--short {
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 11px;
  color: var(--lr-text-muted, #6b7280);
}

.lr-breadcrumb--short .bc-group {
  font-size: 9px;
  padding: var(--sp-space, 2px 6px);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* ============================================================ */
/*=  MERGED CONTROLS v4 — controls поглинає view + lamps       =*/
/* ============================================================ */

.controls--merged {
  gap: var(--sp-space, 10px) !important;
  padding: var(--sp-space, 6px 24px) !important;
  min-height: 44px;
}

/* Inline view-tabs (без текстових підписів) */
.view-toggle-group--inline {
  padding: var(--sp-pad, 2px) !important;
  gap: var(--sp-gap, 1px) !important;
}

.view-toggle-group--inline .btn-view-toggle {
  padding: var(--sp-space, 4px 8px) !important;
  min-width: 28px;
}

.view-toggle-group--inline .btn-view-toggle .material-symbols-outlined {
  font-size: 14px !important;
}

/* Utility lamps компактний inline */
.utility-indicators--inline {
  display: inline-flex;
  margin-left: var(--sp-space, 8px);
  padding: var(--sp-pad, 2px);
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: var(--radius-sm);
  gap: var(--sp-gap, 2px);
}

.util-lamp--compact {
  padding: 3px 6px !important;
  gap: var(--sp-space-1) !important;
  border: none !important;
  background: transparent !important;
  border-radius: 2px;
}

.util-lamp--compact:hover {
  background: rgba(197,139,58,0.12) !important;
  color: var(--accent) !important;
}

.util-lamp--compact .lamp-label { display: none; }

.util-lamp--compact .lamp-icon { font-size: 14px !important; }

.util-lamp--compact .lamp-count {
  font-size: 9px;
  padding: var(--sp-card-pad, 0 4px);
  min-width: 16px;
}

/* Density popover (L2.9) */
.density-wrap { position: relative; }

/* [UPGRADE 1А.1] Portal layer — позицію задає JS (setupFloatingDropdown) */
.density-popover {
  display: none;
  position: fixed;
  flex-direction: column;
  gap: var(--sp-gap, 2px);
  padding: var(--sp-space, 4px);
  background: rgba(16,13,26,0.99);
  border: 1px solid rgba(197,139,58,0.28);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-modal);
  min-width: 140px;
  z-index: 1000;
}

.density-popover.open { display: flex; }

.density-popover .density-btn {
  justify-content: flex-start;
  padding: var(--sp-space, 6px 10px);
  gap: var(--sp-space, 8px);
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 10px;
  color: var(--text-secondary);
  text-align: left;
}

.density-popover .density-btn:hover { color: var(--hud-cyan); background: rgba(56,189,248,0.08); }

.density-popover .density-btn.active {
  color: var(--hud-cyan);
  background: rgba(56,189,248,0.12);
  border-radius: 2px;
}

/* Actions-group (add + export уніфіковано) */
.actions-group {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-pad, 2px);
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.35);
}

.actions-group .btn,
.actions-group .btn-outline {
  border: none !important;
  background: transparent !important;
  padding: var(--sp-space, 4px 8px) !important;
  height: 24px !important;
  box-shadow: none !important;
  border-radius: 2px;
}

.actions-group .btn:hover,
.actions-group .btn-outline:hover {
  background: rgba(197,139,58,0.12) !important;
  color: var(--accent) !important;
  transform: none !important;
}

.actions-divider {
  width: 1px;
  height: 16px;
  background: rgba(255,255,255,0.08);
  margin: 0 2px;
}

/* Reset filters compact (без тексту) */
.btn-reset-filters {
  padding: var(--sp-space, 4px 8px) !important;
}

/* Staleness banner — прихований коли пустий (L2.1) */
.staleness-banner:empty { display: none !important; }
.staleness-banner:not([data-filled]) { display: none; }

/* Level/module filter chips pulse (L3.5) */
@keyframes filter-badge-scale {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.active-filter-badge[data-active="many"] {
  animation: filter-badge-scale 4s ease-in-out infinite;
}

/* Saved views прибираємо border при inline */
.controls--merged .saved-views-wrap .btn-outline {
  padding: var(--sp-space, 4px 8px) !important;
}

/* Responsive для merged controls */
@media (max-width: 1100px) {
  .lr-telemetry--micro { display: none; }
}

@media (max-width: 900px) {
  .controls--merged { gap: var(--sp-gap, 6px) !important; padding: var(--sp-card-pad, 6px 12px) !important; flex-wrap: wrap; }
  .lr-masthead--strip { flex-wrap: wrap; gap: var(--sp-gap, 10px); padding: var(--sp-card-pad, 6px 12px); }
  .utility-indicators--inline { flex-wrap: wrap; }
  .lr-lcd-num { font-size: 20px; }
  .lr-lcd-side { display: none; }
}

/* ============================================================ */
/*=  CONTROLS SPLIT v5 — дві смуги + glass капсула              =*/
/* ============================================================ */

/* Glass capsule навколо двох controls смуг (А3) */
.lr-controls-capsule {
  position: relative;
  background:
    linear-gradient(180deg, rgba(14,12,22,0.88), rgba(10,8,16,0.92));
  border: 1px solid rgba(197,139,58,0.14);
  border-radius: var(--radius-ui, 0);
  box-shadow:
    0 0 0 1px rgba(34,211,238,0.04),
    0 4px 20px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.03),
    inset 0 -1px 0 rgba(0,0,0,0.5);
  overflow: visible;
}

.lr-controls-capsule::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34,211,238,0.3) 30%, rgba(34,211,238,0.3) 70%, transparent);
  pointer-events: none;
}

/* Верхня nav смуга */
.controls--nav {
  position: relative !important;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.25);
  z-index: 2;
  padding: var(--sp-space, 8px 20px) !important;
  min-height: 44px;
}

/* Нижня utility смуга (тонша) */
.controls--utility {
  position: relative !important;
  top: auto !important;
  padding: var(--sp-space, 5px 20px) !important;
  min-height: 36px;
  background: rgba(0,0,0,0.25);
  box-shadow: var(--vr-input-inset);
  border-top: 1px solid rgba(197,139,58,0.08);
  z-index: 1;
}

/* View tabs з підписами (L2.1) */
.view-toggle-group--inline .btn-view-toggle {
  padding: var(--sp-space, 4px 10px) !important;
}

.view-tab-label {
  display: none;
  font-size: 10px;
  font-family: var(--font-log-tag, var(--font-mono));
  letter-spacing: 0.06em;
  margin-left: var(--sp-space, 4px);
}

.view-toggle-group--inline .btn-view-toggle:hover .view-tab-label,
.view-toggle-group--inline .btn-view-toggle.active .view-tab-label {
  display: inline;
}

/* Quick chips з ваговою ієрархією (L2.3) */
.qlc-chip--sm { font-size: 9px; padding: var(--sp-card-pad, 2px 6px) !important; }
.qlc-chip--md { font-size: 10px; padding: var(--sp-card-pad, 3px 7px) !important; }
.qlc-chip--lg { font-size: 11px; padding: var(--sp-card-pad, 3px 9px) !important; font-weight: 800 !important; }

/* Command-palette search (А5) */
.search-wrap--palette {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-ui, 4px);
  padding: var(--sp-card-pad, 0 8px 0 30px);
  min-width: 320px;
  max-width: 480px;
  flex: 1;
  transition: border-color 0.18s, box-shadow 0.18s;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.5);
}

.search-wrap--palette:focus-within {
  border-color: rgba(34,211,238,0.5);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.5), 0 0 0 3px rgba(34,211,238,0.1), 0 0 14px rgba(34,211,238,0.15);
}

.search-prefix-icon {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px !important;
  color: var(--lr-text-muted, #6b7280);
  pointer-events: none;
  transition: color 0.18s;
}

.search-wrap--palette:focus-within .search-prefix-icon {
  color: var(--hud-cyan);
}

.search-wrap--palette input[type="search"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  flex: 1;
  min-width: 0;
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 12px;
  padding: var(--sp-space, 6px 4px) !important;
  height: auto !important;
}

.search-wrap--palette input::placeholder {
  color: var(--lr-text-muted, #6b7280);
  font-style: normal;
  letter-spacing: 0.02em;
}

.ctrl-group--search {
  flex: 1;
  max-width: 480px;
}

/* Split controls — прибрати окремий stcky з controls (капсула sticky) */
.controls.controls--nav,
.controls.controls--utility {
  position: relative !important;
  top: auto !important;
}

/* ============================================================ */
/*=  LED DISPLAY v5 — зливні сегменти в masthead (А4)           =*/
/* ============================================================ */

.lr-led-display {
  display: inline-flex;
  align-items: stretch;
  background: linear-gradient(180deg, var(--bg-void) 0%, var(--bg-void) 100%);
  border: 1px solid rgba(212,162,74,0.2);
  border-radius: var(--radius-ui, 3px);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.75),
    inset 0 -1px 0 rgba(212,162,74,0.15),
    0 0 6px rgba(212,162,74,0.06);
  overflow: hidden;
  margin-left: auto;
  height: 40px;
}

.led-seg {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space, 6px);
  padding: var(--sp-card-pad, 0 10px);
  transition: background 0.15s;
  cursor: default;
}

.led-seg:hover { background: rgba(212,162,74,0.05); }

.led-ico {
  font-size: 14px !important;
  opacity: 0.85;
}

.led-seg--bot      .led-ico { color: color-mix(in srgb, var(--lr-info, #60a5fa) 50%, var(--lr-warn, #fb923c)); }
.led-seg--backend  .led-ico { color: color-mix(in srgb, var(--lr-info, #60a5fa) 70%, var(--text-bright)); }
.led-seg--frontend .led-ico { color: var(--mod-pub); }
.led-seg--cats     .led-ico { color: color-mix(in srgb, var(--lr-info, #60a5fa) 30%, var(--text-bright)); }

.led-num {
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}

.led-divider {
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(212,162,74,0.3) 25%,
    rgba(212,162,74,0.3) 75%,
    transparent 100%
  );
  box-shadow: 0 0 2px rgba(212,162,74,0.3);
  flex-shrink: 0;
}

/* ============================================================ */
/*=  POLISH v5                                                  =*/
/* ============================================================ */

/* L3.1 — LCD літерспейсинг */
.lr-lcd-num { letter-spacing: 0.06em; }

/* L3.2 — Уніфікована висота masthead блоків */
.lr-plate-compact { height: 40px; display: flex; flex-direction: column; justify-content: center; }
.lr-lcd { height: 40px; }

/* L3.3 — Drop shadow для LCD цифри */
.lr-lcd-num {
  filter: drop-shadow(0 2px 1px rgba(0,0,0,0.6));
}

/* L3.4 — Rivet tremor */
@keyframes rivet-shake {
  0%, 92%, 100% { transform: translate(0,0); }
  94% { transform: translate(-0.5px, 0.5px); }
  96% { transform: translate(0.5px, -0.3px); }
  98% { transform: translate(-0.2px, 0.2px); }
}

.lr-rivet--tl { animation: rivet-shake 11s ease-in-out infinite; animation-delay: 2s; }
.lr-rivet--tr { animation: rivet-shake 13s ease-in-out infinite; animation-delay: 5s; }
.lr-rivet--bl { animation: rivet-shake 17s ease-in-out infinite; animation-delay: 8s; }
.lr-rivet--br { animation: rivet-shake 15s ease-in-out infinite; animation-delay: 11s; }

/* L3.6 — Tabular nums в LED */
.led-num { font-variant-numeric: tabular-nums; }

/* L3.7 — Hover glow plate */
.lr-plate-compact {
  transition: box-shadow 0.2s, border-color 0.2s;
}

.lr-plate-compact:hover {
  border-color: rgba(212,162,74,0.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    0 0 10px rgba(212,162,74,0.15),
    0 2px 6px rgba(0,0,0,0.4);
}

.lr-plate-compact:hover .lr-rivet {
  filter: brightness(1.15);
}

/* L3.8 — Micro-divider для masthead telemetry */
.lr-led-display .led-seg > * + * { margin-left: 3px; }

/* L3.9 — Bracket focus style */
.lr-controls-capsule button:focus-visible,
.lr-controls-capsule input:focus-visible,
.lr-controls-capsule select:focus-visible {
  outline: none;
  box-shadow:
    0 -2px 0 0 var(--hud-cyan),
    0 2px 0 0 var(--hud-cyan),
    -2px 0 0 0 var(--hud-cyan),
    2px 0 0 0 var(--hud-cyan),
    0 0 0 4px rgba(34,211,238,0.08);
  position: relative;
}

/* L3.10 — Mobile compact */
@media (max-width: 600px) {
  .lr-lcd-num { font-size: 18px; }
  .lr-plate-sub { display: none; }
  .lr-led-display { height: 32px; }
  .led-num { font-size: 11px; }
  .controls--nav { padding: var(--sp-card-pad, 6px 10px) !important; }
  .controls--utility { padding: var(--sp-card-pad, 4px 10px) !important; flex-wrap: wrap; }
  .search-wrap--palette { min-width: 180px; }
  .qlc-chip--sm, .qlc-chip--md, .qlc-chip--lg { font-size: 9px !important; padding: var(--sp-card-pad, 2px 5px) !important; }
}

/* ============================================================ */
/*=  L2 ENHANCEMENTS v5                                          =*/
/* ============================================================ */

/* L2.2 — Keyboard hints під actions */
.actions-group .btn::after,
.actions-group .btn-outline::after,
.btn-reset-filters::after {
  content: attr(data-key);
  display: block;
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 7px;
  color: var(--lr-text-muted, #6b7280);
  letter-spacing: 0.08em;
  margin-top: 1px;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  opacity: 0.6;
}

.actions-group .btn:not([data-key])::after,
.actions-group .btn-outline:not([data-key])::after,
.btn-reset-filters:not([data-key])::after {
  display: none;
}

/* L2.5 — LCD odometer анімація через клас */
.lr-lcd-num.lr-lcd-num--loading {
  animation: odometer-flicker 0.4s ease;
}

@keyframes odometer-flicker {
  0%, 100% { opacity: 1; }
  10%, 30%, 50%, 70%, 90% { opacity: 0.6; }
}

/* L2.6 — LED-seg hover tooltip через title (native) */

/* L2.8 — Collapse masthead button */
.lr-masthead-collapse {
  position: absolute;
  right: 8px;
  top: 4px;
  background: transparent;
  border: none;
  color: var(--lr-text-muted, #6b7280);
  cursor: pointer;
  padding: var(--sp-space, 2px 4px);
  border-radius: 2px;
  transition: all 0.15s;
}

.lr-masthead-collapse:hover { background: rgba(197,139,58,0.1); color: var(--accent); }

.lr-masthead--collapsed {
  min-height: 0;
  padding: var(--sp-card-pad, 0 24px) !important;
  overflow: hidden;
  max-height: 0;
}

/* L2.10 — Active lamp pulse */
.util-lamp--has-alerts .lamp-dot {
  animation: lamp-blink 1s ease-in-out infinite !important;
}

@keyframes odometer-roll {
  from { transform: translateY(-20%); opacity: 0.5; }
  to { transform: translateY(0); opacity: 1; }
}

/* ============================================================ */
/*=  DASHBOARD RAIL v6 — єдиний brass-корпус через всю ширину   =*/
/* ============================================================ */

/* Masthead як суцільна рейка з внутрішніми вставками (А1) */
.lr-masthead--strip {
  padding: var(--sp-space, 6px 20px) !important;
  background:
    linear-gradient(180deg,
      rgba(26,20,36,0.96) 0%,
      rgba(14,10,22,0.98) 50%,
      rgba(10,6,16,1) 100%) !important;
  border: 1px solid rgba(212,162,74,0.18);
  border-left: none;
  border-right: none;
  box-shadow:
    inset 0 1px 0 rgba(212,162,74,0.15),
    inset 0 -1px 0 rgba(0,0,0,0.6),
    inset 0 2px 8px rgba(0,0,0,0.4),
    0 6px 18px rgba(212,162,74,0.04) !important;
  position: relative;
}

/* Amber glow зверху (А3) */
.lr-masthead--strip::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -16px;
  height: 16px;
  background: linear-gradient(180deg, rgba(212,162,74,0.08), transparent);
  pointer-events: none;
  z-index: 0;
}

/* Plate і LCD — вставки в одну рейку (А1) */
.lr-plate-compact {
  background:
    linear-gradient(180deg, rgba(50,38,20,0.5), rgba(22,16,10,0.6)) !important;
  border: 1px solid rgba(212,162,74,0.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.5),
    0 1px 3px rgba(0,0,0,0.5);
}

.lr-lcd {
  border: 1px solid rgba(212,162,74,0.2) !important;
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,0.8),
    inset 0 0 14px rgba(107,142,78,0.1),
    0 0 6px rgba(107,142,78,0.05),
    0 1px 0 rgba(212,162,74,0.08) !important;
}

.lr-led-display {
  border: 1px solid rgba(212,162,74,0.22) !important;
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.75),
    inset 0 -1px 0 rgba(212,162,74,0.12),
    0 1px 2px rgba(0,0,0,0.5),
    0 0 6px rgba(212,162,74,0.05) !important;
}

/* ============================================================ */
/*=  CONTROLS MONOLITH — один корпус з внутрішнім divider (А4) =*/
/* ============================================================ */

.lr-controls-capsule {
  border: 1px solid rgba(197,139,58,0.2) !important;
  border-top: none !important;
  background:
    linear-gradient(180deg,
      rgba(18,14,26,0.94) 0%,
      rgba(12,8,18,0.96) 100%) !important;
  box-shadow:
    0 0 0 1px rgba(34,211,238,0.04),
    0 6px 20px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.03),
    inset 0 -2px 8px rgba(0,0,0,0.5) !important;
  position: relative;
}

/* Внутрішній divider між смугами */
.controls--nav {
  border-bottom: 1px solid rgba(197,139,58,0.08) !important;
  box-shadow:
    inset 0 -1px 0 rgba(0,0,0,0.6),
    inset 0 -2px 0 rgba(34,211,238,0.04),
    inset 0 -4px 8px rgba(0,0,0,0.25) !important;
}

.controls--utility {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.35)) !important;
  border-top: 1px solid rgba(255,255,255,0.02) !important;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.3),
    inset 0 -1px 0 rgba(0,0,0,0.5) !important;
}

/* ============================================================ */
/*=  VIEW TABS AS CONSOLE SWITCHES (А2)                         =*/
/* ============================================================ */

.lr-controls-capsule .view-toggle-group--inline {
  padding: var(--sp-space, 3px) !important;
  background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.4)) !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.6),
    inset 0 -1px 0 rgba(255,255,255,0.03) !important;
  border-radius: var(--radius-ui, 3px) !important;
}

.lr-controls-capsule .btn-view-toggle {
  padding: var(--sp-space, 5px 10px) !important;
  border-radius: 2px !important;
  background: linear-gradient(180deg, rgba(40,32,56,0.4), rgba(20,14,30,0.6)) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.3) !important;
  transition: all 0.18s;
}

.lr-controls-capsule .btn-view-toggle:hover {
  background: linear-gradient(180deg, rgba(56,40,80,0.5), rgba(30,20,46,0.7)) !important;
  border-color: rgba(197,139,58,0.3) !important;
}

.lr-controls-capsule .btn-view-toggle.active {
  background: linear-gradient(180deg, rgba(197,139,58,0.15), rgba(184,110,20,0.2)) !important;
  border-color: rgba(197,139,58,0.4) !important;
  color: var(--hud-amber) !important;
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.6),
    inset 0 -1px 0 rgba(197,139,58,0.2),
    0 0 10px rgba(197,139,58,0.15) !important;
}

/* Приховуємо старий view-slider щоб не дублювати */
.lr-controls-capsule .view-slider { display: none; }

/* ============================================================ */
/*=  CHIPS AS PUNCHED CARDS (А5)                                =*/
/* ============================================================ */

.filter-chips.has-chips .chip {
  counter-increment: chip-counter;
  position: relative;
  background:
    linear-gradient(180deg, rgba(197,139,58,0.1), rgba(100,85,170,0.08)) !important;
  border: 1px solid rgba(197,139,58,0.3) !important;
  padding-right: var(--sp-space, 18px) !important;
  font-family: var(--font-log-tag, var(--font-mono)) !important;
}

.filter-chips.has-chips .chip::before {
  content: counter(chip-counter, decimal-leading-zero);
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 8px;
  color: var(--lr-text-muted, #6b7280);
  letter-spacing: 0.08em;
  margin-right: var(--sp-space, 4px);
  opacity: 0.55;
  padding: var(--sp-space, 1px 3px);
  background: rgba(0,0,0,0.3);
  border-radius: 2px;
}

.filter-chips.has-chips { counter-reset: chip-counter; }

/* Рваний правий край (перфорація карти) */
.filter-chips.has-chips .chip::after {
  content: '';
  position: absolute;
  right: 2px;
  top: 3px;
  bottom: 3px;
  width: 6px;
  background-image: radial-gradient(circle, rgba(0,0,0,0.5) 1px, transparent 1.5px);
  background-size: 3px 4px;
  opacity: 0.6;
  pointer-events: none;
}

/* ============================================================ */
/*=  L2 ENHANCEMENTS                                            =*/
/* ============================================================ */

/* L2.2 — LCD показує filtered/total */
.lr-lcd-num--filtered {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-space, 4px);
}

.lr-lcd-num--filtered .lcd-filtered {
  color: color-mix(in srgb, var(--mod-obs) 50%, var(--text-bright));
}

.lr-lcd-num--filtered .lcd-separator {
  color: rgba(106,255,158,0.4);
  font-size: 0.7em;
}

.lr-lcd-num--filtered .lcd-total {
  color: rgba(106,255,158,0.4);
  font-size: 0.6em;
}

/* L2.7 — Progress ring на orphan lamp */
.util-lamp--has-alerts .lamp-dot[data-lamp="danger"] {
  position: relative;
}

#orphanScanBtn {
  position: relative;
}

#orphanScanBtn.has-ring::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border: 1px solid transparent;
  border-top-color: var(--hud-red);
  border-right-color: var(--hud-amber);
  border-radius: var(--radius-ui, 3px);
  opacity: 0.5;
  pointer-events: none;
}

/* L2.9 — Search suggestions з kbd-hints */
.sugg-item {
  position: relative;
}

.sugg-item::after {
  content: '↵';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 10px;
  color: var(--lr-text-muted, #6b7280);
  padding: var(--sp-space, 1px 4px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 2px;
  opacity: 0;
  transition: opacity 0.15s;
}

.sugg-item:hover::after { opacity: 0.6; }

/* L2.10 — LED-seg hover розкриває рівні */
.led-seg { cursor: pointer; }

.led-seg-expanded {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(14,10,20,0.98);
  border: 1px solid rgba(212,162,74,0.25);
  border-radius: var(--radius-ui, 3px);
  padding: var(--sp-space, 6px 10px);
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 10px;
  white-space: nowrap;
  box-shadow: 0 8px 16px rgba(0,0,0,0.6);
  z-index: 100;
  pointer-events: none;
}

.led-seg:hover .led-seg-expanded { display: block; }

.lr-led-display { position: relative; }

/* ============================================================ */
/*=  L3 POLISH                                                  =*/
/* ============================================================ */

/* L3.1 — Mono baseline LCD */
.lr-lcd-num {
  font-feature-settings: "tnum" 1, "lnum" 1;
  line-height: 1 !important;
  display: inline-block;
}

/* L3.2 — LED tremor */
@keyframes led-tremor {
  0%, 94%, 100% { transform: translate(0,0); filter: brightness(1); }
  95% { transform: translate(0.5px, 0); filter: brightness(1.15); }
  96% { transform: translate(-0.3px, 0.2px); filter: brightness(0.95); }
  97% { transform: translate(0.2px, -0.1px); filter: brightness(1.1); }
  98% { transform: translate(0,0); }
}

.led-seg:nth-child(1) { animation: led-tremor 18s ease-in-out infinite; animation-delay: 3s; }
.led-seg:nth-child(3) { animation: led-tremor 22s ease-in-out infinite; animation-delay: 9s; }
.led-seg:nth-child(5) { animation: led-tremor 26s ease-in-out infinite; animation-delay: 14s; }
.led-seg:nth-child(7) { animation: led-tremor 20s ease-in-out infinite; animation-delay: 18s; }

/* L3.3 — Smart gap (уніфікований ритм) */
.controls--merged { gap: var(--sp-gap, 6px) !important; }
.controls--merged .ctrl-sep { margin: 0 6px !important; }
.controls--merged .ctrl-sep--glow { margin: 0 8px !important; }
.controls--merged .ctrl-group { gap: var(--sp-gap, 6px) !important; }

/* L3.4 — Active view-tab підсилена glow */
.lr-controls-capsule .btn-view-toggle.active {
}

/* L3.5 — Staged animation delays */
.lr-lcd-num { animation: lcd-fade-in 0.6s ease 0.1s both; }
.lr-rivet--tl { animation-delay: 2.2s !important; }
.lr-rivet--tr { animation-delay: 5.2s !important; }
.lr-controls-capsule { animation: capsule-fade-in 0.4s ease 0.2s both; }

@keyframes lcd-fade-in {
  from { opacity: 0; filter: blur(4px); }
  to { opacity: 1; filter: blur(0); }
}

@keyframes capsule-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* L3.7 — Заглушка pct пульсує */
@keyframes pct-placeholder {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

.pct-loading { animation: pct-placeholder 1.4s ease-in-out infinite; color: var(--hud-amber); }

/* L3.8 — Mono fallback */
.lr-plate-sub, .led-num, .tel-num {
  font-family: 'IBM Plex Mono', 'JetBrains Mono', 'Cascadia Code', 'Consolas', monospace !important;
}

/* L3.9 — Шов між masthead і capsule */
.lr-controls-capsule::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(212,162,74,0.3) 20%,
    rgba(34,211,238,0.3) 80%,
    transparent 100%);
  pointer-events: none;
  z-index: 3;
}

/* L3.10 — Active lamp як втиснена кнопка */
.util-lamp.active {
  background: rgba(0,0,0,0.5) !important;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.7),
    inset 0 -1px 0 rgba(197,139,58,0.15),
    0 0 6px rgba(197,139,58,0.1) !important;
}

.util-lamp--has-alerts {
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.5),
    inset 0 0 8px rgba(251,113,133,0.12),
    0 0 8px rgba(251,113,133,0.15) !important;
}

/* L2.1 — Auto-focus flash */
@keyframes auto-focus-flash {
  0% { box-shadow: inset 0 2px 6px rgba(0,0,0,0.5), 0 0 0 4px rgba(34,211,238,0.3), 0 0 20px rgba(34,211,238,0.4); }
  100% { box-shadow: inset 0 2px 6px rgba(0,0,0,0.5); }
}

.search-wrap--palette:has(input.auto-focus-flash),
.auto-focus-flash {
  animation: auto-focus-flash 0.6s ease-out;
}

/* L2.5 — Keyboard overlay */
.kbd-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: kbd-overlay-in 0.2s ease;
}

@keyframes kbd-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.kbd-overlay-box {
  background: linear-gradient(180deg, rgba(18,14,26,0.98), rgba(12,8,18,1));
  border: 1px solid rgba(197,139,58,0.3);
  border-radius: var(--forge-radius-card, 4px);
  padding: var(--sp-card-pad, 0);
  min-width: 600px;
  max-width: 720px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(34,211,238,0.08);
}

.kbd-overlay-header {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 8px);
  padding: var(--sp-space, 14px 20px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.kbd-close {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--lr-text-muted, #6b7280);
  font-size: 20px;
  cursor: pointer;
  padding: var(--sp-card-pad, 0 6px);
}

.kbd-close:hover { color: var(--hud-red); }

.kbd-overlay-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-space, 20px);
  padding: var(--sp-space, 20px);
}

.kbd-col-title {
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 9px;
  color: rgba(212,162,74,0.7);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--sp-space, 10px);
  padding-bottom: var(--sp-space, 4px);
  border-bottom: 1px solid rgba(212,162,74,0.15);
}

.kbd-row {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 6px);
  padding: var(--sp-space, 5px 0);
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 11px;
  color: var(--text-secondary);
}

.kbd-row kbd {
  display: inline-block;
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 10px;
  background: linear-gradient(180deg, rgba(40,30,56,0.8), rgba(20,14,30,0.9));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-ui, 3px);
  padding: var(--sp-space, 2px 6px);
  color: var(--hud-cyan);
  min-width: 20px;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 1px 2px rgba(0,0,0,0.4);
}

.kbd-row span { margin-left: 4px; }

/* L2.8 — Breadcrumb view suffix */
.bc-view-suffix {
  color: var(--hud-cyan);
  font-weight: 600;
  padding: var(--sp-space, 2px 6px);
  background: rgba(34,211,238,0.08);
  border: 1px solid rgba(34,211,238,0.2);
  border-radius: 2px;
  font-size: 9px;
}

/* Responsive overlay */
@media (max-width: 700px) {
  .kbd-overlay-box { min-width: 90vw; }
  .kbd-overlay-grid { grid-template-columns: 1fr; gap: 12px; padding: var(--sp-card-pad, 14px); }
}

/* ═══════════════════════════════════════════════════════════════════
   [UPGRADE 1А.2] Атмосферне освітлення сторінки Реєстру логів.
   Теплий амбер-конус падає згори від LCD-лічильника, холодний ціан
   збирається знизу біля таблиці — як диспетчерське приміщення.
   Scoped до .lr-page + isolation:isolate щоб атмосфера не провалювалась
   у глобальний body::before з металевою текстурою (devtools-style-adc.css).
   ═══════════════════════════════════════════════════════════════════ */
.lr-page {
  position: relative;
  isolation: isolate;
}

.lr-page::before,
.lr-page::after {
  content: '';
  position: fixed;
  pointer-events: none;
  z-index: -1;
  left: 0;
  right: 0;
}

.lr-page::before {
  top: 0;
  height: 440px;
  background: radial-gradient(
    ellipse 960px 420px at 50% -40px,
    rgba(197,139,58,0.12) 0%,
    rgba(197,139,58,0.05) 38%,
    transparent 75%
  );
}

.lr-page::after {
  bottom: 0;
  height: 480px;
  background: radial-gradient(
    ellipse 1500px 520px at 50% 115%,
    rgba(34,211,238,0.09) 0%,
    rgba(34,211,238,0.03) 52%,
    transparent 85%
  );
}

/* ═══════════════════════════════════════════════════════════════════
   [UPGRADE 1А.3] Металеві панелі тулбара.
   Brushed-steel ледь помітна шліфовка, 4 латунні заклепки по кутах
   капсули, посилена тінь — тулбар відчувається як фізична панель
   операторського пульту, а не як flat div.
   ═══════════════════════════════════════════════════════════════════ */
.lr-controls-capsule {
  box-shadow:
    0 0 0 1px rgba(34,211,238,0.04),
    0 8px 28px rgba(0,0,0,0.55),
    0 16px 48px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 -2px 8px rgba(0,0,0,0.55) !important;
}

.lr-controls-capsule::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: var(--radius-ui, inherit);
  background:
    /* 4 латунні заклепки по кутах капсули */
    radial-gradient(circle 2.5px at 10px 10px,
      rgba(255,220,130,0.55) 0%,
      rgba(180,130,40,0.7) 50%,
      rgba(40,25,10,0.85) 80%,
      transparent 100%),
    radial-gradient(circle 2.5px at calc(100% - 10px) 10px,
      rgba(255,220,130,0.55) 0%,
      rgba(180,130,40,0.7) 50%,
      rgba(40,25,10,0.85) 80%,
      transparent 100%),
    radial-gradient(circle 2.5px at 10px calc(100% - 10px),
      rgba(255,220,130,0.55) 0%,
      rgba(180,130,40,0.7) 50%,
      rgba(40,25,10,0.85) 80%,
      transparent 100%),
    radial-gradient(circle 2.5px at calc(100% - 10px) calc(100% - 10px),
      rgba(255,220,130,0.55) 0%,
      rgba(180,130,40,0.7) 50%,
      rgba(40,25,10,0.85) 80%,
      transparent 100%),
    /* Brushed-steel: надтонкі вертикальні лінії */
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.014) 0 1px,
      transparent 1px 3px
    );
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
}

/* ═══════════════════════════════════════════════════════════════════
   [UPGRADE 1А.5] LCD-монстр — збільшена цифра лічильника з м'яким
   glow-ом та рідким flicker'ом кожні 7 секунд, як на VT220-терміналі.
   ═══════════════════════════════════════════════════════════════════ */
.lr-lcd-num {
  font-size: 44px !important;
  font-weight: 900 !important;
  letter-spacing: 0.06em !important;
  line-height: 1 !important;
  animation: lr-lcd-flicker 7s ease-in-out infinite;
}

@keyframes lr-lcd-flicker {
  0%, 92%, 100% { opacity: 1; }
  92.5%         { opacity: 0.82; }
  93%           { opacity: 1; }
  94%           { opacity: 0.95; }
  95%           { opacity: 1; }
}

/* [UPGRADE L3.7] Повага до prefers-reduced-motion — вимикаємо
   атмосферні анімації коли ОС просить менше руху. */
@media (prefers-reduced-motion: reduce) {
  .lr-lcd-num { animation: none; }
  .lr-signplate { animation: none; }
  .dt-lamp--green, .dt-lamp--amber { animation: none; }
  .dt-lamp--dim.active { animation: none; }
  .util-lamp.active .lamp-dot { animation: none; }
  .lr-pill { animation-duration: 0.01ms !important; }
  .level-bar-seg { transition: none; }
  .lr-detail-open, .lr-row-phase, .lr-row-fresh { animation: none; }
  .lr-bulkbar-rise { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   [UPGRADE L2.5] Лампи рівня у рядках таблиці.
   Тонка вертикальна лампа зліва від кожного рядка з кольором рівня.
   ERROR червона, WARN амбер, INFO ціан, SUCCESS зелена, DEBUG нейтр.
   ═══════════════════════════════════════════════════════════════════ */
tbody tr[data-level] { position: relative; }
tbody tr[data-level] > td:first-child { position: relative; }
tbody tr[data-level] > td:first-child::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 3px;
  border-radius: 2px;
  opacity: 0.85;
  pointer-events: none;
}
tbody tr[data-level="ERROR"]   > td:first-child::before { background: var(--hud-red);   box-shadow: 0 0 8px rgba(251,113,133,0.7); }
tbody tr[data-level="WARN"]    > td:first-child::before { background: var(--hud-amber); box-shadow: 0 0 8px rgba(197,139,58,0.7); }
tbody tr[data-level="INFO"]    > td:first-child::before { background: var(--hud-cyan);  box-shadow: 0 0 6px rgba(34,211,238,0.5); }
tbody tr[data-level="SUCCESS"] > td:first-child::before { background: var(--hud-green); box-shadow: 0 0 6px rgba(107,142,78,0.5); }
tbody tr[data-level="DEBUG"]   > td:first-child::before { background: rgba(255,255,255,0.22); }
tbody tr[data-level="MIXED"]   > td:first-child::before {
  background: linear-gradient(180deg, var(--hud-cyan), var(--hud-amber));
  box-shadow: 0 0 6px rgba(197,139,58,0.5);
}

/* ═══════════════════════════════════════════════════════════════════
   [UPGRADE L2.2] Індикатор вибраного рядка — ціанова смуга та тон.
   ═══════════════════════════════════════════════════════════════════ */
tbody tr.bulk-selected { background: rgba(34,211,238,0.05) !important; }
tbody tr.bulk-selected > td:first-child::after {
  content: '';
  position: absolute;
  left: -4px;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--hud-cyan);
  box-shadow:
    0 0 10px rgba(34,211,238,0.8),
    0 0 20px rgba(34,211,238,0.4);
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════
   [UPGRADE L2.10] Хлібні крихти у тулбарі — яскравіші мікро-лейбли
   "дії" / "фільтри" / "пошук" як навігаційні точки-станції.
   ═══════════════════════════════════════════════════════════════════ */
.ctrl-group[data-label]::before {
  font-size: 9px !important;
  letter-spacing: 0.16em !important;
  font-weight: 700 !important;
  color: rgba(34,211,238,0.65) !important;
  text-transform: uppercase;
  top: -13px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   [UPGRADE L2.1] Єдина поява випадашок портального шару —
   однаковий 180мс fade+slide жест для ВСІХ dropdown'ів.
   ═══════════════════════════════════════════════════════════════════ */
@keyframes lr-dropdown-rise {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ms-dropdown.open,
.saved-views-dropdown.open,
.col-vis-dropdown.open,
.density-popover.open,
.export-dropdown.open,
.search-suggestions.open {
  animation: lr-dropdown-rise 0.18s ease-out both;
}
.density-popover.open {
  animation: lr-dropdown-rise-inverse 0.18s ease-out both;
}
@keyframes lr-dropdown-rise-inverse {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════
   [UPGRADE L2.7] Липка перша інфо-колонка (ID+TAG) при
   горизонтальному скролі таблиці — контекст завжди під очима.
   ═══════════════════════════════════════════════════════════════════ */
tbody td.id-tag-cell,
thead th[data-col="id-tag"] {
  position: sticky;
  left: 0;
  z-index: 6;
  background: rgb(16,13,26);
}
thead th[data-col="id-tag"] {
  background: rgb(18,15,28);
  box-shadow: 2px 0 8px rgba(0,0,0,0.35);
}
tbody td.id-tag-cell {
  box-shadow: 2px 0 8px rgba(0,0,0,0.25);
}

/* ═══════════════════════════════════════════════════════════════════
   [UPGRADE L3.1] Моноширинні цифри у лічильниках та колонках з
   числами — не скачуть шириною при зміні.
   ═══════════════════════════════════════════════════════════════════ */
.lr-lcd-num,
.led-num,
.tel-num,
.lamp-count,
.qlc-chip,
.ms-item-count,
.cv-item,
.pill-count,
.active-filter-badge,
td.id-tag-cell,
tbody td[data-col="file"] {
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════
   [UPGRADE L3.4] Пружинна поява — легкий overshoot замість лінійного
   зʼявлення для dropdown'ів портального шару.
   ═══════════════════════════════════════════════════════════════════ */
.ms-dropdown.open,
.saved-views-dropdown.open,
.col-vis-dropdown.open,
.export-dropdown.open,
.search-suggestions.open {
  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   [UPGRADE L3.5] Пульсуючий фокус пошуку — повільне дихання glow'ом
   поки активний фокус на пошуковому інпуті.
   ═══════════════════════════════════════════════════════════════════ */
@keyframes lr-search-breath {
  0%, 100% { box-shadow: 0 0 0 1px rgba(34,211,238,0.15), 0 0 0 rgba(34,211,238,0); }
  50%      { box-shadow: 0 0 0 1px rgba(34,211,238,0.35), 0 0 12px rgba(34,211,238,0.25); }
}
.search-wrap:focus-within {
  animation: lr-search-breath 2.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

/* ═══════════════════════════════════════════════════════════════════
   [UPGRADE L3.10] Справжній курсив у нотатках — моноширинний шрифт
   має italic face, читається як рукописна примітка, не slanted-fake.
   ═══════════════════════════════════════════════════════════════════ */
td.notes-cell {
  font-style: italic;
  font-feature-settings: 'calt' on, 'ss01' on;
  color: rgba(205,200,190,0.7);
}

/* Reduced-motion respect для нових анімацій */
@media (prefers-reduced-motion: reduce) {
  .search-wrap:focus-within,
  .ms-dropdown.open,
  .saved-views-dropdown.open,
  .col-vis-dropdown.open,
  .density-popover.open,
  .export-dropdown.open,
  .search-suggestions.open { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   [UPGRADE L2.3] Floating action bar — inline-бар стає плаваючим
   внизу екрана з glow-рамкою ціанового кольору.
   ═══════════════════════════════════════════════════════════════════ */
.bulk-action-bar {
  position: fixed !important;
  bottom: 20px !important;
  left: 50% !important;
  transform: translateX(-50%);
  z-index: 1500 !important;
  margin: 0 !important;
  background: rgba(16,13,26,0.99) !important;
  border: 1px solid rgba(34,211,238,0.5) !important;
  border-radius: var(--radius-md) !important;
  box-shadow:
    0 14px 36px rgba(0,0,0,0.7),
    0 0 26px rgba(34,211,238,0.28) !important;
  padding: 10px 16px !important;
  animation: lr-bulkbar-rise 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes lr-bulkbar-rise {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════
   [UPGRADE L2.4] Рідкий слайдер у view-toggle — плавне ковзання
   з легким overshoot'ом між вкладками.
   ═══════════════════════════════════════════════════════════════════ */
.view-slider {
  transition: transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   [UPGRADE L3.6] Літери-підказки на кнопках з data-key — micro-бейдж
   у правому верхньому куті, видимий при hover.
   ═══════════════════════════════════════════════════════════════════ */
button[data-key] {
  position: relative;
}
button[data-key]::after {
  content: attr(data-key);
  position: absolute;
  top: 1px;
  right: 1px;
  font-size: 7px;
  font-family: var(--font-log-tag, var(--font-mono));
  font-weight: 700;
  color: rgba(34,211,238,0.75);
  background: rgba(0,0,0,0.6);
  padding: var(--sp-space, 1px 3px);
  border-radius: 2px;
  letter-spacing: 0.06em;
  line-height: 1.2;
  opacity: 0;
  transition: opacity 0.18s;
  pointer-events: none;
}
button[data-key]:hover::after,
button[data-key]:focus-visible::after { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════
   [UPGRADE L3.2] Оптичне центрування material-symbols у кнопках —
   math-центрування виглядає зсунутим, поправляю на 0.5px для
   оптичного балансу.
   ═══════════════════════════════════════════════════════════════════ */
.btn .material-symbols-outlined,
.btn-outline .material-symbols-outlined,
.btn-view-toggle .material-symbols-outlined,
.density-btn .material-symbols-outlined,
.export-item .material-symbols-outlined {
  vertical-align: middle;
  position: relative;
  top: -0.5px;
}

/* ═══════════════════════════════════════════════════════════════════
   [UPGRADE 1А.1] Гравірована пультова пластина — thead стає
   пресованою латунно-пурпуровою дошкою з втисненими літерами.
   ═══════════════════════════════════════════════════════════════════ */
thead th {
  background:
    linear-gradient(180deg,
      rgba(40,32,58,0.98) 0%,
      rgba(22,18,34,0.98) 100%) !important;
  color: rgba(245,226,200,0.85) !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,0.75),
    0 -1px 0 rgba(255,220,170,0.04);
  border-top: 1px solid rgba(220,180,120,0.16) !important;
  border-bottom: 2px solid rgba(0,0,0,0.6) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,220,170,0.07),
    inset 0 -2px 4px rgba(0,0,0,0.4);
  transition: padding 0.25s ease, box-shadow 0.25s ease;
}

/* ═══════════════════════════════════════════════════════════════════
   [UPGRADE L2.6] Метаморфоза thead при глибокому скролі — стискається
   і світиться ціановою лінією. Клас lr-thead-stuck ставить JS.
   ═══════════════════════════════════════════════════════════════════ */
body.lr-thead-stuck thead th {
  padding-top: var(--sp-space, 4px) !important;
  padding-bottom: var(--sp-space, 4px) !important;
  font-size: 10px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,220,170,0.07),
    inset 0 -2px 4px rgba(0,0,0,0.4),
    0 0 18px rgba(34,211,238,0.3) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   [UPGRADE L2.2] Ембосовані інсигнії шарів — round metal stamp під
   іконкою у клітинці шару.
   ═══════════════════════════════════════════════════════════════════ */
tbody td[data-col="layer"] {
  position: relative;
}
tbody td[data-col="layer"]::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 30%,
    rgba(245,226,180,0.12) 0%,
    rgba(140,90,40,0.08) 55%,
    rgba(20,12,6,0.35) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255,220,170,0.13),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    0 1px 2px rgba(0,0,0,0.45);
  pointer-events: none;
  z-index: 0;
}
tbody td[data-col="layer"] > * {
  position: relative;
  z-index: 1;
}

/* ═══════════════════════════════════════════════════════════════════
   [UPGRADE L2.3] Крихти bot › observer › welcome-sent у колонці модуля.
   ═══════════════════════════════════════════════════════════════════ */
.mod-cat-module::after {
  content: ' \203A';
  color: rgba(197,139,58,0.5);
  font-weight: 400;
  margin-left: var(--sp-space, 3px);
}
.mod-cat-category {
  color: rgba(180,170,160,0.55) !important;
  font-size: 9px !important;
  letter-spacing: 0.02em;
}

/* ═══════════════════════════════════════════════════════════════════
   [UPGRADE L2.5] Сплячий вигляд старих записів — grayscale + desatur.
   ═══════════════════════════════════════════════════════════════════ */
tr.row-stale {
  opacity: 0.45 !important;
  filter: grayscale(0.45) saturate(0.7);
  transition: opacity 0.18s, filter 0.18s;
}
tr.row-stale:hover {
  opacity: 0.85 !important;
  filter: grayscale(0.1) saturate(1);
}

/* ═══════════════════════════════════════════════════════════════════
   [UPGRADE L3.3] Латунна окантовка активних quick-level chip.
   ═══════════════════════════════════════════════════════════════════ */
.qlc-chip.active {
  background-image: linear-gradient(
    135deg,
    rgba(255,220,130,0.12) 0%,
    transparent 35%,
    transparent 65%,
    rgba(255,220,130,0.18) 100%
  );
  border-color: rgba(220,180,110,0.55) !important;
  box-shadow:
    0 0 0 1px rgba(220,180,110,0.3),
    0 0 10px rgba(255,220,130,0.22),
    inset 0 1px 0 rgba(255,220,170,0.15) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   [UPGRADE L3.5] Лігатури у шляхах файлів — друкарські зв'язки.
   ═══════════════════════════════════════════════════════════════════ */
tbody td[data-col="file"] {
  font-feature-settings: 'calt' on, 'liga' on, 'ss03' on;
  font-variant-ligatures: common-ligatures;
}

/* ═══════════════════════════════════════════════════════════════════
   [UPGRADE L3.8] Fade-out маска на кінці обрізаного шаблона — чітко
   видно що текст продовжується, повний через tooltip на title.
   ═══════════════════════════════════════════════════════════════════ */
td.template-cell {
  text-overflow: ellipsis;
  position: relative;
}
td.template-cell::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 22px;
  background: linear-gradient(90deg, transparent, rgba(14,12,22,0.95) 85%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s;
}
tr:hover td.template-cell::after { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════
   [UPGRADE L3.1] Підсвічений якорь — коли клік скопіював hash
   або відкрилась сторінка з #log-id.
   ═══════════════════════════════════════════════════════════════════ */
@keyframes lr-anchor-pulse {
  0%, 100% { background: transparent; }
  25%      { background: rgba(34,211,238,0.18); }
  55%      { background: rgba(34,211,238,0.08); }
}
tr.lr-anchored {
  animation: lr-anchor-pulse 1.6s ease-out;
  box-shadow: inset 3px 0 0 var(--hud-cyan);
}

/* ═══════════════════════════════════════════════════════════════════
   [UPGRADE L3.7] Pulse тільки щойно доданим рядкам 3 секунди.
   ═══════════════════════════════════════════════════════════════════ */
@keyframes lr-row-fresh-pulse {
  0%   { box-shadow: inset 0 0 0 2px rgba(34,211,238,0.6); background: rgba(34,211,238,0.12); }
  100% { box-shadow: inset 0 0 0 2px transparent; background: transparent; }
}
tr.lr-row-fresh {
  animation: lr-row-fresh-pulse 3s ease-out;
}

/* ═══════════════════════════════════════════════════════════════════
   [UPGRADE L2.8] Контекстне меню правим кліком — темний попап з діями.
   ═══════════════════════════════════════════════════════════════════ */
.lr-context-menu {
  position: fixed;
  display: none;
  z-index: 2000;
  min-width: 210px;
  background: rgba(16,13,26,0.99);
  border: 1px solid rgba(197,139,58,0.35);
  border-radius: var(--radius-sm);
  box-shadow: 0 14px 36px rgba(0,0,0,0.7);
  padding: var(--sp-space, 4px);
  animation: lr-dropdown-rise 0.16s ease-out both;
}
.lr-context-menu.open { display: block; }
.lr-ctx-item {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 10px);
  width: 100%;
  padding: var(--sp-space, 7px 12px);
  background: none;
  border: none;
  color: var(--text-secondary);
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 11px;
  letter-spacing: 0.02em;
  text-align: left;
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.12s, color 0.12s;
}
.lr-ctx-item:hover,
.lr-ctx-item:focus-visible {
  background: rgba(34,211,238,0.1);
  color: var(--hud-cyan);
  outline: none;
}
.lr-ctx-item .material-symbols-outlined { font-size: 14px; opacity: 0.8; }
.lr-ctx-sep {
  height: 1px;
  margin: var(--sp-space, 3px 6px);
  background: rgba(197,139,58,0.18);
}

/* ═══════════════════════════════════════════════════════════════════
   [UPGRADE L3.9] prefers-contrast: more — товщі рамки, жирніший текст.
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-contrast: more) {
  .lr-controls-capsule,
  .secondary-filters-wrap,
  .ms-dropdown,
  .density-popover,
  .col-vis-dropdown,
  .export-dropdown,
  .saved-views-dropdown,
  .search-suggestions,
  .bulk-action-bar,
  .lr-context-menu,
  thead th {
    border-width: 2px !important;
  }
  .qlc-chip,
  .qlc-chip.active,
  tbody tr[data-level] > td:first-child::before {
    filter: brightness(1.2) contrast(1.15);
  }
  td, th, button, input, select, .mod-cat-module, .id-tag-id {
    font-weight: 600;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   [UPGRADE 1А.4] Зонування по глибині — тулбар отримує додаткову
   foreground-тінь (через lr-controls-capsule вже зроблено у 1А.3),
   background — тонкий гранж-zeрно overlay через fixed shield.
   ═══════════════════════════════════════════════════════════════════ */
.lr-page::after {
  /* Існуючий ціан touman від 1А.2 лишається, додаємо поверх м'який grain */
  background:
    radial-gradient(
      ellipse 1500px 520px at 50% 115%,
      rgba(34,211,238,0.09) 0%,
      rgba(34,211,238,0.03) 52%,
      transparent 85%
    ),
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,0.006) 0 1px,
      transparent 1px 2px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(0,0,0,0.012) 0 1px,
      transparent 1px 3px
    );
}

/* ============================================================ */
/*=  🗺️ MIGHTY MAP v2.0 — Карта логування                      =*/
/*=  Нові компоненти: banner, capsule, rail, gauges, palette    =*/
/* ============================================================ */

/* --- Fallback Banner --- */
.lm-fallback-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 10px);
  padding: var(--sp-space, 10px 14px);
  margin-bottom: var(--sp-space, 10px);
  background: linear-gradient(90deg, rgba(180,85,60,0.15), rgba(160,48,48,0.22));
  border: 1px solid rgba(180,85,60,0.45);
  border-radius: var(--forge-radius-card, 4px);
  color: var(--text-bright);
  font-size: 12px;
  font-family: var(--font-log-tag, var(--font-mono));
  box-shadow: 0 0 18px rgba(180,85,60,0.12) inset;
}
.lm-fb-icon { font-size: 18px; color: var(--lr-warn, #fb923c); }
.lm-fb-text { flex: 1; }
.lm-fb-text b { color: color-mix(in srgb, var(--lr-warn, #fb923c) 50%, var(--text-bright)); font-weight: 700; }
.lm-fb-btn {
  padding: var(--sp-space, 4px 10px);
  font-size: 11px;
  font-family: var(--font-log-tag, var(--font-mono));
  background: rgba(180,85,60,0.25);
  border: 1px solid rgba(180,85,60,0.5);
  color: var(--text-bright);
  border-radius: var(--radius-ui, 4px);
  cursor: pointer;
  transition: all 0.15s;
}
.lm-fb-btn:hover { background: rgba(180,85,60,0.4); color: var(--text-bright); }
.lm-fb-btn-ghost { background: transparent; }

/* --- Context Capsule --- */
.lm-context-capsule {
  margin-bottom: var(--sp-space, 10px);
  background: rgba(58,51,50,0.4);
  border: 1px solid rgba(194,139,46,0.25);
  border-radius: var(--forge-radius-card, 4px);
  overflow: hidden;
}
.lm-cc-head {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 10px);
  padding: var(--sp-space, 8px 14px);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.lm-cc-head:hover { background: rgba(194,139,46,0.08); }
.lm-cc-head.open { background: rgba(194,139,46,0.12); }
.lm-cc-icon { font-size: 16px; color: var(--accent-brass); }
.lm-cc-title { font-weight: 700; font-size: 12px; color: var(--text-bright); letter-spacing: 0.5px; }
.lm-cc-meta { flex: 1; font-size: 11px; color: var(--lr-text-muted, #6b7280); font-family: var(--font-log-tag, var(--font-mono)); }
.lm-cc-chevron { font-size: 18px; color: var(--accent-brass); transition: transform 0.2s; }
.lm-cc-head.open .lm-cc-chevron { transform: rotate(180deg); }
.lm-cc-body {
  padding: var(--sp-space, 10px 14px 12px);
  border-top: 1px solid rgba(194,139,46,0.2);
}
.lm-cc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-space, 10px);
  margin-bottom: var(--sp-space, 10px);
}
.lm-cc-cell {
  background: rgba(42,35,34,0.5);
  border: 1px solid rgba(197,139,58,0.15);
  border-radius: var(--radius-ui, 4px);
  padding: var(--sp-space, 8px 10px);
  font-size: 11px;
  font-family: var(--font-log-tag, var(--font-mono));
}
.lm-cc-cell-title {
  font-weight: 700;
  color: var(--text-bright);
  margin-bottom: var(--sp-space, 6px);
  font-size: 11px;
  letter-spacing: 0.3px;
}
.lm-cc-entry {
  margin: 2px 0;
  color: var(--lr-text-muted, #6b7280);
  line-height: 1.4;
}
.lm-cc-entry code {
  color: var(--accent-brass);
  background: rgba(42,35,34,0.6);
  padding: var(--sp-space, 1px 4px);
  border-radius: var(--radius-ui, 3px);
  font-size: 10px;
}
.lm-cc-actions {
  display: flex;
  gap: var(--sp-space, 8px);
  padding-top: var(--sp-space, 8px);
  border-top: 1px dashed rgba(197,139,58,0.15);
}
.lm-cc-action {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space, 5px);
  padding: var(--sp-space, 5px 10px);
  background: rgba(197,139,58,0.15);
  border: 1px solid rgba(197,139,58,0.4);
  color: var(--text-bright);
  border-radius: var(--radius-ui, 4px);
  font-size: 11px;
  font-family: var(--font-log-tag, var(--font-mono));
  cursor: pointer;
  transition: all 0.15s;
}
.lm-cc-action:hover { background: rgba(197,139,58,0.3); }
.lm-cc-action .material-symbols-outlined { font-size: 13px; }

/* --- Quick-Scan Rail --- */
.lm-quickscan-rail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-space, 6px);
  padding: var(--sp-space, 8px 12px);
  margin-bottom: var(--sp-space, 10px);
  background: rgba(48,41,40,0.4);
  border: 1px solid rgba(197,139,58,0.18);
  border-radius: var(--forge-radius-card, 4px);
}
.lm-qs-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space, 4px);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-brass);
  font-family: var(--font-log-tag, var(--font-mono));
  letter-spacing: 0.5px;
  margin-right: var(--sp-space, 6px);
}
.lm-qs-label .material-symbols-outlined { font-size: 14px; }
.lm-qs-btn {
  padding: var(--sp-space, 4px 10px);
  font-size: 11px;
  font-family: var(--font-log-tag, var(--font-mono));
  background: rgba(42,35,34,0.6);
  border: 1px solid rgba(197,139,58,0.25);
  color: var(--text-bright);
  border-radius: var(--radius-ui, 4px);
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space, 4px);
}
.lm-qs-btn:hover { background: rgba(197,139,58,0.2); border-color: rgba(197,139,58,0.5); }
.lm-qs-btn-accent {
  background: rgba(194,139,46,0.2);
  border-color: rgba(194,139,46,0.5);
  color: var(--accent-brass-hover);
}
.lm-qs-btn-accent:hover { background: rgba(194,139,46,0.35); }
.lm-qs-btn .material-symbols-outlined { font-size: 13px; }

/* --- Heat Rail --- */
.lm-heat-rail {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-gap, 2px);
  height: 36px;
  padding: var(--sp-space, 4px 8px);
  margin-bottom: var(--sp-space, 10px);
  background: linear-gradient(180deg, rgba(22,18,17,0.6), rgba(42,35,34,0.4));
  border: 1px solid rgba(197,139,58,0.15);
  border-radius: var(--forge-radius-card, 4px);
  overflow-x: auto;
}
.lm-heat-car {
  height: 28px;
  min-width: 8px;
  position: relative;
  border-radius: 2px;
  border: 1px solid rgba(0,0,0,0.3);
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
.lm-heat-car--err  { background: linear-gradient(180deg, color-mix(in srgb, var(--lr-error, #f87171) 25%, transparent),    var(--lr-error, #f87171)); }
.lm-heat-car--warn { background: linear-gradient(180deg, color-mix(in srgb, var(--accent-brass) 25%, transparent), var(--accent-brass)); }
.lm-heat-car--ok   { background: linear-gradient(180deg, color-mix(in srgb, var(--mod-obs) 25%, transparent), var(--mod-obs)); }
.lm-heat-car:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 8px rgba(255,255,255,0.15);
}
.lm-heat-tick {
  position: absolute;
  bottom: -3px; left: 50%;
  width: 2px; height: 3px;
  background: rgba(197,139,58,0.4);
  transform: translateX(-50%);
}
.lm-heat-empty { color: var(--lr-text-muted, #6b7280); font-size: 11px; font-style: italic; }

/* --- Toolbar --- */
.lm-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-space, 10px);
  padding: var(--sp-space, 8px 12px);
  margin-bottom: var(--sp-space, 10px);
  background: rgba(48,41,40,0.5);
  border: 1px solid rgba(197,139,58,0.2);
  border-radius: var(--forge-radius-card, 4px);
}
.lm-mode-switch {
  display: inline-flex;
  background: rgba(22,18,17,0.5);
  border: 1px solid rgba(197,139,58,0.2);
  border-radius: var(--forge-radius-card, 4px);
  padding: var(--sp-pad, 2px);
}
.lm-mode-btn {
  padding: var(--sp-space, 5px 12px);
  font-size: 11px;
  font-family: var(--font-log-tag, var(--font-mono));
  background: transparent;
  border: none;
  color: var(--lr-text-muted, #6b7280);
  border-radius: var(--radius-ui, 4px);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space, 5px);
  transition: all 0.15s;
}
.lm-mode-btn:hover { color: var(--text-bright); background: rgba(197,139,58,0.12); }
.lm-mode-btn.lm-mode-active {
  background: linear-gradient(180deg, rgba(194,139,46,0.25), rgba(194,139,46,0.18));
  color: var(--accent-brass-hover);
  box-shadow: 0 0 8px rgba(194,139,46,0.25) inset;
}
.lm-mode-btn .material-symbols-outlined { font-size: 14px; }
.lm-toolbar-right { display: flex; gap: var(--sp-gap, 6px); }
.lm-tb-btn {
  padding: var(--sp-space, 5px 10px);
  font-size: 11px;
  font-family: var(--font-log-tag, var(--font-mono));
  background: rgba(42,35,34,0.6);
  border: 1px solid rgba(197,139,58,0.25);
  color: var(--text-bright);
  border-radius: var(--radius-ui, 4px);
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space, 4px);
}
.lm-tb-btn:hover { background: rgba(197,139,58,0.2); }
.lm-tb-btn .material-symbols-outlined { font-size: 13px; }

/* --- Entry Row (ghost lines, lint, stale, fresh, actions, pin, ghost slot) --- */
.lm-entry-lines {
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 10px;
  color: var(--text-muted, var(--lr-text-muted, #6b7280));
  margin-left: auto;
  margin-right: var(--sp-space, 6px);
  opacity: 0.8;
}
.lm-entry-no-line { color: var(--accent-brass); }
.lm-entry-lint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
  font-size: 10px;
  color: var(--accent-brass);
  cursor: help;
}
.lm-entry-stale { opacity: 0.55; position: relative; }
.lm-entry-stale::before {
  content: ''; position: absolute; left: -8px; top: 50%;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent-brass); transform: translateY(-50%);
}
.lm-entry-fresh { position: relative; }
.lm-entry-fresh::before {
  content: ''; position: absolute; left: -2px; top: 20%; bottom: 20%;
  width: 2px; background: linear-gradient(180deg, var(--accent-brass), transparent);
}
.lm-entry-actions {
  display: inline-flex;
  gap: var(--sp-gap, 2px);
  margin-left: var(--sp-space, 6px);
  opacity: 0;
  transition: opacity 0.15s;
}
.lm-entry-row:hover .lm-entry-actions { opacity: 1; }
.lm-ea-btn {
  padding: var(--sp-space, 2px 4px);
  font-size: 11px;
  background: rgba(42,35,34,0.6);
  border: 1px solid rgba(197,139,58,0.2);
  color: var(--text-bright);
  border-radius: var(--radius-ui, 3px);
  cursor: pointer;
  transition: all 0.15s;
  line-height: 1;
}
.lm-ea-btn:hover { background: rgba(197,139,58,0.25); transform: scale(1.1); }
.lm-ea-pinned { background: rgba(194,139,46,0.35); color: var(--accent-brass-hover); }

.lm-entry-ghost {
  opacity: 0.45;
  cursor: pointer;
  border-left: 2px dashed rgba(194,139,46,0.4) !important;
  background: rgba(22,18,17,0.2) !important;
}
.lm-entry-ghost:hover { opacity: 0.75; background: rgba(194,139,46,0.08) !important; }
.lm-entry-missing { color: var(--accent-brass); }
.lm-entry-ghost-icon { font-size: 13px; color: var(--accent-brass); }
.lm-entry-ghost-text { color: var(--accent-brass); font-style: italic; }
.lm-entry-ghost-hint { color: var(--lr-text-muted, #6b7280); font-style: italic; font-size: 10px; }

.lm-highlight { animation: lmHighlightPulse 1.4s ease-out; }
.lm-qs-highlight {
  background: rgba(194,139,46,0.18) !important;
  border-left: 3px solid var(--accent-brass) !important;
}
@keyframes lmHighlightPulse {
  0%   { background: rgba(194,139,46,0.45); box-shadow: 0 0 0 3px rgba(194,139,46,0.35); }
  100% { background: transparent; box-shadow: 0 0 0 0 transparent; }
}

/* --- Sidebar: Gauges / Health / Density / Gap / Top / Pin --- */
.lm-gauges-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-space, 6px);
}
.lm-gauge {
  text-align: center;
  padding: var(--sp-space, 4px);
  background: rgba(22,18,17,0.4);
  border: 1px solid rgba(197,139,58,0.15);
  border-radius: var(--forge-radius-card, 4px);
  box-shadow:
    inset 0 0 12px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,210,154,0.05);
}
.lm-gauge-svg { width: 100%; height: 72px; }
.lm-gauge-label {
  display: inline-flex; align-items: center; gap: var(--sp-gap, 3px);
  font-size: 11px; font-weight: 700; font-family: var(--font-log-tag, var(--font-mono));
  letter-spacing: 0.3px;
}
.lm-gauge-stats { font-size: 9px; color: var(--lr-text-muted, #6b7280); margin-top: 2px; font-family: var(--font-log-tag, var(--font-mono)); }

.lm-health-list { display: flex; flex-direction: column; gap: var(--sp-gap, 3px); }
.lm-health-row {
  display: grid;
  grid-template-columns: 90px 1fr 30px;
  gap: var(--sp-space, 6px);
  align-items: center;
  padding: var(--sp-space, 3px 4px);
  cursor: pointer;
  border-radius: var(--radius-ui, 3px);
  transition: background 0.15s;
  font-size: 11px;
  font-family: var(--font-log-tag, var(--font-mono));
}
.lm-health-row:hover { background: rgba(197,139,58,0.08); }
.lm-health-mod { font-weight: 700; }
.lm-health-bar {
  height: 8px;
  background: rgba(22,18,17,0.6);
  border-radius: var(--radius-ui, 4px);
  overflow: hidden;
  border: 1px solid rgba(197,139,58,0.15);
}
.lm-health-fill { height: 100%; transition: width 0.3s; }
.lm-health-score { text-align: right; font-weight: 700; }

.lm-density-list { display: flex; flex-direction: column; gap: var(--sp-gap, 2px); }
.lm-density-row {
  display: grid;
  grid-template-columns: 90px 1fr 40px;
  gap: var(--sp-space, 6px);
  align-items: center;
  padding: var(--sp-space, 2px 4px);
  cursor: pointer;
  font-size: 11px;
  font-family: var(--font-log-tag, var(--font-mono));
  transition: background 0.15s;
  border-radius: var(--radius-ui, 3px);
}
.lm-density-row:hover { background: rgba(197,139,58,0.08); }
.lm-density-name { font-weight: 700; }
.lm-density-bar {
  height: 10px;
  border-radius: 2px;
  min-width: 6px;
  max-width: 100%;
  transition: width 0.3s;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--lm-bar-color, var(--text-muted)) 25%, transparent),
    var(--lm-bar-color, var(--text-muted))
  );
}
.lm-density-num { text-align: right; color: var(--lr-text-muted, #6b7280); font-size: 10px; }

.lm-gap-block { display: flex; flex-direction: column; gap: var(--sp-gap, 6px); }
.lm-gap-line {
  font-size: 11px;
  font-family: var(--font-log-tag, var(--font-mono));
  color: var(--text-bright);
  line-height: 1.5;
}
.lm-gap-line strong { color: var(--accent-brass); margin-right: 4px; }
.lm-gap-line em { color: var(--lr-text-muted, #6b7280); }
.lm-gap-chip {
  display: inline-block;
  padding: var(--sp-space, 1px 6px);
  background: rgba(194,139,46,0.2);
  border: 1px solid rgba(194,139,46,0.4);
  border-radius: var(--radius-ui, 3px);
  color: var(--accent-brass-hover);
  font-size: 10px;
  margin: 1px 2px;
  cursor: pointer;
  transition: all 0.15s;
}
.lm-gap-chip:hover { background: rgba(194,139,46,0.35); }
.lm-gap-count {
  display: inline-block;
  padding: var(--sp-space, 1px 8px);
  background: rgba(180,85,60,0.25);
  border: 1px solid rgba(180,85,60,0.5);
  border-radius: var(--radius-ui, 3px);
  color: var(--text-bright);
  font-weight: 700;
  font-family: var(--font-log-tag, var(--font-mono));
}

.lm-top-list, .lm-quiet-list, .lm-pin-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-gap, 2px);
}
.lm-top-row, .lm-quiet-row, .lm-pin-row {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: var(--sp-space, 6px);
  align-items: center;
  padding: var(--sp-space, 3px 4px);
  cursor: pointer;
  font-size: 11px;
  font-family: var(--font-log-tag, var(--font-mono));
  border-radius: var(--radius-ui, 3px);
  transition: background 0.15s;
}
.lm-top-row:hover, .lm-quiet-row:hover, .lm-pin-row:hover { background: rgba(197,139,58,0.08); }
.lm-top-level { font-weight: 700; text-align: center; }
.lm-top-id, .lm-pin-id { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lm-top-count, .lm-quiet-n { color: var(--lr-text-muted, #6b7280); text-align: right; font-size: 10px; }
.lm-pin-empty { color: var(--lr-text-muted, #6b7280); font-style: italic; font-size: 11px; padding: var(--sp-card-pad, 4px); }
.lm-pin-remove {
  padding: var(--sp-card-pad, 0 6px);
  background: rgba(180,85,60,0.2);
  border: 1px solid rgba(180,85,60,0.4);
  color: var(--text-bright);
  border-radius: var(--radius-ui, 3px);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.lm-pin-remove:hover { background: rgba(180,85,60,0.4); }

/* --- Treemap --- */
.lm-treemap {
  display: none;
  flex-wrap: wrap;
  gap: var(--sp-space, 3px);
  padding: var(--sp-space, 8px);
  background: rgba(22,18,17,0.4);
  border: 1px solid rgba(197,139,58,0.15);
  border-radius: var(--forge-radius-card, 4px);
  align-content: flex-start;
  min-height: 400px;
  max-height: 70vh;
  overflow: auto;
}
.lm-tm-tile {
  min-width: 60px; min-height: 60px;
  border: 1px solid rgba(197,139,58,0.3);
  border-radius: var(--radius-ui, 4px);
  padding: var(--sp-space, 6px);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--text-bright);
  font-family: var(--font-log-tag, var(--font-mono));
  transition: all 0.15s;
  overflow: hidden;
}
.lm-tm-tile:hover {
  transform: scale(1.03);
  box-shadow: 0 0 14px rgba(194,139,46,0.3);
  z-index: 2;
}
.lm-tm-name {
  font-size: 10px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}
.lm-tm-count {
  font-size: 14px;
  font-weight: 800;
  color: var(--accent-brass-hover);
  align-self: flex-end;
}

/* --- Matryoshka tree tweaks --- */
.lm-tree-matryoshka .lm-layer-section { border-left: 2px solid rgba(197,139,58,0.3); }
.lm-tree-matryoshka .lm-module-card { border-left: 3px solid var(--module-accent, rgba(194,139,46,0.4)); }
.lm-tree-matryoshka .lm-file-section { border-left: 2px dashed rgba(197,139,58,0.2); padding-left: 6px; }

/* --- Command Palette --- */
.lm-palette-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 10000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
}
.lm-palette {
  width: 640px; max-width: 90vw;
  background: linear-gradient(180deg, var(--bg-elevated), var(--bg-base));
  border: 1px solid rgba(194,139,46,0.5);
  border-radius: var(--forge-radius-card, 4px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 30px rgba(194,139,46,0.2);
  overflow: hidden;
}
.lm-palette-head {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 10px);
  padding: var(--sp-space, 12px 16px);
  border-bottom: 1px solid rgba(197,139,58,0.25);
}
.lm-palette-head .material-symbols-outlined { color: var(--accent-brass); font-size: 20px; }
.lm-palette-head input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-bright);
  font-size: 15px;
  font-family: var(--font-log-tag, var(--font-mono));
}
.lm-palette-kbd {
  padding: var(--sp-space, 2px 6px);
  font-size: 10px;
  color: var(--lr-text-muted, #6b7280);
  background: rgba(42,35,34,0.6);
  border: 1px solid rgba(197,139,58,0.2);
  border-radius: var(--radius-ui, 3px);
  font-family: var(--font-log-tag, var(--font-mono));
}
.lm-palette-results {
  max-height: 400px;
  overflow-y: auto;
}
.lm-palette-item {
  display: grid;
  grid-template-columns: 60px 1fr 1fr 180px;
  gap: var(--sp-space, 8px);
  padding: var(--sp-space, 8px 16px);
  cursor: pointer;
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 12px;
  border-left: 3px solid transparent;
  transition: all 0.12s;
}
.lm-palette-item:hover, .lm-palette-active {
  background: rgba(194,139,46,0.12);
  border-left-color: var(--accent-brass);
}
.lm-pi-level { font-weight: 700; text-align: center; }
.lm-pi-id { color: var(--text-bright); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lm-pi-label { color: var(--lr-text-muted, #6b7280); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lm-pi-file { color: var(--accent-brass); font-size: 10px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lm-palette-empty { padding: var(--sp-card-pad, 24px); text-align: center; color: var(--lr-text-muted, #6b7280); font-style: italic; }
.lm-palette-foot {
  display: flex;
  gap: var(--sp-space, 18px);
  padding: var(--sp-space, 8px 16px);
  border-top: 1px solid rgba(197,139,58,0.15);
  background: rgba(22,18,17,0.5);
  font-size: 10px;
  color: var(--lr-text-muted, #6b7280);
  font-family: var(--font-log-tag, var(--font-mono));
}
.lm-palette-foot kbd {
  display: inline-block;
  padding: var(--sp-space, 1px 5px);
  background: rgba(42,35,34,0.6);
  border: 1px solid rgba(197,139,58,0.2);
  border-radius: 2px;
  font-size: 10px;
  margin-right: var(--sp-space, 3px);
  color: var(--text-bright);
}

/* --- Stub Modal --- */
.lm-stub-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lm-stub-modal {
  width: 700px; max-width: 92vw;
  background: linear-gradient(180deg, var(--bg-elevated), var(--bg-base));
  border: 1px solid rgba(194,139,46,0.45);
  border-radius: var(--forge-radius-card, 4px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  overflow: hidden;
}
.lm-stub-head {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 10px);
  padding: var(--sp-space, 10px 16px);
  background: rgba(42,35,34,0.6);
  border-bottom: 1px solid rgba(194,139,46,0.3);
  color: var(--text-bright);
  font-family: var(--font-log-tag, var(--font-mono));
  font-weight: 700;
}
.lm-stub-head .material-symbols-outlined { color: var(--accent-brass); }
.lm-stub-close {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--text-bright);
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
  padding: var(--sp-card-pad, 0 6px);
}
.lm-stub-close:hover { color: var(--accent-brass-hover); }
.lm-stub-code {
  margin: 0;
  padding: var(--sp-space, 14px 16px);
  max-height: 480px;
  overflow: auto;
  background: rgba(22,18,17,0.7);
  color: var(--text-bright);
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 12px;
  line-height: 1.5;
  white-space: pre;
}
.lm-stub-foot {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 12px);
  padding: var(--sp-space, 10px 16px);
  border-top: 1px solid rgba(197,139,58,0.2);
}
.lm-stub-btn {
  padding: var(--sp-space, 6px 12px);
  background: rgba(194,139,46,0.22);
  border: 1px solid rgba(194,139,46,0.5);
  color: var(--accent-brass-hover);
  border-radius: var(--radius-ui, 4px);
  cursor: pointer;
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space, 5px);
  transition: all 0.15s;
}
.lm-stub-btn:hover { background: rgba(194,139,46,0.4); }
.lm-stub-hint { color: var(--lr-text-muted, #6b7280); font-size: 11px; font-family: var(--font-log-tag, var(--font-mono)); }
.lm-stub-hint code {
  padding: var(--sp-space, 1px 4px);
  background: rgba(42,35,34,0.6);
  border-radius: var(--radius-ui, 3px);
  color: var(--accent-brass);
}

/* --- Toast --- */
.lm-toast {
  position: fixed;
  bottom: 30px; left: 50%;
  transform: translateX(-50%) translateY(80px);
  padding: var(--sp-space, 10px 18px);
  background: linear-gradient(180deg, var(--bg-elevated), var(--bg-base));
  border: 1px solid rgba(194,139,46,0.5);
  color: var(--accent-brass-hover);
  border-radius: var(--forge-radius-card, 4px);
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 12px;
  z-index: 10001;
  opacity: 0;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 12px rgba(194,139,46,0.2);
  pointer-events: none;
}
.lm-toast-show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* ─── MightyMap v3.0: нові стилі ─────────────── */

/* C4: Graduated Color Depth */
.dev-tools-scope .lm-entry-row {
  background: rgba(100, 180, 255, calc(0.02 + var(--entry-depth, 0.1) * 0.18));
  transition: background 0.2s;
}
.dev-tools-scope .lm-entry-row:hover {
  background: rgba(100, 180, 255, calc(0.08 + var(--entry-depth, 0.1) * 0.22));
}

/* D6: Confidence Stars */
.dev-tools-scope .lm-conf-stars {
  display: inline-flex;
  gap: var(--sp-gap, 1px);
  margin-left: var(--sp-space, 4px);
  flex-shrink: 0;
}
.dev-tools-scope .lm-conf-star {
  font-size: 8px;
  color: rgba(255,255,255,0.15);
  cursor: default;
  line-height: 1;
}
.dev-tools-scope .lm-conf-star-on {
  color: var(--log-warn);
}
.dev-tools-scope .lm-sb-conf .lm-conf-star { font-size: 13px; }

/* E1: Delta Counter Badge */
.dev-tools-scope .lm-qs-delta {
  margin-left: var(--sp-space, 6px);
  padding: var(--sp-space, 2px 8px);
  border-radius: var(--forge-radius-card, 4px);
  font-size: 9px;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  background: rgba(74, 222, 128, 0.15);
  border: 1px solid rgba(74, 222, 128, 0.35);
  color: var(--lr-success, #4ade80);
  cursor: pointer;
  transition: background 0.15s;
}
.dev-tools-scope .lm-qs-delta:hover { background: rgba(74, 222, 128, 0.28); }

/* D1: Vim nav focus */
.dev-tools-scope .lm-mm-nav-focus {
  outline: 1px solid rgba(34, 211, 238, 0.6);
  background: rgba(34, 211, 238, 0.08) !important;
}

/* D2: Module focused flash */
.dev-tools-scope .lm-module-focused {
  outline: 2px solid rgba(34, 211, 238, 0.5);
  animation: lmModulePulse 1.5s ease-out;
}
@keyframes lmModulePulse {
  0% { outline-color: rgba(34, 211, 238, 0.8); }
  100% { outline-color: rgba(34, 211, 238, 0); }
}

/* D7: Write-back sidebar */
.dev-tools-scope .lm-sb-detail {
  padding: var(--sp-space, 10px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-space, 5px);
  font-size: 11px;
}
.dev-tools-scope .lm-sb-id {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  color: var(--cyan, #22d3ee);
  word-break: break-all;
}
.dev-tools-scope .lm-sb-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-bright, #f4f4f5);
  margin-bottom: var(--sp-space, 4px);
}
.dev-tools-scope .lm-sb-row {
  color: var(--text-dim, var(--lr-text-muted, #6b7280));
  line-height: 1.5;
}
.dev-tools-scope .lm-sb-notes-wrap { margin-top: 6px; }
.dev-tools-scope .lm-sb-notes-label { margin-bottom: 4px; font-size: 10px; }
.dev-tools-scope .lm-sb-notes-edit:focus {
  border-color: rgba(34, 211, 238, 0.5) !important;
  background: rgba(34, 211, 238, 0.04);
}

/* B1: Integrity Check Overlay */
.dev-tools-scope .lm-integrity-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 200;
  padding-top: var(--sp-space, 40px);
}
.dev-tools-scope .lm-integrity-modal {
  background: var(--surface2, #1a1a2e);
  border: 1px solid rgba(100,200,255,0.2);
  border-radius: var(--forge-radius-card, 4px);
  width: min(600px, 90vw);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dev-tools-scope .lm-integrity-head {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 8px);
  padding: var(--sp-space, 10px 14px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.3);
  font-size: 12px;
  font-weight: 600;
}
.dev-tools-scope .lm-integrity-summary {
  margin-left: auto;
  font-size: 11px;
  font-family: var(--font-mono, monospace);
}
.dev-tools-scope .lm-integrity-close {
  background: none; border: none; color: var(--text-dim, var(--lr-text-muted, #6b7280));
  font-size: 16px; cursor: pointer; padding: var(--sp-card-pad, 0 4px); margin-left: 8px;
}
.dev-tools-scope .lm-integrity-body {
  overflow-y: auto;
  padding: var(--sp-space, 8px 4px);
  flex: 1;
}
.dev-tools-scope .lm-ic-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-space, 8px);
  padding: var(--sp-space, 6px 12px);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 11px;
}
.dev-tools-scope .lm-ic-pass { color: var(--text-dim, var(--lr-text-muted, #6b7280)); }
.dev-tools-scope .lm-ic-fail { color: var(--lr-error, #f87171); }
.dev-tools-scope .lm-ic-icon { font-size: 12px; width: 14px; flex-shrink: 0; }
.dev-tools-scope .lm-ic-pass .lm-ic-icon { color: var(--lr-success, #4ade80); }
.dev-tools-scope .lm-ic-name { font-weight: 600; min-width: 200px; }
.dev-tools-scope .lm-ic-detail { font-size: 10px; color: var(--log-warn); flex: 1; }
.dev-tools-scope .lm-ic-fix {
  margin-left: auto;
  padding: var(--sp-space, 2px 8px);
  font-size: 9px;
  background: rgba(248,113,113,0.12);
  border: 1px solid rgba(248,113,113,0.3);
  border-radius: var(--radius-ui, 3px);
  color: var(--lr-error, #f87171);
  cursor: pointer;
  flex-shrink: 0;
}
.dev-tools-scope .lm-ic-fix:hover { background: rgba(248,113,113,0.25); }
.dev-tools-scope .lm-ic-fix:disabled { opacity: 0.4; cursor: default; color: var(--lr-success, #4ade80); border-color: rgba(74,222,128,0.3); }

/* B2: Error Cluster Badges */
.dev-tools-scope .lm-cluster-badge {
  display: inline-block;
  margin-left: var(--sp-space, 8px);
  padding: var(--sp-space, 1px 6px);
  border-radius: var(--radius-ui, 3px);
  font-size: 9px;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  vertical-align: middle;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}
.dev-tools-scope .lm-cluster-warn {
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.35);
  color: var(--log-warn);
}
.dev-tools-scope .lm-cluster-critical {
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.4);
  color: var(--lr-error, #f87171);
  animation: lmClusterPulse 2.4s ease-in-out infinite;
}
@keyframes lmClusterPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(248,113,113,0); }
  50% { box-shadow: 0 0 0 3px rgba(248,113,113,0.18); }
}

/* B3: Module Health Dashboard */
.dev-tools-scope .lm-module-dashboard {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-space, 8px);
  padding: var(--sp-space, 10px 14px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.18);
}
.dev-tools-scope .lm-mds-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--forge-radius-card, 4px);
  padding: var(--sp-space, 8px 10px);
  min-width: 130px;
  flex: 1;
  max-width: 180px;
}
.dev-tools-scope .lm-mds-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-space, 4px);
}
.dev-tools-scope .lm-mds-mod {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim, var(--lr-text-muted, #6b7280));
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.dev-tools-scope .lm-mds-grade {
  font-size: 16px;
  font-weight: 900;
  font-family: var(--font-mono, monospace);
  line-height: 1;
}
.dev-tools-scope .lm-mds-score {
  font-size: 20px;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  color: var(--text-primary, #e4e4e7);
  line-height: 1;
  margin-bottom: var(--sp-space, 5px);
}
.dev-tools-scope .lm-mds-bar {
  height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: var(--sp-space, 5px);
}
.dev-tools-scope .lm-mds-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s ease;
}
.dev-tools-scope .lm-mds-sub {
  font-size: 9px;
  color: var(--text-dim, #71717a);
  font-family: var(--font-mono, monospace);
}

/* B3: active state for dash button */
.dev-tools-scope .lm-qs-btn.lm-qs-active {
  background: rgba(100,180,255,0.18);
  border-color: rgba(100,180,255,0.45);
  color: color-mix(in srgb, var(--lr-info, #60a5fa) 60%, var(--text-bright));
}

/* B4: Level Distribution Heatmap */
.dev-tools-scope .lm-heat-matrix {
  padding: var(--sp-space, 8px 12px);
  overflow: auto;
  max-height: 70vh;
}
.dev-tools-scope .lm-hm-wrap { display: flex; flex-direction: column; gap: var(--sp-gap, 1px); }
.dev-tools-scope .lm-hm-header,
.dev-tools-scope .lm-hm-row {
  display: grid;
  grid-template-columns: 140px repeat(5, 70px);
  gap: var(--sp-gap, 2px);
}
.dev-tools-scope .lm-hm-file-col { }
.dev-tools-scope .lm-hm-lvl-hdr {
  font-size: 8px;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  text-align: center;
  padding: var(--sp-pad, 2px 0);
  letter-spacing: 0.06em;
}
.dev-tools-scope .lm-hm-file {
  font-size: 9px;
  font-family: var(--font-mono, monospace);
  color: var(--text-dim, var(--lr-text-muted, #6b7280));
  padding: var(--sp-space, 3px 4px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  align-self: center;
}
.dev-tools-scope .lm-hm-cell {
  font-size: 8px;
  font-family: var(--font-mono, monospace);
  text-align: center;
  padding: var(--sp-space, 3px 2px);
  border-radius: 2px;
  cursor: pointer;
  color: rgba(255,255,255,0.7);
  transition: transform 0.1s, opacity 0.1s;
  min-height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dev-tools-scope .lm-hm-cell:hover { transform: scale(1.05); opacity: 0.85; }

/* C2: Module Health Voltmeter */
.dev-tools-scope .lm-voltmeter {
  width: 40px;
  height: 24px;
  flex-shrink: 0;
  margin-left: var(--sp-space, 6px);
  overflow: visible;
}

/* C3: Rivet Counter Badges */
.dev-tools-scope .lm-rivets-row {
  display: flex;
  gap: var(--sp-space, 3px);
  align-items: center;
  margin-left: var(--sp-space, 6px);
  flex-shrink: 0;
}
.dev-tools-scope .lm-rivet {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  overflow: visible;
}
.dev-tools-scope .lm-rivet circle:first-child { fill: rgba(255,255,255,0.08); stroke: rgba(255,255,255,0.2); stroke-width: 0.8; }
.dev-tools-scope .lm-rivet circle:last-child { fill: rgba(255,255,255,0.05); }
.dev-tools-scope .lm-rivet.lm-rivet-ok circle:first-child { fill: rgba(74,222,128,0.2); stroke: rgba(74,222,128,0.5); }
.dev-tools-scope .lm-rivet.lm-rivet-ok circle:last-child { fill: rgba(74,222,128,0.5); }

/* C1: Warning Lamp Array */
.dev-tools-scope .lm-lamp-array {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 10px);
  padding: var(--sp-space, 6px 14px);
  background: rgba(0,0,0,0.22);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  overflow-x: auto;
}
.dev-tools-scope .lm-lamp-label {
  font-size: 8px;
  font-family: var(--font-mono, monospace);
  color: var(--text-dim, #71717a);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.dev-tools-scope .lm-lamp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-gap, 2px);
  cursor: pointer;
  opacity: 0.35;
  transition: opacity 0.25s, transform 0.15s;
  flex-shrink: 0;
}
.dev-tools-scope .lm-lamp:hover { opacity: 0.75; transform: scale(1.08); }
.dev-tools-scope .lm-lamp.lm-lamp-on { opacity: 1; }
.dev-tools-scope .lm-lamp-svg { width: 20px; height: 28px; overflow: visible; }
.dev-tools-scope .lm-lamp-bulb {
  fill: rgba(255,255,255,0.08);
  stroke: rgba(255,255,255,0.2);
  stroke-width: 1;
  transition: fill 0.3s, filter 0.3s;
}
.dev-tools-scope .lm-lamp-base { fill: rgba(120,100,80,0.5); }
.dev-tools-scope .lm-lamp-stem { fill: rgba(100,80,60,0.6); }
.dev-tools-scope .lm-lamp-lbl {
  font-size: 7px;
  font-family: var(--font-mono, monospace);
  color: var(--text-dim, #71717a);
  text-align: center;
  letter-spacing: 0.06em;
}
.dev-tools-scope .lm-lamp.lm-lamp-on .lm-lamp-lbl { color: var(--text-primary, #e4e4e7); }

/* Treemap toolbar адаптація на малих екранах --- */
@media (max-width: 900px) {
  .lm-toolbar { flex-direction: column; align-items: stretch; }
  .lm-gauges-row { grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .lm-gauge-svg { height: 56px; }
}


/* ╔═══════════════════════════════════════════════════════════╗
   ║  LOGGING MAP v2.0 — Grid/Queue/Detail panel               ║
   ║  Префікс: .lm-grid, .lm-queue, .lm-detail, .lm-dh-*,      ║
   ║  .lm-dt-*, .lm-id-row, .lm-grid-card, .lm-queue-row.      ║
   ║  Утиліти: .lm-mono, .lm-mut, .lm-clr-*, .lm-tag-*,        ║
   ║  .lm-hidden, .lm-state, .lm-copied                        ║
   ╚═══════════════════════════════════════════════════════════╝ */

/* ─── Утиліти ───────────────────────────────────────────────── */
.dev-tools-scope .lm-hidden { display: none !important; }
.dev-tools-scope .lm-mono   { font-family: var(--font-mono, 'IBM Plex Mono','JetBrains Mono',monospace); }
.dev-tools-scope .lm-mut    { color: var(--text-muted, #6a6a78); font-size: 11px; }
.dev-tools-scope .lm-clr-blue   { color: var(--lr-info, #60a5fa); }
.dev-tools-scope .lm-clr-vt { color: var(--accent-brass); }
.dev-tools-scope .lm-clr-amber  { color: var(--warning); }
.dev-tools-scope .lm-clr-ok     { color: var(--lr-success, #4ade80); }
.dev-tools-scope .lm-clr-bad    { color: var(--lr-error, #f87171); }

.dev-tools-scope .lm-tag {
  display: inline-block;
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: var(--sp-space, 1px 6px);
  border-radius: var(--radius-ui, 3px);
  margin-left: var(--sp-space, 4px);
}
.dev-tools-scope .lm-tag-good   { background: rgba(74,222,128,.15); color: var(--lr-success, #4ade80); }
.dev-tools-scope .lm-tag-gap    { background: rgba(249,115,22,.15); color: var(--lr-warn, #fb923c); }
.dev-tools-scope .lm-tag-system { background: rgba(100,116,139,.15); color: var(--lr-muted-soft, #9898b0); }

.dev-tools-scope .lm-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-space, 8px);
  padding: var(--sp-space, 40px 20px);
  color: var(--lr-text-muted, #6b7280);
  font-size: 12px;
  font-family: var(--font-log-tag, var(--font-mono));
  text-align: center;
}
.dev-tools-scope .lm-state .material-symbols-outlined { font-size: 28px; opacity: 0.4; }

.dev-tools-scope .lm-copy-btn {
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 9px;
  color: var(--lr-text-muted, #6b7280);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-border, rgba(255,255,255,0.07));
  border-radius: var(--radius-ui, 3px);
  padding: var(--sp-space, 2px 7px);
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
}
.dev-tools-scope .lm-copy-btn:hover {
  color: var(--text-primary, #e4e4e7);
  border-color: rgba(155,127,89,0.45);
  background: rgba(155,127,89,0.08);
}
.dev-tools-scope .lm-copy-btn.lm-copied {
  color: var(--lr-success, #4ade80);
  border-color: rgba(74,222,128,0.4);
}

/* ─── GRID VIEW (5-й режим карти) ──────────────────────────── */
.dev-tools-scope .lm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-space, 6px);
  padding: var(--sp-space, 8px);
  overflow-y: auto;
  max-height: 100%;
  align-content: start;
}
.dev-tools-scope .lm-grid-card {
  position: relative;
  background: rgba(20,17,12,0.72);
  border: 1px solid var(--glass-border, rgba(155,127,89,0.18));
  border-radius: var(--radius-ui, 4px);
  padding: var(--sp-space, 8px 10px);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, transform 0.08s;
  overflow: hidden;
}
.dev-tools-scope .lm-grid-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--lm-status-color, #6a6a78);
}
.dev-tools-scope .lm-grid-card:hover {
  border-color: rgba(155,127,89,0.45);
  background: rgba(28,22,16,0.85);
}
.dev-tools-scope .lm-grid-card.lm-selected {
  border-color: rgba(197,139,58,0.5);
  background: rgba(197,139,58,0.06);
}
.dev-tools-scope .lm-grid-card.lm-done { opacity: 0.5; }
.dev-tools-scope .lm-status-excellent::before { background: var(--lr-success, #4ade80); }
.dev-tools-scope .lm-status-good::before      { background: var(--lr-success, #4ade80); }
.dev-tools-scope .lm-status-partial::before   { background: var(--warning); }
.dev-tools-scope .lm-status-gap::before       { background: var(--lr-warn, #fb923c); }
.dev-tools-scope .lm-status-missing::before   { background: var(--lr-error, #f87171); }
.dev-tools-scope .lm-status-system::before    { background: var(--lr-muted-soft, #9898b0); }

.dev-tools-scope .lm-gc-r1 {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 6px);
  margin-bottom: var(--sp-space, 5px);
}
.dev-tools-scope .lm-gc-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary, #e4e4e7);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dev-tools-scope .lm-gc-sbadge {
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--sp-space, 1px 5px);
  border-radius: var(--radius-ui, 3px);
  background: rgba(0,0,0,0.4);
  border: 1px solid;
  white-space: nowrap;
}

.dev-tools-scope .lm-gc-r2 {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 4px);
  flex-wrap: wrap;
}
.dev-tools-scope .lm-gc-pill {
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 9px;
  background: rgba(255,255,255,0.04);
  border-radius: var(--radius-ui, 3px);
  padding: var(--sp-space, 1px 5px);
  color: var(--text-muted, #6a6a78);
  white-space: nowrap;
}
.dev-tools-scope .lm-gc-gap {
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 9px;
  font-weight: 700;
  margin-left: auto;
  flex-shrink: 0;
}
.dev-tools-scope .lm-gc-ok {
  color: var(--lr-success, #4ade80);
  margin-left: auto;
  font-size: 11px;
}
.dev-tools-scope .lm-gc-pbadge {
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 8px;
  font-weight: 800;
  border-radius: var(--radius-ui, 3px);
  padding: var(--sp-space, 1px 5px);
  letter-spacing: 0.3px;
}

.dev-tools-scope .lm-gc-r3 { margin-top: 4px; }
.dev-tools-scope .lm-gc-bar {
  height: 3px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
}
.dev-tools-scope .lm-gc-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s;
}

/* ─── QUEUE VIEW (6-й режим) ──────────────────────────────── */
.dev-tools-scope .lm-queue {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}
.dev-tools-scope .lm-q-hdr {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 10px);
  padding: var(--sp-space, 10px 14px);
  border-bottom: 1px solid var(--glass-border, rgba(155,127,89,0.18));
  background: rgba(15,12,8,0.6);
  flex-shrink: 0;
}
.dev-tools-scope .lm-q-lbl {
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 10px;
  color: var(--lr-text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.dev-tools-scope .lm-q-progress {
  flex: 1;
  height: 5px;
  background: rgba(255,255,255,0.06);
  border-radius: var(--radius-ui, 3px);
  overflow: hidden;
}
.dev-tools-scope .lm-q-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--lr-success, #4ade80), var(--lr-success, #4ade80));
  border-radius: var(--radius-ui, 3px);
  transition: width 0.4s;
}
.dev-tools-scope .lm-q-done-lbl {
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 10px;
  color: var(--lr-text-muted, #6b7280);
  white-space: nowrap;
  min-width: 70px;
  text-align: right;
}
.dev-tools-scope .lm-q-filter { display: flex; gap: var(--sp-gap, 3px); }
.dev-tools-scope .lm-qfb {
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 9px;
  border-radius: var(--radius-ui, 3px);
  padding: var(--sp-space, 3px 8px);
  border: 1px solid var(--glass-border, rgba(255,255,255,0.07));
  background: transparent;
  color: var(--lr-text-muted, #6b7280);
  cursor: pointer;
  transition: all 0.12s;
}
.dev-tools-scope .lm-qfb:hover { color: var(--text-primary); }
.dev-tools-scope .lm-qfb-active {
  background: rgba(197,139,58,0.15);
  border-color: rgba(197,139,58,0.4);
  color: var(--accent-brass);
}

.dev-tools-scope .lm-q-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.dev-tools-scope .lm-queue-row {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 10px);
  padding: var(--sp-space, 7px 14px);
  border-bottom: 1px solid rgba(255,255,255,0.03);
  cursor: pointer;
  transition: background 0.1s;
}
.dev-tools-scope .lm-queue-row:hover { background: rgba(255,255,255,0.02); }
.dev-tools-scope .lm-queue-row.lm-selected { background: rgba(197,139,58,0.06); }
.dev-tools-scope .lm-queue-row.lm-done { opacity: 0.45; }

.dev-tools-scope .lm-qr-cb {
  width: 14px;
  height: 14px;
  border-radius: var(--radius-ui, 3px);
  border: 1.5px solid var(--glass-border, rgba(255,255,255,0.12));
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 9px;
  font-weight: 800;
  transition: all 0.12s;
}
.dev-tools-scope .lm-qr-cb:hover { border-color: rgba(197,139,58,0.5); }
.dev-tools-scope .lm-qr-cb.lm-checked {
  background: rgba(74,222,128,0.18);
  border-color: var(--lr-success, #4ade80);
  color: var(--lr-success, #4ade80);
}
.dev-tools-scope .lm-qr-num {
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 9px;
  color: var(--lr-text-muted, #6b7280);
  width: 22px;
  text-align: right;
  flex-shrink: 0;
}
.dev-tools-scope .lm-qr-border {
  width: 3px;
  height: 24px;
  border-radius: 2px;
  flex-shrink: 0;
}
.dev-tools-scope .lm-qr-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dev-tools-scope .lm-qr-prefix {
  font-size: 9px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dev-tools-scope .lm-qr-undoc {
  font-size: 9px;
  font-weight: 700;
  color: var(--lr-warn, #fb923c);
  flex-shrink: 0;
}
.dev-tools-scope .lm-qr-pbadge {
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 8px;
  font-weight: 800;
  border-radius: var(--radius-ui, 3px);
  padding: var(--sp-space, 1px 5px);
  flex-shrink: 0;
}

/* ─── DETAIL PANEL ──────────────────────────────────────────── */
.dev-tools-scope .lm-detail {
  display: flex;
  flex-direction: column;
  background: rgba(15,12,8,0.92);
  border-left: 1px solid var(--glass-border, rgba(155,127,89,0.18));
  overflow: hidden;
  height: 100%;
}

.dev-tools-scope .lm-detail-hdr {
  padding: var(--sp-space, 12px 14px 8px);
  border-bottom: 1px solid var(--glass-border, rgba(155,127,89,0.18));
  background: rgba(20,15,10,0.6);
  flex-shrink: 0;
}
.dev-tools-scope .lm-dh-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-space, 9px);
  margin-bottom: var(--sp-space, 7px);
}
.dev-tools-scope .lm-dh-row.lm-dh-actions { margin-bottom: 0; flex-wrap: wrap; }
.dev-tools-scope .lm-dh-icon { font-size: 22px; flex-shrink: 0; margin-top: 1px; }
.dev-tools-scope .lm-dh-title { flex: 1; min-width: 0; }
.dev-tools-scope .lm-dh-name {
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary, #e4e4e7);
  word-break: break-all;
  line-height: 1.3;
}
.dev-tools-scope .lm-dh-bc {
  font-size: 9px;
  color: var(--lr-text-muted, #6b7280);
  margin-top: var(--sp-space, 3px);
  letter-spacing: 0.3px;
}
.dev-tools-scope .lm-dh-pbadge {
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 9px;
  font-weight: 800;
  padding: var(--sp-space, 3px 9px);
  border-radius: var(--radius-ui, 4px);
  letter-spacing: 0.3px;
  flex-shrink: 0;
}
.dev-tools-scope .lm-dh-close {
  background: none;
  border: none;
  color: var(--lr-text-muted, #6b7280);
  font-size: 22px;
  cursor: pointer;
  padding: var(--sp-card-pad, 0 4px);
  line-height: 1;
  flex-shrink: 0;
}
.dev-tools-scope .lm-dh-close:hover { color: var(--lr-error, #f87171); }

.dev-tools-scope .lm-dh-path {
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 9px;
  color: var(--lr-text-muted, #6b7280);
  line-height: 1.5;
  cursor: pointer;
  padding: var(--sp-space, 5px 9px);
  background: rgba(255,255,255,0.02);
  border-radius: var(--radius-ui, 4px);
  border: 1px solid var(--glass-border, rgba(255,255,255,0.07));
  word-break: break-all;
  transition: border-color 0.12s, background 0.12s;
}
.dev-tools-scope .lm-dh-path:hover {
  border-color: rgba(155,127,89,0.4);
  background: rgba(155,127,89,0.06);
  color: var(--text-primary);
}

.dev-tools-scope .lm-dh-metrics {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-space, 4px);
  margin-top: var(--sp-space, 8px);
}
.dev-tools-scope .lm-dh-m {
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--glass-border, rgba(255,255,255,0.06));
  border-radius: var(--radius-ui, 4px);
  padding: var(--sp-space, 6px 4px);
  text-align: center;
}
.dev-tools-scope .lm-dh-mv {
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
/* gap-метрика: колір через клас (canon: без inline-style-color) */
.dev-tools-scope .lm-dh-mv--ok   { color: var(--lr-success); }
.dev-tools-scope .lm-dh-mv--warn { color: var(--lr-warn); }
.dev-tools-scope .lm-dh-ml {
  font-size: 7px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lr-text-muted, #6b7280);
  margin-top: var(--sp-space, 3px);
}

.dev-tools-scope .lm-dh-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space, 5px);
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 10px;
  font-weight: 600;
  color: var(--warning);
  border: 1px solid rgba(251,191,36,0.25);
  background: rgba(251,191,36,0.05);
  border-radius: var(--radius-ui, 4px);
  padding: var(--sp-space, 5px 10px);
  cursor: pointer;
  transition: all 0.12s;
  margin-top: var(--sp-space, 8px);
}
.dev-tools-scope .lm-dh-btn:hover {
  background: rgba(251,191,36,0.12);
  border-color: rgba(251,191,36,0.45);
}
.dev-tools-scope .lm-dh-btn .material-symbols-outlined { font-size: 14px; }
.dev-tools-scope .lm-dh-btn-done {
  color: var(--lr-success, #4ade80);
  border-color: rgba(74,222,128,0.3);
  background: rgba(74,222,128,0.06);
}
.dev-tools-scope .lm-dh-btn-done:hover { background: rgba(74,222,128,0.14); }

/* ─── DETAIL TABS ───────────────────────────────────────────── */
.dev-tools-scope .lm-detail-tabs {
  display: flex;
  gap: var(--sp-gap, 2px);
  padding: var(--sp-space, 8px 14px 0);
  border-bottom: 1px solid var(--glass-border, rgba(155,127,89,0.18));
  background: rgba(15,12,8,0.6);
  flex-shrink: 0;
}
.dev-tools-scope .lm-dtab {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space, 5px);
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--sp-space, 6px 11px);
  border: none;
  background: transparent;
  color: var(--lr-text-muted, #6b7280);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.12s;
}
.dev-tools-scope .lm-dtab:hover { color: var(--text-primary, #e4e4e7); }
.dev-tools-scope .lm-dtab .material-symbols-outlined { font-size: 13px; }
.dev-tools-scope .lm-dtab.lm-dtab-active {
  color: var(--accent-brass);
  border-bottom-color: var(--accent-brass);
}

.dev-tools-scope .lm-dtab-cnt {
  padding: var(--sp-space, 12px 14px 24px);
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-space, 14px);
}

/* ─── DETAIL TAB CONTENT — секції ──────────────────────────── */
.dev-tools-scope .lm-dt-sec {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space, 6px);
}
.dev-tools-scope .lm-dt-slbl {
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--lr-text-muted, #6b7280);
  display: flex;
  align-items: center;
  gap: var(--sp-space, 8px);
}
.dev-tools-scope .lm-dt-slbl::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--glass-border, rgba(155,127,89,0.18));
}

.dev-tools-scope .lm-dt-prefix {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 8px);
  background: rgba(197,139,58,0.06);
  border: 1px solid rgba(197,139,58,0.2);
  border-radius: var(--radius-ui, 4px);
  padding: var(--sp-space, 6px 10px);
}
.dev-tools-scope .lm-dt-prefix > span:first-child {
  font-size: 11px;
  flex: 1;
}

.dev-tools-scope .lm-dt-tpl {
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--glass-border, rgba(155,127,89,0.18));
  border-radius: var(--radius-ui, 4px);
  overflow: hidden;
}
.dev-tools-scope .lm-dt-tpl-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-space, 5px 10px);
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid var(--glass-border, rgba(155,127,89,0.18));
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lr-text-muted, #6b7280);
}
.dev-tools-scope .lm-dt-tpl-c {
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 10px;
  color: var(--lr-success, #4ade80);
  padding: var(--sp-space, 8px 10px);
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}

.dev-tools-scope .lm-dt-recs {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space, 4px);
}
.dev-tools-scope .lm-rec {
  font-size: 11px;
  line-height: 1.55;
  padding: var(--sp-space, 7px 10px);
  border-radius: var(--radius-ui, 4px);
  border-left: 2px solid;
  color: var(--text-primary);
}
.dev-tools-scope .lm-rec-good { background: rgba(74,222,128,0.04); border-color: rgba(74,222,128,0.3); color: var(--lr-text-muted, #6b7280); }
.dev-tools-scope .lm-rec-warn { background: rgba(251,191,36,0.05); border-color: var(--warning); }
.dev-tools-scope .lm-rec-gap  { background: rgba(249,115,22,0.05); border-color: var(--lr-warn, #fb923c); }
.dev-tools-scope .lm-rec-bad  { background: rgba(248,113,113,0.05); border-color: var(--lr-error, #f87171); }
.dev-tools-scope .lm-rec-info { background: rgba(96,165,250,0.04); border-color: var(--lr-info, #60a5fa); }

.dev-tools-scope .lm-dt-guide {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space, 5px);
  padding-left: 0;
  list-style: none;
  counter-reset: lm-step;
}
.dev-tools-scope .lm-dt-guide li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-space, 8px);
  font-size: 11px;
  color: var(--text-primary);
  line-height: 1.5;
  counter-increment: lm-step;
}
.dev-tools-scope .lm-dt-guide li::before {
  content: counter(lm-step);
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(197,139,58,0.18);
  border: 1px solid rgba(197,139,58,0.35);
  color: var(--accent-brass);
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 9px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

/* ─── ID-LIST для Registry / Patch tab ─────────────────────── */
.dev-tools-scope .lm-id-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-gap, 2px);
  max-height: 260px;
  overflow-y: auto;
}
.dev-tools-scope .lm-id-row {
  display: flex;
  align-items: center;
  gap: var(--sp-space, 6px);
  padding: var(--sp-space, 4px 8px);
  border-radius: var(--radius-ui, 3px);
  font-size: 10px;
  background: rgba(255,255,255,0.015);
  border: 1px solid transparent;
  transition: background 0.1s, border-color 0.1s;
}
.dev-tools-scope .lm-id-row.lm-id-r { background: rgba(74,222,128,0.04); border-color: rgba(74,222,128,0.1); }
.dev-tools-scope .lm-id-row.lm-id-u { background: rgba(249,115,22,0.04); border-color: rgba(249,115,22,0.12); }
.dev-tools-scope .lm-id-row.lm-id-o { background: rgba(100,116,139,0.04); border-color: rgba(100,116,139,0.12); opacity: 0.7; }
.dev-tools-scope .lm-id-row.lm-id-o .lm-id-name { text-decoration: line-through; }
.dev-tools-scope .lm-id-row:hover { background: rgba(255,255,255,0.04); }
.dev-tools-scope .lm-id-name {
  flex: 1;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary);
}
.dev-tools-scope .lm-id-r .lm-id-name { color: var(--lr-success, #4ade80); }
.dev-tools-scope .lm-id-u .lm-id-name { color: var(--lr-warn, #fb923c); }
.dev-tools-scope .lm-id-o .lm-id-name { color: var(--lr-muted-soft, #9898b0); }
.dev-tools-scope .lm-id-line {
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 8px;
  color: var(--lr-text-muted, #6b7280);
  background: rgba(255,255,255,0.04);
  border-radius: var(--radius-ui, 3px);
  padding: var(--sp-space, 1px 5px);
  flex-shrink: 0;
}

/* ─── DETAIL ACTIONS / CODE blocks ──────────────────────────── */
.dev-tools-scope .lm-dt-actions {
  display: flex;
  gap: var(--sp-space, 6px);
  flex-wrap: wrap;
  margin-top: var(--sp-space, 4px);
}
.dev-tools-scope .lm-dt-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space, 5px);
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 10px;
  font-weight: 600;
  color: var(--lr-info, #60a5fa);
  border: 1px solid rgba(96,165,250,0.22);
  background: rgba(96,165,250,0.04);
  border-radius: var(--radius-ui, 4px);
  padding: var(--sp-space, 5px 10px);
  cursor: pointer;
  transition: all 0.12s;
}
.dev-tools-scope .lm-dt-btn:hover { background: rgba(96,165,250,0.1); border-color: rgba(96,165,250,0.4); }
.dev-tools-scope .lm-dt-btn[disabled] { opacity: 0.5; cursor: wait; }
.dev-tools-scope .lm-dt-btn .material-symbols-outlined { font-size: 13px; }
.dev-tools-scope .lm-dt-btn-accent {
  color: var(--accent-brass);
  border-color: rgba(197,139,58,0.28);
  background: rgba(197,139,58,0.05);
}
.dev-tools-scope .lm-dt-btn-accent:hover {
  background: rgba(197,139,58,0.12);
  border-color: rgba(197,139,58,0.45);
}

.dev-tools-scope .lm-dt-code {
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 10px;
  background: rgba(0,0,0,0.5);
  border: 1px solid var(--glass-border, rgba(155,127,89,0.18));
  border-radius: var(--radius-ui, 4px);
  padding: var(--sp-space, 9px 11px);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--lr-success, #4ade80);
  margin-top: var(--sp-space, 6px);
  max-height: 280px;
  overflow-y: auto;
}

.dev-tools-scope .lm-dt-textarea {
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 10px;
  background: rgba(0,0,0,0.45);
  border: 1px solid var(--glass-border, rgba(155,127,89,0.18));
  border-radius: var(--radius-ui, 4px);
  padding: var(--sp-space, 7px 10px);
  color: var(--text-primary);
  resize: vertical;
  min-height: 80px;
  width: 100%;
  line-height: 1.5;
}
.dev-tools-scope .lm-dt-textarea:focus {
  outline: none;
  border-color: rgba(197,139,58,0.4);
}

.dev-tools-scope .lm-dt-deps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-space, 3px);
}
.dev-tools-scope .lm-dep-chip {
  font-size: 9px;
  padding: var(--sp-space, 2px 7px);
  border-radius: var(--forge-radius-card, 4px);
  background: rgba(197,139,58,0.08);
  border: 1px solid rgba(197,139,58,0.2);
  color: var(--accent-brass);
  white-space: nowrap;
}

.dev-tools-scope .lm-dt-empty {
  color: var(--lr-text-muted, #6b7280);
  font-size: 11px;
  text-align: center;
  padding: var(--sp-space, 20px);
}

.dev-tools-scope .lm-rescan-status {
  font-family: var(--font-log-tag, var(--font-mono));
  font-size: 10px;
  margin-left: var(--sp-space, 8px);
}

/* ─── РЕСПОНСИВ ─────────────────────────────────────────────── */
@media (max-width: 760px) {
  .dev-tools-scope .lm-grid { grid-template-columns: 1fr 1fr; }
  .dev-tools-scope .lm-dh-metrics { grid-template-columns: repeat(3, 1fr); }
  .dev-tools-scope .lm-q-hdr { flex-wrap: wrap; }
  .dev-tools-scope .lm-q-progress { order: 99; flex: 1 1 100%; }
}

/* J. max-width */
body.dev-tools-scope.lr-page, body.lr-page {
  max-width: var(--max-width, 1440px);
  margin-left: auto;
  margin-right: auto;
}
/* K. Blueprint grid */
.lr-blueprint-grid {
  background:
    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;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* ═══════════════════════════════════════════════════════════════════
   [UPGRADE L3.1] Зебра-рядки — ледь помітна тінь парних рядків
   покращує сканування довгих списків без відволікання від кольорів рівнів.
   ═══════════════════════════════════════════════════════════════════ */
tbody tr:nth-child(even) {
  background: rgba(255,255,255,0.013);
}

/* ═══════════════════════════════════════════════════════════════════
   [UPGRADE L3.2] Металева глибина рядків — тонкий інсет-рельєф
   надає кожному рядку вигляд пресованої пластини.
   ═══════════════════════════════════════════════════════════════════ */
tbody tr {
  box-shadow:
    inset 0 -1px 0 rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.018);
}

/* ═══════════════════════════════════════════════════════════════════
   [UPGRADE L3.3] Hover-тінт по рівню — ERROR горить червоно, WARN
   бурштиново, INFO блакитно, SUCCESS зелено. Специфічніший за tr:hover.
   ═══════════════════════════════════════════════════════════════════ */
tbody tr[data-level="ERROR"]:hover {
  box-shadow:
    inset 0 0 0 1px rgba(251,113,133,0.32),
    0 0 16px rgba(251,113,133,0.1) !important;
}
tbody tr[data-level="WARN"]:hover {
  box-shadow:
    inset 0 0 0 1px rgba(197,139,58,0.38),
    0 0 14px rgba(197,139,58,0.12) !important;
}
tbody tr[data-level="INFO"]:hover {
  box-shadow:
    inset 0 0 0 1px rgba(34,211,238,0.28),
    0 0 14px rgba(34,211,238,0.08) !important;
}
tbody tr[data-level="SUCCESS"]:hover {
  box-shadow:
    inset 0 0 0 1px rgba(107,142,78,0.28),
    0 0 14px rgba(107,142,78,0.08) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   [UPGRADE L3.4] Роздільник груп level-чіпів — DEBUG і SUCCESS
   відокремлені від severity-групи (INFO/WARN/ERROR) більшим відступом.
   ═══════════════════════════════════════════════════════════════════ */
.qlc-chip[data-level="DEBUG"] {
  margin-left: var(--sp-space-2);
}

@media (prefers-reduced-motion: reduce) {
  tbody tr[data-level]:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08) !important; }
}

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