:root{
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial;
  --shadow: 0 18px 50px rgba(0,0,0,.55);
  --r: 16px;
  --r2: 22px;

  --bg:#07090d;
  --panel:rgba(255,255,255,.04);
  --panel2:rgba(255,255,255,.03);
  --line:rgba(255,255,255,.08);
  --text:#e7eaf2;
  --muted:#9aa3b2;
  --accent:rgba(90,120,255,1);
  --accent2:rgba(255,90,180,1);
}

html[data-theme="midnight"]{ --bg:#07090d; --panel:rgba(255,255,255,.04); --panel2:rgba(255,255,255,.03); --line:rgba(255,255,255,.08); --text:#e7eaf2; --muted:#9aa3b2; --accent:rgba(90,120,255,1); --accent2:rgba(255,90,180,1); }
html[data-theme="cold_glass"]{ --bg:#05070b; --panel:rgba(125,211,252,.06); --panel2:rgba(167,139,250,.06); --line:rgba(125,211,252,.16); --text:rgba(255,255,255,.92); --muted:rgba(255,255,255,.62); --accent:#7dd3fc; --accent2:#a78bfa; }
html[data-theme="deep_forest"]{ --bg:#070b09; --panel:rgba(34,197,94,.07); --panel2:rgba(16,185,129,.06); --line:rgba(34,197,94,.18); --text:rgba(236,253,245,.92); --muted:rgba(236,253,245,.62); --accent:#22c55e; --accent2:#10b981; }
html[data-theme="aurora_purple"]{ --bg:#070615; --panel:rgba(167,139,250,.07); --panel2:rgba(45,212,191,.06); --line:rgba(167,139,250,.18); --text:rgba(245,243,255,.92); --muted:rgba(245,243,255,.62); --accent:#a78bfa; --accent2:#2dd4bf; }
html[data-theme="neon_fjord"]{ --bg:#050a0b; --panel:rgba(34,211,238,.07); --panel2:rgba(34,197,94,.06); --line:rgba(34,211,238,.18); --text:rgba(236,254,255,.92); --muted:rgba(236,254,255,.62); --accent:#22d3ee; --accent2:#22c55e; }
html[data-theme="ember"]{ --bg:#120a08; --panel:rgba(251,146,60,.07); --panel2:rgba(244,63,94,.06); --line:rgba(251,146,60,.18); --text:rgba(255,247,237,.92); --muted:rgba(255,247,237,.62); --accent:#fb923c; --accent2:#f43f5e; }
html[data-theme="clean_light"]{ --bg:#f6f7fb; --panel:rgba(0,0,0,.04); --panel2:rgba(0,0,0,.06); --line:rgba(0,0,0,.10); --text:rgba(0,0,0,.88); --muted:rgba(0,0,0,.58); --accent:#2563eb; --accent2:#7c3aed; --shadow:0 10px 30px rgba(0,0,0,.10); }
html[data-theme="forest_light"]{ --bg:#f2fbf5; --panel:rgba(16,185,129,.08); --panel2:rgba(34,197,94,.08); --line:rgba(16,185,129,.16); --text:rgba(2,44,34,.88); --muted:rgba(2,44,34,.58); --accent:#059669; --accent2:#22c55e; --shadow:0 10px 30px rgba(0,0,0,.10); }
html[data-theme="lavender_light"]{ --bg:#fbf8ff; --panel:rgba(167,139,250,.10); --panel2:rgba(99,102,241,.08); --line:rgba(167,139,250,.18); --text:rgba(30,27,75,.88); --muted:rgba(30,27,75,.58); --accent:#7c3aed; --accent2:#6366f1; --shadow:0 10px 30px rgba(0,0,0,.10); }

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font: 13px/1.35 var(--sans);
  color: var(--text);
  background:
    radial-gradient(900px 600px at 30% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    radial-gradient(900px 600px at 85% 0%, color-mix(in srgb, var(--accent2) 10%, transparent), transparent 60%),
    var(--bg);
}
.mono{ font-family: var(--mono); }
.hint{ color: var(--muted); font-size:12px; }
.label{ color: var(--muted); font-size:12px; white-space:nowrap; }
.sectionTitle{ margin-top:10px; font-size:12px; letter-spacing:.8px; text-transform:uppercase; color: var(--muted); }
.divider{ height:1px; background: var(--line); margin: 12px 0; }

.topbar{
  position: sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(10px);
}
.brand{ display:flex; align-items:center; gap:10px; }
.dot{ width:10px; height:10px; border-radius:50%; background: linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: 0 0 0 6px rgba(255,255,255,.04); }
.titles .name{ font-weight:1000; letter-spacing:.2px; }
.titles .sub{ font-size:12px; color: var(--muted); margin-top:2px; }
.topRight{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.pill{ border:1px solid var(--line); border-radius:999px; padding:6px 10px; background: var(--panel2); color: var(--muted); font-size:12px; }
.pill.mini{ padding:6px 10px; }
.themeBox{ display:flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid var(--line); border-radius:999px; background: var(--panel2); }

.btn{ border:1px solid var(--line); border-radius:999px; padding:9px 12px; background: rgba(255,255,255,.04); color: var(--text); cursor:pointer; }
.btn:hover{ background: rgba(255,255,255,.07); }
.btnGhost{ background: transparent; }
.btnPrimary{ border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent) 14%, transparent); }

.input,.select,.textarea{ border:1px solid var(--line); border-radius:12px; padding:10px 12px; background: rgba(255,255,255,.03); color: var(--text); outline:none; }
.textarea{ resize:vertical; min-height:110px; }
.textarea.small{ min-height:92px; }
.selectMini{ padding:8px 10px; }
.input:focus,.select:focus,.textarea:focus{ border-color: color-mix(in srgb, var(--accent) 65%, var(--line)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }

.layout{
  display:grid;
  grid-template-columns: 360px 1fr 420px;
  gap: 12px;
  padding: 12px;
  height: calc(100vh - 62px);
  min-height: 560px;
}
@media (max-width: 1200px){ .layout{ grid-template-columns: 1fr; height:auto; } }

.panel{ border:1px solid var(--line); border-radius: var(--r2); background: var(--panel); box-shadow: var(--shadow); overflow:hidden; display:flex; flex-direction:column; min-height:0; }
.panelHeader{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding: 10px 12px; border-bottom:1px solid var(--line); background: rgba(0,0,0,.14); }
.panelTitle{ font-weight:1000; }
.panelHint{ font-size:12px; color: var(--muted); margin-top:2px; }
.panelBody{ padding: 10px 12px; overflow:auto; min-height:0; display:flex; flex-direction:column; gap:10px; }
.panelScroll{ overflow:auto; }
.panelFooter{ padding: 10px 12px; border-top:1px solid var(--line); background: rgba(0,0,0,.10); display:flex; align-items:center; justify-content:space-between; gap:10px; }

.row{ display:flex; align-items:center; gap:8px; }
.grow{ flex:1; min-width:0; }
.grid2{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
@media (max-width: 1200px){ .grid2{ grid-template-columns: 1fr; } }

.list{ display:flex; flex-direction:column; gap:8px; }
.listItem{ border:1px solid rgba(255,255,255,.10); border-radius: 14px; background: rgba(255,255,255,.03); padding:10px; cursor:pointer; }
.listItem:hover{ border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.listItem.active{ border-color: color-mix(in srgb, var(--accent) 65%, var(--line)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); }
.listTitle{ font-weight:900; }
.listMeta{ margin-top:6px; display:flex; gap:8px; flex-wrap:wrap; }
.tag{ font-family: var(--mono); font-size: 11px; border:1px solid var(--line); padding:2px 8px; border-radius:999px; color: var(--muted); }

.palette{ display:grid; grid-template-columns: 1fr 1fr; gap:8px; }
.palItem{ border:1px solid rgba(255,255,255,.10); border-radius:14px; background: rgba(255,255,255,.03); padding:10px; cursor:pointer; }
.palItem:hover{ border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.palTitle{ font-weight:900; font-size:13px; }
.palMeta{ font-size:11px; color: var(--muted); margin-top:2px; }

.toolbar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding: 10px 12px; border-bottom: 1px solid var(--line); background: rgba(0,0,0,.10); }
.sep{ width:1px; height:18px; background: var(--line); margin: 0 6px; }
.canvasWrap{ position:relative; flex:1; min-height:0; overflow:hidden; background: radial-gradient(circle at 1px 1px, rgba(155,176,201,.14) 1px, transparent 0) 0 0 / 22px 22px, rgba(10,14,20,.55); }
.edges{ position:absolute; inset:0; pointer-events:none; }
.canvas{ position:absolute; inset:0; }
.node{ position:absolute; min-width: 200px; max-width: 260px; padding:10px; border-radius: 16px; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.22); box-shadow: 0 12px 28px rgba(0,0,0,.35); cursor: grab; }
.node.selected{ border-color: color-mix(in srgb, var(--accent) 70%, var(--line)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent), 0 12px 28px rgba(0,0,0,.35); }
.nodeTop{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.nodeName{ font-weight:1000; font-size:13px; }
.nodeBadge{ font-family: var(--mono); font-size: 11px; border:1px solid var(--line); padding:2px 8px; border-radius:999px; color: var(--muted); }
.ports{ display:flex; justify-content:space-between; gap:8px; margin-top:10px; }
.port{ width:16px; height:16px; border-radius: 7px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); }
.port.in{ box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.port.out{ box-shadow: inset 0 0 0 3px rgba(255,255,255,.08); }

.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.codebox{ margin:0; white-space:pre-wrap; word-break:break-word; background: rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:10px; font-family: var(--mono); font-size: 12px; min-height: 120px; }
.nodeInspector.hidden{ display:none; }
.nodeTopRow{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }