.chart{display:grid;gap:8px;overflow:visible}
.trend-panel{overflow:hidden}
.chart::before,.chart::after{position:absolute;z-index:0;top:12%;bottom:14%;width:38%;content:"";pointer-events:none;opacity:.5;background:repeating-linear-gradient(118deg,transparent 0 15px,rgb(var(--accent-rgb)/.055) 16px 17px,transparent 18px 31px);mask-image:radial-gradient(ellipse at center,#000 0 18%,transparent 76%);transform:translate3d(0,0,0);animation:chart-side-ray-drift 8s linear infinite alternate}
.chart::before{left:-12%}
.chart::after{right:-12%;animation-delay:-4s}
.chart svg{position:relative;z-index:1;overflow:visible;touch-action:pan-y}
@keyframes chart-side-ray-drift{from{transform:translate3d(0,-3px,0);opacity:.34}to{transform:translate3d(0,3px,0);opacity:.5}}
.chart-value-label{fill:#8d9cb1;font:10px Inter,system-ui,sans-serif;font-variant-numeric:tabular-nums;pointer-events:none}
.chart-mark{stroke:#141a23;stroke-width:2;pointer-events:none}
.chart-mark-turnover{fill:#607b9f}
.chart-mark-profit{fill:#97b5ff}
.chart-hit{fill:transparent;cursor:pointer;touch-action:pan-y}
.chart-hit:focus{fill:#8eafff14;stroke:#83a8ff;stroke-width:1;outline:none}
.chart-detail{display:flex;min-height:42px;flex-wrap:wrap;align-items:center;gap:7px 16px;padding:9px 12px;border:1px solid #29374c;border-radius:10px;background:#101720;color:#c7d3e4;font-size:11px;font-variant-numeric:tabular-nums}
.chart-detail-date{margin-right:auto;color:#e2eaff;font-size:12px}
.chart-detail-sales,.chart-detail-profit,.chart-detail-orders{white-space:nowrap}
.chart-detail-sales:before,.chart-detail-profit:before{display:inline-block;width:7px;height:7px;margin:0 6px 1px 0;border-radius:50%;content:""}
.chart-detail-sales:before{background:#607b9f}
.chart-detail-profit:before{background:#97b5ff}
.chart-detail-profit{color:#c6d7ff}
.chart-draw{stroke-dasharray:var(--path-length);stroke-dashoffset:var(--path-length);transition:stroke-dashoffset .72s cubic-bezier(.22,.8,.28,1)}
.chart-draw.is-drawn{stroke-dashoffset:0}
.chart-turnover.chart-draw{transition-duration:.9s;transition-delay:.08s}
@media(max-width:600px){.chart{min-height:0}.chart::before,.chart::after{width:28%;opacity:.38}.chart svg{height:200px}.chart-value-label{font-size:9px}.chart-detail{gap:6px 11px;padding:9px;font-size:10px}.chart-detail-date{width:100%;margin:0 0 2px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.chart::before,.chart::after{animation:none;transform:none;opacity:.34}}