demo/styles/explain.css

    /* ── Explainability Graph ─────────────────────────────────────── */
    #reasoningPanel {
      overflow-y: auto;
      padding: 0;
      position: relative;
    }

    /* ── Loading / Error ─────────────────────────────────── */
    .explain-loading {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 14px; padding: 48px 16px; color: var(--text-secondary); font-size: 11px;
    }
    .explain-spinner {
      width: 28px; height: 28px;
      border: 2px solid transparent;
      border-top-color: #a78bfa; border-right-color: #7c3aed;
      border-radius: 50%;
      animation: exSpin 0.7s linear infinite;
    }
    @keyframes exSpin { to { transform: rotate(360deg); } }
    .explain-loading span { animation: exPulse 2.5s ease-in-out infinite; letter-spacing: 0.5px; }
    @keyframes exPulse { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }
    .explain-error { padding: 24px 16px; color: var(--danger); font-size: 11px; text-align: center; }

    /* ── Tree Container ──────────────────────────────────── */
    .ex-tree {
      padding: 16px 12px;
      position: relative;
    }

    /* ── Root Node ────────────────────────────────────────── */
    .ex-node-root {
      position: relative;
      display: flex; align-items: center; gap: 12px;
      padding: 14px 16px;
      background: linear-gradient(135deg, rgba(124,58,237,0.18), rgba(59,130,246,0.08));
      border: 1px solid rgba(124,58,237,0.4);
      border-radius: 10px;
      animation: exNodeIn 0.5s ease-out;
      overflow: hidden;
    }
    .ex-node-root::before {
      content: ''; position: absolute; inset: 0;
      background: radial-gradient(ellipse at 20% 30%, rgba(124,58,237,0.15) 0%, transparent 65%);
      pointer-events: none;
    }
    .ex-conf-ring { width: 42px; height: 42px; flex-shrink: 0; }
    .ex-conf-ring .ring-bg { fill: none; stroke: rgba(255,255,255,0.06); stroke-width: 3; }
    .ex-conf-ring .ring-fill {
      fill: none; stroke: #a78bfa; stroke-width: 3; stroke-linecap: round;
      transform: rotate(-90deg); transform-origin: center;
      animation: exRingDraw 1s ease-out forwards;
    }
    .ex-conf-ring .ring-text {
      fill: #e9d5ff; font-size: 10px; font-weight: 700;
      text-anchor: middle; dominant-baseline: central;
    }
    @keyframes exRingDraw { from { stroke-dashoffset: 113; } }
    .ex-root-info { flex: 1; min-width: 0; }
    .ex-root-label {
      font-size: 13px; font-weight: 700; letter-spacing: 1.5px;
      color: #e9d5ff; text-transform: uppercase;
    }
    .ex-root-summary {
      font-size: 9.5px; color: var(--text-secondary); line-height: 1.5; margin-top: 3px;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .ex-root-badge {
      display: inline-block; margin-top: 5px; padding: 2px 8px;
      border-radius: 4px; font-size: 8px; font-weight: 700; letter-spacing: 0.8px;
    }
    .ex-root-badge.match { background: rgba(34,197,94,0.15); color: #4ade80; border: 1px solid rgba(34,197,94,0.3); }
    .ex-root-badge.no-match { background: rgba(239,68,68,0.15); color: #f87171; border: 1px solid rgba(239,68,68,0.3); }

    /* ── Trunk Line (root → categories) ──────────────────── */
    .ex-trunk {
      width: 2px; height: 16px;
      margin: 0 auto;
      background: linear-gradient(180deg, rgba(124,58,237,0.6), rgba(124,58,237,0.2));
    }

    /* ── Category Node ───────────────────────────────────── */
    .ex-node-cat {
      position: relative;
      margin-top: 2px;
      animation: exNodeIn 0.4s ease-out both;
    }
    .ex-cat-head {
      display: flex; align-items: center; gap: 8px;
      padding: 8px 12px;
      border-radius: 8px;
      cursor: pointer;
      border: 1px solid rgba(255,255,255,0.05);
      background: rgba(255,255,255,0.02);
      transition: all 0.25s;
      user-select: none;
      position: relative;
    }
    .ex-cat-head:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
    .ex-node-cat.open > .ex-cat-head { border-color: var(--cat-color, rgba(255,255,255,0.15)); }

    /* Branch line from trunk */
    .ex-cat-branch {
      position: absolute; left: -14px; top: 50%;
      width: 14px; height: 2px;
      transform: translateY(-1px);
    }
    .ex-cat-dot {
      width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
      box-shadow: 0 0 8px var(--cat-color);
      background: var(--cat-color);
      transition: transform 0.2s;
    }
    .ex-node-cat.open > .ex-cat-head .ex-cat-dot { transform: scale(1.2); }
    .ex-cat-name {
      flex: 1; font-size: 11px; font-weight: 600;
      letter-spacing: 0.5px; text-transform: uppercase;
      color: var(--text-primary);
    }
    .ex-cat-chevron {
      width: 14px; height: 14px; flex-shrink: 0;
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      color: var(--text-tertiary);
    }
    .ex-node-cat.open > .ex-cat-head .ex-cat-chevron { transform: rotate(90deg); color: var(--cat-color); }
    .ex-cat-count {
      font-size: 9px; color: var(--text-tertiary); font-weight: 500;
      padding: 1px 6px; border-radius: 3px;
      background: rgba(255,255,255,0.04);
    }

    /* Feature container with branch lines */
    .ex-features-wrap {
      max-height: 0; overflow: hidden;
      transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      margin-left: 16px;
      border-left: 2px solid rgba(255,255,255,0.06);
      position: relative;
    }
    .ex-node-cat.open > .ex-features-wrap {
      max-height: 800px;
      border-left-color: var(--cat-color, rgba(255,255,255,0.12));
    }
    .ex-features-inner { padding: 6px 0 8px 0; }

    /* ── Feature Node ────────────────────────────────────── */
    .ex-node-feat {
      position: relative;
      margin: 3px 0; margin-left: 12px;
      padding: 7px 10px;
      border-radius: 6px;
      border: 1px solid rgba(255,255,255,0.04);
      background: rgba(255,255,255,0.015);
      transition: all 0.25s;
      animation: exFeatIn 0.3s ease-out both;
    }
    .ex-node-feat:hover {
      background: rgba(255,255,255,0.04);
      border-color: rgba(255,255,255,0.1);
      transform: translateX(2px);
    }
    @keyframes exFeatIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: translateX(0); } }

    /* Branch line from category trunk to feature */
    .ex-feat-branch {
      position: absolute; left: -13px; top: 16px;
      width: 12px; height: 2px;
    }
    .ex-feat-name {
      font-size: 10.5px; font-weight: 600; color: var(--text-primary); line-height: 1.3;
    }
    .ex-feat-reasoning {
      font-size: 9px; color: var(--text-secondary); line-height: 1.5; margin-top: 3px;
    }
    .ex-feat-validators { display: flex; gap: 6px; margin-top: 5px; flex-wrap: wrap; }
    .ex-val-chip {
      display: inline-flex; align-items: center; gap: 3px;
      font-size: 8px; font-weight: 600; letter-spacing: 0.3px;
      padding: 2px 6px; border-radius: 3px;
    }
    .ex-val-chip.agree { background: rgba(34,197,94,0.1); color: #4ade80; }
    .ex-val-chip.disagree { background: rgba(239,68,68,0.1); color: #f87171; }

    /* ── LLM Tags ────────────────────────────────────────── */
    .ex-llm-strip { display: flex; gap: 5px; margin: 10px 0 6px; }
    .ex-llm-tag {
      font-size: 8px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase;
      padding: 2px 7px; border-radius: 3px;
      background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
      color: var(--text-tertiary);
    }
    .ex-llm-tag.active { border-color: rgba(124,58,237,0.4); color: #c4b5fd; background: rgba(124,58,237,0.08); }

    /* ── Consensus Bar ───────────────────────────────────── */
    .ex-consensus {
      margin-top: 12px; padding: 10px 12px;
      background: rgba(255,255,255,0.02); border-radius: 8px;
      animation: exNodeIn 0.5s ease-out 0.4s both;
    }
    .ex-cons-bar-bg {
      height: 4px; border-radius: 2px;
      background: rgba(255,255,255,0.06); overflow: hidden;
    }
    .ex-cons-bar-fill {
      height: 100%; border-radius: 2px;
      background: linear-gradient(90deg, #7c3aed, #a78bfa);
      box-shadow: 0 0 8px rgba(124,58,237,0.5);
      transition: width 1s cubic-bezier(0.4,0,0.2,1);
    }
    .ex-cons-labels {
      display: flex; justify-content: space-between;
      margin-top: 6px; font-size: 9px; color: var(--text-tertiary);
    }
    .ex-cons-labels .agreed { color: #a78bfa; }

    /* ── Expand/Collapse All ─────────────────────────────── */
    .ex-controls {
      display: flex; justify-content: flex-end; gap: 6px;
      margin-bottom: 8px;
    }
    .ex-ctrl-btn {
      font-size: 8px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase;
      padding: 3px 8px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.03); color: var(--text-secondary);
      cursor: pointer; transition: all 0.2s;
    }
    .ex-ctrl-btn:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.15); color: var(--text-primary); }
    .ex-ctrl-btn.active { background: rgba(124,58,237,0.15); border-color: rgba(124,58,237,0.4); color: #c4b5fd; }

    /* ── Graph Node View ─────────────────────────────────── */
    .ex-graph-wrap {
      position: relative;
      overflow: hidden;
      border-radius: 8px;
      background: radial-gradient(ellipse at 50% 30%, rgba(124,58,237,0.06) 0%, transparent 70%);
      border: 1px solid rgba(255,255,255,0.04);
      min-height: 380px;
      cursor: grab;
    }
    .ex-graph-wrap canvas {
      display: block;
      width: 100% !important;
    }
    .ex-graph-svg {
      display: block;
      font-family: 'Inter', -apple-system, sans-serif;
    }
    .ex-graph-svg text { pointer-events: none; user-select: none; }
    .ex-graph-svg .gn-edge {
      fill: none; stroke-width: 2; opacity: 0.45;
      animation: exEdgeDraw 0.8s ease-out both;
    }
    @keyframes exEdgeDraw {
      from { stroke-dashoffset: 200; }
      to { stroke-dashoffset: 0; }
    }
    .ex-graph-svg .gn-node { cursor: default; }
    .ex-graph-svg .gn-node:hover rect,
    .ex-graph-svg .gn-node:hover circle { filter: brightness(1.3); }

    /* Graph tooltip */
    .ex-graph-tip {
      position: absolute; z-index: 100;
      background: rgba(15, 23, 42, 0.95);
      border: 1px solid rgba(124,58,237,0.3);
      border-radius: 6px; padding: 8px 10px;
      max-width: 220px; font-size: 9.5px;
      color: var(--text-primary); line-height: 1.5;
      pointer-events: none;
      box-shadow: 0 4px 16px rgba(0,0,0,0.6);
      animation: exTipIn 0.15s ease-out;
    }
    @keyframes exTipIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
    .ex-graph-tip strong { color: #e9d5ff; font-size: 10px; }
    .ex-graph-tip .gt-section { margin-top: 4px; padding-top: 3px; border-top: 1px solid rgba(255,255,255,0.08); }
    .ex-graph-tip .gt-agree { color: #4ade80; }
    .ex-graph-tip .gt-disagree { color: #f87171; }
    .ex-graph-tip .gt-label { font-weight: 600; color: var(--text-secondary); }

    /* ── DAG Pipeline View ────────────────────────────────── */
    .dag-stage-label {
      fill: rgba(255,255,255,0.25); font-size: 9px; font-weight: 700;
      letter-spacing: 1.5px; text-transform: uppercase;
    }
    .dag-separator {
      stroke: rgba(255,255,255,0.06); stroke-width: 1; stroke-dasharray: 4,4;
    }
    .dag-edge {
      fill: none; stroke-width: 1.8; opacity: 0.45;
      animation: dagEdgeDraw 0.8s ease-out both;
    }
    .dag-edge.validation-agree {
      stroke: #4ade80; opacity: 0.35;
    }
    .dag-edge.validation-disagree {
      stroke: #f87171; opacity: 0.35; stroke-dasharray: 6,4;
    }
    @keyframes dagEdgeDraw {
      from { stroke-dashoffset: 300; }
      to { stroke-dashoffset: 0; }
    }
    .dag-node { cursor: pointer; }
    .dag-node:hover rect,
    .dag-node:hover circle { filter: brightness(1.3); }
    .dag-node.dag-selected rect {
      stroke: #22d3ee !important; stroke-width: 2.5 !important;
      filter: drop-shadow(0 0 8px rgba(34,211,238,0.6));
    }
    .dag-node.dag-disabled rect {
      opacity: 0.3;
    }
    .dag-node.dag-disabled text {
      opacity: 0.4;
    }

    .ex-graph-wrap:active {
      cursor: grabbing;
    }
    .ex-graph-wrap .ex-graph-svg {
      width: 100%;
      height: 100%;
    }