/* 效益模拟 — the shared performance card (js/app/perf-chart.js). App tokens only; both themes. */
/* Benchmark lines are numbered in document order (perf-bench-1 = SPY today, perf-bench-2 = QQQ, …): each number owns a token
   derived from the app palette and its own dash pattern, so two lines stay apart in both themes and without colour. */
.perf-card{--perf-line:color-mix(in srgb,var(--accent) 80%,var(--text));--perf-bench-1:var(--muted);--perf-bench-2:var(--blue);--perf-bench-3:var(--yellow);--perf-bench:var(--perf-bench-1);
  /* Wins / losses / drawdown are returns, so they follow the change-colour setting (--pos / --neg, T-12), not bull / bear. */
  --perf-win:var(--pos,var(--green));--perf-loss:var(--neg,var(--red));--perf-open:var(--faint);--perf-dd:var(--neg,var(--red));
  display:block;container-type:inline-size;padding:16px;border:1px solid var(--border);border-radius:14px;background:var(--surface);min-width:0;font-variant-numeric:tabular-nums}
.perf-grid{display:grid;grid-template-columns:minmax(150px,200px) minmax(0,2.4fr) minmax(150px,200px) minmax(160px,1.1fr);gap:16px;align-items:start;min-width:0}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .perf-card{--perf-line:var(--accent)}}
:root[data-theme=dark] .perf-card{--perf-line:var(--accent)}
.perf-grid>*{min-width:0}
.perf-card.is-loading .perf-figure,.perf-card.is-loading .perf-profile{opacity:.55;transition:opacity .15s}
.perf-card--wide .perf-grid{grid-template-columns:minmax(0,1fr)}.perf-card--wide .perf-figure{grid-column:1/-1;grid-row:2}.perf-card--wide .perf-subject{grid-column:1/-1}
.perf-title{margin:0;font-size:16px;line-height:1.3}
.perf-subject{display:grid;gap:8px;justify-items:start}
.perf-subject-text{margin:0;font-size:13px;color:var(--muted)}
.perf-headline{margin:0;display:grid;gap:2px}
.perf-headline-label{font-size:12px;color:var(--muted)}
.perf-hero{font-size:28px;line-height:1.1;letter-spacing:-.02em;font-weight:750;font-variant-numeric:normal}
.perf-hero.return-up{color:var(--pos,var(--green))}.perf-hero.return-down{color:var(--neg,var(--red))}.perf-hero.return-flat{color:var(--text)}
.perf-modes{display:flex;flex-wrap:wrap;gap:6px}
.perf-mode-help{margin:0;max-width:52ch;line-height:1.45;overflow-wrap:anywhere}
.perf-mode{display:inline-flex;align-items:center;gap:4px;min-height:32px;padding:3px 10px;border:1px solid var(--border);border-radius:999px;background:transparent;color:var(--text);font:inherit;font-size:13px;cursor:pointer}
.perf-mode[aria-pressed=true]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);font-weight:700}
.perf-line{margin:0;font-size:13px}.perf-period{margin:0}
.perf-controls{display:flex;flex-wrap:wrap;gap:10px 16px}.perf-control{display:grid;gap:4px}.perf-control-label{font-size:12px;color:var(--muted)}
.perf-seg{display:inline-flex;border:1px solid var(--border);border-radius:999px;overflow:hidden;flex:none}
.perf-seg>button{border:0;background:transparent;color:var(--muted);padding:5px 10px;font:inherit;font-size:12px;cursor:pointer;min-height:36px;white-space:nowrap}
.perf-seg>button[aria-pressed=true]{background:var(--bg-2);color:var(--text);font-weight:600}
.perf-figure{margin:0;position:relative;display:grid;gap:8px}
.perf-curve{display:block;width:100%;height:auto;color:var(--text);touch-action:pan-y;overflow:visible}
.perf-curve:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.perf-grid{stroke:var(--border);stroke-width:1}.perf-zero{stroke:color-mix(in srgb,var(--text) 35%,var(--border));stroke-width:1}
.perf-axis{font-size:11px;fill:var(--muted);font-variant-numeric:tabular-nums}
.perf-area{fill:var(--perf-line);fill-opacity:.1}
.perf-line{stroke:var(--perf-line);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.perf-bench{stroke:var(--perf-bench);stroke-width:1.5;stroke-dasharray:4 3;stroke-linejoin:round}
.perf-bench-2{stroke:var(--perf-bench-2);stroke-dasharray:1.5 3.5;stroke-linecap:round}
.perf-bench-3{stroke:var(--perf-bench-3);stroke-dasharray:7 3 1.5 3}
.perf-drawdown{fill:var(--perf-dd);fill-opacity:.09}
.perf-mark{stroke:var(--surface);stroke-width:2}.perf-mark.is-win{fill:var(--perf-win)}.perf-mark.is-loss{fill:var(--perf-loss)}.perf-mark.is-open,.perf-mark.is-plain,.perf-mark.is-flat{fill:var(--perf-open)}
.perf-mark.is-short{stroke:var(--text)}
.perf-hit{fill:transparent;stroke:none;cursor:pointer}
.perf-mark-hit:focus{outline:none}.perf-mark-hit:focus .perf-mark,.perf-mark-hit:hover .perf-mark{r:5.5}
.perf-extreme{font-size:11px;font-weight:700;fill:var(--text);paint-order:stroke;stroke:var(--surface);stroke-width:3px;stroke-linejoin:round}
.perf-end{font-size:11px;font-weight:600;fill:var(--text);paint-order:stroke;stroke:var(--surface);stroke-width:3px}
.perf-end-dot{fill:var(--perf-line);stroke:var(--surface);stroke-width:2}
.perf-cursor{stroke:var(--text);stroke-opacity:.35;stroke-width:1}.perf-cursor-dot{fill:var(--perf-line);stroke:var(--surface);stroke-width:2}
.perf-tip{position:absolute;z-index:4;max-width:min(280px,calc(100% - 8px));padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);box-shadow:var(--shadow);font-size:12px;line-height:1.45;pointer-events:none;transform:translate(10px,0)}
.perf-tip.is-right{transform:translate(calc(-100% - 10px),0)}
.perf-tip[hidden]{display:none}
.perf-tip-date{display:block;color:var(--muted);margin-bottom:2px}
.perf-tip-row{display:flex;align-items:center;gap:6px}.perf-tip-row b{font-size:13px;font-variant-numeric:tabular-nums}
.perf-tip-marks{list-style:none;margin:4px 0 0;padding:4px 0 0;border-top:1px solid var(--border);display:grid;gap:2px}
.perf-tip-marks li{display:flex;align-items:center;gap:6px}
.perf-key{display:inline-block;width:16px;height:0;border-top:2px solid var(--perf-line);vertical-align:middle;flex:none}
.perf-key-bench{border-top:2px dashed var(--perf-bench)}
.perf-key-bench-2{border-top-style:dotted;border-top-color:var(--perf-bench-2)}
.perf-key-bench-3{border-top-style:double;border-top-width:3px;border-top-color:var(--perf-bench-3)}
.perf-key-dd{height:10px;border:0;background:var(--perf-dd);opacity:.18;border-radius:2px}
.perf-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--perf-open);border:2px solid var(--surface);box-shadow:0 0 0 1px var(--border);flex:none}
.perf-dot.is-win{background:var(--perf-win)}.perf-dot.is-loss{background:var(--perf-loss)}
.perf-legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--muted)}
.perf-legend-key{display:inline-flex;align-items:center;gap:6px}
.perf-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:6px}
.perf-stat{display:grid;gap:1px;padding:6px 8px;border:1px solid var(--border);border-radius:8px;background:var(--bg-2);min-width:0}
.perf-stat-label{font-size:11px;line-height:1.2;color:var(--muted)}
.perf-stat-value{font-size:15px;font-variant-numeric:tabular-nums}.perf-stat-value .return-badge{font-size:inherit}
.perf-stat-note{font-size:11px;color:var(--muted)}
.perf-col-title{margin:0 0 6px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.perf-profile{display:grid;gap:4px}
.perf-radar{display:block;width:100%;max-width:260px;height:auto;overflow:visible}
.perf-radar-grid{fill:none;stroke:var(--border)}
.perf-radar-shape{fill:color-mix(in srgb,var(--accent) 25%,transparent);stroke:var(--accent);stroke-width:1.5}
.perf-radar-dot{fill:var(--accent)}
.perf-radar-label{font-size:10px;fill:var(--muted)}
.perf-recent-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.perf-recent-row{display:grid;grid-template-columns:auto auto minmax(0,1fr);grid-template-areas:"date tk ret" "label label label";gap:2px 8px;align-items:center;font-size:13px}
.perf-recent-date{grid-area:date}.perf-recent-row .ticker-chip{grid-area:tk}.perf-recent-label{grid-area:label}.perf-recent-row .return-badge,.perf-recent-status{grid-area:ret}
.perf-recent-date{color:var(--muted);white-space:nowrap}
.perf-recent-label{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.perf-recent-label:empty{display:none}
.perf-recent-row .return-badge,.perf-recent-status{justify-self:end}
.perf-recent-quote{grid-area:auto;grid-column:1/-1;margin:0;font-size:13px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.perf-recent-source{grid-area:auto;grid-column:1/-1;font-size:12px;justify-self:start}
.perf-state{margin:0;padding:24px 0;color:var(--muted);font-size:13px}
.perf-basis{margin:12px 0 0;font-size:11px;color:var(--muted)}
.perf-recent .csim-opinion{display:flex;flex-wrap:wrap;gap:4px 8px}.perf-recent .csim-quote{flex-basis:100%}
.perf-page{display:grid;gap:12px}.perf-page-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;align-items:flex-start}.perf-page-head h2{margin:0;font-size:20px}
.perf-books{display:grid;gap:12px}
.instant-sim{margin:6px 0 10px}.instant-sim .perf-card{padding:12px;gap:12px}
.instant-sim-toggle{border:1px solid var(--border);border-radius:999px;background:transparent;color:var(--muted);padding:5px 12px;font:inherit;font-size:12px;cursor:pointer;min-height:32px}
.instant-sim-toggle[aria-pressed=true]{border-color:var(--accent);color:var(--text);font-weight:600;background:color-mix(in srgb,var(--accent) 12%,transparent)}
/* The card's own width picks the layout (it lives in full pages, the studio's narrow pane and phone columns alike). */
@container (max-width:1040px){.perf-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.perf-figure{grid-column:1/-1;grid-row:2}.perf-subject{grid-column:1/-1}}
@container (max-width:600px){.perf-grid{grid-template-columns:minmax(0,1fr);gap:12px}.perf-figure{order:-1;grid-column:auto;grid-row:auto}.perf-subject{grid-column:auto}.perf-hero{font-size:26px}
  .perf-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.perf-radar{max-width:240px}.perf-card--wide .perf-figure{grid-row:auto}}
@media(max-width:760px){.perf-card{padding:12px}.perf-seg>button,.perf-mode,.instant-sim-toggle{min-height:44px}.perf-seg>button{font-size:13px;padding:5px 12px}}
@media(prefers-reduced-motion:reduce){.perf-card *{transition:none!important;animation:none!important}}