:root{--bg:#f6f7f9;--fg:#1c2330;--muted:#667085;--card:#fff;--line:#d9dee7;--accent:#2f5fd0;--danger:#c0392b;
--c-actor:#e8eefc;--c-edge:#fdf1d8;--c-app:#dff3e6;--c-new:#ffe3ef;--c-llm:#ece3fb;--c-data:#e6eaf0;--c-script:#e0f2f4;--c-other:#f1f1f1;
--stroke:#8a94a6;--zone:#fbfcfd}
@media (prefers-color-scheme:dark){:root{--bg:#10141b;--fg:#e6e9ef;--muted:#98a2b3;--card:#171c26;--line:#2a3140;--accent:#7aa2ff;--danger:#ff7b6b;
--c-actor:#1f2a47;--c-edge:#41361a;--c-app:#1b3a2a;--c-new:#4a2238;--c-llm:#33294f;--c-data:#262d3a;--c-script:#17383d;--c-other:#232323;--stroke:#5b6577;--zone:#141922}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.5 system-ui,sans-serif}
header{display:flex;align-items:center;gap:16px;padding:10px 16px;background:var(--card);border-bottom:1px solid var(--line);flex-wrap:wrap}
header nav{display:flex;gap:14px;flex:1}header a{color:var(--accent);text-decoration:none}
header form{margin:0}.who{color:var(--muted)}
main{max-width:1240px;margin:0 auto;padding:16px}
h1{font-size:22px;margin:0 0 8px}h2{font-size:17px;margin:0 0 10px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px;margin:16px 0;overflow-x:auto}
.narrow{max-width:360px;margin:12vh auto}
label{display:block;margin:10px 0;font-size:13px;color:var(--muted)}
input{display:block;width:100%;padding:8px 10px;margin-top:4px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--fg);font:inherit}
input[type=checkbox]{display:inline;width:auto;margin-right:6px}
button{padding:8px 14px;border:0;border-radius:6px;background:var(--accent);color:#fff;font:inherit;cursor:pointer}
button.ghost{background:transparent;color:var(--accent);border:1px solid var(--line)}
button.danger{background:transparent;color:var(--danger);border:1px solid var(--danger)}
.err{color:var(--danger)}.muted{color:var(--muted)}
.notice{background:var(--c-edge);border:1px solid var(--line);padding:12px 16px;border-radius:8px;margin-top:16px}
code{background:var(--bg);padding:2px 6px;border-radius:4px;user-select:all}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--muted);font-weight:600}
.acts{display:flex;gap:6px;flex-wrap:wrap}.acts form{margin:0}.acts button{padding:4px 9px;font-size:13px}
form.inline{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}form.inline label{margin:0}
.toolbar{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px}
.diagram-wrap{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow-x:auto;padding:8px}
#diagram{display:block;min-width:900px;width:100%;height:auto}
#diagram text{fill:var(--fg);font-family:system-ui,sans-serif}
.zone{fill:var(--zone);stroke:var(--line);stroke-width:1.5}.zone.docker{stroke-dasharray:6 4;stroke:var(--accent)}.zone.other{stroke-dasharray:3 3}
.zone-label{font-size:12px;fill:var(--muted)!important}
.node rect{stroke:var(--stroke);stroke-width:1.2}
.node .t{font-size:13px;font-weight:600}.node .s{font-size:11px;fill:var(--muted)}.node .n{font-size:10.5px;fill:var(--muted);font-style:italic}
.node.k-actor rect{fill:var(--c-actor)}.node.k-edge rect{fill:var(--c-edge)}.node.k-app rect{fill:var(--c-app)}.node.k-new rect{fill:var(--c-new);stroke:var(--accent);stroke-width:2}
.node.k-llm rect{fill:var(--c-llm)}.node.k-data rect{fill:var(--c-data)}.node.k-script rect{fill:var(--c-script)}.node.k-other rect{fill:var(--c-other);stroke-dasharray:4 3}
.edge path{stroke:var(--stroke);stroke-width:1.6;fill:none}.edge.pending path{stroke-dasharray:6 4}
.edge .badge circle{fill:var(--card);stroke:var(--stroke)}.edge .badge text{font-size:10.5px;font-weight:700;text-anchor:middle;dominant-baseline:central}
#diagram.hl .edge,#diagram.hl .node{opacity:.18}#diagram.hl .edge.on,#diagram.hl .node.on{opacity:1}
#diagram.hl .edge.on path{stroke:var(--accent);stroke-width:2.4}
.legend{display:flex;flex-wrap:wrap;gap:12px;margin:12px 0;font-size:13px}
.legend i{display:inline-block;width:14px;height:14px;border-radius:3px;border:1px solid var(--stroke);vertical-align:-2px;margin-right:5px}
@media(max-width:700px){header{padding:8px 12px}main{padding:12px}}