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

package/dist/Quest.css

@@ -137,7 +137,7 @@
 
 .taskon-eligs-dialog-desc {
   margin: 0;
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   line-height: 1.5;
   color: var(--taskon-color-text-secondary);
   text-align: center;
@@ -172,7 +172,7 @@
   border: none;
   cursor: pointer;
   color: var(--taskon-color-text);
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   text-align: left;
   transition: background 0.2s;
 }
@@ -216,7 +216,7 @@
   border-radius: var(--taskon-border-radius);
   background: var(--taskon-color-primary);
   color: var(--taskon-color-text-on-primary);
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 500;
   cursor: pointer;
   transition: opacity 0.2s, background 0.2s;
@@ -275,7 +275,7 @@
 
 .taskon-eligs-bind-section-title {
   margin: 0 0 12px;
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 600;
   color: var(--taskon-color-text);
 }
@@ -284,7 +284,7 @@
 
 .taskon-eligs-bind-tip {
   margin: 0 0 20px;
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   line-height: 1.5;
   color: var(--taskon-color-text-tertiary);
 }
@@ -297,7 +297,7 @@
 
 .taskon-eligs-bind-section-subtitle {
   margin: 0 0 12px;
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 500;
   color: var(--taskon-color-text-secondary);
 }
@@ -328,7 +328,7 @@
 }
 
 .taskon-eligs-bind-item-label {
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 500;
   color: var(--taskon-color-text);
 }
@@ -340,7 +340,7 @@
   align-items: center;
   gap: 6px;
   padding: 6px 16px;
-  font-size: 13px;
+  font-size: var(--taskon-font-size-sm);
   font-weight: 500;
   color: var(--taskon-color-text-on-primary);
   background: linear-gradient(
@@ -386,7 +386,7 @@
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  font-size: 13px;
+  font-size: var(--taskon-font-size-sm);
   font-weight: 500;
   color: var(--taskon-color-success);
 }
@@ -441,7 +441,7 @@
   align-items: center;
   width: 100%;
   padding: 12px;
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 500;
   color: var(--taskon-color-text);
   background: transparent;
@@ -508,16 +508,12 @@
   width: 100%;
 }
 
-/* 海报顶部 - 绿色渐变区域 */
+/* 海报顶部 - 纯色背景 */
 
 .taskon-quest-qr-poster-header {
-  background: linear-gradient(
-    89.87deg,
-    var(--taskon-color-primary-bg) 0.13%,
-    var(--taskon-color-primary) 99.92%
-  );
+  background: var(--taskon-color-bg-surface);
   padding: 30px;
-  color: var(--taskon-color-text-on-primary);
+  color: var(--taskon-color-text);
 }
 
 /* 社区信息 */
@@ -532,12 +528,12 @@
   height: 30px;
   border-radius: 50%;
   margin-right: 6px;
-  border: 2px solid var(--taskon-color-text-on-primary);
+  border: 2px solid var(--taskon-color-border);
   object-fit: cover;
 }
 
 .taskon-quest-qr-owner-name {
-  font-size: 24px;
+  font-size: var(--taskon-font-size-xxxl);
   font-weight: 600;
   white-space: nowrap;
   overflow: hidden;
@@ -549,8 +545,8 @@
 .taskon-quest-qr-campaign-name {
   margin-top: 14px;
   margin-bottom: 8px;
-  font-size: 16px;
-  line-height: 24px;
+  font-size: var(--taskon-font-size-lg);
+  line-height: 1.5;
   font-weight: 600;
   display: -webkit-box;
   -webkit-line-clamp: 2;
@@ -604,7 +600,7 @@
   align-items: center;
   margin-top: 15px;
   margin-bottom: 6px;
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 500;
   color: var(--taskon-color-text);
 }
@@ -658,7 +654,7 @@
   align-items: center;
   white-space: nowrap;
   color: var(--taskon-color-text);
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 400;
 }
 
@@ -738,9 +734,9 @@
 
 .taskon-quest-participants-info-title {
   margin: 0;
-  font-size: 24px;
+  font-size: var(--taskon-font-size-xxxl);
   font-weight: 600;
-  line-height: 32px;
+  line-height: 1.33;
   color: var(--taskon-color-text);
 }
 
@@ -763,9 +759,9 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 500;
-  line-height: 24px;
+  line-height: 1.5;
   width: 100%;
 }
 
@@ -829,9 +825,9 @@
 
 .taskon-quest-participants-dialog-title {
   margin: 0 0 var(--taskon-spacing-lg) 0;
-  font-size: 22px;
+  font-size: var(--taskon-font-size-xxl);
   font-weight: 600;
-  line-height: 28px;
+  line-height: 1.27;
   color: var(--taskon-color-text);
 }
 
@@ -840,17 +836,17 @@
 }
 
 .taskon-quest-participants-dialog-subtitle {
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 600;
-  line-height: 24px;
+  line-height: 1.5;
   color: var(--taskon-color-text);
 }
 
 .taskon-quest-participants-dialog-desc {
   margin-top: var(--taskon-spacing-xs);
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 500;
-  line-height: 20px;
+  line-height: 1.43;
   color: var(--taskon-color-text-tertiary);
 }
 
@@ -904,16 +900,16 @@
 }
 
 .taskon-quest-participants-dialog-card-title {
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 600;
-  line-height: 20px;
+  line-height: 1.43;
   color: var(--taskon-color-text);
 }
 
 .taskon-quest-participants-dialog-card-desc {
-  font-size: 12px;
+  font-size: var(--taskon-font-size-sm);
   font-weight: 500;
-  line-height: 16px;
+  line-height: 1.33;
   color: var(--taskon-color-text-tertiary);
 }
 
