/* ============================================================ */
/*=  Claude Code Dev Tool - Page Styles (canon rebuild)        =*/
/*=  Zone: DEV_TOOLS (Industrial Forge)                        =*/
/*=  Namespace: .cc-*  · scoped .dev-tools-scope.cc-body       =*/
/*=  Canon: 2.1.0-visual-rhythm · token-only · radius <= 4px   =*/
/*=  Cascade slot: page-specific (link #9)                     =*/
/*=                                                            =*/
/*=  Structure: balka/crest/clock/back/rivets come from shared =*/
/*=  dt-*.css; this file = page identity, shell, decks, the    =*/
/*=  cc-* content system, and responsive/a11y.                 =*/
/* ============================================================ */

/* ─────────────────────────────────────────────────────────────
   0. PAGE TOKEN SCOPE  (never :root - canon A / tokens-on-root)
   ───────────────────────────────────────────────────────────── */
.cc-body {
  /* darken muted text for readability without leaking to shared */
  --text-muted:        var(--text-body);

  /* page accent = devtools brass (canon A: --mod-devtools) */
  --cc-accent:         var(--accent-brass);
  --cc-accent-hover:   var(--accent-brass-hover);
  --cc-accent-dim:     var(--accent-brass-dim);
  --cc-accent-bright:  var(--accent-brass-hover);

  /* warm rgba derivations (no raw hex; rgba is canon-clean) */
  --cc-accent-soft:    rgba(197, 139, 58, 0.16);
  --cc-accent-line:    rgba(197, 139, 58, 0.42);
  --cc-accent-glow:    rgba(197, 139, 58, 0.10);
  --cc-ink:            rgba(0, 0, 0, 0.55);
  --cc-ink-deep:       rgba(0, 0, 0, 0.75);
  --cc-sheen:          rgba(232, 219, 178, 0.06);

  /* severity-border tokens (alerts canonical, page-scope) */
  --border-high:       rgba(227, 111, 61, 0.38);
  --border-medium:     rgba(224, 196, 137, 0.32);
  --border-info:       rgba(124, 143, 136, 0.30);

  /* shell width = canon container token
     canon-fix 2026-05-20: --container-w-wide не визначено в усій CSS екосистемі,
     fallback до initial → шарова ширина 100% (сторінка розтягнута на весь
     viewport на широких моніторах). Замінено на --max-content з fallback 1400px
     (відповідає alerts canonical і решті Dev Tools сторінок). */
  --cc-shell-w:        var(--max-content, 1400px);
  --cc-card-bg:        var(--bg-surface);

  /* ── component-layer page vars (forge-token-based, canon A) ──
     ported cc-* component system references these; all resolve
     to forge SSOT tokens / canon-clean rgba (no raw hex) */
  --cc-accent-border:  var(--cc-accent-line);
  --cc-accent-rgb:     197, 139, 58;        /* brass channels for rgba() */
  --cc-card-border:    var(--border-metal);
  --cc-bg-main:        var(--bg-base);
  --cc-success:        var(--log-ok);
  --cc-success-soft:   rgba(107, 142, 78, 0.14);
  --cc-success-line:   rgba(107, 142, 78, 0.32);
  --cc-warning:        var(--log-warn);
  --cc-warning-soft:   rgba(224, 196, 137, 0.12);
  --cc-danger:         var(--log-error);
  --cc-danger-soft:    rgba(227, 111, 61, 0.12);
  --cc-info:           var(--mod-applicant);
  --cc-info-soft:      rgba(90, 130, 153, 0.12);
  --cc-secondary:      var(--accent-brass-hover);
  --cc-secondary-soft: rgba(216, 157, 72, 0.12);
  --cc-stale-color:    var(--accent-brass);
  --cc-stale-soft:     rgba(197, 139, 58, 0.08);
  /* health spectrum (semantic, canon A) */
  --cc-health-healthy:  var(--log-ok);
  --cc-health-watch:    var(--log-warn);
  --cc-health-stale:    var(--accent-brass);
  --cc-health-critical: var(--log-error);
  /* agent dossier text roles */
  --cc-agt-bg:         var(--bg-surface);
  --cc-agt-border:     var(--border-metal);
  --cc-agt-border-hi:  var(--border-bright);
  --cc-agt-text:       var(--text-bright);
  --cc-agt-text-dim:   var(--text-muted);

  min-height: 100vh;
  background-color: var(--bg-base);
  position: relative;
  padding-bottom: var(--sp-space-7);
}

/* ─────────────────────────────────────────────────────────────
   1. APPROVED KEYFRAMES  (canon I - all cc-* prefixed = canon)
   ───────────────────────────────────────────────────────────── */
@keyframes cc-fade-up      { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cc-slide-in     { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes cc-detail-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cc-toast-in     { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes cc-toast-out    { from { opacity: 1; transform: translateX(0); }  to { opacity: 0; transform: translateX(24px); } }
@keyframes cc-spin         { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes cc-stale-pulse  { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes cc-led-pulse    { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
@keyframes cc-meter-fill   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes cc-skel-shimmer { from { background-position: -360px 0; } to { background-position: 360px 0; } }
@keyframes cc-row-in       { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cc-ring-draw    { from { stroke-dashoffset: var(--cc-ring-len, 360); } to { stroke-dashoffset: var(--cc-ring-off, 0); } }

/* decorative engine-room motion (canon I, cc-* prefixed) */
@keyframes cc-ae-aether-pulse  { 0%, 100% { opacity: 0.65; } 30% { opacity: 0.9; } 60% { opacity: 0.72; } }
@keyframes cc-ae-piston-stroke { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(24px); } }
@keyframes cc-ae-steam-puff    { 0% { opacity: 0; transform: translateY(0) scale(0.8); } 25% { opacity: 0.5; } 100% { opacity: 0; transform: translateY(-34px) scale(1.45); } }
@keyframes cc-ae-needle-tremor { 0%, 100% { transform: rotate(var(--cc-needle, 0deg)); } 50% { transform: rotate(calc(var(--cc-needle, 0deg) + 1.5deg)); } }
@keyframes cc-ae-coolant-flow  { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } }
@keyframes cc-ae-valve-spin    { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes cc-ae-lamp-breathe  { 0%, 100% { opacity: 0.72; } 40% { opacity: 0.46; } }
@keyframes cc-ae-blueprint     { 0% { background-position: 0 0; } 100% { background-position: 0 80px; } }
@keyframes cc-ae-piston-burst  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(24px); } }

/* ─────────────────────────────────────────────────────────────
   2. ATMOSPHERE  (canon K - behind content, pointer-events:none)
   ───────────────────────────────────────────────────────────── */
.cc-body .cc-bg-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  contain: layout paint;
}

.cc-body .ae-blueprint-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent 0, transparent 79px, rgba(42, 30, 18, 0.04) 79px, rgba(42, 30, 18, 0.04) 80px),
    repeating-linear-gradient(90deg, transparent 0, transparent 79px, rgba(42, 30, 18, 0.03) 79px, rgba(42, 30, 18, 0.03) 80px);
  animation: cc-ae-blueprint 26s linear infinite;
}

/* warm reactor vignette (no glow text-shadow, no backdrop-filter) */
.cc-body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 40% 55% at 50% 52%, rgba(120, 60, 22, 0.30) 0%, rgba(80, 38, 14, 0.16) 42%, transparent 70%),
    radial-gradient(ellipse 60% 20% at 50% 100%, rgba(90, 42, 18, 0.24) 0%, transparent 60%),
    radial-gradient(ellipse 45% 22% at 50% 0%, rgba(50, 28, 12, 0.20) 0%, transparent 70%);
}

/* dark edge vignette */
.cc-body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(13, 9, 7, 0) 58%, rgba(13, 9, 7, 0.6) 100%),
    radial-gradient(ellipse at 50% 100%, rgba(13, 9, 7, 0) 60%, rgba(13, 9, 7, 0.5) 100%);
}

/* engine-room SVG motion classes */
.ae-aether-pulse  { animation: cc-ae-aether-pulse 3.4s ease-in-out infinite; }
.ae-piston-rod    { animation: cc-ae-piston-stroke 2.4s ease-in-out infinite; transform-origin: top center; }
.ae-steam-puff    { animation: cc-ae-steam-puff 3.8s ease-out infinite; }
.ae-sp-a { animation-delay: 0s; }   .ae-sp-b { animation-delay: 0.8s; }
.ae-sp-c { animation-delay: 1.6s; } .ae-sp-d { animation-delay: 0.4s; }
.ae-sp-e { animation-delay: 1.2s; } .ae-sp-f { animation-delay: 2s; }
.ae-sp-g { animation-delay: 2.8s; } .ae-sp-h { animation-delay: 0.6s; }
.ae-needle-tremor  { animation: cc-ae-needle-tremor 4.2s ease-in-out infinite; }
.ae-coolant-flow-l { animation: cc-ae-coolant-flow 4s linear infinite; }
.ae-coolant-flow-r { animation: cc-ae-coolant-flow 4s linear infinite reverse; }
.ae-valve-spin     { animation: cc-ae-valve-spin 9s linear infinite; transform-origin: center; }
.ae-valve-relief   { animation: cc-ae-valve-spin 14s linear infinite; transform-origin: center; }
.ae-lamp--1 { animation: cc-ae-lamp-breathe 3.8s ease-in-out infinite 0s; }
.ae-lamp--2 { animation: cc-ae-lamp-breathe 3.8s ease-in-out infinite 1.2s; }
.ae-lamp--3 { animation: cc-ae-lamp-breathe 3.2s ease-in-out infinite 0.6s; }
.ae-lamp--4 { animation: cc-ae-lamp-breathe 4.4s ease-in-out infinite 1.9s; }

.cc-bg-scene--hot .ae-piston-rod { animation: cc-ae-piston-burst 0.9s ease-in-out infinite; }
.cc-bg-scene--hot .ae-valve-spin { animation: cc-ae-valve-spin 3s linear infinite; }
.cc-bg-scene--hot .ae-lamp--1,
.cc-bg-scene--hot .ae-lamp--2    { animation-duration: 1.2s; }

/* side decorative pipes (copper run, behind content) */
.cc-body .cc-sp-pipes {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.cc-body .cc-sp-pipe {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 14px;
}
.cc-body .cc-sp-pipe--left  { left: 20px; }
.cc-body .cc-sp-pipe--right { right: 20px; }
.cc-body .cc-sp-pipe--left,
.cc-body .cc-sp-pipe--right {
  background:
    linear-gradient(90deg, transparent 0%, rgba(92, 68, 48, 0.16) 30%, rgba(140, 107, 70, 0.3) 48%, rgba(168, 152, 138, 0.18) 52%, rgba(92, 68, 48, 0.2) 58%, transparent 80%),
    linear-gradient(90deg, rgba(13, 9, 7, 0) 0%, rgba(58, 46, 34, 0.55) 22%, rgba(92, 68, 48, 0.6) 50%, rgba(58, 46, 34, 0.55) 78%, rgba(13, 9, 7, 0) 100%);
  border-left: 1px solid rgba(58, 46, 34, 0.55);
  border-right: 1px solid rgba(58, 46, 34, 0.55);
}
.cc-body .cc-sp-pipe--left::before,
.cc-body .cc-sp-pipe--right::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg,
    transparent 0px, transparent 59px,
    rgba(92, 68, 48, 0.45) 60px, rgba(168, 152, 138, 0.35) 61px,
    rgba(92, 68, 48, 0.55) 62px, rgba(168, 152, 138, 0.25) 63px,
    rgba(92, 68, 48, 0.45) 64px, transparent 65px, transparent 124px);
}

/* scan-line stays between header and main (canon K) */
.cc-body .dt-scan-line {
  position: relative;
  z-index: 5;
}

/* ─────────────────────────────────────────────────────────────
   3. HEADER / BALKA  page overrides (canon B - shared dt-* base)
   ───────────────────────────────────────────────────────────── */
.cc-body .cc-header.al-header,
.cc-body .devtools-header.al-header {
  position: sticky;
  top: 0;
  z-index: 50;
}

/* header counter cluster → readable brass status counters
   (no removed IDs - purely visual rework of existing nodes) */
.cc-body .al-header-left-cluster {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  flex-wrap: wrap;
}

/* keep decorative crest gears from eating clicks (canon K) */
.cc-body .al-frame-svg,
.cc-body .al-backarrow-svg,
.cc-body .al-clock-svg {
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────
   4. SHELL & DEAD-ZONES  (§4-1 / canon J)
   ───────────────────────────────────────────────────────────── */
.cc-body .cc-pill-bar,
.cc-body .cc-views-bar,
.cc-body .cc-status-strip,
.cc-body .cc-tabs,
.cc-body .cc-main {
  position: relative;
  z-index: 1;
  /* canon-fix 2026-05-20: --sp-space-48 не визначено у dev-tools-base.css,
     fallback до 48px. Без fallback min() стає invalid → ширина 100% (full-width
     viewport на широких моніторах). */
  width: min(100% - var(--sp-space-7), var(--cc-shell-w));
  margin-inline: auto;
}

.cc-body .cc-main {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-5);
  padding: var(--sp-space-5) 0 var(--sp-space-7);
}

.cc-body .cc-section {
  display: none;
  position: relative;
  padding: var(--sp-space-5);
  animation: cc-fade-up 0.28s ease both;
}
.cc-body .cc-section.active { display: block; }

/* dt-panel base reinforcement (rivets are absolute children) */
.cc-body .cc-section.dt-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-metal);
  border-radius: var(--forge-radius);
  box-shadow: var(--forge-inset), var(--forge-shadow);
}

/* corner rivets - decorative forged bolt ornament (canon: pewter
   allowed on bolt radials / ornament per forge-tokens) */
.cc-body .sp-rivet {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--pewter-light), var(--bg-elevated));
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  z-index: 4;
}
.cc-body .sp-rivet::before {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background:
    linear-gradient(0deg, transparent 44%, rgba(0, 0, 0, 0.5) 44%, rgba(0, 0, 0, 0.5) 56%, transparent 56%),
    linear-gradient(90deg, transparent 44%, rgba(0, 0, 0, 0.5) 44%, rgba(0, 0, 0, 0.5) 56%, transparent 56%);
}
.cc-body .sp-rivet--tl { top: 8px;  left: 8px;  }
.cc-body .sp-rivet--tr { top: 8px;  right: 8px; }
.cc-body .sp-rivet--bl { bottom: 8px; left: 8px;  }
.cc-body .sp-rivet--br { bottom: 8px; right: 8px; }

/* al-module-rivet - decorative forged bolt ornament (overview
   section); pewter on bolt radials is canon ornament */
.cc-body .al-module-rivet {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--pewter-light), var(--bg-elevated));
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  z-index: 4;
}
.cc-body .al-module-rivet--tl { top: 8px;  left: 8px;  }
.cc-body .al-module-rivet--tr { top: 8px;  right: 8px; }
.cc-body .al-module-rivet--bl { bottom: 8px; left: 8px;  }
.cc-body .al-module-rivet--br { bottom: 8px; right: 8px; }

/* ─────────────────────────────────────────────────────────────
   5. CONTROL DECKS  (§4-3 / canon G,E)
   ───────────────────────────────────────────────────────────── */

/* command bar - Export / Live / Update Log / Update Snapshot */
.cc-body .cc-command-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  flex-wrap: wrap;
}

/* snapshot bar (pill metrics) */
.cc-body .cc-pill-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  flex-wrap: wrap;
  margin-top: var(--sp-space-4);
  padding: var(--sp-space-2) var(--sp-space-3);
  background: var(--bg-surface);
  border: 1px solid var(--border-metal);
  border-radius: var(--forge-radius);
  box-shadow: var(--forge-inset);
  min-height: 36px;
}
.cc-body .cc-pill,
.cc-body .cc-pill-metric {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-space-4);
  padding: var(--sp-space-4) var(--sp-space-2);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-dim);
  border-radius: var(--forge-radius);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-body);
}
.cc-body .cc-pill-count,
.cc-body .cc-pill-metric .cc-pill-count {
  color: var(--text-bright);
  font-size: 13px;
  font-weight: 600;
}
.cc-body .cc-pill-age,
.cc-body .cc-pill-delta {
  color: var(--text-muted);
  font-size: 10px;
}
.cc-body .cc-pill-inactive { opacity: 0.5; }
.cc-body .cc-pill-refresh,
.cc-body .cc-refresh-select {
  margin-left: auto;
}
.cc-body .cc-refresh-select {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-metal);
  border-radius: var(--forge-radius);
  color: var(--text-body);
  font-family: var(--font-ui);
  font-size: 11px;
  padding: var(--sp-space-4) var(--sp-space-2);
}

/* saved views bar */
.cc-body .cc-views-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  flex-wrap: wrap;
  margin-top: var(--sp-space-3);
}
.cc-body .cc-views-list {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  flex-wrap: wrap;
}
.cc-body .cc-views-empty {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-ui);
  letter-spacing: 0.06em;
}
.cc-body .cc-view-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space-4);
  padding: var(--sp-space-4) var(--sp-space-2);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-metal);
  border-radius: var(--forge-radius);
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--text-body);
}
.cc-body .cc-view-apply { cursor: pointer; }
.cc-body .cc-view-del {
  cursor: pointer;
  color: var(--text-muted);
  background: none;
  border: 0;
}
.cc-body .cc-view-del:hover { color: var(--danger-text); }

/* status rail (freshness strip) */
.cc-body .cc-status-strip {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  flex-wrap: wrap;
  margin-top: var(--sp-space-3);
  padding: var(--sp-space-2) var(--sp-space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-metal);
  border-radius: var(--forge-radius);
  box-shadow: var(--forge-inset);
  font-family: var(--font-mono);
  font-size: 11px;
}
.cc-body .cc-strip-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space-4);
  color: var(--text-body);
}
.cc-body .cc-strip-icon { font-size: 14px; color: var(--cc-accent); }
.cc-body .cc-strip-label { color: var(--text-muted); letter-spacing: 0.04em; }
.cc-body .cc-strip-value { color: var(--text-bright); }
.cc-body .cc-strip-timer { color: var(--text-muted); font-size: 10px; }
.cc-body .cc-strip-sep   { color: var(--border-bright); }
.cc-body .cc-freshness-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
}
.cc-body .cc-fresh  .cc-freshness-dot,
.cc-body .cc-freshness-dot.cc-fresh  { background: var(--log-ok); animation: cc-led-pulse 3s ease-in-out infinite; }
.cc-body .cc-stale  .cc-freshness-dot,
.cc-body .cc-freshness-dot.cc-stale  { background: var(--log-warn); }
.cc-body .cc-strip-search-hint {
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.cc-body .cc-strip-search-hint:hover { opacity: 1; }

/* filter deck (search bars) */
.cc-body .cc-search-bar,
.cc-body .cc-filter-deck {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-space-4);
  padding: var(--sp-space-2) var(--sp-space-3);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-metal);
  border-radius: var(--forge-radius);
  box-shadow: var(--forge-inset);
}
.cc-body .cc-search-icon { color: var(--cc-accent); font-size: 18px; }
.cc-body .cc-search-input {
  flex: 1;
  min-width: 160px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-metal);
  border-radius: var(--forge-radius);
  color: var(--text-bright);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: var(--sp-space-2) var(--sp-space-3);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cc-body .cc-search-input::placeholder { color: var(--text-muted); }
.cc-body .cc-search-input:focus-visible {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 2px var(--cc-accent-glow);
}
.cc-body .cc-search-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}
.cc-body .cc-filter-chips {
  display: flex;
  align-items: center;
  gap: var(--sp-space-4);
  flex-wrap: wrap;
}
.cc-body .cc-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space-4);
  padding: var(--sp-space-4) var(--sp-space-2);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-metal);
  border-radius: 9999px;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.cc-body .cc-filter-chip:hover { border-color: var(--border-bright); color: var(--text-body); }
.cc-body .cc-filter-chip.active {
  background: var(--cc-accent-soft);
  border-color: var(--cc-accent-line);
  color: var(--cc-accent);
}

/* ─────────────────────────────────────────────────────────────
   6. BUTTONS  (canon G - all states)
   ───────────────────────────────────────────────────────────── */
.cc-body .cc-btn,
.cc-body .cc-export-btn,
.cc-body .cc-changelog-btn,
.cc-body .cc-sync-btn,
.cc-body .cc-view-save,
.cc-body .cc-crossref-toggle,
.cc-body .cc-empty-retry,
.cc-body .cc-detail-back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space-4);
  padding: var(--sp-space-2) var(--sp-space-3);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-metal);
  border-radius: var(--forge-radius);
  color: var(--text-body);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--forge-bevel);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.cc-body .cc-btn .material-symbols-outlined,
.cc-body .cc-export-btn .material-symbols-outlined,
.cc-body .cc-changelog-btn .material-symbols-outlined,
.cc-body .cc-sync-btn .material-symbols-outlined,
.cc-body .cc-view-save .material-symbols-outlined,
.cc-body .cc-crossref-toggle .material-symbols-outlined,
.cc-body .cc-detail-back .material-symbols-outlined { font-size: 15px; color: var(--cc-accent); }

.cc-body .cc-btn:hover,
.cc-body .cc-export-btn:hover,
.cc-body .cc-changelog-btn:hover,
.cc-body .cc-sync-btn:hover,
.cc-body .cc-view-save:hover,
.cc-body .cc-crossref-toggle:hover,
.cc-body .cc-empty-retry:hover,
.cc-body .cc-detail-back:hover {
  background: var(--cc-accent-soft);
  border-color: var(--cc-accent-line);
  color: var(--text-bright);
}
.cc-body .cc-btn:active,
.cc-body .cc-export-btn:active,
.cc-body .cc-changelog-btn:active,
.cc-body .cc-sync-btn:active,
.cc-body .cc-view-save:active,
.cc-body .cc-crossref-toggle:active,
.cc-body .cc-detail-back:active {
  border-color: var(--accent-brass-dim);
  box-shadow: var(--forge-inset);
}
.cc-body .cc-btn:disabled,
.cc-body .cc-export-btn:disabled,
.cc-body .cc-sync-btn:disabled {
  opacity: 0.4;
  filter: grayscale(0.6);
  cursor: not-allowed;
}
.cc-body .cc-btn:focus-visible,
.cc-body .cc-export-btn:focus-visible,
.cc-body .cc-changelog-btn:focus-visible,
.cc-body .cc-sync-btn:focus-visible,
.cc-body .cc-view-save:focus-visible,
.cc-body .cc-crossref-toggle:focus-visible,
.cc-body .cc-tab:focus-visible,
.cc-body .cc-detail-back:focus-visible,
.cc-body .cc-empty-retry:focus-visible,
.cc-body button:focus-visible,
.cc-body [role="button"]:focus-visible {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 2px var(--cc-accent-glow);
}

.cc-body .cc-btn-primary {
  background: var(--cc-accent-soft);
  border-color: var(--cc-accent-line);
  color: var(--cc-accent);
}
.cc-body .cc-btn-primary:hover { background: rgba(197, 139, 58, 0.24); }
.cc-body .cc-btn-success { color: var(--success); border-color: var(--success-border); }
.cc-body .cc-btn-ghost { background: none; }
.cc-body .cc-btn-label { font-size: 11px; }

.cc-body .cc-changelog-btn { position: relative; }
.cc-body .cc-changelog-badge,
.cc-body .cc-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  padding: 0 var(--sp-space-4);
  background: var(--cc-accent-soft);
  border: 1px solid var(--cc-accent-line);
  border-radius: 9999px;
  color: var(--cc-accent);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
}
.cc-body .cc-changelog-badge:empty { display: none; }

.cc-body .cc-export-wrap { position: relative; }
.cc-body .cc-export-caret,
.cc-body .cc-crossref-arrow { transition: transform 0.15s ease; }
.cc-body .cc-export-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 60;
  display: none;
  flex-direction: column;
  min-width: 200px;
  padding: var(--sp-space-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border-metal);
  border-radius: var(--vr-radius);
  box-shadow: var(--forge-shadow);
}
.cc-body .cc-export-menu.cc-export-menu-open { display: flex; }
.cc-body .cc-export-menu button {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  padding: var(--sp-space-2) var(--sp-space-3);
  background: none;
  border: 0;
  color: var(--text-body);
  font-family: var(--font-ui);
  font-size: 11px;
  text-align: left;
  cursor: pointer;
  border-radius: var(--forge-radius);
}
.cc-body .cc-export-menu button:hover { background: var(--bg-hover); color: var(--text-bright); }
.cc-body .cc-export-menu .material-symbols-outlined { font-size: 15px; color: var(--cc-accent); }

