diff --git a/css/index.css b/css/index.css
index 24a20f7..e2726bf 100644
--- a/css/index.css
+++ b/css/index.css
@@ -8,40 +8,43 @@
   --color-text-primary: #1a1a18;
   --color-text-secondary: #6b6b66;
   --color-text-tertiary: #9c9a92;
-  --color-border-tertiary: rgba(0,0,0,0.08); /* softer */
-  --color-border-secondary: rgba(0,0,0,0.15); /* softer */
+  --color-border-tertiary: rgba(0,0,0,0.08);
+  --color-border-secondary: rgba(0,0,0,0.15);
   --color-border-primary: rgba(0,0,0,0.30);
-  
+
   --color-danger-rgb: 163, 45, 45;
   --color-info-rgb: 24, 95, 165;
   --color-success-rgb: 22, 101, 52;
-  
+
   --color-text-danger: #a32d2d;
   --color-background-danger: #fcebeb;
   --color-border-danger: rgba(var(--color-danger-rgb), 0.35);
-  
+
   --color-text-info: #185fa5;
   --color-background-info: #e6f1fb;
   --color-border-info: rgba(var(--color-info-rgb), 0.35);
-  
+
   --color-text-success: #166534;
   --color-background-success: #eaf3de;
   --color-border-success: rgba(var(--color-success-rgb), 0.35);
 
   --color-text-warning: #854f0b;
   --color-background-warning: #faeeda;
-  
+
   --color-text-purple: #3c3489;
   --color-background-purple: #eeedfe;
-  
+
   --border-radius-sm: 6px;
   --border-radius-md: 10px;
   --border-radius-lg: 16px;
   --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
-  
+
   --shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
   --shadow-md: 0 4px 16px rgba(0,0,0,0.06);
   --shadow-lg: 0 8px 32px rgba(0,0,0,0.08);
+
+  --auth-accent: #4f46e5;
+  --auth-accent-focus-ring: rgba(79, 70, 229, 0.14);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -58,20 +61,17 @@
     --color-text-danger: #fc9c9c;
     --color-background-danger: rgba(252, 156, 156, 0.15);
     --color-border-danger: rgba(252,156,156,0.3);
-    
     --color-text-info: #9ecdfc;
     --color-background-info: rgba(158, 205, 252, 0.15);
     --color-border-info: rgba(158,205,252,0.3);
-    
     --color-text-success: #a0d45a;
     --color-background-success: rgba(160, 212, 90, 0.15);
     --color-border-success: rgba(160,212,90,0.3);
-
     --color-text-warning: #fab35e;
     --color-background-warning: rgba(250, 179, 94, 0.15);
-
     --color-text-purple: #b9b5f5;
     --color-background-purple: rgba(185, 181, 245, 0.15);
+    --auth-accent-focus-ring: rgba(99, 102, 241, 0.22);
   }
 }
 
@@ -88,9 +88,18 @@ body {
   overflow-x: hidden;
 }
 
+/* Body scroll lock while auth modal is open */
+body.auth-open {
+  overflow: hidden;
+}
+
 /* Animations */
 @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
 @keyframes popIn { 0% { transform: scale(0.95); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
+@keyframes auth-modal-in {
+  from { opacity: 0; transform: translateY(8px) scale(0.97); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
+}
 
 .wrapper { width: 100%; max-width: 1200px; animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
 
@@ -109,6 +118,14 @@ body {
   background: var(--color-background-primary);
   box-shadow: var(--shadow-lg);
   backdrop-filter: blur(20px);
+  transition: filter 0.2s ease;
+}
+
+/* Dashboard recedes visually while auth modal is open */
+.app.auth-blurred {
+  filter: blur(2px);
+  pointer-events: none;
+  user-select: none;
 }
 
 /* Sidebar */
@@ -160,59 +177,17 @@ body {
 .tasks-section { flex: 1; overflow-y: auto; padding: 0 24px 24px; scroll-behavior: smooth; }
 .tasks-section::-webkit-scrollbar { width: 6px; }
 .tasks-section::-webkit-scrollbar-thumb { background: var(--color-border-secondary); border-radius: 10px; }
-.tasks-actions-bar {
-  margin-top: 18px;
-  display: flex;
-  gap: 10px;
-  flex-wrap: wrap;
-}
-.task-action-btn {
-  border: 1px solid var(--color-border-success);
-  background: var(--color-background-success);
-  color: var(--color-text-success);
-  border-radius: var(--border-radius-sm);
-  padding: 7px 12px;
-  font-size: 12px;
-  font-weight: 700;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-.task-action-btn:hover {
-  filter: brightness(0.98);
-  transform: translateY(-1px);
-}
-.task-action-btn:disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
-  transform: none;
-  filter: none;
-}
-.task-action-btn-secondary {
-  border-color: var(--color-border-info);
-  background: var(--color-background-info);
-  color: var(--color-text-info);
-}
-.tasks-empty-state {
-  margin-top: 14px;
-  padding: 14px;
-  border-radius: var(--border-radius-md);
-  border: 1px dashed var(--color-border-secondary);
-  color: var(--color-text-secondary);
-  font-size: 13px;
-  background: var(--color-background-secondary);
-}
+.tasks-actions-bar { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }
+.task-action-btn { border: 1px solid var(--color-border-success); background: var(--color-background-success); color: var(--color-text-success); border-radius: var(--border-radius-sm); padding: 7px 12px; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.2s ease; }
+.task-action-btn:hover { filter: brightness(0.98); transform: translateY(-1px); }
+.task-action-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; filter: none; }
+.task-action-btn-secondary { border-color: var(--color-border-info); background: var(--color-background-info); color: var(--color-text-info); }
+.tasks-empty-state { margin-top: 14px; padding: 14px; border-radius: var(--border-radius-md); border: 1px dashed var(--color-border-secondary); color: var(--color-text-secondary); font-size: 13px; background: var(--color-background-secondary); }
 .tasks-group { margin-top: 24px; animation: fadeIn 0.4s ease forwards; }
 .tasks-group-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
 .tasks-group-header span { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
 
-.task-item {
-  display: flex; align-items: flex-start; gap: 14px; padding: 12px 14px;
-  border-radius: var(--border-radius-md); cursor: pointer;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  border: 1px solid transparent; background: var(--color-background-primary);
-  margin-bottom: 6px;
-  border: 1px solid var(--color-border-tertiary);
-}
+.task-item { display: flex; align-items: flex-start; gap: 14px; padding: 12px 14px; border-radius: var(--border-radius-md); cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); background: var(--color-background-primary); margin-bottom: 6px; border: 1px solid var(--color-border-tertiary); }
 .task-item:hover { background: var(--color-background-secondary); transform: translateX(4px); border-color: var(--color-border-secondary); box-shadow: var(--shadow-sm); }
 .task-item.urgent { border-color: var(--color-border-danger); background: linear-gradient(to right, var(--color-background-danger) 0%, var(--color-background-primary) 100%); }
 .task-check { width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--color-border-secondary); flex-shrink: 0; margin-top: 2px; transition: all 0.2s; position: relative; cursor: pointer; }
@@ -224,50 +199,21 @@ body {
 .task-item.done .task-name { text-decoration: line-through; color: var(--color-text-tertiary); }
 .task-meta { font-size: 12px; color: var(--color-text-tertiary); margin-top: 6px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-weight: 500; }
 .task-pill { font-size: 11px; padding: 2px 8px; border-radius: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; border: 1px solid transparent; }
-.pill-red  { background: var(--color-background-danger); color: var(--color-text-danger); border-color: var(--color-border-danger); }
-.pill-blue { background: var(--color-background-info); color: var(--color-text-info); border-color: var(--color-border-info); }
-.pill-green{ background: var(--color-background-success); color: var(--color-text-success); border-color: var(--color-border-success); }
-.pill-amber{ background: var(--color-background-warning); color: var(--color-text-warning); border-color: rgba(133, 79, 11, 0.2); }
-.pill-purple{ background: var(--color-background-purple); color: var(--color-text-purple); border-color: rgba(60, 52, 137, 0.2); }
+.pill-red   { background: var(--color-background-danger);  color: var(--color-text-danger);  border-color: var(--color-border-danger); }
+.pill-blue  { background: var(--color-background-info);    color: var(--color-text-info);    border-color: var(--color-border-info); }
+.pill-green { background: var(--color-background-success); color: var(--color-text-success); border-color: var(--color-border-success); }
+.pill-amber { background: var(--color-background-warning); color: var(--color-text-warning); border-color: rgba(133, 79, 11, 0.2); }
+.pill-purple{ background: var(--color-background-purple);  color: var(--color-text-purple);  border-color: rgba(60, 52, 137, 0.2); }
 
 .conflict-card { font-size: 13px; font-weight: 500; color: var(--color-text-warning); background: var(--color-background-warning); border: 1px solid rgba(133, 79, 11, 0.3); border-radius: var(--border-radius-md); padding: 12px 16px; line-height: 1.5; display: flex; gap: 12px; align-items: flex-start; box-shadow: var(--shadow-sm); }
 .conflict-icon { font-size: 18px; line-height: 1; }
 
-.task-actions {
-  display: flex;
-  gap: 8px;
-  opacity: 0;
-  transition: opacity 0.2s;
-}
-.task-item:hover .task-actions {
-  opacity: 1;
-}
-.task-btn {
-  padding: 4px 8px;
-  border-radius: 4px;
-  font-size: 11px;
-  font-weight: 600;
-  cursor: pointer;
-  border: 1px solid var(--color-border-secondary);
-  background: var(--color-background-primary);
-  color: var(--color-text-secondary);
-  transition: all 0.2s;
-}
-.task-btn:hover {
-  background: var(--color-background-secondary);
-  color: var(--color-text-primary);
-  border-color: var(--color-border-primary);
-}
-.task-btn-danger:hover {
-  background: var(--color-background-danger);
-  color: var(--color-text-danger);
-  border-color: var(--color-text-danger);
-}
-.task-btn-info:hover {
-  background: var(--color-background-info);
-  color: var(--color-text-info);
-  border-color: var(--color-text-info);
-}
+.task-actions { display: flex; gap: 8px; opacity: 0; transition: opacity 0.2s; }
+.task-item:hover .task-actions { opacity: 1; }
+.task-btn { padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; cursor: pointer; border: 1px solid var(--color-border-secondary); background: var(--color-background-primary); color: var(--color-text-secondary); transition: all 0.2s; }
+.task-btn:hover { background: var(--color-background-secondary); color: var(--color-text-primary); border-color: var(--color-border-primary); }
+.task-btn-danger:hover { background: var(--color-background-danger); color: var(--color-text-danger); border-color: var(--color-text-danger); }
+.task-btn-info:hover { background: var(--color-background-info); color: var(--color-text-info); border-color: var(--color-text-info); }
 
 /* Right Panel */
 .panel { border-left: 1px solid var(--color-border-tertiary); display: flex; flex-direction: column; background: var(--color-background-secondary); overflow: hidden; }
@@ -293,10 +239,7 @@ body {
 .paste-icon { font-size: 24px; margin-bottom: 8px; color: var(--color-text-secondary); transition: color 0.2s; }
 .paste-zone:hover .paste-icon { color: var(--color-text-info); }
 
-.paste-input {
-  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
-  width: 100%; height: 100%; opacity: 0; resize: none; border: none; padding: 20px; font-family: inherit; font-size: 13px; z-index: 2;
-}
+.paste-input { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; opacity: 0; resize: none; border: none; padding: 20px; font-family: inherit; font-size: 13px; z-index: 2; }
 .paste-input:focus, .paste-input:not(:placeholder-shown) { opacity: 1; z-index: 10; background: var(--color-background-primary); color: var(--color-text-primary); outline: none; }
 .paste-label { font-size: 14px; font-weight: 600; color: var(--color-text-primary); margin-bottom: 4px; pointer-events: none; }
 .paste-hint { font-size: 12px; color: var(--color-text-tertiary); line-height: 1.5; pointer-events: none; }
@@ -325,24 +268,16 @@ body {
 .add-btn:disabled { background: var(--color-border-secondary); cursor: not-allowed; transform: none; box-shadow: none; color: var(--color-text-tertiary); }
 
 /* Loader */
-.loader-spinner {
-  display: inline-block;
-  width: 16px;
-  height: 16px;
-  border: 2px solid rgba(0,0,0,0.1);
-  border-radius: 50%;
-  border-top-color: var(--color-text-primary);
-  animation: spin 0.8s linear infinite;
-}
+.loader-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(0,0,0,0.1); border-radius: 50%; border-top-color: var(--color-text-primary); animation: spin 0.8s linear infinite; }
 @media (prefers-color-scheme: dark) {
   .loader-spinner { border-color: rgba(255,255,255,0.1); border-top-color: #fff; }
 }
 @keyframes spin { to { transform: rotate(360deg); } }
 
-/* Utility classes */
+/* Utility */
 .hidden { display: none !important; }
 
-/* Timer duration input */
+/* Timer */
 .timer-duration-row { display: flex; align-items: center; gap: 10px; }
 .timer-duration-label { font-size: 12px; font-weight: 600; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; }
 .timer-duration-input { width: 64px; padding: 6px 10px; border: 1px solid var(--color-border-secondary); border-radius: var(--border-radius-sm); background: var(--color-background-primary); color: var(--color-text-primary); font-size: 14px; font-weight: 600; font-family: inherit; text-align: center; transition: border-color 0.2s; }
@@ -350,527 +285,233 @@ body {
 .timer-duration-input:disabled { opacity: 0.5; cursor: not-allowed; }
 
 /* Focus Mode */
-.focus-section {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  padding: 24px;
-  overflow-y: auto;
-  gap: 32px;
-}
-.focus-dashboard {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 24px;
-}
-.timer-container {
-  position: relative;
-  width: 240px;
-  height: 240px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.timer-svg {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  transform: rotate(-90deg);
-}
-.timer-path-elapsed {
-  fill: none;
-  stroke: var(--color-border-tertiary);
-  stroke-width: 4;
-}
-.timer-path-remaining {
-  fill: none;
-  stroke: var(--color-text-primary);
-  stroke-width: 6;
-  stroke-linecap: round;
-  transition: stroke-dashoffset 1s linear;
-}
-.timer-text {
-  font-size: 48px;
-  font-weight: 700;
-  color: var(--color-text-primary);
-  font-variant-numeric: tabular-nums;
-  letter-spacing: -0.02em;
-  z-index: 1;
-}
-.timer-controls {
-  display: flex;
-  gap: 12px;
-}
-.focus-task-container, .focus-task-selector {
-  width: 100%;
-  max-width: 600px;
-  margin: 0 auto;
-}
-.focus-task-header {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--color-text-tertiary);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  margin-bottom: 12px;
-}
-.active-focus-task {
-  background: var(--color-background-primary);
-  border: 1px solid var(--color-border-primary);
-  border-radius: var(--border-radius-md);
-  padding: 20px;
-  box-shadow: var(--shadow-md);
-  min-height: 80px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.no-task-selected {
-  color: var(--color-text-secondary);
-  font-size: 14px;
-  font-weight: 500;
-}
-.focus-task-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-.focus-task-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 12px;
-  background: var(--color-background-primary);
-  border: 1px solid var(--color-border-tertiary);
-  border-radius: var(--border-radius-md);
-  cursor: pointer;
-  transition: all 0.2s;
-}
-.focus-task-item:hover {
-  background: var(--color-background-secondary);
-  border-color: var(--color-text-info);
-  transform: translateY(-1px);
-}
-.focus-task-item .task-name {
-  margin-bottom: 0;
-  flex: 1;
-}
-
+.focus-section { flex: 1; display: flex; flex-direction: column; padding: 24px; overflow-y: auto; gap: 32px; }
+.focus-dashboard { display: flex; flex-direction: column; align-items: center; gap: 24px; }
+.timer-container { position: relative; width: 240px; height: 240px; display: flex; align-items: center; justify-content: center; }
+.timer-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
+.timer-path-elapsed { fill: none; stroke: var(--color-border-tertiary); stroke-width: 4; }
+.timer-path-remaining { fill: none; stroke: var(--color-text-primary); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
+.timer-text { font-size: 48px; font-weight: 700; color: var(--color-text-primary); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; z-index: 1; }
+.timer-controls { display: flex; gap: 12px; }
+.focus-task-container, .focus-task-selector { width: 100%; max-width: 600px; margin: 0 auto; }
+.focus-task-header { font-size: 13px; font-weight: 600; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; }
+.active-focus-task { background: var(--color-background-primary); border: 1px solid var(--color-border-primary); border-radius: var(--border-radius-md); padding: 20px; box-shadow: var(--shadow-md); min-height: 80px; display: flex; align-items: center; justify-content: center; }
+.no-task-selected { color: var(--color-text-secondary); font-size: 14px; font-weight: 500; }
+.focus-task-list { display: flex; flex-direction: column; gap: 8px; }
+.focus-task-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--color-background-primary); border: 1px solid var(--color-border-tertiary); border-radius: var(--border-radius-md); cursor: pointer; transition: all 0.2s; }
+.focus-task-item:hover { background: var(--color-background-secondary); border-color: var(--color-text-info); transform: translateY(-1px); }
+.focus-task-item .task-name { margin-bottom: 0; flex: 1; }
 
 /* Header */
-.site-header {
-  width: 100%;
-  max-width: 1200px;
-  margin: 0 auto 16px auto;
-  padding: 16px 24px;
-  background: var(--color-background-primary);
-  border: 1px solid var(--color-border-tertiary);
-  border-radius: var(--border-radius-lg);
-  box-shadow: var(--shadow-md);
-
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.header-left {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.logo {
-  width: 40px;
-  height: 40px;
-  border-radius: 2px;
-}
-
-.site-title {
-  font-size: 20px;
-  font-weight: 700;
-  color: var(--color-text-primary);
-}
-
-.header-nav {
-  display: flex;
-  gap: 24px;
-}
-
-.header-nav a {
-  text-decoration: none;
-  color: var(--color-text-secondary);
-  font-weight: 500;
-  transition: color 0.2s;
-}
-
-.header-nav a:hover {
-  color: var(--color-text-primary);
-}
-
-.profile-btn {
-  padding: 8px 16px;
-  border: none;
-  border-radius: var(--border-radius-md);
-  background: var(--color-text-primary);
-  color: var(--color-background-primary);
-  cursor: pointer;
-  font-weight: 600;
-}
+.site-header { width: 100%; max-width: 1200px; margin: 0 auto 16px auto; padding: 16px 24px; background: var(--color-background-primary); border: 1px solid var(--color-border-tertiary); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-md); display: flex; align-items: center; justify-content: space-between; }
+.header-left { display: flex; align-items: center; gap: 12px; }
+.logo { width: 40px; height: 40px; border-radius: 2px; }
+.site-title { font-size: 20px; font-weight: 700; color: var(--color-text-primary); }
+.header-nav { display: flex; gap: 24px; }
+.header-nav a { text-decoration: none; color: var(--color-text-secondary); font-weight: 500; transition: color 0.2s; }
+.header-nav a:hover { color: var(--color-text-primary); }
+.profile-btn { padding: 8px 16px; border: none; border-radius: var(--border-radius-md); background: var(--color-text-primary); color: var(--color-background-primary); cursor: pointer; font-weight: 600; }
 
 /* Footer */
-.site-footer {
-  width: 100%;
-  max-width: 1200px;
-  margin: 16px auto 0 auto;
-  padding: 16px 24px;
-  background: var(--color-background-primary);
-  border: 1px solid var(--color-border-tertiary);
-  border-radius: var(--border-radius-lg);
-  box-shadow: var(--shadow-md);
-
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  color: var(--color-text-secondary);
-  font-size: 14px;
-}
-
-.footer-links {
-  display: flex;
-  gap: 16px;
-}
-
-.footer-links a {
-  text-decoration: none;
-  color: var(--color-text-secondary);
-}
-
-.footer-links a:hover {
-  color: var(--color-text-primary);
-}
-
-/* Global crash boundary UI */
-.crash-screen {
-  min-height: 100vh;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 24px;
-  background:
-    radial-gradient(circle at 20% 20%, rgba(24, 95, 165, 0.16), transparent 40%),
-    radial-gradient(circle at 80% 0%, rgba(22, 101, 52, 0.14), transparent 42%),
-    var(--color-background-tertiary);
-}
-
-.crash-card {
-  width: min(560px, 100%);
-  border-radius: var(--border-radius-lg);
-  border: 1px solid var(--color-border-tertiary);
-  background: var(--color-background-primary);
-  box-shadow: var(--shadow-lg);
-  padding: 28px;
-}
-
-.crash-illustration {
-  font-size: 30px;
-  margin-bottom: 12px;
-}
-
-.crash-title {
-  font-size: 28px;
-  margin-bottom: 10px;
-}
-
-.crash-copy {
-  color: var(--color-text-secondary);
-  line-height: 1.5;
-  margin-bottom: 8px;
-}
-
-.crash-quote {
-  color: var(--color-text-info);
-  font-weight: 600;
-  margin-bottom: 16px;
-}
-
-.crash-refresh {
-  border: none;
-  border-radius: var(--border-radius-md);
-  padding: 10px 16px;
-  font-size: 14px;
-  font-weight: 700;
-  color: var(--color-background-primary);
-  background: var(--color-text-primary);
-  cursor: pointer;
-}
-
-.crash-refresh:hover {
-  background: var(--color-text-secondary);
-}
-
-.crash-details {
-  margin-top: 14px;
-  color: var(--color-text-secondary);
-}
-
-.crash-details pre {
-  margin-top: 8px;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-  font-size: 12px;
-  background: var(--color-background-secondary);
-  border: 1px solid var(--color-border-tertiary);
-  border-radius: var(--border-radius-sm);
-  padding: 10px;
-}
-
-/* Task Addition Model */
-
-
+.site-footer { width: 100%; max-width: 1200px; margin: 16px auto 0 auto; padding: 16px 24px; background: var(--color-background-primary); border: 1px solid var(--color-border-tertiary); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-md); display: flex; align-items: center; justify-content: space-between; color: var(--color-text-secondary); font-size: 14px; }
+.footer-links { display: flex; gap: 16px; }
+.footer-links a { text-decoration: none; color: var(--color-text-secondary); }
+.footer-links a:hover { color: var(--color-text-primary); }
+
+/* Crash screen */
+.crash-screen { min-height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(circle at 20% 20%, rgba(24, 95, 165, 0.16), transparent 40%), radial-gradient(circle at 80% 0%, rgba(22, 101, 52, 0.14), transparent 42%), var(--color-background-tertiary); }
+.crash-card { width: min(560px, 100%); border-radius: var(--border-radius-lg); border: 1px solid var(--color-border-tertiary); background: var(--color-background-primary); box-shadow: var(--shadow-lg); padding: 28px; }
+.crash-illustration { font-size: 30px; margin-bottom: 12px; }
+.crash-title { font-size: 28px; margin-bottom: 10px; }
+.crash-copy { color: var(--color-text-secondary); line-height: 1.5; margin-bottom: 8px; }
+.crash-quote { color: var(--color-text-info); font-weight: 600; margin-bottom: 16px; }
+.crash-refresh { border: none; border-radius: var(--border-radius-md); padding: 10px 16px; font-size: 14px; font-weight: 700; color: var(--color-background-primary); background: var(--color-text-primary); cursor: pointer; }
+.crash-refresh:hover { background: var(--color-text-secondary); }
+.crash-details { margin-top: 14px; color: var(--color-text-secondary); }
+.crash-details pre { margin-top: 8px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; background: var(--color-background-secondary); border: 1px solid var(--color-border-tertiary); border-radius: var(--border-radius-sm); padding: 10px; }
+
+/* Task / Subject Modals */
 #new-task-modal,
 #new-subject-modal {
-
   position: fixed;
   inset: 0;
   z-index: 9998;
   display: none;
   align-items: center;
   justify-content: center;
-  background-color: rgba(0, 0, 0, 0.55) !important; 
+  background-color: rgba(0, 0, 0, 0.55) !important;
 }
 
-
 #new-task-modal .modal-card,
 #new-subject-modal .modal-card {
   width: 100%;
   max-width: 360px;
-  background-color: #0f172a;                     
+  background-color: #0f172a;
   border-radius: 14px;
   padding: 20px 20px 16px;
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
-  color: #e5e7eb;                        
+  color: #e5e7eb;
   box-sizing: border-box;
-  border: 1px solid rgba(148, 163, 184, 0.35)  !important;
+  border: 1px solid rgba(148, 163, 184, 0.35) !important;
 }
 
-
 #new-task-modal .modal-card h3,
-#new-subject-modal .modal-card h3 {
-  margin: 0 0 12px;
-  font-size: 18px;
-  font-weight: 600;
-  letter-spacing: 0.01em;
-  color: #f9fafb;
-}
-
+#new-subject-modal .modal-card h3 { margin: 0 0 12px; font-size: 18px; font-weight: 600; letter-spacing: 0.01em; color: #f9fafb; }
 
 #new-task-modal label,
-#new-subject-modal label {
-  display: block;
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: #9ca3af; /* muted */
-  margin-bottom: 4px;
-}
-
+#new-subject-modal label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #9ca3af; margin-bottom: 4px; }
 
 #new-task-modal input,
 #new-task-modal select,
 #new-subject-modal input,
-#new-subject-modal select {
-  width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  padding: 7px 8px;
-  margin-bottom: 10px;
-  border-radius: 6px;
-  border: 1px solid #4b5563;              
-  background-color: #111827 !important;                  
-  color: #e5e7eb;
-  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
-  color-scheme: dark;                      
-}
-
+#new-subject-modal select { width: 100%; box-sizing: border-box; font-size: 13px; padding: 7px 8px; margin-bottom: 10px; border-radius: 6px; border: 1px solid #4b5563; background-color: #111827 !important; color: #e5e7eb; transition: border-color 0.15s ease, box-shadow 0.15s ease; color-scheme: dark; }
 
 #new-task-modal input::placeholder,
-#new-subject-modal input::placeholder {
-  color: #6b7280;
-}
-
+#new-subject-modal input::placeholder { color: #6b7280; }
 
 #new-task-modal input:focus,
 #new-task-modal select:focus,
 #new-subject-modal input:focus,
