diff --git a/src/index.css b/src/index.css
index 3922d218..0657b8e3 100644
--- a/src/index.css
+++ b/src/index.css
@@ -210,237 +210,7 @@
   justify-content: center;
 }
 
-.bookmarks-list {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-  max-width: 600px;
-  margin: 0 auto;
-}
-
-/* Two-pane layout (legacy support) */
-.two-pane {
-  display: grid;
-  grid-template-columns: 360px 1fr;
-  column-gap: 0;
-  height: calc(100vh - 4rem);
-  transition: grid-template-columns 0.3s ease;
-}
-
-.two-pane.sidebar-collapsed {
-  grid-template-columns: 60px 1fr;
-}
-
-/* Three-pane layout */
-.three-pane {
-  display: grid;
-  grid-template-columns: var(--sidebar-width) 1fr var(--highlights-width);
-  column-gap: 0;
-  height: calc(100vh - 2rem);
-  transition: grid-template-columns 0.3s ease;
-  position: relative;
-}
-
-@supports (height: 100dvh) {
-  .three-pane {
-    height: calc(100dvh - 2rem);
-  }
-}
-
-.three-pane.sidebar-collapsed {
-  grid-template-columns: var(--sidebar-collapsed-width) 1fr var(--highlights-width);
-}
-
-.three-pane.highlights-collapsed {
-  grid-template-columns: var(--sidebar-width) 1fr var(--highlights-collapsed-width);
-}
-
-.three-pane.sidebar-collapsed.highlights-collapsed {
-  grid-template-columns: var(--sidebar-collapsed-width) 1fr var(--highlights-collapsed-width);
-}
-
-/* Mobile three-pane layout */
-@media (max-width: 768px) {
-  .three-pane {
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr;
-    height: 100vh;
-    height: 100dvh;
-  }
-  
-  .three-pane.sidebar-collapsed,
-  .three-pane.highlights-collapsed,
-  .three-pane.sidebar-collapsed.highlights-collapsed {
-    grid-template-columns: 1fr;
-  }
-}
-
-.pane.sidebar {
-  overflow-y: auto;
-  height: 100%;
-}
-
-.pane.main {
-  overflow-y: auto;
-  height: 100%;
-  max-width: var(--main-max-width);
-  margin: 0 auto;
-  padding: 0 var(--main-horizontal-padding);
-  overflow-x: hidden;
-  contain: layout style;
-}
-
-/* Remove padding when sidebar is collapsed for zero gap */
-.three-pane.sidebar-collapsed .pane.main {
-  padding-left: 0;
-}
-
-.three-pane.sidebar-collapsed.highlights-collapsed .pane.main {
-  padding-left: 0;
-}
-
-.pane.highlights {
-  overflow-y: auto;
-  height: 100%;
-}
-
-/* Ensure panes are stacked in the correct order on desktop */
-@media (min-width: 769px) {
-  /* Desktop stacking to keep highlights above main without overlap */
-  .three-pane .pane.sidebar { z-index: 1; }
-  .three-pane .pane.main { z-index: 1; }
-  .three-pane .pane.highlights { z-index: 2; }
-}
-
-/* Mobile pane styles */
-@media (max-width: 768px) {
-  /* Both sidepanes slide in as overlays */
-  .pane.sidebar,
-  .pane.highlights {
-    position: fixed;
-    top: 0;
-    width: 85%;
-    max-width: 320px;
-    height: 100vh;
-    height: 100dvh;
-    background: #1a1a1a;
-    z-index: 1001; /* Above backdrop */
-    transition: transform 0.3s ease;
-    box-shadow: none;
-    display: flex;
-    flex-direction: column;
-  }
-  
-  /* Ensure content fills the mobile sidepanes */
-  .pane.sidebar > *,
-  .pane.highlights > * {
-    width: 100%;
-    height: 100%;
-  }
-  
-  /* Remove borders from containers in mobile overlays */
-  .pane.sidebar .bookmarks-container,
-  .pane.highlights .highlights-container {
-    border: none;
-    border-radius: 0;
-    flex: 1;
-    min-height: 0;
-  }
-  
-  /* Bookmarks sidebar from left */
-  .pane.sidebar {
-    left: 0;
-    transform: translateX(-100%);
-  }
-  
-  .pane.sidebar.mobile-open {
-    transform: translateX(0);
-    box-shadow: 4px 0 12px rgba(0, 0, 0, 0.5);
-  }
-  
-  /* Highlights sidebar from right */
-  .pane.highlights {
-    right: 0;
-    transform: translateX(100%);
-  }
-  
-  .pane.highlights.mobile-open {
-    transform: translateX(0);
-    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.5);
-  }
-  
-  .pane.main {
-    grid-column: 1;
-    grid-row: 1;
-    padding: 0.5rem;
-    max-width: 100%;
-    transition: opacity 0.2s ease;
-  }
-  
-  /* Hide main content when sidepanes are open on mobile */
-  .three-pane .pane.main.mobile-hidden {
-    opacity: 0;
-    pointer-events: none;
-  }
-  
-  .mobile-sidebar-backdrop {
-    display: none;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.45);
-    z-index: 999; /* Below sidepanes */
-    opacity: 0;
-    transition: opacity 0.3s ease;
-  }
-  
-  .mobile-sidebar-backdrop.visible {
-    display: block;
-    opacity: 1;
-  }
-  
-  .mobile-highlights-btn {
-    display: none;
-    position: fixed;
-    top: calc(1rem + env(safe-area-inset-top));
-    right: calc(1rem + env(safe-area-inset-right));
-    z-index: 900;
-    background: #2a2a2a;
-    border: 1px solid #444;
-    border-radius: 8px;
-    color: #ddd;
-    width: var(--min-touch-target);
-    height: var(--min-touch-target);
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-    transition: transform 0.2s ease, opacity 0.3s ease, visibility 0.3s ease;
-  }
-
-  .mobile-highlights-btn.hidden {
-    opacity: 0;
-    visibility: hidden;
-    pointer-events: none;
-  }
-
-  .mobile-highlights-btn.visible {
-    opacity: 1;
-    visibility: visible;
-  }
-  
-  .mobile-highlights-btn:active {
-    transform: scale(0.95);
-  }
-  
-  @media (max-width: 768px) {
-    .mobile-highlights-btn {
-      display: flex;
-    }
-  }
-}
+/* Layout styles moved to src/styles/layout/app.css */
 
 .reader {
   background: #1a1a1a;