/* ═══════════════════════════════════════════════════════════
   EA Builder — ノーコードEA作成ツール スタイル
   sft-* CSS変数を継承、ダーク/ライト対応
   ═══════════════════════════════════════════════════════════ */

/* ── EA Builder 専用変数 ── */
:root {
    --eab-palette-w: 220px;
    --eab-property-w: 300px;
    --eab-header-h: 48px;
    --eab-node-radius: 8px;
    --eab-conn-color: var(--sft-primary);
    --eab-port-size: 12px;
    --eab-node-bg: var(--sft-bg-card);
    --eab-node-border: var(--sft-border);
    --eab-node-shadow: 0 2px 8px rgba(0,0,0,0.08);
    --eab-canvas-bg: var(--sft-bg-alt);
    --eab-canvas-dot: var(--sft-border);
    --eab-cat-indicator: var(--sft-primary);
    --eab-cat-condition: #8b5cf6;
    --eab-cat-action: #22c55e;
    --eab-cat-filter: #f97316;
    --eab-cat-money: #06b6d4;
    --eab-cat-exit: #ef4444;
    --eab-cat-util: var(--sft-text-muted);
    --eab-cat-price: #6366f1;
    --eab-cta-accent: #2f6df6;
    --eab-cta-accent-hover: #4f83f7;
    --eab-overlay-backdrop: rgba(8, 12, 20, .62);
}

[data-sft-theme="dark"] {
    --eab-node-shadow: 0 2px 12px rgba(0,0,0,0.3);
    --eab-canvas-dot: var(--sft-border-light);
}
[data-sft-theme="dark"] .eab-landing-tpl-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
[data-sft-theme="dark"] .eab-landing-login-banner {
    background: rgba(59,130,246,0.12);
}

/* ── 汎用非表示 ── */
.eab-hidden { display: none !important; }

/* wrapper(100vh)の外にある How-to Guide セクションは body 直下のため、
   body に themed 背景を塗らないと dark 時にブラウザ既定の白 canvas が見え、
   #f1f5f9 の見出しが白地に乗って不可視になる。ここで page 全体を themed に。 */
body {
    background: var(--sft-bg);
    color: var(--sft-text);
}

/* ── フルビューポートラッパー ── */
.eab-wrapper {
    position: relative;
    width: 100vw;
    height: 100vh;
    margin-left: calc(-50vw + 50%);
    display: flex;
    flex-direction: column;
    background: var(--sft-bg);
    color: var(--sft-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    overflow: hidden;
}

/* ── ヘッダーバー ── */
.eab-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--eab-header-h);
    padding: 0 12px;
    background: var(--sft-bg-card);
    border-bottom: 1px solid var(--sft-border);
    z-index: 100;
    flex-shrink: 0;
    gap: 8px;
}
.eab-header-left,
.eab-header-center,
.eab-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.eab-header-left { flex: 0 0 auto; }
.eab-header-center { flex: 1 1 auto; justify-content: center; white-space: nowrap; }
/* Reserve room for the fixed "← AIStrategyMiner" home link (top:8 right:12, ~90px)
   so it stops overlapping — and blocking clicks on — the rightmost header
   buttons (theme toggle, help). */
.eab-header-right { flex: 0 0 auto; flex-wrap: nowrap; padding-right: 96px; }
.eab-logo {
    font-weight: 700;
    font-size: 15px;
    color: var(--sft-primary-text);
    white-space: nowrap;
}
.eab-badge {
    font-size: 10px;
    font-weight: 700;
    background: var(--sft-primary);
    color: var(--sft-on-primary);
    padding: 1px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

/* ボタン群 */
.eab-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
    border: 1px solid var(--sft-border);
    background: var(--sft-bg-card);
    color: var(--sft-text);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.eab-btn:hover { background: var(--sft-bg-hover); }
.eab-btn:disabled { opacity: 0.4; cursor: default; }
.eab-btn-icon { padding: 5px 6px; }
.eab-btn-ghost { border-color: transparent; background: transparent; }
.eab-btn-ghost:hover { background: var(--sft-bg-hover); border-color: var(--sft-border); }
.eab-btn-primary {
    background: var(--sft-primary);
    color: var(--sft-on-primary);
    border-color: var(--sft-primary);
}
.eab-btn-primary:hover { background: var(--sft-primary-dark); }
.eab-btn-xs { padding: 2px 8px; font-size: 11px; }
.eab-theme-btn { border: none; background: none; font-size: 18px; cursor: pointer; padding: 4px; }

/* ── 3パネルメインレイアウト ── */
.eab-main {
    display: flex;
    flex: 1;
    overflow: hidden;
    position: relative;
}

/* ── 左パネル: ノードパレット ── */
.eab-palette {
    width: var(--eab-palette-w);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--sft-bg-card);
    border-right: 1px solid var(--sft-border);
    overflow: hidden;
    transition: width 0.2s ease, border-width 0.2s ease, padding 0.2s ease;
}
.eab-palette.eab-palette-collapsed {
    width: 0;
    border-right-width: 0;
    overflow: hidden;
}
.eab-palette.eab-palette-collapsed > * {
    opacity: 0;
    pointer-events: none;
}

/* パレットトグルボタン */
.eab-toggle-palette {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 6px;
    border: 1px solid var(--sft-border);
    border-radius: 6px;
    background: var(--sft-bg-card);
    color: var(--sft-text);
    cursor: pointer;
    transition: all 0.15s;
}
.eab-toggle-palette:hover { background: var(--sft-bg-hover); }
.eab-palette-header {
    padding: 10px 12px 8px;
    border-bottom: 1px solid var(--sft-border-light);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.eab-palette-header > span {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--sft-text-secondary);
}
.eab-palette-search {
    width: 100%;
    padding: 5px 8px;
    font-size: 12px;
    border: 1px solid var(--sft-border);
    border-radius: 5px;
    background: var(--sft-input-bg);
    color: var(--sft-text);
    outline: none;
    transition: border-color 0.2s;
}
.eab-palette-search:focus {
    border-color: var(--sft-primary);
}
.eab-palette-body {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0;
}
.eab-palette-body::-webkit-scrollbar { width: 4px; }
.eab-palette-body::-webkit-scrollbar-thumb { background: var(--sft-border); border-radius: 2px; }
.eab-palette-empty {
    padding: 20px 16px;
    text-align: center;
    font-size: 12px;
    line-height: 1.5;
    color: var(--sft-text-muted);
}

/* パレットカテゴリ */
.eab-cat {
    margin-bottom: 2px;
}
.eab-cat-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    background: none;
    color: var(--sft-text-muted);
    cursor: pointer;
    gap: 6px;
    transition: color 0.15s;
}
.eab-cat-toggle:hover { color: var(--sft-text); }
.eab-cat-toggle .eab-cat-arrow {
    font-size: 8px;
    transition: transform 0.2s;
}
.eab-cat.eab-cat-closed .eab-cat-arrow { transform: rotate(-90deg); }
.eab-cat.eab-cat-closed .eab-cat-items { display: none; }
/* B-2: 検索ヒット時は折畳状態でも一時展開（折畳クラスは温存＝クリアで元に戻る） */
.eab-cat.eab-cat-closed.eab-cat-search-hit .eab-cat-items { display: block; }
.eab-cat.eab-cat-closed.eab-cat-search-hit .eab-cat-arrow { transform: rotate(0deg); }
.eab-cat-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* パレットノードアイテム */
.eab-palette-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 24px;
    font-size: 12px;
    color: var(--sft-text);
    cursor: grab;
    transition: background 0.1s;
    user-select: none;
}
.eab-palette-item:hover { background: var(--sft-bg-hover); }
.eab-palette-item:active { cursor: grabbing; }
/* B-2: ↑↓ で選択中の候補（Enter で追加される行）を強調 */
.eab-palette-item-active {
    background: var(--sft-bg-hover);
    box-shadow: inset 2px 0 0 var(--eab-cat-action, #16a34a);
}
.eab-palette-item-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    font-size: 14px;
    flex-shrink: 0;
}
.eab-palette-item-label { flex: 1; font-weight: 500; }

/* パレットフッター: テンプレート */
.eab-palette-footer {
    border-top: 1px solid var(--sft-border);
    padding: 8px 0;
    max-height: 200px;
    overflow-y: auto;
}
.eab-palette-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--sft-text-muted);
    padding: 2px 12px 6px;
}
.eab-template-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.1s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    color: var(--sft-text);
}
.eab-template-card:hover { background: var(--sft-bg-hover); }
.eab-template-icon { font-size: 16px; }
.eab-template-info { flex: 1; min-width: 0; }
.eab-template-name { font-weight: 600; display: block; }
.eab-template-tier {
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--sft-primary-bg);
    color: var(--sft-primary-text);
    font-weight: 600;
}
/* ── 推奨(単発+固定SL/TP)テンプレ: 緑バッジ + 左境界 ── */
.eab-template-recommended { box-shadow: inset 3px 0 0 #16a34a; }
.eab-template-badge-rec {
    display: inline-block;
    margin-left: 6px;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    background: #15803d;
    color: #fff;
    vertical-align: middle;
}
/* ── ポートフォリオ・テンプレ(複数フロー合成): 🧺バッジ + 左境界(紫) ── */
.eab-template-portfolio { box-shadow: inset 3px 0 0 #7c3aed; }
.eab-template-badge-port {
    display: inline-block;
    margin-left: 6px;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    background: #6d28d9;
    color: #fff;
    vertical-align: middle;
}
.eab-landing-tpl-portfolio { box-shadow: inset 3px 0 0 #7c3aed; }
/* テンプレ実証ベースライン (BT実測値) */
.eab-template-bt {
    display: block;
    margin-top: 3px;
    font-size: 10px;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
}
.eab-template-bt-opt {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    font-weight: 600;
    color: #16a34a;
    font-variant-numeric: tabular-nums;
}
/* ── テンプレ実証ステータス・バッジ (正直かつ前向きな3状態) ── */
.eab-template-study {
    display: inline-block;
    margin-left: 6px;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    color: #fff;
    vertical-align: middle;
}
.eab-tpl-study-opt   { background: #16a34a; }  /* green  = 頑健な勝ち設定あり */
.eab-tpl-study-learn { background: #0d9488; }  /* teal   = 学習/改造ベース */
.eab-tpl-study-weak  { background: #b45309; }  /* amber  = 既定値では弱い */
/* 学習ベースの「使い道」導線 (1行) */
.eab-template-study-line {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    color: #0d9488;
}
/* ランディング一覧のステータス・チップ (pill) */
.eab-landing-tpl-study {
    display: inline-block;
    margin-top: 2px;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 999px;
    color: #fff;
}

/* ── 中央: キャンバス ── */
.eab-canvas-wrap {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: var(--eab-canvas-bg);
    background-image: radial-gradient(var(--eab-canvas-dot) 1px, transparent 1px);
    background-size: 20px 20px;
}
/* 整列(snap)ON中はグリッドを濃く見せて「効いている」ことを可視化 */
.eab-canvas-wrap.eab-snap-on {
    background-image: radial-gradient(color-mix(in srgb, var(--sft-primary) 55%, transparent) 1.2px, transparent 1.2px);
}

#eab-drawflow {
    width: 100%;
    height: 100%;
}

/* Drawflow オーバーライド — マインドマップ風 */
.drawflow .drawflow-node {
    background: var(--eab-node-bg);
    border: 1.5px solid var(--eab-node-border);
    border-radius: 16px;
    box-shadow: var(--eab-node-shadow);
    min-width: auto;
    padding: 0;
    color: var(--sft-text);
    z-index: 2;
    transition: box-shadow 0.15s, border-color 0.15s;
}
.drawflow .drawflow-node:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.drawflow .drawflow-node.selected {
    /* Drawflow vendor sets .selected{background:red} — restate our node bg so
       selection reads as an emerald brand highlight, not an alarm color. */
    background: var(--eab-node-bg);
    border-color: var(--sft-primary);
    box-shadow: 0 0 0 3px var(--sft-primary-bg), 0 4px 16px rgba(0,0,0,0.12);
}

/* ── マインドマップ風ノード内部 ── */
.eab-node-mindmap {
    text-align: center;
    padding: 12px 16px 8px;
    min-width: 80px;
}
.eab-node-icon-lg {
    font-size: 32px;
    display: block;
    margin: 0 auto 4px;
    width: 48px;
    height: 48px;
    line-height: 48px;
    border-radius: 12px;
}
.eab-node-label {
    font-size: 11px;
    font-weight: 600;
    display: block;
    color: var(--sft-text);
    line-height: 1.3;
}
.eab-node-param-main {
    font-size: 10px;
    color: var(--sft-text-muted);
    display: block;
    margin-top: 2px;
}

/* ノード「+」追加ボタン */
.eab-node-add-btn {
    position: absolute;
    right: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--sft-primary);
    background: var(--sft-bg-card);
    color: var(--sft-primary-text);
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s, transform 0.15s;
    padding: 0;
}
.drawflow .drawflow-node:hover .eab-node-add-btn {
    opacity: 1;
}
.eab-node-add-btn:hover {
    background: var(--sft-primary);
    color: var(--sft-on-primary);
    transform: translateY(-50%) scale(1.15);
}

/* ノードカテゴリ別色: 左ボーダー + アイコン背景 */
.eab-node-cat-indicator { border-left: 4px solid var(--eab-cat-indicator) !important; }
.eab-node-cat-indicator .eab-node-icon-lg { background: rgba(245, 158, 11,0.12); }
.eab-node-cat-condition { border-left: 4px solid var(--eab-cat-condition) !important; }
.eab-node-cat-condition .eab-node-icon-lg { background: rgba(139,92,246,0.12); }
.eab-node-cat-action { border-left: 4px solid var(--eab-cat-action) !important; }
.eab-node-cat-action .eab-node-icon-lg { background: rgba(34,197,94,0.12); }
.eab-node-cat-filter { border-left: 4px solid var(--eab-cat-filter) !important; }
.eab-node-cat-filter .eab-node-icon-lg { background: rgba(245,158,11,0.12); }
.eab-node-cat-money { border-left: 4px solid var(--eab-cat-money) !important; }
.eab-node-cat-money .eab-node-icon-lg { background: rgba(6,182,212,0.12); }
.eab-node-cat-exit { border-left: 4px solid var(--eab-cat-exit) !important; }
.eab-node-cat-exit .eab-node-icon-lg { background: rgba(239,68,68,0.12); }
.eab-node-cat-util { border-left: 4px solid var(--eab-cat-util) !important; }
.eab-node-cat-util .eab-node-icon-lg { background: var(--sft-bg-alt); }
.eab-node-cat-price { border-left: 4px solid var(--eab-cat-price) !important; }
.eab-node-cat-price .eab-node-icon-lg { background: rgba(99,102,241,0.12); }

/* 旧カード (label/value の行を並べる形) の CSS は、行を描く実装ごと 2026-08-06 に撤去した。
   `.eab-node-title` / `.eab-node-body` / `.eab-node-param` / `-label` / `-value` は
   repo 全体で CSS 以外に 1 箇所も出現しなかった (実測)。現在のカードは
   `.eab-node-mindmap` + `.eab-node-icon-lg` + `.eab-node-label` + `.eab-node-param-main`。
   `旧ノード構造 (後方互換)` と題した `.eab-node-header` / `.eab-node-icon` も同日に撤去
   (誰も出していなかった = dead-css-gate)。 */

/* ── ノード追加メニュー（+ボタン用） ── */
.eab-add-menu {
    position: absolute;
    z-index: 150;
    background: var(--sft-bg-card);
    border: 1px solid var(--sft-border);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    max-width: 280px;
    min-width: 200px;
    max-height: 400px;
    overflow-y: auto;
    padding: 8px;
    display: none;
}
.eab-add-menu.eab-menu-open { display: block; }
.eab-add-menu::-webkit-scrollbar { width: 4px; }
.eab-add-menu::-webkit-scrollbar-thumb { background: var(--sft-border); border-radius: 2px; }

/* ── 右クリックコンテキストメニュー ── */
.eab-ctx-menu {
    position: fixed;
    z-index: 200;
    background: var(--sft-bg-card);
    border: 1px solid var(--sft-border);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    max-width: 280px;
    min-width: 200px;
    max-height: 400px;
    overflow-y: auto;
    padding: 8px;
    display: none;
}
.eab-ctx-menu.eab-menu-open { display: block; }
.eab-ctx-menu::-webkit-scrollbar { width: 4px; }
.eab-ctx-menu::-webkit-scrollbar-thumb { background: var(--sft-border); border-radius: 2px; }

/* 共通メニュー内部構造 */
.eab-menu-cat-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--sft-text-muted);
    padding: 6px 4px 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.eab-menu-cat-label .eab-cat-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.eab-menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    gap: 4px;
    margin-bottom: 4px;
}
.eab-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 4px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: none;
    cursor: pointer;
    transition: all 0.12s;
    min-height: 56px;
    color: var(--sft-text);
}
.eab-menu-item:hover {
    background: var(--sft-bg-hover);
    border-color: var(--sft-border);
}
.eab-menu-item-icon {
    font-size: 22px;
    line-height: 1;
}
.eab-menu-item-name {
    font-size: 9px;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    max-width: 52px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Drawflow ポート — Input: 白抜き, Output: 塗りつぶし */
.drawflow .drawflow-node .input {
    width: var(--eab-port-size);
    height: var(--eab-port-size);
    background: var(--sft-bg-card);
    border: 2px solid var(--sft-primary);
    border-radius: 50%;
    transition: all 0.15s;
}
.drawflow .drawflow-node .output {
    width: var(--eab-port-size);
    height: var(--eab-port-size);
    background: var(--sft-primary);
    border: 2px solid var(--sft-primary);
    border-radius: 50%;
    transition: all 0.15s;
}
.drawflow .drawflow-node .input:hover {
    background: var(--sft-primary);
    transform: scale(1.3);
}
.drawflow .drawflow-node .output:hover {
    background: var(--sft-primary-dark, var(--sft-primary));
    transform: scale(1.3);
}

/* Drawflow 接続線 — マインドマップ風アニメーション */
.drawflow .connection .main-path {
    stroke: var(--eab-conn-color);
    stroke-width: 2.5px;
    stroke-dasharray: 8 4;
    animation: eabFlowDash 0.6s linear infinite;
}
.drawflow .connection .main-path:hover {
    /* Restate stroke — drawflow vendor sets a steel-blue (#1266ab) hover that
       clashes with the emerald brand. Highlight in brand color instead. */
    stroke: var(--sft-primary);
    stroke-width: 3.5px;
}
@keyframes eabFlowDash {
    to { stroke-dashoffset: -12; }
}

/* Drawflow 削除ボタン */
.drawflow .drawflow-delete {
    display: none;
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    background: var(--sft-error);
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
    z-index: 10;
    border: 2px solid var(--sft-bg-card);
}
.drawflow .drawflow-node:hover .drawflow-delete,
.drawflow .drawflow-node.selected .drawflow-delete {
    display: block;
}

/* キャンバスヒント（空状態）→ ランディングダッシュボード */
.eab-canvas-hint {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    pointer-events: auto;
    z-index: 1;
    background: var(--eab-canvas-bg);
}
.eab-canvas-hint.eab-hidden { display: none; }

/* ── ランディングダッシュボード ── */
.eab-landing {
    max-width: 820px;
    margin: 0 auto;
    padding: 32px 24px 48px;
}

/* ヒーロー */
.eab-landing-hero {
    text-align: center;
    margin-bottom: 32px;
}
.eab-landing-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--sft-text);
    margin: 0 0 8px;
}
.eab-landing-stats {
    font-size: 13px;
    color: var(--sft-text-muted);
    margin: 0 0 20px;
}
.eab-landing-cta {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* セクション共通 */
.eab-landing-section {
    margin-bottom: 28px;
}
.eab-landing-section h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--sft-text);
    margin: 0 0 12px;
}
.eab-landing-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.eab-landing-section-header h3 { margin-bottom: 0; }
.eab-landing-gallery-note { font-size: 13px; line-height: 1.6; color: var(--sft-text-muted, var(--sft-text)); margin: 0 0 12px; }
.eab-landing-tpl-seek {
    display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 600; cursor: pointer;
    color: var(--sft-primary-text); text-decoration: underline; text-underline-offset: 2px;
}

