.difficulty-btn {
  padding: 12px 16px;
  border-radius: 10px;
  font-weight: 600;
  background: #f3f4f6; /* light grey */
  color: #374151;
  transition: 0.3s ease;
}

.difficulty-btn:hover {
  background: #e5e7eb; /* darker grey */
}

.difficulty-btn.active {
  background: #4f46e5;  /* Indigo */
  color: #fff;
  box-shadow: 0 4px 10px rgba(79, 70, 229, 0.3);
}

    :root {
      --primary: #7c3aed;
      --primary-light: #8b5cf6;
      --primary-dark: #6d28d9;
      --bg-light: #f8fafc;
      --text-light: #1e293b;
      --bg-dark: #0f172a;
      --text-dark: #f1f5f9;
      --card-light: #ffffff;
      --card-dark: #1e293b;
    }

    body {
      transition: background-color .3s, color .3s;
    }
    body.light-mode {
      background-color: var(--bg-light);
      color: var(--text-light);
    }
    body.dark-mode {
      background-color: var(--bg-dark);
      color: var(--text-dark);
    }

    .dark-mode .card {
      background-color: var(--card-dark);
      color: var(--text-dark);
    }
    .dark-mode .card .q { color: #e2e8f0; }
    .dark-mode .card .a { color: #cbd5e1; }

    .card {
      background-color: var(--card-light);
      border-radius: .75rem;
      box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06);
      padding: 1.5rem;
      margin-bottom: 1.5rem;
      transition: all .3s ease;
    }
    .card:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05);
    }
    .card .q { font-weight: 600; margin-bottom: .75rem; font-size: 1.1rem; }
    .card .a { color: #4b5563; line-height: 1.6; }

    .qa-container {
      max-height: 70vh;
      overflow-y: auto;
      padding-right: .5rem;
    }
    .qa-container::-webkit-scrollbar { width: 6px; }
    .qa-container::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
    .qa-container::-webkit-scrollbar-thumb { background: var(--primary-light); border-radius: 10px; }
    .dark-mode .qa-container::-webkit-scrollbar-track { background: #334155; }
    .dark-mode .qa-container::-webkit-scrollbar-thumb { background: var(--primary-dark); }

    .loading-spinner {
      border: 4px solid rgba(0,0,0,.1);
      border-radius: 50%;
      border-top: 4px solid var(--primary);
      width: 40px; height: 40px;
      animation: spin 1s linear infinite;
    }
    .dark-mode .loading-spinner { border: 4px solid rgba(255,255,255,.1); border-top-color: var(--primary-light); }
    @keyframes spin { to { transform: rotate(360deg); } }

    .fade-in { animation: fadeIn .5s ease-in; }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

    .course-box {
      @apply flex flex-col items-center justify-center p-6 bg-white dark:bg-gray-800 rounded-xl shadow-md cursor-pointer transition-all hover:scale-105 hover:shadow-lg border-2 border-transparent;
    }
    .course-box.active {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(124,58,237,.3);
    }

    .difficulty-btn {
      @apply px-6 py-2 rounded-lg font-semibold bg-gray-200 dark:bg-gray-700 hover:bg-purple-600 hover:text-white transition;
    }
    .difficulty-btn.active {
      @apply bg-purple-600 text-white;
    }

    .theme-toggle {
      background: none; border: none; cursor: pointer; font-size: 1.25rem; color: inherit; transition: transform .3s;
    }
    .theme-toggle:hover { transform: rotate(15deg); }
    .difficulty-btn {
  @apply w-full flex items-center justify-center gap-2 px-6 py-3 rounded-lg font-semibold bg-gray-200 dark:bg-gray-700 hover:bg-purple-600 hover:text-white transition;
}
.difficulty-btn.active {
  @apply bg-purple-600 text-white;
}