.dash-welcome { display: flex; align-items: center; gap: 28px; padding: 36px; flex-wrap: wrap; }
.dash-welcome__art { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--text-3); border: 1px solid var(--line); }
.dash-welcome__art .icon { width: 30px; height: 30px; }

.donut-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.donut { --size: 132px; width: var(--size); height: var(--size); border-radius: 50%; display: grid; place-items: center; flex: none; }
.donut__hole { width: calc(var(--size) - 34px); height: calc(var(--size) - 34px); border-radius: 50%; background: var(--surface); display: grid; place-items: center; align-content: center; line-height: 1.1; text-align: center; }
.donut__hole strong { font-size: 1.6rem; letter-spacing: -.03em; }
.donut__hole span { font-size: 12px; color: var(--text-3); font-weight: 550; }
.legend { display: grid; gap: 9px; flex: 1; min-width: 150px; }
.legend li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.legend__dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }

.bar-row { display: grid; grid-template-columns: minmax(80px, 140px) 1fr 28px; align-items: center; gap: 12px; font-size: 13.5px; }
.bar-row .progress { height: 8px; }