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