:root{color-scheme:light;--bg:#f5f7f8;--panel:#ffffff;--soft:#eef2f4;--line:#d5dde3;--text:#17202a;--muted:#62717e;--accent:#b91c1c;--accent-hover:#991b1b;--danger:#b42318}
:root[data-theme=dark],.dark{color-scheme:dark;--bg:#101316;--panel:#181d22;--soft:#20272e;--line:#323b44;--text:#eef3f7;--muted:#9ba8b5;--accent:#ef4444;--accent-hover:#f87171;--danger:#ef6461}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,sans-serif}.apexcharts-tooltip{color:#17202a}
#app{max-width:64rem;margin:0 auto;padding:1rem}.grid{display:grid}.flex{display:flex}.inline-flex{display:inline-flex}.block{display:block}.hidden{display:none}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.place-items-center{place-items:center}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.shrink-0{flex-shrink:0}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.min-h-screen{min-height:100vh}.w-full{width:100%}.max-w-sm{max-width:24rem}.max-w-5xl{max-width:64rem}.w-4{width:1rem}.h-4{height:1rem}.w-9{width:2.25rem}.h-9{height:2.25rem}.w-10{width:2.5rem}.h-10{height:2.5rem}.w-11{width:2.75rem}.h-11{height:2.75rem}.min-w-64{min-width:16rem}.max-w-sm{max-width:24rem}.rounded-md{border-radius:.375rem}.rounded-lg{border-radius:.5rem}.border{border:1px solid var(--line)}.border-transparent{border-color:transparent}.bg-red-700{background:#b91c1c}.bg-\[var\(--bg\)\]{background:var(--bg)}.bg-\[var\(--panel\)\]{background:var(--panel)}.bg-\[var\(--soft\)\]{background:var(--soft)}.bg-\[var\(--accent\)\]{background:var(--accent)}.text-white{color:#fff}.text-\[var\(--text\)\]{color:var(--text)}.text-\[var\(--muted\)\]{color:var(--muted)}.text-\[var\(--danger\)\]{color:var(--danger)}.p-4{padding:1rem}.p-5{padding:1.25rem}.px-0{padding-left:0;padding-right:0}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.text-xs{font-size:.75rem}.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.text-xl{font-size:1.25rem}.text-2xl{font-size:1.5rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.font-black{font-weight:900}.uppercase{text-transform:uppercase}.leading-tight{line-height:1.25}.shadow-sm{box-shadow:0 1px 2px rgba(0,0,0,.08)}.shadow-lg{box-shadow:0 10px 15px rgba(0,0,0,.12)}.outline-none{outline:none}.transition{transition:all .15s ease}.duration-300{transition-duration:.3s}.antialiased{-webkit-font-smoothing:antialiased}.fixed{position:fixed}.bottom-4{bottom:1rem}.right-4{right:1rem}.z-50{z-index:50}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}input{font:inherit}.hover\:bg-red-800:hover{background:#991b1b}.hover\:border-\[var\(--accent\)\]:hover{border-color:var(--accent)}.focus\:border-\[var\(--accent\)\]:focus{border-color:var(--accent)}
@media(min-width:640px){.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:justify-between{justify-content:space-between}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}}
.client-card{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(8.5rem,auto) auto;align-items:center;gap:1rem;overflow:visible}.client-card-menu-open{z-index:80}.client-actions{align-items:center}.client-action{min-width:0}.client-action-primary{min-width:5.75rem}.client-action-label{white-space:nowrap}.client-menu{position:absolute;right:0;top:calc(100% + .35rem);z-index:200;min-width:13rem;overflow:hidden;border:1px solid var(--line);border-radius:.5rem;background:var(--panel);box-shadow:0 16px 40px rgba(0,0,0,.18)}.client-menu-item{display:flex;width:100%;align-items:center;gap:.5rem;border:0;background:transparent;padding:.62rem .75rem;color:var(--text);font:inherit;font-size:.875rem;text-align:left;cursor:pointer}.client-menu-item:hover{background:var(--soft)}.client-sparkline{height:2.25rem;min-width:8rem;opacity:.85}.port-summary{display:inline-flex;max-width:100%;align-items:center;gap:.25rem;white-space:nowrap;font-size:11px;font-weight:600;color:var(--muted)}.port-summary.is-off{opacity:.65}.port-label{margin-right:.1rem}.port-chip,.port-state{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;background:var(--soft);padding:.1rem .45rem;line-height:1.25}.port-state{font-weight:500}button:disabled{cursor:not-allowed;opacity:.55}@media(max-width:640px){.client-card{grid-template-columns:auto minmax(0,1fr);align-items:start}.client-card>.client-actions{grid-column:1/-1;justify-content:stretch}.client-card>.client-actions .client-action-primary{flex:1 1 calc(33.333% - .25rem);min-width:0}.client-menu{left:0;right:auto;min-width:100%}.client-action-label{font-size:.78rem}}@media(max-width:420px){.client-card>.client-actions .client-action-primary{flex-basis:100%}}
.client-card{position:relative;display:block;overflow:visible}.client-card-content{position:relative;z-index:10;display:grid;grid-template-columns:minmax(0,1fr) minmax(8.5rem,auto) auto;align-items:center;gap:1rem}.client-card-chart-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;opacity:.2}.client-header-row{display:flex;min-width:0;align-items:center;gap:.75rem}.client-main{min-width:0}.client-traffic{min-width:0}.client-actions{flex-shrink:0;align-items:center}.client-action{min-width:0;max-width:100%}.client-action-primary{min-width:5.25rem}.client-menu{position:fixed;z-index:1000;right:auto;top:auto;max-width:calc(100vw - 16px);overflow:hidden}.client-menu-portal{box-shadow:0 18px 46px rgba(0,0,0,.22)}.port-summary{display:flex;max-width:100%;align-items:center;gap:.25rem;flex-wrap:wrap;white-space:normal}.port-chip,.port-state{white-space:nowrap}@media(max-width:640px){.client-card-content{grid-template-columns:1fr;align-items:start;gap:.75rem}.client-header-row{width:100%;align-items:flex-start}.client-traffic{text-align:left}.client-actions{width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.375rem}.client-actions .client-action,.client-actions .client-action-primary,.client-actions [data-menu-toggle]{width:100%;min-width:0;padding-left:.4rem;padding-right:.4rem}.client-menu{width:calc(100vw - 16px);min-width:0}.client-card-chart-bg{opacity:.14}.port-summary{gap:.3rem}}@media(max-width:420px){.client-action-label{font-size:.72rem}.client-actions{grid-template-columns:repeat(2,minmax(0,1fr))}}
.traffic-speed-row,.traffic-metric-row{display:grid;grid-template-columns:4.25rem repeat(2,minmax(4.5rem,auto));align-items:center;gap:.35rem .75rem;font-size:.75rem}.traffic-speed-row{font-weight:700;color:var(--text)}.traffic-metric-table{display:grid;gap:.25rem}.traffic-metric-row{color:var(--muted)}.traffic-metric-label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}.traffic-metric-name{font-weight:700;color:var(--text)}@media(max-width:640px){.traffic-speed-row,.traffic-metric-row{grid-template-columns:4.25rem repeat(2,minmax(0,1fr));width:100%}}@media(max-width:420px){.traffic-metric-row{grid-template-columns:1fr}.traffic-speed-row{grid-template-columns:1fr 1fr}.traffic-speed-row .traffic-metric-label{grid-column:1/-1}}
.client-filter-grid{display:grid;gap:.75rem;margin-top:.75rem}.client-search-wrap{position:relative;min-width:0}.client-search-icon{position:absolute;left:.75rem;top:50%;display:inline-flex;width:1rem;height:1rem;transform:translateY(-50%);color:var(--muted);pointer-events:none}.client-search-icon>span,.client-search-icon svg{width:1rem;height:1rem}.client-search-input{width:100%;height:2.75rem;border:1px solid var(--line);border-radius:.375rem;background:var(--soft);color:var(--text);font:inherit;outline:none;padding:0 .75rem 0 2.5rem;box-shadow:none}.client-search-input:focus{border-color:var(--accent)}.client-search-input::placeholder{color:var(--muted)}@media(min-width:1024px){.client-filter-grid{grid-template-columns:minmax(220px,360px) minmax(0,1fr);align-items:start}}