fix: properly apply dark mode hover states in dropdown

The previous implementation tried to conditionally set _hover colors
within a single css() call, but Panda CSS evaluates pseudo-selectors
at build time, not runtime.

Fixed by generating separate css() calls for dark and light modes,
allowing _hover and _focus states to properly use brand.900/brand.800
in dark mode instead of brand.50/brand.100.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

apps/web/src/app/create/worksheets/addition/components/OrientationPanel.tsx

@@ -325,7 +325,9 @@ export function OrientationPanel({
                           key={count}
                           data-action={`select-problems-${count}`}
                           onSelect={() => handleProblemsPerPageChange(count)}
-                          className={css({
+                          className={
+                            isDark
+                              ? css({
                                   display: 'flex',
                                   alignItems: 'center',
                                   gap: '3',
@@ -334,14 +336,32 @@ export function OrientationPanel({
                                   rounded: 'md',
                                   cursor: 'pointer',
                                   outline: 'none',
-                            bg: isSelected ? (isDark ? 'brand.900' : 'brand.50') : 'transparent',
+                                  bg: isSelected ? 'brand.900' : 'transparent',
                                   _hover: {
-                              bg: isDark ? 'brand.900' : 'brand.50',
+                                    bg: 'brand.900',
                                   },
                                   _focus: {
-                              bg: isDark ? 'brand.800' : 'brand.100',
+                                    bg: 'brand.800',
                                   },
-                          })}
+                                })
+                              : css({
+                                  display: 'flex',
+                                  alignItems: 'center',
+                                  gap: '3',
+                                  px: '3',
+                                  py: '2',
+                                  rounded: 'md',
+                                  cursor: 'pointer',
+                                  outline: 'none',
+                                  bg: isSelected ? 'brand.50' : 'transparent',
+                                  _hover: {
+                                    bg: 'brand.50',
+                                  },
+                                  _focus: {
+                                    bg: 'brand.100',
+                                  },
+                                })
+                          }
                         >
                           {/* Grid visualization */}
                           <div