:root{--bg:#07090d;--fg:#e8ecf3;--mut:#8a94a6;--line:#1f2633;--card:#121722;--acc:#7aa8ff}
*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:radial-gradient(900px 700px at 50% 45%,#121a2b 0,var(--bg) 70%);color:var(--fg);font:14px/1.45 system-ui,-apple-system,Segoe UI,Inter,sans-serif}
#stage{position:fixed;inset:0;touch-action:none;cursor:grab}#stage.drag{cursor:grabbing}#world{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}#links{position:absolute;left:0;top:0;width:1px;height:1px;overflow:visible;pointer-events:none}#links line.h{opacity:0}
#links line{stroke:#2a3550;stroke-width:1.2;transition:all .6s cubic-bezier(.2,.8,.2,1)}
.node{position:absolute;left:0;top:0;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-radius:50%;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;
 transition:left .6s cubic-bezier(.2,.8,.2,1),top .6s cubic-bezier(.2,.8,.2,1),width .6s,height .6s,opacity .45s,box-shadow .3s,border-color .3s;
 background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--c) 30%,#1a2130),#0e131c 75%);border:1px solid color-mix(in srgb,var(--c) 55%,transparent);box-shadow:0 0 0 0 transparent,0 8px 30px #0008;padding:8px}
.node:hover{box-shadow:0 0 26px color-mix(in srgb,var(--c) 45%,transparent),0 8px 30px #0008}
.node .n{font-weight:650;line-height:1.15}.node .u{font-size:10.5px;color:var(--mut);margin-top:4px;line-height:1.2}
.node .b{position:absolute;top:4%;right:4%;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--c);color:#06080c;font-size:11px;font-weight:700;display:none;align-items:center;justify-content:center}
.node.has .b{display:flex}.node.hide{opacity:0;pointer-events:none}
.node.hub{--c:#7aa8ff}.node.hub .n{font-size:22px;letter-spacing:-.02em}
.node.child .n{font-size:13px;font-weight:600}.node.app .n{font-size:15px}
.node.sel{box-shadow:0 0 40px color-mix(in srgb,var(--c) 50%,transparent)}
@keyframes float{50%{translate:0 -4px}}.node.app:not(.sel){animation:float 6s ease-in-out infinite}.node.app.sel{border-width:2px}
#ctl{position:fixed;top:max(12px,env(safe-area-inset-top));right:12px;z-index:5;display:flex;gap:6px}#ctl button{background:#121722cc;color:var(--fg);border:1px solid var(--line);border-radius:18px;padding:7px 12px;font:inherit;font-size:13px;cursor:pointer;backdrop-filter:blur(6px);min-width:36px}#hint{position:fixed;bottom:10px;right:14px;color:#5c6578;font-size:11.5px;z-index:4;pointer-events:none}@media(max-width:700px){#hint{display:none}}
.nb{position:absolute;bottom:-2%;right:-2%;width:28%;height:28%;border-radius:50%;border:1px solid color-mix(in srgb,var(--c) 60%,transparent);background:#0d1119;color:var(--c);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}.nb:hover{background:var(--c);color:#06080c}
#oldback{position:fixed;top:max(14px,env(safe-area-inset-top));left:14px;z-index:5;background:#121722cc;color:var(--fg);border:1px solid var(--line);border-radius:20px;padding:8px 14px;font:inherit;cursor:pointer;backdrop-filter:blur(6px)}
#status{position:fixed;bottom:10px;left:14px;color:var(--mut);font-size:11.5px;z-index:4;cursor:pointer}
#panel{position:fixed;top:0;right:0;height:100%;width:min(400px,100%);background:#0d1119f2;backdrop-filter:blur(10px);border-left:1px solid var(--line);padding:20px;z-index:10;display:flex;flex-direction:column;gap:8px;transform:translateX(105%);transition:transform .4s cubic-bezier(.2,.8,.2,1);overflow:auto}
#panel.open{transform:none}.grab{display:none}
.ph{display:flex;justify-content:space-between;gap:10px}#pk{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.08em}h2{margin:2px 0;font-size:20px}#pm{font-size:12px;color:var(--mut)}
#px{background:none;border:0;color:var(--mut);font-size:28px;cursor:pointer;line-height:1}
#po{color:var(--acc);text-decoration:none;font-size:13px}#po[hidden]{display:none}
.lbl{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.08em;margin-top:8px}
textarea{min-height:160px;resize:vertical;background:var(--card);color:var(--fg);border:1px solid var(--line);border-radius:10px;padding:10px;font:inherit}
#todos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
#todos li{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:6px 8px}
#todos li.done span{text-decoration:line-through;color:var(--mut)}#todos span{flex:1;word-break:break-word}
#todos button{background:none;border:0;color:var(--mut);cursor:pointer;font-size:14px;padding:2px 4px}#todos button:hover{color:var(--fg)}
#addf{display:flex;gap:6px}#addf input{flex:1;background:var(--card);color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:8px;font:inherit}
#addf button{background:var(--acc);color:#06080c;border:0;border-radius:8px;padding:0 14px;font-weight:600;cursor:pointer}
#saved{font-size:11.5px;color:var(--mut);min-height:16px}
input[type=checkbox]{accent-color:var(--acc);width:16px;height:16px}
@media (max-width:700px){#panel{top:auto;bottom:0;height:78%;width:100%;border-left:0;border-top:1px solid var(--line);border-radius:18px 18px 0 0;transform:translateY(105%);padding-bottom:max(20px,env(safe-area-inset-bottom))}
 .grab{display:block;width:40px;height:4px;border-radius:2px;background:#3a4458;margin:-8px auto 4px}}

#tlv{position:fixed;inset:0;z-index:20;background:#07090df7;backdrop-filter:blur(8px);padding:max(18px,env(safe-area-inset-top)) 18px 18px;overflow:auto;opacity:0;pointer-events:none;transition:opacity .3s}
#tlv.open{opacity:1;pointer-events:auto}#tlv>*{max-width:820px;margin-left:auto;margin-right:auto}.tlh{display:flex;justify-content:space-between;align-items:center}#tlx{background:none;border:0;color:var(--mut);font-size:30px;cursor:pointer}
#chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px auto 12px}#chips button{border:1px solid var(--line);background:var(--card);color:var(--fg);border-radius:16px;padding:5px 11px;font:inherit;font-size:12.5px;cursor:pointer}
#chips button.on{border-color:var(--c,#7aa8ff);background:color-mix(in srgb,var(--c,#7aa8ff) 22%,#121722)}
.log{list-style:none;margin:6px auto 0;padding:0 0 0 14px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.log li{position:relative;font-size:13.5px}.log li:before{content:"";position:absolute;left:-19px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--c,#7aa8ff)}
.log li.deploy:before{background:transparent;border:1px solid var(--c,#7aa8ff)}.log li.deploy .x{color:var(--mut)}
.log .w{font-size:11.5px;color:var(--mut)}.log .w b{color:var(--c);font-weight:600}.log .del{background:none;border:0;color:var(--mut);cursor:pointer;font-size:12px}
.log .day{margin-left:-14px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#6c7689;padding-top:6px}.log .day:before{display:none}
.evf{display:flex;gap:6px;flex-wrap:wrap;margin:8px auto}.evf input,.evf select{background:var(--card);color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:7px;font:inherit;font-size:13px;color-scheme:dark}
.evf input:not([type=date]){flex:1;min-width:140px}.evf button{background:var(--acc);color:#06080c;border:0;border-radius:8px;padding:0 12px;font-weight:600;cursor:pointer}
#plog{max-height:none}.src{color:var(--mut);font-size:11.5px;margin-top:18px}
@media(max-width:700px){#ctl button{padding:6px 9px;font-size:12px}}