@taskon/widget-react 0.0.1 → 0.0.2

package/dist/Quest.css

@@ -6,6 +6,7 @@
  */
 
 /* ========== 容器 ========== */
+
 .taskon-button-tabs {
   display: inline-flex;
   align-items: center;
@@ -13,14 +14,15 @@
 }
 
 /* ========== Tab 按钮基础样式 ========== */
+
 .taskon-button-tabs__tab {
   flex-shrink: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background-color: transparent;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  color: rgba(255, 255, 255, 0.6);
+  border: 1px solid var(--taskon-color-border);
+  color: var(--taskon-color-text-secondary);
   font-weight: 500;
   white-space: nowrap;
   cursor: pointer;
@@ -30,6 +32,7 @@
 /* ========== 尺寸变体 ========== */
 
 /* Small 尺寸 */
+
 .taskon-button-tabs__tab--small {
   height: 32px;
   padding: 4px 12px;
@@ -39,6 +42,7 @@
 }
 
 /* Medium 尺寸 */
+
 .taskon-button-tabs__tab--medium {
   height: 36px;
   padding: 6px 16px;
@@ -50,16 +54,18 @@
 /* ========== 状态样式 ========== */
 
 /* Hover 状态（未选中） */
+
 .taskon-button-tabs__tab:hover:not(.taskon-button-tabs__tab--active):not(.taskon-button-tabs__tab--disabled) {
-  border-color: rgba(255, 255, 255, 0.6);
-  color: rgba(255, 255, 255, 0.8);
+  border-color: var(--taskon-color-border-secondary);
+  color: var(--taskon-color-text);
 }
 
 /* 选中状态 (light-border) */
+
 .taskon-button-tabs__tab--active {
   background-color: transparent;
-  border-color: #ffffff;
-  color: #ffffff;
+  border-color: var(--taskon-color-text);
+  color: var(--taskon-color-text);
 }
 
 .taskon-button-tabs__tab--active:hover {
@@ -67,9 +73,10 @@
 }
 
 /* 禁用状态 */
+
 .taskon-button-tabs__tab--disabled {
-  color: rgba(255, 255, 255, 0.3);
-  border-color: rgba(255, 255, 255, 0.1);
+  color: var(--taskon-color-text-disabled);
+  border-color: var(--taskon-color-border-secondary);
   cursor: not-allowed;
 }
 /* CompletedCount - 完成计数组件样式 */
@@ -78,20 +85,18 @@
   align-items: center;
   gap: 8px;
 }
-
 .taskon-completed-count-check {
   width: 12px;
   height: 9px;
+  color: var(--taskon-color-success);
 }
-
 .taskon-completed-count-text {
   font-size: 14px;
   line-height: 18px;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--taskon-color-text-secondary);
 }
-
 .taskon-completed-count-em {
-  color: #fff;
+  color: var(--taskon-color-text);
 }
 /**
  * EligsNotPassDialog 样式
@@ -99,6 +104,7 @@
  */
 
 /* 弹窗容器 */
+
 .taskon-eligs-dialog-container {
   display: flex;
   flex-direction: column;
@@ -107,6 +113,7 @@
 }
 
 /* 头部图标和标题 */
+
 .taskon-eligs-dialog-header {
   display: flex;
   flex-direction: column;
@@ -123,32 +130,34 @@
   margin: 0;
   font-size: 20px;
   font-weight: 600;
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
 }
 
 /* 描述文本 */
