refactor: redesign tabs to look like traditional tabs

Changed the difficulty method selector from a segmented control
to a classic tab design:

Visual changes:
- Added horizontal border line below tabs
- Active tab has colored bottom border (brand.500, 3px)
- Active tab uses brand colors (brand.300/brand.600)
- Inactive tabs are muted gray
- Removed rounded pill background container
- Tabs have rounded top corners only
- Added subtle hover states

This creates a clearer visual hierarchy and makes it immediately
obvious which mode is active.

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

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

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

@@ -18,12 +18,10 @@ export function DifficultyMethodSelector({
       {/* Tab buttons */}
       <div
         className={css({
-          display: 'grid',
-          gridTemplateColumns: '1fr 1fr',
+          display: 'flex',
           gap: '0',
-          bg: isDark ? 'gray.800' : 'gray.100',
-          p: '1',
-          rounded: 'lg',
+          borderBottom: '2px solid',
+          borderColor: isDark ? 'gray.700' : 'gray.200',
         })}
       >
         {/* Smart Difficulty Tab */}
@@ -36,18 +34,23 @@ export function DifficultyMethodSelector({
             alignItems: 'center',
             justifyContent: 'center',
             gap: '2',
-            px: '4',
-            py: '2.5',
-            bg: currentMethod === 'smart' ? (isDark ? 'gray.700' : 'white') : 'transparent',
-            color: currentMethod === 'smart' ? (isDark ? 'gray.100' : 'gray.900') : (isDark ? 'gray.400' : 'gray.600'),
-            fontWeight: currentMethod === 'smart' ? 'semibold' : 'medium',
+            px: '5',
+            py: '3',
+            flex: '1',
+            bg: currentMethod === 'smart' ? (isDark ? 'gray.800' : 'white') : 'transparent',
+            color: currentMethod === 'smart' ? (isDark ? 'brand.300' : 'brand.600') : (isDark ? 'gray.500' : 'gray.500'),
+            fontWeight: currentMethod === 'smart' ? 'bold' : 'medium',
             fontSize: 'sm',
-            rounded: 'md',
+            borderTopLeftRadius: 'lg',
+            borderTopRightRadius: 'lg',
             cursor: 'pointer',
             transition: 'all 0.2s',
-            boxShadow: currentMethod === 'smart' ? (isDark ? '0 1px 3px rgba(0,0,0,0.3)' : '0 1px 3px rgba(0,0,0,0.1)') : 'none',
+            borderBottom: '3px solid',
+            borderColor: currentMethod === 'smart' ? (isDark ? 'brand.500' : 'brand.500') : 'transparent',
+            mb: '-2px',
             _hover: {
-              color: isDark ? 'gray.200' : 'gray.700',
+              color: currentMethod === 'smart' ? (isDark ? 'brand.200' : 'brand.700') : (isDark ? 'gray.400' : 'gray.600'),
+              bg: currentMethod === 'smart' ? (isDark ? 'gray.800' : 'white') : (isDark ? 'gray.800/30' : 'gray.50'),
             },
           })}
         >
@@ -65,18 +68,23 @@ export function DifficultyMethodSelector({
             alignItems: 'center',
             justifyContent: 'center',
             gap: '2',
-            px: '4',
-            py: '2.5',
-            bg: currentMethod === 'mastery' ? (isDark ? 'gray.700' : 'white') : 'transparent',
-            color: currentMethod === 'mastery' ? (isDark ? 'gray.100' : 'gray.900') : (isDark ? 'gray.400' : 'gray.600'),
-            fontWeight: currentMethod === 'mastery' ? 'semibold' : 'medium',
+            px: '5',
+            py: '3',
+            flex: '1',
+            bg: currentMethod === 'mastery' ? (isDark ? 'gray.800' : 'white') : 'transparent',
+            color: currentMethod === 'mastery' ? (isDark ? 'brand.300' : 'brand.600') : (isDark ? 'gray.500' : 'gray.500'),
+            fontWeight: currentMethod === 'mastery' ? 'bold' : 'medium',
             fontSize: 'sm',
-            rounded: 'md',
+            borderTopLeftRadius: 'lg',
+            borderTopRightRadius: 'lg',
             cursor: 'pointer',
             transition: 'all 0.2s',
-            boxShadow: currentMethod === 'mastery' ? (isDark ? '0 1px 3px rgba(0,0,0,0.3)' : '0 1px 3px rgba(0,0,0,0.1)') : 'none',
+            borderBottom: '3px solid',
+            borderColor: currentMethod === 'mastery' ? (isDark ? 'brand.500' : 'brand.500') : 'transparent',
+            mb: '-2px',
             _hover: {
-              color: isDark ? 'gray.200' : 'gray.700',
+              color: currentMethod === 'mastery' ? (isDark ? 'brand.200' : 'brand.700') : (isDark ? 'gray.400' : 'gray.600'),
+              bg: currentMethod === 'mastery' ? (isDark ? 'gray.800' : 'white') : (isDark ? 'gray.800/30' : 'gray.50'),
             },
           })}
         >