- Use actual highlight visual treatment (marker style) on tab
- Text remains in semantic color (--color-text) for readability
- Background uses 35% highlight color blend with glow effect
- Hover state intensifies to 50% for better interaction feedback
- Creates consistent visual language between tabs and content highlights
- Add --color-bg-elevated background to active Highlights tab
- Improves contrast of yellow highlight color in light mode
- Creates visual separation while maintaining highlight color identity
- Keeps yellow text and border for consistent highlight theming
- Use semantic text color (--color-text) for tab label in active state
- Keep highlight color for icon and bottom border as visual accent
- Ensures text is always readable regardless of theme
- Fixes contrast issues on /me page Highlights tab
- Update icon-button.css, profile.css, me.css to use tokens
- Migrate reader.css to semantic colors for light theme
- Update toast.css with theme-aware colors
- All major UI components now support theme switching
- Add specific border styling for .bookmarks-list .individual-bookmark
- Use darker border color (#444) for better visibility
- Add background color (#1a1a1a) to make cards more distinct
- Enhance hover states with brighter border (#555) and background (#252525)
- Use !important to ensure styles override existing CSS
- Improves visual separation and card definition in reading list
- Add text-align: left to .bookmarks-list to override center alignment from .app
- Apply left alignment to all individual bookmark elements and their children
- Ensures reading list content is properly left-aligned for better readability
- Maintains consistent text alignment for bookmark titles, content, and metadata
- Apply #646cff color to reading-list tab when active
- Matches the blue color used throughout the app for bookmarks
- Provides visual consistency between bookmarks icon and reading list tab
- Uses same color as bookmark-type and other bookmark-related elements
- Increase margin-top from 2.25rem to 3.5rem for explore-header on mobile
- Provides more breathing room between floating action buttons and profile
- Improves mobile UX by preventing visual crowding
- Wrap tab labels and counts in separate spans for better control
- Hide counts on mobile devices (max-width: 768px) to save space
- Maintain counts on desktop for better UX
- Follows mobile-first design principles
- Constrain AuthorCard width via header context
- Remove extra padding on .me-highlights-list so widths align
- Keeps both at 600px max with auto centering
- Add top margin to header on mobile for floating buttons
- Tighten tab paddings and content spacing
- Reduce left/right padding for more room on small screens