.cc-body .cc-hb-close,
.cc-body .cc-hook-detail-close,
.cc-body .cc-asp-close,
.cc-body .cc-cap-header-btn,
.cc-body .cc-cap-action-btn,
.cc-body .cc-mcp-expand-btn,
.cc-body .cc-hook-pcard-toggle,
.cc-body .cc-xref-tool-btn,
.cc-body .cc-xref-toggle-btn,
.cc-body .cc-xref-pin-btn,
.cc-body .cc-xref-search-clear,
.cc-body .cc-xref-focus-clear,
.cc-body .cc-code-toggle,
.cc-body .cc-mcp-cmd-expand,
.cc-body .cc-passport-section-toggle,
.cc-body .cc-smart-report-details-summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-space-4);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-metal);
  border-radius: var(--forge-radius);
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: 11px;
  padding: var(--sp-space-4) var(--sp-space-2);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.cc-body .cc-hb-close:hover,
.cc-body .cc-hook-detail-close:hover,
.cc-body .cc-asp-close:hover,
.cc-body .cc-cap-header-btn:hover,
.cc-body .cc-cap-action-btn:hover,
.cc-body .cc-mcp-expand-btn:hover,
.cc-body .cc-xref-tool-btn:hover,
.cc-body .cc-code-toggle:hover,
.cc-body .cc-passport-section-toggle:hover {
  border-color: var(--border-bright);
  color: var(--text-bright);
}
.cc-body .cc-cap-header-btn .material-symbols-outlined,
.cc-body .cc-mcp-expand-btn .material-symbols-outlined,
.cc-body .cc-hb-close .material-symbols-outlined { font-size: 15px; }

/* ─────────────────────────────────────────────────────────────
   7. TABS  (canon G - JS toggles .active / aria-selected)
   ───────────────────────────────────────────────────────────── */
.cc-body .cc-tabs {
  display: flex;
  align-items: stretch;
  gap: var(--sp-space-4);
  margin-top: var(--sp-space-4);
  padding: var(--sp-space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-metal);
  border-radius: var(--forge-radius);
  box-shadow: var(--forge-inset);
  overflow-x: auto;
  overflow-y: hidden;
}
.cc-body .cc-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space-4);
  flex-shrink: 0;
  padding: var(--sp-space-2) var(--sp-space-3);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--forge-radius);
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cc-body .cc-tab .material-symbols-outlined { font-size: 15px; }
.cc-body .cc-tab:hover { color: var(--text-body); background: rgba(0, 0, 0, 0.25); }
.cc-body .cc-tab.active {
  background: var(--cc-accent-soft);
  border-color: var(--cc-accent-line);
  color: var(--cc-accent);
}
.cc-body .cc-tab.active .cc-tab-badge {
  background: rgba(0, 0, 0, 0.3);
}

/* ─────────────────────────────────────────────────────────────
   8. OVERVIEW - stat grid + cohesive panel system  (§4-4/5)
   ───────────────────────────────────────────────────────────── */
.cc-body .cc-stat-grid,
.cc-body .cc-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-space-3);
  margin-bottom: var(--sp-space-5);
}
.cc-body .cc-stat-card {
  --stat-accent: var(--cc-accent);
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-space-3);
  padding: var(--vr-card-pad);
  background: var(--bg-base);
  border: 1px solid var(--border-metal);
  border-left: 3px solid var(--stat-accent);
  border-radius: var(--forge-radius);
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--forge-inset);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  animation: cc-fade-up 0.3s ease both;
}
.cc-body .cc-stat-card:hover {
  transform: translateY(-1px);
  border-color: var(--border-bright);
  box-shadow: var(--forge-shadow);
}
.cc-body .cc-stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  background: var(--cc-accent-soft);
  border: 1px solid var(--cc-accent-line);
  border-radius: var(--forge-radius);
}
.cc-body .cc-stat-icon .material-symbols-outlined { font-size: 20px; color: var(--cc-accent); }
.cc-body .cc-stat-body { display: flex; flex-direction: column; }
.cc-body .cc-stat-num {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--text-bright);
}
.cc-body .cc-stat-label {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cc-body .cc-stat-glow {
  position: absolute;
  inset: auto -20px -20px auto;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, var(--cc-accent-glow), transparent 70%);
  pointer-events: none;
}
.cc-body .cc-stat-agents  { --stat-accent: var(--mod-applicant); }
.cc-body .cc-stat-skills  { --stat-accent: var(--mod-nexus); }
.cc-body .cc-stat-hooks   { --stat-accent: var(--mod-challenger); }
.cc-body .cc-stat-mcp     { --stat-accent: var(--accent-brass); }
.cc-body .cc-stat-memory  { --stat-accent: var(--mod-observer); }
.cc-body .cc-stat-perms   { --stat-accent: var(--mod-executor); }

/* crossref toggle */
.cc-body .cc-crossref-toggle-wrap { margin-bottom: var(--sp-space-3); }
.cc-body .cc-crossref-panel {
  margin-bottom: var(--sp-space-4);
  padding: var(--sp-space-4);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-metal);
  border-radius: var(--forge-radius);
}
.cc-body .cc-crossref-sections { display: flex; flex-direction: column; gap: var(--sp-space-4); }

/* overview grid - cohesive 12-col-ish auto system */
.cc-body .cc-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--sp-space-4);
}

/* shared card frame for overview + many panels */
.cc-body .cc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border-metal);
  border-radius: var(--forge-radius);
  box-shadow: var(--forge-inset);
  overflow: hidden;
}
.cc-body .cc-card-network { grid-column: 1 / -1; }
.cc-body .cc-card-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  padding: var(--sp-space-3) var(--sp-space-4);
  background: linear-gradient(180deg, var(--cc-accent-soft) 0%, rgba(197, 139, 58, 0.05) 100%);
  border-bottom: 1px solid var(--cc-accent-line);
}
.cc-body .cc-card-icon { color: var(--cc-accent); font-size: 16px; }
.cc-body .cc-card-title {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cc-accent);
  flex: 1;
}
.cc-body .cc-card-body {
  position: relative;
  padding: var(--sp-space-4);
}
.cc-body .cc-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-space-2);
  padding: var(--sp-space-2) var(--sp-space-4);
  border-top: 1px solid var(--border-dim);
}
.cc-body .cc-card-top { display: flex; align-items: flex-start; gap: var(--sp-space-3); }

/* ─────────────────────────────────────────────────────────────
   9. AGENT / SKILL / HOOK CARDS  (§4-8 - equal-height grid)
   ───────────────────────────────────────────────────────────── */
.cc-body .cc-agent-grid,
.cc-body .cc-skills-grid,
.cc-body .cc-hooks-cards,
.cc-body .cc-memory-grid,
.cc-body .cc-cheatsheet-grid,
.cc-body .cc-mcp-passport-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-space-4);
  align-items: stretch;
}
.cc-body .cc-agent-card,
.cc-body .cc-skill-card,
.cc-body .cc-hook-card,
.cc-body .cc-memory-card,
.cc-body .cc-cheatsheet-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-2);
  height: 100%;
  padding: var(--vr-card-pad);
  background: var(--bg-surface);
  border: 1px solid var(--border-metal);
  border-radius: var(--forge-radius);
  box-shadow: var(--forge-inset);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  animation: cc-row-in 0.28s ease both;
}
.cc-body .cc-agent-card:hover,
.cc-body .cc-skill-card:hover,
.cc-body .cc-hook-card:hover,
.cc-body .cc-memory-card:hover,
.cc-body .cc-cheatsheet-card:hover {
  transform: translateY(-1px);
  border-color: var(--border-bright);
  box-shadow: var(--forge-shadow);
}
.cc-body .cc-card-type-icon,
.cc-body .cc-memory-card-icon,
.cc-body .cc-cheatsheet-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  background: var(--cc-accent-soft);
  border: 1px solid var(--cc-accent-line);
  border-radius: var(--forge-radius);
}
.cc-body .cc-card-type-icon .material-symbols-outlined,
.cc-body .cc-memory-card-icon .material-symbols-outlined { font-size: 18px; color: var(--cc-accent); }
.cc-body .cc-card-info { flex: 1; min-width: 0; }
.cc-body .cc-card-name,
.cc-body .cc-memory-card-name,
.cc-body .cc-cheatsheet-card-name {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-bright);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cc-body .cc-card-desc {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cc-body .cc-badges-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-space-4);
}
.cc-body .cc-badge,
.cc-body .cc-mcp-badge,
.cc-body .cc-hook-type-badge,
.cc-body .cc-hook-event-badge,
.cc-body .cc-report-type-badge,
.cc-body .cc-memory-card-type,
.cc-body .cc-clog-file-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space-4);
  padding: var(--sp-space-4) var(--sp-space-2);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-dim);
  border-radius: 9999px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
}
.cc-body .cc-badge .material-symbols-outlined { font-size: 11px; }
.cc-body .cc-badge-model    { color: var(--cc-accent); border-color: var(--cc-accent-line); }
.cc-body .cc-badge-tools    { color: var(--mod-applicant); }
.cc-body .cc-badge-mcp      { color: var(--accent-brass); }
.cc-body .cc-badge-stale    { color: var(--log-warn); border-color: var(--border-medium); }
.cc-body .cc-badge-report   { color: var(--log-ok); }
.cc-body .cc-badge-no-report{ color: var(--text-dim); }
.cc-body .cc-card-footer { margin-top: auto; }
.cc-body .cc-card-date {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space-4);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
}
.cc-body .cc-card-date .material-symbols-outlined { font-size: 12px; }
.cc-body .cc-integrations-row { display: inline-flex; gap: var(--sp-space-4); }
.cc-body .cc-int-icon { color: var(--text-muted); }
.cc-body .cc-int-icon .material-symbols-outlined { font-size: 14px; }
.cc-body .cc-stale { opacity: 0.85; }
.cc-body .cc-stale .cc-card-name { color: var(--log-warn); }

/* agent health mini-bar */
.cc-body .cc-agent-health-mini { display: flex; flex-direction: column; gap: var(--sp-space-4); align-items: flex-end; }
.cc-body .cc-agent-health-mini-label { display: inline-flex; align-items: center; gap: var(--sp-space-4); }
.cc-body .cc-agent-health-mini-label .material-symbols-outlined { font-size: 13px; color: var(--text-muted); }
.cc-body .cc-agent-health-mini-score { font-family: var(--font-mono); font-size: 12px; font-weight: 600; }
.cc-body .cc-agent-health-mini-bar {
  width: 56px;
  height: 4px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 9999px;
  overflow: hidden;
}
.cc-body .cc-agent-health-mini-fill { height: 100%; background: var(--cc-accent); }

/* ─────────────────────────────────────────────────────────────
   10. DETAIL / DOSSIER  (§4-8 agent detail rhythm)
   ───────────────────────────────────────────────────────────── */
.cc-body .cc-detail-panel {
  animation: cc-detail-enter 0.25s ease both;
}
.cc-body .cc-detail-header {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-space-3);
  flex-wrap: wrap;
  padding-bottom: var(--sp-space-4);
  margin-bottom: var(--sp-space-4);
  border-bottom: 1px solid var(--border-dim);
}
.cc-body .cc-detail-title-block { flex: 1; min-width: 0; }
.cc-body .cc-detail-title {
  margin: 0;
  font-family: var(--font-dt-title);
  font-size: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-bright);
}
.cc-body .cc-detail-badges { display: flex; flex-wrap: wrap; gap: var(--sp-space-4); margin-top: var(--sp-space-2); }
.cc-body .cc-detail-actions { display: flex; gap: var(--sp-space-2); flex-wrap: wrap; }
.cc-body .cc-detail-section {
  margin-bottom: var(--sp-space-4);
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--border-metal);
  border-radius: var(--forge-radius);
  overflow: hidden;
}
.cc-body .cc-detail-section-header {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  padding: var(--sp-space-2) var(--sp-space-4);
  background: var(--cc-accent-soft);
  border-bottom: 1px solid var(--cc-accent-line);
}
.cc-body .cc-detail-section-title {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cc-accent);
}
.cc-body .cc-detail-section-body { padding: var(--sp-space-4); }

/* ─────────────────────────────────────────────────────────────
   11. CODE BLOCKS  (canon H - mono)
   ───────────────────────────────────────────────────────────── */
.cc-body .cc-code-block,
.cc-body .cc-code-wrap,
.cc-body .cc-smart-code-card,
.cc-body .cc-v2-output-code-col {
  position: relative;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--border-metal);
  border-radius: var(--forge-radius);
  overflow: hidden;
}
.cc-body .cc-code-header,
.cc-body .cc-smart-code-lang {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-space-2);
  padding: var(--sp-space-4) var(--sp-space-3);
  background: rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid var(--border-dim);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cc-body .cc-code-actions { display: flex; gap: var(--sp-space-4); }
.cc-body .cc-code-textarea,
.cc-body .cc-smart-code-pre,
.cc-body .cc-v2-annot-code-pre,
.cc-body .cc-v2-output-code,
.cc-body .cc-claudemd-code-area {
  display: block;
  width: 100%;
  padding: var(--sp-space-3) var(--sp-space-4);
  background: transparent;
  border: 0;
  color: var(--text-body);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  white-space: pre;
  overflow-x: auto;
  resize: vertical;
}
.cc-body .cc-inline-code,
.cc-body .cc-md-inline-code {
  padding: 1px var(--sp-space-4);
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border-dim);
  border-radius: var(--forge-radius);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--cc-accent);
}

/* ─────────────────────────────────────────────────────────────
   12. EMPTY / LOADING STATES  (§4-9 - industrial)
   ───────────────────────────────────────────────────────────── */
.cc-body .cc-empty-state,
.cc-body .cc-hooks-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-space-3);
  padding: var(--sp-space-7) var(--sp-space-5);
  text-align: center;
}
.cc-body .cc-empty-icon,
.cc-body .cc-hooks-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-metal);
  border-radius: 50%;
}
.cc-body .cc-empty-icon .material-symbols-outlined { font-size: 28px; color: var(--text-muted); }
.cc-body .cc-empty-text,
.cc-body .cc-hooks-empty-title {
  font-family: var(--font-dt-title);
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-body);
}
.cc-body .cc-empty-sub,
.cc-body .cc-hooks-empty-sub {
  max-width: 420px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted);
}
.cc-body .cc-loading-line,
.cc-body .cc-skel-line {
  height: 12px;
  margin: var(--sp-space-2) 0;
  border-radius: var(--forge-radius);
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0.3) 0%, var(--cc-accent-glow) 50%, rgba(0, 0, 0, 0.3) 100%);
  background-size: 720px 100%;
  animation: cc-skel-shimmer 1.4s linear infinite;
}
.cc-body .cc-skel-wrap,
.cc-body .cc-reports-loading,
.cc-body .cc-afk-loading,
.cc-body .cc-changelog-loading { padding: var(--sp-space-4); }
.cc-body .cc-loading-text {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
}
.cc-body .cc-placeholder {
  padding: var(--sp-space-5);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
}
.cc-body .cc-error-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  padding: var(--vr-card-pad);
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  border-radius: var(--forge-radius);
  color: var(--danger-text);
  font-family: var(--font-mono);
  font-size: 12px;
}

/* ─────────────────────────────────────────────────────────────
   13. STATUS CHIPS  (§4-7 - log severity harmony, canon A)
   ───────────────────────────────────────────────────────────── */
.cc-body .cc-chip,
.cc-body [class*="cc-chip--"],
.cc-body .cc-status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space-4);
  padding: 1px var(--sp-space-2);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-dim);
  border-radius: 9999px;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cc-body .cc-chip--pass,
.cc-body .cc-clog-action-add,
.cc-body .cc-reports-stat-pass { color: var(--log-ok); border-color: var(--border-info); }
.cc-body .cc-chip--partial,
.cc-body .cc-clog-action-modify,
.cc-body .cc-reports-stat-partial { color: var(--log-warn); border-color: var(--border-medium); }
.cc-body .cc-chip--fail,
.cc-body .cc-clog-action-delete,
.cc-body .cc-reports-stat-fail { color: var(--log-error); border-color: var(--border-high); }
.cc-body .cc-chip--draft { color: var(--text-muted); }
.cc-body .cc-chip--resolved { color: var(--success); border-color: var(--success-border); }
.cc-body .cc-chip--conflict { color: var(--log-critical); border-color: var(--border-critical); }

/* ─────────────────────────────────────────────────────────────
   14. UPDATE LOG FEED  (§4-7)
   ───────────────────────────────────────────────────────────── */
.cc-body .cc-clog-wrap { display: flex; flex-direction: column; gap: var(--sp-space-4); }
.cc-body .cc-clog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-space-3);
  flex-wrap: wrap;
  padding-bottom: var(--sp-space-3);
  border-bottom: 1px solid var(--border-dim);
}
.cc-body .cc-clog-toolbar-title {
  font-family: var(--font-dt-title);
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-bright);
}
.cc-body .cc-clog-list { display: flex; flex-direction: column; gap: var(--sp-space-3); }
.cc-body .cc-clog-entry {
  padding: var(--vr-card-pad);
  background: var(--bg-surface);
  border: 1px solid var(--border-metal);
  border-left: 3px solid var(--cc-accent);
  border-radius: var(--forge-radius);
  box-shadow: var(--forge-inset);
  animation: cc-row-in 0.25s ease both;
}
.cc-body .cc-clog-header {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-space-2);
}
.cc-body .cc-clog-cat-icon { color: var(--cc-accent); font-size: 15px; }
.cc-body .cc-clog-title {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-bright);
  flex: 1;
  min-width: 0;
}
.cc-body .cc-clog-date,
.cc-body .cc-clog-time,
.cc-body .cc-clog-id,
.cc-body .cc-clog-author {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
}
.cc-body .cc-clog-summary,
.cc-body .cc-clog-why {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-body);
  max-width: 80ch;
}
.cc-body .cc-clog-meta { display: flex; flex-wrap: wrap; gap: var(--sp-space-2); margin-top: var(--sp-space-2); }
.cc-body .cc-clog-sep { color: var(--border-bright); }
.cc-body .cc-clog-files-title {
  display: flex;
  align-items: center;
  gap: var(--sp-space-4);
  margin-top: var(--sp-space-3);
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cc-body .cc-clog-files { display: flex; flex-direction: column; gap: var(--sp-space-4); margin-top: var(--sp-space-2); }
.cc-body .cc-clog-file {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  padding: var(--sp-space-4) var(--sp-space-2);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-dim);
  border-radius: var(--forge-radius);
}
.cc-body .cc-clog-file-icon { font-size: 14px; }
.cc-body .cc-clog-file-body { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-space-2); }
.cc-body .cc-clog-file-path {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-body);
  word-break: break-all;
}
.cc-body .cc-clog-file-desc {
  flex-basis: 100%;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}
.cc-body .cc-clog-limits,
.cc-body .cc-clog-toolbar .cc-clog-limit {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

/* changelog history overlay */
.cc-body .cc-history-overlay,
.cc-body .cc-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sp-space-5);
  background: rgba(13, 9, 7, 0.85);
}
.cc-body .cc-history-overlay.cc-modal-open,
.cc-body .cc-modal-overlay.cc-modal-open,
.cc-body .cc-modal-overlay.cc-visible,
.cc-body .cc-history-overlay.cc-visible { display: flex; }
.cc-body .cc-history-modal,
.cc-body .cc-modal-box,
.cc-body .cc-hb-modal {
  width: min(100%, 720px);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--border-metal);
  border-radius: var(--vr-radius);
  box-shadow: var(--forge-shadow);
  overflow: hidden;
  animation: cc-detail-enter 0.2s ease both;
}
.cc-body .cc-history-header,
.cc-body .cc-hb-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-space-2);
  padding: var(--sp-space-3) var(--sp-space-4);
  background: var(--cc-accent-soft);
  border-bottom: 1px solid var(--cc-accent-line);
}
.cc-body .cc-history-title,
.cc-body .cc-hb-modal-title {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cc-accent);
}
.cc-body .cc-history-body,
.cc-body .cc-hb-modal .cc-hb-metrics { padding: var(--sp-space-4); overflow-y: auto; }
.cc-body .cc-history-item {
  padding: var(--vr-card-pad);
  border: 1px solid var(--border-dim);
  border-radius: var(--forge-radius);
  margin-bottom: var(--sp-space-2);
}
.cc-body .cc-history-item-title { font-family: var(--font-ui); font-size: 12px; color: var(--text-bright); }
.cc-body .cc-history-commit,
.cc-body .cc-history-author,
.cc-body .cc-history-date { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); }
.cc-body .cc-history-error,
.cc-body .cc-history-fallback-note { color: var(--log-warn); font-family: var(--font-mono); font-size: 11px; }

/* ─────────────────────────────────────────────────────────────
   15. MCP PANEL  (§4-6 - compact, ellipsis, no dead right side)
   ───────────────────────────────────────────────────────────── */
.cc-body .cc-mcp-passport-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border-metal);
  border-radius: var(--forge-radius);
  box-shadow: var(--forge-inset);
  overflow: hidden;
  animation: cc-row-in 0.25s ease both;
}
.cc-body .cc-mcp-passport-header {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-space-2);
  padding: var(--vr-card-pad);
  border-bottom: 1px solid var(--border-dim);
}
.cc-body .cc-mcp-passport-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background: var(--cc-accent-soft);
  border: 1px solid var(--cc-accent-line);
  border-radius: var(--forge-radius);
}
.cc-body .cc-mcp-passport-icon .material-symbols-outlined { font-size: 17px; color: var(--cc-accent); }
.cc-body .cc-mcp-passport-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-space-4); }
.cc-body .cc-mcp-passport-name-row { display: flex; align-items: center; gap: var(--sp-space-2); flex-wrap: wrap; }
.cc-body .cc-mcp-passport-name {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-bright);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.cc-body .cc-mcp-status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space-4);
  padding: 1px var(--sp-space-2);
  border-radius: 9999px;
  border: 1px solid var(--border-dim);
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cc-body .cc-mcp-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
}
.cc-body .cc-mcp-status-online  .cc-mcp-status-dot { background: var(--log-ok); }
.cc-body .cc-mcp-status-online  { color: var(--log-ok); border-color: var(--border-info); }
.cc-body .cc-mcp-status-offline .cc-mcp-status-dot { background: var(--log-error); }
.cc-body .cc-mcp-status-offline { color: var(--log-error); border-color: var(--border-high); }
.cc-body .cc-mcp-status-external .cc-mcp-status-dot { background: var(--cc-accent); }
.cc-body .cc-mcp-status-external { color: var(--cc-accent); border-color: var(--cc-accent-line); }
.cc-body .cc-mcp-passport-badges { display: flex; flex-wrap: wrap; gap: var(--sp-space-4); }
.cc-body .cc-mcp-passport-cmd-row {
  display: flex;
  align-items: center;
  gap: var(--sp-space-4);
  min-width: 0;
}
.cc-body .cc-mcp-passport-cmd {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.cc-body .cc-mcp-cmd-expand { color: var(--cc-accent); cursor: pointer; padding-left: var(--sp-space-4); }
.cc-body .cc-mcp-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border-dim);
}
.cc-body .cc-mcp-stat-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-space-4);
  padding: var(--sp-space-2);
  background: var(--bg-surface);
}
.cc-body .cc-mcp-stat-value { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--text-bright); }
.cc-body .cc-mcp-stat-key { font-family: var(--font-ui); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.cc-body .cc-mcp-tools-body { display: none; padding: var(--sp-space-3) var(--sp-space-4); border-top: 1px solid var(--border-dim); }
.cc-body .cc-mcp-passport-card.expanded .cc-mcp-tools-body { display: block; }
.cc-body .cc-mcp-passport-card.expanded .cc-mcp-expand-btn .material-symbols-outlined { transform: rotate(180deg); }
.cc-body .cc-hook-expanded-cmd {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  word-break: break-all;
}

/* tool groups (MCP + agent tools) - compact density list */
.cc-body .cc-tool-groups,
.cc-body .cc-mcp-tool-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-space-3);
}
.cc-body .cc-tool-group {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-dim);
  border-radius: var(--forge-radius);
  padding: var(--sp-space-2);
  animation: cc-row-in 0.2s ease both;
}
.cc-body .cc-tool-group-label {
  display: flex;
  align-items: center;
  gap: var(--sp-space-4);
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-space-2);
}
.cc-body .cc-tool-group-count {
  margin-left: auto;
  font-family: var(--font-mono);
  color: var(--cc-accent);
}
.cc-body .cc-tool-bubbles-row { display: flex; flex-wrap: wrap; gap: var(--sp-space-4); }
.cc-body .cc-tool-bubble,
.cc-body .cc-mcp-bubble {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space-4);
  max-width: 100%;
  padding: 1px var(--sp-space-2);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-dim);
  border-radius: 9999px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-body);
}
.cc-body .cc-tool-bubble-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}
.cc-body .cc-tool-bubble-icon { font-size: 11px; color: var(--cc-accent); }
.cc-body .cc-tool-group-label-blue   { color: var(--mod-applicant); }
.cc-body .cc-tool-group-label-green  { color: var(--log-ok); }
.cc-body .cc-tool-group-label-amber  { color: var(--log-warn); }
.cc-body .cc-tool-group-label-brass  { color: var(--cc-accent); }
.cc-body .cc-tool-group-label-red    { color: var(--log-error); }

