chore(design-system): add responsive sidebar CSS breakpoints (768px collapse)

web/src/app/globals.css

@@ -231,3 +231,75 @@ body {
     --cm-text-tertiary: #94A3B8;
   }
 }
+
+/* ── Responsive Sidebar ──────────────────────────────────────── */
+
+.app-layout {
+  display: flex;
+  min-height: 100vh;
+}
+
+.app-sidebar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  z-index: 40;
+  transition: transform 0.22s ease;
+}
+
+.app-sidebar-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.5);
+  z-index: 39;
+}
+
+.app-main {
+  flex: 1;
+  min-width: 0;
+}
+
+@media (max-width: 768px) {
+  .app-sidebar {
+    transform: translateX(-100%);
+  }
+  .app-sidebar[data-open="true"] {
+    transform: translateX(0);
+  }
+  .app-sidebar-overlay[data-open="true"] {
+    display: block;
+  }
+  .app-main {
+    margin-left: 0 !important;
+  }
+}
+
+@media (min-width: 769px) {
+  .app-sidebar {
+    transform: translateX(0);
+  }
+}
+
+.mobile-menu-btn {
+  display: none;
+  position: fixed;
+  top: 12px;
+  left: 12px;
+  z-index: 38;
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  border: none;
+  cursor: pointer;
+  font-size: 20px;
+  align-items: center;
+  justify-content: center;
+}
+
+@media (max-width: 768px) {
+  .mobile-menu-btn {
+    display: flex;
+  }
+}