*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#0f1923;color:#c8d6e5;min-height:100vh}a{color:inherit}.app-shell{min-height:100vh}.sidebar{position:fixed;top:0;left:0;width:220px;height:100vh;background:#141e2b;border-right:1px solid #1e2d3d;padding:24px 0;display:flex;flex-direction:column;z-index:10}.sidebar .logo{display:flex;flex-direction:column;gap:12px;padding:0 20px 20px;font-size:1.1em;font-weight:700;color:#fff;letter-spacing:.02em;border-bottom:1px solid #1e2d3d;text-decoration:none}.sidebar .logo img{width:100%;height:auto}.sidebar .logo span{color:#00d2ff}.sidebar nav{padding:16px 0;flex:1}.sidebar nav a{display:flex;align-items:center;gap:10px;padding:10px 20px;color:#8899a6;text-decoration:none;font-size:.88em;transition:all .15s}.sidebar nav a:hover,.sidebar nav a.active{color:#fff;background:linear-gradient(90deg,rgba(0,210,255,.12),transparent)}.sidebar nav a.active{border-left:3px solid #00d2ff}.sidebar nav a.active.admin{border-left-color:#ff6b6b}.sidebar nav a svg{width:18px;height:18px;opacity:.7}.nav-group{margin:2px 0 6px}.nav-group-label{padding:8px 20px 4px;font-size:.7em;letter-spacing:.06em;text-transform:uppercase;color:#5a6f83;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar nav a.nav-sub{padding-left:34px;font-size:.82em}.sidebar nav a.nav-sub svg{width:14px;height:14px}.main{margin-left:220px;padding:32px 40px}h1{font-size:1.6em;font-weight:700;color:#fff;margin-bottom:8px}.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:12px}.header h1{font-size:1.5em;margin-bottom:0}.header h1 .dim{color:#5a6f83;font-weight:400;font-size:.65em}.header h1 .dim a{color:#5a6f83;text-decoration:none}.subtitle{color:#5a6f83;font-size:.9em;margin-bottom:24px}.section-header{display:flex;align-items:center;gap:10px;margin-bottom:14px;margin-top:36px}.section-header:first-of-type{margin-top:0}.section-title{font-size:1em;font-weight:600;color:#fff}.env-badge{display:inline-block;font-size:.7em;font-weight:700;letter-spacing:.08em;padding:2px 8px;border-radius:4px;vertical-align:middle}.env-badge.prod{background:#00d2ff26;color:#00d2ff;border:1px solid rgba(0,210,255,.3)}.env-badge.test{background:#f7971e26;color:#f7971e;border:1px solid rgba(247,151,30,.3)}.count-badge{font-size:.75em;color:#5a6f83;background:#1a2736;border:1px solid #1e2d3d;padding:2px 10px;border-radius:12px}.header-env-badge{display:inline-block;font-size:.55em;font-weight:700;letter-spacing:.1em;padding:3px 9px;border-radius:4px;vertical-align:middle;margin-left:10px;position:relative;top:-2px}.header-env-badge.test{background:#f7971e26;color:#f7971e;border:1px solid rgba(247,151,30,.4)}.header-env-badge.prod{background:#00d2ff1f;color:#00d2ff;border:1px solid rgba(0,210,255,.3)}.device-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-bottom:8px}.device-card{background:linear-gradient(135deg,#1a2736,#162230);border:1px solid #1e2d3d;border-radius:12px;padding:20px;text-decoration:none;color:#c8d6e5;transition:all .2s;position:relative;overflow:hidden}.device-card:hover{transform:translateY(-2px)}.device-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;opacity:0;transition:opacity .2s}.device-card:hover:before{opacity:1}.device-card.prod-card:before{background:linear-gradient(90deg,#00d2ff,#7b2ff7)}.device-card.prod-card:hover{border-color:#00d2ff;box-shadow:0 8px 24px #00d2ff14}.device-card.test-card{border-color:#f7971e33}.device-card.test-card:before{background:linear-gradient(90deg,#f7971e,#ffd200);opacity:.5}.device-card.test-card:hover{border-color:#f7971e;box-shadow:0 8px 24px #f7971e14}.device-card.unreg-card{border-color:#f7971e26}.device-card.unreg-card:before{background:linear-gradient(90deg,#f7971e,#ffd200)}.device-card.unreg-card:hover{border-color:#f7971e;box-shadow:0 8px 24px #f7971e0f}.device-card .id{font-size:1.05em;font-weight:600;color:#fff;margin-bottom:8px;font-family:SF Mono,SFMono-Regular,Consolas,monospace}.device-card .meta{display:flex;align-items:center;gap:6px;font-size:.8em;color:#5a6f83}.dot{width:8px;height:8px;border-radius:50%}.dot-prod{background:#00d2ff;box-shadow:0 0 8px #00d2ff80}.dot-test{background:#f7971e;box-shadow:0 0 8px #f7971e80}.dot-unreg{background:#f7971e;box-shadow:0 0 6px #f7971e66}.divider{border:none;border-top:1px solid #1e2d3d;margin:32px 0 0}.empty-state{text-align:center;padding:80px 20px;color:#5a6f83}.empty-state .icon{font-size:3em;margin-bottom:16px;opacity:.3}.time-bar{display:flex;gap:6px;align-items:center}.time-bar button{padding:6px 14px;border:1px solid #1e2d3d;border-radius:8px;background:#141e2b;color:#8899a6;cursor:pointer;font-size:.82em;transition:all .15s}.time-bar button:hover{border-color:#00d2ff;color:#fff}.time-bar button.active{background:linear-gradient(135deg,#00d2ff,#7b2ff7);color:#fff;border-color:transparent;box-shadow:0 2px 12px #00d2ff40}.time-bar .divider-v{width:1px;height:24px;background:#1e2d3d;margin:0 4px}.range-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}.range-inputs{display:flex;gap:10px}.range-inputs label{display:flex;align-items:center;gap:6px;font-size:.78em;color:#5a6f83;text-transform:uppercase;letter-spacing:.04em}.range-inputs input{padding:5px 8px;border:1px solid #1e2d3d;border-radius:8px;background:#141e2b;color:#c8d6e5;font-size:.85em;font-family:inherit;color-scheme:dark}.range-inputs input:focus{outline:none;border-color:#00d2ff}.refresh-btn{position:relative}.refresh-btn.spinning svg{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.refresh-indicator{font-size:.7em;color:#5a6f83;margin-left:8px;white-space:nowrap}.refresh-indicator.live{color:#2ecc71}.stats-row{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:24px}.stats-row.auto{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}.stat-card{background:linear-gradient(135deg,#1a2736,#162230);border:1px solid #1e2d3d;border-radius:12px;padding:18px;position:relative;overflow:hidden}.stat-card .topbar{position:absolute;top:0;left:0;right:0;height:2px}.stat-card .label{font-size:.72em;color:#5a6f83;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}.stat-card .value{font-size:1.6em;font-weight:700;color:#fff}.stat-card .value .unit{font-size:.65em;color:#5a6f83;margin-left:4px}.stat-card .sample-count{font-size:.7em;color:#5a6f83;margin-top:6px}.charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}.panel{background:linear-gradient(135deg,#1a2736,#162230);border:1px solid #1e2d3d;border-radius:12px;padding:20px}.panel-full{grid-column:1 / -1}.panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.panel-title{font-size:.95em;font-weight:600;color:#fff}.panel-title .dimunit{color:#5a6f83;font-weight:400}.panel-badge{font-size:.75em;padding:3px 10px;border-radius:20px;font-weight:500}.badge-telem{background:#00c9a726;color:#00c9a7}.badge-total{background:#7b2ff726;color:#a55eea}.badge-data{background:#f7971e26;color:#f7971e}.chart-empty{text-align:center;padding:40px;color:#3d5168}canvas{width:100%!important}.table-wrap{background:linear-gradient(135deg,#1a2736,#162230);border:1px solid #1e2d3d;border-radius:12px;overflow:hidden;margin-bottom:24px}.table-wrap .panel-header{padding:20px 20px 12px;margin-bottom:0}table{width:100%;border-collapse:collapse}th{padding:12px 16px;text-align:left;font-size:.72em;color:#5a6f83;text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid #1e2d3d;background:#141e2b}td{padding:11px 16px;border-bottom:1px solid rgba(30,45,61,.6);font-size:.88em}tr:last-child td{border-bottom:none}tr:hover td{background:#00d2ff08}.badge{display:inline-block;padding:2px 10px;border-radius:20px;font-size:.78em;font-weight:500}.badge-coap{background:#00d2ff26;color:#00d2ff}.badge-http{background:#7b2ff726;color:#a55eea}.mono{font-family:SF Mono,SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:.82em;color:#8899a6}.empty-cell{text-align:center;color:#3d5168;font-style:italic;padding:24px}a.ip-link{color:#00d2ff;text-decoration:none;font-family:SF Mono,SFMono-Regular,Consolas,monospace}a.ip-link:hover{text-decoration:underline}.data-expand{cursor:pointer}.data-expand summary{list-style:none;display:flex;align-items:center;gap:6px}.data-expand summary::-webkit-details-marker{display:none}.expand-arrow:after{content:"";display:inline-block;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid #5a6f83;transition:transform .15s;margin-left:4px;vertical-align:middle}.data-expand[open] .expand-arrow:after{transform:rotate(180deg)}.data-expand pre{color:#8899a6;max-height:300px;overflow:auto;margin:4px 0 0;white-space:pre-wrap;word-break:break-all}.data-pre{margin:0;white-space:pre-wrap;word-break:break-all;max-height:200px;overflow:auto}.decoded-pre{margin:0;white-space:pre-wrap;word-break:break-all;max-height:400px;overflow:auto;background:#141e2b;border:1px solid #1e2d3d;border-radius:8px;padding:16px;color:#8899a6}.ctrl-select{background:#141e2b;color:#c8d6e5;border:1px solid #1e2d3d;border-radius:8px;padding:6px 12px;font-size:.82em;cursor:pointer;outline:none}.ctrl-btn{background:#141e2b;color:#00d2ff;border:1px solid #1e2d3d;border-radius:8px;padding:6px 14px;font-size:.82em;cursor:pointer;outline:none;transition:border-color .15s}.ctrl-btn:hover{border-color:#00d2ff}.ctrl-row{display:flex;align-items:center;gap:10px}.loading,.error-box{padding:40px;color:#5a6f83;text-align:center}.error-box{color:#ff6b6b}@media(max-width:1200px){.stats-row{grid-template-columns:repeat(3,1fr)}.charts-grid{grid-template-columns:1fr}}@media(max-width:768px){.sidebar{display:none}.main{margin-left:0}.stats-row{grid-template-columns:repeat(2,1fr)}}.dot-ping{background:#00d2ff;box-shadow:0 0 8px #00d2ff80}.dot-telem{background:#00c9a7;box-shadow:0 0 8px #00c9a780}.dot-data{background:#f7971e;box-shadow:0 0 8px #f7971e80}.traffic-streams{margin:12px 0 4px;display:flex;flex-direction:column;gap:6px}.traffic-stream{display:grid;grid-template-columns:14px 60px 1fr auto;align-items:center;gap:8px;font-size:.82em}.traffic-stream .ts-label{color:#8899a6;text-transform:uppercase;letter-spacing:.04em;font-size:.82em}.traffic-stream .ts-count{color:#fff;font-weight:700;text-align:right}.traffic-stream .ts-bytes{color:#5a6f83;font-family:SF Mono,SFMono-Regular,Consolas,monospace;font-size:.9em}.device-filter{border:1px solid #1e2d3d;border-radius:10px;padding:12px 14px;margin-bottom:16px;background:#141e2b}.device-filter-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-size:.75em;color:#8899a6;text-transform:uppercase;letter-spacing:.06em}.filter-actions button{background:#1a2736;color:#00d2ff;border:1px solid #1e2d3d;border-radius:6px;padding:3px 10px;font-size:.85em;cursor:pointer;margin-left:6px}.filter-actions button:hover{border-color:#00d2ff}.device-filter-list{display:flex;flex-wrap:wrap;gap:8px;max-height:120px;overflow:auto}.device-chip{display:inline-flex;align-items:center;gap:6px;font-size:.8em;color:#c8d6e5;background:#1a2736;border:1px solid #1e2d3d;border-radius:20px;padding:4px 10px;cursor:pointer;font-family:SF Mono,SFMono-Regular,Consolas,monospace}.device-chip input{accent-color:#00d2ff;cursor:pointer;margin:0}.packet-table-wrap{border:1px solid #1e2d3d;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,#1a2736,#162230)}.packet-table-scroll{max-height:420px;overflow:auto}table.packet-table{width:100%;border-collapse:collapse}table.packet-table th{position:sticky;top:0;background:#141e2b;text-align:left;padding:10px 14px;font-size:.7em;text-transform:uppercase;letter-spacing:.06em;color:#5a6f83;border-bottom:1px solid #1e2d3d}table.packet-table td{padding:9px 14px;border-bottom:1px solid rgba(30,45,61,.6);font-size:.84em}table.packet-table tr:last-child td{border-bottom:none}table.packet-table tr:hover td{background:#00d2ff08}.pkt-type{display:inline-block;padding:2px 8px;border-radius:12px;font-size:.82em}.pkt-type.telem{background:#00c9a726;color:#00c9a7}.pkt-type.tx{background:#f7971e26;color:#f7971e}.pkt-mono{font-family:SF Mono,SFMono-Regular,Consolas,monospace;font-size:.9em;color:#8899a6;word-break:break-all}.header-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.zoom-hint{font-size:.72em;color:#5a6f83;margin-bottom:8px}button{padding:.4rem .7rem;border:1px solid #1e2d3d;border-radius:4px;background:#141e2b;color:#c8d6e5;font-size:.8rem;cursor:pointer}button:hover:not(:disabled){border-color:#00d2ff;color:#fff}button:disabled{opacity:.45;cursor:not-allowed}.seq-strip{display:flex;height:34px;width:100%;border-radius:4px;overflow:hidden;background:#0f1a26;border:1px solid #1e2d3d}.seq-strip>div{min-width:1px}.seq-ok{background:#00c9a7}.seq-missing{background:#ff5f6d}.seq-legend{display:flex;align-items:center;gap:16px;margin-top:10px;font-size:.75em;color:#8fa6bb}.seq-legend i{display:inline-block;width:12px;height:12px;border-radius:2px;margin-right:6px;vertical-align:-1px}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000009e;display:flex;align-items:center;justify-content:center;padding:32px;z-index:50}.modal{background:linear-gradient(135deg,#1a2736,#162230);border:1px solid #1e2d3d;border-radius:12px;width:min(56rem,100%);max-height:82vh;overflow-y:auto;box-shadow:0 18px 48px #00000073}.modal-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid #1e2d3d;position:sticky;top:0;background:#1a2736}.modal-head .spacer{flex:1}.modal-close{background:transparent;border:1px solid #1e2d3d;color:inherit;border-radius:6px;cursor:pointer;padding:4px 10px;line-height:1.2}.modal-close:hover{border-color:#00d2ff}.modal-body{padding:16px 18px 20px}.cell-error{color:#ff5f6d}.row-click{cursor:pointer}.row-click:hover{background:#ffffff0a}.raw-hex{margin-top:16px;font-size:.78em;word-break:break-all;opacity:.65}