/* ─────────────────────────────────────────────────────────────
   16. GENERIC GRID/BAR/STAT PRIMITIVES (covers wide cc-* surface)
   ───────────────────────────────────────────────────────────── */
.cc-body [class$="-grid"],
.cc-body [class*="-grid "] {
  display: grid;
  gap: var(--sp-space-3);
}
.cc-body .cc-meta-grid,
.cc-body .cc-config-rules-grid,
.cc-body .cc-afk-config-grid,
.cc-body .cc-mcp-passport-grid,
.cc-body .cc-stat-drawer-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.cc-body .cc-meta-info-row,
.cc-body .cc-meta-stats-row,
.cc-body .cc-passport-meta-row,
.cc-body .cc-config-stats-visual {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-space-3);
}
.cc-body .cc-meta-key,
.cc-body .cc-passport-meta-key,
.cc-body .cc-stat-drawer-summary-lbl,
.cc-body .cc-config-section-label,
.cc-body .cc-meta-stat-label {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cc-body .cc-meta-val,
.cc-body .cc-passport-meta-val {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-bright);
  word-break: break-word;
}
.cc-body .cc-meta-stat-num,
.cc-body .cc-stat-drawer-summary-num,
.cc-body .cc-config-stat-visual-num,
.cc-body .cc-tl-stat-num,
.cc-body .cc-reports-stat-num,
.cc-body .cc-afk-kpi-num,
.cc-body .cc-cost-num,
.cc-body .cc-hb-score-num {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 600;
  color: var(--text-bright);
}

/* generic progress/density bars (health, cost, config, stats…) */
.cc-body .cc-stats-bar-track,
.cc-body .cc-cost-bar-track,
.cc-body .cc-afk-bar-track,
.cc-body .cc-health-factor-bar,
.cc-body .cc-hb-bar,
.cc-body .cc-config-stat-bar,
.cc-body .cc-xref-count-bar,
.cc-body .cc-lb-bar,
.cc-body .cc-meta-fresh-bar {
  position: relative;
  height: 6px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 9999px;
  overflow: hidden;
}
.cc-body .cc-stats-bar-fill,
.cc-body .cc-cost-bar-fill,
.cc-body .cc-afk-bar-fill,
.cc-body .cc-health-factor-fill,
.cc-body .cc-hb-bar-fill,
.cc-body .cc-config-stat-progress,
.cc-body .cc-lb-bar-fill,
.cc-body .cc-meta-fresh-fill {
  height: 100%;
  background: var(--cc-accent);
  border-radius: 9999px;
  transform-origin: left center;
  animation: cc-meter-fill 0.5s ease-out both;
}
.cc-body .cc-config-stat-progress-hooks { background: var(--mod-challenger); }
.cc-body .cc-stats-bar-mcp   { background: var(--accent-brass); }
.cc-body .cc-stats-bar-tools { background: var(--mod-applicant); }
.cc-body .cc-stats-bar-lines { background: var(--log-ok); }

.cc-body .cc-cost-bar-row,
.cc-body .cc-afk-bar-row,
.cc-body .cc-health-factor-row,
.cc-body .cc-lb-row,
.cc-body .cc-stats-bar-item {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 2fr auto;
  align-items: center;
  gap: var(--sp-space-2);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-body);
  padding: var(--sp-space-4) 0;
}
.cc-body .cc-cost-bar-label,
.cc-body .cc-afk-bar-label,
.cc-body .cc-health-factor-label,
.cc-body .cc-lb-label,
.cc-body .cc-stats-bar-lbl { color: var(--text-muted); }
.cc-body .cc-cost-bar-val,
.cc-body .cc-afk-bar-num,
.cc-body .cc-health-factor-val,
.cc-body .cc-lb-count,
.cc-body .cc-stats-bar-val { color: var(--text-bright); text-align: right; }

/* KPI strips (afk, cost, reports) */
.cc-body .cc-afk-kpi-strip,
.cc-body .cc-reports-stats,
.cc-body .cc-cost-kpi,
.cc-body .cc-tl-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-space-3);
  margin-bottom: var(--sp-space-4);
}
.cc-body .cc-afk-kpi,
.cc-body .cc-reports-stat-card,
.cc-body .cc-cost-kpi > *,
.cc-body .cc-tl-stat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-4);
  padding: var(--vr-card-pad);
  background: var(--bg-surface);
  border: 1px solid var(--border-metal);
  border-radius: var(--forge-radius);
  box-shadow: var(--forge-inset);
}
.cc-body .cc-afk-kpi-label,
.cc-body .cc-reports-stat-label,
.cc-body .cc-cost-label,
.cc-body .cc-tl-stat-label {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cc-body .cc-afk-kpi-icon .material-symbols-outlined { color: var(--cc-accent); }

/* ─────────────────────────────────────────────────────────────
   17. NETWORK GRAPH / XREF / DEPS / CAPABILITIES
   ───────────────────────────────────────────────────────────── */
.cc-body .cc-net-container {
  position: relative;
  min-height: 420px;
  border: 1px solid var(--border-dim);
  border-radius: var(--forge-radius);
  background: rgba(0, 0, 0, 0.22);
  overflow: hidden;
}
.cc-body .cc-net-svg-layer { position: absolute; inset: 0; pointer-events: none; }
.cc-body .cc-net-html-node {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-space-4);
  padding: var(--sp-space-4) var(--sp-space-2);
  background: var(--bg-elevated);
  border: 1px solid var(--border-metal);
  border-radius: var(--forge-radius);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-body);
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.cc-body .cc-net-html-node:hover { border-color: var(--border-bright); }
.cc-body .cc-net-hub { border-color: var(--cc-accent-line); color: var(--cc-accent); }
.cc-body .cc-net-node-icon .material-symbols-outlined { font-size: 14px; }
.cc-body .cc-net-edge { stroke: var(--border-metal); }
.cc-body .cc-net-edge-hit { stroke: transparent; stroke-width: 10; pointer-events: stroke; }
.cc-body .cc-net-edge-tooltip,
.cc-body .cc-net-info-panel,
.cc-body .cc-xref-tooltip,
.cc-body .cc-tool-tooltip,
.cc-body #cc-tool-tooltip {
  position: absolute;
  z-index: 70;
  padding: var(--sp-space-2) var(--sp-space-3);
  background: var(--bg-elevated);
  border: 1px solid var(--border-metal);
  border-radius: var(--vr-radius);
  box-shadow: var(--forge-shadow);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-body);
  pointer-events: none;
}
.cc-body .cc-net-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-space-4);
  margin-bottom: var(--sp-space-3);
}
.cc-body .cc-net-filter-btn {
  padding: var(--sp-space-4) var(--sp-space-2);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-metal);
  border-radius: 9999px;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
}
.cc-body .cc-net-filter-btn.active,
.cc-body .cc-net-filter-btn:hover { color: var(--cc-accent); border-color: var(--cc-accent-line); }
.cc-body .cc-net-info-panel { position: absolute; right: var(--sp-space-3); top: var(--sp-space-3); width: 280px; pointer-events: auto; }
.cc-body .cc-net-info-left,
.cc-body .cc-net-info-right { display: flex; flex-direction: column; gap: var(--sp-space-2); }
.cc-body .cc-net-legend,
.cc-body .cc-deps-legend,
.cc-body .cc-handoff-legend,
.cc-body .cc-lb-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-space-3);
  margin-top: var(--sp-space-3);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
}
.cc-body .cc-net-legend-stat,
.cc-body .cc-deps-legend-item,
.cc-body .cc-handoff-legend,
.cc-body .cc-lb-legend-dot { display: inline-flex; align-items: center; gap: var(--sp-space-4); }
.cc-body .cc-deps-legend-dot,
.cc-body .cc-lb-legend-dot,
.cc-body .cc-handoff-legend-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cc-accent); }

/* agent side panel / passport */
.cc-body .cc-agent-side-panel,
.cc-body .cc-passport {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-metal);
  border-radius: var(--forge-radius);
  padding: var(--sp-space-4);
}
.cc-body .cc-agent-side-panel { position: absolute; right: var(--sp-space-3); top: var(--sp-space-3); width: 300px; max-height: 90%; overflow-y: auto; }
.cc-body .cc-asp-head,
.cc-body .cc-passport-head {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  padding-bottom: var(--sp-space-2);
  border-bottom: 1px solid var(--border-dim);
  margin-bottom: var(--sp-space-3);
}
.cc-body .cc-asp-name,
.cc-body .cc-passport-name {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-bright);
}
.cc-body .cc-asp-sub,
.cc-body .cc-passport-role-text { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.cc-body .cc-passport-section-header,
.cc-body .cc-asp-section-title {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  padding: var(--sp-space-2) 0;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cc-accent);
  cursor: pointer;
}
.cc-body .cc-passport-section-body,
.cc-body .cc-asp-section { padding: var(--sp-space-2) 0; }
.cc-body .cc-asp-chip,
.cc-body .cc-depchip,
.cc-body .cc-gsearch-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space-4);
  padding: 1px var(--sp-space-2);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-dim);
  border-radius: 9999px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-body);
}
.cc-body .cc-asp-chips,
.cc-body .cc-deplist,
.cc-body .cc-asp-actions { display: flex; flex-wrap: wrap; gap: var(--sp-space-4); }

/* xref matrix */
.cc-body .cc-xref-rows { display: flex; flex-direction: column; gap: var(--sp-space-4); }
.cc-body .cc-xref-row {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  padding: var(--sp-space-4) var(--sp-space-2);
  border: 1px solid var(--border-dim);
  border-radius: var(--forge-radius);
  background: rgba(0, 0, 0, 0.22);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-body);
}
.cc-body .cc-xref-name { color: var(--text-bright); }
.cc-body .cc-xref-count,
.cc-body .cc-xref-total { color: var(--cc-accent); font-weight: 600; }
.cc-body .cc-xref-avatar {
  width: 22px;
  height: 22px;
  border-radius: var(--forge-radius);
  background: var(--cc-accent-soft);
  border: 1px solid var(--cc-accent-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--cc-accent);
}
.cc-body .cc-xref-skills-block,
.cc-body .cc-xref-block,
.cc-body .cc-xref-leaderboard {
  margin-top: var(--sp-space-3);
  padding: var(--sp-space-3);
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border-dim);
  border-radius: var(--forge-radius);
}
.cc-body .cc-xref-header,
.cc-body .cc-xref-toolbar,
.cc-body .cc-xref-skills-toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-space-2);
}
.cc-body .cc-xref-search-input {
  flex: 1;
  min-width: 140px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-metal);
  border-radius: var(--forge-radius);
  color: var(--text-bright);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: var(--sp-space-4) var(--sp-space-2);
}
.cc-body .cc-xref-pinned-bar,
.cc-body .cc-xref-focus-banner,
.cc-body .cc-xref-orphan-banner,
.cc-body .cc-xref-anomalies-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  flex-wrap: wrap;
  padding: var(--sp-space-2) var(--sp-space-3);
  background: var(--cc-accent-soft);
  border: 1px solid var(--cc-accent-line);
  border-radius: var(--forge-radius);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-body);
  margin-bottom: var(--sp-space-2);
}
.cc-body .cc-xref-clone-menu,
.cc-body .cc-xref-export-menu {
  position: absolute;
  z-index: 60;
  display: none;
  flex-direction: column;
  min-width: 180px;
  padding: var(--sp-space-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border-metal);
  border-radius: var(--vr-radius);
  box-shadow: var(--forge-shadow);
}
.cc-body .cc-xref-export-wrap { position: relative; }
.cc-body .cc-xref-export-wrap.is-open .cc-xref-export-menu,
.cc-body .cc-xref-clone-menu.is-open { display: flex; }

/* capabilities cloud */
.cc-body .cc-cap-cloud,
.cc-body .cc-cap-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-space-2);
}
.cc-body .cc-cap-group { flex-direction: column; margin-bottom: var(--sp-space-3); }
.cc-body .cc-cap-group-label {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cc-body .cc-cap-detail {
  margin-top: var(--sp-space-3);
  padding: var(--sp-space-4);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-metal);
  border-radius: var(--forge-radius);
}
.cc-body .cc-cap-detail-empty,
.cc-body .cc-cap-empty-hint,
.cc-body .cc-passport-empty-section,
.cc-body .cc-skill-no-agents,
.cc-body .cc-skill-no-triggers,
.cc-body .cc-depnone,
.cc-body .cc-xref-none,
.cc-body .cc-diff-none,
.cc-body .cc-conflict-ok,
.cc-body .cc-health-ok,
.cc-body .cc-smart-empty,
.cc-body .cc-asp-empty {
  padding: var(--sp-space-4);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}
.cc-body .cc-cap-pulse,
.cc-body .cc-live-dot {
  position: absolute;
  top: var(--sp-space-2);
  right: var(--sp-space-2);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--log-ok);
  animation: cc-led-pulse 3s ease-in-out infinite;
}
.cc-body .cc-cap-pulse-unknown { background: var(--text-muted); animation: none; }
.cc-body .cc-cap-ring-svg,
.cc-body .cc-score-svg,
.cc-body .cc-health-ring-svg,
.cc-body .cc-health-donut-svg,
.cc-body .cc-hooks-score-ring { display: block; margin: 0 auto; }
.cc-body .cc-cap-ring-fill,
.cc-body .cc-health-ring-svg circle,
.cc-body .cc-score-svg circle { transition: stroke-dashoffset 0.6s ease; }

/* ─────────────────────────────────────────────────────────────
   18. ACTIVITY SIDEBAR / TOASTS / GLOBAL SEARCH
   ───────────────────────────────────────────────────────────── */
.cc-body .cc-activity-sidebar {
  position: fixed;
  top: 0;
  right: -360px;
  width: 340px;
  height: 100vh;
  z-index: 75;
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border-left: 1px solid var(--border-metal);
  box-shadow: var(--forge-shadow);
  transition: right 0.25s ease;
}
.cc-body .cc-activity-sidebar.cc-activity-open { right: 0; }
.cc-body .cc-activity-head {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  padding: var(--sp-space-3) var(--sp-space-4);
  background: var(--cc-accent-soft);
  border-bottom: 1px solid var(--cc-accent-line);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cc-accent);
}
.cc-body .cc-activity-head .cc-hb-close { margin-left: auto; }
.cc-body .cc-activity-feed { flex: 1; overflow-y: auto; padding: var(--sp-space-3); display: flex; flex-direction: column; gap: var(--sp-space-2); }
.cc-body .cc-act-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-4);
  padding: var(--sp-space-2);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-dim);
  border-radius: var(--forge-radius);
  animation: cc-row-in 0.2s ease both;
}
.cc-body .cc-act-text { font-family: var(--font-mono); font-size: 11px; color: var(--text-body); }
.cc-body .cc-act-time { font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); }

.cc-body .cc-toast-container {
  position: fixed;
  top: var(--sp-space-4);
  right: var(--sp-space-4);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-2);
}
.cc-body .cc-toast {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  padding: var(--vr-card-pad);
  background: var(--bg-elevated);
  border: 1px solid var(--border-metal);
  border-left: 3px solid var(--cc-accent);
  border-radius: var(--forge-radius);
  box-shadow: var(--forge-shadow);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-body);
  animation: cc-toast-in 0.25s ease both;
}
.cc-body .cc-toast.cc-toast-out { animation: cc-toast-out 0.3s ease forwards; }
.cc-body .cc-toast.cc-counting { border-left-color: var(--log-warn); }
.cc-body .cc-toast.cc-count-done { border-left-color: var(--log-ok); }
.cc-body .cc-syncing { opacity: 0.6; pointer-events: none; }
.cc-body .cc-sync-btn.cc-syncing .material-symbols-outlined { animation: cc-spin 1s linear infinite; }

.cc-body .cc-gsearch-overlay {
  position: fixed;
  inset: 0;
  z-index: 85;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  background: rgba(13, 9, 7, 0.85);
}
.cc-body .cc-gsearch-overlay.cc-visible,
.cc-body .cc-gsearch-overlay.visible { display: flex; }
.cc-body .cc-gsearch-box {
  width: min(100%, 640px);
  background: var(--bg-elevated);
  border: 1px solid var(--border-metal);
  border-radius: var(--vr-radius);
  box-shadow: var(--forge-shadow);
  overflow: hidden;
}
.cc-body .cc-gsearch-header {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  padding: var(--sp-space-3) var(--sp-space-4);
  border-bottom: 1px solid var(--border-metal);
}
.cc-body .cc-gsearch-header .material-symbols-outlined { color: var(--cc-accent); }
.cc-body .cc-gsearch-input {
  flex: 1;
  background: none;
  border: 0;
  outline: none;
  color: var(--text-bright);
  font-family: var(--font-mono);
  font-size: 14px;
}
.cc-body .cc-gsearch-input::placeholder { color: var(--text-muted); }
.cc-body .cc-gsearch-kbd {
  padding: 1px var(--sp-space-4);
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border-dim);
  border-radius: var(--forge-radius);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
}
.cc-body .cc-gsearch-results,
.cc-body .cc-gsearch-list { max-height: 50vh; overflow-y: auto; padding: var(--sp-space-2); }
.cc-body .cc-gsearch-item {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  padding: var(--sp-space-2) var(--sp-space-3);
  border-radius: var(--forge-radius);
  cursor: pointer;
}
.cc-body .cc-gsearch-item:hover,
.cc-body .cc-gsearch-item-active { background: var(--bg-hover); }
.cc-body .cc-gsearch-item-icon .material-symbols-outlined { font-size: 16px; color: var(--cc-accent); }
.cc-body .cc-gsearch-item-name { font-family: var(--font-ui); font-size: 12px; color: var(--text-bright); }
.cc-body .cc-gsearch-item-desc,
.cc-body .cc-gsearch-item-type { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); }
.cc-body .cc-gsearch-empty { padding: var(--sp-space-5); text-align: center; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }

/* stat drawer */
.cc-body .cc-stat-drawer {
  margin-bottom: var(--sp-space-4);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-metal);
  border-radius: var(--forge-radius);
  overflow: hidden;
}
.cc-body .cc-stat-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-space-2) var(--sp-space-4);
  background: var(--cc-accent-soft);
  border-bottom: 1px solid var(--cc-accent-line);
}
.cc-body .cc-stat-drawer-title {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cc-accent);
}
.cc-body .cc-stat-drawer-grid { padding: var(--sp-space-4); }
.cc-body .cc-stat-drawer-item {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  padding: var(--sp-space-2);
  border: 1px solid var(--border-dim);
  border-radius: var(--forge-radius);
}

/* ─────────────────────────────────────────────────────────────
   19. SMART / V2 PASSPORT RENDER PRIMITIVES (skills/agents detail)
   ───────────────────────────────────────────────────────────── */
.cc-body .cc-smart-timeline,
.cc-body .cc-smart-step-cards,
.cc-body .cc-smart-status-cards,
.cc-body .cc-smart-code-cards,
.cc-body .cc-v2-flow-card,
.cc-body .cc-v2-info-stack,
.cc-body .cc-v2-compare-grid,
.cc-body .cc-v2-field-cards,
.cc-body .cc-v2-output-blocks {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-3);
}
.cc-body .cc-v2-compare-grid,
.cc-body .cc-v2-field-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.cc-body .cc-smart-step-card,
.cc-body .cc-smart-status-card,
.cc-body .cc-smart-tl-card,
.cc-body .cc-v2-info-card,
.cc-body .cc-v2-flow-card,
.cc-body .cc-v2-field-card,
.cc-body .cc-v2-compare-col,
.cc-body .cc-v2-output-block,
.cc-body .cc-conflict-item,
.cc-body .cc-health-overview,
.cc-body .cc-report-card,
.cc-body .cc-afk-card,
.cc-body .cc-afk-scan-card,
.cc-body .cc-cost-card,
.cc-body .cc-config-section,
.cc-body .cc-claudemd-wrap {
  padding: var(--vr-card-pad);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-metal);
  border-radius: var(--forge-radius);
  box-shadow: var(--forge-inset);
}
.cc-body .cc-smart-step-title,
.cc-body .cc-smart-tl-title,
.cc-body .cc-v2-info-title,
.cc-body .cc-v2-flow-card-title,
.cc-body .cc-v2-field-name,
.cc-body .cc-report-summary,
.cc-body .cc-config-section-hdr,
.cc-body .cc-afk-card-title {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-bright);
}
.cc-body .cc-smart-step-desc,
.cc-body .cc-smart-tl-desc,
.cc-body .cc-v2-info-desc,
.cc-body .cc-v2-flow-card-desc,
.cc-body .cc-v2-field-preview,
.cc-body .cc-report-findings,
.cc-body .cc-afk-card-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-muted);
}
.cc-body .cc-smart-tag,
.cc-body .cc-v2-decision-badge,
.cc-body .cc-v2-restrict-stripe,
.cc-body .cc-smart-report-type-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space-4);
  padding: 1px var(--sp-space-2);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-dim);
  border-radius: 9999px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-body);
}
.cc-body .cc-smart-tag-cloud { display: flex; flex-wrap: wrap; gap: var(--sp-space-4); }
.cc-body .cc-smart-step-num,
.cc-body .cc-smart-tl-num,
.cc-body .cc-v2-flow-num,
.cc-body .cc-v2-info-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  background: var(--cc-accent-soft);
  border: 1px solid var(--cc-accent-line);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--cc-accent);
}
.cc-body .cc-smart-quote {
  padding: var(--sp-space-3) var(--sp-space-4);
  border-left: 3px solid var(--cc-accent);
  background: rgba(0, 0, 0, 0.22);
  font-family: var(--font-mono);
  font-size: 12px;
  font-style: italic;
  color: var(--text-body);
}
.cc-body .cc-v2-decision-table,
.cc-body .cc-v2-kv-table,
.cc-body .cc-passport-generic-table,
.cc-body .cc-md-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 11px;
}
.cc-body .cc-v2-decision-table td,
.cc-body .cc-v2-decision-table th,
.cc-body .cc-v2-kv-row td,
.cc-body .cc-passport-generic-table td,
.cc-body .cc-passport-generic-table th,
.cc-body .cc-md-table td,
.cc-body .cc-md-table th {
  padding: var(--sp-space-4) var(--sp-space-2);
  border: 1px solid var(--border-dim);
  text-align: left;
  color: var(--text-body);
}
.cc-body .cc-v2-decision-table th,
.cc-body .cc-md-table th,
.cc-body .cc-passport-generic-table th {
  background: var(--cc-accent-soft);
  color: var(--cc-accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.cc-body .cc-v2-kv-key { color: var(--text-muted); }
.cc-body .cc-v2-kv-val { color: var(--text-bright); }

/* markdown render */
.cc-body .cc-md-p { font-family: var(--font-mono); font-size: 12px; line-height: 1.7; color: var(--text-body); margin: var(--sp-space-2) 0; }
.cc-body .cc-md-h { font-family: var(--font-ui); color: var(--text-bright); margin: var(--sp-space-4) 0 var(--sp-space-2); letter-spacing: 0.04em; }
.cc-body .cc-md-list { padding-left: var(--sp-space-5); color: var(--text-body); font-family: var(--font-mono); font-size: 12px; line-height: 1.7; }
.cc-body .cc-md-link { color: var(--cc-accent); text-decoration: underline; }
.cc-body .cc-md-hr { border: 0; border-top: 1px solid var(--border-dim); margin: var(--sp-space-4) 0; }
.cc-body .cc-md-code { display: block; padding: var(--sp-space-3); background: rgba(0, 0, 0, 0.45); border: 1px solid var(--border-dim); border-radius: var(--forge-radius); font-family: var(--font-mono); font-size: 11px; color: var(--text-body); overflow-x: auto; }
.cc-body .cc-claudemd-outline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-space-4);
  margin-bottom: var(--sp-space-3);
}
.cc-body .cc-claudemd-outline-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space-4);
  padding: 1px var(--sp-space-2);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-dim);
  border-radius: 9999px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  cursor: pointer;
}
.cc-body .cc-claudemd-outline-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cc-accent); }

