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

package/dist/EligibilityInfo.css

@@ -7,25 +7,41 @@
  * 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: 100%;
-  max-width: 470px;
-  padding: 40px 55px;
-  background: var(--taskon-color-bg-popup, #0d0d0d);
-  color: var(--taskon-color-text, #ffffff);
-  border-radius: 10px;
+  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;
@@ -34,29 +50,33 @@
 }
 
 /* Title */
+
 .taskon-confirm-notice-title {
   margin: 20px 0 0;
   font-weight: 600;
   font-size: 22px;
   line-height: 28px;
-  color: var(--taskon-color-text, #ffffff);
+  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, rgba(255, 255, 255, 0.7));
+  color: var(--taskon-color-text-secondary);
   white-space: pre-wrap;
 }
 
 /* Action container */
+
 .taskon-confirm-notice-buttons {
   margin-top: 20px;
   display: flex;
-  align-items: center;
+  flex-direction: column;
+  align-items: stretch;
   justify-content: center;
   gap: 10px;
 }
@@ -66,8 +86,10 @@
 }
 
 /* Base action button style */
+
 .taskon-confirm-notice-button {
-  min-width: 161px;
+  width: 100%;
+  min-width: 100%;
   height: 36px;
   padding: 0 16px;
   border-radius: 8px;
@@ -86,68 +108,71 @@
 }
 
 /* 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);
+  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: rgba(255, 255, 255, 0.16);
+  background: var(--taskon-color-bg-surface);
 }
 
 /* Confirm button */
+
 .taskon-confirm-notice-button--confirm {
-  color: #000000;
-  background: var(--taskon-color-primary, #cbff01);
+  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) {
-  filter: brightness(0.95);
+  background: var(--taskon-color-primary-hover);
 }
 
-/* Mobile adaptation (aligned with original vw-based behavior) */
-@media (max-width: 750px) {
+/* Desktop 增强 */
+
+@supports (container-type: inline-size) {
+    @container (min-width: 751px) {
   .taskon-confirm-notice {
-    max-width: none;
-    width: auto;
-    padding: 8vw 6.667vw 6.667vw;
+    width: 100%;
+    max-width: 470px;
+    padding: 40px 55px;
   }
 
-  .taskon-confirm-notice-icon {
-    width: 7.467vw;
-    height: 7.467vw;
+  .taskon-confirm-notice-buttons {
+    flex-direction: row;
+    align-items: center;
   }
 
-  .taskon-confirm-notice-title {
-    margin-top: 4vw;
-    font-size: 4.533vw;
-    line-height: 5.733vw;
+  .taskon-confirm-notice-button {
+    width: auto;
+    min-width: 161px;
+  }
+    }
   }
 
-  .taskon-confirm-notice-desc {
-    margin-top: 2vw;
-    font-size: 3.733vw;
-    line-height: 4.667vw;
+@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 {
-    margin-top: 5.333vw;
-    flex-direction: column;
-    gap: 2.667vw;
+    flex-direction: row;
+    align-items: center;
   }
 
   .taskon-confirm-notice-button {
-    width: 100%;
-    min-width: 100%;
-    height: 9.333vw;
-    line-height: 9.333vw;
-    border-radius: 2.133vw;
-    font-size: 3.467vw;
+    width: auto;
+    min-width: 161px;
+  }
+    }
   }
-}
 /**
  * Textarea 通用组件样式
  * @description 复刻 Vue 版本 BaseTextareaPro.vue 样式
@@ -155,12 +180,14 @@
  */
 
 /* ==================== 容器 ==================== */
+
 .taskon-textarea-wrap {
   position: relative;
   font-size: 0;
 }
 
 /* ==================== 文本域 ==================== */
+
 .taskon-textarea {
   width: 100%;
   min-height: 100px;
@@ -195,6 +222,7 @@
 }
 
 /* ==================== 字数统计 ==================== */
+
 .taskon-textarea-count {
   position: absolute;
   right: 20px;
@@ -208,29 +236,13 @@
 .taskon-textarea-count-current {
   color: var(--taskon-color-text);
 }
-
-/* ==================== 响应式 ==================== */
-@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;
-  }
-}
 /**
  * TitleExpress 组件样式
  * @module components/TitleExpress
  */
 
 /* 可点击链接 - 统一蓝色加下划线样式 */
+
 .taskon-title-express-link {
   display: inline;
   color: var(--taskon-color-link);
@@ -244,6 +256,7 @@
 }
 
 /* 可复制文本 */
+
 .taskon-title-express-copy {
   display: inline;
   color: var(--taskon-color-secondary);
@@ -251,6 +264,7 @@
 }
 
 /* Radix Popover 内容 */
+
 .taskon-title-express-popover-content {
   display: flex;
   align-items: center;
@@ -280,6 +294,7 @@
 }
 
 /* 复制图标 */
+
 .taskon-title-express-copy-icon {
   width: 14px;
   height: 14px;
@@ -287,11 +302,13 @@
 }
 
 /* Radix Popover 箭头 */
+
 .taskon-title-express-popover-arrow {
   fill: var(--taskon-color-bg-floating);
 }
 
 /* 动画 */
+
 @keyframes taskon-popover-fade-in {
   from {
     opacity: 0;
@@ -302,22 +319,6 @@
     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
@@ -346,6 +347,7 @@
 }
 
 /* ========== 基础防护（降低宿主 reset 影响） ========== */
+
 .taskon-card-desc-rich,
 .taskon-card-desc-rich *,
 .taskon-card-desc-rich *::before,
@@ -354,6 +356,7 @@
 }
 
 /* ========== 基础块元素（对齐 Quill 编辑器语义） ========== */
+
 .taskon-card-desc-rich p,
 .taskon-card-desc-rich ol,
 .taskon-card-desc-rich ul,
@@ -378,14 +381,6 @@
   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;
 }