-#new-subject-modal select:focus {
-  outline: none;
-  border-color: #4f46e5;
-  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.35);
-  background: #020617;                     
-}
-
+#new-subject-modal select:focus { outline: none; border-color: #4f46e5; box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.35); background: #020617; }
 
 #new-task-modal .modal-card > div:last-child,
-#new-subject-modal .modal-card > div:last-child {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  margin-top: 6px;
-}
-
+#new-subject-modal .modal-card > div:last-child { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
 
 #new-task-modal .btn,
-#new-subject-modal .btn {
-  font-size: 12px;
-  padding: 6px 10px;
-  border-radius: 999px;
-}
+#new-subject-modal .btn { font-size: 12px; padding: 6px 10px; border-radius: 999px; }
 
 #new-task-modal .btn:not(.btn-primary),
-#new-subject-modal .btn:not(.btn-primary) {
-  background: rgba(15, 23, 42, 0.9);
-  color: #e5e7eb;
-  border: 1px solid #4b5563;
-}
+#new-subject-modal .btn:not(.btn-primary) { background: rgba(15, 23, 42, 0.9); color: #e5e7eb; border: 1px solid #4b5563; }
 
 #new-task-modal .btn:not(.btn-primary):hover,
-#new-subject-modal .btn:not(.btn-primary):hover {
-  background: #020617;
-}
-
+#new-subject-modal .btn:not(.btn-primary):hover { background: #020617; }
 
