/* Вкладка «Отчёты» */
.donut-wrap { position: relative; width: 210px; height: 210px; margin: 6px auto 2px; }
.donut-wrap svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut-wrap circle { fill: none; transition: stroke-dasharray .5s ease; }
.donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}
.donut-center .label { font-size: 13px; color: var(--hint); }
.donut-center .value { font-size: 24px; font-weight: 700; letter-spacing: -.03em; max-width: 140px; }

.legend-row .bar { margin-top: 6px; height: 4px; }
.legend-row .pct { font-size: 12px; color: var(--hint); min-width: 30px; text-align: right; }
.cat-edit { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--hint2); flex-shrink: 0; }
.cat-edit:active { background: var(--fill); }
.cat-edit svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.days-chart { width: 100%; height: 140px; }
.days-chart rect { fill: color-mix(in srgb, var(--blue) 30%, transparent); }
.days-chart rect.today { fill: var(--blue); }
.days-chart text { fill: var(--hint); font-size: 10px; }

.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.stats > div { background: var(--card); border-radius: var(--radius); padding: 10px 14px; box-shadow: var(--shadow); }
.stats .label { font-size: 13px; color: var(--hint); }
.stats .value { font-size: 17px; font-weight: 600; margin-top: 2px; }
.trend { font-size: 13px; font-weight: 600; }
.trend.up { color: var(--red); }
.trend.down { color: var(--green); }