/* ═══════════════════════ BASE VARS ═══════════════════════════════ */
:root {
  --bg:#080c12; --panel:#0e1520; --panel2:#131c2b;
  --border:#1a2740; --border2:#223354;
  --text:#8fa3be; --hi:#d4e0ef; --dim:#3a5070;
  --amber:#f59e0b; --amber2:#fbbf24;
  --teal:#2dd4bf; --blue:#60a5fa; --purple:#a78bfa;
  --green:#34d399; --red:#f87171; --coral:#fb923c;
  --type-prompt:#f59e0b; --type-api:#2dd4bf;
  --type-webpage:#22d3ee; --type-transform:#60a5fa; --type-tool:#a78bfa; --type-custom:#fb923c; --type-script:#fb923c;
  --left-w:340px; --right-w:420px;
}
:root.light {
  --bg:#f0f4f8; --panel:#ffffff; --panel2:#f5f7fa;
  --border:#d6e0ea; --border2:#b8cad8;
  --text:#4a6075; --hi:#1a2a3a; --dim:#111111;
  --amber:#d97706; --amber2:#b45309; --teal:#0d9488;
  --blue:#2563eb; --purple:#7c3aed; --green:#059669;
  --red:#dc2626; --coral:#ea580c;
  --type-prompt:#d97706; --type-api:#0d9488;
  --type-webpage:#0891b2; --type-transform:#2563eb; --type-tool:#7c3aed; --type-custom:#ea580c; --type-script:#ea580c;
}
:root.light .react-flow__background { background:var(--bg); }
:root.light .rf-step-node { box-shadow:0 2px 12px rgba(0,0,0,.08); }
:root.light option { background:var(--panel); color:var(--hi); }
*,*::before,*::after { transition:background-color .2s, border-color .2s, color .15s; box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; overflow:hidden; }
body { background:var(--bg); color:var(--text); font-family:'Figtree',sans-serif; font-size:13px; line-height:1.5; }
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:2px; }

/* ══════════════════════ TOPBAR ═══════════════════════════════════ */
#topbar {
  height:46px; display:flex; align-items:center; justify-content:space-between;
  padding:0 14px; background:var(--panel); border-bottom:1px solid var(--border);
  flex-shrink:0; gap:12px; position:relative; z-index:50;
}
.logo { font-family:'Syne',sans-serif; font-weight:800; font-size:16px; color:var(--hi); letter-spacing:-.5px; display:flex; align-items:center; gap:8px; flex-shrink:0; }
.logo-badge { font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--amber); background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.2); padding:1px 6px; border-radius:2px; letter-spacing:1px; }
.wf-meta { display:flex; align-items:center; gap:8px; flex:1; min-width:0; font-family:'JetBrains Mono',monospace; font-size:10px; }
.wf-meta.hidden { display:none; }
#meta-name { color:var(--hi); font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wf-name-wrap { display:flex; align-items:center; gap:6px; min-width:0; max-width:320px; }
.meta-name-edit { border:1px solid var(--border); background:var(--panel2); color:var(--dim); border-radius:3px; font-family:'JetBrains Mono',monospace; font-size:9px; width:20px; height:20px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.meta-name-edit:hover { color:var(--amber); border-color:rgba(245,158,11,.35); }
.meta-name-input { width:220px; background:var(--panel2); border:1px solid var(--border2); border-radius:3px; color:var(--hi); font-family:'JetBrains Mono',monospace; font-size:10px; padding:3px 6px; outline:none; }
.meta-name-input:focus { border-color:rgba(245,158,11,.45); }
.meta-name-input.hidden { display:none; }

.meta-pill { background:var(--panel2); border:1px solid var(--border); border-radius:3px; padding:1px 7px; color:var(--dim); white-space:nowrap; }
.meta-pill span { color:var(--teal); }
.topbar-actions { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.tb-btn { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--dim); background:transparent; border:1px solid var(--border); border-radius:3px; padding:4px 10px; cursor:pointer; transition:all .15s; white-space:nowrap; }
.tb-btn:hover { color:var(--amber); border-color:rgba(245,158,11,.3); }
.tb-btn.theme-btn { font-size:13px; padding:3px 8px; }
.tb-btn.danger:hover { color:var(--red); border-color:rgba(248,113,113,.3); }
#user-badge { font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--dim); white-space:nowrap; }
#guest-badge { font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--amber); background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.2); padding:1px 7px; border-radius:2px; letter-spacing:.5px; }

/* ══════════════════════ GUEST BANNER ═══════════════════════════ */
#guest-banner {
  background:rgba(245,158,11,.05); border-bottom:1px solid rgba(245,158,11,.15);
  padding:7px 16px; font-family:'JetBrains Mono',monospace; font-size:9px;
  color:rgba(245,158,11,.7); display:flex; align-items:center; justify-content:center;
  gap:10px; flex-shrink:0; letter-spacing:.3px;
}
#guest-banner.hidden { display:none; }
.banner-cta { color:var(--amber); cursor:pointer; border-bottom:1px solid rgba(245,158,11,.4); transition:color .15s; }
.banner-cta:hover { color:var(--amber2); }

