.article-trend { margin: 30px 0; scroll-margin-top: 24px; }
.trend-heading { padding: 0 0 18px; }
.text-link { font-size: 13px; color: var(--red); font-weight: 700; }
.trend-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); background: white; border: 1px solid var(--line); border-radius: 4px; margin-bottom: 18px; }
.trend-metrics>div { padding: 22px 24px; border-right: 1px solid var(--line); }
.trend-metrics>div:last-child { border-right: 0; }
.trend-metrics span { display: block; color: var(--muted); font-size: 12px; }
.trend-metrics strong { display: block; font-size: 28px; margin: 8px 0; line-height: 1.2; }
.trend-metrics small { color: #666; font-size: 11px; }
.change-up { color: #b62029; }
.change-down { color: #16744f; }
.change-neutral { color: #666; }
.change-missing { white-space: normal; max-width: 150px; margin-left: auto; font-size: 11px; font-weight: 400; }
.lowest-caption { color: #16744f; font-size: 11px; margin-top: 5px; }
.offer-history-table { min-width: 860px; }
.offer-history-table th,.offer-history-table td { padding-inline: 16px; }
.offer-date { min-width: 140px; font-size: 12px; }
.supplier-prices { margin: 24px 0; scroll-margin-top: 24px; }
.supplier-price-table { table-layout: fixed; min-width: 440px; }
.supplier-price-table th:first-child { width: 45%; }
.supplier-price-table th:nth-child(2) { width: 22%; }
.supplier-price-table td,.supplier-price-table th { padding: 13px 23px; }
.price-empty { padding: 0 23px 20px; font-size: 14px; }
.missing-offers { border-top: 1px solid var(--line); }
.missing-offers summary { padding: 16px 23px; cursor: pointer; color: var(--red); font-size: 13px; font-weight: 700; }
.missing-offers summary small { display: inline; color: var(--muted); font-size: 12px; font-weight: 400; margin-left: 12px; }
.missing-offers .when-open,.missing-offers[open] .when-closed { display: none; }
.missing-offers[open] .when-open { display: inline; }
.missing-offers td { color: var(--muted); }
.chart-details { margin: 0 24px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.chart-details summary { padding: 12px 0; cursor: pointer; font-weight: 700; }
.chart-details p { line-height: 1.7; margin-bottom: 10px; }
.trend-panel h3 { font-size: 17px; margin: 0; }
.trend-panel .section-heading { padding-bottom: 10px; }
.trend-panel .section-heading p { font-size: 13px; margin-top: 7px; }
.price-chart { padding: 8px 24px 0; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 12px 22px; margin: 6px 0 20px; }
.legend-item { display: flex; align-items: center; gap: 7px; margin: 0; cursor: pointer; font-size: 13px; font-weight: 400; }
.legend-item input { width: 14px; height: 14px; margin: 0; padding: 0; accent-color: var(--series-color); }
.legend-item small { display: inline; font-size: 10px; color: #777; }
.legend-swatch { display: inline-block; width: 16px; height: 4px; border-radius: 2px; background: var(--series-color); flex-shrink: 0; }
.series-yuasa { --series-color: #e20714; }
.series-varta { --series-color: #2067a5; }
.series-panther { --series-color: #735498; }
.series-banner { --series-color: #9a6e13; }
.series-neutral { --series-color: #6b6b6b; }
.chart-scroll { overflow-x: auto; }
.price-plot { width: 100%; min-width: 640px; display: block; overflow: visible; }
.plot-grid { stroke: #e8e8e8; stroke-width: 1; }
.plot-label { fill: #666; font-size: 15px; }
.plot-label-y { text-anchor: end; }
.plot-label-x { text-anchor: middle; }
.plot-unit { fill: #666; font-size: 13px; }
.plot-line { stroke: var(--series-color); stroke-width: 2.5; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.plot-point { stroke: var(--series-color); stroke-width: 2.5; fill: #fff; cursor: pointer; }
.plot-point:hover,.plot-point:focus { fill: var(--series-color); stroke-width: 4; outline: none; }
.plot-series.is-hidden { display: none; }
.chart-tooltip { min-height: 32px; margin: 8px 0 0; font-size: 12px; color: #555; }
.chart-note { font-size: 12px; color: #666; border-top: 1px solid var(--line); padding-top: 12px; margin-bottom: 12px; }
.chart-method { padding: 16px 24px 20px; font-size: 12px; color: #666; line-height: 1.7; }
.chart-empty { padding: 24px; text-align: center; color: #666; }
.chart-empty>span { display: block; color: #bbb; font-size: 40px; }
.chart-empty b { display: block; font-size: 15px; }
.chart-empty p { font-size: 13px; margin-top: 8px; }
.trend-status { padding: 14px 18px; background: #eee; border-left: 3px solid #aaa; font-size: 13px; color: #555; margin-top: 14px; }
.trend-filters { align-items: flex-end; }
.trend-filters label { font-size: 12px; flex: 1; max-width: none!important; }
.trend-filters label select { margin-top: 8px; }
.trend-filters label:last-of-type { flex: 1.8; }
.trend-period { display: flex; justify-content: space-between; gap: 16px; font-size: 12px; color: #666; margin: 20px 0; }
.brand-trend-cards { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin-bottom: 24px; }
.brand-trend-card { padding: 21px; border-top: 3px solid var(--series-color); }
.brand-trend-name { display: flex; align-items: center; gap: 8px; }
.brand-trend-name h2 { font-size: 17px; }
.brand-trend-card>strong { font-size: 30px; display: block; line-height: 1.3; margin: 18px 0 6px; }
.brand-trend-card p { color: #666; font-size: 12px; }
.brand-trend-card small { color: #777; margin-top: 10px; min-height: 36px; line-height: 1.6; }
.brand-trend-counts { display: flex; justify-content: space-between; gap: 6px; color: #666; font-size: 11px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.chart-kind { padding: 5px 9px; background: #f1f1f1; font-size: 10px; letter-spacing: 1px; white-space: nowrap; }
.trend-information { padding: 20px 24px; border-left: 3px solid var(--red); background: #efefef; margin: 22px 0; font-size: 14px; }
.trend-information p { color: #666; font-size: 13px; margin-top: 8px; max-width: 850px; line-height: 1.75; }
.trend-method { margin-top: 22px; }
.trend-method summary { cursor: pointer; font-size: 14px; font-weight: 700; padding: 20px 24px; }
.trend-method>div { padding: 0 24px 22px; color: #666; font-size: 13px; }
.trend-method p+p { margin-top: 12px; }
.quarter-values { min-width: 840px; }
.detail-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.detail-actions .detail-jump { margin-bottom: 0; }
@media(max-width:1200px) {
  .brand-trend-cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .trend-metrics>div { padding: 20px 16px; }
}
@media(max-width:780px) {
  .trend-heading { flex-wrap: wrap; align-items: flex-start; }
  .trend-metrics { grid-template-columns: 1fr; }
  .trend-metrics>div { border-right: 0; border-bottom: 1px solid var(--line); }
  .trend-metrics>div:last-child { border-bottom: 0; }
  .price-chart { padding: 8px 16px 0; }
  .chart-method { padding: 14px 16px 18px; }
  .trend-panel .section-heading { flex-wrap: wrap; gap: 10px; }
  .trend-period { flex-direction: column; gap: 6px; }
  .brand-trend-cards { gap: 10px; }
  .brand-trend-card { padding: 16px 12px; }
  .brand-trend-card>strong { font-size: 26px; }
  .brand-trend-counts { flex-wrap: wrap; }
  .trend-filters label { min-width: 100%!important; }
  .trend-information { padding: 18px; }
  .supplier-price-table { min-width: 0; }
  .supplier-price-table th:first-child { width: 44%; }
  .supplier-price-table th:nth-child(2) { width: 26%; }
  .supplier-price-table td,.supplier-price-table th { padding: 12px; }
  .supplier-price-table td:first-child { font-size: 12px; overflow-wrap: anywhere; }
  .supplier-price-table .offer-date { min-width: 0; font-size: 11px; }
  .missing-offers summary { padding: 15px 16px; }
  .missing-offers summary small { font-size: 11px; margin-left: 8px; }
  .chart-details { margin-inline: 16px; }
}

.series-bosch { --series-color: #25746e; }
.series-palidium { --series-color: #8e5ba6; }
.series-dynamax { --series-color: #b95616; }
.series-drive-plus { --series-color: #466e28; }
.series-bsg { --series-color: #895b51; }
.series-bts-turbo { --series-color: #4f56a8; }
.series-continental { --series-color: #916c00; }
.series-energizer { --series-color: #476576; }
.series-exide { --series-color: #923554; }
.series-lucas { --series-color: #4d7653; }
.series-jpn { --series-color: #6b50a1; }
.series-maxgear { --series-color: #a2442d; }
.series-motrio { --series-color: #327b92; }
.series-napa { --series-color: #6c6c28; }
.brand-trend-overview { margin: 8px 0 24px; }
.brand-trend-overview>summary { cursor: pointer; font-size: 14px; font-weight: 700; padding: 12px 0; }
.brand-trend-overview .brand-trend-cards { margin-top: 12px; }