/* ==============================================================================
   G4 ENGINE — Interactive Flow Canvas  (V2)
   n8n-style: tabs, floating zoom, warm canvas, hex/wide/square node shapes
   ============================================================================== */

/* ── Page layout ───────────────────────────────────────────────────────────── */

.engine-page-fullscreen {
    /* Fixed overlay — positioned below .top-header (top set dynamically by router.js) */
    position: fixed;
    top: 52px; /* fallback: 8px main-content margin + 44px header min-height */
    left: 80px;
    right: 8px;
    bottom: 8px;
    border-radius: 0 0 12px 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 50;
    padding: 0;
    background-color: #f4f2ec;  /* warm grey — tab bar + panes inherit this */
}

[data-theme="dark"] .engine-page-fullscreen {
    background-color: #1f1f1f;  /* matches main canvas */
}

/* ── Top Bar ──────────────────────────────────────────────────────────────── */

.engine-topbar {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background: var(--bg-card);
    border-bottom: 1.5px solid var(--border-color);
    flex-shrink: 0;
    z-index: 100;
    gap: 12px;
    position: relative;
}

.engine-topbar-left {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    min-width: 120px;
}

.engine-topbar-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    min-width: 120px;
    justify-content: flex-end;
}

/* Flow name (editable) */
.engine-flow-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    padding: 4px 10px;
    border-radius: 6px;
    border: 1.5px solid transparent;
    transition: border-color 0.15s, background 0.15s;
    outline: none;
    min-width: 70px;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
}
.engine-flow-name:hover { border-color: var(--border-color); background: var(--bg-hover); }
.engine-flow-name:focus { border-color: #2e2e2e; background: var(--bg-card); }

/* ── Engine tab bar — below topbar, centered ─────────────────────────────── */

.engine-tab-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0 6px;
    background: transparent;
    border-bottom: none;
    flex-shrink: 0;
}

/* ── Tab Pills (n8n style) ────────────────────────────────────────────────── */

.engine-tabs {
    display: flex;
    align-items: center;
    background: rgba(0,0,0,0.06);
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
}

[data-theme="dark"] .engine-tabs {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

.engine-tab {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 8px;
    border: 1.5px solid transparent;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    background: transparent;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    white-space: nowrap;
}
.engine-tab i { font-size: 13px; }
.engine-tab:hover { color: var(--text-secondary); }
.engine-tab.active {
    background: #1c1c1e;
    color: #ffffff;
    border-color: transparent;
    box-shadow: none;
}
[data-theme="dark"] .engine-tab.active {
    background: var(--bg-card);
    border-color: var(--primary);
    color: #b8b8b8;
    box-shadow: none;
}

/* ── Toolbar buttons ──────────────────────────────────────────────────────── */

.engine-tb-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 12px;
    background: transparent;
    border: 1.5px solid var(--border-color);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    font-family: inherit;
}
.engine-tb-btn:hover { background: var(--bg-hover); color: var(--text-primary); }

.engine-save-btn { background: var(--bg-secondary); }

.engine-run-btn {
    background: #2e2e2e;
    color: #ffffff;
    border-color: #2e2e2e;
}
.engine-run-btn:hover   { background: #1f1f1f; border-color: #1f1f1f; color: #fff; }
.engine-run-btn.running { background: #f59e0b; border-color: #f59e0b; color: #fff; }

.engine-tb-divider {
    width: 1.5px;
    height: 22px;
    background: var(--border-color);
    border-radius: 2px;
    margin: 0 3px;
}

/* ── Add node wrapper + palette dropdown ──────────────────────────────────── */

.engine-add-wrap {
    position: relative;
}

.engine-node-palette {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 240px;
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.13), 0 2px 8px rgba(0,0,0,0.07);
    z-index: 400;
    overflow: hidden;
    padding: 6px;
}

.engine-palette-section-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 6px 10px 4px;
}

.engine-palette-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s;
}
.engine-palette-item:hover { background: var(--bg-hover); }

.engine-palette-dot {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 15px;
    flex-shrink: 0;
}

