@taskon/widget-react 0.0.1-beta.1

package/dist/Quest.css

@@ -0,0 +1,4214 @@
+/**
+ * ButtonTabs 组件样式
+ *
+ * 按钮边框样式的标签页切换
+ * 参考 Vue 版本的 light-border / dark-border 按钮样式
+ */
+
+/* ========== 容器 ========== */
+.taskon-button-tabs {
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+/* ========== Tab 按钮基础样式 ========== */
+.taskon-button-tabs__tab {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: rgba(255, 255, 255, 0.6);
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+/* ========== 尺寸变体 ========== */
+
+/* Small 尺寸 */
+.taskon-button-tabs__tab--small {
+  height: 32px;
+  padding: 4px 12px;
+  font-size: 14px;
+  line-height: 20px;
+  border-radius: 6px;
+}
+
+/* Medium 尺寸 */
+.taskon-button-tabs__tab--medium {
+  height: 36px;
+  padding: 6px 16px;
+  font-size: 14px;
+  line-height: 20px;
+  border-radius: 8px;
+}
+
+/* ========== 状态样式 ========== */
+
+/* Hover 状态（未选中） */
+.taskon-button-tabs__tab:hover:not(.taskon-button-tabs__tab--active):not(.taskon-button-tabs__tab--disabled) {
+  border-color: rgba(255, 255, 255, 0.6);
+  color: rgba(255, 255, 255, 0.8);
+}
+
+/* 选中状态 (light-border) */
+.taskon-button-tabs__tab--active {
+  background-color: transparent;
+  border-color: #ffffff;
+  color: #ffffff;
+}
+
+.taskon-button-tabs__tab--active:hover {
+  opacity: 0.8;
+}
+
+/* 禁用状态 */
+.taskon-button-tabs__tab--disabled {
+  color: rgba(255, 255, 255, 0.3);
+  border-color: rgba(255, 255, 255, 0.1);
+  cursor: not-allowed;
+}
+/* CompletedCount - 完成计数组件样式 */
+.taskon-completed-count {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.taskon-completed-count-check {
+  width: 12px;
+  height: 9px;
+}
+
+.taskon-completed-count-text {
+  font-size: 14px;
+  line-height: 18px;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.taskon-completed-count-em {
+  color: #fff;
+}
+/**
+ * EligsNotPassDialog 样式
+ * 与 Vue 版本 EligsNotPass.vue 样式保持一致
+ */
+
+/* 弹窗容器 */
+.taskon-eligs-dialog-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+}
+
+/* 头部图标和标题 */
+.taskon-eligs-dialog-header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+
+.taskon-eligs-dialog-icon {
+  width: 48px;
+  height: 48px;
+}
+
+.taskon-eligs-dialog-title {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--taskon-text-primary, #fff);
+}
+
+/* 描述文本 */
+.taskon-eligs-dialog-desc {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--taskon-text-secondary, #a0a0a0);
+  text-align: center;
+}
+
+.taskon-eligs-dialog-desc--success {
+  color: var(--taskon-success, #52c41a);
+}
+
+.taskon-eligs-dialog-highlight {
+  color: var(--taskon-primary, #6366f1);
+  font-weight: 500;
+}
+
+/* 资格条件区域 */
+.taskon-eligs-dialog-eligs {
+  width: 100%;
+  border: 1px solid var(--taskon-border, #333);
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.taskon-eligs-dialog-eligs-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  height: 60px;
+  padding: 0 16px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--taskon-text-primary, #fff);
+  font-size: 14px;
+  text-align: left;
+  transition: background 0.2s;
+}
+
+.taskon-eligs-dialog-eligs-header:hover {
+  background: var(--taskon-bg-hover, rgba(255, 255, 255, 0.05));
+}
+
+.taskon-eligs-dialog-eligs-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.taskon-eligs-dialog-eligs-label {
+  flex: 1;
+}
+
+.taskon-eligs-dialog-arrow {
+  width: 6px;
+  height: 10px;
+  color: var(--taskon-text-secondary, #a0a0a0);
+  transition: transform 0.3s;
+  transform: rotate(90deg);
+}
+
+.taskon-eligs-dialog-arrow--expanded {
+  transform: rotate(-90deg);
+}
+
+.taskon-eligs-dialog-eligs-list {
+  padding: 0 16px 16px;
+}
+
+/* 底部按钮 */
+.taskon-eligs-dialog-button {
+  width: 100%;
+  height: 48px;
+  padding: 0 24px;
+  border: none;
+  border-radius: 8px;
+  background: var(--taskon-primary, #6366f1);
+  color: #fff;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: opacity 0.2s, background 0.2s;
+}
+
+.taskon-eligs-dialog-button:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
+.taskon-eligs-dialog-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+.taskon-eligs-dialog-button--loading {
+  background: var(--taskon-bg-secondary, #2a2a2a);
+}
+
+.taskon-eligs-dialog-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.taskon-eligs-dialog-spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid transparent;
+  border-top-color: currentColor;
+  border-radius: 50%;
+  animation: taskon-eligs-spin 0.8s linear infinite;
+}
+
+@keyframes taskon-eligs-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+/**
+ * EligsBindDialog 样式
+ * Eligibility 绑定弹窗组件样式
+ */
+
+.taskon-eligs-bind-dialog {
+  padding: 0 8px 8px;
+}
+
+/* Eligibility 条件列表区域 */
+.taskon-eligs-bind-eligs-section {
+  margin-bottom: 20px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.taskon-eligs-bind-section-title {
+  margin: 0 0 12px;
+  font-size: 16px;
+  font-weight: 600;
+  color: #fff;
+}
+
+/* 提示文本 */
+.taskon-eligs-bind-tip {
+  margin: 0 0 20px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+/* 绑定区域 */
+.taskon-eligs-bind-section {
+  margin-bottom: 20px;
+}
+
+.taskon-eligs-bind-section-subtitle {
+  margin: 0 0 12px;
+  font-size: 14px;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+/* 绑定列表 */
+.taskon-eligs-bind-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+/* 单个绑定项 */
+.taskon-eligs-bind-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.taskon-eligs-bind-item--bound {
+  background: rgba(74, 222, 128, 0.1);
+  border-color: rgba(74, 222, 128, 0.3);
+}
+
+.taskon-eligs-bind-item-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: #fff;
+}
+
+/* 绑定按钮 */
+.taskon-eligs-bind-item-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 16px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #000;
+  background: linear-gradient(90deg, #00d1ff 0%, #00ff94 100%);
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.taskon-eligs-bind-item-btn:hover {
+  opacity: 0.9;
+}
+
+.taskon-eligs-bind-item-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* 绑定中的加载动画 */
+.taskon-eligs-bind-item-spinner {
+  width: 14px;
+  height: 14px;
+  animation: taskon-eligs-bind-spin 1s linear infinite;
+}
+
+@keyframes taskon-eligs-bind-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* 已绑定状态 */
+.taskon-eligs-bind-item-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #4ade80;
+}
+
+/* 跳过按钮 */
+.taskon-eligs-bind-skip-btn {
+  display: block;
+  width: 100%;
+  padding: 12px 24px;
+  margin-top: 20px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #000;
+  background: linear-gradient(90deg, #00d1ff 0%, #00ff94 100%);
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.taskon-eligs-bind-skip-btn:hover {
+  opacity: 0.9;
+}
+/**
+ * ShareDropdown - 分享下拉菜单样式
+ * @module widgets/Quest/components/ShareDropdown
+ * 与原版 ShareInfo.vue 保持一致
+ */
+
+/* 分享触发按钮 - 方形图标按钮（SimpleBox 样式） */
+.taskon-quest-share-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  margin-left: auto;
+  background: var(--taskon-quest-color-darkest, #1a1a1a);
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.2s;
+  flex-shrink: 0;
+}
+
+.taskon-quest-share-trigger:hover {
+  background: var(--taskon-quest-color-darker, #2a2a2a);
+}
+
+.taskon-quest-share-trigger svg {
+  color: var(--taskon-quest-text-lightest, #fff);
+}
+
+/* 下拉菜单 */
+.taskon-quest-share-menu {
+  width: 230px;
+  background: var(--taskon-quest-share-bg, #222);
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+  z-index: 100;
+  text-align: left;
+}
+
+/* 菜单项 */
+.taskon-quest-share-menu-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 12px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #fff;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+}
+
+.taskon-quest-share-menu-item:hover {
+  background: var(--taskon-quest-menu-hover-bg, rgba(255, 255, 255, 0.08));
+}
+
+.taskon-quest-share-menu-item svg {
+  width: 28px;
+  height: 28px;
+  margin-right: 10px;
+  flex-shrink: 0;
+}
+
+/* ============================================================================
+   二维码弹窗样式 - 与原版 ShareQrCodeDialog.vue 一致
+   ============================================================================ */
+
+/* 覆盖 Dialog 默认样式 - 移除卡片背景，让内容区域完全透明 */
+.taskon-quest-qr-dialog-content {
+  background: transparent !important;
+  border-radius: 0 !important;
+  max-width: 400px !important;
+  box-shadow: none !important;
+}
+
+.taskon-quest-qr-dialog-content .taskon-dialog-body {
+  padding: 0 !important;
+}
+
+.taskon-quest-qr-dialog {
+  width: 100%;
+  max-width: 400px;
+}
+
+/* 海报外层容器 */
+.taskon-quest-qr-poster-outer {
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+/* 海报内容 */
+.taskon-quest-qr-poster {
+  width: 100%;
+}
+
+/* 海报顶部 - 绿色渐变区域 */
+.taskon-quest-qr-poster-header {
+  background: linear-gradient(89.87deg, #e2ff97 0.13%, #cffd55 99.92%);
+  padding: 30px;
+  color: #000;
+}
+
+/* 社区信息 */
+.taskon-quest-qr-owner {
+  display: flex;
+  align-items: center;
+}
+
+.taskon-quest-qr-owner-avatar {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  margin-right: 6px;
+  border: 2px solid #000;
+  object-fit: cover;
+}
+
+.taskon-quest-qr-owner-name {
+  font-size: 24px;
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* 活动名称 */
+.taskon-quest-qr-campaign-name {
+  margin-top: 14px;
+  margin-bottom: 8px;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 600;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  overflow: hidden;
+}
+
+/* Banner 图片 */
+.taskon-quest-qr-banner {
+  width: 100%;
+  border-radius: 10px;
+  display: block;
+}
+
+/* 海报底部 - 黑色区域 */
+.taskon-quest-qr-poster-footer {
+  padding: 30px;
+  background: #000;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+/* 信息区域 */
+.taskon-quest-qr-info {
+  width: calc(100% - 80px);
+}
+
+/* 奖励标题 */
+.taskon-quest-qr-reward-title {
+  display: flex;
+  align-items: center;
+  color: #fff;
+  font-weight: 500;
+}
+
+.taskon-quest-qr-reward-title svg {
+  margin-left: 6px;
+}
+
+/* 时间范围 */
+.taskon-quest-qr-time {
+  display: flex;
+  align-items: center;
+  margin-top: 15px;
+  margin-bottom: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #fff;
+}
+
+.taskon-quest-qr-time svg {
+  margin-right: 6px;
+  flex-shrink: 0;
+}
+
+/* 二维码 */
+.taskon-quest-qr-code {
+  width: 80px;
+  height: 80px;
+  border-radius: 6px;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.taskon-quest-qr-code img {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+/* 操作按钮 */
+.taskon-quest-qr-actions {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  padding: 0 16px;
+  margin-top: 16px;
+}
+
+/* 奖励列表 - 与原版 RewardsLabels.vue 一致 */
+.taskon-quest-qr-rewards-list {
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 6px;
+  margin-right: 10px;
+}
+
+/* 单个奖励项 */
+.taskon-quest-qr-reward-item {
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 400;
+}
+
+/* 奖励标签 - 高亮绿色 */
+.taskon-quest-qr-reward-label {
+  color: #cbff01;
+}
+
+/* 链图标 */
+.taskon-quest-qr-reward-chain-icon {
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  margin-left: 4px;
+}
+
+/* 奖励间的 & 符号 */
+.taskon-quest-qr-reward-and {
+  margin-left: 6px;
+  color: #fff;
+}
+/**
+ * ParticipantsInfo 组件样式
+ * @description 参与人数信息模块样式
+ * @design 基于 Figma 设计稿
+ *
+ * Design tokens from Figma:
+ * - font/Heading/H4: Font(family: "Outfit", style: SemiBold, size: 24, weight: 600, lineHeight: 32)
+ * - font/16px/Light: Font(family: "Outfit", style: Medium, size: 16, weight: 500, lineHeight: 24)
+ * - spacing/padding/l: 20px
+ * - spacing/padding/xs: 8px
+ * - taskon-color/text/lightest: white
+ * - taskon-color/text/lighter: rgba(255,255,255,0.8)
+ */
+
+/* ============================================================================
+   ParticipantsInfo 容器
+   ============================================================================ */
+
+.taskon-quest-participants-info {
+  display: flex;
+  flex-direction: column;
+  gap: var(--taskon-quest-spacing-l, 20px);
+  align-items: stretch;
+  width: 100%;
+}
+
+/* ============================================================================
+   Header 区域（标题 + info 图标）
+   ============================================================================ */
+
+.taskon-quest-participants-info-header {
+  display: flex;
+  gap: var(--taskon-quest-spacing-xs, 8px);
+  align-items: center;
+  padding: 0;
+  margin: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  outline: none;
+}
+
+.taskon-quest-participants-info-header:hover .taskon-quest-participants-info-title,
+.taskon-quest-participants-info-header:hover .taskon-quest-participants-info-icon {
+  color: var(--taskon-quest-text-lightest, #ffffff);
+}
+
+.taskon-quest-participants-info-header:focus-visible {
+  outline: 2px solid var(--taskon-quest-primary, #cbff01);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+.taskon-quest-participants-info-title {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 32px;
+  color: var(--taskon-quest-text-lightest, #ffffff);
+}
+
+.taskon-quest-participants-info-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 12px;
+  height: 12px;
+  color: var(--taskon-quest-text-lighter, rgba(255, 255, 255, 0.8));
+  flex-shrink: 0;
+  transition: color 0.2s;
+}
+
+/* ============================================================================
+   统计行（Label + Value）
+   ============================================================================ */
+
+.taskon-quest-participants-info-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 24px;
+  width: 100%;
+}
+
+/* Winners 行可点击样式 */
+.taskon-quest-participants-info-row--clickable {
+  padding: 0;
+  margin: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  outline: none;
+  transition: opacity 0.2s;
+}
+
+.taskon-quest-participants-info-row--clickable:hover {
+  opacity: 0.8;
+}
+
+.taskon-quest-participants-info-row--clickable:focus-visible {
+  outline: 2px solid var(--taskon-quest-primary, #cbff01);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+.taskon-quest-participants-info-label {
+  color: var(--taskon-quest-text-lighter, rgba(255, 255, 255, 0.8));
+}
+
+.taskon-quest-participants-info-value {
+  color: var(--taskon-quest-text-lightest, #ffffff);
+  text-align: right;
+}
+
+/* Winners 行的可点击值样式 */
+.taskon-quest-participants-info-value--clickable {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.taskon-quest-participants-info-arrow {
+  color: var(--taskon-quest-text-lighter, rgba(255, 255, 255, 0.8));
+  flex-shrink: 0;
+  transition: transform 0.2s;
+}
+
+.taskon-quest-participants-info-row--clickable:hover .taskon-quest-participants-info-arrow {
+  transform: translateX(2px);
+}
+
+/* ============================================================================
+   Info 弹窗样式
+   ============================================================================ */
+
+.taskon-quest-participants-dialog {
+  display: flex;
+  flex-direction: column;
+}
+
+.taskon-quest-participants-dialog-title {
+  margin: 0 0 20px 0;
+  font-size: 22px;
+  font-weight: 600;
+  line-height: 28px;
+  color: var(--taskon-quest-text-lightest, #ffffff);
+}
+
+.taskon-quest-participants-dialog-section {
+  margin-bottom: 20px;
+}
+
+.taskon-quest-participants-dialog-subtitle {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  color: var(--taskon-quest-text-lightest, #ffffff);
+}
+
+.taskon-quest-participants-dialog-desc {
+  margin-top: 4px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+/* Flow Chart */
+.taskon-quest-participants-dialog-chart {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 30px;
+}
+
+.taskon-quest-participants-dialog-arrow-wrap {
+  flex-shrink: 0;
+  display: flex;
+  align-items: stretch;
+}
+
+.taskon-quest-participants-dialog-arrow {
+  width: 36px;
+  height: auto;
+}
+
+.taskon-quest-participants-dialog-cards {
+  flex: 1;
+  margin-left: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.taskon-quest-participants-dialog-card {
+  padding: 8px 20px;
+  border-radius: 6px;
+}
+
+.taskon-quest-participants-dialog-card--level1 {
+  background: rgba(0, 255, 163, 0.2);
+}
+
+.taskon-quest-participants-dialog-card--level2 {
+  background: rgba(0, 255, 163, 0.3);
+}
+
+.taskon-quest-participants-dialog-card--level3 {
+  background: rgba(0, 255, 163, 0.4);
+}
+
+.taskon-quest-participants-dialog-card--level4 {
+  background: rgba(0, 255, 163, 0.5);
+}
+
+.taskon-quest-participants-dialog-card-title {
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+  color: var(--taskon-quest-text-lightest, #ffffff);
+}
+
+.taskon-quest-participants-dialog-card-desc {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+/* Confirm Button */
+.taskon-quest-participants-dialog-btn {
+  width: 100%;
+}
+/**
+ * WinnerListModal 组件样式
+ * @description Winner 列表弹窗样式
+ */
+
+/* ============================================================================
+   Modal 容器
+   ============================================================================ */
+
+.taskon-quest-winner-modal {
+  max-height: 80vh;
+}
+
+.taskon-quest-winner-content {
+  display: flex;
+  flex-direction: column;
+  min-height: 300px;
+}
+
+/* ============================================================================
+   Header 区域
+   ============================================================================ */
+
+.taskon-quest-winner-header {
+  margin-bottom: 16px;
+}
+
+.taskon-quest-winner-title {
+  margin: 0;
+  font-size: 22px;
+  font-weight: 600;
+  line-height: 28px;
+  color: var(--taskon-quest-text-lightest, #ffffff);
+}
+
+/* ============================================================================
+   Tab 切换
+   ============================================================================ */
+
+.taskon-quest-winner-tabs {
+  margin-bottom: 20px;
+}
+
+/* ============================================================================
+   错误状态
+   ============================================================================ */
+
+.taskon-quest-winner-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  padding: 40px 20px;
+  text-align: center;
+}
+
+.taskon-quest-winner-error p {
+  margin: 0;
+  color: var(--taskon-quest-text-lighter, rgba(255, 255, 255, 0.8));
+}
+
+/* ============================================================================
+   列表区域
+   ============================================================================ */
+
+.taskon-quest-winner-list {
+  flex: 1;
+  min-height: 200px;
+  max-height: 50vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+/* ============================================================================
+   表格样式
+   ============================================================================ */
+
+.taskon-quest-winner-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.taskon-quest-winner-table thead {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(--taskon-quest-bg, #1d2123);
+}
+
+.taskon-quest-winner-table th {
+  padding: 12px 16px;
+  text-align: left;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  color: var(--taskon-quest-text-lighter, rgba(255, 255, 255, 0.6));
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.taskon-quest-winner-table th:last-child {
+  text-align: right;
+}
+
+.taskon-quest-winner-table td {
+  padding: 12px 16px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  color: var(--taskon-quest-text-lightest, #ffffff);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  vertical-align: middle;
+}
+
+.taskon-quest-winner-table tr:hover td {
+  background: rgba(255, 255, 255, 0.02);
+}
+
+/* ============================================================================
+   Position 列
+   ============================================================================ */
+
+.taskon-quest-winner-position {
+  width: 80px;
+  font-weight: 600;
+  color: var(--taskon-quest-primary, #cbff01);
+}
+
+/* ============================================================================
+   User 列（不显示头像，不可点击）
+   ============================================================================ */
+
+.taskon-quest-winner-user {
+  min-width: 120px;
+}
+
+.taskon-quest-winner-user-name {
+  display: block;
+  max-width: 180px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--taskon-quest-text-lightest, #ffffff);
+}
+
+/* ============================================================================
+   Rewards 列
+   ============================================================================ */
+
+.taskon-quest-winner-rewards {
+  text-align: right !important;
+}
+
+.taskon-quest-winner-rewards-list {
+  display: inline-flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 8px;
+  max-width: 300px;
+}
+
+/* ============================================================================
+   空状态
+   ============================================================================ */
+
+.taskon-quest-winner-empty {
+  padding: 40px 20px !important;
+  text-align: center !important;
+  color: var(--taskon-quest-text-lighter, rgba(255, 255, 255, 0.6)) !important;
+}
+
+/* ============================================================================
+   加载状态
+   ============================================================================ */
+
+.taskon-quest-winner-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 20px;
+  color: var(--taskon-quest-text-lighter, rgba(255, 255, 255, 0.6));
+}
+
+.taskon-quest-winner-loading-spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgba(255, 255, 255, 0.2);
+  border-top-color: var(--taskon-quest-primary, #cbff01);
+  border-radius: 50%;
+  animation: taskon-quest-winner-spin 0.8s linear infinite;
+}
+
+@keyframes taskon-quest-winner-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ============================================================================
+   奖励标签样式
+   ============================================================================ */
+
+.taskon-quest-winner-reward-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+  white-space: nowrap;
+}
+
+.taskon-quest-winner-reward-label-type {
+  color: var(--taskon-quest-text-lighter, rgba(255, 255, 255, 0.6));
+}
+
+.taskon-quest-winner-reward-label-value {
+  color: var(--taskon-quest-primary, #cbff01);
+}
+/**
+ * QuestRewards 样式
+ * @description Quest 奖励展示模块的样式定义
+ *
+ * 命名规范：
+ * - 主容器：.taskon-quest-rewards
+ * - 子元素：.taskon-quest-rewards-{element}
+ * - 状态修饰：.taskon-quest-rewards-{element}--{state}
+ */
+
+/* ============================================================================
+   主容器
+   ============================================================================ */
+
+.taskon-quest-rewards {
+  overflow: hidden;
+  border-radius: 10px;
+  background: var(--taskon-bg-card, rgba(255, 255, 255, 0.04));
+}
+
+.taskon-quest-rewards-container {
+  padding: 20px 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 28px;
+}
+
+/* ============================================================================
+   用户信息（Ranking 模式）
+   ============================================================================ */
+
+.taskon-quest-rewards-user {
+  display: flex;
+  align-items: center;
+}
+
+.taskon-quest-rewards-user-avatar {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  border: 2px solid #f688ff;
+  object-fit: cover;
+  margin-right: 16px;
+}
+
+.taskon-quest-rewards-user-name {
+  flex: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: var(--taskon-text-primary, #fff);
+  font-size: 22px;
+  font-weight: 500;
+  line-height: 28px;
+}
+
+/* ============================================================================
+   排名积分信息（Ranking 模式）
+   ============================================================================ */
+
+.taskon-quest-rewards-ranking-point {
+  padding: 16px;
+  border-radius: 10px;
+  border: 1px solid var(--taskon-border-color, rgba(255, 255, 255, 0.06));
+  background: var(--taskon-bg-card, rgba(255, 255, 255, 0.04));
+}
+
+.taskon-quest-rewards-ranking-point-row {
+  display: flex;
+  align-items: center;
+}
+
+.taskon-quest-rewards-ranking-point-row--points {
+  margin-top: 24px;
+}
+
+.taskon-quest-rewards-ranking-point-label {
+  display: flex;
+  align-items: center;
+  color: var(--taskon-text-tertiary, rgba(255, 255, 255, 0.5));
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 20px;
+}
+
+/* Tip icon margin (controlled externally as TipPopover has no internal margin) */
+.taskon-quest-rewards-ranking-point-tip-icon {
+  margin-left: 6px;
+}
+
+.taskon-quest-rewards-ranking-point-value {
+  position: relative;
+  margin-left: auto;
+}
+
+.taskon-quest-rewards-ranking-point-number {
+  color: var(--taskon-primary, #cbff01);
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 28px;
+}
+
+.taskon-quest-rewards-ranking-point-tier {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  color: var(--taskon-text-tertiary, rgba(255, 255, 255, 0.5));
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 16px;
+  white-space: nowrap;
+}
+
+.taskon-quest-rewards-ranking-point-amount {
+  margin-left: auto;
+  color: var(--taskon-secondary, #00ffa3);
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 28px;
+}
+
+.taskon-quest-rewards-ranking-point-tip {
+  text-align: right;
+  margin-left: auto;
+  width: 50%;
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--taskon-text-tertiary, rgba(255, 255, 255, 0.5));
+}
+
+.taskon-quest-rewards-ranking-point-tip-highlight {
+  color: var(--taskon-primary, #cbff01);
+}
+
+/* ============================================================================
+   奖励分组
+   ============================================================================ */
+
+.taskon-quest-rewards-group {
+  display: flex;
+  flex-direction: column;
+}
+
+.taskon-quest-rewards-group-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+
+.taskon-quest-rewards-group-title {
+  margin: 0;
+  font-size: 16px;
+  line-height: 20px;
+  font-weight: 500;
+  color: var(--taskon-text-primary, #fff);
+}
+
+.taskon-quest-rewards-group-cards {
+  display: flex;
+  flex-direction: column;
+}
+
+/* ============================================================================
+   奖励卡片
+   ============================================================================ */
+
+.taskon-quest-rewards-card {
+  margin-top: 12px;
+  background: var(--taskon-bg-card, rgba(255, 255, 255, 0.04));
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.taskon-quest-rewards-card:first-child {
+  margin-top: 0;
+}
+
+.taskon-quest-rewards-card--active {
+  border: 1px solid #cbff01;
+}
+
+/* Tier 表头（仅 PointRanking 模式） */
+.taskon-quest-rewards-card-tier {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 8px 16px;
+  background: var(--taskon-bg-darkest, rgba(0, 0, 0, 0.4));
+  font-size: 16px;
+  line-height: 20px;
+}
+
+.taskon-quest-rewards-card-tier--active {
+  background: linear-gradient(90deg, rgba(203, 255, 1, 0.9) 0%, rgba(0, 255, 163, 0.9) 100%);
+}
+
+.taskon-quest-rewards-card-tier-label {
+  font-weight: 500;
+  color: var(--taskon-text-primary, #fff);
+}
+
+.taskon-quest-rewards-card-tier--active .taskon-quest-rewards-card-tier-label {
+  color: var(--taskon-text-inverse, #000);
+}
+
+.taskon-quest-rewards-card-tier-range {
+  color: var(--taskon-text-tertiary, rgba(255, 255, 255, 0.5));
+}
+
+.taskon-quest-rewards-card-tier--active .taskon-quest-rewards-card-tier-range {
+  color: var(--taskon-text-inverse-secondary, rgba(0, 0, 0, 0.6));
+}
+
+/* 卡片主体 */
+.taskon-quest-rewards-card-body {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+/* ============================================================================
+   Whitelist Description（可折叠）
+   ============================================================================ */
+
+.taskon-quest-rewards-whitelist-desc {
+  width: 100%;
+}
+
+.taskon-quest-rewards-whitelist-desc-trigger {
+  width: 100%;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  text-align: left;
+}
+
+.taskon-quest-rewards-whitelist-desc-icon {
+  color: var(--taskon-text-tertiary, rgba(255, 255, 255, 0.5));
+  transition: transform 0.3s ease;
+  flex-shrink: 0;
+}
+
+.taskon-quest-rewards-whitelist-desc-icon--open {
+  transform: rotate(180deg);
+}
+
+.taskon-quest-rewards-whitelist-desc-content {
+  margin-top: 8px;
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--taskon-text-secondary, rgba(255, 255, 255, 0.7));
+}
+
+/* ============================================================================
+   基础行组件
+   ============================================================================ */
+
+.taskon-quest-rewards-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.taskon-quest-rewards-row-label {
+  font-size: 18px;
+  line-height: 24px;
+  font-weight: 500;
+  color: var(--taskon-text-primary, #fff);
+  flex-shrink: 0;
+}
+
+.taskon-quest-rewards-row-value {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  line-height: 16px;
+  color: var(--taskon-text-primary, #fff);
+}
+
+/* ============================================================================
+   链图标
+   ============================================================================ */
+
+.taskon-quest-rewards-chain-icon {
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+/* Chain Icon Tooltip */
+.taskon-quest-rewards-chain-tooltip {
+  padding: 6px 10px;
+  background: var(--taskon-bg-popover, #1a1a1a);
+  border: 1px solid var(--taskon-border-color, rgba(255, 255, 255, 0.1));
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--taskon-text-primary, #fff);
+  z-index: 1000;
+  white-space: nowrap;
+}
+
+.taskon-quest-rewards-chain-tooltip-arrow {
+  fill: var(--taskon-bg-popover, #1a1a1a);
+}
+
+/* ============================================================================
+   Token 奖励
+   ============================================================================ */
+
+.taskon-quest-rewards-token {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.taskon-quest-rewards-token-blindbox {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 16px;
+  line-height: 20px;
+  font-weight: 600;
+  margin-bottom: 20px;
+  opacity: 0.9;
+}
+
+.taskon-quest-rewards-token-blindbox span:last-child {
+  background: linear-gradient(90deg, #cbff01 0%, #00ffa3 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.taskon-quest-rewards-token-pool {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 600;
+}
+
+.taskon-quest-rewards-token-amount {
+  font-size: 22px;
+  line-height: 28px;
+  color: var(--taskon-primary, #cbff01);
+}
+
+.taskon-quest-rewards-token-name {
+  font-size: 22px;
+  line-height: 28px;
+  color: var(--taskon-primary, #cbff01);
+}
+
+.taskon-quest-rewards-token-usdt-tag {
+  font-size: 12px;
+  line-height: 14px;
+  padding: 2px 6px;
+  background: var(--taskon-bg-secondary, rgba(255, 255, 255, 0.1));
+  border-radius: 4px;
+  color: var(--taskon-text-secondary, rgba(255, 255, 255, 0.7));
+}
+
+.taskon-quest-rewards-token-per {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 4px;
+}
+
+.taskon-quest-rewards-token-per-label {
+  font-size: 14px;
+  line-height: 16px;
+  color: var(--taskon-text-tertiary, rgba(255, 255, 255, 0.5));
+}
+
+.taskon-quest-rewards-token-per-value {
+  margin-left: auto;
+  font-size: 14px;
+  line-height: 16px;
+  color: var(--taskon-text-secondary, rgba(255, 255, 255, 0.7));
+}
+
+/* BRC20 标签 */
+.taskon-quest-rewards-token-brc20 {
+  padding: 2px 6px;
+  font-size: 12px;
+  line-height: 14px;
+  font-weight: 500;
+  color: #f97316;
+  background: rgba(249, 115, 22, 0.15);
+  border-radius: 4px;
+}
+
+/* ============================================================================
+   NFT 奖励
+   ============================================================================ */
+
+.taskon-quest-rewards-nft-info,
+.taskon-quest-rewards-minted-nft-info,
+.taskon-quest-rewards-cap-info,
+.taskon-quest-rewards-whitelist-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+}
+
+.taskon-quest-rewards-nft-name,
+.taskon-quest-rewards-minted-nft-name,
+.taskon-quest-rewards-cap-name,
+.taskon-quest-rewards-whitelist-name {
+  font-size: 22px;
+  line-height: 28px;
+  font-weight: 600;
+  color: var(--taskon-text-primary, #fff);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 200px;
+}
+
+.taskon-quest-rewards-minted-nft-quantity {
+  font-size: 14px;
+  line-height: 16px;
+  color: var(--taskon-text-secondary, rgba(255, 255, 255, 0.7));
+}
+
+/* ============================================================================
+   Popover 弹出层（NFT/Minted NFT 使用）
+   ============================================================================ */
+
+.taskon-quest-rewards-popover-content {
+  padding: 12px 16px;
+  background: var(--taskon-bg-popover, #1a1a1a);
+  border: 1px solid var(--taskon-border-color, rgba(255, 255, 255, 0.1));
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  max-width: 300px;
+  z-index: 1000;
+}
+
+.taskon-quest-rewards-popover-name {
+  font-size: 14px;
+  line-height: 18px;
+  color: var(--taskon-text-primary, #fff);
+  word-break: break-all;
+}
+
+.taskon-quest-rewards-popover-address {
+  margin-top: 8px;
+}
+
+.taskon-quest-rewards-popover-address-title {
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 500;
+  color: var(--taskon-text-primary, #fff);
+}
+
+.taskon-quest-rewards-popover-address-row {
+  margin-top: 4px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  width: 100%;
+  text-align: left;
+  outline: none;
+}
+
+.taskon-quest-rewards-popover-address-text {
+  flex: 1;
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--taskon-text-tertiary, rgba(255, 255, 255, 0.5));
+  word-break: break-all;
+}
+
+.taskon-quest-rewards-popover-address-copy {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  color: var(--taskon-text-tertiary, rgba(255, 255, 255, 0.5));
+  transition: color 0.2s;
+}
+
+.taskon-quest-rewards-popover-address-row:hover .taskon-quest-rewards-popover-address-copy {
+  color: var(--taskon-primary, #cbff01);
+}
+
+.taskon-quest-rewards-popover-arrow {
+  fill: var(--taskon-bg-popover, #1a1a1a);
+}
+
+/* ============================================================================
+   积分/经验值奖励
+   ============================================================================ */
+
+.taskon-quest-rewards-points-info,
+.taskon-quest-rewards-exp-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.taskon-quest-rewards-points-icon {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+}
+
+.taskon-quest-rewards-points-amount,
+.taskon-quest-rewards-exp-amount {
+  font-size: 22px;
+  line-height: 28px;
+  font-weight: 600;
+  color: var(--taskon-primary, #cbff01);
+}
+
+.taskon-quest-rewards-points-name,
+.taskon-quest-rewards-exp-label {
+  font-size: 22px;
+  line-height: 28px;
+  color: var(--taskon-text-primary, #fff);
+}
+
+/* ============================================================================
+   Discord 角色
+   ============================================================================ */
+
+.taskon-quest-rewards-discord-role-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.taskon-quest-rewards-discord-role-name {
+  font-size: 22px;
+  line-height: 28px;
+  color: var(--taskon-link, #5865f2);
+  cursor: pointer;
+}
+
+.taskon-quest-rewards-discord-role-name:hover {
+  text-decoration: underline;
+}
+
+.taskon-quest-rewards-discord-role-warning {
+  font-size: 12px;
+  line-height: 14px;
+  color: var(--taskon-warning, #ffc107);
+}
+
+/* ============================================================================
+   Winner 数量
+   ============================================================================ */
+
+.taskon-quest-rewards-winner-open {
+  font-size: 22px;
+  line-height: 28px;
+  color: var(--taskon-secondary, #00ffa3);
+}
+
+.taskon-quest-rewards-winner-fcfs {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  text-align: right;
+}
+
+.taskon-quest-rewards-winner-fcfs-row {
+  display: flex;
+  align-items: baseline;
+  font-size: 18px;
+  line-height: 24px;
+}
+
+.taskon-quest-rewards-winner-available {
+  color: var(--taskon-secondary, #00ffa3);
+}
+
+.taskon-quest-rewards-winner-separator {
+  color: var(--taskon-text-primary, #fff);
+}
+
+.taskon-quest-rewards-winner-total {
+  color: var(--taskon-text-primary, #fff);
+}
+
+.taskon-quest-rewards-winner-label {
+  font-size: 14px;
+  line-height: 16px;
+  color: var(--taskon-text-secondary, rgba(255, 255, 255, 0.7));
+}
+
+.taskon-quest-rewards-winner-count {
+  font-size: 22px;
+  line-height: 28px;
+  color: var(--taskon-secondary, #00ffa3);
+}
+
+.taskon-quest-rewards-winner-ranking {
+  font-size: 22px;
+  line-height: 28px;
+  color: var(--taskon-secondary, #00ffa3);
+}
+
+/* ============================================================================
+   Gas Station 进度条（与 Vue 原版 GasStationProgress.vue + ColorfulProgress.vue 一致）
+   ============================================================================ */
+
+.taskon-quest-rewards-gas {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 8px;
+}
+
+.taskon-quest-rewards-gas-label {
+  font-size: 14px;
+  line-height: 16px;
+  color: var(--taskon-text-tertiary, rgba(255, 255, 255, 0.5));
+  white-space: nowrap;
+}
+
+.taskon-quest-rewards-gas-bar {
+  flex: 1;
+  position: relative;
+  height: 8px;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+/* 进度条靠右对齐（显示剩余量） */
+.taskon-quest-rewards-gas-progress {
+  position: absolute;
+  right: 0;
+  top: 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-quest-rewards-gas-wave {
+  width: 3px;
+  flex-shrink: 0;
+  height: 200%;
+  transform: rotate(45deg);
+  background: rgba(0, 0, 0, 0.1);
+}
+
+/* ============================================================================
+   NFT 预览图
+   ============================================================================ */
+
+.taskon-quest-rewards-preview {
+  width: 100%;
+  padding: 26px;
+  border: 1px solid var(--taskon-border-color, rgba(255, 255, 255, 0.1));
+  border-radius: 8px;
+  box-sizing: border-box;
+}
+
+.taskon-quest-rewards-preview-image,
+.taskon-quest-rewards-preview-video {
+  width: 100%;
+  border-radius: 8px;
+  display: block;
+}
+
+/* ============================================================================
+   预估奖励
+   ============================================================================ */
+
+.taskon-quest-rewards-estimated {
+  position: relative;
+  padding: 16px;
+  background: transparent;
+  border-radius: 8px;
+  border: 1px solid rgba(0, 255, 163, 0.4);
+  overflow: hidden;
+}
+
+.taskon-quest-rewards-estimated-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.taskon-quest-rewards-estimated-title {
+  font-size: 14px;
+  line-height: 16px;
+  font-weight: 500;
+  color: var(--taskon-text-secondary, rgba(255, 255, 255, 0.7));
+}
+
+.taskon-quest-rewards-estimated-value {
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
+  font-size: 18px;
+  line-height: 24px;
+  font-weight: 600;
+  text-align: right;
+}
+
+.taskon-quest-rewards-estimated-amount {
+  color: var(--taskon-primary, #cbff01);
+}
+
+.taskon-quest-rewards-estimated-symbol {
+  color: var(--taskon-text-primary, #fff);
+}
+
+.taskon-quest-rewards-estimated-formula {
+  font-size: 12px;
+  line-height: 14px;
+  color: var(--taskon-text-tertiary, rgba(255, 255, 255, 0.5));
+  margin-top: 4px;
+}
+
+.taskon-quest-rewards-estimated-label {
+  font-size: 14px;
+  line-height: 16px;
+  font-weight: 500;
+  color: var(--taskon-text-secondary, rgba(255, 255, 255, 0.7));
+}
+
+.taskon-quest-rewards-estimated-points {
+  font-size: 18px;
+  line-height: 24px;
+  font-weight: 700;
+  color: var(--taskon-text-primary, #fff);
+}
+
+.taskon-quest-rewards-estimated-total {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  font-size: 14px;
+  line-height: 16px;
+  color: var(--taskon-text-secondary, rgba(255, 255, 255, 0.7));
+}
+
+/* 未完成遮罩层 */
+.taskon-quest-rewards-estimated-mask {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: rgba(48, 48, 48, 0.4);
+  border-radius: 8px;
+  backdrop-filter: blur(4px);
+  padding: 16px;
+}
+
+.taskon-quest-rewards-estimated-mask-icon {
+  width: 49px;
+  height: 56px;
+}
+
+.taskon-quest-rewards-estimated-mask-title {
+  margin-top: 8px;
+  font-size: 14px;
+  line-height: 16px;
+  font-weight: 500;
+  color: var(--taskon-secondary, #00ffa3);
+  text-align: center;
+}
+
+.taskon-quest-rewards-estimated-mask-subtitle {
+  margin-top: 4px;
+  font-size: 12px;
+  line-height: 14px;
+  color: var(--taskon-text-primary, #fff);
+  text-align: center;
+}
+
+/* ============================================================================
+   Bonus 奖励模块
+   ============================================================================ */
+
+.taskon-quest-rewards-bonus {
+  /* 父元素 .taskon-quest-rewards-section 已有 gap，无需 margin */
+}
+
+.taskon-quest-rewards-bonus-title {
+  font-size: 16px;
+  line-height: 20px;
+  font-weight: 500;
+  color: var(--taskon-text-primary, #fff);
+}
+
+.taskon-quest-rewards-bonus-card {
+  margin-top: 14px;
+  padding: 20px 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  border-radius: 10px;
+  background: var(--taskon-bg-card, rgba(255, 255, 255, 0.04));
+}
+
+/* 覆盖 BaseRow 的 label 样式，匹配 Vue 版本 */
+.taskon-quest-rewards-bonus-card .taskon-quest-rewards-row-label {
+  color: var(--taskon-text-secondary, rgba(255, 255, 255, 0.7));
+  font-size: 16px;
+  line-height: 20px;
+}
+
+.taskon-quest-rewards-bonus-desc {
+  color: var(--taskon-text-tertiary, rgba(255, 255, 255, 0.5));
+  font-size: 14px;
+  line-height: 18px;
+  text-align: right;
+}
+
+.taskon-quest-rewards-bonus-value {
+  display: flex;
+  align-items: flex-end;
+  color: var(--taskon-text-primary, #fff);
+  text-align: right;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: normal;
+}
+
+.taskon-quest-rewards-bonus-amount {
+  margin-right: 4px;
+}
+
+.taskon-quest-rewards-bonus-unit {
+  font-size: 14px;
+  font-weight: 400;
+}
+
+/* ============================================================================
+   移动端响应式
+   ============================================================================ */
+
+@media (max-width: 750px) {
+  .taskon-quest-rewards {
+    margin-top: 4vw;
+  }
+
+  .taskon-quest-rewards-container {
+    padding: 4vw;
+    gap: 7.2vw;
+  }
+
+  /* 用户信息移动端样式 */
+  .taskon-quest-rewards-user-avatar {
+    margin-right: 2.933vw;
+    width: 10.667vw;
+    height: 10.667vw;
+  }
+
+  .taskon-quest-rewards-user-name {
+    font-size: 4.8vw;
+    line-height: 6vw;
+  }
+
+  /* 排名积分移动端样式 */
+  .taskon-quest-rewards-ranking-point {
+    padding: 3.467vw 4vw;
+  }
+
+  .taskon-quest-rewards-ranking-point-label {
+    font-size: 3.733vw;
+    line-height: 4.667vw;
+  }
+
+  .taskon-quest-rewards-ranking-point-number,
+  .taskon-quest-rewards-ranking-point-amount {
+    font-size: 4.533vw;
+    line-height: 5.733vw;
+  }
+
+  .taskon-quest-rewards-ranking-point-row--points {
+    margin-top: 6.4vw;
+  }
+
+  .taskon-quest-rewards-ranking-point-tier {
+    font-size: 2.933vw;
+    line-height: 3.733vw;
+  }
+
+  .taskon-quest-rewards-card {
+    margin-top: 1.6vw;
+  }
+
+  .taskon-quest-rewards-card-tier {
+    gap: 0.8vw;
+    padding: 0.8vw 1.333vw;
+    font-size: 3.467vw;
+    line-height: 4.4vw;
+  }
+
+  .taskon-quest-rewards-card-body {
+    padding: 1.6vw;
+    gap: 2.133vw;
+  }
+
+  .taskon-quest-rewards-row-label {
+    font-size: 3.867vw;
+    line-height: 4.8vw;
+  }
+
+  .taskon-quest-rewards-token-amount,
+  .taskon-quest-rewards-token-name,
+  .taskon-quest-rewards-nft-name,
+  .taskon-quest-rewards-minted-nft-name,
+  .taskon-quest-rewards-cap-name,
+  .taskon-quest-rewards-whitelist-name,
+  .taskon-quest-rewards-points-amount,
+  .taskon-quest-rewards-points-name,
+  .taskon-quest-rewards-exp-amount,
+  .taskon-quest-rewards-exp-label,
+  .taskon-quest-rewards-discord-role-name,
+  .taskon-quest-rewards-winner-count,
+  .taskon-quest-rewards-winner-ranking,
+  .taskon-quest-rewards-winner-open {
+    font-size: 4.267vw;
+    line-height: 5.333vw;
+  }
+
+  .taskon-quest-rewards-preview {
+    padding: 6.267vw;
+  }
+
+  /* Bonus 模块移动端样式 */
+  .taskon-quest-rewards-bonus-card {
+    margin-top: 2.667vw;
+    padding: 4vw;
+    gap: 5.333vw;
+  }
+
+  .taskon-quest-rewards-bonus-card .taskon-quest-rewards-row-label {
+    font-size: 3.467vw;
+    line-height: 4.4vw;
+  }
+
+  .taskon-quest-rewards-bonus-desc {
+    font-size: 3.2vw;
+    line-height: 4vw;
+  }
+
+  .taskon-quest-rewards-bonus-value {
+    font-size: 3.733vw;
+    line-height: 4vw;
+  }
+
+  .taskon-quest-rewards-bonus-amount {
+    margin-right: 0.8vw;
+  }
+
+  .taskon-quest-rewards-bonus-unit {
+    font-size: 3.2vw;
+  }
+
+  /* View Leaderboard 按钮移动端样式 */
+  .taskon-quest-rewards-view-leaderboard {
+    font-size: 3.2vw;
+    line-height: 4vw;
+  }
+
+  .taskon-quest-rewards-view-leaderboard-arrow {
+    margin-left: 1.867vw;
+  }
+
+  /* Gas Station 移动端样式 */
+  .taskon-quest-rewards-gas {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 2vw;
+  }
+
+  .taskon-quest-rewards-gas-label {
+    font-size: 3.2vw;
+    line-height: 4vw;
+  }
+
+  .taskon-quest-rewards-gas-bar {
+    width: 100%;
+    height: 1.6vw;
+  }
+
+  .taskon-quest-rewards-gas-wave {
+    width: 0.6vw;
+    gap: 1.2vw;
+  }
+}
+
+/* ============================================================================
+   View Leaderboard 按钮（链接样式，与原版一致）
+   ============================================================================ */
+
+.taskon-quest-rewards-view-leaderboard {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--taskon-link, #58afff);
+  font-size: 14px;
+  line-height: 18px;
+  transition: opacity 0.2s ease;
+}
+
+.taskon-quest-rewards-view-leaderboard:hover {
+  opacity: 0.8;
+}
+
+.taskon-quest-rewards-view-leaderboard-icon {
+  display: none; /* 原版无图标 */
+}
+
+.taskon-quest-rewards-view-leaderboard-text {
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.taskon-quest-rewards-view-leaderboard-arrow {
+  font-size: 12px;
+  margin-left: 4px;
+}
+
+/* ============================================================================
+   Leaderboard 弹窗样式
+   ============================================================================ */
+
+.taskon-quest-leaderboard-modal {
+  background: var(--taskon-bg-card, #1a1a1a);
+}
+
+.taskon-quest-leaderboard-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.taskon-quest-leaderboard-title {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--taskon-text-primary, #fff);
+}
+
+.taskon-quest-leaderboard-subtitle {
+  margin: 0;
+  font-size: 14px;
+  color: var(--taskon-text-secondary, rgba(255, 255, 255, 0.7));
+}
+
+.taskon-quest-leaderboard-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 24px;
+  text-align: center;
+  color: var(--taskon-text-secondary, rgba(255, 255, 255, 0.7));
+}
+
+.taskon-quest-leaderboard-table {
+  margin-top: 8px;
+}
+
+.taskon-quest-leaderboard-pagination {
+  display: flex;
+  justify-content: center;
+  margin-top: 16px;
+}
+
+/* 排名徽章 */
+.taskon-quest-leaderboard-rank {
+  display: inline-flex;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--taskon-text-primary, #fff);
+}
+
+/* Unranked / N/A 状态 */
+.taskon-quest-leaderboard-rank--unranked {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--taskon-text-tertiary, rgba(255, 255, 255, 0.5));
+}
+
+/* 表头带提示框的容器 */
+.taskon-quest-leaderboard-header {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+/* 层级列 */
+.taskon-quest-leaderboard-tier {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--taskon-text-primary, #fff);
+}
+
+/* 用户单元格 */
+.taskon-quest-leaderboard-user {
+  display: flex;
+  align-items: center;
+}
+
+.taskon-quest-leaderboard-user--current {
+  justify-content: flex-start;
+}
+
+.taskon-quest-leaderboard-user-badge {
+  padding: 2px 8px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--taskon-bg-body, #111);
+  background: var(--taskon-secondary, #00ffa3);
+  border-radius: 4px;
+}
+
+.taskon-quest-leaderboard-user-name {
+  font-size: 14px;
+  color: var(--taskon-text-primary, #fff);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 积分 */
+.taskon-quest-leaderboard-points {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--taskon-text-primary, #fff);
+}
+
+/* 奖励 */
+.taskon-quest-leaderboard-reward-cell {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  text-align: right;
+}
+
+.taskon-quest-leaderboard-reward-type {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--taskon-text-primary, #fff);
+}
+
+.taskon-quest-leaderboard-reward {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--taskon-primary, #cbff01);
+}
+
+.taskon-quest-leaderboard-not-qualified {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--taskon-text-tertiary, rgba(255, 255, 255, 0.5));
+}
+
+.taskon-quest-leaderboard-no-reward {
+  font-size: 14px;
+  color: var(--taskon-text-tertiary, rgba(255, 255, 255, 0.5));
+}
+/**
+ * RewardModuleDialog styles
+ * Scope UserCenter module styles inside Quest popup
+ */
+
+.taskon-quest-reward-dialog .taskon-user-center {
+  padding: 32px 0 0 0;
+  background: transparent;
+  border-radius: 0;
+  gap: 24px;
+}
+
+.taskon-quest-reward-dialog .taskon-my-rewards {
+  gap: 24px;
+}
+
+.taskon-quest-reward-dialog .taskon-my-rewards__section {
+  gap: 16px;
+}
+
+.taskon-quest-reward-dialog .taskon-points-list {
+  background: transparent;
+}
+/**
+ * OperateFooter styles
+ * Following Widget naming convention: .taskon-quest-footer-*
+ */
+
+/* ============================================================================
+   Main Container
+   ============================================================================ */
+
+.taskon-quest-footer {
+  margin-top: 20px;
+  position: relative;
+}
+
+@media (max-width: 750px) {
+  .taskon-quest-footer {
+    margin-top: 0;
+  }
+}
+
+/* ============================================================================
+   Status Card - New Design (v2)
+   ============================================================================ */
+
+/* Container for the entire status section */
+.taskon-quest-footer-status {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+/* Title row: title + badge */
+.taskon-quest-footer-title-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* Badge styles */
+.taskon-quest-footer-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 20px;
+  padding: 0 8px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 16px;
+  text-transform: uppercase;
+}
+
+.taskon-quest-footer-badge--winner {
+  color: #cbff01;
+  background: linear-gradient(
+      90deg,
+      rgba(203, 255, 1, 0.1) 0%,
+      rgba(203, 255, 1, 0.1) 100%
+    ),
+    linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0.1) 0%,
+      rgba(255, 255, 255, 0.1) 100%
+    );
+}
+
+.taskon-quest-footer-badge--qualifier,
+.taskon-quest-footer-badge--submitter {
+  color: #1affab;
+  background: linear-gradient(
+      90deg,
+      rgba(26, 255, 171, 0.1) 0%,
+      rgba(26, 255, 171, 0.1) 100%
+    ),
+    linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0.1) 0%,
+      rgba(255, 255, 255, 0.1) 100%
+    );
+}
+
+/* Dark content card */
+.taskon-quest-footer-card {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  padding: 12px;
+  border-radius: 8px;
+  background: linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0.1) 0%,
+      rgba(255, 255, 255, 0.1) 100%
+    ),
+    linear-gradient(90deg, #0d0d0d 0%, #0d0d0d 100%);
+}
+
+@media (max-width: 750px) {
+  .taskon-quest-footer-card {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 8px;
+    padding: 3.2vw;
+  }
+}
+
+/* Card message text (for simple messages) */
+.taskon-quest-footer-card-message {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  color: #fff;
+}
+
+/* ============================================================================
+   Status Card - Legacy styles (keep for compatibility)
+   ============================================================================ */
+
+/* Card content area */
+.taskon-quest-footer-card-content {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+/* ============================================================================
+   Title and Description - New Design (v2)
+   ============================================================================ */
+
+.taskon-quest-footer-title {
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 28px;
+  color: #fff;
+}
+
+@media (max-width: 750px) {
+  .taskon-quest-footer-title {
+    font-size: 4.267vw;
+    line-height: 5.867vw;
+  }
+}
+
+.taskon-quest-footer-desc {
+  margin-top: 2px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 18px;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+@media (max-width: 750px) {
+  .taskon-quest-footer-desc {
+    margin-top: 0.533vw;
+    font-size: 3.2vw;
+    line-height: 3.733vw;
+  }
+}
+
+/* ============================================================================
+   Connect Wallet
+   ============================================================================ */
+
+.taskon-quest-footer-connect {
+  display: flex;
+  justify-content: center;
+}
+
+.taskon-quest-footer-connect-btn {
+  width: 100%;
+  padding: 12px 24px;
+  font-size: 16px;
+  font-weight: 600;
+  color: #000;
+  background-color: #cbff01;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.taskon-quest-footer-connect-btn:hover {
+  background-color: #b8e600;
+}
+
+/* ============================================================================
+   Complete Button
+   ============================================================================ */
+
+.taskon-quest-footer-complete-btn {
+  width: 100%;
+  padding: 12px 24px;
+  font-size: 16px;
+  font-weight: 600;
+  color: #000;
+  background-color: #cbff01;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background-color 0.2s ease, opacity 0.2s ease;
+}
+
+.taskon-quest-footer-complete-btn:hover:not(:disabled) {
+  background-color: #b8e600;
+}
+
+.taskon-quest-footer-complete-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+@media (max-width: 750px) {
+  .taskon-quest-footer-complete-btn {
+    height: 13.33vw;
+    font-weight: bold;
+  }
+}
+
+/* Complete Button Loading State */
+.taskon-quest-footer-complete-btn--loading {
+  pointer-events: none;
+}
+
+.taskon-quest-footer-complete-btn-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.taskon-quest-footer-complete-btn-spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgba(0, 0, 0, 0.2);
+  border-top-color: #000;
+  border-radius: 50%;
+  animation: taskon-spin 0.8s linear infinite;
+}
+
+@keyframes taskon-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ============================================================================
+   Earned Rewards Placeholder (will be replaced in phase 4)
+   ============================================================================ */
+
+.taskon-quest-footer-earned-placeholder {
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  overflow: auto;
+}
+
+.taskon-quest-footer-earned-hint {
+  font-size: 14px;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+}
+
+@media (max-width: 750px) {
+  .taskon-quest-footer-earned-placeholder {
+    margin-top: 2vw;
+    gap: 2.267vw;
+  }
+}
+
+/* ============================================================================
+   Earned Rewards - New Design (v2)
+   ============================================================================ */
+
+.taskon-quest-footer-earned {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  overflow: visible;
+  margin-top: 0;
+}
+
+@media (max-width: 750px) {
+  .taskon-quest-footer-earned {
+    gap: 0;
+  }
+}
+
+.taskon-quest-footer-earned-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+/* Single reward inner card */
+.taskon-quest-footer-earned-single {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  padding: 8px;
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.04);
+  background: linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0.04) 0%,
+      rgba(255, 255, 255, 0.04) 100%
+    ),
+    linear-gradient(90deg, #0d0d0d 0%, #0d0d0d 100%);
+}
+
+.taskon-quest-footer-earned-single-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.taskon-quest-footer-earned-single-info {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.taskon-quest-footer-earned-single-icon {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.taskon-quest-footer-earned-single-type {
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 24px;
+  color: #fff;
+}
+
+.taskon-quest-footer-earned-single-name {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: normal;
+  color: rgba(255, 255, 255, 0.4);
+  text-transform: capitalize;
+}
+
+/* Multi reward row */
+.taskon-quest-footer-earned-multi {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.taskon-quest-footer-earned-multi-text {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  color: #fff;
+}
+
+/* Redirect mode row (same layout as multi) */
+.taskon-quest-footer-earned-redirect {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.taskon-quest-footer-earned-redirect-text {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  color: #fff;
+  flex: 1;
+}
+
+/* Hide first reward on mobile when has multiple rewards */
+@media (max-width: 750px) {
+  .taskon-quest-footer-earned-first--hide-mobile {
+    display: none;
+  }
+}
+
+.taskon-quest-footer-earned-more {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  flex: 1;
+  gap: 4px;
+  overflow: hidden;
+  border-radius: 4px;
+  background-color: #000;
+  padding: 4px 8px;
+}
+
+@media (max-width: 750px) {
+  .taskon-quest-footer-earned-more {
+    flex-direction: row;
+    align-items: center;
+    gap: 3vw;
+    padding: 2vw;
+  }
+}
+
+/* ============================================================================
+   Reward Card (for future implementation)
+   ============================================================================ */
+
+.taskon-quest-footer-reward {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex: 1;
+  border-radius: 4px;
+  background-color: #000;
+  padding: 4px 8px;
+}
+
+@media (max-width: 750px) {
+  .taskon-quest-footer-reward {
+    padding: 2vw;
+  }
+}
+
+/* ============================================================================
+   Base Info (for future implementation)
+   ============================================================================ */
+
+.taskon-quest-footer-reward-info {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 18px;
+}
+
+@media (max-width: 750px) {
+  .taskon-quest-footer-reward-info {
+    gap: 2vw;
+  }
+}
+
+.taskon-quest-footer-reward-info img {
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+@media (max-width: 750px) {
+  .taskon-quest-footer-reward-info img {
+    height: 8vw;
+    width: 8vw;
+  }
+}
+
+.taskon-quest-footer-reward-amount {
+  color: #cbff01;
+}
+
+.taskon-quest-footer-reward-type {
+  color: #fff;
+}
+
+.taskon-quest-footer-reward-name {
+  color: #cbff01;
+}
+
+/* ============================================================================
+   Action Button (for future implementation)
+   ============================================================================ */
+
+.taskon-quest-footer-action-btn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.6);
+  cursor: pointer;
+  transition: color 0.2s ease;
+}
+
+.taskon-quest-footer-action-btn:not(.taskon-quest-footer-action-btn--disabled):hover {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.taskon-quest-footer-action-btn--disabled {
+  cursor: not-allowed;
+}
+
+/* ============================================================================
+   Claim Button (for future implementation)
+   ============================================================================ */
+
+.taskon-quest-footer-claim-btn {
+  padding: 4px 12px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #000;
+  background-color: #cbff01;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.2s ease, opacity 0.2s ease;
+}
+
+.taskon-quest-footer-claim-btn:hover:not(:disabled) {
+  background-color: #b8e600;
+}
+
+.taskon-quest-footer-claim-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.taskon-quest-footer-claim-btn--loading {
+  pointer-events: none;
+}
+
+.taskon-quest-footer-claim-btn-spinner {
+  width: 14px;
+  height: 14px;
+  border: 2px solid rgba(0, 0, 0, 0.2);
+  border-top-color: #000;
+  border-radius: 50%;
+  animation: taskon-spin 0.8s linear infinite;
+}
+
+/* ============================================================================
+   Earned Rewards - More section
+   ============================================================================ */
+
+.taskon-quest-footer-earned-more-text {
+  font-size: 14px;
+  font-weight: 600;
+  color: #fff;
+}
+
+/* ============================================================================
+   Reward Card - Row layout
+   ============================================================================ */
+
+.taskon-quest-footer-reward-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+/* ============================================================================
+   Reward Badges
+   ============================================================================ */
+
+.taskon-quest-footer-reward-badges {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.taskon-quest-footer-reward-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 6px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #000;
+  background-color: rgba(203, 255, 1, 0.8);
+  border-radius: 2px;
+}
+
+.taskon-quest-footer-reward-badge-icon {
+  margin-left: 4px;
+  width: 18px;
+  height: 18px;
+  object-fit: cover;
+}
+
+@media (max-width: 750px) {
+  .taskon-quest-footer-reward-badge-icon {
+    margin-left: 1.067vw;
+    width: 3.2vw;
+    height: 3.2vw;
+  }
+}
+
+.taskon-quest-footer-reward-badge-line {
+  margin-left: 4px;
+  width: 1px;
+  height: 10px;
+  opacity: 0.1;
+  background: #d9d9d9;
+}
+
+@media (max-width: 750px) {
+  .taskon-quest-footer-reward-badge-line {
+    margin-left: 0.8vw;
+    height: 2.267vw;
+  }
+}
+
+/* ============================================================================
+   Reward - Tx Hash
+   ============================================================================ */
+
+.taskon-quest-footer-reward-tx {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 14px;
+}
+
+.taskon-quest-footer-reward-tx-label {
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.taskon-quest-footer-reward-tx-link {
+  color: #fff;
+  text-decoration: none;
+}
+
+.taskon-quest-footer-reward-tx-link:hover {
+  text-decoration: underline;
+}
+
+/* ============================================================================
+   Reward - Dropping status
+   ============================================================================ */
+
+.taskon-quest-footer-reward-dropping {
+  margin-top: 4px;
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+/* ============================================================================
+   Reward Chain Icon
+   ============================================================================ */
+
+.taskon-quest-footer-reward-chain-icon {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+@media (max-width: 750px) {
+  .taskon-quest-footer-reward-chain-icon {
+    width: 8vw;
+    height: 8vw;
+  }
+}
+
+/* ============================================================================
+   Detail Panel Dialog
+   ============================================================================ */
+
+.taskon-quest-footer-detail-dialog {
+  background-color: #1a1a1a;
+}
+
+.taskon-quest-footer-detail-panel {
+  padding: 0;
+}
+
+.taskon-quest-footer-detail-title {
+  font-size: 22px;
+  font-weight: 600;
+  color: #fff;
+  margin: 0 0 20px 0;
+}
+
+@media (max-width: 750px) {
+  .taskon-quest-footer-detail-title {
+    font-size: 4.8vw;
+    margin-bottom: 4vw;
+  }
+}
+
+.taskon-quest-footer-detail-content {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+@media (max-width: 750px) {
+  .taskon-quest-footer-detail-content {
+    gap: 5vw;
+  }
+}
+
+/* ============================================================================
+   Selection Item
+   ============================================================================ */
+
+.taskon-quest-footer-selection-item {
+  /* spacing handled by parent gap */
+}
+
+.taskon-quest-footer-selection-item + .taskon-quest-footer-selection-item {
+  margin-top: 24px;
+}
+
+@media (max-width: 750px) {
+  .taskon-quest-footer-selection-item + .taskon-quest-footer-selection-item {
+    margin-top: 5vw;
+  }
+}
+
+.taskon-quest-footer-selection-label {
+  font-size: 16px;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.taskon-quest-footer-selection-rewards {
+  margin-top: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+@media (max-width: 750px) {
+  .taskon-quest-footer-selection-rewards {
+    margin-top: 2vw;
+    gap: 5vw;
+  }
+}
+
+/* Selection Item - Transparent reward card background */
+.taskon-quest-footer-selection-rewards .taskon-quest-footer-reward {
+  background: transparent;
+}
+
+/* Selection Failed */
+.taskon-quest-footer-selection-failed {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 14px;
+  line-height: 18px;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.taskon-quest-footer-selection-failed-icon {
+  width: 16px;
+  height: 16px;
+}
+
+/* Selection Wait */
+.taskon-quest-footer-selection-wait {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 16px;
+  color: #fff;
+}
+
+.taskon-quest-footer-selection-wait-icon {
+  width: 34px;
+  height: 34px;
+}
+
+/* ============================================================================
+   Detail Panel - Bonus Section
+   ============================================================================ */
+
+.taskon-quest-footer-detail-bonus {
+  margin-top: 24px;
+  padding-top: 24px;
+  display: flex;
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+@media (max-width: 750px) {
+  .taskon-quest-footer-detail-bonus {
+    margin-top: 5vw;
+    padding-top: 0;
+    border-top: none;
+  }
+}
+
+.taskon-quest-footer-detail-bonus-label {
+  font-size: 16px;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.taskon-quest-footer-detail-bonus-right {
+  flex: 1;
+  text-align: right;
+}
+
+.taskon-quest-footer-detail-bonus-item {
+  font-size: 14px;
+  font-weight: 600;
+  text-align: right;
+  color: #fff;
+}
+
+.taskon-quest-footer-detail-bonus-item + .taskon-quest-footer-detail-bonus-item {
+  margin-top: 8px;
+}
+
+@media (max-width: 750px) {
+  .taskon-quest-footer-detail-bonus-item + .taskon-quest-footer-detail-bonus-item {
+    margin-top: 2vw;
+  }
+}
+
+/* ============================================================================
+   Action Button - Arrow icon
+   ============================================================================ */
+
+.taskon-quest-footer-action-arrow {
+  width: 6px;
+  height: 10px;
+}
+
+/* Link style for ActionButton */
+a.taskon-quest-footer-action-btn {
+  text-decoration: none;
+}
+/**
+ * TaskValidationDialog Styles
+ * @module widgets/Quest/components/OperateFooter/styles/task-validation-dialog
+ */
+
+.taskon-task-validation-dialog {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 24px;
+  text-align: center;
+}
+
+.taskon-task-validation-dialog-icon-wrap {
+  margin-bottom: 16px;
+}
+
+.taskon-task-validation-dialog-icon {
+  width: 48px;
+  height: 48px;
+}
+
+.taskon-task-validation-dialog-message {
+  margin: 0;
+  margin-bottom: 16px;
+  font-size: 16px;
+  line-height: 1.5;
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.taskon-task-validation-dialog-progress {
+  margin: 0;
+  margin-bottom: 16px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.taskon-task-validation-dialog-btn {
+  width: 100%;
+  max-width: 200px;
+  padding: 12px 24px;
+  border: none;
+  border-radius: 8px;
+  background: #cbff01;
+  color: #000;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+}
+
+.taskon-task-validation-dialog-btn:hover {
+  opacity: 0.9;
+}
+
+.taskon-task-validation-dialog-btn:active {
+  opacity: 0.8;
+}
+/**
+ * RewardBindDialog Styles
+ * @module widgets/Quest/components/OperateFooter/styles/reward-bind-dialog
+ */
+
+.taskon-reward-bind-dialog {
+  padding: 16px 24px 24px;
+}
+
+.taskon-reward-bind-tip {
+  margin: 0;
+  margin-bottom: 20px;
+  font-size: 14px;
+  line-height: 1.6;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.taskon-reward-bind-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.taskon-reward-bind-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.taskon-reward-bind-item--bound {
+  border-color: rgba(26, 255, 171, 0.3);
+  background: rgba(26, 255, 171, 0.05);
+}
+
+.taskon-reward-bind-item-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.taskon-reward-bind-item-status {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: #1affab;
+}
+
+.taskon-reward-bind-item-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  border: none;
+  border-radius: 6px;
+  background: #cbff01;
+  color: #000;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+}
+
+.taskon-reward-bind-item-btn:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
+.taskon-reward-bind-item-btn:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+.taskon-reward-bind-item-spinner {
+  width: 14px;
+  height: 14px;
+  animation: taskon-reward-bind-spin 1s linear infinite;
+}
+
+@keyframes taskon-reward-bind-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.taskon-reward-bind-skip-btn {
+  width: 100%;
+  margin-top: 20px;
+  padding: 14px 24px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 8px;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.taskon-reward-bind-skip-btn:hover {
+  background: rgba(255, 255, 255, 0.05);
+  border-color: rgba(255, 255, 255, 0.3);
+}
+/**
+ * DiscordBindDialog Styles
+ * @module widgets/Quest/components/OperateFooter/styles/discord-bind-dialog
+ */
+
+.taskon-discord-bind-dialog {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 24px;
+  text-align: center;
+}
+
+.taskon-discord-bind-dialog-icon-wrap {
+  margin-bottom: 20px;
+}
+
+.taskon-discord-bind-dialog-icon {
+  width: 48px;
+  height: 48px;
+}
+
+.taskon-discord-bind-dialog-desc {
+  margin: 0;
+  margin-bottom: 24px;
+  font-size: 14px;
+  line-height: 1.6;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.taskon-discord-bind-dialog-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+}
+
+.taskon-discord-bind-dialog-btn {
+  width: 100%;
+  padding: 14px 24px;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.taskon-discord-bind-dialog-btn--primary {
+  border: none;
+  background: #cbff01;
+  color: #000;
+}
+
+.taskon-discord-bind-dialog-btn--primary:hover {
+  opacity: 0.9;
+}
+
+.taskon-discord-bind-dialog-btn--secondary {
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  background: transparent;
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.taskon-discord-bind-dialog-btn--secondary:hover {
+  background: rgba(255, 255, 255, 0.05);
+  border-color: rgba(255, 255, 255, 0.3);
+}
+/**
+ * WinnersRow 组件样式
+ * 与 QuestRewards 卡片样式保持一致
+ */
+
+/* WinnersRow 容器 - 纯色背景，与 reward 卡片一致 */
+.taskon-quest-winners-row {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 16px;
+  border-radius: 10px;
+  border: none;
+  cursor: pointer;
+  background: rgba(255, 255, 255, 0.04);
+  transition: background-color 0.2s ease;
+}
+
+.taskon-quest-winners-row:hover {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+/* Winners 标签 */
+.taskon-quest-winners-row-label {
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 23px;
+  color: #ffffff;
+}
+
+/* 数量 */
+.taskon-quest-winners-row-count {
+  flex: 1;
+  margin-left: 8px;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 23px;
+  text-align: left;
+  color: #00ffa3;
+}
+
+/* 右箭头图标 */
+.taskon-quest-winners-row-arrow {
+  width: 16px;
+  height: 16px;
+  color: rgba(255, 255, 255, 0.6);
+  flex-shrink: 0;
+}
+/**
+ * WinnersStatus Component Styles
+ * @description Styles for winners status display including:
+ * - POW review alert
+ * - Drawing winners alert
+ * - Winners row
+ *
+ * Reference: taskon-website/apps/website/src/common/CampaignStatus/
+ */
+
+/* ==========================================================================
+   Container - Match reward module style
+   ========================================================================== */
+.taskon-winners {
+  border-radius: 10px;
+  background: var(--taskon-bg-card, rgba(255, 255, 255, 0.04));
+  overflow: hidden;
+}
+
+/* ==========================================================================
+   Status Alert (POW Reviewing / Drawing Winners)
+   ========================================================================== */
+.taskon-winners-alert {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 16px;
+  background: rgba(255, 255, 255, 0.05);
+  font-size: 16px;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.7);
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+.taskon-winners-alert:hover {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.taskon-winners-alert-icon {
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+}
+
+.taskon-winners-alert-text {
+  flex: 1;
+}
+
+.taskon-winners-alert-community {
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.taskon-winners-alert-link-icon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+/* ==========================================================================
+   POW Review Info Card
+   ========================================================================== */
+.taskon-winners-content {
+  padding: 16px;
+}
+
+.taskon-winners-pow-info {
+  font-size: 12px;
+  line-height: 1.5;
+  color: rgba(255, 212, 101, 0.6);
+  margin-bottom: 16px;
+}
+
+.taskon-winners-pow-info-community {
+  font-weight: 500;
+  color: #ffd465;
+}
+
+.taskon-winners-pow-info-only {
+  font-weight: 500;
+  color: #ffd465;
+}
+
+/* ==========================================================================
+   Status Info Card - Match reward module card style
+   ========================================================================== */
+.taskon-winners-card {
+  padding: 16px;
+  border-radius: 8px;
+  background: var(--taskon-bg-card, rgba(255, 255, 255, 0.04));
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.taskon-winners-card-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 16px;
+}
+
+.taskon-winners-card-label {
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.taskon-winners-card-value {
+  font-weight: 500;
+  color: #9aff73;
+}
+
+.taskon-winners-card-value--primary {
+  font-weight: 600;
+  color: var(--taskon-primary, #cbff01);
+}
+
+/* ==========================================================================
+   Winners Row (already has separate styles in winners-row.css)
+   ========================================================================== */
+
+/* Ensure winners row integrates well with status card */
+.taskon-winners-card .taskon-quest-winners-row {
+  padding: 0;
+  background: transparent;
+}
+/**
+ * Quest Widget 基础样式
+ * @description 采用 .taskon-quest-* 命名空间，避免样式冲突
+ * @design 参考 Figma 设计稿
+ */
+
+/* ============================================================================
+   CSS 变量定义
+   ============================================================================ */
+
+.taskon-quest {
+  /* 颜色系统 */
+  --taskon-quest-bg-body: #111111;
+  --taskon-quest-text-lightest: #ffffff;
+  --taskon-quest-text-lighter: rgba(255, 255, 255, 0.8);
+  --taskon-quest-text-light: rgba(255, 255, 255, 0.6);
+  --taskon-quest-text-dark: rgba(255, 255, 255, 0.4);
+  --taskon-quest-text-darkest: rgba(255, 255, 255, 0.1);
+  --taskon-quest-text-invisible: rgba(255, 255, 255, 0.04);
+  --taskon-quest-primary: #cbff01;
+  --taskon-quest-secondary: #1affab;
+  --taskon-quest-link: #58afff;
+  --taskon-quest-button-primary-color: #000000;
+
+  /* 间距系统 */
+  --taskon-quest-spacing-xxs: 4px;
+  --taskon-quest-spacing-xs: 8px;
+  --taskon-quest-spacing-s: 12px;
+  --taskon-quest-spacing-m: 16px;
+  --taskon-quest-spacing-l: 20px;
+  --taskon-quest-spacing-xl: 24px;
+  --taskon-quest-spacing-xxl: 32px;
+  --taskon-quest-spacing-3xl: 40px;
+
+  /* 圆角系统 */
+  --taskon-quest-radius-s: 4px;
+  --taskon-quest-radius-m: 6px;
+  --taskon-quest-radius-l: 8px;
+  --taskon-quest-radius-xl: 12px;
+}
+
+/* ============================================================================
+   Quest Widget 根容器
+   ============================================================================ */
+
+.taskon-quest {
+  font-size: 16px;
+  line-height: 1.5;
+  color: var(--taskon-quest-text-lightest);
+  background-color: var(--taskon-quest-bg-body);
+}
+
+/* ============================================================================
+   Loading 状态
+   ============================================================================ */
+
+.taskon-quest-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 24px;
+  gap: 12px;
+  color: var(--taskon-quest-text-light);
+}
+
+.taskon-quest-loading-spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid var(--taskon-quest-text-darkest);
+  border-top-color: var(--taskon-quest-primary);
+  border-radius: 50%;
+  animation: taskon-quest-spin 1s linear infinite;
+}
+
+@keyframes taskon-quest-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ============================================================================
+   Error 状态
+   ============================================================================ */
+
+.taskon-quest-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 24px;
+  gap: 12px;
+  text-align: center;
+}
+
+.taskon-quest-error-icon {
+  font-size: 32px;
+}
+
+.taskon-quest-error-message {
+  color: #ef4444;
+  font-size: 14px;
+}
+
+.taskon-quest-error-retry {
+  margin-top: 8px;
+  padding: 8px 16px;
+  font-size: 14px;
+  color: var(--taskon-quest-text-lightest);
+  background-color: var(--taskon-quest-primary);
+  border: none;
+  border-radius: var(--taskon-quest-radius-m);
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.taskon-quest-error-retry:hover {
+  opacity: 0.9;
+}
+
+/* ============================================================================
+   Empty 状态
+   ============================================================================ */
+
+.taskon-quest-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 24px;
+  color: var(--taskon-quest-text-light);
+  font-size: 14px;
+}
+
+/* ============================================================================
+   左中右三栏布局
+   ============================================================================ */
+
+.taskon-quest-layout {
+  display: flex;
+  gap: var(--taskon-quest-spacing-3xl);
+  align-items: flex-start;
+}
+
+/* 左侧主内容区（固定比例 2:1） */
+.taskon-quest-content {
+  flex: 2;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--taskon-quest-spacing-xl);
+}
+
+/* 中间分割线 */
+.taskon-quest-divider {
+  width: 1px;
+  align-self: stretch;
+  background: linear-gradient(
+    to bottom,
+    var(--taskon-quest-text-invisible),
+    var(--taskon-quest-text-darkest),
+    var(--taskon-quest-text-invisible)
+  );
+  flex-shrink: 0;
+}
+
+/* 右侧边栏（固定比例 2:1） */
+.taskon-quest-sidebar {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--taskon-quest-spacing-xxl);
+}
+
+/* ============================================================================
+   Quest Header 区域
+   ============================================================================ */
+
+.taskon-quest-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--taskon-quest-spacing-l);
+}
+
+/* 标题 + 倒计时区域 */
+.taskon-quest-header-title-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--taskon-quest-spacing-xs);
+}
+
+.taskon-quest-title {
+  margin: 0;
+  font-size: 28px;
+  font-weight: 600;
+  line-height: 38px;
+  color: var(--taskon-quest-text-lightest);
+}
+
+/* 倒计时 + 时间范围 */
+.taskon-quest-header-meta {
+  display: flex;
+  align-items: center;
+  gap: var(--taskon-quest-spacing-s);
+  padding: var(--taskon-quest-spacing-xxs) 0;
+  border-radius: var(--taskon-quest-radius-s);
+}
+
+.taskon-quest-countdown {
+  display: flex;
+  gap: var(--taskon-quest-spacing-xs);
+  align-items: center;
+}
+
+.taskon-quest-countdown-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--taskon-quest-text-lightest);
+}
+
+.taskon-quest-countdown-label {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  color: var(--taskon-quest-text-lighter);
+}
+
+/* 已结束状态的标签样式 */
+.taskon-quest-countdown-label--ended {
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.taskon-quest-countdown-value {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  color: var(--taskon-quest-primary);
+}
+
+.taskon-quest-countdown-divider {
+  width: 1px;
+  height: 20px;
+  background-color: var(--taskon-quest-text-darkest);
+}
+
+.taskon-quest-time-range {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  color: var(--taskon-quest-text-lighter);
+}
+
+/* Banner 图片 */
+.taskon-quest-banner {
+  display: block;
+  margin: 0 auto;
+  width: 100%;
+  border-radius: 10px;
+}
+
+.taskon-quest-banner-img {
+  display: block;
+  width: 100%;
+  border-radius: 10px;
+}
+
+/* 方形图片在 PC 端限制宽度 */
+@media (min-width: 751px) {
+  .taskon-quest-banner--square .taskon-quest-banner-img {
+    width: 340px;
+    max-width: 100%;
+    margin: 0 auto;
+  }
+}
+
+/* 描述 + View More */
+.taskon-quest-desc {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--taskon-quest-spacing-m);
+}
+
+.taskon-quest-desc-text {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  color: var(--taskon-quest-text-lighter);
+  max-height: 120px;
+  overflow: hidden;
+  position: relative;
+}
+
+/* 展开后移除高度限制和渐变 */
+.taskon-quest-desc-text--expanded {
+  max-height: none;
+}
+
+/* 描述渐变遮罩 - 仅在未展开时显示 */
+.taskon-quest-desc-text:not(.taskon-quest-desc-text--expanded)::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 49px;
+  background: linear-gradient(
+    0.83deg,
+    var(--taskon-quest-bg-body) 10.557%,
+    rgba(17, 17, 17, 0) 93.799%
+  );
+  pointer-events: none;
+}
+
+/* 富文本样式重置 */
+.taskon-quest-desc-text p {
+  margin: 0 0 var(--taskon-quest-spacing-xs) 0;
+}
+
+.taskon-quest-desc-text p:last-child {
+  margin-bottom: 0;
+}
+
+.taskon-quest-desc-text a {
+  color: var(--taskon-quest-link);
+  text-decoration: underline;
+}
+
+.taskon-quest-desc-text ul,
+.taskon-quest-desc-text ol {
+  margin: var(--taskon-quest-spacing-xs) 0;
+  padding-left: var(--taskon-quest-spacing-xl);
+}
+
+.taskon-quest-desc-text li {
+  margin: var(--taskon-quest-spacing-xxs) 0;
+}
+
+/* 图片样式：限制最大宽度，防止溢出 */
+.taskon-quest-desc-text img {
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--taskon-quest-radius-m);
+}
+
+/* iframe 样式：限制最大宽度 */
+.taskon-quest-desc-text iframe {
+  max-width: 100%;
+  border-radius: var(--taskon-quest-radius-m);
+}
+
+.taskon-quest-desc-more {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  color: var(--taskon-quest-text-lightest);
+  text-decoration: underline;
+  text-decoration-skip-ink: none;
+  text-underline-position: from-font;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  align-self: flex-start;
+}
+
+.taskon-quest-desc-more:hover {
+  opacity: 0.8;
+}
+
+/* 分割线 */
+.taskon-quest-content-divider {
+  height: 1px;
+  background: linear-gradient(
+    to right,
+    var(--taskon-quest-text-invisible),
+    var(--taskon-quest-text-darkest),
+    var(--taskon-quest-text-invisible)
+  );
+}
+
+/* ============================================================================
+   Quest 任务列表区域
+   ============================================================================ */
+
+.taskon-quest-tasks {
+  display: flex;
+  flex-direction: column;
+  gap: var(--taskon-quest-spacing-m);
+}
+
+/* Quest 标题 */
+.taskon-quest-tasks-header {
+  display: flex;
+  gap: var(--taskon-quest-spacing-m);
+  align-items: center;
+}
+
+.taskon-quest-tasks-title {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 32px;
+  color: var(--taskon-quest-text-lightest);
+}
+
+/* 任务列表 */
+.taskon-quest-tasks-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--taskon-quest-spacing-m);
+}
+
+.taskon-quest-task-placeholder {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--taskon-quest-spacing-m);
+  height: 66px;
+  background: linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0.1) 0%,
+      rgba(255, 255, 255, 0.1) 100%
+    ),
+    linear-gradient(90deg, #0d0d0d 0%, #0d0d0d 100%);
+  border: 1px solid var(--taskon-quest-text-invisible);
+  border-radius: var(--taskon-quest-radius-l);
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--taskon-quest-text-lightest);
+}
+
+.taskon-quest-task-template {
+  color: var(--taskon-quest-text-dark);
+  font-size: 14px;
+  font-weight: 500;
+}
+
+/* Complete 按钮 */
+.taskon-quest-complete-btn {
+  width: 100%;
+  margin-top: var(--taskon-quest-spacing-xl);
+  padding: var(--taskon-quest-spacing-m) var(--taskon-quest-spacing-3xl);
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 24px;
+  color: var(--taskon-quest-button-primary-color);
+  background-color: var(--taskon-quest-primary);
+  border: none;
+  border-radius: var(--taskon-quest-radius-l);
+  cursor: pointer;
+  transition: opacity 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--taskon-quest-spacing-xs);
+}
+
+.taskon-quest-complete-btn:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
+.taskon-quest-complete-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ============================================================================
+   右侧边栏 - Winners Section (入口区域)
+   ============================================================================ */
+
+.taskon-quest-winners-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--taskon-quest-spacing-m);
+  margin-bottom: var(--taskon-quest-spacing-xl);
+}
+
+.taskon-quest-winners-section-title {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 32px;
+  color: var(--taskon-quest-text-lightest);
+}
+
+/* ============================================================================
+   右侧边栏 - Quest Rewards Section
+   ============================================================================ */
+
+.taskon-quest-rewards-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--taskon-quest-spacing-l);
+}
+
+.taskon-quest-rewards-section-title {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 32px;
+  color: var(--taskon-quest-text-lightest);
+}
+
+/* QuestRewards 组件 CSS 变量映射 */
+.taskon-quest-rewards-section {
+  --taskon-text-primary: var(--taskon-quest-text-lightest);
+  --taskon-text-secondary: var(--taskon-quest-text-lighter);
+  --taskon-text-tertiary: var(--taskon-quest-text-light);
+  --taskon-bg-card: var(--taskon-quest-text-invisible);
+  --taskon-bg-secondary: rgba(255, 255, 255, 0.03);
+  --taskon-bg-tertiary: var(--taskon-quest-text-darkest);
+  --taskon-border-color: var(--taskon-quest-text-darkest);
+  --taskon-primary: var(--taskon-quest-primary);
+  --taskon-success: var(--taskon-quest-secondary);
+  --taskon-link: var(--taskon-quest-link);
+  --taskon-warning: #ffc107;
+}
+
+/* ============================================================================
+   右侧边栏 - Quest Rewards (旧版，保留兼容)
+   ============================================================================ */
+
+.taskon-quest-rewards {
+  display: flex;
+  flex-direction: column;
+  gap: var(--taskon-quest-spacing-l);
+}
+
+.taskon-quest-rewards-title {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 32px;
+  color: var(--taskon-quest-text-lightest);
+}
+
+.taskon-quest-rewards-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--taskon-quest-spacing-m);
+}
+
+.taskon-quest-reward-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--taskon-quest-spacing-m);
+  background-color: var(--taskon-quest-text-invisible);
+  border-radius: var(--taskon-quest-radius-xl);
+  font-size: 16px;
+  color: var(--taskon-quest-text-lightest);
+}
+
+/* ============================================================================
+   右侧边栏 - Eligibility Section
+   ============================================================================ */
+
+.taskon-quest-eligs-section {
+  margin-top: var(--taskon-quest-spacing-xl);
+}
+
+.taskon-quest-eligs-section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--taskon-quest-spacing-m);
+}
+
+.taskon-quest-eligs-section-title {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 28px;
+  color: var(--taskon-quest-text-lightest);
+}
+
+/* ============================================================================
+   右侧边栏 - Participants Info
+   ============================================================================ */
+
+.taskon-quest-participants {
+  display: flex;
+  flex-direction: column;
+  gap: var(--taskon-quest-spacing-l);
+}
+
+.taskon-quest-participants-title {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 32px;
+  color: var(--taskon-quest-text-lightest);
+}
+
+.taskon-quest-participants-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 24px;
+}
+
+.taskon-quest-participants-label {
+  color: var(--taskon-quest-text-lighter);
+}
+
+.taskon-quest-participants-value {
+  color: var(--taskon-quest-text-lightest);
+}
+
+/* ============================================================================
+   响应式布局（TODO: Phase 13 完善）
+   ============================================================================ */
+
+@media (max-width: 1200px) {
+  .taskon-quest-layout {
+    flex-direction: column;
+  }
+
+  .taskon-quest-divider {
+    width: 100%;
+    height: 1px;
+    background: linear-gradient(
+      to right,
+      var(--taskon-quest-text-invisible),
+      var(--taskon-quest-text-darkest),
+      var(--taskon-quest-text-invisible)
+    );
+  }
+
+  .taskon-quest-sidebar {
+    width: 100%;
+  }
+}
+
+/* Eligibility 组件样式已抽取到独立文件: Quest/components/Eligibility/eligibility.css */
+
+/* ============================================================================
+   BlindBox Dialog Wrapper
+   ============================================================================ */
+
+.taskon-quest-blindbox-dialog-wrapper {
+  background: #0d0d0d;
+  padding: 0;
+  width: auto;
+  max-width: 560px;
+}
+
+.taskon-quest-blindbox-dialog-wrapper .taskon-dialog-body {
+  padding: 0;
+}
+
+.taskon-quest-blindbox-reward-wrapper {
+  background: #0d0d0d;
+  padding: 0;
+  width: auto;
+  max-width: 560px;
+}
+
+.taskon-quest-blindbox-reward-wrapper .taskon-dialog-body {
+  padding: 0;
+}
+