/* ═══════════════════════════════════════════════════════════════
   style.css — JSVisualizer グローバルスタイル
   CSS カスタムプロパティでテーマを管理
═══════════════════════════════════════════════════════════════ */

/* ── CSS カスタムプロパティ（テーマ） ──────────────────────────── */

/* ライトテーマ（デフォルト）: VS Code Light Modern ベース */
:root {
  /* 背景・サーフェス */
  --bg:           #ffffff;   /* エディタ背景：純白 */
  --surface:      #f3f3f3;   /* サイドバー・ヘッダー */
  --surface2:     #ebebeb;   /* カード・タブ */
  --border:       #d4d4d4;   /* 境界線 */

  /* テキスト */
  --text:         #1f1f1f;   /* メインテキスト（ほぼ黒） */
  --text-muted:   #616161;   /* サブテキスト */
  --text-dim:     #3b3b3b;   /* 中間テキスト */

  /* アクセントカラー */
  --accent:       #0066bf;   /* 現在行ハイライト（VS Code ブルー） */
  --accent-bg:    #dbeafe;
  --changed:      #cd3131;   /* 変化した変数（VS Code エラーレッド） */
  --changed-bg:   #fef2f2;
  --access:       #e07400;   /* 配列アクセス（オレンジ） */
  --compare:      #0070c1;   /* 比較対象（青） */
  --sorted:       #14855f;   /* 確定済み（緑） */

  /* シンタックスハイライト（VS Code Light Modern 準拠） */
  --tok-keyword:  #af00db;   /* キーワード: マゼンタパープル */
  --tok-string:   #a31515;   /* 文字列: ダークレッド */
  --tok-number:   #098658;   /* 数値: グリーン */
  --tok-comment:  #008000;   /* コメント: グリーン */

  /* 値の型色（VS Code Light Modern 準拠） */
  --v-num:    #098658;   /* 数値: グリーン */
  --v-str:    #a31515;   /* 文字列: ダークレッド */
  --v-bool:   #0000ff;   /* 真偽値: ブルー */
  --v-null:   #808080;   /* null */
  --v-undef:  #808080;   /* undefined */
  --v-fn:     #795e26;   /* 関数: ゴールドブラウン */
  --v-obj:    #267f99;   /* オブジェクト: ティール */
  --v-diff:   #c05000;   /* 変化した値: オレンジ */

  /* オブジェクトグラフ ノード背景色パレット */
  --og-bg-0: rgba( 76, 155, 232, 0.10);
  --og-bg-1: rgba(232, 107,  76, 0.10);
  --og-bg-2: rgba( 76, 200, 132, 0.10);
  --og-bg-3: rgba(200,  76, 232, 0.10);
  --og-bg-4: rgba(200, 160,  40, 0.12);
  --og-bg-5: rgba( 40, 180, 200, 0.10);

  /* 式・呼び出し元ハイライト（白背景でも視認できるよう濃いめ） */
  --hl-expr:     rgba(255, 165,   0, 0.25);
  --hl-expr-act: rgba(255, 165,   0, 0.42);
  --hl-call:     rgba(175,   0, 219, 0.12);
  --hl-call-act: rgba(175,   0, 219, 0.22);
  --hl-call-bdr: rgba(175,   0, 219, 0.60);

  /* サイズ */
  --header-h:    44px;   /* auto 高さになったため参照のみ（app-main で使用しない） */
  --footer-h:    0px;    /* フッター廃止 */
  --pane-gap:    8px;
  --radius:      6px;
  --radius-sm:   3px;

  /* アニメーション */
  --anim-flash:   0.5s;
  --anim-slide:   0.2s;
}

/* ダークテーマ: Catppuccin Mocha ベース */
[data-theme="dark"] {
  /* 背景・サーフェス */
  --bg:           #1e1e2e;
  --surface:      #2a2a3e;
  --surface2:     #313244;
  --border:       #44475a;

  /* テキスト */
  --text:         #cdd6f4;
  --text-muted:   #6c7086;
  --text-dim:     #a6adc8;

  /* アクセントカラー */
  --accent:       #89b4fa;
  --accent-bg:    #1a2a45;
  --changed:      #f38ba8;
  --changed-bg:   #3d1a22;
  --access:       #fab387;
  --compare:      #89dceb;
  --sorted:       #a6e3a1;

  /* シンタックスハイライト */
  --tok-keyword:  #cba6f7;
  --tok-string:   #a6e3a1;
  --tok-number:   #fab387;
  --tok-comment:  #585b70;

  /* 値の型色 */
  --v-num:    #fab387;
  --v-str:    #a6e3a1;
  --v-bool:   #89dceb;
  --v-null:   #6c7086;
  --v-undef:  #6c7086;
  --v-fn:     #cba6f7;
  --v-obj:    #f9e2af;
  --v-diff:   #ff9f5e;   /* 変化した値: 明るいオレンジ */

  /* オブジェクトグラフ ノード背景色パレット */
  --og-bg-0: rgba(137, 180, 250, 0.16);
  --og-bg-1: rgba(243, 139, 168, 0.16);
  --og-bg-2: rgba(166, 227, 161, 0.16);
  --og-bg-3: rgba(203, 166, 247, 0.16);
  --og-bg-4: rgba(249, 226, 175, 0.18);
  --og-bg-5: rgba(137, 220, 235, 0.16);

  /* 式・呼び出し元ハイライト */
  --hl-expr:     rgba(250, 179, 135, 0.30);
  --hl-expr-act: rgba(250, 179, 135, 0.45);
  --hl-call:     rgba(203, 166, 247, 0.20);
  --hl-call-act: rgba(203, 166, 247, 0.35);
  --hl-call-bdr: rgba(203, 166, 247, 0.70);
}

/* ── リセット・基本 ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  height: 100%;
  overflow-y: hidden;   /* body が縦方向に溢れてもスクロールバーなし */
  overflow-x: auto;     /* body が min-width を超えたとき横スクロールバーを表示 */
}

body {
  height: 100%;
  min-width: 820px;     /* これ未満の幅では html に横スクロールバーが現れる */
  display: flex;
  flex-direction: column;
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 14px;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}

/* ── ヘッダー ─────────────────────────────────────────────────── */
.app-header {
  height: auto;          /* コンテンツに合わせて伸縮 */
  min-height: 44px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 12px;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;       /* 超狭ウィンドウでヘッダー左右が折り返す場合に備える */
}

.header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.header-center {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  flex-wrap: nowrap;     /* center 内は基本1行 */
}

.header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.logo { font-size: 20px; }

.app-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.02em;
}

/* ── メインレイアウト ──────────────────────────────────────────── */
.app-main {
  --editor-pct: 30;   /* PaneResizer が上書き。デフォルト 30% */
  display: flex;
  gap: 0;             /* 仕切りで gap を代替するため 0 に */
  padding: var(--pane-gap);
  flex: 1;            /* ヘッダー高さが動的なため calc() ではなく flex: 1 で残高を埋める */
  min-height: 0;
  overflow: hidden;
}

/* ── ペイン共通 ────────────────────────────────────────────────── */
.pane {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.pane-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.pane-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}

