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

package/dist/CommunityTaskList.css

@@ -1,7 +1,6 @@
 /**
  * CardSelector 组件样式
  * 完全复刻 taskon-website 的 CmCardRadio 样式
- * 直接使用 dark 模式颜色值，不使用 CSS 变量
  * 使用 taskon- 前缀避免与项目方样式冲突
  */
 
@@ -17,9 +16,9 @@
   flex-shrink: 0;
   padding: 10px 20px;
   border-radius: 6px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  background: #252a2c;
-  color: rgba(255, 255, 255, 0.8);
+  border: 1px solid var(--taskon-color-border);
+  background: var(--taskon-color-bg-surface);
+  color: var(--taskon-color-text-secondary);
   font-size: 16px;
   line-height: 24px;
   letter-spacing: 0.36px;
@@ -39,22 +38,25 @@
 
 /* Hover 状态 */
 .taskon-card-selector-item:hover {
-  border-color: rgba(255, 255, 255, 0.15);
+  border-color: var(--taskon-color-border-secondary);
+  color: var(--taskon-color-text);
 }
 
 /* 选中状态 */
 .taskon-card-selector-item--selected {
-  background: #fff;
-  color: #0d0d0d;
+  background: var(--taskon-color-text);
+  color: var(--taskon-color-bg-canvas);
+  border-color: var(--taskon-color-text);
 }
 
 .taskon-card-selector-item--selected:hover {
-  background: #fff;
+  background: var(--taskon-color-text);
+  color: var(--taskon-color-bg-canvas);
 }
 
 /* Focus 状态（键盘导航） */
 .taskon-card-selector-item:focus-visible {
-  outline: 2px solid rgba(255, 255, 255, 0.5);
+  outline: 2px solid var(--taskon-color-primary);
   outline-offset: 2px;
 }
 
@@ -72,331 +74,6 @@
     backdrop-filter: blur(1.33vw);
   }
 }
