/* Редактор трубопроводов — тёмная инженерная тема */
:root{
  --bg:#0d1014; --bg2:#141a21; --panel:#171e26; --panel2:#1d252f;
  --line:#28323e; --line2:#374553;
  --fg:#dde5ee; --fg2:#93a3b5; --fg3:#66768a;
  --acc:#4da3ff; --acc2:#2b7fd4;
  --ok:#3ecf8e; --warn:#f5a524; --err:#ff5d5d;
  --pipe:#7fa6c9;
  --r:6px; --h:26px;
  --mono:"JetBrains Mono","Cascadia Mono",Consolas,monospace;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:13px/1.45 "Segoe UI",Inter,system-ui,sans-serif;
  display:flex; flex-direction:column; overflow:hidden;
}
button,input,select,textarea{font:inherit;color:inherit}
/* Ручной ввод должен хорошо читаться на тёмном фоне во всех формах и модальных окнах. */
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
textarea{
  color:#f5f9ff; caret-color:#69b7ff; background-color:#18232e; border-color:#3d5268;
}
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"])::placeholder,
textarea::placeholder{color:#8fa3b8;opacity:1}
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):focus,
textarea:focus{
  color:#fff; background:#111d29; border-color:#5aaeff; outline:none;
  box-shadow:0 0 0 2px #4da3ff33;
}
input[readonly],textarea[readonly]{color:#a9b8c8;background-color:#151b23}
input:disabled,textarea:disabled{opacity:.65}
textarea.high-contrast-input{
  width:100%;min-height:150px;padding:8px 9px;resize:vertical;
  border:1px solid #3d5268;border-radius:4px;font-family:var(--mono);line-height:1.55;
}

/* ---------------------------------------------------------------- верхняя панель */
.topbar{
  display:flex; align-items:center; gap:14px; padding:6px 10px;
  background:linear-gradient(180deg,#1a222c,#141a21);
  border-bottom:1px solid var(--line); flex:0 0 auto; flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:10px;font-size:13px;white-space:nowrap}
.brand-logo{display:block;width:305px;height:44px;object-fit:contain;object-position:left center;flex:0 0 auto}
.proj-name{
  background:var(--panel2); border:1px solid var(--line); border-radius:var(--r);
  padding:3px 8px; width:210px; margin-left:8px;
}
.proj-name:focus{outline:none;border-color:var(--acc)}
.tools{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.workspace-tabs{display:flex;align-self:stretch;align-items:stretch;gap:2px}
.workspace-tab{padding:0 13px;border:0;border-bottom:2px solid transparent;background:transparent;
  color:var(--fg3);cursor:pointer;font-weight:600}
.workspace-tab:hover{color:var(--fg);background:#1c2631}
.workspace-tab.active{color:var(--fg);border-bottom-color:var(--acc);background:#1d2732}
.top-utility-actions{display:flex;gap:4px;margin-left:auto;align-items:center}
.utility-btn{border:1px solid var(--line);white-space:nowrap}
.auth-user{max-width:170px;overflow:hidden;text-overflow:ellipsis;color:var(--fg2);font-size:11px;white-space:nowrap}
.auth-gate{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:#090e14f2;backdrop-filter:blur(8px)}
.auth-gate[hidden]{display:none}
.auth-card{width:min(380px,calc(100vw - 32px));display:grid;gap:14px;padding:28px;background:var(--panel);border:1px solid var(--line2);border-radius:12px;box-shadow:0 24px 80px #000c}
.auth-card h1{margin:2px 0 0;font-size:22px}.auth-card p{margin:-8px 0 5px;color:var(--fg3)}
.auth-card label{display:grid;gap:6px;color:var(--fg2);font-size:12px}.auth-card input{width:100%;box-sizing:border-box;padding:9px 10px;border-radius:5px}
.auth-brand{display:flex;align-items:center;justify-content:center;min-width:0;width:100%}.auth-logo{display:block;width:340px;max-width:100%;height:58px;object-fit:contain;object-position:center}.auth-card .btn{height:36px;padding:0 12px;line-height:1.2}.auth-error{min-height:18px;color:#ff9d9d;font-size:12px}
.auth-switch{border-color:var(--line2);background:#121a22;color:var(--fg2)}.auth-switch:hover{background:#202c38;color:var(--fg)}
.help-menu-popover{left:auto;right:0}
.app-menu{position:relative}
.menu-trigger{border:1px solid var(--line);background:var(--panel);color:var(--fg);padding:0 10px}
.menu-trigger span{color:var(--fg3);margin-left:4px}
.app-menu.open .menu-trigger{background:#22303d;border-color:var(--acc)}
.menu-popover{display:none;position:absolute;z-index:30;top:calc(100% + 6px);left:0;
  min-width:255px;max-width:340px;padding:6px;background:var(--panel);border:1px solid var(--line);
  border-radius:7px;box-shadow:0 12px 30px #0008}
.app-menu.open .menu-popover{display:block}
.menu-title{padding:6px 8px 4px;color:var(--fg3);font-size:10px;text-transform:uppercase;letter-spacing:.7px}
.menu-list{display:flex;flex-direction:column}
.menu-item{display:flex;align-items:center;gap:14px;width:100%;min-height:28px;padding:5px 8px;
  border:0;border-radius:4px;background:transparent;color:var(--fg2);cursor:pointer;text-align:left}
.menu-item:hover,.menu-item.active{background:#22303d;color:var(--fg)}
.menu-item kbd{margin-left:auto;padding:1px 4px;border:1px solid var(--line);border-radius:3px;
  background:var(--panel2);color:var(--fg3);font:10px var(--mono)}
.menu-separator{height:1px;margin:6px 3px;background:var(--line)}
.menu-hint{padding:6px 8px;color:var(--fg3);font-size:11px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; text-align:center; line-height:1.1;
  height:var(--h); min-width:28px; padding:0 9px; border:1px solid #354352;
  background:#18222c; border-radius:4px; cursor:pointer; color:#b8c5d2;
  box-shadow:0 1px 1px #0005; transition:background .12s,border-color .12s,color .12s;
}
.btn:hover{background:#253544;border-color:#50657a;color:var(--fg)}
.btn:disabled,.btn[aria-disabled="true"]{
  opacity:1;cursor:not-allowed;background:#131b23;border-color:#2b3743;color:#69798a;
  box-shadow:inset 0 0 0 1px #0d141b;filter:saturate(.45);
}
.btn:disabled:hover,.btn[aria-disabled="true"]:hover{background:#131b23;border-color:#2b3743;color:#69798a}
.btn.active{background:var(--acc2);border-color:#62afff;color:#fff}
.btn.primary{background:var(--acc2);border-color:#438fd9;color:#fff}
.btn.primary:hover{background:var(--acc)}
.btn.primary:disabled{background:#203c57;border-color:#315575;color:#849bb0}
.btn.wide{width:100%;border:1px solid var(--line);margin-top:6px}
.btn.danger:hover{background:#5b2020;color:#ffd2d2}
.snapbar{display:flex;gap:12px;align-items:center;margin-left:auto;color:var(--fg2)}
.chk{display:flex;gap:5px;align-items:center;cursor:pointer;user-select:none}
.num{display:flex;gap:5px;align-items:center}
.num input{width:64px;background:var(--panel2);border:1px solid var(--line);
  border-radius:4px;padding:2px 6px;font-family:var(--mono)}

/* ---------------------------------------------------------------- оборудование */
.equipment-workspace{flex:1 1 auto;overflow:auto;padding:28px;max-width:1360px;width:100%;margin:0 auto}
.equipment-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  padding:4px 0 24px;border-bottom:1px solid var(--line)}
.equipment-head h1{font-size:24px;margin:0 0 5px}.equipment-head p{margin:0;color:var(--fg2)}
.equipment-actions{display:flex;gap:7px;flex-wrap:wrap}.equipment-actions .btn{border:1px solid var(--line);height:32px}

/* ----------------------------------------------------- справочники и помощь */
.catalog-workspace,.help-workspace{flex:1 1 auto;overflow:auto;padding:24px;max-width:1800px;width:100%;margin:0 auto}
.catalog-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px;margin-top:18px;min-height:calc(100vh - 155px)}
.catalog-editor-panel,.catalog-tree-panel{border:1px solid var(--line);border-radius:8px;background:var(--panel);overflow:hidden}
.catalog-editor-panel{display:flex;flex-direction:column;min-width:0}
.catalog-editor-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}
.catalog-editor-head h2,.catalog-tree-panel h2{margin:0;font-size:15px}.catalog-editor-head p{margin:3px 0 0;color:var(--fg3)}
.catalog-tree-panel h2{padding:15px;border-bottom:1px solid var(--line)}
.catalog-tree{padding:7px;max-height:calc(100vh - 210px);overflow:auto}
.catalog-tree-group{padding:9px 8px 4px;color:var(--fg3);font-size:10px;text-transform:uppercase;letter-spacing:.7px}
.catalog-tree-branch>summary{display:flex;justify-content:space-between;gap:10px;cursor:pointer;padding:7px 8px;border-radius:4px;color:var(--fg);font-weight:650;list-style:none}
.catalog-tree-branch>summary::-webkit-details-marker{display:none}.catalog-tree-branch>summary:before{content:'▸';width:13px;color:var(--fg3)}.catalog-tree-branch[open]>summary:before{content:'▾'}
.catalog-tree-branch>summary span{flex:1}.catalog-tree-branch>summary small{color:var(--fg3);font-weight:400}.catalog-tree-branch>summary:hover{background:#1d2732}
.catalog-tree-children{margin-left:13px;padding-left:6px;border-left:1px solid var(--line)}
.catalog-tree-item{display:flex;width:100%;justify-content:space-between;gap:10px;padding:7px 9px;border:0;border-radius:4px;background:transparent;color:var(--fg2);text-align:left;cursor:pointer}
.catalog-tree-item:hover,.catalog-tree-item.active{background:#22303d;color:var(--fg)}.catalog-tree-item small{color:var(--fg3)}
.catalog-table-wrap{overflow:auto;flex:1}.catalog-table{border-collapse:separate;border-spacing:0;min-width:100%;font:12px var(--mono)}
.catalog-table th{position:sticky;top:0;z-index:2;background:var(--panel2);color:#8ca5c3;text-align:left;padding:8px;border-bottom:1px solid var(--line);white-space:nowrap}
.catalog-table td{padding:4px;border-right:1px solid #28323e80;border-bottom:1px solid #28323e80;vertical-align:top}
.catalog-cell{min-width:110px;width:100%;padding:5px 7px;border:1px solid transparent;border-radius:3px;background:#10161d;color:var(--fg)}
.catalog-cell:focus{outline:none;border-color:var(--acc)}.catalog-row-remove{color:#ff8585;border:1px solid var(--line)}
.flow-graph{display:grid;grid-template-columns:minmax(190px,1fr) 36px minmax(210px,1fr) 36px minmax(210px,1fr) 36px minmax(210px,1fr);gap:8px;align-items:center;margin-top:24px}
.flow-column{align-self:stretch;padding:12px;border:1px solid var(--line);border-radius:9px;background:var(--panel)}
.flow-column h3{margin:0 0 10px;color:var(--fg2)}.flow-node{padding:11px;margin:8px 0;border:1px solid var(--line2);border-radius:6px;background:#10161d;font-weight:650}
.flow-node small{display:block;margin-top:3px;color:var(--fg3);font-weight:400}.flow-node.source{border-left:4px solid #4da3ff}.flow-node.function{border-left:4px solid #a56cff}.flow-node.legacy{border-left:4px solid #f5a524}.flow-node.result{border-left:4px solid #3ecf8e}
.flow-arrow{text-align:center;color:var(--acc);font-size:30px;font-weight:700}.help-note{margin-top:18px;padding:14px;border:1px solid var(--line);border-radius:7px;background:var(--panel)}
.guide-grid{display:grid;grid-template-columns:repeat(2,minmax(280px,1fr));gap:12px;margin-top:22px}.guide-grid section{padding:16px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}.guide-grid h2{margin:0 0 8px;font-size:15px}.guide-grid p{margin:0;color:var(--fg2)}
.pipeline-map{max-width:1500px;margin:24px auto}.pipeline-map>h2{margin:28px 0 10px;padding-bottom:7px;border-bottom:1px solid var(--line);font-size:16px}
.pipeline-row{display:grid;grid-template-columns:minmax(220px,1fr) minmax(260px,.8fr) minmax(250px,1fr);gap:12px;align-items:center;margin:9px 0}
.pipeline-row .flow-node{margin:0;min-height:72px}.flow-edge{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--fg3);text-align:center}.flow-edge code{padding:6px 8px;border-radius:4px;background:#10161d;color:#9cc9ff}.flow-edge span{font-size:24px;color:var(--acc)}
.pipeline-branches{display:grid;grid-template-columns:repeat(2,minmax(300px,1fr));gap:8px;margin:12px 0}.pipeline-branches>div{display:flex;gap:8px;padding:10px 12px;border:1px solid var(--line);border-left:4px solid #a56cff;border-radius:5px;background:var(--panel)}.pipeline-branches b{min-width:150px}.pipeline-branches span{color:var(--fg2)}
.pipeline-chain{display:flex;align-items:center;gap:8px;overflow:auto;padding:10px 0}.pipeline-chain .flow-node{min-width:145px;margin:0}.pipeline-chain>span{font-size:22px;color:var(--acc)}
.pipeline-results{display:grid;grid-template-columns:repeat(3,minmax(230px,1fr));gap:10px}.pipeline-results .flow-node{margin:0}
.menu-popover.help-menu-popover{position:fixed;left:auto;right:8px;top:48px;
  width:min(340px,calc(100vw - 16px));max-width:calc(100vw - 16px);
  max-height:calc(100vh - 64px);overflow:auto;overscroll-behavior:contain}
.pipeline-intro{max-width:1500px;margin:20px auto 10px;color:var(--fg2)}
.pipeline-scroll{overflow:auto;max-width:100%;padding:8px 4px 18px;overscroll-behavior:contain}
.pipeline-graph-v2{position:relative;isolation:isolate;display:grid;
  grid-template-columns:repeat(7,minmax(245px,1fr));gap:34px;align-items:stretch;
  min-width:1960px;min-height:1050px;padding:12px}
.pipeline-links{position:absolute;inset:0;width:100%;height:100%;z-index:0;overflow:visible;pointer-events:none}
.pipeline-links path.flow-link{fill:none;stroke:#4d89bd;stroke-width:1.6;opacity:.48;marker-end:url(#flowArrow)}
.pipeline-links path.flow-link.active{stroke:#75c2ff;stroke-width:3;opacity:1;filter:drop-shadow(0 0 3px #4da3ff)}
.pipeline-links marker path{fill:#4da3ff}
.pipeline-column{position:relative;z-index:1;min-width:0;padding:10px;border:1px solid var(--line);
  border-radius:9px;background:#141a21e8}
.pipeline-column>h2{position:sticky;top:-24px;z-index:3;margin:-10px -10px 10px;padding:11px 10px;
  min-height:52px;border-bottom:1px solid var(--line);border-radius:8px 8px 0 0;
  background:#1d252ff2;color:#b9d8fb;font-size:14px}
.pipeline-column .flow-node{position:relative;z-index:2;min-height:66px;margin:9px 0;padding:10px;
  overflow-wrap:anywhere;transition:border-color .12s,box-shadow .12s,transform .12s}
.pipeline-column .flow-node:hover,.pipeline-column .flow-node.flow-active{border-color:#7bc1ff;
  box-shadow:0 0 0 2px #4da3ff35,0 5px 18px #0006;transform:translateY(-1px)}
.flow-node.artifact{border-left:4px solid #34c6c3}.flow-node.final{border-left:4px solid #3ecf8e}
.pipeline-column code{white-space:normal}
.pipeline-scroll::-webkit-scrollbar{height:12px}.pipeline-scroll::-webkit-scrollbar-thumb{background:#40556b;border-radius:8px}
.guide-sections{max-width:1500px;margin:22px auto;display:grid;grid-template-columns:repeat(2,minmax(340px,1fr));gap:12px}.guide-sections section{padding:17px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}.guide-sections h2{margin:0 0 11px;font-size:16px;color:#b9d8fb}.guide-sections dl{display:grid;grid-template-columns:minmax(130px,.42fr) 1fr;gap:6px 12px;margin:0}.guide-sections dt{font-weight:700;color:var(--fg)}.guide-sections dd{margin:0;color:var(--fg2)}.guide-sections ul{margin:0;padding-left:20px;color:var(--fg2)}.guide-sections li+li{margin-top:6px}
@media(max-width:1050px){.catalog-layout{grid-template-columns:1fr}.catalog-tree-panel{grid-row:1}.flow-graph{display:flex;flex-direction:column}.flow-column{width:100%}.flow-arrow{transform:rotate(90deg)}.guide-grid{grid-template-columns:1fr}}
@media(max-width:1050px){.pipeline-row{grid-template-columns:1fr}.flow-edge{flex-direction:column}.flow-edge span{transform:rotate(90deg)}.pipeline-branches,.pipeline-results,.guide-sections{grid-template-columns:1fr}}
@media(max-width:700px){.menu-popover.help-menu-popover{right:8px!important;left:8px!important;width:auto;max-width:none}.pipeline-graph-v2{grid-template-columns:repeat(7,225px);min-width:1785px}}
.equipment-section{margin-top:26px}.equipment-section h2{margin:0 0 11px;font-size:15px}
.project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.project-tree{max-width:920px;border:1px solid var(--line);border-radius:8px;background:var(--panel);overflow:hidden}
.project-tree-row{display:flex;align-items:center;gap:8px;min-height:35px;padding:6px 12px 6px calc(12px + var(--depth, 0) * 24px);
  border-bottom:1px solid #28323e80;cursor:pointer;user-select:none}
.project-tree-row:last-child{border-bottom:0}.project-tree-row:hover{background:#1e2833}
.project-tree-row.selected{background:#20344a;box-shadow:inset 3px 0 var(--acc)}
.project-tree-row.calculation-complete .project-tree-name{color:#6fd89b}
.project-tree-row.calculation-running{background:#501b22;box-shadow:inset 4px 0 #ff4d5f}
.project-tree-row.calculation-running:hover{background:#61202a}
.project-tree-row.calculation-running .project-tree-name,
.project-tree-row.calculation-running .project-tree-kind{color:#ff7180;font-weight:800}
.project-tree-row.calculation-failed .project-tree-kind{color:#f1a35b}
.project-tree-toggle{width:17px;height:22px;padding:0;border:0;background:transparent;color:var(--fg2);cursor:pointer}
.project-tree-toggle:hover:not(:disabled){color:var(--acc)}.project-tree-toggle:disabled{cursor:default}
.project-tree-icon{width:17px;text-align:center;color:var(--acc)}
.project-tree-name{font-weight:600}.project-tree-kind{margin-left:auto;color:var(--fg3);font-size:11px}
.project-context-menu{position:fixed;z-index:50;min-width:150px;padding:5px;background:var(--panel);
  border:1px solid var(--line);border-radius:6px;box-shadow:0 12px 30px #0009}
.project-context-menu button{display:block;width:100%;padding:6px 8px;border:0;border-radius:4px;background:transparent;
  color:var(--fg2);text-align:left;cursor:pointer}.project-context-menu button:hover{background:#22303d;color:var(--fg)}
.project-context-menu button.danger:hover{background:#5b2020;color:#ffd2d2}
.project-card{min-height:140px;padding:15px;border:1px solid var(--line);border-radius:8px;
  background:linear-gradient(145deg,var(--panel),var(--panel2));cursor:pointer;text-align:left;color:var(--fg)}
.project-card:hover{border-color:var(--acc);box-shadow:0 6px 18px #0004}
.project-card .project-kind{font-size:10px;text-transform:uppercase;letter-spacing:.65px;color:var(--acc)}
.project-card h3{margin:8px 0 6px;font-size:14px}.project-card p{margin:0;color:var(--fg2);font-size:12px;line-height:1.45}
.project-card.empty{cursor:default;color:var(--fg3);border-style:dashed;background:transparent}

/* ---------------------------------------------------------------- раскладка */
.constructor-workspace{display:flex;flex:1 1 auto;min-height:0;overflow:hidden}
main{flex:1 1 auto;display:grid;grid-template-columns:250px 1fr 320px;min-height:0}
aside{display:flex;flex-direction:column;min-height:0;background:var(--bg2);gap:1px}
aside.left{border-right:1px solid var(--line)}
aside.right{border-left:1px solid var(--line)}
.panel{background:var(--panel);display:flex;flex-direction:column;min-height:0;
  flex:0 0 auto}
.panel.grow{flex:1 1 auto;min-height:120px}
.phead{
  padding:6px 10px;font-size:11px;text-transform:uppercase;letter-spacing:.7px;
  color:var(--fg3);border-bottom:1px solid var(--line);display:flex;
  align-items:center;justify-content:space-between;gap:6px;flex:0 0 auto;
}
.phead-actions{display:flex;gap:4px}
.mini-input{background:var(--panel2);border:1px solid var(--line);border-radius:4px;
  padding:1px 6px;width:100px;font-size:11px}

/* ---------------------------------------------------------------- палитра */
.palette{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:8px;
  max-height:42vh;overflow:auto}
.pal-item{
  display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel2);
  cursor:pointer;font-size:10.5px;color:var(--fg2);text-align:center;
}
.pal-item:hover{border-color:var(--acc);color:var(--fg);background:#1f2a36}
.pal-item svg{width:30px;height:22px}
.pal-item .st{stroke:var(--pipe);stroke-width:3.4;fill:none;stroke-linecap:round}
.pal-item:hover .st{stroke:var(--acc)}
.palette-hint{padding:0 10px 9px;color:var(--fg3);font-size:11px;line-height:1.35}

/* ---------------------------------------------------------------- дерево */
.tree{overflow:auto;flex:1 1 auto;padding:4px 0}
.tnode{
  display:flex;align-items:center;gap:6px;padding:3px 10px;cursor:pointer;
  border-left:2px solid transparent;white-space:nowrap;
}
.tnode:hover{background:#1e2833}
.tnode.sel{background:#20344a;border-left-color:var(--acc);color:#fff}
.tnode .ttag{font-family:var(--mono);font-size:11px;color:var(--fg)}
.tnode .ttype{color:var(--fg3);font-size:11px;overflow:hidden;text-overflow:ellipsis}
.tnode .dot{width:8px;height:8px;border-radius:2px;flex:0 0 auto}
.tgroup-head{padding:5px 10px 3px;color:var(--fg3);font-size:11px;
  text-transform:uppercase;letter-spacing:.6px;position:sticky;top:0;
  background:var(--panel);border-bottom:1px solid var(--line)}
.tnode .eye{margin-left:auto;color:var(--fg3);font-size:11px}

/* ---------------------------------------------------------------- линии */
.lines{max-height:170px;overflow:auto}
.lrow{display:flex;align-items:center;gap:6px;padding:4px 10px;cursor:pointer}
.lrow:hover{background:#1e2833}
.lrow.sel{background:#20344a}
.lrow .sw{width:12px;height:12px;border-radius:3px;flex:0 0 auto}
.lrow .lname{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow .ldn{font-family:var(--mono);font-size:11px;color:var(--fg3)}

/* ---------------------------------------------------------------- вьюпорт */
.viewport{position:relative;min-width:0;background:
  radial-gradient(ellipse at 50% 0%,#18222c 0%,#0d1014 70%)}
#canvasHost{position:absolute;inset:0}
#canvasHost canvas{display:block}
.hud{position:absolute;pointer-events:none;font-family:var(--mono);font-size:11px;
  color:var(--fg2);background:#0d1014b0;border:1px solid var(--line);
  border-radius:var(--r);padding:6px 9px;backdrop-filter:blur(3px);max-width:46%}
.hud-tl{left:10px;top:10px}
.hud-tr{right:10px;top:10px;pointer-events:auto;max-height:40%;overflow:auto}
.hud-bl{left:10px;bottom:10px}
.hud b{color:var(--fg)}
.hud .w-warn{color:var(--warn)}
.hud .w-err{color:var(--err)}
.hud .w-info{color:var(--fg3)}
.hud .wrow{cursor:pointer}
.hud .wrow:hover{color:#fff}
.routebar{
  position:absolute;left:50%;transform:translateX(-50%);bottom:14px;display:flex;
  gap:12px;align-items:center;background:#141a21ee;border:1px solid var(--line2);
  border-radius:8px;padding:7px 12px;box-shadow:0 8px 30px #0008
}
.routebar label{display:flex;gap:5px;align-items:center;color:var(--fg2)}
.routebar select,.routebar input{background:var(--panel2);border:1px solid var(--line);
  border-radius:4px;padding:2px 6px;font-family:var(--mono)}
.routebar input{width:80px}
.rt-info{color:var(--fg3);font-size:11px}

/* ---------------------------------------------------------------- шкала зума */
.zoombar{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  z-index:20;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  background:#0d1014cc;border:1px solid var(--line);border-radius:8px;
  padding:8px 6px;backdrop-filter:blur(3px);user-select:none
}
.zbtn{
  width:24px;height:24px;border:1px solid var(--line);border-radius:5px;
  background:var(--panel2);color:var(--fg2);cursor:pointer;line-height:1;
  font-size:15px;display:flex;align-items:center;justify-content:center;padding:0
}
.zbtn:hover{border-color:var(--acc);color:#fff;background:#22303d}
.zbtn.zfit{font-size:12px;margin-top:2px}
.zbtn.zplane{font:700 10px/1 var(--mono);margin-top:2px}
.zbtn.zplane.active{border-color:var(--acc);background:#244b70;color:#fff}
#zoomRange{
  -webkit-appearance:slider-vertical;appearance:slider-vertical;
  writing-mode:vertical-lr;direction:rtl;
  width:24px;height:150px;margin:0;background:transparent;cursor:ns-resize;accent-color:var(--acc)
}
.zval{
  font-family:var(--mono);font-size:10px;color:var(--fg3);
  min-width:44px;text-align:center
}

/* ----------------------------------------------------------- результаты */
.results-workspace{padding:18px 22px;overflow:auto;height:calc(100vh - 52px)}
.results-layout{display:grid;grid-template-columns:285px minmax(560px,1fr) 330px;gap:14px;align-items:start}
.results-controls{position:sticky;top:0;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:16px}
.results-controls h2{margin:0 0 18px}.results-controls label{display:grid;grid-template-columns:1fr auto;gap:6px;margin:0 0 20px;color:var(--fg2)}
.results-controls input[type=range]{grid-column:1/-1;width:100%;accent-color:var(--acc)}
.results-controls output{font-family:var(--mono);color:var(--fg)}
.result-kpi{border-top:1px solid var(--line);padding:14px 0 4px;display:flex;justify-content:space-between;gap:12px}
.result-kpi span{color:var(--fg3)}.result-kpi strong{color:#6fd89b;text-align:right}
.resource-legend{border-top:1px solid var(--line);margin-top:10px;padding-top:12px;display:grid;gap:8px;font-size:12px;color:var(--fg2)}
.resource-legend span{display:flex;align-items:center;gap:8px}.resource-legend i{width:22px;height:5px;border-radius:3px;display:inline-block}
.resource-good{background:#78bed4}.resource-warning{background:#ffa43a}.resource-danger{background:#ff3f4e}.resource-fixed{background:#7a8490}
.results-content{min-width:0}.result-chart-grid{display:grid;gap:14px;margin-top:14px}
.result-chart{display:block;width:100%;height:250px;background:#0c1117;border-radius:6px;overflow:visible}
.result-chart text{fill:#8092a6;font:11px var(--mono)}
@media(max-width:1250px){.results-layout{grid-template-columns:260px minmax(520px,1fr)}.result-card{grid-column:1/-1;position:static!important}}
@media(max-width:900px){.results-layout{grid-template-columns:1fr}.results-controls,.results-navigator,.result-card{position:static!important}}

.result-kpi-strip{display:grid;grid-template-columns:repeat(5,minmax(130px,1fr));gap:10px;margin:0 0 14px}
.result-kpi-strip>div{background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:11px 13px;display:grid;gap:6px}
.result-kpi-strip span{font-size:11px;color:var(--fg3);text-transform:uppercase}.result-kpi-strip strong{font:700 20px var(--mono);color:#7bdcb5}
.results-navigator,.result-card{position:sticky;top:0;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:13px;max-height:calc(100vh - 84px);overflow:auto}
.results-navigator h2,.result-card h2{margin:0;font-size:15px}.wide-input{width:100%;box-sizing:border-box;margin:12px 0 8px;background:var(--panel2);border:1px solid var(--line);color:var(--fg);padding:8px;border-radius:4px}
.result-filter-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px}.result-filter-grid select{min-width:0;background:var(--panel2);border:1px solid var(--line);color:var(--fg2);padding:6px;border-radius:4px}
.result-counter{font-size:11px;color:var(--fg3);padding:10px 0}.result-nav-list{display:grid;gap:2px}.result-nav-group{padding:8px 6px 4px;color:#89a7c3;font-size:11px;text-transform:uppercase;border-bottom:1px solid var(--line)}
.result-nav-row{border:0;background:transparent;color:var(--fg2);padding:7px 8px;text-align:left;border-radius:4px;display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:6px;cursor:pointer;font-size:12px}.result-nav-row:hover,.result-nav-row.selected{background:#26384b;color:#fff}.result-nav-row .tg{font-family:var(--mono)}
.status-dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:5px}.status-dot.good{background:#78bed4}.status-dot.warning{background:#ffa43a}.status-dot.danger{background:#ff3f4e}.status-dot.fixed{background:#7a8490}.status-dot.unknown{background:#506174}
.inline-controls{position:static;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 0 14px}.inline-controls label{margin:0}.horizontal{display:flex;flex-wrap:wrap;gap:14px;border:0;margin:8px 0 0;padding:0}
.result-hover-card{position:absolute;z-index:30;left:12px;bottom:12px;max-width:360px;background:#07101aeb;border:1px solid #39516a;border-radius:6px;padding:9px 11px;color:#dcecff;font:12px var(--mono);pointer-events:none;white-space:pre-line}
.chart-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.chart-head h2{margin:0}.chart-actions{display:flex;gap:4px}.btn.mini{padding:4px 7px;font-size:11px}.result-chart-box{position:relative;overflow:hidden}.chart-series{display:flex;flex-wrap:wrap;gap:10px;margin:7px 0}.chart-series label{font-size:11px;color:var(--fg2);display:flex;gap:4px;align-items:center}.chart-series input{accent-color:var(--series-color)}
.result-chart-box.calculation-pending .result-chart{opacity:.28;filter:saturate(.35)}
.result-chart-box.calculation-pending::after{content:'Ожидание актуального расчёта…';position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);z-index:2;padding:7px 11px;border:1px solid var(--line);border-radius:6px;background:rgba(12,17,23,.92);color:var(--fg2);font-size:12px;pointer-events:none}
.chart-tooltip{position:absolute;z-index:8;background:#07101af2;border:1px solid #4d6680;border-radius:5px;padding:6px 8px;color:#eef6ff;font:11px var(--mono);pointer-events:none;white-space:nowrap}.result-chart{cursor:crosshair}.result-chart .data-point{cursor:pointer}.result-chart .data-point.selected{stroke:#fff;stroke-width:3}.result-chart .plot-hit{cursor:grab}.result-chart .plot-hit:active{cursor:grabbing}
.result-table-wrap{max-height:440px;overflow:auto;border:1px solid var(--line);border-radius:5px}.result-table{border-collapse:collapse;width:100%;font-size:12px}.result-table th{position:sticky;top:0;background:#1d2834;color:#9cb2c8;padding:8px;text-align:left}.result-table td{padding:7px 8px;border-top:1px solid var(--line);color:var(--fg2)}.result-table tr{cursor:pointer}.result-table tbody tr:hover,.result-table tr.selected{background:#26384b}.result-pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:8px;color:var(--fg3);font-size:12px}
.result-card-body{display:grid;gap:13px;margin:12px 0}.card-group{border-top:1px solid var(--line);padding-top:9px}.card-group h3{margin:0 0 7px;color:#7ea2c5;font-size:11px;text-transform:uppercase}.card-field{display:grid;grid-template-columns:minmax(0,1fr) minmax(90px,1fr);gap:8px;align-items:center;margin:5px 0;font-size:11px}.card-field label{color:var(--fg3)}.card-field span{color:var(--fg);font-family:var(--mono);text-align:right;word-break:break-word}.card-field input,.card-field select{min-width:0;background:var(--panel2);border:1px solid var(--line);border-radius:3px;color:var(--fg);padding:5px}.result-changelog{margin-top:12px;font-size:10px;color:var(--fg3)}
.audit-list{display:grid;gap:7px}.audit-item{display:grid;grid-template-columns:110px 70px minmax(0,1fr);gap:8px;border:1px solid var(--line);border-left:3px solid #f1c75b;border-radius:4px;padding:8px;font-size:11px}.audit-item b{color:#f1c75b}.audit-item p{margin:0;color:var(--fg2)}.audit-item small{grid-column:3;color:var(--fg3)}.audit-ok{padding:12px;color:#6fd89b;border:1px solid #315844;border-radius:5px}
@media(max-width:900px){.result-kpi-strip{grid-template-columns:1fr 1fr}.inline-controls{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- правые вкладки */
.tabs{display:flex;background:var(--panel);border-bottom:1px solid var(--line);flex:0 0 auto}
.tab{flex:1;height:30px;background:transparent;border:0;border-bottom:2px solid transparent;
  color:var(--fg3);cursor:pointer;font-size:12px}
.tab:hover{color:var(--fg)}
.tab.active{color:#fff;border-bottom-color:var(--acc)}
.tabbody{flex:1 1 auto;overflow:auto;padding:10px;background:var(--panel);min-height:0}

/* ---------------------------------------------------------------- формы свойств */
.grp{margin-bottom:12px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.grp>h4{margin:0;padding:5px 9px;background:var(--panel2);font-size:11px;font-weight:600;
  color:var(--fg3);text-transform:uppercase;letter-spacing:.6px;
  display:flex;justify-content:space-between;align-items:center}
.grp .body{padding:8px 9px;display:grid;grid-template-columns:1fr 1fr;gap:6px 8px}
.grp .body.one{grid-template-columns:1fr}
.f{display:flex;flex-direction:column;gap:3px}
.f.span{grid-column:1/-1}
.f label{font-size:10.5px;color:var(--fg3)}
.f input,.f select,.f textarea{
  background:var(--panel2);border:1px solid var(--line);border-radius:4px;
  padding:3px 7px;width:100%;font-family:var(--mono);font-size:12px}
.f input:focus,.f select:focus{outline:none;border-color:var(--acc);background:#1b242f}
.f input[readonly]{color:var(--fg3);background:#151b23}
.f .unit{position:absolute}
.ro{font-family:var(--mono);font-size:11.5px;color:var(--fg2)}
.ro b{color:var(--fg)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;font-family:var(--mono);
  font-size:11.5px;padding:8px 9px}
.kv span:nth-child(odd){color:var(--fg3)}
.hint{color:var(--fg3);font-size:11px;padding:4px 9px 8px;line-height:1.4}
.rowbtns{display:flex;gap:6px;flex-wrap:wrap;padding:8px 9px}

/* ---------------------------------------------------------------- порты */
.ports{display:flex;flex-direction:column;gap:4px;padding:8px 9px}
.port{display:flex;align-items:center;gap:8px;padding:4px 7px;border-radius:4px;
  border:1px solid var(--line);background:var(--panel2);cursor:pointer;font-size:11.5px}
.port:hover{border-color:var(--acc)}
.port.free{border-left:3px solid var(--ok)}
.port.busy{border-left:3px solid var(--fg3);opacity:.72}
.port .pn{font-family:var(--mono);color:var(--fg)}
.port .pc{font-family:var(--mono);color:var(--fg3);margin-left:auto;font-size:10.5px}

/* ---------------------------------------------------------------- таблицы */
table.tbl{width:100%;border-collapse:collapse;font-size:11.5px}
table.tbl th{position:sticky;top:0;background:var(--panel2);color:var(--fg3);
  text-align:left;font-weight:600;padding:5px 6px;border-bottom:1px solid var(--line);
  font-size:10.5px;text-transform:uppercase;letter-spacing:.4px}
table.tbl td{padding:4px 6px;border-bottom:1px solid #202832;vertical-align:top}
table.tbl tr:hover td{background:#1b2430}
table.tbl td.num,table.tbl th.num{text-align:right;font-family:var(--mono)}
.totrow td{font-weight:700;color:#fff;background:#1e2a36}
.badge{display:inline-block;padding:1px 6px;border-radius:10px;font-size:10px}
.badge.ok{background:#14432f;color:var(--ok)}
.badge.bad{background:#4a1d1d;color:var(--err)}

/* ---------------------------------------------------------------- статус */
.statusbar{
  flex:0 0 auto;display:flex;align-items:center;gap:14px;padding:3px 12px;
  background:#11161c;border-top:1px solid var(--line);color:var(--fg3);
  font-size:11.5px;font-family:var(--mono)
}
.statusbar .spacer{flex:1}
.net.busy{color:var(--acc)}
.net.err{color:var(--err)}

/* ---------------------------------------------------------------- модал/тост */
.modal{position:fixed;inset:0;background:#0008;display:flex;align-items:center;
  justify-content:center;z-index:50;backdrop-filter:blur(2px)}
.modal-box{background:var(--panel);border:1px solid var(--line2);border-radius:8px;
  min-width:460px;max-width:80vw;max-height:80vh;display:flex;flex-direction:column;
  box-shadow:0 20px 60px #000a}
.modal-head{display:flex;justify-content:space-between;align-items:center;
  padding:9px 12px;border-bottom:1px solid var(--line);font-weight:600}
.modal-body{padding:12px;overflow:auto}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:44px;z-index:60;
  background:#1d2733;border:1px solid var(--line2);border-radius:6px;padding:8px 14px;
  box-shadow:0 8px 30px #0008}
.toast.err{border-color:#7a2a2a;color:#ffd2d2}

.filelist{display:flex;flex-direction:column;gap:4px}
.calculation-workspace{flex:1;min-height:0;overflow:auto;padding:20px 28px;background:var(--bg)}
.skeleton-layout{display:grid;grid-template-columns:minmax(360px,1fr) minmax(520px,1.35fr);gap:16px}.skeleton-scheme{width:100%;min-height:300px;background:#0e141a;border:1px solid var(--line);border-radius:6px}.skeleton-link{stroke:#4da3ff;stroke-width:5;stroke-linecap:round}.skeleton-label{fill:#d7e8fb;font:13px var(--mono)}.skeleton-arrow{fill:#7ca7d0;font:20px sans-serif}@media(max-width:1100px){.skeleton-layout{grid-template-columns:1fr}}
.calculation-canvas{position:relative;height:560px;border:1px solid var(--line);border-radius:6px;overflow:hidden}.calculation-canvas #canvasHost{position:absolute;inset:0;width:100%;height:100%}.skeleton-table{min-width:max-content}.skeleton-table th,.skeleton-table td{padding:3px}.skeleton-table td input{width:72px;text-align:center;font-family:var(--mono);font-size:12px}.skeleton-table td:first-child input{width:45px}
.calculation-note{margin:0 0 14px;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:var(--panel2);color:var(--fg2);font-size:12px}
.device-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:4px 0}.device-controls input[type=file]{max-width:280px;font-size:11px}
.device-placement-panel{margin-top:10px;padding:10px;border:1px solid var(--line);border-radius:6px;background:var(--panel2)}
.device-position-list{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.device-position-row{display:grid;grid-template-columns:minmax(90px,.6fr) minmax(110px,.8fr) minmax(150px,1.1fr) minmax(170px,1.2fr) auto;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:5px;background:var(--panel)}
.device-position-row:hover{border-color:#ffd166;background:#1c2631;cursor:pointer}
.device-position-row b{color:#ffd166}.device-position-row span{color:var(--fg2);font-size:12px}.device-position-row .btn{padding:4px 9px}
.device-source-choice{display:flex;flex-direction:column;gap:8px;padding:9px;border:1px solid var(--line);border-radius:5px;background:var(--panel2)}
.device-source-choice input[type=file]{color:var(--fg);padding:6px;border:1px solid var(--line2);border-radius:4px;background:var(--bg)}
.mounting-angle-picker{display:grid;justify-items:center;gap:7px;padding:10px;border:1px solid var(--line2);border-radius:6px;background:#101923}.mounting-angle-picker[hidden]{display:none}.mounting-angle-dial{width:210px;height:210px;cursor:crosshair;touch-action:none;user-select:none}.mounting-angle-ring{fill:#172432;stroke:#6f879e;stroke-width:2}.mounting-angle-zero{stroke:#ffd166;stroke-width:3}.mounting-angle-dial text{fill:#dcecff;font:7px var(--mono)}.mounting-angle-hand{stroke:#ffd166;stroke-width:3;stroke-linecap:round}.mounting-angle-center{fill:#ffd166}.mounting-angle-value{color:#ffd166;font-family:var(--mono)}
@media(max-width:760px){.device-position-row{grid-template-columns:1fr 1fr}.device-position-row .btn{justify-self:end}}
.skeleton-table-frame{position:relative;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--panel)}
.skeleton-table-wrap{overflow-x:hidden;overflow-y:auto;max-height:calc(100vh - 250px);border:0;border-radius:0;scrollbar-gutter:stable}
.skeleton-horizontal-scroll{overflow-x:scroll;overflow-y:hidden;height:18px;border-top:1px solid var(--line);background:#101720;position:relative;z-index:7}.skeleton-horizontal-scroll>div{height:1px;min-width:100%}
.skeleton-zoom-controls{display:flex;align-items:center;gap:4px}.skeleton-zoom-controls .btn{min-width:34px}.skeleton-zoom-controls #skeletonZoomReset{min-width:58px}
.skeleton-table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12px}.skeleton-table th{position:sticky;top:0;background:var(--panel2);color:var(--fg3);padding:8px;text-align:left}.skeleton-table td{padding:6px 8px;border-top:1px solid var(--line)}.skeleton-table input{width:82px;padding:4px;background:var(--bg);border:1px solid var(--line);border-radius:3px;color:var(--fg);font-family:var(--mono)}
.skeleton-table th.skeleton-prev{left:0;z-index:4;box-shadow:2px 0 0 var(--line)}
.skeleton-table td.skeleton-prev{position:sticky;left:0;z-index:2;background:var(--panel);box-shadow:2px 0 0 var(--line)}
.skeleton-table tbody tr:hover td.skeleton-prev{background:var(--panel2)}
.project-create-form{display:flex;flex-direction:column;gap:7px;min-width:420px}
.form-label{display:flex;flex-direction:column;gap:4px;color:var(--fg2);font-size:12px}
.form-label input,.form-label select,.form-label textarea{min-height:31px;padding:4px 7px;background:var(--panel2);border:1px solid var(--line);border-radius:4px}
.source-file-hint{color:var(--fg3);font-size:11px;line-height:1.35}.form-message{min-height:16px;color:#ffb4b4;font-size:12px}
.form-actions{display:flex;justify-content:flex-end;gap:7px;margin-top:5px}.form-actions .btn{border:1px solid var(--line)}
.filerow{display:flex;gap:8px;align-items:center;padding:6px 8px;border:1px solid var(--line);
  border-radius:4px;cursor:pointer;background:var(--panel2)}
.filerow:hover{border-color:var(--acc)}
.filerow .fn{flex:1}
.filerow .fm{color:var(--fg3);font-size:11px;font-family:var(--mono)}

::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#2b3846;border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:#3a4c5e}