.portfolio-visuals { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(290px,1fr); gap:18px; margin-bottom:22px; }
.portfolio-visuals > article { min-width:0; }
.chart-currency { font-size:10px; color:#9db2a6; border:1px solid #34463b; border-radius:4px; padding:3px 7px; }
.history-summary { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:19px 22px 6px; }
.history-summary .capital-value { margin:0; font-size:clamp(26px,2.7vw,38px); letter-spacing:-1px; }
.history-summary > div:last-child { display:grid; gap:3px; }
.history-summary small { font-size:9px; color:#8b9b91; }
.history-change { font-size:12px; font-variant-numeric:tabular-nums; }
.chart-periods { display:flex; justify-content:flex-end; gap:4px; padding:12px 22px 2px; }
.chart-periods button { border:1px solid transparent; background:transparent; color:#8da397; border-radius:5px; padding:5px 10px; font-size:10px; min-height:31px; }
.chart-periods button[aria-pressed="true"] { border-color:#3c624d; color:#b5e6ca; background:#21382a; }
.history-plot { position:relative; min-height:200px; padding:0 10px; }
.history-plot svg { display:block; width:100%; height:auto; }
.chart-axis { fill:#8ea596; font-size:11px; font-family:system-ui,sans-serif; }
.chart-empty { min-height:200px; display:grid; place-items:center; text-align:center; padding:30px; color:#9aada1; font-size:12px; }
.history-inspection { padding:8px 22px 16px; display:grid; grid-template-columns:1fr auto; gap:5px 10px; align-items:center; }
.history-inspection label { font-size:10px; color:#869d8e; }
.history-inspection output { font-size:11px; color:#c0d6c7; font-variant-numeric:tabular-nums; }
.history-inspection input { grid-column:1/-1; min-height:24px; margin:3px 0 0; }
.history-card .desk-footnote { font-size:10px; }
.history-card .desk-footnote > span { display:block; margin-top:4px; }
.allocation-visual { width:200px; height:200px; position:relative; margin:4px auto 0; }
.allocation-visual svg { width:100%; height:100%; }
.allocation-center { pointer-events:none; position:absolute; inset:64px 35px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; }
.allocation-center strong { font-size:25px; font-weight:550; color:#d6e6dc; font-variant-numeric:tabular-nums; }
.allocation-center span { font-size:11px; color:#a6bbad; max-width:115px; text-align:center; overflow:hidden; text-overflow:ellipsis; }
.allocation-legend { max-height:205px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#34503e transparent; padding:0 15px 14px; }
.allocation-entry { display:grid; grid-template-columns:7px minmax(0,1fr) auto auto; gap:9px; align-items:center; width:100%; padding:9px 6px; border-top:1px solid #25362b; background:transparent; text-align:left; font-size:11px; }
.allocation-entry.highlighted { background:#1c3022; }
.allocation-entry > i { width:7px; height:7px; border-radius:2px; }
.allocation-entry > span { overflow:hidden; text-overflow:ellipsis; color:#d4e2d9; }
.allocation-entry small { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#7e9888; font-size:9px; margin-top:2px; }
.allocation-entry b { font-weight:500; color:#b5cbbb; white-space:nowrap; font-variant-numeric:tabular-nums; }
.allocation-entry em { font-style:normal; font-size:10px; min-width:42px; text-align:right; color:#8faf99; }
@media(max-width:1100px){ .portfolio-visuals { grid-template-columns:minmax(0,1fr); } .allocation-legend { max-height:220px; } }
@media(max-width:620px){
 .portfolio-visuals { gap:14px; }
 .history-summary { padding:16px 16px 4px; }
 .history-summary .capital-value { font-size:30px; }
 .history-plot { min-height:140px; padding:0; }
 .history-plot svg { min-height:150px; }
 .history-inspection { grid-template-columns:1fr; padding-inline:16px; }
 .history-inspection output { font-size:11px; }
 .chart-periods { justify-content:flex-start; padding-inline:16px; }
 .chart-periods button { min-height:40px; }
 .allocation-entry { min-height:45px; font-size:11px; gap:7px; }
 .allocation-entry em { min-width:37px; }
}