.engine-palette-info { flex: 1; min-width: 0; }
.engine-palette-label { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.engine-palette-sub   { font-size: 10px; color: var(--text-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Progress bar ─────────────────────────────────────────────────────────── */

.engine-progress-bar {
    height: 3px;
    background: var(--border-color);
    flex-shrink: 0;
    overflow: hidden;
}

.engine-progress-fill {
    height: 100%;
    width: 0%;
    background: #ef4444;
    transition: width 0.45s ease, background-color 0.5s ease;
}
.engine-progress-fill.pct-mid  { background: #f59e0b; }
.engine-progress-fill.pct-high { background: #10b981; }

/* ── Tab panes ────────────────────────────────────────────────────────────── */

.engine-tab-pane {
    display: none;
    flex: 1;
    position: relative;
    overflow: hidden;
    min-height: 0;
}
.engine-tab-pane.active {
    display: flex;
    flex-direction: column;
}

/* ── Canvas area ──────────────────────────────────────────────────────────── */

.engine-canvas-wrap {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
    background-color: #f4f2ec;   /* warm grey — matches original palette */
    background-image: radial-gradient(circle, rgba(0,0,0,0.055) 1.2px, transparent 1.2px);
    background-size: 20px 20px;
    cursor: grab;
    user-select: none;
}

[data-theme="dark"] .engine-canvas-wrap {
    background-color: #1a1a1a;   /* slightly deeper than canvas — canvas-within-canvas depth */
    background-image: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 20px 20px;
}

.engine-canvas-wrap.panning { cursor: grabbing; }

.engine-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 5000px;
    height: 5000px;
    transform-origin: 0 0;
}

.engine-svg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    overflow: visible;
}

/* ── Floating Zoom Controls (right side) ─────────────────────────────────── */

.engine-zoom-float {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    padding: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    z-index: 50;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.engine-zoom-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s;
    font-family: inherit;
}
.engine-zoom-btn:hover { background: var(--bg-hover); color: var(--text-primary); }

.engine-zoom-sep {
    width: 20px;
    height: 1px;
    background: var(--border-color);
    margin: 2px 0;
}

.engine-zoom-pct {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    min-width: 30px;
    text-align: center;
    padding: 2px 0;
}

/* ── Nodes ────────────────────────────────────────────────────────────────── */

.engine-node {
    position: absolute;
    cursor: pointer;
    user-select: none;
}

.engine-node-body {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    transition: border-color 0.15s, box-shadow 0.15s, filter 0.15s, transform 0.12s;
    /* Card style: white bg, colored border accent */
    background: var(--bg-card) !important;
    background-image: radial-gradient(circle, var(--dot-color) 1px, transparent 1px) !important;
    background-size: 18px 18px !important;
    border: 1.5px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0,0,0,0.07), 0 0 0 0 transparent;
}

/* ── Shape: trigger/pill ── */
.engine-node.shape-trigger .engine-node-body {
    min-width: 130px;
    padding: 10px 18px;
    border-radius: 40px;
    flex-direction: row;
    gap: 8px;
    justify-content: center;
}
.engine-node.shape-trigger .engine-node-label { text-align: left; max-width: unset; }

/* ── Shape: circle ── */
.engine-node.shape-circle .engine-node-body {
    width: 88px;
    height: 88px;
    border-radius: 50%;
}

/* ── Shape: rect (standard) ── */
.engine-node.shape-rect .engine-node-body {
    min-width: 120px;
    padding: 12px 14px;
    border-radius: 14px;
}

/* ── Shape: wide rect (Bulk Analyzer) ── */
.engine-node.shape-wide .engine-node-body {
    min-width: 148px;
    padding: 10px 18px;
    border-radius: 14px;
    flex-direction: row;
    gap: 8px;
    justify-content: center;
}
.engine-node.shape-wide .engine-node-label { text-align: left; max-width: unset; }

/* ── Shape: square (Calculator) ── */
.engine-node.shape-square .engine-node-body {
    width: 82px;
    height: 82px;
    border-radius: 18px;
}

/* ── Shape: hexagon (Gate Checker) — clip-path, colored bg, dark text ── */
.engine-node.shape-hex .engine-node-body {
    width: 90px;
    height: 90px;
    border: none;
    border-radius: 0;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    box-shadow: none;
    background: var(--node-color, #ef4444) !important;
    background-image: radial-gradient(circle, rgba(255,255,255,0.18) 1px, transparent 1px) !important;
    background-size: 14px 14px !important;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.14));
}
.engine-node.shape-hex .engine-node-label {
    color: rgba(0,0,0,0.85) !important;
    text-shadow: 0 1px 3px rgba(255,255,255,0.5) !important;
}
.engine-node.shape-hex .engine-node-icon {
    background: rgba(255,255,255,0.25) !important;
    color: #1a1a1a !important;
}

/* ── Shape: diamond ── */
.engine-node.shape-diamond .engine-node-body {
    width: 86px;
    height: 86px;
    border-radius: 14px;
    transform: rotate(45deg);
    flex-direction: column;
    gap: 0;
}
.engine-node.shape-diamond .engine-node-icon  { transform: rotate(-45deg); }
.engine-node.shape-diamond .engine-node-label { transform: rotate(-45deg); margin-top: 2px; }

/* ── Shape: funnel/cone (Filter node) — colored bg, dark text ── */
.engine-node.shape-funnel {
    padding-bottom: 20px;
}
.engine-node.shape-funnel .engine-node-body {
    width: 80px;
    height: 80px;
    border: none;
    border-radius: 0;
    box-shadow: none;
    clip-path: polygon(
        0% 0%, 100% 0%,
        100% 12%, 60% 50%,
        60% 100%, 40% 100%,
        40% 50%, 0% 12%
    );
    background: var(--node-color, #f97316) !important;
    background-image: radial-gradient(circle, rgba(255,255,255,0.2) 1px, transparent 1px) !important;
    background-size: 14px 14px !important;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.13));
}
.engine-node.shape-funnel .engine-node-label {
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    color: rgba(0,0,0,0.85) !important;
    text-shadow: 0 1px 3px rgba(255,255,255,0.5) !important;
}
.engine-node.shape-funnel .engine-node-icon {
    background: rgba(255,255,255,0.25) !important;
    color: #1a1a1a !important;
}
/* Status via drop-shadow on funnel — handled in unified status block below */

