:root{
  --muted: #6b7280;
  --accent: #0ea5a4;
  --success: #065f46;
  --danger: #7f1d1d;
  --panel-bg: #f8fafc;
  --code-bg: #eef2f7;
  --gap: 0.9rem;
  /* Level color map (use central tokens where appropriate) */
  --level-1-color: var(--accent);
  --level-1-bg: #ecfeff; /* light teal */
  --level-2-color: var(--success);
  --level-2-bg: #ecfdf5; /* light green */
  --level-3-color: var(--muted);
  --level-3-bg: #f1f5f9; /* soft gray */
  --level-4-color: #92400e; /* warm amber-ish */
  --level-4-bg: #fff7ed;
  --level-5-color: #0369a1; /* deep sky */
  --level-5-bg: #f0f9ff;
}

/* Detail panel styles (shared) */
.detail-section{ background: var(--panel-bg); padding: calc(var(--gap) * 1.05); border-radius: 0.6rem }
.detail-heading{ font-size: 0.95rem; font-weight:700; color:#0f172a; margin-bottom:0.35rem }
.detail-kv{ display:flex; justify-content:space-between; gap:0.5rem; align-items:flex-start }
.detail-kv .label{ color:var(--muted); font-size:0.78rem; width:40% }
.detail-kv .value{ font-size:0.92rem; color:#0f172a }
#d_path{ color:var(--muted); font-size:0.85rem }
.mapping-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:0.5rem }
#d_mapping_list li{ display:flex; align-items:center; gap:0.5rem; padding:0.35rem; border-radius:0.375rem }
.map-ok{ color:var(--success); background:#ecfdf5; padding:0.22rem 0.5rem; border-radius:0.25rem; font-size:0.8rem }
.map-miss{ color:var(--danger); background:#fff1f2; padding:0.22rem 0.5rem; border-radius:0.25rem; font-size:0.8rem }
.code-box{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:0.82rem; background:var(--code-bg); padding:0.3rem 0.6rem; border-radius:0.28rem; display:inline-block }

/* Compact level badge shown beside node names (non-obtrusive) */
.level-badge{
  display:inline-block;
  font-size:0.72rem;
  padding:0.08rem 0.36rem;
  border-radius:999px;
  background:rgba(15,23,42,0.04);
  color:var(--muted);
  margin-right:0.45rem;
  vertical-align:middle;
  line-height:1;
}
.level-badge[title]{ cursor:help }

/* Level-specific variants (use central variables where possible) */
.level-badge.l1{ background:var(--level-1-bg); color:var(--level-1-color) }
.level-badge.l2{ background:var(--level-2-bg); color:var(--level-2-color) }
.level-badge.l3{ background:var(--level-3-bg); color:var(--level-3-color) }
.level-badge.l4{ background:var(--level-4-bg); color:var(--level-4-color) }
.level-badge.l5{ background:var(--level-5-bg); color:var(--level-5-color) }

/* Single-column variant for mapping lists in detail panels */
.mapping-grid.one-col{ grid-template-columns: 1fr }