@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");
*{box-sizing:border-box;margin:0;padding:0}:root{--bg:#070a11;--panel:#0d121d;--panel2:#121a29;--line:#202a3b;--text:#edf3fa;--muted:#8390a4;--dim:#536075;--cyan:#51d5e6;--green:#45d39a;--purple:#9a8cff;--amber:#f4b860;--red:#fb7185;--font:"DM Sans",sans-serif;--mono:"JetBrains Mono",monospace}body{height:100vh;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font);font-size:13px}button,input,select{font:inherit}button{color:inherit;cursor:pointer}#app{height:100vh;display:grid;grid-template-rows:58px minmax(0,1fr) 260px}header{display:flex;align-items:center;gap:24px;padding:0 16px;border-bottom:1px solid rgba(148,163,184,.1);background:rgba(9,13,21,.6);box-shadow:0 1px 0 rgba(255,255,255,.04),0 4px 20px rgba(0,0,0,.2)}.brand{display:flex;align-items:center;gap:9px;width:240px}.mark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#2dd4bf,#3b82f6);font-size:23px;font-weight:700;box-shadow:0 8px 24px #0891b233}.brand div{display:flex;flex-direction:column}.brand strong{font-size:14px}.brand small{color:var(--dim);font:9px var(--mono);letter-spacing:.12em}.workflow-name{display:flex;align-items:center;gap:10px;flex:1}.workflow-name span,.panel-title span,.results-head span{color:var(--dim);font:600 9px var(--mono);letter-spacing:.13em}.workflow-name input{width:min(340px,40vw);padding:7px 9px;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--text);font-weight:600}.workflow-name input:hover,.workflow-name input:focus{outline:0;border-color:var(--line);background:#0d1420}.toolbar{display:flex;gap:7px}.toolbar button,.canvas-hud button{padding:7px 11px;border:1px solid rgba(148,163,184,.12);border-radius:8px;background:rgba(26,34,50,.5);font-size:11px;font-weight:600;transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease;box-shadow:0 2px 6px rgba(0,0,0,.12)}.toolbar button:hover{border-color:rgba(103,232,249,.25);background:rgba(30,42,60,.6);transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.15)}.toolbar .run{border:0;color:#05171a;background:linear-gradient(135deg,#5eead4,#38bdf8);box-shadow:0 7px 22px #22d3ee20;transition:background .18s ease,box-shadow .18s ease,transform .18s ease}.toolbar .run:hover{background:linear-gradient(135deg,#3dd9c4,#25a8d1);color:#041012;transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.15)}main{min-height:0;display:grid;grid-template-columns:250px minmax(400px,1fr) 290px}.library,.inspector{min-height:0;overflow:auto;padding:14px;background:rgba(13,18,29,.5);scrollbar-width:thin;scrollbar-color:#293448 transparent}.library{border-right:1px solid rgba(148,163,184,.08)}.inspector{border-left:1px solid rgba(148,163,184,.08)}.panel-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.panel-title kbd{padding:2px 5px;border:1px solid var(--line);border-radius:4px;color:var(--dim);font:9px var(--mono)}.search{width:100%;padding:9px 10px;margin-bottom:12px;border:1px solid rgba(148,163,184,.12);border-radius:8px;outline:0;color:var(--text);background:rgba(10,15,26,.5);font-size:11px;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}.search:focus{border-color:#4fd0e6;box-shadow:0 0 0 3px rgba(34,211,238,.08)}.category{margin:15px 0 7px;color:var(--dim);font:600 9px var(--mono);letter-spacing:.1em}.library-item{display:flex;align-items:center;gap:9px;width:100%;padding:8px;margin-bottom:5px;border:1px solid transparent;border-radius:8px;background:transparent;text-align:left;transition:background .18s ease,box-shadow .18s ease,border-color .18s ease,transform .18s ease}.library-item:hover{border-color:rgba(148,163,184,.12);background:rgba(22,32,52,.5);transform:translateX(2px) translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.15)}.library-item i{width:7px;height:7px;border-radius:50%;background:var(--block-color);box-shadow:0 0 10px color-mix(in srgb,var(--block-color),transparent 35%)}.library-item div{display:flex;flex-direction:column}.library-item strong{font-size:11px}.library-item small{margin-top:2px;color:var(--dim);font-size:9px}.library-help{margin-top:18px;padding:10px;border:1px dashed rgba(148,163,184,.12);border-radius:8px;color:var(--dim);font-size:10px;line-height:1.45;background:rgba(10,15,26,.3)}#workspace{position:relative;overflow:hidden;background-color:#080c14;background-image:radial-gradient(circle,rgba(148,163,184,.12) 1px,transparent 1px),radial-gradient(ellipse 60% 50% at 50% 40%,rgba(34,211,238,.04),transparent),radial-gradient(circle at 30% 60%,rgba(99,102,241,.04),transparent 50%);background-size:22px 22px,200% 200%,100% 100%;background-attachment:local,local,local;animation:glass-drift 20s ease infinite}#connections,#nodes{position:absolute;inset:0;width:100%;height:100%}#connections{z-index:1;overflow:visible;pointer-events:none}#nodes{z-index:2;transform-origin:0 0}.connection{fill:none;stroke:rgba(83,100,125,.5);stroke-width:2;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2))}.connection.active{stroke:var(--cyan);stroke-dasharray:6 4;animation:flow .6s linear infinite;filter:drop-shadow(0 0 4px rgba(34,211,238,.3))}.connection.temp{stroke:var(--cyan);stroke-dasharray:4 4}@keyframes flow{to{stroke-dashoffset:-10}}.node{position:absolute;width:190px;border:1px solid rgba(148,163,184,.1);border-top-color:rgba(255,255,255,.06);border-radius:11px;background:rgba(23,33,51,.55);box-shadow:0 6px 20px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.03);user-select:none;transition:background .18s ease,box-shadow .18s ease,border-color .18s ease,transform .18s ease}.node.selected{border-color:var(--node-color);box-shadow:0 0 0 2px color-mix(in srgb,var(--node-color),transparent 70%),0 10px 30px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.04)}.node.success .node-head::after{background:var(--green)}.node.error{border-color:var(--red)}.node-head{height:43px;display:flex;align-items:center;gap:8px;padding:0 10px;border-bottom:1px solid rgba(148,163,184,.08);cursor:grab}.node-head:active{cursor:grabbing}.node-head::before,.node-head::after{content:"";flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--node-color)}.node-head::after{width:5px;height:5px;margin-left:auto;background:#344158}.node-head div{display:flex;flex-direction:column;min-width:0}.node-head strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.node-head small{color:var(--dim);font:8px var(--mono)}.node-body{padding:7px 0}.port-row{position:relative;display:flex;justify-content:space-between;min-height:24px;padding:4px 12px;color:var(--muted);font:9px var(--mono)}.port{position:absolute;top:50%;width:11px;height:11px;border:2px solid #8290a5;border-radius:50%;background:#111827;transform:translateY(-50%);cursor:crosshair}.port:hover,.port.connected{border-color:var(--cyan);background:#22d3ee;box-shadow:0 0 9px #22d3ee99}.port.input{left:-6px}.port.output{right:-6px}.node-summary{padding:7px 10px;border-top:1px solid rgba(148,163,184,.08);color:var(--dim);font-size:9px;background:rgba(8,13,20,.3)}.canvas-hud{position:absolute;right:12px;bottom:12px;z-index:4;display:flex;align-items:center;gap:8px;padding:5px;border:1px solid rgba(148,163,184,.1);border-radius:9px;background:rgba(9,14,23,.65);box-shadow:0 2px 10px rgba(0,0,0,.2)}.canvas-hud span{padding-left:6px;color:var(--dim);font:9px var(--mono)}.canvas-hud button{padding:5px 7px}.empty-icon{font-size:35px;color:#3a506b}#empty-state{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:var(--dim);pointer-events:none;background:rgba(5,8,14,.3)}#empty-state strong{color:#748399;font-size:13px}#empty-state span{font-size:10px}.inspector-empty{padding:16px 8px;color:var(--dim);font-size:11px;line-height:1.6}.inspector-title{display:flex;align-items:center;gap:9px;margin-bottom:14px}.inspector-title i{width:9px;height:9px;border-radius:50%;background:var(--node-color)}.inspector-title div{display:flex;flex-direction:column}.inspector-title small{color:var(--dim);font:9px var(--mono)}.field{margin-bottom:13px}.field label{display:flex;justify-content:space-between;margin-bottom:6px;color:var(--muted);font-size:10px}.field input,.field select{width:100%;padding:8px;border:1px solid rgba(148,163,184,.12);border-radius:7px;outline:0;color:var(--text);background:rgba(10,15,26,.5);font:10px var(--mono);transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}.field input:focus,.field select:focus{border-color:#4fd0e6;box-shadow:0 0 0 3px rgba(34,211,238,.08)}.theory{margin-top:16px;padding-top:13px;border-top:1px solid var(--line)}.theory h4{margin-bottom:7px;font-size:10px}.theory p{color:var(--muted);font-size:10px;line-height:1.55}.theory code{display:block;margin-top:9px;padding:8px;border-radius:7px;color:#8fe7ed;background:rgba(8,13,23,.55);font:9px/1.5 var(--mono);box-shadow:inset 0 1px 3px rgba(0,0,0,.15)}.delete-node{width:100%;margin-top:16px;padding:8px;border:1px solid rgba(251,113,133,.2);border-radius:7px;color:#fda4af;background:rgba(251,113,133,.06);font-size:10px;transition:background .18s ease,box-shadow .18s ease,transform .18s ease}.delete-node:hover{background:rgba(251,113,133,.1);box-shadow:0 2px 8px rgba(251,113,133,.1);transform:translateY(-1px)}.popover{position:fixed;z-index:30;top:50px;right:105px;width:240px;padding:8px;border:1px solid rgba(148,163,184,.12);border-top-color:rgba(255,255,255,.08);border-radius:14px;background:rgba(10,15,28,.72);box-shadow:0 24px 60px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.04)}.popover button{display:block;width:100%;padding:9px;border:0;border-radius:7px;background:transparent;text-align:left;font-size:11px;color:var(--text);transition:background .15s ease}.popover button:hover{background:rgba(28,40,58,.6)}.popover small{display:block;margin-top:2px;color:var(--dim)}#results-panel{min-height:0;border-top:1px solid rgba(148,163,184,.08);background:rgba(9,13,21,.6);display:grid;grid-template-rows:45px 1fr}.results-head{display:flex;align-items:center;justify-content:space-between;padding:0 15px;border-bottom:1px solid var(--line)}.results-head>div:first-child{display:flex;align-items:center;gap:10px}.results-head strong{font-size:11px}.results-head #run-status{padding:4px 7px;border-radius:5px;color:var(--dim);background:rgba(17,25,39,.5);font:9px var(--mono)}#results{display:flex;gap:10px;min-width:0;overflow-x:auto;padding:10px}.result-placeholder{display:grid;place-items:center;width:100%;color:var(--dim);font-size:11px}.result-card{flex:0 0 330px;overflow:hidden;border:1px solid rgba(148,163,184,.08);border-top-color:rgba(255,255,255,.06);border-radius:9px;background:rgba(13,20,32,.55);box-shadow:0 4px 14px rgba(0,0,0,.15);transition:background .18s ease,box-shadow .18s ease,transform .18s ease}.result-card:hover{background:rgba(16,24,40,.65);box-shadow:0 6px 20px rgba(0,0,0,.2);transform:translateY(-1px)}.result-card h3{height:30px;padding:8px 10px;border-bottom:1px solid var(--line);font-size:10px}.result-card canvas{display:block;width:100%;height:160px}.metric-card{flex:0 0 190px;padding:13px;border:1px solid rgba(148,163,184,.08);border-radius:9px;background:rgba(13,20,32,.5);box-shadow:0 4px 14px rgba(0,0,0,.15);transition:background .18s ease,box-shadow .18s ease,transform .18s ease}.metric-card:hover{background:rgba(16,24,40,.6);box-shadow:0 6px 20px rgba(0,0,0,.2);transform:translateY(-1px)}.metric-card span{color:var(--dim);font:9px var(--mono)}.metric-card strong{display:block;margin:10px 0 5px;color:var(--cyan);font:600 22px var(--mono)}.metric-card small{color:var(--muted);font-size:9px}@media(max-width:980px){main{grid-template-columns:210px 1fr}.inspector{display:none}.brand{width:190px}}@media(max-width:720px){#app{grid-template-rows:58px 1fr 220px}.library{display:none}main{display:block}.brand{width:auto}.brand div,.workflow-name span{display:none}.workflow-name input{width:180px}.toolbar .ghost{display:none}}

.family{margin:14px 0 8px;border-top:1px solid rgba(148,163,184,.06)}
.family:first-of-type{margin-top:0;border-top:0}
.family-head{display:flex;align-items:center;gap:8px;width:100%;padding:9px 8px 8px;border:0;border-radius:6px;background:transparent;text-align:left;font:600 9px var(--mono);letter-spacing:.1em;color:var(--dim);transition:background .15s ease;cursor:pointer}
.family-head:hover{background:rgba(30,42,60,.4)}
.family-head::before{content:'▾';margin-right:4px;color:#536075;font-size:10px;transition:transform .15s ease}
.family:not(.open) .family-head::before{content:'▸'}
.family:not(.open) .family-body{display:none}
.family-meta{display:flex;align-items:center;gap:5px;margin-left:auto}
.family-meta b{padding:1px 5px;border-radius:4px;background:rgba(30,42,60,.4);color:#64748b;font-size:8px}
.family-meta em{color:#536075;font-style:normal;font-size:10px}
.family-body{padding:6px 0 2px}


/* ===== LIGHT THEME OVERRIDES ===== */
:root[data-theme="light"] body{background:#f8fafc}
:root[data-theme="light"]{--bg:#f8fafc;--panel:#ffffff;--panel2:#f1f5f9;--line:#e2e8f0;--text:#0f172a;--muted:#334155;--dim:#64748b;--cyan:#0891b2;--green:#059669;--purple:#6366f1;--amber:#d97706;--red:#dc2626}
:root[data-theme="light"] header{background:#ffffff;border-bottom-color:rgba(0,0,0,.1);box-shadow:0 1px 3px rgba(0,0,0,.06)}
:root[data-theme="light"] .workflow-name input{background:transparent}
:root[data-theme="light"] .workflow-name input:hover,:root[data-theme="light"] .workflow-name input:focus{background:#f1f5f9;border-color:var(--line)}
:root[data-theme="light"] .toolbar button{background:transparent;color:var(--muted);border-color:var(--line)}
:root[data-theme="light"] .toolbar button:hover{background:#f1f5f9;border-color:var(--line)}
:root[data-theme="light"] .toolbar .run{color:#042f2e;box-shadow:0 7px 22px rgba(14,165,233,.15)}
:root[data-theme="light"] .toolbar .run:hover{color:#042f2e;background:linear-gradient(135deg,#2dd4bf,#0ea5e9)}
:root[data-theme="light"] .library{background:#ffffff !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;border-right-color:rgba(0,0,0,.08) !important}
:root[data-theme="light"] .inspector{background:#ffffff !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;border-left-color:rgba(0,0,0,.08) !important}
:root[data-theme="light"] .search{background:#ffffff;border-color:var(--line);color:var(--text)}
:root[data-theme="light"] .search:focus{box-shadow:0 0 0 3px rgba(8,145,178,.12)}
:root[data-theme="light"] .category{color:var(--dim)}
:root[data-theme="light"] .library-item{border-color:transparent}
:root[data-theme="light"] .library-item:hover{background:#f8fafc;border-color:var(--line)}
:root[data-theme="light"] .library-help{background:#f8fafc;border-color:var(--line)}
:root[data-theme="light"] #workspace{background-color:#f1f5f9;background-image:radial-gradient(circle,rgba(0,0,0,.1) 1px,transparent 1px)}
:root[data-theme="light"] .connection{stroke:rgba(0,0,0,.25);filter:none}
:root[data-theme="light"] .connection.active{stroke:var(--cyan);stroke-dasharray:6 4;filter:drop-shadow(0 0 3px rgba(8,145,178,.3))}
:root[data-theme="light"] .node{background:#ffffff;border-color:rgba(0,0,0,.1);box-shadow:0 4px 12px rgba(0,0,0,.08)}
:root[data-theme="light"] .node.selected{border-color:var(--node-color);box-shadow:0 0 0 2px color-mix(in srgb,var(--node-color),transparent 70%),0 6px 20px rgba(0,0,0,.12)}
:root[data-theme="light"] .node-head{border-bottom-color:rgba(0,0,0,.06)}
:root[data-theme="light"] .node-head::after{background:#cbd5e1}
:root[data-theme="light"] .port{border-color:#94a3b8;background:#ffffff}
:root[data-theme="light"] .port:hover,:root[data-theme="light"] .port.connected{border-color:var(--cyan);background:#22d3ee}
:root[data-theme="light"] .node-summary{background:#f8fafc;border-top-color:rgba(0,0,0,.06)}
:root[data-theme="light"] .canvas-hud{background:#ffffff;border-color:var(--line);box-shadow:0 2px 8px rgba(0,0,0,.06)}
:root[data-theme="light"] #empty-state{background:transparent}
:root[data-theme="light"] .inspector-empty{color:var(--dim)}
:root[data-theme="light"] .inspector-title i{background:var(--node-color)}
:root[data-theme="light"] .field input,:root[data-theme="light"] .field select{background:#ffffff;border-color:var(--line);color:var(--text)}
:root[data-theme="light"] .field input:focus,:root[data-theme="light"] .field select:focus{box-shadow:0 0 0 3px rgba(8,145,178,.12)}
:root[data-theme="light"] .theory{border-top-color:var(--line)}
:root[data-theme="light"] .theory code{background:#f1f5f9;color:var(--cyan)}
:root[data-theme="light"] .delete-node{border-color:rgba(220,38,38,.2);color:#b91c1c;background:rgba(220,38,38,.05)}
:root[data-theme="light"] .delete-node:hover{background:rgba(220,38,38,.08)}
:root[data-theme="light"] .popover{background:#ffffff;border-color:rgba(0,0,0,.1);box-shadow:0 16px 48px rgba(0,0,0,.12)}
:root[data-theme="light"] .popover button:hover{background:#f1f5f9}
:root[data-theme="light"] #results-panel{background:#ffffff;border-top-color:var(--line)}
:root[data-theme="light"] .results-head #run-status{background:#f1f5f9}
:root[data-theme="light"] .result-card{background:#ffffff;border-color:var(--line);box-shadow:0 4px 12px rgba(0,0,0,.06)}
:root[data-theme="light"] .result-card:hover{box-shadow:0 6px 20px rgba(0,0,0,.1)}
:root[data-theme="light"] .metric-card{background:#ffffff;border-color:var(--line);box-shadow:0 4px 12px rgba(0,0,0,.06)}
:root[data-theme="light"] .metric-card:hover{box-shadow:0 6px 20px rgba(0,0,0,.1)}