/* ── Shape: G4 Engine (multi-in/out central node) — dark gradient, overrides card style ── */
.engine-node.shape-engine .engine-node-body {
    min-width: 140px;
    min-height: 100px;
    padding: 16px 22px;
    border-radius: 20px;
    border: 2.5px solid #1a1a1a !important;
    background: linear-gradient(135deg, #1c1c1e 0%, #2a2a2d 100%) !important;
    background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px) !important;
    background-size: 12px 12px !important;
    box-shadow: 0 6px 28px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.06) !important;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
}
.engine-node.shape-engine .engine-node-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #f59e0b, #ef4444) !important; /* keep gradient icon box for engine */
    font-size: 22px;
    color: white;
    box-shadow: 0 3px 12px rgba(245,158,11,0.4);
    animation: engine-spin-glow 4s ease-in-out infinite;
}
.engine-node.shape-engine .engine-node-label {
    color: #f0f0f0;
    font-size: 12px;
    font-weight: 800;
    max-width: 120px;
    letter-spacing: 0.03em;
}
/* Subtle gear-spin glow on the icon */
@keyframes engine-spin-glow {
    0%,100% { box-shadow: 0 3px 12px rgba(245,158,11,0.4); }
    50%      { box-shadow: 0 3px 20px rgba(245,158,11,0.7); }
}
/* Multi-port layout: stacked ports for engine node */
.engine-node.shape-engine .engine-port-in {
    left: -8px;
}
.engine-node.shape-engine .engine-port-out {
    right: -8px;
}
/* Additional ports are positioned by JS with top offset */
.engine-node.shape-engine .engine-port {
    background: var(--bg-card);
    border-color: #f59e0b;
    width: 14px;
    height: 14px;
}
.engine-node.shape-engine .engine-port:hover {
    background: #f59e0b;
    border-color: #f59e0b;
}
/* Selected + status for engine node */
.engine-node.shape-engine.selected .engine-node-body {
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245,158,11,0.25), 0 6px 28px rgba(0,0,0,0.3);
}
.engine-node.shape-engine.status-running .engine-node-body { box-shadow: 0 0 0 3px rgba(245,158,11,0.3), 0 6px 28px rgba(0,0,0,0.25); }
.engine-node.shape-engine.status-done    .engine-node-body { border-color: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,0.2); }
.engine-node.shape-engine.status-error   .engine-node-body { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.2); }

