:root{--bg:#fff;--panel:#fff;--panel-line:#e5e7eb;--line-strong:#d1d5db;--text:#111827;--muted:#6b7280;--faint:#9ca3af;--ink:#111827;--hover:#f3f4f6;--field:#f9fafb;--canvas:#eef1f6;--canvas-grid:#d8dee8;--accent:#ff8c42;--teal:#0f9d8a;--danger:#dc2626;--mono:"JetBrains Mono", "SFMono-Regular", Consolas, monospace;--sans:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;--topbar-h:72px;--sidebar-w:282px}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:var(--sans)}.app{flex-direction:column;height:100vh;display:flex}.icon{flex:none;width:16px;height:16px}.icon-sm{width:13px;height:13px}.hidden{display:none!important}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.topbar{height:var(--topbar-h);background:var(--panel);border-bottom:1px solid var(--panel-line);flex:none;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:0 12px;display:grid}.brand{align-items:center;gap:8px;min-width:0;display:flex}.brand-icon{width:20px;height:20px;color:var(--ink);flex:none}.brand-name{white-space:nowrap;font-size:.95rem;font-weight:600}.stepper{align-items:flex-start;display:flex}.step{cursor:pointer;width:210px;font-family:var(--sans);background:0 0;border:none;flex-direction:column;align-items:center;gap:6px;padding:0;display:flex;position:relative}.step+.step:before{content:"";z-index:0;background:var(--panel-line);border-radius:1px;height:2px;position:absolute;top:12px;left:calc(18px - 50%);right:calc(50% + 18px)}.step.reached+.step.reached:before{background:var(--ink)}.step-dot{z-index:1;background:var(--hover);width:24px;height:24px;color:var(--muted);border:1px solid var(--panel-line);border-radius:50%;justify-content:center;align-items:center;font-size:.7rem;font-weight:600;display:inline-flex;position:relative}.step-label{color:var(--muted);white-space:nowrap;font-size:.72rem;font-weight:500}.step:hover:not(:disabled){background:0 0;border:none}.step:hover .step-dot{border-color:var(--line-strong);color:var(--text)}.step.done .step-dot{background:var(--panel);color:var(--ink);border-color:var(--ink)}.step.active .step-dot{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:0 0 0 4px #e5e7eb}.step.active .step-label{color:var(--text);font-weight:600}.topbar-actions{justify-content:flex-end;align-items:center;gap:4px;display:flex}.ghost-btn{width:auto;color:var(--muted);background:0 0;border:1px solid #0000;border-radius:8px;align-items:center;gap:6px;padding:7px 10px;font-size:.8rem;font-weight:500;display:inline-flex}.ghost-btn:hover:not(:disabled){background:var(--hover);color:var(--text);border-color:#0000}.avatar-btn{background:var(--panel);border:1px solid var(--panel-line);width:34px;height:34px;color:var(--text);border-radius:50%;justify-content:center;align-items:center;margin-left:6px;padding:0;display:inline-flex}.topbar-actions button:disabled{opacity:.55;cursor:default}.avatar-btn:disabled{opacity:1}.plans-wrap{position:relative}.plans-btn{max-width:190px}.plans-btn-label{text-overflow:ellipsis;white-space:nowrap;color:var(--text);overflow:hidden}.plan-name{background:var(--field);border:1px solid var(--panel-line);width:100%;color:var(--text);font-size:.8rem;font-family:var(--sans);border-radius:6px;margin-bottom:12px;padding:7px 8px}.plan-name:disabled{opacity:.55}.plans-popover{z-index:20;background:var(--panel);border:1px solid var(--panel-line);border-radius:10px;width:320px;padding:12px;position:absolute;top:calc(100% + 8px);right:0;box-shadow:0 12px 32px #11182724}.plans-head{justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;font-size:.78rem;font-weight:600;display:flex}.plans-head button{width:auto}#plansList{max-height:50vh;overflow-y:auto}.loop-item.plan-item{grid-template-columns:1fr auto;row-gap:2px;display:grid}.loop-item.plan-item .name{grid-area:1/1}.loop-item.plan-item .meta{font-family:var(--mono);color:var(--muted);grid-area:2/1;font-size:.68rem}.loop-item.plan-item button{grid-area:1/2/span 2;align-self:center}.save-wrap{position:relative}.save-status{white-space:nowrap;color:var(--muted);pointer-events:none;font-size:.7rem;position:absolute;top:calc(100% + 2px);right:0}.save-status.ok{color:var(--teal)}.save-status.err{color:var(--danger)}.layout{grid-template-columns:var(--sidebar-w) 1fr;flex:1;min-height:0;display:grid}.sidebar{background:var(--panel);border-right:1px solid var(--panel-line);flex-direction:column;min-height:0;display:flex}.sidebar-scroll{flex:1;min-height:0;padding:18px 13px 12px;overflow-y:auto}.sidebar-footer{border-top:1px solid var(--panel-line);flex:none;padding:16px 13px 12px}.footer-label{text-transform:uppercase;letter-spacing:.06em;color:var(--text);font-size:.66rem;font-weight:600}.footer-total{font-family:var(--mono);margin:6px 0 14px;font-size:1.3rem;font-weight:700}.export-btn{color:var(--muted);background:0 0;border:none;justify-content:center;align-items:center;gap:6px;font-weight:500;display:inline-flex}.export-btn:hover:not(:disabled){background:var(--hover);color:var(--text)}@media (width<=1200px){.step{width:150px}.step-label{white-space:normal;text-align:center;max-width:140px}}@media (width<=1000px){.topbar{grid-template-columns:1fr auto;row-gap:10px;height:auto;padding:10px 12px}.stepper{grid-area:2/1/auto/-1;justify-content:center}.step{width:33%;max-width:170px}}@media (width<=600px){.brand-name,#saveBtn span{display:none}.plans-btn{max-width:140px}}@media (width<=820px){.app{height:auto;min-height:100vh}.layout{grid-template-columns:1fr}.sidebar{border-right:none;border-bottom:1px solid var(--panel-line)}.canvas-wrap{height:65vh}}.stage-section+.stage-section{margin-top:26px}.section-head{cursor:pointer;justify-content:space-between;align-items:center;gap:8px;display:flex}.stage-section h2{text-transform:uppercase;letter-spacing:.06em;color:var(--text);margin:0;font-size:.72rem;font-weight:600}.section-summary{color:var(--muted);margin-top:8px;font-size:.78rem;display:none}.section-summary.ok{color:var(--teal)}.stage-section.collapsed .section-summary{display:block}.stage-section.collapsed .section-body{display:none}.stage-section:not(.collapsed) .section-body{margin-top:12px}.stage-section.upcoming{opacity:.45}.stage-section.upcoming:hover{opacity:.7}.stage-section.collapsed.upcoming:has(.preview) .section-summary{display:none}.stage-section.collapsed.upcoming .section-body{pointer-events:none;margin-top:8px;display:block}.stage-section.collapsed.upcoming .section-body>:not(.preview),.stage-section.collapsed.upcoming .preview button:not(.primary){display:none}.stage-section.collapsed.upcoming .preview button.primary{background:var(--field);border-color:var(--panel-line);color:var(--text)}.section-intro{color:var(--muted);margin:0 0 12px;font-size:.75rem;line-height:1.5}.units-chip{color:var(--faint);cursor:default;align-items:center;gap:4px;font-size:.72rem;display:inline-flex}.dropzone{cursor:pointer;text-align:center;border:1.5px dashed var(--line-strong);border-radius:8px;flex-direction:column;align-items:center;gap:4px;margin:0;padding:24px 12px 30px;transition:background .15s,border-color .15s;display:flex}.dropzone:hover,.dropzone.dragover{background:var(--field);border-color:var(--faint)}.dropzone-icon{background:var(--hover);width:34px;height:34px;color:var(--text);border-radius:50%;justify-content:center;align-items:center;margin-bottom:12px;display:inline-flex}.dropzone-title{color:var(--text);font-size:.88rem;font-weight:500}.dropzone-sub{color:var(--muted);font-size:.72rem}label{color:var(--muted);margin-bottom:4px;font-size:.75rem;display:block}.row{gap:8px;margin-bottom:10px;display:flex}.row>div{flex:1}input[type=number],input[type=text],select{background:var(--panel);border:1px solid var(--panel-line);width:100%;color:var(--text);font-family:var(--mono);border-radius:6px;padding:7px 8px;font-size:.85rem}input[type=text]{font-family:var(--sans)}input:focus,select:focus{outline-offset:-1px;border-color:#a5b4fc;outline:2px solid #c7d2fe}button{font-family:var(--sans);border:1px solid var(--panel-line);background:var(--panel);color:var(--text);cursor:pointer;border-radius:6px;width:100%;padding:8px 10px;font-size:.8rem;font-weight:500}button:hover:not(:disabled){background:var(--hover);border-color:var(--line-strong)}button:disabled{opacity:.5;cursor:not-allowed}button.primary{background:var(--field);border-color:var(--panel-line);color:var(--text);justify-content:center;align-items:center;gap:8px;font-size:.85rem;display:inline-flex}button.primary:not(:disabled){background:var(--ink);border-color:var(--ink);color:#fff}button.primary:hover:not(:disabled){background:#1f2937;border-color:#1f2937}.btnrow{gap:8px;display:flex}.btnrow button{flex:1}.btnrow button.primary{flex:2}.stat-box{background:var(--field);border:1px solid var(--panel-line);font-family:var(--mono);color:var(--muted);border-radius:6px;margin-top:10px;padding:9px 11px;font-size:.75rem}.stat-box strong{color:var(--text)}.msg{color:var(--muted);min-height:14px;margin-top:8px;font-size:.72rem;line-height:1.4}.msg:empty{min-height:0;margin-top:0}.msg.err{color:var(--danger)}.msg.ok{color:var(--teal)}.loops-list{flex-direction:column;gap:6px;max-height:200px;margin-top:10px;display:flex;overflow-y:auto}.loop-item{background:var(--panel);border:1px solid var(--panel-line);cursor:pointer;border-radius:6px;align-items:center;gap:8px;padding:7px 9px;font-size:.78rem;display:flex}.loop-item:hover{background:var(--field)}.loop-item.active{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}.loop-item .name{flex:1}.loop-item .len{font-family:var(--mono);color:var(--muted)}.loop-item button{width:auto;color:var(--muted);background:0 0;border:none;padding:2px 7px;font-size:.7rem}.loop-item button:hover:not(:disabled){color:var(--danger);background:0 0}.loop-item button.move-btn:hover:not(:disabled){color:var(--ink)}.loop-item button.move-btn.active{color:var(--accent)}.grid-divider-wrap{margin-top:4px}.grid-divider{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);border-top:1px solid var(--panel-line);margin:14px 0 8px;padding-top:12px;font-size:.65rem;font-weight:600}.canvas-wrap{background-color:var(--canvas);background-image:linear-gradient(var(--canvas-grid) 1px, transparent 1px), linear-gradient(90deg, var(--canvas-grid) 1px, transparent 1px);background-size:20px 20px;flex-direction:column;min-height:0;display:flex;position:relative;overflow:hidden}.canvas-wrap.dragover{box-shadow:inset 0 0 0 3px var(--ink)}#viewportHost{flex:1;min-height:0}.canvas-hint{z-index:4;font-family:var(--mono);color:var(--muted);pointer-events:none;background:#ffffffd9;border-radius:6px;margin:0;padding:3px 8px;font-size:.7rem;position:absolute;top:12px;left:12px}.empty-state{z-index:3;pointer-events:none;text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:0 24px;display:flex;position:absolute;inset:0}.empty-icon{background:var(--panel);width:62px;height:62px;color:var(--text);border-radius:50%;justify-content:center;align-items:center;margin-bottom:24px;display:inline-flex;box-shadow:0 2px 10px #11182714}.empty-icon .icon{width:28px;height:28px}.empty-title{color:var(--text);margin:0 0 12px;font-size:1.1rem;font-weight:600}.empty-text{max-width:380px;color:var(--muted);margin:0 0 18px;font-size:.88rem;line-height:1.45}.empty-formats{font-family:var(--mono);color:var(--muted);margin:0;font-size:.75rem}.canvas-toolbar{z-index:5;border:1px solid var(--panel-line);background:#ffffffeb;border-radius:999px;align-items:center;gap:2px;padding:4px;display:flex;position:absolute;bottom:26px;left:50%;transform:translate(-50%);box-shadow:0 4px 14px #1118271a}.tool-btn,.tool-icon-btn{width:32px;height:32px;color:var(--muted);background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:0;display:inline-flex}.tool-btn:hover:not(:disabled),.tool-icon-btn:hover:not(:disabled){background:var(--hover);color:var(--text)}.tool-btn.active,.tool-btn.active:hover:not(:disabled){color:#fff;background:#4b5563}.toolbar-sep{background:var(--panel-line);width:1px;height:20px;margin:0 6px}.zoom-pct{font-family:var(--mono);color:var(--muted);text-align:center;min-width:44px;font-size:.72rem}.help-btn{z-index:5;background:var(--panel);border:1px solid var(--panel-line);width:30px;height:30px;color:var(--text);border-radius:50%;padding:0;font-weight:600;position:absolute;bottom:18px;right:18px}#viewportHost svg{cursor:grab}#viewportHost svg.calibrating,#viewportHost svg.placing{cursor:crosshair}#viewportHost svg.editing{cursor:cell}#viewportHost svg.moving{cursor:move}#viewportHost svg.routing{cursor:crosshair}#viewportHost svg.force-pan{cursor:grab!important}#viewportHost svg.panning{cursor:grabbing!important}#viewportHost svg.routing.erase-hint{cursor:cell}