.metrics-extra-panel {
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

.metrics-extra-panel h1 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--text-primary);
}

.metrics-pie-inner {
  min-height: 320px;
  max-height: 420px;
}

#chart-skeleton-splits.hidden,
#chart-skeleton-weekdays.hidden {
  display: none;
}

#chart-skeleton-splits,
#chart-skeleton-weekdays {
  padding: 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#chart-skeleton-splits .skeleton-bar,
#chart-skeleton-weekdays .skeleton-bar {
  height: 36px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--bg-hover) 25%, var(--border-subtle) 50%, var(--bg-hover) 75%);
  background-size: 200% 100%;
  animation: metrics-shimmer 1.5s ease-in-out infinite;
}

@keyframes metrics-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}