/* lesson50 本地原理动画（不依赖 MixNT 仿真） */
.l50p-overlay{
  position:fixed; inset:0; z-index:12000;
  background:rgba(18,36,32,.58);
  display:flex; align-items:center; justify-content:center;
  padding:16px;
}
.l50p-overlay[hidden]{display:none !important}
.l50p-card{
  width:min(760px,96vw);
  max-height:min(92vh,720px);
  overflow:auto;
  background:#fff;
  border-radius:16px;
  box-shadow:0 18px 48px rgba(12,40,32,.28);
  border:1px solid #c5ddd4;
  color:#1a2e26;
  font:inherit;
}
.l50p-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px 10px;
  border-bottom:1px solid #dceae4;
}
.l50p-head h3{margin:0; font-size:1.08rem; color:#0b4f49}
.l50p-close{
  border:0; background:#eef6f3; color:#0b4f49;
  width:32px; height:32px; border-radius:8px; cursor:pointer; font-size:18px; line-height:1;
}
.l50p-close:hover{background:#d8eee6}
.l50p-cap{
  margin:0; padding:10px 16px 0;
  color:#3d534b; font-size:.92rem; min-height:2.6em;
}
.l50p-stage{
  margin:10px 16px;
  background:linear-gradient(180deg,#f7fbf9,#eef6f2);
  border:1px solid #d4e8df;
  border-radius:12px;
  overflow:hidden;
}
.l50p-stage svg{display:block; width:100%; height:auto}
.l50p-bar{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  padding:0 16px 14px;
}
.l50p-bar button{
  border:1px solid #b9d5ca; background:#e7f5ef; color:#0b4f49;
  border-radius:999px; padding:6px 12px; font:inherit; cursor:pointer;
}
.l50p-bar button:hover{background:#d8eee6}
.l50p-step{margin-left:auto; color:#5a6f66; font-size:.85rem}
.l50p-node rect{fill:#e7f5ef; stroke:#1f5c4a; stroke-width:1.4}
.l50p-node text,.l50p-lab{
  fill:#1a2e26; font-size:13px; font-weight:600; font-family:inherit;
}
.l50p-router rect{fill:#d8eee6; stroke:#00695c; stroke-width:1.4}
.l50p-server rect{fill:#e8eaf8; stroke:#3f51b5; stroke-width:1.4}
.l50p-cloud rect{fill:#e3f2fd; stroke:#1565c0; stroke-width:1.4}
.l50p-warn rect{fill:#fff4e8; stroke:#e67e22; stroke-width:1.4}
.l50p-drop rect{fill:#fdecea; stroke:#c0392b; stroke-width:1.4}
.l50p-ok rect{fill:#e8f5e9; stroke:#2e7d32; stroke-width:1.4}
.l50p-wire{stroke:#90a4ae; stroke-width:2; fill:none}
.l50p-wire-on{stroke:#00897b; stroke-width:2.4}
.l50p-pkt{fill:#e67e22}
.l50p-pkt-b{fill:#2980b9}
.l50p-pkt-g{fill:#2e7d32}
.l50p-cap-svg{fill:#5a6f66; font-size:12px; font-family:inherit}
.l50p-layer{stroke:#1f5c4a; stroke-width:1.2}
.l50p-layer.l1{fill:#d8eee6}
.l50p-layer.l2{fill:#e8f0fa}
.l50p-layer.l3{fill:#fff4e8}
.l50p-layer.l4{fill:#f0eef8}
.l50p-hi{filter:drop-shadow(0 0 4px rgba(230,126,34,.7))}
.l50p-move-x{animation:l50p-x 1.5s ease-in-out infinite alternate}
.l50p-move-y{animation:l50p-y 1.5s ease-in-out infinite alternate}
.l50p-pulse{animation:l50p-pulse 1.2s ease-in-out infinite}
@keyframes l50p-x{from{transform:translateX(0)}to{transform:translateX(var(--dx,90px))}}
@keyframes l50p-y{from{transform:translateY(0)}to{transform:translateY(var(--dy,48px))}}
@keyframes l50p-pulse{0%,100%{opacity:.4}50%{opacity:1}}