@taskon/widget-react 0.0.1-beta.1 → 0.0.1-beta.3

package/dist/Quest.css

@@ -123,7 +123,7 @@
   margin: 0;
   font-size: 20px;
   font-weight: 600;
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
 }
 
 /* 描述文本 */
@@ -131,23 +131,23 @@
   margin: 0;
   font-size: 14px;
   line-height: 1.5;
-  color: var(--taskon-text-secondary, #a0a0a0);
+  color: var(--taskon-color-text-secondary);
   text-align: center;
 }
 
 .taskon-eligs-dialog-desc--success {
-  color: var(--taskon-success, #52c41a);
+  color: var(--taskon-color-success);
 }
 
 .taskon-eligs-dialog-highlight {
-  color: var(--taskon-primary, #6366f1);
+  color: var(--taskon-color-primary);
   font-weight: 500;
 }
 
 /* 资格条件区域 */
 .taskon-eligs-dialog-eligs {
   width: 100%;
-  border: 1px solid var(--taskon-border, #333);
+  border: 1px solid var(--taskon-color-border);
   border-radius: 10px;
   overflow: hidden;
 }
@@ -162,14 +162,14 @@
   background: transparent;
   border: none;
   cursor: pointer;
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
   font-size: 14px;
   text-align: left;
   transition: background 0.2s;
 }
 
 .taskon-eligs-dialog-eligs-header:hover {
-  background: var(--taskon-bg-hover, rgba(255, 255, 255, 0.05));
+  background: var(--taskon-color-bg-surface-strong);
 }
 
 .taskon-eligs-dialog-eligs-icon {
@@ -184,7 +184,7 @@
 .taskon-eligs-dialog-arrow {
   width: 6px;
   height: 10px;
-  color: var(--taskon-text-secondary, #a0a0a0);
+  color: var(--taskon-color-text-secondary);
   transition: transform 0.3s;
   transform: rotate(90deg);
 }
@@ -204,8 +204,8 @@
   padding: 0 24px;
   border: none;
   border-radius: 8px;
-  background: var(--taskon-primary, #6366f1);
-  color: #fff;
+  background: var(--taskon-color-primary);
+  color: var(--taskon-color-text-on-primary);
   font-size: 16px;
   font-weight: 500;
   cursor: pointer;
@@ -222,7 +222,7 @@
 }
 
 .taskon-eligs-dialog-button--loading {
-  background: var(--taskon-bg-secondary, #2a2a2a);
+  background: var(--taskon-color-bg-surface);
 }
 
 .taskon-eligs-dialog-loading {
@@ -259,14 +259,14 @@
 .taskon-eligs-bind-eligs-section {
   margin-bottom: 20px;
   padding-bottom: 20px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  border-bottom: 1px solid var(--taskon-color-border);
 }
 
 .taskon-eligs-bind-section-title {
   margin: 0 0 12px;
   font-size: 16px;
   font-weight: 600;
-  color: #fff;
+  color: var(--taskon-color-text);
 }
 
 /* 提示文本 */
@@ -274,7 +274,7 @@
   margin: 0 0 20px;
   font-size: 14px;
   line-height: 1.5;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--taskon-color-text-tertiary);
 }
 
 /* 绑定区域 */
@@ -286,7 +286,7 @@
   margin: 0 0 12px;
   font-size: 14px;
   font-weight: 500;
-  color: rgba(255, 255, 255, 0.8);
+  color: var(--taskon-color-text-secondary);
 }
 
 /* 绑定列表 */
@@ -302,20 +302,20 @@
   align-items: center;
   justify-content: space-between;
   padding: 12px 16px;
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--taskon-color-bg-surface-strong);
   border-radius: 8px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid var(--taskon-color-border);
 }
 
 .taskon-eligs-bind-item--bound {
-  background: rgba(74, 222, 128, 0.1);
-  border-color: rgba(74, 222, 128, 0.3);
+  background: var(--taskon-color-success-bg);
+  border-color: var(--taskon-color-success);
 }
 
 .taskon-eligs-bind-item-label {
   font-size: 14px;
   font-weight: 500;
-  color: #fff;
+  color: var(--taskon-color-text);
 }
 
 /* 绑定按钮 */
@@ -326,8 +326,12 @@
   padding: 6px 16px;
   font-size: 13px;
   font-weight: 500;
-  color: #000;
-  background: linear-gradient(90deg, #00d1ff 0%, #00ff94 100%);
+  color: var(--taskon-color-text-on-primary);
+  background: linear-gradient(
+    90deg,
+    var(--taskon-color-link) 0%,
+    var(--taskon-color-secondary) 100%
+  );
   border: none;
   border-radius: 6px;
   cursor: pointer;
@@ -366,27 +370,7 @@
   gap: 4px;
   font-size: 13px;
   font-weight: 500;
-  color: #4ade80;
-}
-
-/* 跳过按钮 */
-.taskon-eligs-bind-skip-btn {
-  display: block;
-  width: 100%;
-  padding: 12px 24px;
-  margin-top: 20px;
-  font-size: 14px;
-  font-weight: 500;
-  color: #000;
-  background: linear-gradient(90deg, #00d1ff 0%, #00ff94 100%);
-  border: none;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: opacity 0.2s;
-}
-
-.taskon-eligs-bind-skip-btn:hover {
-  opacity: 0.9;
+  color: var(--taskon-color-success);
 }
 /**
  * ShareDropdown - 分享下拉菜单样式
@@ -403,7 +387,7 @@
   height: 40px;
   padding: 0;
   margin-left: auto;
-  background: var(--taskon-quest-color-darkest, #1a1a1a);
+  background: var(--taskon-color-bg-surface);
   border: none;
   border-radius: 6px;
   cursor: pointer;
@@ -412,20 +396,20 @@
 }
 
 .taskon-quest-share-trigger:hover {
-  background: var(--taskon-quest-color-darker, #2a2a2a);
+  background: var(--taskon-color-bg-surface-strong);
 }
 
 .taskon-quest-share-trigger svg {
-  color: var(--taskon-quest-text-lightest, #fff);
+  color: var(--taskon-color-text);
 }
 
 /* 下拉菜单 */
 .taskon-quest-share-menu {
   width: 230px;
-  background: var(--taskon-quest-share-bg, #222);
+  background: var(--taskon-color-bg-surface);
   border-radius: 10px;
   overflow: hidden;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 4px 16px var(--taskon-color-bg-mask);
   z-index: 100;
   text-align: left;
 }
@@ -438,7 +422,7 @@
   padding: 12px;
   font-size: 14px;
   font-weight: 500;
-  color: #fff;
+  color: var(--taskon-color-text);
   background: transparent;
   border: none;
   cursor: pointer;
@@ -446,7 +430,7 @@
 }
 
 .taskon-quest-share-menu-item:hover {
-  background: var(--taskon-quest-menu-hover-bg, rgba(255, 255, 255, 0.08));
+  background: var(--taskon-color-bg-surface-strong);
 }
 
 .taskon-quest-share-menu-item svg {
@@ -456,6 +440,18 @@
   flex-shrink: 0;
 }
 
+.taskon-quest-share-menu-item--twitter svg {
+  color: var(--taskon-color-link);
+}
+
+.taskon-quest-share-menu-item--copy svg {
+  color: var(--taskon-color-secondary);
+}
+
+.taskon-quest-share-menu-item--qr svg {
+  color: var(--taskon-color-warning);
+}
+
 /* ============================================================================
    二维码弹窗样式 - 与原版 ShareQrCodeDialog.vue 一致
    ============================================================================ */
@@ -490,9 +486,13 @@
 
 /* 海报顶部 - 绿色渐变区域 */
 .taskon-quest-qr-poster-header {
-  background: linear-gradient(89.87deg, #e2ff97 0.13%, #cffd55 99.92%);
+  background: linear-gradient(
+    89.87deg,
+    var(--taskon-color-primary-bg) 0.13%,
+    var(--taskon-color-primary) 99.92%
+  );
   padding: 30px;
-  color: #000;
+  color: var(--taskon-color-text-on-primary);
 }
 
 /* 社区信息 */
@@ -506,7 +506,7 @@
   height: 30px;
   border-radius: 50%;
   margin-right: 6px;
-  border: 2px solid #000;
+  border: 2px solid var(--taskon-color-text-on-primary);
   object-fit: cover;
 }
 
@@ -543,7 +543,7 @@
 /* 海报底部 - 黑色区域 */
 .taskon-quest-qr-poster-footer {
   padding: 30px;
-  background: #000;
+  background: var(--taskon-color-bg-canvas);
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
@@ -558,7 +558,7 @@
 .taskon-quest-qr-reward-title {
   display: flex;
   align-items: center;
-  color: #fff;
+  color: var(--taskon-color-text);
   font-weight: 500;
 }
 
@@ -574,7 +574,7 @@
   margin-bottom: 6px;
   font-size: 14px;
   font-weight: 500;
-  color: #fff;
+  color: var(--taskon-color-text);
 }
 
 .taskon-quest-qr-time svg {
@@ -621,14 +621,14 @@
   display: inline-flex;
   align-items: center;
   white-space: nowrap;
-  color: #fff;
+  color: var(--taskon-color-text);
   font-size: 16px;
   font-weight: 400;
 }
 
 /* 奖励标签 - 高亮绿色 */
 .taskon-quest-qr-reward-label {
-  color: #cbff01;
+  color: var(--taskon-color-primary);
 }
 
 /* 链图标 */
@@ -642,7 +642,7 @@
 /* 奖励间的 & 符号 */
 .taskon-quest-qr-reward-and {
   margin-left: 6px;
-  color: #fff;
+  color: var(--taskon-color-text);
 }
 /**
  * ParticipantsInfo 组件样式
@@ -665,7 +665,7 @@
 .taskon-quest-participants-info {
   display: flex;
   flex-direction: column;
-  gap: var(--taskon-quest-spacing-l, 20px);
+  gap: var(--taskon-spacing-lg);
   align-items: stretch;
   width: 100%;
 }
@@ -676,7 +676,7 @@
 
 .taskon-quest-participants-info-header {
   display: flex;
-  gap: var(--taskon-quest-spacing-xs, 8px);
+  gap: var(--taskon-spacing-sm);
   align-items: center;
   padding: 0;
   margin: 0;
@@ -688,13 +688,13 @@
 
 .taskon-quest-participants-info-header:hover .taskon-quest-participants-info-title,
 .taskon-quest-participants-info-header:hover .taskon-quest-participants-info-icon {
-  color: var(--taskon-quest-text-lightest, #ffffff);
+  color: var(--taskon-color-text);
 }
 
 .taskon-quest-participants-info-header:focus-visible {
-  outline: 2px solid var(--taskon-quest-primary, #cbff01);
+  outline: 2px solid var(--taskon-color-primary);
   outline-offset: 2px;
-  border-radius: 4px;
+  border-radius: var(--taskon-border-radius-sm);
 }
 
 .taskon-quest-participants-info-title {
@@ -702,7 +702,7 @@
   font-size: 24px;
   font-weight: 600;
   line-height: 32px;
-  color: var(--taskon-quest-text-lightest, #ffffff);
+  color: var(--taskon-color-text);
 }
 
 .taskon-quest-participants-info-icon {
@@ -711,7 +711,7 @@
   justify-content: center;
   width: 12px;
   height: 12px;
-  color: var(--taskon-quest-text-lighter, rgba(255, 255, 255, 0.8));
+  color: var(--taskon-color-text-secondary);
   flex-shrink: 0;
   transition: color 0.2s;
 }
@@ -746,17 +746,17 @@
 }
 
 .taskon-quest-participants-info-row--clickable:focus-visible {
-  outline: 2px solid var(--taskon-quest-primary, #cbff01);
+  outline: 2px solid var(--taskon-color-primary);
   outline-offset: 2px;
-  border-radius: 4px;
+  border-radius: var(--taskon-border-radius-sm);
 }
 
 .taskon-quest-participants-info-label {
-  color: var(--taskon-quest-text-lighter, rgba(255, 255, 255, 0.8));
+  color: var(--taskon-color-text-secondary);
 }
 
 .taskon-quest-participants-info-value {
-  color: var(--taskon-quest-text-lightest, #ffffff);
+  color: var(--taskon-color-text);
   text-align: right;
 }
 
@@ -764,11 +764,11 @@
 .taskon-quest-participants-info-value--clickable {
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: var(--taskon-spacing-xs);
 }
 
 .taskon-quest-participants-info-arrow {
-  color: var(--taskon-quest-text-lighter, rgba(255, 255, 255, 0.8));
+  color: var(--taskon-color-text-secondary);
   flex-shrink: 0;
   transition: transform 0.2s;
 }
@@ -787,37 +787,37 @@
 }
 
 .taskon-quest-participants-dialog-title {
-  margin: 0 0 20px 0;
+  margin: 0 0 var(--taskon-spacing-lg) 0;
   font-size: 22px;
   font-weight: 600;
   line-height: 28px;
-  color: var(--taskon-quest-text-lightest, #ffffff);
+  color: var(--taskon-color-text);
 }
 
 .taskon-quest-participants-dialog-section {
-  margin-bottom: 20px;
+  margin-bottom: var(--taskon-spacing-lg);
 }
 
 .taskon-quest-participants-dialog-subtitle {
   font-size: 16px;
   font-weight: 600;
   line-height: 24px;
-  color: var(--taskon-quest-text-lightest, #ffffff);
+  color: var(--taskon-color-text);
 }
 
 .taskon-quest-participants-dialog-desc {
-  margin-top: 4px;
+  margin-top: var(--taskon-spacing-xs);
   font-size: 14px;
   font-weight: 500;
   line-height: 20px;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--taskon-color-text-tertiary);
 }
 
 /* Flow Chart */
 .taskon-quest-participants-dialog-chart {
   display: flex;
   align-items: flex-start;
-  margin-bottom: 30px;
+  margin-bottom: var(--taskon-spacing-lg);
 }
 
 .taskon-quest-participants-dialog-arrow-wrap {
@@ -829,49 +829,50 @@
 .taskon-quest-participants-dialog-arrow {
   width: 36px;
   height: auto;
+  color: var(--taskon-color-secondary);
 }
 
 .taskon-quest-participants-dialog-cards {
   flex: 1;
-  margin-left: 20px;
+  margin-left: var(--taskon-spacing-lg);
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: var(--taskon-spacing-xs);
 }
 
 .taskon-quest-participants-dialog-card {
-  padding: 8px 20px;
-  border-radius: 6px;
+  padding: var(--taskon-spacing-sm) var(--taskon-spacing-lg);
+  border-radius: var(--taskon-border-radius);
 }
 
 .taskon-quest-participants-dialog-card--level1 {
-  background: rgba(0, 255, 163, 0.2);
+  background: var(--taskon-color-secondary-bg);
 }
 
 .taskon-quest-participants-dialog-card--level2 {
-  background: rgba(0, 255, 163, 0.3);
+  background: var(--taskon-color-secondary-bg);
 }
 
 .taskon-quest-participants-dialog-card--level3 {
-  background: rgba(0, 255, 163, 0.4);
+  background: var(--taskon-color-secondary-bg);
 }
 
 .taskon-quest-participants-dialog-card--level4 {
-  background: rgba(0, 255, 163, 0.5);
+  background: var(--taskon-color-secondary-bg);
 }
 
 .taskon-quest-participants-dialog-card-title {
   font-size: 14px;
   font-weight: 600;
   line-height: 20px;
-  color: var(--taskon-quest-text-lightest, #ffffff);
+  color: var(--taskon-color-text);
 }
 
 .taskon-quest-participants-dialog-card-desc {
   font-size: 12px;
   font-weight: 500;
   line-height: 16px;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--taskon-color-text-tertiary);
 }
 
 /* Confirm Button */
@@ -910,7 +911,7 @@
   font-size: 22px;
   font-weight: 600;
   line-height: 28px;
-  color: var(--taskon-quest-text-lightest, #ffffff);
+  color: var(--taskon-color-text);
 }
 
 /* ============================================================================
@@ -937,7 +938,7 @@
 
 .taskon-quest-winner-error p {
   margin: 0;
-  color: var(--taskon-quest-text-lighter, rgba(255, 255, 255, 0.8));
+  color: var(--taskon-color-text-secondary);
 }
 
 /* ============================================================================
@@ -965,7 +966,7 @@
   position: sticky;
   top: 0;
   z-index: 1;
-  background: var(--taskon-quest-bg, #1d2123);
+  background: var(--taskon-color-bg-surface);
 }
 
 .taskon-quest-winner-table th {
@@ -974,8 +975,8 @@
   font-size: 14px;
   font-weight: 500;
   line-height: 20px;
-  color: var(--taskon-quest-text-lighter, rgba(255, 255, 255, 0.6));
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  color: var(--taskon-color-text-secondary);
+  border-bottom: 1px solid var(--taskon-color-border);
 }
 
 .taskon-quest-winner-table th:last-child {
@@ -987,13 +988,13 @@
   font-size: 14px;
   font-weight: 500;
   line-height: 20px;
-  color: var(--taskon-quest-text-lightest, #ffffff);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  color: var(--taskon-color-text);
+  border-bottom: 1px solid var(--taskon-color-border-secondary);
   vertical-align: middle;
 }
 
 .taskon-quest-winner-table tr:hover td {
-  background: rgba(255, 255, 255, 0.02);
+  background: var(--taskon-color-bg-surface-strong);
 }
 
 /* ============================================================================
@@ -1003,7 +1004,7 @@
 .taskon-quest-winner-position {
   width: 80px;
   font-weight: 600;
-  color: var(--taskon-quest-primary, #cbff01);
+  color: var(--taskon-color-primary);
 }
 
 /* ============================================================================
@@ -1020,7 +1021,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: var(--taskon-quest-text-lightest, #ffffff);
+  color: var(--taskon-color-text);
 }
 
 /* ============================================================================
@@ -1035,7 +1036,7 @@
   display: inline-flex;
   flex-wrap: wrap;
   justify-content: flex-end;
-  gap: 8px;
+  gap: var(--taskon-spacing-sm);
   max-width: 300px;
 }
 
@@ -1046,7 +1047,7 @@
 .taskon-quest-winner-empty {
   padding: 40px 20px !important;
   text-align: center !important;
-  color: var(--taskon-quest-text-lighter, rgba(255, 255, 255, 0.6)) !important;
+  color: var(--taskon-color-text-tertiary) !important;
 }
 
 /* ============================================================================
@@ -1057,16 +1058,16 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 8px;
+  gap: var(--taskon-spacing-sm);
   padding: 20px;
-  color: var(--taskon-quest-text-lighter, rgba(255, 255, 255, 0.6));
+  color: var(--taskon-color-text-tertiary);
 }
 
 .taskon-quest-winner-loading-spinner {
   width: 16px;
   height: 16px;
-  border: 2px solid rgba(255, 255, 255, 0.2);
-  border-top-color: var(--taskon-quest-primary, #cbff01);
+  border: 2px solid var(--taskon-color-border);
+  border-top-color: var(--taskon-color-primary);
   border-radius: 50%;
   animation: taskon-quest-winner-spin 0.8s linear infinite;
 }
@@ -1084,10 +1085,10 @@
 .taskon-quest-winner-reward-label {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
-  padding: 4px 8px;
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 4px;
+  gap: var(--taskon-spacing-xs);
+  padding: var(--taskon-spacing-xs) var(--taskon-spacing-sm);
+  background: var(--taskon-color-bg-surface-strong);
+  border-radius: var(--taskon-border-radius-sm);
   font-size: 12px;
   font-weight: 500;
   line-height: 16px;
@@ -1095,11 +1096,11 @@
 }
 
 .taskon-quest-winner-reward-label-type {
-  color: var(--taskon-quest-text-lighter, rgba(255, 255, 255, 0.6));
+  color: var(--taskon-color-text-secondary);
 }
 
 .taskon-quest-winner-reward-label-value {
-  color: var(--taskon-quest-primary, #cbff01);
+  color: var(--taskon-color-primary);
 }
 /**
  * QuestRewards 样式
@@ -1118,7 +1119,7 @@
 .taskon-quest-rewards {
   overflow: hidden;
   border-radius: 10px;
-  background: var(--taskon-bg-card, rgba(255, 255, 255, 0.04));
+  background: var(--taskon-color-bg-surface-subtle);
 }
 
 .taskon-quest-rewards-container {
@@ -1141,7 +1142,7 @@
   width: 50px;
   height: 50px;
   border-radius: 50%;
-  border: 2px solid #f688ff;
+  border: 2px solid var(--taskon-color-primary-hover);
   object-fit: cover;
   margin-right: 16px;
 }
@@ -1151,7 +1152,7 @@
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
   font-size: 22px;
   font-weight: 500;
   line-height: 28px;
@@ -1164,8 +1165,8 @@
 .taskon-quest-rewards-ranking-point {
   padding: 16px;
   border-radius: 10px;
-  border: 1px solid var(--taskon-border-color, rgba(255, 255, 255, 0.06));
-  background: var(--taskon-bg-card, rgba(255, 255, 255, 0.04));
+  border: 1px solid var(--taskon-color-border-secondary);
+  background: var(--taskon-color-bg-surface-subtle);
 }
 
 .taskon-quest-rewards-ranking-point-row {
@@ -1180,7 +1181,7 @@
 .taskon-quest-rewards-ranking-point-label {
   display: flex;
   align-items: center;
-  color: var(--taskon-text-tertiary, rgba(255, 255, 255, 0.5));
+  color: var(--taskon-color-text-tertiary);
   font-size: 16px;
   font-weight: 500;
   line-height: 20px;
@@ -1197,7 +1198,7 @@
 }
 
 .taskon-quest-rewards-ranking-point-number {
-  color: var(--taskon-primary, #cbff01);
+  color: var(--taskon-color-primary);
   font-size: 22px;
   font-weight: 700;
   line-height: 28px;
@@ -1207,7 +1208,7 @@
   position: absolute;
   top: 100%;
   right: 0;
-  color: var(--taskon-text-tertiary, rgba(255, 255, 255, 0.5));
+  color: var(--taskon-color-text-tertiary);
   font-size: 13px;
   font-weight: 500;
   line-height: 16px;
@@ -1216,7 +1217,7 @@
 
 .taskon-quest-rewards-ranking-point-amount {
   margin-left: auto;
-  color: var(--taskon-secondary, #00ffa3);
+  color: var(--taskon-color-secondary);
   font-size: 22px;
   font-weight: 700;
   line-height: 28px;
@@ -1228,11 +1229,11 @@
   width: 50%;
   font-size: 12px;
   line-height: 16px;
-  color: var(--taskon-text-tertiary, rgba(255, 255, 255, 0.5));
+  color: var(--taskon-color-text-tertiary);
 }
 
 .taskon-quest-rewards-ranking-point-tip-highlight {
-  color: var(--taskon-primary, #cbff01);
+  color: var(--taskon-color-primary);
 }
 
 /* ============================================================================
@@ -1256,7 +1257,7 @@
   font-size: 16px;
   line-height: 20px;
   font-weight: 500;
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
 }
 
 .taskon-quest-rewards-group-cards {
@@ -1270,7 +1271,7 @@
 
 .taskon-quest-rewards-card {
   margin-top: 12px;
-  background: var(--taskon-bg-card, rgba(255, 255, 255, 0.04));
+  background: var(--taskon-color-bg-surface-subtle);
   border-radius: 8px;
   overflow: hidden;
 }
@@ -1280,7 +1281,7 @@
 }
 
 .taskon-quest-rewards-card--active {
-  border: 1px solid #cbff01;
+  border: 1px solid var(--taskon-color-primary);
 }
 
 /* Tier 表头（仅 PointRanking 模式） */
@@ -1290,30 +1291,34 @@
   justify-content: space-between;
   gap: 8px;
   padding: 8px 16px;
-  background: var(--taskon-bg-darkest, rgba(0, 0, 0, 0.4));
+  background: var(--taskon-color-bg-inset);
   font-size: 16px;
   line-height: 20px;
 }
 
 .taskon-quest-rewards-card-tier--active {
-  background: linear-gradient(90deg, rgba(203, 255, 1, 0.9) 0%, rgba(0, 255, 163, 0.9) 100%);
+  background: linear-gradient(
+    90deg,
+    var(--taskon-color-primary) 0%,
+    var(--taskon-color-secondary) 100%
+  );
 }
 
 .taskon-quest-rewards-card-tier-label {
   font-weight: 500;
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
 }
 
 .taskon-quest-rewards-card-tier--active .taskon-quest-rewards-card-tier-label {
-  color: var(--taskon-text-inverse, #000);
+  color: var(--taskon-color-text-on-primary);
 }
 
 .taskon-quest-rewards-card-tier-range {
-  color: var(--taskon-text-tertiary, rgba(255, 255, 255, 0.5));
+  color: var(--taskon-color-text-tertiary);
 }
 
 .taskon-quest-rewards-card-tier--active .taskon-quest-rewards-card-tier-range {
-  color: var(--taskon-text-inverse-secondary, rgba(0, 0, 0, 0.6));
+  color: var(--taskon-color-text-on-primary);
 }
 
 /* 卡片主体 */
@@ -1342,7 +1347,7 @@
 }
 
 .taskon-quest-rewards-whitelist-desc-icon {
-  color: var(--taskon-text-tertiary, rgba(255, 255, 255, 0.5));
+  color: var(--taskon-color-text-tertiary);
   transition: transform 0.3s ease;
   flex-shrink: 0;
 }
@@ -1355,7 +1360,7 @@
   margin-top: 8px;
   font-size: 14px;
   line-height: 20px;
-  color: var(--taskon-text-secondary, rgba(255, 255, 255, 0.7));
+  color: var(--taskon-color-text-secondary);
 }
 
 /* ============================================================================
@@ -1373,7 +1378,7 @@
   font-size: 18px;
   line-height: 24px;
   font-weight: 500;
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
   flex-shrink: 0;
 }
 
@@ -1383,7 +1388,7 @@
   gap: 8px;
   font-size: 14px;
   line-height: 16px;
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
 }
 
 /* ============================================================================
@@ -1398,19 +1403,19 @@
 /* Chain Icon Tooltip */
 .taskon-quest-rewards-chain-tooltip {
   padding: 6px 10px;
-  background: var(--taskon-bg-popover, #1a1a1a);
-  border: 1px solid var(--taskon-border-color, rgba(255, 255, 255, 0.1));
+  background: var(--taskon-color-bg-floating);
+  border: 1px solid var(--taskon-color-border);
   border-radius: 6px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 4px 12px var(--taskon-color-bg-mask);
   font-size: 12px;
   line-height: 16px;
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
   z-index: 1000;
   white-space: nowrap;
 }
 
 .taskon-quest-rewards-chain-tooltip-arrow {
-  fill: var(--taskon-bg-popover, #1a1a1a);
+  fill: var(--taskon-color-bg-floating);
 }
 
 /* ============================================================================
@@ -1435,7 +1440,11 @@
 }
 
 .taskon-quest-rewards-token-blindbox span:last-child {
-  background: linear-gradient(90deg, #cbff01 0%, #00ffa3 100%);
+  background: linear-gradient(
+    90deg,
+    var(--taskon-color-primary) 0%,
+    var(--taskon-color-secondary) 100%
+  );
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
@@ -1451,22 +1460,22 @@
 .taskon-quest-rewards-token-amount {
   font-size: 22px;
   line-height: 28px;
-  color: var(--taskon-primary, #cbff01);
+  color: var(--taskon-color-primary);
 }
 
 .taskon-quest-rewards-token-name {
   font-size: 22px;
   line-height: 28px;
-  color: var(--taskon-primary, #cbff01);
+  color: var(--taskon-color-primary);
 }
 
 .taskon-quest-rewards-token-usdt-tag {
   font-size: 12px;
   line-height: 14px;
   padding: 2px 6px;
-  background: var(--taskon-bg-secondary, rgba(255, 255, 255, 0.1));
+  background: var(--taskon-color-secondary-bg);
   border-radius: 4px;
-  color: var(--taskon-text-secondary, rgba(255, 255, 255, 0.7));
+  color: var(--taskon-color-text-secondary);
 }
 
 .taskon-quest-rewards-token-per {
@@ -1479,14 +1488,14 @@
 .taskon-quest-rewards-token-per-label {
   font-size: 14px;
   line-height: 16px;
-  color: var(--taskon-text-tertiary, rgba(255, 255, 255, 0.5));
+  color: var(--taskon-color-text-tertiary);
 }
 
 .taskon-quest-rewards-token-per-value {
   margin-left: auto;
   font-size: 14px;
   line-height: 16px;
-  color: var(--taskon-text-secondary, rgba(255, 255, 255, 0.7));
+  color: var(--taskon-color-text-secondary);
 }
 
 /* BRC20 标签 */
@@ -1495,8 +1504,8 @@
   font-size: 12px;
   line-height: 14px;
   font-weight: 500;
-  color: #f97316;
-  background: rgba(249, 115, 22, 0.15);
+  color: var(--taskon-color-warning);
+  background: var(--taskon-color-warning-bg);
   border-radius: 4px;
 }
 
@@ -1521,7 +1530,7 @@
   font-size: 22px;
   line-height: 28px;
   font-weight: 600;
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -1531,7 +1540,7 @@
 .taskon-quest-rewards-minted-nft-quantity {
   font-size: 14px;
   line-height: 16px;
-  color: var(--taskon-text-secondary, rgba(255, 255, 255, 0.7));
+  color: var(--taskon-color-text-secondary);
 }
 
 /* ============================================================================
@@ -1540,10 +1549,10 @@
 
 .taskon-quest-rewards-popover-content {
   padding: 12px 16px;
-  background: var(--taskon-bg-popover, #1a1a1a);
-  border: 1px solid var(--taskon-border-color, rgba(255, 255, 255, 0.1));
+  background: var(--taskon-color-bg-floating);
+  border: 1px solid var(--taskon-color-border);
   border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 4px 12px var(--taskon-color-bg-mask);
   max-width: 300px;
   z-index: 1000;
 }
@@ -1551,7 +1560,7 @@
 .taskon-quest-rewards-popover-name {
   font-size: 14px;
   line-height: 18px;
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
   word-break: break-all;
 }
 
@@ -1563,7 +1572,7 @@
   font-size: 14px;
   line-height: 18px;
   font-weight: 500;
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
 }
 
 .taskon-quest-rewards-popover-address-row {
@@ -1584,7 +1593,7 @@
   flex: 1;
   font-size: 12px;
   line-height: 16px;
-  color: var(--taskon-text-tertiary, rgba(255, 255, 255, 0.5));
+  color: var(--taskon-color-text-tertiary);
   word-break: break-all;
 }
 
@@ -1592,16 +1601,16 @@
   flex-shrink: 0;
   display: flex;
   align-items: center;
-  color: var(--taskon-text-tertiary, rgba(255, 255, 255, 0.5));
+  color: var(--taskon-color-text-tertiary);
   transition: color 0.2s;
 }
 
 .taskon-quest-rewards-popover-address-row:hover .taskon-quest-rewards-popover-address-copy {
-  color: var(--taskon-primary, #cbff01);
+  color: var(--taskon-color-primary);
 }
 
 .taskon-quest-rewards-popover-arrow {
-  fill: var(--taskon-bg-popover, #1a1a1a);
+  fill: var(--taskon-color-bg-floating);
 }
 
 /* ============================================================================
@@ -1626,14 +1635,14 @@
   font-size: 22px;
   line-height: 28px;
   font-weight: 600;
-  color: var(--taskon-primary, #cbff01);
+  color: var(--taskon-color-primary);
 }
 
 .taskon-quest-rewards-points-name,
 .taskon-quest-rewards-exp-label {
   font-size: 22px;
   line-height: 28px;
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
 }
 
 /* ============================================================================
@@ -1649,7 +1658,7 @@
 .taskon-quest-rewards-discord-role-name {
   font-size: 22px;
   line-height: 28px;
-  color: var(--taskon-link, #5865f2);
+  color: var(--taskon-color-link);
   cursor: pointer;
 }
 
@@ -1660,7 +1669,7 @@
 .taskon-quest-rewards-discord-role-warning {
   font-size: 12px;
   line-height: 14px;
-  color: var(--taskon-warning, #ffc107);
+  color: var(--taskon-color-warning);
 }
 
 /* ============================================================================
@@ -1670,7 +1679,7 @@
 .taskon-quest-rewards-winner-open {
   font-size: 22px;
   line-height: 28px;
-  color: var(--taskon-secondary, #00ffa3);
+  color: var(--taskon-color-secondary);
 }
 
 .taskon-quest-rewards-winner-fcfs {
@@ -1688,33 +1697,33 @@
 }
 
 .taskon-quest-rewards-winner-available {
-  color: var(--taskon-secondary, #00ffa3);
+  color: var(--taskon-color-secondary);
 }
 
 .taskon-quest-rewards-winner-separator {
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
 }
 
 .taskon-quest-rewards-winner-total {
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
 }
 
 .taskon-quest-rewards-winner-label {
   font-size: 14px;
   line-height: 16px;
-  color: var(--taskon-text-secondary, rgba(255, 255, 255, 0.7));
+  color: var(--taskon-color-text-secondary);
 }
 
 .taskon-quest-rewards-winner-count {
   font-size: 22px;
   line-height: 28px;
-  color: var(--taskon-secondary, #00ffa3);
+  color: var(--taskon-color-secondary);
 }
 
 .taskon-quest-rewards-winner-ranking {
   font-size: 22px;
   line-height: 28px;
-  color: var(--taskon-secondary, #00ffa3);
+  color: var(--taskon-color-secondary);
 }
 
 /* ============================================================================
@@ -1731,7 +1740,7 @@
 .taskon-quest-rewards-gas-label {
   font-size: 14px;
   line-height: 16px;
-  color: var(--taskon-text-tertiary, rgba(255, 255, 255, 0.5));
+  color: var(--taskon-color-text-tertiary);
   white-space: nowrap;
 }
 
@@ -1739,7 +1748,7 @@
   flex: 1;
   position: relative;
   height: 8px;
-  background: rgba(255, 255, 255, 0.2);
+  background: var(--taskon-color-bg-surface-strong);
   border-radius: 2px;
   overflow: hidden;
 }
@@ -1753,7 +1762,11 @@
   display: flex;
   align-items: center;
   gap: 6px;
-  background: linear-gradient(90deg, #00ffa3 -229.89%, #cbff01 100%);
+  background: linear-gradient(
+    90deg,
+    var(--taskon-color-secondary) -229.89%,
+    var(--taskon-color-primary) 100%
+  );
   border-radius: 2px;
   overflow: hidden;
 }
@@ -1764,7 +1777,7 @@
   flex-shrink: 0;
   height: 200%;
   transform: rotate(45deg);
-  background: rgba(0, 0, 0, 0.1);
+  background: var(--taskon-color-bg-canvas);
 }
 
 /* ============================================================================
@@ -1774,7 +1787,7 @@
 .taskon-quest-rewards-preview {
   width: 100%;
   padding: 26px;
-  border: 1px solid var(--taskon-border-color, rgba(255, 255, 255, 0.1));
+  border: 1px solid var(--taskon-color-border);
   border-radius: 8px;
   box-sizing: border-box;
 }
@@ -1795,7 +1808,7 @@
   padding: 16px;
   background: transparent;
   border-radius: 8px;
-  border: 1px solid rgba(0, 255, 163, 0.4);
+  border: 1px solid var(--taskon-color-secondary-bg);
   overflow: hidden;
 }
 
@@ -1810,7 +1823,7 @@
   font-size: 14px;
   line-height: 16px;
   font-weight: 500;
-  color: var(--taskon-text-secondary, rgba(255, 255, 255, 0.7));
+  color: var(--taskon-color-text-secondary);
 }
 
 .taskon-quest-rewards-estimated-value {
@@ -1824,17 +1837,17 @@
 }
 
 .taskon-quest-rewards-estimated-amount {
-  color: var(--taskon-primary, #cbff01);
+  color: var(--taskon-color-primary);
 }
 
 .taskon-quest-rewards-estimated-symbol {
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
 }
 
 .taskon-quest-rewards-estimated-formula {
   font-size: 12px;
   line-height: 14px;
-  color: var(--taskon-text-tertiary, rgba(255, 255, 255, 0.5));
+  color: var(--taskon-color-text-tertiary);
   margin-top: 4px;
 }
 
@@ -1842,14 +1855,14 @@
   font-size: 14px;
   line-height: 16px;
   font-weight: 500;
-  color: var(--taskon-text-secondary, rgba(255, 255, 255, 0.7));
+  color: var(--taskon-color-text-secondary);
 }
 
 .taskon-quest-rewards-estimated-points {
   font-size: 18px;
   line-height: 24px;
   font-weight: 700;
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
 }
 
 .taskon-quest-rewards-estimated-total {
@@ -1859,7 +1872,7 @@
   gap: 8px;
   font-size: 14px;
   line-height: 16px;
-  color: var(--taskon-text-secondary, rgba(255, 255, 255, 0.7));
+  color: var(--taskon-color-text-secondary);
 }
 
 /* 未完成遮罩层 */
@@ -1870,7 +1883,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: rgba(48, 48, 48, 0.4);
+  background: var(--taskon-color-bg-mask);
   border-radius: 8px;
   backdrop-filter: blur(4px);
   padding: 16px;
@@ -1886,7 +1899,7 @@
   font-size: 14px;
   line-height: 16px;
   font-weight: 500;
-  color: var(--taskon-secondary, #00ffa3);
+  color: var(--taskon-color-secondary);
   text-align: center;
 }
 
@@ -1894,7 +1907,7 @@
   margin-top: 4px;
   font-size: 12px;
   line-height: 14px;
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
   text-align: center;
 }
 
@@ -1910,7 +1923,7 @@
   font-size: 16px;
   line-height: 20px;
   font-weight: 500;
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
 }
 
 .taskon-quest-rewards-bonus-card {
@@ -1920,18 +1933,18 @@
   flex-direction: column;
   gap: 24px;
   border-radius: 10px;
-  background: var(--taskon-bg-card, rgba(255, 255, 255, 0.04));
+  background: var(--taskon-color-bg-surface-subtle);
 }
 
 /* 覆盖 BaseRow 的 label 样式，匹配 Vue 版本 */
 .taskon-quest-rewards-bonus-card .taskon-quest-rewards-row-label {
-  color: var(--taskon-text-secondary, rgba(255, 255, 255, 0.7));
+  color: var(--taskon-color-text-secondary);
   font-size: 16px;
   line-height: 20px;
 }
 
 .taskon-quest-rewards-bonus-desc {
-  color: var(--taskon-text-tertiary, rgba(255, 255, 255, 0.5));
+  color: var(--taskon-color-text-tertiary);
   font-size: 14px;
   line-height: 18px;
   text-align: right;
@@ -1940,7 +1953,7 @@
 .taskon-quest-rewards-bonus-value {
   display: flex;
   align-items: flex-end;
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
   text-align: right;
   font-size: 16px;
   font-weight: 600;
@@ -2125,7 +2138,7 @@
   background: none;
   border: none;
   cursor: pointer;
-  color: var(--taskon-link, #58afff);
+  color: var(--taskon-color-link);
   font-size: 14px;
   line-height: 18px;
   transition: opacity 0.2s ease;
@@ -2149,14 +2162,6 @@
   margin-left: 4px;
 }
 
-/* ============================================================================
-   Leaderboard 弹窗样式
-   ============================================================================ */
-
-.taskon-quest-leaderboard-modal {
-  background: var(--taskon-bg-card, #1a1a1a);
-}
-
 .taskon-quest-leaderboard-content {
   display: flex;
   flex-direction: column;
@@ -2167,13 +2172,13 @@
   margin: 0;
   font-size: 24px;
   font-weight: 600;
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
 }
 
 .taskon-quest-leaderboard-subtitle {
   margin: 0;
   font-size: 14px;
-  color: var(--taskon-text-secondary, rgba(255, 255, 255, 0.7));
+  color: var(--taskon-color-text-secondary);
 }
 
 .taskon-quest-leaderboard-error {
@@ -2183,33 +2188,104 @@
   gap: 12px;
   padding: 24px;
   text-align: center;
-  color: var(--taskon-text-secondary, rgba(255, 255, 255, 0.7));
+  color: var(--taskon-color-text-secondary);
 }
 
 .taskon-quest-leaderboard-table {
   margin-top: 8px;
 }
 
+/* ============================================================================
+   Leaderboard 弹窗内 Table 主题（仅作用于该弹窗）
+   统一使用最新 --taskon-color-* token
+   ============================================================================ */
+
+.taskon-quest-leaderboard-table .taskon-table__header {
+  color: var(--taskon-color-text-disabled);
+  background-color: var(--taskon-color-bg-surface-subtle);
+}
+
+.taskon-quest-leaderboard-table .taskon-table__cell {
+  color: var(--taskon-color-text);
+}
+
+.taskon-quest-leaderboard-table .taskon-table--bordered .taskon-table__row td {
+  border-top: 1px solid var(--taskon-color-border-secondary);
+  border-bottom: 1px solid var(--taskon-color-border-secondary);
+}
+
+.taskon-quest-leaderboard-table .taskon-table__row:hover {
+  background-color: var(--taskon-color-bg-surface-subtle);
+}
+
+.taskon-quest-leaderboard-table .taskon-table--striped .taskon-table__row:nth-child(even) {
+  background-color: var(--taskon-color-bg-surface-subtle);
+}
+
+.taskon-quest-leaderboard-table .taskon-table__loading,
+.taskon-quest-leaderboard-table .taskon-table__empty,
+.taskon-quest-leaderboard-table .taskon-table__empty-desc {
+  color: var(--taskon-color-text-disabled);
+}
+
+.taskon-quest-leaderboard-table .taskon-table__empty-title {
+  color: var(--taskon-color-text);
+}
+
+.taskon-quest-leaderboard-table .taskon-table__loading-spinner {
+  border-color: var(--taskon-color-text-disabled);
+  border-top-color: var(--taskon-color-primary);
+}
+
+.taskon-quest-leaderboard-table .taskon-table__loading-overlay {
+  background-color: var(--taskon-color-bg-mask);
+}
+
 .taskon-quest-leaderboard-pagination {
   display: flex;
   justify-content: center;
   margin-top: 16px;
 }
 
+/* ============================================================================
+   Leaderboard 弹窗内 Pagination 主题（仅作用于该弹窗）
+   统一使用最新 --taskon-color-* token
+   ============================================================================ */
+
+.taskon-quest-leaderboard-pagination .taskon-pagination-range,
+.taskon-quest-leaderboard-pagination .taskon-pagination-info-separator,
+.taskon-quest-leaderboard-pagination .taskon-pagination-info-total {
+  color: var(--taskon-color-text-disabled);
+}
+
+.taskon-quest-leaderboard-pagination .taskon-pagination-info-current {
+  color: var(--taskon-color-text);
+}
+
+.taskon-quest-leaderboard-pagination .taskon-pagination-btn {
+  border-color: var(--taskon-color-border) !important;
+  color: var(--taskon-color-text) !important;
+}
+
+.taskon-quest-leaderboard-pagination .taskon-pagination-btn:hover:not(:disabled) {
+  background-color: var(--taskon-color-bg-surface-subtle) !important;
+  border-color: var(--taskon-color-border-secondary) !important;
+}
+
 /* 排名徽章 */
 .taskon-quest-leaderboard-rank {
   display: inline-flex;
   align-items: center;
   font-size: 14px;
   font-weight: 500;
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
 }
 
 /* Unranked / N/A 状态 */
 .taskon-quest-leaderboard-rank--unranked {
   font-size: 14px;
   font-weight: 500;
-  color: var(--taskon-text-tertiary, rgba(255, 255, 255, 0.5));
+  color: var(--taskon-color-text-tertiary);
 }
 
 /* 表头带提示框的容器 */
@@ -2223,7 +2299,7 @@
 .taskon-quest-leaderboard-tier {
   font-size: 14px;
   font-weight: 500;
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
 }
 
 /* 用户单元格 */
@@ -2240,14 +2316,14 @@
   padding: 2px 8px;
   font-size: 12px;
   font-weight: 600;
-  color: var(--taskon-bg-body, #111);
-  background: var(--taskon-secondary, #00ffa3);
+  color: var(--taskon-color-text-on-primary);
+  background: var(--taskon-color-secondary);
   border-radius: 4px;
 }
 
 .taskon-quest-leaderboard-user-name {
   font-size: 14px;
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -2257,7 +2333,7 @@
 .taskon-quest-leaderboard-points {
   font-size: 14px;
   font-weight: 500;
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
 }
 
 /* 奖励 */
@@ -2271,47 +2347,24 @@
 .taskon-quest-leaderboard-reward-type {
   font-size: 14px;
   font-weight: 600;
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
 }
 
 .taskon-quest-leaderboard-reward {
   font-size: 14px;
   font-weight: 600;
-  color: var(--taskon-primary, #cbff01);
+  color: var(--taskon-color-primary);
 }
 
 .taskon-quest-leaderboard-not-qualified {
   font-size: 14px;
   font-weight: 600;
-  color: var(--taskon-text-tertiary, rgba(255, 255, 255, 0.5));
+  color: var(--taskon-color-text-tertiary);
 }
 
 .taskon-quest-leaderboard-no-reward {
   font-size: 14px;
-  color: var(--taskon-text-tertiary, rgba(255, 255, 255, 0.5));
-}
-/**
- * RewardModuleDialog styles
- * Scope UserCenter module styles inside Quest popup
- */
-
-.taskon-quest-reward-dialog .taskon-user-center {
-  padding: 32px 0 0 0;
-  background: transparent;
-  border-radius: 0;
-  gap: 24px;
-}
-
-.taskon-quest-reward-dialog .taskon-my-rewards {
-  gap: 24px;
-}
-
-.taskon-quest-reward-dialog .taskon-my-rewards__section {
-  gap: 16px;
-}
-
-.taskon-quest-reward-dialog .taskon-points-list {
-  background: transparent;
+  color: var(--taskon-color-text-tertiary);
 }
 /**
  * OperateFooter styles
@@ -2366,32 +2419,14 @@
 }
 
 .taskon-quest-footer-badge--winner {
-  color: #cbff01;
-  background: linear-gradient(
-      90deg,
-      rgba(203, 255, 1, 0.1) 0%,
-      rgba(203, 255, 1, 0.1) 100%
-    ),
-    linear-gradient(
-      90deg,
-      rgba(255, 255, 255, 0.1) 0%,
-      rgba(255, 255, 255, 0.1) 100%
-    );
+  color: var(--taskon-color-primary);
+  background: var(--taskon-color-primary-bg);
 }
 
 .taskon-quest-footer-badge--qualifier,
 .taskon-quest-footer-badge--submitter {
-  color: #1affab;
-  background: linear-gradient(
-      90deg,
-      rgba(26, 255, 171, 0.1) 0%,
-      rgba(26, 255, 171, 0.1) 100%
-    ),
-    linear-gradient(
-      90deg,
-      rgba(255, 255, 255, 0.1) 0%,
-      rgba(255, 255, 255, 0.1) 100%
-    );
+  color: var(--taskon-color-secondary);
+  background: var(--taskon-color-secondary-bg);
 }
 
 /* Dark content card */
@@ -2401,12 +2436,7 @@
   align-items: center;
   padding: 12px;
   border-radius: 8px;
-  background: linear-gradient(
-      90deg,
-      rgba(255, 255, 255, 0.1) 0%,
-      rgba(255, 255, 255, 0.1) 100%
-    ),
-    linear-gradient(90deg, #0d0d0d 0%, #0d0d0d 100%);
+  background: var(--taskon-color-bg-surface-strong);
 }
 
 @media (max-width: 750px) {
@@ -2423,7 +2453,7 @@
   font-size: 16px;
   font-weight: 600;
   line-height: 24px;
-  color: #fff;
+  color: var(--taskon-color-text);
 }
 
 /* ============================================================================
@@ -2445,7 +2475,7 @@
   font-size: 20px;
   font-weight: 600;
   line-height: 28px;
-  color: #fff;
+  color: var(--taskon-color-text);
 }
 
 @media (max-width: 750px) {
@@ -2460,7 +2490,7 @@
   font-size: 14px;
   font-weight: 500;
   line-height: 18px;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--taskon-color-text-tertiary);
 }
 
 @media (max-width: 750px) {
@@ -2485,8 +2515,8 @@
   padding: 12px 24px;
   font-size: 16px;
   font-weight: 600;
-  color: #000;
-  background-color: #cbff01;
+  color: var(--taskon-color-text-on-primary);
+  background-color: var(--taskon-color-primary);
   border: none;
   border-radius: 8px;
   cursor: pointer;
@@ -2494,7 +2524,7 @@
 }
 
 .taskon-quest-footer-connect-btn:hover {
-  background-color: #b8e600;
+  background-color: var(--taskon-color-primary-active);
 }
 
 /* ============================================================================
@@ -2506,8 +2536,8 @@
   padding: 12px 24px;
   font-size: 16px;
   font-weight: 600;
-  color: #000;
-  background-color: #cbff01;
+  color: var(--taskon-color-text-on-primary);
+  background-color: var(--taskon-color-primary);
   border: none;
   border-radius: 8px;
   cursor: pointer;
@@ -2515,7 +2545,7 @@
 }
 
 .taskon-quest-footer-complete-btn:hover:not(:disabled) {
-  background-color: #b8e600;
+  background-color: var(--taskon-color-primary-active);
 }
 
 .taskon-quest-footer-complete-btn:disabled {
@@ -2545,8 +2575,8 @@
 .taskon-quest-footer-complete-btn-spinner {
   width: 16px;
   height: 16px;
-  border: 2px solid rgba(0, 0, 0, 0.2);
-  border-top-color: #000;
+  border: 2px solid var(--taskon-color-border-secondary);
+  border-top-color: var(--taskon-color-text-on-primary);
   border-radius: 50%;
   animation: taskon-spin 0.8s linear infinite;
 }
@@ -2572,7 +2602,7 @@
 .taskon-quest-footer-earned-hint {
   font-size: 14px;
   font-weight: 500;
-  color: rgba(0, 0, 0, 0.6);
+  color: var(--taskon-color-text-tertiary);
 }
 
 @media (max-width: 750px) {
@@ -2613,13 +2643,8 @@
   gap: 0;
   padding: 8px;
   border-radius: 8px;
-  border: 1px solid rgba(255, 255, 255, 0.04);
-  background: linear-gradient(
-      90deg,
-      rgba(255, 255, 255, 0.04) 0%,
-      rgba(255, 255, 255, 0.04) 100%
-    ),
-    linear-gradient(90deg, #0d0d0d 0%, #0d0d0d 100%);
+  border: 1px solid var(--taskon-color-border-secondary);
+  background: var(--taskon-color-bg-surface-strong);
 }
 
 .taskon-quest-footer-earned-single-row {
@@ -2645,14 +2670,14 @@
   font-size: 18px;
   font-weight: 600;
   line-height: 24px;
-  color: #fff;
+  color: var(--taskon-color-text);
 }
 
 .taskon-quest-footer-earned-single-name {
   font-size: 12px;
   font-weight: 500;
   line-height: normal;
-  color: rgba(255, 255, 255, 0.4);
+  color: var(--taskon-color-text-disabled);
   text-transform: capitalize;
 }
 
@@ -2667,7 +2692,7 @@
   font-size: 16px;
   font-weight: 600;
   line-height: 24px;
-  color: #fff;
+  color: var(--taskon-color-text);
 }
 
 /* Redirect mode row (same layout as multi) */
@@ -2681,7 +2706,7 @@
   font-size: 16px;
   font-weight: 600;
   line-height: 24px;
-  color: #fff;
+  color: var(--taskon-color-text);
   flex: 1;
 }
 
@@ -2701,7 +2726,7 @@
   gap: 4px;
   overflow: hidden;
   border-radius: 4px;
-  background-color: #000;
+  background-color: var(--taskon-color-bg-inset);
   padding: 4px 8px;
 }
 
@@ -2724,7 +2749,7 @@
   justify-content: center;
   flex: 1;
   border-radius: 4px;
-  background-color: #000;
+  background-color: var(--taskon-color-bg-inset);
   padding: 4px 8px;
 }
 
@@ -2766,15 +2791,15 @@
 }
 
 .taskon-quest-footer-reward-amount {
-  color: #cbff01;
+  color: var(--taskon-color-primary);
 }
 
 .taskon-quest-footer-reward-type {
-  color: #fff;
+  color: var(--taskon-color-text);
 }
 
 .taskon-quest-footer-reward-name {
-  color: #cbff01;
+  color: var(--taskon-color-primary);
 }
 
 /* ============================================================================
@@ -2786,13 +2811,13 @@
   align-items: center;
   gap: 4px;
   font-size: 14px;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--taskon-color-text-tertiary);
   cursor: pointer;
   transition: color 0.2s ease;
 }
 
 .taskon-quest-footer-action-btn:not(.taskon-quest-footer-action-btn--disabled):hover {
-  color: rgba(255, 255, 255, 0.8);
+  color: var(--taskon-color-text-secondary);
 }
 
 .taskon-quest-footer-action-btn--disabled {
@@ -2807,8 +2832,8 @@
   padding: 4px 12px;
   font-size: 14px;
   font-weight: 600;
-  color: #000;
-  background-color: #cbff01;
+  color: var(--taskon-color-text-on-primary);
+  background-color: var(--taskon-color-primary);
   border: none;
   border-radius: 4px;
   cursor: pointer;
@@ -2816,7 +2841,7 @@
 }
 
 .taskon-quest-footer-claim-btn:hover:not(:disabled) {
-  background-color: #b8e600;
+  background-color: var(--taskon-color-primary-active);
 }
 
 .taskon-quest-footer-claim-btn:disabled {
@@ -2831,8 +2856,8 @@
 .taskon-quest-footer-claim-btn-spinner {
   width: 14px;
   height: 14px;
-  border: 2px solid rgba(0, 0, 0, 0.2);
-  border-top-color: #000;
+  border: 2px solid var(--taskon-color-border-secondary);
+  border-top-color: var(--taskon-color-text-on-primary);
   border-radius: 50%;
   animation: taskon-spin 0.8s linear infinite;
 }
@@ -2844,7 +2869,7 @@
 .taskon-quest-footer-earned-more-text {
   font-size: 14px;
   font-weight: 600;
-  color: #fff;
+  color: var(--taskon-color-text);
 }
 
 /* ============================================================================
@@ -2874,8 +2899,8 @@
   padding: 2px 6px;
   font-size: 12px;
   font-weight: 500;
-  color: #000;
-  background-color: rgba(203, 255, 1, 0.8);
+  color: var(--taskon-color-text-on-primary);
+  background-color: var(--taskon-color-primary);
   border-radius: 2px;
 }
 
@@ -2899,7 +2924,7 @@
   width: 1px;
   height: 10px;
   opacity: 0.1;
-  background: #d9d9d9;
+  background: var(--taskon-color-border-secondary);
 }
 
 @media (max-width: 750px) {
@@ -2921,11 +2946,11 @@
 }
 
 .taskon-quest-footer-reward-tx-label {
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--taskon-color-text-tertiary);
 }
 
 .taskon-quest-footer-reward-tx-link {
-  color: #fff;
+  color: var(--taskon-color-text);
   text-decoration: none;
 }
 
@@ -2940,7 +2965,7 @@
 .taskon-quest-footer-reward-dropping {
   margin-top: 4px;
   font-size: 14px;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--taskon-color-text-tertiary);
 }
 
 /* ============================================================================
@@ -2966,7 +2991,7 @@
    ============================================================================ */
 
 .taskon-quest-footer-detail-dialog {
-  background-color: #1a1a1a;
+  background-color: var(--taskon-color-bg-surface);
 }
 
 .taskon-quest-footer-detail-panel {
@@ -2976,7 +3001,7 @@
 .taskon-quest-footer-detail-title {
   font-size: 22px;
   font-weight: 600;
-  color: #fff;
+  color: var(--taskon-color-text);
   margin: 0 0 20px 0;
 }
 
@@ -3020,7 +3045,7 @@
 .taskon-quest-footer-selection-label {
   font-size: 16px;
   font-weight: 500;
-  color: rgba(255, 255, 255, 0.8);
+  color: var(--taskon-color-text-secondary);
 }
 
 .taskon-quest-footer-selection-rewards {
@@ -3049,7 +3074,7 @@
   gap: 6px;
   font-size: 14px;
   line-height: 18px;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--taskon-color-text-tertiary);
 }
 
 .taskon-quest-footer-selection-failed-icon {
@@ -3065,7 +3090,7 @@
   font-size: 14px;
   font-weight: 500;
   line-height: 16px;
-  color: #fff;
+  color: var(--taskon-color-text);
 }
 
 .taskon-quest-footer-selection-wait-icon {
@@ -3081,7 +3106,7 @@
   margin-top: 24px;
   padding-top: 24px;
   display: flex;
-  border-top: 1px solid rgba(255, 255, 255, 0.06);
+  border-top: 1px solid var(--taskon-color-border-secondary);
 }
 
 @media (max-width: 750px) {
@@ -3095,7 +3120,7 @@
 .taskon-quest-footer-detail-bonus-label {
   font-size: 16px;
   font-weight: 500;
-  color: rgba(255, 255, 255, 0.8);
+  color: var(--taskon-color-text-secondary);
 }
 
 .taskon-quest-footer-detail-bonus-right {
@@ -3107,7 +3132,7 @@
   font-size: 14px;
   font-weight: 600;
   text-align: right;
-  color: #fff;
+  color: var(--taskon-color-text);
 }
 
 .taskon-quest-footer-detail-bonus-item + .taskon-quest-footer-detail-bonus-item {
@@ -3153,6 +3178,7 @@ a.taskon-quest-footer-action-btn {
 .taskon-task-validation-dialog-icon {
   width: 48px;
   height: 48px;
+  color: var(--taskon-color-warning);
 }
 
 .taskon-task-validation-dialog-message {
@@ -3160,7 +3186,7 @@ a.taskon-quest-footer-action-btn {
   margin-bottom: 16px;
   font-size: 16px;
   line-height: 1.5;
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--taskon-color-text);
 }
 
 .taskon-task-validation-dialog-progress {
@@ -3168,7 +3194,7 @@ a.taskon-quest-footer-action-btn {
   margin-bottom: 16px;
   font-size: 14px;
   line-height: 1.5;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--taskon-color-text-tertiary);
 }
 
 .taskon-task-validation-dialog-btn {
@@ -3177,8 +3203,8 @@ a.taskon-quest-footer-action-btn {
   padding: 12px 24px;
   border: none;
   border-radius: 8px;
-  background: #cbff01;
-  color: #000;
+  background: var(--taskon-color-primary);
+  color: var(--taskon-color-text-on-primary);
   font-size: 16px;
   font-weight: 600;
   cursor: pointer;
@@ -3206,7 +3232,7 @@ a.taskon-quest-footer-action-btn {
   margin-bottom: 20px;
   font-size: 14px;
   line-height: 1.6;
-  color: rgba(255, 255, 255, 0.7);
+  color: var(--taskon-color-text-tertiary);
 }
 
 .taskon-reward-bind-list {
@@ -3220,20 +3246,20 @@ a.taskon-quest-footer-action-btn {
   align-items: center;
   justify-content: space-between;
   padding: 12px 16px;
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--taskon-color-bg-surface-strong);
   border-radius: 8px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid var(--taskon-color-border);
 }
 
 .taskon-reward-bind-item--bound {
-  border-color: rgba(26, 255, 171, 0.3);
-  background: rgba(26, 255, 171, 0.05);
+  border-color: var(--taskon-color-secondary);
+  background: var(--taskon-color-secondary-bg);
 }
 
 .taskon-reward-bind-item-label {
   font-size: 14px;
   font-weight: 500;
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--taskon-color-text);
 }
 
 .taskon-reward-bind-item-status {
@@ -3241,7 +3267,7 @@ a.taskon-quest-footer-action-btn {
   align-items: center;
   gap: 6px;
   font-size: 13px;
-  color: #1affab;
+  color: var(--taskon-color-secondary);
 }
 
 .taskon-reward-bind-item-btn {
@@ -3251,8 +3277,8 @@ a.taskon-quest-footer-action-btn {
   padding: 8px 16px;
   border: none;
   border-radius: 6px;
-  background: #cbff01;
-  color: #000;
+  background: var(--taskon-color-primary);
+  color: var(--taskon-color-text-on-primary);
   font-size: 13px;
   font-weight: 600;
   cursor: pointer;
@@ -3287,10 +3313,10 @@ a.taskon-quest-footer-action-btn {
   width: 100%;
   margin-top: 20px;
   padding: 14px 24px;
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  border: 1px solid var(--taskon-color-border);
   border-radius: 8px;
   background: transparent;
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--taskon-color-text);
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
@@ -3298,8 +3324,8 @@ a.taskon-quest-footer-action-btn {
 }
 
 .taskon-reward-bind-skip-btn:hover {
-  background: rgba(255, 255, 255, 0.05);
-  border-color: rgba(255, 255, 255, 0.3);
+  background: var(--taskon-color-bg-surface-strong);
+  border-color: var(--taskon-color-border-secondary);
 }
 /**
  * DiscordBindDialog Styles
@@ -3328,7 +3354,7 @@ a.taskon-quest-footer-action-btn {
   margin-bottom: 24px;
   font-size: 14px;
   line-height: 1.6;
-  color: rgba(255, 255, 255, 0.7);
+  color: var(--taskon-color-text-tertiary);
 }
 
 .taskon-discord-bind-dialog-buttons {
@@ -3350,8 +3376,8 @@ a.taskon-quest-footer-action-btn {
 
 .taskon-discord-bind-dialog-btn--primary {
   border: none;
-  background: #cbff01;
-  color: #000;
+  background: var(--taskon-color-primary);
+  color: var(--taskon-color-text-on-primary);
 }
 
 .taskon-discord-bind-dialog-btn--primary:hover {
@@ -3359,21 +3385,21 @@ a.taskon-quest-footer-action-btn {
 }
 
 .taskon-discord-bind-dialog-btn--secondary {
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  border: 1px solid var(--taskon-color-border);
   background: transparent;
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--taskon-color-text);
 }
 
 .taskon-discord-bind-dialog-btn--secondary:hover {
-  background: rgba(255, 255, 255, 0.05);
-  border-color: rgba(255, 255, 255, 0.3);
+  background: var(--taskon-color-bg-surface-strong);
+  border-color: var(--taskon-color-border-secondary);
 }
 /**
  * WinnersRow 组件样式
  * 与 QuestRewards 卡片样式保持一致
  */
 
-/* WinnersRow 容器 - 纯色背景，与 reward 卡片一致 */
+/* WinnersRow 容器 - 使用主题背景层级 */
 .taskon-quest-winners-row {
   display: flex;
   align-items: center;
@@ -3382,12 +3408,12 @@ a.taskon-quest-footer-action-btn {
   border-radius: 10px;
   border: none;
   cursor: pointer;
-  background: rgba(255, 255, 255, 0.04);
+  background: var(--taskon-color-bg-surface-subtle);
   transition: background-color 0.2s ease;
 }
 
 .taskon-quest-winners-row:hover {
-  background: rgba(255, 255, 255, 0.08);
+  background: var(--taskon-color-bg-surface-strong);
 }
 
 /* Winners 标签 */
@@ -3395,7 +3421,7 @@ a.taskon-quest-footer-action-btn {
   font-size: 18px;
   font-weight: 500;
   line-height: 23px;
-  color: #ffffff;
+  color: var(--taskon-color-text);
 }
 
 /* 数量 */
@@ -3406,14 +3432,14 @@ a.taskon-quest-footer-action-btn {
   font-weight: 600;
   line-height: 23px;
   text-align: left;
-  color: #00ffa3;
+  color: var(--taskon-color-secondary);
 }
 
 /* 右箭头图标 */
 .taskon-quest-winners-row-arrow {
   width: 16px;
   height: 16px;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--taskon-color-text-secondary);
   flex-shrink: 0;
 }
 /**
@@ -3431,7 +3457,7 @@ a.taskon-quest-footer-action-btn {
    ========================================================================== */
 .taskon-winners {
   border-radius: 10px;
-  background: var(--taskon-bg-card, rgba(255, 255, 255, 0.04));
+  background: var(--taskon-color-bg-surface-subtle);
   overflow: hidden;
 }
 
@@ -3444,16 +3470,16 @@ a.taskon-quest-footer-action-btn {
   justify-content: center;
   gap: 8px;
   padding: 16px;
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--taskon-color-bg-surface-strong);
   font-size: 16px;
   font-weight: 500;
-  color: rgba(255, 255, 255, 0.7);
+  color: var(--taskon-color-text-secondary);
   text-decoration: none;
   transition: color 0.2s ease;
 }
 
 .taskon-winners-alert:hover {
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--taskon-color-text);
 }
 
 .taskon-winners-alert-icon {
@@ -3468,7 +3494,7 @@ a.taskon-quest-footer-action-btn {
 
 .taskon-winners-alert-community {
   font-weight: 600;
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--taskon-color-text);
 }
 
 .taskon-winners-alert-link-icon {
@@ -3487,18 +3513,18 @@ a.taskon-quest-footer-action-btn {
 .taskon-winners-pow-info {
   font-size: 12px;
   line-height: 1.5;
-  color: rgba(255, 212, 101, 0.6);
+  color: var(--taskon-color-warning);
   margin-bottom: 16px;
 }
 
 .taskon-winners-pow-info-community {
   font-weight: 500;
-  color: #ffd465;
+  color: var(--taskon-color-warning);
 }
 
 .taskon-winners-pow-info-only {
   font-weight: 500;
-  color: #ffd465;
+  color: var(--taskon-color-warning);
 }
 
 /* ==========================================================================
@@ -3507,7 +3533,7 @@ a.taskon-quest-footer-action-btn {
 .taskon-winners-card {
   padding: 16px;
   border-radius: 8px;
-  background: var(--taskon-bg-card, rgba(255, 255, 255, 0.04));
+  background: var(--taskon-color-bg-surface-subtle);
   display: flex;
   flex-direction: column;
   gap: 16px;
@@ -3522,17 +3548,17 @@ a.taskon-quest-footer-action-btn {
 
 .taskon-winners-card-label {
   font-weight: 500;
-  color: rgba(255, 255, 255, 0.7);
+  color: var(--taskon-color-text-secondary);
 }
 
 .taskon-winners-card-value {
   font-weight: 500;
-  color: #9aff73;
+  color: var(--taskon-color-success);
 }
 
 .taskon-winners-card-value--primary {
   font-weight: 600;
-  color: var(--taskon-primary, #cbff01);
+  color: var(--taskon-color-primary);
 }
 
 /* ==========================================================================
@@ -3550,41 +3576,6 @@ a.taskon-quest-footer-action-btn {
  * @design 参考 Figma 设计稿
  */
 
-/* ============================================================================
-   CSS 变量定义
-   ============================================================================ */
-
-.taskon-quest {
-  /* 颜色系统 */
-  --taskon-quest-bg-body: #111111;
-  --taskon-quest-text-lightest: #ffffff;
-  --taskon-quest-text-lighter: rgba(255, 255, 255, 0.8);
-  --taskon-quest-text-light: rgba(255, 255, 255, 0.6);
-  --taskon-quest-text-dark: rgba(255, 255, 255, 0.4);
-  --taskon-quest-text-darkest: rgba(255, 255, 255, 0.1);
-  --taskon-quest-text-invisible: rgba(255, 255, 255, 0.04);
-  --taskon-quest-primary: #cbff01;
-  --taskon-quest-secondary: #1affab;
-  --taskon-quest-link: #58afff;
-  --taskon-quest-button-primary-color: #000000;
-
-  /* 间距系统 */
-  --taskon-quest-spacing-xxs: 4px;
-  --taskon-quest-spacing-xs: 8px;
-  --taskon-quest-spacing-s: 12px;
-  --taskon-quest-spacing-m: 16px;
-  --taskon-quest-spacing-l: 20px;
-  --taskon-quest-spacing-xl: 24px;
-  --taskon-quest-spacing-xxl: 32px;
-  --taskon-quest-spacing-3xl: 40px;
-
-  /* 圆角系统 */
-  --taskon-quest-radius-s: 4px;
-  --taskon-quest-radius-m: 6px;
-  --taskon-quest-radius-l: 8px;
-  --taskon-quest-radius-xl: 12px;
-}
-
 /* ============================================================================
    Quest Widget 根容器
    ============================================================================ */
@@ -3592,8 +3583,7 @@ a.taskon-quest-footer-action-btn {
 .taskon-quest {
   font-size: 16px;
   line-height: 1.5;
-  color: var(--taskon-quest-text-lightest);
-  background-color: var(--taskon-quest-bg-body);
+  color: var(--taskon-color-text);
 }
 
 /* ============================================================================
@@ -3607,14 +3597,14 @@ a.taskon-quest-footer-action-btn {
   justify-content: center;
   padding: 48px 24px;
   gap: 12px;
-  color: var(--taskon-quest-text-light);
+  color: var(--taskon-color-text-tertiary);
 }
 
 .taskon-quest-loading-spinner {
   width: 32px;
   height: 32px;
-  border: 3px solid var(--taskon-quest-text-darkest);
-  border-top-color: var(--taskon-quest-primary);
+  border: 3px solid var(--taskon-color-border);
+  border-top-color: var(--taskon-color-primary);
   border-radius: 50%;
   animation: taskon-quest-spin 1s linear infinite;
 }
@@ -3644,7 +3634,7 @@ a.taskon-quest-footer-action-btn {
 }
 
 .taskon-quest-error-message {
-  color: #ef4444;
+  color: var(--taskon-color-error);
   font-size: 14px;
 }
 
@@ -3652,10 +3642,10 @@ a.taskon-quest-footer-action-btn {
   margin-top: 8px;
   padding: 8px 16px;
   font-size: 14px;
-  color: var(--taskon-quest-text-lightest);
-  background-color: var(--taskon-quest-primary);
+  color: var(--taskon-color-text);
+  background-color: var(--taskon-color-primary);
   border: none;
-  border-radius: var(--taskon-quest-radius-m);
+  border-radius: var(--taskon-border-radius);
   cursor: pointer;
   transition: background-color 0.2s;
 }
@@ -3673,7 +3663,7 @@ a.taskon-quest-footer-action-btn {
   align-items: center;
   justify-content: center;
   padding: 48px 24px;
-  color: var(--taskon-quest-text-light);
+  color: var(--taskon-color-text-tertiary);
   font-size: 14px;
 }
 
@@ -3683,7 +3673,7 @@ a.taskon-quest-footer-action-btn {
 
 .taskon-quest-layout {
   display: flex;
-  gap: var(--taskon-quest-spacing-3xl);
+  gap: var(--taskon-spacing-xl);
   align-items: flex-start;
 }
 
@@ -3693,19 +3683,14 @@ a.taskon-quest-footer-action-btn {
   min-width: 0;
   display: flex;
   flex-direction: column;
-  gap: var(--taskon-quest-spacing-xl);
+  gap: var(--taskon-spacing-lg);
 }
 
 /* 中间分割线 */
 .taskon-quest-divider {
   width: 1px;
   align-self: stretch;
-  background: linear-gradient(
-    to bottom,
-    var(--taskon-quest-text-invisible),
-    var(--taskon-quest-text-darkest),
-    var(--taskon-quest-text-invisible)
-  );
+  background: var(--taskon-color-border-secondary);
   flex-shrink: 0;
 }
 
@@ -3715,7 +3700,7 @@ a.taskon-quest-footer-action-btn {
   min-width: 0;
   display: flex;
   flex-direction: column;
-  gap: var(--taskon-quest-spacing-xxl);
+  gap: var(--taskon-spacing-xl);
 }
 
 /* ============================================================================
@@ -3725,14 +3710,14 @@ a.taskon-quest-footer-action-btn {
 .taskon-quest-header {
   display: flex;
   flex-direction: column;
-  gap: var(--taskon-quest-spacing-l);
+  gap: var(--taskon-spacing-lg);
 }
 
 /* 标题 + 倒计时区域 */
 .taskon-quest-header-title-section {
   display: flex;
   flex-direction: column;
-  gap: var(--taskon-quest-spacing-xs);
+  gap: var(--taskon-spacing-sm);
 }
 
 .taskon-quest-title {
@@ -3740,21 +3725,21 @@ a.taskon-quest-footer-action-btn {
   font-size: 28px;
   font-weight: 600;
   line-height: 38px;
-  color: var(--taskon-quest-text-lightest);
+  color: var(--taskon-color-text);
 }
 
 /* 倒计时 + 时间范围 */
 .taskon-quest-header-meta {
   display: flex;
   align-items: center;
-  gap: var(--taskon-quest-spacing-s);
-  padding: var(--taskon-quest-spacing-xxs) 0;
-  border-radius: var(--taskon-quest-radius-s);
+  gap: var(--taskon-spacing-md);
+  padding: var(--taskon-spacing-xs) 0;
+  border-radius: var(--taskon-border-radius-sm);
 }
 
 .taskon-quest-countdown {
   display: flex;
-  gap: var(--taskon-quest-spacing-xs);
+  gap: var(--taskon-spacing-sm);
   align-items: center;
 }
 
@@ -3762,14 +3747,14 @@ a.taskon-quest-footer-action-btn {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--taskon-quest-text-lightest);
+  color: var(--taskon-color-text);
 }
 
 .taskon-quest-countdown-label {
   font-size: 16px;
   font-weight: 400;
   line-height: 24px;
-  color: var(--taskon-quest-text-lighter);
+  color: var(--taskon-color-text-secondary);
 }
 
 /* 已结束状态的标签样式 */
@@ -3782,20 +3767,20 @@ a.taskon-quest-footer-action-btn {
   font-size: 16px;
   font-weight: 600;
   line-height: 24px;
-  color: var(--taskon-quest-primary);
+  color: var(--taskon-color-primary);
 }
 
 .taskon-quest-countdown-divider {
   width: 1px;
   height: 20px;
-  background-color: var(--taskon-quest-text-darkest);
+  background-color: var(--taskon-color-border-secondary);
 }
 
 .taskon-quest-time-range {
   font-size: 16px;
   font-weight: 400;
   line-height: 24px;
-  color: var(--taskon-quest-text-lighter);
+  color: var(--taskon-color-text-secondary);
 }
 
 /* Banner 图片 */
@@ -3826,7 +3811,7 @@ a.taskon-quest-footer-action-btn {
   position: relative;
   display: flex;
   flex-direction: column;
-  gap: var(--taskon-quest-spacing-m);
+  gap: var(--taskon-spacing-md);
 }
 
 .taskon-quest-desc-text {
@@ -3834,7 +3819,7 @@ a.taskon-quest-footer-action-btn {
   font-size: 16px;
   font-weight: 400;
   line-height: 24px;
-  color: var(--taskon-quest-text-lighter);
+  color: var(--taskon-color-text-secondary);
   max-height: 120px;
   overflow: hidden;
   position: relative;
@@ -3855,15 +3840,15 @@ a.taskon-quest-footer-action-btn {
   height: 49px;
   background: linear-gradient(
     0.83deg,
-    var(--taskon-quest-bg-body) 10.557%,
-    rgba(17, 17, 17, 0) 93.799%
+    var(--taskon-color-bg-canvas) 10.557%,
+    transparent 93.799%
   );
   pointer-events: none;
 }
 
 /* 富文本样式重置 */
 .taskon-quest-desc-text p {
-  margin: 0 0 var(--taskon-quest-spacing-xs) 0;
+  margin: 0 0 var(--taskon-spacing-sm) 0;
 }
 
 .taskon-quest-desc-text p:last-child {
@@ -3871,38 +3856,38 @@ a.taskon-quest-footer-action-btn {
 }
 
 .taskon-quest-desc-text a {
-  color: var(--taskon-quest-link);
+  color: var(--taskon-color-link);
   text-decoration: underline;
 }
 
 .taskon-quest-desc-text ul,
 .taskon-quest-desc-text ol {
-  margin: var(--taskon-quest-spacing-xs) 0;
-  padding-left: var(--taskon-quest-spacing-xl);
+  margin: var(--taskon-spacing-sm) 0;
+  padding-left: var(--taskon-spacing-lg);
 }
 
 .taskon-quest-desc-text li {
-  margin: var(--taskon-quest-spacing-xxs) 0;
+  margin: var(--taskon-spacing-xs) 0;
 }
 
 /* 图片样式：限制最大宽度，防止溢出 */
 .taskon-quest-desc-text img {
   max-width: 100%;
   height: auto;
-  border-radius: var(--taskon-quest-radius-m);
+  border-radius: var(--taskon-border-radius);
 }
 
 /* iframe 样式：限制最大宽度 */
 .taskon-quest-desc-text iframe {
   max-width: 100%;
-  border-radius: var(--taskon-quest-radius-m);
+  border-radius: var(--taskon-border-radius);
 }
 
 .taskon-quest-desc-more {
   font-size: 16px;
   font-weight: 600;
   line-height: 24px;
-  color: var(--taskon-quest-text-lightest);
+  color: var(--taskon-color-text);
   text-decoration: underline;
   text-decoration-skip-ink: none;
   text-underline-position: from-font;
@@ -3920,12 +3905,7 @@ a.taskon-quest-footer-action-btn {
 /* 分割线 */
 .taskon-quest-content-divider {
   height: 1px;
-  background: linear-gradient(
-    to right,
-    var(--taskon-quest-text-invisible),
-    var(--taskon-quest-text-darkest),
-    var(--taskon-quest-text-invisible)
-  );
+  background: var(--taskon-color-border-secondary);
 }
 
 /* ============================================================================
@@ -3935,13 +3915,13 @@ a.taskon-quest-footer-action-btn {
 .taskon-quest-tasks {
   display: flex;
   flex-direction: column;
-  gap: var(--taskon-quest-spacing-m);
+  gap: var(--taskon-spacing-md);
 }
 
 /* Quest 标题 */
 .taskon-quest-tasks-header {
   display: flex;
-  gap: var(--taskon-quest-spacing-m);
+  gap: var(--taskon-spacing-md);
   align-items: center;
 }
 
@@ -3950,37 +3930,32 @@ a.taskon-quest-footer-action-btn {
   font-size: 24px;
   font-weight: 600;
   line-height: 32px;
-  color: var(--taskon-quest-text-lightest);
+  color: var(--taskon-color-text);
 }
 
 /* 任务列表 */
 .taskon-quest-tasks-list {
   display: flex;
   flex-direction: column;
-  gap: var(--taskon-quest-spacing-m);
+  gap: var(--taskon-spacing-md);
 }
 
 .taskon-quest-task-placeholder {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: var(--taskon-quest-spacing-m);
+  padding: var(--taskon-spacing-md);
   height: 66px;
-  background: linear-gradient(
-      90deg,
-      rgba(255, 255, 255, 0.1) 0%,
-      rgba(255, 255, 255, 0.1) 100%
-    ),
-    linear-gradient(90deg, #0d0d0d 0%, #0d0d0d 100%);
-  border: 1px solid var(--taskon-quest-text-invisible);
-  border-radius: var(--taskon-quest-radius-l);
+  background: var(--taskon-color-bg-surface-strong);
+  border: 1px solid var(--taskon-color-border-secondary);
+  border-radius: var(--taskon-border-radius);
   font-size: 18px;
   font-weight: 600;
-  color: var(--taskon-quest-text-lightest);
+  color: var(--taskon-color-text);
 }
 
 .taskon-quest-task-template {
-  color: var(--taskon-quest-text-dark);
+  color: var(--taskon-color-text-disabled);
   font-size: 14px;
   font-weight: 500;
 }
@@ -3988,21 +3963,21 @@ a.taskon-quest-footer-action-btn {
 /* Complete 按钮 */
 .taskon-quest-complete-btn {
   width: 100%;
-  margin-top: var(--taskon-quest-spacing-xl);
-  padding: var(--taskon-quest-spacing-m) var(--taskon-quest-spacing-3xl);
+  margin-top: var(--taskon-spacing-lg);
+  padding: var(--taskon-spacing-md) var(--taskon-spacing-xl);
   font-size: 18px;
   font-weight: 600;
   line-height: 24px;
-  color: var(--taskon-quest-button-primary-color);
-  background-color: var(--taskon-quest-primary);
+  color: var(--taskon-color-text-on-primary);
+  background-color: var(--taskon-color-primary);
   border: none;
-  border-radius: var(--taskon-quest-radius-l);
+  border-radius: var(--taskon-border-radius);
   cursor: pointer;
   transition: opacity 0.2s;
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: var(--taskon-quest-spacing-xs);
+  gap: var(--taskon-spacing-sm);
 }
 
 .taskon-quest-complete-btn:hover:not(:disabled) {
@@ -4021,8 +3996,8 @@ a.taskon-quest-footer-action-btn {
 .taskon-quest-winners-section {
   display: flex;
   flex-direction: column;
-  gap: var(--taskon-quest-spacing-m);
-  margin-bottom: var(--taskon-quest-spacing-xl);
+  gap: var(--taskon-spacing-md);
+  margin-bottom: var(--taskon-spacing-lg);
 }
 
 .taskon-quest-winners-section-title {
@@ -4030,7 +4005,7 @@ a.taskon-quest-footer-action-btn {
   font-size: 24px;
   font-weight: 600;
   line-height: 32px;
-  color: var(--taskon-quest-text-lightest);
+  color: var(--taskon-color-text);
 }
 
 /* ============================================================================
@@ -4040,7 +4015,7 @@ a.taskon-quest-footer-action-btn {
 .taskon-quest-rewards-section {
   display: flex;
   flex-direction: column;
-  gap: var(--taskon-quest-spacing-l);
+  gap: var(--taskon-spacing-lg);
 }
 
 .taskon-quest-rewards-section-title {
@@ -4048,22 +4023,7 @@ a.taskon-quest-footer-action-btn {
   font-size: 24px;
   font-weight: 600;
   line-height: 32px;
-  color: var(--taskon-quest-text-lightest);
-}
-
-/* QuestRewards 组件 CSS 变量映射 */
-.taskon-quest-rewards-section {
-  --taskon-text-primary: var(--taskon-quest-text-lightest);
-  --taskon-text-secondary: var(--taskon-quest-text-lighter);
-  --taskon-text-tertiary: var(--taskon-quest-text-light);
-  --taskon-bg-card: var(--taskon-quest-text-invisible);
-  --taskon-bg-secondary: rgba(255, 255, 255, 0.03);
-  --taskon-bg-tertiary: var(--taskon-quest-text-darkest);
-  --taskon-border-color: var(--taskon-quest-text-darkest);
-  --taskon-primary: var(--taskon-quest-primary);
-  --taskon-success: var(--taskon-quest-secondary);
-  --taskon-link: var(--taskon-quest-link);
-  --taskon-warning: #ffc107;
+  color: var(--taskon-color-text);
 }
 
 /* ============================================================================
@@ -4073,7 +4033,7 @@ a.taskon-quest-footer-action-btn {
 .taskon-quest-rewards {
   display: flex;
   flex-direction: column;
-  gap: var(--taskon-quest-spacing-l);
+  gap: var(--taskon-spacing-lg);
 }
 
 .taskon-quest-rewards-title {
@@ -4081,24 +4041,24 @@ a.taskon-quest-footer-action-btn {
   font-size: 24px;
   font-weight: 600;
   line-height: 32px;
-  color: var(--taskon-quest-text-lightest);
+  color: var(--taskon-color-text);
 }
 
 .taskon-quest-rewards-list {
   display: flex;
   flex-direction: column;
-  gap: var(--taskon-quest-spacing-m);
+  gap: var(--taskon-spacing-md);
 }
 
 .taskon-quest-reward-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: var(--taskon-quest-spacing-m);
-  background-color: var(--taskon-quest-text-invisible);
-  border-radius: var(--taskon-quest-radius-xl);
+  padding: var(--taskon-spacing-md);
+  background-color: var(--taskon-color-border-secondary);
+  border-radius: var(--taskon-border-radius-lg);
   font-size: 16px;
-  color: var(--taskon-quest-text-lightest);
+  color: var(--taskon-color-text);
 }
 
 /* ============================================================================
@@ -4106,14 +4066,14 @@ a.taskon-quest-footer-action-btn {
    ============================================================================ */
 
 .taskon-quest-eligs-section {
-  margin-top: var(--taskon-quest-spacing-xl);
+  margin-top: var(--taskon-spacing-lg);
 }
 
 .taskon-quest-eligs-section-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: var(--taskon-quest-spacing-m);
+  margin-bottom: var(--taskon-spacing-md);
 }
 
 .taskon-quest-eligs-section-title {
@@ -4121,7 +4081,7 @@ a.taskon-quest-footer-action-btn {
   font-size: 20px;
   font-weight: 600;
   line-height: 28px;
-  color: var(--taskon-quest-text-lightest);
+  color: var(--taskon-color-text);
 }
 
 /* ============================================================================
@@ -4131,7 +4091,7 @@ a.taskon-quest-footer-action-btn {
 .taskon-quest-participants {
   display: flex;
   flex-direction: column;
-  gap: var(--taskon-quest-spacing-l);
+  gap: var(--taskon-spacing-lg);
 }
 
 .taskon-quest-participants-title {
@@ -4139,7 +4099,7 @@ a.taskon-quest-footer-action-btn {
   font-size: 24px;
   font-weight: 600;
   line-height: 32px;
-  color: var(--taskon-quest-text-lightest);
+  color: var(--taskon-color-text);
 }
 
 .taskon-quest-participants-item {
@@ -4152,11 +4112,11 @@ a.taskon-quest-footer-action-btn {
 }
 
 .taskon-quest-participants-label {
-  color: var(--taskon-quest-text-lighter);
+  color: var(--taskon-color-text-secondary);
 }
 
 .taskon-quest-participants-value {
-  color: var(--taskon-quest-text-lightest);
+  color: var(--taskon-color-text);
 }
 
 /* ============================================================================
@@ -4171,12 +4131,7 @@ a.taskon-quest-footer-action-btn {
   .taskon-quest-divider {
     width: 100%;
     height: 1px;
-    background: linear-gradient(
-      to right,
-      var(--taskon-quest-text-invisible),
-      var(--taskon-quest-text-darkest),
-      var(--taskon-quest-text-invisible)
-    );
+    background: var(--taskon-color-border-secondary);
   }
 
   .taskon-quest-sidebar {
@@ -4191,7 +4146,7 @@ a.taskon-quest-footer-action-btn {
    ============================================================================ */
 
 .taskon-quest-blindbox-dialog-wrapper {
-  background: #0d0d0d;
+  background: var(--taskon-color-bg-surface);
   padding: 0;
   width: auto;
   max-width: 560px;
@@ -4202,7 +4157,7 @@ a.taskon-quest-footer-action-btn {
 }
 
 .taskon-quest-blindbox-reward-wrapper {
-  background: #0d0d0d;
+  background: var(--taskon-color-bg-surface);
   padding: 0;
   width: auto;
   max-width: 560px;
@@ -4211,4 +4166,3 @@ a.taskon-quest-footer-action-btn {
 .taskon-quest-blindbox-reward-wrapper .taskon-dialog-body {
   padding: 0;
 }
-