/* MSME Integration Platform — design tokens + components (no framework) */
:root {
  --bg: #0b1020; --bg2: #0f162b; --panel: #131c35; --panel2: #18233f; --line: #24324f; --line2: #2f3f63;
  --text: #e6ecff; --muted: #8e9bbd; --dim: #5d6a8c;
  --brand: #6d5efc; --brand2: #22d3ee; --ok: #22c55e; --warn: #f59e0b; --err: #ef4444; --info: #3b82f6;
  --run: #38bdf8; --wait: #f59e0b; --pause: #a78bfa;
  --radius: 12px; --shadow: 0 10px 30px rgba(0,0,0,.35);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Ubuntu, sans-serif;
}
[data-appearance="light"] {
  --bg: #f4f6fb; --bg2: #eef1f8; --panel: #ffffff; --panel2: #f7f8fc; --line: #e1e6f0; --line2: #cfd7e6;
  --text: #17203a; --muted: #5b6785; --dim: #94a0bb; --shadow: 0 10px 30px rgba(20,30,60,.10);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 14px/1.45 var(--font); }
a { color: var(--brand2); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
.boot { display: grid; place-items: center; height: 100vh; font-size: 20px; color: var(--muted); }

/* ------- layout */
.shell { display: grid; grid-template-columns: 232px 1fr; height: 100vh; }
.side { background: var(--bg2); border-right: 1px solid var(--line); display: flex; flex-direction: column; overflow-y: auto; }
.brand { display: flex; gap: 10px; align-items: center; padding: 18px 18px 10px; font-weight: 700; letter-spacing: .2px; }
.brand .logo { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 19px;
  background: linear-gradient(135deg, var(--brand), var(--brand2)); box-shadow: 0 6px 20px rgba(109,94,252,.45); }
.brand small { display: block; font-weight: 500; color: var(--muted); font-size: 11px; }
.nav { padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.nav .sect { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); padding: 14px 10px 6px; }
.nav a { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 9px; color: var(--muted); }
.nav a:hover { background: var(--panel); color: var(--text); }
.nav a.active { background: linear-gradient(90deg, rgba(109,94,252,.25), rgba(34,211,238,.08)); color: var(--text); }
.nav a .ico { width: 20px; text-align: center; }
.side .foot { margin-top: auto; padding: 12px; font-size: 12px; color: var(--dim); }
.main { display: flex; flex-direction: column; min-width: 0; height: 100vh; }
.top { display: flex; align-items: center; gap: 12px; padding: 10px 20px; border-bottom: 1px solid var(--line); background: var(--bg2); min-height: 56px; }
.top .title { font-size: 17px; font-weight: 650; }
.top .grow { flex: 1; }
.content { flex: 1; overflow: auto; padding: 20px 24px 60px; }
.content.full { padding: 0; overflow: hidden; }

/* ------- primitives */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 9px; border: 1px solid var(--line2);
  background: var(--panel2); cursor: pointer; white-space: nowrap; transition: .15s; }
.btn:hover { border-color: var(--brand); }
.btn.primary { background: linear-gradient(135deg, var(--brand), #4f46e5); border-color: transparent; color: #fff; }
.btn.ok { background: var(--ok); border-color: transparent; color: #04210f; }
.btn.danger { color: var(--err); }
.btn.danger.solid { background: var(--err); color: #fff; border-color: transparent; }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.sm { padding: 4px 9px; font-size: 12.5px; border-radius: 7px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
input.inp, select.inp, textarea.inp { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line2); background: var(--bg2); outline: none; }
input.inp:focus, select.inp:focus, textarea.inp:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(109,94,252,.18); }
textarea.inp { min-height: 80px; resize: vertical; }
textarea.code, .mono { font-family: var(--mono); font-size: 12.5px; }
label.lbl { display: block; font-size: 12px; color: var(--muted); margin: 10px 0 4px; font-weight: 550; }
.help { font-size: 11.5px; color: var(--dim); margin-top: 3px; }
.row { display: flex; gap: 10px; align-items: center; }
.row > * { min-width: 0; }
.col { display: flex; flex-direction: column; gap: 10px; }
.grid { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.card h3 { margin: 0 0 10px; font-size: 14.5px; }
.card .sub { color: var(--muted); font-size: 12.5px; }
.muted { color: var(--muted); } .dim { color: var(--dim); } .small { font-size: 12px; }
.spacer { flex: 1; }
.hr { height: 1px; background: var(--line); margin: 14px 0; }
.kpi { padding: 14px 16px; }
.kpi .v { font-size: 26px; font-weight: 700; margin-top: 4px; }
.kpi .l { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.kpi .d { font-size: 12px; color: var(--dim); }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 600;
  background: var(--panel2); border: 1px solid var(--line2); white-space: nowrap; }
.badge.SUCCESS, .badge.PUBLISHED, .badge.active, .badge.ok, .badge.healthy, .badge.loaded, .badge.COMPLETED, .badge.APPROVED { color: var(--ok); border-color: rgba(34,197,94,.4); background: rgba(34,197,94,.1); }
.badge.FAILED, .badge.error, .badge.DEAD_LETTER, .badge.REJECTED, .badge.revoked, .badge.inactive, .badge.suspended { color: var(--err); border-color: rgba(239,68,68,.4); background: rgba(239,68,68,.1); }
.badge.RUNNING, .badge.QUEUED, .badge.TESTING, .badge.RETRYING { color: var(--run); border-color: rgba(56,189,248,.4); background: rgba(56,189,248,.1); }
.badge.WAITING, .badge.WAITING_APPROVAL, .badge.PENDING, .badge.pending, .badge.rate_limited, .badge.degraded, .badge.DRAFT { color: var(--warn); border-color: rgba(245,158,11,.4); background: rgba(245,158,11,.1); }
.badge.PAUSED, .badge.DISABLED, .badge.ARCHIVED, .badge.CANCELLED, .badge.removed { color: var(--pause); border-color: rgba(167,139,250,.4); background: rgba(167,139,250,.1); }
.chip { padding: 4px 10px; border-radius: 99px; border: 1px solid var(--line2); cursor: pointer; font-size: 12.5px; background: var(--panel2); }
.chip.on { border-color: var(--brand); background: rgba(109,94,252,.18); }
.empty { text-align: center; padding: 40px; color: var(--muted); }
.empty .big { font-size: 40px; }

table.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600;
  padding: 9px 10px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); }
.tbl td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr.click { cursor: pointer; } .tbl tr.click:hover td { background: var(--panel2); }
.tbl th.sort { cursor: pointer; } .tbl th.sort:hover { color: var(--text); }
.tablewrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.bar { height: 8px; background: var(--bg2); border-radius: 99px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand2)); border-radius: 99px; transition: width .4s; }
.bar.warn > i { background: var(--warn); } .bar.err > i { background: var(--err); }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.tabs button { background: none; border: none; padding: 9px 12px; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; }
.tabs button.on { color: var(--text); border-bottom-color: var(--brand); }
pre.json { background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 10px; overflow: auto; max-height: 360px;
  font: 12px/1.5 var(--mono); margin: 0; white-space: pre-wrap; word-break: break-word; }