/* フィルタータブ */
.eab-landing-filter {
    display: flex;
    gap: 4px;
    background: var(--sft-bg-alt);
    border: 1px solid var(--sft-border);
    border-radius: 6px;
    padding: 2px;
}
.eab-landing-filter-btn {
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 600;
    border: none;
    background: none;
    color: var(--sft-text-secondary);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s;
}
.eab-landing-filter-btn:hover { background: var(--sft-bg-hover); }
.eab-landing-filter-btn.eab-landing-filter-active {
    background: var(--sft-primary);
    color: var(--sft-on-primary);
}

/* テンプレートグリッド */
.eab-landing-templates {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.eab-landing-tpl-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 10px;
    background: var(--sft-bg-card);
    border: 1px solid var(--sft-border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}
.eab-landing-tpl-card:hover {
    border-color: var(--sft-primary);
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}
.eab-landing-tpl-icon {
    font-size: 28px;
    line-height: 1;
}
.eab-landing-tpl-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--sft-text);
}
.eab-landing-tpl-desc {
    font-size: 11px;
    line-height: 1.4;
    color: var(--sft-text-secondary);
}
.eab-landing-tpl-meta {
    font-size: 10px;
    color: var(--sft-text-secondary);
}

/* ノードカテゴリ参照 */
.eab-landing-categories {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.eab-landing-cat {
    background: var(--sft-bg-card);
    border: 1px solid var(--sft-border);
    border-radius: 10px;
    overflow: hidden;
}
.eab-landing-cat-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--sft-border-light);
    border-left: 3px solid var(--cat-color, var(--sft-primary));
}
.eab-landing-cat-icon { font-size: 16px; }
.eab-landing-cat-label { font-size: 13px; font-weight: 600; color: var(--sft-text); }
.eab-landing-cat-count {
    font-size: 10px; font-weight: 700;
    background: var(--sft-bg-alt); color: var(--sft-text-muted);
    padding: 1px 6px; border-radius: 8px; margin-left: auto;
}
.eab-landing-cat-badge {
    font-size: 9px; font-weight: 700;
    background: var(--sft-primary); color: var(--sft-on-primary);
    padding: 1px 5px; border-radius: 4px;
}
.eab-landing-cat-nodes {
    display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 12px;
}
.eab-landing-node-chip {
    font-size: 11px; color: var(--sft-text-secondary);
    background: var(--sft-bg-alt); padding: 2px 8px; border-radius: 4px;
    white-space: nowrap;
}

/* クイックスタート */
.eab-landing-steps {
    display: flex; align-items: center; justify-content: center;
    gap: 12px; flex-wrap: wrap;
}
.eab-landing-step {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 20px;
    background: var(--sft-bg-card);
    border: 1px solid var(--sft-border);
    border-radius: 10px;
}
.eab-landing-step-num {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: var(--sft-primary); color: var(--sft-on-primary);
    font-size: 13px; font-weight: 700;
    border-radius: 50%;
}
.eab-landing-step-text { font-size: 13px; font-weight: 600; color: var(--sft-text); }
.eab-landing-step-arrow { font-size: 18px; color: var(--sft-text-muted); }

/* ログインバナー */
.eab-landing-login-banner {
    display: flex; align-items: center; justify-content: center;
    gap: 8px; padding: 10px 16px; margin-top: 24px;
    background: var(--sft-primary-alpha, rgba(59,130,246,0.08));
    border: 1px solid var(--sft-primary);
    border-radius: 8px;
    font-size: 12px; color: var(--sft-primary-text);
    font-weight: 500;
}

/* ── パレットカテゴリ カウントバッジ ── */
.eab-cat-count {
    font-size: 10px;
    font-weight: 600;
    color: var(--sft-text-muted);
    background: var(--sft-bg-alt);
    padding: 0 5px;
    border-radius: 8px;
    margin-left: auto;
    line-height: 16px;
}

/* ── プロパティパネル ノードコンテキスト ── */
.eab-prop-context {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--sft-border-light);
}
.eab-prop-context-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    border-radius: 8px;
    flex-shrink: 0;
}
.eab-prop-context-info {
    flex: 1;
    min-width: 0;
}
.eab-prop-context-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--sft-text);
    margin-bottom: 2px;
}
.eab-prop-context-cat {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--sft-primary-bg);
    color: var(--sft-primary-text);
    margin-bottom: 4px;
}
.eab-prop-context-desc {
    font-size: 11px;
    color: var(--sft-text-muted);
    line-height: 1.4;
}

/* ── "..." ドロップダウンメニュー ── */
.eab-more-wrap {
    position: relative;
}
.eab-more-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    min-width: 160px;
    background: var(--sft-bg-card);
    border: 1px solid var(--sft-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    z-index: 200;
    padding: 4px;
    overflow: hidden;
}
.eab-more-menu.eab-more-open {
    display: block;
}
.eab-more-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 500;
    border: none;
    background: none;
    color: var(--sft-text);
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.1s;
    text-align: left;
    /* メニュー項目には button と <a> の両方が居る (姉妹ツールへのリンク)。
       a のブラウザ既定 (下線・青) を消して button と同じ見た目に揃える。 */
    text-decoration: none;
    box-sizing: border-box;
}
.eab-more-item:hover {
    background: var(--sft-bg-hover);
}
.eab-more-item.eab-more-danger {
    color: var(--sft-error, #ef4444);
}
.eab-more-item.eab-more-danger:hover {
    background: rgba(239,68,68,0.08);
}

/* ── テンプレートカード ツールチップ ── */
.eab-template-desc {
    display: none;
    font-size: 10px;
    color: var(--sft-text-secondary);
    line-height: 1.3;
    margin-top: 2px;
}
.eab-template-card:hover .eab-template-desc {
    display: block;
}

/* ── ガイドトースト ── */
.eab-guide-toast {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 80;
    pointer-events: none;
}
.eab-guide-toast-msg {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--sft-primary);
    color: var(--sft-on-primary);
    font-size: 12px;
    font-weight: 500;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    animation: eabGuideIn 0.3s ease-out, eabGuideOut 0.3s ease-in 2.7s forwards;
    white-space: nowrap;
}
@keyframes eabGuideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes eabGuideOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* ── 右パネル: プロパティ ── */
.eab-property {
    width: var(--eab-property-w);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--sft-bg-card);
    border-left: 1px solid var(--sft-border);
    overflow: hidden;
}
.eab-property-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}
.eab-property-body::-webkit-scrollbar { width: 4px; }
.eab-property-body::-webkit-scrollbar-thumb { background: var(--sft-border); border-radius: 2px; }
.eab-property-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
}
.eab-property-empty p {
    font-size: 12px;
    color: var(--sft-text-muted);
}

/* プロパティフォーム */
.eab-prop-group {
    margin-bottom: 12px;
}
.eab-prop-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--sft-text-secondary);
    margin-bottom: 4px;
}
.eab-prop-input,
.eab-prop-select {
    width: 100%;
    box-sizing: border-box; /* padding+border 込みで 100%＝右パネルからはみ出して Tab 移動で横にずれるのを防ぐ */
    padding: 6px 8px;
    font-size: 12px;
    border: 1px solid var(--sft-border);
    border-radius: 5px;
    background: var(--sft-input-bg);
    color: var(--sft-text);
    outline: none;
    transition: border-color 0.2s;
}
.eab-prop-input:focus,
.eab-prop-select:focus {
    border-color: var(--sft-primary);
    background: var(--sft-input-focus-bg);
}
.eab-prop-input[type="number"] {
    -moz-appearance: textfield;
}
.eab-prop-input[type="number"]::-webkit-inner-spin-button,
.eab-prop-input[type="number"]::-webkit-outer-spin-button {
    opacity: 1;
}
.eab-prop-hint {
    font-size: 10px;
    color: var(--sft-text-muted);
    margin-top: 2px;
}

/* ── コードプレビュー ── */
.eab-code-preview {
    border-top: none;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 100px;
    overflow: hidden;
}
.eab-code-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 700;
    color: var(--sft-text-secondary);
    background: var(--sft-bg-alt);
    border-bottom: 1px solid var(--sft-border-light);
}
.eab-code-copy-btn {
    border: none;
    background: none;
    cursor: pointer;
    padding: 2px 6px;
    color: var(--sft-text-secondary);
    border-radius: 4px;
    transition: background .15s;
}
.eab-code-copy-btn:hover {
    background: var(--sft-bg-hover, rgba(0,0,0,.08));
}
/* S2-3b: プレビューがフロー編集で陳腐化した時、更新ボタン (#eab-code-refresh) を強調して
   「押して再生成」を促す (オンデマンド生成の可視化)。 */
#eab-code-refresh.is-stale {
    color: var(--sft-accent, #2d7ef7);
    background: var(--sft-accent-weak, rgba(45,126,247,.12));
}
.eab-code-block {
    flex: 1;
    overflow: auto;
    margin: 0;
    padding: 10px 12px;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 11px;
    line-height: 1.5;
    background: var(--sft-bg-alt);
    color: var(--sft-text);
    tab-size: 4;
    white-space: pre;
    word-break: keep-all;
}
.eab-code-block::-webkit-scrollbar { width: 4px; height: 4px; }
.eab-code-block::-webkit-scrollbar-thumb { background: var(--sft-border); border-radius: 2px; }

