/* assets/css/systems/info-systems/tcp-vs-udp.css — 本页专属样式（en/zh 共用） */
/* ============ TCP vs UDP 对比 · TCP vs UDP comparison ============ */

body[data-topic="tcp-vs-udp"] .svg-title{fill:var(--strong);font-family:var(--mono);font-size:17px;font-weight:600;letter-spacing:.06em}
body[data-topic="tcp-vs-udp"] .tag{fill:#475569;font-family:var(--mono);font-size:13px;letter-spacing:.02em}
body[data-topic="tcp-vs-udp"] .tag-sm{fill:#5b6472;font-size:11px}

/* 面板 / panels（装饰性容器） */
body[data-topic="tcp-vs-udp"] .tvu-panel-tcp{fill:#eff6ff;stroke:#2563eb;stroke-width:1.6}
body[data-topic="tcp-vs-udp"] .tvu-panel-udp{fill:#fff7ed;stroke:#ea580c;stroke-width:1.6}
body[data-topic="tcp-vs-udp"] .tvu-head-tcp{fill:#1e40af;font-family:var(--mono);font-size:16px;font-weight:700;letter-spacing:.08em}
body[data-topic="tcp-vs-udp"] .tvu-head-udp{fill:#b45309;font-family:var(--mono);font-size:16px;font-weight:700;letter-spacing:.08em}

/* 端点本体 */
body[data-topic="tcp-vs-udp"] .part .body{fill:#c2d1e4;stroke:#2563eb;stroke-width:1.6}
body[data-topic="tcp-vs-udp"] .part .body2{fill:#dde7f4;stroke:#60a5fa;stroke-width:1.2}
body[data-topic="tcp-vs-udp"] .part[data-id="part-tcp-client"]:not(.is-active) .body{fill:#bcd9f2}
body[data-topic="tcp-vs-udp"] .part[data-id="part-tcp-server"]:not(.is-active) .body{fill:#c8c1e5}
body[data-topic="tcp-vs-udp"] .part[data-id="part-udp-client"]:not(.is-active) .body{fill:#bcd9f2}
body[data-topic="tcp-vs-udp"] .part[data-id="part-udp-server"]:not(.is-active) .body{fill:#c8c1e5}

/* 序号分段与 ACK */
body[data-topic="tcp-vs-udp"] .tvu-seg{fill:#bbf7d0;stroke:#047857;stroke-width:1.2}
body[data-topic="tcp-vs-udp"] .tvu-seg-t{fill:#065f46;font-family:var(--mono);font-size:11px}
body[data-topic="tcp-vs-udp"] .tvu-arrow{fill:none;stroke:#2563eb;stroke-width:3;stroke-linecap:round}
body[data-topic="tcp-vs-udp"] .tvu-ack{fill:none;stroke:#2563eb;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:8 7}

/* UDP 数据报 */
body[data-topic="tcp-vs-udp"] .tvu-dgram{fill:#dbeafe;stroke:#2563eb;stroke-width:1.4}
body[data-topic="tcp-vs-udp"] .tvu-dgram-t{fill:#1e3a8a;font-family:var(--mono);font-size:11px}
body[data-topic="tcp-vs-udp"] .tvu-lost{fill:none;stroke:#be123c;stroke-width:3;stroke-linecap:round;stroke-dasharray:6 5}
body[data-topic="tcp-vs-udp"] .tvu-lost-t{fill:#9f1239;font-family:var(--mono);font-size:11px}

/* 对比要点 */
body[data-topic="tcp-vs-udp"] .tvu-bullet{fill:#3c4a5a;font-size:12px}

/* 动画 */
body[data-topic="tcp-vs-udp"] .is-running .tvu-arrow,
body[data-topic="tcp-vs-udp"] .is-running .tvu-ack,
body[data-topic="tcp-vs-udp"] .is-running .tvu-lost{animation:tvu-march .85s linear infinite}
body[data-topic="tcp-vs-udp"] .is-running .tvu-dgram{animation:tvu-fly 1.5s ease-in-out infinite}
body[data-topic="tcp-vs-udp"] .is-running .tvu-dgram.b2{animation-delay:.3s}
body[data-topic="tcp-vs-udp"] .is-running .tvu-dgram.b3{animation-delay:.6s}
@keyframes tvu-march{to{stroke-dashoffset:-15}}
@keyframes tvu-fly{0%,100%{opacity:.55}50%{opacity:1}}
body[data-topic="tcp-vs-udp"] .is-running .tvu-panel-tcp{animation:tvu-tcp 3.4s ease-in-out infinite}
body[data-topic="tcp-vs-udp"] .is-running .tvu-panel-udp{animation:tvu-udp 3.4s ease-in-out infinite}
@keyframes tvu-tcp{0%,48%,100%{fill:#eff6ff}52%,66%{fill:#dbeafe}}
@keyframes tvu-udp{0%,66%,100%{fill:#fff7ed}70%,84%{fill:#ffedd5}}

/* 高亮态（换色 + 描边加粗 + 发光） */
body[data-topic="tcp-vs-udp"] .part.is-active .body{fill:#9dc3f5;stroke:#1d4ed8;stroke-width:2.2}
body[data-topic="tcp-vs-udp"] .part.is-active .tvu-panel-tcp{fill:#dbeafe;stroke:#1d4ed8}
body[data-topic="tcp-vs-udp"] .part.is-active .tvu-panel-udp{fill:#ffedd5;stroke:#c2410c}
body[data-topic="tcp-vs-udp"] .part.is-active{filter:drop-shadow(0 0 12px rgba(29,78,216,.5))}

@media (prefers-reduced-motion:reduce){
  body[data-topic="tcp-vs-udp"] .is-running .tvu-arrow,
  body[data-topic="tcp-vs-udp"] .is-running .tvu-ack,
  body[data-topic="tcp-vs-udp"] .is-running .tvu-dgram,
  body[data-topic="tcp-vs-udp"] .is-running .tvu-lost,
  body[data-topic="tcp-vs-udp"] .is-running .tvu-panel-tcp,
  body[data-topic="tcp-vs-udp"] .is-running .tvu-panel-udp{animation:none;opacity:1}
}