.architecture-dialog{--arch-bg:#f0f0e9;--arch-ink:#26312f;--arch-soft:#e4e8df;--arch-line:#cbd2c8;--arch-accent:#6b8b7b;border:0;color:var(--arch-ink);background:var(--arch-bg);width:min(1400px,96vw);max-width:96vw;max-height:94dvh;padding:26px;box-shadow:0 30px 120px #0006;overflow:auto;font-family:Manrope,Arial,sans-serif}
.architecture-dialog::backdrop{background:#101817bd;backdrop-filter:blur(10px)}
:root[data-theme=dark] .architecture-dialog{--arch-bg:#161f21;--arch-ink:#e1e7e1;--arch-soft:#202c2e;--arch-line:#354448}
.arch-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid var(--arch-line);padding-bottom:20px;margin-bottom:18px}
.architecture-dialog>.arch-heading{position:static;inset:auto;pointer-events:auto;width:auto;max-width:none;background:transparent;padding:0 0 20px;margin:0 0 18px;min-height:0;height:auto}
.arch-heading p,.arch-kicker,.arch-source h4,.arch-port h4{font:10px/1.7 Consolas,monospace;letter-spacing:1px;color:var(--arch-accent);margin:0}
.arch-heading h2{font:48px/1.05 Manrope,Arial,sans-serif;margin:9px 0 0;letter-spacing:-1px}
.architecture-dialog button,.architecture-dialog select{font:11px Manrope,Arial,sans-serif;min-height:40px;padding:9px 13px;background:var(--arch-soft);color:var(--arch-ink);border:0;border-radius:3px;cursor:pointer}
.architecture-dialog button:disabled{opacity:.4;cursor:default}.architecture-dialog button:active{transform:scale(.96)}
.architecture-dialog :is(button,select,input,[tabindex]):focus-visible{outline:2px solid var(--arch-accent);outline-offset:3px}
.arch-heading>button{background:none}.arch-controls{display:flex;align-items:end;justify-content:space-between;gap:15px;flex-wrap:wrap;margin-bottom:20px}
.arch-heading-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.arch-heading-actions button{font-size:10px}.arch-heading-actions [data-arch-action=close]{background:transparent}
.arch-controls label{display:flex;flex-direction:column;gap:7px;font:10px Consolas,monospace}.arch-controls select{min-width:200px;max-width:100%}
.arch-playback,.arch-views{display:flex;gap:5px;flex-wrap:wrap}.arch-views button[aria-pressed=true]{background:var(--arch-ink);color:var(--arch-bg)}
.arch-workspace{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:24px;align-items:start}
.arch-map-column{min-width:0}.arch-map{position:relative;overflow:auto;border:1px solid var(--arch-line);background-image:radial-gradient(var(--arch-line) .6px,transparent .6px);background-size:18px 18px;min-height:350px}
.arch-map svg{display:block;width:100%;min-height:350px;max-height:590px}.arch-map canvas{display:block;width:100%;height:490px;touch-action:none;cursor:grab}
.arch-map svg{cursor:grab;touch-action:none}.arch-map svg:active{cursor:grabbing}
.arch-map canvas{position:static!important;inset:auto!important}
.arch-map [hidden]{display:none!important}.arch-edge{fill:none;stroke:var(--arch-line);stroke-width:2;transition:stroke .2s,stroke-width .2s}.arch-edge.optional,.arch-edge.schedule{stroke-dasharray:6 5}.arch-edge.failure{stroke:#b77a63}.arch-edge.recovery{stroke:#6b9e8e}.arch-edge[data-active=true]{stroke:var(--arch-accent);stroke-width:4}
#arch-arrow path{fill:var(--arch-accent)}.arch-edge-label{font:9px Consolas,monospace;fill:var(--arch-ink);text-anchor:middle;paint-order:stroke;stroke:var(--arch-bg);stroke-width:5px}
.arch-edge{opacity:.4}.arch-edge[data-focused=true],.arch-edge[data-active=true]{opacity:1}.arch-edge-group .arch-edge-label{opacity:.35}.arch-edge-group:has(.arch-edge[data-focused=true]) .arch-edge-label,.arch-edge-group:has(.arch-edge[data-active=true]) .arch-edge-label{opacity:1}
.arch-node{cursor:pointer;outline:none}.arch-node-surface{fill:var(--arch-bg);stroke:var(--arch-line);stroke-width:1.5;transition:fill .2s,stroke .2s}.arch-node-label{font:12px Manrope,Arial,sans-serif;fill:var(--arch-ink)}.arch-node-kind{font:8px Consolas,monospace;fill:var(--arch-accent);letter-spacing:1px}.arch-node-status{fill:var(--arch-line)}
.arch-node[data-selected=true] .arch-node-surface,.arch-node:focus-visible .arch-node-surface{stroke:var(--arch-accent);stroke-width:3}.arch-node[data-trace=complete] .arch-node-surface{fill:var(--arch-soft);stroke:var(--arch-accent)}.arch-node[data-trace=held] .arch-node-surface{stroke:#c88a58;stroke-width:3}.arch-node[data-trace=complete] .arch-node-status,.arch-node[data-trace=visited] .arch-node-status{fill:var(--arch-accent)}
.arch-map-tools{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--arch-line);padding:8px 0;font:9px/1.7 Consolas,monospace}.arch-map-tools label{display:flex;align-items:center;gap:7px}.arch-map-tools input{width:85px;accent-color:var(--arch-accent);min-height:40px}
.arch-progress{margin-top:20px}.arch-progress>span{font:9px Consolas,monospace;color:var(--arch-accent)}.arch-progress p{font-size:13px;line-height:1.7;margin:8px 0 13px;min-height:44px}
.architecture-dialog pre{white-space:pre-wrap;overflow-wrap:anywhere;font:11px/1.8 Consolas,monospace;margin:0}.arch-map-column>pre{padding:15px 18px;background:var(--arch-soft);min-height:100px}
.arch-inspector{border-left:1px solid var(--arch-line);padding-left:22px}.arch-inspector h3{font:29px/1.1 Manrope,Arial,sans-serif;margin:10px 0 18px}.arch-inspector>p:not(.arch-kicker){font-size:12px;line-height:1.8;margin:0 0 20px}.arch-port{padding:14px 0;border-top:1px solid var(--arch-line)}.arch-port h4,.arch-source h4{font-size:8px;margin-bottom:8px}.arch-source p{font:9px/1.9 Consolas,monospace;overflow-wrap:anywhere}.arch-layer-key{list-style:none;padding:15px 0 0;margin:18px 0 0;border-top:1px solid var(--arch-line)}.arch-layer-key li{font-size:10px;line-height:1.8;margin-bottom:12px}.arch-layer-key span{font:9px Consolas,monospace;color:var(--arch-accent);margin-right:10px}
.arch-foot{display:flex;gap:25px;border-top:1px solid var(--arch-line);padding-top:18px;margin-top:22px;font:9px/1.8 Consolas,monospace}.arch-foot span{width:30%;flex-shrink:0;color:var(--arch-accent)}.arch-foot p{margin:0;max-width:800px}
@media(max-width:850px){.arch-workspace{grid-template-columns:1fr}.arch-inspector{border-left:0;border-top:1px solid var(--arch-line);padding:20px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}.arch-inspector>h3,.arch-inspector>.arch-kicker,.arch-inspector>p,.arch-layer-key{grid-column:1/-1}.arch-map{overflow:auto}.arch-map svg{min-width:790px}.arch-heading h2{font-size:40px}.arch-foot{display:block}.arch-foot span{display:block;width:auto;margin-bottom:10px}}
@media(max-width:480px){.architecture-dialog{padding:16px;max-height:96dvh}.arch-heading h2{font-size:34px}.arch-heading p{font-size:8px}.arch-heading{gap:10px}.arch-controls{gap:12px}.arch-controls>label{width:100%}.arch-controls select{width:100%}.arch-playback button,.arch-views button{font-size:10px;padding:8px 10px}.arch-map canvas{height:360px}.arch-inspector{grid-template-columns:1fr}.arch-inspector>*{grid-column:1!important}.arch-progress p{font-size:12px}.arch-map-tools>span{width:100%}}
@media(prefers-reduced-motion:reduce){.architecture-dialog *{transition:none!important;animation:none!important}}