:root{--bg:#f3f4f6;--pane-bg:#fff;--border:#c9ccd1;--text:#1a1d21;--text-muted:#5b6168;--toolbar-bg:#e8eaed;--header-bg:#eef0f3;--row-selected-bg:#1a6fd1;--row-selected-text:#fff;--row-hover-bg:#0000000a;--divider-bg:#d6d9dd;--divider-hover:#9aa3ad;--mono:"SF Mono", "Consolas", "Menlo", "Cascadia Mono", ui-monospace, monospace;--sans:-apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--accent:#1a6fd1;--byte-highlight-bg:#ffd54a;--byte-highlight-text:#1a1d21;--input-bg:#fff;--input-invalid:#d1392b}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#1e2126;--pane-bg:#26292f;--border:#3a3f47;--text:#e4e6eb;--text-muted:#9aa1ab;--toolbar-bg:#2c3036;--header-bg:#2c3036;--row-selected-bg:#2d6fc4;--row-selected-text:#fff;--row-hover-bg:#ffffff0f;--divider-bg:#343841;--divider-hover:#565c66;--accent:#5aa0e8;--byte-highlight-bg:#caa23a;--byte-highlight-text:#1a1d21;--input-bg:#1b1d21;--input-invalid:#e05a4d}}:root[data-theme=dark]{--bg:#1e2126;--pane-bg:#26292f;--border:#3a3f47;--text:#e4e6eb;--text-muted:#9aa1ab;--toolbar-bg:#2c3036;--header-bg:#2c3036;--row-selected-bg:#2d6fc4;--row-selected-text:#fff;--row-hover-bg:#ffffff0f;--divider-bg:#343841;--divider-hover:#565c66;--accent:#5aa0e8;--byte-highlight-bg:#caa23a;--byte-highlight-text:#1a1d21;--input-bg:#1b1d21;--input-invalid:#e05a4d}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;margin:0}body{font-family:var(--sans);color:var(--text);font-size:13px}#root{height:100vh}.app{background:var(--bg);height:100vh;color:var(--text);flex-direction:column;display:flex}.app__header{flex-shrink:0;align-items:baseline;gap:10px;padding:8px 14px 4px;display:flex}.app__title{letter-spacing:.2px;margin:0;font-size:16px;font-weight:700}.app__subtitle{color:var(--text-muted);font-size:12px}.toolbar{background:var(--toolbar-bg);border-bottom:1px solid var(--border);flex-wrap:wrap;flex-shrink:0;align-items:center;gap:16px;padding:6px 12px;display:flex}.toolbar__group{align-items:center;gap:6px;display:flex}.toolbar__btn{border:1px solid var(--border);background:var(--pane-bg);color:var(--text);cursor:pointer;border-radius:4px;align-items:center;gap:5px;padding:5px 11px;font-size:12.5px;display:inline-flex}.toolbar__btn:hover{border-color:var(--accent)}.toolbar__btn--primary{color:#fff;background:#2f9e44;border-color:#2f9e44}.toolbar__btn--danger{color:#fff;background:#d1392b;border-color:#d1392b}.toolbar__label{color:var(--text-muted);font-size:12px}.toolbar__select{border:1px solid var(--border);background:var(--input-bg);color:var(--text);border-radius:4px;padding:4px 6px;font-size:12.5px}.toolbar__checkbox{color:var(--text-muted);cursor:pointer;align-items:center;gap:5px;font-size:12.5px;display:flex}.toolbar__status{color:var(--text-muted);align-items:center;gap:6px;margin-left:auto;font-size:12px;display:flex}.toolbar__dot{background:var(--text-muted);border-radius:50%;width:8px;height:8px}.toolbar__dot--live{background:#d1392b;animation:1.2s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.35}}.filterbar{background:var(--pane-bg);border-bottom:1px solid var(--border);flex-shrink:0;align-items:center;gap:8px;padding:6px 12px;display:flex;position:relative}.filterbar__icon{color:var(--accent);font-size:12px}.filterbar__input{font-family:var(--mono);border:1px solid var(--border);background:var(--input-bg);color:var(--text);border-radius:4px;flex:1;padding:6px 9px;font-size:12.5px}.filterbar__input--invalid{border-color:var(--input-invalid);outline-color:var(--input-invalid)}.filterbar__clear,.filterbar__help-btn{border:1px solid var(--border);background:var(--pane-bg);color:var(--text-muted);cursor:pointer;border-radius:4px;flex-shrink:0;width:24px;height:24px}.filterbar__count{color:var(--text-muted);white-space:nowrap;font-size:11.5px}.filterbar__error{z-index:5;background:var(--input-invalid);color:#fff;border-radius:0 0 4px 4px;padding:4px 8px;font-size:11.5px;position:absolute;top:100%;left:12px;right:12px}.filterbar__help{z-index:10;background:var(--pane-bg);border:1px solid var(--border);border-radius:6px;width:360px;margin-top:4px;padding:10px 12px;font-size:12px;position:absolute;top:100%;right:12px;box-shadow:0 6px 18px #0000002e}.filterbar__help table{border-collapse:collapse;width:100%;margin-top:6px}.filterbar__help td{vertical-align:top;padding:2px 4px}.filterbar__example{font-family:var(--mono);background:var(--header-bg);border:1px solid var(--border);cursor:pointer;color:var(--accent);border-radius:3px;padding:1px 6px;font-size:11.5px}.filterbar__help-note{color:var(--text-muted);margin:8px 0 0;font-size:11px}.panes{flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.pane{background:var(--pane-bg);min-height:40px;overflow:auto}.divider{background:var(--divider-bg);cursor:row-resize;touch-action:none;flex-shrink:0;height:5px}.divider:hover{background:var(--divider-hover)}.packet-list{flex-direction:column;height:100%;display:flex}.packet-list__header,.packet-row{grid-template-columns:56px 100px 140px 140px 64px 60px 1fr;align-items:center;gap:0;display:grid}.packet-list__header{background:var(--header-bg);border-bottom:1px solid var(--border);color:var(--text-muted);z-index:2;flex-shrink:0;font-size:11.5px;font-weight:600;position:sticky;top:0}.packet-list__header .col{padding:5px 8px}.col--sortable{font:inherit;color:inherit;cursor:pointer;text-align:left;background:0 0;border:none;justify-content:flex-start;align-items:center;gap:4px;display:flex}.col--sortable.col--no,.col--sortable.col--len{justify-content:flex-end}.col--sortable:hover,.col--sort-active{color:var(--accent)}.col__sort-arrow{width:8px;font-size:9px;display:inline-block}.packet-list__rows{font-family:var(--mono);flex:1;font-size:12px;overflow:auto}.packet-row{cursor:default;border-bottom:1px solid #0000000d;border-left:3px solid #0000}.packet-row:hover{background:var(--row-hover-bg)!important}.packet-row--selected,.packet-row--selected:hover{color:var(--row-selected-text);background:var(--row-selected-bg)!important}.col{text-overflow:ellipsis;white-space:nowrap;padding:3px 8px;overflow:hidden}.col--no,.col--len{text-align:right}.packet-list__empty{text-align:center;color:var(--text-muted);font-family:var(--sans);padding:24px}.details-pane{font-family:var(--mono);padding:4px 0;font-size:12px}.details-pane--empty{color:var(--text-muted);font-family:var(--sans);padding:16px}.tree-node__header{text-align:left;width:100%;font-family:var(--mono);color:var(--text);cursor:pointer;background:0 0;border:none;padding:3px 10px;font-size:12px;font-weight:600;display:block}.tree-node__header:hover{background:var(--row-hover-bg)}.tree-node__caret{width:14px;color:var(--text-muted);font-size:9px;display:inline-block}.tree-node__fields{margin:0;padding:0 0 0 26px;list-style:none}.tree-node__field{cursor:default;border-radius:2px;padding:2px 8px}.tree-node__field:hover{background:var(--row-hover-bg)}.tree-node__field--active{background:var(--accent);color:#fff}.tree-node__field-label{color:var(--text-muted)}.tree-node__field--active .tree-node__field-label{color:#ffffffd9}.hexdump{font-family:var(--mono);padding:8px 12px;font-size:12px;line-height:1.6}.hexdump--empty{color:var(--text-muted);font-family:var(--sans);padding:16px}.hexdump__row{white-space:pre;gap:14px;display:flex}.hexdump__offset{color:var(--text-muted);width:4ch}.hexdump__hex{gap:0;display:flex}.hexdump__byte{text-align:center;width:2.4ch}.hexdump__byte--pad{visibility:hidden}.hexdump__ascii{color:var(--text-muted);gap:0;display:flex}.hexdump__char{text-align:center;width:1ch}.hexdump__byte--active{background:var(--byte-highlight-bg);color:var(--byte-highlight-text);border-radius:2px}.status-bar{background:var(--toolbar-bg);border-top:1px solid var(--border);color:var(--text-muted);flex-shrink:0;align-items:center;gap:8px;padding:4px 12px;font-size:11.5px;display:flex}.status-bar__sep{opacity:.5}.status-bar__spacer{flex:1}.status-bar__note{font-style:italic}@media (width<=720px){.packet-list__header,.packet-row{grid-template-columns:40px 70px 1fr 1fr 50px 50px}.col--info{display:none}.filterbar__help{width:calc(100vw - 24px);right:0}}