/* Sharp film trend: smooth hairlines, restrained translucent films, no markers. */
.trend-plot{
  background:#151c21!important;
  border:1px solid rgba(145,158,166,.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.012);
}

.trend-grid-line{
  stroke:rgba(142,156,164,.11)!important;
  stroke-width:.55!important;
  vector-effect:non-scaling-stroke;
}
.trend-grid-line.vertical{stroke:rgba(142,156,164,.075)!important}

/* Film is deliberately light so the lines stay dominant. */
.trend-area-selected{
  fill:var(--selected-green);
  opacity:.085;
}
.trend-area-opponent{
  fill:var(--opponent-red);
  opacity:.060;
}

.trend-line-selected{
  fill:none;
  stroke:var(--selected-green)!important;
  stroke-width:.68!important;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:1!important;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 1.55px var(--selected-green)) drop-shadow(0 0 3.2px rgba(139,225,155,.32))!important;
}

.trend-line-opponent{
  fill:none;
  stroke:var(--opponent-red)!important;
  stroke-width:.55!important;
  stroke-dasharray:2.2 1.45!important;
  stroke-linecap:butt!important;
  stroke-linejoin:round;
  opacity:.94!important;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 1.25px rgba(200,116,116,.72))!important;
}

.trend-point-selected,
.trend-point-opponent{display:none!important}

/* Legend matches the chart language: solid green, dashed red. */
.trend-legend-item.selected .trend-dot{
  width:11px!important;
  height:1px!important;
  border-radius:0!important;
  background:var(--selected-green)!important;
  box-shadow:0 0 3.5px rgba(139,225,155,.58)!important;
}
.trend-legend-item.opponent .trend-dot{
  width:11px!important;
  height:1px!important;
  border-radius:0!important;
  background:repeating-linear-gradient(90deg,var(--opponent-red) 0 2px,transparent 2px 3.4px)!important;
  box-shadow:0 0 2.4px rgba(200,116,116,.38)!important;
}