From a1dd2f2c00641c93b4bc520c57cb0edc0ed50abc Mon Sep 17 00:00:00 2001
From: domrichardson <100129001+domrichardson@users.noreply.github.com>
Date: Sun, 29 Mar 2026 15:28:44 +0100
Subject: [PATCH] feat: Updated styling into seperate css files

---
 frontend/src/App.vue                          | 254 +----------
 frontend/src/assets/styles/main.css           |  92 ++--
 frontend/src/assets/styles/scoped/App.css     | 254 +++++++++++
 .../scoped/components/AdminGroupModal.css     |   5 +
 .../scoped/components/AdminModal.shared.css   |  24 ++
 .../scoped/components/AdminProviderModal.css  |   1 +
 .../scoped/components/AdminSpaceModal.css     |   2 +
 .../scoped/components/AdminUserModal.css      |   1 +
 .../styles/scoped/components/CategoryTree.css | 184 ++++++++
 .../scoped/components/CreateNoteModal.css     |  12 +
 .../styles/scoped/components/FileExplorer.css |  64 +++
 .../components/ManageAuthProvidersModal.css   |  92 ++++
 .../styles/scoped/components/NoteEditor.css   | 300 +++++++++++++
 .../styles/scoped/components/NoteList.css     | 207 +++++++++
 .../styles/scoped/components/NoteViewer.css   | 168 ++++++++
 .../scoped/components/SearchResultsPage.css   | 100 +++++
 .../styles/scoped/components/TaskBoard.css    | 403 ++++++++++++++++++
 .../scoped/components/TaskDetailModal.css     |  61 +++
 .../src/assets/styles/scoped/pages/Admin.css  | 234 ++++++++++
 .../src/assets/styles/scoped/pages/Login.css  | 116 +++++
 .../styles/scoped/pages/PublicSpace.css       |  71 +++
 .../assets/styles/scoped/pages/Register.css   |  93 ++++
 frontend/src/components/AdminGroupModal.vue   |  30 +-
 .../src/components/AdminProviderModal.vue     |  23 +-
 frontend/src/components/AdminSpaceModal.vue   |  24 +-
 frontend/src/components/AdminUserModal.vue    |  24 +-
 frontend/src/components/CategoryTree.vue      | 182 +-------
 .../src/components/CreateCategoryModal.vue    |   3 +-
 frontend/src/components/CreateNoteModal.vue   |  15 +-
 frontend/src/components/CreateSpaceModal.vue  |   3 +-
 frontend/src/components/FileExplorer.vue      |  67 +--
 .../components/ManageAuthProvidersModal.vue   |  90 +---
 frontend/src/components/NoteEditor.vue        | 301 +------------
 frontend/src/components/NoteList.vue          | 205 +--------
 frontend/src/components/NoteViewer.vue        | 194 +--------
 frontend/src/components/SearchResultsPage.vue |  98 +----
 frontend/src/components/TaskBoard.vue         | 401 +----------------
 frontend/src/components/TaskDetailModal.vue   |  59 +--
 frontend/src/pages/Admin.vue                  | 235 +---------
 frontend/src/pages/Login.vue                  | 114 +----
 frontend/src/pages/PublicSpace.vue            |  69 +--
 frontend/src/pages/Register.vue               |  91 +---
 42 files changed, 2480 insertions(+), 2486 deletions(-)
 create mode 100644 frontend/src/assets/styles/scoped/App.css
 create mode 100644 frontend/src/assets/styles/scoped/components/AdminGroupModal.css
 create mode 100644 frontend/src/assets/styles/scoped/components/AdminModal.shared.css
 create mode 100644 frontend/src/assets/styles/scoped/components/AdminProviderModal.css
 create mode 100644 frontend/src/assets/styles/scoped/components/AdminSpaceModal.css
 create mode 100644 frontend/src/assets/styles/scoped/components/AdminUserModal.css
 create mode 100644 frontend/src/assets/styles/scoped/components/CategoryTree.css
 create mode 100644 frontend/src/assets/styles/scoped/components/CreateNoteModal.css
 create mode 100644 frontend/src/assets/styles/scoped/components/FileExplorer.css
 create mode 100644 frontend/src/assets/styles/scoped/components/ManageAuthProvidersModal.css
 create mode 100644 frontend/src/assets/styles/scoped/components/NoteEditor.css
 create mode 100644 frontend/src/assets/styles/scoped/components/NoteList.css
 create mode 100644 frontend/src/assets/styles/scoped/components/NoteViewer.css
 create mode 100644 frontend/src/assets/styles/scoped/components/SearchResultsPage.css
 create mode 100644 frontend/src/assets/styles/scoped/components/TaskBoard.css
 create mode 100644 frontend/src/assets/styles/scoped/components/TaskDetailModal.css
 create mode 100644 frontend/src/assets/styles/scoped/pages/Admin.css
 create mode 100644 frontend/src/assets/styles/scoped/pages/Login.css
 create mode 100644 frontend/src/assets/styles/scoped/pages/PublicSpace.css
 create mode 100644 frontend/src/assets/styles/scoped/pages/Register.css

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 7e15026..75ccefc 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,4 +1,4 @@
-<template>
+<template>
     <div id="app" class="app-container">
         <nav v-if="!isPublicRoute && !isAuthRoute" ref="navbarRef" class="navbar navbar-dark bg-dark sticky-top">
             <div class="container-fluid app-navbar">
@@ -1258,257 +1258,7 @@ const logout = () => {
 };
 </script>
 
-<style scoped>
-.app-container {
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-    overflow-x: hidden;
-    overflow-y: visible;
-}
+<style scoped src="./assets/styles/scoped/App.css"></style>
 
-.navbar {
-    z-index: 1100;
-    overflow: visible;
-}
 
-.app-navbar {
-    align-items: center;
-}
 
-.navbar-left {
-    min-width: 0;
-}
-
-.navbar-controls {
-    min-width: 0;
-}
-
-.app-brand {
-    white-space: nowrap;
-}
-
-.app-main {
-    flex: 1;
-    overflow: hidden;
-}
-
-.sidebar {
-    width: 280px;
-    overflow-y: auto;
-    flex-shrink: 0;
-    display: flex;
-    flex-direction: column;
-}
-
-.sidebar-content {
-    flex: 1;
-    min-height: 0;
-    overflow-y: auto;
-}
-
-.sidebar-header {
-    border-bottom: 1px solid #dee2e6;
-}
-
-.main-content {
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-}
-
-.content {
-    flex: 1;
-    overflow-y: auto;
-}
-
-.breadcrumb-title {
-    font-size: 1rem;
-    color: #495057;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.breadcrumb-link {
-    border: 0;
-    background: transparent;
-    padding: 0;
-    color: #0d6efd;
-    text-decoration: none;
-    cursor: pointer;
-}
-
-.breadcrumb-link:hover {
-    text-decoration: underline;
-}
-
-.breadcrumb-separator {
-    color: #6c757d;
-}
-
-.search-box {
-    width: 300px;
-}
-
-.dropdown {
-    position: relative;
-}
-
-.dropdown-menu {
-    z-index: 1200;
-    max-width: min(92vw, 320px);
-}
-
-.dropdown-menu-end {
-    right: 0;
-    left: auto;
-}
-
-.dropdown-menu.show {
-    display: block;
-}
-
-.admin-route-view {
-    flex: 1;
-    min-height: 0;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    padding: 0;
-}
-
-@media (max-width: 768px) {
-    .app-navbar {
-        display: grid;
-        grid-template-columns: 1fr auto;
-        grid-template-areas:
-            "left user"
-            "space space"
-            "search search";
-        row-gap: 0.5rem;
-        column-gap: 0.5rem;
-        align-items: center;
-    }
-
-    .navbar-left {
-        grid-area: left;
-    }
-
-    .navbar-controls {
-        width: 100%;
-    }
-
-    .nav-user-menu {
-        grid-area: user;
-        justify-self: end;
-    }
-
-    .nav-space-selector {
-        grid-area: space;
-    }
-
-    .nav-space-selector > .btn {
-        width: 100%;
-        text-align: left;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-    }
-
-    .nav-search {
-        grid-area: search;
-        width: 100%;
-    }
-
-    .nav-search .form-control {
-        width: 100%;
-    }
-
-    .search-box {
-        width: 100%;
-    }
-
-    .app-brand {
-        font-size: 1.5rem;
-    }
-
-    .nav-menu-toggle {
-        padding: 0.35rem 0.55rem;
-    }
-
-    .sidebar-backdrop {
-        position: fixed;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background-color: rgba(0, 0, 0, 0.5);
-        z-index: 1090;
-    }
-
-    .sidebar {
-        position: fixed;
-        left: 0;
-        bottom: 0;
-        width: 280px;
-        z-index: 1095;
-        transform: translateX(-100%);
-        transition: transform 0.3s ease-in-out;
-        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
-        overflow-y: auto;
-    }
-
-    .sidebar.open {
-        transform: translateX(0);
-    }
-
-    .toolbar {
-        position: relative;
-        z-index: 0;
-    }
-
-    .action-button {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    .action-label {
-        display: none;
-    }
-
-    .action-button .mdi {
-        margin-right: 0 !important;
-    }
-
-    .col-auto .action-button {
-        min-width: 2.75rem;
-    }
-
-    .app-main {
-        flex-direction: column;
-    }
-
-    .main-content {
-        width: 100%;
-    }
-}
-
-/* Dark mode overrides */
-:root[data-bs-theme="dark"] .sidebar-header {
-    border-bottom-color: #3a3f4b;
-}
-
-:root[data-bs-theme="dark"] .breadcrumb-title {
-    color: #94a3b8;
-}
-
-:root[data-bs-theme="dark"] .breadcrumb-link {
-    color: #7aa2f7;
-}
-
-:root[data-bs-theme="dark"] .breadcrumb-separator {
-    color: #4a5568;
-}
-</style>
diff --git a/frontend/src/assets/styles/main.css b/frontend/src/assets/styles/main.css
index a937a5f..42fc4b7 100644
--- a/frontend/src/assets/styles/main.css
+++ b/frontend/src/assets/styles/main.css
@@ -1,42 +1,70 @@
 :root {
-    --primary-color: #667eea;
-    --secondary-color: #764ba2;
-    --text-color: #333;
-    --bg-color: #f8f9fa;
-    --border-color: #dee2e6;
+    --color-primary: #667eea;
+    --color-primary-strong: #4f46a5;
+    --color-text: #333333;
+    --color-text-muted: #6c757d;
+    --color-bg: #f8f9fa;
+    --color-surface: #ffffff;
+    --color-surface-muted: #f1f3f5;
+    --color-border: #dee2e6;
+    --color-info: #748ffc;
+    --color-code-bg: #353943;
+    --color-code-text: #f9fafb;
+    --color-scroll-track: #f1f1f1;
+    --color-scroll-thumb: #888888;
+    --color-scroll-thumb-hover: #555555;
+
+    --primary-color: var(--color-primary);
+    --secondary-color: var(--color-primary-strong);
+    --text-color: var(--color-text);
+    --bg-color: var(--color-bg);
+    --border-color: var(--color-border);
 }
 
 [data-bs-theme="dark"] {
-    --text-color: #e2e8f0;
-    --bg-color: #1a1d23;
-    --border-color: #3a3f4b;
+    --color-text: #e2e8f0;
+    --color-text-muted: #94a3b8;
+    --color-bg: #1a1d23;
+    --color-surface: #21252e;
+    --color-surface-muted: #2d3748;
+    --color-border: #3a3f4b;
+    --color-info: #7aa2f7;
+    --color-code-bg: #2d3748;
+    --color-code-text: #e2e8f0;
+    --color-scroll-track: #2d3748;
+    --color-scroll-thumb: #4a5568;
+    --color-scroll-thumb-hover: #718096;
+
+    --text-color: var(--color-text);
+    --bg-color: var(--color-bg);
+    --border-color: var(--color-border);
 }
 
 [data-bs-theme="dark"] body {
-    background-color: #1a1d23;
-    color: #e2e8f0;
+    background-color: var(--color-bg);
+    color: var(--color-text);
 }
 
 [data-bs-theme="dark"] .sidebar {
-    background-color: #21252e !important;
-    border-color: #3a3f4b !important;
+    background-color: var(--color-surface) !important;
+    border-color: var(--color-border) !important;
 }
 
 [data-bs-theme="dark"] .toolbar {
-    background-color: #21252e;
-    border-color: #3a3f4b !important;
+    background-color: var(--color-surface);
+    border-color: var(--color-border) !important;
 }
 
 [data-bs-theme="dark"] .main-content {
-    background-color: #1a1d23;
+    background-color: var(--color-bg);
 }
 
 [data-bs-theme="dark"] .markdown-body table {
-    background: #21252e;
+    background: var(--color-surface);
 }
 
 [data-bs-theme="dark"] .markdown-body th {
-    background: #2a2f3a;
+    background: var(--color-surface-muted);
 }
 
 [data-bs-theme="dark"] .markdown-body tr:nth-child(even) td {
@@ -49,8 +77,8 @@
 }
 
 [data-bs-theme="dark"] .markdown-body :not(pre) > code {
-    background: #2d3748;
-    color: #e2e8f0;
+    background: var(--color-surface-muted);
+    color: var(--color-text);
 }
 
 [data-bs-theme="dark"] .markdown-body pre code {
@@ -59,20 +87,20 @@
 }
 
 [data-bs-theme="dark"] .markdown-body pre {
-    background: #2d3748;
-    color: #e2e8f0;
+    background: var(--color-code-bg);
+    color: var(--color-code-text);
 }
 
 [data-bs-theme="dark"] ::-webkit-scrollbar-track {
-    background: #2d3748;
+    background: var(--color-scroll-track);
 }
 
 [data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
-    background: #4a5568;
+    background: var(--color-scroll-thumb);
 }
 
 [data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
-    background: #718096;
+    background: var(--color-scroll-thumb-hover);
 }
 
 * {
@@ -99,7 +127,7 @@ body,
     margin: 1rem 0;
     border-collapse: collapse;
     border-spacing: 0;
-    background: #fff;
+    background: var(--color-surface);
 }
 
 .markdown-body th,
@@ -126,7 +154,7 @@ body,
 .markdown-body blockquote {
     margin: 1rem 0;
     padding: 0.75rem 1rem;
-    border-left: 4px solid #748ffc;
+    border-left: 4px solid var(--color-info);
     background: #f8f9ff;
     color: #334155;
 }
@@ -139,8 +167,8 @@ body,
     margin: 1rem 0;
     padding: 1rem;
     border-radius: 0.75rem;
-    background: #353943;
-    color: #f9fafb;
+    background: var(--color-code-bg);
+    color: var(--color-code-text);
     overflow-x: auto;
 }
 
@@ -155,7 +183,7 @@ body,
     font-size: 0.95em;
     padding: 0.1rem 0.3rem;
     border-radius: 0.35rem;
-    background: #f1f3f5;
+    background: var(--color-surface-muted);
 }
 
 /* Scrollbar styling */
@@ -165,14 +193,14 @@ body,
 }
 
 ::-webkit-scrollbar-track {
-    background: #f1f1f1;
+    background: var(--color-scroll-track);
 }
 
 ::-webkit-scrollbar-thumb {
-    background: #888;
+    background: var(--color-scroll-thumb);
     border-radius: 4px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-    background: #555;
+    background: var(--color-scroll-thumb-hover);
 }