.pane-subtitle {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 左ペイン: エディタ ───────────────────────────────────────── */
.editor-pane {
  width: calc(var(--editor-pct) * 1%);
  flex-shrink: 0;
}

/* ── ペイン仕切り（ドラッグリサイズ） ──────────────────────────── */
.pane-divider {
  width: 5px;
  flex-shrink: 0;
  cursor: col-resize;
  background: transparent;
  border-radius: 2px;
  transition: background 0.15s;
  margin: var(--pane-gap) 4px;
}
.pane-divider:hover,
.pane-divider.dragging {
  background: var(--accent);
}

.editor-area {
  flex: 1;
  overflow: hidden;
  display: flex;
}

/* CodeMirror ホストコンテナ */
.cm-host {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.cm-host .cm-editor {
  flex: 1;
  height: 100%;
  background: var(--bg);
}

/* ── 実行モード: コードハイライト ─────────────────────────────── */
.code-display {
  flex: 1;
  overflow-y: auto;
  background: var(--bg);
}

.cv-lines {
  padding: 10px 0;
}

.cv-line {
  display: flex;
  align-items: baseline;
  min-height: 22px;
  padding: 1px 0;
  border-left: 3px solid transparent;
  transition: background 0.15s;
}

.cv-line--active {
  background: var(--accent-bg);
  border-left-color: var(--accent);
}

.cv-line-num {
  flex-shrink: 0;
  width: 40px;
  text-align: right;
  padding-right: 12px;
  color: var(--text-muted);
  font-family: monospace;
  font-size: 12px;
  user-select: none;
}

.cv-line-code {
  flex: 1;
  font-family: 'Consolas', 'Monaco', 'Cascadia Code', monospace;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre;
  padding-right: 12px;
  /* 式ハイライト用: 相対位置の基点を作り、子の z-index が有効になるスタッキングコンテキストを生成 */
  position: relative;
  isolation: isolate;
}

/**
 * 式ハイライトオーバーレイ
 * - position: absolute で行コード内の文字範囲に重ねる
 * - z-index: -1 + isolation: isolate の組み合わせでテキストの"背後"に配置
 * - left / width は JS 側で calc(N * 1ch) を設定（モノスペースフォント前提）
 */
.cv-expr-highlight {
  position: absolute;
  top:    0.1em;
  height: 1.35em;         /* line-height 1.6 より少し短めにして字間に余白 */
  z-index: -1;
  background: var(--hl-expr);
  border-radius: 3px;
  pointer-events: none;
}

/* アクティブ行の式ハイライトは少し濃くする */
.cv-line--active .cv-expr-highlight {
  background: var(--hl-expr-act);
}

/**
 * 呼び出し元ハイライトオーバーレイ
 * - 関数内部を実行中のとき、その関数を呼び出した CallExpression をパープルで着色
 * - 破線アンダーラインで「呼び出し元」であることを視覚的に示す
 */
.cv-callsite-highlight {
  position: absolute;
  top:    0.1em;
  height: 1.35em;
  z-index: -1;
  background: var(--hl-call);
  border-bottom: 2px dashed var(--hl-call-bdr);
  border-radius: 3px;
  pointer-events: none;
}

/* アクティブ行の呼び出し元ハイライトは少し濃くする */
.cv-line--active .cv-callsite-highlight {
  background: var(--hl-call-act);
}

/* シンタックスハイライト */
.tok-keyword { color: var(--tok-keyword); }
.tok-string  { color: var(--tok-string);  }
.tok-number  { color: var(--tok-number);  }
.tok-comment { color: var(--tok-comment); font-style: italic; }

/* ── エラー表示 ────────────────────────────────────────────────── */
.error-msg {
  padding: 8px 12px;
  background: var(--changed-bg);
  color: var(--changed);
  font-family: monospace;
  font-size: 12px;
  border-top: 1px solid var(--changed);
  flex-shrink: 0;
  word-break: break-all;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

/* エラー種別バッジ */
.error-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  background: var(--changed);
  color: #fff;
  flex-shrink: 0;
  white-space: nowrap;
}

/* 実行時エラーはやや落ち着いた色で */
.error-msg[data-error-type="runtime"] {
  background: color-mix(in srgb, var(--changed-bg), var(--surface) 30%);
}
.error-msg[data-error-type="runtime"] .error-badge {
  background: color-mix(in srgb, var(--changed) 80%, var(--text-dim) 20%);
}

/* エラー行ブリンク（active line に box-shadow を適用; CM テーマは background のみ上書きするため干渉しない） */
@keyframes cm-error-line-blink {
  0%, 100% { box-shadow: none; }
  30%,  70% { box-shadow: inset 0 0 0 9999px rgba(220, 38, 38, 0.18); }
}
.cm-error-blink .cm-activeLine {
  animation: cm-error-line-blink 0.55s ease 3 !important;
}

/* ── 右ペイン: デバッグ情報 ───────────────────────────────────── */
.debug-pane {
  flex: 1;
  overflow: hidden;
}

.view-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 6px 8px 0;
  flex-shrink: 0;
}

.view-tab {
  background: transparent;
  border: 1px solid var(--border);
  border-bottom: none;
  color: var(--text-muted);
  padding: 4px 12px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  cursor: pointer;
  font-size: 12px;
  transition: background 0.1s, color 0.1s;
}

.view-tab:hover { background: var(--surface2); color: var(--text); }

.view-tab--active {
  background: var(--surface2);
  color: var(--text);
  border-color: var(--border);
}

/* ライトモード: アクティブタブを白背景＋青トップボーダーで明確化 */
:root:not([data-theme="dark"]) .view-tab--active {
  background: var(--bg);
  color: var(--accent);
  border-top: 2px solid var(--accent);
  border-left-color: var(--border);
  border-right-color: var(--border);
  font-weight: 600;
}

.view-tab--empty {
  opacity: 0.38;
}
.view-tab--empty:not(.view-tab--active):hover {
  background: transparent;
  color: var(--text-muted);
  cursor: default;
}

/* ── ビュー説明バー ─────────────────────────────────────────────── */
.view-desc {
  padding: 3px 10px;
  font-size: 11px;
  color: var(--text-muted);
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  min-height: 20px;
  line-height: 1.5;
}

.view-desc:empty {
  display: none;
}

.debug-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── デバッグカード ────────────────────────────────────────────── */
.debug-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.card-header {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 5px 10px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}

.placeholder {
  padding: 8px 10px;
  color: var(--text-muted);
  font-size: 12px;
  font-style: italic;
}

/* ── Current Step ──────────────────────────────────────────────── */
.current-step {
  padding: 8px 10px;
  font-family: monospace;
  font-size: 12px;
  line-height: 1.5;
}

.cs-line { color: var(--text-muted); margin-bottom: 2px; }
.cs-line span { color: var(--text); }
.cs-node { color: var(--accent); font-weight: bold; }
.cs-phase-enter { color: var(--sorted); }
.cs-phase-exit  { color: var(--access); }
.cs-value { color: var(--v-num); }

/* ── 変数パネル ────────────────────────────────────────────────── */
.variables { padding: 6px 10px; }

.scope-frame {
  margin-bottom: 8px;
}

.scope-label {
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 3px;
  padding-left: 4px;
  border-left: 2px solid var(--border);
}

.var-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 2px 4px;
  border-radius: var(--radius-sm);
  font-family: monospace;
  font-size: 12px;
  line-height: 1.5;
  transition: background 0.15s;
}