-#new-task-modal.showing .modal-card {
-  animation: new-task-modal-in 0.16s ease-out;
-}
+#new-task-modal.showing .modal-card { animation: new-task-modal-in 0.16s ease-out; }
 
 @keyframes new-task-modal-in {
-  from {
-    opacity: 0;
-    transform: translateY(6px) scale(0.97);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
+  from { opacity: 0; transform: translateY(6px) scale(0.97); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
 }
 
-
 @media (max-width: 480px) {
   #new-task-modal .modal-card,
-  #new-subject-modal .modal-card {
-    max-width: 90vw;
-    padding: 16px 14px 12px;
-  }
+  #new-subject-modal .modal-card { max-width: 90vw; padding: 16px 14px 12px; }
 }
 
-#new-subject-modal .subject-color-swatches {
+#new-subject-modal .subject-color-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
+#new-subject-modal .subject-color-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.25); cursor: pointer; padding: 0; flex-shrink: 0; box-sizing: border-box; transition: transform 0.12s ease, box-shadow 0.12s ease; }
+#new-subject-modal .subject-color-swatch:hover { transform: scale(1.06); }
+#new-subject-modal .subject-color-swatch--selected { box-shadow: 0 0 0 2px #0f172a, 0 0 0 4px #a5b4fc; }
+
+/* ─── Auth Modal ──────────────────────────────────────────────────────────────
+   Single source of truth for auth modal styles.
+   Visibility is controlled exclusively via .auth-modal-hidden class.
+   Do NOT add display/visibility/opacity toggles elsewhere.
+────────────────────────────────────────────────────────────────────────────── */
+.auth-modal-overlay {
+  position: fixed;
+  inset: 0;
   display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-bottom: 4px;
+  align-items: center;
+  justify-content: center;
+  background: rgba(10, 10, 10, 0.72);
+  backdrop-filter: blur(3px);
+  -webkit-backdrop-filter: blur(3px);
+  z-index: 9999;
 }
 
-#new-subject-modal .subject-color-swatch {
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
-  border: 2px solid rgba(255, 255, 255, 0.25);
-  cursor: pointer;
-  padding: 0;
-  flex-shrink: 0;
+/* The one class that hides the modal. Added/removed by JS only. */
+.auth-modal-hidden {
+  display: none !important;
+}
+
+.auth-modal-card {
+  width: min(420px, 92vw);
+  padding: 2.25rem 2rem;
+  border-radius: var(--border-radius-lg);
+  background: var(--color-background-primary);
+  border: 1px solid var(--color-border-tertiary);
+  box-shadow:
+    0 2px 8px rgba(0, 0, 0, 0.06),
+    0 12px 36px rgba(0, 0, 0, 0.12);
+  animation: auth-modal-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.auth-modal-card h2 { font-size: 20px; font-weight: 700; color: var(--color-text-primary); margin: 0 0 6px; letter-spacing: -0.01em; }
+
+.auth-modal-card p.auth-subtitle { font-size: 14px; color: var(--color-text-secondary); margin: 0 0 24px; line-height: 1.5; }
+
+.auth-modal-card input {
+  width: 100%;
+  padding: 10px 12px;
+  font-size: 14px;
+  font-family: inherit;
+  border-radius: var(--border-radius-sm);
+  border: 1px solid var(--color-border-secondary);
+  background: var(--color-background-secondary);
+  color: var(--color-text-primary);
   box-sizing: border-box;
-  transition: transform 0.12s ease, box-shadow 0.12s ease;
+  margin-bottom: 12px;
+  transition: border-color 0.18s ease, box-shadow 0.18s ease;
+  outline: none;
 }
 
-#new-subject-modal .subject-color-swatch:hover {
-  transform: scale(1.06);
+.auth-modal-card input::placeholder { color: var(--color-text-tertiary); }
+
+.auth-modal-card input:focus {
+  border-color: var(--auth-accent);
+  box-shadow: 0 0 0 3px var(--auth-accent-focus-ring);
 }
 
-#new-subject-modal .subject-color-swatch--selected {
-  box-shadow: 0 0 0 2px #0f172a, 0 0 0 4px #a5b4fc;
+.auth-modal-card .auth-submit-btn {
+  width: 100%;
+  padding: 11px;
+  background: var(--auth-accent);
+  color: #ffffff;
+  border: none;
+  border-radius: var(--border-radius-sm);
+  font-size: 14px;
+  font-weight: 600;
+  font-family: inherit;
+  cursor: pointer;
+  transition: opacity 0.18s ease;
+  margin-bottom: 4px;
 }
-/* css/index.css */
-*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
-:root {
-  --color-background-primary: #ffffff;
-  --color-background-secondary: #f7f7f5;
-  --color-background-tertiary: #efefec;
-  --color-text-primary: #1a1a18;
-  --color-text-secondary: #6b6b66;
-  --color-text-tertiary: #9c9a92;
-  --color-border-tertiary: rgba(0,0,0,0.08); /* softer */
-  --color-border-secondary: rgba(0,0,0,0.15); /* softer */
-  --color-border-primary: rgba(0,0,0,0.30);
-  
-  --color-danger-rgb: 163, 45, 45;
-  --color-info-rgb: 24, 95, 165;
-  --color-success-rgb: 22, 101, 52;
-  
-  --color-text-danger: #a32d2d;
-  --color-background-danger: #fcebeb;
-  --color-border-danger: rgba(var(--color-danger-rgb), 0.35);
-  
-  --color-text-info: #185fa5;
-  --color-background-info: #e6f1fb;
-  --color-border-info: rgba(var(--color-info-rgb), 0.35);
-  
-  --color-text-success: #166534;
-  --color-background-success: #eaf3de;
-  --color-border-success: rgba(var(--color-success-rgb), 0.35);
+.auth-modal-card .auth-submit-btn:hover  { opacity: 0.88; }
+.auth-modal-card .auth-submit-btn:active { opacity: 0.78; }
 
-  --color-text-warning: #854f0b;
-  --color-background-warning: #faeeda;
-  
-  --color-text-purple: #3c3489;
-  --color-background-purple: #eeedfe;
-  
-  --border-radius-sm: 6px;
-  --border-radius-md: 10px;
-  --border-radius-lg: 16px;
-  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
-  
-  --shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
-  --shadow-md: 0 4px 16px rgba(0,0,0,0.06);
-  --shadow-lg: 0 8px 32px rgba(0,0,0,0.08);
-}
+.auth-modal-card .auth-footer-text { text-align: center; margin-top: 16px; font-size: 13px; color: var(--color-text-secondary); }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-background-primary: #181816;
-    --color-background-secondary: #20201e;
-    --color-background-tertiary: #272725;
-    --color-text-primary: #efede5;
-    --color-text-secondary: #a3a198;
-    --color-text-tertiary: #73726c;
-    --color-border-tertiary: rgba(255,255,255,0.06);
-    --color-border-secondary: rgba(255,255,255,0.12);
-    --color-border-primary: rgba(255,255,255,0.22);
-    --color-text-danger: #fc9c9c;
-    --color-background-danger: rgba(252, 156, 156, 0.15);
-    --color-border-danger: rgba(252,156,156,0.3);
-    
-    --color-text-info: #9ecdfc;
-    --color-background-info: rgba(158, 205, 252, 0.15);
-    --color-border-info: rgba(158,205,252,0.3);
-    
-    --color-text-success: #a0d45a;
-    --color-background-success: rgba(160, 212, 90, 0.15);
-    --color-border-success: rgba(160,212,90,0.3);
+.auth-modal-card .auth-toggle-link { color: var(--auth-accent); font-weight: 600; margin-left: 4px; text-decoration: none; cursor: pointer; }
+.auth-modal-card .auth-toggle-link:hover { text-decoration: underline; }
 
-    --color-text-warning: #fab35e;
-    --color-background-warning: rgba(250, 179, 94, 0.15);
+.auth-modal-card .auth-error {
+  font-size: 13px;
+  color: var(--color-text-danger);
+  background: var(--color-background-danger);
+  border: 1px solid var(--color-border-danger);
+  border-radius: var(--border-radius-sm);
+  padding: 8px 12px;
+  margin-top: 10px;
+  text-align: center;
+  display: none;
+}
 
-    --color-text-purple: #b9b5f5;
-    --color-background-purple: rgba(185, 181, 245, 0.15);
-  }
+@media (max-width: 480px) {
+  .auth-modal-card { padding: 1.5rem; }
 }
 
+/* Settings toggle switch */
+.toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; }
+.toggle-switch input { opacity: 0; width: 0; height: 0; }
+.toggle-slider { position: absolute; cursor: pointer; inset: 0; background: var(--color-border-secondary); border-radius: 24px; transition: background 0.2s; }
+.toggle-slider::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; bottom: 3px; background: #ffffff; border-radius: 50%; transition: transform 0.2s; }
+.toggle-switch input:checked + .toggle-slider { background: var(--color-text-primary); }
+.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }
+.toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid var(--auth-accent); outline-offset: 2px; }
+
+/* Theme overrides */
 :root[data-theme="dark"] {
   --color-background-primary: #181816;
   --color-background-secondary: #20201e;
@@ -884,18 +525,14 @@ body {
   --color-text-danger: #fc9c9c;
   --color-background-danger: rgba(252, 156, 156, 0.15);
   --color-border-danger: rgba(252,156,156,0.3);
-  
   --color-text-info: #9ecdfc;
   --color-background-info: rgba(158, 205, 252, 0.15);
   --color-border-info: rgba(158,205,252,0.3);
-  
   --color-text-success: #a0d45a;
   --color-background-success: rgba(160, 212, 90, 0.15);
   --color-border-success: rgba(160,212,90,0.3);
-
   --color-text-warning: #fab35e;
   --color-background-warning: rgba(250, 179, 94, 0.15);
-
   --color-text-purple: #b9b5f5;
   --color-background-purple: rgba(185, 181, 245, 0.15);
 }
@@ -907,1256 +544,20 @@ body {
   --color-text-primary: #1a1a18;
   --color-text-secondary: #6b6b66;
   --color-text-tertiary: #9c9a92;
-  --color-border-tertiary: rgba(0,0,0,0.08); 
-  --color-border-secondary: rgba(0,0,0,0.15); 
+  --color-border-tertiary: rgba(0,0,0,0.08);
+  --color-border-secondary: rgba(0,0,0,0.15);
   --color-border-primary: rgba(0,0,0,0.30);
-  
   --color-text-danger: #a32d2d;
   --color-background-danger: #fcebeb;
   --color-border-danger: rgba(163, 45, 45, 0.35);
-  
   --color-text-info: #185fa5;
   --color-background-info: #e6f1fb;
   --color-border-info: rgba(24, 95, 165, 0.35);
-  
   --color-text-success: #166534;
   --color-background-success: #eaf3de;
   --color-border-success: rgba(22, 101, 52, 0.35);
-
   --color-text-warning: #854f0b;
   --color-background-warning: #faeeda;
-  
   --color-text-purple: #3c3489;
   --color-background-purple: #eeedfe;
 }
-
-body {
-  font-family: var(--font-sans);
-  background: var(--color-background-tertiary);
-  color: var(--color-text-primary);
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 32px 16px;
-  overflow-x: hidden;
-}
-
-/* Animations */
-@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
-@keyframes popIn { 0% { transform: scale(0.95); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
-
-.wrapper { width: 100%; max-width: 1200px; animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
-
-.label {
-  font-size: 12px; font-weight: 600; color: var(--color-text-tertiary);
-  letter-spacing: .08em; margin-bottom: 12px; text-transform: uppercase;
-}
-
-.app {
-  display: grid;
-  grid-template-columns: 240px 1fr 340px;
-  height: 720px;
-  border: 1px solid var(--color-border-tertiary);
-  border-radius: var(--border-radius-lg);
-  overflow: hidden;
-  background: var(--color-background-primary);
-  box-shadow: var(--shadow-lg);
-  backdrop-filter: blur(20px);
-}
-
-/* Sidebar */
-.sidebar {
-  background: var(--color-background-secondary); border-right: 1px solid var(--color-border-tertiary);
-  padding: 20px 16px; display: flex; flex-direction: column; gap: 4px;
-}
-.sidebar-header { font-size: 11px; font-weight: 700; color: var(--color-text-tertiary); padding: 8px 12px; margin-bottom: 2px; letter-spacing: .06em; text-transform: uppercase; }
-.nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--border-radius-md); cursor: pointer; font-size: 14px; font-weight: 500; color: var(--color-text-secondary); transition: all 0.2s ease; position: relative; }
-.nav-item:hover { background: var(--color-background-primary); color: var(--color-text-primary); transform: translateX(2px); }
-.nav-item.active { background: var(--color-background-primary); color: var(--color-text-primary); box-shadow: var(--shadow-sm); }
-.nav-item.active::before { content: ''; position: absolute; left: 0; top: 15%; height: 70%; width: 3px; background: var(--color-text-primary); border-radius: 4px; }
-.nav-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1); }
-.badge { margin-left: auto; font-size: 12px; font-weight: 600; background: var(--color-background-tertiary); color: var(--color-text-secondary); padding: 2px 8px; border-radius: 12px; transition: all 0.2s; }
-.nav-item:hover .badge { background: var(--color-background-primary); border: 1px solid var(--color-border-tertiary); }
-.sidebar-divider { height: 1px; background: var(--color-border-tertiary); margin: 12px 0; }
-.add-subject { font-size: 13px; font-weight: 500; color: var(--color-text-tertiary); padding: 8px 12px; cursor: pointer; transition: color 0.2s; display: flex; align-items: center; gap: 8px; }
-.add-subject:hover { color: var(--color-text-primary); }
-
-/* Main */
-.main { display: flex; flex-direction: column; overflow: hidden; position: relative; }
-.topbar { display: flex; align-items: center; gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--color-border-tertiary); flex-shrink: 0; background: rgba(var(--color-background-primary), 0.8); backdrop-filter: blur(10px); z-index: 10; }
-.topbar-title { font-size: 18px; font-weight: 600; color: var(--color-text-primary); flex: 1; }
-.btn { font-family: inherit; font-size: 13px; font-weight: 600; padding: 8px 16px; border: 1px solid var(--color-border-secondary); border-radius: var(--border-radius-sm); background: var(--color-background-primary); color: var(--color-text-primary); cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: var(--shadow-sm); display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
-.btn:hover { background: var(--color-background-secondary); transform: translateY(-1px); box-shadow: var(--shadow-md); }
-.btn:active { transform: translateY(0); box-shadow: 0 0 0; }
-.btn-primary { background: var(--color-text-primary); color: var(--color-background-primary); border-color: transparent; }
-.btn-primary:hover { background: var(--color-text-secondary); }
-
-/* Calendar */
-.cal-section { padding: 16px 24px; border-bottom: 1px solid var(--color-border-tertiary); flex-shrink: 0; }
-.cal-header { display: flex; align-items: center; margin-bottom: 16px; }
-.cal-title { font-size: 15px; font-weight: 600; flex: 1; color: var(--color-text-primary); }
-.cal-nav { font-size: 18px; color: var(--color-text-secondary); cursor: pointer; padding: 4px 8px; border-radius: 4px; transition: background 0.2s; }
-.cal-nav:hover { background: var(--color-background-secondary); color: var(--color-text-primary); }
-.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
-.cal-day-label { font-size: 11px; color: var(--color-text-tertiary); padding-bottom: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
-.cal-day { font-size: 13px; font-weight: 500; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--border-radius-md); cursor: pointer; color: var(--color-text-secondary); position: relative; transition: all 0.2s; }
-.cal-day:hover { background: var(--color-background-secondary); color: var(--color-text-primary); transform: scale(1.1); z-index: 1; }
-.cal-day.today { background: var(--color-text-primary); color: var(--color-background-primary); box-shadow: var(--shadow-sm); }
-.cal-day-indicators { position: absolute; bottom: 3px; left: 0; right: 0; display: flex; justify-content: center; gap: 3px; }
-.cal-day-indicator { width: 5px; height: 5px; border-radius: 50%; }
-.cal-day.muted { color: var(--color-border-secondary); }
-.cal-legend { display: flex; gap: 16px; margin-top: 16px; font-size: 11px; font-weight: 500; color: var(--color-text-tertiary); justify-content: flex-end; }
-.cal-legend span { display: flex; align-items: center; gap: 6px; }
-.legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
-
-/* Tasks */
-.tasks-section { flex: 1; overflow-y: auto; padding: 0 24px 24px; scroll-behavior: smooth; }
-.tasks-section::-webkit-scrollbar { width: 6px; }
-.tasks-section::-webkit-scrollbar-thumb { background: var(--color-border-secondary); border-radius: 10px; }
-.tasks-actions-bar {
-  margin-top: 18px;
-  display: flex;
-  gap: 10px;
-  flex-wrap: wrap;
-}
-.task-action-btn {
-  border: 1px solid var(--color-border-success);
-  background: var(--color-background-success);
-  color: var(--color-text-success);
-  border-radius: var(--border-radius-sm);
-  padding: 7px 12px;
-  font-size: 12px;
-  font-weight: 700;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-.task-action-btn:hover {
-  filter: brightness(0.98);
-  transform: translateY(-1px);
-}
-.task-action-btn:disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
-  transform: none;
-  filter: none;
-}
-.task-action-btn-secondary {
-  border-color: var(--color-border-info);
-  background: var(--color-background-info);
-  color: var(--color-text-info);
-}
-.tasks-empty-state {
-  margin-top: 14px;
-  padding: 14px;
-  border-radius: var(--border-radius-md);
-  border: 1px dashed var(--color-border-secondary);
-  color: var(--color-text-secondary);
-  font-size: 13px;
-  background: var(--color-background-secondary);
-}
-.tasks-group { margin-top: 24px; animation: fadeIn 0.4s ease forwards; }
-.tasks-group-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
-.tasks-group-header span { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
-
-.task-item {
-  display: flex; align-items: flex-start; gap: 14px; padding: 12px 14px;
-  border-radius: var(--border-radius-md); cursor: pointer;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  border: 1px solid transparent; background: var(--color-background-primary);
-  margin-bottom: 6px;
-  border: 1px solid var(--color-border-tertiary);
-}
-.task-item:hover { background: var(--color-background-secondary); transform: translateX(4px); border-color: var(--color-border-secondary); box-shadow: var(--shadow-sm); }
-.task-item.urgent { border-color: var(--color-border-danger); background: linear-gradient(to right, var(--color-background-danger) 0%, var(--color-background-primary) 100%); }
-.task-check { width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--color-border-secondary); flex-shrink: 0; margin-top: 2px; transition: all 0.2s; position: relative; cursor: pointer; }
-.task-check:hover { border-color: var(--color-text-primary); }
-.task-check.done { background: var(--color-text-success); border-color: var(--color-text-success); }
-.task-check.done::after { content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); }
-.task-info { flex: 1; min-width: 0; }
-.task-name { font-size: 14px; font-weight: 500; color: var(--color-text-primary); line-height: 1.4; transition: color 0.2s; margin-bottom: 6px; }
-.task-item.done .task-name { text-decoration: line-through; color: var(--color-text-tertiary); }
-.task-meta { font-size: 12px; color: var(--color-text-tertiary); margin-top: 6px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-weight: 500; }
-.task-pill { font-size: 11px; padding: 2px 8px; border-radius: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; border: 1px solid transparent; }
-.pill-red  { background: var(--color-background-danger); color: var(--color-text-danger); border-color: var(--color-border-danger); }
-.pill-blue { background: var(--color-background-info); color: var(--color-text-info); border-color: var(--color-border-info); }
-.pill-green{ background: var(--color-background-success); color: var(--color-text-success); border-color: var(--color-border-success); }
-.pill-amber{ background: var(--color-background-warning); color: var(--color-text-warning); border-color: rgba(133, 79, 11, 0.2); }
-.pill-purple{ background: var(--color-background-purple); color: var(--color-text-purple); border-color: rgba(60, 52, 137, 0.2); }
-
-.conflict-card { font-size: 13px; font-weight: 500; color: var(--color-text-warning); background: var(--color-background-warning); border: 1px solid rgba(133, 79, 11, 0.3); border-radius: var(--border-radius-md); padding: 12px 16px; line-height: 1.5; display: flex; gap: 12px; align-items: flex-start; box-shadow: var(--shadow-sm); }
-.conflict-icon { font-size: 18px; line-height: 1; }
-
-.task-actions {
-  display: flex;
-  gap: 8px;
-  opacity: 0;
-  transition: opacity 0.2s;
-}
-.task-item:hover .task-actions {
-  opacity: 1;
-}
-.task-btn {
-  padding: 4px 8px;
-  border-radius: 4px;
-  font-size: 11px;
-  font-weight: 600;
-  cursor: pointer;
-  border: 1px solid var(--color-border-secondary);
-  background: var(--color-background-primary);
-  color: var(--color-text-secondary);
-  transition: all 0.2s;
-}
-.task-btn:hover {
-  background: var(--color-background-secondary);
-  color: var(--color-text-primary);
-  border-color: var(--color-border-primary);
-}
-.task-btn-danger:hover {
-  background: var(--color-background-danger);
-  color: var(--color-text-danger);
-  border-color: var(--color-text-danger);
-}
-.task-btn-info:hover {
-  background: var(--color-background-info);
-  color: var(--color-text-info);
-  border-color: var(--color-text-info);
-}
-
-/* Right Panel */
-.panel { border-left: 1px solid var(--color-border-tertiary); display: flex; flex-direction: column; background: var(--color-background-secondary); overflow: hidden; }
-.panel-header { padding: 20px 24px 16px; border-bottom: 1px solid var(--color-border-tertiary); background: var(--color-background-primary); flex-shrink: 0; }
-.panel-title { font-size: 16px; font-weight: 600; color: var(--color-text-primary); display: flex; align-items: center; gap: 8px; }
-.panel-title svg { opacity: 0.8; }
-.panel-subtitle { font-size: 12px; font-weight: 500; color: var(--color-text-tertiary); margin-top: 4px; }
-
-.paste-zone { margin: 20px 20px 12px; border: 2px dashed var(--color-border-secondary); border-radius: var(--border-radius-lg); padding: 24px 20px; text-align: center; cursor: text; transition: all 0.2s; background: var(--color-background-primary); display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; min-height: 120px; overflow: hidden; }
-.paste-zone:hover { border-color: var(--color-text-info); background: var(--color-background-info); }
-.paste-zone:focus-within { border-color: var(--color-text-primary); border-style: solid; box-shadow: inset 0 0 0 1px var(--color-text-primary); outline: none; }
-.paste-icon { font-size: 24px; margin-bottom: 8px; color: var(--color-text-secondary); transition: color 0.2s; }
-.paste-zone:hover .paste-icon { color: var(--color-text-info); }
-
-.paste-input {
-  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
-  width: 100%; height: 100%; opacity: 0; resize: none; border: none; padding: 20px; font-family: inherit; font-size: 13px; z-index: 2;
-}
-
-.summary-box {
-  margin-top: 16px;
-  padding: 14px;
-  background: var(--color-background-secondary);
-  color: var(--color-text-primary);
-  border-radius: 12px;
-  font-size: 14px;
-  line-height: 1.6;
-  border: 1px solid var(--color-border-tertiary);
-}
-
-.paste-input:focus, .paste-input:not(:placeholder-shown) { opacity: 1; z-index: 10; background: var(--color-background-primary); color: var(--color-text-primary); outline: none; }
-.paste-label { font-size: 14px; font-weight: 600; color: var(--color-text-primary); margin-bottom: 4px; pointer-events: none; }
-.paste-hint { font-size: 12px; color: var(--color-text-tertiary); line-height: 1.5; pointer-events: none; }
-
-.paste-actions { padding: 0 20px 16px; display: flex; gap: 12px; }
-
-.extract-preview { flex: 1; overflow-y: auto; padding: 0 20px 20px; scroll-behavior: smooth; }
-.extract-preview::-webkit-scrollbar { width: 6px; }
-.extract-preview::-webkit-scrollbar-thumb { background: var(--color-border-secondary); border-radius: 10px; }
-.extract-title { font-size: 11px; font-weight: 700; color: var(--color-text-tertiary); margin-bottom: 12px; letter-spacing: .06em; text-transform: uppercase; display: flex; align-items: center; justify-content: space-between; }
-
-.extract-card { background: var(--color-background-primary); border: 1px solid var(--color-border-tertiary); border-radius: var(--border-radius-md); padding: 14px 16px; margin-bottom: 12px; box-shadow: var(--shadow-sm); animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; transform-origin: center; position: relative; overflow: hidden; }
-.extract-subject { font-size: 11px; font-weight: 700; margin-bottom: 6px; letter-spacing: .04em; text-transform: uppercase; }
-.extract-task-name { font-size: 14px; font-weight: 600; color: var(--color-text-primary); margin-bottom: 8px; line-height: 1.4; }
-.extract-row { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: var(--color-text-secondary); margin-top: 4px; }
-.extract-icon { font-size: 14px; }
-.conf-bar { height: 4px; border-radius: 2px; margin-top: 12px; background: var(--color-border-tertiary); overflow: hidden; }
-.conf-fill { height: 100%; border-radius: 2px; transition: width 1s cubic-bezier(0.16, 1, 0.3, 1); }
-.conf-label { font-size: 11px; font-weight: 600; color: var(--color-text-tertiary); margin-top: 6px; display: flex; justify-content: space-between; }
-.conf-edit { color: var(--color-text-info); cursor: pointer; transition: color 0.2s; }
-.conf-edit:hover { color: var(--color-text-primary); }
-
-.add-btn { margin: 0 20px 20px; padding: 12px; border: none; border-radius: var(--border-radius-md); background: var(--color-text-primary); color: var(--color-background-primary); font-size: 14px; font-weight: 600; cursor: pointer; text-align: center; flex-shrink: 0; box-shadow: 0 4px 12px rgba(0,0,0,0.15); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
-.add-btn:hover:not(:disabled) { background: var(--color-text-secondary); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); }
-.add-btn:active:not(:disabled) { transform: translateY(0); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
-.add-btn:disabled { background: var(--color-border-secondary); cursor: not-allowed; transform: none; box-shadow: none; color: var(--color-text-tertiary); }
-
-/* Loader */
-.loader-spinner {
-  display: inline-block;
-  width: 16px;
-  height: 16px;
-  border: 2px solid rgba(0,0,0,0.1);
-  border-radius: 50%;
-  border-top-color: var(--color-text-primary);
-  animation: spin 0.8s linear infinite;
-}
-@media (prefers-color-scheme: dark) {
-  .loader-spinner { border-color: rgba(255,255,255,0.1); border-top-color: #fff; }
-}
-@keyframes spin { to { transform: rotate(360deg); } }
-
-/* Utility classes */
-.hidden { display: none !important; }
-
-
-
-/* Header */
-.site-header {
-  width: 100%;
-  max-width: 1200px;
-  margin: 0 auto 16px auto;
-  padding: 16px 24px;
-  background: var(--color-background-primary);
-  border: 1px solid var(--color-border-tertiary);
-  border-radius: var(--border-radius-lg);
-  box-shadow: var(--shadow-md);
-
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.header-left {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.logo {
-  width: 40px;
-  height: 40px;
-  border-radius: 2px;
-}
-
-.site-title {
-  font-size: 20px;
-  font-weight: 700;
-  color: var(--color-text-primary);
-}
-
-.header-nav {
-  display: flex;
-  gap: 24px;
-}
-
-.header-nav a {
-  text-decoration: none;
-  color: var(--color-text-secondary);
-  font-weight: 500;
-  transition: color 0.2s;
-}
-
-.header-nav a:hover {
-  color: var(--color-text-primary);
-}
-
-.profile-btn {
-  padding: 8px 16px;
-  border: none;
-  border-radius: var(--border-radius-md);
-  background: var(--color-text-primary);
-  color: var(--color-background-primary);
-  cursor: pointer;
-  font-weight: 600;
-}
-
-/* Footer */
-.site-footer {
-  width: 100%;
-  max-width: 1200px;
-  margin: 16px auto 0 auto;
-  padding: 16px 24px;
-  background: var(--color-background-primary);
-  border: 1px solid var(--color-border-tertiary);
-  border-radius: var(--border-radius-lg);
-  box-shadow: var(--shadow-md);
-
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  color: var(--color-text-secondary);
-  font-size: 14px;
-}
-
-.footer-links {
-  display: flex;
-  gap: 16px;
-}
-
-.footer-links a {
-  text-decoration: none;
-  color: var(--color-text-secondary);
-}
-
-.footer-links a:hover {
-  color: var(--color-text-primary);
-}
-
-/* Settings Toggle Switch */
-.toggle-switch {
-  position: relative;
-  display: inline-block;
-  width: 44px;
-  height: 24px;
-}
-.toggle-switch input { 
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-.toggle-slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0; left: 0; right: 0; bottom: 0;
-  background-color: var(--color-border-primary);
-  transition: .3s;
-  border-radius: 24px;
-}
-.toggle-slider:before {
-  position: absolute;
-  content: "";
-  height: 18px;
-  width: 18px;
-  left: 3px;
-  bottom: 3px;
-  background-color: var(--color-background-primary);
-  transition: .3s;
-  border-radius: 50%;
-}
-.toggle-switch input:checked + .toggle-slider {
-  background-color: var(--color-text-success);
-}
-.toggle-switch input:checked + .toggle-slider:before {
-  transform: translateX(20px);
-}
-
-/* Compact View utility classes */
-body.compact-view {
-  padding: 16px 8px;
-}
-body.compact-view .app {
-  height: 600px;
-}
-body.compact-view .task-item {
-  padding: 8px 10px;
-  margin-bottom: 4px;
-}
-body.compact-view .nav-item {
-  padding: 8px 10px;
-  font-size: 13px;
-}
-body.compact-view .topbar {
-  padding: 12px 16px;
-}
-body.compact-view .cal-section,
-body.compact-view .tasks-section {
-  padding: 12px 16px;
-}
-/* css/index.css */
-*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-
-:root {
-  --color-background-primary: #ffffff;
-  --color-background-secondary: #f7f7f5;
-  --color-background-tertiary: #efefec;
-  --color-text-primary: #1a1a18;
-  --color-text-secondary: #6b6b66;
-  --color-text-tertiary: #9c9a92;
-  --color-border-tertiary: rgba(0,0,0,0.08); /* softer */
-  --color-border-secondary: rgba(0,0,0,0.15); /* softer */
-  --color-border-primary: rgba(0,0,0,0.30);
-  
-  --color-danger-rgb: 163, 45, 45;
-  --color-info-rgb: 24, 95, 165;
-  --color-success-rgb: 22, 101, 52;
-  
-  --color-text-danger: #a32d2d;
-  --color-background-danger: #fcebeb;
-  --color-border-danger: rgba(var(--color-danger-rgb), 0.35);
-  
-  --color-text-info: #185fa5;
-  --color-background-info: #e6f1fb;
-  --color-border-info: rgba(var(--color-info-rgb), 0.35);
-  
-  --color-text-success: #166534;
-  --color-background-success: #eaf3de;
-  --color-border-success: rgba(var(--color-success-rgb), 0.35);
-
-  --color-text-warning: #854f0b;
-  --color-background-warning: #faeeda;
-  
-  --color-text-purple: #3c3489;
-  --color-background-purple: #eeedfe;
-  
-  --border-radius-sm: 6px;
-  --border-radius-md: 10px;
-  --border-radius-lg: 16px;
-  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
-  
-  --shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
-  --shadow-md: 0 4px 16px rgba(0,0,0,0.06);
-  --shadow-lg: 0 8px 32px rgba(0,0,0,0.08);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-background-primary: #181816;
-    --color-background-secondary: #20201e;
-    --color-background-tertiary: #272725;
-    --color-text-primary: #efede5;
-    --color-text-secondary: #a3a198;
-    --color-text-tertiary: #73726c;
-    --color-border-tertiary: rgba(255,255,255,0.06);
-    --color-border-secondary: rgba(255,255,255,0.12);
-    --color-border-primary: rgba(255,255,255,0.22);
-    --color-text-danger: #fc9c9c;
-    --color-background-danger: rgba(252, 156, 156, 0.15);
-    --color-border-danger: rgba(252,156,156,0.3);
-    
-    --color-text-info: #9ecdfc;
-    --color-background-info: rgba(158, 205, 252, 0.15);
-    --color-border-info: rgba(158,205,252,0.3);
-    
-    --color-text-success: #a0d45a;
-    --color-background-success: rgba(160, 212, 90, 0.15);
-    --color-border-success: rgba(160,212,90,0.3);
-
-    --color-text-warning: #fab35e;
-    --color-background-warning: rgba(250, 179, 94, 0.15);
-
-    --color-text-purple: #b9b5f5;
-    --color-background-purple: rgba(185, 181, 245, 0.15);
-  }
-}
-
-body {
-  font-family: var(--font-sans);
-  background: var(--color-background-tertiary);
-  color: var(--color-text-primary);
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 32px 16px;
-  overflow-x: hidden;
-}
-
-/* Animations */
-@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
-@keyframes popIn { 0% { transform: scale(0.95); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
-
-.wrapper { width: 100%; max-width: 1200px; animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
-
-.label {
-  font-size: 12px; font-weight: 600; color: var(--color-text-tertiary);
-  letter-spacing: .08em; margin-bottom: 12px; text-transform: uppercase;
-}
-
-.app {
-  display: grid;
-  grid-template-columns: 240px 1fr var(--panel-width, 340px);
-  height: 720px;
-  border: 1px solid var(--color-border-tertiary);
-  border-radius: var(--border-radius-lg);
-  overflow: hidden;
-  background: var(--color-background-primary);
-  box-shadow: var(--shadow-lg);
-  backdrop-filter: blur(20px);
-}
-
-/* Sidebar */
-.sidebar {
-  background: var(--color-background-secondary); border-right: 1px solid var(--color-border-tertiary);
-  padding: 20px 16px; display: flex; flex-direction: column; gap: 4px;
-}
-.sidebar-header { font-size: 11px; font-weight: 700; color: var(--color-text-tertiary); padding: 8px 12px; margin-bottom: 2px; letter-spacing: .06em; text-transform: uppercase; }
-.nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--border-radius-md); cursor: pointer; font-size: 14px; font-weight: 500; color: var(--color-text-secondary); transition: all 0.2s ease; position: relative; }
-.nav-item:hover { background: var(--color-background-primary); color: var(--color-text-primary); transform: translateX(2px); }
-.nav-item.active { background: var(--color-background-primary); color: var(--color-text-primary); box-shadow: var(--shadow-sm); }
-.nav-item.active::before { content: ''; position: absolute; left: 0; top: 15%; height: 70%; width: 3px; background: var(--color-text-primary); border-radius: 4px; }
-.nav-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1); }
-.badge { margin-left: auto; font-size: 12px; font-weight: 600; background: var(--color-background-tertiary); color: var(--color-text-secondary); padding: 2px 8px; border-radius: 12px; transition: all 0.2s; }
-.nav-item:hover .badge { background: var(--color-background-primary); border: 1px solid var(--color-border-tertiary); }
-.sidebar-divider { height: 1px; background: var(--color-border-tertiary); margin: 12px 0; }
-.add-subject { font-size: 13px; font-weight: 500; color: var(--color-text-tertiary); padding: 8px 12px; cursor: pointer; transition: color 0.2s; display: flex; align-items: center; gap: 8px; }
-.add-subject:hover { color: var(--color-text-primary); }
-
-/* Main */
-.main { display: flex; flex-direction: column; overflow: hidden; position: relative; }
-.topbar { display: flex; align-items: center; gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--color-border-tertiary); flex-shrink: 0; background: rgba(var(--color-background-primary), 0.8); backdrop-filter: blur(10px); z-index: 10; }
-.topbar-title { font-size: 18px; font-weight: 600; color: var(--color-text-primary); flex: 1; }
-.btn { font-family: inherit; font-size: 13px; font-weight: 600; padding: 8px 16px; border: 1px solid var(--color-border-secondary); border-radius: var(--border-radius-sm); background: var(--color-background-primary); color: var(--color-text-primary); cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: var(--shadow-sm); display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
-.btn:hover { background: var(--color-background-secondary); transform: translateY(-1px); box-shadow: var(--shadow-md); }
-.btn:active { transform: translateY(0); box-shadow: 0 0 0; }
-.btn-primary { background: var(--color-text-primary); color: var(--color-background-primary); border-color: transparent; }
-.btn-primary:hover { background: var(--color-text-secondary); }
-
-/* Calendar */
-.cal-section { padding: 16px 24px; border-bottom: 1px solid var(--color-border-tertiary); flex-shrink: 0; }
-.cal-header { display: flex; align-items: center; margin-bottom: 16px; }
-.cal-title { font-size: 15px; font-weight: 600; flex: 1; color: var(--color-text-primary); }
-.cal-nav { font-size: 18px; color: var(--color-text-secondary); cursor: pointer; padding: 4px 8px; border-radius: 4px; transition: background 0.2s; }
-.cal-nav:hover { background: var(--color-background-secondary); color: var(--color-text-primary); }
-.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
-.cal-day-label { font-size: 11px; color: var(--color-text-tertiary); padding-bottom: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
-.cal-day { font-size: 13px; font-weight: 500; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--border-radius-md); cursor: pointer; color: var(--color-text-secondary); position: relative; transition: all 0.2s; }
-.cal-day:hover { background: var(--color-background-secondary); color: var(--color-text-primary); transform: scale(1.1); z-index: 1; }
-.cal-day.today { background: var(--color-text-primary); color: var(--color-background-primary); box-shadow: var(--shadow-sm); }
-.cal-day-indicators { position: absolute; bottom: 3px; left: 0; right: 0; display: flex; justify-content: center; gap: 3px; }
-.cal-day-indicator { width: 5px; height: 5px; border-radius: 50%; }
-.cal-day.muted { color: var(--color-border-secondary); }
-.cal-legend { display: flex; gap: 16px; margin-top: 16px; font-size: 11px; font-weight: 500; color: var(--color-text-tertiary); justify-content: flex-end; }
-.cal-legend span { display: flex; align-items: center; gap: 6px; }
-.legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
-
-/* Tasks */
-.tasks-section { flex: 1; overflow-y: auto; padding: 0 24px 24px; scroll-behavior: smooth; }
-.tasks-section::-webkit-scrollbar { width: 6px; }
-.tasks-section::-webkit-scrollbar-thumb { background: var(--color-border-secondary); border-radius: 10px; }
-.tasks-actions-bar {
-  margin-top: 18px;
-  display: flex;
-  gap: 10px;
-  flex-wrap: wrap;
-}
-.task-action-btn {
-  border: 1px solid var(--color-border-success);
-  background: var(--color-background-success);
-  color: var(--color-text-success);
-  border-radius: var(--border-radius-sm);
-  padding: 7px 12px;
-  font-size: 12px;
-  font-weight: 700;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-.task-action-btn:hover {
-  filter: brightness(0.98);
-  transform: translateY(-1px);
-}
-.task-action-btn:disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
-  transform: none;
-  filter: none;
-}
-.task-action-btn-secondary {
-  border-color: var(--color-border-info);
-  background: var(--color-background-info);
-  color: var(--color-text-info);
-}
-.tasks-empty-state {
-  margin-top: 14px;
-  padding: 14px;
-  border-radius: var(--border-radius-md);
-  border: 1px dashed var(--color-border-secondary);
-  color: var(--color-text-secondary);
-  font-size: 13px;
-  background: var(--color-background-secondary);
-}
-.tasks-group { margin-top: 24px; animation: fadeIn 0.4s ease forwards; }
-.tasks-group-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
-.tasks-group-header span { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
-
-.task-item {
-  display: flex; align-items: flex-start; gap: 14px; padding: 12px 14px;
-  border-radius: var(--border-radius-md); cursor: pointer;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  border: 1px solid transparent; background: var(--color-background-primary);
-  margin-bottom: 6px;
-  border: 1px solid var(--color-border-tertiary);
-}
-.task-item:hover { background: var(--color-background-secondary); transform: translateX(4px); border-color: var(--color-border-secondary); box-shadow: var(--shadow-sm); }
-.task-item.urgent { border-color: var(--color-border-danger); background: linear-gradient(to right, var(--color-background-danger) 0%, var(--color-background-primary) 100%); }
-.task-check { width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--color-border-secondary); flex-shrink: 0; margin-top: 2px; transition: all 0.2s; position: relative; cursor: pointer; }
-.task-check:hover { border-color: var(--color-text-primary); }
-.task-check.done { background: var(--color-text-success); border-color: var(--color-text-success); }
-.task-check.done::after { content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); }
-.task-info { flex: 1; min-width: 0; }
-.task-name { font-size: 14px; font-weight: 500; color: var(--color-text-primary); line-height: 1.4; transition: color 0.2s; margin-bottom: 6px; }
-.task-item.done .task-name { text-decoration: line-through; color: var(--color-text-tertiary); }
-.task-meta { font-size: 12px; color: var(--color-text-tertiary); margin-top: 6px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-weight: 500; }
-.task-pill { font-size: 11px; padding: 2px 8px; border-radius: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; border: 1px solid transparent; }
-.pill-red  { background: var(--color-background-danger); color: var(--color-text-danger); border-color: var(--color-border-danger); }
-.pill-blue { background: var(--color-background-info); color: var(--color-text-info); border-color: var(--color-border-info); }
-.pill-green{ background: var(--color-background-success); color: var(--color-text-success); border-color: var(--color-border-success); }
-.pill-amber{ background: var(--color-background-warning); color: var(--color-text-warning); border-color: rgba(133, 79, 11, 0.2); }
-.pill-purple{ background: var(--color-background-purple); color: var(--color-text-purple); border-color: rgba(60, 52, 137, 0.2); }
-
-.conflict-card { font-size: 13px; font-weight: 500; color: var(--color-text-warning); background: var(--color-background-warning); border: 1px solid rgba(133, 79, 11, 0.3); border-radius: var(--border-radius-md); padding: 12px 16px; line-height: 1.5; display: flex; gap: 12px; align-items: flex-start; box-shadow: var(--shadow-sm); }
-.conflict-icon { font-size: 18px; line-height: 1; }
-
-.task-actions {
-  display: flex;
-  gap: 8px;
-  opacity: 0;
-  transition: opacity 0.2s;
-}
-.task-item:hover .task-actions {
-  opacity: 1;
-}
-.task-btn {
-  padding: 4px 8px;
-  border-radius: 4px;
-  font-size: 11px;
-  font-weight: 600;
-  cursor: pointer;
-  border: 1px solid var(--color-border-secondary);
-  background: var(--color-background-primary);
-  color: var(--color-text-secondary);
-  transition: all 0.2s;
-}
-.task-btn:hover {
-  background: var(--color-background-secondary);
-  color: var(--color-text-primary);
-  border-color: var(--color-border-primary);
-}
-.task-btn-danger:hover {
-  background: var(--color-background-danger);
-  color: var(--color-text-danger);
-  border-color: var(--color-text-danger);
-}
-.task-btn-info:hover {
-  background: var(--color-background-info);
-  color: var(--color-text-info);
-  border-color: var(--color-text-info);
-}
-
-/* Right Panel */
-.panel { border-left: 1px solid var(--color-border-tertiary); display: flex; flex-direction: column; background: var(--color-background-secondary); overflow: hidden; }
-.panel.panel-collapsed { overflow: visible; }
-.panel.panel-collapsed .panel-title,
-.panel.panel-collapsed .panel-subtitle,
-.panel.panel-collapsed .paste-zone,
-.panel.panel-collapsed .paste-actions,
-.panel.panel-collapsed .extract-preview,
-.panel.panel-collapsed .add-btn { display: none; }
-.panel-header { padding: 20px 24px 16px; border-bottom: 1px solid var(--color-border-tertiary); background: var(--color-background-primary); flex-shrink: 0; display: flex; align-items: flex-start; gap: 10px; }
-.panel.panel-collapsed .panel-header { padding: 12px; justify-content: center; border-bottom: none; }
-.panel-toggle-btn { flex-shrink: 0; background: none; border: 1px solid var(--color-border-secondary); border-radius: var(--border-radius-sm); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--color-text-secondary); transition: all 0.2s; margin-top: 2px; }
-.panel-toggle-btn:hover { background: var(--color-background-secondary); color: var(--color-text-primary); }
-.panel-toggle-icon { transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); }
-.panel-title { font-size: 16px; font-weight: 600; color: var(--color-text-primary); display: flex; align-items: center; gap: 8px; }
-.panel-title svg { opacity: 0.8; }
-.panel-subtitle { font-size: 12px; font-weight: 500; color: var(--color-text-tertiary); margin-top: 4px; }
-
-.paste-zone { margin: 20px 20px 12px; border: 2px dashed var(--color-border-secondary); border-radius: var(--border-radius-lg); padding: 24px 20px; text-align: center; cursor: text; transition: all 0.2s; background: var(--color-background-primary); display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; min-height: 120px; overflow: hidden; }
-.paste-zone:hover { border-color: var(--color-text-info); background: var(--color-background-info); }
-.paste-zone:focus-within { border-color: var(--color-text-primary); border-style: solid; box-shadow: inset 0 0 0 1px var(--color-text-primary); outline: none; }
-.paste-icon { font-size: 24px; margin-bottom: 8px; color: var(--color-text-secondary); transition: color 0.2s; }
-.paste-zone:hover .paste-icon { color: var(--color-text-info); }
-
-.paste-input {
-  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
-  width: 100%; height: 100%; opacity: 0; resize: none; border: none; padding: 20px; font-family: inherit; font-size: 13px; z-index: 2;
-}
-.paste-input:focus, .paste-input:not(:placeholder-shown) { opacity: 1; z-index: 10; background: var(--color-background-primary); color: var(--color-text-primary); outline: none; }
-.paste-label { font-size: 14px; font-weight: 600; color: var(--color-text-primary); margin-bottom: 4px; pointer-events: none; }
-.paste-hint { font-size: 12px; color: var(--color-text-tertiary); line-height: 1.5; pointer-events: none; }
-
-.paste-actions { padding: 0 20px 16px; display: flex; gap: 12px; }
-
-.extract-preview { flex: 1; overflow-y: auto; padding: 0 20px 20px; scroll-behavior: smooth; }
-.extract-preview::-webkit-scrollbar { width: 6px; }
-.extract-preview::-webkit-scrollbar-thumb { background: var(--color-border-secondary); border-radius: 10px; }
-.extract-title { font-size: 11px; font-weight: 700; color: var(--color-text-tertiary); margin-bottom: 12px; letter-spacing: .06em; text-transform: uppercase; display: flex; align-items: center; justify-content: space-between; }
-
-.extract-card { background: var(--color-background-primary); border: 1px solid var(--color-border-tertiary); border-radius: var(--border-radius-md); padding: 14px 16px; margin-bottom: 12px; box-shadow: var(--shadow-sm); animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; transform-origin: center; position: relative; overflow: hidden; }
-.extract-subject { font-size: 11px; font-weight: 700; margin-bottom: 6px; letter-spacing: .04em; text-transform: uppercase; }
-.extract-task-name { font-size: 14px; font-weight: 600; color: var(--color-text-primary); margin-bottom: 8px; line-height: 1.4; }
-.extract-row { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: var(--color-text-secondary); margin-top: 4px; }
-.extract-icon { font-size: 14px; }
-.conf-bar { height: 4px; border-radius: 2px; margin-top: 12px; background: var(--color-border-tertiary); overflow: hidden; }
-.conf-fill { height: 100%; border-radius: 2px; transition: width 1s cubic-bezier(0.16, 1, 0.3, 1); }
-.conf-label { font-size: 11px; font-weight: 600; color: var(--color-text-tertiary); margin-top: 6px; display: flex; justify-content: space-between; }
-.conf-edit { color: var(--color-text-info); cursor: pointer; transition: color 0.2s; }
-.conf-edit:hover { color: var(--color-text-primary); }
-
-.add-btn { margin: 0 20px 20px; padding: 12px; border: none; border-radius: var(--border-radius-md); background: var(--color-text-primary); color: var(--color-background-primary); font-size: 14px; font-weight: 600; cursor: pointer; text-align: center; flex-shrink: 0; box-shadow: 0 4px 12px rgba(0,0,0,0.15); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
-.add-btn:hover:not(:disabled) { background: var(--color-text-secondary); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); }
-.add-btn:active:not(:disabled) { transform: translateY(0); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
-.add-btn:disabled { background: var(--color-border-secondary); cursor: not-allowed; transform: none; box-shadow: none; color: var(--color-text-tertiary); }
-
-/* Loader */
-.loader-spinner {
-  display: inline-block;
-  width: 16px;
-  height: 16px;
-  border: 2px solid rgba(0,0,0,0.1);
-  border-radius: 50%;
-  border-top-color: var(--color-text-primary);
-  animation: spin 0.8s linear infinite;
-}
-@media (prefers-color-scheme: dark) {
-  .loader-spinner { border-color: rgba(255,255,255,0.1); border-top-color: #fff; }
-}
-@keyframes spin { to { transform: rotate(360deg); } }
-
-/* Utility classes */
-.hidden { display: none !important; }
-
-/* Timer duration input */
-.timer-duration-row { display: flex; align-items: center; gap: 10px; }
-.timer-duration-label { font-size: 12px; font-weight: 600; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; }
-.timer-duration-input { width: 64px; padding: 6px 10px; border: 1px solid var(--color-border-secondary); border-radius: var(--border-radius-sm); background: var(--color-background-primary); color: var(--color-text-primary); font-size: 14px; font-weight: 600; font-family: inherit; text-align: center; transition: border-color 0.2s; }
-.timer-duration-input:focus { outline: none; border-color: var(--color-text-primary); }
-.timer-duration-input:disabled { opacity: 0.5; cursor: not-allowed; }
-
-/* Focus Mode */
-.focus-section {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  padding: 24px;
-  overflow-y: auto;
-  gap: 32px;
-}
-.focus-dashboard {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 24px;
-}
-.timer-container {
-  position: relative;
-  width: 240px;
-  height: 240px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.timer-svg {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  transform: rotate(-90deg);
-}
-.timer-path-elapsed {
-  fill: none;
-  stroke: var(--color-border-tertiary);
-  stroke-width: 4;
-}
-.timer-path-remaining {
-  fill: none;
-  stroke: var(--color-text-primary);
-  stroke-width: 6;
-  stroke-linecap: round;
-  transition: stroke-dashoffset 1s linear;
-}
-.timer-text {
-  font-size: 48px;
-  font-weight: 700;
-  color: var(--color-text-primary);
-  font-variant-numeric: tabular-nums;
-  letter-spacing: -0.02em;
-  z-index: 1;
-}
-.timer-controls {
-  display: flex;
-  gap: 12px;
-}
-.focus-task-container, .focus-task-selector {
-  width: 100%;
-  max-width: 600px;
-  margin: 0 auto;
-}
-.focus-task-header {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--color-text-tertiary);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  margin-bottom: 12px;
-}
-.active-focus-task {
-  background: var(--color-background-primary);
-  border: 1px solid var(--color-border-primary);
-  border-radius: var(--border-radius-md);
-  padding: 20px;
-  box-shadow: var(--shadow-md);
-  min-height: 80px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.no-task-selected {
-  color: var(--color-text-secondary);
-  font-size: 14px;
-  font-weight: 500;
-}
-.focus-task-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-.focus-task-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 12px;
-  background: var(--color-background-primary);
-  border: 1px solid var(--color-border-tertiary);
-  border-radius: var(--border-radius-md);
-  cursor: pointer;
-  transition: all 0.2s;
-}
-.focus-task-item:hover {
-  background: var(--color-background-secondary);
-  border-color: var(--color-text-info);
-  transform: translateY(-1px);
-}
-.focus-task-item .task-name {
-  margin-bottom: 0;
-  flex: 1;
-}
-
-
-/* Header */
-.site-header {
-  width: 100%;
-  max-width: 1200px;
-  margin: 0 auto 16px auto;
-  padding: 16px 24px;
-  background: var(--color-background-primary);
-  border: 1px solid var(--color-border-tertiary);
-  border-radius: var(--border-radius-lg);
-  box-shadow: var(--shadow-md);
-
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.header-left {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.logo {
-  width: 40px;
-  height: 40px;
-  border-radius: 2px;
-}
-
-.site-title {
-  font-size: 20px;
-  font-weight: 700;
-  color: var(--color-text-primary);
-}
-
-.header-nav {
-  display: flex;
-  gap: 24px;
-}
-
-.header-nav a {
-  text-decoration: none;
-  color: var(--color-text-secondary);
-  font-weight: 500;
-  transition: color 0.2s;
-}
-
-.header-nav a:hover {
-  color: var(--color-text-primary);
-}
-
-.profile-btn {
-  padding: 8px 16px;
-  border: none;
-  border-radius: var(--border-radius-md);
-  background: var(--color-text-primary);
-  color: var(--color-background-primary);
-  cursor: pointer;
-  font-weight: 600;
-}
-
-/* Footer */
-.site-footer {
-  width: 100%;
-  max-width: 1200px;
-  margin: 16px auto 0 auto;
-  padding: 16px 24px;
-  background: var(--color-background-primary);
-  border: 1px solid var(--color-border-tertiary);
-  border-radius: var(--border-radius-lg);
-  box-shadow: var(--shadow-md);
-
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  color: var(--color-text-secondary);
-  font-size: 14px;
-}
-
-.footer-links {
-  display: flex;
-  gap: 16px;
-}
-
-.footer-links a {
-  text-decoration: none;
-  color: var(--color-text-secondary);
-}
-
-.footer-links a:hover {
-  color: var(--color-text-primary);
-}
-
-/* Global crash boundary UI */
-.crash-screen {
-  min-height: 100vh;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 24px;
-  background:
-    radial-gradient(circle at 20% 20%, rgba(24, 95, 165, 0.16), transparent 40%),
-    radial-gradient(circle at 80% 0%, rgba(22, 101, 52, 0.14), transparent 42%),
-    var(--color-background-tertiary);
-}
-
-.crash-card {
-  width: min(560px, 100%);
-  border-radius: var(--border-radius-lg);
-  border: 1px solid var(--color-border-tertiary);
-  background: var(--color-background-primary);
-  box-shadow: var(--shadow-lg);
-  padding: 28px;
-}
-
-.crash-illustration {
-  font-size: 30px;
-  margin-bottom: 12px;
-}
-
-.crash-title {
-  font-size: 28px;
-  margin-bottom: 10px;
-}
-
-.crash-copy {
-  color: var(--color-text-secondary);
-  line-height: 1.5;
-  margin-bottom: 8px;
-}
-
-.crash-quote {
-  color: var(--color-text-info);
-  font-weight: 600;
-  margin-bottom: 16px;
-}
-
-.crash-refresh {
-  border: none;
-  border-radius: var(--border-radius-md);
-  padding: 10px 16px;
-  font-size: 14px;
-  font-weight: 700;
-  color: var(--color-background-primary);
-  background: var(--color-text-primary);
-  cursor: pointer;
-}
-
-.crash-refresh:hover {
-  background: var(--color-text-secondary);
-}
-
-.crash-details {
-  margin-top: 14px;
-  color: var(--color-text-secondary);
-}
-
-.crash-details pre {
-  margin-top: 8px;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-  font-size: 12px;
-  background: var(--color-background-secondary);
-  border: 1px solid var(--color-border-tertiary);
-  border-radius: var(--border-radius-sm);
-  padding: 10px;
-}
-
-/* Task Addition Model */
-
-
-#new-task-modal{
-
-  position: fixed;
-  inset: 0;
-  z-index: 9998;
-  display: none;
-  align-items: center;
-  justify-content: center;
-  background-color: rgba(0, 0, 0, 0.55) !important; 
-}
-
-
-#new-task-modal .modal-card {
-  width: 100%;
-  max-width: 360px;
-  background-color: #0f172a;                     
-  border-radius: 14px;
-  padding: 20px 20px 16px;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
-  color: #e5e7eb;                        
-  box-sizing: border-box;
-  border: 1px solid rgba(148, 163, 184, 0.35)  !important;
-}
-
-
-#new-task-modal .modal-card h3 {
-  margin: 0 0 12px;
-  font-size: 18px;
-  font-weight: 600;
-  letter-spacing: 0.01em;
-  color: #f9fafb;
-}
-
-
-#new-task-modal label {
-  display: block;
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: #9ca3af; /* muted */
-  margin-bottom: 4px;
-}
-
-
-#new-task-modal input,
-#new-task-modal select {
-  width: 100%;
-  box-sizing: border-box;
-  font-size: 13px;
-  padding: 7px 8px;
-  margin-bottom: 10px;
-  border-radius: 6px;
-  border: 1px solid #4b5563;              
-  background-color: #111827 !important;                  
-  color: #e5e7eb;
-  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
-  color-scheme: dark;                      
-}
-
-
-#new-task-modal input::placeholder {
-  color: #6b7280;
-}
-
-
-#new-task-modal input:focus,
-#new-task-modal select:focus {
-  outline: none;
-  border-color: #4f46e5;
-  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.35);
-  background: #020617;                     
-}
-
-
-#new-task-modal .modal-card > div:last-child {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  margin-top: 6px;
-}
-
-
-#new-task-modal .btn {
-  font-size: 12px;
-  padding: 6px 10px;
-  border-radius: 999px;
-}
-
-#new-task-modal .btn:not(.btn-primary) {
-  background: rgba(15, 23, 42, 0.9);
-  color: #e5e7eb;
-  border: 1px solid #4b5563;
-}
-
-#new-task-modal .btn:not(.btn-primary):hover {
-  background: #020617;
-}
-
-
-#new-task-modal.showing .modal-card {
-  animation: new-task-modal-in 0.16s ease-out;
-}
-
-@keyframes new-task-modal-in {
-  from {
-    opacity: 0;
-    transform: translateY(6px) scale(0.97);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-
-
-@media (max-width: 480px) {
-  #new-task-modal .modal-card {
-    max-width: 90vw;
-    padding: 16px 14px 12px;
-  }
-}
-
-
-.smart-workload-card {
-  margin-bottom: 14px;
-  padding: 14px;
-  border-radius: 14px;
-  background: rgba(255, 184, 77, 0.08);
-  border: 1px solid rgba(255, 184, 77, 0.25);
-  backdrop-filter: blur(10px);
-  display: flex;
-  justify-content: space-between;
-  gap: 18px;
-  align-items: flex-start;
-  flex-wrap: wrap;
-}
-
-.smart-workload-title {
-  font-size: 14px;
-  font-weight: 700;
-  margin-bottom: 8px;
-  color: #ffcc66;
-}
-
-.smart-workload-score {
-  min-width: 90px;
-  font-size: 12px;
-  margin-bottom: 10px;
-  color: #cfcfcf;
-}
-
-.smart-suggestion-list {
-  margin: 0;
-  padding-left: 18px;
-}
-
-.smart-suggestion-list li {
-  margin-bottom: 6px;
-  color: #e6e6e6;
-  line-height: 1.5;
-  font-size: 13px;
-}
-.smart-workload-card.high {
-  border-color: rgba(255, 77, 77, 0.5);
-  background: rgba(255, 77, 77, 0.08);
-}
-
-.smart-workload-card.medium {
-  border-color: rgba(255, 184, 77, 0.25);
-}
-.smart-highlight {
-  color: #ffcc66;
-  font-weight: 600;
-}
\ No newline at end of file
diff --git a/index.html b/index.html
index da78416..847e6a6 100644
--- a/index.html
+++ b/index.html
@@ -9,447 +9,387 @@
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
 </head>
 <body>
-  <!-- Auth Modal -->
-<div id="auth-modal" style="display:flex; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:9999; align-items:center; justify-content:center;">
-  <div style="background:white; border-radius:16px; padding:32px; width:360px; box-shadow:0 20px 60px rgba(0,0,0,0.3);">
-    
-    <h2 id="auth-title" style="margin:0 0 8px; font-size:22px; font-weight:700;">Welcome back</h2>
-    <p id="auth-subtitle" style="margin:0 0 24px; color:#666; font-size:14px;">Sign in to your StudyPlan account</p>
-
-    <input id="auth-email" type="email" placeholder="Email address" style="width:100%; padding:12px; border:1px solid #ddd; border-radius:8px; font-size:14px; margin-bottom:12px; box-sizing:border-box;">
-    
-    <input id="auth-password" type="password" placeholder="Password" style="width:100%; padding:12px; border:1px solid #ddd; border-radius:8px; font-size:14px; margin-bottom:20px; box-sizing:border-box;">
-
-    <button id="auth-submit-btn" style="width:100%; padding:12px; background:#4f46e5; color:white; border:none; border-radius:8px; font-size:15px; font-weight:600; cursor:pointer;">
-      Sign In
-    </button>
-
-    <p style="text-align:center; margin:16px 0 0; font-size:13px; color:#666;">
-      <span id="auth-toggle-text">Don't have an account?</span>
-      <a id="auth-toggle-btn" href="#" style="color:#4f46e5; font-weight:600; margin-left:4px;">Sign Up</a>
-    </p>
-
-    <p id="auth-error" style="color:red; font-size:13px; text-align:center; margin:8px 0 0; display:none;"></p>
-  </div>
-</div>
 
-  <header class="site-header">
-  <div class="header-left">
-    <img src="/logo.png" alt="Logo" class="logo">
-    <h1 class="site-title">StudyPlan</h1>
-  </div>
+  <!-- Auth Modal: single source of truth for authentication UI -->
+  <div id="auth-modal" class="auth-modal-overlay" role="dialog" aria-modal="true" aria-labelledby="auth-title">
+    <div class="auth-modal-card">
+      <h2 id="auth-title">Welcome back</h2>
+      <p id="auth-subtitle" class="auth-subtitle">Sign in to your StudyPlan account</p>
 
-  <nav class="header-nav">
-    <a href="#">Dashboard</a>
-    <a href="#">Tasks</a>
-    <a href="#">Calendar</a>
-    <a href="#" id="nav-settings">Settings</a>
-  </nav>
+      <input id="auth-email" type="email" placeholder="Email address" autocomplete="email">
+      <input id="auth-password" type="password" placeholder="Password" autocomplete="current-password">
 
-  <div class="header-right">
-    <button class="profile-btn">Profile</button>
-    <button class="profile-btn" id="logout-btn">Logout</button>
-  </div>
-</header>
+      <button id="auth-submit-btn" class="auth-submit-btn">Sign In</button>
 
+      <p class="auth-footer-text">
+        <span id="auth-toggle-text">Don't have an account?</span>
+        <a id="auth-toggle-btn" href="#" class="auth-toggle-link">Sign Up</a>
+      </p>
 
-<div class="wrapper">
-  <!-- <p class="label">StudyPlan</p> -->
+      <p id="auth-error" class="auth-error"></p>
+    </div>
+  </div>
 
-  <div class="app">
-    <!-- Sidebar -->
-    <div class="sidebar">
-      <div class="sidebar-header">Study Planner</div>
-      <div class="nav-item active" id="calendar-btn" role="link" aria-label="View Calendar">
-        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><rect x="1" y="2" width="14" height="13" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="M1 6h14" stroke="currentColor" stroke-width="1.5"/><path d="M5 1v2M11 1v2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
-        Calendar
-      </div>
-      <div class="nav-item" id="all-tasks-btn" role="link" aria-label="View All Tasks">
-        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M2 4h12M2 8h9M2 12h6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
-        All Tasks
-        <span class="badge" aria-label="9 pending tasks">9</span>
-      </div>
-      <div class="nav-item" id="focus-mode-btn">
-        <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.5"/><path d="M8 5v3l2 2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
-        Focus Mode
-        
-      </div>
-      <div class="nav-item" id="archived-tasks-btn">
-        <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M2 3h12v2H2V3zm1 3h10v7H3V6zm2 2v3h2V8H5zm4 0v3h2V8H9z" fill="currentColor"/></svg>
-        Archived Tasks
-        <span class="badge">0</span>
-      </div>
-      <div class="nav-item" id="download-btn">
-        <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M2 4h12M2 8h9M2 12h6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
-        Download Data
-        <span class="badge">7</span>
-      </div>
-      <div class="sidebar-divider"></div>
-      <div class="sidebar-header">Subjects</div>
-      <div id="subjects-sidebar-list"></div>
-      <div class="add-subject" id="add-subject-btn" role="button" tabindex="0">
-        <svg width="14" height="14" fill="none"><path d="M7 1v12M1 7h12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg> Add subject
-      </div>
+  <header class="site-header">
+    <div class="header-left">
+      <img src="/logo.png" alt="StudyPlan logo" class="logo">
+      <h1 class="site-title">StudyPlan</h1>
     </div>
+    <nav class="header-nav">
+      <a href="#">Dashboard</a>
+      <a href="#">Tasks</a>
+      <a href="#">Calendar</a>
+      <a href="#" id="nav-settings">Settings</a>
+    </nav>
+    <div class="header-right">
+      <button class="profile-btn">Profile</button>
+      <button class="profile-btn" id="logout-btn">Logout</button>
+    </div>
+  </header>
 
-    <!-- Main -->
-    <div class="main">
-      <div class="topbar">
-        <div class="topbar-title">April 2026</div>
-        <button class="btn">Week</button>
-        <button class="btn btn-primary"  id="add-task-btn">
-          <svg width="12" height="12" fill="none" style="margin-right:2px"><path d="M6 1v10M1 6h10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg> New task
-        </button>
-      </div>
+  <div class="wrapper">
+    <div class="app" id="app-shell">
 
-      <!-- Calendar -->
-      <div class="cal-section">
-        <div class="cal-header">
-          <div id="cal-month-title" class="cal-title">April 2026</div>
-          <span id="cal-prev" class="cal-nav" role="button" aria-label="Previous Month">‹</span>
-          <span id="cal-next" class="cal-nav" role="button" aria-label="Next Month">›</span>
+      <!-- Sidebar -->
+      <div class="sidebar">
+        <div class="sidebar-header">Study Planner</div>
+        <div class="nav-item active" id="calendar-btn" role="link" aria-label="View Calendar">
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><rect x="1" y="2" width="14" height="13" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="M1 6h14" stroke="currentColor" stroke-width="1.5"/><path d="M5 1v2M11 1v2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
+          Calendar
         </div>
-        <div id="cal-grid" class="cal-grid">
-          <div class="cal-day-label">Su</div><div class="cal-day-label">Mo</div><div class="cal-day-label">Tu</div><div class="cal-day-label">We</div><div class="cal-day-label">Th</div><div class="cal-day-label">Fr</div><div class="cal-day-label">Sa</div>
+        <div class="nav-item" id="all-tasks-btn" role="link" aria-label="View All Tasks">
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M2 4h12M2 8h9M2 12h6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
+          All Tasks
+          <span class="badge" aria-label="9 pending tasks">9</span>
         </div>
-        <div class="cal-legend">
-          <span><span class="legend-dot" style="background:var(--color-text-info)"></span>Study session</span>
-          <span><span class="legend-dot" style="background:var(--color-text-danger)"></span>Deadline</span>
+        <div class="nav-item" id="focus-mode-btn">
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.5"/><path d="M8 5v3l2 2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
+          Focus Mode
+        </div>
+        <div class="nav-item" id="archived-tasks-btn">
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M2 3h12v2H2V3zm1 3h10v7H3V6zm2 2v3h2V8H5zm4 0v3h2V8H9z" fill="currentColor"/></svg>
+          Archived Tasks
+          <span class="badge">0</span>
+        </div>
+        <div class="nav-item" id="download-btn">
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M2 4h12M2 8h9M2 12h6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
+          Download Data
+          <span class="badge">7</span>
+        </div>
+        <div class="sidebar-divider"></div>
+        <div class="sidebar-header">Subjects</div>
+        <div id="subjects-sidebar-list"></div>
+        <div class="add-subject" id="add-subject-btn" role="button" tabindex="0">
+          <svg width="14" height="14" fill="none"><path d="M7 1v12M1 7h12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg> Add subject
         </div>
       </div>
 
-      <!-- Tasks -->
-      <div id="tasks-section" class="tasks-section">
-        <!-- Javascript will inject tasks here -->
-        
-      </div>
+      <!-- Main -->
+      <div class="main">
+        <div class="topbar">
+          <div class="topbar-title">May 2026</div>
+          <button class="btn">Week</button>
+          <button class="btn btn-primary" id="add-task-btn">
+            <svg width="12" height="12" fill="none" style="margin-right:2px"><path d="M6 1v10M1 6h10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg> New task
+          </button>
+        </div>
 
-      <!-- Focus Mode -->
-      <div id="focus-section" class="focus-section hidden">
-        <div class="focus-dashboard">
-          <div class="timer-container">
-            <svg class="timer-svg" viewBox="0 0 100 100">
-              <circle class="timer-path-elapsed" cx="50" cy="50" r="45" />
-              <path id="timer-path-remaining" stroke-dasharray="283" class="timer-path-remaining" d="
-                M 50, 50
-                m -45, 0
-                a 45,45 0 1,0 90,0
-                a 45,45 0 1,0 -90,0
-              "></path>
-            </svg>
-            <div id="timer-text" class="timer-text">25:00</div>
+        <div class="cal-section">
+          <div class="cal-header">
+            <div id="cal-month-title" class="cal-title">May 2026</div>
+            <span id="cal-prev" class="cal-nav" role="button" aria-label="Previous Month">&#8249;</span>
+            <span id="cal-next" class="cal-nav" role="button" aria-label="Next Month">&#8250;</span>
           </div>
-          <div class="timer-duration-row">
-            <label for="timer-duration-input" class="timer-duration-label">Duration (min)</label>
-            <input id="timer-duration-input" type="number" class="timer-duration-input" value="25" min="1" max="120">
+          <div id="cal-grid" class="cal-grid">
+            <div class="cal-day-label">Su</div><div class="cal-day-label">Mo</div><div class="cal-day-label">Tu</div><div class="cal-day-label">We</div><div class="cal-day-label">Th</div><div class="cal-day-label">Fr</div><div class="cal-day-label">Sa</div>
           </div>
-          <div class="timer-controls">
-            <button id="timer-start-btn" class="btn btn-primary">Start Focus</button>
-            <button id="timer-pause-btn" class="btn hidden">Pause</button>
-            <button id="timer-reset-btn" class="btn">Reset</button>
-          </div>
-          
-          <div class="focus-task-container">
-            <div class="focus-task-header">Current Focus Task</div>
-            <div id="active-focus-task" class="active-focus-task">
-              <div class="no-task-selected">No task selected. Choose one below.</div>
-            </div>
+          <div class="cal-legend">
+            <span><span class="legend-dot" style="background:var(--color-text-info)"></span>Study session</span>
+            <span><span class="legend-dot" style="background:var(--color-text-danger)"></span>Deadline</span>
           </div>
         </div>
 
-        <div class="focus-task-selector">
-          <div class="focus-task-header">Select a task to focus on</div>
-          <div id="focus-task-list" class="focus-task-list">
-            <!-- JS will populate tasks -->
+        <div id="tasks-section" class="tasks-section"></div>
+
+        <div id="focus-section" class="focus-section hidden">
+          <div class="focus-dashboard">
+            <div class="timer-container">
+              <svg class="timer-svg" viewBox="0 0 100 100">
+                <circle class="timer-path-elapsed" cx="50" cy="50" r="45" />
+                <path id="timer-path-remaining" stroke-dasharray="283" class="timer-path-remaining" d="M 50, 50 m -45, 0 a 45,45 0 1,0 90,0 a 45,45 0 1,0 -90,0"></path>
+              </svg>
+              <div id="timer-text" class="timer-text">25:00</div>
+            </div>
+            <div class="timer-duration-row">
+              <label for="timer-duration-input" class="timer-duration-label">Duration (min)</label>
+              <input id="timer-duration-input" type="number" class="timer-duration-input" value="25" min="1" max="120">
+            </div>
+            <div class="timer-controls">
+              <button id="timer-start-btn" class="btn btn-primary">Start Focus</button>
+              <button id="timer-pause-btn" class="btn hidden">Pause</button>
+              <button id="timer-reset-btn" class="btn">Reset</button>
+            </div>
+            <div class="focus-task-container">
+              <div class="focus-task-header">Current Focus Task</div>
+              <div id="active-focus-task" class="active-focus-task">
+                <div class="no-task-selected">No task selected. Choose one below.</div>
+              </div>
+            </div>
+          </div>
+          <div class="focus-task-selector">
+            <div class="focus-task-header">Select a task to focus on</div>
+            <div id="focus-task-list" class="focus-task-list"></div>
           </div>
         </div>
       </div>
-    </div>
 
-    <!-- Right Panel -->
-    <div class="panel">
-      <div class="panel-header">
-        <button id="panel-toggle-btn" class="panel-toggle-btn" title="Toggle Smart Paste">
-          <svg id="panel-toggle-icon" width="16" height="16" fill="none" viewBox="0 0 16 16"><path d="M10 4l-4 4 4 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
-        </button>
-        <div>
-          <div class="panel-title">
-            <svg width="18" height="18" fill="none"><path d="M9 13V5M9 5L5 9M9 5l4 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
-            Smart Paste
+      <!-- Right Panel -->
+      <div class="panel">
+        <div class="panel-header">
+          <button id="panel-toggle-btn" class="panel-toggle-btn" title="Toggle Smart Paste">
+            <svg id="panel-toggle-icon" width="16" height="16" fill="none" viewBox="0 0 16 16"><path d="M10 4l-4 4 4 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+          </button>
+          <div>
+            <div class="panel-title">
+              <svg width="18" height="18" fill="none"><path d="M9 13V5M9 5L5 9M9 5l4 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+              Smart Paste
+            </div>
+            <div class="panel-subtitle">Drop any text — email, brief, message</div>
           </div>
-          <div class="panel-subtitle">Drop any text — email, brief, message</div>
         </div>
+        <div class="paste-zone">
+          <div class="paste-icon">&#8984; V</div>
+          <div class="paste-label">Paste text here</div>
+          <div class="paste-hint">e.g. "Your OS assignment is due this Friday by 11pm&hellip;"</div>
+          <textarea id="paste-input" class="paste-input" placeholder="Paste your syllabus or notes..."></textarea>
+        </div>
+        <div class="paste-actions">
+          <button id="clear-btn" class="btn" style="flex:1;" aria-label="Clear paste area">Clear</button>
+          <button id="extract-btn" class="btn btn-primary" style="flex:2;" aria-label="Extract tasks with AI">Extract with AI &rarr;</button>
+        </div>
+        <div id="extract-preview" class="extract-preview"></div>
+        <div id="summary-box" class="summary-box"></div>
+        <button id="add-btn" class="add-btn" disabled>Add items to planner</button>
       </div>
 
-      <div class="paste-zone">
-        <div class="paste-icon">⌘ V</div>
-        <div class="paste-label">Paste text here</div>
-        <div class="paste-hint">e.g. "Your OS assignment is due this Friday by 11pm…"</div>
-        <textarea id="paste-input" class="paste-input" placeholder="Paste your syllabus or notes..."></textarea>
-      </div>
-
-      <div class="paste-actions">
-        <button id="clear-btn" class="btn" style="flex:1;" aria-label="Clear paste area">Clear</button>
-        <button id="extract-btn" class="btn btn-primary" style="flex:2;" aria-label="Extract tasks with AI">Extract with AI →</button>
-      </div>
-
-      <div id="extract-preview" class="extract-preview">
-        <!-- Javascript will inject extracted items here -->
-      </div>
-      <div id="summary-box" class="summary-box"></div>
-
-  <button id="add-btn" class="add-btn" disabled>
-    Add items to planner
-  </button>
-</div>
-
-
-      <button id="add-btn" class="add-btn" disabled>Add items to planner</button>
     </div>
   </div>
-</div>
-
-<footer class="site-footer">
-  <p>© 2026 StudyPlan. All rights reserved.</p>
-  <div class="footer-links">
-    <a href="/support-page/index.html#privacy">Privacy</a>
-    <a href="/support-page/index.html#terms">Terms</a>
-    <a href="/support-page/index.html#support">Support</a>
-  </div>
-</footer>
-
-<!-- Settings Modal -->
-<div id="settings-modal" style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:9999; align-items:center; justify-content:center; backdrop-filter:blur(4px);">
-  <div style="background:var(--color-background-primary); border:1px solid var(--color-border-tertiary); border-radius:16px; padding:32px; width:400px; box-shadow:var(--shadow-lg); color:var(--color-text-primary);">
-    <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:24px;">
-      <h2 style="margin:0; font-size:20px; font-weight:700;">Settings</h2>
-      <button id="settings-close" style="background:none; border:none; font-size:24px; cursor:pointer; color:var(--color-text-secondary);">&times;</button>
+
+  <footer class="site-footer">
+    <p>&copy; 2026 StudyPlan. All rights reserved.</p>
+    <div class="footer-links">
+      <a href="/support-page/index.html#privacy">Privacy</a>
+      <a href="/support-page/index.html#terms">Terms</a>
+      <a href="/support-page/index.html#support">Support</a>
     </div>
-    
-    <div style="margin-bottom: 24px;">
-      <h3 style="font-size:12px; font-weight:700; text-transform:uppercase; color:var(--color-text-tertiary); margin-bottom:16px; letter-spacing:0.05em;">Appearance</h3>
-      <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom: 16px;">
-        <span style="font-size:14px; font-weight:500;">Dark Mode</span>
-        <label class="toggle-switch">
-          <input type="checkbox" id="dark-mode-toggle">
-          <span class="toggle-slider"></span>
-        </label>
+  </footer>
+
+  <!-- Settings Modal -->
+  <div id="settings-modal" style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:9999; align-items:center; justify-content:center; backdrop-filter:blur(4px);">
+    <div style="background:var(--color-background-primary); border:1px solid var(--color-border-tertiary); border-radius:16px; padding:32px; width:400px; box-shadow:var(--shadow-lg); color:var(--color-text-primary);">
+      <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:24px;">
+        <h2 style="margin:0; font-size:20px; font-weight:700;">Settings</h2>
+        <button id="settings-close" style="background:none; border:none; font-size:24px; cursor:pointer; color:var(--color-text-secondary);">&times;</button>
+      </div>
+      <div style="margin-bottom: 24px;">
+        <h3 style="font-size:12px; font-weight:700; text-transform:uppercase; color:var(--color-text-tertiary); margin-bottom:16px; letter-spacing:0.05em;">Appearance</h3>
+        <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom: 16px;">
+          <span style="font-size:14px; font-weight:500;">Dark Mode</span>
+          <label class="toggle-switch">
+            <input type="checkbox" id="dark-mode-toggle">
+            <span class="toggle-slider"></span>
+          </label>
+        </div>
+        <div style="display:flex; align-items:center; justify-content:space-between;">
+          <span style="font-size:14px; font-weight:500;">Compact View</span>
+          <label class="toggle-switch">
+            <input type="checkbox" id="compact-view-toggle">
+            <span class="toggle-slider"></span>
+          </label>
+        </div>
       </div>
-      <div style="display:flex; align-items:center; justify-content:space-between;">
-        <span style="font-size:14px; font-weight:500;">Compact View</span>
-        <label class="toggle-switch">
-          <input type="checkbox" id="compact-view-toggle">
-          <span class="toggle-slider"></span>
-        </label>
+      <div style="margin-bottom: 24px;">
+        <h3 style="font-size:12px; font-weight:700; text-transform:uppercase; color:var(--color-text-tertiary); margin-bottom:16px; letter-spacing:0.05em;">Notifications</h3>
+        <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom: 16px;">
+          <span style="font-size:14px; font-weight:500;">Email Reminders</span>
+          <label class="toggle-switch"><input type="checkbox" checked><span class="toggle-slider"></span></label>
+        </div>
+        <div style="display:flex; align-items:center; justify-content:space-between;">
+          <span style="font-size:14px; font-weight:500;">Browser Notifications</span>
+          <label class="toggle-switch"><input type="checkbox"><span class="toggle-slider"></span></label>
+        </div>
       </div>
+      <button id="settings-save" style="width:100%; padding:12px; background:var(--color-text-primary); color:var(--color-background-primary); border:none; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; margin-top:8px;">Save Changes</button>
     </div>
+  </div>
 
-    <div style="margin-bottom: 24px;">
-      <h3 style="font-size:12px; font-weight:700; text-transform:uppercase; color:var(--color-text-tertiary); margin-bottom:16px; letter-spacing:0.05em;">Notifications</h3>
-      <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom: 16px;">
-        <span style="font-size:14px; font-weight:500;">Email Reminders</span>
-        <label class="toggle-switch">
-          <input type="checkbox" checked>
-          <span class="toggle-slider"></span>
-        </label>
-      </div>
-      <div style="display:flex; align-items:center; justify-content:space-between;">
-        <span style="font-size:14px; font-weight:500;">Browser Notifications</span>
-        <label class="toggle-switch">
-          <input type="checkbox">
-          <span class="toggle-slider"></span>
-        </label>
+  <!-- New Subject Modal -->
+  <div id="new-subject-modal" class="modal-backdrop" style="display:none; position:fixed; inset:0; z-index:9998; align-items:center; justify-content:center;">
+    <div class="modal-card" style="border-radius:12px; padding:20px; width:320px; box-shadow:0 12px 40px rgba(0,0,0,0.25);">
+      <h3 style="margin:0 0 12px; font-size:18px; font-weight:600;">New subject</h3>
+      <label style="display:block; font-size:12px; margin-bottom:4px;">Subject name</label>
+      <input id="new-subject-name" type="text" style="width:100%; padding:6px; margin-bottom:12px;" placeholder="e.g. History">
+      <label style="display:block; font-size:12px; margin-bottom:6px;">Color</label>
+      <div id="new-subject-colors" class="subject-color-swatches"></div>
+      <div style="display:flex; justify-content:flex-end; gap:8px; margin-top:16px;">
+        <button id="new-subject-cancel" class="btn" style="padding:6px 10px;">Cancel</button>
+        <button id="new-subject-save" class="btn btn-primary" style="padding:6px 12px;">Save</button>
       </div>
     </div>
+  </div>
 
-    <button id="settings-save" style="width:100%; padding:12px; background:var(--color-text-primary); color:var(--color-background-primary); border:none; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; margin-top:8px;">
-      Save Changes
-    </button>
+  <!-- New Task Modal -->
+  <div id="new-task-modal" class="modal-backdrop" style="display:none; position:fixed; inset:0; z-index:9998; align-items:center; justify-content:center;">
+    <div class="modal-card" style="border-radius:12px; padding:20px; width:320px; box-shadow:0 12px 40px rgba(0,0,0,0.25);">
+      <h3 style="margin:0 0 12px; font-size:18px; font-weight:600;">New task</h3>
+      <label style="display:block; font-size:12px; margin-bottom:4px;">Subject</label>
+      <select id="new-task-subject" style="width:100%; padding:6px; margin-bottom:10px;"></select>
+      <label style="display:block; font-size:12px; margin-bottom:4px;">Task name</label>
+      <input id="new-task-title" type="text" style="width:100%; padding:6px; margin-bottom:10px;" placeholder="Task name">
+      <label style="display:block; font-size:12px; margin-bottom:4px;">Deadline</label>
+      <input id="new-task-date" type="datetime-local" style="width:100%; padding:6px; margin-bottom:10px;">
+      <input id="new-task-notes" type="text" style="width:100%; padding:6px; margin-bottom:16px;" placeholder="Notes">
+      <div style="display:flex; justify-content:flex-end; gap:8px;">
+        <button id="new-task-cancel" class="btn" style="padding:6px 10px;">Cancel</button>
+        <button id="new-task-save" class="btn btn-primary" style="padding:6px 12px;">Save</button>
+      </div>
+    </div>
   </div>
-</div>
 
   <script type="module" src="/js/app.js"></script>
+
   <script>
-  let isLogin = true;
-
-  document.getElementById('auth-toggle-btn').addEventListener('click', (e) => {
-    e.preventDefault();
-    isLogin = !isLogin;
-    document.getElementById('auth-title').textContent = isLogin ? 'Welcome back' : 'Create account';
-    document.getElementById('auth-subtitle').textContent = isLogin ? 'Sign in to your StudyPlan account' : 'Start planning your studies';
-    document.getElementById('auth-submit-btn').textContent = isLogin ? 'Sign In' : 'Sign Up';
-    document.getElementById('auth-toggle-text').textContent = isLogin ? "Don't have an account?" : 'Already have an account?';
-    document.getElementById('auth-toggle-btn').textContent = isLogin ? 'Sign Up' : 'Sign In';
-    document.getElementById('auth-error').style.display = 'none';
-  });
-
-  document.getElementById('auth-submit-btn').addEventListener('click', async () => {
-    const email = document.getElementById('auth-email').value.trim();
-    const password = document.getElementById('auth-password').value.trim();
-    const errorEl = document.getElementById('auth-error');
-
-    if (!email || !password) {
-      errorEl.textContent = 'Please fill in all fields';
-      errorEl.style.display = 'block';
-      return;
-    }
+    // ─── Auth Modal ───────────────────────────────────────────────────────────
+    // Single visibility strategy: class-based only. No inline style toggling.
+
+    const authModal  = document.getElementById('auth-modal');
+    const appShell   = document.getElementById('app-shell');
 
-    const endpoint = isLogin ? '/api/auth/login' : '/api/auth/signup';
+    function showAuthModal() {
+      authModal.classList.remove('auth-modal-hidden');
+      document.body.classList.add('auth-open');
+      appShell.classList.add('auth-blurred');
+    }
 
-    try {
-      const res = await fetch(endpoint, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ email, password })
-      });
-      const data = await res.json();
+    function hideAuthModal() {
+      authModal.classList.add('auth-modal-hidden');
+      document.body.classList.remove('auth-open');
+      appShell.classList.remove('auth-blurred');
+    }
 
-      if (!res.ok) {
-        errorEl.textContent = data.error || 'Something went wrong';
-        errorEl.style.display = 'block';
+    // ─── Sign In / Sign Up toggle ─────────────────────────────────────────────
+    let isLogin = true;
+
+    document.getElementById('auth-toggle-btn').addEventListener('click', (e) => {
+      e.preventDefault();
+      isLogin = !isLogin;
+      document.getElementById('auth-title').textContent        = isLogin ? 'Welcome back'               : 'Create account';
+      document.getElementById('auth-subtitle').textContent     = isLogin ? 'Sign in to your StudyPlan account' : 'Start planning your studies';
+      document.getElementById('auth-submit-btn').textContent   = isLogin ? 'Sign In'  : 'Sign Up';
+      document.getElementById('auth-toggle-text').textContent  = isLogin ? "Don't have an account?" : 'Already have an account?';
+      document.getElementById('auth-toggle-btn').textContent   = isLogin ? 'Sign Up'  : 'Sign In';
+      document.getElementById('auth-error').style.display = 'none';
+    });
+
+    // ─── Submit handler ───────────────────────────────────────────────────────
+    document.getElementById('auth-submit-btn').addEventListener('click', async () => {
+      const email    = document.getElementById('auth-email').value.trim();
+      const password = document.getElementById('auth-password').value.trim();
+      const errorEl  = document.getElementById('auth-error');
+
+      errorEl.style.display = 'none';
+
+      if (!email || !password) {
+        errorEl.textContent    = 'Please fill in all fields.';
+        errorEl.style.display  = 'block';
         return;
       }
 
-      localStorage.setItem('studyplan_user', JSON.stringify({ email: data.email }));
-      document.getElementById('auth-modal').style.display = 'none';
+      const endpoint = isLogin ? '/api/auth/login' : '/api/auth/signup';
 
-    } catch (err) {
-      errorEl.textContent = 'Network error. Please try again.';
-      errorEl.style.display = 'block';
-    }
-  });
-
-  // Check if already logged in
-  if (localStorage.getItem('studyplan_user')) {
-    document.getElementById('auth-modal').style.display = 'none';
-  }
-
-  // Logout Button Functionality
-  const logoutBtn = document.getElementById('logout-btn');
-  logoutBtn.addEventListener('click', () => {
-    localStorage.removeItem('studyplan_user');
-
-    // Show login modal again
-    document.getElementById('auth-modal').style.display = 'flex';
-
-    // Refresh page state
-    window.location.reload();
-});
-
-  // Settings Modal Logic
-  const settingsModal = document.getElementById('settings-modal');
-  const navSettings = document.getElementById('nav-settings');
-  const settingsClose = document.getElementById('settings-close');
-  const settingsSave = document.getElementById('settings-save');
-
-  navSettings.addEventListener('click', (e) => {
-    e.preventDefault();
-    settingsModal.style.display = 'flex';
-  });
-
-  settingsClose.addEventListener('click', () => {
-    settingsModal.style.display = 'none';
-  });
-
-  settingsSave.addEventListener('click', () => {
-    settingsModal.style.display = 'none';
-  });
-
-  window.addEventListener('click', (e) => {
-    if (e.target === settingsModal) {
-      settingsModal.style.display = 'none';
-    }
-  });
+      try {
+        const res  = await fetch(endpoint, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ email, password })
+        });
+        const data = await res.json();
 
