.xb-traffic-chart{--xb-card:rgba(255,255,255,.94);--xb-border:rgba(148,163,184,.22);--xb-text:#0f172a;--xb-muted:#64748b;--xb-grid:rgba(148,163,184,.2);--xb-up:#10b981;--xb-down:#3b82f6;--xb-total:#8b5cf6;margin:14px 0 18px;padding:22px;border:1px solid var(--xb-border);border-radius:20px;color:var(--xb-text);background:radial-gradient(circle at 0 0,rgba(59,130,246,.09),transparent 34%),radial-gradient(circle at 100% 0,rgba(139,92,246,.08),transparent 30%),var(--xb-card);box-shadow:0 16px 45px rgba(15,23,42,.08);overflow:hidden}
.xb-traffic-chart *{box-sizing:border-box}.xb-traffic-head,.xb-traffic-controls,.xb-traffic-legend{display:flex;align-items:center}.xb-traffic-head{justify-content:space-between;gap:16px;margin-bottom:18px}.xb-traffic-title{font-size:18px;font-weight:750;letter-spacing:-.02em}.xb-traffic-subtitle{margin-top:4px;color:var(--xb-muted);font-size:12px}.xb-traffic-controls{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end}.xb-traffic-select,.xb-traffic-toggle{height:36px;border:1px solid var(--xb-border);border-radius:10px;padding:0 12px;color:var(--xb-text);background:rgba(255,255,255,.72);font:inherit;font-size:13px;outline:none}.xb-traffic-toggle{cursor:pointer}.xb-traffic-toggle:hover{border-color:rgba(59,130,246,.45);background:rgba(239,246,255,.9)}
.xb-traffic-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:18px}.xb-traffic-stat{min-width:0;padding:14px 16px;border:1px solid var(--xb-border);border-radius:14px;background:rgba(255,255,255,.6)}.xb-traffic-stat-label{color:var(--xb-muted);font-size:12px}.xb-traffic-stat-value{margin-top:5px;overflow:hidden;font-size:20px;font-weight:760;text-overflow:ellipsis;white-space:nowrap}.xb-traffic-stat-value.up{color:var(--xb-up)}.xb-traffic-stat-value.down{color:var(--xb-down)}.xb-traffic-stat-value.total{color:var(--xb-total)}
.xb-traffic-plot{position:relative;min-height:300px;padding:8px 4px 0;border:1px solid var(--xb-border);border-radius:16px;background:rgba(248,250,252,.58)}.xb-traffic-svg{display:block;width:100%;height:auto;min-height:280px;overflow:visible}.xb-traffic-grid{stroke:var(--xb-grid);stroke-width:1;stroke-dasharray:4 5}.xb-traffic-axis{fill:var(--xb-muted);font-size:11px;font-family:ui-sans-serif,system-ui,sans-serif}.xb-traffic-line{fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.xb-traffic-line.up{stroke:var(--xb-up)}.xb-traffic-line.down{stroke:var(--xb-down)}.xb-traffic-line.total{stroke:var(--xb-total)}.xb-traffic-dot{stroke:#fff;stroke-width:2;vector-effect:non-scaling-stroke;cursor:help}.xb-traffic-dot.up{fill:var(--xb-up)}.xb-traffic-dot.down{fill:var(--xb-down)}.xb-traffic-dot.total{fill:var(--xb-total)}.xb-traffic-legend{justify-content:center;gap:18px;margin-top:14px;color:var(--xb-muted);font-size:12px;flex-wrap:wrap}.xb-traffic-key{display:inline-flex;align-items:center;gap:7px}.xb-traffic-key:before{width:20px;height:3px;border-radius:99px;background:var(--key);content:""}.xb-traffic-details{margin-top:18px;border:1px solid var(--xb-border);border-radius:14px;overflow:hidden}.xb-traffic-details-note{padding:11px 14px;color:var(--xb-muted);font-size:12px;background:rgba(248,250,252,.58)}.xb-traffic-table-wrap{overflow-x:auto}.xb-traffic-detail-table{width:100%;min-width:420px;border-collapse:collapse;font-size:13px;text-align:left}.xb-traffic-detail-table th,.xb-traffic-detail-table td{padding:12px 14px;border-top:1px solid var(--xb-border);vertical-align:middle}.xb-traffic-detail-table th{color:var(--xb-muted);font-size:12px;font-weight:600;background:rgba(248,250,252,.36)}.xb-traffic-detail-table tbody tr:hover{background:rgba(139,92,246,.035)}.xb-traffic-billed{color:var(--xb-total);font-weight:720}
.xb-traffic-empty{display:grid;min-height:260px;place-items:center;text-align:center;color:var(--xb-muted)}.xb-traffic-empty-icon{width:54px;height:54px;margin:0 auto 12px;border-radius:18px;display:grid;place-items:center;color:#3b82f6;background:rgba(59,130,246,.1);font-size:25px}.xb-traffic-empty strong{display:block;color:var(--xb-text);font-size:15px;margin-bottom:4px}.xb-traffic-source.xb-traffic-source-hidden{display:none!important}
@media(prefers-color-scheme:dark){.xb-traffic-chart{--xb-card:rgba(15,23,42,.94);--xb-border:rgba(148,163,184,.2);--xb-text:#e5eefb;--xb-muted:#94a3b8;--xb-grid:rgba(148,163,184,.16);box-shadow:0 18px 50px rgba(0,0,0,.28)}.xb-traffic-select,.xb-traffic-toggle,.xb-traffic-stat{background:rgba(30,41,59,.72)}.xb-traffic-plot,.xb-traffic-details-note,.xb-traffic-detail-table th{background:rgba(15,23,42,.45)}}
.dark .xb-traffic-chart{--xb-card:rgba(15,23,42,.94);--xb-border:rgba(148,163,184,.2);--xb-text:#e5eefb;--xb-muted:#94a3b8;--xb-grid:rgba(148,163,184,.16);box-shadow:0 18px 50px rgba(0,0,0,.28)}.dark .xb-traffic-select,.dark .xb-traffic-toggle,.dark .xb-traffic-stat{background:rgba(30,41,59,.72)}.dark .xb-traffic-plot,.dark .xb-traffic-details-note,.dark .xb-traffic-detail-table th{background:rgba(15,23,42,.45)}
@media(max-width:760px){.xb-traffic-chart{padding:16px;border-radius:16px}.xb-traffic-head{align-items:flex-start;flex-direction:column}.xb-traffic-controls{justify-content:flex-start}.xb-traffic-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.xb-traffic-stat-value{font-size:17px}.xb-traffic-plot{min-height:245px}.xb-traffic-svg{min-height:230px}}