@taskon/widget-react 0.0.1-beta.2 → 0.0.1-beta.4

package/dist/EligibilityInfo.css

@@ -1,3 +1,178 @@
+/**
+ * ConfirmNoticeDialog styles
+ *
+ * @description
+ * Reproduces the visual rhythm of taskon-website ConfirmNotice:
+ * icon -> title -> description -> actions,
+ * while intentionally removing the glow background layer.
+ */
+
+/*
+ * Responsive base styles
+ *
+ * Keep mobile breakpoints and fallback patterns centralized here.
+ * Components should reuse these mixins instead of duplicating query logic.
+ */
+
+/*
+ * Desktop-up mixin:
+ * 1) Enable desktop enhancement in wider containers
+ * 2) Keep viewport media query as fallback
+ */
+
+/* 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: auto;
+  max-width: none;
+  padding: var(--taskon-spacing-xl) var(--taskon-spacing-lg) var(--taskon-spacing-lg);
+  background: var(--taskon-color-bg-floating);
+  color: var(--taskon-color-text);
+  border-radius: var(--taskon-border-radius-lg);
+  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);
+  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);
+  white-space: pre-wrap;
+}
+
+/* Action container */
+
+.taskon-confirm-notice-buttons {
+  margin-top: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+  gap: 10px;
+}
+
+.taskon-confirm-notice-buttons--col {
+  flex-wrap: wrap;
+}
+
+/* Base action button style */
+
+.taskon-confirm-notice-button {
+  width: 100%;
+  min-width: 100%;
+  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: var(--taskon-color-text);
+  background: var(--taskon-color-bg-surface-subtle);
+  border-color: var(--taskon-color-border);
+}
+
+.taskon-confirm-notice-button--cancel:hover:not(:disabled),
+.taskon-confirm-notice-button--cancel:focus-visible:not(:disabled) {
+  background: var(--taskon-color-bg-surface);
+}
+
+/* Confirm button */
+
+.taskon-confirm-notice-button--confirm {
+  color: var(--taskon-color-text-on-primary);
+  background: var(--taskon-color-primary);
+}
+
+.taskon-confirm-notice-button--confirm:hover:not(:disabled),
+.taskon-confirm-notice-button--confirm:focus-visible:not(:disabled) {
+  background: var(--taskon-color-primary-hover);
+}
+
+/* Desktop 增强 */
+
+@supports (container-type: inline-size) {
+    @container (min-width: 751px) {
+  .taskon-confirm-notice {
+    width: 100%;
+    max-width: 470px;
+    padding: 40px 55px;
+  }
+
+  .taskon-confirm-notice-buttons {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .taskon-confirm-notice-button {
+    width: auto;
+    min-width: 161px;
+  }
+    }
+  }
+
+@supports not (container-type: inline-size) {
+    @media (min-width: 751px) {
+  .taskon-confirm-notice {
+    width: 100%;
+    max-width: 470px;
+    padding: 40px 55px;
+  }
+
+  .taskon-confirm-notice-buttons {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .taskon-confirm-notice-button {
+    width: auto;
+    min-width: 161px;
+  }
+    }
+  }
 /**
  * Textarea 通用组件样式
  * @description 复刻 Vue 版本 BaseTextareaPro.vue 样式
@@ -5,21 +180,23 @@
  */
 
 /* ==================== 容器 ==================== */
+
 .taskon-textarea-wrap {
   position: relative;
   font-size: 0;
 }
 
 /* ==================== 文本域 ==================== */
+
 .taskon-textarea {
   width: 100%;
   min-height: 100px;
   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 +205,7 @@
 }
 
 .taskon-textarea:focus {
-  border-color: var(--taskon-color-primary, #cbff01);
+  border-color: var(--taskon-color-primary);
 }
 
 .taskon-textarea:disabled {
@@ -37,14 +214,15 @@
 }
 
 .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);
 }
 
 /* ==================== 字数统计 ==================== */
+
 .taskon-textarea-count {
   position: absolute;
   right: 20px;
@@ -52,28 +230,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;
-}
-
-/* ==================== 响应式 ==================== */
-@media (max-width: 750px) {
-  .taskon-textarea {
-    min-height: 26.667vw;
-    padding: 3.2vw;
-    padding-bottom: 8vw; /* 给计数器留空间 */
-    font-size: 3.733vw;
-  }
-
-  .taskon-textarea-count {
-    right: 2.933vw;
-    bottom: 2.667vw;
-    font-size: 2.933vw;
-    line-height: 2.667vw;
-  }
+  color: var(--taskon-color-text);
 }
 /**
  * TitleExpress 组件样式
@@ -81,9 +242,10 @@
  */
 
 /* 可点击链接 - 统一蓝色加下划线样式 */
+
 .taskon-title-express-link {
   display: inline;
-  color: #54aeff;
+  color: var(--taskon-color-link);
   cursor: pointer;
   text-decoration: underline;
   transition: opacity 0.2s ease;
@@ -94,29 +256,31 @@
 }
 
 /* 可复制文本 */
+
 .taskon-title-express-copy {
   display: inline;
-  color: var(--taskon-color-secondary, #cbff01);
+  color: var(--taskon-color-secondary);
   cursor: pointer;
 }
 
 /* Radix Popover 内容 */
+
 .taskon-title-express-popover-content {
   display: flex;
   align-items: center;
   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;
 }
@@ -126,10 +290,11 @@
 }
 
 .taskon-title-express-popover-content:hover {
-  background: var(--taskon-color-bg-popover-hover, #3a3a3a);
+  background: var(--taskon-color-bg-surface);
 }
 
 /* 复制图标 */
+
 .taskon-title-express-copy-icon {
   width: 14px;
   height: 14px;
@@ -137,11 +302,13 @@
 }
 
 /* Radix Popover 箭头 */
+
 .taskon-title-express-popover-arrow {
-  fill: var(--taskon-color-bg-popover, #2a2a2a);
+  fill: var(--taskon-color-bg-floating);
 }
 
 /* 动画 */
+
 @keyframes taskon-popover-fade-in {
   from {
     opacity: 0;
@@ -152,21 +319,501 @@
     transform: translateY(0);
   }
 }
+/**
+ * CardDescExpress 组件样式
+ * @module components/CardDescExpress
+ *
+ * @description
+ * 对齐原版 TextPreview + Quill 富文本渲染思路：
+ * - 容器层控制截断与基础排版
+ * - 内容层按 Quill 语义处理列表/缩进/对齐
+ */
 
-/* 响应式样式（移动端） */
-@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-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-title-express-copy-icon {
-    width: 3.73vw;
-    height: 3.73vw;
-  }
+.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);
+}
+
+.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-card-desc-rich em,
+.taskon-card-desc-rich i {
+  font-style: italic;
+}
+
+.taskon-card-desc-rich u,
+.taskon-card-desc-rich ins {
+  text-decoration: underline;
+}
+
+.taskon-card-desc-rich code {
+  padding: 0.2em 0.4em;
+  font-size: 0.9em;
+  background: var(--taskon-color-bg-surface-strong);
+  border-radius: 3px;
+}
+
+.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%;
+}
+/**
+ * TaskVerifyFailedDialog styles
+ * @description Match Vue ErrorInfo content rhythm and readability.
+ */
+
+/*
+ * Responsive base styles
+ *
+ * Keep mobile breakpoints and fallback patterns centralized here.
+ * Components should reuse these mixins instead of duplicating query logic.
+ */
+
+/*
+ * Desktop-up mixin:
+ * 1) Enable desktop enhancement in wider containers
+ * 2) Keep viewport media query as fallback
+ */
+
+.taskon-task-verify-failed-dialog .taskon-dialog-body {
+  padding: 0;
+}
+
+.taskon-task-verify-failed-dialog-message {
+  margin-top: var(--taskon-spacing-sm);
+  font-size: 16px;
+  line-height: 20px;
+  color: var(--taskon-color-text-tertiary);
+  white-space: pre-wrap;
 }
 /**
  * PowTask Styles
@@ -174,62 +821,62 @@
  * 遵循 Widget 命名规范：.taskon-{widget-name}-{element}
  */
 
