/* Доска конструктора воронок: вид макета, утверждённого владельцем 28.10 (окно правки рядом с карточкой, цепочка
   «сразу дальше» столбиком вниз, на карточке две строки текста и плитки файлов). Только этот файл: ни встроенных стилей,
   ни внешних шрифтов. */
:root { --bg:#f4f5f0; --ink:#272c25; --muted:#879080; --line:#dce1d6; --green:#567447; --soft:#eef3e9; --wire:#93a88a; --red:#b0503a; --red-soft:#f9ede9; --yellow:#94701a; --yellow-soft:#fbf4e1; }
* { box-sizing:border-box; }
html,body { height:100%; margin:0; }
body { color:var(--ink); font:13px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; background:var(--bg); }
body.na-doske { overflow:hidden; }
button,input,select,textarea { font:inherit; color:inherit; }
button { cursor:pointer; }
button:focus-visible { outline:2px solid var(--green); outline-offset:3px; }
button:disabled { cursor:default; }
[hidden] { display:none !important; }

/* вход */
.vhod-ekran { max-width:40rem; margin:12vh auto 0; padding:0 16px; font-size:16px; }
.vhod-ekran h1 { font-size:1.5rem; margin:0 0 1rem; }

/* доска */
.board { position:fixed; inset:0; touch-action:none; background-image:radial-gradient(circle,#d5dacd 1px,transparent 1.25px); background-size:24px 24px; }
.board.panning { cursor:grabbing; }
.board.linking, .board.linking * { cursor:crosshair !important; }
.world { position:absolute; transform-origin:0 0; width:1px; height:1px; }
.wires { position:absolute; inset:0; width:1px; height:1px; overflow:visible; pointer-events:none; }
.wire { fill:none; stroke:var(--wire); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; transition:opacity .18s,stroke .18s; }
.wire.auto { stroke-dasharray:5 5; }
.wire.quiet { opacity:.15; }
.wire.hot { stroke:var(--green); stroke-width:2.5; }
.wire.draft { stroke:var(--green); stroke-width:2; stroke-dasharray:6 5; }
.card { position:absolute; width:248px; border:1px solid #ced9c6; border-radius:14px; padding:0 12px 12px; background:white; box-shadow:0 3px 12px #28362109; transition:left .28s,top .28s,box-shadow .18s,border-color .18s; }
.card.root { border-color:#aabc9d; }
.card.selected { border-color:var(--green); box-shadow:0 0 0 3px #b2c6a44d,0 4px 16px #2836210d; }
.card.dragging { transition:none; box-shadow:0 10px 30px #2836211c; }
.card.drop { border-color:var(--green); box-shadow:0 0 0 4px #b2c6a480; }
.card.has-problem { border-color:#e2b8ab; }
.card.selected.has-problem { border-color:var(--green); }
.head { height:46px; display:flex; align-items:center; gap:6px; cursor:grab; }
.title { flex:1; margin:0; font-size:13px; font-weight:650; letter-spacing:-.15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.problem-dot { flex:none; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--red-soft); color:var(--red); font-size:11px; font-weight:600; display:grid; place-items:center; }
.icon-button { flex:none; width:25px; height:27px; padding:0; border:0; border-radius:6px; background:transparent; color:#939b8d; display:grid; place-items:center; }
.icon-button:hover { color:var(--ink); background:var(--soft); }
.icon-button svg { width:15px; height:15px; }
.vhod { margin:-4px 0 9px; padding:5px 9px; border-radius:8px; background:#edf3e7; color:#4f6a41; font-size:11px; line-height:1.35; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vhod.pusto { background:var(--red-soft); color:var(--red); }
.message { width:100%; min-height:27px; border:0; border-radius:5px; display:flex; align-items:flex-start; gap:8px; padding:6px 9px; margin-bottom:10px; background:#f0f1ed; color:#7d8676; text-align:left; font-size:11.5px; line-height:1.4; }
.message svg { width:12px; height:12px; flex:none; margin-top:2px; }
.message .snippet { flex:1; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.message .snippet.empty { color:#a3ab99; font-style:italic; }
.message:hover { background:#e9ede3; }
.files { display:flex; flex-wrap:wrap; gap:4px; margin:-3px 0 10px; }
.files .mini { width:30px; height:30px; border-radius:5px; background:repeating-linear-gradient(135deg,#e3e6de 0 6px,#ebede7 6px 12px); border:1px solid #dadfd3; }
.files .more { font-size:11px; color:var(--muted); align-self:center; margin-left:3px; }
.buttons { display:flex; flex-direction:column; gap:5px; }
.row { position:relative; width:100%; min-height:37px; padding:8px 10px; display:flex; align-items:center; gap:7px; text-align:left; border:1px solid #d2ddca; border-radius:7px; background:#fff; font-size:12px; line-height:1.3; color:inherit; }
.row:hover { background:#f8faf5; border-color:#b0c2a2; }
.row .label { flex:1; overflow-wrap:anywhere; }
.row .label small { display:block; color:#98a08e; font-size:10.5px; margin-top:1px; }
.row .signal { color:#97a68d; flex:none; font-size:17px; line-height:1; width:12px; text-align:center; }
.row.open { background:#edf3e7; border-color:#b4c7a5; }
.row.open .signal { color:#5f7f4e; }
.row.external,.row.back { color:#737e6a; border-color:#e5e8df; background:#f8f9f6; }
.row.external .signal { font-size:13px; }
.row.automatic { border-style:dashed; color:#6f7a66; min-height:28px; padding:5px 10px; font-size:11px; }
.row.automatic .label { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row.no-target { border-color:#e6b9ad; background:var(--red-soft); color:var(--red); border-style:dashed; }
.row.no-target .signal { color:var(--red); }
.rowbox { position:relative; }
.row.deletable { padding-right:32px; }
.kdel { position:absolute; right:5px; top:50%; width:24px; height:24px; margin-top:-12px; padding:0; border:0; border-radius:6px; background:transparent; color:#9aa391; display:grid; place-items:center; visibility:hidden; z-index:1; }
.kdel svg { width:14px; height:14px; }
.kdel:hover,.kdel:focus-visible { background:var(--red-soft); color:var(--red); }
.rowbox:hover .kdel,.rowbox:focus-within .kdel,.card.editing .kdel { visibility:visible; }
@media (hover:none) { .kdel { visibility:visible; } }
.icon-button.del-screen:hover { color:var(--red); background:var(--red-soft); }
.icon-button.off { opacity:.4; }
.icon-button.off:hover { color:#939b8d; background:transparent; }
.undo { position:fixed; bottom:78px; left:50%; transform:translateX(-50%); z-index:31; display:flex; align-items:center; gap:12px; max-width:calc(100vw - 32px); padding:6px 6px 6px 14px; background:#2f3a2bf2; color:#f3f5ef; border-radius:10px; box-shadow:0 6px 20px #1e2b1b33; font-size:12.5px; }
.undo button { flex:none; height:28px; padding:0 12px; border:0; border-radius:7px; background:#ffffff26; color:white; font-weight:600; }
.undo button:hover { background:#ffffff40; }
.port { position:absolute; right:-19px; top:50%; width:13px; height:13px; margin-top:-6.5px; border-radius:50%; border:2px solid var(--wire); background:white; cursor:crosshair; touch-action:none; }
.port:hover,.port.active { background:var(--green); border-color:var(--green); transform:scale(1.25); }
.row.open .port { background:var(--wire); }
.add-row { width:100%; margin-top:5px; height:26px; border:1px dashed #cdd6c4; border-radius:7px; background:transparent; color:#7f8a75; font-size:12px; }
.add-row:hover { background:var(--soft); color:var(--ink); }
.topline { position:fixed; top:18px; left:24px; display:flex; align-items:center; gap:10px; max-width:calc(100vw - 720px); }
.topline .who { min-width:0; }
.name-row { display:flex; align-items:center; gap:9px; min-width:0; }
.topline strong { display:block; font-size:15px; font-weight:620; letter-spacing:-.3px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topline small { display:block; margin-top:2px; font-size:11px; color:#9aa291; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topline small.itog { color:#6d7765; cursor:pointer; }
.topline small.itog.bad { color:var(--red); }
.chip { flex:none; padding:3px 9px; border-radius:20px; font-size:11px; background:#eceee8; color:#6d7765; white-space:nowrap; }
.chip.live { background:#e4eedb; color:#46613a; }
.chip.off { background:#f1ece3; color:#86704a; }
.chip.warn { background:var(--yellow-soft); color:var(--yellow); cursor:pointer; }
.toolbar { position:fixed; display:flex; align-items:center; gap:2px; padding:5px; border:1px solid #dde3d4; border-radius:11px; background:#fffffff5; box-shadow:0 3px 14px #29342209; }
.toolbar.left { left:24px; bottom:22px; }
.toolbar.right { right:24px; bottom:22px; }
.toolbar.top { right:24px; top:16px; }
.toolbar button { height:31px; border:0; padding:0 12px; border-radius:7px; background:transparent; font-size:12px; white-space:nowrap; }
.toolbar button:hover { background:var(--soft); }
.toolbar button.primary { background:var(--green); color:white; }
.toolbar button.primary:hover { background:#4a6640; }
.toolbar button.primary.blocked { background:#c9d1c1; color:#f7f8f4; }
.toolbar button.primary:disabled { opacity:.7; }
.toolbar .square { width:32px; padding:0; font-size:19px; }
.toolbar .divider { width:1px; height:15px; margin:0 4px; background:#e6e9e1; }
.toolbar select { height:31px; border:0; background:transparent; padding:0 6px; border-radius:7px; font-size:12px; max-width:190px; }
.toolbar select:hover { background:var(--soft); }
.sohr { font-size:11px; color:#98a08e; padding:0 8px; white-space:nowrap; }
.sohr.bad { color:var(--red); }
.checks-btn.bad { color:var(--red); }
.checks-btn.good { color:#4c6b3e; }
.switch { display:flex; gap:2px; padding:2px; margin-left:4px; background:#eef0ea; border-radius:8px; }
.switch button { height:27px; padding:0 10px; font-size:11.5px; color:#6d7765; }
.switch button.on { background:white; color:var(--ink); box-shadow:0 1px 3px #2a342814; }
.switch button:disabled { opacity:.55; }
.zoom-value { min-width:44px; color:#86917b; font-size:11px; text-align:center; }
.hint { position:fixed; bottom:34px; left:50%; transform:translateX(-50%); margin:0; color:#939c87; font-size:11px; pointer-events:none; white-space:nowrap; }
.toast { position:fixed; bottom:78px; left:50%; transform:translateX(-50%); max-width:min(560px,calc(100vw - 32px)); padding:9px 14px; color:#4f6345; background:#fffffff7; border:1px solid var(--line); border-radius:9px; box-shadow:0 3px 12px #28362112; font-size:12.5px; z-index:30; pointer-events:none; }
.toast.vyshe { bottom:128px; }
.float { position:fixed; z-index:20; width:372px; max-height:calc(100vh - 150px); overflow:auto; border:1px solid #d8dfcf; border-radius:14px; background:white; box-shadow:0 12px 40px #1e2b1b1f; }
.float-top { position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:8px; padding:12px 12px 10px 16px; background:white; border-bottom:1px solid #eef0ea; }
.float-top h2 { flex:1; margin:0; font-size:14px; font-weight:620; }
.float-top input { flex:1; min-width:0; border:1px solid transparent; border-radius:7px; padding:5px 7px; font-size:14px; font-weight:620; }
.float-top input:hover,.float-top input:focus { border-color:#d3dbcb; outline:none; }
.sec { padding:12px 16px 14px; border-bottom:1px solid #f0f2ec; }
.sec:last-child { border-bottom:0; }
.sec h3 { margin:0 0 8px; font-size:11px; font-weight:600; color:#8a937f; text-transform:uppercase; letter-spacing:.4px; display:flex; justify-content:space-between; }
.sec p.note { margin:6px 0 0; color:#8f988a; font-size:11.5px; }
.field { display:flex; flex-direction:column; gap:4px; margin-bottom:9px; }
.field.tesno { margin-bottom:4px; }
.field label { font-size:12px; color:#5f6a57; }
.field input,.field select,.mini-input { width:100%; height:32px; border:1px solid #d3dbcb; border-radius:8px; padding:0 9px; background:white; font-size:12.5px; }
.field textarea { width:100%; border:1px solid #d3dbcb; border-radius:8px; padding:6px 9px; background:white; font:inherit; font-size:12.5px; line-height:1.45; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus,.mini-input:focus,.editor:focus { outline:2px solid #b8cbaa; outline-offset:0; border-color:#9fb492; }
.field input.bad,.field textarea.bad,.mini-input.bad { border-color:#e0a898; background:var(--red-soft); }
.link-out { padding:7px 9px; border-radius:8px; background:#f3f6ef; font-size:12px; overflow-wrap:anywhere; color:#45603a; }
.link-row { display:flex; align-items:center; gap:8px; }
.link-row + .link-row { margin-top:5px; }
.link-row .link { flex:1; min-width:0; }
.line { display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 10px; }
.fmt { display:flex; gap:4px; margin-bottom:6px; }
.fmt button { height:28px; min-width:32px; padding:0 9px; border:1px solid #dbe1d3; border-radius:7px; background:white; font-size:12px; }
.fmt button:hover { background:var(--soft); }
.fmt button.zhirnyy { font-weight:700; }
.fmt button.kursiv { font-style:italic; }
.editor { min-height:96px; max-height:240px; overflow:auto; padding:8px 10px; border:1px solid #d3dbcb; border-radius:8px; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.5; }
.editor:empty::before { content:attr(data-placeholder); color:#a6ae9c; }
.editor a,.bubble a { color:#2f7bb6; text-decoration:underline; }
.editor code,.bubble code,.tg-pre { font-family:ui-monospace,Menlo,monospace; font-size:.92em; background:#eef0ea; border-radius:3px; padding:0 2px; }
.tg-pre { display:block; padding:4px 6px; }
.tg-blockquote { display:block; border-left:3px solid #b4c7a5; padding-left:8px; }
.tg-spoiler { background:#d9ded2; color:transparent; border-radius:3px; }
.tg-spoiler:hover { color:inherit; background:#eef0ea; }
.counter { margin-top:4px; font-size:11px; color:#98a08e; text-align:right; }
.counter.bad { color:var(--red); }
.linkbar { display:flex; gap:6px; margin-bottom:6px; }
.tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.tile { position:relative; aspect-ratio:1; border-radius:8px; padding:6px; display:flex; flex-direction:column; justify-content:flex-end; background:repeating-linear-gradient(135deg,#e3e6de 0 8px,#ebede7 8px 16px); border:1px solid #dadfd3; font-size:10.5px; line-height:1.25; color:#66705e; overflow:hidden; }
.tile b { font-weight:600; overflow-wrap:anywhere; }
.tile .x { position:absolute; top:3px; right:3px; width:20px; height:20px; border:0; border-radius:5px; background:#ffffffc0; color:#6f7966; padding:0; line-height:1; }
.warn-line { margin-top:7px; padding:7px 9px; border-radius:8px; background:var(--yellow-soft); color:var(--yellow); font-size:11.5px; }
.ghost { height:30px; padding:0 11px; border:1px dashed #cdd6c4; border-radius:8px; background:white; color:#5f6a57; font-size:12px; }
.ghost:hover { background:var(--soft); }
.danger { height:30px; padding:0 11px; border:1px solid #ecc9c0; border-radius:8px; background:white; color:var(--red); font-size:12px; }
.danger:disabled { opacity:.45; cursor:default; }
.bt { border:1px solid #e2e7dc; border-radius:10px; padding:8px; margin-bottom:7px; background:#fbfcfa; }
.bt.bad { border-color:#eac2b7; background:#fdf6f4; }
.bt-line { display:flex; gap:6px; align-items:center; }
.bt-line + .bt-line { margin-top:6px; }
.bt-line select { flex:none; width:122px; height:30px; border:1px solid #d3dbcb; border-radius:8px; background:white; font-size:12px; padding:0 5px; }
.bt-line .tgt { flex:1; min-width:0; }
.bt-line span.tgt { font-size:12px; color:#6d7765; }
.bt .del { flex:none; width:28px; height:30px; border:0; border-radius:7px; background:transparent; color:#a0a897; font-size:16px; }
.bt .del:hover { background:var(--red-soft); color:var(--red); }
.bt .why { margin-top:5px; font-size:11px; color:var(--red); }
.bt .len { font-size:10.5px; color:#a0a897; flex:none; }
.bt .len.bad { color:var(--red); }
.phone { background:#dfe7d6; border-radius:12px; padding:12px 10px; }
.bubble { max-width:92%; background:white; border-radius:12px 12px 12px 4px; padding:7px 10px 6px; box-shadow:0 1px 1px #0000000f; white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; line-height:1.42; }
.bubble + .bubble { margin-top:6px; }
.bubble .media { display:grid; gap:2px; margin:-4px -7px 6px; border-radius:9px; overflow:hidden; grid-template-columns:1fr 1fr 1fr; }
.bubble .media.n1 { grid-template-columns:1fr; }
.bubble .media.n2 { grid-template-columns:1fr 1fr; }
.bubble .media div { aspect-ratio:1; background:repeating-linear-gradient(135deg,#d9ded2 0 8px,#e2e6dc 8px 16px); display:grid; place-items:center; font-size:9.5px; color:#7c8673; text-align:center; padding:3px; overflow-wrap:anywhere; }
.bubble .time { display:block; text-align:right; font-size:10px; color:#a2aa98; margin-top:2px; }
.bubble .pusto { color:#a3ab99; }
.kb { display:grid; gap:4px; margin-top:4px; max-width:92%; }
.kb div { background:#ffffffa6; border-radius:8px; padding:7px 8px; text-align:center; font-size:12.5px; color:#2d5e86; position:relative; }
.kb div.link::after { content:"↗"; position:absolute; top:2px; right:5px; font-size:9px; }
.phone .then { margin:7px 0 2px; font-size:10.5px; color:#738069; text-align:center; }
.check-list { list-style:none; margin:0; padding:0; }
.check-list li { display:flex; gap:8px; padding:8px 4px; border-bottom:1px solid #f0f2ec; font-size:12.5px; cursor:pointer; border-radius:6px; }
.check-list li:hover { background:#f7f9f4; }
.check-list li .mk { flex:none; width:18px; text-align:center; font-weight:700; }
.check-list li.oshibka .mk { color:var(--red); }
.check-list li.predupr .mk { color:var(--yellow); }
.check-list li.ok { cursor:default; color:#4c6b3e; }
.check-list li.ok .mk { color:#5f8a4c; }
.check-list li small { display:block; color:#98a08e; font-size:11px; }
.check-summary { margin:0 0 6px; padding:9px 11px; border-radius:9px; font-size:12.5px; }
.check-summary.good { background:#e9f1e2; color:#45603a; }
.check-summary.bad { background:var(--red-soft); color:var(--red); }
dialog { width:460px; max-width:calc(100vw - 32px); max-height:calc(100vh - 80px); border:1px solid #dce3d3; border-radius:16px; padding:22px; color:var(--ink); box-shadow:0 16px 70px #1e2b1b22; }
dialog::backdrop { background:#2a34281c; backdrop-filter:blur(2px); }
.detail-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
.detail-top h2 { margin:0; font-size:16px; font-weight:600; }
.detail-body { font-size:13px; line-height:1.6; }
.detail-body p { margin:0 0 10px; }
.detail-body ul.spisok { margin:0 0 10px; padding-left:18px; }
.detail-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:16px; flex-wrap:wrap; }
.detail-actions button { height:32px; padding:0 14px; border-radius:8px; border:1px solid #d3dbcb; background:white; }
.detail-actions button.primary { background:var(--green); border-color:var(--green); color:white; }
.log { list-style:none; margin:0; padding:0; max-height:46vh; overflow:auto; font-size:12px; }
.log li { display:flex; gap:10px; padding:6px 0; border-bottom:1px solid #f0f2ec; align-items:baseline; }
.log time { flex:none; width:96px; color:#8a937f; font-variant-numeric:tabular-nums; }
.log .kto { flex:none; width:64px; color:#5f6a57; }
.log li .deystvie { flex:1; }
.log li button { flex:none; height:26px; padding:0 9px; border-radius:7px; border:1px solid #d3dbcb; background:white; font-size:11.5px; }
.ekr-spisok { list-style:none; margin:0; padding:0; max-height:46vh; overflow:auto; }
.ekr-spisok li { padding:7px 0; border-bottom:1px solid #f0f2ec; font-size:12px; }
.ekr-spisok li b { display:block; font-size:12.5px; }
.ekr-spisok li span { color:#6d7765; overflow-wrap:anywhere; }
@media(max-width:1100px) { .hint { display:none; } .topline { max-width:calc(100vw - 48px); top:66px; } }
@media(max-width:540px) { .topline { left:16px; } .toolbar { bottom:16px; } .toolbar.left { left:12px; } .toolbar.right { right:12px; } .toolbar.top { left:12px; right:12px; top:10px; overflow-x:auto; } .toolbar button { padding:0 8px; font-size:11px; } .zoom-value { display:none; } .float { left:12px !important; right:12px; width:auto; top:auto !important; bottom:70px; max-height:60vh; } }
@media(prefers-reduced-motion:reduce) { .card,.wire { transition:none; } }