@taskon/widget-react 0.0.1

package/dist/EligibilityInfo.css

@@ -0,0 +1,1966 @@
+/**
+ * Textarea 通用组件样式
+ * @description 复刻 Vue 版本 BaseTextareaPro.vue 样式
+ * 使用 taskon-textarea 命名空间
+ */
+
+/* ==================== 容器 ==================== */
+.taskon-textarea-wrap {
+  position: relative;
+  font-size: 0;
+}
+
+/* ==================== 文本域 ==================== */
+.taskon-textarea {
+  width: 100%;
+  min-height: 100px;
+  padding: 12px;
+  padding-bottom: 36px; /* 给计数器留空间 */
+  border-radius: 6px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--taskon-color-text, #fff);
+  font-size: 14px;
+  line-height: 1.5;
+  resize: none;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.taskon-textarea:focus {
+  border-color: var(--taskon-color-primary, #cbff01);
+}
+
+.taskon-textarea:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.taskon-textarea--error {
+  border-color: #eb5757;
+}
+
+.taskon-textarea::placeholder {
+  color: var(--taskon-color-text-tertiary, #666);
+}
+
+/* ==================== 字数统计 ==================== */
+.taskon-textarea-count {
+  position: absolute;
+  right: 20px;
+  bottom: 12px;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.taskon-textarea-count-current {
+  color: #fff;
+}
+
+/* ==================== 响应式 ==================== */
+@media (max-width: 750px) {
+  .taskon-textarea {
+    min-height: 26.667vw;
+    padding: 3.2vw;
+    padding-bottom: 8vw; /* 给计数器留空间 */
+    font-size: 3.733vw;
+  }
+
+  .taskon-textarea-count {
+    right: 2.933vw;
+    bottom: 2.667vw;
+    font-size: 2.933vw;
+    line-height: 2.667vw;
+  }
+}
+/**
+ * TitleExpress 组件样式
+ * @module components/TitleExpress
+ */
+
+/* 可点击链接 - 统一蓝色加下划线样式 */
+.taskon-title-express-link {
+  display: inline;
+  color: #54aeff;
+  cursor: pointer;
+  text-decoration: underline;
+  transition: opacity 0.2s ease;
+}
+
+.taskon-title-express-link:hover {
+  opacity: 0.8;
+}
+
+/* 可复制文本 */
+.taskon-title-express-copy {
+  display: inline;
+  color: var(--taskon-color-secondary, #cbff01);
+  cursor: pointer;
+}
+
+/* Radix Popover 内容 */
+.taskon-title-express-popover-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 8px 12px;
+  background: var(--taskon-color-bg-popover, #2a2a2a);
+  border-radius: 8px;
+  border: none;
+  outline: none;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 18px;
+  color: var(--taskon-color-text, #fff);
+  z-index: 9999;
+  animation: taskon-popover-fade-in 0.15s ease;
+}
+
+.taskon-title-express-popover-content:focus {
+  outline: none;
+}
+
+.taskon-title-express-popover-content:hover {
+  background: var(--taskon-color-bg-popover-hover, #3a3a3a);
+}
+
+/* 复制图标 */
+.taskon-title-express-copy-icon {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+}
+
+/* Radix Popover 箭头 */
+.taskon-title-express-popover-arrow {
+  fill: var(--taskon-color-bg-popover, #2a2a2a);
+}
+
+/* 动画 */
+@keyframes taskon-popover-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* 响应式样式（移动端） */
+@media (max-width: 750px) {
+  .taskon-title-express-popover-content {
+    padding: 2.13vw 3.2vw;
+    font-size: 3.73vw;
+    line-height: 4.8vw;
+    border-radius: 2.13vw;
+    gap: 1.6vw;
+  }
+
+  .taskon-title-express-copy-icon {
+    width: 3.73vw;
+    height: 3.73vw;
+  }
+}
+/**
+ * TipPopover 组件样式
+ * 设计原则：组件内部不包含 margin，需要间距由外部控制
+ */
+
+.taskon-tip-popover-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--taskon-text-tertiary, rgba(255, 255, 255, 0.4));
+  outline: none;
+}
+
+.taskon-tip-popover-trigger:hover,
+.taskon-tip-popover-trigger:focus {
+  color: var(--taskon-text-tertiary, rgba(255, 255, 255, 0.4));
+  background: transparent;
+  outline: none;
+}
+
+/* Custom children trigger - reset button styles */
+.taskon-tip-popover-trigger--custom {
+  cursor: pointer;
+}
+
+.taskon-tip-popover-content {
+  max-width: 266px;
+  padding: 12px 16px;
+  border-radius: 8px;
+  border: none;
+  outline: none;
+  background: var(--taskon-bg-elevated, #2a2a2a);
+  color: var(--taskon-text-primary, #fff);
+  font-size: 13px;
+  line-height: 1.5;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+  /* z-index 需要大于 Dialog (9999) 才能在弹窗中正常显示 */
+  z-index: 10000;
+  animation: taskon-tip-popover-fade-in 0.15s ease;
+}
+
+.taskon-tip-popover-content:focus {
+  outline: none;
+}
+
+.taskon-tip-popover-arrow {
+  fill: var(--taskon-bg-elevated, #2a2a2a);
+}
+
+@keyframes taskon-tip-popover-fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* Mobile styles */
+@media (max-width: 750px) {
+  .taskon-tip-popover-content {
+    max-width: 60vw;
+    padding: 2.5vw 3.5vw;
+    font-size: 3vw;
+  }
+}
+/**
+ * PowTask Styles
+ * @description POW 任务样式
+ * 遵循 Widget 命名规范：.taskon-{widget-name}-{element}
+ */
+
+/* ============================================
+ * POW Task Container
+ * ============================================ */
+.taskon-pow-task {
+  /* 继承 TaskCardBase 的样式 */
+}
+
+/* ============================================
+ * POW Description
+ * ============================================ */
+.taskon-pow-desc {
+  font-size: 14px;
+  line-height: 21px;
+  color: rgba(255, 255, 255, 0.8);
+  word-break: break-word;
+}
+
+.taskon-pow-desc a {
+  color: var(--taskon-primary-color, #3b82f6);
+  text-decoration: none;
+}
+
+.taskon-pow-desc a:hover {
+  text-decoration: underline;
+}
+
+/* ============================================
+ * POW Input Area
+ * ============================================ */
+.taskon-pow-input-area {
+  margin-top: 15px;
+}
+
+/* ============================================
+ * URL Input Row
+ * ============================================ */
+.taskon-pow-url-row {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.taskon-pow-input {
+  flex: 1;
+  padding: 10px 12px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.05);
+  color: #fff;
+  font-size: 14px;
+  outline: none;
+  transition: border-color 0.2s ease;
+}
+
+.taskon-pow-input:focus {
+  border-color: var(--taskon-primary-color, #3b82f6);
+}
+
+.taskon-pow-input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.taskon-pow-input::placeholder {
+  color: rgba(255, 255, 255, 0.4);
+}
+
+/* ============================================
+ * Text Input Row
+ * ============================================ */
+.taskon-pow-text-row {
+  display: flex;
+  align-items: flex-end;
+  gap: 15px;
+}
+
+.taskon-pow-text-row .taskon-textarea-wrap {
+  flex: 1;
+}
+
+/* ============================================
+ * Image Upload Area - 与 Vue 版本 PowImageUploader 一致
+ * ============================================ */
+.taskon-pow-image-uploader {
+  margin-top: 20px;
+  display: flex;
+  align-items: center;
+}
+
+.taskon-pow-image-upload-area {
+  flex: 1;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 128px;
+  text-align: center;
+  font-size: 0;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.05);
+  cursor: pointer;
+  transition: border-color 0.2s ease;
+}
+
+.taskon-pow-image-upload-area:hover:not(.taskon-pow-image-upload-area--disabled) {
+  border-color: var(--taskon-primary-color, #3b82f6);
+}
+
+.taskon-pow-image-upload-area:focus {
+  outline: none;
+  border-color: var(--taskon-primary-color, #3b82f6);
+}
+
+.taskon-pow-image-upload-area--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.taskon-pow-image-upload-icon {
+  width: 18px;
+  height: 18px;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.taskon-pow-image-upload-tip {
+  margin-top: 13px;
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  white-space: pre-wrap;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.taskon-pow-image-preview {
+  border-radius: 4px;
+  margin: 20px 0;
+  max-width: 100%;
+  max-height: 300px;
+}
+
+/* Hover mask overlay */
+.taskon-pow-image-mask {
+  display: none;
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  background: rgba(0, 0, 0, 0.8);
+}
+
+.taskon-pow-image-upload-area:hover .taskon-pow-image-mask,
+.taskon-pow-image-upload-area:focus .taskon-pow-image-mask {
+  display: flex;
+}
+
+.taskon-pow-image-mask .taskon-pow-image-upload-icon {
+  color: #fff;
+}
+
+.taskon-pow-image-mask .taskon-pow-image-upload-tip {
+  color: #fff;
+  opacity: 1;
+}
+
+/* Progress bar at bottom */
+.taskon-pow-image-progress-bar {
+  z-index: 3;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: rgba(255, 255, 255, 0.1);
+  height: 6px;
+}
+
+.taskon-pow-image-progress-fill {
+  background: var(--taskon-primary-color, #3b82f6);
+  height: 100%;
+  border-radius: 4px;
+  transition: width 0.2s ease;
+}
+
+/* ============================================
+ * Error Message
+ * ============================================ */
+.taskon-pow-error {
+  margin-top: 10px;
+  font-size: 14px;
+  color: #ef4444;
+}
+
+/* ============================================
+ * Average Review Time
+ * ============================================ */
+/* 与 Vue 版本 AverageReview.vue 样式一致 */
+.taskon-pow-review-time {
+  margin-top: 10px;
+  color: rgba(255, 212, 101, 0.6);
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 16px;
+}
+
+/* ============================================
+ * Responsive Styles
+ * ============================================ */
+@media (max-width: 750px) {
+  .taskon-pow-url-row,
+  .taskon-pow-text-row {
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .taskon-pow-input {
+    width: 100%;
+  }
+
+  .taskon-pow-url-row .taskon-verify-btn,
+  .taskon-pow-text-row .taskon-verify-btn {
+    width: 100%;
+  }
+
+  .taskon-pow-image-uploader {
+    margin-top: 2.67vw;
+  }
+
+  .taskon-pow-image-upload-area {
+    min-height: 17.07vw;
+  }
+
+  .taskon-pow-image-upload-icon {
+    width: 2.4vw;
+    height: 2.4vw;
+  }
+
+  .taskon-pow-image-upload-tip {
+    margin-top: 1.33vw;
+    font-size: 1.6vw;
+    line-height: 2.67vw;
+  }
+
+  .taskon-pow-image-preview {
+    max-height: 32vw;
+  }
+}
+/**
+ * ContractInteractiveTask Styles
+ */
+
+.taskon-contract-task {
+  /* 继承 TaskCardBase 样式 */
+}
+
+.taskon-contract-desc {
+  font-size: 14px;
+  line-height: 21px;
+  color: rgba(255, 255, 255, 0.8);
+  word-break: break-word;
+}
+
+.taskon-contract-desc a {
+  color: var(--taskon-primary-color, #3b82f6);
+  text-decoration: none;
+}
+
+.taskon-contract-desc a:hover {
+  text-decoration: underline;
+}
+/* ============================================
+   DynamicPoints Component Styles
+   与 Vue 版本 BaseDynamicPoint.vue 样式一致
+   ============================================ */
+
+.taskon-dynamic-points {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: rgba(255, 255, 255, 0.04);
+  border-radius: 8px;
+}
+
+.taskon-dynamic-points-value-wrap {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.taskon-dynamic-points-value {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--taskon-task-text-primary, #fff);
+}
+
+.taskon-dynamic-points-value--highlight {
+  color: #00ffa3 !important;
+}
+
+.taskon-dynamic-points-max {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--taskon-task-text-secondary, rgba(255, 255, 255, 0.6));
+  text-transform: capitalize;
+}
+
+.taskon-dynamic-points-info {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--taskon-task-text-secondary, rgba(255, 255, 255, 0.6));
+  cursor: pointer;
+}
+
+.taskon-dynamic-points-info:hover {
+  color: var(--taskon-task-text-primary, #fff);
+}
+
+.taskon-dynamic-points-refresh {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  margin-left: 4px;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  color: #54aeff;
+  cursor: pointer;
+  transition: opacity 0.2s, transform 0.2s;
+}
+
+.taskon-dynamic-points-refresh:hover:not(:disabled) {
+  opacity: 0.8;
+}
+
+.taskon-dynamic-points-refresh--disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.taskon-dynamic-points-refresh--animating {
+  filter: drop-shadow(0 0 4px rgba(84, 174, 255, 0.8));
+}
+
+.taskon-dynamic-points-refresh-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.taskon-dynamic-points-refresh-icon--spin {
+  animation: taskon-spin 1s linear infinite;
+}
+
+@keyframes taskon-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.taskon-dynamic-points-cooldown {
+  font-size: 14px;
+  font-weight: 500;
+  color: #54aeff !important;
+  font-family: Menlo, Consolas, "Liberation Mono", "Courier New", Courier, monospace;
+}
+/**
+ * SwapDexTask Styles
+ * 与原版 Vue SwapDexContractInteractive + SwapDexVolumeRules 样式一致
+ */
+
+.taskon-swap-task {
+  /* 继承 TaskCardBase 样式 */
+}
+
+/* Content wrapper */
+.taskon-swap-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+/* Rules section - 动态积分规则区域 */
+.taskon-swap-rules-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.taskon-swap-rules-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.6);
+  margin-bottom: 8px;
+}
+
+.taskon-swap-rules-content {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  padding: 12px;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.05);
+  font-size: 14px;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.taskon-swap-rules-highlight {
+  color: var(--taskon-secondary-color, #00ffa3);
+}
+
+.taskon-swap-rules-point-name {
+  color: rgba(255, 255, 255, 0.4);
+}
+
+/* Instructions section - 任务描述区域 */
+.taskon-swap-instructions-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.taskon-swap-instructions-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.6);
+  margin-bottom: 8px;
+}
+
+.taskon-swap-instructions-content {
+  padding: 12px;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.taskon-swap-desc {
+  font-size: 14px;
+  line-height: 21px;
+  color: rgba(255, 255, 255, 0.8);
+  word-break: break-word;
+}
+
+.taskon-swap-desc a {
+  color: var(--taskon-primary-color, #3b82f6);
+  text-decoration: none;
+}
+
+.taskon-swap-desc a:hover {
+  text-decoration: underline;
+}
+/**
+ * OuterPointAPITask Styles
+ * 与 Vue 版本 OuterPointVerify + CustomizedSubmitDialog 样式一致
+ */
+
+.taskon-outer-point-api-task {
+  /* 继承 TaskCardBase 样式 */
+}
+
+/* ==================== Description Area ==================== */
+.taskon-outer-point-api-desc {
+  font-size: 14px;
+  line-height: 21px;
+  color: rgba(255, 255, 255, 0.8);
+  word-break: break-word;
+}
+
+.taskon-outer-point-api-desc a {
+  color: var(--taskon-primary-color, #3b82f6);
+  text-decoration: none;
+}
+
+.taskon-outer-point-api-desc a:hover {
+  text-decoration: underline;
+}
+
+/* ==================== Customized Param Dialog ==================== */
+.taskon-outer-point-api-dialog {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+/* Dialog title */
+.taskon-outer-point-api-dialog-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #fff;
+  margin: 0;
+}
+
+/* Warning message */
+.taskon-outer-point-api-dialog-warning {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px;
+  border-radius: 8px;
+  background: rgba(255, 171, 0, 0.1);
+  color: #ffab00;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.taskon-outer-point-api-dialog-warning-icon {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+}
+
+/* Description text */
+.taskon-outer-point-api-dialog-desc {
+  font-size: 14px;
+  line-height: 20px;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+/* Input area */
+.taskon-outer-point-api-dialog-input-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.taskon-outer-point-api-dialog-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.taskon-outer-point-api-dialog-input {
+  width: 100%;
+  padding: 10px 12px;
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  background: rgba(255, 255, 255, 0.05);
+  color: #fff;
+  font-size: 14px;
+  line-height: 20px;
+  outline: none;
+  transition: border-color 0.2s ease;
+  box-sizing: border-box;
+}
+
+.taskon-outer-point-api-dialog-input::placeholder {
+  color: rgba(255, 255, 255, 0.3);
+}
+
+.taskon-outer-point-api-dialog-input:focus {
+  border-color: var(--taskon-primary-color, #3b82f6);
+}
+
+.taskon-outer-point-api-dialog-input--error {
+  border-color: #ff4d4f;
+}
+
+.taskon-outer-point-api-dialog-error {
+  font-size: 12px;
+  color: #ff4d4f;
+}
+
+/* Action buttons */
+.taskon-outer-point-api-dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  margin-top: 8px;
+}
+
+.taskon-outer-point-api-dialog-btn {
+  padding: 8px 24px;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: none;
+}
+
+.taskon-outer-point-api-dialog-btn--cancel {
+  background: rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.taskon-outer-point-api-dialog-btn--cancel:hover {
+  background: rgba(255, 255, 255, 0.15);
+}
+
+.taskon-outer-point-api-dialog-btn--confirm {
+  background: var(--taskon-primary-color, #3b82f6);
+  color: #fff;
+}
+
+.taskon-outer-point-api-dialog-btn--confirm:hover {
+  opacity: 0.9;
+}
+
+.taskon-outer-point-api-dialog-btn--confirm:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+/**
+ * TaskWidget Styles
+ * @description 任务列表组件样式（与 taskon-website BaseTask.vue 保持一致）
+ *
+ * 命名规范：.taskon-task-{component}-{element}--{modifier}
+ */
+
+/* ============================================
+   CSS Variables (可被项目方覆盖)
+   ============================================ */
+:root {
+  /* Task card colors (dark theme, same as taskon-website) */
+  --taskon-task-bg: #1d2123;
+  --taskon-task-border: #1d2123;
+  --taskon-task-border-hover: #41494b;
+  --taskon-task-radius: 10px;
+
+  /* Text colors */
+  --taskon-task-text: #ffffff;
+  --taskon-task-text-secondary: #9ca3af;
+  --taskon-task-text-muted: #6b7280;
+
+  /* Status colors */
+  --taskon-color-primary: #3b82f6;
+  --taskon-color-success: #22c55e;
+  --taskon-color-warning: #f59e0b;
+  --taskon-color-error: #ef4444;
+
+  /* Recurrence badge color */
+  --taskon-recurrence-color: #9aff73;
+
+  /* Spacing */
+  --taskon-task-spacing-xs: 4px;
+  --taskon-task-spacing-sm: 8px;
+  --taskon-task-spacing-md: 12px;
+  --taskon-task-spacing-lg: 16px;
+  --taskon-task-spacing-xl: 24px;
+
+  /* Transitions */
+  --taskon-task-transition: 0.2s ease;
+}
+
+/* ============================================
+   TaskList Styles
+   与 Vue 版本 TaskList.vue + TaskType.vue 一致
+   ============================================ */
+.taskon-task-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--taskon-task-spacing-lg);
+}
+
+/* Progress section */
+.taskon-task-list-progress-wrap {
+  margin-bottom: var(--taskon-task-spacing-sm);
+}
+
+/* Section styles */
+.taskon-task-list-section {
+  display: flex;
+  flex-direction: column;
+}
+
+.taskon-task-list-section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 30px;
+  margin-bottom: 22px;
+}
+
+.taskon-task-list-section-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.taskon-task-list-section-title {
+  font-size: 22px;
+  font-weight: 600;
+  line-height: 21px;
+  color: var(--taskon-task-text);
+}
+
+.taskon-task-list-section-hint {
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.taskon-task-list-section-hint-em {
+  font-weight: 600;
+  color: rgba(0, 255, 163, 1);
+}
+
+.taskon-task-list-items {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+/* First section header doesn't need top margin */
+.taskon-task-list-section:first-child .taskon-task-list-section-header {
+  margin-top: 0;
+}
+
+/* Empty state */
+.taskon-task-list-empty {
+  padding: var(--taskon-task-spacing-xl);
+  text-align: center;
+  color: var(--taskon-task-text-muted);
+}
+
+/* Mobile responsive */
+@media (max-width: 750px) {
+  .taskon-task-list-section-header {
+    display: block;
+    margin-top: 5.6vw;
+    margin-bottom: 4vw;
+  }
+
+  .taskon-task-list-section-label {
+    flex-wrap: wrap;
+    gap: 1.6vw;
+  }
+
+  .taskon-task-list-section-title {
+    font-size: 4.8vw;
+    line-height: 6vw;
+  }
+
+  .taskon-completed-count {
+    margin-top: 2.67vw;
+    justify-content: flex-start;
+  }
+
+  .taskon-completed-count-check {
+    width: 3.2vw;
+    height: 2.4vw;
+    margin-right: 2.13vw;
+  }
+
+  .taskon-completed-count-text {
+    font-size: 3.47vw;
+    line-height: 4.4vw;
+  }
+
+  .taskon-task-list-items {
+    gap: 3.07vw;
+  }
+}
+
+/* ============================================
+   TaskProgress Styles
+   ============================================ */
+.taskon-task-progress {
+  display: flex;
+  flex-direction: column;
+  gap: var(--taskon-task-spacing-sm);
+}
+
+.taskon-task-progress-bar {
+  height: 6px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+.taskon-task-progress-bar-fill {
+  height: 100%;
+  background: var(--taskon-color-primary);
+  border-radius: 3px;
+  transition: width var(--taskon-task-transition);
+}
+
+.taskon-task-progress--completed .taskon-task-progress-bar-fill {
+  background: var(--taskon-color-success);
+}
+
+.taskon-task-progress-text {
+  display: flex;
+  align-items: center;
+  gap: var(--taskon-task-spacing-xs);
+  font-size: 13px;
+  color: var(--taskon-task-text-secondary);
+}
+
+.taskon-task-progress--completed .taskon-task-progress-text {
+  color: var(--taskon-color-success);
+}
+
+.taskon-task-progress-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* ============================================
+   TaskItem Styles
+   ============================================ */
+.taskon-task-item {
+  position: relative;
+  padding: 16px 20px;
+  background: var(--taskon-task-bg);
+  border-radius: var(--taskon-task-radius);
+  border: 1px solid var(--taskon-task-border);
+  transition: border-color var(--taskon-task-transition);
+}
+
+.taskon-task-item:hover {
+  border-color: var(--taskon-task-border-hover);
+}
+
+/* ============================================
+   左上角浮标：周期标签 / 冷却倒计时
+   与 Vue 版本 RecurrenceStatus.vue 样式一致
+   ============================================ */
+.taskon-task-item-recurrence {
+  position: absolute;
+  top: -6px;
+  left: 12px;
+  /* 与 Vue 版本一致：使用 SVG 背景 */
+  background: url("data:image/svg+xml,%3csvg%20width='69'%20height='20'%20viewBox='0%200%2069%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20filter='url(%23filter0_i_10913_141293)'%3e%3cpath%20d='M67.9996%204.5C67.9996%202.5%2066.7705%201%2064.1369%201H3.42655C0.791465%201%200%203%200%204.64199L67.9996%204.5Z'%20fill='%2328491F'/%3e%3c/g%3e%3cg%20filter='url(%23filter1_d_10913_141293)'%3e%3cpath%20d='M2.99902%201H11.242H65.999V1C64.6983%201%2063.6439%202.05443%2063.6439%203.35514V13C63.6439%2015.2091%2061.853%2017%2059.6439%2017H11.1205C8.91138%2017%207.12052%2015.2091%207.12052%2013V5.1215C7.12052%202.84526%205.27526%201%202.99902%201V1Z'%20fill='%232D422A'/%3e%3c/g%3e%3cdefs%3e%3cfilter%20id='filter0_i_10913_141293'%20x='0'%20y='1'%20width='67.9996'%20height='4.64197'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='BackgroundImageFix'/%3e%3cfeBlend%20mode='normal'%20in='SourceGraphic'%20in2='BackgroundImageFix'%20result='shape'/%3e%3cfeColorMatrix%20in='SourceAlpha'%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200'%20result='hardAlpha'/%3e%3cfeOffset%20dy='1'/%3e%3cfeGaussianBlur%20stdDeviation='4.1'/%3e%3cfeComposite%20in2='hardAlpha'%20operator='arithmetic'%20k2='-1'%20k3='1'/%3e%3cfeColorMatrix%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.8%200'/%3e%3cfeBlend%20mode='normal'%20in2='shape'%20result='effect1_innerShadow_10913_141293'/%3e%3c/filter%3e%3cfilter%20id='filter1_d_10913_141293'%20x='1.99902'%20y='0'%20width='67'%20height='20'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='BackgroundImageFix'/%3e%3cfeColorMatrix%20in='SourceAlpha'%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200'%20result='hardAlpha'/%3e%3cfeOffset%20dx='1'%20dy='1'/%3e%3cfeGaussianBlur%20stdDeviation='1'/%3e%3cfeComposite%20in2='hardAlpha'%20operator='out'/%3e%3cfeColorMatrix%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.25%200'/%3e%3cfeBlend%20mode='normal'%20in2='BackgroundImageFix'%20result='effect1_dropShadow_10913_141293'/%3e%3cfeBlend%20mode='normal'%20in='SourceGraphic'%20in2='effect1_dropShadow_10913_141293'%20result='shape'/%3e%3c/filter%3e%3c/defs%3e%3c/svg%3e") no-repeat center center;
+  background-size: cover;
+  /* 固定尺寸与 Vue 版本一致 */
+  width: 78px;
+  height: 20px;
+  /* 文字样式 */
+  color: var(--taskon-recurrence-color);
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 500;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 冷却倒计时样式 - 继承标签样式 */
+.taskon-task-item-recurrence .taskon-cooldown-timer {
+  color: var(--taskon-recurrence-color);
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 500;
+}
+
+/* ============================================
+   第一行：图标 + 标题 + 右侧内容
+   ============================================ */
+.taskon-task-item-row {
+  display: flex;
+  align-items: center;
+}
+
+/* Left section: Icon + Title */
+.taskon-task-item-left {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+}
+
+.taskon-task-item-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 16px;
+  color: var(--taskon-task-text-secondary);
+}
+
+.taskon-task-item--completed .taskon-task-item-icon {
+  color: var(--taskon-color-success);
+}
+
+/* Title wrapper - 与 Vue 版本 TitleRow 结构一致 */
+/* 普通 block flow，标题 inline，TotalEarnPoint 作为 block div 自然换行 */
+.taskon-task-item-title-wrap {
+  flex: 1;
+  min-width: 0;
+}
+
+.taskon-task-item-title {
+  display: inline;
+  font-size: 18px;
+  font-weight: 500;
+  color: var(--taskon-task-text);
+  line-height: 23px;
+  overflow-wrap: break-word;
+}
+
+/* Title as link - 参考 Vue 版本 TitleRow.vue 的 OutLink 样式 */
+.taskon-task-item-title--link {
+  color: #54aeff;
+  text-decoration: underline;
+  transition: opacity var(--taskon-task-transition);
+}
+
+.taskon-task-item-title--link:hover {
+  opacity: 0.8;
+}
+
+.taskon-task-item--completed .taskon-task-item-title {
+  color: var(--taskon-task-text-secondary);
+}
+
+/* Links in title - 统一蓝色加下划线样式 */
+.taskon-task-item-link {
+  color: #54aeff;
+  text-decoration: underline;
+  transition: opacity var(--taskon-task-transition);
+}
+
+.taskon-task-item-link:hover {
+  opacity: 0.8;
+}
+
+/* Title tip icon */
+.taskon-task-item-title-tip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 6px;
+  color: rgba(255, 255, 255, 0.4);
+  cursor: help;
+  flex-shrink: 0;
+}
+
+.taskon-task-item-title-tip:hover {
+  color: rgba(255, 255, 255, 0.6);
+}
+
+/* Right section: Points + Total + Verify */
+.taskon-task-item-right {
+  display: flex;
+  align-items: center;
+  gap: var(--taskon-task-spacing-md);
+  flex-shrink: 0;
+  margin-left: 10px;
+}
+
+/* Points display - 参考 TaskPoint.vue */
+.taskon-task-item-points {
+  min-width: 40px;
+  height: 34px;
+  padding: 0 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  background: rgba(255, 255, 255, 0.04);
+  border-radius: 6px;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.taskon-task-item-points-value {
+  color: #ffffff;
+}
+
+/* Points value when task is completed - green color like Vue version */
+.taskon-task-item-points-value--completed {
+  color: #00ffa3;
+}
+
+.taskon-task-item-points-time {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+/* Tip icon next to points (margin controlled externally) */
+.taskon-task-item-tip {
+  margin-left: 10px;
+}
+
+/* Total points */
+.taskon-task-item-total-points {
+  font-size: 12px;
+  color: var(--taskon-task-text-muted);
+}
+
+/* ============================================
+   TotalEarnPoint Styles
+   与 Vue 版本 TotalEarnPoint.vue 样式一致
+   ============================================ */
+.taskon-task-item-total-earn {
+  display: flex;
+  align-items: center;
+}
+
+.taskon-task-item-total-earn-text {
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 14px;
+}
+
+.taskon-task-item-total-earn-value {
+  color: #9aff73;
+  font-size: 14px;
+  margin: 0 4px;
+}
+
+/* ============================================
+   第二行：内容区域（始终显示）
+   ============================================ */
+.taskon-task-item-body {
+  margin-left: 50px;
+  margin-top: 10px;
+}
+
+.taskon-task-item-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--taskon-task-spacing-md);
+}
+
+.taskon-task-item-desc {
+  font-size: 14px;
+  line-height: 21px;
+  color: var(--taskon-task-text-secondary);
+  word-break: break-all;
+  white-space: pre-wrap;
+}
+
+.taskon-task-item-desc span {
+  color: var(--taskon-task-text);
+  word-break: break-all;
+}
+
+/* Rich text content - 参考 Vue 版本 TextPreview.vue */
+.taskon-task-item-rich-text {
+  font-size: 14px;
+  line-height: 21px;
+  color: var(--taskon-task-text-secondary);
+  word-break: break-word;
+}
+
+.taskon-task-item-rich-text p {
+  margin: 0 0 0.5em 0;
+}
+
+.taskon-task-item-rich-text p:last-child {
+  margin-bottom: 0;
+}
+
+.taskon-task-item-rich-text a {
+  color: #54aeff;
+  text-decoration: underline;
+}
+
+.taskon-task-item-rich-text a:hover {
+  opacity: 0.8;
+}
+
+.taskon-task-item-rich-text strong,
+.taskon-task-item-rich-text b {
+  font-weight: 600;
+  color: var(--taskon-task-text);
+}
+
+.taskon-task-item-rich-text em,
+.taskon-task-item-rich-text i {
+  font-style: italic;
+}
+
+.taskon-task-item-rich-text ul,
+.taskon-task-item-rich-text ol {
+  margin: 0.5em 0;
+  padding-left: 1.5em;
+}
+
+.taskon-task-item-rich-text li {
+  margin: 0.25em 0;
+}
+
+.taskon-task-item-rich-text code {
+  background: rgba(255, 255, 255, 0.1);
+  padding: 0.2em 0.4em;
+  border-radius: 3px;
+  font-size: 0.9em;
+}
+
+.taskon-task-item-rich-text pre {
+  background: rgba(255, 255, 255, 0.05);
+  padding: 0.75em 1em;
+  border-radius: 6px;
+  overflow-x: auto;
+  margin: 0.5em 0;
+}
+
+.taskon-task-item-rich-text blockquote {
+  border-left: 3px solid var(--taskon-color-primary);
+  padding-left: 1em;
+  margin: 0.5em 0;
+  color: var(--taskon-task-text-muted);
+}
+
+.taskon-task-item-rich-text img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 6px;
+}
+
+/* Description fields */
+.taskon-task-item-fields {
+  display: flex;
+  flex-direction: column;
+  gap: var(--taskon-task-spacing-xs);
+}
+
+.taskon-task-item-field {
+  display: flex;
+  align-items: baseline;
+  gap: var(--taskon-task-spacing-sm);
+  font-size: 13px;
+}
+
+.taskon-task-item-field-key {
+  color: var(--taskon-task-text-muted);
+  flex-shrink: 0;
+}
+
+.taskon-task-item-field-value {
+  color: var(--taskon-task-text);
+  word-break: break-all;
+}
+
+.taskon-task-item-field-value--link {
+  color: #54aeff;
+  text-decoration: underline;
+  transition: opacity var(--taskon-task-transition);
+}
+
+.taskon-task-item-field-value--link:hover {
+  opacity: 0.8;
+}
+
+/* Action link */
+.taskon-task-item-action-link {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--taskon-task-spacing-sm) var(--taskon-task-spacing-md);
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--taskon-color-primary);
+  background: transparent;
+  border: 1px solid var(--taskon-color-primary);
+  border-radius: 6px;
+  text-decoration: none;
+  transition: all var(--taskon-task-transition);
+  align-self: flex-start;
+}
+
+.taskon-task-item-action-link:hover {
+  background: var(--taskon-color-primary);
+  color: white;
+}
+
+/* Spinner animation */
+@keyframes taskon-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.taskon-task-item-spinner {
+  animation: taskon-spin 1s linear infinite;
+}
+
+/* ============================================
+   TaskIcon Styles
+   ============================================ */
+.taskon-task-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.taskon-task-icon-img {
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+/* ============================================
+   CooldownTimer Styles
+   ============================================ */
+.taskon-cooldown-timer {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--taskon-task-spacing-xs);
+  font-size: 13px;
+  color: var(--taskon-color-warning);
+}
+
+/* ============================================
+   VerifyButton Styles
+   ============================================ */
+.taskon-verify-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  height: 34px;
+  padding: 0 12px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  color: #fff;
+  background: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all var(--taskon-task-transition);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.taskon-verify-btn:hover:not(:disabled) {
+  border-color: rgba(255, 255, 255, 0.3);
+}
+
+.taskon-verify-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.taskon-verify-btn--loading {
+  pointer-events: none;
+}
+
+.taskon-verify-btn-spinner {
+  width: 16px;
+  height: 16px;
+  animation: taskon-spin 1s linear infinite;
+}
+
+/* ============================================
+   ExpandableContent Styles
+   ============================================ */
+.taskon-expandable {
+  display: flex;
+  flex-direction: column;
+}
+
+.taskon-expandable-content {
+  position: relative;
+}
+
+.taskon-expandable-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0;
+  margin-top: 8px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #ffffff;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: opacity var(--taskon-task-transition);
+  align-self: flex-start;
+}
+
+.taskon-expandable-toggle:hover {
+  opacity: 0.8;
+}
+
+.taskon-expandable-toggle-text {
+  line-height: 1;
+}
+
+.taskon-expandable-toggle-icon {
+  transition: transform var(--taskon-task-transition);
+  flex-shrink: 0;
+}
+
+.taskon-expandable-toggle-icon--expanded {
+  transform: rotate(180deg);
+}
+
+/* ============================================
+   Responsive Styles
+   ============================================ */
+@media (max-width: 750px) {
+  .taskon-task-item {
+    padding: 4vw;
+  }
+
+  .taskon-task-item-body {
+    margin-left: 9.333vw;
+  }
+
+  .taskon-task-item-icon {
+    margin-right: 2.667vw;
+  }
+
+  .taskon-task-item-right {
+    margin-left: 2.67vw;
+  }
+
+  .taskon-task-item-title {
+    font-weight: 400;
+    font-size: 3.733vw;
+    line-height: 4.667vw;
+  }
+
+  .taskon-task-item-desc {
+    font-size: 3.2vw;
+    line-height: 4vw;
+  }
+
+  .taskon-task-icon-img {
+    width: 6.667vw !important;
+    height: 6.667vw !important;
+  }
+
+  /* Points display mobile - 参考 TaskPoint.vue */
+  .taskon-task-item-points {
+    min-width: 6.8vw;
+    height: 6.67vw;
+    padding: 0 2vw;
+    font-size: 2.93vw;
+    border-radius: 0.91vw;
+  }
+
+  .taskon-task-item-points-time {
+    font-size: 1.85vw;
+  }
+}
+
+/* ============================================
+   TimeRange Styles
+   与 Vue 版本 TimeRange.vue 样式一致
+   ============================================ */
+.taskon-task-time-range {
+  font-size: 14px;
+  line-height: 18px;
+  margin-top: 14px;
+}
+
+.taskon-task-time-range-label {
+  color: var(--taskon-task-text-secondary);
+}
+
+.taskon-task-time-range-value {
+  display: inline-block;
+  color: rgba(255, 212, 101, 1);
+}
+
+/* ============================================
+   VerifyButton Cooldown Progress Bar
+   与 Vue 版本 VerifyButton.vue 冷却进度条样式一致
+   ============================================ */
+.taskon-verify-btn-wrap {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+  border-radius: 6px;
+}
+
+.taskon-verify-btn-progress {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+}
+
+.taskon-verify-btn-progress-bar {
+  height: 100%;
+  border-radius: 6px;
+  background: linear-gradient(to right, #cbff01, #00ffa3);
+}
+/**
+ * BlindBox 盲盒组件样式
+ * @module widgets/Quest/components/BlindBox/styles/blind-box.css
+ *
+ * Migrated from Vue version with Tailwind classes converted to CSS
+ */
+
+/* ============================================================================
+   BlindBox Dialog - 开盲盒交互弹窗
+   ============================================================================ */
+
+.taskon-quest-blindbox-dialog {
+  position: relative;
+  width: min(520px, 92vw);
+  overflow: hidden;
+  padding-top: 40px;
+}
+
+.taskon-quest-blindbox-dialog-title {
+  margin: 0 0 16px;
+  padding: 0 40px;
+  font-size: 22px;
+  font-weight: 600;
+  line-height: 1.4;
+  color: #fff;
+}
+
+/* Stage container - centered square area for animation */
+.taskon-quest-blindbox-stage {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  max-width: 420px;
+  margin: 0 auto;
+  aspect-ratio: 1;
+  overflow: visible;
+  border-radius: 32px;
+  background: transparent;
+}
+
+/* Background spinning light */
+.taskon-quest-blindbox-bg {
+  position: absolute;
+  left: 50%;
+  top: calc(40% + 20px);
+  width: min(80%, 340px);
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  opacity: 0.75;
+  animation: taskon-blindbox-spin 14s linear infinite;
+}
+
+.taskon-quest-blindbox-bg img {
+  width: 100%;
+  height: auto;
+}
+
+@keyframes taskon-blindbox-spin {
+  from {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  to {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+
+/* Drop zone - collision detection area */
+.taskon-quest-blindbox-dropzone {
+  position: absolute;
+  left: 50%;
+  top: calc(40% + 20px);
+  width: min(33%, 145px);
+  height: min(33%, 145px);
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+/* Chest container */
+.taskon-quest-blindbox-chest {
+  position: absolute;
+  left: 50%;
+  top: 40%;
+  width: min(75%, 350px);
+  height: auto;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  transition: filter 0.2s ease;
+}
+
+.taskon-quest-blindbox-chest--highlighted {
+  filter: drop-shadow(0 0 16px rgba(233, 168, 30, 0.55));
+}
+
+.taskon-quest-blindbox-chest--open {
+  filter: drop-shadow(0 0 22px rgba(255, 205, 112, 0.75));
+}
+
+/* Ensure Lottie SVG fills container */
+.taskon-quest-blindbox-chest svg {
+  width: 100% !important;
+  height: auto !important;
+}
+
+/* Key image */
+.taskon-quest-blindbox-key {
+  position: absolute;
+  width: clamp(80px, 16vw, 100px);
+  transform: translate(-50%, -50%);
+  cursor: grab;
+  touch-action: none;
+  user-select: none;
+  transition: transform 0.2s ease, filter 0.2s ease;
+  pointer-events: auto;
+}
+
+.taskon-quest-blindbox-key--dragging {
+  transform: translate(-50%, -50%) scale(1.04);
+  cursor: grabbing;
+}
+
+.taskon-quest-blindbox-key--hovering {
+  filter: drop-shadow(0 0 18px rgba(255, 211, 103, 0.8));
+}
+
+.taskon-quest-blindbox-key--disabled {
+  pointer-events: none;
+  opacity: 0.6;
+}
+
+/* ============================================================================
+   BlindBox Reward Dialog - 奖励结果展示弹窗
+   ============================================================================ */
+
+.taskon-quest-blindbox-reward {
+  position: relative;
+  width: 510px;
+  max-width: 92vw;
+  padding: 64px 40px;
+  text-align: center;
+  color: #fff;
+  overflow: hidden;
+}
+
+/* Light background effect */
+.taskon-quest-blindbox-reward-light {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  width: 120%;
+  max-width: none;
+  transform: translateX(-50%);
+  object-fit: contain;
+  pointer-events: none;
+  opacity: 0;
+  animation: taskon-blindbox-light-appear 2s ease-out forwards;
+}
+
+@keyframes taskon-blindbox-light-appear {
+  to {
+    opacity: 1;
+  }
+}
+
+/* Title */
+.taskon-quest-blindbox-reward-title {
+  font-size: 32px;
+  font-weight: 600;
+  line-height: 40px;
+  margin: 0;
+}
+
+/* Subtitle */
+.taskon-quest-blindbox-reward-subtitle {
+  margin-top: 12px;
+  font-size: 16px;
+  line-height: 1.5;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+/* Rewards container - Green border and background like Vue version */
+.taskon-quest-blindbox-reward-list {
+  display: inline-flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  margin-top: 24px;
+  gap: 8px;
+  padding: 12px 16px;
+  border-radius: 8px;
+  border: 1px solid rgba(60, 232, 155, 0.2);
+  background: rgba(0, 255, 163, 0.1);
+}
+
+/* Single reward card - transparent background */
+.taskon-quest-blindbox-reward-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 12px 16px;
+  background: transparent;
+  border-radius: 0;
+  min-width: 60px;
+  min-height: 80px;
+  gap: 8px;
+}
+
+.taskon-quest-blindbox-reward-card-icon {
+  width: 32px;
+  height: 32px;
+  object-fit: contain;
+  border-radius: 50%;
+}
+
+/* Token amount with orange color and underline like Vue version */
+.taskon-quest-blindbox-reward-card-amount {
+  font-size: 18px;
+  font-weight: 600;
+  color: #fbb15a;
+  text-decoration: underline;
+}
+
+.taskon-quest-blindbox-reward-card-name {
+  font-size: 14px;
+  color: #fbb15a;
+  text-decoration: underline;
+}
+
+.taskon-quest-blindbox-reward-card-value {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.5);
+  margin-top: 2px;
+}
+
+/* Back button */
+.taskon-quest-blindbox-reward-btn-wrap {
+  display: flex;
+  justify-content: center;
+  margin-top: 60px;
+}
+
+/* Back button - matches Vue g-button--light-border */
+.taskon-quest-blindbox-reward-btn {
+  height: 36px;
+  padding: 0 24px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #fff;
+  background: transparent;
+  border: 1px solid #fff;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+}
+
+.taskon-quest-blindbox-reward-btn:hover {
+  opacity: 0.8;
+}
+
+.taskon-quest-blindbox-reward-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ============================================================================
+   OperateFooter - 开盲盒按钮
+   ============================================================================ */
+
+.taskon-quest-footer-blindbox-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  padding: 14px 24px;
+  font-size: 16px;
+  font-weight: 600;
+  color: #000;
+  background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
+  border: none;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.taskon-quest-footer-blindbox-btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 16px rgba(255, 215, 0, 0.4);
+}
+
+.taskon-quest-footer-blindbox-btn:active {
+  transform: translateY(0);
+}
+
+.taskon-quest-footer-blindbox-btn-icon {
+  width: 24px;
+  height: 24px;
+}
+
+/* ============================================================================
+   Mobile Responsive
+   ============================================================================ */
+
+@media (max-width: 768px) {
+  .taskon-quest-blindbox-dialog {
+    padding-top: 24px;
+  }
+
+  .taskon-quest-blindbox-dialog-title {
+    padding: 0 24px;
+    font-size: 18px;
+  }
+
+  .taskon-quest-blindbox-reward {
+    padding: 48px 24px;
+  }
+
+  .taskon-quest-blindbox-reward-title {
+    font-size: 24px;
+    line-height: 32px;
+  }
+
+  .taskon-quest-blindbox-reward-btn-wrap {
+    margin-top: 40px;
+  }
+}