.traffic-page{max-width:1120px}.traffic-hero{display:flex;justify-content:space-between;align-items:center;padding:34px;background:radial-gradient(circle at 90% 10%,#ffb74d2c,transparent 38%),linear-gradient(135deg,#102033,#111b2b)}.traffic-hero h1{font-size:clamp(29px,5vw,48px);margin:5px 0}.traffic-count{min-width:150px;padding:16px;border:1px solid #ffbd6038;border-radius:18px;background:#ffb74d0b;text-align:right}.traffic-count>*{display:block}.traffic-count strong{font-size:32px;color:#ffd184}.traffic-count span{font-weight:750}.traffic-count small{margin-top:5px;color:var(--muted)}
.traffic-controls{margin:14px 0 20px;padding:14px}.traffic-search{display:flex;align-items:center;gap:9px;padding:11px 13px;border:1px solid var(--line);border-radius:12px;background:#ffffff06}.traffic-search input{width:100%;border:0;outline:0;background:transparent;color:#fff;font:inherit}.traffic-options{display:flex;align-items:end;gap:10px;padding-top:11px}.traffic-options label{display:flex;align-items:center;gap:7px;color:#9fb3c3;font-size:11px}.traffic-options select,.traffic-options button{min-height:38px;padding:7px 10px;border:1px solid var(--line);border-radius:10px;background:#102238;color:#fff;font:inherit;font-size:11px}.traffic-options button{margin-left:auto;cursor:pointer}
.traffic-summary{display:flex;gap:14px;align-items:center;margin-bottom:18px;padding:18px}.traffic-summary>span{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:#ffb74d16;font-size:24px}.traffic-summary h2{margin:3px 0;font-size:18px}.traffic-list{display:grid;gap:10px}.traffic-item{--accent:#ffba67;position:relative;display:grid;grid-template-columns:54px 1fr auto;gap:14px;align-items:start;padding:18px 20px;overflow:hidden}.traffic-item:before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--accent)}.traffic-icon{display:grid;place-items:center;width:50px;height:50px;border-radius:15px;background:color-mix(in srgb,var(--accent) 15%,transparent);font-size:24px}.traffic-location{display:flex;align-items:center;gap:6px;margin-bottom:6px;color:#8ee7ff;font-size:11px;font-weight:800}.traffic-location span{color:#6f8da3}.traffic-item h2{font-size:15px;margin:0 0 5px}.traffic-item p{margin:0;color:#c2d1dc;font-size:12px;line-height:1.55}.traffic-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.traffic-meta span,.traffic-map{padding:5px 8px;border-radius:8px;background:#ffffff08;color:#91a8ba;font-size:10px;text-decoration:none}.traffic-map{color:#8ee7ff}.traffic-side{text-align:right}.traffic-distance{display:block;color:#ffd184;font-size:13px;white-space:nowrap}.traffic-side small{display:block;margin-top:5px;color:var(--muted);font-size:10px}.traffic-empty{text-align:center;color:var(--muted);padding:35px}.traffic-explain{display:flex;gap:14px;margin-top:18px;padding:18px}.traffic-explain:before{content:"ⓘ";color:#73cfff;font-size:22px}.traffic-explain h2{margin:0;font-size:15px}.traffic-explain p{color:var(--muted);font-size:11px;line-height:1.55}.traffic-explain .source{margin-bottom:0}
@media(max-width:650px){.traffic-page{padding-top:12px}.traffic-hero{align-items:flex-start;padding:23px}.traffic-hero .muted{font-size:10px}.traffic-count{min-width:96px;padding:11px}.traffic-count strong{font-size:24px}.traffic-options{display:grid;grid-template-columns:1fr 1fr}.traffic-options label{display:grid}.traffic-options button{grid-column:1/-1;width:100%;margin:0}.traffic-item{grid-template-columns:46px 1fr;padding:15px}.traffic-icon{width:44px;height:44px}.traffic-side{grid-column:2;text-align:left;display:flex;gap:8px;align-items:center}.traffic-summary{padding:15px}}