/* Панель TeleFarm. Всё в одном файле: политика безопасности запрещает
   встроенные стили, а внешних источников у панели нет по замыслу. */

:root {
  --bg: #f7f7f5;
  --panel: #ffffff;
  --ink: #1a1a18;
  --muted: #6b6b66;
  --line: #e3e3de;
  --accent: #2f6f4f;
  --warn: #9a6400;
  --bad: #a33131;
  --ok: #2f6f4f;
  --radius: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16161a;
    --panel: #1e1e23;
    --ink: #e9e9e4;
    --muted: #9a9a94;
    --line: #2e2e35;
    --accent: #6fbf8f;
    --warn: #d5a44a;
    --bad: #e07070;
    --ok: #6fbf8f;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
}

/* --- Шапка --- */
.top {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 22px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 5;
}
.brand { font-weight: 700; text-decoration: none; color: var(--ink); letter-spacing: .02em; }
.top nav { display: flex; gap: 14px; flex-wrap: wrap; }
.top nav a { color: var(--muted); text-decoration: none; padding: 4px 2px; border-bottom: 2px solid transparent; }
.top nav a:hover { color: var(--ink); }
.top nav a.on { color: var(--ink); border-bottom-color: var(--accent); }
.out { margin-left: auto; }

main { padding: 22px; max-width: 1500px; margin: 0 auto; }
footer { padding: 12px 22px 30px; color: var(--muted); font-size: 13px; }

h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 16px; margin: 26px 0 10px; font-weight: 600; }
.sub { color: var(--muted); margin: 0 0 18px; font-size: 14px; }

/* --- Плитки --- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.tile {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.tile .n { font-size: 26px; font-weight: 650; letter-spacing: -.01em; }
.tile .k { color: var(--muted); font-size: 13px; margin-top: 2px; }
.tile.warn .n { color: var(--warn); }
.tile.bad .n { color: var(--bad); }
.tile.good .n { color: var(--ok); }

/* --- Таблицы --- */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow-x: auto;
}
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 9px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
td.wrap, th.wrap { white-space: normal; min-width: 260px; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
.runs-card .run-message { max-width: 720px; overflow: hidden; text-overflow: ellipsis; }
.runs-card .run-actions { padding-left: 6px; }
.run-test-button { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; border-color: color-mix(in srgb, #65b989 45%, var(--line)); border-radius: 9px; background: color-mix(in srgb, #65b989 9%, var(--panel)); color: #79c99b; font-size: 11px; font-weight: 700; }
.run-test-button:hover { border-color: #65b989; background: color-mix(in srgb, #65b989 17%, var(--panel)); }
.run-test-button span { font-size: 8px; }
a { color: var(--accent); }

/* --- Метки --- */
.tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid var(--line);
  color: var(--muted);
}
.tag.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); }
.tag.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); }
.tag.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); }
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 13px; }

/* --- Фильтры и кнопки --- */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.filters a {
  text-decoration: none;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 999px;
  padding: 4px 12px;
  color: var(--muted);
  font-size: 13px;
}
.filters a.on { color: var(--ink); border-color: var(--accent); }

button, .btn {
  font: inherit;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  border-radius: 8px;
  padding: 7px 14px;
  cursor: pointer;
}
button:hover { border-color: var(--accent); }
button[disabled] { opacity: .5; cursor: default; }
button.link { border: none; background: none; color: var(--muted); padding: 4px; }
button.link:hover { color: var(--ink); }