.var-row--changed {
  animation: var-flash var(--anim-flash) ease-out;
}

@keyframes var-flash {
  0%   { background: var(--changed-bg); }
  100% { background: transparent; }
}

.var-name  { color: var(--accent); }
.var-eq    { color: var(--text-muted); }

/* 値の型色 */
.v-num   { color: var(--v-num);   }
.v-str   { color: var(--v-str);   }
.v-bool  { color: var(--v-bool);  }
.v-null  { color: var(--v-null);  font-style: italic; }
.v-undef { color: var(--v-undef); font-style: italic; }
.v-fn    { color: var(--v-fn);    }
.v-obj   { color: var(--v-obj);   }

/* 変化した値の強調（内側の型色スパンも上書き） */
.v-diff,
.v-diff .v-num,
.v-diff .v-str,
.v-diff .v-bool,
.v-diff .v-obj,
.v-diff .v-key,
.v-diff .v-fn,
.v-diff .v-null,
.v-diff .v-undef { color: var(--v-diff); }

/* スコープトグル */
.scope-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: 11px;
  font-weight: normal;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
}

.scope-toggle input { cursor: pointer; }

/* ── コールスタック ────────────────────────────────────────────── */
.callstack { padding: 6px 10px; }

.frame-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  margin-bottom: 4px;
  font-family: monospace;
  font-size: 12px;
}

.frame-card--top {
  border-color: var(--accent);
  background: var(--accent-bg);
}

.frame-name { color: var(--accent); font-weight: bold; }
.frame-loc  { color: var(--text-muted); margin-left: 6px; }

/* ── コンソール出力 ────────────────────────────────────────────── */
.console-output { padding: 6px 10px; }

.console-line {
  font-family: monospace;
  font-size: 12px;
  padding: 1px 0;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  word-break: break-all;
}

.console-line--warn  { color: var(--access); }
.console-line--error { color: var(--changed); }

.console-count {
  font-size: 10px;
  background: var(--surface);
  border-radius: 10px;
  padding: 1px 6px;
  color: var(--text-muted);
}

/* ── ステップコントロールバー（フッター） ─────────────────────── */
.step-bar {
  height: var(--footer-h);
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: stretch;   /* 子要素を縦方向に引き伸ばす */
  gap: 6px;
  padding: 6px 12px;
  flex-shrink: 0;
}

/* ── Editモード/Runモード 表示切替 ──────────────────────────────── */

/* デフォルト（Editモード）: ステップコントロールを非表示 */
.step-controls-area {
  display: none;
}

/* Runモード: ステップコントロールを表示、sample-select を非表示 */
.app-header.run-mode .step-controls-area {
  display: flex;
  align-items: center;
  flex-wrap: wrap;       /* ナロー時: slider-area が2行目に折り返す */
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.app-header.run-mode #sample-select {
  display: none;
}

/* スライダー＋カウンターのラッパー（flex-wrap で2行目にまとめて折り返す） */
.slider-area {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 180px;   /* これを下回る空きしかない時、次の行に折り返す */
}

/* 1列ボタン列（先頭/末尾 → 関数 → 人 → 文 → 式） */
.ctrl-grid {
  display: flex;
  align-items: stretch;
  gap: 2px;
  flex-shrink: 0;
}

.ctrl-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
  transition: background 0.1s, opacity 0.1s;
  min-width: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}

.ctrl-btn:hover:not(:disabled) { background: var(--accent-bg); border-color: var(--accent); }
.ctrl-btn:disabled { opacity: 0.3; cursor: default; }

/* 先頭/末尾ナビゲーションボタン */
.ctrl-btn--nav {
  font-size: 16px;
  padding: 4px 14px;
  align-self: stretch;
}

/* 細粒度ボタン（式・人）: アクセントブルー */
.ctrl-btn--expr,
.ctrl-btn--human {
  border-color: var(--accent);
  color: var(--accent);
}
.ctrl-btn--expr:hover:not(:disabled),
.ctrl-btn--human:hover:not(:disabled) {
  background: var(--accent-bg);
}

/* 粗粒度ボタン（文・関数）: グレー系 */
.ctrl-btn--stmt,
.ctrl-btn--call {
  border-color: var(--border);
  color: var(--text-dim);
}
.ctrl-btn--stmt:hover:not(:disabled),
.ctrl-btn--call:hover:not(:disabled) {
  background: var(--surface2);
  border-color: var(--text-dim);
  color: var(--text);
}

/* ボタン内テキスト要素 */
.btn-arrows   { font-size: 11px; letter-spacing: -1px; line-height: 1.1; }
.btn-label-sm {
  font-size: 9px;
  opacity: 0.75;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
}

.step-slider {
  flex: 1;
  min-width: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.step-slider:disabled { opacity: 0.3; cursor: default; }

.step-counter {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 80px;
  text-align: right;
  font-family: monospace;
}

/* ── ボタン共通 ────────────────────────────────────────────────── */
.btn {
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.1s;
}

.btn-primary {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.btn-primary:hover { filter: brightness(1.1); }

.btn-secondary {
  background: var(--surface2);
  color: var(--text);
  border-color: var(--border);
}
.btn-secondary:hover { background: var(--border); }

.editor-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* header-center 内の区切り */
.header-sep {
  width: 1px;
  align-self: stretch;
  background: var(--border);
  margin: 8px 2px;
}

/* Edit / Run トグルボタン */
.btn-mode {
  background: var(--surface2);
  color: var(--text-muted);
  border-color: var(--border);
}
.btn-mode:hover { background: var(--border); color: var(--text); }
.btn-mode--active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.btn-mode--active:hover { filter: brightness(1.1); }

/* ── セレクト共通 ──────────────────────────────────────────────── */
#sample-select {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  flex-shrink: 0;
}

#sample-select:disabled { opacity: 0.4; }

/* ── ビューコンテナ（ViewSwitcher のマウント先） ──────────────── */
.view-container {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ── 常時表示コンソールパネル ──────────────────────────────────── */
.console-panel {
  flex-shrink: 0;
  height: var(--console-h, 110px);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* ライトモード: コンソールを白背景に */
:root:not([data-theme="dark"]) .console-panel {
  background: var(--bg);
}
.console-resizer {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  cursor: ns-resize;
  z-index: 10;
  background: transparent;
  transition: background 0.15s;
}
.console-resizer:hover,
.console-resizer--active {
  background: var(--accent);
  opacity: 0.4;
}
.console-panel-header {
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.console-panel .console-output {
  flex: 1;
  overflow-y: auto;
  padding: 4px 10px;
}

/* ViewSwitcher が生成するラッパー（各ビューの直接の親） */
.view-wrapper {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ── StateView ────────────────────────────────────────────────── */
.sv-scroll {
  flex: 1 1 0;
  overflow-y: auto;
  padding: 8px;
  min-height: 0;
  /* gap の代わりに隣接カード間の margin で間隔を確保 */
}
.sv-scroll > .debug-card + .debug-card {
  margin-top: 8px;
}

/* ── AnimatedTrace ────────────────────────────────────────────── */
.at-wrap {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.at-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Consolas', 'Monaco', 'Cascadia Code', monospace;
  font-size: 12px;
}

.at-th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface2);
  padding: 5px 8px;
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  border-bottom: 2px solid var(--border);
}

.at-td {
  padding: 3px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}

.at-row--active .at-td {
  background: var(--accent-bg);
}

.at-row--active .at-col-num {
  border-left: 3px solid var(--accent);
}

@keyframes at-slide-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0);    }
}

