:root{--bg: #f5f7f9;--panel: #fff;--panel-2: #f0f3f6;--ink: #141a1f;--ink-2: #5a6672;--line: #dce2e8;--accent: #0e8f9e;--accent-ink: #0b6b76;--danger: #c8324b;--ok: #3f9160;--shadow: rgba(20, 40, 60, .1);--core: #c8781a;--infra: #0e8f9e;--proxy: #6d5bd0;--service: #3f6ea5;--leaf: #4e9a6b;--external: #d1495b;--edge: #9fb0bd;--ext-edge: #d1a0a8}@media(prefers-color-scheme:dark){:root{--bg: #0c1116;--panel: #121a21;--panel-2: #0f161c;--ink: #e6edf3;--ink-2: #8ea0ae;--line: #233039;--accent: #2bd4c0;--accent-ink: #5fe6d6;--danger: #f2708a;--ok: #6cc48e;--shadow: rgba(0, 0, 0, .4);--core: #f0a340;--infra: #2bd4c0;--proxy: #a795f5;--service: #6ea8de;--leaf: #6cc48e;--external: #f2708a;--edge: #33454f;--ext-edge: #7d4650}}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:14px}.mono{font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace}header{display:flex;align-items:center;gap:20px;padding:12px 22px;border-bottom:1px solid var(--line);background:var(--panel)}header h1{margin:0;font-size:18px;font-weight:700;letter-spacing:-.02em}header h1 .dot{color:var(--accent)}nav{display:flex;gap:4px;margin-left:8px}nav button{font:inherit;padding:7px 14px;border:0;background:transparent;color:var(--ink-2);cursor:pointer;border-radius:8px;font-weight:500}nav button.active{background:var(--panel-2);color:var(--ink)}main{padding:22px;max-width:1000px;margin:0 auto}.toolbar{display:flex;align-items:center;gap:12px;margin-bottom:16px}.toolbar h2{margin:0;font-size:16px;font-weight:600}.toolbar .spacer{flex:1}input,select{font:inherit;padding:8px 11px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);width:100%}input:focus,select:focus{outline:2px solid var(--accent);outline-offset:0;border-color:transparent}.search{max-width:240px}button.btn{font:inherit;font-weight:600;padding:8px 14px;border-radius:8px;cursor:pointer;border:1px solid var(--line);background:var(--panel);color:var(--ink)}button.btn.primary{background:var(--accent);border-color:transparent;color:#00201f}button.btn.ghost{background:transparent}button.btn.danger{color:var(--danger);border-color:var(--danger)}button.btn:hover{filter:brightness(.97)}button.btn:disabled{opacity:.6;cursor:default}.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 2px 10px var(--shadow);overflow:hidden}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line)}th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);font-weight:600}tbody tr:last-child td{border-bottom:0}tbody tr:hover{background:var(--panel-2)}.pill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:12px;font-weight:600}.pill.on{background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok)}.pill.off{background:color-mix(in srgb,var(--danger) 15%,transparent);color:var(--danger)}.row-actions{display:flex;gap:6px;justify-content:flex-end}.row-actions button{padding:5px 10px;font-size:13px}.muted{color:var(--ink-2)}.empty{padding:40px;text-align:center;color:var(--ink-2);line-height:1.6}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000073;display:flex;align-items:center;justify-content:center;padding:20px;z-index:10}.modal{background:var(--panel);border:1px solid var(--line);border-radius:14px;width:100%;max-width:420px;box-shadow:0 20px 50px #0000004d}.modal h3{margin:0;padding:16px 20px;border-bottom:1px solid var(--line);font-size:16px}.modal .body{padding:20px;display:flex;flex-direction:column;gap:14px}.field label{display:block;font-size:12px;color:var(--ink-2);margin-bottom:5px;font-weight:600}.field .hint{font-size:11px;color:var(--ink-2);margin-top:4px}.check{display:flex;align-items:center;gap:8px}.check input{width:auto}.modal .foot{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end}.err{background:color-mix(in srgb,var(--danger) 12%,transparent);color:var(--danger);padding:8px 12px;border-radius:8px;font-size:13px}.toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:10px;font-size:13px;z-index:20}.map-fullbleed{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;padding:0 22px}.map-card{position:relative;padding:0;height:calc(100vh - 168px);min-height:460px;overflow:hidden}.map-card svg{width:100%;height:100%;display:block;cursor:grab}.map-card svg.panning{cursor:grabbing}.map-empty{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:40px}.graph-legend{position:absolute;top:12px;left:12px;z-index:2;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px;box-shadow:0 2px 10px var(--shadow);display:flex;flex-direction:column;gap:5px;font-size:12px}.graph-legend .li{display:flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.graph-legend .li.off{opacity:.35}.graph-legend .li .cnt{margin-left:auto;color:var(--ink-2);font-family:ui-monospace,monospace}.graph-legend .dot{width:11px;height:11px;border-radius:50%}.graph-legend .sq{width:11px;height:11px;border-radius:2px}.gedge{stroke:var(--edge);fill:none;opacity:.5}.gedge.ext{stroke:var(--ext-edge);stroke-dasharray:3 3;opacity:.45}.gedge.hi{stroke:var(--accent);opacity:.95;stroke-width:1.8;stroke-dasharray:none}.gedge.dim{opacity:.05}.gnode{cursor:pointer}.gnode circle,.gnode rect{stroke:var(--panel);stroke-width:1.5}.gnode text{font-family:ui-monospace,monospace;font-size:9px;fill:var(--ink);pointer-events:none;paint-order:stroke;stroke:var(--panel);stroke-width:2.4px;stroke-linejoin:round}.gnode.dim{opacity:.15}.gnode.dim text{opacity:0}.core{fill:var(--core)}.infra{fill:var(--infra)}.proxy{fill:var(--proxy)}.service{fill:var(--service)}.leaf{fill:var(--leaf)}.external{fill:var(--external)}.detail{position:absolute;top:0;right:0;height:100%;width:320px;max-width:85%;background:var(--panel);border-left:1px solid var(--line);box-shadow:-8px 0 24px var(--shadow);z-index:3;display:flex;flex-direction:column;transform:translate(100%);transition:transform .22s ease}.detail.open{transform:translate(0)}.dclose{position:absolute;top:10px;right:12px;border:0;background:transparent;color:var(--ink-2);font-size:16px;cursor:pointer;z-index:1;line-height:1}.dhead{padding:16px 16px 14px;border-bottom:1px solid var(--line)}.dtitle{font-family:ui-monospace,monospace;font-size:15px;font-weight:600;word-break:break-all;padding-right:22px}.dbadges{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.dbadge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-family:ui-monospace,monospace;padding:3px 8px;border-radius:20px;border:1px solid var(--line)}.dbadge .dot{width:9px;height:9px;border-radius:50%}.dbadge .sq{width:9px;height:9px;border-radius:2px}.dmetrics{display:flex;gap:8px;margin-top:14px}.dmetric{flex:1;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:9px 10px}.dmetric b{font-family:ui-monospace,monospace;font-size:20px;display:block;line-height:1}.dmetric span{font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2)}.dbody{padding:16px;overflow-y:auto}.drel{margin-bottom:16px}.drel h4{margin:0 0 6px;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2);display:flex;gap:6px;align-items:center}.drel h4 .n{color:var(--accent-ink)}.drel h4 .n.ext{color:var(--external)}.chips{display:flex;flex-wrap:wrap;gap:5px}.chip{font-family:ui-monospace,monospace;font-size:11px;padding:3px 8px;border-radius:6px;background:var(--panel-2);border:1px solid var(--line);color:var(--ink);cursor:pointer;word-break:break-all}.chip.ext{border-color:var(--ext-edge)}.chip:hover{border-color:var(--accent)}