@@ -407,6 +402,7 @@
 }
 
 /* ========== 列表（核心：确保圆点/编号稳定可见） ========== */
+
 .taskon-card-desc-rich ol,
 .taskon-card-desc-rich ul {
   margin: 0.5em 0;
@@ -567,6 +563,7 @@
 }
 
 /* ========== 缩进与对齐（对齐 Quill class 语义） ========== */
+
 .taskon-card-desc-rich .ql-indent-1:not(.ql-direction-rtl) {
   padding-left: 3em;
 }
@@ -729,6 +726,7 @@
 }
 
 /* ========== 常见富文本元素 ========== */
+
 .taskon-card-desc-rich a {
   color: var(--taskon-color-link);
   text-decoration: underline;
@@ -788,53 +786,58 @@
   width: 100%;
   max-width: 100%;
 }
-
-/* ========== 响应式样式（移动端） ========== */
-@media (max-width: 750px) {
-  .taskon-card-desc-rich {
-    max-height: 18vw;
-    font-size: 3.733vw;
-    line-height: normal;
-  }
-
-  .taskon-card-desc-rich--no-max-height {
-    margin-top: 0;
-    max-height: none;
-  }
-}
 /**
  * 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: 10px;
+  margin-top: var(--taskon-spacing-sm);
   font-size: 16px;
   line-height: 20px;
   color: var(--taskon-color-text-tertiary);
   white-space: pre-wrap;
 }
-
-@media (max-width: 750px) {
-  .taskon-task-verify-failed-dialog-message {
-    margin-top: 3.73vw;
-    font-size: 3.73vw;
-    line-height: 4.67vw;
-  }
-}
 /**
  * PowTask Styles
  * @description POW 任务样式
  * 遵循 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 的样式 */
 }
@@ -842,6 +845,7 @@
 /* ============================================
  * POW Input Area
  * ============================================ */
+
 .taskon-pow-input-area {
   margin-top: var(--taskon-spacing-md);
 }
@@ -849,14 +853,17 @@
 /* ============================================
  * URL Input Row
  * ============================================ */