.at-row--new {
  animation: at-slide-in 0.18s ease-out;
}

/* 列幅 */
.at-col-num  { width: 36px; text-align: right; color: var(--text-muted); }
.at-col-line { width: 40px; text-align: right; color: var(--text-muted); }
.at-col-type { width: 110px; }
.at-col-val  { }

/* ── TraceTable ───────────────────────────────────────────────── */
.tt-wrap {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.tt-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Consolas', 'Monaco', 'Cascadia Code', monospace;
  font-size: 12px;
}

.tt-th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface2);
  padding: 5px 8px;
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  border-bottom: 2px solid var(--border);
}

.tt-td {
  padding: 3px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}

.tt-row--active .tt-td {
  background: var(--accent-bg);
}

.tt-row--active .tt-col-num {
  border-left: 3px solid var(--accent);
}

/* 列幅 */
.tt-col-num    { width: 36px;  text-align: right; color: var(--text-muted); }
.tt-col-line   { width: 40px;  text-align: right; color: var(--text-muted); }
.tt-col-type   { width: 110px; }
.tt-col-target { width: 140px; color: var(--accent); font-family: 'Cascadia Code', Consolas, monospace; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
.tt-col-val    { }

/* ── SubstTrace（代入展開ビュー） ─────────────────────────────── */
.stx-wrap {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 16px 20px;
}

.stx-empty {
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
  padding: 24px;
}

.stx-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stx-line {
  font-family: 'Consolas', 'Monaco', 'Cascadia Code', monospace;
  font-size: 14px;
  line-height: 1.6;
  padding: 2px 8px;
  border-radius: 4px;
  color: var(--text-muted);
  white-space: pre;
  transition: background 0.1s;
}

.stx-line--past {
  color: var(--text);
}

.stx-line--active {
  color: var(--text);
  background: var(--accent-bg);
  font-weight: 600;
}

.stx-lineno {
  display: inline-block;
  min-width: 2ch;
  text-align: right;
  color: var(--text-muted);
  font-size: 11px;
}

.stx-line--past   .stx-lineno,
.stx-line--active .stx-lineno {
  color: var(--accent);
}

.stx-arrow {
  color: var(--text-muted);
}

.stx-hl-expanded {
  background: var(--hl-expr);
  border-radius: 2px;
}

.stx-hl-pending {
  color: var(--accent);
  font-weight: 700;
}

/* ── ExprTrace ───────────────────────────────────────────────── */
.xev-wrap {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.xev-empty {
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
  padding: 24px;
}

.xev-section {
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.xev-section--hidden { display: none; }

.xev-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Consolas', 'Monaco', 'Cascadia Code', monospace;
  font-size: 13px;
}

.xev-th {
  background: var(--surface2);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.xev-col-expr { min-width: 180px; border-right: 1px solid var(--border); }
.xev-col-var  { width: 56px; text-align: center; border-right: 1px solid var(--border); }
.xev-col-var:last-child { border-right: none; }

.xev-td {
  padding: 3px 10px;
  color: var(--text-muted);
  white-space: pre;
  border-bottom: 1px solid var(--border);
}

.xev-td:last-child { border-right: none; }

.xev-table tbody tr:last-child .xev-td { border-bottom: none; }

.xev-col-var.xev-td { text-align: center; }

.xev-row--past .xev-td {
  color: var(--text);
}

.xev-row--active .xev-td {
  color: var(--text);
  background: var(--accent-bg);
  font-weight: 600;
}

.xev-val--defined { color: var(--text); }
.xev-row--active .xev-val--defined { font-weight: 600; }

.xev-hl-expanded {
  background: var(--hl-expr);
  border-radius: 2px;
}

.xev-hl-pending {
  color: var(--accent);
  font-weight: 700;
}

/* ── ExecTrace ────────────────────────────────────────────────── */
.et-wrap {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.et-empty {
  padding: 24px;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
}

.et-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Consolas', 'Monaco', 'Cascadia Code', monospace;
  font-size: 12px;
}

.et-th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface2);
  padding: 5px 8px;
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}

.et-td {
  padding: 3px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
  white-space: nowrap;
}

.et-row--active .et-td {
  background: var(--accent-bg);
}

.et-row--active .et-col-num {
  border-left: 3px solid var(--accent);
}

/* 列幅・スタイル */
.et-col-num  { width: 36px;  text-align: right; color: var(--text-muted); }
.et-col-line { width: 40px;  text-align: right; color: var(--text-muted); }
.et-col-code { min-width: 160px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.et-col-var  { min-width: 60px; text-align: right; }
.et-col-cond { min-width: 48px; text-align: center; color: var(--accent); font-weight: 600; }

/* ── ScopeView ────────────────────────────────────────────────── */
.scv-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

.scv-frames {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.scv-frame {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.scv-frame--active {
  border-color: var(--accent);
}

.scv-frame-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.scv-frame--active .scv-frame-header {
  background: var(--accent-bg);
}

.scv-frame-name {
  color: var(--accent);
  font-weight: 600;
  font-size: 12px;
  font-family: monospace;
}

.scv-frame-badge {
  font-size: 10px;
  color: var(--text-muted);
  background: var(--surface2);
  padding: 1px 5px;
  border-radius: 10px;
  border: 1px solid var(--border);
}

.scv-vars {
  padding: 6px 10px;
}

.scv-empty {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  display: block;
  padding: 2px 0;
}

/* ── CallStackView ────────────────────────────────────────────── */
.csv-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
}

.csv-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.csv-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  font-family: monospace;
  font-size: 12px;
}

.csv-card--top {
  border-color: var(--accent);
  background: var(--accent-bg);
}

.csv-card--global {
  opacity: 0.5;
  font-style: italic;
}

@keyframes csv-enter {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0);     }
}

.csv-card--enter {
  animation: csv-enter 0.2s ease-out;
}

.csv-name {
  color: var(--accent);
  font-weight: bold;
}

.csv-card--global .csv-name {
  color: var(--text-muted);
}

.csv-loc {
  color: var(--text-muted);
  font-size: 11px;
  margin-top: 2px;
}

/* ── v-key（オブジェクトキー表示） ──────────────────────────────── */
.v-key { color: var(--text-dim); }

/* ── ユーティリティ ────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ── スクロールバー ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── 設定ボタン ────────────────────────────────────────────────── */
.btn-icon {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
  flex-shrink: 0;
}

.btn-icon:hover {
  background: var(--surface2);
  color: var(--text);
  border-color: var(--border);
}

/* 言語切替ボタン（EN / 日） */
.btn-lang {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  width: auto;
  min-width: 32px;
  padding: 0 6px;
}

/* ── 設定パネル ────────────────────────────────────────────────── */
.settings-panel {
  position: fixed;
  z-index: 1000;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.20);
  min-width: 200px;
  overflow: hidden;
  /* 開閉アニメーション */
  transform-origin: top right;
  animation: settings-open 0.12s ease-out;
}

@keyframes settings-open {
  from { opacity: 0; transform: scale(0.95) translateY(-4px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);     }
}