-/**
- * BindWalletDialog 组件样式
- * 使用 taskon-bind-wallet-* 命名空间
- * 与 taskon-website 保持一致
- */
-
-/* ==================== 容器 ==================== */
-.taskon-bind-wallet-dialog {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-}
-
-/* ==================== 标题 ==================== */
-.taskon-bind-wallet-dialog-title {
-  margin: 0;
-  font-size: 22px;
-  font-weight: 700;
-  line-height: 28px;
-  color: var(--taskon-color-text, #ffffff);
-}
-
-/* ==================== 链类型标签 ==================== */
-.taskon-bind-wallet-dialog-chain-label {
-  margin-top: 20px;
-  font-size: 16px;
-  font-weight: 500;
-  line-height: 20px;
-  color: var(--taskon-color-text, #ffffff);
-}
-
-/* ==================== 钱包网格 ==================== */
-.taskon-bind-wallet-dialog-grid {
-  margin-top: 10px;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 18px;
-}
-
-/* ==================== 钱包项 ==================== */
-.taskon-bind-wallet-item {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 50px;
-  padding: 0 12px;
-
-  background: transparent;
-  border: 1px solid var(--taskon-color-border, rgba(255, 255, 255, 0.15));
-  border-radius: 8px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.taskon-bind-wallet-item:hover,
-.taskon-bind-wallet-item:focus {
-  background: var(--taskon-color-bg-hover, rgba(255, 255, 255, 0.1));
-}
-
-.taskon-bind-wallet-item:active {
-  transform: scale(0.98);
-}
-
-/* 钱包图标 */
-.taskon-bind-wallet-item-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  flex-shrink: 0;
-}
-
-.taskon-bind-wallet-item-icon svg {
-  width: 24px;
-  height: 24px;
-}
-
-/* 钱包名称 */
-.taskon-bind-wallet-item-name {
-  margin-left: 10px;
-  font-size: 18px;
-  font-weight: 600;
-  line-height: 20px;
-  color: var(--taskon-color-text, #ffffff);
-}
-
-/* 已安装标签 */
-.taskon-bind-wallet-item-installed {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  padding: 4px 8px;
-  font-size: 10px;
-  line-height: 14px;
-  color: var(--taskon-color-secondary, #22c55e);
-  background: var(--taskon-color-secondary-bg, rgba(34, 197, 94, 0.1));
-  border-radius: 8px 0;
-  transform-origin: bottom right;
-}
-
-/* ==================== 连接中状态 ==================== */
-.taskon-bind-wallet-item--connecting {
-  opacity: 0.7;
-  cursor: wait;
-}
-
-.taskon-bind-wallet-item--connecting:hover,
-.taskon-bind-wallet-item--connecting:focus {
-  background: transparent;
-}
-
-/* ==================== 禁用状态 ==================== */
-.taskon-bind-wallet-item--disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.taskon-bind-wallet-item--disabled:hover,
-.taskon-bind-wallet-item--disabled:focus {
-  background: transparent;
-}
-
-.taskon-bind-wallet-item--disabled:active {
-  transform: none;
-}
-
-/* 不可用标签 */
-.taskon-bind-wallet-item-unavailable {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  padding: 4px 8px;
-  font-size: 10px;
-  line-height: 14px;
-  color: var(--taskon-color-text-tertiary, #71717a);
-  background: var(--taskon-color-bg-secondary, rgba(255, 255, 255, 0.05));
-  border-radius: 8px 0;
-}
-
-/* 连接中 spinner */
-.taskon-bind-wallet-item-connecting {
-  position: absolute;
-  right: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.taskon-bind-wallet-spinner {
-  width: 16px;
-  height: 16px;
-  color: var(--taskon-color-primary, #6366f1);
-  animation: taskon-bind-wallet-spin 1s linear infinite;
-}
-
-@keyframes taskon-bind-wallet-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-/* ==================== 提示文字 ==================== */
-.taskon-bind-wallet-dialog-tip {
-  margin: 20px 0 0;
-  font-size: 14px;
-  line-height: 1.5;
-  color: var(--taskon-color-text-tertiary, #71717a);
-  text-align: center;
-}
-
-/* ==================== 响应式 ==================== */
-@media (max-width: 750px) {
-  .taskon-bind-wallet-dialog-title {
-    font-size: 3.8vw;
-    line-height: 4vw;
-  }
-
-  .taskon-bind-wallet-dialog-chain-label {
-    margin-top: 4vw;
-    font-size: 4vw;
-    line-height: 5.6vw;
-  }
-
-  .taskon-bind-wallet-dialog-grid {
-    margin-top: 2.667vw;
-    grid-template-columns: 1fr;
-    gap: 4vw;
-  }
-
-  .taskon-bind-wallet-item {
-    height: 12vw;
-  }
-
-  .taskon-bind-wallet-item-icon {
-    width: 6.4vw;
-    height: 6.4vw;
-  }
-
-  .taskon-bind-wallet-item-icon svg {
-    width: 6.4vw;
-    height: 6.4vw;
-  }
-
-  .taskon-bind-wallet-item-name {
-    margin-left: 2.667vw;
-    font-size: 3.733vw;
-    line-height: 4.667vw;
-  }
-
-  .taskon-bind-wallet-dialog-tip {
-    margin-top: 4vw;
-    font-size: 3vw;
-  }
-}
-
-/* ==================== 连接中遮层 ==================== */
-.taskon-bind-wallet-loading-overlay {
-  position: absolute;
-  /* 使用负值覆盖 Dialog body 的 padding */
-  inset: -24px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  background: rgba(255, 255, 255, 0.1);
-  backdrop-filter: blur(4px);
-  border-radius: 16px;
-}
-
-.taskon-bind-wallet-loading-spinner {
-  width: 40px;
-  height: 40px;
-  color: var(--taskon-color-text-secondary, #a1a1aa);
-  animation: taskon-bind-wallet-spin 1s linear infinite;
-}
-
-.taskon-bind-wallet-loading-text {
-  margin: 20px 0 0;
-  max-width: 60%;
-  font-size: 16px;
-  line-height: 20px;
-  color: var(--taskon-color-text-secondary, #a1a1aa);
-  text-align: center;
-}
-
-@media (max-width: 750px) {
-  .taskon-bind-wallet-loading-overlay {
-    inset: -20px;
-    border-radius: 12px;
-  }
-
-  .taskon-bind-wallet-loading-spinner {
-    width: 8vw;
-    height: 8vw;
-  }
-
-  .taskon-bind-wallet-loading-text {
-    margin-top: 4vw;
-    font-size: 3.5vw;
-    line-height: 5vw;
-  }
-}
-/**
- * CardDescExpress 组件样式
- * @module components/CardDescExpress
- */
-
-.taskon-card-desc-rich {
-  max-height: 60px;
-  overflow: hidden;
-  font-size: 14px;
-  line-height: 21px;
-  color: rgb(255 255 255 / 60%); /* --color-light */
-  white-space: pre-wrap;
-  word-break: break-word;
-  overflow-wrap: break-word;
-}
-
-/* 处理富文本中的常见元素 */
-.taskon-card-desc-rich p {
-  margin: 0;
-}
-
-.taskon-card-desc-rich a {
-  color: #cbff01; /* --secondary-100 */
-  text-decoration: none;
-}
-
-.taskon-card-desc-rich a:hover {
-  text-decoration: underline;
-}
-
-.taskon-card-desc-rich strong,
-.taskon-card-desc-rich b {
-  font-weight: 600;
-}
-
-.taskon-card-desc-rich em,
-.taskon-card-desc-rich i {
-  font-style: italic;
-}
-
-.taskon-card-desc-rich ul,
-.taskon-card-desc-rich ol {
-  margin: 0;
-  padding-left: 1.5em;
-}
-
-.taskon-card-desc-rich pre {
-  text-wrap: initial;
-}
-
-/* ========== 响应式样式（移动端） ========== */
-@media (max-width: 750px) {
-  .taskon-card-desc-rich {
-    max-height: 18vw;
-    font-size: 3.733vw;
-    line-height: normal;
-  }
-}
 /**
  * ClaimButton 组件样式
  * 复刻原版 ClaimButton.vue 样式
@@ -413,9 +90,9 @@
   padding: 0 10px;
   text-align: center;
   border-radius: 6px;
-  border: 1px solid rgb(255 255 255 / 100%);
+  border: 1px solid var(--taskon-color-text);
   background: transparent;
-  color: rgb(255 255 255 / 100%);
+  color: var(--taskon-color-text);
   font-size: 14px;
   font-weight: 500;
   line-height: 18px;
@@ -431,8 +108,8 @@
 /* 深色样式（弹窗内使用） */
 .taskon-community-task-claim--dark {
   height: 40px;
-  background: rgb(255 255 255 / 100%);
-  color: rgb(0 0 0 / 100%);
+  background: var(--taskon-color-text);
+  color: var(--taskon-color-bg-canvas);
   font-weight: 600;
   border: none;
 }
@@ -445,7 +122,7 @@
 
 /* 加载状态 */
 .taskon-community-task-claim--loading {
-  background: rgb(255 255 255 / 20%);
+  background: var(--taskon-color-bg-surface-strong);
   border: none;
   cursor: wait;
 }
@@ -478,8 +155,8 @@
   justify-content: center;
   border-radius: 4px;
   border: none;
-  background: rgb(255 255 255 / 10%);
-  color: rgb(255 255 255 / 100%);
+  background: var(--taskon-color-bg-surface-strong);
+  color: var(--taskon-color-text);
   font-size: 12px;
   font-weight: 500;
   line-height: 16px;
@@ -576,8 +253,8 @@
   height: 34px;
   padding: 0 12px;
   border-radius: 6px;
-  border: 1px solid rgba(255, 255, 255, 0.5);
-  color: rgba(255, 255, 255, 0.5);
+  border: 1px solid var(--taskon-color-border);
+  color: var(--taskon-color-text-disabled);
   font-size: 14px;
   font-weight: 500;
   line-height: 18px;
@@ -604,7 +281,7 @@
 /* 完成倒计时容器 - 复刻原版 var(--color-dark) */
 .taskon-community-task-done-countdown {
   margin-top: 10px;
-  color: rgba(255, 255, 255, 0.4);
+  color: var(--taskon-color-text-disabled);
   font-size: 14px;
   line-height: 18px;
 }
@@ -617,7 +294,7 @@
 /* 倒计时数字 - 复刻原版 var(--color-lighter) */
 .taskon-community-task-done-countdown-time {
   margin-left: 4px;
-  color: rgba(255, 255, 255, 0.8);
+  color: var(--taskon-color-text-secondary);
 }
 
 /* ========== 响应式样式（移动端） ========== */
@@ -657,8 +334,7 @@
 
 .taskon-community-validation-tip-text {
   margin: 0;
-  /* 复刻原版 --text-info-warning-60 颜色: rgb(255 212 101 / 60%) */
-  color: var(--taskon-color-warning-60, rgba(255, 212, 101, 0.6));
+  color: var(--taskon-color-warning);
   font-size: 12px;
   font-style: normal;
   font-weight: 400;
@@ -691,14 +367,14 @@
   margin-top: 8px;
   font-size: 12px;
   line-height: 16px;
-  color: #f5a623; /* warn color */
+  color: var(--taskon-color-warning);
 }
 
 /* 可点击的社区链接 */
 .taskon-community-task-progress-tip-link {
   text-decoration: underline;
   cursor: pointer;
-  color: #f5a623;
+  color: var(--taskon-color-warning);
 }
 
 .taskon-community-task-progress-tip-link:hover {
@@ -729,7 +405,7 @@
   width: 200px;
   height: 4px;
   max-width: 100%;
-  background: rgba(255, 255, 255, 0.1);
+  background: var(--taskon-color-bg-surface-strong);
   border-radius: 30px;
 }
 
@@ -737,8 +413,8 @@
   height: 100%;
   background: linear-gradient(
     89.87deg,
-    var(--taskon-color-secondary, #00ffa3) 0.13%,
-    var(--taskon-color-primary, #cbff01) 99.92%
+    var(--taskon-color-secondary) 0.13%,
+    var(--taskon-color-primary) 99.92%
   );
   border-radius: 30px;
 }
@@ -760,7 +436,6 @@
  * 复刻原版 CmBaseTask.vue 的样式
  * 使用 Widget 命名空间扁平化方案
  * 所有类名使用 .taskon-community-* 前缀，避免跨 Widget 冲突
- * 直接使用 dark 模式颜色值
  */
 
 /* 卡片外层容器 */
@@ -775,8 +450,8 @@
   flex-direction: column;
   padding: 20px;
   border-radius: 10px;
-  border: 1px solid rgb(255 255 255 / 4%);
-  background: #1f1f1f;
+  border: 1px solid var(--taskon-color-border-secondary);
+  background: var(--taskon-color-bg-inset);
   min-height: 230px;
   height: 100%;
   cursor: pointer;
@@ -786,8 +461,8 @@
 
 /* 完成状态卡片样式 */
 .taskon-community-task--won {
-  border-color: rgb(203 255 1 / 20%);
-  background: rgb(203 255 1 / 4%);
+  border-color: var(--taskon-color-primary);
+  background: var(--taskon-color-primary-bg);
   min-height: 184px;
 }
 
@@ -812,8 +487,8 @@
   right: 10px;
   padding: 2px 6px;
   border-radius: 4px;
-  background: rgb(255 255 255 / 4%);
-  color: rgb(255 255 255 / 60%);
+  background: var(--taskon-color-bg-surface-subtle);
+  color: var(--taskon-color-text-tertiary);
   font-size: 13px;
   line-height: 16px;
   z-index: 1;
@@ -831,7 +506,7 @@
   font-size: 16px;
   font-weight: 600;
   line-height: 20px;
-  color: rgba(255, 255, 255, 0.95);
+  color: var(--taskon-color-text);
   word-break: break-word;
 }
 
@@ -839,12 +514,12 @@
 .taskon-community-task-title--link {
   display: block;
   text-decoration: none;
-  color: var(--taskon-color-primary, #6366f1);
+  color: var(--taskon-color-primary);
   transition: color 0.2s ease;
 }
 
 .taskon-community-task-title--link:hover {
-  color: var(--taskon-color-primary-hover, #818cf8);
+  color: var(--taskon-color-primary-hover);
   text-decoration: underline;
 }
 
@@ -856,12 +531,12 @@
 }
 
 .taskon-community-task-time-label {
-  color: rgba(255, 255, 255, 0.5);
+  color: var(--taskon-color-text-disabled);
 }
 
 .taskon-community-task-time-value {
   margin-left: 4px;
-  color: rgba(255, 255, 255, 0.8);
+  color: var(--taskon-color-text-secondary);
 }
 
 /* Action 按钮区域 */
@@ -879,8 +554,8 @@
   justify-content: center;
   border-radius: 6px;
   border: none;
-  background: rgb(203 255 1 / 12%);
-  color: #cbff01;
+  background: var(--taskon-color-primary-bg);
+  color: var(--taskon-color-primary);
   font-size: 14px;
   font-weight: 500;
   line-height: 34px;
@@ -892,8 +567,8 @@
 }
 
 .taskon-community-task-action:hover {
-  background: #cbff01;
-  color: #0d0d0d;
+  background: var(--taskon-color-primary);
+  color: var(--taskon-color-text-on-primary);
 }
 
 .taskon-community-task-action:active {
@@ -921,9 +596,9 @@
   justify-content: center;
   padding: 0 10px;
   border-radius: 6px;
-  border: 1px solid rgba(255, 255, 255, 0.9);
+  border: 1px solid var(--taskon-color-text);
   background: transparent;
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--taskon-color-text);
   font-size: 14px;
   font-weight: 500;
   line-height: 18px;
@@ -940,7 +615,7 @@
 }
 
 .taskon-community-task-claim--loading {
-  background: rgba(255, 255, 255, 0.1);
+  background: var(--taskon-color-bg-surface-strong);
   border: none;
   cursor: not-allowed;
 }
@@ -952,7 +627,7 @@
 
 /* 冷却文本 */
 .taskon-community-task-cooldown {
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--taskon-color-text-tertiary);
   font-size: 14px;
   line-height: 18px;
   text-align: right;
@@ -968,7 +643,7 @@
 /* Unlimited 任务已有积分时的 refresh 样式 */
 /* 复刻 Vue 版本 ClaimRow.vue 中的 .refresh-bg 样式 */
 .taskon-community-task-claim-row--refresh {
-  background: rgb(255 255 255 / 4%);
+  background: var(--taskon-color-bg-surface-subtle);
   padding-right: 10px;
   border-radius: 6px;
 }
@@ -986,7 +661,7 @@
   display: flex;
   align-items: center;
   border-radius: 6px;
-  background: rgb(255 255 255 / 4%);
+  background: var(--taskon-color-bg-surface-subtle);
   font-size: 14px;
   font-weight: 600;
   line-height: 18px;
@@ -1000,7 +675,7 @@
 }
 
 .taskon-community-task-reward-amount {
-  color: #cbff01; /* secondary-100 */
+  color: var(--taskon-color-secondary);
 }
 
 .taskon-community-task-reward-name {
@@ -1008,7 +683,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--taskon-color-text);
 }
 
 /* Token 链图标 */
@@ -1047,7 +722,7 @@
 .taskon-community-task-won-checked {
   width: 20px;
   height: 20px;
-  color: #cbff01; /* primary-100 */
+  color: var(--taskon-color-primary);
   flex-shrink: 0;
 }
 
@@ -1055,13 +730,13 @@
 .taskon-community-task-won-check {
   width: 20px;
   height: 20px;
-  color: #cbff01;
+  color: var(--taskon-color-primary);
   font-weight: bold;
 }
 
 .taskon-community-task-won-amount {
   margin-left: 6px;
-  color: #cbff01;
+  color: var(--taskon-color-primary);
   font-weight: 700;
 }
 
@@ -1075,7 +750,7 @@
 .taskon-community-task-won-name {
   margin-left: 4px;
   font-weight: 600;
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--taskon-color-text);
 }
 
 /* pointIcon - 复刻原版 won__icon */
@@ -1100,7 +775,7 @@
 
 .taskon-community-task-won-status {
   margin-left: auto;
-  color: #27ae60;
+  color: var(--taskon-color-success);
   font-size: 14px;
   font-weight: 600;
   line-height: 18px;
@@ -1113,17 +788,17 @@
 
 .taskon-community-task-won-single {
   font-weight: 600;
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--taskon-color-text);
 }
 
 .taskon-community-task-won-label {
   margin-left: 4px;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--taskon-color-text-tertiary);
 }
 
 .taskon-community-task-won-total {
   margin-left: 6px;
-  color: #cbff01;
+  color: var(--taskon-color-primary);
   font-weight: 700;
 }
 
@@ -1133,12 +808,12 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--taskon-color-text);
 }
 
 /* 兼容旧样式 */
 .taskon-community-task-won-text {
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--taskon-color-text-tertiary);
   font-size: 14px;
   line-height: 18px;
 }
@@ -1166,16 +841,16 @@
   line-height: 18px;
 }
 
-/* 审核失败：红色样式 - 复刻原版 #eb5757 */
+/* 审核失败：错误语义色 */
 .taskon-community-task-review-status--failed {
-  background: rgba(235, 87, 87, 0.1);
-  color: #eb5757;
+  background: var(--taskon-color-error-bg);
+  color: var(--taskon-color-error);
 }
 
-/* 审核中：紫色样式 - 复刻原版 #9b51e0 */
+/* 审核中：警告语义色 */
 .taskon-community-task-review-status--review {
-  background: rgba(155, 81, 224, 0.1);
-  color: #9b51e0;
+  background: var(--taskon-color-warning-bg);
+  color: var(--taskon-color-warning);
 }
 
 /* ========== 响应式样式（移动端） ========== */
@@ -1348,14 +1023,14 @@
 }
 
 .taskon-community-task-field-label {
-  color: rgb(255 255 255 / 40%); /* --color-dark */
+  color: var(--taskon-color-text-disabled);
   white-space: pre-wrap;
   word-break: break-word;
   overflow-wrap: break-word;
 }
 
 .taskon-community-task-field-link {
-  color: rgb(255 255 255 / 80%); /* --color-lighter，与 value 颜色一致 */
+  color: var(--taskon-color-text-secondary);
   text-decoration: none;
   cursor: pointer;
   word-break: break-all;
@@ -1367,7 +1042,7 @@
 }
 
 .taskon-community-task-field-value {
-  color: rgb(255 255 255 / 80%); /* --color-lighter */
+  color: var(--taskon-color-text-secondary);
   word-break: break-word;
   overflow-wrap: break-word;
 }
