fix: improve dark mode contrast in OrientationPanel dropdown

Updated the problems-per-page dropdown menu to use darker brand colors
in dark mode for better visual harmony:

- Selected/hover state: brand.50 → brand.900 (dark mode)
- Focus state: brand.100 → brand.800 (dark mode)
- Unselected grid dots: gray.400 → gray.500 (dark mode)

These changes reduce the bright contrast of selected items against
the dark gray.800 dropdown background, creating a more cohesive
dark mode experience.

🤖 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

@@ -334,12 +334,12 @@ export function OrientationPanel({
                             rounded: 'md',
                             cursor: 'pointer',
                             outline: 'none',
-                            bg: isSelected ? 'brand.50' : 'transparent',
+                            bg: isSelected ? (isDark ? 'brand.900' : 'brand.50') : 'transparent',
                             _hover: {
-                              bg: 'brand.50',
+                              bg: isDark ? 'brand.900' : 'brand.50',
                             },
                             _focus: {
-                              bg: 'brand.100',
+                              bg: isDark ? 'brand.800' : 'brand.100',
                             },
                           })}
                         >
@@ -364,7 +364,7 @@ export function OrientationPanel({
                                 className={css({
                                   w: '1.5',
                                   h: '1.5',
-                                  bg: isSelected ? 'brand.500' : 'gray.400',
+                                  bg: isSelected ? 'brand.500' : (isDark ? 'gray.500' : 'gray.400'),
                                   rounded: 'full',
                                 })}
                               />