/* Scoped to the traffic card; other analytics charts retain their styles. */
.stats-dashboard .card.traffic-card {
    padding: 22px 24px 0;
    overflow: hidden;
    border-color: rgba(148, 163, 184, .13);
    background: radial-gradient(ellipse at 5% 0%, rgba(52, 211, 153, .035), transparent 55%), #0f1216;
}
.traffic-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.traffic-title { margin: 0; color: #f1f5f9; font-size: 15px; font-weight: 700; letter-spacing: -.025em; }
.traffic-description { margin: 6px 0 0; color: #8b95a4; font-size: 11px; line-height: 1.6; }
.traffic-periods { display: flex; flex-shrink: 0; gap: 3px; padding: 4px; border: 1px solid #252c34; border-radius: 10px; background: #0a0d11; }
.traffic-period {
    border: 0; border-radius: 7px; padding: 8px 13px; color: #98a2b1; background: transparent;
    font: inherit; font-size: 11px; font-weight: 600; line-height: 1.3; white-space: nowrap; cursor: pointer;
    transition: color .18s, background .18s, box-shadow .18s;
}
.traffic-period:hover { color: #e2e8f0; background: #192027; }
.traffic-period.is-active { color: #6ee7b7; background: #17342c; box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .18), 0 2px 5px #0003; }
.traffic-period:focus-visible, .traffic-svg:focus-visible { outline: 2px solid #6ee7b7; outline-offset: 3px; }
.traffic-overview { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 24px 0 12px; }
.traffic-metrics { display: flex; gap: 30px; }
.traffic-metric + .traffic-metric { padding-left: 30px; border-left: 1px solid #252c34; }
.traffic-metric-label { display: flex; align-items: center; gap: 7px; color: #a8b1bd; font-size: 11px; line-height: 1.5; }
.traffic-dot { display: inline-block; flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 8px #34d39926; }
.traffic-metric-views .traffic-dot, .traffic-dot-views { background: #818cf8; box-shadow: 0 0 8px #818cf826; }
.traffic-metric-value { display: block; margin-top: 6px; color: #f1f5f9; font-size: 29px; font-weight: 650; line-height: 1.15; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.traffic-range { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; color: #8b95a4; font-size: 10px; font-variant-numeric: tabular-nums; }
.traffic-granularity { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid #29313a; border-radius: 6px; color: #aeb7c4; background: #171c22; }
.traffic-granularity::before { content: ''; width: 9px; height: 9px; border: 1px solid #7d899a; border-radius: 2px; background: linear-gradient(to top, #7d899a 35%, transparent 35%); }
.traffic-plot { position: relative; height: 248px; min-width: 0; margin: 0 -4px; }
.traffic-svg { display: block; width: 100%; height: 100%; overflow: visible; border-radius: 6px; touch-action: pan-y; }
.traffic-svg text { font-family: inherit; fill: #8b95a4; font-size: 10px; font-variant-numeric: tabular-nums; }
.traffic-svg .traffic-grid { stroke: #242b33; stroke-width: 1; stroke-dasharray: 3 5; }
.traffic-svg .traffic-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.traffic-svg .traffic-crosshair { stroke: #7d899a; stroke-width: 1; stroke-dasharray: 4 4; }
.traffic-tooltip {
    position: absolute; z-index: 5; width: max-content; min-width: 182px; max-width: calc(100% - 16px);
    padding: 12px 14px; border: 1px solid #394350; border-radius: 11px;
    background: rgba(18, 24, 31, .97); box-shadow: 0 12px 32px #0006; pointer-events: none; color: #dce3ed; font-size: 11px;
}
.traffic-tooltip[hidden], .traffic-empty[hidden] { display: none; }
.traffic-tooltip-date { margin-bottom: 10px; padding-bottom: 9px; border-bottom: 1px solid #ffffff12; color: #f1f5f9; font-weight: 650; }
.traffic-tooltip > div:not(:first-child) { display: flex; justify-content: space-between; gap: 20px; margin-top: 7px; }
.traffic-tooltip span { display: inline-flex; align-items: center; gap: 7px; color: #aab5c4; }
.traffic-tooltip strong { font-weight: 650; font-variant-numeric: tabular-nums; }
.traffic-empty { position: absolute; inset: 12px 0 35px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; text-align: center; pointer-events: none; background: radial-gradient(ellipse, #0f1216e8 25%, #0f121600 75%); }
.traffic-empty-icon { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 5px; border: 1px solid #29453c; border-radius: 12px; background: #152920; color: #6ee7b7; font-size: 23px; }
.traffic-empty strong { color: #cbd5e1; font-size: 12px; font-weight: 600; }
.traffic-empty > span:last-child { color: #8b95a4; font-size: 11px; }
.traffic-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 4px -24px 0; padding: 12px 24px; border-top: 1px solid #ffffff0c; color: #8b95a4; font-size: 10px; line-height: 1.5; background: #ffffff01; }
.traffic-snapshot { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.traffic-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.traffic-noscript { position: absolute; inset: 40% 10px auto; color: #a8b1bd; text-align: center; font-size: 12px; }
@media (max-width: 639px) {
    .stats-dashboard .card.traffic-card { padding: 17px 15px 0; }
    .traffic-header { flex-direction: column; gap: 14px; }
    .traffic-periods { width: 100%; }
    .traffic-period { flex: 1; padding: 9px 8px; }
    .traffic-overview { flex-wrap: wrap; gap: 15px; margin-top: 20px; }
    .traffic-metrics { width: 100%; gap: 24px; }
    .traffic-metric { flex: 1; min-width: 0; }
    .traffic-metric + .traffic-metric { padding-left: 20px; }
    .traffic-metric-label { font-size: 10px; }
    .traffic-metric-value { font-size: 25px; overflow-wrap: anywhere; }
    .traffic-range { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; gap: 6px; }
    .traffic-plot { height: 220px; }
    .traffic-footer { flex-direction: column; align-items: flex-start; gap: 5px; margin: 4px -15px 0; padding: 10px 15px; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
    .traffic-period { transition: none; }
}