@@ -1392,11 +1067,11 @@
 .taskon-community-task-field-copy-icon {
   width: 14px;
   height: 14px;
-  color: rgb(255 255 255 / 60%); /* --color-darker */
+  color: var(--taskon-color-text-tertiary);
 }
 
 .taskon-community-task-field-copy--copied .taskon-community-task-field-copy-icon {
-  color: #cbff01; /* --link-color / --secondary-100 */
+  color: var(--taskon-color-primary);
 }
 
 /* ========== 响应式样式（移动端） ========== */
@@ -1422,11 +1097,11 @@
 .taskon-eligibility-mask {
   position: absolute;
   inset: 0;
+  background: var(--taskon-color-bg-mask);
   -webkit-backdrop-filter: blur(14px);
   backdrop-filter: blur(14px);
   z-index: 10;
   padding: 20px;
-  border: 1px solid var(--taskon-border-color, rgba(255, 255, 255, 0.1));
   border-radius: 10px;
   box-sizing: border-box;
 }
@@ -1436,7 +1111,7 @@
   display: flex;
   align-items: center;
   gap: 10px;
-  color: var(--taskon-color-lighter, #999);
+  color: var(--taskon-color-text-tertiary);
   font-size: 16px;
   font-style: normal;
   font-weight: 600;
@@ -1450,7 +1125,7 @@
 }
 
 .taskon-eligibility-mask-highlight {
-  color: var(--taskon-secondary-100, #6366f1);
+  color: var(--taskon-color-primary);
 }
 
 /* ==================== 任务名称 ==================== */
@@ -1463,7 +1138,7 @@
   font-style: normal;
   font-weight: 600;
   line-height: normal;
-  color: var(--taskon-text-color, #fff);
+  color: var(--taskon-color-text);
 }
 
 /* ==================== 条件提示行 ==================== */
@@ -1476,7 +1151,7 @@
 }
 
 .taskon-eligibility-mask-cond-title {
-  color: var(--taskon-color-lightest, #ccc);
+  color: var(--taskon-color-text-secondary);
   font-size: 14px;
   font-style: normal;
   font-weight: 500;
@@ -1484,7 +1159,7 @@
 }
 
 .taskon-eligibility-mask-cond-label {
-  color: var(--taskon-secondary-100, #6366f1);
+  color: var(--taskon-color-primary);
 }
 
 /* Check 按钮 */
@@ -1492,8 +1167,8 @@
   display: flex;
   align-items: center;
   gap: 4px;
-  background: var(--taskon-color-lightest, #ccc);
-  color: var(--taskon-color-lightest-inverse, #000);
+  background: var(--taskon-color-text);
+  color: var(--taskon-color-bg-canvas);
   padding: 2px 6px;
   border: none;
   border-radius: 4px;
@@ -1542,7 +1217,7 @@
   margin: 15px 0;
   height: 0;
   border: none;
-  border-top: 0.5px dashed var(--taskon-color-darkest, #333);
+  border-top: 0.5px dashed var(--taskon-color-border);
 }
 
 /* ==================== 条件列表 ==================== */
@@ -1562,7 +1237,7 @@
   font-style: normal;
   font-weight: 500;
   line-height: normal;
-  color: var(--taskon-text-color, #fff);
+  color: var(--taskon-color-text);
 }
 
 .taskon-eligibility-mask-item:first-child {
@@ -1668,7 +1343,7 @@
   padding: 0;
   border: none;
   background: transparent;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--taskon-color-text-tertiary);
   font-size: 13px;
   line-height: 16px;
   cursor: pointer;
@@ -1676,7 +1351,7 @@
 }
 
 .taskon-community-task-expand-btn:hover {
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--taskon-color-text);
 }
 
 .taskon-community-task-expand-text {
@@ -1707,6 +1382,17 @@
     height: 3.2vw;
   }
 }
+
+/* 卡片描述与标题间距（与原版对齐） */
+.taskon-template-task-rich-desc {
+  margin-top: 10px;
+}
+
+@media (max-width: 750px) {
+  .taskon-template-task-rich-desc {
+    margin-top: 2.67vw;
+  }
+}
 /**
  * PowTask 组件样式
  * 使用 Widget 命名空间扁平化方案
@@ -1720,10 +1406,10 @@
 
 /* 任务描述 */
 .taskon-community-pow-desc {
-  margin-top: 12px;
+  margin-top: 10px;
   font-size: 14px;
   line-height: 20px;
-  color: rgb(255 255 255 / 80%);
+  color: var(--taskon-color-text-secondary);
 }
 
 /* 任务链接 */
@@ -1731,7 +1417,7 @@
   display: inline-block;
   margin-top: 8px;
   font-size: 14px;
-  color: #cbff01;
+  color: var(--taskon-color-primary);
   text-decoration: none;
   cursor: pointer;
 }
@@ -1750,12 +1436,12 @@
 
 /* 审核中 */
 .taskon-community-pow-review-status--pending {
-  color: #ffc107;
+  color: var(--taskon-color-warning);
 }
 
 /* 审核失败 */
 .taskon-community-pow-review-status--failed {
-  color: #f44336;
+  color: var(--taskon-color-error);
 }
 
 /* 响应式 */
@@ -1803,11 +1489,11 @@
 /* Hover 效果（PC 端） */
 @media (min-width: 751px) {
   .taskon-community-task-item--hover:hover .taskon-community-task {
-    background: #2a2a2a; /* 卡片 hover 背景色 */
+    background: var(--taskon-color-bg-floating);
   }
 
   .taskon-community-task-item--hover:hover .taskon-community-task--won {
-    background: rgba(203, 255, 1, 0.08); /* 完成状态 hover 背景 */
+    background: var(--taskon-color-primary-bg);
   }
 }
 