@@ -951,9 +947,9 @@
 
 .taskon-quest-winner-title {
   margin: 0;
-  font-size: 22px;
+  font-size: var(--taskon-font-size-xxl);
   font-weight: 600;
-  line-height: 28px;
+  line-height: 1.27;
   color: var(--taskon-color-text);
 }
 
@@ -982,6 +978,8 @@
 .taskon-quest-winner-error p {
   margin: 0;
   color: var(--taskon-color-text-secondary);
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 
 /* ============================================================================
@@ -1015,9 +1013,9 @@
 .taskon-quest-winner-table th {
   padding: 12px 16px;
   text-align: left;
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 500;
-  line-height: 20px;
+  line-height: 1.43;
   color: var(--taskon-color-text-secondary);
   border-bottom: 1px solid var(--taskon-color-border);
 }
@@ -1028,9 +1026,9 @@
 
 .taskon-quest-winner-table td {
   padding: 12px 16px;
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 500;
-  line-height: 20px;
+  line-height: 1.43;
   color: var(--taskon-color-text);
   border-bottom: 1px solid var(--taskon-color-border-secondary);
   vertical-align: middle;
@@ -1132,9 +1130,9 @@
   padding: var(--taskon-spacing-xs) var(--taskon-spacing-sm);
   background: var(--taskon-color-bg-surface-strong);
   border-radius: var(--taskon-border-radius-sm);
-  font-size: 12px;
+  font-size: var(--taskon-font-size-sm);
   font-weight: 500;
-  line-height: 16px;
+  line-height: 1.33;
   white-space: nowrap;
 }
 
@@ -1210,9 +1208,9 @@
   white-space: nowrap;
   text-overflow: ellipsis;
   color: var(--taskon-color-text);
-  font-size: 22px;
+  font-size: var(--taskon-font-size-xxl);
   font-weight: 500;
-  line-height: 28px;
+  line-height: 1.27;
 }
 
 /* ============================================================================
@@ -1239,9 +1237,9 @@
   display: flex;
   align-items: center;
   color: var(--taskon-color-text-tertiary);
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 500;
-  line-height: 20px;
+  line-height: 1.25;
 }
 
 /* Tip icon margin (controlled externally as TipPopover has no internal margin) */
@@ -1257,9 +1255,9 @@
 
 .taskon-quest-rewards-ranking-point-number {
   color: var(--taskon-color-primary);
-  font-size: 22px;
+  font-size: var(--taskon-font-size-xxl);
   font-weight: 700;
-  line-height: 28px;
+  line-height: 1.27;
 }
 
 .taskon-quest-rewards-ranking-point-tier {
@@ -1267,26 +1265,26 @@
   top: 100%;
   right: 0;
   color: var(--taskon-color-text-tertiary);
-  font-size: 13px;
+  font-size: var(--taskon-font-size-sm);
   font-weight: 500;
-  line-height: 16px;
+  line-height: 1.33;
   white-space: nowrap;
 }
 
 .taskon-quest-rewards-ranking-point-amount {
   margin-left: auto;
   color: var(--taskon-color-secondary);
-  font-size: 22px;
+  font-size: var(--taskon-font-size-xxl);
   font-weight: 700;
-  line-height: 28px;
+  line-height: 1.27;
 }
 
 .taskon-quest-rewards-ranking-point-tip {
   text-align: right;
   margin-left: auto;
   width: 50%;
-  font-size: 12px;
-  line-height: 16px;
+  font-size: var(--taskon-font-size-sm);
+  line-height: 1.33;
   color: var(--taskon-color-text-tertiary);
 }
 
@@ -1312,8 +1310,8 @@
 
 .taskon-quest-rewards-group-title {
   margin: 0;
-  font-size: 16px;
-  line-height: 20px;
+  font-size: var(--taskon-font-size-lg);
+  line-height: 1.25;
   font-weight: 500;
   color: var(--taskon-color-text);
 }
@@ -1351,8 +1349,8 @@
   gap: 8px;
   padding: 8px 16px;
   background: var(--taskon-color-bg-inset);
-  font-size: 16px;
-  line-height: 20px;
+  font-size: var(--taskon-font-size-lg);
+  line-height: 1.25;
 }
 
 .taskon-quest-rewards-card-tier--active {
@@ -1418,8 +1416,8 @@
 
 .taskon-quest-rewards-whitelist-desc-content {
   margin-top: 8px;
-  font-size: 14px;
-  line-height: 20px;
+  font-size: var(--taskon-font-size);
+  line-height: 1.43;
   color: var(--taskon-color-text-secondary);
 }
 
@@ -1435,8 +1433,8 @@
 }
 
 .taskon-quest-rewards-row-label {
-  font-size: 18px;
-  line-height: 24px;
+  font-size: var(--taskon-font-size-xl);
+  line-height: 1.33;
   font-weight: 500;
   color: var(--taskon-color-text);
   flex-shrink: 0;
@@ -1446,8 +1444,8 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  font-size: 14px;
-  line-height: 16px;
+  font-size: var(--taskon-font-size);
+  line-height: 1.14;
   color: var(--taskon-color-text);
 }
 
@@ -1468,8 +1466,8 @@
   border: 1px solid var(--taskon-color-border);
   border-radius: var(--taskon-border-radius-sm);
   box-shadow: 0 4px 12px var(--taskon-color-bg-mask);
