frontend/eslint.config.ts

@@ -3,6 +3,7 @@ import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescri
 import pluginVue from 'eslint-plugin-vue'
 import pluginOxlint from 'eslint-plugin-oxlint'
 import skipFormatting from 'eslint-config-prettier/flat'
+import vueScopedCss from 'eslint-plugin-vue-scoped-css'
 
 // To allow more languages other than `ts` in `.vue` files, uncomment the following lines:
 // import { configureVueProject } from '@vue/eslint-config-typescript'
@@ -19,6 +20,7 @@ export default defineConfigWithVueTs(
 
   ...pluginVue.configs['flat/essential'],
   vueTsConfigs.recommended,
+  ...vueScopedCss.configs.recommended,
 
   ...pluginOxlint.buildFromOxlintConfigFile('.oxlintrc.json'),
 

frontend/package.json

@@ -30,6 +30,7 @@
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-oxlint": "~1.60.0",
     "eslint-plugin-vue": "~10.8.0",
+    "eslint-plugin-vue-scoped-css": "^3.1.0",
     "jiti": "^2.6.1",
     "npm-run-all2": "^8.0.4",
     "oxlint": "~1.60.0",

frontend/pnpm-lock.yaml

@@ -45,6 +45,9 @@ importers:
       eslint-plugin-vue:
         specifier: ~10.8.0
         version: 10.8.0(@typescript-eslint/parser@8.59.2(eslint@10.3.0(jiti@2.7.0))(typescript@6.0.3))(eslint@10.3.0(jiti@2.7.0))(vue-eslint-parser@10.4.0(eslint@10.3.0(jiti@2.7.0)))
+      eslint-plugin-vue-scoped-css:
+        specifier: ^3.1.0
+        version: 3.1.0(eslint@10.3.0(jiti@2.7.0))(vue-eslint-parser@10.4.0(eslint@10.3.0(jiti@2.7.0)))
       jiti:
         specifier: ^2.6.1
         version: 2.7.0
@@ -863,6 +866,9 @@ packages:
   error-stack-parser-es@1.0.5:
     resolution: {integrity: sha512-5qucVt2XcuGMcEGgWI7i+yZpmpByQ8J1lHhcL7PwqCwu9FPP3VUXzT4ltHe5i2z9dePwEHcDVOAfSnHsOlCXRA==}
 
+  es-toolkit@1.46.1:
+    resolution: {integrity: sha512-5eNtXOs3tbfxXOj04tjjseeWkRWaoCjdEI+96DgwzZoe6c9juL49pXlzAFTI72aWC9Y8p7168g6XIKjh7k6pyQ==}
+
   escalade@3.2.0:
     resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
     engines: {node: '>=6'}
@@ -882,6 +888,20 @@ packages:
     peerDependencies:
       oxlint: ~1.60.0
 
+  eslint-plugin-vue-scoped-css@3.1.0:
+    resolution: {integrity: sha512-R9XLrIZaP6QGz9b4kO2K4+lP4NcO2TKcw71zBtIYCoqqTk5ja1ySruYAllBT2LPIJVQ4NZaB2IFSvLjLEpYqQA==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+    peerDependencies:
+      eslint: '>=9.38.0'
+      postcss-scss: ^4.0.3
+      postcss-styl: ^0.12.0
+      vue-eslint-parser: '>=7.1.0'
+    peerDependenciesMeta:
+      postcss-scss:
+        optional: true
+      postcss-styl:
+        optional: true
+
   eslint-plugin-vue@10.8.0:
     resolution: {integrity: sha512-f1J/tcbnrpgC8suPN5AtdJ5MQjuXbSU9pGRSSYAuF3SHoiYCOdEX6O22pLaRyLHXvDcOe+O5ENgc1owQ587agA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1327,6 +1347,12 @@ packages:
   pkg-types@2.3.1:
     resolution: {integrity: sha512-y+ichcgc2LrADuhLNAx8DFjVfgz91pRxfZdI3UDhxHvcVEZsenLO+7XaU5vOp0u/7V/wZ+plyuQxtrDlZJ+yeg==}
 
+  postcss-safe-parser@7.0.1:
+    resolution: {integrity: sha512-0AioNCJZ2DPYz5ABT6bddIqlhgwhpHZ/l65YAYo0BCIn0xiDpsnTHz0gnoTGk0OXZW0JRs+cDwL8u/teRdz+8A==}
+    engines: {node: '>=18.0'}
+    peerDependencies:
+      postcss: ^8.4.31
+
   postcss-selector-parser@7.1.1:
     resolution: {integrity: sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==}
     engines: {node: '>=4'}
@@ -2430,6 +2456,8 @@ snapshots:
 
   error-stack-parser-es@1.0.5: {}
 
+  es-toolkit@1.46.1: {}
+
   escalade@3.2.0: {}
 
   escape-string-regexp@4.0.0: {}
@@ -2443,6 +2471,16 @@ snapshots:
       jsonc-parser: 3.3.1
       oxlint: 1.60.0
 
+  eslint-plugin-vue-scoped-css@3.1.0(eslint@10.3.0(jiti@2.7.0))(vue-eslint-parser@10.4.0(eslint@10.3.0(jiti@2.7.0))):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.1(eslint@10.3.0(jiti@2.7.0))
+      es-toolkit: 1.46.1
+      eslint: 10.3.0(jiti@2.7.0)
+      postcss: 8.5.14
+      postcss-safe-parser: 7.0.1(postcss@8.5.14)
+      postcss-selector-parser: 7.1.1
+      vue-eslint-parser: 10.4.0(eslint@10.3.0(jiti@2.7.0))
+
   eslint-plugin-vue@10.8.0(@typescript-eslint/parser@8.59.2(eslint@10.3.0(jiti@2.7.0))(typescript@6.0.3))(eslint@10.3.0(jiti@2.7.0))(vue-eslint-parser@10.4.0(eslint@10.3.0(jiti@2.7.0))):
     dependencies:
       '@eslint-community/eslint-utils': 4.9.1(eslint@10.3.0(jiti@2.7.0))
@@ -2851,6 +2889,10 @@ snapshots:
       exsolve: 1.0.8
       pathe: 2.0.3
 
+  postcss-safe-parser@7.0.1(postcss@8.5.14):
+    dependencies:
+      postcss: 8.5.14
+
   postcss-selector-parser@7.1.1:
     dependencies:
       cssesc: 3.0.0

frontend/src/components/layout/AppTopbar.vue

@@ -297,9 +297,6 @@ onBeforeUnmount(() => {
   flex-shrink: 0;
   cursor: pointer;
 }
-.brand-icon {
-  color: var(--color-text);
-}
 .brand-name {
   font-size: 20px;
   font-weight: 800;

frontend/src/components/ui/CoinChip.vue

@@ -46,8 +46,4 @@ defineEmits<{ click: [] }>()
   font-size: 14px;
   color: var(--color-coin-chip-text);
 }
-.coin-label {
-  font-size: 12px;
-  color: var(--color-coin-chip-label);
-}
 </style>

frontend/src/views/AboutView.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 
-<style>
+<style scoped>
 @media (min-width: 1024px) {
   .about {
     min-height: 100vh;

frontend/src/views/admin/AdminDashboardView.vue

@@ -80,56 +80,6 @@ onMounted(async () => {
   grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
   gap: 16px;
 }
-.bars {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  margin-top: 10px;
-}
-.bar-row {
-  display: grid;
-  grid-template-columns: 1fr 2fr auto;
-  align-items: center;
-  gap: 8px;
-  font-size: 13px;
-}
-.bar {
-  background: var(--color-black-a08);
-  border-radius: 6px;
-  height: 8px;
-  overflow: hidden;
-}
-.bar-fill {
-  background: var(--gradient-progress-success);
-  height: 100%;
-}
-.percent {
-  color: var(--color-text-secondary);
-  font-size: 12px;
-}
-.metric {
-  margin-bottom: 10px;
-  color: var(--color-text-secondary);
-}
-.activity {
-  display: flex;
-  gap: 10px;
-  margin-top: 12px;
-  align-items: flex-end;
-}
-.day {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 4px;
-  font-size: 11px;
-  color: var(--color-text-secondary);
-}
-.day-bar {
-  width: 16px;
-  background: var(--gradient-bar-neutral-vertical);
-  border-radius: 6px 6px 0 0;
-}
 .sync-meta {
   font-size: 12px;
   color: var(--color-text-secondary);

frontend/src/views/auth/LoginView.vue

@@ -199,20 +199,6 @@ async function loginViaYufu() {
   gap: 16px;
 }
 
-.brand-logo {
-  width: 56px;
-  height: 56px;
-  border-radius: var(--radius-md);
-  background: var(--color-white);
-  box-shadow: var(--shadow-card);
-  border: 1px solid var(--color-border-glass);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--color-primary-dark);
-  flex-shrink: 0;
-}
-
 .brand-eyebrow {
   margin: 0 0 6px;
   font-size: 11px;
@@ -342,48 +328,6 @@ async function loginViaYufu() {
   overflow: hidden;
 }
 
-.login-card-accent {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 4px;
-  background: var(--gradient-brand);
-}
-
-.login-card-header {
-  text-align: center;
-}
-
-.login-badge {
-  width: 52px;
-  height: 52px;
-  margin: 0 auto 16px;
-  border-radius: 16px;
-  background: var(--gradient-nav-active);
-  border: 1px solid var(--color-primary-a25);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--color-primary-border);
-  box-shadow: 0 8px 20px var(--color-primary-a12);
-}
-
-.login-title {
-  margin: 0 0 8px;
-  font-size: 28px;
-  font-weight: 800;
-  color: var(--color-text);
-  letter-spacing: -0.02em;
-}
-
-.login-subtitle {
-  margin: 0;
-  font-size: 14px;
-  line-height: 1.55;
-  color: var(--login-text-muted);
-}
-
 .login-actions {
   display: flex;
   flex-direction: column;
@@ -483,24 +427,6 @@ async function loginViaYufu() {
   justify-content: flex-start;
 }
 
-.footer-uni {
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
-  background: var(--gradient-brand);
-  color: var(--color-white);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 4px 12px var(--color-primary-a25);
-}
-
-.footer-uni-label {
-  font-weight: 700;
-  color: var(--color-text);
-  letter-spacing: 0.04em;
-}
-
 .footer-center {
   justify-content: center;
   gap: 20px;

frontend/src/views/student/DashboardView.vue

@@ -262,11 +262,6 @@ async function registerLecture(id: string) {
   gap: 10px;
   align-items: flex-start;
 }
-.stats-row {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-  gap: 16px;
-}
 .xp-section {
   display: flex;
   flex-direction: column;
@@ -294,10 +289,6 @@ async function registerLecture(id: string) {
 .title-icon {
   color: var(--color-text);
 }
-.inline-icon {
-  color: var(--color-text);
-  vertical-align: middle;
-}
 .cards-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

frontend/src/views/teacher/TeacherAnalyticsView.vue

@@ -177,9 +177,4 @@ watch(() => auth.user?.id, fetchTeacherAnalytics)
   border-radius: var(--radius-sm);
   font-size: 13px;
 }
-.top-list {
-  padding-left: 18px;
-  color: var(--color-text-secondary);
-  font-size: 13px;
-}
 </style>

frontend/src/views/teacher/TeacherDashboardView.vue

@@ -104,15 +104,6 @@ watch(() => auth.user?.id, fetchTeacherLectures)
   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
   gap: 16px;
 }
-.visibility {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-.visibility-meta {
-  font-size: 13px;
-  color: var(--color-text-secondary);
-}
 .upcoming {
   display: flex;
   flex-direction: column;