/* ══════════════════════ LAYOUT ══════════════════════════════════ */
#app-wrapper { display:flex; flex-direction:column; height:100vh; overflow:hidden; }
#main { display:flex; flex:1; overflow:hidden; }

/* ══════════════════════ LEFT PANEL ══════════════════════════════ */
#left-panel {
  width:var(--left-w); min-width:var(--left-w);
  display:flex; flex-direction:column;
  background:var(--panel); border-right:1px solid var(--border);
  transition:width .25s, min-width .25s;
  flex-shrink:0; position:relative; overflow:hidden;
}
#left-panel.collapsed { width:0; min-width:0; overflow:visible; }
#left-panel.collapsed #left-inner { overflow:hidden; width:0; }
#left-inner { width:var(--left-w); display:flex; flex-direction:column; height:100%; }
.panel-title { font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:1px; color:var(--dim); text-transform:uppercase; padding:12px 14px 8px; flex-shrink:0; }

/* workflow list — shrinks when json panel open */
#wf-list { overflow-y:auto; padding:0 10px 10px; flex:1; min-height:40px; transition:max-height .25s; }
#left-inner.json-open #wf-list { flex:0 0 auto; max-height:22vh; }

.wf-item { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:5px; cursor:pointer; transition:background .15s; border:1px solid transparent; margin-bottom:3px; }
.wf-item:hover { background:var(--panel2); }
.wf-item.active { background:rgba(245,158,11,.06); border-color:rgba(245,158,11,.2); }
.wf-item-icon { font-size:14px; flex-shrink:0; color:var(--amber); }
.wf-item-info { flex:1; min-width:0; }
.wf-item-name { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--hi); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wf-item-date { font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--dim); }
.wf-item-actions { display:flex; gap:3px; opacity:0; transition:opacity .15s; }
.wf-item:hover .wf-item-actions { opacity:1; }
.wf-icon-btn { background:none; border:none; color:var(--dim); cursor:pointer; font-size:12px; padding:2px 4px; border-radius:2px; transition:color .15s; }
.wf-icon-btn:hover { color:var(--red); }

/* JSON editor panel — 3/4 of left panel */
#wf-json-panel {
  display:flex; flex-direction:column;
  border-top:1px solid var(--border); flex-shrink:0;
  background:var(--panel2);
  transition:flex .25s, opacity .2s;
  flex:0 0 0; opacity:0; overflow:hidden;
}
#left-inner.json-open #wf-json-panel {
  flex:1; opacity:1; overflow:hidden;
}
#wf-json-panel-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:7px 10px; border-bottom:1px solid var(--border); flex-shrink:0; gap:6px;
}
#wf-json-panel-name { font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--amber); letter-spacing:.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; }
.wf-json-actions { display:flex; gap:4px; flex-shrink:0; }
.wf-json-btn { font-family:'JetBrains Mono',monospace; font-size:9px; padding:3px 8px; border-radius:3px; border:1px solid var(--border); background:transparent; color:var(--dim); cursor:pointer; transition:all .15s; }
.wf-json-btn:hover { color:var(--teal); border-color:rgba(45,212,191,.3); }
.wf-json-btn.apply { color:var(--amber); border-color:rgba(245,158,11,.3); }
.wf-json-btn.apply:hover { background:rgba(245,158,11,.08); }
.wf-json-btn.close-btn:hover { color:var(--red); border-color:rgba(248,113,113,.3); }
.wf-json-btn.maximize-btn:hover { color:var(--blue); border-color:rgba(96,165,250,.3); }
#wf-json-textarea {
  flex:1; resize:none; background:transparent; border:none; outline:none;
  color:var(--green); font-family:'JetBrains Mono',monospace; font-size:9.5px;
  line-height:1.7; padding:10px 12px; overflow-y:auto;
  border-bottom:1px solid var(--border);
}
#wf-json-textarea.err { color:var(--red); }
#wf-json-err { font-family:'JetBrains Mono',monospace; font-size:8.5px; color:var(--red); padding:4px 12px; min-height:18px; flex-shrink:0; }