.settings-header {
  padding: 10px 14px 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

.settings-body {
  padding: 8px 0;
}

.settings-section {
  padding: 0 8px 4px;
}

.settings-section-title {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 4px 6px 6px;
}

.settings-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  transition: background 0.1s;
  user-select: none;
}

.settings-option:hover {
  background: var(--surface2);
}

.settings-option input[type="radio"] {
  accent-color: var(--accent);
  cursor: pointer;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.settings-option-icon {
  font-size: 14px;
  line-height: 1;
}

.settings-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 4px 0;
}

/* ── Session Log UI ─────────────────────────────────────────── */

.log-status {
  font-size: 11px;
  color: var(--text-muted);
  padding: 2px 6px 6px;
}

.log-status--active {
  color: var(--accent);
}

.log-btn {
  display: block;
  width: 100%;
  padding: 5px 8px;
  margin-bottom: 4px;
  font-size: 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}

.log-btn:hover:not(:disabled) {
  background: var(--accent-bg);
  border-color: var(--accent);
}

.log-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.log-marker-row {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
}

.log-marker-input {
  flex: 1;
  min-width: 0;
  padding: 4px 6px;
  font-size: 11px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
}

.log-marker-input:focus {
  outline: none;
  border-color: var(--accent);
}

.log-btn--inline {
  width: auto;
  flex-shrink: 0;
  margin-bottom: 0;
  padding: 4px 10px;
}

.log-export-row {
  display: flex;
  gap: 4px;
}

.log-btn--export {
  flex: 1;
  text-align: center;
  margin-bottom: 0;
  font-weight: 600;
}

/* ── Study Mode: preset marker buttons ── */

.study-marker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  margin-bottom: 6px;
}

.study-marker-btn {
  display: block;
  width: 100%;
  padding: 4px 2px;
  font-size: 10px;
  text-align: center;
  margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════
   LineTrace — ソース行×変数トレース表  .lt-*
═══════════════════════════════════════════════════════════════ */

/* ── レイアウト ────────────────────────────────────────────────────── */

.lt-outer {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.lt-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.lt-table-wrap {
  flex: 1;
  overflow: auto;
  padding-top: 10px;
}

.lt-table {
  border-collapse: collapse;
  white-space: nowrap;
  font-family: 'Cascadia Code', 'Fira Code', 'SF Mono', Consolas, monospace;
  font-size: 13px;
  min-width: 100%;
}

/* ── ツールバー（変数表示/非表示トグル） ──────────────────────────────── */

.lt-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 8px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  min-height: 0;
  position: sticky;
  top: 0;
  z-index: 4;
}

.lt-toolbar:empty {
  display: none;
}

.lt-var-toggle {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid var(--accent);
  background: var(--accent-bg);
  color: var(--accent);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s, opacity 0.1s;
}

.lt-var-toggle:hover {
  background: var(--accent);
  color: var(--bg);
}

.lt-var-toggle--hidden {
  opacity: 0.4;
  border-color: var(--border);
  background: transparent;
  color: var(--text-muted);
}

.lt-var-toggle--hidden:hover {
  opacity: 0.8;
  background: var(--surface2);
  color: var(--text);
}

/* 非表示列 */
.lt-col-hidden {
  display: none;
}

/* 列ドラッグ中 */
.lt-col-dragging {
  opacity: 0.4;
  cursor: grabbing;
}

/* ドロップターゲット */
.lt-col-dragover {
  background: var(--accent-bg);
  border-left: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
}

/* ── ヘッダー行 ────────────────────────────────────────────────── */

.lt-thead-row {
  position: sticky;
  top: 0;
  z-index: 3;
}

.lt-th {
  padding: 4px 8px;
  background: var(--surface);
  border-bottom: 2px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.lt-th-lineno {
  color: var(--text-muted);
  text-align: right;
  min-width: 3ch;
}

.lt-th-src {
  color: var(--text-muted);
  text-align: left;
  min-width: 180px;
}

/* 変数列ヘッダー（draggable） */
.lt-th-var {
  color: var(--accent);
  text-align: center;
  min-width: 72px;
  border-left: 1px solid var(--border);
  cursor: grab;
  user-select: none;
}

/* ── データ行 ──────────────────────────────────────────────────── */

.lt-row {
  height: 24px;        /* cv-line の min-height(22px) + padding(1px×2) に合わせる */
  border-bottom: 1px solid var(--surface2);
  transition: background 0.1s;
}

.lt-row--active .lt-td {
  background: var(--accent-bg);
}

.lt-row--active .lt-td-lineno {
  color: var(--accent);
  font-weight: 700;
}

/* ── セル共通 ──────────────────────────────────────────────────── */

.lt-td {
  padding: 1px 8px;
  vertical-align: middle;
  line-height: 22px; /* 行高さ 24px - padding 2px */
  font-size: 13px;
}

.lt-td-lineno {
  color: var(--text-muted);
  font-size: 11px;
  user-select: none;
  white-space: nowrap;
  padding-right: 12px;
}

.lt-lineno-num {
  display: inline-block;
  min-width: 24px;
  text-align: right;
  margin-right: 6px;
}

.lt-lineno-snippet {
  color: var(--text-muted);
  opacity: 0.7;
  font-family: 'Cascadia Code', 'Fira Code', 'SF Mono', Consolas, monospace;
}

/* 変数値セル */
.lt-td-var {
  text-align: center;
  border-left: 1px solid var(--border);
  min-width: 72px;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 条件列 */
.lt-th-cond {
  background: var(--surface2);
  color: var(--accent);
  font-style: italic;
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lt-td-cond {
  text-align: center;
  border-left: 1px solid var(--border);
  min-width: 52px;
  max-width: 120px;
  color: var(--accent);
  font-weight: 600;
}

/* 値なし（まだ実行されていない行） */
.lt-empty {
  color: var(--border);
  font-size: 11px;
}

/* ── 変化フラッシュアニメーション ─────────────────────────────────── */

@keyframes lt-flash {
  0%   { background: rgba(255, 165, 0, 0.55); }
  70%  { background: rgba(255, 165, 0, 0.20); }
  100% { background: transparent; }
}

.lt-flash {
  animation: lt-flash 0.85s ease forwards;
}

/* ダークテーマ時のフラッシュは少し暖色に */
[data-theme="dark"] .lt-flash {
  animation: lt-flash-dark 0.85s ease forwards;
}

@keyframes lt-flash-dark {
  0%   { background: rgba(249, 226, 175, 0.50); color: #f9e2af; }
  70%  { background: rgba(249, 226, 175, 0.15); }
  100% { background: transparent; color: inherit; }
}

/* ═══════════════════════════════════════════════════════════════
   Phase 3 — BarChart (棒グラフ)  .bc-*
═══════════════════════════════════════════════════════════════ */

.bc-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 12px;
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
}

.bc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex-shrink: 0;
}

.bc-chip {
  padding: 2px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}

.bc-chip--on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

.bc-chip:hover:not(.bc-chip--on) {
  background: var(--border);
  color: var(--text);
}

.bc-chart {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bc-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bc-group-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.bc-bars-row {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.bc-bar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.bc-bar {
  border-radius: 2px 2px 0 0;
  transition: height 0.25s ease, background 0.25s ease;
  min-height: 2px;
}

.bc-bar-val {
  color: var(--text-muted);
  font-size: 9px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  text-align: center;
}

.bc-bar-idx {
  color: var(--text-muted);
  font-size: 9px;
  line-height: 1.2;
}

.bc-empty {
  font-size: 12px;
  color: var(--text-muted);
  padding: 12px 0;
}

/* ═══════════════════════════════════════════════════════════════
   Phase 3 — ColorBox (色付き箱)  .cb-*
═══════════════════════════════════════════════════════════════ */

.cb-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 12px;
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
}

.cb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex-shrink: 0;
}

.cb-chip {
  padding: 2px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}

.cb-chip--on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

.cb-chip:hover:not(.cb-chip--on) {
  background: var(--border);
  color: var(--text);
}

.cb-box-area {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: flex-start;
}

.cb-array-block {
  padding: 8px 12px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface2);
  margin: 4px;
}

.cb-array-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 4px;
  font-family: monospace;
}

.cb-grid {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: max-content;
}

.cb-row {
  display: flex;
  gap: 3px;
}

.cb-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 3px;
  font-family: monospace;
  font-weight: 600;
  color: #1a1a1a;   /* 箱の色が背景になるので常に暗い文字 */
  flex-shrink: 0;
  overflow: hidden;
  transition: background 0.2s, border-color 0.2s;
  white-space: nowrap;
  box-sizing: border-box;
}

