:root{--pcap-dns-bg:#2d1a4a;--pcap-dns-text:#c084fc;--pcap-tls-bg:#0d2d18;--pcap-tls-text:#4ade80;--pcap-http-bg:#1a2d4a;--pcap-http-text:#60a5fa;--pcap-tcp-bg:#1e1e1e;--pcap-tcp-text:#9a9a9a;--pcap-udp-bg:#2d1e00;--pcap-udp-text:#fb923c;--pcap-icmp-bg:#2d2200;--pcap-icmp-text:#fbbf24;--pcap-arp-bg:#0d2020;--pcap-arp-text:#2dd4bf;--pcap-other-bg:#1a1a1a;--pcap-other-text:#6a6a6a;--pcap-layer-eth:#4a5568;--pcap-layer-ip4:#3b82f6;--pcap-layer-ip6:#6366f1;--pcap-layer-arp:#2dd4bf;--pcap-layer-tcp:#9a9a9a;--pcap-layer-udp:#fb923c;--pcap-layer-icmp:#fbbf24;--pcap-layer-dns:#c084fc;--pcap-layer-http:#60a5fa;--pcap-layer-tls:#4ade80;--pcap-layer-dhcp:#f472b6}[data-theme=light]{--pcap-dns-bg:#ede9fe;--pcap-dns-text:#7c3aed;--pcap-tls-bg:#dcfce7;--pcap-tls-text:#15803d;--pcap-http-bg:#dbeafe;--pcap-http-text:#1d4ed8;--pcap-tcp-bg:#f3f4f6;--pcap-tcp-text:#374151;--pcap-udp-bg:#ffedd5;--pcap-udp-text:#c2410c;--pcap-icmp-bg:#fef9c3;--pcap-icmp-text:#a16207;--pcap-arp-bg:#ccfbf1;--pcap-arp-text:#0f766e;--pcap-other-bg:#f3f4f6;--pcap-other-text:#6b7280;--pcap-layer-eth:#64748b;--pcap-layer-ip4:#2563eb;--pcap-layer-ip6:#4f46e5;--pcap-layer-arp:#0d9488;--pcap-layer-tcp:#6b7280;--pcap-layer-udp:#ea580c;--pcap-layer-icmp:#d97706;--pcap-layer-dns:#9333ea;--pcap-layer-http:#2563eb;--pcap-layer-tls:#16a34a;--pcap-layer-dhcp:#db2777}html,body{height:100%;overflow:hidden}#app{height:100%;min-height:unset;overflow:hidden}.tool-main{flex-direction:column;flex:1;width:100%;max-width:100%;padding:0;display:flex;overflow:hidden}.tool-header{border-bottom:1px solid var(--color-border);background-color:var(--color-surface-raised);flex-wrap:wrap;flex-shrink:0;justify-content:space-between;align-items:flex-start;gap:1.5rem;padding:1.5rem 2rem;display:flex}.tool-header__title{flex-direction:column;gap:.25rem;display:flex}.tool-title{color:var(--color-text-title);margin:0;font-size:1.3rem;font-weight:700}.tool-subtitle{color:var(--color-text-muted);margin:0;font-size:.85rem}.pcap-workspace{flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.pcap-drop{border:2px dashed var(--color-border);cursor:pointer;border-radius:10px;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:.75rem;margin:2rem;padding:3rem 2rem;transition:border-color .15s,background-color .15s;display:flex;position:relative}.pcap-drop:hover,.pcap-drop--over{border-color:var(--color-accent);background-color:#7eb8f70a}.pcap-drop__input{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.pcap-drop__icon{color:var(--color-text-muted);pointer-events:none}.pcap-drop__text{color:var(--color-text-secondary);pointer-events:none;text-align:center;margin:0;font-size:.95rem}.pcap-drop__text strong{color:var(--color-text-primary)}.pcap-drop__link{color:var(--color-accent);text-decoration:underline}.pcap-drop__hint{color:var(--color-text-muted);pointer-events:none;text-align:center;margin:0;font-size:.8rem}.pcap-drop__error{color:var(--color-danger);pointer-events:none;margin:0;font-size:.83rem}.pcap-viewer{flex-direction:row;flex:1;min-height:0;display:flex;overflow:hidden}.pcap-stats-bar{background-color:var(--color-surface-raised);border-bottom:1px solid var(--color-border);flex-wrap:wrap;flex-shrink:0;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.78rem;display:flex}.pcap-stat-pill{border:1px solid var(--color-border);background-color:var(--color-surface);color:var(--color-text-secondary);border-radius:999px;align-items:center;gap:.3rem;padding:.2rem .55rem;display:flex}.pcap-stat-pill__label{color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.03em;font-size:.72rem}.pcap-stat-pill__value{color:var(--color-text-primary);font-weight:600}.pcap-filename-pill{border:1px solid var(--color-border);background-color:var(--color-surface);color:var(--color-text-primary);text-overflow:ellipsis;white-space:nowrap;border-radius:999px;align-items:center;gap:.3rem;max-width:240px;padding:.2rem .55rem;font-weight:600;display:flex;overflow:hidden}.pcap-format-badge{letter-spacing:.04em;text-transform:uppercase;background-color:var(--color-accent-bg);color:var(--color-accent);border-radius:4px;align-items:center;padding:.15rem .45rem;font-size:.72rem;font-weight:700;display:inline-flex}.pcap-stats-bar__warn{color:var(--color-warning);align-items:center;gap:.3rem;margin-left:auto;font-size:.78rem;display:flex}.pcap-left{border-right:1px solid var(--color-border);flex-direction:column;flex-shrink:0;width:360px;min-height:0;display:flex;overflow:hidden}.pcap-toolbar{border-bottom:1px solid var(--color-border);background-color:var(--color-surface-raised);flex-direction:column;flex-shrink:0;gap:.4rem;padding:.6rem .75rem;display:flex}.pcap-search-wrap{align-items:center;display:flex;position:relative}.pcap-search-icon{color:var(--color-text-muted);pointer-events:none;align-items:center;display:flex;position:absolute;left:.55rem}.pcap-search{background:var(--color-surface-deep);border:1px solid var(--color-border);width:100%;color:var(--color-text-primary);border-radius:6px;outline:none;padding:.35rem .6rem .35rem 1.85rem;font-size:.8rem;transition:border-color .15s}.pcap-search:focus{border-color:var(--color-accent)}.pcap-search::placeholder{color:var(--color-text-muted)}.pcap-proto-filters{flex-wrap:wrap;gap:.3rem;display:flex}.pcap-toolbar-row{border-bottom:1px solid var(--color-border);background-color:var(--color-surface-raised);flex-shrink:0;justify-content:flex-end;align-items:center;padding:.3rem .75rem;display:flex}.pcap-ts-toggle{border:1px solid var(--color-border);border-radius:5px;flex-shrink:0;align-items:center;display:flex;overflow:hidden}.pcap-ts-btn{color:var(--color-text-muted);cursor:pointer;white-space:nowrap;background:0 0;border:none;padding:.2rem .65rem;font-size:.72rem;font-weight:500;line-height:1.6;transition:background .12s,color .12s}.pcap-ts-btn+.pcap-ts-btn{border-left:1px solid var(--color-border)}.pcap-ts-btn:hover{background:color-mix(in srgb, var(--color-border) 50%, transparent);color:var(--color-text-secondary)}.pcap-ts-btn:focus-visible{outline:2px solid var(--color-accent);outline-offset:-2px}.pcap-ts-btn--active{background:var(--color-accent-bg);color:var(--color-accent);font-weight:600}.pcap-proto-btn{border:1px solid var(--color-border);color:var(--color-text-secondary);cursor:pointer;white-space:nowrap;background:0 0;border-radius:4px;padding:.18rem .5rem;font-size:.72rem;font-weight:600;transition:background-color .12s,color .12s,border-color .12s}.pcap-proto-btn:hover{border-color:var(--color-accent);color:var(--color-text-primary)}.pcap-proto-btn:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.pcap-proto-btn--active{background-color:var(--color-accent-bg);border-color:var(--color-accent);color:var(--color-accent)}.pcap-list-meta{color:var(--color-text-muted);border-bottom:1px solid var(--color-border);background-color:var(--color-surface-raised);flex-shrink:0;padding:.3rem .75rem;font-size:.75rem}.pcap-list-wrap{flex:1;min-height:0;position:relative;overflow-y:auto}.pcap-list-spacer{position:relative}.pcap-list-rows{will-change:transform;position:absolute;top:0;left:0;right:0}.pcap-row{border-bottom:1px solid var(--color-border);cursor:pointer;-webkit-user-select:none;user-select:none;grid-template-columns:46px 84px 130px 130px 64px 48px 1fr;align-items:center;gap:0;height:28px;padding:0 .25rem;font-size:.74rem;transition:background-color 80ms;display:grid;overflow:hidden}.pcap-row:hover{background-color:#7eb8f70d}.pcap-row:focus-visible{outline:2px solid var(--color-accent);outline-offset:-2px}.pcap-row--selected{background-color:var(--color-accent-bg)!important}.pcap-row--focused{outline:2px solid var(--color-accent);outline-offset:-2px}.pcap-row--selected .pcap-row__no,.pcap-row--selected .pcap-row__time,.pcap-row--selected .pcap-row__src,.pcap-row--selected .pcap-row__dst,.pcap-row--selected .pcap-row__len,.pcap-row--selected .pcap-row__info{color:var(--color-text-primary)}.pcap-row__no{text-align:right;color:var(--color-text-muted);font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap;padding-right:.4rem;font-family:Menlo,Monaco,Consolas,Courier New,monospace;font-size:.71rem;overflow:hidden}.pcap-row__time{color:var(--color-text-muted);text-overflow:ellipsis;white-space:nowrap;padding:0 .25rem;font-family:Menlo,Monaco,Consolas,Courier New,monospace;font-size:.71rem;overflow:hidden}.pcap-row__src,.pcap-row__dst{color:var(--color-text-secondary);text-overflow:ellipsis;white-space:nowrap;padding:0 .25rem;font-size:.73rem;overflow:hidden}.pcap-row__proto{align-items:center;padding:0 .2rem;display:flex;overflow:hidden}.pcap-row__len{text-align:right;color:var(--color-text-muted);text-overflow:ellipsis;white-space:nowrap;padding-right:.35rem;font-family:Menlo,Monaco,Consolas,Courier New,monospace;font-size:.71rem;overflow:hidden}.pcap-row__info{color:var(--color-text-secondary);text-overflow:ellipsis;white-space:nowrap;padding:0 .3rem;font-size:.73rem;overflow:hidden}.pcap-badge{letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;text-overflow:ellipsis;border-radius:3px;max-width:100%;padding:.08rem .32rem;font-size:.66rem;font-weight:700;display:inline-block;overflow:hidden}.pcap-badge--dns{background-color:var(--pcap-dns-bg);color:var(--pcap-dns-text)}.pcap-badge--tls{background-color:var(--pcap-tls-bg);color:var(--pcap-tls-text)}.pcap-badge--http{background-color:var(--pcap-http-bg);color:var(--pcap-http-text)}.pcap-badge--tcp{background-color:var(--pcap-tcp-bg);color:var(--pcap-tcp-text)}.pcap-badge--udp{background-color:var(--pcap-udp-bg);color:var(--pcap-udp-text)}.pcap-badge--icmp{background-color:var(--pcap-icmp-bg);color:var(--pcap-icmp-text)}.pcap-badge--arp{background-color:var(--pcap-arp-bg);color:var(--pcap-arp-text)}.pcap-badge--other{background-color:var(--pcap-other-bg);color:var(--pcap-other-text)}[data-theme=light] .pcap-format-badge{background-color:var(--color-accent-bg);color:var(--color-accent)}.pcap-list-empty{color:var(--color-text-muted);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:.5rem;padding:3rem 1.5rem;font-size:.82rem;display:flex}.pcap-right{flex-direction:column;flex:1;min-width:0;display:flex;overflow:hidden}.pcap-detail,#pcap-detail{flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.pcap-empty-state{color:var(--color-text-muted);text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:.75rem;padding:3rem;display:flex}.pcap-empty-state__icon{opacity:.4}.pcap-empty-state__title{color:var(--color-text-secondary);margin:0;font-size:1rem;font-weight:600}.pcap-empty-state__hint{color:var(--color-text-muted);margin:0;font-size:.82rem}.pcap-detail-tabs{border-bottom:1px solid var(--color-border);background-color:var(--color-surface-raised);flex-shrink:0;gap:0;display:flex;overflow-x:auto}.pcap-detail-tab{color:var(--color-text-secondary);cursor:pointer;white-space:nowrap;background:0 0;border:none;border-bottom:2px solid #0000;padding:.55rem 1.1rem;font-size:.8rem;font-weight:500;transition:color .15s,border-color .15s}.pcap-detail-tab:hover{color:var(--color-text-primary)}.pcap-detail-tab:focus-visible{outline:2px solid var(--color-accent);outline-offset:-2px}.pcap-detail-tab--active{color:var(--color-accent);border-bottom-color:var(--color-accent)}.pcap-detail-body{flex:1;min-height:0;padding:1rem 1.25rem;overflow-y:auto}.pcap-kv-table{border-collapse:collapse;width:100%;font-size:.82rem}.pcap-kv-table th{text-align:left;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.04em;vertical-align:top;white-space:nowrap;width:130px;padding:.35rem .75rem .35rem 0;font-size:.72rem;font-weight:600}.pcap-kv-table td{color:var(--color-text-primary);vertical-align:top;word-break:break-all;padding:.35rem .5rem .35rem 0}.pcap-kv-table tr:not(:last-child) th,.pcap-kv-table tr:not(:last-child) td{border-bottom:1px solid var(--color-border)}.pcap-layer-card{border-left:3px solid var(--color-border);background-color:var(--color-surface);border-radius:0 6px 6px 0;margin-bottom:.5rem;overflow:hidden}.pcap-layer-card--eth{border-left-color:var(--pcap-layer-eth)}.pcap-layer-card--ip4{border-left-color:var(--pcap-layer-ip4)}.pcap-layer-card--ip6{border-left-color:var(--pcap-layer-ip6)}.pcap-layer-card--arp{border-left-color:var(--pcap-layer-arp)}.pcap-layer-card--tcp{border-left-color:var(--pcap-layer-tcp)}.pcap-layer-card--udp{border-left-color:var(--pcap-layer-udp)}.pcap-layer-card--icmp{border-left-color:var(--pcap-layer-icmp)}.pcap-layer-card--dns{border-left-color:var(--pcap-layer-dns)}.pcap-layer-card--http{border-left-color:var(--pcap-layer-http)}.pcap-layer-card--tls{border-left-color:var(--pcap-layer-tls)}.pcap-layer-card--dhcp{border-left-color:var(--pcap-layer-dhcp)}.pcap-layer-header{cursor:pointer;-webkit-user-select:none;user-select:none;background-color:var(--color-surface-raised);border-bottom:1px solid var(--color-border);color:var(--color-text-primary);justify-content:space-between;align-items:center;padding:.4rem .75rem;font-size:.8rem;font-weight:600;display:flex}.pcap-layer-header:hover{background-color:#7eb8f70a}.pcap-layer-toggle{color:var(--color-text-muted);font-size:.75rem;transition:transform .15s}.pcap-layer-card--collapsed .pcap-layer-toggle{transform:rotate(-90deg)}.pcap-layer-body{padding:.5rem .75rem;font-size:.79rem}.pcap-layer-card--collapsed .pcap-layer-body{display:none}.pcap-field-grid{grid-template-columns:160px 1fr;gap:.15rem .5rem;display:grid}.pcap-field-key{color:var(--color-text-muted);white-space:nowrap;text-overflow:ellipsis;padding:.1rem 0;font-size:.75rem;font-weight:500;overflow:hidden}.pcap-field-val{color:var(--color-text-primary);word-break:break-all;padding:.1rem 0;font-family:Menlo,Monaco,Consolas,Courier New,monospace;font-size:.75rem}.pcap-hex-wrap{color:var(--color-text-primary);background-color:var(--color-surface-deep);border-radius:6px;padding:.75rem 1rem;font-family:Menlo,Monaco,Consolas,Courier New,monospace;font-size:.75rem;line-height:1.6;overflow-x:auto}.pcap-hex-actions{border-bottom:1px solid var(--color-border);background:var(--color-surface-raised);flex-shrink:0;gap:.5rem;padding:.45rem .75rem;display:flex}.pcap-hex-btn{border:1px solid var(--color-border);color:var(--color-text-secondary);cursor:pointer;background:0 0;border-radius:4px;align-items:center;gap:.3rem;padding:.2rem .6rem;font-size:.75rem;line-height:1.4;transition:all .1s;display:inline-flex}.pcap-hex-btn:hover{border-color:var(--color-accent);color:var(--color-text-primary)}.pcap-hex-row{white-space:nowrap;align-items:baseline;gap:1rem;display:flex}.pcap-hex-offset{color:var(--color-text-muted);-webkit-user-select:none;user-select:none;min-width:48px}.pcap-hex-bytes{color:var(--color-text-primary);letter-spacing:.03em;flex:1}.pcap-hex-ascii{color:var(--color-text-secondary);min-width:128px}.pcap-ascii-pre{color:var(--color-text-primary);background-color:var(--color-surface-deep);white-space:pre-wrap;word-break:break-all;border-radius:6px;margin:0;padding:.75rem 1rem;font-family:Menlo,Monaco,Consolas,Courier New,monospace;font-size:.75rem;line-height:1.7;overflow-x:auto}.pcap-col-header{background-color:var(--color-surface-raised);border-bottom:1px solid var(--color-border);height:24px;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.04em;-webkit-user-select:none;user-select:none;flex-shrink:0;grid-template-columns:46px 84px 130px 130px 64px 48px 1fr;align-items:center;padding:0 .25rem;font-size:.68rem;font-weight:600;display:grid}.pcap-col-header span{text-overflow:ellipsis;white-space:nowrap;padding:0 .25rem;overflow:hidden}.pcap-col-header span:first-child{text-align:right;padding-right:.4rem}.pcap-section-title{text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);border-bottom:1px solid var(--color-border);margin:0 0 .6rem;padding-bottom:.3rem;font-size:.72rem;font-weight:700}.pcap-section-title:not(:first-child){margin-top:1.25rem}.pcap-dns-table{border-collapse:collapse;width:100%;margin-top:.25rem;font-size:.77rem}.pcap-dns-table th{text-align:left;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--color-border);padding:.2rem .4rem .2rem 0;font-size:.68rem;font-weight:600}.pcap-dns-table td{color:var(--color-text-primary);border-bottom:1px solid var(--color-border);word-break:break-all;padding:.2rem .4rem .2rem 0;font-family:Menlo,Monaco,Consolas,Courier New,monospace;font-size:.75rem}.pcap-dns-table tr:last-child td{border-bottom:none}.pcap-http-headers{border-collapse:collapse;width:100%;margin-top:.25rem;font-size:.77rem}.pcap-http-headers th{text-align:left;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--color-border);padding:.2rem .4rem .2rem 0;font-size:.68rem;font-weight:600}.pcap-http-headers td{color:var(--color-text-primary);border-bottom:1px solid var(--color-border);word-break:break-all;vertical-align:top;padding:.18rem .4rem .18rem 0;font-family:Menlo,Monaco,Consolas,Courier New,monospace;font-size:.73rem}.pcap-http-headers tr:last-child td{border-bottom:none}.pcap-http-headers td:first-child{color:var(--color-accent);white-space:nowrap;vertical-align:top;padding-right:.75rem}.pcap-cipher-list{flex-wrap:wrap;gap:.3rem;margin-top:.25rem;display:flex}.pcap-cipher-chip{background-color:var(--color-surface-deep);border:1px solid var(--color-border);color:var(--color-text-secondary);border-radius:3px;padding:.1rem .4rem;font-family:Menlo,Monaco,Consolas,Courier New,monospace;font-size:.71rem}.pcap-list-wrap::-webkit-scrollbar{width:6px}.pcap-detail-body::-webkit-scrollbar{width:6px}.pcap-list-wrap::-webkit-scrollbar-track{background:0 0}.pcap-detail-body::-webkit-scrollbar-track{background:0 0}.pcap-list-wrap::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}.pcap-detail-body::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}.pcap-list-wrap::-webkit-scrollbar-thumb:hover{background:#3a3a3a}.pcap-detail-body::-webkit-scrollbar-thumb:hover{background:#3a3a3a}.pcap-http-body-preview{background:var(--color-surface-deep);white-space:pre-wrap;word-break:break-all;border-radius:4px;padding:.5rem;font-size:.75rem;overflow-x:auto}.pcap-header-filename{color:var(--color-text-secondary);text-overflow:ellipsis;white-space:nowrap;max-width:260px;font-size:.78rem;overflow:hidden}@media (width<=960px){.pcap-left{width:280px}.pcap-row,.pcap-col-header{grid-template-columns:42px 76px 110px 110px 56px 44px 1fr}}@media (width<=700px){.pcap-viewer{flex-direction:column}.pcap-left{border-right:none;border-bottom:1px solid var(--color-border);width:100%;max-height:40vh}.tool-header{padding:1rem 1.25rem}}