:root{--bg-primary: #0a0e17;--bg-secondary: #0d1321;--bg-card: #111827;--bg-card-hover: #1a2332;--border: #1e293b;--border-accent: #1e3a5f;--text-primary: #e2e8f0;--text-secondary: #94a3b8;--text-muted: #64748b;--accent-blue: #3b82f6;--accent-cyan: #06b6d4;--accent-green: #10b981;--accent-amber: #f59e0b;--accent-red: #ef4444;--accent-purple: #8b5cf6;--accent-pink: #ec4899}.app{width:100vw;height:100vh;display:flex;flex-direction:column;background:var(--bg-primary);overflow:hidden}.header{display:flex;align-items:center;justify-content:space-between;padding:6px 16px;background:var(--bg-secondary);border-bottom:1px solid var(--border);height:42px;flex-shrink:0}.header-left{display:flex;align-items:center;gap:12px}.header-title{font-size:15px;font-weight:700;color:var(--accent-cyan);letter-spacing:1px}.header-badge{font-size:10px;padding:2px 8px;border-radius:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.badge-live{background:#10b98126;color:var(--accent-green);border:1px solid rgba(16,185,129,.3);animation:pulse-green 2s infinite}.badge-paused{background:#f59e0b26;color:var(--accent-amber);border:1px solid rgba(245,158,11,.3)}.badge-disconnected{background:#ef444426;color:var(--accent-red);border:1px solid rgba(239,68,68,.3)}@keyframes pulse-green{0%,to{opacity:1}50%{opacity:.6}}.header-center{display:flex;align-items:center;gap:20px}.header-gauge{display:flex;align-items:center;gap:6px;font-size:12px}.gauge-label{color:var(--text-muted);font-size:10px;text-transform:uppercase}.gauge-value{color:var(--accent-cyan);font-weight:700;font-size:14px;min-width:60px;text-align:right}.header-right{display:flex;align-items:center;gap:8px}.btn{padding:4px 12px;border-radius:4px;border:1px solid var(--border);background:var(--bg-card);color:var(--text-primary);cursor:pointer;font-size:11px;font-family:inherit;transition:all .15s}.btn:hover{background:var(--bg-card-hover);border-color:var(--accent-blue)}.btn-active{background:#3b82f633;border-color:var(--accent-blue);color:var(--accent-blue)}select.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:20px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2394a3b8'%3E%3Cpath d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 6px center}.metric-cards{display:flex;gap:8px;padding:8px 16px;flex-shrink:0}.metric-card{flex:1;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;padding:10px 14px;display:flex;flex-direction:column;gap:4px}.metric-card-label{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.metric-card-value{font-size:20px;font-weight:700;color:var(--text-primary);line-height:1}.metric-card-unit{font-size:10px;color:var(--text-secondary);margin-left:4px}.alert-strip{padding:0 16px;flex-shrink:0;max-height:80px;overflow-y:auto}.alert-item{display:flex;align-items:center;gap:8px;padding:4px 10px;margin-bottom:2px;border-radius:4px;font-size:11px;animation:alert-in .3s ease-out}.alert-critical{background:#ef44441f;border-left:3px solid var(--accent-red);color:var(--accent-red)}.alert-high{background:#f59e0b1f;border-left:3px solid var(--accent-amber);color:var(--accent-amber)}.alert-medium{background:#3b82f61f;border-left:3px solid var(--accent-blue);color:var(--accent-blue)}.alert-time{color:var(--text-muted);font-size:10px;min-width:60px}.alert-type{font-weight:700;min-width:90px}.alert-dismiss{margin-left:auto;cursor:pointer;opacity:.5;font-size:14px}@keyframes alert-in{0%{transform:translate(-20px);opacity:0}to{transform:translate(0);opacity:1}}.top-charts{display:flex;gap:8px;padding:4px 16px;flex-shrink:0;height:160px}.top-charts>*{flex:1}.main-grid{flex:1;display:flex;gap:8px;padding:4px 16px 8px;min-height:0;overflow:hidden}.col-left{width:50%;display:flex;flex-direction:column;min-height:0}.col-right{width:50%;display:flex;flex-direction:column;gap:8px;min-height:0;overflow:hidden}.right-row{display:flex;gap:8px;flex:1}.right-col{flex:1;display:flex;flex-direction:column;gap:8px}.row-top,.row-mid{display:flex;gap:8px;min-height:150px;max-height:180px}.row-top>*,.row-mid>*{flex:1}.panel{background:var(--bg-card);border:1px solid var(--border);border-radius:6px;display:flex;flex-direction:column;overflow:hidden;min-height:0}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--border);flex-shrink:0}.panel-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary)}.panel-body{flex:1;overflow:auto;padding:8px;min-height:0}.pkt-table-container{flex:1;overflow:hidden;position:relative}.pkt-table-header{display:grid;grid-template-columns:140px 1fr 20px 1fr 60px 48px 70px 24px 150px;gap:4px;padding:6px 12px;font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border);background:var(--bg-secondary)}.pkt-row{display:grid;grid-template-columns:140px 1fr 20px 1fr 60px 48px 70px 24px 150px;gap:4px;padding:3px 12px;font-size:12px;border-bottom:1px solid rgba(30,41,59,.4);cursor:pointer;transition:background .1s;align-items:center}.pkt-row:hover{background:var(--bg-card-hover)}.pkt-ts{color:var(--text-muted);font-size:11px}.pkt-ip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pkt-ip .port{color:var(--text-muted)}.pkt-arrow{color:var(--accent-blue);text-align:center;font-size:14px}.pkt-proto{font-size:10px;padding:1px 6px;border-radius:3px;font-weight:700;text-align:center;white-space:nowrap}.proto-TCP{background:#3b82f633;color:var(--accent-blue)}.proto-UDP{background:#10b98133;color:var(--accent-green)}.proto-ICMP{background:#f59e0b33;color:var(--accent-amber)}.proto-ARP{background:#8b5cf633;color:var(--accent-purple)}.proto-DNS{background:#06b6d433;color:var(--accent-cyan)}.proto-HTTP{background:#ec489933;color:var(--accent-pink)}.proto-TLS{background:#10b98133;color:var(--accent-green)}.proto-QUIC{background:#f59e0b33;color:var(--accent-amber)}.proto-OTHER{background:#64748b33;color:var(--text-muted)}.pkt-len{text-align:right;color:var(--text-secondary)}.pkt-ttl{text-align:right;color:var(--text-muted);font-size:11px}.pkt-flags{font-size:10px;color:var(--accent-amber)}.pkt-geo-flag{font-size:14px;text-align:center}.pkt-hostname{color:var(--text-muted);font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pkt-detail{background:var(--bg-secondary);border-top:1px solid var(--border-accent);padding:10px 16px;font-size:11px;animation:slide-down .2s ease-out}.pkt-detail-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.pkt-detail-field label{display:block;color:var(--text-muted);font-size:9px;text-transform:uppercase;letter-spacing:.5px}.pkt-detail-field span{color:var(--text-primary);font-size:12px}@keyframes slide-down{0%{max-height:0;opacity:0}to{max-height:200px;opacity:1}}.chart-container{width:100%;height:100%}.chart-container .recharts-wrapper{font-size:10px}.proto-dist-legend{display:flex;flex-wrap:wrap;gap:6px;padding:4px 0}.proto-legend-item{display:flex;align-items:center;gap:4px;font-size:10px}.proto-legend-dot{width:8px;height:8px;border-radius:50%}.talker-bar-row{display:flex;align-items:center;gap:6px;margin-bottom:4px}.talker-label{width:110px;font-size:10px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}.talker-bar-bg{flex:1;height:14px;background:#1e293b80;border-radius:2px;overflow:hidden}.talker-bar-fill{height:100%;border-radius:2px;transition:width .5s ease;min-width:2px}.talker-value{width:60px;font-size:10px;color:var(--text-muted);text-align:right}.flows-table{width:100%;border-collapse:collapse;font-size:11px}.flows-table th{text-align:left;padding:4px 8px;color:var(--text-muted);font-size:10px;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border);cursor:pointer;-webkit-user-select:none;user-select:none}.flows-table th:hover{color:var(--accent-blue)}.flows-table td{padding:3px 8px;border-bottom:1px solid rgba(30,41,59,.3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.flow-long-lived{background:#f59e0b14}.flow-tuple{font-family:inherit;font-size:11px}.geo-map-container{width:100%;height:100%;position:relative}.geo-map-container svg{width:100%;height:100%}.geo-tooltip{position:absolute;background:var(--bg-card);border:1px solid var(--border-accent);border-radius:4px;padding:6px 10px;font-size:11px;pointer-events:none;z-index:100;box-shadow:0 4px 12px #00000080}@media (max-width: 900px){body{overflow:auto}.app{height:auto;min-height:100vh;overflow:visible}.header{flex-wrap:wrap;height:auto;padding:8px 12px;gap:6px}.header-left{order:1;flex:1}.header-right{order:2}.header-center{order:3;width:100%;justify-content:flex-start}.metric-cards{flex-wrap:wrap;padding:8px 12px}.metric-card{flex:1 1 calc(33.33% - 6px);min-width:100px}.top-charts{flex-direction:column;height:auto;padding:4px 12px}.top-charts>*{height:140px}.main-grid{flex-direction:column;overflow:visible;padding:4px 12px 16px}.col-left,.col-right{width:100%;overflow:visible}.col-right{display:flex;flex-direction:column;gap:8px}.right-row,.right-col{flex-direction:column}.pkt-table-header,.pkt-row{grid-template-columns:100px 1fr 16px 1fr 48px 48px 50px}.pkt-h-ttl,.pkt-row .pkt-ttl,.pkt-h-flags,.pkt-row .pkt-flags,.pkt-h-geo,.pkt-row .pkt-geo-flag,.pkt-h-hostname,.pkt-row .pkt-hostname{display:none}.pkt-detail-grid{grid-template-columns:repeat(2,1fr)}.panel{min-height:120px}.talker-label{width:80px}.flows-table{font-size:10px}.flows-table td{max-width:120px}}@media (max-width: 600px){.header-title{font-size:12px;letter-spacing:0}.header-gauge{gap:4px}.gauge-value{font-size:12px;min-width:44px}.header-right{gap:4px}.btn{padding:4px 8px;font-size:10px}.metric-cards{gap:6px;padding:6px 8px}.metric-card{flex:1 1 calc(50% - 4px);min-width:0;padding:8px 10px}.metric-card-value{font-size:16px}.metric-card-label{font-size:9px}.top-charts>*{height:120px}.pkt-table-header,.pkt-row{grid-template-columns:70px 1fr 14px 1fr 40px 40px;padding:3px 8px;font-size:10px}.pkt-h-flags,.pkt-row .pkt-flags{display:none}.pkt-ts{font-size:9px}.pkt-ip{font-size:10px}.pkt-proto{font-size:9px;padding:1px 4px}.pkt-len{font-size:10px}.panel-header{padding:6px 10px}.panel-title{font-size:10px}.panel-body{padding:6px}.pkt-detail{padding:8px 10px}.pkt-detail-grid{grid-template-columns:1fr 1fr;gap:6px}.talker-label{width:60px;font-size:9px}.talker-bar-bg{height:12px}.talker-value{width:50px;font-size:9px}}@media (max-width: 480px){.header-left{gap:6px}.header-badge{font-size:8px;padding:1px 5px}.metric-cards{padding:4px 6px;gap:4px}.metric-card{padding:6px 8px}.metric-card-value{font-size:14px}.top-charts{padding:4px 6px}.top-charts>*{height:100px}.pkt-table-header,.pkt-row{grid-template-columns:60px 1fr 12px 1fr 36px;padding:2px 6px;font-size:9px}.pkt-h-len,.pkt-row .pkt-len{display:none}.pkt-ts{font-size:8px}.pkt-ip{font-size:9px}.pkt-arrow{font-size:10px}.pkt-proto{font-size:8px;padding:0 3px}}@media (pointer: coarse){.btn{min-height:44px;min-width:44px;padding:8px 14px}.pkt-row{min-height:44px;padding:6px 12px}.alert-item{min-height:36px;padding:6px 10px}select.btn{min-height:44px}.pkt-row:hover{background:transparent}.flows-table th:hover{color:var(--text-muted)}::-webkit-scrollbar{width:8px;height:8px}}@media (prefers-reduced-motion: reduce){.badge-live,.alert-item{animation:none}.talker-bar-fill{transition:none}.bubble animate{display:none}}