diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index ef36bc1..9176737 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -65,18 +65,22 @@ const handleLogout = async () => {
 <style scoped>
 .app-layout {
   min-height: 100vh;
+  padding: 0 24px;
 }
 
 .app-header {
   display: flex;
   align-items: center;
   gap: 24px;
-  padding: 16px 32px;
+  padding: 16px 28px;
+  margin: 16px 0 0;
   background: rgba(255, 255, 255, 0.92);
-  backdrop-filter: blur(12px);
-  border-bottom: 1px solid rgba(15, 76, 92, 0.12);
+  backdrop-filter: blur(14px);
+  border: 1px solid rgba(124, 58, 237, 0.18);
+  border-radius: 18px;
+  box-shadow: 0 18px 36px rgba(44, 16, 91, 0.12);
   position: sticky;
-  top: 0;
+  top: 12px;
   z-index: 20;
 }
 
@@ -90,11 +94,12 @@ const handleLogout = async () => {
   font-size: 22px;
   font-weight: 700;
   letter-spacing: 2px;
+  font-family: 'Noto Serif TC', 'Noto Sans TC', serif;
 }
 
 .brand-sub {
   font-size: 12px;
-  color: rgba(26, 27, 36, 0.7);
+  color: rgba(76, 29, 149, 0.75);
 }
 
 .user-block {
@@ -107,4 +112,46 @@ const handleLogout = async () => {
 .user-name {
   font-weight: 600;
 }
+
+.app-header :deep(.arco-menu) {
+  background: transparent;
+  border-bottom: none;
+}
+
+.app-header :deep(.arco-menu-horizontal .arco-menu-item) {
+  padding: 8px 16px;
+  border-radius: 12px;
+  font-weight: 600;
+  color: rgba(42, 15, 69, 0.8);
+}
+
+.app-header :deep(.arco-menu-horizontal .arco-menu-item:hover) {
+  background: rgba(124, 58, 237, 0.12);
+  color: var(--brand-ink);
+}
+
+.app-header :deep(.arco-menu-horizontal .arco-menu-selected) {
+  background: rgba(124, 58, 237, 0.18);
+  color: var(--brand-ink);
+}
+
+.app-header :deep(.arco-menu-horizontal .arco-menu-selected::after) {
+  display: none;
+}
+
+.app-header :deep(.arco-btn-primary) {
+  box-shadow: 0 10px 18px rgba(124, 58, 237, 0.2);
+}
+
+@media (max-width: 768px) {
+  .app-layout {
+    padding: 0 16px;
+  }
+
+  .app-header {
+    flex-wrap: wrap;
+    gap: 12px;
+    padding: 14px 16px;
+  }
+}
 </style>
diff --git a/frontend/src/styles/base.css b/frontend/src/styles/base.css
index ccdd6aa..6a8ab1e 100644
--- a/frontend/src/styles/base.css
+++ b/frontend/src/styles/base.css
@@ -1,12 +1,23 @@
-@import url('https://fonts.googleapis.com/css2?family=ZCOOL+XiaoWei&family=Noto+Serif+SC:wght@400;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700&family=Noto+Serif+TC:wght@400;500;700&display=swap');
 
 :root {
   color-scheme: light;
-  --brand-ink: #1a1b24;
-  --brand-ember: #e24a2d;
-  --brand-ocean: #0f4c5c;
-  --brand-sand: #f6efe6;
-  --brand-mist: #e5eff1;
+  --brand-ink: #2a0f45;
+  --brand-ink-soft: #4c1d95;
+  --brand-ember: #f97316;
+  --brand-ocean: #7c3aed;
+  --brand-sand: #faf5ff;
+  --brand-mist: #efe9ff;
+  --brand-surface: #ffffff;
+  --brand-line: rgba(124, 58, 237, 0.16);
+  --radius-lg: 20px;
+  --radius-md: 14px;
+  --shadow-soft: 0 24px 44px rgba(44, 16, 91, 0.16);
+  --shadow-card: 0 14px 32px rgba(44, 16, 91, 0.12);
+  --color-primary-4: #a78bfa;
+  --color-primary-5: #8b5cf6;
+  --color-primary-6: #7c3aed;
+  --color-primary-7: #6d28d9;
 }
 
 * {
@@ -15,12 +26,14 @@
 
 body {
   margin: 0;
-  font-family: 'Noto Serif SC', 'ZCOOL XiaoWei', serif;
+  font-family: 'Noto Sans TC', 'Noto Serif TC', sans-serif;
   color: var(--brand-ink);
+  line-height: 1.6;
   background:
-    radial-gradient(1200px circle at 10% 10%, rgba(226, 74, 45, 0.15), transparent 50%),
-    radial-gradient(900px circle at 90% 20%, rgba(15, 76, 92, 0.18), transparent 50%),
-    linear-gradient(180deg, #fffdfb 0%, #f6efe6 45%, #eef5f6 100%);
+    radial-gradient(900px circle at 6% 2%, rgba(124, 58, 237, 0.22), transparent 60%),
+    radial-gradient(900px circle at 92% 6%, rgba(249, 115, 22, 0.2), transparent 55%),
+    radial-gradient(1200px circle at 50% 110%, rgba(167, 139, 250, 0.25), transparent 60%),
+    linear-gradient(180deg, #faf5ff 0%, #fff7ed 50%, #fef3c7 100%);
   min-height: 100vh;
 }
 
@@ -31,7 +44,7 @@ body {
 .page-shell {
   max-width: 1200px;
   margin: 0 auto;
-  padding: 32px 20px 64px;
+  padding: 40px 20px 72px;
 }
 
 .section-title {
@@ -39,24 +52,45 @@ body {
   font-weight: 700;
   margin: 0 0 12px;
   letter-spacing: 1px;
+  font-family: 'Noto Serif TC', 'Noto Sans TC', serif;
 }
 
 .section-subtitle {
   margin: 0 0 24px;
-  color: rgba(26, 27, 36, 0.7);
+  color: rgba(42, 15, 69, 0.68);
 }
 
 .hero-panel {
-  background: linear-gradient(135deg, rgba(15, 76, 92, 0.9), rgba(226, 74, 45, 0.85));
+  background: linear-gradient(135deg, rgba(124, 58, 237, 0.92), rgba(249, 115, 22, 0.85));
   color: #fff;
-  border-radius: 20px;
-  padding: 28px;
-  box-shadow: 0 20px 40px rgba(26, 27, 36, 0.18);
+  border-radius: var(--radius-lg);
+  padding: 30px;
+  box-shadow: var(--shadow-soft);
+  position: relative;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.hero-panel::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(380px circle at 18% 22%, rgba(255, 255, 255, 0.22), transparent 60%),
+    radial-gradient(320px circle at 82% 18%, rgba(255, 255, 255, 0.18), transparent 60%);
+  opacity: 0.9;
+  pointer-events: none;
+}
+
+.hero-panel > * {
+  position: relative;
+  z-index: 1;
 }
 
 .hero-panel h1 {
   margin: 0 0 8px;
   font-size: 32px;
+  font-family: 'Noto Serif TC', 'Noto Sans TC', serif;
 }
 
 .hero-panel p {
@@ -67,7 +101,7 @@ body {
 .card-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 18px;
+  gap: 22px;
 }
 
 .fade-in {
@@ -85,6 +119,38 @@ body {
   }
 }
 
+a:focus-visible,
+button:focus-visible,
+.arco-btn:focus-visible,
+.arco-input:focus-visible,
+.arco-select-view:focus-visible {
+  outline: 2px solid rgba(124, 58, 237, 0.5);
+  outline-offset: 2px;
+}
 
+.arco-card {
+  border-radius: var(--radius-lg);
+}
 
+.arco-table {
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  background: rgba(255, 255, 255, 0.92);
+  box-shadow: var(--shadow-card);
+}
 
+.arco-table-th {
+  background: rgba(239, 233, 255, 0.7);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fade-in {
+    animation: none;
+  }
+}
+
+@media (max-width: 600px) {
+  .page-shell {
+    padding: 28px 16px 60px;
+  }
+}
diff --git a/frontend/src/views/ActivityDetail.vue b/frontend/src/views/ActivityDetail.vue
index 1209718..bb52791 100644
--- a/frontend/src/views/ActivityDetail.vue
+++ b/frontend/src/views/ActivityDetail.vue
@@ -101,8 +101,10 @@ onMounted(fetchDetail);
 <style scoped>
 .detail-card {
   margin-top: 16px;
-  border-radius: 20px;
+  border-radius: var(--radius-lg);
   background: rgba(255, 255, 255, 0.96);
+  border: 1px solid var(--brand-line);
+  box-shadow: var(--shadow-card);
 }
 
 .detail-header {
@@ -122,7 +124,7 @@ onMounted(fetchDetail);
 }
 
 .block-text {
-  color: rgba(26, 27, 36, 0.75);
+  color: rgba(42, 15, 69, 0.74);
   line-height: 1.8;
 }
 
@@ -134,6 +136,16 @@ onMounted(fetchDetail);
 }
 
 .hint {
-  color: rgba(26, 27, 36, 0.6);
+  color: rgba(42, 15, 69, 0.6);
+}
+
+.detail-card :deep(.arco-descriptions) {
+  background: rgba(239, 233, 255, 0.45);
+  border-radius: var(--radius-md);
+}
+
+.detail-card :deep(.arco-descriptions-item-label) {
+  color: rgba(42, 15, 69, 0.7);
+  font-weight: 600;
 }
 </style>
diff --git a/frontend/src/views/ActivityList.vue b/frontend/src/views/ActivityList.vue
index 473812c..ea989e6 100644
--- a/frontend/src/views/ActivityList.vue
+++ b/frontend/src/views/ActivityList.vue
@@ -19,7 +19,7 @@
           <div class="card-title">{{ item.title }}</div>
         </template>
         <template #extra>
-          <a-tag color="arcoblue">{{ item.term }}</a-tag>
+        <a-tag color="purple">{{ item.term }}</a-tag>
         </template>
         <div class="card-body">
           <div class="summary">{{ item.summary || '暂无简介' }}</div>
@@ -85,11 +85,13 @@ onMounted(fetchList);
 <style scoped>
 .search-card {
   margin: 18px 0 24px;
-  background: rgba(255, 255, 255, 0.92);
-  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.94);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--brand-line);
   display: flex;
   align-items: center;
   justify-content: space-between;
+  box-shadow: var(--shadow-card);
 }
 
 .search-left {
@@ -99,14 +101,22 @@ onMounted(fetchList);
 }
 
 .activity-card {
-  border-radius: 18px;
-  background: rgba(255, 255, 255, 0.95);
-  box-shadow: 0 14px 28px rgba(15, 76, 92, 0.08);
+  border-radius: var(--radius-lg);
+  background: var(--brand-surface);
+  border: 1px solid rgba(124, 58, 237, 0.12);
+  box-shadow: var(--shadow-card);
+  transition: box-shadow 0.2s ease, transform 0.2s ease;
+}
+
+.activity-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 20px 36px rgba(44, 16, 91, 0.18);
 }
 
 .card-title {
   font-size: 18px;
   font-weight: 700;
+  color: var(--brand-ink);
 }
 
 .card-body {
@@ -115,12 +125,12 @@ onMounted(fetchList);
 
 .summary {
   margin: 8px 0;
-  color: rgba(26, 27, 36, 0.8);
+  color: rgba(42, 15, 69, 0.78);
 }
 
 .meta {
   font-size: 13px;
-  color: rgba(26, 27, 36, 0.7);
+  color: rgba(42, 15, 69, 0.68);
   margin-top: 4px;
 }
 
@@ -128,4 +138,20 @@ onMounted(fetchList);
   font-weight: 600;
   color: var(--brand-ember);
 }
+
+@media (max-width: 768px) {
+  .search-card {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 12px;
+  }
+
+  .search-left {
+    width: 100%;
+  }
+
+  .search-left :deep(.arco-input-wrapper) {
+    flex: 1;
+  }
+}
 </style>
diff --git a/frontend/src/views/AdminActivities.vue b/frontend/src/views/AdminActivities.vue
index 8860a85..a86701c 100644
--- a/frontend/src/views/AdminActivities.vue
+++ b/frontend/src/views/AdminActivities.vue
@@ -369,9 +369,10 @@ onMounted(fetchList);
   display: flex;
   justify-content: flex-start;
   align-items: center;
-  border-radius: 16px;
-  background: rgba(255, 255, 255, 0.92);
-  box-shadow: 0 12px 24px rgba(15, 76, 92, 0.08);
+  border-radius: var(--radius-lg);
+  background: rgba(255, 255, 255, 0.94);
+  border: 1px solid var(--brand-line);
+  box-shadow: var(--shadow-card);
   padding: 18px;
   gap: 16px;
   flex-wrap: nowrap;
@@ -397,10 +398,10 @@ onMounted(fetchList);
 }
 
 .table-shell :deep(.arco-table) {
-  border-radius: 16px;
+  border-radius: var(--radius-lg);
   overflow: hidden;
   background: rgba(255, 255, 255, 0.94);
-  box-shadow: 0 18px 40px rgba(15, 76, 92, 0.08);
+  box-shadow: var(--shadow-card);
 }
 
 .modal-body {
@@ -410,10 +411,10 @@ onMounted(fetchList);
 }
 
 .calendar-panel {
-  background: linear-gradient(180deg, rgba(246, 239, 230, 0.9), rgba(238, 245, 246, 0.9));
-  border-radius: 16px;
+  background: linear-gradient(180deg, rgba(250, 245, 255, 0.95), rgba(255, 247, 237, 0.9));
+  border-radius: var(--radius-lg);
   padding: 16px;
-  border: 1px solid rgba(226, 74, 45, 0.15);
+  border: 1px solid rgba(124, 58, 237, 0.18);
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
 }
 
@@ -436,7 +437,7 @@ onMounted(fetchList);
 
 .calendar-tip {
   font-size: 12px;
-  color: rgba(26, 27, 36, 0.7);
+  color: rgba(42, 15, 69, 0.7);
   margin-top: 4px;
 }
 
@@ -444,7 +445,7 @@ onMounted(fetchList);
   font-size: 18px;
   font-weight: 700;
   margin: 10px 0 12px;
-  color: #0f4c5c;
+  color: var(--brand-ink-soft);
 }
 
 .calendar-grid {
@@ -464,7 +465,7 @@ onMounted(fetchList);
   padding: 8px;
   min-height: 88px;
   cursor: pointer;
-  border: 1px solid rgba(26, 27, 36, 0.08);
+  border: 1px solid rgba(124, 58, 237, 0.12);
   display: flex;
   flex-direction: column;
   gap: 6px;
@@ -473,7 +474,7 @@ onMounted(fetchList);
 
 .calendar-cell:hover {
   transform: translateY(-2px);
-  box-shadow: 0 10px 20px rgba(26, 27, 36, 0.12);
+  box-shadow: 0 10px 20px rgba(44, 16, 91, 0.14);
 }
 
 .calendar-cell.is-other {
@@ -481,8 +482,8 @@ onMounted(fetchList);
 }
 
 .calendar-cell.is-term {
-  border-color: rgba(226, 74, 45, 0.4);
-  background: rgba(255, 249, 245, 0.9);
+  border-color: rgba(249, 115, 22, 0.5);
+  background: rgba(255, 247, 237, 0.92);
 }
 
 .cell-day {
@@ -494,17 +495,17 @@ onMounted(fetchList);
   font-size: 11px;
   padding: 2px 6px;
   border-radius: 10px;
-  background: rgba(226, 74, 45, 0.18);
-  color: #c23b22;
+  background: rgba(249, 115, 22, 0.18);
+  color: #c2410c;
   width: fit-content;
 }
 
 .form-panel {
   padding: 8px 12px;
-  background: rgba(255, 255, 255, 0.92);
-  border-radius: 16px;
-  box-shadow: 0 12px 28px rgba(15, 76, 92, 0.08);
-  border: 1px solid rgba(15, 76, 92, 0.08);
+  background: rgba(255, 255, 255, 0.94);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-card);
+  border: 1px solid rgba(124, 58, 237, 0.12);
 }
 
 .form-shell {
diff --git a/frontend/src/views/LoginView.vue b/frontend/src/views/LoginView.vue
index bbdedcb..cd157cd 100644
--- a/frontend/src/views/LoginView.vue
+++ b/frontend/src/views/LoginView.vue
@@ -62,7 +62,9 @@ const goRegister = () => {
 .login-card {
   margin-top: 24px;
   max-width: 420px;
-  background: rgba(255, 255, 255, 0.92);
-  border-radius: 18px;
+  background: rgba(255, 255, 255, 0.94);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--brand-line);
+  box-shadow: var(--shadow-card);
 }
 </style>
diff --git a/frontend/src/views/RegisterView.vue b/frontend/src/views/RegisterView.vue
index 27449f0..e94a276 100644
--- a/frontend/src/views/RegisterView.vue
+++ b/frontend/src/views/RegisterView.vue
@@ -70,7 +70,9 @@ const goLogin = () => {
 .login-card {
   margin-top: 24px;
   max-width: 420px;
-  background: rgba(255, 255, 255, 0.92);
-  border-radius: 18px;
+  background: rgba(255, 255, 255, 0.94);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--brand-line);
+  box-shadow: var(--shadow-card);
 }
 </style>