:root{ --bg-1:#071521; --bg-2:#06172a; --txt:#e6eef8; --ok:#10b981; --err:#ef4444; --muted:#94a3b8; --accent:#60a5fa; --icon-size:44px; --icon-glow-pad:10; --label-size:8px; --ip-size:7px; }
@media (max-width:600px){ :root{ --icon-size:36px; --icon-glow-pad:8; --label-size:11px; --ip-size:10px; } }
html,body{height:100%;margin:0;background: radial-gradient(800px 500px at 10% 10%, rgba(16,24,32,0.6), transparent 20%), linear-gradient(180deg,var(--bg-1), var(--bg-2)); color:var(--txt); font-family:Inter,system-ui,Roboto,Arial}
.topbar{position:fixed;left:12px;right:12px;top:12px;display:flex;gap:8px;align-items:center;z-index:60}
.pill{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.03);padding:8px 12px;border-radius:999px;font-size:14px;display:inline-flex;gap:8px;align-items:center}
.btn{cursor:pointer;padding:6px 10px;border-radius:8px;background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--txt);font-size:13px}
#canvas{position:absolute;inset:0;top:64px}
svg{display:block;width:100%;height:calc(100vh - 84px);overflow:visible}
.link{fill:none;stroke-linecap:round;stroke-width:2.6;opacity:0.95;transition:stroke .2s,opacity .2s,stroke-width .2s}
.link.router-link{stroke:rgba(96,165,250,0.75);stroke-dasharray:8 8;stroke-width:3.4;opacity:0.95}
.link.device-link{stroke:rgba(148,163,184,0.26);stroke-dasharray:12 8;stroke-width:3}
.link.flow{animation:dash-move-forward 1.4s linear infinite}
@keyframes dash-move-forward{to{stroke-dashoffset:-120}}
.link.blink{animation:blink 1s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:0.28}50%{opacity:1}}
.link.device-link.online{stroke:var(--ok)}
.link.device-link.offline{stroke:var(--err);stroke-width:3.6}
.link.device-link.unknown{stroke:rgba(148,163,184,0.36)}
.html-node{width:140px;font-family:Inter,system-ui,Roboto,Arial;pointer-events:none;color:var(--txt);text-align:center;display:block;user-select:none}
.icon-wrap{width:var(--icon-size);height:var(--icon-size);border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.02);transition:box-shadow .18s ease, transform .18s ease, border .18s ease;box-sizing:border-box;border:1px solid rgba(255,255,255,0.03);margin:0 auto;position:relative}
.icon{font-size:calc(var(--icon-size)*0.45);color:#fff;filter:drop-shadow(0 6px 14px rgba(0,0,0,0.6))}
.html-node .label{display:block;font-weight:700;font-size:var(--label-size);margin-top:8px;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.html-node .ip{display:block;font-size:var(--ip-size);color:rgba(255,255,255,0.78);margin-top:2px}
.node.online .icon-wrap{border-color:rgba(16,185,129,0.55);box-shadow:0 6px 18px rgba(16,185,129,0.06),0 0 18px rgba(16,185,129,0.10)}
.node.offline .icon-wrap{border-color:rgba(239,68,68,0.65);box-shadow:0 6px 18px rgba(239,68,68,0.06),0 0 20px rgba(239,68,68,0.14)}
.node.unknown .icon-wrap{border-color:rgba(96,165,250,0.55);box-shadow:0 6px 18px rgba(96,165,250,0.05),0 0 14px rgba(96,165,250,0.10)}
g.node:hover .icon-wrap{transform:translateY(-3px) scale(1.03)}
.legend{position:fixed;left:12px;bottom:12px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.03);padding:8px 10px;border-radius:10px;font-size:13px;color:var(--muted)}
.dot{display:inline-block;width:10px;height:10px;border-radius:999px;margin-right:6px}
.ok{background:var(--ok)} .nok{background:var(--err)} .unk{background:#94a3b8}
.modal-back{position:fixed;inset:0;background:rgba(0,0,0,0.5);display:none;align-items:center;justify-content:center;z-index:90}
.modal{background:#071422;border:1px solid #153046;padding:16px;border-radius:10px;width:420px;box-shadow:0 10px 40px rgba(0,0,0,.6)}
.form-row{margin-bottom:10px}
.form-row label{display:block;color:#9fb0c8;font-size:13px;margin-bottom:6px}
.form-row input,.form-row select{width:100%;padding:8px;border-radius:8px;border:1px solid #203544;background:#071723;color:var(--txt)}
.small{font-size:13px;color:#9fb0c8}
@media (max-width:800px){.modal{width:92%}.pill{font-size:13px}}
#toastWrap{position:fixed;right:12px;top:84px;z-index:200;display:flex;flex-direction:column;gap:8px}
.toast{min-width:220px;padding:10px 12px;border-radius:8px;background:#0b2b3a;border:1px solid #153046;color:var(--txt);box-shadow:0 6px 20px rgba(0,0,0,0.45);font-size:13px;display:flex;align-items:center;gap:8px}
.toast.ok{border-left:4px solid var(--ok)} .toast.err{border-left:4px solid var(--err)} .toast.info{border-left:4px solid #3b82f6}
.type-hint{margin-top:6px;color:#f3d2a0;font-size:13px}
.info-note{margin-top:6px;color:#cbd5e1;font-size:13px}