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

package/dist/EligibilityInfo.css

@@ -1,3 +1,153 @@
+/**
+ * ConfirmNoticeDialog styles
+ *
+ * @description
+ * Reproduces the visual rhythm of taskon-website ConfirmNotice:
+ * icon -> title -> description -> actions,
+ * while intentionally removing the glow background layer.
+ */
+
+/* Narrow the default dialog body padding for this notice layout */
+.taskon-confirm-notice-dialog .taskon-dialog-body {
+  padding: 0;
+}
+
+/* ConfirmNotice content root */
+.taskon-confirm-notice {
+  position: relative;
+  width: 100%;
+  max-width: 470px;
+  padding: 40px 55px;
+  background: var(--taskon-color-bg-popup, #0d0d0d);
+  color: var(--taskon-color-text, #ffffff);
+  border-radius: 10px;
+  text-align: center;
+  box-sizing: border-box;
+}
+
+/* Status icon */
+.taskon-confirm-notice-icon {
+  width: 46px;
+  height: 46px;
+  display: block;
+  margin: 0 auto;
+}
+
+/* Title */
+.taskon-confirm-notice-title {
+  margin: 20px 0 0;
+  font-weight: 600;
+  font-size: 22px;
+  line-height: 28px;
+  color: var(--taskon-color-text, #ffffff);
+  white-space: pre-wrap;
+}
+
+/* Description */
+.taskon-confirm-notice-desc {
+  margin: 10px 0 0;
+  font-size: 16px;
+  line-height: 20px;
+  color: var(--taskon-color-text-secondary, rgba(255, 255, 255, 0.7));
+  white-space: pre-wrap;
+}
+
+/* Action container */
+.taskon-confirm-notice-buttons {
+  margin-top: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+}
+
+.taskon-confirm-notice-buttons--col {
+  flex-wrap: wrap;
+}
+
+/* Base action button style */
+.taskon-confirm-notice-button {
+  min-width: 161px;
+  height: 36px;
+  padding: 0 16px;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 36px;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.taskon-confirm-notice-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Cancel button */
+.taskon-confirm-notice-button--cancel {
+  color: rgba(255, 255, 255, 0.9);
+  background: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.16);
+}
+
+.taskon-confirm-notice-button--cancel:hover:not(:disabled),
+.taskon-confirm-notice-button--cancel:focus-visible:not(:disabled) {
+  background: rgba(255, 255, 255, 0.16);
+}
+
+/* Confirm button */
+.taskon-confirm-notice-button--confirm {
+  color: #000000;
+  background: var(--taskon-color-primary, #cbff01);
+}
+
+.taskon-confirm-notice-button--confirm:hover:not(:disabled),
+.taskon-confirm-notice-button--confirm:focus-visible:not(:disabled) {
+  filter: brightness(0.95);
+}
+
+/* Mobile adaptation (aligned with original vw-based behavior) */
+@media (max-width: 750px) {
+  .taskon-confirm-notice {
+    max-width: none;
+    width: auto;
+    padding: 8vw 6.667vw 6.667vw;
+  }
+
+  .taskon-confirm-notice-icon {
+    width: 7.467vw;
+    height: 7.467vw;
+  }
+
+  .taskon-confirm-notice-title {
+    margin-top: 4vw;
+    font-size: 4.533vw;
+    line-height: 5.733vw;
+  }
+
+  .taskon-confirm-notice-desc {
+    margin-top: 2vw;
+    font-size: 3.733vw;
+    line-height: 4.667vw;
+  }
+
+  .taskon-confirm-notice-buttons {
+    margin-top: 5.333vw;
+    flex-direction: column;
+    gap: 2.667vw;
+  }
+
+  .taskon-confirm-notice-button {
+    width: 100%;
+    min-width: 100%;
+    height: 9.333vw;
+    line-height: 9.333vw;
+    border-radius: 2.133vw;
+    font-size: 3.467vw;
+  }
+}
 /**
  * Textarea 通用组件样式
  * @description 复刻 Vue 版本 BaseTextareaPro.vue 样式
@@ -17,9 +167,9 @@
   padding: 12px;
   padding-bottom: 36px; /* 给计数器留空间 */
   border-radius: 6px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  background: rgba(255, 255, 255, 0.04);
-  color: var(--taskon-color-text, #fff);
+  border: 1px solid var(--taskon-color-border);
+  background: var(--taskon-color-bg-surface-subtle);
+  color: var(--taskon-color-text);
   font-size: 14px;
   line-height: 1.5;
   resize: none;
@@ -28,7 +178,7 @@
 }
 
 .taskon-textarea:focus {
-  border-color: var(--taskon-color-primary, #cbff01);
+  border-color: var(--taskon-color-primary);
 }
 
 .taskon-textarea:disabled {
@@ -37,11 +187,11 @@
 }
 
 .taskon-textarea--error {
-  border-color: #eb5757;
+  border-color: var(--taskon-color-error);
 }
 
 .taskon-textarea::placeholder {
-  color: var(--taskon-color-text-tertiary, #666);
+  color: var(--taskon-color-text-tertiary);
 }
 
 /* ==================== 字数统计 ==================== */
@@ -52,11 +202,11 @@
   font-weight: 400;
   font-size: 14px;
   line-height: 20px;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--taskon-color-text-tertiary);
 }
 
 .taskon-textarea-count-current {
-  color: #fff;
+  color: var(--taskon-color-text);
 }
 
 /* ==================== 响应式 ==================== */
@@ -83,7 +233,7 @@
 /* 可点击链接 - 统一蓝色加下划线样式 */
 .taskon-title-express-link {
   display: inline;
-  color: #54aeff;
+  color: var(--taskon-color-link);
   cursor: pointer;
   text-decoration: underline;
   transition: opacity 0.2s ease;
@@ -96,7 +246,7 @@
 /* 可复制文本 */
 .taskon-title-express-copy {
   display: inline;
-  color: var(--taskon-color-secondary, #cbff01);
+  color: var(--taskon-color-secondary);
   cursor: pointer;
 }
 
@@ -107,65 +257,573 @@
   justify-content: center;
   gap: 6px;
   padding: 8px 12px;
-  background: var(--taskon-color-bg-popover, #2a2a2a);
-  border-radius: 8px;
+  background: var(--taskon-color-bg-floating);
+  border-radius: var(--taskon-border-radius-sm);
   border: none;
   outline: none;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 4px 12px var(--taskon-color-bg-mask);
   cursor: pointer;
   font-size: 14px;
   font-weight: 500;
   line-height: 18px;
-  color: var(--taskon-color-text, #fff);
+  color: var(--taskon-color-text);
   z-index: 9999;
   animation: taskon-popover-fade-in 0.15s ease;
 }
 
-.taskon-title-express-popover-content:focus {
-  outline: none;
+.taskon-title-express-popover-content:focus {
+  outline: none;
+}
+
+.taskon-title-express-popover-content:hover {
+  background: var(--taskon-color-bg-surface);
+}
+
+/* 复制图标 */
+.taskon-title-express-copy-icon {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+}
+
+/* Radix Popover 箭头 */
+.taskon-title-express-popover-arrow {
+  fill: var(--taskon-color-bg-floating);
+}
+
+/* 动画 */
+@keyframes taskon-popover-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* 响应式样式（移动端） */
+@media (max-width: 750px) {
+  .taskon-title-express-popover-content {
+    padding: 2.13vw 3.2vw;
+    font-size: 3.73vw;
+    line-height: 4.8vw;
+    border-radius: 2.13vw;
+    gap: 1.6vw;
+  }
+
+  .taskon-title-express-copy-icon {
+    width: 3.73vw;
+    height: 3.73vw;
+  }
+}
+/**
+ * CardDescExpress 组件样式
+ * @module components/CardDescExpress
+ *
+ * @description
+ * 对齐原版 TextPreview + Quill 富文本渲染思路：
+ * - 容器层控制截断与基础排版
+ * - 内容层按 Quill 语义处理列表/缩进/对齐
+ */
+
+.taskon-card-desc-rich {
+  max-height: 60px;
+  overflow: hidden;
+  font-size: 14px;
+  line-height: 21px;
+  color: var(--taskon-color-text-tertiary);
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+
+.taskon-card-desc-rich--no-max-height {
+  margin-top: 0;
+  max-height: none;
+  overflow: visible;
+}
+
+/* ========== 基础防护（降低宿主 reset 影响） ========== */
+.taskon-card-desc-rich,
+.taskon-card-desc-rich *,
+.taskon-card-desc-rich *::before,
+.taskon-card-desc-rich *::after {
+  box-sizing: border-box;
+}
+
+/* ========== 基础块元素（对齐 Quill 编辑器语义） ========== */
+.taskon-card-desc-rich p,
+.taskon-card-desc-rich ol,
+.taskon-card-desc-rich ul,
+.taskon-card-desc-rich pre,
+.taskon-card-desc-rich blockquote,
+.taskon-card-desc-rich h1,
+.taskon-card-desc-rich h2,
+.taskon-card-desc-rich h3,
+.taskon-card-desc-rich h4,
+.taskon-card-desc-rich h5,
+.taskon-card-desc-rich h6 {
+  display: block;
+  margin: 0;
+  padding: 0;
+  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+}
+
+.taskon-card-desc-rich h1 {
+  font-size: 2rem;
+  line-height: 33px;
+  font-weight: 700;
+  color: var(--taskon-color-text);
+}
+
+@media (max-width: 750px) {
+  .taskon-card-desc-rich h1 {
+    font-size: 4.8vw;
+    line-height: 6vw;
+    font-weight: 600;
+  }
+}
+
+.taskon-card-desc-rich h2 {
+  font-size: 1.5em;
+}
+
+.taskon-card-desc-rich h3 {
+  font-size: 1.17em;
+}
+
+.taskon-card-desc-rich h4 {
+  font-size: 1em;
+}
+
+.taskon-card-desc-rich h5 {
+  font-size: 0.83em;
+}
+
+.taskon-card-desc-rich h6 {
+  font-size: 0.67em;
+}
+
+/* ========== 列表（核心：确保圆点/编号稳定可见） ========== */
+.taskon-card-desc-rich ol,
+.taskon-card-desc-rich ul {
+  margin: 0.5em 0;
+  padding-left: 1.5em;
+}
+
+.taskon-card-desc-rich ol > li,
+.taskon-card-desc-rich ul > li {
+  list-style-type: none;
+}
+
+.taskon-card-desc-rich li {
+  display: list-item;
+}
+
+.taskon-card-desc-rich ul > li::before {
+  content: "\2022";
+}
+
+.taskon-card-desc-rich ul[data-checked="true"],
+.taskon-card-desc-rich ul[data-checked="false"] {
+  pointer-events: none;
+}
+
+.taskon-card-desc-rich ul[data-checked="true"] > li *,
+.taskon-card-desc-rich ul[data-checked="false"] > li * {
+  pointer-events: all;
+}
+
+.taskon-card-desc-rich ul[data-checked="true"] > li::before,
+.taskon-card-desc-rich ul[data-checked="false"] > li::before {
+  cursor: pointer;
+  pointer-events: all;
+}
+
+.taskon-card-desc-rich ul[data-checked="true"] > li::before {
+  content: "\2611";
+}
+
+.taskon-card-desc-rich ul[data-checked="false"] > li::before {
+  content: "\2610";
+}
+
+.taskon-card-desc-rich li::before {
+  display: inline-block;
+  width: 1.2em;
+  white-space: nowrap;
+}
+
+.taskon-card-desc-rich li:not(.ql-direction-rtl)::before {
+  margin-right: 0.3em;
+  margin-left: -1.5em;
+  text-align: right;
+}
+
+.taskon-card-desc-rich li.ql-direction-rtl::before {
+  margin-right: -1.5em;
+  margin-left: 0.3em;
+}
+
+.taskon-card-desc-rich ol li:not(.ql-direction-rtl),
+.taskon-card-desc-rich ul li:not(.ql-direction-rtl) {
+  padding-left: 1.5em;
+}
+
+.taskon-card-desc-rich ol li.ql-direction-rtl,
+.taskon-card-desc-rich ul li.ql-direction-rtl {
+  padding-right: 1.5em;
+}
+
+.taskon-card-desc-rich ol li {
+  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+  counter-increment: list-0;
+}
+
+.taskon-card-desc-rich ol li::before {
+  content: counter(list-0, decimal) ". ";
+}
+
+.taskon-card-desc-rich ol li.ql-indent-1 {
+  counter-increment: list-1;
+  counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+}
+
+.taskon-card-desc-rich ol li.ql-indent-1::before {
+  content: counter(list-1, lower-alpha) ". ";
+}
+
+.taskon-card-desc-rich ol li.ql-indent-2 {
+  counter-increment: list-2;
+  counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+}
+
+.taskon-card-desc-rich ol li.ql-indent-2::before {
+  content: counter(list-2, lower-roman) ". ";
+}
+
+.taskon-card-desc-rich ol li.ql-indent-3 {
+  counter-increment: list-3;
+  counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
+}
+
+.taskon-card-desc-rich ol li.ql-indent-3::before {
+  content: counter(list-3, decimal) ". ";
+}
+
+.taskon-card-desc-rich ol li.ql-indent-4 {
+  counter-increment: list-4;
+  counter-reset: list-5 list-6 list-7 list-8 list-9;
+}
+
+.taskon-card-desc-rich ol li.ql-indent-4::before {
+  content: counter(list-4, lower-alpha) ". ";
+}
+
+.taskon-card-desc-rich ol li.ql-indent-5 {
+  counter-increment: list-5;
+  counter-reset: list-6 list-7 list-8 list-9;
+}
+
+.taskon-card-desc-rich ol li.ql-indent-5::before {
+  content: counter(list-5, lower-roman) ". ";
+}
+
+.taskon-card-desc-rich ol li.ql-indent-6 {
+  counter-increment: list-6;
+  counter-reset: list-7 list-8 list-9;
+}
+
+.taskon-card-desc-rich ol li.ql-indent-6::before {
+  content: counter(list-6, decimal) ". ";
+}
+
+.taskon-card-desc-rich ol li.ql-indent-7 {
+  counter-increment: list-7;
+  counter-reset: list-8 list-9;
+}
+
+.taskon-card-desc-rich ol li.ql-indent-7::before {
+  content: counter(list-7, lower-alpha) ". ";
+}
+
+.taskon-card-desc-rich ol li.ql-indent-8 {
+  counter-increment: list-8;
+  counter-reset: list-9;
+}
+
+.taskon-card-desc-rich ol li.ql-indent-8::before {
+  content: counter(list-8, lower-roman) ". ";
+}
+
+.taskon-card-desc-rich ol li.ql-indent-9 {
+  counter-increment: list-9;
+}
+
+.taskon-card-desc-rich ol li.ql-indent-9::before {
+  content: counter(list-9, decimal) ". ";
+}
+
+/* ========== 缩进与对齐（对齐 Quill class 语义） ========== */
+.taskon-card-desc-rich .ql-indent-1:not(.ql-direction-rtl) {
+  padding-left: 3em;
+}
+
+.taskon-card-desc-rich li.ql-indent-1:not(.ql-direction-rtl) {
+  padding-left: 4.5em;
+}
+
+.taskon-card-desc-rich .ql-indent-1.ql-direction-rtl.ql-align-right {
+  padding-right: 3em;
+}
+
+.taskon-card-desc-rich li.ql-indent-1.ql-direction-rtl.ql-align-right {
+  padding-right: 4.5em;
+}
+
+.taskon-card-desc-rich .ql-indent-2:not(.ql-direction-rtl) {
+  padding-left: 6em;
+}
+
+.taskon-card-desc-rich li.ql-indent-2:not(.ql-direction-rtl) {
+  padding-left: 7.5em;
+}
+
+.taskon-card-desc-rich .ql-indent-2.ql-direction-rtl.ql-align-right {
+  padding-right: 6em;
+}
+
+.taskon-card-desc-rich li.ql-indent-2.ql-direction-rtl.ql-align-right {
+  padding-right: 7.5em;
+}
+
+.taskon-card-desc-rich .ql-indent-3:not(.ql-direction-rtl) {
+  padding-left: 9em;
+}
+
+.taskon-card-desc-rich li.ql-indent-3:not(.ql-direction-rtl) {
+  padding-left: 10.5em;
+}
+
+.taskon-card-desc-rich .ql-indent-3.ql-direction-rtl.ql-align-right {
+  padding-right: 9em;
+}
+
+.taskon-card-desc-rich li.ql-indent-3.ql-direction-rtl.ql-align-right {
+  padding-right: 10.5em;
+}
+
+.taskon-card-desc-rich .ql-indent-4:not(.ql-direction-rtl) {
+  padding-left: 12em;
+}
+
+.taskon-card-desc-rich li.ql-indent-4:not(.ql-direction-rtl) {
+  padding-left: 13.5em;
+}
+
+.taskon-card-desc-rich .ql-indent-4.ql-direction-rtl.ql-align-right {
+  padding-right: 12em;
+}
+
+.taskon-card-desc-rich li.ql-indent-4.ql-direction-rtl.ql-align-right {
+  padding-right: 13.5em;
+}
+
+.taskon-card-desc-rich .ql-indent-5:not(.ql-direction-rtl) {
+  padding-left: 15em;
+}
+
+.taskon-card-desc-rich li.ql-indent-5:not(.ql-direction-rtl) {
+  padding-left: 16.5em;
+}
+
+.taskon-card-desc-rich .ql-indent-5.ql-direction-rtl.ql-align-right {
+  padding-right: 15em;
+}
+
+.taskon-card-desc-rich li.ql-indent-5.ql-direction-rtl.ql-align-right {
+  padding-right: 16.5em;
+}
+
+.taskon-card-desc-rich .ql-indent-6:not(.ql-direction-rtl) {
+  padding-left: 18em;
+}
+
+.taskon-card-desc-rich li.ql-indent-6:not(.ql-direction-rtl) {
+  padding-left: 19.5em;
+}
+
+.taskon-card-desc-rich .ql-indent-6.ql-direction-rtl.ql-align-right {
+  padding-right: 18em;
+}
+
+.taskon-card-desc-rich li.ql-indent-6.ql-direction-rtl.ql-align-right {
+  padding-right: 19.5em;
+}
+
+.taskon-card-desc-rich .ql-indent-7:not(.ql-direction-rtl) {
+  padding-left: 21em;
+}
+
+.taskon-card-desc-rich li.ql-indent-7:not(.ql-direction-rtl) {
+  padding-left: 22.5em;
+}
+
+.taskon-card-desc-rich .ql-indent-7.ql-direction-rtl.ql-align-right {
+  padding-right: 21em;
+}
+
+.taskon-card-desc-rich li.ql-indent-7.ql-direction-rtl.ql-align-right {
+  padding-right: 22.5em;
+}
+
+.taskon-card-desc-rich .ql-indent-8:not(.ql-direction-rtl) {
+  padding-left: 24em;
+}
+
+.taskon-card-desc-rich li.ql-indent-8:not(.ql-direction-rtl) {
+  padding-left: 25.5em;
+}
+
+.taskon-card-desc-rich .ql-indent-8.ql-direction-rtl.ql-align-right {
+  padding-right: 24em;
+}
+
+.taskon-card-desc-rich li.ql-indent-8.ql-direction-rtl.ql-align-right {
+  padding-right: 25.5em;
+}
+
+.taskon-card-desc-rich .ql-indent-9:not(.ql-direction-rtl) {
+  padding-left: 27em;
+}
+
+.taskon-card-desc-rich li.ql-indent-9:not(.ql-direction-rtl) {
+  padding-left: 28.5em;
+}
+
+.taskon-card-desc-rich .ql-indent-9.ql-direction-rtl.ql-align-right {
+  padding-right: 27em;
+}
+
+.taskon-card-desc-rich li.ql-indent-9.ql-direction-rtl.ql-align-right {
+  padding-right: 28.5em;
+}
+
+.taskon-card-desc-rich .ql-direction-rtl {
+  direction: rtl;
+  text-align: inherit;
+}
+
+.taskon-card-desc-rich .ql-align-center {
+  text-align: center;
+}
+
+.taskon-card-desc-rich .ql-align-right {
+  text-align: right;
+}
+
+.taskon-card-desc-rich .ql-align-justify {
+  text-align: justify;
+}
+
+/* ========== 常见富文本元素 ========== */
+.taskon-card-desc-rich a {
+  color: var(--taskon-color-link);
+  text-decoration: underline;
+}
+
+.taskon-card-desc-rich a:hover {
+  opacity: 0.8;
+}
+
+.taskon-card-desc-rich strong,
+.taskon-card-desc-rich b {
+  font-weight: 600;
+  color: var(--taskon-color-text);
 }
 
-.taskon-title-express-popover-content:hover {
-  background: var(--taskon-color-bg-popover-hover, #3a3a3a);
+.taskon-card-desc-rich em,
+.taskon-card-desc-rich i {
+  font-style: italic;
 }
 
-/* 复制图标 */
-.taskon-title-express-copy-icon {
-  width: 14px;
-  height: 14px;
-  flex-shrink: 0;
+.taskon-card-desc-rich u,
+.taskon-card-desc-rich ins {
+  text-decoration: underline;
 }
 
-/* Radix Popover 箭头 */
-.taskon-title-express-popover-arrow {
-  fill: var(--taskon-color-bg-popover, #2a2a2a);
+.taskon-card-desc-rich code {
+  padding: 0.2em 0.4em;
+  font-size: 0.9em;
+  background: var(--taskon-color-bg-surface-strong);
+  border-radius: 3px;
 }
 
-/* 动画 */
-@keyframes taskon-popover-fade-in {
-  from {
-    opacity: 0;
-    transform: translateY(2px);
+.taskon-card-desc-rich pre {
+  margin: 0.5em 0;
+  padding: 0.75em 1em;
+  overflow-x: auto;
+  text-wrap: initial;
+  background: var(--taskon-color-bg-surface-subtle);
+  border-radius: 6px;
+}
+
+.taskon-card-desc-rich blockquote {
+  margin: 0.5em 0;
+  padding-left: 1em;
+  color: var(--taskon-color-text-tertiary);
+  border-left: 3px solid var(--taskon-color-link);
+}
+
+.taskon-card-desc-rich img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 6px;
+}
+
+.taskon-card-desc-rich iframe {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+}
+
+/* ========== 响应式样式（移动端） ========== */
+@media (max-width: 750px) {
+  .taskon-card-desc-rich {
+    max-height: 18vw;
+    font-size: 3.733vw;
+    line-height: normal;
   }
-  to {
-    opacity: 1;
-    transform: translateY(0);
+
+  .taskon-card-desc-rich--no-max-height {
+    margin-top: 0;
+    max-height: none;
   }
 }
+/**
+ * TaskVerifyFailedDialog styles
+ * @description Match Vue ErrorInfo content rhythm and readability.
+ */
+
+.taskon-task-verify-failed-dialog .taskon-dialog-body {
+  padding: 0;
+}
+
+.taskon-task-verify-failed-dialog-message {
+  margin-top: 10px;
+  font-size: 16px;
+  line-height: 20px;
+  color: var(--taskon-color-text-tertiary);
+  white-space: pre-wrap;
+}
 
-/* 响应式样式（移动端） */
 @media (max-width: 750px) {
-  .taskon-title-express-popover-content {
-    padding: 2.13vw 3.2vw;
+  .taskon-task-verify-failed-dialog-message {
+    margin-top: 3.73vw;
     font-size: 3.73vw;
-    line-height: 4.8vw;
-    border-radius: 2.13vw;
-    gap: 1.6vw;
-  }
-
-  .taskon-title-express-copy-icon {
-    width: 3.73vw;
-    height: 3.73vw;
+    line-height: 4.67vw;
   }
 }
 /**
@@ -181,30 +839,11 @@
   /* 继承 TaskCardBase 的样式 */
 }
 
-/* ============================================
- * POW Description
- * ============================================ */
-.taskon-pow-desc {
-  font-size: 14px;
-  line-height: 21px;
-  color: rgba(255, 255, 255, 0.8);
-  word-break: break-word;
-}
-
-.taskon-pow-desc a {
-  color: var(--taskon-primary-color, #3b82f6);
-  text-decoration: none;
-}
-
-.taskon-pow-desc a:hover {
-  text-decoration: underline;
-}
-
 /* ============================================
  * POW Input Area
  * ============================================ */
 .taskon-pow-input-area {
-  margin-top: 15px;
+  margin-top: var(--taskon-spacing-md);
 }
 
 /* ============================================
@@ -213,23 +852,24 @@
 .taskon-pow-url-row {
   display: flex;
   align-items: center;
-  gap: 15px;
+  gap: var(--taskon-spacing-md);
 }
 
 .taskon-pow-input {
   flex: 1;
-  padding: 10px 12px;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 6px;
-  background: rgba(255, 255, 255, 0.05);
-  color: #fff;
+  padding: var(--taskon-spacing-sm)
+    var(--taskon-spacing-md);
+  border: 1px solid var(--taskon-color-border);
+  border-radius: var(--taskon-border-radius);
+  background: var(--taskon-color-bg-surface-subtle);
+  color: var(--taskon-color-text);
   font-size: 14px;
   outline: none;
   transition: border-color 0.2s ease;
 }
 
 .taskon-pow-input:focus {
-  border-color: var(--taskon-primary-color, #3b82f6);
+  border-color: var(--taskon-color-primary);
 }
 
 .taskon-pow-input:disabled {
@@ -238,7 +878,7 @@
 }
 
 .taskon-pow-input::placeholder {
-  color: rgba(255, 255, 255, 0.4);
+  color: var(--taskon-color-text-disabled);
 }
 
 /* ============================================
@@ -247,7 +887,7 @@
 .taskon-pow-text-row {
   display: flex;
   align-items: flex-end;
-  gap: 15px;
+  gap: var(--taskon-spacing-md);
 }
 
 .taskon-pow-text-row .taskon-textarea-wrap {
@@ -258,7 +898,7 @@
  * Image Upload Area - 与 Vue 版本 PowImageUploader 一致
  * ============================================ */
 .taskon-pow-image-uploader {
-  margin-top: 20px;
+  margin-top: var(--taskon-spacing-lg);
   display: flex;
   align-items: center;
 }
@@ -274,20 +914,20 @@
   text-align: center;
   font-size: 0;
   overflow: hidden;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 8px;
-  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid var(--taskon-color-border);
+  border-radius: var(--taskon-border-radius);
+  background: var(--taskon-color-bg-surface-subtle);
   cursor: pointer;
   transition: border-color 0.2s ease;
 }
 
 .taskon-pow-image-upload-area:hover:not(.taskon-pow-image-upload-area--disabled) {
-  border-color: var(--taskon-primary-color, #3b82f6);
+  border-color: var(--taskon-color-primary);
 }
 
 .taskon-pow-image-upload-area:focus {
   outline: none;
-  border-color: var(--taskon-primary-color, #3b82f6);
+  border-color: var(--taskon-color-primary);
 }
 
 .taskon-pow-image-upload-area--disabled {
@@ -298,7 +938,7 @@
 .taskon-pow-image-upload-icon {
   width: 18px;
   height: 18px;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--taskon-color-text-tertiary);
 }
 
 .taskon-pow-image-upload-tip {
@@ -308,12 +948,12 @@
   letter-spacing: 0.04em;
   text-transform: uppercase;
   white-space: pre-wrap;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--taskon-color-text-tertiary);
 }
 
 .taskon-pow-image-preview {
-  border-radius: 4px;
-  margin: 20px 0;
+  border-radius: var(--taskon-border-radius-sm);
+  margin: var(--taskon-spacing-lg) 0;
   max-width: 100%;
   max-height: 300px;
 }
@@ -327,7 +967,7 @@
   align-items: center;
   justify-content: center;
   flex-direction: column;
-  background: rgba(0, 0, 0, 0.8);
+  background: var(--taskon-color-bg-mask);
 }
 
 .taskon-pow-image-upload-area:hover .taskon-pow-image-mask,
@@ -336,11 +976,11 @@
 }
 
 .taskon-pow-image-mask .taskon-pow-image-upload-icon {
-  color: #fff;
+  color: var(--taskon-color-secondary);
 }
 
 .taskon-pow-image-mask .taskon-pow-image-upload-tip {
-  color: #fff;
+  color: var(--taskon-color-secondary);
   opacity: 1;
 }
 
@@ -351,14 +991,14 @@
   right: 0;
   bottom: 0;
   left: 0;
-  background: rgba(255, 255, 255, 0.1);
+  background: var(--taskon-color-bg-surface-strong);
   height: 6px;
 }
 
 .taskon-pow-image-progress-fill {
-  background: var(--taskon-primary-color, #3b82f6);
+  background: var(--taskon-color-primary);
   height: 100%;
-  border-radius: 4px;
+  border-radius: var(--taskon-border-radius-sm);
   transition: width 0.2s ease;
 }
 
@@ -368,7 +1008,7 @@
 .taskon-pow-error {
   margin-top: 10px;
   font-size: 14px;
-  color: #ef4444;
+  color: var(--taskon-color-error);
 }
 
 /* ============================================
@@ -377,7 +1017,7 @@
 /* 与 Vue 版本 AverageReview.vue 样式一致 */
 .taskon-pow-review-time {
   margin-top: 10px;
-  color: rgba(255, 212, 101, 0.6);
+  color: var(--taskon-color-warning);
   font-size: 13px;
   font-weight: 500;
   line-height: 16px;
@@ -425,29 +1065,6 @@
     max-height: 32vw;
   }
 }
-/**
- * ContractInteractiveTask Styles
- */
-
-.taskon-contract-task {
-  /* 继承 TaskCardBase 样式 */
-}
-
-.taskon-contract-desc {
-  font-size: 14px;
-  line-height: 21px;
-  color: rgba(255, 255, 255, 0.8);
-  word-break: break-word;
-}
-
-.taskon-contract-desc a {
-  color: var(--taskon-primary-color, #3b82f6);
-  text-decoration: none;
-}
-
-.taskon-contract-desc a:hover {
-  text-decoration: underline;
-}
 /* ============================================
    DynamicPoints Component Styles
    与 Vue 版本 BaseDynamicPoint.vue 样式一致
@@ -456,33 +1073,33 @@
 .taskon-dynamic-points {
   display: inline-flex;
   align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  background: rgba(255, 255, 255, 0.04);
-  border-radius: 8px;
+  gap: var(--taskon-spacing-sm);
+  padding: var(--taskon-spacing-sm) var(--taskon-spacing-md);
+  background: var(--taskon-color-bg-surface-subtle);
+  border-radius: var(--taskon-border-radius);
 }
 
 .taskon-dynamic-points-value-wrap {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--taskon-spacing-sm);
   flex-shrink: 0;
 }
 
 .taskon-dynamic-points-value {
   font-size: 16px;
   font-weight: 600;
-  color: var(--taskon-task-text-primary, #fff);
+  color: var(--taskon-color-text);
 }
 
 .taskon-dynamic-points-value--highlight {
-  color: #00ffa3 !important;
+  color: var(--taskon-color-secondary);
 }
 
 .taskon-dynamic-points-max {
   font-size: 14px;
   font-weight: 500;
-  color: var(--taskon-task-text-secondary, rgba(255, 255, 255, 0.6));
+  color: var(--taskon-color-text-tertiary);
   text-transform: capitalize;
 }
 
@@ -490,12 +1107,12 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: var(--taskon-task-text-secondary, rgba(255, 255, 255, 0.6));
+  color: var(--taskon-color-text-tertiary);
   cursor: pointer;
 }
 
 .taskon-dynamic-points-info:hover {
-  color: var(--taskon-task-text-primary, #fff);
+  color: var(--taskon-color-text);
 }
 
 .taskon-dynamic-points-refresh {
@@ -505,11 +1122,11 @@
   width: 24px;
   height: 24px;
   padding: 0;
-  margin-left: 4px;
+  margin-left: var(--taskon-spacing-xs);
   background: transparent;
   border: none;
-  border-radius: 4px;
-  color: #54aeff;
+  border-radius: var(--taskon-border-radius-sm);
+  color: var(--taskon-color-link);
   cursor: pointer;
   transition: opacity 0.2s, transform 0.2s;
 }
@@ -524,7 +1141,7 @@
 }
 
 .taskon-dynamic-points-refresh--animating {
-  filter: drop-shadow(0 0 4px rgba(84, 174, 255, 0.8));
+  filter: drop-shadow(0 0 4px var(--taskon-color-link));
 }
 
 .taskon-dynamic-points-refresh-icon {
@@ -548,8 +1165,7 @@
 .taskon-dynamic-points-cooldown {
   font-size: 14px;
   font-weight: 500;
-  color: #54aeff !important;
-  font-family: Menlo, Consolas, "Liberation Mono", "Courier New", Courier, monospace;
+  color: var(--taskon-color-link);
 }
 /**
  * SwapDexTask Styles
@@ -564,78 +1180,66 @@
 .taskon-swap-content {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: var(--taskon-spacing-md);
 }
 
 /* Rules section - 动态积分规则区域 */
 .taskon-swap-rules-section {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: var(--taskon-spacing-sm);
 }
 
 .taskon-swap-rules-title {
   font-size: 14px;
   font-weight: 500;
-  color: rgba(255, 255, 255, 0.6);
-  margin-bottom: 8px;
+  color: var(--taskon-color-text-tertiary);
+  margin-bottom: var(--taskon-spacing-sm);
 }
 
 .taskon-swap-rules-content {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 4px;
-  padding: 12px;
-  border-radius: 8px;
-  background: rgba(255, 255, 255, 0.05);
+  gap: var(--taskon-spacing-xs);
+  padding: var(--taskon-spacing-md);
+  border-radius: var(--taskon-border-radius);
+  background: var(--taskon-color-bg-surface-subtle);
   font-size: 14px;
   font-weight: 500;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--taskon-color-text-tertiary);
 }
 
 .taskon-swap-rules-highlight {
-  color: var(--taskon-secondary-color, #00ffa3);
+  color: var(--taskon-color-secondary);
 }
 
 .taskon-swap-rules-point-name {
-  color: rgba(255, 255, 255, 0.4);
+  color: var(--taskon-color-text-secondary);
+}
+
+.taskon-swap-rules-max {
+  color: var(--taskon-color-text-tertiary);
 }
 
 /* Instructions section - 任务描述区域 */
 .taskon-swap-instructions-section {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: var(--taskon-spacing-sm);
 }
 
 .taskon-swap-instructions-title {
   font-size: 14px;
   font-weight: 500;
-  color: rgba(255, 255, 255, 0.6);
-  margin-bottom: 8px;
+  color: var(--taskon-color-text-tertiary);
+  margin-bottom: var(--taskon-spacing-sm);
 }
 
 .taskon-swap-instructions-content {
-  padding: 12px;
-  border-radius: 8px;
-  background: rgba(255, 255, 255, 0.05);
-}
-
-.taskon-swap-desc {
-  font-size: 14px;
-  line-height: 21px;
-  color: rgba(255, 255, 255, 0.8);
-  word-break: break-word;
-}
-
-.taskon-swap-desc a {
-  color: var(--taskon-primary-color, #3b82f6);
-  text-decoration: none;
-}
-
-.taskon-swap-desc a:hover {
-  text-decoration: underline;
+  padding: var(--taskon-spacing-md);
+  border-radius: var(--taskon-border-radius);
+  background: var(--taskon-color-bg-surface-subtle);
 }
 /**
  * OuterPointAPITask Styles
@@ -646,35 +1250,18 @@
   /* 继承 TaskCardBase 样式 */
 }
 
-/* ==================== Description Area ==================== */
-.taskon-outer-point-api-desc {
-  font-size: 14px;
-  line-height: 21px;
-  color: rgba(255, 255, 255, 0.8);
-  word-break: break-word;
-}
-
-.taskon-outer-point-api-desc a {
-  color: var(--taskon-primary-color, #3b82f6);
-  text-decoration: none;
-}
-
-.taskon-outer-point-api-desc a:hover {
-  text-decoration: underline;
-}
-
 /* ==================== Customized Param Dialog ==================== */
 .taskon-outer-point-api-dialog {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: var(--taskon-spacing-md);
 }
 
 /* Dialog title */
 .taskon-outer-point-api-dialog-title {
   font-size: 18px;
   font-weight: 600;
-  color: #fff;
+  color: var(--taskon-color-text);
   margin: 0;
 }
 
@@ -682,11 +1269,11 @@
 .taskon-outer-point-api-dialog-warning {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 12px;
-  border-radius: 8px;
-  background: rgba(255, 171, 0, 0.1);
-  color: #ffab00;
+  gap: var(--taskon-spacing-sm);
+  padding: var(--taskon-spacing-md);
+  border-radius: var(--taskon-border-radius);
+  background: var(--taskon-color-warning-bg);
+  color: var(--taskon-color-warning);
   font-size: 14px;
   line-height: 20px;
 }
@@ -701,29 +1288,30 @@
 .taskon-outer-point-api-dialog-desc {
   font-size: 14px;
   line-height: 20px;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--taskon-color-text-tertiary);
 }
 
 /* Input area */
 .taskon-outer-point-api-dialog-input-wrap {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: var(--taskon-spacing-sm);
 }
 
 .taskon-outer-point-api-dialog-label {
   font-size: 14px;
   font-weight: 500;
-  color: rgba(255, 255, 255, 0.8);
+  color: var(--taskon-color-text-secondary);
 }
 
 .taskon-outer-point-api-dialog-input {
   width: 100%;
-  padding: 10px 12px;
-  border-radius: 8px;
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  background: rgba(255, 255, 255, 0.05);
-  color: #fff;
+  padding: var(--taskon-spacing-sm)
+    var(--taskon-spacing-md);
+  border-radius: var(--taskon-border-radius);
+  border: 1px solid var(--taskon-color-border);
+  background: var(--taskon-color-bg-surface-subtle);
+  color: var(--taskon-color-text);
   font-size: 14px;
   line-height: 20px;
   outline: none;
@@ -732,33 +1320,33 @@
 }
 
 .taskon-outer-point-api-dialog-input::placeholder {
-  color: rgba(255, 255, 255, 0.3);
+  color: var(--taskon-color-text-disabled);
 }
 
 .taskon-outer-point-api-dialog-input:focus {
-  border-color: var(--taskon-primary-color, #3b82f6);
+  border-color: var(--taskon-color-primary);
 }
 
 .taskon-outer-point-api-dialog-input--error {
-  border-color: #ff4d4f;
+  border-color: var(--taskon-color-error);
 }
 
 .taskon-outer-point-api-dialog-error {
   font-size: 12px;
-  color: #ff4d4f;
+  color: var(--taskon-color-error);
 }
 
 /* Action buttons */
 .taskon-outer-point-api-dialog-actions {
   display: flex;
   justify-content: flex-end;
-  gap: 12px;
-  margin-top: 8px;
+  gap: var(--taskon-spacing-md);
+  margin-top: var(--taskon-spacing-sm);
 }
 
 .taskon-outer-point-api-dialog-btn {
-  padding: 8px 24px;
-  border-radius: 8px;
+  padding: var(--taskon-spacing-sm) var(--taskon-spacing-lg);
+  border-radius: var(--taskon-border-radius);
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
@@ -767,17 +1355,17 @@
 }
 
 .taskon-outer-point-api-dialog-btn--cancel {
-  background: rgba(255, 255, 255, 0.1);
-  color: rgba(255, 255, 255, 0.8);
+  background: var(--taskon-color-bg-surface-strong);
+  color: var(--taskon-color-text-secondary);
 }
 
 .taskon-outer-point-api-dialog-btn--cancel:hover {
-  background: rgba(255, 255, 255, 0.15);
+  background: var(--taskon-color-bg-inset);
 }
 
 .taskon-outer-point-api-dialog-btn--confirm {
-  background: var(--taskon-primary-color, #3b82f6);
-  color: #fff;
+  background: var(--taskon-color-primary);
+  color: var(--taskon-color-text-on-primary);
 }
 
 .taskon-outer-point-api-dialog-btn--confirm:hover {
@@ -795,41 +1383,6 @@
  * 命名规范：.taskon-task-{component}-{element}--{modifier}
  */
 
-/* ============================================
-   CSS Variables (可被项目方覆盖)
-   ============================================ */
-:root {
-  /* Task card colors (dark theme, same as taskon-website) */
-  --taskon-task-bg: #1d2123;
-  --taskon-task-border: #1d2123;
-  --taskon-task-border-hover: #41494b;
-  --taskon-task-radius: 10px;
-
-  /* Text colors */
-  --taskon-task-text: #ffffff;
-  --taskon-task-text-secondary: #9ca3af;
-  --taskon-task-text-muted: #6b7280;
-
-  /* Status colors */
-  --taskon-color-primary: #3b82f6;
-  --taskon-color-success: #22c55e;
-  --taskon-color-warning: #f59e0b;
-  --taskon-color-error: #ef4444;
-
-  /* Recurrence badge color */
-  --taskon-recurrence-color: #9aff73;
-
-  /* Spacing */
-  --taskon-task-spacing-xs: 4px;
-  --taskon-task-spacing-sm: 8px;
-  --taskon-task-spacing-md: 12px;
-  --taskon-task-spacing-lg: 16px;
-  --taskon-task-spacing-xl: 24px;
-
-  /* Transitions */
-  --taskon-task-transition: 0.2s ease;
-}
-
 /* ============================================
    TaskList Styles
    与 Vue 版本 TaskList.vue + TaskType.vue 一致
@@ -837,12 +1390,12 @@
 .taskon-task-list {
   display: flex;
   flex-direction: column;
-  gap: var(--taskon-task-spacing-lg);
+  gap: var(--taskon-spacing-md);
 }
 
 /* Progress section */
 .taskon-task-list-progress-wrap {
-  margin-bottom: var(--taskon-task-spacing-sm);
+  margin-bottom: var(--taskon-spacing-sm);
 }
 
 /* Section styles */
@@ -869,17 +1422,17 @@
   font-size: 22px;
   font-weight: 600;
   line-height: 21px;
-  color: var(--taskon-task-text);
+  color: var(--taskon-color-text);
 }
 
 .taskon-task-list-section-hint {
   font-size: 14px;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--taskon-color-text-tertiary);
 }
 
 .taskon-task-list-section-hint-em {
   font-weight: 600;
-  color: rgba(0, 255, 163, 1);
+  color: var(--taskon-color-secondary);
 }
 
 .taskon-task-list-items {
@@ -895,9 +1448,9 @@
 
 /* Empty state */
 .taskon-task-list-empty {
-  padding: var(--taskon-task-spacing-xl);
+  padding: var(--taskon-spacing-lg);
   text-align: center;
-  color: var(--taskon-task-text-muted);
+  color: var(--taskon-color-text-disabled);
 }
 
 /* Mobile responsive */
@@ -945,12 +1498,12 @@
 .taskon-task-progress {
   display: flex;
   flex-direction: column;
-  gap: var(--taskon-task-spacing-sm);
+  gap: var(--taskon-spacing-sm);
 }
 
 .taskon-task-progress-bar {
   height: 6px;
-  background: rgba(255, 255, 255, 0.1);
+  background: var(--taskon-color-bg-surface-strong);
   border-radius: 3px;
   overflow: hidden;
 }
@@ -959,7 +1512,7 @@
   height: 100%;
   background: var(--taskon-color-primary);
   border-radius: 3px;
-  transition: width var(--taskon-task-transition);
+  transition: width 0.2s ease;
 }
 
 .taskon-task-progress--completed .taskon-task-progress-bar-fill {
@@ -969,9 +1522,9 @@
 .taskon-task-progress-text {
   display: flex;
   align-items: center;
-  gap: var(--taskon-task-spacing-xs);
+  gap: var(--taskon-spacing-xs);
   font-size: 13px;
-  color: var(--taskon-task-text-secondary);
+  color: var(--taskon-color-text-tertiary);
 }
 
 .taskon-task-progress--completed .taskon-task-progress-text {
@@ -990,14 +1543,14 @@
 .taskon-task-item {
   position: relative;
   padding: 16px 20px;
-  background: var(--taskon-task-bg);
-  border-radius: var(--taskon-task-radius);
-  border: 1px solid var(--taskon-task-border);
-  transition: border-color var(--taskon-task-transition);
+  background: var(--taskon-color-bg-surface-subtle);
+  border-radius: var(--taskon-border-radius-lg);
+  border: 1px solid var(--taskon-color-border-secondary);
+  transition: border-color 0.2s ease;
 }
 
 .taskon-task-item:hover {
-  border-color: var(--taskon-task-border-hover);
+  border-color: var(--taskon-color-border);
 }
 
 /* ============================================
@@ -1015,7 +1568,7 @@
   width: 78px;
   height: 20px;
   /* 文字样式 */
-  color: var(--taskon-recurrence-color);
+  color: var(--taskon-color-primary);
   font-size: 12px;
   line-height: 16px;
   font-weight: 500;
@@ -1027,7 +1580,7 @@
 
 /* 冷却倒计时样式 - 继承标签样式 */
 .taskon-task-item-recurrence .taskon-cooldown-timer {
-  color: var(--taskon-recurrence-color);
+  color: var(--taskon-color-primary);
   font-size: 12px;
   line-height: 16px;
   font-weight: 500;
@@ -1055,7 +1608,7 @@
   align-items: center;
   justify-content: center;
   margin-right: 16px;
-  color: var(--taskon-task-text-secondary);
+  color: var(--taskon-color-text-tertiary);
 }
 
 .taskon-task-item--completed .taskon-task-item-icon {
@@ -1073,16 +1626,16 @@
   display: inline;
   font-size: 18px;
   font-weight: 500;
-  color: var(--taskon-task-text);
+  color: var(--taskon-color-text);
   line-height: 23px;
   overflow-wrap: break-word;
 }
 
 /* Title as link - 参考 Vue 版本 TitleRow.vue 的 OutLink 样式 */
 .taskon-task-item-title--link {
-  color: #54aeff;
+  color: var(--taskon-color-link);
   text-decoration: underline;
-  transition: opacity var(--taskon-task-transition);
+  transition: opacity 0.2s ease;
 }
 
 .taskon-task-item-title--link:hover {
@@ -1090,14 +1643,14 @@
 }
 
 .taskon-task-item--completed .taskon-task-item-title {
-  color: var(--taskon-task-text-secondary);
+  color: var(--taskon-color-text-tertiary);
 }
 
 /* Links in title - 统一蓝色加下划线样式 */
 .taskon-task-item-link {
-  color: #54aeff;
+  color: var(--taskon-color-link);
   text-decoration: underline;
-  transition: opacity var(--taskon-task-transition);
+  transition: opacity 0.2s ease;
 }
 
 .taskon-task-item-link:hover {
@@ -1110,20 +1663,20 @@
   align-items: center;
   justify-content: center;
   margin-left: 6px;
-  color: rgba(255, 255, 255, 0.4);
+  color: var(--taskon-color-text-disabled);
   cursor: help;
   flex-shrink: 0;
 }
 
 .taskon-task-item-title-tip:hover {
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--taskon-color-text-tertiary);
 }
 
 /* Right section: Points + Total + Verify */
 .taskon-task-item-right {
   display: flex;
   align-items: center;
-  gap: var(--taskon-task-spacing-md);
+  gap: var(--taskon-spacing-md);
   flex-shrink: 0;
   margin-left: 10px;
 }
@@ -1137,24 +1690,24 @@
   align-items: center;
   justify-content: center;
   gap: 2px;
-  background: rgba(255, 255, 255, 0.04);
+  background: var(--taskon-color-bg-surface-subtle);
   border-radius: 6px;
   font-size: 16px;
   font-weight: 500;
 }
 
 .taskon-task-item-points-value {
-  color: #ffffff;
+  color: var(--taskon-color-text);
 }
 
 /* Points value when task is completed - green color like Vue version */
 .taskon-task-item-points-value--completed {
-  color: #00ffa3;
+  color: var(--taskon-color-secondary);
 }
 
 .taskon-task-item-points-time {
   font-size: 12px;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--taskon-color-text-tertiary);
 }
 
 /* Tip icon next to points (margin controlled externally) */
@@ -1165,7 +1718,7 @@
 /* Total points */
 .taskon-task-item-total-points {
   font-size: 12px;
-  color: var(--taskon-task-text-muted);
+  color: var(--taskon-color-text-disabled);
 }
 
 /* ============================================
@@ -1178,12 +1731,12 @@
 }
 
 .taskon-task-item-total-earn-text {
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--taskon-color-text-tertiary);
   font-size: 14px;
 }
 
 .taskon-task-item-total-earn-value {
-  color: #9aff73;
+  color: var(--taskon-color-primary);
   font-size: 14px;
   margin: 0 4px;
 }
@@ -1199,124 +1752,45 @@
 .taskon-task-item-content {
   display: flex;
   flex-direction: column;
-  gap: var(--taskon-task-spacing-md);
+  gap: var(--taskon-spacing-md);
 }
 
 .taskon-task-item-desc {
   font-size: 14px;
   line-height: 21px;
-  color: var(--taskon-task-text-secondary);
-  word-break: break-all;
-  white-space: pre-wrap;
-}
-
-.taskon-task-item-desc span {
-  color: var(--taskon-task-text);
-  word-break: break-all;
-}
-
-/* Rich text content - 参考 Vue 版本 TextPreview.vue */
-.taskon-task-item-rich-text {
-  font-size: 14px;
-  line-height: 21px;
-  color: var(--taskon-task-text-secondary);
+  color: var(--taskon-color-text-tertiary);
   word-break: break-word;
-}
-
-.taskon-task-item-rich-text p {
-  margin: 0 0 0.5em 0;
-}
-
-.taskon-task-item-rich-text p:last-child {
-  margin-bottom: 0;
-}
-
-.taskon-task-item-rich-text a {
-  color: #54aeff;
-  text-decoration: underline;
-}
-
-.taskon-task-item-rich-text a:hover {
-  opacity: 0.8;
-}
-
-.taskon-task-item-rich-text strong,
-.taskon-task-item-rich-text b {
-  font-weight: 600;
-  color: var(--taskon-task-text);
-}
-
-.taskon-task-item-rich-text em,
-.taskon-task-item-rich-text i {
-  font-style: italic;
-}
-
-.taskon-task-item-rich-text ul,
-.taskon-task-item-rich-text ol {
-  margin: 0.5em 0;
-  padding-left: 1.5em;
-}
-
-.taskon-task-item-rich-text li {
-  margin: 0.25em 0;
-}
-
-.taskon-task-item-rich-text code {
-  background: rgba(255, 255, 255, 0.1);
-  padding: 0.2em 0.4em;
-  border-radius: 3px;
-  font-size: 0.9em;
-}
-
-.taskon-task-item-rich-text pre {
-  background: rgba(255, 255, 255, 0.05);
-  padding: 0.75em 1em;
-  border-radius: 6px;
-  overflow-x: auto;
-  margin: 0.5em 0;
-}
-
-.taskon-task-item-rich-text blockquote {
-  border-left: 3px solid var(--taskon-color-primary);
-  padding-left: 1em;
-  margin: 0.5em 0;
-  color: var(--taskon-task-text-muted);
-}
-
-.taskon-task-item-rich-text img {
-  max-width: 100%;
-  height: auto;
-  border-radius: 6px;
+  white-space: pre-wrap;
 }
 
 /* Description fields */
 .taskon-task-item-fields {
   display: flex;
   flex-direction: column;
-  gap: var(--taskon-task-spacing-xs);
+  gap: var(--taskon-spacing-xs);
 }
 
 .taskon-task-item-field {
   display: flex;
   align-items: baseline;
-  gap: var(--taskon-task-spacing-sm);
+  gap: var(--taskon-spacing-sm);
   font-size: 13px;
 }
 
 .taskon-task-item-field-key {
-  color: var(--taskon-task-text-muted);
+  color: var(--taskon-color-text-disabled);
   flex-shrink: 0;
 }
 
 .taskon-task-item-field-value {
-  color: var(--taskon-task-text);
+  color: var(--taskon-color-text);
   word-break: break-all;
 }
 
 .taskon-task-item-field-value--link {
-  color: #54aeff;
+  color: var(--taskon-color-link);
   text-decoration: underline;
-  transition: opacity var(--taskon-task-transition);
+  transition: opacity 0.2s ease;
 }
 
 .taskon-task-item-field-value--link:hover {
@@ -1327,21 +1801,21 @@
 .taskon-task-item-action-link {
   display: inline-flex;
   align-items: center;
-  padding: var(--taskon-task-spacing-sm) var(--taskon-task-spacing-md);
+  padding: var(--taskon-spacing-sm) var(--taskon-spacing-md);
   font-size: 13px;
   font-weight: 500;
   color: var(--taskon-color-primary);
   background: transparent;
   border: 1px solid var(--taskon-color-primary);
-  border-radius: 6px;
+  border-radius: var(--taskon-border-radius);
   text-decoration: none;
-  transition: all var(--taskon-task-transition);
+  transition: all 0.2s ease;
   align-self: flex-start;
 }
 
 .taskon-task-item-action-link:hover {
   background: var(--taskon-color-primary);
-  color: white;
+  color: var(--taskon-color-text-on-primary);
 }
 
 /* Spinner animation */
@@ -1379,7 +1853,7 @@
 .taskon-cooldown-timer {
   display: inline-flex;
   align-items: center;
-  gap: var(--taskon-task-spacing-xs);
+  gap: var(--taskon-spacing-xs);
   font-size: 13px;
   color: var(--taskon-color-warning);
 }
@@ -1391,24 +1865,24 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 4px;
+  gap: var(--taskon-spacing-xs);
   height: 34px;
-  padding: 0 12px;
+  padding: 0 var(--taskon-spacing-md);
   font-size: 14px;
   font-weight: 500;
   line-height: 20px;
-  color: #fff;
+  color: var(--taskon-color-text);
   background: transparent;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 6px;
+  border: 1px solid var(--taskon-color-border);
+  border-radius: var(--taskon-border-radius);
   cursor: pointer;
-  transition: all var(--taskon-task-transition);
+  transition: all 0.2s ease;
   white-space: nowrap;
   flex-shrink: 0;
 }
 
 .taskon-verify-btn:hover:not(:disabled) {
-  border-color: rgba(255, 255, 255, 0.3);
+  border-color: var(--taskon-color-text-disabled);
 }
 
 .taskon-verify-btn:disabled {
@@ -1441,16 +1915,16 @@
 .taskon-expandable-toggle {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
+  gap: var(--taskon-spacing-xs);
   padding: 0;
-  margin-top: 8px;
+  margin-top: var(--taskon-spacing-sm);
   font-size: 13px;
   font-weight: 500;
-  color: #ffffff;
+  color: var(--taskon-color-text);
   background: transparent;
   border: none;
   cursor: pointer;
-  transition: opacity var(--taskon-task-transition);
+  transition: opacity 0.2s ease;
   align-self: flex-start;
 }
 
@@ -1463,7 +1937,7 @@
 }
 
 .taskon-expandable-toggle-icon {
-  transition: transform var(--taskon-task-transition);
+  transition: transform 0.2s ease;
   flex-shrink: 0;
 }
 
@@ -1532,12 +2006,12 @@
 }
 
 .taskon-task-time-range-label {
-  color: var(--taskon-task-text-secondary);
+  color: var(--taskon-color-text-tertiary);
 }
 
 .taskon-task-time-range-value {
   display: inline-block;
-  color: rgba(255, 212, 101, 1);
+  color: var(--taskon-color-warning);
 }
 
 /* ============================================
@@ -1548,7 +2022,7 @@
   position: relative;
   display: inline-block;
   overflow: hidden;
-  border-radius: 6px;
+  border-radius: var(--taskon-border-radius);
 }
 
 .taskon-verify-btn-progress {
@@ -1561,8 +2035,35 @@
 
 .taskon-verify-btn-progress-bar {
   height: 100%;
-  border-radius: 6px;
-  background: linear-gradient(to right, #cbff01, #00ffa3);
+  border-radius: var(--taskon-border-radius);
+  background: linear-gradient(
+    to right,
+    var(--taskon-color-primary),
+    var(--taskon-color-secondary)
+  );
+}
+/**
+ * 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;
 }
 /**
  * BlindBox 盲盒组件样式
@@ -1895,10 +2396,6 @@
 /**
  * Eligibility (资格验证) 组件样式
  * @description Standalone CSS for EligibilityInfo component, usable in any widget context.
- *
- * CSS variable fallbacks ensure correct rendering even outside Quest widget
- * (e.g., when used in TaskChain). When rendered inside .taskon-quest,
- * the Quest-defined variables take precedence.
  */
 
 /* ============================================================================
@@ -1908,7 +2405,7 @@
 .taskon-quest-eligs {
   margin-top: 25px;
   padding: 0 18px;
-  border: 1px solid var(--taskon-quest-text-darkest, rgba(255, 255, 255, 0.1));
+  border: 1px solid var(--taskon-color-border);
   border-radius: 10px;
 }
 
@@ -1919,10 +2416,10 @@
 
 @keyframes taskon-quest-eligs-glow {
   0% {
-    border-color: var(--taskon-quest-text-darkest, rgba(255, 255, 255, 0.1));
+    border-color: var(--taskon-color-border);
   }
   100% {
-    border-color: rgba(255, 255, 255, 0.4);
+    border-color: var(--taskon-color-primary);
   }
 }
 
@@ -1953,12 +2450,12 @@
 /* 头部文本 */
 .taskon-quest-eligs-header-text {
   flex: 1;
-  color: var(--taskon-quest-text-lightest, #ffffff);
+  color: var(--taskon-color-text);
 }
 
 /* 高亮表达式 (all/any) */
 .taskon-quest-eligs-header-express {
-  color: var(--taskon-quest-secondary, #1affab);
+  color: var(--taskon-color-secondary);
 }
 
 /* ============================================================================
@@ -1974,16 +2471,16 @@
   padding: 0;
   margin-left: auto;
   background: transparent;
-  border: 1px solid var(--taskon-quest-text-darkest, rgba(255, 255, 255, 0.1));
+  border: 1px solid var(--taskon-color-border);
   border-radius: 6px;
-  color: var(--taskon-quest-text-lighter, rgba(255, 255, 255, 0.8));
+  color: var(--taskon-color-text-secondary);
   cursor: pointer;
   transition: all 0.2s;
 }
 
 .taskon-quest-eligs-refresh:hover:not(:disabled) {
-  border-color: var(--taskon-quest-text-light, rgba(255, 255, 255, 0.6));
-  color: var(--taskon-quest-text-lightest, #ffffff);
+  border-color: var(--taskon-color-text-tertiary);
+  color: var(--taskon-color-text);
 }
 
 .taskon-quest-eligs-refresh:disabled {
@@ -2009,7 +2506,7 @@
   flex-shrink: 0;
   width: 6px;
   height: 10px;
-  color: var(--taskon-quest-text-lighter, rgba(255, 255, 255, 0.8));
+  color: var(--taskon-color-text-secondary);
   transform: rotate(90deg);
   transition: transform 0.3s;
 }
@@ -2027,7 +2524,7 @@
   padding: 20px 0;
   margin: 0;
   list-style: none;
-  border-top: 1px solid var(--taskon-quest-text-darkest, rgba(255, 255, 255, 0.1));
+  border-top: 1px solid var(--taskon-color-border);
 }
 
 /* 单项 */
@@ -2065,12 +2562,28 @@
   opacity: 1;
 }
 
+.taskon-quest-eligs-item-icon--passed {
+  color: var(--taskon-color-success);
+}
+
+.taskon-quest-eligs-item-icon--failed {
+  color: var(--taskon-color-error);
+}
+
+.taskon-quest-eligs-header-status--passed {
+  color: var(--taskon-color-success);
+}
+
+.taskon-quest-eligs-header-status--failed {
+  color: var(--taskon-color-error);
+}
+
 /* 内容区 */
 .taskon-quest-eligs-item-content {
   flex: 1;
   font-size: 14px;
   line-height: 18px;
-  color: var(--taskon-quest-text-lighter, rgba(255, 255, 255, 0.8));
+  color: var(--taskon-color-text-secondary);
 }
 
 /* ============================================================================
@@ -2078,7 +2591,7 @@
    ============================================================================ */
 
 .taskon-quest-eligs-type {
-  color: var(--taskon-quest-text-lighter, rgba(255, 255, 255, 0.8));
+  color: var(--taskon-color-text-secondary);
 }
 
 .taskon-quest-eligs-type--tooltip {
@@ -2088,12 +2601,12 @@
 
 /* 高亮文本 */
 .taskon-quest-eligs-highlight {
-  color: var(--taskon-quest-primary, #cbff01);
+  color: var(--taskon-color-primary);
 }
 
 /* 链接样式 */
 .taskon-quest-eligs-link {
-  color: var(--taskon-quest-link, #58afff);
+  color: var(--taskon-color-link);
   text-decoration: underline;
 }
 
@@ -2112,10 +2625,10 @@
   max-width: 300px;
   font-size: 12px;
   line-height: 16px;
-  color: var(--taskon-quest-text-lightest, #ffffff);
-  background-color: rgba(0, 0, 0, 0.9);
+  color: var(--taskon-color-text);
+  background-color: var(--taskon-color-bg-floating);
   border-radius: 6px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 2px 8px var(--taskon-color-bg-mask);
   white-space: normal;
   word-break: break-word;
 }
@@ -2148,7 +2661,7 @@
   flex-shrink: 0;
   width: 8px;
   height: 8px;
-  color: var(--taskon-quest-text-lighter, rgba(255, 255, 255, 0.8));
+  color: var(--taskon-color-text-secondary);
   transform: rotate(-90deg);
   transition: transform 0.3s;
 }
@@ -2169,7 +2682,7 @@
 .taskon-quest-eligs-sub-list li {
   font-size: 14px;
   line-height: 18px;
-  color: var(--taskon-quest-text-lighter, rgba(255, 255, 255, 0.8));
+  color: var(--taskon-color-text-secondary);
 }
 
 /* ============================================================================
@@ -2228,11 +2741,11 @@
   display: inline;
   text-decoration: underline;
   cursor: pointer;
-  color: var(--taskon-quest-text-lightest, #ffffff);
+  color: var(--taskon-color-text);
 }
 
 .taskon-quest-eligs-onchain-link:hover {
-  color: var(--taskon-quest-link, #58afff);
+  color: var(--taskon-color-link);
 }
 
 .taskon-quest-eligs-onchain-tooltip {
@@ -2241,10 +2754,10 @@
   left: 0;
   min-width: 260px;
   padding: 12px 16px;
-  background-color: #222222;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: var(--taskon-quest-radius-l, 8px);
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+  background-color: var(--taskon-color-bg-surface);
+  border: 1px solid var(--taskon-color-border);
+  border-radius: var(--taskon-border-radius);
+  box-shadow: 0 4px 16px var(--taskon-color-bg-mask);
   z-index: 100;
   font-size: 14px;
   line-height: 1.5;
@@ -2257,15 +2770,15 @@
   left: 16px;
   width: 12px;
   height: 12px;
-  background-color: #222222;
-  border-right: 1px solid rgba(255, 255, 255, 0.1);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  background-color: var(--taskon-color-bg-surface);
+  border-right: 1px solid var(--taskon-color-border);
+  border-bottom: 1px solid var(--taskon-color-border);
   transform: rotate(45deg);
 }
 
 .taskon-quest-eligs-onchain-tooltip p {
   margin: 0 0 8px 0;
-  color: var(--taskon-quest-text-lighter, rgba(255, 255, 255, 0.8));
+  color: var(--taskon-color-text-secondary);
 }
 
 .taskon-quest-eligs-onchain-tooltip ul {
@@ -2280,14 +2793,14 @@
 }
 
 .taskon-quest-eligs-onchain-tooltip-link {
-  color: var(--taskon-quest-link, #58afff);
+  color: var(--taskon-color-link);
   text-decoration: underline;
   font-size: 14px;
   line-height: 18px;
 }
 
 .taskon-quest-eligs-onchain-tooltip-link:hover {
-  color: var(--taskon-quest-text-lightest, #ffffff);
+  color: var(--taskon-color-text);
 }
 
 /* ============================================================================
@@ -2301,13 +2814,13 @@
 .taskon-quest-eligs-nft-name {
   position: relative;
   display: inline;
-  color: var(--taskon-quest-secondary, #1affab);
+  color: var(--taskon-color-secondary);
   cursor: pointer;
   text-decoration: underline;
 }
 
 .taskon-quest-eligs-nft-name:hover {
-  color: var(--taskon-quest-link, #58afff);
+  color: var(--taskon-color-link);
 }
 
 .taskon-quest-eligs-copied {
@@ -2316,10 +2829,10 @@
   left: 50%;
   transform: translateX(-50%);
   padding: 4px 8px;
-  background-color: #222222;
-  border-radius: var(--taskon-quest-radius-s, 4px);
+  background-color: var(--taskon-color-bg-surface);
+  border-radius: var(--taskon-border-radius-sm);
   font-size: 12px;
-  color: var(--taskon-quest-secondary, #1affab);
+  color: var(--taskon-color-secondary);
   white-space: nowrap;
   pointer-events: none;
   animation: taskon-quest-eligs-fade-in 0.2s ease-out;