#left-actions { display:flex; gap:8px; padding:10px 12px; border-top:1px solid var(--border); flex-shrink:0; }
.left-btn { flex:1; font-family:'JetBrains Mono',monospace; font-size:10px; padding:7px 0; border-radius:4px; border:1px solid var(--border); background:transparent; color:var(--dim); cursor:pointer; transition:all .15s; }
.left-btn:hover { color:var(--teal); border-color:rgba(45,212,191,.3); }
.left-btn.primary { flex:2; color:var(--bg); background:var(--amber); border-color:var(--amber); font-weight:500; }
.left-btn.primary:hover { background:var(--amber2); }

/* toggle button */
#btn-toggle-left {
  position:absolute; right:-14px; top:50%; transform:translateY(-50%);
  z-index:20; width:28px; height:48px; background:var(--panel); border:1px solid var(--border);
  border-radius:0 6px 6px 0; color:var(--dim); font-size:14px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:color .15s, background .15s;
}
#btn-toggle-left:hover { color:var(--amber); background:var(--panel2); }
#left-panel.collapsed #btn-toggle-left { right:-32px; }
#btn-toggle-right {
  position:absolute; right:var(--right-w); top:58px; width:30px; height:48px;
  border:1px solid var(--border); border-right:none;
  background:var(--panel); color:var(--dim);
  border-radius:6px 0 0 6px; cursor:pointer; z-index:35;
  display:flex; align-items:center; justify-content:center;
}
#btn-toggle-right:hover { color:var(--amber); background:var(--panel2); }


/* ══════════════════════ CENTER ══════════════════════════════════ */
#center { flex:1; position:relative; overflow:hidden; }
#rf-container { position:absolute; inset:0; }
#rf-layout-controls {
  position:absolute; top:12px; right:12px; z-index:10;
  display:flex; gap:3px; background:rgba(8,12,18,.8); padding:5px; border-radius:6px; border:1px solid var(--border);
}
.cy-btn { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--dim); background:transparent; border:1px solid transparent; border-radius:3px; padding:3px 8px; cursor:pointer; transition:all .15s; }
.cy-btn:hover { color:var(--amber); border-color:rgba(245,158,11,.3); }
#empty-state { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; pointer-events:none; }
#empty-state.hidden { display:none; }
.es-icon { font-size:48px; color:var(--border2); }
.es-title { font-family:'Syne',sans-serif; font-size:18px; font-weight:700; color:var(--dim); }
.es-sub { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--dim); }
#btn-add-step {
  position:fixed;
  left:50%;
  bottom:12px;
  transform:translateX(-50%);
  z-index:32; font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:500;
  color:var(--bg); background:var(--amber); border:none; border-radius:6px;
  padding:9px 16px; cursor:pointer; transition:background .15s; box-shadow:0 4px 16px rgba(245,158,11,.3);
}
#btn-add-step:hover { background:var(--amber2); }

