diff --git a/frontend/index.html b/frontend/index.html
index 0bef8ec..f579be5 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -8,6 +8,7 @@
     <link data-trunk rel="css" href="styles.css">
     <link data-trunk rel="css" href="print-preview.css">
     <link data-trunk rel="copy-file" href="styles/google.css">
+    <link data-trunk rel="copy-file" href="styles/apple.css">
     <link data-trunk rel="copy-file" href="service-worker.js">
     <link data-trunk rel="icon" href="favicon.ico">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
diff --git a/frontend/src/app.rs b/frontend/src/app.rs
index 780b7a9..8719fbf 100644
--- a/frontend/src/app.rs
+++ b/frontend/src/app.rs
@@ -497,6 +497,11 @@ pub fn App() -> Html {
             // Hot-swap stylesheet
             if let Some(window) = web_sys::window() {
                 if let Some(document) = window.document() {
+                    // Set data-style attribute on document root
+                    if let Some(root) = document.document_element() {
+                        let _ = root.set_attribute("data-style", new_style.value());
+                    }
+
                     // Remove existing style link if it exists
                     if let Some(existing_link) = document.get_element_by_id("dynamic-style") {
                         existing_link.remove();
@@ -544,6 +549,11 @@ pub fn App() -> Html {
             let style = (*current_style).clone();
             if let Some(window) = web_sys::window() {
                 if let Some(document) = window.document() {
+                    // Set data-style attribute on document root
+                    if let Some(root) = document.document_element() {
+                        let _ = root.set_attribute("data-style", style.value());
+                    }
+
                     // 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") {
diff --git a/frontend/src/components/sidebar.rs b/frontend/src/components/sidebar.rs
index 825dc14..d6d75f5 100644
--- a/frontend/src/components/sidebar.rs
+++ b/frontend/src/components/sidebar.rs
@@ -20,12 +20,17 @@ pub enum Theme {
     Dark,
     Rose,
     Mint,
+    Midnight,
+    Charcoal,
+    Nord,
+    Dracula,
 }
 
 #[derive(Clone, PartialEq)]
 pub enum Style {
     Default,
     Google,
+    Apple,
 }
 
 impl Theme {
@@ -39,6 +44,10 @@ impl Theme {
             Theme::Dark => "dark",
             Theme::Rose => "rose",
             Theme::Mint => "mint",
+            Theme::Midnight => "midnight",
+            Theme::Charcoal => "charcoal",
+            Theme::Nord => "nord",
+            Theme::Dracula => "dracula",
         }
     }
 
@@ -51,6 +60,10 @@ impl Theme {
             "dark" => Theme::Dark,
             "rose" => Theme::Rose,
             "mint" => Theme::Mint,
+            "midnight" => Theme::Midnight,
+            "charcoal" => Theme::Charcoal,
+            "nord" => Theme::Nord,
+            "dracula" => Theme::Dracula,
             _ => Theme::Default,
         }
     }
@@ -61,12 +74,14 @@ impl Style {
         match self {
             Style::Default => "default",
             Style::Google => "google",
+            Style::Apple => "apple",
         }
     }
 
     pub fn from_value(value: &str) -> Self {
         match value {
             "google" => Style::Google,
+            "apple" => Style::Apple,
             _ => Style::Default,
         }
     }
@@ -76,6 +91,7 @@ impl Style {
         match self {
             Style::Default => None, // No additional stylesheet needed - uses base styles.css
             Style::Google => Some("google.css"), // Trunk copies to root level
+            Style::Apple => Some("apple.css"), // Trunk copies to root level
         }
     }
 }
@@ -426,6 +442,10 @@ pub fn sidebar(props: &SidebarProps) -> Html {
                         <option value="dark" selected={matches!(props.current_theme, Theme::Dark)}>{"Dark"}</option>
                         <option value="rose" selected={matches!(props.current_theme, Theme::Rose)}>{"Rose"}</option>
                         <option value="mint" selected={matches!(props.current_theme, Theme::Mint)}>{"Mint"}</option>
+                        <option value="midnight" selected={matches!(props.current_theme, Theme::Midnight)}>{"Midnight"}</option>
+                        <option value="charcoal" selected={matches!(props.current_theme, Theme::Charcoal)}>{"Charcoal"}</option>
+                        <option value="nord" selected={matches!(props.current_theme, Theme::Nord)}>{"Nord"}</option>
+                        <option value="dracula" selected={matches!(props.current_theme, Theme::Dracula)}>{"Dracula"}</option>
                     </select>
                 </div>
 
@@ -433,6 +453,7 @@ pub fn sidebar(props: &SidebarProps) -> Html {
                     <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>
+                        <option value="apple" selected={matches!(props.current_style, Style::Apple)}>{"Apple Calendar"}</option>
                     </select>
                 </div>
 
diff --git a/frontend/styles.css b/frontend/styles.css
index f010a66..dd66928 100644
--- a/frontend/styles.css
+++ b/frontend/styles.css
@@ -196,6 +196,26 @@ input, select, textarea, button {
 [data-theme="mint"] {
     --primary-color: #10b981;
     --primary-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
+}
+
+[data-theme="midnight"] {
+    --primary-color: #4c9aff;
+    --primary-gradient: linear-gradient(135deg, #0f1419 0%, #151b26 100%);
+}
+
+[data-theme="charcoal"] {
+    --primary-color: #4ade80;
+    --primary-gradient: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
+}
+
+[data-theme="nord"] {
+    --primary-color: #88c0d0;
+    --primary-gradient: linear-gradient(135deg, #2e3440 0%, #3b4252 100%);
+}
+
+[data-theme="dracula"] {
+    --primary-color: #bd93f9;
+    --primary-gradient: linear-gradient(135deg, #282a36 0%, #44475a 100%);
 }* {
     margin: 0;
     padding: 0;
@@ -469,13 +489,13 @@ body {
     display: block;
     margin-bottom: 0.5rem;
     font-weight: 500;
-    color: #555;
+    color: var(--text-secondary);
 }
 
 .form-group input {
     width: 100%;
     padding: var(--control-padding);
-    border: 1px solid #ddd;
+    border: 1px solid var(--input-border);
     border-radius: 4px;
     font-size: 1rem;
     transition: border-color 0.2s;
@@ -483,12 +503,12 @@ body {
 
 .form-group input:focus {
     outline: none;
-    border-color: #667eea;
+    border-color: var(--input-border-focus);
     box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
 }
 
 .form-group input:disabled {
-    background-color: #f5f5f5;
+    background-color: var(--background-tertiary);
     cursor: not-allowed;
 }
 
@@ -594,8 +614,8 @@ body {
 }
 
 .error-message {
-    background-color: #f8d7da;
-    color: #721c24;
+    background-color: var(--error-color);
+    color: var(--text-inverse);
     padding: var(--control-padding);
     border-radius: 4px;
     margin-bottom: 1rem;
@@ -1384,7 +1404,7 @@ body {
 .calendar-management-modal .modal-header {
     padding: 2rem 2.5rem 0;
     border-bottom: none;
-    background: white;
+    background: var(--modal-header-background);
 }
 
 .calendar-management-modal .modal-body {
@@ -1425,9 +1445,9 @@ body {
 }
 
 .tab-button.active {
-    background: white;
-    color: #2563eb;
-    box-shadow: inset 0 -2px 0 #2563eb,
+    background: var(--modal-background);
+    color: var(--primary-color);
+    box-shadow: inset 0 -2px 0 var(--primary-color),
                 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
@@ -1666,7 +1686,8 @@ body {
 }
 
 .modal-content {
-    background: white;
+    background: var(--modal-background);
+    color: var(--modal-text);
     border-radius: 6px;
     box-shadow: 0 24px 48px rgba(0, 0, 0, 0.12), 
                 0 8px 16px rgba(0, 0, 0, 0.08),
@@ -1695,13 +1716,13 @@ body {
     align-items: center;
     justify-content: space-between;
     padding: 2rem 2.5rem;
-    border-bottom: 1px solid #e5e7eb;
-    background: #fafafa;
+    border-bottom: 1px solid var(--modal-header-border);
+    background: var(--modal-header-background);
 }
 
 .modal-header h3 {
     margin: 0;
-    color: #333;
+    color: var(--modal-text);
     font-size: 1.4rem;
     font-weight: 600;
 }
@@ -1710,7 +1731,7 @@ body {
     background: none;
     border: none;
     font-size: 1.8rem;
-    color: #999;
+    color: var(--text-secondary);
     cursor: pointer;
     padding: 0;
     width: 30px;
@@ -1724,8 +1745,8 @@ body {
 }
 
 .modal-close:hover {
-    background: #f8f9fa;
-    color: #666;
+    background: var(--background-tertiary);
+    color: var(--text-primary);
     transform: scale(1.1);
 }
 
@@ -1742,7 +1763,7 @@ body {
 }
 
 .event-detail strong {
-    color: #555;
+    color: var(--text-secondary);
     font-weight: 600;
     font-size: 0.9rem;
     text-transform: uppercase;
@@ -1750,7 +1771,7 @@ body {
 }
 
 .event-detail span {
-    color: #333;
+    color: var(--text-primary);
     font-size: 1rem;
     line-height: 1.5;
     word-break: break-word;
@@ -1839,7 +1860,7 @@ body {
 }
 
 .create-calendar-modal {
-    background: white;
+    background: var(--modal-background);
     border-radius: 12px;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
     max-width: 500px;
@@ -1865,12 +1886,12 @@ body {
     align-items: center;
     justify-content: space-between;
     padding: 2rem 2rem 1rem;
-    border-bottom: 1px solid #e9ecef;
+    border-bottom: 1px solid var(--modal-header-border);
 }
 
 .create-calendar-modal .modal-header h2 {
     margin: 0;
-    color: #495057;
+    color: var(--modal-text);
     font-size: 1.5rem;
     font-weight: 600;
 }
@@ -1879,7 +1900,7 @@ body {
     background: none;
     border: none;
     font-size: 1.5rem;
-    color: #6c757d;
+    color: var(--text-secondary);
     cursor: pointer;
     padding: 0.25rem;
     line-height: 1;
@@ -1888,8 +1909,8 @@ body {
 }
 
 .close-button:hover {
-    color: #495057;
-    background: #f8f9fa;
+    color: var(--text-primary);
+    background: var(--background-tertiary);
 }
 
 .create-calendar-modal .modal-body {
@@ -1903,7 +1924,7 @@ body {
 .form-group label {
     display: block;
     margin-bottom: 0.4rem;
-    color: #374151;
+    color: var(--text-primary);
     font-weight: 600;
     font-size: 0.95rem;
 }
@@ -1912,9 +1933,11 @@ body {
 .form-group textarea {
     width: 100%;
     padding: 1rem;
-    border: 1px solid #d1d5db;
+    border: 1px solid var(--input-border);
     border-radius: 4px;
     font-size: 0.95rem;
+    background: var(--input-background);
+    color: var(--input-text);
     transition: border-color 0.2s ease, box-shadow 0.2s ease;
     font-family: inherit;
     line-height: 1.5;
@@ -1923,14 +1946,14 @@ body {
 .form-group input:focus,
 .form-group textarea:focus {
     outline: none;
-    border-color: #2563eb;
+    border-color: var(--input-border-focus);
     box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
 }
 
 .form-group input:disabled,
 .form-group textarea:disabled {
-    background-color: #f8f9fa;
-    color: #6c757d;
+    background-color: var(--background-tertiary);
+    color: var(--text-secondary);
     cursor: not-allowed;
 }
 
@@ -1975,7 +1998,7 @@ body {
 
 .color-help-text {
     font-size: 0.8rem;
-    color: #6c757d;
+    color: var(--text-secondary);
     margin-top: 0.5rem;
     margin-bottom: 0;
 }
@@ -1986,7 +2009,7 @@ body {
     gap: 1rem;
     margin-top: 2rem;
     padding-top: 1.5rem;
-    border-top: 1px solid #e9ecef;
+    border-top: 1px solid var(--border-primary);
 }
 
 .cancel-button,
@@ -2003,27 +2026,28 @@ body {
 }
 
 .cancel-button {
-    background: #f8f9fa;
-    color: #374151;
-    border: 1px solid #d1d5db;
+    background: var(--background-secondary);
+    color: var(--text-primary);
+    border: 1px solid var(--border-primary);
 }
 
 .cancel-button:hover:not(:disabled) {
-    background: #f3f4f6;
-    color: #111827;
-    border-color: #9ca3af;
+    background: var(--background-tertiary);
+    color: var(--text-primary);
+    border-color: var(--border-secondary);
     transform: translateY(-1px);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
 }
 
 .create-button {
-    background: #2563eb;
-    color: white;
+    background: var(--button-primary-bg);
+    color: var(--button-primary-text);
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
 .create-button:hover:not(:disabled) {
-    background: #1d4ed8;
+    background: var(--button-primary-bg);
+    filter: brightness(0.9);
     transform: translateY(-1px);
     box-shadow: 0 8px 16px rgba(37, 99, 235, 0.2),
                 0 4px 8px rgba(0, 0, 0, 0.08);
@@ -2037,20 +2061,21 @@ body {
 }
 
 .error-message {
-    background: #f8d7da;
-    color: #721c24;
+    background: var(--error-color);
+    color: var(--text-inverse);
     padding: var(--control-padding) 1rem;
-    border: 1px solid #f5c6cb;
+    border: 1px solid var(--error-color);
     border-radius: 6px;
     margin-bottom: 1rem;
     font-size: 0.9rem;
+    opacity: 0.9;
 }
 
 
 /* Context Menu */
 .context-menu {
-    background: white;
-    border: 1px solid rgba(0, 0, 0, 0.08);
+    background: var(--modal-background);
+    border: 1px solid var(--border-primary);
     border-radius: 12px;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 
                 0 4px 8px rgba(0, 0, 0, 0.08),
@@ -2150,7 +2175,7 @@ body {
 .create-event-modal .form-group label {
     display: block;
     margin-bottom: 0.5rem;
-    color: #495057;
+    color: var(--text-secondary);
     font-weight: 500;
     font-size: 0.9rem;
 }
@@ -2218,20 +2243,20 @@ body {
 }
 
 .btn-secondary {
-    background: #f8f9fa;
-    color: #6c757d;
-    border: 1px solid #ced4da;
+    background: var(--button-secondary-bg);
+    color: var(--button-secondary-text);
+    border: 1px solid var(--input-border);
 }
 
 .btn-secondary:hover:not(:disabled) {
-    background: #e9ecef;
-    color: #495057;
-    border-color: #adb5bd;
+    background: var(--background-tertiary);
+    color: var(--text-primary);
+    border-color: var(--border-secondary);
 }
 
 .btn-primary {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    color: white;
+    background: var(--button-primary-bg);
+    color: var(--button-primary-text);
     border: 1px solid transparent;
 }
 
@@ -2303,9 +2328,9 @@ body {
 }
 
 .recurring-option {
-    background: white;
-    border: 2px solid #e9ecef;
-    color: #495057;
+    background: var(--input-background);
+    border: 2px solid var(--border-primary);
+    color: var(--text-secondary);
     padding: 1rem;
     text-align: left;
     border-radius: var(--border-radius-medium);
@@ -2404,7 +2429,7 @@ body {
 /* Form Help Text and Advanced Info Styles */
 .form-help-text {
     font-size: 0.8rem;
-    color: #6c757d;
+    color: var(--text-secondary);
     margin-top: 0.25rem;
     margin-bottom: 0;
     line-height: 1.4;
@@ -2463,7 +2488,7 @@ body {
 }
 
 [data-theme="dark"] .advanced-info .form-help-text {
-    border-color: #444444;
+    border-color: var(--border-primary);
 }
 
 /* People Tab Styles */
@@ -2602,9 +2627,9 @@ body {
 }
 
 .category-tag {
-    background: white;
-    border: 1px solid #667eea;
-    color: #667eea;
+    background: var(--input-background);
+    border: 1px solid var(--primary-color);
+    color: var(--primary-color);
     padding: 0.4rem 0.8rem;
     border-radius: 20px;
     font-size: 0.8rem;
@@ -2793,9 +2818,9 @@ body {
 }
 
 .location-tag {
-    background: white;
-    border: 1px solid #28a745;
-    color: #28a745;
+    background: var(--input-background);
+    border: 1px solid var(--success-color);
+    color: var(--success-color);
     padding: 0.4rem 0.8rem;
     border-radius: 20px;
     font-size: 0.8rem;
@@ -2898,9 +2923,9 @@ body {
 
 .type-category {
     padding: var(--control-padding);
-    background: white;
+    background: var(--input-background);
     border-radius: 6px;
-    border: 1px solid #e9ecef;
+    border: 1px solid var(--border-primary);
 }
 
 .type-category strong {
@@ -3017,9 +3042,9 @@ body {
 
 .alarm-type {
     padding: var(--control-padding);
-    background: white;
+    background: var(--input-background);
     border-radius: 6px;
-    border: 1px solid #e9ecef;
+    border: 1px solid var(--border-primary);
     text-align: center;
 }
 
@@ -3678,6 +3703,302 @@ body {
     background: var(--sidebar-bg);
 }
 
+/* Midnight Theme - Deep blue-black with blue accents */
+[data-theme="midnight"] {
+    --primary-gradient: linear-gradient(180deg, #0f1419 0%, #151b26 100%);
+    --primary-bg: #0a0e13;
+    --primary-text: #e6e6e6;
+    --sidebar-bg: linear-gradient(180deg, #1a1f2e 0%, #252b3a 100%);
+    --sidebar-text: #e6e6e6;
+    --header-bg: linear-gradient(135deg, #1a1f2e 0%, #252b3a 100%);
+    --header-text: #e6e6e6;
+    --card-bg: #151b26;
+    --border-color: #2d3648;
+    --accent-color: #4c9aff;
+    --calendar-bg: #151b26;
+    --calendar-border: #2d3648;
+    --calendar-border-light: #1f2937;
+    --calendar-day-bg: #151b26;
+    --calendar-day-hover: #1f2937;
+    --calendar-day-prev-next: #0f1419;
+    --calendar-day-prev-next-text: #4a5568;
+    --calendar-today-bg: #1e3a8a;
+    --calendar-today-border: #4c9aff;
+    --calendar-today-text: #93c5fd;
+    --calendar-selected-bg: #1f2937;
+    --calendar-selected-border: #4c9aff;
+    --calendar-selected-text: #93c5fd;
+    --calendar-has-events-bg: #1a202c;
+    --weekday-header-bg: #0f1419;
+    --weekday-header-text: #a0aec0;
+    --time-label-bg: #0f1419;
+    --time-label-text: #a0aec0;
+    --time-label-border: #2d3648;
+    --event-colors: #4c9aff, #00d4aa, #ffa726, #ff5722, #ab47bc, #26c6da, #66bb6a, #ef5350, #ec407a, #7e57c2, #42a5f5, #ffca28, #78909c, #8d6e63, #ff7043, #5c6bc0;
+    
+    /* Dark Theme CSS Variables */
+    --background-primary: #0a0e13;
+    --background-secondary: #151b26;
+    --background-tertiary: #1f2937;
+    --text-primary: #e6e6e6;
+    --text-secondary: #a0aec0;
+    --text-inverse: #0a0e13;
+    --border-primary: #2d3648;
+    --border-secondary: #374151;
+    --border-light: #4a5568;
+    --modal-background: #151b26;
+    --modal-text: #e6e6e6;
+    --modal-header-background: #151b26;
+    --modal-header-border: #2d3648;
+    --button-primary-bg: #4c9aff;
+    --button-primary-text: #ffffff;
+    --input-background: #1f2937;
+    --input-border: #374151;
+    --input-border-focus: #4c9aff;
+    --input-text: #e6e6e6;
+}
+
+[data-theme="midnight"] body {
+    background-color: var(--primary-bg);
+    color: var(--primary-text);
+}
+
+[data-theme="midnight"] .app-sidebar {
+    background: var(--sidebar-bg);
+}
+
+[data-theme="midnight"] .app-main {
+    background-color: var(--primary-bg);
+}
+
+[data-theme="midnight"] .calendar-day {
+    background: var(--card-bg);
+    border-color: var(--border-color);
+    color: var(--primary-text);
+}
+
+/* Charcoal Theme - Pure dark grays with subtle colored accents */
+[data-theme="charcoal"] {
+    --primary-gradient: linear-gradient(180deg, #1a1a1a 0%, #2a2a2a 100%);
+    --primary-bg: #0d0d0d;
+    --primary-text: #f0f0f0;
+    --sidebar-bg: linear-gradient(180deg, #262626 0%, #333333 100%);
+    --sidebar-text: #f0f0f0;
+    --header-bg: linear-gradient(135deg, #262626 0%, #333333 100%);
+    --header-text: #f0f0f0;
+    --card-bg: #1a1a1a;
+    --border-color: #404040;
+    --accent-color: #4ade80;
+    --calendar-bg: #1a1a1a;
+    --calendar-border: #404040;
+    --calendar-border-light: #262626;
+    --calendar-day-bg: #1a1a1a;
+    --calendar-day-hover: #262626;
+    --calendar-day-prev-next: #0d0d0d;
+    --calendar-day-prev-next-text: #595959;
+    --calendar-today-bg: #166534;
+    --calendar-today-border: #4ade80;
+    --calendar-today-text: #86efac;
+    --calendar-selected-bg: #262626;
+    --calendar-selected-border: #4ade80;
+    --calendar-selected-text: #86efac;
+    --calendar-has-events-bg: #1f1f1f;
+    --weekday-header-bg: #0d0d0d;
+    --weekday-header-text: #a6a6a6;
+    --time-label-bg: #0d0d0d;
+    --time-label-text: #a6a6a6;
+    --time-label-border: #404040;
+    --event-colors: #4ade80, #06b6d4, #a855f7, #f59e0b, #ef4444, #ec4899, #8b5cf6, #10b981, #3b82f6, #f97316, #84cc16, #6366f1, #14b8a6, #f43f5e, #64748b, #71717a;
+    
+    /* Dark Theme CSS Variables */
+    --background-primary: #0d0d0d;
+    --background-secondary: #1a1a1a;
+    --background-tertiary: #262626;
+    --text-primary: #f0f0f0;
+    --text-secondary: #a6a6a6;
+    --text-inverse: #0d0d0d;
+    --border-primary: #404040;
+    --border-secondary: #525252;
+    --border-light: #595959;
+    --modal-background: #1a1a1a;
+    --modal-text: #f0f0f0;
+    --modal-header-background: #1a1a1a;
+    --modal-header-border: #404040;
+    --button-primary-bg: #4ade80;
+    --button-primary-text: #0d0d0d;
+    --input-background: #262626;
+    --input-border: #404040;
+    --input-border-focus: #4ade80;
+    --input-text: #f0f0f0;
+}
+
+[data-theme="charcoal"] body {
+    background-color: var(--primary-bg);
+    color: var(--primary-text);
+}
+
+[data-theme="charcoal"] .app-sidebar {
+    background: var(--sidebar-bg);
+}
+
+[data-theme="charcoal"] .app-main {
+    background-color: var(--primary-bg);
+}
+
+[data-theme="charcoal"] .calendar-day {
+    background: var(--card-bg);
+    border-color: var(--border-color);
+    color: var(--primary-text);
+}
+
+/* Nord Theme - Nordic-inspired dark theme */
+[data-theme="nord"] {
+    --primary-gradient: linear-gradient(180deg, #2e3440 0%, #3b4252 100%);
+    --primary-bg: #2e3440;
+    --primary-text: #eceff4;
+    --sidebar-bg: linear-gradient(180deg, #434c5e 0%, #4c566a 100%);
+    --sidebar-text: #eceff4;
+    --header-bg: linear-gradient(135deg, #434c5e 0%, #4c566a 100%);
+    --header-text: #eceff4;
+    --card-bg: #3b4252;
+    --border-color: #4c566a;
+    --accent-color: #88c0d0;
+    --calendar-bg: #3b4252;
+    --calendar-border: #4c566a;
+    --calendar-border-light: #434c5e;
+    --calendar-day-bg: #3b4252;
+    --calendar-day-hover: #434c5e;
+    --calendar-day-prev-next: #2e3440;
+    --calendar-day-prev-next-text: #5e81ac;
+    --calendar-today-bg: #5e81ac;
+    --calendar-today-border: #88c0d0;
+    --calendar-today-text: #d8dee9;
+    --calendar-selected-bg: #434c5e;
+    --calendar-selected-border: #88c0d0;
+    --calendar-selected-text: #d8dee9;
+    --calendar-has-events-bg: #3b4252;
+    --weekday-header-bg: #2e3440;
+    --weekday-header-text: #d8dee9;
+    --time-label-bg: #2e3440;
+    --time-label-text: #d8dee9;
+    --time-label-border: #4c566a;
+    --event-colors: #88c0d0, #81a1c1, #5e81ac, #bf616a, #d08770, #ebcb8b, #a3be8c, #b48ead, #8fbcbb, #5e81ac, #88c0d0, #81a1c1, #bf616a, #d08770, #ebcb8b, #a3be8c;
+    
+    /* Dark Theme CSS Variables */
+    --background-primary: #2e3440;
+    --background-secondary: #3b4252;
+    --background-tertiary: #434c5e;
+    --text-primary: #eceff4;
+    --text-secondary: #d8dee9;
+    --text-inverse: #2e3440;
+    --border-primary: #4c566a;
+    --border-secondary: #5e81ac;
+    --border-light: #81a1c1;
+    --modal-background: #3b4252;
+    --modal-text: #eceff4;
+    --modal-header-background: #3b4252;
+    --modal-header-border: #4c566a;
+    --button-primary-bg: #88c0d0;
+    --button-primary-text: #2e3440;
+    --input-background: #434c5e;
+    --input-border: #4c566a;
+    --input-border-focus: #88c0d0;
+    --input-text: #eceff4;
+}
+
+[data-theme="nord"] body {
+    background-color: var(--primary-bg);
+    color: var(--primary-text);
+}
+
+[data-theme="nord"] .app-sidebar {
+    background: var(--sidebar-bg);
+}
+
+[data-theme="nord"] .app-main {
+    background-color: var(--primary-bg);
+}
+
+[data-theme="nord"] .calendar-day {
+    background: var(--card-bg);
+    border-color: var(--border-color);
+    color: var(--primary-text);
+}
+
+/* Dracula Theme - Popular developer dark theme */
+[data-theme="dracula"] {
+    --primary-gradient: linear-gradient(180deg, #282a36 0%, #44475a 100%);
+    --primary-bg: #282a36;
+    --primary-text: #f8f8f2;
+    --sidebar-bg: linear-gradient(180deg, #44475a 0%, #6272a4 100%);
+    --sidebar-text: #f8f8f2;
+    --header-bg: linear-gradient(135deg, #44475a 0%, #6272a4 100%);
+    --header-text: #f8f8f2;
+    --card-bg: #44475a;
+    --border-color: #6272a4;
+    --accent-color: #bd93f9;
+    --calendar-bg: #44475a;
+    --calendar-border: #6272a4;
+    --calendar-border-light: #6272a4;
+    --calendar-day-bg: #44475a;
+    --calendar-day-hover: #6272a4;
+    --calendar-day-prev-next: #282a36;
+    --calendar-day-prev-next-text: #6272a4;
+    --calendar-today-bg: #bd93f9;
+    --calendar-today-border: #ff79c6;
+    --calendar-today-text: #282a36;
+    --calendar-selected-bg: #6272a4;
+    --calendar-selected-border: #bd93f9;
+    --calendar-selected-text: #f8f8f2;
+    --calendar-has-events-bg: #44475a;
+    --weekday-header-bg: #282a36;
+    --weekday-header-text: #f8f8f2;
+    --time-label-bg: #282a36;
+    --time-label-text: #f8f8f2;
+    --time-label-border: #6272a4;
+    --event-colors: #bd93f9, #ff79c6, #8be9fd, #50fa7b, #ffb86c, #ff5555, #f1fa8c, #6272a4, #ff79c6, #bd93f9, #8be9fd, #50fa7b, #ffb86c, #ff5555, #f1fa8c, #6272a4;
+    
+    /* Dark Theme CSS Variables */
+    --background-primary: #282a36;
+    --background-secondary: #44475a;
+    --background-tertiary: #6272a4;
+    --text-primary: #f8f8f2;
+    --text-secondary: #f8f8f2;
+    --text-inverse: #282a36;
+    --border-primary: #6272a4;
+    --border-secondary: #bd93f9;
+    --border-light: #ff79c6;
+    --modal-background: #44475a;
+    --modal-text: #f8f8f2;
+    --modal-header-background: #44475a;
+    --modal-header-border: #6272a4;
+    --button-primary-bg: #bd93f9;
+    --button-primary-text: #282a36;
+    --input-background: #6272a4;
+    --input-border: #bd93f9;
+    --input-border-focus: #ff79c6;
+    --input-text: #f8f8f2;
+}
+
+[data-theme="dracula"] body {
+    background-color: var(--primary-bg);
+    color: var(--primary-text);
+}
+
+[data-theme="dracula"] .app-sidebar {
+    background: var(--sidebar-bg);
+}
+
+[data-theme="dracula"] .app-main {
+    background-color: var(--primary-bg);
+}
+
+[data-theme="dracula"] .calendar-day {
+    background: var(--card-bg);
+    border-color: var(--border-color);
+    color: var(--primary-text);
+}
+
 /* Recurrence Options Styling */
 .recurrence-options {
     margin-top: 1.5rem;
@@ -3812,7 +4133,7 @@ body {
 }
 
 .external-calendar-list h3 {
-    color: rgba(255, 255, 255, 0.9);
+    color: var(--text-primary);
     font-size: 0.9rem;
     font-weight: 600;
     margin-bottom: 1rem;
@@ -4029,7 +4350,7 @@ body {
 
 /* External Calendar Modal */
 .external-calendar-modal {
-    background: white;
+    background: var(--modal-background);
     border-radius: 12px;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
     max-width: 500px;
@@ -4044,12 +4365,12 @@ body {
     align-items: center;
     justify-content: space-between;
     padding: 2rem 2rem 1rem;
-    border-bottom: 1px solid #e9ecef;
+    border-bottom: 1px solid var(--modal-header-border);
 }
 
 .external-calendar-modal .modal-header h3 {
     margin: 0;
-    color: #495057;
+    color: var(--modal-text);
     font-size: 1.5rem;
     font-weight: 600;
     display: flex;
@@ -4080,8 +4401,8 @@ body {
 }
 
 .external-calendar-modal .modal-close:hover {
-    background: #f8f9fa;
-    color: #495057;
+    background: var(--background-tertiary);
+    color: var(--text-primary);
 }
 
 .external-calendar-modal .modal-body {
@@ -4096,7 +4417,7 @@ body {
     display: block;
     margin-bottom: 0.5rem;
     font-weight: 600;
-    color: #495057;
+    color: var(--modal-text);
     font-size: 0.9rem;
 }
 
@@ -4104,11 +4425,12 @@ body {
 .external-calendar-modal .form-group input[type="url"] {
     width: 100%;
     padding: var(--control-padding);
-    border: 1px solid #ced4da;
+    border: 1px solid var(--input-border);
     border-radius: var(--border-radius-medium);
     font-size: 0.9rem;
     transition: var(--standard-transition);
-    background: white;
+    background: var(--input-background);
+    color: var(--input-text);
 }
 
 .external-calendar-modal .form-group input[type="text"]:focus,
@@ -4122,7 +4444,7 @@ body {
     width: 80px;
     height: 40px;
     padding: 0;
-    border: 1px solid #ced4da;
+    border: 1px solid var(--input-border);
     border-radius: var(--border-radius-medium);
     cursor: pointer;
     background: none;
@@ -4132,7 +4454,7 @@ body {
     display: block;
     margin-top: 0.5rem;
     font-size: 0.8rem;
-    color: #6c757d;
+    color: var(--text-secondary);
     font-style: italic;
 }
 
@@ -4141,8 +4463,8 @@ body {
     gap: 1rem;
     justify-content: flex-end;
     padding: 1.5rem 2rem;
-    border-top: 1px solid #e9ecef;
-    background: #f8f9fa;
+    border-top: 1px solid var(--modal-header-border);
+    background: var(--modal-header-background);
     border-radius: 0 0 12px 12px;
 }
 
@@ -4158,12 +4480,13 @@ body {
 }
 
 .external-calendar-modal .btn-secondary {
-    background: #6c757d;
-    color: white;
+    background: var(--button-secondary-bg);
+    color: var(--button-secondary-text);
 }
 
 .external-calendar-modal .btn-secondary:hover:not(:disabled) {
-    background: #5a6268;
+    background: var(--button-secondary-bg);
+    filter: brightness(0.9);
     transform: translateY(-1px);
 }
 
@@ -4183,8 +4506,8 @@ body {
 }
 
 .external-calendar-modal .error-message {
-    background: #f8d7da;
-    color: #721c24;
+    background: var(--error-color);
+    color: var(--text-inverse);
     padding: var(--control-padding) 1rem;
     border-radius: var(--border-radius-medium);
     margin-bottom: 1rem;
diff --git a/frontend/styles/apple.css b/frontend/styles/apple.css
new file mode 100644
index 0000000..3f0f12a
--- /dev/null
+++ b/frontend/styles/apple.css
@@ -0,0 +1,691 @@
+/* Apple Calendar-inspired styles */
+
+/* Override CSS Variables for Apple Calendar Style */
+:root {
+    /* Apple-style spacing */
+    --spacing-xs: 4px;
+    --spacing-sm: 8px;
+    --spacing-md: 12px;
+    --spacing-lg: 16px;
+    --spacing-xl: 24px;
+    
+    /* Apple-style borders and radius */
+    --border-radius-small: 6px;
+    --border-radius-medium: 10px;
+    --border-radius-large: 16px;
+    
+    /* Apple-style shadows */
+    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+    --shadow-md: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.12);
+    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.10);
+}
+
+/* Theme-aware Apple style colors - use theme colors but with Apple aesthetic */
+[data-style="apple"] {
+    /* Use theme background and text colors */
+    --apple-bg-primary: var(--background-secondary);
+    --apple-bg-secondary: var(--background-primary);
+    --apple-text-primary: var(--text-primary);
+    --apple-text-secondary: var(--text-secondary);
+    --apple-text-tertiary: var(--text-secondary);
+    --apple-text-inverse: var(--text-inverse);
+    --apple-border-primary: var(--border-primary);
+    --apple-border-secondary: var(--border-secondary);
+    --apple-accent: var(--primary-color);
+    --apple-hover-bg: var(--background-tertiary);
+    --apple-today-accent: var(--primary-color);
+    
+    /* Apple font family */
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+}
+
+/* Theme-specific Apple style adjustments */
+[data-style="apple"][data-theme="default"] {
+    --apple-bg-tertiary: rgba(248, 249, 250, 0.8);
+    --apple-bg-sidebar: rgba(246, 246, 246, 0.7);
+    --apple-accent-bg: rgba(102, 126, 234, 0.1);
+    --apple-today-bg: rgba(102, 126, 234, 0.15);
+}
+
+[data-style="apple"][data-theme="ocean"] {
+    --apple-bg-tertiary: rgba(224, 247, 250, 0.8);
+    --apple-bg-sidebar: rgba(224, 247, 250, 0.7);
+    --apple-accent-bg: rgba(0, 105, 148, 0.1);
+    --apple-today-bg: rgba(0, 105, 148, 0.15);
+}
+
+[data-style="apple"][data-theme="forest"] {
+    --apple-bg-tertiary: rgba(232, 245, 232, 0.8);
+    --apple-bg-sidebar: rgba(232, 245, 232, 0.7);
+    --apple-accent-bg: rgba(6, 95, 70, 0.1);
+    --apple-today-bg: rgba(6, 95, 70, 0.15);
+}
+
+[data-style="apple"][data-theme="sunset"] {
+    --apple-bg-tertiary: rgba(255, 243, 224, 0.8);
+    --apple-bg-sidebar: rgba(255, 243, 224, 0.7);
+    --apple-accent-bg: rgba(234, 88, 12, 0.1);
+    --apple-today-bg: rgba(234, 88, 12, 0.15);
+}
+
+[data-style="apple"][data-theme="purple"] {
+    --apple-bg-tertiary: rgba(243, 229, 245, 0.8);
+    --apple-bg-sidebar: rgba(243, 229, 245, 0.7);
+    --apple-accent-bg: rgba(124, 58, 237, 0.1);
+    --apple-today-bg: rgba(124, 58, 237, 0.15);
+}
+
+[data-style="apple"][data-theme="dark"] {
+    --apple-bg-tertiary: rgba(31, 41, 55, 0.9);
+    --apple-bg-sidebar: rgba(44, 44, 46, 0.8);
+    --apple-accent-bg: rgba(55, 65, 81, 0.3);
+    --apple-today-bg: rgba(55, 65, 81, 0.4);
+}
+
+[data-style="apple"][data-theme="rose"] {
+    --apple-bg-tertiary: rgba(252, 228, 236, 0.8);
+    --apple-bg-sidebar: rgba(252, 228, 236, 0.7);
+    --apple-accent-bg: rgba(225, 29, 72, 0.1);
+    --apple-today-bg: rgba(225, 29, 72, 0.15);
+}
+
+[data-style="apple"][data-theme="mint"] {
+    --apple-bg-tertiary: rgba(224, 242, 241, 0.8);
+    --apple-bg-sidebar: rgba(224, 242, 241, 0.7);
+    --apple-accent-bg: rgba(16, 185, 129, 0.1);
+    --apple-today-bg: rgba(16, 185, 129, 0.15);
+}
+
+[data-style="apple"][data-theme="midnight"] {
+    --apple-bg-tertiary: rgba(21, 27, 38, 0.9);
+    --apple-bg-sidebar: rgba(21, 27, 38, 0.8);
+    --apple-accent-bg: rgba(76, 154, 255, 0.15);
+    --apple-today-bg: rgba(76, 154, 255, 0.2);
+}
+
+[data-style="apple"][data-theme="charcoal"] {
+    --apple-bg-tertiary: rgba(26, 26, 26, 0.9);
+    --apple-bg-sidebar: rgba(26, 26, 26, 0.8);
+    --apple-accent-bg: rgba(74, 222, 128, 0.15);
+    --apple-today-bg: rgba(74, 222, 128, 0.2);
+}
+
+[data-style="apple"][data-theme="nord"] {
+    --apple-bg-tertiary: rgba(59, 66, 82, 0.9);
+    --apple-bg-sidebar: rgba(59, 66, 82, 0.8);
+    --apple-accent-bg: rgba(136, 192, 208, 0.15);
+    --apple-today-bg: rgba(136, 192, 208, 0.2);
+}
+
+[data-style="apple"][data-theme="dracula"] {
+    --apple-bg-tertiary: rgba(68, 71, 90, 0.9);
+    --apple-bg-sidebar: rgba(68, 71, 90, 0.8);
+    --apple-accent-bg: rgba(189, 147, 249, 0.15);
+    --apple-today-bg: rgba(189, 147, 249, 0.2);
+}
+
+/* Apple-style body and base styles */
+[data-style="apple"] body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+    background: var(--apple-bg-secondary);
+    color: var(--apple-text-primary);
+    font-weight: 400;
+    line-height: 1.47;
+    letter-spacing: -0.022em;
+}
+
+/* Apple-style sidebar with glassmorphism */
+[data-style="apple"] .app-sidebar {
+    background: var(--apple-bg-sidebar);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border-right: 1px solid var(--apple-border-primary);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+    box-shadow: none;
+}
+
+[data-style="apple"] .sidebar-header {
+    background: transparent;
+    border-bottom: 1px solid var(--apple-border-primary);
+    padding: 20px 16px 16px 16px;
+}
+
+[data-style="apple"] .sidebar-header h1 {
+    font-size: 24px;
+    font-weight: 700;
+    color: var(--apple-text-primary);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+    letter-spacing: -0.04em;
+    margin-bottom: 4px;
+}
+
+[data-style="apple"] .user-info {
+    color: var(--apple-text-primary);
+    font-size: 15px;
+    line-height: 1.4;
+}
+
+[data-style="apple"] .user-info .username {
+    font-weight: 600;
+    color: var(--apple-text-primary);
+    font-size: 16px;
+}
+
+[data-style="apple"] .user-info .server-url {
+    color: var(--apple-text-secondary);
+    font-size: 13px;
+    font-weight: 400;
+}
+
+/* Apple-style buttons */
+[data-style="apple"] .create-calendar-button {
+    background: var(--apple-accent);
+    color: var(--apple-text-inverse);
+    border: none;
+    border-radius: 8px;
+    padding: 10px 16px;
+    font-weight: 600;
+    font-size: 15px;
+    cursor: pointer;
+    box-shadow: var(--shadow-sm);
+    transition: all 0.2s ease;
+    font-family: inherit;
+}
+
+[data-style="apple"] .create-calendar-button:hover {
+    transform: translateY(-1px);
+    box-shadow: var(--shadow-md);
+    background: var(--apple-accent);
+    filter: brightness(1.1);
+}
+
+[data-style="apple"] .logout-button {
+    background: var(--apple-bg-primary);
+    color: var(--apple-accent);
+    border: 1px solid var(--apple-border-primary);
+    border-radius: 8px;
+    padding: 8px 16px;
+    font-weight: 500;
+    font-size: 15px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-family: inherit;
+}
+
+[data-style="apple"] .logout-button:hover {
+    background: var(--apple-hover-bg);
+    transform: translateY(-1px);
+}
+
+/* Apple-style navigation */
+[data-style="apple"] .sidebar-nav .nav-link {
+    color: var(--apple-text-primary);
+    text-decoration: none;
+    padding: 8px 12px;
+    border-radius: 8px;
+    transition: all 0.2s ease;
+    display: block;
+    font-weight: 500;
+    font-size: 15px;
+}
+
+[data-style="apple"] .sidebar-nav .nav-link:hover {
+    color: var(--apple-accent);
+    background: var(--apple-hover-bg);
+    transform: translateX(2px);
+}
+
+/* Apple-style calendar list */
+[data-style="apple"] .calendar-list h3 {
+    color: var(--apple-text-primary);
+    font-size: 17px;
+    font-weight: 600;
+    letter-spacing: -0.024em;
+    margin-bottom: 12px;
+}
+
+[data-style="apple"] .calendar-list .calendar-name {
+    color: var(--apple-text-primary);
+    font-size: 15px;
+    font-weight: 500;
+}
+
+[data-style="apple"] .no-calendars {
+    color: var(--apple-text-secondary);
+    font-size: 14px;
+    font-style: italic;
+}
+
+/* Apple-style form elements */
+[data-style="apple"] .sidebar-footer label,
+[data-style="apple"] .view-selector label,
+[data-style="apple"] .theme-selector label,
+[data-style="apple"] .style-selector label {
+    color: var(--apple-text-primary);
+    font-size: 14px;
+    font-weight: 600;
+    margin-bottom: 6px;
+}
+
+[data-style="apple"] .view-selector-dropdown,
+[data-style="apple"] .theme-selector-dropdown,
+[data-style="apple"] .style-selector-dropdown {
+    border: 1px solid var(--apple-border-primary);
+    border-radius: 8px;
+    padding: 8px 12px;
+    font-size: 15px;
+    color: var(--apple-text-primary);
+    background: var(--apple-bg-primary);
+    font-family: inherit;
+    font-weight: 500;
+    transition: all 0.2s ease;
+}
+
+[data-style="apple"] .view-selector-dropdown:focus,
+[data-style="apple"] .theme-selector-dropdown:focus,
+[data-style="apple"] .style-selector-dropdown:focus {
+    outline: none;
+    border-color: var(--apple-accent);
+    box-shadow: 0 0 0 3px var(--apple-accent-bg);
+}
+
+/* Apple-style calendar list items */
+[data-style="apple"] .calendar-list .calendar-item {
+    padding: 6px 8px;
+    border-radius: 8px;
+    transition: all 0.2s ease;
+    margin-bottom: 2px;
+}
+
+[data-style="apple"] .calendar-list .calendar-item:hover {
+    background-color: var(--apple-hover-bg);
+    transform: translateX(2px);
+}
+
+/* Apple-style main content area */
+[data-style="apple"] .app-main {
+    background: var(--apple-bg-secondary);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+    color: var(--apple-text-primary);
+}
+
+/* Apple-style calendar header */
+[data-style="apple"] .calendar-header {
+    background: var(--apple-bg-primary);
+    color: var(--apple-text-primary);
+    padding: 20px 24px;
+    border-radius: 16px 16px 0 0;
+    box-shadow: var(--shadow-sm);
+}
+
+[data-style="apple"] .calendar-header h2,
+[data-style="apple"] .calendar-header h3,
+[data-style="apple"] .month-header,
+[data-style="apple"] .week-header {
+    color: var(--apple-text-primary);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+    font-weight: 700;
+    letter-spacing: -0.04em;
+}
+
+/* Apple-style headings */
+[data-style="apple"] h1,
+[data-style="apple"] h2, 
+[data-style="apple"] h3,
+[data-style="apple"] .month-title,
+[data-style="apple"] .calendar-title,
+[data-style="apple"] .current-month,
+[data-style="apple"] .month-year,
+[data-style="apple"] .header-title {
+    color: var(--apple-text-primary);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+    font-weight: 700;
+    letter-spacing: -0.04em;
+}
+
+/* Apple-style navigation buttons */
+[data-style="apple"] button,
+[data-style="apple"] .nav-button,
+[data-style="apple"] .calendar-nav-button,
+[data-style="apple"] .prev-button,
+[data-style="apple"] .next-button,
+[data-style="apple"] .arrow-button {
+    color: var(--apple-text-primary);
+    background: var(--apple-bg-primary);
+    border: 1px solid var(--apple-border-primary);
+    border-radius: 8px;
+    padding: 8px 12px;
+    font-weight: 600;
+    transition: all 0.2s ease;
+    font-family: inherit;
+}
+
+[data-style="apple"] button:hover,
+[data-style="apple"] .nav-button:hover,
+[data-style="apple"] .calendar-nav-button:hover,
+[data-style="apple"] .prev-button:hover,
+[data-style="apple"] .next-button:hover,
+[data-style="apple"] .arrow-button:hover {
+    background: var(--apple-accent-bg);
+    color: var(--apple-accent);
+    border-color: var(--apple-accent);
+    transform: translateY(-1px);
+    box-shadow: var(--shadow-sm);
+}
+
+/* Apple-style calendar controls */
+[data-style="apple"] .calendar-controls,
+[data-style="apple"] .current-date,
+[data-style="apple"] .date-display {
+    color: var(--apple-text-primary);
+    font-weight: 600;
+}
+
+/* Apple-style calendar grid */
+[data-style="apple"] .calendar-grid,
+[data-style="apple"] .calendar-container {
+    border: 1px solid var(--apple-border-primary);
+    border-radius: 16px;
+    overflow: hidden;
+    background: var(--apple-bg-primary);
+    box-shadow: var(--shadow-lg);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+    margin: 16px;
+}
+
+[data-style="apple"] .month-header,
+[data-style="apple"] .week-header {
+    font-size: 28px;
+    font-weight: 700;
+    color: var(--apple-text-primary);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+    letter-spacing: -0.04em;
+}
+
+/* Apple-style calendar cells */
+[data-style="apple"] .calendar-day,
+[data-style="apple"] .day-cell {
+    border: 1px solid var(--apple-border-secondary);
+    background: var(--apple-bg-primary);
+    transition: all 0.3s ease;
+    padding: 12px;
+    min-height: 120px;
+    position: relative;
+}
+
+[data-style="apple"] .calendar-day:hover,
+[data-style="apple"] .day-cell:hover {
+    background: var(--apple-hover-bg);
+    transform: scale(1.02);
+    box-shadow: var(--shadow-sm);
+    z-index: 10;
+}
+
+[data-style="apple"] .calendar-day.today,
+[data-style="apple"] .day-cell.today {
+    background: var(--apple-today-bg);
+    border-color: var(--apple-today-accent);
+    position: relative;
+}
+
+[data-style="apple"] .calendar-day.today::before,
+[data-style="apple"] .day-cell.today::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: var(--apple-today-accent);
+    border-radius: 2px 2px 0 0;
+}
+
+[data-style="apple"] .calendar-day.other-month,
+[data-style="apple"] .day-cell.other-month {
+    background: var(--apple-bg-secondary);
+    color: var(--apple-text-secondary);
+    opacity: 0.6;
+}
+
+[data-style="apple"] .day-number,
+[data-style="apple"] .date-number {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--apple-text-primary);
+    margin-bottom: 6px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+}
+
+/* Apple-style day headers */
+[data-style="apple"] .day-header,
+[data-style="apple"] .weekday-header {
+    background: var(--apple-bg-secondary);
+    color: var(--apple-text-secondary);
+    font-size: 13px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    padding: 12px;
+    border-bottom: 1px solid var(--apple-border-primary);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+}
+
+/* Apple Calendar-style events */
+[data-style="apple"] .event {
+    border-radius: 6px;
+    padding: 4px 8px;
+    font-size: 12px;
+    font-weight: 500;
+    margin: 2px 0;
+    cursor: pointer;
+    border: none;
+    color: white;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+    box-shadow: var(--shadow-sm);
+    transition: all 0.2s ease;
+    display: block;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    line-height: 1.3;
+    position: relative;
+}
+
+[data-style="apple"] .event::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 3px;
+    background: rgba(255, 255, 255, 0.8);
+    border-radius: 2px 0 0 2px;
+}
+
+[data-style="apple"] .event * {
+    color: white;
+    font-family: inherit;
+}
+
+[data-style="apple"] .event:hover {
+    transform: translateY(-1px) scale(1.02);
+    box-shadow: var(--shadow-md);
+}
+
+/* All-day events styling */
+[data-style="apple"] .event.all-day {
+    border-radius: 16px;
+    padding: 6px 12px;
+    font-weight: 600;
+    margin: 3px 0;
+    font-size: 13px;
+}
+
+[data-style="apple"] .event.all-day::before {
+    display: none;
+}
+
+/* Event time display */
+[data-style="apple"] .event-time {
+    opacity: 0.9;
+    font-size: 11px;
+    margin-right: 4px;
+    font-weight: 600;
+}
+
+/* Calendar table structure */
+[data-style="apple"] .calendar-table,
+[data-style="apple"] table {
+    border-collapse: separate;
+    border-spacing: 0;
+    width: 100%;
+    background: var(--apple-bg-primary);
+}
+
+[data-style="apple"] .calendar-table td,
+[data-style="apple"] table td {
+    vertical-align: top;
+    border: 1px solid var(--apple-border-secondary);
+    background: var(--apple-bg-primary);
+}
+
+/* Apple-style view toggle */
+[data-style="apple"] .view-toggle {
+    display: flex;
+    gap: 0;
+    background: var(--apple-bg-primary);
+    border-radius: 10px;
+    padding: 2px;
+    box-shadow: var(--shadow-sm);
+    border: 1px solid var(--apple-border-primary);
+}
+
+[data-style="apple"] .view-toggle button {
+    padding: 8px 16px;
+    border: none;
+    background: transparent;
+    color: var(--apple-text-secondary);
+    border-radius: 8px;
+    font-size: 15px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-family: inherit;
+}
+
+[data-style="apple"] .view-toggle button.active {
+    background: var(--apple-accent);
+    color: var(--apple-text-inverse);
+    box-shadow: var(--shadow-sm);
+    transform: scale(1.02);
+}
+
+/* Apple-style today button */
+[data-style="apple"] .today-button {
+    background: var(--apple-accent);
+    border: none;
+    color: var(--apple-text-inverse);
+    padding: 10px 16px;
+    border-radius: 10px;
+    font-weight: 600;
+    font-size: 15px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    box-shadow: var(--shadow-sm);
+    font-family: inherit;
+}
+
+[data-style="apple"] .today-button:hover {
+    transform: translateY(-1px);
+    box-shadow: var(--shadow-md);
+    filter: brightness(1.1);
+}
+
+/* Apple-style modals */
+[data-style="apple"] .modal-overlay {
+    background: rgba(0, 0, 0, 0.4);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+}
+
+[data-style="apple"] .modal-content {
+    background: var(--apple-bg-primary);
+    border-radius: 16px;
+    box-shadow: var(--shadow-lg);
+    border: 1px solid var(--apple-border-primary);
+    color: var(--apple-text-primary);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+}
+
+[data-style="apple"] .modal h2 {
+    font-size: 22px;
+    font-weight: 700;
+    color: var(--apple-text-primary);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+    letter-spacing: -0.04em;
+}
+
+/* Apple-style form inputs */
+[data-style="apple"] input[type="text"],
+[data-style="apple"] input[type="email"],
+[data-style="apple"] input[type="password"],
+[data-style="apple"] input[type="url"],
+[data-style="apple"] input[type="date"],
+[data-style="apple"] input[type="time"],
+[data-style="apple"] textarea,
+[data-style="apple"] select {
+    border: 1px solid var(--apple-border-primary);
+    border-radius: 8px;
+    padding: 10px 12px;
+    font-size: 15px;
+    color: var(--apple-text-primary);
+    background: var(--apple-bg-primary);
+    font-family: inherit;
+    font-weight: 500;
+    transition: all 0.2s ease;
+}
+
+[data-style="apple"] input:focus,
+[data-style="apple"] textarea:focus,
+[data-style="apple"] select:focus {
+    outline: none;
+    border-color: var(--apple-accent);
+    box-shadow: 0 0 0 3px var(--apple-accent-bg);
+    transform: scale(1.02);
+}
+
+/* Apple-style labels */
+[data-style="apple"] label {
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--apple-text-primary);
+    margin-bottom: 6px;
+    display: block;
+    letter-spacing: -0.01em;
+}
+
+/* Smooth animations and transitions */
+[data-style="apple"] * {
+    transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
+}
+
+/* Custom scrollbar for Apple style */
+[data-style="apple"] ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+[data-style="apple"] ::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+[data-style="apple"] ::-webkit-scrollbar-thumb {
+    background: var(--apple-text-secondary);
+    border-radius: 4px;
+    opacity: 0.3;
+}
+
+[data-style="apple"] ::-webkit-scrollbar-thumb:hover {
+    opacity: 0.6;
+}
\ No newline at end of file
diff --git a/frontend/styles/google.css b/frontend/styles/google.css
index 9b24d54..9d6a5c4 100644
--- a/frontend/styles/google.css
+++ b/frontend/styles/google.css
@@ -13,8 +13,6 @@
     --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);
@@ -22,624 +20,542 @@
     --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;
+/* Theme-aware Google style colors - use theme colors but with Google aesthetic */
+[data-style="google"] {
+    /* Use theme background and text colors */
+    --google-bg-primary: var(--background-secondary);
+    --google-bg-secondary: var(--background-primary);
+    --google-bg-tertiary: var(--background-tertiary);
+    --google-text-primary: var(--text-primary);
+    --google-text-secondary: var(--text-secondary);
+    --google-text-inverse: var(--text-inverse);
+    --google-border-primary: var(--border-primary);
+    --google-border-secondary: var(--border-secondary);
+    --google-accent: var(--primary-color);
+    --google-hover-bg: var(--background-tertiary);
+    
+    /* Google font family */
+    font-family: 'Google Sans', 'Roboto', sans-serif;
 }
 
-body .sidebar-header,
-[data-theme] .sidebar-header {
-    background: transparent !important;
-    border-bottom: 1px solid #dadce0 !important;
+/* Theme-specific accent backgrounds for Google style */
+[data-style="google"][data-theme="default"] {
+    --google-accent-bg: rgba(102, 126, 234, 0.1);
 }
 
-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;
+[data-style="google"][data-theme="ocean"] {
+    --google-accent-bg: rgba(0, 105, 148, 0.1);
 }
 
-body .user-info,
-[data-theme] .user-info {
-    color: #3c4043 !important;
+[data-style="google"][data-theme="forest"] {
+    --google-accent-bg: rgba(6, 95, 70, 0.1);
 }
 
-body .user-info .username,
-[data-theme] .user-info .username {
-    font-weight: 500 !important;
-    color: #3c4043 !important;
+[data-style="google"][data-theme="sunset"] {
+    --google-accent-bg: rgba(234, 88, 12, 0.1);
 }
 
-body .user-info .server-url,
-[data-theme] .user-info .server-url {
-    color: #5f6368 !important;
+[data-style="google"][data-theme="purple"] {
+    --google-accent-bg: rgba(124, 58, 237, 0.1);
+}
+
+[data-style="google"][data-theme="dark"] {
+    --google-accent-bg: rgba(55, 65, 81, 0.3);
+}
+
+[data-style="google"][data-theme="rose"] {
+    --google-accent-bg: rgba(225, 29, 72, 0.1);
+}
+
+[data-style="google"][data-theme="mint"] {
+    --google-accent-bg: rgba(16, 185, 129, 0.1);
+}
+
+[data-style="google"][data-theme="midnight"] {
+    --google-accent-bg: rgba(76, 154, 255, 0.15);
+}
+
+[data-style="google"][data-theme="charcoal"] {
+    --google-accent-bg: rgba(74, 222, 128, 0.15);
+}
+
+[data-style="google"][data-theme="nord"] {
+    --google-accent-bg: rgba(136, 192, 208, 0.15);
+}
+
+[data-style="google"][data-theme="dracula"] {
+    --google-accent-bg: rgba(189, 147, 249, 0.15);
+}
+
+/* Google-style sidebar */
+[data-style="google"] .app-sidebar {
+    background: var(--google-bg-primary);
+    border-right: 1px solid var(--google-border-primary);
+    font-family: 'Google Sans', 'Roboto', sans-serif;
+    box-shadow: 2px 0 8px rgba(60,64,67,.1);
+}
+
+[data-style="google"] .sidebar-header {
+    background: transparent;
+    border-bottom: 1px solid var(--google-border-primary);
+}
+
+[data-style="google"] .sidebar-header h1 {
+    font-size: 20px;
+    font-weight: 500;
+    color: var(--google-text-primary);
+    font-family: 'Google Sans', 'Roboto', sans-serif;
+}
+
+[data-style="google"] .user-info {
+    color: var(--google-text-primary);
+}
+
+[data-style="google"] .user-info .username {
+    font-weight: 500;
+    color: var(--google-text-primary);
+}
+
+[data-style="google"] .user-info .server-url {
+    color: var(--google-text-secondary);
 }
 
 /* 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;
+[data-style="google"] .create-calendar-button {
+    background: var(--google-accent);
+    color: var(--google-text-inverse);
+    border: none;
+    border-radius: 4px;
+    padding: 8px 16px;
+    font-weight: 500;
+    font-size: 14px;
+    cursor: pointer;
+    box-shadow: var(--shadow-sm);
+    transition: box-shadow 0.2s ease;
 }
 
-.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;
+[data-style="google"] .create-calendar-button:hover {
+    box-shadow: var(--shadow-md);
 }
 
-.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;
+[data-style="google"] .logout-button {
+    background: transparent;
+    color: var(--google-accent);
+    border: 1px solid var(--google-border-primary);
+    border-radius: 4px;
+    padding: 8px 16px;
+    font-weight: 500;
+    font-size: 14px;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
 }
 
-.logout-button:hover {
-    background: #f8f9fa !important;
+[data-style="google"] .logout-button:hover {
+    background: var(--google-hover-bg);
 }
 
-/* Google-style navigation and sidebar text */
-body .sidebar-nav .nav-link,
-[data-theme] .sidebar-nav .nav-link {
-    color: #3c4043 !important;
-    text-decoration: none !important;
+/* Google-style navigation */
+[data-style="google"] .sidebar-nav .nav-link {
+    color: var(--google-text-primary);
+    text-decoration: none;
 }
 
-body .sidebar-nav .nav-link:hover,
-[data-theme] .sidebar-nav .nav-link:hover {
-    color: #1a73e8 !important;
-    background: #f1f3f4 !important;
+[data-style="google"] .sidebar-nav .nav-link:hover {
+    color: var(--google-accent);
+    background: var(--google-hover-bg);
 }
 
 /* Calendar list styling */
-body .calendar-list h3,
-[data-theme] .calendar-list h3 {
-    color: #3c4043 !important;
+[data-style="google"] .calendar-list h3 {
+    color: var(--google-text-primary);
 }
 
-body .calendar-list .calendar-name,
-[data-theme] .calendar-list .calendar-name {
-    color: #3c4043 !important;
+[data-style="google"] .calendar-list .calendar-name {
+    color: var(--google-text-primary);
 }
 
-body .no-calendars,
-[data-theme] .no-calendars {
-    color: #5f6368 !important;
+[data-style="google"] .no-calendars {
+    color: var(--google-text-secondary);
 }
 
 /* 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;
+[data-style="google"] .sidebar-footer label,
+[data-style="google"] .view-selector label,
+[data-style="google"] .theme-selector label,
+[data-style="google"] .style-selector label {
+    color: var(--google-text-primary);
 }
 
 /* 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;
+[data-style="google"] .view-selector-dropdown,
+[data-style="google"] .theme-selector-dropdown,
+[data-style="google"] .style-selector-dropdown {
+    border: 1px solid var(--google-border-primary);
+    border-radius: 4px;
+    padding: 8px;
+    font-size: 14px;
+    color: var(--google-text-primary);
+    background: var(--google-bg-primary);
+    font-family: inherit;
 }
 
-.view-selector-dropdown:focus,
-.theme-selector-dropdown:focus,
-.style-selector-dropdown:focus {
+[data-style="google"] .view-selector-dropdown:focus,
+[data-style="google"] .theme-selector-dropdown:focus,
+[data-style="google"] .style-selector-dropdown:focus {
     outline: none;
-    border-color: #1a73e8;
+    border-color: var(--google-accent);
     box-shadow: 0 0 0 2px rgba(26,115,232,.2);
 }
 
 /* Google-style calendar list items */
-.calendar-list h3 {
+[data-style="google"] .calendar-list h3 {
     font-size: 14px;
     font-weight: 500;
-    color: #3c4043;
+    color: var(--google-text-primary);
     margin-bottom: 8px;
 }
 
-.calendar-list ul {
+[data-style="google"] .calendar-list ul {
     list-style: none;
 }
 
-.calendar-list .calendar-item {
+[data-style="google"] .calendar-list .calendar-item {
     padding: 4px 0;
     border-radius: 4px;
     transition: background-color 0.15s ease;
 }
 
-.calendar-list .calendar-item:hover {
-    background-color: #f1f3f4;
+[data-style="google"] .calendar-list .calendar-item:hover {
+    background-color: var(--google-hover-bg);
 }
 
-.calendar-list .calendar-name {
-    color: #3c4043;
+[data-style="google"] .calendar-list .calendar-name {
+    color: var(--google-text-primary);
     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;
+[data-style="google"] .app-main {
+    background: var(--google-bg-primary);
+    font-family: 'Google Sans', 'Roboto', sans-serif;
+    color: var(--google-text-primary);
 }
 
 /* Calendar header elements */
-body .calendar-header,
-[data-theme] .calendar-header {
-    background: #f8f9fa !important;
-    color: #3c4043 !important;
+[data-style="google"] .calendar-header {
+    background: var(--google-bg-secondary);
+    color: var(--google-text-primary);
 }
 
-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;
+[data-style="google"] .calendar-header h2,
+[data-style="google"] .calendar-header h3,
+[data-style="google"] .month-header,
+[data-style="google"] .week-header {
+    color: var(--google-text-primary);
+    font-family: 'Google Sans', 'Roboto', sans-serif;
 }
 
-/* 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;
+/* Month name and title */
+[data-style="google"] h1,
+[data-style="google"] h2, 
+[data-style="google"] h3,
+[data-style="google"] .month-title,
+[data-style="google"] .calendar-title,
+[data-style="google"] .current-month,
+[data-style="google"] .month-year,
+[data-style="google"] .header-title {
+    color: var(--google-text-primary);
+    font-family: 'Google Sans', 'Roboto', sans-serif;
 }
 
-/* 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;
+/* Navigation arrows and buttons */
+[data-style="google"] button,
+[data-style="google"] .nav-button,
+[data-style="google"] .calendar-nav-button,
+[data-style="google"] .prev-button,
+[data-style="google"] .next-button,
+[data-style="google"] .arrow-button {
+    color: var(--google-text-primary);
+    background: var(--google-bg-secondary);
+    border: 1px solid var(--google-border-primary);
+    border-radius: 4px;
 }
 
-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;
+[data-style="google"] button:hover,
+[data-style="google"] .nav-button:hover,
+[data-style="google"] .calendar-nav-button:hover,
+[data-style="google"] .prev-button:hover,
+[data-style="google"] .next-button:hover,
+[data-style="google"] .arrow-button:hover {
+    background: var(--google-accent-bg);
+    color: var(--google-accent);
+    border-color: var(--google-accent);
 }
 
 /* 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;
+[data-style="google"] .calendar-controls,
+[data-style="google"] .current-date,
+[data-style="google"] .date-display {
+    color: var(--google-text-primary);
 }
 
-/* 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;
+/* Google-style calendar grid */
+[data-style="google"] .calendar-grid,
+[data-style="google"] .calendar-container {
+    border: 1px solid var(--google-border-primary);
+    border-radius: 8px;
+    overflow: hidden;
+    background: var(--google-bg-primary);
+    box-shadow: var(--shadow-md);
+    font-family: 'Google Sans', 'Roboto', sans-serif;
 }
 
-/* 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;
+[data-style="google"] .calendar-header {
+    background: var(--google-bg-secondary);
+    border-bottom: 1px solid var(--google-border-primary);
+    padding: 16px;
 }
 
-/* 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;
+[data-style="google"] .month-header,
+[data-style="google"] .week-header {
+    font-size: 22px;
+    font-weight: 400;
+    color: var(--google-text-primary);
+    font-family: 'Google Sans', 'Roboto', sans-serif;
 }
 
-/* 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;
+/* Google-style calendar cells */
+[data-style="google"] .calendar-day,
+[data-style="google"] .day-cell {
+    border: 1px solid var(--google-border-secondary);
+    background: var(--google-bg-primary);
+    transition: background-color 0.15s ease;
+    padding: 8px;
+    min-height: 120px;
+    position: relative;
 }
 
-html body .calendar-header,
-html [data-theme] .calendar-header {
-    background: #f8f9fa !important;
-    border-bottom: 1px solid #dadce0 !important;
-    padding: 16px !important;
+[data-style="google"] .calendar-day:hover,
+[data-style="google"] .day-cell:hover {
+    background: var(--google-hover-bg);
+    box-shadow: inset 0 0 0 1px var(--google-border-primary);
 }
 
-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;
+[data-style="google"] .calendar-day.today,
+[data-style="google"] .day-cell.today {
+    background: var(--google-accent-bg);
+    border-color: var(--google-accent);
 }
 
-/* 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;
+[data-style="google"] .calendar-day.other-month,
+[data-style="google"] .day-cell.other-month {
+    background: var(--google-bg-tertiary);
+    color: var(--google-text-secondary);
 }
 
-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;
+[data-style="google"] .day-number,
+[data-style="google"] .date-number {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--google-text-primary);
+    margin-bottom: 4px;
+    font-family: 'Google Sans', 'Roboto', sans-serif;
 }
 
 /* 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;
+[data-style="google"] .day-header,
+[data-style="google"] .weekday-header {
+    background: var(--google-bg-secondary);
+    color: var(--google-text-secondary);
+    font-size: 12px;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.8px;
+    padding: 8px;
+    border-bottom: 1px solid var(--google-border-primary);
+    font-family: 'Google Sans', 'Roboto', sans-serif;
 }
 
-/* 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;
+/* Google Calendar-style events */
+[data-style="google"] .event {
+    border-radius: 4px;
+    padding: 2px 8px;
+    font-size: 11px;
+    font-weight: 400;
+    margin: 1px 0 2px 0;
+    cursor: pointer;
+    border: none;
+    color: white;
+    font-family: 'Google Sans', 'Roboto', sans-serif;
+    box-shadow: 0 1px 3px rgba(60,64,67,.3);
+    transition: transform 0.1s ease, box-shadow 0.1s ease;
+    display: block;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    line-height: 1.3;
 }
 
-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;
+[data-style="google"] .event * {
+    color: white;
+    font-family: inherit;
 }
 
-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;
+[data-style="google"] .event:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(60,64,67,.4);
 }
 
 /* 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;
+[data-style="google"] .event.all-day {
+    border-radius: 12px;
+    padding: 4px 12px;
+    font-weight: 500;
+    margin: 2px 0;
 }
 
 /* Event time display */
-html body .event-time,
-html [data-theme] .event-time {
-    opacity: 0.9 !important;
-    font-size: 10px !important;
-    margin-right: 4px !important;
+[data-style="google"] .event-time {
+    opacity: 0.9;
+    font-size: 10px;
+    margin-right: 4px;
 }
 
 /* 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;
+[data-style="google"] .week-view .event {
+    border-left: 3px solid rgba(255,255,255,0.8);
+    border-radius: 0 4px 4px 0;
+    padding-left: 6px;
 }
 
 /* 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;
+[data-style="google"] .calendar-table,
+[data-style="google"] table {
+    border-collapse: separate;
+    border-spacing: 0;
+    width: 100%;
+    background: var(--google-bg-primary);
 }
 
-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;
+[data-style="google"] .calendar-table td,
+[data-style="google"] table td {
+    vertical-align: top;
+    border: 1px solid var(--google-border-secondary);
+    background: var(--google-bg-primary);
 }
 
 /* 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;
+[data-style="google"] .view-toggle {
+    display: flex;
+    gap: 4px;
+    background: var(--google-bg-tertiary);
+    border-radius: 6px;
+    padding: 2px;
 }
 
-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;
+[data-style="google"] .view-toggle button {
+    padding: 6px 12px;
+    border: none;
+    background: transparent;
+    color: var(--google-text-secondary);
+    border-radius: 4px;
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.15s ease;
 }
 
-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;
+[data-style="google"] .view-toggle button.active {
+    background: var(--google-bg-primary);
+    color: var(--google-accent);
+    box-shadow: var(--shadow-sm);
 }
 
 /* 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;
+[data-style="google"] .today-button {
+    background: var(--google-bg-primary);
+    border: 1px solid var(--google-border-primary);
+    color: var(--google-accent);
+    padding: 8px 16px;
+    border-radius: 4px;
+    font-weight: 500;
+    font-size: 14px;
+    cursor: pointer;
+    transition: all 0.15s ease;
 }
 
-html body .today-button:hover,
-html [data-theme] .today-button:hover {
-    background: #f8f9fa !important;
-    border-color: #1a73e8 !important;
+[data-style="google"] .today-button:hover {
+    background: var(--google-hover-bg);
+    border-color: var(--google-accent);
 }
 
 /* Google-style modals */
-.modal-overlay {
+[data-style="google"] .modal-overlay {
     background: rgba(0, 0, 0, 0.5);
 }
 
-.modal-content {
-    background: white;
+[data-style="google"] .modal-content {
+    background: var(--google-bg-primary);
     border-radius: 8px;
     box-shadow: var(--shadow-lg);
     border: none;
+    color: var(--google-text-primary);
 }
 
-.modal h2 {
+[data-style="google"] .modal h2 {
     font-size: 20px;
     font-weight: 500;
-    color: #3c4043;
+    color: var(--google-text-primary);
     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;
+[data-style="google"] input[type="text"],
+[data-style="google"] input[type="email"],
+[data-style="google"] input[type="password"],
+[data-style="google"] input[type="url"],
+[data-style="google"] input[type="date"],
+[data-style="google"] input[type="time"],
+[data-style="google"] textarea,
+[data-style="google"] select {
+    border: 1px solid var(--google-border-primary);
     border-radius: 4px;
     padding: 8px 12px;
     font-size: 14px;
-    color: #3c4043;
-    background: white;
+    color: var(--google-text-primary);
+    background: var(--google-bg-primary);
     font-family: inherit;
     transition: border-color 0.15s ease, box-shadow 0.15s ease;
 }
 
-input:focus,
-textarea:focus,
-select:focus {
+[data-style="google"] input:focus,
+[data-style="google"] textarea:focus,
+[data-style="google"] select:focus {
     outline: none;
-    border-color: #1a73e8;
+    border-color: var(--google-accent);
     box-shadow: 0 0 0 2px rgba(26,115,232,.2);
 }
 
 /* Google-style labels */
-label {
+[data-style="google"] label {
     font-size: 14px;
     font-weight: 500;
-    color: #3c4043;
+    color: var(--google-text-primary);
     margin-bottom: 4px;
     display: block;
+}
+
+/* Dark theme shadow adjustments */
+[data-style="google"][data-theme="dark"] .calendar-grid,
+[data-style="google"][data-theme="dark"] .calendar-container {
+    box-shadow: 0 1px 3px 0 rgba(0,0,0,.3), 0 4px 8px 3px rgba(0,0,0,.15);
+}
+
+[data-style="google"][data-theme="dark"] .event {
+    box-shadow: 0 1px 3px rgba(0,0,0,.3);
+}
+
+[data-style="google"][data-theme="dark"] .event:hover {
+    box-shadow: 0 2px 8px rgba(0,0,0,.4);
 }
\ No newline at end of file