@@ -1878,31 +1564,31 @@
 /* Stacked cards behind main card */
 .taskon-taskchain-card-stack {
   position: absolute;
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  border: 1px solid var(--taskon-color-border-secondary);
   border-radius: 10px;
   height: 40px;
-  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.1);
+  box-shadow: 0 -1px 2px 0 var(--taskon-color-border-secondary);
 }
 
 .taskon-taskchain-card-stack--1 {
   left: 37px;
   right: 37px;
   top: 4px;
-  background: #1a1a1a;
+  background: var(--taskon-color-bg-canvas);
 }
 
 .taskon-taskchain-card-stack--2 {
   left: 24px;
   right: 24px;
   top: 12px;
-  background: #1f1f1f;
+  background: var(--taskon-color-bg-surface);
 }
 
 .taskon-taskchain-card-stack--3 {
   left: 10px;
   right: 10px;
   top: 20px;
-  background: #222222;
+  background: var(--taskon-color-bg-floating);
 }
 
 /* Main card */
@@ -1912,7 +1598,8 @@
   flex-direction: column;
   min-height: 200px;
   padding: 20px;
-  background-color: var(--taskon-bg-secondary, #252525);
+  background-color: var(--taskon-color-bg-inset);
+  border: 1px solid var(--taskon-color-border);
   border-radius: 10px;
   cursor: pointer;
   overflow: hidden;
@@ -1921,7 +1608,7 @@
 
 .taskon-taskchain-card:hover {
   transform: translateY(-2px);
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 8px 20px var(--taskon-color-bg-mask);
 }
 
 .taskon-taskchain-card--disabled {
@@ -1939,7 +1626,7 @@
   font-weight: 600;
   word-break: break-word;
   padding-right: 48px;
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
 }
 
 /* Spots left */
@@ -1949,11 +1636,11 @@
   gap: 4px;
   margin-top: 10px;
   font-size: 14px;
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
 }
 
 .taskon-taskchain-card-spots-label {
-  color: var(--taskon-text-secondary, #999);
+  color: var(--taskon-color-text-secondary);
 }
 
 /* Description */
@@ -1961,7 +1648,7 @@
   margin-top: 8px;
   margin-bottom: 16px;
   font-size: 14px;
-  color: var(--taskon-text-secondary, #999);
+  color: var(--taskon-color-text-secondary);
   line-height: 1.5;
   display: -webkit-box;
   -webkit-line-clamp: 2;
@@ -1991,7 +1678,7 @@
   align-items: center;
   gap: 4px;
   padding: 8px;
-  background-color: rgba(255, 255, 255, 0.05);
+  background-color: var(--taskon-color-bg-surface-subtle);
   border-radius: 4px;
   flex-shrink: 0;
 }
@@ -2007,17 +1694,17 @@
 .taskon-taskchain-card-reward-amount {
   font-size: 14px;
   font-weight: 600;
-  color: #eeb803;
+  color: var(--taskon-color-warning);
 }
 
 .taskon-taskchain-card-reward-amount--points {
-  color: #00ffa3;
+  color: var(--taskon-color-secondary);
 }
 
 /* Reward name */
 .taskon-taskchain-card-reward-name {
   font-size: 14px;
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
 }
 
 /* NFT reward icon (rounded corners for NFT images) */
@@ -2039,7 +1726,7 @@
   margin-left: 16px;
   font-size: 14px;
   font-weight: 600;
-  color: #27ae60;
+  color: var(--taskon-color-success);
   flex-shrink: 0;
 }
 
@@ -2054,18 +1741,18 @@
 }
 
 .taskon-taskchain-card-overlay--ended {
-  background-color: rgba(0, 0, 0, 0.7);
+  background-color: var(--taskon-color-bg-mask);
 }
 
 .taskon-taskchain-card-overlay-text {
   font-size: 16px;
   font-weight: 600;
-  color: #fff;
+  color: var(--taskon-color-text);
   text-transform: uppercase;
 }
 
 .taskon-taskchain-card-overlay--locked {
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: var(--taskon-color-bg-mask);
   backdrop-filter: blur(2px);
 }
 
@@ -2084,7 +1771,7 @@
   align-items: center;
   justify-content: center;
   gap: 16px;
-  background-color: rgba(255, 255, 255, 0.1);
+  background-color: var(--taskon-color-bg-surface-strong);
   backdrop-filter: blur(10px);
   border-radius: inherit;
   opacity: 0;
@@ -2108,12 +1795,12 @@
 .taskon-taskchain-card-lock-text {
   font-size: 14px;
   text-align: center;
-  color: #fff;
+  color: var(--taskon-color-text);
   white-space: nowrap;
 }
 
 .taskon-taskchain-card-lock-highlight {
-  color: #00ffa3;
+  color: var(--taskon-color-secondary);
   text-transform: capitalize;
 }
 
@@ -2229,12 +1916,12 @@
 
 /* Completed step - bright green */
 .taskon-taskchain-step-bar--completed {
-  background-color: #cbff01;
+  background-color: var(--taskon-color-primary);
 }
 
 /* Pending step - dim green */
 .taskon-taskchain-step-bar--pending {
-  background-color: rgb(203 255 1 / 20%);
+  background-color: var(--taskon-color-primary-bg);
 }
 
 /* Flag icon at the end */
@@ -2287,31 +1974,31 @@
 .taskon-taskchain-time-icon {
   width: 16px;
   height: 16px;
-  color: var(--taskon-text-tertiary, #666);
+  color: var(--taskon-color-text-tertiary);
 }
 
 .taskon-taskchain-time-text {
   font-size: 14px;
   font-weight: 500;
-  color: var(--taskon-text-secondary, #999);
+  color: var(--taskon-color-text-secondary);
 }
 
 .taskon-taskchain-time-divider {
   width: 1px;
   height: 20px;
-  background-color: var(--taskon-border-color, #333);
+  background-color: var(--taskon-color-border);
 }
 
 .taskon-taskchain-time-label {
   font-size: 14px;
   font-weight: 500;
-  color: var(--taskon-text-secondary, #999);
+  color: var(--taskon-color-text-secondary);
 }
 
 .taskon-taskchain-time-value {
   font-size: 14px;
   font-weight: 500;
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
 }
 
 /* Mobile styles */
@@ -2351,7 +2038,11 @@
 .taskon-taskchain-reward-display-inner {
   position: relative;
   border-radius: 8px;
-  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.2));
+  background: linear-gradient(
+    to bottom,
+    transparent,
+    var(--taskon-color-border-secondary)
+  );
   padding: 2px;
 }
 
@@ -2359,7 +2050,7 @@
   position: relative;
   display: flex;
   border-radius: 8px;
-  background-color: #1a1a1a;
+  background-color: var(--taskon-color-bg-surface);
 }
 
 .taskon-taskchain-reward-display-item {
@@ -2391,15 +2082,15 @@
 }
 
 .taskon-taskchain-reward-display-text--token {
-  color: #eeb803;
+  color: var(--taskon-color-warning);
 }
 
 .taskon-taskchain-reward-display-text--points {
-  color: var(--taskon-secondary, #cbff01);
+  color: var(--taskon-color-secondary);
 }
 
 .taskon-taskchain-reward-display-text--nft {
-  color: #fff;
+  color: var(--taskon-color-text);
   max-width: 120px;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -2443,14 +2134,14 @@
   font-size: 32px;
   font-weight: 600;
   line-height: 40px;
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
   margin-bottom: 12px;
 }
 
 /* Subtitle */
 .taskon-taskchain-reward-subtitle {
   font-size: 16px;
-  color: var(--taskon-text-secondary, #999);
+  color: var(--taskon-color-text-secondary);
 }
 
 /* ============================================================================
@@ -2499,7 +2190,7 @@
 .taskon-taskchain-win-reward-text {
   font-size: 20px;
   font-weight: 500;
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
   max-width: 200px;
   overflow: visible;
   text-wrap: wrap;
@@ -2509,12 +2200,12 @@
 
 /* Token amount color */
 .taskon-taskchain-win-reward-text--token {
-  color: #fbb15a;
+  color: var(--taskon-color-warning);
 }
 
 /* Points amount color */
 .taskon-taskchain-win-reward-text--points {
-  color: #4b5eff;
+  color: var(--taskon-color-link);
 }
 
 /* ============================================================================
@@ -2537,8 +2228,8 @@
   align-items: center;
   justify-content: center;
   border-radius: 8px;
-  border: 1px solid rgb(60 232 155 / 20%);
-  background-color: rgb(0 255 163 / 10%);
+  border: 1px solid var(--taskon-color-secondary);
+  background-color: var(--taskon-color-secondary-bg);
 }
 
 /* Multi-reward: flex-wrap centered layout */
@@ -2560,6 +2251,18 @@
   background-color: transparent;
 }
 
+/* Token claimed item trigger button reset */
+.taskon-taskchain-claimed-item--token-trigger {
+  appearance: none;
+  border: 0;
+  background-color: transparent;
+  font: inherit;
+  line-height: inherit;
+  text-align: inherit;
+  color: inherit;
+  cursor: pointer;
+}
+
 /* Multi-reward item: vertical layout */
 .taskon-taskchain-claimed-item--multi {
   flex-direction: column;
@@ -2582,11 +2285,11 @@
 
 /* Claimed icon glow effects - matches Vue: showGlow when multi rewards */
 .taskon-taskchain-claimed-icon--glow-token {
-  box-shadow: 0 -8px 30px 0 #f47d3b;
+  box-shadow: 0 -8px 30px 0 var(--taskon-color-warning);
 }
 
 .taskon-taskchain-claimed-icon--glow-points {
-  box-shadow: 0 -8px 30px 0 #ff6b35;
+  box-shadow: 0 -8px 30px 0 var(--taskon-color-secondary);
 }
 
 /* Claimed reward text - single reward */
@@ -2594,7 +2297,7 @@
   font-size: 18px;
   font-weight: 600;
   line-height: 24px;
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
 }
 
 /* Claimed reward text - multi reward */
@@ -2605,12 +2308,12 @@
 
 /* Token amount color in claimed state */
 .taskon-taskchain-claimed-text--token {
-  color: #fbb15a;
+  color: var(--taskon-color-warning);
 }
 
 /* Points amount color in claimed state */
 .taskon-taskchain-claimed-text--points {
-  color: #ff6b35;
+  color: var(--taskon-color-secondary);
 }
 
 /* Token text with underline (matches Vue: tw-underline on token text) */
@@ -2623,19 +2326,19 @@
   cursor: pointer;
 }
 
-/* Right arrow icon for token link (matches Vue: tw-h-3 tw-w-3 = 12px) */
+/* Right arrow icon for token link */
 .taskon-taskchain-claimed-arrow {
-  color: #fbb15a;
+  color: var(--taskon-color-warning);
   margin-left: 4px;
-  width: 12px;
-  height: 12px;
+  width: 14px;
+  height: 14px;
   flex-shrink: 0;
 }
 
-/* Multi-reward smaller arrow (matches Vue: tw-h-2 tw-w-2 = 8px) */
+/* Multi-reward smaller arrow */
 .taskon-taskchain-claimed-arrow--multi {
-  width: 8px;
-  height: 8px;
+  width: 10px;
+  height: 10px;
 }
 
 /* ============================================================================
@@ -2664,21 +2367,21 @@
 /* Tooltip label (left side) */
 .taskon-taskchain-token-tooltip-label {
   font-size: 14px;
-  color: var(--taskon-text-tertiary, rgba(255, 255, 255, 0.5));
+  color: var(--taskon-color-text-tertiary);
 }
 
 /* Tooltip value (right side, token amount) */
 .taskon-taskchain-token-tooltip-value {
   font-size: 14px;
   font-weight: 600;
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
 }
 
 /* Tooltip USD value */
 .taskon-taskchain-token-tooltip-usd {
   font-size: 14px;
   font-weight: 500;
-  color: #cbff01;
+  color: var(--taskon-color-primary);
 }
 
 /* Action buttons container */
@@ -2814,8 +2517,8 @@
   align-items: center;
   justify-content: space-between;
   border-radius: 8px;
-  border: 1px solid rgb(60 232 155 / 20%);
-  background-color: rgb(0 255 163 / 10%);
+  border: 1px solid var(--taskon-color-secondary);
+  background-color: var(--taskon-color-secondary-bg);
   padding: 12px 16px;
 }
 
