.output { background: var(--result-tile); border-radius: 11px; padding: 14px 14px 12px; margin-top: 12px; }
.output-parts { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: 15px; }
.output-parts li { display: grid; grid-template-columns: 1fr auto 4.5em; gap: 10px; align-items: baseline; }
.output-part-value, .output-part-share, .output-total-value { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.output-part-share { color: var(--result-muted); font-weight: 500; }
.output-total { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--result-border); font-size: 15px; display: flex; justify-content: space-between; gap: 10px; }
.output-table summary { cursor: pointer; margin-top: 6px; font-size: 14px; font-weight: 650; }
.output-table > table { margin-top: 8px; display: block; max-height: 320px; overflow: auto; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.output-table th, .output-table td { padding: 4px 10px 4px 0; text-align: right; white-space: nowrap; }
.output-table thead th { position: sticky; top: 0; background: var(--result-tile); color: var(--result-muted); font-weight: 600; }
.output-table tbody th { text-align: left; font-weight: 500; color: var(--result-muted); }
.output { --s1: #f59e0b; --s2: #5b8def; --s3: #36c98d; --s4: #c4a7ff; --s5: #f26b6b; --s6: #e2e8f0; }
.chart { display: block; margin-top: 10px; overflow: visible; }
.chart text { font-size: 12px; fill: var(--result-muted); stroke: none; font-variant-numeric: tabular-nums; }
.chart-rule { stroke: var(--result-border); stroke-width: 1; opacity: .5; }
.chart-line path { fill: none; stroke-width: 2.5; stroke-linejoin: round; }
.chart .s1 { fill: var(--s1); stroke: var(--s1); } .chart .s2 { fill: var(--s2); stroke: var(--s2); } .chart .s3 { fill: var(--s3); stroke: var(--s3); }
.chart .s4 { fill: var(--s4); stroke: var(--s4); } .chart .s5 { fill: var(--s5); stroke: var(--s5); } .chart .s6 { fill: var(--s6); stroke: var(--s6); }
.chart-line .s1, .chart-line .s2, .chart-line .s3, .chart-line .s4, .chart-line .s5, .chart-line .s6 { fill: none; }
.chart-area path, .chart-bars rect, .chart-bar rect, .chart-grid rect { stroke: none; }
.chart-area path { opacity: .85; }
.chart-donut { margin: 10px auto 0; }
.chart.chart-donut circle { fill: none; stroke-width: 16; }
.chart.is-empty { opacity: .3; }
.chart-legend { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--result-muted); }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: baseline; }
.swatch.s1 { background: var(--s1); } .swatch.s2 { background: var(--s2); } .swatch.s3 { background: var(--s3); }
.swatch.s4 { background: var(--s4); } .swatch.s5 { background: var(--s5); } .swatch.s6 { background: var(--s6); }