.pie-layout { display:grid; grid-template-columns:120px 1fr; align-items:center; gap:14px; }
    .pie-disc { width:120px; aspect-ratio:1; border-radius:50%; box-shadow:inset 0 0 0 1px var(--line); }
    .legend { display:grid; gap:5px; }
    .legend-row { display:grid; grid-template-columns:10px 1fr auto; align-items:center; gap:7px; color:var(--muted); font-size:.85rem; }
    .legend-row strong { color:var(--text); }
    .swatch { width:10px; height:10px; border-radius:3px; }
    .bars { display:grid; gap:7px; }
    .bar-row { display:grid; grid-template-columns:minmax(66px,1fr) 2fr 58px; align-items:center; gap:8px; font-size:.85rem; color:var(--muted); }
    .bar-track { height:12px; overflow:hidden; border-radius:999px; background:color-mix(in srgb,var(--muted) 15%,transparent); }
    .bar-fill { height:100%; min-width:0; border-radius:inherit; }
    .bar-row strong { color:var(--text); text-align:right; }
    .legend-row span,.bar-row span { overflow-wrap:anywhere; }
    .card .legend-row,.card .bar-row { font-size:.72rem; }
    .card .bar-row { grid-template-columns:66px 1fr 58px; }
    @media(max-width:560px){.pie-layout{grid-template-columns:88px 1fr}.pie-disc{width:88px}
      .card .bar-row{grid-template-columns:60px 1fr 54px}}