/* «روند افزایش قیمت» pop-up (price-trend.js): a route that draws itself, a marker sailing it to today's price,
   stations that light up as it passes, the price bubble, and a dashed gold market line. */
:root{--trend-route:#1f7a7f;--trend-route-2:#36a3a6;--trend-gold:#d99a12;--trend-up:#15a34a;--trend-down:#dc2f3c;--trend-bg:linear-gradient(160deg,#eef7fb 0%,#f6fbfd 45%,#fff4e6 100%)}
:root[data-theme=dark]{--trend-route:#46d3cc;--trend-route-2:#7ee6df;--trend-gold:#f5c04a;--trend-up:#26d07c;--trend-down:#ff5f6d;--trend-bg:linear-gradient(160deg,#10202a 0%,#0f1824 55%,#1d1a16 100%)}
@media(min-width:801px){.trend-card{width:min(980px,calc(100vw - 48px))!important;max-width:980px}}
.trend-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:12px;padding-inline-end:36px}
.trend-head h2{margin:2px 0 0}
.trend-quote{display:grid;justify-items:end;gap:4px}
.trend-quote strong{font-size:24px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums}
.trend-change{font-size:13px;font-weight:800;padding:3px 10px;border-radius:999px}
.trend-change:empty{display:none}
.trend-change.up{color:var(--trend-up);background:color-mix(in srgb,var(--trend-up) 13%,transparent)}
.trend-change.down{color:var(--trend-down);background:color-mix(in srgb,var(--trend-down) 13%,transparent)}
.trend-tools{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.trend-ranges{margin:0}
.trend-legend{display:flex;gap:14px;flex-wrap:wrap}
.trend-key{display:inline-flex!important;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--text-2);cursor:pointer}
.trend-key input{width:15px;height:15px;min-height:0!important;margin:0;accent-color:var(--trend-route)}
.trend-key::after{content:'';order:-1;width:18px;height:3px;border-radius:2px}
.trend-key.ours::after{background:var(--trend-route)}
.trend-key.market::after{background:repeating-linear-gradient(90deg,var(--trend-gold) 0 5px,transparent 5px 8px)}
.trend-plot{position:relative;padding:8px 6px 0;border-radius:16px;background:var(--trend-bg);border:1px solid var(--line);overflow:hidden}
.trend-chart{min-height:250px}
.trend-chart svg{display:block;width:100%;height:auto;overflow:visible;touch-action:pan-y}
.trend-grid{stroke:color-mix(in srgb,var(--text) 9%,transparent);stroke-width:1}
.trend-axis{fill:var(--muted);font-size:10.5px;font-family:var(--font)}
.trend-route{fill:none;stroke:color-mix(in srgb,var(--trend-route) 35%,transparent);stroke-width:2;stroke-dasharray:3 6;stroke-linecap:round}
.trend-done{fill:none;stroke:var(--trend-route);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:0 99999;filter:drop-shadow(0 4px 8px color-mix(in srgb,var(--trend-route) 30%,transparent))}
.trend-area{fill:url(#trendFill)}
.fill-a{stop-color:var(--trend-route);stop-opacity:.22}.fill-b{stop-color:var(--trend-route);stop-opacity:0}
.trend-market{fill:none;stroke:var(--trend-gold);stroke-width:1.8;stroke-dasharray:5 4;opacity:.85}
.trend-station .dot{fill:var(--panel);stroke:color-mix(in srgb,var(--trend-route) 45%,transparent);stroke-width:1.6;transition:fill .25s,stroke .25s}
.trend-station .ring{fill:var(--panel);stroke:color-mix(in srgb,var(--trend-route) 45%,transparent);stroke-width:1.8;transition:fill .25s,stroke .25s}
.trend-station .tick{fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .25s}
.trend-station.passed .dot{fill:var(--trend-route);stroke:var(--trend-route)}
.trend-station.passed .ring{fill:var(--trend-route);stroke:var(--trend-route)}
.trend-station.passed .tick{opacity:1}
.trend-label{fill:var(--text-2);font-size:11px;font-weight:700;font-family:var(--font)}
.trend-label.price{fill:var(--muted);font-size:10.5px;font-weight:600}
.trend-boat circle{fill:#14181f;stroke:#fff;stroke-width:2;filter:drop-shadow(0 6px 12px rgba(15,23,42,.35))}
:root[data-theme=dark] .trend-boat circle{fill:#eef6f7;stroke:#0f1824}
.trend-boat path{fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
:root[data-theme=dark] .trend-boat path{stroke:#0f1824}
.trend-bubble rect{fill:var(--trend-route);filter:drop-shadow(0 4px 10px color-mix(in srgb,var(--trend-route) 40%,transparent))}
.trend-bubble text{fill:#fff;font-size:11.5px;font-weight:800;font-family:var(--font)}
:root[data-theme=dark] .trend-bubble text{fill:#0b1a1f}
.trend-cross{stroke:var(--text-2);stroke-width:1;stroke-dasharray:2 3;opacity:.6}
.trend-tip{position:absolute;width:190px;display:grid;gap:4px;padding:10px 12px;border-radius:12px;background:var(--glass-strong,var(--panel));border:1px solid var(--line-2);box-shadow:var(--shadow-lg);font-size:11.5px;direction:rtl;pointer-events:none;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.trend-tip[hidden]{display:none}
.trend-tip strong{margin-bottom:2px;font-size:12.5px;color:var(--text)}
.trend-tip div{display:flex;justify-content:space-between;gap:8px;color:var(--muted)}
.trend-tip b{color:var(--text);font-weight:700}
.trend-empty{padding:80px 16px;text-align:center;direction:rtl}
.trend-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:12px}
.trend-fact{display:grid;gap:4px;padding:11px 13px;border-radius:12px;background:var(--panel-2);border:1px solid var(--line)}
.trend-fact span{font-size:11.5px;font-weight:600;color:var(--muted)}
.trend-fact strong{font-size:14px;font-weight:800;color:var(--text)}
.trend-note{margin:10px 0 0;font-size:11.5px;line-height:1.9}
@media(max-width:800px){.trend-quote strong{font-size:20px}.trend-chart{min-height:220px}.trend-head{padding-inline-end:28px}}