@layer pages {
  .distribution-panel { min-width: 0; }
  .distribution-body { padding: 2px 20px 22px; display: flex; align-items: center; gap: 19px; }
  .distribution-visual { position: relative; width: 138px; height: 138px; flex: 0 0 138px; }
  .distribution-visual > svg { width: 100%; height: 100%; overflow: visible; display: block; }
  .distribution-track { stroke: #f0f3eb; }
  .distribution-segment { transform: rotate(-90deg); transform-origin: 90px 90px; transition: opacity .18s ease, stroke-width .18s ease; }
  .chart-ready .distribution-segment { animation: chart-ring-enter 1.05s var(--segment-delay, 0s) cubic-bezier(.2,.65,.3,1) both; }
  .distribution-segment.is-muted { opacity: .22; }
  .distribution-segment.is-active { stroke-width: 25; }
  .distribution-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; pointer-events: none; }
  .distribution-center strong { font-size: 27px; line-height: 1.2; font-weight: 550; letter-spacing: -.8px; color: #526b47; font-variant-numeric: tabular-nums; }
  .distribution-center span { margin-top: 5px; font-size: 9px; color: #a0ac92; }
  .distribution-legend { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
  .distribution-legend-item { display: grid; grid-template-columns: 7px minmax(0,1fr) auto auto; align-items: center; gap: 7px; min-height: 29px; width: 100%; padding: 6px 5px; border: 1px solid transparent; border-radius: 3px; text-align: left; font-size: 10px; color: #8c9b7e; transition: background .18s ease, color .18s ease; }
  .distribution-legend-item:hover, .distribution-legend-item.is-active, .distribution-legend-item:focus-visible { background: #f6f8f0; border-color: #e8eddf; color: #586e4b; }
  .distribution-legend-item > span { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
  .distribution-legend-item > strong { font-weight: 550; font-size: 10px; white-space: nowrap; color: #667e56; }
  .distribution-legend-item small { font-size: 9px; color: #a6b098; margin-left: 4px; }
  .distribution-swatch { display: inline-block; flex-shrink: 0; width: 6px; height: 6px; border-radius: 1px; background: var(--segment-color, #8da67b); }
  .distribution-dot { display: block; width: 6px; height: 6px; border-radius: 1px; }
  .distribution-legend-item .distribution-percent { font-size: 9px; color: #a6b098; }
  .distribution-empty { padding: 12px 20px 25px; font-size: 11px; color: #95a286; line-height: 1.8; }
  @keyframes chart-ring-enter { from { stroke-dasharray: 0 100; } to { stroke-dasharray: var(--segment-length) calc(100 - var(--segment-length)); } }
}

@layer responsive {
  @media (max-width: 1250px) and (min-width: 1051px) {
    .distribution-body { flex-direction: column; gap: 8px; padding-inline: 17px; }
    .distribution-legend { width: 100%; }
  }
  @media (max-width: 600px) and (min-width: 481px) {
    .distribution-body { flex-direction: column; gap: 8px; }
    .distribution-legend { width: 100%; }
  }
  @media (max-width: 480px) {
    .distribution-body { padding: 2px 18px 21px; gap: 19px; }
    .distribution-visual { width: 128px; height: 128px; flex-basis: 128px; }
  }
  @media (max-width: 360px) {
    .distribution-body { gap: 10px; padding-inline: 15px; }
    .distribution-visual { width: 112px; height: 112px; flex-basis: 112px; }
    .distribution-legend-item { font-size: 9px; padding-inline: 3px; }
    .distribution-legend-item small { margin-left: 2px; font-size: 8px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .chart-ready .distribution-segment { animation: none !important; }
    .distribution-segment, .distribution-legend-item { transition: none !important; }
  }
  @media print {
    .chart-ready .distribution-segment { animation: none !important; }
  }
}