.hero-grid-performance {
  grid-template-columns: 1.35fr 1fr 1fr .85fr;
}

.hero-grid > div span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  margin-top: 5px;
}

.hero-grid .primary-metric {
  border-color: #baff2030;
  background: linear-gradient(145deg, #baff200d, #080c09a8);
}

.positive { color: var(--lime) !important; }
.negative { color: var(--red) !important; }
.neutral { color: var(--text) !important; }

.performance-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(340px, .8fr);
  gap: 16px;
  margin: 16px 0;
}
.performance-grid > * { min-width: 0; }

.chart-card, .pnl-card { min-height: 430px; }
.chart-quote { text-align: right; }
.chart-quotes { display: flex; gap: 22px; }
.chart-quote strong, .chart-quote small { display: block; }
.chart-quote strong { font-size: 22px; }
.chart-quote small { font-size: 9px; color: var(--muted); letter-spacing: .1em; }
.chart-quote strong { font-variant-numeric: tabular-nums; border-radius: 5px; }
.chart-change { display: block; font-size: 10px; margin-top: 6px; font-variant-numeric: tabular-nums; }
.chart-toolbar { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; gap: 10px; }
#chart-live { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
#chart-live:before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); margin-right: 7px; }
#chart-live.is-live:before { background: var(--lime); box-shadow: 0 0 8px #baff2080; }
.chart-windows { display: flex; gap: 4px; }
.chart-windows button { padding: 5px 10px; font-size: 11px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; }
.chart-windows button[aria-pressed="true"] { color: var(--lime); background: #baff2012; border-color: #baff202e; }
.chart-tooltip { position: absolute; z-index: 1; left: 12px; right: 12px; top: 0; padding: 7px; background: #101b16f2; border: 1px solid #ffffff22; border-radius: 6px; font-size: 10px; pointer-events: none; font-variant-numeric: tabular-nums; }

.chart-wrap {
  height: auto;
  aspect-ratio: 940 / 420;
  min-height: 300px;
  margin-top: 10px;
  position: relative;
  border: 1px solid #ffffff0a;
  border-radius: 14px;
  background: linear-gradient(180deg, #baff2005, transparent);
  overflow: hidden;
}

.chart-wrap svg { display: block; width: 100%; height: 100%; }
.chart-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 12px; }
.chart-gridline { stroke: #ffffff12; stroke-width: 1; }
.chart-area { fill: #baff2009; }
.chart-line { fill: none; stroke: var(--lime); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 5px #baff2077); }
.chart-point { fill: var(--bg); stroke: var(--lime); stroke-width: 3; }
.chart-nav-line { fill: none; stroke: var(--cyan); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 5px #22d3ee55); }
.chart-nav-point { fill: var(--bg); stroke: var(--cyan); stroke-width: 3; }
.chart-action-point { fill: var(--amber); stroke: var(--bg); stroke-width: 1; }
.chart-nav-label { fill: var(--cyan); }
.chart-pane-title { font-size: 10px; font-weight: 600; letter-spacing: 1px; }
.nav-text { fill: var(--cyan); }
.price-text { fill: var(--lime); }
.nav-stroke { stroke: var(--cyan); }
.price-stroke { stroke: var(--lime); }
.chart-fill.nav-fill { fill: #22d3ee0b; }
.chart-fill.price-fill { fill: #baff200b; }
.chart-line, .chart-nav-line { stroke-width: 1.8; filter: none; }
.chart-last-line { stroke-dasharray: 4 5; opacity: .3; stroke-width: .8; }
.chart-crosshair { stroke: #dde8df80; stroke-dasharray: 3 4; pointer-events: none; }
.chart-core { fill: var(--bg); stroke-width: 2; }
.chart-pulse { fill: none; stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.is-live .chart-pulse { animation: chart-breathe 1.8s ease-out infinite; }
.is-live .price-stroke .chart-pulse { animation-delay: -.9s; }
@keyframes chart-breathe { 0% { transform: scale(.7); opacity: .85; } 100% { transform: scale(2.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .is-live .chart-pulse { animation: none; opacity: .35; } }
.chart-legend { display: flex; gap: 16px; align-items: center; margin-top: 12px; color: var(--muted); font-size: 9px; }
.chart-legend span:before { content: ""; display: inline-block; width: 13px; height: 2px; vertical-align: middle; margin-right: 6px; background: var(--line); }
.chart-legend .nav-key:before { background: var(--cyan); }
.chart-legend .price-key:before { background: var(--lime); }
.chart-label { fill: var(--muted); font-size: 10px; }
.chart-footer { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 10px; margin-top: 9px; }
.chart-footer span:nth-child(2) { color: var(--text); }

.pnl-tree { margin-top: 20px; }
.pnl-root {
  border: 1px solid #baff2040;
  background: #baff200b;
  border-radius: 13px;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.pnl-root small { color: var(--muted); }
.pnl-root:after { content: ""; position: absolute; left: 24px; top: 100%; height: 20px; border-left: 1px solid #526055; }
.pnl-branches { margin: 20px 0 0 24px; border-left: 1px solid #526055; padding-left: 18px; display: flex; flex-direction: column; gap: 9px; }
.pnl-node { position: relative; border: 1px solid var(--line); border-radius: 11px; padding: 11px 12px; display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 8px 12px; background: #090d0a; }
.pnl-node:before { content: ""; position: absolute; right: 100%; top: 23px; width: 19px; border-top: 1px solid #526055; }
.pnl-node span, .pnl-node b, .pnl-node small { display: block; }
.pnl-node small { font-size: 9px; color: var(--muted); margin-top: 3px; line-height: 1.35; }
.pnl-node > strong { font-size: 12px; text-align: right; white-space: nowrap; }
.pnl-node.pending > strong { color: var(--amber); }
.pnl-leaves { grid-column: 1 / -1; width: 100%; padding-top: 9px; margin-top: 4px; border-top: 1px solid var(--line); display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
.pnl-leaves span { font-size: 9px; color: var(--muted); }
.pnl-leaves b { font-size: 9px; color: var(--amber); margin-top: 2px; }
.asset-location { display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 16px; font-size: 10px; }
.asset-location span { color: var(--muted); }
.asset-location b { text-align: right; }

@media (max-width: 900px) {
  .performance-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-grid-performance { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .hero-grid-performance { grid-template-columns: 1fr; }
  .chart-card, .pnl-card { min-height: auto; }
  .chart-wrap { min-height: 230px; }
  .chart-quotes { flex-wrap: wrap; gap: 12px; }
  .chart-quote strong { font-size: 18px; }
  .chart-card .section-head { flex-wrap: wrap; gap: 14px; }
  .chart-footer span:nth-child(2) { display: none; }
}
@media (max-width: 600px) {
  .chart-wrap { aspect-ratio: 520 / 420; min-height: 0; }
  .chart-label, .chart-pane-title { font-size: 14px; }
  .chart-quotes { width: 100%; justify-content: space-between; }
  .chart-quote { text-align: left; }
  .chart-change { font-size: 9px; }
  .chart-toolbar { flex-wrap: wrap; }
  .chart-footer { font-size: 9px; }
}