diff --git a/.dockerignore b/.dockerignore
index 665431c..e85971e 100644
--- a/.dockerignore
+++ b/.dockerignore
@@ -38,4 +38,4 @@ calendar.db
 **/tests/
 
 # Migrations (not needed for builds)
-migrations/
\ No newline at end of file
+migrations/
diff --git a/backend/migrations/004_add_style_preference.sql b/backend/migrations/004_add_style_preference.sql
new file mode 100644
index 0000000..ff26dd5
--- /dev/null
+++ b/backend/migrations/004_add_style_preference.sql
@@ -0,0 +1,2 @@
+-- Add calendar style preference to user preferences
+ALTER TABLE user_preferences ADD COLUMN calendar_style TEXT DEFAULT 'default';
\ No newline at end of file
diff --git a/backend/src/auth.rs b/backend/src/auth.rs
index b62e182..cb47cba 100644
--- a/backend/src/auth.rs
+++ b/backend/src/auth.rs
@@ -91,6 +91,7 @@ impl AuthService {
                         calendar_time_increment: preferences.calendar_time_increment,
                         calendar_view_mode: preferences.calendar_view_mode,
                         calendar_theme: preferences.calendar_theme,
+                        calendar_style: preferences.calendar_style,
                         calendar_colors: preferences.calendar_colors,
                     },
                 })
diff --git a/backend/src/db.rs b/backend/src/db.rs
index aa286aa..0f6fdc7 100644
--- a/backend/src/db.rs
+++ b/backend/src/db.rs
@@ -93,6 +93,7 @@ pub struct UserPreferences {
     pub calendar_time_increment: Option<i32>,
     pub calendar_view_mode: Option<String>,
     pub calendar_theme: Option<String>,
+    pub calendar_style: Option<String>,
     pub calendar_colors: Option<String>, // JSON string
     pub updated_at: DateTime<Utc>,
 }
@@ -106,6 +107,7 @@ impl UserPreferences {
             calendar_time_increment: Some(15),
             calendar_view_mode: Some("month".to_string()),
             calendar_theme: Some("light".to_string()),
+            calendar_style: Some("default".to_string()),
             calendar_colors: None,
             updated_at: Utc::now(),
         }
@@ -264,14 +266,15 @@ impl<'a> PreferencesRepository<'a> {
             sqlx::query(
                 "INSERT INTO user_preferences 
                  (user_id, calendar_selected_date, calendar_time_increment, 
-                  calendar_view_mode, calendar_theme, calendar_colors, updated_at) 
-                 VALUES (?, ?, ?, ?, ?, ?, ?)",
+                  calendar_view_mode, calendar_theme, calendar_style, calendar_colors, updated_at) 
+                 VALUES (?, ?, ?, ?, ?, ?, ?, ?)",
             )
             .bind(&prefs.user_id)
             .bind(&prefs.calendar_selected_date)
             .bind(&prefs.calendar_time_increment)
             .bind(&prefs.calendar_view_mode)
             .bind(&prefs.calendar_theme)
+            .bind(&prefs.calendar_style)
             .bind(&prefs.calendar_colors)
             .bind(&prefs.updated_at)
             .execute(self.db.pool())
@@ -286,7 +289,7 @@ impl<'a> PreferencesRepository<'a> {
         sqlx::query(
             "UPDATE user_preferences 
              SET calendar_selected_date = ?, calendar_time_increment = ?, 
-                 calendar_view_mode = ?, calendar_theme = ?, 
+                 calendar_view_mode = ?, calendar_theme = ?, calendar_style = ?,
                  calendar_colors = ?, updated_at = ?
              WHERE user_id = ?",
         )
@@ -294,6 +297,7 @@ impl<'a> PreferencesRepository<'a> {
         .bind(&prefs.calendar_time_increment)
         .bind(&prefs.calendar_view_mode)
         .bind(&prefs.calendar_theme)
+        .bind(&prefs.calendar_style)
         .bind(&prefs.calendar_colors)
         .bind(Utc::now())
         .bind(&prefs.user_id)
diff --git a/backend/src/handlers/preferences.rs b/backend/src/handlers/preferences.rs
index 74a656c..aa405e2 100644
--- a/backend/src/handlers/preferences.rs
+++ b/backend/src/handlers/preferences.rs
@@ -38,6 +38,7 @@ pub async fn get_preferences(
         calendar_time_increment: preferences.calendar_time_increment,
         calendar_view_mode: preferences.calendar_view_mode,
         calendar_theme: preferences.calendar_theme,
+        calendar_style: preferences.calendar_style,
         calendar_colors: preferences.calendar_colors,
     }))
 }
@@ -78,6 +79,9 @@ pub async fn update_preferences(
     if request.calendar_theme.is_some() {
         preferences.calendar_theme = request.calendar_theme;
     }
+    if request.calendar_style.is_some() {
+        preferences.calendar_style = request.calendar_style;
+    }
     if request.calendar_colors.is_some() {
         preferences.calendar_colors = request.calendar_colors;
     }
@@ -94,6 +98,7 @@ pub async fn update_preferences(
             calendar_time_increment: preferences.calendar_time_increment,
             calendar_view_mode: preferences.calendar_view_mode,
             calendar_theme: preferences.calendar_theme,
+            calendar_style: preferences.calendar_style,
             calendar_colors: preferences.calendar_colors,
         }),
     ))
diff --git a/backend/src/models.rs b/backend/src/models.rs
index b14f9f8..d53b020 100644
--- a/backend/src/models.rs
+++ b/backend/src/models.rs
@@ -28,6 +28,7 @@ pub struct UserPreferencesResponse {
     pub calendar_time_increment: Option<i32>,
     pub calendar_view_mode: Option<String>,
     pub calendar_theme: Option<String>,
+    pub calendar_style: Option<String>,
     pub calendar_colors: Option<String>,
 }
 
@@ -37,6 +38,7 @@ pub struct UpdatePreferencesRequest {
     pub calendar_time_increment: Option<i32>,
     pub calendar_view_mode: Option<String>,
     pub calendar_theme: Option<String>,
+    pub calendar_style: Option<String>,
     pub calendar_colors: Option<String>,
 }
 
diff --git a/calendar.db b/calendar.db
index 46985a5..0fd9415 100644
Binary files a/calendar.db and b/calendar.db differ
diff --git a/compose.yml b/compose.yml
index ac729d4..ad09c3e 100644
--- a/compose.yml
+++ b/compose.yml
@@ -1,17 +1,16 @@
 services:
   calendar-backend:
     build: .
-    env_file:
-      - .env
     ports:
       - "3000:3000"
     volumes:
       - ./data/site_dist:/srv/www
+      - ./data/db:/db
 
   calendar-frontend:
     image: caddy
-    env_file:
-      - .env
+    environment:
+      - BACKEND_API_URL=http://localhost:3000/api
     ports:
       - "80:80"
       - "443:443"
diff --git a/frontend/Cargo.toml b/frontend/Cargo.toml
index 407cf33..cd2759d 100644
--- a/frontend/Cargo.toml
+++ b/frontend/Cargo.toml
@@ -13,6 +13,8 @@ web-sys = { version = "0.3", features = [
     "HtmlSelectElement", 
     "HtmlInputElement",
     "HtmlTextAreaElement",
+    "HtmlLinkElement",
+    "HtmlHeadElement",
     "Event",
     "MouseEvent",
     "InputEvent",
diff --git a/frontend/index.html b/frontend/index.html
index de3186b..452dfb4 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <base data-trunk-public-url />
     <link data-trunk rel="css" href="styles.css">
+    <link data-trunk rel="copy-file" href="styles/google.css">
 </head>
 <body>
     <script>
diff --git a/frontend/src/app.rs b/frontend/src/app.rs
index 6b2924f..2180891 100644
--- a/frontend/src/app.rs
+++ b/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
diff --git a/frontend/src/components/sidebar.rs b/frontend/src/components/sidebar.rs
index 0afe17d..24ee267 100644
--- a/frontend/src/components/sidebar.rs
+++ b/frontend/src/components/sidebar.rs
@@ -32,6 +32,12 @@ pub enum Theme {
     Mint,
 }
 
+#[derive(Clone, PartialEq)]
+pub enum Style {
+    Default,
+    Google,
+}
+
 impl Theme {
     pub fn value(&self) -> &'static str {
         match self {
@@ -60,6 +66,36 @@ impl Theme {
     }
 }
 
+impl Style {
+    pub fn value(&self) -> &'static str {
+        match self {
+            Style::Default => "default",
+            Style::Google => "google",
+        }
+    }
+
+    pub fn from_value(value: &str) -> Self {
+        match value {
+            "google" => Style::Google,
+            _ => Style::Default,
+        }
+    }
+
+    pub fn display_name(&self) -> &'static str {
+        match self {
+            Style::Default => "Default",
+            Style::Google => "Google Calendar",
+        }
+    }
+
+    pub fn stylesheet_path(&self) -> Option<&'static str> {
+        match self {
+            Style::Default => None, // No additional stylesheet needed - uses base styles.css
+            Style::Google => Some("google.css"), // Trunk copies to root level
+        }
+    }
+}
+
 impl Default for ViewMode {
     fn default() -> Self {
         ViewMode::Month
@@ -80,6 +116,8 @@ pub struct SidebarProps {
     pub on_view_change: Callback<ViewMode>,
     pub current_theme: Theme,
     pub on_theme_change: Callback<Theme>,
+    pub current_style: Style,
+    pub on_style_change: Callback<Style>,
 }
 
 #[function_component(Sidebar)]
@@ -111,6 +149,18 @@ pub fn sidebar(props: &SidebarProps) -> Html {
         })
     };
 