/* Requirements badge on engine node */
.engine-node-req-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #ef4444;
    color: white;
    font-size: 9px;
    font-weight: 800;
    padding: 2px 5px;
    border-radius: 8px;
    border: 2px solid var(--bg-card);
    white-space: nowrap;
    z-index: 10;
}
.engine-node-req-badge.ready { background: #10b981; }

/* ── Selected state — colored ring + scale ── */
.engine-node.selected .engine-node-body {
    box-shadow: 0 0 0 2.5px var(--node-color, #2e2e2e), 0 4px 20px rgba(0,0,0,0.14);
    border-color: var(--node-color, #2e2e2e);
    transform: scale(1.04);
}
.engine-node.shape-hex.selected .engine-node-body,
.engine-node.shape-funnel.selected .engine-node-body {
    border: none; box-shadow: none; transform: none;
    filter: drop-shadow(0 0 8px var(--node-color, #2e2e2e)) drop-shadow(0 3px 10px rgba(0,0,0,0.3));
}

/* ── Execution status ── */
.engine-node.status-running .engine-node-body { box-shadow: 0 0 0 3px rgba(245,158,11,0.6), 0 4px 16px rgba(0,0,0,0.2); }
.engine-node.status-done    .engine-node-body { box-shadow: 0 0 0 3px rgba(16,185,129,0.6), 0 4px 16px rgba(0,0,0,0.2); }
.engine-node.status-error   .engine-node-body { box-shadow: 0 0 0 3px rgba(239,68,68,0.6), 0 4px 16px rgba(0,0,0,0.2); }

/* Clip-path shapes: use drop-shadow for status */
.engine-node.shape-hex.status-running .engine-node-body { border: none; box-shadow: none; filter: drop-shadow(0 0 8px rgba(245,158,11,0.7)); }
.engine-node.shape-hex.status-done    .engine-node-body { border: none; box-shadow: none; filter: drop-shadow(0 0 8px rgba(16,185,129,0.7)); }
.engine-node.shape-hex.status-error   .engine-node-body { border: none; box-shadow: none; filter: drop-shadow(0 0 8px rgba(239,68,68,0.7)); }
.engine-node.shape-funnel.status-running .engine-node-body { border: none; box-shadow: none; filter: drop-shadow(0 0 8px rgba(245,158,11,0.7)); }
.engine-node.shape-funnel.status-done    .engine-node-body { border: none; box-shadow: none; filter: drop-shadow(0 0 8px rgba(16,185,129,0.7)); }
.engine-node.shape-funnel.status-error   .engine-node-body { border: none; box-shadow: none; filter: drop-shadow(0 0 8px rgba(239,68,68,0.7)); }

/* ── Node icon — colored box with white icon ── */
.engine-node-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--node-color, #2e2e2e) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #ffffff !important;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

/* ── Node label — dark text on white card ── */
.engine-node-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-primary) !important;
    text-align: center;
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-shadow: none !important;
}

/* ── Node status ring (pulsing dot top-right) ── */
.engine-node-status-ring {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.9);
    background: rgba(255,255,255,0.3);
    z-index: 5;
}
.engine-node.status-running .engine-node-status-ring { background: #f59e0b; border-color: #fff; animation: engine-pulse 1s ease-in-out infinite; }
.engine-node.status-done    .engine-node-status-ring { background: #10b981; border-color: #fff; }
.engine-node.status-error   .engine-node-status-ring { background: #ef4444; border-color: #fff; }

@keyframes engine-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%       { transform: scale(1.25); opacity: 0.75; }
}

/* ── Node completion ring (SVG overlay) ── */
.engine-completion-svg {
    position: absolute;
    top: -5px; left: -5px;
    pointer-events: none;
    z-index: 4;
    overflow: visible;
}
.engine-completion-circle {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.4s ease, stroke 0.4s ease;
}

/* ── Connection ports ─────────────────────────────────────────────────────── */

.engine-port {
    position: absolute;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 2.5px solid #b0b7c3;
    cursor: crosshair;
    z-index: 20;
    transition: border-color 0.15s, transform 0.15s, background 0.15s;
}
.engine-port:hover {
    border-color: #2e2e2e;
    background: #2e2e2e;
    transform: scale(1.25);
}

.engine-port-in {
    left: -7px;
    top: 50%;
    transform: translateY(-50%);
}
.engine-port-in:hover { transform: translateY(-50%) scale(1.25); }

.engine-port-out {
    right: -7px;
    top: 50%;
    transform: translateY(-50%);
}
.engine-port-out:hover { transform: translateY(-50%) scale(1.25); }

/* Diamond ports */
.shape-diamond .engine-port-in  { left: -7px;  top: 50%; transform: translateY(-50%) rotate(-45deg); }
.shape-diamond .engine-port-out { right: -7px; top: 50%; transform: translateY(-50%) rotate(-45deg); }

/* ── SVG Connections ──────────────────────────────────────────────────────── */

.engine-conn-hitbox {
    fill: none;
    stroke: transparent;
    stroke-width: 14;
    pointer-events: stroke;
    cursor: pointer;
}

.engine-conn-line {
    fill: none;
    stroke: #c8cdd8;
    stroke-width: 2.5;
    pointer-events: none;
    marker-end: url(#g4-arrow);
    transition: stroke 0.15s;
}

.engine-conn-group:hover .engine-conn-line { stroke: #6b7280; }
.engine-conn-group.active .engine-conn-line { stroke: #2e2e2e; marker-end: url(#g4-arrow-active); }

/* ── Config panel (right slide-out) ──────────────────────────────────────── */

.engine-config-panel {
    position: absolute;
    right: -340px;
    top: 0;
    width: 320px;
    bottom: 0;
    background: var(--bg-card);
    border-left: 1.5px solid var(--border-color);
    display: flex;
    flex-direction: column;
    transition: right 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 150;
    overflow: hidden;
    box-shadow: -4px 0 20px rgba(0,0,0,0.06);
}
.engine-config-panel.open { right: 0; }

.engine-config-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.engine-config-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: white;
    flex-shrink: 0;
}

.engine-config-title   { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.engine-config-subtitle { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

.engine-config-close {
    margin-left: auto;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.engine-config-close:hover { background: var(--bg-hover); color: var(--text-primary); }

.engine-config-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}
.engine-config-body::-webkit-scrollbar { width: 4px; }
.engine-config-body::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 2px; }

.engine-config-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.engine-config-run-btn {
    flex: 1;
    padding: 9px;
    background: #2e2e2e;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: background 0.15s;
    font-family: inherit;
    min-width: 100px;
}
.engine-config-run-btn:hover   { background: #1f1f1f; }
.engine-config-run-btn.running { background: #f59e0b; }

.engine-config-open-btn {
    padding: 9px 11px;
    background: var(--bg-secondary);
    border: 1.5px solid var(--border-color);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s;
    font-family: inherit;
    white-space: nowrap;
}
.engine-config-open-btn:hover { background: var(--bg-hover); color: var(--text-primary); }

.engine-config-delete-btn {
    padding: 9px 11px;
    background: transparent;
    border: 1.5px solid var(--border-color);
    color: var(--text-muted);
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
}
.engine-config-delete-btn:hover { background: #fef2f2; border-color: #ef4444; color: #ef4444; }

/* ── Config form fields ───────────────────────────────────────────────────── */

.engine-field { margin-bottom: 14px; }

.engine-field label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 5px;
}
.engine-field label .engine-required-dot {
    display: inline-block;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #ef4444;
    margin-left: 3px;
    vertical-align: middle;
    margin-top: -2px;
}

.engine-field input,
.engine-field select,
.engine-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    background: var(--bg-secondary);
    border: 1.5px solid var(--border-color);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-primary);
    font-family: inherit;
    transition: border-color 0.15s;
}
.engine-field input:focus,
.engine-field select:focus,
.engine-field textarea:focus {
    outline: none;
    border-color: #2e2e2e;
    background: var(--bg-card);
}
.engine-field textarea { min-height: 80px; resize: vertical; }

.engine-field-hint { font-size: 11px; color: var(--text-muted); margin-top: 4px; line-height: 1.4; }

.engine-config-section-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
    margin-top: 4px;
}

/* No-config message */
.engine-no-config-msg {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 0 10px;
    gap: 8px;
    color: var(--text-muted);
}
.engine-no-config-msg i { font-size: 32px; opacity: 0.35; }
.engine-no-config-msg p { font-size: 12px; line-height: 1.5; margin: 0; }

/* Completion hint in config */
.engine-completion-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 11px;
    font-weight: 600;
}
.engine-completion-hint.hint-ok    { background: #ecfdf5; color: #059669; }
.engine-completion-hint.hint-warn  { background: #fffbeb; color: #b45309; }
.engine-completion-hint.hint-error { background: #fef2f2; color: #dc2626; }

/* ── Results section in config body ──────────────────────────────────────── */

.engine-result-section {
    margin-top: 16px;
    border-top: 1px solid var(--border-color);
    padding-top: 14px;
}
.engine-result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.engine-result-label {
    font-size: 10px; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.06em;
}
.engine-result-count-badge {
    font-size: 11px; font-weight: 700;
    background: var(--bg-secondary); color: var(--text-secondary);
    padding: 2px 8px; border-radius: 20px; border: 1px solid var(--border-color);
}
.engine-result-list { max-height: 180px; overflow-y: auto; }
.engine-result-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 0; border-bottom: 1px solid var(--border-light);
    font-size: 12px; color: var(--text-secondary);
}
.engine-result-item:last-child { border-bottom: none; }
.engine-result-asin { font-family: monospace; font-size: 11px; font-weight: 600; color: var(--text-primary); }
.engine-result-score { font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 4px; }
.score-elite { background: #ecfdf5; color: #059669; }
.score-good  { background: #eff6ff; color: #2563eb; }
.score-fair  { background: #fffbeb; color: #d97706; }
.score-weak  { background: #fef2f2; color: #dc2626; }

/* ── Run Results tab view ─────────────────────────────────────────────────── */

.engine-results-view, .engine-history-view {
    flex: 1;
    overflow-y: auto;
    padding: 24px 28px;
    background: #f4f2ec;
    background-image: radial-gradient(circle, rgba(0,0,0,0.055) 1px, transparent 1px);
    background-size: 22px 22px;
}
[data-theme="dark"] .engine-results-view,
[data-theme="dark"] .engine-history-view {
    background: #1a1a1a;
    background-image: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px);
}

/* Results header summary bar */
.engine-results-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.engine-results-summary-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: #1a1a1a;
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 16px; flex-shrink: 0;
}
.engine-results-summary-text { flex: 1; }
.engine-results-summary-title { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.engine-results-summary-sub   { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.engine-results-summary-badge {
    padding: 4px 12px; border-radius: 20px;
    font-size: 11px; font-weight: 700;
}
.engine-results-summary-badge.ok  { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }
.engine-results-summary-badge.err { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }

/* Pipeline steps */
.engine-pipeline {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
}
.engine-pipeline-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: box-shadow 0.15s;
}
.engine-pipeline-step:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.engine-pipeline-step.step-done  { border-left: 3px solid #10b981; }
.engine-pipeline-step.step-error { border-left: 3px solid #ef4444; }
.engine-pipeline-step.step-skip  { border-left: 3px solid #d1d5db; opacity: 0.65; }
.engine-pipeline-dot {
    width: 28px; height: 28px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; color: white; flex-shrink: 0;
}
.engine-pipeline-name {
    flex: 1; font-size: 13px; font-weight: 600; color: var(--text-primary);
}
.engine-pipeline-result {
    font-size: 12px; color: var(--text-muted); font-weight: 500;
}
.engine-pipeline-status {
    width: 20px; height: 20px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; flex-shrink: 0;
}
.engine-pipeline-status.ok    { background: #ecfdf5; color: #059669; }
.engine-pipeline-status.err   { background: #fef2f2; color: #dc2626; }
.engine-pipeline-status.skip  { background: var(--bg-secondary); color: var(--text-muted); }

/* Display node output table */
.engine-display-output {
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    margin-bottom: 16px;
}
.engine-display-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}
.engine-display-title {
    font-size: 12px; font-weight: 700; color: var(--text-primary);
    display: flex; align-items: center; gap: 7px;
}
.engine-display-count {
    font-size: 11px; font-weight: 600;
    background: var(--bg-card); color: var(--text-muted);
    padding: 2px 8px; border-radius: 20px; border: 1px solid var(--border-color);
}

/* Scrollable table */
.engine-display-table-wrap {
    overflow-x: auto;
    max-height: 340px;
    overflow-y: auto;
}
table.engine-display-table {
    width: 100%; border-collapse: collapse; font-size: 12px;
}
table.engine-display-table thead {
    position: sticky; top: 0; background: var(--bg-secondary);
    z-index: 2;
}
table.engine-display-table thead th {
    padding: 8px 12px; text-align: left;
    font-size: 10px; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.06em;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}
table.engine-display-table tbody tr {
    border-bottom: 1px solid var(--border-light);
    transition: background 0.1s;
}
table.engine-display-table tbody tr:last-child { border-bottom: none; }
table.engine-display-table tbody tr:hover { background: var(--bg-hover); }
table.engine-display-table tbody td {
    padding: 8px 12px; color: var(--text-primary);
    font-size: 12px;
}
table.engine-display-table .td-asin {
    font-family: monospace; font-weight: 700; font-size: 11px; color: var(--text-primary);
}

/* Reuse existing score badges */
.engine-run-card {
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    border-radius: 14px;
    padding: 18px 22px;
    margin-bottom: 14px;
}
.engine-run-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.engine-run-card-title { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.engine-run-card-meta  { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.engine-run-card-badge {
    font-size: 10px; font-weight: 700;
    padding: 3px 10px; border-radius: 20px;
}
.engine-run-card-badge.ok  { background: #ecfdf5; color: #059669; }
.engine-run-card-badge.err { background: #fef2f2; color: #dc2626; }

.engine-run-node-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0; border-bottom: 1px solid var(--border-light);
    font-size: 12px; color: var(--text-secondary);
}
.engine-run-node-row:last-child { border-bottom: none; }
.engine-run-node-icon {
    width: 26px; height: 26px; border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; color: white; flex-shrink: 0;
}
.engine-run-node-name { flex: 1; font-weight: 600; color: var(--text-primary); }
.engine-run-node-result { font-size: 11px; color: var(--text-muted); }
.engine-run-node-status { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.node-status-done  { background: #10b981; }
.node-status-error { background: #ef4444; }
.node-status-skip  { background: #9ca3af; }

/* ── Execution History tab view ───────────────────────────────────────────── */

.ehist-card {
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.ehist-card.ehist-ok  { border-left: 3px solid #10b981; }
.ehist-card.ehist-err { border-left: 3px solid #ef4444; }

.ehist-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    cursor: pointer;
    transition: background 0.12s;
    user-select: none;
}
.ehist-header:hover { background: var(--bg-secondary); }

.ehist-icon {
    width: 34px; height: 34px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; flex-shrink: 0;
}
.ehist-icon.ok  { background: #ecfdf5; color: #059669; }
.ehist-icon.err { background: #fef2f2; color: #dc2626; }

.ehist-info { flex: 1; min-width: 0; }
.ehist-name { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ehist-meta { font-size: 11px; color: var(--text-muted); }

.ehist-badge {
    font-size: 10px; font-weight: 700;
    padding: 3px 10px; border-radius: 20px; flex-shrink: 0;
}
.ehist-badge.ok  { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }
.ehist-badge.err { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }

.ehist-chevron {
    font-size: 14px; color: var(--text-muted); flex-shrink: 0;
    transition: transform 0.2s;
}
.ehist-results.open ~ .ehist-header .ehist-chevron,
.ehist-header:has(+ .ehist-results.open) .ehist-chevron { transform: rotate(180deg); }

.ehist-results {
    display: none;
    border-top: 1px solid var(--border-light);
}
.ehist-results.open { display: block; }

.ehist-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--border-light);
    min-height: 54px;
}
.ehist-row:last-child { border-bottom: none; }

.ehist-img {
    width: 40px; height: 40px;
    border-radius: 6px;
    object-fit: contain;
    flex-shrink: 0;
    background: var(--bg-secondary);
}

.ehist-row-info { flex: 1; min-width: 0; }
.ehist-row-asin { font-size: 11px; font-weight: 700; color: var(--text-primary); font-family: monospace; }
.ehist-row-title { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ehist-row-stats {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
    font-size: 11px;
    color: var(--text-secondary);
}

/* ── Empty view (results + history) ──────────────────────────────────────── */

.engine-empty-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 260px;
    gap: 12px;
    color: var(--text-muted);
    text-align: center;
    opacity: 0.55;
}
.engine-empty-view i   { font-size: 44px; }
.engine-empty-view p   { font-size: 13px; line-height: 1.5; margin: 0; }

/* ── Toast notification system ───────────────────────────────────────────── */

.g4-toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    pointer-events: none;
    max-width: 380px;
}

.g4-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.14);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    pointer-events: auto;
    animation: g4toastIn 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border-left: 3px solid var(--border-color);
    min-width: 240px;
}
.g4-toast i { font-size: 16px; flex-shrink: 0; }
.g4-toast span { flex: 1; line-height: 1.4; }
.g4t-close { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 14px; padding: 0; margin-left: 4px; flex-shrink: 0; }
.g4t-close:hover { color: var(--text-primary); }

.g4t-ok   { border-left-color: #10b981; }
.g4t-ok i { color: #10b981; }
.g4t-err  { border-left-color: #ef4444; }
.g4t-err i { color: #ef4444; }
.g4t-warn { border-left-color: #f59e0b; }
.g4t-warn i { color: #f59e0b; }
.g4t-info { border-left-color: #3b82f6; }
.g4t-info i { color: #3b82f6; }

.g4t-fade { animation: g4toastOut 0.35s ease forwards; }

@keyframes g4toastIn {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes g4toastOut {
    to { opacity: 0; transform: translateX(20px); }
}

/* ── Bottom Settings Bar ─────────────────────────────────────────────────── */

.engine-settings-bar {
    height: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    background: var(--bg-card);
    border-top: 1.5px solid var(--border-color);
    flex-shrink: 0;
    border-radius: 0 0 12px 12px;
}
.engine-settings-bar > i { color: var(--text-muted); font-size: 15px; flex-shrink: 0; }
.engine-settings-bar input[type="text"] {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 13px;
    color: var(--text-secondary);
    font-family: inherit;
}
.engine-settings-bar input::placeholder { color: var(--text-muted); }
.engine-settings-node-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    padding: 3px 10px;
    background: var(--bg-secondary);
    border-radius: 20px;
    border: 1px solid var(--border-color);
    flex-shrink: 0;
}

/* ── Empty canvas hint ───────────────────────────────────────────────────── */

.engine-empty-hint {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
    opacity: 0.45;
}
.engine-empty-hint i  { font-size: 48px; color: var(--text-muted); display: block; margin-bottom: 12px; }
.engine-empty-hint h3 { font-size: 16px; font-weight: 700; color: var(--text-muted); margin: 0 0 6px; }
.engine-empty-hint p  { font-size: 13px; color: var(--text-muted); margin: 0; }

/* ── Config: Checkbox toggle grid (Display node) ─────────────────────────── */

.engine-checkbox-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 8px;
    padding: 2px 0 8px;
}

.engine-checkbox-row {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 8px;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.12s;
    border: 1.5px solid var(--border-color);
    background: var(--bg-secondary);
}

.engine-checkbox-row:hover {
    background: var(--bg-hover);
    border-color: #c0c4cc;
}

.engine-checkbox-row input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: #1a1a1a;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
}

.engine-checkbox-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* ── Filter node custom UI ───────────────────────────────────────────────── */

.engine-filter-ui { padding-bottom: 8px; }

.efi-status-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 2px 0 4px;
}

.efi-status-tab, .efi-sort-tab {
    padding: 4px 10px;
    border-radius: 6px;
    border: 1.5px solid var(--border-color);
    background: transparent;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.12s;
    white-space: nowrap;
}

.efi-status-tab:hover, .efi-sort-tab:hover { background: var(--bg-hover); color: var(--text-primary); }
.efi-status-tab.active, .efi-sort-tab.active {
    background: #1a1a1a;
    color: #fff;
    border-color: #1a1a1a;
}

.efi-range-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0;
}

.efi-range-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}

.efi-range-group label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.efi-range-sep { color: var(--text-muted); font-size: 14px; flex-shrink: 0; }

.efi-num-input {
    width: 100%;
    padding: 6px 8px;
    border: 1.5px solid var(--border-color);
    border-radius: 7px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 12px;
    font-family: inherit;
    font-weight: 600;
    outline: none;
    transition: border-color 0.14s;
    box-sizing: border-box;
}

.efi-num-input:focus { border-color: #2e2e2e; }

.efi-slider-wrap {
    position: relative;
    padding: 8px 0 4px;
}

.efi-slider {
    width: 100%;
    accent-color: #1a1a1a;
    cursor: pointer;
    display: block;
}

.efi-slider-max { opacity: 0.7; }

.efi-fields-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 8px;
    padding: 2px 0 4px;
}

.efi-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.efi-field label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.efi-sort-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 2px 0 4px;
}

/* ── Display output: inventory-style rows ────────────────────────────────── */

.edisp-inv-table {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.edisp-inv-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-light);
    transition: background 0.1s;
    min-height: 64px;
}

.edisp-inv-row:last-child { border-bottom: none; }
.edisp-inv-row:hover { background: var(--bg-hover); }

.edisp-inv-img {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.edisp-inv-img img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    display: block;
}

.edisp-inv-info {
    flex: 1;
    min-width: 0;
}

.edisp-inv-asin {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'SF Mono', 'Fira Code', monospace;
    letter-spacing: 0.02em;
}

.edisp-inv-title {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
    margin-top: 2px;
}

.edisp-inv-score {
    flex-shrink: 0;
}

.edisp-inv-status {
    flex-shrink: 0;
}

.edisp-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.edisp-s-approved { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }
.edisp-s-flagged  { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.edisp-s-pending  { background: #fffbeb; color: #d97706; border: 1px solid #fde68a; }
.edisp-s-default  { background: var(--bg-secondary); color: var(--text-muted); border: 1px solid var(--border-color); }

.edisp-inv-metrics {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.edisp-inv-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    min-width: 44px;
}

.edisp-inv-metric-lbl {
    font-size: 9px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.edisp-inv-metric-val {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.edisp-inv-link {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    color: var(--text-muted);
    font-size: 14px;
    text-decoration: none;
    transition: all 0.14s;
    border: 1px solid transparent;
}

.edisp-inv-link:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.edisp-inv-actions {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
    align-items: center;
}

.edisp-inv-action-btn {
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 7px; background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted); font-size: 13px;
    cursor: pointer; transition: all 0.14s; font-family: inherit;
}
.edisp-inv-action-btn:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Keep old edisp-asin/num/status for backward compat */
.edisp-asin {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.02em;
}
.edisp-num { font-variant-numeric: tabular-nums; color: var(--text-secondary); font-size: 12px; }
.edisp-status { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 20px; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.edisp-status-ok   { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }
.edisp-status-flag { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.edisp-status-def  { background: var(--bg-secondary); color: var(--text-muted); border: 1px solid var(--border-color); }

/* ── Flow picker list ────────────────────────────────────────────────────── */

.eflow-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1.5px solid var(--border-color);
    background: var(--bg-card);
    cursor: pointer;
    transition: all 0.13s;
    margin-bottom: 6px;
}

.eflow-item:hover { background: var(--bg-hover); border-color: #aaa; }

.eflow-item-name {
    flex: 1;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.eflow-item-meta {
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.eflow-item-del {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 14px;
    padding: 4px;
    border-radius: 6px;
    flex-shrink: 0;
    transition: all 0.12s;
}

.eflow-item-del:hover { color: #ef4444; background: #fef2f2; }

.eflow-empty {
    padding: 32px 16px;
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
}