:root{--bg-0: #05080f;--bg-1: #080c17;--bg-2: #0c1322;--bg-3: #121a2e;--bg-input: #03060d;--border: #16203a;--border-mid: #1f2c4d;--border-hot: #2f4376;--border-active: #4cc8ff;--fg-0: #e2ecff;--fg-1: #93a4c5;--fg-2: #5b6a8b;--fg-3: #3a455e;--fg-faint: #1f2839;--accent: #4cc8ff;--accent-hot: #7ff0ff;--accent-deep: #1d5dff;--accent-glow: rgba(76, 200, 255, .4);--good: #3fdc8e;--warn: #ffce4c;--bad: #ff4060;--bad-glow: rgba(255, 64, 96, .45);--info: #5b8def;--crypto: #c47bff;--tracker: #ffce4c;--peer: #3fdc8e;--wire: #4cc8ff;--net: #5b8def;--system: #93a4c5;--mono: "JetBrains Mono", "IBM Plex Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;--sans: -apple-system, "Inter", "Segoe UI", system-ui, sans-serif;--rad-sm: 2px;--rad: 3px;--rad-lg: 4px;--header-h: 36px;--footer-h: 22px;--drawer-w: 360px;--panel-head-h: 20px;--gap: 6px;--shadow-up: 0 -1px 0 rgba(76, 200, 255, .04) inset}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg-0);color:var(--fg-0);font-family:var(--mono);font-size:12px;line-height:1.45;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:"liga" 0,"calt" 0}html,body{height:100%;overflow:hidden}body{background:radial-gradient(ellipse 70% 50% at 50% -10%,rgba(29,93,255,.16),transparent 70%),radial-gradient(ellipse 50% 40% at 95% 100%,rgba(76,200,255,.06),transparent 70%),var(--bg-0);background-attachment:fixed}body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(76,200,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(76,200,255,.025) 1px,transparent 1px);background-size:32px 32px;mask-image:radial-gradient(ellipse 90% 70% at 50% 40%,black 40%,transparent 90%);z-index:0}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}a{color:var(--accent);text-decoration:none;border-bottom:1px dashed transparent;transition:color .12s ease,border-color .12s ease}a:hover,a:focus-visible{color:var(--accent-hot);border-bottom-color:currentColor}code,kbd{font-family:var(--mono);background:var(--bg-input);padding:.05em .36em;border-radius:var(--rad-sm);border:1px solid var(--border);font-size:.92em;color:var(--accent-hot)}::selection{background:#4cc8ff4d;color:var(--fg-0)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-mid);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--border-hot)}.app-shell{position:relative;z-index:2;display:grid;grid-template-rows:var(--header-h) 1fr var(--footer-h);height:100vh}.topbar{display:flex;align-items:center;justify-content:space-between;padding:0 12px 0 0;border-bottom:1px solid var(--border);background:linear-gradient(180deg,#080c17eb,#05080fc7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.topbar-left,.topbar-right{display:flex;align-items:center;gap:0;height:var(--header-h)}.brand{display:flex;align-items:center;gap:8px;border:none;color:var(--fg-0);padding:0 14px;border-right:1px solid var(--border);height:var(--header-h)}.brand:hover{border:none;border-right:1px solid var(--border);color:var(--accent-hot);background:#4cc8ff0a}.brand-mark{width:18px;height:18px;filter:drop-shadow(0 0 6px var(--accent-glow))}.brand-name{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:-.01em}.brand-name-accent{color:var(--accent)}.topbar-meta{display:flex;align-items:stretch;height:var(--header-h);font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--fg-2)}.topbar-meta>span{display:flex;align-items:center;gap:5px;padding:0 12px;border-right:1px solid var(--border)}.topbar-meta .meta-key{color:var(--fg-3)}.topbar-meta .meta-val{color:var(--fg-1)}.topbar-nav{display:flex;align-items:stretch;height:var(--header-h);gap:0}.topbar-nav .nav-link,.topbar-nav a{display:inline-flex;align-items:center;background:none;border:none;border-left:1px solid var(--border);padding:0 14px;margin:0;font:inherit;font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--fg-2);cursor:pointer;transition:color .12s,background .12s;height:100%}.topbar-nav .nav-link:hover,.topbar-nav .nav-link:focus-visible,.topbar-nav a:hover{color:var(--accent-hot);background:#4cc8ff0d;box-shadow:none;border-bottom:none}.main-grid{display:grid;grid-template-columns:1fr var(--drawer-w);min-height:0}#app{position:relative;overflow:hidden;display:flex;flex-direction:column;padding:8px;gap:var(--gap);background:linear-gradient(180deg,#0c132200,#05080f00);border-right:1px solid var(--border)}#app.scrollable{overflow-y:auto}.workspace{display:grid;grid-template-columns:minmax(380px,1fr) minmax(380px,1.05fr);gap:var(--gap);flex:1;min-height:0}.workspace .col{display:flex;flex-direction:column;gap:var(--gap);min-height:0;min-width:0}.workspace .col.right{min-height:0}#event-drawer{display:flex;flex-direction:column;min-height:0;background:linear-gradient(180deg,#080c17b3,#05080f8c)}.panel{position:relative;border:1px solid var(--border);border-radius:var(--rad);background:linear-gradient(180deg,#0c13228c,#05080f73);display:flex;flex-direction:column;min-height:0}.panel.fill{flex:1;min-height:0}.panel-head{display:flex;align-items:center;justify-content:space-between;height:var(--panel-head-h);padding:0 8px;border-bottom:1px solid var(--border);background:#080c178c;flex-shrink:0}.panel-head .title{font-family:var(--mono);font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--accent)}.panel-head .title:before{content:"▸ ";color:var(--fg-3)}.panel-head .meta{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--fg-2)}.panel-head .meta .k{color:var(--fg-3)}.panel-head .meta .v{color:var(--fg-1)}.panel-body{padding:8px 10px;flex:1;min-height:0;display:flex;flex-direction:column}.panel-body.tight{padding:6px 8px}.panel-body.flush{padding:0}.statusbar{display:flex;align-items:stretch;justify-content:space-between;border-top:1px solid var(--border);background:linear-gradient(0deg,#080c17eb,#05080fb3);font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--fg-2)}.statusbar>div{display:flex;align-items:stretch}.statusbar>div>span{display:inline-flex;align-items:center;gap:5px;padding:0 12px;border-right:1px solid var(--border)}.statusbar>div:last-child>span{border-right:none;border-left:1px solid var(--border)}.statusbar .attribution a{color:var(--fg-0);font-weight:700;text-decoration:none}.statusbar .attribution a:hover{color:var(--accent)}.status-pill{display:inline-flex;align-items:center;gap:6px}.status-pill .dot-mini{width:6px;height:6px;border-radius:50%;background:var(--good);box-shadow:0 0 8px var(--good);animation:pulse-mini 2s ease-in-out infinite}.status-pill .dot-mini.idle{background:var(--fg-3);box-shadow:none;animation:none}.status-pill .dot-mini.warn{background:var(--warn);box-shadow:0 0 8px var(--warn)}.status-pill .dot-mini.bad{background:var(--bad);box-shadow:0 0 8px var(--bad)}.status-pill .label{color:var(--fg-1)}@keyframes pulse-mini{0%,to{opacity:1}50%{opacity:.4}}.sh{display:flex;align-items:center;justify-content:space-between;margin:0 0 6px;padding-bottom:4px;border-bottom:1px dashed var(--border)}.sh h2{margin:0;font-family:var(--mono);font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--accent)}.sh h2:before{content:"▸ ";color:var(--fg-3)}.sh .sh-meta{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--fg-2)}.card{border:1px solid var(--border);border-radius:var(--rad);background:linear-gradient(180deg,#0c13228c,#05080f73);padding:10px 12px;margin-bottom:8px}.card.tight{padding:6px 8px}.idle-shell{display:flex;flex-direction:column;flex:1;min-height:0;padding:4px;overflow-y:auto}.idle-shell .dropzone{margin-top:8px}.hero-strip{display:flex;align-items:baseline;gap:12px;padding:2px 2px 8px;border-bottom:1px dashed var(--border);margin-bottom:8px}.hero-strip h1{margin:0;font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--fg-0)}.hero-strip h1:before{content:"$ ";color:var(--accent)}.hero-strip .tagline{margin:0;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--fg-2)}.hero-strip .cursor{display:inline-block;width:.5em;height:1em;background:var(--accent);vertical-align:text-bottom;margin-left:2px;animation:blink 1.1s steps(2) infinite}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}.dropzone{position:relative;border:1px dashed var(--border-hot);border-radius:var(--rad-lg);padding:28px 20px;text-align:center;cursor:pointer;transition:all .18s ease;background:linear-gradient(180deg,#0c132280,#05080f59);overflow:hidden}.dropzone:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 30%,rgba(76,200,255,.08),transparent 60%);opacity:0;transition:opacity .2s ease;pointer-events:none}.dropzone:hover,.dropzone:focus-within,.dropzone.is-dragging{border-color:var(--accent);border-style:solid}.dropzone:hover:before,.dropzone:focus-within:before,.dropzone.is-dragging:before{opacity:1}.dropzone.is-dragging{box-shadow:0 0 0 1px var(--accent-hot),0 0 40px -8px var(--accent-glow)}.dropzone-icon{width:28px;height:28px;margin:0 auto 8px;color:var(--accent);filter:drop-shadow(0 0 8px var(--accent-glow))}.dropzone h2{font-family:var(--mono);font-size:13px;font-weight:600;margin:0 0 4px;color:var(--fg-0);text-transform:uppercase;letter-spacing:.1em}.dropzone p{margin:0;color:var(--fg-2);font-size:11px;text-transform:uppercase;letter-spacing:.05em}.dropzone .browse{display:inline-block;margin-top:14px;padding:8px 16px;border:1px solid var(--border-hot);border-radius:var(--rad);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);background:#1d5dff14;transition:all .12s ease}.dropzone .browse:hover{background:#4cc8ff24;border-color:var(--accent);color:var(--accent-hot)}.dropzone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}.feature-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:8px;border:1px solid var(--border);border-radius:var(--rad);background:var(--bg-1);overflow:hidden}.feature-pill{display:flex;align-items:center;gap:8px;padding:7px 10px;border-right:1px solid var(--border);font-size:9px;color:var(--fg-1);text-transform:uppercase;letter-spacing:.06em}.feature-pill:last-child{border-right:none}.feature-pill svg{width:12px;height:12px;color:var(--accent);flex-shrink:0}.file-meta{display:flex;align-items:center;gap:10px;padding:7px 10px;border:1px solid var(--border);border-radius:var(--rad);background:var(--bg-1);font-family:var(--mono);font-size:11px;margin-bottom:8px}.file-meta .file-icon{width:14px;height:14px;color:var(--accent);flex-shrink:0}.file-meta .file-name{color:var(--fg-0);word-break:break-all;flex:1;font-size:11px}.file-meta .file-size{color:var(--fg-2);flex-shrink:0;font-size:9px;text-transform:uppercase;letter-spacing:.08em}.share-url{display:flex;gap:6px}.share-url input{flex:1;min-width:0;padding:10px 12px;font-family:var(--mono);font-size:11px;background:var(--bg-input);color:var(--accent-hot);border:1px solid var(--border-mid);border-radius:var(--rad);outline:none;text-overflow:ellipsis}.share-url input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-glow)}button,.btn{font-family:var(--mono);font-size:9px;font-weight:600;padding:6px 12px;border-radius:var(--rad);border:1px solid var(--border-hot);background:#1d5dff1f;color:var(--accent-hot);cursor:pointer;transition:all .12s ease;white-space:nowrap;text-transform:uppercase;letter-spacing:.08em}button:hover:not(:disabled),.btn:hover{border-color:var(--accent);background:#4cc8ff33;box-shadow:0 0 12px -4px var(--accent-glow)}button:focus-visible,.btn:focus-visible{outline:1px solid var(--accent);outline-offset:1px}button:disabled{opacity:.4;cursor:not-allowed}button.primary{background:var(--accent);color:var(--bg-0);border-color:var(--accent-hot)}button.primary:hover:not(:disabled){background:var(--accent-hot);box-shadow:0 0 16px -4px var(--accent-glow)}button.ghost{background:transparent;border-color:var(--border-mid);color:var(--fg-1)}button.ghost:hover{border-color:var(--border-hot);color:var(--accent);background:#4cc8ff0f}button.danger{border-color:var(--bad);background:#ff40601f;color:var(--bad)}button.icon-btn{padding:8px;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center}button.icon-btn svg{width:14px;height:14px}.btn-row{display:flex;flex-wrap:wrap;gap:6px}.kv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:var(--bg-1)}.kv-cell{padding:7px 10px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);min-height:40px;display:flex;flex-direction:column;justify-content:center}.kv-cell:nth-child(3n){border-right:none}.kv-cell:nth-last-child(-n+3){border-bottom:none}.kv-cell .label{font-family:var(--mono);font-size:8px;text-transform:uppercase;letter-spacing:.14em;color:var(--fg-3);margin-bottom:2px}.kv-cell .value{font-family:var(--mono);font-size:12px;color:var(--accent-hot);font-weight:600;font-variant-numeric:tabular-nums;line-height:1.1}.kv-cell .sub{font-size:9px;color:var(--fg-2);margin-top:1px}.peer-list{flex:1;min-height:0;overflow-y:auto;font-family:var(--mono);font-size:11px;display:flex;flex-direction:column}.peer-row{display:grid;grid-template-columns:14px 1fr auto;align-items:center;gap:8px;padding:6px 12px;border-bottom:1px solid var(--border);color:var(--fg-1)}.peer-row:last-child{border-bottom:none}.peer-row .dot{width:6px;height:6px;border-radius:50%;background:var(--good);box-shadow:0 0 6px #3fdc8e99}.peer-row .id{color:var(--fg-0);font-size:10px;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.peer-row .id .type{color:var(--fg-3);margin-left:6px;font-size:9px;text-transform:uppercase;letter-spacing:.08em}.peer-row .stats{font-size:10px;color:var(--fg-2);font-variant-numeric:tabular-nums;white-space:nowrap}.peer-row .stats .up{color:var(--accent)}.peer-row .stats .dn{color:var(--good)}.peer-list .empty{padding:16px 12px;color:var(--fg-3);font-size:10px;text-transform:uppercase;letter-spacing:.12em;text-align:center}.progress{height:6px;background:var(--bg-input);border:1px solid var(--border);border-radius:3px;overflow:hidden;position:relative}.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent-deep),var(--accent),var(--accent-hot));background-size:200% 100%;animation:shimmer 2.5s linear infinite;box-shadow:0 0 8px var(--accent-glow);transition:width .25s ease;width:0%}@keyframes shimmer{0%{background-position:0 0}to{background-position:-200% 0}}.progress-indeterminate .progress-fill{width:30%;animation:indeterminate 1.5s ease-in-out infinite}@keyframes indeterminate{0%{transform:translate(-100%)}to{transform:translate(400%)}}.alert{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:var(--rad);font-size:12px;border:1px solid}.alert.alert-info{background:#4cc8ff0f;border-color:#4cc8ff47;color:var(--fg-0)}.alert.alert-info .icon{color:var(--accent)}.alert.alert-warn{background:#ffce4c0f;border-color:#ffce4c47;color:#ffe9a7}.alert.alert-warn .icon{color:var(--warn)}.alert.alert-error{background:#ff40600f;border-color:#ff406047;color:#ffb4c1}.alert.alert-error .icon{color:var(--bad)}.alert .icon{width:18px;height:18px;flex-shrink:0;margin-top:1px}.alert p{margin:0;line-height:1.5}.alert strong{color:var(--fg-0);text-transform:uppercase;letter-spacing:.06em;font-size:11px}.live-alert{position:relative;display:flex;gap:10px;align-items:center;height:28px;padding:0 12px;border-radius:var(--rad);border:1px solid var(--bad);background:linear-gradient(180deg,#ff406038,#ff406014);color:#ffd2da;overflow:hidden;flex-shrink:0}.live-alert:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-45deg,#ff406000 0 6px,#ff406014 6px 11px);pointer-events:none}.live-alert .pulse{width:8px;height:8px;border-radius:50%;background:var(--bad);box-shadow:0 0 10px var(--bad-glow),0 0 22px var(--bad-glow);animation:pulse-bad 1.2s ease-in-out infinite;flex-shrink:0;position:relative;z-index:1}@keyframes pulse-bad{0%,to{transform:scale(1);opacity:1}50%{transform:scale(.7);opacity:.5}}.live-alert .body{position:relative;z-index:1;flex:1;display:flex;align-items:baseline;gap:10px;min-width:0}.live-alert strong{text-transform:uppercase;letter-spacing:.12em;color:#ff8a9c;font-size:10px;flex-shrink:0}.live-alert span.note{font-size:10px;color:pink;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.session-row{display:flex;align-items:center;gap:10px;padding:0 2px;height:24px;font-family:var(--mono);font-size:11px}.session-row .file-icon{width:14px;height:14px;color:var(--accent);flex-shrink:0}.session-row .file-name{color:var(--fg-0);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.session-row .sep{color:var(--fg-3)}.session-row .file-size,.session-row .key-fp{color:var(--fg-2);font-size:10px;text-transform:uppercase;letter-spacing:.08em;flex-shrink:0}.session-row .key-fp .k{color:var(--fg-3)}.session-row .key-fp .v{color:var(--accent)}.share-row{display:flex;align-items:stretch;gap:4px;margin-top:6px}.share-row input{flex:1;min-width:0;height:26px;padding:0 10px;font-family:var(--mono);font-size:10px;background:var(--bg-input);color:var(--accent-hot);border:1px solid var(--border-mid);border-radius:var(--rad);outline:none;text-overflow:ellipsis}.share-row input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-glow)}.share-row button{height:26px;padding:0 10px;font-size:9px}.netviz-wrap{position:relative;flex:1;min-height:0;background:radial-gradient(ellipse 60% 80% at 50% 50%,rgba(29,93,255,.08),transparent 70%),var(--bg-input);overflow:hidden;display:flex;align-items:stretch;justify-content:stretch}.netviz-wrap:after{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(76,200,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(76,200,255,.04) 1px,transparent 1px);background-size:24px 24px;mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 50%,transparent 100%)}.netviz{flex:1;width:100%;height:100%;display:block}.netviz .node-self rect{fill:var(--bg-2);stroke:var(--accent);stroke-width:1.4}.netviz .node-self text.label{fill:var(--accent-hot);font-family:var(--mono);font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.1em}.netviz .node-self text.sub{fill:var(--fg-2);font-family:var(--mono);font-size:7px;text-transform:uppercase;letter-spacing:.08em}.netviz .node rect{fill:var(--bg-1);stroke:var(--border-mid);stroke-width:1;transition:stroke .2s,fill .2s}.netviz .node text.label{fill:var(--fg-1);font-family:var(--mono);font-size:7.5px;text-transform:uppercase;letter-spacing:.04em}.netviz .node text.sub{fill:var(--fg-3);font-family:var(--mono);font-size:6.5px;letter-spacing:.04em}.netviz .node.connected rect{stroke:var(--good);fill:#3fdc8e0f}.netviz .node.connected text.label{fill:var(--good)}.netviz .node.connecting rect{stroke:var(--warn)}.netviz .node.connecting text.label{fill:var(--warn)}.netviz .node.error rect{stroke:var(--bad)}.netviz .node.error text.label{fill:var(--bad)}.netviz .link{fill:none;stroke:var(--border-mid);stroke-width:1;stroke-dasharray:3 4;transition:stroke .2s}.netviz .link.connecting{stroke:var(--warn);animation:dash-shift 1.4s linear infinite}.netviz .link.connected{stroke:var(--good);stroke-dasharray:none;stroke-width:1.2}.netviz .link.peer.active{stroke:var(--accent);stroke-width:1.5;filter:drop-shadow(0 0 4px var(--accent-glow))}@keyframes dash-shift{to{stroke-dashoffset:-14}}.netviz .pulse-dot{fill:var(--accent-hot);filter:drop-shadow(0 0 4px var(--accent-glow))}.netviz .empty-label{fill:var(--fg-3);font-family:var(--mono);font-size:7px;text-anchor:middle;text-transform:uppercase;letter-spacing:.1em}.netviz-legend{display:none}.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:0 10px;height:var(--header-h);border-bottom:1px solid var(--border);flex-shrink:0;background:#080c178c}.drawer-title{font-family:var(--mono);font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--accent)}.drawer-title:before{content:"▸ ";color:var(--fg-3)}.drawer-controls{display:flex;align-items:center;gap:8px}.drawer-controls .count{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--fg-2)}.drawer-controls .count strong{color:var(--accent-hot);font-weight:600}.drawer-filters{display:flex;flex-wrap:wrap;gap:3px;padding:5px 8px;border-bottom:1px solid var(--border);flex-shrink:0}.filter-pill{background:transparent;border:1px solid var(--border-mid);padding:2px 6px;font-family:var(--mono);font-size:8px;text-transform:uppercase;letter-spacing:.08em;color:var(--fg-2);border-radius:8px;cursor:pointer;transition:all .12s;height:16px;line-height:1}.filter-pill:hover{border-color:var(--border-hot);color:var(--fg-1);background:#4cc8ff0a;box-shadow:none}.filter-pill.on{border-color:currentColor;background:#4cc8ff0f}.filter-pill[data-cat=crypto].on{color:var(--crypto)}.filter-pill[data-cat=tracker].on{color:var(--tracker)}.filter-pill[data-cat=peer].on{color:var(--peer)}.filter-pill[data-cat=wire].on{color:var(--wire)}.filter-pill[data-cat=net].on{color:var(--net)}.filter-pill[data-cat=system].on{color:var(--system)}.filter-pill[data-cat=ui].on{color:var(--accent)}.drawer-list{flex:1;overflow-y:auto;padding:0;font-family:var(--mono);font-size:10px;scroll-behavior:smooth}.drawer-list:empty:before{content:"▸ awaiting events…";display:block;padding:10px;color:var(--fg-3);font-size:9px;text-transform:uppercase;letter-spacing:.08em}.event{display:grid;grid-template-columns:64px 44px 1fr;gap:6px;padding:2px 8px;border-bottom:1px solid rgba(22,32,58,.35);align-items:baseline;transition:background .15s;line-height:1.35}.event:hover{background:#4cc8ff0d}.event .ts{color:var(--fg-3);font-size:9px;font-variant-numeric:tabular-nums}.event .cat{font-size:8px;text-transform:uppercase;letter-spacing:.08em;font-weight:600;text-align:right}.event[data-cat=crypto] .cat{color:var(--crypto)}.event[data-cat=tracker] .cat{color:var(--tracker)}.event[data-cat=peer] .cat{color:var(--peer)}.event[data-cat=wire] .cat{color:var(--wire)}.event[data-cat=net] .cat{color:var(--net)}.event[data-cat=system] .cat{color:var(--system)}.event[data-cat=ui] .cat{color:var(--accent)}.event .msg{color:var(--fg-1);word-break:break-word;font-size:10px;line-height:1.35}.event[data-level=ok] .msg{color:var(--good)}.event[data-level=warn] .msg{color:var(--warn)}.event[data-level=err] .msg{color:var(--bad)}.event .meta{grid-column:3 / 4;font-size:9px;color:var(--fg-3);letter-spacing:.02em;word-break:break-all;margin-top:0}.event .meta .k{color:var(--fg-3)}.event .meta .v{color:var(--accent)}.event .meta:before{content:"↳ ";color:var(--fg-faint)}body.modal-open{overflow:hidden}.modal-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-start;justify-content:center;padding:60px 20px;background:#030611d9;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);overflow-y:auto;animation:modal-fade .16s ease}@keyframes modal-fade{0%{opacity:0}to{opacity:1}}.modal-panel{position:relative;width:100%;max-width:720px;padding:32px 36px 28px;border:1px solid var(--border-hot);border-radius:var(--rad-lg);background:linear-gradient(180deg,#0c1322fa,#05080ffa);box-shadow:0 0 0 1px #4cc8ff1a,0 0 80px -10px #1d5dff80;animation:modal-rise .18s ease}@keyframes modal-rise{0%{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}button.modal-close{position:absolute;top:12px;right:12px;width:30px;height:30px;padding:0;border-radius:50%;border:1px solid var(--border);background:var(--bg-1);color:var(--fg-1);font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center}button.modal-close:hover:not(:disabled){background:var(--bg-2);color:var(--accent-hot);border-color:var(--accent)}.modal-content .modal-title{font-family:var(--mono);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:var(--accent);margin:0 0 22px}.modal-content .modal-title:before{content:"// ";color:var(--fg-3)}.steps{list-style:none;padding:0;margin:0;display:grid;gap:12px}.steps li{display:flex;gap:16px;padding:14px 16px;border:1px solid var(--border);border-radius:var(--rad);background:#0c132266}.step-num{font-family:var(--mono);font-size:16px;font-weight:700;color:var(--accent);flex-shrink:0;opacity:.8}.steps h3{font-family:var(--mono);font-size:12px;font-weight:600;margin:0 0 4px;color:var(--fg-0);text-transform:uppercase;letter-spacing:.08em}.steps p{margin:0;color:var(--fg-1);font-size:12px;line-height:1.5}.security-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}.security-card{padding:16px;border:1px solid var(--border);border-radius:var(--rad);background:#0c132280}.security-card.good{border-color:#3fdc8e4d}.security-card.bad{border-color:#ff40604d}.security-card h3{font-family:var(--mono);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;margin:0 0 10px;color:var(--fg-0)}.security-card.good h3:before{content:"[+] ";color:var(--good)}.security-card.bad h3:before{content:"[!] ";color:var(--bad)}.security-card:not(.good):not(.bad) h3:before{content:"[?] ";color:var(--accent)}.security-card ul{margin:0;padding-left:16px;font-size:11px;color:var(--fg-1)}.security-card li{margin-bottom:6px}.complete-hero{text-align:center;padding:18px 0}.complete-hero .check{width:56px;height:56px;margin:0 auto 14px;color:var(--good);filter:drop-shadow(0 0 18px rgba(63,220,142,.4))}.complete-hero h3{font-family:var(--mono);font-size:14px;margin:0 0 6px;color:var(--fg-0)}.complete-hero p{margin:0 0 18px;color:var(--fg-2);font-size:11px;text-transform:uppercase;letter-spacing:.08em}.toast{position:fixed;bottom:36px;left:50%;transform:translate(-50%,24px);padding:10px 18px;background:var(--bg-2);border:1px solid var(--accent);border-radius:var(--rad);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--accent-hot);box-shadow:0 0 30px -6px var(--accent-glow);opacity:0;pointer-events:none;transition:all .18s ease;z-index:300}.toast.visible{opacity:1;transform:translate(-50%)}@media(max-width:1100px){:root{--drawer-w: 320px}}@media(max-width:880px){.topbar-meta{display:none}.main-grid{grid-template-columns:1fr}#app{border-right:none;border-bottom:1px solid var(--border)}#event-drawer{max-height:240px;border-top:1px solid var(--border)}}@media(max-width:640px){.topbar{padding:0 10px}#app{padding:14px 14px 24px}.dropzone{padding:26px 16px}}
