.traffic-section { margin: 0 0 10px; }
.traffic-section-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.traffic-section-head h3 { margin: 0; color: var(--ink); font: 600 17px Georgia; }
.traffic-period { display: block; margin-top: 4px; color: #9b711e; font-size: 10px; text-transform: capitalize; }
.traffic-section-head small { color: var(--muted); font-size: 9px; }
.traffic-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.traffic-card { min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 13px; background: linear-gradient(145deg,#fffef9,#fffaf0); box-shadow: var(--shadow); }
.traffic-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.traffic-card-title { display: flex; align-items: center; gap: 9px; }
.traffic-card-icon { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 8px; color: #fff; font-size: 13px; font-weight: 900; }
.traffic-card-title h4 { margin: 0; color: var(--ink); font: 600 14px Georgia; }
.traffic-card-title small { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; }
.traffic-total { color: var(--ink); font: 600 20px Georgia; }
.traffic-line-chart { width: 100%; margin-top: 7px; overflow: hidden; border: 1px solid #2e3b50; border-radius: 9px; background: linear-gradient(145deg,#202d42,#1c283a); }
.traffic-line-chart svg { display: block; width: 100%; height: 183px; }
.traffic-grid-line { stroke: rgba(177,198,226,.13); stroke-width: 1; }
.traffic-y-label,.traffic-x-label { fill: #aeb9ca; font: 8px Arial,sans-serif; }
.traffic-y-label { text-anchor: end; }
.traffic-x-label { text-anchor: middle; }
.traffic-line { fill: none; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-opacity: .72; }
.traffic-point { fill: #202d42; stroke-width: 2.2; stroke-opacity: .86; outline: none; }
.traffic-point.zero-value { fill: #202d42; stroke-width: 2; }
.traffic-point.has-value { fill: #fff; stroke-width: 3; }
.traffic-point:hover,.traffic-point:focus { fill: var(--traffic-line); r: 5px; }
.traffic-value-label { font: 900 10px Arial,sans-serif; text-anchor: middle; paint-order: stroke; stroke: #202d42; stroke-width: 3px; }
.traffic-empty-label { fill: #8f9caf; font: 10px Arial,sans-serif; text-anchor: middle; }
.traffic-legend { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 5px; color: var(--muted); font-size: 7px; font-weight: 800; }
.traffic-legend i { width: 22px; height: 3px; border-radius: 99px; }
.traffic-legend-item { display: inline-flex; align-items: center; gap: 5px; margin: 0 5px; }
.traffic-bookings .traffic-card-icon { background: #e6a124; }
.traffic-listings .traffic-card-icon { background: #4c91ff; }
.traffic-guests .traffic-card-icon { background: #45c18a; }
.traffic-users .traffic-card-icon { background: #ef5d66; }
.traffic-empty { grid-column: 1/-1; padding: 25px; border: 1px solid var(--line); border-radius: 15px; background: #fff; color: var(--muted); text-align: center; }
@media(max-width:900px){.traffic-grid{grid-template-columns:1fr}}
@media(max-width:520px){.traffic-section-head{display:block}.traffic-section-head small{display:block;margin-top:6px}.traffic-card{padding:13px}.traffic-line-chart svg{min-height:155px}.traffic-total{font-size:21px}}