/* Serious analytical polish. Existing card structure stays intact; this file only adds trend UI and tones down visual noise. */
.prediction-card{background:linear-gradient(155deg,#1d231d 0%,#181d18 58%,#141814 100%);box-shadow:0 14px 30px rgba(0,0,0,.14)}
.panel{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.012));box-shadow:none}
.pick-box{background:linear-gradient(135deg,rgba(255,255,255,.024),rgba(33,42,35,.16));box-shadow:none}
.mini-card{box-shadow:none}
.bar{height:8px;background:rgba(7,10,8,.70);box-shadow:none}
.bar-home,.bar-away{opacity:.94}
.legend-row{background:rgba(255,255,255,.014)}

/* Compact performance trend: useful analytical strip, not the dominant element. */
.performance-trend{margin:8px 0 8px;padding:8px 10px 7px;border:0;border-radius:6px;background:linear-gradient(180deg,rgba(255,255,255,.024),rgba(9,13,10,.14));box-shadow:none}
.trend-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:5px}
.trend-title-wrap h3{margin:0;color:var(--text);font-size:8px;line-height:1.2;letter-spacing:.05em;font-weight:900}
.trend-title-wrap p{margin:2px 0 0;color:#7e877f;font-size:6.5px;line-height:1.3}
.trend-index{flex:0 0 auto;color:#707970;font-size:5.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;padding-top:1px}
.trend-legend{display:flex;align-items:center;gap:12px;min-width:0;margin-bottom:5px}
.trend-legend-item{display:flex;align-items:center;gap:5px;min-width:0;color:#aeb6ae;font-size:6.5px;font-weight:800}
.trend-legend-item strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:7.5px;color:#cfd5cf}
.trend-legend-item.selected strong{color:var(--selected-green)}
.trend-legend-item.opponent strong{color:var(--opponent-red)}
.trend-dot{width:6px;height:6px;border-radius:50%;flex:0 0 auto}
.trend-legend-item.selected .trend-dot{background:var(--selected-green);box-shadow:0 0 0 2px rgba(121,196,135,.10)}
.trend-legend-item.opponent .trend-dot{background:var(--opponent-red);box-shadow:0 0 0 2px rgba(200,116,116,.09)}
.trend-selected-tag{margin-left:1px;color:#6f796f;font-size:5.5px;font-weight:900;letter-spacing:.035em;text-transform:uppercase}
.trend-chart-shell{display:grid;grid-template-columns:22px minmax(0,1fr);gap:4px;align-items:stretch}
.trend-y-axis{position:relative;height:86px;color:#606960;font-size:5.5px;font-weight:800}
.trend-y-axis span{position:absolute;right:0;transform:translateY(-50%)}
.trend-y-axis span:nth-child(1){top:8%}.trend-y-axis span:nth-child(2){top:30%}.trend-y-axis span:nth-child(3){top:52%}.trend-y-axis span:nth-child(4){top:74%}
.trend-plot{position:relative;height:86px;overflow:hidden;border-radius:4px;background:linear-gradient(180deg,rgba(255,255,255,.009),rgba(0,0,0,.065))}
.trend-plot svg{display:block;width:100%;height:100%}
.trend-grid-line{stroke:rgba(150,158,151,.065);stroke-width:1;vector-effect:non-scaling-stroke}
.trend-fill{fill:var(--selected-green);opacity:.035}
.trend-line-selected{fill:none;stroke:var(--selected-green);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;opacity:.98}
.trend-line-opponent{fill:none;stroke:var(--opponent-red);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;opacity:.92}
.trend-point-selected{fill:#182019;stroke:var(--selected-green);stroke-width:1.9;vector-effect:non-scaling-stroke}
.trend-point-opponent{fill:#182019;stroke:var(--opponent-red);stroke-width:1.6;vector-effect:non-scaling-stroke}
.trend-x-labels{display:grid;grid-template-columns:repeat(5,1fr);margin:3px 0 0 26px;color:#626b63;font-size:5.5px;font-weight:800;text-align:center}
.trend-scale-note{margin-top:3px;color:#646d65;font-size:5.5px;line-height:1.25;text-align:right}

/* Responsive compact sizing across desktop, tablet and phone. */
@media(max-width:900px){
  .trend-plot,.trend-y-axis{height:82px}
}
@media(max-width:680px){
  .performance-trend{padding:7px 7px 6px;margin:7px 0}
  .trend-head{gap:7px;margin-bottom:4px}
  .trend-title-wrap h3{font-size:7.5px}
  .trend-title-wrap p{font-size:6px}
  .trend-index{font-size:5px}
  .trend-legend{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;margin-bottom:4px}
  .trend-legend-item{gap:4px;font-size:6px}
  .trend-legend-item strong{font-size:6.5px}
  .trend-selected-tag{display:none}
  .trend-chart-shell{grid-template-columns:18px minmax(0,1fr);gap:3px}
  .trend-plot,.trend-y-axis{height:74px}
  .trend-x-labels{margin-left:21px;font-size:5px}
  .trend-scale-note{font-size:5px}
}
@media(max-width:420px){
  .trend-plot,.trend-y-axis{height:68px}
  .trend-title-wrap p{display:none}
  .trend-legend-item strong{max-width:105px}
}

/* Ultra-thin luminous trend: no circular markers anywhere in the graph. */
.trend-fill{opacity:.015}
.trend-line-selected{
  stroke-width:.60;
  opacity:1;
  filter:drop-shadow(0 0 2.4px var(--selected-green));
}
.trend-line-opponent{
  stroke-width:.55;
  stroke-dasharray:2.2 1.6;
  stroke-linecap:butt;
  opacity:.96;
  filter:drop-shadow(0 0 2.2px var(--opponent-red));
}
.trend-point-selected,
.trend-point-opponent{display:none!important}
.trend-dot{
  width:10px;
  height:1px;
  border-radius:0;
}
.trend-legend-item.selected .trend-dot{
  background:var(--selected-green);
  box-shadow:0 0 4px var(--selected-green);
}
.trend-legend-item.opponent .trend-dot{
  background:var(--opponent-red);
  box-shadow:0 0 4px var(--opponent-red);
}