-  font-size: 12px;
-  line-height: 16px;
+  font-size: var(--taskon-font-size-sm);
+  line-height: 1.33;
   color: var(--taskon-color-text);
   z-index: 1000;
   white-space: nowrap;
@@ -1493,8 +1491,8 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  font-size: 16px;
-  line-height: 20px;
+  font-size: var(--taskon-font-size-lg);
+  line-height: 1.25;
   font-weight: 600;
   margin-bottom: 20px;
   opacity: 0.9;
@@ -1519,20 +1517,20 @@
 }
 
 .taskon-quest-rewards-token-amount {
-  font-size: 22px;
-  line-height: 28px;
+  font-size: var(--taskon-font-size-xxl);
+  line-height: 1.27;
   color: var(--taskon-color-primary);
 }
 
 .taskon-quest-rewards-token-name {
-  font-size: 22px;
-  line-height: 28px;
+  font-size: var(--taskon-font-size-xxl);
+  line-height: 1.27;
   color: var(--taskon-color-primary);
 }
 
 .taskon-quest-rewards-token-usdt-tag {
-  font-size: 12px;
-  line-height: 14px;
+  font-size: var(--taskon-font-size-sm);
+  line-height: 1.17;
   padding: 2px 6px;
   background: var(--taskon-color-secondary-bg);
   border-radius: var(--taskon-border-radius-sm);
@@ -1547,15 +1545,15 @@
 }
 
 .taskon-quest-rewards-token-per-label {
-  font-size: 14px;
-  line-height: 16px;
+  font-size: var(--taskon-font-size);
+  line-height: 1.14;
   color: var(--taskon-color-text-tertiary);
 }
 
 .taskon-quest-rewards-token-per-value {
   margin-left: auto;
-  font-size: 14px;
-  line-height: 16px;
+  font-size: var(--taskon-font-size);
+  line-height: 1.14;
   color: var(--taskon-color-text-secondary);
 }
 
@@ -1563,8 +1561,8 @@
 
 .taskon-quest-rewards-token-brc20 {
   padding: 2px 6px;
-  font-size: 12px;
-  line-height: 14px;
+  font-size: var(--taskon-font-size-sm);
+  line-height: 1.17;
   font-weight: 500;
   color: var(--taskon-color-warning);
   background: var(--taskon-color-warning-bg);
@@ -1589,8 +1587,8 @@
 .taskon-quest-rewards-minted-nft-name,
 .taskon-quest-rewards-cap-name,
 .taskon-quest-rewards-whitelist-name {
-  font-size: 22px;
-  line-height: 28px;
+  font-size: var(--taskon-font-size-xxl);
+  line-height: 1.27;
   font-weight: 600;
   color: var(--taskon-color-text);
   overflow: hidden;
@@ -1600,8 +1598,8 @@
 }
 
 .taskon-quest-rewards-minted-nft-quantity {
-  font-size: 14px;
-  line-height: 16px;
+  font-size: var(--taskon-font-size);
+  line-height: 1.14;
   color: var(--taskon-color-text-secondary);
 }
 
@@ -1620,8 +1618,8 @@
 }
 
 .taskon-quest-rewards-popover-name {
-  font-size: 14px;
-  line-height: 18px;
+  font-size: var(--taskon-font-size);
+  line-height: 1.29;
   color: var(--taskon-color-text);
   word-break: break-all;
 }
@@ -1631,8 +1629,8 @@
 }
 
 .taskon-quest-rewards-popover-address-title {
-  font-size: 14px;
-  line-height: 18px;
+  font-size: var(--taskon-font-size);
+  line-height: 1.29;
   font-weight: 500;
   color: var(--taskon-color-text);
 }
@@ -1653,8 +1651,8 @@
 
 .taskon-quest-rewards-popover-address-text {
   flex: 1;
-  font-size: 12px;
-  line-height: 16px;
+  font-size: var(--taskon-font-size-sm);
+  line-height: 1.33;
   color: var(--taskon-color-text-tertiary);
   word-break: break-all;
 }
@@ -1694,16 +1692,16 @@
 
 .taskon-quest-rewards-points-amount,
 .taskon-quest-rewards-exp-amount {
-  font-size: 22px;
-  line-height: 28px;
+  font-size: var(--taskon-font-size-xxl);
+  line-height: 1.27;
   font-weight: 600;
   color: var(--taskon-color-primary);
 }
 
 .taskon-quest-rewards-points-name,
 .taskon-quest-rewards-exp-label {
-  font-size: 22px;
-  line-height: 28px;
+  font-size: var(--taskon-font-size-xxl);
+  line-height: 1.27;
   color: var(--taskon-color-text);
 }
 
@@ -1718,8 +1716,8 @@
 }
 
 .taskon-quest-rewards-discord-role-name {
-  font-size: 22px;
-  line-height: 28px;
+  font-size: var(--taskon-font-size-xxl);
+  line-height: 1.27;
   color: var(--taskon-color-link);
   cursor: pointer;
 }
@@ -1729,8 +1727,8 @@
 }
 
 .taskon-quest-rewards-discord-role-warning {
-  font-size: 12px;
-  line-height: 14px;
+  font-size: var(--taskon-font-size-sm);
+  line-height: 1.17;
   color: var(--taskon-color-warning);
 }
 
@@ -1739,8 +1737,8 @@
    ============================================================================ */
 
 .taskon-quest-rewards-winner-open {
-  font-size: 22px;
-  line-height: 28px;
+  font-size: var(--taskon-font-size-xxl);
+  line-height: 1.27;
   color: var(--taskon-color-secondary);
 }
 
