@taskon/widget-react 0.0.1-beta.1

package/dist/CommunityTaskList.css

@@ -0,0 +1,4893 @@
+/**
+ * CardSelector 组件样式
+ * 完全复刻 taskon-website 的 CmCardRadio 样式
+ * 直接使用 dark 模式颜色值，不使用 CSS 变量
+ * 使用 taskon- 前缀避免与项目方样式冲突
+ */
+
+/* 选择器容器 */
+.taskon-card-selector {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+/* 选择器选项 */
+.taskon-card-selector-item {
+  flex-shrink: 0;
+  padding: 10px 20px;
+  border-radius: 6px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: #252a2c;
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: 0.36px;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  white-space: nowrap;
+  backdrop-filter: blur(10px);
+  max-width: 100%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+
+  /* 移除默认按钮样式 */
+  outline: none;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* Hover 状态 */
+.taskon-card-selector-item:hover {
+  border-color: rgba(255, 255, 255, 0.15);
+}
+
+/* 选中状态 */
+.taskon-card-selector-item--selected {
+  background: #fff;
+  color: #0d0d0d;
+}
+
+.taskon-card-selector-item--selected:hover {
+  background: #fff;
+}
+
+/* Focus 状态（键盘导航） */
+.taskon-card-selector-item:focus-visible {
+  outline: 2px solid rgba(255, 255, 255, 0.5);
+  outline-offset: 2px;
+}
+
+/* 响应式样式（移动端） */
+@media (max-width: 750px) {
+  .taskon-card-selector {
+    gap: 2.13vw;
+  }
+
+  .taskon-card-selector-item {
+    padding: 2.4vw 3.2vw;
+    border-radius: 1.07vw;
+    font-size: 3.73vw;
+    line-height: 4.53vw;
+    backdrop-filter: blur(1.33vw);
+  }
+}
+/**
+ * BindWalletDialog 组件样式
+ * 使用 taskon-bind-wallet-* 命名空间
+ * 与 taskon-website 保持一致
+ */
+
+/* ==================== 容器 ==================== */
+.taskon-bind-wallet-dialog {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ==================== 标题 ==================== */
+.taskon-bind-wallet-dialog-title {
+  margin: 0;
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 28px;
+  color: var(--taskon-color-text, #ffffff);
+}
+
+/* ==================== 链类型标签 ==================== */
+.taskon-bind-wallet-dialog-chain-label {
+  margin-top: 20px;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 20px;
+  color: var(--taskon-color-text, #ffffff);
+}
+
+/* ==================== 钱包网格 ==================== */
+.taskon-bind-wallet-dialog-grid {
+  margin-top: 10px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 18px;
+}
+
+/* ==================== 钱包项 ==================== */
+.taskon-bind-wallet-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 50px;
+  padding: 0 12px;
+
+  background: transparent;
+  border: 1px solid var(--taskon-color-border, rgba(255, 255, 255, 0.15));
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.taskon-bind-wallet-item:hover,
+.taskon-bind-wallet-item:focus {
+  background: var(--taskon-color-bg-hover, rgba(255, 255, 255, 0.1));
+}
+
+.taskon-bind-wallet-item:active {
+  transform: scale(0.98);
+}
+
+/* 钱包图标 */
+.taskon-bind-wallet-item-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
+
+.taskon-bind-wallet-item-icon svg {
+  width: 24px;
+  height: 24px;
+}
+
+/* 钱包名称 */
+.taskon-bind-wallet-item-name {
+  margin-left: 10px;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 20px;
+  color: var(--taskon-color-text, #ffffff);
+}
+
+/* 已安装标签 */
+.taskon-bind-wallet-item-installed {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  padding: 4px 8px;
+  font-size: 10px;
+  line-height: 14px;
+  color: var(--taskon-color-secondary, #22c55e);
+  background: var(--taskon-color-secondary-bg, rgba(34, 197, 94, 0.1));
+  border-radius: 8px 0;
+  transform-origin: bottom right;
+}
+
+/* ==================== 连接中状态 ==================== */
+.taskon-bind-wallet-item--connecting {
+  opacity: 0.7;
+  cursor: wait;
+}
+
+.taskon-bind-wallet-item--connecting:hover,
+.taskon-bind-wallet-item--connecting:focus {
+  background: transparent;
+}
+
+/* ==================== 禁用状态 ==================== */
+.taskon-bind-wallet-item--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.taskon-bind-wallet-item--disabled:hover,
+.taskon-bind-wallet-item--disabled:focus {
+  background: transparent;
+}
+
+.taskon-bind-wallet-item--disabled:active {
+  transform: none;
+}
+
+/* 不可用标签 */
+.taskon-bind-wallet-item-unavailable {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  padding: 4px 8px;
+  font-size: 10px;
+  line-height: 14px;
+  color: var(--taskon-color-text-tertiary, #71717a);
+  background: var(--taskon-color-bg-secondary, rgba(255, 255, 255, 0.05));
+  border-radius: 8px 0;
+}
+
+/* 连接中 spinner */
+.taskon-bind-wallet-item-connecting {
+  position: absolute;
+  right: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.taskon-bind-wallet-spinner {
+  width: 16px;
+  height: 16px;
+  color: var(--taskon-color-primary, #6366f1);
+  animation: taskon-bind-wallet-spin 1s linear infinite;
+}
+
+@keyframes taskon-bind-wallet-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ==================== 提示文字 ==================== */
+.taskon-bind-wallet-dialog-tip {
+  margin: 20px 0 0;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--taskon-color-text-tertiary, #71717a);
+  text-align: center;
+}
+
+/* ==================== 响应式 ==================== */
+@media (max-width: 750px) {
+  .taskon-bind-wallet-dialog-title {
+    font-size: 3.8vw;
+    line-height: 4vw;
+  }
+
+  .taskon-bind-wallet-dialog-chain-label {
+    margin-top: 4vw;
+    font-size: 4vw;
+    line-height: 5.6vw;
+  }
+
+  .taskon-bind-wallet-dialog-grid {
+    margin-top: 2.667vw;
+    grid-template-columns: 1fr;
+    gap: 4vw;
+  }
+
+  .taskon-bind-wallet-item {
+    height: 12vw;
+  }
+
+  .taskon-bind-wallet-item-icon {
+    width: 6.4vw;
+    height: 6.4vw;
+  }
+
+  .taskon-bind-wallet-item-icon svg {
+    width: 6.4vw;
+    height: 6.4vw;
+  }
+
+  .taskon-bind-wallet-item-name {
+    margin-left: 2.667vw;
+    font-size: 3.733vw;
+    line-height: 4.667vw;
+  }
+
+  .taskon-bind-wallet-dialog-tip {
+    margin-top: 4vw;
+    font-size: 3vw;
+  }
+}
+
+/* ==================== 连接中遮层 ==================== */
+.taskon-bind-wallet-loading-overlay {
+  position: absolute;
+  /* 使用负值覆盖 Dialog body 的 padding */
+  inset: -24px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(4px);
+  border-radius: 16px;
+}
+
+.taskon-bind-wallet-loading-spinner {
+  width: 40px;
+  height: 40px;
+  color: var(--taskon-color-text-secondary, #a1a1aa);
+  animation: taskon-bind-wallet-spin 1s linear infinite;
+}
+
+.taskon-bind-wallet-loading-text {
+  margin: 20px 0 0;
+  max-width: 60%;
+  font-size: 16px;
+  line-height: 20px;
+  color: var(--taskon-color-text-secondary, #a1a1aa);
+  text-align: center;
+}
+
+@media (max-width: 750px) {
+  .taskon-bind-wallet-loading-overlay {
+    inset: -20px;
+    border-radius: 12px;
+  }
+
+  .taskon-bind-wallet-loading-spinner {
+    width: 8vw;
+    height: 8vw;
+  }
+
+  .taskon-bind-wallet-loading-text {
+    margin-top: 4vw;
+    font-size: 3.5vw;
+    line-height: 5vw;
+  }
+}
+/**
+ * CardDescExpress 组件样式
+ * @module components/CardDescExpress
+ */
+
+.taskon-card-desc-rich {
+  max-height: 60px;
+  overflow: hidden;
+  font-size: 14px;
+  line-height: 21px;
+  color: rgb(255 255 255 / 60%); /* --color-light */
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow-wrap: break-word;
+}
+
+/* 处理富文本中的常见元素 */
+.taskon-card-desc-rich p {
+  margin: 0;
+}
+
+.taskon-card-desc-rich a {
+  color: #cbff01; /* --secondary-100 */
+  text-decoration: none;
+}
+
+.taskon-card-desc-rich a:hover {
+  text-decoration: underline;
+}
+
+.taskon-card-desc-rich strong,
+.taskon-card-desc-rich b {
+  font-weight: 600;
+}
+
+.taskon-card-desc-rich em,
+.taskon-card-desc-rich i {
+  font-style: italic;
+}
+
+.taskon-card-desc-rich ul,
+.taskon-card-desc-rich ol {
+  margin: 0;
+  padding-left: 1.5em;
+}
+
+.taskon-card-desc-rich pre {
+  text-wrap: initial;
+}
+
+/* ========== 响应式样式（移动端） ========== */
+@media (max-width: 750px) {
+  .taskon-card-desc-rich {
+    max-height: 18vw;
+    font-size: 3.733vw;
+    line-height: normal;
+  }
+}
+/**
+ * ClaimButton 组件样式
+ * 复刻原版 ClaimButton.vue 样式
+ * 使用 Widget 命名空间扁平化方案
+ */
+
+/* Claim 按钮基础样式 */
+.taskon-community-task-claim {
+  min-width: 77px;
+  height: 34px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 10px;
+  text-align: center;
+  border-radius: 6px;
+  border: 1px solid rgb(255 255 255 / 100%);
+  background: transparent;
+  color: rgb(255 255 255 / 100%);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 18px;
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+  white-space: nowrap;
+}
+
+.taskon-community-task-claim:hover:not(:disabled) {
+  opacity: 0.8;
+}
+
+/* 深色样式（弹窗内使用） */
+.taskon-community-task-claim--dark {
+  height: 40px;
+  background: rgb(255 255 255 / 100%);
+  color: rgb(0 0 0 / 100%);
+  font-weight: 600;
+  border: none;
+}
+
+/* 禁用状态 */
+.taskon-community-task-claim--disabled {
+  opacity: 0.2;
+  cursor: not-allowed;
+}
+
+/* 加载状态 */
+.taskon-community-task-claim--loading {
+  background: rgb(255 255 255 / 20%);
+  border: none;
+  cursor: wait;
+}
+
+.taskon-community-task-claim--loading:hover {
+  opacity: 1;
+}
+
+/* 加载动画容器 */
+.taskon-community-task-claim-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 加载动画 spinner */
+.taskon-community-task-claim-spinner {
+  width: 22px;
+  height: 22px;
+  animation: taskon-claim-spin 1s linear infinite;
+}
+
+/* Mini 按钮样式（Unlimited 任务已有积分时使用）*/
+/* 复刻 Vue 版本 ClaimButton.vue 中的 .mini-btn 样式 */
+.taskon-community-task-claim-mini {
+  height: 20px;
+  padding: 0 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  border: none;
+  background: rgb(255 255 255 / 10%);
+  color: rgb(255 255 255 / 100%);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+  white-space: nowrap;
+}
+
+.taskon-community-task-claim-mini:hover:not(:disabled) {
+  opacity: 0.8;
+}
+
+/* Mini 按钮禁用状态 */
+.taskon-community-task-claim-mini--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Mini 按钮加载状态 */
+.taskon-community-task-claim-mini--loading {
+  cursor: wait;
+}
+
+.taskon-community-task-claim-mini--loading:hover {
+  opacity: 1;
+}
+
+/* Mini 按钮加载动画容器 */
+.taskon-community-task-claim-mini-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Mini 按钮 spinner */
+.taskon-community-task-claim-mini-spinner {
+  width: 14px;
+  height: 14px;
+  animation: taskon-claim-spin 1s linear infinite;
+}
+
+@keyframes taskon-claim-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* 响应式 - 移动端 */
+@media (max-width: 750px) {
+  .taskon-community-task-claim {
+    min-width: 13.333vw;
+    height: 9.333vw;
+    padding: 0 2.667vw;
+    font-size: 3.733vw;
+    line-height: 4.667vw;
+  }
+
+  .taskon-community-task-claim--dark {
+    height: 9.333vw;
+  }
+
+  .taskon-community-task-claim-spinner {
+    width: 5.333vw;
+    height: 5.333vw;
+  }
+
+  /* Mini 按钮响应式 */
+  .taskon-community-task-claim-mini {
+    height: 6.933vw;
+    padding: 0 1.6vw;
+    font-size: 3.2vw;
+    line-height: 3.733vw;
+  }
+
+  .taskon-community-task-claim-mini-spinner {
+    width: 3.733vw;
+    height: 3.733vw;
+  }
+}
+/**
+ * ClaimRetry 组件样式
+ * 复刻原版 ClaimRetry.vue 的样式
+ */
+
+/* 冷却倒计时容器 */
+.taskon-community-task-retry {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 77px;
+  height: 34px;
+  padding: 0 12px;
+  border-radius: 6px;
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 18px;
+  cursor: not-allowed;
+  white-space: nowrap;
+}
+
+/* ========== 响应式样式（移动端） ========== */
+@media (max-width: 750px) {
+  .taskon-community-task-retry {
+    min-width: 20vw;
+    height: 9.33vw;
+    padding: 0 3.2vw;
+    border-radius: 1.6vw;
+    font-size: 3.73vw;
+    line-height: 4.67vw;
+  }
+}
+/**
+ * DoneCountdown 组件样式
+ * 复刻原版 DoneCountdown.vue 的样式
+ */
+
+/* 完成倒计时容器 - 复刻原版 var(--color-dark) */
+.taskon-community-task-done-countdown {
+  margin-top: 10px;
+  color: rgba(255, 255, 255, 0.4);
+  font-size: 14px;
+  line-height: 18px;
+}
+
+/* 倒计时行 */
+.taskon-community-task-done-countdown-timer {
+  margin-top: 4px;
+}
+
+/* 倒计时数字 - 复刻原版 var(--color-lighter) */
+.taskon-community-task-done-countdown-time {
+  margin-left: 4px;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+/* ========== 响应式样式（移动端） ========== */
+@media (max-width: 750px) {
+  .taskon-community-task-done-countdown {
+    margin-top: 2.67vw;
+    font-size: 3.73vw;
+    line-height: 4.8vw;
+  }
+
+  .taskon-community-task-done-countdown-timer {
+    margin-top: 1.07vw;
+  }
+
+  .taskon-community-task-done-countdown-time {
+    margin-left: 1.07vw;
+  }
+}
+/**
+ * ValidationTimeTip 组件样式
+ * 复刻原版 ValidationTimeTip.vue 的样式
+ */
+
+.taskon-community-validation-tip {
+  display: flex;
+  align-items: flex-start;
+  margin-top: 10px;
+  margin-bottom: 6px;
+  gap: 4px;
+}
+
+.taskon-community-validation-tip-icon {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+}
+
+.taskon-community-validation-tip-text {
+  margin: 0;
+  /* 复刻原版 --text-info-warning-60 颜色: rgb(255 212 101 / 60%) */
+  color: var(--taskon-color-warning-60, rgba(255, 212, 101, 0.6));
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+/* 移动端适配 */
+@media (max-width: 750px) {
+  .taskon-community-validation-tip {
+    margin-top: 2.667vw;
+    margin-bottom: 2.667vw;
+  }
+
+  .taskon-community-validation-tip-icon {
+    width: 2.933vw;
+    height: 2.933vw;
+  }
+
+  .taskon-community-validation-tip-text {
+    font-size: 3.2vw;
+  }
+}
+/**
+ * CheckProgressTip 组件样式
+ * 复刻原版 CheckProgressTip.vue 的样式
+ */
+
+/* 进度提示容器 */
+.taskon-community-task-progress-tip {
+  margin-top: 8px;
+  font-size: 12px;
+  line-height: 16px;
+  color: #f5a623; /* warn color */
+}
+
+/* 可点击的社区链接 */
+.taskon-community-task-progress-tip-link {
+  text-decoration: underline;
+  cursor: pointer;
+  color: #f5a623;
+}
+
+.taskon-community-task-progress-tip-link:hover {
+  opacity: 0.8;
+}
+
+/* 不可点击的社区名称 */
+.taskon-community-task-progress-tip-name {
+  font-weight: 500;
+}
+
+/* ========== 响应式样式（移动端） ========== */
+@media (max-width: 750px) {
+  .taskon-community-task-progress-tip {
+    margin-top: 2.13vw;
+    font-size: 3.2vw;
+    line-height: 4.27vw;
+  }
+}
+/**
+ * ProgressUi 组件样式
+ * 复刻 Vue 版本 ProgressUi.vue 的样式
+ */
+
+.taskon-community-task-progress-ui {
+  display: flex;
+  align-items: center;
+  width: 200px;
+  height: 4px;
+  max-width: 100%;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 30px;
+}
+
+.taskon-community-task-progress-ui__bar {
+  height: 100%;
+  background: linear-gradient(
+    89.87deg,
+    var(--taskon-color-secondary, #00ffa3) 0.13%,
+    var(--taskon-color-primary, #cbff01) 99.92%
+  );
+  border-radius: 30px;
+}
+
+/* ==================== 响应式 ==================== */
+@media (max-width: 750px) {
+  .taskon-community-task-progress-ui {
+    width: 100%;
+    height: 1.067vw;
+    border-radius: 4vw;
+  }
+
+  .taskon-community-task-progress-ui__bar {
+    border-radius: 4vw;
+  }
+}
+/**
+ * BaseTask 组件样式
+ * 复刻原版 CmBaseTask.vue 的样式
+ * 使用 Widget 命名空间扁平化方案
+ * 所有类名使用 .taskon-community-* 前缀，避免跨 Widget 冲突
+ * 直接使用 dark 模式颜色值
+ */
+
+/* 卡片外层容器 */
+.taskon-community-task-wrap {
+  height: 100%;
+}
+
+/* 卡片主体 */
+.taskon-community-task {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  border-radius: 10px;
+  border: 1px solid rgb(255 255 255 / 4%);
+  background: #1f1f1f;
+  min-height: 230px;
+  height: 100%;
+  cursor: pointer;
+  overflow: hidden;
+  transition: all 0.2s ease-in-out;
+}
+
+/* 完成状态卡片样式 */
+.taskon-community-task--won {
+  border-color: rgb(203 255 1 / 20%);
+  background: rgb(203 255 1 / 4%);
+  min-height: 184px;
+}
+
+/* 禁用状态 */
+.taskon-community-task--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+/* 禁用遮罩 */
+.taskon-community-task-disabled-mask {
+  position: absolute;
+  inset: 0;
+  background: transparent;
+  z-index: 2;
+}
+
+/* 周期标签 */
+.taskon-community-task-badge {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: rgb(255 255 255 / 4%);
+  color: rgb(255 255 255 / 60%);
+  font-size: 13px;
+  line-height: 16px;
+  z-index: 1;
+}
+
+/* 内容容器 - 占据剩余空间 */
+.taskon-community-task-container {
+  flex: 1;
+}
+
+/* 任务标题 */
+.taskon-community-task-title {
+  margin: 0;
+  padding-right: 50px;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 20px;
+  color: rgba(255, 255, 255, 0.95);
+  word-break: break-word;
+}
+
+/* 任务标题 - 链接样式 */
+.taskon-community-task-title--link {
+  display: block;
+  text-decoration: none;
+  color: var(--taskon-color-primary, #6366f1);
+  transition: color 0.2s ease;
+}
+
+.taskon-community-task-title--link:hover {
+  color: var(--taskon-color-primary-hover, #818cf8);
+  text-decoration: underline;
+}
+
+/* 有效时间 */
+.taskon-community-task-time {
+  margin-top: 10px;
+  font-size: 14px;
+  line-height: 16px;
+}
+
+.taskon-community-task-time-label {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.taskon-community-task-time-value {
+  margin-left: 4px;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+/* Action 按钮区域 */
+.taskon-community-task-action-wrap {
+  margin-top: 10px;
+}
+
+/* Action 按钮 - 复刻原版 ActionButton.vue */
+.taskon-community-task-action {
+  width: 100%;
+  height: 34px;
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  border: none;
+  background: rgb(203 255 1 / 12%);
+  color: #cbff01;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 34px;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.taskon-community-task-action:hover {
+  background: #cbff01;
+  color: #0d0d0d;
+}
+
+.taskon-community-task-action:active {
+  transform: scale(0.98);
+}
+
+/* 底部区域 */
+.taskon-community-task-footer {
+  margin-top: 10px;
+}
+
+/* Claim 按钮区域 */
+.taskon-community-task-claim-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+/* Claim 按钮 - 复刻原版 ClaimButton.vue */
+.taskon-community-task-claim {
+  min-width: 77px;
+  height: 34px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 10px;
+  border-radius: 6px;
+  border: 1px solid rgba(255, 255, 255, 0.9);
+  background: transparent;
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 18px;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+}
+
+.taskon-community-task-claim:hover:not(:disabled) {
+  opacity: 0.8;
+}
+
+.taskon-community-task-claim:active:not(:disabled) {
+  transform: scale(0.98);
+}
+
+.taskon-community-task-claim--loading {
+  background: rgba(255, 255, 255, 0.1);
+  border: none;
+  cursor: not-allowed;
+}
+
+.taskon-community-task-claim:disabled {
+  opacity: 0.2;
+  cursor: not-allowed;
+}
+
+/* 冷却文本 */
+.taskon-community-task-cooldown {
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 14px;
+  line-height: 18px;
+  text-align: right;
+}
+
+/* ClaimRow - 未完成状态底部：奖励信息 + Claim 按钮 */
+.taskon-community-task-claim-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+/* Unlimited 任务已有积分时的 refresh 样式 */
+/* 复刻 Vue 版本 ClaimRow.vue 中的 .refresh-bg 样式 */
+.taskon-community-task-claim-row--refresh {
+  background: rgb(255 255 255 / 4%);
+  padding-right: 10px;
+  border-radius: 6px;
+}
+
+/* refresh 模式下左侧奖励信息样式 */
+.taskon-community-task-claim-row--refresh .taskon-community-task-reward {
+  background: transparent;
+}
+
+/* 奖励信息（ClaimRow 左侧） */
+.taskon-community-task-reward {
+  max-width: 100%;
+  height: 34px;
+  padding: 0 10px;
+  display: flex;
+  align-items: center;
+  border-radius: 6px;
+  background: rgb(255 255 255 / 4%);
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 18px;
+}
+
+.taskon-community-task-reward-icon {
+  width: 18px;
+  height: 18px;
+  margin-right: 4px;
+  object-fit: contain;
+}
+
+.taskon-community-task-reward-amount {
+  color: #cbff01; /* secondary-100 */
+}
+
+.taskon-community-task-reward-name {
+  margin-left: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: rgba(255, 255, 255, 0.9);
+}
+
+/* Token 链图标 */
+.taskon-community-task-reward-chain {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  margin: 0 2px 0 4px;
+  object-fit: cover;
+}
+
+/* Token 奖励容器（需要 relative 定位） */
+.taskon-community-task-reward--token {
+  position: relative;
+}
+
+/* Token 进度条（底部绝对定位，翻转显示） */
+.taskon-community-task-reward-progress {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  transform: rotate(180deg);
+}
+
+/* 完成状态奖励展示 */
+.taskon-community-task-won {
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  line-height: 20px;
+  min-height: 27px;
+}
+
+/* IconCheckedTask 图标 - 复刻原版 won__checked */
+.taskon-community-task-won-checked {
+  width: 20px;
+  height: 20px;
+  color: #cbff01; /* primary-100 */
+  flex-shrink: 0;
+}
+
+/* 非周期任务完成状态 - ✓ 数量 名称 Won */
+.taskon-community-task-won-check {
+  width: 20px;
+  height: 20px;
+  color: #cbff01;
+  font-weight: bold;
+}
+
+.taskon-community-task-won-amount {
+  margin-left: 6px;
+  color: #cbff01;
+  font-weight: 700;
+}
+
+/* 名称 + pointIcon 的容器 - 复刻原版 won__text-wrapper */
+.taskon-community-task-won-text-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.taskon-community-task-won-name {
+  margin-left: 4px;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.9);
+}
+
+/* pointIcon - 复刻原版 won__icon */
+.taskon-community-task-won-point-icon {
+  width: 12px;
+  height: 12px;
+}
+
+/* Bling 闪烁图标 - 复刻原版 won__bling */
+.taskon-community-task-won-bling {
+  margin-left: 4px;
+  width: 27px;
+  height: 27px;
+  flex-shrink: 0;
+}
+
+.taskon-community-task-won-icon {
+  width: 12px;
+  height: 12px;
+  margin-left: 4px;
+}
+
+.taskon-community-task-won-status {
+  margin-left: auto;
+  color: #27ae60;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 18px;
+}
+
+/* 周期任务完成状态 - 单次奖励 + 累计奖励 */
+.taskon-community-task-won--periodic {
+  gap: 0;
+}
+
+.taskon-community-task-won-single {
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.taskon-community-task-won-label {
+  margin-left: 4px;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.taskon-community-task-won-total {
+  margin-left: 6px;
+  color: #cbff01;
+  font-weight: 700;
+}
+
+.taskon-community-task-won-earned {
+  margin-left: 4px;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: rgba(255, 255, 255, 0.9);
+}
+
+/* 兼容旧样式 */
+.taskon-community-task-won-text {
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 14px;
+  line-height: 18px;
+}
+
+.taskon-community-task-won-reward {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+/* ========== 审核状态样式 ========== */
+/* 复刻原版 CmBaseTask.vue 的 won__status 样式 */
+
+/* 审核状态基础样式 */
+.taskon-community-task-review-status {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 77px;
+  height: 34px;
+  padding: 0 10px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 18px;
+}
+
+/* 审核失败：红色样式 - 复刻原版 #eb5757 */
+.taskon-community-task-review-status--failed {
+  background: rgba(235, 87, 87, 0.1);
+  color: #eb5757;
+}
+
+/* 审核中：紫色样式 - 复刻原版 #9b51e0 */
+.taskon-community-task-review-status--review {
+  background: rgba(155, 81, 224, 0.1);
+  color: #9b51e0;
+}
+
+/* ========== 响应式样式（移动端） ========== */
+@media (max-width: 750px) {
+  .taskon-community-task {
+    padding: 6vw;
+    min-height: 60vw;
+    border-radius: 2.67vw;
+  }
+
+  .taskon-community-task--won {
+    min-height: 46vw;
+  }
+
+  .taskon-community-task-badge {
+    top: 2.67vw;
+    right: 2.67vw;
+    padding: 0.53vw 1.87vw;
+    font-size: 3.47vw;
+    line-height: 4.4vw;
+    border-radius: 1.07vw;
+  }
+
+  .taskon-community-task-title {
+    font-size: 4.8vw;
+    line-height: 6vw;
+    padding-right: 13.33vw;
+  }
+
+  .taskon-community-task-time {
+    margin-top: 2.67vw;
+    font-size: 3.73vw;
+    line-height: 4.67vw;
+  }
+
+  .taskon-community-task-time-value {
+    margin-left: 1.07vw;
+  }
+
+  .taskon-community-task-action-wrap {
+    margin-top: 2.67vw;
+  }
+
+  .taskon-community-task-action {
+    height: 9.33vw;
+    padding: 0 4vw;
+    border-radius: 1.6vw;
+    font-size: 3.73vw;
+    line-height: 9.33vw;
+  }
+
+  .taskon-community-task-footer {
+    margin-top: 2.67vw;
+  }
+
+  .taskon-community-task-claim {
+    min-width: 13.33vw;
+    height: 9.33vw;
+    padding: 0 2.67vw;
+    border-radius: 1.6vw;
+    font-size: 3.73vw;
+    line-height: 4.67vw;
+  }
+
+  .taskon-community-task-cooldown {
+    font-size: 3.73vw;
+    line-height: 4.67vw;
+  }
+
+  .taskon-community-task-reward {
+    height: 9.33vw;
+    padding: 0 2.67vw;
+    font-size: 3.73vw;
+    line-height: 4.67vw;
+  }
+
+  .taskon-community-task-reward-icon {
+    width: 4.67vw;
+    height: 4.67vw;
+    margin-right: 0.8vw;
+  }
+
+  .taskon-community-task-reward-name {
+    margin-left: 0.8vw;
+  }
+
+  .taskon-community-task-won {
+    gap: 2.13vw;
+  }
+
+  .taskon-community-task-won-checked {
+    width: 5.33vw;
+    height: 5.33vw;
+  }
+
+  .taskon-community-task-won-text {
+    font-size: 3.73vw;
+    line-height: 4.67vw;
+  }
+
+  .taskon-community-task-won-amount {
+    margin-left: 1.6vw;
+    font-size: 4.27vw;
+    line-height: 5.33vw;
+  }
+
+  .taskon-community-task-won-text-wrapper {
+    gap: 1.07vw;
+  }
+
+  .taskon-community-task-won-name {
+    margin-left: 1.07vw;
+    font-size: 4.27vw;
+    line-height: 5.33vw;
+  }
+
+  .taskon-community-task-won-point-icon {
+    width: 3.2vw;
+    height: 3.2vw;
+  }
+
+  .taskon-community-task-won-bling {
+    margin-left: 1.07vw;
+    width: 7.2vw;
+    height: 7.2vw;
+  }
+
+  .taskon-community-task-won-reward {
+    gap: 1.07vw;
+  }
+
+  .taskon-community-task-won-icon {
+    width: 5.33vw;
+    height: 5.33vw;
+  }
+
+  /* 审核状态移动端样式 */
+  .taskon-community-task-review-status {
+    min-width: 13.33vw;
+    height: 9.33vw;
+    padding: 0 2.67vw;
+    border-radius: 1.6vw;
+    font-size: 3.73vw;
+    line-height: 4.67vw;
+  }
+}
+
+/* ========== 登录遮层（复刻原版 login-mask） ========== */
+.taskon-community-task-login-mask {
+  position: absolute;
+  inset: 0;
+  background: transparent;
+  cursor: pointer;
+  z-index: 3;
+}
+/**
+ * CardField 组件样式
+ * 复刻原版 CardField.vue 的样式
+ */
+
+.taskon-community-task-field {
+  margin-top: 10px;
+  font-size: 14px;
+  line-height: 18px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  word-break: break-word;
+  overflow-wrap: break-word;
+}
+
+.taskon-community-task-field-label {
+  color: rgb(255 255 255 / 40%); /* --color-dark */
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow-wrap: break-word;
+}
+
+.taskon-community-task-field-link {
+  color: rgb(255 255 255 / 80%); /* --color-lighter，与 value 颜色一致 */
+  text-decoration: none;
+  cursor: pointer;
+  word-break: break-all;
+  overflow-wrap: break-word;
+}
+
+.taskon-community-task-field-link:hover {
+  text-decoration: underline;
+}
+
+.taskon-community-task-field-value {
+  color: rgb(255 255 255 / 80%); /* --color-lighter */
+  word-break: break-word;
+  overflow-wrap: break-word;
+}
+
+/* ========== 复制按钮样式 ========== */
+.taskon-community-task-field-copy {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  transition: opacity 0.2s;
+  flex-shrink: 0; /* 防止按钮被压缩 */
+}
+
+.taskon-community-task-field-copy:hover {
+  opacity: 0.7;
+}
+
+.taskon-community-task-field-copy-icon {
+  width: 14px;
+  height: 14px;
+  color: rgb(255 255 255 / 60%); /* --color-darker */
+}
+
+.taskon-community-task-field-copy--copied .taskon-community-task-field-copy-icon {
+  color: #cbff01; /* --link-color / --secondary-100 */
+}
+
+/* ========== 响应式样式（移动端） ========== */
+@media (max-width: 750px) {
+  .taskon-community-task-field {
+    margin-top: 2.67vw;
+    font-size: 3.73vw;
+    line-height: 4.67vw;
+    gap: 1.07vw;
+  }
+
+  .taskon-community-task-field-copy-icon {
+    width: 3.73vw;
+    height: 3.73vw;
+  }
+}
+/**
+ * UserEligibilityMask 样式
+ * 复刻 Vue 版本的样式，遵循项目 CSS 命名规范
+ */
+
+/* ==================== 根元素 ==================== */
+.taskon-eligibility-mask {
+  position: absolute;
+  inset: 0;
+  -webkit-backdrop-filter: blur(14px);
+  backdrop-filter: blur(14px);
+  z-index: 10;
+  padding: 20px;
+  border: 1px solid var(--taskon-border-color, rgba(255, 255, 255, 0.1));
+  border-radius: 10px;
+  box-sizing: border-box;
+}
+
+/* ==================== 奖励信息区 ==================== */
+.taskon-eligibility-mask-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: var(--taskon-color-lighter, #999);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+}
+
+.taskon-eligibility-mask-lock-icon {
+  width: 22px;
+  height: 22px;
+  flex-shrink: 0;
+}
+
+.taskon-eligibility-mask-highlight {
+  color: var(--taskon-secondary-100, #6366f1);
+}
+
+/* ==================== 任务名称 ==================== */
+.taskon-eligibility-mask-title {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  margin: 10px 0 0;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  color: var(--taskon-text-color, #fff);
+}
+
+/* ==================== 条件提示行 ==================== */
+.taskon-eligibility-mask-tip {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 4px;
+  gap: 10px;
+}
+
+.taskon-eligibility-mask-cond-title {
+  color: var(--taskon-color-lightest, #ccc);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+
+.taskon-eligibility-mask-cond-label {
+  color: var(--taskon-secondary-100, #6366f1);
+}
+
+/* Check 按钮 */
+.taskon-eligibility-mask-check-btn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background: var(--taskon-color-lightest, #ccc);
+  color: var(--taskon-color-lightest-inverse, #000);
+  padding: 2px 6px;
+  border: none;
+  border-radius: 4px;
+  height: 22px;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: opacity 0.2s;
+  flex-shrink: 0;
+}
+
+.taskon-eligibility-mask-check-btn:hover {
+  opacity: 0.8;
+}
+
+.taskon-eligibility-mask-check-btn--loading {
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+.taskon-eligibility-mask-check-btn--loading:hover {
+  opacity: 0.7;
+}
+
+.taskon-eligibility-mask-reload-icon {
+  width: 12px;
+  height: 12px;
+}
+
+/* Loading 旋转动画 */
+.taskon-eligibility-mask-reload-icon--spinning {
+  animation: taskon-eligibility-spin 1s linear infinite;
+}
+
+@keyframes taskon-eligibility-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ==================== 分割线 ==================== */
+.taskon-eligibility-mask-divider {
+  margin: 15px 0;
+  height: 0;
+  border: none;
+  border-top: 0.5px dashed var(--taskon-color-darkest, #333);
+}
+
+/* ==================== 条件列表 ==================== */
+.taskon-eligibility-mask-list {
+  overflow: hidden auto;
+  height: calc(100% - 100px);
+}
+
+/* ==================== 条件项 ==================== */
+.taskon-eligibility-mask-item {
+  display: flex;
+  align-items: baseline;
+  gap: 15px;
+  height: 24px;
+  margin-top: 6px;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  color: var(--taskon-text-color, #fff);
+}
+
+.taskon-eligibility-mask-item:first-child {
+  margin-top: 0;
+}
+
+.taskon-eligibility-mask-item-icon {
+  width: 10px;
+  height: 10px;
+  flex-shrink: 0;
+}
+
+/* 条件文案 */
+.taskon-eligibility-mask-item-text {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  flex: 1;
+}
+
+/* 前置任务链接 */
+.taskon-eligibility-mask-item-link {
+  color: inherit;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.taskon-eligibility-mask-item-link:hover {
+  opacity: 0.8;
+}
+
+/* ==================== 响应式（移动端） ==================== */
+@media (max-width: 750px) {
+  .taskon-eligibility-mask {
+    padding: 6vw;
+    border-radius: 3.2vw;
+  }
+
+  .taskon-eligibility-mask-item-icon {
+    width: 1.867vw;
+    height: 1.867vw;
+  }
+
+  .taskon-eligibility-mask-head {
+    font-size: 3.733vw;
+    font-weight: 700;
+  }
+
+  .taskon-eligibility-mask-lock-icon {
+    width: 6.4vw;
+    height: 6.4vw;
+  }
+
+  .taskon-eligibility-mask-title {
+    font-size: 3.733vw;
+    margin-top: 1.333vw;
+  }
+
+  .taskon-eligibility-mask-cond-title {
+    font-size: 3.2vw;
+  }
+
+  .taskon-eligibility-mask-check-btn {
+    font-size: 3.2vw;
+    height: 5.067vw;
+  }
+
+  .taskon-eligibility-mask-reload-icon {
+    width: 2.667vw;
+    height: 2.667vw;
+  }
+
+  .taskon-eligibility-mask-divider {
+    margin-top: 3.067vw;
+    margin-bottom: 3.067vw;
+  }
+
+  .taskon-eligibility-mask-list {
+    height: calc(100% - 20vw);
+  }
+
+  .taskon-eligibility-mask-item {
+    font-size: 3.2vw;
+    gap: 2vw;
+  }
+}
+/**
+ * TemplateTask 组件样式
+ * 通用模版任务样式，包含展开/收起功能
+ */
+
+/* 任务卡片包裹（用于遮罩场景） */
+.taskon-template-task-wrap {
+  position: relative;
+}
+
+/* 展开/收起按钮 */
+.taskon-community-task-expand-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: 10px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 13px;
+  line-height: 16px;
+  cursor: pointer;
+  transition: color 0.2s ease;
+}
+
+.taskon-community-task-expand-btn:hover {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.taskon-community-task-expand-text {
+  text-decoration: underline;
+}
+
+/* 展开图标 */
+.taskon-community-task-expand-icon {
+  transition: transform 0.2s ease;
+}
+
+/* 展开状态图标旋转 */
+.taskon-community-task-expand-icon--expanded {
+  transform: rotate(180deg);
+}
+
+/* 移动端适配 */
+@media (max-width: 750px) {
+  .taskon-community-task-expand-btn {
+    margin-top: 2.67vw;
+    gap: 1.07vw;
+    font-size: 3.47vw;
+    line-height: 4.27vw;
+  }
+
+  .taskon-community-task-expand-icon {
+    width: 3.2vw;
+    height: 3.2vw;
+  }
+}
+/**
+ * PowTask 组件样式
+ * 使用 Widget 命名空间扁平化方案
+ * 所有类名使用 .taskon-community-pow-* 前缀，避免冲突
+ */
+
+/* 任务卡片包裹（用于遮罩场景） */
+.taskon-pow-task-wrap {
+  position: relative;
+}
+
+/* 任务描述 */
+.taskon-community-pow-desc {
+  margin-top: 12px;
+  font-size: 14px;
+  line-height: 20px;
+  color: rgb(255 255 255 / 80%);
+}
+
+/* 任务链接 */
+.taskon-community-pow-link {
+  display: inline-block;
+  margin-top: 8px;
+  font-size: 14px;
+  color: #cbff01;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.taskon-community-pow-link:hover {
+  text-decoration: underline;
+}
+
+/* 审核状态文本（简化版，直接显示在卡片上） */
+.taskon-community-pow-review-status {
+  margin-top: 12px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+}
+
+/* 审核中 */
+.taskon-community-pow-review-status--pending {
+  color: #ffc107;
+}
+
+/* 审核失败 */
+.taskon-community-pow-review-status--failed {
+  color: #f44336;
+}
+
+/* 响应式 */
+@media (max-width: 750px) {
+  .taskon-community-pow-desc {
+    font-size: 13px;
+    line-height: 18px;
+  }
+
+  .taskon-community-pow-review-status {
+    font-size: 13px;
+  }
+}
+/**
+ * ContractInteractiveTask 组件样式
+ * 使用 Widget 命名空间扁平化方案
+ */
+
+/* 任务卡片包裹（用于遮罩场景） */
+.taskon-contract-task-wrap {
+  position: relative;
+}
+/**
+ * SwapDexTask 组件样式
+ * 使用 Widget 命名空间扁平化方案
+ */
+
+/* 任务卡片包裹（用于遮罩场景） */
+.taskon-swap-task-wrap {
+  position: relative;
+}
+/**
+ * CommunityTask 组件样式
+ * 复刻原版 CmTaskCard.vue 的样式
+ */
+
+/* 任务卡片容器 */
+.taskon-community-task-item {
+  position: relative;
+  transition: all 0.3s;
+  overflow: hidden;
+  height: 100%;
+}
+
+/* Hover 效果（PC 端） */
+@media (min-width: 751px) {
+  .taskon-community-task-item--hover:hover .taskon-community-task {
+    background: #2a2a2a; /* 卡片 hover 背景色 */
+  }
+
+  .taskon-community-task-item--hover:hover .taskon-community-task--won {
+    background: rgba(203, 255, 1, 0.08); /* 完成状态 hover 背景 */
+  }
+}
+
+/* 禁用状态 */
+.taskon-community-task-item--disabled {
+  opacity: 0.4;
+}
+
+/* 禁用遮罩 */
+.taskon-community-task-item-mask {
+  position: absolute;
+  inset: 0;
+  cursor: not-allowed;
+  z-index: 1;
+}
+/**
+ * RewardsRowHoverScroll Styles
+ * Matches Vue version: RewardsRowHoverScroll.vue
+ */
+
+.taskon-rewards-row-carousel {
+  display: flex;
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+  text-align: left;
+}
+
+.taskon-rewards-row-carousel:hover .taskon-rewards-row-inner--scrollable {
+  animation: taskon-rewards-row-scroll var(--scroll-duration, 10s) linear infinite;
+}
+
+.taskon-rewards-row-inner {
+  display: inline-flex;
+  flex-shrink: 0;
+  gap: 6px;
+}
+
+@keyframes taskon-rewards-row-scroll {
+  0% {
+    transform: translateX(0);
+  }
+  49.99% {
+    transform: translateX(-101%);
+  }
+  50% {
+    transform: translateX(101%);
+  }
+}
+
+/* Mobile responsive */
+@media (max-width: 750px) {
+  .taskon-rewards-row-inner {
+    gap: 1.333vw;
+  }
+}
+/**
+ * TaskChainCard Styles
+ */
+
+/* Wrapper with stacked card effect */
+.taskon-taskchain-card-wrapper {
+  position: relative;
+  height: 100%;
+  padding-top: 30px;
+}
+
+/* Stacked cards behind main card */
+.taskon-taskchain-card-stack {
+  position: absolute;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 10px;
+  height: 40px;
+  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.1);
+}
+
+.taskon-taskchain-card-stack--1 {
+  left: 37px;
+  right: 37px;
+  top: 4px;
+  background: #1a1a1a;
+}
+
+.taskon-taskchain-card-stack--2 {
+  left: 24px;
+  right: 24px;
+  top: 12px;
+  background: #1f1f1f;
+}
+
+.taskon-taskchain-card-stack--3 {
+  left: 10px;
+  right: 10px;
+  top: 20px;
+  background: #222222;
+}
+
+/* Main card */
+.taskon-taskchain-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-height: 200px;
+  padding: 20px;
+  background-color: var(--taskon-bg-secondary, #252525);
+  border-radius: 10px;
+  cursor: pointer;
+  overflow: hidden;
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.taskon-taskchain-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+}
+
+.taskon-taskchain-card--disabled {
+  cursor: not-allowed;
+}
+
+.taskon-taskchain-card--disabled:hover {
+  transform: none;
+  box-shadow: none;
+}
+
+/* Card name */
+.taskon-taskchain-card-name {
+  font-size: 16px;
+  font-weight: 600;
+  word-break: break-word;
+  padding-right: 48px;
+  color: var(--taskon-text-primary, #fff);
+}
+
+/* Spots left */
+.taskon-taskchain-card-spots {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: 10px;
+  font-size: 14px;
+  color: var(--taskon-text-primary, #fff);
+}
+
+.taskon-taskchain-card-spots-label {
+  color: var(--taskon-text-secondary, #999);
+}
+
+/* Description */
+.taskon-taskchain-card-desc {
+  margin-top: 8px;
+  margin-bottom: 16px;
+  font-size: 14px;
+  color: var(--taskon-text-secondary, #999);
+  line-height: 1.5;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* Footer */
+.taskon-taskchain-card-footer {
+  display: flex;
+  align-items: center;
+  margin-top: auto;
+}
+
+/* Rewards container */
+.taskon-taskchain-card-rewards {
+  display: flex;
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+/* Individual reward item */
+.taskon-taskchain-card-reward-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 8px;
+  background-color: rgba(255, 255, 255, 0.05);
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+
+/* Reward icon */
+.taskon-taskchain-card-reward-icon {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+}
+
+/* Reward amount */
+.taskon-taskchain-card-reward-amount {
+  font-size: 14px;
+  font-weight: 600;
+  color: #eeb803;
+}
+
+.taskon-taskchain-card-reward-amount--points {
+  color: #00ffa3;
+}
+
+/* Reward name */
+.taskon-taskchain-card-reward-name {
+  font-size: 14px;
+  color: var(--taskon-text-primary, #fff);
+}
+
+/* NFT reward icon (rounded corners for NFT images) */
+.taskon-taskchain-card-reward-icon--nft {
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+/* NFT reward name (with truncation for long names) */
+.taskon-taskchain-card-reward-name--nft {
+  max-width: 150px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Won status */
+.taskon-taskchain-card-won {
+  margin-left: 16px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #27ae60;
+  flex-shrink: 0;
+}
+
+/* Overlays */
+.taskon-taskchain-card-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: inherit;
+}
+
+.taskon-taskchain-card-overlay--ended {
+  background-color: rgba(0, 0, 0, 0.7);
+}
+
+.taskon-taskchain-card-overlay-text {
+  font-size: 16px;
+  font-weight: 600;
+  color: #fff;
+  text-transform: uppercase;
+}
+
+.taskon-taskchain-card-overlay--locked {
+  background-color: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(2px);
+}
+
+/* Lock icon */
+.taskon-taskchain-card-lock-icon {
+  width: 72px;
+  height: 72px;
+}
+
+/* Lock hover content */
+.taskon-taskchain-card-lock-hover {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  background-color: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border-radius: inherit;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.taskon-taskchain-card-overlay--locked:hover .taskon-taskchain-card-lock-icon:first-child {
+  display: none;
+}
+
+.taskon-taskchain-card-overlay--locked:hover .taskon-taskchain-card-lock-hover {
+  opacity: 1;
+}
+
+.taskon-taskchain-card-lock-hover .taskon-taskchain-card-lock-icon {
+  width: 64px;
+  height: 64px;
+}
+
+/* Lock text */
+.taskon-taskchain-card-lock-text {
+  font-size: 14px;
+  text-align: center;
+  color: #fff;
+  white-space: nowrap;
+}
+
+.taskon-taskchain-card-lock-highlight {
+  color: #00ffa3;
+  text-transform: capitalize;
+}
+
+/* Mobile responsive */
+@media (max-width: 750px) {
+  .taskon-taskchain-card-wrapper {
+    padding-top: 20px;
+  }
+
+  .taskon-taskchain-card-stack {
+    border-radius: 8px;
+    height: 20px;
+  }
+
+  .taskon-taskchain-card-stack--1 {
+    left: 28px;
+    right: 28px;
+    top: 2px;
+  }
+
+  .taskon-taskchain-card-stack--2 {
+    left: 18px;
+    right: 18px;
+    top: 8px;
+  }
+
+  .taskon-taskchain-card-stack--3 {
+    left: 8px;
+    right: 8px;
+    top: 14px;
+  }
+
+  .taskon-taskchain-card {
+    min-height: 50vw;
+    padding: 16px;
+    border-radius: 8px;
+  }
+
+  .taskon-taskchain-card-name {
+    font-size: 14px;
+    padding-right: 24px;
+  }
+
+  .taskon-taskchain-card-spots {
+    margin-top: 8px;
+    font-size: 12px;
+  }
+
+  .taskon-taskchain-card-desc {
+    font-size: 12px;
+  }
+
+  .taskon-taskchain-card-rewards {
+    gap: 6px;
+  }
+
+  .taskon-taskchain-card-reward-item {
+    padding: 6px;
+  }
+
+  .taskon-taskchain-card-reward-icon {
+    width: 16px;
+    height: 16px;
+  }
+
+  .taskon-taskchain-card-reward-amount,
+  .taskon-taskchain-card-reward-name {
+    font-size: 12px;
+  }
+
+  .taskon-taskchain-card-lock-icon {
+    width: 48px;
+    height: 48px;
+  }
+
+  .taskon-taskchain-card-lock-hover .taskon-taskchain-card-lock-icon {
+    width: 40px;
+    height: 40px;
+  }
+
+  .taskon-taskchain-card-lock-text {
+    font-size: 12px;
+  }
+}
+/**
+ * StepIndicator Styles
+ * @description CSS for TaskChain step indicator component
+ */
+
+/* Container - flex layout with items aligned at bottom */
+.taskon-taskchain-step-indicator {
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+  position: relative;
+}
+
+/* Step bars container */
+.taskon-taskchain-step-indicator-bars {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  gap: 8px;
+}
+
+/* Individual step bar */
+.taskon-taskchain-step-bar {
+  height: 6px;
+  flex: 1;
+  border-radius: 2px;
+  transition: background-color 0.3s ease;
+}
+
+/* Completed step - bright green */
+.taskon-taskchain-step-bar--completed {
+  background-color: #cbff01;
+}
+
+/* Pending step - dim green */
+.taskon-taskchain-step-bar--pending {
+  background-color: rgb(203 255 1 / 20%);
+}
+
+/* Flag icon at the end */
+.taskon-taskchain-step-indicator-flag {
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
+
+/* Mobile responsive styles */
+@media (max-width: 750px) {
+  .taskon-taskchain-step-indicator {
+    gap: 5vw;
+  }
+
+  .taskon-taskchain-step-indicator-bars {
+    gap: 5vw;
+  }
+
+  .taskon-taskchain-step-bar {
+    height: 1.333vw;
+  }
+
+  .taskon-taskchain-step-indicator-flag {
+    width: 10vw;
+    height: 10vw;
+  }
+}
+/**
+ * TaskChainDetailTime Styles
+ * @description Time range and spots display for TaskChain
+ */
+
+.taskon-taskchain-time {
+  width: 100%;
+}
+
+.taskon-taskchain-time-row {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+}
+
+.taskon-taskchain-time-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.taskon-taskchain-time-icon {
+  width: 16px;
+  height: 16px;
+  color: var(--taskon-text-tertiary, #666);
+}
+
+.taskon-taskchain-time-text {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--taskon-text-secondary, #999);
+}
+
+.taskon-taskchain-time-divider {
+  width: 1px;
+  height: 20px;
+  background-color: var(--taskon-border-color, #333);
+}
+
+.taskon-taskchain-time-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--taskon-text-secondary, #999);
+}
+
+.taskon-taskchain-time-value {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--taskon-text-primary, #fff);
+}
+
+/* Mobile styles */
+@media (max-width: 768px) {
+  .taskon-taskchain-time-row {
+    gap: 10px;
+  }
+
+  .taskon-taskchain-time-item {
+    gap: 4px;
+  }
+
+  .taskon-taskchain-time-icon {
+    width: 12px;
+    height: 12px;
+  }
+
+  .taskon-taskchain-time-text,
+  .taskon-taskchain-time-label,
+  .taskon-taskchain-time-value {
+    font-size: 12px;
+  }
+
+  .taskon-taskchain-time-divider {
+    height: 12px;
+  }
+}
+/**
+ * RewardDisplay Styles
+ * @description Reward preview badge styles
+ */
+
+.taskon-taskchain-reward-display {
+  position: relative;
+}
+
+.taskon-taskchain-reward-display-inner {
+  position: relative;
+  border-radius: 8px;
+  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.2));
+  padding: 2px;
+}
+
+.taskon-taskchain-reward-display-content {
+  position: relative;
+  display: flex;
+  border-radius: 8px;
+  background-color: #1a1a1a;
+}
+
+.taskon-taskchain-reward-display-item {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 8px 12px;
+  min-width: 60px;
+}
+
+.taskon-taskchain-reward-display-icon {
+  width: 24px;
+  height: 24px;
+  object-fit: contain;
+}
+
+.taskon-taskchain-reward-display-icon--nft {
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.taskon-taskchain-reward-display-text {
+  font-size: 12px;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.taskon-taskchain-reward-display-text--token {
+  color: #eeb803;
+}
+
+.taskon-taskchain-reward-display-text--points {
+  color: var(--taskon-secondary, #cbff01);
+}
+
+.taskon-taskchain-reward-display-text--nft {
+  color: #fff;
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.taskon-taskchain-reward-display-pointer {
+  position: absolute;
+  right: 20px;
+  top: 100%;
+}
+
+.taskon-taskchain-reward-display-pointer svg {
+  display: block;
+}
+/**
+ * TaskChainRewardStep Styles
+ */
+
+/* Container */
+.taskon-taskchain-reward-step {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  max-width: 480px;
+  margin: 0 auto;
+  text-align: center;
+}
+
+/* Content wrapper */
+.taskon-taskchain-reward-content {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+}
+
+/* Title */
+.taskon-taskchain-reward-title {
+  font-size: 32px;
+  font-weight: 600;
+  line-height: 40px;
+  color: var(--taskon-text-primary, #fff);
+  margin-bottom: 12px;
+}
+
+/* Subtitle */
+.taskon-taskchain-reward-subtitle {
+  font-size: 16px;
+  color: var(--taskon-text-secondary, #999);
+}
+
+/* ============================================================================
+ * WinRewards - Scatter Layout (Unclaimed State)
+ * Matches Vue: WinRewards.vue - absolute positioned cards with spread animation
+ * ============================================================================ */
+
+/* Container for scatter-positioned reward cards */
+.taskon-taskchain-win-rewards {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 240px;
+  padding: 32px;
+  margin-top: 16px;
+}
+
+/* Individual scatter card - absolute positioned */
+.taskon-taskchain-win-reward-card {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  /* Initial state: centered, half scale, invisible */
+  transform: translate(0px, 0px) scale(0.5);
+  opacity: 0;
+  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+/* Spread animation active - transform is set inline via style */
+.taskon-taskchain-win-reward-card--spread {
+  opacity: 1;
+}
+
+/* Large reward icon for scatter layout */
+.taskon-taskchain-win-reward-icon {
+  width: 72px;
+  height: 72px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+/* Reward text below icon */
+.taskon-taskchain-win-reward-text {
+  font-size: 20px;
+  font-weight: 500;
+  color: var(--taskon-text-primary, #fff);
+  max-width: 200px;
+  overflow: visible;
+  text-wrap: wrap;
+  text-align: center;
+  line-height: 1.3;
+}
+
+/* Token amount color */
+.taskon-taskchain-win-reward-text--token {
+  color: #fbb15a;
+}
+
+/* Points amount color */
+.taskon-taskchain-win-reward-text--points {
+  color: #4b5eff;
+}
+
+/* ============================================================================
+ * ClaimedRewards - Green Card (Claimed State)
+ * Matches Vue: ClaimedRewards.vue - green-tinted card container
+ * ============================================================================ */
+
+/* Claimed rewards outer container (matches Vue: tw-flex tw-w-full tw-flex-col tw-gap-3) */
+.taskon-taskchain-claimed-rewards-wrap {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: 12px;
+  margin-top: 16px;
+}
+
+/* Green card container for non-NFT rewards */
+.taskon-taskchain-claimed-card {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  border: 1px solid rgb(60 232 155 / 20%);
+  background-color: rgb(0 255 163 / 10%);
+}
+
+/* Multi-reward: flex-wrap centered layout */
+.taskon-taskchain-claimed-card--multi {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+/* Individual claimed reward item */
+.taskon-taskchain-claimed-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-width: 60px;
+  min-height: 80px;
+  padding: 12px 16px;
+  background-color: transparent;
+}
+
+/* Multi-reward item: vertical layout */
+.taskon-taskchain-claimed-item--multi {
+  flex-direction: column;
+  gap: 8px;
+}
+
+/* Claimed reward icon - single reward */
+.taskon-taskchain-claimed-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+/* Claimed reward icon - multi reward (smaller) */
+.taskon-taskchain-claimed-icon--multi {
+  width: 24px;
+  height: 24px;
+}
+
+/* Claimed icon glow effects - matches Vue: showGlow when multi rewards */
+.taskon-taskchain-claimed-icon--glow-token {
+  box-shadow: 0 -8px 30px 0 #f47d3b;
+}
+
+.taskon-taskchain-claimed-icon--glow-points {
+  box-shadow: 0 -8px 30px 0 #ff6b35;
+}
+
+/* Claimed reward text - single reward */
+.taskon-taskchain-claimed-text {
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 24px;
+  color: var(--taskon-text-primary, #fff);
+}
+
+/* Claimed reward text - multi reward */
+.taskon-taskchain-claimed-text--multi {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+/* Token amount color in claimed state */
+.taskon-taskchain-claimed-text--token {
+  color: #fbb15a;
+}
+
+/* Points amount color in claimed state */
+.taskon-taskchain-claimed-text--points {
+  color: #ff6b35;
+}
+
+/* Token text with underline (matches Vue: tw-underline on token text) */
+.taskon-taskchain-claimed-text--token-link {
+  text-decoration: underline;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+/* Right arrow icon for token link (matches Vue: tw-h-3 tw-w-3 = 12px) */
+.taskon-taskchain-claimed-arrow {
+  color: #fbb15a;
+  margin-left: 4px;
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+}
+
+/* Multi-reward smaller arrow (matches Vue: tw-h-2 tw-w-2 = 8px) */
+.taskon-taskchain-claimed-arrow--multi {
+  width: 8px;
+  height: 8px;
+}
+
+/* ============================================================================
+ * Token Tooltip Content
+ * Matches Vue: TokenReward.vue tooltip (TipPopOver content)
+ * ============================================================================ */
+
+/* Tooltip container */
+.taskon-taskchain-token-tooltip {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  white-space: nowrap;
+  padding: 4px;
+}
+
+/* Tooltip row */
+.taskon-taskchain-token-tooltip-row {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+/* Tooltip label (left side) */
+.taskon-taskchain-token-tooltip-label {
+  font-size: 14px;
+  color: var(--taskon-text-tertiary, rgba(255, 255, 255, 0.5));
+}
+
+/* Tooltip value (right side, token amount) */
+.taskon-taskchain-token-tooltip-value {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--taskon-text-primary, #fff);
+}
+
+/* Tooltip USD value */
+.taskon-taskchain-token-tooltip-usd {
+  font-size: 14px;
+  font-weight: 500;
+  color: #cbff01;
+}
+
+/* Action buttons container */
+.taskon-taskchain-reward-actions {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+  margin-top: 60px;
+}
+
+/* ============================================================================
+ * Animation States
+ * ============================================================================ */
+
+/* Unclaimed content - exit animation */
+.taskon-taskchain-reward-unclaimed {
+  opacity: 1;
+  transform: translateY(0);
+  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
+}
+
+.taskon-taskchain-reward-unclaimed--exit {
+  opacity: 0;
+  transform: translateY(-20px);
+}
+
+/* Claim button exit animation (separate from rewards) */
+.taskon-taskchain-claim-btn-exit {
+  opacity: 1;
+  transform: translateY(0);
+  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
+}
+
+.taskon-taskchain-claim-btn-exit--active {
+  opacity: 0;
+  transform: translateY(-20px);
+}
+
+/* Claimed content - enter animation */
+.taskon-taskchain-reward-claimed {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.taskon-taskchain-reward-claimed--animate {
+  animation: taskon-taskchain-slide-up-fade-in 0.8s ease-out 0.2s both;
+}
+
+@keyframes taskon-taskchain-slide-up-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(40px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* ============================================================================
+ * Confetti Particles
+ * ============================================================================ */
+
+.taskon-taskchain-confetti-particle {
+  position: absolute;
+  top: 30%;
+  width: 10px;
+  height: 10px;
+  border-radius: 2px;
+  pointer-events: none;
+  animation: taskon-taskchain-confetti-fall 1.5s ease-out forwards;
+}
+
+@keyframes taskon-taskchain-confetti-fall {
+  0% {
+    opacity: 1;
+    transform: translateY(0) rotate(0deg) scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(200px) rotate(720deg) scale(0.5);
+  }
+}
+
+/* Add some variety to particles */
+.taskon-taskchain-confetti-particle:nth-child(odd) {
+  width: 8px;
+  height: 12px;
+  animation-name: taskon-taskchain-confetti-fall-alt;
+}
+
+@keyframes taskon-taskchain-confetti-fall-alt {
+  0% {
+    opacity: 1;
+    transform: translateY(0) translateX(0) rotate(0deg) scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(180px) translateX(50px) rotate(-540deg) scale(0.3);
+  }
+}
+
+.taskon-taskchain-confetti-particle:nth-child(3n) {
+  animation-name: taskon-taskchain-confetti-fall-left;
+}
+
+@keyframes taskon-taskchain-confetti-fall-left {
+  0% {
+    opacity: 1;
+    transform: translateY(0) translateX(0) rotate(0deg) scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(160px) translateX(-40px) rotate(450deg) scale(0.4);
+  }
+}
+
+/* ============================================================================
+ * Claimed NFT Cards (Separate from green card)
+ * Matches Vue: ClaimedRewardsNftCard.vue
+ * ============================================================================ */
+
+/* NFT card list container */
+.taskon-taskchain-claimed-nft-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+/* Individual NFT claimed card */
+.taskon-taskchain-claimed-nft-card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 8px;
+  border: 1px solid rgb(60 232 155 / 20%);
+  background-color: rgb(0 255 163 / 10%);
+  padding: 12px 16px;
+}
+
+/* NFT info section (image + text) */
+.taskon-taskchain-claimed-nft-info {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  min-width: 0;
+}
+
+/* NFT image wrapper with chain badge */
+.taskon-taskchain-claimed-nft-image-wrap {
+  position: relative;
+  width: 56px;
+  height: 56px;
+  flex-shrink: 0;
+}
+
+/* NFT image */
+.taskon-taskchain-claimed-nft-image {
+  width: 100%;
+  height: 100%;
+  border-radius: 6px;
+  object-fit: cover;
+}
+
+/* NFT fallback image (no collection image available) */
+.taskon-taskchain-claimed-nft-image--fallback {
+  background-color: #1f1f1f;
+}
+
+/* Chain badge on NFT image (bottom-right corner) */
+.taskon-taskchain-claimed-nft-chain {
+  position: absolute;
+  bottom: -4px;
+  right: -4px;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 1px solid rgba(0, 0, 0, 0.6);
+  background-color: #fff;
+}
+
+/* NFT text section */
+.taskon-taskchain-claimed-nft-text {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+  text-align: left;
+}
+
+/* NFT label ("NFT" text) */
+.taskon-taskchain-claimed-nft-label {
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+/* NFT collection name */
+.taskon-taskchain-claimed-nft-name {
+  font-size: 18px;
+  font-weight: 600;
+  color: #fff;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* NFT CTA button (matches Vue: ClaimedRewardsNftCard button style) */
+.taskon-taskchain-claimed-nft-btn {
+  flex-shrink: 0;
+  padding: 8px 20px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #000;
+  background-color: #cbff01;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: opacity 0.2s, transform 0.1s;
+  white-space: nowrap;
+}
+
+.taskon-taskchain-claimed-nft-btn:hover {
+  opacity: 0.9;
+}
+
+.taskon-taskchain-claimed-nft-btn:active {
+  transform: scale(0.98);
+}
+
+/* ============================================================================
+ * Button Styles
+ * ============================================================================ */
+
+/* Button base */
+.taskon-taskchain-btn {
+  padding: 12px 32px;
+  font-size: 14px;
+  font-weight: 600;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: opacity 0.2s, transform 0.1s;
+}
+
+.taskon-taskchain-btn:hover {
+  opacity: 0.9;
+}
+
+.taskon-taskchain-btn:active {
+  transform: scale(0.98);
+}
+
+.taskon-taskchain-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Primary button */
+.taskon-taskchain-btn--primary {
+  color: #000;
+  background-color: #cbff01;
+}
+
+/* Secondary button */
+.taskon-taskchain-btn--secondary {
+  color: var(--taskon-text-primary, #fff);
+  background-color: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.taskon-taskchain-btn--secondary:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+/* ============================================================================
+ * Mobile Responsive
+ * ============================================================================ */
+
+@media (max-width: 750px) {
+  .taskon-taskchain-reward-title {
+    font-size: 24px;
+    line-height: 32px;
+  }
+
+  .taskon-taskchain-reward-subtitle {
+    font-size: 14px;
+  }
+
+  /* WinRewards mobile */
+  .taskon-taskchain-win-rewards {
+    min-height: 50vw;
+    padding: 6vw;
+  }
+
+  .taskon-taskchain-win-reward-icon {
+    width: 16.267vw;
+    height: 16.267vw;
+  }
+
+  .taskon-taskchain-win-reward-text {
+    max-width: 30vw;
+  }
+
+  /* ClaimedRewards mobile */
+  .taskon-taskchain-claimed-item {
+    min-height: 18.267vw;
+  }
+
+  /* Claimed NFT card mobile (matches Vue: mb: responsive values) */
+  .taskon-taskchain-claimed-nft-card {
+    gap: 2.133vw;
+    border-radius: 1.333vw;
+    padding: 2.72vw 3.626vw;
+  }
+
+  .taskon-taskchain-claimed-nft-image-wrap {
+    width: 12.693vw;
+    height: 12.693vw;
+    border-radius: 1.41vw;
+  }
+
+  .taskon-taskchain-claimed-nft-image {
+    border-radius: 1.41vw;
+  }
+
+  .taskon-taskchain-claimed-nft-chain {
+    bottom: -0.533vw;
+    right: -0.533vw;
+    width: 3.2vw;
+    height: 3.2vw;
+  }
+
+  .taskon-taskchain-claimed-nft-text {
+    gap: 1vw;
+  }
+
+  .taskon-taskchain-claimed-nft-label {
+    font-size: 3.2vw;
+  }
+
+  .taskon-taskchain-claimed-nft-name {
+    font-size: 3.733vw;
+  }
+
+  .taskon-taskchain-claimed-nft-btn {
+    padding: 1.6vw 4vw;
+    font-size: 2.933vw;
+    border-radius: 1.333vw;
+  }
+}
+/**
+ * TaskChainBlindBoxStep Styles
+ *
+ * This component now reuses BlindBoxDialog and BlindBoxRewardDialog from Quest,
+ * so most styles come from those components. Only container and helper styles here.
+ */
+
+/* Container */
+.taskon-taskchain-blindbox-step {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  max-width: 480px;
+  margin: 0 auto;
+  padding: 20px;
+  text-align: center;
+  min-height: 400px;
+}
+
+/* Manual submit action */
+.taskon-taskchain-blindbox-actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.taskon-taskchain-blindbox-btn {
+  padding: 12px 32px;
+  font-size: 14px;
+  font-weight: 600;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: opacity 0.2s, transform 0.1s;
+  color: #000;
+  background-color: #cbff01;
+}
+
+.taskon-taskchain-blindbox-btn:hover {
+  opacity: 0.9;
+}
+
+.taskon-taskchain-blindbox-btn:active {
+  transform: scale(0.98);
+}
+
+.taskon-taskchain-blindbox-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Loading state */
+.taskon-taskchain-blindbox-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  color: var(--taskon-text-secondary, #999);
+}
+
+/* Spinner */
+.taskon-taskchain-spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid rgba(255, 255, 255, 0.2);
+  border-top-color: #cbff01;
+  border-radius: 50%;
+  animation: taskon-taskchain-spin 0.8s linear infinite;
+}
+
+@keyframes taskon-taskchain-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Mobile responsive */
+@media (max-width: 750px) {
+  .taskon-taskchain-blindbox-step {
+    padding: 16px;
+    min-height: 350px;
+  }
+}
+/**
+ * NotEligible Styles
+ * @description Styles for NotEligible component in TaskChain
+ */
+
+.taskon-taskchain-not-eligible {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  padding: 40px 20px;
+  text-align: center;
+}
+
+.taskon-taskchain-not-eligible-oops {
+  font-size: 32px;
+  font-weight: 600;
+  color: var(--taskon-text-primary, #fff);
+  margin-bottom: 32px;
+}
+
+.taskon-taskchain-not-eligible-emoji {
+  font-size: 48px;
+  margin-bottom: 16px;
+}
+
+.taskon-taskchain-not-eligible-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--taskon-text-primary, #fff);
+  margin-bottom: 8px;
+}
+
+.taskon-taskchain-not-eligible-desc {
+  font-size: 14px;
+  color: var(--taskon-text-secondary, #999);
+  max-width: 300px;
+  line-height: 1.5;
+}
+
+.taskon-taskchain-not-eligible-panel {
+  width: 508px;
+  max-width: 100%;
+  border-radius: 10px;
+  background-color: rgba(255, 255, 255, 0.05);
+  padding: 16px;
+}
+
+/* Mobile responsive */
+@media (max-width: 750px) {
+  .taskon-taskchain-not-eligible {
+    padding: 20px 16px;
+  }
+
+  .taskon-taskchain-not-eligible-oops {
+    font-size: 24px;
+    margin-bottom: 24px;
+  }
+
+  .taskon-taskchain-not-eligible-panel {
+    width: 100%;
+    padding: 12px;
+  }
+}
+/**
+ * ActionEndedMask Styles
+ */
+
+.taskon-taskchain-ended-mask {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(10px);
+  z-index: 10;
+  border-radius: inherit;
+}
+
+.taskon-taskchain-ended-mask-image {
+  width: 72px;
+  height: 72px;
+}
+
+.taskon-taskchain-ended-mask-title {
+  margin-top: 16px;
+  text-align: center;
+  font-size: 32px;
+  font-weight: 700;
+  line-height: 40px;
+  color: #fff;
+}
+
+/* Mobile responsive */
+@media (max-width: 750px) {
+  .taskon-taskchain-ended-mask-image {
+    width: 56px;
+    height: 56px;
+  }
+
+  .taskon-taskchain-ended-mask-title {
+    font-size: 24px;
+    line-height: 32px;
+  }
+}
+/**
+ * TaskChainDetail Styles
+ *
+ * Layout matches Vue original:
+ * - Outer container: title, step indicator, content card, time info
+ * - Content card (taskon-taskchain-detail-content): has visible card styles
+ *   with border, background, rounded corners, glow, and nav buttons inside
+ */
+
+/* Outer container - only vertical padding, no left/right (handled by dialog-content) */
+.taskon-taskchain-detail {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding-top: 38px;
+  padding-bottom: 40px;
+}
+
+/* Title */
+.taskon-taskchain-detail-title {
+  font-size: 20px;
+  font-weight: 600;
+  margin: 0;
+  word-break: break-word;
+  color: var(--taskon-text-primary, #fff);
+}
+
+/* Time info */
+.taskon-taskchain-detail-time {
+  margin-top: 16px;
+}
+
+/* Step indicator wrapper (for reward display positioning) */
+.taskon-taskchain-detail-steps-wrap {
+  position: relative;
+  margin-top: 30px;
+}
+
+/* Reward display positioning */
+.taskon-taskchain-detail-reward-display {
+  position: absolute;
+  right: 0;
+  bottom: 100%;
+  margin-bottom: 8px;
+}
+
+/* Step indicator area */
+.taskon-taskchain-detail-steps {
+  width: 100%;
+}
+
+/* Content card - matches Vue TaskChainMain root div styles */
+.taskon-taskchain-detail-content {
+  position: relative;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-height: 600px;
+  margin-top: 16px;
+  padding: 40px;
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  background: rgba(255, 255, 255, 0.05);
+  overflow: hidden;
+}
+
+/* Light glow effect - inside content card */
+.taskon-taskchain-detail-light {
+  position: absolute;
+  top: -272px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 546px;
+  height: 546px;
+  border-radius: 50%;
+  background: radial-gradient(
+    50% 50% at 50% 50%,
+    rgb(82 82 82 / 30%) 0%,
+    rgb(178 178 178 / 30%) 100%
+  );
+  filter: blur(134px);
+  z-index: -1;
+  pointer-events: none;
+}
+
+/* Reward step light background - fills entire content card */
+.taskon-taskchain-reward-light {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+  opacity: 0;
+  pointer-events: none;
+  animation: taskon-taskchain-light-appear 2s ease-out forwards;
+}
+
+@keyframes taskon-taskchain-light-appear {
+  to {
+    opacity: 1;
+  }
+}
+
+/* Inner content wrapper inside card */
+.taskon-taskchain-detail-inner {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  width: 100%;
+  height: 100%;
+}
+
+/* Main content flex area */
+.taskon-taskchain-detail-main {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  justify-content: center;
+}
+
+/* Navigation buttons - inside content card */
+.taskon-taskchain-detail-nav {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 16px;
+}
+
+/* Loading state */
+.taskon-taskchain-detail-loading {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  color: var(--taskon-text-secondary, #999);
+}
+
+/* Task content wrapper - matches Vue: tw-mx-auto tw-w-[800px] tw-max-w-full */
+.taskon-taskchain-main {
+  width: 800px;
+  max-width: 100%;
+  margin: 0 auto;
+}
+
+/* Mobile responsive */
+@media (max-width: 750px) {
+  .taskon-taskchain-detail {
+    padding-top: 32px;
+    padding-bottom: 24px;
+  }
+
+  .taskon-taskchain-detail-title {
+    font-size: 18px;
+  }
+
+  .taskon-taskchain-detail-steps-wrap {
+    margin-top: 64px; /* More space on mobile for reward display */
+  }
+
+  .taskon-taskchain-detail-content {
+    margin-top: 24px;
+    padding: 24px;
+    min-height: auto;
+  }
+
+  .taskon-taskchain-detail-nav {
+    margin-top: 24px;
+  }
+}
+/**
+ * BottomDialog Styles
+ * Bottom sheet dialog component - slides up from bottom
+ * Migrated from Vue: taskon-website/apps/website/src/components/BottomDialog.vue
+ */
+
+/* ==================== Full screen overlay container ==================== */
+.taskon-bottom-dialog {
+  position: fixed;
+  inset: 0;
+  z-index: 9998;
+}
+
+/* ==================== Backdrop overlay ==================== */
+.taskon-bottom-dialog-overlay {
+  position: absolute;
+  inset: 0;
+  background: var(--taskon-color-overlay, rgba(66, 66, 66, 0.5));
+  backdrop-filter: blur(40px);
+}
+
+/* Overlay enter animation */
+.taskon-bottom-dialog-overlay--enter {
+  animation: taskon-bottom-dialog-overlay-in 0.3s ease-out forwards;
+}
+
+/* Overlay exit animation */
+.taskon-bottom-dialog-overlay--exit {
+  animation: taskon-bottom-dialog-overlay-out 0.25s ease-in forwards;
+}
+
+@keyframes taskon-bottom-dialog-overlay-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes taskon-bottom-dialog-overlay-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+/* ==================== Card (content area) ==================== */
+.taskon-bottom-dialog-card {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border-radius: 10px 10px 0 0;
+  background: var(--taskon-color-bg-popup, #0d0d0d);
+  overflow: auto;
+}
+
+/* Card enter animation - slide up from bottom */
+.taskon-bottom-dialog-card--enter {
+  animation: taskon-bottom-dialog-card-in 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+}
+
+/* Card exit animation - slide down to bottom */
+.taskon-bottom-dialog-card--exit {
+  animation: taskon-bottom-dialog-card-out 0.25s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
+}
+
+@keyframes taskon-bottom-dialog-card-in {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes taskon-bottom-dialog-card-out {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(100%);
+  }
+}
+
+/* ==================== Close button ==================== */
+.taskon-bottom-dialog-close {
+  position: absolute;
+  top: 24px;
+  right: 24px;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  background: rgba(255, 255, 255, 0.1);
+  border: none;
+  border-radius: 8px;
+  color: var(--taskon-text-secondary, #999);
+  cursor: pointer;
+  transition: background-color 0.2s, color 0.2s;
+}
+
+.taskon-bottom-dialog-close:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+  color: var(--taskon-text-primary, #fff);
+}
+
+/* ==================== Mobile responsive ==================== */
+@media (max-width: 750px) {
+  .taskon-bottom-dialog-close {
+    top: 5.333vw;
+    right: 4vw;
+    width: 24px;
+    height: 24px;
+  }
+}
+/**
+ * TaskChainDialog Styles
+ * Dialog UI (overlay, card, close button, animations) is handled by BottomDialog.
+ * This file only contains styles for the inner content.
+ */
+
+/* Inner content wrapper - matches Vue g-safe-area layout */
+.taskon-taskchain-dialog-content {
+  position: relative;
+  width: 100%;
+  max-width: 1580px;
+  margin: 0 auto;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+@media (max-width: 1512px) {
+  .taskon-taskchain-dialog-content {
+    max-width: 1340px;
+  }
+}
+
+@media (max-width: 750px) {
+  .taskon-taskchain-dialog-content {
+    max-width: initial;
+    padding-left: var(--taskon-m-padding, 4vw);
+    padding-right: var(--taskon-m-padding, 4vw);
+  }
+}
+
+/* Error state */
+.taskon-taskchain-dialog-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 400px;
+  padding: 40px;
+  text-align: center;
+  color: var(--taskon-text-primary, #fff);
+}
+
+.taskon-taskchain-dialog-error-detail {
+  margin-top: 8px;
+  font-size: 14px;
+  color: var(--taskon-text-secondary, #999);
+}
+/**
+ * SectorItem 组件样式
+ * 完全复刻 taskon-website 的 SectorItem.vue 样式
+ * 直接使用 dark 模式颜色值，不使用 CSS 变量
+ * 使用 taskon-sector- 前缀避免与项目方样式冲突
+ */
+
+/* Sector 容器 */
+.taskon-sector-item {
+  margin-top: 20px;
+  border-radius: 12px;
+}
+
+/* 多个 Sector 之间的间距 */
+.taskon-sector-item + .taskon-sector-item {
+  margin-top: 60px;
+}
+
+/* Sector 标题 */
+.taskon-sector-name {
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 40px;
+  color: #ffffff;
+  margin: 0;
+}
+
+/* Sector 描述 */
+.taskon-sector-desc {
+  margin-top: 4px;
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 16px;
+  line-height: 20px;
+  white-space: pre-wrap;
+}
+
+/* 总积分容器 */
+.taskon-sector-points-wrapper {
+  margin-top: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+/* 单个积分徽章 */
+.taskon-sector-point {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 14px;
+  border-radius: 48px;
+  background: #cbff01; /* Primary 主题色 */
+  color: #0d0d0d;
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 30px;
+}
+
+.taskon-sector-point img {
+  width: 24px;
+  height: 24px;
+  object-fit: contain;
+}
+
+/* 任务列表 - 使用 grid 布局 */
+.taskon-sector-tasks {
+  margin-top: 20px;
+  display: grid;
+  gap: 20px;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+}
+
+/* 已完成分隔符 */
+.taskon-sector-completed {
+  margin-top: 22px;
+  color: #ffffff;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 20px;
+}
+
+/* 已完成任务列表 */
+.taskon-sector-tasks-completed {
+  margin-top: 22px;
+}
+
+/* 任务卡片容器 - 用于包裹 BaseTask 组件 */
+.taskon-sector-task-card {
+  height: 100%;
+}
+
+/* 响应式样式（移动端） */
+@media (max-width: 750px) {
+  .taskon-sector-item {
+    margin-top: 5.33vw;
+    border-radius: 1.87vw;
+  }
+
+  .taskon-sector-item + .taskon-sector-item {
+    margin-top: 8vw;
+  }
+
+  .taskon-sector-name {
+    font-size: 4.5vw;
+    line-height: 6vw;
+  }
+
+  .taskon-sector-desc {
+    margin-top: 1.067vw;
+    font-size: 3.2vw;
+    line-height: 3.73vw;
+  }
+
+  .taskon-sector-points-wrapper {
+    margin-top: 3.2vw;
+    gap: 2.67vw;
+  }
+
+  .taskon-sector-point {
+    margin-top: 3.2vw;
+    font-size: 4.27vw;
+    line-height: 5.6vw;
+  }
+
+  .taskon-sector-point img {
+    width: 4.27vw;
+    height: 4.27vw;
+  }
+
+  .taskon-sector-tasks {
+    grid-template-columns: repeat(1, 1fr);
+    gap: 4vw;
+    margin-top: 5.333vw;
+  }
+
+  .taskon-sector-completed {
+    margin-top: 5.87vw;
+    font-size: 4.27vw;
+    line-height: 5.33vw;
+  }
+
+  .taskon-sector-tasks-completed {
+    margin-top: 5.87vw;
+  }
+}
+/**
+ * DialogPointReward 组件样式
+ * 复刻 Vue 版本 DialogPointReward.vue 的样式
+ * 使用 Widget 命名空间扁平化方案
+ */
+
+/* ==================== 周期模式 ==================== */
+.taskon-task-dialog-period {
+  margin-top: 10px;
+  display: flex;
+  align-items: flex-end;
+  color: var(--taskon-color-text, #fff);
+}
+
+/* 周期模式 - 积分数量 */
+.taskon-task-dialog-period-amount {
+  font-size: 32px;
+  line-height: 40px;
+  display: flex;
+  align-items: center;
+}
+
+/* 周期模式 - 累计积分强调 */
+.taskon-task-dialog-period-amount--em {
+  margin-left: 15px;
+  color: #00ffa3;
+}
+
+/* 周期模式 - 积分图标 */
+.taskon-task-dialog-period-icon {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  margin-right: 4px;
+  vertical-align: baseline;
+}
+
+/* 周期模式 - 标签文字 */
+.taskon-task-dialog-period-label {
+  margin-left: 6px;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 28px;
+}
+
+/* 周期模式 - 累计标签强调 */
+.taskon-task-dialog-period-label--em {
+  color: var(--taskon-color-text-secondary, rgba(255, 255, 255, 0.7));
+}
+
+/* ==================== Unlimited 模式 ==================== */
+.taskon-task-dialog-uncertain-amount {
+  color: #00ffa3;
+  font-size: 32px;
+  font-weight: 600;
+}
+
+/* ==================== 社区信息 ==================== */
+.taskon-task-dialog-cm-logo {
+  margin-left: auto;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.taskon-task-dialog-cm-name {
+  margin-left: 6px;
+  color: var(--taskon-color-text-secondary, rgba(255, 255, 255, 0.7));
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 18px;
+}
+
+/* ==================== 响应式 ==================== */
+@media (max-width: 750px) {
+  .taskon-task-dialog-period {
+    margin-top: 2.667vw;
+  }
+
+  .taskon-task-dialog-period-amount {
+    font-size: 6.4vw;
+    line-height: 8vw;
+  }
+
+  .taskon-task-dialog-period-amount--em {
+    margin-left: 4vw;
+  }
+
+  .taskon-task-dialog-period-icon {
+    width: 4.667vw;
+    height: 4.667vw;
+    margin-right: 0.8vw;
+  }
+
+  .taskon-task-dialog-period-label {
+    margin-left: 1.333vw;
+    font-size: 3.2vw;
+    line-height: 4vw;
+  }
+
+  .taskon-task-dialog-uncertain-amount {
+    font-size: 6.133vw;
+  }
+
+  .taskon-task-dialog-cm-logo {
+    width: 3.2vw;
+    height: 3.2vw;
+  }
+
+  .taskon-task-dialog-cm-name {
+    margin-left: 1.2vw;
+    font-size: 3.2vw;
+    line-height: 4vw;
+  }
+}
+/**
+ * DialogTokenReward 组件样式
+ * 复刻 Vue 版本 DialogTokenReward.vue 的样式
+ * 使用 Widget 命名空间扁平化方案
+ */
+
+/* 链图标 */
+.taskon-task-dialog-token-chain-icon {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  object-fit: cover;
+  margin-left: 6px;
+}
+
+/* Token 信息容器（图标 + 名称 + earned） */
+.taskon-task-dialog-token-info {
+  display: flex;
+  align-items: center;
+}
+
+/* Token 奖励专用的 period-label（覆盖 DialogPointReward.css 的 6px） */
+.taskon-task-dialog-token-period-label {
+  margin-left: 4px;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 28px;
+}
+
+.taskon-task-dialog-token-period-label--em {
+  color: var(--taskon-color-text-secondary, rgba(255, 255, 255, 0.7));
+}
+
+/* ==================== 响应式 ==================== */
+@media (max-width: 750px) {
+  .taskon-task-dialog-token-chain-icon {
+    width: 2.4vw;
+    height: 2.4vw;
+    margin-left: 1.2vw;
+  }
+
+  .taskon-task-dialog-token-period-label {
+    margin-left: 0.8vw;
+    font-size: 3.2vw;
+    line-height: 4vw;
+  }
+}
+/**
+ * ColorfulProgress 组件样式
+ * 复刻 Vue 版本 ColorfulProgress.vue 的样式
+ * 使用 Widget 命名空间扁平化方案
+ */
+
+/* 进度条容器 */
+.taskon-task-dialog-colorful-progress {
+  position: relative;
+  width: 100%;
+  height: 8px;
+  background-color: rgba(255, 255, 255, 0.2);
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+/* 进度条 - 渐变填充 */
+.taskon-task-dialog-colorful-progress__bar {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  /* 渐变背景: 绿色 -> 黄绿色 */
+  background: linear-gradient(90deg, #00ffa3 -229.89%, #cbff01 100%);
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+/* 斜纹波浪 */
+.taskon-task-dialog-colorful-progress__wave {
+  width: 3px;
+  flex-shrink: 0;
+  height: 200%;
+  transform: rotate(45deg);
+  background: rgba(0, 0, 0, 0.1);
+}
+
+/* ==================== 响应式 ==================== */
+@media (max-width: 750px) {
+  .taskon-task-dialog-colorful-progress {
+    height: 1.6vw;
+  }
+}
+/**
+ * TokenStatusLeft 组件样式
+ * 复刻 Vue 版本 TokenStatusLeft.vue 的样式
+ * 使用 Widget 命名空间扁平化方案
+ */
+
+/* 容器 */
+.taskon-task-dialog-token-progress {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 8px;
+}
+
+/* 文字部分 */
+.taskon-task-dialog-token-progress__content {
+  color: var(--taskon-color-text-secondary, rgba(255, 255, 255, 0.7));
+  font-size: 14px;
+  font-weight: 500;
+}
+
+/* 高亮数字 */
+.taskon-task-dialog-token-progress__text {
+  color: #00ffa3;
+}
+
+/* 进度条容器 */
+.taskon-task-dialog-token-progress__bar {
+  width: 66px;
+}
+
+/* ==================== 响应式 ==================== */
+@media (max-width: 750px) {
+  .taskon-task-dialog-token-progress__content {
+    font-size: 3.2vw;
+  }
+
+  .taskon-task-dialog-token-progress__bar {
+    width: 12vw;
+  }
+}
+/**
+ * CloseIn 样式
+ * 复刻 Vue 版本 CloseIn.vue 样式
+ */
+
+.taskon-close-in {
+  margin-top: 30px;
+  color: var(--taskon-primary-100, #6366f1);
+  text-align: center;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 18px;
+}
+/**
+ * TaskDialogContent 组件样式
+ * 复刻 Vue 版本 TaskDialog.vue 的样式
+ * 使用 Widget 命名空间扁平化方案
+ */
+
+/* ==================== 左侧面板 ==================== */
+.taskon-task-dialog-left {
+  width: 440px;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 主内容区 */
+.taskon-task-dialog-main {
+  flex: 1;
+}
+
+/* ==================== 周期标签 ==================== */
+.taskon-task-dialog-recurrence {
+  display: inline-block;
+  padding: 3px 12px;
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--taskon-color-text-secondary, #a0a0a0);
+  font-size: 13px;
+  line-height: 16px;
+}
+
+/* ==================== 标题 ==================== */
+.taskon-task-dialog-title {
+  margin: 20px 0 0 0;
+  color: var(--taskon-color-text, #fff);
+  font-size: 22px;
+  font-weight: 600;
+  line-height: 28px;
+}
+
+/* 标题链接样式 */
+.taskon-task-dialog-title--link {
+  display: block;
+  text-decoration: none;
+  color: var(--taskon-color-primary, #6366f1);
+  transition: color 0.2s ease;
+}
+
+.taskon-task-dialog-title--link:hover {
+  color: var(--taskon-color-primary-hover, #818cf8);
+  text-decoration: underline;
+}
+
+/* ==================== 有效时间 - 复刻 Vue valid-util ==================== */
+.taskon-task-dialog-valid-time {
+  margin-top: 10px;
+  font-size: 14px;
+  line-height: 18px;
+}
+
+.taskon-task-dialog-valid-time-label {
+  color: var(--taskon-color-text-secondary, rgba(255, 255, 255, 0.5));
+}
+
+.taskon-task-dialog-valid-time-value {
+  margin-left: 4px;
+  color: var(--taskon-color-text, #fff);
+}
+
+/* ==================== 描述区域 ==================== */
+.taskon-task-dialog-desc {
+  margin-top: 15px;
+}
+
+/* ==================== Action 按钮 - 复刻 Vue ActionButton ==================== */
+.taskon-task-dialog-action {
+  margin-top: 30px;
+  width: 100%;
+  height: 40px;
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  border: none;
+  /* Vue: --primary-12 深蓝色背景 */
+  background: rgba(203, 255, 1, 0.12);
+  /* Vue: --primary-100 黄色文字 */
+  color: var(--taskon-color-primary, #cbff01);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 40px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.taskon-task-dialog-action:hover {
+  background: var(--taskon-color-primary, #cbff01);
+  color: #0d0d0d;
+}
+
+/* ==================== 奖励卡片 ==================== */
+.taskon-task-dialog-reward-card {
+  position: relative;
+  margin-top: 30px;
+  padding: 20px;
+  border-radius: 10px;
+  /* Vue: --color-invisible 在深色主题下是略亮的半透明 */
+  background: rgba(255, 255, 255, 0.06);
+}
+
+/* Max claim 标签 - 复刻 Vue rewards-max-claim */
+.taskon-task-dialog-max-claim {
+  position: absolute;
+  top: -24px;
+  right: 6px;
+  height: 24px;
+  padding: 3px 12px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  /* Vue: --color-lightest-inverse 深色文字 */
+  color: var(--taskon-color-text-inverse, #0d0d0d);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  /* Vue: --color-lightest 亮色背景 */
+  background: var(--taskon-color-bg-inverse, #fff);
+  border-radius: 8px 8px 0 0;
+}
+
+.taskon-task-dialog-max-claim--highlight {
+  /* Vue: --secondary-100 高亮色 */
+  color: var(--taskon-color-secondary, #7c3aed);
+}
+
+/* 标签行 */
+.taskon-task-dialog-label-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 24px;
+}
+
+/* Rewards 标签 */
+.taskon-task-dialog-rewards-label {
+  color: var(--taskon-color-text, #fff);
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 600;
+}
+
+/* Won 标签 */
+.taskon-task-dialog-won {
+  margin-left: auto;
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.04);
+  padding: 3px 12px;
+  color: #27ae60;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 18px;
+}
+
+/* Updated at 标签 - Unlimited 任务专用，复刻 Vue updated-label */
+.taskon-task-dialog-updated {
+  margin-left: auto;
+  /* Vue: --color-dark 半透明白色 */
+  color: var(--taskon-color-text-secondary, rgba(255, 255, 255, 0.5));
+  font-size: 12px;
+  font-weight: 500;
+}
+
+/* ==================== 周期任务倒计时 - 复刻 Vue periodic-done ==================== */
+.taskon-task-dialog-periodic-done {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  color: var(--taskon-color-text-secondary, rgba(255, 255, 255, 0.7));
+  font-size: 13px;
+  line-height: 16px;
+}
+
+/* 分隔线 */
+.taskon-task-dialog-periodic-done__line {
+  margin: 0 6px;
+  width: 1px;
+  height: 10px;
+  background: var(--taskon-color-border, rgba(255, 255, 255, 0.2));
+}
+
+/* 倒计时数字 */
+.taskon-task-dialog-periodic-done__time {
+  margin-left: 4px;
+  /* Vue: --secondary-100 绿色强调 */
+  color: #00ffa3;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 18px;
+}
+
+/* ==================== 积分展示 ==================== */
+.taskon-task-dialog-point-row {
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+  /* Vue: --color-light 白色 */
+  color: var(--taskon-color-text, #fff);
+}
+
+.taskon-task-dialog-point-icon {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  margin-right: 4px;
+  vertical-align: baseline;
+}
+
+.taskon-task-dialog-point-amount {
+  color: #00ffa3;
+  font-size: 32px;
+  font-weight: 600;
+  line-height: 40px;
+}
+
+.taskon-task-dialog-point-name {
+  margin-left: auto;
+  color: var(--taskon-color-text-secondary, #a0a0a0);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 18px;
+}
+
+/* ==================== Claim 按钮 ==================== */
+.taskon-task-dialog-claim {
+  margin-top: 20px;
+}
+
+/* Token 进度条容器 */
+.taskon-task-dialog-token-progress-wrap {
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 弹窗内 Claim 按钮样式覆盖 */
+.taskon-task-dialog-claim .taskon-community-task-claim {
+  width: 100%;
+  padding: 12px 24px;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+/* ==================== 响应式 ==================== */
+@media (max-width: 750px) {
+  .taskon-task-dialog-left {
+    width: 100%;
+  }
+
+  .taskon-task-dialog-recurrence {
+    padding: 0.667vw 2.667vw;
+    font-size: 2.667vw;
+    line-height: 3.467vw;
+  }
+
+  .taskon-task-dialog-title {
+    margin-top: 4vw;
+    font-size: 4.267vw;
+    line-height: 5.333vw;
+  }
+
+  .taskon-task-dialog-valid-time {
+    margin-top: 2.667vw;
+    font-size: 3.733vw;
+    line-height: 4.667vw;
+  }
+
+  .taskon-task-dialog-valid-time-value {
+    margin-left: 1.067vw;
+  }
+
+  .taskon-task-dialog-desc {
+    margin-top: 2.667vw;
+  }
+
+  .taskon-task-dialog-action {
+    margin-top: 5.333vw;
+    height: 11vw;
+    padding: 0 4vw;
+    font-size: 3.733vw;
+    line-height: 11vw;
+  }
+
+  .taskon-task-dialog-reward-card {
+    margin-top: 5.333vw;
+    padding: 4vw;
+  }
+
+  .taskon-task-dialog-label-row {
+    height: 4vw;
+  }
+
+  .taskon-task-dialog-rewards-label {
+    font-size: 3.2vw;
+    line-height: 4vw;
+  }
+
+  .taskon-task-dialog-won {
+    font-size: 3.2vw;
+    line-height: 4vw;
+    padding: 0.533vw 2.4vw;
+  }
+
+  .taskon-task-dialog-updated {
+    font-size: 3.2vw;
+  }
+
+  /* 周期任务倒计时响应式 */
+  .taskon-task-dialog-periodic-done {
+    font-size: 2.667vw;
+    line-height: 3.467vw;
+  }
+
+  .taskon-task-dialog-periodic-done__line {
+    margin: 0 1.2vw;
+    height: 2vw;
+  }
+
+  .taskon-task-dialog-periodic-done__time {
+    margin-left: 0.8vw;
+    font-size: 3.2vw;
+    line-height: 4vw;
+  }
+
+  .taskon-task-dialog-point-row {
+    margin-top: 2.667vw;
+  }
+
+  .taskon-task-dialog-point-amount {
+    font-size: 6.4vw;
+    line-height: 8vw;
+  }
+
+  .taskon-task-dialog-point-icon {
+    width: 4.667vw;
+    height: 4.667vw;
+    margin-right: 0.8vw;
+  }
+
+  .taskon-task-dialog-point-name {
+    font-size: 3.2vw;
+    line-height: 4vw;
+  }
+
+  .taskon-task-dialog-claim {
+    margin-top: 4vw;
+  }
+}
+/**
+ * PowImageUploader 组件样式
+ * 使用 Widget 命名空间扁平化方案
+ * 所有类名使用 .taskon-pow-uploader-* 前缀，避免跨 Widget 冲突
+ */
+
+.taskon-pow-uploader {
+  margin-top: 20px;
+  display: flex;
+  align-items: center;
+}
+
+.taskon-pow-uploader-area {
+  flex: 1;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 128px;
+  text-align: center;
+  font-size: 0;
+  overflow: hidden;
+  border: 1px solid var(--taskon-color-border, #e2e8f0);
+  border-radius: var(--taskon-border-radius, 8px);
+  background: var(--taskon-color-bg, #ffffff);
+  cursor: pointer;
+  transition: border-color 0.2s ease, background-color 0.2s ease;
+}
+
+.taskon-pow-uploader-area:hover,
+.taskon-pow-uploader-area:focus {
+  border-color: var(--taskon-color-primary, #6366f1);
+  outline: none;
+}
+
+.taskon-pow-uploader-area:hover .taskon-pow-uploader-mask,
+.taskon-pow-uploader-area:focus .taskon-pow-uploader-mask {
+  display: flex;
+}
+
+.taskon-pow-uploader-area--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.taskon-pow-uploader-area--disabled:hover,
+.taskon-pow-uploader-area--disabled:focus {
+  border-color: var(--taskon-color-border, #e2e8f0);
+}
+
+/* 隐藏的文件输入 */
+.taskon-pow-uploader-input {
+  display: none;
+}
+
+/* 图片预览 */
+.taskon-pow-uploader-preview {
+  border-radius: 4px;
+  margin: 20px 0;
+  max-width: 100%;
+  max-height: 300px;
+  object-fit: contain;
+}
+
+/* 悬停遮罩 */
+.taskon-pow-uploader-mask {
+  display: none;
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  background: rgba(0, 0, 0, 0.8);
+}
+
+/* 上传图标 */
+.taskon-pow-uploader-icon {
+  width: 24px;
+  height: 24px;
+  color: #ffffff;
+}
+
+.taskon-pow-uploader-icon--empty {
+  opacity: 0.6;
+  color: var(--taskon-color-text-secondary, #64748b);
+}
+
+/* 提示文字 */
+.taskon-pow-uploader-tip {
+  margin-top: 13px;
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  white-space: pre-wrap;
+  color: #ffffff;
+}
+
+.taskon-pow-uploader-tip--empty {
+  opacity: 0.6;
+  color: var(--taskon-color-text-secondary, #64748b);
+}
+
+/* 上传进度条 */
+.taskon-pow-uploader-progress {
+  z-index: 3;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: rgba(255, 255, 255, 0.1);
+  height: 6px;
+}
+
+.taskon-pow-uploader-progress-bar {
+  background: var(--taskon-color-primary, #6366f1);
+  height: 100%;
+  border-radius: 4px;
+  transition: width 0.1s linear;
+}
+
+/* 移动端适配 */
+@media (max-width: 750px) {
+  .taskon-pow-uploader {
+    margin-top: 2.67vw;
+  }
+
+  .taskon-pow-uploader-area {
+    min-height: 17.07vw;
+  }
+
+  .taskon-pow-uploader-icon {
+    width: 18px;
+    height: 18px;
+  }
+
+  .taskon-pow-uploader-tip {
+    margin-top: 10px;
+    font-size: 12px;
+    line-height: 16px;
+  }
+
+  .taskon-pow-uploader-preview {
+    max-height: 200px;
+  }
+}
+/**
+ * PowTaskDialogContent 组件样式
+ * 复刻 Vue 版本 PowTask.vue 弹窗样式
+ */
+
+/* ==================== 表单区域 ==================== */
+.taskon-pow-dialog-form {
+  margin-top: 15px;
+}
+
+/* ==================== 错误提示 ==================== */
+.taskon-pow-dialog-error {
+  margin-top: 15px;
+  color: #ff3a44;
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: 0.04em;
+  text-align: left;
+  white-space: nowrap;
+}
+
+/* ==================== 提交按钮 ==================== */
+.taskon-pow-dialog-submit {
+  margin-top: 30px;
+  width: 100%;
+  height: 40px;
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  border: none;
+  background: linear-gradient(270deg, #00ffa3 0%, #cbff01 100%);
+  color: #0d0d0d;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 40px;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.taskon-pow-dialog-submit:hover {
+  opacity: 0.9;
+}
+
+.taskon-pow-dialog-submit:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* ==================== 完成状态 ==================== */
+.taskon-pow-dialog-done {
+  margin-top: 30px;
+  padding: 12px 16px;
+  border-radius: 6px;
+  background: rgba(39, 174, 96, 0.1);
+  color: #27ae60;
+  font-size: 14px;
+  font-weight: 500;
+  text-align: center;
+}
+
+/* ==================== 审核状态 ==================== */
+.taskon-pow-dialog-status--review {
+  margin-left: auto;
+  padding: 3px 12px;
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.04);
+  color: #9b51e0;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 18px;
+}
+
+.taskon-pow-dialog-status--failed {
+  margin-left: auto;
+  padding: 3px 12px;
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.04);
+  color: #eb5757;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 18px;
+}
+
+/* ==================== 响应式 ==================== */
+@media (max-width: 750px) {
+  .taskon-pow-dialog-error {
+    margin-top: 2.667vw;
+    font-size: 2.933vw;
+    line-height: 2.667vw;
+  }
+
+  .taskon-pow-dialog-submit {
+    margin-top: 5.333vw;
+    height: 11vw;
+    font-size: 3.733vw;
+    line-height: 11vw;
+  }
+
+  .taskon-pow-dialog-done {
+    margin-top: 5.333vw;
+    padding: 3.2vw 4.267vw;
+    font-size: 3.733vw;
+  }
+
+  .taskon-pow-dialog-status--review,
+  .taskon-pow-dialog-status--failed {
+    padding: 0.533vw 2.4vw;
+    font-size: 3.2vw;
+    line-height: 4vw;
+  }
+}
+/**
+ * SwapDexDialogContent 组件样式
+ * 复刻 Vue 版本 SwapDexContractInteractive.vue 弹窗样式
+ */
+
+/* ==================== 进度显示 ==================== */
+.taskon-swap-dialog-progress {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 16px;
+  line-height: 20px;
+  font-weight: 500;
+}
+
+.taskon-swap-dialog-progress-current {
+  color: #00ffa3;
+}
+
+.taskon-swap-dialog-progress-separator {
+  color: var(--taskon-color-text-secondary, #a0a0a0);
+  margin: 0 2px;
+}
+
+.taskon-swap-dialog-progress-total {
+  color: var(--taskon-color-text-secondary, #a0a0a0);
+  font-size: 14px;
+  line-height: 18px;
+}
+
+/* ==================== 内容区块 ==================== */
+.taskon-swap-dialog-section {
+  margin-top: 16px;
+}
+
+.taskon-swap-dialog-section-title {
+  color: var(--taskon-color-text, #fff);
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 18px;
+}
+
+.taskon-swap-dialog-section-content {
+  margin-top: 8px;
+  padding: 12px;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--taskon-color-text, #fff);
+  font-size: 14px;
+  line-height: 18px;
+}
+
+/* ==================== 响应式 ==================== */
+@media (max-width: 750px) {
+  .taskon-swap-dialog-progress {
+    gap: 1.067vw;
+    font-size: 4.267vw;
+    line-height: 5.333vw;
+  }
+
+  .taskon-swap-dialog-progress-separator {
+    margin: 0 0.533vw;
+  }
+
+  .taskon-swap-dialog-progress-total {
+    font-size: 3.733vw;
+    line-height: 4.8vw;
+  }
+
+  .taskon-swap-dialog-section {
+    margin-top: 4.267vw;
+  }
+
+  .taskon-swap-dialog-section-title {
+    font-size: 3.733vw;
+    line-height: 4.8vw;
+  }
+
+  .taskon-swap-dialog-section-content {
+    margin-top: 2.133vw;
+    padding: 3.2vw;
+    font-size: 3.2vw;
+    line-height: 4.133vw;
+  }
+}
+/**
+ * DialogLoading 组件样式
+ * 使用 Widget 命名空间扁平化方案
+ */
+
+.taskon-dialog-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 300px;
+  width: 440px;
+  gap: 16px;
+}
+
+.taskon-dialog-loading-spinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid rgba(255, 255, 255, 0.1);
+  border-top-color: var(--taskon-color-primary, #cbff01);
+  border-radius: 50%;
+  animation: taskon-spin 1s linear infinite;
+}
+
+.taskon-dialog-loading-text {
+  color: var(--taskon-color-text-secondary, #888);
+  font-size: 14px;
+}
+
+@keyframes taskon-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+/**
+ * DialogError 组件样式
+ * 使用 Widget 命名空间扁平化方案
+ */
+
+.taskon-dialog-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 300px;
+  width: 440px;
+  padding: 24px;
+  text-align: center;
+}
+
+.taskon-dialog-error-icon {
+  font-size: 48px;
+  margin-bottom: 16px;
+  color: var(--taskon-color-text-secondary, #888);
+}
+
+.taskon-dialog-error-message {
+  color: var(--taskon-color-text-secondary, #888);
+  margin-bottom: 16px;
+  font-size: 14px;
+  line-height: 1.5;
+  max-width: 300px;
+}
+
+.taskon-dialog-error-retry {
+  padding: 10px 24px;
+  background: var(--taskon-color-primary, #cbff01);
+  color: #000;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  transition: opacity 0.2s;
+}
+
+.taskon-dialog-error-retry:hover {
+  opacity: 0.9;
+}
+
+.taskon-dialog-error-retry:active {
+  opacity: 0.8;
+}
+/**
+ * TaskDialog 组件样式
+ * 复刻 Vue 版本 TaskDialog 结构
+ * 使用 Widget 命名空间扁平化方案
+ */
+
+/* ==================== Dialog 容器覆盖 ==================== */
+.taskon-task-dialog {
+  /* 复刻 Vue --bg-popup-basic-100: #0d0d0d */
+  background: var(--taskon-color-bg-popup, #0d0d0d) !important;
+  color: var(--taskon-color-text, #ffffff);
+}
+
+/* 覆盖 Dialog body padding，让内容自己控制 */
+.taskon-task-dialog .taskon-dialog-body {
+  padding: 0;
+}
+
+/* 关闭按钮深色主题 */
+.taskon-task-dialog .taskon-dialog-close {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--taskon-color-text-secondary, #888);
+}
+
+.taskon-task-dialog .taskon-dialog-close:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: var(--taskon-color-text, #fff);
+}
+
+/* ==================== Wrapper: 复刻 Vue .task-dialog ==================== */
+.taskon-task-dialog-wrapper {
+  display: flex;
+  padding: 30px;
+}
+
+/* ==================== 右侧面板 ==================== */
+.taskon-task-dialog-right {
+  margin-left: 30px;
+  padding-left: 30px;
+  border-left: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* ==================== 验证成功提示（CloseIn） ==================== */
+.taskon-task-dialog-close-in {
+  margin-top: 30px;
+  color: var(--taskon-color-primary, #cbff01);
+  text-align: center;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 18px;
+}
+
+/* ==================== 响应式 ==================== */
+@media (max-width: 750px) {
+  .taskon-task-dialog-wrapper {
+    flex-direction: column;
+    padding: 5.333vw;
+  }
+
+  .taskon-task-dialog-right {
+    margin-left: 0;
+    margin-top: 5.333vw;
+    padding-left: 0;
+    padding-top: 5.333vw;
+    border-left: none;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .taskon-task-dialog-close-in {
+    margin-top: 5.333vw;
+  }
+}
+/**
+ * CommunityTaskList 组件样式
+ * 直接使用 dark 模式颜色值，不使用 CSS 变量
+ * 使用 taskon-community-list- 前缀避免与项目方样式冲突
+ */
+
+/* 列表容器 */
+.taskon-community-list {
+  width: 100%;
+}
+
+/* Selector 样式 */
+.taskon-community-list-selector {
+  margin-bottom: 24px;
+}
+
+/* 内容区域 */
+.taskon-community-list-content {
+  width: 100%;
+}
+
+/* 加载状态 */
+.taskon-community-list-loading {
+  padding: 40px;
+  text-align: center;
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 16px;
+}
+
+/* 错误状态 */
+.taskon-community-list-error {
+  padding: 40px;
+  text-align: center;
+  color: #ef4444;
+  font-size: 16px;
+}
+
+/* 空状态 */
+.taskon-community-list-empty {
+  padding: 40px;
+  text-align: center;
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 16px;
+}
+
+/* 响应式样式（移动端） */
+@media (max-width: 750px) {
+  .taskon-community-list-selector {
+    margin-bottom: 5.33vw;
+  }
+
+  .taskon-community-list-loading,
+  .taskon-community-list-error,
+  .taskon-community-list-empty {
+    padding: 10.67vw;
+    font-size: 3.73vw;
+  }
+}