/* ─────────────────────────────────────────────────────────────
   20. DIFF / COMPARE DECK  (§4-9)
   ───────────────────────────────────────────────────────────── */
.cc-body .cc-diff-wrap { display: flex; flex-direction: column; gap: var(--sp-space-4); }
.cc-body .cc-diff-selectors {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-space-3);
  flex-wrap: wrap;
  padding: var(--sp-space-4) var(--sp-space-5);
  background: var(--bg-surface);
  border: 1px solid var(--border-metal);
  border-radius: var(--forge-radius);
  box-shadow: var(--forge-inset);
}
.cc-body .cc-diff-selectors select {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-metal);
  border-radius: var(--forge-radius);
  color: var(--text-bright);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: var(--sp-space-2) var(--sp-space-3);
}
.cc-body .cc-diff-section {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-metal);
  border-radius: var(--forge-radius);
  overflow: hidden;
}
.cc-body .cc-diff-section-title {
  padding: var(--sp-space-2) var(--sp-space-4);
  background: var(--cc-accent-soft);
  border-bottom: 1px solid var(--cc-accent-line);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cc-accent);
}
.cc-body .cc-diff-items { padding: var(--sp-space-3); display: flex; flex-direction: column; gap: var(--sp-space-4); }
.cc-body .cc-diff-item {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  padding: var(--sp-space-4) var(--sp-space-2);
  border: 1px solid var(--border-dim);
  border-radius: var(--forge-radius);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-body);
}

/* reports */
.cc-body .cc-reports-wrap { display: flex; flex-direction: column; gap: var(--sp-space-4); }
.cc-body .cc-reports-filters {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  flex-wrap: wrap;
}
.cc-body .cc-reports-filter-sel,
.cc-body .cc-cap-action-btn select {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-metal);
  border-radius: var(--forge-radius);
  color: var(--text-body);
  font-family: var(--font-ui);
  font-size: 11px;
  padding: var(--sp-space-4) var(--sp-space-2);
}
.cc-body .cc-reports-list { display: flex; flex-direction: column; gap: var(--sp-space-3); }
.cc-body .cc-report-card-header {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-space-2);
}
.cc-body .cc-report-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--sp-space-2);
  margin-top: var(--sp-space-2);
}
.cc-body .cc-report-metric { display: flex; flex-direction: column; gap: var(--sp-space-4); }
.cc-body .cc-report-metric-key { font-family: var(--font-ui); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.cc-body .cc-report-metric-val { font-family: var(--font-mono); font-size: 13px; color: var(--text-bright); }

/* ─────────────────────────────────────────────────────────────
   21. UTILITIES
   ───────────────────────────────────────────────────────────── */
.cc-body .cc-hidden,
.cc-body .cc-collapsed > .cc-card-body,
.cc-body [hidden] { display: none !important; }
.cc-body .cc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cc-accent);
  display: inline-block;
}
.cc-body .cc-dot-change  { background: var(--log-warn); }
.cc-body .cc-dot-report  { background: var(--mod-applicant); }
.cc-body .cc-main ::-webkit-scrollbar { width: 6px; height: 6px; }
.cc-body .cc-main ::-webkit-scrollbar-track { background: transparent; }
.cc-body .cc-main ::-webkit-scrollbar-thumb { background: var(--border-metal); border-radius: 9999px; }
.cc-body .cc-main ::-webkit-scrollbar-thumb:hover { background: var(--border-bright); }

/* generic fallbacks for any cc-* title/label/value not covered */
.cc-body [class^="cc-"][class*="-title"]:not(.cc-card-title):not([class*="bar"]) {
  font-family: var(--font-ui);
  color: var(--text-bright);
}
.cc-body [class^="cc-"][class*="-label"]:not([class*="bar"]) {
  font-family: var(--font-ui);
  color: var(--text-muted);
}

/* ─────────────────────────────────────────────────────────────
   22. RESPONSIVE  (§4-11 - no dead zones / no x-overflow)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .cc-body .cc-overview-grid { grid-template-columns: 1fr; }
  .cc-body .cc-net-info-panel,
  .cc-body .cc-agent-side-panel { position: relative; right: auto; top: auto; width: 100%; }
}
@media (max-width: 900px) {
  .cc-body .cc-pill-bar,
  .cc-body .cc-views-bar,
  .cc-body .cc-status-strip,
  .cc-body .cc-tabs,
  .cc-body .cc-main { width: min(100% - var(--sp-space-5), var(--cc-shell-w)); }
  .cc-body .cc-mcp-stat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .cc-body .cc-section { padding: var(--sp-space-4); }
  .cc-body .cc-agent-grid,
  .cc-body .cc-skills-grid,
  .cc-body .cc-hooks-cards { grid-template-columns: 1fr; }
  .cc-body .cc-cost-bar-row,
  .cc-body .cc-afk-bar-row,
  .cc-body .cc-health-factor-row,
  .cc-body .cc-stats-bar-item { grid-template-columns: 1fr; }
  .cc-body .cc-activity-sidebar { width: 100%; right: -100%; }
  .cc-body .cc-activity-sidebar.cc-activity-open { right: 0; }
  .cc-body .cc-sp-pipes { display: none; }
  .cc-body .cc-stat-grid,
  .cc-body .cc-metric-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}
@media (max-width: 540px) {
  .cc-body .cc-stat-grid,
  .cc-body .cc-metric-grid { grid-template-columns: 1fr; }
  .cc-body .cc-mcp-stat-grid { grid-template-columns: 1fr; }
  .cc-body .cc-pill-bar,
  .cc-body .cc-views-bar,
  .cc-body .cc-status-strip,
  .cc-body .cc-tabs,
  .cc-body .cc-main { width: min(100% - var(--sp-space-4), var(--cc-shell-w)); }
}

/* ─────────────────────────────────────────────────────────────
   23. REDUCED MOTION  (canon I)
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cc-body *,
  .cc-body *::before,
  .cc-body *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .cc-body .ae-aether-pulse,
  .cc-body .ae-piston-rod,
  .cc-body .ae-steam-puff,
  .cc-body .ae-needle-tremor,
  .cc-body .ae-coolant-flow-l,
  .cc-body .ae-coolant-flow-r,
  .cc-body .ae-valve-spin,
  .cc-body .ae-valve-relief,
  .cc-body .ae-lamp--1,
  .cc-body .ae-lamp--2,
  .cc-body .ae-lamp--3,
  .cc-body .ae-lamp--4,
  .cc-body .ae-blueprint-overlay { animation: none !important; }
}

/* ─────────────────────────────────────────────────────────────
   24. PORTED COMPONENT LAYER  (full cc-* component coverage)
   Restores the detailed component system that the shell rebuild
   left as stubs: capabilities, xref, passport, hooks map, smart/
   v2 passport render, AFK scan tab, diff/cost/timeline, deps,
   handoff graph, health donut/ring, gsearch preview, reports.
   Ported 1:1 from the pre-rebuild CSS, converted to canon:
   forge tokens only · 0 raw hex · radius <= 4px · cc-* keyframes
   · scoped .cc-body · spacing on --sp-space-* index scale.
   Appended last so detailed rules layer over shell stubs;
   the 5 grid collisions are @media-only responsive overrides.
   ───────────────────────────────────────────────────────────── */

/* 24a. component keyframes (canon I - cc-* prefixed = canon-clean) */
@keyframes cc-breathe {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--agent-color) 15%, transparent); }
  50%      { box-shadow: 0 0 12px 3px color-mix(in srgb, var(--agent-color) 25%, transparent); }
}
@keyframes cc-breathe-hub {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--agent-color) 20%, transparent); }
  50%      { box-shadow: 0 0 18px 5px color-mix(in srgb, var(--agent-color) 35%, transparent); }
}
@keyframes cc-bubble-in {
  from { opacity: 0; transform: scale(0.7) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes cc-cap-milestone-glow {
  0%   { box-shadow: 0 0 0 color-mix(in srgb, var(--milestone-color, color-mix(in srgb, var(--mod-applicant) 50%, var(--accent-ember))) 30%, transparent); }
  100% { box-shadow: 0 0 8px color-mix(in srgb, var(--milestone-color, color-mix(in srgb, var(--mod-applicant) 50%, var(--accent-ember))) 40%, transparent); }
}
@keyframes cc-card-pop {
  0%   { opacity: 0; transform: scale(0.9) translateY(6px); }
  70%  { transform: scale(1.02) translateY(-1px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes cc-glow-appear {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cc-handoff-pulse {
  0%, 100% { opacity: 0.5; transform: scaleX(1); }
  50%       { opacity: 1;   transform: scaleX(1.04); }
}
@keyframes cc-int-glow-pulse {
  0%, 100% { box-shadow: 0 0 6px rgba(197, 139, 58, 0.2); }
  50%       { box-shadow: 0 0 14px rgba(197, 139, 58, 0.45), 0 0 20px rgba(197, 139, 58, 0.15); }
}
@keyframes cc-live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(1.3); }
}
@keyframes cc-pill-dust-1 {
  0%   { opacity: 0.9; transform: translate(-50%, -50%) rotate(45deg) scale(1); }
  100% { opacity: 0;   transform: translate(-220%, -340%) rotate(45deg) scale(0.4); }
}
@keyframes cc-pill-dust-2 {
  0%   { opacity: 0.9; transform: translate(-50%, -50%) rotate(45deg) scale(1); }
  100% { opacity: 0;   transform: translate(160%, 240%) rotate(45deg) scale(0.4); }
}
@keyframes cc-pulse-slow {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}
@keyframes cc-smart-file-row-in {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes cc-smart-node-pop {
  0%   { transform: scale(0.4) rotate(-10deg); opacity: 0; }
  65%  { transform: scale(1.12) rotate(2deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes cc-smart-slide-in {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes cc-smart-tl-line-draw {
  from { height: 0; opacity: 0; }
  to   { opacity: 1; }
}

/* 24b. component rules */
.cc-body .cc-stat-ctx {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
  font-family: var(--font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cc-body .cc-card-ecosystem { grid-column: 1; }

.cc-body .cc-card-capabilities { grid-column: 2 / 4; }

.cc-body .cc-card-complexity { grid-column: 1; }

.cc-body .cc-card-radar { grid-column: 2; }

.cc-body .cc-card-meta { grid-column: 3; }

.cc-body .cc-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-space-4);
}

.cc-body .cc-pill-active {
  background: color-mix(in srgb, var(--pill-color, var(--success)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--pill-color, var(--success)) 32%, transparent);
  color: var(--pill-color, var(--success));
}

.cc-body .cc-pill-active:hover {
  background: color-mix(in srgb, var(--pill-color, var(--success)) 22%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--pill-color, var(--success)) 28%, transparent);
  transform: translateY(-1px);
}

.cc-body .cc-pill-active .material-symbols-outlined {
  color: var(--pill-color, var(--success)) !important;
}

/* V3: Grid 5×2 для активних pills - стабільний steampunk-layout */
.cc-body .cc-cap-group .cc-pills-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-space-4);
}

@media (max-width: 1100px) {
.cc-body .cc-cap-group .cc-pills-row {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 700px) {
.cc-body .cc-cap-group .cc-pills-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* F5 + V2-2: Coverage Health Ring у заголовку cc-card-capabilities */
.cc-body .cc-cap-score {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space-2);
  padding: var(--sp-space-4) var(--sp-space-2) var(--sp-space-4) var(--sp-space-4);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  color: var(--cc-accent, color-mix(in srgb, var(--mod-applicant) 50%, var(--accent-ember)));
  background: rgba(216, 157, 72, 0.08);
  border: 1px solid rgba(216, 157, 72, 0.25);
  user-select: none;
}

.cc-body .cc-cap-score:empty { display: none; }

.cc-body .cc-cap-ring-track {
  fill: none;
  stroke: rgba(232, 219, 178, 0.08);
  stroke-width: 2.5;
}

.cc-body .cc-cap-ring-text {
  fill: var(--text-bright);
  font-size: 9px;
  font-weight: 700;
  font-family: var(--font-mono);
  transform: rotate(90deg);
  transform-origin: 14px 14px;
  letter-spacing: -0.02em;
}

.cc-body .cc-cap-ring-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--cc-accent, color-mix(in srgb, var(--mod-applicant) 50%, var(--accent-ember)));
  text-transform: uppercase;
  line-height: 1;
}

/* AP-2: Pulse dot - свіжість snapshot у куті картки */
.cc-body .cc-card-capabilities { position: relative; }

.cc-body .cc-cap-pulse-live { background: var(--success); box-shadow: 0 0 6px var(--success); }

.cc-body .cc-cap-pulse-live::before { background: rgba(107, 142, 78, 0.28); }

.cc-body .cc-cap-pulse-fresh { background: var(--mod-applicant); box-shadow: 0 0 4px rgba(122, 168, 200, 0.6); }

.cc-body .cc-cap-pulse-fresh::before { background: rgba(122, 168, 200, 0.22); animation-duration: 3s; }

.cc-body .cc-cap-pulse-stale { background: var(--accent-brass); box-shadow: 0 0 4px rgba(197, 139, 58, 0.5); }

.cc-body .cc-cap-pulse-stale::before { background: rgba(197, 139, 58, 0.18); animation-duration: 4s; }

.cc-body .cc-cap-pulse-old { background: var(--accent-ember); box-shadow: 0 0 4px rgba(200, 112, 80, 0.5); }

.cc-body .cc-cap-pulse-old::before { background: rgba(200, 112, 80, 0.15); animation-duration: 5s; }

/* V2-4: Hover "зоряний пил" - 4 частинки розлітаються від центру pill */
.cc-body .cc-pill-active { position: relative; overflow: visible; }

.cc-body .cc-pill-active::before,
.cc-body .cc-pill-active::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: var(--forge-radius);
  background: var(--pill-color, var(--success));
  opacity: 0;
  pointer-events: none;
  top: 50%;
  left: 50%;
  transform: rotate(45deg);
}

.cc-body .cc-pill-active:hover::before {
  animation: cc-pill-dust-1 600ms ease-out;
}

.cc-body .cc-pill-active:hover::after {
  animation: cc-pill-dust-2 600ms ease-out 80ms;
}

.cc-body .cc-pill-active:hover .cc-pill-count[data-hover-detail]::after,
.cc-body .cc-pill-active:hover .cc-pill-count[data-hover-detail]::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* F2-3: Quick Action buttons у detail panel */
.cc-body .cc-cap-detail-breakdown {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space-4);
  margin-top: var(--sp-space-4);
  padding: var(--sp-space-4) var(--sp-space-2);
  background: color-mix(in srgb, var(--pill-color, var(--success)) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--pill-color, var(--success)) 25%, transparent);
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--pill-color, var(--success));
  letter-spacing: 0.02em;
}

.cc-body .cc-cap-detail-breakdown .material-symbols-outlined { color: inherit; }

.cc-body .cc-cap-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-space-4);
  margin-top: var(--sp-space-2);
}

/* R3-F1: Milestone badges у cc-cap-score */
.cc-body .cc-cap-milestone {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space-4);
  padding: var(--sp-space-4) var(--sp-space-4);
  margin-right: var(--sp-space-4);
  background: color-mix(in srgb, var(--milestone-color, color-mix(in srgb, var(--mod-applicant) 50%, var(--accent-ember))) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--milestone-color, color-mix(in srgb, var(--mod-applicant) 50%, var(--accent-ember))) 45%, transparent);
  border-radius: 2px;
  font-size: 9px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--milestone-color, color-mix(in srgb, var(--mod-applicant) 50%, var(--accent-ember)));
  letter-spacing: 0.02em;
  animation: cc-cap-milestone-glow 3s ease-in-out infinite alternate;
}

.cc-body .cc-cap-milestone .material-symbols-outlined {
  color: inherit;
}

/* R3-A2: Progress tracker row - повна ширина всередині grid-parent (.cc-cap-cloud) */
.cc-body .cc-cap-progress-tracker {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-space-4);
  margin-top: var(--sp-space-4);
  padding: var(--sp-space-4) var(--sp-space-2);
  background: linear-gradient(90deg, rgba(216, 157, 72, 0.06), rgba(107, 142, 78, 0.04));
  border: 1px solid rgba(216, 157, 72, 0.15);
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-body);
  letter-spacing: 0.02em;
}

.cc-body .cc-cap-progress-tracker b {
  color: var(--cc-accent, color-mix(in srgb, var(--mod-applicant) 50%, var(--accent-ember)));
  font-weight: 700;
}

.cc-body .cc-cap-pt-icon {
  color: var(--cc-accent, color-mix(in srgb, var(--mod-applicant) 50%, var(--accent-ember)));
  font-size: 14px !important;
  flex-shrink: 0;
}

.cc-body .cc-cap-pt-hint {
  opacity: 0.9;
}

/* R3-F5: Next-step recommendation chip */
.cc-body .cc-cap-next-step {
  display: flex;
  align-items: center;
  gap: var(--sp-space-4);
  margin-top: var(--sp-space-4);
  padding: var(--sp-space-4) var(--sp-space-2);
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-family: var(--font-mono);
  line-height: 1.4;
  color: var(--text-bright);
}

.cc-body .cc-cap-next-step-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-space-4) var(--sp-space-4);
  border-radius: 2px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.cc-body .cc-cap-next-step-high .cc-cap-next-step-tag { background: var(--success); color: var(--bg-void); }

.cc-body .cc-cap-next-step-med  .cc-cap-next-step-tag { background: var(--accent-brass); color: var(--bg-void); }

.cc-body .cc-cap-next-step-low  .cc-cap-next-step-tag { background: rgba(232, 219, 178, 0.12); color: var(--text-muted); }

/* R3-F7: Snapshot age warning у detail */
.cc-body .cc-cap-age-warning {
  display: flex;
  align-items: center;
  gap: var(--sp-space-4);
  margin-top: var(--sp-space-4);
  padding: var(--sp-space-4) var(--sp-space-2);
  background: rgba(197, 139, 58, 0.10);
  border: 1px solid rgba(197, 139, 58, 0.30);
  border-left: 3px solid var(--accent-brass);
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-bright);
}

.cc-body .cc-cap-age-warning .material-symbols-outlined { color: var(--accent-brass); flex-shrink: 0; }

.cc-body .cc-cap-age-refresh {
  margin-left: auto;
  padding: var(--sp-space-4) var(--sp-space-2);
  background: var(--accent-brass);
  border: none;
  border-radius: 2px;
  color: var(--bg-void);
  font-size: 9px;
  font-weight: 700;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 160ms ease;
}

.cc-body .cc-cap-age-refresh:hover { background: var(--accent-brass-hover); }

/* R3 extended: повний гайд-блок для inactive capabilities у detail-попапі */
.cc-body .cc-cap-guide {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-2);
  margin-top: var(--sp-space-2);
  padding: var(--sp-space-3) var(--sp-space-3);
  background: linear-gradient(135deg, rgba(216, 157, 72, 0.04), rgba(197, 139, 58, 0.04));
  border: 1px solid rgba(216, 157, 72, 0.18);
  border-left: 3px solid var(--cc-accent, color-mix(in srgb, var(--mod-applicant) 50%, var(--accent-ember)));
  border-radius: var(--vr-radius);
}

.cc-body .cc-cap-guide-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-4);
}

.cc-body .cc-cap-guide-title {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space-4);
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cc-accent, color-mix(in srgb, var(--mod-applicant) 50%, var(--accent-ember)));
}

.cc-body .cc-cap-guide-title .material-symbols-outlined {
  font-size: 13px;
  color: inherit;
}

.cc-body .cc-cap-guide-text {
  font-size: 11px;
  line-height: 1.55;
  color: var(--text-bright);
  font-family: var(--font-mono);
  letter-spacing: 0.01em;
}

.cc-body .cc-cap-guide-project .cc-cap-guide-title { color: var(--success); }

.cc-body .cc-cap-guide-project { border-left: 2px solid rgba(107, 142, 78, 0.4); padding-left: 8px; margin-left: -8px; }

.cc-body .cc-cap-guide-ideas .cc-cap-guide-title { color: var(--accent-brass); }

.cc-body .cc-cap-guide-list {
  margin: 0;
  padding: 0 0 0 var(--sp-space-4);
  list-style: none;
}

.cc-body .cc-cap-guide-list li {
  position: relative;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-body);
  font-family: var(--font-mono);
  padding: var(--sp-space-4) 0;
  letter-spacing: 0.01em;
}

.cc-body .cc-cap-guide-list li::before {
  content: '▸';
  position: absolute;
  left: -12px;
  top: 2px;
  color: var(--accent-brass);
  font-size: 10px;
}

.cc-body .cc-net-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 14px;
  padding: 0 var(--sp-space-4);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.3);
  font-size: 9px;
  font-weight: 700;
  color: inherit;
}

/* A2: Impact badge на нодах */
.cc-body .cc-net-impact-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 var(--sp-space-4);
  background: linear-gradient(135deg, var(--accent-brass), var(--accent-ember));
  border: 1.5px solid rgba(0, 0, 0, 0.9);
  border-radius: var(--vr-radius);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  color: var(--bg-void);
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 0 6px rgba(197, 139, 58, 0.4);
  z-index: 2;
}

.cc-body .cc-net-html-node.cc-net-kind-skill .cc-net-node-label {
  transform: rotate(-45deg) translateY(-4px);
}

.cc-body .cc-asp-head-left {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
}

.cc-body .cc-asp-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--asp-color, color-mix(in srgb, var(--mod-applicant) 50%, var(--accent-ember))) 20%, transparent);
  border: 1.5px solid var(--asp-color, color-mix(in srgb, var(--mod-applicant) 50%, var(--accent-ember)));
  color: var(--asp-color, color-mix(in srgb, var(--mod-applicant) 50%, var(--accent-ember)));
}

.cc-body .cc-asp-avatar .material-symbols-outlined { font-size: 19px; color: inherit; }

.cc-body .cc-asp-impact {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  padding: var(--sp-space-4) var(--sp-space-2);
  background: linear-gradient(90deg, rgba(197, 139, 58, 0.10), transparent);
  border: 1px solid rgba(197, 139, 58, 0.25);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 10px;
}

.cc-body .cc-asp-impact-tag {
  padding: var(--sp-space-4) var(--sp-space-4);
  border-radius: 2px;
  background: var(--accent-brass);
  color: var(--bg-void);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cc-body .cc-asp-impact-text { color: var(--text-body); }

.cc-body .cc-asp-action {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space-4);
  padding: var(--sp-space-4) var(--sp-space-3);
  width: 100%;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--asp-color, color-mix(in srgb, var(--mod-applicant) 50%, var(--accent-ember))) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--asp-color, color-mix(in srgb, var(--mod-applicant) 50%, var(--accent-ember))) 40%, transparent);
  color: var(--asp-color, color-mix(in srgb, var(--mod-applicant) 50%, var(--accent-ember)));
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 160ms ease;
}

.cc-body .cc-asp-action:hover {
  background: color-mix(in srgb, var(--asp-color, color-mix(in srgb, var(--mod-applicant) 50%, var(--accent-ember))) 26%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--asp-color, color-mix(in srgb, var(--mod-applicant) 50%, var(--accent-ember))) 25%, transparent);
}

.cc-body .cc-asp-action .material-symbols-outlined { color: inherit; }

/* CR-F2: Search bar */
.cc-body .cc-xref-search-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-space-4);
  padding: var(--sp-space-4) var(--sp-space-2);
  margin-bottom: var(--sp-space-2);
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(232, 219, 178, 0.08);
  border-radius: var(--radius-sm);
}

.cc-body .cc-xref-search-bar .material-symbols-outlined {
  color: var(--text-muted);
  font-size: 15px;
}

/* CR-F1: Focus dim */
.cc-body .cc-xref-row-dim {
  opacity: 0.22;
  filter: grayscale(0.5);
}

.cc-body .cc-xref-row-dim:hover { opacity: 0.55; }

