:root{color-scheme:dark;--bg:#0b1020;--panel:#111827;--panel-2:#0f172a;--hover:#1f2937;--line:#253044;--text:#f8fafc;--muted:#94a3b8;--subtle:#64748b;--blue:#38bdf8;--green:#22c55e;--red:#ef4444;--orange:#f97316;--yellow:#eab308;--purple:#a855f7;--pink:#ec4899;--cyan:#22d3ee;--gray:#64748b;--shadow:0 10px 28px rgba(0,0,0,.24)}*{box-sizing:border-box}body,html{height:100%;overflow:hidden}body{margin:0;background:radial-gradient(circle at 22% 0,rgba(56,189,248,.12),transparent 28%),radial-gradient(circle at 100% 20%,rgba(168,85,247,.1),transparent 26%),var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:13px}*{scrollbar-width:thin;scrollbar-color:rgba(148,163,184,.35) transparent}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:rgba(148,163,184,.32);border-radius:999px}::-webkit-scrollbar-thumb:hover{background:rgba(148,163,184,.52)}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}.rdt-screen{height:100vh;width:100vw;display:grid;grid-template-columns:minmax(240px,282px) minmax(560px,1fr) minmax(300px,350px);grid-gap:10px;gap:10px;padding:10px;overflow:hidden}.center-column,.left-column,.right-column{min-height:0;min-width:0;display:grid;grid-gap:8px;gap:8px}.center-column,.left-column,.right-column{overflow:auto;align-content:start;padding-right:2px}.center-column{grid-template-rows:auto auto minmax(0,1fr)}.brand-block{display:flex;align-items:center;gap:9px;padding:4px 3px 0}.brand-mark{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;background:linear-gradient(135deg,var(--cyan),var(--purple));color:#020617;font-weight:900;letter-spacing:0}.brand-block h1{margin:0;font-size:17px;line-height:1.1;letter-spacing:0}.brand-block p{margin:3px 0 0;color:var(--muted);font-size:11px}.card,.metric-card{min-width:0;border:1px solid var(--line);border-radius:8px;background:color-mix(in srgb,var(--panel) 92%,transparent);box-shadow:var(--shadow);padding:8px}.card{overflow:auto}.metric-card,.quick-actions-card,.round-controls-card{overflow:hidden}.card>header{min-height:20px;display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px}.card h2,.metric-card h2{margin:0;font-size:14px;font-weight:800;color:#e2e8f0;letter-spacing:0}.field,.number-field,.slider-field,.toggle-row{display:grid;grid-gap:5px;gap:5px;margin-bottom:7px}.card>.field:last-child,.card>.number-field:last-child,.card>.slider-field:last-child,.card>.toggle-row:last-child{margin-bottom:0}.estimate-box span,.field span,.hash-block span,.number-field>label,.slider-field label,.toggle-row span{color:var(--muted);font-size:11px;font-weight:700}.field input,.field select,.number-field input,.packet-nav input,.slider-field input[type=number]{width:100%;min-height:28px;border:1px solid var(--line);border-radius:7px;background:var(--panel-2);color:var(--text);padding:4px 7px;outline:0}.field input:focus,.field select:focus,.number-field input:focus,.packet-nav input:focus,.slider-field input[type=number]:focus{border-color:var(--cyan)}.estimate-box{border:1px solid var(--line);border-radius:7px;background:var(--panel-2);padding:6px;display:grid;grid-gap:3px;gap:3px}.estimate-box b{font-size:12px}.config-divider{height:1px;background:var(--line);margin:10px 0 3px}.config-subtitle{margin:0;color:#cbd5e1;font-size:12px;font-weight:900;letter-spacing:0}.protocol-note{margin:0;border:1px solid var(--line);border-radius:7px;background:var(--panel-2);color:var(--muted);padding:5px 7px;font-size:11px;font-weight:800}.protocol-note b{color:var(--text)}.external-udp-box{margin-top:7px;border:1px solid color-mix(in srgb,var(--cyan) 38%,var(--line));border-radius:7px;background:color-mix(in srgb,var(--cyan) 10%,var(--panel-2));padding:7px;display:grid;grid-gap:5px;gap:5px}.external-udp-box span{color:var(--muted);font-size:11px;font-weight:800}.external-udp-box b{color:#cffafe;font-size:12px}.external-udp-box small{color:var(--muted);font-size:11px;font-weight:700;line-height:1.35}.external-udp-box code{display:block;max-width:100%;overflow-wrap:anywhere;border:1px solid var(--line);border-radius:6px;background:rgba(2,6,23,.48);color:var(--text);padding:6px;font-size:11px;line-height:1.35}.window-config{display:grid;grid-gap:7px;gap:7px}.window-config .field,.window-config .number-field{margin-bottom:0}.number-field>div,.slider-field>div{display:grid;grid-template-columns:1fr 54px auto;grid-gap:5px;gap:5px;align-items:center}.slider-field input[type=range]{width:100%;accent-color:var(--cyan)}.toggle-row{grid-template-columns:1fr auto;align-items:center}.toggle-row input{width:34px;height:18px;accent-color:var(--cyan)}.full-btn,.packet-nav button,.primary-btn,.quick-actions button,.secondary-btn,.tiny-btn{min-height:32px;border:1px solid var(--line);border-radius:7px;display:inline-flex;align-items:center;justify-content:center;gap:6px;color:var(--text);background:var(--panel-2);font-weight:800;font-size:12px}.primary-btn{border-color:color-mix(in srgb,var(--cyan) 60%,var(--line));background:linear-gradient(135deg,#0891b2,#2563eb)}.primary-btn,.secondary-btn{width:100%}.secondary-btn{border-color:color-mix(in srgb,var(--purple) 55%,var(--line));color:#f5f3ff;background:color-mix(in srgb,var(--purple) 22%,var(--panel-2))}.quick-actions button:first-child{border-color:color-mix(in srgb,var(--yellow) 55%,var(--line));color:#fef9c3;background:color-mix(in srgb,var(--yellow) 16%,var(--panel-2))}.quick-actions button:nth-child(2){border-color:color-mix(in srgb,var(--red) 55%,var(--line));color:#fee2e2;background:color-mix(in srgb,var(--red) 16%,var(--panel-2))}.full-btn,.quick-actions button:nth-child(3){border-color:color-mix(in srgb,var(--cyan) 55%,var(--line));color:#cffafe;background:color-mix(in srgb,var(--cyan) 14%,var(--panel-2))}.full-btn:hover,.packet-nav button:hover,.quick-actions button:hover,.secondary-btn:hover,.tiny-btn:hover{background:var(--hover)}.summary-grid{min-height:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-gap:8px;gap:8px}.replay-card{overflow:hidden}.replay-card.open{max-height:min(56vh,540px);overflow:auto}.replay-stack{display:grid;grid-gap:8px;gap:8px}.replay-actions{display:grid;grid-template-columns:1fr auto;grid-gap:7px;gap:7px;align-items:center}.replay-actions .full-btn{width:100%}.replay-collapsed-summary{width:100%;min-height:30px;border:1px solid var(--line);border-radius:7px;background:var(--panel-2);color:var(--muted);font-weight:800;font-size:11px}.replay-collapsed-summary:hover{background:var(--hover);color:var(--text)}.replay-player{display:grid;grid-gap:7px;gap:7px}.replay-player input[type=range]{width:100%;accent-color:var(--cyan)}.replay-progress{display:grid;grid-template-columns:auto 1fr auto;grid-gap:8px;gap:8px;align-items:center;color:var(--muted);font-size:11px;font-weight:800}.replay-progress b{color:var(--text);text-align:center}.replay-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:6px;gap:6px}.replay-controls button{min-height:30px;border:1px solid var(--line);border-radius:7px;background:var(--panel-2);color:var(--text);display:inline-flex;align-items:center;justify-content:center;gap:5px;font-weight:800;font-size:11px}.replay-controls button:nth-child(2){border-color:color-mix(in srgb,var(--cyan) 55%,var(--line));color:#cffafe;background:color-mix(in srgb,var(--cyan) 14%,var(--panel-2))}.replay-settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:7px;gap:7px}.replay-settings .field{margin-bottom:0}.replay-saved-header{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--muted);font-size:11px}.replay-saved-header b{color:var(--text)}.saved-replay-list{display:grid;grid-gap:6px;gap:6px;max-height:154px;overflow:auto}.saved-replay-item{display:grid;grid-template-columns:minmax(0,1fr) 32px;grid-gap:5px;gap:5px}.saved-replay-delete,.saved-replay-open{width:100%;border:1px solid var(--line);border-radius:7px;background:var(--panel-2);color:var(--text)}.saved-replay-open{padding:7px;display:grid;grid-gap:3px;gap:3px;text-align:left}.saved-replay-open:hover{background:var(--hover)}.saved-replay-delete{display:grid;place-items:center;color:#fecaca;border-color:color-mix(in srgb,var(--red) 48%,var(--line));background:color-mix(in srgb,var(--red) 12%,var(--panel-2))}.saved-replay-delete:hover{background:color-mix(in srgb,var(--red) 24%,var(--panel-2))}.saved-replay-open b,.saved-replay-open span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.saved-replay-list p,.saved-replay-open span{margin:0;color:var(--muted);font-size:11px}.metric-card{display:grid;align-content:start;grid-gap:3px;gap:3px}.metric-card b{font-size:19px;line-height:1}.metric-card p{margin:0;color:var(--muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.metric-card i{height:6px;border-radius:999px;background:var(--hover);overflow:hidden}.metric-card i span{display:block;height:100%;border-radius:inherit;background:var(--green)}.packet-overview{display:grid;grid-template-rows:auto auto auto auto;align-content:start;overflow:visible}.legend-row{display:flex;flex-wrap:wrap;gap:5px 9px;color:var(--muted);font-size:11px;margin-bottom:5px}.legend-row span{display:inline-flex;align-items:center;gap:6px}.dot{width:7px;height:7px;border-radius:3px;display:inline-block}.dot.pending,.packet-cell.created,.packet-cell.pending{background:#475569}.dot.sent,.packet-cell.sent{background:#0369a1}.dot.received,.packet-cell.received{background:#16a34a}.dot.acknowledged,.packet-cell.acknowledged{background:#22c55e}.dot.retransmitted_acknowledged,.packet-cell.retransmitted_acknowledged{background:#0f9f8f}.dot.lost,.packet-cell.lost{background:#b91c1c}.dot.corrupted,.packet-cell.corrupted{background:#c2410c}.dot.timeout,.packet-cell.timeout{background:#a16207}.dot.retransmitted,.packet-cell.retransmitted{background:#7e22ce}.dot.duplicated,.packet-cell.duplicated{background:#be185d}.packet-grid-shell{display:grid;grid-template-rows:auto auto auto auto;align-content:start;grid-gap:6px;gap:6px;width:100%}.packet-pagebar{min-height:22px;display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--muted);font-size:11px;font-weight:800}.packet-pagebar>div{display:inline-flex;align-items:center;gap:6px}.packet-pagebar button{min-height:21px;border:1px solid var(--line);border-radius:6px;background:var(--panel-2);color:var(--text);padding:0 6px;font-size:11px;font-weight:800}.packet-pagebar b{min-width:42px;text-align:center;color:var(--text)}.packet-current-label{color:var(--muted);font-size:11px;font-weight:800;margin-top:4px}.packet-grid{align-content:start;display:grid;grid-template-columns:repeat(var(--packet-columns,28),minmax(0,1fr));grid-gap:2px;gap:2px;overflow:visible;padding:2px;width:100%}.packet-grid.current-row{border-top:1px solid var(--line);padding-top:6px}.packet-cell{aspect-ratio:1;width:100%;min-width:0;border:1px solid hsla(0,0%,100%,.12);border-radius:4px;color:#f8fafc;font-size:11px;font-weight:900;text-shadow:0 1px 2px rgba(0,0,0,.55);display:grid;place-items:center;padding:0}.packet-cell.selected{outline:2px solid #fff;outline-offset:1px}.packet-separator{grid-column:1/-1;color:var(--muted);text-align:center;letter-spacing:6px;padding:3px 0}.packet-nav{margin-top:5px;justify-content:space-between;gap:8px;color:var(--muted);font-size:11px}.packet-nav,.packet-nav form{display:flex;align-items:center}.packet-nav form{gap:5px}.packet-nav input{width:68px}.packet-details{min-height:0;display:grid;grid-template-rows:auto 1fr}.detail-counters{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px;margin:0}.detail-counters span{border:1px solid var(--line);border-radius:7px;background:var(--panel-2);padding:3px 6px;color:var(--muted);font-size:11px;line-height:1.2;white-space:nowrap}.detail-counters b{color:var(--text)}.packet-timeline{min-height:0;overflow:auto;margin:0;padding:0;display:grid;grid-gap:4px;gap:4px;list-style:none}.packet-timeline li{display:grid;grid-template-columns:42px 118px 58px minmax(100px,150px) 1fr;grid-gap:6px;gap:6px;align-items:center;border-left:3px solid var(--line);border-radius:6px;background:var(--panel-2);padding:5px 6px;color:var(--muted);font-size:11px}.live-log b,.packet-timeline li b{color:var(--text);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.live-log time,.packet-timeline li time{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.packet-timeline li strong{color:var(--text);font-size:11px}.packet-timeline li em{color:var(--muted);font-style:normal;font-size:10px;font-weight:900}.packet-timeline li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.packet-timeline .ack_lost,.packet-timeline .packet_lost{border-left-color:var(--red)}.packet-timeline .packet_sent,.packet-timeline .timer_started{border-left-color:var(--blue)}.packet-timeline .packet_sent span,.packet-timeline .packet_sent strong,.packet-timeline .timer_started span,.packet-timeline .timer_started strong{color:var(--blue)}.packet-timeline .ack_received,.packet-timeline .ack_sent,.packet-timeline .packet_received,.packet-timeline .packet_written{border-left-color:var(--green)}.packet-timeline .ack_received span,.packet-timeline .ack_received strong,.packet-timeline .ack_sent span,.packet-timeline .ack_sent strong,.packet-timeline .packet_received span,.packet-timeline .packet_received strong,.packet-timeline .packet_written span,.packet-timeline .packet_written strong{color:var(--green)}.packet-timeline .ack_lost span,.packet-timeline .ack_lost strong,.packet-timeline .packet_lost span,.packet-timeline .packet_lost strong{color:var(--red)}.packet-timeline .packet_corrupted{border-left-color:var(--orange)}.packet-timeline .packet_corrupted span,.packet-timeline .packet_corrupted strong{color:var(--orange)}.packet-timeline .timeout{border-left-color:var(--yellow)}.packet-timeline .timeout span,.packet-timeline .timeout strong{color:var(--yellow)}.packet-timeline .retransmission{border-left-color:var(--purple)}.packet-timeline .retransmission span,.packet-timeline .retransmission strong{color:var(--purple)}.packet-timeline .duplicate_received{border-left-color:var(--pink)}.packet-timeline .duplicate_received span,.packet-timeline .duplicate_received strong{color:var(--pink)}.empty-row{grid-template-columns:1fr!important}.quick-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:5px;gap:5px}.full-btn{width:100%;margin-top:7px}.save-status{margin:6px 0 0;color:var(--green);font-size:11px;font-weight:800}.stats-card{max-height:none;overflow:visible}.stat-line{display:flex;justify-content:space-between;gap:8px;padding:3px 0;color:var(--muted);font-size:11px}.stat-line b{color:var(--text);text-align:right}.stats-card hr{border:0;border-top:1px solid var(--line);margin:5px 0}.hash-block{display:grid;grid-gap:3px;gap:3px;margin-bottom:7px}.hash-block b{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px}.integrity{border-radius:7px;padding:6px;background:var(--panel-2);color:var(--muted);font-size:11px;font-weight:800}.integrity.ok{color:var(--green)}.live-log-card{min-height:0;display:grid;grid-template-rows:auto 1fr}.tiny-btn{min-height:24px;padding:0 7px;font-size:11px}.live-log{min-height:0;overflow:auto;display:grid;align-content:start;grid-gap:4px;gap:4px}.live-log>div{display:grid;grid-template-columns:42px 118px 56px 112px 1fr;grid-gap:5px;gap:5px;align-items:start;border-left:3px solid var(--line);border-radius:6px;background:var(--panel-2);padding:5px 6px;font-size:11px}.live-log em{color:var(--muted);font-style:normal;font-size:10px;font-weight:900}.live-log em,.live-log span,.live-log strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.live-log .ack_received,.live-log .ack_sent{border-left-color:var(--green)}.live-log .ack_received span,.live-log .ack_received strong,.live-log .ack_sent span,.live-log .ack_sent strong{color:var(--green)}.live-log .ack_lost,.live-log .packet_lost{border-left-color:var(--red)}.live-log .ack_lost span,.live-log .ack_lost strong,.live-log .packet_lost span,.live-log .packet_lost strong{color:var(--red)}.live-log .packet_corrupted{border-left-color:var(--orange)}.live-log .packet_corrupted span,.live-log .packet_corrupted strong{color:var(--orange)}.live-log .timeout{border-left-color:var(--yellow)}.live-log .timeout span,.live-log .timeout strong{color:var(--yellow)}.live-log .retransmission{border-left-color:var(--purple)}.live-log .retransmission span,.live-log .retransmission strong{color:var(--purple)}.live-log .duplicate_received{border-left-color:var(--pink)}.live-log .duplicate_received span,.live-log .duplicate_received strong{color:var(--pink)}@media (max-width:1180px){body,html{overflow:auto}.rdt-screen{height:auto;min-height:100vh;grid-template-columns:1fr}.center-column,.left-column,.rdt-screen,.right-column{overflow:visible}.center-column{grid-template-rows:auto auto auto}.packet-cell{font-size:10px}}@media (max-width:760px){.packet-nav,.packet-pagebar{align-items:stretch;flex-direction:column}.packet-nav form,.packet-pagebar>div{width:100%}.packet-nav button,.packet-pagebar button{flex:1 1}}@media (max-width:520px){.packet-grid{gap:3px}.packet-cell{border-radius:5px;font-size:9px}}