feat: Add global CSS design system with Tailwind integration, light/dark mode support, and a new discovery page.

Frontend-Learner/assets/css/main.css

@@ -1133,3 +1133,48 @@ ul {
 .checkbox-visible.q-checkbox--dense .q-checkbox__bg {
   border-width: 2px !important;
 }
+
+/* ===========================
+   Dropdown Menu Visibility Enhancement
+   =========================== */
+/* Force white background for all dropdown menus */
+.q-menu,
+.q-menu .q-list {
+  background-color: #ffffff !important;
+}
+
+/* Dropdown menu items - simple dark text */
+.q-menu .q-item {
+  color: #0f172a !important; /* slate-900 - dark text */
+  background-color: transparent !important;
+}
+
+.q-menu .q-item__label {
+  color: #0f172a !important; /* slate-900 - dark text */
+  font-weight: 400 !important; /* normal weight */
+}
+
+/* Subtle hover state */
+.q-menu .q-item:hover {
+  background-color: #f8fafc !important; /* slate-50 - very light hover */
+}
+
+/* Selected/Active item - keep simple, just slightly darker text */
+.q-menu .q-item--active {
+  background-color: transparent !important; /* no background color */
+  color: #0f172a !important; /* same dark text */
+}
+
+.q-menu .q-item--active .q-item__label {
+  color: #0f172a !important; /* same dark text */
+  font-weight: 500 !important; /* slightly bolder */
+}
+
+/* Force option text to be dark */
+.q-item__label,
+.q-select__dropdown .q-item {
+  color: #0f172a !important;
+}
+
+
+

Frontend-Learner/pages/browse/discovery.vue

@@ -203,7 +203,8 @@ const { currentUser } = useAuth();
             placeholder="ค้นหาคอร์ส..."
             class="bg-white dark:bg-slate-800 w-full md:w-64"
             bg-color="white"
-            dark:bg-color="slate-800"
+            color="slate-900"
+            :input-style="{ color: '#0f172a' }"
           >
             <template v-slot:append>
               <q-icon name="search" class="text-slate-400" />
@@ -217,8 +218,15 @@ const { currentUser } = useAuth();
             dense
             outlined
             rounded
-            class="bg-white dark:bg-slate-800 w-40"
+            :dark="false"
+            class="bg-white w-40"
             bg-color="white"
+            color="slate-900"
+            :input-style="{ color: '#0f172a' }"
+            :options-dark="false"
+            options-dense
+            :popup-content-style="{ backgroundColor: '#ffffff', color: '#0f172a' }"
+            popup-content-class="text-slate-900"
             behavior="menu"
           />
         </div>