.report-filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: .75rem;
  align-items: end;
  margin-bottom: 1rem;
}
.report-filters .field { margin: 0; }
.filter-actions { display: flex; gap: .5rem; padding-bottom: .05rem; }
.pop-thumbnail {
  display: block;
  width: 96px;
  height: 54px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #000;
}
.detail-grid {
  display: grid;
  grid-template-columns: minmax(110px, auto) minmax(160px, 1fr);
  gap: .4rem 1rem;
  max-width: 620px;
  margin: .75rem 0;
}
.detail-grid dt { font-weight: 650; color: var(--muted); }
.detail-grid dd { margin: 0; overflow-wrap: anywhere; }
.detail-grid pre { white-space: pre-wrap; margin: 0; }
.timeline-controls { display:flex; justify-content:space-between; align-items:end; gap:1rem; flex-wrap:wrap; margin-bottom:.8rem; }
.timeline-controls .field { min-width:280px; margin:0; }
.timeline-selectors { display:flex; align-items:end; gap:.75rem; flex-wrap:wrap; }
.timeline-selectors .field:last-child { min-width:160px; }
.timeline-legend { display:flex; gap:1.2rem; align-items:center; flex-wrap:wrap; margin:.5rem 0; font-size:.9rem; }
.timeline-legend i { display:inline-block; width:28px; height:3px; margin-right:.45rem; vertical-align:middle; }
.legend-viewers { background:var(--orange); }
.legend-attention { background:#72a88c; }
.legend-dwell { background:#3978c5; }
.legend-content { background:#17191b; }
.legend-playing { width:10px !important; height:10px !important; border-radius:50%; background:#d92d20; }
.timeline-legend #timeline-period { margin-left:auto; }
.timeline-chart-shell { position:relative; }
.timeline-viewport { position:relative; overflow-x:auto; overflow-y:hidden; background:#fff; border:1px solid var(--line); border-radius:12px; min-height:330px; scrollbar-color:var(--orange) #edf0f3; }
.timeline-viewport:focus { outline:2px solid #e6a06a88; outline-offset:2px; }
#timeline-canvas { height:330px; }
.audience-chart { display:block; color:#6d727b; font:12px Inter,Arial,sans-serif; }
.timeline-grid { stroke:#e7e9ec; stroke-width:1; }
.timeline-grid.vertical { stroke:#f0f1f3; }
.viewer-line { fill:none; stroke:var(--orange); stroke-width:5; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 1px #fff); }
.attention-line { fill:none; stroke:#72a88c; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
.dwell-line { fill:none; stroke:#3978c5; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
.sample-point { cursor:pointer; stroke:#fff; stroke-width:2; }
.sample-point.viewers { fill:var(--orange); }
.sample-point.attention { fill:#72a88c; }
.sample-point.dwell { fill:#3978c5; }
.content-line { stroke:#17191b; stroke-width:4; }
.content-marker { fill:#17191b; stroke:#fff; stroke-width:2; cursor:pointer; }
.content-marker.playing { fill:#d92d20; }
.content-marker:hover,.content-marker:focus { fill:var(--orange); outline:none; }
.timeline-hover-guide { stroke:#17191b; stroke-width:2; stroke-dasharray:5 5; pointer-events:none; }
.timeline-hover-guide[hidden] { display:none; }
.axis-label { fill:#6d727b; font-weight:650; }
.timeline-fixed-scale { position:absolute; z-index:5; top:1px; right:1px; width:64px; height:330px; overflow:hidden; pointer-events:none; color:#555b63; font:12px Inter,Arial,sans-serif; border-radius:0 11px 11px 0; }
.timeline-fixed-scale svg { display:block; overflow:visible; }
.timeline-fixed-scale rect { fill:#fff; fill-opacity:.94; }
.timeline-fixed-scale line { stroke:#9da3aa; stroke-width:1; }
.timeline-fixed-scale .scale-axis { stroke:#737a82; }
.timeline-fixed-scale text { fill:#555b63; font-weight:650; }
.timeline-fixed-scale.left { left:1px; right:auto; border-radius:11px 0 0 11px; }
.timeline-fixed-scale.left text { fill:#3978c5; }
.timeline-crosshair > line { stroke:#596068; stroke-width:1.5; stroke-dasharray:4 4; pointer-events:none; }
.timeline-crosshair[hidden],#timeline-value-flag[hidden] { display:none; }
#timeline-value-flag circle { fill:var(--orange); stroke:#fff; stroke-width:2; }
#timeline-value-flag rect { fill:var(--orange); filter:drop-shadow(0 2px 4px #0004); }
#timeline-value-flag text { fill:#17191b; font-weight:750; font-size:12px; }
.timeline-tooltip { position:fixed; z-index:30; width:270px; padding:.75rem; background:#202326; color:#fff; border:1px solid #42474c; border-radius:9px; box-shadow:0 8px 28px #0005; pointer-events:none; }
.timeline-tooltip img { display:block; width:100%; height:135px; object-fit:cover; background:#000; border-radius:5px; margin-bottom:.65rem; }
.timeline-tooltip strong,.timeline-tooltip span { display:block; }
.timeline-tooltip span { color:#d8dade; font-size:.82rem; margin-top:.25rem; }
#timeline-list-panel { margin-top:1rem; }
#timeline-list-panel h3 { margin-top:1.2rem; }
@media (max-width: 1100px) { .report-filters { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 850px) { .report-filters { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .report-filters { grid-template-columns: 1fr; } .timeline-selectors,.timeline-controls .field { min-width:100%; width:100%; } .timeline-legend #timeline-period { width:100%; margin-left:0; } }