diff --git a/README.md b/README.md
index 7103879..0782002 100644
--- a/README.md
+++ b/README.md
@@ -154,13 +154,25 @@ Open → http://localhost:3000
 ```
  StudyPlan
 ├──  css
-│   └──  index.css           # Contains all styling rules, variables, and animations
+│   ├──  index.css           # Entry point — imports layered stylesheets
+│   ├──  tokens.css          # Design tokens (color, spacing, type, motion)
+│   ├──  base.css            # Reset, typography, a11y utilities
+│   ├──  layout.css          # Header, footer, app grid, breakpoints
+│   ├──  animations.css      # Keyframes, stagger utilities
+│   ├──  components.css      # Buttons, forms, modals, toggles (BEM)
+│   ├──  features.css        # App-specific UI (calendar, tasks, panel, focus)
+│   └──  effects.css         # Glass surfaces, gradients, micro-interactions
 ├──  js
+│   ├──  ui
+│   │   └──  templates.js    # Reusable HTML templates for tasks, forms, extract cards
 │   ├──  utils
 │   │   ├──  aiMock.js       # The original mock UI extraction hook (deprecated)
-│   │   └──  api.js          # The live fetch logic communicating with our Express API
-│   ├──  app.js              # The main controller (handles DOM UI, event bindings, and Calendar)
-│   └──  store.js            # The Custom State Manager handling our frontend Pub/Sub state
+│   │   ├──  api.js          # The live fetch logic communicating with our Express API
+│   │   └──  dom.js          # DOM helpers (escape, modals, toast, date format)
+│   ├──  app.js              # Main controller (views, calendar, tasks, panel)
+│   ├──  auth.js             # Login / signup modal logic
+│   ├──  settings.js         # Theme and compact-view preferences
+│   └──  store.js            # Custom state manager (pub/sub)
 ├──  .env.example            # Template file for setting the GEMINI_API_KEY
 ├──  .gitignore              # Tells git to ignore databases, environments, and node packages
 ├──  database.js             # Initializes the SQLite database and executes DB table schemas
diff --git a/css/animations.css b/css/animations.css
new file mode 100644
index 0000000..7fbd543
--- /dev/null
+++ b/css/animations.css
@@ -0,0 +1,115 @@
+/* Motion system — keyframes & stagger utilities */
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes fadeInScale {
+  from { opacity: 0; transform: scale(0.96) translateY(6px); }
+  to { opacity: 1; transform: scale(1) translateY(0); }
+}
+
+@keyframes popIn {
+  0% { transform: scale(0.92); opacity: 0; }
+  70% { transform: scale(1.02); }
+  100% { transform: scale(1); opacity: 1; }
+}
+
+@keyframes slideInRight {
+  from { opacity: 0; transform: translateX(-12px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes slideInUp {
+  from { opacity: 0; transform: translateY(16px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes modalBackdropIn {
+  from { opacity: 0; backdrop-filter: blur(0); }
+  to { opacity: 1; backdrop-filter: blur(12px); }
+}
+
+@keyframes modalCardIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px) scale(0.94);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+@keyframes pulseGlow {
+  0%, 100% { box-shadow: var(--shadow-md); }
+  50% { box-shadow: var(--shadow-glow); }
+}
+
+@keyframes shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+@keyframes calDayPop {
+  0% { transform: scale(0.85); opacity: 0.6; }
+  100% { transform: scale(1); opacity: 1; }
+}
+
+@keyframes checkDraw {
+  from { transform: scale(0.6); opacity: 0; }
+  to { transform: scale(1); opacity: 1; }
+}
+
+@keyframes gradientShift {
+  0%, 100% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+}
+
+@keyframes floatOrb {
+  0%, 100% { transform: translate(0, 0) scale(1); }
+  33% { transform: translate(2%, -1%) scale(1.02); }
+  66% { transform: translate(-1%, 2%) scale(0.98); }
+}
+
+@keyframes navIndicator {
+  from { opacity: 0; transform: scaleY(0.5); }
+  to { opacity: 1; transform: scaleY(1); }
+}
+
+@keyframes toastIn {
+  from { opacity: 0; transform: translateX(-50%) translateY(24px); }
+  to { opacity: 1; transform: translateX(-50%) translateY(0); }
+}
+
+@keyframes confFillGrow {
+  from { width: 0; }
+}
+
+/* Stagger children */
+.stagger-children > * {
+  animation: slideInUp var(--duration-normal) var(--ease-emphasized) backwards;
+}
+
+.stagger-children > *:nth-child(1) { animation-delay: 0ms; }
+.stagger-children > *:nth-child(2) { animation-delay: 40ms; }
+.stagger-children > *:nth-child(3) { animation-delay: 80ms; }
+.stagger-children > *:nth-child(4) { animation-delay: 120ms; }
+.stagger-children > *:nth-child(5) { animation-delay: 160ms; }
+.stagger-children > *:nth-child(6) { animation-delay: 200ms; }
+.stagger-children > *:nth-child(7) { animation-delay: 240ms; }
+.stagger-children > *:nth-child(8) { animation-delay: 280ms; }
+.stagger-children > *:nth-child(n+9) { animation-delay: 320ms; }
+
+.animate-fade-in {
+  animation: fadeIn var(--duration-slow) var(--ease-emphasized);
+}
+
+.animate-pop-in {
+  animation: popIn var(--duration-normal) var(--ease-spring);
+}
diff --git a/css/base.css b/css/base.css
new file mode 100644
index 0000000..19b123d
--- /dev/null
+++ b/css/base.css
@@ -0,0 +1,107 @@
+/* Base — reset, typography, ambient background */
+
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-size: clamp(0.9375rem, 0.25vw + 0.9rem, 1rem);
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: var(--font-sans);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-body);
+  color: var(--color-text-primary);
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-5) var(--space-3);
+  overflow-x: hidden;
+  background-color: var(--color-background-tertiary);
+  background-image: var(--gradient-mesh-1), var(--gradient-mesh-2), var(--gradient-mesh-3);
+  background-attachment: fixed;
+  position: relative;
+}
+
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: -1;
+  opacity: 0.6;
+  animation: floatOrb 18s ease-in-out infinite;
+  background: var(--gradient-mesh-1);
+}
+
+h1, h2, h3, .site-title, .modal-card__title, .topbar-title {
+  font-family: var(--font-display);
+  line-height: var(--line-height-tight);
+  color: var(--color-text-primary);
+  letter-spacing: -0.02em;
+}
+
+.site-title {
+  background: var(--gradient-brand);
+  background-size: 200% 200%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: gradientShift 8s ease infinite;
+}
+
+a {
+  color: var(--color-brand-600);
+  transition: color var(--duration-fast) var(--ease-standard);
+}
+
+a:hover,
+a:focus-visible {
+  color: var(--color-violet);
+}
+
+:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+button:focus:not(:focus-visible),
+a:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.hidden {
+  display: none !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+
+  .site-title {
+    -webkit-text-fill-color: var(--color-text-primary);
+    background: none;
+  }
+}
diff --git a/css/components.css b/css/components.css
new file mode 100644
index 0000000..fc809c1
--- /dev/null
+++ b/css/components.css
@@ -0,0 +1,417 @@
+/* Components — buttons, forms, modals, toggles (BEM) */
+
+/* Buttons */
+.btn {
+  font-family: inherit;
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  padding: var(--space-2) var(--space-3);
+  min-height: 44px;
+  border: 1px solid var(--color-border-secondary);
+  border-radius: var(--border-radius-md);
+  background: var(--color-background-primary);
+  color: var(--color-text-primary);
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition:
+    background var(--duration-normal) var(--ease-standard),
+    transform var(--duration-fast) var(--ease-spring),
+    box-shadow var(--duration-normal),
+    border-color var(--duration-fast);
+  box-shadow: var(--shadow-sm);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+}
+
+.btn::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.25) 50%, transparent 70%);
+  transform: translateX(-100%);
+  transition: transform var(--duration-slow) var(--ease-standard);
+  pointer-events: none;
+}
+
+.btn:hover::after {
+  transform: translateX(100%);
+}
+
+.btn:hover {
+  background: var(--color-background-secondary);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+  border-color: rgba(99, 102, 241, 0.2);
+}
+
+.btn:active {
+  transform: translateY(0) scale(0.98);
+  box-shadow: var(--shadow-sm);
+}
+
+.btn:disabled,
+.btn[aria-disabled="true"] {
+  opacity: 0.6;
+  cursor: not-allowed;
+  pointer-events: none;
+  transform: none;
+}
+
+.btn--primary {
+  background: var(--gradient-brand);
+  background-size: 200% 200%;
+  color: #fff;
+  border-color: transparent;
+  box-shadow: var(--shadow-md), 0 2px 8px var(--color-brand-glow);
+}
+
+.btn--primary:hover {
+  background-position: 100% 50%;
+  box-shadow: var(--shadow-glow);
+}
+
+.btn--brand {
+  background: var(--gradient-brand);
+  background-size: 200% 200%;
+  color: #fff;
+  border-color: transparent;
+  box-shadow: 0 4px 14px var(--color-brand-glow);
+}
+
+.btn--brand:hover {
+  background-position: 100% 50%;
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-glow);
+}
+
+.btn--ghost {
+  background: transparent;
+  box-shadow: none;
+  border-color: transparent;
+}
+
+.btn--small {
+  font-size: var(--font-size-xs);
+  padding: 6px 10px;
+  min-height: 36px;
+}
+
+.btn--block {
+  width: 100%;
+}
+
+.btn--grow-2 {
+  flex: 2;
+}
+
+.btn--grow-1 {
+  flex: 1;
+}
+
+.btn__icon {
+  margin-right: 2px;
+  flex-shrink: 0;
+}
+
+.profile-btn {
+  padding: var(--space-2) var(--space-3);
+  border: none;
+  border-radius: var(--border-radius-md);
+  background: var(--color-text-primary);
+  color: var(--color-background-primary);
+  cursor: pointer;
+  font-weight: 600;
+  min-height: 44px;
+}
+
+/* Legacy alias */
+.btn-primary {
+  background: var(--gradient-brand);
+  background-size: 200% 200%;
+  color: #fff;
+  border-color: transparent;
+  box-shadow: var(--shadow-md), 0 2px 8px var(--color-brand-glow);
+}
+
+.btn-primary:hover {
+  background-position: 100% 50%;
+  box-shadow: var(--shadow-glow);
+}
+
+/* Forms */
+.form-field {
+  margin-bottom: var(--space-3);
+}
+
+.form-field__label {
+  display: block;
+  font-size: var(--font-size-xs);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--color-text-tertiary);
+  margin-bottom: var(--space-1);
+}
+
+.form-field__input,
+.form-field__select,
+.edit-field {
+  width: 100%;
+  box-sizing: border-box;
+  font-family: inherit;
+  font-size: var(--font-size-sm);
+  padding: 10px 12px;
+  border-radius: var(--border-radius-sm);
+  border: 1px solid var(--color-border-secondary);
+  background: var(--color-background-primary);
+  color: var(--color-text-primary);
+  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast);
+}
+
+.form-field__input:focus,
+.form-field__select:focus,
+.edit-field:focus {
+  outline: none;
+  border-color: var(--color-brand-500);
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2), var(--shadow-sm);
+  transform: translateY(-1px);
+  transition: border-color var(--duration-fast), box-shadow var(--duration-fast), transform var(--duration-fast);
+}
+
+.form-field__input::placeholder {
+  color: var(--color-text-tertiary);
+}
+
+.form-error {
+  color: var(--color-text-danger);
+  font-size: var(--font-size-sm);
+  text-align: center;
+  margin-top: var(--space-2);
+  display: none;
+}
+
+.form-error.is-visible {
+  display: block;
+}
+
+.form-hint {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  margin-bottom: var(--space-4);
+}
+
+.form-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--space-2);
+  margin-top: var(--space-3);
+}
+
+/* Modals */
+.modal-backdrop {
+  display: none;
+  position: fixed;
+  inset: 0;
+  z-index: 9998;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-3);
+  background: var(--color-overlay);
+  backdrop-filter: blur(0);
+}
+
+.modal-backdrop.is-open {
+  display: flex;
+  animation: modalBackdropIn var(--duration-normal) var(--ease-standard) forwards;
+}
+
+.modal-backdrop--elevated {
+  z-index: 9999;
+}
+
+.modal-card {
+  width: 100%;
+  max-width: 400px;
+  background: var(--gradient-surface);
+  backdrop-filter: blur(var(--blur-glass));
+  border: 1px solid var(--color-surface-glass-border);
+  border-radius: var(--border-radius-xl);
+  padding: var(--space-5);
+  box-shadow: var(--shadow-glow), var(--shadow-lg);
+  color: var(--color-text-primary);
+  position: relative;
+  overflow: hidden;
+}
+
+.modal-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: var(--gradient-brand);
+}
+
+.modal-backdrop.is-open .modal-card {
+  animation: modalCardIn var(--duration-normal) var(--ease-emphasized);
+}
+
+.modal-card--narrow {
+  max-width: 360px;
+}
+
+.modal-card__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--space-4);
+}
+
+.modal-card__title {
+  font-size: var(--font-size-md);
+  font-weight: 800;
+  margin: 0;
+  font-family: var(--font-display);
+  background: var(--gradient-brand);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.modal-card__close {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  line-height: 1;
+  cursor: pointer;
+  color: var(--color-text-secondary);
+  min-width: 44px;
+  min-height: 44px;
+  border-radius: var(--border-radius-sm);
+}
+
+.modal-card__close:hover {
+  color: var(--color-text-primary);
+}
+
+.modal-card__section-title {
+  font-size: var(--font-size-xs);
+  font-weight: 700;
+  text-transform: uppercase;
+  color: var(--color-text-tertiary);
+  margin-bottom: var(--space-3);
+  letter-spacing: 0.05em;
+}
+
+.modal-card__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--space-3);
+}
+
+.modal-card__row-label {
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+}
+
+.auth-modal__toggle {
+  text-align: center;
+  margin-top: var(--space-3);
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+}
+
+.auth-modal__toggle a {
+  font-weight: 600;
+  margin-left: var(--space-1);
+}
+
+/* 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-color: var(--color-border-primary);
+  transition: background var(--duration-normal);
+  border-radius: 24px;
+}
+
+.toggle-slider::before {
+  position: absolute;
+  content: "";
+  height: 18px;
+  width: 18px;
+  left: 3px;
+  bottom: 3px;
+  background-color: var(--color-background-primary);
+  transition: transform var(--duration-normal) var(--ease-standard);
+  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);
+}
+
+.toggle-switch input:focus-visible + .toggle-slider {
+  box-shadow: var(--focus-ring);
+}
+
+/* Subject color swatches */
+.subject-color-swatches {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  margin-bottom: var(--space-1);
+}
+
+.subject-color-swatch {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  border: 2px solid var(--color-border-secondary);
+  cursor: pointer;
+  padding: 0;
+  flex-shrink: 0;
+  transition: transform var(--duration-fast);
+}
+
+.subject-color-swatch:hover {
+  transform: scale(1.06);
+}
+
+.subject-color-swatch--selected {
+  box-shadow: 0 0 0 2px var(--color-background-primary), 0 0 0 4px var(--color-brand);
+}
+
+/* Loader */
+.loader-spinner {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--color-border-tertiary);
+  border-radius: 50%;
+  border-top-color: var(--color-text-primary);
+  animation: spin 0.8s linear infinite;
+}
diff --git a/css/effects.css b/css/effects.css
new file mode 100644
index 0000000..5ca0507
--- /dev/null
+++ b/css/effects.css
@@ -0,0 +1,372 @@
+/* Premium UI — glass, gradients, micro-interactions */
+
+/* Glass shells */
+.site-header,
+.site-footer {
+  background: var(--color-surface-glass);
+  backdrop-filter: blur(var(--blur-glass));
+  -webkit-backdrop-filter: blur(var(--blur-glass));
+  border-color: var(--color-surface-glass-border);
+  box-shadow: var(--shadow-md);
+  transition: box-shadow var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-standard);
+}
+
+.site-header:hover {
+  box-shadow: var(--shadow-lg);
+}
+
+.wrapper {
+  animation: fadeInScale var(--duration-slower) var(--ease-emphasized);
+}
+
+.app {
+  background: var(--gradient-surface);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid var(--color-surface-glass-border);
+  border-radius: var(--border-radius-xl);
+  box-shadow: var(--shadow-glow);
+  transition: box-shadow var(--duration-slow) var(--ease-standard);
+}
+
+.app:hover {
+  box-shadow: var(--shadow-glow), var(--shadow-lg);
+}
+
+/* Sidebar */
+.sidebar {
+  background: var(--gradient-brand-subtle);
+  border-right: 1px solid var(--color-border-tertiary);
+}
+
+.nav-item {
+  transition:
+    background var(--duration-normal) var(--ease-standard),
+    color var(--duration-fast),
+    transform var(--duration-fast) var(--ease-spring),
+    box-shadow var(--duration-normal);
+}
+
+.nav-item:hover {
+  transform: translateX(4px);
+  background: var(--color-background-primary);
+  box-shadow: var(--shadow-sm);
+}
+
+.nav-item.active {
+  background: var(--color-background-primary);
+  color: var(--color-brand-600);
+  box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(99, 102, 241, 0.12);
+}
+
+.nav-item.active::before {
+  width: 4px;
+  background: var(--gradient-brand);
+  border-radius: 0 4px 4px 0;
+  animation: navIndicator var(--duration-normal) var(--ease-emphasized);
+  box-shadow: 0 0 12px var(--color-brand-glow);
+}
+
+.badge {
+  background: var(--color-accent-soft);
+  color: var(--color-brand-700);
+  border: 1px solid rgba(99, 102, 241, 0.15);
+  transition: transform var(--duration-fast) var(--ease-spring);
+}
+
+.nav-item:hover .badge {
+  transform: scale(1.05);
+}
+
+.add-subject {
+  border-radius: var(--border-radius-md);
+  transition: color var(--duration-fast), background var(--duration-fast), transform var(--duration-fast);
+}
+
+.add-subject:hover {
+  background: var(--color-accent-soft);
+  color: var(--color-brand-600);
+  transform: translateX(2px);
+}
+
+/* Topbar */
+.topbar {
+  background: var(--color-surface-glass);
+  backdrop-filter: blur(12px);
+  border-bottom: 1px solid var(--color-border-tertiary);
+}
+
+.topbar-title {
+  background: var(--gradient-brand);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+/* Calendar */
+.cal-day {
+  transition:
+    background var(--duration-fast),
+    color var(--duration-fast),
+    transform var(--duration-fast) var(--ease-spring),
+    box-shadow var(--duration-fast);
+}
+
+.cal-day:hover {
+  transform: scale(1.08);
+  background: var(--color-accent-soft);
+  box-shadow: var(--shadow-sm);
+}
+
+.cal-day.today {
+  background: var(--gradient-brand);
+  color: #fff;
+  box-shadow: var(--shadow-glow);
+  animation: pulseGlow 3s ease-in-out infinite;
+}
+
+.cal-day.selected {
+  box-shadow: inset 0 0 0 2px var(--color-brand-500), 0 0 0 3px rgba(99, 102, 241, 0.2);
+  background: var(--color-accent-soft);
+  color: var(--color-brand-600);
+  font-weight: 700;
+}
+
+.cal-grid .interactive-day {
+  animation: calDayPop var(--duration-normal) var(--ease-spring) backwards;
+}
+
+.cal-grid .interactive-day:nth-child(8n+1) { animation-delay: 20ms; }
+.cal-grid .interactive-day:nth-child(8n+2) { animation-delay: 35ms; }
+.cal-grid .interactive-day:nth-child(8n+3) { animation-delay: 50ms; }
+.cal-grid .interactive-day:nth-child(8n+4) { animation-delay: 65ms; }
+.cal-grid .interactive-day:nth-child(8n+5) { animation-delay: 80ms; }
+.cal-grid .interactive-day:nth-child(8n+6) { animation-delay: 95ms; }
+.cal-grid .interactive-day:nth-child(8n+7) { animation-delay: 110ms; }
+
+.cal-nav {
+  transition: background var(--duration-fast), transform var(--duration-fast) var(--ease-spring);
+}
+
+.cal-nav:hover {
+  transform: scale(1.1);
+  background: var(--color-accent-soft);
+}
+
+/* Tasks */
+.tasks-group {
+  animation: slideInUp var(--duration-normal) var(--ease-emphasized);
+}
+
+.task-item {
+  transition:
+    transform var(--duration-normal) var(--ease-emphasized),
+    box-shadow var(--duration-normal),
+    border-color var(--duration-fast),
+    background var(--duration-fast);
+}
+
+.task-item:hover {
+  transform: translateX(6px) translateY(-2px);
+  box-shadow: var(--shadow-md);
+  border-color: rgba(99, 102, 241, 0.2);
+}
+
+.task-item.urgent {
+  background: linear-gradient(105deg, var(--color-background-danger) 0%, var(--color-background-primary) 65%);
+  border-left: 3px solid var(--color-text-danger);
+}
+
+.task-check {
+  transition: border-color var(--duration-fast), background var(--duration-fast), transform var(--duration-fast) var(--ease-spring);
+}
+
+.task-check:hover {
+  transform: scale(1.1);
+  border-color: var(--color-brand-500);
+}
+
+.task-check.done {
+  background: var(--gradient-brand);
+  border-color: transparent;
+  animation: checkDraw var(--duration-fast) var(--ease-spring);
+}
+
+.task-pill {
+  transition: transform var(--duration-fast) var(--ease-spring);
+}
+
+.task-item:hover .task-pill {
+  transform: translateY(-1px);
+}
+
+/* Panel & paste */
+.panel {
+  background: var(--gradient-brand-subtle);
+}
+
+.paste-zone {
+  transition:
+    border-color var(--duration-normal),
+    background var(--duration-normal),
+    transform var(--duration-normal) var(--ease-emphasized),
+    box-shadow var(--duration-normal);
+}
+
+.paste-zone:hover {
+  border-color: var(--color-brand-400);
+  background: var(--color-accent-soft);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+}
+
+.paste-zone:focus-within {
+  border-color: var(--color-brand-500);
+  border-style: solid;
+  box-shadow: var(--shadow-glow), inset 0 0 0 1px rgba(99, 102, 241, 0.15);
+}
+
+.extract-card {
+  transition: transform var(--duration-normal) var(--ease-emphasized), box-shadow var(--duration-normal);
+}
+
+.extract-card:hover {
+  transform: translateY(-3px);
+  box-shadow: var(--shadow-lg);
+}
+
+.conf-fill {
+  transition: width 1s var(--ease-out-expo);
+}
+
+.conf-fill--high {
+  box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
+}
+
+.conf-fill--medium {
+  box-shadow: 0 0 8px rgba(245, 158, 11, 0.35);
+}
+
+.add-btn {
+  background: var(--gradient-brand);
+  background-size: 200% 200%;
+  color: #fff;
+  border: none;
+  transition:
+    transform var(--duration-fast) var(--ease-spring),
+    box-shadow var(--duration-normal),
+    background-position var(--duration-slow);
+}
+
+.add-btn:hover:not(:disabled) {
+  background-position: 100% 50%;
+  transform: translateY(-3px);
+  box-shadow: var(--shadow-glow);
+}
+
+/* Focus timer */
+.timer-path-remaining {
+  stroke: url(#timer-gradient);
+  filter: drop-shadow(0 0 6px var(--color-brand-glow));
+}
+
+.timer-text {
+  background: var(--gradient-brand);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.focus-task-item {
+  transition: transform var(--duration-normal) var(--ease-emphasized), border-color var(--duration-fast), box-shadow var(--duration-normal);
+}
+
+.focus-task-item:hover {
+  transform: translateY(-3px) scale(1.01);
+  box-shadow: var(--shadow-md);
+  border-color: var(--color-brand-400);
+}
+
+.active-focus-task {
+  background: var(--gradient-brand-subtle);
+  border-color: rgba(99, 102, 241, 0.25);
+  animation: fadeInScale var(--duration-normal) var(--ease-emphasized);
+}
+
+/* Smart workload */
+.smart-workload-card {
+  animation: slideInUp var(--duration-normal) var(--ease-emphasized);
+  backdrop-filter: blur(8px);
+}
+
+/* Summary */
+.summary-box {
+  background: var(--gradient-brand-subtle);
+  border-color: rgba(99, 102, 241, 0.15);
+  animation: fadeIn var(--duration-slow) var(--ease-emphasized);
+}
+
+/* Header nav underline */
+.header-nav a {
+  position: relative;
+}
+
+.header-nav a::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: 8px;
+  width: 100%;
+  height: 2px;
+  background: var(--gradient-brand);
+  border-radius: 2px;
+  transform: scaleX(0);
+  transition: transform var(--duration-normal) var(--ease-emphasized);
+}
+
+.header-nav a:hover::after,
+.header-nav a:focus-visible::after {
+  transform: scaleX(1);
+}
+
+.profile-btn {
+  background: var(--gradient-brand);
+  transition: transform var(--duration-fast) var(--ease-spring), box-shadow var(--duration-normal);
+}
+
+.profile-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-glow);
+}
+
+.logo {
+  box-shadow: var(--shadow-sm);
+  transition: transform var(--duration-normal) var(--ease-spring);
+}
+
+.logo:hover {
+  transform: rotate(-3deg) scale(1.05);
+}
+
+:root[data-theme="dark"] .cal-day.today {
+  color: #fff;
+}
+
+:root[data-theme="dark"] .cal-day:hover {
+  background: rgba(99, 102, 241, 0.15);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) .cal-day.today {
+    color: #fff;
+  }
+
+  :root:not([data-theme="light"]) .cal-day:hover {
+    background: rgba(99, 102, 241, 0.15);
+  }
+
+  :root:not([data-theme="light"]) .cal-day.selected {
+    background: rgba(99, 102, 241, 0.2);
+    color: var(--color-text-primary);
+  }
+}
diff --git a/css/features.css b/css/features.css
new file mode 100644
index 0000000..fe2dfca
--- /dev/null
+++ b/css/features.css
@@ -0,0 +1,1051 @@
+/* Features — StudyPlan app UI */
+
+.sidebar {
+  background: var(--color-background-secondary);
+  border-right: 1px solid var(--color-border-tertiary);
+  padding: var(--space-4) var(--space-3);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  overflow-y: auto;
+}
+
+.sidebar-header {
+  font-size: var(--font-size-xs);
+  font-weight: 700;
+  color: var(--color-text-tertiary);
+  padding: var(--space-2) var(--space-3);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  width: 100%;
+  padding: 10px var(--space-3);
+  min-height: 44px;
+  border: none;
+  border-radius: var(--border-radius-md);
+  background: transparent;
+  font-family: inherit;
+  text-align: left;
+  cursor: pointer;
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+  color: var(--color-text-secondary);
+  transition: background var(--duration-fast), color var(--duration-fast), transform var(--duration-fast);
+  position: relative;
+}
+
+.nav-item:hover,
+.nav-item:focus-visible {
+  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;
+}
+
+.badge {
+  margin-left: auto;
+  font-size: var(--font-size-xs);
+  font-weight: 600;
+  background: var(--color-background-tertiary);
+  color: var(--color-text-secondary);
+  padding: 2px var(--space-2);
+  border-radius: 12px;
+}
+
+.sidebar-divider {
+  height: 1px;
+  background: var(--color-border-tertiary);
+  margin: var(--space-3) 0;
+}
+
+.add-subject {
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+  color: var(--color-text-tertiary);
+  padding: var(--space-2) var(--space-3);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-height: 44px;
+}
+
+.add-subject:hover {
+  color: var(--color-text-primary);
+}
+
+.main {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
+  min-width: 0;
+}
+
+.topbar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-4);
+  border-bottom: 1px solid var(--color-border-tertiary);
+  flex-shrink: 0;
+  background: var(--color-background-primary);
+  z-index: 10;
+}
+
+.topbar-title {
+  font-size: var(--font-size-md);
+  font-weight: 600;
+  flex: 1;
+}
+
+/* Calendar */
+.cal-section {
+  padding: var(--space-3) var(--space-4);
+  border-bottom: 1px solid var(--color-border-tertiary);
+  flex-shrink: 0;
+}
+
+.cal-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: var(--space-3);
+}
+
+.cal-title {
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  flex: 1;
+}
+
+.cal-nav {
+  font-size: var(--font-size-md);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  padding: var(--space-1) var(--space-2);
+  min-width: 44px;
+  min-height: 44px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--border-radius-sm);
+  transition: background var(--duration-fast);
+}
+
+.cal-nav:hover,
+.cal-nav:focus-visible {
+  background: var(--color-background-secondary);
+  color: var(--color-text-primary);
+}
+
+.cal-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: var(--space-1);
+  text-align: center;
+}
+
+.cal-day-label {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+  padding-bottom: var(--space-2);
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.cal-day {
+  font-size: var(--font-size-sm);
+  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: background var(--duration-fast), transform var(--duration-fast);
+}
+
+.cal-day:hover {
+  background: var(--color-background-secondary);
+  color: var(--color-text-primary);
+}
+
+.cal-day.today {
+  background: var(--color-text-primary);
+  color: var(--color-background-primary);
+}
+
+.cal-day.muted {
+  color: var(--color-border-secondary);
+}
+
+.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-legend {
+  display: flex;
+  gap: var(--space-3);
+  margin-top: var(--space-3);
+  font-size: var(--font-size-xs);
+  font-weight: 500;
+  color: var(--color-text-tertiary);
+  justify-content: flex-end;
+  flex-wrap: wrap;
+}
+
+.cal-legend span {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.legend-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+/* Tasks */
+.tasks-section {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 var(--space-4) var(--space-4);
+  scroll-behavior: smooth;
+}
+
+.tasks-section::-webkit-scrollbar,
+.extract-preview::-webkit-scrollbar {
+  width: 6px;
+}
+
+.tasks-section::-webkit-scrollbar-thumb,
+.extract-preview::-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: var(--font-size-xs);
+  font-weight: 700;
+  cursor: pointer;
+  min-height: 44px;
+  transition: transform var(--duration-fast), filter var(--duration-fast);
+}
+
+.task-action-btn:hover:not(:disabled) {
+  transform: translateY(-1px);
+}
+
+.task-action-btn:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.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: var(--font-size-sm);
+  background: var(--color-background-secondary);
+}
+
+.tasks-group {
+  margin-top: var(--space-4);
+  animation: fadeIn var(--duration-normal) ease forwards;
+}
+
+.tasks-group-header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin-bottom: var(--space-3);
+}
+
+.tasks-group-header span,
+.tasks-group-header__label,
+.tasks-group-header__label--danger,
+.tasks-group-header__label--muted {
+  font-size: var(--font-size-xs);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.tasks-group-header__label--danger {
+  color: var(--color-text-danger);
+}
+
+.tasks-group-header__label--muted {
+  color: var(--color-text-tertiary);
+}
+
+.task-item--editing {
+  display: block;
+  cursor: default;
+}
+
+.task-item--editing:hover {
+  transform: none;
+}
+
+.task-info--focus {
+  width: 100%;
+}
+
+.task-name--focus {
+  font-size: var(--font-size-md);
+}
+
+.focus-task-actions {
+  margin-top: var(--space-3);
+  display: flex;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+}
+
+.cal-day.selected {
+  box-shadow: inset 0 0 0 2px var(--color-text-primary);
+}
+
+.legend-dot--info {
+  background: var(--color-text-info);
+}
+
+.legend-dot--danger {
+  background: var(--color-text-danger);
+}
+
+.conf-fill--high {
+  background: var(--color-text-success);
+}
+
+.conf-fill--medium {
+  background: var(--color-text-warning);
+}
+
+.paste-actions--balanced {
+  display: flex;
+  gap: var(--space-3);
+}
+
+.toast {
+  position: fixed;
+  bottom: var(--space-4);
+  left: 50%;
+  transform: translateX(-50%) translateY(120%);
+  padding: var(--space-3) var(--space-4);
+  background: var(--gradient-brand);
+  color: #fff;
+  border-radius: var(--border-radius-lg);
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  box-shadow: var(--shadow-glow);
+  z-index: 10000;
+  opacity: 0;
+  pointer-events: none;
+  max-width: min(90vw, 400px);
+  text-align: center;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.toast.is-visible {
+  animation: toastIn var(--duration-normal) var(--ease-emphasized) forwards;
+}
+
+.toast--error {
+  background: linear-gradient(135deg, #dc2626, #b91c1c);
+  box-shadow: 0 8px 32px rgba(220, 38, 38, 0.35);
+}
+
+.nav-item:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.task-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 14px;
+  padding: 12px 14px;
+  border-radius: var(--border-radius-md);
+  cursor: pointer;
+  transition: background var(--duration-fast), transform var(--duration-fast), border-color var(--duration-fast);
+  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;
+  position: relative;
+  cursor: pointer;
+  transition: border-color var(--duration-fast), background var(--duration-fast);
+}
+
+.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 #fff;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+.task-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.task-name {
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+  line-height: var(--line-height-tight);
+  margin-bottom: 6px;
+}
+
+.task-item.done .task-name {
+  text-decoration: line-through;
+  color: var(--color-text-tertiary);
+}
+
+.task-meta {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+  display: flex;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.task-pill {
+  font-size: var(--font-size-xs);
+  padding: 2px var(--space-2);
+  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); }
+.pill-purple { background: var(--color-background-purple); color: var(--color-text-purple); }
+
+.task-actions {
+  display: flex;
+  gap: var(--space-2);
+  opacity: 0;
+  transition: opacity var(--duration-fast);
+}
+
+.task-item:hover .task-actions,
+.task-item:focus-within .task-actions {
+  opacity: 1;
+}
+
+.task-btn {
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: var(--font-size-xs);
+  font-weight: 600;
+  cursor: pointer;
+  border: 1px solid var(--color-border-secondary);
+  background: var(--color-background-primary);
+  color: var(--color-text-secondary);
+  min-height: 32px;
+}
+
+.conflict-card {
+  font-size: var(--font-size-sm);
+  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 var(--space-3);
+  line-height: var(--line-height-body);
+  display: flex;
+  gap: var(--space-3);
+  box-shadow: var(--shadow-sm);
+}
+
+/* Smart workload */
+.smart-workload-card {
+  margin-bottom: 14px;
+  padding: 14px;
+  border-radius: var(--border-radius-md);
+  background: var(--color-background-warning);
+  border: 1px solid rgba(133, 79, 11, 0.25);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.smart-workload-card.high {
+  border-color: var(--color-border-danger);
+  background: var(--color-background-danger);
+}
+
+.smart-workload-title {
+  font-size: var(--font-size-sm);
+  font-weight: 700;
+}
+
+.smart-workload-score {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-secondary);
+}
+
+.smart-suggestion-list {
+  margin: 0;
+  padding-left: 18px;
+}
+
+.smart-suggestion-list li {
+  margin-bottom: 6px;
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-body);
+}
+
+.smart-highlight {
+  color: var(--color-text-warning);
+  font-weight: 600;
+}
+
+/* Panel */
+.panel {
+  border-left: 1px solid var(--color-border-tertiary);
+  display: flex;
+  flex-direction: column;
+  background: var(--color-background-secondary);
+  overflow: hidden;
+  min-width: 0;
+}
+
+.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 .summary-box,
+.panel.panel-collapsed .add-btn {
+  display: none;
+}
+
+.panel-header {
+  padding: var(--space-4) var(--space-4) var(--space-3);
+  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: var(--space-3);
+  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: 44px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: var(--color-text-secondary);
+}
+
+.panel-toggle-icon {
+  transition: transform var(--duration-normal) var(--ease-standard);
+}
+
+.panel-title {
+  font-size: var(--font-size-base);
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.panel-subtitle {
+  font-size: var(--font-size-xs);
+  font-weight: 500;
+  color: var(--color-text-tertiary);
+  margin-top: var(--space-1);
+}
+
+.paste-zone {
+  margin: var(--space-4) var(--space-4) var(--space-3);
+  border: 2px dashed var(--color-border-secondary);
+  border-radius: var(--border-radius-lg);
+  padding: var(--space-4);
+  text-align: center;
+  background: var(--color-background-primary);
+  position: relative;
+  min-height: 120px;
+}
+
+.paste-zone:hover,
+.paste-zone:focus-within {
+  border-color: var(--color-text-info);
+}
+
+.paste-input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  resize: none;
+  border: none;
+  padding: var(--space-4);
+  font-family: inherit;
+  font-size: var(--font-size-sm);
+  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: var(--font-size-sm);
+  font-weight: 600;
+  pointer-events: none;
+}
+
+.paste-hint {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+  pointer-events: none;
+}
+
+.paste-actions {
+  padding: 0 var(--space-4) var(--space-3);
+  display: flex;
+  gap: var(--space-3);
+}
+
+.extract-preview {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 var(--space-4) var(--space-4);
+}
+
+.extract-preview > .stagger-children {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.extract-title {
+  font-size: var(--font-size-xs);
+  font-weight: 700;
+  color: var(--color-text-tertiary);
+  margin-bottom: var(--space-3);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.extract-card {
+  background: var(--color-background-primary);
+  border: 1px solid var(--color-border-tertiary);
+  border-radius: var(--border-radius-md);
+  padding: 14px var(--space-3);
+  margin-bottom: var(--space-3);
+  box-shadow: var(--shadow-sm);
+  animation: popIn var(--duration-normal) var(--ease-emphasized) forwards;
+}
+
+.extract-subject {
+  font-size: var(--font-size-xs);
+  font-weight: 700;
+  text-transform: uppercase;
+  margin-bottom: 6px;
+}
+
+.extract-task-name {
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  margin-bottom: var(--space-2);
+}
+
+.extract-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--font-size-xs);
+  color: var(--color-text-secondary);
+  margin-top: 4px;
+}
+
+.conf-bar {
+  height: 4px;
+  border-radius: 2px;
+  margin-top: var(--space-3);
+  background: var(--color-border-tertiary);
+  overflow: hidden;
+}
+
+.conf-fill {
+  height: 100%;
+  border-radius: 2px;
+  transition: width 1s var(--ease-emphasized);
+}
+
+.conf-label {
+  font-size: var(--font-size-xs);
+  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;
+}
+
+.summary-box {
+  margin: var(--space-3) var(--space-4);
+  padding: 14px;
+  background: var(--color-background-secondary);
+  border-radius: var(--border-radius-md);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-body);
+  border: 1px solid var(--color-border-tertiary);
+}
+
+.add-btn {
+  margin: 0 var(--space-4) var(--space-4);
+  padding: 12px;
+  border: none;
+  border-radius: var(--border-radius-md);
+  background: var(--color-text-primary);
+  color: var(--color-background-primary);
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  cursor: pointer;
+  min-height: 44px;
+  transition: transform var(--duration-fast), background var(--duration-fast);
+}
+
+.add-btn:hover:not(:disabled) {
+  background: var(--color-text-secondary);
+  transform: translateY(-2px);
+}
+
+.add-btn:disabled {
+  background: var(--color-border-secondary);
+  cursor: not-allowed;
+  color: var(--color-text-tertiary);
+}
+
+/* Focus mode */
+.focus-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: var(--space-4);
+  overflow-y: auto;
+  gap: var(--space-5);
+}
+
+.focus-dashboard {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-4);
+}
+
+.timer-container {
+  position: relative;
+  width: 240px;
+  height: 240px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.timer-svg {
+  position: absolute;
+  inset: 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: var(--font-size-2xl);
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  z-index: 1;
+}
+
+.timer-controls {
+  display: flex;
+  gap: var(--space-3);
+}
+
+.timer-duration-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.timer-duration-label {
+  font-size: var(--font-size-xs);
+  font-weight: 600;
+  color: var(--color-text-tertiary);
+  text-transform: uppercase;
+}
+
+.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-family: inherit;
+  text-align: center;
+}
+
+.focus-task-container,
+.focus-task-selector {
+  width: 100%;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.focus-task-header {
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  color: var(--color-text-tertiary);
+  text-transform: uppercase;
+  margin-bottom: var(--space-3);
+}
+
+.active-focus-task {
+  background: var(--color-background-primary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--border-radius-md);
+  padding: var(--space-4);
+  min-height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.focus-task-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.focus-task-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-3);
+  background: var(--color-background-primary);
+  border: 1px solid var(--color-border-tertiary);
+  border-radius: var(--border-radius-md);
+  cursor: pointer;
+  min-height: 44px;
+  transition: transform var(--duration-fast), border-color var(--duration-fast);
+}
+
+.focus-task-item:hover {
+  background: var(--color-background-secondary);
+  border-color: var(--color-text-info);
+}
+
+/* Crash screen */
+.crash-screen {
+  min-height: 100vh;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-4);
+  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-title {
+  font-size: var(--font-size-2xl);
+  margin-bottom: 10px;
+}
+
+.crash-copy {
+  color: var(--color-text-secondary);
+  margin-bottom: var(--space-2);
+}
+
+.crash-quote {
+  color: var(--color-text-info);
+  font-weight: 600;
+  margin-bottom: var(--space-3);
+}
+
+.crash-refresh {
+  border: none;
+  border-radius: var(--border-radius-md);
+  padding: 10px var(--space-3);
+  font-weight: 700;
+  color: var(--color-background-primary);
+  background: var(--color-text-primary);
+  cursor: pointer;
+  min-height: 44px;
+}
+
+/* Compact view */
+body.compact-view .task-item {
+  padding: var(--space-2) 10px;
+  margin-bottom: 4px;
+}
+
+body.compact-view .nav-item {
+  padding: var(--space-2) 10px;
+  font-size: var(--font-size-sm);
+}
+
+body.compact-view .topbar,
+body.compact-view .cal-section,
+body.compact-view .tasks-section {
+  padding: var(--space-3);
+}
diff --git a/css/index.css b/css/index.css
index 24a20f7..ff9f0ba 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1,2162 +1,12 @@
-/* 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,
-#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; 
-}
-
-
-#new-task-modal .modal-card,
-#new-subject-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,
-#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-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-task-modal input::placeholder,
-#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-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-task-modal .btn,
-#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-task-modal .btn:not(.btn-primary):hover,
-#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;
-}
-
-@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,
-  #new-subject-modal .modal-card {
-    max-width: 90vw;
-    padding: 16px 14px 12px;
-  }
-}
-
-#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;
-}
-/* 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);
-  }
-}
-
-:root[data-theme="dark"] {
-  --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);
-}
-
-:root[data-theme="light"] {
-  --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); 
-  --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
+/**
+ * StudyPlan styles — ITCSS-inspired layers
+ * tokens → base → layout → components → features
+ */
+
+@import url('tokens.css');
+@import url('animations.css');
+@import url('base.css');
+@import url('layout.css');
+@import url('components.css');
+@import url('features.css');
+@import url('effects.css');
diff --git a/css/layout.css b/css/layout.css
new file mode 100644
index 0000000..99e6969
--- /dev/null
+++ b/css/layout.css
@@ -0,0 +1,159 @@
+/* Layout — page shell, grid, responsive breakpoints */
+
+.site-header,
+.site-footer,
+.wrapper {
+  width: 100%;
+  max-width: var(--container-max);
+}
+
+.site-header {
+  margin: 0 auto var(--space-3);
+  padding: var(--space-3) var(--space-4);
+  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;
+  gap: var(--space-3);
+  flex-wrap: wrap;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+}
+
+.logo {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--border-radius-sm);
+}
+
+.site-title {
+  font-size: var(--font-size-lg);
+  font-weight: 700;
+}
+
+.header-nav {
+  display: flex;
+  gap: var(--space-4);
+  flex-wrap: wrap;
+}
+
+.header-nav a {
+  text-decoration: none;
+  color: var(--color-text-secondary);
+  font-weight: 500;
+  transition: color var(--duration-fast) var(--ease-standard);
+  min-height: 44px;
+  display: inline-flex;
+  align-items: center;
+}
+
+.header-nav a:hover,
+.header-nav a:focus-visible {
+  color: var(--color-text-primary);
+}
+
+.header-right {
+  display: flex;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+}
+
+.site-footer {
+  margin: var(--space-3) auto 0;
+  padding: var(--space-3) var(--space-4);
+  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;
+  gap: var(--space-3);
+  flex-wrap: wrap;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+}
+
+.footer-links {
+  display: flex;
+  gap: var(--space-3);
+  flex-wrap: wrap;
+}
+
+.footer-links a {
+  text-decoration: none;
+  color: var(--color-text-secondary);
+  min-height: 44px;
+  display: inline-flex;
+  align-items: center;
+}
+
+.footer-links a:hover,
+.footer-links a:focus-visible {
+  color: var(--color-text-primary);
+}
+
+.wrapper {
+  animation: fadeIn var(--duration-slow) var(--ease-emphasized);
+}
+
+.app {
+  display: grid;
+  grid-template-columns: 240px 1fr var(--panel-width, 340px);
+  height: 720px;
+  overflow: hidden;
+}
+
+@media (max-width: 1024px) {
+  .app {
+    grid-template-columns: 200px 1fr var(--panel-width, 280px);
+    height: min(720px, 85vh);
+  }
+}
+
+@media (max-width: 768px) {
+  body {
+    padding: var(--space-3) var(--space-2);
+    justify-content: flex-start;
+  }
+
+  .site-header .header-nav {
+    display: none;
+  }
+
+  .app {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr;
+    height: auto;
+    min-height: 70vh;
+  }
+
+  .sidebar {
+    border-right: none;
+    border-bottom: 1px solid var(--color-border-tertiary);
+    flex-direction: row;
+    flex-wrap: wrap;
+    max-height: none;
+  }
+
+  .panel {
+    border-left: none;
+    border-top: 1px solid var(--color-border-tertiary);
+    min-height: 280px;
+  }
+}
+
+body.compact-view {
+  padding: var(--space-3) var(--space-2);
+}
+
+body.compact-view .app {
+  height: 600px;
+}
diff --git a/css/tokens.css b/css/tokens.css
new file mode 100644
index 0000000..3b222c0
--- /dev/null
+++ b/css/tokens.css
@@ -0,0 +1,202 @@
+/* Design tokens — professional palette, glass, motion */
+
+:root {
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 16px;
+  --space-4: 24px;
+  --space-5: 32px;
+  --space-6: 48px;
+  --space-7: 64px;
+
+  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-display: 'Plus Jakarta Sans', var(--font-sans);
+
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.8125rem;
+  --font-size-base: 1rem;
+  --font-size-md: 1.125rem;
+  --font-size-lg: 1.25rem;
+  --font-size-xl: 1.5rem;
+  --font-size-2xl: 2rem;
+  --line-height-body: 1.6;
+  --line-height-tight: 1.35;
+
+  --container-max: 1200px;
+  --breakpoint-sm: 480px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+
+  --duration-instant: 100ms;
+  --duration-fast: 150ms;
+  --duration-normal: 280ms;
+  --duration-slow: 450ms;
+  --duration-slower: 700ms;
+  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
+
+  /* Brand spectrum */
+  --color-brand-50: #eef2ff;
+  --color-brand-100: #e0e7ff;
+  --color-brand-400: #818cf8;
+  --color-brand-500: #6366f1;
+  --color-brand-600: #4f46e5;
+  --color-brand-700: #4338ca;
+  --color-accent: #06b6d4;
+  --color-accent-soft: rgba(6, 182, 212, 0.12);
+  --color-violet: #8b5cf6;
+  --color-magenta: #d946ef;
+
+  --gradient-brand: linear-gradient(135deg, var(--color-brand-600) 0%, var(--color-violet) 50%, var(--color-accent) 100%);
+  --gradient-brand-subtle: linear-gradient(135deg, rgba(99, 102, 241, 0.14) 0%, rgba(139, 92, 246, 0.08) 50%, rgba(6, 182, 212, 0.06) 100%);
+  --gradient-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.88) 100%);
+  --gradient-mesh-1: radial-gradient(ellipse 80% 60% at 10% 0%, rgba(99, 102, 241, 0.22), transparent 55%);
+  --gradient-mesh-2: radial-gradient(ellipse 70% 50% at 90% 10%, rgba(6, 182, 212, 0.18), transparent 50%);
+  --gradient-mesh-3: radial-gradient(ellipse 60% 40% at 50% 100%, rgba(139, 92, 246, 0.12), transparent 55%);
+
+  --color-brand: var(--color-brand-600);
+  --color-brand-hover: var(--color-brand-700);
+  --color-brand-glow: rgba(99, 102, 241, 0.45);
+
+  --color-background-primary: #ffffff;
+  --color-background-secondary: #f8fafc;
+  --color-background-tertiary: #f1f5f9;
+  --color-surface-glass: rgba(255, 255, 255, 0.72);
+  --color-surface-glass-border: rgba(255, 255, 255, 0.5);
+
+  --color-text-primary: #0f172a;
+  --color-text-secondary: #475569;
+  --color-text-tertiary: #94a3b8;
+  --color-border-tertiary: rgba(15, 23, 42, 0.06);
+  --color-border-secondary: rgba(15, 23, 42, 0.1);
+  --color-border-primary: rgba(15, 23, 42, 0.18);
+  --color-overlay: rgba(15, 23, 42, 0.55);
+
+  --color-danger-rgb: 220, 38, 38;
+  --color-info-rgb: 14, 165, 233;
+  --color-success-rgb: 16, 185, 129;
+
+  --color-text-danger: #dc2626;
+  --color-background-danger: #fef2f2;
+  --color-border-danger: rgba(220, 38, 38, 0.25);
+
+  --color-text-info: #0284c7;
+  --color-background-info: #e0f2fe;
+  --color-border-info: rgba(14, 165, 233, 0.25);
+
+  --color-text-success: #059669;
+  --color-background-success: #ecfdf5;
+  --color-border-success: rgba(16, 185, 129, 0.25);
+
+  --color-text-warning: #b45309;
+  --color-background-warning: #fffbeb;
+
+  --color-text-purple: #6d28d9;
+  --color-background-purple: #f5f3ff;
+
+  --border-radius-sm: 8px;
+  --border-radius-md: 12px;
+  --border-radius-lg: 20px;
+  --border-radius-xl: 24px;
+
+  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
+  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
+  --shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.1), 0 4px 12px rgba(99, 102, 241, 0.08);
+  --shadow-glow: 0 0 0 1px rgba(99, 102, 241, 0.08), 0 8px 32px var(--color-brand-glow);
+  --shadow-glow-accent: 0 0 24px rgba(6, 182, 212, 0.25);
+
+  --focus-ring: 0 0 0 2px var(--color-background-primary), 0 0 0 4px var(--color-brand-500);
+  --blur-glass: 16px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --gradient-brand-subtle: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.12) 50%, rgba(6, 182, 212, 0.08) 100%);
+    --gradient-surface: linear-gradient(180deg, rgba(30, 32, 40, 0.92) 0%, rgba(24, 26, 32, 0.88) 100%);
+    --gradient-mesh-1: radial-gradient(ellipse 80% 60% at 10% 0%, rgba(99, 102, 241, 0.28), transparent 55%);
+    --gradient-mesh-2: radial-gradient(ellipse 70% 50% at 90% 10%, rgba(6, 182, 212, 0.2), transparent 50%);
+    --gradient-mesh-3: radial-gradient(ellipse 60% 40% at 50% 100%, rgba(139, 92, 246, 0.18), transparent 55%);
+
+    --color-brand-glow: rgba(129, 140, 248, 0.35);
+    --color-background-primary: #16161e;
+    --color-background-secondary: #1c1c26;
+    --color-background-tertiary: #12121a;
+    --color-surface-glass: rgba(28, 28, 38, 0.75);
+    --color-surface-glass-border: rgba(255, 255, 255, 0.08);
+
+    --color-text-primary: #f1f5f9;
+    --color-text-secondary: #94a3b8;
+    --color-text-tertiary: #64748b;
+    --color-border-tertiary: rgba(255, 255, 255, 0.06);
+    --color-border-secondary: rgba(255, 255, 255, 0.1);
+    --color-border-primary: rgba(255, 255, 255, 0.16);
+    --color-overlay: rgba(0, 0, 0, 0.72);
+
+    --color-text-danger: #fca5a5;
+    --color-background-danger: rgba(220, 38, 38, 0.12);
+    --color-border-danger: rgba(252, 165, 165, 0.25);
+    --color-text-info: #7dd3fc;
+    --color-background-info: rgba(14, 165, 233, 0.12);
+    --color-border-info: rgba(125, 211, 252, 0.2);
+    --color-text-success: #6ee7b7;
+    --color-background-success: rgba(16, 185, 129, 0.12);
+    --color-border-success: rgba(110, 231, 183, 0.2);
+    --color-text-warning: #fcd34d;
+    --color-background-warning: rgba(245, 158, 11, 0.12);
+    --color-text-purple: #c4b5fd;
+    --color-background-purple: rgba(139, 92, 246, 0.12);
+
+    --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.45), 0 0 1px rgba(255, 255, 255, 0.06);
+    --shadow-glow: 0 0 0 1px rgba(129, 140, 248, 0.15), 0 12px 40px rgba(99, 102, 241, 0.2);
+  }
+}
+
+:root[data-theme="dark"] {
+  --gradient-brand-subtle: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.12) 50%, rgba(6, 182, 212, 0.08) 100%);
+  --gradient-surface: linear-gradient(180deg, rgba(30, 32, 40, 0.92) 0%, rgba(24, 26, 32, 0.88) 100%);
+  --gradient-mesh-1: radial-gradient(ellipse 80% 60% at 10% 0%, rgba(99, 102, 241, 0.28), transparent 55%);
+  --gradient-mesh-2: radial-gradient(ellipse 70% 50% at 90% 10%, rgba(6, 182, 212, 0.2), transparent 50%);
+  --gradient-mesh-3: radial-gradient(ellipse 60% 40% at 50% 100%, rgba(139, 92, 246, 0.18), transparent 55%);
+  --color-brand-glow: rgba(129, 140, 248, 0.35);
+  --color-background-primary: #16161e;
+  --color-background-secondary: #1c1c26;
+  --color-background-tertiary: #12121a;
+  --color-surface-glass: rgba(28, 28, 38, 0.75);
+  --color-surface-glass-border: rgba(255, 255, 255, 0.08);
+  --color-text-primary: #f1f5f9;
+  --color-text-secondary: #94a3b8;
+  --color-text-tertiary: #64748b;
+  --color-border-tertiary: rgba(255, 255, 255, 0.06);
+  --color-border-secondary: rgba(255, 255, 255, 0.1);
+  --color-border-primary: rgba(255, 255, 255, 0.16);
+  --color-overlay: rgba(0, 0, 0, 0.72);
+  --color-text-danger: #fca5a5;
+  --color-background-danger: rgba(220, 38, 38, 0.12);
+  --color-border-danger: rgba(252, 165, 165, 0.25);
+  --color-text-info: #7dd3fc;
+  --color-background-info: rgba(14, 165, 233, 0.12);
+  --color-border-info: rgba(125, 211, 252, 0.2);
+  --color-text-success: #6ee7b7;
+  --color-background-success: rgba(16, 185, 129, 0.12);
+  --color-border-success: rgba(110, 231, 183, 0.2);
+  --color-text-warning: #fcd34d;
+  --color-background-warning: rgba(245, 158, 11, 0.12);
+  --color-text-purple: #c4b5fd;
+  --color-background-purple: rgba(139, 92, 246, 0.12);
+  --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.45), 0 0 1px rgba(255, 255, 255, 0.06);
+  --shadow-glow: 0 0 0 1px rgba(129, 140, 248, 0.15), 0 12px 40px rgba(99, 102, 241, 0.2);
+}
+
+:root[data-theme="light"] {
+  --color-brand: var(--color-brand-600);
+  --color-brand-hover: var(--color-brand-700);
+  --color-background-primary: #ffffff;
+  --color-background-secondary: #f8fafc;
+  --color-background-tertiary: #f1f5f9;
+  --color-text-primary: #0f172a;
+  --color-text-secondary: #475569;
+  --color-text-tertiary: #94a3b8;
+}
diff --git a/index.html b/index.html
index da78416..259a41e 100644
--- a/index.html
+++ b/index.html
@@ -6,32 +6,38 @@
   <title>StudyPlan</title>
   <link rel="stylesheet" href="/css/index.css">
   <link rel="icon" type="image/x-icon" href="/favicon.ico" />
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&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>
+  <a href="#main-content" class="sr-only">Skip to main content</a>
+
+  <div id="auth-modal" class="modal-backdrop modal-backdrop--elevated is-open" role="presentation">
+    <div class="modal-card modal-card--narrow" role="dialog" aria-modal="true" aria-labelledby="auth-title">
+      <h2 id="auth-title" class="modal-card__title">Welcome back</h2>
+      <p id="auth-subtitle" class="form-hint">Sign in to your StudyPlan account</p>
+
+      <div class="form-field">
+        <label class="form-field__label" for="auth-email">Email</label>
+        <input id="auth-email" class="form-field__input" type="email" placeholder="Email address" autocomplete="email">
+      </div>
+
+      <div class="form-field">
+        <label class="form-field__label" for="auth-password">Password</label>
+        <input id="auth-password" class="form-field__input" type="password" placeholder="Password" autocomplete="current-password">
+      </div>
+
+      <button id="auth-submit-btn" type="button" class="btn btn--brand btn--block">Sign In</button>
+
+      <p class="auth-modal__toggle">
+        <span id="auth-toggle-text">Don't have an account?</span>
+        <a id="auth-toggle-btn" href="#">Sign Up</a>
+      </p>
+
+      <p id="auth-error" class="form-error" role="alert"></p>
+    </div>
   </div>
-</div>
 
   <header class="site-header">
   <div class="header-left">
@@ -39,10 +45,10 @@ <h2 id="auth-title" style="margin:0 0 8px; font-size:22px; font-weight:700;">Wel
     <h1 class="site-title">StudyPlan</h1>
   </div>
 
-  <nav class="header-nav">
-    <a href="#">Dashboard</a>
-    <a href="#">Tasks</a>
-    <a href="#">Calendar</a>
+  <nav class="header-nav" aria-label="Main">
+    <a href="#" id="nav-dashboard">Dashboard</a>
+    <a href="#" id="nav-tasks">Tasks</a>
+    <a href="#" id="nav-calendar">Calendar</a>
     <a href="#" id="nav-settings">Settings</a>
   </nav>
 
@@ -54,36 +60,32 @@ <h1 class="site-title">StudyPlan</h1>
 
 
 <div class="wrapper">
-  <!-- <p class="label">StudyPlan</p> -->
-
-  <div class="app">
+  <div class="app" id="main-content">
     <!-- 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">
+      <button type="button" class="nav-item active" id="calendar-btn" 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">
+      </button>
+      <button type="button" class="nav-item" id="all-tasks-btn" 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">
+        <span class="badge" id="all-tasks-badge">0</span>
+      </button>
+      <button type="button" class="nav-item" id="focus-mode-btn" aria-label="Focus mode">
         <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">
+      </button>
+      <button type="button" class="nav-item" id="archived-tasks-btn" aria-label="Archived tasks">
         <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">
+        <span class="badge" id="archived-tasks-badge">0</span>
+      </button>
+      <button type="button" class="nav-item" id="download-btn" aria-label="Download data as CSV">
         <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>
+      </button>
       <div class="sidebar-divider"></div>
       <div class="sidebar-header">Subjects</div>
       <div id="subjects-sidebar-list"></div>
@@ -98,7 +100,7 @@ <h1 class="site-title">StudyPlan</h1>
         <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
+          <svg class="btn__icon" width="12" height="12" fill="none" aria-hidden="true"><path d="M6 1v10M1 6h10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg> New task
         </button>
       </div>
 
@@ -113,8 +115,8 @@ <h1 class="site-title">StudyPlan</h1>
           <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="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>
+          <span><span class="legend-dot legend-dot--info"></span>Study session</span>
+          <span><span class="legend-dot legend-dot--danger"></span>Deadline</span>
         </div>
       </div>
 
@@ -128,7 +130,14 @@ <h1 class="site-title">StudyPlan</h1>
       <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">
+            <svg class="timer-svg" viewBox="0 0 100 100" aria-hidden="true">
+              <defs>
+                <linearGradient id="timer-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+                  <stop offset="0%" stop-color="#4f46e5"/>
+                  <stop offset="50%" stop-color="#8b5cf6"/>
+                  <stop offset="100%" stop-color="#06b6d4"/>
+                </linearGradient>
+              </defs>
               <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
@@ -169,7 +178,7 @@ <h1 class="site-title">StudyPlan</h1>
     <!-- Right Panel -->
     <div class="panel">
       <div class="panel-header">
-        <button id="panel-toggle-btn" class="panel-toggle-btn" title="Toggle Smart Paste">
+        <button id="panel-toggle-btn" class="panel-toggle-btn" type="button" aria-label="Toggle Smart Paste panel" aria-expanded="true">
           <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>
@@ -188,9 +197,9 @@ <h1 class="site-title">StudyPlan</h1>
         <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 class="paste-actions paste-actions--balanced">
+        <button id="clear-btn" type="button" class="btn btn--grow-1" aria-label="Clear paste area">Clear</button>
+        <button id="extract-btn" type="button" class="btn btn-primary btn--grow-2" aria-label="Extract tasks with AI">Extract with AI →</button>
       </div>
 
       <div id="extract-preview" class="extract-preview">
@@ -198,13 +207,7 @@ <h1 class="site-title">StudyPlan</h1>
       </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>
+      <button id="add-btn" class="add-btn" type="button" disabled>Add items to planner</button>
     </div>
   </div>
 </div>
@@ -218,238 +221,104 @@ <h1 class="site-title">StudyPlan</h1>
   </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>
+<div id="settings-modal" class="modal-backdrop modal-backdrop--elevated" role="presentation">
+  <div class="modal-card" role="dialog" aria-modal="true" aria-labelledby="settings-title">
+    <div class="modal-card__header">
+      <h2 id="settings-title" class="modal-card__title">Settings</h2>
+      <button id="settings-close" type="button" class="modal-card__close" aria-label="Close settings">&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>
+
+    <section aria-labelledby="settings-appearance">
+      <h3 id="settings-appearance" class="modal-card__section-title">Appearance</h3>
+      <div class="modal-card__row">
+        <span class="modal-card__row-label">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>
+      <div class="modal-card__row">
+        <span class="modal-card__row-label">Compact View</span>
         <label class="toggle-switch">
           <input type="checkbox" id="compact-view-toggle">
           <span class="toggle-slider"></span>
         </label>
       </div>
-    </div>
+    </section>
 
-    <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>
+    <section aria-labelledby="settings-notifications">
+      <h3 id="settings-notifications" class="modal-card__section-title">Notifications</h3>
+      <div class="modal-card__row">
+        <span class="modal-card__row-label">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>
+      <div class="modal-card__row">
+        <span class="modal-card__row-label">Browser Notifications</span>
         <label class="toggle-switch">
           <input type="checkbox">
           <span class="toggle-slider"></span>
         </label>
       </div>
-    </div>
+    </section>
 
-    <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>
+    <button id="settings-save" type="button" class="btn btn--primary btn--block" style="margin-top:var(--space-2);">Save Changes</button>
   </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;
-    }
-
-    const endpoint = isLogin ? '/api/auth/login' : '/api/auth/signup';
-
-    try {
-      const res = await fetch(endpoint, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ email, password })
-      });
-      const data = await res.json();
-
-      if (!res.ok) {
-        errorEl.textContent = data.error || 'Something went wrong';
-        errorEl.style.display = 'block';
-        return;
-      }
-
-      localStorage.setItem('studyplan_user', JSON.stringify({ email: data.email }));
-      document.getElementById('auth-modal').style.display = 'none';
-
-    } 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';
-    }
-  });
-
-  // Settings Toggles State Management
-  const darkModeToggle = document.getElementById('dark-mode-toggle');
-  const compactViewToggle = document.getElementById('compact-view-toggle');
-
-  // Load preferences
-  const loadPreferences = () => {
-    const isDarkMode = localStorage.getItem('studyplan_dark_mode') === 'true';
-    const isCompactView = localStorage.getItem('studyplan_compact_view') === 'true';
-
-    darkModeToggle.checked = isDarkMode;
-    compactViewToggle.checked = isCompactView;
-
-    if (isDarkMode) {
-      document.documentElement.setAttribute('data-theme', 'dark');
-    } else {
-      document.documentElement.setAttribute('data-theme', 'light');
-    }
-
-    if (isCompactView) {
-      document.body.classList.add('compact-view');
-    } else {
-      document.body.classList.remove('compact-view');
-    }
-  };
-
-  // Run on load
-  loadPreferences();
-
-  // 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');
-    }
-  });
-
-  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 id="app-toast" class="toast" role="status" aria-live="polite"></div>
+
+<div id="new-subject-modal" class="modal-backdrop" role="presentation">
+  <div class="modal-card modal-card--narrow" role="dialog" aria-modal="true" aria-labelledby="new-subject-title">
+    <h3 id="new-subject-title" class="modal-card__title">New subject</h3>
+    <div class="form-field">
+      <label class="form-field__label" for="new-subject-name">Subject name</label>
+      <input id="new-subject-name" class="form-field__input" type="text" placeholder="e.g. History">
+    </div>
+    <div class="form-field">
+      <span class="form-field__label">Color</span>
+      <div id="new-subject-colors" class="subject-color-swatches"></div>
+    </div>
+    <div class="form-actions">
+      <button id="new-subject-cancel" type="button" class="btn btn--small">Cancel</button>
+      <button id="new-subject-save" type="button" class="btn btn-primary btn--small">Save</button>
     </div>
   </div>
 </div>
 
-<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>
+<div id="new-task-modal" class="modal-backdrop" role="presentation">
+  <div class="modal-card modal-card--narrow" role="dialog" aria-modal="true" aria-labelledby="new-task-title-heading">
+    <h3 id="new-task-title-heading" class="modal-card__title">New task</h3>
 
-    <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>
+    <div class="form-field">
+      <label class="form-field__label" for="new-task-subject">Subject</label>
+      <select id="new-task-subject" class="form-field__select"></select>
+    </div>
 
-    <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">
+    <div class="form-field">
+      <label class="form-field__label" for="new-task-title">Task name</label>
+      <input id="new-task-title" class="form-field__input" type="text" placeholder="Task name">
+    </div>
 
-    <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">
+    <div class="form-field">
+      <label class="form-field__label" for="new-task-date">Deadline</label>
+      <input id="new-task-date" class="form-field__input" type="datetime-local">
+    </div>
 
-    <!-- <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">
+    <div class="form-field">
+      <label class="form-field__label" for="new-task-notes">Notes</label>
+      <input id="new-task-notes" class="form-field__input" type="text" placeholder="Notes">
+    </div>
 
-    <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 class="form-actions">
+      <button id="new-task-cancel" type="button" class="btn btn--small">Cancel</button>
+      <button id="new-task-save" type="button" class="btn btn-primary btn--small">Save</button>
     </div>
   </div>
 </div>
+
+  <script type="module" src="/js/app.js"></script>
 </body>
 </html>
diff --git a/js/app.js b/js/app.js
index 9bfd993..7ebc8f9 100644
--- a/js/app.js
+++ b/js/app.js
@@ -2,6 +2,25 @@ import { store } from './store.js';
 import { extractTasksFromText } from './utils/api.js';
 import { initGlobalErrorBoundary } from './utils/errorBoundary.js';
 import { analyzeWorkload } from './utils/scheduler.js';
+import {
+  escapeHtml,
+  formatDate,
+  getPillClass,
+  openModal,
+  closeModal,
+  setupModalDismiss,
+  showToast,
+} from './utils/dom.js';
+import {
+  groupTitle,
+  boardEditForm,
+  taskListItem,
+  extractEditCard,
+  extractPreviewCard,
+  activeFocusTaskPanel,
+} from './ui/templates.js';
+import { initAuth } from './auth.js';
+import { initSettings } from './settings.js';
 
 initGlobalErrorBoundary();
 
@@ -52,8 +71,9 @@ function generateSummary(tasks, subjects) {
 }
 
 let currentMonthDate = new Date();
-let selectedDate = null;
-let currentView = 'calendar'; // 'calendar', 'all-tasks', 'archived'
+let selectedDate = new Date();
+selectedDate.setHours(0, 0, 0, 0);
+let currentView = 'calendar';
 
 const tasksSection = document.getElementById('tasks-section');
 const focusSection = document.getElementById('focus-section');
@@ -78,14 +98,6 @@ const SUBJECT_COLORS = [
 
 let selectedNewSubjectColor = SUBJECT_COLORS[0];
 
-function escapeHtml(s) {
-  return String(s)
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;');
-}
-
 const newSubjectModal = document.getElementById('new-subject-modal');
 const newSubjectName = document.getElementById('new-subject-name');
 const newSubjectColorsEl = document.getElementById('new-subject-colors');
@@ -107,7 +119,7 @@ function openNewSubjectModal() {
   newSubjectName.value = '';
   selectedNewSubjectColor = SUBJECT_COLORS[0];
   syncNewSubjectColorSwatches();
-  newSubjectModal.style.display = 'flex';
+  openModal(newSubjectModal);
   newSubjectName.focus();
 }
 
@@ -254,7 +266,8 @@ if (panelToggleBtn) {
   panelToggleBtn.addEventListener('click', () => {
     panelCollapsed = !panelCollapsed;
     panel.classList.toggle('panel-collapsed', panelCollapsed);
-    appEl.style.transition = 'grid-template-columns 0.3s cubic-bezier(0.4,0,0.2,1)';
+    panelToggleBtn.setAttribute('aria-expanded', String(!panelCollapsed));
+    appEl.style.transition = 'grid-template-columns 0.3s var(--ease-standard, cubic-bezier(0.4,0,0.2,1))';
     appEl.style.setProperty('--panel-width', panelCollapsed ? '48px' : '340px');
     panelToggleIcon.style.transform = panelCollapsed ? 'rotate(180deg)' : '';
   });
@@ -285,22 +298,16 @@ function renderFocusTasks() {
   if (dueSoon.length === 0) {
     focusTaskList.innerHTML = '<div class="tasks-empty-state">No tasks due soon to focus on.</div>';
   } else {
-    focusTaskList.innerHTML = dueSoon.map(t => {
-      const sub = subjects.find(s => s.id === t.subject_id) || subjects[0] || { short_code: 'Gen' };
-      let pillClass = '';
-      if(sub.short_code === 'CS') pillClass = 'pill-blue';
-      else if(sub.short_code === 'Maths') pillClass = 'pill-green';
-      else if(sub.short_code === 'English') pillClass = 'pill-purple';
-      else pillClass = 'pill-amber';
-      
+    focusTaskList.innerHTML = dueSoon.map((t) => {
+      const sub = subjects.find((s) => s.id === t.subject_id) || subjects[0] || { short_code: 'Gen' };
+      const pillClass = getPillClass(sub);
       return `
