.panel.sales-trend-panel {
  position: relative;
  margin-bottom: 16px;
  padding: 22px 24px 18px;
  border-radius: 14px;
  background: linear-gradient(155deg, #fffdf9 0%, #fcf9f2 100%);
  border: 1px solid #e4dfd3;
  box-shadow: 0 3px 14px rgba(46, 49, 35, .025);
}
.sales-trend-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:22px; }
.sales-trend-heading b { font-size:14px; font-weight:650; letter-spacing:.02em; }
.sales-trend-heading p { margin:5px 0 0; font-size:11px; color:#92958a; }
.sales-trend-range { color:#92958a; font:11px/1.5 var(--tl-mono,monospace); font-variant-numeric:tabular-nums; padding:5px 9px; border:1px solid #eae6dd; border-radius:7px; white-space:nowrap; }
.sales-trend-range { display:flex; align-items:center; gap:8px; background:#fffdf8; cursor:pointer; }
.sales-trend-range:hover { border-color:#d48a67; color:#a35b39; }
.sales-trend-range:focus-visible { outline:2px solid #dc653e; outline-offset:2px; }
.sales-trend-caption { display:flex; align-items:center; justify-content:space-between; gap:9px; padding:16px 2px 2px; color:#969d8e; font-size:10px; }
.sales-trend-caption small { font-size:10px; color:#969d8e; }
.sales-trend-legend { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:0 0 18px; border-bottom:1px solid rgba(111,123,98,.1); }
.st-legend-item { padding:0 24px; border-left:1px solid rgba(111,123,98,.13); }
.st-legend-item:first-child { padding-left:0; border-left:0; }
.st-legend-value { display:block; color:var(--st-color); font:600 21px/1.3 var(--tl-mono,monospace); letter-spacing:-.04em; font-variant-numeric:tabular-nums; margin-top:7px; overflow-wrap:anywhere; }
#salesTrendWrap { position:relative; }
#salesTrend { display:block; width:100%; overflow:visible; touch-action:pan-y; outline:none; }
#salesTrend:focus-visible { outline:2px solid rgba(220,101,62,.4); outline-offset:4px; border-radius:8px; }
.st-axis { font:10px var(--tl-mono,monospace); fill:#899184; font-variant-numeric:tabular-nums; }
.st-empty { font:12px system-ui,sans-serif; fill:#9da293; }
#salesTrend > .st-curve { filter:drop-shadow(0 2px 2px rgba(220,101,62,.12)); }
.st-metric-name { display:flex; gap:6px; align-items:center; font-size:10.5px; color:#858e7f; }
.st-metric-name > i { width:5px; height:5px; background:var(--st-color); border-radius:50%; }
.st-metric-date { display:block; font-size:9px; color:#a0a697; margin-top:3px; }
#salesTrendTip { border:1px solid rgba(255,255,255,.1); border-radius:11px; padding:14px 16px; background:rgba(34,47,41,.96); box-shadow:0 8px 30px rgba(32,43,35,.16); min-width:min(190px, calc(100% - 8px)); max-width:calc(100% - 8px); box-sizing:border-box; white-space:normal; backdrop-filter:blur(12px); }
#salesTrendTip[hidden] { display:none; }
#salesTrendTip b { color:#c1ccbe; letter-spacing:.03em; font-size:11px; padding-bottom:7px; margin-bottom:6px; border-bottom:1px solid rgba(255,255,255,.1); }
#salesTrendTip .r { margin-top:8px; gap:9px; }
#salesTrendTip .r i { width:6px; height:6px; flex:0 0 6px; border-radius:50%; }
#salesTrendTip .r span { font-size:12px; overflow-wrap:anywhere; }
#salesTrendTip .r .st-missing-value { color:#aeb9ab; font:10px system-ui,sans-serif; }
.st-tooltip-note { padding-top:9px; margin-top:10px; border-top:1px solid rgba(255,255,255,.1); font-size:9px; color:#9eac9c; }
@media (max-width:1000px) {
  .st-legend-item { padding:0 16px; }
  .st-legend-value { font-size:18px; }
}
@media (max-width:640px) {
  .panel.sales-trend-panel { padding:17px 13px 13px; border-radius:11px; }
  .sales-trend-heading { gap:8px; margin-bottom:20px; }
  .sales-trend-heading b { font-size:13px; }
  .sales-trend-heading p { font-size:10px; }
  .sales-trend-range { padding:4px 6px; font-size:9px; }
  .sales-trend-legend { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 10px; padding-bottom:16px; }
  .st-legend-item { padding:0 12px; }
  .st-legend-item:nth-child(odd) { padding-left:0; border-left:0; }
  .st-legend-value { font-size:18px; }
  .sales-trend-caption { font-size:9px; padding-top:12px; }
  .sales-trend-caption small { font-size:9px; }
  #salesTrend > .st-curve { filter:none; }
}