+/*
+ * Responsive base styles
+ *
+ * Keep mobile breakpoints and fallback patterns centralized here.
+ * Components should reuse these mixins instead of duplicating query logic.
+ */
+
+/*
+ * Desktop-up mixin:
+ * 1) Enable desktop enhancement in wider containers
+ * 2) Keep viewport media query as fallback
+ */
+
 /* ============================================
  * POW Task Container
  * ============================================ */
+
 .taskon-pow-task {
   /* 继承 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);
 }
 
 /* ============================================
  * URL Input Row
  * ============================================ */
+
 .taskon-pow-url-row {
   display: flex;
-  align-items: center;
-  gap: 15px;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--taskon-spacing-sm);
 }
 
 .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;
+  width: 100%;
+  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,16 +885,18 @@
 }
 
 .taskon-pow-input::placeholder {
-  color: rgba(255, 255, 255, 0.4);
+  color: var(--taskon-color-text-disabled);
 }
 
 /* ============================================
  * Text Input Row
  * ============================================ */
+
 .taskon-pow-text-row {
   display: flex;
-  align-items: flex-end;
-  gap: 15px;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--taskon-spacing-sm);
 }
 
 .taskon-pow-text-row .taskon-textarea-wrap {
@@ -257,12 +906,18 @@
 /* ============================================
  * Image Upload Area - 与 Vue 版本 PowImageUploader 一致
  * ============================================ */
+
 .taskon-pow-image-uploader {
-  margin-top: 20px;
+  margin-top: var(--taskon-spacing-md);
   display: flex;
   align-items: center;
 }
 
+.taskon-pow-url-row .taskon-verify-btn,
+.taskon-pow-text-row .taskon-verify-btn {
+  width: 100%;
+}
+
 .taskon-pow-image-upload-area {
   flex: 1;
   position: relative;
@@ -274,20 +929,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 +953,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,17 +963,18 @@
   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;
 }
 
 /* Hover mask overlay */
+
 .taskon-pow-image-mask {
   display: none;
   position: absolute;
@@ -327,7 +983,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,118 +992,110 @@
 }
 
 .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;
 }
 
 /* Progress bar at bottom */