/* CR-F4: Unused subsection */
.cc-body .cc-xref-unused-section {
  margin-top: var(--sp-space-2);
  padding: var(--sp-space-2) var(--sp-space-2);
  background: rgba(197, 139, 58, 0.04);
  border: 1px dashed rgba(197, 139, 58, 0.30);
  border-radius: var(--radius-sm);
}

.cc-body .cc-xref-unused-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space-4);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-brass);
  margin-bottom: var(--sp-space-4);
}

.cc-body .cc-xref-unused-label .material-symbols-outlined { font-size: 13px; color: inherit; }

.cc-body .cc-xref-row-unused {
  opacity: 0.55;
  background: transparent !important;
  border-left-color: rgba(197, 139, 58, 0.3) !important;
}

.cc-body .cc-xref-row-unused .cc-xref-name { color: var(--text-muted); }

.cc-body .cc-xref-tooltip-head {
  display: flex;
  align-items: center;
  gap: var(--sp-space-4);
  font-size: 12px;
  font-weight: 700;
  color: var(--tt-color, color-mix(in srgb, var(--mod-applicant) 50%, var(--accent-ember)));
  letter-spacing: 0.02em;
  margin-bottom: var(--sp-space-4);
}

.cc-body .cc-xref-tooltip-head .material-symbols-outlined { font-size: 14px; color: inherit; }

.cc-body .cc-xref-tooltip-stats {
  display: flex;
  align-items: center;
  gap: var(--sp-space-4);
  font-size: 10px;
  color: var(--text-body);
  margin-bottom: var(--sp-space-4);
}

.cc-body .cc-xref-tooltip-hint {
  font-size: 9px;
  color: var(--text-muted);
  font-style: italic;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 2px;
  padding-top: var(--sp-space-4);
  border-top: 1px solid rgba(232, 219, 178, 0.05);
}

.cc-body .cc-xref-avatar-focus {
  outline: 2px solid var(--agent-color, color-mix(in srgb, var(--mod-applicant) 50%, var(--accent-ember)));
  outline-offset: 1px;
  box-shadow: 0 0 10px var(--agent-color, color-mix(in srgb, var(--mod-applicant) 50%, var(--accent-ember)));
}

.cc-body .cc-xref-toolbar .cc-xref-search-bar {
  flex: 1;
  margin-bottom: 0;
}

.cc-body .cc-xref-anomalies-list {
  margin: var(--sp-space-4) 0 0;
  padding-left: var(--sp-space-4);
  list-style: none;
}

.cc-body .cc-xref-anomalies-list li {
  position: relative;
  padding: var(--sp-space-4) 0;
  font-size: 10px;
  color: var(--text-body);
  letter-spacing: 0.02em;
}

.cc-body .cc-xref-anomalies-list li::before {
  content: '⚠';
  position: absolute;
  left: -14px;
  color: var(--log-error);
  font-size: 9px;
}

.cc-body .cc-xref-anomalies-more { font-style: italic; color: var(--text-muted) !important; }

.cc-body .cc-xref-pinned-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-brass);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.cc-body .cc-xref-pinned-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-space-4);
}

.cc-body .cc-xref-pinned-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space-4);
  padding: var(--sp-space-4) var(--sp-space-2);
  background: color-mix(in srgb, var(--chip-color, color-mix(in srgb, var(--mod-applicant) 50%, var(--accent-ember))) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--chip-color, color-mix(in srgb, var(--mod-applicant) 50%, var(--accent-ember))) 40%, transparent);
  border-radius: 2px;
  color: var(--chip-color, color-mix(in srgb, var(--mod-applicant) 50%, var(--accent-ember)));
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 140ms ease;
}

.cc-body .cc-xref-pinned-chip:hover {
  background: color-mix(in srgb, var(--chip-color, color-mix(in srgb, var(--mod-applicant) 50%, var(--accent-ember))) 22%, transparent);
  transform: translateY(-1px);
}

.cc-body .cc-xref-pinned-chip .material-symbols-outlined { color: inherit; }

.cc-body .cc-xref-pinned-chip .cc-xref-pin-remove { opacity: 0.6; }

.cc-body .cc-xref-pinned-chip:hover .cc-xref-pin-remove { opacity: 1; color: var(--log-error); }

.cc-body .cc-xref-row-pinned {
  background: color-mix(in srgb, var(--accent-brass) calc(var(--heat, 0.3) * 10% + 6%), transparent) !important;
  border-left-color: var(--accent-brass) !important;
}

.cc-body .cc-xref-leaderboard-head {
  display: flex;
  align-items: center;
  gap: var(--sp-space-4);
  margin-bottom: var(--sp-space-2);
  padding-bottom: var(--sp-space-4);
  border-bottom: 1px solid rgba(232, 219, 178, 0.05);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cc-accent, color-mix(in srgb, var(--mod-applicant) 50%, var(--accent-ember)));
}

.cc-body .cc-xref-leaderboard-head .material-symbols-outlined { font-size: 14px; color: inherit; }

.cc-body .cc-xref-leaderboard-body { display: flex; flex-direction: column; gap: var(--sp-space-4); }

.cc-body .cc-lb-medal .material-symbols-outlined {
  font-size: 18px;
}

.cc-body .cc-lb-rank {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
}

.cc-body .cc-lb-type-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lb-type);
  box-shadow: 0 0 4px var(--lb-type);
}

.cc-body .cc-xref-clone-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-space-2) var(--sp-space-2);
  background: rgba(216, 157, 72, 0.10);
  border-bottom: 1px solid rgba(232, 219, 178, 0.08);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cc-accent, color-mix(in srgb, var(--mod-applicant) 50%, var(--accent-ember)));
}

.cc-body .cc-xref-clone-head button {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: var(--sp-space-4);
}

.cc-body .cc-xref-clone-head button:hover { color: var(--log-error); }

.cc-body .cc-xref-clone-head button .material-symbols-outlined { color: inherit; }

.cc-body .cc-xref-clone-list { padding: var(--sp-space-4); }

.cc-body .cc-xref-clone-item {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  width: 100%;
  padding: var(--sp-space-4) var(--sp-space-2);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-bright);
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: left;
  cursor: pointer;
  transition: background 140ms ease;
}

.cc-body .cc-xref-clone-item:hover {
  background: color-mix(in srgb, var(--agent-color, color-mix(in srgb, var(--mod-applicant) 50%, var(--accent-ember))) 14%, transparent);
}

.cc-body .cc-xref-clone-item .material-symbols-outlined {
  font-size: 15px;
  color: var(--agent-color, color-mix(in srgb, var(--mod-applicant) 50%, var(--accent-ember)));
}

.cc-body .cc-xref-clone-name { flex: 1; }

.cc-body .cc-xref-clone-count {
  padding: var(--sp-space-4) var(--sp-space-4);
  background: rgba(232, 219, 178, 0.08);
  border-radius: 2px;
  font-size: 9px;
  font-weight: 700;
  color: var(--agent-color, color-mix(in srgb, var(--mod-applicant) 50%, var(--accent-ember)));
}

/* R3-V1: Collapsed state */
.cc-body .cc-card-capabilities[data-cap-collapsed="1"] .cc-card-body {
  display: none;
}

.cc-body .cc-card-capabilities[data-cap-collapsed="1"] .cc-card-header {
  border-bottom: none;
}

.cc-body .cc-card-capabilities[data-cap-collapsed="1"] .cc-cap-score::before {
  content: '· згорнуто';
  font-size: 9px;
  color: var(--text-muted);
  margin-left: var(--sp-space-4);
  font-weight: 400;
  letter-spacing: 0.04em;
}

.cc-body .cc-health-stale-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-4);
}

.cc-body .cc-health-stale-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-space-4) var(--sp-space-2);
  background: var(--cc-stale-soft);
  border: 1px solid rgba(197, 139, 58, 0.2);
  border-radius: var(--vr-radius);
  font-size: 11px;
}

.cc-body .cc-health-stale-name {
  color: var(--text-bright);
  font-family: var(--font-mono);
}

.cc-body .cc-health-stale-badge {
  font-size: 10px;
  padding: var(--sp-space-4) var(--sp-space-2);
  border-radius: var(--vr-radius);
  background: rgba(197, 139, 58, 0.2);
  color: var(--cc-stale-color);
  border: 1px solid rgba(197, 139, 58, 0.3);
  animation: cc-stale-pulse 2s ease-in-out infinite;
}

.cc-body .cc-badge-location {
  background: rgba(232, 219, 178, 0.05);
  border: 1px solid rgba(232, 219, 178, 0.08);
  color: var(--text-body);
}

.cc-body .cc-badge-invocable {
  background: rgba(107, 142, 78, 0.1);
  border: 1px solid rgba(107, 142, 78, 0.2);
  color: var(--success);
}

.cc-body .cc-tool-read {
  background: rgba(197, 139, 58, 0.1);
  border: 1px solid rgba(197, 139, 58, 0.2);
  color: var(--cc-accent);
}

.cc-body .cc-tool-write {
  background: rgba(197, 139, 58, 0.1);
  border: 1px solid rgba(197, 139, 58, 0.2);
  color: var(--cc-stale-color);
}

.cc-body .cc-tool-mcp {
  background: rgba(184, 92, 58, 0.1);
  border: 1px solid rgba(184, 92, 58, 0.2);
  color: var(--accent-brass-hover);
}

.cc-body .cc-tool-other {
  background: rgba(232, 219, 178, 0.05);
  border: 1px solid rgba(232, 219, 178, 0.08);
  color: var(--text-body);
}

.cc-body .cc-hook-matcher {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  background: rgba(232, 219, 178, 0.04);
  padding: var(--sp-space-4) var(--sp-space-4);
  border-radius: var(--vr-radius);
}

.cc-body .cc-mcp-type {
  background: rgba(184, 92, 58, 0.1);
  border: 1px solid rgba(184, 92, 58, 0.2);
  color: var(--accent-brass-hover);
}

.cc-body .cc-mcp-scope {
  background: rgba(232, 219, 178, 0.04);
  border: 1px solid rgba(232, 219, 178, 0.08);
  color: var(--text-body);
}

.cc-body .cc-config-section-body {
  padding: var(--sp-space-3);
}

.cc-body .cc-passport-head-top {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-space-4);
}

.cc-body .cc-passport-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 4px;
  background: linear-gradient(135deg, rgba(197, 139, 58, 0.2) 0%, rgba(197, 139, 58, 0.06) 100%);
  border: 1px solid var(--cc-accent-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 20px rgba(197, 139, 58, 0.12), inset 0 1px 0 rgba(232, 219, 178, 0.08);
}

.cc-body .cc-passport-icon-wrap .material-symbols-outlined {
  font-size: 26px;
  color: var(--cc-accent);
}

.cc-body .cc-passport-head-info {
  flex: 1;
  min-width: 0;
}

.cc-body .cc-passport-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--cc-accent);
  opacity: 0.7;
  font-family: var(--font-mono);
  margin-bottom: 2px;
}

.cc-body .cc-passport-head-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-space-4);
}

.cc-body .cc-passport-meta-item {
  display: flex;
  align-items: center;
  gap: var(--sp-space-4);
  font-size: 11px;
}

/* ─── Паспорт секції ───────────────────────────────────── */
.cc-body .cc-passport-section {
  background: var(--cc-card-bg);
  border: 1px solid var(--cc-card-border);
  border-radius: var(--vr-radius);
  margin-bottom: var(--sp-space-3);
  overflow: hidden;
  transition: border-color 0.25s ease;
}

.cc-body .cc-passport-section:hover {
  border-color: rgba(197, 139, 58, 0.18);
}

.cc-body .cc-passport-section-title {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-body);
}

.cc-body .cc-passport-section-title .material-symbols-outlined {
  font-size: 15px;
  color: var(--cc-accent);
}

.cc-body .cc-passport-section.collapsed .cc-passport-section-body {
  display: none;
}

.cc-body .cc-passport-section.collapsed .cc-passport-section-toggle {
  transform: rotate(-90deg);
}

.cc-body .cc-passport-handoff-agent {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space-4);
  padding: var(--sp-space-4) var(--sp-space-2);
  border-radius: var(--vr-radius);
  font-family: var(--font-mono);
  font-size: 11px;
}

.cc-body .cc-passport-handoff-agent.source {
  background: rgba(107, 142, 78, 0.1);
  border: 1px solid rgba(107, 142, 78, 0.25);
  color: var(--success);
}

.cc-body .cc-passport-handoff-agent.self {
  background: var(--cc-accent-soft);
  border: 1px solid var(--cc-accent-border);
  color: var(--cc-accent);
  font-weight: 600;
  box-shadow: 0 0 10px rgba(197, 139, 58, 0.15);
}

.cc-body .cc-passport-handoff-agent.target {
  background: rgba(184, 92, 58, 0.1);
  border: 1px solid rgba(184, 92, 58, 0.2);
  color: var(--accent-brass-hover);
}

/* ─── Report save JSON ─────────────────────────────────── */
.cc-body .cc-passport-report-block {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(197, 139, 58, 0.12);
  border-radius: 4px;
  padding: var(--sp-space-3) var(--sp-space-3);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.7;
  color: var(--text-body);
  white-space: pre;
  overflow-x: auto;
}

.cc-body .cc-passport-report-block .json-key { color: var(--cc-accent); }

.cc-body .cc-passport-report-block .json-str { color: var(--mod-observer); }

.cc-body .cc-passport-report-block .json-num { color: var(--accent-brass); }

.cc-body .cc-passport-report-block .json-bool { color: var(--log-error); }

/* ─── Текстові блоки ───────────────────────────────────── */
.cc-body .cc-passport-text-block {
  font-size: 12px;
  color: var(--text-body);
  line-height: 1.65;
  white-space: pre-wrap;
  border-left: 3px solid var(--cc-accent-border);
  padding: var(--sp-space-2) var(--sp-space-3);
  background: rgba(197, 139, 58, 0.03);
  border-radius: 0 4px 4px 0;
}

/* ─── List cards (generic sections) ────────────────────── */
.cc-body .cc-passport-list-cards {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-4);
}

.cc-body .cc-passport-list-card {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-space-2);
  padding: var(--sp-space-4) var(--sp-space-2);
  border-left: 2px solid var(--cc-accent-border);
  background: rgba(197, 139, 58, 0.03);
  border-radius: 0 4px 4px 0;
  font-size: 12px;
  color: var(--text-body);
  line-height: 1.5;
  animation: cc-fade-up 0.2s ease both;
}

.cc-body .cc-passport-list-card-icon {
  font-size: 10px !important;
  color: var(--cc-accent);
  flex-shrink: 0;
  margin-top: var(--sp-space-4);
  opacity: 0.6;
}

.cc-body .cc-passport-list-card-text {
  flex: 1;
}

.cc-body .cc-passport-placeholder {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}

/* ─── Handoff Graph ─────────────────────────────────────── */
.cc-body .cc-handoff-graph {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: var(--sp-space-3) 0 var(--sp-space-4);
  min-height: 80px;
  flex-wrap: wrap;
}

.cc-body .cc-handoff-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-space-2);
}

.cc-body .cc-handoff-col-in { align-items: flex-end; }

.cc-body .cc-handoff-col-out { align-items: flex-start; }

.cc-body .cc-handoff-col-center { z-index: 2; margin: 0 8px; }

.cc-body .cc-handoff-col-empty { min-width: 40px; }

.cc-body .cc-handoff-center-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-space-4);
}

.cc-body .cc-handoff-node-self {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(197, 139, 58, 0.2) 0%, rgba(197, 139, 58, 0.06) 100%);
  border: 2px solid var(--cc-accent-border);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px rgba(197, 139, 58, 0.2), inset 0 1px 0 rgba(232, 219, 178, 0.08);
  animation: cc-int-glow-pulse 3s ease-in-out infinite;
  position: relative;
}

.cc-body .cc-handoff-node-self .material-symbols-outlined {
  font-size: 26px;
  color: var(--cc-accent);
}

.cc-body .cc-handoff-node-label {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--cc-accent);
  text-align: center;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  margin-top: 2px;
}

.cc-body .cc-handoff-side-node {
  display: flex;
  align-items: center;
  gap: var(--sp-space-4);
  animation: cc-fade-up 0.3s ease both;
  flex-direction: row;
}

.cc-body .cc-handoff-col-in .cc-handoff-side-node { flex-direction: row; }

.cc-body .cc-handoff-col-out .cc-handoff-side-node { flex-direction: row-reverse; }

.cc-body .cc-handoff-ext-node {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cc-body .cc-handoff-node-source .cc-handoff-ext-node {
  background: rgba(107, 142, 78, 0.12);
  border: 1.5px solid rgba(107, 142, 78, 0.3);
}

.cc-body .cc-handoff-node-source .cc-handoff-ext-node .material-symbols-outlined {
  font-size: 17px;
  color: var(--success);
}

.cc-body .cc-handoff-node-target .cc-handoff-ext-node {
  background: rgba(184, 92, 58, 0.12);
  border: 1.5px solid rgba(184, 92, 58, 0.3);
}

.cc-body .cc-handoff-node-target .cc-handoff-ext-node .material-symbols-outlined {
  font-size: 17px;
  color: var(--accent-brass-hover);
}

.cc-body .cc-handoff-ext-label {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-body);
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Конектор-лінія між нодами */
.cc-body .cc-handoff-connector {
  display: flex;
  align-items: center;
  gap: var(--sp-space-4);
  flex-shrink: 0;
}

.cc-body .cc-handoff-connector-line {
  width: 28px;
  height: 1.5px;
  background: linear-gradient(90deg, rgba(107, 142, 78, 0.5), rgba(107, 142, 78, 0.15));
  animation: cc-handoff-pulse 2s ease-in-out infinite;
}

.cc-body .cc-handoff-node-target .cc-handoff-connector-line {
  background: linear-gradient(90deg, rgba(184, 92, 58, 0.15), rgba(184, 92, 58, 0.5));
}

.cc-body .cc-handoff-connector-arrow {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1;
}

.cc-body .cc-handoff-node-source .cc-handoff-connector-arrow { color: var(--success); }

.cc-body .cc-handoff-node-target .cc-handoff-connector-arrow { color: var(--accent-brass-hover); }

/* Ізольований агент */
.cc-body .cc-handoff-isolated {
  flex-direction: column;
  gap: var(--sp-space-2);
}

.cc-body .cc-handoff-isolated-label {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
}

/* ─── Stats mini-bar ────────────────────────────────────── */
.cc-body .cc-passport-stats-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-space-4);
  flex-shrink: 0;
  padding: var(--sp-space-4) 0 var(--sp-space-4) var(--sp-space-4);
}

.cc-body .cc-passport-stats-bar {
  flex-direction: row;
  align-items: flex-end;
  padding: 0 0 0 var(--sp-space-4);
}

.cc-body .cc-stats-bar-int { background: linear-gradient(180deg, var(--accent-brass-hover), rgba(197,139,58,0.5)); }

/* ─── Integrations Map ──────────────────────────────────── */
.cc-body .cc-passport-int-map {
  margin-top: var(--sp-space-3);
  padding-top: var(--sp-space-3);
  border-top: 1px solid rgba(197, 139, 58, 0.06);
}

.cc-body .cc-passport-int-map-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: var(--sp-space-2);
  font-family: var(--font-mono);
}

.cc-body .cc-passport-int-map-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-space-4);
}

.cc-body .cc-int-map-item {
  display: flex;
  align-items: center;
  gap: var(--sp-space-4);
  padding: var(--sp-space-4) var(--sp-space-2);
  border-radius: 4px;
  font-size: 10px;
  font-family: var(--font-mono);
  cursor: default;
  transition: all 0.2s ease;
}

.cc-body .cc-int-map-item .material-symbols-outlined {
  font-size: 13px;
}

.cc-body .cc-int-map-active {
  background: var(--cc-accent-soft);
  border: 1px solid var(--cc-accent-border);
  color: var(--cc-accent);
  animation: cc-int-glow-pulse 3s ease-in-out infinite;
}

.cc-body .cc-int-map-active:hover {
  background: rgba(197, 139, 58, 0.2);
  box-shadow: 0 0 12px rgba(197, 139, 58, 0.3);
  transform: translateY(-1px);
}

.cc-body .cc-int-map-dim {
  background: rgba(232, 219, 178, 0.02);
  border: 1px solid rgba(232, 219, 178, 0.05);
  color: var(--text-muted);
  opacity: 0.5;
}

.cc-body .cc-int-map-dim:hover {
  opacity: 0.75;
  background: rgba(232, 219, 178, 0.04);
}

.cc-body .cc-smart-tl-node {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-space-3);
  animation: cc-fade-up 0.35s ease both;
  position: relative;
}

.cc-body .cc-smart-tl-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 28px;
}

.cc-body .cc-smart-tl-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  animation: cc-smart-node-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  background: linear-gradient(135deg,
    rgba(124, 158, 219, calc(0.22 - var(--step-idx, 0) * 0.015)) 0%,
    rgba(139, 126, 200, calc(0.14 + var(--step-idx, 0) * 0.01)) 100%);
  border: 1.5px solid rgba(124, 158, 219, calc(0.38 - var(--step-idx, 0) * 0.015));
  box-shadow: 0 0 8px rgba(197, 139, 58, 0.18);
}

.cc-body .cc-smart-tl-line {
  width: 1.5px;
  flex: 1;
  min-height: 18px;
  background: linear-gradient(180deg,
    rgba(197, 139, 58, 0.28) 0%,
    rgba(197, 139, 58, 0.06) 100%);
  border-radius: var(--forge-radius);
  margin: 2px 0;
  animation: cc-smart-tl-line-draw 0.4s ease both;
}

/* Затримки для smart timeline */
.cc-body .cc-smart-tl-node:nth-child(1) { animation-delay: 0.04s; }

.cc-body .cc-smart-tl-node:nth-child(2) { animation-delay: 0.09s; }

.cc-body .cc-smart-tl-node:nth-child(3) { animation-delay: 0.14s; }

.cc-body .cc-smart-tl-node:nth-child(4) { animation-delay: 0.19s; }

.cc-body .cc-smart-tl-node:nth-child(5) { animation-delay: 0.24s; }

.cc-body .cc-smart-tl-node:nth-child(6) { animation-delay: 0.29s; }

.cc-body .cc-smart-tl-node:nth-child(7) { animation-delay: 0.34s; }

.cc-body .cc-smart-tl-node:nth-child(8) { animation-delay: 0.39s; }

.cc-body .cc-smart-tl-circle { animation-delay: inherit; }

.cc-body .cc-smart-tl-line { animation-delay: inherit; }

.cc-body .cc-smart-code-desc {
  font-size: 11px;
  color: var(--text-body);
  line-height: 1.6;
  padding: var(--sp-space-4) 0 var(--sp-space-4);
  animation: cc-fade-up 0.25s ease both;
}

.cc-body .cc-smart-step-body {
  flex: 1;
  min-width: 0;
}

/* ─────────────────────────────────────────────────────────
   CARD LIST (.cc-smart-card-list)
   Для bullet lists з довгими items
   ───────────────────────────────────────────────────────── */
.cc-body .cc-smart-card-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-4);
}

.cc-body .cc-smart-card-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-space-2);
  padding: var(--sp-space-2) var(--sp-space-3) var(--sp-space-2) var(--sp-space-3);
  background: rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(232, 219, 178, 0.04);
  border-radius: 4px;
  animation: cc-smart-slide-in 0.25s ease both;
  transition: all 0.2s ease;
  position: relative;
}

.cc-body .cc-smart-card-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 4px 0 0 4px;
  background: var(--cc-accent-border);
  transition: background 0.2s ease;
}

.cc-body .cc-smart-card-item:hover {
  background: rgba(197, 139, 58, 0.04);
  border-color: rgba(197, 139, 58, 0.1);
}

.cc-body .cc-smart-card-item:hover::before {
  background: var(--cc-accent);
}

.cc-body .cc-smart-card-item-marker {
  /* Прихований - замінений на ::before псевдоелемент */
  display: none;
}

.cc-body .cc-smart-card-item-text {
  font-size: 12px;
  color: var(--text-body);
  line-height: 1.55;
  flex: 1;
}

.cc-body .cc-smart-status-emoji {
  font-size: 16px;
  flex-shrink: 0;
  line-height: 1.3;
}

.cc-body .cc-smart-status-body {
  flex: 1;
  min-width: 0;
}

.cc-body .cc-smart-status-text {
  font-size: 12px;
  color: var(--text-body);
  line-height: 1.5;
}