diff --git a/frontend/src/assets/styles/scoped/App.css b/frontend/src/assets/styles/scoped/App.css
new file mode 100644
index 0000000..52ef285
--- /dev/null
+++ b/frontend/src/assets/styles/scoped/App.css
@@ -0,0 +1,254 @@
+.app-container {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    overflow-x: hidden;
+    overflow-y: visible;
+}
+
+.navbar {
+    z-index: 1100;
+    overflow: visible;
+}
+
+.app-navbar {
+    align-items: center;
+}
+
+.navbar-left {
+    min-width: 0;
+}
+
+.navbar-controls {
+    min-width: 0;
+}
+
+.app-brand {
+    white-space: nowrap;
+}
+
+.app-main {
+    flex: 1;
+    overflow: hidden;
+}
+
+.sidebar {
+    width: 280px;
+    overflow-y: auto;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+}
+
+.sidebar-content {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+}
+
+.sidebar-header {
+    border-bottom: 1px solid var(--color-border);
+}
+
+.main-content {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.content {
+    flex: 1;
+    overflow-y: auto;
+}
+
+.breadcrumb-title {
+    font-size: 1rem;
+    color: #495057;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.breadcrumb-link {
+    border: 0;
+    background: transparent;
+    padding: 0;
+    color: var(--color-primary);
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.breadcrumb-link:hover {
+    text-decoration: underline;
+}
+
+.breadcrumb-separator {
+    color: var(--color-text-muted);
+}
+
+.search-box {
+    width: 300px;
+}
+
+.dropdown {
+    position: relative;
+}
+
+.dropdown-menu {
+    z-index: 1200;
+    max-width: min(92vw, 320px);
+}
+
+.dropdown-menu-end {
+    right: 0;
+    left: auto;
+}
+
+.dropdown-menu.show {
+    display: block;
+}
+
+.admin-route-view {
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    padding: 0;
+}
+
+@media (max-width: 768px) {
+    .app-navbar {
+        display: grid;
+        grid-template-columns: 1fr auto;
+        grid-template-areas:
+            "left user"
+            "space space"
+            "search search";
+        row-gap: 0.5rem;
+        column-gap: 0.5rem;
+        align-items: center;
+    }
+
+    .navbar-left {
+        grid-area: left;
+    }
+
+    .navbar-controls {
+        width: 100%;
+    }
+
+    .nav-user-menu {
+        grid-area: user;
+        justify-self: end;
+    }
+
+    .nav-space-selector {
+        grid-area: space;
+    }
+
+    .nav-space-selector > .btn {
+        width: 100%;
+        text-align: left;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .nav-search {
+        grid-area: search;
+        width: 100%;
+    }
+
+    .nav-search .form-control {
+        width: 100%;
+    }
+
+    .search-box {
+        width: 100%;
+    }
+
+    .app-brand {
+        font-size: 1.5rem;
+    }
+
+    .nav-menu-toggle {
+        padding: 0.35rem 0.55rem;
+    }
+
+    .sidebar-backdrop {
+        position: fixed;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: rgba(0, 0, 0, 0.5);
+        z-index: 1090;
+    }
+
+    .sidebar {
+        position: fixed;
+        left: 0;
+        bottom: 0;
+        width: 280px;
+        z-index: 1095;
+        transform: translateX(-100%);
+        transition: transform 0.3s ease-in-out;
+        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
+        overflow-y: auto;
+    }
+
+    .sidebar.open {
+        transform: translateX(0);
+    }
+
+    .toolbar {
+        position: relative;
+        z-index: 0;
+    }
+
+    .action-button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .action-label {
+        display: none;
+    }
+
+    .action-button .mdi {
+        margin-right: 0 !important;
+    }
+
+    .col-auto .action-button {
+        min-width: 2.75rem;
+    }
+
+    .app-main {
+        flex-direction: column;
+    }
+
+    .main-content {
+        width: 100%;
+    }
+}
+
+/* Dark mode overrides */
+:root[data-bs-theme="dark"] .sidebar-header {
+    border-bottom-color: var(--color-border);
+}
+
+:root[data-bs-theme="dark"] .breadcrumb-title {
+    color: #94a3b8;
+}
+
+:root[data-bs-theme="dark"] .breadcrumb-link {
+    color: #7aa2f7;
+}
+
+:root[data-bs-theme="dark"] .breadcrumb-separator {
+    color: #4a5568;
+}
+
+
diff --git a/frontend/src/assets/styles/scoped/components/AdminGroupModal.css b/frontend/src/assets/styles/scoped/components/AdminGroupModal.css
new file mode 100644
index 0000000..2f6bf0a
--- /dev/null
+++ b/frontend/src/assets/styles/scoped/components/AdminGroupModal.css
@@ -0,0 +1,5 @@
+@import "./AdminModal.shared.css";
+
+.permissions-textarea {
+    font-family: "Courier New", monospace;
+}
\ No newline at end of file
diff --git a/frontend/src/assets/styles/scoped/components/AdminModal.shared.css b/frontend/src/assets/styles/scoped/components/AdminModal.shared.css
new file mode 100644
index 0000000..c3715ca
--- /dev/null
+++ b/frontend/src/assets/styles/scoped/components/AdminModal.shared.css
@@ -0,0 +1,24 @@
+.admin-modal {
+    z-index: 2000;
+    overflow-y: auto;
+    padding-top: max(0.5rem, env(safe-area-inset-top));
+}
+
+.admin-modal-backdrop {
+    z-index: 1990;
+}
+
+.admin-modal .modal-dialog {
+    margin: 1rem auto;
+}
+
+@media (max-width: 767.98px) {
+    .admin-modal {
+        padding-top: max(0.75rem, env(safe-area-inset-top));
+    }
+
+    .admin-modal .modal-dialog {
+        margin: 0.75rem;
+        max-width: none;
+    }
+}
diff --git a/frontend/src/assets/styles/scoped/components/AdminProviderModal.css b/frontend/src/assets/styles/scoped/components/AdminProviderModal.css
new file mode 100644
index 0000000..5125a38
--- /dev/null
+++ b/frontend/src/assets/styles/scoped/components/AdminProviderModal.css
@@ -0,0 +1 @@
+@import "./AdminModal.shared.css";
diff --git a/frontend/src/assets/styles/scoped/components/AdminSpaceModal.css b/frontend/src/assets/styles/scoped/components/AdminSpaceModal.css
new file mode 100644
index 0000000..3186d2d
--- /dev/null
+++ b/frontend/src/assets/styles/scoped/components/AdminSpaceModal.css
@@ -0,0 +1,2 @@
+@import "./AdminModal.shared.css";
+
diff --git a/frontend/src/assets/styles/scoped/components/AdminUserModal.css b/frontend/src/assets/styles/scoped/components/AdminUserModal.css
new file mode 100644
index 0000000..5125a38
--- /dev/null
+++ b/frontend/src/assets/styles/scoped/components/AdminUserModal.css
@@ -0,0 +1 @@
+@import "./AdminModal.shared.css";
diff --git a/frontend/src/assets/styles/scoped/components/CategoryTree.css b/frontend/src/assets/styles/scoped/components/CategoryTree.css
new file mode 100644
index 0000000..cab2106
--- /dev/null
+++ b/frontend/src/assets/styles/scoped/components/CategoryTree.css
@@ -0,0 +1,184 @@
+.category-item {
+    margin-bottom: 0.25rem;
+}
+
+.category-header {
+    display: flex;
+    align-items: center;
+    padding: 0.5rem;
+    cursor: pointer;
+    user-select: none;
+    border-radius: 4px;
+}
+
+.category-header:hover {
+    background-color: #e9ecef;
+}
+
+.expand-icon {
+    width: 20px;
+    text-align: center;
+    font-size: 0.875rem;
+}
+
+.category-name {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.category-actions {
+    position: relative;
+}
+
+.menu-button {
+    border: 0;
+    background: transparent;
+    width: 28px;
+    height: 28px;
+    border-radius: 6px;
+    color: #495057;
+}
+
+.menu-button:hover {
+    background-color: rgba(0, 0, 0, 0.08);
+}
+
+.menu-dropdown {
+    position: absolute;
+    top: 30px;
+    right: 0;
+    min-width: 150px;
+    padding: 0.35rem;
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: 0.5rem;
+    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.15);
+    z-index: 5;
+}
+
+.menu-item {
+    display: block;
+    width: 100%;
+    border: 0;
+    background: transparent;
+    text-align: left;
+    padding: 0.45rem 0.6rem;
+    border-radius: 0.35rem;
+}
+
+.menu-item:hover {
+    background-color: #f1f3f5;
+}
+
+.menu-item.danger {
+    color: #c92a2a;
+}
+
+.category-content {
+    padding-left: 1rem;
+}
+
+.note-item {
+    display: flex;
+    align-items: center;
+    padding: 0.5rem;
+    cursor: pointer;
+    border-radius: 4px;
+    font-size: 16px;
+    margin-bottom: 0.25rem;
+}
+
+.note-item:hover {
+    background-color: #e9ecef;
+}
+
+.note-item span {
+    flex-grow: 1;
+}
+
+.pin-icon {
+    color: #408aca;
+    font-size: 0.9em;
+    flex-shrink: 0;
+}
+
+.featured-icon {
+    color: #f08c00;
+    font-size: 0.9em;
+    flex-shrink: 0;
+}
+
+.note-item.is-pinned {
+    background: #dbf5ff;
+    border: 1px solid #a8d1ff;
+}
+
+.note-item.is-pinned:hover {
+    background: #c5e9ff;
+}
+
+.note-item.is-featured {
+    background: var(--color-surface)9db;
+    border: 1px solid #ffd8a8;
+}
+
+.note-item.is-featured:hover {
+    background: var(--color-surface)6c5;
+}
+
+.subcategories {
+    margin-top: 0.25rem;
+}
+
+/* Dark mode overrides */
+:root[data-bs-theme="dark"] .category-header:hover {
+    background-color: var(--color-surface-muted);
+}
+
+:root[data-bs-theme="dark"] .menu-button {
+    color: #94a3b8;
+}
+
+:root[data-bs-theme="dark"] .menu-button:hover {
+    background-color: rgba(255, 255, 255, 0.08);
+}
+
+:root[data-bs-theme="dark"] .menu-dropdown {
+    background: var(--color-surface-muted);
+    border-color: #4a5568;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
+}
+
+:root[data-bs-theme="dark"] .menu-item {
+    color: var(--color-text);
+}
+
+:root[data-bs-theme="dark"] .menu-item:hover {
+    background-color: #374151;
+}
+
+:root[data-bs-theme="dark"] .note-item:hover {
+    background-color: var(--color-surface-muted);
+}
+
+:root[data-bs-theme="dark"] .note-item.is-pinned {
+    background: #1a3a5c;
+    border-color: #2d6a9f;
+}
+
+:root[data-bs-theme="dark"] .note-item.is-pinned:hover {
+    background: #1e4470;
+}
+
+:root[data-bs-theme="dark"] .note-item.is-featured {
+    background: #3a2e0a;
+    border-color: #7a5a0a;
+}
+
+:root[data-bs-theme="dark"] .note-item.is-featured:hover {
+    background: #453710;
+}
+
+
diff --git a/frontend/src/assets/styles/scoped/components/CreateNoteModal.css b/frontend/src/assets/styles/scoped/components/CreateNoteModal.css
new file mode 100644
index 0000000..9bedb16
--- /dev/null
+++ b/frontend/src/assets/styles/scoped/components/CreateNoteModal.css
@@ -0,0 +1,12 @@
+.note-flags {
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+}
+
+.flag-check {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.45rem;
+}
+
diff --git a/frontend/src/assets/styles/scoped/components/FileExplorer.css b/frontend/src/assets/styles/scoped/components/FileExplorer.css
new file mode 100644
index 0000000..02a3ccc
--- /dev/null
+++ b/frontend/src/assets/styles/scoped/components/FileExplorer.css
@@ -0,0 +1,64 @@
+.file-explorer {
+    background: var(--color-surface);
+    overflow: hidden;
+}
+
+.file-explorer-header {
+    font-size: 0.8rem;
+    min-height: 36px;
+}
+
+.file-list {
+    max-height: 480px;
+}
+
+.file-item {
+    border-bottom: 1px solid #f0f0f0;
+    cursor: pointer;
+    transition: background 0.1s;
+    color: var(--color-text);
+    line-height: 1.3;
+}
+
+.file-item:last-child {
+    border-bottom: none;
+}
+
+.file-item:hover {
+    background-color: #f0f4ff;
+}
+
+.drag-active {
+    outline: 2px dashed var(--color-primary);
+    outline-offset: -2px;
+}
+
+.btn-delete {
+    opacity: 0;
+    transition: opacity 0.1s;
+}
+
+.file-item:hover .btn-delete {
+    opacity: 1;
+}
+
+/* Dark mode overrides */
+:root[data-bs-theme="dark"] .file-explorer {
+    background: var(--color-surface);
+}
+
+:root[data-bs-theme="dark"] .file-explorer-header {
+    background: var(--color-surface);
+    border-color: var(--color-border);
+}
+
+:root[data-bs-theme="dark"] .file-item {
+    border-bottom-color: var(--color-border);
+    color: var(--color-text);
+}
+
+:root[data-bs-theme="dark"] .file-item:hover {
+    background-color: var(--color-surface-muted);
+}
+
+
diff --git a/frontend/src/assets/styles/scoped/components/ManageAuthProvidersModal.css b/frontend/src/assets/styles/scoped/components/ManageAuthProvidersModal.css
new file mode 100644
index 0000000..0b3d1b5
--- /dev/null
+++ b/frontend/src/assets/styles/scoped/components/ManageAuthProvidersModal.css
@@ -0,0 +1,92 @@
+.modal-backdrop-custom {
+    position: fixed;
+    inset: 0;
+    background: rgba(15, 23, 42, 0.45);
+    backdrop-filter: blur(2px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2000;
+    padding: 1.5rem;
+}
+
+.modal-panel {
+    width: min(920px, 100%);
+    max-height: min(92vh, 980px);
+    background: var(--color-surface);
+    border: 1px solid #dbe3ee;
+    border-radius: 14px;
+    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
+.provider-modal-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 1rem;
+    padding: 1rem 1.25rem;
+    border-bottom: 1px solid #e5e7eb;
+    background: linear-gradient(180deg, #f8fafc 0%, var(--color-surface) 100%);
+}
+
+.provider-modal-title {
+    margin: 0;
+    font-weight: 600;
+}
+
+.provider-modal-close {
+    flex-shrink: 0;
+}
+
+.provider-modal-body {
+    padding: 1rem 1.25rem 1.25rem;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.provider-section {
+    border: 1px solid #e5e7eb;
+    border-radius: 10px;
+    background: #f8fafc;
+    padding: 0.9rem;
+}
+
+.provider-list {
+    max-height: 220px;
+    overflow: auto;
+}
+
+@media (max-width: 768px) {
+    .modal-backdrop-custom {
+        padding: 0.75rem;
+    }
+
+    .provider-modal-header,
+    .provider-modal-body {
+        padding-left: 0.85rem;
+        padding-right: 0.85rem;
+    }
+}
+
+/* Dark mode overrides */
+:root[data-bs-theme="dark"] .modal-panel {
+    background: var(--color-surface);
+    border-color: var(--color-border);
+}
+
+:root[data-bs-theme="dark"] .provider-modal-header {
+    background: linear-gradient(180deg, #2a2f3a 0%, var(--color-surface) 100%);
+    border-bottom-color: var(--color-border);
+}
+
+:root[data-bs-theme="dark"] .provider-section {
+    background: #2a2f3a;
+    border-color: var(--color-border);
+}
+
+
diff --git a/frontend/src/assets/styles/scoped/components/NoteEditor.css b/frontend/src/assets/styles/scoped/components/NoteEditor.css
new file mode 100644
index 0000000..bd75e10
--- /dev/null
+++ b/frontend/src/assets/styles/scoped/components/NoteEditor.css
@@ -0,0 +1,300 @@
+.editor-toolbar {
+    display: flex;
+    gap: 0.5rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid var(--color-border);
+}
+
+.save-status {
+    display: inline-flex;
+    align-items: center;
+    font-size: 0.85rem;
+    color: var(--color-text-muted);
+}
+
+.save-status.dirty {
+    color: #b26a00;
+}
+
+.save-status.saving {
+    color: var(--color-primary);
+}
+
+.save-status.saved {
+    color: #2b8a3e;
+}
+
+.editor-textarea {
+    font-family: "Courier New", monospace;
+    min-height: 600px;
+    resize: vertical;
+}
+
+.note-flags {
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+}
+
+.flag-check {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.45rem;
+    padding: 0.45rem 0.75rem;
+    border: 1px solid var(--color-border);
+    border-radius: 999px;
+    background: var(--color-bg);
+    margin: 0;
+    cursor: pointer;
+}
+
+.flag-check-input {
+    margin: 0;
+    width: 1.1rem;
+    height: 1.1rem;
+    cursor: pointer;
+}
+
+.flag-check-label {
+    line-height: 1;
+    user-select: none;
+}
+
+.preview-pane {
+    background-color: var(--color-bg);
+    overflow-y: auto;
+    max-height: 600px;
+}
+
+.danger-zone {
+    padding: 1rem;
+    border: 1px solid #f3b5b5;
+    border-radius: 0.75rem;
+    background: var(--color-surface)5f5;
+}
+
+.danger-zone-title {
+    color: #9f1c1c;
+    font-size: 1rem;
+    font-weight: 700;
+}
+
+.danger-zone-copy {
+    color: #7a2727;
+    font-size: 0.9rem;
+}
+
+.task-mention-panel {
+    margin-top: 0.45rem;
+    border: 1px solid #dbe4f0;
+    border-radius: 10px;
+    background: #fbfdff;
+    padding: 0.5rem;
+    max-height: 220px;
+    overflow-y: auto;
+}
+
+.task-mention-option {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border: 0;
+    background: transparent;
+    padding: 0.35rem 0.45rem;
+    border-radius: 6px;
+    text-align: left;
+}
+
+.task-mention-option:hover {
+    background: #eef3ff;
+}
+
+.task-picker {
+    background: var(--color-surface);
+    min-height: 300px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.task-picker-header {
+    background: var(--color-bg);
+    min-height: 34px;
+}
+
+.task-picker-search {
+    background: var(--color-surface);
+}
+
+.task-picker-list {
+    overflow-y: auto;
+    max-height: 520px;
+    padding: 0.25rem;
+}
+
+.task-picker-item {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border: 0;
+    background: transparent;
+    border-radius: 8px;
+    padding: 0.35rem 0.45rem;
+    text-align: left;
+    gap: 0.4rem;
+    color: var(--color-text);
+}
+
+.task-picker-item:hover {
+    background: #eef3ff;
+}
+
+.task-picker-title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.task-picker-empty {
+    padding: 0.7rem;
+}
+
+.task-picker-item small {
+    font-size: 0.7rem;
+    color: #6b7280;
+}
+
+.task-picker .btn-link {
+    text-decoration: none;
+}
+
+.task-picker-item {
+    flex-wrap: wrap;
+}
+
+.markdown-body :deep(.task-inline-link) {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.18rem 0.5rem;
+    border-radius: 999px;
+    border: 1px solid #c7d8ff;
+    background: #eef4ff;
+    color: #2c4ea3;
+    font-weight: 600;
+    text-decoration: none;
+}
+
+.markdown-body :deep(.task-inline-title) {
+    line-height: 1;
+}
+
+.markdown-body :deep(.task-inline-status) {
+    line-height: 1;
+    font-size: 0.72rem;
+    font-weight: 700;
+    border-radius: 999px;
+    padding: 0.16rem 0.42rem;
+    border: 1px solid color-mix(in srgb, var(--task-status-color, #5c7bd9) 60%, var(--color-surface) 40%);
+    background: color-mix(in srgb, var(--task-status-color, #5c7bd9) 18%, var(--color-surface) 82%);
+    color: color-mix(in srgb, var(--task-status-color, #5c7bd9) 72%, #0f172a 28%);
+}
+
+.markdown-body :deep(.task-inline-link:hover) {
+    background: #dfeaff;
+    border-color: #aac4ff;
+}
+
+.markdown-body :deep(.task-inline-link i) {
+    font-size: 0.9rem;
+}
+
+/* Dark mode overrides */
+:root[data-bs-theme="dark"] .editor-toolbar {
+    border-bottom-color: var(--color-border);
+}
+
+:root[data-bs-theme="dark"] .flag-check {
+    background: var(--color-surface-muted);
+    border-color: #4a5568;
+}
+
+:root[data-bs-theme="dark"] .preview-pane {
+    background-color: var(--color-surface);
+}
+
+:root[data-bs-theme="dark"] .danger-zone {
+    background: #2d1a1a;
+    border-color: #7a3030;
+}
+
+:root[data-bs-theme="dark"] .danger-zone-title {
+    color: #fc8181;
+}
+
+:root[data-bs-theme="dark"] .danger-zone-copy {
+    color: #fca5a5;
+}
+
+:root[data-bs-theme="dark"] .task-mention-panel {
+    border-color: #3a4558;
+    background: #1f2733;
+}
+
+:root[data-bs-theme="dark"] .task-mention-option:hover {
+    background: #2b3646;
+}
+
+:root[data-bs-theme="dark"] .task-picker {
+    border-color: var(--color-border) !important;
+    background: var(--color-surface);
+}
+
+:root[data-bs-theme="dark"] .task-picker-header {
+    background: var(--color-surface);
+    border-bottom-color: var(--color-border) !important;
+}
+
+:root[data-bs-theme="dark"] .task-picker-search {
+    background: var(--color-surface);
+    border-bottom-color: var(--color-border) !important;
+}
+
+:root[data-bs-theme="dark"] .task-picker-search .form-control {
+    background: #1f2430;
+    border-color: var(--color-border);
+    color: var(--color-text);
+}
+
+:root[data-bs-theme="dark"] .task-picker-item {
+    color: var(--color-text);
+}
+
+:root[data-bs-theme="dark"] .task-picker-item:hover {
+    background: var(--color-surface-muted);
+}
+
+:root[data-bs-theme="dark"] .task-picker-item small {
+    color: #a8b4c7;
+}
+
+:root[data-bs-theme="dark"] .markdown-body :deep(.task-inline-link) {
+    border-color: #35508b;
+    background: #1b2a4a;
+    color: #9ec0ff;
+}
+
+:root[data-bs-theme="dark"] .markdown-body :deep(.task-inline-link:hover) {
+    background: #22345c;
+    border-color: #4566ad;
+}
+
+:root[data-bs-theme="dark"] .markdown-body :deep(.task-inline-status) {
+    border-color: color-mix(in srgb, var(--task-status-color, #7aa2f7) 65%, #1e293b 35%);
+    background: color-mix(in srgb, var(--task-status-color, #7aa2f7) 26%, #111827 74%);
+    color: color-mix(in srgb, var(--task-status-color, #7aa2f7) 70%, #dbeafe 30%);
+}
+
+
diff --git a/frontend/src/assets/styles/scoped/components/NoteList.css b/frontend/src/assets/styles/scoped/components/NoteList.css
new file mode 100644
index 0000000..cff41a8
--- /dev/null
+++ b/frontend/src/assets/styles/scoped/components/NoteList.css
@@ -0,0 +1,207 @@
+.note-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 1rem;
+}
+
+.empty-notes-state {
+    grid-column: 1 / -1;
+    min-height: 48vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    border: 1px dashed #cfd6e4;
+    border-radius: 14px;
+    background: linear-gradient(180deg, #f8f9fc 0%, #eef3fb 100%);
+    padding: 2rem 1.5rem;
+}
+
+.empty-notes-icon {
+    font-size: 5.25rem;
+    line-height: 1;
+    color: #60789a;
+    margin-bottom: 0.85rem;
+}
+
+.empty-notes-title {
+    margin: 0;
+    color: #23364f;
+    font-size: 1.8rem;
+    font-weight: 700;
+}
+
+.empty-notes-message {
+    margin: 0.75rem 0 0;
+    max-width: 460px;
+    color: #4f637d;
+    font-size: 1.05rem;
+}
+
+.note-card {
+    border: 1px solid var(--color-border);
+    border-radius: 8px;
+    padding: 1rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.note-card:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    transform: translateY(-2px);
+}
+
+.note-title {
+    margin-bottom: 0.5rem;
+    color: var(--color-text);
+    display: flex;
+    align-items: center;
+    gap: 0.3rem;
+}
+
+.pin-icon {
+    color: #408aca;
+    font-size: 0.9em;
+    flex-shrink: 0;
+}
+
+.featured-icon {
+    color: #f08c00;
+    font-size: 0.95em;
+    flex-shrink: 0;
+}
+
+.note-card.is-pinned {
+    background: #dbf5ff;
+    border-color: #a8d1ff;
+}
+
+.note-card.is-featured {
+    border-color: #ffd8a8;
+    background: var(--color-surface)9db;
+}
+
+.note-preview {
+    color: #666;
+    margin-bottom: 0.5rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.list-footer {
+    grid-column: 1 / -1;
+    display: flex;
+    justify-content: center;
+    margin-top: 0.5rem;
+}
+
+/* List view overrides */
+.note-list--list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+}
+
+.note-list--list .note-card {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.6rem 1rem;
+    border-radius: 6px;
+}
+
+.note-list--list .note-card:hover {
+    transform: none;
+    box-shadow: none;
+    background-color: #eef2ff;
+    border-color: var(--color-primary);
+    border-left: 3px solid var(--color-primary);
+}
+
+.note-list--list .note-title {
+    flex: 0 0 220px;
+    margin-bottom: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.note-list--list .note-preview {
+    flex: 1;
+    margin-bottom: 0;
+}
+
+.note-list--list .note-card > small {
+    flex: 0 0 auto;
+    white-space: nowrap;
+}
+
+.note-list--list .list-footer {
+    grid-column: unset;
+}
+
+@media (max-width: 768px) {
+    .empty-notes-state {
+        min-height: 40vh;
+        padding: 1.5rem 1rem;
+    }
+
+    .empty-notes-icon {
+        font-size: 4.3rem;
+    }
+
+    .empty-notes-title {
+        font-size: 1.45rem;
+    }
+}
+
+/* Dark mode overrides */
+:root[data-bs-theme="dark"] .empty-notes-state {
+    border-color: var(--color-border);
+    background: linear-gradient(180deg, #1e2430 0%, var(--color-surface) 100%);
+}
+
+:root[data-bs-theme="dark"] .empty-notes-title {
+    color: var(--color-text);
+}
+
+:root[data-bs-theme="dark"] .empty-notes-message {
+    color: #94a3b8;
+}
+
+:root[data-bs-theme="dark"] .note-card {
+    border-color: var(--color-border);
+    background-color: var(--color-surface);
+}
+
+:root[data-bs-theme="dark"] .note-card:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+}
+
+:root[data-bs-theme="dark"] .note-list--list .note-card:hover {
+    background-color: #2a2f3a;
+    border-color: #7aa2f7;
+    border-left-color: #7aa2f7;
+}
+
+:root[data-bs-theme="dark"] .note-title {
+    color: var(--color-text);
+}
+
+:root[data-bs-theme="dark"] .note-preview {
+    color: #94a3b8;
+}
+
+:root[data-bs-theme="dark"] .note-card.is-pinned {
+    background: #1a3a5c;
+    border-color: #2d6a9f;
+}
+
+:root[data-bs-theme="dark"] .note-card.is-featured {
+    background: #3a2e0a;
+    border-color: #7a5a0a;
+}
+
+
diff --git a/frontend/src/assets/styles/scoped/components/NoteViewer.css b/frontend/src/assets/styles/scoped/components/NoteViewer.css
new file mode 100644
index 0000000..942ba3b
--- /dev/null
+++ b/frontend/src/assets/styles/scoped/components/NoteViewer.css
@@ -0,0 +1,168 @@
+.note-viewer {
+    max-width: 900px;
+}
+
+.note-meta {
+    padding-bottom: 1rem;
+    border-bottom: 1px solid #e9ecef;
+}
+
+.meta-grid {
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+}
+
+.tag-chip {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.2rem 0.55rem;
+    border-radius: 999px;
+    background: #eef2ff;
+    color: #364fc7;
+    font-size: 0.8rem;
+}
+
+.state-chip {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.25rem 0.6rem;
+    border-radius: 999px;
+    font-size: 0.8rem;
+    font-weight: 600;
+}
+
+.pinned-chip {
+    color: #005f8f;
+    background: #dbf5ff;
+    border: 1px solid #a8d1ff;
+}
+
+.featured-chip {
+    color: #8d7619;
+    border: 1px solid #ffd8a8;
+    background: #fff9db;
+}
+
+.public-chip {
+    color: #0c5460;
+    border: 1px solid #a5d8ff;
+    background: #e7f5ff;
+}
+
+.private-chip {
+    color: #5f3dc4;
+    border: 1px solid #d0bfff;
+    background: #f3f0ff;
+}
+.protected-chip {
+    color: #7f5539;
+    border: 1px solid #e0c3a6;
+    background: #fff4e6;
+}
+
+.markdown-body :deep(.task-inline-link) {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.18rem 0.5rem;
+    border-radius: 999px;
+    border: 1px solid #c7d8ff;
+    background: #eef4ff;
+    color: #2c4ea3;
+    font-weight: 600;
+    text-decoration: none;
+}
+
+.markdown-body :deep(.task-inline-title) {
+    line-height: 1;
+}
+
+.markdown-body :deep(.task-inline-status) {
+    line-height: 1;
+    font-size: 0.72rem;
+    font-weight: 700;
+    border-radius: 999px;
+    padding: 0.16rem 0.42rem;
+    border: 1px solid color-mix(in srgb, var(--task-status-color, #5c7bd9) 60%, var(--color-surface) 40%);
+    background: color-mix(in srgb, var(--task-status-color, #5c7bd9) 18%, var(--color-surface) 82%);
+    color: color-mix(in srgb, var(--task-status-color, #5c7bd9) 72%, #0f172a 28%);
+}
+
+.markdown-body :deep(.task-inline-link:hover) {
+    background: #dfeaff;
+    border-color: #aac4ff;
+}
+
+.markdown-body :deep(.task-inline-link i) {
+    font-size: 0.9rem;
+}
+
+.markdown-body :deep(h1),
+.markdown-body :deep(h2),
+.markdown-body :deep(h3) {
+    margin-top: 1.5rem;
+    margin-bottom: 0.75rem;
+}
+
+.markdown-body :deep(p),
+.markdown-body :deep(li) {
+    line-height: 1.7;
+}
+
+/* Dark mode overrides */
+:root[data-bs-theme="dark"] .note-meta {
+    border-bottom-color: var(--color-border);
+}
+
+:root[data-bs-theme="dark"] .tag-chip {
+    background: #1e2d5f;
+    color: #93b4ff;
+}
+
+:root[data-bs-theme="dark"] .pinned-chip {
+    color: #7dd3fc;
+    background: #1a3a5c;
+    border-color: #2d6a9f;
+}
+
+:root[data-bs-theme="dark"] .featured-chip {
+    color: #fbbf24;
+    background: #3a2e0a;
+    border-color: #7a5a0a;
+}
+
+:root[data-bs-theme="dark"] .public-chip {
+    color: #67e8f9;
+    background: #0c2a3a;
+    border-color: #1d6a7a;
+}
+
+:root[data-bs-theme="dark"] .private-chip {
+    color: #c4b5fd;
+    background: #2d1f5e;
+    border-color: #5b3f9a;
+}
+
+:root[data-bs-theme="dark"] .protected-chip {
+    color: #fdba74;
+    background: #3a1f0a;
+    border-color: #7a4f1a;
+}
+
+:root[data-bs-theme="dark"] .markdown-body :deep(.task-inline-link) {
+    border-color: #35508b;
+    background: #1b2a4a;
+    color: #9ec0ff;
+}
+
+:root[data-bs-theme="dark"] .markdown-body :deep(.task-inline-link:hover) {
+    background: #22345c;
+    border-color: #4566ad;
+}
+
+:root[data-bs-theme="dark"] .markdown-body :deep(.task-inline-status) {
+    border-color: color-mix(in srgb, var(--task-status-color, #7aa2f7) 65%, #1e293b 35%);
+    background: color-mix(in srgb, var(--task-status-color, #7aa2f7) 26%, #111827 74%);
+    color: color-mix(in srgb, var(--task-status-color, #7aa2f7) 70%, #dbeafe 30%);
+}
diff --git a/frontend/src/assets/styles/scoped/components/SearchResultsPage.css b/frontend/src/assets/styles/scoped/components/SearchResultsPage.css
new file mode 100644
index 0000000..deae860
--- /dev/null
+++ b/frontend/src/assets/styles/scoped/components/SearchResultsPage.css
@@ -0,0 +1,100 @@
+.search-results-page {
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.search-results-header {
+    margin-bottom: 1.5rem;
+}
+
+.search-results-header h2 {
+    margin: 0;
+    font-size: 1.5rem;
+    color: #223149;
+}
+
+.search-meta {
+    margin: 0.35rem 0 0;
+    color: #5b6f8b;
+}
+
+.pagination-bar {
+    margin-top: 1.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.85rem;
+}
+
+.page-indicator {
+    color: #4f637d;
+    font-weight: 600;
+}
+
+.empty-state {
+    min-height: 48vh;
+    border: 1px dashed #cfdae9;
+    border-radius: 14px;
+    background: radial-gradient(circle at 20% 20%, #f2f9ff 0%, #edf2ff 70%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 2rem 1rem;
+}
+
+.empty-state-icon {
+    font-size: 4.2rem;
+    color: #60789a;
+    margin-bottom: 0.6rem;
+}
+
+.empty-state h3 {
+    margin: 0;
+    color: #223149;
+}
+
+.empty-state p {
+    margin: 0.6rem 0 0;
+    color: #5b6f8b;
+    max-width: 500px;
+}
+
+@media (max-width: 768px) {
+    .pagination-bar {
+        flex-direction: column;
+    }
+}
+
+/* Dark mode overrides */
+:root[data-bs-theme="dark"] .search-results-header h2 {
+    color: var(--color-text);
+}
+
+:root[data-bs-theme="dark"] .search-meta {
+    color: #94a3b8;
+}
+
+:root[data-bs-theme="dark"] .page-indicator {
+    color: #94a3b8;
+}
+
+:root[data-bs-theme="dark"] .empty-state {
+    border-color: var(--color-border);
+    background: radial-gradient(circle at 20% 20%, #1a2035 0%, #1e2430 70%);
+}
+
+:root[data-bs-theme="dark"] .empty-state h3 {
+    color: var(--color-text);
+}
+
+:root[data-bs-theme="dark"] .empty-state p {
+    color: #94a3b8;
+}
+
+:root[data-bs-theme="dark"] .empty-state-icon {
+    color: #4a6fa5;
+}
+
+
diff --git a/frontend/src/assets/styles/scoped/components/TaskBoard.css b/frontend/src/assets/styles/scoped/components/TaskBoard.css
new file mode 100644
index 0000000..c89c592
--- /dev/null
+++ b/frontend/src/assets/styles/scoped/components/TaskBoard.css
@@ -0,0 +1,403 @@
+.task-board {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.task-board-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 1rem;
+}
+
+.task-filters {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 0.75rem;
+}
+
+.status-lane {
+    border: 1px solid #d9e2ec;
+    border-radius: 12px;
+    padding: 0.75rem;
+    background: linear-gradient(180deg, #fcfdff 0%, #f5f8fc 100%);
+}
+
+.lane-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.5rem;
+}
+
+.status-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.45rem;
+}
+
+.status-item {
+    display: flex;
+    align-items: center;
+    gap: 0.55rem;
+    padding: 0.4rem 0.45rem;
+    border-radius: 8px;
+    background: var(--color-surface);
+    border: 1px solid #e4e9f0;
+    cursor: grab;
+}
+
+.status-item.is-drag-over {
+    border-color: #7aa2f7;
+    background: #eef3ff;
+}
+
+.drag-handle {
+    color: #74839a;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.status-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 999px;
+}
+
+.status-name {
+    flex: 1;
+    font-weight: 600;
+}
+
+.status-actions {
+    display: inline-flex;
+    gap: 0.35rem;
+}
+
+.task-status-groups {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.status-group {
+    border: 1px solid #dbe4f0;
+    border-radius: 12px;
+    overflow: visible;
+    background: var(--color-surface);
+}
+
+.status-group-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-left: 6px solid transparent;
+    background: #f8fbff;
+    border-bottom: 1px solid #edf2f8;
+    padding: 0.65rem 0.85rem;
+}
+
+.status-group-title-wrap {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.status-group-title {
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.02em;
+}
+
+.status-group-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 999px;
+}
+
+.status-group-count {
+    color: #5f6f87;
+    font-weight: 600;
+}
+
+.status-empty {
+    padding: 0.75rem 0.85rem;
+    color: #7a8799;
+    font-size: 0.9rem;
+}
+
+.task-tree-row {
+    border-bottom: 1px solid #edf2f8;
+}
+
+.task-tree-row:last-child {
+    border-bottom: 0;
+}
+
+.task-tree-row.level-1 .task-row {
+    padding-left: 2.1rem;
+}
+
+.task-tree-row.level-2 .task-row {
+    padding-left: 3.5rem;
+}
+
+.task-row {
+    width: 100%;
+    display: grid;
+    grid-template-columns: 28px 1fr auto;
+    gap: 0.65rem;
+    align-items: center;
+    border: 0;
+    background: var(--color-surface);
+    text-align: left;
+    padding: 0.7rem 0.85rem;
+}
+
+.task-row:hover {
+    background: #f4f8ff;
+}
+
+.status-group-header {
+    border-top-left-radius: 12px;
+    border-top-right-radius: 12px;
+}
+
+.status-group > .task-tree-row:last-child .task-row,
+.status-group > .task-tree-row:last-child > div > .task-tree-row:last-child .task-row,
+.status-group > .task-tree-row:last-child > div > .task-tree-row:last-child > div > .task-tree-row:last-child .task-row {
+    border-bottom-left-radius: 12px;
+    border-bottom-right-radius: 12px;
+}
+
+.tree-toggle {
+    width: 1.25rem;
+    color: #5f6f87;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 0;
+    background: transparent;
+    padding: 0;
+}
+
+.task-main {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+}
+
+.task-main strong,
+.task-main small {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.task-status-menu {
+    position: relative;
+    display: inline-flex;
+}
+
+.status-trigger {
+    width: 28px;
+    height: 28px;
+    border: 0;
+    background: transparent;
+    border-radius: 999px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+}
+
+.status-trigger:hover {
+    background: #eef3f9;
+}
+
+.status-trigger-dot {
+    width: 14px;
+    height: 14px;
+    border: 2px solid var(--color-surface);
+    box-shadow: 0 0 0 1px rgba(67, 81, 98, 0.25);
+    border-radius: 999px;
+}
+
+.status-popup {
+    position: absolute;
+    right: 0;
+    top: calc(100% + 0.3rem);
+    min-width: 190px;
+    background: #151a22;
+    border: 1px solid #2a3343;
+    border-radius: 10px;
+    box-shadow: 0 12px 28px rgba(5, 9, 15, 0.35);
+    padding: 0.35rem;
+    z-index: 40;
+}
+
+.status-option {
+    width: 100%;
+    border: 0;
+    border-radius: 8px;
+    background: transparent;
+    color: #e8edf5;
+    display: grid;
+    grid-template-columns: 14px 1fr auto;
+    align-items: center;
+    gap: 0.55rem;
+    padding: 0.45rem 0.5rem;
+    text-align: left;
+}
+
+.status-option:hover,
+.status-option.selected {
+    background: rgba(255, 255, 255, 0.09);
+}
+
+.status-option-dot {
+    width: 14px;
+    height: 14px;
+    border-radius: 999px;
+    border: 2px solid;
+    background: transparent;
+}
+
+.status-option-label {
+    font-size: 0.86rem;
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
+    font-weight: 600;
+}
+
+.status-option-check {
+    color: #e8edf5;
+    font-size: 0.95rem;
+}
+
+.empty-state {
+    padding: 1rem;
+    color: var(--color-text-muted);
+}
+
+.status-color-row {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 0.5rem;
+    align-items: center;
+}
+
+.danger-zone {
+    border: 1px solid #f3b5b5;
+    border-radius: 0.75rem;
+    background: var(--color-surface)5f5;
+    padding: 0.75rem;
+}
+
+.danger-zone-title {
+    color: #9f1c1c;
+    margin: 0;
+    font-weight: 700;
+}
+
+.danger-zone-copy {
+    color: #7a2727;
+    font-size: 0.9rem;
+}
+
+@media (max-width: 900px) {
+    .task-filters {
+        grid-template-columns: 1fr;
+    }
+
+    .task-row {
+        grid-template-columns: 24px minmax(0, 1fr) auto;
+        gap: 0.5rem;
+    }
+
+    .status-popup {
+        right: -0.2rem;
+        min-width: 170px;
+    }
+}
+
+/* ── Dark mode ── */
+:root[data-bs-theme="dark"] .status-lane {
+    background: linear-gradient(180deg, #1e2330 0%, #1a1d27 100%);
+    border-color: var(--color-border);
+}
+
+:root[data-bs-theme="dark"] .status-item {
+    background: #252b38;
+    border-color: var(--color-border);
+    color: #c8d3e6;
+}
+
+:root[data-bs-theme="dark"] .status-item.is-drag-over {
+    border-color: #7aa2f7;
+    background: #1e2d4a;
+}
+
+:root[data-bs-theme="dark"] .drag-handle {
+    color: #5f6f87;
+}
+
+:root[data-bs-theme="dark"] .status-group {
+    background: #1e2230;
+    border-color: var(--color-border);
+}
+
+:root[data-bs-theme="dark"] .status-group-header {
+    background: #232840;
+    border-bottom-color: var(--color-border);
+}
+
+:root[data-bs-theme="dark"] .status-group-title {
+    color: #c8d3e6;
+}
+
+:root[data-bs-theme="dark"] .status-group-count {
+    color: #7a8fa8;
+}
+
+:root[data-bs-theme="dark"] .status-empty {
+    color: #5f6f87;
+}
+
+:root[data-bs-theme="dark"] .task-tree-row {
+    border-bottom-color: #2e3444;
+}
+
+:root[data-bs-theme="dark"] .task-row {
+    background: #1e2230;
+    color: #c8d3e6;
+}
+
+:root[data-bs-theme="dark"] .task-row:hover {
+    background: #252d40;
+}
+
+:root[data-bs-theme="dark"] .tree-toggle {
+    color: #7a8fa8;
+}
+
+:root[data-bs-theme="dark"] .task-main small {
+    color: #7a8fa8;
+}
+
+:root[data-bs-theme="dark"] .status-trigger:hover {
+    background: #2e3448;
+}
+
+:root[data-bs-theme="dark"] .status-trigger-dot {
+    border-color: #1e2230;
+    box-shadow: 0 0 0 1px rgba(180, 195, 220, 0.2);
+}
+
+:root[data-bs-theme="dark"] .empty-state {
+    color: #7a8fa8;
+}
+
+
diff --git a/frontend/src/assets/styles/scoped/components/TaskDetailModal.css b/frontend/src/assets/styles/scoped/components/TaskDetailModal.css
new file mode 100644
index 0000000..21d2b82
--- /dev/null
+++ b/frontend/src/assets/styles/scoped/components/TaskDetailModal.css
@@ -0,0 +1,61 @@
+.status-progress {
+    display: flex;
+    flex-direction: column;
+    gap: 0.45rem;
+}
+
+.progress-step {
+    display: flex;
+    align-items: center;
+    gap: 0.45rem;
+    color: #627086;
+}
+
+.progress-step.current {
+    color: #0f172a;
+    font-weight: 700;
+}
+
+.progress-step.done {
+    color: #1f7a4d;
+}
+
+.dot {
+    width: 12px;
+    height: 12px;
+    border-radius: 999px;
+    border: 2px solid;
+}
+
+.subtask-row {
+    width: 100%;
+    margin-top: 0.35rem;
+    border: 1px solid #dbe4f0;
+    border-radius: 8px;
+    background: #f8fbff;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.35rem 0.5rem;
+}
+
+/* ── Dark mode ── */
+:root[data-bs-theme="dark"] .progress-step {
+    color: #7a8fa8;
+}
+
+:root[data-bs-theme="dark"] .progress-step.current {
+    color: var(--color-text);
+}
+
+:root[data-bs-theme="dark"] .progress-step.done {
+    color: #4ade80;
+}
+
+:root[data-bs-theme="dark"] .subtask-row {
+    background: #252b38;
+    border-color: var(--color-border);
+    color: #c8d3e6;
+}
+
+
diff --git a/frontend/src/assets/styles/scoped/pages/Admin.css b/frontend/src/assets/styles/scoped/pages/Admin.css
new file mode 100644
index 0000000..17f14ad
--- /dev/null
+++ b/frontend/src/assets/styles/scoped/pages/Admin.css
@@ -0,0 +1,234 @@
+.admin-page {
+    width: 100%;
+    max-width: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+}
+
+.admin-topbar {
+    flex-wrap: wrap;
+    padding: 1rem;
+    border-bottom: 1px solid var(--color-border);
+}
+
+.admin-shell {
+    display: flex;
+    flex: 1;
+    min-height: 0;
+    gap: 0;
+    overflow: hidden;
+}
+
+.admin-sidebar {
+    width: 280px;
+    flex-shrink: 0;
+    background: var(--color-bg);
+    border-right: 1px solid var(--color-border);
+}
+
+.admin-sidebar-inner {
+    padding: 0.75rem;
+}
+
+.admin-nav .nav-link {
+    border-radius: 0.6rem;
+    color: #495057;
+    font-weight: 500;
+}
+
+.admin-nav .nav-link:hover {
+    background: #eef2f7;
+    color: #212529;
+}
+
+.admin-nav .nav-link.active {
+    background: #212529;
+    color: var(--color-surface);
+}
+
+.admin-content {
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+    overflow-y: auto;
+    padding: 1rem;
+}
+
+.admin-section {
+    border-radius: 12px;
+}
+
+.users-list .list-group-item {
+    padding: 1rem;
+}
+
+.user-row {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.user-row-main {
+    flex: 1;
+    min-width: 0;
+}
+
+.user-row-actions {
+    flex-shrink: 0;
+}
+
+.user-actions-stack {
+    flex-wrap: wrap;
+    justify-content: flex-end;
+}
+
+.user-name-line {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 0.6rem;
+}
+
+.user-name {
+    font-size: 1.1rem;
+}
+
+.user-meta-grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 0.75rem 1.25rem;
+}
+
+.user-meta-label {
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--color-text-muted);
+    margin-bottom: 0.1rem;
+}
+
+.user-meta-value {
+    color: #495057;
+    overflow-wrap: anywhere;
+}
+
+.user-meta-item-groups {
+    grid-column: span 1;
+}
+
+@media (max-width: 991.98px) {
+    .user-meta-grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .user-meta-item-groups {
+        grid-column: 1 / -1;
+    }
+}
+
+@media (max-width: 767.98px) {
+    .admin-shell {
+        display: block;
+        min-height: auto;
+    }
+
+    .admin-topbar {
+        padding: 0.75rem;
+    }
+
+    .admin-content {
+        padding: 0.75rem;
+    }
+
+    .admin-sidebar-backdrop {
+        position: fixed;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.45);
+        z-index: 1400;
+    }
+
+    .admin-sidebar {
+        position: fixed;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        width: min(82vw, 320px);
+        z-index: 1410;
+        transform: translateX(-100%);
+        transition: transform 0.25s ease;
+        border-right: 1px solid var(--color-border);
+    }
+
+    .admin-sidebar-inner {
+        padding: 0.75rem;
+    }
+
+    .admin-sidebar.open {
+        transform: translateX(0);
+    }
+
+    .user-row {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .user-row-actions {
+        width: 100%;
+    }
+
+    .user-row-actions .btn {
+        width: 100%;
+    }
+
+    .user-actions-stack {
+        flex-direction: column;
+    }
+
+    .user-meta-grid {
+        grid-template-columns: 1fr;
+        gap: 0.65rem;
+    }
+}
+
+/* Dark mode overrides */
+:root[data-bs-theme="dark"] .admin-topbar {
+    border-bottom-color: var(--color-border);
+}
+
+:root[data-bs-theme="dark"] .admin-sidebar {
+    background: var(--color-surface);
+    border-right-color: var(--color-border);
+}
+
+:root[data-bs-theme="dark"] .admin-nav .nav-link {
+    color: #94a3b8;
+}
+
+:root[data-bs-theme="dark"] .admin-nav .nav-link:hover {
+    background: var(--color-surface-muted);
+    color: var(--color-text);
+}
+
+:root[data-bs-theme="dark"] .admin-nav .nav-link.active {
+    background: var(--color-text);
+    color: #1a1d23;
+}
+
+:root[data-bs-theme="dark"] .user-meta-value {
+    color: #94a3b8;
+}
+
+:root[data-bs-theme="dark"] .admin-section {
+    background-color: var(--color-surface);
+}
+
+
diff --git a/frontend/src/assets/styles/scoped/pages/Login.css b/frontend/src/assets/styles/scoped/pages/Login.css
new file mode 100644
index 0000000..24061c0
--- /dev/null
+++ b/frontend/src/assets/styles/scoped/pages/Login.css
@@ -0,0 +1,116 @@
+.login-page {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    min-height: 100vh;
+    padding: 1.25rem;
+    background: radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.2), transparent 45%), linear-gradient(135deg, #3554d1 0%, #4f46a5 100%);
+}
+
+.auth-container {
+    width: 100%;
+    max-width: 460px;
+}
+
+.login-card {
+    background: var(--color-surface);
+    padding: 2rem;
+    border-radius: 18px;
+    box-shadow: 0 22px 48px rgba(16, 24, 40, 0.22);
+    width: 100%;
+}
+
+.brand-block {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75rem;
+    margin-bottom: 1.25rem;
+}
+
+.brand-mark {
+    width: 42px;
+    height: 42px;
+    display: grid;
+    place-items: center;
+    border-radius: 12px;
+    background: rgba(53, 84, 209, 0.12);
+    color: #2f4ac1;
+    font-size: 1.35rem;
+}
+
+.brand-title {
+    margin: 0;
+    font-size: 2.05rem;
+    font-weight: 700;
+    letter-spacing: 0.01em;
+    color: #2f3237;
+}
+
+.auth-title {
+    text-align: center;
+    font-size: 2.1rem;
+    font-weight: 600;
+    margin-bottom: 1.5rem;
+    color: #2f3237;
+}
+
+.form-control {
+    border-radius: 0.65rem;
+    min-height: 48px;
+    border-color: #d6dbe4;
+}
+
+.auth-submit {
+    min-height: 48px;
+    font-weight: 600;
+}
+
+.auth-provider-btn {
+    min-height: 48px;
+    border-radius: 0.65rem;
+}
+
+.oauth-divider {
+    display: flex;
+    align-items: center;
+    color: var(--color-text-muted);
+    font-size: 0.9rem;
+}
+
+.oauth-divider::before,
+.oauth-divider::after {
+    content: "";
+    flex: 1;
+    border-bottom: 1px solid var(--color-border);
+}
+
+.oauth-divider span {
+    padding: 0 0.75rem;
+}
+
+.auth-switch-link {
+    color: #4b5565;
+}
+
+@media (max-width: 576px) {
+    .login-page {
+        padding: 0.85rem;
+    }
+
+    .login-card {
+        border-radius: 14px;
+        padding: 1.35rem;
+    }
+
+    .brand-title {
+        font-size: 1.8rem;
+    }
+
+    .auth-title {
+        font-size: 1.85rem;
+    }
+}
+
+
diff --git a/frontend/src/assets/styles/scoped/pages/PublicSpace.css b/frontend/src/assets/styles/scoped/pages/PublicSpace.css
new file mode 100644
index 0000000..9020268
--- /dev/null
+++ b/frontend/src/assets/styles/scoped/pages/PublicSpace.css
@@ -0,0 +1,71 @@
+.public-layout {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+.public-body {
+    flex: 1;
+    overflow: hidden;
+    position: relative;
+}
+
+.public-sidebar {
+    width: 280px;
+    overflow-y: auto;
+    flex-shrink: 0;
+}
+
+.note-item {
+    border-radius: 6px;
+    padding: 0.5rem 0.75rem;
+    background: transparent;
+    border: 1px solid transparent;
+    transition: background 0.15s;
+}
+
+.note-item:hover {
+    background: #e9ecef;
+}
+
+.note-item.active {
+    background: #dbe4ff;
+    border-color: #748ffc;
+    color: #364fc7;
+}
+
+.note-item.is-featured {
+    background: var(--color-surface)4e6;
+    border-color: #ffd8a8;
+}
+
+.note-item.is-featured:hover {
+    background: #ffe8cc;
+}
+
+@media (max-width: 768px) {
+    .public-sidebar-backdrop {
+        position: fixed;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: rgba(0, 0, 0, 0.5);
+        z-index: 1090;
+    }
+
+    .public-sidebar {
+        position: fixed;
+        left: 0;
+        bottom: 0;
+        z-index: 1095;
+        transform: translateX(-100%);
+        transition: transform 0.3s ease-in-out;
+        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
+    }
+
+    .public-sidebar.open {
+        transform: translateX(0);
+    }
+}
+
+
diff --git a/frontend/src/assets/styles/scoped/pages/Register.css b/frontend/src/assets/styles/scoped/pages/Register.css
new file mode 100644
index 0000000..026b585
--- /dev/null
+++ b/frontend/src/assets/styles/scoped/pages/Register.css
@@ -0,0 +1,93 @@
+.register-page {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    min-height: 100vh;
+    padding: 1.25rem;
+    background: radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.2), transparent 45%), linear-gradient(135deg, #3554d1 0%, #4f46a5 100%);
+}
+
+.auth-container {
+    width: 100%;
+    max-width: 560px;
+}
+
+.register-card {
+    background: var(--color-surface);
+    padding: 2rem;
+    border-radius: 18px;
+    box-shadow: 0 22px 48px rgba(16, 24, 40, 0.22);
+    width: 100%;
+}
+
+.brand-block {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75rem;
+    margin-bottom: 1.25rem;
+}
+
+.brand-mark {
+    width: 42px;
+    height: 42px;
+    display: grid;
+    place-items: center;
+    border-radius: 12px;
+    background: rgba(53, 84, 209, 0.12);
+    color: #2f4ac1;
+    font-size: 1.35rem;
+}
+
+.brand-title {
+    margin: 0;
+    font-size: 2.05rem;
+    font-weight: 700;
+    letter-spacing: 0.01em;
+    color: #2f3237;
+}
+
+.auth-title {
+    text-align: center;
+    font-size: 2.1rem;
+    font-weight: 600;
+    margin-bottom: 1.5rem;
+    color: #2f3237;
+}
+
+.form-control {
+    border-radius: 0.65rem;
+    min-height: 48px;
+    border-color: #d6dbe4;
+}
+
+.auth-submit {
+    min-height: 48px;
+    font-weight: 600;
+}
+
+.auth-switch-link {
+    color: #4b5565;
+}
+
+@media (max-width: 576px) {
+    .register-page {
+        padding: 0.85rem;
+    }
+
+    .register-card {
+        border-radius: 14px;
+        padding: 1.35rem;
+    }
+
+    .brand-title {
+        font-size: 1.8rem;
+    }
+
+    .auth-title {
+        font-size: 1.85rem;
+    }
+}
+
+
diff --git a/frontend/src/components/AdminGroupModal.vue b/frontend/src/components/AdminGroupModal.vue
index 557b658..d632fbc 100644
--- a/frontend/src/components/AdminGroupModal.vue
+++ b/frontend/src/components/AdminGroupModal.vue
@@ -78,7 +78,7 @@ const hydrateForm = () => {
     form.value = {
         name: props.group?.name || "",
         description: props.group?.description || "",
-        permissionsText: (props.group?.permissions || []).join("\n"),
+        permissionsText: (props.group?.permissions || []).join("/n"),
     };
 };
 
@@ -93,33 +93,7 @@ const handleSubmit = () => {
 };
 </script>
 
-<style scoped>
-.admin-modal {
-    z-index: 2000;
-    overflow-y: auto;
-    padding-top: max(0.5rem, env(safe-area-inset-top));
-}
+<style scoped src="../assets/styles/scoped/components/AdminGroupModal.css"></style>
 
-.admin-modal-backdrop {
-    z-index: 1990;
-}
 
-.admin-modal .modal-dialog {
-    margin: 1rem auto;
-}
 
-.permissions-textarea {
-    font-family: "Courier New", monospace;
-}
-
-@media (max-width: 767.98px) {
-    .admin-modal {
-        padding-top: max(0.75rem, env(safe-area-inset-top));
-    }
-
-    .admin-modal .modal-dialog {
-        margin: 0.75rem;
-        max-width: none;
-    }
-}
-</style>
diff --git a/frontend/src/components/AdminProviderModal.vue b/frontend/src/components/AdminProviderModal.vue
index 51cfbe7..3879c84 100644
--- a/frontend/src/components/AdminProviderModal.vue
+++ b/frontend/src/components/AdminProviderModal.vue
@@ -178,28 +178,7 @@ const handleSubmit = () => {
 };
 </script>
 
-<style scoped>
-.admin-modal {
-    z-index: 2000;
-    overflow-y: auto;
-    padding-top: max(0.5rem, env(safe-area-inset-top));
-}
+<style scoped src="../assets/styles/scoped/components/AdminProviderModal.css"></style>
 
-.admin-modal-backdrop {
-    z-index: 1990;
-}
 
-.admin-modal .modal-dialog {
-    margin: 1rem auto;
-}
 
-@media (max-width: 767.98px) {
-    .admin-modal {
-        padding-top: max(0.75rem, env(safe-area-inset-top));
-    }
-
-    .admin-modal .modal-dialog {
-        margin: 0.5rem;
-    }
-}
-</style>
diff --git a/frontend/src/components/AdminSpaceModal.vue b/frontend/src/components/AdminSpaceModal.vue
index d8864f7..eba8322 100644
--- a/frontend/src/components/AdminSpaceModal.vue
+++ b/frontend/src/components/AdminSpaceModal.vue
@@ -253,29 +253,7 @@ const deleteSpace = async () => {
 };
 </script>
 
-<style scoped>
-.admin-modal {
-    z-index: 2000;
-    overflow-y: auto;
-    padding-top: max(0.5rem, env(safe-area-inset-top));
-}
+<style scoped src="../assets/styles/scoped/components/AdminSpaceModal.css"></style>
 
-.admin-modal-backdrop {
-    z-index: 1990;
-}
 
-.admin-modal .modal-dialog {
-    margin: 1rem auto;
-}
 
-@media (max-width: 767.98px) {
-    .admin-modal {
-        padding-top: max(0.75rem, env(safe-area-inset-top));
-    }
-
-    .admin-modal .modal-dialog {
-        margin: 0.75rem;
-        max-width: none;
-    }
-}
-</style>
diff --git a/frontend/src/components/AdminUserModal.vue b/frontend/src/components/AdminUserModal.vue
index 2da7d8c..566bb44 100644
--- a/frontend/src/components/AdminUserModal.vue
+++ b/frontend/src/components/AdminUserModal.vue
@@ -83,29 +83,7 @@ const handleSubmit = () => {
 };
 </script>
 
-<style scoped>
-.admin-modal {
-    z-index: 2000;
-    overflow-y: auto;
-    padding-top: max(0.5rem, env(safe-area-inset-top));
-}
+<style scoped src="../assets/styles/scoped/components/AdminUserModal.css"></style>
 
-.admin-modal-backdrop {
-    z-index: 1990;
-}
 
-.admin-modal .modal-dialog {
-    margin: 1rem auto;
-}
 
-@media (max-width: 767.98px) {
-    .admin-modal {
-        padding-top: max(0.75rem, env(safe-area-inset-top));
-    }
-
-    .admin-modal .modal-dialog {
-        margin: 0.75rem;
-        max-width: none;
-    }
-}
-</style>
diff --git a/frontend/src/components/CategoryTree.vue b/frontend/src/components/CategoryTree.vue
index 98e7671..db7f273 100644
--- a/frontend/src/components/CategoryTree.vue
+++ b/frontend/src/components/CategoryTree.vue
@@ -141,187 +141,7 @@ const handleDeleteCategory = (category) => {
 };
 </script>
 
-<style scoped>
-.category-item {
-    margin-bottom: 0.25rem;
-}
+<style scoped src="../assets/styles/scoped/components/CategoryTree.css"></style>
 
-.category-header {
-    display: flex;
-    align-items: center;
-    padding: 0.5rem;
-    cursor: pointer;
-    user-select: none;
-    border-radius: 4px;
-}
 
-.category-header:hover {
-    background-color: #e9ecef;
-}
 
-.expand-icon {
-    width: 20px;
-    text-align: center;
-    font-size: 0.875rem;
-}
-
-.category-name {
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.category-actions {
-    position: relative;
-}
-
-.menu-button {
-    border: 0;
-    background: transparent;
-    width: 28px;
-    height: 28px;
-    border-radius: 6px;
-    color: #495057;
-}
-
-.menu-button:hover {
-    background-color: rgba(0, 0, 0, 0.08);
-}
-
-.menu-dropdown {
-    position: absolute;
-    top: 30px;
-    right: 0;
-    min-width: 150px;
-    padding: 0.35rem;
-    background: #fff;
-    border: 1px solid #dee2e6;
-    border-radius: 0.5rem;
-    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.15);
-    z-index: 5;
-}
-
-.menu-item {
-    display: block;
-    width: 100%;
-    border: 0;
-    background: transparent;
-    text-align: left;
-    padding: 0.45rem 0.6rem;
-    border-radius: 0.35rem;
-}
-
-.menu-item:hover {
-    background-color: #f1f3f5;
-}
-
-.menu-item.danger {
-    color: #c92a2a;
-}
-
-.category-content {
-    padding-left: 1rem;
-}
-
-.note-item {
-    display: flex;
-    align-items: center;
-    padding: 0.5rem;
-    cursor: pointer;
-    border-radius: 4px;
-    font-size: 16px;
-    margin-bottom: 0.25rem;
-}
-
-.note-item:hover {
-    background-color: #e9ecef;
-}
-
-.note-item span {
-    flex-grow: 1;
-}
-
-.pin-icon {
-    color: #408aca;
-    font-size: 0.9em;
-    flex-shrink: 0;
-}
-
-.featured-icon {
-    color: #f08c00;
-    font-size: 0.9em;
-    flex-shrink: 0;
-}
-
-.note-item.is-pinned {
-    background: #dbf5ff;
-    border: 1px solid #a8d1ff;
-}
-
-.note-item.is-pinned:hover {
-    background: #c5e9ff;
-}
-
-.note-item.is-featured {
-    background: #fff9db;
-    border: 1px solid #ffd8a8;
-}
-
-.note-item.is-featured:hover {
-    background: #fff6c5;
-}
-
-.subcategories {
-    margin-top: 0.25rem;
-}
-
-/* Dark mode overrides */
-:root[data-bs-theme="dark"] .category-header:hover {
-    background-color: #2d3748;
-}
-
-:root[data-bs-theme="dark"] .menu-button {
-    color: #94a3b8;
-}
-
-:root[data-bs-theme="dark"] .menu-button:hover {
-    background-color: rgba(255, 255, 255, 0.08);
-}
-
-:root[data-bs-theme="dark"] .menu-dropdown {
-    background: #2d3748;
-    border-color: #4a5568;
-    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
-}
-
-:root[data-bs-theme="dark"] .menu-item {
-    color: #e2e8f0;
-}
-
-:root[data-bs-theme="dark"] .menu-item:hover {
-    background-color: #374151;
-}
-
-:root[data-bs-theme="dark"] .note-item:hover {
-    background-color: #2d3748;
-}
-
-:root[data-bs-theme="dark"] .note-item.is-pinned {
-    background: #1a3a5c;
-    border-color: #2d6a9f;
-}
-
-:root[data-bs-theme="dark"] .note-item.is-pinned:hover {
-    background: #1e4470;
-}
-
-:root[data-bs-theme="dark"] .note-item.is-featured {
-    background: #3a2e0a;
-    border-color: #7a5a0a;
-}
-
-:root[data-bs-theme="dark"] .note-item.is-featured:hover {
-    background: #453710;
-}
-</style>
diff --git a/frontend/src/components/CreateCategoryModal.vue b/frontend/src/components/CreateCategoryModal.vue
index 9bcd6cb..24a323f 100644
--- a/frontend/src/components/CreateCategoryModal.vue
+++ b/frontend/src/components/CreateCategoryModal.vue
@@ -90,4 +90,5 @@ const handleSubmit = () => {
 };
 </script>
 
-<style scoped></style>
+
+
diff --git a/frontend/src/components/CreateNoteModal.vue b/frontend/src/components/CreateNoteModal.vue
index a2ca1b7..1ddcc44 100644
--- a/frontend/src/components/CreateNoteModal.vue
+++ b/frontend/src/components/CreateNoteModal.vue
@@ -141,16 +141,7 @@ const handleCreate = () => {
 };
 </script>
 
-<style scoped>
-.note-flags {
-    display: flex;
-    gap: 1rem;
-    flex-wrap: wrap;
-}
+<style scoped src="../assets/styles/scoped/components/CreateNoteModal.css"></style>
+
+
 
-.flag-check {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.45rem;
-}
-</style>
diff --git a/frontend/src/components/CreateSpaceModal.vue b/frontend/src/components/CreateSpaceModal.vue
index 344b162..aa759df 100644
--- a/frontend/src/components/CreateSpaceModal.vue
+++ b/frontend/src/components/CreateSpaceModal.vue
@@ -49,4 +49,5 @@ const handleCreate = () => {
 };
 </script>
 
-<style scoped></style>
+
+
diff --git a/frontend/src/components/FileExplorer.vue b/frontend/src/components/FileExplorer.vue
index fbdc721..20e846f 100644
--- a/frontend/src/components/FileExplorer.vue
+++ b/frontend/src/components/FileExplorer.vue
@@ -217,7 +217,7 @@ const createFolder = async () => {
 
 const deleteItem = async (obj) => {
     const label = displayName(obj);
-    if (!confirm(`Delete "${label}"?${obj.is_folder ? "\n\nThis will delete all files inside the folder." : ""}`)) return;
+    if (!confirm(`Delete "${label}"?${obj.is_folder ? "./nThis will delete all files inside the folder." : ""}`)) return;
     error.value = "";
     try {
         if (obj.is_folder) {
@@ -284,67 +284,4 @@ watch(showNewFolderInput, async (v) => {
 });
 </script>
 
-<style scoped>
-.file-explorer {
-    background: #fff;
-    overflow: hidden;
-}
-
-.file-explorer-header {
-    font-size: 0.8rem;
-    min-height: 36px;
-}
-
-.file-list {
-    max-height: 480px;
-}
-
-.file-item {
-    border-bottom: 1px solid #f0f0f0;
-    cursor: pointer;
-    transition: background 0.1s;
-    color: #333;
-    line-height: 1.3;
-}
-
-.file-item:last-child {
-    border-bottom: none;
-}
-
-.file-item:hover {
-    background-color: #f0f4ff;
-}
-
-.drag-active {
-    outline: 2px dashed #0d6efd;
-    outline-offset: -2px;
-}
-
-.btn-delete {
-    opacity: 0;
-    transition: opacity 0.1s;
-}
-
-.file-item:hover .btn-delete {
-    opacity: 1;
-}
-
-/* Dark mode overrides */
-:root[data-bs-theme="dark"] .file-explorer {
-    background: #21252e;
-}
-
-:root[data-bs-theme="dark"] .file-explorer-header {
-    background: #21252e;
-    border-color: #3a3f4b;
-}
-
-:root[data-bs-theme="dark"] .file-item {
-    border-bottom-color: #3a3f4b;
-    color: #e2e8f0;
-}
-
-:root[data-bs-theme="dark"] .file-item:hover {
-    background-color: #2d3748;
-}
-</style>
+<style scoped src="../assets/styles/scoped/components/FileExplorer.css"></style>
diff --git a/frontend/src/components/ManageAuthProvidersModal.vue b/frontend/src/components/ManageAuthProvidersModal.vue
index 91fee41..026509e 100644
--- a/frontend/src/components/ManageAuthProvidersModal.vue
+++ b/frontend/src/components/ManageAuthProvidersModal.vue
@@ -187,95 +187,7 @@ const createProvider = async () => {
 onMounted(loadProviders);
 </script>
 
-<style scoped>
-.modal-backdrop-custom {
-    position: fixed;
-    inset: 0;
-    background: rgba(15, 23, 42, 0.45);
-    backdrop-filter: blur(2px);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 2000;
-    padding: 1.5rem;
-}
+<style scoped src="../assets/styles/scoped/components/ManageAuthProvidersModal.css"></style>
 
-.modal-panel {
-    width: min(920px, 100%);
-    max-height: min(92vh, 980px);
-    background: #fff;
-    border: 1px solid #dbe3ee;
-    border-radius: 14px;
-    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-}
 
-.provider-modal-header {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: 1rem;
-    padding: 1rem 1.25rem;
-    border-bottom: 1px solid #e5e7eb;
-    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
-}
 
-.provider-modal-title {
-    margin: 0;
-    font-weight: 600;
-}
-
-.provider-modal-close {
-    flex-shrink: 0;
-}
-
-.provider-modal-body {
-    padding: 1rem 1.25rem 1.25rem;
-    overflow-y: auto;
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-}
-
-.provider-section {
-    border: 1px solid #e5e7eb;
-    border-radius: 10px;
-    background: #f8fafc;
-    padding: 0.9rem;
-}
-
-.provider-list {
-    max-height: 220px;
-    overflow: auto;
-}
-
-@media (max-width: 768px) {
-    .modal-backdrop-custom {
-        padding: 0.75rem;
-    }
-
-    .provider-modal-header,
-    .provider-modal-body {
-        padding-left: 0.85rem;
-        padding-right: 0.85rem;
-    }
-}
-
-/* Dark mode overrides */
-:root[data-bs-theme="dark"] .modal-panel {
-    background: #21252e;
-    border-color: #3a3f4b;
-}
-
-:root[data-bs-theme="dark"] .provider-modal-header {
-    background: linear-gradient(180deg, #2a2f3a 0%, #21252e 100%);
-    border-bottom-color: #3a3f4b;
-}
-
-:root[data-bs-theme="dark"] .provider-section {
-    background: #2a2f3a;
-    border-color: #3a3f4b;
-}
-</style>
diff --git a/frontend/src/components/NoteEditor.vue b/frontend/src/components/NoteEditor.vue
index 06b1726..7477dc4 100644
--- a/frontend/src/components/NoteEditor.vue
+++ b/frontend/src/components/NoteEditor.vue
@@ -571,303 +571,4 @@ onMounted(async () => {
 });
 </script>
 
-<style scoped>
-.editor-toolbar {
-    display: flex;
-    gap: 0.5rem;
-    padding-bottom: 1rem;
-    border-bottom: 1px solid #dee2e6;
-}
-
-.save-status {
-    display: inline-flex;
-    align-items: center;
-    font-size: 0.85rem;
-    color: #6c757d;
-}
-
-.save-status.dirty {
-    color: #b26a00;
-}
-
-.save-status.saving {
-    color: #0d6efd;
-}
-
-.save-status.saved {
-    color: #2b8a3e;
-}
-
-.editor-textarea {
-    font-family: "Courier New", monospace;
-    min-height: 600px;
-    resize: vertical;
-}
-
-.note-flags {
-    display: flex;
-    gap: 1rem;
-    flex-wrap: wrap;
-}
-
-.flag-check {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.45rem;
-    padding: 0.45rem 0.75rem;
-    border: 1px solid #dee2e6;
-    border-radius: 999px;
-    background: #f8f9fa;
-    margin: 0;
-    cursor: pointer;
-}
-
-.flag-check-input {
-    margin: 0;
-    width: 1.1rem;
-    height: 1.1rem;
-    cursor: pointer;
-}
-
-.flag-check-label {
-    line-height: 1;
-    user-select: none;
-}
-
-.preview-pane {
-    background-color: #f8f9fa;
-    overflow-y: auto;
-    max-height: 600px;
-}
-
-.danger-zone {
-    padding: 1rem;
-    border: 1px solid #f3b5b5;
-    border-radius: 0.75rem;
-    background: #fff5f5;
-}
-
-.danger-zone-title {
-    color: #9f1c1c;
-    font-size: 1rem;
-    font-weight: 700;
-}
-
-.danger-zone-copy {
-    color: #7a2727;
-    font-size: 0.9rem;
-}
-
-.task-mention-panel {
-    margin-top: 0.45rem;
-    border: 1px solid #dbe4f0;
-    border-radius: 10px;
-    background: #fbfdff;
-    padding: 0.5rem;
-    max-height: 220px;
-    overflow-y: auto;
-}
-
-.task-mention-option {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    border: 0;
-    background: transparent;
-    padding: 0.35rem 0.45rem;
-    border-radius: 6px;
-    text-align: left;
-}
-
-.task-mention-option:hover {
-    background: #eef3ff;
-}
-
-.task-picker {
-    background: #fff;
-    min-height: 300px;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-}
-
-.task-picker-header {
-    background: #f8f9fa;
-    min-height: 34px;
-}
-
-.task-picker-search {
-    background: #fff;
-}
-
-.task-picker-list {
-    overflow-y: auto;
-    max-height: 520px;
-    padding: 0.25rem;
-}
-
-.task-picker-item {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    border: 0;
-    background: transparent;
-    border-radius: 8px;
-    padding: 0.35rem 0.45rem;
-    text-align: left;
-    gap: 0.4rem;
-    color: #333;
-}
-
-.task-picker-item:hover {
-    background: #eef3ff;
-}
-
-.task-picker-title {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.task-picker-empty {
-    padding: 0.7rem;
-}
-
-.task-picker-item small {
-    font-size: 0.7rem;
-    color: #6b7280;
-}
-
-.task-picker .btn-link {
-    text-decoration: none;
-}
-
-.task-picker-item {
-    flex-wrap: wrap;
-}
-
-.markdown-body :deep(.task-inline-link) {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.35rem;
-    padding: 0.18rem 0.5rem;
-    border-radius: 999px;
-    border: 1px solid #c7d8ff;
-    background: #eef4ff;
-    color: #2c4ea3;
-    font-weight: 600;
-    text-decoration: none;
-}
-
-.markdown-body :deep(.task-inline-title) {
-    line-height: 1;
-}
-
-.markdown-body :deep(.task-inline-status) {
-    line-height: 1;
-    font-size: 0.72rem;
-    font-weight: 700;
-    border-radius: 999px;
-    padding: 0.16rem 0.42rem;
-    border: 1px solid color-mix(in srgb, var(--task-status-color, #5c7bd9) 60%, #ffffff 40%);
-    background: color-mix(in srgb, var(--task-status-color, #5c7bd9) 18%, #ffffff 82%);
-    color: color-mix(in srgb, var(--task-status-color, #5c7bd9) 72%, #0f172a 28%);
-}
-
-.markdown-body :deep(.task-inline-link:hover) {
-    background: #dfeaff;
-    border-color: #aac4ff;
-}
-
-.markdown-body :deep(.task-inline-link i) {
-    font-size: 0.9rem;
-}
-
-/* Dark mode overrides */
-:root[data-bs-theme="dark"] .editor-toolbar {
-    border-bottom-color: #3a3f4b;
-}
-
-:root[data-bs-theme="dark"] .flag-check {
-    background: #2d3748;
-    border-color: #4a5568;
-}
-
-:root[data-bs-theme="dark"] .preview-pane {
-    background-color: #21252e;
-}
-
-:root[data-bs-theme="dark"] .danger-zone {
-    background: #2d1a1a;
-    border-color: #7a3030;
-}
-
-:root[data-bs-theme="dark"] .danger-zone-title {
-    color: #fc8181;
-}
-
-:root[data-bs-theme="dark"] .danger-zone-copy {
-    color: #fca5a5;
-}
-
-:root[data-bs-theme="dark"] .task-mention-panel {
-    border-color: #3a4558;
-    background: #1f2733;
-}
-
-:root[data-bs-theme="dark"] .task-mention-option:hover {
-    background: #2b3646;
-}
-
-:root[data-bs-theme="dark"] .task-picker {
-    border-color: #3a3f4b !important;
-    background: #21252e;
-}
-
-:root[data-bs-theme="dark"] .task-picker-header {
-    background: #21252e;
-    border-bottom-color: #3a3f4b !important;
-}
-
-:root[data-bs-theme="dark"] .task-picker-search {
-    background: #21252e;
-    border-bottom-color: #3a3f4b !important;
-}
-
-:root[data-bs-theme="dark"] .task-picker-search .form-control {
-    background: #1f2430;
-    border-color: #3a3f4b;
-    color: #e2e8f0;
-}
-
-:root[data-bs-theme="dark"] .task-picker-item {
-    color: #e2e8f0;
-}
-
-:root[data-bs-theme="dark"] .task-picker-item:hover {
-    background: #2d3748;
-}
-
-:root[data-bs-theme="dark"] .task-picker-item small {
-    color: #a8b4c7;
-}
-
-:root[data-bs-theme="dark"] .markdown-body :deep(.task-inline-link) {
-    border-color: #35508b;
-    background: #1b2a4a;
-    color: #9ec0ff;
-}
-
-:root[data-bs-theme="dark"] .markdown-body :deep(.task-inline-link:hover) {
-    background: #22345c;
-    border-color: #4566ad;
-}
-
-:root[data-bs-theme="dark"] .markdown-body :deep(.task-inline-status) {
-    border-color: color-mix(in srgb, var(--task-status-color, #7aa2f7) 65%, #1e293b 35%);
-    background: color-mix(in srgb, var(--task-status-color, #7aa2f7) 26%, #111827 74%);
-    color: color-mix(in srgb, var(--task-status-color, #7aa2f7) 70%, #dbeafe 30%);
-}
-</style>
+<style scoped src="../assets/styles/scoped/components/NoteEditor.css"></style>
diff --git a/frontend/src/components/NoteList.vue b/frontend/src/components/NoteList.vue
index d2e4f27..1b86afc 100644
--- a/frontend/src/components/NoteList.vue
+++ b/frontend/src/components/NoteList.vue
@@ -63,210 +63,7 @@ const getDescription = (note) => {
 };
 </script>
 
-<style scoped>
-.note-list {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-    gap: 1rem;
-}
+<style scoped src="../assets/styles/scoped/components/NoteList.css"></style>
 
-.empty-notes-state {
-    grid-column: 1 / -1;
-    min-height: 48vh;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    border: 1px dashed #cfd6e4;
-    border-radius: 14px;
-    background: linear-gradient(180deg, #f8f9fc 0%, #eef3fb 100%);
-    padding: 2rem 1.5rem;
-}
 
-.empty-notes-icon {
-    font-size: 5.25rem;
-    line-height: 1;
-    color: #60789a;
-    margin-bottom: 0.85rem;
-}
 
-.empty-notes-title {
-    margin: 0;
-    color: #23364f;
-    font-size: 1.8rem;
-    font-weight: 700;
-}
-
-.empty-notes-message {
-    margin: 0.75rem 0 0;
-    max-width: 460px;
-    color: #4f637d;
-    font-size: 1.05rem;
-}
-
-.note-card {
-    border: 1px solid #dee2e6;
-    border-radius: 8px;
-    padding: 1rem;
-    cursor: pointer;
-    transition: all 0.3s ease;
-}
-
-.note-card:hover {
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-    transform: translateY(-2px);
-}
-
-.note-title {
-    margin-bottom: 0.5rem;
-    color: #333;
-    display: flex;
-    align-items: center;
-    gap: 0.3rem;
-}
-
-.pin-icon {
-    color: #408aca;
-    font-size: 0.9em;
-    flex-shrink: 0;
-}
-
-.featured-icon {
-    color: #f08c00;
-    font-size: 0.95em;
-    flex-shrink: 0;
-}
-
-.note-card.is-pinned {
-    background: #dbf5ff;
-    border-color: #a8d1ff;
-}
-
-.note-card.is-featured {
-    border-color: #ffd8a8;
-    background: #fff9db;
-}
-
-.note-preview {
-    color: #666;
-    margin-bottom: 0.5rem;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.list-footer {
-    grid-column: 1 / -1;
-    display: flex;
-    justify-content: center;
-    margin-top: 0.5rem;
-}
-
-/* List view overrides */
-.note-list--list {
-    display: flex;
-    flex-direction: column;
-    gap: 0.4rem;
-}
-
-.note-list--list .note-card {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    padding: 0.6rem 1rem;
-    border-radius: 6px;
-}
-
-.note-list--list .note-card:hover {
-    transform: none;
-    box-shadow: none;
-    background-color: #eef2ff;
-    border-color: #667eea;
-    border-left: 3px solid #667eea;
-}
-
-.note-list--list .note-title {
-    flex: 0 0 220px;
-    margin-bottom: 0;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.note-list--list .note-preview {
-    flex: 1;
-    margin-bottom: 0;
-}
-
-.note-list--list .note-card > small {
-    flex: 0 0 auto;
-    white-space: nowrap;
-}
-
-.note-list--list .list-footer {
-    grid-column: unset;
-}
-
-@media (max-width: 768px) {
-    .empty-notes-state {
-        min-height: 40vh;
-        padding: 1.5rem 1rem;
-    }
-
-    .empty-notes-icon {
-        font-size: 4.3rem;
-    }
-
-    .empty-notes-title {
-        font-size: 1.45rem;
-    }
-}
-
-/* Dark mode overrides */
-:root[data-bs-theme="dark"] .empty-notes-state {
-    border-color: #3a3f4b;
-    background: linear-gradient(180deg, #1e2430 0%, #21252e 100%);
-}
-
-:root[data-bs-theme="dark"] .empty-notes-title {
-    color: #e2e8f0;
-}
-
-:root[data-bs-theme="dark"] .empty-notes-message {
-    color: #94a3b8;
-}
-
-:root[data-bs-theme="dark"] .note-card {
-    border-color: #3a3f4b;
-    background-color: #21252e;
-}
-
-:root[data-bs-theme="dark"] .note-card:hover {
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
-}
-
-:root[data-bs-theme="dark"] .note-list--list .note-card:hover {
-    background-color: #2a2f3a;
-    border-color: #7aa2f7;
-    border-left-color: #7aa2f7;
-}
-
-:root[data-bs-theme="dark"] .note-title {
-    color: #e2e8f0;
-}
-
-:root[data-bs-theme="dark"] .note-preview {
-    color: #94a3b8;
-}
-
-:root[data-bs-theme="dark"] .note-card.is-pinned {
-    background: #1a3a5c;
-    border-color: #2d6a9f;
-}
-
-:root[data-bs-theme="dark"] .note-card.is-featured {
-    background: #3a2e0a;
-    border-color: #7a5a0a;
-}
-</style>
diff --git a/frontend/src/components/NoteViewer.vue b/frontend/src/components/NoteViewer.vue
index bcdd906..c92cb03 100644
--- a/frontend/src/components/NoteViewer.vue
+++ b/frontend/src/components/NoteViewer.vue
@@ -152,196 +152,4 @@ const onMarkdownClick = (event) => {
 };
 </script>
 
-<style scoped>
-.note-viewer {
-    max-width: 900px;
-}
-
-.note-meta {
-    padding-bottom: 1rem;
-    border-bottom: 1px solid #e9ecef;
-}
-
-.meta-grid {
-    display: flex;
-    gap: 1rem;
-    flex-wrap: wrap;
-}
-
-.tag-chip {
-    display: inline-flex;
-    align-items: center;
-    padding: 0.2rem 0.55rem;
-    border-radius: 999px;
-    background: #eef2ff;
-    color: #364fc7;
-    font-size: 0.8rem;
-}
-
-.state-chip {
-    display: inline-flex;
-    align-items: center;
-    padding: 0.25rem 0.6rem;
-    border-radius: 999px;
-    font-size: 0.8rem;
-    font-weight: 600;
-}
-
-.pinned-chip {
-    color: #005f8f;
-    background: #dbf5ff;
-    border: 1px solid #a8d1ff;
-}
-
-.featured-chip {
-    color: #8d7619;
-
-    border: 1px solid #ffd8a8;
-    background: #fff9db;
-}
-
-.public-chip {
-    color: #0c5460;
-    border: 1px solid #a5d8ff;
-    background: #e7f5ff;
-}
-
-.private-chip {
-    color: #5f3dc4;
-    border: 1px solid #d0bfff;
-    background: #f3f0ff;
-}
-.protected-chip {
-    color: #7f5539;
-    border: 1px solid #e0c3a6;
-    background: #fff4e6;
-}
-
-.markdown-body :deep(.task-inline-link) {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.35rem;
-    padding: 0.18rem 0.5rem;
-    border-radius: 999px;
-    border: 1px solid #c7d8ff;
-    background: #eef4ff;
-    color: #2c4ea3;
-    font-weight: 600;
-    text-decoration: none;
-}
-
-.markdown-body :deep(.task-inline-title) {
-    line-height: 1;
-}
-
-.markdown-body :deep(.task-inline-status) {
-    line-height: 1;
-    font-size: 0.72rem;
-    font-weight: 700;
-    border-radius: 999px;
-    padding: 0.16rem 0.42rem;
-    border: 1px solid color-mix(in srgb, var(--task-status-color, #5c7bd9) 60%, #ffffff 40%);
-    background: color-mix(in srgb, var(--task-status-color, #5c7bd9) 18%, #ffffff 82%);
-    color: color-mix(in srgb, var(--task-status-color, #5c7bd9) 72%, #0f172a 28%);
-}
-
-.markdown-body :deep(.task-inline-link:hover) {
-    background: #dfeaff;
-    border-color: #aac4ff;
-}
-
-.markdown-body :deep(.task-inline-link i) {
-    font-size: 0.9rem;
-}
-
-.markdown-body :deep(h1),
-.markdown-body :deep(h2),
-.markdown-body :deep(h3) {
-    margin-top: 1.5rem;
-    margin-bottom: 0.75rem;
-}
-
-.markdown-body :deep(p),
-.markdown-body :deep(li) {
-    line-height: 1.7;
-}
-
-.markdown-body :deep(pre) {
-    padding: 1rem;
-    border-radius: 0.75rem;
-    overflow-x: auto;
-}
-
-.markdown-body :deep(code) {
-    font-family: "Courier New", monospace;
-}
-
-.markdown-body :deep(blockquote) {
-    margin: 1rem 0;
-    padding: 0.75rem 1rem;
-    border-left: 4px solid #748ffc;
-    background: #f8f9ff;
-}
-
-/* Dark mode overrides */
-:root[data-bs-theme="dark"] .note-meta {
-    border-bottom-color: #3a3f4b;
-}
-
-:root[data-bs-theme="dark"] .tag-chip {
-    background: #1e2d5f;
-    color: #93b4ff;
-}
-
-:root[data-bs-theme="dark"] .pinned-chip {
-    color: #7dd3fc;
-    background: #1a3a5c;
-    border-color: #2d6a9f;
-}
-
-:root[data-bs-theme="dark"] .featured-chip {
-    color: #fbbf24;
-    background: #3a2e0a;
-    border-color: #7a5a0a;
-}
-
-:root[data-bs-theme="dark"] .public-chip {
-    color: #67e8f9;
-    background: #0c2a3a;
-    border-color: #1d6a7a;
-}
-
-:root[data-bs-theme="dark"] .private-chip {
-    color: #c4b5fd;
-    background: #2d1f5e;
-    border-color: #5b3f9a;
-}
-
-:root[data-bs-theme="dark"] .protected-chip {
-    color: #fdba74;
-    background: #3a1f0a;
-    border-color: #7a4f1a;
-}
-
-:root[data-bs-theme="dark"] .markdown-body :deep(blockquote) {
-    background: #1e2430;
-    color: #94a3b8;
-}
-
-:root[data-bs-theme="dark"] .markdown-body :deep(.task-inline-link) {
-    border-color: #35508b;
-    background: #1b2a4a;
-    color: #9ec0ff;
-}
-
-:root[data-bs-theme="dark"] .markdown-body :deep(.task-inline-link:hover) {
-    background: #22345c;
-    border-color: #4566ad;
-}
-
-:root[data-bs-theme="dark"] .markdown-body :deep(.task-inline-status) {
-    border-color: color-mix(in srgb, var(--task-status-color, #7aa2f7) 65%, #1e293b 35%);
-    background: color-mix(in srgb, var(--task-status-color, #7aa2f7) 26%, #111827 74%);
-    color: color-mix(in srgb, var(--task-status-color, #7aa2f7) 70%, #dbeafe 30%);
-}
-</style>
+<style scoped src="../assets/styles/scoped/components/NoteViewer.css"></style>
diff --git a/frontend/src/components/SearchResultsPage.vue b/frontend/src/components/SearchResultsPage.vue
index 6c01ce2..982c2cf 100644
--- a/frontend/src/components/SearchResultsPage.vue
+++ b/frontend/src/components/SearchResultsPage.vue
@@ -82,103 +82,7 @@ const goToPage = (page) => {
 };
 </script>
 
-<style scoped>
-.search-results-page {
-    max-width: 1200px;
-    margin: 0 auto;
-}
+<style scoped src="../assets/styles/scoped/components/SearchResultsPage.css"></style>
 
-.search-results-header {
-    margin-bottom: 1.5rem;
-}
 
-.search-results-header h2 {
-    margin: 0;
-    font-size: 1.5rem;
-    color: #223149;
-}
 
-.search-meta {
-    margin: 0.35rem 0 0;
-    color: #5b6f8b;
-}
-
-.pagination-bar {
-    margin-top: 1.25rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.85rem;
-}
-
-.page-indicator {
-    color: #4f637d;
-    font-weight: 600;
-}
-
-.empty-state {
-    min-height: 48vh;
-    border: 1px dashed #cfdae9;
-    border-radius: 14px;
-    background: radial-gradient(circle at 20% 20%, #f2f9ff 0%, #edf2ff 70%);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    padding: 2rem 1rem;
-}
-
-.empty-state-icon {
-    font-size: 4.2rem;
-    color: #60789a;
-    margin-bottom: 0.6rem;
-}
-
-.empty-state h3 {
-    margin: 0;
-    color: #223149;
-}
-
-.empty-state p {
-    margin: 0.6rem 0 0;
-    color: #5b6f8b;
-    max-width: 500px;
-}
-
-@media (max-width: 768px) {
-    .pagination-bar {
-        flex-direction: column;
-    }
-}
-
-/* Dark mode overrides */
-:root[data-bs-theme="dark"] .search-results-header h2 {
-    color: #e2e8f0;
-}
-
-:root[data-bs-theme="dark"] .search-meta {
-    color: #94a3b8;
-}
-
-:root[data-bs-theme="dark"] .page-indicator {
-    color: #94a3b8;
-}
-
-:root[data-bs-theme="dark"] .empty-state {
-    border-color: #3a3f4b;
-    background: radial-gradient(circle at 20% 20%, #1a2035 0%, #1e2430 70%);
-}
-
-:root[data-bs-theme="dark"] .empty-state h3 {
-    color: #e2e8f0;
-}
-
-:root[data-bs-theme="dark"] .empty-state p {
-    color: #94a3b8;
-}
-
-:root[data-bs-theme="dark"] .empty-state-icon {
-    color: #4a6fa5;
-}
-</style>
diff --git a/frontend/src/components/TaskBoard.vue b/frontend/src/components/TaskBoard.vue
index 51824ea..d15ad5a 100644
--- a/frontend/src/components/TaskBoard.vue
+++ b/frontend/src/components/TaskBoard.vue
@@ -488,406 +488,7 @@ const deleteStatusFromModal = () => {
 };
 </script>
 
-<style scoped>
-.task-board {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-}
+<style scoped src="../assets/styles/scoped/components/TaskBoard.css"></style>
 
-.task-board-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: 1rem;
-}
 
-.task-filters {
-    display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: 0.75rem;
-}
 
-.status-lane {
-    border: 1px solid #d9e2ec;
-    border-radius: 12px;
-    padding: 0.75rem;
-    background: linear-gradient(180deg, #fcfdff 0%, #f5f8fc 100%);
-}
-
-.lane-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 0.5rem;
-}
-
-.status-list {
-    display: flex;
-    flex-direction: column;
-    gap: 0.45rem;
-}
-
-.status-item {
-    display: flex;
-    align-items: center;
-    gap: 0.55rem;
-    padding: 0.4rem 0.45rem;
-    border-radius: 8px;
-    background: #ffffff;
-    border: 1px solid #e4e9f0;
-    cursor: grab;
-}
-
-.status-item.is-drag-over {
-    border-color: #7aa2f7;
-    background: #eef3ff;
-}
-
-.drag-handle {
-    color: #74839a;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.status-dot {
-    width: 10px;
-    height: 10px;
-    border-radius: 999px;
-}
-
-.status-name {
-    flex: 1;
-    font-weight: 600;
-}
-
-.status-actions {
-    display: inline-flex;
-    gap: 0.35rem;
-}
-
-.task-status-groups {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-}
-
-.status-group {
-    border: 1px solid #dbe4f0;
-    border-radius: 12px;
-    overflow: visible;
-    background: #fff;
-}
-
-.status-group-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    border-left: 6px solid transparent;
-    background: #f8fbff;
-    border-bottom: 1px solid #edf2f8;
-    padding: 0.65rem 0.85rem;
-}
-
-.status-group-title-wrap {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
-}
-
-.status-group-title {
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.02em;
-}
-
-.status-group-dot {
-    width: 10px;
-    height: 10px;
-    border-radius: 999px;
-}
-
-.status-group-count {
-    color: #5f6f87;
-    font-weight: 600;
-}
-
-.status-empty {
-    padding: 0.75rem 0.85rem;
-    color: #7a8799;
-    font-size: 0.9rem;
-}
-
-.task-tree-row {
-    border-bottom: 1px solid #edf2f8;
-}
-
-.task-tree-row:last-child {
-    border-bottom: 0;
-}
-
-.task-tree-row.level-1 .task-row {
-    padding-left: 2.1rem;
-}
-
-.task-tree-row.level-2 .task-row {
-    padding-left: 3.5rem;
-}
-
-.task-row {
-    width: 100%;
-    display: grid;
-    grid-template-columns: 28px 1fr auto;
-    gap: 0.65rem;
-    align-items: center;
-    border: 0;
-    background: #fff;
-    text-align: left;
-    padding: 0.7rem 0.85rem;
-}
-
-.task-row:hover {
-    background: #f4f8ff;
-}
-
-.status-group-header {
-    border-top-left-radius: 12px;
-    border-top-right-radius: 12px;
-}
-
-.status-group > .task-tree-row:last-child .task-row,
-.status-group > .task-tree-row:last-child > div > .task-tree-row:last-child .task-row,
-.status-group > .task-tree-row:last-child > div > .task-tree-row:last-child > div > .task-tree-row:last-child .task-row {
-    border-bottom-left-radius: 12px;
-    border-bottom-right-radius: 12px;
-}
-
-.tree-toggle {
-    width: 1.25rem;
-    color: #5f6f87;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border: 0;
-    background: transparent;
-    padding: 0;
-}
-
-.task-main {
-    display: flex;
-    flex-direction: column;
-    min-width: 0;
-}
-
-.task-main strong,
-.task-main small {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.task-status-menu {
-    position: relative;
-    display: inline-flex;
-}
-
-.status-trigger {
-    width: 28px;
-    height: 28px;
-    border: 0;
-    background: transparent;
-    border-radius: 999px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-}
-
-.status-trigger:hover {
-    background: #eef3f9;
-}
-
-.status-trigger-dot {
-    width: 14px;
-    height: 14px;
-    border: 2px solid #fff;
-    box-shadow: 0 0 0 1px rgba(67, 81, 98, 0.25);
-    border-radius: 999px;
-}
-
-.status-popup {
-    position: absolute;
-    right: 0;
-    top: calc(100% + 0.3rem);
-    min-width: 190px;
-    background: #151a22;
-    border: 1px solid #2a3343;
-    border-radius: 10px;
-    box-shadow: 0 12px 28px rgba(5, 9, 15, 0.35);
-    padding: 0.35rem;
-    z-index: 40;
-}
-
-.status-option {
-    width: 100%;
-    border: 0;
-    border-radius: 8px;
-    background: transparent;
-    color: #e8edf5;
-    display: grid;
-    grid-template-columns: 14px 1fr auto;
-    align-items: center;
-    gap: 0.55rem;
-    padding: 0.45rem 0.5rem;
-    text-align: left;
-}
-
-.status-option:hover,
-.status-option.selected {
-    background: rgba(255, 255, 255, 0.09);
-}
-
-.status-option-dot {
-    width: 14px;
-    height: 14px;
-    border-radius: 999px;
-    border: 2px solid;
-    background: transparent;
-}
-
-.status-option-label {
-    font-size: 0.86rem;
-    letter-spacing: 0.02em;
-    text-transform: uppercase;
-    font-weight: 600;
-}
-
-.status-option-check {
-    color: #e8edf5;
-    font-size: 0.95rem;
-}
-
-.empty-state {
-    padding: 1rem;
-    color: #6c757d;
-}
-
-.status-color-row {
-    display: grid;
-    grid-template-columns: auto 1fr;
-    gap: 0.5rem;
-    align-items: center;
-}
-
-.danger-zone {
-    border: 1px solid #f3b5b5;
-    border-radius: 0.75rem;
-    background: #fff5f5;
-    padding: 0.75rem;
-}
-
-.danger-zone-title {
-    color: #9f1c1c;
-    margin: 0;
-    font-weight: 700;
-}
-
-.danger-zone-copy {
-    color: #7a2727;
-    font-size: 0.9rem;
-}
-
-@media (max-width: 900px) {
-    .task-filters {
-        grid-template-columns: 1fr;
-    }
-
-    .task-row {
-        grid-template-columns: 24px minmax(0, 1fr) auto;
-        gap: 0.5rem;
-    }
-
-    .status-popup {
-        right: -0.2rem;
-        min-width: 170px;
-    }
-}
-
-/* ── Dark mode ── */
-:root[data-bs-theme="dark"] .status-lane {
-    background: linear-gradient(180deg, #1e2330 0%, #1a1d27 100%);
-    border-color: #3a3f4b;
-}
-
-:root[data-bs-theme="dark"] .status-item {
-    background: #252b38;
-    border-color: #3a3f4b;
-    color: #c8d3e6;
-}
-
-:root[data-bs-theme="dark"] .status-item.is-drag-over {
-    border-color: #7aa2f7;
-    background: #1e2d4a;
-}
-
-:root[data-bs-theme="dark"] .drag-handle {
-    color: #5f6f87;
-}
-
-:root[data-bs-theme="dark"] .status-group {
-    background: #1e2230;
-    border-color: #3a3f4b;
-}
-
-:root[data-bs-theme="dark"] .status-group-header {
-    background: #232840;
-    border-bottom-color: #3a3f4b;
-}
-
-:root[data-bs-theme="dark"] .status-group-title {
-    color: #c8d3e6;
-}
-
-:root[data-bs-theme="dark"] .status-group-count {
-    color: #7a8fa8;
-}
-
-:root[data-bs-theme="dark"] .status-empty {
-    color: #5f6f87;
-}
-
-:root[data-bs-theme="dark"] .task-tree-row {
-    border-bottom-color: #2e3444;
-}
-
-:root[data-bs-theme="dark"] .task-row {
-    background: #1e2230;
-    color: #c8d3e6;
-}
-
-:root[data-bs-theme="dark"] .task-row:hover {
-    background: #252d40;
-}
-
-:root[data-bs-theme="dark"] .tree-toggle {
-    color: #7a8fa8;
-}
-
-:root[data-bs-theme="dark"] .task-main small {
-    color: #7a8fa8;
-}
-
-:root[data-bs-theme="dark"] .status-trigger:hover {
-    background: #2e3448;
-}
-
-:root[data-bs-theme="dark"] .status-trigger-dot {
-    border-color: #1e2230;
-    box-shadow: 0 0 0 1px rgba(180, 195, 220, 0.2);
-}
-
-:root[data-bs-theme="dark"] .empty-state {
-    color: #7a8fa8;
-}
-</style>
diff --git a/frontend/src/components/TaskDetailModal.vue b/frontend/src/components/TaskDetailModal.vue
index 5d30aeb..97da513 100644
--- a/frontend/src/components/TaskDetailModal.vue
+++ b/frontend/src/components/TaskDetailModal.vue
@@ -144,64 +144,7 @@ const saveTask = () => {
 };
 </script>
 
-<style scoped>
-.status-progress {
-    display: flex;
-    flex-direction: column;
-    gap: 0.45rem;
-}
+<style scoped src="../assets/styles/scoped/components/TaskDetailModal.css"></style>
 
-.progress-step {
-    display: flex;
-    align-items: center;
-    gap: 0.45rem;
-    color: #627086;
-}
 
-.progress-step.current {
-    color: #0f172a;
-    font-weight: 700;
-}
 
-.progress-step.done {
-    color: #1f7a4d;
-}
-
-.dot {
-    width: 12px;
-    height: 12px;
-    border-radius: 999px;
-    border: 2px solid;
-}
-
-.subtask-row {
-    width: 100%;
-    margin-top: 0.35rem;
-    border: 1px solid #dbe4f0;
-    border-radius: 8px;
-    background: #f8fbff;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0.35rem 0.5rem;
-}
-
-/* ── Dark mode ── */
-:root[data-bs-theme="dark"] .progress-step {
-    color: #7a8fa8;
-}
-
-:root[data-bs-theme="dark"] .progress-step.current {
-    color: #e2e8f0;
-}
-
-:root[data-bs-theme="dark"] .progress-step.done {
-    color: #4ade80;
-}
-
-:root[data-bs-theme="dark"] .subtask-row {
-    background: #252b38;
-    border-color: #3a3f4b;
-    color: #c8d3e6;
-}
-</style>
diff --git a/frontend/src/pages/Admin.vue b/frontend/src/pages/Admin.vue
index ebebb80..19a2af4 100644
--- a/frontend/src/pages/Admin.vue
+++ b/frontend/src/pages/Admin.vue
@@ -718,237 +718,4 @@ onMounted(async () => {
 });
 </script>
 
-<style scoped>
-.admin-page {
-    width: 100%;
-    max-width: none;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    min-height: 0;
-    overflow: hidden;
-}
-
-.admin-topbar {
-    flex-wrap: wrap;
-    padding: 1rem;
-    border-bottom: 1px solid #dee2e6;
-}
-
-.admin-shell {
-    display: flex;
-    flex: 1;
-    min-height: 0;
-    gap: 0;
-    overflow: hidden;
-}
-
-.admin-sidebar {
-    width: 280px;
-    flex-shrink: 0;
-    background: #f8f9fa;
-    border-right: 1px solid #dee2e6;
-}
-
-.admin-sidebar-inner {
-    padding: 0.75rem;
-}
-
-.admin-nav .nav-link {
-    border-radius: 0.6rem;
-    color: #495057;
-    font-weight: 500;
-}
-
-.admin-nav .nav-link:hover {
-    background: #eef2f7;
-    color: #212529;
-}
-
-.admin-nav .nav-link.active {
-    background: #212529;
-    color: #fff;
-}
-
-.admin-content {
-    flex: 1;
-    min-width: 0;
-    min-height: 0;
-    overflow-y: auto;
-    padding: 1rem;
-}
-
-.admin-section {
-    border-radius: 12px;
-}
-
-.users-list .list-group-item {
-    padding: 1rem;
-}
-
-.user-row {
-    display: flex;
-    gap: 1rem;
-    align-items: center;
-    justify-content: space-between;
-}
-
-.user-row-main {
-    flex: 1;
-    min-width: 0;
-}
-
-.user-row-actions {
-    flex-shrink: 0;
-}
-
-.user-actions-stack {
-    flex-wrap: wrap;
-    justify-content: flex-end;
-}
-
-.user-name-line {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    margin-bottom: 0.6rem;
-}
-
-.user-name {
-    font-size: 1.1rem;
-}
-
-.user-meta-grid {
-    display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: 0.75rem 1.25rem;
-}
-
-.user-meta-label {
-    font-size: 0.75rem;
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
-    color: #6c757d;
-    margin-bottom: 0.1rem;
-}
-
-.user-meta-value {
-    color: #495057;
-    overflow-wrap: anywhere;
-}
-
-.user-meta-item-groups {
-    grid-column: span 1;
-}
-
-@media (max-width: 991.98px) {
-    .user-meta-grid {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-
-    .user-meta-item-groups {
-        grid-column: 1 / -1;
-    }
-}
-
-@media (max-width: 767.98px) {
-    .admin-shell {
-        display: block;
-        min-height: auto;
-    }
-
-    .admin-topbar {
-        padding: 0.75rem;
-    }
-
-    .admin-content {
-        padding: 0.75rem;
-    }
-
-    .admin-sidebar-backdrop {
-        position: fixed;
-        left: 0;
-        right: 0;
-        top: 0;
-        bottom: 0;
-        background: rgba(0, 0, 0, 0.45);
-        z-index: 1400;
-    }
-
-    .admin-sidebar {
-        position: fixed;
-        top: 0;
-        left: 0;
-        bottom: 0;
-        width: min(82vw, 320px);
-        z-index: 1410;
-        transform: translateX(-100%);
-        transition: transform 0.25s ease;
-        border-right: 1px solid #dee2e6;
-    }
-
-    .admin-sidebar-inner {
-        padding: 0.75rem;
-    }
-
-    .admin-sidebar.open {
-        transform: translateX(0);
-    }
-
-    .user-row {
-        flex-direction: column;
-        align-items: stretch;
-    }
-
-    .user-row-actions {
-        width: 100%;
-    }
-
-    .user-row-actions .btn {
-        width: 100%;
-    }
-
-    .user-actions-stack {
-        flex-direction: column;
-    }
-
-    .user-meta-grid {
-        grid-template-columns: 1fr;
-        gap: 0.65rem;
-    }
-}
-
-/* Dark mode overrides */
-:root[data-bs-theme="dark"] .admin-topbar {
-    border-bottom-color: #3a3f4b;
-}
-
-:root[data-bs-theme="dark"] .admin-sidebar {
-    background: #21252e;
-    border-right-color: #3a3f4b;
-}
-
-:root[data-bs-theme="dark"] .admin-nav .nav-link {
-    color: #94a3b8;
-}
-
-:root[data-bs-theme="dark"] .admin-nav .nav-link:hover {
-    background: #2d3748;
-    color: #e2e8f0;
-}
-
-:root[data-bs-theme="dark"] .admin-nav .nav-link.active {
-    background: #e2e8f0;
-    color: #1a1d23;
-}
-
-:root[data-bs-theme="dark"] .user-meta-value {
-    color: #94a3b8;
-}
-
-:root[data-bs-theme="dark"] .admin-section {
-    background-color: #21252e;
-}
-</style>
+<style scoped src="../assets/styles/scoped/pages/Admin.css"></style>
diff --git a/frontend/src/pages/Login.vue b/frontend/src/pages/Login.vue
index 89e14ca..abaf96c 100644
--- a/frontend/src/pages/Login.vue
+++ b/frontend/src/pages/Login.vue
@@ -142,119 +142,7 @@ onMounted(async () => {
 });
 </script>
 
-<style scoped>
-.login-page {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    min-height: 100vh;
-    padding: 1.25rem;
-    background: radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.2), transparent 45%), linear-gradient(135deg, #3554d1 0%, #4f46a5 100%);
-}
+<style scoped src="../assets/styles/scoped/pages/Login.css"></style>
 
-.auth-container {
-    width: 100%;
-    max-width: 460px;
-}
 
-.login-card {
-    background: #fff;
-    padding: 2rem;
-    border-radius: 18px;
-    box-shadow: 0 22px 48px rgba(16, 24, 40, 0.22);
-    width: 100%;
-}
 
-.brand-block {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.75rem;
-    margin-bottom: 1.25rem;
-}
-
-.brand-mark {
-    width: 42px;
-    height: 42px;
-    display: grid;
-    place-items: center;
-    border-radius: 12px;
-    background: rgba(53, 84, 209, 0.12);
-    color: #2f4ac1;
-    font-size: 1.35rem;
-}
-
-.brand-title {
-    margin: 0;
-    font-size: 2.05rem;
-    font-weight: 700;
-    letter-spacing: 0.01em;
-    color: #2f3237;
-}
-
-.auth-title {
-    text-align: center;
-    font-size: 2.1rem;
-    font-weight: 600;
-    margin-bottom: 1.5rem;
-    color: #2f3237;
-}
-
-.form-control {
-    border-radius: 0.65rem;
-    min-height: 48px;
-    border-color: #d6dbe4;
-}
-
-.auth-submit {
-    min-height: 48px;
-    font-weight: 600;
-}
-
-.auth-provider-btn {
-    min-height: 48px;
-    border-radius: 0.65rem;
-}
-
-.oauth-divider {
-    display: flex;
-    align-items: center;
-    color: #6c757d;
-    font-size: 0.9rem;
-}
-
-.oauth-divider::before,
-.oauth-divider::after {
-    content: "";
-    flex: 1;
-    border-bottom: 1px solid #dee2e6;
-}
-
-.oauth-divider span {
-    padding: 0 0.75rem;
-}
-
-.auth-switch-link {
-    color: #4b5565;
-}
-
-@media (max-width: 576px) {
-    .login-page {
-        padding: 0.85rem;
-    }
-
-    .login-card {
-        border-radius: 14px;
-        padding: 1.35rem;
-    }
-
-    .brand-title {
-        font-size: 1.8rem;
-    }
-
-    .auth-title {
-        font-size: 1.85rem;
-    }
-}
-</style>
diff --git a/frontend/src/pages/PublicSpace.vue b/frontend/src/pages/PublicSpace.vue
index 1ea5541..fc781cf 100644
--- a/frontend/src/pages/PublicSpace.vue
+++ b/frontend/src/pages/PublicSpace.vue
@@ -322,74 +322,7 @@ watch(
 );
 </script>
 
-<style scoped>
-.public-layout {
-    display: flex;
-    flex-direction: column;
-    min-height: 100vh;
-}
+<style scoped src="../assets/styles/scoped/pages/PublicSpace.css"></style>
 
-.public-body {
-    flex: 1;
-    overflow: hidden;
-    position: relative;
-}
 
-.public-sidebar {
-    width: 280px;
-    overflow-y: auto;
-    flex-shrink: 0;
-}
 
-.note-item {
-    border-radius: 6px;
-    padding: 0.5rem 0.75rem;
-    background: transparent;
-    border: 1px solid transparent;
-    transition: background 0.15s;
-}
-
-.note-item:hover {
-    background: #e9ecef;
-}
-
-.note-item.active {
-    background: #dbe4ff;
-    border-color: #748ffc;
-    color: #364fc7;
-}
-
-.note-item.is-featured {
-    background: #fff4e6;
-    border-color: #ffd8a8;
-}
-
-.note-item.is-featured:hover {
-    background: #ffe8cc;
-}
-
-@media (max-width: 768px) {
-    .public-sidebar-backdrop {
-        position: fixed;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background-color: rgba(0, 0, 0, 0.5);
-        z-index: 1090;
-    }
-
-    .public-sidebar {
-        position: fixed;
-        left: 0;
-        bottom: 0;
-        z-index: 1095;
-        transform: translateX(-100%);
-        transition: transform 0.3s ease-in-out;
-        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
-    }
-
-    .public-sidebar.open {
-        transform: translateX(0);
-    }
-}
-</style>
diff --git a/frontend/src/pages/Register.vue b/frontend/src/pages/Register.vue
index fb4b779..acce67e 100644
--- a/frontend/src/pages/Register.vue
+++ b/frontend/src/pages/Register.vue
@@ -110,96 +110,7 @@ onMounted(async () => {
 });
 </script>
 
-<style scoped>
-.register-page {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    min-height: 100vh;
-    padding: 1.25rem;
-    background: radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.2), transparent 45%), linear-gradient(135deg, #3554d1 0%, #4f46a5 100%);
-}
+<style scoped src="../assets/styles/scoped/pages/Register.css"></style>
 
-.auth-container {
-    width: 100%;
-    max-width: 560px;
-}
 
-.register-card {
-    background: #fff;
-    padding: 2rem;
-    border-radius: 18px;
-    box-shadow: 0 22px 48px rgba(16, 24, 40, 0.22);
-    width: 100%;
-}
 
-.brand-block {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.75rem;
-    margin-bottom: 1.25rem;
-}
-
-.brand-mark {
-    width: 42px;
-    height: 42px;
-    display: grid;
-    place-items: center;
-    border-radius: 12px;
-    background: rgba(53, 84, 209, 0.12);
-    color: #2f4ac1;
-    font-size: 1.35rem;
-}
-
-.brand-title {
-    margin: 0;
-    font-size: 2.05rem;
-    font-weight: 700;
-    letter-spacing: 0.01em;
-    color: #2f3237;
-}
-
-.auth-title {
-    text-align: center;
-    font-size: 2.1rem;
-    font-weight: 600;
-    margin-bottom: 1.5rem;
-    color: #2f3237;
-}
-
-.form-control {
-    border-radius: 0.65rem;
-    min-height: 48px;
-    border-color: #d6dbe4;
-}
-
-.auth-submit {
-    min-height: 48px;
-    font-weight: 600;
-}
-
-.auth-switch-link {
-    color: #4b5565;
-}
-
-@media (max-width: 576px) {
-    .register-page {
-        padding: 0.85rem;
-    }
-
-    .register-card {
-        border-radius: 14px;
-        padding: 1.35rem;
-    }
-
-    .brand-title {
-        font-size: 1.8rem;
-    }
-
-    .auth-title {
-        font-size: 1.85rem;
-    }
-}
-</style>