/* ═══════════════════════════════════════════════════════════
   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: #f59e0b;
    --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 "← mt5depot" 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);
    white-space: nowrap;
}
.eab-badge {
    font-size: 10px;
    font-weight: 700;
    background: var(--sft-primary);
    color: #fff;
    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: #fff;
    border-color: var(--sft-primary);
}
.eab-btn-primary:hover { background: var(--sft-primary-dark); }
/* dark の accent(#10b981)は白文字で2.54と AA 未達 → 白文字が乗る fill だけ
   emerald-700(#047857, 白で5.5:1)に。accent 文字色(#10b981)は明るいまま据置 */
[data-sft-theme="dark"] .eab-btn-primary,
[data-sft-theme="dark"] .eab-badge,
[data-sft-theme="dark"] .eab-guide-step-num {
    background: #047857;
    border-color: #047857;
}
[data-sft-theme="dark"] .eab-btn-primary:hover { background: #065f46; }
.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);
    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);
    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: #fff;
    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(16, 185, 129,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-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: #fff;
}

/* テンプレートグリッド */
.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: #fff;
    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: #fff;
    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);
    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);
    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: #fff;
    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%;
    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; }
}

@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; }
    #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; }
    .eab-zoom-controls { bottom: 80px; right: 10px; }
    .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(245,158,11,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-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);
}
/* 一時停止中は進捗バーのアニメを止め、少し淡く見せる */
.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: #fff;
}

/* ══════════════════════════════════════════
   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-opt { font-weight: 400; color: var(--sft-text-muted); }
.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-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--sft-text-secondary);
    margin-top: 4px;
}
.eab-submit-consent input { margin-top: 2px; flex-shrink: 0; }

/* ── 強さを測定（概算）モーダル ── */
.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);
}
/* ── 公開確認 (P2): preview API の gate / 自動メタ パネル ── */
.eab-pub-preview {
    margin: 4px 0 14px;
    padding: 10px 12px;
    border: 1px solid var(--sft-border);
    border-radius: 8px;
    background: rgba(0,0,0,0.015);
}
.eab-pub-msg { margin: 0; font-size: 12px; color: var(--sft-text-secondary); }
.eab-pub-head { margin-bottom: 6px; }
.eab-pub-gate {
    display: inline-block;
    padding: 2px 9px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
}
.eab-pub-gate--ok {
    color: #10b981;
    background: rgba(16,185,129,0.10);
    border: 1px solid rgba(16,185,129,0.30);
}
.eab-pub-gate--no {
    color: #f59e0b;
    background: rgba(245,158,11,0.10);
    border: 1px solid rgba(245,158,11,0.30);
}
.eab-pub-chips { margin: 4px 0 2px; }
.eab-pub-chip {
    display: inline-block;
    margin: 2px 3px 0 0;
    padding: 1px 8px;
    font-size: 11px;
    border-radius: 999px;
    background: var(--sft-bg-subtle, rgba(0,0,0,0.05));
    color: var(--sft-text-secondary);
    border: 1px solid var(--sft-border);
}
.eab-pub-reasons {
    margin: 6px 0 0;
    padding-left: 18px;
    font-size: 12px;
    color: var(--sft-text-secondary);
}
.eab-pub-reasons li { margin: 2px 0; }
.eab-measure-publish { margin-top: 14px; text-align: center; }
.eab-measure-publish .eab-btn { width: 100%; }
.eab-btn-disabled,
.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-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); }
}
/* 公開モデル: DL 後の「プールに出す」既定 ON トグル (オプトアウト可) を強調表示。 */
.eab-submit-optin {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--sft-text);
    padding: 10px 12px;
    margin-bottom: 12px;
    border: 1px solid var(--sft-primary);
    border-radius: 8px;
    background: var(--sft-accent-soft, rgba(16, 185, 129, 0.08));
}
.eab-submit-optin input { margin-top: 2px; flex-shrink: 0; }
.eab-submit-optin em { color: var(--sft-text-secondary); font-style: normal; }
.eab-submit-private-note {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--sft-text-secondary);
    margin: 0 0 4px;
}
.eab-submit-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--sft-border-light);
}
.eab-submit-send-busy { opacity: 0.6; pointer-events: none; }

/* ══════════════════════════════════════════
   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: #fff;
    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: #fff;
}
.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, #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%);
    transition: transform 0.3s ease;
}
.eab-help-panel.eab-help-open { transform: translateX(0); }
.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);
    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);
    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);
    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);
}
.eab-dash-card-lang {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    background: var(--sft-primary);
    color: #fff;
    text-transform: uppercase;
}
.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: #fff;
    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: #fff; }
.eab-dash-view-btn:focus-visible { outline: 2px solid var(--sft-primary); outline-offset: -2px; }

/* ── リッチカード追加要素 ── */
.eab-dash-card-ver {
    display: inline-block; padding: 1px 6px; border-radius: 4px;
    font-size: 10px; font-weight: 600; background: var(--sft-bg-alt); color: var(--sft-text-muted);
}
.eab-dash-card-time { margin-inline-start: auto; }
.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-time { margin-inline-start: 0; }

/* ── 検索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; }
}

@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); }
.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); 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));
}

/* ── IB 口座ロック告知バー ──
   無料 ex5 は verified IB 口座 + WebRequest 許可でのみ起動する (fail-closed) ため、
   ビルダー上部に常時開示する。dismiss 可・compile 成功時に再表示 (ea-builder.js)。
   var() は既知 sft トークン + amber フォールバックで未定義でも崩れない。 */
.eab-ib-notice {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 14px;
    font-size: 12.5px; line-height: 1.45;
    color: var(--sft-text, #1e293b);
    background: var(--sft-warning-bg, rgba(245,158,11,0.10));
    border-bottom: 1px solid var(--sft-warning, #f59e0b);
    flex: 0 0 auto;
}
.eab-ib-notice-icon { flex: 0 0 16px; color: var(--sft-warning, #f59e0b); }
.eab-ib-notice-text { flex: 1 1 auto; }
.eab-ib-notice-text code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px; padding: 1px 5px; border-radius: 4px;
    background: var(--sft-surface-2, rgba(100,116,139,0.12));
}
.eab-ib-notice-link { color: var(--sft-primary, #2f6df6); font-weight: 600; white-space: nowrap; text-decoration: none; }
.eab-ib-notice-link:hover { text-decoration: underline; }
.eab-ib-notice-close {
    flex: 0 0 auto; background: none; border: none; cursor: pointer;
    font-size: 18px; line-height: 1; color: var(--sft-text-muted, #64748b);
    padding: 2px 6px; border-radius: 4px;
}
.eab-ib-notice-close:hover { color: var(--sft-text, #1e293b); background: var(--sft-surface-2, rgba(100,116,139,0.12)); }

/* ── アクセシビリティ: キーボードフォーカスの可視化 ──
   .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%; }