refactor: update badge-pro styles, replace input-chunky shadow, and simplify student/reflection status badges

Author: pod-III

my-space/my-class/index.html

@@ -63,7 +63,7 @@
   <style type="text/tailwindcss">
     /* Badge Pro */
     .badge-pro {
-      @apply px-2 py-0.5 bg-gradient-to-r from-orange to-pink text-[8px] font-black text-white rounded-md shadow-hard-sm border-[3px] border-slate-800 dark:border-slate-500 flex items-center justify-center tracking-tighter;
+      @apply px-2 py-0.5 bg-slate-800 dark:bg-slate-700 text-[8px] font-black text-white rounded-md shadow-hard-sm border-[3px] border-slate-800 dark:border-slate-500 flex items-center justify-center tracking-tighter;
     }
 
     /* Reflection card tweaks */
@@ -130,7 +130,7 @@
     .animate-pop-in { animation: pop-in 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
 
     .input-chunky {
-      @apply w-full bg-white dark:bg-slate-800 border-[3px] border-slate-800 dark:border-slate-500 rounded-xl px-4 py-3 font-bold text-slate-800 dark:text-white focus:outline-none focus:ring-[3px] focus:ring-blue focus:border-transparent transition-all shadow-[inset_0_2px_4px_rgba(0,0,0,0.05)];
+      @apply w-full bg-white dark:bg-slate-800 border-[3px] border-slate-800 dark:border-slate-500 rounded-xl px-4 py-3 font-bold text-slate-800 dark:text-white focus:outline-none focus:ring-[3px] focus:ring-blue focus:border-transparent transition-all shadow-hard-sm;
     }
 
     .no-scrollbar::-webkit-scrollbar {
@@ -244,13 +244,13 @@ <h2 id="classNameDisplay" class="font-heading font-bold text-3xl text-slate-900
                  </div>
                </div>
                <div class="flex flex-wrap gap-3">
-                 <div class="flex items-center gap-1.5 badge-pro !bg-slate-100 dark:!bg-slate-800 !text-slate-600 dark:!text-slate-300 !border-[3px] !border-slate-300 dark:!border-slate-600 px-2 py-1">
+                 <div class="flex items-center gap-1.5">
                    <div class="w-1.5 h-1.5 rounded-full bg-blue"></div>
-                   <span id="studentCountBadge" class="text-[10px] font-black uppercase tracking-widest">0 Students</span>
+                   <span id="studentCountBadge" class="text-[10px] font-black uppercase tracking-widest text-slate-500">0 Students</span>
                  </div>
-                 <div class="flex items-center gap-1.5 badge-pro !bg-slate-100 dark:!bg-slate-800 !text-slate-600 dark:!text-slate-300 !border-[3px] !border-slate-300 dark:!border-slate-600 px-2 py-1">
+                 <div class="flex items-center gap-1.5">
                    <i data-lucide="message-square" class="w-3 h-3 text-orange"></i>
-                   <span id="reflectionCountBadge" class="text-[10px] font-black uppercase tracking-widest">0 Reflections</span>
+                   <span id="reflectionCountBadge" class="text-[10px] font-black uppercase tracking-widest text-slate-500">0 Reflections</span>
                  </div>
                </div>
              </div>