.article-sales { margin: 30px 0; scroll-margin-top: 24px; }
.sales-context { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 20px 0 16px; font-size: 13px; }
.sales-context>span { color: var(--muted); font-size: 12px; }
.sales-context form { display: flex; gap: 8px; }
.sales-context select { max-width: 220px; }
.sales-filters { flex-wrap: wrap; }
.sales-filters label { font-size: 12px; min-width: 135px; flex: 1; }
.sales-filters select,.sales-filters input { margin-top: 7px; }
.sales-filters .sales-search { min-width: 200px; flex: 1.5; }
.sales-filters>button { align-self: flex-end; }
.sales-history { margin: 18px 0; }
.sales-history>summary { padding: 18px 24px; font-size: 14px; font-weight: 700; cursor: pointer; }
.sales-chart { padding: 12px 20px 20px; }
.sales-chart svg { display: block; width: 100%; }
.sales-bar { fill: var(--red); }
.sales-bar.partial { fill: #f4b2ad; stroke: #c93228; stroke-width: 2; stroke-dasharray: 6 4; }
.sales-bar:focus { outline: 2px solid #555; }
.sales-bar-value { text-anchor: middle; fill: #292929; font-size: 17px; font-weight: 700; }
.sales-partial-label { text-anchor: middle; fill: #777; font-size: 13px; }
.sales-empty { padding: 24px; color: #777; }
.sales-table { min-width: 680px; }
.sales-table th,.sales-table td { padding: 14px 18px; }
.sales-table .article-link { display: block; margin-top: 6px; font-size: 14px; }
.sales-unmatched { color: #8a6a28; font-size: 11px; margin-top: 4px; }
@media(max-width:780px) {
 .sales-context { flex-direction: column; align-items: flex-start; gap: 10px; }
 .sales-context form { width: 100%; }
 .sales-context select { flex: 1; }
 .sales-filters label,.sales-filters .sales-search { min-width: 100%; }
 .sales-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); }
 .sales-metrics>div { padding: 15px 10px; border-bottom: 0; border-right: 1px solid var(--line); }
 .sales-metrics strong { font-size: 23px; }
 .sales-metrics span,.sales-metrics small { font-size: 10px; }
 .sales-chart { padding-inline: 6px; overflow-x: auto; }
 .sales-chart svg { min-width: 460px; }
 .sales-history>summary { padding: 16px; }
}