/* ── React Flow ── */
.react-flow__edge-path { stroke:#2a3f60; stroke-width:1.5; }
.react-flow__edge.selected .react-flow__edge-path { stroke:var(--amber); }
.rf-edge-running .react-flow__edge-path { stroke:#86efac !important; stroke-width:2px; filter:drop-shadow(0 0 5px rgba(134,239,172,.45)); }

.react-flow__controls { background:var(--panel); border:1px solid var(--border) !important; border-radius:6px !important; box-shadow:none !important; }
.react-flow__controls-button { background:var(--panel) !important; fill:var(--dim) !important; border-color:var(--border) !important; }
.react-flow__controls-button:hover { background:var(--panel2) !important; fill:var(--amber) !important; }
.react-flow__minimap { border-radius:6px; overflow:hidden; }
.react-flow__handle { background:var(--border2); border:2px solid var(--panel); width:10px; height:10px; border-radius:50%; transition:all .15s; opacity:0; }
.react-flow__node:hover .react-flow__handle { opacity:1; }
.react-flow__handle:hover { background:var(--amber); border-color:var(--amber); opacity:1; }
.react-flow__background { background:var(--bg); }

/* ── Custom nodes ── */
.rf-step-node { background:var(--panel); border:1px solid var(--border); border-radius:8px; width:280px; box-shadow:0 4px 20px rgba(0,0,0,.4); transition:border-color .15s, box-shadow .15s; font-family:'Figtree',sans-serif; font-size:13px; position:relative; }
.rf-step-node:hover { border-color:var(--border2); box-shadow:0 6px 30px rgba(0,0,0,.6); }
.rf-step-node.selected { border-color:rgba(245,158,11,.5); box-shadow:0 0 0 2px rgba(245,158,11,.15),0 6px 30px rgba(0,0,0,.6); }
.rf-step-node::before { content:''; position:absolute; left:0; top:8px; bottom:8px; width:2px; border-radius:0 1px 1px 0; background:var(--type-prompt); }
.rf-type-border-prompt::before { background:var(--type-prompt); }
.rf-type-border-api::before { background:var(--type-api); }
.rf-type-border-webpage::before { background:var(--type-webpage); }
.rf-type-border-transform::before { background:var(--type-transform); }
.rf-type-border-tool::before { background:var(--type-tool); }
.rf-type-border-custom::before { background:var(--type-custom); }
.rf-type-border-script::before { background:var(--type-script); }
.rf-card-header { display:flex; align-items:flex-start; gap:8px; padding:10px 12px 7px 16px; border-bottom:1px solid var(--border); cursor:grab; user-select:none; }
.rf-card-header:active { cursor:grabbing; }
.rf-step-node.running { border-color:rgba(134,239,172,.7); box-shadow:0 0 0 2px rgba(134,239,172,.14),0 8px 26px rgba(0,0,0,.55); }
.rf-card-header.running { background:rgba(134,239,172,.16); animation:rf-run-pulse 1.25s ease-in-out infinite; }
@keyframes rf-run-pulse {
  0%,100% { box-shadow:inset 0 0 0 0 rgba(134,239,172,.14); }
  50% { box-shadow:inset 0 0 0 999px rgba(134,239,172,.06); }
}

.rf-type-badge { font-family:'JetBrains Mono',monospace; font-size:8px; font-weight:500; letter-spacing:.5px; padding:2px 6px; border-radius:2px; flex-shrink:0; margin-top:2px; text-transform:uppercase; }
.rf-type-prompt { color:var(--type-prompt); background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.25); }
.rf-type-api { color:var(--type-api); background:rgba(45,212,191,.1); border:1px solid rgba(45,212,191,.25); }
.rf-type-webpage { color:var(--type-webpage); background:rgba(34,211,238,.1); border:1px solid rgba(34,211,238,.25); }
.rf-type-transform { color:var(--type-transform); background:rgba(96,165,250,.1); border:1px solid rgba(96,165,250,.25); }
.rf-type-tool { color:var(--type-tool); background:rgba(167,139,250,.1); border:1px solid rgba(167,139,250,.25); }
.rf-type-custom { color:var(--type-custom); background:rgba(251,146,60,.1); border:1px solid rgba(251,146,60,.25); }
.rf-type-script { color:var(--type-script); background:rgba(251,146,60,.1); border:1px solid rgba(251,146,60,.25); }
.rf-card-name { font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:500; color:var(--hi); flex:1; word-break:break-all; line-height:1.3; }
.rf-card-desc { padding:5px 12px 4px 16px; font-size:10.5px; color:var(--text); line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:30px; }
.rf-card-meta-row { display:flex; align-items:center; flex-wrap:wrap; gap:4px; padding:2px 12px 4px 16px; min-height:20px; }
.rf-llm-badge { font-family:'JetBrains Mono',monospace; font-size:8.5px; color:var(--purple); background:rgba(167,139,250,.09); border:1px solid rgba(167,139,250,.2); padding:1px 6px; border-radius:2px; white-space:nowrap; }
.rf-api-badge { color:var(--teal) !important; background:rgba(45,212,191,.09) !important; border-color:rgba(45,212,191,.2) !important; }
.rf-tools-badge { font-family:'JetBrains Mono',monospace; font-size:8.5px; color:var(--coral); background:rgba(251,146,60,.09); border:1px solid rgba(251,146,60,.2); padding:1px 6px; border-radius:2px; }
.rf-card-footer { display:flex; gap:5px; padding:6px 10px 6px 14px; border-top:1px solid var(--border); }
.rf-card-btn { font-family:'JetBrains Mono',monospace; font-size:9px; padding:3px 8px; border-radius:3px; border:1px solid var(--border); background:transparent; cursor:pointer; transition:all .15s; }
.rf-btn-expand { color:var(--dim); flex:1; }
.rf-btn-expand:hover,.rf-btn-expand.open { color:var(--teal); border-color:rgba(45,212,191,.3); }
.rf-btn-edit { color:var(--dim); }
.rf-btn-edit:hover { color:var(--amber); border-color:rgba(245,158,11,.3); }
.rf-btn-run { color:var(--dim); }
.rf-btn-run:hover { color:var(--green); border-color:rgba(52,211,153,.3); }
.rf-card-expand { border-top:1px solid var(--border); padding:9px 12px 9px 16px; display:flex; flex-direction:column; gap:9px; background:var(--panel2); border-radius:0 0 8px 8px; }
.rf-expand-title { font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:1px; color:var(--dim); text-transform:uppercase; margin-bottom:4px; }
.rf-expand-field { display:flex; align-items:baseline; gap:6px; font-family:'JetBrains Mono',monospace; font-size:9.5px; line-height:1.8; }
.rf-field-name { color:var(--blue); }
.rf-field-type { color:var(--dim); font-size:8.5px; }
.rf-field-req { color:var(--amber); font-size:8px; }
.rf-no-schema { font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--dim); font-style:italic; }