@@ -2845,7 +2548,7 @@
 
 /* NFT fallback image (no collection image available) */
 .taskon-taskchain-claimed-nft-image--fallback {
-  background-color: #1f1f1f;
+  background-color: var(--taskon-color-bg-surface);
 }
 
 /* Chain badge on NFT image (bottom-right corner) */
@@ -2856,8 +2559,8 @@
   width: 20px;
   height: 20px;
   border-radius: 50%;
-  border: 1px solid rgba(0, 0, 0, 0.6);
-  background-color: #fff;
+  border: 1px solid var(--taskon-color-border);
+  background-color: var(--taskon-color-bg-canvas);
 }
 
 /* NFT text section */
@@ -2872,14 +2575,14 @@
 /* NFT label ("NFT" text) */
 .taskon-taskchain-claimed-nft-label {
   font-size: 14px;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--taskon-color-text-tertiary);
 }
 
 /* NFT collection name */
 .taskon-taskchain-claimed-nft-name {
   font-size: 18px;
   font-weight: 600;
-  color: #fff;
+  color: var(--taskon-color-text);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -2891,8 +2594,8 @@
   padding: 8px 20px;
   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: 8px;
   cursor: pointer;
@@ -2938,19 +2641,19 @@
 
 /* Primary button */
 .taskon-taskchain-btn--primary {
-  color: #000;
-  background-color: #cbff01;
+  color: var(--taskon-color-text-on-primary);
+  background-color: var(--taskon-color-primary);
 }
 
 /* Secondary button */
 .taskon-taskchain-btn--secondary {
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
   background-color: transparent;
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  border: 1px solid var(--taskon-color-border);
 }
 
 .taskon-taskchain-btn--secondary:hover {
-  background-color: rgba(255, 255, 255, 0.1);
+  background-color: var(--taskon-color-bg-surface-strong);
 }
 
 /* ============================================================================
@@ -3032,8 +2735,8 @@
 /**
  * TaskChainBlindBoxStep Styles
  *
- * This component now reuses BlindBoxDialog and BlindBoxRewardDialog from Quest,
- * so most styles come from those components. Only container and helper styles here.
+ * This component now reuses BlindBoxDialog from Quest and shared TaskChain claimed rewards UI.
+ * Only container and helper styles are defined here.
  */
 
 /* Container */
@@ -3051,6 +2754,39 @@
   min-height: 400px;
 }
 
+/* Blind box claimed result (shared claimed list renderer) */
+.taskon-taskchain-blindbox-result {
+  width: 100%;
+  max-width: 510px;
+  text-align: center;
+}
+
+.taskon-taskchain-blindbox-result-title {
+  margin: 0;
+  font-size: 32px;
+  font-weight: 600;
+  line-height: 40px;
+  color: var(--taskon-color-text);
+}
+
+.taskon-taskchain-blindbox-result-subtitle {
+  margin-top: 12px;
+  margin-bottom: 0;
+  font-size: 16px;
+  line-height: 1.5;
+  color: var(--taskon-color-text-secondary);
+}
+
+.taskon-taskchain-blindbox-result-rewards {
+  margin-top: 16px;
+}
+
+.taskon-taskchain-blindbox-result-actions {
+  display: flex;
+  justify-content: center;
+  margin-top: 60px;
+}
+
 /* Manual submit action */
 .taskon-taskchain-blindbox-actions {
   display: flex;
@@ -3066,8 +2802,8 @@
   border-radius: 8px;
   cursor: pointer;
   transition: opacity 0.2s, transform 0.1s;
-  color: #000;
-  background-color: #cbff01;
+  color: var(--taskon-color-text-on-primary);
+  background-color: var(--taskon-color-primary);
 }
 
 .taskon-taskchain-blindbox-btn:hover {
@@ -3089,15 +2825,15 @@
   flex-direction: column;
   align-items: center;
   gap: 16px;
-  color: var(--taskon-text-secondary, #999);
+  color: var(--taskon-color-text-secondary);
 }
 
 /* Spinner */
 .taskon-taskchain-spinner {
   width: 32px;
   height: 32px;
-  border: 3px solid rgba(255, 255, 255, 0.2);
-  border-top-color: #cbff01;
+  border: 3px solid var(--taskon-color-border);
+  border-top-color: var(--taskon-color-primary);
   border-radius: 50%;
   animation: taskon-taskchain-spin 0.8s linear infinite;
 }
@@ -3114,6 +2850,19 @@
     padding: 16px;
     min-height: 350px;
   }
+
+  .taskon-taskchain-blindbox-result-title {
+    font-size: 24px;
+    line-height: 32px;
+  }
+
+  .taskon-taskchain-blindbox-result-subtitle {
+    font-size: 14px;
+  }
+
+  .taskon-taskchain-blindbox-result-actions {
+    margin-top: 40px;
+  }
 }
 /**
  * NotEligible Styles
@@ -3133,7 +2882,7 @@
 .taskon-taskchain-not-eligible-oops {
   font-size: 32px;
   font-weight: 600;
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
   margin-bottom: 32px;
 }
 
@@ -3145,13 +2894,13 @@
 .taskon-taskchain-not-eligible-title {
   font-size: 18px;
   font-weight: 600;
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
   margin-bottom: 8px;
 }
 
 .taskon-taskchain-not-eligible-desc {
   font-size: 14px;
-  color: var(--taskon-text-secondary, #999);
+  color: var(--taskon-color-text-secondary);
   max-width: 300px;
   line-height: 1.5;
 }
@@ -3160,7 +2909,7 @@
   width: 508px;
   max-width: 100%;
   border-radius: 10px;
-  background-color: rgba(255, 255, 255, 0.05);
+  background-color: var(--taskon-color-bg-surface-strong);
   padding: 16px;
 }
 
@@ -3191,7 +2940,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: rgba(0, 0, 0, 0.5);
+  background: var(--taskon-color-bg-mask);
   backdrop-filter: blur(10px);
   z-index: 10;
   border-radius: inherit;
@@ -3208,7 +2957,7 @@
   font-size: 32px;
   font-weight: 700;
   line-height: 40px;
-  color: #fff;
+  color: var(--taskon-color-text);
 }
 
 /* Mobile responsive */
@@ -3238,7 +2987,8 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  padding-top: 38px;
+  /* Reserve safe spacing for BottomDialog close button area to prevent overlap with title/content */
+  padding-top: 68px;
   padding-bottom: 40px;
 }
 
@@ -3248,7 +2998,7 @@
   font-weight: 600;
   margin: 0;
   word-break: break-word;
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
 }
 
 /* Time info */
