fix(ui): 批量替换所有组件中残留的硬编码深色值以彻底支持浅色主题

2026-09-12 15:56:10 +08:00
parent 8b0934f6f4
commit 9fc5e3e607
42 changed files with 6081 additions and 300 deletions
@@ -1026,7 +1026,7 @@ onMounted(() => {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255, 255, 255, 0.1);
-  border-top-color: #3b82f6;
+  border-top-color: var(--border-secondary, #3b82f6);
  border-radius: 50%;
  animation: spin 1s linear infinite;
 }
@@ -1044,7 +1044,7 @@ onMounted(() => {
  background: transparent;
 }
 .custom-scrollbar::-webkit-scrollbar-thumb {
-  background: #27272a;
+  background: var(--bg-tertiary, #27272a);
  border-radius: 10px;
 }
 .custom-scrollbar::-webkit-scrollbar-thumb:hover {
@@ -556,8 +556,8 @@ const formatFileSize = (bytes) => {
 /* 操作卡片 */
 .action-card {
-  background: #2a2a2a;
+  background: var(--bg-tertiary, #2a2a2a);
-  border: 1px solid #404040;
+  border: 1px solid var(--border-secondary, #404040);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
@@ -566,7 +566,7 @@ const formatFileSize = (bytes) => {
 .action-card:hover {
  border-color: #606060;
-  background: #2f2f2f;
+  background: var(--bg-tertiary, #2f2f2f);
 }
 .action-card .card-content {
@@ -587,7 +587,7 @@ const formatFileSize = (bytes) => {
  display: flex;
  align-items: center;
  justify-content: center;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
 }
 .action-icon svg {
@@ -599,7 +599,7 @@ const formatFileSize = (bytes) => {
 .action-card h4 {
  font-size: 1.5rem;
  font-weight: 600;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  margin: 0 0 0.75rem 0;
 }
@@ -672,8 +672,8 @@ const formatFileSize = (bytes) => {
 }
 .modal {
-  background: #2a2a2a;
+  background: var(--bg-tertiary, #2a2a2a);
-  border: 1px solid #404040;
+  border: 1px solid var(--border-secondary, #404040);
  border-radius: 12px;
  max-width: 600px;
  width: 100%;
@@ -724,7 +724,7 @@ const formatFileSize = (bytes) => {
 .progress-details h5,
 .progress-errors h5 {
  margin: 0 0 10px 0;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  font-size: 14px;
  font-weight: 600;
 }
@@ -736,14 +736,14 @@ const formatFileSize = (bytes) => {
  border: 1px solid #505050;
  border-radius: 6px;
  padding: 10px;
-  background: #333333;
+  background: var(--bg-quaternary, #333333);
 }
 .detail-item {
  padding: 4px 0;
  color: #a0a0a0;
  font-size: 13px;
-  border-bottom: 1px solid #404040;
+  border-bottom: 1px solid var(--border-secondary, #404040);
 }
 .detail-item:last-child {
@@ -754,7 +754,7 @@ const formatFileSize = (bytes) => {
  padding: 4px 0;
  color: #ff6b6b;
  font-size: 13px;
-  border-bottom: 1px solid #4a2a2a;
+  border-bottom: 1px solid var(--border-secondary, #4a2a2a);
 }
 .error-item:last-child {
@@ -772,7 +772,7 @@ const formatFileSize = (bytes) => {
 .modal-title {
  font-size: 1.75rem;
  font-weight: 600;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  margin: 0;
 }
@@ -788,7 +788,7 @@ const formatFileSize = (bytes) => {
 .close-btn:hover {
  background: #505050;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
 }
 .close-btn svg {
@@ -802,11 +802,11 @@ const formatFileSize = (bytes) => {
 .modal-footer {
  padding: 1.5rem 2rem;
-  border-top: 1px solid #404040;
+  border-top: 1px solid var(--border-secondary, #404040);
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
-  background: #252525;
+  background: var(--bg-tertiary, #252525);
 }
 .modal-footer button {
@@ -822,7 +822,7 @@ const formatFileSize = (bytes) => {
  display: block;
  font-size: 1.125rem;
  font-weight: 600;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  margin-bottom: 1rem;
 }
@@ -838,7 +838,7 @@ const formatFileSize = (bytes) => {
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
-  background: #333333;
+  background: var(--bg-quaternary, #333333);
  border: 1px solid #505050;
  border-radius: 8px;
  cursor: pointer;
@@ -870,7 +870,7 @@ const formatFileSize = (bytes) => {
  display: block;
  font-size: 1rem;
  font-weight: 500;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  margin-bottom: 0.25rem;
 }
@@ -907,12 +907,12 @@ const formatFileSize = (bytes) => {
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
-  background: #333333;
+  background: var(--bg-quaternary, #333333);
 }
 .upload-area:hover,
 .upload-area.drag-over {
-  border-color: #4a90e2;
+  border-color: var(--border-secondary, #4a90e2);
  background: #383838;
 }
@@ -926,7 +926,7 @@ const formatFileSize = (bytes) => {
 .upload-area h4 {
  font-size: 1.25rem;
  font-weight: 600;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  margin: 0 0 0.5rem 0;
 }
@@ -941,7 +941,7 @@ const formatFileSize = (bytes) => {
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem;
-  background: #333333;
+  background: var(--bg-quaternary, #333333);
  border: 1px solid #505050;
  border-radius: 8px;
  margin-top: 1rem;
@@ -969,7 +969,7 @@ const formatFileSize = (bytes) => {
  display: block;
  font-size: 1rem;
  font-weight: 500;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  margin-bottom: 0.25rem;
 }
@@ -1056,8 +1056,8 @@ const formatFileSize = (bytes) => {
 }
 .notification.success {
-  background: #2e7d32;
+  background: var(--bg-tertiary, #2e7d32);
-  border: 1px solid #4caf50;
+  border: 1px solid var(--border-secondary, #4caf50);
 }
 .notification.error {
@@ -1071,8 +1071,8 @@ const formatFileSize = (bytes) => {
 }
 .notification.info {
-  background: #1976d2;
+  background: var(--bg-secondary, #1976d2);
-  border: 1px solid #2196f3;
+  border: 1px solid var(--border-secondary, #2196f3);
 }
@keyframes slideInRight {
@@ -645,7 +645,7 @@ onMounted(() => {
  background: transparent;
 }
 .custom-scrollbar::-webkit-scrollbar-thumb {
-  background: #27272a;
+  background: var(--bg-tertiary, #27272a);
  border-radius: 10px;
 }
 </style>
@@ -336,7 +336,7 @@ onMounted(() => {
  background: transparent;
 }
 .custom-scrollbar::-webkit-scrollbar-thumb {
-  background: #27272a;
+  background: var(--bg-tertiary, #27272a);
  border-radius: 10px;
 }
 .custom-scrollbar::-webkit-scrollbar-thumb:hover {
@@ -742,7 +742,7 @@ onUnmounted(() => {
  background: transparent;
 }
 .custom-scrollbar::-webkit-scrollbar-thumb {
-  background: #27272a;
+  background: var(--bg-tertiary, #27272a);
  border-radius: 10px;
 }
 .custom-scrollbar::-webkit-scrollbar-thumb:hover {
@@ -366,7 +366,7 @@ onMounted(() => {
  background: transparent;
 }
 .custom-scrollbar::-webkit-scrollbar-thumb {
-  background: #27272a;
+  background: var(--bg-tertiary, #27272a);
  border-radius: 10px;
 }
 .custom-scrollbar::-webkit-scrollbar-thumb:hover {
@@ -842,7 +842,7 @@ const cancelForm = () => {
  background: transparent;
 }
 ::-webkit-scrollbar-thumb {
-  background: #27272a;
+  background: var(--bg-tertiary, #27272a);
  border-radius: 10px;
 }
 ::-webkit-scrollbar-thumb:hover {
@@ -112,7 +112,7 @@ const handleImageError = (event) => {
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
-  color: #333;
+  color: var(--text-quaternary, #333333);
  flex-shrink: 0;
 }
@@ -141,7 +141,7 @@ const handleImageError = (event) => {
  display: none;
  align-items: center;
  justify-content: center;
-  color: #999;
+  color: var(--text-tertiary, #999999);
 }
 .cover-placeholder.show {
@@ -161,7 +161,7 @@ const handleImageError = (event) => {
 .song-title {
  font-weight: bold;
  font-size: 16px;
-  color: #333;
+  color: var(--text-quaternary, #333333);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
@@ -176,7 +176,7 @@ const handleImageError = (event) => {
  display: inline-block;
  padding: 1px 4px;
  background: #e3f2fd;
-  border: 1px solid #2196f3;
+  border: 1px solid var(--border-secondary, #2196f3);
  border-radius: 3px;
  color: #1976d2;
  font-size: 10px;
@@ -186,7 +186,7 @@ const handleImageError = (event) => {
 .song-artist {
  font-size: 14px;
-  color: #666;
+  color: var(--text-quaternary, #666666);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
@@ -197,7 +197,7 @@ const handleImageError = (event) => {
  display: flex;
  align-items: center;
  font-size: 12px;
-  color: #666;
+  color: var(--text-quaternary, #666666);
  white-space: nowrap;
 }
@@ -207,14 +207,14 @@ const handleImageError = (event) => {
 }
 .value {
-  color: #333;
+  color: var(--text-quaternary, #333333);
 }
 /* 打印样式 */
@media print {
  .schedule-item-print {
-    color: #000 !important;
+    color: var(--text-primary, #000) !important;
-    background: #fff !important;
+    background: var(--card-bg, #fff) !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
@@ -230,7 +230,7 @@ const handleImageError = (event) => {
  .sequence-number {
    background: #f0f0f0 !important;
-    color: #000 !important;
+    color: var(--text-primary, #000) !important;
    width: 30px !important;
    height: 30px !important;
    flex-shrink: 0 !important;
@@ -264,7 +264,7 @@ const handleImageError = (event) => {
  }
  .song-title {
-    color: #000 !important;
+    color: var(--text-primary, #000) !important;
    font-size: 16px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
@@ -274,11 +274,11 @@ const handleImageError = (event) => {
  .song-artist,
  .label,
  .value {
-    color: #333 !important;
+    color: var(--text-quaternary, #333333) !important;
  }
  .time-range {
-    color: #666 !important;
+    color: var(--text-quaternary, #666666) !important;
  }
  .requester-info,
@@ -1383,15 +1383,15 @@ watch(
 /* 预览区域和打印样式的核心CSS - 保持原生CSS以确保精确控制 */
 .preview-content {
-  background: #ffffff;
+  background: var(--card-bg, #ffffff);
  padding: 0;
  position: relative;
 }
 /* 打印页面样式 */
 .print-page {
-  background: #ffffff;
+  background: var(--card-bg, #ffffff);
-  color: #000000;
+  color: var(--text-primary, #000000);
  width: 100%;
  margin: 0 auto;
  padding: 30px;
@@ -1426,7 +1426,7 @@ watch(
 .logo-divider {
  width: 2px;
  height: 60px;
-  background: linear-gradient(to bottom, #ddd, #999, #ddd);
+  background: linear-gradient(to bottom, var(--border-secondary, #dddddd), #999, #ddd);
  border-radius: 1px;
  margin: 0 4px;
 }
@@ -1445,19 +1445,19 @@ watch(
  font-size: 24px;
  font-weight: normal;
  margin: 0 0 4px 0;
-  color: #000;
+  color: var(--text-primary, #000);
 }
 .title-section h2 {
  font-size: 18px;
  font-weight: 500;
  margin: 0;
-  color: #666;
+  color: var(--text-quaternary, #666666);
 }
 .date-info {
  font-size: 14px;
-  color: #666;
+  color: var(--text-quaternary, #666666);
  text-align: right;
  display: flex;
  align-items: flex-start;
@@ -1477,14 +1477,14 @@ watch(
 .no-data-message {
  text-align: center;
  padding: 60px 20px;
-  color: #666;
+  color: var(--text-quaternary, #666666);
 }
 .no-data-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
-  color: #ccc;
+  color: var(--text-secondary, #cccccc);
 }
 .no-data-icon svg {
@@ -1496,7 +1496,7 @@ watch(
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 12px 0;
-  color: #333;
+  color: var(--text-quaternary, #333333);
 }
 .no-data-message p {
@@ -1512,15 +1512,15 @@ watch(
  font-weight: bold;
  margin: 24px 0 12px 0;
  padding: 8px 12px;
-  border-bottom: 2px solid #ddd;
+  border-bottom: 2px solid var(--border-secondary, #ddd);
  background: #f8f9fa;
-  color: #333;
+  color: var(--text-quaternary, #333333);
  border-radius: 4px 4px 0 0;
 }
 .playtime-group .group-title {
  background: #e3f2fd;
-  border-bottom-color: #2196f3;
+  border-bottom-color: var(--border-secondary, #2196f3);
  color: #1565c0;
 }
@@ -1533,7 +1533,7 @@ watch(
 .group-count {
  font-size: 14px;
  font-weight: normal;
-  color: #666;
+  color: var(--text-quaternary, #666666);
  margin-left: 8px;
 }
@@ -1547,7 +1547,7 @@ watch(
  margin: 16px 0 8px 0;
  padding: 6px 10px;
  background: #f0f8ff;
-  border-left: 3px solid #2196f3;
+  border-left: 3px solid var(--border-secondary, #2196f3);
  color: #1565c0;
  border-radius: 0 4px 4px 0;
 }
@@ -1555,7 +1555,7 @@ watch(
 .playtime-count {
  font-size: 12px;
  font-weight: normal;
-  color: #666;
+  color: var(--text-quaternary, #666666);
  margin-left: 6px;
 }
@@ -1570,7 +1570,7 @@ watch(
  padding-top: 16px;
  border-top: 1px solid #e5e5e5;
  font-size: 12px;
-  color: #666;
+  color: var(--text-quaternary, #666666);
 }
 .footer-left {
@@ -279,7 +279,7 @@ const getRoleDisplayName = (role) => {
  background: transparent;
 }
 .custom-scrollbar::-webkit-scrollbar-thumb {
-  background: #27272a;
+  background: var(--bg-tertiary, #27272a);
  border-radius: 10px;
 }
 .custom-scrollbar::-webkit-scrollbar-thumb:hover {
@@ -1228,7 +1228,7 @@ onUnmounted(() => {
  background: transparent;
 }
 .custom-scrollbar::-webkit-scrollbar-thumb {
-  background: #27272a;
+  background: var(--bg-tertiary, #27272a);
  border-radius: 10px;
 }
 .custom-scrollbar::-webkit-scrollbar-thumb:hover {
@@ -2179,7 +2179,7 @@ onUnmounted(() => {
  background: transparent;
 }
 .custom-scrollbar::-webkit-scrollbar-thumb {
-  background: #27272a;
+  background: var(--bg-tertiary, #27272a);
  border-radius: 10px;
 }
 .custom-scrollbar::-webkit-scrollbar-thumb:hover {
@@ -223,14 +223,14 @@ watch(
 .modal-title {
  font-size: 20px;
  font-weight: 600;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  margin: 0;
 }
 .close-btn {
  background: none;
  border: none;
-  color: #888;
+  color: var(--text-tertiary, #888888);
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
@@ -238,8 +238,8 @@ watch(
 }
 .close-btn:hover {
-  background: #2a2a2a;
+  background: var(--bg-tertiary, #2a2a2a);
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
 }
 .close-btn svg {
@@ -254,22 +254,22 @@ watch(
 }
 .song-info {
-  background: #2a2a2a;
+  background: var(--bg-tertiary, #2a2a2a);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
-  border: 1px solid #3a3a3a;
+  border: 1px solid var(--border-secondary, #3a3a3a);
 }
 .song-title {
  font-size: 18px;
  font-weight: 600;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  margin: 0 0 8px 0;
 }
 .song-artist {
-  color: #888;
+  color: var(--text-tertiary, #888888);
  margin: 0 0 16px 0;
  font-size: 14px;
 }
@@ -304,7 +304,7 @@ watch(
 .spinner {
  width: 32px;
  height: 32px;
-  border: 3px solid #3a3a3a;
+  border: 3px solid var(--border-secondary, #3a3a3a);
  border-top: 3px solid #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
@@ -366,12 +366,12 @@ watch(
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
-  border-bottom: 1px solid #3a3a3a;
+  border-bottom: 1px solid var(--border-secondary, #3a3a3a);
 }
 .voters-title {
  font-weight: 600;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  font-size: 16px;
 }
@@ -388,15 +388,15 @@ watch(
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
-  background: #2a2a2a;
+  background: var(--bg-tertiary, #2a2a2a);
  border-radius: 8px;
-  border: 1px solid #3a3a3a;
+  border: 1px solid var(--border-secondary, #3a3a3a);
  transition: all 0.2s ease;
 }
 .voter-item:hover {
-  background: #333333;
+  background: var(--bg-quaternary, #333333);
-  border-color: #4a4a4a;
+  border-color: var(--border-secondary, #4a4a4a);
 }
 .voter-info {
@@ -426,18 +426,18 @@ watch(
 }
 .voter-name {
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  font-weight: 500;
  font-size: 14px;
 }
 .vote-time {
-  color: #888;
+  color: var(--text-tertiary, #888888);
  font-size: 12px;
 }
 .voter-number {
-  color: #888;
+  color: var(--text-tertiary, #888888);
  font-size: 12px;
  font-weight: 500;
 }
@@ -454,11 +454,11 @@ watch(
 .empty-icon {
  width: 48px;
  height: 48px;
-  color: #666;
+  color: var(--text-quaternary, #666666);
 }
 .empty-state p {
-  color: #888;
+  color: var(--text-tertiary, #888888);
  margin: 0;
 }
@@ -469,8 +469,8 @@ watch(
 }
 .close-button {
-  background: #3a3a3a;
+  background: var(--bg-quaternary, #3a3a3a);
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
@@ -490,7 +490,7 @@ watch(
 }
 .voters-container::-webkit-scrollbar-track {
-  background: #2a2a2a;
+  background: var(--bg-tertiary, #2a2a2a);
  border-radius: 3px;
 }
@@ -141,21 +141,21 @@ const loginWith = (provider: string) => {
 }
 .oauth-btn-github:hover {
-  background: #24292e;
+  background: var(--bg-tertiary, #24292e);
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
-  border-color: #24292e;
+  border-color: var(--border-secondary, #24292e);
 }
 .oauth-btn-google:hover {
-  background: #ffffff;
+  background: var(--card-bg, #ffffff);
-  color: #111111;
+  color: var(--text-primary, #111111);
  border-color: #dadce0;
 }
 .oauth-btn-aggregate:hover {
-  background: #12b7f5;
+  background: var(--bg-secondary, #12b7f5);
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
-  border-color: #12b7f5;
+  border-color: var(--border-secondary, #12b7f5);
 }
 .oauth-empty-hint {
@@ -575,7 +575,7 @@ const handleRegister = async () => {
  width: 100%;
  padding: 16px;
  background: var(--primary);
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  border: none;
  border-radius: var(--radius-lg);
  font-size: 16px;
@@ -209,7 +209,7 @@ input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
-  background: #2563eb; /* blue-600 */
+  background: var(--bg-tertiary, #2563eb); /* blue-600 */
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
@@ -218,7 +218,7 @@ input[type='range']::-webkit-slider-thumb {
 input[type='range']::-moz-range-thumb {
  width: 18px;
  height: 18px;
-  background: #2563eb;
+  background: var(--bg-tertiary, #2563eb);
  border-radius: 50%;
  cursor: pointer;
  border: none;
@@ -160,7 +160,7 @@ const jumpSeek = (line: LyricLineMouseEvent) => {
  :deep(.am-lyric .is-active),
  :deep(.am-lyric .lyric-line.current),
  :deep(.am-lyric .lyric-line.is-current) {
-    color: #ffffff;
+    color: var(--text-primary, #ffffff);
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  }
 }
@@ -824,6 +824,6 @@ onBeforeUnmount(() => {
  align-items: center;
  justify-content: center;
  font-size: 22px;
-  color: #fff;
+  color: var(--text-primary, #ffffff);
 }
 </style>
@@ -2912,7 +2912,7 @@ defineExpose({
 <style scoped>
 .request-form {
  width: 100%;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  display: flex;
  gap: 2rem;
  height: calc(100vh - 160px);
@@ -2954,7 +2954,7 @@ defineExpose({
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: 0.04em;
-  color: #fff;
+  color: var(--text-primary, #ffffff);
 }
 .rules-content-desktop p {
@@ -3181,7 +3181,7 @@ defineExpose({
  font-family: 'MiSans', sans-serif;
  font-weight: 600;
  font-size: 15px;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  white-space: nowrap;
  flex-shrink: 0; /* 防止标签被压缩 */
 }
@@ -3212,11 +3212,11 @@ defineExpose({
 }
 .search-button {
-  background: linear-gradient(180deg, #0043f8 0%, #0075f8 100%);
+  background: linear-gradient(180deg, var(--bg-secondary, #0043f8) 0%, #0075f8 100%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  font-family: 'MiSans', sans-serif;
  font-weight: 600;
  font-size: 14px;
@@ -3250,7 +3250,7 @@ defineExpose({
  font-family: 'MiSans', sans-serif;
  font-weight: 600;
  font-size: 16px;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  white-space: nowrap;
  flex-shrink: 0; /* 防止标签被压缩 */
 }
@@ -3271,7 +3271,7 @@ defineExpose({
  border-radius: 6px;
  padding: 0.25rem 0.5rem;
  font-size: 14px;
-  color: #fff;
+  color: var(--text-primary, #ffffff);
 }
 .remove-collaborator {
@@ -3285,7 +3285,7 @@ defineExpose({
 }
 .remove-collaborator:hover {
-  color: #fff;
+  color: var(--text-primary, #ffffff);
 }
 .add-collaborator-btn {
@@ -3304,7 +3304,7 @@ defineExpose({
 .add-collaborator-btn:hover {
  background: rgba(255, 255, 255, 0.1);
-  color: #fff;
+  color: var(--text-primary, #ffffff);
 }
 /* 自定义复选框样式 */
@@ -3327,7 +3327,7 @@ defineExpose({
  width: 14px;
  height: 14px;
  border-radius: 4px;
-  border: 1px solid #3f3f46;
+  border: 1px solid var(--border-secondary, #3f3f46);
  background: rgba(24, 24, 27, 0.5);
  transition: all 0.2s ease;
 }
@@ -3343,7 +3343,7 @@ defineExpose({
 .custom-checkbox-input:checked + .custom-checkbox-box {
  background: #3b82f6;
-  border-color: #3b82f6;
+  border-color: var(--border-secondary, #3b82f6);
 }
 .custom-checkbox-input:checked + .custom-checkbox-box .custom-checkbox-icon {
@@ -3428,7 +3428,7 @@ defineExpose({
  font-family: 'MiSans', sans-serif;
  font-weight: 600;
  font-size: 13px;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
 }
 .status-item-horizontal .status-value {
@@ -3615,7 +3615,7 @@ defineExpose({
 }
 .header-btn:hover {
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  background: rgba(255, 255, 255, 0.08);
 }
@@ -3645,7 +3645,7 @@ defineExpose({
 .import-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
 }
 .user-status {
@@ -3706,7 +3706,7 @@ defineExpose({
 .action-btn-compact:hover {
  background: rgba(255, 255, 255, 0.08);
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  border-color: rgba(255, 255, 255, 0.12);
 }
@@ -3731,7 +3731,7 @@ defineExpose({
 }
 .radio-label.active {
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  font-weight: 600;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
@@ -3775,9 +3775,9 @@ defineExpose({
 }
 .platform-btn.active {
-  background: linear-gradient(180deg, #0043f8 0%, #0075f8 100%);
+  background: linear-gradient(180deg, var(--bg-secondary, #0043f8) 0%, #0075f8 100%);
  border-color: rgba(255, 255, 255, 0.16);
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
 }
 .platform-btn:hover:not(.active) {
@@ -3873,7 +3873,7 @@ defineExpose({
 }
 .source-item.healthy .source-indicator {
-  background: #22c55e;
+  background: var(--bg-tertiary, #22c55e);
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
 }
@@ -4031,7 +4031,7 @@ defineExpose({
  font-family: 'MiSans', sans-serif;
  font-weight: 600;
  font-size: 15px;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  margin: 0;
 }
@@ -4077,7 +4077,7 @@ defineExpose({
  font-family: 'MiSans', sans-serif;
  font-weight: 600;
  font-size: 14px;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  cursor: pointer;
  transition: all 0.3s ease;
 }
@@ -4103,14 +4103,14 @@ defineExpose({
 }
 .submit-button {
-  background: linear-gradient(180deg, #0043f8 0%, #0075f8 100%);
+  background: linear-gradient(180deg, var(--bg-secondary, #0043f8) 0%, #0075f8 100%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  padding: 0.5rem 1.5rem;
  font-family: 'MiSans', sans-serif;
  font-weight: 600;
  font-size: 14px;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  cursor: pointer;
  transition: all 0.3s ease;
 }
@@ -4125,7 +4125,7 @@ defineExpose({
  transform: none;
 }
 .similar-song-alert {
-  background: #21242d;
+  background: var(--bg-tertiary, #21242d);
  border-radius: 10px;
  padding: 0.5rem 0.75rem;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
@@ -4157,7 +4157,7 @@ defineExpose({
  font-family: 'MiSans', sans-serif;
  font-weight: 600;
  font-size: 16px;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
 }
 .alert-content {
@@ -4190,7 +4190,7 @@ defineExpose({
 .song-title {
  margin: 0 0 0.25rem 0;
  font-size: 14px;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  font-weight: 500;
 }
@@ -4244,11 +4244,11 @@ defineExpose({
 }
 .vote-btn {
-  background: linear-gradient(180deg, #0043f8 0%, #0075f8 100%);
+  background: linear-gradient(180deg, var(--bg-secondary, #0043f8) 0%, #0075f8 100%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  padding: 0.5rem 1rem;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  font-family: 'MiSans', sans-serif;
  font-weight: 600;
  font-size: 14px;
@@ -4272,7 +4272,7 @@ defineExpose({
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  padding: 0.5rem 1rem;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  font-family: 'MiSans', sans-serif;
  font-weight: 600;
  font-size: 14px;
@@ -4390,7 +4390,7 @@ defineExpose({
 .modal-header h3 {
  margin: 0;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  font-family: 'MiSans', sans-serif;
  font-weight: 600;
  font-size: 18px;
@@ -4415,7 +4415,7 @@ defineExpose({
 .close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  transform: rotate(90deg);
 }
@@ -4456,14 +4456,14 @@ defineExpose({
 .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  border-color: rgba(255, 255, 255, 0.2);
 }
 .btn-primary {
-  background: linear-gradient(135deg, #0043f8 0%, #0075f8 100%);
+  background: linear-gradient(135deg, var(--bg-secondary, #0043f8) 0%, #0075f8 100%);
  border-color: rgba(255, 255, 255, 0.1);
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  box-shadow: 0 4px 12px rgba(0, 67, 248, 0.3);
 }
@@ -4527,7 +4527,7 @@ defineExpose({
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-  background: #18181b;
+  background: var(--bg-secondary, #18181b);
 }
 .cover-img {
@@ -4600,7 +4600,7 @@ defineExpose({
  font-family: 'MiSans', sans-serif;
  font-weight: 600;
  font-size: 15px;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
@@ -4662,7 +4662,7 @@ defineExpose({
  display: flex;
  align-items: center;
  justify-content: center;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
@@ -4713,7 +4713,7 @@ defineExpose({
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  padding: 0.4rem 0.8rem;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  font-family: 'MiSans', sans-serif;
  font-weight: 600;
  font-size: 12px;
@@ -4750,11 +4750,11 @@ defineExpose({
 }
 .select-btn {
-  background: linear-gradient(180deg, #0043f8 0%, #0075f8 100%);
+  background: linear-gradient(180deg, var(--bg-secondary, #0043f8) 0%, #0075f8 100%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  padding: 0.5rem 1rem;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  font-family: 'MiSans', sans-serif;
  font-weight: 600;
  font-size: 14px;
@@ -4812,7 +4812,7 @@ defineExpose({
  font-family: 'MiSans', sans-serif;
  font-weight: 600;
  font-size: 14px;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  cursor: pointer;
  transition: all 0.3s ease;
 }
@@ -4835,7 +4835,7 @@ defineExpose({
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 1rem;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
 }
 .manual-form {
@@ -4855,7 +4855,7 @@ defineExpose({
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  padding: 0.5rem 1rem;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  font-family: 'MiSans', sans-serif;
  font-weight: 600;
  font-size: 14px;
@@ -4868,11 +4868,11 @@ defineExpose({
 }
 .manual-confirm-btn {
-  background: linear-gradient(180deg, #0043f8 0%, #0075f8 100%);
+  background: linear-gradient(180deg, var(--bg-secondary, #0043f8) 0%, #0075f8 100%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  padding: 0.5rem 1rem;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  font-family: 'MiSans', sans-serif;
  font-weight: 600;
  font-size: 14px;
@@ -5148,8 +5148,8 @@ defineExpose({
  }
  .platform-btn.active {
-    background: #0b5afe;
+    background: var(--bg-secondary, #0b5afe);
-    color: #ffffff;
+    color: var(--text-primary, #ffffff);
    box-shadow: 0 2px 8px rgba(11, 90, 254, 0.3);
  }
@@ -5487,7 +5487,7 @@ defineExpose({
 .import-semester-btn:hover {
  background: rgba(255, 255, 255, 0.15);
-  color: #fff;
+  color: var(--text-primary, #ffffff);
  border-color: rgba(255, 255, 255, 0.2);
 }
@@ -5513,7 +5513,7 @@ defineExpose({
  font-family: 'MiSans', sans-serif;
  font-weight: 500;
  font-size: 16px;
-  color: #fff;
+  color: var(--text-primary, #ffffff);
  margin-bottom: 0.5rem;
 }
@@ -5571,7 +5571,7 @@ defineExpose({
  font-family: 'MiSans', sans-serif;
  font-weight: 500;
  font-size: 14px;
-  color: #fff;
+  color: var(--text-primary, #ffffff);
 }
 .episode-duration {
@@ -1608,7 +1608,7 @@ const vRipple = {
 }
 .semester-label {
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  font-size: 15px;
  font-weight: 500;
  margin-right: 0.75rem;
@@ -1620,7 +1620,7 @@ const vRipple = {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  padding: 0.6rem 1rem;
  font-size: 14px;
  font-weight: 500;
@@ -1648,8 +1648,8 @@ const vRipple = {
 }
 .semester-select option {
-  background: #1a1d24;
+  background: var(--bg-secondary, #1a1d24);
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  padding: 0.5rem;
 }
@@ -1703,14 +1703,14 @@ const vRipple = {
 }
 .date-item:hover {
-  background: #21242d;
+  background: var(--bg-tertiary, #21242d);
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
 }
 .date-item.active {
-  background: #21242d;
+  background: var(--bg-tertiary, #21242d);
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  font-weight: 600;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(11, 90, 254, 0.2);
@@ -1775,7 +1775,7 @@ const vRipple = {
  font-family: 'MiSans', sans-serif;
  font-weight: 600;
  font-size: 20px;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  margin: 0;
 }
@@ -1784,7 +1784,7 @@ const vRipple = {
  padding: 3rem;
  text-align: center;
  border-radius: 10px;
-  background: #21242d;
+  background: var(--bg-tertiary, #21242d);
  margin: 1rem 0;
  color: rgba(255, 255, 255, 0.6);
  display: flex;
@@ -1819,7 +1819,7 @@ const vRipple = {
  padding: 2rem;
  text-align: center;
  border-radius: 10px;
-  background: #21242d;
+  background: var(--bg-tertiary, #21242d);
  margin: 1rem 0;
  color: rgba(255, 255, 255, 0.6);
 }
@@ -1869,7 +1869,7 @@ const vRipple = {
 .song-card {
  width: 320px;
  flex-shrink: 0;
-  background: #21242d;
+  background: var(--bg-tertiary, #21242d);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
@@ -1886,7 +1886,7 @@ const vRipple = {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.1);
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
@@ -1930,7 +1930,7 @@ const vRipple = {
  width: 100%;
  max-width: 580px;
  max-height: 85vh;
-  background: #1e1e24;
+  background: var(--bg-secondary, #1e1e24);
  border-radius: 20px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
@@ -1964,7 +1964,7 @@ const vRipple = {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  letter-spacing: 0.5px;
 }
@@ -1984,7 +1984,7 @@ const vRipple = {
 .playlist-modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  transform: rotate(90deg);
 }
@@ -1993,7 +1993,7 @@ const vRipple = {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
-  background: #1e1e24;
+  background: var(--bg-secondary, #1e1e24);
 }
 /* 滚动条美化 */
@@ -2066,7 +2066,7 @@ const vRipple = {
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
-  background: #2a2a32;
+  background: var(--bg-tertiary, #2a2a32);
  display: flex;
  align-items: center;
  justify-content: center;
@@ -2087,7 +2087,7 @@ const vRipple = {
 .user-name {
  font-weight: 600;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  font-size: 15px;
 }
@@ -2161,9 +2161,9 @@ const vRipple = {
 .custom-select,
 .custom-input {
  width: 100%;
-  background: #141418;
+  background: var(--bg-secondary, #141418);
  border: 1px solid rgba(255, 255, 255, 0.1);
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  padding: 0.75rem 1rem;
  border-radius: 10px;
  font-size: 14px;
@@ -2210,7 +2210,7 @@ const vRipple = {
 .btn-icon:hover {
  background: rgba(255, 255, 255, 0.1);
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
 }
 .btn-icon:disabled {
@@ -2421,7 +2421,7 @@ const vRipple = {
 .song-name {
  font-size: 14px;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
@@ -2469,7 +2469,7 @@ const vRipple = {
 .btn-primary {
  background: var(--primary);
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.25);
 }
@@ -2488,7 +2488,7 @@ const vRipple = {
 .btn-secondary {
  background: rgba(255, 255, 255, 0.1);
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
 }
 .btn-secondary:hover {
@@ -2502,7 +2502,7 @@ const vRipple = {
 .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.05);
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
 }
 /* 动画定义 */
@@ -2537,7 +2537,7 @@ const vRipple = {
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.1);
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  cursor: pointer;
  margin-right: 0.5rem;
  backdrop-filter: blur(10px);
@@ -2661,8 +2661,8 @@ const vRipple = {
  display: flex;
  align-items: center;
  justify-content: center;
-  background: linear-gradient(135deg, #0043f8 0%, #0075f8 100%);
+  background: linear-gradient(135deg, var(--bg-secondary, #0043f8) 0%, #0075f8 100%);
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  font-size: 28px;
  font-weight: bold;
  font-family: 'MiSans', sans-serif;
@@ -2725,7 +2725,7 @@ const vRipple = {
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.04em;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: flex-start;
@@ -2824,7 +2824,7 @@ const vRipple = {
  font-family: 'MiSans', sans-serif;
  font-weight: 600;
  font-size: 12px;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  opacity: 0.4;
 }
@@ -2919,7 +2919,7 @@ const vRipple = {
  .date-text {
    font-size: 15px;
    font-weight: 600;
-    color: #ffffff;
+    color: var(--text-primary, #ffffff);
    white-space: nowrap;
    text-shadow:
      0 0 10px rgba(255, 255, 255, 0.2),
@@ -2928,7 +2928,7 @@ const vRipple = {
  .dropdown-icon {
    opacity: 0.5;
-    color: #ffffff;
+    color: var(--text-primary, #ffffff);
  }
  .mobile-action-btn {
@@ -2937,7 +2937,7 @@ const vRipple = {
    display: flex;
    align-items: center;
    justify-content: center;
-    background: linear-gradient(135deg, #0b5afe 0%, #0043f8 100%);
+    background: linear-gradient(135deg, var(--bg-secondary, #0b5afe) 0%, #0043f8 100%);
    border: none;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(11, 90, 254, 0.4);
@@ -3118,7 +3118,7 @@ const vRipple = {
    font-weight: 600;
    margin-bottom: 2px;
    line-height: 1.4;
-    color: #ffffff;
+    color: var(--text-primary, #ffffff);
    letter-spacing: 0.01em;
  }
@@ -3366,7 +3366,7 @@ const vRipple = {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
-  background: #21242d;
+  background: var(--bg-tertiary, #21242d);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
@@ -3379,7 +3379,7 @@ const vRipple = {
 .date-nav-btn {
  background: rgba(11, 90, 254, 0.1);
  border: 1px solid rgba(11, 90, 254, 0.2);
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  border-radius: 50%;
  width: 36px;
  height: 36px;
@@ -3403,7 +3403,7 @@ const vRipple = {
  font-family: 'MiSans', sans-serif;
  font-weight: 600;
  font-size: 16px;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  text-align: center;
  flex: 1;
  white-space: pre-line;
@@ -3453,7 +3453,7 @@ const vRipple = {
  width: 85%;
  max-width: 350px;
  max-height: 70vh;
-  background: #1a1d24;
+  background: var(--bg-secondary, #1a1d24);
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
@@ -1691,14 +1691,14 @@ const vRipple = {
    border-radius: 12px;
    padding: 12px 16px 12px 42px;
    font-size: 14px;
-    color: #fff;
+    color: var(--text-primary, #ffffff);
    width: 100%;
    transition: all 0.2s ease;
  }
  .mobile-search-input:focus {
    background: rgba(255, 255, 255, 0.08);
-    border-color: #3b82f6;
+    border-color: var(--border-secondary, #3b82f6);
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
  }
@@ -1785,7 +1785,7 @@ const vRipple = {
 }
 .tab-button.active {
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  border-bottom-color: #0b5afe;
  transform: none;
  box-shadow: none;
@@ -1834,7 +1834,7 @@ const vRipple = {
  justify-content: center;
  width: 36px;
  height: 36px;
-  background: #21242d;
+  background: var(--bg-tertiary, #21242d);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  cursor: pointer;
@@ -1845,7 +1845,7 @@ const vRipple = {
 }
 .semester-toggle-btn:hover {
-  background: #2a2e38;
+  background: var(--bg-tertiary, #2a2e38);
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  color: #0b5afe;
@@ -1855,7 +1855,7 @@ const vRipple = {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
-  background: #1a1d24;
+  background: var(--bg-secondary, #1a1d24);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
@@ -1879,7 +1879,7 @@ const vRipple = {
 .semester-option:hover {
  background: rgba(11, 90, 254, 0.1);
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
 }
 .semester-option.active {
@@ -1925,7 +1925,7 @@ const vRipple = {
  justify-content: center;
  width: 36px;
  height: 36px;
-  background: #21242d;
+  background: var(--bg-tertiary, #21242d);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  cursor: pointer;
@@ -1934,7 +1934,7 @@ const vRipple = {
 }
 .refresh-button:hover {
-  background: #2a2e38;
+  background: var(--bg-tertiary, #2a2e38);
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
 }
@@ -2028,7 +2028,7 @@ const vRipple = {
 .song-card-main {
  padding: 1rem 0 1rem 1rem; /* 移除右侧内边距，保留左侧、上下内边距 */
-  background: #21242d;
+  background: var(--bg-tertiary, #21242d);
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  position: relative;
  height: 100px; /* 减小卡片高度 */
@@ -2076,8 +2076,8 @@ const vRipple = {
  display: flex;
  align-items: center;
  justify-content: center;
-  background: linear-gradient(135deg, #0043f8 0%, #0075f8 100%);
+  background: linear-gradient(135deg, var(--bg-secondary, #0043f8) 0%, #0075f8 100%);
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  font-size: 28px;
  font-weight: bold;
  font-family: 'MiSans-Demibold', sans-serif;
@@ -2139,7 +2139,7 @@ const vRipple = {
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.04em;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  margin-bottom: 0.5rem;
  width: 100%; /* 确保标题占满整个容器宽度 */
  display: flex;
@@ -2215,7 +2215,7 @@ const vRipple = {
  font-family: 'MiSans-Demibold', sans-serif;
  font-weight: 600;
  font-size: 12px;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  opacity: 0.4;
 }
@@ -2231,7 +2231,7 @@ const vRipple = {
  justify-content: center;
  width: 48px;
  height: 45px;
-  background: linear-gradient(180deg, #0043f8 0%, #0075f8 100%);
+  background: linear-gradient(180deg, var(--bg-secondary, #0043f8) 0%, #0075f8 100%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  cursor: pointer;
@@ -2239,8 +2239,8 @@ const vRipple = {
 }
 .like-button.liked {
-  background: #1a1d24;
+  background: var(--bg-secondary, #1a1d24);
-  border-color: #242f38;
+  border-color: var(--border-secondary, #242f38);
  background-image: none;
 }
@@ -2329,7 +2329,7 @@ const vRipple = {
  display: flex;
  align-items: center;
  justify-content: space-between;
-  background: #21242d;
+  background: var(--bg-tertiary, #21242d);
  border-radius: 0 0 10px 10px;
  padding: 0.5rem 1rem;
  width: 95%;
@@ -2355,7 +2355,7 @@ const vRipple = {
  font-family: 'MiSans-Demibold', sans-serif;
  font-weight: 600;
  font-size: 12px;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  cursor: pointer;
  transition: all 0.3s ease;
  height: 27px;
@@ -2368,12 +2368,12 @@ const vRipple = {
 }
 .replay-cancel-btn {
-  background: linear-gradient(180deg, #0b5afe 0%, #3d7fff 100%);
+  background: linear-gradient(180deg, var(--bg-secondary, #0b5afe) 0%, #3d7fff 100%);
  min-width: 75px;
 }
 .replay-request-btn {
-  background: linear-gradient(180deg, #0b5afe 0%, #3d7fff 100%);
+  background: linear-gradient(180deg, var(--bg-secondary, #0b5afe) 0%, #3d7fff 100%);
  min-width: 75px;
 }
@@ -2408,13 +2408,13 @@ button:disabled {
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  cursor: pointer;
  transition: all 0.2s ease;
 }
 .page-number.active {
-  background: #0b5afe;
+  background: var(--bg-secondary, #0b5afe);
  border-color: #0b5afe;
 }
@@ -2444,7 +2444,7 @@ button:disabled {
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  width: 60px;
  text-align: center;
  transition: all 0.2s ease;
@@ -2467,7 +2467,7 @@ button:disabled {
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
@@ -2705,7 +2705,7 @@ button:disabled {
    font-weight: 700;
    margin-bottom: 4px;
    line-height: 1.2;
-    color: #ffffff;
+    color: var(--text-primary, #ffffff);
    letter-spacing: 0.01em;
  }
@@ -2930,7 +2930,7 @@ button:disabled {
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
-    color: #fff;
+    color: var(--text-primary, #ffffff);
    display: flex;
    align-items: center;
    justify-content: center;
@@ -2964,7 +2964,7 @@ button:disabled {
    width: 40px;
    background: transparent;
    border: none;
-    color: #fff;
+    color: var(--text-primary, #ffffff);
    text-align: center;
    font-size: 14px;
    font-weight: 600;
@@ -2991,7 +2991,7 @@ button:disabled {
 .page-nav-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
-  border-color: #3b82f6;
+  border-color: var(--border-secondary, #3b82f6);
 }
 .page-nav-btn:disabled {
@@ -1528,7 +1528,7 @@ const getFirstChar = (text) => {
 .mobile-top-progress .progress-fill {
  height: 100%;
-  background: #0b5afe;
+  background: var(--bg-secondary, #0b5afe);
  box-shadow: 0 0 8px rgba(11, 90, 254, 0.6);
  border-radius: 0 1px 1px 0;
 }
@@ -1729,7 +1729,7 @@ const getFirstChar = (text) => {
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  font-size: 18px;
  font-weight: 600;
  font-family:
@@ -1756,7 +1756,7 @@ const getFirstChar = (text) => {
  line-height: 22px;
  padding-bottom: 2px;
  letter-spacing: -0.4px;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  font-family:
    'SF Pro', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimHei, Arial, Helvetica,
    sans-serif;
@@ -1776,7 +1776,7 @@ const getFirstChar = (text) => {
  overflow: hidden;
  line-height: 20px;
  letter-spacing: -0.4px;
-  color: #ffffff75;
+  color: var(--text-primary, #ffffff)75;
  font-family:
    'SF Pro', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimHei, Arial, Helvetica,
    sans-serif;
@@ -1797,7 +1797,7 @@ const getFirstChar = (text) => {
  align-items: center;
  justify-content: center;
  border-radius: 100px;
-  background: #00000042;
+  background: var(--bg-primary, #111111)42;
  padding: 6px;
  width: 32px;
  height: 32px;
@@ -1814,7 +1814,7 @@ const getFirstChar = (text) => {
 }
 .close-icon {
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  font-size: 15px;
  line-height: 1;
  font-family:
@@ -1851,7 +1851,7 @@ const getFirstChar = (text) => {
  display: flex;
  flex-shrink: 0;
  align-items: center;
-  border: 1px solid #1a1a1a;
+  border: 1px solid var(--border-secondary, #1a1a1a);
  border-radius: 7px;
  height: 8px;
  width: 100%;
@@ -1864,14 +1864,14 @@ const getFirstChar = (text) => {
 }
 .ios-progress-bar:hover {
-  border-color: #333;
+  border-color: var(--border-secondary, #333);
  box-shadow:
    0 0 20px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
 }
 .progress-fill {
-  background: linear-gradient(90deg, #ffffffb2, #ffffff);
+  background: linear-gradient(90deg, var(--card-bg, #ffffff)b2, #ffffff);
  height: 8px;
  transition: width 0.1s linear;
  border-radius: 7px;
@@ -1916,7 +1916,7 @@ const getFirstChar = (text) => {
 }
 .clickable-time:hover {
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  transform: scale(1.05);
 }
@@ -1931,10 +1931,10 @@ const getFirstChar = (text) => {
  display: flex;
  align-items: center;
  justify-content: center;
-  background: #ffffff1a;
+  background: var(--card-bg, #ffffff)1a;
  border-radius: 4px;
  padding: 0 8px;
-  color: #ffffffb3;
+  color: var(--text-primary, #ffffff)b3;
  font-size: 10px;
  font-weight: 600;
  backdrop-filter: blur(10px);
@@ -1944,8 +1944,8 @@ const getFirstChar = (text) => {
 }
 .audio-quality-badge:hover {
-  background: #ffffff26;
+  background: var(--card-bg, #ffffff)26;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
 }
 /* 控制按钮区域 */
@@ -1962,7 +1962,7 @@ const getFirstChar = (text) => {
 .ios-control-btn {
  background: none;
  border: none;
-  color: #ffffff92;
+  color: var(--text-primary, #ffffff)92;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: flex;
@@ -1997,7 +1997,7 @@ const getFirstChar = (text) => {
 }
 .ios-control-btn:hover {
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  transform: scale(1.1);
  box-shadow:
    0 0 20px rgba(255, 255, 255, 0.2),
@@ -2196,7 +2196,7 @@ const getFirstChar = (text) => {
  width: 60px;
  line-height: 18px;
  letter-spacing: 0.42px;
-  color: #ffffffb3;
+  color: var(--text-primary, #ffffff)b3;
  font-family:
    'SF Pro', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimHei, Arial, Helvetica,
    sans-serif;
@@ -2215,10 +2215,10 @@ const getFirstChar = (text) => {
  display: flex;
  align-items: center;
  justify-content: center;
-  background: #ffffff1a;
+  background: var(--card-bg, #ffffff)1a;
  border-radius: 4px;
  padding: 0 8px;
-  color: #ffffffb3;
+  color: var(--text-primary, #ffffff)b3;
  font-size: 10px;
  font-weight: 600;
  backdrop-filter: blur(10px);
@@ -2228,8 +2228,8 @@ const getFirstChar = (text) => {
 }
 .audio-quality:hover {
-  background: #ffffff26;
+  background: var(--card-bg, #ffffff)26;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
 }
 .audio-quality:active {
@@ -2251,13 +2251,13 @@ const getFirstChar = (text) => {
  width: 39px;
  font-size: 25px;
  text-align: center;
-  color: #ffffff92;
+  color: var(--text-primary, #ffffff)92;
  cursor: pointer;
  transition: all 0.2s ease;
 }
 .lyrics-btn:hover {
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  transform: scale(1.1);
 }
@@ -2265,7 +2265,7 @@ const getFirstChar = (text) => {
 .control-btn {
  line-height: 1;
  font-size: 24px;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
@@ -2290,7 +2290,7 @@ const getFirstChar = (text) => {
 .play-pause-btn {
  line-height: 44px;
  font-size: 37px;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
@@ -216,7 +216,7 @@ onUnmounted(() => {
  background: transparent;
 }
 .custom-scrollbar::-webkit-scrollbar-thumb {
-  background: #27272a;
+  background: var(--bg-tertiary, #27272a);
  border-radius: 10px;
 }
 .custom-scrollbar::-webkit-scrollbar-thumb:hover {
@@ -1136,7 +1136,7 @@ onUnmounted(() => {
 .default-cover {
  width: 100%;
  height: 100%;
-  background: linear-gradient(135deg, #333, #555);
+  background: linear-gradient(135deg, var(--bg-quaternary, #333333), #555);
  display: flex;
  align-items: center;
  justify-content: center;
@@ -1152,7 +1152,7 @@ onUnmounted(() => {
  font-size: 2.2rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  line-height: 1.2;
  letter-spacing: -0.02em;
  white-space: normal;
@@ -1246,7 +1246,7 @@ onUnmounted(() => {
 .progress-fill {
  height: 100%;
-  background: #ffffff;
+  background: var(--card-bg, #ffffff);
  border-radius: 3px;
  pointer-events: none;
 }
@@ -1256,7 +1256,7 @@ onUnmounted(() => {
  top: 50%;
  width: 14px;
  height: 14px;
-  background: #ffffff;
+  background: var(--card-bg, #ffffff);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.1s ease;
@@ -1306,7 +1306,7 @@ onUnmounted(() => {
 .secondary-btn.active {
  opacity: 1;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
 }
@@ -1472,7 +1472,7 @@ onUnmounted(() => {
  width: 100%;
  text-align: center;
  background: transparent;
-  color: #333; /* 深色文字 */
+  color: var(--text-quaternary, #333333); /* 深色文字 */
  padding: 8px 12px; /* 减小内边距 */
  border-radius: 8px;
  font-size: 0.85rem; /* 稍微减小字体 */
@@ -1490,7 +1490,7 @@ onUnmounted(() => {
 .badge-quality-option.active {
  color: #007aff; /* 蓝色字 */
-  background: #ffffff;
+  background: var(--card-bg, #ffffff);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 }
@@ -1522,7 +1522,7 @@ onUnmounted(() => {
  width: 20px;
  height: 5px;
  border-radius: 3px;
-  background: #ffffff;
+  background: var(--card-bg, #ffffff);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
 }
@@ -1759,7 +1759,7 @@ onUnmounted(() => {
  }
  .progress-fill {
-    background: #ffffff;
+    background: var(--card-bg, #ffffff);
  }
  .progress-thumb {
@@ -70,8 +70,8 @@ defineEmits(['close'])
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
-  background: #21242d;
+  background: var(--bg-tertiary, #21242d);
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  max-width: 400px;
  min-width: 300px;
  font-family: 'MiSans', sans-serif;
@@ -79,7 +79,7 @@ defineEmits(['close'])
 }
 .notification.success {
-  border-left: 4px solid #10b981;
+  border-left: 4px solid var(--border-secondary, #10b981);
 }
 .notification.error {
@@ -140,7 +140,7 @@ defineEmits(['close'])
 }
 .notification-close:hover {
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
 }
 /* 进度条 */
@@ -161,7 +161,7 @@ defineEmits(['close'])
 }
 .success .notification-progress-bar {
-  background-color: #10b981;
+  background-color: var(--bg-secondary, #10b981);
 }
 .error .notification-progress-bar {
@@ -169,7 +169,7 @@ defineEmits(['close'])
 }
 .info .notification-progress-bar {
-  background-color: #0b5afe;
+  background-color: var(--bg-secondary, #0b5afe);
 }
@keyframes progress-shrink {
@@ -82,8 +82,8 @@ onMounted(() => {
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
-  background: #21242d;
+  background: var(--bg-tertiary, #21242d);
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  max-width: 400px;
  min-width: 300px;
  font-family: 'MiSans', sans-serif;
@@ -94,7 +94,7 @@ onMounted(() => {
 }
 .notification-item.success {
-  border-left: 4px solid #10b981;
+  border-left: 4px solid var(--border-secondary, #10b981);
 }
 .notification-item.error {
@@ -158,7 +158,7 @@ onMounted(() => {
 }
 .notification-close:hover {
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
 }
 /* 进度条 */
@@ -179,7 +179,7 @@ onMounted(() => {
 }
 .success .notification-progress-bar {
-  background-color: #10b981;
+  background-color: var(--bg-secondary, #10b981);
 }
 .error .notification-progress-bar {
@@ -187,7 +187,7 @@ onMounted(() => {
 }
 .info .notification-progress-bar {
-  background-color: #0b5afe;
+  background-color: var(--bg-secondary, #0b5afe);
 }
@keyframes progress-shrink {
@@ -359,15 +359,15 @@ onMounted(() => {
  z-index: 9999;
  border-radius: 8px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 0, 0, 0.5);
-  border: 2px solid #3b82f6;
+  border: 2px solid var(--border-secondary, #3b82f6);
  pointer-events: none;
  transition: all 0.4s ease;
  background: transparent;
 }
 .tour-popover {
-  background: #18181b;
+  background: var(--bg-secondary, #18181b);
-  border: 1px solid #27272a;
+  border: 1px solid var(--border-secondary, #27272a);
  border-radius: 12px;
  padding: 1.25rem;
  width: 320px;
@@ -440,9 +440,9 @@ onMounted(() => {
 }
 .tour-btn-secondary {
-  background: #27272a;
+  background: var(--bg-tertiary, #27272a);
  color: #d4d4d8;
-  border: 1px solid #3f3f46;
+  border: 1px solid var(--border-secondary, #3f3f46);
 }
 .tour-btn-secondary:hover {
@@ -456,6 +456,6 @@ onMounted(() => {
 }
 .tour-btn-primary:hover {
-  background: #2563eb;
+  background: var(--bg-tertiary, #2563eb);
 }
 </style>
@@ -43,7 +43,7 @@ defineProps({
 .bg-overlay {
  position: absolute;
  inset: 0;
-  background: linear-gradient(to top, #000, transparent, transparent);
+  background: linear-gradient(to top, var(--bg-primary, #111111), transparent, transparent);
  opacity: 0.8;
  z-index: 10;
 }
@@ -74,7 +74,7 @@ const formatDate = (dateStr) => {
  align-items: center;
  justify-content: center;
  overflow: hidden;
-  background-color: #000;
+  background-color: var(--bg-primary, #111111);
 }
 .bg-blur {
@@ -120,7 +120,7 @@ const formatDate = (dateStr) => {
 }
 .highlight {
-  color: #fff;
+  color: var(--text-primary, #ffffff);
  font-weight: 700;
  margin: 0 0.5rem;
 }
@@ -141,7 +141,7 @@ const formatDate = (dateStr) => {
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
-  background: #111827;
+  background: var(--bg-secondary, #111827);
  display: flex;
  align-items: center;
  justify-content: center;
@@ -181,7 +181,7 @@ const formatDate = (dateStr) => {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
-  color: #fff;
+  color: var(--text-primary, #ffffff);
 }
 .song-artist {
@@ -31,7 +31,7 @@ defineProps({
  align-items: center;
  justify-content: center;
  overflow: hidden;
-  background: radial-gradient(circle at center, #111827, #000000);
+  background: radial-gradient(circle at center, var(--bg-secondary, #111827), #000000);
 }
 .blob {
@@ -54,7 +54,7 @@ const formatPlatform = (platform) => {
  align-items: center;
  justify-content: center;
  overflow: hidden;
-  background-color: #111827; /* gray-900 */
+  background-color: var(--bg-secondary, #111827); /* gray-900 */
 }
 .bg-gradient {
@@ -63,7 +63,7 @@ const formatPlatform = (platform) => {
  left: 0;
  width: 100%;
  height: 50%;
-  background: linear-gradient(to bottom, #1f2937, transparent);
+  background: linear-gradient(to bottom, var(--bg-secondary, #1f2937), transparent);
  opacity: 0.2;
 }
@@ -56,13 +56,13 @@ defineEmits(['share'])
  align-items: center;
  justify-content: center;
  overflow: hidden;
-  background-color: #000;
+  background-color: var(--bg-primary, #111111);
 }
 .bg-gradient {
  position: absolute;
  inset: 0;
-  background: radial-gradient(circle at center, #1f2937, #000, #000);
+  background: radial-gradient(circle at center, var(--bg-secondary, #1f2937), #000, #000);
  opacity: 0.5;
 }
@@ -132,8 +132,8 @@ defineEmits(['share'])
  width: 100%;
  padding: 1rem 2rem;
  border-radius: 9999px;
-  background: #fff;
+  background: var(--card-bg, #fff);
-  color: #000;
+  color: var(--text-primary, #000);
  font-weight: 700;
  font-size: 1.125rem;
  overflow: hidden;
@@ -173,7 +173,7 @@ defineEmits(['share'])
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
-  color: #fff;
+  color: var(--text-primary, #ffffff);
  font-weight: 700;
  font-size: 1.125rem;
  backdrop-filter: blur(12px);
@@ -63,7 +63,7 @@ defineExpose({
  height: 100%;
  min-height: 600px;
  overflow: hidden;
-  background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
+  background: linear-gradient(135deg, var(--bg-secondary, #0f0f23) 0%, #1a1a2e 50%, #16213e 100%);
 }
 .card-background {
@@ -127,7 +127,7 @@ defineExpose({
 .main-title {
  font-size: 3.5rem;
  font-weight: 900;
-  background: linear-gradient(135deg, #ffffff 0%, #e5e7eb 50%, #9ca3af 100%);
+  background: linear-gradient(135deg, var(--card-bg, #ffffff) 0%, #e5e7eb 50%, #9ca3af 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
@@ -195,7 +195,7 @@ onMounted(async () => {
  font-size: 36px;
  font-weight: 700;
  margin: 0;
-  background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
+  background: linear-gradient(135deg, var(--card-bg, #ffffff) 0%, #f0f0f0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
@@ -1910,7 +1910,7 @@ if (
  height: 18px;
  border-radius: 9px;
  background-color: var(--error, #ef4444);
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  font-size: 10px;
  font-weight: 700;
  display: flex;
@@ -3405,7 +3405,7 @@ if (
  display: flex;
  align-items: center;
  justify-content: center;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  box-shadow: 0 10px 25px -5px rgba(139, 92, 246, 0.35);
  z-index: 2;
  transform: rotate(-5deg);
@@ -3485,7 +3485,7 @@ if (
  background: var(--primary, #0b5afe);
  border: none;
  border-radius: 16px;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  font-size: 16px;
  font-weight: 700;
  display: flex;
@@ -3600,7 +3600,7 @@ if (
  width: 8px;
  height: 8px;
  border-radius: 50%;
-  background-color: #0b5afe;
+  background-color: var(--bg-secondary, #0b5afe);
  display: inline-block;
  z-index: 2;
 }
@@ -3664,9 +3664,9 @@ if (
 }
 .login-button {
-  background: linear-gradient(180deg, #0043f8 0%, #0075f8 100%);
+  background: linear-gradient(180deg, var(--bg-secondary, #0043f8) 0%, #0075f8 100%);
  border: none;
-  color: #ffffff;
+  color: var(--text-primary, #ffffff);
  padding: 10px 20px;
  border-radius: 6px;
  font-weight: 600;
@@ -211,8 +211,8 @@ const handleTouchEnd = (e) => {
 .review-page {
  position: fixed;
  inset: 0;
-  background-color: #000;
+  background-color: var(--bg-primary, #111111);
-  color: #fff;
+  color: var(--text-primary, #ffffff);
  z-index: 9999;
  font-family:
    'MiSans',
@@ -230,7 +230,7 @@ const handleTouchEnd = (e) => {
  flex-direction: column;
  align-items: center;
  justify-content: center;
-  background-color: #000;
+  background-color: var(--bg-primary, #111111);
  z-index: 50;
 }
@@ -285,7 +285,7 @@ const handleTouchEnd = (e) => {
 .empty .empty-icon-circle {
  width: 5rem;
  height: 5rem;
-  background: #111827;
+  background: var(--bg-secondary, #111827);
  border-radius: 50%;
  display: flex;
  align-items: center;
@@ -364,7 +364,7 @@ const handleTouchEnd = (e) => {
 .indicator-dot.active {
  height: 1.5rem;
-  background: #fff;
+  background: var(--card-bg, #fff);
 }
 /* 滚动提示 */
@@ -0,0 +1,128 @@
 import fs from 'fs/promises';
 import path from 'path';
 async function walk(dir) {
  const files = await fs.readdir(dir, { withFileTypes: true });
  let results = [];
  for (const file of files) {
    const res = path.resolve(dir, file.name);
    if (file.isDirectory()) {
      results = results.concat(await walk(res));
    } else if (file.name.endsWith('.vue')) {
      results.push(res);
    }
  }
  return results;
 }
 async function fixColors() {
  const dirs = [path.resolve('app', 'components'), path.resolve('app', 'pages'), path.resolve('app', 'layouts')];
  let files = [];
  for (const dir of dirs) {
    try {
      files = files.concat(await walk(dir));
    } catch (e) {
      // Ignore if dir doesn't exist
    }
  }
  for (const file of files) {
    let content = await fs.readFile(file, 'utf-8');
    let original = content;
    // Generic regex for hardcoded grayscales in styles
    const grayscales = {
      '#000000': 'var(--bg-primary, #111111)',
      '#000': 'var(--bg-primary, #111111)',
      '#111111': 'var(--bg-primary, #111111)',
      '#111': 'var(--bg-primary, #111111)',
      '#1a1a1a': 'var(--bg-secondary, #1a1a1a)',
      '#222222': 'var(--bg-tertiary, #222222)',
      '#222': 'var(--bg-tertiary, #222222)',
      '#2a2a2a': 'var(--bg-tertiary, #2a2a2a)',
      '#333333': 'var(--bg-quaternary, #333333)',
      '#333': 'var(--bg-quaternary, #333333)',
      '#3a3a3a': 'var(--bg-quaternary, #3a3a3a)',
      '#444444': 'var(--text-disabled, #444444)',
      '#444': 'var(--text-disabled, #444444)',
      '#666666': 'var(--text-quaternary, #666666)',
      '#666': 'var(--text-quaternary, #666666)',
      '#888888': 'var(--text-tertiary, #888888)',
      '#888': 'var(--text-tertiary, #888888)',
      '#999999': 'var(--text-tertiary, #999999)',
      '#999': 'var(--text-tertiary, #999999)',
      '#aaaaaa': 'var(--text-secondary, #aaaaaa)',
      '#aaa': 'var(--text-secondary, #aaaaaa)',
      '#cccccc': 'var(--text-secondary, #cccccc)',
      '#ccc': 'var(--text-secondary, #cccccc)',
      '#dddddd': 'var(--border-secondary, #dddddd)',
      '#ddd': 'var(--border-secondary, #dddddd)',
      '#eeeeee': 'var(--border-primary, #eeeeee)',
      '#eee': 'var(--border-primary, #eeeeee)',
      '#ffffff': 'var(--text-primary, #ffffff)',
      '#fff': 'var(--text-primary, #ffffff)'
    };
    // We only want to replace inside <style> blocks.
    const styleBlocks = content.match(/<style[^>]*>[\s\S]*?<\/style>/gi);
    if (styleBlocks) {
      for (const block of styleBlocks) {
        let newBlock = block;
        // Match CSS properties like background: #1a1a1a;
        newBlock = newBlock.replace(/(background(-color)?|color|border(-color)?|border-(top|right|bottom|left)(-color)?|fill|stroke):\s*([^;}]*?)(#[0-9a-fA-F]{3,6})/gi, (match, p1, p2, p3, p4, p5, p6, hex) => {
          const hexLower = hex.toLowerCase();
          // Don't replace if it's already inside a var()
          if (p6.includes('var(')) return match;
          let replacement = hex;
          if (grayscales[hexLower]) {
            // Determine if it's a background, border, or text color
            if (p1.startsWith('border')) {
              replacement = `var(--border-secondary, ${hexLower})`;
            } else if (p1.startsWith('background')) {
              if (hexLower === '#ffffff' || hexLower === '#fff') {
                replacement = `var(--card-bg, ${hexLower})`; // White background is usually a card
              } else {
                replacement = grayscales[hexLower].replace('text', 'bg'); // Force bg variables for background
              }
            } else if (p1 === 'color') {
              if (['#000000', '#000', '#111111', '#111', '#1a1a1a', '#222222', '#222', '#2a2a2a'].includes(hexLower)) {
                replacement = `var(--text-primary, ${hexLower})`;
              } else {
                replacement = grayscales[hexLower].replace('bg', 'text'); // Force text variables for color
              }
            } else {
              replacement = grayscales[hexLower];
            }
          } else {
            // Heuristic for unknown grayscales or dark colors
            // Check if it's a dark shade (e.g. #040e15, #242f38)
            if (p1.startsWith('background') && match.match(/#0[0-9a-f]{5}/i)) {
              replacement = `var(--bg-secondary, ${hexLower})`;
            } else if (p1.startsWith('background') && match.match(/#1[0-9a-f]{5}/i)) {
              replacement = `var(--bg-secondary, ${hexLower})`;
            } else if (p1.startsWith('background') && match.match(/#2[0-9a-f]{5}/i)) {
              replacement = `var(--bg-tertiary, ${hexLower})`;
            } else if (p1.startsWith('border') && match.match(/#[1-4][0-9a-f]{5}/i)) {
              replacement = `var(--border-secondary, ${hexLower})`;
            }
          }
          return `${p1}: ${p6}${replacement}`;
        });
        content = content.replace(block, newBlock);
      }
    }
    if (content !== original) {
      await fs.writeFile(file, content, 'utf-8');
      console.log('Fixed', file);
    }
  }
 }
 fixColors().catch(console.error);
@@ -0,0 +1,447 @@
 import wasm from 'vite-plugin-wasm'
 import glsl from 'vite-plugin-glsl'
 import { fileURLToPath } from 'url'
 import { index, uniqueIndex } from 'drizzle-orm'
 const customSeoConfig: Record<string, unknown> | null = (() => {
  const raw = process.env.NUXT_PUBLIC_SEO_CONFIG
  if (!raw) return null
  try {
    const parsed = JSON.parse(raw)
    if (parsed && typeof parsed === 'object') return parsed as Record<string, unknown>
    return null
  } catch {
    return null
  }
 })()
 function readNumberEnv(name: string, defaultValue: number): number {
  const raw = process.env[name]
  if (raw === undefined || raw === '') return defaultValue
  const num = Number(raw)
  return Number.isFinite(num) ? num : defaultValue
 }
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
  compatibilityDate: '2026-01-30',
  future: {
    compatibilityVersion: 4
  },
  srcDir: 'app',
  serverDir: fileURLToPath(new URL('./server', import.meta.url)),
  dir: {
    public: fileURLToPath(new URL('./public', import.meta.url))
  },
  devtools: { enabled: process.env.NODE_ENV === 'development' },
  devServer: {
    host: '0.0.0.0',
    port: 3000
  },
  modules: [
    '@nuxtjs/tailwindcss',
    ...((process.env.NODE_ENV === 'development' || process.env.npm_lifecycle_event?.includes('lint'))
      ? ['@nuxt/eslint']
      : []),
    ...((process.env.PWA_ENABLED || 'false') === 'true'
      ? ['@vite-pwa/nuxt']
      : [])
  ],
  pwa: (process.env.PWA_ENABLED || 'false') === 'true'
    ? {
        registerType: 'autoUpdate',
        manifest: {
          name: process.env.NUXT_PUBLIC_SITE_TITLE || '鏍″洯骞挎挱绔欑偣姝岀郴缁?,
          short_name: process.env.NUXT_PUBLIC_SITE_TITLE || 'VoiceHub',
          description: process.env.NUXT_PUBLIC_SITE_DESCRIPTION || '鏍″洯骞挎挱绔欑偣姝岀郴缁?,
          display: (process.env.PWA_DISPLAY as any) || 'standalone',
          background_color: process.env.PWA_BACKGROUND_COLOR || '#000000',
          theme_color: process.env.PWA_THEME_COLOR || '#111111',
          icons: [
            {
              src: '/images/logo.png',
              sizes: '192x192',
              type: 'image/png'
            },
            {
              src: '/images/logo.png',
              sizes: '512x512',
              type: 'image/png'
            }
          ]
        },
        workbox: {
          navigateFallback: '/',
          globPatterns: ['**/*.{js,css,html,png,jpg,jpeg,svg,ico,webp,woff2}']
        },
        client: {
          installPrompt: true,
          periodicSyncForUpdates: 3600
        },
        devOptions: {
          enabled: process.env.NODE_ENV === 'development'
        }
      }
    : {},
  // 寮曞叆鍏ㄥ眬CSS
  css: [
    '~/assets/css/variables.css',
    '~/assets/css/components.css',
    '~/assets/css/main.css',
    '~/assets/css/transitions.css',
    '~/assets/css/mobile-admin.css',
    '~/assets/css/print-fix.css',
    '~/assets/css/sf-pro-icons.css'
  ],
  build: {
    transpile: []
  },
  // 瀹為獙鎬т紭鍖栧姛鑳?  experimental: {
    payloadExtraction: true,
    renderJsonPayloads: true,
    viewTransition: true
  },
  // 閰嶇疆杩愯鏃堕厤缃?  runtimeConfig: {
    // 鏈嶅姟鍣ㄧ鏈夐敭锛堜笉浼氭毚闇插埌瀹㈡埛绔級
    jwtSecret: process.env.JWT_SECRET || 'your-secret-key',
    // Redis閰嶇疆锛堝彲閫夛級
    redisUrl: process.env.REDIS_URL || '',
    redisKeyPrefix: process.env.REDIS_KEY_PREFIX || '',
    // Sentry 鏈嶅姟绔厤缃紙涓嶄細鏆撮湶鍒板鎴风锛?    sentry: {
      serverDsn: process.env.SENTRY_SERVER_DSN || process.env.SENTRY_DSN || '',
      dsn: process.env.SENTRY_DSN || '',
      errorSampleRate: readNumberEnv('SENTRY_ERROR_SAMPLE_RATE', 1.0),
      tracesSampleRate: readNumberEnv('SENTRY_TRACES_SAMPLE_RATE', 1.0),
      replaySessionSampleRate: readNumberEnv('SENTRY_REPLAY_SESSION_SAMPLE_RATE', 0),
      replayOnErrorSampleRate: readNumberEnv('SENTRY_REPLAY_ON_ERROR_SAMPLE_RATE', 0),
      release: process.env.SENTRY_RELEASE || '',
      environment: process.env.SENTRY_ENVIRONMENT || process.env.NODE_ENV || 'production'
    },
    // 鍏叡閿紙浼氭毚闇插埌瀹㈡埛绔級
    public: {
      host: process.env.NUXT_PUBLIC_HOST || '',
      apiBase: '/api',
      oauth: {
        github: !!process.env.GITHUB_CLIENT_ID,
        casdoor: !!process.env.CASDOOR_CLIENT_ID,
        google: !!process.env.GOOGLE_CLIENT_ID,
        aggregate: !!process.env.AGGREGATE_OAUTH_APP_ID
      },
      siteTitle: process.env.NUXT_PUBLIC_SITE_TITLE || '鏍″洯骞挎挱绔欑偣姝岀郴缁?,
      siteLogo: process.env.NUXT_PUBLIC_SITE_LOGO || '',
      siteDescription:
        process.env.NUXT_PUBLIC_SITE_DESCRIPTION || '鏍″洯骞挎挱绔欑偣姝岀郴缁?- 璁╀綘鐨勫０闊宠鍚',
      isNetlify: process.env.NETLIFY === 'true',
      // SEO 鑷畾涔夐厤缃紙閫氳繃 NUXT_PUBLIC_SEO_CONFIG 娉ㄥ叆 JSON 瀛楃涓诧級
      seoConfig: customSeoConfig ?? {},
      // 鍥惧舰楠岃瘉鐮佺浉鍏?      captcha: {
        enabled: (process.env.CAPTCHA_ENABLED || 'false') === 'true',
        provider: process.env.CAPTCHA_PROVIDER || 'turnstile',
        siteKey: process.env.CAPTCHA_SITE_KEY || ''
      },
      // PWA 鐩稿叧缁撴瀯锛堟湰鍦颁笉鍚敤妯″潡锛屼絾淇濈暀閰嶇疆椤逛互渚夸笂灞傚簲鐢ㄤ娇鐢級
      pwa: {
        enabled: (process.env.PWA_ENABLED || 'false') === 'true',
        display: process.env.PWA_DISPLAY || 'standalone',
        backgroundColor: process.env.PWA_BACKGROUND_COLOR || '#000000',
        themeColor: process.env.PWA_THEME_COLOR || '#111111'
      },
      // 涓婚閰嶇疆
      defaultTheme: process.env.NUXT_PUBLIC_DEFAULT_THEME || 'ClassicLight',
      enabledThemes: (process.env.NUXT_PUBLIC_ENABLED_THEMES || 'ClassicLight,ModernLight')
        .split(',')
        .map((s) => s.trim())
        .filter(Boolean),
      // Sentry 瀹㈡埛绔厤缃紙浠呭叕寮€ DSN 涓庨噰鏍风巼锛?      sentry: {
        dsn: process.env.SENTRY_DSN || '',
        tracesSampleRate: readNumberEnv('SENTRY_TRACES_SAMPLE_RATE', 1.0),
        replaySessionSampleRate: readNumberEnv('SENTRY_REPLAY_SESSION_SAMPLE_RATE', 0),
        replayOnErrorSampleRate: readNumberEnv('SENTRY_REPLAY_ON_ERROR_SAMPLE_RATE', 0)
      }
    }
  },
  // 閰嶇疆鐜鍙橀噺
  app: {
    head: {
      title: process.env.NUXT_PUBLIC_SITE_TITLE || '鏍″洯骞挎挱绔欑偣姝岀郴缁?,
      htmlAttrs: { lang: 'zh-CN' },
      meta: [
        { charset: 'utf-8' },
        {
          name: 'viewport',
          content:
            'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover'
        },
        {
          name: 'description',
          content:
            process.env.NUXT_PUBLIC_SITE_DESCRIPTION || '鏍″洯骞挎挱绔欑偣姝岀郴缁?- 璁╀綘鐨勫０闊宠鍚'
        },
        // 绉诲姩绔紭鍖?        { name: 'theme-color', content: '#111111' },
        {
          name: 'x-default-theme',
          content: process.env.NUXT_PUBLIC_DEFAULT_THEME || 'ClassicLight'
        },
        {
          name: 'x-enabled-themes',
          content: process.env.NUXT_PUBLIC_ENABLED_THEMES || 'ClassicLight,ModernLight'
        },
        { name: 'apple-mobile-web-app-capable', content: 'yes' },
        { name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent' },
        { name: 'apple-mobile-web-app-title', content: 'VoiceHub绠＄悊' },
        { name: 'mobile-web-app-capable', content: 'yes' },
        { name: 'format-detection', content: 'telephone=no' }
      ],
      script: [
        {
          type: 'text/javascript',
          tagPosition: 'head',
          children: [
            `(function(){try{`,
            `  var k='voicehub:theme', d=document, r=d.documentElement, s=null, eff=null, def=null, list=[];`,
            `  try{`,
            `    var mt=d.querySelector('meta[name="x-enabled-themes"]');`,
            `    if(mt && mt.content){list=String(mt.content).split(',').map(function(x){return x.replace(/^\\s+|\\s+$/g,'')}).filter(Boolean)}`,
            `  }catch(e){list=[]}`,
            `  try{`,
            `    var md=d.querySelector('meta[name="x-default-theme"]');`,
            `    if(md && md.content){def=md.content}`,
            `  }catch(e){def=null}`,
            `  if(!def){def='ClassicLight'}`,
            `  if(list.length===0){list=['ClassicLight','ModernLight']}`,
            `  function valid(t){`,
            `    if(list.indexOf(t)!==-1){return t}`,
            `    if(list.indexOf(def)!==-1){return def}`,
            `    return list[0]`,
            `  }`,
            `  try{s=localStorage.getItem(k)}catch(e){s=null}`,
            `  if(!s){s=def}`,
            `  else{s=valid(s)}`,
            `  if(typeof s==='string' && (s==='System'||s==='system')){eff=window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light'}`,
            `  else if(typeof s==='string'){eff=s.endsWith('Dark')||s==='dark'?'dark':(s.endsWith('Light')||s==='light'?'light':s)}`,
            `  else{eff='light'}`,
            `  r.setAttribute('data-theme', (typeof s==='string'?s:eff));`,
            `  if(eff==='dark'){r.classList.add('dark'); r.classList.remove('light'); r.style.colorScheme='dark'}`,
            `  else if(eff==='light'){r.classList.add('light'); r.classList.remove('dark'); r.style.colorScheme='light'}`,
            `  else{r.classList.remove('dark','light'); r.style.colorScheme='light dark'}`,
            `  try{`,
            `    var tm=d.querySelector('meta[name="theme-color"]');`,
            `    if(tm){tm.content=(eff==='light'?'#f8fafc':'#111111')}`,
            `  }catch(e){}`,
            `}catch(e){}})();`
          ].join('')
        }
      ],
      link: [
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
        { rel: 'preload', as: 'image', href: '/images/logo.png' },
        { rel: 'preload', as: 'image', href: '/images/site-logo.png' },
        { rel: 'preload', as: 'image', href: '/images/school-logo-white.png' },
        // 浼樺厛鍔犺浇甯歌瀛椾綋锛岀‘淇濋〉闈㈠揩閫熸樉绀?        {
          rel: 'preload',
          as: 'style',
          href: 'https://cdn.jsdelivr.net/npm/misans@4.1.0/lib/Normal/MiSans-Regular.min.css'
        },
        {
          rel: 'stylesheet',
          href: 'https://cdn.jsdelivr.net/npm/misans@4.1.0/lib/Normal/MiSans-Regular.min.css'
        },
        // 寤惰繜鍔犺浇鍏朵粬瀛楅噸锛岄伩鍏嶉樆濉為〉闈㈡覆鏌?        {
          rel: 'preload',
          as: 'style',
          href: 'https://cdn.jsdelivr.net/npm/misans@4.1.0/lib/Normal/MiSans-Medium.min.css',
          onload: "this.onload=null;this.rel='stylesheet'"
        },
        {
          rel: 'preload',
          as: 'style',
          href: 'https://cdn.jsdelivr.net/npm/misans@4.1.0/lib/Normal/MiSans-Semibold.min.css',
          onload: "this.onload=null;this.rel='stylesheet'"
        },
        {
          rel: 'preload',
          as: 'style',
          href: 'https://cdn.jsdelivr.net/npm/misans@4.1.0/lib/Normal/MiSans-Bold.min.css',
          onload: "this.onload=null;this.rel='stylesheet'"
        }
      ]
    }
  },
  features: {
    inlineStyles: false
  },
  // TypeScript閰嶇疆
  typescript: {
    strict: true
  },
  // 鏈嶅姟鍣ㄧ閰嶇疆
  nitro: {
    compressPublicAssets: true,
    preset: process.env.VERCEL
      ? 'vercel'
      : process.env.NETLIFY
        ? 'netlify'
        : process.env.NITRO_PRESET || 'node-server',
    // 澧炲己閿欒澶勭悊鍜岀ǔ瀹氭€?    experimental: {
      wasm: true,
      asyncContext: true
    },
    timing: true,
    // 澧炲姞璇锋眰瓒呮椂鏃堕棿
    routeRules: {
      // 瀹屽叏绂佺敤鎵€鏈堿PI璺敱鐨勭紦瀛橈紝纭繚姣忔閮借姹傛暟鎹簱
      '/api/**': {
        headers: {
          'Cache-Control': 'no-cache, no-store, must-revalidate',
          Pragma: 'no-cache',
          Expires: '0',
          Connection: 'keep-alive'
        }
      },
      // 闈欐€佽祫婧愭枃浠剁紦瀛橀厤缃?      '/_nuxt/**': {
        headers: {
          'Cache-Control': 'public, max-age=31536000, immutable'
        }
      },
      '/assets/**': {
        headers: {
          'Cache-Control': 'public, max-age=31536000, immutable'
        }
      },
      '/favicon.ico': {
        headers: {
          'Cache-Control': 'public, max-age=86400'
        }
      },
      // 鍥剧墖銆丆SS銆丣S绛夐潤鎬佽祫婧愮紦瀛?      '/**/*.{png,jpg,jpeg,gif,webp,svg,ico}': {
        headers: {
          'Cache-Control': 'public, max-age=31536000, immutable'
        }
      },
      '/**/*.{css,js}': {
        headers: {
          'Cache-Control': 'public, max-age=31536000, immutable'
        }
      },
      // 璁よ瘉鐩稿叧椤甸潰涓嶇紦瀛?      '/login': {
        headers: {
          'Cache-Control': 'no-cache, no-store, must-revalidate',
          Pragma: 'no-cache',
          Expires: '0'
        }
      },
      '/dashboard': {
        headers: {
          'Cache-Control': 'no-cache, no-store, must-revalidate',
          Pragma: 'no-cache',
          Expires: '0'
        }
      },
      '/change-password': {
        headers: {
          'Cache-Control': 'no-cache, no-store, must-revalidate',
          Pragma: 'no-cache',
          Expires: '0'
        }
      },
      '/auth/**': {
        headers: {
          'Cache-Control': 'no-cache, no-store, must-revalidate',
          Pragma: 'no-cache',
          Expires: '0'
        }
      },
      '/notification-settings': {
        headers: {
          'Cache-Control': 'no-cache, no-store, must-revalidate',
          Pragma: 'no-cache',
          Expires: '0'
        }
      }
    },
    // 鏍规嵁閮ㄧ讲鐜璋冩暣閰嶇疆
    ...(process.env.VERCEL
      ? {
          // Vercel 鐜锛氫娇鐢ㄦ爣鍑嗛厤缃?        }
      : process.env.NETLIFY
        ? {
            // Netlify 鐜锛氱‘淇?Drizzle 姝ｇ‘鎵撳寘
            experimental: {
              wasm: true
            }
          }
        : {
            // 鍏朵粬鐜锛氫娇鐢ㄦ爣鍑嗛厤缃?          })
  },
  // Vite 閰嶇疆
  vite: {
    build: {
      chunkSizeWarningLimit: 2000,
      cssCodeSplit: true,
      rollupOptions: {
        maxParallelFileOps: 2,
        output: {
          manualChunks(id) {
            if (id.includes('node_modules/lucide-vue-next')) {
              return 'lucide'
            }
          }
        }
      }
    },
    resolve: {
      alias: [
        {
          find: '@applemusic-like-lyrics/core/style.css',
          replacement: fileURLToPath(
            new URL('./vendor/amll-core/src/styles/index.css', import.meta.url)
          )
        },
        {
          find: '@applemusic-like-lyrics/core',
          replacement: fileURLToPath(new URL('./vendor/amll-core/src/index.ts', import.meta.url))
        }
      ]
    },
    plugins: [wasm(), glsl()],
    optimizeDeps: {
      include: ['drizzle-orm'],
      exclude: ['@applemusic-like-lyrics/vue', '@applemusic-like-lyrics/lyric']
    },
    build: {
      sourcemap: false,
      rollupOptions: {
        output: {
          manualChunks(id) {
            if (!id.includes('node_modules')) return
            if (id.includes('lucide-vue-next')) return 'icons'
            if (id.includes('@pixi')) return 'pixi'
            if (id.includes('@applemusic-like-lyrics')) return 'lyric-engine'
            if (id.includes('drizzle-orm') || id.includes('postgres')) return 'database'
            if (id.includes('xlsx') || id.includes('jspdf') || id.includes('jszip')) return 'office'
          }
        }
      }
    },
    // 娣诲姞 WASM 鏀寔閰嶇疆
    assetsInclude: ['**/*.wasm'],
    // SSR閰嶇疆
    ssr: {
      noExternal: process.env.NETLIFY
        ? ['drizzle-orm', 'postgres']
        : process.env.VERCEL
          ? []
          : ['drizzle-orm', 'postgres']
    }
  }
 })
@@ -0,0 +1,433 @@
 import wasm from 'vite-plugin-wasm'
 import glsl from 'vite-plugin-glsl'
 import { fileURLToPath } from 'url'
 import { index, uniqueIndex } from 'drizzle-orm'
 const customSeoConfig: Record<string, unknown> | null = (() => {
  const raw = process.env.NUXT_PUBLIC_SEO_CONFIG
  if (!raw) return null
  try {
    const parsed = JSON.parse(raw)
    if (parsed && typeof parsed === 'object') return parsed as Record<string, unknown>
    return null
  } catch {
    return null
  }
 })()
 function readNumberEnv(name: string, defaultValue: number): number {
  const raw = process.env[name]
  if (raw === undefined || raw === '') return defaultValue
  const num = Number(raw)
  return Number.isFinite(num) ? num : defaultValue
 }
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
  compatibilityDate: '2026-01-30',
  future: {
    compatibilityVersion: 4
  },
  srcDir: 'app',
  serverDir: fileURLToPath(new URL('./server', import.meta.url)),
  dir: {
    public: fileURLToPath(new URL('./public', import.meta.url))
  },
  devtools: { enabled: process.env.NODE_ENV === 'development' },
  devServer: {
    host: '0.0.0.0',
    port: 3000
  },
  modules: [
    '@nuxtjs/tailwindcss',
    ...((process.env.NODE_ENV === 'development' || process.env.npm_lifecycle_event?.includes('lint'))
      ? ['@nuxt/eslint']
      : []),
    ...((process.env.PWA_ENABLED || 'false') === 'true'
      ? ['@vite-pwa/nuxt']
      : [])
  ],
  pwa: (process.env.PWA_ENABLED || 'false') === 'true'
    ? {
        registerType: 'autoUpdate',
        manifest: {
          name: process.env.NUXT_PUBLIC_SITE_TITLE || '鏍″洯骞挎挱绔欑偣姝岀郴缁?,
          short_name: process.env.NUXT_PUBLIC_SITE_TITLE || 'VoiceHub',
          description: process.env.NUXT_PUBLIC_SITE_DESCRIPTION || '鏍″洯骞挎挱绔欑偣姝岀郴缁?,
          display: (process.env.PWA_DISPLAY as any) || 'standalone',
          background_color: process.env.PWA_BACKGROUND_COLOR || '#000000',
          theme_color: process.env.PWA_THEME_COLOR || '#111111',
          icons: [
            {
              src: '/images/logo.png',
              sizes: '192x192',
              type: 'image/png'
            },
            {
              src: '/images/logo.png',
              sizes: '512x512',
              type: 'image/png'
            }
          ]
        },
        workbox: {
          navigateFallback: '/',
          globPatterns: ['**/*.{js,css,html,png,jpg,jpeg,svg,ico,webp,woff2}']
        },
        client: {
          installPrompt: true,
          periodicSyncForUpdates: 3600
        },
        devOptions: {
          enabled: process.env.NODE_ENV === 'development'
        }
      }
    : {},
  // 寮曞叆鍏ㄥ眬CSS
  css: [
    '~/assets/css/variables.css',
    '~/assets/css/components.css',
    '~/assets/css/main.css',
    '~/assets/css/transitions.css',
    '~/assets/css/mobile-admin.css',
    '~/assets/css/print-fix.css',
    '~/assets/css/sf-pro-icons.css'
  ],
  build: {
    transpile: []
  },
  // 瀹為獙鎬т紭鍖栧姛鑳?  experimental: {
    payloadExtraction: true,
    renderJsonPayloads: true,
    viewTransition: true
  },
  // 閰嶇疆杩愯鏃堕厤缃?  runtimeConfig: {
    // 鏈嶅姟鍣ㄧ鏈夐敭锛堜笉浼氭毚闇插埌瀹㈡埛绔級
    jwtSecret: process.env.JWT_SECRET || 'your-secret-key',
    // Redis閰嶇疆锛堝彲閫夛級
    redisUrl: process.env.REDIS_URL || '',
    redisKeyPrefix: process.env.REDIS_KEY_PREFIX || '',
    // Sentry 鏈嶅姟绔厤缃紙涓嶄細鏆撮湶鍒板鎴风锛?    sentry: {
      serverDsn: process.env.SENTRY_SERVER_DSN || process.env.SENTRY_DSN || '',
      dsn: process.env.SENTRY_DSN || '',
      errorSampleRate: readNumberEnv('SENTRY_ERROR_SAMPLE_RATE', 1.0),
      tracesSampleRate: readNumberEnv('SENTRY_TRACES_SAMPLE_RATE', 1.0),
      replaySessionSampleRate: readNumberEnv('SENTRY_REPLAY_SESSION_SAMPLE_RATE', 0),
      replayOnErrorSampleRate: readNumberEnv('SENTRY_REPLAY_ON_ERROR_SAMPLE_RATE', 0),
      release: process.env.SENTRY_RELEASE || '',
      environment: process.env.SENTRY_ENVIRONMENT || process.env.NODE_ENV || 'production'
    },
    // 鍏叡閿紙浼氭毚闇插埌瀹㈡埛绔級
    public: {
      host: process.env.NUXT_PUBLIC_HOST || '',
      apiBase: '/api',
      oauth: {
        github: !!process.env.GITHUB_CLIENT_ID,
        casdoor: !!process.env.CASDOOR_CLIENT_ID,
        google: !!process.env.GOOGLE_CLIENT_ID,
        aggregate: !!process.env.AGGREGATE_OAUTH_APP_ID
      },
      siteTitle: process.env.NUXT_PUBLIC_SITE_TITLE || '鏍″洯骞挎挱绔欑偣姝岀郴缁?,
      siteLogo: process.env.NUXT_PUBLIC_SITE_LOGO || '',
      siteDescription:
        process.env.NUXT_PUBLIC_SITE_DESCRIPTION || '鏍″洯骞挎挱绔欑偣姝岀郴缁?- 璁╀綘鐨勫０闊宠鍚',
      isNetlify: process.env.NETLIFY === 'true',
      // SEO 鑷畾涔夐厤缃紙閫氳繃 NUXT_PUBLIC_SEO_CONFIG 娉ㄥ叆 JSON 瀛楃涓诧級
      seoConfig: customSeoConfig ?? {},
      // 鍥惧舰楠岃瘉鐮佺浉鍏?      captcha: {
        enabled: (process.env.CAPTCHA_ENABLED || 'false') === 'true',
        provider: process.env.CAPTCHA_PROVIDER || 'turnstile',
        siteKey: process.env.CAPTCHA_SITE_KEY || ''
      },
      // PWA 鐩稿叧缁撴瀯锛堟湰鍦颁笉鍚敤妯″潡锛屼絾淇濈暀閰嶇疆椤逛互渚夸笂灞傚簲鐢ㄤ娇鐢級
      pwa: {
        enabled: (process.env.PWA_ENABLED || 'false') === 'true',
        display: process.env.PWA_DISPLAY || 'standalone',
        backgroundColor: process.env.PWA_BACKGROUND_COLOR || '#000000',
        themeColor: process.env.PWA_THEME_COLOR || '#111111'
      },
      // 涓婚閰嶇疆
      defaultTheme: process.env.NUXT_PUBLIC_DEFAULT_THEME || 'ClassicLight',
      enabledThemes: (process.env.NUXT_PUBLIC_ENABLED_THEMES || 'ClassicLight,ModernLight')
        .split(',')
        .map((s) => s.trim())
        .filter(Boolean),
      // Sentry 瀹㈡埛绔厤缃紙浠呭叕寮€ DSN 涓庨噰鏍风巼锛?      sentry: {
        dsn: process.env.SENTRY_DSN || '',
        tracesSampleRate: readNumberEnv('SENTRY_TRACES_SAMPLE_RATE', 1.0),
        replaySessionSampleRate: readNumberEnv('SENTRY_REPLAY_SESSION_SAMPLE_RATE', 0),
        replayOnErrorSampleRate: readNumberEnv('SENTRY_REPLAY_ON_ERROR_SAMPLE_RATE', 0)
      }
    }
  },
  // 閰嶇疆鐜鍙橀噺
  app: {
    head: {
      title: process.env.NUXT_PUBLIC_SITE_TITLE || '鏍″洯骞挎挱绔欑偣姝岀郴缁?,
      htmlAttrs: { lang: 'zh-CN' },
      meta: [
        { charset: 'utf-8' },
        {
          name: 'viewport',
          content:
            'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover'
        },
        {
          name: 'description',
          content:
            process.env.NUXT_PUBLIC_SITE_DESCRIPTION || '鏍″洯骞挎挱绔欑偣姝岀郴缁?- 璁╀綘鐨勫０闊宠鍚'
        },
        // 绉诲姩绔紭鍖?        { name: 'theme-color', content: '#111111' },
        {
          name: 'x-default-theme',
          content: process.env.NUXT_PUBLIC_DEFAULT_THEME || 'System'
        },
        { name: 'apple-mobile-web-app-capable', content: 'yes' },
        { name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent' },
        { name: 'apple-mobile-web-app-title', content: 'VoiceHub绠＄悊' },
        { name: 'mobile-web-app-capable', content: 'yes' },
        { name: 'format-detection', content: 'telephone=no' }
      ],
      script: [
        {
          type: 'text/javascript',
          tagPosition: 'head',
          children: [
            `(function(){try{`,
            `  var k='voicehub:theme', d=document, r=d.documentElement, s=null, eff=null;`,
            `  try{s=localStorage.getItem(k)}catch(e){s=null}`,
            `  if(!s){`,
            `    try{`,
            `      var meta=document.querySelector('meta[name="x-default-theme"]');`,
            `      if(meta && meta.content){s=meta.content}`,
            `    }catch(e){s=null}`,
            `    if(!s){s='System'}`,
            `  }`,
            `  if(s==='System'||s==='system'){eff=window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light'}`,
            `  else if(typeof s==='string'){eff=s.endsWith('Dark')||s==='dark'?'dark':(s.endsWith('Light')||s==='light'?'light':s)}`,
            `  else{eff='dark'}`,
            `  r.setAttribute('data-theme', (typeof s==='string'?s:eff));`,
            `  if(eff==='dark'){r.classList.add('dark'); r.classList.remove('light'); r.style.colorScheme='dark'}`,
            `  else if(eff==='light'){r.classList.add('light'); r.classList.remove('dark'); r.style.colorScheme='light'}`,
            `  else{r.classList.remove('dark','light'); r.style.colorScheme='light dark'}`,
            `  try{`,
            `    var tm=d.querySelector('meta[name="theme-color"]');`,
            `    if(tm){tm.content=(eff==='light'?'#f8fafc':'#111111')}`,
            `  }catch(e){}`,
            `}catch(e){}})();`
          ].join('')
        }
      ],
      link: [
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
        { rel: 'preload', as: 'image', href: '/images/logo.png' },
        { rel: 'preload', as: 'image', href: '/images/site-logo.png' },
        { rel: 'preload', as: 'image', href: '/images/school-logo-white.png' },
        // 浼樺厛鍔犺浇甯歌瀛椾綋锛岀‘淇濋〉闈㈠揩閫熸樉绀?        {
          rel: 'preload',
          as: 'style',
          href: 'https://cdn.jsdelivr.net/npm/misans@4.1.0/lib/Normal/MiSans-Regular.min.css'
        },
        {
          rel: 'stylesheet',
          href: 'https://cdn.jsdelivr.net/npm/misans@4.1.0/lib/Normal/MiSans-Regular.min.css'
        },
        // 寤惰繜鍔犺浇鍏朵粬瀛楅噸锛岄伩鍏嶉樆濉為〉闈㈡覆鏌?        {
          rel: 'preload',
          as: 'style',
          href: 'https://cdn.jsdelivr.net/npm/misans@4.1.0/lib/Normal/MiSans-Medium.min.css',
          onload: "this.onload=null;this.rel='stylesheet'"
        },
        {
          rel: 'preload',
          as: 'style',
          href: 'https://cdn.jsdelivr.net/npm/misans@4.1.0/lib/Normal/MiSans-Semibold.min.css',
          onload: "this.onload=null;this.rel='stylesheet'"
        },
        {
          rel: 'preload',
          as: 'style',
          href: 'https://cdn.jsdelivr.net/npm/misans@4.1.0/lib/Normal/MiSans-Bold.min.css',
          onload: "this.onload=null;this.rel='stylesheet'"
        }
      ]
    }
  },
  features: {
    inlineStyles: false
  },
  // TypeScript閰嶇疆
  typescript: {
    strict: true
  },
  // 鏈嶅姟鍣ㄧ閰嶇疆
  nitro: {
    compressPublicAssets: true,
    preset: process.env.VERCEL
      ? 'vercel'
      : process.env.NETLIFY
        ? 'netlify'
        : process.env.NITRO_PRESET || 'node-server',
    // 澧炲己閿欒澶勭悊鍜岀ǔ瀹氭€?    experimental: {
      wasm: true,
      asyncContext: true
    },
    timing: true,
    // 澧炲姞璇锋眰瓒呮椂鏃堕棿
    routeRules: {
      // 瀹屽叏绂佺敤鎵€鏈堿PI璺敱鐨勭紦瀛橈紝纭繚姣忔閮借姹傛暟鎹簱
      '/api/**': {
        headers: {
          'Cache-Control': 'no-cache, no-store, must-revalidate',
          Pragma: 'no-cache',
          Expires: '0',
          Connection: 'keep-alive'
        }
      },
      // 闈欐€佽祫婧愭枃浠剁紦瀛橀厤缃?      '/_nuxt/**': {
        headers: {
          'Cache-Control': 'public, max-age=31536000, immutable'
        }
      },
      '/assets/**': {
        headers: {
          'Cache-Control': 'public, max-age=31536000, immutable'
        }
      },
      '/favicon.ico': {
        headers: {
          'Cache-Control': 'public, max-age=86400'
        }
      },
      // 鍥剧墖銆丆SS銆丣S绛夐潤鎬佽祫婧愮紦瀛?      '/**/*.{png,jpg,jpeg,gif,webp,svg,ico}': {
        headers: {
          'Cache-Control': 'public, max-age=31536000, immutable'
        }
      },
      '/**/*.{css,js}': {
        headers: {
          'Cache-Control': 'public, max-age=31536000, immutable'
        }
      },
      // 璁よ瘉鐩稿叧椤甸潰涓嶇紦瀛?      '/login': {
        headers: {
          'Cache-Control': 'no-cache, no-store, must-revalidate',
          Pragma: 'no-cache',
          Expires: '0'
        }
      },
      '/dashboard': {
        headers: {
          'Cache-Control': 'no-cache, no-store, must-revalidate',
          Pragma: 'no-cache',
          Expires: '0'
        }
      },
      '/change-password': {
        headers: {
          'Cache-Control': 'no-cache, no-store, must-revalidate',
          Pragma: 'no-cache',
          Expires: '0'
        }
      },
      '/auth/**': {
        headers: {
          'Cache-Control': 'no-cache, no-store, must-revalidate',
          Pragma: 'no-cache',
          Expires: '0'
        }
      },
      '/notification-settings': {
        headers: {
          'Cache-Control': 'no-cache, no-store, must-revalidate',
          Pragma: 'no-cache',
          Expires: '0'
        }
      }
    },
    // 鏍规嵁閮ㄧ讲鐜璋冩暣閰嶇疆
    ...(process.env.VERCEL
      ? {
          // Vercel 鐜锛氫娇鐢ㄦ爣鍑嗛厤缃?        }
      : process.env.NETLIFY
        ? {
            // Netlify 鐜锛氱‘淇?Drizzle 姝ｇ‘鎵撳寘
            experimental: {
              wasm: true
            }
          }
        : {
            // 鍏朵粬鐜锛氫娇鐢ㄦ爣鍑嗛厤缃?          })
  },
  // Vite 閰嶇疆
  vite: {
    build: {
      chunkSizeWarningLimit: 2000,
      cssCodeSplit: true,
      rollupOptions: {
        maxParallelFileOps: 2,
        output: {
          manualChunks(id) {
            if (id.includes('node_modules/lucide-vue-next')) {
              return 'lucide'
            }
          }
        }
      }
    },
    resolve: {
      alias: [
        {
          find: '@applemusic-like-lyrics/core/style.css',
          replacement: fileURLToPath(
            new URL('./vendor/amll-core/src/styles/index.css', import.meta.url)
          )
        },
        {
          find: '@applemusic-like-lyrics/core',
          replacement: fileURLToPath(new URL('./vendor/amll-core/src/index.ts', import.meta.url))
        }
      ]
    },
    plugins: [wasm(), glsl()],
    optimizeDeps: {
      include: ['drizzle-orm'],
      exclude: ['@applemusic-like-lyrics/vue', '@applemusic-like-lyrics/lyric']
    },
    build: {
      sourcemap: false,
      rollupOptions: {
        output: {
          manualChunks(id) {
            if (!id.includes('node_modules')) return
            if (id.includes('lucide-vue-next')) return 'icons'
            if (id.includes('@pixi')) return 'pixi'
            if (id.includes('@applemusic-like-lyrics')) return 'lyric-engine'
            if (id.includes('drizzle-orm') || id.includes('postgres')) return 'database'
            if (id.includes('xlsx') || id.includes('jspdf') || id.includes('jszip')) return 'office'
          }
        }
      }
    },
    // 娣诲姞 WASM 鏀寔閰嶇疆
    assetsInclude: ['**/*.wasm'],
    // SSR閰嶇疆
    ssr: {
      noExternal: process.env.NETLIFY
        ? ['drizzle-orm', 'postgres']
        : process.env.VERCEL
          ? []
          : ['drizzle-orm', 'postgres']
    }
  }
 })
@@ -0,0 +1,556 @@
 /* 鍏ㄥ眬CSS鍙橀噺 - 缁熶竴閰嶈壊鏂规 */
 :root {
  /* 涓昏壊璋?*/
  --primary: #3b82f6;
  --primary-hover: #2563eb;
  --primary-light: rgba(59, 130, 246, 0.1);
  --primary-border: rgba(59, 130, 246, 0.2);
  /* 鎴愬姛鑹?*/
  --success: #10b981;
  --success-hover: #059669;
  --success-light: rgba(16, 185, 129, 0.1);
  --success-border: rgba(16, 185, 129, 0.2);
  /* 璀﹀憡鑹?*/
  --warning: #f59e0b;
  --warning-hover: #d97706;
  --warning-light: rgba(245, 158, 11, 0.1);
  --warning-border: rgba(245, 158, 11, 0.2);
  /* 閿欒鑹?*/
  --error: #ef4444;
  --error-hover: #dc2626;
  --error-light: rgba(239, 68, 68, 0.1);
  --error-border: rgba(239, 68, 68, 0.2);
  /* 淇℃伅鑹?*/
  --info: #3b82f6;
  --info-hover: #2563eb;
  --info-light: rgba(59, 130, 246, 0.1);
  --info-border: rgba(59, 130, 246, 0.2);
  /* 鑳屾櫙鑹?*/
  --bg-primary: #111111;
  --bg-secondary: #1a1a1a;
  --bg-tertiary: #2a2a2a;
  --bg-quaternary: #3a3a3a;
  --bg-hover: #1f1f1f;
  /* 鏂囧瓧棰滆壊 */
  --text-primary: #ffffff;
  --text-secondary: #cccccc;
  --text-tertiary: #888888;
  --text-quaternary: #666666;
  --text-disabled: #444444;
  /* 杈规棰滆壊 */
  --border-primary: #1f1f1f;
  --border-secondary: #2a2a2a;
  --border-tertiary: #3a3a3a;
  --border-quaternary: #4a4a4a;
  /* 闃村奖 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
  /* 鍦嗚 */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  /* 闂磋窛 */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-2xl: 24px;
  --spacing-3xl: 32px;
  /* 瀛椾綋澶у皬 */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  /* 瀛椾綋绮楃粏 */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  /* 杩囨浮鍔ㄧ敾 */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;
  --transition-slow: 0.3s ease;
  /* Z-index灞傜骇 */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-toast: 800;
  /* 鐗规畩鐘舵€侀鑹?*/
  --status-pending: #fbbf24;
  --status-pending-light: rgba(251, 191, 36, 0.1);
  --status-approved: #10b981;
  --status-approved-light: rgba(16, 185, 129, 0.1);
  --status-played: #6b7280;
  --status-played-light: rgba(107, 114, 128, 0.1);
  /* 鎶曠エ鐩稿叧棰滆壊 */
  --vote-heart: #ef4444;
  --vote-heart-hover: #dc2626;
  --vote-count: var(--text-tertiary);
  /* 鎷栨嫿鐘舵€侀鑹?*/
  --drag-over: var(--primary-light);
  --drag-over-border: var(--primary);
  --dragging-opacity: 0.5;
  /* 琛ㄦ牸棰滆壊 */
  --table-header-bg: var(--bg-tertiary);
  --table-row-hover: var(--bg-hover);
  --table-border: var(--border-secondary);
  --table-selected: var(--primary-light);
  /* 鍗＄墖棰滆壊 */
  --card-bg: var(--bg-secondary);
  --card-border: var(--border-secondary);
  --card-hover-border: var(--border-tertiary);
  --card-shadow: var(--shadow-md);
  /* 鎸夐挳棰滆壊 */
  --btn-primary-bg: var(--primary);
  --btn-primary-hover: var(--primary-hover);
  --btn-primary-text: var(--text-primary);
  --btn-primary-border: var(--primary-border);
  --btn-secondary-bg: #3a3a3a;
  --btn-secondary-hover: #4a4a4a;
  --btn-secondary-text: var(--text-primary);
  --btn-secondary-border: #555555;
  --btn-success-bg: var(--success);
  --btn-success-hover: var(--success-hover);
  --btn-success-text: var(--text-primary);
  --btn-success-border: var(--success-border);
  --btn-warning-bg: var(--warning);
  --btn-warning-hover: var(--warning-hover);
  --btn-warning-text: var(--text-primary);
  --btn-warning-border: var(--warning-border);
  --btn-error-bg: var(--error);
  --btn-error-hover: var(--error-hover);
  --btn-error-text: var(--text-primary);
  --btn-error-border: var(--error-border);
  --btn-disabled-bg: var(--bg-tertiary);
  --btn-disabled-text: var(--text-disabled);
  /* 杈撳叆妗嗛鑹?*/
  --input-bg: var(--bg-tertiary);
  --input-border: var(--border-tertiary);
  --input-border-focus: var(--primary);
  --input-text: var(--text-primary);
  --input-placeholder: var(--text-quaternary);
  --input-shadow-focus: 0 0 0 3px var(--primary-light);
  /* 妯℃€佹棰滆壊 */
  --modal-backdrop: rgba(0, 0, 0, 0.7);
  --modal-bg: var(--bg-secondary);
  --modal-border: var(--border-secondary);
  --modal-header-border: var(--border-secondary);
  --modal-footer-border: var(--border-secondary);
  /* 閫氱煡棰滆壊 */
  --notification-success-bg: var(--success-light);
  --notification-success-border: var(--success-border);
  --notification-success-text: var(--success);
  --notification-warning-bg: var(--warning-light);
  --notification-warning-border: var(--warning-border);
  --notification-warning-text: var(--warning);
  --notification-error-bg: var(--error-light);
  --notification-error-border: var(--error-border);
  --notification-error-text: var(--error);
  --notification-info-bg: var(--info-light);
  --notification-info-border: var(--info-border);
  --notification-info-text: var(--info);
  /* 鍔犺浇鍔ㄧ敾棰滆壊 */
  --spinner-primary: var(--primary);
  --spinner-secondary: var(--bg-tertiary);
  /* 婊氬姩鏉￠鑹?*/
  --scrollbar-track: var(--bg-tertiary);
  --scrollbar-thumb: var(--bg-quaternary);
  --scrollbar-thumb-hover: #4a4a4a;
 }
 :root[data-theme='light'],
 :root[data-theme='ClassicLight'],
 :root[data-theme='ModernLight'] {
  --bg-primary: #f8fafc;
  --bg-secondary: #f1f5f9;
  --bg-tertiary: #e2e8f0;
  --bg-quaternary: #cbd5e1;
  --bg-hover: #e2e8f0;
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-tertiary: #475569;
  --text-quaternary: #64748b;
  --text-disabled: #94a3b8;
  --border-primary: #e2e8f0;
  --border-secondary: #cbd5e1;
  --border-tertiary: #94a3b8;
  --border-quaternary: #64748b;
  --modal-backdrop: rgba(0, 0, 0, 0.4);
  --scrollbar-thumb-hover: #94a3b8;
  --btn-secondary-bg: #f1f5f9;
  --btn-secondary-hover: #e2e8f0;
  --btn-secondary-text: #0f172a;
  --btn-secondary-border: #cbd5e1;
  --card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
 }
 :root[data-theme='ClassicLight'] {
  --primary: #1e40af;
  --primary-hover: #1e3a8a;
  --primary-light: rgba(30, 64, 175, 0.08);
  --primary-border: rgba(30, 64, 175, 0.15);
  --bg-primary: #ffffff;
  --bg-secondary: #f5f7fa;
  --bg-tertiary: #edf0f5;
  --bg-quaternary: #d9dee7;
  --bg-hover: #f0f3f8;
  --success: #059669;
  --success-hover: #047857;
  --success-light: rgba(5, 150, 105, 0.08);
  --success-border: rgba(5, 150, 105, 0.15);
  --warning: #d97706;
  --warning-hover: #b45309;
  --warning-light: rgba(217, 119, 6, 0.08);
  --warning-border: rgba(217, 119, 6, 0.15);
  --error: #dc2626;
  --error-hover: #b91c1c;
  --error-light: rgba(220, 38, 38, 0.08);
  --error-border: rgba(220, 38, 38, 0.15);
  --info: #2563eb;
  --info-hover: #1d4ed8;
  --info-light: rgba(37, 99, 235, 0.08);
  --info-border: rgba(37, 99, 235, 0.15);
  --text-primary: #1a2332;
  --text-secondary: #4a5568;
  --text-tertiary: #6b7280;
  --text-quaternary: #9ca3af;
  --text-disabled: #c5cbd3;
  --border-primary: #e5e7eb;
  --border-secondary: #d1d5db;
  --border-tertiary: #9ca3af;
  --border-quaternary: #6b7280;
  --input-bg: #ffffff;
  --input-border: #d1d5db;
  --input-border-focus: #1e40af;
  --input-text: #1a2332;
  --input-placeholder: #9ca3af;
  --input-shadow-focus: 0 0 0 3px rgba(30, 64, 175, 0.1);
  --card-bg: #ffffff;
  --card-border: #e5e7eb;
  --card-hover-border: #d1d5db;
  --table-header-bg: #f5f7fa;
  --table-row-hover: #f9fafb;
  --table-border: #e5e7eb;
  --table-selected: rgba(30, 64, 175, 0.06);
  --scrollbar-track: #f1f5f9;
  --scrollbar-thumb: #cbd5e1;
  --scrollbar-thumb-hover: #94a3b8;
  --status-pending: #ca8a04;
  --status-pending-light: rgba(202, 138, 4, 0.08);
  --status-approved: #059669;
  --status-approved-light: rgba(5, 150, 105, 0.08);
  --status-played: #6b7280;
  --status-played-light: rgba(107, 114, 128, 0.08);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.06), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.06), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-2xl: 10px;
 }
 :root[data-theme='ModernLight'] {
  --primary: #4f46e5;
  --primary-hover: #4338ca;
  --primary-light: rgba(79, 70, 229, 0.1);
  --primary-border: rgba(79, 70, 229, 0.2);
  --bg-primary: #fafafa;
  --bg-secondary: #f4f4f5;
  --bg-tertiary: #e4e4e7;
  --bg-quaternary: #d4d4d8;
  --bg-hover: #eeeeef;
  --success: #16a34a;
  --success-hover: #15803d;
  --success-light: rgba(22, 163, 74, 0.1);
  --success-border: rgba(22, 163, 74, 0.2);
  --warning: #ea580c;
  --warning-hover: #c2410c;
  --warning-light: rgba(234, 88, 12, 0.1);
  --warning-border: rgba(234, 88, 12, 0.2);
  --error: #e11d48;
  --error-hover: #be123c;
  --error-light: rgba(225, 29, 72, 0.1);
  --error-border: rgba(225, 29, 72, 0.2);
  --info: #0ea5e9;
  --info-hover: #0284c7;
  --info-light: rgba(14, 165, 233, 0.1);
  --info-border: rgba(14, 165, 233, 0.2);
  --text-primary: #09090b;
  --text-secondary: #3f3f46;
  --text-tertiary: #71717a;
  --text-quaternary: #a1a1aa;
  --text-disabled: #d4d4d8;
  --border-primary: #e4e4e7;
  --border-secondary: #d4d4d8;
  --border-tertiary: #a1a1aa;
  --border-quaternary: #71717a;
  --input-bg: #ffffff;
  --input-border: #e4e4e7;
  --input-border-focus: #4f46e5;
  --input-text: #09090b;
  --input-placeholder: #a1a1aa;
  --input-shadow-focus: 0 0 0 3px rgba(79, 70, 229, 0.12);
  --card-bg: #ffffff;
  --card-border: #e4e4e7;
  --card-hover-border: #d4d4d8;
  --table-header-bg: #f4f4f5;
  --table-row-hover: #fafafa;
  --table-border: #e4e4e7;
  --table-selected: rgba(79, 70, 229, 0.08);
  --scrollbar-track: #f4f4f5;
  --scrollbar-thumb: #d4d4d8;
  --scrollbar-thumb-hover: #a1a1aa;
  --status-pending: #eab308;
  --status-pending-light: rgba(234, 179, 8, 0.12);
  --status-approved: #22c55e;
  --status-approved-light: rgba(34, 197, 94, 0.12);
  --status-played: #71717a;
  --status-played-light: rgba(113, 113, 122, 0.12);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  --shadow-md: 0 2px 8px -2px rgba(0, 0, 0, 0.05), 0 1px 3px 0 rgba(0, 0, 0, 0.03);
  --shadow-lg: 0 8px 24px -4px rgba(0, 0, 0, 0.06), 0 2px 8px -4px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 16px 40px -8px rgba(0, 0, 0, 0.08), 0 4px 16px -8px rgba(0, 0, 0, 0.05);
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-2xl: 12px;
 }
 /* 娣辫壊涓婚鐗瑰畾璋冩暣 */
@media (prefers-color-scheme: dark) {
  :root {
    /* 鍦ㄦ繁鑹叉ā寮忎笅鍙互杩涜寰皟 */
  }
 }
 /* 楂樺姣斿害妯″紡鏀寔 */
@media (prefers-contrast: high) {
  :root {
    --border-primary: #444444;
    --border-secondary: #555555;
    --border-tertiary: #666666;
    --text-tertiary: #aaaaaa;
    --text-quaternary: #888888;
  }
 }
 /* 鍑忓皯鍔ㄧ敾妯″紡鏀寔 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0s;
    --transition-normal: 0s;
    --transition-slow: 0s;
  }
 }
 /* 鍏ㄥ眬婊氬姩鏉℃牱寮?*/
 * {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
 }
 *::-webkit-scrollbar {
  width: 8px;
  height: 8px;
 }
 *::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
 }
 *::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--radius-md);
 }
 *::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
 }
 /* 鍏ㄥ眬閫夋嫨鏂囨湰鏍峰紡 */
 ::selection {
  background: var(--primary-light);
  color: var(--text-primary);
 }
 /* 鍏ㄥ眬鐒︾偣鏍峰紡 */
 *:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
 }
 *:focus:not(:focus-visible) {
  outline: none;
 }
 /* 鍏ㄥ眬绂佺敤鐘舵€佹牱寮?*/
 *:disabled {
  cursor: not-allowed;
  opacity: 0.6;
 }
 /* 鍏ㄥ眬閾炬帴鏍峰紡 */
 a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--transition-normal);
 }
 a:hover {
  color: var(--primary-hover);
 }
 /* 鍏ㄥ眬鎸夐挳閲嶇疆 */
 button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
 }
 * {
  -webkit-tap-highlight-color: transparent;
 }
 button,
 a,
 input,
 textarea {
  -webkit-tap-highlight-color: transparent;
 }
@media (hover: none) and (pointer: coarse) {
  *:focus {
    outline: none !important;
  }
  button,
  a {
    -webkit-user-select: none;
    user-select: none;
  }
 }
 /* 鍏ㄥ眬杈撳叆妗嗛噸缃?*/
 input,
 textarea,
 select {
  font-family: inherit;
  font-size: inherit;
 }
 /* 鍏ㄥ眬鍥剧墖鏍峰紡 */
 img {
  max-width: 100%;
  height: auto;
 }
 /* 鍏ㄥ眬琛ㄦ牸鏍峰紡 */
 table {
  border-collapse: collapse;
  width: 100%;
 }
 /* 鍏ㄥ眬浠ｇ爜鏍峰紡 */
 code,
 pre {
  font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
 }
 code {
  padding: 2px 4px;
  font-size: 0.875em;
 }
 pre {
  padding: var(--spacing-lg);
  overflow-x: auto;
 }
 pre code {
  padding: 0;
  background: none;
 }
@@ -0,0 +1,556 @@
 /* 鍏ㄥ眬CSS鍙橀噺 - 缁熶竴閰嶈壊鏂规 */
 :root {
  /* 涓昏壊璋?*/
  --primary: #3b82f6;
  --primary-hover: #2563eb;
  --primary-light: rgba(59, 130, 246, 0.1);
  --primary-border: rgba(59, 130, 246, 0.2);
  /* 鎴愬姛鑹?*/
  --success: #10b981;
  --success-hover: #059669;
  --success-light: rgba(16, 185, 129, 0.1);
  --success-border: rgba(16, 185, 129, 0.2);
  /* 璀﹀憡鑹?*/
  --warning: #f59e0b;
  --warning-hover: #d97706;
  --warning-light: rgba(245, 158, 11, 0.1);
  --warning-border: rgba(245, 158, 11, 0.2);
  /* 閿欒鑹?*/
  --error: #ef4444;
  --error-hover: #dc2626;
  --error-light: rgba(239, 68, 68, 0.1);
  --error-border: rgba(239, 68, 68, 0.2);
  /* 淇℃伅鑹?*/
  --info: #3b82f6;
  --info-hover: #2563eb;
  --info-light: rgba(59, 130, 246, 0.1);
  --info-border: rgba(59, 130, 246, 0.2);
  /* 鑳屾櫙鑹?*/
  --bg-primary: #111111;
  --bg-secondary: #1a1a1a;
  --bg-tertiary: #2a2a2a;
  --bg-quaternary: #3a3a3a;
  --bg-hover: #1f1f1f;
  /* 鏂囧瓧棰滆壊 */
  --text-primary: #ffffff;
  --text-secondary: #cccccc;
  --text-tertiary: #888888;
  --text-quaternary: #666666;
  --text-disabled: #444444;
  /* 杈规棰滆壊 */
  --border-primary: #1f1f1f;
  --border-secondary: #2a2a2a;
  --border-tertiary: #3a3a3a;
  --border-quaternary: #4a4a4a;
  /* 闃村奖 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
  /* 鍦嗚 */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  /* 闂磋窛 */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-2xl: 24px;
  --spacing-3xl: 32px;
  /* 瀛椾綋澶у皬 */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  /* 瀛椾綋绮楃粏 */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  /* 杩囨浮鍔ㄧ敾 */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;
  --transition-slow: 0.3s ease;
  /* Z-index灞傜骇 */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-toast: 800;
  /* 鐗规畩鐘舵€侀鑹?*/
  --status-pending: #fbbf24;
  --status-pending-light: rgba(251, 191, 36, 0.1);
  --status-approved: #10b981;
  --status-approved-light: rgba(16, 185, 129, 0.1);
  --status-played: #6b7280;
  --status-played-light: rgba(107, 114, 128, 0.1);
  /* 鎶曠エ鐩稿叧棰滆壊 */
  --vote-heart: #ef4444;
  --vote-heart-hover: #dc2626;
  --vote-count: var(--text-tertiary);
  /* 鎷栨嫿鐘舵€侀鑹?*/
  --drag-over: var(--primary-light);
  --drag-over-border: var(--primary);
  --dragging-opacity: 0.5;
  /* 琛ㄦ牸棰滆壊 */
  --table-header-bg: var(--bg-tertiary);
  --table-row-hover: var(--bg-hover);
  --table-border: var(--border-secondary);
  --table-selected: var(--primary-light);
  /* 鍗＄墖棰滆壊 */
  --card-bg: var(--bg-secondary);
  --card-border: var(--border-secondary);
  --card-hover-border: var(--border-tertiary);
  --card-shadow: var(--shadow-md);
  /* 鎸夐挳棰滆壊 */
  --btn-primary-bg: var(--primary);
  --btn-primary-hover: var(--primary-hover);
  --btn-primary-text: var(--text-primary);
  --btn-primary-border: var(--primary-border);
  --btn-secondary-bg: #3a3a3a;
  --btn-secondary-hover: #4a4a4a;
  --btn-secondary-text: var(--text-primary);
  --btn-secondary-border: #555555;
  --btn-success-bg: var(--success);
  --btn-success-hover: var(--success-hover);
  --btn-success-text: var(--text-primary);
  --btn-success-border: var(--success-border);
  --btn-warning-bg: var(--warning);
  --btn-warning-hover: var(--warning-hover);
  --btn-warning-text: var(--text-primary);
  --btn-warning-border: var(--warning-border);
  --btn-error-bg: var(--error);
  --btn-error-hover: var(--error-hover);
  --btn-error-text: var(--text-primary);
  --btn-error-border: var(--error-border);
  --btn-disabled-bg: var(--bg-tertiary);
  --btn-disabled-text: var(--text-disabled);
  /* 杈撳叆妗嗛鑹?*/
  --input-bg: var(--bg-tertiary);
  --input-border: var(--border-tertiary);
  --input-border-focus: var(--primary);
  --input-text: var(--text-primary);
  --input-placeholder: var(--text-quaternary);
  --input-shadow-focus: 0 0 0 3px var(--primary-light);
  /* 妯℃€佹棰滆壊 */
  --modal-backdrop: rgba(0, 0, 0, 0.7);
  --modal-bg: var(--bg-secondary);
  --modal-border: var(--border-secondary);
  --modal-header-border: var(--border-secondary);
  --modal-footer-border: var(--border-secondary);
  /* 閫氱煡棰滆壊 */
  --notification-success-bg: var(--success-light);
  --notification-success-border: var(--success-border);
  --notification-success-text: var(--success);
  --notification-warning-bg: var(--warning-light);
  --notification-warning-border: var(--warning-border);
  --notification-warning-text: var(--warning);
  --notification-error-bg: var(--error-light);
  --notification-error-border: var(--error-border);
  --notification-error-text: var(--error);
  --notification-info-bg: var(--info-light);
  --notification-info-border: var(--info-border);
  --notification-info-text: var(--info);
  /* 鍔犺浇鍔ㄧ敾棰滆壊 */
  --spinner-primary: var(--primary);
  --spinner-secondary: var(--bg-tertiary);
  /* 婊氬姩鏉￠鑹?*/
  --scrollbar-track: var(--bg-tertiary);
  --scrollbar-thumb: var(--bg-quaternary);
  --scrollbar-thumb-hover: #4a4a4a;
 }
 :root[data-theme='light'],
 :root[data-theme='ClassicLight'],
 :root[data-theme='ModernLight'] {
  --bg-primary: #f8fafc;
  --bg-secondary: #f1f5f9;
  --bg-tertiary: #e2e8f0;
  --bg-quaternary: #cbd5e1;
  --bg-hover: #e2e8f0;
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-tertiary: #475569;
  --text-quaternary: #64748b;
  --text-disabled: #94a3b8;
  --border-primary: #e2e8f0;
  --border-secondary: #cbd5e1;
  --border-tertiary: #94a3b8;
  --border-quaternary: #64748b;
  --modal-backdrop: rgba(0, 0, 0, 0.4);
  --scrollbar-thumb-hover: #94a3b8;
  --btn-secondary-bg: #f1f5f9;
  --btn-secondary-hover: #e2e8f0;
  --btn-secondary-text: #0f172a;
  --btn-secondary-border: #cbd5e1;
  --card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
 }
 :root[data-theme='ClassicLight'] {
  --primary: #1e40af;
  --primary-hover: #1e3a8a;
  --primary-light: rgba(30, 64, 175, 0.08);
  --primary-border: rgba(30, 64, 175, 0.15);
  --bg-primary: #ffffff;
  --bg-secondary: #f5f7fa;
  --bg-tertiary: #edf0f5;
  --bg-quaternary: #d9dee7;
  --bg-hover: #f0f3f8;
  --success: #059669;
  --success-hover: #047857;
  --success-light: rgba(5, 150, 105, 0.08);
  --success-border: rgba(5, 150, 105, 0.15);
  --warning: #d97706;
  --warning-hover: #b45309;
  --warning-light: rgba(217, 119, 6, 0.08);
  --warning-border: rgba(217, 119, 6, 0.15);
  --error: #dc2626;
  --error-hover: #b91c1c;
  --error-light: rgba(220, 38, 38, 0.08);
  --error-border: rgba(220, 38, 38, 0.15);
  --info: #2563eb;
  --info-hover: #1d4ed8;
  --info-light: rgba(37, 99, 235, 0.08);
  --info-border: rgba(37, 99, 235, 0.15);
  --text-primary: #1a2332;
  --text-secondary: #4a5568;
  --text-tertiary: #6b7280;
  --text-quaternary: #9ca3af;
  --text-disabled: #c5cbd3;
  --border-primary: #e5e7eb;
  --border-secondary: #d1d5db;
  --border-tertiary: #9ca3af;
  --border-quaternary: #6b7280;
  --input-bg: #ffffff;
  --input-border: #d1d5db;
  --input-border-focus: #1e40af;
  --input-text: #1a2332;
  --input-placeholder: #9ca3af;
  --input-shadow-focus: 0 0 0 3px rgba(30, 64, 175, 0.1);
  --card-bg: #ffffff;
  --card-border: #e5e7eb;
  --card-hover-border: #d1d5db;
  --table-header-bg: #f5f7fa;
  --table-row-hover: #f9fafb;
  --table-border: #e5e7eb;
  --table-selected: rgba(30, 64, 175, 0.06);
  --scrollbar-track: #f1f5f9;
  --scrollbar-thumb: #cbd5e1;
  --scrollbar-thumb-hover: #94a3b8;
  --status-pending: #ca8a04;
  --status-pending-light: rgba(202, 138, 4, 0.08);
  --status-approved: #059669;
  --status-approved-light: rgba(5, 150, 105, 0.08);
  --status-played: #6b7280;
  --status-played-light: rgba(107, 114, 128, 0.08);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.06), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.06), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-2xl: 10px;
 }
 :root[data-theme='ModernLight'] {
  --primary: #4f46e5;
  --primary-hover: #4338ca;
  --primary-light: rgba(79, 70, 229, 0.1);
  --primary-border: rgba(79, 70, 229, 0.2);
  --bg-primary: #fafafa;
  --bg-secondary: #f4f4f5;
  --bg-tertiary: #e4e4e7;
  --bg-quaternary: #d4d4d8;
  --bg-hover: #eeeeef;
  --success: #16a34a;
  --success-hover: #15803d;
  --success-light: rgba(22, 163, 74, 0.1);
  --success-border: rgba(22, 163, 74, 0.2);
  --warning: #ea580c;
  --warning-hover: #c2410c;
  --warning-light: rgba(234, 88, 12, 0.1);
  --warning-border: rgba(234, 88, 12, 0.2);
  --error: #e11d48;
  --error-hover: #be123c;
  --error-light: rgba(225, 29, 72, 0.1);
  --error-border: rgba(225, 29, 72, 0.2);
  --info: #0ea5e9;
  --info-hover: #0284c7;
  --info-light: rgba(14, 165, 233, 0.1);
  --info-border: rgba(14, 165, 233, 0.2);
  --text-primary: #09090b;
  --text-secondary: #3f3f46;
  --text-tertiary: #71717a;
  --text-quaternary: #a1a1aa;
  --text-disabled: #d4d4d8;
  --border-primary: #e4e4e7;
  --border-secondary: #d4d4d8;
  --border-tertiary: #a1a1aa;
  --border-quaternary: #71717a;
  --input-bg: #ffffff;
  --input-border: #e4e4e7;
  --input-border-focus: #4f46e5;
  --input-text: #09090b;
  --input-placeholder: #a1a1aa;
  --input-shadow-focus: 0 0 0 3px rgba(79, 70, 229, 0.12);
  --card-bg: #ffffff;
  --card-border: #e4e4e7;
  --card-hover-border: #d4d4d8;
  --table-header-bg: #f4f4f5;
  --table-row-hover: #fafafa;
  --table-border: #e4e4e7;
  --table-selected: rgba(79, 70, 229, 0.08);
  --scrollbar-track: #f4f4f5;
  --scrollbar-thumb: #d4d4d8;
  --scrollbar-thumb-hover: #a1a1aa;
  --status-pending: #eab308;
  --status-pending-light: rgba(234, 179, 8, 0.12);
  --status-approved: #22c55e;
  --status-approved-light: rgba(34, 197, 94, 0.12);
  --status-played: #71717a;
  --status-played-light: rgba(113, 113, 122, 0.12);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  --shadow-md: 0 2px 8px -2px rgba(0, 0, 0, 0.05), 0 1px 3px 0 rgba(0, 0, 0, 0.03);
  --shadow-lg: 0 8px 24px -4px rgba(0, 0, 0, 0.06), 0 2px 8px -4px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 16px 40px -8px rgba(0, 0, 0, 0.08), 0 4px 16px -8px rgba(0, 0, 0, 0.05);
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-2xl: 12px;
 }
 /* 娣辫壊涓婚鐗瑰畾璋冩暣 */
@media (prefers-color-scheme: dark) {
  :root {
    /* 鍦ㄦ繁鑹叉ā寮忎笅鍙互杩涜寰皟 */
  }
 }
 /* 楂樺姣斿害妯″紡鏀寔 */
@media (prefers-contrast: high) {
  :root {
    --border-primary: #444444;
    --border-secondary: #555555;
    --border-tertiary: #666666;
    --text-tertiary: #aaaaaa;
    --text-quaternary: #888888;
  }
 }
 /* 鍑忓皯鍔ㄧ敾妯″紡鏀寔 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0s;
    --transition-normal: 0s;
    --transition-slow: 0s;
  }
 }
 /* 鍏ㄥ眬婊氬姩鏉℃牱寮?*/
 * {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
 }
 *::-webkit-scrollbar {
  width: 8px;
  height: 8px;
 }
 *::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
 }
 *::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--radius-md);
 }
 *::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
 }
 /* 鍏ㄥ眬閫夋嫨鏂囨湰鏍峰紡 */
 ::selection {
  background: var(--primary-light);
  color: var(--text-primary);
 }
 /* 鍏ㄥ眬鐒︾偣鏍峰紡 */
 *:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
 }
 *:focus:not(:focus-visible) {
  outline: none;
 }
 /* 鍏ㄥ眬绂佺敤鐘舵€佹牱寮?*/
 *:disabled {
  cursor: not-allowed;
  opacity: 0.6;
 }
 /* 鍏ㄥ眬閾炬帴鏍峰紡 */
 a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--transition-normal);
 }
 a:hover {
  color: var(--primary-hover);
 }
 /* 鍏ㄥ眬鎸夐挳閲嶇疆 */
 button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
 }
 * {
  -webkit-tap-highlight-color: transparent;
 }
 button,
 a,
 input,
 textarea {
  -webkit-tap-highlight-color: transparent;
 }
@media (hover: none) and (pointer: coarse) {
  *:focus {
    outline: none !important;
  }
  button,
  a {
    -webkit-user-select: none;
    user-select: none;
  }
 }
 /* 鍏ㄥ眬杈撳叆妗嗛噸缃?*/
 input,
 textarea,
 select {
  font-family: inherit;
  font-size: inherit;
 }
 /* 鍏ㄥ眬鍥剧墖鏍峰紡 */
 img {
  max-width: 100%;
  height: auto;
 }
 /* 鍏ㄥ眬琛ㄦ牸鏍峰紡 */
 table {
  border-collapse: collapse;
  width: 100%;
 }
 /* 鍏ㄥ眬浠ｇ爜鏍峰紡 */
 code,
 pre {
  font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
 }
 code {
  padding: 2px 4px;
  font-size: 0.875em;
 }
 pre {
  padding: var(--spacing-lg);
  overflow-x: auto;
 }
 pre code {
  padding: 0;
  background: none;
 }