.chart.rt-chart { --rx-color:#00856f; --tx-color:#2166d1; margin-top:14px; padding:12px 0 0; border:0; border-top:1px solid var(--line); border-radius:0; background:transparent; font-size:11px; font-variant-numeric:tabular-nums; min-width:0; }
body.theme-dark .chart.rt-chart { --rx-color:#39ceaa; --tx-color:#77b4ff; background:transparent; }
.rt-heading,.rt-legend { display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--muted); }
.rt-heading { font-size:11px; margin-bottom:12px; }.rt-heading>span:first-child { color:var(--text); font-weight:600; }
.rt-legend { justify-content:flex-start; gap:16px; margin-bottom:8px; }.rt-legend>span { display:flex; align-items:center; gap:6px; }.rt-unit { margin-left:auto; }
.rt-swatch { width:17px; height:0; border-top:2px solid currentColor; }.rt-swatch.rt-tx { border-top-style:dashed; }
.rt-rx { color:var(--rx-color); }.rt-tx { color:var(--tx-color); }
.rt-frame { display:grid; grid-template-columns:40px minmax(0,1fr); column-gap:8px; }
.rt-axis { display:flex; flex-direction:column; justify-content:space-between; height:144px; padding:2px 0; text-align:right; color:var(--muted); line-height:12px; font-size:10px; }
.rt-plot { position:relative; height:144px; min-width:0; cursor:crosshair; touch-action:pan-y; }
.rt-plot:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.chart.rt-chart svg { width:100%; height:144px; overflow:visible; }
.rt-area.rt-area-tx { fill:var(--tx-color,#2166d1); opacity:.12; }
.rt-area.rt-area-rx { fill:var(--rx-color,#00856f); opacity:.08; }
.rt-extreme { position:absolute; pointer-events:none; font-size:9px; line-height:12px; white-space:nowrap; max-width:85%; overflow:hidden; text-overflow:ellipsis; color:var(--text); background:var(--panel); padding:0 3px; border:1px solid var(--line); border-radius:2px; }
.rt-extreme.max { transform:translate(-50%,-110%); }
.rt-extreme.min { transform:translate(-50%,7px); }
.rt-grid { stroke:var(--line); stroke-width:1; vector-effect:non-scaling-stroke; }
.rt-line { fill:none; stroke:currentColor; stroke-width:2; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.rt-line.rt-tx { stroke-dasharray:6 4; stroke-width:2.3; }.rt-area { fill:var(--rx-color); opacity:.08; }
.rt-times { grid-column:2; display:flex; justify-content:space-between; gap:4px; margin-top:8px; color:var(--muted); font-size:10px; line-height:14px; }
.rt-last,.rt-hover-dot { position:absolute; width:6px; height:6px; border-radius:50%; background:currentColor; transform:translate(-50%,-50%); pointer-events:none; }
.rt-hover-dot { width:8px; height:8px; border:2px solid var(--panel); z-index:2; }.rt-hover-dot.rt-tx { border-radius:1px; }
.rt-cursor { position:absolute; top:8px; bottom:8px; border-left:1px dashed var(--muted); pointer-events:none; }
.rt-tooltip { position:absolute; z-index:4; top:12px; width:142px; max-width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:4px; background:var(--panel); color:var(--text); box-shadow:0 3px 12px #0002; font-size:11px; line-height:1.7; pointer-events:none; }
.rt-tooltip strong,.rt-tooltip span { display:block; }.rt-tooltip-rx { color:var(--rx-color); }.rt-tooltip-tx { color:var(--tx-color); }
.rt-chart [hidden] { display:none; }.rt-empty { position:absolute; inset:0; display:grid; place-items:center; font-size:11px; color:var(--muted); }
.rt-stats { margin-top:12px; display:grid; grid-template-columns:1fr 1fr; gap:8px; border-top:1px solid var(--line); padding-top:10px; }
.rt-stats>div { display:grid; grid-template-columns:1fr; gap:4px; min-width:0; }.rt-stats span { color:var(--muted); font-size:10px; margin-bottom:2px; }.rt-stats strong { font-weight:500; font-size:11px; overflow-wrap:anywhere; }

body.traffic-view #cards { grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:14px; align-items:start; }
body.traffic-view #cards > .card { min-width:0; padding:16px; border-radius:6px; }
body.traffic-view .card-head { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; min-height:66px; }
body.traffic-view .card-head > div { min-width:0; }
body.traffic-view .card-head .site { font-size:14px; font-weight:650; line-height:1.4; overflow-wrap:anywhere; }
body.traffic-view .card-head .vlan { font-size:11px; line-height:1.4; overflow-wrap:anywhere; }
.badge.interface-status { min-width:68px; height:27px; padding:0 7px; gap:5px; border-radius:5px; font-size:10px; font-weight:700; background:var(--panel-2); color:var(--muted); border-color:var(--line); }
.badge.interface-status i { display:block; width:15px; height:15px; flex-shrink:0; background:currentColor; mask:center/contain no-repeat url('status-circle-check.svg'); -webkit-mask:center/contain no-repeat url('status-circle-check.svg'); }
.badge.interface-status.up { background:#ecf8f3; color:#08734e; border-color:#b9dfcd; }
.badge.interface-status.down { background:#fff0f1; color:#ad2e42; border-color:#f1c6ce; }
.badge.interface-status.down i { mask-image:url('status-circle-x.svg'); -webkit-mask-image:url('status-circle-x.svg'); }
.badge.interface-status.unknown i { display:none; }
body.theme-dark .badge.interface-status.up { background:#123b2e; color:#68ddaf; border-color:#28654f; }
body.theme-dark .badge.interface-status.down { background:#3d202a; color:#ff9cab; border-color:#74404e; }
body.traffic-view .traffic { gap:0; margin-top:12px; border-top:1px solid var(--line); padding-top:12px; }
body.traffic-view .traffic-box { border:0; border-radius:0; background:transparent; min-width:0; padding:0 10px 0 0; }
body.traffic-view .traffic-box + .traffic-box { padding:0 0 0 12px; border-left:1px solid var(--line); }
body.traffic-view .traffic-label { font-size:10px; font-weight:600; }
body.traffic-view .traffic-box:first-child .traffic-label { color:var(--up); }
body.traffic-view .traffic-box:last-child .traffic-label { color:var(--accent); }
body.traffic-view .traffic-value { font-size:19px; line-height:1.3; font-weight:650; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
body.traffic-view .details { font-size:11px; line-height:1.4; grid-template-columns:64px minmax(0,1fr); gap:6px 10px; padding-top:12px; border-top:1px solid var(--line); }
body.traffic-view .details > div { overflow-wrap:anywhere; min-width:0; }
body.traffic-view .rt-plot, body.traffic-view .rt-axis, body.traffic-view .rt-chart svg { height:136px; }
@media (max-width:650px) { body.traffic-view .traffic { grid-template-columns:1fr 1fr; } }