-        <div class="focus-task-item" data-id="${t.id}">
-          <div class="task-name">${t.title}</div>
+        <div class="focus-task-item" data-id="${escapeHtml(t.id)}">
+          <div class="task-name">${escapeHtml(t.title)}</div>
           <div class="task-meta">
-            <span class="task-pill ${pillClass}">${sub.short_code}</span>
+            <span class="task-pill ${pillClass}">${escapeHtml(sub.short_code)}</span>
           </div>
-        </div>
-      `;
+        </div>`;
     }).join('');
     
     document.querySelectorAll('.focus-task-item').forEach(el => {
@@ -315,19 +322,7 @@ function renderFocusTasks() {
     const activeT = store.tasks.find(t => t.id === activeFocusTaskId);
     if (activeT) {
       const sub = subjects.find(s => s.id === activeT.subject_id) || subjects[0] || { name: 'General' };
-      activeFocusTask.innerHTML = `
-        <div class="task-info" style="width: 100%">
-          <div class="task-name" style="font-size: 16px;">${activeT.title}</div>
-          <div class="task-meta">
-            <span class="task-pill pill-amber">Due ${formatDate(activeT.due_at)}</span>
-            <span class="task-pill">${sub.name}</span>
-          </div>
-          <div style="margin-top: 12px; display: flex; gap: 8px;">
-            <button class="btn btn-primary complete-focus-task-btn" data-id="${activeT.id}">Mark Done</button>
-            <button class="btn clear-focus-task-btn">Clear</button>
-          </div>
-        </div>
-      `;
+      activeFocusTask.innerHTML = activeFocusTaskPanel(activeT, sub);
       
       const completeBtn = activeFocusTask.querySelector('.complete-focus-task-btn');
       if (completeBtn) {
@@ -354,12 +349,6 @@ function renderFocusTasks() {
   }
 }
 
-function formatDate(dateStr) {
-  if (!dateStr) return 'No Date';
-  const d = new Date(dateStr);
-  return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', hour: '2-digit', minute:'2-digit' });
-}
-
 async function downloadData() {
     try {
         const response = await fetch('/api/download');
@@ -380,7 +369,7 @@ async function downloadData() {
 
     } catch (error) {
         console.error(error);
-        alert('Failed to download data');
+        showToast('Failed to download data', { error: true });
     }
 }
 
@@ -395,14 +384,10 @@ function renderTasks() {
   const archivedTasks = tasks.filter(t => t.archived);
   
   // Update badges
-  const allTasksBadge = document.querySelector('#all-tasks-btn .badge');
-  if (allTasksBadge) {
-    allTasksBadge.textContent = activeTasks.length;
-  }
-  const archivedBadge = document.querySelector('#archived-tasks-btn .badge');
-  if (archivedBadge) {
-    archivedBadge.textContent = archivedTasks.length;
-  }
+  const allTasksBadge = document.getElementById('all-tasks-badge');
+  if (allTasksBadge) allTasksBadge.textContent = activeTasks.length;
+  const archivedBadge = document.getElementById('archived-tasks-badge');
+  if (archivedBadge) archivedBadge.textContent = archivedTasks.length;
   
   const displayTasks = currentView === 'archived' ? archivedTasks : activeTasks;
   const sorted = [...displayTasks].sort((a,b) => new Date(a.due_at) - new Date(b.due_at));
@@ -439,11 +424,17 @@ function renderTasks() {
     });
   }
   
-  const renderGroup = (title, items, titleColor, showConflict = false) => {
+  const toneFromTitle = (title) => {
+    if (title.includes('Due soon') || title.includes('⚠')) return 'danger';
+    if (title.includes('Completed') || title.includes('Archived')) return 'muted';
+    return 'default';
+  };
+
+  const renderGroup = (title, items, showConflict = false) => {
     if (items.length === 0) return '';
-    let html = `<div class="tasks-group">
+    let html = `<div class="tasks-group stagger-children">
       <div class="tasks-group-header">
-        <span style="color:${titleColor}">${title}</span>
+        ${groupTitle(title, toneFromTitle(title))}
       </div>`;
     
     if (showConflict) {
@@ -460,74 +451,13 @@ function renderTasks() {
       
     items.forEach(t => {
       const sub = subjects.find(s => s.id === t.subject_id) || subjects[0];
-      const isUrgent = t.priority === 'high' && title === '⚠ Due soon';
+      const isUrgent = t.priority === 'high' && title.includes('Due soon');
       const isDone = t.status === 'Done';
-      
-      let pillClass = '';
-      if(sub.short_code === 'CS') pillClass = 'pill-blue';
-      else if(sub.short_code === 'Maths') pillClass = 'pill-green';
-      else if(sub.short_code === 'English') pillClass = 'pill-purple';
-      else pillClass = 'pill-amber';
-      
+
       if (t._isEditing) {
-        let subjectOptions = subjects.map(s => 
-          `<option value="${s.id}" ${s.id === t.subject_id ? 'selected' : ''}>${s.name}</option>`
-        ).join('');
-        
-        const localDate = t.due_at ? new Date(t.due_at).toISOString().substring(0, 16) : '';
-        const isHighPriority = t.priority === 'high';
-        
-        html += `
-          <div class="task-item" style="display:block; padding:12px; cursor:default;" data-id="${t.id}">
-            <label style="display:block; font-size:10px; font-weight:700; color:var(--color-text-tertiary); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:4px;">Subject</label>
-            <select class="board-edit-subject edit-field" style="width:100%; margin-bottom: 12px; font-size:12px; padding:4px; border: 1px solid var(--color-border-secondary); border-radius: 4px; background: var(--color-background-primary); color: var(--color-text-primary);">
-              ${subjectOptions}
-            </select>
-
-            <label style="display:block; font-size:10px; font-weight:700; color:var(--color-text-tertiary); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:4px;">Task Name</label>
-            <input class="board-edit-title edit-field" type="text" value="${t.title}" style="width:100%; margin-bottom: 12px; font-size:13px; font-weight:600; padding:6px; border: 1px solid var(--color-border-secondary); border-radius: 4px; background: var(--color-background-primary); color: var(--color-text-primary);">
-
-            <label style="display:block; font-size:10px; font-weight:700; color:var(--color-text-tertiary); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:4px;">Deadline</label>
-            <input class="board-edit-date edit-field" type="datetime-local" value="${localDate}" style="width:100%; margin-bottom: 12px; font-size:12px; padding:6px; border: 1px solid var(--color-border-secondary); border-radius: 4px; background: var(--color-background-primary); color: var(--color-text-primary);">
-
-            <label style="display:block; font-size:10px; font-weight:700; color:var(--color-text-tertiary); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:4px;">Notes</label>
-            <input class="board-edit-notes edit-field" type="text" value="${t.notes || ''}" placeholder="Notes..." style="width:100%; margin-bottom: 12px; font-size:12px; padding:6px; border: 1px solid var(--color-border-secondary); border-radius: 4px; background: var(--color-background-primary); color: var(--color-text-primary);">
-
-            <label style="display:block; font-size:10px; font-weight:700; color:var(--color-text-tertiary); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:4px;">Priority</label>
-            <select class="board-edit-priority edit-field" style="width:100%; margin-bottom: 12px; font-size:12px; padding:4px; border: 1px solid var(--color-border-secondary); border-radius: 4px; background: var(--color-background-primary); color: var(--color-text-primary);">
-              <option value="medium" ${!isHighPriority ? 'selected' : ''}>Medium</option>
-              <option value="high" ${isHighPriority ? 'selected' : ''}>High</option>
-            </select>
-
-            <div style="display:flex; justify-content: flex-end; gap: 8px; margin-top: 4px;">
-              <button class="btn cancel-board-edit-btn" data-id="${t.id}" style="padding: 6px 12px; font-size: 11px; background: var(--color-background-secondary); color: var(--color-text-primary); border: 1px solid var(--color-border-secondary);">Cancel</button>
-              <button class="btn btn-primary save-board-edit-btn" data-id="${t.id}" style="padding: 6px 12px; font-size: 11px;">Save</button>
-            </div>
-          </div>
-        `;
+        html += boardEditForm(t, subjects);
       } else {
-        const archiveBtn = !t.archived 
-          ? `<button class="task-btn edit-task-btn" data-id="${t.id}" title="Edit">✏️ Edit</button>
-             <button class="task-btn archive-task-btn" data-id="${t.id}" title="Archive">Archive</button>`
-          : `<button class="task-btn edit-task-btn" data-id="${t.id}" title="Edit">✏️ Edit</button>
-             <button class="task-btn task-btn-info restore-task-btn" data-id="${t.id}" title="Restore">Restore</button>
-             <button class="task-btn task-btn-danger delete-task-btn" data-id="${t.id}" title="Permanent Delete">Delete</button>`;
-
-        html += `
-          <div class="task-item ${isUrgent ? 'urgent' : ''} ${isDone ? 'done' : ''}" data-id="${t.id}">
-            <div class="task-check ${isDone ? 'done' : ''}"></div>
-            <div class="task-info">
-              <div class="task-name">${t.title}</div>
-              <div class="task-meta">
-                <span class="task-pill ${isDone ? 'pill-green' : (isUrgent ? 'pill-red' : 'pill-amber')}">${isDone ? 'Done' : 'Due ' + formatDate(t.due_at)}</span>
-                <span class="task-pill ${pillClass}">${sub.short_code}</span>
-              </div>
-            </div>
-            <div class="task-actions">
-              ${archiveBtn}
-            </div>
-          </div>
-        `;
+        html += taskListItem(t, sub, { isUrgent, showArchiveActions: !t.archived });
       }
     });
     html += `</div>`;
@@ -546,8 +476,8 @@ function renderTasks() {
       : '';
 
     tasksSection.innerHTML = actionBar +
-                             renderGroup(`Tasks for ${selStr}`, dueSoon, 'var(--color-text-primary)') +
-                             renderGroup('Completed', completed, 'var(--color-text-tertiary)') +
+                             renderGroup(`Tasks for ${selStr}`, dueSoon) +
+                             renderGroup('Completed', completed) +
                              emptyState;
   } else {
     const actionBar = currentView === 'archived' ? '' : `<div class="tasks-actions-bar">
@@ -562,9 +492,9 @@ function renderTasks() {
       : '';
 
     tasksSection.innerHTML = actionBar +
-                             renderGroup(titlePrefix + '⚠ Due soon', dueSoon, 'var(--color-text-danger)', true)
-                             renderGroup(titlePrefix + 'This week', thisWeek, 'var(--color-text-secondary)', true) +
-                             renderGroup(titlePrefix + 'Completed', completed, 'var(--color-text-tertiary)') +
+                             renderGroup(titlePrefix + '⚠ Due soon', dueSoon, true) +
+                             renderGroup(titlePrefix + 'This week', thisWeek, true) +
+                             renderGroup(titlePrefix + 'Completed', completed) +
                              emptyState;
   }
                            
@@ -664,8 +594,11 @@ function renderTasks() {
 
 
 const summaryBox = document.getElementById('summary-box');
-if (summaryBox) {
-  summaryBox.innerHTML = generateSummary(store.tasks, store.subjects);
+
+function renderSummary() {
+  if (summaryBox) {
+    summaryBox.innerHTML = generateSummary(store.tasks, store.subjects);
+  }
 }
 
 function renderCalendar() {
@@ -718,9 +651,7 @@ function renderCalendar() {
       indicatorHtml += `</div>`;
     }
 
-    const extraStyle = isSelected ? `border: 1.5px solid var(--color-text-primary);` : '';
-
-    html += `<div class="cal-day interactive-day ${isToday ? 'today' : ''}" data-day="${i}" style="${extraStyle}">
+    html += `<div class="cal-day interactive-day ${isToday ? 'today' : ''} ${isSelected ? 'selected' : ''}" data-day="${i}">
       ${i}
       ${indicatorHtml}
     </div>`;
@@ -759,59 +690,25 @@ function renderExtraction() {
     addItemsBtn.textContent = 'Add items to planner';
     return;
   }
-  
+
   addItemsBtn.disabled = false;
   addItemsBtn.textContent = `Add ${pasteItems.length} items to planner`;
-  
-  let html = `<div class="extract-title">Extracted — ${pasteItems.length} items</div>`;
-  pasteItems.forEach((item, index) => {
-    // try to match subject name
-    const sub = store.subjects.find(s => s.name.toLowerCase().includes((item.subject_name || '').toLowerCase())) || store.subjects[3];
-    // Attach subject id to item so Add will work
-    item.subject_id = sub.id;
-    
-    if (item._isEditing) {
-      let subjectOptions = store.subjects.map(s => 
-        `<option value="${s.id}" ${s.id === sub.id ? 'selected' : ''}>${s.name}</option>`
-      ).join('');
-      
-      const localDate = item.due_at ? new Date(item.due_at).toISOString().substring(0, 16) : '';
-      
-      html += `
-        <div class="extract-card">
-          <label style="display:block; font-size:10px; font-weight:700; color:var(--color-text-tertiary); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:4px;">Subject</label>
-          <select class="edit-subject-input edit-field" data-index="${index}" style="width:100%; margin-bottom: 12px; font-size:12px; padding:4px; border: 1px solid var(--color-border-secondary); border-radius: 4px; background: var(--color-background-primary); color: var(--color-text-primary);">
-            ${subjectOptions}
-          </select>
 
-          <label style="display:block; font-size:10px; font-weight:700; color:var(--color-text-tertiary); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:4px;">Task Name</label>
-          <input class="edit-title-input edit-field" type="text" value="${item.title}" data-index="${index}" style="width:100%; margin-bottom: 12px; font-size:13px; font-weight:600; padding:6px; border: 1px solid var(--color-border-secondary); border-radius: 4px; background: var(--color-background-primary); color: var(--color-text-primary);">
-
-          <label style="display:block; font-size:10px; font-weight:700; color:var(--color-text-tertiary); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:4px;">Deadline</label>
-          <input class="edit-date-input edit-field" type="datetime-local" value="${localDate}" data-index="${index}" style="width:100%; margin-bottom: 12px; font-size:12px; padding:6px; border: 1px solid var(--color-border-secondary); border-radius: 4px; background: var(--color-background-primary); color: var(--color-text-primary);">
-
-          <label style="display:block; font-size:10px; font-weight:700; color:var(--color-text-tertiary); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:4px;">Notes</label>
-          <input class="edit-notes-input edit-field" type="text" value="${item.notes || ''}" data-index="${index}" placeholder="Notes..." style="width:100%; margin-bottom: 12px; font-size:12px; padding:6px; border: 1px solid var(--color-border-secondary); border-radius: 4px; background: var(--color-background-primary); color: var(--color-text-primary);">
+  let html = `<div class="extract-title">Extracted — ${pasteItems.length} items</div><div class="stagger-children">`;
+  pasteItems.forEach((item, index) => {
+    const sub = store.subjects.find((s) =>
+      s.name.toLowerCase().includes((item.subject_name || '').toLowerCase())
+    ) || store.subjects[0];
+    item.subject_id = sub?.id ?? item.subject_id;
 
-          <div style="display:flex; justify-content: flex-end; gap: 8px; margin-top: 4px;">
-            <button class="btn btn-primary save-edit-btn" data-index="${index}" style="padding: 6px 12px; font-size: 11px;">Save Changes</button>
-          </div>
-        </div>
-      `;
-    } else {
-      html += `
-        <div class="extract-card" style="animation-delay: ${index * 0.1}s">
-          <div class="extract-subject" style="color:${sub.color}">${sub.name}</div>
-          <div class="extract-task-name">${item.title}</div>
-          <div class="extract-row"><span class="extract-icon">${item.icon || '📅'}</span> ${formatDate(item.due_at)}</div>
-          <div class="extract-row"><span class="extract-icon">📎</span> ${item.notes || 'No notes attached'}</div>
-          <div class="conf-bar"><div class="conf-fill" style="width:0%;background:${item.confidence_score > 75 ? 'var(--color-text-success)' : 'var(--color-text-warning)'}" data-width="${item.confidence_score}"></div></div>
-          <div class="conf-label">${item.confidence_score}% confidence <span class="conf-edit" data-index="${index}" tabindex="0">Edit</span></div>
-        </div>
-      `;
+    if (item._isEditing) {
+      html += extractEditCard(item, index, store.subjects);
+    } else if (sub) {
+      html += extractPreviewCard(item, index, sub);
     }
   });
-  
+
+  html += '</div>';
   extractPreview.innerHTML = html;
   
   setTimeout(() => {
@@ -850,13 +747,53 @@ function renderExtraction() {
   });
 }
 
+function navigateToView(view) {
+  const calendarBtn = document.getElementById('calendar-btn');
+  const allTasksBtn = document.getElementById('all-tasks-btn');
+  const archivedTasksBtn = document.getElementById('archived-tasks-btn');
+  const focusModeBtn = document.getElementById('focus-mode-btn');
+  const calSection = document.querySelector('.cal-section');
+  const tasksEl = document.getElementById('tasks-section');
+  const focusEl = document.getElementById('focus-section');
+
+  const map = {
+    calendar: calendarBtn,
+    'all-tasks': allTasksBtn,
+    archived: archivedTasksBtn,
+    focus: focusModeBtn,
+  };
+
+  document.querySelectorAll('.sidebar .nav-item').forEach((el) => el.classList.remove('active'));
+  map[view]?.classList.add('active');
+
+  if (view === 'focus') {
+    calSection?.classList.add('hidden');
+    tasksEl?.classList.add('hidden');
+    focusEl?.classList.remove('hidden');
+    renderFocusTasks();
+  } else {
+    focusEl?.classList.add('hidden');
+    tasksEl?.classList.remove('hidden');
+    if (view === 'calendar') {
+      calSection?.classList.remove('hidden');
+    } else {
+      calSection?.classList.add('hidden');
+    }
+    renderTasks();
+  }
+  currentView = view;
+}
+
 store.subscribe(renderTasks);
 store.subscribe(renderExtraction);
 store.subscribe(renderCalendar);
 store.subscribe(renderFocusTasks);
 store.subscribe(renderSidebarSubjects);
+store.subscribe(renderSummary);
 
 document.addEventListener('DOMContentLoaded', () => {
+  initAuth();
+  initSettings();
   if (newSubjectColorsEl) {
     SUBJECT_COLORS.forEach(c => {
       const btn = document.createElement('button');
@@ -884,21 +821,17 @@ document.addEventListener('DOMContentLoaded', () => {
   }
 
   if (newSubjectCancel) {
-    newSubjectCancel.addEventListener('click', () => {
-      if (newSubjectModal) newSubjectModal.style.display = 'none';
-    });
-  }
-
-  if (newSubjectModal) {
-    newSubjectModal.addEventListener('click', (e) => {
-      if (e.target === newSubjectModal) newSubjectModal.style.display = 'none';
-    });
+    newSubjectCancel.addEventListener('click', () => closeModal(newSubjectModal));
   }
+  setupModalDismiss(newSubjectModal, () => closeModal(newSubjectModal));
 
   if (newSubjectSave) {
     newSubjectSave.addEventListener('click', async () => {
       const ok = await store.addSubject({ name: newSubjectName.value, color: selectedNewSubjectColor });
-      if (ok && newSubjectModal) newSubjectModal.style.display = 'none';
+      if (ok) {
+        closeModal(newSubjectModal);
+        showToast('Subject added');
+      }
     });
   }
 
@@ -913,54 +846,24 @@ document.addEventListener('DOMContentLoaded', () => {
 
   store.fetchInitialData();
   
-  const calendarBtn = document.getElementById('calendar-btn');
-  const allTasksBtn = document.getElementById('all-tasks-btn');
-  const archivedTasksBtn = document.getElementById('archived-tasks-btn');
-  const focusModeBtn = document.getElementById('focus-mode-btn');
+  document.getElementById('calendar-btn')?.addEventListener('click', () => navigateToView('calendar'));
+  document.getElementById('all-tasks-btn')?.addEventListener('click', () => navigateToView('all-tasks'));
+  document.getElementById('archived-tasks-btn')?.addEventListener('click', () => navigateToView('archived'));
+  document.getElementById('focus-mode-btn')?.addEventListener('click', () => navigateToView('focus'));
 
-  function updateSidebarActive(id) {
-    document.querySelectorAll('.sidebar .nav-item').forEach(el => el.classList.remove('active'));
-    document.getElementById(id).classList.add('active');
-  }
-
-  calendarBtn.addEventListener('click', () => {
-    currentView = 'calendar';
-    document.querySelector('.cal-section').classList.remove('hidden');
-    document.getElementById('tasks-section').classList.remove('hidden');
-    document.getElementById('focus-section').classList.add('hidden');
-    updateSidebarActive('calendar-btn');
-    renderTasks();
+  document.getElementById('nav-dashboard')?.addEventListener('click', (e) => {
+    e.preventDefault();
+    navigateToView('calendar');
   });
-
-  allTasksBtn.addEventListener('click', () => {
-    currentView = 'all-tasks';
-    document.querySelector('.cal-section').classList.add('hidden');
-    document.getElementById('tasks-section').classList.remove('hidden');
-    document.getElementById('focus-section').classList.add('hidden');
-    updateSidebarActive('all-tasks-btn');
-    renderTasks();
+  document.getElementById('nav-tasks')?.addEventListener('click', (e) => {
+    e.preventDefault();
+    navigateToView('all-tasks');
   });
-
-  archivedTasksBtn.addEventListener('click', () => {
-    currentView = 'archived';
-    document.querySelector('.cal-section').classList.add('hidden');
-    document.getElementById('tasks-section').classList.remove('hidden');
-    document.getElementById('focus-section').classList.add('hidden');
-    updateSidebarActive('archived-tasks-btn');
-    renderTasks();
+  document.getElementById('nav-calendar')?.addEventListener('click', (e) => {
+    e.preventDefault();
+    navigateToView('calendar');
   });
 
-  if(focusModeBtn) {
-    focusModeBtn.addEventListener('click', () => {
-      currentView = 'focus';
-      document.querySelector('.cal-section').classList.add('hidden');
-      document.getElementById('tasks-section').classList.add('hidden');
-      document.getElementById('focus-section').classList.remove('hidden');
-      updateSidebarActive('focus-mode-btn');
-      renderFocusTasks();
-    });
-  }
-
   document.getElementById('cal-prev').addEventListener('click', () => {
     currentMonthDate.setMonth(currentMonthDate.getMonth() - 1);
     renderCalendar();
@@ -974,9 +877,8 @@ document.addEventListener('DOMContentLoaded', () => {
 
 //NEw Task addition event listeners
 newTaskBtn.addEventListener('click', () => {
-  
   if (!store.subjects || store.subjects.length === 0) {
-    alert('Subjects are still loading. Please try again in a moment.');
+    showToast('Subjects are still loading. Try again shortly.', { error: true });
     return;
   }
 
@@ -996,18 +898,11 @@ newTaskBtn.addEventListener('click', () => {
   newTaskTitle.value = '';
   newTaskNotes.value = '';
 
-  newTaskModal.style.display = 'flex';
-});
-
-newTaskCancel.addEventListener('click', () => {
-  newTaskModal.style.display = 'none';
+  openModal(newTaskModal);
 });
 
-newTaskModal.addEventListener('click', (e) => {
-  if (e.target === newTaskModal) {
-    newTaskModal.style.display = 'none';
-  }
-});
+newTaskCancel.addEventListener('click', () => closeModal(newTaskModal));
+setupModalDismiss(newTaskModal, () => closeModal(newTaskModal));
 
 newTaskSave.addEventListener('click', async () => {
   const title = newTaskTitle.value.trim();
@@ -1016,7 +911,7 @@ newTaskSave.addEventListener('click', async () => {
   const dateVal = newTaskDate.value;
 
   if (!title) {
-    alert('Please enter a task name');
+    showToast('Please enter a task name', { error: true });
     return;
   }
 
@@ -1033,15 +928,8 @@ newTaskSave.addEventListener('click', async () => {
   };
 
   await store.addTasks([newTask]);
-  newTaskModal.style.display = 'none';
-});
-
-addItemsBtn.addEventListener('click', () => {
-  if (store.currentPaste) {
-    store.addTasks(store.currentPaste);
-    store.clearExtracted();
-    pasteInput.value = '';
-  }
+  closeModal(newTaskModal);
+  showToast('Task added');
 });
 });
 
@@ -1065,11 +953,12 @@ clearBtn.addEventListener('click', () => {
   store.clearExtracted();
 });
 
-addItemsBtn.addEventListener('click', () => {
-  if (store.currentPaste) {
-    store.addTasks(store.currentPaste);
+addItemsBtn.addEventListener('click', async () => {
+  if (store.currentPaste?.length) {
+    await store.addTasks(store.currentPaste);
     store.clearExtracted();
     pasteInput.value = '';
+    showToast('Tasks added to planner');
   }
 });
 
diff --git a/js/auth.js b/js/auth.js
new file mode 100644
index 0000000..b3a0cd5
--- /dev/null
+++ b/js/auth.js
@@ -0,0 +1,74 @@
+import { closeModal, openModal } from './utils/dom.js';
+
+let isLogin = true;
+
+function setAuthMode(login) {
+  isLogin = login;
+  document.getElementById('auth-title').textContent = login ? 'Welcome back' : 'Create account';
+  document.getElementById('auth-subtitle').textContent = login
+    ? 'Sign in to your StudyPlan account'
+    : 'Start planning your studies';
+  document.getElementById('auth-submit-btn').textContent = login ? 'Sign In' : 'Sign Up';
+  document.getElementById('auth-toggle-text').textContent = login
+    ? "Don't have an account?"
+    : 'Already have an account?';
+  document.getElementById('auth-toggle-btn').textContent = login ? 'Sign Up' : 'Sign In';
+  document.getElementById('auth-error').classList.remove('is-visible');
+}
+
+export function initAuth() {
+  const modal = document.getElementById('auth-modal');
+  const toggleBtn = document.getElementById('auth-toggle-btn');
+  const submitBtn = document.getElementById('auth-submit-btn');
+  const logoutBtn = document.getElementById('logout-btn');
+
+  if (localStorage.getItem('studyplan_user')) {
+    closeModal(modal);
+  }
+
+  toggleBtn?.addEventListener('click', (e) => {
+    e.preventDefault();
+    setAuthMode(!isLogin);
+  });
+
+  submitBtn?.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.classList.add('is-visible');
+      return;
+    }
+
+    const endpoint = isLogin ? '/api/auth/login' : '/api/auth/signup';
+
+    try {
+      const res = await fetch(endpoint, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email, password }),
+      });
+      const data = await res.json();
+
+      if (!res.ok) {
+        errorEl.textContent = data.error || 'Something went wrong';
+        errorEl.classList.add('is-visible');
+        return;
+      }
+
+      localStorage.setItem('studyplan_user', JSON.stringify({ email: data.email }));
+      closeModal(modal);
+    } catch {
+      errorEl.textContent = 'Network error. Please try again.';
+      errorEl.classList.add('is-visible');
+    }
+  });
+
+  logoutBtn?.addEventListener('click', () => {
+    localStorage.removeItem('studyplan_user');
+    openModal(modal);
+    window.location.reload();
+  });
+}
diff --git a/js/settings.js b/js/settings.js
new file mode 100644
index 0000000..62a3962
--- /dev/null
+++ b/js/settings.js
@@ -0,0 +1,48 @@
+import { closeModal, openModal, setupModalDismiss } from './utils/dom.js';
+
+function loadPreferences() {
+  const isDarkMode = localStorage.getItem('studyplan_dark_mode') === 'true';
+  const isCompactView = localStorage.getItem('studyplan_compact_view') === 'true';
+  const darkModeToggle = document.getElementById('dark-mode-toggle');
+  const compactViewToggle = document.getElementById('compact-view-toggle');
+
+  if (darkModeToggle) darkModeToggle.checked = isDarkMode;
+  if (compactViewToggle) compactViewToggle.checked = isCompactView;
+
+  document.documentElement.setAttribute('data-theme', isDarkMode ? 'dark' : 'light');
+  document.body.classList.toggle('compact-view', isCompactView);
+}
+
+export function initSettings() {
+  const modal = document.getElementById('settings-modal');
+  const navSettings = document.getElementById('nav-settings');
+  const settingsClose = document.getElementById('settings-close');
+  const settingsSave = document.getElementById('settings-save');
+  const darkModeToggle = document.getElementById('dark-mode-toggle');
+  const compactViewToggle = document.getElementById('compact-view-toggle');
+
+  loadPreferences();
+
+  navSettings?.addEventListener('click', (e) => {
+    e.preventDefault();
+    openModal(modal);
+  });
+
+  settingsClose?.addEventListener('click', () => closeModal(modal));
+  setupModalDismiss(modal, () => closeModal(modal));
+
+  settingsSave?.addEventListener('click', () => {
+    localStorage.setItem('studyplan_dark_mode', darkModeToggle?.checked ?? false);
+    localStorage.setItem('studyplan_compact_view', compactViewToggle?.checked ?? false);
+    loadPreferences();
+    closeModal(modal);
+  });
+
+  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);
+  });
+}
diff --git a/js/ui/templates.js b/js/ui/templates.js
new file mode 100644
index 0000000..7500f75
--- /dev/null
+++ b/js/ui/templates.js
@@ -0,0 +1,133 @@
+import { escapeHtml, formatDate, getPillClass } from '../utils/dom.js';
+
+const GROUP_TITLE_CLASS = {
+  danger: 'tasks-group-header__label--danger',
+  muted: 'tasks-group-header__label--muted',
+  default: 'tasks-group-header__label',
+};
+
+export function groupTitle(text, tone = 'default') {
+  const cls = GROUP_TITLE_CLASS[tone] || GROUP_TITLE_CLASS.default;
+  return `<span class="${cls}">${escapeHtml(text)}</span>`;
+}
+
+export function boardEditForm(task, subjects) {
+  const subjectOptions = subjects
+    .map((s) => `<option value="${escapeHtml(s.id)}" ${s.id === task.subject_id ? 'selected' : ''}>${escapeHtml(s.name)}</option>`)
+    .join('');
+  const localDate = task.due_at ? new Date(task.due_at).toISOString().substring(0, 16) : '';
+  const isHigh = task.priority === 'high';
+
+  return `
+    <div class="task-item task-item--editing" data-id="${escapeHtml(task.id)}">
+      <div class="form-field">
+        <label class="form-field__label">Subject</label>
+        <select class="board-edit-subject form-field__select">${subjectOptions}</select>
+      </div>
+      <div class="form-field">
+        <label class="form-field__label">Task name</label>
+        <input class="board-edit-title form-field__input" type="text" value="${escapeHtml(task.title)}">
+      </div>
+      <div class="form-field">
+        <label class="form-field__label">Deadline</label>
+        <input class="board-edit-date form-field__input" type="datetime-local" value="${localDate}">
+      </div>
+      <div class="form-field">
+        <label class="form-field__label">Notes</label>
+        <input class="board-edit-notes form-field__input" type="text" value="${escapeHtml(task.notes || '')}" placeholder="Notes…">
+      </div>
+      <div class="form-field">
+        <label class="form-field__label">Priority</label>
+        <select class="board-edit-priority form-field__select">
+          <option value="medium" ${!isHigh ? 'selected' : ''}>Medium</option>
+          <option value="high" ${isHigh ? 'selected' : ''}>High</option>
+        </select>
+      </div>
+      <div class="form-actions">
+        <button type="button" class="btn btn--small cancel-board-edit-btn" data-id="${escapeHtml(task.id)}">Cancel</button>
+        <button type="button" class="btn btn-primary btn--small save-board-edit-btn" data-id="${escapeHtml(task.id)}">Save</button>
+      </div>
+    </div>`;
+}
+
+export function taskListItem(task, subject, { isUrgent, showArchiveActions }) {
+  const isDone = task.status === 'Done';
+  const pillClass = getPillClass(subject);
+  const actions = showArchiveActions
+    ? `<button type="button" class="task-btn edit-task-btn" data-id="${escapeHtml(task.id)}" title="Edit task">Edit</button>
+       <button type="button" class="task-btn archive-task-btn" data-id="${escapeHtml(task.id)}" title="Archive task">Archive</button>`
+    : `<button type="button" class="task-btn edit-task-btn" data-id="${escapeHtml(task.id)}" title="Edit task">Edit</button>
+       <button type="button" class="task-btn task-btn-info restore-task-btn" data-id="${escapeHtml(task.id)}" title="Restore task">Restore</button>
+       <button type="button" class="task-btn task-btn-danger delete-task-btn" data-id="${escapeHtml(task.id)}" title="Delete permanently">Delete</button>`;
+
+  return `
+    <div class="task-item ${isUrgent ? 'urgent' : ''} ${isDone ? 'done' : ''}" data-id="${escapeHtml(task.id)}">
+      <div class="task-check ${isDone ? 'done' : ''}" role="checkbox" aria-checked="${isDone}" tabindex="0" aria-label="Mark ${escapeHtml(task.title)} complete"></div>
+      <div class="task-info">
+        <div class="task-name">${escapeHtml(task.title)}</div>
+        <div class="task-meta">
+          <span class="task-pill ${isDone ? 'pill-green' : (isUrgent ? 'pill-red' : 'pill-amber')}">${isDone ? 'Done' : 'Due ' + escapeHtml(formatDate(task.due_at))}</span>
+          <span class="task-pill ${pillClass}">${escapeHtml(subject?.short_code || '—')}</span>
+        </div>
+      </div>
+      <div class="task-actions">${actions}</div>
+    </div>`;
+}
+
+export function extractEditCard(item, index, subjects) {
+  const subjectOptions = subjects
+    .map((s) => `<option value="${escapeHtml(s.id)}" ${s.id === item.subject_id ? 'selected' : ''}>${escapeHtml(s.name)}</option>`)
+    .join('');
+  const localDate = item.due_at ? new Date(item.due_at).toISOString().substring(0, 16) : '';
+
+  return `
+    <div class="extract-card extract-card--editing">
+      <div class="form-field">
+        <label class="form-field__label">Subject</label>
+        <select class="edit-subject-input form-field__select" data-index="${index}">${subjectOptions}</select>
+      </div>
+      <div class="form-field">
+        <label class="form-field__label">Task name</label>
+        <input class="edit-title-input form-field__input" type="text" value="${escapeHtml(item.title)}" data-index="${index}">
+      </div>
+      <div class="form-field">
+        <label class="form-field__label">Deadline</label>
+        <input class="edit-date-input form-field__input" type="datetime-local" value="${localDate}" data-index="${index}">
+      </div>
+      <div class="form-field">
+        <label class="form-field__label">Notes</label>
+        <input class="edit-notes-input form-field__input" type="text" value="${escapeHtml(item.notes || '')}" data-index="${index}" placeholder="Notes…">
+      </div>
+      <div class="form-actions">
+        <button type="button" class="btn btn-primary btn--small save-edit-btn" data-index="${index}">Save changes</button>
+      </div>
+    </div>`;
+}
+
+export function extractPreviewCard(item, index, subject) {
+  const confClass = item.confidence_score > 75 ? 'conf-fill--high' : 'conf-fill--medium';
+  return `
+    <div class="extract-card" style="animation-delay: ${index * 0.1}s">
+      <div class="extract-subject" style="color:${subject.color}">${escapeHtml(subject.name)}</div>
+      <div class="extract-task-name">${escapeHtml(item.title)}</div>
+      <div class="extract-row"><span class="extract-icon" aria-hidden="true">${item.icon || '📅'}</span> ${escapeHtml(formatDate(item.due_at))}</div>
+      <div class="extract-row"><span class="extract-icon" aria-hidden="true">📎</span> ${escapeHtml(item.notes || 'No notes attached')}</div>
+      <div class="conf-bar"><div class="conf-fill ${confClass}" style="width:0%" data-width="${item.confidence_score}"></div></div>
+      <div class="conf-label">${item.confidence_score}% confidence <span class="conf-edit" data-index="${index}" tabindex="0" role="button">Edit</span></div>
+    </div>`;
+}
+
+export function activeFocusTaskPanel(task, subject) {
+  return `
+    <div class="task-info task-info--focus">
+      <div class="task-name task-name--focus">${escapeHtml(task.title)}</div>
+      <div class="task-meta">
+        <span class="task-pill pill-amber">Due ${escapeHtml(formatDate(task.due_at))}</span>
+        <span class="task-pill">${escapeHtml(subject?.name || 'General')}</span>
+      </div>
+      <div class="focus-task-actions">
+        <button type="button" class="btn btn-primary complete-focus-task-btn" data-id="${escapeHtml(task.id)}">Mark done</button>
+        <button type="button" class="btn clear-focus-task-btn">Clear</button>
+      </div>
+    </div>`;
+}
diff --git a/js/utils/dom.js b/js/utils/dom.js
new file mode 100644
index 0000000..47b54cb
--- /dev/null
+++ b/js/utils/dom.js
@@ -0,0 +1,65 @@
+/** DOM helpers — escaping, modals, subject styling */
+
+export function escapeHtml(s) {
+  return String(s)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}
+
+const PILL_CLASSES = ['pill-blue', 'pill-green', 'pill-purple', 'pill-amber', 'pill-red'];
+
+export function getPillClass(subject) {
+  if (!subject) return 'pill-amber';
+  const code = subject.short_code || subject.name || '';
+  let hash = 0;
+  for (let i = 0; i < code.length; i++) {
+    hash = code.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return PILL_CLASSES[Math.abs(hash) % PILL_CLASSES.length];
+}
+
+export function openModal(el) {
+  if (el) el.classList.add('is-open');
+}
+
+export function closeModal(el) {
+  if (el) el.classList.remove('is-open');
+}
+
+export function setupModalDismiss(modal, onClose) {
+  if (!modal) return;
+  modal.addEventListener('click', (e) => {
+    if (e.target === modal) (onClose || (() => closeModal(modal)))();
+  });
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && modal.classList.contains('is-open')) {
+      (onClose || (() => closeModal(modal)))();
+    }
+  });
+}
+
+let toastTimer;
+
+export function showToast(message, { error = false } = {}) {
+  const el = document.getElementById('app-toast');
+  if (!el) return;
+  el.textContent = message;
+  el.classList.toggle('toast--error', error);
+  el.classList.add('is-visible');
+  clearTimeout(toastTimer);
+  toastTimer = setTimeout(() => el.classList.remove('is-visible'), 3200);
+}
+
+export function formatDate(dateStr) {
+  if (!dateStr) return 'No date';
+  const d = new Date(dateStr);
+  if (Number.isNaN(d.getTime())) return 'No date';
+  return d.toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}
diff --git a/package-lock.json b/package-lock.json
index d4124c7..bdeb26a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1312,19 +1312,6 @@
         "url": "https://opencollective.com/express"
       }
     },
-    "node_modules/picomatch": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
-      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
-      "license": "MIT",
-      "optional": true,
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
     "node_modules/prebuild-install": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.3.tgz",