.cc-body .cc-smart-status-list {
  margin: var(--sp-space-4) 0 0;
  padding-left: var(--sp-space-3);
  list-style: disc;
}

.cc-body .cc-smart-status-list li {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
  padding: var(--sp-space-4) 0;
}

/* ─────────────────────────────────────────────────────────
   FILE TREE (.cc-smart-file-tree)
   Для файлових шляхів
   ───────────────────────────────────────────────────────── */
.cc-body .cc-smart-file-tree {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-4);
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(197, 139, 58, 0.1);
  border-radius: var(--vr-radius);
  overflow: hidden;
  padding: var(--sp-space-4) 0;
}

.cc-body .cc-smart-file-row {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  padding: var(--sp-space-4) var(--sp-space-3);
  font-size: 11px;
  font-family: var(--font-mono);
  cursor: default;
  transition: background 0.15s ease;
  animation: cc-smart-file-row-in 0.25s ease both;
  border-left: 2px solid transparent;
}

.cc-body .cc-smart-file-row:hover {
  background: rgba(197, 139, 58, 0.05);
}

.cc-body .cc-smart-file-row.is-dir {
  border-left-color: rgba(197, 139, 58, 0.3);
}

.cc-body .cc-smart-file-row.is-dir:hover {
  background: rgba(197, 139, 58, 0.05);
}

.cc-body .cc-smart-file-icon {
  font-size: 14px !important;
  flex-shrink: 0;
}

.cc-body .is-dir .cc-smart-file-icon { color: var(--accent-brass); }

.cc-body .is-file .cc-smart-file-icon { color: var(--cc-accent); }

.cc-body .is-file[data-ext=".js"] .cc-smart-file-icon { color: var(--mod-publisher); }

.cc-body .is-file[data-ext=".json"] .cc-smart-file-icon { color: var(--success); }

.cc-body .is-file[data-ext=".css"] .cc-smart-file-icon { color: var(--accent-brass-hover); }

.cc-body .cc-smart-file-name {
  color: var(--text-bright);
  flex-shrink: 0;
}

.cc-body .cc-smart-file-path {
  font-size: 10px;
  color: var(--text-muted);
  margin-left: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 260px;
}

.cc-body .cc-smart-file-comment {
  font-size: 10px;
  color: var(--text-muted);
  padding: var(--sp-space-4) var(--sp-space-3);
  font-style: italic;
  animation: cc-fade-up 0.2s ease both;
}

/* Checklist всередині output block */
.cc-body .cc-smart-checklist {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-4);
  padding: 0;
  margin: 0;
  list-style: none;
}

.cc-body .cc-smart-checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-space-2);
  font-size: 11px;
  color: var(--text-body);
  line-height: 1.5;
  padding: var(--sp-space-4) 0;
  transition: color 0.15s ease;
}

.cc-body .cc-smart-checklist li:hover {
  color: var(--text-bright);
}

.cc-body .cc-smart-checklist li .material-symbols-outlined {
  font-size: 14px;
  color: var(--success);
  flex-shrink: 0;
  margin-top: 1px;
}

/* ╔══════════════════════════════════════════════════════╗
   ║  TAB 3: SKILLS PASSPORT                               ║
   ╚══════════════════════════════════════════════════════╝ */
/* Trigger bubbles */
.cc-body .cc-skill-trigger-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-3);
}

.cc-body .cc-skill-trigger-desc-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-space-2);
  padding: var(--sp-space-2) var(--sp-space-3);
  background: rgba(197, 139, 58, 0.05);
  border: 1px solid rgba(197, 139, 58, 0.1);
  border-radius: 4px;
  font-size: 11px;
  color: var(--text-body);
  line-height: 1.6;
}

.cc-body .cc-skill-trigger-desc code {
  font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace;
  color: var(--cc-accent);
  background: rgba(197, 139, 58, 0.1);
  padding: 0 var(--sp-space-4);
  border-radius: var(--radius-sm);
}

.cc-body .cc-skill-trigger-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.cc-body .cc-skill-trigger-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-space-4);
}

.cc-body .cc-skill-trigger-bubble {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-space-4) var(--sp-space-3);
  border-radius: var(--vr-radius);
  font-size: 11px;
  font-family: var(--font-mono);
  background: rgba(197, 139, 58, 0.1);
  border: 1px solid rgba(197, 139, 58, 0.25);
  color: var(--accent-brass);
  cursor: default;
  animation: cc-bubble-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  transition: all 0.2s ease;
}

.cc-body .cc-skill-trigger-bubble:hover {
  background: rgba(197, 139, 58, 0.2);
  box-shadow: 0 0 10px rgba(197, 139, 58, 0.25);
  transform: translateY(-1px);
}

/* Agent avatars row */
.cc-body .cc-skill-agents-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-space-2);
}

.cc-body .cc-skill-agent-avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-space-4);
  cursor: default;
  animation: cc-fade-up 0.3s ease both;
  transition: transform 0.2s ease;
}

.cc-body .cc-skill-agent-avatar:hover {
  transform: translateY(-2px);
}

.cc-body .cc-skill-agent-avatar .material-symbols-outlined {
  font-size: 22px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cc-accent-soft);
  border: 1.5px solid var(--cc-accent-border);
  color: var(--cc-accent);
  box-shadow: 0 0 12px rgba(197, 139, 58, 0.15);
  transition: box-shadow 0.2s ease;
}

.cc-body .cc-skill-agent-avatar:hover .material-symbols-outlined {
  box-shadow: 0 0 20px rgba(197, 139, 58, 0.3);
}

.cc-body .cc-skill-agent-label {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  text-align: center;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ╔══════════════════════════════════════════════════════╗
   ║  TAB 4: HOOKS EVENT MAP                               ║
   ╚══════════════════════════════════════════════════════╝ */
/* Coverage wrap */
.cc-body .cc-hooks-coverage-wrap {
  background: var(--cc-card-bg);
  border: 1px solid var(--cc-card-border);
  border-radius: var(--vr-radius);
  overflow: hidden;
  margin-bottom: var(--sp-space-4);
  animation: cc-fade-up 0.3s ease both;
}

.cc-body .cc-hooks-coverage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-space-3) var(--sp-space-4);
  border-bottom: 1px solid rgba(197, 139, 58, 0.08);
  background: rgba(197, 139, 58, 0.02);
  gap: var(--sp-space-3);
}

.cc-body .cc-hooks-coverage-title {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-body);
}

.cc-body .cc-hooks-coverage-title .material-symbols-outlined {
  font-size: 15px;
  color: var(--cc-accent);
}

/* Score ring */
.cc-body .cc-hooks-coverage-score {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
}

.cc-body .cc-score-val {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text-bright);
}

.cc-body .cc-hooks-score-meta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-4);
}

.cc-body .cc-hooks-score-num {
  font-size: 20px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text-bright);
  line-height: 1;
}

.cc-body .cc-hooks-score-denom {
  font-size: 13px;
  color: var(--text-muted);
}

.cc-body .cc-hooks-score-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.cc-body .cc-hooks-score-sublabel {
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  margin-top: 2px;
  opacity: 0.85;
}

.cc-body .cc-hooks-score-sublabel b {
  color: var(--cc-accent, color-mix(in srgb, var(--mod-applicant) 50%, var(--accent-ember)));
  font-weight: 700;
}

/* Event grid */
.cc-body .cc-hooks-event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-space-4);
  padding: var(--sp-space-3) var(--sp-space-3);
}

.cc-body .cc-hook-event-card {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  padding: var(--sp-space-2) var(--sp-space-3);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  animation: cc-card-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  position: relative;
  overflow: hidden;
}

.cc-body .cc-hook-event-covered {
  background: rgba(107, 142, 78, 0.07);
  border: 1px solid rgba(107, 142, 78, 0.2);
}

.cc-body .cc-hook-event-covered:hover {
  background: rgba(107, 142, 78, 0.14);
  border-color: rgba(107, 142, 78, 0.4);
  box-shadow: 0 0 14px rgba(107, 142, 78, 0.2);
  transform: translateY(-1px);
}

.cc-body .cc-hook-event-empty {
  background: rgba(232, 219, 178, 0.02);
  border: 1px solid rgba(232, 219, 178, 0.05);
}

.cc-body .cc-hook-event-empty:hover {
  background: rgba(232, 219, 178, 0.04);
  border-color: rgba(232, 219, 178, 0.1);
}

.cc-body .cc-hook-event-icon {
  width: 30px;
  height: 30px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cc-body .cc-hook-event-covered .cc-hook-event-icon {
  background: rgba(107, 142, 78, 0.15);
  border: 1px solid rgba(107, 142, 78, 0.25);
}

.cc-body .cc-hook-event-covered .cc-hook-event-icon .material-symbols-outlined {
  font-size: 15px;
  color: var(--success);
}

.cc-body .cc-hook-event-empty .cc-hook-event-icon {
  background: rgba(232, 219, 178, 0.04);
  border: 1px solid rgba(232, 219, 178, 0.06);
}

.cc-body .cc-hook-event-empty .cc-hook-event-icon .material-symbols-outlined {
  font-size: 15px;
  color: var(--text-muted);
}

.cc-body .cc-hook-event-card-body {
  flex: 1;
  min-width: 0;
}

.cc-body .cc-hook-event-card-name {
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--text-bright);
  margin-bottom: 2px;
}

.cc-body .cc-hook-event-empty .cc-hook-event-card-name {
  color: var(--text-muted);
}

.cc-body .cc-hook-event-card-desc {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-body .cc-hook-event-status {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cc-body .cc-hook-event-status.covered {
  background: rgba(107, 142, 78, 0.2);
  border: 1px solid rgba(107, 142, 78, 0.4);
}

.cc-body .cc-hook-event-status.covered .material-symbols-outlined {
  font-size: 11px;
  color: var(--success);
}

.cc-body .cc-hook-event-status.empty {
  background: rgba(232, 219, 178, 0.04);
  border: 1px solid rgba(232, 219, 178, 0.08);
}

.cc-body .cc-hook-event-status.empty .material-symbols-outlined {
  font-size: 11px;
  color: var(--text-muted);
}

/* Hook Detail Panel */
.cc-body .cc-hook-detail-panel {
  background: var(--cc-card-bg);
  border: 1px solid var(--cc-accent-border);
  border-radius: var(--vr-radius);
  margin-bottom: var(--sp-space-4);
  overflow: hidden;
  animation: cc-glow-appear 0.25s ease;
  box-shadow: 0 0 20px rgba(197, 139, 58, 0.08);
}

.cc-body .cc-hook-detail-content {
  padding: var(--sp-space-3) var(--sp-space-4);
}

.cc-body .cc-hook-detail-header {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-space-3);
  margin-bottom: var(--sp-space-3);
}

.cc-body .cc-hook-detail-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--vr-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cc-body .cc-hook-detail-icon.covered {
  background: rgba(107, 142, 78, 0.15);
  border: 1px solid rgba(107, 142, 78, 0.3);
}

.cc-body .cc-hook-detail-icon.covered .material-symbols-outlined {
  font-size: 20px;
  color: var(--success);
}

.cc-body .cc-hook-detail-icon.empty {
  background: rgba(232, 219, 178, 0.04);
  border: 1px solid rgba(232, 219, 178, 0.08);
}

.cc-body .cc-hook-detail-icon.empty .material-symbols-outlined {
  font-size: 20px;
  color: var(--text-muted);
}

.cc-body .cc-hook-detail-info {
  flex: 1;
  min-width: 0;
}

.cc-body .cc-hook-detail-event {
  font-size: 16px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text-bright);
  margin-bottom: var(--sp-space-4);
}

.cc-body .cc-hook-detail-status {
  display: flex;
  align-items: center;
  gap: var(--sp-space-4);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--sp-space-4);
}

.cc-body .cc-hook-detail-status.covered { color: var(--success); }

.cc-body .cc-hook-detail-status.empty { color: var(--text-muted); }

.cc-body .cc-hook-detail-desc {
  font-size: 11px;
  color: var(--text-body);
  line-height: 1.5;
}

.cc-body .cc-hook-detail-hint {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-space-4);
  padding: var(--sp-space-2) var(--sp-space-3);
  background: rgba(197, 139, 58, 0.05);
  border: 1px solid rgba(197, 139, 58, 0.1);
  border-radius: 4px;
  font-size: 11px;
  color: var(--text-body);
  line-height: 1.5;
  margin-top: var(--sp-space-2);
}

/* Hook Flow */
.cc-body .cc-hook-flow {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  flex-wrap: wrap;
  padding: var(--sp-space-2) 0;
}

.cc-body .cc-hook-flow-lg {
  padding: var(--sp-space-3);
  background: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  border: 1px solid rgba(232, 219, 178, 0.04);
}

.cc-body .cc-hook-flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-space-4);
  min-width: 60px;
}

.cc-body .cc-hook-flow-icon {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cc-accent-soft);
  border: 1px solid var(--cc-accent-border);
}

.cc-body .cc-hook-flow-icon .material-symbols-outlined { font-size: 14px; color: var(--cc-accent); }

.cc-body .cc-hook-flow-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-family: var(--font-mono);
  text-align: center;
}

.cc-body .cc-hook-flow-val {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-body);
  text-align: center;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-body .cc-hook-flow-cmd {
  font-size: 10px;
}

.cc-body .cc-hook-flow-arrow {
  color: var(--text-muted);
  font-size: 14px;
  flex-shrink: 0;
  margin-bottom: var(--sp-space-4);
}

/* Hooks Passport section */
.cc-body .cc-hooks-passport-wrap {
  background: var(--cc-card-bg);
  border: 1px solid var(--cc-card-border);
  border-radius: var(--vr-radius);
  overflow: hidden;
  animation: cc-fade-up 0.3s ease both;
}

.cc-body .cc-hooks-passport-header {
  display: flex;
  align-items: center;
  padding: var(--sp-space-3) var(--sp-space-4);
  border-bottom: 1px solid rgba(197, 139, 58, 0.08);
  background: rgba(197, 139, 58, 0.02);
}

.cc-body .cc-hooks-passport-title {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-body);
}

.cc-body .cc-hooks-passport-title .material-symbols-outlined { font-size: 14px; color: var(--cc-accent); }

/* Hook Passport Card */
.cc-body .cc-hook-passport-card {
  border-bottom: 1px solid rgba(232, 219, 178, 0.04);
  cursor: pointer;
  animation: cc-fade-up 0.3s ease both;
  transition: background 0.15s ease;
}

.cc-body .cc-hook-passport-card:last-child {
  border-bottom: none;
}

.cc-body .cc-hook-passport-card:hover {
  background: rgba(197, 139, 58, 0.03);
}

.cc-body .cc-hook-pcard-header {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  padding: var(--sp-space-3) var(--sp-space-4);
}

.cc-body .cc-hook-pcard-event {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  flex: 1;
  min-width: 0;
}

.cc-body .cc-hook-pcard-icon {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: var(--cc-accent-soft);
  border: 1px solid var(--cc-accent-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cc-body .cc-hook-pcard-icon .material-symbols-outlined { font-size: 15px; color: var(--cc-accent); }

.cc-body .cc-hook-pcard-info {
  flex: 1;
  min-width: 0;
}

.cc-body .cc-hook-pcard-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-space-4);
  margin-bottom: var(--sp-space-4);
}

.cc-body .cc-hook-pcard-desc {
  font-size: 10px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-body .cc-hook-pcard-body {
  padding: var(--sp-space-3) var(--sp-space-4);
  background: rgba(0, 0, 0, 0.15);
  border-top: 1px solid rgba(197, 139, 58, 0.06);
  animation: cc-glow-appear 0.2s ease;
}

.cc-body .cc-hooks-empty-events {
  margin-top: var(--sp-space-4);
}

.cc-body .cc-hooks-empty-events-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: var(--sp-space-2);
}

.cc-body .cc-mcp-status-text {
  letter-spacing: 0.04em;
}

.cc-body .cc-claudemd-outline-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  font-family: var(--font-mono);
  margin-bottom: var(--sp-space-2);
  padding-bottom: var(--sp-space-4);
  border-bottom: 1px solid rgba(232, 219, 178, 0.05);
}

.cc-body .cc-claudemd-meta {
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  margin-bottom: var(--sp-space-4);
}

.cc-body .cc-config-stat-visual-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-4);
}

.cc-body .cc-config-stat-visual-header {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  font-size: 12px;
  color: var(--text-body);
}

.cc-body .cc-config-stat-visual-header .material-symbols-outlined {
  font-size: 15px;
  color: var(--cc-accent);
}

.cc-body .cc-config-stat-visual-label {
  flex: 1;
}

.cc-body .cc-config-stat-hooks {
  color: var(--success);
}

.cc-body .cc-config-stat-progress-hooks .cc-config-stat-bar-hooks {
  background: linear-gradient(90deg, var(--success), rgba(107, 142, 78, 0.6));
}

.cc-body .cc-config-stat-hint {
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.cc-body .cc-memory-card-body {
  flex: 1;
  min-width: 0;
}

.cc-body .cc-memory-card-title {
  font-size: 10px;
  color: var(--text-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: var(--sp-space-4);
  font-style: italic;
}

.cc-body .cc-memory-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-space-4);
}

.cc-body .cc-memory-card-size {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-muted);
}

.cc-body .cc-cheatsheet-card-body {
  flex: 1;
  min-width: 0;
}

.cc-body .cc-cheatsheet-card-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-space-4);
}

.cc-body .cc-cheatsheet-size {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-muted);
}

.cc-body .cc-cheatsheet-agent {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space-4);
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--cc-accent);
  background: var(--cc-accent-soft);
  border: 1px solid var(--cc-accent-border);
  padding: var(--sp-space-4) var(--sp-space-4);
  border-radius: var(--vr-radius);
}

.cc-body .cc-cap-detail-inner {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-space-2);
  padding: var(--sp-space-2) var(--sp-space-3);
}

.cc-body .cc-cap-detail-icon {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cc-body .cc-cap-detail-icon.active {
  background: rgba(107, 142, 78, 0.15);
  border: 1px solid rgba(107, 142, 78, 0.3);
}

.cc-body .cc-cap-detail-icon.active .material-symbols-outlined { font-size: 16px; color: var(--success); }

.cc-body .cc-cap-detail-icon.inactive {
  background: rgba(232, 219, 178, 0.05);
  border: 1px solid rgba(232, 219, 178, 0.08);
}

.cc-body .cc-cap-detail-icon.inactive .material-symbols-outlined { font-size: 16px; color: var(--text-muted); }

.cc-body .cc-cap-detail-body {
  flex: 1;
  min-width: 0;
}

.cc-body .cc-cap-detail-name {
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--text-bright);
  margin-bottom: var(--sp-space-4);
}

.cc-body .cc-cap-detail-status {
  display: flex;
  align-items: center;
  gap: var(--sp-space-4);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: var(--sp-space-4);
}

.cc-body .cc-cap-detail-status.active { color: var(--success); }

.cc-body .cc-cap-detail-status.inactive { color: var(--text-muted); }

.cc-body .cc-cap-detail-desc {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-space-4);
  font-size: 11px;
  color: var(--text-body);
  line-height: 1.5;
}

/* Health Donut */
.cc-body .cc-health-donut-row {
  display: flex;
  align-items: center;
  gap: var(--sp-space-3);
  margin-bottom: var(--sp-space-3);
  padding-bottom: var(--sp-space-3);
  border-bottom: 1px solid rgba(232, 219, 178, 0.05);
}

.cc-body .cc-health-donut-wrap {
  position: relative;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
}

.cc-body .cc-health-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cc-body .cc-health-donut-pct {
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-mono);
}

.cc-body .cc-health-donut-meta {
  display: flex;
  gap: var(--sp-space-4);
}

.cc-body .cc-health-donut-stat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-4);
}

.cc-body .cc-health-donut-num {
  font-size: 22px;
  font-weight: 700;
  font-family: var(--font-mono);
  line-height: 1;
}

.cc-body .cc-health-donut-num.fresh { color: var(--success); }

.cc-body .cc-health-donut-num.stale { color: var(--cc-stale-color); }

.cc-body .cc-health-donut-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.cc-body .cc-health-stale-header {
  display: flex;
  align-items: center;
  gap: var(--sp-space-4);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--cc-stale-color);
  margin-bottom: var(--sp-space-2);
  font-family: var(--font-mono);
}

.cc-body .cc-health-stale-item {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  padding: var(--sp-space-4) var(--sp-space-2);
  background: var(--cc-stale-soft);
  border: 1px solid rgba(197, 139, 58, 0.2);
  border-radius: var(--vr-radius);
  font-size: 11px;
  animation: cc-fade-up 0.3s ease both;
  transition: background 0.15s ease;
}

.cc-body .cc-health-stale-item:hover {
  background: rgba(197, 139, 58, 0.2);
}

.cc-body .cc-health-stale-icon .material-symbols-outlined {
  font-size: 14px;
  color: var(--cc-stale-color);
}

@media (max-width: 640px) {
.cc-body .cc-hooks-coverage-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-space-2);
  }
.cc-body .cc-hooks-event-grid {
    grid-template-columns: 1fr 1fr;
  }
.cc-body .cc-memory-grid {
    grid-template-columns: 1fr;
  }
.cc-body .cc-cheatsheet-grid {
    grid-template-columns: 1fr;
  }
.cc-body .cc-cap-cloud {
    grid-template-columns: repeat(3, 1fr);
  }
.cc-body .cc-hook-flow {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ─────────────────────────────────────────────────────────
   REPORT SAVE FLOW (.cc-smart-report-*)
   Покращений рендер секції збереження результатів
   ───────────────────────────────────────────────────────── */
/* Flow diagram */
.cc-body .cc-smart-report-flow {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  padding: var(--sp-space-3) var(--sp-space-4);
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(197, 139, 58, 0.1);
  border-radius: var(--vr-radius);
  margin-bottom: var(--sp-space-3);
  flex-wrap: wrap;
  justify-content: center;
}

.cc-body .cc-smart-report-flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-space-4);
  flex-shrink: 0;
}

.cc-body .cc-smart-report-flow-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(197, 139, 58, 0.1);
  border: 1.5px solid rgba(197, 139, 58, 0.2);
  transition: all 0.2s ease;
}

.cc-body .cc-smart-report-flow-icon.save {
  background: rgba(107, 142, 78, 0.1);
  border-color: rgba(107, 142, 78, 0.25);
  animation: cc-int-glow-pulse 3s ease-in-out infinite;
}

.cc-body .cc-smart-report-flow-icon.target {
  background: rgba(184, 92, 58, 0.1);
  border-color: rgba(184, 92, 58, 0.25);
}

.cc-body .cc-smart-report-flow-icon .material-symbols-outlined {
  font-size: 20px;
  color: var(--cc-accent);
}

.cc-body .cc-smart-report-flow-icon.save .material-symbols-outlined {
  color: var(--success);
}

.cc-body .cc-smart-report-flow-icon.target .material-symbols-outlined {
  color: var(--accent-brass-hover);
}

.cc-body .cc-smart-report-flow-label {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-space-4);
}

.cc-body .cc-smart-report-flow-arrow {
  font-size: 18px;
  color: var(--cc-accent-border);
  flex-shrink: 0;
  animation: cc-handoff-pulse 2s ease-in-out infinite;
}

