export function Skeleton({ className = "" }: { className?: string }) {
  return <div className={`animate-pulse rounded-[--radius-xl] bg-[color-mix(in_oklab,var(--color-ink) 70%,transparent)] ${className}`} />;
}
export function KPISkeleton() {
  return <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
    <Skeleton className="h-24" />
    <Skeleton className="h-24" />
    <Skeleton className="h-24" />
  </div>;
}
export function ChartSkeleton({ tall=false }: { tall?: boolean }) {
  return <Skeleton className={tall ? "h-80" : "h-64"} />;
}
export function TableSkeleton() {
  return <div className="card">
    <div className="section-title">Loading…</div>
    <Skeleton className="h-40" />
  </div>;
}