.tr-chart {
  width: 100%;
  margin-top: 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--shadow-card);
}
.tr-chart svg {
  display: block;
  width: 100%;
  height: auto;
}
.tr-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.tr-area {
  fill: var(--accent);
  opacity: 0.08;
}
.tr-axis {
  stroke: var(--border);
  stroke-width: 1;
}
.tr-tick {
  stroke: var(--border-soft, var(--border));
  stroke-width: 0.5;
  opacity: 0.6;
}
.tr-tick-label {
  fill: var(--fg-dim);
  font-family: var(--mono);
  font-size: 11px;
}
.tr-axis-label {
  fill: var(--fg-dim);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tr-hints {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--fg-dim);
}
.tr-hints .item {
  background: var(--bg-soft);
  border: 1px solid var(--border-soft, var(--border));
  border-radius: 6px;
  padding: 4px 8px;
  animation: fade-up 0.3s ease both;
}
.tr-hints .item .key {
  color: var(--accent);
  margin-right: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11px;
}