html,body{background:#1e1e1e;height:100%;margin:0;padding:0}*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#1e1e1e;--bg2:#252526;--bg3:#2d2d2d;--bg4:#333;--border:#3c3c3c;--border2:#555;--text:#ccc;--text-dim:#888;--text-muted:#666;--accent:#0078d4;--accent-fg:#fff;--tab-h:34px;--header-h:40px;--toolbar-h:36px;--statusbar-h:22px;color:var(--text);background:var(--bg);font-family:Segoe UI,system-ui,-apple-system,sans-serif;font-size:12px}html,body,#root{height:100%;overflow:hidden}button{color:inherit;cursor:pointer;font:inherit;background:0 0;border:none}input,select{font:inherit;background:var(--bg3);color:var(--text);border:1px solid var(--border);border-radius:3px;outline:none;padding:3px 6px}input:focus,select:focus{border-color:var(--accent)}.app-root{flex-direction:column;height:100%;display:flex}.app-header{height:var(--header-h);background:var(--bg2);border-bottom:1px solid var(--border);flex-shrink:0;align-items:center;gap:10px;padding:0 16px;display:flex}.app-logo{font-size:18px}.app-title{color:#fff;font-size:14px;font-weight:600}.app-trace-url{color:var(--text-dim);text-overflow:ellipsis;white-space:nowrap;font-size:11px;overflow:hidden}.app-tabs{height:var(--tab-h);background:var(--bg2);border-bottom:1px solid var(--border);flex-shrink:0;align-items:flex-end;gap:2px;padding:0 8px;display:flex}.app-tab{height:28px;color:var(--text-dim);border-radius:4px 4px 0 0;align-items:center;gap:6px;padding:0 14px;font-size:12px;transition:color .1s,background .1s;display:flex}.app-tab:hover{color:var(--text);background:var(--bg3)}.app-tab.active{color:#fff;background:var(--bg);border:1px solid var(--border);border-bottom-color:var(--bg);font-weight:500}.app-tab-badge{background:var(--bg4);color:var(--text-dim);text-align:center;border-radius:10px;min-width:20px;padding:0 6px;font-size:10px}.app-tab.active .app-tab-badge{background:var(--border2);color:var(--text)}.app-main{flex-direction:column;flex:1;display:flex;overflow:hidden}.loading-screen,.error-screen,.welcome-screen{color:var(--text-dim);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:16px;display:flex}.loading-spinner{border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:32px;height:32px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{font-size:13px}.error-icon{font-size:36px}.error-title{color:#e57373;font-size:16px;font-weight:600}.error-message{text-align:center;max-width:480px;font-size:13px}.error-url{color:var(--text-muted);word-break:break-all;max-width:480px;font-size:11px}.error-retry-btn{background:var(--bg3);border:1px solid var(--border2);color:var(--text);cursor:pointer;border-radius:4px;margin-top:8px;padding:6px 16px;font-size:12px}.error-retry-btn:hover{background:var(--bg4)}.welcome-screen{background:var(--bg);flex-direction:column;justify-content:center;align-items:center;gap:20px;height:100%;display:flex}.welcome-drop-zone{border:2px dashed var(--border2);cursor:pointer;background:var(--bg2);border-radius:12px;flex-direction:column;align-items:center;gap:12px;padding:48px 64px;transition:border-color .15s,background .15s;display:flex}.welcome-drop-zone:hover,.welcome-screen.drop-active .welcome-drop-zone{border-color:var(--accent);background:#0078d40f}.welcome-icon{font-size:48px;line-height:1}.welcome-title{color:var(--text);font-size:20px;font-weight:600}.welcome-drop-hint{color:var(--text-dim);font-size:14px}.welcome-or{color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;font-size:11px}.welcome-browse-btn{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:4px;padding:6px 20px;font-size:12px;font-weight:500}.welcome-browse-btn:hover{background:#106ebe}.welcome-url-hint{color:var(--text-muted);font-size:11px}.welcome-url-hint code{background:var(--bg3);color:var(--text-dim);border-radius:3px;padding:1px 5px}.drop-overlay{z-index:9999;pointer-events:none;background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.drop-overlay-inner{border:3px dashed var(--accent);background:#001428d9;border-radius:16px;flex-direction:column;align-items:center;gap:12px;padding:40px 64px;display:flex}.drop-overlay-icon{font-size:52px;line-height:1}.drop-overlay-label{color:#fff;font-size:18px;font-weight:600}.app-load-btn{background:var(--bg3);border:1px solid var(--border2);color:var(--text-dim);cursor:pointer;border-radius:4px;flex-shrink:0;margin-left:auto;padding:4px 12px;font-size:11px}.app-load-btn:hover{color:var(--text);background:var(--bg4)}.panel-empty{color:var(--text-dim);text-align:center;padding:40px}.timeline-root{flex-direction:column;height:100%;display:flex;overflow:hidden}.timeline-main{flex:1;gap:0;min-height:0;display:flex;overflow:hidden}.timeline-section-label{color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border);padding:8px 12px 4px;font-size:11px;font-weight:600}.timeline-video-pane{border-right:1px solid var(--border);background:#000;flex-direction:column;min-width:320px;max-width:40%;display:flex}.timeline-video{object-fit:contain;background:#000;flex:1;width:100%;min-height:0}.timeline-preview-pane{background:var(--bg2);flex-direction:column;flex:1;min-width:0;display:flex}.timeline-preview-img{object-fit:contain;flex:1;width:100%;min-height:0;max-height:calc(100vh - 200px)}.timeline-filmstrip-wrapper{border-top:1px solid var(--border);background:var(--bg2);flex-shrink:0}.timeline-filmstrip{align-items:center;gap:8px;min-height:80px;padding:8px 12px;display:flex;overflow-x:auto}.timeline-filmstrip::-webkit-scrollbar{height:6px}.timeline-filmstrip::-webkit-scrollbar-track{background:var(--bg3)}.timeline-filmstrip::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}.timeline-thumb{border:2px solid var(--border);cursor:pointer;background:#000;border-radius:4px;flex-direction:column;flex-shrink:0;align-items:center;gap:3px;transition:border-color .1s;display:flex;overflow:hidden}.timeline-thumb:hover{border-color:var(--border2)}.timeline-thumb.selected{border-color:var(--accent)}.timeline-thumb img{object-fit:contain;width:auto;height:80px;display:block}.timeline-thumb-label{color:var(--text-dim);background:var(--bg3);text-align:center;width:100%;padding:2px 4px;font-size:10px}.timeline-empty{color:var(--text-dim);padding:20px}.net-root{flex-direction:column;height:100%;display:flex;overflow:hidden}.net-toolbar{height:var(--toolbar-h);background:var(--bg2);border-bottom:1px solid var(--border);flex-wrap:wrap;flex-shrink:0;align-items:center;gap:8px;padding:0 8px;display:flex}.net-search-wrap{background:var(--bg3);border:1px solid var(--border);border-radius:3px;align-items:center;gap:4px;min-width:200px;padding:0 6px;display:flex}.net-search-wrap:focus-within{border-color:var(--accent)}.net-search-icon{color:var(--text-dim);font-size:11px}.net-search{background:0 0;border:none;flex:1;min-width:0;padding:4px 0}.net-search-clear{color:var(--text-dim);padding:2px;font-size:10px}.net-search-clear:hover{color:var(--text)}.net-type-filters{gap:2px;display:flex}.net-type-btn{color:var(--text-dim);border:1px solid #0000;border-radius:3px;padding:3px 8px;font-size:11px}.net-type-btn:hover{color:var(--text);background:var(--bg3)}.net-type-btn.active{color:var(--accent);border-color:var(--accent);background:#0078d414}.net-method-select{height:24px;padding:3px 6px;font-size:11px}.net-content{flex:1;min-height:0;display:flex;overflow:hidden}.net-table-wrap{flex:1;min-width:0;overflow:auto}.net-root.has-detail .net-table-wrap{flex:0 0 55%}.net-table{border-collapse:collapse;table-layout:fixed;width:100%}.net-table thead{z-index:1;background:var(--bg2);position:sticky;top:0}.net-th{color:var(--text-dim);text-align:left;border-bottom:1px solid var(--border);border-right:1px solid var(--border);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;padding:5px 8px;font-size:11px;font-weight:600;overflow:hidden}.net-th:hover{color:var(--text);background:var(--bg3)}.net-th:last-child{border-right:none}.net-th-status{width:60px}.net-th-method{width:70px}.net-th-name{width:auto}.net-th-type,.net-th-size,.net-th-time{width:70px}.net-th-waterfall{width:160px}.sort-icon{opacity:.4;margin-left:4px;font-size:10px}.sort-icon.active{opacity:1;color:var(--accent)}.net-tr{cursor:pointer;border-bottom:1px solid var(--border)}.net-tr:hover td{background:#ffffff0a}.net-tr.selected td{background:#0078d426}.net-td{text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;padding:4px 8px;font-size:12px;overflow:hidden}.net-td-status{text-align:center;font-size:11px;font-weight:600}.status-ok{color:#81c784}.status-redirect{color:#64b5f6}.status-client-err{color:#ffb74d}.status-server-err{color:#e57373}.status-pending{color:var(--text-dim)}.net-td-name{padding-right:4px}.net-name{color:var(--text);text-overflow:ellipsis;display:block;overflow:hidden}.net-host{color:var(--text-muted);text-overflow:ellipsis;font-size:10px;display:block;overflow:hidden}.method-badge{background:var(--bg4);border-radius:3px;padding:1px 5px;font-size:10px;font-weight:700}.method-get{color:#81c784}.method-post{color:#64b5f6}.method-put{color:#ffb74d}.method-patch{color:#ffcc02}.method-delete{color:#e57373}.method-options,.method-head{color:var(--text-dim)}.net-empty{text-align:center;color:var(--text-dim);padding:32px}.wf-bar-container{width:100%;height:12px;position:relative}.wf-bar{border-radius:2px;min-width:2px;height:10px;display:flex;position:absolute;top:1px;overflow:hidden}.net-statusbar{height:var(--statusbar-h);background:var(--bg2);border-top:1px solid var(--border);color:var(--text-dim);flex-shrink:0;align-items:center;gap:16px;padding:0 12px;font-size:11px;display:flex}.net-detail-panel{border-left:1px solid var(--border);background:var(--bg2);flex-direction:column;flex-shrink:0;width:45%;display:flex;overflow:hidden}.net-detail-header{border-bottom:1px solid var(--border);background:var(--bg3);flex-shrink:0;align-items:flex-start;gap:8px;padding:8px 10px;display:flex}.net-detail-url{color:var(--text);word-break:break-all;flex:1;max-height:40px;font-size:11px;line-height:1.4;overflow:hidden}.net-detail-close{color:var(--text-dim);flex-shrink:0;padding:0 4px;font-size:14px;line-height:1}.net-detail-close:hover{color:var(--text)}.net-detail-tabs{border-bottom:1px solid var(--border);flex-shrink:0;display:flex}.net-detail-tab{color:var(--text-dim);border-bottom:2px solid #0000;padding:6px 12px;font-size:11px}.net-detail-tab:hover{color:var(--text)}.net-detail-tab.active{color:var(--accent);border-bottom-color:var(--accent)}.net-detail-body{flex:1;padding:8px;overflow:auto}.net-detail-section-title{color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border);margin-bottom:4px;padding:8px 0 4px;font-size:11px;font-weight:600}.net-detail-section-title:first-child{padding-top:0}.net-detail-headers-table{border-collapse:collapse;width:100%}.net-detail-headers-table td{vertical-align:top;border-bottom:1px solid #ffffff0a;padding:3px 4px;font-size:11px}.net-detail-header-name{width:40%;color:var(--text-dim);padding-right:8px;font-weight:500}.net-detail-header-value{color:var(--text);word-break:break-word}.net-detail-json{color:#81c784;white-space:pre-wrap;word-break:break-all;font-family:Consolas,Fira Code,monospace;font-size:11px;line-height:1.5}.net-detail-raw{color:var(--text);white-space:pre-wrap;word-break:break-all;font-family:Consolas,Fira Code,monospace;font-size:11px;line-height:1.5}.net-detail-empty{color:var(--text-dim);text-align:center;padding:16px}.net-detail-mime{color:var(--text-muted);margin-bottom:4px;font-size:10px}.net-detail-img-preview{max-width:100%}.net-timing-panel{padding:4px 0}.net-timing-row{align-items:center;gap:8px;padding:3px 0;display:flex}.net-timing-label{width:160px;color:var(--text-dim);flex-shrink:0;font-size:11px}.net-timing-bar-wrap{background:var(--bg4);border-radius:2px;flex:1;height:8px;overflow:hidden}.net-timing-bar{border-radius:2px;min-width:2px;height:100%}.net-timing-value{text-align:right;width:60px;color:var(--text);font-size:11px}.net-timing-total{border-top:1px solid var(--border);color:var(--text-dim);text-align:right;margin-top:12px;padding-top:8px;font-size:11px}.logs-root{flex-direction:column;height:100%;display:flex;overflow:hidden}.logs-toolbar{height:var(--toolbar-h);background:var(--bg2);border-bottom:1px solid var(--border);flex-wrap:wrap;flex-shrink:0;align-items:center;gap:8px;padding:0 8px;display:flex}.logs-level-filters{gap:2px;display:flex}.log-level-btn{color:var(--text-muted);border:1px solid var(--border);text-transform:uppercase;border-radius:3px;align-items:center;gap:4px;padding:2px 8px;font-size:10px;font-weight:600;display:flex}.log-level-btn.active{color:var(--level-color,var(--text));border-color:var(--level-color,var(--border));background:rgba(from var(--level-color,#666) r g b / .1)}.log-level-count{background:var(--bg4);color:var(--text-dim);border-radius:8px;padding:0 4px;font-size:9px}.logs-header-row{background:var(--bg2);border-bottom:1px solid var(--border);color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;flex-shrink:0;padding:4px 8px;font-size:10px;font-weight:600;display:flex}.log-ts-hdr{flex-shrink:0;width:165px}.log-lv-hdr{flex-shrink:0;width:16px}.log-tag-hdr{flex-shrink:0;width:140px;margin-left:6px}.log-msg-hdr{flex:1;margin-left:6px}.logs-virtual-container{flex:1;font-family:Consolas,Fira Code,monospace;font-size:11px;overflow:hidden auto}.logs-virtual-container::-webkit-scrollbar{width:8px}.logs-virtual-container::-webkit-scrollbar-track{background:var(--bg3)}.logs-virtual-container::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}.log-row{line-height:var(--virtual-item-height,24px);border-bottom:1px solid #ffffff08;align-items:center;padding:0 8px;display:flex;overflow:hidden}.log-row:hover{background:#ffffff0a}.log-ts{width:165px;color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;flex-shrink:0;overflow:hidden}.log-level{text-align:center;flex-shrink:0;width:16px;font-size:10px;font-weight:700}.log-level-verbose{color:#9e9e9e}.log-level-debug{color:#64b5f6}.log-level-info{color:#81c784}.log-level-warn{color:#ffb74d}.log-level-error{color:#e57373}.log-level-fatal{color:#f44336}.log-tag{color:#ce93d8;white-space:nowrap;text-overflow:ellipsis;flex-shrink:0;width:140px;margin-left:6px;overflow:hidden}.log-msg{white-space:nowrap;text-overflow:ellipsis;color:var(--text);flex:1;margin-left:6px;overflow:hidden}.logs-empty{text-align:center;color:var(--text-dim);padding:32px}.logs-statusbar{height:var(--statusbar-h);background:var(--bg2);border-top:1px solid var(--border);color:var(--text-dim);flex-shrink:0;align-items:center;padding:0 12px;font-size:11px;display:flex}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#777}