-  // Settings Toggles State Management
-  const darkModeToggle = document.getElementById('dark-mode-toggle');
-  const compactViewToggle = document.getElementById('compact-view-toggle');
+        if (!res.ok) {
+          errorEl.textContent   = data.error || 'Something went wrong.';
+          errorEl.style.display = 'block';
+          return;
+        }
 
-  // Load preferences
-  const loadPreferences = () => {
-    const isDarkMode = localStorage.getItem('studyplan_dark_mode') === 'true';
-    const isCompactView = localStorage.getItem('studyplan_compact_view') === 'true';
+        localStorage.setItem('studyplan_user', JSON.stringify({ email: data.email || email }));
+        hideAuthModal();
 
-    darkModeToggle.checked = isDarkMode;
-    compactViewToggle.checked = isCompactView;
+      } catch {
+        errorEl.textContent   = 'Network error. Please try again.';
+        errorEl.style.display = 'block';
+      }
+    });
 
-    if (isDarkMode) {
-      document.documentElement.setAttribute('data-theme', 'dark');
-    } else {
-      document.documentElement.setAttribute('data-theme', 'light');
+    // ─── Session check on load ────────────────────────────────────────────────
+    if (localStorage.getItem('studyplan_user')) {
+      hideAuthModal();
     }
+    // If no session, modal is visible by default (no auth-modal-hidden class on load)
 
-    if (isCompactView) {
-      document.body.classList.add('compact-view');
-    } else {
-      document.body.classList.remove('compact-view');
-    }
-  };
+    // ─── Logout ───────────────────────────────────────────────────────────────
+    document.getElementById('logout-btn').addEventListener('click', () => {
+      localStorage.removeItem('studyplan_user');
+      showAuthModal();
+    });
 