+    let on_style_change = {
+        let on_style_change = props.on_style_change.clone();
+        Callback::from(move |e: Event| {
+            let target = e.target_dyn_into::<HtmlSelectElement>();
+            if let Some(select) = target {
+                let value = select.value();
+                let new_style = Style::from_value(&value);
+                on_style_change.emit(new_style);
+            }
+        })
+    };
+
     html! {
         <aside class="app-sidebar">
             <div class="sidebar-header">
@@ -175,6 +225,7 @@ pub fn sidebar(props: &SidebarProps) -> Html {
                 </div>
 
                 <div class="theme-selector">
+                    <label>{"Theme:"}</label>
                     <select class="theme-selector-dropdown" onchange={on_theme_change}>
                         <option value="default" selected={matches!(props.current_theme, Theme::Default)}>{"Default"}</option>
                         <option value="ocean" selected={matches!(props.current_theme, Theme::Ocean)}>{"Ocean"}</option>
@@ -187,6 +238,14 @@ pub fn sidebar(props: &SidebarProps) -> Html {
                     </select>
                 </div>
 
+                <div class="style-selector">
+                    <label>{"Style:"}</label>
+                    <select class="style-selector-dropdown" onchange={on_style_change}>
+                        <option value="default" selected={matches!(props.current_style, Style::Default)}>{"Default"}</option>
+                        <option value="google" selected={matches!(props.current_style, Style::Google)}>{"Google Calendar"}</option>
+                    </select>
+                </div>
+
                 <button onclick={props.on_logout.reform(|_| ())} class="logout-button">{"Logout"}</button>
             </div>
         </aside>
diff --git a/frontend/styles.css b/frontend/styles.css
index c4f437a..efbfc7c 100644
--- a/frontend/styles.css
+++ b/frontend/styles.css
@@ -1,9 +1,120 @@
+/* Base Styles - Always Loaded */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }
 
+:root {
+    /* CSS Variables for Style System */
+    --border-radius-small: 4px;
+    --border-radius-medium: 8px;
+    --border-radius-large: 12px;
+    --spacing-xs: 4px;
+    --spacing-sm: 8px;
+    --spacing-md: 16px;
+    --spacing-lg: 24px;
+    --spacing-xl: 32px;
+    --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
+    --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
+    --shadow-lg: 0 8px 25px rgba(0,0,0,0.15);
+    --border-light: 1px solid #e9ecef;
+    --border-medium: 1px solid #dee2e6;
+    --transition-fast: 0.15s ease;
+    --transition-normal: 0.2s ease;
+    --transition-slow: 0.3s ease;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background-color: #f8f9fa;
+    color: #333;
+    line-height: 1.6;
+}
+
+.app {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: row;
+}
+
+.login-layout {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+/* Base Layout */
+.main-content {
+    flex: 1;
+    margin-left: 280px;
+    overflow-x: hidden;
+}
+
+/* Basic Form Elements */
+input, select, textarea, button {
+    font-family: inherit;
+}
+
+/* Utility Classes */
+.loading {
+    opacity: 0.7;
+}
+
+.error {
+    color: #dc3545;
+}
+
+.success {
+    color: #28a745;
+}
+
+/* Theme Data Attributes for Color Schemes */
+[data-theme="default"] {
+    --primary-color: #667eea;
+    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+[data-theme="ocean"] {
+    --primary-color: #006994;
+    --primary-gradient: linear-gradient(135deg, #006994 0%, #0891b2 100%);
+}
+
+[data-theme="forest"] {
+    --primary-color: #065f46;
+    --primary-gradient: linear-gradient(135deg, #065f46 0%, #047857 100%);
+}
+
+[data-theme="sunset"] {
+    --primary-color: #ea580c;
+    --primary-gradient: linear-gradient(135deg, #ea580c 0%, #dc2626 100%);
+}
+
+[data-theme="purple"] {
+    --primary-color: #7c3aed;
+    --primary-gradient: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
+}
+
+[data-theme="dark"] {
+    --primary-color: #374151;
+    --primary-gradient: linear-gradient(135deg, #374151 0%, #1f2937 100%);
+}
+
+[data-theme="rose"] {
+    --primary-color: #e11d48;
+    --primary-gradient: linear-gradient(135deg, #e11d48 0%, #f43f5e 100%);
+}
+
+[data-theme="mint"] {
+    --primary-color: #10b981;
+    --primary-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
+}* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
 body {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     background-color: #f8f9fa;
@@ -3014,6 +3125,50 @@ body {
     padding: 0.5rem;
 }
 
+/* Style Selector Styles */
+.style-selector {
+    margin-bottom: 1rem;
+}
+
+.style-selector label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-size: 0.8rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: rgba(255, 255, 255, 0.8);
+}
+
+.style-selector-dropdown {
+    width: 100%;
+    padding: 0.5rem;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 6px;
+    color: white;
+    font-size: 0.85rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.style-selector-dropdown:hover {
+    background: rgba(255, 255, 255, 0.15);
+    border-color: rgba(255, 255, 255, 0.3);
+}
+
+.style-selector-dropdown:focus {
+    outline: none;
+    background: rgba(255, 255, 255, 0.2);
+    border-color: rgba(255, 255, 255, 0.4);
+}
+
+.style-selector-dropdown option {
+    background: #333;
+    color: white;
+    padding: 0.5rem;
+}
+
 /* Theme Definitions */
 :root {
     /* Default Theme */
diff --git a/frontend/styles.css.backup b/frontend/styles.css.backup
new file mode 100644
index 0000000..c4f437a
--- /dev/null
+++ b/frontend/styles.css.backup
@@ -0,0 +1,3501 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background-color: #f8f9fa;
+    color: #333;
+    line-height: 1.6;
+}
+
+.app {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: row;
+}
+
+.login-layout {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+/* Sidebar Styles */
+.app-sidebar {
+    width: 280px;
+    min-height: 100vh;
+    background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 2px 0 8px rgba(0,0,0,0.1);
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 100;
+}
+
+.sidebar-header {
+    padding: 2rem 1.5rem 1.5rem;
+    border-bottom: 1px solid rgba(255,255,255,0.2);
+}
+
+.sidebar-header h1 {
+    margin: 0 0 1rem 0;
+    font-size: 1.8rem;
+    font-weight: 600;
+    text-align: center;
+}
+
+.user-info {
+    text-align: center;
+    margin-bottom: 0.5rem;
+}
+
+.user-info .username {
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: white;
+    margin-bottom: 0.25rem;
+}
+
+.user-info .server-url {
+    font-size: 0.8rem;
+    color: rgba(255,255,255,0.7);
+    word-break: break-all;
+    line-height: 1.2;
+}
+
+.user-info.loading {
+    font-size: 0.9rem;
+    color: rgba(255,255,255,0.6);
+    font-style: italic;
+}
+
+.sidebar-nav {
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.sidebar-nav .nav-link {
+    color: white;
+    text-decoration: none;
+    padding: 0.75rem 1rem;
+    border-radius: 8px;
+    transition: all 0.2s;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+}
+
+.sidebar-nav .nav-link:hover {
+    background-color: rgba(255,255,255,0.15);
+    transform: translateX(4px);
+}
+
+.sidebar-nav .nav-link.active {
+    background-color: rgba(255,255,255,0.2);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.calendar-list {
+    flex: 1;
+    padding: 1rem;
+    border-top: 1px solid rgba(255,255,255,0.1);
+}
+
+.calendar-list h3 {
+    color: white;
+    font-size: 1rem;
+    font-weight: 600;
+    margin: 0 0 1rem 0;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.calendar-list ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.calendar-list li {
+    display: flex;
+    align-items: center;
+    padding: 0.5rem 0.75rem;
+    background: rgba(255,255,255,0.1);
+    border-radius: 6px;
+    transition: all 0.2s;
+    cursor: pointer;
+    gap: 0.75rem;
+}
+
+.calendar-list li:hover {
+    background: rgba(255,255,255,0.15);
+    transform: translateX(2px);
+}
+
+.calendar-color {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    flex-shrink: 0;
+    border: 2px solid rgba(255,255,255,0.3);
+    transition: all 0.2s;
+    cursor: pointer;
+    position: relative;
+}
+
+.calendar-list li:hover .calendar-color {
+    border-color: rgba(255,255,255,0.6);
+    transform: scale(1.1);
+}
+
+.color-picker {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    background: white;
+    border-radius: 8px;
+    padding: 8px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    z-index: 1000;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 6px;
+    min-width: 120px;
+    border: 1px solid rgba(0,0,0,0.1);
+}
+
+.color-option {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    border: 2px solid rgba(0,0,0,0.1);
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.color-option:hover {
+    transform: scale(1.2);
+    border-color: rgba(0,0,0,0.3);
+}
+
+.color-option.selected {
+    border-color: #333;
+    border-width: 3px;
+    transform: scale(1.1);
+}
+
+.color-picker-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 999;
+}
+
+.calendar-name {
+    color: white;
+    font-size: 0.9rem;
+    font-weight: 500;
+    flex: 1;
+}
+
+.no-calendars {
+    padding: 1rem;
+    text-align: center;
+    color: rgba(255,255,255,0.6);
+    font-size: 0.9rem;
+    font-style: italic;
+    border-top: 1px solid rgba(255,255,255,0.1);
+}
+
+.sidebar-footer {
+    padding: 1rem;
+    border-top: 1px solid rgba(255,255,255,0.1);
+}
+
+.app-main {
+    flex: 1;
+    margin-left: 280px;
+    padding: 2rem;
+    max-width: calc(100% - 280px);
+    width: calc(100% - 280px);
+    box-sizing: border-box;
+}
+
+/* Authentication Forms */
+.login-container, .register-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 60vh;
+}
+
+.login-form, .register-form {
+    background: white;
+    padding: 2rem;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+    width: 100%;
+    max-width: 400px;
+}
+
+.login-form h2, .register-form h2 {
+    text-align: center;
+    margin-bottom: 2rem;
+    color: #333;
+}
+
+.form-group {
+    margin-bottom: 1.5rem;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+    color: #555;
+}
+
+.form-group input {
+    width: 100%;
+    padding: 0.75rem;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 1rem;
+    transition: border-color 0.2s;
+}
+
+.form-group input:focus {
+    outline: none;
+    border-color: #667eea;
+    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
+}
+
+.form-group input:disabled {
+    background-color: #f5f5f5;
+    cursor: not-allowed;
+}
+
+.remember-checkbox {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    margin-top: 0.375rem;
+    opacity: 0.7;
+}
+
+.remember-checkbox input[type="checkbox"] {
+    width: auto;
+    margin: 0;
+    cursor: pointer;
+    transform: scale(0.85);
+}
+
+.remember-checkbox label {
+    margin: 0;
+    font-size: 0.75rem;
+    color: #888;
+    cursor: pointer;
+    user-select: none;
+    font-weight: 400;
+}
+
+.login-button, .register-button {
+    width: 100%;
+    padding: 0.75rem;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border: none;
+    border-radius: 4px;
+    font-size: 1rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.login-button:hover, .register-button:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+}
+
+.login-button:disabled, .register-button:disabled {
+    background: #ccc;
+    transform: none;
+    cursor: not-allowed;
+}
+
+.error-message {
+    background-color: #f8d7da;
+    color: #721c24;
+    padding: 0.75rem;
+    border-radius: 4px;
+    margin-bottom: 1rem;
+    border: 1px solid #f5c6cb;
+}
+
+.auth-links {
+    text-align: center;
+    margin-top: 2rem;
+    color: #666;
+}
+
+.auth-links a {
+    color: #667eea;
+    text-decoration: none;
+}
+
+.auth-links a:hover {
+    text-decoration: underline;
+}
+
+.logout-button {
+    background: rgba(255,255,255,0.1);
+    border: 1px solid rgba(255,255,255,0.2);
+    color: white;
+    padding: 0.75rem 1rem;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.2s;
+    font-weight: 500;
+    width: 100%;
+}
+
+.logout-button:hover {
+    background: rgba(255,255,255,0.2);
+    transform: translateY(-1px);
+}
+
+/* Calendar View */
+.calendar-view {
+    height: calc(100vh - 4rem); /* Full height minus main padding */
+    display: flex;
+    flex-direction: column;
+}
+
+.calendar-loading, .calendar-error {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    background: white;
+    border-radius: 12px;
+    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
+}
+
+.calendar-loading p {
+    font-size: 1.2rem;
+    color: #666;
+}
+
+.calendar-error p {
+    font-size: 1.2rem;
+    color: #d32f2f;
+}
+
+/* Calendar Component */
+.calendar {
+    background: var(--calendar-bg, white);
+    border-radius: 12px;
+    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
+    overflow: hidden;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.calendar-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1.5rem 2rem;
+    background: var(--header-bg, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
+    color: var(--header-text, white);
+}
+
+.month-year {
+    font-size: 1.8rem;
+    font-weight: 600;
+    margin: 0;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.header-left {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.header-right {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.time-increment-button {
+    background: rgba(255,255,255,0.2);
+    border: none;
+    color: white;
+    font-size: 14px;
+    font-weight: bold;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.2s;
+}
+
+.time-increment-button:hover {
+    background: rgba(255,255,255,0.3);
+}
+
+.nav-button {
+    background: rgba(255,255,255,0.2);
+    border: none;
+    color: white;
+    font-size: 1.5rem;
+    font-weight: bold;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.2s;
+}
+
+.nav-button:hover {
+    background: rgba(255,255,255,0.3);
+}
+
+.today-button {
+    background: rgba(255,255,255,0.2);
+    border: none;
+    color: white;
+    font-size: 0.9rem;
+    font-weight: 500;
+    padding: 0.5rem 1rem;
+    border-radius: 20px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.2s;
+}
+
+.today-button:hover {
+    background: rgba(255,255,255,0.3);
+}
+
+.calendar-grid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    grid-template-rows: auto repeat(6, 1fr);
+    flex: 1;
+    background: var(--calendar-bg, white);
+    gap: 0;
+}
+
+/* Week View Container */
+.week-view-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background: var(--calendar-bg, white);
+}
+
+/* Week Header */
+.week-header {
+    display: grid;
+    grid-template-columns: 80px repeat(7, 1fr);
+    background: var(--weekday-header-bg, #f8f9fa);
+    border-bottom: 2px solid var(--time-label-border, #e9ecef);
+    position: sticky;
+    top: 0;
+    z-index: 10;
+}
+
+.time-gutter {
+    background: var(--time-label-bg, #f8f9fa);
+    border-right: 1px solid var(--time-label-border, #e9ecef);
+}
+
+.week-day-header {
+    padding: 1rem;
+    text-align: center;
+    border-right: 1px solid var(--time-label-border, #e9ecef);
+    background: var(--weekday-header-bg, #f8f9fa);
+    color: var(--weekday-header-text, inherit);
+}
+
+.week-day-header.today {
+    background: var(--calendar-today-bg, #e3f2fd);
+    color: var(--calendar-today-text, #1976d2);
+}
+
+.weekday-name {
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: var(--weekday-header-text, #666);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 0.25rem;
+}
+
+.week-day-header .day-number {
+    font-size: 1.5rem;
+    font-weight: 700;
+}
+
+.week-day-header.today .weekday-name {
+    color: var(--calendar-today-text, #1976d2);
+}
+
+/* Week Content */
+.week-content {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+.time-grid {
+    display: grid;
+    grid-template-columns: 80px 1fr;
+    min-height: 100%;
+}
+
+/* Time Labels */
+.time-labels {
+    background: var(--time-label-bg, #f8f9fa);
+    border-right: 1px solid var(--time-label-border, #e9ecef);
+    position: sticky;
+    left: 0;
+    z-index: 5;
+}
+
+.time-label {
+    height: 60px;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    padding-top: 0.5rem;
+    font-size: 0.75rem;
+    color: var(--time-label-text, #666);
+    border-bottom: 1px solid var(--calendar-border, #f0f0f0);
+    font-weight: 500;
+}
+
+.time-label.final-boundary {
+    height: 60px; /* Keep same height but this marks the end boundary */
+    border-bottom: 2px solid #e9ecef; /* Stronger border to show day end */
+    color: #999; /* Lighter color to indicate it's the boundary */
+    font-size: 0.7rem;
+}
+
+/* Week Days Grid */
+.week-days-grid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+}
+
+.week-day-column {
+    position: relative;
+    border-right: 1px solid var(--time-label-border, #e9ecef);
+    min-height: 1500px; /* 25 time labels × 60px = 1500px total */
+}
+
+.week-day-column:last-child {
+    border-right: none;
+}
+
+.week-day-column.today {
+    background: var(--calendar-day-hover, #fafffe);
+}
+
+/* Time Slots */
+.time-slot {
+    height: 60px;
+    border-bottom: 1px solid var(--calendar-border, #f0f0f0);
+    position: relative;
+    pointer-events: none; /* Don't capture mouse events */
+}
+
+.time-slot-half {
+    height: 30px;
+    border-bottom: 1px dotted var(--calendar-border, #f5f5f5);
+    pointer-events: none; /* Don't capture mouse events */
+}
+
+.time-slot-half:last-child {
+    border-bottom: none;
+}
+
+.time-slot.boundary-slot {
+    height: 60px; /* Match the final time label height */
+    border-bottom: 2px solid #e9ecef; /* Strong border to match final boundary */
+    background: rgba(0,0,0,0.02); /* Slightly different background to indicate boundary */
+    pointer-events: none; /* Don't capture mouse events */
+}
+
+/* Events Container */
+.events-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none; /* Container doesn't capture, but children (events) do */
+}
+
+/* Week Events */
+.week-event {
+    position: absolute !important;
+    left: 4px;
+    right: 4px;
+    min-height: 20px;
+    background: #3B82F6;
+    color: white;
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: 0.75rem;
+    line-height: 1.3;
+    cursor: pointer;
+    pointer-events: auto;
+    z-index: 3;
+    border: 1px solid rgba(255,255,255,0.2);
+    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
+    font-weight: 500;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.week-event:hover {
+    filter: brightness(1.1);
+    z-index: 4;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
+}
+
+.week-event.refreshing {
+    animation: pulse 1.5s ease-in-out infinite alternate;
+    border-color: #ff9800;
+}
+
+/* Temporary event box during drag creation */
+.temp-event-box {
+    position: absolute;
+    left: 4px;
+    right: 4px;
+    background: rgba(59, 130, 246, 0.3);
+    border: 2px dashed rgba(59, 130, 246, 0.8);
+    border-radius: 4px;
+    color: rgba(59, 130, 246, 0.9);
+    font-size: 0.75rem;
+    font-weight: 600;
+    padding: 4px 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+    z-index: 6; /* Higher than events */
+    text-align: center;
+    user-select: none;
+}
+
+/* Moving event during drag */
+.temp-event-box.moving-event {
+    background: inherit; /* Use the event's actual color */
+    border: 2px solid rgba(255, 255, 255, 0.8);
+    color: white;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    text-align: left;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+    transform: scale(1.02);
+}
+
+.temp-event-box.moving-event .event-title {
+    font-weight: 600;
+    margin-bottom: 2px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
+}
+
+.temp-event-box.moving-event .event-time {
+    font-size: 0.65rem;
+    opacity: 0.9;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
+}
+
+/* Resizing event during drag */
+.temp-event-box.resizing-event {
+    background: inherit;
+    border: 2px solid rgba(255, 255, 255, 0.9);
+    color: white;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    text-align: left;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+    transform: scale(1.01);
+}
+
+.temp-event-box.resizing-event .event-title {
+    font-weight: 600;
+    margin-bottom: 2px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
+}
+
+.temp-event-box.resizing-event .event-time {
+    font-size: 0.65rem;
+    opacity: 0.9;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
+}
+
+/* Event resize zones and handles */
+/* Remove position: relative to allow absolute positioning for correct event placement */
+
+.week-event .event-content {
+    padding: 2px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    pointer-events: auto;
+    z-index: 5;
+    position: relative;
+}
+
+/* Left-click drag handles */
+.resize-handle {
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: transparent;
+    cursor: ns-resize;
+    z-index: 10;
+    transition: background-color 0.2s;
+}
+
+.resize-handle-top {
+    top: 0;
+    border-top: 2px solid transparent;
+}
+
+.resize-handle-bottom {
+    bottom: 0;
+    border-bottom: 2px solid transparent;
+}
+
+.week-event:hover .resize-handle {
+    background: rgba(255, 255, 255, 0.3);
+}
+
+.week-event:hover .resize-handle-top {
+    border-top-color: rgba(255, 255, 255, 0.8);
+}
+
+.week-event:hover .resize-handle-bottom {
+    border-bottom-color: rgba(255, 255, 255, 0.8);
+}
+
+.resize-handle:hover {
+    background: rgba(255, 255, 255, 0.5) !important;
+    border-color: rgba(255, 255, 255, 1) !important;
+}
+
+
+.week-event .event-title {
+    font-weight: 600;
+    margin-bottom: 2px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.week-event .event-time {
+    font-size: 0.65rem;
+    opacity: 0.9;
+    font-weight: 400;
+}
+
+.week-event.all-day {
+    opacity: 0.9;
+    border-left: 4px solid rgba(255,255,255,0.5);
+    font-style: italic;
+    background: linear-gradient(135deg, var(--event-color, #3B82F6), rgba(255,255,255,0.1)) !important;
+}
+
+/* Legacy Week Grid (for backward compatibility) */
+.week-grid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    grid-template-rows: auto 1fr;
+    flex: 1;
+    background: var(--calendar-bg, white);
+}
+
+.week-view .calendar-day {
+    height: 100%; /* Make week view days stretch to full height of their grid cell */
+}
+
+.weekday-header {
+    background: #f8f9fa;
+    padding: 1rem;
+    text-align: center;
+    font-weight: 600;
+    color: #666;
+    border-bottom: 1px solid #e9ecef;
+    font-size: 0.9rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.calendar-day {
+    border: 1px solid var(--calendar-border, #f0f0f0);
+    padding: 0.75rem;
+    display: flex;
+    flex-direction: column;
+    cursor: pointer;
+    transition: background-color 0.2s;
+    position: relative;
+    overflow: hidden;
+    background: var(--calendar-day-bg, white);
+}
+
+.calendar-day:hover {
+    background-color: var(--calendar-day-hover, #f8f9ff);
+}
+
+.calendar-day.current-month {
+    background: var(--calendar-day-bg, white);
+}
+
+.calendar-day.prev-month,
+.calendar-day.next-month {
+    background: var(--calendar-day-prev-next, #fafafa);
+    color: var(--calendar-day-prev-next-text, #ccc);
+}
+
+.calendar-day.today {
+    background: var(--calendar-today-bg, #e3f2fd);
+    border: 2px solid var(--calendar-today-border, #2196f3);
+}
+
+.calendar-day.has-events {
+    background: var(--calendar-has-events-bg, #fff3e0);
+}
+
+.calendar-day.today.has-events {
+    background: var(--calendar-today-bg, #e1f5fe);
+}
+
+.calendar-day.selected {
+    background: var(--calendar-selected-bg, #e8f5e8);
+    border: 2px solid var(--calendar-selected-border, #4caf50);
+    box-shadow: 0 0 8px rgba(76, 175, 80, 0.3);
+}
+
+.calendar-day.selected.has-events {
+    background: var(--calendar-selected-bg, #f1f8e9);
+}
+
+.calendar-day.selected.today {
+    background: var(--calendar-selected-bg, #e0f2f1);
+    border: 2px solid var(--calendar-selected-border, #4caf50);
+}
+
+.calendar-day.selected .day-number {
+    color: var(--calendar-selected-text, #2e7d32);
+    font-weight: 700;
+}
+
+.day-number {
+    font-weight: 600;
+    font-size: 1.1rem;
+    margin-bottom: 0.5rem;
+}
+
+.calendar-day.today .day-number {
+    color: var(--calendar-today-text, #1976d2);
+}
+
+.day-events {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    overflow: hidden;
+}
+
+.event-indicators {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.more-events-indicator {
+    font-size: 0.7rem;
+    color: #666;
+    font-weight: 500;
+    padding: 2px 4px;
+    text-align: center;
+    background: #f5f5f5;
+    border-radius: 3px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+.more-events-indicator:hover {
+    background: #e0e0e0;
+}
+
+.event-box {
+    /* Background color will be set inline via style attribute */
+    color: white;
+    padding: 2px 4px;
+    border-radius: 3px;
+    font-size: 0.7rem;
+    line-height: 1.2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    border: 1px solid rgba(255,255,255,0.2);
+    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
+    font-weight: 500;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+    position: relative;
+}
+
+.event-box:hover {
+    filter: brightness(1.15);
+    transform: translateY(-1px);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
+}
+
+.event-box.refreshing {
+    animation: pulse 1.5s ease-in-out infinite alternate;
+    border-color: #ff9800;
+}
+
+.event-box.refreshing::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(255, 152, 0, 0.3);
+    pointer-events: none;
+}
+
+@keyframes pulse {
+    0% {
+        opacity: 0.7;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+.event-dot {
+    background: #ff9800;
+    height: 6px;
+    border-radius: 3px;
+    margin-bottom: 1px;
+}
+
+.more-events {
+    font-size: 0.7rem;
+    color: #666;
+    margin-top: 2px;
+    font-weight: 500;
+}
+
+/* Event Modal Styles */
+.modal-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    backdrop-filter: blur(2px);
+}
+
+.modal-content {
+    background: white;
+    border-radius: 12px;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+    max-width: 900px;
+    width: 95%;
+    max-height: 85vh;
+    overflow-y: auto;
+    position: relative;
+    animation: modalAppear 0.2s ease-out;
+}
+
+@keyframes modalAppear {
+    from {
+        opacity: 0;
+        transform: scale(0.9) translateY(-20px);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+    }
+}
+
+.modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 2rem 3rem 1.5rem;
+    border-bottom: 1px solid #e9ecef;
+}
+
+.modal-header h3 {
+    margin: 0;
+    color: #333;
+    font-size: 1.4rem;
+    font-weight: 600;
+}
+
+.modal-close {
+    background: none;
+    border: none;
+    font-size: 1.8rem;
+    color: #999;
+    cursor: pointer;
+    padding: 0;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+    line-height: 1;
+}
+
+.modal-close:hover {
+    background: #f8f9fa;
+    color: #666;
+    transform: scale(1.1);
+}
+
+.modal-body {
+    padding: 0.25rem 1.0rem 0rem;
+}
+
+.event-detail {
+    display: grid;
+    grid-template-columns: 100px 1fr;
+    gap: 1rem;
+    margin-bottom: 1rem;
+    align-items: start;
+}
+
+.event-detail strong {
+    color: #555;
+    font-weight: 600;
+    font-size: 0.9rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.event-detail span {
+    color: #333;
+    font-size: 1rem;
+    line-height: 1.5;
+    word-break: break-word;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .app-sidebar {
+        width: 100%;
+        height: auto;
+        min-height: unset;
+        position: relative;
+        flex-direction: row;
+        padding: 1rem;
+    }
+
+    .sidebar-header {
+        padding: 0;
+        border-bottom: none;
+        border-right: 1px solid rgba(255,255,255,0.2);
+        margin-right: 1rem;
+    }
+
+    .sidebar-header h1 {
+        font-size: 1.4rem;
+        text-align: left;
+        margin: 0;
+    }
+
+    .user-info {
+        display: none; /* Hide user info on mobile to save space */
+    }
+
+    .sidebar-nav {
+        flex-direction: row;
+        padding: 0;
+        align-items: center;
+        gap: 1rem;
+        flex: 1;
+    }
+
+    .sidebar-nav .nav-link {
+        padding: 0.5rem 0.75rem;
+        font-size: 0.9rem;
+    }
+
+    .logout-button {
+        margin: 0;
+        padding: 0.5rem 0.75rem;
+        font-size: 0.9rem;
+        width: auto;
+    }
+
+    .calendar-list {
+        display: none; /* Hide calendar list on mobile */
+    }
+
+    .sidebar-footer {
+        padding: 0;
+        border-top: none;
+    }
+
+    .view-selector {
+        margin-bottom: 0.5rem;
+    }
+
+    .view-selector-dropdown {
+        padding: 0.5rem 0.75rem;
+        font-size: 0.8rem;
+    }
+
+    .app-main {
+        margin-left: 0;
+        max-width: 100%;
+        width: 100%;
+        padding: 1rem;
+    }
+
+    .calendar-header {
+        padding: 1rem;
+    }
+
+    .month-year {
+        font-size: 1.4rem;
+    }
+
+    .nav-button {
+        width: 35px;
+        height: 35px;
+        font-size: 1.2rem;
+    }
+    
+    .today-button {
+        font-size: 0.8rem;
+        padding: 0.4rem 0.8rem;
+    }
+
+    .weekday-header {
+        padding: 0.5rem;
+        font-size: 0.8rem;
+    }
+
+    .calendar-day {
+        min-height: 70px;
+        padding: 0.5rem;
+    }
+
+    .day-number {
+        font-size: 1rem;
+    }
+
+    .calendar-view {
+        height: calc(100vh - 8rem);
+    }
+}
+
+@media (max-width: 480px) {
+    .calendar-day {
+        min-height: 60px;
+        padding: 0.25rem;
+    }
+
+    .weekday-header {
+        padding: 0.5rem 0.25rem;
+    }
+
+    .day-number {
+        font-size: 0.9rem;
+    }
+}
+
+/* Mobile adjustments for modal */
+@media (max-width: 768px) {
+    .modal-content {
+        margin: 1rem;
+        width: calc(100% - 2rem);
+    }
+
+    .modal-header, .modal-body {
+        padding: 1.5rem 2rem;
+    }
+
+    .event-detail {
+        grid-template-columns: 80px 1fr;
+        gap: 0.75rem;
+        margin-bottom: 0.75rem;
+    }
+
+    .event-detail strong {
+        font-size: 0.8rem;
+    }
+
+    .event-detail span {
+        font-size: 0.9rem;
+    }
+
+    .login-form, .register-form {
+        padding: 1.5rem;
+    }
+}
+
+/* Create Calendar Button */
+.create-calendar-button {
+    background: rgba(255, 255, 255, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    color: white;
+    padding: 0.75rem 1rem;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    margin-bottom: 1rem;
+    font-size: 0.9rem;
+    font-weight: 500;
+    backdrop-filter: blur(10px);
+    width: 100%;
+}
+
+.create-calendar-button:hover {
+    background: rgba(255, 255, 255, 0.3);
+    border-color: rgba(255, 255, 255, 0.5);
+    transform: translateY(-1px);
+}
+
+.create-calendar-button:active {
+    transform: translateY(0);
+}
+
+/* View Selector */
+.view-selector {
+    margin-bottom: 1rem;
+}
+
+.view-selector-dropdown {
+    width: 100%;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    color: white;
+    padding: 0.75rem 1rem;
+    border-radius: 8px;
+    font-size: 0.9rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    backdrop-filter: blur(10px);
+}
+
+.view-selector-dropdown:hover {
+    background: rgba(255, 255, 255, 0.2);
+    border-color: rgba(255, 255, 255, 0.3);
+}
+
+.view-selector-dropdown:focus {
+    outline: none;
+    background: rgba(255, 255, 255, 0.2);
+    border-color: rgba(255, 255, 255, 0.4);
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
+}
+
+.view-selector-dropdown option {
+    background: #2a2a2a;
+    color: white;
+    padding: 0.5rem;
+}
+
+/* Create Calendar Modal */
+.modal-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(4px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    padding: 2rem;
+}
+
+.create-calendar-modal {
+    background: white;
+    border-radius: 12px;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+    max-width: 500px;
+    width: 100%;
+    max-height: 90vh;
+    overflow-y: auto;
+    animation: modalSlideIn 0.3s ease;
+}
+
+@keyframes modalSlideIn {
+    from {
+        opacity: 0;
+        transform: scale(0.9) translateY(-20px);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+    }
+}
+
+.create-calendar-modal .modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 2rem 2rem 1rem;
+    border-bottom: 1px solid #e9ecef;
+}
+
+.create-calendar-modal .modal-header h2 {
+    margin: 0;
+    color: #495057;
+    font-size: 1.5rem;
+    font-weight: 600;
+}
+
+.close-button {
+    background: none;
+    border: none;
+    font-size: 1.5rem;
+    color: #6c757d;
+    cursor: pointer;
+    padding: 0.25rem;
+    line-height: 1;
+    border-radius: 4px;
+    transition: all 0.2s ease;
+}
+
+.close-button:hover {
+    color: #495057;
+    background: #f8f9fa;
+}
+
+.create-calendar-modal .modal-body {
+    padding: 1.5rem 2rem 2rem;
+}
+
+.form-group {
+    margin-bottom: 1.5rem;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 0.5rem;
+    color: #495057;
+    font-weight: 500;
+    font-size: 0.9rem;
+}
+
+.form-group input,
+.form-group textarea {
+    width: 100%;
+    padding: 0.75rem;
+    border: 1px solid #ced4da;
+    border-radius: 8px;
+    font-size: 1rem;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    font-family: inherit;
+}
+
+.form-group input:focus,
+.form-group textarea:focus {
+    outline: none;
+    border-color: #667eea;
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.form-group input:disabled,
+.form-group textarea:disabled {
+    background-color: #f8f9fa;
+    color: #6c757d;
+    cursor: not-allowed;
+}
+
+.color-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 0.75rem;
+    margin: 0.75rem 0;
+}
+
+.color-option {
+    width: 40px;
+    height: 40px;
+    border: 3px solid transparent;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    position: relative;
+}
+
+.color-option:hover {
+    transform: scale(1.1);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+.color-option.selected {
+    border-color: #495057;
+    transform: scale(1.1);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+}
+
+.color-option.selected::after {
+    content: '✓';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: white;
+    font-weight: bold;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+}
+
+.color-help-text {
+    font-size: 0.8rem;
+    color: #6c757d;
+    margin-top: 0.5rem;
+    margin-bottom: 0;
+}
+
+.modal-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 1rem;
+    margin-top: 2rem;
+    padding-top: 1.5rem;
+    border-top: 1px solid #e9ecef;
+}
+
+.cancel-button,
+.create-button {
+    padding: 0.75rem 1.5rem;
+    border-radius: 8px;
+    font-size: 1rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    border: none;
+}
+
+.cancel-button {
+    background: #f8f9fa;
+    color: #6c757d;
+    border: 1px solid #ced4da;
+}
+
+.cancel-button:hover:not(:disabled) {
+    background: #e9ecef;
+    color: #495057;
+}
+
+.create-button {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+}
+
+.create-button:hover:not(:disabled) {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+}
+
+.cancel-button:disabled,
+.create-button:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    transform: none !important;
+}
+
+.error-message {
+    background: #f8d7da;
+    color: #721c24;
+    padding: 0.75rem 1rem;
+    border: 1px solid #f5c6cb;
+    border-radius: 6px;
+    margin-bottom: 1rem;
+    font-size: 0.9rem;
+}
+
+/* Mobile adjustments for create calendar modal */
+@media (max-width: 768px) {
+    .modal-backdrop {
+        padding: 1rem;
+    }
+    
+    .create-calendar-modal {
+        max-height: 95vh;
+    }
+    
+    .create-calendar-modal .modal-header,
+    .create-calendar-modal .modal-body {
+        padding-left: 1.5rem;
+        padding-right: 1.5rem;
+    }
+    
+    .color-grid {
+        grid-template-columns: repeat(4, 1fr);
+        gap: 0.5rem;
+    }
+    
+    .color-option {
+        width: 35px;
+        height: 35px;
+    }
+    
+    .modal-actions {
+        flex-direction: column;
+        gap: 0.75rem;
+    }
+    
+    .cancel-button,
+    .create-button {
+        width: 100%;
+        text-align: center;
+    }
+}
+
+/* Context Menu */
+.context-menu {
+    background: white;
+    border: 1px solid #e9ecef;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    min-width: 160px;
+    overflow: hidden;
+    animation: contextMenuSlideIn 0.15s ease;
+}
+
+@keyframes contextMenuSlideIn {
+    from {
+        opacity: 0;
+        transform: scale(0.95) translateY(-5px);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+    }
+}
+
+.context-menu-item {
+    display: flex;
+    align-items: center;
+    padding: 0.75rem 1rem;
+    color: #495057;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+    font-size: 0.9rem;
+    border: none;
+    background: none;
+    width: 100%;
+    text-align: left;
+}
+
+.context-menu-item:hover {
+    background-color: #f8f9fa;
+}
+
+.context-menu-delete {
+    color: #dc3545;
+}
+
+.context-menu-delete:hover {
+    background-color: #f8f9fa;
+    color: #dc3545;
+}
+
+.context-menu-icon {
+    margin-right: 0.5rem;
+    font-size: 1rem;
+}
+
+/* Prevent text selection on context menu items */
+.context-menu-item {
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+
+/* Event Creation Modal Styles */
+.create-event-modal {
+    min-width: 750px;
+    max-width: 900px;
+    width: 95%;
+}
+
+.create-event-modal .modal-body {
+    max-height: 60vh;
+    overflow-y: auto;
+}
+
+.create-event-modal .form-group {
+    margin-bottom: 1.5rem;
+}
+
+.create-event-modal .form-group label {
+    display: block;
+    margin-bottom: 0.5rem;
+    color: #495057;
+    font-weight: 500;
+    font-size: 0.9rem;
+}
+
+.create-event-modal .form-input {
+    width: 100%;
+    padding: 0.75rem;
+    border: 1px solid #ced4da;
+    border-radius: 8px;
+    font-size: 1rem;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    font-family: inherit;
+    box-sizing: border-box;
+}
+
+.create-event-modal .form-input:focus {
+    outline: none;
+    border-color: #667eea;
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+/* Checkbox specific styling override */
+.create-event-modal input[type="checkbox"] {
+    width: auto;
+    display: inline-block;
+    margin-right: 0.5rem;
+    vertical-align: middle;
+}
+
+.create-event-modal .form-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+}
+
+.create-event-modal .modal-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 1rem;
+    padding: 1.5rem 2rem;
+    border-top: 1px solid #e9ecef;
+    background: #f8f9fa;
+}
+
+/* Button Styles */
+.btn {
+    padding: 0.75rem 1.5rem;
+    border-radius: 8px;
+    font-size: 1rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    border: none;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    line-height: 1.5;
+    user-select: none;
+}
+
+.btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    transform: none !important;
+}
+
+.btn-secondary {
+    background: #f8f9fa;
+    color: #6c757d;
+    border: 1px solid #ced4da;
+}
+
+.btn-secondary:hover:not(:disabled) {
+    background: #e9ecef;
+    color: #495057;
+    border-color: #adb5bd;
+}
+
+.btn-primary {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border: 1px solid transparent;
+}
+
+.btn-primary:hover:not(:disabled) {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+}
+
+/* Weekday selection styles */
+.weekday-selection {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+    margin-top: 0.5rem;
+}
+
+.weekday-checkbox {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid #ced4da;
+    border-radius: 6px;
+    background: white;
+    transition: all 0.2s ease;
+    user-select: none;
+    min-width: 3rem;
+    justify-content: center;
+}
+
+.weekday-checkbox:hover {
+    border-color: #667eea;
+    background: #f8f9ff;
+}
+
+.weekday-checkbox input[type="checkbox"] {
+    display: none;
+}
+
+.weekday-checkbox input[type="checkbox"]:checked + .weekday-label {
+    color: white;
+}
+
+.weekday-checkbox:has(input[type="checkbox"]:checked) {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-color: #667eea;
+    color: white;
+}
+
+.weekday-label {
+    font-size: 0.85rem;
+    font-weight: 500;
+    color: #495057;
+    transition: color 0.2s ease;
+}
+
+/* Mobile adjustments for event creation modal */
+@media (max-width: 768px) {
+    .create-event-modal .form-row {
+        grid-template-columns: 1fr;
+        gap: 1rem;
+    }
+    
+    .create-event-modal .modal-footer {
+        flex-direction: column;
+        gap: 0.75rem;
+        padding: 1rem 1.5rem;
+    }
+    
+    .create-event-modal .btn {
+        width: 100%;
+    }
+    
+    .weekday-selection {
+        gap: 0.25rem;
+    }
+    
+    .weekday-checkbox {
+        min-width: 2.5rem;
+        padding: 0.4rem 0.6rem;
+    }
+}
+
+/* Recurring Edit Modal */
+.recurring-edit-modal {
+    max-width: 500px;
+    width: 95%;
+}
+
+.recurring-edit-options {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin: 1.5rem 0;
+}
+
+.recurring-option {
+    background: white;
+    border: 2px solid #e9ecef;
+    color: #495057;
+    padding: 1rem;
+    text-align: left;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.recurring-option:hover {
+    border-color: #667eea;
+    background: #f8f9ff;
+    color: #495057;
+    transform: none;
+    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
+}
+
+.recurring-option .option-title {
+    font-size: 1rem;
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+    color: #333;
+}
+
+.recurring-option .option-description {
+    font-size: 0.9rem;
+    color: #666;
+    line-height: 1.4;
+}
+
+/* Mobile adjustments for recurring edit modal */
+@media (max-width: 768px) {
+    .recurring-edit-modal {
+        margin: 1rem;
+        width: calc(100% - 2rem);
+    }
+    
+    .recurring-option {
+        padding: 0.75rem;
+    }
+    
+    .recurring-option .option-title {
+        font-size: 0.9rem;
+    }
+    
+    .recurring-option .option-description {
+        font-size: 0.8rem;
+    }
+}
+
+/* Tabbed Modal Interface Styles */
+.tab-navigation {
+    display: flex;
+    border-bottom: 2px solid #e9ecef;
+    margin-bottom: 1.5rem;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+}
+
+.tab-navigation::-webkit-scrollbar {
+    display: none;
+}
+
+.tab-button {
+    background: none;
+    border: none;
+    padding: 0.75rem 1rem;
+    cursor: pointer;
+    font-size: 0.85rem;
+    font-weight: 500;
+    color: #6c757d;
+    transition: all 0.2s ease;
+    border-bottom: 3px solid transparent;
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-width: max-content;
+}
+
+.tab-button:hover {
+    color: #495057;
+    background: #f8f9fa;
+}
+
+.tab-button.active {
+    color: #667eea;
+    border-bottom-color: #667eea;
+    background: #f8f9ff;
+}
+
+.tab-content {
+    min-height: 300px;
+    max-height: 50vh;
+    overflow-y: auto;
+    padding: 1rem 2rem 2rem 2rem;
+}
+
+.tab-panel {
+    animation: fadeIn 0.2s ease-in-out;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Mobile adjustments for tabbed interface */
+@media (max-width: 768px) {
+    .tab-navigation {
+        gap: 0;
+        margin-bottom: 1rem;
+    }
+    
+    .tab-button {
+        padding: 0.5rem 0.75rem;
+        font-size: 0.8rem;
+        flex: 1;
+        justify-content: center;
+        min-width: unset;
+    }
+    
+    .tab-content {
+        min-height: 250px;
+        max-height: 45vh;
+        padding: 1rem 1.5rem 1.5rem 1.5rem;
+    }
+}
+
+/* Form Help Text and Advanced Info Styles */
+.form-help-text {
+    font-size: 0.8rem;
+    color: #6c757d;
+    margin-top: 0.25rem;
+    margin-bottom: 0;
+    line-height: 1.4;
+    font-style: italic;
+}
+
+.advanced-info {
+    background: #f8f9fa;
+    border: 1px solid #e9ecef;
+    border-radius: 8px;
+    padding: 1rem;
+    margin-top: 1.5rem;
+}
+
+.advanced-info h5 {
+    margin: 0 0 0.75rem 0;
+    color: #495057;
+    font-size: 0.9rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.advanced-info ul {
+    margin: 0 0 0.75rem 0;
+    padding-left: 1.2rem;
+    list-style-type: disc;
+}
+
+.advanced-info li {
+    font-size: 0.85rem;
+    color: #6c757d;
+    line-height: 1.4;
+    margin-bottom: 0.25rem;
+}
+
+.advanced-info .form-help-text {
+    margin-top: 0.5rem;
+    margin-bottom: 0;
+    border-top: 1px solid #e9ecef;
+    padding-top: 0.5rem;
+}
+
+/* Theme compatibility for advanced info */
+[data-theme="dark"] .advanced-info {
+    background: #2a2a2a;
+    border-color: #444444;
+}
+
+[data-theme="dark"] .advanced-info h5 {
+    color: #e0e0e0;
+}
+
+[data-theme="dark"] .advanced-info li {
+    color: #b0b0b0;
+}
+
+[data-theme="dark"] .advanced-info .form-help-text {
+    border-color: #444444;
+}
+
+/* People Tab Styles */
+.people-info {
+    background: #f8f9fa;
+    border: 1px solid #e9ecef;
+    border-radius: 8px;
+    padding: 1rem;
+    margin-top: 1.5rem;
+}
+
+.people-info h5,
+.people-info h6 {
+    margin: 0 0 0.75rem 0;
+    color: #495057;
+    font-size: 0.9rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.people-info h6 {
+    font-size: 0.8rem;
+    margin-top: 1rem;
+    margin-bottom: 0.5rem;
+}
+
+.people-validation {
+    margin-top: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid #e9ecef;
+}
+
+.attendee-roles-preview {
+    background: #f8f9fa;
+    border: 1px solid #e9ecef;
+    border-radius: 8px;
+    padding: 1rem;
+    margin-top: 1rem;
+}
+
+.attendee-roles-preview h5 {
+    margin: 0 0 0.75rem 0;
+    color: #495057;
+    font-size: 0.9rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.role-examples {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+}
+
+.role-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.5rem;
+    padding: 0.5rem;
+    background: white;
+    border-radius: 6px;
+    border: 1px solid #e9ecef;
+}
+
+.role-item strong {
+    color: #495057;
+    font-size: 0.85rem;
+    font-weight: 600;
+    min-width: 140px;
+    flex-shrink: 0;
+}
+
+.role-item span {
+    color: #6c757d;
+    font-size: 0.85rem;
+    line-height: 1.3;
+}
+
+/* Theme compatibility for people info */
+[data-theme="dark"] .people-info,
+[data-theme="dark"] .attendee-roles-preview {
+    background: #2a2a2a;
+    border-color: #444444;
+}
+
+[data-theme="dark"] .people-info h5,
+[data-theme="dark"] .people-info h6,
+[data-theme="dark"] .attendee-roles-preview h5 {
+    color: #e0e0e0;
+}
+
+[data-theme="dark"] .people-validation {
+    border-color: #444444;
+}
+
+[data-theme="dark"] .role-item {
+    background: #1f1f1f;
+    border-color: #444444;
+}
+
+[data-theme="dark"] .role-item strong {
+    color: #e0e0e0;
+}
+
+[data-theme="dark"] .role-item span {
+    color: #b0b0b0;
+}
+
+/* Mobile adjustments for people tab */
+@media (max-width: 768px) {
+    .role-item {
+        flex-direction: column;
+        gap: 0.25rem;
+    }
+    
+    .role-item strong {
+        min-width: unset;
+    }
+}
+
+/* Categories Tab Styles */
+.categories-suggestions {
+    background: #f8f9fa;
+    border: 1px solid #e9ecef;
+    border-radius: 8px;
+    padding: 1rem;
+    margin-top: 1.5rem;
+}
+
+.categories-suggestions h5 {
+    margin: 0 0 0.75rem 0;
+    color: #495057;
+    font-size: 0.9rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.category-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-bottom: 0.75rem;
+}
+
+.category-tag {
+    background: white;
+    border: 1px solid #667eea;
+    color: #667eea;
+    padding: 0.4rem 0.8rem;
+    border-radius: 20px;
+    font-size: 0.8rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.category-tag:hover {
+    background: #667eea;
+    color: white;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);
+}
+
+.categories-info {
+    background: #f8f9fa;
+    border: 1px solid #e9ecef;
+    border-radius: 8px;
+    padding: 1rem;
+    margin-top: 1rem;
+}
+
+.categories-info h5,
+.categories-info h6 {
+    margin: 0 0 0.75rem 0;
+    color: #495057;
+    font-size: 0.9rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.categories-info h6 {
+    font-size: 0.8rem;
+    margin-top: 1rem;
+    margin-bottom: 0.5rem;
+}
+
+.resources-section {
+    margin-top: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid #e9ecef;
+}
+
+.resource-features {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin-top: 0.75rem;
+}
+
+.feature-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.5rem;
+    padding: 0.5rem;
+    background: white;
+    border-radius: 6px;
+    border: 1px solid #e9ecef;
+}
+
+.feature-item strong {
+    color: #495057;
+    font-size: 0.85rem;
+    font-weight: 600;
+    min-width: 140px;
+    flex-shrink: 0;
+}
+
+.feature-item span {
+    color: #6c757d;
+    font-size: 0.85rem;
+    line-height: 1.3;
+}
+
+.quick-actions {
+    background: #f8f9fa;
+    border: 1px solid #e9ecef;
+    border-radius: 8px;
+    padding: 1rem;
+    margin-top: 1rem;
+}
+
+.quick-actions h5 {
+    margin: 0 0 0.75rem 0;
+    color: #495057;
+    font-size: 0.9rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.action-buttons {
+    display: flex;
+    gap: 0.5rem;
+    margin-bottom: 0.5rem;
+}
+
+.action-btn {
+    background: #dc3545;
+    border: 1px solid #dc3545;
+    color: white;
+    padding: 0.5rem 1rem;
+    border-radius: 6px;
+    font-size: 0.85rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.action-btn:hover {
+    background: #c82333;
+    border-color: #bd2130;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.2);
+}
+
+/* Theme compatibility for categories */
+[data-theme="dark"] .categories-suggestions,
+[data-theme="dark"] .categories-info,
+[data-theme="dark"] .quick-actions {
+    background: #2a2a2a;
+    border-color: #444444;
+}
+
+[data-theme="dark"] .categories-suggestions h5,
+[data-theme="dark"] .categories-info h5,
+[data-theme="dark"] .categories-info h6,
+[data-theme="dark"] .quick-actions h5 {
+    color: #e0e0e0;
+}
+
+[data-theme="dark"] .category-tag {
+    background: #1f1f1f;
+    border-color: #667eea;
+    color: #667eea;
+}
+
+[data-theme="dark"] .category-tag:hover {
+    background: #667eea;
+    color: white;
+}
+
+[data-theme="dark"] .feature-item {
+    background: #1f1f1f;
+    border-color: #444444;
+}
+
+[data-theme="dark"] .feature-item strong {
+    color: #e0e0e0;
+}
+
+[data-theme="dark"] .feature-item span {
+    color: #b0b0b0;
+}
+
+[data-theme="dark"] .resources-section {
+    border-color: #444444;
+}
+
+/* Mobile adjustments for categories tab */
+@media (max-width: 768px) {
+    .category-tags {
+        gap: 0.25rem;
+    }
+    
+    .category-tag {
+        padding: 0.3rem 0.6rem;
+        font-size: 0.75rem;
+    }
+    
+    .feature-item {
+        flex-direction: column;
+        gap: 0.25rem;
+    }
+    
+    .feature-item strong {
+        min-width: unset;
+    }
+    
+    .action-buttons {
+        flex-direction: column;
+    }
+}
+
+/* Location Tab Styles */
+.location-suggestions {
+    background: #f8f9fa;
+    border: 1px solid #e9ecef;
+    border-radius: 8px;
+    padding: 1rem;
+    margin-top: 1.5rem;
+}
+
+.location-suggestions h5 {
+    margin: 0 0 0.75rem 0;
+    color: #495057;
+    font-size: 0.9rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.location-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-bottom: 0.75rem;
+}
+
+.location-tag {
+    background: white;
+    border: 1px solid #28a745;
+    color: #28a745;
+    padding: 0.4rem 0.8rem;
+    border-radius: 20px;
+    font-size: 0.8rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.location-tag:hover {
+    background: #28a745;
+    color: white;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2);
+}
+
+.location-info {
+    background: #f8f9fa;
+    border: 1px solid #e9ecef;
+    border-radius: 8px;
+    padding: 1rem;
+    margin-top: 1rem;
+}
+
+.location-info h5,
+.location-info h6 {
+    margin: 0 0 0.75rem 0;
+    color: #495057;
+    font-size: 0.9rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.location-info h6 {
+    font-size: 0.8rem;
+    margin-top: 1rem;
+    margin-bottom: 0.5rem;
+}
+
+.geo-section {
+    margin-top: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid #e9ecef;
+}
+
+.geo-features {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin-top: 0.75rem;
+}
+
+.geo-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.5rem;
+    padding: 0.5rem;
+    background: white;
+    border-radius: 6px;
+    border: 1px solid #e9ecef;
+}
+
+.geo-item strong {
+    color: #495057;
+    font-size: 0.85rem;
+    font-weight: 600;
+    min-width: 120px;
+    flex-shrink: 0;
+}
+
+.geo-item span {
+    color: #6c757d;
+    font-size: 0.85rem;
+    line-height: 1.3;
+}
+
+.location-types {
+    background: #f8f9fa;
+    border: 1px solid #e9ecef;
+    border-radius: 8px;
+    padding: 1rem;
+    margin-top: 1rem;
+}
+
+.location-types h5 {
+    margin: 0 0 0.75rem 0;
+    color: #495057;
+    font-size: 0.9rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.type-examples {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+.type-category {
+    padding: 0.75rem;
+    background: white;
+    border-radius: 6px;
+    border: 1px solid #e9ecef;
+}
+
+.type-category strong {
+    display: block;
+    color: #495057;
+    font-size: 0.9rem;
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+}
+
+.type-category ul {
+    margin: 0;
+    padding-left: 1.2rem;
+    list-style-type: disc;
+}
+
+.type-category li {
+    color: #6c757d;
+    font-size: 0.85rem;
+    line-height: 1.4;
+    margin-bottom: 0.25rem;
+    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
+    background: #f8f9fa;
+    padding: 0.2rem 0.4rem;
+    border-radius: 3px;
+}
+
+.action-btn.secondary {
+    background: #6c757d;
+    border-color: #6c757d;
+}
+
+.action-btn.secondary:hover {
+    background: #5a6268;
+    border-color: #545b62;
+    box-shadow: 0 2px 4px rgba(108, 117, 125, 0.2);
+}
+
+/* Theme compatibility for location */
+[data-theme="dark"] .location-suggestions,
+[data-theme="dark"] .location-info,
+[data-theme="dark"] .location-types {
+    background: #2a2a2a;
+    border-color: #444444;
+}
+
+[data-theme="dark"] .location-suggestions h5,
+[data-theme="dark"] .location-info h5,
+[data-theme="dark"] .location-info h6,
+[data-theme="dark"] .location-types h5 {
+    color: #e0e0e0;
+}
+
+[data-theme="dark"] .location-tag {
+    background: #1f1f1f;
+    border-color: #28a745;
+    color: #28a745;
+}
+
+[data-theme="dark"] .location-tag:hover {
+    background: #28a745;
+    color: white;
+}
+
+[data-theme="dark"] .geo-item,
+[data-theme="dark"] .type-category {
+    background: #1f1f1f;
+    border-color: #444444;
+}
+
+[data-theme="dark"] .geo-item strong,
+[data-theme="dark"] .type-category strong {
+    color: #e0e0e0;
+}
+
+[data-theme="dark"] .geo-item span {
+    color: #b0b0b0;
+}
+
+[data-theme="dark"] .type-category li {
+    color: #b0b0b0;
+    background: #2a2a2a;
+}
+
+[data-theme="dark"] .geo-section {
+    border-color: #444444;
+}
+
+/* Mobile adjustments for location tab */
+@media (max-width: 768px) {
+    .location-tags {
+        gap: 0.25rem;
+    }
+    
+    .location-tag {
+        padding: 0.3rem 0.6rem;
+        font-size: 0.75rem;
+    }
+    
+    .geo-item {
+        flex-direction: column;
+        gap: 0.25rem;
+    }
+    
+    .geo-item strong {
+        min-width: unset;
+    }
+    
+    .type-examples {
+        gap: 0.75rem;
+    }
+    
+    .type-category {
+        padding: 0.5rem;
+    }
+    
+    .type-category li {
+        font-size: 0.8rem;
+    }
+}
+
+/* Reminders & Attachments Tab Styles */
+.reminder-types {
+    background: #f8f9fa;
+    border: 1px solid #e9ecef;
+    border-radius: 8px;
+    padding: 1rem;
+    margin-top: 1.5rem;
+}
+
+.reminder-types h5 {
+    margin: 0 0 0.75rem 0;
+    color: #495057;
+    font-size: 0.9rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.alarm-examples {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 0.75rem;
+    margin-bottom: 0.75rem;
+}
+
+.alarm-type {
+    padding: 0.75rem;
+    background: white;
+    border-radius: 6px;
+    border: 1px solid #e9ecef;
+    text-align: center;
+}
+
+.alarm-type strong {
+    display: block;
+    color: #495057;
+    font-size: 0.9rem;
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+}
+
+.alarm-type p {
+    color: #6c757d;
+    font-size: 0.8rem;
+    margin: 0;
+    line-height: 1.3;
+}
+
+.reminder-info {
+    background: #f8f9fa;
+    border: 1px solid #e9ecef;
+    border-radius: 8px;
+    padding: 1rem;
+    margin-top: 1rem;
+}
+
+.reminder-info h5,
+.reminder-info h6 {
+    margin: 0 0 0.75rem 0;
+    color: #495057;
+    font-size: 0.9rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.reminder-info h6 {
+    font-size: 0.8rem;
+    margin-top: 1rem;
+    margin-bottom: 0.5rem;
+}
+
+.attachments-section {
+    margin-top: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid #e9ecef;
+}
+
+.attachment-features {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin-top: 0.75rem;
+}
+
+.attachment-type {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.5rem;
+    padding: 0.5rem;
+    background: white;
+    border-radius: 6px;
+    border: 1px solid #e9ecef;
+}
+
+.attachment-type strong {
+    color: #495057;
+    font-size: 0.85rem;
+    font-weight: 600;
+    min-width: 120px;
+    flex-shrink: 0;
+}
+
+.attachment-type span {
+    color: #6c757d;
+    font-size: 0.85rem;
+    line-height: 1.3;
+}
+
+.reminder-patterns {
+    background: #f8f9fa;
+    border: 1px solid #e9ecef;
+    border-radius: 8px;
+    padding: 1rem;
+    margin-top: 1rem;
+}
+
+.reminder-patterns h5 {
+    margin: 0 0 0.75rem 0;
+    color: #495057;
+    font-size: 0.9rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.pattern-examples {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin-bottom: 0.75rem;
+}
+
+.pattern-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem;
+    background: white;
+    border-radius: 6px;
+    border: 1px solid #e9ecef;
+}
+
+.pattern-item strong {
+    color: #495057;
+    font-size: 0.85rem;
+    font-weight: 600;
+    min-width: 100px;
+    flex-shrink: 0;
+}
+
+.pattern-item span {
+    color: #6c757d;
+    font-size: 0.85rem;
+    line-height: 1.3;
+}
+
+.action-btn.tertiary {
+    background: #17a2b8;
+    border-color: #17a2b8;
+    color: white;
+}
+
+.action-btn.tertiary:hover {
+    background: #138496;
+    border-color: #117a8b;
+    box-shadow: 0 2px 4px rgba(23, 162, 184, 0.2);
+}
+
+.completion-status {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border-radius: 8px;
+    padding: 1.5rem;
+    margin-top: 2rem;
+    text-align: center;
+}
+
+.completion-status h5 {
+    margin: 0 0 0.75rem 0;
+    font-size: 1.1rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.completion-status p {
+    margin: 0 0 1rem 0;
+    opacity: 0.9;
+    line-height: 1.5;
+}
+
+.feature-summary {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 6px;
+    padding: 1rem;
+    margin-top: 1rem;
+}
+
+.summary-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.5rem 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.summary-row:last-child {
+    border-bottom: none;
+}
+
+.tab-name {
+    font-weight: 600;
+    font-size: 0.9rem;
+}
+
+.tab-desc {
+    font-size: 0.8rem;
+    opacity: 0.8;
+    text-align: right;
+    max-width: 60%;
+}
+
+/* Theme compatibility for reminders */
+[data-theme="dark"] .reminder-types,
+[data-theme="dark"] .reminder-info,
+[data-theme="dark"] .reminder-patterns {
+    background: #2a2a2a;
+    border-color: #444444;
+}
+
+[data-theme="dark"] .reminder-types h5,
+[data-theme="dark"] .reminder-info h5,
+[data-theme="dark"] .reminder-info h6,
+[data-theme="dark"] .reminder-patterns h5 {
+    color: #e0e0e0;
+}
+
+[data-theme="dark"] .alarm-type,
+[data-theme="dark"] .attachment-type,
+[data-theme="dark"] .pattern-item {
+    background: #1f1f1f;
+    border-color: #444444;
+}
+
+[data-theme="dark"] .alarm-type strong,
+[data-theme="dark"] .attachment-type strong,
+[data-theme="dark"] .pattern-item strong {
+    color: #e0e0e0;
+}
+
+[data-theme="dark"] .alarm-type p,
+[data-theme="dark"] .attachment-type span,
+[data-theme="dark"] .pattern-item span {
+    color: #b0b0b0;
+}
+
+[data-theme="dark"] .attachments-section {
+    border-color: #444444;
+}
+
+/* Mobile adjustments for reminders tab */
+@media (max-width: 768px) {
+    .alarm-examples {
+        grid-template-columns: 1fr;
+        gap: 0.5rem;
+    }
+    
+    .alarm-type {
+        padding: 0.5rem;
+    }
+    
+    .attachment-type,
+    .pattern-item {
+        flex-direction: column;
+        gap: 0.25rem;
+        align-items: flex-start;
+    }
+    
+    .attachment-type strong,
+    .pattern-item strong {
+        min-width: unset;
+    }
+    
+    .summary-row {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.25rem;
+    }
+    
+    .tab-desc {
+        text-align: left;
+        max-width: 100%;
+    }
+    
+    .completion-status {
+        padding: 1rem;
+    }
+    
+    .completion-status h5 {
+        font-size: 1rem;
+    }
+}
+
+/* Theme Selector Styles */
+.theme-selector {
+    margin-bottom: 1rem;
+}
+
+.theme-selector-dropdown {
+    width: 100%;
+    padding: 0.5rem;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 6px;
+    color: white;
+    font-size: 0.85rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.theme-selector-dropdown:hover {
+    background: rgba(255, 255, 255, 0.15);
+    border-color: rgba(255, 255, 255, 0.3);
+}
+
+.theme-selector-dropdown:focus {
+    outline: none;
+    background: rgba(255, 255, 255, 0.2);
+    border-color: rgba(255, 255, 255, 0.4);
+}
+
+.theme-selector-dropdown option {
+    background: #333;
+    color: white;
+    padding: 0.5rem;
+}
+
+/* Theme Definitions */
+:root {
+    /* Default Theme */
+    --primary-gradient: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
+    --primary-bg: #f8f9fa;
+    --primary-text: #333;
+    --sidebar-bg: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
+    --sidebar-text: white;
+    --header-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    --header-text: white;
+    --card-bg: white;
+    --border-color: #e9ecef;
+    --accent-color: #667eea;
+    --calendar-bg: white;
+    --calendar-border: #f0f0f0;
+    --calendar-day-bg: white;
+    --calendar-day-hover: #f8f9ff;
+    --calendar-day-prev-next: #fafafa;
+    --calendar-day-prev-next-text: #ccc;
+    --calendar-today-bg: #e3f2fd;
+    --calendar-today-border: #2196f3;
+    --calendar-today-text: #1976d2;
+    --calendar-selected-bg: #e8f5e8;
+    --calendar-selected-border: #4caf50;
+    --calendar-selected-text: #2e7d32;
+    --calendar-has-events-bg: #fff3e0;
+    --weekday-header-bg: #f8f9fa;
+    --weekday-header-text: #666;
+    --time-label-bg: #f8f9fa;
+    --time-label-text: #666;
+    --time-label-border: #e9ecef;
+    --event-colors: #3B82F6, #10B981, #F59E0B, #EF4444, #8B5CF6, #06B6D4, #84CC16, #F97316, #EC4899, #6366F1, #14B8A6, #F3B806, #8B5A2B, #6B7280, #DC2626, #7C3AED;
+}
+
+/* Ocean Theme */
+[data-theme="ocean"] {
+    --primary-gradient: linear-gradient(180deg, #2196F3 0%, #0277BD 100%);
+    --primary-bg: #e3f2fd;
+    --primary-text: #0d47a1;
+    --sidebar-bg: linear-gradient(180deg, #2196F3 0%, #0277BD 100%);
+    --sidebar-text: white;
+    --header-bg: linear-gradient(135deg, #2196F3 0%, #0277BD 100%);
+    --header-text: white;
+    --card-bg: #ffffff;
+    --border-color: #bbdefb;
+    --accent-color: #2196F3;
+    --calendar-bg: #ffffff;
+    --calendar-border: #bbdefb;
+    --calendar-day-bg: #ffffff;
+    --calendar-day-hover: #e1f5fe;
+    --calendar-day-prev-next: #f3f8ff;
+    --calendar-day-prev-next-text: #90caf9;
+    --calendar-today-bg: #b3e5fc;
+    --calendar-today-border: #0277BD;
+    --calendar-today-text: #01579b;
+    --calendar-selected-bg: #e0f7fa;
+    --calendar-selected-border: #00acc1;
+    --calendar-selected-text: #00695c;
+    --calendar-has-events-bg: #fff8e1;
+    --weekday-header-bg: #e3f2fd;
+    --weekday-header-text: #0d47a1;
+    --time-label-bg: #e3f2fd;
+    --time-label-text: #0d47a1;
+    --time-label-border: #bbdefb;
+    --event-colors: #2196F3, #03DAC6, #FF9800, #F44336, #9C27B0, #00BCD4, #8BC34A, #FF5722, #E91E63, #3F51B5, #009688, #FFC107, #607D8B, #795548, #E53935, #673AB7;
+}
+
+[data-theme="ocean"] body {
+    background-color: var(--primary-bg);
+    color: var(--primary-text);
+}
+
+[data-theme="ocean"] .app-sidebar {
+    background: var(--sidebar-bg);
+}
+
+/* Forest Theme */
+[data-theme="forest"] {
+    --primary-gradient: linear-gradient(180deg, #4CAF50 0%, #2E7D32 100%);
+    --primary-bg: #e8f5e8;
+    --primary-text: #1b5e20;
+    --sidebar-bg: linear-gradient(180deg, #4CAF50 0%, #2E7D32 100%);
+    --sidebar-text: white;
+    --header-bg: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
+    --header-text: white;
+    --card-bg: #ffffff;
+    --border-color: #c8e6c9;
+    --accent-color: #4CAF50;
+    --calendar-bg: #ffffff;
+    --calendar-border: #c8e6c9;
+    --calendar-day-bg: #ffffff;
+    --calendar-day-hover: #f1f8e9;
+    --calendar-day-prev-next: #f9fbe7;
+    --calendar-day-prev-next-text: #a5d6a7;
+    --calendar-today-bg: #c8e6c9;
+    --calendar-today-border: #2E7D32;
+    --calendar-today-text: #1b5e20;
+    --calendar-selected-bg: #e8f5e8;
+    --calendar-selected-border: #388e3c;
+    --calendar-selected-text: #2e7d32;
+    --calendar-has-events-bg: #fff3e0;
+    --weekday-header-bg: #e8f5e8;
+    --weekday-header-text: #1b5e20;
+    --time-label-bg: #e8f5e8;
+    --time-label-text: #1b5e20;
+    --time-label-border: #c8e6c9;
+    --event-colors: #4CAF50, #8BC34A, #FF9800, #FF5722, #9C27B0, #03DAC6, #CDDC39, #FF6F00, #E91E63, #3F51B5, #009688, #FFC107, #795548, #607D8B, #F44336, #673AB7;
+}
+
+[data-theme="forest"] body {
+    background-color: var(--primary-bg);
+    color: var(--primary-text);
+}
+
+[data-theme="forest"] .app-sidebar {
+    background: var(--sidebar-bg);
+}
+
+/* Sunset Theme */
+[data-theme="sunset"] {
+    --primary-gradient: linear-gradient(180deg, #FF9800 0%, #F57C00 100%);
+    --primary-bg: #fff3e0;
+    --primary-text: #e65100;
+    --sidebar-bg: linear-gradient(180deg, #FF9800 0%, #F57C00 100%);
+    --sidebar-text: white;
+    --header-bg: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
+    --header-text: white;
+    --card-bg: #ffffff;
+    --border-color: #ffcc02;
+    --accent-color: #FF9800;
+    --calendar-bg: #ffffff;
+    --calendar-border: #ffe0b2;
+    --calendar-day-bg: #ffffff;
+    --calendar-day-hover: #fff8e1;
+    --calendar-day-prev-next: #fffde7;
+    --calendar-day-prev-next-text: #ffcc02;
+    --calendar-today-bg: #ffe0b2;
+    --calendar-today-border: #F57C00;
+    --calendar-today-text: #e65100;
+    --calendar-selected-bg: #fff3e0;
+    --calendar-selected-border: #ff8f00;
+    --calendar-selected-text: #ff6f00;
+    --calendar-has-events-bg: #f3e5f5;
+    --weekday-header-bg: #fff3e0;
+    --weekday-header-text: #e65100;
+    --time-label-bg: #fff3e0;
+    --time-label-text: #e65100;
+    --time-label-border: #ffe0b2;
+    --event-colors: #FF9800, #FF5722, #F44336, #E91E63, #9C27B0, #673AB7, #3F51B5, #2196F3, #03DAC6, #009688, #4CAF50, #8BC34A, #CDDC39, #FFC107, #FF6F00, #795548;
+}
+
+[data-theme="sunset"] body {
+    background-color: var(--primary-bg);
+    color: var(--primary-text);
+}
+
+[data-theme="sunset"] .app-sidebar {
+    background: var(--sidebar-bg);
+}
+
+/* Purple Theme */
+[data-theme="purple"] {
+    --primary-gradient: linear-gradient(180deg, #9C27B0 0%, #6A1B9A 100%);
+    --primary-bg: #f3e5f5;
+    --primary-text: #4a148c;
+    --sidebar-bg: linear-gradient(180deg, #9C27B0 0%, #6A1B9A 100%);
+    --sidebar-text: white;
+    --header-bg: linear-gradient(135deg, #9C27B0 0%, #6A1B9A 100%);
+    --header-text: white;
+    --card-bg: #ffffff;
+    --border-color: #ce93d8;
+    --accent-color: #9C27B0;
+    --calendar-bg: #ffffff;
+    --calendar-border: #ce93d8;
+    --calendar-day-bg: #ffffff;
+    --calendar-day-hover: #f8e9fc;
+    --calendar-day-prev-next: #fce4ec;
+    --calendar-day-prev-next-text: #ce93d8;
+    --calendar-today-bg: #e1bee7;
+    --calendar-today-border: #6A1B9A;
+    --calendar-today-text: #4a148c;
+    --calendar-selected-bg: #f3e5f5;
+    --calendar-selected-border: #8e24aa;
+    --calendar-selected-text: #6a1b9a;
+    --calendar-has-events-bg: #fff3e0;
+    --weekday-header-bg: #f3e5f5;
+    --weekday-header-text: #4a148c;
+    --time-label-bg: #f3e5f5;
+    --time-label-text: #4a148c;
+    --time-label-border: #ce93d8;
+    --event-colors: #9C27B0, #673AB7, #3F51B5, #2196F3, #03DAC6, #009688, #4CAF50, #8BC34A, #CDDC39, #FFC107, #FF9800, #FF5722, #F44336, #E91E63, #795548, #607D8B;
+}
+
+[data-theme="purple"] body {
+    background-color: var(--primary-bg);
+    color: var(--primary-text);
+}
+
+[data-theme="purple"] .app-sidebar {
+    background: var(--sidebar-bg);
+}
+
+/* Dark Theme */
+[data-theme="dark"] {
+    --primary-gradient: linear-gradient(180deg, #424242 0%, #212121 100%);
+    --primary-bg: #121212;
+    --primary-text: #ffffff;
+    --sidebar-bg: linear-gradient(180deg, #424242 0%, #212121 100%);
+    --sidebar-text: white;
+    --header-bg: linear-gradient(135deg, #424242 0%, #212121 100%);
+    --header-text: white;
+    --card-bg: #1e1e1e;
+    --border-color: #333333;
+    --accent-color: #666666;
+    --calendar-bg: #1f1f1f;
+    --calendar-border: #333333;
+    --calendar-day-bg: #1f1f1f;
+    --calendar-day-hover: #2a2a2a;
+    --calendar-day-prev-next: #1a1a1a;
+    --calendar-day-prev-next-text: #555;
+    --calendar-today-bg: #2d2d2d;
+    --calendar-today-border: #bb86fc;
+    --calendar-today-text: #bb86fc;
+    --calendar-selected-bg: #2a2a2a;
+    --calendar-selected-border: #bb86fc;
+    --calendar-selected-text: #bb86fc;
+    --calendar-has-events-bg: #272727;
+    --weekday-header-bg: #1a1a1a;
+    --weekday-header-text: #e0e0e0;
+    --time-label-bg: #1a1a1a;
+    --time-label-text: #e0e0e0;
+    --time-label-border: #333333;
+    --event-colors: #bb86fc, #03dac6, #cf6679, #ff9800, #4caf50, #2196f3, #9c27b0, #f44336, #795548, #607d8b, #e91e63, #3f51b5, #009688, #8bc34a, #ffc107, #ff5722;
+}
+
+[data-theme="dark"] body {
+    background-color: var(--primary-bg);
+    color: var(--primary-text);
+}
+
+[data-theme="dark"] .app-sidebar {
+    background: var(--sidebar-bg);
+}
+
+[data-theme="dark"] .app-main {
+    background-color: var(--primary-bg);
+}
+
+[data-theme="dark"] .calendar-day {
+    background: var(--card-bg);
+    border-color: var(--border-color);
+    color: var(--primary-text);
+}
+
+/* Rose Theme */
+[data-theme="rose"] {
+    --primary-gradient: linear-gradient(180deg, #E91E63 0%, #AD1457 100%);
+    --primary-bg: #fce4ec;
+    --primary-text: #880e4f;
+    --sidebar-bg: linear-gradient(180deg, #E91E63 0%, #AD1457 100%);
+    --sidebar-text: white;
+    --header-bg: linear-gradient(135deg, #E91E63 0%, #AD1457 100%);
+    --header-text: white;
+    --card-bg: #ffffff;
+    --border-color: #f8bbd9;
+    --accent-color: #E91E63;
+    --calendar-bg: #ffffff;
+    --calendar-border: #f8bbd9;
+    --calendar-day-bg: #ffffff;
+    --calendar-day-hover: #fdf2f8;
+    --calendar-day-prev-next: #fef7ff;
+    --calendar-day-prev-next-text: #f8bbd9;
+    --calendar-today-bg: #f48fb1;
+    --calendar-today-border: #AD1457;
+    --calendar-today-text: #880e4f;
+    --calendar-selected-bg: #fce4ec;
+    --calendar-selected-border: #c2185b;
+    --calendar-selected-text: #ad1457;
+    --calendar-has-events-bg: #fff3e0;
+    --weekday-header-bg: #fce4ec;
+    --weekday-header-text: #880e4f;
+    --time-label-bg: #fce4ec;
+    --time-label-text: #880e4f;
+    --time-label-border: #f8bbd9;
+    --event-colors: #E91E63, #9C27B0, #673AB7, #3F51B5, #2196F3, #03DAC6, #009688, #4CAF50, #8BC34A, #CDDC39, #FFC107, #FF9800, #FF5722, #F44336, #795548, #607D8B;
+}
+
+[data-theme="rose"] body {
+    background-color: var(--primary-bg);
+    color: var(--primary-text);
+}
+
+[data-theme="rose"] .app-sidebar {
+    background: var(--sidebar-bg);
+}
+
+/* Mint Theme */
+[data-theme="mint"] {
+    --primary-gradient: linear-gradient(180deg, #26A69A 0%, #00695C 100%);
+    --primary-bg: #e0f2f1;
+    --primary-text: #004d40;
+    --sidebar-bg: linear-gradient(180deg, #26A69A 0%, #00695C 100%);
+    --sidebar-text: white;
+    --header-bg: linear-gradient(135deg, #26A69A 0%, #00695C 100%);
+    --header-text: white;
+    --card-bg: #ffffff;
+    --border-color: #b2dfdb;
+    --accent-color: #26A69A;
+    --calendar-bg: #ffffff;
+    --calendar-border: #b2dfdb;
+    --calendar-day-bg: #ffffff;
+    --calendar-day-hover: #f0fdfc;
+    --calendar-day-prev-next: #f7ffff;
+    --calendar-day-prev-next-text: #b2dfdb;
+    --calendar-today-bg: #b2dfdb;
+    --calendar-today-border: #00695C;
+    --calendar-today-text: #004d40;
+    --calendar-selected-bg: #e0f2f1;
+    --calendar-selected-border: #00897b;
+    --calendar-selected-text: #00695c;
+    --calendar-has-events-bg: #fff3e0;
+    --weekday-header-bg: #e0f2f1;
+    --weekday-header-text: #004d40;
+    --time-label-bg: #e0f2f1;
+    --time-label-text: #004d40;
+    --time-label-border: #b2dfdb;
+    --event-colors: #26A69A, #009688, #4CAF50, #8BC34A, #CDDC39, #FFC107, #FF9800, #FF5722, #F44336, #E91E63, #9C27B0, #673AB7, #3F51B5, #2196F3, #795548, #607D8B;
+}
+
+[data-theme="mint"] body {
+    background-color: var(--primary-bg);
+    color: var(--primary-text);
+}
+
+[data-theme="mint"] .app-sidebar {
+    background: var(--sidebar-bg);
+}
+
+/* Recurrence Options Styling */
+.recurrence-options {
+    margin-top: 1.5rem;
+    padding: 1rem;
+    background: #f8f9fa;
+    border: 1px solid #e9ecef;
+    border-radius: 8px;
+}
+
+.interval-input {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.interval-input input {
+    width: 80px;
+    flex-shrink: 0;
+}
+
+.interval-unit {
+    color: #6c757d;
+    font-size: 0.9rem;
+}
+
+.end-options {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.end-option {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.end-option .radio-label {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    margin-right: 0.5rem;
+    white-space: nowrap;
+    cursor: pointer;
+}
+
+.end-option input[type="date"],
+.end-option input[type="number"] {
+    width: 120px;
+}
+
+.count-input {
+    width: 80px !important;
+}
+
+.count-unit {
+    color: #6c757d;
+    font-size: 0.9rem;
+}
+
+.monthly-options {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.monthly-option {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.monthly-option .radio-label {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    margin-right: 0.5rem;
+    white-space: nowrap;
+    cursor: pointer;
+}
+
+.day-input {
+    width: 80px !important;
+}
+
+.yearly-months {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 0.5rem;
+    margin-top: 0.5rem;
+}
+
+.month-checkbox {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.25rem 0.5rem;
+    border: 1px solid #e9ecef;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.month-checkbox:hover {
+    background-color: #f8f9fa;
+    border-color: #ced4da;
+}
+
+.month-checkbox input[type="checkbox"] {
+    width: auto !important;
+    margin: 0 !important;
+}
+
+.month-label {
+    font-size: 0.9rem;
+    user-select: none;
+}
+
+/* Radio button styling */
+.radio-label input[type="radio"] {
+    width: auto !important;
+    margin: 0 !important;
+    margin-right: 0.25rem !important;
+}
+
+/* Mobile responsive adjustments */
+@media (max-width: 768px) {
+    .end-options {
+        gap: 0.5rem;
+    }
+    
+    .end-option {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.25rem;
+    }
+    
+    .monthly-option {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.25rem;
+    }
+    
+    .yearly-months {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
diff --git a/frontend/styles/base.css b/frontend/styles/base.css
new file mode 100644
index 0000000..9652909
--- /dev/null
+++ b/frontend/styles/base.css
@@ -0,0 +1,51 @@
+/* Base Styles - Always Loaded */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background-color: #f8f9fa;
+    color: #333;
+    line-height: 1.6;
+}
+
+.app {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: row;
+}
+
+.login-layout {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+/* Base Layout */
+.main-content {
+    flex: 1;
+    margin-left: 280px;
+    overflow-x: hidden;
+}
+
+/* Basic Form Elements */
+input, select, textarea, button {
+    font-family: inherit;
+}
+
+/* Utility Classes */
+.loading {
+    opacity: 0.7;
+}
+
+.error {
+    color: #dc3545;
+}
+
+.success {
+    color: #28a745;
+}
\ No newline at end of file
diff --git a/frontend/styles/default.css b/frontend/styles/default.css
new file mode 100644
index 0000000..c4f437a
--- /dev/null
+++ b/frontend/styles/default.css
@@ -0,0 +1,3501 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background-color: #f8f9fa;
+    color: #333;
+    line-height: 1.6;
+}
+
+.app {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: row;
+}
+
+.login-layout {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+/* Sidebar Styles */
+.app-sidebar {
+    width: 280px;
+    min-height: 100vh;
+    background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 2px 0 8px rgba(0,0,0,0.1);
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 100;
+}
+
+.sidebar-header {
+    padding: 2rem 1.5rem 1.5rem;
+    border-bottom: 1px solid rgba(255,255,255,0.2);
+}
+
+.sidebar-header h1 {
+    margin: 0 0 1rem 0;
+    font-size: 1.8rem;
+    font-weight: 600;
+    text-align: center;
+}
+
+.user-info {
+    text-align: center;
+    margin-bottom: 0.5rem;
+}
+
+.user-info .username {
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: white;
+    margin-bottom: 0.25rem;
+}
+
+.user-info .server-url {
+    font-size: 0.8rem;
+    color: rgba(255,255,255,0.7);
+    word-break: break-all;
+    line-height: 1.2;
+}
+
+.user-info.loading {
+    font-size: 0.9rem;
+    color: rgba(255,255,255,0.6);
+    font-style: italic;
+}
+
+.sidebar-nav {
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.sidebar-nav .nav-link {
+    color: white;
+    text-decoration: none;
+    padding: 0.75rem 1rem;
+    border-radius: 8px;
+    transition: all 0.2s;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+}
+
+.sidebar-nav .nav-link:hover {
+    background-color: rgba(255,255,255,0.15);
+    transform: translateX(4px);
+}
+
+.sidebar-nav .nav-link.active {
+    background-color: rgba(255,255,255,0.2);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.calendar-list {
+    flex: 1;
+    padding: 1rem;
+    border-top: 1px solid rgba(255,255,255,0.1);
+}
+
+.calendar-list h3 {
+    color: white;
+    font-size: 1rem;
+    font-weight: 600;
+    margin: 0 0 1rem 0;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.calendar-list ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.calendar-list li {
+    display: flex;
+    align-items: center;
+    padding: 0.5rem 0.75rem;
+    background: rgba(255,255,255,0.1);
+    border-radius: 6px;
+    transition: all 0.2s;
+    cursor: pointer;
+    gap: 0.75rem;
+}
+
+.calendar-list li:hover {
+    background: rgba(255,255,255,0.15);
+    transform: translateX(2px);
+}
+
+.calendar-color {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    flex-shrink: 0;
+    border: 2px solid rgba(255,255,255,0.3);
+    transition: all 0.2s;
+    cursor: pointer;
+    position: relative;
+}
+
+.calendar-list li:hover .calendar-color {
+    border-color: rgba(255,255,255,0.6);
+    transform: scale(1.1);
+}
+
+.color-picker {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    background: white;
+    border-radius: 8px;
+    padding: 8px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    z-index: 1000;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 6px;
+    min-width: 120px;
+    border: 1px solid rgba(0,0,0,0.1);
+}
+
+.color-option {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    border: 2px solid rgba(0,0,0,0.1);
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.color-option:hover {
+    transform: scale(1.2);
+    border-color: rgba(0,0,0,0.3);
+}
+
+.color-option.selected {
+    border-color: #333;
+    border-width: 3px;
+    transform: scale(1.1);
+}
+
+.color-picker-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 999;
+}
+
+.calendar-name {
+    color: white;
+    font-size: 0.9rem;
+    font-weight: 500;
+    flex: 1;
+}
+
+.no-calendars {
+    padding: 1rem;
+    text-align: center;
+    color: rgba(255,255,255,0.6);
+    font-size: 0.9rem;
+    font-style: italic;
+    border-top: 1px solid rgba(255,255,255,0.1);
+}
+
+.sidebar-footer {
+    padding: 1rem;
+    border-top: 1px solid rgba(255,255,255,0.1);
+}
+
+.app-main {
+    flex: 1;
+    margin-left: 280px;
+    padding: 2rem;
+    max-width: calc(100% - 280px);
+    width: calc(100% - 280px);
+    box-sizing: border-box;
+}
+
+/* Authentication Forms */
+.login-container, .register-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 60vh;
+}
+
+.login-form, .register-form {
+    background: white;
+    padding: 2rem;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+    width: 100%;
+    max-width: 400px;
+}
+
+.login-form h2, .register-form h2 {
+    text-align: center;
+    margin-bottom: 2rem;
+    color: #333;
+}
+
+.form-group {
+    margin-bottom: 1.5rem;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+    color: #555;
+}
+
+.form-group input {
+    width: 100%;
+    padding: 0.75rem;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 1rem;
+    transition: border-color 0.2s;
+}
+
+.form-group input:focus {
+    outline: none;
+    border-color: #667eea;
+    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
+}
+
+.form-group input:disabled {
+    background-color: #f5f5f5;
+    cursor: not-allowed;
+}
+
+.remember-checkbox {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    margin-top: 0.375rem;
+    opacity: 0.7;
+}
+
+.remember-checkbox input[type="checkbox"] {
+    width: auto;
+    margin: 0;
+    cursor: pointer;
+    transform: scale(0.85);
+}
+
+.remember-checkbox label {
+    margin: 0;
+    font-size: 0.75rem;
+    color: #888;
+    cursor: pointer;
+    user-select: none;
+    font-weight: 400;
+}
+
+.login-button, .register-button {
+    width: 100%;
+    padding: 0.75rem;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border: none;
+    border-radius: 4px;
+    font-size: 1rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.login-button:hover, .register-button:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+}
+
+.login-button:disabled, .register-button:disabled {
+    background: #ccc;
+    transform: none;
+    cursor: not-allowed;
+}
+
+.error-message {
+    background-color: #f8d7da;
+    color: #721c24;
+    padding: 0.75rem;
+    border-radius: 4px;
+    margin-bottom: 1rem;
+    border: 1px solid #f5c6cb;
+}
+
+.auth-links {
+    text-align: center;
+    margin-top: 2rem;
+    color: #666;
+}
+
+.auth-links a {
+    color: #667eea;
+    text-decoration: none;
+}
+
+.auth-links a:hover {
+    text-decoration: underline;
+}
+
+.logout-button {
+    background: rgba(255,255,255,0.1);
+    border: 1px solid rgba(255,255,255,0.2);
+    color: white;
+    padding: 0.75rem 1rem;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.2s;
+    font-weight: 500;
+    width: 100%;
+}
+
+.logout-button:hover {
+    background: rgba(255,255,255,0.2);
+    transform: translateY(-1px);
+}
+
+/* Calendar View */
+.calendar-view {
+    height: calc(100vh - 4rem); /* Full height minus main padding */
+    display: flex;
+    flex-direction: column;
+}
+
+.calendar-loading, .calendar-error {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    background: white;
+    border-radius: 12px;
+    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
+}
+
+.calendar-loading p {
+    font-size: 1.2rem;
+    color: #666;
+}
+
+.calendar-error p {
+    font-size: 1.2rem;
+    color: #d32f2f;
+}
+
+/* Calendar Component */
+.calendar {
+    background: var(--calendar-bg, white);
+    border-radius: 12px;
+    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
+    overflow: hidden;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.calendar-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1.5rem 2rem;
+    background: var(--header-bg, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
+    color: var(--header-text, white);
+}
+
+.month-year {
+    font-size: 1.8rem;
+    font-weight: 600;
+    margin: 0;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.header-left {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.header-right {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.time-increment-button {
+    background: rgba(255,255,255,0.2);
+    border: none;
+    color: white;
+    font-size: 14px;
+    font-weight: bold;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.2s;
+}
+
+.time-increment-button:hover {
+    background: rgba(255,255,255,0.3);
+}
+
+.nav-button {
+    background: rgba(255,255,255,0.2);
+    border: none;
+    color: white;
+    font-size: 1.5rem;
+    font-weight: bold;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.2s;
+}
+
+.nav-button:hover {
+    background: rgba(255,255,255,0.3);
+}
+
+.today-button {
+    background: rgba(255,255,255,0.2);
+    border: none;
+    color: white;
+    font-size: 0.9rem;
+    font-weight: 500;
+    padding: 0.5rem 1rem;
+    border-radius: 20px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.2s;
+}
+
+.today-button:hover {
+    background: rgba(255,255,255,0.3);
+}
+
+.calendar-grid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    grid-template-rows: auto repeat(6, 1fr);
+    flex: 1;
+    background: var(--calendar-bg, white);
+    gap: 0;
+}
+
+/* Week View Container */
+.week-view-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background: var(--calendar-bg, white);
+}
+
+/* Week Header */
+.week-header {
+    display: grid;
+    grid-template-columns: 80px repeat(7, 1fr);
+    background: var(--weekday-header-bg, #f8f9fa);
+    border-bottom: 2px solid var(--time-label-border, #e9ecef);
+    position: sticky;
+    top: 0;
+    z-index: 10;
+}
+
+.time-gutter {
+    background: var(--time-label-bg, #f8f9fa);
+    border-right: 1px solid var(--time-label-border, #e9ecef);
+}
+
+.week-day-header {
+    padding: 1rem;
+    text-align: center;
+    border-right: 1px solid var(--time-label-border, #e9ecef);
+    background: var(--weekday-header-bg, #f8f9fa);
+    color: var(--weekday-header-text, inherit);
+}
+
+.week-day-header.today {
+    background: var(--calendar-today-bg, #e3f2fd);
+    color: var(--calendar-today-text, #1976d2);
+}
+
+.weekday-name {
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: var(--weekday-header-text, #666);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 0.25rem;
+}
+
+.week-day-header .day-number {
+    font-size: 1.5rem;
+    font-weight: 700;
+}
+
+.week-day-header.today .weekday-name {
+    color: var(--calendar-today-text, #1976d2);
+}
+
+/* Week Content */
+.week-content {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+.time-grid {
+    display: grid;
+    grid-template-columns: 80px 1fr;
+    min-height: 100%;
+}
+
+/* Time Labels */
+.time-labels {
+    background: var(--time-label-bg, #f8f9fa);
+    border-right: 1px solid var(--time-label-border, #e9ecef);
+    position: sticky;
+    left: 0;
+    z-index: 5;
+}
+
+.time-label {
+    height: 60px;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    padding-top: 0.5rem;
+    font-size: 0.75rem;
+    color: var(--time-label-text, #666);
+    border-bottom: 1px solid var(--calendar-border, #f0f0f0);
+    font-weight: 500;
+}
+
+.time-label.final-boundary {
+    height: 60px; /* Keep same height but this marks the end boundary */
+    border-bottom: 2px solid #e9ecef; /* Stronger border to show day end */
+    color: #999; /* Lighter color to indicate it's the boundary */
+    font-size: 0.7rem;
+}
+
+/* Week Days Grid */
+.week-days-grid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+}
+
+.week-day-column {
+    position: relative;
+    border-right: 1px solid var(--time-label-border, #e9ecef);
+    min-height: 1500px; /* 25 time labels × 60px = 1500px total */
+}
+
+.week-day-column:last-child {
+    border-right: none;
+}
+
+.week-day-column.today {
+    background: var(--calendar-day-hover, #fafffe);
+}
+
+/* Time Slots */
+.time-slot {
+    height: 60px;
+    border-bottom: 1px solid var(--calendar-border, #f0f0f0);
+    position: relative;
+    pointer-events: none; /* Don't capture mouse events */
+}
+
+.time-slot-half {
+    height: 30px;
+    border-bottom: 1px dotted var(--calendar-border, #f5f5f5);
+    pointer-events: none; /* Don't capture mouse events */
+}
+
+.time-slot-half:last-child {
+    border-bottom: none;
+}
+
+.time-slot.boundary-slot {
+    height: 60px; /* Match the final time label height */
+    border-bottom: 2px solid #e9ecef; /* Strong border to match final boundary */
+    background: rgba(0,0,0,0.02); /* Slightly different background to indicate boundary */
+    pointer-events: none; /* Don't capture mouse events */
+}
+
+/* Events Container */
+.events-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none; /* Container doesn't capture, but children (events) do */
+}
+
+/* Week Events */
+.week-event {
+    position: absolute !important;
+    left: 4px;
+    right: 4px;
+    min-height: 20px;
+    background: #3B82F6;
+    color: white;
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: 0.75rem;
+    line-height: 1.3;
+    cursor: pointer;
+    pointer-events: auto;
+    z-index: 3;
+    border: 1px solid rgba(255,255,255,0.2);
+    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
+    font-weight: 500;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.week-event:hover {
+    filter: brightness(1.1);
+    z-index: 4;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
+}
+
+.week-event.refreshing {
+    animation: pulse 1.5s ease-in-out infinite alternate;
+    border-color: #ff9800;
+}
+
+/* Temporary event box during drag creation */
+.temp-event-box {
+    position: absolute;
+    left: 4px;
+    right: 4px;
+    background: rgba(59, 130, 246, 0.3);
+    border: 2px dashed rgba(59, 130, 246, 0.8);
+    border-radius: 4px;
+    color: rgba(59, 130, 246, 0.9);
+    font-size: 0.75rem;
+    font-weight: 600;
+    padding: 4px 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+    z-index: 6; /* Higher than events */
+    text-align: center;
+    user-select: none;
+}
+
+/* Moving event during drag */
+.temp-event-box.moving-event {
+    background: inherit; /* Use the event's actual color */
+    border: 2px solid rgba(255, 255, 255, 0.8);
+    color: white;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    text-align: left;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+    transform: scale(1.02);
+}
+
+.temp-event-box.moving-event .event-title {
+    font-weight: 600;
+    margin-bottom: 2px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
+}
+
+.temp-event-box.moving-event .event-time {
+    font-size: 0.65rem;
+    opacity: 0.9;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
+}
+
+/* Resizing event during drag */
+.temp-event-box.resizing-event {
+    background: inherit;
+    border: 2px solid rgba(255, 255, 255, 0.9);
+    color: white;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    text-align: left;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+    transform: scale(1.01);
+}
+
+.temp-event-box.resizing-event .event-title {
+    font-weight: 600;
+    margin-bottom: 2px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
+}
+
+.temp-event-box.resizing-event .event-time {
+    font-size: 0.65rem;
+    opacity: 0.9;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
+}
+
+/* Event resize zones and handles */
+/* Remove position: relative to allow absolute positioning for correct event placement */
+
+.week-event .event-content {
+    padding: 2px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    pointer-events: auto;
+    z-index: 5;
+    position: relative;
+}
+
+/* Left-click drag handles */
+.resize-handle {
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: transparent;
+    cursor: ns-resize;
+    z-index: 10;
+    transition: background-color 0.2s;
+}
+
+.resize-handle-top {
+    top: 0;
+    border-top: 2px solid transparent;
+}
+
+.resize-handle-bottom {
+    bottom: 0;
+    border-bottom: 2px solid transparent;
+}
+
+.week-event:hover .resize-handle {
+    background: rgba(255, 255, 255, 0.3);
+}
+
+.week-event:hover .resize-handle-top {
+    border-top-color: rgba(255, 255, 255, 0.8);
+}
+
+.week-event:hover .resize-handle-bottom {
+    border-bottom-color: rgba(255, 255, 255, 0.8);
+}
+
+.resize-handle:hover {
+    background: rgba(255, 255, 255, 0.5) !important;
+    border-color: rgba(255, 255, 255, 1) !important;
+}
+
+
+.week-event .event-title {
+    font-weight: 600;
+    margin-bottom: 2px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.week-event .event-time {
+    font-size: 0.65rem;
+    opacity: 0.9;
+    font-weight: 400;
+}
+
+.week-event.all-day {
+    opacity: 0.9;
+    border-left: 4px solid rgba(255,255,255,0.5);
+    font-style: italic;
+    background: linear-gradient(135deg, var(--event-color, #3B82F6), rgba(255,255,255,0.1)) !important;
+}
+
+/* Legacy Week Grid (for backward compatibility) */
+.week-grid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    grid-template-rows: auto 1fr;
+    flex: 1;
+    background: var(--calendar-bg, white);
+}
+
+.week-view .calendar-day {
+    height: 100%; /* Make week view days stretch to full height of their grid cell */
+}
+
+.weekday-header {
+    background: #f8f9fa;
+    padding: 1rem;
+    text-align: center;
+    font-weight: 600;
+    color: #666;
+    border-bottom: 1px solid #e9ecef;
+    font-size: 0.9rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.calendar-day {
+    border: 1px solid var(--calendar-border, #f0f0f0);
+    padding: 0.75rem;
+    display: flex;
+    flex-direction: column;
+    cursor: pointer;
+    transition: background-color 0.2s;
+    position: relative;
+    overflow: hidden;
+    background: var(--calendar-day-bg, white);
+}
+
+.calendar-day:hover {
+    background-color: var(--calendar-day-hover, #f8f9ff);
+}
+
+.calendar-day.current-month {
+    background: var(--calendar-day-bg, white);
+}
+
+.calendar-day.prev-month,
+.calendar-day.next-month {
+    background: var(--calendar-day-prev-next, #fafafa);
+    color: var(--calendar-day-prev-next-text, #ccc);
+}
+
+.calendar-day.today {
+    background: var(--calendar-today-bg, #e3f2fd);
+    border: 2px solid var(--calendar-today-border, #2196f3);
+}
+
+.calendar-day.has-events {
+    background: var(--calendar-has-events-bg, #fff3e0);
+}
+
+.calendar-day.today.has-events {
+    background: var(--calendar-today-bg, #e1f5fe);
+}
+
+.calendar-day.selected {
+    background: var(--calendar-selected-bg, #e8f5e8);
+    border: 2px solid var(--calendar-selected-border, #4caf50);
+    box-shadow: 0 0 8px rgba(76, 175, 80, 0.3);
+}
+
+.calendar-day.selected.has-events {
+    background: var(--calendar-selected-bg, #f1f8e9);
+}
+
+.calendar-day.selected.today {
+    background: var(--calendar-selected-bg, #e0f2f1);
+    border: 2px solid var(--calendar-selected-border, #4caf50);
+}
+
+.calendar-day.selected .day-number {
+    color: var(--calendar-selected-text, #2e7d32);
+    font-weight: 700;
+}
+
+.day-number {
+    font-weight: 600;
+    font-size: 1.1rem;
+    margin-bottom: 0.5rem;
+}
+
+.calendar-day.today .day-number {
+    color: var(--calendar-today-text, #1976d2);
+}
+
+.day-events {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    overflow: hidden;
+}
+
+.event-indicators {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.more-events-indicator {
+    font-size: 0.7rem;
+    color: #666;
+    font-weight: 500;
+    padding: 2px 4px;
+    text-align: center;
+    background: #f5f5f5;
+    border-radius: 3px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+.more-events-indicator:hover {
+    background: #e0e0e0;
+}
+
+.event-box {
+    /* Background color will be set inline via style attribute */
+    color: white;
+    padding: 2px 4px;
+    border-radius: 3px;
+    font-size: 0.7rem;
+    line-height: 1.2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    border: 1px solid rgba(255,255,255,0.2);
+    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
+    font-weight: 500;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+    position: relative;
+}
+
+.event-box:hover {
+    filter: brightness(1.15);
+    transform: translateY(-1px);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
+}
+
+.event-box.refreshing {
+    animation: pulse 1.5s ease-in-out infinite alternate;
+    border-color: #ff9800;
+}
+
+.event-box.refreshing::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(255, 152, 0, 0.3);
+    pointer-events: none;
+}
+
+@keyframes pulse {
+    0% {
+        opacity: 0.7;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+.event-dot {
+    background: #ff9800;
+    height: 6px;
+    border-radius: 3px;
+    margin-bottom: 1px;
+}
+
+.more-events {
+    font-size: 0.7rem;
+    color: #666;
+    margin-top: 2px;
+    font-weight: 500;
+}
+
+/* Event Modal Styles */
+.modal-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    backdrop-filter: blur(2px);
+}
+
+.modal-content {
+    background: white;
+    border-radius: 12px;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+    max-width: 900px;
+    width: 95%;
+    max-height: 85vh;
+    overflow-y: auto;
+    position: relative;
+    animation: modalAppear 0.2s ease-out;
+}
+
+@keyframes modalAppear {
+    from {
+        opacity: 0;
+        transform: scale(0.9) translateY(-20px);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+    }
+}
+
+.modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 2rem 3rem 1.5rem;
+    border-bottom: 1px solid #e9ecef;
+}
+
+.modal-header h3 {
+    margin: 0;
+    color: #333;
+    font-size: 1.4rem;
+    font-weight: 600;
+}
+
+.modal-close {
+    background: none;
+    border: none;
+    font-size: 1.8rem;
+    color: #999;
+    cursor: pointer;
+    padding: 0;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+    line-height: 1;
+}
+
+.modal-close:hover {
+    background: #f8f9fa;
+    color: #666;
+    transform: scale(1.1);
+}
+
+.modal-body {
+    padding: 0.25rem 1.0rem 0rem;
+}
+
+.event-detail {
+    display: grid;
+    grid-template-columns: 100px 1fr;
+    gap: 1rem;
+    margin-bottom: 1rem;
+    align-items: start;
+}
+
+.event-detail strong {
+    color: #555;
+    font-weight: 600;
+    font-size: 0.9rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.event-detail span {
+    color: #333;
+    font-size: 1rem;
+    line-height: 1.5;
+    word-break: break-word;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .app-sidebar {
+        width: 100%;
+        height: auto;
+        min-height: unset;
+        position: relative;
+        flex-direction: row;
+        padding: 1rem;
+    }
+
+    .sidebar-header {
+        padding: 0;
+        border-bottom: none;
+        border-right: 1px solid rgba(255,255,255,0.2);
+        margin-right: 1rem;
+    }
+
+    .sidebar-header h1 {
+        font-size: 1.4rem;
+        text-align: left;
+        margin: 0;
+    }
+
+    .user-info {
+        display: none; /* Hide user info on mobile to save space */
+    }
+
+    .sidebar-nav {
+        flex-direction: row;
+        padding: 0;
+        align-items: center;
+        gap: 1rem;
+        flex: 1;
+    }
+
+    .sidebar-nav .nav-link {
+        padding: 0.5rem 0.75rem;
+        font-size: 0.9rem;
+    }
+
+    .logout-button {
+        margin: 0;
+        padding: 0.5rem 0.75rem;
+        font-size: 0.9rem;
+        width: auto;
+    }
+
+    .calendar-list {
+        display: none; /* Hide calendar list on mobile */
+    }
+
+    .sidebar-footer {
+        padding: 0;
+        border-top: none;
+    }
+
+    .view-selector {
+        margin-bottom: 0.5rem;
+    }
+
+    .view-selector-dropdown {
+        padding: 0.5rem 0.75rem;
+        font-size: 0.8rem;
+    }
+
+    .app-main {
+        margin-left: 0;
+        max-width: 100%;
+        width: 100%;
+        padding: 1rem;
+    }
+
+    .calendar-header {
+        padding: 1rem;
+    }
+
+    .month-year {
+        font-size: 1.4rem;
+    }
+
+    .nav-button {
+        width: 35px;
+        height: 35px;
+        font-size: 1.2rem;
+    }
+    
+    .today-button {
+        font-size: 0.8rem;
+        padding: 0.4rem 0.8rem;
+    }
+
+    .weekday-header {
+        padding: 0.5rem;
+        font-size: 0.8rem;
+    }
+
+    .calendar-day {
+        min-height: 70px;
+        padding: 0.5rem;
+    }
+
+    .day-number {
+        font-size: 1rem;
+    }
+
+    .calendar-view {
+        height: calc(100vh - 8rem);
+    }
+}
+
+@media (max-width: 480px) {
+    .calendar-day {
+        min-height: 60px;
+        padding: 0.25rem;
+    }
+
+    .weekday-header {
+        padding: 0.5rem 0.25rem;
+    }
+
+    .day-number {
+        font-size: 0.9rem;
+    }
+}
+
+/* Mobile adjustments for modal */
+@media (max-width: 768px) {
+    .modal-content {
+        margin: 1rem;
+        width: calc(100% - 2rem);
+    }
+
+    .modal-header, .modal-body {
+        padding: 1.5rem 2rem;
+    }
+
+    .event-detail {
+        grid-template-columns: 80px 1fr;
+        gap: 0.75rem;
+        margin-bottom: 0.75rem;
+    }
+
+    .event-detail strong {
+        font-size: 0.8rem;
+    }
+
+    .event-detail span {
+        font-size: 0.9rem;
+    }
+
+    .login-form, .register-form {
+        padding: 1.5rem;
+    }
+}
+
+/* Create Calendar Button */
+.create-calendar-button {
+    background: rgba(255, 255, 255, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    color: white;
+    padding: 0.75rem 1rem;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    margin-bottom: 1rem;
+    font-size: 0.9rem;
+    font-weight: 500;
+    backdrop-filter: blur(10px);
+    width: 100%;
+}
+
+.create-calendar-button:hover {
+    background: rgba(255, 255, 255, 0.3);
+    border-color: rgba(255, 255, 255, 0.5);
+    transform: translateY(-1px);
+}
+
+.create-calendar-button:active {
+    transform: translateY(0);
+}
+
+/* View Selector */
+.view-selector {
+    margin-bottom: 1rem;
+}
+
+.view-selector-dropdown {
+    width: 100%;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    color: white;
+    padding: 0.75rem 1rem;
+    border-radius: 8px;
+    font-size: 0.9rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    backdrop-filter: blur(10px);
+}
+
+.view-selector-dropdown:hover {
+    background: rgba(255, 255, 255, 0.2);
+    border-color: rgba(255, 255, 255, 0.3);
+}
+
+.view-selector-dropdown:focus {
+    outline: none;
+    background: rgba(255, 255, 255, 0.2);
+    border-color: rgba(255, 255, 255, 0.4);
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
+}
+
+.view-selector-dropdown option {
+    background: #2a2a2a;
+    color: white;
+    padding: 0.5rem;
+}
+
+/* Create Calendar Modal */
+.modal-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(4px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    padding: 2rem;
+}
+
+.create-calendar-modal {
+    background: white;
+    border-radius: 12px;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+    max-width: 500px;
+    width: 100%;
+    max-height: 90vh;
+    overflow-y: auto;
+    animation: modalSlideIn 0.3s ease;
+}
+
+@keyframes modalSlideIn {
+    from {
+        opacity: 0;
+        transform: scale(0.9) translateY(-20px);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+    }
+}
+
+.create-calendar-modal .modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 2rem 2rem 1rem;
+    border-bottom: 1px solid #e9ecef;
+}
+
+.create-calendar-modal .modal-header h2 {
+    margin: 0;
+    color: #495057;
+    font-size: 1.5rem;
+    font-weight: 600;
+}
+
+.close-button {
+    background: none;
+    border: none;
+    font-size: 1.5rem;
+    color: #6c757d;
+    cursor: pointer;
+    padding: 0.25rem;
+    line-height: 1;
+    border-radius: 4px;
+    transition: all 0.2s ease;
+}
+
+.close-button:hover {
+    color: #495057;
+    background: #f8f9fa;
+}
+
+.create-calendar-modal .modal-body {
+    padding: 1.5rem 2rem 2rem;
+}
+
+.form-group {
+    margin-bottom: 1.5rem;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 0.5rem;
+    color: #495057;
+    font-weight: 500;
+    font-size: 0.9rem;
+}
+
+.form-group input,
+.form-group textarea {
+    width: 100%;
+    padding: 0.75rem;
+    border: 1px solid #ced4da;
+    border-radius: 8px;
+    font-size: 1rem;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    font-family: inherit;
+}
+
+.form-group input:focus,
+.form-group textarea:focus {
+    outline: none;
+    border-color: #667eea;
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.form-group input:disabled,
+.form-group textarea:disabled {
+    background-color: #f8f9fa;
+    color: #6c757d;
+    cursor: not-allowed;
+}
+
+.color-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 0.75rem;
+    margin: 0.75rem 0;
+}
+
+.color-option {
+    width: 40px;
+    height: 40px;
+    border: 3px solid transparent;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    position: relative;
+}
+
+.color-option:hover {
+    transform: scale(1.1);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+.color-option.selected {
+    border-color: #495057;
+    transform: scale(1.1);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+}
+
+.color-option.selected::after {
+    content: '✓';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: white;
+    font-weight: bold;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+}
+
+.color-help-text {
+    font-size: 0.8rem;
+    color: #6c757d;
+    margin-top: 0.5rem;
+    margin-bottom: 0;
+}
+
+.modal-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 1rem;
+    margin-top: 2rem;
+    padding-top: 1.5rem;
+    border-top: 1px solid #e9ecef;
+}
+
+.cancel-button,
+.create-button {
+    padding: 0.75rem 1.5rem;
+    border-radius: 8px;
+    font-size: 1rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    border: none;
+}
+
+.cancel-button {
+    background: #f8f9fa;
+    color: #6c757d;
+    border: 1px solid #ced4da;
+}
+
+.cancel-button:hover:not(:disabled) {
+    background: #e9ecef;
+    color: #495057;
+}
+
+.create-button {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+}
+
+.create-button:hover:not(:disabled) {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+}
+
+.cancel-button:disabled,
+.create-button:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    transform: none !important;
+}
+
+.error-message {
+    background: #f8d7da;
+    color: #721c24;
+    padding: 0.75rem 1rem;
+    border: 1px solid #f5c6cb;
+    border-radius: 6px;
+    margin-bottom: 1rem;
+    font-size: 0.9rem;
+}
+
+/* Mobile adjustments for create calendar modal */
+@media (max-width: 768px) {
+    .modal-backdrop {
+        padding: 1rem;
+    }
+    
+    .create-calendar-modal {
+        max-height: 95vh;
+    }
+    
+    .create-calendar-modal .modal-header,
+    .create-calendar-modal .modal-body {
+        padding-left: 1.5rem;
+        padding-right: 1.5rem;
+    }
+    
+    .color-grid {
+        grid-template-columns: repeat(4, 1fr);
+        gap: 0.5rem;
+    }
+    
+    .color-option {
+        width: 35px;
+        height: 35px;
+    }
+    
+    .modal-actions {
+        flex-direction: column;
+        gap: 0.75rem;
+    }
+    
+    .cancel-button,
+    .create-button {
+        width: 100%;
+        text-align: center;
+    }
+}
+
+/* Context Menu */
+.context-menu {
+    background: white;
+    border: 1px solid #e9ecef;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    min-width: 160px;
+    overflow: hidden;
+    animation: contextMenuSlideIn 0.15s ease;
+}
+
+@keyframes contextMenuSlideIn {
+    from {
+        opacity: 0;
+        transform: scale(0.95) translateY(-5px);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+    }
+}
+
+.context-menu-item {
+    display: flex;
+    align-items: center;
+    padding: 0.75rem 1rem;
+    color: #495057;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+    font-size: 0.9rem;
+    border: none;
+    background: none;
+    width: 100%;
+    text-align: left;
+}
+
+.context-menu-item:hover {
+    background-color: #f8f9fa;
+}
+
+.context-menu-delete {
+    color: #dc3545;
+}
+
+.context-menu-delete:hover {
+    background-color: #f8f9fa;
+    color: #dc3545;
+}
+
+.context-menu-icon {
+    margin-right: 0.5rem;
+    font-size: 1rem;
+}
+
+/* Prevent text selection on context menu items */
+.context-menu-item {
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+
+/* Event Creation Modal Styles */
+.create-event-modal {
+    min-width: 750px;
+    max-width: 900px;
+    width: 95%;
+}
+
+.create-event-modal .modal-body {
+    max-height: 60vh;
+    overflow-y: auto;
+}
+
+.create-event-modal .form-group {
+    margin-bottom: 1.5rem;
+}
+
+.create-event-modal .form-group label {
+    display: block;
+    margin-bottom: 0.5rem;
+    color: #495057;
+    font-weight: 500;
+    font-size: 0.9rem;
+}
+
+.create-event-modal .form-input {
+    width: 100%;
+    padding: 0.75rem;
+    border: 1px solid #ced4da;
+    border-radius: 8px;
+    font-size: 1rem;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    font-family: inherit;
+    box-sizing: border-box;
+}
+
+.create-event-modal .form-input:focus {
+    outline: none;
+    border-color: #667eea;
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+/* Checkbox specific styling override */
+.create-event-modal input[type="checkbox"] {
+    width: auto;
+    display: inline-block;
+    margin-right: 0.5rem;
+    vertical-align: middle;
+}
+
+.create-event-modal .form-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+}
+
+.create-event-modal .modal-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 1rem;
+    padding: 1.5rem 2rem;
+    border-top: 1px solid #e9ecef;
+    background: #f8f9fa;
+}
+
+/* Button Styles */
+.btn {
+    padding: 0.75rem 1.5rem;
+    border-radius: 8px;
+    font-size: 1rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    border: none;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    line-height: 1.5;
+    user-select: none;
+}
+
+.btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    transform: none !important;
+}
+
+.btn-secondary {
+    background: #f8f9fa;
+    color: #6c757d;
+    border: 1px solid #ced4da;
+}
+
+.btn-secondary:hover:not(:disabled) {
+    background: #e9ecef;
+    color: #495057;
+    border-color: #adb5bd;
+}
+
+.btn-primary {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border: 1px solid transparent;
+}
+
+.btn-primary:hover:not(:disabled) {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+}
+
+/* Weekday selection styles */
+.weekday-selection {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+    margin-top: 0.5rem;
+}
+
+.weekday-checkbox {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid #ced4da;
+    border-radius: 6px;
+    background: white;
+    transition: all 0.2s ease;
+    user-select: none;
+    min-width: 3rem;
+    justify-content: center;
+}
+
+.weekday-checkbox:hover {
+    border-color: #667eea;
+    background: #f8f9ff;
+}
+
+.weekday-checkbox input[type="checkbox"] {
+    display: none;
+}
+
+.weekday-checkbox input[type="checkbox"]:checked + .weekday-label {
+    color: white;
+}
+
+.weekday-checkbox:has(input[type="checkbox"]:checked) {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-color: #667eea;
+    color: white;
+}
+
+.weekday-label {
+    font-size: 0.85rem;
+    font-weight: 500;
+    color: #495057;
+    transition: color 0.2s ease;
+}
+
+/* Mobile adjustments for event creation modal */
+@media (max-width: 768px) {
+    .create-event-modal .form-row {
+        grid-template-columns: 1fr;
+        gap: 1rem;
+    }
+    
+    .create-event-modal .modal-footer {
+        flex-direction: column;
+        gap: 0.75rem;
+        padding: 1rem 1.5rem;
+    }
+    
+    .create-event-modal .btn {
+        width: 100%;
+    }
+    
+    .weekday-selection {
+        gap: 0.25rem;
+    }
+    
+    .weekday-checkbox {
+        min-width: 2.5rem;
+        padding: 0.4rem 0.6rem;
+    }
+}
+
+/* Recurring Edit Modal */
+.recurring-edit-modal {
+    max-width: 500px;
+    width: 95%;
+}
+
+.recurring-edit-options {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin: 1.5rem 0;
+}
+
+.recurring-option {
+    background: white;
+    border: 2px solid #e9ecef;
+    color: #495057;
+    padding: 1rem;
+    text-align: left;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.recurring-option:hover {
+    border-color: #667eea;
+    background: #f8f9ff;
+    color: #495057;
+    transform: none;
+    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
+}
+
+.recurring-option .option-title {
+    font-size: 1rem;
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+    color: #333;
+}
+
+.recurring-option .option-description {
+    font-size: 0.9rem;
+    color: #666;
+    line-height: 1.4;
+}
+
+/* Mobile adjustments for recurring edit modal */
+@media (max-width: 768px) {
+    .recurring-edit-modal {
+        margin: 1rem;
+        width: calc(100% - 2rem);
+    }
+    
+    .recurring-option {
+        padding: 0.75rem;
+    }
+    
+    .recurring-option .option-title {
+        font-size: 0.9rem;
+    }
+    
+    .recurring-option .option-description {
+        font-size: 0.8rem;
+    }
+}
+
+/* Tabbed Modal Interface Styles */
+.tab-navigation {
+    display: flex;
+    border-bottom: 2px solid #e9ecef;
+    margin-bottom: 1.5rem;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+}
+
+.tab-navigation::-webkit-scrollbar {
+    display: none;
+}
+
+.tab-button {
+    background: none;
+    border: none;
+    padding: 0.75rem 1rem;
+    cursor: pointer;
+    font-size: 0.85rem;
+    font-weight: 500;
+    color: #6c757d;
+    transition: all 0.2s ease;
+    border-bottom: 3px solid transparent;
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-width: max-content;
+}
+
+.tab-button:hover {
+    color: #495057;
+    background: #f8f9fa;
+}
+
+.tab-button.active {
+    color: #667eea;
+    border-bottom-color: #667eea;
+    background: #f8f9ff;
+}
+
+.tab-content {
+    min-height: 300px;
+    max-height: 50vh;
+    overflow-y: auto;
+    padding: 1rem 2rem 2rem 2rem;
+}
+
+.tab-panel {
+    animation: fadeIn 0.2s ease-in-out;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Mobile adjustments for tabbed interface */
+@media (max-width: 768px) {
+    .tab-navigation {
+        gap: 0;
+        margin-bottom: 1rem;
+    }
+    
+    .tab-button {
+        padding: 0.5rem 0.75rem;
+        font-size: 0.8rem;
+        flex: 1;
+        justify-content: center;
+        min-width: unset;
+    }
+    
+    .tab-content {
+        min-height: 250px;
+        max-height: 45vh;
+        padding: 1rem 1.5rem 1.5rem 1.5rem;
+    }
+}
+
+/* Form Help Text and Advanced Info Styles */
+.form-help-text {
+    font-size: 0.8rem;
+    color: #6c757d;
+    margin-top: 0.25rem;
+    margin-bottom: 0;
+    line-height: 1.4;
+    font-style: italic;
+}
+
+.advanced-info {
+    background: #f8f9fa;
+    border: 1px solid #e9ecef;
+    border-radius: 8px;
+    padding: 1rem;
+    margin-top: 1.5rem;
+}
+
+.advanced-info h5 {
+    margin: 0 0 0.75rem 0;
+    color: #495057;
+    font-size: 0.9rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.advanced-info ul {
+    margin: 0 0 0.75rem 0;
+    padding-left: 1.2rem;
+    list-style-type: disc;
+}
+
+.advanced-info li {
+    font-size: 0.85rem;
+    color: #6c757d;
+    line-height: 1.4;
+    margin-bottom: 0.25rem;
+}
+
+.advanced-info .form-help-text {
+    margin-top: 0.5rem;
+    margin-bottom: 0;
+    border-top: 1px solid #e9ecef;
+    padding-top: 0.5rem;
+}
+
+/* Theme compatibility for advanced info */
+[data-theme="dark"] .advanced-info {
+    background: #2a2a2a;
+    border-color: #444444;
+}
+
+[data-theme="dark"] .advanced-info h5 {
+    color: #e0e0e0;
+}
+
+[data-theme="dark"] .advanced-info li {
+    color: #b0b0b0;
+}
+
+[data-theme="dark"] .advanced-info .form-help-text {
+    border-color: #444444;
+}
+
+/* People Tab Styles */
+.people-info {
+    background: #f8f9fa;
+    border: 1px solid #e9ecef;
+    border-radius: 8px;
+    padding: 1rem;
+    margin-top: 1.5rem;
+}
+
+.people-info h5,
+.people-info h6 {
+    margin: 0 0 0.75rem 0;
+    color: #495057;
+    font-size: 0.9rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.people-info h6 {
+    font-size: 0.8rem;
+    margin-top: 1rem;
+    margin-bottom: 0.5rem;
+}
+
+.people-validation {
+    margin-top: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid #e9ecef;
+}
+
+.attendee-roles-preview {
+    background: #f8f9fa;
+    border: 1px solid #e9ecef;
+    border-radius: 8px;
+    padding: 1rem;
+    margin-top: 1rem;
+}
+
+.attendee-roles-preview h5 {
+    margin: 0 0 0.75rem 0;
+    color: #495057;
+    font-size: 0.9rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.role-examples {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+}
+
+.role-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.5rem;
+    padding: 0.5rem;
+    background: white;
+    border-radius: 6px;
+    border: 1px solid #e9ecef;
+}
+
+.role-item strong {
+    color: #495057;
+    font-size: 0.85rem;
+    font-weight: 600;
+    min-width: 140px;
+    flex-shrink: 0;
+}
+
+.role-item span {
+    color: #6c757d;
+    font-size: 0.85rem;
+    line-height: 1.3;
+}
+
+/* Theme compatibility for people info */
+[data-theme="dark"] .people-info,
+[data-theme="dark"] .attendee-roles-preview {
+    background: #2a2a2a;
+    border-color: #444444;
+}
+
+[data-theme="dark"] .people-info h5,
+[data-theme="dark"] .people-info h6,
+[data-theme="dark"] .attendee-roles-preview h5 {
+    color: #e0e0e0;
+}
+
+[data-theme="dark"] .people-validation {
+    border-color: #444444;
+}
+
+[data-theme="dark"] .role-item {
+    background: #1f1f1f;
+    border-color: #444444;
+}
+
+[data-theme="dark"] .role-item strong {
+    color: #e0e0e0;
+}
+
+[data-theme="dark"] .role-item span {
+    color: #b0b0b0;
+}
+
+/* Mobile adjustments for people tab */
+@media (max-width: 768px) {
+    .role-item {
+        flex-direction: column;
+        gap: 0.25rem;
+    }
+    
+    .role-item strong {
+        min-width: unset;
+    }
+}
+
+/* Categories Tab Styles */
+.categories-suggestions {
+    background: #f8f9fa;
+    border: 1px solid #e9ecef;
+    border-radius: 8px;
+    padding: 1rem;
+    margin-top: 1.5rem;
+}
+
+.categories-suggestions h5 {
+    margin: 0 0 0.75rem 0;
+    color: #495057;
+    font-size: 0.9rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.category-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-bottom: 0.75rem;
+}
+
+.category-tag {
+    background: white;
+    border: 1px solid #667eea;
+    color: #667eea;
+    padding: 0.4rem 0.8rem;
+    border-radius: 20px;
+    font-size: 0.8rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.category-tag:hover {
+    background: #667eea;
+    color: white;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);
+}
+
+.categories-info {
+    background: #f8f9fa;
+    border: 1px solid #e9ecef;
+    border-radius: 8px;
+    padding: 1rem;
+    margin-top: 1rem;
+}
+
+.categories-info h5,
+.categories-info h6 {
+    margin: 0 0 0.75rem 0;
+    color: #495057;
+    font-size: 0.9rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.categories-info h6 {
+    font-size: 0.8rem;
+    margin-top: 1rem;
+    margin-bottom: 0.5rem;
+}
+
+.resources-section {
+    margin-top: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid #e9ecef;
+}
+
+.resource-features {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin-top: 0.75rem;
+}
+
+.feature-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.5rem;
+    padding: 0.5rem;
+    background: white;
+    border-radius: 6px;
+    border: 1px solid #e9ecef;
+}
+
+.feature-item strong {
+    color: #495057;
+    font-size: 0.85rem;
+    font-weight: 600;
+    min-width: 140px;
+    flex-shrink: 0;
+}
+
+.feature-item span {
+    color: #6c757d;
+    font-size: 0.85rem;
+    line-height: 1.3;
+}
+
+.quick-actions {
+    background: #f8f9fa;
+    border: 1px solid #e9ecef;
+    border-radius: 8px;
+    padding: 1rem;
+    margin-top: 1rem;
+}
+
+.quick-actions h5 {
+    margin: 0 0 0.75rem 0;
+    color: #495057;
+    font-size: 0.9rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.action-buttons {
+    display: flex;
+    gap: 0.5rem;
+    margin-bottom: 0.5rem;
+}
+
+.action-btn {
+    background: #dc3545;
+    border: 1px solid #dc3545;
+    color: white;
+    padding: 0.5rem 1rem;
+    border-radius: 6px;
+    font-size: 0.85rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.action-btn:hover {
+    background: #c82333;
+    border-color: #bd2130;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.2);
+}
+
+/* Theme compatibility for categories */
+[data-theme="dark"] .categories-suggestions,
+[data-theme="dark"] .categories-info,
+[data-theme="dark"] .quick-actions {
+    background: #2a2a2a;
+    border-color: #444444;
+}
+
+[data-theme="dark"] .categories-suggestions h5,
+[data-theme="dark"] .categories-info h5,
+[data-theme="dark"] .categories-info h6,
+[data-theme="dark"] .quick-actions h5 {
+    color: #e0e0e0;
+}
+
+[data-theme="dark"] .category-tag {
+    background: #1f1f1f;
+    border-color: #667eea;
+    color: #667eea;
+}
+
+[data-theme="dark"] .category-tag:hover {
+    background: #667eea;
+    color: white;
+}
+
+[data-theme="dark"] .feature-item {
+    background: #1f1f1f;
+    border-color: #444444;
+}
+
+[data-theme="dark"] .feature-item strong {
+    color: #e0e0e0;
+}
+
+[data-theme="dark"] .feature-item span {
+    color: #b0b0b0;
+}
+
+[data-theme="dark"] .resources-section {
+    border-color: #444444;
+}
+
+/* Mobile adjustments for categories tab */
+@media (max-width: 768px) {
+    .category-tags {
+        gap: 0.25rem;
+    }
+    
+    .category-tag {
+        padding: 0.3rem 0.6rem;
+        font-size: 0.75rem;
+    }
+    
+    .feature-item {
+        flex-direction: column;
+        gap: 0.25rem;
+    }
+    
+    .feature-item strong {
+        min-width: unset;
+    }
+    
+    .action-buttons {
+        flex-direction: column;
+    }
+}
+
+/* Location Tab Styles */
+.location-suggestions {
+    background: #f8f9fa;
+    border: 1px solid #e9ecef;
+    border-radius: 8px;
+    padding: 1rem;
+    margin-top: 1.5rem;
+}
+
+.location-suggestions h5 {
+    margin: 0 0 0.75rem 0;
+    color: #495057;
+    font-size: 0.9rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.location-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-bottom: 0.75rem;
+}
+
+.location-tag {
+    background: white;
+    border: 1px solid #28a745;
+    color: #28a745;
+    padding: 0.4rem 0.8rem;
+    border-radius: 20px;
+    font-size: 0.8rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.location-tag:hover {
+    background: #28a745;
+    color: white;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2);
+}
+
+.location-info {
+    background: #f8f9fa;
+    border: 1px solid #e9ecef;
+    border-radius: 8px;
+    padding: 1rem;
+    margin-top: 1rem;
+}
+
+.location-info h5,
+.location-info h6 {
+    margin: 0 0 0.75rem 0;
+    color: #495057;
+    font-size: 0.9rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.location-info h6 {
+    font-size: 0.8rem;
+    margin-top: 1rem;
+    margin-bottom: 0.5rem;
+}
+
+.geo-section {
+    margin-top: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid #e9ecef;
+}
+
+.geo-features {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin-top: 0.75rem;
+}
+
+.geo-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.5rem;
+    padding: 0.5rem;
+    background: white;
+    border-radius: 6px;
+    border: 1px solid #e9ecef;
+}
+
+.geo-item strong {
+    color: #495057;
+    font-size: 0.85rem;
+    font-weight: 600;
+    min-width: 120px;
+    flex-shrink: 0;
+}
+
+.geo-item span {
+    color: #6c757d;
+    font-size: 0.85rem;
+    line-height: 1.3;
+}
+
+.location-types {
+    background: #f8f9fa;
+    border: 1px solid #e9ecef;
+    border-radius: 8px;
+    padding: 1rem;
+    margin-top: 1rem;
+}
+
+.location-types h5 {
+    margin: 0 0 0.75rem 0;
+    color: #495057;
+    font-size: 0.9rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.type-examples {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+.type-category {
+    padding: 0.75rem;
+    background: white;
+    border-radius: 6px;
+    border: 1px solid #e9ecef;
+}
+
+.type-category strong {
+    display: block;
+    color: #495057;
+    font-size: 0.9rem;
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+}
+
+.type-category ul {
+    margin: 0;
+    padding-left: 1.2rem;
+    list-style-type: disc;
+}
+
+.type-category li {
+    color: #6c757d;
+    font-size: 0.85rem;
+    line-height: 1.4;
+    margin-bottom: 0.25rem;
+    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
+    background: #f8f9fa;
+    padding: 0.2rem 0.4rem;
+    border-radius: 3px;
+}
+
+.action-btn.secondary {
+    background: #6c757d;
+    border-color: #6c757d;
+}
+
+.action-btn.secondary:hover {
+    background: #5a6268;
+    border-color: #545b62;
+    box-shadow: 0 2px 4px rgba(108, 117, 125, 0.2);
+}
+
+/* Theme compatibility for location */
+[data-theme="dark"] .location-suggestions,
+[data-theme="dark"] .location-info,
+[data-theme="dark"] .location-types {
+    background: #2a2a2a;
+    border-color: #444444;
+}
+
+[data-theme="dark"] .location-suggestions h5,
+[data-theme="dark"] .location-info h5,
+[data-theme="dark"] .location-info h6,
+[data-theme="dark"] .location-types h5 {
+    color: #e0e0e0;
+}
+
+[data-theme="dark"] .location-tag {
+    background: #1f1f1f;
+    border-color: #28a745;
+    color: #28a745;
+}
+
+[data-theme="dark"] .location-tag:hover {
+    background: #28a745;
+    color: white;
+}
+
+[data-theme="dark"] .geo-item,
+[data-theme="dark"] .type-category {
+    background: #1f1f1f;
+    border-color: #444444;
+}
+
+[data-theme="dark"] .geo-item strong,
+[data-theme="dark"] .type-category strong {
+    color: #e0e0e0;
+}
+
+[data-theme="dark"] .geo-item span {
+    color: #b0b0b0;
+}
+
+[data-theme="dark"] .type-category li {
+    color: #b0b0b0;
+    background: #2a2a2a;
+}
+
+[data-theme="dark"] .geo-section {
+    border-color: #444444;
+}
+
+/* Mobile adjustments for location tab */
+@media (max-width: 768px) {
+    .location-tags {
+        gap: 0.25rem;
+    }
+    
+    .location-tag {
+        padding: 0.3rem 0.6rem;
+        font-size: 0.75rem;
+    }
+    
+    .geo-item {
+        flex-direction: column;
+        gap: 0.25rem;
+    }
+    
+    .geo-item strong {
+        min-width: unset;
+    }
+    
+    .type-examples {
+        gap: 0.75rem;
+    }
+    
+    .type-category {
+        padding: 0.5rem;
+    }
+    
+    .type-category li {
+        font-size: 0.8rem;
+    }
+}
+
+/* Reminders & Attachments Tab Styles */
+.reminder-types {
+    background: #f8f9fa;
+    border: 1px solid #e9ecef;
+    border-radius: 8px;
+    padding: 1rem;
+    margin-top: 1.5rem;
+}
+
+.reminder-types h5 {
+    margin: 0 0 0.75rem 0;
+    color: #495057;
+    font-size: 0.9rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.alarm-examples {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 0.75rem;
+    margin-bottom: 0.75rem;
+}
+
+.alarm-type {
+    padding: 0.75rem;
+    background: white;
+    border-radius: 6px;
+    border: 1px solid #e9ecef;
+    text-align: center;
+}
+
+.alarm-type strong {
+    display: block;
+    color: #495057;
+    font-size: 0.9rem;
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+}
+
+.alarm-type p {
+    color: #6c757d;
+    font-size: 0.8rem;
+    margin: 0;
+    line-height: 1.3;
+}
+
+.reminder-info {
+    background: #f8f9fa;
+    border: 1px solid #e9ecef;
+    border-radius: 8px;
+    padding: 1rem;
+    margin-top: 1rem;
+}
+
+.reminder-info h5,
+.reminder-info h6 {
+    margin: 0 0 0.75rem 0;
+    color: #495057;
+    font-size: 0.9rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.reminder-info h6 {
+    font-size: 0.8rem;
+    margin-top: 1rem;
+    margin-bottom: 0.5rem;
+}
+
+.attachments-section {
+    margin-top: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid #e9ecef;
+}
+
+.attachment-features {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin-top: 0.75rem;
+}
+
+.attachment-type {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.5rem;
+    padding: 0.5rem;
+    background: white;
+    border-radius: 6px;
+    border: 1px solid #e9ecef;
+}
+
+.attachment-type strong {
+    color: #495057;
+    font-size: 0.85rem;
+    font-weight: 600;
+    min-width: 120px;
+    flex-shrink: 0;
+}
+
+.attachment-type span {
+    color: #6c757d;
+    font-size: 0.85rem;
+    line-height: 1.3;
+}
+
+.reminder-patterns {
+    background: #f8f9fa;
+    border: 1px solid #e9ecef;
+    border-radius: 8px;
+    padding: 1rem;
+    margin-top: 1rem;
+}
+
+.reminder-patterns h5 {
+    margin: 0 0 0.75rem 0;
+    color: #495057;
+    font-size: 0.9rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.pattern-examples {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin-bottom: 0.75rem;
+}
+
+.pattern-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem;
+    background: white;
+    border-radius: 6px;
+    border: 1px solid #e9ecef;
+}
+
+.pattern-item strong {
+    color: #495057;
+    font-size: 0.85rem;
+    font-weight: 600;
+    min-width: 100px;
+    flex-shrink: 0;
+}
+
+.pattern-item span {
+    color: #6c757d;
+    font-size: 0.85rem;
+    line-height: 1.3;
+}
+
+.action-btn.tertiary {
+    background: #17a2b8;
+    border-color: #17a2b8;
+    color: white;
+}
+
+.action-btn.tertiary:hover {
+    background: #138496;
+    border-color: #117a8b;
+    box-shadow: 0 2px 4px rgba(23, 162, 184, 0.2);
+}
+
+.completion-status {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border-radius: 8px;
+    padding: 1.5rem;
+    margin-top: 2rem;
+    text-align: center;
+}
+
+.completion-status h5 {
+    margin: 0 0 0.75rem 0;
+    font-size: 1.1rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.completion-status p {
+    margin: 0 0 1rem 0;
+    opacity: 0.9;
+    line-height: 1.5;
+}
+
+.feature-summary {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 6px;
+    padding: 1rem;
+    margin-top: 1rem;
+}
+
+.summary-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.5rem 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.summary-row:last-child {
+    border-bottom: none;
+}
+
+.tab-name {
+    font-weight: 600;
+    font-size: 0.9rem;
+}
+
+.tab-desc {
+    font-size: 0.8rem;
+    opacity: 0.8;
+    text-align: right;
+    max-width: 60%;
+}
+
+/* Theme compatibility for reminders */
+[data-theme="dark"] .reminder-types,
+[data-theme="dark"] .reminder-info,
+[data-theme="dark"] .reminder-patterns {
+    background: #2a2a2a;
+    border-color: #444444;
+}
+
+[data-theme="dark"] .reminder-types h5,
+[data-theme="dark"] .reminder-info h5,
+[data-theme="dark"] .reminder-info h6,
+[data-theme="dark"] .reminder-patterns h5 {
+    color: #e0e0e0;
+}
+
+[data-theme="dark"] .alarm-type,
+[data-theme="dark"] .attachment-type,
+[data-theme="dark"] .pattern-item {
+    background: #1f1f1f;
+    border-color: #444444;
+}
+
+[data-theme="dark"] .alarm-type strong,
+[data-theme="dark"] .attachment-type strong,
+[data-theme="dark"] .pattern-item strong {
+    color: #e0e0e0;
+}
+
+[data-theme="dark"] .alarm-type p,
+[data-theme="dark"] .attachment-type span,
+[data-theme="dark"] .pattern-item span {
+    color: #b0b0b0;
+}
+
+[data-theme="dark"] .attachments-section {
+    border-color: #444444;
+}
+
+/* Mobile adjustments for reminders tab */
+@media (max-width: 768px) {
+    .alarm-examples {
+        grid-template-columns: 1fr;
+        gap: 0.5rem;
+    }
+    
+    .alarm-type {
+        padding: 0.5rem;
+    }
+    
+    .attachment-type,
+    .pattern-item {
+        flex-direction: column;
+        gap: 0.25rem;
+        align-items: flex-start;
+    }
+    
+    .attachment-type strong,
+    .pattern-item strong {
+        min-width: unset;
+    }
+    
+    .summary-row {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.25rem;
+    }
+    
+    .tab-desc {
+        text-align: left;
+        max-width: 100%;
+    }
+    
+    .completion-status {
+        padding: 1rem;
+    }
+    
+    .completion-status h5 {
+        font-size: 1rem;
+    }
+}
+
+/* Theme Selector Styles */
+.theme-selector {
+    margin-bottom: 1rem;
+}
+
+.theme-selector-dropdown {
+    width: 100%;
+    padding: 0.5rem;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 6px;
+    color: white;
+    font-size: 0.85rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.theme-selector-dropdown:hover {
+    background: rgba(255, 255, 255, 0.15);
+    border-color: rgba(255, 255, 255, 0.3);
+}
+
+.theme-selector-dropdown:focus {
+    outline: none;
+    background: rgba(255, 255, 255, 0.2);
+    border-color: rgba(255, 255, 255, 0.4);
+}
+
+.theme-selector-dropdown option {
+    background: #333;
+    color: white;
+    padding: 0.5rem;
+}
+
+/* Theme Definitions */
+:root {
+    /* Default Theme */
+    --primary-gradient: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
+    --primary-bg: #f8f9fa;
+    --primary-text: #333;
+    --sidebar-bg: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
+    --sidebar-text: white;
+    --header-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    --header-text: white;
+    --card-bg: white;
+    --border-color: #e9ecef;
+    --accent-color: #667eea;
+    --calendar-bg: white;
+    --calendar-border: #f0f0f0;
+    --calendar-day-bg: white;
+    --calendar-day-hover: #f8f9ff;
+    --calendar-day-prev-next: #fafafa;
+    --calendar-day-prev-next-text: #ccc;
+    --calendar-today-bg: #e3f2fd;
+    --calendar-today-border: #2196f3;
+    --calendar-today-text: #1976d2;
+    --calendar-selected-bg: #e8f5e8;
+    --calendar-selected-border: #4caf50;
+    --calendar-selected-text: #2e7d32;
+    --calendar-has-events-bg: #fff3e0;
+    --weekday-header-bg: #f8f9fa;
+    --weekday-header-text: #666;
+    --time-label-bg: #f8f9fa;
+    --time-label-text: #666;
+    --time-label-border: #e9ecef;
+    --event-colors: #3B82F6, #10B981, #F59E0B, #EF4444, #8B5CF6, #06B6D4, #84CC16, #F97316, #EC4899, #6366F1, #14B8A6, #F3B806, #8B5A2B, #6B7280, #DC2626, #7C3AED;
+}
+
+/* Ocean Theme */
+[data-theme="ocean"] {
+    --primary-gradient: linear-gradient(180deg, #2196F3 0%, #0277BD 100%);
+    --primary-bg: #e3f2fd;
+    --primary-text: #0d47a1;
+    --sidebar-bg: linear-gradient(180deg, #2196F3 0%, #0277BD 100%);
+    --sidebar-text: white;
+    --header-bg: linear-gradient(135deg, #2196F3 0%, #0277BD 100%);
+    --header-text: white;
+    --card-bg: #ffffff;
+    --border-color: #bbdefb;
+    --accent-color: #2196F3;
+    --calendar-bg: #ffffff;
+    --calendar-border: #bbdefb;
+    --calendar-day-bg: #ffffff;
+    --calendar-day-hover: #e1f5fe;
+    --calendar-day-prev-next: #f3f8ff;
+    --calendar-day-prev-next-text: #90caf9;
+    --calendar-today-bg: #b3e5fc;
+    --calendar-today-border: #0277BD;
+    --calendar-today-text: #01579b;
+    --calendar-selected-bg: #e0f7fa;
+    --calendar-selected-border: #00acc1;
+    --calendar-selected-text: #00695c;
+    --calendar-has-events-bg: #fff8e1;
+    --weekday-header-bg: #e3f2fd;
+    --weekday-header-text: #0d47a1;
+    --time-label-bg: #e3f2fd;
+    --time-label-text: #0d47a1;
+    --time-label-border: #bbdefb;
+    --event-colors: #2196F3, #03DAC6, #FF9800, #F44336, #9C27B0, #00BCD4, #8BC34A, #FF5722, #E91E63, #3F51B5, #009688, #FFC107, #607D8B, #795548, #E53935, #673AB7;
+}
+
+[data-theme="ocean"] body {
+    background-color: var(--primary-bg);
+    color: var(--primary-text);
+}
+
+[data-theme="ocean"] .app-sidebar {
+    background: var(--sidebar-bg);
+}
+
+/* Forest Theme */
+[data-theme="forest"] {
+    --primary-gradient: linear-gradient(180deg, #4CAF50 0%, #2E7D32 100%);
+    --primary-bg: #e8f5e8;
+    --primary-text: #1b5e20;
+    --sidebar-bg: linear-gradient(180deg, #4CAF50 0%, #2E7D32 100%);
+    --sidebar-text: white;
+    --header-bg: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
+    --header-text: white;
+    --card-bg: #ffffff;
+    --border-color: #c8e6c9;
+    --accent-color: #4CAF50;
+    --calendar-bg: #ffffff;
+    --calendar-border: #c8e6c9;
+    --calendar-day-bg: #ffffff;
+    --calendar-day-hover: #f1f8e9;
+    --calendar-day-prev-next: #f9fbe7;
+    --calendar-day-prev-next-text: #a5d6a7;
+    --calendar-today-bg: #c8e6c9;
+    --calendar-today-border: #2E7D32;
+    --calendar-today-text: #1b5e20;
+    --calendar-selected-bg: #e8f5e8;
+    --calendar-selected-border: #388e3c;
+    --calendar-selected-text: #2e7d32;
+    --calendar-has-events-bg: #fff3e0;
+    --weekday-header-bg: #e8f5e8;
+    --weekday-header-text: #1b5e20;
+    --time-label-bg: #e8f5e8;
+    --time-label-text: #1b5e20;
+    --time-label-border: #c8e6c9;
+    --event-colors: #4CAF50, #8BC34A, #FF9800, #FF5722, #9C27B0, #03DAC6, #CDDC39, #FF6F00, #E91E63, #3F51B5, #009688, #FFC107, #795548, #607D8B, #F44336, #673AB7;
+}
+
+[data-theme="forest"] body {
+    background-color: var(--primary-bg);
+    color: var(--primary-text);
+}
+
+[data-theme="forest"] .app-sidebar {
+    background: var(--sidebar-bg);
+}
+
+/* Sunset Theme */
+[data-theme="sunset"] {
+    --primary-gradient: linear-gradient(180deg, #FF9800 0%, #F57C00 100%);
+    --primary-bg: #fff3e0;
+    --primary-text: #e65100;
+    --sidebar-bg: linear-gradient(180deg, #FF9800 0%, #F57C00 100%);
+    --sidebar-text: white;
+    --header-bg: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
+    --header-text: white;
+    --card-bg: #ffffff;
+    --border-color: #ffcc02;
+    --accent-color: #FF9800;
+    --calendar-bg: #ffffff;
+    --calendar-border: #ffe0b2;
+    --calendar-day-bg: #ffffff;
+    --calendar-day-hover: #fff8e1;
+    --calendar-day-prev-next: #fffde7;
+    --calendar-day-prev-next-text: #ffcc02;
+    --calendar-today-bg: #ffe0b2;
+    --calendar-today-border: #F57C00;
+    --calendar-today-text: #e65100;
+    --calendar-selected-bg: #fff3e0;
+    --calendar-selected-border: #ff8f00;
+    --calendar-selected-text: #ff6f00;
+    --calendar-has-events-bg: #f3e5f5;
+    --weekday-header-bg: #fff3e0;
+    --weekday-header-text: #e65100;
+    --time-label-bg: #fff3e0;
+    --time-label-text: #e65100;
+    --time-label-border: #ffe0b2;
+    --event-colors: #FF9800, #FF5722, #F44336, #E91E63, #9C27B0, #673AB7, #3F51B5, #2196F3, #03DAC6, #009688, #4CAF50, #8BC34A, #CDDC39, #FFC107, #FF6F00, #795548;
+}
+
+[data-theme="sunset"] body {
+    background-color: var(--primary-bg);
+    color: var(--primary-text);
+}
+
+[data-theme="sunset"] .app-sidebar {
+    background: var(--sidebar-bg);
+}
+
+/* Purple Theme */
+[data-theme="purple"] {
+    --primary-gradient: linear-gradient(180deg, #9C27B0 0%, #6A1B9A 100%);
+    --primary-bg: #f3e5f5;
+    --primary-text: #4a148c;
+    --sidebar-bg: linear-gradient(180deg, #9C27B0 0%, #6A1B9A 100%);
+    --sidebar-text: white;
+    --header-bg: linear-gradient(135deg, #9C27B0 0%, #6A1B9A 100%);
+    --header-text: white;
+    --card-bg: #ffffff;
+    --border-color: #ce93d8;
+    --accent-color: #9C27B0;
+    --calendar-bg: #ffffff;
+    --calendar-border: #ce93d8;
+    --calendar-day-bg: #ffffff;
+    --calendar-day-hover: #f8e9fc;
+    --calendar-day-prev-next: #fce4ec;
+    --calendar-day-prev-next-text: #ce93d8;
+    --calendar-today-bg: #e1bee7;
+    --calendar-today-border: #6A1B9A;
+    --calendar-today-text: #4a148c;
+    --calendar-selected-bg: #f3e5f5;
+    --calendar-selected-border: #8e24aa;
+    --calendar-selected-text: #6a1b9a;
+    --calendar-has-events-bg: #fff3e0;
+    --weekday-header-bg: #f3e5f5;
+    --weekday-header-text: #4a148c;
+    --time-label-bg: #f3e5f5;
+    --time-label-text: #4a148c;
+    --time-label-border: #ce93d8;
+    --event-colors: #9C27B0, #673AB7, #3F51B5, #2196F3, #03DAC6, #009688, #4CAF50, #8BC34A, #CDDC39, #FFC107, #FF9800, #FF5722, #F44336, #E91E63, #795548, #607D8B;
+}
+
+[data-theme="purple"] body {
+    background-color: var(--primary-bg);
+    color: var(--primary-text);
+}
+
+[data-theme="purple"] .app-sidebar {
+    background: var(--sidebar-bg);
+}
+
+/* Dark Theme */
+[data-theme="dark"] {
+    --primary-gradient: linear-gradient(180deg, #424242 0%, #212121 100%);
+    --primary-bg: #121212;
+    --primary-text: #ffffff;
+    --sidebar-bg: linear-gradient(180deg, #424242 0%, #212121 100%);
+    --sidebar-text: white;
+    --header-bg: linear-gradient(135deg, #424242 0%, #212121 100%);
+    --header-text: white;
+    --card-bg: #1e1e1e;
+    --border-color: #333333;
+    --accent-color: #666666;
+    --calendar-bg: #1f1f1f;
+    --calendar-border: #333333;
+    --calendar-day-bg: #1f1f1f;
+    --calendar-day-hover: #2a2a2a;
+    --calendar-day-prev-next: #1a1a1a;
+    --calendar-day-prev-next-text: #555;
+    --calendar-today-bg: #2d2d2d;
+    --calendar-today-border: #bb86fc;
+    --calendar-today-text: #bb86fc;
+    --calendar-selected-bg: #2a2a2a;
+    --calendar-selected-border: #bb86fc;
+    --calendar-selected-text: #bb86fc;
+    --calendar-has-events-bg: #272727;
+    --weekday-header-bg: #1a1a1a;
+    --weekday-header-text: #e0e0e0;
+    --time-label-bg: #1a1a1a;
+    --time-label-text: #e0e0e0;
+    --time-label-border: #333333;
+    --event-colors: #bb86fc, #03dac6, #cf6679, #ff9800, #4caf50, #2196f3, #9c27b0, #f44336, #795548, #607d8b, #e91e63, #3f51b5, #009688, #8bc34a, #ffc107, #ff5722;
+}
+
+[data-theme="dark"] body {
+    background-color: var(--primary-bg);
+    color: var(--primary-text);
+}
+
+[data-theme="dark"] .app-sidebar {
+    background: var(--sidebar-bg);
+}
+
+[data-theme="dark"] .app-main {
+    background-color: var(--primary-bg);
+}
+
+[data-theme="dark"] .calendar-day {
+    background: var(--card-bg);
+    border-color: var(--border-color);
+    color: var(--primary-text);
+}
+
+/* Rose Theme */
+[data-theme="rose"] {
+    --primary-gradient: linear-gradient(180deg, #E91E63 0%, #AD1457 100%);
+    --primary-bg: #fce4ec;
+    --primary-text: #880e4f;
+    --sidebar-bg: linear-gradient(180deg, #E91E63 0%, #AD1457 100%);
+    --sidebar-text: white;
+    --header-bg: linear-gradient(135deg, #E91E63 0%, #AD1457 100%);
+    --header-text: white;
+    --card-bg: #ffffff;
+    --border-color: #f8bbd9;
+    --accent-color: #E91E63;
+    --calendar-bg: #ffffff;
+    --calendar-border: #f8bbd9;
+    --calendar-day-bg: #ffffff;
+    --calendar-day-hover: #fdf2f8;
+    --calendar-day-prev-next: #fef7ff;
+    --calendar-day-prev-next-text: #f8bbd9;
+    --calendar-today-bg: #f48fb1;
+    --calendar-today-border: #AD1457;
+    --calendar-today-text: #880e4f;
+    --calendar-selected-bg: #fce4ec;
+    --calendar-selected-border: #c2185b;
+    --calendar-selected-text: #ad1457;
+    --calendar-has-events-bg: #fff3e0;
+    --weekday-header-bg: #fce4ec;
+    --weekday-header-text: #880e4f;
+    --time-label-bg: #fce4ec;
+    --time-label-text: #880e4f;
+    --time-label-border: #f8bbd9;
+    --event-colors: #E91E63, #9C27B0, #673AB7, #3F51B5, #2196F3, #03DAC6, #009688, #4CAF50, #8BC34A, #CDDC39, #FFC107, #FF9800, #FF5722, #F44336, #795548, #607D8B;
+}
+
+[data-theme="rose"] body {
+    background-color: var(--primary-bg);
+    color: var(--primary-text);
+}
+
+[data-theme="rose"] .app-sidebar {
+    background: var(--sidebar-bg);
+}
+
+/* Mint Theme */
+[data-theme="mint"] {
+    --primary-gradient: linear-gradient(180deg, #26A69A 0%, #00695C 100%);
+    --primary-bg: #e0f2f1;
+    --primary-text: #004d40;
+    --sidebar-bg: linear-gradient(180deg, #26A69A 0%, #00695C 100%);
+    --sidebar-text: white;
+    --header-bg: linear-gradient(135deg, #26A69A 0%, #00695C 100%);
+    --header-text: white;
+    --card-bg: #ffffff;
+    --border-color: #b2dfdb;
+    --accent-color: #26A69A;
+    --calendar-bg: #ffffff;
+    --calendar-border: #b2dfdb;
+    --calendar-day-bg: #ffffff;
+    --calendar-day-hover: #f0fdfc;
+    --calendar-day-prev-next: #f7ffff;
+    --calendar-day-prev-next-text: #b2dfdb;
+    --calendar-today-bg: #b2dfdb;
+    --calendar-today-border: #00695C;
+    --calendar-today-text: #004d40;
+    --calendar-selected-bg: #e0f2f1;
+    --calendar-selected-border: #00897b;
+    --calendar-selected-text: #00695c;
+    --calendar-has-events-bg: #fff3e0;
+    --weekday-header-bg: #e0f2f1;
+    --weekday-header-text: #004d40;
+    --time-label-bg: #e0f2f1;
+    --time-label-text: #004d40;
+    --time-label-border: #b2dfdb;
+    --event-colors: #26A69A, #009688, #4CAF50, #8BC34A, #CDDC39, #FFC107, #FF9800, #FF5722, #F44336, #E91E63, #9C27B0, #673AB7, #3F51B5, #2196F3, #795548, #607D8B;
+}
+
+[data-theme="mint"] body {
+    background-color: var(--primary-bg);
+    color: var(--primary-text);
+}
+
+[data-theme="mint"] .app-sidebar {
+    background: var(--sidebar-bg);
+}
+
+/* Recurrence Options Styling */
+.recurrence-options {
+    margin-top: 1.5rem;
+    padding: 1rem;
+    background: #f8f9fa;
+    border: 1px solid #e9ecef;
+    border-radius: 8px;
+}
+
+.interval-input {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.interval-input input {
+    width: 80px;
+    flex-shrink: 0;
+}
+
+.interval-unit {
+    color: #6c757d;
+    font-size: 0.9rem;
+}
+
+.end-options {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.end-option {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.end-option .radio-label {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    margin-right: 0.5rem;
+    white-space: nowrap;
+    cursor: pointer;
+}
+
+.end-option input[type="date"],
+.end-option input[type="number"] {
+    width: 120px;
+}
+
+.count-input {
+    width: 80px !important;
+}
+
+.count-unit {
+    color: #6c757d;
+    font-size: 0.9rem;
+}
+
+.monthly-options {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.monthly-option {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.monthly-option .radio-label {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    margin-right: 0.5rem;
+    white-space: nowrap;
+    cursor: pointer;
+}
+
+.day-input {
+    width: 80px !important;
+}
+
+.yearly-months {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 0.5rem;
+    margin-top: 0.5rem;
+}
+
+.month-checkbox {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.25rem 0.5rem;
+    border: 1px solid #e9ecef;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.month-checkbox:hover {
+    background-color: #f8f9fa;
+    border-color: #ced4da;
+}
+
+.month-checkbox input[type="checkbox"] {
+    width: auto !important;
+    margin: 0 !important;
+}
+
+.month-label {
+    font-size: 0.9rem;
+    user-select: none;
+}
+
+/* Radio button styling */
+.radio-label input[type="radio"] {
+    width: auto !important;
+    margin: 0 !important;
+    margin-right: 0.25rem !important;
+}
+
+/* Mobile responsive adjustments */
+@media (max-width: 768px) {
+    .end-options {
+        gap: 0.5rem;
+    }
+    
+    .end-option {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.25rem;
+    }
+    
+    .monthly-option {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.25rem;
+    }
+    
+    .yearly-months {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
diff --git a/frontend/styles/google.css b/frontend/styles/google.css
new file mode 100644
index 0000000..9b24d54
--- /dev/null
+++ b/frontend/styles/google.css
@@ -0,0 +1,645 @@
+/* Google Calendar-inspired styles */
+
+/* Override CSS Variables for Google Calendar Style */
+:root {
+    /* Google-style spacing */
+    --spacing-xs: 2px;
+    --spacing-sm: 4px;
+    --spacing-md: 8px;
+    --spacing-lg: 12px;
+    --spacing-xl: 16px;
+    
+    /* Google-style borders and radius */
+    --border-radius-small: 2px;
+    --border-radius-medium: 4px;
+    --border-radius-large: 8px;
+    --border-light: 1px solid #dadce0;
+    --border-medium: 1px solid #dadce0;
+    
+    /* Google-style shadows */
+    --shadow-sm: 0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
+    --shadow-md: 0 1px 3px 0 rgba(60,64,67,.3), 0 4px 8px 3px rgba(60,64,67,.15);
+    --shadow-lg: 0 4px 6px 0 rgba(60,64,67,.3), 0 8px 25px 5px rgba(60,64,67,.15);
+}
+
+/* Google-style sidebar - override all theme variants */
+body .app-sidebar,
+[data-theme] .app-sidebar,
+[data-theme="default"] .app-sidebar,
+[data-theme="ocean"] .app-sidebar,
+[data-theme="forest"] .app-sidebar,
+[data-theme="sunset"] .app-sidebar,
+[data-theme="purple"] .app-sidebar,
+[data-theme="dark"] .app-sidebar,
+[data-theme="rose"] .app-sidebar,
+[data-theme="mint"] .app-sidebar {
+    background: #ffffff !important;
+    border-right: 1px solid #dadce0 !important;
+    font-family: 'Google Sans', 'Roboto', sans-serif !important;
+    box-shadow: 2px 0 8px rgba(60,64,67,.1) !important;
+}
+
+body .sidebar-header,
+[data-theme] .sidebar-header {
+    background: transparent !important;
+    border-bottom: 1px solid #dadce0 !important;
+}
+
+body .sidebar-header h1,
+[data-theme] .sidebar-header h1 {
+    font-size: 20px !important;
+    font-weight: 500 !important;
+    color: #3c4043 !important;
+    font-family: 'Google Sans', 'Roboto', sans-serif !important;
+}
+
+body .user-info,
+[data-theme] .user-info {
+    color: #3c4043 !important;
+}
+
+body .user-info .username,
+[data-theme] .user-info .username {
+    font-weight: 500 !important;
+    color: #3c4043 !important;
+}
+
+body .user-info .server-url,
+[data-theme] .user-info .server-url {
+    color: #5f6368 !important;
+}
+
+/* Google-style buttons */
+.create-calendar-button {
+    background: #1a73e8 !important;
+    color: white !important;
+    border: none !important;
+    border-radius: 4px !important;
+    padding: 8px 16px !important;
+    font-weight: 500 !important;
+    font-size: 14px !important;
+    cursor: pointer !important;
+    box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15) !important;
+    transition: box-shadow 0.2s ease !important;
+}
+
+.create-calendar-button:hover {
+    box-shadow: 0 1px 3px 0 rgba(60,64,67,.3), 0 4px 8px 3px rgba(60,64,67,.15) !important;
+}
+
+.logout-button {
+    background: transparent !important;
+    color: #1a73e8 !important;
+    border: 1px solid #dadce0 !important;
+    border-radius: 4px !important;
+    padding: 8px 16px !important;
+    font-weight: 500 !important;
+    font-size: 14px !important;
+    cursor: pointer !important;
+    transition: background-color 0.2s ease !important;
+}
+
+.logout-button:hover {
+    background: #f8f9fa !important;
+}
+
+/* Google-style navigation and sidebar text */
+body .sidebar-nav .nav-link,
+[data-theme] .sidebar-nav .nav-link {
+    color: #3c4043 !important;
+    text-decoration: none !important;
+}
+
+body .sidebar-nav .nav-link:hover,
+[data-theme] .sidebar-nav .nav-link:hover {
+    color: #1a73e8 !important;
+    background: #f1f3f4 !important;
+}
+
+/* Calendar list styling */
+body .calendar-list h3,
+[data-theme] .calendar-list h3 {
+    color: #3c4043 !important;
+}
+
+body .calendar-list .calendar-name,
+[data-theme] .calendar-list .calendar-name {
+    color: #3c4043 !important;
+}
+
+body .no-calendars,
+[data-theme] .no-calendars {
+    color: #5f6368 !important;
+}
+
+/* Form labels and text */
+body .sidebar-footer label,
+[data-theme] .sidebar-footer label,
+body .view-selector label,
+[data-theme] .view-selector label,
+body .theme-selector label,
+[data-theme] .theme-selector label,
+body .style-selector label,
+[data-theme] .style-selector label {
+    color: #3c4043 !important;
+}
+
+/* Google-style selectors */
+body .view-selector-dropdown,
+body .theme-selector-dropdown,
+body .style-selector-dropdown,
+[data-theme] .view-selector-dropdown,
+[data-theme] .theme-selector-dropdown,
+[data-theme] .style-selector-dropdown {
+    border: 1px solid #dadce0 !important;
+    border-radius: 4px !important;
+    padding: 8px !important;
+    font-size: 14px !important;
+    color: #3c4043 !important;
+    background: white !important;
+    font-family: inherit !important;
+}
+
+.view-selector-dropdown:focus,
+.theme-selector-dropdown:focus,
+.style-selector-dropdown:focus {
+    outline: none;
+    border-color: #1a73e8;
+    box-shadow: 0 0 0 2px rgba(26,115,232,.2);
+}
+
+/* Google-style calendar list items */
+.calendar-list h3 {
+    font-size: 14px;
+    font-weight: 500;
+    color: #3c4043;
+    margin-bottom: 8px;
+}
+
+.calendar-list ul {
+    list-style: none;
+}
+
+.calendar-list .calendar-item {
+    padding: 4px 0;
+    border-radius: 4px;
+    transition: background-color 0.15s ease;
+}
+
+.calendar-list .calendar-item:hover {
+    background-color: #f1f3f4;
+}
+
+.calendar-list .calendar-name {
+    color: #3c4043;
+    font-size: 14px;
+    font-weight: 400;
+}
+
+/* Google-style main content area */
+body .app-main,
+[data-theme] .app-main {
+    background: #ffffff !important;
+    font-family: 'Google Sans', 'Roboto', sans-serif !important;
+    color: #3c4043 !important;
+}
+
+/* Calendar header elements */
+body .calendar-header,
+[data-theme] .calendar-header {
+    background: #f8f9fa !important;
+    color: #3c4043 !important;
+}
+
+body .calendar-header h2,
+body .calendar-header h3,
+body .month-header,
+body .week-header,
+[data-theme] .calendar-header h2,
+[data-theme] .calendar-header h3,
+[data-theme] .month-header,
+[data-theme] .week-header {
+    color: #3c4043 !important;
+    font-family: 'Google Sans', 'Roboto', sans-serif !important;
+}
+
+/* Month name and title - aggressive override */
+body h1,
+body h2, 
+body h3,
+body .month-title,
+body .calendar-title,
+body .current-month,
+body .month-year,
+body .header-title,
+[data-theme] h1,
+[data-theme] h2,
+[data-theme] h3,
+[data-theme] .month-title,
+[data-theme] .calendar-title,
+[data-theme] .current-month,
+[data-theme] .month-year,
+[data-theme] .header-title {
+    color: #3c4043 !important;
+    font-family: 'Google Sans', 'Roboto', sans-serif !important;
+}
+
+/* Navigation arrows and buttons - aggressive override */
+body button,
+body .nav-button,
+body .calendar-nav-button,
+body .prev-button,
+body .next-button,
+body .arrow-button,
+body .navigation-arrow,
+body [class*="arrow"],
+body [class*="nav"],
+body [class*="button"],
+[data-theme] button,
+[data-theme] .nav-button,
+[data-theme] .calendar-nav-button,
+[data-theme] .prev-button,
+[data-theme] .next-button,
+[data-theme] .arrow-button,
+[data-theme] .navigation-arrow,
+[data-theme] [class*="arrow"],
+[data-theme] [class*="nav"],
+[data-theme] [class*="button"] {
+    color: #3c4043 !important;
+    background: #f8f9fa !important;
+    border: 1px solid #dadce0 !important;
+    border-radius: 4px !important;
+}
+
+body button:hover,
+body .nav-button:hover,
+body .calendar-nav-button:hover,
+body .prev-button:hover,
+body .next-button:hover,
+body .arrow-button:hover,
+[data-theme] button:hover,
+[data-theme] .nav-button:hover,
+[data-theme] .calendar-nav-button:hover,
+[data-theme] .prev-button:hover,
+[data-theme] .next-button:hover,
+[data-theme] .arrow-button:hover {
+    background: #e8f0fe !important;
+    color: #1a73e8 !important;
+    border-color: #1a73e8 !important;
+}
+
+/* Calendar controls and date display */
+body .calendar-controls,
+body .current-date,
+body .date-display,
+[data-theme] .calendar-controls,
+[data-theme] .current-date,
+[data-theme] .date-display {
+    color: #3c4043 !important;
+}
+
+/* Ultimate nuclear approach - override EVERYTHING */
+html body .app-main,
+html body .app-main *,
+html body .main-content,
+html body .main-content *,
+html body .calendar-container,
+html body .calendar-container *,
+html [data-theme] .app-main,
+html [data-theme] .app-main *,
+html [data-theme] .main-content,
+html [data-theme] .main-content *,
+html [data-theme] .calendar-container,
+html [data-theme] .calendar-container *,
+html [data-theme="default"] .app-main *,
+html [data-theme="ocean"] .app-main *,
+html [data-theme="forest"] .app-main *,
+html [data-theme="sunset"] .app-main *,
+html [data-theme="purple"] .app-main *,
+html [data-theme="dark"] .app-main *,
+html [data-theme="rose"] .app-main *,
+html [data-theme="mint"] .app-main * {
+    color: #3c4043 !important;
+    text-shadow: none !important;
+}
+
+/* Force all text elements */
+html body .app-main h1,
+html body .app-main h2,
+html body .app-main h3,
+html body .app-main h4,
+html body .app-main h5,
+html body .app-main h6,
+html body .app-main p,
+html body .app-main span,
+html body .app-main div,
+html body .app-main button,
+html [data-theme] .app-main h1,
+html [data-theme] .app-main h2,
+html [data-theme] .app-main h3,
+html [data-theme] .app-main h4,
+html [data-theme] .app-main h5,
+html [data-theme] .app-main h6,
+html [data-theme] .app-main p,
+html [data-theme] .app-main span,
+html [data-theme] .app-main div,
+html [data-theme] .app-main button {
+    color: #3c4043 !important;
+}
+
+/* Exception for buttons - make them stand out */
+body .app-main button,
+body .main-content button,
+[data-theme] .app-main button,
+[data-theme] .main-content button {
+    color: #3c4043 !important;
+    background: #f8f9fa !important;
+    border: 1px solid #dadce0 !important;
+}
+
+/* Google-style calendar grid - more aggressive styling */
+html body .calendar-grid,
+html [data-theme] .calendar-grid,
+body .calendar-container,
+[data-theme] .calendar-container {
+    border: 1px solid #dadce0 !important;
+    border-radius: 8px !important;
+    overflow: hidden !important;
+    background: white !important;
+    box-shadow: 0 1px 3px 0 rgba(60,64,67,.3), 0 4px 8px 3px rgba(60,64,67,.15) !important;
+    font-family: 'Google Sans', 'Roboto', sans-serif !important;
+}
+
+html body .calendar-header,
+html [data-theme] .calendar-header {
+    background: #f8f9fa !important;
+    border-bottom: 1px solid #dadce0 !important;
+    padding: 16px !important;
+}
+
+html body .month-header,
+html body .week-header,
+html [data-theme] .month-header,
+html [data-theme] .week-header {
+    font-size: 22px !important;
+    font-weight: 400 !important;
+    color: #3c4043 !important;
+    font-family: 'Google Sans', 'Roboto', sans-serif !important;
+}
+
+/* Google-style calendar cells - complete overhaul */
+html body .calendar-day,
+html [data-theme] .calendar-day,
+body .day-cell,
+[data-theme] .day-cell {
+    border: 1px solid #e8eaed !important;
+    background: white !important;
+    transition: background-color 0.15s ease !important;
+    padding: 8px !important;
+    min-height: 120px !important;
+    position: relative !important;
+}
+
+html body .calendar-day:hover,
+html [data-theme] .calendar-day:hover,
+body .day-cell:hover,
+[data-theme] .day-cell:hover {
+    background: #f8f9fa !important;
+    box-shadow: inset 0 0 0 1px #dadce0 !important;
+}
+
+html body .calendar-day.today,
+html [data-theme] .calendar-day.today,
+body .day-cell.today,
+[data-theme] .day-cell.today {
+    background: #e8f0fe !important;
+    border-color: #1a73e8 !important;
+}
+
+html body .calendar-day.other-month,
+html [data-theme] .calendar-day.other-month,
+body .day-cell.other-month,
+[data-theme] .day-cell.other-month {
+    background: #fafafa !important;
+    color: #9aa0a6 !important;
+}
+
+html body .day-number,
+html [data-theme] .day-number,
+body .date-number,
+[data-theme] .date-number {
+    font-size: 14px !important;
+    font-weight: 500 !important;
+    color: #3c4043 !important;
+    margin-bottom: 4px !important;
+    font-family: 'Google Sans', 'Roboto', sans-serif !important;
+}
+
+/* Day headers (Mon, Tue, Wed, etc.) */
+html body .day-header,
+html [data-theme] .day-header,
+body .weekday-header,
+[data-theme] .weekday-header {
+    background: #f8f9fa !important;
+    color: #5f6368 !important;
+    font-size: 12px !important;
+    font-weight: 500 !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.8px !important;
+    padding: 8px !important;
+    border-bottom: 1px solid #dadce0 !important;
+    font-family: 'Google Sans', 'Roboto', sans-serif !important;
+}
+
+/* Google Calendar-style events - complete redesign */
+html body .app-main .event,
+html [data-theme] .app-main .event,
+html body .calendar-container .event,
+html [data-theme] .calendar-container .event,
+body .event,
+[data-theme] .event {
+    border-radius: 4px !important;
+    padding: 2px 8px !important;
+    font-size: 11px !important;
+    font-weight: 400 !important;
+    margin: 1px 0 2px 0 !important;
+    cursor: pointer !important;
+    border: none !important;
+    color: white !important;
+    font-family: 'Google Sans', 'Roboto', sans-serif !important;
+    box-shadow: 0 1px 3px rgba(60,64,67,.3) !important;
+    transition: transform 0.1s ease, box-shadow 0.1s ease !important;
+    display: block !important;
+    text-overflow: ellipsis !important;
+    overflow: hidden !important;
+    white-space: nowrap !important;
+    line-height: 1.3 !important;
+}
+
+html body .app-main .event *,
+html [data-theme] .app-main .event *,
+html body .calendar-container .event *,
+html [data-theme] .calendar-container .event *,
+body .event *,
+[data-theme] .event * {
+    color: white !important;
+    font-family: inherit !important;
+}
+
+html body .app-main .event:hover,
+html [data-theme] .app-main .event:hover,
+body .event:hover,
+[data-theme] .event:hover {
+    transform: translateY(-1px) !important;
+    box-shadow: 0 2px 8px rgba(60,64,67,.4) !important;
+}
+
+/* All-day events styling */
+html body .event.all-day,
+html [data-theme] .event.all-day {
+    border-radius: 12px !important;
+    padding: 4px 12px !important;
+    font-weight: 500 !important;
+    margin: 2px 0 !important;
+}
+
+/* Event time display */
+html body .event-time,
+html [data-theme] .event-time {
+    opacity: 0.9 !important;
+    font-size: 10px !important;
+    margin-right: 4px !important;
+}
+
+/* Week view events */
+html body .week-view .event,
+html [data-theme] .week-view .event {
+    border-left: 3px solid rgba(255,255,255,0.8) !important;
+    border-radius: 0 4px 4px 0 !important;
+    padding-left: 6px !important;
+}
+
+/* Calendar table structure */
+html body .calendar-table,
+html [data-theme] .calendar-table,
+body table,
+[data-theme] table {
+    border-collapse: separate !important;
+    border-spacing: 0 !important;
+    width: 100% !important;
+    background: white !important;
+}
+
+html body .calendar-table td,
+html [data-theme] .calendar-table td,
+body table td,
+[data-theme] table td {
+    vertical-align: top !important;
+    border: 1px solid #e8eaed !important;
+    background: white !important;
+}
+
+/* Month/Week view toggle */
+html body .view-toggle,
+html [data-theme] .view-toggle {
+    display: flex !important;
+    gap: 4px !important;
+    background: #f1f3f4 !important;
+    border-radius: 6px !important;
+    padding: 2px !important;
+}
+
+html body .view-toggle button,
+html [data-theme] .view-toggle button {
+    padding: 6px 12px !important;
+    border: none !important;
+    background: transparent !important;
+    color: #5f6368 !important;
+    border-radius: 4px !important;
+    font-size: 13px !important;
+    font-weight: 500 !important;
+    cursor: pointer !important;
+    transition: all 0.15s ease !important;
+}
+
+html body .view-toggle button.active,
+html [data-theme] .view-toggle button.active {
+    background: white !important;
+    color: #1a73e8 !important;
+    box-shadow: 0 1px 3px rgba(60,64,67,.3) !important;
+}
+
+/* Today button */
+html body .today-button,
+html [data-theme] .today-button {
+    background: white !important;
+    border: 1px solid #dadce0 !important;
+    color: #1a73e8 !important;
+    padding: 8px 16px !important;
+    border-radius: 4px !important;
+    font-weight: 500 !important;
+    font-size: 14px !important;
+    cursor: pointer !important;
+    transition: all 0.15s ease !important;
+}
+
+html body .today-button:hover,
+html [data-theme] .today-button:hover {
+    background: #f8f9fa !important;
+    border-color: #1a73e8 !important;
+}
+
+/* Google-style modals */
+.modal-overlay {
+    background: rgba(0, 0, 0, 0.5);
+}
+
+.modal-content {
+    background: white;
+    border-radius: 8px;
+    box-shadow: var(--shadow-lg);
+    border: none;
+}
+
+.modal h2 {
+    font-size: 20px;
+    font-weight: 500;
+    color: #3c4043;
+    font-family: 'Google Sans', sans-serif;
+}
+
+/* Google-style form inputs */
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="url"],
+input[type="date"],
+input[type="time"],
+textarea,
+select {
+    border: 1px solid #dadce0;
+    border-radius: 4px;
+    padding: 8px 12px;
+    font-size: 14px;
+    color: #3c4043;
+    background: white;
+    font-family: inherit;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+    outline: none;
+    border-color: #1a73e8;
+    box-shadow: 0 0 0 2px rgba(26,115,232,.2);
+}
+
+/* Google-style labels */
+label {
+    font-size: 14px;
+    font-weight: 500;
+    color: #3c4043;
+    margin-bottom: 4px;
+    display: block;
+}
\ No newline at end of file