/* /assets/css/sim/system-economic/tcp-packet-loss-retransmission-simulator.css — 本页专属样式（en/zh 共用） */
/* merged from source <style> (sim-14-tcp-packet-loss-retransmission-simulator.html) */

/* ===== SVG 文字与标注 ===== */
.svg-title{fill:#16202c}
.tag{fill:#334155;font-size:13px}
.tag-sm{fill:#5b6472;font-size:11px}
.legend{fill:#5b6472}

/* ===== 控制面板 ===== */
.controls{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:flex-end;
  padding:14px 16px 12px;margin:0 6px;border-top:1px solid var(--line-soft);}
.ctrl-group{flex:1 1 200px;display:flex;flex-direction:column;gap:6px;}
.ctrl-group label{font-size:13px;color:var(--muted);display:flex;justify-content:space-between;align-items:baseline;}
.ctrl-group label b{color:var(--accent);font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;}
input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:4px;
  background:linear-gradient(90deg,#bfdbfe,#2563eb);outline:none;cursor:pointer;}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;
  border-radius:50%;background:#fff;border:3px solid #2563eb;box-shadow:0 2px 6px rgba(37,99,235,.35);cursor:grab;}
input[type="range"]::-webkit-slider-thumb:active{cursor:grabbing;}
input[type="range"]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;
  border:3px solid #2563eb;box-shadow:0 2px 6px rgba(37,99,235,.35);cursor:grab;}

#startBtn,#resetBtn{border:none;border-radius:8px;cursor:pointer;font-size:14px;font-weight:700;
  padding:10px 20px;transition:opacity .2s,transform .1s;flex:0 0 120px;text-transform:none;letter-spacing:0;}
#startBtn{background:#2563eb;color:#fff;}
#startBtn:disabled{background:#5b6472;cursor:not-allowed;opacity:.7;}
#resetBtn{background:#e2e8f0;color:#334155;}
#startBtn:hover,#resetBtn:hover{opacity:.9;}
#startBtn:active,#resetBtn:active{transform:scale(.98);}

/* ===== 日志区（SVG foreignObject 内） ===== */
.log-box{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:10px 14px;
  font-size:13px;font-family:var(--mono);color:var(--strong);height:100%;overflow-y:auto;
  box-sizing:border-box;line-height:1.6;}
.log-box div{border-bottom:1px solid #f1f5f9;padding:2px 0;}
.log-box div:last-child{border-bottom:none;}

/* ===== 移动端顺序（与 style.css 的 display:contents 排序配套） ===== */
@media (max-width:1160px){
  .controls{order:4}
}

/* ===== 无障碍：减弱动效 ===== */
@media (prefers-reduced-motion:reduce){
  body[data-topic="tcp-packet-loss"] *{animation:none}
}