/* ============================================================
   Performance / DCA time-series chart
   ============================================================ */
.chart-head { display: flex; align-items: flex-end; gap: 16px; padding: 14px var(--pad) 8px; flex-wrap: wrap; }
.chart-now { display: flex; flex-direction: column; gap: 3px; }
.chart-now .cn-val { font-size: 26px; font-weight: 600; letter-spacing: -0.025em; line-height: 1; }
.chart-now .cn-meta { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--fg-faint); }
.chart-head .spacer { flex: 1; }

.chart-legend { display: flex; flex-wrap: wrap; gap: 6px; }
.leg-chip {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-soft);
  background: var(--bg-0); font-size: 11.5px; font-weight: 500; color: var(--fg-muted);
  transition: opacity .15s ease, border-color .15s ease; user-select: none;
}
.leg-chip:hover { border-color: var(--line); }
.leg-chip .sw { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.leg-chip.off { opacity: 0.42; }
.leg-chip.off .sw { background: var(--fg-ghost) !important; }
.leg-chip .lc-val { color: var(--fg-faint); font-variant-numeric: tabular-nums; }

.chart-wrap { position: relative; padding: 4px var(--pad) var(--pad); }
.chart-svg { display: block; width: 100%; overflow: visible; }
.chart-svg text { font-family: var(--font); }
.grid-line { stroke: var(--line-soft); stroke-width: 1; }
.grid-zero { stroke: var(--line); stroke-width: 1; }
.axis-lbl { fill: var(--fg-ghost); font-size: 10px; }
.axis-y { fill: var(--fg-ghost); font-size: 10px; }
.band { stroke: var(--bg-1); stroke-width: 1; transition: opacity .2s ease; }
.invested-line { fill: none; stroke: var(--fg); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: 0.55; }
.lane-cap { fill: var(--fg-ghost); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; }
.buy-bar { transition: opacity .15s ease; }
.hover-line { stroke: var(--fg-muted); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.6; }
.hover-dot { stroke: var(--bg-1); stroke-width: 2; }

.chart-tip {
  position: absolute; z-index: 30; pointer-events: none;
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 10px 12px; min-width: 180px;
  box-shadow: 0 14px 34px -16px oklch(0 0 0 / 0.8);
  transform: translate(-50%, -100%); transition: opacity .1s ease;
}
.chart-tip .tip-date { font-size: 11px; color: var(--fg-faint); margin-bottom: 7px; }
.tip-row { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 2px 0; }
.tip-row .tr-sw { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.tip-row .tr-lbl { color: var(--fg-muted); }
.tip-row .tr-val { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; }
.tip-div { height: 1px; background: var(--line-soft); margin: 6px 0; }
.tip-buy { font-size: 11.5px; color: var(--accent); margin-top: 6px; display: flex; align-items: center; gap: 6px; }
.tip-buy svg { width: 12px; height: 12px; }

.tf-seg button { min-width: 38px; justify-content: center; }

/* asset-level DCA charts */
.asset-charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: start; }
@media (max-width: 1080px) { .asset-charts-grid { grid-template-columns: 1fr; } }
.ac-legend { display: flex; flex-wrap: wrap; gap: 16px; padding: 2px var(--pad) 4px; font-size: 11.5px; color: var(--fg-faint); }
.ac-legend span { display: inline-flex; align-items: center; gap: 7px; }
.ac-dot { width: 16px; height: 3px; border-radius: 2px; display: inline-block; }
.ac-dot.dash { background-image: none; position: relative; }
.ac-dot.dash::after { content: ""; }