/* ══════════════════════ RIGHT PANEL ═════════════════════════════ */
#right-panel { position:relative; width:var(--right-w); min-width:var(--right-w); display:flex; flex-direction:column; background:var(--panel); border-left:1px solid var(--border); transition:width .25s, min-width .25s; flex-shrink:0; overflow:hidden; }
#right-panel.hidden { width:0; min-width:0; }
#right-panel.resizing { transition:none; }
#right-inner { width:var(--right-w); display:flex; flex-direction:column; height:100%; overflow:hidden; }
#right-resize-handle { position:absolute; left:0; top:0; bottom:0; width:6px; cursor:col-resize; z-index:10; background:transparent; transition:background .15s; }
#right-resize-handle:hover { background:rgba(245,158,11,.2); }
#right-panel.resizing #right-resize-handle { background:rgba(245,158,11,.35); }
.right-panel-resizing * { user-select:none !important; cursor:col-resize !important; }
#editor-tabs { display:flex; border-bottom:1px solid var(--border); padding:10px 12px 0; gap:2px; flex-shrink:0; }
.etab { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--dim); background:none; border:1px solid transparent; border-bottom:none; border-radius:3px 3px 0 0; padding:5px 12px 6px; cursor:pointer; transition:all .15s; margin-bottom:-1px; }
.etab:hover { color:var(--text); }
.etab.active { color:var(--amber); background:var(--panel2); border-color:var(--border); border-bottom-color:var(--panel2); }
.etab-content { display:none; flex:1; overflow-y:auto; flex-direction:column; }
.etab-content.active { display:flex; }
#etab-log { overflow:hidden; }
#etab-log #run-panel { flex:1; min-height:0; }

