/* Pipelines UI v1 - app.css (Phase 4C stabilize) */
:root{
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --r: 16px;
  --line: rgba(255,255,255,0.09);
  --text: rgba(255,255,255,0.88);
  --muted: rgba(255,255,255,0.63);
  --accent: #91d9ff;
  --accent2: #60ffe3;
  --panel: rgba(19,22,30,0.94);
  --panel2: rgba(19,22,30,0.72);
  --bg: #0b0f14;
}

html[data-theme="midnight"]{ --bg:#0b0f14; --panel:rgba(19,22,30,0.94); --panel2:rgba(19,22,30,0.72); --accent:#91d9ff; --accent2:#60ffe3; --text:rgba(255,255,255,0.88); --muted:rgba(255,255,255,0.63); --line:rgba(255,255,255,0.09); }
html[data-theme="cold_glass"]{ --bg:#081017; --panel:rgba(10,18,26,0.82); --panel2:rgba(10,18,26,0.62); --accent:#8ef2ff; --accent2:#77b8ff; --text:rgba(236,250,255,0.90); --muted:rgba(236,250,255,0.66); --line:rgba(236,250,255,0.10); }
html[data-theme="deep_forest"]{ --bg:#07120d; --panel:rgba(10,20,14,0.92); --panel2:rgba(10,20,14,0.70); --accent:#7dffb3; --accent2:#a2ffd7; --text:rgba(240,255,246,0.90); --muted:rgba(240,255,246,0.66); --line:rgba(240,255,246,0.10); }
html[data-theme="aurora_purple"]{ --bg:#0c0b14; --panel:rgba(22,18,34,0.94); --panel2:rgba(22,18,34,0.70); --accent:#bba7ff; --accent2:#63ffe3; --text:rgba(246,244,255,0.90); --muted:rgba(246,244,255,0.66); --line:rgba(246,244,255,0.10); }
html[data-theme="neon_fjord"]{ --bg:#08110e; --panel:rgba(10,20,18,0.92); --panel2:rgba(10,20,18,0.70); --accent:#60ffe3; --accent2:#7dffb3; --text:rgba(236,255,250,0.90); --muted:rgba(236,255,250,0.66); --line:rgba(236,255,250,0.10); }
html[data-theme="ember"]{ --bg:#140b08; --panel:rgba(30,16,10,0.92); --panel2:rgba(30,16,10,0.70); --accent:#ffb36a; --accent2:#ffd08a; --text:rgba(255,245,236,0.90); --muted:rgba(255,245,236,0.66); --line:rgba(255,245,236,0.10); }
html[data-theme="clean_light"]{ --bg:#f7f7fb; --panel:rgba(255,255,255,0.92); --panel2:rgba(255,255,255,0.72); --accent:#2a6dff; --accent2:#14b8a6; --text:rgba(10,12,18,0.88); --muted:rgba(10,12,18,0.60); --line:rgba(10,12,18,0.10); }
html[data-theme="forest_light"]{ --bg:#f3fbf6; --panel:rgba(255,255,255,0.92); --panel2:rgba(255,255,255,0.72); --accent:#1f9d63; --accent2:#14b8a6; --text:rgba(10,12,18,0.88); --muted:rgba(10,12,18,0.60); --line:rgba(10,12,18,0.10); }
html[data-theme="lavender_light"]{ --bg:#faf7ff; --panel:rgba(255,255,255,0.92); --panel2:rgba(255,255,255,0.72); --accent:#7c3aed; --accent2:#14b8a6; --text:rgba(10,12,18,0.88); --muted:rgba(10,12,18,0.60); --line:rgba(10,12,18,0.10); }

*{ box-sizing:border-box; }
body{ margin:0; font-family:var(--sans); background:var(--bg); color:var(--text); }
.mono{ font-family:var(--mono); }
.hint{ color:var(--muted); font-size:12px; line-height:1.4; }

.topbar{ position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  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; min-width:220px; }
.dot{ width:12px; height:12px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, var(--accent), color-mix(in srgb, var(--accent2) 55%, transparent));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
.titles .name{ font-weight:700; font-size:14px; }
.titles .sub{ font-size:12px; color:var(--muted); }

/* NAV CONTRACT v1 */
.navLinks{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:2px 4px; }
.navLink{ text-decoration:none; color:var(--text); font-size:13px; padding:6px 10px; border:1px solid var(--line); border-radius:999px;
  background: color-mix(in srgb, var(--panel) 72%, transparent); }
.navLink:hover{ border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.navLink.isActive{ border-color: color-mix(in srgb, var(--accent) 70%, var(--line)); box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent) inset; }

.topRight{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-left:auto; }
.pill{ font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid var(--line);
  background: color-mix(in srgb, var(--panel2) 75%, transparent); }
.pill.mini{ padding:4px 8px; }
.themeBox{ display:flex; align-items:center; gap:8px; }
.label{ font-size:12px; color:var(--muted); }

.input,.select,.ta{ width:100%; border-radius:12px; border:1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 82%, transparent); color:var(--text); padding:10px 10px; outline:none; }
.selectMini{ padding:6px 10px; border-radius:999px; }
.ta{ font-family:var(--mono); resize:vertical; }
.ta.isBad{ outline:2px solid color-mix(in srgb, #ff4d4d 70%, transparent); }

.btn{ border:1px solid var(--line); background: color-mix(in srgb, var(--panel) 78%, transparent); color:var(--text);
  padding:8px 10px; border-radius:12px; cursor:pointer; }
.btn:hover{ border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.btnGhost{ background:transparent; }
.btnPrimary{ border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent) inset; }

.layout{ display:grid; grid-template-columns:360px 1fr 360px; gap:12px; padding:12px; }
.panel{ border:1px solid var(--line); border-radius:var(--r); background: color-mix(in srgb, var(--panel) 86%, transparent);
  overflow:hidden; min-height: calc(100vh - 86px); display:flex; flex-direction:column; }
.panelHeader{ padding:12px; display:flex; align-items:center; justify-content:space-between; gap:10px;
  border-bottom:1px solid var(--line); background: color-mix(in srgb, var(--panel2) 70%, transparent); }
.panelBody{ padding:12px; display:flex; flex-direction:column; gap:10px; }
.panelFooter{ margin-top:auto; padding:10px 12px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:10px;
  background: color-mix(in srgb, var(--panel2) 70%, transparent); }
.panelTitle{ font-weight:700; font-size:13px; }
.panelHint{ color:var(--muted); font-size:12px; }
.panelScroll{ overflow:auto; }

.row{ display:flex; gap:10px; align-items:center; }
.grow{ flex:1 1 auto; }
.sectionTitle{ margin-top:6px; font-weight:700; font-size:12px; color:var(--muted); }

.list{ display:flex; flex-direction:column; gap:8px; }
.item,.tpl{ text-align:left; border:1px solid var(--line); background: color-mix(in srgb, var(--panel2) 72%, transparent); color:var(--text);
  padding:10px; border-radius:14px; cursor:pointer; }
.item:hover,.tpl:hover{ border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.item.isActive{ border-color: color-mix(in srgb, var(--accent) 70%, var(--line)); }
.itemTop{ display:flex; justify-content:space-between; gap:10px; align-items:center; }
.itemName{ font-weight:700; font-size:13px; }
.itemTag{ font-size:12px; color:var(--muted); }
.itemSub{ font-size:12px; color:var(--muted); margin-top:4px; }
.tplName{ font-weight:700; font-size:13px; }
.tplDesc{ font-size:12px; color:var(--muted); margin-top:4px; }

.palette{ display:flex; gap:8px; flex-wrap:wrap; }
.pal{ border:1px solid var(--line); background: color-mix(in srgb, var(--panel2) 72%, transparent); color:var(--text);
  padding:8px 10px; border-radius:999px; cursor:pointer; font-size:12px; }
.pal:hover{ border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }

.toolbar{ display:flex; gap:8px; align-items:center; padding:10px 12px; border-bottom:1px solid var(--line);
  background: color-mix(in srgb, var(--panel2) 70%, transparent); }
.sep{ width:1px; height:22px; background:var(--line); }

.canvasWrap{ position:relative; height:520px; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 88%, transparent); }
.edges{ position:absolute; inset:0; width:100%; height:100%; }
.edge{ stroke: color-mix(in srgb, var(--accent) 60%, white); stroke-width:2; opacity:0.6; }
.canvas{ position:absolute; inset:0; }

.node{ position:absolute; width:180px; border:1px solid var(--line); border-radius:14px;
  background: color-mix(in srgb, var(--panel) 86%, transparent); color:var(--text); padding:10px; cursor:pointer; }
.node:hover{ border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.node.isActive{ border-color: color-mix(in srgb, var(--accent) 75%, var(--line)); }
.nodeTop{ display:flex; justify-content:space-between; gap:10px; align-items:center; }
.nodeType,.nodeId{ font-size:12px; color:var(--muted); }
.nodeLabel{ margin-top:6px; font-weight:700; font-size:13px; }

.field{ display:block; margin-top:10px; }
.fieldLabel{ font-size:12px; color:var(--muted); margin-bottom:6px; }
.empty{ padding:12px; border:1px dashed var(--line); border-radius:14px; color:var(--muted);
  background: color-mix(in srgb, var(--panel2) 65%, transparent); }