diff --git a/admin/index.html b/admin/index.html
index c6a82bd..fbcb8b0 100644
--- a/admin/index.html
+++ b/admin/index.html
@@ -415,6 +415,198 @@
       background: var(--ff-dark) !important;
     }
 
+    /* ═══════════════════════════════════════════════════════════
+       📱 MOBILE RESPONSIVE OPTIMIZATIONS
+    ═══════════════════════════════════════════════════════════ */
+    
+    @media (max-width: 768px) {
+      /* Sidebar - Collapsible on mobile */
+      aside,
+      [class*="Sidebar"] {
+        position: fixed !important;
+        left: 0 !important;
+        top: 0 !important;
+        height: 100vh !important;
+        z-index: 1000 !important;
+        transform: translateX(-100%) !important;
+        transition: transform 0.3s ease !important;
+        width: 80% !important;
+        max-width: 300px !important;
+      }
+      
+      /* Show sidebar when open */
+      aside.open,
+      [class*="Sidebar"].open {
+        transform: translateX(0) !important;
+      }
+      
+      /* Main content takes full width */
+      main,
+      [class*="MainContent"],
+      [class*="Content"] {
+        margin-left: 0 !important;
+        width: 100% !important;
+        padding: 16px 12px !important;
+      }
+      
+      /* Header adjustments */
+      header,
+      [class*="AppHeader"] {
+        padding: 12px !important;
+      }
+      
+      /* Collection cards - Stack vertically, larger touch targets */
+      [class*="ListCard"],
+      [class*="EntryCard"],
+      li[class*="Entry"] {
+        padding: 16px 12px !important;
+        margin: 12px 0 !important;
+        min-height: 60px !important;
+      }
+      
+      /* Buttons - Larger touch targets */
+      button {
+        min-height: 44px !important;
+        padding: 12px 20px !important;
+        font-size: 16px !important;
+      }
+      
+      /* Input fields - Larger, easier to tap */
+      input,
+      textarea,
+      select {
+        min-height: 44px !important;
+        font-size: 16px !important;
+        padding: 10px 12px !important;
+      }
+      
+      /* Text areas - More vertical space */
+      textarea {
+        min-height: 120px !important;
+      }
+      
+      /* Search box */
+      input[type="search"],
+      input[placeholder*="Search"] {
+        width: 100% !important;
+        margin: 8px 0 !important;
+      }
+      
+      /* Collection grid - Single column on mobile */
+      [class*="CardGrid"],
+      [class*="Grid"] {
+        grid-template-columns: 1fr !important;
+      }
+      
+      /* Editor - Full width, no side-by-side */
+      [class*="EditorContainer"],
+      [class*="SplitPane"] {
+        flex-direction: column !important;
+      }
+      
+      [class*="ControlPane"],
+      [class*="PreviewPane"] {
+        width: 100% !important;
+        max-width: 100% !important;
+      }
+      
+      /* Toolbar - Wrap items, don't overflow */
+      [class*="Toolbar"],
+      [class*="EditorToolbar"] {
+        flex-wrap: wrap !important;
+        padding: 8px !important;
+      }
+      
+      [class*="Toolbar"] button {
+        margin: 4px !important;
+      }
+      
+      /* Dropdowns and modals - Full width */
+      [class*="Dropdown"],
+      [class*="Modal"],
+      [class*="Dialog"] {
+        max-width: 95vw !important;
+        margin: 0 auto !important;
+      }
+      
+      /* Collection header */
+      h1 {
+        font-size: 24px !important;
+      }
+      
+      h2 {
+        font-size: 20px !important;
+      }
+      
+      h3 {
+        font-size: 18px !important;
+      }
+      
+      /* List items - Better spacing */
+      ul[class*="List"] > li {
+        margin: 12px 0 !important;
+      }
+      
+      /* Reduce padding on small screens */
+      [class*="Container"],
+      [class*="Wrapper"] {
+        padding: 12px !important;
+      }
+      
+      /* Form fields - Stack vertically */
+      [class*="FormControl"],
+      [class*="FieldWrapper"] {
+        margin-bottom: 20px !important;
+      }
+      
+      /* Labels - Clearer */
+      label {
+        font-size: 14px !important;
+        font-weight: 600 !important;
+        margin-bottom: 8px !important;
+        display: block !important;
+      }
+      
+      /* Scrollbars - Thinner on mobile */
+      ::-webkit-scrollbar {
+        width: 6px;
+        height: 6px;
+      }
+    }
+    
+    @media (max-width: 480px) {
+      /* Extra small devices - even more compact */
+      body {
+        font-size: 14px !important;
+      }
+      
+      h1 {
+        font-size: 20px !important;
+      }
+      
+      h2 {
+        font-size: 18px !important;
+      }
+      
+      /* Sidebar - Full width on tiny screens */
+      aside,
+      [class*="Sidebar"] {
+        width: 100% !important;
+        max-width: 100% !important;
+      }
+      
+      /* Reduce all padding */
+      main,
+      [class*="MainContent"] {
+        padding: 8px !important;
+      }
+      
+      [class*="ListCard"],
+      [class*="EntryCard"] {
+        padding: 12px 8px !important;
+      }
+    }
+
   </style>
 </head>
 <body>