/* form */
#form-editor { padding:16px 14px; display:flex; flex-direction:column; gap:14px; }
.form-section { display:flex; flex-direction:column; gap:6px; }
.tech-section { border:1px solid var(--border); border-radius:6px; padding:8px; background:var(--panel2); gap:8px; }
.tech-toggle { font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--dim); letter-spacing:.6px; text-transform:uppercase; text-align:left; background:none; border:1px solid var(--border); border-radius:4px; padding:6px 8px; cursor:pointer; }
.tech-toggle:hover { color:var(--teal); border-color:rgba(45,212,191,.3); }
#tech-content.collapsed { display:none; }
#api-advanced-content.collapsed { display:none !important; }
#tool-advanced-content.collapsed { display:none !important; }
.form-label { font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--dim); letter-spacing:.5px; text-transform:uppercase; }
.form-label-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.form-input,.form-select,.form-textarea { width:100%; background:var(--panel2); border:1px solid var(--border); border-radius:4px; color:var(--hi); font-family:'JetBrains Mono',monospace; font-size:11px; padding:7px 10px; outline:none; transition:border-color .15s; }
.form-input:focus,.form-select:focus,.form-textarea:focus { border-color:rgba(245,158,11,.4); }
.form-textarea { resize:vertical; line-height:1.7; min-height:80px; }
.form-textarea.tall { min-height:130px; }
.form-textarea.maximized { position:fixed; top:5vh; left:15%; right:15%; bottom:5vh; z-index:951; background:var(--panel); border:1px solid var(--border2); border-radius:10px; padding:16px; min-height:auto; height:auto; max-height:none; resize:none; box-shadow:0 20px 60px rgba(0,0,0,.6); }
.maximize-btn.active { color:var(--amber); border-color:rgba(245,158,11,.35); }
#maximize-backdrop { position:fixed; inset:0; z-index:950; background:rgba(0,0,0,.55); display:none; }
#maximize-close-btn { position:fixed; top:calc(5vh - 14px); right:calc(15% - 14px); z-index:952; width:28px; height:28px; background:var(--panel); border:1px solid var(--border2); border-radius:50%; color:var(--red); font-size:13px; cursor:pointer; display:none; align-items:center; justify-content:center; transition:all .15s; }
#maximize-close-btn:hover { background:rgba(248,113,113,.15); border-color:rgba(248,113,113,.5); }
#sysprompt-content.collapsed { display:none; }
#template-content.collapsed { display:none; }
.section-fold-btn { min-width:22px; padding:2px 5px; font-size:10px; }
.form-select { appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%233a5070'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; padding-right:28px; }
option { background:var(--panel2); }
.form-row { display:flex; gap:8px; }
.form-row .form-section { flex:1; }
.form-hint { font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--dim); }
.schema-field-row { display:flex; gap:5px; align-items:center; margin-bottom:5px; }
.schema-req-check { accent-color:var(--amber); width:14px; height:14px; cursor:pointer; flex-shrink:0; }
.schema-remove-btn { background:none; border:none; color:var(--dim); cursor:pointer; font-size:13px; transition:color .15s; flex-shrink:0; }
.schema-remove-btn:hover { color:var(--red); }
.schema-add-btn { font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--teal); background:none; border:1px dashed rgba(45,212,191,.3); border-radius:3px; padding:4px 10px; cursor:pointer; transition:all .15s; width:100%; margin-top:4px; }
.schema-add-btn:hover { background:rgba(45,212,191,.05); }
#editor-actions { display:flex; gap:8px; padding:10px 14px; border-top:1px solid var(--border); flex-shrink:0; }
.editor-btn { flex:1; font-family:'JetBrains Mono',monospace; font-size:10px; padding:8px 0; border-radius:4px; border:1px solid var(--border); background:transparent; color:var(--dim); cursor:pointer; transition:all .15s; }
.editor-btn:hover { color:var(--text); border-color:var(--border2); }
.editor-btn.save { color:var(--bg); background:var(--amber); border-color:var(--amber); font-weight:500; }
.editor-btn.save:hover { background:var(--amber2); }
.editor-btn.del:hover { color:var(--red); border-color:rgba(248,113,113,.3); }

/* step json tab header */
.etab-json-header { display:flex; align-items:center; justify-content:space-between; padding:10px 14px 6px; flex-shrink:0; border-bottom:1px solid var(--border); }
.etab-json-title { font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--dim); letter-spacing:1px; text-transform:uppercase; }

