.trend-link{color:var(--blue);font-size:12px;font-weight:650;text-decoration:none;white-space:nowrap}
.trend-heading{align-items:center}
.trend-summary strong{font-size:17px;line-height:1.45}
.notice.subtle{background:#f4f8fb;border-color:var(--line);color:var(--muted)}
.trend-panel{padding:0 20px 18px}
.trend-controls{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 0}
.metric-toggle,.range-toggle{display:flex;gap:5px;flex-wrap:wrap}
.metric-toggle button,.range-toggle button{height:34px;padding:0 13px;background:#edf3f7;color:#456078;font-size:13px}
.metric-toggle button.active,.range-toggle button.active{background:var(--blue);color:#fff}
.trend-chart{position:relative;width:100%;min-height:320px;border:1px solid var(--line);border-radius:8px;background:#fbfdff;overflow:hidden}
.trend-chart svg{display:block;width:100%;height:auto;min-height:320px;touch-action:manipulation;cursor:crosshair}
.chart-grid{stroke:var(--viz-grid,#dfe9ee);stroke-width:1}.chart-crosshair{stroke:var(--viz-crosshair,#3c7087);stroke-width:1;stroke-dasharray:4 4}
.chart-axis,.chart-empty{fill:var(--viz-axis,#6a7e8f);font-size:11px}
.chart-line{fill:none;stroke:var(--viz-cyan,#20b8c4);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.chart-point{fill:#fff;stroke:var(--blue);stroke-width:2;cursor:pointer}
.chart-point:hover,.chart-point:focus{fill:var(--viz-cyan,#20b8c4);outline:none}.chart-point-selected{fill:var(--viz-selection,#007f8b);stroke:#fff;stroke-width:2.5}
.chart-tooltip{position:absolute;transform:translate(-50%,-100%);padding:7px 10px;background:#173650;color:#fff;border-radius:5px;font-size:12px;white-space:nowrap;pointer-events:none}
.trend-legend{display:flex;justify-content:space-between;align-items:center;padding-top:12px;color:var(--muted);font-size:12px}
.trend-legend span{display:flex;align-items:center;gap:7px}
.trend-legend i{width:20px;height:3px;background:var(--blue);border-radius:2px}
.history-chart-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.cost-chart-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mini-chart{min-width:0;border:1px solid var(--line);border-radius:9px;background:#fbfdff;overflow:hidden}.mini-chart header{display:flex;align-items:center;gap:7px;padding:8px 10px;color:#39556c;font-size:12px}.mini-chart header i{width:18px;height:3px;border-radius:2px}.series-quantity header i{background:var(--viz-royal-blue,#2563d9)}.series-weight header i{background:var(--viz-magenta,#c74491)}.series-price header i{background:var(--viz-orange,#e07819)}.series-cost header i{background:var(--viz-violet,#6d50c7)}.mini-chart svg{display:block;width:100%;min-height:190px;touch-action:manipulation;cursor:crosshair}.history-grid{stroke:var(--viz-grid,#dfe9ee);stroke-width:1}.history-axis,.history-empty{fill:var(--viz-axis,#6a7e8f);font-size:10px}.history-line{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.history-crosshair{stroke:var(--viz-crosshair,#3c7087);stroke-width:1;stroke-dasharray:4 4}.history-selected-point{stroke:#fff;stroke-width:2}.history-inspect-strip{margin-top:10px}.cost-history-visualization{margin-bottom:16px}

/* Holding Trend combined chart (2026-09-09): the three previously
   separate mini-charts (持有數量/持股權重/股票價格, each with its own
   scale) are now ONE shared SVG with checkbox-toggled series and
   independent left/right/right2 axes -- see static/js/holding_trend.js.
   Position Cost History's own two-mini-chart layout (.history-chart-grid/
   .mini-chart/.cost-chart-grid above) is untouched and still used there. */
.trend-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:0 0 16px}
.metric-toggle-group{display:flex;flex-wrap:wrap;gap:6px 16px}
.metric-toggle-item{display:inline-flex;align-items:center;gap:7px;color:#456078;font-size:13px;cursor:pointer;user-select:none}
.metric-toggle-item input{width:16px;height:16px;margin:0;accent-color:var(--blue);cursor:pointer}
.metric-toggle-item small{color:var(--muted);font-size:11px}
.metric-dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.metric-quantity .metric-dot{background:var(--viz-royal-blue,#2563d9)}
.metric-weight .metric-dot{background:var(--viz-magenta,#c74491)}
.metric-price .metric-dot{background:var(--viz-orange,#e07819)}
.trend-combined-chart{position:relative;width:100%;min-height:360px;border:1px solid var(--line);border-radius:8px;background:#fbfdff;overflow:hidden}
.trend-combined-chart svg{display:block;width:100%;height:auto;min-height:360px;touch-action:manipulation;cursor:crosshair}
.axis-quantity{fill:var(--viz-royal-blue,#2563d9)}
.axis-price{fill:var(--viz-orange,#e07819)}
.axis-weight{fill:var(--viz-magenta,#c74491)}

@media(max-width:700px){.trend-controls,.trend-legend{align-items:flex-start;flex-direction:column}.trend-controls{gap:8px}.metric-toggle,.range-toggle{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px}.range-toggle{grid-template-columns:repeat(5,minmax(0,1fr))}.metric-toggle button,.range-toggle button{min-width:0;min-height:40px;padding-inline:4px}.trend-panel{padding-inline:10px}.trend-chart,.trend-chart svg{min-height:240px}.chart-tooltip{display:none}}
@media(max-width:700px){.history-chart-grid,.cost-chart-grid{grid-template-columns:1fr}.mini-chart svg{min-height:180px}.trend-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.cost-history-panel{padding-inline:10px}}
@media(max-width:700px){
  .trend-toolbar{flex-direction:column;align-items:stretch;gap:10px}
  .metric-toggle-group{width:100%;gap:8px 14px}
  .metric-toggle-item{min-height:32px}
  .range-toggle{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}
  .range-toggle button{min-width:0;min-height:40px;padding-inline:4px}
  .trend-combined-chart,.trend-combined-chart svg{min-height:280px}
}