:root{
  --bg:#0d1220;
  --panel:#0f172a;
  --text:#f8fafc;
  --muted:#cbd5e1;
  --grid:#22324a;
  --stroke-strong:#94a3b8;
  --stroke-med:#64748b;
  --pkt-outline:#020617;
  --flash-add:#064e3b;
  --flash-update:#3f2d0c;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;background:radial-gradient(1200px 600px at 50% 20%,#0f1a31 0%,#0d1220 40%,#0b1020 100%);color:var(--text)}
header{padding:12px 16px;border-bottom:1px solid var(--stroke-med)}.subtitle{color:var(--muted)}
#controls{padding:12px 16px}.control-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.control-row input,select,button{background:#0b1220;color:var(--text);border:1px solid var(--stroke-med);border-radius:8px;padding:8px 10px}
.hidden{display:none}
.board-wrap{background:#0b1220;border:1px solid var(--stroke-med);border-radius:12px;padding:8px}
#workspace{display:grid;grid-template-columns:1fr 380px;gap:12px;padding:0 16px 16px}
.link{stroke:var(--stroke-med);stroke-width:3.5;opacity:0.95}
.pc,.switchbox,.routerbox{fill:#0a0f1a;stroke:var(--stroke-strong);stroke-width:2.2}
.node .title{text-anchor:middle;dominant-baseline:middle;font-size:14px;font-weight:800;fill:var(--text);stroke:#0a0f1a;stroke-width:1.1;paint-order:stroke}
.node .mini{text-anchor:middle;dominant-baseline:middle;font-size:11px;fill:#e5e7eb;stroke:#0a0f1a;stroke-width:0.8;paint-order:stroke}
.port{fill:#22c55e}.port.uplink{fill:#60a5fa}
.portlabel{fill:#f1f5f9;font-size:12px;text-anchor:middle;dominant-baseline:middle;stroke:#0a0f1a;stroke-width:0.9;paint-order:stroke}
.packet .pkt{fill:#60a5fa;stroke:#e2e8f0;stroke-width:1.5}
.packet.broadcast .pkt{fill:#c5a9ff}
.packet.flood .pkt{fill:#ffc24d}
.packet.unicast .pkt{fill:#6bf2bf}
.packet.arp .pkt{fill:#ff6b6b}
.pktlabel{font-size:12px;fill:#fffbe6;stroke:var(--pkt-outline);stroke-width:1.4;paint-order:stroke;text-anchor:middle;font-weight:800}
#legends{margin-top:8px;color:#e5e7eb;font-weight:600}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle}
.dot.bcast{background:#c5a9ff}.dot.flood{background:#ffc24d}.dot.unicast{background:#6bf2bf}.dot.arp{background:#ff6b6b}
aside .panel{background:rgba(15,23,42,0.9);border:1px solid var(--stroke-med);border-radius:12px;padding:12px;margin-bottom:10px;backdrop-filter:blur(2px)}
#macTable,.arp{width:100%;border-collapse:collapse}#macTable th,#macTable td,.arp th,.arp td{border:1px solid #334155;padding:6px 8px}
#macTable thead th,.arp thead th{background:#0b1324;color:#f8fafc}
#macTable tbody td,.arp tbody td{color:#e5e7eb}
@keyframes fadeOutBg{0%{opacity:1}100%{opacity:1;background-color:transparent}}
.flash-add td{background:var(--flash-add);animation:fadeOutBg 5s forwards}
.flash-update td{background:var(--flash-update);animation:fadeOutBg 5s forwards}
.explain{font-size:14px;line-height:1.5}
.explain.advanced{color:#e6f7a1}