:root{--bg:#f2f7f7;--ink:#17303f;--muted:#4d6776;--line:#d3e0e6;--panel:#fff;--teal:#0f6661;--teal-soft:#d3efec;--orange:#de6f2b;--red:#b6362e;--route:#f2a65a;--shadow:0 14px 24px #102b391f}*{box-sizing:border-box}body{min-height:100vh;color:var(--ink);background:radial-gradient(circle at 12% 20%, #0f666124, transparent 26%), radial-gradient(circle at 84% 0%, #de6f2b2e, transparent 22%), var(--bg);margin:0;font-family:Trebuchet MS,Segoe UI,sans-serif}#root{min-height:100vh}.app-shell{gap:1rem;width:min(1280px,96vw);margin:1.4rem auto;display:grid}.topbar{color:#effbfb;box-shadow:var(--shadow);background:linear-gradient(110deg,#0f6661 0%,#1b4f73 100%);border-radius:18px;padding:1.3rem 1.4rem;animation:.38s fade-slide}.topbar h1{letter-spacing:.4px;margin:0;font-size:clamp(1.1rem,2.3vw,1.8rem)}.topbar p{color:#dbf7f4;margin:.45rem 0 0}.workspace-grid{grid-template-columns:1.7fr 1fr;gap:1rem;display:grid}.canvas-wrap{background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:18px;animation:.52s fade-slide;overflow:hidden}.network-canvas{cursor:crosshair;width:100%;display:block}.canvas-hint{border-top:1px dashed var(--line);color:var(--muted);margin:0;padding:.75rem .95rem;font-size:.92rem}.edge{stroke:#8fb4c2;stroke-width:2px;opacity:.75}.route-edge{stroke:var(--route);stroke-width:4px;opacity:1}.node{fill:#2d7ba0;stroke:#fff;stroke-width:2px;transition:transform .12s}.node-group:hover .node{transform:scale(1.04)}.source-node{fill:var(--teal)}.destination-node{fill:var(--red)}.route-node{stroke:var(--route);stroke-width:3px}.node-label{fill:#fff;pointer-events:none;font-size:.65rem;font-weight:700}.packet{fill:var(--orange);stroke:#fff;stroke-width:1.5px;filter:drop-shadow(0 0 4px #ff944699)}.right-panels{gap:1rem;display:grid}.panel{background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:18px;padding:1rem;animation:.56s fade-slide}.panel h2{margin:0 0 .9rem}.panel h3{margin:1rem 0 .5rem}label{color:var(--muted);gap:.4rem;font-size:.92rem;display:grid}select,input[type=range],button{width:100%}select{border:1px solid var(--line);color:var(--ink);background:#fff;border-radius:10px;padding:.52rem}.grid-two{grid-template-columns:1fr 1fr;gap:.65rem;margin-bottom:.8rem;display:grid}.button-row{gap:.55rem;margin-top:.9rem;display:grid}button{color:#fff;background:var(--teal);cursor:pointer;border:none;border-radius:10px;padding:.62rem .7rem;font-weight:700;transition:transform .14s,opacity .14s}button:hover{transform:translateY(-1px)}button:disabled{opacity:.45;cursor:not-allowed}button.secondary{background:#1f4f7e}button.danger{background:var(--red)}.stats{grid-template-columns:repeat(3,1fr);gap:.5rem;display:grid}.stats div{background:var(--teal-soft);border-radius:10px;gap:.2rem;padding:.55rem;display:grid}.stats span{color:#35606a;font-size:.78rem}.log-box{border:1px dashed var(--line);background:#f9fcfc;border-radius:10px;max-height:210px;padding:.65rem;overflow-y:auto}.log-box p{margin:0;padding:.22rem 0;font-size:.87rem}.legend{grid-template-columns:repeat(2,1fr);gap:.45rem;font-size:.86rem;display:grid}.dot{border-radius:99px;width:11px;height:11px;margin-right:.4rem;display:inline-block}.dot.normal{background:#2d7ba0}.dot.source{background:var(--teal)}.dot.destination{background:var(--red)}.dot.route{background:var(--route)}.dot.packet{background:var(--orange)}@keyframes fade-slide{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media (width<=1050px){.workspace-grid{grid-template-columns:1fr}.network-canvas{min-height:360px}}@media (width<=680px){.app-shell{width:98vw;margin:.6rem auto}.grid-two,.stats,.legend{grid-template-columns:1fr}}