/* run */
#run-panel { padding:14px; display:flex; flex-direction:column; gap:12px; }
.run-inputs { display:flex; flex-direction:column; gap:8px; }
.run-available-title { font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--dim); letter-spacing:1px; text-transform:uppercase; margin-top:8px; }
.run-available-inputs { display:flex; flex-wrap:wrap; gap:6px; min-height:24px; }
.run-var-chip { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--teal); border:1px solid var(--border); background:var(--panel2); border-radius:999px; padding:3px 8px; }
.run-available-empty { font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--dim); }
.run-input-label { font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--dim); letter-spacing:.5px; text-transform:uppercase; margin-bottom:3px; display:flex; align-items:center; gap:6px; }
.run-input-req { color:var(--amber); font-size:8px; }
.run-btn { font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:500; color:var(--bg); background:var(--green); border:none; border-radius:5px; padding:9px; cursor:pointer; transition:background .15s; flex-shrink:0; }
.run-btn:hover { background:#10b981; }
.run-btn.secondary { background:var(--teal); }
.run-btn.secondary:hover { background:#23bdb0; }
.run-btn:disabled { opacity:.5; cursor:not-allowed; }
.run-actions { display:flex; gap:8px; }
.run-actions .run-btn { flex:1; }
.exec-running .rf-btn-run { opacity:.45; pointer-events:none; }
.run-output { flex:1; background:var(--panel2); border:1px solid var(--border); border-radius:5px; padding:12px; font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--green); line-height:1.7; overflow-y:auto; min-height:200px; white-space:pre-wrap; word-break:break-word; }
.run-output.error { color:var(--red); }
.run-status { font-family:'JetBrains Mono',monospace; font-size:10px; border:1px solid var(--border); background:var(--panel2); border-radius:5px; padding:8px 10px; text-transform:uppercase; letter-spacing:.5px; color:var(--dim); }
.run-status.running { color:var(--amber); border-color:rgba(245,158,11,.35); }
.run-status.done { color:var(--green); border-color:rgba(52,211,153,.35); }
.run-status.error { color:var(--red); border-color:rgba(248,113,113,.35); }
.run-output-title { font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--dim); letter-spacing:.7px; text-transform:uppercase; }
.run-output-vars { flex:1; background:var(--panel2); border:1px solid var(--border); border-radius:5px; padding:12px; font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--teal); line-height:1.7; overflow-y:auto; min-height:200px; white-space:pre-wrap; word-break:break-word; }
.run-output-vars .var-row { margin:0 0 2px; line-height:1.35; }
.run-output-vars .var-name { font-weight:700; color:var(--hi); margin-right:6px; }
.run-output-vars details { margin:2px 0; border:1px solid var(--border); border-radius:4px; padding:2px 4px; }
.run-output-vars summary { cursor:pointer; color:var(--teal); }
.run-output-vars pre { margin:6px 0 0; white-space:pre-wrap; word-break:break-word; color:var(--text); }
.run-output-vars .json-tree-root { display:flex; flex-direction:column; gap:2px; }
.run-output-vars .json-tree-node { margin:1px 0; border:1px solid var(--border); border-radius:4px; padding:2px 4px; background:transparent; }
.run-output-vars .json-tree-children { margin-left:8px; border-left:1px dashed var(--border); padding-left:6px; margin-top:2px; }
.run-output-vars .json-tree-leaf { color:var(--text); }
.run-output-vars .json-tree-meta { color:var(--dim); margin-left:4px; font-size:9px; }
.run-output-vars .json-tree-empty { color:var(--dim); font-style:italic; }
.run-meta { font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--dim); display:flex; gap:12px; flex-wrap:wrap; }
.run-meta span { color:var(--teal); }

/* ══════════════════════ JSON FULLSCREEN ════════════════════════ */
#json-fullscreen {
  position:fixed; inset:0; z-index:800;
  background:var(--panel2); display:flex; flex-direction:column;
}
#json-fullscreen.hidden { display:none; }
#json-fullscreen-header {
  display:flex; align-items:center; gap:8px; padding:10px 14px;
  border-bottom:1px solid var(--border); flex-shrink:0; background:var(--panel);
}
#json-fullscreen-name { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--amber); letter-spacing:.5px; flex:1; }
.jfs-btn { font-family:'JetBrains Mono',monospace; font-size:9px; padding:4px 10px; border-radius:3px; border:1px solid var(--border); background:transparent; color:var(--dim); cursor:pointer; transition:all .15s; }
.jfs-btn:hover { color:var(--teal); border-color:rgba(45,212,191,.3); }
.jfs-btn.apply { color:var(--amber); border-color:rgba(245,158,11,.3); }
.jfs-btn.apply:hover { background:rgba(245,158,11,.08); }
.jfs-btn.close { font-size:11px; }
.jfs-btn.close:hover { color:var(--red); border-color:rgba(248,113,113,.3); }
#json-fullscreen-textarea {
  flex:1; resize:none; background:transparent; border:none; outline:none;
  color:var(--green); font-family:'JetBrains Mono',monospace; font-size:11px;
  line-height:1.75; padding:16px 20px; overflow-y:auto;
}
#json-fullscreen-textarea.err { color:var(--red); }
#json-fullscreen-err { font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--red); padding:5px 16px; min-height:22px; background:var(--panel); flex-shrink:0; }