+
 .taskon-pow-image-progress-bar {
   z-index: 3;
   position: absolute;
   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;
 }
 
 /* ============================================
  * Error Message
  * ============================================ */
+
 .taskon-pow-error {
   margin-top: 10px;
   font-size: 14px;
-  color: #ef4444;
+  color: var(--taskon-color-error);
 }
 
 /* ============================================
  * Average Review Time
  * ============================================ */
+
 /* 与 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;
 }
 
 /* ============================================
- * Responsive Styles
+ * Desktop 增强
  * ============================================ */
-@media (max-width: 750px) {
-  .taskon-pow-url-row,
-  .taskon-pow-text-row {
-    flex-direction: column;
-    gap: 10px;
+
+@supports (container-type: inline-size) {
+    @container (min-width: 751px) {
+  .taskon-pow-url-row {
+    flex-direction: row;
+    align-items: center;
+    gap: var(--taskon-spacing-md);
   }
 
-  .taskon-pow-input {
-    width: 100%;
+  .taskon-pow-text-row {
+    flex-direction: row;
+    align-items: flex-end;
+    gap: var(--taskon-spacing-md);
   }
 
   .taskon-pow-url-row .taskon-verify-btn,
   .taskon-pow-text-row .taskon-verify-btn {
-    width: 100%;
+    width: auto;
   }
 
   .taskon-pow-image-uploader {
-    margin-top: 2.67vw;
+    margin-top: var(--taskon-spacing-lg);
   }
-
-  .taskon-pow-image-upload-area {
-    min-height: 17.07vw;
+    }
   }
 
-  .taskon-pow-image-upload-icon {
-    width: 2.4vw;
-    height: 2.4vw;
+@supports not (container-type: inline-size) {
+    @media (min-width: 751px) {
+  .taskon-pow-url-row {
+    flex-direction: row;
+    align-items: center;
+    gap: var(--taskon-spacing-md);
   }
 
-  .taskon-pow-image-upload-tip {
-    margin-top: 1.33vw;
-    font-size: 1.6vw;
-    line-height: 2.67vw;
+  .taskon-pow-text-row {
+    flex-direction: row;
+    align-items: flex-end;
+    gap: var(--taskon-spacing-md);
   }
 
-  .taskon-pow-image-preview {
-    max-height: 32vw;
+  .taskon-pow-url-row .taskon-verify-btn,
+  .taskon-pow-text-row .taskon-verify-btn {
+    width: auto;
   }
-}
-/**
- * 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;
-}
+  .taskon-pow-image-uploader {
+    margin-top: var(--taskon-spacing-lg);
+  }
+    }
+  }
 /* ============================================
    DynamicPoints Component Styles
    与 Vue 版本 BaseDynamicPoint.vue 样式一致
@@ -456,33 +1104,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 +1138,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 +1153,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 +1172,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 +1196,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
@@ -561,81 +1208,72 @@
 }
 
 /* Content wrapper */
+
 .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,47 +1284,33 @@
   /* 继承 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;
 }
 
 /* Warning message */
+
 .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;
 }
@@ -698,32 +1322,35 @@
 }
 
 /* Description text */
+
 .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 +1359,34 @@
 }
 
 .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 +1395,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,171 +1423,170 @@
  * 命名规范：.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;
-}
+/*
+ * Responsive base styles
+ *
+ * Keep mobile breakpoints and fallback patterns centralized here.
+ * Components should reuse these mixins instead of duplicating query logic.
+ */
+
+/*
+ * Desktop-up mixin:
+ * 1) Enable desktop enhancement in wider containers
+ * 2) Keep viewport media query as fallback
+ */
 
 /* ============================================
    TaskList Styles
    与 Vue 版本 TaskList.vue + TaskType.vue 一致
    ============================================ */
+
 .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 */
+
 .taskon-task-list-section {
   display: flex;
   flex-direction: column;
 }
 
 .taskon-task-list-section-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 30px;
-  margin-bottom: 22px;
+  display: block;
+  margin-top: var(--taskon-spacing-lg);
+  margin-bottom: var(--taskon-spacing-md);
 }
 
 .taskon-task-list-section-label {
   display: flex;
   align-items: center;
-  gap: 6px;
+  flex-wrap: wrap;
+  gap: var(--taskon-spacing-sm);
 }
 
 .taskon-task-list-section-title {
   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 {
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: var(--taskon-spacing-md);
 }
 
 /* First section header doesn't need top margin */
+
 .taskon-task-list-section:first-child .taskon-task-list-section-header {
   margin-top: 0;
 }
 
 /* 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 */
-@media (max-width: 750px) {
+.taskon-completed-count {
+  margin-top: var(--taskon-spacing-sm);
+  justify-content: flex-start;
+}
+
+@supports (container-type: inline-size) {
+    @container (min-width: 751px) {
   .taskon-task-list-section-header {
-    display: block;
-    margin-top: 5.6vw;
-    margin-bottom: 4vw;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 30px;
+    margin-bottom: 22px;
   }
 
   .taskon-task-list-section-label {
-    flex-wrap: wrap;
-    gap: 1.6vw;
+    flex-wrap: nowrap;
+    gap: 6px;
   }
 
-  .taskon-task-list-section-title {
-    font-size: 4.8vw;
-    line-height: 6vw;
+  .taskon-completed-count {
+    margin-top: 0;
   }
 
-  .taskon-completed-count {
-    margin-top: 2.67vw;
-    justify-content: flex-start;
+  .taskon-task-list-items {
+    gap: 20px;
+  }
+    }
+  }
+
+@supports not (container-type: inline-size) {
+    @media (min-width: 751px) {
+  .taskon-task-list-section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 30px;
+    margin-bottom: 22px;
   }
 
-  .taskon-completed-count-check {
-    width: 3.2vw;
-    height: 2.4vw;
-    margin-right: 2.13vw;
+  .taskon-task-list-section-label {
+    flex-wrap: nowrap;
+    gap: 6px;
   }
 
-  .taskon-completed-count-text {
-    font-size: 3.47vw;
-    line-height: 4.4vw;
+  .taskon-completed-count {
+    margin-top: 0;
   }
 
   .taskon-task-list-items {
-    gap: 3.07vw;
+    gap: 20px;
+  }
+    }
   }
-}
 
 /* ============================================
    TaskProgress Styles
    ============================================ */
+
 .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);
-  border-radius: 3px;
+  background: var(--taskon-color-bg-surface-strong);
+  border-radius: var(--taskon-border-radius-sm);
   overflow: hidden;
 }
 
 .taskon-task-progress-bar-fill {
   height: 100%;
   background: var(--taskon-color-primary);
-  border-radius: 3px;
-  transition: width var(--taskon-task-transition);
+  border-radius: var(--taskon-border-radius-sm);
+  transition: width 0.2s ease;
 }
 
 .taskon-task-progress--completed .taskon-task-progress-bar-fill {
@@ -969,9 +1596,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 {
@@ -987,23 +1614,25 @@
 /* ============================================
    TaskItem Styles
    ============================================ */
+
 .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);
+  padding: var(--taskon-spacing-md);
+  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);
 }
 
 /* ============================================
    左上角浮标：周期标签 / 冷却倒计时
    与 Vue 版本 RecurrenceStatus.vue 样式一致
    ============================================ */
+
 .taskon-task-item-recurrence {
   position: absolute;
   top: -6px;
@@ -1015,7 +1644,7 @@
   width: 78px;
   height: 20px;
   /* 文字样式 */
-  color: var(--taskon-recurrence-color);
+  color: var(--taskon-color-primary);
   font-size: 12px;
   line-height: 16px;
   font-weight: 500;
@@ -1026,8 +1655,9 @@
 }
 
 /* 冷却倒计时样式 - 继承标签样式 */
+
 .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;
@@ -1036,12 +1666,15 @@
 /* ============================================
    第一行：图标 + 标题 + 右侧内容
    ============================================ */
+
 .taskon-task-item-row {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
+  gap: 8px;
 }
 
 /* Left section: Icon + Title */
+
 .taskon-task-item-left {
   display: flex;
   align-items: center;
@@ -1054,8 +1687,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-right: 16px;
-  color: var(--taskon-task-text-secondary);
+  margin-right: 10px;
+  color: var(--taskon-color-text-tertiary);
 }
 
 .taskon-task-item--completed .taskon-task-item-icon {
@@ -1063,7 +1696,9 @@
 }
 
 /* Title wrapper - 与 Vue 版本 TitleRow 结构一致 */
+
 /* 普通 block flow，标题 inline，TotalEarnPoint 作为 block div 自然换行 */
+
 .taskon-task-item-title-wrap {
   flex: 1;
   min-width: 0;
@@ -1073,16 +1708,17 @@
   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 +1726,15 @@
 }
 
 .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 {
@@ -1105,30 +1742,34 @@
 }
 
 /* Title tip icon */
+
 .taskon-task-item-title-tip {
   display: inline-flex;
   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);
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 6px;
   flex-shrink: 0;
-  margin-left: 10px;
+  margin-left: 8px;
 }
 
 /* Points display - 参考 TaskPoint.vue */
+
 .taskon-task-item-points {
   min-width: 40px;
   height: 34px;
@@ -1137,53 +1778,57 @@
   align-items: center;
   justify-content: center;
   gap: 2px;
-  background: rgba(255, 255, 255, 0.04);
-  border-radius: 6px;
+  background: var(--taskon-color-bg-surface-subtle);
+  border-radius: var(--taskon-border-radius-sm);
   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) */
+
 .taskon-task-item-tip {
   margin-left: 10px;
 }
 
 /* Total points */
+
 .taskon-task-item-total-points {
   font-size: 12px;
-  color: var(--taskon-task-text-muted);
+  color: var(--taskon-color-text-disabled);
 }
 
 /* ============================================
    TotalEarnPoint Styles
    与 Vue 版本 TotalEarnPoint.vue 样式一致
    ============================================ */
+
 .taskon-task-item-total-earn {
   display: flex;
   align-items: center;
 }
 
 .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;
 }
@@ -1191,132 +1836,55 @@
 /* ============================================
    第二行：内容区域（始终显示）
    ============================================ */
+
 .taskon-task-item-body {
-  margin-left: 50px;
+  margin-left: 36px;
   margin-top: 10px;
 }
 
 .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 {
@@ -1324,27 +1892,29 @@
 }
 
 /* Action link */
+
 .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 */
+
 @keyframes taskon-spin {
   from {
     transform: rotate(0deg);
@@ -1361,6 +1931,7 @@
 /* ============================================
    TaskIcon Styles
    ============================================ */
+
 .taskon-task-icon {
   display: inline-flex;
   align-items: center;
@@ -1376,10 +1947,11 @@
 /* ============================================
    CooldownTimer Styles
    ============================================ */
+
 .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);
 }
@@ -1387,28 +1959,29 @@
 /* ============================================
    VerifyButton Styles
    ============================================ */
+
 .taskon-verify-btn {
   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 {
@@ -1429,6 +2002,7 @@
 /* ============================================
    ExpandableContent Styles
    ============================================ */
+
 .taskon-expandable {
   display: flex;
   flex-direction: column;
@@ -1441,16 +2015,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 +2037,7 @@
 }
 
 .taskon-expandable-toggle-icon {
-  transition: transform var(--taskon-task-transition);
+  transition: transform 0.2s ease;
   flex-shrink: 0;
 }
 
@@ -1472,59 +2046,70 @@
 }
 
 /* ============================================
-   Responsive Styles
+   Desktop 增强
    ============================================ */
-@media (max-width: 750px) {
+
+@supports (container-type: inline-size) {
+    @container (min-width: 751px) {
   .taskon-task-item {
-    padding: 4vw;
+    padding: 16px 20px;
+  }
+
+  .taskon-task-item-row {
+    align-items: center;
+    gap: 0;
   }
 
   .taskon-task-item-body {
-    margin-left: 9.333vw;
+    margin-left: 50px;
   }
 
   .taskon-task-item-icon {
-    margin-right: 2.667vw;
+    margin-right: 16px;
   }
 
   .taskon-task-item-right {
-    margin-left: 2.67vw;
+    flex-direction: row;
+    align-items: center;
+    gap: 6px;
+    margin-left: 8px;
+  }
+    }
   }
 
-  .taskon-task-item-title {
-    font-weight: 400;
-    font-size: 3.733vw;
-    line-height: 4.667vw;
+@supports not (container-type: inline-size) {
+    @media (min-width: 751px) {
+  .taskon-task-item {
+    padding: 16px 20px;
   }
 
-  .taskon-task-item-desc {
-    font-size: 3.2vw;
-    line-height: 4vw;
+  .taskon-task-item-row {
+    align-items: center;
+    gap: 0;
   }
 
-  .taskon-task-icon-img {
-    width: 6.667vw !important;
-    height: 6.667vw !important;
+  .taskon-task-item-body {
+    margin-left: 50px;
   }
 
-  /* Points display mobile - 参考 TaskPoint.vue */
-  .taskon-task-item-points {
-    min-width: 6.8vw;
-    height: 6.67vw;
-    padding: 0 2vw;
-    font-size: 2.93vw;
-    border-radius: 0.91vw;
+  .taskon-task-item-icon {
+    margin-right: 16px;
   }
 
-  .taskon-task-item-points-time {
-    font-size: 1.85vw;
+  .taskon-task-item-right {
+    flex-direction: row;
+    align-items: center;
+    gap: 6px;
+    margin-left: 8px;
+  }
+    }
   }
-}
 
 /* ============================================
    TimeRange Styles
    与 Vue 版本 TimeRange.vue 样式一致
    ============================================ */
+
 .taskon-task-time-range {
   font-size: 14px;
   line-height: 18px;
@@ -1532,23 +2117,24 @@
 }
 
 .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);
 }
 
 /* ============================================
    VerifyButton Cooldown Progress Bar
    与 Vue 版本 VerifyButton.vue 冷却进度条样式一致
    ============================================ */
+
 .taskon-verify-btn-wrap {
   position: relative;
   display: inline-block;
   overflow: hidden;
-  border-radius: 6px;
+  border-radius: var(--taskon-border-radius);
 }
 
 .taskon-verify-btn-progress {
@@ -1561,8 +2147,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 盲盒组件样式
@@ -1571,20 +2184,34 @@
  * Migrated from Vue version with Tailwind classes converted to CSS
  */
 
+/*
+ * Responsive base styles
+ *
+ * Keep mobile breakpoints and fallback patterns centralized here.
+ * Components should reuse these mixins instead of duplicating query logic.
+ */
+
+/*
+ * Desktop-up mixin:
+ * 1) Enable desktop enhancement in wider containers
+ * 2) Keep viewport media query as fallback
+ */
+
 /* ============================================================================
    BlindBox Dialog - 开盲盒交互弹窗
    ============================================================================ */
 
 .taskon-quest-blindbox-dialog {
+  container-type: inline-size;
   position: relative;
   width: min(520px, 92vw);
   overflow: hidden;
-  padding-top: 40px;
+  padding-top: var(--taskon-spacing-lg);
 }
 
 .taskon-quest-blindbox-dialog-title {
-  margin: 0 0 16px;
-  padding: 0 40px;
+  margin: 0 0 var(--taskon-spacing-md);
+  padding: 0 var(--taskon-spacing-lg);
   font-size: 22px;
   font-weight: 600;
   line-height: 1.4;
@@ -1592,6 +2219,7 @@
 }
 
 /* Stage container - centered square area for animation */
+
 .taskon-quest-blindbox-stage {
   position: relative;
   display: flex;
@@ -1607,6 +2235,7 @@
 }
 
 /* Background spinning light */
+
 .taskon-quest-blindbox-bg {
   position: absolute;
   left: 50%;
@@ -1633,6 +2262,7 @@
 }
 
 /* Drop zone - collision detection area */
+
 .taskon-quest-blindbox-dropzone {
   position: absolute;
   left: 50%;
@@ -1644,6 +2274,7 @@
 }
 
 /* Chest container */
+
 .taskon-quest-blindbox-chest {
   position: absolute;
   left: 50%;
@@ -1664,15 +2295,17 @@
 }
 
 /* Ensure Lottie SVG fills container */
+
 .taskon-quest-blindbox-chest svg {
   width: 100% !important;
   height: auto !important;
 }
 
 /* Key image */
+
 .taskon-quest-blindbox-key {
   position: absolute;
-  width: clamp(80px, 16vw, 100px);
+  width: clamp(80px, 25%, 100px);
   transform: translate(-50%, -50%);
   cursor: grab;
   touch-action: none;
@@ -1700,16 +2333,18 @@
    ============================================================================ */
 
 .taskon-quest-blindbox-reward {
+  container-type: inline-size;
   position: relative;
   width: 510px;
   max-width: 92vw;
-  padding: 64px 40px;
+  padding: 48px var(--taskon-spacing-lg);
   text-align: center;
   color: #fff;
   overflow: hidden;
 }
 
 /* Light background effect */
+
 .taskon-quest-blindbox-reward-light {
   position: absolute;
   top: 0;
@@ -1730,6 +2365,7 @@
 }
 
 /* Title */
+
 .taskon-quest-blindbox-reward-title {
   font-size: 32px;
   font-weight: 600;
@@ -1738,6 +2374,7 @@
 }
 
 /* Subtitle */
+
 .taskon-quest-blindbox-reward-subtitle {
   margin-top: 12px;
   font-size: 16px;
@@ -1746,31 +2383,33 @@
 }
 
 /* Rewards container - Green border and background like Vue version */
+
 .taskon-quest-blindbox-reward-list {
   display: inline-flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
-  margin-top: 24px;
-  gap: 8px;
-  padding: 12px 16px;
-  border-radius: 8px;
+  margin-top: var(--taskon-spacing-lg);
+  gap: var(--taskon-spacing-sm);
+  padding: 12px var(--taskon-spacing-md);
+  border-radius: var(--taskon-border-radius);
   border: 1px solid rgba(60, 232, 155, 0.2);
   background: rgba(0, 255, 163, 0.1);
 }
 
 /* Single reward card - transparent background */
+
 .taskon-quest-blindbox-reward-card {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 12px 16px;
+  padding: 12px var(--taskon-spacing-md);
   background: transparent;
   border-radius: 0;
   min-width: 60px;
   min-height: 80px;
-  gap: 8px;
+  gap: var(--taskon-spacing-sm);
 }
 
 .taskon-quest-blindbox-reward-card-icon {
@@ -1781,6 +2420,7 @@
 }
 
 /* Token amount with orange color and underline like Vue version */
+
 .taskon-quest-blindbox-reward-card-amount {
   font-size: 18px;
   font-weight: 600;
@@ -1801,13 +2441,15 @@
 }
 
 /* Back button */
+
 .taskon-quest-blindbox-reward-btn-wrap {
   display: flex;
   justify-content: center;
-  margin-top: 60px;
+  margin-top: 40px;
 }
 
 /* Back button - matches Vue g-button--light-border */
+
 .taskon-quest-blindbox-reward-btn {
   height: 36px;
   padding: 0 24px;
@@ -1816,7 +2458,7 @@
   color: #fff;
   background: transparent;
   border: 1px solid #fff;
-  border-radius: 8px;
+  border-radius: var(--taskon-border-radius);
   cursor: pointer;
   transition: opacity 0.2s ease;
 }
@@ -1846,7 +2488,7 @@
   color: #000;
   background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
   border: none;
-  border-radius: 12px;
+  border-radius: var(--taskon-border-radius-lg);
   cursor: pointer;
   transition: all 0.2s ease;
 }
@@ -1865,40 +2507,61 @@
   height: 24px;
 }
 
-/* ============================================================================
-   Mobile Responsive
-   ============================================================================ */
-
-@media (max-width: 768px) {
+@supports (container-type: inline-size) {
+    @container (min-width: 751px) {
   .taskon-quest-blindbox-dialog {
-    padding-top: 24px;
+    padding-top: 40px;
   }
 
   .taskon-quest-blindbox-dialog-title {
-    padding: 0 24px;
-    font-size: 18px;
+    padding: 0 40px;
   }
 
   .taskon-quest-blindbox-reward {
-    padding: 48px 24px;
+    padding: 64px 40px;
+  }
+
+  .taskon-quest-blindbox-reward-btn-wrap {
+    margin-top: 60px;
+  }
+    }
+  }
+
+@supports not (container-type: inline-size) {
+    @media (min-width: 751px) {
+  .taskon-quest-blindbox-dialog {
+    padding-top: 40px;
   }
 
-  .taskon-quest-blindbox-reward-title {
-    font-size: 24px;
-    line-height: 32px;
+  .taskon-quest-blindbox-dialog-title {
+    padding: 0 40px;
+  }
+
+  .taskon-quest-blindbox-reward {
+    padding: 64px 40px;
   }
 
   .taskon-quest-blindbox-reward-btn-wrap {
-    margin-top: 40px;
+    margin-top: 60px;
+  }
+    }
   }
-}
 /**
  * Eligibility (资格验证) 组件样式
  * @description Standalone CSS for EligibilityInfo component, usable in any widget context.
+ */
+
+/*
+ * Responsive base styles
  *
- * 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.
+ * Keep mobile breakpoints and fallback patterns centralized here.
+ * Components should reuse these mixins instead of duplicating query logic.
+ */
+
+/*
+ * Desktop-up mixin:
+ * 1) Enable desktop enhancement in wider containers
+ * 2) Keep viewport media query as fallback
  */
 
 /* ============================================================================
@@ -1906,23 +2569,25 @@
    ============================================================================ */
 
 .taskon-quest-eligs {
-  margin-top: 25px;
-  padding: 0 18px;
-  border: 1px solid var(--taskon-quest-text-darkest, rgba(255, 255, 255, 0.1));
-  border-radius: 10px;
+  container-type: inline-size;
+  margin-top: var(--taskon-spacing-md);
+  padding: 0 var(--taskon-spacing-md);
+  border: 1px solid var(--taskon-color-border);
+  border-radius: var(--taskon-border-radius-lg);
 }
 
 /* 动画效果 - 用于引导用户注意 */
+
 .taskon-quest-eligs--animate {
   animation: taskon-quest-eligs-glow 800ms ease-out infinite alternate;
 }
 
 @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);
   }
 }
 
@@ -1946,19 +2611,22 @@
 }
 
 /* 状态图标 */
+
 .taskon-quest-eligs-header-status {
   flex-shrink: 0;
 }
 
 /* 头部文本 */
+
 .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 +2642,16 @@
   padding: 0;
   margin-left: auto;
   background: transparent;
-  border: 1px solid var(--taskon-quest-text-darkest, rgba(255, 255, 255, 0.1));
-  border-radius: 6px;
-  color: var(--taskon-quest-text-lighter, rgba(255, 255, 255, 0.8));
+  border: 1px solid var(--taskon-color-border);
+  border-radius: var(--taskon-border-radius-sm);
+  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 +2677,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;
 }
@@ -2024,19 +2692,20 @@
 
 .taskon-quest-eligs-list {
   text-align: left;
-  padding: 20px 0;
+  padding: var(--taskon-spacing-md) 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);
 }
 
 /* 单项 */
+
 .taskon-quest-eligs-item {
   line-height: 18px;
 }
 
 .taskon-quest-eligs-item + .taskon-quest-eligs-item {
-  margin-top: 24px;
+  margin-top: var(--taskon-spacing-md);
 }
 
 .taskon-quest-eligs-item-container {
@@ -2045,10 +2714,11 @@
 }
 
 /* 状态图标 */
+
 .taskon-quest-eligs-item-icon {
   flex-shrink: 0;
-  margin-right: 10px;
-  margin-top: 2px;
+  margin-right: var(--taskon-spacing-sm);
+  margin-top: var(--taskon-spacing-xs);
   opacity: 0;
 }
 
@@ -2056,8 +2726,8 @@
   flex-shrink: 0;
   width: 16px;
   height: 16px;
-  margin-right: 10px;
-  margin-top: 2px;
+  margin-right: var(--taskon-spacing-sm);
+  margin-top: var(--taskon-spacing-xs);
 }
 
 .taskon-quest-eligs-item--passed .taskon-quest-eligs-item-icon,
@@ -2065,12 +2735,29 @@
   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 +2765,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 {
@@ -2087,13 +2774,15 @@
 }
 
 /* 高亮文本 */
+
 .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;
 }
 
