.packet-trace { max-width: 100%; max-height: 500px; margin: 20px auto; background: var(--bg-primary, #fff); padding: 20px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); overflow: auto; }
.dark-theme .packet-trace { background: #303446; box-shadow: 0 4px 8px rgba(0,0,0,0.3); }
.trace-header { display: flex; padding-bottom: 10px; border-bottom: 2px solid #ddd; position: sticky; top: -20px; background: #fff; z-index: 10; margin-top: -20px; padding-top: 20px; margin-bottom: 10px; }
.dark-theme .trace-header { border-bottom: 2px solid #51576d; background: #303446; }
.trace-col-time { width: 80px; font-weight: bold; }
.trace-col-tap { flex: 1; text-align: center; font-weight: bold; font-size: 12px; }
.trace-row { display: flex; position: relative; padding: 8px 0; margin-top: 15px; border-bottom: 1px solid #f0f0f0; transition: background 0.2s; }
.dark-theme .trace-row { border-bottom: 1px solid #414559; }
.trace-row:hover { background: #f9f9f9; }
.dark-theme .trace-row:hover { background: #414559; }
.trace-time { width: 80px; font-family: monospace; font-size: 12px; color: #888; }
.dark-theme .trace-time { color: #a5adce; }
.trace-grid { flex: 1; display: flex; position: relative; }
.trace-cell { flex: 1; position: relative; border-left: 1px dashed #eee; }
.trace-cell:last-child { border-right: 1px dashed #eee; }
.dark-theme .trace-cell { border-color: #51576d; }
.trace-dot { width: 10px; height: 10px; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; }
.trace-line { position: absolute; height: 2px; top: 50%; transform: translateY(-50%); z-index: 1; }
.trace-label { position: absolute; top: -15px; white-space: nowrap; font-family: monospace; font-size: 11px; z-index: 3; pointer-events: none; }
.proto-ARP .trace-dot, .proto-ARP .trace-line { background: #bdc3c7; }
.proto-ARP .trace-label { color: #95a5a6; }
.proto-TCP .trace-dot, .proto-TCP .trace-line { background: #3498db; }
.proto-TCP .trace-label { color: #2980b9; }
.dropped .trace-dot, .dropped .trace-line { background: #e74c3c !important; }
.dropped .trace-label { color: #c0392b !important; font-weight: bold; }
.trace-legend { display: flex; gap: 20px; margin-bottom: 15px; font-size: 13px; }
.trace-legend-item { display: flex; align-items: center; gap: 8px; }
.trace-legend-color { width: 20px; height: 4px; border-radius: 2px; }