Implement comprehensive style system with Google Calendar theme

This commit adds a complete style system alongside the existing theme system, allowing users to switch between different UI styles while maintaining theme color variations.

**Core Features:**
- Style enum (Default, Google Calendar) separate from Theme enum
- Hot-swappable stylesheets with dynamic loading
- Style preference persistence (localStorage + database)
- Style picker UI in sidebar below theme picker

**Frontend Implementation:**
- Add Style enum to sidebar.rs with value/display methods
- Implement dynamic stylesheet loading in app.rs
- Add style picker dropdown with proper styling
- Handle style state management and persistence
- Add web-sys features for HtmlLinkElement support

**Backend Integration:**
- Add calendar_style column to user_preferences table
- Update all database operations (insert/update/select)
- Extend API models for style preference
- Add migration for existing users

**Google Calendar Style:**
- Clean Material Design-inspired interface
- White sidebar with proper contrast
- Enhanced calendar grid with subtle shadows
- Improved event styling with hover effects
- Google Sans typography throughout
- Professional color scheme and spacing

**Technical Details:**
- Trunk asset management for stylesheet copying
- High CSS specificity to override theme styles
- Modular CSS architecture for easy extensibility
- Comprehensive text contrast fixes
- Enhanced calendar cells and navigation

Users can now choose between the original gradient design (Default) and a clean Google Calendar-inspired interface (Google Calendar), with full preference persistence across sessions.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

frontend/src/app.rs

@@ -3,10 +3,12 @@ use crate::components::{
     EditAction, EventClass, EventContextMenu, EventCreationData, EventStatus, RecurrenceType,
     ReminderType, RouteHandler, Sidebar, Theme, ViewMode,
 };
+use crate::components::sidebar::{Style};
 use crate::models::ical::VEvent;
 use crate::services::{calendar_service::UserInfo, CalendarService};
 use chrono::NaiveDate;
 use gloo_storage::{LocalStorage, Storage};
+use wasm_bindgen::JsCast;
 use web_sys::MouseEvent;
 use yew::prelude::*;
 use yew_router::prelude::*;
@@ -96,6 +98,16 @@ pub fn App() -> Html {
         }
     });
 
+    // Style state - load from localStorage if available
+    let current_style = use_state(|| {
+        // Try to load saved style from localStorage
+        if let Ok(saved_style) = LocalStorage::get::<String>("calendar_style") {
+            Style::from_value(&saved_style)
+        } else {
+            Style::Default // Default style
+        }
+    });
+
     let available_colors = use_state(|| get_theme_event_colors());
 
     let on_login = {
@@ -152,6 +164,42 @@ pub fn App() -> Html {
         })
     };
 
+    let on_style_change = {
+        let current_style = current_style.clone();
+        Callback::from(move |new_style: Style| {
+            // Save style to localStorage
+            let _ = LocalStorage::set("calendar_style", new_style.value());
+
+            // Hot-swap stylesheet
+            if let Some(window) = web_sys::window() {
+                if let Some(document) = window.document() {
+                    // Remove existing style link if it exists
+                    if let Some(existing_link) = document.get_element_by_id("dynamic-style") {
+                        existing_link.remove();
+                    }
+
+                    // Create and append new stylesheet link only if style has a path
+                    if let Some(stylesheet_path) = new_style.stylesheet_path() {
+                        if let Ok(link) = document.create_element("link") {
+                            let link = link.dyn_into::<web_sys::HtmlLinkElement>().unwrap();
+                            link.set_id("dynamic-style");
+                            link.set_rel("stylesheet");
+                            link.set_href(stylesheet_path);
+                            
+                            if let Some(head) = document.head() {
+                                let _ = head.append_child(&link);
+                            }
+                        }
+                    }
+                    // If stylesheet_path is None (Default style), just removing the dynamic link is enough
+                }
+            }
+
+            // Update state
+            current_style.set(new_style);
+        })
+    };
+
     // Apply initial theme on mount
     {
         let current_theme = current_theme.clone();
@@ -165,6 +213,32 @@ pub fn App() -> Html {
         });
     }
 
+    // Apply initial style on mount
+    {
+        let current_style = current_style.clone();
+        use_effect_with((), move |_| {
+            let style = (*current_style).clone();
+            if let Some(window) = web_sys::window() {
+                if let Some(document) = window.document() {
+                    // Create and append stylesheet link for initial style only if it has a path
+                    if let Some(stylesheet_path) = style.stylesheet_path() {
+                        if let Ok(link) = document.create_element("link") {
+                            let link = link.dyn_into::<web_sys::HtmlLinkElement>().unwrap();
+                            link.set_id("dynamic-style");
+                            link.set_rel("stylesheet");
+                            link.set_href(stylesheet_path);
+                            
+                            if let Some(head) = document.head() {
+                                let _ = head.append_child(&link);
+                            }
+                        }
+                    }
+                    // If initial style is Default (None), no additional stylesheet needed
+                }
+            }
+        });
+    }
+
     // Fetch user info when token is available
     {
         let user_info = user_info.clone();
@@ -718,6 +792,8 @@ pub fn App() -> Html {
                                     on_view_change={on_view_change}
                                     current_theme={(*current_theme).clone()}
                                     on_theme_change={on_theme_change}
+                                    current_style={(*current_style).clone()}
+                                    on_style_change={on_style_change}
                                 />
                                 <main class="app-main">
                                     <RouteHandler