.cb-cell--idx {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-weight: normal;
  font-size: 10px;
}

.cb-cell--hl {
  border: 2px solid var(--accent) !important;
}

.cb-cell--ptr {
  background: transparent;
  border: none;
  color: var(--accent);
  font-weight: 700;
  font-size: 10px;
}

.cb-empty {
  font-size: 12px;
  color: var(--text-muted);
  padding: 12px 0;
}

/* ═══════════════════════════════════════════════════════════════
   Phase 3 — Timeline (時系列グラフ)  .tl-*
═══════════════════════════════════════════════════════════════ */

.tl-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 8px;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.tl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex-shrink: 0;
}

.tl-chip {
  padding: 2px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}

.tl-chip--on {
  background: var(--chip-color, var(--accent));
  border-color: var(--chip-color, var(--accent));
  color: #fff;
}

.tl-chip:hover:not(.tl-chip--on) {
  background: var(--border);
  color: var(--text);
}

.tl-chart {
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

.tl-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.tl-empty {
  font-size: 12px;
  color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════
   Phase 3 — Heatmap (ヒートマップ)  .hm-*
═══════════════════════════════════════════════════════════════ */

.hm-wrap {
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* 連結線トグルボタン */

.hm-overlay-svg {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  display: none;
}

.hm-vline {
  stroke: var(--accent);
  stroke-width: 1;
  stroke-opacity: 0.4;
  fill: none;
}

.hm-lines {
  flex: 1;
  overflow-y: auto;
  padding: 6px 4px;
  font-family: 'Cascadia Code', 'Fira Code', 'SF Mono', Consolas, monospace;
  font-size: 13px;
  line-height: 1.55;
  position: relative;
}

.hm-line {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 1px 6px;
  border-radius: 3px;
  border: 1.5px solid transparent;
  transition: border-color 0.1s;
  box-sizing: border-box;
}

.hm-line--active {
  border-color: var(--accent) !important;
  outline: none;
}

/* 異常実行頻度（1000回以上）の行: テキストを白にして視認性を確保 */
.hm-line--anomaly .hm-src,
.hm-line--anomaly .hm-lineno,
.hm-line--anomaly .hm-count {
  color: rgba(255, 255, 255, 0.95);
}

.hm-lineno {
  color: var(--text-muted);
  min-width: 2.8ch;
  text-align: right;
  font-size: 11px;
  user-select: none;
  flex-shrink: 0;
  padding-right: 10px;
}

.hm-src {
  flex: 1;
  white-space: pre;
  color: var(--text);
  overflow: hidden;
}

/* メタ情報エリア（カウント＋ドット列） */
.hm-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding-left: 8px;
}

.hm-count {
  color: var(--text-muted);
  font-size: 10px;
  min-width: 12ch;
  text-align: right;
  user-select: none;
  white-space: nowrap;
}

/* 時系列ドット列（3倍幅） */
.hm-dots {
  position: relative;
  width: 360px;
  height: 10px;
  flex-shrink: 0;
  background: var(--surface2);
  border-radius: 3px;
  overflow: hidden;
}

/* 未実行ドット（デフォルト） */
.hm-dot {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 6px;
  border-radius: 1px;
  background: var(--text-muted);
  opacity: 0.25;
  transition: opacity 0.1s;
}

/* 実行済みドット */
.hm-dot--past {
  background: var(--accent);
  opacity: 0.6;
}

/* 現在位置ドット */
.hm-dot--current {
  background: var(--changed);
  opacity: 1;
  height: 10px;
  border-radius: 1px;
  z-index: 1;
}

.hm-empty {
  font-size: 12px;
  color: var(--text-muted);
  padding: 16px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Phase 4: RecursionTree / Lifetime / ControlFlow
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── RecursionTree (.rt-*) ─────────────────────────────────────────────────*/

.rt-wrap {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 8px;
  box-sizing: border-box;
}

.rt-svg {
  display: block;
  /* SVG width/height は JS で設定 */
}

/* エッジ線 */
.rt-edge {
  stroke: var(--border);
  stroke-width: 1.5;
  fill: none;
}

/* ノード枠 */
.rt-rect {
  fill: var(--surface);
  stroke: var(--border);
  stroke-width: 1.5;
  transition: fill 0.2s, stroke 0.2s;
}

/* ノードテキスト */
.rt-name {
  font-family: 'Cascadia Code', 'Fira Code', 'SF Mono', Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  fill: var(--text);
}

.rt-args {
  font-family: 'Cascadia Code', 'Fira Code', 'SF Mono', Consolas, monospace;
  font-size: 10px;
  fill: var(--text-muted);
}

.rt-retval {
  font-family: 'Cascadia Code', 'Fira Code', 'SF Mono', Consolas, monospace;
  font-size: 10px;
  fill: #4ce884;
  font-weight: 600;
}

/* 状態アイコン（色以外の手がかり: 記号で状態を表現） */
.rt-state-icon {
  font-size: 10px;
  fill: var(--text-muted);
  font-family: 'Segoe UI', system-ui, sans-serif;
}
.rt-node--active .rt-state-icon { fill: var(--accent); }
.rt-node--done   .rt-state-icon { fill: #4ce884; }

.rt-cost {
  font-size: 9px;
  fill: var(--text-muted);
  font-family: 'Cascadia Code', 'Fira Code', monospace;
}

/* 未呼び出しノード: グレーアウト + 破線ボーダー（色以外の手がかり） */
.rt-node--future .rt-rect {
  fill: var(--bg);
  stroke: var(--border);
  stroke-dasharray: 5 3;
  opacity: 0.60;
}
.rt-node--future .rt-name,
.rt-node--future .rt-args,
.rt-node--future .rt-retval {
  fill: var(--text-muted);
  opacity: 0.60;
}

/* 実行中ノード: アクセント青強調 + 太い実線ボーダー */
.rt-node--active .rt-rect {
  fill: rgba(76, 155, 232, 0.18);
  stroke: var(--accent);
  stroke-width: 3;
  stroke-dasharray: none;
}
.rt-node--active .rt-name {
  fill: var(--accent);
  font-weight: 700;
}

/* 完了ノード: 緑 + 細い実線ボーダー */
.rt-node--done .rt-rect {
  fill: rgba(76, 232, 132, 0.12);
  stroke: #4ce884;
  stroke-width: 1.5;
  stroke-dasharray: none;
}
.rt-node--done .rt-name {
  fill: var(--text);
}

/* ─── ダークモード補正 ─── */
[data-theme="dark"] .rt-node--active .rt-rect {
  fill: rgba(76, 155, 232, 0.22);
}
[data-theme="dark"] .rt-node--done .rt-rect {
  fill: rgba(76, 232, 132, 0.16);
}

/* ── CallTree (.ct-*) ──────────────────────────────────────────────────────*/

.ct-wrap { width:100%; height:100%; overflow:auto; padding:8px; box-sizing:border-box; }
.ct-svg  { display:block; }
.ct-edge { stroke:var(--border); stroke-width:1.5; fill:none; }
.ct-rect { fill:var(--surface); stroke:var(--border); stroke-width:1.5; transition:fill 0.2s,stroke 0.2s; }
.ct-label {
  font-family: 'Cascadia Code','Fira Code','SF Mono',Consolas,monospace;
  font-size: 11px; font-weight: 600; fill: var(--text);
}
.ct-retval {
  font-family: 'Cascadia Code','Fira Code','SF Mono',Consolas,monospace;
  font-size: 10px; fill: #4ce884; font-weight: 600;
}
.ct-state-icon {
  font-size: 10px; fill: var(--text-muted); font-family: 'Segoe UI',system-ui,sans-serif;
}
.ct-node--active .ct-state-icon { fill: var(--accent); }
.ct-node--done   .ct-state-icon { fill: #4ce884; }

.ct-node--future .ct-rect {
  fill:var(--bg); stroke:var(--border); stroke-dasharray:5 3; opacity:0.60;
}
.ct-node--future .ct-label,
.ct-node--future .ct-retval { fill:var(--text-muted); opacity:0.60; }

.ct-node--active .ct-rect {
  fill:rgba(76,155,232,0.18); stroke:var(--accent); stroke-width:3; stroke-dasharray:none;
}
.ct-node--active .ct-label { fill:var(--accent); font-weight:700; }

.ct-node--done .ct-rect {
  fill:rgba(76,232,132,0.12); stroke:#4ce884; stroke-width:1.5; stroke-dasharray:none;
}

[data-theme="dark"] .ct-node--active .ct-rect { fill:rgba(76,155,232,0.22); }
[data-theme="dark"] .ct-node--done   .ct-rect { fill:rgba(76,232,132,0.16); }

/* ── Lifetime / フレームグラフ (.lf-*) ─────────────────────────────────────*/

.lf-wrap {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 8px;
  box-sizing: border-box;
}

.lf-svg {
  display: block;
}

.lf-axis-line {
  stroke: var(--border);
  stroke-width: 1;
}

.lf-tick {
  stroke: var(--border);
  stroke-width: 1;
}

.lf-tick-label {
  font-family: 'Cascadia Code', 'Fira Code', 'SF Mono', Consolas, monospace;
  font-size: 9px;
  fill: var(--text-muted);
}

/* 行区切り線 */
.lf-row-sep {
  stroke: var(--border);
  stroke-width: 0.5;
}

/* 深さ番号ラベル（Y 軸） */
.lf-depth-label {
  font-family: 'Cascadia Code', 'Fira Code', 'SF Mono', Consolas, monospace;
  font-size: 10px;
  fill: var(--text-muted);
}

/* フレームバー（fill は JS で設定） */
.lf-bar {
  opacity: 0.75;
  transition: opacity 0.08s, stroke-width 0.08s;
}

/* カーソル位置のアクティブバー */
.lf-bar--active {
  opacity: 1;
  stroke: var(--text);
  stroke-width: 1.5;
}

/* バー内の関数名ラベル */
.lf-frame-label {
  font-family: 'Cascadia Code', 'Fira Code', 'SF Mono', Consolas, monospace;
  font-size: 11px;
  fill: var(--text);
  pointer-events: none;
  user-select: none;
}

/* カーソル縦線 */
.lf-cursor {
  stroke: var(--accent);
  stroke-width: 2;
  stroke-dasharray: 5 3;
  pointer-events: none;
}

/* バー内コンテンツ（foreignObject 内 div） */
.lf-bc {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-sizing: border-box;
}

/* 関数名（実引数付き） */
.lf-bc-name {
  font-family: 'Cascadia Code', 'Fira Code', 'SF Mono', Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: visible;
  line-height: 1.3;
}

/* 変数一覧コンテナ */
.lf-bc-vars {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* 変数 1 行 */
.lf-bc-var {
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-family: 'Cascadia Code', 'Fira Code', 'SF Mono', Consolas, monospace;
  font-size: 10px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: visible;
}

.lf-bc-var--changed .lf-bc-vn,
.lf-bc-var--changed .lf-bc-vv {
  color: var(--hl-changed, #e06c75);
}

.lf-bc-vn  { color: var(--accent); }
.lf-bc-eq  { color: var(--text-muted); flex-shrink: 0; }
.lf-bc-vv  { color: var(--text); }

/* ── ControlFlow — 構造的フローチャート (.cf-*) ──────────────────────────── */

.cf-wrap {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 12px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* スコープパネル */
.cf-scope {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.cf-scope-hdr {
  background: var(--surface2, var(--surface));
  padding: 5px 12px;
  font-size: 12px;
  font-family: 'Cascadia Code', 'Fira Code', monospace;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

.cf-region {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── ノード共通 ── */

.cf-node {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border: 1.5px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  font-size: 12px;
  min-height: 28px;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}

.cf-node code {
  font-family: 'Cascadia Code', 'Fira Code', monospace;
  font-size: 11px;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}

/* 条件ノード（if / ループ） */
.cf-node--cond {
  background: rgba(200, 168, 58, 0.10);
  border-color: rgba(200, 168, 58, 0.45);
}
.cf-node--cond::before {
  content: '◇';
  color: #b8983a;
  font-size: 11px;
  flex-shrink: 0;
}

/* ループ条件（↺ で上書き） */
.cf-node--loop.cf-node--cond::before {
  content: '↺';
  color: var(--hl-orange, #e86b4c);
  font-size: 14px;
}

/* return */
.cf-node--return {
  background: rgba(76, 200, 132, 0.10);
  border-color: rgba(76, 200, 132, 0.50);
}
.cf-node--return::before {
  content: '⏎';
  color: #3cb870;
  font-size: 11px;
  flex-shrink: 0;
}

/* break / continue */
.cf-node--jump {
  background: rgba(160, 76, 232, 0.08);
  border-color: rgba(160, 76, 232, 0.38);
}

/* 未実行（dead code） */
.cf-node--dead {
  opacity: 0.36;
  border-style: dashed;
}

/* 現在アクティブ */
.cf-node--active {
  border-color: var(--accent) !important;
  background: rgba(76, 155, 232, 0.18) !important;
  box-shadow: 0 0 0 2px rgba(76, 155, 232, 0.28);
}

/* 実行回数バッジ */
.cf-exec-badge {
  font-size: 10px;
  color: var(--text-muted);
  background: var(--surface2, var(--surface));
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 5px;
  flex-shrink: 0;
  font-family: monospace;
}

/* ── if/else ── */

.cf-if-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cf-if-branches {
  display: flex;
  gap: 8px;
}

.cf-if-branch {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 10px;
  border-left: 2px solid var(--border);
}

.cf-if-branch--true  { border-color: rgba(76, 200, 132, 0.60); }
.cf-if-branch--false { border-color: rgba(232, 107, 76, 0.50); }

.cf-branch-hdr {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
}
.cf-if-branch--true  .cf-branch-hdr { color: #3cb870; }
.cf-if-branch--false .cf-branch-hdr { color: var(--hl-orange, #e86b4c); }

.cf-no-else {
  font-size: 11px;
  color: var(--text-muted);
  padding: 3px 0;
}

/* ── ループ ── */

.cf-loop-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cf-loop-body {
  border-left: 2px solid rgba(232, 107, 76, 0.50);
  padding-left: 12px;
  margin-left: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── seq ── */

.cf-seq {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Phase 5: MemoryView / ObjectGraph
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── MemoryView (.mv-*) ────────────────────────────────────────────────────*/

.mv-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
}

.mv-layout {
  position: relative;
  display: flex;
  gap: 0;
  min-height: 100%;
  padding: 8px;
  box-sizing: border-box;
}

/* SVG オーバーレイ（矢印用） */
.mv-arrows {
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 10;
}

.mv-arrow {
  stroke: var(--accent);
  stroke-width: 1.5;
  opacity: 0.7;
}

.mv-arrow-marker {
  fill: var(--accent);
}

/* パネル共通 */
.mv-panel {
  flex: 1;
  min-width: 0;
  padding: 4px;
}

.mv-panel-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 4px 6px 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}

/* スタックパネル */
.mv-stack-panel {
  border-right: 1px solid var(--border);
  padding-right: 8px;
  margin-right: 8px;
}

/* フレームボックス */
.mv-frame {
  border: 1.5px solid var(--border);
  border-radius: 5px;
  margin-bottom: 6px;
  background: var(--surface);
  overflow: hidden;
}

.mv-frame--top {
  border-color: var(--accent);
}

.mv-frame-name {
  font-family: 'Cascadia Code', 'Fira Code', 'SF Mono', Consolas, monospace;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg);
  padding: 3px 8px;
  border-bottom: 1px solid var(--border);
}

.mv-frame--top .mv-frame-name {
  color: var(--accent);
  background: rgba(76, 155, 232, 0.08);
}

.mv-frame-vars {
  padding: 4px 0;
}

/* 変数行 */
.mv-var-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-family: 'Cascadia Code', 'Fira Code', 'SF Mono', Consolas, monospace;
  font-size: 11px;
  min-height: 20px;
  transition: background 0.2s;
}

.mv-var-row:hover {
  background: rgba(128, 128, 128, 0.08);
}

.mv-var--changed {
  background: rgba(232, 200, 76, 0.15) !important;
}

.mv-var-name {
  color: var(--text);
  font-weight: 600;
  min-width: 60px;
}

.mv-var-val {
  color: var(--text-muted);
  flex: 1;
}

/* 参照インジケーター（→ #N） */
.mv-ref-indicator {
  font-family: 'Cascadia Code', 'Fira Code', 'SF Mono', Consolas, monospace;
  font-size: 10px;
  color: var(--accent);
  background: rgba(76, 155, 232, 0.12);
  border: 1px solid rgba(76, 155, 232, 0.3);
  border-radius: 3px;
  padding: 0 4px;
  white-space: nowrap;
}

/* ヒープパネル */
.mv-heap-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mv-heap-obj {
  border: 1.5px solid var(--border);
  border-radius: 5px;
  background: var(--surface);
  overflow: hidden;
}

.mv-heap-title {
  font-family: 'Cascadia Code', 'Fira Code', 'SF Mono', Consolas, monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg);
  padding: 3px 8px;
  border-bottom: 1px solid var(--border);
}

.mv-heap-cells {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 5px 6px;
}

.mv-heap-cell {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: rgba(128, 128, 128, 0.07);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  font-family: 'Cascadia Code', 'Fira Code', 'SF Mono', Consolas, monospace;
  font-size: 10px;
}

.mv-heap-cell--ref {
  border-color: rgba(76, 155, 232, 0.3);
  background: rgba(76, 155, 232, 0.06);
}

.mv-cell-key {
  color: var(--text-muted);
  font-weight: 600;
}

.mv-cell-sep {
  color: var(--text-muted);
}

.mv-cell-val {
  color: var(--text);
}

.mv-heap-overflow {
  font-family: 'Cascadia Code', 'Fira Code', 'SF Mono', Consolas, monospace;
  font-size: 10px;
  color: var(--text-muted);
  padding: 1px 4px;
}

/* ── ObjectGraph (.og-*) ────────────────────────────────────────────────── */

.og-wrap {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 4px;
  box-sizing: border-box;
}

.og-svg {
  display: block;
}

/* ノード枠（fill はノードごとのインラインスタイルで設定） */
.og-rect {
  stroke: var(--border);
  stroke-width: 1;
}

/* ノードタイトル（Array[N] / Object） */
.og-title {
  font-family: 'Cascadia Code', 'Fira Code', 'SF Mono', Consolas, monospace;
  font-size: 9px;
  font-weight: 700;
  fill: var(--text-muted);
}

/* 区切り線 */
.og-divider {
  stroke: var(--border);
  stroke-width: 0.5;
}

/* プロパティキー */
.og-key {
  font-family: 'Cascadia Code', 'Fira Code', 'SF Mono', Consolas, monospace;
  font-size: 9px;
  fill: var(--text-muted);
}

/* プロパティ値 */
.og-val {
  font-family: 'Cascadia Code', 'Fira Code', 'SF Mono', Consolas, monospace;
  font-size: 9px;
  fill: var(--text);
}

.og-val--ref {
  fill: var(--accent);
}

/* ルート変数ラベル（ノード上部） */
.og-root-label {
  font-family: 'Cascadia Code', 'Fira Code', 'SF Mono', Consolas, monospace;
  font-size: 9px;
  font-weight: 700;
  fill: var(--accent);
}

/* エッジ */
.og-edge {
  stroke: var(--border);
  stroke-width: 1;
  opacity: 0.75;
}

.og-edge-label {
  font-family: 'Cascadia Code', 'Fira Code', 'SF Mono', Consolas, monospace;
  font-size: 8px;
  fill: var(--text-muted);
}

.og-arrow-marker {
  fill: var(--border);
}

/* プリミティブ変数ラベル */
.og-prim-label {
  font-family: 'Cascadia Code', 'Fira Code', 'SF Mono', Consolas, monospace;
  font-size: 9px;
  fill: var(--text-muted);
}

/* 連結成分の外接矩形（複数成分がある場合に表示） */
.og-comp-bg {
  fill: none;
  stroke: var(--border);
  stroke-width: 1;
  stroke-dasharray: 6 4;
  opacity: 0.6;
}

/* プレースホルダー */
.og-placeholder {
  font-size: 13px;
  fill: var(--text-muted);
  dominant-baseline: middle;
}