/* シンタックスハイライト（軽量版） */
.eab-kw  { color: #d73a49; } /* keyword */
.eab-fn  { color: #6f42c1; } /* function */
.eab-str { color: #22863a; } /* string */
.eab-num { color: #005cc5; } /* number */
.eab-cmt { color: var(--sft-text-muted); font-style: italic; } /* comment */
.eab-pp  { color: #e36209; } /* preprocessor */

[data-sft-theme="dark"] .eab-kw  { color: #ff7b72; }
[data-sft-theme="dark"] .eab-fn  { color: #d2a8ff; }
[data-sft-theme="dark"] .eab-str { color: #7ee787; }
[data-sft-theme="dark"] .eab-num { color: #79c0ff; }
[data-sft-theme="dark"] .eab-pp  { color: #ffa657; }

/* ── モバイルトグルボタン ── */
.eab-mobile-toggle {
    display: none;
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--sft-border);
    background: var(--sft-bg-card);
    color: var(--sft-text);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 50;
    box-shadow: var(--sft-card-shadow);
}
.eab-mobile-palette-btn { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); left: 12px; }
.eab-mobile-prop-btn { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); right: 12px; }

/* ── モバイルボトムシート ── */
.eab-bottomsheet {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 70vh;
    background: var(--sft-bg-card);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.15);
    z-index: 200;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
}
.eab-bottomsheet.eab-bs-open {
    transform: translateY(0);
}
.eab-bottomsheet-handle {
    width: 36px;
    height: 4px;
    background: var(--sft-border);
    border-radius: 2px;
    margin: 8px auto;
    position: relative;
    cursor: grab;
    touch-action: none;
}
/* D-3: 見た目 (36×4) は保ちつつ当たり判定を 44px 相当へ拡大 (スワイプ閉じ対象) */
.eab-bottomsheet-handle::before {
    content: '';
    position: absolute;
    inset: -20px -60px;
}
/* D-3: ドラッグ追随中は開閉アニメを切る (指に吸い付かせる) */
.eab-bottomsheet.eab-bs-dragging { transition: none; }
.eab-bottomsheet-content {
    overflow-y: auto;
    max-height: calc(70vh - 20px);
    /* D-3: ホームバー等と重ならないよう safe-area を確保 */
    padding: 0 12px calc(16px + env(safe-area-inset-bottom, 0px));
}
.eab-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: 199;
}
.eab-overlay.eab-overlay-show { display: block; }

/* ── バリデーションエラー表示 ── */
.drawflow .drawflow-node.eab-node-error {
    border-color: var(--sft-error);
    box-shadow: 0 0 0 3px var(--sft-error-bg);
}

/* ── レスポンシブ ── */
@media (max-width: 1024px) {
    /* Collapse ghost toolbar buttons (Save/Source/Share) to icon-only to save
       width — labels are bare text nodes, so font-size:0 hides them while the
       fixed-px SVG icons stay. Primary "Compile" keeps its label. Tooltips
       (title=) still describe each button. */
    .eab-header-right .eab-btn-ghost { padding: 5px 7px; font-size: 0; }
    .eab-header-right .eab-btn-ghost svg { width: 16px; height: 16px; }
    .eab-palette:not(.eab-palette-collapsed) { width: 180px; }
    .eab-property { width: 260px; }
}

/* Tablet range only: the center "MQL5 · MetaTrader 5" badge gets squeezed
   between the toolbar groups and wraps/overlaps the buttons. Hide it here.
   Mobile (<=768px) shows it on its own full-width row; desktop (>1024px)
   has room — both keep it. */
@media (min-width: 769px) and (max-width: 1024px) {
    .eab-header-center { display: none; }
}

/* Logged-in desktop: the FREE/Upgrade pills, "← Projects" and the post-compile
   status pill make the header ~1551px wide (measured 2026-09-26), so at 1280-1440
   the rightmost buttons (More / help / theme) sat off-screen and unreachable.
   Shed width in two steps: <=1600 hides the centre badge and collapses Save and
   Source to icons (the PRO badge stays); <=1340 also collapses Measure
   (the header needs ~1321px with Measure's label). Tooltips (title=) keep the names. */
@media (min-width: 769px) and (max-width: 1680px) {
    .eab-header-center { display: none; }
    #eab-btn-save-json,
    #eab-btn-generate,
    #eab-btn-download { padding: 5px 7px; font-size: 0; }
    #eab-btn-save-json svg,
    #eab-btn-generate svg,
    #eab-btn-download svg { width: 16px; height: 16px; }
}
@media (min-width: 769px) and (max-width: 1340px) {
    .eab-header-right .eab-btn-ghost { padding: 5px 7px; font-size: 0; }
    .eab-header-right .eab-btn-ghost svg { width: 16px; height: 16px; }
}
/* Once a flow is saved, "Saved ✓ HH:MM" adds another ~106px, and at 1280/1366
   More / help / theme slid under the fixed "← AIStrategyMiner" link again. <=1440 drops
   the editor's text logo (156px) — the fixed link already names the site.
   The first step starts at 1680 (not 1600): with the save indicator the full
   header needs ~1657px, so 1601-1660 overlapped the fixed link. */
@media (min-width: 769px) and (max-width: 1440px) {
    .eab-header-left .eab-logo { display: none; }
}

@media (max-width: 768px) {
    .eab-wrapper { height: 100dvh; }
    .eab-header {
        padding: 0 8px;
        flex-wrap: wrap;
        height: auto;
        min-height: var(--eab-header-h);
    }
    .eab-header-center { order: 3; flex-basis: 100%; justify-content: center; padding: 4px 0; }
    .eab-header-right { gap: 4px; }
    /* ログイン中は左の組に「← Projects」とプロジェクト名が増え、390px では名前が 98px はみ出し、
       「← Projects」は右上に固定した「← AIStrategyMiner」(~96px) の真下に入って押せなかった。
       左の組を 1 行ぶん占有させて折り返し、固定リンクの幅を右に空ける。 */
    .eab-header-left { flex: 1 1 100%; flex-wrap: wrap; row-gap: 6px; min-width: 0; padding: 6px 96px 0 0; }
    #eab-btn-undo,
    #eab-btn-redo { display: none; }
    .eab-landing { padding: 20px 16px; }
    .eab-landing-templates { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .eab-landing-tpl-card { padding: 12px 8px; }
    .eab-landing-categories { grid-template-columns: 1fr; }
    .eab-landing-steps { flex-direction: column; gap: 8px; }
    .eab-landing-step-arrow { display: none; }
    .eab-guide-toast-msg { font-size: 11px; padding: 6px 12px; }

    .eab-palette,
    .eab-property {
        display: none;
    }
    .eab-toggle-palette { display: none; }
    .eab-mobile-toggle { display: flex; width: 44px; height: 44px; }
    .eab-bottomsheet { display: block; }

    /* D-3: シート内の主要タップ対象を 44px 化 (Apple HIG / WCAG 2.5.8) */
    .eab-bottomsheet .eab-palette-item { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
    .eab-bottomsheet .eab-cat-toggle { min-height: 44px; }
    .eab-bottomsheet .eab-template-card { min-height: 44px; }
    .eab-bottomsheet .eab-prop-input,
    .eab-bottomsheet .eab-prop-select { min-height: 44px; }

    .eab-canvas-wrap {
        width: 100%;
    }
    .eab-property-close { display: block; }
    /* 下端は左の Preflight (幅 320px) と取り合い、360px では「全体表示」ボタンが
       その下に入って押せなかった。空いている右上 (上中央の統計の札の下) へ置く。
       ID で指定する: 後ろにある .eab-zoom-controls の基本規則 (bottom:120px) が同じ強さで勝ち、
       以前のここの bottom:80px は効いていなかった。 */
    #eab-zoom-controls { top: 44px; bottom: auto; right: 10px; }
    /* Preflight (bottom:56px) が左下の「パレット」(ノードを足す) と、360px では右下の
       「プロパティ」ボタン (どちらも bottom:70px・高さ 44px) の上に重なり、押せなかった。
       スマホではボタン列の上に置き、左右いっぱいに広げる。 */
    #eab-risk-panel { bottom: calc(126px + env(safe-area-inset-bottom, 0px)); left: 12px; right: 12px; width: auto; max-height: 32vh; }
    .eab-node-count { top: 8px; right: 10px; }
    .eab-validation-bar { bottom: 120px; max-width: calc(100vw - 24px); white-space: normal; }
    .eab-onboard-tooltip { width: 260px; }
}

@media (max-width: 480px) {
    .eab-header-right .eab-btn:not(.eab-btn-primary):not(.eab-theme-btn) { display: none; }
    .eab-landing-templates { grid-template-columns: 1fr; }
    .eab-landing-tpl-card { flex-direction: row; padding: 10px 12px; text-align: left; }
}

/* ── ズームコントロール ── */
.eab-zoom-controls {
    position: absolute;
    /* Sit above the 100px-tall minimap (bottom:12) instead of overlapping it
       in the same bottom-right corner. */
    bottom: 120px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--sft-bg-card);
    border: 1px solid var(--sft-border);
    border-radius: 8px;
    padding: 3px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 50;
}
.eab-zoom-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    color: var(--sft-text);
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.15s;
}
.eab-zoom-btn:hover { background: var(--sft-bg-hover); }
.eab-zoom-level {
    font-size: 11px;
    font-weight: 600;
    min-width: 40px;
    text-align: center;
    color: var(--sft-text-secondary);
    user-select: none;
}

/* ── ノードカウント ── */
.eab-node-count {
    position: absolute;
    top: 12px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    background: var(--sft-bg-card);
    border: 1px solid var(--sft-border);
    border-radius: 6px;
    color: var(--sft-text-secondary);
    z-index: 50;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.eab-node-count.eab-count-warn {
    border-color: var(--eab-cat-filter);
    color: var(--eab-cat-filter);
    background: rgba(245,158,11,0.08);
}
.eab-node-count.eab-count-danger {
    border-color: var(--eab-cat-exit);
    color: var(--eab-cat-exit);
    background: rgba(239,68,68,0.08);
}

/* ── バリデーション ── */
.drawflow .drawflow-node .input.eab-port-error,
.drawflow .drawflow-node .output.eab-port-error {
    border-color: var(--sft-error);
    box-shadow: 0 0 0 3px rgba(239,68,68,0.25);
    animation: eabPortPulse 1.5s ease-in-out infinite;
}
@keyframes eabPortPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(239,68,68,0.25); }
    50% { box-shadow: 0 0 0 5px rgba(239,68,68,0.15); }
}
.eab-validation-bar {
    position: absolute;
    bottom: 56px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(194,65,12,0.95);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    z-index: 100;
    white-space: nowrap;
    backdrop-filter: blur(4px);
}
.eab-validation-close {
    border: none;
    background: none;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    padding: 0 2px;
    opacity: 0.8;
}
.eab-validation-close:hover { opacity: 1; }

/* ── 危険構成の常設パネル ── */
.eab-risk-panel {
    position: absolute;
    bottom: 56px;
    left: 16px;
    width: 320px;
    max-height: 40vh;
    display: flex;
    flex-direction: column;
    background: var(--sft-bg-card, #fff);
    border: 1px solid var(--sft-border, #e5e7eb);
    border-radius: var(--sft-radius-md, 8px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    z-index: 99;
    overflow: hidden;
}
.eab-risk-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    border-bottom: 1px solid var(--sft-border, #e5e7eb);
    background: var(--sft-bg-alt, #f9fafb);
}
.eab-risk-title { flex: 1; }
.eab-risk-toggle {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: var(--sft-text-muted, #6b7280);
    font-size: 12px;
    line-height: 1;
    padding: 2px 6px;
    cursor: pointer;
    border-radius: 4px;
}
.eab-risk-toggle:hover { background: var(--sft-bg-hover, #f3f4f6); color: var(--sft-text, #1f2937); }
/* 折りたたみ時はタイトル (件数入り) だけ残す */
.eab-risk-panel.eab-risk-collapsed .eab-risk-summary,
.eab-risk-panel.eab-risk-collapsed .eab-risk-list { display: none; }
.eab-risk-panel.eab-risk-collapsed .eab-risk-head { border-bottom: none; }
.eab-risk-list {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-y: auto;
}
.eab-risk-item {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 8px 12px;
    font-size: 11px;
    line-height: 1.4;
    cursor: pointer;
    border-left: 3px solid transparent;
    border-bottom: 1px solid var(--sft-border-light, #f0f0f0);
}
.eab-risk-item:hover { background: var(--sft-bg-hover, #f3f4f6); }
.eab-risk-item.eab-risk-crit { border-left-color: var(--sft-error, #dc2626); }
.eab-risk-item.eab-risk-warn { border-left-color: #f59e0b; }
.eab-risk-item.eab-risk-info { border-left-color: #2563eb; }
.eab-risk-badge {
    flex: 0 0 auto;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 1px 5px;
    border-radius: 3px;
    color: #fff;
    white-space: nowrap;
}
/* crit=固定#dc2626に白(5.2:1) / warn=アンバーに濃文字(10:1) / info=青に白(AA達成) */
.eab-risk-crit .eab-risk-badge { background: #dc2626; color: #fff; }
.eab-risk-warn .eab-risk-badge { background: #f59e0b; color: #1c1205; }
.eab-risk-info .eab-risk-badge { background: #2563eb; color: #fff; }
.eab-risk-msg { flex: 1; }

/* warn/info 折りたたみグループ (既定は error のみ目立たせる — roadmap L1 規律) */
.eab-risk-more { border-bottom: 1px solid var(--sft-border-light, #f0f0f0); }
.eab-risk-more summary {
    padding: 7px 12px;
    font-size: 11px;
    color: var(--sft-text-muted, #6b7280);
    cursor: pointer;
    user-select: none;
}
.eab-risk-more summary:hover { background: var(--sft-bg-hover, #f3f4f6); }
.eab-risk-sublist {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* error 項目のあるノードの常時ハイライト (診断が消えるまで維持) */
.drawflow .drawflow-node.eab-node-diag-error {
    outline: 2px solid var(--sft-error, #dc2626);
    outline-offset: 3px;
    border-radius: var(--eab-node-radius, 8px);
}

/* 「このEAがやること」平易サマリ (診断パネル上部・情報色) */
.eab-risk-summary {
    padding: 8px 12px;
    font-size: 11px;
    line-height: 1.5;
    border-bottom: 1px solid var(--sft-border, #e5e7eb);
    background: var(--sft-bg-alt, #f9fafb);
}
.eab-risk-summary-title {
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sft-text-muted, #6b7280);
    margin-bottom: 4px;
}
.eab-risk-summary-line { color: var(--sft-text, #1f2937); }

/* ── オンボーディング ── */
.eab-onboard-overlay {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: rgba(0,0,0,0.5);
    transition: opacity 0.3s;
}
.eab-onboard-spotlight {
    position: absolute;
    border-radius: 8px;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.5);
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}
.eab-onboard-tooltip {
    position: absolute;
    width: 300px;
    padding: 16px;
    background: var(--sft-bg-card);
    border: 1px solid var(--sft-border);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    color: var(--sft-text);
    z-index: 501;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.eab-onboard-step {
    font-size: 10px;
    font-weight: 700;
    color: var(--sft-primary-text);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}
.eab-onboard-title {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--sft-text);
}
.eab-onboard-desc {
    font-size: 12px;
    line-height: 1.6;
    color: var(--sft-text-secondary);
    margin: 0 0 12px;
}
.eab-onboard-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.eab-onboard-dots {
    display: flex;
    gap: 5px;
}
.eab-onboard-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sft-border);
    transition: all 0.2s;
}
.eab-onboard-dot.eab-dot-active {
    background: var(--sft-primary);
    width: 16px;
    border-radius: 4px;
}
.eab-onboard-btns {
    display: flex;
    gap: 6px;
}

/* ── 道A: 自動再生 UI（カーソル / 進捗バー / 再生コントロール） ── */
/* ダミーカーソル: 対象へ滑らかに移動して「操作されている」感を出す */
.eab-onboard-cursor {
    position: fixed;
    z-index: 502;
    width: 20px;
    height: 20px;
    margin: -2px 0 0 -2px;
    pointer-events: none;
    transition: top 0.7s cubic-bezier(0.22, 1, 0.36, 1), left 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    /* 白フチ付きの矢印カーソル（SVG data-uri） */
    background: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'><path d='M4 2 L4 20 L9 15 L12.5 22 L15.5 20.5 L12 14 L19 14 Z' fill='%23111' stroke='%23fff' stroke-width='1.4' stroke-linejoin='round'/></svg>");
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
/* クリック風のパルス（対象到達を強調） */
.eab-onboard-cursor::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--sft-primary, #3b82f6);
    opacity: 0;
    transform: scale(0.4);
    animation: eabCursorPulse 1.6s ease-out infinite;
}
@keyframes eabCursorPulse {
    0% { opacity: 0.5; transform: scale(0.4); }
    70% { opacity: 0; transform: scale(2.4); }
    100% { opacity: 0; transform: scale(2.4); }
}
/* 自動進行の進捗バー（現ステップの残り時間を可視化＝「再生バー」） */
.eab-onboard-progress {
    height: 3px;
    border-radius: 3px;
    background: var(--sft-border);
    overflow: hidden;
    margin: 0 0 12px;
}
.eab-onboard-progress-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 3px;
    background: var(--sft-primary);
    transition: width 0.12s linear;
}
.eab-onboard-playback {
    display: flex;
    align-items: center;
    gap: 8px;
}
.eab-onboard-playbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    font-size: 12px;
    line-height: 1;
    border: 1px solid var(--sft-border);
    border-radius: 6px;
    background: var(--sft-bg-card);
    color: var(--sft-text);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.eab-onboard-playbtn:hover {
    border-color: var(--sft-primary);
    color: var(--sft-primary-text);
}
/* 一時停止中は進捗バーのアニメを止め、少し淡く見せる */
.eab-onboard-paused .eab-onboard-progress-fill {
    opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {
    .eab-onboard-cursor { transition: none; }
    .eab-onboard-cursor::after { animation: none; }
    .eab-onboard-progress-fill { transition: none; }
}

/* ── アニメーション ── */
@keyframes eabNodeAppear {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}
.drawflow .drawflow-node {
    animation: eabNodeAppear 0.2s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .drawflow .drawflow-node { animation: none; }
    .eab-bottomsheet { transition: none; }
}

/* ══════════════════════════════════════════
   Phase 6: コードタブ & Diffビュー
   ══════════════════════════════════════════ */
.eab-code-tabs {
    display: flex;
    gap: 2px;
}
.eab-code-tab {
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    border: none;
    background: none;
    color: var(--sft-text-muted);
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
}
.eab-code-tab:hover {
    background: var(--sft-bg-hover);
    color: var(--sft-text);
}
.eab-code-tab.eab-tab-active {
    background: var(--sft-primary, #3b82f6);
    color: var(--sft-on-primary);
}

/* ══════════════════════════════════════════
   Phase 6: ショートカットオーバーレイ
   ══════════════════════════════════════════ */
.eab-shortcut-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}
.eab-shortcut-overlay.eab-hidden {
    display: none;
}
.eab-shortcut-modal {
    background: var(--sft-bg-card);
    border: 1px solid var(--sft-border);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    width: 360px;
    max-width: 90vw;
    overflow: hidden;
}
.eab-shortcut-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--sft-border-light);
}
.eab-shortcut-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
}
.eab-shortcut-header button {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--sft-text-muted);
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.eab-shortcut-body {
    padding: 12px 18px 18px;
}
.eab-shortcut-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
    color: var(--sft-text);
}
.eab-shortcut-row kbd {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-family: "SFMono-Regular", Consolas, monospace;
    background: var(--sft-bg-alt);
    border: 1px solid var(--sft-border);
    border-radius: 4px;
    color: var(--sft-text-secondary);
    min-width: 60px;
    text-align: center;
}

/* ══════════════════════════════════════════
   Submit-to-pool modal (submit-ea pipeline slice ②b)
   ══════════════════════════════════════════ */
.eab-submit-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.eab-submit-overlay.eab-hidden { display: none; }
.eab-submit-modal {
    background: var(--sft-bg-card);
    border: 1px solid var(--sft-border);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    width: 440px;
    max-width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.eab-submit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--sft-border-light);
}
.eab-submit-header h3 { margin: 0; font-size: 14px; font-weight: 700; }
.eab-submit-header button {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--sft-text-muted);
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.eab-submit-body { padding: 16px 18px; overflow-y: auto; }
.eab-submit-intro {
    margin: 0 0 14px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--sft-text-secondary);
}
.eab-submit-intro code {
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 11px;
    background: var(--sft-bg-alt);
    padding: 1px 4px;
    border-radius: 3px;
}
.eab-submit-field { display: block; margin-bottom: 12px; }
.eab-submit-field > span {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--sft-text);
    margin-bottom: 5px;
}
.eab-submit-field em { color: #e11d48; font-style: normal; }
.eab-submit-field input,
.eab-submit-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    font-size: 13px;
    font-family: inherit;
    color: var(--sft-text);
    background: var(--sft-bg-alt);
    border: 1px solid var(--sft-border);
    border-radius: 6px;
    resize: vertical;
}
.eab-submit-field input:focus,
.eab-submit-field textarea:focus {
    outline: none;
    border-color: var(--sft-primary);
    box-shadow: 0 0 0 2px rgba(37,99,235,0.15);
}

/* ── 強さを測定（概算）モーダル ── */
.eab-submit-field select {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    font-size: 13px;
    font-family: inherit;
    color: var(--sft-text);
    background: var(--sft-bg-alt);
    border: 1px solid var(--sft-border);
    border-radius: 6px;
}
.eab-submit-field select:focus {
    outline: none;
    border-color: var(--sft-primary);
    box-shadow: 0 0 0 2px rgba(37,99,235,0.15);
}
.eab-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.eab-measure-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 4px 0 12px;
}
.eab-measure-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 10px 6px;
    background: var(--sft-bg-alt);
    border: 1px solid var(--sft-border);
    border-radius: 8px;
}
.eab-measure-k { font-size: 11px; color: var(--sft-text-secondary); letter-spacing: .3px; }
.eab-measure-v { font-size: 18px; font-weight: 700; color: var(--sft-text); }
.eab-measure-note {
    font-size: 12px;
    line-height: 1.6;
    color: var(--sft-text-secondary);
    margin: 6px 0 0;
}
/* E5xx エラー表示 (何が起きた/何をすれば/コード の3点セット) — 注記より一段強く */
.eab-measure-err {
    color: #e11d48;
    background: rgba(225,29,72,0.08);
    border: 1px solid rgba(225,29,72,0.25);
    border-radius: 8px;
    padding: 8px 12px;
}
/* 部分結果 (n/m 測定) — 完了と誤読させない注意帯 */
.eab-mx-partial {
    color: #f59e0b;
    background: rgba(245,158,11,0.08);
    border: 1px solid rgba(245,158,11,0.25);
    border-radius: 8px;
    padding: 8px 12px;
}
/* 一部のノードだけ概算のセル — 行の印とその説明 (数字は出るが正確ではない) */
.eab-mx-apx {
    color: var(--sft-text-secondary);
    font-size: 0.85em;
    white-space: nowrap;
}
.eab-mx-apx-note { color: var(--sft-text-secondary); }
.eab-measure-chip {
    display: inline-block;
    margin: 2px 3px 0 0;
    padding: 1px 7px;
    font-size: 11px;
    border-radius: 999px;
    background: rgba(225,29,72,0.10);
    color: #e11d48;
    border: 1px solid rgba(225,29,72,0.25);
}
.eab-measure-disclaimer {
    font-size: 11px;
    color: var(--sft-text-secondary);
    margin: 8px 0 0;
    padding-top: 8px;
    border-top: 1px dashed var(--sft-border);
}
.eab-measure-cards-6 { grid-template-columns: repeat(3, 1fr); }
.eab-measure-v-bad { color: #e11d48; }
/* 強さスコア ヘッダ */
.eab-measure-score { margin: 2px 0 12px; }
.eab-measure-score-top { display: flex; align-items: baseline; gap: 6px; }
.eab-measure-score-n { font-size: 34px; font-weight: 800; line-height: 1; }
.eab-measure-score-max { font-size: 13px; color: var(--sft-text-secondary); }
.eab-measure-score-lbl { margin-left: auto; font-size: 14px; font-weight: 700; }
.eab-measure-score-bar {
    margin-top: 8px; height: 8px; border-radius: 999px;
    background: var(--sft-bg-alt); border: 1px solid var(--sft-border); overflow: hidden;
}
.eab-measure-score-fill { height: 100%; border-radius: 999px; transition: width .3s ease; }
.eab-measure-badges { margin-top: 8px; }
.eab-measure-warn {
    display: inline-block; padding: 3px 10px; font-size: 12px; font-weight: 600;
    border-radius: 999px; background: rgba(225,29,72,0.10); color: #e11d48;
    border: 1px solid rgba(225,29,72,0.25);
}
.eab-measure-ok {
    display: inline-block; padding: 3px 10px; font-size: 12px; font-weight: 600;
    border-radius: 999px; background: rgba(16,185,129,0.10); color: #059669;
    border: 1px solid rgba(16,185,129,0.25);
}
/* セクション（資産曲線・月次ヒート） */
.eab-measure-sec { margin: 14px 0 0; }
.eab-measure-sec-t {
    font-size: 12px; font-weight: 700; color: var(--sft-text-secondary);
    letter-spacing: .3px; margin-bottom: 6px;
}
.eab-measure-equity {
    width: 100%; height: 140px; display: block;
    background: var(--sft-bg-alt); border: 1px solid var(--sft-border); border-radius: 8px;
}
/* 月次ヒートマップ */
.eab-measure-heat { display: flex; flex-direction: column; gap: 3px; overflow-x: auto; }
.eab-heat-row { display: flex; gap: 3px; align-items: center; }
.eab-heat-y { flex: 0 0 34px; font-size: 10px; color: var(--sft-text-secondary); text-align: right; padding-right: 4px; }
.eab-heat-h { flex: 1 1 0; min-width: 14px; font-size: 9px; color: var(--sft-text-secondary); text-align: center; }
.eab-heat-c { flex: 1 1 0; min-width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--sft-border); }
.eab-heat-e { background: var(--sft-bg-alt); }
/* 頑健性マトリクス テーブル */
.eab-mx { width: 100%; border-collapse: collapse; font-size: 12px; }
.eab-mx th, .eab-mx td { padding: 5px 8px; text-align: right; border-bottom: 1px solid var(--sft-border); }
.eab-mx th:first-child, .eab-mx td:first-child { text-align: left; }
.eab-mx th { color: var(--sft-text-secondary); font-weight: 600; font-size: 11px; }
.eab-mx-dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; margin-right: 6px; vertical-align: middle; }
.eab-mx-na { color: var(--sft-text-secondary); text-align: center; }
.eab-mx-fwd { font-weight: 700; }
/* ── 合否バッジ (合格判定レイヤ・gate_built 準拠) ── */
.eab-measure-verdict {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--sft-border);
    margin: 2px 0 6px;
}
.eab-mv-label {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .5px;
    white-space: nowrap;
}
.eab-mv-reason { font-size: 12px; color: var(--sft-text-secondary); line-height: 1.5; }
.eab-mv-pass    { background: rgba(16,185,129,0.10); border-color: rgba(16,185,129,0.35); }
.eab-mv-pass    .eab-mv-label { color: #059669; }
.eab-mv-fail    { background: rgba(225,29,72,0.10); border-color: rgba(225,29,72,0.30); }
.eab-mv-fail    .eab-mv-label { color: #e11d48; }
.eab-mv-thin    { background: rgba(217,119,6,0.10); border-color: rgba(217,119,6,0.30); }
.eab-mv-thin    .eab-mv-label { color: #d97706; }
.eab-mv-unfired { background: var(--sft-bg-alt); }
.eab-mv-unfired .eab-mv-label { color: var(--sft-text-secondary); }
.eab-measure-crit {
    font-size: 11px;
    color: var(--sft-text-secondary);
    margin: 0 0 8px;
}
@media (max-width: 480px) {
    .eab-measure-cards { grid-template-columns: repeat(2, 1fr); }
    .eab-measure-cards-6 { grid-template-columns: repeat(2, 1fr); }
}
.eab-submit-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--sft-border-light);
}

/* ── 戦略生成器 (Generate) モーダル ── */
.eab-gen-modal { width: 640px; }
.eab-gen-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 12px; }
.eab-gen-fams { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; }
.eab-gen-fams label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.eab-gen-fams b { font-weight: 500; }
.eab-gen-fams input { width: auto; }
.eab-gen-history { margin: 4px 0 10px; display: flex; flex-direction: column; gap: 4px; }
.eab-gen-hist-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.eab-gen-hist-row { text-align: left; font-size: 12px; }
.eab-gen-hist-clear { font-size: 12px; }
.eab-gen-progress { margin: 4px 0 10px; }
.eab-gen-fill { width: 0; background: var(--sft-primary); }
.eab-gen-card {
    border: 1px solid var(--sft-border);
    border-radius: 8px;
    padding: 10px 12px;
    margin: 0 0 10px;
    background: var(--sft-bg-alt);
}
.eab-gen-card-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.eab-gen-card-top .eab-gen-open { margin-left: auto; }
.eab-gen-sltp { font-size: 11px; color: var(--sft-text-secondary); }
.eab-gen-conds { margin: 6px 0; padding-left: 18px; font-size: 12.5px; line-height: 1.6; }
.eab-gen-tbl { margin: 4px 0 6px; }
.eab-gen-rob { font-size: 11px; }
.eab-gen-chip {
    display: inline-block;
    margin: 2px 3px 0 0;
    padding: 1px 7px;
    font-size: 11px;
    border-radius: 999px;
    border: 1px solid var(--sft-border);
}
.eab-gen-chip-ok { background: rgba(16,185,129,0.10); color: #059669; border-color: rgba(16,185,129,0.25); }
.eab-gen-chip-ng { background: rgba(225,29,72,0.10); color: #e11d48; border-color: rgba(225,29,72,0.25); }
.eab-gen-demo-note, .eab-gen-demo-lock { line-height: 1.6; }
.eab-gen-demo-cta { color: var(--sft-primary); font-weight: 600; text-decoration: underline; }
.eab-gen-stages td:not(:first-child), .eab-gen-stages th:not(:first-child) { text-align: right; }
.eab-gen-acct { margin: 0 0 12px; border: 1px solid var(--sft-border); border-radius: 8px; padding: 0 12px; }
.eab-gen-acct > summary { cursor: pointer; font-size: 13px; font-weight: 600; padding: 10px 0; }
.eab-gen-acct-body { padding-bottom: 4px; }
.eab-gen-acct-on { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 13px; cursor: pointer; }
.eab-gen-acct-on input { width: auto; }
.eab-gen-acct-hint { color: var(--sft-text-secondary); font-style: normal; font-size: 11px; }
.eab-gen-acct-off { opacity: 0.55; }
.eab-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Prop check (候補カードの区画・Pro だけ) */
.eab-gen-prop { margin-top: 8px; }
.eab-gen-prop-btn { font-size: 12px; }
.eab-gen-prop-panel { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--sft-border); min-width: 0; }
.eab-gen-prop-ctl { display: grid; grid-template-columns: 2fr 1fr; gap: 0 12px; }
.eab-gen-prop-ctl select { width: 100%; min-width: 0; }
.eab-gen-prop-excl { overflow-wrap: anywhere; }
.eab-gen-prop-excl a, .eab-gen-prop-srcs a { color: var(--sft-primary-text); text-decoration: underline; }
.eab-gen-prop-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 8px 0 4px; font-size: 13px; }
.eab-gen-prop-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px; margin: 6px 0; }
.eab-gen-prop-kpi { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; background: var(--sft-bg); border: 1px solid var(--sft-border); border-radius: 8px; min-width: 0; }
.eab-gen-prop-kpi b { font-size: 18px; color: var(--sft-text); }
.eab-gen-prop-kpi-main { border-color: var(--sft-primary); }
.eab-gen-prop-tbl, .eab-gen-prop-metrics { width: 100%; }
.eab-gen-prop-tbl td:not(:first-child), .eab-gen-prop-tbl th:not(:first-child) { text-align: right; }
.eab-gen-prop-metrics { table-layout: fixed; }
.eab-gen-prop-metrics caption { text-align: left; font-size: 11px; color: var(--sft-text-secondary); padding: 2px 0; }
.eab-gen-prop-metrics td { overflow-wrap: anywhere; vertical-align: top; }
.eab-gen-prop-metrics td:first-child { width: 48%; color: var(--sft-text-secondary); }
.eab-gen-prop-why { margin: 8px 0; }
.eab-gen-prop-band { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--sft-bg); border: 1px solid var(--sft-border); margin: 4px 0; }
.eab-gen-prop-seg { display: block; height: 100%; }
.eab-gen-prop-leg { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 12px; }
.eab-gen-prop-sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.eab-gen-prop-seg-daily { background: var(--eab-cat-exit); }
.eab-gen-prop-seg-max { background: var(--eab-cat-filter); }
.eab-gen-prop-seg-time { background: var(--eab-cat-condition); }
.eab-gen-prop-seg-consistency { background: var(--eab-cat-money); }
.eab-gen-prop-seg-mindays { background: var(--eab-cat-price); }
.eab-gen-prop-seg-profitdays { background: var(--eab-cat-action); }
.eab-gen-prop-seg-weekend { background: var(--eab-cat-indicator); }
.eab-gen-prop-seg-cutoff { background: var(--eab-cat-util); }
.eab-gen-prop-risk { font-size: 13px; margin: 8px 0 4px; line-height: 1.6; }
.eab-gen-prop-ass, .eab-gen-prop-srcs { margin: 8px 0; font-size: 12px; }
.eab-gen-prop-ass ul, .eab-gen-prop-srcs ul { margin: 4px 0 0; padding-left: 18px; line-height: 1.6; color: var(--sft-text-secondary); }
.eab-gen-prop-srcs li { overflow-wrap: anywhere; }
@media (max-width: 480px) {
    .eab-gen-prop-ctl { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .eab-gen-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════
   Phase 7: バリデーション → ノードスクロール
   ══════════════════════════════════════════ */
.eab-validation-bar {
    cursor: default;
}
.eab-validation-list {
    max-height: 120px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}
.eab-validation-item {
    padding: 3px 8px;
    font-size: 12px;
    cursor: pointer;
    border-radius: 3px;
    transition: background 0.15s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.eab-validation-item:hover {
    background: rgba(255, 255, 255, 0.15);
}
.eab-validation-item-icon {
    font-size: 10px;
    opacity: 0.7;
}
@keyframes eabNodeHighlight {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 180, 0, 0); }
    50% { box-shadow: 0 0 0 6px rgba(255, 180, 0, 0.5); }
}
.eab-node-highlight {
    animation: eabNodeHighlight 0.6s ease-in-out 3;
}

/* ══════════════════════════════════════════
   Phase 7: ドラッグオーバーフィードバック
   ══════════════════════════════════════════ */
.eab-drag-over {
    outline: 2px dashed var(--sft-primary, #3b82f6);
    outline-offset: -4px;
}

/* ══════════════════════════════════════════
   説明ガイドセクション
   ══════════════════════════════════════════ */
.eab-guide {
    max-width: 960px;
    margin: 0 auto;
    padding: 48px 24px 64px;
    color: var(--sft-text);
    line-height: 1.7;
}
.eab-guide-hero {
    text-align: center;
    margin-bottom: 48px;
}
.eab-guide-hero h2 {
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 12px;
    letter-spacing: -0.02em;
}
.eab-guide-lead {
    font-size: 16px;
    color: var(--sft-text-secondary);
    margin: 0;
}

/* ── Section ── */
.eab-guide-section {
    margin-bottom: 48px;
}
.eab-guide-section h3 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--sft-primary, #3b82f6);
    display: inline-block;
}
.eab-guide-section > p {
    color: var(--sft-text-secondary);
    margin: 0 0 20px;
    font-size: 14px;
}

/* ── 3 Steps ── */
.eab-guide-steps {
    display: flex;
    gap: 24px;
}
.eab-guide-step {
    flex: 1;
    display: flex;
    gap: 14px;
    padding: 20px;
    background: var(--sft-bg-card);
    border: 1px solid var(--sft-border-light);
    border-radius: 12px;
    transition: box-shadow 0.2s;
}
.eab-guide-step:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.eab-guide-step-num {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--sft-primary, #3b82f6);
    color: var(--sft-on-primary);
    font-size: 16px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}
.eab-guide-step-body h4 {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 6px;
}
.eab-guide-step-body p {
    font-size: 13px;
    color: var(--sft-text-secondary);
    margin: 0;
}

/* ── Node category cards ── */
.eab-guide-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.eab-guide-card {
    padding: 20px;
    background: var(--sft-bg-card);
    border: 1px solid var(--sft-border-light);
    border-radius: 12px;
    border-left: 4px solid var(--card-color, var(--sft-primary));
    transition: box-shadow 0.2s, transform 0.2s;
}
.eab-guide-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}
.eab-guide-card-icon {
    font-size: 28px;
    margin-bottom: 8px;
}
.eab-guide-card h4 {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 6px;
}
.eab-guide-card p {
    font-size: 12px;
    color: var(--sft-text-secondary);
    margin: 0;
    line-height: 1.6;
}

/* ── Template chips ── */
.eab-guide-template-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.eab-guide-chip {
    display: inline-block;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    border: 1px solid var(--sft-border);
    background: var(--sft-bg-card);
}
/* tier 色は枠線で表現し、文字は themed text に。
   単色では白地/暗地のどちらかで必ず AA 未達になるため(数学的に両立不可) */
.eab-guide-chip-basic { border-color: #3b82f6; }
.eab-guide-chip-mid   { border-color: #8b5cf6; }
.eab-guide-chip-adv   { border-color: #f59e0b; }

/* ── MQL Compare ── */
.eab-guide-compare {
    display: flex;
    gap: 16px;
    margin-top: 16px;
}
.eab-guide-compare-col {
    flex: 1;
    padding: 20px;
    background: var(--sft-bg-card);
    border: 1px solid var(--sft-border-light);
    border-radius: 12px;
}
.eab-guide-compare-col h5 {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 10px;
}
.eab-guide-compare-col ul {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    color: var(--sft-text-secondary);
}
.eab-guide-compare-col li {
    margin-bottom: 4px;
}

/* ── FAQ ── */
.eab-guide-faq {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.eab-guide-faq-item {
    background: var(--sft-bg-card);
    border: 1px solid var(--sft-border-light);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.2s;
}
.eab-guide-faq-item[open] {
    border-color: var(--sft-primary, #3b82f6);
}
.eab-guide-faq-item summary {
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
}
.eab-guide-faq-item summary::-webkit-details-marker { display: none; }
.eab-guide-faq-item summary::before {
    content: '+';
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--sft-bg-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--sft-text-muted);
    transition: background 0.2s, color 0.2s, transform 0.2s;
}
.eab-guide-faq-item[open] summary::before {
    content: '−';
    background: var(--sft-primary, #3b82f6);
    color: var(--sft-on-primary);
}
.eab-guide-faq-item p {
    padding: 0 18px 16px 50px;
    margin: 0;
    font-size: 13px;
    color: var(--sft-text-secondary);
    line-height: 1.7;
}

/* ── Tips ── */
.eab-guide-tips {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.eab-guide-tip {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: var(--sft-bg-card);
    border: 1px solid var(--sft-border-light);
    border-radius: 8px;
    font-size: 13px;
}
.eab-guide-tip kbd {
    display: inline-block;
    padding: 3px 10px;
    font-size: 11px;
    font-family: "SFMono-Regular", Consolas, monospace;
    background: var(--sft-bg-alt);
    border: 1px solid var(--sft-border);
    border-radius: 4px;
    color: var(--sft-text-secondary);
    white-space: nowrap;
    min-width: 80px;
    text-align: center;
}
.eab-guide-tip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    font-size: 14px;
    font-weight: 700;
    color: var(--sft-primary-text, #3b82f6);
}

/* ═══════════════════════════════════════════
   Phase A: ヘルプパネル（スライドアウト）
   ═══════════════════════════════════════════ */
.eab-help-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 360px;
    height: 100vh;
    background: var(--sft-bg-card);
    border-left: 1px solid var(--sft-border);
    box-shadow: -4px 0 24px rgba(0,0,0,0.15);
    z-index: 500;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    /* 閉じている間は画面外にあるだけなので visibility でも隠す＝中のボタンに Tab で入れない。
       閉じるアニメ (0.3s) が終わってから hidden にする。 */
    visibility: hidden;
    transition: transform 0.3s ease, visibility 0s linear 0.3s;
}
.eab-help-panel.eab-help-open { transform: translateX(0); visibility: visible; transition: transform 0.3s ease, visibility 0s; }
.eab-help-panel.eab-hidden { display: flex !important; transform: translateX(100%); }
.eab-help-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: 499;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}
.eab-help-backdrop.eab-backdrop-show {
    opacity: 1;
    pointer-events: auto;
}
.eab-help-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--sft-border);
    flex-shrink: 0;
}
.eab-help-header h3 { margin: 0; font-size: 15px; font-weight: 700; }
.eab-help-close {
    width: 28px; height: 28px;
    border: none; background: none;
    font-size: 20px; color: var(--sft-text-muted);
    cursor: pointer; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
}
.eab-help-close:hover { background: var(--sft-bg-hover); }
.eab-help-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}
.eab-help-body::-webkit-scrollbar { width: 4px; }
.eab-help-body::-webkit-scrollbar-thumb { background: var(--sft-border); border-radius: 2px; }

/* Help sections (accordion) */
.eab-help-section { border-bottom: 1px solid var(--sft-border-light); }
.eab-help-section-toggle {
    display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 12px 16px;
    border: none; background: none;
    font-size: 13px; font-weight: 600;
    color: var(--sft-text); cursor: pointer;
    transition: background 0.15s;
}
.eab-help-section-toggle:hover { background: var(--sft-bg-hover); }
.eab-help-arrow {
    margin-left: auto; font-size: 10px;
    transition: transform 0.2s;
}
.eab-help-section:not(.eab-help-open) .eab-help-section-body { display: none; }
.eab-help-section:not(.eab-help-open) .eab-help-arrow { transform: rotate(-90deg); }
.eab-help-section-body { padding: 0 16px 12px; }

/* Quick start steps */
.eab-help-steps {
    padding: 0 0 0 18px; margin: 0;
    font-size: 12px; line-height: 1.8;
    color: var(--sft-text-secondary);
}
.eab-help-steps li { padding: 2px 0; }

/* Node reference in help */
.eab-help-noderef-cat {
    margin-bottom: 10px;
}
.eab-help-noderef-cat-title {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--sft-text-muted);
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 4px;
}
.eab-help-noderef-item {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 6px 8px; border-radius: 6px;
    font-size: 12px; transition: background 0.1s;
}
.eab-help-noderef-item:hover { background: var(--sft-bg-hover); }
.eab-help-noderef-icon {
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 5px; font-size: 14px; flex-shrink: 0;
}
.eab-help-noderef-info { flex: 1; min-width: 0; }
.eab-help-noderef-name { font-weight: 600; display: block; }
.eab-help-noderef-desc { font-size: 11px; color: var(--sft-text-muted); display: block; }
.eab-help-noderef-usage {
    font-size: 10px; color: var(--sft-primary-text);
    margin-top: 2px; display: block; font-style: italic;
}

/* Shortcuts in help */
.eab-help-shortcut-list { display: flex; flex-direction: column; gap: 4px; }
.eab-help-sc {
    display: flex; align-items: center; gap: 12px;
    padding: 4px 0; font-size: 12px;
}
.eab-help-sc kbd {
    display: inline-block; padding: 2px 8px;
    font-size: 11px; font-family: "SFMono-Regular", Consolas, monospace;
    background: var(--sft-bg-alt); border: 1px solid var(--sft-border);
    border-radius: 4px; min-width: 70px; text-align: center;
    color: var(--sft-text-secondary);
}

/* Tips list */
.eab-help-tip-list {
    padding: 0 0 0 16px; margin: 0;
    font-size: 12px; line-height: 1.8;
    color: var(--sft-text-secondary);
}

/* Help FAQ */
.eab-help-faq-item { border: none; margin-bottom: 4px; }
.eab-help-faq-item summary {
    font-size: 12px; font-weight: 600; padding: 6px 0;
    cursor: pointer; list-style: none;
}
.eab-help-faq-item summary::-webkit-details-marker { display: none; }
.eab-help-faq-item summary::before {
    content: '▸'; margin-right: 6px;
    transition: transform 0.2s; display: inline-block;
}
.eab-help-faq-item[open] summary::before { transform: rotate(90deg); }
.eab-help-faq-item p {
    font-size: 11px; color: var(--sft-text-muted);
    margin: 2px 0 8px 16px; line-height: 1.6;
    padding: 0;
}

/* ── パレット項目の位置基準 ──
   元は Phase A2 のノードツールチップ (`.eab-node-tooltip*`) を絶対配置するための
   基準だった。ツールチップは 2026-08-06 に撤去 (誰も出していなかった = dead-css-gate)。
   この rule 自体は生きている (他の絶対配置の基準)。 */
.eab-palette-item {
    position: relative;
}

/* ═══════════════════════════════════════════
   Phase D: UI/UX改善
   ═══════════════════════════════════════════ */

/* D1: ミニマップ */
.eab-minimap {
    position: absolute;
    bottom: 12px; right: 12px;
    width: 160px; height: 100px;
    background: var(--sft-bg-card);
    border: 1px solid var(--sft-border);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
    z-index: 50;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.2s;
}
.eab-minimap:hover { opacity: 1; }
.eab-minimap-viewport {
    position: absolute;
    border: 2px solid var(--sft-primary);
    background: rgba(59,130,246,0.1);
    border-radius: 2px;
    pointer-events: none;
}
.eab-minimap-node {
    position: absolute;
    border-radius: 2px;
    min-width: 4px; min-height: 3px;
}

/* D2: スナップ・トゥ・グリッド */
.eab-snap-toggle {
    position: absolute;
    bottom: 12px; left: 12px;
    display: flex; align-items: center; gap: 6px;
    padding: 5px 10px;
    background: var(--sft-bg-card);
    border: 1px solid var(--sft-border);
    border-radius: 6px;
    font-size: 11px; font-weight: 500;
    color: var(--sft-text-secondary);
    cursor: pointer;
    z-index: 50;
    transition: all 0.15s;
}
.eab-snap-toggle:hover { background: var(--sft-bg-hover); }
.eab-snap-toggle.eab-snap-active {
    border-color: var(--sft-primary);
    color: var(--sft-primary-text);
    background: rgba(59,130,246,0.08);
}
.eab-snap-icon {
    width: 14px; height: 14px;
    display: flex; align-items: center; justify-content: center;
}

/* D3: ノード統計バー */
.eab-node-stats {
    position: absolute;
    top: 8px; left: 50%;
    transform: translateX(-50%);
    display: flex; align-items: center; gap: 8px;
    padding: 4px 12px;
    background: var(--sft-bg-card);
    border: 1px solid var(--sft-border);
    border-radius: 16px;
    font-size: 11px; font-weight: 500;
    color: var(--sft-text-secondary);
    z-index: 50;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    white-space: nowrap;
}
.eab-stat-item {
    display: flex; align-items: center; gap: 3px;
}
.eab-stat-dot {
    width: 6px; height: 6px;
    border-radius: 50%; flex-shrink: 0;
}

/* D4: 接続プレビュー（ホバーハイライト） */
.drawflow .connection.eab-conn-highlight path {
    stroke: var(--sft-primary) !important;
    stroke-width: 3px !important;
    filter: drop-shadow(0 0 4px rgba(59,130,246,0.4));
}

/* Node highlight animation */
.drawflow .drawflow-node.eab-node-highlight {
    animation: eab-pulse 0.5s ease 3;
}
@keyframes eab-pulse {
    0%, 100% { box-shadow: 0 0 0 3px var(--sft-primary-bg), 0 4px 16px rgba(0,0,0,0.12); }
    50% { box-shadow: 0 0 0 6px var(--sft-primary-bg), 0 4px 16px rgba(0,0,0,0.2); }
}

/* ══ 右パネル3タブ ══ */
.eab-right-tabs {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--sft-border-light);
    padding: 0;
    gap: 0;
    flex-shrink: 0;
}
.eab-right-tab {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
    font-size: 11px;
    font-weight: 600;
    border: none;
    background: none;
    color: var(--sft-text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
    white-space: nowrap;
}
.eab-right-tab:hover { color: var(--sft-text); background: var(--sft-bg-hover); }
.eab-right-tab-active {
    color: var(--sft-primary-text);
    border-bottom-color: var(--sft-primary);
}
.eab-right-tabs .eab-property-close {
    margin-left: auto;
    display: none;
    border: none;
    background: none;
    font-size: 18px;
    color: var(--sft-text-muted);
    cursor: pointer;
    padding: 8px;
}
.eab-right-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.eab-right-panel.eab-hidden { display: none; }

/* ── 設定パネル ── */
.eab-settings-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px;
}
.eab-settings-body::-webkit-scrollbar { width: 4px; }
.eab-settings-body::-webkit-scrollbar-thumb { background: var(--sft-border); border-radius: 2px; }

.eab-settings-section {
    margin-bottom: 8px;
    border: 1px solid var(--sft-border-light);
    border-radius: 6px;
    overflow: hidden;
}
.eab-settings-section-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: var(--sft-bg-alt);
    color: var(--sft-text);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.eab-settings-section-toggle:hover { background: var(--sft-bg-hover); }
.eab-settings-section-toggle .eab-section-arrow {
    font-size: 10px;
    transition: transform 0.2s;
}
.eab-settings-section.eab-section-closed .eab-section-arrow {
    transform: rotate(-90deg);
}
.eab-settings-section-toggle .eab-section-icon { font-size: 14px; }
.eab-settings-section-toggle .eab-section-count {
    margin-left: auto;
    font-size: 10px;
    color: var(--sft-text-muted);
    font-weight: 400;
}
.eab-settings-section-body {
    padding: 6px 10px 10px;
}
.eab-settings-section.eab-section-closed .eab-settings-section-body { display: none; }

/* ── ロットセクション ── */
.eab-lot-options {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}
.eab-lot-option {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border: 1px solid var(--sft-border-light);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 12px;
}
.eab-lot-option:hover { background: var(--sft-bg-hover); }
.eab-lot-option.eab-lot-active {
    border-color: var(--sft-primary);
    background: var(--sft-primary-bg, rgba(var(--sft-primary-rgb, 59, 130, 246), 0.08));
}
.eab-lot-option input[type="radio"] { margin: 0; }
.eab-lot-option-label {
    font-weight: 500;
    flex: 1;
}
.eab-lot-params {
    padding: 6px 0 0 22px;
}
.eab-lot-params.eab-hidden { display: none; }

/* ── フィルター行 ── */
.eab-filter-row {
    border: 1px solid var(--sft-border-light);
    border-radius: 4px;
    margin-bottom: 4px;
    overflow: hidden;
}
.eab-filter-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    cursor: pointer;
    font-size: 12px;
    transition: background 0.15s;
}
.eab-filter-header:hover { background: var(--sft-bg-hover); }
.eab-filter-header input[type="checkbox"] { margin: 0; }
.eab-filter-icon { font-size: 14px; }
.eab-filter-label { font-weight: 500; flex: 1; }
.eab-filter-arrow {
    font-size: 9px;
    color: var(--sft-text-muted);
    transition: transform 0.2s;
}
.eab-filter-row.eab-filter-closed .eab-filter-arrow { transform: rotate(-90deg); }
.eab-filter-params {
    padding: 4px 8px 8px 28px;
    border-top: 1px solid var(--sft-border-light);
}
.eab-filter-row.eab-filter-closed .eab-filter-params { display: none; }
.eab-filter-row:not(.eab-filter-enabled) .eab-filter-params { display: none; }
.eab-filter-row:not(.eab-filter-enabled) .eab-filter-arrow { display: none; }

/* ── 設定フォーム部品 ── */
.eab-setting-field {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    font-size: 11px;
}
.eab-setting-field label {
    min-width: 70px;
    color: var(--sft-text-secondary);
    font-size: 11px;
}
.eab-setting-field input[type="number"],
.eab-setting-field input[type="text"],
.eab-setting-field select {
    flex: 1;
    padding: 3px 6px;
    font-size: 11px;
    border: 1px solid var(--sft-border);
    border-radius: 4px;
    background: var(--sft-bg);
    color: var(--sft-text);
    min-width: 0;
}
.eab-setting-field input[type="number"] { width: 60px; flex: 0 0 60px; }

/* Phase D①: マルチシンボル設定のヒント文 */
.eab-setting-hint {
    margin: 2px 0 6px;
    font-size: 10px;
    line-height: 1.5;
    color: var(--sft-text-muted);
}
/* The "Target symbols (comma-separated)" label is long and, in the default
   row layout, squeezed its input to ~80px — too narrow for a list like
   EURUSD,GBPUSD,USDJPY. Stack label over a full-width input for this field. */
#eab-sec-multisymbol .eab-setting-field {
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
}
#eab-sec-multisymbol .eab-setting-field label { min-width: 0; }

/* ═══════════════════════════════════════════════════════════
   プロジェクトダッシュボード
   ═══════════════════════════════════════════════════════════ */

.eab-dashboard {
    position: relative;
    width: 100vw;
    min-height: 100vh;
    margin-left: calc(-50vw + 50%);
    background: var(--sft-bg);
    color: var(--sft-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    display: flex;
    flex-direction: column;
}

.eab-dash-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    background: var(--sft-bg-card);
    border-bottom: 1px solid var(--sft-border);
    flex-shrink: 0;
}
.eab-dash-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.eab-dash-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.eab-dash-project-count {
    font-size: 12px;
    color: var(--sft-text-muted);
    background: var(--sft-bg-alt);
    padding: 2px 10px;
    border-radius: 12px;
}

/* ── グリッド ── */
.eab-dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    padding: 24px;
    flex: 1;
    /* 行を stretch させずカードを自然高に (flex:1 の縦伸長で下部に空白が出るのを防ぐ) */
    align-content: start;
}

/* ── カード ── */
.eab-dash-card {
    background: var(--sft-bg-card);
    border: 1px solid var(--sft-border);
    /* 左に名前ハッシュ由来の色アクセント帯 (JS が --eab-card-accent を注入) */
    border-inline-start: 3px solid var(--eab-card-accent, var(--sft-primary));
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}
.eab-dash-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
[data-sft-theme="dark"] .eab-dash-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.eab-dash-card-thumb {
    height: 128px;
    background: var(--sft-bg-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 10px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--sft-border);
}
/* サムネSVG(ミニフロー図)は data-URI の <img>。額装して収める */
.eab-dash-card-thumb img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 6px;
    object-fit: contain;
}
.eab-dash-card-thumb svg {
    max-width: 100%;
    max-height: 100%;
}
/* 空フロー: ミュートしたノード風グリフ */
.eab-dash-card-thumb-empty {
    display: inline-flex;
    color: var(--sft-text-muted);
    opacity: 0.45;
}
.eab-dash-card-body {
    padding: 12px 16px;
}
.eab-dash-card-name {
    font-weight: 600;
    font-size: 14px;
    margin: 0 0 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.eab-dash-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--sft-text-muted);
}
/* 使っている部品の要約 1 行 (例「Moving Average · Cross · Trailing Stop」)。取得前は高さだけ確保する */
.eab-dash-card-summary {
    font-size: 12px;
    line-height: 1.45;
    min-height: 1.45em;
    margin: 0 0 6px;
    color: var(--sft-text);
    opacity: 0.82;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.eab-dash-card-summary.is-empty { color: var(--sft-text-muted); opacity: 1; font-style: italic; }
/* 保存した Measure の成績 1 行。点の色は Measure の合否バッジと同じ */
.eab-dash-card-measure {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 12px;
    line-height: 1.45;
    margin: -2px 0 6px;
    color: var(--sft-text);
    font-variant-numeric: tabular-nums;
}
.eab-dash-card-measure[hidden] { display: none; }
/* 銘柄や「3/4 市場」が切れないよう 2 行まで折り返す */
.eab-dash-card-measure > span:last-child {
    min-width: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}
.eab-dash-card-measure.is-stale { color: var(--sft-text-muted); font-style: italic; }
.eab-dash-card-verdict { flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--sft-text-muted); }
.eab-dash-card-verdict[data-verdict="pass"] { background: #059669; }
.eab-dash-card-verdict[data-verdict="fail"] { background: #e11d48; }
.eab-dash-card-verdict[data-verdict="thin"] { background: #d97706; }
/* 一覧から直接 .ex5 を作るボタン。時刻の行の右端に置く (下の操作段は 3 つで埋まっている) */
.eab-dash-card-build {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, var(--sft-primary) 55%, transparent);
    border-radius: 6px;
    background: color-mix(in srgb, var(--sft-primary) 12%, transparent);
    color: var(--sft-primary-text);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.eab-dash-card-build[hidden] { display: none; }
.eab-dash-card-build svg { width: 13px; height: 13px; }
.eab-dash-card-build:hover { background: var(--sft-primary); color: var(--sft-on-primary); }
.eab-dash-card-build:focus-visible { outline: 2px solid var(--sft-primary); outline-offset: 2px; }
.eab-dash-card-actions {
    display: flex;
    border-top: 1px solid var(--sft-border);
}
.eab-dash-card-actions button {
    flex: 1;
    padding: 8px;
    background: none;
    border: none;
    color: var(--sft-text-muted);
    cursor: pointer;
    font-size: 12px;
    transition: background 0.15s, color 0.15s;
}
.eab-dash-card-actions button:hover {
    background: var(--sft-bg-alt);
    color: var(--sft-text);
}
.eab-dash-card-actions button + button {
    border-left: 1px solid var(--sft-border);
}
.eab-dash-card-actions .eab-dash-action-delete:hover {
    color: #ef4444;
}
/* アクションの SVG アイコン (stroke は currentColor 継承 → hover/削除赤に追従) */
.eab-dash-card-actions button svg {
    flex-shrink: 0;
    display: block;
}

/* ── 空状態 ── */
.eab-dash-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    text-align: center;
    flex: 1;
}
.eab-dash-empty-icon { font-size: 64px; margin-bottom: 16px; }
.eab-dash-empty h3 { margin: 0 0 8px; font-size: 20px; }
.eab-dash-empty p { color: var(--sft-text-muted); margin: 0 0 24px; }

/* ── ローディング ── */
.eab-dash-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px;
    flex: 1;
}
.eab-dash-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--sft-border);
    border-top-color: var(--sft-primary);
    border-radius: 50%;
    animation: eab-spin 0.8s linear infinite;
}
@keyframes eab-spin { to { transform: rotate(360deg); } }

/* ── localStorage移行バナー ── */
.eab-dash-migrate-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 24px;
    background: var(--sft-primary);
    color: var(--sft-on-primary);
    font-size: 13px;
}
.eab-dash-migrate-banner.eab-hidden { display: none; }

/* ── 戻るボタン ── */
.eab-back-dash {
    margin-right: 4px;
}

/* ── プロジェクト名（ヘッダー内） ── */
.eab-project-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--sft-text-muted);
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 4px;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.15s;
}
.eab-project-name:hover {
    background: var(--sft-bg-alt);
    color: var(--sft-text);
}

/* ── リネームモーダル ── */
.eab-rename-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.eab-rename-modal.eab-hidden { display: none; }
.eab-rename-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
}
.eab-rename-card {
    position: relative;
    background: var(--sft-bg-card);
    border-radius: 12px;
    padding: 24px;
    width: 400px;
    max-width: calc(100vw - 32px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.2);
}
.eab-rename-card h3 {
    margin: 0 0 16px;
    font-size: 16px;
}
.eab-rename-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--sft-border);
    border-radius: 6px;
    font-size: 14px;
    background: var(--sft-bg);
    color: var(--sft-text);
    box-sizing: border-box;
}
.eab-rename-input:focus {
    outline: none;
    border-color: var(--sft-primary);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
.eab-rename-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

/* ══════════════════════════════════════════════════════════════════
   保存EA ダッシュボード UX 強化 (2026-07-16)
   toolbar(検索/並び替え/表示切替) / リッチカード / リストビュー /
   削除確認モーダル / 空・0件状態 / a11y / レスポンシブ。
   すべて --sft-* トークンで dark/light 自動対応。
   ══════════════════════════════════════════════════════════════════ */

/* ── ツールバー ── */
.eab-dash-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 24px 0;
}
.eab-dash-search-wrap { position: relative; flex: 1 1 240px; max-width: 420px; }
.eab-dash-search-icon {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    font-size: 13px; opacity: 0.5; pointer-events: none;
}
.eab-dash-search {
    width: 100%; box-sizing: border-box;
    padding: 9px 12px 9px 34px;
    border: 1px solid var(--sft-border); border-radius: 8px;
    background: var(--sft-bg-card); color: var(--sft-text); font-size: 13px;
}
.eab-dash-search::placeholder { color: var(--sft-text-muted); }
.eab-dash-search:focus-visible { outline: 2px solid var(--sft-primary); outline-offset: 1px; border-color: var(--sft-primary); }
.eab-dash-toolbar-right { display: flex; align-items: center; gap: 10px; }
.eab-dash-sort-wrap { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--sft-text-muted); }
.eab-dash-sort {
    padding: 7px 10px; border: 1px solid var(--sft-border); border-radius: 8px;
    background: var(--sft-bg-card); color: var(--sft-text); font-size: 13px; cursor: pointer;
}
.eab-dash-sort:focus-visible { outline: 2px solid var(--sft-primary); outline-offset: 1px; }

/* 表示切替トグル */
.eab-dash-view { display: inline-flex; border: 1px solid var(--sft-border); border-radius: 8px; overflow: hidden; }
.eab-dash-view-btn {
    padding: 7px 11px; background: var(--sft-bg-card); border: none;
    color: var(--sft-text-muted); cursor: pointer; font-size: 14px; line-height: 1;
    transition: background 0.15s, color 0.15s;
}
.eab-dash-view-btn + .eab-dash-view-btn { border-left: 1px solid var(--sft-border); }
.eab-dash-view-btn:hover { color: var(--sft-text); }
.eab-dash-view-btn[aria-pressed="true"] { background: var(--sft-primary); color: var(--sft-on-primary); }
.eab-dash-view-btn:focus-visible { outline: 2px solid var(--sft-primary); outline-offset: -2px; }

/* ── リッチカード追加要素 ── */
.eab-dash-card-actions button { display: flex; align-items: center; justify-content: center; gap: 5px; }
.eab-dash-card-action-label { font-size: 11px; }
.eab-dash-card[tabindex]:focus-visible { outline: 2px solid var(--sft-primary); outline-offset: 2px; }
.eab-dash-card-actions button:focus-visible { outline: 2px solid var(--sft-primary); outline-offset: -2px; }

/* カード読込時の控えめな stagger フェードイン */
@keyframes eab-dash-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.eab-dash-grid .eab-dash-card { animation: eab-dash-in 0.28s ease both; }

/* ── リストビュー (同一カードDOMをCSSで横長行に組替え) ── */
.eab-dash-grid.is-list { display: flex; flex-direction: column; gap: 10px; }
.eab-dash-grid.is-list .eab-dash-card {
    display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 14px; padding: 8px 12px;
}
.eab-dash-grid.is-list .eab-dash-card:hover { transform: none; }
.eab-dash-grid.is-list .eab-dash-card-thumb {
    height: 40px; width: 56px; border-bottom: none; border-radius: 6px;
}
.eab-dash-grid.is-list .eab-dash-card-thumb-empty { font-size: 20px; }
.eab-dash-grid.is-list .eab-dash-card-body { padding: 0; min-width: 0; }
.eab-dash-grid.is-list .eab-dash-card-name { margin: 0 0 3px; }
.eab-dash-grid.is-list .eab-dash-card-actions { border-top: none; width: auto; }
.eab-dash-grid.is-list .eab-dash-card-actions button { flex: 0 0 auto; padding: 6px 9px; border-left: none; }
.eab-dash-grid.is-list .eab-dash-card-action-label { display: none; }
.eab-dash-grid.is-list .eab-dash-card-summary { margin: 0 0 2px; }

/* ── 検索0件 (空状態とは別) ── */
.eab-dash-noresults {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 64px 24px; text-align: center; flex: 1;
}
.eab-dash-noresults h3 { margin: 0 0 8px; font-size: 18px; }
.eab-dash-noresults p { color: var(--sft-text-muted); margin: 0 0 20px; }

/* ── 削除確認モーダル (rename モーダルと同構造) ── */
.eab-confirm-modal { position: fixed; inset: 0; z-index: 10001; display: flex; align-items: center; justify-content: center; }
.eab-confirm-modal.eab-hidden { display: none; }
.eab-confirm-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.eab-confirm-card {
    position: relative; background: var(--sft-bg-card); border-radius: 12px; padding: 24px;
    width: 400px; max-width: calc(100vw - 32px); box-shadow: 0 16px 48px rgba(0,0,0,0.2);
}
.eab-confirm-card h3 { margin: 0 0 10px; font-size: 16px; }
.eab-confirm-text { margin: 0; font-size: 13px; line-height: 1.6; color: var(--sft-text-muted); }
.eab-confirm-text strong { color: var(--sft-text); word-break: break-word; }
.eab-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }

/* danger ボタン (削除確定) */
.eab-btn-danger { background: #ef4444; border-color: #ef4444; color: #fff; }
.eab-btn-danger:hover { background: #dc2626; border-color: #dc2626; }
.eab-btn-danger:focus-visible { outline: 2px solid #ef4444; outline-offset: 2px; }

/* ── ダッシュボード レスポンシブ (小画面: ツールバー縦積み・タップ44px) ── */
@media (max-width: 640px) {
    .eab-dash-toolbar { flex-direction: column; align-items: stretch; padding: 12px 16px 0; }
    /* 縦積みでは flex-basis(240px) が高さとして効くのを止め自然高にする */
    .eab-dash-search-wrap { flex: none; max-width: none; }
    .eab-dash-toolbar-right { justify-content: space-between; }
    .eab-dash-card-actions button { padding: 11px 8px; }
    .eab-dash-grid.is-list .eab-dash-card { grid-template-columns: 44px 1fr auto; gap: 10px; }
    .eab-dash-grid.is-list .eab-dash-card-thumb { width: 44px; height: 34px; }
    /* フロー図は横長の細い帯なので、128px の枠は上下が空くだけ。スマホでは詰めて一覧を多く見せる */
    .eab-dash-grid:not(.is-list) .eab-dash-card-thumb { height: 64px; padding: 6px 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .eab-dash-grid .eab-dash-card { animation: none; }
    .eab-dash-card:hover { transform: none; }
}

/* ── v5.3: プロパティ使い方ヒント ── */
.eab-prop-usage-hint {
    display: flex; align-items: flex-start; gap: 6px;
    margin-top: 8px; padding: 8px 10px;
    background: var(--sft-primary-alpha, rgba(59,130,246,0.08));
    border-radius: 6px; font-size: 11px; line-height: 1.5;
    color: var(--sft-text-secondary);
}
.eab-prop-usage-hint svg { flex-shrink: 0; margin-top: 1px; color: var(--sft-primary-text); }
.eab-prop-empty-note {
    margin-top: 10px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--sft-text-muted);
    font-style: italic;
}

/* ── v5.3: ウェルカムフロー図 (legacy, replaced by landing dashboard) ── */

/* ── v5.3: FX用語グロサリーツールチップ ── */
.eab-glossary { position: relative; cursor: help; border-bottom: 1px dashed var(--sft-text-muted); }
/* Glossary marker: a tight superscript "?" that hugs the term so labels like
   "MA Method" read naturally ("MAˀ Method") instead of being split by a
   bordered circle that looked like a missing-glyph box mid-label. */
.eab-glossary-q { font-size: 8px; font-weight: 700; line-height: 0; color: var(--sft-primary-text); vertical-align: super; margin-left: 1px; }
.eab-glossary::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); padding: 8px 10px; background: var(--sft-bg-card); border: 1px solid var(--sft-border); border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,0.15); font-size: 11px; line-height: 1.5; width: 220px; z-index: 200; opacity: 0; pointer-events: none; transition: opacity 0.15s; white-space: normal; }
.eab-glossary:hover::after { opacity: 1; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .eab-guide { padding: 32px 16px 48px; }
    .eab-guide-hero h2 { font-size: 22px; }
    .eab-guide-steps { flex-direction: column; }
    .eab-guide-grid { grid-template-columns: 1fr; }
    .eab-guide-compare { flex-direction: column; }
    .eab-guide-step { flex-direction: column; align-items: flex-start; }
    .eab-help-panel { width: 100%; }
    .eab-minimap { display: none; }
    .eab-node-stats { font-size: 10px; padding: 3px 8px; }
    .eab-right-tab { padding: 6px 6px; font-size: 10px; }
    .eab-dash-grid { grid-template-columns: 1fr; padding: 16px; gap: 12px; }
    .eab-dash-header { padding: 10px 16px; }
    .eab-project-name { max-width: 120px; }
}

/* ── 保存中スピナー ── */
.eab-saving { opacity: 0.6; pointer-events: none; position: relative; }
.eab-saving::after {
    content: ''; position: absolute; top: 50%; left: 50%; width: 14px; height: 14px;
    margin: -7px 0 0 -7px; border: 2px solid transparent; border-top-color: currentColor;
    border-radius: 50%; animation: eab-spin 0.6s linear infinite;
}
/* @keyframes eab-spin の宣言は 1 か所 (ダッシュボードのスピナーの直後) に置く。
   ここにも同じ本文が在ったが、重複は後勝ちなので片方だけ編集された瞬間に前が黙って死ぬ。 */

/* ── コンパイル検証ステータス (UI 通過保証) ── */
.eab-compile-status {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; line-height: 1;
    padding: 6px 10px; border-radius: 6px; white-space: nowrap;
    border: 1px solid transparent;
}
.eab-compile-status::before {
    content: ''; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px;
}
.eab-compile-status.is-compiling {
    color: var(--sft-text-muted, #64748b);
    background: var(--sft-surface-2, rgba(100,116,139,0.08));
}
.eab-compile-status.is-compiling::before {
    background: transparent; border: 2px solid currentColor; border-top-color: transparent;
    width: 10px; height: 10px; flex-basis: 10px; animation: eab-spin 0.6s linear infinite;
}
.eab-compile-status.is-ok {
    color: var(--sft-success-dark); background: var(--sft-success-bg);
    border-color: var(--sft-success);
}
.eab-compile-status.is-ok::before { background: var(--sft-success); }
.eab-compile-status.is-error {
    color: var(--sft-error); background: var(--sft-error-bg);
    border-color: var(--sft-error);
}
.eab-compile-status.is-error::before { background: var(--sft-error); }

/* B-4: 保存インジケータ — compile-status と同じ体裁の控えめな成功バッジ */
.eab-save-indicator {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; line-height: 1;
    padding: 6px 10px; border-radius: 6px; white-space: nowrap;
    color: var(--sft-text-muted, #64748b);
    background: var(--sft-surface-2, rgba(100,116,139,0.08));
}

/* ── アクセシビリティ: キーボードフォーカスの可視化 ──
   .sft-* には :focus-visible リングがあるが .eab-* ボタン/タブ/リンクには
   無く、キーボード操作時にフォーカス位置が見えなかった。input/select/textarea は
   focus で border 色が変わるため対象外(二重リング回避)。 */
.eab-wrapper button:focus-visible,
.eab-wrapper a:focus-visible,
.eab-wrapper [role="button"]:focus-visible,
.eab-wrapper [tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 2px solid var(--sft-primary);
    outline-offset: 2px;
}

/* ── D-2: JS 生成 UI の装飾 class (inline style からの移設) ──
   状態切替 (style.display) とデータ駆動の動的色 (cat.color 等) は JS 側に残す。 */

/* コードプレビューのロック帯 (setCodeLock) */
#eab-code-lock {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 8px; padding: 8px 10px;
    border: 1px solid var(--sft-border, #2c3a52);
    border-radius: 9px;
    background: rgba(47, 109, 246, .08);
    font-size: 12px; line-height: 1.5;
    color: var(--sft-text-secondary, #aebacb);
}
.eab-code-lock-msg { flex: 1; }
.eab-code-lock-cta {
    white-space: nowrap; text-decoration: none;
    background: var(--eab-cta-accent, #2f6df6); color: #fff;
    border-radius: 7px; padding: 5px 10px;
    font-size: 12px; font-weight: 600;
    transition: background-color .2s;
}
.eab-code-lock-cta:hover { background: var(--eab-cta-accent-hover, #4f83f7); }

/* ロック中の input 抜粋は「フルソースに見える」誤認を防ぐため減光する
   (setCodeLock。表示のみ — 開示強制はサーバ /api/generate 側)。 */
#eab-code-block.eab-code-locked { opacity: .72; }

/* 開放中の明示帯 (setCodeLock unlocked)。無表示だと「無料でフルソースが出た」
   ように見えるため、Pro / verified-IB での開放を常に言語化する。 */
#eab-code-unlock {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 8px; padding: 8px 10px;
    border: 1px solid var(--sft-border, #2c3a52);
    border-radius: 9px;
    background: rgba(34, 197, 94, .08);
    font-size: 12px; line-height: 1.5;
    color: var(--sft-text-secondary, #aebacb);
}

/* 実プラン PRO バッジ (refreshPlanBadge が付与) */
.eab-badge-pro { background: var(--eab-cta-accent, #2f6df6); }

/* 無課金ユーザー向けヘッダ Upgrade CTA (→ /en/pricing)。
   静的表示が既定で、refreshPlanBadge が source 開放 (Pro / verified-IB) を
   確認できた時だけ .eab-hidden で隠す = 課金済みにだけ出ない。
   白文字 on #2f6df6 は既存 PRO ピル (Source ボタン) と同一の実績組合せ。 */
.eab-upgrade-cta {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    white-space: nowrap;
    color: #fff;
    text-decoration: none;
    background: var(--eab-cta-accent, #2f6df6);
    padding: 3px 10px;
    border-radius: 999px;
    transition: filter .15s;
}
.eab-upgrade-cta:hover { filter: brightness(1.15); color: #fff; }

/* Pro paywall モーダル (showProPaywall) / 再ログインモーダル (showAuthModal) */
#eab-pro-overlay,
#eab-auth-overlay {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    background: var(--eab-overlay-backdrop, rgba(8, 12, 20, .62));
    padding: 20px;
}
.eab-pro-card {
    max-width: 420px; width: 100%;
    background: var(--sft-bg-card, #0f1623);
    color: var(--sft-text, #e8eef7);
    border: 1px solid var(--sft-border, #243044);
    border-radius: 14px; padding: 24px 22px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, .5);
    font-family: inherit;
}
.eab-pro-title { font-size: 15px; font-weight: 700; margin-bottom: 8px; line-height: 1.35; }
.eab-pro-body { font-size: 13px; line-height: 1.6; color: var(--sft-text-secondary, #aebacb); margin: 0 0 18px; }
.eab-pro-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
#eab-pro-cancel,
#eab-auth-cancel {
    cursor: pointer;
    border: 1px solid var(--sft-border, #2c3a52);
    background: transparent;
    color: var(--sft-text-secondary, #aebacb);
    border-radius: 9px; padding: 9px 14px; font-size: 13px;
    transition: color .2s, border-color .2s;
}
#eab-pro-cancel:hover,
#eab-auth-cancel:hover { color: var(--sft-text, #e8eef7); border-color: var(--sft-text-muted, #64748b); }
#eab-pro-cta,
#eab-auth-cta {
    text-decoration: none;
    background: var(--eab-cta-accent, #2f6df6); color: #fff;
    border-radius: 9px; padding: 9px 16px;
    font-size: 13px; font-weight: 600;
    transition: background-color .2s;
}
#eab-pro-cta:hover,
#eab-auth-cta:hover { background: var(--eab-cta-accent-hover, #4f83f7); }

/* paywall は document.body 直下に append される (.eab-wrapper 外) ため、
   汎用 focus-visible リングの適用範囲外 — ここで個別に担保する。 */
#eab-pro-overlay button:focus-visible,
#eab-pro-overlay a:focus-visible,
#eab-auth-overlay button:focus-visible,
#eab-auth-overlay a:focus-visible {
    outline: 2px solid var(--sft-primary);
    outline-offset: 2px;
}

/* 頑健性マトリクス: 生存/劣化/保留の固定色 (renderMatrix / forwardLabel) */
.eab-mx-alive { background: #10b981; }
.eab-mx-dead { background: #e11d48; }
.eab-mx-fwd-ok { color: #059669; }
.eab-mx-fwd-bad { color: #e11d48; }
.eab-mx-fwd-hold { color: var(--sft-text-secondary); }

/* キャンバス統計バーの合計 (updateStatBar) */
.eab-stat-total { margin-left: 4px; font-weight: 600; }

/* ダッシュボードのサムネイル画像 (createProjectCard) */
.eab-dash-card-thumb img { max-width: 100%; max-height: 100%; }

/* ══════════════════════════════════════════
   見た目の底上げ (2026-09-26)
   今のレイアウトの上に重ねる形で、次の 4 つを直す:
   ①見出しの色の混在と過密 ②ノードの絵文字 (クリップアート感) ③画面の浮遊物 ④設定欄の平板さ。
   書体は Inter をこのフォルダに同梱して自前で配る (CSP の font-src 'self' に収まる・
   サイト本体と同じ @fontsource/inter 5.2.8 の latin サブセット・OFL-1.1)。
   font-display は optional (サイト全体の方針・seo:font:dist が swap を落とす＝読み込み時の文字ずれを出さない)。
   ══════════════════════════════════════════ */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: optional; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: optional; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: optional; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: optional; src: url("../fonts/inter-latin-700-normal.woff2") format("woff2"); }


/* ── 共通トークン ── */
:root {
  --eab-skin-radius: 10px;
  --eab-skin-line: color-mix(in srgb, var(--sft-border) 85%, transparent);
  --eab-skin-font: Inter, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ══ ① 見出し ══ */
.eab-header { box-shadow: 0 1px 0 var(--eab-skin-line); }
/* 青い塊 (Upgrade・PRO) を細い枠に。主役は緑の Compile だけにする */
.eab-upgrade-cta {
  background: transparent !important;
  color: var(--eab-cta-accent, #2f6df6) !important;
  border: 1px solid color-mix(in srgb, var(--eab-cta-accent, #2f6df6) 55%, transparent);
  padding: 3px 10px;
}
.eab-upgrade-cta:hover { background: color-mix(in srgb, var(--eab-cta-accent, #2f6df6) 12%, transparent) !important; }
#eab-plan-badge { background: transparent; border: 1px solid var(--eab-skin-line); color: var(--sft-text-muted); }
#eab-btn-download span {
  background: transparent !important;
  color: var(--eab-cta-accent, #2f6df6) !important;
  border: 1px solid color-mix(in srgb, var(--eab-cta-accent, #2f6df6) 55%, transparent);
  padding: 0 5px !important;
}
/* アイコンだけのボタンは同じ大きさ・同じ角丸・枠なし */
.eab-header-right .eab-btn-icon,
.eab-header-right .eab-btn-ghost,
#eab-btn-help, .sft-theme-toggle {
  border-radius: 8px;
  border-color: transparent !important; background: transparent;
}
.eab-header-right .eab-btn-icon:hover,
.eab-header-right .eab-btn-ghost:hover { background: var(--sft-bg-hover); }
#eab-btn-compile { border-radius: 8px; box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 4px 14px color-mix(in srgb, var(--sft-primary) 28%, transparent); }
/* 大きさと間隔はタブレット以上だけ (スマホの折り返し見出しを広げない) */
@media (min-width: 769px) {
  .eab-header { gap: 10px; }
  .eab-header-right .eab-btn-icon,
  .eab-header-right .eab-btn-ghost,
  #eab-btn-help, .sft-theme-toggle { height: 32px; min-width: 32px; }
  #eab-btn-compile { height: 32px; padding: 0 14px; }
}
/* 右上に浮いていた「← AIStrategyMiner」を見出しの一部に見せる。
   スマホは見出しが折り返して下の「← Projects」と重なるので、背景で隠す元の札のまま */
@media (min-width: 769px) {
  .eab-home-link {
    background: transparent !important; border-color: transparent !important;
    backdrop-filter: none !important; top: 12px !important;
    color: var(--sft-text-muted) !important;
  }
  .eab-home-link:hover { color: var(--sft-text) !important; }
}
.eab-home-link { font-family: var(--eab-skin-font) !important; }

/* ══ ② ノード ══ */
.drawflow .drawflow-node {
  border-width: 1px !important;
  border-radius: 12px;
  background: color-mix(in srgb, var(--sft-bg-card) 92%, white 3%);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 6px 20px rgba(0,0,0,.28);
}
/* 分類の色は左の細い帯で (4px の太線をやめる) */
.drawflow .drawflow-node[class*="eab-node-cat-"] { border-left-width: 1px !important; }
.drawflow .drawflow-node::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--eab-skin-cat, var(--sft-text-muted));
}
.eab-node-cat-indicator { --eab-skin-cat: var(--eab-cat-indicator); }
.eab-node-cat-condition { --eab-skin-cat: var(--eab-cat-condition); }
.eab-node-cat-action    { --eab-skin-cat: var(--eab-cat-action); }
.eab-node-cat-filter    { --eab-skin-cat: var(--eab-cat-filter); }
.eab-node-cat-money     { --eab-skin-cat: var(--eab-cat-money); }
.eab-node-cat-exit      { --eab-skin-cat: var(--eab-cat-exit); }
.eab-node-cat-util      { --eab-skin-cat: #94a3b8; }
.eab-node-cat-price     { --eab-skin-cat: var(--eab-cat-price); }
.drawflow .drawflow-node:is(.eab-node-type-open_sell, .eab-node-type-sell_limit, .eab-node-type-sell_stop) { --eab-skin-cat: var(--eab-cat-exit); }

.eab-node-mindmap { padding: 14px 18px 10px; min-width: 96px; }
/* 絵文字を隠し、分類ごとの線アイコンに差し替える */
.eab-node-icon-lg {
  position: relative; width: 38px !important; height: 38px !important;
  margin: 0 auto 8px !important; border-radius: 10px !important;
  font-size: 0 !important; color: transparent !important;
  background: color-mix(in srgb, var(--eab-skin-cat) 14%, transparent) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--eab-skin-cat) 30%, transparent) inset;
}
.eab-node-icon-lg::before {
  content: ""; position: absolute; inset: 9px;
  background: var(--eab-skin-cat);
  -webkit-mask: var(--eab-skin-ico) center / contain no-repeat; mask: var(--eab-skin-ico) center / contain no-repeat;
}
/* アイコン (線・2px・24 グリッド) */
.eab-node-cat-util      { --eab-skin-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='7 4 19 12 7 20 7 4'/%3E%3C/svg%3E"); }
.eab-node-cat-indicator { --eab-skin-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M7 15l4-5 3 3 5-7'/%3E%3C/svg%3E"); }
.eab-node-cat-condition { --eab-skin-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 18c5 0 7-12 16-12'/%3E%3Cpath d='M4 6c5 0 7 12 16 12'/%3E%3C/svg%3E"); }
.eab-node-cat-action    { --eab-skin-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E"); }
.eab-node-type-open_sell { --eab-skin-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7l10 10'/%3E%3Cpath d='M17 8v9H8'/%3E%3C/svg%3E"); }
/* 種類ごとの線アイコン (分類のアイコンより優先)。指標 52 種はチャートの線で揃え、名前で見分ける */
.eab-node-type-start { --eab-skin-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='7 4 19 12 7 20 7 4'/%3E%3C/svg%3E"); }
.eab-node-type-multi_tf { --eab-skin-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l9 5-9 5-9-5 9-5z'/%3E%3Cpath d='M3 13l9 5 9-5'/%3E%3Cpath d='M3 17.5l9 5 9-5'/%3E%3C/svg%3E"); }
.eab-node-type-price { --eab-skin-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v20'/%3E%3Cpath d='M17 6.5c0-1.9-2.2-3-5-3s-5 1.3-5 3.2c0 4.6 10 2.4 10 7.3 0 2-2.3 3.5-5 3.5s-5-1.2-5-3.2'/%3E%3C/svg%3E"); }
.eab-node-type-ohlc { --eab-skin-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3v18M16 3v18'/%3E%3Crect x='5' y='7' width='6' height='8' rx='1'/%3E%3Crect x='13' y='5' width='6' height='10' rx='1'/%3E%3C/svg%3E"); }
.eab-node-type-time_info { --eab-skin-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.eab-node-type-account_info { --eab-skin-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='13' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M16 15h2'/%3E%3C/svg%3E"); }
.eab-node-type-constant { --eab-skin-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9h14M5 15h14M10 4L8 20M16 4l-2 16'/%3E%3C/svg%3E"); }
.eab-node-type-compare { --eab-skin-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l12 4-12 4'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E"); }
.eab-node-type-ma_perfect_order { --eab-skin-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V14M10 20V9M16 20V4'/%3E%3Cpath d='M3 20h18'/%3E%3C/svg%3E"); }
.eab-node-type-consecutive_bars { --eab-skin-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='4' height='10' rx='1'/%3E%3Crect x='10' y='7' width='4' height='13' rx='1'/%3E%3Crect x='16' y='4' width='4' height='16' rx='1'/%3E%3C/svg%3E"); }
.eab-node-type-rsi_divergence { --eab-skin-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 3 8-8'/%3E%3Cpath d='M3 7l6 5 4-2 8 8'/%3E%3C/svg%3E"); }
.eab-node-type-and_gate { --eab-skin-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ctext x='12' y='17' text-anchor='middle' font-family='Inter,Segoe UI,Arial,sans-serif' font-weight='700' font-size='17' fill='black' stroke='none'%3E&amp;%3C/text%3E%3C/svg%3E"); }
.eab-node-type-or_gate { --eab-skin-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ctext x='12' y='17' text-anchor='middle' font-family='Inter,Segoe UI,Arial,sans-serif' font-weight='700' font-size='11' fill='black' stroke='none'%3EOR%3C/text%3E%3C/svg%3E"); }
.eab-node-type-not_gate { --eab-skin-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ctext x='12' y='17' text-anchor='middle' font-family='Inter,Segoe UI,Arial,sans-serif' font-weight='700' font-size='9' fill='black' stroke='none'%3ENOT%3C/text%3E%3C/svg%3E"); }
.eab-node-type-signal_latch { --eab-skin-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); }
.eab-node-type-math_op { --eab-skin-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v8M8 9h8'/%3E%3Cpath d='M8 19h8'/%3E%3C/svg%3E"); }
.eab-node-type-open_buy { --eab-skin-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E"); }
.eab-node-type-close_pos { --eab-skin-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='6' width='12' height='12' rx='2'/%3E%3C/svg%3E"); }
.eab-node-type-time_exit { --eab-skin-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l2 2'/%3E%3Cpath d='M9 2h6'/%3E%3C/svg%3E"); }
.eab-node-type-profit_pips_close { --eab-skin-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3C/svg%3E"); }
.eab-node-type-basket_money_close { --eab-skin-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='6' rx='7' ry='3'/%3E%3Cpath d='M5 6v6c0 1.7 3.1 3 7 3s7-1.3 7-3V6'/%3E%3Cpath d='M5 12v6c0 1.7 3.1 3 7 3s7-1.3 7-3v-6'/%3E%3C/svg%3E"); }
.eab-node-type-virtual_sl_tp { --eab-skin-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3z'/%3E%3C/svg%3E"); }
.eab-node-type-basket_average_tp { --eab-skin-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h16l-2 11H6L4 9z'/%3E%3Cpath d='M9 9l3-5 3 5'/%3E%3C/svg%3E"); }
.eab-node-type-buy_limit { --eab-skin-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E"); }
.eab-node-type-sell_limit { --eab-skin-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20V9'/%3E%3Cpath d='M7 14l5-5 5 5'/%3E%3Cpath d='M5 4h14'/%3E%3C/svg%3E"); }
.eab-node-type-buy_stop { --eab-skin-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20V9'/%3E%3Cpath d='M7 14l5-5 5 5'/%3E%3Cpath d='M5 4h14'/%3E%3C/svg%3E"); }
.eab-node-type-sell_stop { --eab-skin-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E"); }
.eab-node-type-oco_bracket { --eab-skin-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 12h7'/%3E%3Cpath d='M16 8l4 4-4 4'/%3E%3Cpath d='M12 12H5'/%3E%3Cpath d='M8 8l-4 4 4 4'/%3E%3C/svg%3E"); }
.eab-node-type-alert_node { --eab-skin-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10 21h4'/%3E%3C/svg%3E"); }
.eab-node-type-partial_close { --eab-skin-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cpath d='M20 4L8.1 15.9'/%3E%3Cpath d='M14.5 14.5L20 20'/%3E%3Cpath d='M8.1 8.1L12 12'/%3E%3C/svg%3E"); }
.eab-node-type-trailing_stop { --eab-skin-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8'/%3E%3Cpath d='M15 7h6v6'/%3E%3C/svg%3E"); }
.eab-node-type-break_even { --eab-skin-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9h14M5 15h14'/%3E%3C/svg%3E"); }
.eab-node-type-basket_breakeven { --eab-skin-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h16l-2 11H6L4 9z'/%3E%3Cpath d='M8 14h8'/%3E%3C/svg%3E"); }
.eab-node-type-take_profit { --eab-skin-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3C/svg%3E"); }
.eab-node-type-stop_loss { --eab-skin-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='7.9 2 16.1 2 22 7.9 22 16.1 16.1 22 7.9 22 2 16.1 2 7.9'/%3E%3Cpath d='M8 12h8'/%3E%3C/svg%3E"); }
.eab-node-type-close_all { --eab-skin-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15 9l-6 6M9 9l6 6'/%3E%3C/svg%3E"); }
.eab-node-type-account_guard { --eab-skin-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); }
.eab-node-type-time_filter { --eab-skin-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.eab-node-type-cooldown_filter { --eab-skin-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l2 2'/%3E%3Cpath d='M9 2h6'/%3E%3C/svg%3E"); }
.eab-node-type-news_filter { --eab-skin-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M7 8h10M7 12h10M7 16h6'/%3E%3C/svg%3E"); }
.eab-node-cat-filter    { --eab-skin-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h18l-7 8v6l-4-2v-4z'/%3E%3C/svg%3E"); }
.eab-node-cat-money     { --eab-skin-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='6' rx='7' ry='3'/%3E%3Cpath d='M5 6v6c0 1.7 3.1 3 7 3s7-1.3 7-3V6'/%3E%3Cpath d='M5 12v6c0 1.7 3.1 3 7 3s7-1.3 7-3v-6'/%3E%3C/svg%3E"); }
.eab-node-cat-exit      { --eab-skin-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='M16 17l5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E"); }
.eab-node-cat-price     { --eab-skin-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3v18M16 3v18'/%3E%3Crect x='5' y='7' width='6' height='8' rx='1'/%3E%3Crect x='13' y='5' width='6' height='10' rx='1'/%3E%3C/svg%3E"); }

.eab-node-label { font-size: 12px !important; letter-spacing: .01em; }
.eab-node-param-main { font-size: 11px !important; color: var(--sft-text-muted) !important; font-variant-numeric: tabular-nums; }
/* 接続線: 点線 → 実線・細め */
.drawflow .connection .main-path {
  stroke-dasharray: none !important; stroke-width: 2px !important;
  stroke: color-mix(in srgb, var(--sft-primary) 70%, transparent) !important;
}
.drawflow .drawflow-node .input,
.drawflow .drawflow-node .output {
  width: 12px !important; height: 12px !important;
  background: var(--sft-bg-card) !important;
  border: 2px solid color-mix(in srgb, var(--sft-primary) 80%, transparent) !important;
}

/* ══ ③ 浮遊物 ══ */
/* 上中央の統計ピル: 絵文字を外した (JS) ので色の点＋件数の控えめな列に。
   合計はこの列の「= N」が出すので、右上の「N nodes」は重複として隠す */
#eab-node-stats {
  background: color-mix(in srgb, var(--sft-bg-card) 70%, transparent) !important;
  border: 1px solid var(--eab-skin-line) !important; box-shadow: none !important;
  color: var(--sft-text-muted); font-variant-numeric: tabular-nums;
}
#eab-node-stats .eab-stat-item { gap: 5px; }
#eab-node-count { display: none !important; }
/* テーマ切替: 絵文字 (🌙/☀️) → 線のアイコン */
.eab-theme-btn { font-size: 0 !important; position: relative; }
.eab-theme-btn::before {
  content: ""; position: absolute; inset: 8px; background: var(--sft-text-secondary);
  -webkit-mask: var(--eab-skin-theme-ico) center / contain no-repeat; mask: var(--eab-skin-theme-ico) center / contain no-repeat;
  --eab-skin-theme-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E");
}
[data-sft-theme="dark"] .eab-theme-btn::before {
  --eab-skin-theme-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E");
}
.eab-theme-btn:hover::before { background: var(--sft-text); }
#eab-zoom-controls, #eab-minimap, #eab-snap-toggle {
  background: color-mix(in srgb, var(--sft-bg-card) 92%, transparent) !important;
  border: 1px solid var(--eab-skin-line) !important; border-radius: var(--eab-skin-radius) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.25) !important; backdrop-filter: blur(6px);
}
/* 一時通知: 明朝体で白い箱 → 画面と同じ書体・同じ面 */
.sft-toast {
  font-family: var(--eab-skin-font) !important;
  background: var(--sft-bg-card) !important; color: var(--sft-text) !important;
  border: 1px solid var(--eab-skin-line); border-left: 3px solid var(--sft-primary);
  border-radius: var(--eab-skin-radius) !important; font-weight: 500 !important;
}

/* ══ ④ 設定欄 ══ */
.eab-prop-context { padding-bottom: 12px; border-bottom: 1px solid var(--eab-skin-line); margin-bottom: 4px; }
.eab-prop-context-icon { display: none !important; }   /* 絵文字の見出しアイコンは外す (名前と分類札で足りる) */
.eab-prop-group { padding: 10px 0; margin: 0 !important; border-bottom: 1px solid color-mix(in srgb, var(--eab-skin-line) 60%, transparent); }
.eab-prop-label {
  font-size: 10.5px !important; font-weight: 600 !important; text-transform: uppercase;
  letter-spacing: .06em; color: var(--sft-text-muted) !important; margin-bottom: 6px !important;
}
.eab-prop-input, .eab-prop-select {
  height: 34px; border-radius: 8px !important; border-color: var(--eab-skin-line) !important;
  font-size: 13px !important; font-variant-numeric: tabular-nums;
}
.eab-prop-select {
  -webkit-appearance: none; appearance: none; padding-right: 30px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 10px center !important; background-size: 14px !important;
}
.eab-prop-input:focus, .eab-prop-select:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--sft-primary) 22%, transparent); }
.eab-right-tab { border-radius: 8px 8px 0 0; }

/* ════════════════ 第 2 弾 ════════════════ */

/* ⑤ 書体: body に指定が無く Times New Roman に落ちていた (トーストの明朝体の根) → 全体を Inter に */
body, .eab-wrapper, .eab-wrapper button, .eab-wrapper input, .eab-wrapper select, .eab-wrapper textarea, .sft-toast {
  font-family: var(--eab-skin-font) !important;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}

/* EA / Indicator の切替 (Builder は 1 つ・インジケーター側は /ea-builder/indicator)。
   細い枠の中で、今いる側だけを塗る。見出しの他の部品 (Upgrade・PRO の札) と同じ細い枠。 */
.eab-mode {
  display: inline-flex; align-items: center; gap: 2px; padding: 2px; flex: none;
  border: 1px solid var(--eab-skin-line, var(--sft-border)); border-radius: 999px;
}
.eab-mode-item {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; line-height: 1.2; padding: 4px 12px; border-radius: 999px;
  color: var(--sft-text-secondary); text-decoration: none; white-space: nowrap;
}
.eab-mode-item:hover { color: var(--sft-text); }
.eab-mode-item.is-active { background: var(--sft-primary); color: var(--sft-on-primary); }
.eab-mode-item:focus-visible { outline: 2px solid var(--sft-primary); outline-offset: 2px; }
@media (max-width: 768px) {
  .eab-mode-item { min-height: 44px; min-width: 44px; padding: 0 16px; font-size: 13px; }
}

/* ⑥ 見出し左: ロゴは白で締め、プロジェクト名は「押すと名前を変えられる札」に */
.eab-header-left .eab-logo { color: var(--sft-text) !important; font-weight: 700; letter-spacing: -.01em; }
#eab-back-dash { color: var(--sft-text-muted) !important; }
#eab-project-name {
  padding: 4px 10px; border-radius: 8px; border: 1px solid transparent;
  color: var(--sft-text-secondary) !important; font-weight: 500;
}
#eab-project-name:hover { border-color: var(--eab-skin-line); background: var(--sft-bg-hover); color: var(--sft-text) !important; }
/* 見出し右: 操作の組ごとに細い仕切り (元に戻す | 保存・作る・測る・ソース | その他) */
@media (min-width: 769px) {
  #eab-btn-save-json { margin-left: 6px; }
  #eab-btn-save-json::before, #eab-more-wrap::before {
    content: ""; position: absolute; left: -8px; top: 7px; bottom: 7px; width: 1px; background: var(--eab-skin-line);
  }
  #eab-btn-save-json, #eab-more-wrap { position: relative; }
  #eab-more-wrap { margin-left: 8px; }
}

/* ⑦ キャンバス: のっぺりした黒 → 中央がわずかに明るい奥行き＋細かい点 */
.eab-canvas-wrap {
  background-color: var(--sft-bg) !important;
  background-image:
    radial-gradient(ellipse 70% 60% at 50% 45%, color-mix(in srgb, var(--sft-primary) 7%, transparent), transparent 70%),
    radial-gradient(color-mix(in srgb, #94a3b8 16%, transparent) 1px, transparent 1.2px) !important;
  background-size: 100% 100%, 22px 22px !important;
}

/* ⑧ ノード: 幅を揃え、値は小さな札に。選択は外側の柔らかい輪 */
.eab-node-mindmap { min-width: 128px; }
.eab-node-label { font-size: 13px !important; font-weight: 600 !important; margin-bottom: 4px; }
.eab-node-param-main {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  background: color-mix(in srgb, #94a3b8 12%, transparent);
  font-size: 11px !important; line-height: 18px;
}
.drawflow .drawflow-node.selected {
  border-color: color-mix(in srgb, var(--sft-primary) 80%, transparent) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sft-primary) 16%, transparent), 0 10px 30px rgba(0,0,0,.35) !important;
}
.drawflow .drawflow-node:hover { border-color: color-mix(in srgb, var(--sft-text-muted) 60%, transparent); }
/* 出口は塗り・入口は中抜き (流れの向きが一目で分かる) */
.drawflow .drawflow-node .output { background: var(--sft-primary) !important; border-color: var(--sft-primary) !important; }

/* ⑨ Preflight の箱: 見出しを小さく・中身を詰める (面と大きさはタブレット以上だけ・スマホは元の配置) */
@media (min-width: 769px) {
  #eab-risk-panel {
    background: color-mix(in srgb, var(--sft-bg-card) 92%, transparent) !important;
    border: 1px solid var(--eab-skin-line) !important; border-radius: var(--eab-skin-radius) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,.25) !important; backdrop-filter: blur(8px);
    padding: 0 !important; width: 360px; max-width: calc(100% - 32px); overflow: hidden;
  }
  .eab-risk-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .eab-risk-head { padding: 10px 14px !important; border-bottom: 1px solid var(--eab-skin-line); }
  .eab-risk-title { font-size: 12.5px !important; font-weight: 600 !important; letter-spacing: .01em; }
  .eab-risk-summary, .eab-risk-list { font-size: 12px !important; line-height: 1.6 !important; padding: 10px 14px !important; margin: 0 !important; }
  .eab-risk-list li { padding: 2px 0 !important; }
}
.eab-risk-toggle { color: var(--sft-text-muted) !important; }

/* ⑩ ミニマップ: 色の塊を弱め、今見ている枠を主役に */
.eab-minimap-node { opacity: .5; border-radius: 3px; }
#eab-minimap-vp {
  border: 1px solid color-mix(in srgb, var(--sft-primary) 60%, transparent) !important;
  background: color-mix(in srgb, var(--sft-primary) 7%, transparent) !important; border-radius: 6px;
}

/* ⑪ 右の設定欄 */
/* タブ: 下線 → 小さな切替 (選ばれた札だけ面が付く) */
.eab-right-tabs { gap: 4px; padding: 8px 10px !important; border-bottom: 1px solid var(--eab-skin-line); }
.eab-right-tab {
  border-radius: 8px !important; padding: 6px 10px !important;
  border-bottom: 0 !important; box-shadow: none !important; color: var(--sft-text-muted) !important;
}
.eab-right-tab:hover { color: var(--sft-text) !important; background: var(--sft-bg-hover); }
.eab-right-tab.eab-right-tab-active {
  color: var(--sft-primary-text) !important; background: color-mix(in srgb, var(--sft-primary) 12%, transparent) !important;
}
.eab-right-tab-active::after { display: none !important; }
/* 選んだ部品の名前 */
.eab-prop-context-name { font-size: 15px !important; font-weight: 700 !important; letter-spacing: -.01em; }
.eab-prop-context-cat { border-radius: 999px !important; padding: 1px 8px !important; font-size: 10px !important; letter-spacing: .06em; }
.eab-prop-context-desc { color: var(--sft-text-muted) !important; }
/* ヒント: 箱 → 左の細い線 */
.eab-prop-usage-hint {
  background: color-mix(in srgb, var(--sft-primary) 6%, transparent) !important;
  border: 0 !important; border-left: 2px solid color-mix(in srgb, var(--sft-primary) 70%, transparent) !important;
  border-radius: 0 8px 8px 0 !important; font-size: 12px !important;
}
/* 用語の「?」: 上付き文字 → 小さな丸 */
.eab-glossary { text-decoration: none !important; border-bottom: 1px dotted color-mix(in srgb, var(--sft-text-muted) 70%, transparent); }
.eab-glossary-q {
  display: inline-grid; place-items: center; width: 13px; height: 13px; margin-left: 3px; vertical-align: 1px;
  border-radius: 50%; font-size: 9px !important; line-height: 1; top: 0 !important;
  color: var(--sft-text-muted) !important; border: 1px solid color-mix(in srgb, var(--sft-text-muted) 60%, transparent);
}
/* 数値欄の白いスピン: 普段は隠し、触ったときだけ淡く出す */
.eab-prop-input[type="number"]::-webkit-inner-spin-button,
.eab-prop-input[type="number"]::-webkit-outer-spin-button { opacity: 0 !important; }
.eab-prop-input[type="number"]:hover::-webkit-inner-spin-button,
.eab-prop-input[type="number"]:focus::-webkit-inner-spin-button { opacity: .5 !important; filter: invert(1); }

/* ════════════════ 第 3 弾 ════════════════ */

/* ⑫ ノードを横長のコンパクトなカードに: 左にアイコン、右に「分類・名前・値」 */
.eab-node-mindmap {
  display: grid !important; grid-template-columns: 40px auto; grid-template-rows: auto auto;
  column-gap: 12px; row-gap: 3px; align-items: center; text-align: left !important;
  padding: 12px 18px 12px 16px !important; min-width: 176px !important;
}
.eab-node-icon-lg { grid-row: 1 / span 2; margin: 0 !important; width: 40px !important; height: 40px !important; }
.eab-node-icon-lg::before { inset: 10px; }
.eab-node-label { grid-column: 2; margin: 0 !important; font-size: 13.5px !important; line-height: 1.25; text-align: left; }
/* 分類の小見出し (INDICATOR・CONDITION…) を名前の上に */
.eab-node-label::before {
  display: block; margin-bottom: 1px;
  font-size: 9.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: color-mix(in srgb, var(--eab-skin-cat) 85%, white 15%);
}
/* util は Start 以外 (MTF など) もあるので Utility。Start だけ Trigger (同じ強さなので後に置く) */
.eab-node-cat-util      .eab-node-label::before { content: "Utility"; }
.eab-node-type-start    .eab-node-label::before { content: "Trigger"; }
.eab-node-cat-indicator .eab-node-label::before { content: "Indicator"; }
.eab-node-cat-condition .eab-node-label::before { content: "Condition"; }
.eab-node-cat-action    .eab-node-label::before { content: "Order"; }
.eab-node-cat-filter    .eab-node-label::before { content: "Filter"; }
.eab-node-cat-money     .eab-node-label::before { content: "Money"; }
.eab-node-cat-exit      .eab-node-label::before { content: "Exit"; }
.eab-node-cat-price     .eab-node-label::before { content: "Price"; }
.eab-node-param-main { grid-column: 2; justify-self: start; margin: 0 !important; }
/* 色帯はカードの縦いっぱいに・角に沿わせる */
.drawflow .drawflow-node::before { top: 0; bottom: 0; width: 3px; border-radius: 12px 0 0 12px; }
.drawflow .drawflow-node { overflow: visible; }

/* ⑬ 接続線: 淡く光らせて「つながっている」感を出す */
.drawflow .connection .main-path { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--sft-primary) 45%, transparent)); }

/* ⑭ スマホの仕上げ (2026-09-27 実機幅 360〜430px で点検)
   - テンプレ一覧 (空キャンバスのとき #eab-canvas-hint に出る) の上に、キャンバス用の
     ズーム・プロパティ・スナップ・Preflight が浮いて見出しやカードに重なっていた
     → 一覧が出ている間は隠す
   - 見出しの「MQL5 · MetaTrader 5」行は MT5 専用なので情報がなく、画面の高さを 50px 使っていた
   - 押す部品を 40px 以上に (ズーム 28px・Preflight の開閉 22x16px・Compile 高さ 28px)
   - 一覧のカードは 5 つを横 1 列に詰めて説明が 1 語ずつ折り返していた → 名前と札の下に説明
   - 絞り込みタブは折り返して「All Positions」が 2 行・「Portfolio」が画面外 → 1 行で横に送る */
@media (max-width: 768px) {
  #eab-canvas-wrap:has(#eab-canvas-hint:not(.eab-hidden)) #eab-zoom-controls,
  #eab-canvas-wrap:has(#eab-canvas-hint:not(.eab-hidden)) .eab-mobile-prop-btn,
  #eab-canvas-wrap:has(#eab-canvas-hint:not(.eab-hidden)) #eab-snap-toggle,
  #eab-canvas-wrap:has(#eab-canvas-hint:not(.eab-hidden)) #eab-risk-panel { display: none !important; }
  /* 「パレット」は空のキャンバスからノードを足す入口なので一覧の上でも残す。
     最後のカードがそのボタン (下から 70〜114px) に隠れないよう一覧の下を空ける。 */
  .eab-landing { padding-bottom: 128px; }

  .eab-header .eab-header-center { display: none; }

  #eab-zoom-controls .eab-zoom-btn { width: 40px; height: 40px; }
  #eab-risk-panel .eab-risk-toggle { min-width: 40px; min-height: 40px; }
  #eab-btn-compile { min-height: 40px; }
  #eab-snap-toggle { min-height: 40px; }
  #eab-landing-templates-btn, #eab-welcome-blank, #eab-landing-tour-btn { min-height: 44px; }
  /* 見出しの「Upgrade」(23px) と右上の「← AIStrategyMiner」(26px) も 40px に。
     Compile が既に 40px なので見出しの行は伸びない。固定リンクは上に詰めて下へ伸ばしすぎない
     (index.html の <style> に勝つよう a. を付ける) */
  #eab-upgrade-cta { display: inline-flex; align-items: center; min-height: 40px; }
  a.eab-home-link { display: inline-flex; align-items: center; min-height: 40px; top: 4px; }
  /* 一覧へ戻る「← Projects」(21px・薄い 11px の字でボタンに見えない) も 40px・Upgrade と同じ細い枠に */
  #eab-back-dash:not(.eab-hidden) {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px;
    font-size: 13px; border: 1px solid var(--eab-skin-line, var(--sft-border)); border-radius: 999px;
  }
  .eab-palette-search { min-height: 40px; }

  .eab-landing-filter { overflow-x: auto; scrollbar-width: none; }
  .eab-landing-filter::-webkit-scrollbar { display: none; }
  .eab-landing-filter-btn { flex: 0 0 auto; white-space: nowrap; min-height: 36px; }
}
@media (max-width: 480px) {
  .eab-landing-tpl-card {
    display: grid; grid-template-columns: 36px 1fr auto; column-gap: 10px; row-gap: 2px;
    align-items: center; justify-items: start;
  }
  .eab-landing-tpl-icon { grid-row: 1 / span 3; font-size: 26px; }
  .eab-landing-tpl-name { grid-column: 2; grid-row: 1; }
  .eab-landing-tpl-study { grid-column: 3; grid-row: 1; }
  .eab-landing-tpl-desc { grid-column: 2 / span 2; grid-row: 2; }
  .eab-landing-tpl-meta { grid-column: 2 / span 2; grid-row: 3; }
  .eab-landing-tpl-seek { grid-column: 2 / span 2; grid-row: 4; }
}
/* ── 線アイコン (ea-line-icons.js)。絵文字をやめ、線 1 本の絵を文字色で描く ── */
.eab-licon { display: inline-block; vertical-align: -0.14em; flex-shrink: 0; }
.eab-landing-tpl-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 12px; font-size: 22px;
    color: var(--sft-primary-text); background: color-mix(in srgb, var(--sft-primary) 12%, transparent);
}
.eab-template-icon { color: var(--sft-primary-text); }
.eab-guide-card-icon { color: var(--sft-primary-text); }
.eab-settings-section-toggle .eab-section-icon,
.eab-filter-icon,
.eab-lot-option-label .eab-licon { color: var(--sft-text-muted, currentColor); }
.eab-palette-item-icon .eab-licon,
.eab-help-noderef-icon .eab-licon,
.eab-prop-context-icon .eab-licon { font-size: 15px; }