@@ -1754,8 +1752,8 @@
 .taskon-quest-rewards-winner-fcfs-row {
   display: flex;
   align-items: baseline;
-  font-size: 18px;
-  line-height: 24px;
+  font-size: var(--taskon-font-size-xl);
+  line-height: 1.33;
 }
 
 .taskon-quest-rewards-winner-available {
@@ -1771,20 +1769,20 @@
 }
 
 .taskon-quest-rewards-winner-label {
-  font-size: 14px;
-  line-height: 16px;
+  font-size: var(--taskon-font-size);
+  line-height: 1.14;
   color: var(--taskon-color-text-secondary);
 }
 
 .taskon-quest-rewards-winner-count {
-  font-size: 22px;
-  line-height: 28px;
+  font-size: var(--taskon-font-size-xxl);
+  line-height: 1.27;
   color: var(--taskon-color-secondary);
 }
 
 .taskon-quest-rewards-winner-ranking {
-  font-size: 22px;
-  line-height: 28px;
+  font-size: var(--taskon-font-size-xxl);
+  line-height: 1.27;
   color: var(--taskon-color-secondary);
 }
 
@@ -1801,8 +1799,8 @@
 }
 
 .taskon-quest-rewards-gas-label {
-  font-size: 14px;
-  line-height: 16px;
+  font-size: var(--taskon-font-size);
+  line-height: 1.14;
   color: var(--taskon-color-text-tertiary);
   white-space: nowrap;
 }
@@ -1914,8 +1912,8 @@
 }
 
 .taskon-quest-rewards-estimated-title {
-  font-size: 14px;
-  line-height: 16px;
+  font-size: var(--taskon-font-size);
+  line-height: 1.14;
   font-weight: 500;
   color: var(--taskon-color-text-secondary);
 }
@@ -1924,8 +1922,8 @@
   display: flex;
   align-items: baseline;
   gap: 4px;
-  font-size: 18px;
-  line-height: 24px;
+  font-size: var(--taskon-font-size-xl);
+  line-height: 1.33;
   font-weight: 600;
   text-align: right;
 }
@@ -1939,22 +1937,22 @@
 }
 
 .taskon-quest-rewards-estimated-formula {
-  font-size: 12px;
-  line-height: 14px;
+  font-size: var(--taskon-font-size-sm);
+  line-height: 1.17;
   color: var(--taskon-color-text-tertiary);
   margin-top: 4px;
 }
 
 .taskon-quest-rewards-estimated-label {
-  font-size: 14px;
-  line-height: 16px;
+  font-size: var(--taskon-font-size);
+  line-height: 1.14;
   font-weight: 500;
   color: var(--taskon-color-text-secondary);
 }
 
 .taskon-quest-rewards-estimated-points {
-  font-size: 18px;
-  line-height: 24px;
+  font-size: var(--taskon-font-size-xl);
+  line-height: 1.33;
   font-weight: 700;
   color: var(--taskon-color-text);
 }
@@ -1964,8 +1962,8 @@
   align-items: center;
   justify-content: space-between;
   gap: 8px;
-  font-size: 14px;
-  line-height: 16px;
+  font-size: var(--taskon-font-size);
+  line-height: 1.14;
   color: var(--taskon-color-text-secondary);
 }
 
@@ -1991,8 +1989,8 @@
 
 .taskon-quest-rewards-estimated-mask-title {
   margin-top: 8px;
-  font-size: 14px;
-  line-height: 16px;
+  font-size: var(--taskon-font-size);
+  line-height: 1.14;
   font-weight: 500;
   color: var(--taskon-color-secondary);
   text-align: center;
@@ -2000,8 +1998,8 @@
 
 .taskon-quest-rewards-estimated-mask-subtitle {
   margin-top: 4px;
-  font-size: 12px;
-  line-height: 14px;
+  font-size: var(--taskon-font-size-sm);
+  line-height: 1.17;
   color: var(--taskon-color-text);
   text-align: center;
 }
@@ -2015,8 +2013,8 @@
 }
 
 .taskon-quest-rewards-bonus-title {
-  font-size: 16px;
-  line-height: 20px;
+  font-size: var(--taskon-font-size-lg);
+  line-height: 1.25;
   font-weight: 500;
   color: var(--taskon-color-text);
 }
@@ -2035,14 +2033,14 @@
 
 .taskon-quest-rewards-bonus-card .taskon-quest-rewards-row-label {
   color: var(--taskon-color-text-secondary);
-  font-size: 16px;
-  line-height: 20px;
+  font-size: var(--taskon-font-size-lg);
+  line-height: 1.25;
 }
 
 .taskon-quest-rewards-bonus-desc {
   color: var(--taskon-color-text-tertiary);
-  font-size: 14px;
-  line-height: 18px;
+  font-size: var(--taskon-font-size);
+  line-height: 1.29;
   text-align: right;
 }
 
@@ -2051,7 +2049,7 @@
   align-items: flex-end;
   color: var(--taskon-color-text);
   text-align: right;
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 600;
   line-height: normal;
 }
@@ -2061,7 +2059,7 @@
 }
 
 .taskon-quest-rewards-bonus-unit {
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 400;
 }
 
@@ -2078,8 +2076,8 @@
   border: none;
   cursor: pointer;
   color: var(--taskon-color-link);
-  font-size: 14px;
-  line-height: 18px;
+  font-size: var(--taskon-font-size);
+  line-height: 1.29;
   transition: opacity 0.2s ease;
 }
 