/* Collapsible JSON details */
.cc-body .cc-smart-report-details {
  margin-top: var(--sp-space-2);
  border: 1px solid rgba(197, 139, 58, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.cc-body .cc-smart-report-details[open] {
  border-color: rgba(197, 139, 58, 0.18);
}

.cc-body .cc-smart-report-details-arrow {
  margin-left: auto;
  transition: transform 0.25s ease;
  font-size: 16px !important;
}

.cc-body .cc-smart-report-details[open] .cc-smart-report-details-arrow {
  transform: rotate(180deg);
}

.cc-body .cc-smart-report-details .cc-passport-report-block {
  border-radius: 0;
  border: none;
  border-top: 1px solid rgba(197, 139, 58, 0.08);
}

/* ─── 20. Passport cards - canon brass (glass override disabled) ─── */
.cc-body .cc-passport-section {
  background: var(--bg-base);
  border: 1px solid var(--border-metal);
}

.cc-body .cc-freshness-dot.cc-fresh-green {
  background: radial-gradient(circle at 35% 30%, var(--success-bg) 0%, var(--success) 40%, var(--success) 80%, var(--bg-base) 100%);
  box-shadow: inset 0 0.5px 0.5px rgba(232, 219, 178, 0.35), 0 0 6px rgba(107, 142, 78, 0.5);
}

.cc-body .cc-freshness-dot.cc-fresh-yellow {
  background: radial-gradient(circle at 35% 30%, var(--text-bright) 0%, var(--warning) 40%, var(--accent-brass) 80%, var(--sp-copper-dark) 100%);
  box-shadow: inset 0 0.5px 0.5px rgba(232, 219, 178, 0.35), 0 0 6px rgba(197, 139, 58, 0.55);
}

.cc-body .cc-freshness-dot.cc-fresh-orange {
  background: radial-gradient(circle at 35% 30%, var(--text-bright) 0%, var(--accent-ember) 40%, var(--accent-ember) 80%, var(--danger) 100%);
  box-shadow: inset 0 0.5px 0.5px rgba(232, 219, 178, 0.35), 0 0 6px rgba(227, 111, 61, 0.55);
}

.cc-body .cc-freshness-dot.cc-fresh-red {
  background: radial-gradient(circle at 35% 30%, var(--text-bright) 0%, var(--log-error) 40%, var(--log-error) 80%, var(--bg-void) 100%);
  box-shadow: inset 0 0.5px 0.5px rgba(232, 219, 178, 0.35), 0 0 8px rgba(227, 111, 61, 0.7);
  animation: cc-pulse-slow 2s ease-in-out infinite;
}

.cc-body .cc-net-node-label {
  position: absolute;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--agent-color);
  opacity: 0.8;
  pointer-events: none;
  user-select: none;
}

.cc-body .cc-net-info-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: var(--sp-space-2);
}

.cc-body .cc-net-info-icon {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--agent-color) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--agent-color) 40%, transparent);
}

.cc-body .cc-net-info-icon .material-symbols-outlined { font-size: 18px; color: var(--agent-color); }

.cc-body .cc-net-info-name { font-size: 12px; font-weight: 600; color: var(--agent-color); }

.cc-body .cc-net-info-model { font-size: 9px; color: var(--text-muted); }

.cc-body .cc-net-info-desc { font-size: 10px; color: var(--text-body); line-height: 1.4; margin-bottom: 8px; }

.cc-body .cc-net-info-stats {
  display: flex; gap: 12px;
  font-size: 10px; color: var(--text-muted);
}

.cc-body .cc-net-info-stat { display: flex; align-items: center; gap: var(--sp-space-4); }

.cc-body .cc-net-info-stat .material-symbols-outlined { font-size: 12px; }

.cc-body .cc-net-info-connections { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(232, 219, 178, 0.05); }

.cc-body .cc-net-info-conn-label { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }

.cc-body .cc-net-info-conn-list { display: flex; gap: 4px; flex-wrap: wrap; }

.cc-body .cc-net-info-conn-avatar {
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--agent-color) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--agent-color) 30%, transparent);
}

.cc-body .cc-net-info-conn-avatar .material-symbols-outlined { font-size: 11px; color: var(--agent-color); }

.cc-body .cc-xref-skills-toggle {
  display: inline-flex;
  gap: var(--sp-space-4);
  padding: var(--sp-space-4);
  background: rgba(232, 219, 178, 0.03);
  border: 1px solid rgba(232, 219, 178, 0.08);
  border-radius: var(--vr-radius);
}

.cc-body .cc-xref-label {
  display: flex; align-items: center; gap: var(--sp-space-4);
  min-width: 220px; flex-shrink: 0;
}

.cc-body .cc-xref-agents {
  display: flex; gap: var(--sp-space-4); flex-wrap: wrap;
}

.cc-body .cc-clog-count { font-size: 11px; color: var(--text-muted); }

/* Result */
.cc-body .cc-clog-result {
  display: flex; align-items: flex-start; gap: var(--sp-space-4);
  font-size: 12px; color: var(--text-body);
  margin-bottom: var(--sp-space-2); line-height: 1.5;
}

/* Stat card micro-context */
.cc-body .cc-stat-ctx {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  opacity: 0.8;
}

.cc-body .cc-net-breathe {
  animation: cc-breathe 3s ease-in-out infinite;
}

.cc-body .cc-net-breathe-hub {
  animation: cc-breathe-hub 2.5s ease-in-out infinite;
}

.cc-body .cc-net-legend-hint {
  font-size: 12px;
  color: var(--text-body);
  display: flex;
  align-items: center;
  gap: var(--sp-space-4);
  background: rgba(197, 139, 58, 0.06);
  padding: var(--sp-space-4) var(--sp-space-2);
  border-radius: 4px;
  border: 1px solid rgba(197, 139, 58, 0.12);
}

/* ─── Meta redesign ─── */
.cc-body .cc-meta-freshness {
  margin-bottom: var(--sp-space-3);
}

.cc-body .cc-meta-fresh-header {
  display: flex;
  align-items: center;
  gap: var(--sp-space-4);
  margin-bottom: var(--sp-space-4);
}

.cc-body .cc-meta-fresh-label {
  font-size: 11px;
  font-weight: 500;
  flex: 1;
}

.cc-body .cc-meta-fresh-pct {
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--text-body);
}

.cc-body .cc-meta-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.cc-body .cc-gsearch-hint,
.cc-body .cc-gsearch-empty {
  text-align: center;
  padding: var(--sp-space-5);
  font-size: 12px;
  color: var(--text-muted);
}

.cc-body .cc-gsearch-item-body {
  flex: 1;
  min-width: 0;
}

.cc-body .cc-conflict-body {
  flex: 1;
  min-width: 0;
}

.cc-body .cc-conflict-msg {
  font-size: 11px;
  color: var(--text-bright);
}

.cc-body .cc-conflict-detail {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ═══ PASSPORT SECTION RENDERER v2 ═══════════════════════ */
/* ─── Header Hint ─────────────────────────────────────── */
.cc-body .cc-v2-hint {
  display: flex;
  align-items: center;
  gap: var(--sp-space-4);
  padding: var(--sp-space-4) var(--sp-space-4) var(--sp-space-4);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  line-height: 1.4;
  border-bottom: 1px solid rgba(197, 139, 58, 0.04);
}

.cc-body .cc-v2-hint .material-symbols-outlined {
  font-size: 11px;
  opacity: 0.5;
}

.cc-body .cc-passport-section.collapsed .cc-v2-hint {
  display: none;
}

/* ─── Tools Summary ───────────────────────────────────── */
.cc-body .cc-v2-tool-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-space-2);
  margin-bottom: var(--sp-space-3);
  padding: var(--sp-space-2) var(--sp-space-3);
  background: rgba(197, 139, 58, 0.04);
  border-radius: 4px;
  border: 1px solid rgba(197, 139, 58, 0.08);
}

.cc-body .cc-v2-tool-summary-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space-4);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ─── Algorithm Flow Diagram ──────────────────────────── */
.cc-body .cc-v2-flow-diagram {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: var(--sp-space-2) 0;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(197, 139, 58, 0.2) transparent;
}

.cc-body .cc-v2-flow-scroll {
  mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
  padding: var(--sp-space-2) var(--sp-space-3);
}

.cc-body .cc-v2-flow-node {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  animation: cc-fade-up 0.35s ease both;
}

.cc-body .cc-v2-flow-node-wide {
  flex: 1;
  min-width: 0;
}

.cc-body .cc-v2-flow-node-wide .cc-v2-flow-card {
  max-width: none;
  flex: 1;
}

.cc-body .cc-v2-flow-card-body {
  min-width: 0;
}

.cc-body .cc-v2-flow-arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 var(--sp-space-4);
  color: rgba(197, 139, 58, 0.35);
}

.cc-body .cc-v2-flow-arrow svg {
  display: block;
}

/* ─── Restrictions Severity Cards ─────────────────────── */
.cc-body .cc-v2-restrict-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-4);
}

.cc-body .cc-v2-restrict-card {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  padding: var(--sp-space-2) var(--sp-space-3);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(197, 139, 58, 0.06);
  position: relative;
  overflow: hidden;
  animation: cc-fade-up 0.3s ease both;
}

.cc-body .cc-v2-restrict-critical .cc-v2-restrict-icon { color: var(--log-error); }

.cc-body .cc-v2-restrict-warning  .cc-v2-restrict-icon { color: var(--accent-brass); }

.cc-body .cc-v2-restrict-info     .cc-v2-restrict-icon { color: var(--mod-applicant); }

.cc-body .cc-v2-restrict-icon {
  font-size: 15px;
  flex-shrink: 0;
}

.cc-body .cc-v2-restrict-text {
  font-size: 11px;
  color: var(--text-bright));
  line-height: 1.4;
}

.cc-body .cc-v2-restrict-summary {
  display: flex;
  gap: var(--sp-space-3);
  margin-top: var(--sp-space-2);
  padding-top: var(--sp-space-2);
  border-top: 1px solid rgba(197, 139, 58, 0.06);
}

.cc-body .cc-v2-restrict-count {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* ─── Decision Matrix ─────────────────────────────────── */
.cc-body .cc-v2-decision-matrix {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-4);
}

.cc-body .cc-v2-decision-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-space-3);
  padding: var(--sp-space-2) var(--sp-space-3);
  border-radius: 4px;
  animation: cc-fade-up 0.3s ease both;
}

.cc-body .cc-v2-decision-situation {
  font-size: 11px;
  color: var(--text-bright));
  line-height: 1.4;
  flex: 1;
  min-width: 0;
}

.cc-body .cc-v2-zebra { background: rgba(197, 139, 58, 0.03); }

/* ─── Handoff Explanations ────────────────────────────── */
.cc-body .cc-v2-handoff-explanations {
  margin-top: var(--sp-space-2);
  padding-top: var(--sp-space-2);
  border-top: 1px solid rgba(197, 139, 58, 0.06);
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-4);
}

.cc-body .cc-v2-handoff-expl {
  display: flex;
  align-items: baseline;
  gap: var(--sp-space-2);
  font-size: 10px;
  padding: var(--sp-space-4) var(--sp-space-2);
  border-radius: var(--vr-radius);
  background: rgba(197, 139, 58, 0.03);
}

.cc-body .cc-v2-handoff-expl-arrow {
  font-size: 12px;
  flex-shrink: 0;
  width: 14px;
  text-align: center;
}

.cc-body .cc-v2-handoff-expl-in .cc-v2-handoff-expl-arrow { color: var(--success); }

.cc-body .cc-v2-handoff-expl-out .cc-v2-handoff-expl-arrow { color: var(--accent-brass); }

.cc-body .cc-v2-handoff-expl-ref .cc-v2-handoff-expl-arrow { color: var(--mod-applicant); }

.cc-body .cc-v2-handoff-expl-agent {
  font-weight: 600;
  color: var(--cc-accent, var(--mod-applicant));
  white-space: nowrap;
}

.cc-body .cc-v2-handoff-expl-desc {
  color: var(--text-muted);
  line-height: 1.4;
}

/* ─── Report Field Cards ──────────────────────────────── */
.cc-body .cc-v2-field-cards-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-body);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: var(--sp-space-3) 0 var(--sp-space-4);
}

.cc-body .cc-v2-field-icon {
  font-size: 14px;
  flex-shrink: 0;
}

.cc-body .cc-v2-field-body { min-width: 0; }

.cc-body .cc-v2-field-meta {
  display: flex;
  gap: var(--sp-space-4);
  align-items: center;
  margin-top: 2px;
}

.cc-body .cc-v2-field-type {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ─── Output Format - Annotated ───────────────────────── */
.cc-body .cc-v2-output-layout {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-3);
}

.cc-body .cc-v2-output-two-col {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--sp-space-3);
  align-items: start;
}

.cc-body .cc-v2-output-annot {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-4);
}

.cc-body .cc-v2-output-annot-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-body);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}

.cc-body .cc-v2-output-annot-item {
  display: flex;
  align-items: baseline;
  gap: var(--sp-space-2);
  padding: var(--sp-space-4) 0;
  animation: cc-fade-up 0.3s ease both;
}

.cc-body .cc-v2-output-annot-num {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(197, 139, 58, 0.12);
  color: var(--cc-accent, var(--mod-applicant));
  font-size: 9px;
  font-weight: 700;
}

.cc-body .cc-v2-output-annot-text {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.4;
}

.cc-body .cc-v2-output-block-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-bright));
  margin-bottom: var(--sp-space-4);
}

.cc-body .cc-v2-info-stripe {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--cc-accent, var(--mod-applicant));
}

.cc-body .cc-v2-info-body { min-width: 0; flex: 1; }

.cc-body .cc-v2-compare-positive {
  background: rgba(107, 142, 78, 0.05);
  border: 1px solid rgba(107, 142, 78, 0.12);
}

.cc-body .cc-v2-compare-negative {
  background: rgba(227, 111, 61, 0.05);
  border: 1px solid rgba(227, 111, 61, 0.12);
}

.cc-body .cc-v2-compare-header {
  font-size: 11px;
  font-weight: 600;
  margin-bottom: var(--sp-space-2);
  padding-bottom: var(--sp-space-4);
  border-bottom: 1px solid rgba(197, 139, 58, 0.08);
}

.cc-body .cc-v2-compare-positive .cc-v2-compare-header { color: var(--success); }

.cc-body .cc-v2-compare-negative .cc-v2-compare-header { color: var(--log-error); }

.cc-body .cc-v2-compare-item {
  display: flex;
  align-items: baseline;
  gap: var(--sp-space-4);
  font-size: 10px;
  color: var(--text-bright));
  padding: var(--sp-space-4) 0;
  line-height: 1.4;
}

.cc-body .cc-v2-compare-item .material-symbols-outlined { font-size: 12px; flex-shrink: 0; }

.cc-body .cc-v2-compare-positive .cc-v2-compare-item .material-symbols-outlined { color: var(--success); }

.cc-body .cc-v2-compare-negative .cc-v2-compare-item .material-symbols-outlined { color: var(--log-error); }

/* ─── Annotated Code ──────────────────────────────────── */
.cc-body .cc-v2-annot-text {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: var(--sp-space-4) 0;
}

.cc-body .cc-v2-annot-code-card {
  border: 1px solid rgba(197, 139, 58, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.cc-body .cc-v2-annot-code-lang {
  display: flex;
  align-items: center;
  gap: var(--sp-space-4);
  padding: var(--sp-space-4) var(--sp-space-2);
  font-size: 9px;
  font-weight: 600;
  color: var(--text-body);
  background: rgba(197, 139, 58, 0.06);
  border-bottom: 1px solid rgba(197, 139, 58, 0.06);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cc-body .cc-v2-annot-code-lang .material-symbols-outlined { font-size: 12px; }

/* ═══════════════════════════════════════════════════════════
   CC Dev Tool v2 - новi стилi (F1-F4, V1-V5, A1-A3, T1-T5)
   ═══════════════════════════════════════════════════════════ */
/* V4: Skill trigger pills */
.cc-body .cc-skill-trigger-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-space-4);
  margin-top: var(--sp-space-4);
  padding-top: var(--sp-space-4);
  border-top: 1px dashed rgba(232, 219, 178, 0.05);
}

.cc-body .cc-skill-trigger-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space-4);
  padding: var(--sp-space-4) var(--sp-space-2);
  border-radius: 4px;
  background: rgba(197, 139, 58, 0.08);
  border: 1px solid rgba(197, 139, 58, 0.25);
  color: color-mix(in srgb, var(--mod-applicant) 60%, var(--text-bright));
  font-size: 9px;
  font-family: var(--font-mono);
  cursor: default;
  transition: all 0.15s ease;
}

.cc-body .cc-skill-trigger-pill-cmd {
  background: rgba(216, 157, 72, 0.12);
  border-color: rgba(216, 157, 72, 0.35);
  color: color-mix(in srgb, var(--mod-applicant) 30%, var(--text-bright));
  cursor: pointer;
}

.cc-body .cc-skill-trigger-pill-cmd:hover {
  background: rgba(216, 157, 72, 0.25);
  color: color-mix(in srgb, var(--mod-applicant) 25%, var(--text-bright));
}

.cc-body .cc-skill-trigger-pill-cmd .material-symbols-outlined { font-size: 11px; }

/* A1: Health breakdown в паспорті */
.cc-body .cc-health-breakdown {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-3);
}

.cc-body .cc-health-ring-wrap {
  position: relative;
  width: 110px;
  height: 110px;
  flex-shrink: 0;
}

.cc-body .cc-health-ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cc-body .cc-health-ring-num {
  font-size: 28px;
  font-weight: 700;
  font-family: var(--font-mono);
}

.cc-body .cc-health-ring-cat {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.8;
}

.cc-body .cc-health-overview-info { flex: 1; }

.cc-body .cc-health-overview-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: var(--sp-space-4);
}

.cc-body .cc-health-overview-desc {
  font-size: 11px;
  color: var(--text-body);
}

.cc-body .cc-health-alerts {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-4);
  margin-top: var(--sp-space-2);
}

.cc-body .cc-health-alert {
  display: flex;
  align-items: center;
  gap: var(--sp-space-4);
  padding: var(--sp-space-4) var(--sp-space-2);
  background: rgba(227, 111, 61, 0.1);
  border-left: 2px solid var(--accent-ember);
  border-radius: var(--radius-sm);
  font-size: 10px;
  color: var(--accent-ember);
}

.cc-body .cc-health-alert .material-symbols-outlined { font-size: 12px; }

.cc-body .cc-health-factors-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-2);
}

.cc-body .cc-health-factor-header {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  margin-bottom: var(--sp-space-4);
}

.cc-body .cc-health-factor-header .material-symbols-outlined {
  font-size: 13px;
  color: var(--text-muted);
}

.cc-body .cc-health-factor-weight {
  font-size: 9px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.cc-body .cc-net-edge-tooltip-inner { font-size: 11px; }

.cc-body .cc-net-edge-tooltip-row {
  display: flex;
  align-items: center;
  gap: var(--sp-space-4);
  margin-bottom: var(--sp-space-4);
}

.cc-body .cc-net-edge-tooltip-agent {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space-4);
  font-weight: 600;
}

.cc-body .cc-net-edge-tooltip-agent .material-symbols-outlined { font-size: 12px; }

.cc-body .cc-net-edge-tooltip-arrow {
  color: var(--text-muted);
  font-weight: 700;
}

.cc-body .cc-net-edge-tooltip-type {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* F5.1: Hooks search bar */
.cc-body .cc-hooks-search-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  padding: var(--sp-space-2) var(--sp-space-3);
  background: rgba(232, 219, 178, 0.03);
  border: 1px solid rgba(232, 219, 178, 0.06);
  border-radius: 4px;
  margin-bottom: var(--sp-space-3);
}

.cc-body .cc-hooks-search-bar .cc-search-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-bright);
  font-size: 12px;
  outline: none;
}

.cc-body .cc-stat-drawer-actions { display: flex; gap: var(--sp-space-4); }

.cc-body .cc-stat-drawer-item-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--vr-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cc-body .cc-stat-drawer-item-icon .material-symbols-outlined { font-size: 16px; }

.cc-body .cc-stat-drawer-item-body { flex: 1; min-width: 0; }

.cc-body .cc-stat-drawer-item-name {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cc-body .cc-stat-drawer-item-meta {
  font-size: 10px;
  color: var(--text-muted);
}

.cc-body .cc-stat-drawer-item-score {
  font-weight: 700;
  font-family: var(--font-mono);
  font-size: 14px;
}

.cc-body .cc-stat-drawer-summary {
  display: flex;
  gap: var(--sp-space-4);
}

.cc-body .cc-stat-drawer-summary-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* V5: CLAUDE.md з підсвіткою */
.cc-body .cc-claudemd-v2 .cc-claudemd-outline {
  position: sticky;
  top: 8px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  padding-right: var(--sp-space-2);
}

.cc-body .cc-claudemd-rendered {
  padding: var(--sp-space-3) var(--sp-space-4);
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--vr-radius);
  max-height: 70vh;
  overflow-y: auto;
  font-family: var(--font-ui);
  line-height: 1.6;
}

.cc-body .cc-claudemd-rendered.cc-hidden { display: none; }

/* V1: Activity Timeline */
.cc-body .cc-agent-timeline {
  padding: var(--sp-space-3);
  background: rgba(232, 219, 178, 0.02);
  border-radius: var(--vr-radius);
  border: 1px solid rgba(232, 219, 178, 0.05);
}

.cc-body .cc-agent-timeline-header {
  display: flex;
  align-items: center;
  margin-bottom: var(--sp-space-2);
  gap: var(--sp-space-3);
}

.cc-body .cc-agent-timeline-title {
  display: flex;
  align-items: center;
  gap: var(--sp-space-4);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex: 1;
}

.cc-body .cc-agent-timeline-title .material-symbols-outlined { font-size: 14px; }

.cc-body .cc-agent-timeline-stats {
  display: flex;
  gap: var(--sp-space-3);
}

.cc-body .cc-agent-timeline-stat {
  display: flex;
  align-items: center;
  gap: var(--sp-space-4);
  font-size: 10px;
  color: var(--text-muted);
}

.cc-body .cc-agent-timeline-grid {
  display: grid;
  grid-template-columns: repeat(30, 1fr);
  gap: var(--sp-space-4);
  padding: var(--sp-space-4) 0;
}

.cc-body .cc-timeline-cell {
  aspect-ratio: 1;
  border-radius: 2px;
  background: rgba(232, 219, 178, 0.05);
  border: 1px solid rgba(232, 219, 178, 0.03);
  animation: cc-fade-up 0.2s ease both;
  cursor: help;
  transition: transform 0.15s ease;
}

.cc-body .cc-timeline-cell:hover { transform: scale(1.3); }

.cc-body .cc-timeline-cell.has-report {
  border: 1px solid var(--success);
  box-shadow: 0 0 3px rgba(107, 142, 78, 0.4);
}

.cc-body .cc-agent-timeline-legend {
  display: flex;
  margin-top: var(--sp-space-4);
  font-size: 9px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.cc-body .cc-report-agent {
  display: flex;
  align-items: center;
  gap: var(--sp-space-4);
  font-size: 12px;
  font-weight: 600;
  color: var(--agent-color, var(--mod-applicant));
}

.cc-body .cc-report-agent .material-symbols-outlined { font-size: 14px; }

.cc-body .cc-report-status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space-4);
  padding: var(--sp-space-4) var(--sp-space-2);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cc-body .cc-report-status .material-symbols-outlined { font-size: 11px; }

.cc-body .cc-report-date {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.cc-body .cc-report-duration {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space-4);
  margin-top: var(--sp-space-4);
  font-size: 10px;
  color: var(--text-muted);
}

.cc-body .cc-report-duration .material-symbols-outlined { font-size: 12px; }

/* A2: Skill Dependency Graph */
.cc-body .cc-deps-wrap {
  padding: var(--sp-space-2) var(--sp-space-4);
}

.cc-body .cc-deps-svg-wrap {
  background: rgba(232, 219, 178, 0.02);
  border: 1px solid rgba(232, 219, 178, 0.06);
  border-radius: 4px;
  padding: var(--sp-space-2);
  max-height: 75vh;
}

.cc-body .cc-deps-skill,
.cc-body .cc-deps-agent {
  cursor: pointer;
  transition: transform 0.15s ease;
}

.cc-body .cc-deps-skill:hover rect,
.cc-body .cc-deps-agent:hover rect {
  stroke-width: 2;
}

.cc-body .cc-history-item-header {
  display: flex;
  gap: var(--sp-space-2);
  align-items: center;
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  margin-bottom: var(--sp-space-4);
}

.cc-body .cc-history-item-summary {
  font-size: 11px;
  color: var(--text-body);
  margin-top: 2px;
}

.cc-body .cc-history-item-hint {
  display: flex;
  align-items: center;
  gap: var(--sp-space-4);
  font-size: 9px;
  color: var(--text-muted);
  margin-top: var(--sp-space-4);
}

.cc-body .cc-diff-block {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(216, 157, 72, 0.3);
  border-radius: var(--vr-radius);
  overflow: hidden;
  margin-bottom: var(--sp-space-3);
}

.cc-body .cc-diff-header {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  padding: var(--sp-space-2) var(--sp-space-3);
  background: rgba(216, 157, 72, 0.08);
  border-bottom: 1px solid rgba(216, 157, 72, 0.2);
  font-size: 11px;
  font-weight: 600;
}

.cc-body .cc-diff-body {
  max-height: 500px;
  overflow: auto;
  padding: var(--sp-space-2) 0;
  font-family: var(--font-mono);
  font-size: 11px;
}

.cc-body .cc-diff-line {
  padding: var(--sp-space-4) var(--sp-space-3);
  white-space: pre;
  color: var(--text-body);
}

