/* Flowwolf editor styles */
:root {
  --bg: #f5f6f8; --panel: #ffffff; --panel-2: #fafbfc; --text: #16181d; --muted: #5a6170; --faint: #8f95a1;
  --line: #e2e5ea; --line-2: #d3d7de; --hover: #eef0f3; --accent: #16181d; --accent-text: #ffffff;
  --brand: #2f5bea; --brand-soft: #e8eefd; --ok: #1e9e5a; --ok-soft: #e7f5ed; --err: #d93f3f; --err-soft: #fbeaea;
  --warn: #d98a06; --warn-text: #8a5d00; --expr: #eef2fd; --expr-text: #2446c4; --dot: #d8dce2; --shadow: 0 0 0 1px rgba(22,24,29,.04), 0 12px 32px -20px rgba(22,24,29,.35);
  --radius: 10px; --mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121418; --panel: #1a1d22; --panel-2: #1f2228; --text: #e9ebef; --muted: #9aa1ad; --faint: #6d7480;
    --line: #2a2e35; --line-2: #363b43; --hover: #23272d; --accent: #e9ebef; --accent-text: #16181d;
    --brand: #7c98ff; --brand-soft: #1c2440; --ok-soft: #12261a; --err-soft: #2c1517; --expr: #1b2340; --expr-text: #a9bcff; --dot: #2c3038; --warn-text: #f0bd52;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -12px rgba(0,0,0,.6); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #121418; --panel: #1a1d22; --panel-2: #1f2228; --text: #e9ebef; --muted: #9aa1ad; --faint: #6d7480;
  --line: #2a2e35; --line-2: #363b43; --hover: #23272d; --accent: #e9ebef; --accent-text: #16181d;
  --brand: #7c98ff; --brand-soft: #1c2440; --ok-soft: #12261a; --err-soft: #2c1517; --expr: #1b2340; --expr-text: #a9bcff; --dot: #2c3038; --warn-text: #f0bd52;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -12px rgba(0,0,0,.6); color-scheme: dark;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans-wdth.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font: 14px/1.45 "Instrument Sans", ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
svg.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.muted { color: var(--muted); }
.hidden { display: none !important; }

/* ---------- buttons & inputs ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line-2);
  background: var(--panel); cursor: pointer; font-weight: 550; white-space: nowrap; transition: background .15s, border-color .15s, transform .05s; }
.btn:hover { background: var(--hover); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.btn.primary:hover { opacity: .9; }
.btn.danger { color: var(--err); }
.btn.sm { height: 30px; padding: 0 12px; font-size: 13px; }
.btn.icon { width: 36px; padding: 0; justify-content: center; }
.btn.sm.icon { width: 30px; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--hover); }
.btn:disabled { opacity: .5; cursor: default; }
.input, select.input, textarea.input { width: 100%; height: 36px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--panel); outline: none; transition: border-color .15s, box-shadow .15s; }
textarea.input { height: auto; min-height: 36px; padding: 8px 12px; resize: vertical; }
.input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.input.code { font-family: var(--mono); font-size: 12.5px; line-height: 1.55; tab-size: 2; white-space: pre; }
.input.expr { background: var(--expr); color: var(--expr-text); font-family: var(--mono); font-size: 12.5px; border-color: transparent; }
.label { display: block; font-size: 13px; font-weight: 600; margin: 0 0 6px; }
.field { margin-bottom: 14px; }
.hint { font-size: 12px; color: var(--muted); margin-top: 4px; }
.switch { position: relative; width: 36px; height: 20px; border-radius: 99px; background: var(--line-2); cursor: pointer; border: 0; flex: none; transition: background .2s; padding: 0; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.switch.on { background: var(--ok); }
.switch.on::after { transform: translateX(16px); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; background: var(--hover); color: var(--muted); }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.err { background: var(--err-soft); color: var(--err); }
.pill.run { background: var(--brand-soft); color: var(--brand); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------- auth ---------- */
.auth { min-height: 100%; display: grid; place-items: center; padding: 24px; background: var(--bg); }
.auth-card { width: 100%; max-width: 400px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 32px; box-shadow: var(--shadow); }
.auth-card h1 { font-size: 26px; font-weight: 620; font-stretch: 86%; letter-spacing: -.025em; margin: 20px 0 4px; }
.auth-card .btn { width: 100%; justify-content: center; height: 42px; margin-top: 8px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: -.02em; text-decoration: none; }
.logo-mark { width: 26px; height: 26px; border-radius: 7px; background: var(--accent); color: var(--accent-text); display: grid; place-items: center; }
.logo-mark svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.4; fill: none; }
.err-text { color: var(--err); font-size: 13px; min-height: 18px; margin-top: 8px; }

