:root{--bg:#edf3f8;--panel:#fff;--line:#deebf3;--text:#18384f;--muted:#6a8498;--primary:#0979b7;--primary2:#0c679a;--accent:#ff9a18;--good:#18a96b}
*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,Arial,sans-serif;background:var(--bg);color:var(--text)}
.wrap{max-width:1560px;margin:auto;padding:18px}.hero{background:linear-gradient(120deg,#082d4f,#0d6b98);color:#fff;border-radius:22px;padding:22px 28px;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px}
.brand{font-size:12px;letter-spacing:.24em;font-weight:900;color:#8edcff}h1{margin:8px 0 4px;font-size:28px}.sub{font-size:13px;color:#c8dfed;max-width:900px;line-height:1.45}.badge{background:#def4e8;color:#166c49;padding:6px 10px;border-radius:999px;font-size:11px;font-weight:800;white-space:nowrap}
.grid{display:grid;grid-template-columns:330px minmax(360px,1fr) 380px;gap:14px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:0 4px 20px rgba(21,58,88,.05);min-width:0}h2{margin:0 0 14px;font-size:18px}h3{margin:18px 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:#5e7e93}
label{display:grid;gap:6px;font-size:12px;font-weight:700;color:#3a5d76;margin-bottom:12px}select,input{font:inherit;width:100%;padding:10px 12px;border:1px solid #cadce8;border-radius:10px;background:#f8fbfd;color:#1b425b}button{font:inherit;cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}
.fieldrow{display:grid;grid-template-columns:1fr 1fr;gap:10px}.stack{display:grid;gap:8px}.note{background:#eef6fc;color:#4d728d;border-radius:11px;padding:11px 12px;font-size:12px;line-height:1.45}.dragHelp{padding:10px 13px;margin:8px 0;background:#eaf8ff;border-radius:10px;font-size:13px;color:#245b76}.dragHelp b{color:#055d8b}
.primary{background:var(--primary);color:#fff;border:0;border-radius:11px;padding:12px;font-weight:800}.ghost{border:1px solid #cadae7;background:#fff;color:#285c7f;border-radius:10px;padding:10px}.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.small{font-size:12px}
.catalog{margin-top:15px;border-top:1px solid #e0eaf2;padding-top:15px}.catFilters{display:grid;grid-template-columns:1fr 1fr;gap:8px}.catCount{font-size:12px;color:#607d92;margin:8px 0 10px;line-height:1.4}.catList{max-height:400px;overflow:auto;border:1px solid #dce9f1;border-radius:12px;background:#fbfdff}.catItem{width:100%;border:0;border-bottom:1px solid #e6edf3;background:transparent;text-align:left;padding:10px;display:grid;gap:4px;color:#2b566f}.catItem:hover,.catItem.active{background:#e9f6ff}.catItem strong{font-size:12px;line-height:1.35}.catMeta{display:flex;flex-wrap:wrap;gap:5px 8px;align-items:center}.pill{font-size:10px;background:#eef5f9;color:#5a778f;padding:3px 7px;border-radius:999px}.price{font-weight:800;color:#0875af}.catActions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}.catNote{font-size:11px;line-height:1.5;color:#5d7a90;margin:8px 0}
.canvasPanel{padding:0;display:flex;flex-direction:column;overflow:hidden}.canvashead{padding:16px 18px;border-bottom:1px solid #e2edf4;display:flex;justify-content:space-between;align-items:center;gap:8px}.canvascontrols{display:flex;gap:6px}.canvascontrols button{padding:6px 10px}.status{padding:11px 16px;background:#e9f6ff;color:#17658a;font-size:12px}.stage{position:relative;min-height:560px;background:#f8fcff;outline:2px dashed transparent;transition:background .15s,outline-color .15s}.stage.drag-active{outline-color:#119dcc;background:#e5f6ff}.stage svg{display:block;width:100%;height:560px;touch-action:pan-y}.legend{padding:12px 16px;border-top:1px solid #e2edf4;display:flex;flex-wrap:wrap;gap:15px;font-size:12px;color:#638096}.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px}.connector{cursor:crosshair}.connector:hover .outer{stroke:#fd9500;stroke-width:5}.connector.drop-target .outer{stroke:#10b981!important;stroke-width:7}.draw-op{cursor:pointer}.draw-op:hover{filter:drop-shadow(0 0 6px #36aae5)}.selected-op{filter:drop-shadow(0 0 6px #fca541)}.svg-label{font-size:11px;fill:#37627b;font-weight:700;paint-order:stroke;stroke:#f8fcff;stroke-width:4px;stroke-linejoin:round}.op-icon{fill:#1172a7;stroke:#fff;stroke-width:1.5}
.editBar{display:flex;gap:8px;align-items:end;flex-wrap:wrap;padding:10px 14px;border-top:1px solid #e2edf4;background:#fbfdff}.editBar label{margin:0;flex:1;min-width:140px}.dropToast{position:absolute;left:12px;bottom:12px;background:#14394d;color:#fff;border-radius:10px;padding:10px 13px;pointer-events:none;max-width:85%;z-index:2;font-size:12px}
.sum{font-size:32px;font-weight:850;color:#075f98;margin:4px 0}.stat{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid #e7eff4;font-size:13px}.scroll{max-height:420px;overflow:auto}.item{border-bottom:1px solid #e9f0f6;padding:10px 0;font-size:12px}.itemtop{display:flex;justify-content:space-between;gap:12px}.item small{display:block;color:#6b879c;margin-top:4px}.alert{background:#fff6e8;border:1px solid #ffe1a8;border-radius:10px;color:#865400;padding:10px;font-size:12px;line-height:1.45;margin-top:12px}.footer{padding:12px;text-align:center;color:#7b93a6;font-size:11px}
@media(max-width:1260px){.grid{grid-template-columns:320px 1fr}.summary{grid-column:1/-1}}@media(max-width:760px){.grid{grid-template-columns:1fr}.wrap{padding:9px}.hero{padding:16px}h1{font-size:22px}.stage,.stage svg{height:410px;min-height:410px}.summary{grid-column:auto}}