:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;--bg:#101010;--panel:#181818;--line:#303030;--text:#f1f1f1;--muted:#999;--teal:#d5d5d5;--blue:#adb5b9;--purple:#b6b1ba;--amber:#bbb2a4;--rose:#c0aaa8;--shadow:0 20px 55px #0006}
*{box-sizing:border-box}html,body{min-height:100%;margin:0;background:var(--bg);color:var(--text)}body{min-width:320px;font-size:13px}button,input,textarea,select{font:inherit}button{color:inherit;cursor:pointer}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,svg:focus-visible{outline:2px solid var(--teal);outline-offset:2px}button:disabled{opacity:.48;cursor:not-allowed}[hidden]{display:none!important}
.app-shell{min-height:100vh;display:grid;grid-template-columns:244px minmax(0,1fr)}.sidebar{position:fixed;inset:0 auto 0 0;z-index:20;width:244px;display:flex;flex-direction:column;padding:22px 16px 14px;background:#0f171f;border-right:1px solid #1e2a34}.brand-lockup{display:flex;align-items:center;gap:10px;margin:0 0 40px 7px;font-size:19px;letter-spacing:-.6px;font-weight:660}.brand-mark{width:24px;height:24px;display:grid;grid-template-columns:repeat(2,8px);grid-template-rows:repeat(2,8px);gap:3px;transform:rotate(-8deg)}.brand-mark i{display:block;border-radius:3px;background:var(--teal);box-shadow:0 0 15px #49d6bb38}.brand-mark i:nth-child(2),.brand-mark i:nth-child(3){opacity:.52}
.eyebrow{color:#778894;font-size:9px;line-height:1.4;letter-spacing:1.35px;font-weight:700;text-transform:uppercase}.sidebar-label-row{display:flex;align-items:center;justify-content:space-between;padding:0 7px 11px}.icon-button{display:inline-grid;place-items:center;min-width:32px;height:32px;padding:0 6px;border:1px solid transparent;border-radius:8px;color:#9aa8b1;background:transparent;font-size:16px}.icon-button:hover{border-color:var(--line);background:#18232d;color:var(--text)}.icon-button.small{width:27px;height:27px;font-size:15px}
.project-list{display:grid;gap:3px;max-height:min(54vh,540px);overflow:auto}.project-row{width:100%;display:grid;grid-template-columns:26px minmax(0,1fr) 22px;align-items:center;gap:8px;padding:8px 7px;border:1px solid transparent;border-radius:8px;background:transparent;text-align:left;color:#a6b3bd}.project-row:hover{background:#151f28;color:var(--text)}.project-row.active{color:#e9f7f4;background:#18252d;border-color:#243b40}.project-monogram{display:grid;place-items:center;width:25px;height:25px;border-radius:7px;color:#81ddc8;background:#19332f;border:1px solid #24504a;font-size:10px;font-weight:720}.project-row:nth-child(3n+2) .project-monogram{color:#9fc9eb;background:#1b2e3b;border-color:#2b485b}.project-row:nth-child(3n) .project-monogram{color:#c7b4fa;background:#2a2440;border-color:#44386b}.project-name-wrap{min-width:0}.project-name{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12px;font-weight:560}.project-meta{display:block;margin-top:3px;color:#758691;font-size:10px}.project-count{color:#70818d;font-size:10px;text-align:right}
.sidebar-import{margin:17px 2px 0;width:calc(100% - 4px);min-height:40px;display:flex;align-items:center;gap:9px;padding:0 10px;border:1px dashed #34434d;border-radius:9px;background:transparent;color:#b8c6cc;text-align:left}.sidebar-import:hover{border-color:#666;background:#202020;color:#eee}.import-glyph{font-size:16px;color:var(--teal)}.sidebar-import kbd{margin-left:auto;color:#74848e;font-size:9px}.sidebar-bottom{margin-top:auto}.local-status{display:flex;align-items:center;gap:10px;padding:12px 8px;border-top:1px solid #202c35}.status-dot{display:inline-block;width:7px;height:7px;flex:0 0 auto;border-radius:50%;background:#bbb;box-shadow:none}.local-status strong,.local-status small{display:block}.local-status strong{font-size:11px;font-weight:570}.local-status small{margin-top:4px;color:#74838e;font-size:10px}.sidebar-link{width:100%;display:flex;align-items:center;gap:9px;padding:9px 8px;border:0;background:transparent;color:#84939d;text-align:left;font-size:11px}.sidebar-link:hover{color:var(--text)}.quiet-link{justify-content:space-between;cursor:default;border-top:1px solid #202c35;margin-top:5px;padding-top:13px}.version{color:#55646e;font-size:10px}
.main-area{grid-column:2;min-width:0;min-height:100vh;display:flex;flex-direction:column}.topbar{height:52px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #292929;background:#111}.breadcrumbs{display:flex;align-items:center;gap:10px;color:#71818c;font-size:11px}.breadcrumbs strong{color:#c1ccd1;font-weight:550}.crumb-sep{color:#42515b}.topbar-actions{display:flex;align-items:center;gap:17px}.saved-indicator{display:inline-flex;align-items:center;gap:7px;color:#85959e;font-size:10px}.saved-indicator .status-dot{width:6px;height:6px}.avatar-button{width:27px;height:27px;border:1px solid #444;border-radius:50%;color:#ddd;background:#222;font-size:10px;font-weight:650}
.page-heading{position:relative;display:flex;justify-content:space-between;gap:18px;padding:26px 30px 17px}.heading-copy{min-width:0}.heading-copy .eyebrow{color:#54bea9}h1{margin:7px 0 5px;color:#eff4f4;font-size:clamp(23px,2.4vw,29px);line-height:1.18;letter-spacing:-.85px;font-weight:620}.heading-copy p{max-width:680px;margin:0;color:#85949d;font-size:12px;line-height:1.6}.heading-actions{position:relative;display:flex;flex:0 0 auto;align-items:flex-start;gap:8px;padding-top:11px}.button{min-height:34px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 12px;border:1px solid transparent;border-radius:8px;font-size:11px;font-weight:570;transition:background .16s,border-color .16s,transform .16s}.button:active{transform:translateY(1px)}.button.primary{color:#08211c;border-color:#65ddc3;background:#59d5bb;box-shadow:0 3px 12px #2cc2a41f}.button.primary:hover{background:#73e5cd}.button.secondary{color:#c2ccd1;border-color:#2b3943;background:#151f28}.button.secondary:hover{background:#202d37;border-color:#3b4c57}.button.danger{color:#fff1f0;border-color:#824748;background:#a94345}.button-caret{margin-left:3px;opacity:.7}.export-menu{position:absolute;z-index:30;top:51px;right:0;width:172px;padding:5px;border:1px solid #33434d;border-radius:9px;background:#151f28;box-shadow:var(--shadow)}.export-menu button{width:100%;padding:9px 10px;border:0;border-radius:6px;background:transparent;color:#c5d0d5;text-align:left;font-size:11px}.export-menu button:hover{background:#223139;color:#eff8f5}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.toolbar{min-height:47px;display:flex;align-items:center;gap:12px;padding:0 30px 11px}.search-field{width:min(264px,28vw);height:32px;display:flex;align-items:center;gap:7px;padding:0 8px;border:1px solid #383838;border-radius:7px;background:#181818;color:#aaa}.search-field>span{font-size:17px}.search-field input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#dfe7e9;font-size:11px}.search-field input::placeholder{color:#697984}.search-field kbd{flex:0 0 auto;padding:2px 4px;border:1px solid #2b3943;border-radius:4px;color:#73838d;font-size:9px}.toolbar-divider{height:19px;border-left:1px solid #26323b}.filter-group{min-width:0;display:flex;align-items:center;gap:5px;overflow:auto;scrollbar-width:none}.filter-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border:1px solid transparent;border-radius:6px;background:transparent;color:#85939d;font-size:10px}.filter-chip:hover{background:#151f27;color:#d6e0e2}.filter-chip.active{border-color:#454545;background:#252525;color:#f0f0f0}.filter-chip .chip-count{color:#72838d;font-size:9px}.type-dot{width:6px;height:6px;border-radius:50%;background:var(--teal)}.type-dot[data-type="api"],.type-dot[data-type="backend"],.type-dot[data-type="service"]{background:var(--blue)}.type-dot[data-type="database"],.type-dot[data-type="file"]{background:var(--amber)}.type-dot[data-type="external"],.type-dot[data-type="queue"]{background:var(--purple)}.type-dot[data-type="job"],.type-dot[data-type="ipc"]{background:var(--rose)}.toolbar-spacer{flex:1}.toolbar-button{height:31px;flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:0 8px;border:1px solid transparent;border-radius:7px;background:transparent;color:#98a7af;font-size:10px}.toolbar-button:hover{border-color:#2a3942;background:#152129;color:#d7e3e3}.toolbar-button span{color:#ccc;font-size:13px}.toolbar-button.add-node{border-color:#454545;background:#222;color:#e5e5e5}.toolbar-button.add-node:hover{border-color:#666;background:#2c2c2c}
.graph-workspace{flex:1 1 auto;min-height:400px;display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:12px;padding:0 18px 13px 20px}.graph-stage{position:relative;min-width:0;min-height:400px;overflow:hidden;border:1px solid #27343e;border-radius:11px;background-color:#0f171e;background-image:radial-gradient(#31414a .7px,transparent .7px);background-size:23px 23px;box-shadow:inset 0 0 65px #0002}.graph-svg{position:absolute;inset:0;width:100%;height:100%;cursor:grab;touch-action:none;outline:0}.graph-svg.is-panning{cursor:grabbing}.canvas-caption{position:absolute;top:15px;left:17px;z-index:2;display:flex;align-items:center;gap:8px;color:#85959d;font-size:8px;letter-spacing:1.15px;font-weight:700;pointer-events:none}.live-dot{width:6px;height:6px;border-radius:50%;background:#48cfad;box-shadow:0 0 9px #48cfad99}.caption-sep{color:#445660}.graph-controls{position:absolute;right:13px;bottom:13px;z-index:3;display:flex;align-items:center;padding:4px;border:1px solid #30404a;border-radius:8px;background:#101920f2;box-shadow:0 5px 15px #0004}.graph-controls button{width:29px;height:27px;border:0;border-radius:5px;background:transparent;color:#a1b0b7;font-size:15px}.graph-controls button:hover{background:#25343d;color:#fff}.graph-controls span{height:16px;margin:0 4px;border-left:1px solid #33434b}.canvas-help{position:absolute;bottom:21px;left:18px;z-index:2;display:flex;align-items:center;gap:8px;color:#71818b;font-size:9px;pointer-events:none}.canvas-help i{width:3px;height:3px;border-radius:50%;background:#4c5d67}.drop-overlay{position:absolute;inset:8px;z-index:10;display:grid;place-items:center;border:1px dashed #5bcab2;border-radius:8px;background:#0d221ee6;pointer-events:none}.drop-overlay>div{display:grid;gap:7px;text-align:center}.drop-overlay strong{color:#d7f6ee;font-size:17px}.drop-overlay span{color:#98c2b7;font-size:11px}.empty-state{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:28px;text-align:center;background:#0c1319a6}.empty-icon{display:grid;place-items:center;width:48px;height:48px;margin-bottom:14px;border:1px solid #316255;border-radius:14px;color:#7de0c8;background:#18332d;font-size:24px}.empty-state h2{margin:0 0 6px;font-size:17px}.empty-state p{max-width:320px;margin:0 0 16px;color:#8c9ba4;line-height:1.6;font-size:11px}.empty-state-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.inspector{min-width:0;display:flex;flex-direction:column;overflow:hidden;border:1px solid #27343e;border-radius:11px;background:#111a22}.inspector-head{display:flex;align-items:center;justify-content:space-between;padding:15px 14px 12px;border-bottom:1px solid #24313b}.inspector-head h2{margin:5px 0 0;color:#dfe6e8;font-size:13px;font-weight:570}.inspector-content{flex:1;min-height:0;overflow:auto}.inspector-empty{height:100%;min-height:190px;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:24px;color:#87969e;text-align:center}.inspector-empty-icon{width:36px;height:36px;display:grid;place-items:center;margin-bottom:13px;border:1px solid #30424a;border-radius:50%;color:#6c9d91;font-size:18px}.inspector-empty strong{color:#c4ced1;font-size:11px;font-weight:560}.inspector-empty p{max-width:190px;margin:7px 0 0;color:#75858f;font-size:10px;line-height:1.6}.inspector-footer{padding:11px 14px;border-top:1px solid #24313b}.text-button{padding:3px 0;border:0;background:transparent;color:#6ed7c0;font-size:10px}.text-button:hover{color:#a3f2e2}.statusbar{min-height:31px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 22px;color:#72818b;border-top:1px solid #1f2a34;background:#0e151c;font-size:9px}.statusbar>div{display:flex;align-items:center;gap:8px}.status-pulse{width:5px;height:5px;border-radius:50%;background:#48c5a9}.status-right{color:#778791}.status-separator{color:#3f505b}
.node-card{cursor:pointer}.node-card .card-bg{fill:#17222b;stroke:#34434d;stroke-width:1;transition:fill .14s,stroke .14s,filter .14s}.node-card:hover .card-bg{fill:#1b2a33;stroke:#527168}.node-card.selected .card-bg{fill:#1b2b32;stroke:#62d3bb;stroke-width:1.5;filter:drop-shadow(0 5px 12px #38d1b222)}.node-card.search-hit .card-bg{stroke:#dfba64;stroke-width:1.5}.node-card.dimmed{opacity:.2}.node-card.filtered,.edge-group.filtered{display:none}.node-card .card-accent{fill:var(--teal)}.node-card .card-type{fill:#88aa9f;font-size:8px;font-weight:700;letter-spacing:1px;text-transform:uppercase}.node-card .card-title{fill:#e7eff0;font-size:12px;font-weight:610}.node-card .card-desc{fill:#8797a0;font-size:9px}.node-card .card-source{fill:#6ea897;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:8px}.node-card .card-port{fill:#0f171e;stroke:#7b9d92;stroke-width:1}.edge-path{fill:none;stroke:#485b64;stroke-width:1.25;marker-end:url(#arrow)}.edge-path.highlight{stroke:#54b8a2;stroke-width:1.7}.edge-path.dimmed,.edge-group.dimmed{opacity:.18}.edge-label-bg{fill:#111b22;stroke:#2b3b43;stroke-width:.8}.edge-label{fill:#8da09f;font-size:8px;text-anchor:middle}
.inspector-body{padding:13px 14px 16px}.detail-type{display:inline-flex;align-items:center;gap:7px;padding:5px 7px;border:1px solid #2d4843;border-radius:5px;color:#aed9ce;background:#172a27;font-size:9px}.detail-title{margin:12px 0 7px;color:#edf2f2;font-size:16px;line-height:1.3;font-weight:620}.detail-description{margin:0;color:#a0adb3;font-size:11px;line-height:1.65;overflow-wrap:anywhere}.detail-section{margin-top:18px}.detail-section h3{margin:0 0 8px;color:#768891;font-size:9px;text-transform:uppercase;letter-spacing:.8px}.source-pill{display:block;padding:8px 9px;border:1px solid #263740;border-radius:6px;background:#0e171d;color:#8ebcad;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:9px;line-height:1.45;overflow-wrap:anywhere}.connection-item{display:flex;align-items:center;gap:7px;padding:6px 0;color:#aeb9bd;font-size:10px}.connection-item button{min-width:0;overflow:hidden;padding:0;border:0;background:transparent;color:#c5d0d2;text-align:left;text-overflow:ellipsis;white-space:nowrap}.connection-item button:hover{color:#75ddc6}.connection-arrow{flex:0 0 auto;color:#568e82}.connection-label{margin-left:auto;color:#70818b;font-size:9px}.inspector-actions{display:flex;gap:6px;margin-top:17px}.edge-inspector-actions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}.edge-inspector-actions button{min-width:0;padding:0 2px;white-space:nowrap}.inspector-actions.edge-inspector-actions button{font-size:8px}.inspector-actions button{flex:1;min-height:29px;border:1px solid #30404a;border-radius:6px;background:#18232b;color:#adbbc0;font-size:9px}.inspector-actions button:hover{background:#22323a;color:white}.inspector-actions .delete-action{flex:0 0 31px;color:#e39b9b}
.modal{width:min(530px,calc(100% - 28px));max-width:530px;max-height:min(90vh,760px);padding:0;overflow:auto;border:1px solid #34444e;border-radius:14px;background:#121c24;color:var(--text);box-shadow:var(--shadow)}.modal::backdrop{background:#03080cb8;backdrop-filter:blur(5px)}.modal-shell{padding:21px 22px 16px}.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.modal-head h2{margin:6px 0 5px;font-size:20px;font-weight:610;letter-spacing:-.3px}.modal-head p{max-width:390px;margin:0;color:#8c9ba4;font-size:11px;line-height:1.55}.import-tabs{display:flex;gap:16px;margin-top:22px;border-bottom:1px solid #2b3942}.tab{position:relative;padding:0 0 10px;border:0;background:transparent;color:#8998a1;font-size:11px}.tab.active{color:#d8eee8}.tab.active:after{position:absolute;right:0;bottom:-1px;left:0;height:2px;background:var(--teal);content:""}.import-panel{padding-top:15px}.field-label,.field>span{display:block;margin-bottom:7px;color:#aebbc0;font-size:10px;font-weight:560}textarea,input,select{color:#e0e8e9}#json-input{width:100%;min-height:220px;resize:vertical;padding:11px;border:1px solid #30414b;border-radius:8px;background:#0d151b;color:#c5d9d8;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:10px;line-height:1.55}#json-input::placeholder{color:#657780}.field-hint{margin-top:7px;color:#758690;font-size:9px}.file-picker{min-height:170px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;border:1px dashed #3a514e;border-radius:9px;color:#9eafb3;background:#101a20;cursor:pointer}.file-picker:hover{border-color:#5acdb3;background:#12231f}.file-picker strong{color:#d8e8e4;font-size:12px}.file-picker>span:last-of-type{color:#809198;font-size:10px}.file-icon{display:grid;place-items:center;width:34px;height:34px;margin-bottom:4px;border-radius:10px;color:#7cddc4;background:#1a342e;font-size:10px}.file-picker input{position:absolute;width:1px;height:1px;opacity:0}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px 12px;margin-top:23px}.field{min-width:0}.field input,.field textarea,.field select{width:100%;min-height:36px;padding:8px 10px;border:1px solid #30404a;border-radius:7px;background:#0e171d;color:#dce6e7;outline:0;font-size:11px}.field input:focus,.field textarea:focus,.field select:focus{border-color:#4f9c8d}.field textarea{min-height:76px;resize:vertical}.field em{color:#71828c;font-style:normal;font-weight:400}.full-field{grid-column:1/-1}.form-error{margin-top:11px;padding:8px 10px;border:1px solid #714244;border-radius:6px;color:#ffc0bb;background:#301d20;font-size:10px;line-height:1.45}.modal-foot{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:20px;padding-top:13px;border-top:1px solid #293740}.modal-foot-split{justify-content:space-between}.modal-foot-split>div{display:flex;gap:8px}.danger-button{padding:7px 8px;border:0;background:transparent;color:#df9292;font-size:10px}.danger-button:hover{color:#ffc0bb}.compact-modal{width:min(420px,calc(100% - 28px))}
.toast-region{position:fixed;inset:auto auto 43px 50%;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);z-index:60;display:grid;gap:8px}.toast{max-width:min(380px,calc(100vw - 36px));padding:11px 14px;border:1px solid #345148;border-radius:8px;color:#d5ebe5;background:#172721;box-shadow:var(--shadow);font-size:11px;line-height:1.5;animation:toast-in .2s ease-out}.toast.error{border-color:#714244;color:#ffd0ca;background:#2b1c1e}@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.mobile-menu{display:none;width:auto;padding:0 8px;font-size:10px}
@media(min-width:1500px){.graph-workspace{grid-template-columns:minmax(0,1fr) 292px}.page-heading{padding-top:34px}}
@media(max-width:1100px){.app-shell{grid-template-columns:210px minmax(0,1fr)}.sidebar{width:210px}.graph-workspace{grid-template-columns:minmax(0,1fr) 238px;padding-right:13px}.toolbar{gap:7px;padding-left:22px;padding-right:22px}.page-heading,.topbar{padding-left:22px;padding-right:22px}.filter-chip{padding:6px}}
@media(max-width:820px){.app-shell{display:block}.sidebar{transform:translateX(-102%);transition:transform .2s;box-shadow:var(--shadow)}.sidebar.open{transform:translateX(0)}.main-area{min-height:100vh}.mobile-menu{display:inline-grid}.topbar{justify-content:flex-start;gap:10px;padding:0 16px}.topbar-actions{margin-left:auto}.page-heading{padding:23px 17px 15px}.toolbar{padding:0 17px 10px;flex-wrap:wrap}.search-field{width:min(280px,calc(100vw - 34px))}.toolbar-divider{display:none}.filter-group{order:5;flex-basis:100%}.toolbar-spacer{display:none}.graph-workspace{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(390px,1fr) auto;padding:0 12px 10px}.graph-stage{min-height:390px}.inspector{max-height:340px;min-height:180px}.statusbar{padding:0 13px}}
@media(max-width:560px){.topbar{height:48px}.breadcrumbs{gap:6px;font-size:10px}.saved-indicator{display:none}.page-heading{display:block}.heading-copy p{font-size:11px}.heading-actions{padding-top:13px}.heading-actions .button{min-height:31px}.toolbar-button{font-size:9px;padding:0 6px}.canvas-help{bottom:57px;left:12px;gap:5px;font-size:8px}.graph-controls{right:8px;bottom:9px}.form-grid{grid-template-columns:1fr}.full-field{grid-column:auto}.modal-shell{padding:17px 16px 13px}.status-right{gap:5px!important;font-size:8px}}

:root{--bg:#101010;--panel:#181818;--line:#303030;--text:#f1f1f1;--muted:#999;--quiet:#666;--teal:#d5d5d5;--teal-deep:#aaa;--blue:#adb5b9;--purple:#b6b1ba;--amber:#bbb2a4;--rose:#c0aaa8;--shadow:0 20px 55px #0009}
.sidebar{background:#111;border-color:#242424}.main-area{background:#101010}.brand-mark i{background:#dedede;box-shadow:none}.brand-mark i:nth-child(2),.brand-mark i:nth-child(3){opacity:.62}.project-monogram,.project-row:nth-child(3n+2) .project-monogram,.project-row:nth-child(3n) .project-monogram{color:#ddd;background:#202020;border-color:#383838}.project-row.active{color:#fff;background:#1c1c1c;border-color:#404040}.status-dot,.live-dot,.status-pulse{background:#bbb;box-shadow:none}.heading-copy .eyebrow{color:#aaa}
.button.primary{color:#171717;border-color:#f4f4f4;background:#f1f1f1;box-shadow:none}.button.primary:hover{background:#fff}.button.secondary{color:#d1d1d1;border-color:#383838;background:#1a1a1a}.button.secondary:hover{background:#262626;border-color:#505050}.toolbar-button.add-node{border-color:#454545;background:#222;color:#e5e5e5}.toolbar-button.add-node:hover{border-color:#666;background:#2c2c2c}.toolbar-button span,.text-button{color:#ccc}.text-button:hover{color:#fff}
.graph-stage{background-color:#111;background-image:radial-gradient(#303030 .7px,transparent .7px);box-shadow:inset 0 0 65px #0003}.graph-controls{border-color:#3b3b3b;background:#181818}.graph-controls button:hover{background:#303030}.empty-icon{border-color:#444;color:#ddd;background:#222}.drop-overlay{border-color:#c6c6c6;background:#151515ee}.drop-overlay strong,.drop-overlay span{color:#eee}
.inspector,.modal{border-color:#333;background:#181818}.inspector-head h2,.inspector-empty strong,.detail-title{color:#eee}.inspector-empty-icon{border-color:#444;color:#bbb}.inspector-footer,.inspector-head{border-color:#303030}.detail-type{border-color:#414141;color:#ddd;background:#222}.source-pill{border-color:#383838;background:#111;color:#c1c1c1}.connection-item button{color:#ddd}.connection-arrow{color:#aaa}.connection-label{color:#888}
.node-card .card-bg{fill:#191919;stroke:#393939}.node-card:hover .card-bg{fill:#202020;stroke:#686868}.node-card.selected .card-bg{fill:#212121;stroke:#eee;filter:none}.node-card.search-hit .card-bg{stroke:#d0c5aa}.node-card .card-type{fill:#a4a4a4}.node-card .card-title{fill:#f1f1f1}.node-card .card-desc{fill:#aaa}.node-card .card-source{fill:#aaa}.node-card .card-port{fill:#111;stroke:#999}.edge-path{stroke:#686868}.edge-path.connected{stroke:#ddd}.edge-path.dimmed,.edge-group.dimmed{opacity:.2}.edge-label-bg{fill:#171717;stroke:#3a3a3a}.edge-label{fill:#aaa}.edge-arrow{fill:none;stroke:#888;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}.edge-arrow.connected{stroke:#e7e7e7}.edge-beam{fill:#f1f1f1;filter:none}.node-card.arrival .card-bg{animation:atlas-arrival .32s ease-out}
.node-card.entering{opacity:0;animation:atlas-card-in .24s ease-out forwards}.edge-path.draw-in{animation:atlas-edge-draw .62s cubic-bezier(.24,.7,.28,1) var(--draw-delay,0s) forwards}.edge-arrow.show-after{opacity:0;animation:atlas-arrow-in .18s ease-out calc(var(--draw-delay,0s) + .62s) forwards}.edge-group .edge-label-bg,.edge-group .edge-label{opacity:1}.edge-group.label-delayed .edge-label-bg,.edge-group.label-delayed .edge-label{opacity:0;animation:atlas-label-in .3s ease-out calc(var(--draw-delay,0s) + .62s) forwards}
.edge-path.connected{stroke-dasharray:7 8;animation:atlas-flow 4.8s linear infinite}.motion-paused .edge-path.connected{animation-play-state:paused}.motion-paused .edge-path.draw-in,.motion-paused .edge-arrow.show-after,.motion-paused .edge-group.label-delayed .edge-label-bg,.motion-paused .edge-group.label-delayed .edge-label{animation-play-state:paused}
.share-url-input{width:100%;height:38px;margin-top:4px;padding:8px 10px;border:1px solid #414141;border-radius:7px;background:#101010;color:#d7d7d7;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:10px}
.heading-actions{flex-wrap:wrap;justify-content:flex-end}.toolbar-button#pause-motion[aria-pressed="true"]{border-color:#666;background:#292929;color:#fff}
@keyframes atlas-card-in{from{opacity:0}to{opacity:1}}@keyframes atlas-edge-draw{to{stroke-dashoffset:0}}@keyframes atlas-arrow-in{to{opacity:1}}@keyframes atlas-label-in{to{opacity:1}}@keyframes atlas-flow{to{stroke-dashoffset:-32}}@keyframes atlas-arrival{0%{stroke:#fff}40%{stroke:#c9c9c9}100%{stroke:#393939}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.node-card.entering{opacity:1;animation:none}.edge-beam{display:none}.edge-path.connected{animation:none}#pause-motion{display:none}}
@media(max-width:560px){.heading-actions{justify-content:flex-start}}


/* Neutral controls and layout-safe card entrance; animation never overrides SVG translation. */
@keyframes atlas-card-in{from{opacity:0}to{opacity:1}}
.motion-paused .node-card.entering{animation-play-state:paused}
.topbar,.statusbar{border-color:#292929;background:#111}
.breadcrumbs{color:#888}.breadcrumbs strong{color:#ddd}.crumb-sep{color:#555}
.saved-indicator{color:#999}.avatar-button{border-color:#444;color:#ddd;background:#222}
.search-field{border-color:#383838;background:#181818;color:#aaa}.search-field input{color:#eee}.search-field input::placeholder{color:#777}.search-field kbd{border-color:#444;color:#999}
.toolbar-divider{border-color:#353535}.filter-chip{color:#aaa}.filter-chip:hover{background:#222;color:#eee}.filter-chip.active{border-color:#454545;background:#252525;color:#f0f0f0}.filter-chip .chip-count{color:#888}
.sidebar-import:hover{border-color:#666;background:#202020;color:#eee}.import-glyph{color:#ccc}
.toolbar-button:hover{border-color:#414141;background:#222;color:#eee}.toast{border-color:#414141;color:#ddd;background:#1a1a1a}.toast.error{border-color:#4a4a4a;color:#eee;background:#262626}
/* Keep secondary surfaces consistent with the neutral graph workspace. */
.inspector-actions button{border-color:#414141;background:#222;color:#ddd}.inspector-actions button:hover{background:#303030;border-color:#666}.inspector-actions .delete-action{color:#bbb}
.export-menu{border-color:#414141;background:#1a1a1a}.export-menu button{color:#ddd}.export-menu button:hover{background:#303030;color:#fff}
.field input,.field textarea,.field select,.json-input{border-color:#414141;background:#111;color:#ddd}.field input:focus,.field textarea:focus,.field select:focus,.json-input:focus{border-color:#888}
.import-tabs{border-color:#333}.connection-item button:hover{color:#fff}.empty-state{background:#111a}
#json-input,#prompt-text{border-color:#414141;background:#111;color:#ddd}#json-input:focus,#prompt-text:focus{border-color:#888}.file-picker{border-color:#414141;background:#151515;color:#aaa}.file-picker:hover{border-color:#888;background:#222}.file-icon{color:#ccc}.tab.active{color:#eee;border-color:#aaa}
/* Trace opacity remains authoritative after the entrance reveal. */
.node-card.entering{opacity:1;animation:atlas-card-in .24s ease-out}.node-card.entering.dimmed{opacity:.2;animation:none}
/* Foglamp-inspired graph focus and pause-aware SVG motion accents. */
.node-card,.edge-group{transition:opacity .3s ease}
.node-card.dimmed{opacity:.2}
.node-card.focus-dimmed{opacity:.25}
.node-card.dimmed.focus-dimmed{opacity:.16}
.edge-group.dimmed{opacity:.18}
.edge-group.focus-dimmed{opacity:.15}
.edge-group.dimmed.focus-dimmed{opacity:.12}
.filter-chip{transition:opacity .3s ease,background .16s,border-color .16s,color .16s}
.filter-group.has-spotlight .filter-chip:not(.spotlight-active){opacity:.42}
.filter-chip.spotlight-active .type-dot{transform:scale(1.35);filter:drop-shadow(0 0 3px currentColor)}
.node-card .card-bg,.node-card .agent-beam,.node-card .card-arrival{rx:var(--graph-card-radius,18px)}
.node-card .card-accent{fill:var(--node-accent,var(--graph-accent,currentColor))}
.node-card .card-arrival{fill:none;pointer-events:none}
.node-card .agent-beam{fill:none;pointer-events:none}
.edge-group .type-only-label{opacity:0;transition:opacity .3s ease}
.edge-group.trace-label .type-only-label{opacity:1}
.edge-group.label-delayed .type-only-label{animation:none}
.edge-path.connected{stroke:var(--graph-accent,currentColor);stroke-width:1.6;stroke-dasharray:none;animation:none}
.edge-arrow.connected{stroke:var(--graph-accent,currentColor)}
.edge-beam{pointer-events:none}
@media(prefers-reduced-motion:reduce){
  .node-card,.edge-group,.filter-chip{transition:none}
  .node-card .agent-beam,.node-card .card-arrival,.edge-beam{display:none}
  .edge-path.connected{animation:none}
}

/* Keep the circular connection ports; connector arrowheads are owner-disabled. */
.edge-arrow { display: none; }
.edge-path { marker-end: none; }

.incoming-share-error{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 30px 12px;padding:12px 14px;border:1px solid #714244;border-radius:8px;background:#301d20;color:#ffc0bb}
.incoming-share-error[hidden]{display:none}
.incoming-share-copy{min-width:0}
.incoming-share-copy strong{display:block;color:#ffe0dc;font-size:11px;font-weight:620}
.incoming-share-copy p{margin:4px 0 0;color:#ffc0bb;font-size:10px;line-height:1.5;overflow-wrap:anywhere}
.incoming-share-actions{display:flex;flex:0 0 auto;gap:8px}
@media(max-width:1100px){.incoming-share-error{margin-right:22px;margin-left:22px}}
@media(max-width:820px){.incoming-share-error{margin-right:17px;margin-left:17px}}
@media(max-width:560px){.incoming-share-error{align-items:flex-start;flex-direction:column;gap:10px;padding:11px}.incoming-share-actions{width:100%;flex-wrap:wrap}.incoming-share-actions .button{min-height:32px}}

/* Measured chart controls in the component editor. */
.chart-editor{margin-top:18px;padding:12px;border:1px solid var(--line);border-radius:11px;background:var(--panel);color:var(--text)}.chart-editor-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--text);font-size:11px}.chart-editor-heading label{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:10px}.chart-editor-heading input{accent-color:var(--teal)}.chart-editor>.field-hint{margin:6px 0 0;line-height:1.5}.chart-form-grid{margin-top:14px}.chart-form-grid textarea{min-height:72px}
.online-control-button{min-height:29px;padding:0 10px;font-size:10px}
.online-route-banner{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 30px 12px;padding:11px 14px;border:1px solid #335047;border-radius:9px;background:#14231f;color:#cee2dc}
.online-route-banner[hidden]{display:none}
.online-route-banner strong{font-size:11px;font-weight:600}
.online-route-banner p{margin:4px 0 0;color:#92aaa2;font-size:10px;line-height:1.5}
.online-route-actions{display:flex;flex-wrap:wrap;gap:7px}
.online-route-actions .button{min-height:30px}
.online-modal{width:min(620px,calc(100% - 28px));max-width:620px}
.online-status-card{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;padding:11px 12px;border:1px solid #2b3d42;border-radius:8px;background:#0f191e}
.online-status-card strong{color:#d6e7e1;font-size:11px;font-weight:580}
.online-status-card span{color:#8e9ea5;font-size:10px}
.online-actions,.online-current-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}
.online-current{margin-top:16px;padding:12px;border:1px solid #2b3d42;border-radius:9px;background:#101a20}
.online-current h3,.online-library-heading h3{margin:0;color:#d7e4e1;font-size:12px;font-weight:590}
.online-current p{margin:5px 0 0;color:#8b9ba3;font-size:10px;line-height:1.5}
.online-current-actions .button{min-height:30px}
.online-url-field{display:block;margin-top:12px}
.online-url-field input{font-size:10px}
.online-library-section{margin-top:18px;padding-top:14px;border-top:1px solid #293740}
.online-library-heading{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.online-library-heading span{color:#71828a;font-size:9px}
.online-library{display:grid;gap:7px;max-height:220px;margin-top:10px;overflow:auto}
.online-library-row{display:flex;align-items:center;gap:8px}
.online-library-open{min-width:0;flex:1;display:grid;gap:4px;padding:9px 10px;border:1px solid #293a43;border-radius:7px;background:#10191f;text-align:left}
.online-library-open:hover{border-color:#4a766d;background:#14211f}
.online-library-open strong{overflow:hidden;color:#d4e2df;font-size:10px;font-weight:560;text-overflow:ellipsis;white-space:nowrap}
.online-library-open span{color:#82939b;font-size:9px}
.online-library-row>.button{flex:0 0 auto;min-height:29px;font-size:9px}
.graph-svg.read-only-online .card-port{display:none}
.graph-svg.read-only-online .node-card{cursor:pointer}
html[data-theme="light"] .online-route-banner{border-color:#c8d3c9;background:#edf3ee;color:#33433d}
html[data-theme="light"] .online-route-banner p{color:#65776f}
html[data-theme="light"] .online-status-card,html[data-theme="light"] .online-current,html[data-theme="light"] .online-library-open{border-color:var(--atlas-border);background:var(--atlas-card);color:var(--atlas-foreground)}
html[data-theme="light"] .online-status-card strong,html[data-theme="light"] .online-current h3,html[data-theme="light"] .online-library-open strong{color:var(--atlas-foreground)}
html[data-theme="light"] .online-status-card span,html[data-theme="light"] .online-current p,html[data-theme="light"] .online-library-open span{color:var(--atlas-muted)}
html[data-theme="light"] .online-library-open:hover{border-color:#879b77;background:#e9ecdf}
html[data-theme="light"] .online-library-section{border-top-color:var(--atlas-border)}
html[data-theme="light"] .online-library-heading h3{color:var(--atlas-foreground)}
html[data-theme="light"] .online-library-heading span{color:var(--atlas-quiet)}
@media(max-width:1100px){.online-route-banner{margin-right:22px;margin-left:22px}}
@media(max-width:820px){.online-route-banner{align-items:flex-start;flex-direction:column;margin-right:17px;margin-left:17px}.online-route-actions{width:100%}}
@media(max-width:560px){.online-control-button{min-height:28px;padding:0 7px;font-size:9px}.online-status-card{align-items:flex-start;flex-direction:column;gap:5px}.online-library-heading{align-items:flex-start;flex-direction:column;gap:4px}.online-library-row{align-items:stretch;flex-direction:column}.online-library-row>.button{align-self:flex-start}}

/* Account, privacy consent, and library surfaces. */
.account-control-button,.settings-control-button{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 10px;font-size:10px}
.account-control-button .ui-icon,.settings-control-button .ui-icon{width:14px;height:14px;color:var(--atlas-muted)}
.sidebar-account-library{width:calc(100% - 4px);display:flex;align-items:center;gap:8px;margin:8px 2px 14px;padding:9px 10px;border:1px solid var(--atlas-border);border-radius:9px;color:var(--atlas-foreground);background:color-mix(in srgb,var(--atlas-card),transparent 20%);font-size:10px;text-align:left}
.sidebar-account-library:hover{border-color:var(--atlas-muted);background:var(--atlas-card)}
.sidebar-account-library .ui-icon{color:var(--atlas-muted)}
.library-origin-badge{margin-left:auto;padding:3px 6px;border:1px solid var(--atlas-border);border-radius:999px;color:var(--atlas-muted);font-size:8px;letter-spacing:.03em}
.account-modal,.settings-modal{width:min(560px,calc(100% - 28px));max-width:560px}
.online-modal{width:min(660px,calc(100% - 28px));max-width:660px}
.account-identity-card{display:flex;align-items:center;gap:12px;margin-top:18px;padding:13px;border:1px solid var(--atlas-border);border-radius:12px;background:color-mix(in srgb,var(--atlas-card),transparent 22%)}
.account-avatar{display:grid;flex:0 0 40px;place-items:center;width:40px;height:40px;border:1px solid var(--atlas-border);border-radius:50%;color:var(--atlas-accent-ink);background:var(--atlas-accent);font-size:16px;font-weight:700}
.account-identity-card>div{min-width:0;display:grid;gap:4px}
.account-identity-card strong{color:var(--atlas-foreground);font-size:12px;font-weight:650}
.account-identity-card span:not(.account-avatar){color:var(--atlas-muted);font-size:10px;line-height:1.45;overflow-wrap:anywhere}
.account-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.google-continue{min-width:204px;color:var(--atlas-foreground);background:var(--atlas-card);border-color:var(--atlas-border)}
.google-continue:hover{background:color-mix(in srgb,var(--atlas-card),var(--atlas-foreground) 5%);border-color:var(--atlas-muted)}
.google-continue svg{width:17px;height:17px;flex:0 0 auto}
.account-workspace-link{text-decoration:none}
.account-security-note{margin-top:14px;line-height:1.55}
.settings-section{margin-top:17px;padding-top:15px;border-top:1px solid var(--atlas-border)}
.settings-section h3{margin:0 0 10px;color:var(--atlas-foreground);font-size:12px;font-weight:650}
.settings-theme-field{display:block;max-width:240px}
.settings-theme-field select{min-height:38px}
.setting-toggle{display:flex;align-items:flex-start;gap:11px;padding:12px;border:1px solid var(--atlas-border);border-radius:11px;background:color-mix(in srgb,var(--atlas-card),transparent 18%);cursor:pointer}
.setting-toggle input{flex:0 0 auto;width:17px;height:17px;margin:1px 0 0;accent-color:var(--atlas-accent)}
.setting-toggle>span{display:grid;gap:4px}
.setting-toggle strong{color:var(--atlas-foreground);font-size:11px;font-weight:650}
.setting-toggle small{color:var(--atlas-muted);font-size:10px;line-height:1.4}
.settings-copy{margin:9px 0 0;color:var(--atlas-muted);font-size:10px;line-height:1.6}
.settings-status{margin:10px 0 0;color:var(--atlas-foreground);font-size:10px;line-height:1.5}
.online-library-heading span{line-height:1.45}
@media(max-width:560px){
  .account-control-button,.settings-control-button{gap:4px;min-height:29px;padding:0 7px;font-size:9px}
  .topbar-actions{gap:6px}
  .online-modal{max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px)}
  .account-actions{align-items:stretch;flex-direction:column}
  .account-actions>.button{width:100%}
  .settings-theme-field{max-width:none}
  .settings-section{margin-top:14px;padding-top:13px}
}
@media(prefers-reduced-motion:reduce){.sidebar-account-library,.account-control-button,.settings-control-button{transition:none}}
@media(max-width:560px){
  .topbar{gap:8px;padding-inline:10px}
  .mobile-menu{min-width:36px;height:29px;padding-inline:5px}
  .breadcrumbs{min-width:0;max-width:92px}
  .breadcrumbs>span,.breadcrumbs .crumb-sep{display:none}
  .breadcrumbs strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar-actions{flex:0 0 auto;gap:4px}
  .topbar .theme-toggle{width:29px;min-width:29px;height:29px;justify-content:center;padding:0}
  .topbar .theme-toggle #theme-value{display:none}
}
.settings-theme-field select:focus-visible{outline:2px solid var(--atlas-accent);outline-offset:2px}
.autosave-notice{display:flex;align-items:center;gap:12px;margin:12px 30px 0;padding:10px 12px;border:1px solid color-mix(in srgb,var(--atlas-danger),transparent 45%);border-radius:9px;color:var(--atlas-foreground);background:color-mix(in srgb,var(--atlas-danger),transparent 92%);font-size:10px;line-height:1.5}
#autosave-notice-message{min-width:0;flex:1}
#retry-autosave{flex:0 0 auto;min-height:29px;padding-inline:9px;font-size:9px}
@media(max-width:1100px){.autosave-notice{margin-right:22px;margin-left:22px}}
@media(max-width:820px){.autosave-notice{margin-right:17px;margin-left:17px}}
@media(max-width:560px){.autosave-notice{align-items:flex-start;flex-direction:column;gap:8px;margin:10px 12px 0;padding:9px 10px}.autosave-notice #retry-autosave{align-self:flex-start}}
/* One native selector keeps Local and Cloud browsing in the shared map list. */
.workspace-library-picker{align-items:flex-start;gap:9px;padding:8px 8px 11px}
.workspace-library-picker>.status-dot{margin-top:17px}
.workspace-library-picker-content{min-width:0;flex:1;display:grid;gap:0}
.workspace-library-picker label.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.workspace-library-picker small{margin-top:0;color:var(--atlas-muted);font-size:9px;line-height:1.45;overflow-wrap:anywhere}
.workspace-library-select{width:100%;min-width:0;min-height:40px;padding:7px 20px 7px 0;border:0;border-radius:0;color:#dfe7dc;background:transparent;color-scheme:dark;font:inherit;font-size:11px;font-weight:650;cursor:pointer}
.workspace-library-select option{color:#dfe7dc;background:#2e342e}
.workspace-library-select:hover{color:#fff}
.workspace-library-select:focus-visible{outline:2px solid var(--atlas-accent);outline-offset:2px}
.cloud-workspace-state{display:grid;gap:8px;margin:8px 10px 12px;padding:0;border:0;color:#a5b3ba;background:transparent;font-size:10px;line-height:1.5}
.cloud-workspace-state-message{overflow-wrap:anywhere}
.sidebar-library-retry{justify-self:start;min-height:28px;padding:0 9px;border:1px solid #34464d;border-radius:7px;color:#d2ddd9;background:#18232a;font-size:9px}
.sidebar-library-retry:hover{border-color:#71847f;background:#202d32}
#project-list{gap:4px;padding-right:2px}
#project-list .project-row{width:100%;display:grid;grid-template-columns:minmax(0,1fr) 29px;align-items:center;gap:2px;padding:2px;border:1px solid transparent;border-radius:9px;background:transparent;color:#a6b3bd;text-align:left}
#project-list .project-row:hover{border-color:#ffffff18;background:#ffffff0c;color:#fff}
#project-list .project-row.active{border-color:#ffffff24;background:#ffffff13;color:#f5f6ed}
#project-list .project-row:focus-within{border-color:color-mix(in srgb,var(--atlas-accent),transparent 45%)}
#project-list .project-row-open{min-width:0;min-height:43px;display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:7px;padding:5px 4px;border:0;border-radius:7px;color:inherit;background:transparent;text-align:left}
#project-list .project-row-open:hover{background:transparent}
#project-list .project-row-open .project-name-wrap{min-width:0}
#project-list .project-row-open .project-name{color:inherit}
#project-list .project-row-open .project-meta{color:#9ba9ae}
#project-list .project-row-open .project-count{padding-left:2px;color:#9ba9ae;font-size:9px}
#project-list .project-row-settings{width:27px;min-width:27px;height:29px;min-height:29px;align-self:center;padding:0;border:1px solid transparent;border-radius:7px;color:#aab8bd;background:transparent}
#project-list .project-row-settings:hover{border-color:transparent;color:#fff;background:transparent}
#project-list .project-row-settings .ui-icon{width:15px;height:15px}
.online-current{margin:0 30px 12px}
.online-current h2{margin:0;color:var(--atlas-foreground);font-size:12px;font-weight:620}
.online-current p{margin:5px 0 0;color:var(--atlas-muted);font-size:10px;line-height:1.5}
.map-settings-modal{width:min(590px,calc(100% - 28px));max-width:590px;max-height:min(90vh,760px);max-height:min(90dvh,760px)}

.map-settings-origin{display:inline-flex;margin-top:4px;padding:4px 7px;border:1px solid var(--atlas-border);border-radius:999px;color:var(--atlas-muted);font-size:9px;line-height:1.2}
.map-settings-message:not([hidden]){margin:14px 0 0;padding:10px 12px;border:1px solid var(--atlas-border);border-radius:9px;color:var(--atlas-foreground);background:color-mix(in srgb,var(--atlas-card),var(--atlas-foreground) 3%);font-size:11px;line-height:1.5;overflow-wrap:anywhere}
.map-settings-editor{margin-top:15px;padding-top:14px;border-top:1px solid var(--atlas-border)}
.map-settings-editor h3{margin:0;color:var(--atlas-foreground);font-size:12px;font-weight:620}
.map-settings-fields{margin-top:14px}
.map-settings-fields textarea{min-height:82px}
.map-settings-editor .modal-foot{margin-top:13px}
.map-settings-editor .modal-foot .button{min-width:142px}
.map-settings-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.map-settings-actions .button{min-height:34px}
.map-settings-actions .button.danger{color:var(--atlas-danger)}
.map-settings-modal input:focus-visible,.map-settings-modal textarea:focus-visible{outline:2px solid var(--atlas-accent);outline-offset:2px}
.map-settings-close-foot{margin-top:17px}
@media(max-width:1100px){.online-current{margin-right:22px;margin-left:22px}}
@media(max-width:820px){.online-current{margin-right:17px;margin-left:17px}}
@media(max-width:560px){
  .workspace-library-select{min-height:44px}
  .cloud-workspace-state{margin-inline:3px;padding:9px}
  .sidebar-library-retry{min-height:44px}
  #project-list .project-row{grid-template-columns:minmax(0,1fr) 44px}
  #project-list .project-row-settings{width:44px;min-width:44px;height:44px;min-height:44px}
  #project-list .project-row-open{grid-template-columns:25px minmax(0,1fr) auto;gap:6px}
  .map-settings-modal{max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px)}
  .map-settings-modal .modal-shell{padding:17px 16px 13px}
  .map-settings-fields{grid-template-columns:1fr}
  .map-settings-fields .full-field{grid-column:auto}
  .map-settings-actions{display:grid;grid-template-columns:1fr}
  .map-settings-actions .button{width:100%;min-height:44px}
  .map-settings-editor .modal-foot .button{width:100%;min-height:44px}
  .map-settings-close-foot{margin-top:13px}
  .online-current{margin-inline:12px;padding:10px}
}
@media(pointer:coarse){
  .workspace-library-select{min-height:44px}
  .sidebar-library-retry{min-height:44px}
  #project-list .project-row{grid-template-columns:minmax(0,1fr) 44px}
  #project-list .project-row-settings{width:44px;min-width:44px;height:44px;min-height:44px}
  .map-settings-actions .button,.map-settings-editor .modal-foot .button{min-height:44px}
}
@media(prefers-reduced-motion:reduce){.workspace-library-select,.sidebar-library-retry,#project-list .project-row-settings{transition:none}}

/* Reserve description space so a cold cloud fetch does not collapse the header. */
.heading-copy p{min-height:3.2em}

/* Empty filter groups retain their toolbar row while a first map is fetched. */
.filter-group{min-height:32px}

/* Cloud loading stays inside the same header, toolbar, canvas and inspector. */
.heading-copy,.inspector,.filter-group{position:relative}
.filter-chip-list{display:flex;align-items:center;gap:5px;flex:0 0 auto}
.workspace-skeleton{position:absolute;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .24s ease,visibility 0s linear .24s}
.workspace-skeleton-line{position:relative;display:block;height:9px;overflow:hidden;border-radius:5px;background:color-mix(in srgb,var(--atlas-foreground),transparent 91%)}
.workspace-skeleton-line::after{position:absolute;inset:0;content:"";background:linear-gradient(100deg,transparent,color-mix(in srgb,var(--atlas-foreground),transparent 86%),transparent);transform:translateX(-100%)}
.workspace-heading-skeleton{inset:0 0 auto;display:grid;gap:14px;padding-top:2px}
.workspace-heading-skeleton .workspace-skeleton-line:first-child{width:35%;height:7px}
.workspace-heading-skeleton .workspace-skeleton-line:last-child{width:76%;height:27px}
.workspace-description-skeleton{inset:auto 0 0;max-width:680px;height:3.2em;display:grid;align-content:center;gap:9px;font-size:12px}
.workspace-description-skeleton .workspace-skeleton-line:last-child{width:82%}
.workspace-filter-skeleton{inset:0 auto 0 0;width:min(270px,100%);display:flex;align-items:center;gap:6px}
.workspace-filter-skeleton .workspace-skeleton-line{flex:1;height:26px;border-radius:999px}
.workspace-inspector-skeleton{inset:83px 18px auto;display:grid;gap:12px}
.workspace-inspector-skeleton .workspace-skeleton-line:first-child{width:36%;height:8px}
.workspace-inspector-skeleton .workspace-skeleton-line:nth-child(2){width:70%;height:16px;margin-bottom:8px}
.workspace-inspector-skeleton .workspace-skeleton-line:nth-child(4){width:84%}
.workspace-inspector-skeleton .workspace-skeleton-detail-block{height:66px;margin-top:10px;border-radius:9px}
#project-description,#project-title,#project-type,#type-filter-content,#graph,#timeline-view,#inspector-content{transition:opacity .24s ease,visibility 0s}
.main-area[data-workspace-loading="skeleton"] #project-description,
.main-area[data-workspace-loading="skeleton"] #type-filter-content,
.main-area[data-workspace-loading="skeleton"] #graph,
.main-area[data-workspace-loading="skeleton"] #timeline-view,
.main-area[data-workspace-loading="skeleton"] #inspector-content{opacity:0;visibility:hidden;transition:none}
.main-area[data-workspace-loading="skeleton"] .workspace-description-skeleton,
.main-area[data-workspace-loading="skeleton"] .workspace-filter-skeleton,
.main-area[data-workspace-loading="skeleton"] .workspace-inspector-skeleton{opacity:1;visibility:visible;transition:opacity .16s ease,visibility 0s}
.main-area[data-workspace-loading="skeleton"][data-workspace-heading-known="false"] .workspace-heading-skeleton{opacity:1;visibility:visible;transition:opacity .16s ease,visibility 0s}
.main-area[data-workspace-loading="skeleton"][data-workspace-heading-known="false"] #project-type,
.main-area[data-workspace-loading="skeleton"][data-workspace-heading-known="false"] #project-title{opacity:0;visibility:hidden;transition:none}
.main-area[data-workspace-loading="skeleton"] .filter-group{min-width:240px}
.main-area[data-workspace-loading="skeleton"] .workspace-skeleton-line::after{animation:workspace-skeleton-glide 2s ease-in-out infinite}
.main-area[data-workspace-loading="preview"] #graph{opacity:.94}
#project-list .project-row.is-workspace-loading{position:relative;isolation:isolate}
#project-list .project-row.is-workspace-loading::before{position:absolute;inset:0;z-index:0;content:"";border-radius:inherit;pointer-events:none;background:linear-gradient(105deg,transparent 20%,#ffffff14 50%,transparent 80%);background-size:220% 100%;animation:workspace-row-breathe 2s ease-in-out infinite}
#project-list .project-row.is-workspace-loading>button{position:relative;z-index:1}
@keyframes workspace-skeleton-glide{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@keyframes workspace-row-breathe{0%,100%{opacity:.2;background-position:100% 0}50%{opacity:1;background-position:0 0}}
.workspace-motion-paused .workspace-skeleton-line::after,
.workspace-motion-paused #project-list .project-row.is-workspace-loading::before{animation-play-state:paused}
@media(min-width:821px) and (max-width:1320px){.toolbar .filter-chip-list{width:100%;flex-wrap:wrap}}
@media(max-width:560px){.workspace-description-skeleton{font-size:11px}.workspace-heading-skeleton .workspace-skeleton-line:last-child{height:24px}.workspace-inspector-skeleton{gap:9px}.workspace-inspector-skeleton .workspace-skeleton-detail-block{height:40px}}
@media(prefers-reduced-motion:reduce){
  .workspace-skeleton,#project-description,#project-title,#project-type,#type-filter-content,#graph,#timeline-view,#inspector-content{transition:none!important}
  .main-area[data-workspace-loading="skeleton"] .workspace-skeleton-line::after,
  #project-list .project-row.is-workspace-loading::before{animation:none!important}
  #project-list .project-row.is-workspace-loading::before{opacity:.55;background-position:50% 0}
}

/* Keep loading description lines as wide as the eventual heading copy. */
.heading-copy{flex:1}

/* Shared recipients get an introduction instead of an unrelated workspace library. */
#sidebar[data-shared-viewer="true"] .sidebar-label-row,
#sidebar[data-shared-viewer="true"] #project-list,
#sidebar[data-shared-viewer="true"] #cloud-workspace-state,
#sidebar[data-shared-viewer="true"] #example-flow,
#sidebar[data-shared-viewer="true"] #open-import,
#sidebar[data-shared-viewer="true"] .workspace-library-picker,
#sidebar[data-shared-viewer="true"] #workspace-guidance,
#sidebar[data-shared-viewer="true"] #download-recovery,
#sidebar[data-shared-viewer="true"] #clear-data{display:none!important}
.viewer-sidebar-intro{padding:0 7px}
.viewer-sidebar-intro h2{margin:0;color:#f0f2e8;font-size:20px;line-height:1.35;font-weight:620;letter-spacing:-.3px}
.viewer-sidebar-intro p{margin:14px 0 20px;color:#b0b5a9;font-size:12px;line-height:1.7}
.viewer-create-link{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;padding:10px 12px;font-size:11px;line-height:1.45;text-align:center;text-decoration:none;white-space:normal}
.viewer-create-link:focus-visible{outline:2px solid var(--atlas-accent);outline-offset:4px}
.viewer-sidebar-intro small{display:block;margin-top:10px;color:#b0b5a9;font-size:10px;line-height:1.6;text-align:center}
.viewer-sidebar-status{display:flex;align-items:center;gap:9px;padding:16px 7px;border-top:1px solid #ffffff24;color:#b0b5a9;font-size:10px;line-height:1.5}

/* Local storage reminder floats beside its row without moving the graph. */
.local-map-tip{position:fixed;z-index:45;width:min(280px,calc(100vw - 24px));padding:15px 16px 12px;border:1px solid var(--atlas-border);border-radius:12px;background:var(--atlas-card);color:var(--atlas-foreground);box-shadow:0 8px 28px #0002;font-size:11px;line-height:1.55;isolation:isolate}
.local-map-tip>strong{display:block;font-size:12px;font-weight:600}
.local-map-tip>p{margin:6px 0 12px;color:var(--atlas-muted);overflow-wrap:anywhere}
.local-map-tip-actions{display:flex;justify-content:flex-end}
.local-map-tip-actions .button{min-height:30px;padding:6px 13px;font-size:10px}
.local-map-tip::before{position:absolute;z-index:-1;width:10px;height:10px;border:1px solid var(--atlas-border);background:var(--atlas-card);content:"";transform:rotate(45deg)}
.local-map-tip[data-arrow-side="left"]::before{left:-6px;top:calc(var(--tip-arrow) - 5px);border-right:0;border-top:0}
.local-map-tip[data-arrow-side="top"]::before{left:calc(var(--tip-arrow) - 5px);top:-6px;border-right:0;border-bottom:0}
.local-map-tip[data-arrow-side="bottom"]::before{left:calc(var(--tip-arrow) - 5px);bottom:-6px;border-left:0;border-top:0}
.local-map-tip[data-entering="true"]{animation:local-map-tip-enter .16s ease-out}
@keyframes local-map-tip-enter{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
@media(pointer:coarse){.local-map-tip-actions .button{min-height:44px;min-width:64px}}
@media(prefers-reduced-motion:reduce){.local-map-tip[data-entering="true"]{animation:none}}

/* The workspace mode menu shares the admin picker behavior and sidebar palette. */
.workspace-switcher-picker { display:block; min-width:0; width:100%; }
.workspace-switcher-trigger { width:100%; min-height:40px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:7px 0; border:0; border-radius:8px; background:transparent; color:#f0f2e8; font:inherit; font-size:11px; font-weight:650; text-align:left; cursor:pointer; }
.workspace-switcher-trigger:hover { color:#fff; }
.workspace-switcher-trigger:focus { outline:none; }
.workspace-switcher-trigger:focus-visible { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--atlas-accent), transparent 35%); outline:none; }
.workspace-switcher-chevron, .workspace-switcher-check { display:block; width:14px; height:14px; flex:0 0 14px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.workspace-switcher-chevron { opacity:.8; transition:transform 140ms ease; }
.workspace-switcher-trigger[aria-expanded="true"] .workspace-switcher-chevron { transform:rotate(180deg); }
.workspace-switcher-menu { position:fixed; inset:auto; z-index:30; margin:0; padding:6px; border:1px solid color-mix(in srgb, var(--atlas-frame), white 20%); border-radius:12px; background:color-mix(in srgb, var(--atlas-frame), white 6%); color:#f0f2e8; box-shadow:0 12px 30px #0004; overflow:auto; font-size:11px; }
.workspace-switcher-menu:popover-open { animation:workspace-switcher-arrive 140ms ease-out; }
.workspace-switcher-option { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:36px; padding:9px 10px; border:0; border-radius:7px; color:inherit; background:transparent; font:inherit; text-align:left; cursor:pointer; }
.workspace-switcher-option:hover, .workspace-switcher-option:focus { background:#ffffff0d; }
.workspace-switcher-option:focus-visible { outline:1px solid var(--atlas-accent); outline-offset:-1px; }
.workspace-switcher-option[aria-selected="true"] { background:#ffffff0d; }
.workspace-switcher-check { color:var(--atlas-accent); visibility:hidden; }
.workspace-switcher-option[aria-selected="true"] .workspace-switcher-check { visibility:visible; }
@keyframes workspace-switcher-arrive { from { opacity:0; } to { opacity:1; } }
@media(max-width:560px), (pointer:coarse) { .workspace-switcher-trigger, .workspace-switcher-option { min-height:44px; } }
@media(prefers-reduced-motion:reduce) { .workspace-switcher-menu, .workspace-switcher-chevron { animation:none; transition:none; } }