+
 .taskon-eligs-dialog-desc {
   margin: 0;
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   line-height: 1.5;
-  color: var(--taskon-text-secondary, #a0a0a0);
+  color: var(--taskon-color-text-secondary);
   text-align: center;
 }
 
 .taskon-eligs-dialog-desc--success {
-  color: var(--taskon-success, #52c41a);
+  color: var(--taskon-color-success);
 }
 
 .taskon-eligs-dialog-highlight {
-  color: var(--taskon-primary, #6366f1);
+  color: var(--taskon-color-primary);
   font-weight: 500;
 }
 
 /* 资格条件区域 */
+
 .taskon-eligs-dialog-eligs {
   width: 100%;
-  border: 1px solid var(--taskon-border, #333);
-  border-radius: 10px;
+  border: 1px solid var(--taskon-color-border);
+  border-radius: var(--taskon-border-radius-lg);
   overflow: hidden;
 }
 
@@ -162,14 +171,14 @@
   background: transparent;
   border: none;
   cursor: pointer;
-  color: var(--taskon-text-primary, #fff);
-  font-size: 14px;
+  color: var(--taskon-color-text);
+  font-size: var(--taskon-font-size);
   text-align: left;
   transition: background 0.2s;
 }
 
 .taskon-eligs-dialog-eligs-header:hover {
-  background: var(--taskon-bg-hover, rgba(255, 255, 255, 0.05));
+  background: var(--taskon-color-bg-surface-strong);
 }
 
 .taskon-eligs-dialog-eligs-icon {
@@ -184,7 +193,7 @@
 .taskon-eligs-dialog-arrow {
   width: 6px;
   height: 10px;
-  color: var(--taskon-text-secondary, #a0a0a0);
+  color: var(--taskon-color-text-secondary);
   transition: transform 0.3s;
   transform: rotate(90deg);
 }
@@ -198,15 +207,16 @@
 }
 
 /* 底部按钮 */
+
 .taskon-eligs-dialog-button {
   width: 100%;
   height: 48px;
   padding: 0 24px;
   border: none;
-  border-radius: 8px;
-  background: var(--taskon-primary, #6366f1);
-  color: #fff;
-  font-size: 16px;
+  border-radius: var(--taskon-border-radius);
+  background: var(--taskon-color-primary);
+  color: var(--taskon-color-text-on-primary);
+  font-size: var(--taskon-font-size-lg);
   font-weight: 500;
   cursor: pointer;
   transition: opacity 0.2s, background 0.2s;
@@ -222,7 +232,7 @@
 }
 
 .taskon-eligs-dialog-button--loading {
-  background: var(--taskon-bg-secondary, #2a2a2a);
+  background: var(--taskon-color-bg-surface);
 }
 
 .taskon-eligs-dialog-loading {
@@ -256,40 +266,44 @@
 }
 
 /* Eligibility 条件列表区域 */
+
 .taskon-eligs-bind-eligs-section {
   margin-bottom: 20px;
   padding-bottom: 20px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  border-bottom: 1px solid var(--taskon-color-border);
 }
 
 .taskon-eligs-bind-section-title {
   margin: 0 0 12px;
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 600;
-  color: #fff;
+  color: var(--taskon-color-text);
 }
 
 /* 提示文本 */
+
 .taskon-eligs-bind-tip {
   margin: 0 0 20px;
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   line-height: 1.5;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--taskon-color-text-tertiary);
 }
 
 /* 绑定区域 */
+
 .taskon-eligs-bind-section {
   margin-bottom: 20px;
 }
 
 .taskon-eligs-bind-section-subtitle {
   margin: 0 0 12px;
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 500;
-  color: rgba(255, 255, 255, 0.8);
+  color: var(--taskon-color-text-secondary);
 }
 
 /* 绑定列表 */
+
 .taskon-eligs-bind-list {
   display: flex;
   flex-direction: column;
@@ -297,39 +311,45 @@
 }
 
 /* 单个绑定项 */
+
 .taskon-eligs-bind-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 12px 16px;
-  background: rgba(255, 255, 255, 0.05);
-  border-radius: 8px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: var(--taskon-color-bg-surface-strong);
+  border-radius: var(--taskon-border-radius);
+  border: 1px solid var(--taskon-color-border);
 }
 
 .taskon-eligs-bind-item--bound {
-  background: rgba(74, 222, 128, 0.1);
-  border-color: rgba(74, 222, 128, 0.3);
+  background: var(--taskon-color-success-bg);
+  border-color: var(--taskon-color-success);
 }
 
 .taskon-eligs-bind-item-label {
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 500;
-  color: #fff;
+  color: var(--taskon-color-text);
 }
 
 /* 绑定按钮 */
+
 .taskon-eligs-bind-item-btn {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 6px 16px;
-  font-size: 13px;
+  font-size: var(--taskon-font-size-sm);
   font-weight: 500;
-  color: #000;
-  background: linear-gradient(90deg, #00d1ff 0%, #00ff94 100%);
+  color: var(--taskon-color-text-on-primary);
+  background: linear-gradient(
+    90deg,
+    var(--taskon-color-link) 0%,
+    var(--taskon-color-secondary) 100%
+  );
   border: none;
-  border-radius: 6px;
+  border-radius: var(--taskon-border-radius-sm);
   cursor: pointer;
   transition: opacity 0.2s;
 }
@@ -344,6 +364,7 @@
 }
 
 /* 绑定中的加载动画 */
+
 .taskon-eligs-bind-item-spinner {
   width: 14px;
   height: 14px;
@@ -360,33 +381,14 @@
 }
 
 /* 已绑定状态 */
+
 .taskon-eligs-bind-item-status {
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  font-size: 13px;
-  font-weight: 500;
-  color: #4ade80;
-}
-
-/* 跳过按钮 */
-.taskon-eligs-bind-skip-btn {
-  display: block;
-  width: 100%;
-  padding: 12px 24px;
-  margin-top: 20px;
-  font-size: 14px;
+  font-size: var(--taskon-font-size-sm);
   font-weight: 500;
-  color: #000;
-  background: linear-gradient(90deg, #00d1ff 0%, #00ff94 100%);
-  border: none;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: opacity 0.2s;
-}
-
-.taskon-eligs-bind-skip-btn:hover {
-  opacity: 0.9;
+  color: var(--taskon-color-success);
 }
 /**
  * ShareDropdown - 分享下拉菜单样式
@@ -395,6 +397,7 @@
  */
 
 /* 分享触发按钮 - 方形图标按钮（SimpleBox 样式） */
+
 .taskon-quest-share-trigger {
   display: flex;
   align-items: center;
@@ -403,42 +406,44 @@
   height: 40px;
   padding: 0;
   margin-left: auto;
-  background: var(--taskon-quest-color-darkest, #1a1a1a);
+  background: var(--taskon-color-bg-surface);
   border: none;
-  border-radius: 6px;
+  border-radius: var(--taskon-border-radius-sm);
   cursor: pointer;
   transition: background 0.2s;
   flex-shrink: 0;
 }
 
 .taskon-quest-share-trigger:hover {
-  background: var(--taskon-quest-color-darker, #2a2a2a);
+  background: var(--taskon-color-bg-surface-strong);
 }
 
 .taskon-quest-share-trigger svg {
-  color: var(--taskon-quest-text-lightest, #fff);
+  color: var(--taskon-color-text);
 }
 
 /* 下拉菜单 */
+
 .taskon-quest-share-menu {
   width: 230px;
-  background: var(--taskon-quest-share-bg, #222);
-  border-radius: 10px;
+  background: var(--taskon-color-bg-surface);
+  border-radius: var(--taskon-border-radius-lg);
   overflow: hidden;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 4px 16px var(--taskon-color-bg-mask);
   z-index: 100;
   text-align: left;
 }
 
 /* 菜单项 */
+
 .taskon-quest-share-menu-item {
   display: flex;
   align-items: center;
   width: 100%;
   padding: 12px;
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 500;
-  color: #fff;
+  color: var(--taskon-color-text);
   background: transparent;
   border: none;
   cursor: pointer;
@@ -446,7 +451,7 @@
 }
 
 .taskon-quest-share-menu-item:hover {
-  background: var(--taskon-quest-menu-hover-bg, rgba(255, 255, 255, 0.08));
+  background: var(--taskon-color-bg-surface-strong);
 }
 
 .taskon-quest-share-menu-item svg {
@@ -456,11 +461,24 @@
   flex-shrink: 0;
 }
 
+.taskon-quest-share-menu-item--twitter svg {
+  color: var(--taskon-color-link);
+}
+
+.taskon-quest-share-menu-item--copy svg {
+  color: var(--taskon-color-secondary);
+}
+
+.taskon-quest-share-menu-item--qr svg {
+  color: var(--taskon-color-warning);
+}
+
 /* ============================================================================
    二维码弹窗样式 - 与原版 ShareQrCodeDialog.vue 一致
    ============================================================================ */
 
 /* 覆盖 Dialog 默认样式 - 移除卡片背景，让内容区域完全透明 */
+
 .taskon-quest-qr-dialog-content {
   background: transparent !important;
   border-radius: 0 !important;
@@ -478,24 +496,28 @@
 }
 
 /* 海报外层容器 */
+
 .taskon-quest-qr-poster-outer {
-  border-radius: 12px;
+  border-radius: var(--taskon-border-radius-lg);
   overflow: hidden;
 }
 
 /* 海报内容 */
+
 .taskon-quest-qr-poster {
   width: 100%;
 }
 
-/* 海报顶部 - 绿色渐变区域 */
+/* 海报顶部 - 纯色背景 */
+
 .taskon-quest-qr-poster-header {
-  background: linear-gradient(89.87deg, #e2ff97 0.13%, #cffd55 99.92%);
+  background: var(--taskon-color-bg-surface);
   padding: 30px;
-  color: #000;
+  color: var(--taskon-color-text);
 }
 
 /* 社区信息 */
+
 .taskon-quest-qr-owner {
   display: flex;
   align-items: center;
@@ -506,12 +528,12 @@
   height: 30px;
   border-radius: 50%;
   margin-right: 6px;
-  border: 2px solid #000;
+  border: 2px solid var(--taskon-color-border);
   object-fit: cover;
 }
 
 .taskon-quest-qr-owner-name {
-  font-size: 24px;
+  font-size: var(--taskon-font-size-xxxl);
   font-weight: 600;
   white-space: nowrap;
   overflow: hidden;
@@ -519,11 +541,12 @@
 }
 
 /* 活动名称 */
+
 .taskon-quest-qr-campaign-name {
   margin-top: 14px;
   margin-bottom: 8px;
-  font-size: 16px;
-  line-height: 24px;
+  font-size: var(--taskon-font-size-lg);
+  line-height: 1.5;
   font-weight: 600;
   display: -webkit-box;
   -webkit-line-clamp: 2;
@@ -534,31 +557,35 @@
 }
 
 /* Banner 图片 */
+
 .taskon-quest-qr-banner {
   width: 100%;
-  border-radius: 10px;
+  border-radius: var(--taskon-border-radius-lg);
   display: block;
 }
 
 /* 海报底部 - 黑色区域 */
+
 .taskon-quest-qr-poster-footer {
   padding: 30px;
-  background: #000;
+  background: var(--taskon-color-bg-canvas);
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
 }
 
 /* 信息区域 */
+
 .taskon-quest-qr-info {
   width: calc(100% - 80px);
 }
 
 /* 奖励标题 */
+
 .taskon-quest-qr-reward-title {
   display: flex;
   align-items: center;
-  color: #fff;
+  color: var(--taskon-color-text);
   font-weight: 500;
 }
 
@@ -567,14 +594,15 @@
 }
 
 /* 时间范围 */
+
 .taskon-quest-qr-time {
   display: flex;
   align-items: center;
   margin-top: 15px;
   margin-bottom: 6px;
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 500;
-  color: #fff;
+  color: var(--taskon-color-text);
 }
 
 .taskon-quest-qr-time svg {
@@ -583,10 +611,11 @@
 }
 
 /* 二维码 */
+
 .taskon-quest-qr-code {
   width: 80px;
   height: 80px;
-  border-radius: 6px;
+  border-radius: var(--taskon-border-radius-sm);
   overflow: hidden;
   flex-shrink: 0;
 }
@@ -598,6 +627,7 @@
 }
 
 /* 操作按钮 */
+
 .taskon-quest-qr-actions {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -607,6 +637,7 @@
 }
 
 /* 奖励列表 - 与原版 RewardsLabels.vue 一致 */
+
 .taskon-quest-qr-rewards-list {
   display: inline-flex;
   align-items: center;
@@ -617,21 +648,24 @@
 }
 
 /* 单个奖励项 */
+
 .taskon-quest-qr-reward-item {
   display: inline-flex;
   align-items: center;
   white-space: nowrap;
-  color: #fff;
-  font-size: 16px;
+  color: var(--taskon-color-text);
+  font-size: var(--taskon-font-size-lg);
   font-weight: 400;
 }
 
 /* 奖励标签 - 高亮绿色 */
+
 .taskon-quest-qr-reward-label {
-  color: #cbff01;
+  color: var(--taskon-color-primary);
 }
 
 /* 链图标 */
+
 .taskon-quest-qr-reward-chain-icon {
   width: 15px;
   height: 15px;
@@ -640,9 +674,10 @@
 }
 
 /* 奖励间的 & 符号 */
+
 .taskon-quest-qr-reward-and {
   margin-left: 6px;
-  color: #fff;
+  color: var(--taskon-color-text);
 }
 /**
  * ParticipantsInfo 组件样式
@@ -665,7 +700,7 @@
 .taskon-quest-participants-info {
   display: flex;
   flex-direction: column;
-  gap: var(--taskon-quest-spacing-l, 20px);
+  gap: var(--taskon-spacing-lg);
   align-items: stretch;
   width: 100%;
 }
@@ -676,7 +711,7 @@
 
 .taskon-quest-participants-info-header {
   display: flex;
-  gap: var(--taskon-quest-spacing-xs, 8px);
+  gap: var(--taskon-spacing-sm);
   align-items: center;
   padding: 0;
   margin: 0;
@@ -688,21 +723,21 @@
 
 .taskon-quest-participants-info-header:hover .taskon-quest-participants-info-title,
 .taskon-quest-participants-info-header:hover .taskon-quest-participants-info-icon {
-  color: var(--taskon-quest-text-lightest, #ffffff);
+  color: var(--taskon-color-text);
 }
 
 .taskon-quest-participants-info-header:focus-visible {
-  outline: 2px solid var(--taskon-quest-primary, #cbff01);
+  outline: 2px solid var(--taskon-color-primary);
   outline-offset: 2px;
-  border-radius: 4px;
+  border-radius: var(--taskon-border-radius-sm);
 }
 
 .taskon-quest-participants-info-title {
   margin: 0;
-  font-size: 24px;
+  font-size: var(--taskon-font-size-xxxl);
   font-weight: 600;
-  line-height: 32px;
-  color: var(--taskon-quest-text-lightest, #ffffff);
+  line-height: 1.33;
+  color: var(--taskon-color-text);
 }
 
 .taskon-quest-participants-info-icon {
@@ -711,7 +746,7 @@
   justify-content: center;
   width: 12px;
   height: 12px;
-  color: var(--taskon-quest-text-lighter, rgba(255, 255, 255, 0.8));
+  color: var(--taskon-color-text-secondary);
   flex-shrink: 0;
   transition: color 0.2s;
 }
@@ -724,13 +759,14 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 500;
-  line-height: 24px;
+  line-height: 1.5;
   width: 100%;
 }
 
 /* Winners 行可点击样式 */
+
 .taskon-quest-participants-info-row--clickable {
   padding: 0;
   margin: 0;
@@ -746,29 +782,30 @@
 }
 
 .taskon-quest-participants-info-row--clickable:focus-visible {
-  outline: 2px solid var(--taskon-quest-primary, #cbff01);
+  outline: 2px solid var(--taskon-color-primary);
   outline-offset: 2px;
-  border-radius: 4px;
+  border-radius: var(--taskon-border-radius-sm);
 }
 
 .taskon-quest-participants-info-label {
-  color: var(--taskon-quest-text-lighter, rgba(255, 255, 255, 0.8));
+  color: var(--taskon-color-text-secondary);
 }
 
 .taskon-quest-participants-info-value {
-  color: var(--taskon-quest-text-lightest, #ffffff);
+  color: var(--taskon-color-text);
   text-align: right;
 }
 
 /* Winners 行的可点击值样式 */
+
 .taskon-quest-participants-info-value--clickable {
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: var(--taskon-spacing-xs);
 }
 
 .taskon-quest-participants-info-arrow {
-  color: var(--taskon-quest-text-lighter, rgba(255, 255, 255, 0.8));
+  color: var(--taskon-color-text-secondary);
   flex-shrink: 0;
   transition: transform 0.2s;
 }
@@ -787,37 +824,38 @@
 }
 
 .taskon-quest-participants-dialog-title {
-  margin: 0 0 20px 0;
-  font-size: 22px;
+  margin: 0 0 var(--taskon-spacing-lg) 0;
+  font-size: var(--taskon-font-size-xxl);
   font-weight: 600;
-  line-height: 28px;
-  color: var(--taskon-quest-text-lightest, #ffffff);
+  line-height: 1.27;
+  color: var(--taskon-color-text);
 }
 
 .taskon-quest-participants-dialog-section {
-  margin-bottom: 20px;
+  margin-bottom: var(--taskon-spacing-lg);
 }
 
 .taskon-quest-participants-dialog-subtitle {
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 600;
-  line-height: 24px;
-  color: var(--taskon-quest-text-lightest, #ffffff);
+  line-height: 1.5;
+  color: var(--taskon-color-text);
 }
 
 .taskon-quest-participants-dialog-desc {
-  margin-top: 4px;
-  font-size: 14px;
+  margin-top: var(--taskon-spacing-xs);
+  font-size: var(--taskon-font-size);
   font-weight: 500;
-  line-height: 20px;
-  color: rgba(255, 255, 255, 0.6);
+  line-height: 1.43;
+  color: var(--taskon-color-text-tertiary);
 }
 
 /* Flow Chart */
+
 .taskon-quest-participants-dialog-chart {
   display: flex;
   align-items: flex-start;
-  margin-bottom: 30px;
+  margin-bottom: var(--taskon-spacing-lg);
 }
 
 .taskon-quest-participants-dialog-arrow-wrap {
@@ -829,52 +867,54 @@
 .taskon-quest-participants-dialog-arrow {
   width: 36px;
   height: auto;
+  color: var(--taskon-color-secondary);
 }
 
 .taskon-quest-participants-dialog-cards {
   flex: 1;
-  margin-left: 20px;
+  margin-left: var(--taskon-spacing-lg);
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: var(--taskon-spacing-xs);
 }
 
 .taskon-quest-participants-dialog-card {
-  padding: 8px 20px;
-  border-radius: 6px;
+  padding: var(--taskon-spacing-sm) var(--taskon-spacing-lg);
+  border-radius: var(--taskon-border-radius);
 }
 
 .taskon-quest-participants-dialog-card--level1 {
-  background: rgba(0, 255, 163, 0.2);
+  background: var(--taskon-color-secondary-bg);
 }
 
 .taskon-quest-participants-dialog-card--level2 {
-  background: rgba(0, 255, 163, 0.3);
+  background: var(--taskon-color-secondary-bg);
 }
 
 .taskon-quest-participants-dialog-card--level3 {
-  background: rgba(0, 255, 163, 0.4);
+  background: var(--taskon-color-secondary-bg);
 }
 
 .taskon-quest-participants-dialog-card--level4 {
-  background: rgba(0, 255, 163, 0.5);
+  background: var(--taskon-color-secondary-bg);
 }
 
 .taskon-quest-participants-dialog-card-title {
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 600;
-  line-height: 20px;
-  color: var(--taskon-quest-text-lightest, #ffffff);
+  line-height: 1.43;
+  color: var(--taskon-color-text);
 }
 
 .taskon-quest-participants-dialog-card-desc {
-  font-size: 12px;
+  font-size: var(--taskon-font-size-sm);
   font-weight: 500;
-  line-height: 16px;
-  color: rgba(255, 255, 255, 0.6);
+  line-height: 1.33;
+  color: var(--taskon-color-text-tertiary);
 }
 
 /* Confirm Button */
+
 .taskon-quest-participants-dialog-btn {
   width: 100%;
 }
@@ -907,10 +947,10 @@
 
 .taskon-quest-winner-title {
   margin: 0;
-  font-size: 22px;
+  font-size: var(--taskon-font-size-xxl);
   font-weight: 600;
-  line-height: 28px;
-  color: var(--taskon-quest-text-lightest, #ffffff);
+  line-height: 1.27;
+  color: var(--taskon-color-text);
 }
 
 /* ============================================================================
@@ -937,7 +977,9 @@
 
 .taskon-quest-winner-error p {
   margin: 0;
-  color: var(--taskon-quest-text-lighter, rgba(255, 255, 255, 0.8));
+  color: var(--taskon-color-text-secondary);
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 
 /* ============================================================================
@@ -965,17 +1007,17 @@
   position: sticky;
   top: 0;
   z-index: 1;
-  background: var(--taskon-quest-bg, #1d2123);
+  background: var(--taskon-color-bg-surface);
 }
 
 .taskon-quest-winner-table th {
   padding: 12px 16px;
   text-align: left;
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 500;
-  line-height: 20px;
-  color: var(--taskon-quest-text-lighter, rgba(255, 255, 255, 0.6));
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  line-height: 1.43;
+  color: var(--taskon-color-text-secondary);
+  border-bottom: 1px solid var(--taskon-color-border);
 }
 
 .taskon-quest-winner-table th:last-child {
@@ -984,16 +1026,16 @@
 
 .taskon-quest-winner-table td {
   padding: 12px 16px;
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 500;
-  line-height: 20px;
-  color: var(--taskon-quest-text-lightest, #ffffff);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  line-height: 1.43;
+  color: var(--taskon-color-text);
+  border-bottom: 1px solid var(--taskon-color-border-secondary);
   vertical-align: middle;
 }
 
 .taskon-quest-winner-table tr:hover td {
-  background: rgba(255, 255, 255, 0.02);
+  background: var(--taskon-color-bg-surface-strong);
 }
 
 /* ============================================================================
@@ -1003,7 +1045,7 @@
 .taskon-quest-winner-position {
   width: 80px;
   font-weight: 600;
-  color: var(--taskon-quest-primary, #cbff01);
+  color: var(--taskon-color-primary);
 }
 
 /* ============================================================================
@@ -1020,7 +1062,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: var(--taskon-quest-text-lightest, #ffffff);
+  color: var(--taskon-color-text);
 }
 
 /* ============================================================================
@@ -1035,7 +1077,7 @@
   display: inline-flex;
   flex-wrap: wrap;
   justify-content: flex-end;
-  gap: 8px;
+  gap: var(--taskon-spacing-sm);
   max-width: 300px;
 }
 
@@ -1046,7 +1088,7 @@
 .taskon-quest-winner-empty {
   padding: 40px 20px !important;
   text-align: center !important;
-  color: var(--taskon-quest-text-lighter, rgba(255, 255, 255, 0.6)) !important;
+  color: var(--taskon-color-text-tertiary) !important;
 }
 
 /* ============================================================================
@@ -1057,16 +1099,16 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 8px;
+  gap: var(--taskon-spacing-sm);
   padding: 20px;
-  color: var(--taskon-quest-text-lighter, rgba(255, 255, 255, 0.6));
+  color: var(--taskon-color-text-tertiary);
 }
 
 .taskon-quest-winner-loading-spinner {
   width: 16px;
   height: 16px;
-  border: 2px solid rgba(255, 255, 255, 0.2);
-  border-top-color: var(--taskon-quest-primary, #cbff01);
+  border: 2px solid var(--taskon-color-border);
+  border-top-color: var(--taskon-color-primary);
   border-radius: 50%;
   animation: taskon-quest-winner-spin 0.8s linear infinite;
 }
@@ -1084,22 +1126,22 @@
 .taskon-quest-winner-reward-label {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
-  padding: 4px 8px;
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 4px;
-  font-size: 12px;
+  gap: var(--taskon-spacing-xs);
+  padding: var(--taskon-spacing-xs) var(--taskon-spacing-sm);
+  background: var(--taskon-color-bg-surface-strong);
+  border-radius: var(--taskon-border-radius-sm);
+  font-size: var(--taskon-font-size-sm);
   font-weight: 500;
-  line-height: 16px;
+  line-height: 1.33;
   white-space: nowrap;
 }
 
 .taskon-quest-winner-reward-label-type {
-  color: var(--taskon-quest-text-lighter, rgba(255, 255, 255, 0.6));
+  color: var(--taskon-color-text-secondary);
 }
 
 .taskon-quest-winner-reward-label-value {
-  color: var(--taskon-quest-primary, #cbff01);
+  color: var(--taskon-color-primary);
 }
 /**
  * QuestRewards 样式
@@ -1111,14 +1153,28 @@
  * - 状态修饰：.taskon-quest-rewards-{element}--{state}
  */
 
+/*
+ * 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-quest-rewards {
+  container-type: inline-size;
   overflow: hidden;
-  border-radius: 10px;
-  background: var(--taskon-bg-card, rgba(255, 255, 255, 0.04));
+  border-radius: var(--taskon-border-radius-lg);
+  background: var(--taskon-color-bg-surface-subtle);
 }
 
 .taskon-quest-rewards-container {
@@ -1141,7 +1197,7 @@
   width: 50px;
   height: 50px;
   border-radius: 50%;
-  border: 2px solid #f688ff;
+  border: 2px solid var(--taskon-color-primary-hover);
   object-fit: cover;
   margin-right: 16px;
 }
@@ -1151,10 +1207,10 @@
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  color: var(--taskon-text-primary, #fff);
-  font-size: 22px;
+  color: var(--taskon-color-text);
+  font-size: var(--taskon-font-size-xxl);
   font-weight: 500;
-  line-height: 28px;
+  line-height: 1.27;
 }
 
 /* ============================================================================
@@ -1163,9 +1219,9 @@
 
 .taskon-quest-rewards-ranking-point {
   padding: 16px;
-  border-radius: 10px;
-  border: 1px solid var(--taskon-border-color, rgba(255, 255, 255, 0.06));
-  background: var(--taskon-bg-card, rgba(255, 255, 255, 0.04));
+  border-radius: var(--taskon-border-radius-lg);
+  border: 1px solid var(--taskon-color-border-secondary);
+  background: var(--taskon-color-bg-surface-subtle);
 }
 
 .taskon-quest-rewards-ranking-point-row {
@@ -1180,13 +1236,14 @@
 .taskon-quest-rewards-ranking-point-label {
   display: flex;
   align-items: center;
-  color: var(--taskon-text-tertiary, rgba(255, 255, 255, 0.5));
-  font-size: 16px;
+  color: var(--taskon-color-text-tertiary);
+  font-size: var(--taskon-font-size-lg);
   font-weight: 500;
-  line-height: 20px;
+  line-height: 1.25;
 }
 
 /* Tip icon margin (controlled externally as TipPopover has no internal margin) */
+
 .taskon-quest-rewards-ranking-point-tip-icon {
   margin-left: 6px;
 }
@@ -1197,42 +1254,42 @@
 }
 
 .taskon-quest-rewards-ranking-point-number {
-  color: var(--taskon-primary, #cbff01);
-  font-size: 22px;
+  color: var(--taskon-color-primary);
+  font-size: var(--taskon-font-size-xxl);
   font-weight: 700;
-  line-height: 28px;
+  line-height: 1.27;
 }
 
 .taskon-quest-rewards-ranking-point-tier {
   position: absolute;
   top: 100%;
   right: 0;
-  color: var(--taskon-text-tertiary, rgba(255, 255, 255, 0.5));
-  font-size: 13px;
+  color: var(--taskon-color-text-tertiary);
+  font-size: var(--taskon-font-size-sm);
   font-weight: 500;
-  line-height: 16px;
+  line-height: 1.33;
   white-space: nowrap;
 }
 
 .taskon-quest-rewards-ranking-point-amount {
   margin-left: auto;
-  color: var(--taskon-secondary, #00ffa3);
-  font-size: 22px;
+  color: var(--taskon-color-secondary);
+  font-size: var(--taskon-font-size-xxl);
   font-weight: 700;
-  line-height: 28px;
+  line-height: 1.27;
 }
 
 .taskon-quest-rewards-ranking-point-tip {
   text-align: right;
   margin-left: auto;
   width: 50%;
-  font-size: 12px;
-  line-height: 16px;
-  color: var(--taskon-text-tertiary, rgba(255, 255, 255, 0.5));
+  font-size: var(--taskon-font-size-sm);
+  line-height: 1.33;
+  color: var(--taskon-color-text-tertiary);
 }
 
 .taskon-quest-rewards-ranking-point-tip-highlight {
-  color: var(--taskon-primary, #cbff01);
+  color: var(--taskon-color-primary);
 }
 
 /* ============================================================================
@@ -1253,10 +1310,10 @@
 
 .taskon-quest-rewards-group-title {
   margin: 0;
-  font-size: 16px;
-  line-height: 20px;
+  font-size: var(--taskon-font-size-lg);
+  line-height: 1.25;
   font-weight: 500;
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
 }
 
 .taskon-quest-rewards-group-cards {
@@ -1270,8 +1327,8 @@
 
 .taskon-quest-rewards-card {
   margin-top: 12px;
-  background: var(--taskon-bg-card, rgba(255, 255, 255, 0.04));
-  border-radius: 8px;
+  background: var(--taskon-color-bg-surface-subtle);
+  border-radius: var(--taskon-border-radius);
   overflow: hidden;
 }
 
@@ -1280,43 +1337,49 @@
 }
 
 .taskon-quest-rewards-card--active {
-  border: 1px solid #cbff01;
+  border: 1px solid var(--taskon-color-primary);
 }
 
 /* Tier 表头（仅 PointRanking 模式） */
+
 .taskon-quest-rewards-card-tier {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
   padding: 8px 16px;
-  background: var(--taskon-bg-darkest, rgba(0, 0, 0, 0.4));
-  font-size: 16px;
-  line-height: 20px;
+  background: var(--taskon-color-bg-inset);
+  font-size: var(--taskon-font-size-lg);
+  line-height: 1.25;
 }
 
 .taskon-quest-rewards-card-tier--active {
-  background: linear-gradient(90deg, rgba(203, 255, 1, 0.9) 0%, rgba(0, 255, 163, 0.9) 100%);
+  background: linear-gradient(
+    90deg,
+    var(--taskon-color-primary) 0%,
+    var(--taskon-color-secondary) 100%
+  );
 }
 
 .taskon-quest-rewards-card-tier-label {
   font-weight: 500;
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
 }
 
 .taskon-quest-rewards-card-tier--active .taskon-quest-rewards-card-tier-label {
-  color: var(--taskon-text-inverse, #000);
+  color: var(--taskon-color-text-on-primary);
 }
 
 .taskon-quest-rewards-card-tier-range {
-  color: var(--taskon-text-tertiary, rgba(255, 255, 255, 0.5));
+  color: var(--taskon-color-text-tertiary);
 }
 
 .taskon-quest-rewards-card-tier--active .taskon-quest-rewards-card-tier-range {
-  color: var(--taskon-text-inverse-secondary, rgba(0, 0, 0, 0.6));
+  color: var(--taskon-color-text-on-primary);
 }
 
 /* 卡片主体 */
+
 .taskon-quest-rewards-card-body {
   padding: 20px;
   display: flex;
@@ -1342,7 +1405,7 @@
 }
 
 .taskon-quest-rewards-whitelist-desc-icon {
-  color: var(--taskon-text-tertiary, rgba(255, 255, 255, 0.5));
+  color: var(--taskon-color-text-tertiary);
   transition: transform 0.3s ease;
   flex-shrink: 0;
 }
@@ -1353,9 +1416,9 @@
 
 .taskon-quest-rewards-whitelist-desc-content {
   margin-top: 8px;
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--taskon-text-secondary, rgba(255, 255, 255, 0.7));
+  font-size: var(--taskon-font-size);
+  line-height: 1.43;
+  color: var(--taskon-color-text-secondary);
 }
 
 /* ============================================================================
@@ -1370,10 +1433,10 @@
 }
 
 .taskon-quest-rewards-row-label {
-  font-size: 18px;
-  line-height: 24px;
+  font-size: var(--taskon-font-size-xl);
+  line-height: 1.33;
   font-weight: 500;
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
   flex-shrink: 0;
 }
 
@@ -1381,9 +1444,9 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  font-size: 14px;
-  line-height: 16px;
-  color: var(--taskon-text-primary, #fff);
+  font-size: var(--taskon-font-size);
+  line-height: 1.14;
+  color: var(--taskon-color-text);
 }
 
 /* ============================================================================
@@ -1396,21 +1459,22 @@
 }
 
 /* Chain Icon Tooltip */
+
 .taskon-quest-rewards-chain-tooltip {
   padding: 6px 10px;
-  background: var(--taskon-bg-popover, #1a1a1a);
-  border: 1px solid var(--taskon-border-color, rgba(255, 255, 255, 0.1));
-  border-radius: 6px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-  font-size: 12px;
-  line-height: 16px;
-  color: var(--taskon-text-primary, #fff);
+  background: var(--taskon-color-bg-floating);
+  border: 1px solid var(--taskon-color-border);
+  border-radius: var(--taskon-border-radius-sm);
+  box-shadow: 0 4px 12px var(--taskon-color-bg-mask);
+  font-size: var(--taskon-font-size-sm);
+  line-height: 1.33;
+  color: var(--taskon-color-text);
   z-index: 1000;
   white-space: nowrap;
 }
 
 .taskon-quest-rewards-chain-tooltip-arrow {
-  fill: var(--taskon-bg-popover, #1a1a1a);
+  fill: var(--taskon-color-bg-floating);
 }
 
 /* ============================================================================
@@ -1427,15 +1491,19 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  font-size: 16px;
-  line-height: 20px;
+  font-size: var(--taskon-font-size-lg);
+  line-height: 1.25;
   font-weight: 600;
   margin-bottom: 20px;
   opacity: 0.9;
 }
 
 .taskon-quest-rewards-token-blindbox span:last-child {
-  background: linear-gradient(90deg, #cbff01 0%, #00ffa3 100%);
+  background: linear-gradient(
+    90deg,
+    var(--taskon-color-primary) 0%,
+    var(--taskon-color-secondary) 100%
+  );
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
@@ -1449,24 +1517,24 @@
 }
 
 .taskon-quest-rewards-token-amount {
-  font-size: 22px;
-  line-height: 28px;
-  color: var(--taskon-primary, #cbff01);
+  font-size: var(--taskon-font-size-xxl);
+  line-height: 1.27;
+  color: var(--taskon-color-primary);
 }
 
 .taskon-quest-rewards-token-name {
-  font-size: 22px;
-  line-height: 28px;
-  color: var(--taskon-primary, #cbff01);
+  font-size: var(--taskon-font-size-xxl);
+  line-height: 1.27;
+  color: var(--taskon-color-primary);
 }
 
 .taskon-quest-rewards-token-usdt-tag {
-  font-size: 12px;
-  line-height: 14px;
+  font-size: var(--taskon-font-size-sm);
+  line-height: 1.17;
   padding: 2px 6px;
-  background: var(--taskon-bg-secondary, rgba(255, 255, 255, 0.1));
-  border-radius: 4px;
-  color: var(--taskon-text-secondary, rgba(255, 255, 255, 0.7));
+  background: var(--taskon-color-secondary-bg);
+  border-radius: var(--taskon-border-radius-sm);
+  color: var(--taskon-color-text-secondary);
 }
 
 .taskon-quest-rewards-token-per {
@@ -1477,27 +1545,28 @@
 }
 
 .taskon-quest-rewards-token-per-label {
-  font-size: 14px;
-  line-height: 16px;
-  color: var(--taskon-text-tertiary, rgba(255, 255, 255, 0.5));
+  font-size: var(--taskon-font-size);
+  line-height: 1.14;
+  color: var(--taskon-color-text-tertiary);
 }
 
 .taskon-quest-rewards-token-per-value {
   margin-left: auto;
-  font-size: 14px;
-  line-height: 16px;
-  color: var(--taskon-text-secondary, rgba(255, 255, 255, 0.7));
+  font-size: var(--taskon-font-size);
+  line-height: 1.14;
+  color: var(--taskon-color-text-secondary);
 }
 
 /* BRC20 标签 */
+
 .taskon-quest-rewards-token-brc20 {
   padding: 2px 6px;
-  font-size: 12px;
-  line-height: 14px;
+  font-size: var(--taskon-font-size-sm);
+  line-height: 1.17;
   font-weight: 500;
-  color: #f97316;
-  background: rgba(249, 115, 22, 0.15);
-  border-radius: 4px;
+  color: var(--taskon-color-warning);
+  background: var(--taskon-color-warning-bg);
+  border-radius: var(--taskon-border-radius-sm);
 }
 
 /* ============================================================================
@@ -1518,10 +1587,10 @@
 .taskon-quest-rewards-minted-nft-name,
 .taskon-quest-rewards-cap-name,
 .taskon-quest-rewards-whitelist-name {
-  font-size: 22px;
-  line-height: 28px;
+  font-size: var(--taskon-font-size-xxl);
+  line-height: 1.27;
   font-weight: 600;
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -1529,9 +1598,9 @@
 }
 
 .taskon-quest-rewards-minted-nft-quantity {
-  font-size: 14px;
-  line-height: 16px;
-  color: var(--taskon-text-secondary, rgba(255, 255, 255, 0.7));
+  font-size: var(--taskon-font-size);
+  line-height: 1.14;
+  color: var(--taskon-color-text-secondary);
 }
 
 /* ============================================================================
@@ -1540,18 +1609,18 @@
 
 .taskon-quest-rewards-popover-content {
   padding: 12px 16px;
-  background: var(--taskon-bg-popover, #1a1a1a);
-  border: 1px solid var(--taskon-border-color, rgba(255, 255, 255, 0.1));
-  border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  background: var(--taskon-color-bg-floating);
+  border: 1px solid var(--taskon-color-border);
+  border-radius: var(--taskon-border-radius);
+  box-shadow: 0 4px 12px var(--taskon-color-bg-mask);
   max-width: 300px;
   z-index: 1000;
 }
 
 .taskon-quest-rewards-popover-name {
-  font-size: 14px;
-  line-height: 18px;
-  color: var(--taskon-text-primary, #fff);
+  font-size: var(--taskon-font-size);
+  line-height: 1.29;
+  color: var(--taskon-color-text);
   word-break: break-all;
 }
 
@@ -1560,10 +1629,10 @@
 }
 
 .taskon-quest-rewards-popover-address-title {
-  font-size: 14px;
-  line-height: 18px;
+  font-size: var(--taskon-font-size);
+  line-height: 1.29;
   font-weight: 500;
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
 }
 
 .taskon-quest-rewards-popover-address-row {
@@ -1582,9 +1651,9 @@
 
 .taskon-quest-rewards-popover-address-text {
   flex: 1;
-  font-size: 12px;
-  line-height: 16px;
-  color: var(--taskon-text-tertiary, rgba(255, 255, 255, 0.5));
+  font-size: var(--taskon-font-size-sm);
+  line-height: 1.33;
+  color: var(--taskon-color-text-tertiary);
   word-break: break-all;
 }
 
@@ -1592,16 +1661,16 @@
   flex-shrink: 0;
   display: flex;
   align-items: center;
-  color: var(--taskon-text-tertiary, rgba(255, 255, 255, 0.5));
+  color: var(--taskon-color-text-tertiary);
   transition: color 0.2s;
 }
 
 .taskon-quest-rewards-popover-address-row:hover .taskon-quest-rewards-popover-address-copy {
-  color: var(--taskon-primary, #cbff01);
+  color: var(--taskon-color-primary);
 }
 
 .taskon-quest-rewards-popover-arrow {
-  fill: var(--taskon-bg-popover, #1a1a1a);
+  fill: var(--taskon-color-bg-floating);
 }
 
 /* ============================================================================
@@ -1623,17 +1692,17 @@
 
 .taskon-quest-rewards-points-amount,
 .taskon-quest-rewards-exp-amount {
-  font-size: 22px;
-  line-height: 28px;
+  font-size: var(--taskon-font-size-xxl);
+  line-height: 1.27;
   font-weight: 600;
-  color: var(--taskon-primary, #cbff01);
+  color: var(--taskon-color-primary);
 }
 
 .taskon-quest-rewards-points-name,
 .taskon-quest-rewards-exp-label {
-  font-size: 22px;
-  line-height: 28px;
-  color: var(--taskon-text-primary, #fff);
+  font-size: var(--taskon-font-size-xxl);
+  line-height: 1.27;
+  color: var(--taskon-color-text);
 }
 
 /* ============================================================================
@@ -1647,9 +1716,9 @@
 }
 
 .taskon-quest-rewards-discord-role-name {
-  font-size: 22px;
-  line-height: 28px;
-  color: var(--taskon-link, #5865f2);
+  font-size: var(--taskon-font-size-xxl);
+  line-height: 1.27;
+  color: var(--taskon-color-link);
   cursor: pointer;
 }
 
@@ -1658,9 +1727,9 @@
 }
 
 .taskon-quest-rewards-discord-role-warning {
-  font-size: 12px;
-  line-height: 14px;
-  color: var(--taskon-warning, #ffc107);
+  font-size: var(--taskon-font-size-sm);
+  line-height: 1.17;
+  color: var(--taskon-color-warning);
 }
 
 /* ============================================================================
@@ -1668,9 +1737,9 @@
    ============================================================================ */
 
 .taskon-quest-rewards-winner-open {
-  font-size: 22px;
-  line-height: 28px;
-  color: var(--taskon-secondary, #00ffa3);
+  font-size: var(--taskon-font-size-xxl);
+  line-height: 1.27;
+  color: var(--taskon-color-secondary);
 }
 
 .taskon-quest-rewards-winner-fcfs {
@@ -1683,38 +1752,38 @@
 .taskon-quest-rewards-winner-fcfs-row {
   display: flex;
   align-items: baseline;
-  font-size: 18px;
-  line-height: 24px;
+  font-size: var(--taskon-font-size-xl);
+  line-height: 1.33;
 }
 
 .taskon-quest-rewards-winner-available {
-  color: var(--taskon-secondary, #00ffa3);
+  color: var(--taskon-color-secondary);
 }
 
 .taskon-quest-rewards-winner-separator {
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
 }
 
 .taskon-quest-rewards-winner-total {
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
 }
 
 .taskon-quest-rewards-winner-label {
-  font-size: 14px;
-  line-height: 16px;
-  color: var(--taskon-text-secondary, rgba(255, 255, 255, 0.7));
+  font-size: var(--taskon-font-size);
+  line-height: 1.14;
+  color: var(--taskon-color-text-secondary);
 }
 
 .taskon-quest-rewards-winner-count {
-  font-size: 22px;
-  line-height: 28px;
-  color: var(--taskon-secondary, #00ffa3);
+  font-size: var(--taskon-font-size-xxl);
+  line-height: 1.27;
+  color: var(--taskon-color-secondary);
 }
 
 .taskon-quest-rewards-winner-ranking {
-  font-size: 22px;
-  line-height: 28px;
-  color: var(--taskon-secondary, #00ffa3);
+  font-size: var(--taskon-font-size-xxl);
+  line-height: 1.27;
+  color: var(--taskon-color-secondary);
 }
 
 /* ============================================================================
@@ -1723,28 +1792,59 @@
 
 .taskon-quest-rewards-gas {
   display: flex;
-  align-items: center;
-  gap: 12px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
   margin-top: 8px;
 }
 
 .taskon-quest-rewards-gas-label {
-  font-size: 14px;
-  line-height: 16px;
-  color: var(--taskon-text-tertiary, rgba(255, 255, 255, 0.5));
+  font-size: var(--taskon-font-size);
+  line-height: 1.14;
+  color: var(--taskon-color-text-tertiary);
   white-space: nowrap;
 }
 
 .taskon-quest-rewards-gas-bar {
   flex: 1;
+  width: 100%;
   position: relative;
   height: 8px;
-  background: rgba(255, 255, 255, 0.2);
-  border-radius: 2px;
+  background: var(--taskon-color-bg-surface-strong);
+  border-radius: var(--taskon-border-radius-sm);
   overflow: hidden;
 }
 
+@supports (container-type: inline-size) {
+    @container (min-width: 751px) {
+  .taskon-quest-rewards-gas {
+    flex-direction: row;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .taskon-quest-rewards-gas-bar {
+    width: auto;
+  }
+    }
+  }
+
+@supports not (container-type: inline-size) {
+    @media (min-width: 751px) {
+  .taskon-quest-rewards-gas {
+    flex-direction: row;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .taskon-quest-rewards-gas-bar {
+    width: auto;
+  }
+    }
+  }
+
 /* 进度条靠右对齐（显示剩余量） */
+
 .taskon-quest-rewards-gas-progress {
   position: absolute;
   right: 0;
@@ -1753,18 +1853,23 @@
   display: flex;
   align-items: center;
   gap: 6px;
-  background: linear-gradient(90deg, #00ffa3 -229.89%, #cbff01 100%);
-  border-radius: 2px;
+  background: linear-gradient(
+    90deg,
+    var(--taskon-color-secondary) -229.89%,
+    var(--taskon-color-primary) 100%
+  );
+  border-radius: var(--taskon-border-radius-sm);
   overflow: hidden;
 }
 
 /* 波浪纹条纹 */
+
 .taskon-quest-rewards-gas-wave {
   width: 3px;
   flex-shrink: 0;
   height: 200%;
   transform: rotate(45deg);
-  background: rgba(0, 0, 0, 0.1);
+  background: var(--taskon-color-bg-canvas);
 }
 
 /* ============================================================================
@@ -1774,15 +1879,15 @@
 .taskon-quest-rewards-preview {
   width: 100%;
   padding: 26px;
-  border: 1px solid var(--taskon-border-color, rgba(255, 255, 255, 0.1));
-  border-radius: 8px;
+  border: 1px solid var(--taskon-color-border);
+  border-radius: var(--taskon-border-radius);
   box-sizing: border-box;
 }
 
 .taskon-quest-rewards-preview-image,
 .taskon-quest-rewards-preview-video {
   width: 100%;
-  border-radius: 8px;
+  border-radius: var(--taskon-border-radius);
   display: block;
 }
 
@@ -1794,8 +1899,8 @@
   position: relative;
   padding: 16px;
   background: transparent;
-  border-radius: 8px;
-  border: 1px solid rgba(0, 255, 163, 0.4);
+  border-radius: var(--taskon-border-radius);
+  border: 1px solid var(--taskon-color-secondary-bg);
   overflow: hidden;
 }
 
@@ -1807,49 +1912,49 @@
 }
 
 .taskon-quest-rewards-estimated-title {
-  font-size: 14px;
-  line-height: 16px;
+  font-size: var(--taskon-font-size);
+  line-height: 1.14;
   font-weight: 500;
-  color: var(--taskon-text-secondary, rgba(255, 255, 255, 0.7));
+  color: var(--taskon-color-text-secondary);
 }
 
 .taskon-quest-rewards-estimated-value {
   display: flex;
   align-items: baseline;
   gap: 4px;
-  font-size: 18px;
-  line-height: 24px;
+  font-size: var(--taskon-font-size-xl);
+  line-height: 1.33;
   font-weight: 600;
   text-align: right;
 }
 
 .taskon-quest-rewards-estimated-amount {
-  color: var(--taskon-primary, #cbff01);
+  color: var(--taskon-color-primary);
 }
 
 .taskon-quest-rewards-estimated-symbol {
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
 }
 
 .taskon-quest-rewards-estimated-formula {
-  font-size: 12px;
-  line-height: 14px;
-  color: var(--taskon-text-tertiary, rgba(255, 255, 255, 0.5));
+  font-size: var(--taskon-font-size-sm);
+  line-height: 1.17;
+  color: var(--taskon-color-text-tertiary);
   margin-top: 4px;
 }
 
 .taskon-quest-rewards-estimated-label {
-  font-size: 14px;
-  line-height: 16px;
+  font-size: var(--taskon-font-size);
+  line-height: 1.14;
   font-weight: 500;
-  color: var(--taskon-text-secondary, rgba(255, 255, 255, 0.7));
+  color: var(--taskon-color-text-secondary);
 }
 
 .taskon-quest-rewards-estimated-points {
-  font-size: 18px;
-  line-height: 24px;
+  font-size: var(--taskon-font-size-xl);
+  line-height: 1.33;
   font-weight: 700;
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
 }
 
 .taskon-quest-rewards-estimated-total {
@@ -1857,12 +1962,13 @@
   align-items: center;
   justify-content: space-between;
   gap: 8px;
-  font-size: 14px;
-  line-height: 16px;
-  color: var(--taskon-text-secondary, rgba(255, 255, 255, 0.7));
+  font-size: var(--taskon-font-size);
+  line-height: 1.14;
+  color: var(--taskon-color-text-secondary);
 }
 
 /* 未完成遮罩层 */
+
 .taskon-quest-rewards-estimated-mask {
   position: absolute;
   inset: 0;
@@ -1870,8 +1976,8 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: rgba(48, 48, 48, 0.4);
-  border-radius: 8px;
+  background: var(--taskon-color-bg-mask);
+  border-radius: var(--taskon-border-radius);
   backdrop-filter: blur(4px);
   padding: 16px;
 }
@@ -1883,18 +1989,18 @@
 
 .taskon-quest-rewards-estimated-mask-title {
   margin-top: 8px;
-  font-size: 14px;
-  line-height: 16px;
+  font-size: var(--taskon-font-size);
+  line-height: 1.14;
   font-weight: 500;
-  color: var(--taskon-secondary, #00ffa3);
+  color: var(--taskon-color-secondary);
   text-align: center;
 }
 
 .taskon-quest-rewards-estimated-mask-subtitle {
   margin-top: 4px;
-  font-size: 12px;
-  line-height: 14px;
-  color: var(--taskon-text-primary, #fff);
+  font-size: var(--taskon-font-size-sm);
+  line-height: 1.17;
+  color: var(--taskon-color-text);
   text-align: center;
 }
 
@@ -1907,10 +2013,10 @@
 }
 
 .taskon-quest-rewards-bonus-title {
-  font-size: 16px;
-  line-height: 20px;
+  font-size: var(--taskon-font-size-lg);
+  line-height: 1.25;
   font-weight: 500;
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
 }
 
 .taskon-quest-rewards-bonus-card {
@@ -1919,30 +2025,31 @@
   display: flex;
   flex-direction: column;
   gap: 24px;
-  border-radius: 10px;
-  background: var(--taskon-bg-card, rgba(255, 255, 255, 0.04));
+  border-radius: var(--taskon-border-radius-lg);
+  background: var(--taskon-color-bg-surface-subtle);
 }
 
 /* 覆盖 BaseRow 的 label 样式，匹配 Vue 版本 */
+
 .taskon-quest-rewards-bonus-card .taskon-quest-rewards-row-label {
-  color: var(--taskon-text-secondary, rgba(255, 255, 255, 0.7));
-  font-size: 16px;
-  line-height: 20px;
+  color: var(--taskon-color-text-secondary);
+  font-size: var(--taskon-font-size-lg);
+  line-height: 1.25;
 }
 
 .taskon-quest-rewards-bonus-desc {
-  color: var(--taskon-text-tertiary, rgba(255, 255, 255, 0.5));
-  font-size: 14px;
-  line-height: 18px;
+  color: var(--taskon-color-text-tertiary);
+  font-size: var(--taskon-font-size);
+  line-height: 1.29;
   text-align: right;
 }
 
 .taskon-quest-rewards-bonus-value {
   display: flex;
   align-items: flex-end;
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
   text-align: right;
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 600;
   line-height: normal;
 }
@@ -1952,167 +2059,10 @@
 }
 
 .taskon-quest-rewards-bonus-unit {
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 400;
 }
 
-/* ============================================================================
-   移动端响应式
-   ============================================================================ */
-
-@media (max-width: 750px) {
-  .taskon-quest-rewards {
-    margin-top: 4vw;
-  }
-
-  .taskon-quest-rewards-container {
-    padding: 4vw;
-    gap: 7.2vw;
-  }
-
-  /* 用户信息移动端样式 */
-  .taskon-quest-rewards-user-avatar {
-    margin-right: 2.933vw;
-    width: 10.667vw;
-    height: 10.667vw;
-  }
-
-  .taskon-quest-rewards-user-name {
-    font-size: 4.8vw;
-    line-height: 6vw;
-  }
-
-  /* 排名积分移动端样式 */
-  .taskon-quest-rewards-ranking-point {
-    padding: 3.467vw 4vw;
-  }
-
-  .taskon-quest-rewards-ranking-point-label {
-    font-size: 3.733vw;
-    line-height: 4.667vw;
-  }
-
-  .taskon-quest-rewards-ranking-point-number,
-  .taskon-quest-rewards-ranking-point-amount {
-    font-size: 4.533vw;
-    line-height: 5.733vw;
-  }
-
-  .taskon-quest-rewards-ranking-point-row--points {
-    margin-top: 6.4vw;
-  }
-
-  .taskon-quest-rewards-ranking-point-tier {
-    font-size: 2.933vw;
-    line-height: 3.733vw;
-  }
-
-  .taskon-quest-rewards-card {
-    margin-top: 1.6vw;
-  }
-
-  .taskon-quest-rewards-card-tier {
-    gap: 0.8vw;
-    padding: 0.8vw 1.333vw;
-    font-size: 3.467vw;
-    line-height: 4.4vw;
-  }
-
-  .taskon-quest-rewards-card-body {
-    padding: 1.6vw;
-    gap: 2.133vw;
-  }
-
-  .taskon-quest-rewards-row-label {
-    font-size: 3.867vw;
-    line-height: 4.8vw;
-  }
-
-  .taskon-quest-rewards-token-amount,
-  .taskon-quest-rewards-token-name,
-  .taskon-quest-rewards-nft-name,
-  .taskon-quest-rewards-minted-nft-name,
-  .taskon-quest-rewards-cap-name,
-  .taskon-quest-rewards-whitelist-name,
-  .taskon-quest-rewards-points-amount,
-  .taskon-quest-rewards-points-name,
-  .taskon-quest-rewards-exp-amount,
-  .taskon-quest-rewards-exp-label,
-  .taskon-quest-rewards-discord-role-name,
-  .taskon-quest-rewards-winner-count,
-  .taskon-quest-rewards-winner-ranking,
-  .taskon-quest-rewards-winner-open {
-    font-size: 4.267vw;
-    line-height: 5.333vw;
-  }
-
-  .taskon-quest-rewards-preview {
-    padding: 6.267vw;
-  }
-
-  /* Bonus 模块移动端样式 */
-  .taskon-quest-rewards-bonus-card {
-    margin-top: 2.667vw;
-    padding: 4vw;
-    gap: 5.333vw;
-  }
-
-  .taskon-quest-rewards-bonus-card .taskon-quest-rewards-row-label {
-    font-size: 3.467vw;
-    line-height: 4.4vw;
-  }
-
-  .taskon-quest-rewards-bonus-desc {
-    font-size: 3.2vw;
-    line-height: 4vw;
-  }
-
-  .taskon-quest-rewards-bonus-value {
-    font-size: 3.733vw;
-    line-height: 4vw;
-  }
-
-  .taskon-quest-rewards-bonus-amount {
-    margin-right: 0.8vw;
-  }
-
-  .taskon-quest-rewards-bonus-unit {
-    font-size: 3.2vw;
-  }
-
-  /* View Leaderboard 按钮移动端样式 */
-  .taskon-quest-rewards-view-leaderboard {
-    font-size: 3.2vw;
-    line-height: 4vw;
-  }
-
-  .taskon-quest-rewards-view-leaderboard-arrow {
-    margin-left: 1.867vw;
-  }
-
-  /* Gas Station 移动端样式 */
-  .taskon-quest-rewards-gas {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 2vw;
-  }
-
-  .taskon-quest-rewards-gas-label {
-    font-size: 3.2vw;
-    line-height: 4vw;
-  }
-
-  .taskon-quest-rewards-gas-bar {
-    width: 100%;
-    height: 1.6vw;
-  }
-
-  .taskon-quest-rewards-gas-wave {
-    width: 0.6vw;
-    gap: 1.2vw;
-  }
-}
-
 /* ============================================================================
    View Leaderboard 按钮（链接样式，与原版一致）
    ============================================================================ */
@@ -2125,9 +2075,9 @@
   background: none;
   border: none;
   cursor: pointer;
-  color: var(--taskon-link, #58afff);
-  font-size: 14px;
-  line-height: 18px;
+  color: var(--taskon-color-link);
+  font-size: var(--taskon-font-size);
+  line-height: 1.29;
   transition: opacity 0.2s ease;
 }
 
@@ -2140,23 +2090,15 @@
 }
 
 .taskon-quest-rewards-view-leaderboard-text {
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 400;
 }
 
 .taskon-quest-rewards-view-leaderboard-arrow {
-  font-size: 12px;
+  font-size: var(--taskon-font-size-sm);
   margin-left: 4px;
 }
 
-/* ============================================================================
-   Leaderboard 弹窗样式
-   ============================================================================ */
-
-.taskon-quest-leaderboard-modal {
-  background: var(--taskon-bg-card, #1a1a1a);
-}
-
 .taskon-quest-leaderboard-content {
   display: flex;
   flex-direction: column;
@@ -2165,15 +2107,15 @@
 
 .taskon-quest-leaderboard-title {
   margin: 0;
-  font-size: 24px;
+  font-size: var(--taskon-font-size-xxxl);
   font-weight: 600;
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
 }
 
 .taskon-quest-leaderboard-subtitle {
   margin: 0;
-  font-size: 14px;
-  color: var(--taskon-text-secondary, rgba(255, 255, 255, 0.7));
+  font-size: var(--taskon-font-size);
+  color: var(--taskon-color-text-secondary);
 }
 
 .taskon-quest-leaderboard-error {
@@ -2183,36 +2125,116 @@
   gap: 12px;
   padding: 24px;
   text-align: center;
-  color: var(--taskon-text-secondary, rgba(255, 255, 255, 0.7));
+  color: var(--taskon-color-text-secondary);
+}
+
+.taskon-quest-leaderboard-error p {
+  margin: 0;
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 
 .taskon-quest-leaderboard-table {
   margin-top: 8px;
 }
 
+/* ============================================================================
+   Leaderboard 弹窗内 Table 主题（仅作用于该弹窗）
+   统一使用最新 --taskon-color-* token
+   ============================================================================ */
+
+.taskon-quest-leaderboard-table .taskon-table__header {
+  color: var(--taskon-color-text-disabled);
+  background-color: var(--taskon-color-bg-surface-subtle);
+}
+
+.taskon-quest-leaderboard-table .taskon-table__cell {
+  color: var(--taskon-color-text);
+}
+
+.taskon-quest-leaderboard-table .taskon-table--bordered .taskon-table__row td {
+  border-top: 1px solid var(--taskon-color-border-secondary);
+  border-bottom: 1px solid var(--taskon-color-border-secondary);
+}
+
+.taskon-quest-leaderboard-table .taskon-table__row:hover {
+  background-color: var(--taskon-color-bg-surface-subtle);
+}
+
+.taskon-quest-leaderboard-table .taskon-table--striped .taskon-table__row:nth-child(even) {
+  background-color: var(--taskon-color-bg-surface-subtle);
+}
+
+.taskon-quest-leaderboard-table .taskon-table__loading,
+.taskon-quest-leaderboard-table .taskon-table__empty,
+.taskon-quest-leaderboard-table .taskon-table__empty-desc {
+  color: var(--taskon-color-text-disabled);
+}
+
+.taskon-quest-leaderboard-table .taskon-table__empty-title {
+  color: var(--taskon-color-text);
+}
+
+.taskon-quest-leaderboard-table .taskon-table__loading-spinner {
+  border-color: var(--taskon-color-text-disabled);
+  border-top-color: var(--taskon-color-primary);
+}
+
+.taskon-quest-leaderboard-table .taskon-table__loading-overlay {
+  background-color: var(--taskon-color-bg-mask);
+}
+
 .taskon-quest-leaderboard-pagination {
   display: flex;
   justify-content: center;
   margin-top: 16px;
 }
 
+/* ============================================================================
+   Leaderboard 弹窗内 Pagination 主题（仅作用于该弹窗）
+   统一使用最新 --taskon-color-* token
+   ============================================================================ */
+
+.taskon-quest-leaderboard-pagination .taskon-pagination-range,
+.taskon-quest-leaderboard-pagination .taskon-pagination-info-separator,
+.taskon-quest-leaderboard-pagination .taskon-pagination-info-total {
+  color: var(--taskon-color-text-disabled);
+}
+
+.taskon-quest-leaderboard-pagination .taskon-pagination-info-current {
+  color: var(--taskon-color-text);
+}
+
+.taskon-quest-leaderboard-pagination .taskon-pagination-btn {
+  border-color: var(--taskon-color-border) !important;
+  color: var(--taskon-color-text) !important;
+}
+
+.taskon-quest-leaderboard-pagination .taskon-pagination-btn:hover:not(:disabled) {
+  background-color: var(--taskon-color-bg-surface-subtle) !important;
+  border-color: var(--taskon-color-border-secondary) !important;
+}
+
 /* 排名徽章 */
+
 .taskon-quest-leaderboard-rank {
   display: inline-flex;
   align-items: center;
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 500;
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
 }
 
 /* Unranked / N/A 状态 */
+
 .taskon-quest-leaderboard-rank--unranked {
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 500;
-  color: var(--taskon-text-tertiary, rgba(255, 255, 255, 0.5));
+  color: var(--taskon-color-text-tertiary);
 }
 
 /* 表头带提示框的容器 */
+
 .taskon-quest-leaderboard-header {
   display: inline-flex;
   align-items: center;
@@ -2220,13 +2242,15 @@
 }
 
 /* 层级列 */
+
 .taskon-quest-leaderboard-tier {
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 500;
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
 }
 
 /* 用户单元格 */
+
 .taskon-quest-leaderboard-user {
   display: flex;
   align-items: center;
@@ -2238,29 +2262,31 @@
 
 .taskon-quest-leaderboard-user-badge {
   padding: 2px 8px;
-  font-size: 12px;
+  font-size: var(--taskon-font-size-sm);
   font-weight: 600;
-  color: var(--taskon-bg-body, #111);
-  background: var(--taskon-secondary, #00ffa3);
-  border-radius: 4px;
+  color: var(--taskon-color-text-on-primary);
+  background: var(--taskon-color-secondary);
+  border-radius: var(--taskon-border-radius-sm);
 }
 
 .taskon-quest-leaderboard-user-name {
-  font-size: 14px;
-  color: var(--taskon-text-primary, #fff);
+  font-size: var(--taskon-font-size);
+  color: var(--taskon-color-text);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 /* 积分 */
+
 .taskon-quest-leaderboard-points {
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 500;
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
 }
 
 /* 奖励 */
+
 .taskon-quest-leaderboard-reward-cell {
   display: inline-flex;
   align-items: center;
@@ -2269,52 +2295,77 @@
 }
 
 .taskon-quest-leaderboard-reward-type {
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 600;
-  color: var(--taskon-text-primary, #fff);
+  color: var(--taskon-color-text);
 }
 
 .taskon-quest-leaderboard-reward {
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 600;
-  color: var(--taskon-primary, #cbff01);
+  color: var(--taskon-color-primary);
 }
 
 .taskon-quest-leaderboard-not-qualified {
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 600;
-  color: var(--taskon-text-tertiary, rgba(255, 255, 255, 0.5));
+  color: var(--taskon-color-text-tertiary);
 }
 
 .taskon-quest-leaderboard-no-reward {
-  font-size: 14px;
-  color: var(--taskon-text-tertiary, rgba(255, 255, 255, 0.5));
+  font-size: var(--taskon-font-size);
+  color: var(--taskon-color-text-tertiary);
 }
 /**
  * OperateFooter styles
  * Following Widget naming convention: .taskon-quest-footer-*
  */
 
+/*
+ * 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
+ */
+
 /* ============================================================================
    Main Container
    ============================================================================ */
 
 .taskon-quest-footer {
-  margin-top: 20px;
+  container-type: inline-size;
+  margin-top: 0;
   position: relative;
 }
 
-@media (max-width: 750px) {
+@supports (container-type: inline-size) {
+    @container (min-width: 751px) {
   .taskon-quest-footer {
-    margin-top: 0;
+    margin-top: 20px;
+  }
+    }
+  }
+
+@supports not (container-type: inline-size) {
+    @media (min-width: 751px) {
+  .taskon-quest-footer {
+    margin-top: 20px;
+  }
+    }
   }
-}
 
 /* ============================================================================
    Status Card - New Design (v2)
    ============================================================================ */
 
 /* Container for the entire status section */
+
 .taskon-quest-footer-status {
   display: flex;
   flex-direction: column;
@@ -2322,6 +2373,7 @@
 }
 
 /* Title row: title + badge */
+
 .taskon-quest-footer-title-row {
   display: flex;
   align-items: center;
@@ -2329,78 +2381,50 @@
 }
 
 /* Badge styles */
+
 .taskon-quest-footer-badge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   height: 20px;
   padding: 0 8px;
-  border-radius: 12px;
-  font-size: 12px;
+  border-radius: var(--taskon-border-radius-lg);
+  font-size: var(--taskon-font-size-sm);
   font-weight: 600;
-  line-height: 16px;
+  line-height: 1.33;
   text-transform: uppercase;
 }
 
 .taskon-quest-footer-badge--winner {
-  color: #cbff01;
-  background: linear-gradient(
-      90deg,
-      rgba(203, 255, 1, 0.1) 0%,
-      rgba(203, 255, 1, 0.1) 100%
-    ),
-    linear-gradient(
-      90deg,
-      rgba(255, 255, 255, 0.1) 0%,
-      rgba(255, 255, 255, 0.1) 100%
-    );
+  color: var(--taskon-color-primary);
+  background: var(--taskon-color-primary-bg);
 }
 
 .taskon-quest-footer-badge--qualifier,
 .taskon-quest-footer-badge--submitter {
-  color: #1affab;
-  background: linear-gradient(
-      90deg,
-      rgba(26, 255, 171, 0.1) 0%,
-      rgba(26, 255, 171, 0.1) 100%
-    ),
-    linear-gradient(
-      90deg,
-      rgba(255, 255, 255, 0.1) 0%,
-      rgba(255, 255, 255, 0.1) 100%
-    );
+  color: var(--taskon-color-secondary);
+  background: var(--taskon-color-secondary-bg);
 }
 
 /* Dark content card */
+
 .taskon-quest-footer-card {
   display: flex;
-  gap: 12px;
-  align-items: center;
+  flex-direction: column;
+  gap: 8px;
+  align-items: stretch;
   padding: 12px;
-  border-radius: 8px;
-  background: linear-gradient(
-      90deg,
-      rgba(255, 255, 255, 0.1) 0%,
-      rgba(255, 255, 255, 0.1) 100%
-    ),
-    linear-gradient(90deg, #0d0d0d 0%, #0d0d0d 100%);
-}
-
-@media (max-width: 750px) {
-  .taskon-quest-footer-card {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 8px;
-    padding: 3.2vw;
-  }
+  border-radius: var(--taskon-border-radius);
+  background: var(--taskon-color-bg-surface-strong);
 }
 
 /* Card message text (for simple messages) */
+
 .taskon-quest-footer-card-message {
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 600;
-  line-height: 24px;
-  color: #fff;
+  line-height: 1.5;
+  color: var(--taskon-color-text);
 }
 
 /* ============================================================================
@@ -2408,6 +2432,7 @@
    ============================================================================ */
 
 /* Card content area */
+
 .taskon-quest-footer-card-content {
   display: flex;
   flex-direction: column;
@@ -2421,31 +2446,16 @@
 .taskon-quest-footer-title {
   font-size: 20px;
   font-weight: 600;
-  line-height: 28px;
-  color: #fff;
-}
-
-@media (max-width: 750px) {
-  .taskon-quest-footer-title {
-    font-size: 4.267vw;
-    line-height: 5.867vw;
-  }
+  line-height: 1.4;
+  color: var(--taskon-color-text);
 }
 
 .taskon-quest-footer-desc {
   margin-top: 2px;
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 500;
-  line-height: 18px;
-  color: rgba(255, 255, 255, 0.6);
-}
-
-@media (max-width: 750px) {
-  .taskon-quest-footer-desc {
-    margin-top: 0.533vw;
-    font-size: 3.2vw;
-    line-height: 3.733vw;
-  }
+  line-height: 1.29;
+  color: var(--taskon-color-text-tertiary);
 }
 
 /* ============================================================================
@@ -2460,18 +2470,18 @@
 .taskon-quest-footer-connect-btn {
   width: 100%;
   padding: 12px 24px;
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 600;
-  color: #000;
-  background-color: #cbff01;
+  color: var(--taskon-color-text-on-primary);
+  background-color: var(--taskon-color-primary);
   border: none;
-  border-radius: 8px;
+  border-radius: var(--taskon-border-radius);
   cursor: pointer;
   transition: background-color 0.2s ease;
 }
 
 .taskon-quest-footer-connect-btn:hover {
-  background-color: #b8e600;
+  background-color: var(--taskon-color-primary-active);
 }
 
 /* ============================================================================
@@ -2481,18 +2491,18 @@
 .taskon-quest-footer-complete-btn {
   width: 100%;
   padding: 12px 24px;
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 600;
-  color: #000;
-  background-color: #cbff01;
+  color: var(--taskon-color-text-on-primary);
+  background-color: var(--taskon-color-primary);
   border: none;
-  border-radius: 8px;
+  border-radius: var(--taskon-border-radius);
   cursor: pointer;
   transition: background-color 0.2s ease, opacity 0.2s ease;
 }
 
 .taskon-quest-footer-complete-btn:hover:not(:disabled) {
-  background-color: #b8e600;
+  background-color: var(--taskon-color-primary-active);
 }
 
 .taskon-quest-footer-complete-btn:disabled {
@@ -2500,14 +2510,8 @@
   cursor: not-allowed;
 }
 
-@media (max-width: 750px) {
-  .taskon-quest-footer-complete-btn {
-    height: 13.33vw;
-    font-weight: bold;
-  }
-}
-
 /* Complete Button Loading State */
+
 .taskon-quest-footer-complete-btn--loading {
   pointer-events: none;
 }
@@ -2522,8 +2526,8 @@
 .taskon-quest-footer-complete-btn-spinner {
   width: 16px;
   height: 16px;
-  border: 2px solid rgba(0, 0, 0, 0.2);
-  border-top-color: #000;
+  border: 2px solid var(--taskon-color-border-secondary);
+  border-top-color: var(--taskon-color-text-on-primary);
   border-radius: 50%;
   animation: taskon-spin 0.8s linear infinite;
 }
@@ -2547,16 +2551,9 @@
 }
 
 .taskon-quest-footer-earned-hint {
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 500;
-  color: rgba(0, 0, 0, 0.6);
-}
-
-@media (max-width: 750px) {
-  .taskon-quest-footer-earned-placeholder {
-    margin-top: 2vw;
-    gap: 2.267vw;
-  }
+  color: var(--taskon-color-text-tertiary);
 }
 
 /* ============================================================================
@@ -2571,12 +2568,6 @@
   margin-top: 0;
 }
 
-@media (max-width: 750px) {
-  .taskon-quest-footer-earned {
-    gap: 0;
-  }
-}
-
 .taskon-quest-footer-earned-list {
   display: flex;
   flex-direction: column;
@@ -2584,19 +2575,15 @@
 }
 
 /* Single reward inner card */
+
 .taskon-quest-footer-earned-single {
   display: flex;
   flex-direction: column;
   gap: 0;
   padding: 8px;
-  border-radius: 8px;
-  border: 1px solid rgba(255, 255, 255, 0.04);
-  background: linear-gradient(
-      90deg,
-      rgba(255, 255, 255, 0.04) 0%,
-      rgba(255, 255, 255, 0.04) 100%
-    ),
-    linear-gradient(90deg, #0d0d0d 0%, #0d0d0d 100%);
+  border-radius: var(--taskon-border-radius);
+  border: 1px solid var(--taskon-color-border-secondary);
+  background: var(--taskon-color-bg-surface-strong);
 }
 
 .taskon-quest-footer-earned-single-row {
@@ -2619,21 +2606,22 @@
 }
 
 .taskon-quest-footer-earned-single-type {
-  font-size: 18px;
+  font-size: var(--taskon-font-size-xl);
   font-weight: 600;
-  line-height: 24px;
-  color: #fff;
+  line-height: 1.33;
+  color: var(--taskon-color-text);
 }
 
 .taskon-quest-footer-earned-single-name {
-  font-size: 12px;
+  font-size: var(--taskon-font-size-sm);
   font-weight: 500;
   line-height: normal;
-  color: rgba(255, 255, 255, 0.4);
+  color: var(--taskon-color-text-disabled);
   text-transform: capitalize;
 }
 
 /* Multi reward row */
+
 .taskon-quest-footer-earned-multi {
   display: flex;
   align-items: center;
@@ -2641,39 +2629,45 @@
 }
 
 .taskon-quest-footer-earned-multi-text {
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
+  font-weight: 600;
+  line-height: 1.5;
+  color: var(--taskon-color-text);
+}
+
+/* Redirect mode row (same layout as multi) */
+
+.taskon-quest-footer-earned-redirect {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.taskon-quest-footer-earned-redirect-text {
+  font-size: var(--taskon-font-size-lg);
   font-weight: 600;
-  line-height: 24px;
-  color: #fff;
+  line-height: 1.5;
+  color: var(--taskon-color-text);
+  flex: 1;
 }
 
 /* Hide first reward on mobile when has multiple rewards */
-@media (max-width: 750px) {
-  .taskon-quest-footer-earned-first--hide-mobile {
-    display: none;
-  }
+
+.taskon-quest-footer-earned-first--hide-mobile {
+  display: none;
 }
 
 .taskon-quest-footer-earned-more {
   display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
   flex: 1;
-  gap: 4px;
+  gap: 12px;
   overflow: hidden;
-  border-radius: 4px;
-  background-color: #000;
-  padding: 4px 8px;
-}
-
-@media (max-width: 750px) {
-  .taskon-quest-footer-earned-more {
-    flex-direction: row;
-    align-items: center;
-    gap: 3vw;
-    padding: 2vw;
-  }
+  border-radius: var(--taskon-border-radius-sm);
+  background-color: var(--taskon-color-bg-inset);
+  padding: 8px;
 }
 
 /* ============================================================================
@@ -2685,17 +2679,11 @@
   flex-direction: column;
   justify-content: center;
   flex: 1;
-  border-radius: 4px;
-  background-color: #000;
+  border-radius: var(--taskon-border-radius-sm);
+  background-color: var(--taskon-color-bg-inset);
   padding: 4px 8px;
 }
 
-@media (max-width: 750px) {
-  .taskon-quest-footer-reward {
-    padding: 2vw;
-  }
-}
-
 /* ============================================================================
    Base Info (for future implementation)
    ============================================================================ */
@@ -2704,13 +2692,7 @@
   display: flex;
   align-items: center;
   gap: 4px;
-  font-size: 18px;
-}
-
-@media (max-width: 750px) {
-  .taskon-quest-footer-reward-info {
-    gap: 2vw;
-  }
+  font-size: var(--taskon-font-size-xl);
 }
 
 .taskon-quest-footer-reward-info img {
@@ -2720,23 +2702,16 @@
   object-fit: cover;
 }
 
-@media (max-width: 750px) {
-  .taskon-quest-footer-reward-info img {
-    height: 8vw;
-    width: 8vw;
-  }
-}
-
 .taskon-quest-footer-reward-amount {
-  color: #cbff01;
+  color: var(--taskon-color-primary);
 }
 
 .taskon-quest-footer-reward-type {
-  color: #fff;
+  color: var(--taskon-color-text);
 }
 
 .taskon-quest-footer-reward-name {
-  color: #cbff01;
+  color: var(--taskon-color-primary);
 }
 
 /* ============================================================================
@@ -2747,14 +2722,14 @@
   display: flex;
   align-items: center;
   gap: 4px;
-  font-size: 14px;
-  color: rgba(255, 255, 255, 0.6);
+  font-size: var(--taskon-font-size);
+  color: var(--taskon-color-text-tertiary);
   cursor: pointer;
   transition: color 0.2s ease;
 }
 
 .taskon-quest-footer-action-btn:not(.taskon-quest-footer-action-btn--disabled):hover {
-  color: rgba(255, 255, 255, 0.8);
+  color: var(--taskon-color-text-secondary);
 }
 
 .taskon-quest-footer-action-btn--disabled {
@@ -2767,18 +2742,18 @@
 
 .taskon-quest-footer-claim-btn {
   padding: 4px 12px;
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 600;
-  color: #000;
-  background-color: #cbff01;
+  color: var(--taskon-color-text-on-primary);
+  background-color: var(--taskon-color-primary);
   border: none;
-  border-radius: 4px;
+  border-radius: var(--taskon-border-radius-sm);
   cursor: pointer;
   transition: background-color 0.2s ease, opacity 0.2s ease;
 }
 
 .taskon-quest-footer-claim-btn:hover:not(:disabled) {
-  background-color: #b8e600;
+  background-color: var(--taskon-color-primary-active);
 }
 
 .taskon-quest-footer-claim-btn:disabled {
@@ -2793,8 +2768,8 @@
 .taskon-quest-footer-claim-btn-spinner {
   width: 14px;
   height: 14px;
-  border: 2px solid rgba(0, 0, 0, 0.2);
-  border-top-color: #000;
+  border: 2px solid var(--taskon-color-border-secondary);
+  border-top-color: var(--taskon-color-text-on-primary);
   border-radius: 50%;
   animation: taskon-spin 0.8s linear infinite;
 }
@@ -2804,9 +2779,9 @@
    ============================================================================ */
 
 .taskon-quest-footer-earned-more-text {
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 600;
-  color: #fff;
+  color: var(--taskon-color-text);
 }
 
 /* ============================================================================
@@ -2834,11 +2809,11 @@
   display: inline-flex;
   align-items: center;
   padding: 2px 6px;
-  font-size: 12px;
+  font-size: var(--taskon-font-size-sm);
   font-weight: 500;
-  color: #000;
-  background-color: rgba(203, 255, 1, 0.8);
-  border-radius: 2px;
+  color: var(--taskon-color-text-on-primary);
+  background-color: var(--taskon-color-primary);
+  border-radius: var(--taskon-border-radius-sm);
 }
 
 .taskon-quest-footer-reward-badge-icon {
@@ -2848,27 +2823,12 @@
   object-fit: cover;
 }
 
-@media (max-width: 750px) {
-  .taskon-quest-footer-reward-badge-icon {
-    margin-left: 1.067vw;
-    width: 3.2vw;
-    height: 3.2vw;
-  }
-}
-
 .taskon-quest-footer-reward-badge-line {
   margin-left: 4px;
   width: 1px;
   height: 10px;
   opacity: 0.1;
-  background: #d9d9d9;
-}
-
-@media (max-width: 750px) {
-  .taskon-quest-footer-reward-badge-line {
-    margin-left: 0.8vw;
-    height: 2.267vw;
-  }
+  background: var(--taskon-color-border-secondary);
 }
 
 /* ============================================================================
@@ -2879,15 +2839,15 @@
   display: flex;
   align-items: center;
   gap: 4px;
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
 }
 
 .taskon-quest-footer-reward-tx-label {
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--taskon-color-text-tertiary);
 }
 
 .taskon-quest-footer-reward-tx-link {
-  color: #fff;
+  color: var(--taskon-color-text);
   text-decoration: none;
 }
 
@@ -2901,8 +2861,8 @@
 
 .taskon-quest-footer-reward-dropping {
   margin-top: 4px;
-  font-size: 14px;
-  color: rgba(255, 255, 255, 0.6);
+  font-size: var(--taskon-font-size);
+  color: var(--taskon-color-text-tertiary);
 }
 
 /* ============================================================================
@@ -2916,19 +2876,12 @@
   object-fit: cover;
 }
 
-@media (max-width: 750px) {
-  .taskon-quest-footer-reward-chain-icon {
-    width: 8vw;
-    height: 8vw;
-  }
-}
-
 /* ============================================================================
    Detail Panel Dialog
    ============================================================================ */
 
 .taskon-quest-footer-detail-dialog {
-  background-color: #1a1a1a;
+  background-color: var(--taskon-color-bg-surface);
 }
 
 .taskon-quest-footer-detail-panel {
@@ -2936,31 +2889,18 @@
 }
 
 .taskon-quest-footer-detail-title {
-  font-size: 22px;
+  font-size: var(--taskon-font-size-xxl);
   font-weight: 600;
-  color: #fff;
+  color: var(--taskon-color-text);
   margin: 0 0 20px 0;
 }
 
-@media (max-width: 750px) {
-  .taskon-quest-footer-detail-title {
-    font-size: 4.8vw;
-    margin-bottom: 4vw;
-  }
-}
-
 .taskon-quest-footer-detail-content {
   display: flex;
   flex-direction: column;
   gap: 24px;
 }
 
-@media (max-width: 750px) {
-  .taskon-quest-footer-detail-content {
-    gap: 5vw;
-  }
-}
-
 /* ============================================================================
    Selection Item
    ============================================================================ */
@@ -2973,16 +2913,10 @@
   margin-top: 24px;
 }
 
-@media (max-width: 750px) {
-  .taskon-quest-footer-selection-item + .taskon-quest-footer-selection-item {
-    margin-top: 5vw;
-  }
-}
-
 .taskon-quest-footer-selection-label {
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 500;
-  color: rgba(255, 255, 255, 0.8);
+  color: var(--taskon-color-text-secondary);
 }
 
 .taskon-quest-footer-selection-rewards {
@@ -2992,26 +2926,21 @@
   gap: 24px;
 }
 
-@media (max-width: 750px) {
-  .taskon-quest-footer-selection-rewards {
-    margin-top: 2vw;
-    gap: 5vw;
-  }
-}
-
 /* Selection Item - Transparent reward card background */
+
 .taskon-quest-footer-selection-rewards .taskon-quest-footer-reward {
   background: transparent;
 }
 
 /* Selection Failed */
+
 .taskon-quest-footer-selection-failed {
   display: flex;
   align-items: center;
   gap: 6px;
-  font-size: 14px;
-  line-height: 18px;
-  color: rgba(255, 255, 255, 0.6);
+  font-size: var(--taskon-font-size);
+  line-height: 1.29;
+  color: var(--taskon-color-text-tertiary);
 }
 
 .taskon-quest-footer-selection-failed-icon {
@@ -3020,14 +2949,15 @@
 }
 
 /* Selection Wait */
+
 .taskon-quest-footer-selection-wait {
   display: flex;
   align-items: center;
   gap: 8px;
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 500;
-  line-height: 16px;
-  color: #fff;
+  line-height: 1.14;
+  color: var(--taskon-color-text);
 }
 
 .taskon-quest-footer-selection-wait-icon {
@@ -3040,24 +2970,72 @@
    ============================================================================ */
 
 .taskon-quest-footer-detail-bonus {
-  margin-top: 24px;
-  padding-top: 24px;
+  margin-top: 20px;
+  padding-top: 0;
   display: flex;
-  border-top: 1px solid rgba(255, 255, 255, 0.06);
+  border-top: none;
 }
 
-@media (max-width: 750px) {
+@supports (container-type: inline-size) {
+    @container (min-width: 751px) {
+  .taskon-quest-footer-card {
+    flex-direction: row;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .taskon-quest-footer-earned-first--hide-mobile {
+    display: flex;
+  }
+
+  .taskon-quest-footer-earned-more {
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 4px;
+    padding: 4px 8px;
+  }
+
   .taskon-quest-footer-detail-bonus {
-    margin-top: 5vw;
-    padding-top: 0;
-    border-top: none;
+    margin-top: 24px;
+    padding-top: 24px;
+    border-top: 1px solid var(--taskon-color-border-secondary);
+  }
+    }
+  }
+
+@supports not (container-type: inline-size) {
+    @media (min-width: 751px) {
+  .taskon-quest-footer-card {
+    flex-direction: row;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .taskon-quest-footer-earned-first--hide-mobile {
+    display: flex;
+  }
+
+  .taskon-quest-footer-earned-more {
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 4px;
+    padding: 4px 8px;
+  }
+
+  .taskon-quest-footer-detail-bonus {
+    margin-top: 24px;
+    padding-top: 24px;
+    border-top: 1px solid var(--taskon-color-border-secondary);
+  }
+    }
   }
-}
 
 .taskon-quest-footer-detail-bonus-label {
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 500;
-  color: rgba(255, 255, 255, 0.8);
+  color: var(--taskon-color-text-secondary);
 }
 
 .taskon-quest-footer-detail-bonus-right {
@@ -3066,22 +3044,16 @@
 }
 
 .taskon-quest-footer-detail-bonus-item {
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 600;
   text-align: right;
-  color: #fff;
+  color: var(--taskon-color-text);
 }
 
 .taskon-quest-footer-detail-bonus-item + .taskon-quest-footer-detail-bonus-item {
   margin-top: 8px;
 }
 
-@media (max-width: 750px) {
-  .taskon-quest-footer-detail-bonus-item + .taskon-quest-footer-detail-bonus-item {
-    margin-top: 2vw;
-  }
-}
-
 /* ============================================================================
    Action Button - Arrow icon
    ============================================================================ */
@@ -3092,6 +3064,7 @@
 }
 
 /* Link style for ActionButton */
+
 a.taskon-quest-footer-action-btn {
   text-decoration: none;
 }
@@ -3115,22 +3088,25 @@ a.taskon-quest-footer-action-btn {
 .taskon-task-validation-dialog-icon {
   width: 48px;
   height: 48px;
+  color: var(--taskon-color-warning);
 }
 
 .taskon-task-validation-dialog-message {
   margin: 0;
   margin-bottom: 16px;
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   line-height: 1.5;
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--taskon-color-text);
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 
 .taskon-task-validation-dialog-progress {
   margin: 0;
   margin-bottom: 16px;
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   line-height: 1.5;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--taskon-color-text-tertiary);
 }
 
 .taskon-task-validation-dialog-btn {
@@ -3138,10 +3114,10 @@ a.taskon-quest-footer-action-btn {
   max-width: 200px;
   padding: 12px 24px;
   border: none;
-  border-radius: 8px;
-  background: #cbff01;
-  color: #000;
-  font-size: 16px;
+  border-radius: var(--taskon-border-radius);
+  background: var(--taskon-color-primary);
+  color: var(--taskon-color-text-on-primary);
+  font-size: var(--taskon-font-size-lg);
   font-weight: 600;
   cursor: pointer;
   transition: opacity 0.2s ease;
@@ -3166,9 +3142,9 @@ a.taskon-quest-footer-action-btn {
 .taskon-reward-bind-tip {
   margin: 0;
   margin-bottom: 20px;
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   line-height: 1.6;
-  color: rgba(255, 255, 255, 0.7);
+  color: var(--taskon-color-text-tertiary);
 }
 
 .taskon-reward-bind-list {
@@ -3182,28 +3158,28 @@ a.taskon-quest-footer-action-btn {
   align-items: center;
   justify-content: space-between;
   padding: 12px 16px;
-  background: rgba(255, 255, 255, 0.05);
-  border-radius: 8px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: var(--taskon-color-bg-surface-strong);
+  border-radius: var(--taskon-border-radius);
+  border: 1px solid var(--taskon-color-border);
 }
 
 .taskon-reward-bind-item--bound {
-  border-color: rgba(26, 255, 171, 0.3);
-  background: rgba(26, 255, 171, 0.05);
+  border-color: var(--taskon-color-secondary);
+  background: var(--taskon-color-secondary-bg);
 }
 
 .taskon-reward-bind-item-label {
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 500;
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--taskon-color-text);
 }
 
 .taskon-reward-bind-item-status {
   display: flex;
   align-items: center;
   gap: 6px;
-  font-size: 13px;
-  color: #1affab;
+  font-size: var(--taskon-font-size-sm);
+  color: var(--taskon-color-secondary);
 }
 
 .taskon-reward-bind-item-btn {
@@ -3212,10 +3188,10 @@ a.taskon-quest-footer-action-btn {
   gap: 6px;
   padding: 8px 16px;
   border: none;
-  border-radius: 6px;
-  background: #cbff01;
-  color: #000;
-  font-size: 13px;
+  border-radius: var(--taskon-border-radius-sm);
+  background: var(--taskon-color-primary);
+  color: var(--taskon-color-text-on-primary);
+  font-size: var(--taskon-font-size-sm);
   font-weight: 600;
   cursor: pointer;
   transition: opacity 0.2s ease;
@@ -3249,19 +3225,19 @@ a.taskon-quest-footer-action-btn {
   width: 100%;
   margin-top: 20px;
   padding: 14px 24px;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 8px;
+  border: 1px solid var(--taskon-color-border);
+  border-radius: var(--taskon-border-radius);
   background: transparent;
-  color: rgba(255, 255, 255, 0.9);
-  font-size: 14px;
+  color: var(--taskon-color-text);
+  font-size: var(--taskon-font-size);
   font-weight: 500;
   cursor: pointer;
   transition: all 0.2s ease;
 }
 
 .taskon-reward-bind-skip-btn:hover {
-  background: rgba(255, 255, 255, 0.05);
-  border-color: rgba(255, 255, 255, 0.3);
+  background: var(--taskon-color-bg-surface-strong);
+  border-color: var(--taskon-color-border-secondary);
 }
 /**
  * DiscordBindDialog Styles
@@ -3288,9 +3264,9 @@ a.taskon-quest-footer-action-btn {
 .taskon-discord-bind-dialog-desc {
   margin: 0;
   margin-bottom: 24px;
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   line-height: 1.6;
-  color: rgba(255, 255, 255, 0.7);
+  color: var(--taskon-color-text-tertiary);
 }
 
 .taskon-discord-bind-dialog-buttons {
@@ -3303,8 +3279,8 @@ a.taskon-quest-footer-action-btn {
 .taskon-discord-bind-dialog-btn {
   width: 100%;
   padding: 14px 24px;
-  border-radius: 8px;
-  font-size: 14px;
+  border-radius: var(--taskon-border-radius);
+  font-size: var(--taskon-font-size);
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s ease;
@@ -3312,8 +3288,8 @@ a.taskon-quest-footer-action-btn {
 
 .taskon-discord-bind-dialog-btn--primary {
   border: none;
-  background: #cbff01;
-  color: #000;
+  background: var(--taskon-color-primary);
+  color: var(--taskon-color-text-on-primary);
 }
 
 .taskon-discord-bind-dialog-btn--primary:hover {
@@ -3321,61 +3297,65 @@ a.taskon-quest-footer-action-btn {
 }
 
 .taskon-discord-bind-dialog-btn--secondary {
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  border: 1px solid var(--taskon-color-border);
   background: transparent;
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--taskon-color-text);
 }
 
 .taskon-discord-bind-dialog-btn--secondary:hover {
-  background: rgba(255, 255, 255, 0.05);
-  border-color: rgba(255, 255, 255, 0.3);
+  background: var(--taskon-color-bg-surface-strong);
+  border-color: var(--taskon-color-border-secondary);
 }
 /**
  * WinnersRow 组件样式
  * 与 QuestRewards 卡片样式保持一致
  */
 
-/* WinnersRow 容器 - 纯色背景，与 reward 卡片一致 */
+/* WinnersRow 容器 - 使用主题背景层级 */
+
 .taskon-quest-winners-row {
   display: flex;
   align-items: center;
   width: 100%;
   padding: 16px;
-  border-radius: 10px;
+  border-radius: var(--taskon-border-radius-lg);
   border: none;
   cursor: pointer;
-  background: rgba(255, 255, 255, 0.04);
+  background: var(--taskon-color-bg-surface-subtle);
   transition: background-color 0.2s ease;
 }
 
 .taskon-quest-winners-row:hover {
-  background: rgba(255, 255, 255, 0.08);
+  background: var(--taskon-color-bg-surface-strong);
 }
 
 /* Winners 标签 */
+
 .taskon-quest-winners-row-label {
-  font-size: 18px;
+  font-size: var(--taskon-font-size-xl);
   font-weight: 500;
-  line-height: 23px;
-  color: #ffffff;
+  line-height: 1.28;
+  color: var(--taskon-color-text);
 }
 
 /* 数量 */
+
 .taskon-quest-winners-row-count {
   flex: 1;
   margin-left: 8px;
-  font-size: 18px;
+  font-size: var(--taskon-font-size-xl);
   font-weight: 600;
-  line-height: 23px;
+  line-height: 1.28;
   text-align: left;
-  color: #00ffa3;
+  color: var(--taskon-color-secondary);
 }
 
 /* 右箭头图标 */
+
 .taskon-quest-winners-row-arrow {
   width: 16px;
   height: 16px;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--taskon-color-text-secondary);
   flex-shrink: 0;
 }
 /**
@@ -3391,31 +3371,33 @@ a.taskon-quest-footer-action-btn {
 /* ==========================================================================
    Container - Match reward module style
    ========================================================================== */
+
 .taskon-winners {
-  border-radius: 10px;
-  background: var(--taskon-bg-card, rgba(255, 255, 255, 0.04));
+  border-radius: var(--taskon-border-radius-lg);
+  background: var(--taskon-color-bg-surface-subtle);
   overflow: hidden;
 }
 
 /* ==========================================================================
    Status Alert (POW Reviewing / Drawing Winners)
    ========================================================================== */
+
 .taskon-winners-alert {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 16px;
-  background: rgba(255, 255, 255, 0.05);
-  font-size: 16px;
+  background: var(--taskon-color-bg-surface-strong);
+  font-size: var(--taskon-font-size-lg);
   font-weight: 500;
-  color: rgba(255, 255, 255, 0.7);
+  color: var(--taskon-color-text-secondary);
   text-decoration: none;
   transition: color 0.2s ease;
 }
 
 .taskon-winners-alert:hover {
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--taskon-color-text);
 }
 
 .taskon-winners-alert-icon {
@@ -3430,7 +3412,7 @@ a.taskon-quest-footer-action-btn {
 
 .taskon-winners-alert-community {
   font-weight: 600;
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--taskon-color-text);
 }
 
 .taskon-winners-alert-link-icon {
@@ -3442,34 +3424,36 @@ a.taskon-quest-footer-action-btn {
 /* ==========================================================================
    POW Review Info Card
    ========================================================================== */
+
 .taskon-winners-content {
   padding: 16px;
 }
 
 .taskon-winners-pow-info {
-  font-size: 12px;
+  font-size: var(--taskon-font-size-sm);
   line-height: 1.5;
-  color: rgba(255, 212, 101, 0.6);
+  color: var(--taskon-color-warning);
   margin-bottom: 16px;
 }
 
 .taskon-winners-pow-info-community {
   font-weight: 500;
-  color: #ffd465;
+  color: var(--taskon-color-warning);
 }
 
 .taskon-winners-pow-info-only {
   font-weight: 500;
-  color: #ffd465;
+  color: var(--taskon-color-warning);
 }
 
 /* ==========================================================================
    Status Info Card - Match reward module card style
    ========================================================================== */
+
 .taskon-winners-card {
   padding: 16px;
-  border-radius: 8px;
-  background: var(--taskon-bg-card, rgba(255, 255, 255, 0.04));
+  border-radius: var(--taskon-border-radius);
+  background: var(--taskon-color-bg-surface-subtle);
   display: flex;
   flex-direction: column;
   gap: 16px;
@@ -3479,22 +3463,22 @@ a.taskon-quest-footer-action-btn {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
 }
 
 .taskon-winners-card-label {
   font-weight: 500;
-  color: rgba(255, 255, 255, 0.7);
+  color: var(--taskon-color-text-secondary);
 }
 
 .taskon-winners-card-value {
   font-weight: 500;
-  color: #9aff73;
+  color: var(--taskon-color-success);
 }
 
 .taskon-winners-card-value--primary {
   font-weight: 600;
-  color: var(--taskon-primary, #cbff01);
+  color: var(--taskon-color-primary);
 }
 
 /* ==========================================================================
@@ -3502,6 +3486,7 @@ a.taskon-quest-footer-action-btn {
    ========================================================================== */
 
 /* Ensure winners row integrates well with status card */
+
 .taskon-winners-card .taskon-quest-winners-row {
   padding: 0;
   background: transparent;
@@ -3512,50 +3497,28 @@ a.taskon-quest-footer-action-btn {
  * @design 参考 Figma 设计稿
  */
 
-/* ============================================================================
-   CSS 变量定义
-   ============================================================================ */
+/*
+ * Responsive base styles
+ *
+ * Keep mobile breakpoints and fallback patterns centralized here.
+ * Components should reuse these mixins instead of duplicating query logic.
+ */
 
-.taskon-quest {
-  /* 颜色系统 */
-  --taskon-quest-bg-body: #111111;
-  --taskon-quest-text-lightest: #ffffff;
-  --taskon-quest-text-lighter: rgba(255, 255, 255, 0.8);
-  --taskon-quest-text-light: rgba(255, 255, 255, 0.6);
-  --taskon-quest-text-dark: rgba(255, 255, 255, 0.4);
-  --taskon-quest-text-darkest: rgba(255, 255, 255, 0.1);
-  --taskon-quest-text-invisible: rgba(255, 255, 255, 0.04);
-  --taskon-quest-primary: #cbff01;
-  --taskon-quest-secondary: #1affab;
-  --taskon-quest-link: #58afff;
-  --taskon-quest-button-primary-color: #000000;
-
-  /* 间距系统 */
-  --taskon-quest-spacing-xxs: 4px;
-  --taskon-quest-spacing-xs: 8px;
-  --taskon-quest-spacing-s: 12px;
-  --taskon-quest-spacing-m: 16px;
-  --taskon-quest-spacing-l: 20px;
-  --taskon-quest-spacing-xl: 24px;
-  --taskon-quest-spacing-xxl: 32px;
-  --taskon-quest-spacing-3xl: 40px;
-
-  /* 圆角系统 */
-  --taskon-quest-radius-s: 4px;
-  --taskon-quest-radius-m: 6px;
-  --taskon-quest-radius-l: 8px;
-  --taskon-quest-radius-xl: 12px;
-}
+/*
+ * Desktop-up mixin:
+ * 1) Enable desktop enhancement in wider containers
+ * 2) Keep viewport media query as fallback
+ */
 
 /* ============================================================================
    Quest Widget 根容器
    ============================================================================ */
 
 .taskon-quest {
-  font-size: 16px;
+  container-type: inline-size;
+  font-size: var(--taskon-font-size-lg);
   line-height: 1.5;
-  color: var(--taskon-quest-text-lightest);
-  background-color: var(--taskon-quest-bg-body);
+  color: var(--taskon-color-text);
 }
 
 /* ============================================================================
@@ -3564,26 +3527,139 @@ a.taskon-quest-footer-action-btn {
 
 .taskon-quest-loading {
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 48px 24px;
-  gap: 12px;
-  color: var(--taskon-quest-text-light);
+  width: 100%;
 }
 
-.taskon-quest-loading-spinner {
-  width: 32px;
-  height: 32px;
-  border: 3px solid var(--taskon-quest-text-darkest);
-  border-top-color: var(--taskon-quest-primary);
-  border-radius: 50%;
-  animation: taskon-quest-spin 1s linear infinite;
+.taskon-quest-skeleton-layout {
+  width: 100%;
 }
 
-@keyframes taskon-quest-spin {
+.taskon-quest-skeleton-content,
+.taskon-quest-skeleton-sidebar {
+  width: 100%;
+  gap: var(--taskon-spacing-md);
+}
+
+.taskon-quest-skeleton-group {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.taskon-quest-skeleton-group--tasks {
+  gap: 14px;
+}
+
+.taskon-quest-skeleton-content-divider {
+  margin: 8px 0;
+}
+
+.taskon-quest-skeleton-block {
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--taskon-border-radius-lg);
+  background: var(--taskon-color-bg-surface-subtle);
+}
+
+.taskon-quest-skeleton-block::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  transform: translateX(-100%);
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    var(--taskon-color-bg-surface-strong) 50%,
+    transparent 100%
+  );
+  animation: taskon-quest-skeleton-shimmer 1.4s ease-in-out infinite;
+}
+
+.taskon-quest-skeleton-title {
+  width: min(72%, 420px);
+  height: 34px;
+}
+
+.taskon-quest-skeleton-meta {
+  width: min(44%, 280px);
+  height: 20px;
+}
+
+.taskon-quest-skeleton-banner {
+  width: 100%;
+  height: 168px;
+  border-radius: var(--taskon-border-radius-lg);
+}
+
+.taskon-quest-skeleton-description {
+  width: 100%;
+  height: 14px;
+}
+
+.taskon-quest-skeleton-description--short {
+  width: 66%;
+}
+
+.taskon-quest-skeleton-section-title {
+  width: 128px;
+  height: 28px;
+}
+
+.taskon-quest-skeleton-progress {
+  width: 182px;
+  height: 20px;
+  border-radius: 999px;
+}
+
+.taskon-quest-skeleton-task {
+  width: 100%;
+  height: 74px;
+  border-radius: var(--taskon-border-radius-lg);
+}
+
+.taskon-quest-skeleton-complete-button {
+  width: 100%;
+  height: 48px;
+  border-radius: var(--taskon-border-radius);
+}
+
+.taskon-quest-skeleton-divider {
+  background: var(--taskon-color-border-secondary);
+}
+
+.taskon-quest-skeleton-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 20px;
+  border: 1px solid var(--taskon-color-border-secondary);
+  border-radius: var(--taskon-border-radius-lg);
+}
+
+.taskon-quest-skeleton-panel-title {
+  width: 45%;
+  height: 22px;
+}
+
+.taskon-quest-skeleton-panel-line {
+  width: 100%;
+  height: 14px;
+}
+
+.taskon-quest-skeleton-panel-line--short {
+  width: 72%;
+}
+
+@keyframes taskon-quest-skeleton-shimmer {
   to {
-    transform: rotate(360deg);
+    transform: translateX(100%);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .taskon-quest-skeleton-block::after {
+    animation: none;
   }
 }
 
@@ -3606,18 +3682,20 @@ a.taskon-quest-footer-action-btn {
 }
 
 .taskon-quest-error-message {
-  color: #ef4444;
-  font-size: 14px;
+  color: var(--taskon-color-error);
+  font-size: var(--taskon-font-size);
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 
 .taskon-quest-error-retry {
   margin-top: 8px;
   padding: 8px 16px;
-  font-size: 14px;
-  color: var(--taskon-quest-text-lightest);
-  background-color: var(--taskon-quest-primary);
+  font-size: var(--taskon-font-size);
+  color: var(--taskon-color-text);
+  background-color: var(--taskon-color-primary);
   border: none;
-  border-radius: var(--taskon-quest-radius-m);
+  border-radius: var(--taskon-border-radius);
   cursor: pointer;
   transition: background-color 0.2s;
 }
@@ -3635,8 +3713,8 @@ a.taskon-quest-footer-action-btn {
   align-items: center;
   justify-content: center;
   padding: 48px 24px;
-  color: var(--taskon-quest-text-light);
-  font-size: 14px;
+  color: var(--taskon-color-text-tertiary);
+  font-size: var(--taskon-font-size);
 }
 
 /* ============================================================================
@@ -3645,39 +3723,40 @@ a.taskon-quest-footer-action-btn {
 
 .taskon-quest-layout {
   display: flex;
-  gap: var(--taskon-quest-spacing-3xl);
+  flex-direction: column;
+  gap: var(--taskon-spacing-xl);
   align-items: flex-start;
 }
 
 /* 左侧主内容区（固定比例 2:1） */
+
 .taskon-quest-content {
   flex: 2;
   min-width: 0;
   display: flex;
   flex-direction: column;
-  gap: var(--taskon-quest-spacing-xl);
+  gap: var(--taskon-spacing-lg);
 }
 
 /* 中间分割线 */
+
 .taskon-quest-divider {
-  width: 1px;
+  width: 100%;
+  height: 1px;
   align-self: stretch;
-  background: linear-gradient(
-    to bottom,
-    var(--taskon-quest-text-invisible),
-    var(--taskon-quest-text-darkest),
-    var(--taskon-quest-text-invisible)
-  );
+  background: var(--taskon-color-border-secondary);
   flex-shrink: 0;
 }
 
 /* 右侧边栏（固定比例 2:1） */
+
 .taskon-quest-sidebar {
   flex: 1;
+  width: 100%;
   min-width: 0;
   display: flex;
   flex-direction: column;
-  gap: var(--taskon-quest-spacing-xxl);
+  gap: var(--taskon-spacing-xl);
 }
 
 /* ============================================================================
@@ -3687,127 +3766,164 @@ a.taskon-quest-footer-action-btn {
 .taskon-quest-header {
   display: flex;
   flex-direction: column;
-  gap: var(--taskon-quest-spacing-l);
+  gap: var(--taskon-spacing-lg);
 }
 
 /* 标题 + 倒计时区域 */
+
 .taskon-quest-header-title-section {
   display: flex;
   flex-direction: column;
-  gap: var(--taskon-quest-spacing-xs);
+  gap: var(--taskon-spacing-sm);
 }
 
 .taskon-quest-title {
   margin: 0;
   font-size: 28px;
   font-weight: 600;
-  line-height: 38px;
-  color: var(--taskon-quest-text-lightest);
+  line-height: 1.36;
+  color: var(--taskon-color-text);
 }
 
 /* 倒计时 + 时间范围 */
+
 .taskon-quest-header-meta {
   display: flex;
-  align-items: center;
-  gap: var(--taskon-quest-spacing-s);
-  padding: var(--taskon-quest-spacing-xxs) 0;
-  border-radius: var(--taskon-quest-radius-s);
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 8px 10px;
+  padding: var(--taskon-spacing-xs) 0;
+  border: none;
+  border-radius: var(--taskon-border-radius-sm);
+  background: transparent;
 }
 
 .taskon-quest-countdown {
   display: flex;
-  gap: var(--taskon-quest-spacing-xs);
+  order: 3;
+  flex: 1 1 100%;
+  flex-wrap: wrap;
+  gap: 6px;
   align-items: center;
+  min-width: 0;
 }
 
 .taskon-quest-countdown-icon {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--taskon-quest-text-lightest);
+  color: var(--taskon-color-text);
 }
 
 .taskon-quest-countdown-label {
-  font-size: 16px;
+  font-size: var(--taskon-font-size);
   font-weight: 400;
-  line-height: 24px;
-  color: var(--taskon-quest-text-lighter);
+  line-height: 1.43;
+  color: var(--taskon-color-text-secondary);
 }
 
 /* 已结束状态的标签样式 */
+
 .taskon-quest-countdown-label--ended {
   font-weight: 600;
   text-transform: uppercase;
 }
 
 .taskon-quest-countdown-value {
-  font-size: 16px;
+  font-size: var(--taskon-font-size);
   font-weight: 600;
-  line-height: 24px;
-  color: var(--taskon-quest-primary);
+  line-height: 1.43;
+  color: var(--taskon-color-primary);
 }
 
 .taskon-quest-countdown-divider {
-  width: 1px;
-  height: 20px;
-  background-color: var(--taskon-quest-text-darkest);
+  display: none;
 }
 
 .taskon-quest-time-range {
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 24px;
-  color: var(--taskon-quest-text-lighter);
+  order: 1;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  font-size: var(--taskon-font-size);
+  font-weight: 500;
+  line-height: 1.43;
+  color: var(--taskon-color-text-secondary);
+}
+
+.taskon-quest-time-range-timezone {
+  font-size: var(--taskon-font-size-sm);
+  font-weight: 500;
+  line-height: 1.33;
+  color: var(--taskon-color-text-tertiary);
+}
+
+.taskon-quest-time-range-values {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+}
+
+.taskon-quest-time-range-separator {
+  color: var(--taskon-color-text-tertiary);
+}
+
+.taskon-quest-header-meta .taskon-quest-share-trigger {
+  order: 2;
+  width: 34px;
+  height: 34px;
+  border: none;
+  background: transparent;
 }
 
 /* Banner 图片 */
+
 .taskon-quest-banner {
   display: block;
   margin: 0 auto;
   width: 100%;
-  border-radius: 10px;
+  border-radius: var(--taskon-border-radius-lg);
 }
 
 .taskon-quest-banner-img {
   display: block;
   width: 100%;
-  border-radius: 10px;
-}
-
-/* 方形图片在 PC 端限制宽度 */
-@media (min-width: 751px) {
-  .taskon-quest-banner--square .taskon-quest-banner-img {
-    width: 340px;
-    max-width: 100%;
-    margin: 0 auto;
-  }
+  border-radius: var(--taskon-border-radius-lg);
 }
 
 /* 描述 + View More */
+
 .taskon-quest-desc {
   position: relative;
   display: flex;
   flex-direction: column;
-  gap: var(--taskon-quest-spacing-m);
+  gap: var(--taskon-spacing-md);
 }
 
 .taskon-quest-desc-text {
   margin: 0;
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 400;
-  line-height: 24px;
-  color: var(--taskon-quest-text-lighter);
+  line-height: 1.5;
+  color: var(--taskon-color-text-secondary);
   max-height: 120px;
   overflow: hidden;
   position: relative;
 }
 
 /* 展开后移除高度限制和渐变 */
+
 .taskon-quest-desc-text--expanded {
   max-height: none;
 }
 
 /* 描述渐变遮罩 - 仅在未展开时显示 */
+
 .taskon-quest-desc-text:not(.taskon-quest-desc-text--expanded)::after {
   content: "";
   position: absolute;
@@ -3817,15 +3933,16 @@ a.taskon-quest-footer-action-btn {
   height: 49px;
   background: linear-gradient(
     0.83deg,
-    var(--taskon-quest-bg-body) 10.557%,
-    rgba(17, 17, 17, 0) 93.799%
+    var(--taskon-color-bg-canvas) 10.557%,
+    transparent 93.799%
   );
   pointer-events: none;
 }
 
 /* 富文本样式重置 */
+
 .taskon-quest-desc-text p {
-  margin: 0 0 var(--taskon-quest-spacing-xs) 0;
+  margin: 0 0 var(--taskon-spacing-sm) 0;
 }
 
 .taskon-quest-desc-text p:last-child {
@@ -3833,38 +3950,40 @@ a.taskon-quest-footer-action-btn {
 }
 
 .taskon-quest-desc-text a {
-  color: var(--taskon-quest-link);
+  color: var(--taskon-color-link);
   text-decoration: underline;
 }
 
 .taskon-quest-desc-text ul,
 .taskon-quest-desc-text ol {
-  margin: var(--taskon-quest-spacing-xs) 0;
-  padding-left: var(--taskon-quest-spacing-xl);
+  margin: var(--taskon-spacing-sm) 0;
+  padding-left: var(--taskon-spacing-lg);
 }
 
 .taskon-quest-desc-text li {
-  margin: var(--taskon-quest-spacing-xxs) 0;
+  margin: var(--taskon-spacing-xs) 0;
 }
 
 /* 图片样式：限制最大宽度，防止溢出 */
+
 .taskon-quest-desc-text img {
   max-width: 100%;
   height: auto;
-  border-radius: var(--taskon-quest-radius-m);
+  border-radius: var(--taskon-border-radius);
 }
 
 /* iframe 样式：限制最大宽度 */
+
 .taskon-quest-desc-text iframe {
   max-width: 100%;
-  border-radius: var(--taskon-quest-radius-m);
+  border-radius: var(--taskon-border-radius);
 }
 
 .taskon-quest-desc-more {
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 600;
-  line-height: 24px;
-  color: var(--taskon-quest-text-lightest);
+  line-height: 1.5;
+  color: var(--taskon-color-text);
   text-decoration: underline;
   text-decoration-skip-ink: none;
   text-underline-position: from-font;
@@ -3880,14 +3999,10 @@ a.taskon-quest-footer-action-btn {
 }
 
 /* 分割线 */
+
 .taskon-quest-content-divider {
   height: 1px;
-  background: linear-gradient(
-    to right,
-    var(--taskon-quest-text-invisible),
-    var(--taskon-quest-text-darkest),
-    var(--taskon-quest-text-invisible)
-  );
+  background: var(--taskon-color-border-secondary);
 }
 
 /* ============================================================================
@@ -3897,74 +4012,72 @@ a.taskon-quest-footer-action-btn {
 .taskon-quest-tasks {
   display: flex;
   flex-direction: column;
-  gap: var(--taskon-quest-spacing-m);
+  gap: var(--taskon-spacing-md);
 }
 
 /* Quest 标题 */
+
 .taskon-quest-tasks-header {
   display: flex;
-  gap: var(--taskon-quest-spacing-m);
+  gap: var(--taskon-spacing-md);
   align-items: center;
 }
 
 .taskon-quest-tasks-title {
   margin: 0;
-  font-size: 24px;
+  font-size: var(--taskon-font-size-xxxl);
   font-weight: 600;
-  line-height: 32px;
-  color: var(--taskon-quest-text-lightest);
+  line-height: 1.33;
+  color: var(--taskon-color-text);
 }
 
 /* 任务列表 */
+
 .taskon-quest-tasks-list {
   display: flex;
   flex-direction: column;
-  gap: var(--taskon-quest-spacing-m);
+  gap: var(--taskon-spacing-md);
 }
 
 .taskon-quest-task-placeholder {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: var(--taskon-quest-spacing-m);
+  padding: var(--taskon-spacing-md);
   height: 66px;
-  background: linear-gradient(
-      90deg,
-      rgba(255, 255, 255, 0.1) 0%,
-      rgba(255, 255, 255, 0.1) 100%
-    ),
-    linear-gradient(90deg, #0d0d0d 0%, #0d0d0d 100%);
-  border: 1px solid var(--taskon-quest-text-invisible);
-  border-radius: var(--taskon-quest-radius-l);
-  font-size: 18px;
+  background: var(--taskon-color-bg-surface-strong);
+  border: 1px solid var(--taskon-color-border-secondary);
+  border-radius: var(--taskon-border-radius);
+  font-size: var(--taskon-font-size-xl);
   font-weight: 600;
-  color: var(--taskon-quest-text-lightest);
+  color: var(--taskon-color-text);
 }
 
 .taskon-quest-task-template {
-  color: var(--taskon-quest-text-dark);
-  font-size: 14px;
+  color: var(--taskon-color-text-disabled);
+  font-size: var(--taskon-font-size);
   font-weight: 500;
 }
 
 /* Complete 按钮 */
+
 .taskon-quest-complete-btn {
   width: 100%;
-  margin-top: var(--taskon-quest-spacing-xl);
-  padding: var(--taskon-quest-spacing-m) var(--taskon-quest-spacing-3xl);
-  font-size: 18px;
+  margin-top: var(--taskon-spacing-lg);
+  padding: var(--taskon-spacing-md) var(--taskon-spacing-xl);
+  font-size: var(--taskon-font-size-xl);
   font-weight: 600;
-  line-height: 24px;
-  color: var(--taskon-quest-button-primary-color);
-  background-color: var(--taskon-quest-primary);
+  line-height: 1.33;
+  color: var(--taskon-color-text-on-primary);
+  background-color: var(--taskon-color-primary);
   border: none;
-  border-radius: var(--taskon-quest-radius-l);
+  border-radius: var(--taskon-border-radius);
   cursor: pointer;
   transition: opacity 0.2s;
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: var(--taskon-quest-spacing-xs);
+  gap: var(--taskon-spacing-sm);
 }
 
 .taskon-quest-complete-btn:hover:not(:disabled) {
@@ -3983,16 +4096,16 @@ a.taskon-quest-footer-action-btn {
 .taskon-quest-winners-section {
   display: flex;
   flex-direction: column;
-  gap: var(--taskon-quest-spacing-m);
-  margin-bottom: var(--taskon-quest-spacing-xl);
+  gap: var(--taskon-spacing-md);
+  margin-bottom: var(--taskon-spacing-lg);
 }
 
 .taskon-quest-winners-section-title {
   margin: 0;
-  font-size: 24px;
+  font-size: var(--taskon-font-size-xxxl);
   font-weight: 600;
-  line-height: 32px;
-  color: var(--taskon-quest-text-lightest);
+  line-height: 1.33;
+  color: var(--taskon-color-text);
 }
 
 /* ============================================================================
@@ -4002,30 +4115,15 @@ a.taskon-quest-footer-action-btn {
 .taskon-quest-rewards-section {
   display: flex;
   flex-direction: column;
-  gap: var(--taskon-quest-spacing-l);
+  gap: var(--taskon-spacing-lg);
 }
 
 .taskon-quest-rewards-section-title {
   margin: 0;
-  font-size: 24px;
+  font-size: var(--taskon-font-size-xxxl);
   font-weight: 600;
-  line-height: 32px;
-  color: var(--taskon-quest-text-lightest);
-}
-
-/* QuestRewards 组件 CSS 变量映射 */
-.taskon-quest-rewards-section {
-  --taskon-text-primary: var(--taskon-quest-text-lightest);
-  --taskon-text-secondary: var(--taskon-quest-text-lighter);
-  --taskon-text-tertiary: var(--taskon-quest-text-light);
-  --taskon-bg-card: var(--taskon-quest-text-invisible);
-  --taskon-bg-secondary: rgba(255, 255, 255, 0.03);
-  --taskon-bg-tertiary: var(--taskon-quest-text-darkest);
-  --taskon-border-color: var(--taskon-quest-text-darkest);
-  --taskon-primary: var(--taskon-quest-primary);
-  --taskon-success: var(--taskon-quest-secondary);
-  --taskon-link: var(--taskon-quest-link);
-  --taskon-warning: #ffc107;
+  line-height: 1.33;
+  color: var(--taskon-color-text);
 }
 
 /* ============================================================================
@@ -4035,32 +4133,32 @@ a.taskon-quest-footer-action-btn {
 .taskon-quest-rewards {
   display: flex;
   flex-direction: column;
-  gap: var(--taskon-quest-spacing-l);
+  gap: var(--taskon-spacing-lg);
 }
 
 .taskon-quest-rewards-title {
   margin: 0;
-  font-size: 24px;
+  font-size: var(--taskon-font-size-xxxl);
   font-weight: 600;
-  line-height: 32px;
-  color: var(--taskon-quest-text-lightest);
+  line-height: 1.33;
+  color: var(--taskon-color-text);
 }
 
 .taskon-quest-rewards-list {
   display: flex;
   flex-direction: column;
-  gap: var(--taskon-quest-spacing-m);
+  gap: var(--taskon-spacing-md);
 }
 
 .taskon-quest-reward-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: var(--taskon-quest-spacing-m);
-  background-color: var(--taskon-quest-text-invisible);
-  border-radius: var(--taskon-quest-radius-xl);
-  font-size: 16px;
-  color: var(--taskon-quest-text-lightest);
+  padding: var(--taskon-spacing-md);
+  background-color: var(--taskon-color-border-secondary);
+  border-radius: var(--taskon-border-radius-lg);
+  font-size: var(--taskon-font-size-lg);
+  color: var(--taskon-color-text);
 }
 
 /* ============================================================================
@@ -4068,22 +4166,22 @@ a.taskon-quest-footer-action-btn {
    ============================================================================ */
 
 .taskon-quest-eligs-section {
-  margin-top: var(--taskon-quest-spacing-xl);
+  margin-top: var(--taskon-spacing-lg);
 }
 
 .taskon-quest-eligs-section-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: var(--taskon-quest-spacing-m);
+  margin-bottom: var(--taskon-spacing-md);
 }
 
 .taskon-quest-eligs-section-title {
   margin: 0;
   font-size: 20px;
   font-weight: 600;
-  line-height: 28px;
-  color: var(--taskon-quest-text-lightest);
+  line-height: 1.4;
+  color: var(--taskon-color-text);
 }
 
 /* ============================================================================
@@ -4093,475 +4191,251 @@ a.taskon-quest-footer-action-btn {
 .taskon-quest-participants {
   display: flex;
   flex-direction: column;
-  gap: var(--taskon-quest-spacing-l);
+  gap: var(--taskon-spacing-lg);
 }
 
 .taskon-quest-participants-title {
   margin: 0;
-  font-size: 24px;
+  font-size: var(--taskon-font-size-xxxl);
   font-weight: 600;
-  line-height: 32px;
-  color: var(--taskon-quest-text-lightest);
+  line-height: 1.33;
+  color: var(--taskon-color-text);
 }
 
 .taskon-quest-participants-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 500;
-  line-height: 24px;
+  line-height: 1.5;
 }
 
 .taskon-quest-participants-label {
-  color: var(--taskon-quest-text-lighter);
+  color: var(--taskon-color-text-secondary);
 }
 
 .taskon-quest-participants-value {
-  color: var(--taskon-quest-text-lightest);
+  color: var(--taskon-color-text);
 }
 
 /* ============================================================================
-   响应式布局（TODO: Phase 13 完善）
+   响应式布局
    ============================================================================ */
 
-@media (max-width: 1200px) {
+@supports (container-type: inline-size) {
+    @container (min-width: 751px) {
   .taskon-quest-layout {
-    flex-direction: column;
+    flex-direction: row;
   }
 
   .taskon-quest-divider {
-    width: 100%;
-    height: 1px;
-    background: linear-gradient(
-      to right,
-      var(--taskon-quest-text-invisible),
-      var(--taskon-quest-text-darkest),
-      var(--taskon-quest-text-invisible)
-    );
+    width: 1px;
+    height: auto;
   }
 
   .taskon-quest-sidebar {
-    width: 100%;
+    width: auto;
   }
-}
 
-/* ============================================================================
-   Eligibility (资格验证) 组件样式
-   ============================================================================ */
-
-/* 主容器 */
-.taskon-quest-eligs {
-  margin-top: 25px;
-  padding: 0 18px;
-  border: 1px solid var(--taskon-quest-text-darkest);
-  border-radius: 10px;
-}
-
-/* 动画效果 - 用于引导用户注意 */
-.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);
-  }
-  100% {
-    border-color: rgba(255, 255, 255, 0.4);
+  .taskon-quest-header-meta {
+    flex-wrap: nowrap;
+    align-items: center;
+    gap: var(--taskon-spacing-md);
+    padding: var(--taskon-spacing-xs) 0;
+    border: none;
+    background: transparent;
   }
-}
-
-/* 折叠头部 */
-.taskon-quest-eligs-header {
-  height: 60px;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  font-size: 16px;
-  line-height: 20px;
-  cursor: pointer;
-  user-select: none;
-}
-
-.taskon-quest-eligs-header:hover {
-  opacity: 0.9;
-}
-
-/* 状态图标 */
-.taskon-quest-eligs-header-status {
-  flex-shrink: 0;
-}
-
-/* 头部文本 */
-.taskon-quest-eligs-header-text {
-  flex: 1;
-  color: var(--taskon-quest-text-lightest);
-}
-
-/* 高亮表达式 (all/any) */
-.taskon-quest-eligs-header-express {
-  color: var(--taskon-quest-secondary);
-}
-
-/* 刷新按钮 */
-.taskon-quest-eligs-refresh {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  padding: 0;
-  margin-left: auto;
-  background: transparent;
-  border: 1px solid var(--taskon-quest-text-darkest);
-  border-radius: 6px;
-  color: var(--taskon-quest-text-lighter);
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.taskon-quest-eligs-refresh:hover:not(:disabled) {
-  border-color: var(--taskon-quest-text-light);
-  color: var(--taskon-quest-text-lightest);
-}
 
-.taskon-quest-eligs-refresh:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.taskon-quest-eligs-refresh--loading .taskon-quest-eligs-refresh-icon {
-  animation: taskon-quest-spin 1s linear infinite;
-}
-
-/* 箭头图标 */
-.taskon-quest-eligs-header-arrow {
-  flex-shrink: 0;
-  width: 6px;
-  height: 10px;
-  color: var(--taskon-quest-text-lighter);
-  transform: rotate(90deg);
-  transition: transform 0.3s;
-}
-
-.taskon-quest-eligs-header-arrow--expanded {
-  transform: rotate(-90deg);
-}
-
-/* 列表 */
-.taskon-quest-eligs-list {
-  text-align: left;
-  padding: 20px 0;
-  margin: 0;
-  list-style: none;
-  border-top: 1px solid var(--taskon-quest-text-darkest);
-}
-
-/* 单项 */
-.taskon-quest-eligs-item {
-  line-height: 18px;
-}
-
-.taskon-quest-eligs-item + .taskon-quest-eligs-item {
-  margin-top: 24px;
-}
-
-.taskon-quest-eligs-item-container {
-  display: flex;
-  align-items: flex-start;
-}
-
-/* 状态图标 */
-.taskon-quest-eligs-item-icon {
-  flex-shrink: 0;
-  margin-right: 10px;
-  margin-top: 2px;
-  opacity: 0;
-}
-
-.taskon-quest-eligs-item-icon-placeholder {
-  flex-shrink: 0;
-  width: 16px;
-  height: 16px;
-  margin-right: 10px;
-  margin-top: 2px;
-}
-
-.taskon-quest-eligs-item--passed .taskon-quest-eligs-item-icon,
-.taskon-quest-eligs-item--failed .taskon-quest-eligs-item-icon {
-  opacity: 1;
-}
-
-/* 内容区 */
-.taskon-quest-eligs-item-content {
-  flex: 1;
-  font-size: 14px;
-  line-height: 18px;
-  color: var(--taskon-quest-text-lighter);
-}
-
-/* 类型组件样式 */
-.taskon-quest-eligs-type {
-  color: var(--taskon-quest-text-lighter);
-}
-
-.taskon-quest-eligs-type--tooltip {
-  position: relative;
-  cursor: help;
-}
-
-/* 高亮文本 */
-.taskon-quest-eligs-highlight {
-  color: var(--taskon-quest-primary);
-}
-
-/* 链接样式 */
-.taskon-quest-eligs-link {
-  color: var(--taskon-quest-link);
-  text-decoration: underline;
-}
-
-.taskon-quest-eligs-link:hover {
-  opacity: 0.8;
-}
-
-/* Tooltip */
-.taskon-quest-eligs-tooltip {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  z-index: 10;
-  margin-top: 4px;
-  padding: 8px 12px;
-  max-width: 300px;
-  font-size: 12px;
-  line-height: 16px;
-  color: var(--taskon-quest-text-lightest);
-  background-color: rgba(0, 0, 0, 0.9);
-  border-radius: 6px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-  white-space: normal;
-  word-break: break-word;
-}
-
-/* 子条件容器 */
-.taskon-quest-eligs-sub {
-  width: 100%;
-}
-
-.taskon-quest-eligs-sub-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-weight: 600;
-  cursor: pointer;
-}
-
-.taskon-quest-eligs-sub-header:hover {
-  opacity: 0.9;
-}
-
-.taskon-quest-eligs-sub-label {
-  flex: 1;
-}
-
-.taskon-quest-eligs-sub-arrow {
-  flex-shrink: 0;
-  width: 8px;
-  height: 8px;
-  color: var(--taskon-quest-text-lighter);
-  transform: rotate(-90deg);
-  transition: transform 0.3s;
-}
+  .taskon-quest-countdown {
+    order: 0;
+    flex: 0 0 auto;
+    flex-wrap: nowrap;
+    gap: var(--taskon-spacing-sm);
+  }
 
-.taskon-quest-eligs-sub-arrow--expanded {
-  transform: rotate(90deg);
-}
+  .taskon-quest-countdown-label,
+  .taskon-quest-countdown-value {
+    font-size: var(--taskon-font-size-lg);
+    line-height: 1.5;
+  }
 
-.taskon-quest-eligs-sub-list {
-  margin-top: 10px;
-  padding-left: 14px;
-  list-style: disc;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
+  .taskon-quest-countdown-divider {
+    display: block;
+    width: 1px;
+    height: 20px;
+    background-color: var(--taskon-color-border-secondary);
+  }
 
-.taskon-quest-eligs-sub-list li {
-  font-size: 14px;
-  line-height: 18px;
-  color: var(--taskon-quest-text-lighter);
-}
+  .taskon-quest-time-range {
+    order: 0;
+    flex: 0 1 auto;
+    flex-direction: row;
+    gap: 8px;
+    font-size: var(--taskon-font-size-lg);
+    font-weight: 400;
+    line-height: 1.5;
+  }
 
-/* ============================================================================
-   Eligibility 响应式样式
-   ============================================================================ */
+  .taskon-quest-time-range-timezone {
+    font-size: var(--taskon-font-size-lg);
+    font-weight: 400;
+    line-height: 1.5;
+    color: var(--taskon-color-text-secondary);
+  }
 
-@media (max-width: 750px) {
-  .taskon-quest-eligs {
-    margin-top: 5.07vw;
-    padding: 0 4vw;
+  .taskon-quest-time-range-values {
+    flex-wrap: nowrap;
+    gap: 8px;
+    word-break: normal;
+    overflow-wrap: normal;
   }
 
-  .taskon-quest-eligs-header {
-    height: 12vw;
-    font-size: 3.47vw;
-    line-height: 4.4vw;
+  .taskon-quest-time-range-separator {
+    color: var(--taskon-color-text-secondary);
   }
 
-  .taskon-quest-eligs-header-arrow {
-    width: 1.2vw;
-    height: 2.4vw;
+  .taskon-quest-header-meta .taskon-quest-share-trigger {
+    order: 0;
+    width: 40px;
+    height: 40px;
+    border: none;
+    background: var(--taskon-color-bg-surface);
   }
 
-  .taskon-quest-eligs-list {
-    padding: 3.73vw 0;
+  /* 方形图片在桌面端限制宽度 */
+  .taskon-quest-banner--square .taskon-quest-banner-img {
+    width: 340px;
+    max-width: 100%;
+    margin: 0 auto;
   }
 
-  .taskon-quest-eligs-item + .taskon-quest-eligs-item {
-    margin-top: 3.73vw;
+  .taskon-quest-skeleton-content,
+  .taskon-quest-skeleton-sidebar {
+    width: auto;
+    gap: 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;
+  .taskon-quest-skeleton-banner {
+    height: 220px;
   }
 
-  .taskon-quest-eligs-item-content {
-    font-size: 3.47vw;
-    line-height: 4.4vw;
+  .taskon-quest-skeleton-task {
+    height: 84px;
+  }
+    }
   }
-}
 
-/* ============================================================================
-   Eligibility - OnChainVerify Tooltip Styles
-   ============================================================================ */
+@supports not (container-type: inline-size) {
+    @media (min-width: 751px) {
+  .taskon-quest-layout {
+    flex-direction: row;
+  }
 
-.taskon-quest-eligs-onchain-item {
-  display: inline;
-}
+  .taskon-quest-divider {
+    width: 1px;
+    height: auto;
+  }
 
-.taskon-quest-eligs-onchain-link {
-  position: relative;
-  display: inline;
-  text-decoration: underline;
-  cursor: pointer;
-  color: var(--taskon-quest-text-lightest);
-}
+  .taskon-quest-sidebar {
+    width: auto;
+  }
 
-.taskon-quest-eligs-onchain-link:hover {
-  color: var(--taskon-quest-link);
-}
+  .taskon-quest-header-meta {
+    flex-wrap: nowrap;
+    align-items: center;
+    gap: var(--taskon-spacing-md);
+    padding: var(--taskon-spacing-xs) 0;
+    border: none;
+    background: transparent;
+  }
 
-.taskon-quest-eligs-onchain-tooltip {
-  position: absolute;
-  bottom: calc(100% + 8px);
-  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);
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
-  z-index: 100;
-  font-size: 14px;
-  line-height: 1.5;
-}
+  .taskon-quest-countdown {
+    order: 0;
+    flex: 0 0 auto;
+    flex-wrap: nowrap;
+    gap: var(--taskon-spacing-sm);
+  }
 
-.taskon-quest-eligs-onchain-tooltip::before {
-  content: "";
-  position: absolute;
-  bottom: -6px;
-  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);
-  transform: rotate(45deg);
-}
+  .taskon-quest-countdown-label,
+  .taskon-quest-countdown-value {
+    font-size: var(--taskon-font-size-lg);
+    line-height: 1.5;
+  }
 
-.taskon-quest-eligs-onchain-tooltip p {
-  margin: 0 0 8px 0;
-  color: var(--taskon-quest-text-lighter);
-}
+  .taskon-quest-countdown-divider {
+    display: block;
+    width: 1px;
+    height: 20px;
+    background-color: var(--taskon-color-border-secondary);
+  }
 
-.taskon-quest-eligs-onchain-tooltip ul {
-  margin: 0;
-  padding: 0;
-  list-style: disc;
-  list-style-position: inside;
-}
+  .taskon-quest-time-range {
+    order: 0;
+    flex: 0 1 auto;
+    flex-direction: row;
+    gap: 8px;
+    font-size: var(--taskon-font-size-lg);
+    font-weight: 400;
+    line-height: 1.5;
+  }
 
-.taskon-quest-eligs-onchain-tooltip ul li {
-  margin: 4px 0;
-}
+  .taskon-quest-time-range-timezone {
+    font-size: var(--taskon-font-size-lg);
+    font-weight: 400;
+    line-height: 1.5;
+    color: var(--taskon-color-text-secondary);
+  }
 
-.taskon-quest-eligs-onchain-tooltip-link {
-  color: var(--taskon-quest-link);
-  text-decoration: underline;
-  font-size: 14px;
-  line-height: 18px;
-}
+  .taskon-quest-time-range-values {
+    flex-wrap: nowrap;
+    gap: 8px;
+    word-break: normal;
+    overflow-wrap: normal;
+  }
 
-.taskon-quest-eligs-onchain-tooltip-link:hover {
-  color: var(--taskon-quest-text-lightest);
-}
+  .taskon-quest-time-range-separator {
+    color: var(--taskon-color-text-secondary);
+  }
 
-/* Poh provider item styles */
-.taskon-quest-eligs-poh-provider {
-  font-weight: 500;
-}
+  .taskon-quest-header-meta .taskon-quest-share-trigger {
+    order: 0;
+    width: 40px;
+    height: 40px;
+    border: none;
+    background: var(--taskon-color-bg-surface);
+  }
 
-/* NFT Holder copy styles */
-.taskon-quest-eligs-nft-name {
-  position: relative;
-  display: inline;
-  color: var(--taskon-quest-secondary);
-  cursor: pointer;
-  text-decoration: underline;
-}
+  /* 方形图片在桌面端限制宽度 */
+  .taskon-quest-banner--square .taskon-quest-banner-img {
+    width: 340px;
+    max-width: 100%;
+    margin: 0 auto;
+  }
 
-.taskon-quest-eligs-nft-name:hover {
-  color: var(--taskon-quest-link);
-}
+  .taskon-quest-skeleton-content,
+  .taskon-quest-skeleton-sidebar {
+    width: auto;
+    gap: var(--taskon-spacing-lg);
+  }
 
-.taskon-quest-eligs-copied {
-  position: absolute;
-  bottom: calc(100% + 4px);
-  left: 50%;
-  transform: translateX(-50%);
-  padding: 4px 8px;
-  background-color: #222222;
-  border-radius: var(--taskon-quest-radius-s);
-  font-size: 12px;
-  color: var(--taskon-quest-secondary);
-  white-space: nowrap;
-  pointer-events: none;
-  animation: taskon-quest-fade-in 0.2s ease-out;
-}
+  .taskon-quest-skeleton-banner {
+    height: 220px;
+  }
 
-@keyframes taskon-quest-fade-in {
-  from {
-    opacity: 0;
-    transform: translateX(-50%) translateY(4px);
+  .taskon-quest-skeleton-task {
+    height: 84px;
   }
-  to {
-    opacity: 1;
-    transform: translateX(-50%) translateY(0);
+    }
   }
-}
+
+/* Eligibility 组件样式已抽取到独立文件: Quest/components/Eligibility/eligibility.css */
 
 /* ============================================================================
    BlindBox Dialog Wrapper
    ============================================================================ */
 
 .taskon-quest-blindbox-dialog-wrapper {
-  background: #0d0d0d;
   padding: 0;
   width: auto;
   max-width: 560px;
@@ -4571,14 +4445,10 @@ a.taskon-quest-footer-action-btn {
   padding: 0;
 }
 
-.taskon-quest-blindbox-reward-wrapper {
-  background: #0d0d0d;
-  padding: 0;
-  width: auto;
+.taskon-quest-blindbox-dialog-wrapper--result {
   max-width: 560px;
 }
 
-.taskon-quest-blindbox-reward-wrapper .taskon-dialog-body {
+.taskon-quest-blindbox-dialog-wrapper--result .taskon-dialog-body {
   padding: 0;
 }
-