html { overflow-y: scroll; }
    :focus-visible { outline: 2px solid #7a5ecb; outline-offset: 2px; }

      /* Hide entire page content until auth check completes */
body:not(.auth-ready) #app-header,
body:not(.auth-ready) main {
  display: none !important;
}
    
    @keyframes skeleton {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
    }
    
    .skeleton {
      animation: skeleton 1.5s ease-in-out infinite;
      background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
      background-size: 200% 100%;
      border-radius: 0.5rem;
    }

.cmra-chart-wrap {
  position: relative;
  width: 220px;
  height: 220px;
  margin: 0 auto;
}

.cmra-chart-wrap canvas {
  width: 100% !important;
  height: 100% !important;
  position: relative;
  z-index: 2;
}

.cmra-chart-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  z-index: 1;
}

.cmra-center-total {
  font-size: 1.6rem;
  font-weight: 700;
  color: #111827;
}

.cmra-center-label {
  font-size: 0.75rem;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.cmra-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}

.cmra-dot-blue { background: #6366f1; }
.cmra-dot-amber { background: #f59e0b; }
.cmra-dot-purple { background: #a855f7; }
.cmra-dot-green { background: #10b981; }

#reports-empty {
  width: 100%;
}