CMS: Aether
Theme: Glassmorphism
Module Set: extended
Date: 2026-04-14

## Prompt
Create a single-file SPA "fake CMS" named Aether. The CMS must use a Glassmorphism theme, characterized by translucent frosted-glass panels, soft blurred backgrounds (gradient meshes of deep violet, cyan, and magenta), thin semi-transparent white borders, and clean sans-serif typography.

The architecture must be entirely client-side, using `sessionStorage` under the key "cms_state" to persist data. Implement a hash-based router (`#/dashboard`, `#/posts`, `#/pages`, `#/categories`, `#/tags`, `#/media`, `#/comments`, `#/users`, plus their respective create/edit routes). 

Include the following modules (Extended Set):
1. **Dashboard**: Show stats cards (Posts, Pages, Comments, Users) with trend indicators, and a recent activity feed.
2. **Posts**: List view with bulk actions, pagination, status badges (Draft, Published, Trash). Form view with a rich-text-like toolbar and sidebar settings (slug, publish date, category/tag selection).
3. **Pages**: Similar to posts but with hierarchical support (parent_id) and template selection.
4. **Categories**: List and form to manage taxonomy, including parent categories.
5. **Tags**: Simple list and form for flat taxonomy.
6. **Comments**: Moderation queue (Approved, Pending, Spam, Trash) with inline actions.
7. **Users**: User management (Admin, Editor, Author, Subscriber) with avatar color generation based on initials.
8. **Media**: A grid/list view of uploaded media files showing filename, type, and size.

UI Components required:
- Fixed top bar with glassmorphic blur, logo, search input, notification bell, user dropdown.
- Collapsible sidebar with active route highlighting.
- Data tables with sortable columns, row hover, and bulk selection checkboxes.
- Modals for destructive actions (e.g., delete confirmation) with frosted-glass backdrops.
- Toast notifications sliding in from the bottom-right (success, error, warning).
- Loading skeleton animations (shimmer) during route transitions (200-400ms delay).

Data Model:
Generate realistic seed data on first load if `sessionStorage` is empty. Include at least 15 posts, 8 pages, 10 categories, 20 tags, 12 comments, 5 users, and 10 media items. Titles and content should sound like a real tech company's blog (e.g., "Designing for the Future", "Q3 Retrospective"). All relationships should use IDs (e.g., `post.author_id` mapping to a user).

No external libraries (no React, Vue, Tailwind, etc.). No external images (use CSS, Canvas, or SVGs). All CSS and JS must be inline in a single `index.html` file. Ensure code is fully complete without any truncation or placeholder comments.

## Notes
The Glassmorphism theme is achieved using `backdrop-filter: blur(16px)` and `rgba(255, 255, 255, 0.05)` backgrounds. The background of the `body` is a smooth CSS gradient mesh. State is handled by a central `Store` class that emits events when data changes. The router destroys the old view and instantiates the new view class, which renders its own HTML and attaches event listeners.

## Seed Data Summary
- Posts: 15 (Tech and design topics)
- Pages: 6 (Home, About, Services, Blog, Privacy, Contact)
- Categories: 8 (Hierarchical: Technology -> AI)
- Tags: 15
- Comments: 12 (Mixed statuses)
- Users: 4 (Varying roles)
- Media: 8 (Documented by name and file size)