-  // Run on load
-  loadPreferences();
+    // ─── Settings modal ───────────────────────────────────────────────────────
+    const settingsModal = document.getElementById('settings-modal');
 
-  // Save changes when user clicks "Save Changes"
-  settingsSave.addEventListener('click', () => {
-    localStorage.setItem('studyplan_dark_mode', darkModeToggle.checked);
-    localStorage.setItem('studyplan_compact_view', compactViewToggle.checked);
-    loadPreferences();
-    settingsModal.style.display = 'none';
-  });
-
-  // Also apply immediately on toggle for better UX
-  darkModeToggle.addEventListener('change', (e) => {
-    if (e.target.checked) {
-      document.documentElement.setAttribute('data-theme', 'dark');
-    } else {
-      document.documentElement.setAttribute('data-theme', 'light');
-    }
-  });
+    document.getElementById('nav-settings').addEventListener('click', (e) => {
+      e.preventDefault();
+      settingsModal.style.display = 'flex';
+    });
 
-  compactViewToggle.addEventListener('change', (e) => {
-    if (e.target.checked) {
-      document.body.classList.add('compact-view');
-    } else {
-      document.body.classList.remove('compact-view');
-    }
-  });
-</script>
-
-<div id="new-subject-modal" class="modal-backdrop" style="display:none; position:fixed; inset:0; z-index:9998; align-items:center; justify-content:center;">
-  <div class="modal-card" style="border-radius:12px; padding:20px; width:320px; box-shadow:0 12px 40px rgba(0,0,0,0.25);">
-    <h3 style="margin:0 0 12px; font-size:18px; font-weight:600;">New subject</h3>
-    <label style="display:block; font-size:12px; margin-bottom:4px;">Subject name</label>
-    <input id="new-subject-name" type="text" style="width:100%; padding:6px; margin-bottom:12px;" placeholder="e.g. History">
-    <label style="display:block; font-size:12px; margin-bottom:6px;">Color</label>
-    <div id="new-subject-colors" class="subject-color-swatches"></div>
-    <div style="display:flex; justify-content:flex-end; gap:8px; margin-top:16px;">
-      <button id="new-subject-cancel" class="btn" style="padding:6px 10px;">Cancel</button>
-      <button id="new-subject-save" class="btn btn-primary" style="padding:6px 12px;">Save</button>
-    </div>
-  </div>
-</div>
+    document.getElementById('settings-close').addEventListener('click', () => {
+      settingsModal.style.display = 'none';
+    });
 