@@ -2092,12 +2090,12 @@
 }
 
 .taskon-quest-rewards-view-leaderboard-text {
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 400;
 }
 
 .taskon-quest-rewards-view-leaderboard-arrow {
-  font-size: 12px;
+  font-size: var(--taskon-font-size-sm);
   margin-left: 4px;
 }
 
@@ -2109,14 +2107,14 @@
 
 .taskon-quest-leaderboard-title {
   margin: 0;
-  font-size: 24px;
+  font-size: var(--taskon-font-size-xxxl);
   font-weight: 600;
   color: var(--taskon-color-text);
 }
 
 .taskon-quest-leaderboard-subtitle {
   margin: 0;
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   color: var(--taskon-color-text-secondary);
 }
 
@@ -2130,6 +2128,12 @@
   color: var(--taskon-color-text-secondary);
 }
 
+.taskon-quest-leaderboard-error p {
+  margin: 0;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
 .taskon-quest-leaderboard-table {
   margin-top: 8px;
 }
@@ -2216,7 +2220,7 @@
 .taskon-quest-leaderboard-rank {
   display: inline-flex;
   align-items: center;
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 500;
   color: var(--taskon-color-text);
 }
@@ -2224,7 +2228,7 @@
 /* Unranked / N/A 状态 */
 
 .taskon-quest-leaderboard-rank--unranked {
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 500;
   color: var(--taskon-color-text-tertiary);
 }
@@ -2240,7 +2244,7 @@
 /* 层级列 */
 
 .taskon-quest-leaderboard-tier {
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 500;
   color: var(--taskon-color-text);
 }
@@ -2258,7 +2262,7 @@
 
 .taskon-quest-leaderboard-user-badge {
   padding: 2px 8px;
-  font-size: 12px;
+  font-size: var(--taskon-font-size-sm);
   font-weight: 600;
   color: var(--taskon-color-text-on-primary);
   background: var(--taskon-color-secondary);
@@ -2266,7 +2270,7 @@
 }
 
 .taskon-quest-leaderboard-user-name {
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   color: var(--taskon-color-text);
   overflow: hidden;
   text-overflow: ellipsis;
@@ -2276,7 +2280,7 @@
 /* 积分 */
 
 .taskon-quest-leaderboard-points {
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 500;
   color: var(--taskon-color-text);
 }
@@ -2291,25 +2295,25 @@
 }
 
 .taskon-quest-leaderboard-reward-type {
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 600;
   color: var(--taskon-color-text);
 }
 
 .taskon-quest-leaderboard-reward {
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 600;
   color: var(--taskon-color-primary);
 }
 
 .taskon-quest-leaderboard-not-qualified {
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 600;
   color: var(--taskon-color-text-tertiary);
 }
 
 .taskon-quest-leaderboard-no-reward {
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   color: var(--taskon-color-text-tertiary);
 }
 /**
@@ -2385,9 +2389,9 @@
   height: 20px;
   padding: 0 8px;
   border-radius: var(--taskon-border-radius-lg);
-  font-size: 12px;
+  font-size: var(--taskon-font-size-sm);
   font-weight: 600;
-  line-height: 16px;
+  line-height: 1.33;
   text-transform: uppercase;
 }
 
@@ -2417,9 +2421,9 @@
 /* Card message text (for simple messages) */
 
 .taskon-quest-footer-card-message {
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 600;
-  line-height: 24px;
+  line-height: 1.5;
   color: var(--taskon-color-text);
 }
 
@@ -2442,15 +2446,15 @@
 .taskon-quest-footer-title {
   font-size: 20px;
   font-weight: 600;
-  line-height: 28px;
+  line-height: 1.4;
   color: var(--taskon-color-text);
 }
 
 .taskon-quest-footer-desc {
   margin-top: 2px;
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 500;
-  line-height: 18px;
+  line-height: 1.29;
   color: var(--taskon-color-text-tertiary);
 }
 
@@ -2466,7 +2470,7 @@
 .taskon-quest-footer-connect-btn {
   width: 100%;
   padding: 12px 24px;
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 600;
   color: var(--taskon-color-text-on-primary);
   background-color: var(--taskon-color-primary);
@@ -2487,7 +2491,7 @@
 .taskon-quest-footer-complete-btn {
   width: 100%;
   padding: 12px 24px;
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 600;
   color: var(--taskon-color-text-on-primary);
   background-color: var(--taskon-color-primary);
@@ -2547,7 +2551,7 @@
 }
 
 .taskon-quest-footer-earned-hint {
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 500;
   color: var(--taskon-color-text-tertiary);
 }
@@ -2602,14 +2606,14 @@
 }
 
 .taskon-quest-footer-earned-single-type {
-  font-size: 18px;
+  font-size: var(--taskon-font-size-xl);
   font-weight: 600;
-  line-height: 24px;
+  line-height: 1.33;
   color: var(--taskon-color-text);
 }
 
 .taskon-quest-footer-earned-single-name {
-  font-size: 12px;
+  font-size: var(--taskon-font-size-sm);
   font-weight: 500;
   line-height: normal;
   color: var(--taskon-color-text-disabled);
@@ -2625,9 +2629,9 @@
 }
 
 .taskon-quest-footer-earned-multi-text {
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 600;
-  line-height: 24px;
+  line-height: 1.5;
   color: var(--taskon-color-text);
 }
 
@@ -2640,9 +2644,9 @@
 }
 
 .taskon-quest-footer-earned-redirect-text {
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 600;
-  line-height: 24px;
+  line-height: 1.5;
   color: var(--taskon-color-text);
   flex: 1;
 }