.cc-body .cc-diff-line.cc-diff-add {
  background: rgba(107, 142, 78, 0.15);
  color: color-mix(in srgb, var(--mod-nexus) 60%, var(--text-bright));
}

.cc-body .cc-diff-line.cc-diff-del {
  background: rgba(227, 111, 61, 0.15);
  color: color-mix(in srgb, var(--log-error) 60%, var(--text-bright));
}

.cc-body .cc-diff-line.cc-diff-hunk {
  background: rgba(197, 139, 58, 0.1);
  color: color-mix(in srgb, var(--mod-applicant) 60%, var(--text-bright));
  font-weight: 600;
}

.cc-body .cc-diff-line.cc-diff-file-header {
  color: var(--text-muted);
  font-weight: 600;
}

/* A3: Global Search preview pane */
.cc-body .cc-gsearch-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--sp-space-2);
  max-height: 60vh;
}

.cc-body .cc-gsearch-preview {
  padding: var(--sp-space-3);
  background: rgba(232, 219, 178, 0.03);
  border-radius: 4px;
  border: 1px solid rgba(232, 219, 178, 0.06);
  overflow-y: auto;
  max-height: 60vh;
}

.cc-body .cc-gsearch-preview-empty {
  text-align: center;
  color: var(--text-muted);
  font-size: 11px;
  padding-top: var(--sp-space-6);
}

.cc-body .cc-gsearch-preview-head {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  padding-bottom: var(--sp-space-2);
  border-bottom: 1px solid rgba(232, 219, 178, 0.08);
  margin-bottom: var(--sp-space-2);
}

.cc-body .cc-gsearch-preview-head .material-symbols-outlined { font-size: 28px; }

.cc-body .cc-gsearch-preview-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-bright);
}

.cc-body .cc-gsearch-preview-kind {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.cc-body .cc-gsearch-preview-desc {
  font-size: 11px;
  color: var(--text-body);
  line-height: 1.5;
  margin-bottom: var(--sp-space-2);
}

.cc-body .cc-gsearch-preview-section {
  margin-bottom: var(--sp-space-2);
}

.cc-body .cc-gsearch-preview-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: var(--sp-space-4);
}

.cc-body .cc-gsearch-preview-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-space-4);
}

.cc-body .cc-gsearch-chip-mcp {
  background: rgba(216, 157, 72, 0.1);
  border-color: rgba(216, 157, 72, 0.25);
  color: color-mix(in srgb, var(--mod-applicant) 30%, var(--text-bright));
}

.cc-body .cc-gsearch-chip-more {
  background: rgba(232, 219, 178, 0.04);
  color: var(--text-muted);
}

.cc-body .cc-gsearch-preview-code {
  padding: var(--sp-space-4) var(--sp-space-2);
  background: rgba(0, 0, 0, 0.35);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 10px;
  color: color-mix(in srgb, var(--mod-applicant) 30%, var(--text-bright));
  word-break: break-all;
}

.cc-body .cc-gsearch-preview-health {
  margin-bottom: var(--sp-space-2);
}

.cc-body .cc-gsearch-preview-health-bar {
  display: block;
  position: relative;
  height: 16px;
  background: rgba(232, 219, 178, 0.05);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.cc-body .cc-gsearch-preview-health-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  width: var(--pct, 0%);
  background: var(--c, var(--mod-applicant));
  opacity: 0.3;
}

.cc-body .cc-gsearch-preview-health-label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 10px;
  font-weight: 600;
}

.cc-body .cc-gsearch-preview-actions {
  display: flex;
  gap: var(--sp-space-4);
  flex-wrap: wrap;
  margin-top: var(--sp-space-2);
}

@media (max-width: 900px) {
.cc-body .cc-gsearch-layout { grid-template-columns: 1fr; }
.cc-body .cc-gsearch-preview { display: none; }
.cc-body .cc-reports-stats { grid-template-columns: repeat(2, 1fr); }
}

.cc-body .cc-afk-kpi-warn { border-color: rgba(227, 111, 61, 0.45); background: rgba(227, 111, 61, 0.06); }

.cc-body .cc-afk-kpi-warn:hover { border-color: rgba(227, 111, 61, 0.75); }

.cc-body .cc-afk-kpi-warn .cc-afk-kpi-icon { color: var(--log-error); }

.cc-body .cc-afk-kpi-body { display: flex; flex-direction: column; gap: var(--sp-space-4); }

.cc-body .cc-afk-card-header {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  padding: var(--sp-space-3) var(--sp-space-4);
  border-bottom: 1px solid rgba(232, 219, 178, 0.06);
  background: rgba(0, 0, 0, 0.2);
}

.cc-body .cc-afk-card-header .material-symbols-outlined { font-size: 18px; color: var(--cc-accent, color-mix(in srgb, var(--mod-applicant) 50%, var(--accent-ember))); }

/* Schedule grid */
.cc-body .cc-afk-schedule-grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-3);
  padding: var(--sp-space-4);
}

.cc-body .cc-afk-slot {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: var(--sp-space-4);
  align-items: start;
}

.cc-body .cc-afk-slot-time {
  display: flex;
  align-items: center;
  gap: var(--sp-space-4);
  padding: var(--sp-space-4) var(--sp-space-2);
  background: rgba(216, 157, 72, 0.1);
  border: 1px solid rgba(216, 157, 72, 0.3);
  border-radius: var(--vr-radius);
  color: var(--cc-accent, color-mix(in srgb, var(--mod-applicant) 50%, var(--accent-ember)));
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  justify-self: start;
  position: sticky;
  top: 0;
}

.cc-body .cc-afk-slot-time .material-symbols-outlined { font-size: 14px; }

.cc-body .cc-afk-slot-scans {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-space-2);
}

.cc-body .cc-afk-scan-head {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  margin-bottom: var(--sp-space-4);
}

.cc-body .cc-afk-scan-icon { font-size: 18px; color: var(--scan-color); }

.cc-body .cc-afk-scan-label {
  font-weight: 700;
  font-size: 12px;
  color: var(--text-bright);
  font-family: var(--font-mono);
  flex: 1;
}

.cc-body .cc-afk-scan-status { font-size: 18px; margin-left: auto; }

.cc-body .cc-afk-scan-scope {
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  margin-bottom: var(--sp-space-4);
  opacity: 0.85;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-body .cc-afk-scan-stats {
  display: flex;
  gap: var(--sp-space-4);
  flex-wrap: wrap;
}

.cc-body .cc-afk-badge {
  display: inline-flex;
  padding: var(--sp-space-4) var(--sp-space-2);
  font-size: 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cc-body .cc-afk-badge-idle { background: rgba(96,92,112,0.18); color: var(--text-muted); }

.cc-body .cc-afk-badge-open { background: rgba(227, 111, 61, 0.14); color: var(--log-error); }

.cc-body .cc-afk-badge-done { background: rgba(107, 142, 78, 0.14); color: var(--success); }

/* Two-column: chart + calendar */
.cc-body .cc-afk-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-space-4);
  margin-bottom: var(--sp-space-4);
}

.cc-body .cc-afk-grid-2col > .cc-afk-card { margin-bottom: 0; }

@media (max-width: 1100px) {
.cc-body .cc-afk-grid-2col { grid-template-columns: 1fr; }
}

/* Chart - bar */
.cc-body .cc-afk-bars {
  padding: var(--sp-space-3) var(--sp-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-2);
}

/* Calendar */
.cc-body .cc-afk-cal-wrap { padding: var(--sp-space-3) var(--sp-space-4); overflow-x: auto; }

.cc-body .cc-afk-cal-table {
  border-collapse: separate;
  border-spacing: 2px;
  width: 100%;
  font-family: var(--font-mono);
}

.cc-body .cc-afk-cal-table th {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
  padding: var(--sp-space-4);
  background: transparent;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cc-body .cc-afk-cal-slot {
  text-align: left !important;
  color: var(--cc-accent, color-mix(in srgb, var(--mod-applicant) 50%, var(--accent-ember))) !important;
  background: rgba(216, 157, 72, 0.06) !important;
  padding: var(--sp-space-4) var(--sp-space-2) !important;
  font-size: 11px !important;
}

.cc-body .cc-afk-cal-slot-count {
  color: var(--text-muted);
  margin-left: var(--sp-space-4);
  font-size: 9px;
}

.cc-body .cc-afk-cal-cell {
  width: 22px;
  height: 22px;
  text-align: center;
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 1;
  color: rgba(232, 219, 178, 0.3);
}

.cc-body .cc-afk-cal-planned { background: rgba(216, 157, 72, 0.18); color: var(--cc-accent, color-mix(in srgb, var(--mod-applicant) 50%, var(--accent-ember))); }

.cc-body .cc-afk-cal-future { background: rgba(232, 219, 178, 0.03); color: var(--text-muted); }

.cc-body .cc-afk-cal-done {
  background: rgba(107, 142, 78, 0.28);
  color: color-mix(in srgb, var(--mod-observer) 80%, var(--mod-nexus));
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(107, 142, 78, 0.4);
}

.cc-body .cc-afk-cal-legend {
  display: flex;
  gap: var(--sp-space-4);
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--sp-space-2);
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.cc-body .cc-afk-cal-legend > span { display: inline-flex; align-items: center; gap: var(--sp-space-4); }

.cc-body .cc-afk-cal-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-sm);
}

/* Config */
.cc-body .cc-afk-config-body { padding: var(--sp-space-3) var(--sp-space-4); }

.cc-body .cc-afk-config-item {
  padding: var(--sp-space-2) var(--sp-space-3);
  background: rgba(232, 219, 178, 0.02);
  border: 1px solid rgba(232, 219, 178, 0.06);
  border-radius: var(--vr-radius);
}

.cc-body .cc-afk-config-key {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: var(--sp-space-4);
  font-family: var(--font-mono);
}

.cc-body .cc-afk-config-val {
  font-size: 12px;
  color: var(--text-bright);
  font-family: var(--font-mono);
}

.cc-body .cc-afk-config-val code {
  background: rgba(216, 157, 72, 0.1);
  padding: var(--sp-space-4) var(--sp-space-4);
  border-radius: var(--radius-sm);
  color: var(--cc-accent, color-mix(in srgb, var(--mod-applicant) 50%, var(--accent-ember)));
  font-size: 11px;
}

.cc-body .cc-afk-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space-4);
  color: var(--cc-accent, color-mix(in srgb, var(--mod-applicant) 50%, var(--accent-ember)));
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 12px;
}

.cc-body .cc-afk-link:hover { text-decoration: underline; }

.cc-body .cc-afk-link .material-symbols-outlined { font-size: 14px; }

/* Detail overlay - reuses .cc-history-overlay */
.cc-body .cc-afk-detail-time {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  margin-left: var(--sp-space-2);
}

.cc-body .cc-afk-detail-meta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-space-2);
  padding: var(--sp-space-3);
  background: rgba(232, 219, 178, 0.02);
  border-radius: var(--vr-radius);
  margin-bottom: var(--sp-space-3);
  font-family: var(--font-mono);
  font-size: 12px;
}

.cc-body .cc-afk-detail-meta b { color: var(--cc-accent, color-mix(in srgb, var(--mod-applicant) 50%, var(--accent-ember))); font-weight: 700; margin-right: 6px; }

.cc-body .cc-afk-detail-tasks {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-4);
  max-height: 500px;
  overflow-y: auto;
}

.cc-body .cc-afk-task-row {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: var(--sp-space-2);
  padding: var(--sp-space-2) var(--sp-space-2);
  background: rgba(232, 219, 178, 0.02);
  border-left: 3px solid rgba(232, 219, 178, 0.1);
  border-radius: var(--vr-radius);
  align-items: start;
}

.cc-body .cc-afk-task-sev {
  display: inline-flex;
  justify-content: center;
  padding: var(--sp-space-4) var(--sp-space-4);
  font-size: 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  height: fit-content;
}

.cc-body .cc-afk-task-body { min-width: 0; }

.cc-body .cc-afk-task-title { font-size: 12px; color: var(--text-bright); font-family: var(--font-mono); }

.cc-body .cc-afk-task-desc {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: var(--sp-space-4);
  line-height: 1.4;
}

.cc-body .cc-afk-task-status {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: var(--sp-space-4) var(--sp-space-4);
  background: rgba(232, 219, 178, 0.04);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  height: fit-content;
}

.cc-body .cc-pill-live .cc-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--success-bg) 0%, var(--success) 40%, var(--success) 80%, var(--bg-base) 100%);
  border: 0.5px solid rgba(0, 0, 0, 0.55);
  box-shadow:
    inset 0 0.5px 0.5px rgba(232, 219, 178, 0.35),
    0 0 6px rgba(107, 142, 78, 0.55);
  animation: cc-live-pulse 1.8s infinite;
}

.cc-body .cc-hb-score {
  display: flex; flex-direction: column; align-items: center;
  padding: var(--sp-space-3) var(--sp-space-4); border-radius: 4px;
  background: rgba(var(--cc-accent-rgb), 0.1);
  border: 2px solid var(--hc, var(--cc-accent));
  min-width: 100px;
}

.cc-body .cc-hb-score-cat {
  font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--cc-agt-text-dim);
  margin-top: var(--sp-space-4);
}

.cc-body .cc-hb-agent-id { font-size: 18px; font-weight: 600; color: var(--cc-agt-text); }

.cc-body .cc-hb-meta { font-size: 12px; color: var(--cc-agt-text-dim); margin-top: 4px; }

.cc-body .cc-hb-metric {
  padding: var(--sp-space-2); background: rgba(0, 0, 0, 0.2); border-radius: var(--vr-radius);
  border-left: 3px solid var(--cc-accent);
}

.cc-body .cc-hb-metric-head {
  display: flex; align-items: center; gap: var(--sp-space-2); margin-bottom: 6px;
}

.cc-body .cc-hb-metric-label { flex: 1; font-weight: 600; color: var(--cc-agt-text); }

.cc-body .cc-hb-metric-weight { font-size: 11px; color: var(--cc-agt-text-dim); font-family: var(--font-mono); }

.cc-body .cc-hb-metric-value {
  font-size: 16px; font-weight: 700; font-family: var(--font-mono);
  min-width: 40px; text-align: right;
}

.cc-body .cc-hb-metric-tip {
  font-size: 11px; color: var(--cc-agt-text-dim); margin-top: 6px; line-height: 1.4;
}

.cc-body .cc-hb-recommendations {
  padding: var(--sp-space-3); background: rgba(197, 139, 58, 0.08);
  border: 1px solid rgba(197, 139, 58, 0.25); border-radius: var(--vr-radius);
}

.cc-body .cc-hb-rec-title {
  display: flex; align-items: center; gap: var(--sp-space-4);
  color: var(--cc-warning); font-weight: 600; margin-bottom: 8px;
}

.cc-body .cc-hb-recommendations ul { margin: 0; padding-left: 24px; color: var(--cc-agt-text); font-size: 13px; }

/* ── Ідея #2: Dependency Graph ── */
.cc-body .cc-depgraph { padding: var(--sp-space-4); }

.cc-body .cc-depgraph-root {
  display: inline-flex; align-items: center; gap: 8px;
  padding: var(--sp-space-2) var(--sp-space-4); border-radius: var(--vr-radius);
  background: rgba(var(--cc-accent-rgb), 0.15);
  border: 2px solid var(--agent-color, var(--cc-accent));
  color: var(--agent-color, var(--cc-accent));
  font-weight: 700; font-family: var(--font-mono);
  margin-bottom: var(--sp-space-4);
}

.cc-body .cc-depgraph-branches { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-space-3); }

.cc-body .cc-depbranch {
  background: rgba(0, 0, 0, 0.25); border: 1px solid var(--cc-card-border);
  border-radius: 4px; padding: var(--sp-space-2);
}

.cc-body .cc-depbranch-title {
  display: flex; align-items: center; gap: var(--sp-space-4);
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--cc-agt-text-dim); margin-bottom: 8px;
}

.cc-body .cc-depchip-mcp { background: var(--cc-info-soft); color: var(--cc-info); }

.cc-body .cc-depchip-hook { background: var(--cc-secondary-soft); color: var(--cc-secondary); }

/* ── Ідея #3: Usage Timeline ── */
.cc-body .cc-tl-wrap { padding: var(--sp-space-4); }

.cc-body .cc-tl-chart {
  display: flex; align-items: flex-end; gap: var(--sp-space-4);
  height: 120px; padding: var(--sp-space-2); background: rgba(0, 0, 0, 0.25);
  border-radius: var(--vr-radius);
}

.cc-body .cc-tl-bar {
  flex: 1; min-width: 8px; position: relative;
  background: var(--cc-accent); border-radius: var(--forge-radius) var(--forge-radius) 0 0;
  transition: opacity 0.2s;
}

.cc-body .cc-tl-bar:hover { opacity: 0.8; }

.cc-body .cc-tl-bar.cc-tl-cool { background: rgba(197, 139, 58, 0.55); }

.cc-body .cc-tl-bar.cc-tl-warm { background: var(--cc-warning); }

.cc-body .cc-tl-bar.cc-tl-hot { background: var(--cc-danger); }

.cc-body .cc-tl-bar-date {
  position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%);
  font-size: 9px; color: var(--cc-agt-text-dim); white-space: nowrap;
  display: none;
}

.cc-body .cc-tl-bar:hover .cc-tl-bar-date { display: block; }

/* ── Ідея #1: Cost Dashboard ── */
.cc-body .cc-cost-wrap { padding: var(--sp-space-4); display: flex; flex-direction: column; gap: var(--sp-space-4); }

.cc-body .cc-cost-section {
  padding: var(--sp-space-4); background: var(--cc-card-bg);
  border: 1px solid var(--cc-card-border); border-radius: 4px;
}

.cc-body .cc-cost-section-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--cc-agt-text);
  margin-bottom: var(--sp-space-3);
}

.cc-body .cc-cost-bars { display: flex; flex-direction: column; gap: 8px; }

/* ── Ідея #7: Frontmatter edit ── */
.cc-body .cc-fm-edit { display: flex; flex-direction: column; gap: var(--sp-space-3); }

.cc-body .cc-fm-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 600; color: var(--cc-agt-text);
  padding-bottom: var(--sp-space-2); border-bottom: 1px solid var(--cc-card-border);
}

.cc-body .cc-fm-body { display: flex; flex-direction: column; gap: var(--sp-space-2); }

.cc-body .cc-fm-body label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--cc-agt-text-dim); }

.cc-body .cc-fm-body input,
.cc-body .cc-fm-body textarea,
.cc-body .cc-fm-body select {
  padding: var(--sp-space-2); background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--cc-accent-border); color: var(--cc-agt-text);
  border-radius: var(--vr-radius); font-family: var(--font-mono); font-size: 13px;
}

.cc-body .cc-fm-actions { display: flex; gap: 8px; justify-content: flex-end; padding-top: 10px; border-top: 1px solid var(--cc-card-border); }

/* ── Paper tape Easter egg on panel meta row ── */
.dev-tools-scope.cc-body .cc-card-meta::before {
  content: '-- --- .-. ... .';
  font-family: var(--font-mono);
  font-size: 7px;
  color: rgba(92, 64, 32, 0.28);
  letter-spacing: 0.14em;
  display: block;
  margin-bottom: var(--sp-space-4);
  text-transform: uppercase;
}

/* ─────────────────────────────────────────────────────────────
   25. COMPONENT SUPPLEMENT  (modifier scales · SVG-functional ·
   structural wrappers that the old CSS styled only via parents)
   All forge-token / canon-clean. Closes the remaining gap to
   demonstrable regex-noise only.
   ───────────────────────────────────────────────────────────── */

/* 25a. AFK severity scale (JS emits .cc-afk-task-sev .cc-afk-sev-${sev}) */
.cc-body .cc-afk-sev-critical              { background: rgba(193, 68, 24, 0.20);  color: var(--log-critical); }
.cc-body .cc-afk-sev-important,
.cc-body .cc-afk-sev-high                  { background: rgba(227, 111, 61, 0.20); color: var(--log-error); }
.cc-body .cc-afk-sev-medium                { background: rgba(197, 139, 58, 0.20); color: var(--accent-brass); }
.cc-body .cc-afk-sev-minor,
.cc-body .cc-afk-sev-low                   { background: rgba(107, 142, 78, 0.20); color: var(--log-ok); }

/* 25b. Activity timeline heat scale (cc-timeline-cell cc-timeline-lvl-${n}) */
.cc-body .cc-timeline-lvl-1                { background: rgba(197, 139, 58, 0.30); }
.cc-body .cc-timeline-lvl-2                { background: rgba(197, 139, 58, 0.55); }
.cc-body .cc-timeline-lvl-3                { background: rgba(197, 139, 58, 0.85); }

/* 25c. Network node kinds (cc-net-html-node.cc-net-kind-${kind}) */
.cc-body .cc-net-html-node.cc-net-kind-devtool {
  background: color-mix(in srgb, var(--agent-color, var(--accent-brass)) 14%, rgba(0, 0, 0, 0.6));
  border: 1px dashed color-mix(in srgb, var(--agent-color, var(--accent-brass)) 50%, transparent);
}
.cc-body .cc-net-html-node.cc-net-kind-mcp {
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: color-mix(in srgb, var(--agent-color, var(--mod-applicant)) 16%, rgba(0, 0, 0, 0.6));
  border: 1px solid color-mix(in srgb, var(--agent-color, var(--mod-applicant)) 45%, transparent);
}
.cc-body .cc-net-html-node.cc-net-kind-skill {
  transform: rotate(45deg);
  background: color-mix(in srgb, var(--agent-color, var(--log-ok)) 14%, rgba(0, 0, 0, 0.6));
  border: 1px solid color-mix(in srgb, var(--agent-color, var(--log-ok)) 45%, transparent);
}
.cc-body .cc-net-html-node.cc-net-kind-skill .cc-net-node-icon { transform: rotate(-45deg); }

/* 25d. SVG-functional - visible token strokes/fills (canon: SVG
   classes are functional, not cosmetic). Author CSS overrides the
   JS inline presentation attribute; :hover inline style still wins
   per JS, which is intended. */
.cc-body .cc-deps-edge {
  stroke: var(--cc-accent-line);
  stroke-width: 1.2;
  fill: none;
  transition: stroke 0.15s ease;
}
.cc-body .cc-deps-skill,
.cc-body .cc-deps-agent { cursor: pointer; transition: transform 0.15s ease; }
.cc-body .cc-deps-skill:hover rect,
.cc-body .cc-deps-agent:hover rect { stroke-width: 2; }
.cc-body svg #cc-net-arrow path,
.cc-body marker#cc-net-arrow path { fill: var(--cc-accent-line); }
.cc-body .cc-net-arrow { stroke: var(--cc-accent-line); }

/* 25e. CLAUDE.md outline heading indent scale (cc-claudemd-outline-h${lvl}) */
.cc-body .cc-claudemd-outline-h1          { font-weight: 600; }
.cc-body .cc-claudemd-outline-h2          { padding-left: var(--sp-space-3); }
.cc-body .cc-claudemd-outline-h3          { padding-left: var(--sp-space-5); font-size: 10px; }

/* 25f. Structural wrappers (old CSS styled these only via children;
   give them an explicit canon block so they resolve standalone) */
.cc-body .cc-cap-pt-text {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-body);
  line-height: 1.4;
}
.cc-body .cc-cap-pt-text b { color: var(--cc-accent); font-weight: 700; }
.cc-body .cc-config-rule-item {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  padding: var(--sp-space-2) var(--sp-space-3);
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid var(--border-dim);
  border-radius: var(--forge-radius);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-body);
}
.cc-body .cc-int-map-label {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-body);
}
.cc-body .cc-xref-skills-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-4);
  padding: var(--sp-space-2) 0;
}
.cc-body .cc-xref-tooltip-name {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-bright);
}
.cc-body .cc-handoff-connector-in  { flex-direction: row; }
.cc-body .cc-handoff-connector-out { flex-direction: row-reverse; }
.cc-body .cc-afk-calendar,
.cc-body .cc-afk-chart {
  background: var(--cc-card-bg);
  border: 1px solid var(--cc-card-border);
  border-radius: var(--forge-radius);
  overflow: hidden;
}

/* 25g. JS-mount section containers (cc-section-* are element IDs) */
.cc-body #cc-section-afk-scan,
.cc-body #cc-section-cost,
.cc-body #cc-section-diff,
.cc-body #cc-section-reports { display: block; }