docs: update changelog for v0.6.2

chore: bump version to 0.6.2
fix: align title, summary, meta, and body text in reader
2026-02-16 12:34:41 +01:00 · 2025-10-14 00:54:28 +02:00 · 2025-10-14 00:53:17 +02:00 · 2025-10-14 00:52:19 +02:00 · 2025-10-14 00:50:52 +02:00 · 2025-10-14 00:48:47 +02:00
46 changed files with 1730 additions and 536 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,24 +7,118 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

 ## [Unreleased]

+## [0.6.2] - 2025-01-27
+
 ### Added

- Tailwind CSS integration with preflight enabled
+- Pull-to-refresh gesture on mobile for all scrollable views
+  - HighlightsPanel (right sidebar) - refresh highlights for current article
+  - Explore page - refresh blog posts from friends
+  - Me pages (all tabs) - refresh user data
+  - BookmarkList (left sidebar) - refresh bookmarks
+  - Touch-only activation using coarse pointer detection
+  - Visual indicator with rotating arrow and contextual messages
+- Three-dot menu for external URLs in reader (`/r/` path)
+  - Open in browser, Copy URL, Share URL actions
+  - Consistent with article menu functionality
+
+### Changed
+
+- Bookmark refresh button moved to footer alongside view mode controls
+  - Last update time now shown in button tooltip
+  - Cleaner UI with all controls consolidated in footer
+- Unified button styles across left and right sidebars
+  - All sidebar buttons now use IconButton component for consistency
+  - Removed 73 lines of redundant CSS for old button classes
+  - Highlights panel buttons match bookmark sidebar styling
+
+### Fixed
+
+- Reader content alignment on desktop
+  - Title, summary, metadata, and body text now properly aligned
+  - All reader elements now have consistent 2rem horizontal padding
+  - Mobile layout retains compact padding
+- Highlight text matching with multiple improvements
+  - Precise normalized-to-original character position mapping
+  - Remove existing highlight marks before applying new ones
+  - Robust validation and error handling for multi-node highlights
+  - Prevent character spacing issues in highlighted text
+  - Add text validation before applying highlights
+  - Eliminate intra-word spaces in highlighted text
+
+## [0.6.1] - 2025-10-13
+
+### Added
+
+- Writings tab on `/me` page to display user's published articles
+- Comprehensive headline styling (h1-h6) with Tailwind typography
+- List styling for ordered and unordered lists in articles
+- Blockquote styling with indentation and italics
+- Vertical padding to blockquotes for better readability
+- Horizontal padding for reader text content on desktop
+- Drop-shadows to sidebars for visual depth
+- MutationObserver for tracking highlight DOM changes
+
+### Changed
+
+- Article titles now larger and more prominent
+- Article summaries now display properly in reader header
+- Zap splits settings UI with preset buttons and full-width sliders
+- Sidebars now extend to 100vh height
+- Blockquote styling simplified to minimal indent and italic
+- Improved zap splits settings visual design
+
+### Fixed
+
+- Horizontal overflow from code blocks and wide content on mobile
+- Settings view now mobile-friendly with proper width constraints
+- Long relay URLs no longer cause horizontal overflow on mobile
+- Sidebar/highlights toggle buttons hidden on settings/explore/me pages
+- Video titles now show filename instead of 'Error Loading Content'
+- AddBookmarkModal z-index issue fixed using React Portal
+- Highlight matching for text spanning multiple DOM nodes/inline elements
+- Highlights now appear as single continuous element across DOM nodes
+- Highlights display immediately after creation with synchronous render
+- Scroll-to-highlight functionality restored after DOM updates
+- Padding gaps around sidebars removed
+- TypeScript errors in video-meta.ts resolved
+
+### Refactored
+
+- Migrated entire color system to Tailwind v4 color palette
+- Migrated all CSS files (sidebar, highlights, cards, forms, reader, etc.) to Tailwind colors
+- Updated default highlight colors to yellow-400 for markers and yellow-300 for other contexts
+- Added comprehensive color system documentation (COLOR_SYSTEM.md)
+- Cleaned up legacy.css removing unused debugging styles
+
+## [0.6.0] - 2025-10-13
+
+### Added
+
+- Tailwind CSS v4 integration with preflight enabled
 - Reading position tracking with visual progress indicator
 - Document-level scrolling with sticky sidebars on desktop
+- Dedicated legacy styles file for better organization

 ### Changed

 - Refactored layout system to use document scroll instead of pane scroll
 - Migrated reading progress indicator to Tailwind utilities
+- Migrated mobile buttons to Tailwind utilities
 - Simplified global CSS to work with Tailwind preflight
- Added CSS variables for user-settable theme colors
+- Updated PostCSS configuration for Tailwind v4
+- Reconciled base styles with Tailwind preflight
+- Reorganized and cleaned up duplicate styles in index.css
+- Made reading progress indicator smaller and more subtle

 ### Fixed

 - Reading position indicator now always visible at bottom of screen
 - Progress tracking now accurately reflects reading position
 - Scroll behavior consistent across desktop and mobile
+- Removed padding on mobile main pane for edge-to-edge content
+- Removed mobile content pane gap for better layout
+- Document scroll with important overrides for consistent behavior

 ## [0.5.7] - 2025-01-14

@@ -1002,7 +1096,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Optimize relay usage following applesauce-relay best practices
 - Use applesauce-react event models for better profile handling

-[Unreleased]: https://github.com/dergigi/boris/compare/v0.5.5...HEAD
+[Unreleased]: https://github.com/dergigi/boris/compare/v0.6.2...HEAD
+[0.6.2]: https://github.com/dergigi/boris/compare/v0.6.1...v0.6.2
+[0.6.1]: https://github.com/dergigi/boris/compare/v0.6.0...v0.6.1
+[0.6.0]: https://github.com/dergigi/boris/compare/v0.5.7...v0.6.0
+[0.5.7]: https://github.com/dergigi/boris/compare/v0.5.6...v0.5.7
+[0.5.6]: https://github.com/dergigi/boris/compare/v0.5.5...v0.5.6
 [0.5.5]: https://github.com/dergigi/boris/compare/v0.5.4...v0.5.5
 [0.5.2]: https://github.com/dergigi/boris/compare/v0.5.1...v0.5.2
 [0.5.1]: https://github.com/dergigi/boris/compare/v0.5.0...v0.5.1
--- a/COLOR_SYSTEM.md
+++ b/COLOR_SYSTEM.md
@@ -0,0 +1,98 @@
+# Boris Color System
+
+All colors now use Tailwind CSS color palette for consistency and maintainability.
+
+## Semantic Color Aliases (Tailwind Config)
+
+```javascript
+'app-bg': '#18181b',           // zinc-900 - Main backgrounds
+'app-bg-elevated': '#27272a',  // zinc-800 - Elevated surfaces (cards, modals)
+'app-bg-subtle': '#1e1e1e',    // Custom ~zinc-850 - Subtle backgrounds
+'app-border': '#3f3f46',       // zinc-700 - Primary borders
+'app-border-subtle': '#52525b', // zinc-600 - Subtle borders
+'app-text': '#e4e4e7',         // zinc-200 - Primary text
+'app-text-secondary': '#a1a1aa', // zinc-400 - Secondary text
+'app-text-muted': '#71717a',   // zinc-500 - Muted text
+'primary': '#6366f1',          // indigo-500 - Primary accent
+'primary-hover': '#4f46e5',    // indigo-600 - Primary hover state
+'highlight-mine': '#fde047',   // yellow-300 - User highlights
+'highlight-friends': '#f97316', // orange-500 - Friends highlights
+'highlight-nostrverse': '#9333ea', // purple-600 - Nostrverse highlights
+```
+
+## Highlight Colors (User-Settable)
+
+Default colors in the color picker:
+- **Yellow** (default): `#fde047` - yellow-300
+- **Orange**: `#f97316` - orange-500
+- **Pink**: `#ec4899` - pink-500
+- **Green**: `#22c55e` - green-500
+- **Blue**: `#3b82f6` - blue-500
+- **Purple**: `#9333ea` - purple-600
+
+## Common Color Mappings
+
+| Old Hex   | Tailwind Color | Usage |
+|-----------|----------------|-------|
+| `#18181b` | zinc-900       | Main app background |
+| `#1a1a1a` | zinc-900       | Component backgrounds |
+| `#1e1e1e` | ~zinc-850      | Code blocks, subtle surfaces |
+| `#252525` | zinc-800       | Hover states |
+| `#27272a` | zinc-800       | Elevated surfaces |
+| `#2a2a2a` | zinc-800       | Buttons, inputs |
+| `#333`    | zinc-700       | Primary borders |
+| `#3f3f46` | zinc-700       | Component borders |
+| `#444`    | zinc-600       | Subtle borders |
+| `#52525b` | zinc-600       | Input borders |
+| `#555`    | zinc-500       | Hover borders |
+| `#666`    | zinc-500       | Muted text |
+| `#71717a` | zinc-500       | Secondary text |
+| `#888`    | zinc-400       | Secondary text |
+| `#999`    | zinc-400       | Muted labels |
+| `#a1a1aa` | zinc-400       | Placeholder text |
+| `#aaa`    | zinc-300       | Light text |
+| `#ccc`    | zinc-300       | Primary text on dark |
+| `#ddd`    | zinc-200       | Bright text |
+| `#e4e4e7` | zinc-200       | Primary text |
+| `#646cff` | indigo-500     | Primary accent |
+| `#535bf2` | indigo-600     | Primary hover |
+| `#fde047` | yellow-300     | Default highlight (brighter) |
+| `#f97316` | orange-500     | Friends highlights |
+| `#9333ea` | purple-600     | Nostrverse highlights |
+
+## Usage Guidelines
+
+### In CSS
+Use Tailwind utilities whenever possible:
+```css
+.example {
+  background: rgb(24 24 27); /* zinc-900 */
+  border: 1px solid rgb(63 63 70); /* zinc-700 */
+  color: rgb(228 228 231); /* zinc-200 */
+}
+```
+
+### In TSX
+Use Tailwind classes:
+```tsx
+<div className="bg-zinc-900 border border-zinc-700 text-zinc-200">
+```
+
+Or semantic aliases:
+```tsx
+<div className="bg-app-bg border border-app-border text-app-text">
+```
+
+### CSS Variables (User-Settable)
+For colors that users can customize:
+```css
+background: var(--highlight-color-mine, #fde047);
+```
+
+## Notes
+
+- All hex colors are now Tailwind palette colors
+- CSS variables remain for user-customizable colors
+- Semantic aliases provide easier maintenance
+- RGB format in CSS allows for opacity control
+
--- a/api/video-meta.ts
+++ b/api/video-meta.ts
@@ -1,8 +1,10 @@
 import type { VercelRequest, VercelResponse } from '@vercel/node'
-import { getSubtitles, getVideoDetails } from '@treeee/youtube-caption-extractor'
+import { getSubtitles } from '@treeee/youtube-caption-extractor'

 type Caption = { start: number; dur: number; text: string }

+type Subtitle = { start: string | number; dur: string | number; text: string }
+
 type CacheEntry = {
  body: unknown
  expires: number
@@ -75,9 +77,15 @@ function extractVideoId(url: string): { id: string; source: 'youtube' | 'vimeo'
 async function pickCaptions(videoID: string, preferredLangs: string[], manualFirst: boolean): Promise<{ caps: Caption[]; lang: string; isAuto: boolean } | null> {
  for (const lang of preferredLangs) {
    try {
-      const caps = await getSubtitles({ videoID, lang, auto: !manualFirst ? true : false })
+      const caps = await getSubtitles({ videoID, lang })
      if (Array.isArray(caps) && caps.length > 0) {
-        return { caps, lang, isAuto: !manualFirst }
+        // Convert the returned subtitles to our Caption format
+        const convertedCaps: Caption[] = caps.map((cap: Subtitle) => ({
+          start: typeof cap.start === 'string' ? parseFloat(cap.start) : cap.start,
+          dur: typeof cap.dur === 'string' ? parseFloat(cap.dur) : cap.dur,
+          text: cap.text
+        }))
+        return { caps: convertedCaps, lang, isAuto: !manualFirst }
      }
    } catch {
      // try next
@@ -139,13 +147,9 @@ export default async function handler(req: VercelRequest, res: VercelResponse) {
  try {
    if (videoInfo.source === 'youtube') {
      // YouTube handling
-      const details: unknown = await getVideoDetails({ videoID: videoInfo.id, lang })
-      // Be tolerant to possible shapes returned by the extractor
-      const title = (details as { title?: string } | undefined)?.title || ''
-      const d1 = (details as { description?: string } | undefined)?.description
-      const d2 = (details as { shortDescription?: string } | undefined)?.shortDescription
-      const d3 = (details as { descriptionText?: string } | undefined)?.descriptionText
-      const description = d1 || d2 || d3 || ''
+      // Note: getVideoDetails doesn't exist in the library, so we use a simplified approach
+      const title = ''
+      const description = ''

      // Language order: manual en -> uiLocale -> lang -> any manual, then auto with same order
      const langs: string[] = Array.from(new Set(['en', uiLocale, lang].filter(Boolean) as string[]))
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "boris",
-  "version": "0.6.0",
+  "version": "0.6.2",
  "description": "A minimal nostr client for bookmark management",
  "homepage": "https://read.withboris.com/",
  "type": "module",
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -101,6 +101,15 @@ function AppRoutes({
          />
        } 
      />
+      <Route 
+        path="/me/writings" 
+        element={
+          <Bookmarks 
+            relayPool={relayPool}
+            onLogout={handleLogout}
+          />
+        } 
+      />
      <Route path="/" element={<Navigate to={`/a/${DEFAULT_ARTICLE}`} replace />} />
    </Routes>
  )
@@ -238,7 +247,7 @@ function App() {
    <EventStoreProvider eventStore={eventStore}>
      <AccountsProvider manager={accountManager}>
        <BrowserRouter>
-          <div className="min-h-screen p-0 md:p-4 max-w-none m-0 relative">
+          <div className="min-h-screen p-0 max-w-none m-0 relative">
            <AppRoutes relayPool={relayPool} showToast={showToast} />
          </div>
        </BrowserRouter>
--- a/src/components/AddBookmarkModal.tsx
+++ b/src/components/AddBookmarkModal.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react'
+import { createPortal } from 'react-dom'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faTimes, faSpinner } from '@fortawesome/free-solid-svg-icons'
 import IconButton from './IconButton'
@@ -183,7 +184,7 @@ const AddBookmarkModal: React.FC<AddBookmarkModalProps> = ({ onClose, onSave })
    }
  }

-  return (
+  return createPortal(
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        <div className="modal-header">
@@ -280,7 +281,8 @@ const AddBookmarkModal: React.FC<AddBookmarkModalProps> = ({ onClose, onSave })
          </div>
        </form>
      </div>
-    </div>
+    </div>,
+    document.body
  )
 }

--- a/src/components/BookmarkList.tsx
+++ b/src/components/BookmarkList.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useRef } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faChevronLeft, faBookmark, faSpinner, faList, faThLarge, faImage, faRotate } from '@fortawesome/free-solid-svg-icons'
 import { formatDistanceToNow } from 'date-fns'
@@ -10,6 +10,8 @@ import IconButton from './IconButton'
 import { ViewMode } from './Bookmarks'
 import { extractUrlsFromContent } from '../services/bookmarkHelpers'
 import { UserSettings } from '../services/settingsService'
+import { usePullToRefresh } from '../hooks/usePullToRefresh'
+import PullToRefreshIndicator from './PullToRefreshIndicator'

 interface BookmarkListProps {
  bookmarks: Bookmark[]
@@ -48,6 +50,19 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
  settings,
  isMobile = false
 }) => {
+  const bookmarksListRef = useRef<HTMLDivElement>(null)
+
+  // Pull-to-refresh for bookmarks
+  const pullToRefreshState = usePullToRefresh(bookmarksListRef, {
+    onRefresh: () => {
+      if (onRefresh) {
+        onRefresh()
+      }
+    },
+    isRefreshing: isRefreshing || false,
+    disabled: !onRefresh
+  })
+
  // Helper to check if a bookmark has either content or a URL
  const hasContentOrUrl = (ib: IndividualBookmark) => {
    // Check if has content (text)
@@ -124,7 +139,16 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
          </div>
        )
      ) : (
-        <div className="bookmarks-list">
+        <div 
+          ref={bookmarksListRef}
+          className={`bookmarks-list pull-to-refresh-container ${pullToRefreshState.isPulling ? 'is-pulling' : ''}`}
+        >
+          <PullToRefreshIndicator
+            isPulling={pullToRefreshState.isPulling}
+            pullDistance={pullToRefreshState.pullDistance}
+            canRefresh={pullToRefreshState.canRefresh}
+            isRefreshing={isRefreshing || false}
+          />
          <div className={`bookmarks-grid bookmarks-${viewMode}`}>
            {allIndividualBookmarks.map((individualBookmark, index) => 
              <BookmarkItem 
@@ -137,37 +161,20 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
              />
            )}
          </div>
-          {onRefresh && (
-            <div className="refresh-section" style={{
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              gap: '0.5rem',
-              padding: '1rem',
-              marginTop: '1rem',
-              borderTop: '1px solid var(--border-color)',
-              fontSize: '0.85rem',
-              color: 'var(--text-secondary)'
-            }}>
-              <IconButton
-                icon={faRotate}
-                onClick={onRefresh}
-                title="Refresh bookmarks"
-                ariaLabel="Refresh bookmarks"
-                variant="ghost"
-                disabled={isRefreshing}
-                spin={isRefreshing}
-              />
-              {lastFetchTime && (
-                <span>
-                  Updated {formatDistanceToNow(lastFetchTime, { addSuffix: true })}
-                </span>
-              )}
-            </div>
-          )}
        </div>
      )}
      <div className="view-mode-controls">
+        {onRefresh && (
+          <IconButton
+            icon={faRotate}
+            onClick={onRefresh}
+            title={lastFetchTime ? `Refresh bookmarks (updated ${formatDistanceToNow(lastFetchTime, { addSuffix: true })})` : 'Refresh bookmarks'}
+            ariaLabel="Refresh bookmarks"
+            variant="ghost"
+            disabled={isRefreshing}
+            spin={isRefreshing}
+          />
+        )}
        <IconButton
          icon={faList}
          onClick={() => onViewModeChange('compact')}
--- a/src/components/Bookmarks.tsx
+++ b/src/components/Bookmarks.tsx
@@ -42,7 +42,8 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
  const meTab = location.pathname === '/me' ? 'highlights' : 
                location.pathname === '/me/highlights' ? 'highlights' :
                location.pathname === '/me/reading-list' ? 'reading-list' :
-                location.pathname === '/me/archive' ? 'archive' : 'highlights'
+                location.pathname === '/me/archive' ? 'archive' :
+                location.pathname === '/me/writings' ? 'writings' : 'highlights'
  
  // Track previous location for going back from settings/me/explore
  useEffect(() => {
--- a/src/components/ContentPanel.tsx
+++ b/src/components/ContentPanel.tsx
@@ -61,6 +61,9 @@ interface ContentPanelProps {
  // For highlight creation
  onTextSelection?: (text: string) => void
  onClearSelection?: () => void
+  // For reading progress indicator positioning
+  isSidebarCollapsed?: boolean
+  isHighlightsCollapsed?: boolean
 }

 const ContentPanel: React.FC<ContentPanelProps> = ({ 
@@ -70,6 +73,7 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
  markdown, 
  selectedUrl,
  image,
+  summary,
  published,
  highlights = [],
  showHighlights = true,
@@ -85,15 +89,19 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
  currentUserPubkey,
  followedPubkeys = new Set(),
  onTextSelection,
-  onClearSelection
+  onClearSelection,
+  isSidebarCollapsed = false,
+  isHighlightsCollapsed = false
 }) => {
  const [isMarkedAsRead, setIsMarkedAsRead] = useState(false)
  const [isCheckingReadStatus, setIsCheckingReadStatus] = useState(false)
  const [showCheckAnimation, setShowCheckAnimation] = useState(false)
  const [showArticleMenu, setShowArticleMenu] = useState(false)
  const [showVideoMenu, setShowVideoMenu] = useState(false)
+  const [showExternalMenu, setShowExternalMenu] = useState(false)
  const articleMenuRef = useRef<HTMLDivElement>(null)
  const videoMenuRef = useRef<HTMLDivElement>(null)
+  const externalMenuRef = useRef<HTMLDivElement>(null)
  const [ytMeta, setYtMeta] = useState<{ title?: string; description?: string; transcript?: string } | null>(null)
  const { renderedHtml: renderedMarkdownHtml, previewRef: markdownPreviewRef, processedMarkdown } = useMarkdownToHTML(markdown, relayPool)
  
@@ -139,15 +147,18 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
      if (videoMenuRef.current && !videoMenuRef.current.contains(target)) {
        setShowVideoMenu(false)
      }
+      if (externalMenuRef.current && !externalMenuRef.current.contains(target)) {
+        setShowExternalMenu(false)
+      }
    }
    
-    if (showArticleMenu || showVideoMenu) {
+    if (showArticleMenu || showVideoMenu || showExternalMenu) {
      document.addEventListener('mousedown', handleClickOutside)
      return () => {
        document.removeEventListener('mousedown', handleClickOutside)
      }
    }
-  }, [showArticleMenu, showVideoMenu])
+  }, [showArticleMenu, showVideoMenu, showExternalMenu])

  const readingStats = useMemo(() => {
    const content = markdown || html || ''
@@ -274,6 +285,38 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
      setShowVideoMenu(false)
    }
  }
+
+  // External article actions
+  const toggleExternalMenu = () => setShowExternalMenu(v => !v)
+
+  const handleOpenExternalUrl = () => {
+    if (selectedUrl) window.open(selectedUrl, '_blank', 'noopener,noreferrer')
+    setShowExternalMenu(false)
+  }
+
+  const handleCopyExternalUrl = async () => {
+    try {
+      if (selectedUrl) await navigator.clipboard.writeText(selectedUrl)
+    } catch (e) {
+      console.warn('Clipboard copy failed', e)
+    } finally {
+      setShowExternalMenu(false)
+    }
+  }
+
+  const handleShareExternalUrl = async () => {
+    try {
+      if (selectedUrl && (navigator as { share?: (d: { title?: string; url?: string }) => Promise<void> }).share) {
+        await (navigator as { share: (d: { title?: string; url?: string }) => Promise<void> }).share({ title: title || 'Article', url: selectedUrl })
+      } else if (selectedUrl) {
+        await navigator.clipboard.writeText(selectedUrl)
+      }
+    } catch (e) {
+      console.warn('Share failed', e)
+    } finally {
+      setShowExternalMenu(false)
+    }
+  }
  
  // Check if article is already marked as read when URL/article changes
  useEffect(() => {
@@ -381,6 +424,8 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
          progress={progressPercentage}
          isComplete={isReadingComplete}
          showPercentage={true}
+          isSidebarCollapsed={isSidebarCollapsed}
+          isHighlightsCollapsed={isHighlightsCollapsed}
        />
      )}
      
@@ -409,7 +454,7 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
      <ReaderHeader 
        title={ytMeta?.title || title}
        image={image}
-        summary={undefined}
+        summary={summary}
        published={published}
        readingTimeText={isExternalVideo ? (videoDurationSec !== null ? formatDuration(videoDurationSec) : null) : (readingStats ? readingStats.text : null)}
        hasHighlights={hasHighlights}
@@ -525,6 +570,47 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
            />
          )}
          