+
 .taskon-pow-url-row {
   display: flex;
-  align-items: center;
-  gap: var(--taskon-spacing-md);
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--taskon-spacing-sm);
 }
 
 .taskon-pow-input {
   flex: 1;
+  width: 100%;
   padding: var(--taskon-spacing-sm)
     var(--taskon-spacing-md);
   border: 1px solid var(--taskon-color-border);
@@ -884,10 +891,12 @@
 /* ============================================
  * Text Input Row
  * ============================================ */
+
 .taskon-pow-text-row {
   display: flex;
-  align-items: flex-end;
-  gap: var(--taskon-spacing-md);
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--taskon-spacing-sm);
 }
 
 .taskon-pow-text-row .taskon-textarea-wrap {
@@ -897,12 +906,18 @@
 /* ============================================
  * Image Upload Area - 与 Vue 版本 PowImageUploader 一致
  * ============================================ */
+
 .taskon-pow-image-uploader {
-  margin-top: var(--taskon-spacing-lg);
+  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;
@@ -959,6 +974,7 @@
 }
 
 /* Hover mask overlay */
+
 .taskon-pow-image-mask {
   display: none;
   position: absolute;
@@ -985,6 +1001,7 @@
 }
 
 /* Progress bar at bottom */
+
 .taskon-pow-image-progress-bar {
   z-index: 3;
   position: absolute;
@@ -1005,6 +1022,7 @@
 /* ============================================
  * Error Message
  * ============================================ */
+
 .taskon-pow-error {
   margin-top: 10px;
   font-size: 14px;
@@ -1014,7 +1032,9 @@
 /* ============================================
  * Average Review Time
  * ============================================ */
+
 /* 与 Vue 版本 AverageReview.vue 样式一致 */
+
 .taskon-pow-review-time {
   margin-top: 10px;
   color: var(--taskon-color-warning);
@@ -1024,47 +1044,58 @@
 }
 
 /* ============================================
- * 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;
+@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-icon {
-    width: 2.4vw;
-    height: 2.4vw;
+  .taskon-pow-text-row {
+    flex-direction: row;
+    align-items: flex-end;
+    gap: var(--taskon-spacing-md);
   }
 
-  .taskon-pow-image-upload-tip {
-    margin-top: 1.33vw;
-    font-size: 1.6vw;
-    line-height: 2.67vw;
+  .taskon-pow-url-row .taskon-verify-btn,
+  .taskon-pow-text-row .taskon-verify-btn {
+    width: auto;
   }
 
-  .taskon-pow-image-preview {
-    max-height: 32vw;
+  .taskon-pow-image-uploader {
+    margin-top: var(--taskon-spacing-lg);
+  }
+    }
   }
-}
 /* ============================================
    DynamicPoints Component Styles
    与 Vue 版本 BaseDynamicPoint.vue 样式一致
@@ -1177,6 +1208,7 @@
 }
 
 /* Content wrapper */
+
 .taskon-swap-content {
   display: flex;
   flex-direction: column;
@@ -1184,6 +1216,7 @@
 }
 
 /* Rules section - 动态积分规则区域 */
+
 .taskon-swap-rules-section {
   display: flex;
   flex-direction: column;
@@ -1223,6 +1256,7 @@
 }
 
 /* Instructions section - 任务描述区域 */
+
 .taskon-swap-instructions-section {
   display: flex;
   flex-direction: column;
@@ -1251,6 +1285,7 @@
 }
 
 /* ==================== Customized Param Dialog ==================== */
+
 .taskon-outer-point-api-dialog {
   display: flex;
   flex-direction: column;
@@ -1258,6 +1293,7 @@
 }
 
 /* Dialog title */
+
 .taskon-outer-point-api-dialog-title {
   font-size: 18px;
   font-weight: 600;
@@ -1266,6 +1302,7 @@
 }
 
 /* Warning message */
+
 .taskon-outer-point-api-dialog-warning {
   display: flex;
   align-items: center;
@@ -1285,6 +1322,7 @@
 }
 
 /* Description text */
+
 .taskon-outer-point-api-dialog-desc {
   font-size: 14px;
   line-height: 20px;
@@ -1292,6 +1330,7 @@
 }
 
 /* Input area */
+
 .taskon-outer-point-api-dialog-input-wrap {
   display: flex;
   flex-direction: column;
@@ -1337,6 +1376,7 @@
 }
 
 /* Action buttons */
+
 .taskon-outer-point-api-dialog-actions {
   display: flex;
   justify-content: flex-end;
@@ -1383,10 +1423,24 @@
  * 命名规范：.taskon-task-{component}-{element}--{modifier}
  */
 
+/*
+ * 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;
@@ -1394,28 +1448,29 @@
 }
 
 /* Progress section */
+
 .taskon-task-list-progress-wrap {
   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 {
@@ -1438,63 +1493,82 @@
 .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-spacing-lg);
   text-align: center;
   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;
@@ -1504,14 +1578,14 @@
 .taskon-task-progress-bar {
   height: 6px;
   background: var(--taskon-color-bg-surface-strong);
-  border-radius: 3px;
+  border-radius: var(--taskon-border-radius-sm);
   overflow: hidden;
 }
 
 .taskon-task-progress-bar-fill {
   height: 100%;
   background: var(--taskon-color-primary);
-  border-radius: 3px;
+  border-radius: var(--taskon-border-radius-sm);
   transition: width 0.2s ease;
 }
 
@@ -1540,9 +1614,10 @@
 /* ============================================
    TaskItem Styles
    ============================================ */
+
 .taskon-task-item {
   position: relative;
-  padding: 16px 20px;
+  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);
@@ -1557,6 +1632,7 @@
    左上角浮标：周期标签 / 冷却倒计时
    与 Vue 版本 RecurrenceStatus.vue 样式一致
    ============================================ */
+
 .taskon-task-item-recurrence {
   position: absolute;
   top: -6px;
@@ -1579,6 +1655,7 @@
 }
 
 /* 冷却倒计时样式 - 继承标签样式 */
+
 .taskon-task-item-recurrence .taskon-cooldown-timer {
   color: var(--taskon-color-primary);
   font-size: 12px;
@@ -1589,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;
@@ -1607,7 +1687,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-right: 16px;
+  margin-right: 10px;
   color: var(--taskon-color-text-tertiary);
 }
 
@@ -1616,7 +1696,9 @@
 }
 
 /* Title wrapper - 与 Vue 版本 TitleRow 结构一致 */
+
 /* 普通 block flow，标题 inline，TotalEarnPoint 作为 block div 自然换行 */
+
 .taskon-task-item-title-wrap {
   flex: 1;
   min-width: 0;
@@ -1632,6 +1714,7 @@
 }
 
 /* Title as link - 参考 Vue 版本 TitleRow.vue 的 OutLink 样式 */
+
 .taskon-task-item-title--link {
   color: var(--taskon-color-link);
   text-decoration: underline;
@@ -1647,6 +1730,7 @@
 }
 
 /* Links in title - 统一蓝色加下划线样式 */
+
 .taskon-task-item-link {
   color: var(--taskon-color-link);
   text-decoration: underline;
@@ -1658,6 +1742,7 @@
 }
 
 /* Title tip icon */
+
 .taskon-task-item-title-tip {
   display: inline-flex;
   align-items: center;
@@ -1673,15 +1758,18 @@
 }
 
 /* Right section: Points + Total + Verify */
+
 .taskon-task-item-right {
   display: flex;
-  align-items: center;
-  gap: var(--taskon-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;
@@ -1691,7 +1779,7 @@
   justify-content: center;
   gap: 2px;
   background: var(--taskon-color-bg-surface-subtle);
-  border-radius: 6px;
+  border-radius: var(--taskon-border-radius-sm);
   font-size: 16px;
   font-weight: 500;
 }
@@ -1701,6 +1789,7 @@
 }
 
 /* Points value when task is completed - green color like Vue version */
+
 .taskon-task-item-points-value--completed {
   color: var(--taskon-color-secondary);
 }
@@ -1711,11 +1800,13 @@
 }
 
 /* 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-color-text-disabled);
@@ -1725,6 +1816,7 @@
    TotalEarnPoint Styles
    与 Vue 版本 TotalEarnPoint.vue 样式一致
    ============================================ */
+
 .taskon-task-item-total-earn {
   display: flex;
   align-items: center;
@@ -1744,8 +1836,9 @@
 /* ============================================
    第二行：内容区域（始终显示）
    ============================================ */
+
 .taskon-task-item-body {
-  margin-left: 50px;
+  margin-left: 36px;
   margin-top: 10px;
 }
 
@@ -1764,6 +1857,7 @@
 }
 
 /* Description fields */
+
 .taskon-task-item-fields {
   display: flex;
   flex-direction: column;
@@ -1798,6 +1892,7 @@
 }
 
 /* Action link */
+
 .taskon-task-item-action-link {
   display: inline-flex;
   align-items: center;
@@ -1819,6 +1914,7 @@
 }
 
 /* Spinner animation */
+
 @keyframes taskon-spin {
   from {
     transform: rotate(0deg);
@@ -1835,6 +1931,7 @@
 /* ============================================
    TaskIcon Styles
    ============================================ */
+
 .taskon-task-icon {
   display: inline-flex;
   align-items: center;
@@ -1850,6 +1947,7 @@
 /* ============================================
    CooldownTimer Styles
    ============================================ */
+
 .taskon-cooldown-timer {
   display: inline-flex;
   align-items: center;
@@ -1861,6 +1959,7 @@
 /* ============================================
    VerifyButton Styles
    ============================================ */
+
 .taskon-verify-btn {
   display: inline-flex;
   align-items: center;
@@ -1903,6 +2002,7 @@
 /* ============================================
    ExpandableContent Styles
    ============================================ */
+
 .taskon-expandable {
   display: flex;
   flex-direction: column;
@@ -1946,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;
@@ -2018,6 +2129,7 @@
    VerifyButton Cooldown Progress Bar
    与 Vue 版本 VerifyButton.vue 冷却进度条样式一致
    ============================================ */
+
 .taskon-verify-btn-wrap {
   position: relative;
   display: inline-block;
@@ -2072,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;
@@ -2093,6 +2219,7 @@
 }
 
 /* Stage container - centered square area for animation */
+
 .taskon-quest-blindbox-stage {
   position: relative;
   display: flex;
@@ -2108,6 +2235,7 @@
 }
 
 /* Background spinning light */
+
 .taskon-quest-blindbox-bg {
   position: absolute;
   left: 50%;
@@ -2134,6 +2262,7 @@
 }
 
 /* Drop zone - collision detection area */
+
 .taskon-quest-blindbox-dropzone {
   position: absolute;
   left: 50%;
@@ -2145,6 +2274,7 @@
 }
 
 /* Chest container */
+
 .taskon-quest-blindbox-chest {
   position: absolute;
   left: 50%;
@@ -2165,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;
@@ -2201,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;
@@ -2231,6 +2365,7 @@
 }
 
 /* Title */
+
 .taskon-quest-blindbox-reward-title {
   font-size: 32px;
   font-weight: 600;
@@ -2239,6 +2374,7 @@
 }
 
 /* Subtitle */
+
 .taskon-quest-blindbox-reward-subtitle {
   margin-top: 12px;
   font-size: 16px;
@@ -2247,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 {
@@ -2282,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;
@@ -2302,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;
@@ -2317,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;
 }
@@ -2347,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;
 }
@@ -2366,50 +2507,77 @@
   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
+ *
+ * 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
+ */
+
 /* ============================================================================
    Eligibility 主容器
    ============================================================================ */
 
 .taskon-quest-eligs {
-  margin-top: 25px;
-  padding: 0 18px;
+  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: 10px;
+  border-radius: var(--taskon-border-radius-lg);
 }
 
 /* 动画效果 - 用于引导用户注意 */
+
 .taskon-quest-eligs--animate {
   animation: taskon-quest-eligs-glow 800ms ease-out infinite alternate;
 }
@@ -2443,17 +2611,20 @@
 }
 
 /* 状态图标 */
+
 .taskon-quest-eligs-header-status {
   flex-shrink: 0;
 }
 
 /* 头部文本 */
+
 .taskon-quest-eligs-header-text {
   flex: 1;
   color: var(--taskon-color-text);
 }
 
 /* 高亮表达式 (all/any) */
+
 .taskon-quest-eligs-header-express {
   color: var(--taskon-color-secondary);
 }
@@ -2472,7 +2643,7 @@
   margin-left: auto;
   background: transparent;
   border: 1px solid var(--taskon-color-border);
-  border-radius: 6px;
+  border-radius: var(--taskon-border-radius-sm);
   color: var(--taskon-color-text-secondary);
   cursor: pointer;
   transition: all 0.2s;
@@ -2521,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-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 {
@@ -2542,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;
 }
 
@@ -2553,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,
@@ -2579,6 +2752,7 @@
 }
 
 /* 内容区 */
+
 .taskon-quest-eligs-item-content {
   flex: 1;
   font-size: 14px;
@@ -2600,11 +2774,13 @@
 }
 
 /* 高亮文本 */
+
 .taskon-quest-eligs-highlight {
   color: var(--taskon-color-primary);
 }
 
 /* 链接样式 */
+
 .taskon-quest-eligs-link {
   color: var(--taskon-color-link);
   text-decoration: underline;
@@ -2615,6 +2791,7 @@
 }
 
 /* Tooltip */
+
 .taskon-quest-eligs-tooltip {
   position: absolute;
   top: 100%;
@@ -2627,7 +2804,7 @@
   line-height: 16px;
   color: var(--taskon-color-text);
   background-color: var(--taskon-color-bg-floating);
-  border-radius: 6px;
+  border-radius: var(--taskon-border-radius-sm);
   box-shadow: 0 2px 8px var(--taskon-color-bg-mask);
   white-space: normal;
   word-break: break-word;
@@ -2685,48 +2862,51 @@
   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-header {
-    height: 12vw;
-    font-size: 3.47vw;
-    line-height: 4.4vw;
+  .taskon-quest-eligs-list {
+    padding: 20px 0;
   }
 
-  .taskon-quest-eligs-header-arrow {
-    width: 1.2vw;
-    height: 2.4vw;
+  .taskon-quest-eligs-item + .taskon-quest-eligs-item {
+    margin-top: var(--taskon-spacing-lg);
+  }
+
+  .taskon-quest-eligs-item-icon,
+  .taskon-quest-eligs-item-icon-placeholder {
+    margin-top: var(--taskon-spacing-xs);
+    margin-right: var(--taskon-spacing-sm);
+  }
+    }
+  }
+
+@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