@font-face{font-family:LabMono;src:local("DejaVu Sans Mono"),local("Consolas")}*{box-sizing:border-box} :root{color-scheme:dark;--bg:#11151b;--panel:#181d25;--border:#2b313b;--text:#e5e9f0;--muted:#8c96a6;--accent:#67d8bc;--accent-dark:#193c36;--orange:#ecaf72;--blue:#8faff4}body{margin:0;background:var(--bg);color:var(--text);font:13px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;height:100vh;overflow:hidden}button,input,select{font:inherit}button{border:1px solid var(--border);border-radius:6px;background:var(--control-bg,#222832);color:var(--text);padding:8px 12px;cursor:pointer;transition:background .15s,border-color .15s}button:hover:not(:disabled){background:var(--hover-bg,#303946);border-color:var(--hover-border,#546172)}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button:disabled{opacity:.4;cursor:not-allowed}button.primary{background:var(--accent);border-color:var(--accent);color:var(--primary-text,#102d27);font-weight:650}button.primary:hover:not(:disabled){background:var(--primary-hover,#8be8d0)}.muted{color:var(--muted)}.topbar{height:84px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:22px;padding:0 22px;background:var(--panel,#181d25)}.brand{display:flex;gap:13px;align-items:center;width:220px;flex-shrink:0;color:var(--text);text-decoration:none;letter-spacing:2px;font-size:18px;font-weight:650}.brand-mark{font-size:35px;letter-spacing:-4px;font-weight:750;line-height:1;padding-right:5px}.brand-mark span{color:var(--accent)}.brand-sub{display:block;font-size:8px;letter-spacing:1.5px;color:var(--muted);font-weight:500}.lab-heading{display:flex;flex-direction:column;min-width:120px}.eyebrow,.section-label{font-size:10px;letter-spacing:1.6px;font-weight:650;color:var(--muted)}#lab-name{padding:2px 0;background:none;border:0;color:var(--text);font-size:17px;font-weight:550;max-width:230px;width:100%}.save-state{font-size:11px;color:var(--muted);white-space:nowrap}.header-actions{margin-left:auto;display:flex;gap:8px;white-space:nowrap}.header-actions #import,.header-actions #export{background:none}.workspace{height:calc(100vh - 84px);position:relative;display:grid;--palette-width:244px;--inspector-width:278px;grid-template-columns:var(--palette-width) minmax(0,1fr) var(--inspector-width)}.palette,.inspector{background:var(--panel);padding:24px 19px;overflow:auto;position:relative;display:flex;flex-direction:column}.palette{border-right:1px solid var(--border)}.inspector{border-left:1px solid var(--border)}.section-label{display:flex;align-items:center;justify-content:space-between}.section-label>span{color:var(--text-muted,#616c7c);font:10px LabMono,monospace}.intro{font-size:12px;line-height:1.7;margin:15px 0 23px}.device-template{padding:14px 10px;margin-bottom:10px;display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:var(--control-bg,#1d232c);border-color:var(--line,#303743);cursor:grab}.device-template strong{font-weight:550;font-size:13px}.device-template small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.drag-dots{margin-left:auto;color:var(--text-muted,#606c7b);font-size:23px}.device-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:38px;height:38px;border-radius:8px;color:var(--accent);background:var(--icon-bg,#213a36)}.device-icon.router{color:var(--orange);background:var(--router-icon-bg,#3b3028)}.device-icon.pc{color:var(--blue);background:var(--pc-icon-bg,#293246)}.device-icon svg{width:27px;height:27px}.palette-divider{height:1px;background:var(--border);margin:22px 0}.node-list{margin-top:13px;display:grid;gap:5px}.node-list button{border:0;background:none;display:flex;align-items:center;gap:9px;text-align:left;padding:8px;font-size:12px}.node-list button.selected{background:var(--active-bg,#26332f);color:var(--accent)}.node-list .little-dot{margin-left:auto}.mini-type{color:var(--muted);font-size:10px;width:24px}.palette-bottom{margin-top:auto;padding-top:32px;font-size:8px;letter-spacing:1px;color:var(--muted)}.palette-bottom p{font-size:11px;letter-spacing:0;margin-bottom:0;color:var(--text-muted,#687487)}.little-dot,.legend-dot{display:inline-block;width:6px;height:6px;background:var(--accent);border-radius:50%;vertical-align:middle;margin-right:5px}.little-dot.stopped,.legend-dot.stopped{background:var(--status-stopped,#6b7585)}.little-dot.error,.legend-dot.error{background:var(--error-text,#f08080)}.workarea{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0}.canvas-toolbar{display:flex;align-items:center;gap:12px;padding:12px 18px;height:62px;flex-shrink:0;border-bottom:1px solid var(--border);background:var(--toolbar-bg,#141920)}.tools{display:flex;gap:3px;padding:3px;border:1px solid var(--border);border-radius:7px}.tools button{border:0;background:none;padding:5px 10px;color:var(--muted);font-size:12px}.tools button.active{color:var(--accent);background:var(--active-bg,#263631)}.canvas-hint{font-size:11px;color:var(--text-muted,#788596);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.running-count{margin-left:auto;color:var(--accent);background:var(--active-bg,#1c302c);padding:3px 9px;border-radius:4px;font:10px LabMono,monospace;white-space:nowrap}.canvas-scroll{flex:1;overflow:auto;min-height:120px;position:relative;scrollbar-color:var(--scrollbar-thumb,#343d49) var(--toolbar-bg,#141920);scrollbar-width:thin}.canvas{width:2400px;height:1600px;position:relative;background-color:var(--canvas-bg,#12171e);background-image:radial-gradient(var(--canvas-dot,#2b323d) 1px,transparent 1px);background-size:24px 24px;background-position:12px 12px}.canvas.link-mode{cursor:crosshair}#links{position:absolute;inset:0;overflow:visible}.cable{stroke:var(--cable,#546475);stroke-width:2;fill:none}.cable.running{stroke:var(--cable-running,#528a7e)}.cable-hit{stroke:transparent;stroke-width:18;fill:none;cursor:pointer}.cable-group:hover .cable{stroke:var(--cable-hover,#a2bcda);stroke-width:3}.port-label{fill:var(--port-text,#98a6b8);font:10px LabMono,monospace;paint-order:stroke;stroke:var(--canvas-bg,#12171e);stroke-width:6px;stroke-linejoin:round;pointer-events:none}.map-node{position:absolute;transform:translate(-50%,-50%);width:126px;padding:13px 10px 10px;background:var(--node-bg,#1d242e);border:1px solid var(--node-border,#3a4554);border-radius:11px;display:flex;flex-direction:column;align-items:center;cursor:grab;box-shadow:0 5px 16px var(--soft-shadow,#0003);user-select:none;touch-action:none}.map-node:hover{border-color:var(--node-hover-border,#6b7c91);background:var(--node-hover,#252e3a)}.map-node.selected{border-color:var(--accent);box-shadow:0 0 0 3px var(--selection-ring,#67d8bc14),0 5px 16px var(--soft-shadow,#0003)}.map-node.linking{border-color:var(--fault-text,#ecaf72);box-shadow:0 0 0 4px var(--fault-ring,#ecaf7220)}.map-node .device-icon{width:42px;height:38px;background:none}.map-node .device-icon svg{width:37px;height:34px}.map-node .node-label{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:7px;font-size:12px;font-weight:600}.map-node .node-type{font:8px LabMono,monospace;color:var(--text-muted,#8995a5);margin-top:3px;letter-spacing:.8px}.map-node .little-dot{position:absolute;right:10px;top:12px;width:7px;height:7px;box-shadow:0 0 0 3px var(--soft-shadow,#0002)}.canvas-footer{height:34px;flex-shrink:0;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 17px;font-size:9px;color:var(--text-muted,#8793a4);border-top:1px solid var(--border);background:var(--toolbar-bg,#161c24)}.canvas-footer .legend-dot{width:5px;height:5px;margin-left:9px;margin-right:3px}.canvas-footer .legend-dot:first-child{margin-left:0}.empty-state{position:absolute;width:430px;text-align:center;left:70px;top:90px}.empty-art{margin:auto auto 25px;width:62px;height:62px;border:1px solid var(--active-border,#3b544d);border-radius:16px;color:var(--accent);font-size:36px;background:var(--active-bg,#1c302a);box-shadow:0 0 80px var(--selection-ring,#67d8bc0a)}.empty-state h1{font-size:32px;font-weight:500;line-height:1.2;letter-spacing:-1px;margin:14px 0}.empty-state p{font-size:13px;line-height:1.8;color:var(--muted);margin:18px 0 24px}.empty-state small{display:block;font-size:10px;color:var(--text-muted,#738092);margin-top:12px}.empty-state button{padding:10px 17px}.empty-state button span{margin-left:18px}#inspector-empty{padding-top:58px;color:var(--muted)}.inspect-symbol{font-size:23px;color:var(--text-muted,#637587);border:1px dashed var(--line,#3a4655);width:44px;height:44px;display:grid;place-items:center;border-radius:10px}#inspector-empty h3{color:var(--text-strong,#bbc4d1);font-size:15px;font-weight:500;margin-top:20px}#inspector-empty p{font-size:12px;line-height:1.8}.tip{border:1px solid var(--border);border-radius:8px;padding:14px;margin-top:42px;font-size:11px}.tip strong{font-weight:500;color:var(--text-strong,#bac4d2)}.tip p{margin:9px 0 0;font-size:11px!important}.selected-heading{display:flex;gap:12px;align-items:center;margin:25px 0}.selected-heading h2{margin:0;font-size:17px;font-weight:550;word-break:break-word}.selected-heading .muted{font-size:11px;text-transform:capitalize}label{display:block;font-size:11px;color:var(--text-secondary,#a7b2c2);margin:14px 0}input,select{display:block;width:100%;padding:8px 9px;color:var(--text);border:1px solid var(--line,#35404e);border-radius:5px;background:var(--sheet-bg,#121820);margin-top:6px;min-width:0;font-size:12px}input:disabled,select:disabled{opacity:.55}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.field-help{font-size:10px;line-height:1.7;color:var(--text-muted,#7d8a9c);margin-top:0}.optional{color:var(--text-muted,#637084);font-size:9px}.wide{width:100%;font-size:11px}.node-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0 8px}.interfaces-heading{margin:25px 0 12px}.interface{padding:8px 0;border-bottom:1px solid var(--line-soft,#282f3a);display:flex;align-items:center;gap:7px;font-size:10px}.interface code{font-size:10px;color:var(--text-secondary,#bdc8d6);min-width:34px}.interface span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-muted,#7e8c9f)}.interface.connected span{color:var(--active-text,#8dc3b5)}.interface button{margin-left:auto;border:0;background:none;padding:0 3px;color:var(--text-muted,#8f9cac)}.inspector-bottom{display:flex;gap:5px;justify-content:space-between;margin-top:23px}.inspector-bottom button{border:0;background:none;font-size:10px;padding:5px 0}.danger-text{color:var(--error-text,#e19595)}.error-box{font-size:11px;background:var(--error-bg,#382629);color:var(--error-text,#f4b1b1);padding:10px;border:1px solid var(--error-border,#704146);border-radius:6px;overflow-wrap:anywhere;margin-top:12px}.console-panel{height:330px;flex-shrink:0;background:var(--code-bg,#0c1117);border-top:1px solid var(--active-border,#42524f);display:flex;flex-direction:column}.console-panel.expanded{height:65%}.console-toolbar{height:44px;padding:0 13px;display:flex;align-items:center;gap:12px;background:var(--toolbar-bg,#1a222b);border-bottom:1px solid var(--border);flex-shrink:0}.console-title{color:var(--accent);font:12px LabMono,monospace}.console-title strong{color:var(--text-strong,#ced7e4);font:500 12px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;margin-left:8px}#console-status{font-size:10px;color:var(--muted)}.console-actions{display:flex;gap:3px;margin-left:auto}.console-actions button{background:none;border:0;font-size:10px;padding:5px 7px}#terminal{flex:1;min-height:0;padding:10px 12px}.xterm{height:100%}#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:20;max-width:620px;width:max-content;padding:12px 18px;background:var(--success-bg,#24483e);border:1px solid var(--success-border,#4a947d);color:var(--success-text,#d6f4e9);border-radius:8px;box-shadow:0 8px 40px var(--window-shadow,#0008);font-size:12px;white-space:pre-wrap}#toast.error{background:var(--error-bg,#452c31);border-color:var(--error-border,#98616a);color:var(--error-text,#ffdade)}dialog{background:var(--sheet-bg,#1b222c);color:var(--text);border:1px solid var(--line,#414d5f);border-radius:12px;padding:26px;max-width:min(720px,90vw);box-shadow:0 30px 100px var(--window-shadow,#0008)}dialog::backdrop{background:var(--overlay,#03070dbb);backdrop-filter:blur(3px)}dialog h2{font-size:22px;font-weight:500;margin:9px 0}dialog p{font-size:12px}.link-endpoints{display:flex;align-items:center;gap:20px;margin:16px 0}.link-endpoints label{width:170px}.link-endpoints>span{color:var(--accent)}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:25px}.logs-heading{display:flex;align-items:center;justify-content:space-between;gap:30px}#log-content{font-size:11px;white-space:pre-wrap;overflow:auto;max-height:60vh;width:600px;max-width:75vw;color:var(--text-secondary,#bdc8d8)}body.busy{cursor:progress}body.busy .canvas{pointer-events:none}[hidden]{display:none!important}@media(min-width:1500px){.workspace{--palette-width:258px;--inspector-width:300px}.brand{width:234px}.palette,.inspector{padding-left:24px;padding-right:24px}}@media(max-width:1150px){.workspace{--palette-width:202px;--inspector-width:246px}.palette,.inspector{padding:20px 14px}.brand{width:175px}.canvas-hint{display:none}.topbar{gap:12px;padding:0 16px}.save-state{display:none}.header-actions button{padding:7px 9px}.canvas-footer>span:last-child{display:none}.empty-state{left:15px;width:350px}.device-template{gap:8px;padding:12px 8px}.device-template .device-icon{width:30px}.drag-dots{display:none}}@media(max-width:800px){.palette{padding:18px 10px}.device-template{padding:10px;justify-content:center}.brand{width:auto}.brand>span:last-child{display:none}.topbar{height:70px}.workspace{height:calc(100vh - 70px)}.header-actions #export,.header-actions #import{display:none}.header-actions button span{display:none}#lab-name{font-size:14px;max-width:160px}.empty-state{width:270px;top:55px}.empty-state h1{font-size:25px}.canvas-toolbar{padding:10px}.running-count{display:none}.console-actions #clear-console{display:none}.console-panel{height:300px}}@media(max-width:550px){.canvas-footer>span:first-child{display:none}.palette{padding:14px 5px}.header-actions{gap:4px}.console-toolbar{gap:5px;padding:0 6px}}

/* Each console keeps its own terminal and connection while its tab is hidden. */
#upload-image{margin-top:4px}
#image-dialog{width:470px}
#image-progress{width:100%;accent-color:var(--accent)}
#image-message{overflow-wrap:anywhere;color:var(--muted)}
#image-message.error{color:var(--error-text,#f4b1b1)}

.console-tabs{display:flex;gap:3px;flex-shrink:0;overflow-x:auto;padding:5px 10px 0;background:var(--toolbar-bg,#171e27);border-bottom:1px solid var(--border);scrollbar-width:thin;scrollbar-color:var(--active-border,#435344) var(--toolbar-bg,#171e27)}
.console-tab-group{display:flex;align-items:center;flex-shrink:0;border:1px solid transparent;border-bottom:2px solid transparent;border-radius:5px 5px 0 0;max-width:230px}
.console-tab-group.active{background:var(--active-bg,#24342f);border-color:var(--active-border,#344b42);border-bottom-color:var(--accent)}
.console-tab{display:flex;align-items:center;gap:5px;min-width:0;padding:7px 9px;border:0;background:none!important;font-size:11px;color:var(--muted)}
.console-tab[aria-selected="true"]{color:var(--text)}
.console-tab>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.console-tab .little-dot{flex-shrink:0}
.console-tab-close{background:none;border:0;padding:3px 7px;margin-right:3px;font-size:15px;color:var(--muted)}
#terminal{position:relative;padding:0;overflow:hidden}
/* FitAddon measures this element's full height, so keep spacing outside it. */
.console-terminal{position:absolute;inset:2px 12px 6px;min-width:0;min-height:0;display:flex;flex-direction:column;justify-content:flex-end}
/* Fit whole rows against the full container; leave fractional-row space above. */
.console-terminal>.xterm{height:auto;flex:0 0 auto}
.console-panel{flex-shrink:1;min-height:0}
.console-title{min-width:0;display:flex;align-items:center;white-space:nowrap}
#console-name{overflow:hidden;text-overflow:ellipsis}
#console-status{flex-shrink:0}
.console-actions{flex-shrink:0}

/* Scale the scene inside an explicitly sized scroll surface. */
.canvas-scroll{cursor:grab;touch-action:none;overscroll-behavior:contain;background:var(--canvas-bg,#12171e)}
.canvas-extent{position:relative;width:2400px;height:1600px;min-width:100%;min-height:100%;overflow:hidden}
.canvas{position:absolute;left:0;top:0;transform-origin:0 0;cursor:grab}
.canvas.link-mode{cursor:grab}
.canvas.link-mode .map-node{cursor:crosshair}
.canvas-scroll.panning,.canvas-scroll.panning *{cursor:grabbing!important;user-select:none}
.canvas.zoom-compact .node-type{display:none}
.map-view-controls{display:flex;gap:2px;align-items:center;flex-shrink:0;border:1px solid var(--border);padding:3px;border-radius:7px}
.map-view-controls button{border:0;background:none;padding:5px 8px;font-size:12px}
#zoom-reset{min-width:49px;font:10px LabMono,monospace;color:var(--accent)}
#zoom-fit{border-left:1px solid var(--border);border-radius:0}
@media(max-width:1350px){.canvas-hint{display:none}}
@media(max-width:800px){.canvas-toolbar{gap:5px;padding:8px 6px}.tools button{padding:5px 7px}.tools button span{display:none}.map-view-controls button{padding:5px 6px}}

.danger-button{background:#8b3944;border-color:#b85461;color:#fff}
.danger-button:hover:not(:disabled){background:#a74350;border-color:#d16a77}
#delete-description{max-width:420px;overflow-wrap:anywhere;white-space:pre-wrap}

/* Keep hostnames at least 12 screen pixels tall while their icons shrink. */
.map-node .node-label{font-size:calc(12px * var(--node-label-scale,1));max-width:calc(110px * var(--node-label-scale,1));width:max-content;flex-shrink:0}

/* Keep interface labels and their background outline readable when zooming out. */
.port-label{font-size:calc(10px * var(--node-label-scale,1));stroke-width:calc(6px * var(--node-label-scale,1))}
.port-leader{stroke:var(--cable,#546475);stroke-width:1;vector-effect:non-scaling-stroke;pointer-events:none}

/* Use the topology's thin scrollbar style throughout the workspace. */
.palette,.inspector,.xterm .xterm-viewport,.console-tabs,#log-content{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb,#343d49) var(--toolbar-bg,#141920)}
.canvas-scroll::-webkit-scrollbar,.palette::-webkit-scrollbar,.inspector::-webkit-scrollbar,.xterm .xterm-viewport::-webkit-scrollbar,.console-tabs::-webkit-scrollbar,#log-content::-webkit-scrollbar{width:8px;height:8px}
.canvas-scroll::-webkit-scrollbar-track,.palette::-webkit-scrollbar-track,.inspector::-webkit-scrollbar-track,.xterm .xterm-viewport::-webkit-scrollbar-track,.console-tabs::-webkit-scrollbar-track,#log-content::-webkit-scrollbar-track{background:var(--toolbar-bg,#141920)}
.canvas-scroll::-webkit-scrollbar-thumb,.palette::-webkit-scrollbar-thumb,.inspector::-webkit-scrollbar-thumb,.xterm .xterm-viewport::-webkit-scrollbar-thumb,.console-tabs::-webkit-scrollbar-thumb,#log-content::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb,#343d49);border:2px solid var(--toolbar-bg,#141920);border-radius:8px}


/* Side panels stay docked on wide screens and become controlled drawers in portrait. */
.workspace.palette-collapsed{--palette-width:0px}
.workspace.inspector-collapsed{--inspector-width:0px}
.palette{grid-column:1;grid-row:1;min-width:0}
.workarea{grid-column:2;grid-row:1}
.inspector{grid-column:3;grid-row:1;min-width:0}
.panel-heading{display:flex;align-items:center;gap:10px;min-height:28px}
.panel-heading>.section-label{flex:1}
.panel-close{border:0;background:none;padding:0 7px;font-size:24px;line-height:28px;color:var(--muted)}
.panel-toggle{display:inline-flex;align-items:center;justify-content:center;gap:5px;flex-shrink:0;padding:5px 7px;font-size:11px;min-height:32px;background:none}
.panel-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5}
.panel-toggle[aria-expanded="true"]{color:var(--accent);background:var(--active-bg,#263631)}
#toggle-inspector{margin-left:auto}
#panel-backdrop{position:absolute;inset:62px 0 0;z-index:8;border:0;border-radius:0;background:var(--overlay,#03070d80);padding:0;cursor:default}
.workspace.panels-compact{grid-template-columns:minmax(0,1fr)}
.panels-compact .workarea{grid-column:1}
.panels-compact>.palette,.panels-compact>.inspector{position:absolute;top:62px;bottom:0;z-index:9;width:min(300px,calc(100% - 48px));padding:20px;box-shadow:0 10px 40px var(--window-shadow,#0008);overscroll-behavior:contain}
.panels-compact>.palette{left:0;border-right:1px solid var(--border)}
.panels-compact>.inspector{right:0;border-left:1px solid var(--border)}
.panels-compact .device-template{justify-content:flex-start;padding:14px 10px;gap:11px}
.panels-compact .device-template .device-icon{width:38px}
@media(max-width:1350px){.panel-toggle>span{display:none}}
@media(max-width:550px){.canvas-toolbar{gap:4px;padding:8px 6px}.panel-toggle{padding:5px;min-width:32px}.tools button{padding:5px 6px}.map-view-controls button{padding:5px 5px}.canvas-scroll{min-height:80px}}
@supports(height:100dvh){body{height:100dvh}.workspace{height:calc(100dvh - 84px)}@media(max-width:800px){.workspace{height:calc(100dvh - 70px)}}}

#fullscreen[aria-pressed="true"]{color:var(--accent);background:var(--active-bg,#263631)}
#export-dialog,#import-dialog{width:560px}
#export-dialog .dialog-actions,#import-dialog .dialog-actions{flex-wrap:wrap}
#import-message{overflow-wrap:anywhere}
#import-progress{width:100%}
@media(max-width:800px){.header-actions #export,.header-actions #import{display:block;font-size:0;min-width:30px}.header-actions #export::after{content:"↓";font-size:15px}.header-actions #import::after{content:"↑";font-size:15px}}
@media(max-width:550px){.topbar .brand{display:none}.lab-heading{min-width:70px;flex:1}.topbar{gap:8px;padding:0 10px}.canvas-toolbar{gap:3px}.map-view-controls button{padding:5px 4px}#zoom-reset{min-width:39px}.map-view-controls{gap:1px}#toast{max-width:calc(100vw - 24px)}}

/* Input lock follows the active console tab; controls wrap on small screens. */
.console-toolbar{height:auto;min-height:44px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.console-lock-controls{display:flex;align-items:center;gap:6px}
#console-lock-label{display:flex;align-items:center;gap:4px;margin:0;white-space:nowrap;font-size:11px;color:var(--muted);cursor:pointer}
#lock-console{width:auto;margin:0;accent-color:var(--accent)}
#takeover-console{padding:4px 7px;font-size:11px}
#export-message{white-space:pre-wrap;overflow-wrap:anywhere}
@media(max-width:550px){#console-status{max-width:150px}.console-lock-controls{margin-right:auto}.console-toolbar{column-gap:6px;row-gap:5px}}

/* Browser-local console font preference applies to every device tab. */
.console-font-controls{display:flex;flex-shrink:0;align-items:center;gap:2px}
.console-font-controls button{padding:5px 7px;background:none;border:0;font-size:11px;min-height:30px}
#console-font-reset{min-width:44px;font-family:LabMono,monospace;font-size:10px;color:var(--accent)}

/* Floating is non-modal: the map remains usable and sessions stay in place. */
.console-panel{position:relative}
.console-divider{height:8px;flex:0 0 8px;cursor:ns-resize;touch-action:none;background:var(--toolbar-bg,#1a222b);position:relative}
.console-divider::after{content:"";position:absolute;width:42px;height:2px;background:var(--divider-grip,#657b80);left:calc(50% - 21px);top:3px;border-radius:2px}
.console-divider:focus-visible,.console-move:focus-visible,.console-resize:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.console-panel.floating{position:fixed;z-index:7;border:1px solid var(--active-border,#536960);border-radius:10px;box-shadow:0 16px 60px var(--window-shadow,#0009);overflow:hidden;flex-shrink:0}
.console-panel.floating .console-toolbar{touch-action:pan-x}
.console-panel.floating:not(.maximized) .console-title{cursor:move;user-select:none}
.console-move{background:none;border:0;padding:3px 6px;font-size:18px;cursor:move;touch-action:none;min-height:30px}
/* All floating panes share a shallow grip below their content. */
.console-resize{position:absolute;right:0;bottom:0;width:32px;height:8px;border:0;border-radius:3px 0 0 0;background:transparent;color:var(--muted);cursor:nwse-resize;touch-action:none;z-index:1;padding:0;font-size:0}
.console-resize::after{content:"";position:absolute;right:5px;bottom:2px;width:20px;height:3px;border-radius:2px;background:var(--divider-grip,#657b80)}
.instructions-panel:not(.workspace-docked):not(.browser-detached):not(:fullscreen):has(>.console-resize:not([hidden])),
.agent-panel:not(.workspace-docked):not(.browser-detached):has(>.console-resize:not([hidden])){padding-bottom:8px}
.console-panel.floating .console-terminal{right:2px;bottom:8px}
@media(max-width:550px){.console-toolbar{gap:4px}.console-actions{flex-wrap:wrap}.console-font-controls button{min-height:32px}.console-title{max-width:150px}}

/* Independent windows share a stack below mobile drawers and modal dialogs. */
#console-windows{position:fixed;inset:0;z-index:7;pointer-events:none}
#console-windows>.console-panel{pointer-events:auto}
.floating-terminal-host{position:relative;flex:1;min-height:0;overflow:hidden}
.console-window .console-terminal{inset:2px 2px 8px}
.console-window .console-toolbar{gap:7px}
.console-window .console-toolbar label{display:flex;align-items:center;gap:4px;margin:0;white-space:nowrap;font-size:11px;color:var(--muted)}
.console-window .console-toolbar input[type=checkbox]{width:auto;margin:0;accent-color:var(--accent)}
.console-window [id^=console-status-]{font-size:10px;color:var(--muted)}
.console-window [id^=console-font-reset-]{min-width:44px;font-family:LabMono,monospace;font-size:10px;color:var(--accent)}
.console-tab-float{border:0;background:none;padding:3px 5px;font-size:12px;color:var(--muted)}
.console-tab-group.detached{border-bottom-color:var(--node-border,#61778a)}
.console-panel.no-docked-console:not(.floating){height:auto!important;flex-shrink:0}
.console-panel.no-docked-console #terminal,.console-panel.no-docked-console #console-divider{display:none}

/* The same live map can dock or share the floating workspace with consoles. */
.topology-panel{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0;position:relative}
.topology-panel.floating{position:fixed;border:1px solid var(--active-border,#536960);border-radius:10px;box-shadow:0 16px 60px var(--window-shadow,#0009);overflow:hidden;background:var(--bg);pointer-events:auto}
.topology-panel.floating .canvas-scroll{min-height:0}
.topology-panel.floating .canvas-toolbar{height:auto;min-height:44px;flex-wrap:wrap;gap:6px;padding:6px 8px}
.topology-panel.floating .canvas-hint,.topology-panel.floating .running-count,.topology-panel.floating .canvas-footer>span:not(#link-count){display:none}
.topology-panel.floating .canvas-footer{padding-right:32px;flex-shrink:0}
#topology-window-toolbar{touch-action:none;user-select:none;flex-shrink:0}
#topology-placeholder{flex:1;min-height:80px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:12px}
.canvas-toolbar>[data-arrange-windows],#float-topology{font-size:11px;white-space:nowrap;padding:6px 8px}
.canvas-toolbar{flex-wrap:wrap;height:auto;min-height:62px}
.topology-panel.floating .canvas-toolbar>[data-arrange-windows]{display:none}

/* Bulk actions must also fit a narrow pane on a wide desktop viewport. */
.console-actions{flex-wrap:wrap;flex-shrink:1;min-width:0;max-width:100%}

/* Compact disclosures share the toolbar with font controls and touch keys. */
.console-menu,.console-actions.console-menu{display:block;flex:0 0 auto;min-width:0;margin:0;font-size:11px}
.console-menu summary{cursor:pointer;list-style:none;padding:5px 8px;border:1px solid var(--border);border-radius:5px;min-height:30px;user-select:none}
.console-menu summary::-webkit-details-marker{display:none}
.console-menu summary::after{content:' ▾';color:var(--muted)}
.console-menu summary:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.console-menu[open] summary{background:var(--active-bg,#263631);border-color:var(--active-border,#536960)}
.console-menu-list{position:fixed;z-index:30;width:220px;max-width:calc(100vw - 16px);overflow:auto;display:flex;flex-direction:column;gap:3px;padding:6px;background:var(--sheet-bg,#1b222c);border:1px solid var(--active-border,#536960);border-radius:7px;box-shadow:0 8px 30px var(--window-shadow,#0009);scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb,#343d49) var(--toolbar-bg,#141920);touch-action:pan-y}
.console-menu:not([open])>.console-menu-list{display:none}
.console-menu-list button{display:block;text-align:left;min-height:34px;padding:6px 10px;font-size:12px;background:none;border:0;flex-shrink:0}
.console-menu-list button.primary{background:var(--accent);color:var(--primary-text,#102d27)}
.console-interrupt{font-size:11px;padding:5px 8px;min-height:30px;background:none}
.console-actions.console-menu #clear-console{display:block}

/* Compact according to the pane's width, including narrow desktop windows. */
.console-status-icon,.console-observer-icon,.console-lock-icon{display:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.console-arrow-keys{display:flex;gap:2px;flex-shrink:0}
.console-arrow-keys button{min-width:30px;min-height:32px;padding:3px 5px;background:none;font-size:15px}
.console-compact .console-toolbar{gap:6px;padding-left:8px;padding-right:8px}
.console-compact .console-status-text,.console-compact .console-lock-text{display:none}
.console-compact .console-connection{display:inline-flex;align-items:center;flex:0 0 22px}
.console-compact .console-status-icon{display:block}
.console-connection[data-connection=shared],.console-connection[data-connection=owned]{color:var(--accent)}
.console-connection[data-connection=observing]{color:var(--orange)}
.console-connection:not([data-connection=offline]) .connection-off{display:none}
.console-compact .console-connection[data-connection=observing] .console-status-icon{display:none}
.console-compact .console-connection[data-connection=observing] .console-observer-icon{display:block}
.console-compact .console-lock-control{position:relative;width:30px;height:30px;justify-content:center;border:1px solid var(--border);border-radius:5px}
.console-compact .console-lock-control input{position:absolute;inset:0;width:100%!important;height:100%;margin:0;opacity:0;cursor:pointer}
.console-compact .console-lock-control .console-lock-icon{display:block;pointer-events:none}
.console-lock-control[data-lock-owner=mine] .console-lock-icon{color:var(--accent)}
.console-lock-control[data-lock-owner=other] .console-lock-icon{color:var(--orange)}
.console-lock-control input:disabled~.console-lock-icon{opacity:.5}
.console-lock-control input:not(:checked)~.console-lock-icon .lock-closed,.console-lock-control input:checked~.console-lock-icon .lock-open{display:none}
.console-compact .console-lock-control:focus-within{outline:2px solid var(--accent);outline-offset:1px}
.console-connection[data-connection=shared] .console-status-icon,.console-connection[data-connection=owned] .console-status-icon{color:var(--accent)}
.console-connection[data-connection=observing] .console-observer-icon{color:var(--orange)}
.console-menu,.console-arrow-keys button,.console-interrupt{-webkit-tap-highlight-color:transparent}

/* One line for the floating map; narrow panes can scroll the control strip. */
.topology-panel.floating .canvas-toolbar{display:contents}
.topology-panel.floating #topology-window-toolbar{flex-wrap:nowrap;gap:6px;overflow-x:auto;touch-action:pan-x;white-space:nowrap;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb,#343d49) var(--toolbar-bg,#141920)}
.topology-panel.floating #topology-window-toolbar>*{flex-shrink:0}
.topology-panel.floating .canvas-toolbar>*{flex-shrink:0}
.topology-panel.floating #topology-window-toolbar>.console-actions{flex-shrink:0;flex-wrap:nowrap;margin-left:auto;max-width:none}
.topology-panel.floating #toggle-inspector{margin-left:0}
.topology-window-title{cursor:move;touch-action:none;font-size:12px}
.topology-panel.floating .canvas-scroll{flex:1}

/* Side-panel controls belong to the docked workspace. */
.topology-panel.floating #toggle-palette,.topology-panel.floating #toggle-inspector{display:none}

/* Toolbars stay one line in every workspace layout. */
.canvas-toolbar,.console-toolbar{
  flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;touch-action:pan-x;
  scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb,#343d49) var(--toolbar-bg,#141920);
}
.canvas-toolbar>*,.console-toolbar>*{flex-shrink:0}
.console-toolbar>.console-actions{flex-shrink:0;flex-wrap:nowrap;max-width:none}
.console-panel.floating .console-title{touch-action:none}
.canvas-toolbar .canvas-hint{min-width:0;flex-shrink:1}

.canvas-hint:empty{display:none}

/* Fixed window edges; only the controls between Move and Hide scroll. */
.console-toolbar,
.topology-panel.floating #topology-window-toolbar{overflow:visible;gap:6px}
.console-toolbar>.toolbar-scroll{display:flex;align-items:center;gap:inherit;flex:1 1 0;min-width:0;height:100%;overflow-x:auto;white-space:nowrap;touch-action:pan-x;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb,#343d49) var(--toolbar-bg,#141920)}
.topology-panel.floating #topology-window-toolbar>.toolbar-scroll{flex:1 1 0}
.toolbar-scroll>*{flex-shrink:0}
.toolbar-scroll>.console-actions{flex-shrink:0;flex-wrap:nowrap;max-width:none}
.window-hide{flex:0 0 32px;min-width:32px;min-height:32px;padding:3px 6px;font-size:18px;background:none;border:0}
.export-log-option{display:flex;align-items:center;gap:8px}
.export-log-option input{width:auto;margin:0;accent-color:var(--accent)}

/* Docked content follows the visible screen above mobile keyboards. */
body{height:var(--app-height,100vh)}
.workspace{height:calc(var(--app-height,100vh) - var(--app-header-height,84px))}

/* Temporary link faults remain visible even after the controls are closed. */
.cable.interrupted,.cable-group:hover .cable.interrupted{stroke:var(--fault-text,#f09b65);stroke-dasharray:7 5}
.link-fault-marker{fill:var(--fault-text,#ffba86);font:bold calc(16px * var(--node-label-scale,1)) LabMono,monospace;paint-order:stroke;stroke:var(--canvas-bg,#12171e);stroke-width:5px;pointer-events:none;dominant-baseline:middle}
.cable-group:focus-visible .cable{stroke:var(--text-strong,#e5e9f0);stroke-width:4}
#link-actions-dialog{width:560px}
#link-actions-state{color:var(--fault-text,#f5bb82);white-space:pre-wrap}
.link-traffic-actions,#link-carrier-actions{display:flex;flex-direction:column;gap:7px}
.link-traffic-actions button,#link-carrier-actions button{text-align:left;white-space:normal}
.link-traffic-actions button[aria-pressed=true]{border-color:var(--accent);background:var(--icon-bg,#213a36)}

.link-traffic-actions button[aria-pressed=true]::before{content:"✓ "}
#link-actions-dialog button{-webkit-tap-highlight-color:transparent}

/* Focus is neutral; active faults are amber, and green means an unimpaired cable. */
#link-actions-dialog button:focus{outline:2px solid var(--text-secondary,#aab6c5);outline-offset:2px}
.link-traffic-actions button[aria-pressed=true]:not([data-link-traffic=none]),#link-actions-dialog .carrier-fault{border-color:var(--fault-border,#d69761);background:var(--fault-bg,#453428)}

/* Local instructions share window gestures, arrangement and thin scrollbars. */
button.popout-button{display:inline-flex;align-items:center;justify-content:center;flex:0 0 30px;width:30px;height:30px;min-width:30px;min-height:30px;padding:0;border-radius:5px}
.popout-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;vertical-align:middle}
html:not([data-allow-popout=true]) .popout-button{display:none!important}
.pane-popout{height:100vh;margin:0;display:flex;flex-direction:column;overflow:hidden}
.pane-window-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto;margin-left:auto}
.pane-window-actions button{height:30px;padding:4px 8px;white-space:nowrap;font-size:12px}
#pane-fullscreen{width:30px;padding:0}
#pane-notice{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);z-index:100;max-width:calc(100% - 24px);padding:8px 12px;border:1px solid var(--border);border-radius:6px;background:var(--panel);font-size:12px;pointer-events:none}
#pane-notice:empty{display:none}
#pane-host{flex:1;min-height:0;display:flex;overflow:hidden}
#pane-host>.browser-detached{position:relative!important;inset:auto!important;width:100%!important;height:100%!important;flex:1;min-width:0;min-height:0;border:0;border-radius:0;box-shadow:none;display:flex!important}
.console-panel.browser-detached .console-terminal{right:2px;bottom:4px}
.browser-detached .console-move,.browser-detached .console-resize,
.browser-detached .popout-button,.browser-detached .window-hide,
.browser-detached #dock-topology,.browser-detached #expand-topology,.browser-detached #fullscreen,
.browser-detached #layout-menu,.browser-detached #detach-console,.browser-detached #expand-console,
.browser-detached [id^="detach-console-"],.browser-detached [id^="expand-console-"],
.browser-detached #detach-console-tab,.browser-detached .console-tab-float,
.browser-detached #agent-maximize,.browser-detached .workspace-float-document,
.browser-detached [data-part=maximize],
.browser-detached [data-float-consoles],.browser-detached [data-dock-consoles],
.browser-detached [data-arrange-windows]{display:none!important}
.instructions-detached{display:none!important}
#instructions-panel:fullscreen{position:fixed!important;inset:0!important;width:100%!important;height:100%!important;border-radius:0}
#instructions-panel:fullscreen #instructions-resize,#instructions-panel:fullscreen #instructions-move{display:none}
.instructions-reader{display:flex;flex-direction:column;height:100vh;margin:0;background:var(--sheet-bg,#131a22)}
.instructions-reader .console-toolbar{flex-shrink:0;padding:8px;gap:8px}
.instructions-reader #reader-title{white-space:nowrap}
.instructions-reader #reader-source{font-size:12px;white-space:nowrap}
.instructions-panel{position:fixed;display:flex;flex-direction:column;pointer-events:auto;background:var(--sheet-bg,#131a22);border:1px solid var(--active-border,#536960);border-radius:10px;box-shadow:0 16px 60px var(--window-shadow,#0009);overflow:hidden}
#instructions-title{max-width:190px;overflow:hidden;text-overflow:ellipsis}
#instructions-toolbar{gap:8px;min-height:44px}
#instructions-toolbar button{white-space:nowrap}
.instructions-body{flex:1;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb,#46545d) var(--sheet-bg,#131a22);padding:20px 24px 32px;line-height:1.65;overflow-wrap:anywhere;user-select:text;color:var(--text-secondary,#d5dce6)}
.instructions-body::-webkit-scrollbar{width:7px;height:7px}
.instructions-body::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb,#46545d);border-radius:4px}
.instructions-body::-webkit-scrollbar-track{background:var(--sheet-bg,#131a22)}
#instructions-source{white-space:nowrap;font-size:12px}
.instructions-body>:first-child>:first-child{margin-top:0}
.instructions-body h1,.instructions-body h2,.instructions-body h3,.instructions-body h4{line-height:1.3;color:var(--text-strong,#eef3fa);margin:1.3em 0 .6em}
.instructions-body h1{font-size:1.8em}.instructions-body h2{font-size:1.45em;border-bottom:1px solid var(--border);padding-bottom:.3em}.instructions-body h3{font-size:1.2em}
.instructions-body p{margin:.75em 0}.instructions-body ul,.instructions-body ol{padding-left:1.7em}.instructions-body li{margin:.3em 0}
.instructions-body code,.instructions-body pre{font-family:LabMono,monospace;font-size:.9em}
.instructions-body code{background:var(--inline-code-bg,#242e3b);padding:.1em .3em;border-radius:3px}
.instructions-body pre{background:var(--code-bg,#0c1117);border:1px solid var(--border);border-radius:6px;padding:12px;overflow:auto;white-space:pre;line-height:1.5}
.instructions-body pre code{font-size:1em;padding:0;background:none}
.instructions-body .instructions-plain{white-space:pre-wrap;overflow-wrap:anywhere;border:0;background:none;padding:0;margin:0;font-size:1em}
.instructions-body table{border-collapse:collapse;display:block;max-width:100%;overflow:auto;margin:1em 0}
.instructions-body th,.instructions-body td{border:1px solid var(--line,#3b4654);padding:.45em .7em;text-align:left}
.instructions-body th{background:var(--table-header,#232e3a)}.instructions-body blockquote{border-left:3px solid var(--accent);padding-left:1em;margin:1em 0;color:var(--text-secondary,#aebccc)}
.instructions-body a{color:var(--accent);text-decoration:underline}.instructions-body .instructions-local-link,.instructions-image{color:var(--muted)}
.instructions-body hr{border:0;border-top:1px solid var(--border);margin:1.4em 0}
.instructions-body input[type=checkbox]{display:inline-block;width:auto;margin:0 .5em 0 0;accent-color:var(--accent)}
.header-actions{overflow-x:auto;flex-shrink:1;scrollbar-width:thin}
.header-actions>button{flex-shrink:0}
@media(max-width:550px){.instructions-body{padding:14px 16px 30px}#instructions-title{max-width:130px}}

.warning-box { margin-top: 12px; padding: 12px; border: 1px solid var(--warning-border,#b88b42); border-radius: 6px; background: var(--warning-bg,#b88b4217); color: var(--warning-text,#e8bd76); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }

.setting-checkbox{display:flex;align-items:center;gap:8px;line-height:1.5}
.setting-checkbox input[type=checkbox]{width:auto;margin:0;flex-shrink:0;accent-color:var(--accent)}

/* Storage remains accessible from docked and floating topology workspaces. */
[data-storage][data-level="low"],[data-storage][data-level="unknown"]{color:var(--orange);border-color:var(--orange)}
[data-storage][data-level="critical"]{color:var(--error-text,#ffaaaa);border-color:var(--error-text,#ffaaaa)}
#storage-dialog{width:min(760px,calc(100vw - 24px));max-height:calc(100dvh - 32px);overflow:auto}
.storage-table{overflow-x:auto}.storage-table table{width:100%;border-collapse:collapse;text-align:left}.storage-table td,.storage-table th{padding:9px 10px;border-bottom:1px solid var(--border);white-space:nowrap}.storage-table td:first-child{white-space:pre-line;overflow-wrap:anywhere;min-width:140px}.storage-table th{color:var(--muted);font-size:12px}

/* Optional Agent window shares the existing floating-window geometry/keyboard controls. */
.agent-panel {position:fixed;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;background:var(--panel,var(--sheet-bg,#171e25));border:1px solid var(--active-border,#536f68);border-radius:12px;box-shadow:0 18px 50px var(--window-shadow,#0006);pointer-events:auto;color:var(--text,var(--text-secondary,#dce5ed))}
.agent-panel[hidden],.agent-panel [hidden] {display:none!important}
.agent-panel .console-toolbar {flex-shrink:0}
.agent-mode,.agent-hint {color:var(--text-muted,#9db0bd);font-size:12px}
.agent-mode {white-space:nowrap}
.agent-tabs,.agent-actions {display:flex;gap:8px;flex-wrap:wrap;padding:8px 12px;flex-shrink:0}
.agent-panel .agent-tabs {padding:5px 12px 0;flex-wrap:nowrap;gap:4px}
.agent-tabs button {flex-shrink:0;white-space:nowrap;border-radius:6px 6px 0 0}
.agent-tabs .needs-attention {box-shadow:inset 0 -3px var(--accent);font-weight:600}
#agent-pending {flex-shrink:0;margin:6px 12px;text-align:left;color:var(--accent)}
.agent-tabs [aria-selected=true] {color:var(--active-text,#76dbc3);background:var(--active-bg,#253d38)}
#agent-status {margin:0;padding:6px 12px;font-size:12px;overflow-wrap:anywhere;border-bottom:1px solid var(--line,#35414c);max-height:80px;overflow:auto;flex-shrink:0}
#agent-tool-error {padding:6px 12px;font-size:12px;max-height:120px;overflow:auto;flex-shrink:0}
#agent-tool-error pre {white-space:pre-wrap;overflow-wrap:anywhere;user-select:text}
#agent-chat {display:flex;flex:1;flex-direction:column;min-height:0;overflow:auto}
.agent-hint {margin:8px 12px;line-height:1.5}
#agent-messages {overflow:auto;min-height:70px;flex:1;padding:0 14px;user-select:text}
#agent-messages article {padding:12px 0;border-bottom:1px solid var(--line,#35414c)}
#agent-messages article>div {white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:1.5;margin-top:7px}
#agent-messages article>strong {font-size:12px;color:var(--active-text,#79dbc3)}
#agent-messages .agent-markdown {white-space:normal;min-width:0}
.agent-markdown p,.agent-markdown ul,.agent-markdown ol,.agent-markdown blockquote,.agent-markdown pre,.agent-markdown .agent-table {margin:0 0 12px}
.agent-markdown>:last-child {margin-bottom:0}
.agent-markdown h1,.agent-markdown h2,.agent-markdown h3,.agent-markdown h4,.agent-markdown h5,.agent-markdown h6 {font-size:1.1em;line-height:1.4;margin:16px 0 8px}
.agent-markdown>:first-child {margin-top:0}
.agent-markdown ul,.agent-markdown ol {padding-left:24px}
.agent-markdown blockquote {border-left:3px solid var(--node-border,#526573);padding-left:12px;color:var(--muted)}
.agent-markdown code {font-family:monospace;background:var(--code-bg,#10171d);padding:1px 4px;border-radius:3px}
.agent-markdown pre {max-width:100%;overflow:auto;white-space:pre;overflow-wrap:normal;background:var(--code-bg,#10171d);padding:10px;border-radius:4px}
.agent-markdown pre code {padding:0;background:none}
.agent-table {max-width:100%;overflow:auto}
.agent-table table {width:100%;border-collapse:collapse}
.agent-table th,.agent-table td {border:1px solid var(--line,#35414c);padding:7px 9px;text-align:left;vertical-align:top;min-width:70px}
.agent-table th {background:var(--table-header,#202c35);font-weight:600}
#agent-prompt-form {padding:8px 12px 14px;flex-shrink:0}
#agent-prompt {width:100%;resize:vertical;max-height:150px;min-height:55px;box-sizing:border-box}
#agent-prompt-form .agent-actions {padding:8px 0 0}
#agent-proposals,#agent-operations,#agent-history {flex:1;min-height:0;overflow:auto;padding:0 12px 12px}
.agent-history-card {padding:12px 0;border-bottom:1px solid var(--border);overflow-wrap:anywhere}
.agent-history-card .agent-actions {padding:0}
.agent-history-rename {display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.agent-history-rename input {min-width:0;flex:1}
#agent-file-hint {margin:0;font-size:11px}
#agent-file-error {color:var(--error-text,#ffb4ab);margin:6px 0;font-size:12px;max-height:70px;overflow:auto}
#agent-attachments {max-height:130px;overflow:auto;margin-top:6px}
#agent-attachments>div {display:flex;align-items:start;gap:6px;margin:4px 0}
#agent-attachments .agent-attachment {flex:1;min-width:0}
.agent-attachment {margin:8px 0;overflow-wrap:anywhere}
.agent-attachment summary {cursor:pointer;color:var(--accent)}
.agent-attachment img {display:block;max-width:100%;max-height:300px;object-fit:contain;margin:8px 0}
.agent-attachment pre {white-space:pre-wrap;overflow-wrap:anywhere;max-height:250px;overflow:auto;user-select:text}
#agent-proposals>div {display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:4px 0;font-size:12px}
#agent-settings {overflow:auto;min-height:0;padding:12px;flex:1}
#agent-settings label {display:block;margin-bottom:12px;font-size:13px}
#agent-settings input,#agent-settings select {display:block;width:100%;margin-top:5px;box-sizing:border-box}
#agent-check-result {font-size:13px;overflow-wrap:anywhere}
#agent-prompt {font:inherit;background:var(--code-bg,#10171d);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:8px;line-height:1.5}
#agent-prompt:focus-visible {outline:2px solid var(--accent);outline-offset:2px}
.agent-panel .console-toolbar {touch-action:pan-x}
.agent-proposal-detail {flex-basis:100%;min-width:0;user-select:text}
.agent-proposal-detail pre {white-space:pre-wrap;overflow-wrap:anywhere;font-size:11px}

/* Agent approvals stay readable without interpreting device/model markup. */
.agent-permission { display: flex !important; flex-direction: row !important; align-items: center; gap: .6rem; }
.agent-permission input { width: auto !important; }
#agent-approvals { min-width: 0; }
.agent-approval { padding: 12px; margin: 8px 0; border: 1px solid var(--border); border-radius: 8px; }
.agent-approval pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; max-height: 180px; overflow: auto; }
.agent-approval button { margin: 4px 6px 0 0; }
.agent-approval p { font-size: 12px; color: var(--muted); }
#agent-approval-dialog { width: 680px; max-height: calc(100dvh - 32px); overflow: auto; }
#agent-approval-detail { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; max-height: 35dvh; overflow: auto; }
#agent-approval-dialog .dialog-actions { flex-wrap: wrap; }
#agent-approval-error { color: var(--error-text,#f4b1b1); }

#agent-progress { display: flex; align-items: center; gap: 8px; padding: 6px 12px; flex-shrink: 0; color: var(--muted); font-size: 12px; }
#agent-progress[hidden] { display: none; }
#agent-progress-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-spinner { width: 11px; height: 11px; flex-shrink: 0; border: 2px solid var(--line,#35414c); border-top-color: var(--accent); border-radius: 50%; animation: agent-spin 1s linear infinite; }
#agent-progress.disconnected .agent-spinner { animation: none; border-top-color: var(--muted); }
@keyframes agent-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .agent-spinner { animation: none; } }

/* Authentication uses the native modal focus trap; roles are enforced server-side. */
#auth-dialog { width: min(420px, calc(100vw - 32px)); }
#auth-dialog label { display: block; margin: 14px 0; }
#auth-dialog .export-log-option { display: flex; }
#auth-dialog input:not([type=checkbox]), #auth-dialog select { width: 100%; }
#auth-error { color: var(--danger, var(--error-text,#f29292)); }
html[data-auth-role=reader] #instructions-open,
html[data-auth-role=writer] #instructions-open { display: none; }

#auth-logout { flex: 0 0 36px; width: 36px; height: 36px; padding: 7px; display: inline-flex; align-items: center; justify-content: center; }
#auth-logout svg { width: 20px; height: 20px; }
#auth-activity{flex:0 0 36px;width:36px;height:36px;padding:7px;display:inline-flex;align-items:center;justify-content:center}
#auth-activity svg{width:20px;height:20px}
#activity-dialog{width:min(1100px,calc(100vw - 24px));max-height:calc(100dvh - 32px);overflow:auto}
.activity-filters{display:flex;gap:12px;flex-wrap:wrap;align-items:end}
.activity-filters label{display:flex;flex-direction:column;gap:4px}
.activity-scroll{max-height:55vh;overflow:auto;scrollbar-width:thin;margin:12px 0}
.activity-scroll table{width:100%;border-collapse:collapse;font-size:13px}
.activity-scroll th,.activity-scroll td{text-align:left;padding:8px;white-space:nowrap;border-bottom:1px solid var(--border)}

#auth-progress { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.auth-spinner { width: 14px; height: 14px; flex: 0 0 14px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: auth-spin .8s linear infinite; }
@keyframes auth-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .auth-spinner { animation: none; } }

/* Named workspace presets use the existing live panels in resizable grid slots. */
.workspace-layout-menu{flex-shrink:0}
.workspace-layout-menu [aria-pressed="true"]{color:var(--accent);background:var(--active-bg,#263631)}
.workarea.workspace-split{display:grid;grid-template-columns:minmax(0,var(--workspace-column,.55fr)) 8px minmax(0,var(--workspace-other,.45fr));grid-template-rows:minmax(0,1fr);overflow:hidden}
.workspace-split>#topology-panel{grid-column:1;grid-row:1;min-height:0}
.workspace-split>#topology-panel .canvas-scroll{min-height:0}
#workspace-column-divider{grid-column:2;grid-row:1}
#workspace-right{grid-column:3;grid-row:1;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);min-height:0;min-width:0;overflow:hidden;background:var(--sheet-bg,#141b23)}
#workspace-right.workspace-stacked{grid-template-rows:auto minmax(0,var(--workspace-row,.5fr)) 8px minmax(0,var(--workspace-bottom,.5fr))}
#workspace-tool-tabs{display:flex;gap:4px;padding:5px 8px 0;border-bottom:1px solid var(--border);overflow:auto}
#workspace-tool-tabs button{flex-shrink:0;border-radius:6px 6px 0 0}
#workspace-tool-tabs [aria-selected="true"]{color:var(--accent);background:var(--active-bg,#263e37)}
.workspace-slot{position:relative;min-height:0;min-width:0;display:flex;overflow:hidden;grid-column:1;grid-row:2}
.workspace-stacked #workspace-console-slot{grid-row:4}
#workspace-row-divider{grid-row:3;grid-column:1;cursor:row-resize}
.workspace-divider{background:var(--divider-bg,#202c32);cursor:col-resize;touch-action:none;position:relative;outline-offset:-2px}
.workspace-divider:hover,.workspace-divider:focus-visible{background:var(--divider-active,#42675c);outline:2px solid var(--accent)}
.workspace-divider:after{content:"";position:absolute;background:var(--divider-grip,#72888c);border-radius:2px}
#workspace-column-divider:after{width:2px;height:40px;left:3px;top:calc(50% - 20px)}
#workspace-row-divider:after{height:2px;width:40px;top:3px;left:calc(50% - 20px)}
.workspace-slot>.workspace-docked{position:relative!important;inset:auto!important;width:100%!important;height:100%!important;flex:1;min-width:0;min-height:0;border:0;border-radius:0;box-shadow:none;z-index:auto!important}
.workspace-slot>.console-panel.no-docked-console{height:100%!important;flex-shrink:1}
.workspace-inactive{display:none!important}
.workspace-docked .console-move,.workspace-docked .console-resize,.workspace-docked #agent-maximize,.workspace-docked #instructions-maximize,.workspace-docked #expand-console,.workspace-docked #console-divider{display:none!important}
.workspace-float-document{display:none}
.workspace-docked .workspace-float-document{display:inline-block}
.workspace-empty{align-self:center;padding:20px;color:var(--muted);font-size:12px}
.workarea.workspace-narrow{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,var(--workspace-column,.55fr)) 8px minmax(0,var(--workspace-other,.45fr))}
.workspace-narrow>#workspace-column-divider{grid-column:1;grid-row:2;cursor:row-resize}
.workspace-narrow>#workspace-right{grid-column:1;grid-row:3}
.workspace-narrow>#workspace-column-divider:after{height:2px;width:40px;top:3px;left:calc(50% - 20px)}

.instructions-empty{color:var(--muted);font-size:13px;line-height:1.6}

/* Agent actions share the selector row; Instructions keeps its own toolbar row. */
#workspace-tool-header{display:flex;align-items:center;min-width:0;border-bottom:1px solid var(--border)}
#workspace-tool-header #workspace-tool-tabs{border-bottom:0;flex-shrink:0;padding-top:0}
#workspace-tool-header #workspace-tool-tabs button{padding:6px 10px}
#workspace-tool-controls{flex:1;min-width:0}
.workspace-docked-toolbar{height:42px;padding:0 6px;border-bottom:0;background:transparent;gap:4px}
.workspace-docked-toolbar .console-move,.workspace-docked-toolbar .topology-window-title,
.workspace-docked-toolbar .toolbar-scroll>strong,.workspace-docked-toolbar [data-arrange-windows],
.workspace-docked-toolbar #agent-maximize,.workspace-docked-toolbar #instructions-maximize{display:none!important}
.workspace-docked-toolbar .workspace-float-document{display:inline-block}
.workspace-docked-toolbar .toolbar-scroll{justify-content:flex-end}
#instructions-toolbar.workspace-docked-toolbar{border-bottom:1px solid var(--border)}
#instructions-toolbar.workspace-docked-toolbar .toolbar-scroll{justify-content:flex-start}
#agent-status-line{display:flex;align-items:center;gap:6px;min-width:0;flex-shrink:0;border-bottom:1px solid var(--border)}
#agent-status-line #agent-status,#agent-status-line #agent-progress{flex:1;min-width:0;border-bottom:0;margin:0}
#agent-status-line #agent-status{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#agent-usage{margin-left:auto;padding:0 8px 0 0;font-size:11px;flex:0 1 auto;min-width:0;max-width:55%}
#agent-usage summary{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:4px;font-size:11px;min-height:0}
#agent-usage .console-menu-list{width:420px;padding:10px}
#agent-usage-summary{cursor:pointer;color:var(--accent)}
#agent-usage-detail{white-space:pre-wrap;line-height:1.6;padding:8px 0;color:var(--muted)}
#agent-usage-refresh{font-size:11px;padding:4px 8px}
#agent-prompt-form{padding:6px 12px 8px}
.agent-message-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#agent-prompt{min-height:44px;height:58px;max-height:120px;resize:vertical}
#agent-prompt-form .agent-actions{gap:5px;padding-top:6px}
#agent-prompt-form .agent-actions button{padding:5px 9px;font-size:12px}
#agent-attachment-help{font-size:10px;color:var(--muted);margin-top:5px}
#agent-attachment-help summary{cursor:pointer}
#agent-draft-hint{font-size:11px;color:var(--muted);margin:5px 0 0}
.workspace-docked #agent-tabs{padding-top:0}

#export-dialog .export-reset-actions{justify-content:space-between;align-items:center;margin-top:8px}

/* Bounded Ethernet capture window: always floats independently of workspace tabs. */
.traffic-panel .console-toolbar{flex-shrink:0}
.traffic-panel .topology-window-title{flex:0 0 auto;font-size:12px}
.traffic-buttons{display:flex;gap:6px;align-items:center;flex-wrap:nowrap}
.traffic-buttons button{padding:6px 8px;font-size:12px;white-space:nowrap}
.traffic-buttons label{display:flex;align-items:center;gap:5px;margin:0;font-size:12px}
.traffic-buttons select{width:auto;padding:4px;margin:0;max-width:140px}
.traffic-buttons input[type=checkbox]{width:auto;margin:0}
.traffic-meta{display:flex;align-items:baseline;justify-content:space-between;gap:4px 16px;flex-wrap:wrap;padding:3px 14px;font-size:11px;color:var(--muted);flex-shrink:0}
.traffic-endpoints{color:var(--text);overflow-wrap:anywhere}
.traffic-meta [data-part=status]{overflow-wrap:anywhere;min-width:0}
.traffic-help>summary{font-size:16px;padding:4px 8px;list-style:none}
.traffic-help>summary::-webkit-details-marker{display:none}
.traffic-help>.console-menu-list{width:350px;white-space:normal;padding:10px 12px;font-size:12px;color:var(--muted)}
.traffic-help p{margin:0;line-height:1.5}
.traffic-help p+p{margin-top:8px}
.traffic-panes{display:flex;flex-direction:column;flex:1;min-height:180px;overflow:hidden}
.traffic-table{flex:60 1 0;min-height:60px;overflow:auto;scrollbar-width:thin}
.traffic-table table{width:100%;border-collapse:collapse;font-size:12px;white-space:nowrap}
.traffic-table th,.traffic-table td{padding:5px 8px;text-align:left;border-bottom:1px solid var(--line,#303c46)}
.traffic-table th{position:sticky;top:0;background:var(--toolbar-bg,#1a222b);z-index:1}
.traffic-table td button{padding:2px 7px;font-size:12px}
.traffic-detail-pane{display:flex;flex-direction:column;flex:40 1 0;min-height:90px;overflow:hidden}
.traffic-divider{height:10px;flex:0 0 10px;display:flex;align-items:center;justify-content:center;cursor:row-resize;touch-action:none;background:var(--divider-bg,#202d33)}
.traffic-divider span{width:60px;height:3px;border-radius:2px;background:var(--divider-grip,#71868e)}
.traffic-divider:hover span,.traffic-divider:focus-visible span{background:var(--accent)}
.traffic-divider:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.traffic-detail-toolbar{display:flex;gap:6px;align-items:center;padding:4px 10px;flex-shrink:0}
.traffic-detail-toolbar button{padding:3px 9px;font-size:12px}
.traffic-detail-toolbar button[aria-pressed=true]{color:var(--accent);background:var(--active-bg,#243b36)}
.traffic-detail-toolbar span{font-size:11px;color:var(--muted)}
.traffic-detail{flex:1;min-height:0;margin:0;padding:10px 14px;overflow:auto;font-size:12px;user-select:text;border-top:1px solid var(--line,#303c46);scrollbar-width:thin}


/* Map workspace: one toolbar, no docked panes consume topology space. */
body.map-workspace>.topbar{display:none}
.map-workspace .workspace{height:var(--app-height,100vh)}
.map-workspace .canvas-toolbar{position:relative;z-index:10;min-height:48px;height:48px;padding:5px 10px;gap:6px}
.map-workspace .canvas-footer,.map-workspace #float-topology,.map-workspace .canvas-hint{display:none}
.map-workspace .panels-compact>.palette,.map-workspace .panels-compact>.inspector{top:48px;bottom:12px;border:1px solid var(--border);border-radius:8px}
.map-workspace #panel-backdrop{top:48px}
#map-workspace-menu>.console-menu-list{width:280px;white-space:normal}
#map-workspace-menu .header-actions{margin:0;display:flex;flex-direction:column;gap:3px;white-space:normal}
#map-workspace-menu .header-actions button{display:block}
#map-workspace-menu .header-actions button span{display:inline}
#map-workspace-menu .lab-heading{padding:8px}
#map-workspace-menu .save-state{display:block;padding:0 8px 8px}
#map-workspace-menu #lab-name{max-width:none}

.map-selection-box{position:fixed;pointer-events:none;border:1px solid var(--accent);background:var(--selection-fill,#67d8bc20);z-index:5}

/* Internet gateway: uses the existing floating document window controls. */
#external-access-dialog textarea { display:block; width:100%; min-height:90px; margin-top:6px; resize:vertical; padding:9px; font:12px LabMono,monospace; background:var(--sheet-bg,#121820); color:var(--text); border:1px solid var(--border); border-radius:6px; }
#external-access-dialog textarea:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.device-icon.cloud { color: var(--accent, #69d5bf); }
.internet-panel { display:flex; flex-direction:column; }
.internet-tabs { display:flex; flex-shrink:0; gap:4px; padding:8px 12px; border-bottom:1px solid var(--border); overflow-x:auto; }
.internet-tabs button { white-space:nowrap; padding:7px 10px; }
.internet-tabs [aria-selected=true] { color:var(--accent); background:var(--active-bg,#263631); border-color:var(--accent); }
.internet-form { display:flex; flex-direction:column; flex:1; min-height:0; }
.internet-content { padding:4px 20px 16px; overflow:auto; flex:1; min-height:0; }
.internet-content label { display:block; margin:12px 0; }
.internet-content input:not([type=checkbox]) { width:100%; min-width:0; }
.internet-content .setting-checkbox { display:flex; }
.internet-content select { width:100%; min-width:0; }
.internet-content h3 { margin:20px 0 8px; }
.internet-content details { margin-top:16px; }
.internet-content p { line-height:1.5; }
.internet-content [role=tabpanel] > h3:first-child { margin-top:8px; }
.internet-footer { display:flex; flex-shrink:0; align-items:center; gap:12px; padding:10px 16px; border-top:1px solid var(--border); }
.internet-footer > div { flex:1; min-width:0; }
.internet-footer p { margin:0; }
.internet-footer [data-part=status] { color:var(--muted); font-size:12px; }
.internet-footer button { flex-shrink:0; }
.internet-routes { overflow-x:auto; }
.internet-routes table { width:100%; border-collapse:collapse; }
.internet-routes th { text-align:left; font-size:12px; color:var(--muted); }
.internet-routes td { padding:4px 6px 4px 0; }
.internet-panel .console-toolbar > strong { min-width:60px; }
.internet-firewall-rules { list-style:none; padding:0; margin:12px 0; }
.internet-firewall-rules > li { padding:10px; margin:10px 0; border:1px solid var(--border); border-radius:6px; }
.internet-rule-toolbar { display:flex; align-items:center; gap:6px; }
.internet-rule-toolbar strong { margin-right:auto; }
.internet-rule-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 12px; }
.internet-rule-fields label { min-width:0; }

/* Unmanaged network annotations: the cloud itself is the node, with no card. */
.device-icon.network { color:var(--text-muted,#94a3b8); }
.map-node.network-cloud { width:calc(180px * var(--cloud-size,1)); height:calc(120px * var(--cloud-size,1)); padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; color:var(--cloud-color,#94a3b8); }
.map-node.network-cloud > svg { width:100%; height:100%; overflow:visible; fill:var(--canvas-bg,#12171e); flex-shrink:0; }
.map-node.network-cloud:hover > svg { filter:brightness(1.25); }
.map-node.network-cloud.selected > svg,.map-node.network-cloud:focus-visible > svg { filter:drop-shadow(0 0 4px var(--cloud-color)); stroke-width:2.5; }
.map-node.network-cloud.linking > svg { stroke:var(--fault-text,#ecaf72); stroke-width:2.5; }
.map-node.network-cloud .node-label { position:absolute; top:48%; left:20%; width:60%; max-width:60%; margin:0; color:var(--text); white-space:normal; overflow:hidden; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; font-size:12px; line-height:1.25; text-align:center; }
.cable.diagram-cable { stroke-dasharray:7 5; }
#node-color { height:36px; padding:3px; }

/* Diagram rectangles sit below cables/devices; only borders, labels and handles take input. */
#diagram-groups { position:absolute; inset:0; pointer-events:none; }
#links { pointer-events:none; }
#links .cable-group { pointer-events:auto; }
#nodes { position:absolute; inset:0; pointer-events:none; }
#nodes > .map-node { pointer-events:auto; }
.map-node.diagram-group { display:block; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; pointer-events:none; color:var(--group-color); }
.diagram-group .group-outline { position:absolute; inset:0; overflow:visible; pointer-events:none; }
.diagram-group .group-outline rect { fill:none; stroke:var(--group-color); stroke-width:2; stroke-dasharray:7 5; pointer-events:stroke; cursor:grab; }
.diagram-group .group-outline .group-hit { stroke:transparent; stroke-width:14; stroke-dasharray:none; }
.diagram-group.selected .group-outline rect:not(.group-hit) { stroke-width:3; stroke-dasharray:none; }
.diagram-group .group-label { position:absolute; top:8px; left:10px; max-width:calc(100% - 30px); padding:3px 6px; border:0; border-radius:2px; background:var(--canvas-bg,#12171e); color:var(--group-color); text-align:left; cursor:grab; pointer-events:auto; touch-action:none; }
.diagram-group .group-label strong { display:block; overflow-wrap:anywhere; font-size:14px; }
.diagram-group .group-notes { display:block; color:var(--text); font-size:12px; font-weight:normal; white-space:pre-wrap; overflow-wrap:anywhere; max-height:180px; overflow:hidden; }
.diagram-group .label-above { top:auto; bottom:calc(100% + 6px); }
.diagram-group .label-right { top:0; left:calc(100% + 8px); width:240px; max-width:240px; }
.diagram-group .group-resize { position:absolute; right:-6px; bottom:-6px; width:24px; height:24px; padding:0; border-color:var(--group-color); color:var(--group-color); pointer-events:auto; touch-action:none; cursor:nwse-resize; visibility:hidden; }
.diagram-group.selected .group-resize,.diagram-group:focus-within .group-resize { visibility:visible; }
#group-settings textarea { width:100%; min-height:80px; resize:vertical; font:inherit; padding:8px; background:var(--canvas-bg,#12171e); color:var(--text); border:1px solid var(--border); border-radius:5px; }
#group-settings .group-dimensions { display:flex; gap:10px; }
#group-settings .group-dimensions > label { flex:1; min-width:0; }
#group-settings .group-sticky { display:flex; align-items:center; gap:8px; }
#group-move-contents { width:auto; }
#group-color { height:36px; padding:3px; }