.sp-traffic-widget{display:flex;align-items:center;gap:19px;margin:0 auto;padding:8px 16px;font-family:inherit;justify-content:center;background:rgba(0,0,0,.06);border-radius:8px;border:1px solid #ccc}.sp-traffic-title{font-size:.8rem;font-weight:600;color:var(--sp-gray-900,#1e293b);white-space:nowrap;flex-shrink:0}.sp-traffic-bar{flex:0 0 140px;height:10px;background:linear-gradient(to right,#3b82f6,#22c55e,#eab308,#f97316,#ef4444);border-radius:5px;position:relative;overflow:visible}.sp-traffic-bar-fill{position:absolute;top:-5px;width:20px;height:20px;background:var(--sp-white,#fff);border:2px solid var(--sp-gray-900,#1e293b);border-radius:50%;transform:translateX(-50%);transition:left .6s ease;left:0;box-shadow:0 1px 4px rgba(0,0,0,.15)}.sp-traffic-chart-wrap{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.sp-traffic-chart-label{font-size:.7rem;font-weight:600;color:var(--sp-gray-500,#64748b);white-space:nowrap;flex-shrink:0}.sp-traffic-chart{display:flex;align-items:flex-end;gap:2px;height:28px;flex:1;min-width:80px}.sp-traffic-chart-bar{flex:1;background:#dbeafe;border-radius:2px 2px 0 0;min-height:3px;position:relative;transition:background .3s}.sp-traffic-chart-bar.sp-chart-current{background:#3b82f6}.sp-traffic-chart-bar:hover{background:#93c5fd}.sp-traffic-chart-bar.sp-chart-current:hover{background:#2563eb}.sp-traffic-chart-bar .sp-chart-tooltip{display:none;position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);background:var(--sp-gray-900,#1e293b);color:var(--sp-white,#fff);font-size:.6rem;padding:2px 5px;border-radius:3px;white-space:nowrap;z-index:2}.sp-traffic-chart-bar:hover .sp-chart-tooltip{display:block}.entry-content:has(.sp-traffic-dark){position:relative}.sp-traffic-widget.sp-traffic-dark{background:0 0;border:none}.sp-traffic-dark .sp-traffic-title{color:rgba(255,255,255,.5)}.sp-traffic-dark .sp-traffic-bar-fill{border-color:#fff}.sp-traffic-dark .sp-traffic-chart-label{color:rgba(255,255,255,.7)}.sp-traffic-dark .sp-traffic-chart-bar{background:rgba(255,255,255,.2)}.sp-traffic-dark .sp-traffic-chart-bar.sp-chart-current{background:#60a5fa}.sp-traffic-dark .sp-traffic-chart-bar:hover{background:rgba(255,255,255,.35)}.sp-traffic-dark .sp-traffic-chart-bar.sp-chart-current:hover{background:#93c5fd}@media (max-width:480px){.sp-traffic-widget{flex-wrap:wrap;gap:6px 10px}.sp-traffic-bar{flex:1 1 auto;min-width:100px}.sp-traffic-chart-wrap{flex-basis:100%}}