-<div id="new-task-modal" class="modal-backdrop" style="display:none; position:fixed; inset:0;  z-index:9998; align-items:center; justify-content:center;">
-  <div class="modal-card" style=" border-radius:12px; padding:20px; width:320px; box-shadow:0 12px 40px rgba(0,0,0,0.25);">
-    <h3 style="margin:0 0 12px; font-size:18px; font-weight:600;">New task</h3>
+    window.addEventListener('click', (e) => {
+      if (e.target === settingsModal) settingsModal.style.display = 'none';
+    });
 
-    <label style="display:block; font-size:12px; margin-bottom:4px;">Subject</label>
-    <select id="new-task-subject" paceholder="Subject" style="width:100%; padding:6px; margin-bottom:10px;"></select>
+    // ─── Theme & preferences ─────────────────────────────────────────────────
+    const darkModeToggle    = document.getElementById('dark-mode-toggle');
+    const compactViewToggle = document.getElementById('compact-view-toggle');
 
-    <label style="display:block; font-size:12px; margin-bottom:4px;">Task name</label>
-    <input id="new-task-title" type="text" style="width:100%; padding:6px; margin-bottom:10px;"placeholder="TaskName">
+    function loadPreferences() {
+      const isDark    = localStorage.getItem('studyplan_dark_mode')    === 'true';
+      const isCompact = localStorage.getItem('studyplan_compact_view') === 'true';
 
-    <label style="display:block; font-size:12px; margin-bottom:4px;">Deadline</label>
-    <input id="new-task-date" type="datetime-local" style="width:100%; padding:6px; margin-bottom:10px;" placeholder="Deadline">
+      darkModeToggle.checked    = isDark;
+      compactViewToggle.checked = isCompact;
 
-    <!-- <label style="display:block; font-size:12px; margin-bottom:4px;">Notes</label> -->
-    <input id="new-task-notes" type="text" style="width:100%; padding:6px; margin-bottom:16px;" placeholder="Notes">
+      document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');
+      document.body.classList.toggle('compact-view', isCompact);
+    }
+
+    loadPreferences();
+
+    document.getElementById('settings-save').addEventListener('click', () => {
+      localStorage.setItem('studyplan_dark_mode',    darkModeToggle.checked);
+      localStorage.setItem('studyplan_compact_view', compactViewToggle.checked);
+      loadPreferences();
+      settingsModal.style.display = 'none';
+    });
+
+    darkModeToggle.addEventListener('change', (e) => {
+      document.documentElement.setAttribute('data-theme', e.target.checked ? 'dark' : 'light');
+    });
+
+    compactViewToggle.addEventListener('change', (e) => {
+      document.body.classList.toggle('compact-view', e.target.checked);
+    });
+  </script>
 
-    <div style="display:flex; justify-content:flex-end; gap:8px;">
-      <button id="new-task-cancel" class="btn" style="padding:6px 10px;">Cancel</button>
-      <button id="new-task-save" class="btn btn-primary" style="padding:6px 12px;">Save</button>
-    </div>
-  </div>
-</div>
 </body>
 </html>
diff --git a/server.js b/server.js
index 877f766..a4619bd 100644
--- a/server.js
+++ b/server.js
@@ -456,7 +456,7 @@ app.post('/api/auth/signup', (req, res) => {
     return res.status(400).json({ error: 'User already exists' });
   }
   users[email] = { email, password };
-  res.json({ success: true, message: 'Account created successfully' });
+  res.json({ success: true, email, message: 'Account created successfully' });
 });
 
 app.post('/api/auth/login', (req, res) => {