.toggle { position: relative; width: 38px; height: 22px; flex: none; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle span { position: absolute; inset: 0; background: var(--line2); border-radius: 99px; cursor: pointer; transition: .2s; }
.toggle span::after { content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; border-radius: 50%; background: #fff; transition: .2s; }
.toggle input:checked + span { background: var(--brand); }
.toggle input:checked + span::after { transform: translateX(16px); }

/* ------- toasts / modal */
#toasts { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 1000; }
.toast { background: var(--panel); border: 1px solid var(--line2); border-left: 4px solid var(--info); border-radius: 10px; padding: 10px 14px;
  box-shadow: var(--shadow); max-width: 420px; animation: slidein .25s; }
.toast.ok { border-left-color: var(--ok); } .toast.err { border-left-color: var(--err); } .toast.warn { border-left-color: var(--warn); }
@keyframes slidein { from { transform: translateY(10px); opacity: 0; } }
.modal-back { position: fixed; inset: 0; background: rgba(5,8,20,.6); display: grid; place-items: center; z-index: 900; backdrop-filter: blur(2px); }
.modal { background: var(--panel); border: 1px solid var(--line2); border-radius: 14px; width: min(640px, 94vw); max-height: 90vh; display: flex;
  flex-direction: column; box-shadow: var(--shadow); }
.modal.wide { width: min(1040px, 96vw); } .modal.xl { width: min(1300px, 97vw); }
.modal header { padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 15px; }
.modal .body { padding: 16px 18px; overflow: auto; }
.modal footer { padding: 12px 18px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; }

/* ------- login */
.login { min-height: 100vh; display: grid; place-items: center; background:
  radial-gradient(800px 400px at 15% 10%, rgba(109,94,252,.25), transparent), radial-gradient(700px 400px at 90% 90%, rgba(34,211,238,.18), transparent), var(--bg); }
.login .card { width: min(420px, 92vw); padding: 28px; }
.login h1 { margin: 6px 0 4px; font-size: 22px; }
.tracks { font-size: 26px; letter-spacing: 4px; margin-bottom: 8px; }

/* ------- builder */
.builder { position: relative; display: grid; grid-template-columns: var(--pw,250px) 1fr var(--cw,360px); height: calc(100vh - 56px); }
.builder.nocfg { grid-template-columns: var(--pw,250px) 1fr 0; }
.palette { border-right: 1px solid var(--line); background: var(--bg2); overflow-y: auto; padding: 10px; }
.palette .cat { font-size: 11px; text-transform: uppercase; color: var(--dim); letter-spacing: .08em; margin: 12px 4px 6px; cursor: pointer; }
.pal-item { display: flex; gap: 8px; align-items: center; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel);
  margin-bottom: 5px; cursor: grab; font-size: 13px; }
.pal-item:hover { border-color: var(--brand); }
.pal-item.na { opacity: .45; }
.pal-item .ic { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: 13px; }
.canvas-wrap { position: relative; overflow: hidden; background-color: var(--bg);
  background-image: radial-gradient(var(--line) 1px, transparent 1px); background-size: 22px 22px; cursor: default; }
.canvas-wrap.panning { cursor: grabbing; }
.canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.canvas svg.edges { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.edge-path { fill: none; stroke: #4b5b85; stroke-width: 5; pointer-events: stroke; cursor: pointer; }
.edge-rail { fill: none; stroke: var(--bg); stroke-width: 2; stroke-dasharray: 2 8; pointer-events: none; }
.edge-path.sel { stroke: var(--brand); }
.edge-path.ep-error { stroke: #8a3b48; } .edge-path.ep-true { stroke: #2f7a4a; } .edge-path.ep-false { stroke: #7a5a2f; }
.edge-label { font-size: 11px; fill: var(--muted); font-weight: 650; }
.edge-temp { fill: none; stroke: var(--brand2); stroke-width: 3; stroke-dasharray: 6 5; }
.node { position: absolute; width: 210px; background: var(--panel); border: 1.5px solid var(--line2); border-radius: 12px; box-shadow: var(--shadow);
  user-select: none; cursor: move; }
.node.sel { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(109,94,252,.3), var(--shadow); }
.node.disabled { opacity: .5; }
.node .nh { display: flex; gap: 8px; align-items: center; padding: 9px 10px 4px; }
.node .ni { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-size: 15px; flex: none; }
.node .nt { font-weight: 650; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.node .ns { font-size: 11px; color: var(--muted); padding: 0 10px 8px 46px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.node .st { position: absolute; top: -9px; right: 8px; }
.node .port-in { position: absolute; left: 50%; top: -7px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--panel);
  border: 2px solid var(--muted); }
.node .ports { display: flex; justify-content: space-around; border-top: 1px dashed var(--line); padding: 5px 4px 9px; gap: 2px; }
.node .port { position: relative; display: flex; flex-direction: column; align-items: center; font-size: 10px; color: var(--muted); cursor: crosshair; }
.node .port i { width: 13px; height: 13px; border-radius: 50%; background: var(--brand2); border: 2px solid var(--panel); box-shadow: 0 0 0 1px var(--brand2);
  margin-top: 3px; }
.node .port.pt-error i { background: var(--err); box-shadow: 0 0 0 1px var(--err); }
.node .port.pt-true i { background: var(--ok); box-shadow: 0 0 0 1px var(--ok); } .node .port.pt-false i { background: var(--warn); box-shadow: 0 0 0 1px var(--warn); }
.node.run-RUNNING { border-color: var(--run); animation: pulse 1.2s infinite; }
.node.run-SUCCESS { border-color: var(--ok); } .node.run-FAILED { border-color: var(--err); } .node.run-WAITING, .node.run-RETRYING { border-color: var(--warn); }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(56,189,248,.18), var(--shadow); } }
.zoombar { position: absolute; left: 12px; bottom: 12px; z-index: 3; display: flex; gap: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 4px; }
.minihelp { position: absolute; right: 12px; bottom: 12px; font-size: 11.5px; color: var(--dim); background: var(--panel); border: 1px solid var(--line);
  padding: 6px 10px; border-radius: 8px; }
.cfg { border-left: 1px solid var(--line); background: var(--bg2); overflow-y: auto; padding: 14px; }
.kv-row { display: grid; grid-template-columns: 1fr 1.4fr 28px; gap: 6px; margin-bottom: 6px; }
.kv-row > * { min-width: 0; }
.cond-row { display: grid; grid-template-columns: 1.2fr 100px 1fr 28px; gap: 6px; margin-bottom: 6px; }
.expr { position: relative; }
.expr .pick { position: absolute; right: 4px; top: 4px; }
.picker { position: absolute; z-index: 50; background: var(--panel); border: 1px solid var(--line2); border-radius: 10px; box-shadow: var(--shadow);
  max-height: 320px; overflow: auto; width: 320px; padding: 6px; }
.picker .pi { padding: 5px 8px; border-radius: 6px; cursor: pointer; font: 12px var(--mono); display: flex; justify-content: space-between; gap: 8px; }
.picker .pi:hover { background: var(--panel2); }
.picker .pi span { color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
.issue { padding: 7px 9px; border-radius: 8px; margin-bottom: 6px; font-size: 12.5px; border: 1px solid var(--line); cursor: pointer; }
.issue.ERROR { border-color: rgba(239,68,68,.5); } .issue.WARNING { border-color: rgba(245,158,11,.5); } .issue.SUGGESTION { border-color: rgba(59,130,246,.5); }

/* ------- live execution */
.live { display: grid; grid-template-columns: 1fr 330px; grid-template-rows: minmax(160px, 1fr) var(--bh, 300px); height: calc(100vh - 56px); }
.stage { position: relative; overflow: hidden; background: radial-gradient(1200px 500px at 50% 0%, rgba(109,94,252,.12), transparent), var(--bg); border-bottom: 1px solid var(--line); }
.stage-tools { position: absolute; top: 10px; left: 12px; right: 12px; display: flex; gap: 8px; align-items: center; z-index: 5; flex-wrap: wrap; }
.speedpanel { grid-row: 1 / span 2; grid-column: 2; border-left: 1px solid var(--line); background: var(--bg2); overflow-y: auto; padding: 14px; }
.livebottom { overflow: hidden; display: flex; flex-direction: column; padding: 8px 14px 0; }
.livebottom .tabbody { flex: 1; overflow: auto; padding-bottom: 12px; }
.metric { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.metric b { font-variant-numeric: tabular-nums; }
.speedo { text-align: center; margin: 4px 0 10px; }
.speedo .val { font-size: 34px; font-weight: 800; background: linear-gradient(90deg, var(--brand2), var(--brand)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.profile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.profile { border: 1px solid var(--line2); border-radius: 9px; padding: 7px; cursor: pointer; font-size: 12.5px; text-align: center; background: var(--panel); }
.profile.on { border-color: var(--brand); background: rgba(109,94,252,.16); }
.tl-row { display: grid; grid-template-columns: 78px 26px 1fr 110px; gap: 8px; padding: 5px 4px; border-bottom: 1px solid var(--line); font-size: 12.5px; align-items: center; }
.tl-row:hover { background: var(--panel); }
.demo-banner { position: absolute; top: 12px; right: 16px; z-index: 6; background: repeating-linear-gradient(45deg, #f59e0b, #f59e0b 12px, #b45309 12px, #b45309 24px);
  color: #111; font-weight: 900; letter-spacing: .3em; padding: 6px 22px; border-radius: 8px; box-shadow: var(--shadow); }
.theme-svg { width: 100%; height: 100%; display: block; }
.theme-svg text { font-family: var(--font); }
.paused-overlay { position: absolute; inset: auto 0 18px 0; margin: auto; width: max-content; background: var(--panel); border: 1px solid var(--pause);
  padding: 10px 18px; border-radius: 12px; z-index: 6; text-align: center; box-shadow: var(--shadow); }

/* ------- AI panel */
.ai-fab { position: fixed; right: 20px; bottom: 20px; width: 54px; height: 54px; border-radius: 50%; border: none; font-size: 24px; cursor: pointer; z-index: 800;
  background: linear-gradient(135deg, var(--brand), var(--brand2)); box-shadow: 0 10px 30px rgba(109,94,252,.5); }
.ai-panel { position: fixed; right: 20px; bottom: 86px; width: min(660px, 96vw); height: min(780px, 86vh); z-index: 800; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line2); border-radius: 16px; box-shadow: var(--shadow); }
.ai-panel header { padding: 12px 14px; border-bottom: 1px solid var(--line); font-weight: 650; display: flex; gap: 8px; align-items: center; }
.ai-msgs { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.msg { padding: 9px 12px; border-radius: 12px; max-width: 92%; white-space: pre-wrap; font-size: 13px; }
.msg.me { align-self: flex-end; background: rgba(109,94,252,.22); }
.msg.bot { align-self: flex-start; background: var(--panel2); border: 1px solid var(--line); }
.ai-input { display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--line); }
.step-list { margin: 6px 0; padding-left: 18px; }

/* ------- module editor */
.editor { width: 100%; min-height: 460px; font: 12.5px/1.55 var(--mono); background: #0a0f1d; color: #d7e0ff; border: 1px solid var(--line2);
  border-radius: 10px; padding: 12px; tab-size: 4; white-space: pre; overflow: auto; resize: vertical; }
[data-appearance="light"] .editor { background: #fbfcff; color: #17203a; }
.sheet td[contenteditable="true"] { outline: 2px solid var(--brand); background: var(--panel2); }

@media (max-width: 1100px) { .builder { grid-template-columns: var(--pw,200px) 1fr var(--cw,320px); } .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 800px) { .shell { grid-template-columns: 1fr; } .side { display: none; } .g3, .g2 { grid-template-columns: 1fr; }
  .live { grid-template-columns: 1fr; } .speedpanel { grid-row: auto; grid-column: auto; } }
/* ---- JSON editor / API tester ---- */
.jed { border: 1px solid var(--line2); border-radius: 9px; background: var(--bg2); overflow: hidden; }
.jed-bar { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--line); flex-wrap: wrap; background: var(--panel2); }
.jed-body { max-height: 420px; overflow: auto; padding: 6px 8px; font: 12.5px var(--mono); }
.jed-code { min-height: 180px; width: 100%; border: 0; background: transparent; resize: vertical; font: 12.5px var(--mono); }
.jed-foot { padding: 2px 8px 5px; min-height: 18px; }
.jed-empty { padding: 10px 4px; }
.jrow { display: flex; align-items: center; gap: 4px; min-height: 26px; white-space: nowrap; }
.jrow:hover { background: var(--panel2); }
.jtog { width: 14px; display: inline-block; cursor: pointer; color: var(--dim); user-select: none; }
.jk { color: var(--brand2); font-weight: 600; }
.jk.idx { color: var(--dim); font-weight: 400; }
input.jk { color: var(--brand2); }
.jv.string { color: #16a34a; } .jv.number { color: #d97706; } .jv.boolean { color: #7c3aed; } .jv.null { color: var(--dim); }
.jed.ro .jv { cursor: pointer; overflow: hidden; text-overflow: ellipsis; max-width: 520px; }
.jed-add { display: inline-flex; gap: 4px; align-items: center; opacity: .85; }
.btn.xs { padding: 1px 7px; font-size: 11.5px; border-radius: 6px; }
.inp.xs { padding: 2px 6px; font-size: 12px; height: 24px; width: auto; }
.inp.sm { padding: 3px 7px; font-size: 12.5px; height: 28px; }
.seg { display: inline-flex; } .seg .btn { border-radius: 0; } .seg .btn:first-child { border-radius: 7px 0 0 7px; } .seg .btn:last-child { border-radius: 0 7px 7px 0; margin-left: -1px; }
.btn.on { background: var(--brand); color: #fff; border-color: transparent; }
.tester { display: grid; grid-template-columns: minmax(380px, 1fr) minmax(380px, 1.1fr); gap: 14px; align-items: start; }
@media (max-width: 1100px) { .tester { grid-template-columns: 1fr; } }
.urlbar { display: grid; grid-template-columns: 110px 1fr auto; gap: 6px; }
.statusline { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.next-steps { border: 1px dashed var(--line2); border-radius: 9px; padding: 10px; margin-top: 10px; }
.node.drop-target { border-color: var(--ok); box-shadow: 0 0 0 4px rgba(34,197,94,.35), var(--shadow); }
.minihelp { pointer-events: none; left: auto; max-width: calc(100% - 330px); }
@media (max-width: 1500px) { .minihelp { display: none; } }
.email-preview { margin-top: 6px; border: 1px solid var(--line2); border-radius: 9px; background: #fff; color: #111; padding: 12px; max-height: 420px; overflow: auto; }
.email-render a { color: #2563eb; } .email-render img { max-width: 100%; }
.data-panel { border: 1px solid var(--line2); border-radius: 10px; margin: 4px 0 10px; background: var(--bg2); }
.data-panel > summary { padding: 8px 10px; cursor: pointer; font-weight: 650; }
.data-panel .dp-body { max-height: 340px; overflow: auto; padding: 0 8px 8px; }
.dp-group { margin-top: 6px; }
.dp-head { display: flex; gap: 6px; align-items: center; font-size: 12.5px; font-weight: 650; padding: 4px 2px; cursor: pointer; }
.dp-head .ref { font: 11.5px var(--mono); color: var(--dim); font-weight: 400; }
.dp-item { display: flex; justify-content: space-between; gap: 8px; padding: 3px 6px 3px 20px; border-radius: 6px; cursor: pointer; font: 12px var(--mono); }
.dp-item:hover { background: var(--panel2); }
.dp-item span { color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
.dp-badge { font-size: 10.5px; padding: 1px 6px; border-radius: 999px; background: var(--panel2); color: var(--dim); font-weight: 500; }

/* ------- Professional theme refinement (calm slate + indigo, restrained accents) */
:root {
  --bg: #0e1320; --bg2: #121827; --panel: #161d2e; --panel2: #1b2336; --line: #252e44; --line2: #323d58;
  --text: #e8ecf5; --muted: #9aa5be; --dim: #66718c;
  --brand: #4f6df5; --brand2: #38a3d6; --radius: 10px; --shadow: 0 6px 18px rgba(0,0,0,.28);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Ubuntu, sans-serif;
}
[data-appearance="light"] { --bg: #f5f7fa; --bg2: #ffffff; --panel: #ffffff; --panel2: #f8fafc; --line: #e3e8ef; --line2: #cdd5e0;
  --text: #1a2233; --muted: #566179; --dim: #8b95a8; --shadow: 0 4px 14px rgba(20,30,60,.08); }
html, body { font-size: 14px; -webkit-font-smoothing: antialiased; letter-spacing: -.003em; }
.brand .logo { background: var(--brand); box-shadow: none; border-radius: 9px; }
.nav a { border-radius: 7px; font-weight: 500; }
.nav a.active { background: rgba(79,109,245,.14); color: var(--text); box-shadow: inset 2px 0 0 var(--brand); }
.top { background: var(--bg2); box-shadow: 0 1px 0 var(--line); }
.stage, .auth-bg { background-image: none; }
.card, .panel { border-radius: var(--radius); box-shadow: var(--shadow); }
input.inp, select.inp, textarea.inp { border-radius: 7px; background: var(--panel2); transition: border-color .15s, box-shadow .15s; }
input.inp:focus, select.inp:focus, textarea.inp:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79,109,245,.2); }
button { transition: background .15s, border-color .15s, transform .05s; }
button:active { transform: translateY(1px); }
table { border-collapse: collapse; }
th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 8px; border: 2px solid var(--bg); }
.node .authwarn { margin: 6px 0 2px; padding: 3px 7px; border-radius: 6px; font-size: 11px; background: rgba(245,158,11,.14); color: var(--warn); border: 1px solid rgba(245,158,11,.4); cursor: pointer; }
.node .authwarn:hover { background: rgba(245,158,11,.24); }
.ai-panel .msg.bot .q { margin: 8px 0 4px; font-weight: 600; }
.ai-panel .engine { font-size: 11px; color: var(--muted); margin-top: 6px; }
.pend { display: flex; gap: 8px; align-items: center; margin: 5px 0; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel2); }
.pend.warn { border-color: rgba(245,158,11,.5); }

/* ---- Flow assistant v2: mode bar, understood card, checks, tests; Data Analysis */
.ai-mode { padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--panel-2, rgba(99,102,241,.05)); }
.ai-mode .dot, .an-ai .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: #94a3b8; }
.ai-mode .dot.on, .an-ai .dot.on { background: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.18); }
.ai-mode .dot.off, .an-ai .dot.off { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.16); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { background: transparent; border: 0; padding: 4px 10px; font-size: 12px; color: var(--muted); cursor: pointer; }
.seg button.on { background: var(--brand); color: #fff; }
.ai-notice { margin: 6px 0; padding: 8px 10px; border-radius: 8px; background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.35); font-size: 12.5px; }
.ai-understood { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 6px 0; background: rgba(99,102,241,.05); }
.ai-uhead { font-weight: 650; margin-bottom: 6px; }
.ai-ustep { display: flex; gap: 8px; align-items: center; padding: 5px 8px; border-radius: 8px; background: var(--card, #fff); border: 1px solid var(--line); }
.ai-ustep .ico { width: 22px; text-align: center; }
.ai-arrow { text-align: center; color: var(--muted); line-height: 1; padding: 2px 0; }
.ai-checks > div, .ai-ready > div { padding: 2px 0; font-size: 13px; }
.ai-checks .ok, .ai-ready .ok, .ai-tsum.ok, .ai-tstep.ok .ico { color: var(--ok, #059669); }
.ai-checks .warn, .ai-ready .warn { color: var(--warn, #d97706); }
.ai-tstep { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ai-tstep.bad .ico, .ai-tsum.bad, .ai-tstep .bad { color: var(--err, #dc2626); }
.ai-tstep .ico { font-weight: 700; width: 18px; }
.ai-tsum { margin-top: 10px; font-weight: 650; }
.an-hero { background: linear-gradient(135deg, rgba(79,70,229,.10), rgba(6,182,212,.08)); }
.an-ds b { display: block; margin-bottom: 4px; }
.an-k span { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.an-k b { font-size: 20px; }
.an-chart svg { max-width: 100%; height: auto; }
.an-kpi { display: inline-flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; margin: 6px 0; }
.an-kpi span { font-size: 11px; color: var(--muted); text-transform: uppercase; }
.an-kpi b { font-size: 22px; }
.an-narr { background: rgba(99,102,241,.08); border-radius: 10px; padding: 8px 12px; margin: 6px 0; }
.an-frame { width: 100%; height: 70vh; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.an-ins li { margin: 4px 0; }
.an-ai { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.grid.g4 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* ---- guided wizard */
.ai-msgs .msg.wide{max-width:100%;width:100%}
.wz-card{display:block}
.wz-steps{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.wz-step{font-size:11px;padding:2px 8px;border-radius:99px;background:var(--panel2,rgba(255,255,255,.06));color:var(--muted,#8b93a7)}
.wz-step.done{color:var(--ok,#22c55e)} .wz-step.now{background:var(--accent,#6366f1);color:#fff;font-weight:600}
.wz-title{font-size:16px;font-weight:700;margin:2px 0 4px}
.wz-hint{font-size:12.5px;color:var(--muted,#8b93a7);margin-bottom:8px}
.wz-info{font-size:12px;background:rgba(99,102,241,.12);border-radius:8px;padding:6px 8px;margin-bottom:8px}
.wz-err{font-size:12.5px;color:var(--err,#ef4444);background:rgba(239,68,68,.1);border-radius:8px;padding:6px 8px;margin-bottom:8px}
.wz-warn{font-size:12.5px;color:var(--warn,#f59e0b);margin-top:6px}
.wz-sub{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted,#8b93a7);margin:10px 0 4px}
.wz-opts{display:flex;flex-direction:column;gap:6px;max-height:340px;overflow:auto;padding:2px}
.wz-opt{display:flex;align-items:center;gap:10px;text-align:left;width:100%;padding:9px 10px;border-radius:10px;cursor:pointer;
  background:var(--panel2,rgba(255,255,255,.05));border:1px solid var(--line,rgba(255,255,255,.12));color:inherit;font:inherit;transition:.12s}
.wz-opt:hover{border-color:var(--accent,#6366f1);background:rgba(99,102,241,.14);transform:translateY(-1px)}
.wz-opt .ico{font-size:20px;width:26px;text-align:center;flex:none}
.wz-opt .txt{display:flex;flex-direction:column;flex:1;min-width:0}
.wz-opt .txt b{font-weight:600}
.wz-opt .sub{font-size:11.5px;color:var(--muted,#8b93a7);white-space:normal}
.wz-opt .badge{font-size:10px}
.wz-opt .go{font-size:11px;font-weight:700;color:var(--accent,#6366f1);opacity:.0;transition:.12s;flex:none}
.wz-opt:hover .go{opacity:1}
.wz-opt.ready{border-left:3px solid var(--ok,#22c55e)}
.wz-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.wz-chip{padding:5px 11px;border-radius:99px;border:1px solid var(--line,rgba(255,255,255,.2));background:transparent;color:inherit;cursor:pointer;font:inherit;font-size:12.5px}
.wz-chip:hover{background:var(--accent,#6366f1);color:#fff}
.wz-filter{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.wz-filter .inp{flex:1;min-width:110px}
.wz-foot{display:flex;align-items:center;margin-top:10px;padding-top:6px;border-top:1px solid var(--line,rgba(255,255,255,.08))}
.wz-crumbs{display:flex;gap:4px;flex-wrap:wrap;padding:4px 10px;max-height:64px;overflow:auto}
.wz-crumbs:empty{display:none}
.ai-panel.studio>.wz-crumbs:empty{display:flex}
.crumb{font-size:11px;padding:2px 8px;border-radius:99px;border:1px solid var(--line,rgba(255,255,255,.15));background:transparent;color:var(--muted,#9aa3b8);cursor:pointer;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crumb:hover{border-color:var(--accent,#6366f1);color:inherit}
.wz-line{display:flex;gap:8px;align-items:center;width:100%;text-align:left;padding:7px 9px;margin-bottom:4px;border-radius:8px;background:var(--panel2,rgba(255,255,255,.05));border:1px solid transparent;color:inherit;font:inherit;cursor:pointer}
.wz-line:hover{border-color:var(--accent,#6366f1)}
.wz-line .chg{margin-left:auto;font-size:11px;color:var(--accent,#6366f1)}
.wz-check{display:flex;gap:6px;align-items:center;margin:8px 0}
.wz-map .tablewrap{max-height:340px;overflow:auto}
.wz-tbl td{vertical-align:top;padding:4px 6px}
.wz-tbl tr.off{opacity:.5}
.wz-fx{display:flex;gap:4px}
.wz-fx .inp{min-width:90px}
.wz-fx .mono{flex:1;min-width:150px}
.wz-pick{max-width:84px}
.wz-tbl .ex{font-family:var(--mono,monospace);word-break:break-word}
.inp.warn{border-color:var(--warn,#f59e0b)}
.small.bad{color:var(--err,#ef4444)}
.wz-fn{margin:4px 0 0 16px;padding:0;font-size:12px}
.wz-fn code,.wz-map code{background:rgba(255,255,255,.08);padding:0 4px;border-radius:4px}
.wz-tbl input.inp{padding:5px 7px;font-size:12.5px}
.wz-tbl td:nth-child(2){width:28%}
.wz-tbl td:nth-child(4){width:24%}

/* existing-flow editor + automatic mapping bar */
.fl-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fl-steps{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.fl-step{display:flex;align-items:center;gap:6px;padding:6px 8px;border:1px solid var(--border,rgba(255,255,255,.1));border-radius:8px;background:var(--panel2,rgba(255,255,255,.03));flex-wrap:wrap}
.fl-step .n{flex:none;width:22px;height:22px;border-radius:50%;background:var(--accent,#6366f1);color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center}
.fl-step .grow{flex:1;min-width:120px}
.wz-auto{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0;padding:8px 10px;border:1px dashed var(--accent,#6366f1);border-radius:8px}

/* Zapier-style assistant */
.ai-panel{transition:width .15s,height .15s}
.ai-panel.max{width:min(1120px,97vw);height:92vh;right:10px;bottom:10px}
.ai-panel.min{height:auto!important} .ai-panel.min>:not(header){display:none!important}
.ai-panel.focus .ai-mode,.ai-panel.focus .wz-crumbs{display:none}
.ai-panel.focus .ai-msgs .msg:not(:last-child){display:none}
.ai-panel header .btn.sm{padding:3px 7px}
.zp{display:flex;flex-direction:column;gap:8px}
.zp-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.zp-msg{color:var(--muted)}
.zp-pill{border:0;border-radius:99px;padding:3px 10px;font-size:12px;font-weight:600;cursor:pointer}
.zp-pill.ok{background:rgba(34,197,94,.18);color:var(--ok,#22c55e)} .zp-pill.bad{background:rgba(239,68,68,.18);color:var(--err,#ef4444)}
.zp-tl{display:flex;flex-direction:column;align-items:stretch;position:relative}
.zp-step{border:1px solid var(--line,rgba(255,255,255,.12));border-radius:12px;background:var(--panel2,rgba(255,255,255,.03));overflow:hidden}
.zp-step.open{border-color:var(--accent,#6366f1);box-shadow:0 0 0 1px var(--accent,#6366f1) inset}
.zp-step.err{border-style:dashed;opacity:.9}
.zp-head2{display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer}
.zp-head2:hover{background:rgba(255,255,255,.04)}
.zp-ico{flex:none;width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;font-size:16px}
.zp-role{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.zp-name{font-weight:600;font-size:13px}
.zp-dot{flex:none;width:20px;height:20px;border-radius:50%;font-size:11px;display:flex;align-items:center;justify-content:center;font-weight:700}
.zp-dot.ok{background:rgba(34,197,94,.2);color:var(--ok,#22c55e)} .zp-dot.bad{background:rgba(239,68,68,.25);color:var(--err,#ef4444)}
.zp-chev{color:var(--muted);font-size:12px}
.zp-body{padding:2px 12px 12px 52px;display:flex;flex-direction:column;gap:6px}
.zp-add{align-self:center;border:1px dashed var(--line,rgba(255,255,255,.2));background:transparent;color:var(--muted);width:24px;height:24px;border-radius:50%;margin:3px 0;cursor:pointer;line-height:1;position:relative}
.zp-add:hover{color:#fff;background:var(--accent,#6366f1);border-style:solid}
.zp-sec{border:1px solid var(--line,rgba(255,255,255,.1));border-radius:10px;padding:6px 10px}
.zp-sec summary{cursor:pointer;font-weight:600;font-size:13px;display:flex;align-items:center;gap:8px}
.zp-sec[open] summary{margin-bottom:6px}
.zp-bar{position:sticky;bottom:0;display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:8px 0;background:linear-gradient(transparent,var(--panel,#10131c) 30%)}
.zp-more{position:relative} .zp-more summary{list-style:none;cursor:pointer} .zp-more summary::-webkit-details-marker{display:none}
.zp-menu{position:absolute;bottom:34px;left:0;z-index:5;display:flex;flex-direction:column;min-width:210px;background:var(--panel2,#1a1f2e);border:1px solid var(--line);border-radius:10px;padding:4px;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.zp-menu .btn{justify-content:flex-start;text-align:left}

/* ============ Flow Studio: the assistant as a full screen (Zapier-like) ============ */
.ws-fab{bottom:26px;right:84px;width:42px;height:42px;font-size:19px;background:var(--panel2,#1a1f2e)!important;border:1px solid var(--line2)!important;box-shadow:0 4px 14px rgba(0,0,0,.35)!important}
.ws-fab.on{outline:2px solid var(--accent,#6366f1)}
body:has(.ai-panel.studio) .ai-fab{display:none}
.wz-rail-title{display:none}
.ai-panel.studio{inset:0;right:0;bottom:0;width:100vw;height:100vh;max-height:none;border-radius:0;border:0;z-index:850;display:grid;
  grid-template-columns:300px minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;
  grid-template-areas:"head head" "mode mode" "rail msgs" "rail input";background:var(--bg,#0b0e17)}
.ai-panel.studio>header{grid-area:head;padding:12px 20px}
.ai-panel.studio .ai-brand{font-size:16px}
.ai-panel.studio>.ai-mode{grid-area:mode;padding:6px 20px}
.ai-panel.studio>.ai-msgs{grid-area:msgs;padding:22px 28px;align-items:center;gap:14px}
.ai-panel.studio>.ai-msgs .msg{width:100%;max-width:980px;font-size:14px}
.ai-panel.studio>.ai-msgs .msg.me{align-self:flex-end;width:auto;max-width:620px}
.ai-panel.studio>.ai-input{grid-area:input;padding:12px 28px;max-width:1036px;width:100%;justify-self:center}
.ai-panel.studio>.wz-rail-title{z-index:2;display:block;grid-area:rail;align-self:start;padding:16px 20px 0;font-size:11px;letter-spacing:.1em;color:var(--muted)}
.ai-panel.studio>.wz-crumbs{grid-area:rail;display:flex;flex-direction:column;gap:4px;padding:40px 14px 14px;border-right:1px solid var(--line);background:var(--bg2,#0f1320);overflow-y:auto;border-top:0;position:relative;max-height:none;flex-wrap:nowrap;align-self:stretch;align-content:flex-start}
.ai-panel.studio>.wz-crumbs .crumb{text-align:left;white-space:normal;width:100%;border-radius:10px;padding:8px 10px;font-size:12.5px}
.ai-panel.studio>.wz-crumbs .crumb.step .n{display:inline-flex;width:20px;height:20px;border-radius:50%;background:var(--accent,#6366f1);color:#fff;font-size:11px;align-items:center;justify-content:center;margin-right:4px}
.ai-panel.studio>.wz-crumbs:empty::after{content:"Your answers will appear here as you go.";color:var(--muted);font-size:12px;padding:6px 8px}
.ai-panel.studio .wz-card{padding:20px 22px;border-radius:14px;max-width:980px;margin:0 auto}
.ai-panel.studio .wz-title{font-size:20px}
.ai-panel.studio .wz-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.ai-panel.studio .wz-opt{min-height:64px}
.ai-panel.studio.focus>.wz-crumbs,.ai-panel.studio.focus>.wz-rail-title{display:none}
.ai-panel.studio.focus{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "mode" "msgs" "input"}
.ai-panel.studio.focus>.ai-mode{display:none}
@media (max-width:900px){.ai-panel.studio{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "mode" "msgs" "input"}
  .ai-panel.studio>.wz-crumbs,.ai-panel.studio>.wz-rail-title{display:none}}
.ai-panel.studio .zp-bar{position:sticky;bottom:-22px;padding:12px 0;background:linear-gradient(transparent,var(--panel,#10131c) 35%)}
.ai-panel.min{height:auto!important}

.scopes .scope-list{max-height:220px;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:4px 8px}
.scope-row{display:flex;align-items:flex-start;gap:8px;padding:3px 0;cursor:pointer;font-size:12.5px}
.scope-row code{font-size:12px;word-break:break-all}

/* hide / show the side menu and the builder panels */
body.hide-side .shell{grid-template-columns:1fr} body.hide-side .side{display:none}
.builder{transition:grid-template-columns .12s}
.builder.hide-pal{grid-template-columns:0 1fr var(--cw,360px)!important} .builder.hide-cfg{grid-template-columns:var(--pw,250px) 1fr 0!important}
.builder.hide-pal.hide-cfg{grid-template-columns:0 1fr 0!important}
.builder.hide-pal>.palette,.builder.hide-cfg>.cfg{display:none}

/* output picker / manual fields */
.wz-opt.sel{border-color:var(--accent,#6366f1);background:rgba(99,102,241,.2)}
.outpane{display:flex;flex-direction:column;gap:6px}
.outpane .wz-opts{max-height:220px}
.outprev pre{background:rgba(0,0,0,.18);border-radius:8px;padding:8px}
.pm-row{margin:6px 0}
.pm-row .row,.pm-extra{gap:6px;align-items:center}
.pm-extra{display:flex;margin:4px 0}
.pm-extra .inp{flex:1}

/* ------- in-app learning guide */
.g-hero { display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 16px 18px; margin-bottom: 14px; border-radius: var(--radius);
  background: linear-gradient(120deg, rgba(79,109,245,.22), rgba(56,163,214,.14)); border: 1px solid var(--line); }
.g-hero h2 { margin: 0 0 2px; } .g-pbar { min-width: 240px; } .g-pbar-t { font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.g-bar { height: 8px; background: var(--line); border-radius: 8px; overflow: hidden; } .g-bar i { display: block; height: 100%; width: 0; background: var(--ok); transition: width .3s; }
.g-cols { display: grid; grid-template-columns: 290px 1fr; gap: 18px; align-items: start; }
.g-side { position: sticky; top: 0; max-height: calc(100vh - 220px); overflow: auto; } .g-list { margin-top: 8px; }
.g-li { display: flex; gap: 8px; align-items: flex-start; padding: 7px 8px; border-radius: 8px; color: var(--text); font-size: 13.5px; }
.g-li i { flex: none; width: 13px; height: 13px; margin-top: 4px; border-radius: 50%; border: 2px solid var(--line2); } .g-li.done i { background: var(--ok); border-color: var(--ok); }
.g-li span { flex: 1; } .g-li small { color: var(--dim); } .g-li:hover { background: var(--panel2); } .g-li.on { background: rgba(79,109,245,.16); }
.g-view { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; min-width: 0; }
.g-view h2 { margin: 0 0 2px; } .g-sum { color: var(--muted); } .g-h { margin: 18px 0 6px; font-size: 15px; }
.g-view code, .g-lab code { background: var(--panel2); padding: 1px 6px; border-radius: 6px; font-family: var(--mono); font-size: .9em; }
.g-steps { padding-left: 22px; } .g-steps li { margin: 6px 0; }
.g-fig { margin: 14px 0; } .g-fig img { max-width: 100%; border: 1px solid var(--line); border-radius: 10px; cursor: zoom-in; } .g-fig figcaption { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.g-callout { display: flex; gap: 10px; padding: 10px 14px; border-radius: 10px; margin: 12px 0; border: 1px solid var(--line2); background: var(--panel2); }
.g-callout.tip { border-color: rgba(34,197,94,.5); background: rgba(34,197,94,.08); } .g-callout.warn { border-color: rgba(245,158,11,.55); background: rgba(245,158,11,.08); } .g-callout.note { border-color: rgba(59,130,246,.5); background: rgba(59,130,246,.08); }
.g-tw { overflow: auto; margin: 10px 0; } .g-tw table { width: 100%; } .g-mx td:nth-child(n+3) { text-align: center; color: var(--ok); font-weight: 700; }
.g-try, .g-chk { border: 2px dashed var(--brand); border-radius: 12px; padding: 12px 16px; margin: 16px 0; background: rgba(79,109,245,.07); } .g-try-t { font-weight: 700; margin-bottom: 6px; }
.g-item { display: flex; gap: 10px; margin: 6px 0; cursor: pointer; } .g-item input:checked + span { text-decoration: line-through; opacity: .55; }
.g-faq { border: 1px solid var(--line); border-radius: 10px; margin: 8px 0; padding: 8px 12px; } .g-faq summary { cursor: pointer; font-weight: 600; } .g-faq div { margin-top: 8px; color: var(--muted); }
.g-code { background: #0b1220; color: #e2e8f0; padding: 12px; border-radius: 10px; overflow: auto; } .g-nav { margin-top: 22px; gap: 10px; }
.g-lab { max-width: 900px; } .g-ls { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; margin: 8px 0; background: var(--panel); }
.g-ls.ok { border-color: var(--ok); background: rgba(34,197,94,.07); } .g-tick { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line2); flex: none; } .g-ls.ok .g-tick { background: var(--ok); border-color: var(--ok); color: #04210f; font-weight: 700; }
.g-q { margin-bottom: 12px; } .g-qb { display: block; width: 100%; text-align: left; margin-top: 6px; } .g-qb.ok { background: rgba(34,197,94,.2); border-color: var(--ok); } .g-qb.bad { background: rgba(239,68,68,.2); border-color: var(--err); }
@media (max-width: 900px) { .g-cols { grid-template-columns: 1fr; } .g-side { position: static; max-height: 260px; } }

/* ------- pick-only mapping dropdowns */
.mapsel { display: flex; gap: 6px; align-items: flex-start; flex-direction: column; } .mapsel > select, .mapsel > .expr { width: 100%; }
.mapsel .help { margin-top: 0; }
.kv-row .mapsel { min-width: 0; }
.wz-fx .mapsel { flex: 1; }

.fm-box { resize: horizontal; overflow-x: auto; overflow-y: visible; min-width: 240px; max-width: 100%; padding-bottom: 6px; border-bottom: 2px dotted var(--line2); }
.fm-row { display: flex; flex-wrap: wrap; padding: 6px; border: 1px solid var(--line2); border-radius: 8px; background: var(--panel); align-items: center; }
.fm-row > * { flex: 1 1 100%; }
.fm-row > button, .fm-row > span:last-child { flex: 0 0 auto; }
.fm-target { flex: 1 1 100%; font-size: 13px; word-break: break-all; }
.mapsel select, .wz-fx select { text-overflow: ellipsis; }
.wz-map .tablewrap { resize: horizontal; overflow: auto; max-width: 100%; }
.wz-fx select, .wz-fx { min-width: 220px; }

.dataview { overflow: auto; border: 1px solid var(--line2); border-radius: 8px; padding: 6px; background: var(--panel2); max-height: 380px; }
.dataview .tbl td, .dataview .tbl th { padding: 4px 8px; }
.hero-ai { background: linear-gradient(120deg, rgba(109,94,252,.22), rgba(34,211,238,.10)); padding: 22px 24px; }
.hero-ai .hero-title { font-size: 26px; font-weight: 800; margin-bottom: 4px; }
.hero-ai .hero-row { display: flex; gap: 8px; margin-top: 14px; }
.hero-ai .hero-row .inp { flex: 1; font-size: 15px; padding: 12px 14px; }
.hero-ai .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.hero-ai .chip { border: 1px solid var(--line2); background: var(--panel); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; cursor: pointer; }
.hero-ai .chip:hover { border-color: var(--accent, #6d5efc); }

.wz-step.click { cursor: pointer; border: 0; background: transparent; font: inherit; }
.wz-step.click:hover { text-decoration: underline; background: rgba(34,197,94,.12); border-radius: 999px; }
.wz-keep { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: rgba(34,197,94,.10); border: 1px solid rgba(34,197,94,.35); border-radius: 8px; padding: 6px 10px; margin: 6px 0 10px; font-size: 13px; }

.frm-wrap { display: grid; grid-template-columns: minmax(300px, 1.1fr) minmax(320px, 1fr); gap: 14px; align-items: start; }
@media (max-width: 900px) { .frm-wrap { grid-template-columns: 1fr; } }
.frm-row { cursor: pointer; } .frm-row:hover td { background: rgba(109,94,252,.10); } .frm-row.on td { background: rgba(109,94,252,.20); }
.frm-form { position: sticky; top: 8px; max-height: calc(100vh - 90px); overflow: auto; }
.frm-field { margin-bottom: 10px; }

/* element settings as a pop-up window (release 1.3.0 settings_modal) */
.builder.cfgmodal{grid-template-columns:var(--pw,250px) 1fr 0!important} .builder.cfgmodal.hide-pal{grid-template-columns:0 1fr 0!important}
.builder.cfgmodal>.cfg{display:none}
.builder.cfgmodal>.cfg.open{display:block;position:fixed;z-index:61;top:6vh;left:50%;transform:translateX(-50%);width:min(820px,94vw);max-height:88vh;border:1px solid var(--line);border-radius:12px;box-shadow:0 24px 70px rgba(0,0,0,.4)}
.cfg-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:60}
.cfg-closebar{display:flex;align-items:center;margin:-6px -6px 8px;position:sticky;top:-14px;background:var(--bg2);z-index:2;padding:4px 0}

/* ================= Metro look (release 1.4.0 "metro_view"): stations on coloured lines, left to right, with a train ================= */
.canvas-wrap.metro { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.022) 0 2px, transparent 2px 30px), radial-gradient(var(--line) 1px, transparent 1px); background-size: auto, 22px 22px; }
.canvas.metro .edge-path { stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.canvas.metro .edge-casing { fill: none; stroke: var(--bg); stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.canvas.metro .edge-rail { stroke: rgba(255,255,255,.55); stroke-width: 2; stroke-dasharray: 1 11; stroke-linecap: round; }
.canvas.metro .edge-path.sel { filter: drop-shadow(0 0 5px #fff); }
.canvas.metro .edge-label { font-size: 10px; fill: var(--text); font-weight: 800; paint-order: stroke; stroke: var(--bg); stroke-width: 3px; }
.canvas.metro .node { width: 170px; border-radius: 14px; border: 3px solid #64748b; background: var(--panel); box-shadow: 0 6px 16px rgba(0,0,0,.4); }
.canvas.metro .node.sel { border-color: #fff !important; box-shadow: 0 0 0 4px rgba(255,255,255,.25), 0 6px 16px rgba(0,0,0,.4); }
.canvas.metro .node .ns { display: none; }
.canvas.metro .node .nh { padding: 9px 10px; }
.canvas.metro .node .ni { border-radius: 50%; }
.canvas.metro .node .nt { font-size: 12.5px; }
.canvas.metro .node .port-in { left: -10px; top: 50%; margin: -7px 0 0 0; background: #fff; border: 3px solid #0b1020; width: 14px; height: 14px; }
.canvas.metro .node .ports { position: absolute; right: -10px; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; gap: 9px; border: 0; padding: 0; }
.canvas.metro .node .port { font-size: 0; }
.canvas.metro .node .port i { width: 14px; height: 14px; border: 3px solid #0b1020; background: #fff; box-shadow: none; display: block; }
.canvas.metro .node .port.pt-error i { background: #ef4444; } .canvas.metro .node .port.pt-true i { background: #22c55e; } .canvas.metro .node .port.pt-false i { background: #f59e0b; }
.canvas.metro .node .st { top: -12px; }
.metro-train { filter: drop-shadow(0 3px 4px rgba(0,0,0,.5)); }

/* live run: more room to audit */
.livebottom { position: relative; }
.live-resizer { position: absolute; top: -5px; left: 0; right: 0; height: 11px; cursor: ns-resize; z-index: 6; }
.live-resizer::after { content: ""; position: absolute; left: 50%; top: 4px; width: 56px; height: 3px; margin-left: -28px; border-radius: 3px; background: var(--line2); }
.live-resizer:hover::after { background: var(--brand); }
.live-bottom-head { display: flex; align-items: center; gap: 6px; flex: none; }
.live-bottom-head .tabs { flex: 1; min-width: 0; }
.stage { grid-column: 1; grid-row: 1; } .livebottom { grid-column: 1; grid-row: 2; }
.live.bottom-max { grid-template-rows: 1fr; } .live.bottom-max .stage { display: none; } .live.bottom-max .livebottom { grid-row: 1; }
.live.no-speed { grid-template-columns: 1fr; } .live.no-speed .speedpanel { display: none; }
.picker { z-index: 1100 !important; }

/* drag-to-resize handles for the builder side panels */
.pane-resizer{position:absolute;top:0;bottom:0;width:9px;margin-left:-4px;cursor:col-resize;z-index:30;background:transparent}
.pane-resizer::after{content:"";position:absolute;left:4px;top:0;bottom:0;width:1px;background:transparent;transition:background .12s,width .12s,left .12s}
.pane-resizer:hover::after,.pane-resizer.drag::after{background:var(--accent,#4f6df5);width:3px;left:3px}
.pane-resizer.rz-pal{left:var(--pw,250px)} .pane-resizer.rz-cfg{right:var(--cw,360px);margin-left:0;margin-right:-4px}
.builder.hide-pal>.pane-resizer.rz-pal,.builder.hide-cfg>.pane-resizer.rz-cfg,.builder.cfgmodal>.pane-resizer.rz-cfg,.builder.nocfg>.pane-resizer.rz-cfg{display:none}

.upd-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 18px;background:linear-gradient(90deg,rgba(79,109,245,.16),rgba(79,109,245,.06));border-bottom:1px solid var(--line);font-size:13px}
.upd-bar.forced{background:linear-gradient(90deg,rgba(245,158,11,.2),rgba(245,158,11,.06))}
.upd-bar span:first-child{font-weight:600} .upd-bar button:last-child{margin-left:auto}

.theme-svg .m-name{fill:var(--text)} .theme-svg .m-sub{fill:var(--muted)} .theme-svg .m-port{fill:var(--text)}
.theme-svg .m-name,.theme-svg .m-sub{paint-order:stroke;stroke:var(--bg);stroke-width:4px;stroke-linejoin:round}

/* panel toggle buttons show whether their panel is currently shown */
.btn.pressed{background:var(--panel2);box-shadow:inset 0 -2px 0 var(--accent,#4f6df5)}
.canvas-wrap{min-width:0}
/* the floating assistant buttons must never cover the last controls of a panel */
.cfg,.palette,.speedpanel,.livebottom{padding-bottom:84px}
.content{padding-bottom:84px}
/* top bars with many buttons (builder, live view) wrap onto a second row instead of pushing buttons off-screen */
.main > .top{flex-wrap:wrap;row-gap:6px}
.content.full > .builder,.content.full > .live{height:100%}
.top .btn{white-space:nowrap}
.ai-panel.studio .ws-btn{display:none}
.ai-panel header{flex-wrap:wrap;row-gap:4px} .ai-panel header .spacer{flex:1 1 8px}
/* the animated stage is always a dark "screen": every theme draws light text, which was invisible in the light appearance */
.stage{--bg:#0b1020;--bg2:#0f162b;--panel:#131c35;--panel2:#18233f;--line:#24324f;--line2:#2f3f63;--text:#e6ecff;--muted:#8e9bbd;--dim:#5d6a8c;color:var(--text);color-scheme:dark}

.badge.approved { color: var(--ok); border-color: rgba(34,197,94,.4); background: rgba(34,197,94,.1); }
.badge.rejected { color: var(--err); border-color: rgba(239,68,68,.4); background: rgba(239,68,68,.1); }
.badge.withdrawn { color: var(--pause); border-color: rgba(167,139,250,.4); background: rgba(167,139,250,.1); }

/* the canvas is a drawing surface: dragging on it never selects page text */
.canvas-wrap, .canvas-wrap * { -webkit-user-select: none; user-select: none; }
.canvas-wrap input, .canvas-wrap textarea, .canvas-wrap [contenteditable] { -webkit-user-select: text; user-select: text; }

.nav .nav-sec { display: flex; flex-direction: column; gap: 2px; }
.nav .sect:hover { color: var(--text); }