/* ---------- shell ---------- */
.shell { display: grid; grid-template-columns: 228px 1fr; height: 100%; }
.shell.collapsed { grid-template-columns: 64px 1fr; }
.side { border-right: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; padding: 16px 12px; gap: 4px; min-width: 0; }
.side .logo { padding: 4px 8px 18px; }
.shell.collapsed .side .logo span, .shell.collapsed .nav span, .shell.collapsed .me span { display: none; }
.nav { display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 10px; border-radius: 10px; color: var(--muted); text-decoration: none; font-weight: 550; cursor: pointer; border: 0; background: none; width: 100%; }
.nav:hover { background: var(--hover); color: var(--text); }
.nav.on { background: var(--hover); color: var(--text); }
.side .grow { flex: 1; }
.me { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--hover); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); display: grid; place-items: center; font-weight: 700; font-size: 12px; flex: none; }
.main { overflow: auto; min-width: 0; position: relative; }
.page { max-width: 1120px; margin: 0 auto; padding: 36px 32px 64px; }
.page-head { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.page-head h1 { font-size: 24px; letter-spacing: -.025em; margin: 0; flex: 1; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; }
.list { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .12s; }
.row:last-child { border-bottom: 0; }
.row:hover { background: var(--panel-2); }
.row .t { font-weight: 600; }
.row .grow { flex: 1; min-width: 0; }
.row .sub { font-size: 12.5px; color: var(--muted); }
.row .icons { display: flex; gap: 4px; }
.mini { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; color: #fff; }
.mini svg { width: 14px; height: 14px; stroke-width: 2; }
.empty { text-align: center; padding: 64px 24px; }
.empty h2 { margin: 0 0 6px; letter-spacing: -.02em; }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 24px; text-align: left; }
.tpl { padding: 16px; cursor: pointer; transition: border-color .15s, transform .15s; }
.tpl:hover { border-color: var(--line-2); transform: translateY(-1px); }
.tpl .icons { display: flex; gap: 4px; margin-bottom: 10px; }
table.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.tbl td { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr.click { cursor: pointer; }
.tbl tr.click:hover td { background: var(--panel-2); }
.search { position: relative; }
.search svg { position: absolute; left: 11px; top: 9px; color: var(--faint); }
.search .input { padding-left: 36px; width: 240px; }
.tabs { display: inline-flex; background: var(--hover); border-radius: 10px; padding: 3px; gap: 2px; }
.tab { border: 0; background: none; height: 28px; padding: 0 12px; border-radius: 8px; cursor: pointer; font-weight: 550; color: var(--muted); font-size: 13px; }
.tab.on { background: var(--panel); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.section-title { font-size: 15px; font-weight: 650; margin: 28px 0 12px; }

/* ---------- modal / toast / menu ---------- */
.overlay { position: fixed; inset: 0; background: rgba(10,12,16,.45); display: grid; place-items: center; z-index: 50; padding: 24px; animation: fade .15s; }
@keyframes fade { from { opacity: 0; } }
.modal { background: var(--panel); border-radius: 18px; width: 100%; max-width: 520px; max-height: calc(100vh - 48px); display: flex; flex-direction: column; box-shadow: 0 24px 64px -16px rgba(0,0,0,.35); animation: pop .18s; }
@keyframes pop { from { transform: translateY(8px) scale(.98); opacity: 0; } }
.modal-head { display: flex; align-items: center; gap: 10px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; font-size: 17px; flex: 1; letter-spacing: -.01em; }
.modal-body { padding: 20px 22px; overflow: auto; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--line); }
.toasts { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 80; }
.toast { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--ok); border-radius: 12px; padding: 12px 16px; box-shadow: var(--shadow); max-width: 380px; animation: pop .2s; }
.toast.err { border-left-color: var(--err); }
.toast b { display: block; margin-bottom: 2px; }
.menu { position: fixed; z-index: 70; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; min-width: 200px; }
.menu button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; padding: 8px 10px; border-radius: 8px; cursor: pointer; text-align: left; }
.menu button:hover { background: var(--hover); }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
.keybox { display: flex; gap: 8px; align-items: center; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; word-break: break-all; }