/* --- Задачи --- */
.jobs { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.job { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.job h3 { margin: 0 0 4px; font-size: 15px; font-weight: 600; }
.job p { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
pre {
  margin: 0;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow-x: auto;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12.5px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 320px;
}

/* --- Вход --- */
.login { max-width: 340px; margin: 14vh auto; }
.login h1 { text-align: center; margin-bottom: 18px; }
.login form { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.login input {
  width: 100%;
  font: inherit;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  margin-bottom: 12px;
}
.login button { width: 100%; }
.error { color: var(--bad); font-size: 13px; margin: 0 0 12px; }

.pair { display: grid; grid-template-columns: 190px 1fr; gap: 4px 16px; font-size: 14px; }
.pair dt { color: var(--muted); }
.pair dd { margin: 0; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; align-items: start; }
.empty { color: var(--muted); padding: 20px; }

/* --- Конструктор модулей ------------------------------------------------- */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.builder-section { margin: 0 0 28px; }
.section-title { display: flex; align-items: flex-start; gap: 11px; margin: 18px 0 10px; }
.section-title h2 { margin: 0; font-size: 17px; }
.section-title p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.section-number {
  display: grid; place-items: center; flex: 0 0 28px; height: 28px;
  border-radius: 50%; background: color-mix(in srgb, var(--accent) 14%, var(--panel));
  color: var(--accent); font-weight: 700; font-size: 13px;
}
.form-card { padding: 18px; overflow: visible; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; }
.field-wide { grid-column: 1 / -1; margin-bottom: 14px; }
.field small { color: var(--muted); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px;
}
.field textarea { resize: vertical; min-height: 110px; line-height: 1.45; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent); border-color: var(--accent); }
.detected { color: var(--ok) !important; min-height: 1.3em; }
.switch { display: flex; align-items: center; gap: 8px; margin-top: 16px; color: var(--muted); font-size: 13px; }
.switch input { width: 17px; height: 17px; accent-color: var(--accent); }
.notice { display: flex; gap: 10px; padding: 11px 14px; margin: 12px 0; border-radius: 8px; }
.error-box { color: var(--bad); border: 1px solid color-mix(in srgb, var(--bad) 35%, var(--line)); background: color-mix(in srgb, var(--bad) 7%, var(--panel)); }

.workflow { display: flex; flex-direction: column; gap: 10px; }
.step-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px; }
.step-card[data-step-kind="wait"], .step-card[data-step-kind="pause"] { border-left: 4px solid var(--warn); }
.step-card[data-step-kind="start"], .step-card[data-step-kind="send"], .step-card[data-step-kind="click"] { border-left: 4px solid var(--accent); }
.step-head { display: grid; grid-template-columns: 28px minmax(190px, 270px) 1fr auto; gap: 10px; align-items: center; }
.step-index { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: var(--bg); color: var(--muted); font-size: 12px; font-weight: 700; }
.step-kind { width: 100%; font: inherit; font-weight: 600; color: var(--ink); background: var(--panel); border: none; padding: 5px 2px; }
.step-summary { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step-tools { display: flex; gap: 2px; }
.step-tools button { padding: 4px 7px; border: none; background: none; color: var(--muted); font-size: 12px; }
.step-tools .danger-link:hover { color: var(--bad); }
.step-fields { display: grid; grid-template-columns: minmax(220px, 2fr) minmax(180px, 1.5fr) minmax(150px, 1fr) minmax(140px, .8fr); gap: 12px; margin: 12px 0 0 38px; padding-top: 12px; border-top: 1px solid var(--line); }
.step-fields [hidden] { display: none; }
.add-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 12px; color: var(--muted); font-size: 13px; }
.add-actions button { padding: 5px 10px; font-size: 13px; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
button.primary:hover { filter: brightness(1.08); }
.save-panel, .run-panel { padding: 14px 18px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.save-panel .section-title, .run-panel .section-title { margin-top: 0; }
.danger-zone { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
button.danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); }

/* --- Каталог самостоятельных модулей ----------------------------------- */
.modules-heading { display: flex; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
.modules-heading h1 { font-size: 28px; letter-spacing: -.025em; }
.modules-heading .sub { max-width: 720px; margin-top: 5px; }
.module-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin: 0 0 12px; }
.module-section-head h2 { margin: 0; font-size: 18px; }
.module-section-head p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.referral-section-head { margin-top: 32px; }
.service-module-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 14px; }
.service-module-card {
  position: relative; overflow: hidden; padding: 18px; border: 1px solid var(--line);
  border-radius: 14px; background: var(--panel); box-shadow: 0 8px 26px rgba(0,0,0,.06);
}
.service-module-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: #2f8a75; }
.service-module-card.module-private::before { background: #8b5ab6; }
.service-module-top { display: flex; align-items: center; gap: 11px; }
.service-module-icon { display: grid; place-items: center; flex: 0 0 42px; height: 42px; border-radius: 11px; background: color-mix(in srgb, #2f8a75 20%, var(--panel)); color: #58b99f; font-size: 21px; font-weight: 700; }
.module-private .service-module-icon { background: color-mix(in srgb, #8b5ab6 20%, var(--panel)); color: #bd85e8; }
.service-module-title { min-width: 0; flex: 1; }
.service-module-title h3 { margin: 1px 0 0; font-size: 16px; }
.service-module-kind { color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: .1em; }
.service-module-description { min-height: 44px; margin: 16px 0; color: var(--muted); font-size: 13px; }
.service-module-contract { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--bg) 68%, var(--panel)); }
.service-module-contract span, .service-module-footer small { color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: .08em; }
.service-module-contract strong { font-size: 12px; }
.service-module-contract code { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.service-module-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 15px; }
.service-module-footer > div { display: grid; gap: 2px; }
.service-module-footer strong { font-size: 12px; }
.service-module-footer > .service-module-actions { display: flex; align-items: center; gap: 7px; }
.service-module-actions form { margin: 0; }
.service-module-actions .btn, .service-module-actions button { min-height: 32px; padding: 6px 11px; font-size: 11px; text-decoration: none; }
.module-toggle { min-height: 32px; padding: 0 11px; background: transparent; color: var(--muted); font-size: 11px; }
.service-module-page-head { align-items: center; margin-bottom: 18px; }
.service-module-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr); gap: 16px; align-items: start; }
.service-module-settings { display: grid; gap: 14px; padding: 18px; overflow: visible; }
.service-module-settings .section-title { margin: 0 0 2px; }
.service-module-settings .primary { justify-self: start; margin-top: 4px; }
.module-contract-list { display: grid; gap: 0; margin: 0; }
.module-contract-list > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.module-contract-list > div:last-child { border-bottom: 0; }
.module-contract-list dt { color: var(--muted); font-size: 12px; }
.module-contract-list dd { min-width: 0; margin: 0; font-size: 12px; overflow-wrap: anywhere; }
.module-contract-list code { color: var(--ink); }
.module-contract-note { margin: 4px 0 0; padding: 11px 12px; border-radius: 9px; background: color-mix(in srgb, var(--accent) 8%, var(--bg)); color: var(--muted); font-size: 12px; }

@media (max-width: 650px) {
  .module-section-head { align-items: flex-start; flex-direction: column; }
  .service-module-grid { grid-template-columns: 1fr; }
  .service-module-editor { grid-template-columns: 1fr; }
}

@media (max-width: 850px) {
  .form-grid, .step-fields { grid-template-columns: 1fr; }
  .step-head { grid-template-columns: 28px 1fr auto; }
  .step-summary { grid-column: 2 / -1; grid-row: 2; white-space: normal; }
  .step-tools { grid-column: 3; grid-row: 1; }
  .step-fields { margin-left: 0; }
}

/* --- Нодовый редактор реферальных шаблонов ----------------------------- */
.eyebrow { margin: 0 0 5px; color: var(--accent); font-size: 11px; font-weight: 750; letter-spacing: .12em; }
.template-settings { margin-top: 18px; padding: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.node-editor { margin-top: 18px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); }
.node-editor-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.node-editor-head h2 { margin: 0 0 2px; font-size: 17px; }
.node-editor-head p { margin: 0; color: var(--muted); font-size: 13px; }
.node-editor-hint { color: var(--muted); font-size: 12px; white-space: nowrap; }
.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 15%, transparent); }
.node-workspace { display: grid; grid-template-columns: 210px minmax(0, 1fr); min-height: 570px; }
.node-palette { padding: 17px 14px; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 75%, var(--panel)); }
.node-palette > b { display: block; font-size: 13px; }
.node-palette > p { margin: 3px 0 15px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.palette-item { display: flex; align-items: center; gap: 9px; width: 100%; margin-bottom: 7px; padding: 9px 10px; text-align: left; font-size: 13px; background: var(--panel); }
.palette-icon, .node-icon { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 7px; color: #fff; font-size: 14px; }
.node-type-wait .palette-icon::before, .node-type-wait .node-icon::before { content: "◉"; }
.node-type-click .palette-icon::before, .node-type-click .node-icon::before { content: "↗"; }
.node-type-send .palette-icon::before, .node-type-send .node-icon::before { content: "✎"; }
.node-type-pause .palette-icon::before, .node-type-pause .node-icon::before { content: "◷"; }
.node-type-branch .palette-icon::before, .node-type-branch .node-icon::before { content: "⑂"; }
.node-type-stop .palette-icon::before, .node-type-stop .node-icon::before { content: "■"; }
.node-type-start .node-icon::before { content: "↳"; }
.node-type-start .node-icon, .node-type-start .node-port { background: #6f5bd3; }
.node-type-wait .palette-icon, .node-type-wait .node-icon, .node-type-wait .node-port { background: #c47b24; }
.node-type-click .palette-icon, .node-type-click .node-icon, .node-type-click .node-port { background: #3177b7; }
.node-type-send .palette-icon, .node-type-send .node-icon, .node-type-send .node-port { background: #2f8a62; }
.node-type-pause .palette-icon, .node-type-pause .node-icon, .node-type-pause .node-port { background: #787885; }
.node-type-branch .palette-icon, .node-type-branch .node-icon, .node-type-branch .node-port { background: #9a55c8; }
.node-type-stop .palette-icon, .node-type-stop .node-icon, .node-type-stop .node-port { background: #a64f5c; }
.node-type-stop .node-port-out { display: none; }
.node-canvas-wrap { overflow: auto; padding: 35px 35px 60px; background-color: var(--bg); background-image: radial-gradient(circle, color-mix(in srgb, var(--muted) 24%, transparent) 1px, transparent 1px); background-size: 22px 22px; }
.node-canvas { display: flex; flex-direction: column; align-items: center; min-width: 520px; }
.flow-node { position: relative; width: min(560px, 90%); padding: 14px 15px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 11px; box-shadow: 0 5px 18px rgba(0,0,0,.07); cursor: grab; }
.flow-node + .flow-node { margin-top: 48px; }
.flow-node + .flow-node::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 48px; background: color-mix(in srgb, var(--accent) 48%, var(--line)); transform: translateX(-50%); }
.flow-node + .flow-node::after { content: ""; position: absolute; left: calc(50% - 4px); top: -12px; width: 8px; height: 8px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg); }
.flow-node[data-step-kind="start"] { cursor: default; border-color: color-mix(in srgb, #6f5bd3 45%, var(--line)); }
.flow-node.is-dragging { opacity: .42; border-style: dashed; }
.node-port { position: absolute; left: 50%; z-index: 2; width: 10px; height: 10px; border: 2px solid var(--panel); border-radius: 50%; transform: translateX(-50%); }
.node-port-in { top: -6px; }
.node-port-out { bottom: -6px; }
.node-topline { display: grid; grid-template-columns: 32px 1fr auto auto; align-items: center; gap: 9px; }
.node-heading { display: flex; flex-direction: column; min-width: 0; }
.node-title { font-size: 14px; }
.node-kicker { color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .09em; }
.node-delete { padding: 1px 7px; border: none; background: transparent; color: var(--muted); font-size: 20px; line-height: 1; }
.node-delete:hover { color: var(--bad); }
.node-fields { display: grid; grid-template-columns: minmax(190px, 2fr) minmax(150px, 1.4fr) minmax(120px, 1fr) minmax(95px, .7fr); gap: 9px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); }
.node-fields [hidden] { display: none; }
.node-fields .field { font-size: 11px; }
.node-fields input, .node-fields select { padding: 7px 9px; font-size: 12px; }
.node-fields small { line-height: 1.3; }
.node-summary { margin-top: 10px; padding: 7px 9px; border-radius: 6px; background: var(--bg); color: var(--muted); font-size: 12px; }
.editor-actions { display: flex; justify-content: flex-end; align-items: center; gap: 18px; padding: 14px 0 28px; }
.editor-actions > span { color: var(--muted); font-size: 12px; }
.launch-preview { display: grid; grid-template-columns: 1fr minmax(390px, 1fr); gap: 28px; align-items: center; margin: 8px 0 28px; padding: 22px; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--accent) 5%, var(--panel)); }
.launch-copy h2 { margin: 2px 0 5px; font-size: 19px; }
.launch-copy p:last-child { margin: 0; color: var(--muted); }
.launch-form { display: flex; align-items: end; gap: 9px; }
.launch-form .field { flex: 1; }
.launch-form button { min-height: 39px; }

@media (max-width: 850px) {
  .node-workspace { grid-template-columns: 1fr; }
  .node-palette { display: flex; flex-wrap: wrap; gap: 6px; border-right: none; border-bottom: 1px solid var(--line); }
  .node-palette > b, .node-palette > p { width: 100%; }
  .palette-item { width: auto; margin: 0; }
  .node-canvas-wrap { padding: 28px 12px 50px; }
  .node-canvas { min-width: 0; }
  .flow-node { width: 96%; }
  .node-fields { grid-template-columns: 1fr; }
  .launch-preview { grid-template-columns: 1fr; }
  .launch-form { align-items: stretch; flex-direction: column; }
}

/* --- Свободный компактный редактор ------------------------------------- */
.compact-head { align-items: center; }
.template-summary { margin: 16px 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.template-summary summary { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; cursor: pointer; list-style: none; }
.template-summary summary::-webkit-details-marker { display: none; }
.template-summary summary > span:first-child { display: flex; align-items: baseline; gap: 10px; }
.template-summary summary small { color: var(--muted); }
.summary-action { color: var(--accent); font-size: 12px; }
.template-summary-fields { padding: 3px 15px 16px; border-top: 1px solid var(--line); }
.template-summary-fields .field-wide { margin-bottom: 0; }

.flow-builder { border: 1px solid var(--line); border-radius: 11px; overflow: hidden; background: var(--panel); }
.flow-toolbar { display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: 54px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.flow-add { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.flow-add > span { margin: 0 5px 0 2px; color: var(--muted); font-size: 12px; }
.tool-node { display: flex; align-items: center; gap: 6px; padding: 5px 9px 5px 6px; font-size: 12px; }
.tool-node .palette-icon { width: 23px; height: 23px; flex-basis: 23px; font-size: 11px; }
.quiet-button { border-color: transparent; color: var(--muted); font-size: 12px; }
.flow-main { display: grid; grid-template-columns: minmax(0, 1fr) 270px; height: 650px; }
.free-canvas { position: relative; overflow: auto; background-color: var(--bg); background-image: radial-gradient(circle, color-mix(in srgb, var(--muted) 23%, transparent) 1px, transparent 1px); background-size: 22px 22px; }
.canvas-stage { position: relative; width: 1000px; height: 720px; }
.connections { position: absolute; inset: 0; z-index: 0; overflow: visible; pointer-events: none; }
.connection-line { pointer-events: stroke; cursor: pointer; transition: stroke-width .15s, stroke .15s; }
.connection-line:hover { stroke: var(--bad); stroke-width: 4; }
.connection-preview { pointer-events: none; stroke-dasharray: 7 6; opacity: .8; }
.connection-line { fill: none; stroke: color-mix(in srgb, var(--accent) 65%, var(--line)); stroke-width: 2.5; stroke-linecap: round; }

.mini-node { position: absolute; z-index: 1; display: grid; grid-template-columns: 34px minmax(0, 1fr) 22px; align-items: center; gap: 9px; width: 215px; min-height: 68px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: 0 6px 18px rgba(0,0,0,.1); cursor: grab; user-select: none; touch-action: none; }
.mini-node:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.mini-node.selected { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent), 0 8px 22px rgba(0,0,0,.12); }
.mini-node.dragging { cursor: grabbing; z-index: 3; }
.mini-node-icon { width: 32px; height: 32px; }
.mini-node-copy { display: flex; flex-direction: column; min-width: 0; }
.mini-node-copy b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.mini-node-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 10.5px; }
.mini-node .step-index { width: 21px; height: 21px; color: var(--muted); font-size: 10px; }
.mini-node .node-port { top: 50%; width: 10px; height: 10px; transform: translateY(-50%); }
.mini-node .node-port-in { left: -6px; }
.mini-node .node-port-out { right: -6px; left: auto; bottom: auto; }

.node-inspector { overflow-y: auto; padding: 17px; border-left: 1px solid var(--line); background: var(--panel); }
.inspector-empty { display: grid; place-items: center; align-content: center; height: 100%; color: var(--muted); text-align: center; }
.inspector-empty > span { font-size: 28px; color: var(--accent); }
.inspector-empty b { margin-top: 8px; color: var(--ink); }
.inspector-empty p { margin: 3px 0; font-size: 12px; }
.inspector-content[hidden], .inspector-empty[hidden] { display: none; }
.inspector-head { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.inspector-head h2 { margin: 0; font-size: 15px; }
.inspector-head small { color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .1em; }
.inspector-icon { width: 34px; height: 34px; }
.inspector-icon.node-type-start::before { content: "↳"; }
.inspector-icon.node-type-wait::before { content: "◉"; }
.inspector-icon.node-type-click::before { content: "↗"; }
.inspector-icon.node-type-send::before { content: "✎"; }
.inspector-icon.node-type-pause::before { content: "◷"; }
.inspector-icon.node-type-branch::before { content: "⑂"; }
.inspector-icon.node-type-stop::before { content: "■"; }
.inspector-icon.node-type-start { background: #6f5bd3; }
.inspector-icon.node-type-wait { background: #c47b24; }
.inspector-icon.node-type-click { background: #3177b7; }
.inspector-icon.node-type-send { background: #2f8a62; }
.inspector-icon.node-type-pause { background: #787885; }
.inspector-icon.node-type-branch { background: #9a55c8; }
.inspector-icon.node-type-stop { background: #a64f5c; }
.inspector-help { margin: 13px 0; color: var(--muted); font-size: 12px; }
.inspector-content .field { margin-top: 12px; }
.inspector-content .field input, .inspector-content .field select { padding: 8px 9px; font-size: 12px; }
.inspector-order { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.inspector-order > span { grid-column: 1 / -1; color: var(--muted); font-size: 11px; }
.inspector-order button { padding: 6px; font-size: 11px; }
.inspector-remove { width: 100%; margin-top: 9px; padding: 7px; border: none; background: transparent; color: var(--bad); font-size: 11px; }

@media (max-width: 850px) {
  .flow-toolbar { align-items: flex-start; }
  .tool-node { font-size: 0; }
  .flow-main { grid-template-columns: 1fr; height: auto; }
  .free-canvas { height: 480px; }
  .node-inspector { min-height: 250px; border-top: 1px solid var(--line); border-left: none; }
}

/* --- Редактор сценариев 2.0 ------------------------------------------- */
.flow-builder {
  position: relative;
  overflow: visible;
  border-color: color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--panel) 94%, #111720);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .13);
}
.flow-toolbar {
  position: relative;
  z-index: 20;
  min-height: 62px;
  padding: 9px 12px 9px 16px;
  background: color-mix(in srgb, var(--panel) 97%, #18222b);
  border-radius: 16px 16px 0 0;
}
.flow-toolbar-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.flow-toolbar-title > div { display: flex; flex-direction: column; min-width: 0; }
.flow-toolbar-title b { overflow: hidden; color: var(--ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.flow-toolbar-title small { color: var(--muted); font-size: 10.5px; }
.flow-live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 12%, transparent); }
.flow-toolbar-actions { display: flex; align-items: center; gap: 6px; }
.toolbar-button, .icon-button, .node-add-menu > summary {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel) 90%, var(--bg));
  color: var(--ink);
  font-size: 11px;
  font-weight: 650;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.toolbar-button { padding: 0 12px; }
.icon-button { display: grid; place-items: center; width: 36px; padding: 0; font-size: 16px; }
.toolbar-button:hover, .icon-button:hover, .node-add-menu > summary:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.icon-button:disabled { opacity: .35; cursor: default; }
.node-add-menu { position: relative; }
.node-add-menu > summary { display: flex; align-items: center; gap: 6px; padding: 0 13px; list-style: none; cursor: pointer; border-color: color-mix(in srgb, var(--accent) 62%, var(--line)); background: color-mix(in srgb, var(--accent) 11%, var(--panel)); color: color-mix(in srgb, var(--accent) 80%, white); }
.node-add-menu > summary::-webkit-details-marker { display: none; }
.node-add-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 270px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--panel) 98%, #141a20);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .32);
}
.node-add-popover > p { margin: 4px 7px 7px; color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.node-add-popover .tool-node { width: 100%; padding: 8px; border: 0; border-radius: 9px; background: transparent; text-align: left; }
.node-add-popover .tool-node:hover { background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.node-add-popover .tool-node > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.node-add-popover .tool-node b { color: var(--ink); font-size: 11.5px; }
.node-add-popover .tool-node small { color: var(--muted); font-size: 9.5px; }
.test-flow-button { display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid color-mix(in srgb, #65b989 58%, var(--line)); border-radius: 10px; background: color-mix(in srgb, #65b989 12%, var(--panel)); color: #79c99b; font-size: 11px; font-weight: 700; }
.test-flow-button:hover { background: color-mix(in srgb, #65b989 20%, var(--panel)); border-color: #65b989; }
.test-flow-button span { font-size: 9px; }
.language-branch-button { min-height: 36px; padding: 0 12px; border-color: color-mix(in srgb, #9a55c8 52%, var(--line)); border-radius: 10px; background: color-mix(in srgb, #9a55c8 11%, var(--panel)); color: #c58ae5; font-size: 11px; font-weight: 700; }
.language-branch-button:hover { border-color: #a965ce; background: color-mix(in srgb, #9a55c8 19%, var(--panel)); }

.flow-main { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 288px; height: min(680px, calc(100vh - 235px)); min-height: 520px; }
.free-canvas {
  --grid-x: 0px;
  --grid-y: 0px;
  --grid-size: 22px;
  position: relative;
  overflow: hidden;
  min-width: 0;
  cursor: grab;
  user-select: none;
  touch-action: none;
  background-color: color-mix(in srgb, var(--bg) 94%, #141b21);
  background-image: radial-gradient(circle, color-mix(in srgb, var(--muted) 24%, transparent) 1px, transparent 1px);
  background-position: var(--grid-x) var(--grid-y);
  background-size: var(--grid-size) var(--grid-size);
}
.free-canvas.panning { cursor: grabbing; }
.canvas-stage { position: absolute; top: 0; left: 0; width: 10000px; height: 1800px; transform-origin: 0 0; will-change: transform; }
.connections { width: 10000px; height: 1800px; }
.connection-line { stroke: color-mix(in srgb, #67b88a 72%, var(--line)); stroke-width: 2.6; opacity: .78; vector-effect: non-scaling-stroke; }
.connection-line.branch-line { stroke: color-mix(in srgb, #b875dc 76%, var(--line)); }
.connection-label { fill: color-mix(in srgb, #d2a0e8 82%, var(--muted)); font-size: 10px; font-weight: 700; text-anchor: middle; paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }

.mini-node {
  grid-template-columns: 38px minmax(0, 1fr) 24px;
  gap: 10px;
  width: 232px;
  min-height: 76px;
  padding: 11px 12px;
  border-color: color-mix(in srgb, var(--line) 88%, transparent);
  border-radius: 13px;
  background: color-mix(in srgb, var(--panel) 96%, #1a2229);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  cursor: grab;
  transition: border-color .14s ease, box-shadow .14s ease, opacity .14s ease;
}
.mini-node:hover { border-color: color-mix(in srgb, var(--accent) 48%, var(--line)); box-shadow: 0 12px 34px rgba(0, 0, 0, .22); }
.mini-node.selected { border-color: #65b989; box-shadow: 0 0 0 2px rgba(101, 185, 137, .18), 0 12px 34px rgba(0, 0, 0, .24); }
.mini-node.dragging { cursor: grabbing; z-index: 4; box-shadow: 0 18px 42px rgba(0, 0, 0, .3); }
.mini-node-icon { width: 36px; height: 36px; border-radius: 10px; }
.mini-node-copy b { font-size: 13px; line-height: 1.25; }
.mini-node-copy small { margin-top: 3px; font-size: 10.5px; }
.mini-node .step-index { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: color-mix(in srgb, var(--bg) 78%, transparent); color: var(--muted); font-weight: 700; }
.mini-node .node-port { width: 9px; height: 9px; border: 2px solid color-mix(in srgb, var(--panel) 92%, #111); box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); }
.mini-node .node-port { z-index: 5; cursor: crosshair; transition: transform .14s, box-shadow .14s; }
.mini-node .node-port:hover { transform: translateY(-50%) scale(1.65); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); }

.canvas-hint {
  position: absolute;
  z-index: 8;
  bottom: 14px;
  left: 50%;
  padding: 7px 12px;
  transform: translateX(-50%);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  color: var(--muted);
  font-size: 9.5px;
  white-space: nowrap;
  pointer-events: none;
  backdrop-filter: blur(10px);
}
.zoom-controls { position: absolute; z-index: 9; bottom: 14px; left: 14px; display: flex; align-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: color-mix(in srgb, var(--panel) 94%, transparent); box-shadow: 0 8px 24px rgba(0,0,0,.15); backdrop-filter: blur(10px); }
.zoom-controls button { height: 34px; padding: 0 10px; border: 0; border-radius: 0; background: transparent; color: var(--ink); font-size: 15px; }
.zoom-controls button:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.zoom-controls #zoom-reset { min-width: 54px; border-right: 1px solid var(--line); border-left: 1px solid var(--line); font-size: 10px; }
.flow-minimap { position: absolute; z-index: 9; right: 14px; bottom: 14px; overflow: hidden; width: 92px; height: 58px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--panel) 92%, transparent); box-shadow: 0 8px 24px rgba(0,0,0,.16); backdrop-filter: blur(10px); }
.flow-minimap > span { position: absolute; inset: 5px; }
.mini-map-node { position: absolute; width: 13px; height: 6px; border-radius: 2px; transform: translate(-50%, -50%); background: var(--accent); }
.mini-map-node.node-type-start { background: #7864db; }
.mini-map-node.node-type-wait { background: #cf8529; }
.mini-map-node.node-type-click { background: #3e88c8; }
.mini-map-node.node-type-send { background: #43a77d; }
.mini-map-node.node-type-pause { background: #858591; }
.mini-map-node.node-type-branch { background: #a85fd0; }
.mini-map-node.node-type-stop { background: #b55766; }
.flow-minimap > i { position: absolute; min-width: 8px; min-height: 8px; border: 1px solid rgba(255,255,255,.55); border-radius: 3px; background: rgba(255,255,255,.05); pointer-events: none; }

.node-inspector { position: relative; z-index: 12; overflow: auto; padding: 19px 18px 22px; border-left: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 98%, #171d23); }
.inspector-close { position: absolute; z-index: 2; top: 12px; right: 12px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 18px; }
.inspector-close:hover { color: var(--ink); background: color-mix(in srgb, var(--muted) 10%, transparent); }
.inspector-grabber { display: none; }
.inspector-head { padding-right: 28px; }
.inspector-help { line-height: 1.5; }
.inspector-links { display: grid; gap: 7px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.inspector-links > span, .inspector-order > span { color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.inspector-links > div { display: grid; grid-template-columns: 68px minmax(0, 1fr); align-items: center; gap: 7px 9px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 9px; background: color-mix(in srgb, var(--bg) 72%, transparent); }
.inspector-links > div small { grid-row: 1 / 3; color: var(--muted); font-size: 9px; }
.inspector-links > div span { overflow: hidden; color: var(--ink); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.inspector-links > div b { overflow: hidden; color: var(--muted); font-size: 9px; font-weight: 450; text-overflow: ellipsis; white-space: nowrap; }
.inspector-links .link-empty { grid-row: auto; color: var(--muted); font-style: italic; }
.inspector-links > small { color: var(--muted); font-size: 9px; line-height: 1.4; }
.inspector-order button { min-height: 34px; border-radius: 9px; background: color-mix(in srgb, var(--bg) 58%, transparent); }
.inspector-remove { min-height: 34px; border-radius: 9px; }
.branch-editor[hidden] { display: none; }
.branch-editor { display: grid; gap: 8px; margin-top: 17px; padding-top: 14px; border-top: 1px solid var(--line); }
.branch-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.branch-editor-head > span { color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.branch-editor-head button { min-height: 28px; padding: 0 8px; border-radius: 7px; color: #c68be3; font-size: 9px; }
.branch-editor > p { margin: -2px 0 2px; color: var(--muted); font-size: 8.5px; line-height: 1.4; }
#branch-cases { display: grid; gap: 8px; }
.branch-case { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 9px; border: 1px solid color-mix(in srgb, #9a55c8 34%, var(--line)); border-radius: 9px; background: color-mix(in srgb, #9a55c8 5%, var(--bg)); }
.branch-case input, .branch-case select { min-width: 0; min-height: 31px; padding: 6px 7px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg); color: var(--ink); font-size: 9px; }
.branch-case-head { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) 28px; gap: 5px; }
.branch-case-head button { min-height: 28px; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 15px; }
.branch-case-head button:hover { color: var(--bad); }
.branch-case .branch-match, .branch-case .branch-target { grid-column: 1 / -1; }
.editor-actions { align-items: center; margin-top: 12px; }
.editor-actions #flow-status { color: var(--muted); font-size: 11px; }

.flow-debugger[hidden], .debugger-setup[hidden], .debugger-run[hidden], .debugger-input[hidden], #debugger-buttons-wrap[hidden] { display: none !important; }
.flow-debugger {
  position: absolute;
  z-index: 18;
  top: 12px;
  right: 12px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  width: 340px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--panel) 98%, #151c22);
  box-shadow: 0 22px 64px rgba(0, 0, 0, .38);
  user-select: text;
}
.flow-debugger { min-width: 320px; max-width: min(680px, 76vw); resize: horizontal; }
.flow-debugger.collapsed { top: auto; height: 58px; min-height: 58px; resize: none; }
.flow-debugger.collapsed > :not(.debugger-head) { display: none !important; }
.debugger-fixes { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 10px 8px; padding: 9px; border: 1px solid color-mix(in srgb, var(--bad) 35%, var(--line)); border-radius: 9px; background: color-mix(in srgb, var(--bad) 5%, var(--panel)); }
.debugger-fixes[hidden] { display: none; }
.debugger-fixes b { flex: 1 0 100%; color: var(--muted); font-size: 9px; }
.debugger-fixes button { min-height: 28px; padding: 0 8px; font-size: 9px; }
.launch-history { margin: 14px 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.launch-history > summary { padding: 12px 15px; cursor: pointer; font-weight: 650; }
.launch-history article { display: grid; grid-template-columns: auto 120px 1fr; align-items: center; gap: 10px; padding: 9px 15px; border-top: 1px solid var(--line); }
.launch-history article small { color: var(--muted); }
.launch-results { grid-column: 1 / -1; }
.launch-results > summary { color: var(--accent); cursor: pointer; font-size: 11px; }
.launch-results > div { display: grid; grid-template-columns: 170px 70px 1fr; gap: 8px; padding: 5px 0; border-top: 1px solid var(--line); }
.mini-node.invalid { border-color: var(--bad); box-shadow: 0 0 0 2px color-mix(in srgb, var(--bad) 18%, transparent); }
.connection-line.language-en { stroke: #4b8fc8; }
.connection-line.language-ru { stroke: #ba6bcb; }
.connection-label.language-en { fill: #79b9e6; }
.connection-label.language-ru { fill: #d89ae5; }
.semantic-zoom .mini-node-copy small, .semantic-zoom .step-index { display: none; }
.semantic-zoom .mini-node { min-height: 58px; }
.debugger-head { display: flex; justify-content: space-between; align-items: center; min-height: 58px; padding: 10px 11px 10px 15px; border-bottom: 1px solid var(--line); }
.debugger-head > div { display: flex; align-items: center; gap: 10px; }
.debugger-head > div > div { display: flex; flex-direction: column; }
.debugger-head b { color: var(--ink); font-size: 12.5px; }
.debugger-head small { color: var(--muted); font-size: 9.5px; }
.debugger-head button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 19px; }
.debugger-head button:hover { background: color-mix(in srgb, var(--muted) 11%, transparent); color: var(--ink); }
.debugger-live { width: 9px; height: 9px; border-radius: 50%; background: #65b989; box-shadow: 0 0 0 5px rgba(101,185,137,.12); }
.debugger-setup { display: flex; min-height: 0; flex: 1; flex-direction: column; align-items: center; justify-content: center; overflow-y: auto; padding: 24px; text-align: center; }
.debugger-intro-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: color-mix(in srgb, #65b989 17%, var(--panel)); color: #78cb9d; font-size: 16px; box-shadow: inset 0 0 0 1px rgba(101,185,137,.24); }
.debugger-setup h3 { margin: 15px 0 6px; color: var(--ink); font-size: 15px; }
.debugger-setup > p { margin: 0 0 22px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.debugger-setup .field { width: 100%; text-align: left; }
.debugger-setup .field input, .debugger-setup .field select { font-size: 11px; }
.debugger-setup .primary { width: 100%; margin-top: 10px; }
.debugger-mode { display: grid; width: 100%; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 12px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--bg) 68%, transparent); }
.debugger-mode button { min-height: 32px; padding: 0 8px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 9.5px; }
.debugger-mode button.active { background: color-mix(in srgb, #65b989 15%, var(--panel)); color: #79c99b; box-shadow: inset 0 0 0 1px rgba(101,185,137,.26); }
.debugger-warning { display: block; margin-top: 2px; color: #dca15a; font-size: 8.5px; line-height: 1.4; text-align: left; }
.debugger-run { display: flex; min-height: 0; flex: 1; flex-direction: column; }
.debugger-step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 9px; margin: 10px; padding: 11px 12px; border: 1px solid color-mix(in srgb, #d28b31 45%, var(--line)); border-radius: 11px; background: color-mix(in srgb, #d28b31 8%, var(--bg)); }
.debugger-step > span { grid-row: 1 / 3; align-self: center; padding: 5px 7px; border-radius: 7px; background: color-mix(in srgb, #d28b31 18%, var(--panel)); color: #e4a34e; font-size: 9px; font-weight: 750; white-space: nowrap; }
.debugger-step b { overflow: hidden; color: var(--ink); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.debugger-step small { overflow: hidden; color: var(--muted); font-size: 9px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.debugger-step[data-tone="done"] { border-color: color-mix(in srgb, #65b989 55%, var(--line)); background: color-mix(in srgb, #65b989 8%, var(--bg)); }
.debugger-step[data-tone="done"] > span { background: color-mix(in srgb, #65b989 17%, var(--panel)); color: #79c99b; }
.debugger-step[data-tone="error"] { border-color: color-mix(in srgb, var(--bad) 58%, var(--line)); background: color-mix(in srgb, var(--bad) 8%, var(--bg)); }
.debugger-step[data-tone="error"] > span { background: color-mix(in srgb, var(--bad) 16%, var(--panel)); color: var(--bad); }
.debugger-chat { display: flex; min-height: 150px; flex: 1; flex-direction: column; gap: 8px; overflow-y: auto; padding: 8px 12px 14px; background: color-mix(in srgb, var(--bg) 78%, transparent); }
.debug-message { display: flex; max-width: 84%; flex-direction: column; gap: 4px; }
.debug-message > div { padding: 8px 10px; border-radius: 11px; color: var(--ink); font-size: 10.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.debug-message.incoming { align-self: flex-start; }
.debug-message.incoming > div { border-bottom-left-radius: 3px; background: color-mix(in srgb, var(--panel) 90%, #26313a); }
.debug-message.outgoing { align-self: flex-end; }
.debug-message.outgoing > div { border-bottom-right-radius: 3px; background: color-mix(in srgb, #31886b 48%, var(--panel)); }
.debug-message.system { align-self: center; max-width: 96%; }
.debug-message.system > div { padding: 4px 8px; border-radius: 999px; background: color-mix(in srgb, var(--panel) 72%, transparent); color: var(--muted); font-size: 8.5px; text-align: center; }
.debug-message.system.error > div { color: var(--bad); background: color-mix(in srgb, var(--bad) 9%, var(--panel)); }
.debug-keyboard { display: grid; width: 100%; gap: 3px; }
.debug-keyboard-row { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 3px; }
.debug-keyboard i { overflow: hidden; padding: 5px 7px; border: 1px solid color-mix(in srgb, #4a9ed1 38%, var(--line)); border-radius: 6px; background: color-mix(in srgb, #3c8dbf 10%, var(--panel)); color: #83bfe4; font-size: 9px; font-style: normal; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.debugger-input { display: grid; gap: 7px; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--panel); }
.debugger-input label { display: grid; gap: 4px; color: var(--muted); font-size: 9px; font-weight: 650; }
.debugger-input textarea, .debugger-input input { width: 100%; min-height: 36px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font: inherit; font-size: 10.5px; resize: vertical; }
.debugger-input textarea:focus, .debugger-input input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 13%, transparent); }
.debugger-input button { min-height: 34px; border-color: color-mix(in srgb, #65b989 50%, var(--line)); border-radius: 8px; background: color-mix(in srgb, #65b989 11%, var(--panel)); color: #79c99b; font-size: 10px; font-weight: 700; }
.debugger-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 9px 12px 11px; border-top: 1px solid var(--line); }
.debugger-actions button { min-height: 32px; padding: 0 8px; border-radius: 8px; background: color-mix(in srgb, var(--bg) 58%, var(--panel)); color: var(--muted); font-size: 9.5px; }
.debugger-actions #debugger-edit { color: var(--ink); }
.module-referral { border-color: color-mix(in srgb, #7864db 34%, var(--line)); }
.module-referral .service-module-icon { color: #9b8aee; background: color-mix(in srgb, #7864db 16%, var(--panel)); }
.module-run-panel { margin-bottom: 18px; }
.module-run-form { grid-template-columns: minmax(250px, 1fr) 150px auto; align-items: end; }
.module-run-form .field { margin: 0; }
.quantity-field input { font-variant-numeric: tabular-nums; }
.availability-output { float: right; color: var(--muted); font-size: 11px; font-weight: 600; }
.availability-output.ready { color: var(--accent); }
.availability-output.empty, .availability-output.error { color: var(--bad); }
.module-history-section { margin-top: 22px; }
.module-launch-message { color: var(--bad); }
.system-readiness { display: flex; flex-wrap: wrap; gap: 7px 16px; margin: 14px 0 22px; }
.system-readiness b { flex-basis: 100%; }
.system-readiness span { color: var(--muted); }
.mini-node.testing-active { border-color: #dda048; box-shadow: 0 0 0 3px rgba(221,160,72,.18), 0 12px 34px rgba(0,0,0,.25); animation: test-node-pulse 1.3s ease-in-out infinite; }
.mini-node.testing-done { border-color: color-mix(in srgb, #65b989 65%, var(--line)); }
.mini-node.testing-error { border-color: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 16%, transparent), 0 12px 34px rgba(0,0,0,.25); }
@keyframes test-node-pulse { 50% { box-shadow: 0 0 0 6px rgba(221,160,72,.07), 0 12px 34px rgba(0,0,0,.25); } }

@media (max-width: 850px) {
  .module-run-form { grid-template-columns: 1fr; }
  .flow-toolbar { align-items: center; }
  .flow-toolbar-title small, .toolbar-button { display: none; }
  .flow-main { display: block; height: min(640px, calc(100vh - 190px)); min-height: 500px; }
  .free-canvas { height: 100%; }
  .node-inspector {
    position: absolute;
    right: 8px;
    bottom: 8px;
    left: 8px;
    max-height: min(68%, 470px);
    min-height: 0;
    padding: 25px 15px 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 -18px 60px rgba(0, 0, 0, .42);
    transform: translateY(calc(100% + 20px));
    transition: transform .2s ease;
  }
  .node-inspector.open { transform: translateY(0); }
  .node-inspector:not(.open) { pointer-events: none; }
  .inspector-empty { display: none !important; }
  .inspector-grabber { position: absolute; top: 8px; left: 50%; display: block; width: 38px; height: 4px; border-radius: 3px; transform: translateX(-50%); background: color-mix(in srgb, var(--muted) 40%, transparent); }
  .canvas-hint { display: none; }
  .flow-minimap { right: 10px; bottom: 10px; }
  .zoom-controls { bottom: 10px; left: 10px; }
  .node-add-popover { position: fixed; top: 74px; right: 10px; }
  .flow-debugger { top: 8px; right: 8px; bottom: 8px; left: 8px; width: auto; }
}

@media (max-width: 540px) {
  .compact-head { align-items: flex-start; }
  .flow-toolbar-title b { max-width: 112px; }
  .flow-toolbar-actions { gap: 4px; }
  .icon-button { width: 34px; }
  .node-add-menu > summary { padding: 0 10px; }
  .test-flow-button { width: 34px; padding: 0; justify-content: center; font-size: 0; }
  .test-flow-button span { font-size: 10px; }
  .language-branch-button { width: 34px; padding: 0; overflow: hidden; font-size: 0; }
  .language-branch-button::first-letter { font-size: 13px; }
  .mini-node { width: 214px; }
  .flow-minimap { width: 76px; }
}