@@ -3286,8 +3036,8 @@
   margin-top: 16px;
   padding: 40px;
   border-radius: 10px;
-  border: 1px solid rgba(255, 255, 255, 0.05);
-  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid var(--taskon-color-border-secondary);
+  background: var(--taskon-color-bg-surface-strong);
   overflow: hidden;
 }
 
@@ -3302,8 +3052,8 @@
   border-radius: 50%;
   background: radial-gradient(
     50% 50% at 50% 50%,
-    rgb(82 82 82 / 30%) 0%,
-    rgb(178 178 178 / 30%) 100%
+    var(--taskon-color-bg-inset) 0%,
+    transparent 100%
   );
   filter: blur(134px);
   z-index: -1;
@@ -3362,7 +3112,7 @@
   align-items: center;
   justify-content: center;
   gap: 16px;
-  color: var(--taskon-text-secondary, #999);
+  color: var(--taskon-color-text-secondary);
 }
 
 /* Task content wrapper - matches Vue: tw-mx-auto tw-w-[800px] tw-max-w-full */
@@ -3375,7 +3125,8 @@
 /* Mobile responsive */
 @media (max-width: 750px) {
   .taskon-taskchain-detail {
-    padding-top: 32px;
+    /* Keep extra top spacing on mobile where close button stays in top-right corner */
+    padding-top: 52px;
     padding-bottom: 24px;
   }
 
@@ -3414,7 +3165,7 @@
 .taskon-bottom-dialog-overlay {
   position: absolute;
   inset: 0;
-  background: var(--taskon-color-overlay, rgba(66, 66, 66, 0.5));
+  background: var(--taskon-color-bg-mask);
   backdrop-filter: blur(40px);
 }
 
@@ -3452,8 +3203,8 @@
   right: 0;
   bottom: 0;
   left: 0;
-  border-radius: 10px 10px 0 0;
-  background: var(--taskon-color-bg-popup, #0d0d0d);
+  border-radius: var(--taskon-border-radius) var(--taskon-border-radius) 0 0;
+  background: var(--taskon-color-bg-floating);
   overflow: auto;
 }
 
@@ -3488,8 +3239,9 @@
 /* ==================== Close button ==================== */
 .taskon-bottom-dialog-close {
   position: absolute;
-  top: 24px;
-  right: 24px;
+  /* Move close button 6px towards top-right globally */
+  top: 18px;
+  right: 18px;
   z-index: 10;
   display: flex;
   align-items: center;
@@ -3497,24 +3249,25 @@
   width: 32px;
   height: 32px;
   padding: 0;
-  background: rgba(255, 255, 255, 0.1);
+  background: var(--taskon-color-bg-surface-subtle);
   border: none;
-  border-radius: 8px;
-  color: var(--taskon-text-secondary, #999);
+  border-radius: var(--taskon-border-radius-sm);
+  color: var(--taskon-color-text-secondary);
   cursor: pointer;
   transition: background-color 0.2s, color 0.2s;
 }
 
 .taskon-bottom-dialog-close:hover {
-  background-color: rgba(255, 255, 255, 0.2);
-  color: var(--taskon-text-primary, #fff);
+  background-color: var(--taskon-color-bg-surface);
+  color: var(--taskon-color-text);
 }
 
 /* ==================== Mobile responsive ==================== */
 @media (max-width: 750px) {
   .taskon-bottom-dialog-close {
-    top: 5.333vw;
-    right: 4vw;
+    /* Keep the same 6px top-right shift on mobile baseline values */
+    top: calc(5.333vw - 6px);
+    right: calc(4vw - 6px);
     width: 24px;
     height: 24px;
   }
@@ -3544,8 +3297,8 @@
 @media (max-width: 750px) {
   .taskon-taskchain-dialog-content {
     max-width: initial;
-    padding-left: var(--taskon-m-padding, 4vw);
-    padding-right: var(--taskon-m-padding, 4vw);
+    padding-left: 4vw;
+    padding-right: 4vw;
   }
 }
 
@@ -3558,18 +3311,17 @@
   min-height: 400px;
   padding: 40px;
   text-align: center;
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
 }
 
 .taskon-taskchain-dialog-error-detail {
   margin-top: 8px;
   font-size: 14px;
-  color: var(--taskon-text-secondary, #999);
+  color: var(--taskon-color-text-secondary);
 }
 /**
  * SectorItem 组件样式
  * 完全复刻 taskon-website 的 SectorItem.vue 样式
- * 直接使用 dark 模式颜色值，不使用 CSS 变量
  * 使用 taskon-sector- 前缀避免与项目方样式冲突
  */
 
@@ -3589,14 +3341,14 @@
   font-size: 24px;
   font-weight: 700;
   line-height: 40px;
-  color: #ffffff;
+  color: var(--taskon-color-text);
   margin: 0;
 }
 
 /* Sector 描述 */
 .taskon-sector-desc {
   margin-top: 4px;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--taskon-color-text-tertiary);
   font-size: 16px;
   line-height: 20px;
   white-space: pre-wrap;
@@ -3616,8 +3368,8 @@
   align-items: center;
   padding: 4px 14px;
   border-radius: 48px;
-  background: #cbff01; /* Primary 主题色 */
-  color: #0d0d0d;
+  background: var(--taskon-color-primary);
+  color: var(--taskon-color-text-on-primary);
   font-size: 18px;
   font-weight: 500;
   line-height: 30px;
@@ -3640,7 +3392,7 @@
 /* 已完成分隔符 */
 .taskon-sector-completed {
   margin-top: 22px;
-  color: #ffffff;
+  color: var(--taskon-color-text);
   font-size: 16px;
   font-weight: 600;
   line-height: 20px;
@@ -3721,7 +3473,7 @@
   margin-top: 10px;
   display: flex;
   align-items: flex-end;
-  color: var(--taskon-color-text, #fff);
+  color: var(--taskon-color-text);
 }
 
 /* 周期模式 - 积分数量 */
@@ -3735,7 +3487,7 @@
 /* 周期模式 - 累计积分强调 */
 .taskon-task-dialog-period-amount--em {
   margin-left: 15px;
-  color: #00ffa3;
+  color: var(--taskon-color-secondary);
 }
 
 /* 周期模式 - 积分图标 */
@@ -3757,12 +3509,12 @@
 
 /* 周期模式 - 累计标签强调 */
 .taskon-task-dialog-period-label--em {
-  color: var(--taskon-color-text-secondary, rgba(255, 255, 255, 0.7));
+  color: var(--taskon-color-text-secondary);
 }
 
 /* ==================== Unlimited 模式 ==================== */
 .taskon-task-dialog-uncertain-amount {
-  color: #00ffa3;
+  color: var(--taskon-color-secondary);
   font-size: 32px;
   font-weight: 600;
 }
@@ -3778,7 +3530,7 @@
 
 .taskon-task-dialog-cm-name {
   margin-left: 6px;
-  color: var(--taskon-color-text-secondary, rgba(255, 255, 255, 0.7));
+  color: var(--taskon-color-text-secondary);
   font-size: 14px;
   font-weight: 500;
   line-height: 18px;
@@ -3856,7 +3608,7 @@
 }
 
 .taskon-task-dialog-token-period-label--em {
-  color: var(--taskon-color-text-secondary, rgba(255, 255, 255, 0.7));
+  color: var(--taskon-color-text-secondary);
 }
 
 /* ==================== 响应式 ==================== */
@@ -3884,7 +3636,7 @@
   position: relative;
   width: 100%;
   height: 8px;
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: var(--taskon-color-bg-surface-strong);
   border-radius: 2px;
   overflow: hidden;
 }
@@ -3899,7 +3651,11 @@
   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;
 }
@@ -3910,7 +3666,7 @@
   flex-shrink: 0;
   height: 200%;
   transform: rotate(45deg);
-  background: rgba(0, 0, 0, 0.1);
+  background: var(--taskon-color-bg-mask);
 }
 
 /* ==================== 响应式 ==================== */
@@ -3935,14 +3691,14 @@
 
 /* 文字部分 */
 .taskon-task-dialog-token-progress__content {
-  color: var(--taskon-color-text-secondary, rgba(255, 255, 255, 0.7));
+  color: var(--taskon-color-text-secondary);
   font-size: 14px;
   font-weight: 500;
 }
 
 /* 高亮数字 */
 .taskon-task-dialog-token-progress__text {
-  color: #00ffa3;
+  color: var(--taskon-color-secondary);
 }
 
 /* 进度条容器 */
@@ -3967,7 +3723,7 @@
 
 .taskon-close-in {
   margin-top: 30px;
-  color: var(--taskon-primary-100, #6366f1);
+  color: var(--taskon-color-primary);
   text-align: center;
   font-size: 14px;
   font-weight: 500;
@@ -3981,11 +3737,24 @@
 
 /* ==================== 左侧面板 ==================== */
 .taskon-task-dialog-left {
+  position: relative;
   width: 440px;
   display: flex;
   flex-direction: column;
 }
 
+/* 有资格蒙版时，扩展蒙版范围以覆盖外层 padding 区域 */
+.taskon-task-dialog-left--mask-active {
+  z-index: 1;
+  overflow: visible;
+}
+
+.taskon-task-dialog-left--mask-active .taskon-eligibility-mask {
+  inset: -30px;
+  padding: 30px;
+  border-radius: var(--taskon-border-radius-lg);
+}
+
 /* 主内容区 */
 .taskon-task-dialog-main {
   flex: 1;
@@ -3996,8 +3765,8 @@
   display: inline-block;
   padding: 3px 12px;
   border-radius: 4px;
-  background: rgba(255, 255, 255, 0.04);
-  color: var(--taskon-color-text-secondary, #a0a0a0);
+  background: var(--taskon-color-bg-surface-subtle);
+  color: var(--taskon-color-text-secondary);
   font-size: 13px;
   line-height: 16px;
 }
@@ -4005,7 +3774,7 @@
 /* ==================== 标题 ==================== */
 .taskon-task-dialog-title {
   margin: 20px 0 0 0;
-  color: var(--taskon-color-text, #fff);
+  color: var(--taskon-color-text);
   font-size: 22px;
   font-weight: 600;
   line-height: 28px;
@@ -4015,29 +3784,29 @@
 .taskon-task-dialog-title--link {
   display: block;
   text-decoration: none;
-  color: var(--taskon-color-primary, #6366f1);
+  color: var(--taskon-color-primary);
   transition: color 0.2s ease;
 }
 
 .taskon-task-dialog-title--link:hover {
-  color: var(--taskon-color-primary-hover, #818cf8);
+  color: var(--taskon-color-primary-hover);
   text-decoration: underline;
 }
 
 /* ==================== 有效时间 - 复刻 Vue valid-util ==================== */
 .taskon-task-dialog-valid-time {
-  margin-top: 10px;
+  margin-top: 15px;
   font-size: 14px;
   line-height: 18px;
 }
 
 .taskon-task-dialog-valid-time-label {
-  color: var(--taskon-color-text-secondary, rgba(255, 255, 255, 0.5));
+  color: var(--taskon-color-text-disabled);
 }
 
 .taskon-task-dialog-valid-time-value {
   margin-left: 4px;
-  color: var(--taskon-color-text, #fff);
+  color: var(--taskon-color-text);
 }
 
 /* ==================== 描述区域 ==================== */
@@ -4056,10 +3825,8 @@
   justify-content: center;
   border-radius: 6px;
   border: none;
-  /* Vue: --primary-12 深蓝色背景 */
-  background: rgba(203, 255, 1, 0.12);
-  /* Vue: --primary-100 黄色文字 */
-  color: var(--taskon-color-primary, #cbff01);
+  background: var(--taskon-color-primary-bg);
+  color: var(--taskon-color-primary);
   font-size: 14px;
   font-weight: 500;
   line-height: 40px;
@@ -4068,8 +3835,8 @@
 }
 
 .taskon-task-dialog-action:hover {
-  background: var(--taskon-color-primary, #cbff01);
-  color: #0d0d0d;
+  background: var(--taskon-color-primary);
+  color: var(--taskon-color-text-on-primary);
 }
 
 /* ==================== 奖励卡片 ==================== */
@@ -4078,8 +3845,7 @@
   margin-top: 30px;
   padding: 20px;
   border-radius: 10px;
-  /* Vue: --color-invisible 在深色主题下是略亮的半透明 */
-  background: rgba(255, 255, 255, 0.06);
+  background: var(--taskon-color-bg-surface-strong);
 }
 
 /* Max claim 标签 - 复刻 Vue rewards-max-claim */
@@ -4092,20 +3858,17 @@
   display: flex;
   align-items: center;
   gap: 4px;
-  /* Vue: --color-lightest-inverse 深色文字 */
-  color: var(--taskon-color-text-inverse, #0d0d0d);
+  color: var(--taskon-color-text);
   font-size: 14px;
   font-style: normal;
   font-weight: 600;
   line-height: normal;
-  /* Vue: --color-lightest 亮色背景 */
-  background: var(--taskon-color-bg-inverse, #fff);
+  background: var(--taskon-color-bg-canvas);
   border-radius: 8px 8px 0 0;
 }
 
 .taskon-task-dialog-max-claim--highlight {
-  /* Vue: --secondary-100 高亮色 */
-  color: var(--taskon-color-secondary, #7c3aed);
+  color: var(--taskon-color-secondary);
 }
 
 /* 标签行 */
@@ -4116,9 +3879,16 @@
   height: 24px;
 }
 
+.taskon-task-dialog-label-right {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
 /* Rewards 标签 */
 .taskon-task-dialog-rewards-label {
-  color: var(--taskon-color-text, #fff);
+  color: var(--taskon-color-text);
   font-size: 14px;
   line-height: 18px;
   font-weight: 600;
@@ -4128,9 +3898,9 @@
 .taskon-task-dialog-won {
   margin-left: auto;
   border-radius: 4px;
-  background: rgba(255, 255, 255, 0.04);
+  background: var(--taskon-color-bg-surface-subtle);
   padding: 3px 12px;
-  color: #27ae60;
+  color: var(--taskon-color-success);
   font-size: 14px;
   font-weight: 600;
   line-height: 18px;
@@ -4139,8 +3909,7 @@
 /* Updated at 标签 - Unlimited 任务专用，复刻 Vue updated-label */
 .taskon-task-dialog-updated {
   margin-left: auto;
-  /* Vue: --color-dark 半透明白色 */
-  color: var(--taskon-color-text-secondary, rgba(255, 255, 255, 0.5));
+  color: var(--taskon-color-text-secondary);
   font-size: 12px;
   font-weight: 500;
 }
@@ -4150,7 +3919,7 @@
   margin-left: auto;
   display: flex;
   align-items: center;
-  color: var(--taskon-color-text-secondary, rgba(255, 255, 255, 0.7));
+  color: var(--taskon-color-text-secondary);
   font-size: 13px;
   line-height: 16px;
 }
@@ -4160,14 +3929,13 @@
   margin: 0 6px;
   width: 1px;
   height: 10px;
-  background: var(--taskon-color-border, rgba(255, 255, 255, 0.2));
+  background: var(--taskon-color-border);
 }
 
 /* 倒计时数字 */
 .taskon-task-dialog-periodic-done__time {
   margin-left: 4px;
-  /* Vue: --secondary-100 绿色强调 */
-  color: #00ffa3;
+  color: var(--taskon-color-secondary);
   font-size: 14px;
   font-weight: 500;
   line-height: 18px;
@@ -4178,8 +3946,7 @@
   margin-top: 10px;
   display: flex;
   align-items: center;
-  /* Vue: --color-light 白色 */
-  color: var(--taskon-color-text, #fff);
+  color: var(--taskon-color-text);
 }
 
 .taskon-task-dialog-point-icon {
@@ -4191,7 +3958,7 @@
 }
 
 .taskon-task-dialog-point-amount {
-  color: #00ffa3;
+  color: var(--taskon-color-secondary);
   font-size: 32px;
   font-weight: 600;
   line-height: 40px;
@@ -4199,7 +3966,7 @@
 
 .taskon-task-dialog-point-name {
   margin-left: auto;
-  color: var(--taskon-color-text-secondary, #a0a0a0);
+  color: var(--taskon-color-text-secondary);
   font-size: 14px;
   font-weight: 500;
   line-height: 18px;
@@ -4232,6 +3999,12 @@
     width: 100%;
   }
 
+  .taskon-task-dialog-left--mask-active .taskon-eligibility-mask {
+    inset: -5.333vw;
+    padding: 5.333vw;
+    border-radius: var(--taskon-border-radius);
+  }
+
   .taskon-task-dialog-recurrence {
     padding: 0.667vw 2.667vw;
     font-size: 2.667vw;
@@ -4275,6 +4048,10 @@
     height: 4vw;
   }
 
+  .taskon-task-dialog-label-right {
+    gap: 2.133vw;
+  }
+
   .taskon-task-dialog-rewards-label {
     font-size: 3.2vw;
     line-height: 4vw;
@@ -4354,16 +4131,16 @@
   text-align: center;
   font-size: 0;
   overflow: hidden;
-  border: 1px solid var(--taskon-color-border, #e2e8f0);
-  border-radius: var(--taskon-border-radius, 8px);
-  background: var(--taskon-color-bg, #ffffff);
+  border: 1px solid var(--taskon-color-border);
+  border-radius: var(--taskon-border-radius);
+  background: var(--taskon-color-bg-surface);
   cursor: pointer;
   transition: border-color 0.2s ease, background-color 0.2s ease;
 }
 
 .taskon-pow-uploader-area:hover,
 .taskon-pow-uploader-area:focus {
-  border-color: var(--taskon-color-primary, #6366f1);
+  border-color: var(--taskon-color-primary);
   outline: none;
 }
 
@@ -4379,7 +4156,7 @@
 
 .taskon-pow-uploader-area--disabled:hover,
 .taskon-pow-uploader-area--disabled:focus {
-  border-color: var(--taskon-color-border, #e2e8f0);
+  border-color: var(--taskon-color-border);
 }
 
 /* 隐藏的文件输入 */
@@ -4405,19 +4182,19 @@
   align-items: center;
   justify-content: center;
   flex-direction: column;
-  background: rgba(0, 0, 0, 0.8);
+  background: var(--taskon-color-bg-mask);
 }
 
 /* 上传图标 */
 .taskon-pow-uploader-icon {
   width: 24px;
   height: 24px;
-  color: #ffffff;
+  color: var(--taskon-color-text);
 }
 
 .taskon-pow-uploader-icon--empty {
   opacity: 0.6;
-  color: var(--taskon-color-text-secondary, #64748b);
+  color: var(--taskon-color-text-secondary);
 }
 
 /* 提示文字 */
@@ -4428,12 +4205,12 @@
   letter-spacing: 0.04em;
   text-transform: uppercase;
   white-space: pre-wrap;
-  color: #ffffff;
+  color: var(--taskon-color-text);
 }
 
 .taskon-pow-uploader-tip--empty {
   opacity: 0.6;
-  color: var(--taskon-color-text-secondary, #64748b);
+  color: var(--taskon-color-text-secondary);
 }
 
 /* 上传进度条 */
@@ -4443,12 +4220,12 @@
   right: 0;
   bottom: 0;
   left: 0;
-  background: rgba(255, 255, 255, 0.1);
+  background: var(--taskon-color-bg-surface-strong);
   height: 6px;
 }
 
 .taskon-pow-uploader-progress-bar {
-  background: var(--taskon-color-primary, #6366f1);
+  background: var(--taskon-color-primary);
   height: 100%;
   border-radius: 4px;
   transition: width 0.1s linear;
@@ -4492,7 +4269,7 @@
 /* ==================== 错误提示 ==================== */
 .taskon-pow-dialog-error {
   margin-top: 15px;
-  color: #ff3a44;
+  color: var(--taskon-color-error);
   font-size: 14px;
   line-height: 20px;
   letter-spacing: 0.04em;
@@ -4511,8 +4288,12 @@
   justify-content: center;
   border-radius: 6px;
   border: none;
-  background: linear-gradient(270deg, #00ffa3 0%, #cbff01 100%);
-  color: #0d0d0d;
+  background: linear-gradient(
+    270deg,
+    var(--taskon-color-secondary) 0%,
+    var(--taskon-color-primary) 100%
+  );
+  color: var(--taskon-color-text-on-primary);
   font-size: 14px;
   font-weight: 600;
   line-height: 40px;
@@ -4534,8 +4315,8 @@
   margin-top: 30px;
   padding: 12px 16px;
   border-radius: 6px;
-  background: rgba(39, 174, 96, 0.1);
-  color: #27ae60;
+  background: var(--taskon-color-success-bg);
+  color: var(--taskon-color-success);
   font-size: 14px;
   font-weight: 500;
   text-align: center;
@@ -4546,8 +4327,8 @@
   margin-left: auto;
   padding: 3px 12px;
   border-radius: 4px;
-  background: rgba(255, 255, 255, 0.04);
-  color: #9b51e0;
+  background: var(--taskon-color-warning-bg);
+  color: var(--taskon-color-warning);
   font-size: 14px;
   font-weight: 600;
   line-height: 18px;
@@ -4557,8 +4338,8 @@
   margin-left: auto;
   padding: 3px 12px;
   border-radius: 4px;
-  background: rgba(255, 255, 255, 0.04);
-  color: #eb5757;
+  background: var(--taskon-color-error-bg);
+  color: var(--taskon-color-error);
   font-size: 14px;
   font-weight: 600;
   line-height: 18px;
@@ -4609,16 +4390,16 @@
 }
 
 .taskon-swap-dialog-progress-current {
-  color: #00ffa3;
+  color: var(--taskon-color-secondary);
 }
 
 .taskon-swap-dialog-progress-separator {
-  color: var(--taskon-color-text-secondary, #a0a0a0);
+  color: var(--taskon-color-text-secondary);
   margin: 0 2px;
 }
 
 .taskon-swap-dialog-progress-total {
-  color: var(--taskon-color-text-secondary, #a0a0a0);
+  color: var(--taskon-color-text-secondary);
   font-size: 14px;
   line-height: 18px;
 }
@@ -4629,7 +4410,7 @@
 }
 
 .taskon-swap-dialog-section-title {
-  color: var(--taskon-color-text, #fff);
+  color: var(--taskon-color-text);
   font-size: 14px;
   font-weight: 600;
   line-height: 18px;
@@ -4639,12 +4420,32 @@
   margin-top: 8px;
   padding: 12px;
   border-radius: 8px;
-  background: rgba(255, 255, 255, 0.04);
-  color: var(--taskon-color-text, #fff);
+  background: var(--taskon-color-bg-surface-subtle);
+  color: var(--taskon-color-text);
   font-size: 14px;
   line-height: 18px;
 }
 
+.taskon-swap-dialog-section-content--rules {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  font-weight: 500;
+}
+
+.taskon-swap-dialog-rules-highlight {
+  color: var(--taskon-color-secondary);
+}
+
+.taskon-swap-dialog-rules-point-name {
+  color: var(--taskon-color-text);
+}
+
+.taskon-swap-dialog-rules-max {
+  color: var(--taskon-color-text-secondary);
+}
+
 /* ==================== 响应式 ==================== */
 @media (max-width: 750px) {
   .taskon-swap-dialog-progress {
@@ -4677,6 +4478,10 @@
     font-size: 3.2vw;
     line-height: 4.133vw;
   }
+
+  .taskon-swap-dialog-section-content--rules {
+    gap: 1.067vw;
+  }
 }
 /**
  * DialogLoading 组件样式
@@ -4696,14 +4501,14 @@
 .taskon-dialog-loading-spinner {
   width: 40px;
   height: 40px;
-  border: 3px solid rgba(255, 255, 255, 0.1);
-  border-top-color: var(--taskon-color-primary, #cbff01);
+  border: 3px solid var(--taskon-color-border);
+  border-top-color: var(--taskon-color-primary);
   border-radius: 50%;
   animation: taskon-spin 1s linear infinite;
 }
 
 .taskon-dialog-loading-text {
-  color: var(--taskon-color-text-secondary, #888);
+  color: var(--taskon-color-text-secondary);
   font-size: 14px;
 }
 
@@ -4731,11 +4536,11 @@
 .taskon-dialog-error-icon {
   font-size: 48px;
   margin-bottom: 16px;
-  color: var(--taskon-color-text-secondary, #888);
+  color: var(--taskon-color-text-secondary);
 }
 
 .taskon-dialog-error-message {
-  color: var(--taskon-color-text-secondary, #888);
+  color: var(--taskon-color-text-secondary);
   margin-bottom: 16px;
   font-size: 14px;
   line-height: 1.5;
@@ -4744,8 +4549,8 @@
 
 .taskon-dialog-error-retry {
   padding: 10px 24px;
-  background: var(--taskon-color-primary, #cbff01);
-  color: #000;
+  background: var(--taskon-color-primary);
+  color: var(--taskon-color-text-on-primary);
   border: none;
   border-radius: 8px;
   cursor: pointer;
@@ -4769,25 +4574,25 @@
 
 /* ==================== Dialog 容器覆盖 ==================== */
 .taskon-task-dialog {
-  /* 复刻 Vue --bg-popup-basic-100: #0d0d0d */
-  background: var(--taskon-color-bg-popup, #0d0d0d) !important;
-  color: var(--taskon-color-text, #ffffff);
+  background: var(--taskon-color-bg-floating) !important;
+  color: var(--taskon-color-text);
 }
 
-/* 覆盖 Dialog body padding，让内容自己控制 */
-.taskon-task-dialog .taskon-dialog-body {
-  padding: 0;
+/* 关闭按钮深色主题 */
+.taskon-task-dialog .taskon-dialog-header {
+  z-index: 30;
 }
 
-/* 关闭按钮深色主题 */
 .taskon-task-dialog .taskon-dialog-close {
-  background: rgba(255, 255, 255, 0.1);
-  color: var(--taskon-color-text-secondary, #888);
+  position: relative;
+  z-index: 31;
+  background: var(--taskon-color-bg-surface-strong);
+  color: var(--taskon-color-text-secondary);
 }
 
 .taskon-task-dialog .taskon-dialog-close:hover {
-  background: rgba(255, 255, 255, 0.2);
-  color: var(--taskon-color-text, #fff);
+  background: var(--taskon-color-bg-inset);
+  color: var(--taskon-color-text);
 }
 
 /* ==================== Wrapper: 复刻 Vue .task-dialog ==================== */
@@ -4800,13 +4605,13 @@
 .taskon-task-dialog-right {
   margin-left: 30px;
   padding-left: 30px;
-  border-left: 1px solid rgba(255, 255, 255, 0.1);
+  border-left: 1px solid var(--taskon-color-border);
 }
 
 /* ==================== 验证成功提示（CloseIn） ==================== */
 .taskon-task-dialog-close-in {
   margin-top: 30px;
-  color: var(--taskon-color-primary, #cbff01);
+  color: var(--taskon-color-primary);
   text-align: center;
   font-size: 14px;
   font-weight: 500;
@@ -4826,7 +4631,7 @@
     padding-left: 0;
     padding-top: 5.333vw;
     border-left: none;
-    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    border-top: 1px solid var(--taskon-color-border);
   }
 
   .taskon-task-dialog-close-in {
@@ -4835,7 +4640,6 @@
 }
 /**
  * CommunityTaskList 组件样式
- * 直接使用 dark 模式颜色值，不使用 CSS 变量
  * 使用 taskon-community-list- 前缀避免与项目方样式冲突
  */
 
@@ -4858,7 +4662,7 @@
 .taskon-community-list-loading {
   padding: 40px;
   text-align: center;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--taskon-color-text-tertiary);
   font-size: 16px;
 }
 
@@ -4866,7 +4670,7 @@
 .taskon-community-list-error {
   padding: 40px;
   text-align: center;
-  color: #ef4444;
+  color: var(--taskon-color-error);
   font-size: 16px;
 }
 
@@ -4874,7 +4678,7 @@
 .taskon-community-list-empty {
   padding: 40px;
   text-align: center;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--taskon-color-text-tertiary);
   font-size: 16px;
 }