@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;1,14..32,400&display=swap");





@layer base {
  :root {
    /* Auto-restored theme variables */
    --shadow-x: 0px;
    --shadow-y: 2px;
    --shadow-blur: 8px;
    --shadow-spread: 0px;
    --shadow-opacity: 0.35;

    --background: 220 35% 6%;
    --foreground: 210 20% 92%;

    --card: 220 22% 11%;
    --card-foreground: 210 18% 91%;

    --popover: 220 22% 11%;
    --popover-foreground: 210 18% 91%;

    --primary: 190 80% 50%;
    --primary-foreground: 220 35% 6%;

    --secondary: 220 18% 16%;
    --secondary-foreground: 210 18% 80%;

    --muted: 220 18% 14%;
    --muted-foreground: 215 12% 48%;

    --accent: 220 18% 17%;
    --accent-foreground: 210 18% 91%;

    --destructive: 5 100% 61%;
    --destructive-foreground: 0 0% 98%;

    --border: 220 15% 17%;
    --input: 220 18% 14%;
    --ring: 190 80% 50%;

    /* chart-1 = green (low risk / good protection) #7BE8CB */
    --chart-1: 164 70% 70%;
    /* chart-2 = yellow (medium risk) #FFB51A */
    --chart-2: 41 100% 55%;
    /* chart-3 = red (high risk) #FF4A3A */
    --chart-3: 5 100% 61%;
    --chart-4: 190 80% 50%;
    --chart-5: 270 65% 60%;

    --radius: 0.875rem;

    --sidebar-background: 220 25% 8%;
    --sidebar-foreground: 210 18% 80%;
    --sidebar-primary: 190 80% 50%;
    --sidebar-primary-foreground: 220 35% 6%;
    --sidebar-accent: 220 18% 15%;
    --sidebar-accent-foreground: 210 18% 80%;
    --sidebar-border: 220 15% 16%;
    --sidebar-ring: 190 80% 50%;

    --font-sans: 'Inter', 'Helvetica Neue', system-ui, sans-serif;
    --font-mono: 'Fira Code', monospace;

    --shadow-rgb: 0 0 0;
    --shadow-color: hsl(220 35% 3%);

    --shadow-2xs: 0 1px 2px rgba(0,0,0,0.2);
    --shadow-xs: 0 1px 4px rgba(0,0,0,0.25);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
    --shadow: 0 4px 16px rgba(0,0,0,0.35);
    --shadow-md: 0 8px 24px rgba(0,0,0,0.4);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.45);
    --shadow-xl: 0 20px 60px rgba(0,0,0,0.5);
    --shadow-2xl: 0 32px 80px rgba(0,0,0,0.55);
  }
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  html {
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
  }
  body {
    @apply bg-background text-foreground font-sans antialiased;
    -webkit-font-smoothing: antialiased;
    overscroll-behavior: none;
  }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Safe area utilities */
@layer utilities {
  .pt-safe { padding-top: env(safe-area-inset-top); }
  .pb-safe { padding-bottom: env(safe-area-inset-bottom); }
  .pl-safe { padding-left: env(safe-area-inset-left); }
  .pr-safe { padding-right: env(safe-area-inset-right); }

  /* Hide scrollbars but allow scrolling */
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  /* Line clamp utilities */
  .line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
  .line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

/* Pre-React loading state — shows before JS bundle loads */
#root:empty {
  position: fixed;
  inset: 0;
  background: #000714;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}
#root:empty::before {
  content: '';
  width: 32px;
  height: 32px;
  border: 2px solid rgba(181, 154, 88, 0.25);
  border-top-color: rgba(181, 154, 88, 0.9);
  border-radius: 50%;
  animation: _rootSpin 0.8s linear infinite;
  margin-bottom: 16px;
}
#root:empty::after {
  content: 'Preparing for an individual testing session';
  color: rgba(255, 255, 255, 0.5);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  letter-spacing: 0.02em;
}
@keyframes _rootSpin {
  to { transform: rotate(360deg); }
}