/* ══════════════════════ MODAL ═══════════════════════════════════ */
#modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.75); backdrop-filter:blur(4px); z-index:1000; display:flex; align-items:center; justify-content:center; padding:24px; }
#modal-overlay.hidden { display:none; }
#modal { background:var(--panel); border:1px solid var(--border2); border-radius:10px; width:100%; max-width:520px; max-height:80vh; display:flex; flex-direction:column; box-shadow:0 40px 80px rgba(0,0,0,.8); }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--border); flex-shrink:0; }
.modal-title { font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--hi); font-weight:500; }
.modal-close { background:transparent; border:1px solid var(--border); border-radius:4px; color:var(--dim); font-size:13px; width:26px; height:26px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s; }
.modal-close:hover { color:var(--red); border-color:rgba(248,113,113,.3); }
.modal-body { flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:14px; }
.modal-actions { display:flex; gap:8px; padding:14px 18px; border-top:1px solid var(--border); }
.modal-btn { flex:1; font-family:'JetBrains Mono',monospace; font-size:10px; padding:8px; border-radius:4px; border:1px solid var(--border); background:transparent; color:var(--dim); cursor:pointer; transition:all .15s; }
.modal-btn.primary { color:var(--bg); background:var(--amber); border-color:var(--amber); font-weight:500; }
.modal-btn.primary:hover { background:var(--amber2); }
.modal-btn:hover { color:var(--text); border-color:var(--border2); }
.modal-btn.danger { color:var(--red); border-color:rgba(248,113,113,.3); }
.modal-btn.danger:hover { background:rgba(248,113,113,.1); }
.settings-section { display:flex; flex-direction:column; gap:8px; }
.settings-title { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--hi); font-weight:500; letter-spacing:.3px; }
.settings-desc { font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--dim); }
.settings-row { display:flex; gap:8px; }
.settings-input { flex:1; background:var(--panel2); border:1px solid var(--border); border-radius:4px; color:var(--hi); font-family:'JetBrains Mono',monospace; font-size:11px; padding:7px 10px; outline:none; }
.settings-input:focus { border-color:rgba(245,158,11,.4); }
.settings-btn { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--bg); background:var(--amber); border:none; border-radius:4px; padding:7px 14px; cursor:pointer; white-space:nowrap; }
.settings-ok { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--green); }
.settings-err { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--red); }
.settings-tabs { display:flex; gap:8px; margin-bottom:6px; }
.settings-tab { flex:1; border:1px solid var(--border); background:var(--panel2); color:var(--dim); border-radius:5px; padding:7px 10px; font-family:'JetBrains Mono',monospace; font-size:10px; cursor:pointer; }
.settings-tab.active { color:var(--amber); border-color:rgba(245,158,11,.35); background:rgba(245,158,11,.08); }
.settings-pane { display:none; flex-direction:column; gap:14px; }
.settings-pane.active { display:flex; }
.settings-mcp-item { border:1px solid var(--border); border-radius:6px; padding:10px; display:flex; flex-direction:column; gap:8px; background:var(--panel2); }
.settings-conn-ok { color:var(--green); font-size:12px; }
.settings-conn-ko { color:var(--red); font-size:12px; }
.confirm-text { font-size:13px; color:var(--text); }
.confirm-sub { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--dim); }

/* toast */
#toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:2000; font-family:'JetBrains Mono',monospace; font-size:10px; background:var(--panel2); border:1px solid var(--border2); border-radius:5px; padding:8px 16px; color:var(--hi); opacity:0; transition:opacity .2s; pointer-events:none; }
#toast.show { opacity:1; }
#toast.ok { border-color:rgba(52,211,153,.4); color:var(--green); }
#toast.err { border-color:rgba(248,113,113,.4); color:var(--red); }
.jk { color:#7dd3fc; } .js { color:#86efac; } .jn { color:#fb923c; } .jb { color:#c084fc; }

#edge-delete-prompt { position:fixed; z-index:1200; transform:translate(-50%,-130%); }
#edge-delete-prompt.hidden { display:none; }
.edge-trash-btn { border:1px solid rgba(248,113,113,.45); background:var(--panel); color:var(--red); border-radius:999px; width:28px; height:28px; cursor:pointer; }
.edge-trash-btn:hover { background:rgba(248,113,113,.12); }

:root.light .jk { color:#0a66d1; font-weight:600; }
:root.light .js { color:#0f7a2f; font-weight:600; }
:root.light .jn { color:#9a3412; font-weight:600; }
:root.light .jb { color:#6d28d9; font-weight:700; }


#main { position:relative; }