+          {/* Article menu for external URLs */}
+          {!isNostrArticle && !isExternalVideo && selectedUrl && (
+            <div className="article-menu-container">
+              <div className="article-menu-wrapper" ref={externalMenuRef}>
+                <button
+                  className="article-menu-btn"
+                  onClick={toggleExternalMenu}
+                  title="More options"
+                >
+                  <FontAwesomeIcon icon={faEllipsisH} />
+                </button>
+                
+                {showExternalMenu && (
+                  <div className="article-menu">
+                    <button
+                      className="article-menu-item"
+                      onClick={handleOpenExternalUrl}
+                    >
+                      <FontAwesomeIcon icon={faExternalLinkAlt} />
+                      <span>Open Original URL</span>
+                    </button>
+                    <button
+                      className="article-menu-item"
+                      onClick={handleCopyExternalUrl}
+                    >
+                      <FontAwesomeIcon icon={faCopy} />
+                      <span>Copy URL</span>
+                    </button>
+                    <button
+                      className="article-menu-item"
+                      onClick={handleShareExternalUrl}
+                    >
+                      <FontAwesomeIcon icon={faShare} />
+                      <span>Share</span>
+                    </button>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+          
          {/* Article menu for nostr-native articles */}
          {isNostrArticle && currentArticle && articleLinks && (
            <div className="article-menu-container">
--- a/src/components/Explore.tsx
+++ b/src/components/Explore.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faSpinner, faExclamationCircle, faNewspaper } from '@fortawesome/free-solid-svg-icons'
 import { Hooks } from 'applesauce-react'
@@ -8,6 +8,8 @@ import { fetchContacts } from '../services/contactService'
 import { fetchBlogPostsFromAuthors, BlogPostPreview } from '../services/exploreService'
 import BlogPostCard from './BlogPostCard'
 import { getCachedPosts, upsertCachedPost, setCachedPosts } from '../services/exploreCache'
+import { usePullToRefresh } from '../hooks/usePullToRefresh'
+import PullToRefreshIndicator from './PullToRefreshIndicator'

 interface ExploreProps {
  relayPool: RelayPool
@@ -18,6 +20,8 @@ const Explore: React.FC<ExploreProps> = ({ relayPool }) => {
  const [blogPosts, setBlogPosts] = useState<BlogPostPreview[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
+  const exploreContainerRef = useRef<HTMLDivElement>(null)
+  const [refreshTrigger, setRefreshTrigger] = useState(0)

  useEffect(() => {
    const loadBlogPosts = async () => {
@@ -116,7 +120,15 @@ const Explore: React.FC<ExploreProps> = ({ relayPool }) => {
    }

    loadBlogPosts()
-  }, [relayPool, activeAccount, blogPosts.length])
+  }, [relayPool, activeAccount, blogPosts.length, refreshTrigger])
+
+  // Pull-to-refresh
+  const pullToRefreshState = usePullToRefresh(exploreContainerRef, {
+    onRefresh: () => {
+      setRefreshTrigger(prev => prev + 1)
+    },
+    isRefreshing: loading
+  })

  const getPostUrl = (post: BlogPostPreview) => {
    // Get the d-tag identifier
@@ -144,7 +156,16 @@ const Explore: React.FC<ExploreProps> = ({ relayPool }) => {
  }

  return (
-    <div className="explore-container">
+    <div 
+      ref={exploreContainerRef}
+      className={`explore-container pull-to-refresh-container ${pullToRefreshState.isPulling ? 'is-pulling' : ''}`}
+    >
+      <PullToRefreshIndicator
+        isPulling={pullToRefreshState.isPulling}
+        pullDistance={pullToRefreshState.pullDistance}
+        canRefresh={pullToRefreshState.canRefresh}
+        isRefreshing={loading && pullToRefreshState.canRefresh}
+      />
      <div className="explore-header">
        <h1>
          <FontAwesomeIcon icon={faNewspaper} />
--- a/src/components/HighlightsPanel.tsx
+++ b/src/components/HighlightsPanel.tsx
@@ -1,11 +1,13 @@
-import React, { useState } from 'react'
+import React, { useState, useRef } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faHighlighter } from '@fortawesome/free-solid-svg-icons'
 import { Highlight } from '../types/highlights'
 import { HighlightItem } from './HighlightItem'
 import { useFilteredHighlights } from '../hooks/useFilteredHighlights'
+import { usePullToRefresh } from '../hooks/usePullToRefresh'
 import HighlightsPanelCollapsed from './HighlightsPanel/HighlightsPanelCollapsed'
 import HighlightsPanelHeader from './HighlightsPanel/HighlightsPanelHeader'
+import PullToRefreshIndicator from './PullToRefreshIndicator'
 import { RelayPool } from 'applesauce-relay'
 import { IEventStore } from 'applesauce-core'
 import { UserSettings } from '../services/settingsService'
@@ -57,12 +59,24 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
 }) => {
  const [showHighlights, setShowHighlights] = useState(true)
  const [localHighlights, setLocalHighlights] = useState(highlights)
+  const highlightsListRef = useRef<HTMLDivElement>(null)
  
  const handleToggleHighlights = () => {
    const newValue = !showHighlights
    setShowHighlights(newValue)
    onToggleHighlights?.(newValue)
  }
+
+  // Pull-to-refresh for highlights
+  const pullToRefreshState = usePullToRefresh(highlightsListRef, {
+    onRefresh: () => {
+      if (onRefresh) {
+        onRefresh()
+      }
+    },
+    isRefreshing: loading,
+    disabled: !onRefresh
+  })
  
  // Keep track of highlight updates
  React.useEffect(() => {
@@ -127,7 +141,16 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
          </p>
        </div>
      ) : (
-        <div className="highlights-list">
+        <div 
+          ref={highlightsListRef}
+          className={`highlights-list pull-to-refresh-container ${pullToRefreshState.isPulling ? 'is-pulling' : ''}`}
+        >
+          <PullToRefreshIndicator
+            isPulling={pullToRefreshState.isPulling}
+            pullDistance={pullToRefreshState.pullDistance}
+            canRefresh={pullToRefreshState.canRefresh}
+            isRefreshing={loading}
+          />
          {filteredHighlights.map((highlight) => (
            <HighlightItem
              key={highlight.id}
--- a/src/components/HighlightsPanel/HighlightsPanelHeader.tsx
+++ b/src/components/HighlightsPanel/HighlightsPanelHeader.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faChevronRight, faEye, faEyeSlash, faRotate, faUser, faUserGroup, faNetworkWired } from '@fortawesome/free-solid-svg-icons'
 import { HighlightVisibility } from '../HighlightsPanel'
+import IconButton from '../IconButton'

 interface HighlightsPanelHeaderProps {
  loading: boolean
@@ -32,76 +32,72 @@ const HighlightsPanelHeader: React.FC<HighlightsPanelHeaderProps> = ({
        <div className="highlights-actions-left">
          {onHighlightVisibilityChange && (
            <div className="highlight-level-toggles">
-              <button
+              <IconButton
+                icon={faNetworkWired}
                onClick={() => onHighlightVisibilityChange({ 
                  ...highlightVisibility, 
                  nostrverse: !highlightVisibility.nostrverse 
                })}
-                className={`level-toggle-btn ${highlightVisibility.nostrverse ? 'active' : ''}`}
                title="Toggle nostrverse highlights"
-                aria-label="Toggle nostrverse highlights"
+                ariaLabel="Toggle nostrverse highlights"
+                variant={highlightVisibility.nostrverse ? 'primary' : 'ghost'}
                style={{ color: highlightVisibility.nostrverse ? 'var(--highlight-color-nostrverse, #9333ea)' : undefined }}
-              >
-                <FontAwesomeIcon icon={faNetworkWired} />
-              </button>
-              <button
+              />
+              <IconButton
+                icon={faUserGroup}
                onClick={() => onHighlightVisibilityChange({ 
                  ...highlightVisibility, 
                  friends: !highlightVisibility.friends 
                })}
-                className={`level-toggle-btn ${highlightVisibility.friends ? 'active' : ''}`}
                title={currentUserPubkey ? "Toggle friends highlights" : "Login to see friends highlights"}
-                aria-label="Toggle friends highlights"
-                style={{ color: highlightVisibility.friends ? 'var(--highlight-color-friends, #f97316)' : undefined }}
+                ariaLabel="Toggle friends highlights"
+                variant={highlightVisibility.friends ? 'primary' : 'ghost'}
                disabled={!currentUserPubkey}
-              >
-                <FontAwesomeIcon icon={faUserGroup} />
-              </button>
-              <button
+                style={{ color: highlightVisibility.friends ? 'var(--highlight-color-friends, #f97316)' : undefined }}
+              />
+              <IconButton
+                icon={faUser}
                onClick={() => onHighlightVisibilityChange({ 
                  ...highlightVisibility, 
                  mine: !highlightVisibility.mine 
                })}
-                className={`level-toggle-btn ${highlightVisibility.mine ? 'active' : ''}`}
                title={currentUserPubkey ? "Toggle my highlights" : "Login to see your highlights"}
-                aria-label="Toggle my highlights"
-                style={{ color: highlightVisibility.mine ? 'var(--highlight-color-mine, #eab308)' : undefined }}
+                ariaLabel="Toggle my highlights"
+                variant={highlightVisibility.mine ? 'primary' : 'ghost'}
                disabled={!currentUserPubkey}
-              >
-                <FontAwesomeIcon icon={faUser} />
-              </button>
+                style={{ color: highlightVisibility.mine ? 'var(--highlight-color-mine, #eab308)' : undefined }}
+              />
            </div>
          )}
          {onRefresh && (
-            <button
+            <IconButton
+              icon={faRotate}
              onClick={onRefresh}
-              className="refresh-highlights-btn"
              title="Refresh highlights"
-              aria-label="Refresh highlights"
+              ariaLabel="Refresh highlights"
+              variant="ghost"
              disabled={loading}
-            >
-              <FontAwesomeIcon icon={faRotate} spin={loading} />
-            </button>
+              spin={loading}
+            />
          )}
          {hasHighlights && (
-            <button
+            <IconButton
+              icon={showHighlights ? faEye : faEyeSlash}
              onClick={onToggleHighlights}
-              className="toggle-highlight-display-btn"
              title={showHighlights ? 'Hide highlights' : 'Show highlights'}
-              aria-label={showHighlights ? 'Hide highlights' : 'Show highlights'}
-            >
-              <FontAwesomeIcon icon={showHighlights ? faEye : faEyeSlash} />
-            </button>
+              ariaLabel={showHighlights ? 'Hide highlights' : 'Show highlights'}
+              variant="ghost"
+            />
          )}
        </div>
-        <button
+        <IconButton
+          icon={faChevronRight}
          onClick={onToggleCollapse}
-          className="toggle-highlights-btn"
          title="Collapse highlights panel"
-          aria-label="Collapse highlights panel"
-        >
-          <FontAwesomeIcon icon={faChevronRight} rotation={180} />
-        </button>
+          ariaLabel="Collapse highlights panel"
+          variant="ghost"
+          style={{ transform: 'rotate(180deg)' }}
+        />
      </div>
    </div>
  )
--- a/src/components/IconButton.tsx
+++ b/src/components/IconButton.tsx
@@ -12,6 +12,7 @@ interface IconButtonProps {
  disabled?: boolean
  spin?: boolean
  className?: string
+  style?: React.CSSProperties
 }

 const IconButton: React.FC<IconButtonProps> = ({
@@ -23,7 +24,8 @@ const IconButton: React.FC<IconButtonProps> = ({
  size = 33,
  disabled = false,
  spin = false,
-  className = ''
+  className = '',
+  style
 }) => {
  return (
    <button
@@ -31,7 +33,7 @@ const IconButton: React.FC<IconButtonProps> = ({
      onClick={onClick}
      title={title}
      aria-label={ariaLabel || title}
-      style={{ width: size, height: size }}
+      style={{ width: size, height: size, ...style }}
      disabled={disabled}
    >
      <FontAwesomeIcon icon={icon} spin={spin} />
--- a/src/components/Me.tsx
+++ b/src/components/Me.tsx
@@ -1,6 +1,6 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faSpinner, faExclamationCircle, faHighlighter, faBookmark, faList, faThLarge, faImage } from '@fortawesome/free-solid-svg-icons'
+import { faSpinner, faExclamationCircle, faHighlighter, faBookmark, faList, faThLarge, faImage, faPenToSquare } from '@fortawesome/free-solid-svg-icons'
 import { Hooks } from 'applesauce-react'
 import { RelayPool } from 'applesauce-relay'
 import { nip19 } from 'nostr-tools'
@@ -10,7 +10,8 @@ import { HighlightItem } from './HighlightItem'
 import { fetchHighlights } from '../services/highlightService'
 import { fetchBookmarks } from '../services/bookmarkService'
 import { fetchReadArticlesWithData } from '../services/libraryService'
-import { BlogPostPreview } from '../services/exploreService'
+import { BlogPostPreview, fetchBlogPostsFromAuthors } from '../services/exploreService'
+import { RELAYS } from '../config/relays'
 import { Bookmark, IndividualBookmark } from '../types/bookmarks'
 import AuthorCard from './AuthorCard'
 import BlogPostCard from './BlogPostCard'
@@ -20,13 +21,15 @@ import { ViewMode } from './Bookmarks'
 import { extractUrlsFromContent } from '../services/bookmarkHelpers'
 import { getCachedMeData, setCachedMeData, updateCachedHighlights } from '../services/meCache'
 import { faBooks } from '../icons/customIcons'
+import { usePullToRefresh } from '../hooks/usePullToRefresh'
+import PullToRefreshIndicator from './PullToRefreshIndicator'

 interface MeProps {
  relayPool: RelayPool
  activeTab?: TabType
 }

-type TabType = 'highlights' | 'reading-list' | 'archive'
+type TabType = 'highlights' | 'reading-list' | 'archive' | 'writings'

 const Me: React.FC<MeProps> = ({ relayPool, activeTab: propActiveTab }) => {
  const activeAccount = Hooks.useActiveAccount()
@@ -35,9 +38,12 @@ const Me: React.FC<MeProps> = ({ relayPool, activeTab: propActiveTab }) => {
  const [highlights, setHighlights] = useState<Highlight[]>([])
  const [bookmarks, setBookmarks] = useState<Bookmark[]>([])
  const [readArticles, setReadArticles] = useState<BlogPostPreview[]>([])
+  const [writings, setWritings] = useState<BlogPostPreview[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [viewMode, setViewMode] = useState<ViewMode>('cards')
+  const meContainerRef = useRef<HTMLDivElement>(null)
+  const [refreshTrigger, setRefreshTrigger] = useState(0)

  // Update local state when prop changes
  useEffect(() => {
@@ -66,14 +72,16 @@ const Me: React.FC<MeProps> = ({ relayPool, activeTab: propActiveTab }) => {
          setReadArticles(cached.readArticles)
        }

-        // Fetch highlights and read articles
-        const [userHighlights, userReadArticles] = await Promise.all([
+        // Fetch highlights, read articles, and writings
+        const [userHighlights, userReadArticles, userWritings] = await Promise.all([
          fetchHighlights(relayPool, activeAccount.pubkey),
-          fetchReadArticlesWithData(relayPool, activeAccount.pubkey)
+          fetchReadArticlesWithData(relayPool, activeAccount.pubkey),
+          fetchBlogPostsFromAuthors(relayPool, [activeAccount.pubkey], RELAYS)
        ])

        setHighlights(userHighlights)
        setReadArticles(userReadArticles)
+        setWritings(userWritings)

        // Fetch bookmarks using callback pattern
        let fetchedBookmarks: Bookmark[] = []
@@ -98,7 +106,15 @@ const Me: React.FC<MeProps> = ({ relayPool, activeTab: propActiveTab }) => {
    }

    loadData()
-  }, [relayPool, activeAccount])
+  }, [relayPool, activeAccount, refreshTrigger])
+
+  // Pull-to-refresh
+  const pullToRefreshState = usePullToRefresh(meContainerRef, {
+    onRefresh: () => {
+      setRefreshTrigger(prev => prev + 1)
+    },
+    isRefreshing: loading
+  })

  const handleHighlightDelete = (highlightId: string) => {
    setHighlights(prev => {
@@ -163,7 +179,7 @@ const Me: React.FC<MeProps> = ({ relayPool, activeTab: propActiveTab }) => {
    .sort((a, b) => ((b.added_at || 0) - (a.added_at || 0)) || ((b.created_at || 0) - (a.created_at || 0)))

  // Only show full loading screen if we don't have any data yet
-  const hasData = highlights.length > 0 || bookmarks.length > 0 || readArticles.length > 0
+  const hasData = highlights.length > 0 || bookmarks.length > 0 || readArticles.length > 0 || writings.length > 0
  
  if (loading && !hasData) {
    return (
@@ -274,13 +290,39 @@ const Me: React.FC<MeProps> = ({ relayPool, activeTab: propActiveTab }) => {
          </div>
        )

+      case 'writings':
+        return writings.length === 0 ? (
+          <div className="explore-error">
+            <p>No articles written yet. Publish your first article to see it here!</p>
+          </div>
+        ) : (
+          <div className="explore-grid">
+            {writings.map((post) => (
+              <BlogPostCard
+                key={post.event.id}
+                post={post}
+                href={getPostUrl(post)}
+              />
+            ))}
+          </div>
+        )
+
      default:
        return null
    }
  }

  return (
-    <div className="explore-container">
+    <div 
+      ref={meContainerRef}
+      className={`explore-container pull-to-refresh-container ${pullToRefreshState.isPulling ? 'is-pulling' : ''}`}
+    >
+      <PullToRefreshIndicator
+        isPulling={pullToRefreshState.isPulling}
+        pullDistance={pullToRefreshState.pullDistance}
+        canRefresh={pullToRefreshState.canRefresh}
+        isRefreshing={loading && pullToRefreshState.canRefresh}
+      />
      <div className="explore-header">
        {activeAccount && <AuthorCard authorPubkey={activeAccount.pubkey} />}
        
@@ -318,6 +360,15 @@ const Me: React.FC<MeProps> = ({ relayPool, activeTab: propActiveTab }) => {
            <span className="tab-label">Archive</span>
            <span className="tab-count">({readArticles.length})</span>
          </button>
+          <button
+            className={`me-tab ${activeTab === 'writings' ? 'active' : ''}`}
+            data-tab="writings"
+            onClick={() => navigate('/me/writings')}
+          >
+            <FontAwesomeIcon icon={faPenToSquare} />
+            <span className="tab-label">Writings</span>
+            <span className="tab-count">({writings.length})</span>
+          </button>
        </div>
      </div>

--- a/src/components/PullToRefreshIndicator.tsx
+++ b/src/components/PullToRefreshIndicator.tsx
@@ -0,0 +1,61 @@
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faArrowDown, faSpinner } from '@fortawesome/free-solid-svg-icons'
+
+interface PullToRefreshIndicatorProps {
+  isPulling: boolean
+  pullDistance: number
+  canRefresh: boolean
+  isRefreshing: boolean
+  threshold?: number
+}
+
+const PullToRefreshIndicator: React.FC<PullToRefreshIndicatorProps> = ({
+  isPulling,
+  pullDistance,
+  canRefresh,
+  isRefreshing,
+  threshold = 80
+}) => {
+  // Don't show if not pulling and not refreshing
+  if (!isPulling && !isRefreshing) return null
+
+  const opacity = Math.min(pullDistance / threshold, 1)
+  const rotation = (pullDistance / threshold) * 180
+
+  return (
+    <div 
+      className="pull-to-refresh-indicator"
+      style={{
+        opacity: isRefreshing ? 1 : opacity,
+        transform: `translateY(${isRefreshing ? 0 : -20 + pullDistance / 2}px)`
+      }}
+    >
+      <div 
+        className="pull-to-refresh-icon"
+        style={{
+          transform: isRefreshing ? 'none' : `rotate(${rotation}deg)`
+        }}
+      >
+        {isRefreshing ? (
+          <FontAwesomeIcon icon={faSpinner} spin />
+        ) : (
+          <FontAwesomeIcon 
+            icon={faArrowDown} 
+            style={{ color: canRefresh ? 'var(--accent-color, #3b82f6)' : 'var(--text-secondary)' }}
+          />
+        )}
+      </div>
+      <div className="pull-to-refresh-text">
+        {isRefreshing 
+          ? 'Refreshing...' 
+          : canRefresh 
+            ? 'Release to refresh' 
+            : 'Pull to refresh'}
+      </div>
+    </div>
+  )
+}
+
+export default PullToRefreshIndicator
+
--- a/src/components/ReadingProgressIndicator.tsx
+++ b/src/components/ReadingProgressIndicator.tsx
@@ -5,18 +5,36 @@ interface ReadingProgressIndicatorProps {
  isComplete?: boolean
  showPercentage?: boolean
  className?: string
+  isSidebarCollapsed?: boolean
+  isHighlightsCollapsed?: boolean
 }

 export const ReadingProgressIndicator: React.FC<ReadingProgressIndicatorProps> = ({
  progress,
  isComplete = false,
  showPercentage = true,
-  className = ''
+  className = '',
+  isSidebarCollapsed = false,
+  isHighlightsCollapsed = false
 }) => {
  const clampedProgress = Math.min(100, Math.max(0, progress))
  
+  // Calculate left and right offsets based on sidebar states (desktop only)
+  const leftOffset = isSidebarCollapsed 
+    ? 'var(--sidebar-collapsed-width)' 
+    : 'var(--sidebar-width)'
+  const rightOffset = isHighlightsCollapsed 
+    ? 'var(--highlights-collapsed-width)' 
+    : 'var(--highlights-width)'
+  
  return (
-    <div className={`fixed bottom-0 left-0 right-0 z-[1102] bg-[rgba(26,26,26,0.85)] backdrop-blur-sm px-3 py-1 flex items-center gap-2 transition-all duration-300 ${className}`}>
+    <div 
+      className={`reading-progress-bar fixed bottom-0 left-0 right-0 z-[1102] bg-[rgba(26,26,26,0.85)] backdrop-blur-sm px-3 py-1 flex items-center gap-2 transition-all duration-300 ${className}`}
+      style={{
+        '--left-offset': leftOffset,
+        '--right-offset': rightOffset
+      } as React.CSSProperties}
+    >
      <div className="flex-1 h-0.5 bg-white/10 rounded-full overflow-hidden relative">
        <div 
          className={`h-full rounded-full transition-all duration-300 relative ${
--- a/src/components/Settings/ReadingDisplaySettings.tsx
+++ b/src/components/Settings/ReadingDisplaySettings.tsx
@@ -73,7 +73,7 @@ const ReadingDisplaySettings: React.FC<ReadingDisplaySettingsProps> = ({ setting
        <label className="setting-label">My Highlights</label>
        <div className="setting-control">
          <ColorPicker
-            selectedColor={settings.highlightColorMine || '#ffff00'}
+            selectedColor={settings.highlightColorMine || '#fde047'}
            onColorChange={(color) => onUpdate({ highlightColorMine: color })}
          />
        </div>
--- a/src/components/Settings/RelaySettings.tsx
+++ b/src/components/Settings/RelaySettings.tsx
@@ -100,13 +100,16 @@ const RelaySettings: React.FC<RelaySettingsProps> = ({ relayStatuses }) => {
                    }} 
                  />
                  <div style={{ flex: 1, minWidth: 0 }}>
-                    <div style={{ 
-                      fontSize: '0.9rem',
-                      fontFamily: 'var(--font-mono, monospace)',
-                      whiteSpace: 'nowrap',
-                      overflow: 'hidden',
-                      textOverflow: 'ellipsis'
-                    }}>
+                    <div 
+                      className="relay-url"
+                      style={{ 
+                        fontSize: '0.9rem',
+                        fontFamily: 'var(--font-mono, monospace)',
+                        whiteSpace: 'nowrap',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis'
+                      }}
+                    >
                      {formatRelayUrl(relay.url)}
                    </div>
                  </div>
--- a/src/components/ThreePaneLayout.tsx
+++ b/src/components/ThreePaneLayout.tsx
@@ -221,45 +221,45 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {

  return (
    <>
-      {/* Mobile bookmark button - only show when viewing article */}
-      {isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed && (
+      {/* Mobile bookmark button - only show when viewing article (not on settings/explore/me) */}
+      {isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed && !props.showSettings && !props.showExplore && !props.showMe && (
        <button
-          className={`fixed z-[900] bg-[#2a2a2a] border border-[#444] rounded-lg text-[#ddd] flex items-center justify-center transition-all duration-300 active:scale-95 md:hidden ${
-            showMobileButtons ? 'opacity-100 visible' : 'opacity-0 invisible pointer-events-none'
+          className={`fixed z-[900] bg-zinc-800/70 border border-zinc-600/40 rounded-lg text-zinc-200 flex items-center justify-center transition-all duration-300 active:scale-95 backdrop-blur-sm md:hidden ${
+            showMobileButtons ? 'opacity-90 visible' : 'opacity-0 invisible pointer-events-none'
          }`}
          style={{
            top: 'calc(1rem + env(safe-area-inset-top))',
            left: 'calc(1rem + env(safe-area-inset-left))',
-            width: 'var(--min-touch-target)',
-            height: 'var(--min-touch-target)'
+            width: '40px',
+            height: '40px'
          }}
          onClick={props.onToggleSidebar}
          aria-label="Open bookmarks"
          aria-expanded={props.isSidebarOpen}
        >
-          <FontAwesomeIcon icon={faBookmark} />
+          <FontAwesomeIcon icon={faBookmark} size="sm" />
        </button>
      )}

-      {/* Mobile highlights button - only show when viewing article */}
-      {isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed && (
+      {/* Mobile highlights button - only show when viewing article (not on settings/explore/me) */}
+      {isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed && !props.showSettings && !props.showExplore && !props.showMe && (
        <button
-          className={`fixed z-[900] border border-[#444] rounded-lg flex items-center justify-center transition-all duration-300 active:scale-95 md:hidden ${
-            showMobileButtons ? 'opacity-100 visible' : 'opacity-0 invisible pointer-events-none'
+          className={`fixed z-[900] border border-zinc-600/40 rounded-lg flex items-center justify-center transition-all duration-300 active:scale-95 backdrop-blur-sm md:hidden ${
+            showMobileButtons ? 'opacity-90 visible' : 'opacity-0 invisible pointer-events-none'
          }`}
          style={{ 
            top: 'calc(1rem + env(safe-area-inset-top))',
            right: 'calc(1rem + env(safe-area-inset-right))',
-            width: 'var(--min-touch-target)',
-            height: 'var(--min-touch-target)',
-            backgroundColor: props.settings.highlightColorMine || '#ffff00',
+            width: '40px',
+            height: '40px',
+            backgroundColor: `${props.settings.highlightColorMine || '#fde047'}B3`,
            color: '#000'
          }}
          onClick={props.onToggleHighlightsPanel}
          aria-label="Open highlights"
          aria-expanded={!props.isHighlightsCollapsed}
        >
-          <FontAwesomeIcon icon={faHighlighter} />
+          <FontAwesomeIcon icon={faHighlighter} size="sm" />
        </button>
      )}

@@ -345,6 +345,8 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
              relayPool={props.relayPool}
              activeAccount={props.activeAccount}
              currentArticle={props.currentArticle}
+              isSidebarCollapsed={props.isCollapsed}
+              isHighlightsCollapsed={props.isHighlightsCollapsed}
            />
          )}
        </div>
--- a/src/hooks/useExternalUrlLoader.ts
+++ b/src/hooks/useExternalUrlLoader.ts
@@ -4,6 +4,19 @@ import { fetchReadableContent, ReadableContent } from '../services/readerService
 import { fetchHighlightsForUrl } from '../services/highlightService'
 import { Highlight } from '../types/highlights'

+// Helper to extract filename from URL
+function getFilenameFromUrl(url: string): string {
+  try {
+    const urlObj = new URL(url)
+    const pathname = urlObj.pathname
+    const filename = pathname.substring(pathname.lastIndexOf('/') + 1)
+    // Decode URI component to handle special characters
+    return decodeURIComponent(filename) || url
+  } catch {
+    return url
+  }
+}
+
 interface UseExternalUrlLoaderProps {
  url: string | undefined
  relayPool: RelayPool | null
@@ -84,8 +97,10 @@ export function useExternalUrlLoader({
        }
      } catch (err) {
        console.error('Failed to load external URL:', err)
+        // For videos and other media files, use the filename as the title
+        const filename = getFilenameFromUrl(url)
        setReaderContent({
-          title: 'Error Loading Content',
+          title: filename,
          html: `<p>Failed to load content: ${err instanceof Error ? err.message : 'Unknown error'}</p>`,
          url
        })
--- a/src/hooks/useHighlightCreation.ts
+++ b/src/hooks/useHighlightCreation.ts
@@ -1,4 +1,5 @@
 import { useCallback, useRef } from 'react'
+import { flushSync } from 'react-dom'
 import { RelayPool } from 'applesauce-relay'
 import { NostrEvent } from 'nostr-tools'
 import { IEventStore } from 'applesauce-core'
@@ -77,8 +78,18 @@ export const useHighlightCreation = ({
        publishedRelays: newHighlight.publishedRelays
      })
      
+      // Clear the browser's text selection immediately to allow DOM update
+      const selection = window.getSelection()
+      if (selection) {
+        selection.removeAllRanges()
+      }
+      
      highlightButtonRef.current?.clearSelection()
-      onHighlightCreated(newHighlight)
+      
+      // Force synchronous render to show highlight immediately
+      flushSync(() => {
+        onHighlightCreated(newHighlight)
+      })
    } catch (error) {
      console.error('❌ Failed to create highlight:', error)
      // Re-throw to allow parent to handle
--- a/src/hooks/useHighlightInteractions.ts
+++ b/src/hooks/useHighlightInteractions.ts
@@ -1,4 +1,4 @@
-import { useEffect, useCallback, useRef } from 'react'
+import { useEffect, useCallback, useRef, useState } from 'react'

 interface UseHighlightInteractionsParams {
  onHighlightClick?: (highlightId: string) => void
@@ -14,6 +14,25 @@ export const useHighlightInteractions = ({
  onClearSelection
 }: UseHighlightInteractionsParams) => {
  const contentRef = useRef<HTMLDivElement>(null)
+  const [contentVersion, setContentVersion] = useState(0)
+
+  // Watch for DOM changes (highlights being added/removed)
+  useEffect(() => {
+    if (!contentRef.current) return
+    
+    const observer = new MutationObserver(() => {
+      // Increment version to trigger re-attachment of handlers
+      setContentVersion(prev => prev + 1)
+    })
+    
+    observer.observe(contentRef.current, {
+      childList: true,
+      subtree: true,
+      characterData: false
+    })
+    
+    return () => observer.disconnect()
+  }, [])

  // Attach click handlers to highlight marks
  useEffect(() => {
@@ -37,24 +56,33 @@ export const useHighlightInteractions = ({
        mark.removeEventListener('click', handler)
      })
    }
-  }, [onHighlightClick])
+  }, [onHighlightClick, contentVersion])

  // Scroll to selected highlight
  useEffect(() => {
    if (!selectedHighlightId || !contentRef.current) return
    
-    const markElement = contentRef.current.querySelector(`mark[data-highlight-id="${selectedHighlightId}"]`)
-    
-    if (markElement) {
-      markElement.scrollIntoView({ behavior: 'smooth', block: 'center' })
+    // Use a small delay to ensure DOM is updated
+    const timeoutId = setTimeout(() => {
+      if (!contentRef.current) return
      
-      const htmlElement = markElement as HTMLElement
-      setTimeout(() => {
-        htmlElement.classList.add('highlight-pulse')
-        setTimeout(() => htmlElement.classList.remove('highlight-pulse'), 1500)
-      }, 500)
-    }
-  }, [selectedHighlightId])
+      const markElement = contentRef.current.querySelector(`mark[data-highlight-id="${selectedHighlightId}"]`)
+      
+      if (markElement) {
+        markElement.scrollIntoView({ behavior: 'smooth', block: 'center' })
+        
+        const htmlElement = markElement as HTMLElement
+        setTimeout(() => {
+          htmlElement.classList.add('highlight-pulse')
+          setTimeout(() => htmlElement.classList.remove('highlight-pulse'), 1500)
+        }, 500)
+      } else {
+        console.warn('Could not find mark element for highlight:', selectedHighlightId)
+      }
+    }, 100)
+    
+    return () => clearTimeout(timeoutId)
+  }, [selectedHighlightId, contentVersion])

  // Handle text selection (works for both mouse and touch)
  const handleSelectionEnd = useCallback(() => {
--- a/src/hooks/usePullToRefresh.ts
+++ b/src/hooks/usePullToRefresh.ts
@@ -0,0 +1,153 @@
+import { useEffect, useRef, useState, RefObject } from 'react'
+import { useIsCoarsePointer } from './useMediaQuery'
+
+interface UsePullToRefreshOptions {
+  onRefresh: () => void | Promise<void>
+  isRefreshing?: boolean
+  disabled?: boolean
+  threshold?: number // Distance in pixels to trigger refresh
+  resistance?: number // Resistance factor (higher = harder to pull)
+}
+
+interface PullToRefreshState {
+  isPulling: boolean
+  pullDistance: number
+  canRefresh: boolean
+}
+
+/**
+ * Hook to enable pull-to-refresh gesture on touch devices
+ * @param containerRef - Ref to the scrollable container element
+ * @param options - Configuration options
+ * @returns State of the pull gesture
+ */
+export function usePullToRefresh(
+  containerRef: RefObject<HTMLElement>,
+  options: UsePullToRefreshOptions
+): PullToRefreshState {
+  const {
+    onRefresh,
+    isRefreshing = false,
+    disabled = false,
+    threshold = 80,
+    resistance = 2.5
+  } = options
+
+  const isTouch = useIsCoarsePointer()
+  const [pullState, setPullState] = useState<PullToRefreshState>({
+    isPulling: false,
+    pullDistance: 0,
+    canRefresh: false
+  })
+
+  const touchStartY = useRef<number>(0)
+  const startScrollTop = useRef<number>(0)
+  const isDragging = useRef<boolean>(false)
+
+  useEffect(() => {
+    const container = containerRef.current
+    if (!container || !isTouch || disabled || isRefreshing) return
+
+    const handleTouchStart = (e: TouchEvent) => {
+      // Only start if scrolled to top
+      const scrollTop = container.scrollTop
+      if (scrollTop <= 0) {
+        touchStartY.current = e.touches[0].clientY
+        startScrollTop.current = scrollTop
+        isDragging.current = true
+      }
+    }
+
+    const handleTouchMove = (e: TouchEvent) => {
+      if (!isDragging.current) return
+
+      const currentY = e.touches[0].clientY
+      const deltaY = currentY - touchStartY.current
+      const scrollTop = container.scrollTop
+
+      // Only pull down when at top and pulling down
+      if (scrollTop <= 0 && deltaY > 0) {
+        // Prevent default scroll behavior
+        e.preventDefault()
+
+        // Apply resistance to make pulling feel natural
+        const distance = Math.min(deltaY / resistance, threshold * 1.5)
+        const canRefresh = distance >= threshold
+
+        setPullState({
+          isPulling: true,
+          pullDistance: distance,
+          canRefresh
+        })
+      } else {
+        // Reset if scrolled or pulling up
+        isDragging.current = false
+        setPullState({
+          isPulling: false,
+          pullDistance: 0,
+          canRefresh: false
+        })
+      }
+    }
+
+    const handleTouchEnd = async () => {
+      if (!isDragging.current) return
+
+      isDragging.current = false
+
+      if (pullState.canRefresh && !isRefreshing) {
+        // Keep the indicator visible while refreshing
+        setPullState(prev => ({
+          ...prev,
+          isPulling: false
+        }))
+
+        // Trigger refresh
+        await onRefresh()
+      }
+
+      // Reset state
+      setPullState({
+        isPulling: false,
+        pullDistance: 0,
+        canRefresh: false
+      })
+    }
+
+    const handleTouchCancel = () => {
+      isDragging.current = false
+      setPullState({
+        isPulling: false,
+        pullDistance: 0,
+        canRefresh: false
+      })
+    }
+
+    // Add event listeners with passive: false to allow preventDefault
+    container.addEventListener('touchstart', handleTouchStart, { passive: true })
+    container.addEventListener('touchmove', handleTouchMove, { passive: false })
+    container.addEventListener('touchend', handleTouchEnd, { passive: true })
+    container.addEventListener('touchcancel', handleTouchCancel, { passive: true })
+
+    return () => {
+      container.removeEventListener('touchstart', handleTouchStart)
+      container.removeEventListener('touchmove', handleTouchMove)
+      container.removeEventListener('touchend', handleTouchEnd)
+      container.removeEventListener('touchcancel', handleTouchCancel)
+    }
+  }, [containerRef, isTouch, disabled, isRefreshing, threshold, resistance, onRefresh, pullState.canRefresh])
+
+  // Reset pull state when refresh completes
+  useEffect(() => {
+    if (!isRefreshing && pullState.isPulling) {
+      setPullState({
+        isPulling: false,
+        pullDistance: 0,
+        canRefresh: false
+      })
+    }
+  }, [isRefreshing, pullState.isPulling])
+
+  return pullState
+}
+
--- a/src/hooks/useSettings.ts
+++ b/src/hooks/useSettings.ts
@@ -61,7 +61,7 @@ export function useSettings({ relayPool, eventStore, pubkey, accountManager }: U
      root.setProperty('--reading-font-size', `${settings.fontSize || 21}px`)
      
      // Set highlight colors for three levels
-      root.setProperty('--highlight-color-mine', settings.highlightColorMine || '#ffff00')
+      root.setProperty('--highlight-color-mine', settings.highlightColorMine || '#fde047')
      root.setProperty('--highlight-color-friends', settings.highlightColorFriends || '#f97316')
      root.setProperty('--highlight-color-nostrverse', settings.highlightColorNostrverse || '#9333ea')
      
--- a/src/index.css
+++ b/src/index.css
@@ -12,6 +12,7 @@
@import './styles/components/reader.css';
@import './styles/components/settings.css';
@import './styles/components/me.css';
+@import './styles/components/pull-to-refresh.css';
@import './styles/utils/animations.css';
@import './styles/utils/utilities.css';
@import './styles/utils/legacy.css';
--- a/src/styles/base/global.css
+++ b/src/styles/base/global.css
@@ -4,6 +4,8 @@
 body {
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
+  overflow-x: hidden;
+  max-width: 100vw;
 }

 body.mobile-sidebar-open {
@@ -20,7 +22,7 @@ body.mobile-sidebar-open {
  justify-content: center;
  text-align: center;
  padding: 2rem;
-  color: #ccc;
+  color: rgb(212 212 216); /* zinc-300 */
 }


--- a/src/styles/base/variables.css
+++ b/src/styles/base/variables.css
@@ -18,10 +18,11 @@
  --reading-font-size: 18px;
  
  /* Highlight color variables (user-settable) */
-  --highlight-color-mine: #ffff00;
-  --highlight-color-friends: #f97316;
-  --highlight-color-nostrverse: #9333ea;
-  --highlight-color: #ffff00; /* Default highlight color */
+  /* Defaults use Tailwind color palette: yellow-300, orange-500, purple-600 */
+  --highlight-color-mine: #fde047;      /* yellow-300 */
+  --highlight-color-friends: #f97316;   /* orange-500 */
+  --highlight-color-nostrverse: #9333ea; /* purple-600 */
+  --highlight-color: #fde047;           /* Default highlight color */
  
  /* Layout variables */
  --sidebar-width: 320px;
--- a/src/styles/components/cards.css
+++ b/src/styles/components/cards.css
@@ -1,14 +1,14 @@
 /* Bookmark item and blog post cards */
-.bookmark-item { background: #1a1a1a; padding: 1.5rem; border-radius: 12px; transition: all 0.2s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }
+.bookmark-item { background: rgb(24 24 27); /* zinc-900 */ padding: 1.5rem; border-radius: 12px; transition: all 0.2s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }
 .bookmark-item:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); }
-.bookmark-item h3 { margin: 0 0 0.5rem 0; color: #fff; font-size: 1.2rem; }
-.bookmark-url { color: #646cff; text-decoration: none; display: block; margin-bottom: 0.5rem; word-break: break-all; background: none; border: none; padding: 0; font: inherit; cursor: pointer; text-align: left; width: 100%; }
+.bookmark-item h3 { margin: 0 0 0.5rem 0; color: rgb(255 255 255); /* white */ font-size: 1.2rem; }
+.bookmark-url { color: rgb(99 102 241); /* indigo-500 */ text-decoration: none; display: block; margin-bottom: 0.5rem; word-break: break-all; background: none; border: none; padding: 0; font: inherit; cursor: pointer; text-align: left; width: 100%; }
 .bookmark-url:hover { text-decoration: underline; }
-.bookmark-content { color: #ccc; margin: 0.5rem 0; line-height: 1.4; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; }
-.bookmark-meta { color: #888; font-size: 0.9rem; margin-top: 0.5rem; }
+.bookmark-content { color: rgb(212 212 216); /* zinc-300 */ margin: 0.5rem 0; line-height: 1.4; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; }
+.bookmark-meta { color: rgb(161 161 170); /* zinc-400 */ font-size: 0.9rem; margin-top: 0.5rem; }

 .individual-bookmarks { margin: 1rem 0; }
-.individual-bookmarks h4 { margin: 0 0 1rem 0; font-size: 1rem; color: #fff; }
+.individual-bookmarks h4 { margin: 0 0 1rem 0; font-size: 1rem; color: rgb(255 255 255); /* white */ }

 .bookmarks-grid { display: flex; flex-direction: column; gap: 1rem; width: 100%; max-width: 100%; }
 .bookmarks-grid.bookmarks-compact { gap: 0.5rem; }
@@ -19,74 +19,74 @@
  .bookmarks-grid.bookmarks-large { gap: 1rem; }
 }

-.individual-bookmark { background: transparent; padding: 1rem; border-radius: 8px; transition: all 0.2s ease; border: 1px solid #2a2a2a; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; overflow: hidden; }
-.individual-bookmark:hover { border-color: #3a3a3a; background: #252525; }
+.individual-bookmark { background: transparent; padding: 1rem; border-radius: 8px; transition: all 0.2s ease; border: 1px solid rgb(39 39 42); /* zinc-800 */ word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; overflow: hidden; }
+.individual-bookmark:hover { border-color: rgb(63 63 70); /* zinc-700 */ background: rgb(39 39 42); /* zinc-800 */ }

 /* Compact view */
-.individual-bookmark.compact { padding: 0.5rem 0.5rem; background: transparent; border: none; border-bottom: 1px solid #2a2a2a; border-radius: 0; box-shadow: none; width: 100%; max-width: 100%; overflow: hidden; }
-.individual-bookmark.compact:hover { background: #252525; border-bottom-color: #333; transform: none; box-shadow: none; }
+.individual-bookmark.compact { padding: 0.5rem 0.5rem; background: transparent; border: none; border-bottom: 1px solid rgb(39 39 42); /* zinc-800 */ border-radius: 0; box-shadow: none; width: 100%; max-width: 100%; overflow: hidden; }
+.individual-bookmark.compact:hover { background: rgb(39 39 42); /* zinc-800 */ border-bottom-color: rgb(63 63 70); /* zinc-700 */ transform: none; box-shadow: none; }
 .compact-row { display: flex; align-items: center; gap: 0.5rem; height: 28px; width: 100%; min-width: 0; overflow: hidden; }
-.compact-thumbnail { width: 24px; height: 24px; flex-shrink: 0; border-radius: 4px; overflow: hidden; background: #2a2a2a; display: flex; align-items: center; justify-content: center; }
+.compact-thumbnail { width: 24px; height: 24px; flex-shrink: 0; border-radius: 4px; overflow: hidden; background: rgb(39 39 42); /* zinc-800 */ display: flex; align-items: center; justify-content: center; }
 .compact-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
 .compact-row.clickable { cursor: pointer; }
 .compact-row.clickable:active { opacity: 0.8; }
-.bookmark-type-compact { display: flex; align-items: center; gap: 0.25rem; color: #646cff; font-size: 0.85rem; flex-shrink: 0; }
-.compact-text { flex: 1; min-width: 0; color: #ccc; font-size: 0.85rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.bookmark-date-compact { font-size: 0.7rem; color: #666; flex-shrink: 0; white-space: nowrap; }
-.compact-read-btn { background: transparent; color: #888; border: none; padding: 0; border-radius: 4px; cursor: pointer; font-size: 0.75rem; display: flex; align-items: center; justify-content: center; width: 24px; height: 22px; flex-shrink: 0; transition: color 0.2s ease; }
-.compact-read-btn:hover { color: #ccc; }
+.bookmark-type-compact { display: flex; align-items: center; gap: 0.25rem; color: rgb(99 102 241); /* indigo-500 */ font-size: 0.85rem; flex-shrink: 0; }
+.compact-text { flex: 1; min-width: 0; color: rgb(212 212 216); /* zinc-300 */ font-size: 0.85rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.bookmark-date-compact { font-size: 0.7rem; color: rgb(113 113 122); /* zinc-500 */ flex-shrink: 0; white-space: nowrap; }
+.compact-read-btn { background: transparent; color: rgb(161 161 170); /* zinc-400 */ border: none; padding: 0; border-radius: 4px; cursor: pointer; font-size: 0.75rem; display: flex; align-items: center; justify-content: center; width: 24px; height: 22px; flex-shrink: 0; transition: color 0.2s ease; }
+.compact-read-btn:hover { color: rgb(212 212 216); /* zinc-300 */ }
 .compact-read-btn:active { transform: translateY(1px); }

 .bookmark-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; flex-wrap: wrap; gap: 0.5rem; }
-.bookmark-type { color: #646cff; font-size: 0.9rem; display: flex; align-items: center; gap: 0.35rem; }
-.bookmark-id { font-family: monospace; font-size: 0.8rem; color: #888; background: #1a1a1a; padding: 0.25rem 0.5rem; border-radius: 4px; }
-.bookmark-date { font-size: 0.8rem; color: #666; }
-.bookmark-date-link { font-size: 0.8rem; color: #666; text-decoration: none; transition: color 0.2s ease; }
-.bookmark-date-link:hover { color: #8ab4f8; text-decoration: underline; }
-.individual-bookmark .bookmark-content { margin: 0.75rem 0; color: #ccc; line-height: 1.6; font-size: 0.9rem; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; }
-.expand-toggle { margin: 0.25rem 0; background: transparent; border: none; color: #888; cursor: pointer; width: 100%; height: 22px; display: flex; align-items: center; justify-content: center; }
-.expand-toggle:hover { color: #bbb; }
+.bookmark-type { color: rgb(99 102 241); /* indigo-500 */ font-size: 0.9rem; display: flex; align-items: center; gap: 0.35rem; }
+.bookmark-id { font-family: monospace; font-size: 0.8rem; color: rgb(161 161 170); /* zinc-400 */ background: rgb(24 24 27); /* zinc-900 */ padding: 0.25rem 0.5rem; border-radius: 4px; }
+.bookmark-date { font-size: 0.8rem; color: rgb(113 113 122); /* zinc-500 */ }
+.bookmark-date-link { font-size: 0.8rem; color: rgb(113 113 122); /* zinc-500 */ text-decoration: none; transition: color 0.2s ease; }
+.bookmark-date-link:hover { color: rgb(96 165 250); /* blue-400 */ text-decoration: underline; }
+.individual-bookmark .bookmark-content { margin: 0.75rem 0; color: rgb(212 212 216); /* zinc-300 */ line-height: 1.6; font-size: 0.9rem; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; }
+.expand-toggle { margin: 0.25rem 0; background: transparent; border: none; color: rgb(161 161 170); /* zinc-400 */ cursor: pointer; width: 100%; height: 22px; display: flex; align-items: center; justify-content: center; }
+.expand-toggle:hover { color: rgb(212 212 216); /* zinc-300 */ }
 .bookmark-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 0.75rem; gap: 0.75rem; }
-.bookmark-meta-minimal { font-size: 0.8rem; color: #888; }
-.author-link-minimal { color: #888; text-decoration: none; transition: color 0.2s ease; }
-.author-link-minimal:hover { color: #aaa; }
-.read-now-button-minimal { background: #646cff; color: white; border: none; padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 0.85rem; transition: all 0.2s ease; white-space: nowrap; }
-.read-now-button-minimal:hover { background: #535bf2; }
-.expand-toggle-urls { margin-top: 0.5rem; background: transparent; border: none; color: #646cff; cursor: pointer; font-size: 0.8rem; padding: 0.25rem 0; text-decoration: underline; }
-.expand-toggle-urls:hover { color: #8088ff; }
+.bookmark-meta-minimal { font-size: 0.8rem; color: rgb(161 161 170); /* zinc-400 */ }
+.author-link-minimal { color: rgb(161 161 170); /* zinc-400 */ text-decoration: none; transition: color 0.2s ease; }
+.author-link-minimal:hover { color: rgb(212 212 216); /* zinc-300 */ }
+.read-now-button-minimal { background: rgb(99 102 241); /* indigo-500 */ color: white; border: none; padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 0.85rem; transition: all 0.2s ease; white-space: nowrap; }
+.read-now-button-minimal:hover { background: rgb(79 70 229); /* indigo-600 */ }
+.expand-toggle-urls { margin-top: 0.5rem; background: transparent; border: none; color: rgb(99 102 241); /* indigo-500 */ cursor: pointer; font-size: 0.8rem; padding: 0.25rem 0; text-decoration: underline; }
+.expand-toggle-urls:hover { color: rgb(129 140 248); /* indigo-400 */ }

 /* Large preview view */
-.individual-bookmark.large { padding: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #2a2a2a; }
-.large-preview-image { width: 100%; height: 180px; background: #1a1a1a; background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; border-bottom: 1px solid #333; position: relative; }
+.individual-bookmark.large { padding: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgb(39 39 42); /* zinc-800 */ }
+.large-preview-image { width: 100%; height: 180px; background: rgb(24 24 27); /* zinc-900 */ background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; border-bottom: 1px solid rgb(63 63 70); /* zinc-700 */ position: relative; }
 .large-preview-image:hover { opacity: 0.9; }
 .large-preview-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.3) 100%); pointer-events: none; }
-.preview-placeholder { font-size: 3rem; color: #444; }
+.preview-placeholder { font-size: 3rem; color: rgb(82 82 91); /* zinc-600 */ }
 .large-content { padding: 1.25rem; }
-.large-text { color: #ccc; font-size: 0.95rem; line-height: 1.6; margin-bottom: 1rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
-.large-footer { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: 0.8rem; color: #888; padding-top: 0.75rem; border-top: 1px solid #333; }
+.large-text { color: rgb(212 212 216); /* zinc-300 */ font-size: 0.95rem; line-height: 1.6; margin-bottom: 1rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
+.large-footer { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: 0.8rem; color: rgb(161 161 170); /* zinc-400 */ padding-top: 0.75rem; border-top: 1px solid rgb(63 63 70); /* zinc-700 */ }
 .large-author { flex: 1; }
-.large-read-button { background: #646cff; color: white; border: none; padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 0.85rem; transition: all 0.2s ease; display: flex; align-items: center; gap: 0.5rem; }
-.large-read-button:hover { background: #535bf2; }
+.large-read-button { background: rgb(99 102 241); /* indigo-500 */ color: white; border: none; padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 0.85rem; transition: all 0.2s ease; display: flex; align-items: center; gap: 0.5rem; }
+.large-read-button:hover { background: rgb(79 70 229); /* indigo-600 */ }

 /* Blog cards (Explore) */
 .explore-container { padding: 2rem; max-width: 1400px; margin: 0 auto; min-height: 100vh; }
 .explore-header { text-align: center; margin-bottom: 3rem; }
-.explore-header h1 { font-size: 2.5rem; margin: 0 0 1rem 0; color: #646cff; display: flex; align-items: center; justify-content: center; gap: 1rem; }
+.explore-header h1 { font-size: 2.5rem; margin: 0 0 1rem 0; color: rgb(99 102 241); /* indigo-500 */ display: flex; align-items: center; justify-content: center; gap: 1rem; }
 .explore-subtitle { font-size: 1.125rem; color: rgba(255, 255, 255, 0.7); margin: 0; }
 .explore-loading, .explore-error { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; color: rgba(255, 255, 255, 0.7); }
 .explore-loading { min-height: 0; padding: 0.25rem 0; }
-.explore-error { color: #ff6b6b; }
+.explore-error { color: rgb(239 68 68); /* red-500 */ }
 .explore-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2rem; margin-top: 2rem; }
-.blog-post-card { background: #1a1a1a; border: 1px solid #333; border-radius: 12px; overflow: hidden; transition: all 0.3s ease; cursor: pointer; display: flex; flex-direction: column; height: 100%; }
-.blog-post-card:hover { border-color: #646cff; transform: translateY(-4px); box-shadow: 0 8px 24px rgba(100, 108, 255, 0.15); }
-.blog-post-card-image { width: 100%; height: 200px; overflow: hidden; background: #0f0f0f; display: flex; align-items: center; justify-content: center; }
+.blog-post-card { background: rgb(24 24 27); /* zinc-900 */ border: 1px solid rgb(63 63 70); /* zinc-700 */ border-radius: 12px; overflow: hidden; transition: all 0.3s ease; cursor: pointer; display: flex; flex-direction: column; height: 100%; }
+.blog-post-card:hover { border-color: rgb(99 102 241); /* indigo-500 */ transform: translateY(-4px); box-shadow: 0 8px 24px rgba(99, 102, 241, 0.15); }
+.blog-post-card-image { width: 100%; height: 200px; overflow: hidden; background: rgb(9 9 11); /* zinc-950 */ display: flex; align-items: center; justify-content: center; }
 .blog-post-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
 .blog-post-card:hover .blog-post-card-image img { transform: scale(1.05); }
-.blog-post-image-placeholder { font-size: 3rem; color: #444; display: flex; align-items: center; justify-content: center; }
+.blog-post-image-placeholder { font-size: 3rem; color: rgb(82 82 91); /* zinc-600 */ display: flex; align-items: center; justify-content: center; }
 .blog-post-card-content { padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; flex: 1; }
 .blog-post-card-title { font-size: 1.25rem; font-weight: 600; margin: 0; color: rgba(255, 255, 255, 0.95); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
 .blog-post-card-summary { font-size: 0.875rem; color: rgba(255, 255, 255, 0.6); margin: 0; line-height: 1.6; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; flex: 1; }
-.blog-post-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 0.75rem; border-top: 1px solid #333; font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); flex-wrap: wrap; }
+.blog-post-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 0.75rem; border-top: 1px solid rgb(63 63 70); /* zinc-700 */ font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); flex-wrap: wrap; }
 .blog-post-card-author, .blog-post-card-date { display: flex; align-items: center; gap: 0.5rem; }
 .blog-post-card-author svg, .blog-post-card-date svg { opacity: 0.7; }
@media (max-width: 768px) {
--- a/src/styles/components/forms.css
+++ b/src/styles/components/forms.css
@@ -4,27 +4,81 @@
 .setting-label { text-align: left; flex: 1; }
 .setting-control { display: flex; justify-content: flex-end; align-items: center; }
 .setting-group.setting-inline label { margin-bottom: 0; }
-.setting-group label { display: block; margin-bottom: 0.5rem; color: #ccc; font-weight: 500; text-align: left; }
+.setting-group label { display: block; margin-bottom: 0.5rem; color: rgb(212 212 216); /* zinc-300 */ font-weight: 500; text-align: left; }
 .setting-buttons { display: flex; align-items: center; gap: 0.5rem; }
 .color-picker { display: flex; align-items: center; gap: 0.5rem; }
-.color-swatch { width: 33px; height: 33px; border: 1px solid #444; border-radius: 6px; cursor: pointer; transition: all 0.2s; position: relative; }
-.color-swatch:hover { border-color: #888; }
-.color-swatch.active { border-color: #646cff; box-shadow: 0 0 0 2px #646cff; }
-.color-swatch.active::after { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #000; font-size: 0.875rem; font-weight: bold; text-shadow: 0 0 2px #fff; }
-.font-size-btn { min-width: 33px; height: 33px; padding: 0; background: transparent; border: 1px solid #444; border-radius: 6px; color: #ccc; cursor: pointer; transition: all 0.2s; font-weight: bold; display: flex; align-items: center; justify-content: center; }
-.font-size-btn:hover { background: #333; border-color: #666; }
-.font-size-btn.active { background: #646cff; border-color: #646cff; color: white; }
-.setting-preview { margin: 1.5rem 0; padding: 1rem; background: #1a1a1a; border: 1px solid #333; border-radius: 8px; }
-.preview-label { font-size: 0.875rem; color: #999; margin-bottom: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
-.preview-content { color: #ddd; line-height: 1.7; }
-.preview-content h3 { margin: 0 0 1rem 0; font-size: 1.5em; color: #fff; }
-.preview-content p { margin: 0.75rem 0; }
-.setting-select { width: 100%; padding: 0.5rem; background: #2a2a2a; border: 1px solid #444; border-radius: 4px; color: #fff; font-size: 1rem; }
+.color-swatch { width: 33px; height: 33px; border: 1px solid rgb(82 82 91); /* zinc-600 */ border-radius: 6px; cursor: pointer; transition: all 0.2s; position: relative; }
+.color-swatch:hover { border-color: rgb(161 161 170); /* zinc-400 */ }
+.color-swatch.active { border-color: rgb(99 102 241); /* indigo-500 */ box-shadow: 0 0 0 2px rgb(99 102 241); /* indigo-500 */ }
+.color-swatch.active::after { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: rgb(0 0 0); /* black */ font-size: 0.875rem; font-weight: bold; text-shadow: 0 0 2px rgb(255 255 255); /* white */ }
+.font-size-btn { min-width: 33px; height: 33px; padding: 0; background: transparent; border: 1px solid rgb(82 82 91); /* zinc-600 */ border-radius: 6px; color: rgb(212 212 216); /* zinc-300 */ cursor: pointer; transition: all 0.2s; font-weight: bold; display: flex; align-items: center; justify-content: center; }
+.font-size-btn:hover { background: rgb(63 63 70); /* zinc-700 */ border-color: rgb(113 113 122); /* zinc-500 */ }
+.font-size-btn.active { background: rgb(99 102 241); /* indigo-500 */ border-color: rgb(99 102 241); /* indigo-500 */ color: white; }
+.setting-preview { 
+  margin: 1.5rem 0; 
+  padding: 1rem; 
+  background: rgb(24 24 27); /* zinc-900 */ 
+  border: 1px solid rgb(63 63 70); /* zinc-700 */ 
+  border-radius: 8px;
+  max-width: 100%;
+  overflow: hidden;
+}
+.preview-label { font-size: 0.875rem; color: rgb(161 161 170); /* zinc-400 */ margin-bottom: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
+.preview-content { 
+  color: rgb(228 228 231); /* zinc-200 */ 
+  line-height: 1.7;
+  max-width: 100%;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+}
+.preview-content h3 { 
+  margin: 0 0 1rem 0; 
+  font-size: 1.5em; 
+  color: rgb(255 255 255); /* white */
+  word-wrap: break-word;
+}
+.preview-content p { 
+  margin: 0.75rem 0;
+  word-wrap: break-word;
+}
+.setting-select { width: 100%; padding: 0.5rem; background: rgb(39 39 42); /* zinc-800 */ border: 1px solid rgb(82 82 91); /* zinc-600 */ border-radius: 4px; color: rgb(255 255 255); /* white */ font-size: 1rem; }
 .setting-inline .setting-select { width: auto; min-width: 200px; flex: 1; }
-.setting-select:focus { outline: none; border-color: #646cff; }
+.setting-select:focus { outline: none; border-color: rgb(99 102 241); /* indigo-500 */ }
 .font-select option { padding: 0.5rem; font-size: 1rem; }
 .checkbox-label { display: flex !important; align-items: center; gap: 0.75rem; cursor: pointer; user-select: none; text-align: left; justify-content: flex-start; margin-bottom: 0 !important; font-weight: normal !important; }
-.setting-checkbox { width: 18px; height: 18px; cursor: pointer; flex-shrink: 0; margin: 0; accent-color: #646cff; }
-.checkbox-label span { color: #ddd; text-align: left; font-weight: 500; }
+.setting-checkbox { width: 18px; height: 18px; cursor: pointer; flex-shrink: 0; margin: 0; accent-color: rgb(99 102 241); /* indigo-500 */ }
+.checkbox-label span { color: rgb(228 228 231); /* zinc-200 */ text-align: left; font-weight: 500; }
+
+/* Mobile responsive styles */
+@media (max-width: 768px) {
+  .setting-group.setting-inline {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.75rem;
+  }
+  
+  .setting-inline .setting-select {
+    width: 100%;
+    min-width: unset;
+  }
+  
+  .setting-control {
+    width: 100%;
+    justify-content: flex-start;
+  }
+  
+  .setting-buttons {
+    flex-wrap: wrap;
+  }
+  
+  .color-picker {
+    flex-wrap: wrap;
+  }
+  
+  .preview-content h3 {
+    font-size: 1.25em;
+  }
+}


--- a/src/styles/components/icon-button.css
+++ b/src/styles/components/icon-button.css
@@ -3,10 +3,10 @@
  display: inline-flex;
  align-items: center;
  justify-content: center;
-  border: 1px solid #444;
+  border: 1px solid rgb(82 82 91); /* zinc-600 */
  border-radius: 6px;
-  background: #2a2a2a;
-  color: #ddd;
+  background: rgb(39 39 42); /* zinc-800 */
+  color: rgb(228 228 231); /* zinc-200 */
  cursor: pointer;
  min-width: 33px;
  min-height: 33px;
@@ -14,16 +14,16 @@
  box-sizing: border-box;
 }

-.icon-button:hover { background: #333; }
+.icon-button:hover { background: rgb(63 63 70); /* zinc-700 */ }
 .icon-button:active { transform: translateY(1px); }

-.icon-button.primary { background: #646cff; color: white; border-color: #646cff; }
+.icon-button.primary { background: rgb(99 102 241); /* indigo-500 */ color: white; border-color: rgb(99 102 241); /* indigo-500 */ }
 .icon-button.primary:hover { filter: brightness(1.05); }

-.icon-button.success { background: #646cff; color: white; border-color: #646cff; }
+.icon-button.success { background: rgb(99 102 241); /* indigo-500 */ color: white; border-color: rgb(99 102 241); /* indigo-500 */ }
 .icon-button.success:hover { filter: brightness(1.1); }

-.icon-button.ghost { background: #2a2a2a; }
+.icon-button.ghost { background: rgb(39 39 42); /* zinc-800 */ }

 /* Mobile touch target improvements */
@media (max-width: 768px) {
@@ -31,13 +31,20 @@
    min-width: var(--min-touch-target);
    min-height: var(--min-touch-target);
  }
+  
+  /* Keep icon size consistent to prevent blurriness */
+  .icon-button svg {
+    font-size: 1rem;
+    width: 1em;
+    height: 1em;
+  }
 }

 /* Disable hover effects on touch devices */
@media (pointer: coarse) {
-  .icon-button:hover { background: #2a2a2a; }
-  .icon-button.ghost:hover { background: #2a2a2a; }
-  .icon-button:active { background: #333; }
+  .icon-button:hover { background: rgb(39 39 42); /* zinc-800 */ }
+  .icon-button.ghost:hover { background: rgb(39 39 42); /* zinc-800 */ }
+  .icon-button:active { background: rgb(63 63 70); /* zinc-700 */ }
 }


--- a/src/styles/components/me.css
+++ b/src/styles/components/me.css
@@ -18,7 +18,7 @@
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
-  color: var(--text-secondary, #999);
+  color: var(--text-secondary, rgb(161 161 170)); /* zinc-400 */
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
@@ -28,25 +28,25 @@
 }

 .me-tab:hover {
-  color: var(--text-primary, #ddd);
+  color: var(--text-primary, rgb(228 228 231)); /* zinc-200 */
  background: rgba(255, 255, 255, 0.05);
 }

 .me-tab.active {
-  color: var(--primary-color, #8b5cf6);
-  border-bottom-color: var(--primary-color, #8b5cf6);
+  color: var(--primary-color, rgb(139 92 246)); /* purple-500 */
+  border-bottom-color: var(--primary-color, rgb(139 92 246)); /* purple-500 */
 }

 /* Highlights tab uses the user's custom "my highlights" color */
 .me-tab[data-tab="highlights"].active {
-  color: var(--highlight-color-mine, #ffff00);
-  border-bottom-color: var(--highlight-color-mine, #ffff00);
+  color: var(--highlight-color-mine, rgb(253 224 71)); /* yellow-300 */
+  border-bottom-color: var(--highlight-color-mine, rgb(253 224 71)); /* yellow-300 */
 }

 /* Reading List tab uses blue color to match bookmarks icon */
 .me-tab[data-tab="reading-list"].active {
-  color: #646cff;
-  border-bottom-color: #646cff;
+  color: rgb(99 102 241); /* indigo-500 */
+  border-bottom-color: rgb(99 102 241); /* indigo-500 */
 }

 .me-tab svg {
@@ -80,25 +80,25 @@

 /* Enhanced border styling for reading list cards */
 .bookmarks-list .individual-bookmark {
-  border: 1px solid #444 !important;
-  background: #1a1a1a !important;
+  border: 1px solid rgb(82 82 91) !important; /* zinc-600 */
+  background: rgb(24 24 27) !important; /* zinc-900 */
 }

 .bookmarks-list .individual-bookmark:hover {
-  border-color: #555 !important;
-  background: #252525 !important;
+  border-color: rgb(113 113 122) !important; /* zinc-500 */
+  background: rgb(39 39 42) !important; /* zinc-800 */
 }

 .bookmark-item {
  padding: 1rem;
-  background: var(--card-bg, #fff);
-  border: 1px solid var(--border-color, #e0e0e0);
+  background: var(--card-bg, rgb(255 255 255)); /* white */
+  border: 1px solid var(--border-color, rgb(228 228 231)); /* zinc-200 */
  border-radius: 8px;
  transition: all 0.2s ease;
 }

 .bookmark-item:hover {
-  border-color: var(--primary-color, #8b5cf6);
+  border-color: var(--primary-color, rgb(139 92 246)); /* purple-500 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }

@@ -110,13 +110,13 @@
 .bookmark-item h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.1rem;
-  color: var(--text-primary, #000);
+  color: var(--text-primary, rgb(0 0 0)); /* black */
 }

 .bookmark-item p {
  margin: 0;
  font-size: 0.9rem;
-  color: var(--text-secondary, #666);
+  color: var(--text-secondary, rgb(113 113 122)); /* zinc-500 */
  line-height: 1.5;
 }

--- a/src/styles/components/modals.css
+++ b/src/styles/components/modals.css
@@ -1,28 +1,28 @@
 /* Add Bookmark Modal */
 .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.75); display: flex; align-items: center; justify-content: center; z-index: 10000; padding: 1rem; }
-.modal-content { background: #1a1a1a; border: 1px solid #333; border-radius: 12px; max-width: 500px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); box-sizing: border-box; }
+.modal-content { background: rgb(24 24 27); /* zinc-900 */ border: 1px solid rgb(63 63 70); /* zinc-700 */ border-radius: 12px; max-width: 500px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); box-sizing: border-box; }
@media (max-width: 768px) {
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal-content { max-width: 100%; max-height: 95vh; max-height: 95dvh; border-radius: 16px 16px 0 0; margin: 0; padding-bottom: var(--safe-area-bottom); }
 }
-.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem; border-bottom: 1px solid #333; }
-.modal-header h2 { margin: 0; font-size: 1.5rem; color: #fff; }
+.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem; border-bottom: 1px solid rgb(63 63 70); /* zinc-700 */ }
+.modal-header h2 { margin: 0; font-size: 1.5rem; color: rgb(255 255 255); /* white */ }
 .modal-form { padding: 1.5rem; }
 .form-group { margin-bottom: 1.25rem; }
-.form-group label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; color: #ccc; font-size: 0.9rem; font-weight: 500; }
-.fetching-indicator { font-size: 0.8rem; color: #999; font-weight: normal; display: inline-flex; align-items: center; gap: 0.5rem; }
-.form-group input, .form-group textarea { width: 100%; padding: 0.75rem; background: #2a2a2a; border: 1px solid #444; border-radius: 6px; color: #fff; font-size: 1rem; font-family: inherit; transition: border-color 0.2s; box-sizing: border-box; }
-.form-group input:focus, .form-group textarea:focus { outline: none; border-color: #646cff; }
+.form-group label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; color: rgb(212 212 216); /* zinc-300 */ font-size: 0.9rem; font-weight: 500; }
+.fetching-indicator { font-size: 0.8rem; color: rgb(161 161 170); /* zinc-400 */ font-weight: normal; display: inline-flex; align-items: center; gap: 0.5rem; }
+.form-group input, .form-group textarea { width: 100%; padding: 0.75rem; background: rgb(39 39 42); /* zinc-800 */ border: 1px solid rgb(82 82 91); /* zinc-600 */ border-radius: 6px; color: rgb(255 255 255); /* white */ font-size: 1rem; font-family: inherit; transition: border-color 0.2s; box-sizing: border-box; }
+.form-group input:focus, .form-group textarea:focus { outline: none; border-color: rgb(99 102 241); /* indigo-500 */ }
 .form-group input:disabled, .form-group textarea:disabled { opacity: 0.6; cursor: not-allowed; }
 .form-group textarea { resize: vertical; min-height: 80px; }
-.form-helper-text { margin-top: 0.25rem; font-size: 0.8rem; color: #999; line-height: 1.4; }
-.modal-error { padding: 0.75rem; background: rgba(220, 53, 69, 0.1); border: 1px solid #dc3545; border-radius: 6px; color: #dc3545; font-size: 0.9rem; margin-bottom: 1rem; }
+.form-helper-text { margin-top: 0.25rem; font-size: 0.8rem; color: rgb(161 161 170); /* zinc-400 */ line-height: 1.4; }
+.modal-error { padding: 0.75rem; background: rgba(220, 53, 69, 0.1); border: 1px solid rgb(220 38 38); /* red-600 */ border-radius: 6px; color: rgb(220 38 38); /* red-600 */ font-size: 0.9rem; margin-bottom: 1rem; }
 .modal-actions { display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 1.5rem; }
-.btn-secondary { padding: 0.75rem 1.5rem; background: #2a2a2a; border: 1px solid #444; border-radius: 6px; color: #ccc; font-size: 1rem; cursor: pointer; transition: all 0.2s; }
-.btn-secondary:hover:not(:disabled) { background: #333; border-color: #646cff; color: white; }
+.btn-secondary { padding: 0.75rem 1.5rem; background: rgb(39 39 42); /* zinc-800 */ border: 1px solid rgb(82 82 91); /* zinc-600 */ border-radius: 6px; color: rgb(212 212 216); /* zinc-300 */ font-size: 1rem; cursor: pointer; transition: all 0.2s; }
+.btn-secondary:hover:not(:disabled) { background: rgb(63 63 70); /* zinc-700 */ border-color: rgb(99 102 241); /* indigo-500 */ color: white; }
 .btn-secondary:disabled { opacity: 0.6; cursor: not-allowed; }
-.btn-primary { padding: 0.75rem 1.5rem; background: #646cff; border: none; border-radius: 6px; color: white; font-size: 1rem; cursor: pointer; transition: background-color 0.2s; }
-.btn-primary:hover:not(:disabled) { background: #535bf2; }
+.btn-primary { padding: 0.75rem 1.5rem; background: rgb(99 102 241); /* indigo-500 */ border: none; border-radius: 6px; color: white; font-size: 1rem; cursor: pointer; transition: background-color 0.2s; }
+.btn-primary:hover:not(:disabled) { background: rgb(79 70 229); /* indigo-600 */ }
 .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }


--- a/src/styles/components/profile.css
+++ b/src/styles/components/profile.css
@@ -1,12 +1,12 @@
 /* Profile UI fragments */
 .author-card-container { display: flex; justify-content: center; padding: 2rem 1rem; }
-.author-card { display: flex; gap: 1rem; padding: 1.5rem; background: #1a1a1a; border: 1px solid #333; border-radius: 12px; max-width: 600px; width: 100%; }
-.author-card-avatar { flex-shrink: 0; width: 60px; height: 60px; border-radius: 50%; overflow: hidden; background: #2a2a2a; display: flex; align-items: center; justify-content: center; color: #666; }
+.author-card { display: flex; gap: 1rem; padding: 1.5rem; background: rgb(24 24 27); /* zinc-900 */ border: 1px solid rgb(63 63 70); /* zinc-700 */ border-radius: 12px; max-width: 600px; width: 100%; }
+.author-card-avatar { flex-shrink: 0; width: 60px; height: 60px; border-radius: 50%; overflow: hidden; background: rgb(39 39 42); /* zinc-800 */ display: flex; align-items: center; justify-content: center; color: rgb(113 113 122); /* zinc-500 */ }
 .author-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
 .author-card-avatar svg { font-size: 2.5rem; }
 .author-card-content { flex: 1; min-width: 0; text-align: left; }
-.author-card-name { font-size: 1rem; font-weight: 600; color: #ddd; margin-bottom: 0.5rem; text-align: left; }
-.author-card-bio { font-size: 0.9rem; color: #999; line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; text-align: left; }
+.author-card-name { font-size: 1rem; font-weight: 600; color: rgb(228 228 231); /* zinc-200 */ margin-bottom: 0.5rem; text-align: left; }
+.author-card-bio { font-size: 0.9rem; color: rgb(161 161 170); /* zinc-400 */ line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; text-align: left; }

@media (max-width: 768px) {
  .author-card-container { 
--- a/src/styles/components/pull-to-refresh.css
+++ b/src/styles/components/pull-to-refresh.css
@@ -0,0 +1,53 @@
+/* Pull-to-refresh indicator styles */
+.pull-to-refresh-indicator {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  z-index: 100;
+  pointer-events: none;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.pull-to-refresh-icon {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--background-secondary);
+  border-radius: 50%;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease;
+  font-size: 1rem;
+  color: var(--text-secondary);
+}
+
+.pull-to-refresh-text {
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+  text-align: center;
+  white-space: nowrap;
+  font-weight: 500;
+  background: var(--background-secondary);
+  padding: 0.25rem 0.75rem;
+  border-radius: 1rem;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* Container needs relative positioning for absolute indicator */
+.pull-to-refresh-container {
+  position: relative;
+}
+
+/* Ensure smooth transitions during pull */
+.pull-to-refresh-container.is-pulling {
+  overflow: visible;
+}
+
--- a/src/styles/components/reader.css
+++ b/src/styles/components/reader.css
@@ -1,7 +1,7 @@
 /* Reader view */
 .reader { 
-  background: #1a1a1a; 
-  border: 1px solid #333; 
+  background: rgb(24 24 27); /* zinc-900 */
+  border: 1px solid rgb(63 63 70); /* zinc-700 */
  border-radius: 8px; 
  padding: 0.75rem; 
  text-align: left; 
@@ -19,57 +19,180 @@
  max-width: 1000px;   /* Maximum width */
  aspect-ratio: 16/9;
  margin: 0 -0.75rem 1rem -0.75rem; /* Negative margins to counteract reader padding */
-  background: #000;
+  background: rgb(0 0 0); /* black */
 }
-.reader.empty { color: #888; }
-.loading-spinner { display: flex; align-items: center; gap: 0.5rem; color: #888; }
+.reader.empty { color: rgb(161 161 170); /* zinc-400 */ }
+.loading-spinner { display: flex; align-items: center; gap: 0.5rem; color: rgb(161 161 170); /* zinc-400 */ }
 .loading-spinner svg { font-size: 1.2rem; }
 .reader-header { margin-bottom: 2rem; position: relative; }
-.reader-title { margin: 0 0 0.75rem 0; font-family: var(--reading-font); }
-.reader-summary { color: #aaa; font-size: 1.1rem; line-height: 1.5; margin: 0 0 1rem 0; font-family: var(--reading-font); }
+.reader-title { margin: 0 0 0.75rem 0; font-family: var(--reading-font); font-size: 2.5rem; font-weight: 700; line-height: 1.2; }
+.reader-summary { color: rgb(212 212 216); /* zinc-300 */ font-size: 1.2rem; line-height: 1.6; margin: 0 0 1rem 0; font-family: var(--reading-font); }
 .reader-meta { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
-.publish-date { display: flex; align-items: center; gap: 0.4rem; font-size: 0.813rem; color: rgba(136, 136, 136, 0.7); opacity: 0.85; }
+.publish-date { display: flex; align-items: center; gap: 0.4rem; font-size: 0.813rem; color: rgba(161, 161, 170, 0.7); /* zinc-400 */ opacity: 0.85; }
 .publish-date svg { font-size: 0.75rem; opacity: 0.6; }
-.publish-date-topright { position: absolute; top: 1rem; right: 1rem; font-size: 0.813rem; color: #fff; padding: 0.4rem 0.75rem; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); z-index: 10; }
-.reading-time { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; background: rgba(136, 136, 136, 0.1); border: 1px solid rgba(136, 136, 136, 0.3); border-radius: 6px; font-size: 0.875rem; color: #888; }
+.publish-date-topright { position: absolute; top: 1rem; right: 1rem; font-size: 0.813rem; color: rgb(255 255 255); /* white */ padding: 0.4rem 0.75rem; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); z-index: 10; }
+.reading-time { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; background: rgba(161, 161, 170, 0.1); /* zinc-400 */ border: 1px solid rgba(161, 161, 170, 0.3); /* zinc-400 */ border-radius: 6px; font-size: 0.875rem; color: rgb(161 161 170); /* zinc-400 */ }
 .reading-time svg { font-size: 0.875rem; }
-.highlight-indicator { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; background: rgba(100, 108, 255, 0.1); border: 1px solid rgba(100, 108, 255, 0.3); border-radius: 6px; font-size: 0.875rem; color: #646cff; }
+.highlight-indicator { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; background: rgba(99, 102, 241, 0.1); /* indigo-500 */ border: 1px solid rgba(99, 102, 241, 0.3); /* indigo-500 */ border-radius: 6px; font-size: 0.875rem; color: rgb(99 102 241); /* indigo-500 */ }
 .highlight-indicator svg { font-size: 0.875rem; }
-.reader-html { color: #ddd; line-height: 1.6; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; font-family: var(--reading-font); font-size: var(--reading-font-size); }
-.reader-markdown { color: #ddd; line-height: 1.7; font-family: var(--reading-font); font-size: var(--reading-font-size); }
+.reader-html { color: rgb(228 228 231); /* zinc-200 */ line-height: 1.6; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; font-family: var(--reading-font); font-size: var(--reading-font-size); }
+.reader-markdown { color: rgb(228 228 231); /* zinc-200 */ line-height: 1.7; font-family: var(--reading-font); font-size: var(--reading-font-size); }
 /* Ensure content is left-aligned even if source markup uses center */
 .reader .reader-html *, .reader .reader-markdown * { text-align: left !important; font-family: inherit !important; }
 .reader center, .reader [align="center"] { text-align: left !important; }
 /* Tame images from external content */
 .reader .reader-html img, .reader .reader-markdown img { max-width: 100%; max-height: 70vh; height: auto; width: auto; display: block; margin: 0.75rem 0; border-radius: 6px; }
-.reader-markdown h1, .reader-markdown h2, .reader-markdown h3, .reader-markdown h4 { margin-top: 1.2rem; }
+/* Headlines with Tailwind typography */
+.reader-markdown h1, .reader-html h1 { 
+  font-size: 2.25rem; /* text-4xl */
+  font-weight: 700; 
+  line-height: 1.2; 
+  margin-top: 2rem; 
+  margin-bottom: 1rem; 
+  color: rgb(244 244 245); /* zinc-100 */
+}
+.reader-markdown h2, .reader-html h2 { 
+  font-size: 1.875rem; /* text-3xl */
+  font-weight: 600; 
+  line-height: 1.3; 
+  margin-top: 1.75rem; 
+  margin-bottom: 0.875rem; 
+  color: rgb(244 244 245); /* zinc-100 */
+}
+.reader-markdown h3, .reader-html h3 { 
+  font-size: 1.5rem; /* text-2xl */
+  font-weight: 600; 
+  line-height: 1.4; 
+  margin-top: 1.5rem; 
+  margin-bottom: 0.75rem; 
+  color: rgb(244 244 245); /* zinc-100 */
+}
+.reader-markdown h4, .reader-html h4 { 
+  font-size: 1.25rem; /* text-xl */
+  font-weight: 600; 
+  line-height: 1.4; 
+  margin-top: 1.25rem; 
+  margin-bottom: 0.625rem; 
+  color: rgb(228 228 231); /* zinc-200 */
+}
+.reader-markdown h5, .reader-html h5 { 
+  font-size: 1.125rem; /* text-lg */
+  font-weight: 600; 
+  line-height: 1.4; 
+  margin-top: 1rem; 
+  margin-bottom: 0.5rem; 
+  color: rgb(228 228 231); /* zinc-200 */
+}
+.reader-markdown h6, .reader-html h6 { 
+  font-size: 1rem; /* text-base */
+  font-weight: 600; 
+  line-height: 1.4; 
+  margin-top: 1rem; 
+  margin-bottom: 0.5rem; 
+  color: rgb(228 228 231); /* zinc-200 */
+}
 .reader-markdown p { margin: 0.5rem 0; }
 .reader-html p, .reader-html div, .reader-html span, .reader-html li, .reader-html td, .reader-html th { font-size: 1em !important; }
-.reader-markdown a { color: #8ab4f8; text-decoration: none; }
+/* Lists */
+.reader-markdown ul, .reader-html ul {
+  list-style-type: disc;
+  margin: 1rem 0;
+  padding-left: 2rem;
+}
+.reader-markdown ol, .reader-html ol {
+  list-style-type: decimal;
+  margin: 1rem 0;
+  padding-left: 2rem;
+}
+.reader-markdown li, .reader-html li {
+  margin: 0.375rem 0;
+  line-height: 1.6;
+  color: rgb(228 228 231); /* zinc-200 */
+}
+.reader-markdown ul ul, .reader-markdown ol ul, .reader-html ul ul, .reader-html ol ul {
+  list-style-type: circle;
+  margin: 0.25rem 0;
+}
+.reader-markdown ul ol, .reader-markdown ol ol, .reader-html ul ol, .reader-html ol ol {
+  list-style-type: lower-alpha;
+  margin: 0.25rem 0;
+}
+.reader-markdown li p, .reader-html li p {
+  margin: 0.25rem 0;
+}
+.reader-markdown blockquote, .reader-html blockquote { 
+  margin: 1.5rem 0; 
+  padding: 1rem 0 1rem 2rem;
+  font-style: italic;
+}
+.reader-markdown blockquote p, .reader-html blockquote p { margin: 0.5rem 0; }
+.reader-markdown blockquote p:first-child, .reader-html blockquote p:first-child { margin-top: 0; }
+.reader-markdown blockquote p:last-child, .reader-html blockquote p:last-child { margin-bottom: 0; }
+.reader-markdown a { color: rgb(96 165 250); /* blue-400 */ text-decoration: none; }
 .reader-markdown a:hover { text-decoration: underline; }
-.reader-markdown code { background: #1e1e1e; border: 1px solid #333; border-radius: 4px; padding: 0.15rem 0.4rem; font-size: 0.9em; font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace; }
-.reader-markdown pre { background: #1e1e1e; border: 1px solid #333; border-radius: 8px; padding: 1rem; overflow-x: auto; margin: 1rem 0; line-height: 1.5; font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace; }
+.reader-markdown code { background: rgb(30 30 30); /* ~zinc-850 */ border: 1px solid rgb(63 63 70); /* zinc-700 */ border-radius: 4px; padding: 0.15rem 0.4rem; font-size: 0.9em; font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace; }
+.reader-markdown pre { background: rgb(30 30 30); /* ~zinc-850 */ border: 1px solid rgb(63 63 70); /* zinc-700 */ border-radius: 8px; padding: 1rem; overflow-x: auto; margin: 1rem 0; line-height: 1.5; font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace; }
 .reader-markdown pre code { background: transparent; border: none; padding: 0; font-size: 0.9em; display: block; }
 /* Prism.js enhancements */
-.reader-markdown pre[class*="language-"] { background: #1e1e1e; border: 1px solid #333; }
+.reader-markdown pre[class*="language-"] { background: rgb(30 30 30); /* ~zinc-850 */ border: 1px solid rgb(63 63 70); /* zinc-700 */ }
 .reader-markdown code[class*="language-"] { background: transparent; text-shadow: none; }
-.reader-html pre { background: #1e1e1e; border: 1px solid #333; border-radius: 8px; padding: 1rem; overflow-x: auto; margin: 1rem 0; font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace; }
-.reader-html code { background: #1e1e1e; border: 1px solid #333; border-radius: 4px; padding: 0.15rem 0.4rem; font-size: 0.9em; font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace; }
+.reader-html pre { background: rgb(30 30 30); /* ~zinc-850 */ border: 1px solid rgb(63 63 70); /* zinc-700 */ border-radius: 8px; padding: 1rem; overflow-x: auto; margin: 1rem 0; font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace; }
+.reader-html code { background: rgb(30 30 30); /* ~zinc-850 */ border: 1px solid rgb(63 63 70); /* zinc-700 */ border-radius: 4px; padding: 0.15rem 0.4rem; font-size: 0.9em; font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace; }
 .reader-html pre code { background: transparent; border: none; padding: 0; display: block; }
+/* Mobile: prevent code blocks from causing horizontal overflow */
+@media (max-width: 768px) {
+  .reader-markdown pre, .reader-html pre {
+    max-width: 100%;
+    overflow-x: auto;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+  }
+  
+  .reader-markdown code, .reader-html code {
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+  }
+  
+  /* Also handle tables and other wide elements */
+  .reader-markdown table, .reader-html table {
+    display: block;
+    max-width: 100%;
+    overflow-x: auto;
+  }
+  
+  .reader-markdown img, .reader-html img {
+    max-width: 100%;
+    height: auto;
+  }
+}
+
+/* Desktop: increase horizontal padding for text content */
+@media (min-width: 769px) {
+  .reader-header,
+  .reader-summary-below-image,
+  .reader-html, 
+  .reader-markdown,
+  .article-menu-container,
+  .mark-as-read-container {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+}
 /* Article menu */
 .article-menu-container { display: flex; justify-content: flex-end; padding: 1.5rem 0 0.5rem; margin-top: 2rem; }
 .article-menu-wrapper { position: relative; }
-.article-menu-btn { background: none; border: none; color: #888; cursor: pointer; padding: 0.5rem 0.75rem; font-size: 0.875rem; display: flex; align-items: center; gap: 0.5rem; transition: all 0.2s ease; border-radius: 6px; }
-.article-menu-btn:hover { color: #646cff; background: rgba(100, 108, 255, 0.1); }
-.article-menu { position: absolute; right: 0; top: calc(100% + 4px); background: #2a2a2a; border: 1px solid #444; border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); z-index: 1000; min-width: 180px; overflow: hidden; }
-.article-menu-item { width: 100%; background: none; border: none; color: #ddd; padding: 0.75rem 1rem; font-size: 0.875rem; display: flex; align-items: center; gap: 0.75rem; cursor: pointer; transition: all 0.15s ease; text-align: left; white-space: nowrap; }
-.article-menu-item:hover { background: rgba(100, 108, 255, 0.15); color: #fff; }
+.article-menu-btn { background: none; border: none; color: rgb(161 161 170); /* zinc-400 */ cursor: pointer; padding: 0.5rem 0.75rem; font-size: 0.875rem; display: flex; align-items: center; gap: 0.5rem; transition: all 0.2s ease; border-radius: 6px; }
+.article-menu-btn:hover { color: rgb(99 102 241); /* indigo-500 */ background: rgba(99, 102, 241, 0.1); }
+.article-menu { position: absolute; right: 0; top: calc(100% + 4px); background: rgb(39 39 42); /* zinc-800 */ border: 1px solid rgb(82 82 91); /* zinc-600 */ border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); z-index: 1000; min-width: 180px; overflow: hidden; }
+.article-menu-item { width: 100%; background: none; border: none; color: rgb(228 228 231); /* zinc-200 */ padding: 0.75rem 1rem; font-size: 0.875rem; display: flex; align-items: center; gap: 0.75rem; cursor: pointer; transition: all 0.15s ease; text-align: left; white-space: nowrap; }
+.article-menu-item:hover { background: rgba(99, 102, 241, 0.15); color: rgb(255 255 255); /* white */ }
 .article-menu-item svg { font-size: 0.875rem; flex-shrink: 0; }

 /* Mark as Read button */
 .mark-as-read-container { display: flex; justify-content: center; align-items: center; padding: 2rem 1rem; margin-top: 1rem; }
-.mark-as-read-btn { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; background: #2a2a2a; color: #ddd; border: 1px solid #444; border-radius: 8px; font-size: 1rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; min-width: 160px; justify-content: center; }
-.mark-as-read-btn:hover:not(:disabled) { background: #333; border-color: #555; transform: translateY(-1px); }
+.mark-as-read-btn { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; background: rgb(39 39 42); /* zinc-800 */ color: rgb(228 228 231); /* zinc-200 */ border: 1px solid rgb(82 82 91); /* zinc-600 */ border-radius: 8px; font-size: 1rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; min-width: 160px; justify-content: center; }
+.mark-as-read-btn:hover:not(:disabled) { background: rgb(63 63 70); /* zinc-700 */ border-color: rgb(113 113 122); /* zinc-500 */ transform: translateY(-1px); }
 .mark-as-read-btn:active:not(:disabled) { transform: translateY(0); }
 .mark-as-read-btn:disabled { opacity: 0.6; cursor: not-allowed; }
 .mark-as-read-btn svg { font-size: 1.1rem; }
@@ -94,8 +217,8 @@
 .reader-hero-image { width: calc(100% + 1.5rem); margin: -0.75rem -0.75rem 2rem -0.75rem; border-radius: 0; overflow: hidden; position: relative; min-height: 300px; }
 .reader-hero-image img { width: 100%; height: auto; max-height: 500px; object-fit: cover; display: block; }
 .reader-header-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 2rem 2rem 1.5rem; background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 0) 100%); }
-.reader-header-overlay .reader-title { color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); margin-bottom: 0.75rem; }
-.reader-header-overlay .reader-summary { color: rgba(255, 255, 255, 0.9); font-size: 1.1rem; line-height: 1.5; margin: 0 0 1rem 0; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); font-family: var(--reading-font); }
+.reader-header-overlay .reader-title { color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); margin-bottom: 0.75rem; font-size: 2.5rem; font-weight: 700; line-height: 1.2; }
+.reader-header-overlay .reader-summary { color: rgba(255, 255, 255, 0.9); font-size: 1.2rem; line-height: 1.6; margin: 0 0 1rem 0; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); font-family: var(--reading-font); }
 .reader-header-overlay .reader-meta { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
 .reader-header-overlay .publish-date { color: rgba(255, 255, 255, 0.65); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); opacity: 1; }
 .reader-header-overlay .publish-date svg { opacity: 0.7; }
@@ -109,7 +232,7 @@
  .reader-hero-image { min-height: 280px; max-height: 400px; height: 50vh; }
  .reader-hero-image img { height: 100%; width: 100%; object-fit: cover; object-position: center; }
  .reader-header-overlay { padding: 1.5rem 1rem 1rem; }
-  .reader-header-overlay .reader-title { font-size: 1.5rem; line-height: 1.3; }
+  .reader-header-overlay .reader-title { font-size: 2rem; line-height: 1.3; }
 }

 /* Reading Progress Indicator - now using Tailwind utilities in component */
--- a/src/styles/components/settings.css
+++ b/src/styles/components/settings.css
@@ -6,10 +6,144 @@
 .settings-content { overflow-y: auto; flex: 1; margin-bottom: 1rem; text-align: left; padding: 0 0.25rem 2rem 0.25rem; }
 .settings-section { margin-bottom: 2.5rem; }
 .settings-section:last-child { margin-bottom: 0; }
-.section-title { font-size: 1rem; font-weight: 600; color: #fff; margin: 0 0 1rem 0; padding-bottom: 0.5rem; border-bottom: 1px solid #333; text-transform: uppercase; letter-spacing: 0.05em; }
+.section-title { font-size: 1rem; font-weight: 600; color: rgb(255 255 255); /* white */ margin: 0 0 1rem 0; padding-bottom: 0.5rem; border-bottom: 1px solid rgb(63 63 70); /* zinc-700 */ text-transform: uppercase; letter-spacing: 0.05em; }
 .settings-footer { display: flex; justify-content: flex-start; padding: 1rem 0 0.5rem 0; flex-shrink: 0; }
-.settings-footer .btn-primary { background: #646cff; color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 4px; font-size: 1rem; cursor: pointer; transition: background-color 0.2s; display: flex; align-items: center; gap: 0.5rem; }
-.settings-footer .btn-primary:hover:not(:disabled) { background: #535bf2; }
+.settings-footer .btn-primary { background: rgb(99 102 241); /* indigo-500 */ color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 4px; font-size: 1rem; cursor: pointer; transition: background-color 0.2s; display: flex; align-items: center; gap: 0.5rem; }
+.settings-footer .btn-primary:hover:not(:disabled) { background: rgb(79 70 229); /* indigo-600 */ }
 .settings-footer .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

+/* Setting groups */
+.setting-group { margin-bottom: 1.5rem; }
+.setting-label { display: block; margin-bottom: 0.75rem; font-size: 0.9rem; font-weight: 500; color: rgb(212 212 216); /* zinc-300 */ }
+
+/* Zap splits preset buttons */
+.zap-preset-buttons { display: flex; gap: 0.5rem; flex-wrap: wrap; }
+.zap-preset-btn {
+  padding: 0.625rem 1.25rem;
+  background: rgb(39 39 42); /* zinc-800 */
+  border: 1px solid rgb(82 82 91); /* zinc-600 */
+  border-radius: 6px;
+  color: rgb(212 212 216); /* zinc-300 */
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-weight: 500;
+}
+.zap-preset-btn:hover {
+  background: rgb(63 63 70); /* zinc-700 */
+  border-color: rgb(99 102 241); /* indigo-500 */
+  color: rgb(255 255 255); /* white */
+}
+.zap-preset-btn.active {
+  background: rgb(99 102 241); /* indigo-500 */
+  border-color: rgb(99 102 241); /* indigo-500 */
+  color: rgb(255 255 255); /* white */
+}
+
+/* Zap split sliders */
+.zap-split-container { width: 100%; }
+.zap-split-labels {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+  font-size: 0.85rem;
+  color: rgb(161 161 170); /* zinc-400 */
+}
+.zap-split-label { font-weight: 500; }
+.zap-split-slider {
+  width: 100%;
+  height: 8px;
+  border-radius: 4px;
+  background: rgb(39 39 42); /* zinc-800 */
+  outline: none;
+  -webkit-appearance: none;
+}
+.zap-split-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: rgb(99 102 241); /* indigo-500 */
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+.zap-split-slider::-webkit-slider-thumb:hover {
+  background: rgb(79 70 229); /* indigo-600 */
+  transform: scale(1.1);
+}
+.zap-split-slider::-moz-range-thumb {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: rgb(99 102 241); /* indigo-500 */
+  cursor: pointer;
+  border: none;
+  transition: all 0.2s ease;
+}
+.zap-split-slider::-moz-range-thumb:hover {
+  background: rgb(79 70 229); /* indigo-600 */
+  transform: scale(1.1);
+}
+.zap-split-description {
+  margin-top: 1.5rem;
+  padding: 1rem;
+  background: rgb(39 39 42); /* zinc-800 */
+  border: 1px solid rgb(63 63 70); /* zinc-700 */
+  border-radius: 6px;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: rgb(161 161 170); /* zinc-400 */
+}
+
+/* Relay items */
+.relay-item {
+  max-width: 100%;
+}
+
+.relay-url {
+  max-width: 100%;
+}
+
+/* Mobile responsive styles */
+@media (max-width: 768px) {
+  .settings-view {
+    padding: 0.5rem;
+    max-width: 100vw;
+    overflow-x: hidden;
+  }
+  
+  .settings-content {
+    padding: 0 0.25rem 2rem 0.25rem;
+    max-width: 100%;
+  }
+  
+  .settings-section {
+    max-width: 100%;
+    overflow-x: hidden;
+  }
+  
+  .zap-preset-buttons {
+    width: 100%;
+  }
+  
+  .zap-preset-btn {
+    flex: 1 1 auto;
+    min-width: 70px;
+  }
+  
+  .relay-item {
+    max-width: 100%;
+    overflow-x: hidden;
+  }
+  
+  .relay-url {
+    white-space: normal !important;
+    word-break: break-all !important;
+    overflow: visible !important;
+    text-overflow: unset !important;
+    line-height: 1.4;
+  }
+}
+

--- a/src/styles/components/toast.css
+++ b/src/styles/components/toast.css
@@ -1,13 +1,13 @@
 /* Toast Notification */
-.toast { position: fixed; top: 2rem; right: 2rem; background: #1a1a1a; color: #fff; padding: 1rem 1.5rem; border-radius: 8px; border: 1px solid #333; display: flex; align-items: center; gap: 0.75rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); animation: toast-slide-in 0.3s ease-out; z-index: 9999; font-size: 0.95rem; }
+.toast { position: fixed; top: 2rem; right: 2rem; background: rgb(24 24 27); /* zinc-900 */ color: rgb(255 255 255); /* white */ padding: 1rem 1.5rem; border-radius: 8px; border: 1px solid rgb(63 63 70); /* zinc-700 */ display: flex; align-items: center; gap: 0.75rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); animation: toast-slide-in 0.3s ease-out; z-index: 9999; font-size: 0.95rem; }
@media (max-width: 768px) {
  .toast { top: auto; bottom: calc(1rem + var(--safe-area-bottom)); right: 1rem; left: 1rem; max-width: calc(100% - 2rem); }
  @keyframes toast-slide-in { from { transform: translateY(100px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
 }
-.toast-success { border-color: #28a745; }
-.toast-success svg { color: #28a745; }
-.toast-error { border-color: #dc3545; }
-.toast-error svg { color: #dc3545; }
+.toast-success { border-color: rgb(34 197 94); /* green-500 */ }
+.toast-success svg { color: rgb(34 197 94); /* green-500 */ }
+.toast-error { border-color: rgb(220 38 38); /* red-600 */ }
+.toast-error svg { color: rgb(220 38 38); /* red-600 */ }
@keyframes toast-slide-in { from { transform: translateX(400px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }


--- a/src/styles/layout/app.css
+++ b/src/styles/layout/app.css
@@ -39,10 +39,14 @@
@media (min-width: 769px) {
  .pane.sidebar {
    position: sticky;
-    top: 1rem;
-    max-height: calc(100vh - 2rem);
+    top: 0;
+    height: 100vh;
+    max-height: 100vh;
    overflow-y: auto;
    align-self: start;
+    margin: 0;
+    padding: 0;
+    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3);
  }
  
  .pane.main {
@@ -55,10 +59,14 @@
  
  .pane.highlights {
    position: sticky;
-    top: 1rem;
-    max-height: calc(100vh - 2rem);
+    top: 0;
+    height: 100vh;
+    max-height: 100vh;
    overflow-y: auto;
    align-self: start;
+    margin: 0;
+    padding: 0;
+    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.3);
  }
 }

@@ -79,6 +87,8 @@
  .pane.main {
    margin: 0 auto;
    padding: 0;
+    max-width: 100vw;
+    overflow-x: hidden;
  }
 }

@@ -101,7 +111,7 @@
    max-width: 320px;
    height: 100vh;
    height: 100dvh;
-    background: #1a1a1a;
+    background: rgb(24 24 27); /* zinc-900 */
    z-index: 1001; /* Above backdrop */
    transition: transform 0.3s ease;
    box-shadow: none;
--- a/src/styles/layout/highlights.css
+++ b/src/styles/layout/highlights.css
@@ -1,14 +1,20 @@
 /* Highlights panel layout and interactions */
 .highlights-container {
-  background: #1a1a1a;
-  border: 1px solid #333;
-  border-radius: 12px;
+  background: rgb(24 24 27); /* zinc-900 */
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
 }

+/* Desktop: no border or rounded corners for edge-to-edge sidebars */
+@media (min-width: 769px) {
+  .highlights-container {
+    border: none;
+    border-radius: 0;
+  }
+}
+
 .highlights-container.collapsed {
  display: flex;
  align-items: flex-start;
@@ -19,8 +25,8 @@
 }

 .highlights-container.collapsed .toggle-highlights-btn {
-  background: #2a2a2a;
-  color: #ddd;
+  background: rgb(39 39 42); /* zinc-800 */
+  color: rgb(228 228 231); /* zinc-200 */
  border: none;
  padding: 0;
  border-radius: 0;
@@ -33,7 +39,7 @@
  height: 36px;
 }

-.highlights-container.collapsed .toggle-highlights-btn:hover { background: #333; color: #fff; }
+.highlights-container.collapsed .toggle-highlights-btn:hover { background: rgb(63 63 70); /* zinc-700 */ color: rgb(255 255 255); /* white */ }
 .highlights-container.collapsed .toggle-highlights-btn:active { transform: translateY(1px); }
 .highlights-container.collapsed .toggle-highlights-btn.with-icon { width: auto; padding: 0 0.5rem; gap: 0.5rem; }

@@ -42,93 +48,58 @@
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
-  border-bottom: 1px solid #333;
-  background: #1a1a1a;
+  border-bottom: 1px solid rgb(63 63 70); /* zinc-700 */
+  background: rgb(24 24 27); /* zinc-900 */
  border-radius: 12px 12px 0 0;
 }

+/* Desktop: no rounded corners for edge-to-edge header */
+@media (min-width: 769px) {
+  .highlights-header {
+    border-radius: 0;
+  }
+}
+
 .highlights-actions { display: flex; align-items: center; justify-content: space-between; width: 100%; }
 .highlights-actions-left { display: flex; align-items: center; gap: 0.5rem; }

 .highlights-title { display: flex; align-items: center; gap: 0.5rem; }
 .highlights-title h3 { margin: 0; font-size: 1rem; font-weight: 600; }
-.highlights-title .count { color: #888; font-size: 0.875rem; }
+.highlights-title .count { color: rgb(161 161 170); /* zinc-400 */ font-size: 0.875rem; }

 .highlight-mode-toggle { display: flex; gap: 0.25rem; padding: 0.25rem; background: rgba(255, 255, 255, 0.05); border-radius: 4px; }
-.highlight-mode-toggle .mode-btn { background: none; border: none; color: #888; cursor: pointer; padding: 0.375rem 0.5rem; border-radius: 3px; transition: all 0.2s; font-size: 0.9rem; }
-.highlight-mode-toggle .mode-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
-.highlight-mode-toggle .mode-btn.active { background: #646cff; color: #fff; }
+.highlight-mode-toggle .mode-btn { background: none; border: none; color: rgb(161 161 170); /* zinc-400 */ cursor: pointer; padding: 0.375rem 0.5rem; border-radius: 3px; transition: all 0.2s; font-size: 0.9rem; }
+.highlight-mode-toggle .mode-btn:hover { background: rgba(255, 255, 255, 0.1); color: rgb(255 255 255); /* white */ }
+.highlight-mode-toggle .mode-btn.active { background: rgb(99 102 241); /* indigo-500 */ color: rgb(255 255 255); /* white */ }

 /* Three-level highlight toggles */
 .highlight-level-toggles { display: flex; gap: 0.25rem; padding: 0.25rem; background: rgba(255, 255, 255, 0.05); border-radius: 4px; }
-.highlight-level-toggles .level-toggle-btn { background: none; border: none; color: #888; cursor: pointer; padding: 0.375rem 0.5rem; border-radius: 3px; transition: all 0.2s; font-size: 0.9rem; }
-.highlight-level-toggles .level-toggle-btn:hover { background: rgba(255, 255, 255, 0.1); }
-.highlight-level-toggles .level-toggle-btn.active { background: rgba(255, 255, 255, 0.1); opacity: 1; }
-.highlight-level-toggles .level-toggle-btn:not(.active) { opacity: 0.4; }
-.highlight-level-toggles .level-toggle-btn:disabled { opacity: 0.3; cursor: not-allowed; }
-.highlight-level-toggles .level-toggle-btn:disabled:hover { background: none; }
-
-.refresh-highlights-btn,
-.toggle-highlight-display-btn,
-.toggle-highlights-btn {
-  background: transparent;
-  color: #ddd;
-  border: 1px solid #444;
-  padding: 0;
-  border-radius: 6px;
-  cursor: pointer;
-  width: 36px;
-  height: 36px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s ease;
-}
-
-.refresh-highlights-btn:hover,
-.toggle-highlight-display-btn:hover,
-.toggle-highlights-btn:hover { background: #2a2a2a; color: #fff; }
-.refresh-highlights-btn:active,
-.toggle-highlight-display-btn:active,
-.toggle-highlights-btn:active { transform: translateY(1px); }
-.refresh-highlights-btn:disabled { opacity: 0.5; cursor: not-allowed; }
-.refresh-highlights-btn:disabled:hover { background: transparent; color: #ddd; }

 .highlights-loading,
-.highlights-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; color: #888; text-align: center; gap: 0.5rem; }
-.highlights-empty svg { color: #555; margin-bottom: 0.5rem; }
-.empty-hint { font-size: 0.875rem; color: #666; margin-top: 0.5rem; }
+.highlights-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; color: rgb(161 161 170); /* zinc-400 */ text-align: center; gap: 0.5rem; }
+.highlights-empty svg { color: rgb(113 113 122); /* zinc-500 */ margin-bottom: 0.5rem; }
+.empty-hint { font-size: 0.875rem; color: rgb(113 113 122); /* zinc-500 */ margin-top: 0.5rem; }

 .highlights-list { overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
-.highlight-item { background: #1e1e1e; border-left: 1px solid #333; border-right: 1px solid #333; padding: 0; display: flex; transition: border-color 0.2s ease; position: relative; }
-.highlight-item:hover { border-color: #646cff; }
-.highlight-item:hover .highlight-header,
-.highlight-item:hover .highlight-footer { border-color: #646cff; }
-.highlight-item.selected { border-color: #646cff; background: #252525; box-shadow: 0 0 0 2px rgba(100, 108, 255, 0.3); }
-.highlight-item.selected .highlight-header,
-.highlight-item.selected .highlight-footer { border-color: #646cff; }
+.highlight-item { background: rgb(30 30 30); /* ~zinc-850 */ border: 1px solid rgb(63 63 70); /* zinc-700 */ border-radius: 8px; padding: 0; display: flex; transition: border-color 0.2s ease; position: relative; }
+.highlight-item:hover { border-color: rgb(99 102 241); /* indigo-500 */ }
+.highlight-item.selected { border-color: rgb(99 102 241); /* indigo-500 */ background: rgb(39 39 42); /* zinc-800 */ box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3); }

 /* Compact button for highlight cards */
-.compact-button { background: none; border: none; color: #888; cursor: pointer; padding: 0.25rem; font-size: 0.75rem; display: flex; align-items: center; justify-content: center; gap: 0.25rem; transition: all 0.2s ease; border-radius: 4px; min-width: 20px; min-height: 20px; }
-.compact-button:hover { color: #aaa; background: rgba(255, 255, 255, 0.05); }
+.compact-button { background: none; border: none; color: rgb(161 161 170); /* zinc-400 */ cursor: pointer; padding: 0.25rem; font-size: 0.75rem; display: flex; align-items: center; justify-content: center; gap: 0.25rem; transition: all 0.2s ease; border-radius: 4px; min-width: 20px; min-height: 20px; }
+.compact-button:hover { color: rgb(212 212 216); /* zinc-300 */ background: rgba(255, 255, 255, 0.05); }
 .compact-button:active { transform: scale(0.95); }
 .compact-button:disabled { opacity: 0.5; cursor: not-allowed; }
-.compact-button:disabled:hover { background: none; color: #888; transform: none; }
+.compact-button:disabled:hover { background: none; color: rgb(161 161 170); /* zinc-400 */ transform: none; }

-.highlight-header { position: absolute; top: 0; left: 0; right: 0; padding: 0.25rem 0.5rem; display: flex; align-items: center; justify-content: flex-end; pointer-events: none; border-top: 1px solid #333; border-top-left-radius: 8px; border-top-right-radius: 8px; transition: border-color 0.2s ease; }
+.highlight-header { position: absolute; top: 0; left: 0; right: 0; padding: 0.25rem 0.5rem; display: flex; align-items: center; justify-content: flex-end; pointer-events: none; border-top-left-radius: 8px; border-top-right-radius: 8px; transition: border-color 0.2s ease; }
 .highlight-header .compact-button { pointer-events: auto; }
 .highlight-timestamp { font-size: 0.75rem; font-weight: 500; white-space: nowrap; }

 /* Level colors in sidebar items */
 .highlight-item.level-mine { border-color: color-mix(in srgb, var(--highlight-color-mine, #ffff00) 60%, #333); box-shadow: 0 0 0 1px color-mix(in srgb, var(--highlight-color-mine, #ffff00) 25%, transparent); }
-.highlight-item.level-mine .highlight-header,
-.highlight-item.level-mine .highlight-footer { border-color: color-mix(in srgb, var(--highlight-color-mine, #ffff00) 60%, #333); }
 .highlight-item.level-friends { border-color: color-mix(in srgb, var(--highlight-color-friends, #f97316) 60%, #333); box-shadow: 0 0 0 1px color-mix(in srgb, var(--highlight-color-friends, #f97316) 25%, transparent); }
-.highlight-item.level-friends .highlight-header,
-.highlight-item.level-friends .highlight-footer { border-color: color-mix(in srgb, var(--highlight-color-friends, #f97316) 60%, #333); }
 .highlight-item.level-nostrverse { border-color: color-mix(in srgb, var(--highlight-color-nostrverse, #9333ea) 60%, #333); box-shadow: 0 0 0 1px color-mix(in srgb, var(--highlight-color-nostrverse, #9333ea) 25%, transparent); }
-.highlight-item.level-nostrverse .highlight-header,
-.highlight-item.level-nostrverse .highlight-footer { border-color: color-mix(in srgb, var(--highlight-color-nostrverse, #9333ea) 60%, #333); }

 .highlight-quote-button { position: absolute; top: 0.25rem; left: 0.5rem; z-index: 10; }
 .highlight-item.level-mine .highlight-quote-button { color: var(--highlight-color-mine, #ffff00); }
@@ -141,6 +112,13 @@
@media (max-width: 768px) {
  .highlight-relay-indicator { padding: 8px; min-width: var(--min-touch-target); min-height: var(--min-touch-target); }
  .compact-button { padding: 0.5rem; min-width: var(--min-touch-target); min-height: var(--min-touch-target); }
+  
+  /* Keep icon size consistent to prevent blurriness */
+  .compact-button svg {
+    font-size: 0.875rem;
+    width: 1em;
+    height: 1em;
+  }
 }

 /* Level-colored quote icon */
@@ -148,13 +126,13 @@
 .highlight-item.level-friends .highlight-quote-icon { color: var(--highlight-color-friends, #f97316); }
 .highlight-item.level-nostrverse .highlight-quote-icon { color: var(--highlight-color-nostrverse, #9333ea); }

-.highlight-content { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; padding: 1.75rem 0.75rem; }
-.highlight-text { margin: 0; padding: 0; font-style: italic; color: #ddd; line-height: 1.6; border-left: none; font-size: 0.95rem; }
-.highlight-comment { margin-top: 0.5rem; padding: 0.75rem; background: rgba(100, 108, 255, 0.1); border-left: 3px solid #646cff; border-radius: 4px; font-size: 0.875rem; color: #ddd; line-height: 1.5; }
+.highlight-content { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; padding: 2.25rem 0.75rem; }
+.highlight-text { margin: 0; padding: 0; font-style: italic; color: rgb(228 228 231); /* zinc-200 */ line-height: 1.6; border-left: none; font-size: 0.95rem; }
+.highlight-comment { margin-top: 0.5rem; padding: 0.75rem; background: rgba(99, 102, 241, 0.1); border-left: 3px solid rgb(99 102 241); /* indigo-500 */ border-radius: 4px; font-size: 0.875rem; color: rgb(228 228 231); /* zinc-200 */ line-height: 1.5; }

-.highlight-footer { position: absolute; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 0.25rem 0.5rem; font-size: 0.8rem; color: #888; border-bottom: 1px solid #333; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; transition: border-color 0.2s ease; }
+.highlight-footer { position: absolute; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 0.25rem 0.5rem; font-size: 0.8rem; color: rgb(161 161 170); /* zinc-400 */ border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; transition: border-color 0.2s ease; }
 .highlight-footer-left { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
-.highlight-author { color: #aaa; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: inline-flex; align-items: center; min-height: 28px; }
+.highlight-author { color: rgb(212 212 216); /* zinc-300 */ font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: inline-flex; align-items: center; min-height: 28px; }

 /* Ensure relay indicator in footer uses normal flow and matches CompactButton spacing */
 .highlight-item .highlight-footer .highlight-relay-indicator {
@@ -165,11 +143,11 @@
  padding: 0.25rem; /* CompactButton base */
 }
 .highlight-menu-wrapper { position: relative; flex-shrink: 0; display: flex; align-items: center; }
-.highlight-menu { position: absolute; right: 0; top: calc(100% + 4px); background: #2a2a2a; border: 1px solid #444; border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); z-index: 1000; min-width: 160px; overflow: hidden; }
-.highlight-menu-item { width: 100%; background: none; border: none; color: #ddd; padding: 0.625rem 0.875rem; font-size: 0.875rem; display: flex; align-items: center; gap: 0.625rem; cursor: pointer; transition: all 0.15s ease; text-align: left; white-space: nowrap; }
-.highlight-menu-item:hover { background: rgba(100, 108, 255, 0.15); color: #fff; }
+.highlight-menu { position: absolute; right: 0; top: calc(100% + 4px); background: rgb(39 39 42); /* zinc-800 */ border: 1px solid rgb(82 82 91); /* zinc-600 */ border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); z-index: 1000; min-width: 160px; overflow: hidden; }
+.highlight-menu-item { width: 100%; background: none; border: none; color: rgb(228 228 231); /* zinc-200 */ padding: 0.625rem 0.875rem; font-size: 0.875rem; display: flex; align-items: center; gap: 0.625rem; cursor: pointer; transition: all 0.15s ease; text-align: left; white-space: nowrap; }
+.highlight-menu-item:hover { background: rgba(99, 102, 241, 0.15); color: rgb(255 255 255); /* white */ }
 .highlight-menu-item:disabled { opacity: 0.5; cursor: not-allowed; }
-.highlight-menu-item-danger:hover { background: rgba(255, 68, 68, 0.15); color: #ff4444; }
+.highlight-menu-item-danger:hover { background: rgba(255, 68, 68, 0.15); color: rgb(239 68 68); /* red-500 */ }
 .highlight-menu-item svg { font-size: 0.875rem; flex-shrink: 0; }


--- a/src/styles/layout/sidebar.css
+++ b/src/styles/layout/sidebar.css
@@ -1,8 +1,6 @@
 /* Bookmarks and sidebar layout */
 .bookmarks-container {
-  background: #1a1a1a;
-  border: 1px solid #333;
-  border-radius: 12px;
+  background: rgb(24 24 27); /* zinc-900 */
  display: flex;
  flex-direction: column;
  height: 100%;
@@ -11,10 +9,18 @@
  padding: 0;
 }

+/* Desktop: no border or rounded corners for edge-to-edge sidebars */
+@media (min-width: 769px) {
+  .bookmarks-container {
+    border: none;
+    border-radius: 0;
+  }
+}
+
 .bookmarks-container .view-mode-controls {
  margin-top: auto;
  padding: 1rem;
-  border-top: 1px solid #333;
+  border-top: 1px solid rgb(63 63 70); /* zinc-700 */
  background: transparent;
  border-radius: 0;
 }
@@ -35,12 +41,19 @@
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
-  background: #1a1a1a;
-  border: 1px solid #333;
-  border-radius: 12px 12px 0 0;
+  background: rgb(24 24 27); /* zinc-900 */
+  border-bottom: 1px solid rgb(63 63 70); /* zinc-700 */
  margin-bottom: 0;
 }

+/* Mobile: add borders and rounded corners */
+@media (max-width: 768px) {
+  .sidebar-header-bar {
+    border: 1px solid rgb(63 63 70); /* zinc-700 */
+    border-radius: 12px 12px 0 0;
+  }
+}
+
 .sidebar-header-right {
  display: flex;
  align-items: center;
@@ -57,6 +70,12 @@
@media (max-width: 768px) {
  .sidebar-header-bar .toggle-sidebar-btn { display: none; }
  .mobile-close-btn { display: flex; }
+  
+  /* Keep icon sizes consistent to prevent blurriness */
+  .sidebar-header-bar svg {
+    width: 1em;
+    height: 1em;
+  }
 }

 .view-mode-controls {
@@ -67,6 +86,8 @@
 }

 .profile-avatar {
+  min-width: 33px;
+  min-height: 33px;
  width: 33px;
  height: 33px;
  border-radius: 6px;
@@ -74,20 +95,21 @@
  display: flex;
  align-items: center;
  justify-content: center;
-  background: #2a2a2a;
-  border: 1px solid #444;
+  background: rgb(39 39 42); /* zinc-800 */
+  border: 1px solid rgb(82 82 91); /* zinc-600 */
  flex-shrink: 0;
-  color: #ddd;
+  color: rgb(228 228 231); /* zinc-200 */
  box-sizing: border-box;
+  padding: 0;
 }

 .profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
-.profile-avatar svg { font-size: 1.25rem; }
+.profile-avatar svg { font-size: 1rem; }

 .sidebar-header-bar .toggle-sidebar-btn {
  background: transparent;
-  color: #ddd;
-  border: 1px solid #444;
+  color: rgb(228 228 231); /* zinc-200 */
+  border: 1px solid rgb(82 82 91); /* zinc-600 */
  padding: 0;
  border-radius: 6px;
  cursor: pointer;
@@ -101,7 +123,7 @@
  box-sizing: border-box;
 }

-.sidebar-header-bar .toggle-sidebar-btn:hover { background: #2a2a2a; color: #fff; }
+.sidebar-header-bar .toggle-sidebar-btn:hover { background: rgb(39 39 42); /* zinc-800 */ color: rgb(255 255 255); /* white */ }
 .sidebar-header-bar .toggle-sidebar-btn:active { transform: translateY(1px); }

 .bookmarks-container.collapsed {
@@ -114,8 +136,8 @@
 }

 .bookmarks-container.collapsed .toggle-sidebar-btn {
-  background: #2a2a2a;
-  color: #ddd;
+  background: rgb(39 39 42); /* zinc-800 */
+  color: rgb(228 228 231); /* zinc-200 */
  border: none;
  padding: 0;
  border-radius: 0;
@@ -129,22 +151,22 @@
  flex-shrink: 0;
 }

-.bookmarks-container.collapsed .toggle-sidebar-btn:hover { background: #333; color: #fff; }
+.bookmarks-container.collapsed .toggle-sidebar-btn:hover { background: rgb(63 63 70); /* zinc-700 */ color: rgb(255 255 255); /* white */ }
 .bookmarks-container.collapsed .toggle-sidebar-btn:active { transform: translateY(1px); }
 .bookmarks-container.collapsed .toggle-sidebar-btn.with-icon { width: auto; padding: 0 0.5rem; gap: 0.5rem; }
-.bookmarks-container.collapsed .toggle-sidebar-btn .glow-blue { color: #646cff; filter: drop-shadow(0 0 4px rgba(100, 108, 255, 0.6)); }
+.bookmarks-container.collapsed .toggle-sidebar-btn .glow-blue { color: rgb(99 102 241); /* indigo-500 */ filter: drop-shadow(0 0 4px rgba(99, 102, 241, 0.6)); }

-.user-info { margin: 0.5rem 0 0 0; color: #888; font-size: 0.9rem; font-family: monospace; }
-.bookmark-count { color: #666; font-size: 0.9rem; margin: 0.5rem 0; }
-.event-link { color: #8ab4f8; text-decoration: none; font-weight: 500; }
+.user-info { margin: 0.5rem 0 0 0; color: rgb(161 161 170); /* zinc-400 */ font-size: 0.9rem; font-family: monospace; }
+.bookmark-count { color: rgb(113 113 122); /* zinc-500 */ font-size: 0.9rem; margin: 0.5rem 0; }
+.event-link { color: rgb(96 165 250); /* blue-400 */ text-decoration: none; font-weight: 500; }
 .event-link:hover { text-decoration: underline; }

 .bookmark-urls { margin: 0.75rem 0; }
-.bookmark-url { display: block; margin: 0.25rem 0; color: #007bff; text-decoration: none; word-break: break-all; background: none; border: none; padding: 0; font: inherit; cursor: pointer; text-align: left; width: 100%; }
+.bookmark-url { display: block; margin: 0.25rem 0; color: rgb(59 130 246); /* blue-500 */ text-decoration: none; word-break: break-all; background: none; border: none; padding: 0; font: inherit; cursor: pointer; text-align: left; width: 100%; }
 .bookmark-url:hover { text-decoration: underline; }

 .url-row { display: flex; align-items: center; gap: 0.5rem; }
-.read-inline-btn { background: #28a745; color: white; border: none; padding: 0.25rem 0.5rem; border-radius: 4px; cursor: pointer; }
-.read-inline-btn:hover { background: #218838; }
+.read-inline-btn { background: rgb(34 197 94); /* green-500 */ color: white; border: none; padding: 0.25rem 0.5rem; border-radius: 4px; cursor: pointer; }
+.read-inline-btn:hover { background: rgb(22 163 74); /* green-600 */ }


--- a/src/styles/utils/animations.css
+++ b/src/styles/utils/animations.css
@@ -21,4 +21,12 @@
  75% { box-shadow: 0 0 20px rgba(var(--highlight-rgb, 255, 255, 0), 0.6); transform: scale(1.02); }
 }

+/* Reading progress bar positioning */
+@media (min-width: 769px) {
+  .reading-progress-bar {
+    left: var(--left-offset) !important;
+    right: var(--right-offset) !important;
+  }
+}
+

--- a/src/styles/utils/legacy.css
+++ b/src/styles/utils/legacy.css
@@ -1,102 +1,4 @@
-/* Legacy styles for bookmark debugging and nostr content parsing */
-
-.user-info {
-  margin: 0.5rem 0 0 0;
-  color: #888;
-  font-size: 0.9rem;
-  font-family: monospace;
-}
-
-.bookmark-count {
-  color: #666;
-  font-size: 0.9rem;
-  margin: 0.5rem 0;
-}
-
-.event-link {
-  color: #8ab4f8;
-  text-decoration: none;
-  font-weight: 500;
-}
-
-.event-link:hover {
-  text-decoration: underline;
-}
-
-.bookmark-urls {
-  margin: 0.75rem 0;
-}
-
-.bookmark-url {
-  display: block;
-  margin: 0.25rem 0;
-  color: #007bff;
-  text-decoration: none;
-  word-break: break-all;
-  background: none;
-  border: none;
-  padding: 0;
-  font: inherit;
-  cursor: pointer;
-  text-align: left;
-  width: 100%;
-}
-
-.bookmark-url:hover {
-  text-decoration: underline;
-}
-
-.url-row {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.read-inline-btn {
-  background: #28a745;
-  color: white;
-  border: none;
-  padding: 0.25rem 0.5rem;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.read-inline-btn:hover {
-  background: #218838;
-}
-
-.bookmark-events {
-  margin: 1rem 0;
-}
-
-.bookmark-events h4 {
-  margin: 0 0 0.5rem 0;
-  font-size: 0.9rem;
-  color: #666;
-}
-
-.event-ids {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-}
-
-.event-id {
-  background: #f5f5f5;
-  padding: 0.25rem 0.5rem;
-  border-radius: 4px;
-  font-family: monospace;
-  font-size: 0.8rem;
-  color: #666;
-}
-
-.more-events {
-  color: #999;
-  font-style: italic;
-  font-size: 0.8rem;
-}
-
-/* Nostr content parsing styles */
+/* Nostr content parsing and URI resolution styles */
 .parsed-content,
 .nostr-mention,
 .nostr-link,
@@ -113,10 +15,10 @@

 .nostr-mention,
 .nostr-uri-link {
-  color: #007bff;
+  color: rgb(59 130 246); /* blue-500 */
  text-decoration: none;
  font-family: monospace;
-  background: #f8f9fa;
+  background: rgb(248 250 252); /* slate-50 */
  padding: 0.2rem 0.4rem;
  border-radius: 3px;
  font-size: 0.9rem;
@@ -129,12 +31,12 @@

 .nostr-mention:hover,
 .nostr-uri-link:hover {
-  background: #e9ecef;
+  background: rgb(226 232 240); /* slate-200 */
  text-decoration: underline;
 }

 .nostr-link {
-  color: #007bff;
+  color: rgb(59 130 246); /* blue-500 */
  text-decoration: none;
 }

@@ -142,35 +44,11 @@
  text-decoration: underline;
 }

-.logout-button {
-  background: #dc3545;
-  color: white;
-  border: none;
-  padding: 0.5rem 1rem;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: background-color 0.2s;
-}
-
-.logout-button:hover {
-  background: #c82333;
-}
-
-/* Common state styles */
-.loading {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  padding: 2rem;
-  color: #ccc;
-}
-
+/* Empty state */
 .empty-state {
  text-align: center;
  padding: 3rem;
-  color: #888;
+  color: rgb(161 161 170); /* zinc-400 */
  flex: 1;
  display: flex;
  flex-direction: column;
--- a/src/utils/colorHelpers.ts
+++ b/src/utils/colorHelpers.ts
@@ -6,11 +6,12 @@ export function hexToRgb(hex: string): string {
    : '255, 255, 0'
 }

+// Tailwind color palette for highlight colors
 export const HIGHLIGHT_COLORS = [
-  { name: 'Yellow', value: '#ffff00' },
-  { name: 'Orange', value: '#f97316' },
-  { name: 'Pink', value: '#ff69b4' },
-  { name: 'Green', value: '#00ff7f' },
-  { name: 'Blue', value: '#4da6ff' },
-  { name: 'Purple', value: '#9333ea' }
+  { name: 'Yellow', value: '#fde047' },  // yellow-300
+  { name: 'Orange', value: '#f97316' },  // orange-500
+  { name: 'Pink', value: '#ec4899' },    // pink-500
+  { name: 'Green', value: '#22c55e' },   // green-500
+  { name: 'Blue', value: '#3b82f6' },    // blue-500
+  { name: 'Purple', value: '#9333ea' }   // purple-600
 ]
--- a/src/utils/highlightMatching/domUtils.ts
+++ b/src/utils/highlightMatching/domUtils.ts
@@ -52,6 +52,7 @@ export function tryMarkInTextNodes(
 ): boolean {
  const normalizedSearch = normalizeWhitespace(searchText)
  
+  // First try: Single text node match
  for (const textNode of textNodes) {
    const text = textNode.textContent || ''
    const searchIn = useNormalized ? normalizeWhitespace(text) : text
@@ -73,12 +74,216 @@ export function tryMarkInTextNodes(
    const before = text.substring(0, actualIndex)
    const match = text.substring(actualIndex, actualIndex + searchText.length)
    const after = text.substring(actualIndex + searchText.length)
+    
+    // Validate the match makes sense (not just whitespace or empty)
+    if (!match || match.trim().length === 0) {
+      console.warn('Invalid match (empty or whitespace only)')
+      continue
+    }
+    
    const mark = createMarkElement(highlight, match, highlightStyle)
    
    replaceTextWithMark(textNode, before, after, mark)
    return true
  }
  
-  return false
+  // Second try: Multi-node match (for text spanning multiple elements)
+  return tryMultiNodeMatch(textNodes, searchText, highlight, useNormalized, highlightStyle)
+}
+
+/**
+ * Try to find and mark text that spans multiple text nodes
+ */
+function tryMultiNodeMatch(
+  textNodes: Text[],
+  searchText: string,
+  highlight: Highlight,
+  useNormalized: boolean,
+  highlightStyle: 'marker' | 'underline' = 'marker'
+): boolean {
+  const normalizedSearch = normalizeWhitespace(searchText)
+  
+  // Build a combined text from all nodes
+  let combinedText = ''
+  const nodeMap: Array<{ node: Text; start: number; end: number; originalText: string }> = []
+  
+  for (const node of textNodes) {
+    const text = node.textContent || ''
+    const start = combinedText.length
+    const end = start + text.length
+    nodeMap.push({ node, start, end, originalText: text })
+    combinedText += text
+  }
+  
+  // Search in combined text
+  const searchIn = useNormalized ? normalizeWhitespace(combinedText) : combinedText
+  const searchFor = useNormalized ? normalizedSearch : searchText
+  const matchIndex = searchIn.indexOf(searchFor)
+  
+  if (matchIndex === -1) return false
+  
+  // Map normalized index back to original if needed
+  let startIndex = matchIndex
+  let endIndex = matchIndex + searchFor.length
+  
+  if (useNormalized) {
+    // Build precise mapping by walking original text and advancing a normalized counter
+    const endPos = matchIndex + searchFor.length // end position in normalized text (exclusive)
+    let normPos = 0
+    let foundStart = false
+    let foundEnd = false
+    let startNode: Text | null = null
+    let startOffset = 0
+    let endNode: Text | null = null
+    let endOffset = 0
+
+    for (const nodeInfo of nodeMap) {
+      const text = nodeInfo.originalText
+      let prevWasWs = false
+      for (let i = 0; i < text.length && (!foundStart || !foundEnd); i++) {
+        const ch = text[i]
+        const isWs = /\s/.test(ch)
+
+        if (isWs) {
+          if (!prevWasWs) {
+            // This whitespace sequence counts as one in normalized text
+            if (!foundStart && normPos === matchIndex) {
+              startNode = nodeInfo.node
+              startOffset = i
+              foundStart = true
+            }
+            if (!foundEnd && normPos === endPos) {
+              endNode = nodeInfo.node
+              endOffset = i
+              foundEnd = true
+            }
+            normPos++
+          }
+          prevWasWs = true
+        } else {
+          if (!foundStart && normPos === matchIndex) {
+            startNode = nodeInfo.node
+            startOffset = i
+            foundStart = true
+          }
+          normPos++
+          if (!foundEnd && normPos === endPos) {
+            endNode = nodeInfo.node
+            endOffset = i + 1 // end after this character
+            foundEnd = true
+          }
+          prevWasWs = false
+        }
+      }
+      if (foundStart && foundEnd) break
+    }
+
+    if (!foundStart || !foundEnd || !startNode || !endNode) {
+      console.warn('Failed to map normalized positions to nodes', { matchIndex, endPos, normPos })
+      return false
+    }
+
+    // Set indices relative to combinedText by reconstructing start/end using nodeMap
+    const startNodeInfo = nodeMap.find(n => n.node === startNode)!
+    const endNodeInfo = nodeMap.find(n => n.node === endNode)!
+    startIndex = startNodeInfo.start + startOffset
+    endIndex = endNodeInfo.start + endOffset
+
+    if (startIndex < 0 || endIndex <= startIndex || endIndex > combinedText.length) {
+      console.warn('Mapped indices invalid', { startIndex, endIndex, combinedTextLength: combinedText.length })
+      return false
+    }
+  }
+  
+  // Validate indices
+  if (startIndex < 0 || endIndex > combinedText.length || startIndex >= endIndex) {
+    console.warn('Invalid highlight range:', { startIndex, endIndex, combinedTextLength: combinedText.length })
+    return false
+  }
+  
+  // Find which nodes contain the match
+  const affectedNodes: Array<{ node: Text; startOffset: number; endOffset: number }> = []
+  
+  for (const nodeInfo of nodeMap) {
+    if (startIndex < nodeInfo.end && endIndex > nodeInfo.start) {
+      const nodeStart = Math.max(0, startIndex - nodeInfo.start)
+      const nodeEnd = Math.min(nodeInfo.originalText.length, endIndex - nodeInfo.start)
+      
+      // Validate node offsets
+      if (nodeStart < 0 || nodeEnd > nodeInfo.originalText.length || nodeStart > nodeEnd) {
+        console.warn('Invalid node offsets:', { nodeStart, nodeEnd, nodeLength: nodeInfo.originalText.length })
+        continue
+      }
+      
+      affectedNodes.push({ node: nodeInfo.node, startOffset: nodeStart, endOffset: nodeEnd })
+    }
+  }
+  
+  if (affectedNodes.length === 0) {
+    console.warn('No affected nodes found for highlight')
+    return false
+  }
+  
+  try {
+    // Create a Range to wrap the entire selection in a single mark element
+    const range = document.createRange()
+    const firstNode = affectedNodes[0]
+    const lastNode = affectedNodes[affectedNodes.length - 1]
+    
+    range.setStart(firstNode.node, firstNode.startOffset)
+    range.setEnd(lastNode.node, lastNode.endOffset)
+    
+    // Verify the range isn't collapsed or invalid
+    if (range.collapsed) {
+      console.warn('Range is collapsed, skipping highlight')
+      return false
+    }
+    
+    // Get the text content before extraction to verify it matches
+    const rangeText = range.toString()
+    const normalizedRangeText = normalizeWhitespace(rangeText)
+    const normalizedSearchText = normalizeWhitespace(searchText)
+    
+    // Validate that the extracted text matches what we're searching for
+    if (!rangeText.includes(searchText) && 
+        !normalizedRangeText.includes(normalizedSearchText) &&
+        normalizedRangeText !== normalizedSearchText) {
+      console.warn('Range text does not match search text:', {
+        rangeText: rangeText.substring(0, 100),
+        searchText: searchText.substring(0, 100),
+        rangeLength: rangeText.length,
+        searchLength: searchText.length
+      })
+      return false
+    }
+    
+    // Extract the content from the range
+    const extractedContent = range.extractContents()
+    
+    // Verify we actually extracted something
+    if (!extractedContent || extractedContent.childNodes.length === 0) {
+      console.warn('No content extracted from range')
+      return false
+    }
+    
+    // Create a single mark element
+    const mark = document.createElement('mark')
+    const levelClass = highlight.level ? ` level-${highlight.level}` : ''
+    mark.className = `content-highlight-${highlightStyle}${levelClass}`
+    mark.setAttribute('data-highlight-id', highlight.id)
+    mark.setAttribute('data-highlight-level', highlight.level || 'nostrverse')
+    mark.setAttribute('title', `Highlighted ${new Date(highlight.created_at * 1000).toLocaleDateString()}`)
+    
+    // Append the extracted content to the mark
+    mark.appendChild(extractedContent)
+    
+    // Insert the mark at the range position
+    range.insertNode(mark)
+    
+    return true
+  } catch (error) {
+    console.error('Error applying multi-node highlight:', error)
+    return false
+  }
 }

--- a/src/utils/highlightMatching/htmlMatching.ts
+++ b/src/utils/highlightMatching/htmlMatching.ts
@@ -22,6 +22,17 @@ export function applyHighlightsToHTML(
  const tempDiv = document.createElement('div')
  tempDiv.innerHTML = html
  
+  // CRITICAL: Remove any existing highlight marks to start with clean HTML
+  // This prevents old broken highlights from corrupting the new rendering
+  const existingMarks = tempDiv.querySelectorAll('mark[data-highlight-id]')
+  existingMarks.forEach(mark => {
+    // Replace the mark with its text content
+    const textNode = document.createTextNode(mark.textContent || '')
+    mark.parentNode?.replaceChild(textNode, mark)
+  })
+  
+  console.log('🧹 Removed', existingMarks.length, 'existing highlight marks')
+  
  let appliedCount = 0
  
  for (const highlight of highlights) {
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,6 +6,22 @@ export default {
  ],
  theme: {
    extend: {
+      colors: {
+        // Semantic color aliases for the app
+        'app-bg': '#18181b',           // zinc-900
+        'app-bg-elevated': '#27272a',  // zinc-800
+        'app-bg-subtle': '#1e1e1e',    // Custom between 800-900
+        'app-border': '#3f3f46',       // zinc-700
+        'app-border-subtle': '#52525b', // zinc-600
+        'app-text': '#e4e4e7',         // zinc-200
+        'app-text-secondary': '#a1a1aa', // zinc-400
+        'app-text-muted': '#71717a',   // zinc-500
+        'primary': '#6366f1',          // indigo-500
+        'primary-hover': '#4f46e5',    // indigo-600
+        'highlight-mine': '#fde047',   // yellow-300
+        'highlight-friends': '#f97316', // orange-500
+        'highlight-nostrverse': '#9333ea', // purple-600
+      },
      keyframes: {
        shimmer: {
          '0%': { transform: 'translateX(-100%)' },
Author	SHA1	Message	Date
Gigi	6b240b01ec	docs: update changelog for v0.6.2	2025-10-14 00:54:28 +02:00
Gigi	945894e3db	chore: bump version to 0.6.2	2025-10-14 00:53:17 +02:00
Gigi	667397e528	fix: align title, summary, meta, and body text in reader - Add consistent 2rem horizontal padding to reader-header on desktop - Apply same padding to reader-summary-below-image, article-menu-container, and mark-as-read-container - All content elements now align properly with body text - Mobile (< 769px) retains base padding only	2025-10-14 00:52:19 +02:00
Gigi	e4b0d6d1cd	refactor: unify button styles across sidebars using IconButton - Convert HighlightsPanel buttons to use IconButton component - Add style prop support to IconButton for custom styling - Remove redundant CSS for old button classes (level-toggle-btn, refresh-highlights-btn, etc.) - Keep only highlight-level-toggles container styling - Consistent button appearance across left and right sidebars - DRY: Single IconButton component handles all sidebar buttons	2025-10-14 00:50:52 +02:00
Gigi	3cdda2dcb7	refactor: move bookmark refresh button to footer with view controls - Remove separate refresh section from bookmarks list - Add refresh button to view-mode-controls footer - Show last update time in button tooltip instead of inline text - Cleaner UI with all controls in one footer section	2025-10-14 00:48:47 +02:00
Gigi	876ecc808d	feat: add pull-to-refresh for mobile on all scrollable views - Create reusable usePullToRefresh hook with touch gesture detection - Add PullToRefreshIndicator component with visual feedback - Implement pull-to-refresh on HighlightsPanel (right sidebar) - Implement pull-to-refresh on Explore page - Implement pull-to-refresh on Me pages (all tabs) - Implement pull-to-refresh on BookmarkList (left sidebar) - Only activates on touch devices for mobile-first experience - Shows rotating arrow icon that becomes refresh spinner - Displays contextual messages (pull/release/refreshing) - Integrates with existing refresh handlers and loading states	2025-10-14 00:47:48 +02:00
Gigi	34671bd067	feat: add three-dot menu for external URLs in /r/ path - Add menu button with options to open original URL, copy URL, and share - Reuse existing menu styling for consistency - Menu positioned at end of article content before mark-as-read button	2025-10-14 00:39:53 +02:00
Gigi	a6285f6a1d	fix(highlights): precise normalized-to-original mapping to eliminate intra-word spaces - Walk original text across node boundaries while tracking normalized positions - Identify exact start/end nodes and offsets for the match - Compute combined indices from node spans to create accurate DOM Range - Eliminates artifacts like 'We b' by preventing whitespace from splitting words - Keeps strict bounds checks and graceful failures	2025-10-14 00:37:56 +02:00
Gigi	36508d600a	fix(highlights): remove existing highlight marks before applying new ones - Strip all existing mark elements from HTML before re-highlighting - Prevents old broken highlights from persisting in the DOM - Ensures clean text is used as the base for new highlight application - Fixes 'We b' spacing issue caused by corrupted marks from previous buggy renders - Remove debug logging now that position mapping is working correctly	2025-10-14 00:34:55 +02:00
Gigi	a304bb7c26	debug: add detailed position mapping logging to diagnose spacing issues - Log search text, match indices, and extracted text during position mapping - Show sample of combined text around the extracted range - Help identify where position mapping is going wrong for 'We b' issue	2025-10-14 00:31:59 +02:00
Gigi	04bab96a07	fix(highlights): improve normalized text position mapping to prevent character spacing issues - Build explicit position map array from normalized to original text indices - Properly handle whitespace sequences in position mapping - Ensure each normalized character position maps to correct original position - Validate mapped positions are within bounds before using - Fixes spacing issues like 'We b' appearing instead of 'Web' in highlights	2025-10-14 00:27:38 +02:00
Gigi	22ebbff755	fix(highlights): add text validation before applying highlights - Validate extracted range text matches search text before highlighting - Check single-node matches are not empty or whitespace-only - Compare both exact and normalized text to handle whitespace variations - Prevent broken/corrupted highlights from being applied to DOM - Add detailed logging for validation failures to aid debugging	2025-10-14 00:25:18 +02:00
Gigi	b43f40597f	fix(highlights): add robust validation and error handling for multi-node highlighting - Implement proper normalized-to-original text position mapping - Add comprehensive validation for range indices and node offsets - Verify range is not collapsed before extracting content - Add try-catch block to handle DOM manipulation errors gracefully - Add detailed warning logs for debugging failed highlight matches - Prevent invalid ranges from corrupting the DOM structure - Fix broken text nodes and visual artifacts in highlighted content	2025-10-14 00:23:43 +02:00
Gigi	fe3af25c5f	docs: update changelog for v0.6.1 release	2025-10-14 00:21:31 +02:00
Gigi	ffafc6f64d	chore: bump version to 0.6.1	2025-10-14 00:20:37 +02:00
Gigi	eadab9a37f	fix(highlights): restore scroll-to-highlight functionality with MutationObserver - Add MutationObserver to detect when highlights are added/removed from DOM - Use contentVersion state to trigger re-attachment of click handlers - Add contentVersion dependency to scroll effect so it re-runs after DOM updates - Add 100ms delay to scroll effect to ensure DOM is fully rendered - Add warning log when mark element cannot be found - Fixes issue where clicking highlights in sidebar wouldn't scroll after DOM changes	2025-10-14 00:19:45 +02:00
Gigi	13b1692931	fix(highlights): create single continuous highlight element for multi-node selections - Use DOM Range API to extract and wrap content in a single mark element - Preserves internal DOM structure (links, formatting) within the highlight - Eliminates visual breaks between multiple mark elements - Ensures highlight appears as one continuous selection even across inline elements	2025-10-14 00:18:30 +02:00
Gigi	3a78289fee	fix(highlights): make multi-node highlights appear seamless - Remove border-radius (set to 0) to eliminate rounded corner breaks - Remove horizontal padding (only 0.1rem vertical for slight breathing room) - Remove all box-shadows that create visual separation - Simplify hover states for cleaner appearance - Highlights spanning multiple DOM nodes now appear as one continuous highlight	2025-10-14 00:16:37 +02:00
Gigi	12c70b06de	fix(highlights): improve text matching to handle multi-node selections - Add tryMultiNodeMatch function to find text spanning multiple DOM nodes - Build combined text from all text nodes for comprehensive matching - Handle highlighting across node boundaries with proper offsets - Falls back to multi-node matching when single-node match fails - Fixes issue where selections with inline formatting couldn't be matched	2025-10-14 00:05:43 +02:00
Gigi	c7c82954ad	feat(highlights): force synchronous render for immediate highlight display - Use flushSync to force React to render synchronously after highlight creation - Eliminates render cycle delay for instant visual feedback - Highlights now appear immediately in the text when created	2025-10-14 00:03:56 +02:00
Gigi	3b639e2783	feat(highlights): clear browser selection immediately after creating highlight - Add window.getSelection().removeAllRanges() after highlight creation - Ensures DOM can update immediately without selection interference - Improves perceived responsiveness of highlight creation	2025-10-14 00:03:19 +02:00
Gigi	946584236d	fix(mobile): prevent horizontal overflow from code blocks and wide content - Add mobile-specific styles for pre/code elements with word-wrap - Use pre-wrap for code blocks to wrap long lines on mobile - Add max-width and overflow-x constraints to main pane container - Add overflow-x: hidden to body to prevent horizontal scrolling - Handle tables and images with max-width: 100% on mobile - Ensure all content respects viewport width on mobile devices	2025-10-13 23:58:39 +02:00
Gigi	aadbf2084f	fix(mobile): hide sidebar/highlights toggle buttons on settings, explore, and me pages - Only show mobile floating buttons when viewing article content - Hide buttons on settings/explore/me views to avoid UI clutter - Update conditional rendering logic in ThreePaneLayout	2025-10-13 23:57:06 +02:00
Gigi	3d7b649cba	fix(ui): prevent long relay URLs from causing horizontal overflow on mobile - Add relay-url className to relay URL elements - Override inline nowrap styles on mobile with word-break: break-all - Allow relay URLs to wrap across multiple lines on mobile - Prevent horizontal overflow from long relay names like proxy URLs	2025-10-13 23:55:35 +02:00
Gigi	caa07012a7	fix(ui): make settings view mobile-friendly - Add max-width: 100% and overflow handling to preview content - Add word-break and overflow-wrap to prevent text overflow - Make inline settings stack vertically on mobile - Reduce padding on mobile for settings view - Make zap preset buttons flex to fit mobile width - Ensure all setting controls respect viewport width - Fix preview heading size on mobile	2025-10-13 23:53:43 +02:00
Gigi	ad5cd875de	feat(ui): improve zap splits settings styling - Add styled preset buttons (Default, Generous, Selfless, Boris) - Make sliders 100% width with full-width container - Style active preset button with indigo-500 - Add hover effects to preset buttons and slider thumbs - Improve slider thumb appearance with rounded design - Style description box with proper background and borders - Use Tailwind colors throughout (zinc, indigo)	2025-10-13 23:50:00 +02:00
Gigi	0a4bc2cfbb	fix(ui): show filename for videos instead of 'Error Loading Content' - Add getFilenameFromUrl helper to extract filename from URL - Use filename as title when content loading fails (e.g., for video files) - Decode URI component to handle special characters in filenames - Improves UX for video and media file viewing	2025-10-13 23:48:11 +02:00
Gigi	605dd41939	fix(ui): render AddBookmarkModal using portal to fix z-index stacking Use React createPortal to render modal directly to document.body, bypassing the sidebar's stacking context (z-index: 1) which was preventing the modal from appearing above other elements	2025-10-13 23:46:50 +02:00
Gigi	8679ae7a37	feat(ui): increase horizontal padding for reader text content on desktop Add 2rem left and right padding to reader-html and reader-markdown on desktop (min-width: 769px) for better text spacing from edges	2025-10-13 23:43:28 +02:00
Gigi	3c1e4312c9	feat(me): add Writings tab to display user's published articles - Add 'writings' tab type to Me component - Fetch articles written by logged-in user using fetchBlogPostsFromAuthors - Display writings in same grid style as archive tab - Add pen-to-square icon for writings tab - Add /me/writings route - Update Bookmarks component to handle writings tab routing - Show article count in tab badge - Empty state message for users with no published articles	2025-10-13 23:42:26 +02:00
Gigi	53ed6849af	feat(ui): add vertical padding to blockquotes Add 1rem top and bottom padding to blockquotes for better spacing and visual separation	2025-10-13 23:38:14 +02:00
Gigi	4b95e6c262	feat(ui): add comprehensive list styling for articles - Add proper ul/ol styling with disc and decimal markers - Add 2rem left padding for list indentation - Add proper spacing between list items (0.375rem) - Style nested lists with circle (ul) and lower-alpha (ol) - Reduce margins for nested lists - Handle paragraphs within list items with reduced margins - Use zinc-200 color for list items - Support both markdown and HTML content	2025-10-13 23:37:32 +02:00
Gigi	40ab215c4d	refactor(ui): simplify blockquote styling to minimal indent and italic - Remove colored left border - Remove background color - Remove border radius and padding - Keep only 2rem left padding for indentation - Keep italic style for differentiation - Cleaner, more minimal appearance	2025-10-13 23:36:28 +02:00
Gigi	823927525f	feat(ui): add comprehensive headline styling with Tailwind typography - Add proper h1-h6 styling for both markdown and HTML content - Use Tailwind font sizes: h1 (text-4xl), h2 (text-3xl), h3 (text-2xl), h4 (text-xl), h5 (text-lg), h6 (text-base) - Apply appropriate font weights: h1 (700), h2-h6 (600) - Use zinc-100 for h1-h3, zinc-200 for h4-h6 for proper hierarchy - Add proper top and bottom margins for better spacing - Set line heights for optimal readability	2025-10-13 23:35:38 +02:00
Gigi	6277824b32	feat(ui): add blockquote styling with Tailwind colors - Add blockquote styles for both markdown and HTML content - Use indigo-500 left border for visual distinction - Use zinc-800 background for subtle emphasis - Add proper spacing and rounded corners - Apply zinc-300 color and italic style for readability - Properly handle nested paragraph margins	2025-10-13 23:34:30 +02:00
Gigi	f94e4ba900	feat(ui): make article titles larger and show summaries - Increase title font size to 2.5rem (desktop) and 2rem (mobile) - Add font-weight: 700 and better line-height to titles - Increase summary font size to 1.2rem with better line-height - Fix missing summary display by passing summary prop to ReaderHeader - Improve readability and visual hierarchy of article headers	2025-10-13 23:33:23 +02:00
Gigi	acf14ccee9	feat(ui): add 100vh height and drop-shadows to sidebars - Set sidebars to always have 100vh height on desktop - Add drop-shadow to left sidebar (2px right shadow) - Add drop-shadow to right highlights panel (2px left shadow) - Improves visual separation and depth perception	2025-10-13 23:28:00 +02:00
Gigi	f882b63359	fix(ui): remove padding gaps around sidebars Remove md:p-4 padding from root container to eliminate gaps between screen edges and sidebars	2025-10-13 23:26:25 +02:00
Gigi	7b1e3be39b	fix(api): resolve TypeScript errors in video-meta.ts - Remove non-existent getVideoDetails import from youtube-caption-extractor - Add Subtitle type definition for proper type conversion - Remove invalid 'auto' parameter from getSubtitles call - Convert Subtitle[] to Caption[] with proper type casting - Simplify title/description extraction for YouTube metadata	2025-10-13 23:23:52 +02:00
Gigi	ee17018076	docs: add comprehensive color system documentation	2025-10-13 23:19:57 +02:00
Gigi	1dd2e1dc38	refactor: switch to brighter yellow-300 for highlight defaults and add semantic color aliases	2025-10-13 23:19:33 +02:00
Gigi	4cd1aa89ad	chore: remove migration plan file	2025-10-13 23:18:26 +02:00
Gigi	e667cf05c2	refactor: update default highlight color to yellow-400 in useSettings	2025-10-13 23:18:13 +02:00
Gigi	7512375728	refactor: update default highlight color to yellow-400 in ThreePaneLayout	2025-10-13 23:17:46 +02:00
Gigi	f108e2e70a	refactor: replace arbitrary color values with Tailwind utilities in ThreePaneLayout	2025-10-13 23:17:21 +02:00
Gigi	daa43ec4c4	refactor: migrate global.css to Tailwind color palette	2025-10-13 23:16:51 +02:00
Gigi	ab2223e739	refactor: migrate app.css to Tailwind color palette	2025-10-13 23:16:28 +02:00
Gigi	e8cbb3af4b	refactor: migrate legacy.css to Tailwind color palette	2025-10-13 23:16:06 +02:00
Gigi	f374a9af28	refactor: migrate settings.css to Tailwind color palette	2025-10-13 23:15:40 +02:00
Gigi	f2cbc66a97	refactor: migrate profile.css to Tailwind color palette	2025-10-13 23:15:21 +02:00
Gigi	1627d4f53e	refactor: migrate me.css to Tailwind color palette	2025-10-13 23:14:56 +02:00
Gigi	b93a4d072a	refactor: migrate reader.css to Tailwind color palette	2025-10-13 23:14:02 +02:00
Gigi	3e4bc97684	refactor: migrate toast.css to Tailwind color palette	2025-10-13 23:12:48 +02:00
Gigi	3c0c20f61c	refactor: migrate modals.css to Tailwind color palette	2025-10-13 23:12:26 +02:00
Gigi	dae63e210b	refactor: migrate forms.css to Tailwind color palette	2025-10-13 23:11:42 +02:00
Gigi	dc500cc296	refactor: migrate cards.css to Tailwind color palette	2025-10-13 23:11:03 +02:00
Gigi	1fc1e4f102	refactor: migrate icon-button.css to Tailwind color palette	2025-10-13 23:08:31 +02:00
Gigi	524b5e1559	refactor: migrate sidebar.css to Tailwind color palette	2025-10-13 23:07:53 +02:00
Gigi	930de76d1f	refactor: migrate highlights.css to Tailwind color palette	2025-10-13 23:06:09 +02:00
Gigi	b85fc820d1	refactor: setup Tailwind color foundation with semantic aliases and updated defaults	2025-10-13 23:03:07 +02:00
Gigi	b145aee29d	docs: add comprehensive Tailwind color migration plan	2025-10-13 22:54:22 +02:00
Gigi	a0e65a48f1	refactor: clean up legacy.css removing unused debugging styles	2025-10-13 22:51:49 +02:00
Gigi	ccdfc54cdc	style: increase spacing between highlight card header/footer and content	2025-10-13 22:49:37 +02:00
Gigi	61ce338b8c	fix: show reading progress indicator on mobile at full width	2025-10-13 22:48:39 +02:00
Gigi	47de9a75b7	style: remove rounded corners from bookmark sidebar header and fix profile avatar size	2025-10-13 22:48:23 +02:00
Gigi	607f3d46f0	fix: remove sidebar margins and constrain reading progress bar to content pane	2025-10-13 22:44:59 +02:00
Gigi	bdbc08fdf1	style: make mobile sidebar buttons more subtle and refined	2025-10-13 22:40:01 +02:00
Gigi	3a28160ae8	fix: prevent icon blurriness on mobile by setting explicit sizes	2025-10-13 22:38:36 +02:00
Gigi	e03696eed7	style: make sidebars extend edge-to-edge on desktop	2025-10-13 22:37:20 +02:00
Gigi	f80fa3de7f	fix: correct highlight card borders and rounded corners	2025-10-13 22:36:04 +02:00
Gigi	4518fc16a7	docs: update changelog for v0.6.0 release	2025-10-13 22:34:09 +02:00