@@ -2102,6 +2791,7 @@
 }
 
 /* Tooltip */
+
 .taskon-quest-eligs-tooltip {
   position: absolute;
   top: 100%;
@@ -2112,10 +2802,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);
-  border-radius: 6px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  color: var(--taskon-color-text);
+  background-color: var(--taskon-color-bg-floating);
+  border-radius: var(--taskon-border-radius-sm);
+  box-shadow: 0 2px 8px var(--taskon-color-bg-mask);
   white-space: normal;
   word-break: break-word;
 }
@@ -2148,7 +2838,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,51 +2859,54 @@
 .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);
 }
 
-/* ============================================================================
-   Eligibility 响应式样式
-   ============================================================================ */
-
-@media (max-width: 750px) {
+@supports (container-type: inline-size) {
+    @container (min-width: 751px) {
   .taskon-quest-eligs {
-    margin-top: 5.07vw;
-    padding: 0 4vw;
+    margin-top: var(--taskon-spacing-lg);
+    padding: 0 var(--taskon-spacing-md);
+  }
+
+  .taskon-quest-eligs-list {
+    padding: 20px 0;
+  }
+
+  .taskon-quest-eligs-item + .taskon-quest-eligs-item {
+    margin-top: var(--taskon-spacing-lg);
   }
 
-  .taskon-quest-eligs-header {
-    height: 12vw;
-    font-size: 3.47vw;
-    line-height: 4.4vw;
+  .taskon-quest-eligs-item-icon,
+  .taskon-quest-eligs-item-icon-placeholder {
+    margin-top: var(--taskon-spacing-xs);
+    margin-right: var(--taskon-spacing-sm);
+  }
+    }
   }
 
-  .taskon-quest-eligs-header-arrow {
-    width: 1.2vw;
-    height: 2.4vw;
+@supports not (container-type: inline-size) {
+    @media (min-width: 751px) {
+  .taskon-quest-eligs {
+    margin-top: var(--taskon-spacing-lg);
+    padding: 0 var(--taskon-spacing-md);
   }
 
   .taskon-quest-eligs-list {
-    padding: 3.73vw 0;
+    padding: 20px 0;
   }
 
   .taskon-quest-eligs-item + .taskon-quest-eligs-item {
-    margin-top: 3.73vw;
+    margin-top: var(--taskon-spacing-lg);
   }
 
   .taskon-quest-eligs-item-icon,
   .taskon-quest-eligs-item-icon-placeholder {
-    margin-top: 0.8vw;
-    margin-right: 1.87vw;
-    width: 3.2vw;
-    height: 3.2vw;
+    margin-top: var(--taskon-spacing-xs);
+    margin-right: var(--taskon-spacing-sm);
   }
-
-  .taskon-quest-eligs-item-content {
-    font-size: 3.47vw;
-    line-height: 4.4vw;
+    }
   }
-}
 
 /* ============================================================================
    OnChainVerify Tooltip Styles
@@ -2228,11 +2921,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 +2934,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 +2950,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 +2973,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 +2994,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 +3009,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;