@@ -2688,7 +2692,7 @@
   display: flex;
   align-items: center;
   gap: 4px;
-  font-size: 18px;
+  font-size: var(--taskon-font-size-xl);
 }
 
 .taskon-quest-footer-reward-info img {
@@ -2718,7 +2722,7 @@
   display: flex;
   align-items: center;
   gap: 4px;
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   color: var(--taskon-color-text-tertiary);
   cursor: pointer;
   transition: color 0.2s ease;
@@ -2738,7 +2742,7 @@
 
 .taskon-quest-footer-claim-btn {
   padding: 4px 12px;
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 600;
   color: var(--taskon-color-text-on-primary);
   background-color: var(--taskon-color-primary);
@@ -2775,7 +2779,7 @@
    ============================================================================ */
 
 .taskon-quest-footer-earned-more-text {
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 600;
   color: var(--taskon-color-text);
 }
@@ -2805,7 +2809,7 @@
   display: inline-flex;
   align-items: center;
   padding: 2px 6px;
-  font-size: 12px;
+  font-size: var(--taskon-font-size-sm);
   font-weight: 500;
   color: var(--taskon-color-text-on-primary);
   background-color: var(--taskon-color-primary);
@@ -2835,7 +2839,7 @@
   display: flex;
   align-items: center;
   gap: 4px;
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
 }
 
 .taskon-quest-footer-reward-tx-label {
@@ -2857,7 +2861,7 @@
 
 .taskon-quest-footer-reward-dropping {
   margin-top: 4px;
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   color: var(--taskon-color-text-tertiary);
 }
 
@@ -2885,7 +2889,7 @@
 }
 
 .taskon-quest-footer-detail-title {
-  font-size: 22px;
+  font-size: var(--taskon-font-size-xxl);
   font-weight: 600;
   color: var(--taskon-color-text);
   margin: 0 0 20px 0;
@@ -2910,7 +2914,7 @@
 }
 
 .taskon-quest-footer-selection-label {
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 500;
   color: var(--taskon-color-text-secondary);
 }
@@ -2934,8 +2938,8 @@
   display: flex;
   align-items: center;
   gap: 6px;
-  font-size: 14px;
-  line-height: 18px;
+  font-size: var(--taskon-font-size);
+  line-height: 1.29;
   color: var(--taskon-color-text-tertiary);
 }
 
@@ -2950,9 +2954,9 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 500;
-  line-height: 16px;
+  line-height: 1.14;
   color: var(--taskon-color-text);
 }
 
@@ -3029,7 +3033,7 @@
   }
 
 .taskon-quest-footer-detail-bonus-label {
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 500;
   color: var(--taskon-color-text-secondary);
 }
