select{width:100%;background:#071119;border:1px solid #294250;border-radius:7px;color:white;padding:11px 12px;font:inherit}
select:focus{outline:2px solid #247a82;border-color:transparent}
.interface-link{display:flex;align-items:center;color:var(--text);text-decoration:none}
.graph-arrow{color:var(--aqua);font-size:11px;margin-left:10px;opacity:0;transition:.15s}
.clickable-row:hover{background:#10232e}
.clickable-row:hover .graph-arrow{opacity:1}
.interface-hero{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:28px}
.interface-hero h1{font-size:42px;line-height:1.08;margin:7px 0}
.interface-hero p{color:var(--muted);margin:0}
.range-tabs{display:flex;flex-wrap:wrap;justify-content:flex-end;max-width:100%;background:#09151e;border:1px solid var(--line);border-radius:9px;padding:4px}
.range-tabs a{color:var(--muted);text-decoration:none;padding:7px 13px;border-radius:6px;font-size:12px;font-weight:700}
.range-tabs a.active{background:#173545;color:var(--aqua)}
.custom-range{display:flex;align-items:end;gap:12px;background:#0a161f;border:1px solid var(--line);border-radius:10px;padding:14px;margin:-10px 0 20px}.custom-range label{min-width:160px}.custom-range button{white-space:nowrap}.custom-range small{color:var(--muted);padding-bottom:9px}
.traffic-summary{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px}
.direction-card{background:linear-gradient(145deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:12px;padding:20px}
.direction-card>div:first-child{display:flex;align-items:center;gap:8px;color:var(--muted)}
.direction-dot{width:10px;height:10px;border-radius:50%;background:#73d7ff;box-shadow:0 0 10px #73d7ff88}
.direction-card.outbound .direction-dot{background:#70e5b4;box-shadow:0 0 10px #70e5b488}
.direction-card>strong{display:block;font-size:31px;margin:9px 0 17px}
.direction-card dl{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:0}
.direction-card dl div{border-left:1px solid var(--line);padding-left:10px}
.direction-card dl div:first-child{border-left:0;padding-left:0}
.direction-card dt{font-size:10px;text-transform:uppercase;color:var(--muted)}
.direction-card dd{margin:3px 0 0;font-size:13px;font-weight:700}
.chart-panel{padding:22px}
.chart-scroll{overflow-x:auto}
.traffic-chart{display:block;width:100%;min-width:680px;background:linear-gradient(180deg,#0c1c26,#09141c);border-radius:9px}
.grid-line{stroke:#203541;stroke-width:1}
.axis-label,.time-label{fill:#78919c;font:10px Inter,system-ui,sans-serif}
.traffic-line{fill:none;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.traffic-line.inbound{stroke:#73d7ff}
.traffic-line.outbound{stroke:#70e5b4}
.percentile-line{stroke-width:1.3;stroke-dasharray:7 6;opacity:.75}
.percentile-line.inbound{stroke:#73d7ff}
.percentile-line.outbound{stroke:#70e5b4}
.maximum-line{stroke-width:1.2;stroke-dasharray:2 5;opacity:.9}.maximum-line.inbound{stroke:#73d7ff}.maximum-line.outbound{stroke:#70e5b4}
.usage-area{opacity:.1}
.usage-area.inbound{fill:#73d7ff}
.usage-area.outbound{fill:#70e5b4}
.usage-chart{margin-top:4px}
.traffic-chart-wrap{position:relative;min-width:680px}.traffic-chart-wrap .traffic-chart{min-width:0}.traffic-hit{fill:transparent;pointer-events:all;cursor:crosshair}.traffic-cursor{stroke:#94acb6;stroke-width:1;stroke-dasharray:3 3;display:none}.traffic-marker{fill:#071119;stroke-width:2;display:none}.traffic-marker.inbound{stroke:#73d7ff}.traffic-marker.outbound{stroke:#70e5b4}.traffic-tooltip{position:absolute;z-index:2;display:none;pointer-events:none;transform:translate(-50%,-100%);background:#071119;border:1px solid #36515f;border-radius:7px;padding:8px 10px;box-shadow:0 7px 20px #0008;white-space:nowrap}.traffic-tooltip b,.traffic-tooltip span{display:block}.traffic-tooltip b{font-size:11px;margin-bottom:3px}.traffic-tooltip span{font-size:11px;color:var(--muted)}.traffic-tooltip .tip-in{color:#73d7ff}.traffic-tooltip .tip-out{color:#70e5b4}.chart-legend{display:flex;gap:20px;justify-content:center;color:var(--muted);font-size:12px;margin-top:15px}
.chart-legend span:before{content:"";display:inline-block;width:18px;height:2px;vertical-align:middle;margin-right:7px;background:#73d7ff}
.chart-legend .outbound:before{background:#70e5b4}
.chart-legend .dashed:before{height:0;border-top:1px dashed #829aa4;background:none}
.chart-legend .maximum:before{height:0;border-top:2px dotted #829aa4;background:none}
.wireless-panel{padding:22px;margin-top:22px;min-width:0;overflow:hidden}.wireless-heading{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:20px}.wireless-heading h2{margin:3px 0 4px}.wireless-heading p{margin:0;color:var(--muted);font-size:13px}.wireless-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;min-width:0}.wireless-card{background:linear-gradient(145deg,#10232e,#09161f);border:1px solid var(--line);border-radius:11px;padding:17px;min-width:0;max-width:100%;overflow:hidden}.wireless-card header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;height:auto;border:0;padding:0;background:none;backdrop-filter:none}.wireless-card header span{display:block;color:var(--aqua);font-size:10px;font-weight:800;letter-spacing:.7px;text-transform:uppercase}.wireless-card header b{display:block;margin-top:4px;font-size:14px}.wireless-card header strong{font-size:23px;white-space:nowrap}.wireless-chart{display:block;width:100%;height:auto;margin:10px 0 4px}.wireless-chart line{stroke:#203541;stroke-width:1}.wireless-chart path{fill:none;stroke:#67d9c9;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.wireless-chart text{fill:#78919c;font:9px Inter,system-ui,sans-serif}.wireless-card dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:4px 0 0}.wireless-card dl div{border-left:1px solid var(--line);padding-left:8px;min-width:0}.wireless-card dl div:first-child{border-left:0;padding-left:0}.wireless-card dt{color:var(--muted);font-size:9px;text-transform:uppercase}.wireless-card dd{margin:3px 0 0;font-size:12px;font-weight:700;overflow:hidden;text-overflow:ellipsis}
.wireless-chart-wrap{position:relative;margin:10px 0 4px}.wireless-chart-wrap .wireless-chart{margin:0}.wireless-chart .wireless-baseline{stroke:#203541;stroke-width:1}.wireless-hit{fill:transparent;pointer-events:all;cursor:crosshair}.wireless-cursor{stroke:#94acb6!important;stroke-width:1;stroke-dasharray:3 3;display:none}.wireless-marker{fill:#071119;stroke:#67d9c9;stroke-width:2;display:none}.wireless-tooltip{position:absolute;z-index:2;display:none;pointer-events:none;transform:translate(-50%,-100%);background:#071119;border:1px solid #36515f;border-radius:7px;padding:7px 9px;box-shadow:0 7px 20px #0008;white-space:nowrap}.wireless-tooltip b,.wireless-tooltip span{display:block}.wireless-tooltip b{color:#fff;font-size:12px}.wireless-tooltip span{color:var(--muted);font-size:10px;margin-top:2px}
.wireless-card header>div{min-width:0;flex:1}.wireless-card header b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.wireless-card header strong{flex:0 0 auto;max-width:45%;overflow:hidden;text-overflow:ellipsis}
@media(max-width:800px){.interface-hero{align-items:flex-start;gap:20px}
.interface-hero h1{font-size:34px}
.traffic-summary{grid-template-columns:1fr}
.direction-card dl{grid-template-columns:repeat(2,1fr);gap:14px}
.direction-card dl div:nth-child(3),.direction-card dl div:nth-child(5){border-left:0;padding-left:0}
.graph-arrow{display:none}
.wireless-grid{grid-template-columns:1fr}.wireless-heading{align-items:flex-start;gap:16px}
}
@media(max-width:520px){.interface-hero{display:block}
.range-tabs{margin-top:18px;width:100%;justify-content:flex-start}
.custom-range{align-items:stretch;flex-direction:column}.custom-range label{min-width:0}.custom-range small{padding:0}
.chart-legend{flex-wrap:wrap}
.direction-card>strong{font-size:27px}
}