*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0c0f15;--bg2: #111620;--bg3: #161d2e;--border: #222c42;--text: #e2e8f0;--text2: #8a97b0;--text3: #4e5e7a;--radius: 14px;font-family:ui-sans-serif,system-ui,sans-serif;font-size:14px;color:var(--text);background:var(--bg)}.app{display:flex;flex-direction:column;height:100vh;overflow:hidden}.topbar{display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:52px;background:var(--bg2);border-bottom:1px solid var(--border);flex-shrink:0;gap:12px}.topbar-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;color:#a5b4fc}.topbar-actions{display:flex;align-items:center;gap:8px}.topbar-err{color:#f87171;font-size:12px}.workspace{display:flex;flex:1;overflow:hidden}.tree-panel{flex:1;overflow:auto;padding:28px 36px}.tree-root{display:inline-flex;min-width:100%}.troot{position:relative;margin-left:20px;padding-left:56px}.troot:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--wire);border-radius:3px;opacity:.5}.troot:after{content:"";position:absolute;left:0;top:41px;width:56px;height:3px;background:var(--wire);border-radius:3px;opacity:.5}.troot-dot{left:-5px;top:-2px}.troot-join{left:-5px;top:41px;transform:translateY(-50%)}.tnode{display:inline-flex;flex-direction:column;align-items:flex-start}.tcard{position:relative;display:flex;flex-direction:row;align-items:center;gap:14px;width:310px;min-height:72px;padding:12px 16px;border:2px solid color-mix(in srgb,var(--accent) 50%,var(--border));border-radius:var(--radius);background:color-mix(in srgb,var(--accent) 6%,var(--bg2));box-shadow:0 2px 12px #0000004d;cursor:pointer;-webkit-user-select:none;user-select:none;transition:box-shadow .15s,transform .12s,border-color .12s}.tcard:hover{box-shadow:0 6px 20px #0006;transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 80%,var(--border))}.tcard.selected{border-color:var(--accent);border-style:dashed;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}.tcard.stacked:after{content:"";position:absolute;bottom:-5px;left:6px;right:6px;height:6px;border-radius:0 0 var(--radius) var(--radius);background:color-mix(in srgb,var(--accent) 20%,var(--bg3));border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border));border-top:none}.tcard-icon{flex:0 0 auto;width:44px;height:44px;display:grid;place-items:center;border-radius:11px;background:color-mix(in srgb,var(--accent) 20%,transparent);color:var(--accent)}.tcard-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.tcard-label{font-weight:600;font-size:13px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tcard-sub{font-size:11px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.s-dot{flex-shrink:0;width:9px;height:9px;border-radius:50%}.s-dot.online{background:#22c55e;box-shadow:0 0 7px #22c55e99}.s-dot.offline{background:#334155}.expand-pill{position:absolute;left:50%;bottom:-14px;transform:translate(-50%);display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 10px;border:2px solid color-mix(in srgb,var(--accent) 60%,var(--border));border-radius:999px;background:var(--bg2);color:var(--accent);font-size:11px;font-weight:700;cursor:pointer;z-index:6;box-shadow:0 2px 6px #0006;transition:background .12s,border-color .12s}.expand-pill:hover{background:color-mix(in srgb,var(--accent) 12%,var(--bg2))}.expand-pill.open svg{transform:rotate(180deg)}.expand-pill svg{transition:transform .15s}.tdot{position:absolute;width:11px;height:11px;border:2.5px solid color-mix(in srgb,var(--wire) 70%,transparent);border-radius:50%;background:var(--bg2);z-index:4}.tchildren{position:relative;margin-left:155px;padding-left:48px;display:flex;flex-direction:column;margin-top:0}.tbranch{position:relative;margin-top:20px}.tbranch:before{content:"";position:absolute;left:-48px;top:-20px;bottom:0;width:3px;background:color-mix(in srgb,var(--wire) 45%,transparent);border-radius:3px}.tbranch:last-child:before{bottom:auto;height:57px}.tbranch:after{content:"";position:absolute;left:-48px;top:41px;width:48px;height:3px;background:color-mix(in srgb,var(--wire) 45%,transparent);border-radius:3px}.tbranch>.tdot{left:-52px;top:41px;transform:translateY(-50%)}.tbranch>.tnode{flex:1}.panel{width:300px;flex-shrink:0;display:flex;flex-direction:column;background:var(--bg2);border-left:1px solid var(--border);overflow-y:auto}.panel-empty{align-items:center;justify-content:center}.panel-hint{text-align:center;color:var(--text3);display:flex;flex-direction:column;gap:6px}.panel-hint span{font-weight:600;color:var(--text2)}.panel-header{display:flex;align-items:center;gap:12px;padding:18px;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--accent) 8%,var(--bg2))}.panel-icon{width:42px;height:42px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--accent) 20%,transparent);color:var(--accent)}.panel-header h2{font-size:14px;font-weight:600}.panel-header small{color:var(--text3);font-size:11px}.panel-status{margin-left:auto;font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px}.panel-status.online{background:#14532d55;color:#4ade80;border:1px solid #14532d}.panel-status.offline{background:#1e293b55;color:#64748b;border:1px solid #334155}.panel-body{padding:14px;display:flex;flex-direction:column;gap:14px}.panel-section h3{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text3);margin-bottom:8px}.meta-list{display:flex;flex-direction:column;gap:4px}.meta-list>div{display:flex;justify-content:space-between;gap:8px}.meta-list dt{color:var(--text3);font-size:12px}.meta-list dd{font-size:12px;font-weight:500;text-align:right;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.child-list{list-style:none;display:flex;flex-direction:column;gap:4px}.child-list li{display:flex;align-items:center;gap:6px;padding:6px 9px;border-radius:8px;background:color-mix(in srgb,var(--accent) 8%,var(--bg3));border:1px solid color-mix(in srgb,var(--accent) 20%,var(--border));font-size:12px}.child-list li svg{flex-shrink:0;color:var(--accent)}.child-list li span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}.child-list li small{color:var(--text3);font-size:11px}.child-list li .s-dot{margin-left:auto}.action-list{display:flex;flex-direction:column;gap:6px}.action-btn{display:flex;align-items:center;gap:9px;padding:9px 13px;border-radius:8px;border:1px solid var(--border);background:var(--bg3);color:var(--text);cursor:pointer;font-size:13px;font-weight:500;transition:background .12s,border-color .12s}.action-btn:hover{background:var(--bg2);border-color:var(--text3)}.action-btn.primary{background:color-mix(in srgb,#6366f1 15%,var(--bg3));border-color:#6366f1;color:#a5b4fc}.action-btn.primary:hover{background:color-mix(in srgb,#6366f1 25%,var(--bg3))}.action-btn.danger{border-color:#7f1d1d;color:#fca5a5}.action-btn.danger:hover{background:#450a0a;border-color:#ef4444}.login-screen{height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg)}.login-card{width:320px;padding:36px;background:var(--bg2);border:1px solid var(--border);border-radius:16px;display:flex;flex-direction:column;gap:22px}.login-logo{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:700;color:#a5b4fc}.login-card form{display:flex;flex-direction:column;gap:10px}.login-card input{padding:11px 13px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:14px;outline:none}.login-card input:focus{border-color:#6366f1}.login-card button{padding:11px;background:#6366f1;border:none;border-radius:8px;color:#fff;font-size:14px;font-weight:600;cursor:pointer}.login-card button:disabled{opacity:.5;cursor:default}.login-err{color:#f87171;font-size:12px}.icon-btn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--text2);cursor:pointer;transition:color .12s,border-color .12s}.icon-btn:hover{color:var(--text);border-color:var(--text3)}.icon-btn.spinning svg{animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading{color:var(--text3);padding:60px;text-align:center;font-size:13px}