@@ -3040,7 +3044,7 @@
 }
 
 .taskon-quest-footer-detail-bonus-item {
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 600;
   text-align: right;
   color: var(--taskon-color-text);
@@ -3090,15 +3094,17 @@ a.taskon-quest-footer-action-btn {
 .taskon-task-validation-dialog-message {
   margin: 0;
   margin-bottom: 16px;
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   line-height: 1.5;
   color: var(--taskon-color-text);
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 
 .taskon-task-validation-dialog-progress {
   margin: 0;
   margin-bottom: 16px;
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   line-height: 1.5;
   color: var(--taskon-color-text-tertiary);
 }
@@ -3111,7 +3117,7 @@ a.taskon-quest-footer-action-btn {
   border-radius: var(--taskon-border-radius);
   background: var(--taskon-color-primary);
   color: var(--taskon-color-text-on-primary);
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 600;
   cursor: pointer;
   transition: opacity 0.2s ease;
@@ -3136,7 +3142,7 @@ a.taskon-quest-footer-action-btn {
 .taskon-reward-bind-tip {
   margin: 0;
   margin-bottom: 20px;
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   line-height: 1.6;
   color: var(--taskon-color-text-tertiary);
 }
@@ -3163,7 +3169,7 @@ a.taskon-quest-footer-action-btn {
 }
 
 .taskon-reward-bind-item-label {
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 500;
   color: var(--taskon-color-text);
 }
@@ -3172,7 +3178,7 @@ a.taskon-quest-footer-action-btn {
   display: flex;
   align-items: center;
   gap: 6px;
-  font-size: 13px;
+  font-size: var(--taskon-font-size-sm);
   color: var(--taskon-color-secondary);
 }
 
@@ -3185,7 +3191,7 @@ a.taskon-quest-footer-action-btn {
   border-radius: var(--taskon-border-radius-sm);
   background: var(--taskon-color-primary);
   color: var(--taskon-color-text-on-primary);
-  font-size: 13px;
+  font-size: var(--taskon-font-size-sm);
   font-weight: 600;
   cursor: pointer;
   transition: opacity 0.2s ease;
@@ -3223,7 +3229,7 @@ a.taskon-quest-footer-action-btn {
   border-radius: var(--taskon-border-radius);
   background: transparent;
   color: var(--taskon-color-text);
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 500;
   cursor: pointer;
   transition: all 0.2s ease;
@@ -3258,7 +3264,7 @@ a.taskon-quest-footer-action-btn {
 .taskon-discord-bind-dialog-desc {
   margin: 0;
   margin-bottom: 24px;
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   line-height: 1.6;
   color: var(--taskon-color-text-tertiary);
 }
@@ -3274,7 +3280,7 @@ a.taskon-quest-footer-action-btn {
   width: 100%;
   padding: 14px 24px;
   border-radius: var(--taskon-border-radius);
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s ease;
@@ -3326,9 +3332,9 @@ a.taskon-quest-footer-action-btn {
 /* Winners 标签 */
 
 .taskon-quest-winners-row-label {
-  font-size: 18px;
+  font-size: var(--taskon-font-size-xl);
   font-weight: 500;
-  line-height: 23px;
+  line-height: 1.28;
   color: var(--taskon-color-text);
 }
 
@@ -3337,9 +3343,9 @@ a.taskon-quest-footer-action-btn {
 .taskon-quest-winners-row-count {
   flex: 1;
   margin-left: 8px;
-  font-size: 18px;
+  font-size: var(--taskon-font-size-xl);
   font-weight: 600;
-  line-height: 23px;
+  line-height: 1.28;
   text-align: left;
   color: var(--taskon-color-secondary);
 }
@@ -3383,7 +3389,7 @@ a.taskon-quest-footer-action-btn {
   gap: 8px;
   padding: 16px;
   background: var(--taskon-color-bg-surface-strong);
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 500;
   color: var(--taskon-color-text-secondary);
   text-decoration: none;
@@ -3424,7 +3430,7 @@ a.taskon-quest-footer-action-btn {
 }
 
 .taskon-winners-pow-info {
-  font-size: 12px;
+  font-size: var(--taskon-font-size-sm);
   line-height: 1.5;
   color: var(--taskon-color-warning);
   margin-bottom: 16px;
@@ -3457,7 +3463,7 @@ a.taskon-quest-footer-action-btn {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
 }
 
 .taskon-winners-card-label {
@@ -3510,7 +3516,7 @@ a.taskon-quest-footer-action-btn {
 
 .taskon-quest {
   container-type: inline-size;
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   line-height: 1.5;
   color: var(--taskon-color-text);
 }
@@ -3677,13 +3683,15 @@ a.taskon-quest-footer-action-btn {
 
 .taskon-quest-error-message {
   color: var(--taskon-color-error);
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 
 .taskon-quest-error-retry {
   margin-top: 8px;
   padding: 8px 16px;
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   color: var(--taskon-color-text);
   background-color: var(--taskon-color-primary);
   border: none;
@@ -3706,7 +3714,7 @@ a.taskon-quest-footer-action-btn {
   justify-content: center;
   padding: 48px 24px;
   color: var(--taskon-color-text-tertiary);
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
 }
 
 /* ============================================================================
@@ -3773,7 +3781,7 @@ a.taskon-quest-footer-action-btn {
   margin: 0;
   font-size: 28px;
   font-weight: 600;
-  line-height: 38px;
+  line-height: 1.36;
   color: var(--taskon-color-text);
 }
 
@@ -3808,9 +3816,9 @@ a.taskon-quest-footer-action-btn {
 }
 
 .taskon-quest-countdown-label {
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 400;
-  line-height: 20px;
+  line-height: 1.43;
   color: var(--taskon-color-text-secondary);
 }
 
@@ -3822,9 +3830,9 @@ a.taskon-quest-footer-action-btn {
 }
 
 .taskon-quest-countdown-value {
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 600;
-  line-height: 20px;
+  line-height: 1.43;
   color: var(--taskon-color-primary);
 }
 
@@ -3839,16 +3847,16 @@ a.taskon-quest-footer-action-btn {
   flex-direction: column;
   gap: 2px;
   min-width: 0;
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 500;
-  line-height: 20px;
+  line-height: 1.43;
   color: var(--taskon-color-text-secondary);
 }
 
 .taskon-quest-time-range-timezone {
-  font-size: 12px;
+  font-size: var(--taskon-font-size-sm);
   font-weight: 500;
-  line-height: 16px;
+  line-height: 1.33;
   color: var(--taskon-color-text-tertiary);
 }
 
@@ -3899,9 +3907,9 @@ a.taskon-quest-footer-action-btn {
 
 .taskon-quest-desc-text {
   margin: 0;
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 400;
-  line-height: 24px;
+  line-height: 1.5;
   color: var(--taskon-color-text-secondary);
   max-height: 120px;
   overflow: hidden;
@@ -3972,9 +3980,9 @@ a.taskon-quest-footer-action-btn {
 }
 
 .taskon-quest-desc-more {
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 600;
-  line-height: 24px;
+  line-height: 1.5;
   color: var(--taskon-color-text);
   text-decoration: underline;
   text-decoration-skip-ink: none;
@@ -4017,9 +4025,9 @@ a.taskon-quest-footer-action-btn {
 
 .taskon-quest-tasks-title {
   margin: 0;
-  font-size: 24px;
+  font-size: var(--taskon-font-size-xxxl);
   font-weight: 600;
-  line-height: 32px;
+  line-height: 1.33;
   color: var(--taskon-color-text);
 }
 
@@ -4040,14 +4048,14 @@ a.taskon-quest-footer-action-btn {
   background: var(--taskon-color-bg-surface-strong);
   border: 1px solid var(--taskon-color-border-secondary);
   border-radius: var(--taskon-border-radius);
-  font-size: 18px;
+  font-size: var(--taskon-font-size-xl);
   font-weight: 600;
   color: var(--taskon-color-text);
 }
 
 .taskon-quest-task-template {
   color: var(--taskon-color-text-disabled);
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 500;
 }
 
@@ -4057,9 +4065,9 @@ a.taskon-quest-footer-action-btn {
   width: 100%;
   margin-top: var(--taskon-spacing-lg);
   padding: var(--taskon-spacing-md) var(--taskon-spacing-xl);
-  font-size: 18px;
+  font-size: var(--taskon-font-size-xl);
   font-weight: 600;
-  line-height: 24px;
+  line-height: 1.33;
   color: var(--taskon-color-text-on-primary);
   background-color: var(--taskon-color-primary);
   border: none;
@@ -4094,9 +4102,9 @@ a.taskon-quest-footer-action-btn {
 
 .taskon-quest-winners-section-title {
   margin: 0;
-  font-size: 24px;
+  font-size: var(--taskon-font-size-xxxl);
   font-weight: 600;
-  line-height: 32px;
+  line-height: 1.33;
   color: var(--taskon-color-text);
 }
 
@@ -4112,9 +4120,9 @@ a.taskon-quest-footer-action-btn {
 
 .taskon-quest-rewards-section-title {
   margin: 0;
-  font-size: 24px;
+  font-size: var(--taskon-font-size-xxxl);
   font-weight: 600;
-  line-height: 32px;
+  line-height: 1.33;
   color: var(--taskon-color-text);
 }
 
@@ -4130,9 +4138,9 @@ a.taskon-quest-footer-action-btn {
 
 .taskon-quest-rewards-title {
   margin: 0;
-  font-size: 24px;
+  font-size: var(--taskon-font-size-xxxl);
   font-weight: 600;
-  line-height: 32px;
+  line-height: 1.33;
   color: var(--taskon-color-text);
 }
 
@@ -4149,7 +4157,7 @@ a.taskon-quest-footer-action-btn {
   padding: var(--taskon-spacing-md);
   background-color: var(--taskon-color-border-secondary);
   border-radius: var(--taskon-border-radius-lg);
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   color: var(--taskon-color-text);
 }
 
@@ -4172,7 +4180,7 @@ a.taskon-quest-footer-action-btn {
   margin: 0;
   font-size: 20px;
   font-weight: 600;
-  line-height: 28px;
+  line-height: 1.4;
   color: var(--taskon-color-text);
 }
 
@@ -4188,9 +4196,9 @@ a.taskon-quest-footer-action-btn {
 
 .taskon-quest-participants-title {
   margin: 0;
-  font-size: 24px;
+  font-size: var(--taskon-font-size-xxxl);
   font-weight: 600;
-  line-height: 32px;
+  line-height: 1.33;
   color: var(--taskon-color-text);
 }
 
@@ -4198,9 +4206,9 @@ a.taskon-quest-footer-action-btn {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 500;
-  line-height: 24px;
+  line-height: 1.5;
 }
 
 .taskon-quest-participants-label {
@@ -4248,8 +4256,8 @@ a.taskon-quest-footer-action-btn {
 
   .taskon-quest-countdown-label,
   .taskon-quest-countdown-value {
-    font-size: 16px;
-    line-height: 24px;
+    font-size: var(--taskon-font-size-lg);
+    line-height: 1.5;
   }
 
   .taskon-quest-countdown-divider {
@@ -4264,15 +4272,15 @@ a.taskon-quest-footer-action-btn {
     flex: 0 1 auto;
     flex-direction: row;
     gap: 8px;
-    font-size: 16px;
+    font-size: var(--taskon-font-size-lg);
     font-weight: 400;
-    line-height: 24px;
+    line-height: 1.5;
   }
 
   .taskon-quest-time-range-timezone {
-    font-size: 16px;
+    font-size: var(--taskon-font-size-lg);
     font-weight: 400;
-    line-height: 24px;
+    line-height: 1.5;
     color: var(--taskon-color-text-secondary);
   }
 
@@ -4351,8 +4359,8 @@ a.taskon-quest-footer-action-btn {
 
   .taskon-quest-countdown-label,
   .taskon-quest-countdown-value {
-    font-size: 16px;
-    line-height: 24px;
+    font-size: var(--taskon-font-size-lg);
+    line-height: 1.5;
   }
 
   .taskon-quest-countdown-divider {
@@ -4367,15 +4375,15 @@ a.taskon-quest-footer-action-btn {
     flex: 0 1 auto;
     flex-direction: row;
     gap: 8px;
-    font-size: 16px;
+    font-size: var(--taskon-font-size-lg);
     font-weight: 400;
-    line-height: 24px;
+    line-height: 1.5;
   }
 
   .taskon-quest-time-range-timezone {
-    font-size: 16px;
+    font-size: var(--taskon-font-size-lg);
     font-weight: 400;
-    line-height: 24px;
+    line-height: 1.5;
     color: var(--taskon-color-text-secondary);
   }
 
@@ -4428,7 +4436,6 @@ a.taskon-quest-footer-action-btn {
    ============================================================================ */
 
 .taskon-quest-blindbox-dialog-wrapper {
-  background: var(--taskon-color-bg-surface);
   padding: 0;
   width: auto;
   max-width: 560px;
@@ -4438,13 +4445,10 @@ a.taskon-quest-footer-action-btn {
   padding: 0;
 }
 
-.taskon-quest-blindbox-reward-wrapper {
-  background: var(--taskon-color-bg-surface);
-  padding: 0;
-  width: auto;
+.taskon-quest-blindbox-dialog-wrapper--result {
   max-width: 560px;
 }
 
-.taskon-quest-blindbox-reward-wrapper .taskon-dialog-body {
+.taskon-quest-blindbox-dialog-wrapper--result .taskon-dialog-body {
   padding: 0;
 }