feat: Add responsive navigation and theme selection

- Implemented adaptive navigation (Sidebar for wide screens, Bottom Nav for narrow screens)
- Added manual theme selection (Light/Dark/System)
- Added accent color selection
- Created ThemeProvider for dynamic styling
- Added Settings page
- Refactored Profile page with Quick Access links

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

src/styles/globals.css

@@ -13,25 +13,26 @@
   --md-sys-color-on-surface-variant: #43474e;
   --md-sys-color-outline: #73777f;
   --md-sys-color-error: #ba1a1a;
+  
+  --nav-width: 80px;
+  --bottom-nav-height: 80px;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --md-sys-color-primary: #9ecaff;
-    --md-sys-color-on-primary: #003258;
-    --md-sys-color-primary-container: #00497d;
-    --md-sys-color-on-primary-container: #d1e4ff;
-    --md-sys-color-secondary: #bbc7db;
-    --md-sys-color-on-secondary: #253140;
-    --md-sys-color-secondary-container: #3b4858;
-    --md-sys-color-on-secondary-container: #d7e3f7;
-    --md-sys-color-surface: #1a1c1e;
-    --md-sys-color-on-surface: #e2e2e6;
-    --md-sys-color-surface-variant: #43474e;
-    --md-sys-color-on-surface-variant: #c3c7cf;
-    --md-sys-color-outline: #8d9199;
-    --md-sys-color-error: #ffb4ab;
-  }
+:root.dark {
+  --md-sys-color-primary: #9ecaff;
+  --md-sys-color-on-primary: #003258;
+  --md-sys-color-primary-container: #00497d;
+  --md-sys-color-on-primary-container: #d1e4ff;
+  --md-sys-color-secondary: #bbc7db;
+  --md-sys-color-on-secondary: #253140;
+  --md-sys-color-secondary-container: #3b4858;
+  --md-sys-color-on-secondary-container: #d7e3f7;
+  --md-sys-color-surface: #1a1c1e;
+  --md-sys-color-on-surface: #e2e2e6;
+  --md-sys-color-surface-variant: #43474e;
+  --md-sys-color-on-surface-variant: #c3c7cf;
+  --md-sys-color-outline: #8d9199;
+  --md-sys-color-error: #ffb4ab;
 }
 
 * {
@@ -48,14 +49,7 @@ body {
   transition: background-color 0.3s, color 0.3s;
 }
 
-button {
-  cursor: pointer;
-  font-family: inherit;
-}
-
-input {
-  font-family: inherit;
-}
+/* Material 3 Components */
 
 .m3-button {
   display: inline-flex;
@@ -69,6 +63,8 @@ input {
   font-size: 14px;
   letter-spacing: 0.1px;
   transition: box-shadow 0.2s, background-color 0.2s;
+  background-color: transparent;
+  color: var(--md-sys-color-primary);
 }
 
 .m3-button-filled {
@@ -105,3 +101,97 @@ input {
   outline: none;
   border-bottom: 2px solid var(--md-sys-color-primary);
 }
+
+/* Layout and Navigation */
+
+.app-container {
+  display: flex;
+  min-height: 100vh;
+}
+
+.main-content {
+  flex: 1;
+  padding-bottom: var(--bottom-nav-height);
+}
+
+@media (min-width: 600px) {
+  .main-content {
+    padding-bottom: 0;
+    margin-left: var(--nav-width);
+  }
+}
+
+.navigation-rail {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: var(--nav-width);
+  background-color: var(--md-sys-color-surface);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 16px 0;
+  border-right: 1px solid var(--md-sys-color-outline);
+  z-index: 100;
+}
+
+.navigation-bar {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: var(--bottom-nav-height);
+  background-color: var(--md-sys-color-surface-variant);
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  padding: 0 8px;
+  z-index: 100;
+}
+
+.nav-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  color: var(--md-sys-color-on-surface-variant);
+  gap: 4px;
+  flex: 1;
+  height: 100%;
+  border-radius: 16px;
+  transition: background-color 0.2s;
+}
+
+.nav-item-icon-wrapper {
+  width: 64px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 16px;
+  transition: background-color 0.2s;
+}
+
+.nav-item.active .nav-item-icon-wrapper {
+  background-color: var(--md-sys-color-secondary-container);
+  color: var(--md-sys-color-on-secondary-container);
+}
+
+.nav-item-label {
+  font-size: 12px;
+  font-weight: 500;
+}
+
+@media (min-width: 600px) {
+  .navigation-bar {
+    display: none;
+  }
+}
+
+@media (max-width: 599px) {
+  .navigation-rail {
+    display: none;
+  }
+}