feat(vocab): update VocabCourseView styles for improved UI and accessibility

frontend/src/components/AppNavigation.vue

@@ -225,6 +225,8 @@ import apiClient from '@/utils/axios.js';
 import { EventBus } from '@/utils/eventBus.js';
 import { showInfo } from '@/utils/feedback.js';
 
+const MOBILE_NAV_BREAKPOINT = 1180;
+
 export default {
   name: 'AppNavigation',
   data() {
@@ -362,7 +364,7 @@ export default {
     },
 
     updateViewportState() {
-      this.isMobileNav = window.innerWidth <= 960;
+      this.isMobileNav = window.innerWidth <= MOBILE_NAV_BREAKPOINT;
       if (!this.isMobileNav) {
         this.mobileMenuOpen = false;
         this.expandedMainKey = null;
@@ -1135,7 +1137,7 @@ a {
   margin-right: -4px;
 }
 
-@media (max-width: 960px) {
+@media (max-width: 1180px) {
   .app-navigation {
     position: sticky;
     top: 0;

frontend/src/views/social/VocabCourseView.vue

@@ -1345,12 +1345,17 @@ export default {
   padding: 12px 14px;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
-  background: #fff;
+  background: var(--color-surface-strong);
+  color: var(--color-text-primary);
   text-align: left;
   cursor: pointer;
+  transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
 }
 
 .course-flow-lesson strong {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  color: var(--color-text-primary);
   font-size: 0.95rem;
 }
 
@@ -1360,6 +1365,17 @@ export default {
   white-space: nowrap;
 }
 
+.course-flow-lesson:hover {
+  background: var(--color-primary-soft);
+  border-color: rgba(61, 139, 87, 0.38);
+  box-shadow: 0 4px 12px rgba(42, 90, 56, 0.08);
+}
+
+.course-flow-lesson:focus-visible {
+  outline: 3px solid rgba(120, 195, 138, 0.42);
+  outline-offset: 2px;
+}
+
 .course-flow-card__empty {
   margin: 0;
   color: var(--color-text-secondary);