/* ---------- editor ---------- */
.editor { position: absolute; inset: 0; display: flex; flex-direction: column; }
.ed-top { height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--panel); flex: none; z-index: 5; }
.ed-name { border: 1px solid transparent; background: none; font-weight: 650; font-size: 15px; padding: 6px 8px; border-radius: 8px; min-width: 120px; max-width: 360px; outline: none; }
.ed-name:hover { border-color: var(--line); }
.ed-name:focus { border-color: var(--brand); }
.ed-top .grow { flex: 1; }
.saved { font-size: 12.5px; color: var(--faint); }
.edge.ai { stroke-dasharray: 5 5; stroke: var(--faint); }
.sub-adds { position: absolute; left: 50%; top: calc(100% + 46px); transform: translateX(-50%); display: flex; gap: 6px; white-space: nowrap; }
.sub-add { display: inline-flex; align-items: center; justify-content: center; gap: 4px; width: 70px; height: 22px; padding: 0 4px; border: 1px dashed var(--line-2); border-radius: 6px;
  background: var(--panel); color: var(--muted); font-size: 11.5px; cursor: pointer; }
.sub-add:hover { color: var(--text); border-color: var(--brand); }
.sub-add svg.i { width: 12px; height: 12px; }
.canvas { position: relative; flex: 1; overflow: hidden; background-color: var(--bg); background-image: radial-gradient(var(--dot) 1.2px, transparent 1.2px); cursor: default; user-select: none; touch-action: none; }
.canvas.panning { cursor: grabbing; }
.world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.edges { position: absolute; left: 0; top: 0; overflow: visible; width: 1px; height: 1px; pointer-events: none; }
.edge { fill: none; stroke: #b5b9c3; stroke-width: 2; pointer-events: stroke; cursor: pointer; }
.edge.ok { stroke: var(--ok); }
.edge.sel, .edge:hover { stroke: var(--brand); }
.edge-hit { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: pointer; }
.edge-label { font-size: 11px; font-weight: 600; fill: var(--ok); paint-order: stroke; stroke: var(--bg); stroke-width: 4px; }
.edge-del { pointer-events: all; cursor: pointer; }
.node { position: absolute; width: 96px; height: 96px; }
.node .box { position: absolute; inset: 0; background: var(--panel); border: 2px solid var(--line-2); border-radius: 14px; display: grid; place-items: center; box-shadow: 0 1px 2px rgba(16,24,40,.06); transition: border-color .15s, box-shadow .15s; cursor: grab; }
.node.trigger .box { border-radius: 40px 14px 14px 40px; }
.node .box svg { width: 40px; height: 40px; stroke-width: 1.6; }
.node.sel .box { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.node.ok .box { border-color: var(--ok); }
.node.error .box { border-color: var(--err); }
.node.running .box { border-color: var(--brand); animation: pulse 1.1s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px var(--brand-soft); } }
.node.disabled .box { opacity: .45; filter: grayscale(1); }
.node .title { position: absolute; top: 102px; left: 50%; transform: translateX(-50%); width: 170px; text-align: center; font-weight: 600; font-size: 13px; line-height: 1.25; pointer-events: none; }
.node .subtitle { display: block; font-weight: 450; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.node .badge { position: absolute; right: 6px; bottom: 6px; display: flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; color: var(--ok); }
.node.error .badge { color: var(--err); }
.node .pin-b { position: absolute; left: 6px; bottom: 6px; color: var(--brand); }
.node .pin-b svg { width: 14px; height: 14px; }
.node .badge svg { width: 14px; height: 14px; stroke-width: 2.6; }
.handle { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--panel); border: 2px solid #9ea3ad; transform: translate(-50%, -50%); cursor: crosshair; z-index: 2; }
.handle.in { border-radius: 3px; width: 10px; height: 18px; background: #9ea3ad; border: 0; }
.handle:hover { border-color: var(--brand); background: var(--brand); }
.handle-label { position: absolute; font-size: 11px; color: var(--muted); transform: translateY(-50%); white-space: nowrap; pointer-events: none; }
.plus { position: absolute; transform: translate(0, -50%); display: flex; align-items: center; cursor: pointer; z-index: 1; }
.plus::before { content: ""; width: 28px; height: 2px; background: #c3c6ce; }
.plus span { width: 22px; height: 22px; border: 2px solid #c3c6ce; border-radius: 6px; display: grid; place-items: center; background: var(--panel); color: var(--muted); }
.plus:hover span { border-color: var(--brand); color: var(--brand); }
.plus svg { width: 12px; height: 12px; stroke-width: 2.6; }
.node-actions { position: absolute; top: -34px; left: 50%; transform: translateX(-50%); display: none; gap: 2px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 2px; box-shadow: var(--shadow); }
.node:hover .node-actions { display: flex; }
.node-actions button { width: 26px; height: 26px; border: 0; background: none; border-radius: 6px; cursor: pointer; display: grid; place-items: center; color: var(--muted); }
.node-actions button:hover { background: var(--hover); color: var(--text); }
.node-actions svg { width: 15px; height: 15px; }
.sticky { position: absolute; background: #fff6c2; border: 1px solid #f0de7a; border-radius: 10px; padding: 12px 14px; color: #4b4220; font-size: 13px; overflow: hidden; white-space: pre-wrap; cursor: grab; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.sticky.sel { outline: 2px solid var(--brand); }
.sticky h1, .sticky h2, .sticky h3 { margin: 0 0 6px; font-size: 15px; }
.rubber { position: absolute; border: 1px solid var(--brand); background: rgba(79,107,255,.08); pointer-events: none; }
.canvas-ctl { position: absolute; left: 16px; bottom: 16px; display: flex; gap: 6px; z-index: 3; }
.run-bar { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; gap: 8px; z-index: 3; }
.run-bar .btn { height: 42px; padding: 0 20px; box-shadow: var(--shadow); }
.canvas-empty { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); text-align: center; z-index: 2; }
.canvas-empty .add { width: 96px; height: 96px; border: 2px dashed var(--line-2); border-radius: 16px; display: grid; place-items: center; cursor: pointer; margin: 0 auto 12px; color: var(--muted); background: var(--panel); }
.canvas-empty .add:hover { border-color: var(--brand); color: var(--brand); }
.canvas-empty .add svg { width: 28px; height: 28px; }
.listen { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow); z-index: 4; width: min(560px, 90%); }
.listen .u { font-family: var(--mono); font-size: 12px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; display: flex; gap: 8px; align-items: center; margin-top: 8px; word-break: break-all; }
.readonly-banner { background: var(--brand-soft); color: var(--brand); padding: 8px 14px; font-size: 13px; font-weight: 550; display: flex; align-items: center; gap: 10px; }

/* ---------- node creator ---------- */
.creator { position: absolute; right: 0; top: 0; bottom: 0; width: 380px; background: var(--panel); border-left: 1px solid var(--line); z-index: 20; display: flex; flex-direction: column; box-shadow: -12px 0 32px -16px rgba(0,0,0,.2); animation: slide .18s; }
@keyframes slide { from { transform: translateX(24px); opacity: 0; } }
.creator-head { padding: 18px 18px 12px; }
.creator-head h3 { margin: 0 0 12px; font-size: 16px; }
.creator-list { overflow: auto; padding: 0 10px 20px; }
.cat { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); padding: 14px 10px 6px; }
.citem { display: flex; gap: 12px; align-items: center; padding: 9px 10px; border-radius: 10px; cursor: pointer; }
.citem:hover, .citem.on { background: var(--hover); }
.citem .ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: none; border: 1px solid var(--line); background: var(--panel); }
.citem .ic svg { width: 20px; height: 20px; }
.citem b { display: block; font-weight: 600; font-size: 13.5px; }
.citem small { color: var(--muted); font-size: 12px; display: block; line-height: 1.35; }

/* ---------- NDV ---------- */
.ndv { position: fixed; inset: 0; z-index: 40; background: rgba(10,12,16,.5); display: flex; padding: 28px; animation: fade .15s; }
.ndv-inner { flex: 1; display: grid; grid-template-columns: minmax(0,1fr) minmax(400px, 540px) minmax(0,1fr); background: var(--panel); border-radius: 18px; overflow: hidden; box-shadow: 0 24px 64px -16px rgba(0,0,0,.4); }
.ndv-inner.no-input { grid-template-columns: minmax(380px, 520px) minmax(0,1fr); }
.ndv-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ndv-col.data { background: var(--panel-2); }
.ndv-col.params { border-left: 1px solid var(--line); border-right: 1px solid var(--line); background: var(--panel); }
.ndv-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); min-height: 56px; }
.ndv-head .ttl { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ndv-head .grow { flex: 1; }
.ndv-name { font-weight: 650; font-size: 15px; border: 1px solid transparent; background: none; border-radius: 8px; padding: 4px 6px; outline: none; min-width: 0; flex: 1; }
.ndv-name:focus { border-color: var(--brand); }
.ndv-body { flex: 1; overflow: auto; padding: 16px; min-height: 0; }
.ndv-col.params .ndv-body { padding: 18px 20px 40px; }
.data-empty { height: 100%; display: grid; place-items: center; text-align: center; color: var(--muted); padding: 24px; }
.data-empty b { color: var(--text); display: block; margin-bottom: 6px; }
.dtable { border-collapse: separate; border-spacing: 0; font-size: 12.5px; width: max-content; min-width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.dtable th { background: var(--panel-2); text-align: left; padding: 8px 12px; font-weight: 600; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); position: sticky; top: 0; cursor: grab; white-space: nowrap; }
.dtable th:last-child, .dtable td:last-child { border-right: 0; }
.dtable td { padding: 7px 12px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); vertical-align: top; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dtable tr:last-child td { border-bottom: 0; }
.dtable td.n { color: var(--faint); width: 1px; }
.json { font-family: var(--mono); font-size: 12.5px; white-space: pre-wrap; word-break: break-word; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 0 0 10px; }
.schema { font-size: 13px; }
.sk { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; margin: 2px 0; border-radius: 7px; background: var(--panel); border: 1px solid var(--line); cursor: grab; }
.sk:hover { border-color: var(--brand); }
.sk .ty { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.sk .v { color: var(--muted); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schema ul { list-style: none; margin: 0; padding-left: 18px; border-left: 1px dashed var(--line-2); }
.schema > ul { padding-left: 0; border: 0; }
.err-box { background: var(--err-soft); color: var(--err); border-radius: 10px; padding: 12px 14px; font-size: 13px; white-space: pre-wrap; word-break: break-word; }
.out-tabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 16px 0; }
.drag-hint { font-size: 12px; color: var(--muted); margin-bottom: 10px; }

/* ---------- parameter form ---------- */
.p { margin-bottom: 16px; position: relative; }
.p > .lbl { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; margin-bottom: 6px; min-height: 22px; }
.p > .lbl .grow { flex: 1; }
.p > .lbl .req { color: var(--err); }
.fx { opacity: 0; display: inline-flex; background: var(--hover); border-radius: 7px; padding: 2px; transition: opacity .12s; }
.p:hover > .lbl .fx, .fx.on-expr { opacity: 1; }
.fx button { border: 0; background: none; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 5px; cursor: pointer; color: var(--muted); }
.fx button.on { background: var(--panel); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.p .desc { font-size: 12px; color: var(--muted); margin-top: 4px; }
.coll { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--panel-2); }
.coll .p:last-child { margin-bottom: 0; }
.entry { position: relative; border: 1px solid var(--line); border-radius: 12px; padding: 12px 34px 12px 12px; background: var(--panel); margin-bottom: 8px; }
.entry > .rm { position: absolute; right: 6px; top: 6px; }
.rm { width: 24px; height: 24px; border: 0; background: none; border-radius: 6px; cursor: pointer; color: var(--faint); display: grid; place-items: center; }
.rm:hover { background: var(--err-soft); color: var(--err); }
.rm svg { width: 14px; height: 14px; }
.opt-field { position: relative; padding-right: 28px; }
.opt-field > .rm { position: absolute; right: -4px; top: 0; }
.cond { display: grid; grid-template-columns: 1fr 150px 1fr 24px; gap: 6px; align-items: start; margin-bottom: 8px; }
.cond.unary { grid-template-columns: 1fr 150px 24px; }
.assign { display: grid; grid-template-columns: 1fr 96px 1.4fr 24px; gap: 6px; align-items: start; margin-bottom: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--line-2); background: var(--panel); border-radius: 6px; padding: 4px 11px; font-size: 12.5px; cursor: pointer; }
.chip.on { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.notice { background: var(--brand-soft); color: var(--brand); padding: 10px 12px; border-radius: 10px; font-size: 13px; }
.drop-on { outline: 2px dashed var(--brand) !important; outline-offset: 2px; }
.cred-row { display: flex; gap: 6px; }

@media (max-width: 640px) {
  .row { flex-wrap: wrap; gap: 10px; }
  .row .icons, .row .pill { display: none; }
  .row .grow { flex-basis: calc(100% - 90px); }
  .page-head .search, .page-head .search .input { width: 100%; }
  .assign { grid-template-columns: 1fr 1fr 24px; }
  .assign > :nth-child(3) { grid-column: 1 / 3; }
  .cond, .cond.unary { grid-template-columns: 1fr 24px; }
  .cond > :not(.rm) { grid-column: 1; }
  .ed-top .muted, .ed-top [data-execs] { display: none; }
  /* Phone: the name gives way so Save and the menu stay on screen. */
  .ed-top { gap: 6px; padding: 0 8px; }
  .ed-top .saved { display: none; }
  .ed-name { min-width: 0; flex: 1 1 auto; width: 0; }
  .ed-top .grow { display: none; }
  /* Wide tables scroll sideways instead of pushing the page. */
  table.tbl { display: block; overflow-x: auto; white-space: nowrap; }
}
@media (max-width: 900px) {
  .shell { grid-template-columns: 64px 1fr; }
  .side .logo span, .nav span, .me span { display: none; }
  .ndv { padding: 0; }
  .ndv-inner, .ndv-inner.no-input { grid-template-columns: 1fr; overflow: auto; border-radius: 0; }
  .ndv-col.data { max-height: 40vh; }
  .page { padding: 24px 16px 48px; }
  .search .input { width: 160px; }
  .creator { width: 100%; }
}

/* user management */
.auth-foot { margin-top: 16px; text-align: center; font-size: 13.5px; }
.auth-foot a, .auth-card a.sub { color: var(--brand); text-decoration: none; }
.auth-foot a:hover { text-decoration: underline; }
.input.sm { height: 30px; padding: 0 8px; font-size: 13px; width: auto; }
.pill.warn { background: color-mix(in srgb, #d99a00 16%, transparent); color: var(--warn-text); }
.mfa-qr { display: flex; justify-content: center; padding: 12px; background: #fff; border-radius: 8px; border: 1px solid var(--line); margin-bottom: 10px; }
.mfa-qr svg { width: 200px; height: 200px; }
.recovery { columns: 2; padding: 12px; border: 1px dashed var(--line-2); border-radius: 8px; font-size: 13px; line-height: 1.8; }
.radio { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0; font-size: 14px; }