:root{--ink:#202b2c;--muted:#6b7675;--line:#e2e6e2;--paper:#f6f7f3;--green:#237c64;--nav:#172c2a;--mono:ui-monospace,SFMono-Regular,Consolas,monospace}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:14px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input,select{font:inherit}button,a,input,select{outline-offset:4px}button{cursor:pointer}button:disabled{opacity:.4;cursor:default}.hidden{display:none!important}.topbar{height:68px;display:flex;align-items:center;padding:0 28px;gap:16px;background:#fff;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none;font-size:17px;letter-spacing:-.5px}.brand b{font-weight:600}.logo{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:var(--nav);color:#bde1cf;font-size:24px}.version{font:11px var(--mono);padding:5px 8px;border:1px solid var(--line);border-radius:4px;color:var(--muted)}.header-right{margin-left:auto;display:flex;align-items:center;gap:22px}.connection{font-size:12px;color:var(--muted)}.connection.online{color:var(--green)}.quiet{background:none;border:0;color:var(--muted);padding:8px}.quiet:hover{color:var(--green);background:#edf2ec;border-radius:5px}.login-view{max-width:1080px;margin:80px auto;display:grid;grid-template-columns:1fr 1fr;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;min-height:590px}.login-card{padding:60px}.eyebrow{font-size:10px;letter-spacing:1.6px;font-weight:650;color:var(--green)}.login-card h1{font-size:40px;font-weight:550;letter-spacing:-1.8px;line-height:1.15;margin:19px 0}.login-card p{line-height:1.65;color:var(--muted);max-width:350px}.login-card label{display:block;font-size:12px;font-weight:600;margin-top:20px}.login-card input{display:block;width:100%;margin-top:8px;border:1px solid #dce2dc;border-radius:6px;padding:12px;background:#fafbf8}.primary{display:flex;align-items:center;justify-content:space-between;width:100%;padding:13px 16px;border:0;border-radius:6px;background:var(--nav);color:#fff;margin-top:24px;font-weight:600}.primary:hover{background:#235147}.login-foot{margin-top:30px;font-size:11px;color:var(--muted)}.dot{display:inline-block;width:6px;height:6px;background:#62b99c;border-radius:100%;margin-right:6px}.error{color:#af403d!important;font-size:12px;min-height:20px}.login-art{background:var(--nav);color:#b5d1c5;position:relative;overflow:hidden;padding:70px;display:flex;flex-direction:column;align-items:center;justify-content:center}.orbit{position:absolute;width:550px;height:550px;border:1px solid #36504a;border-radius:100%;top:20px;left:-5px}.orbit-two{width:380px;height:380px;top:105px;left:80px}.art-label{font:10px var(--mono);letter-spacing:3px;z-index:1}.art-lines{font:15px/2 var(--mono);margin:28px 0;color:#7d9d90;z-index:1}.art-center{font-size:52px;color:#d2e6b9;z-index:1}.art-label.bottom{margin:28px 0}.art-caption{z-index:1;font-size:22px;letter-spacing:-.5px;line-height:1.4;margin-top:35px;text-align:center}.workspace{display:grid;grid-template-columns:224px minmax(480px,1fr) 390px;min-height:calc(100vh - 68px)}.sidebar{background:var(--nav);color:#d5e1da;padding:27px 18px;display:flex;flex-direction:column}.sidebar-heading{font-size:9px;font-weight:650;letter-spacing:1.2px;display:flex;align-items:center;justify-content:space-between;color:#8da59b}.tiny-mark{font-size:18px;color:#b0d4bf}.capture-label{font-size:11px;color:#a6bcb0;margin-top:25px;margin-bottom:8px}.sidebar select{background:#273d37;color:#d5e1da;border:1px solid #395248;border-radius:6px;width:100%;padding:10px 8px;font:10px var(--mono)}.session-heading{display:flex;align-items:center;justify-content:space-between;margin-top:28px;margin-bottom:10px}.session-heading h2{font-size:12px;font-weight:600}.count{font:10px var(--mono);padding:3px 6px;background:#314b42;border-radius:4px}.sessions{max-height:65vh;overflow:auto}.session{display:block;width:100%;text-align:left;padding:14px 11px;border:1px solid transparent;border-radius:7px;background:transparent;color:#a6b9ae;margin-bottom:6px}.session:hover{background:#233c33}.session.selected{background:#2b483d;color:#ecf4df;border-color:#47694f}.session .session-title{display:flex;justify-content:space-between;gap:7px;font:11px var(--mono)}.session .session-meta{font-size:11px;margin-top:10px;color:#9caf9e;display:flex;justify-content:space-between}.session small{display:block;margin-top:8px;font-size:9px;color:#7d9b8d;font-family:var(--mono)}.session.selected small{color:#9bc7ad}.sidebar-foot{border-top:1px solid #314a40;margin-top:auto;padding-top:22px;font-size:10px;line-height:1.6;display:flex}.sidebar-foot .dot{margin-top:5px;flex-shrink:0}.sidebar-foot b{font-weight:400;color:#8aa597}.traffic{padding:32px 28px;min-width:0}.page-heading{display:flex;align-items:flex-start;gap:10px;justify-content:space-between}.page-heading h1{font-size:27px;letter-spacing:-1px;font-weight:550;margin:12px 0 8px}.page-heading h1 span{color:#56a082}.page-heading p{font-size:11px;color:var(--muted);margin:0;font-family:var(--mono);line-height:1.6}.live-button{border:1px solid #d9e6d9;border-radius:20px;background:#f0f5ed;color:#487452;font-size:10px;white-space:nowrap;padding:8px 11px;margin-top:5px}.live-button.paused{color:var(--muted);background:#eceeeb}.live-button.paused .dot{background:#9caaa0}.metrics{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);background:#fff;border-radius:8px;margin:26px 0 24px;padding:20px 0}.metrics>div{padding:0 20px;border-right:1px solid var(--line)}.metrics>div:last-child{border:0}.metrics span{font-size:9px;letter-spacing:1px;color:var(--muted)}.metrics strong{display:block;font-size:27px;letter-spacing:-1px;font-weight:550;margin:9px 0 6px}.metrics small{font-size:10px;color:var(--muted)}.tab-bar{display:flex;align-items:center;border-bottom:1px solid var(--line);gap:23px}.tab-bar button{padding:0 0 13px;font-size:12px;border:0;background:transparent;color:var(--muted);border-bottom:2px solid transparent}.tab-bar button.active{color:var(--ink);border-color:var(--green);font-weight:600}.tab-bar>span{margin-left:auto;font-size:9px;color:var(--muted);padding-bottom:13px}.filters{display:flex;align-items:center;gap:10px;margin:17px 0}.search{display:flex;align-items:center;background:#fff;border:1px solid var(--line);border-radius:5px;flex:1;min-width:140px;padding:0 10px;color:var(--muted)}.search span{font-size:22px}.search input{border:0;width:100%;background:transparent;min-width:0;padding:10px 8px;font-size:11px;outline:none}.filters select{border:1px solid var(--line);border-radius:5px;background:#fff;padding:10px 5px;font-size:10px;color:var(--muted);max-width:130px}.check{display:flex;align-items:center;white-space:nowrap;gap:4px;font-size:10px;color:var(--muted)}input[type=checkbox]{accent-color:var(--green)}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:6px;background:#fff;max-height:calc(100vh - 403px);min-height:210px}.packet-table{border-collapse:collapse;width:100%;text-align:left}.packet-table th{position:sticky;top:0;z-index:1;background:#eff2ed;color:var(--muted);font-size:9px;letter-spacing:.4px;font-weight:500;padding:11px 12px;white-space:nowrap}.packet-table td{padding:13px 12px;border-top:1px solid #eef0ec;font-size:11px;white-space:nowrap}.packet-table tr{cursor:pointer}.packet-table tr:hover td{background:#f5f8f0}.packet-table tr.selected td{background:#edf4e7}.packet-table tr.selected td:first-child{box-shadow:inset 3px 0 #488c66}.packet-table td:first-child{color:#97a299;font-family:var(--mono);font-size:9px}.packet-name{font-weight:600;font-size:11px}.packet-id{display:block;margin-top:4px;color:#96a097;font:9px var(--mono)}.dir{font-size:10px;color:#67847b}.dir.out{color:#85815b}.bytes{font:10px var(--mono);color:#576e61}.badge{display:inline-block;font-size:9px;padding:4px 7px;border-radius:4px;background:#edf2ee;color:#59816c;font-weight:500;white-space:nowrap}.badge.unknown{background:#f3eee2;color:#8e7949}.badge.missing{background:#f6ece6;color:#a27052}.pagination{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:10px;margin:14px 0}.pagination button{font-size:10px}.empty{padding:45px;text-align:center;color:var(--muted);font-size:12px}.inspector{background:#fff;border-left:1px solid var(--line);min-width:0}.inspector-empty{padding:80px 36px;color:var(--muted)}.inspect-symbol{font-size:40px;color:#a0b7a6}.inspector-empty h2{font-size:22px;color:var(--ink);letter-spacing:-.5px;font-weight:550;margin-top:25px}.inspector-empty p{font-size:12px;line-height:1.7}.legend{border-top:1px solid var(--line);margin-top:35px;padding-top:25px}.legend p{font-size:10px;margin-bottom:22px}.inspector-top{display:flex;justify-content:space-between;align-items:center;padding:23px 23px 0}.inspector-top .eyebrow{font-size:9px;color:var(--muted)}.detail-heading{padding:12px 23px 0}.message-id{color:var(--green);font:11px var(--mono)}.detail-heading h2{font-size:25px;letter-spacing:-.8px;font-weight:550;overflow-wrap:anywhere;margin:9px 0}.detail-heading p{color:var(--muted);font-size:11px;margin:0}.detail-sizes{display:grid;grid-template-columns:repeat(3,1fr);padding:25px 23px;gap:12px}.detail-sizes span{font-size:8px;letter-spacing:.7px;color:var(--muted)}.detail-sizes b{display:block;font:12px var(--mono);margin-top:8px}.inspector-tabs{display:flex;padding:0 23px;gap:22px;border-bottom:1px solid var(--line)}.inspector-tabs button{border:0;background:none;padding:0 0 12px;color:var(--muted);font-size:11px;border-bottom:2px solid transparent}.inspector-tabs button.active{border-color:var(--green);color:var(--green);font-weight:600}.detail-pane{padding:22px 23px;max-height:calc(100vh - 350px);overflow:auto;line-height:1.6}.decoder-note{border:1px solid #e1e8da;background:#f6f9f2;border-radius:6px;padding:14px;margin-bottom:22px;font-size:11px;color:#67816b}.decoder-note .badge{margin-bottom:8px}.decoder-note p{margin:0;font-size:11px}.field{border-bottom:1px solid var(--line);padding:13px 0}.field:first-child{padding-top:0}.field-header{display:flex;justify-content:space-between;gap:8px}.field-header b{font-size:11px;font-weight:600;overflow-wrap:anywhere}.field-offset{font:9px var(--mono);color:var(--green);border:0;background:#f0f5ec;border-radius:3px;white-space:nowrap;padding:3px 5px}.field-type{font:8px var(--mono);color:#9aa49b;margin:6px 0;overflow-wrap:anywhere}.field pre{font:10px/1.6 var(--mono);white-space:pre-wrap;word-break:break-word;background:#f7f8f5;padding:10px;border-radius:4px;margin:8px 0;max-height:190px;overflow:auto}.field details{font-size:10px;color:var(--muted)}.field details p{margin:6px 0}.explanation,.hint{font-size:11px;color:var(--muted);line-height:1.7}.hex-toolbar{display:flex;justify-content:space-between;align-items:center;gap:5px}.hex-toolbar select{max-width:180px;font-size:10px;padding:7px;border:1px solid var(--line);border-radius:4px;background:#fff}.hex-toolbar button{font-size:10px;white-space:nowrap}.hex-output{font:9px/2 var(--mono);padding:12px 8px;background:#192c29;color:#9fc6aa;border-radius:6px;overflow:auto;white-space:nowrap}.hex-row{display:flex;gap:9px}.hex-offset{color:#65857b}.hex-values{display:flex;gap:3px}.hex-values span{display:inline-block;width:13px}.hex-values span.highlight{color:#263529;background:#dae2b2}.hex-ascii{color:#849b91;margin-left:3px}.hex-navigation{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font:9px var(--mono)}.byte-probe{margin-top:20px;border-top:1px solid var(--line);padding-top:18px}.byte-probe label{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:var(--muted)}.byte-probe input{width:80px;padding:6px;border:1px solid var(--line);border-radius:4px;font:11px var(--mono)}.byte-probe small{font-size:9px;color:var(--muted)}#probe-result{font:10px/1.8 var(--mono);padding:12px 0;white-space:pre-wrap;overflow-wrap:anywhere}.evidence-row{padding:12px 0;border-bottom:1px solid var(--line);font-size:11px}.evidence-row>span{color:var(--muted);display:block;font-size:9px;margin-bottom:5px}.evidence-row>code{display:block;font:10px/1.6 var(--mono);overflow-wrap:anywhere}.alternate{padding:16px 0}.protocol-card{display:grid;grid-template-columns:1fr auto;gap:8px;padding:17px;background:#fff;border:1px solid var(--line);border-radius:6px;margin-bottom:9px}.protocol-card h3{font-size:12px;margin:0 0 6px;font-weight:600}.protocol-card p{font-size:10px;color:var(--muted);margin:0;line-height:1.6}.protocol-card button{font:10px var(--mono)}.event{padding:13px 0;border-bottom:1px solid var(--line)}.event strong{font-size:11px}.event small{margin-left:15px;font:9px var(--mono);color:var(--muted)}.event pre{font:10px/1.7 var(--mono);color:var(--muted);white-space:pre-wrap;word-break:break-word}.notice{font-size:11px;color:#a26d43;padding:12px;background:#f7eee2;border-radius:5px}.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);max-width:90vw;z-index:5;background:#24392f;color:#fff;padding:12px 20px;border-radius:7px;font-size:12px;box-shadow:0 6px 22px #0002}
@media(min-width:1650px){.workspace{grid-template-columns:250px minmax(550px,1fr) 460px}.traffic{padding:36px 40px}.hex-output{font-size:10px}.hex-values span{width:16px}}
@media(max-width:1250px){.workspace{grid-template-columns:190px minmax(390px,1fr) 340px}.traffic{padding:27px 18px}.page-heading h1{font-size:22px}.metrics>div{padding:0 13px}.metrics small{font-size:9px}.check{font-size:0}.check input{margin-left:0}.check:after{content:'Keepalive';font-size:9px}.packet-table td,.packet-table th{padding:12px 8px}.tab-bar{gap:17px}.tab-bar>span{display:none}.detail-pane{padding:18px 16px}.inspector-tabs,.detail-sizes,.detail-heading{padding-left:16px;padding-right:16px}}
@media(max-width:1000px){.workspace{grid-template-columns:180px minmax(0,1fr)}.inspector{display:none}.workspace.detail-open .inspector{display:block;position:fixed;right:0;top:68px;bottom:0;width:390px;z-index:3;box-shadow:-12px 0 45px #142f3029;overflow:auto}.table-wrap{max-height:calc(100vh - 410px)}.check{font-size:10px}.check:after{content:none}.detail-pane{max-height:none}}
@media(max-width:650px){.topbar{height:60px;padding:0 16px;gap:8px}.brand{font-size:14px;gap:7px}.logo{width:27px;height:27px;font-size:21px}.version{font-size:9px}.header-right{gap:4px}.connection{font-size:0}.connection:first-letter{font-size:12px}.header-right button{font-size:10px}.login-view{display:block;margin:30px 16px;min-height:0}.login-card{padding:34px 27px}.login-card h1{font-size:34px}.login-art{display:none}.workspace{display:block}.sidebar{padding:15px 16px}.sidebar-heading,.capture-label,.sidebar-foot,.session-heading{display:none}.sidebar select{font-size:10px;width:100%}.sessions{display:flex;margin-top:12px;gap:8px;max-height:none;overflow:auto}.session{flex:0 0 160px;padding:11px;margin-bottom:0}.session small{display:none}.traffic{padding:25px 16px}.page-heading{gap:7px}.page-heading h1{font-size:23px;max-width:235px;line-height:1.25}.page-heading p{font-size:9px}.live-button{font-size:9px;padding:7px;margin-top:0}.metrics{margin-top:20px;margin-bottom:19px;padding:16px 0}.metrics>div{padding:0 13px}.metrics strong{font-size:24px}.metrics span{font-size:8px}.metrics small{font-size:8px;line-height:1.6;display:block}.tab-bar button{font-size:11px}.filters{flex-wrap:wrap;gap:8px}.search{flex:1 1 100%}.filters select{max-width:none;flex:1;font-size:10px}.check{font-size:10px;padding-right:8px}.table-wrap{max-height:480px}.packet-table td,.packet-table th{padding:12px 7px}.packet-table td:first-child,.packet-table th:first-child{display:none}.packet-name{font-size:10px}.badge{font-size:8px;padding:4px 5px}.dir{font-size:9px}.bytes{font-size:9px}.workspace.detail-open .inspector{top:60px;width:100%;z-index:4}.inspector-empty{display:none}.detail-pane{max-height:none}.hex-output{font-size:10px}.hex-values span{width:16px}.detail-heading h2{font-size:27px}.inspector-top{padding-top:16px}.detail-sizes{padding-top:19px;padding-bottom:19px}.pagination{font-size:9px}}

@media(min-width:651px){.workspace{height:calc(100vh - 68px);min-height:0;overflow:hidden}.traffic{display:flex;flex-direction:column;min-height:0}.page-heading,.metrics,.tab-bar,.filters,.pagination{flex-shrink:0}#packet-view{display:flex;flex-direction:column;min-height:0;flex:1}.table-wrap{max-height:none;min-height:0;flex:1}.sidebar{min-height:0}.sessions{min-height:0;max-height:none;flex:1}.sidebar-foot{margin-top:20px}.inspector{overflow:auto}.alternate{overflow:auto;min-height:0;flex:1}}