fix: use subtle gray highlights for dropdown in dark mode

Problems per page dropdown now uses appropriate colors for each theme:

Dark mode:
- Selected/hover: gray.700 (subtle, matches gray.800 background)
- Focus: gray.600 (slightly lighter for keyboard navigation)

Light mode:
- Selected/hover: brand.50 (light blue, stands out on white)
- Focus: brand.100 (slightly more emphasis)

This creates proper visual hierarchy without jarring contrast in dark mode.

🤖 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,23 +325,43 @@ export function OrientationPanel({
                           key={count}
                           data-action={`select-problems-${count}`}
                           onSelect={() => handleProblemsPerPageChange(count)}
-                          className={css({
+                          className={
-                            display: 'flex',
+                            isDark
-                            alignItems: 'center',
+                              ? css({
-                            gap: '3',
+                                  display: 'flex',
-                            px: '3',
+                                  alignItems: 'center',
-                            py: '2',
+                                  gap: '3',
-                            rounded: 'md',
+                                  px: '3',
-                            cursor: 'pointer',
+                                  py: '2',
-                            outline: 'none',
+                                  rounded: 'md',
-                            bg: isSelected ? 'brand.50' : 'transparent',
+                                  cursor: 'pointer',
-                            _hover: {
+                                  outline: 'none',
-                              bg: 'brand.50',
+                                  bg: isSelected ? 'gray.700' : 'transparent',
-                            },
+                                  _hover: {
-                            _focus: {
+                                    bg: 'gray.700',
-                              bg: 'brand.100',
+                                  },
-                            },
+                                  _focus: {
-                          })}
+                                    bg: 'gray.600',
+                                  },
+                                })
+                              : 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